@solid-design-system/components 4.11.0 → 5.0.0

package/dist/internal/animate.d.ts

@@ -1,7 +1,7 @@
 interface ExtendedKeyframeAnimationOptions extends KeyframeAnimationOptions {
     reducedMotion?: 'allow';
 }
-export declare function cssVar(expression: string, el: HTMLElement): string;
+export declare function cssVar(expression: string, el: HTMLElement): string | null;
 export declare function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: ExtendedKeyframeAnimationOptions): Promise<unknown>;
 export declare function parseDuration(delay: number | string): number;
 export declare function prefersReducedMotion(): boolean;

package/dist/internal/animate.js

@@ -4,7 +4,7 @@ export function cssVar(expression, el) {
         return expression;
     const [, variable, fallback] = match;
     const value = getComputedStyle(el).getPropertyValue(variable).trim();
-    return value || fallback || '';
+    return value || fallback || null;
 }
 export function animateTo(el, keyframes, options) {
     return new Promise(resolve => {
@@ -12,7 +12,7 @@ export function animateTo(el, keyframes, options) {
             throw new Error('Promise-based animations must be finite.');
         }
         const reducedMotion = prefersReducedMotion();
-        const duration = typeof options.duration === 'string' ? parseDuration(cssVar(options.duration, el)) : options.duration;
+        const duration = typeof options.duration === 'string' ? parseDuration(cssVar(options.duration, el) ?? '') : options.duration;
         const animation = el.animate(keyframes, {
             ...options,
             duration: reducedMotion && options?.reducedMotion !== 'allow' ? 0 : duration

package/dist/internal/solid-element.js

@@ -55,7 +55,10 @@ export default class SolidElement extends LitElement {
     }
     token(name, fallback) {
         const value = cssVar(`var(--${name})`, this);
-        return tokenProcessors[name]?.(value) ?? fallback;
+        if (value === null) {
+            return fallback;
+        }
+        return tokenProcessors[name]?.(value) ?? value ?? fallback;
     }
 }
 __decorate([

package/dist/solid-components.js

@@ -4,180 +4,180 @@ import {
 import "./chunks/chunk.HAL7R4WT.js";
 import {
   SdTabPanel
-} from "./chunks/chunk.6V7KPUGO.js";
+} from "./chunks/chunk.QDFEG22S.js";
 import {
   SdTeaser
-} from "./chunks/chunk.VUKS4CBF.js";
+} from "./chunks/chunk.AUFB3CF2.js";
 import {
   SdTeaserMedia
-} from "./chunks/chunk.CWJB3CZO.js";
+} from "./chunks/chunk.EYYHIJ7Q.js";
 import {
   SdTextarea
-} from "./chunks/chunk.ZMWGNTP6.js";
+} from "./chunks/chunk.F5WZXOGP.js";
 import {
   SdTooltip
-} from "./chunks/chunk.JQD4QY3H.js";
+} from "./chunks/chunk.Q7ULKBP6.js";
 import {
   SdVideo
-} from "./chunks/chunk.LW7RVQTS.js";
+} from "./chunks/chunk.M7TUM74F.js";
 import {
   SdScrollable
-} from "./chunks/chunk.KWP3CREC.js";
+} from "./chunks/chunk.3MARQHUW.js";
 import {
   SdSelect
-} from "./chunks/chunk.BWIRKW7E.js";
+} from "./chunks/chunk.4JPDAEAZ.js";
 import {
   SdStep
-} from "./chunks/chunk.LQKJMBVH.js";
+} from "./chunks/chunk.SOAF3TY4.js";
 import {
   SdStepGroup
-} from "./chunks/chunk.CMK6UTW6.js";
+} from "./chunks/chunk.GCNQNIVQ.js";
 import {
   SdSwitch
-} from "./chunks/chunk.ZXC3A5GK.js";
+} from "./chunks/chunk.NMI37BFS.js";
 import {
   SdTab
-} from "./chunks/chunk.EQRUJQQW.js";
+} from "./chunks/chunk.XI3IZCLB.js";
 import {
   SdTabGroup
-} from "./chunks/chunk.VOWE6LHF.js";
+} from "./chunks/chunk.PK3XZW2G.js";
 import {
   SdNotification
-} from "./chunks/chunk.BABTMD4T.js";
+} from "./chunks/chunk.2BVPWR2S.js";
 import {
   SdOptgroup
-} from "./chunks/chunk.E73VDVFB.js";
+} from "./chunks/chunk.RHQ6U3DB.js";
 import {
   SdOption
-} from "./chunks/chunk.GAJFV5V3.js";
+} from "./chunks/chunk.4PVTBZ45.js";
 import {
   SdPopup
-} from "./chunks/chunk.C4WMHAOW.js";
+} from "./chunks/chunk.MGUEJDPC.js";
 import {
   SdQuickfact
-} from "./chunks/chunk.EYTEM45R.js";
+} from "./chunks/chunk.OGWBQ3DK.js";
 import {
   SdRadioButton
-} from "./chunks/chunk.LOW4LWP6.js";
+} from "./chunks/chunk.5TXDZ6OQ.js";
 import {
   SdRadioGroup
-} from "./chunks/chunk.QCQLFJGJ.js";
+} from "./chunks/chunk.ENBSTUKA.js";
 import {
   SdRadio
-} from "./chunks/chunk.KNZPI3QD.js";
+} from "./chunks/chunk.K3HF3JA4.js";
 import {
   SdInclude
-} from "./chunks/chunk.B7BIS5Y4.js";
+} from "./chunks/chunk.357PR2IB.js";
 import {
   SdInput
-} from "./chunks/chunk.H36YEYQD.js";
+} from "./chunks/chunk.X7HYCD3E.js";
 import {
   SdLink
-} from "./chunks/chunk.4TLTIOIY.js";
+} from "./chunks/chunk.4J3ZCSIH.js";
 import {
   SdMapMarker
-} from "./chunks/chunk.4UEQEUQ5.js";
+} from "./chunks/chunk.QQHF7ENZ.js";
 import {
   SdNavigationItem
-} from "./chunks/chunk.F4UAU4OM.js";
+} from "./chunks/chunk.YTDXH4KI.js";
 import {
   SdDropdown
-} from "./chunks/chunk.4LV4VHB5.js";
+} from "./chunks/chunk.QF3WLERT.js";
 import {
   SdExpandable
-} from "./chunks/chunk.O7OXBLZU.js";
+} from "./chunks/chunk.MJ3MZ7IA.js";
 import {
   SdFlipcard
-} from "./chunks/chunk.27LAMXW5.js";
+} from "./chunks/chunk.7GKULTU7.js";
 import {
   SdHeader
-} from "./chunks/chunk.RWUFX5GL.js";
+} from "./chunks/chunk.73ZM47SZ.js";
 import {
   SdCheckbox
-} from "./chunks/chunk.JNJHWACL.js";
+} from "./chunks/chunk.P4BL4RSV.js";
 import {
   SdCheckboxGroup
-} from "./chunks/chunk.JNTED6KG.js";
+} from "./chunks/chunk.G3LCJLER.js";
 import {
   SdCombobox
-} from "./chunks/chunk.QTZYBV5A.js";
+} from "./chunks/chunk.V5HD2RQH.js";
 import {
   SdTag
-} from "./chunks/chunk.C2LS4326.js";
+} from "./chunks/chunk.ZAWI6TGO.js";
 import "./chunks/chunk.GI7VDIWX.js";
 import "./chunks/chunk.WBJBQ4QI.js";
 import "./chunks/chunk.UIQBHPD3.js";
 import {
   SdDialog
-} from "./chunks/chunk.DYRAOE5L.js";
+} from "./chunks/chunk.3AQM6FKF.js";
 import {
   SdDivider
-} from "./chunks/chunk.BJSTXBIQ.js";
+} from "./chunks/chunk.AH4MJVKG.js";
 import {
   SdDrawer
-} from "./chunks/chunk.IFJ7LPJV.js";
+} from "./chunks/chunk.QHQBGFCN.js";
 import "./chunks/chunk.UFBRSKVR.js";
 import "./chunks/chunk.XHCTCU2Q.js";
 import "./chunks/chunk.WDWV53JP.js";
 import {
   SdBadge
-} from "./chunks/chunk.7VCFYOV5.js";
+} from "./chunks/chunk.QZCGIMWI.js";
 import {
   SdBrandshape
-} from "./chunks/chunk.ERRAXV4M.js";
-import "./chunks/chunk.MSSKOOJJ.js";
+} from "./chunks/chunk.MBOP4XDK.js";
+import "./chunks/chunk.YTDKF4U7.js";
 import {
   SdCarousel
-} from "./chunks/chunk.ULQU6P3E.js";
+} from "./chunks/chunk.F4LWSCE7.js";
 import "./chunks/chunk.F4VGSDIW.js";
