diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index 048ff10c3..ea5b2f04a 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -40,6 +40,7 @@ During the alpha period, things might break! We take breaking changes very serio - Added a new free component: `` (#2 of 14 per stretch goals) - Added a `min-block-size` to `` to ensure the divider is visible regardless of container height [issue:675] - Added `--checked-icon-scale` to `` +- Added `--tag-max-size` to `` when using `multiple` - Fixed a bug in `` that caused radios to uncheck when assigning a numeric value [issue:924] - Fixed `` so dividers properly show between buttons - Fixed the tooltip position in `` when using RTL diff --git a/packages/webawesome/src/components/select/select.css b/packages/webawesome/src/components/select/select.css index 73bda88c5..5c25cda13 100644 --- a/packages/webawesome/src/components/select/select.css +++ b/packages/webawesome/src/components/select/select.css @@ -6,7 +6,7 @@ label:has(select), --outlined-text-color: var(--wa-form-control-value-color); --border-width: var(--wa-form-control-border-width); --box-shadow: initial; - --tag-max-length: 8ch; + --tag-max-size: 8ch; } /* Add ellipses to multi select options */ @@ -15,7 +15,7 @@ label:has(select), white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - max-width: var(--tag-max-length); + max-width: var(--tag-max-size); } :host .disabled [part~='combobox'] { diff --git a/packages/webawesome/src/components/select/select.ts b/packages/webawesome/src/components/select/select.ts index 897e8c322..5e2f832b7 100644 --- a/packages/webawesome/src/components/select/select.ts +++ b/packages/webawesome/src/components/select/select.ts @@ -79,6 +79,7 @@ import styles from './select.css'; * @cssproperty --border-color - The border color of the select's combobox. * @cssproperty --border-width - The width of the select's borders, including the listbox. * @cssproperty --box-shadow - The shadow effects around the edges of the select's combobox. + * @cssproperty [--tag-max-size=8ch] - When using `multiple`, the max size of tags before their content is truncated. * * @cssstate blank - The select is empty. */