-import "./chunks/chunk.DLBXYZN6.js";
+import "./chunks/chunk.FNYEXUNK.js";
 import "./chunks/chunk.NOWCQZBS.js";
 import {
   SdCarouselItem
-} from "./chunks/chunk.X7IRGFBS.js";
+} from "./chunks/chunk.P3M4RPHM.js";
 import {
   SdAccordionGroup
-} from "./chunks/chunk.NI45NXZV.js";
+} from "./chunks/chunk.WM4AGOIZ.js";
 import {
   SdAccordion
-} from "./chunks/chunk.R3PPZNKA.js";
+} from "./chunks/chunk.BLQFQXCU.js";
 import "./chunks/chunk.N4LHE3QK.js";
 import "./chunks/chunk.B4BZKR24.js";
 import {
   SdAnimation
-} from "./chunks/chunk.QEQDPEN2.js";
+} from "./chunks/chunk.O6YESZHA.js";
 import "./chunks/chunk.TJOP7HQP.js";
 import {
   SdAudio
-} from "./chunks/chunk.ECH5BTRG.js";
+} from "./chunks/chunk.M2VTLBRP.js";
 import {
   SdButton
-} from "./chunks/chunk.HEYBJG64.js";
+} from "./chunks/chunk.75VFJ3VZ.js";
 import {
   SdSpinner
-} from "./chunks/chunk.T5QL4V5F.js";
+} from "./chunks/chunk.2FRKOJLK.js";
 import "./chunks/chunk.KVKRZJS7.js";
 import "./chunks/chunk.YEZS5ZR2.js";
 import {
   SdIcon
-} from "./chunks/chunk.YGRJQZFR.js";
+} from "./chunks/chunk.P775L6OS.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "./chunks/chunk.7WEXXSFH.js";
+} from "./chunks/chunk.OC7IH3HF.js";
 import "./chunks/chunk.P52GZVKG.js";
 import "./chunks/chunk.RPB53XXV.js";
 import "./chunks/chunk.7VPFFNHR.js";
+import "./chunks/chunk.YNSZZDYQ.js";
 import "./chunks/chunk.4TPOL3LB.js";
-import "./chunks/chunk.XS4QJO4N.js";
 import {
   LocalizeController
 } from "./chunks/chunk.YKM42GKF.js";
 import "./chunks/chunk.WEDOS4Q6.js";
 import "./chunks/chunk.CVCJY3ME.js";
 import "./chunks/chunk.X2OQMWGY.js";
-import "./chunks/chunk.OWACJFST.js";
-import "./chunks/chunk.25AH7KN2.js";
+import "./chunks/chunk.DXLUBAVX.js";
+import "./chunks/chunk.HQWAKJBV.js";
 import "./chunks/chunk.POFWU6ZT.js";
 import "./chunks/chunk.S3NI7NKU.js";
 export {

package/dist/utilities/autocomplete-config.js

@@ -1,9 +1,9 @@
 import {
   setupAutocomplete
 } from "../chunks/chunk.6DKXZWRN.js";
-import "../chunks/chunk.C4WMHAOW.js";
-import "../chunks/chunk.OWACJFST.js";
-import "../chunks/chunk.25AH7KN2.js";
+import "../chunks/chunk.MGUEJDPC.js";
+import "../chunks/chunk.DXLUBAVX.js";
+import "../chunks/chunk.HQWAKJBV.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   setupAutocomplete

package/dist/utilities/icon-library.js

@@ -2,10 +2,10 @@ import "../chunks/chunk.HAL7R4WT.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.7WEXXSFH.js";
+} from "../chunks/chunk.OC7IH3HF.js";
 import "../chunks/chunk.7VPFFNHR.js";
+import "../chunks/chunk.YNSZZDYQ.js";
 import "../chunks/chunk.4TPOL3LB.js";
-import "../chunks/chunk.XS4QJO4N.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   registerIconLibrary,

package/dist/vscode.html-custom-data.json

@@ -571,6 +571,48 @@
         }
       ]
     },
+    {
+      "name": "sd-checkbox-group",
+      "description": "Checkbox groups are used to group multiple [checkbox](/components/checkbox). It provides only presentational functionality.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The default slot where `<sd-checkbox>` elements are placed.\n- **label** - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **tooltip** - An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
+      "attributes": [
+        {
+          "name": "size",
+          "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
+          "values": [{ "name": "lg" }, { "name": "md" }, { "name": "sm" }]
+        },
+        {
+          "name": "orientation",
+          "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
+          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
+        },
+        {
+          "name": "label",
+          "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
+          "values": []
+        },
+        {
+          "name": "help-text",
+          "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
+          "values": []
+        },
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-checkbox-group--docs"
+        }
+      ]
+    },
     {
       "name": "sd-combobox",
       "description": "Comboboxes allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **sd-change** - Emitted when the control's value changes.\n- **sd-clear** - Emitted when the control's value is cleared.\n- **sd-input** - Emitted when the control receives input.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-blur** - Emitted when the control loses focus.\n- **sd-show** - Emitted when the combobox's menu opens.\n- **sd-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **sd-hide** - Emitted when the combobox's menu closes.\n- **sd-after-hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **sd-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **sd-error** - Emitted when the combobox menu fails to open.\n\n### **Methods:**\n - **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<sd-option>` elements. You can use `<sd-optgroup>`'s to group items visually.\n- **label** - The combobox's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the combobox. Alternatively, you can use the `help-text` attribute.\n- **left** - Used to prepend a presentational icon or similar element to the combobox.\n- **right** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n\n### **CSS Properties:**\n - **--tag-max-width** - Set the maximum width of the tags and to show an ellipsis. Defaults to \"15ch\" _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, combobox, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container that wraps the prefix, combobox, clear icon, and expand button.\n- **left** - The container that wraps the left icon slot.\n- **right** - The container that wraps the right icon slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where the options are slotted and the filtered options list exists.\n- **filtered-listbox** - The container that wraps the filtered options.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
@@ -923,7 +965,7 @@
     },
     {
       "name": "sd-expandable",
-      "description": "Expandable shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the expandable opens.\n- **sd-after-show** - Emitted after the expandable opens and all animations are complete.\n- **sd-hide** - Emitted when the expandable closes.\n- **sd-after-hide** - Emitted after the expandable closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Opens the expandable\n- **hide()** - Closes the expandable\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - Content of the expandable\n- **toggle-open** - Content of the toggle button when the expandable is open\n- **toggle-closed** - Content of the toggle button when the expandable is closed\n\n### **CSS Properties:**\n - **--gradient-color-start** - Start color of the gradient. Set the opacity to 0 (default: rgba(255, 255, 255, 0)) _(default: undefined)_\n- **--gradient-color-end** - End color of the gradient. Set the opacity to 1 (default: rgba(255, 255, 255, 1)) _(default: undefined)_\n- **--gradient-height** - Height of the gradient (default: 24px) _(default: undefined)_\n- **--component-expandable-max-block-size** - Different value for initial visible block (default: 90px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The content of the expandable.\n- **toggle** - The toggle button of the expandable.\n- **summary** - The summary of the expandable.\n- **details** - The details element of the expandable.",
+      "description": "Expandable shows a brief summary and expands to show additional content.\n---\n\n\n### **Events:**\n - **sd-show** - Emitted when the expandable opens.\n- **sd-after-show** - Emitted after the expandable opens and all animations are complete.\n- **sd-hide** - Emitted when the expandable closes.\n- **sd-after-hide** - Emitted after the expandable closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Opens the expandable\n- **hide()** - Closes the expandable\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - Content of the expandable\n- **toggle-open** - Content of the toggle button when the expandable is open\n- **toggle-closed** - Content of the toggle button when the expandable is closed\n- **expand-icon** - The icon of the toggle button when the expandable is closed\n- **collapse-icon** - The icon of the toggle button when the expandable is open\n\n### **CSS Properties:**\n - **--gradient-color-start** - Start color of the gradient. Set the opacity to 0 (default: rgba(255, 255, 255, 0)) _(default: undefined)_\n- **--gradient-color-end** - End color of the gradient. Set the opacity to 1 (default: rgba(255, 255, 255, 1)) _(default: undefined)_\n- **--gradient-height** - Height of the gradient (default: 24px) _(default: undefined)_\n- **--component-expandable-max-block-size** - Different value for initial visible block (default: 90px) _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The content of the expandable.\n- **toggle** - The toggle button of the expandable.\n- **toggle-icon** - The wrapper of the toggle icons.\n- **summary** - The summary of the expandable.\n- **details** - The details element of the expandable.",
       "attributes": [
         {
           "name": "open",
@@ -2529,48 +2571,6 @@
         }
       ]
     },
-    {
-      "name": "sd-checkbox-group",
-      "description": "Checkbox groups are used to group multiple [checkbox](/components/checkbox). It provides only presentational functionality.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The default slot where `<sd-checkbox>` elements are placed.\n- **label** - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **tooltip** - An optional tooltip that helps describe the checkbox-group. Use this slot with the `sd-tooltip` component.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
-      "attributes": [
-        {
-          "name": "size",
-          "description": "The checkbox group's size. This size will be applied to the label, all child checkboxes.",
-          "values": [{ "name": "lg" }, { "name": "md" }, { "name": "sm" }]
-        },
-        {
-          "name": "orientation",
-          "description": "The orientation property determines the alignment of the component's content or elements. It accepts two possible\nvalues: 'horizontal' and 'vertical'. The default value is 'vertical'.\nThis property allows you to control the visual layout and arrangement of elements within the component, providing\nflexibility in how the component is displayed based on your specific design needs.",
-          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
-        },
-        {
-          "name": "label",
-          "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
-          "values": []
-        },
-        {
-          "name": "help-text",
-          "description": "The element help text. If you need to display HTML, use the `help-text` slot instead.",
-          "values": []
-        },
-        {
-          "name": "dir",
-          "description": "The element's directionality.",
-          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
-        },
-        {
-          "name": "lang",
-          "description": "The element's language.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-checkbox-group--docs"
-        }
-      ]
-    },
     {
       "name": "sd-tag",
       "description": "Tags are used as labels to organize things or to indicate a selection.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the tag loses focus.\n- **sd-focus** - Emitted when the tag gains focus.\n- **sd-remove** - Emitted when the remove button is activated.\n- **sd-hide** - Emitted when the hide method is triggered.\n- **sd-after-hide** - Emitted after the tag is hidden and all animations are complete.\n\n### **Methods:**\n - **click()** - Simulates a click on the tag.\n- **focus(options: _FocusOptions_)** - Sets focus on the tag.\n- **blur()** - Removes focus from the tag.\n- **hide()** - Visually hides the tag\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The tag's content.\n- **removable-indicator** - The tag's removability indicator.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **content** - The tag's content.\n- **removable-indicator** - The tag's removability indicator.",