@govtechsg/sgds-web-component 3.0.0-rc.6 → 3.0.1

package/components/Card/sgds-card.d.ts

@@ -24,11 +24,11 @@ export declare class SgdsCard extends CardElement {
     stretchedLink: boolean;
     /** Disables the card  */
     disabled: boolean;
-    /** Sets the orientation of the card */
+    /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
     orientation: CardOrientation;
-    /** Sets the orientation of the card */
+    /** Sets the image position of the card. Available options: `before`, `after` */
     imagePosition: CardImagePosition;
-    /** Sets the orientation of the card */
+    /** Sets the orientation of the card. Available options: `default`, `padding around`, `aspect ratio` */
     imageAdjustment: CardImageAdjustment;
     protected firstUpdated(): void;
     handleTitleSlotChange(e: Event): void;

package/components/Card/sgds-card.js

@@ -20,11 +20,11 @@ class SgdsCard extends CardElement {
         this.stretchedLink = false;
         /** Disables the card  */
         this.disabled = false;
-        /** Sets the orientation of the card */
+        /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
         this.orientation = "vertical";
-        /** Sets the orientation of the card */
+        /** Sets the image position of the card. Available options: `before`, `after` */
         this.imagePosition = "before";
-        /** Sets the orientation of the card */
+        /** Sets the orientation of the card. Available options: `default`, `padding around`, `aspect ratio` */
         this.imageAdjustment = "default";
     }
     firstUpdated() {

package/components/Card/sgds-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-card.js","sources":["../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { html, literal } from \"lit/static-html.js\";\nimport { property, query, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport cardStyle from \"./card.css\";\n\nexport type CardImageAdjustment = \"default\" | \"padding around\" | \"aspect ratio\";\nexport type CardImagePosition = \"before\" | \"after\";\nexport type CardOrientation = \"vertical\" | \"horizontal\";\n\n/**\n * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  /** @internal */\n  @query(\"a.card\") card: HTMLAnchorElement;\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"image\", flatten: true })\n  _imageNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"icon\", flatten: true })\n  _iconNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"link\", flatten: true })\n  _linkNode!: Array<Node>;\n\n  /** Extends the link passed in slot[name=\"link\"] to the entire card */\n  @property({ type: Boolean, reflect: true }) stretchedLink = false;\n\n  /** Disables the card  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Sets the orientation of the card */\n  @property({ type: String, reflect: true }) orientation: CardOrientation = \"vertical\";\n\n  /** Sets the orientation of the card */\n  @property({ type: String, reflect: true }) imagePosition: CardImagePosition = \"before\";\n\n  /** Sets the orientation of the card */\n  @property({ type: String, reflect: true }) imageAdjustment: CardImageAdjustment = \"default\";\n\n  protected firstUpdated() {\n    if (this._imageNode.length === 0) {\n      const icon = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n      icon.style.display = \"none\";\n    }\n    if (this._iconNode.length === 0) {\n      const icon = this.shadowRoot.querySelector(\".card-icon\") as HTMLDivElement;\n      icon.style.display = \"none\";\n    }\n    if (this.disabled && this._linkNode.length > 0) {\n      const hyperlink = (this._linkNode[0] as HTMLLinkElement).querySelector(\"a\");\n      hyperlink.setAttribute(\"disabled\", \"true\");\n      hyperlink.removeAttribute(\"href\");\n    }\n  }\n\n  handleTitleSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLElement>;\n\n    if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {\n      const hyperlink = childNodes[0].querySelector(\"a\") || childNodes[0];\n      hyperlink.removeAttribute(\"href\");\n    }\n    return;\n  }\n\n  handleLinkSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as\n      | Array<HTMLLinkElement>\n      | Array<HTMLAnchorElement>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's link slot\");\n    }\n\n    if (this.stretchedLink) {\n      const hyperlink = childNodes[0].querySelector(\"a\") || childNodes[0];\n      this.card.setAttribute(\"href\", hyperlink.href);\n      const linkSlot = this.shadowRoot.querySelector(\"slot[name='link']\") as HTMLSlotElement;\n      linkSlot.style.display = \"none\";\n    }\n    return;\n  }\n\n  handleImgSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        <div class=\"card-image\">\n          <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n        </div>\n        <div class=\"card-icon\">\n          <slot name=\"icon\"></slot>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"card-header\">\n            <slot name=\"subtitle\"></slot>\n            <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n          </div>\n          <p class=\"card-text\">\n            <slot name=\"description\"></slot>\n          </p>\n          <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["cardStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-card.js","sources":["../../../src/components/Card/sgds-card.ts"],"sourcesContent":["import { html, literal } from \"lit/static-html.js\";\nimport { property, query, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport cardStyle from \"./card.css\";\n\nexport type CardImageAdjustment = \"default\" | \"padding around\" | \"aspect ratio\";\nexport type CardImagePosition = \"before\" | \"after\";\nexport type CardOrientation = \"vertical\" | \"horizontal\";\n\n/**\n * @summary Cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.\n */\nexport class SgdsCard extends CardElement {\n  static styles = [...CardElement.styles, cardStyle];\n\n  /** @internal */\n  @query(\"a.card\") card: HTMLAnchorElement;\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"image\", flatten: true })\n  _imageNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"icon\", flatten: true })\n  _iconNode!: Array<Node>;\n  /** @internal */\n  @queryAssignedNodes({ slot: \"link\", flatten: true })\n  _linkNode!: Array<Node>;\n\n  /** Extends the link passed in slot[name=\"link\"] to the entire card */\n  @property({ type: Boolean, reflect: true }) stretchedLink = false;\n\n  /** Disables the card  */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */\n  @property({ type: String, reflect: true }) orientation: CardOrientation = \"vertical\";\n\n  /** Sets the image position of the card. Available options: `before`, `after` */\n  @property({ type: String, reflect: true }) imagePosition: CardImagePosition = \"before\";\n\n  /** Sets the orientation of the card. Available options: `default`, `padding around`, `aspect ratio` */\n  @property({ type: String, reflect: true }) imageAdjustment: CardImageAdjustment = \"default\";\n\n  protected firstUpdated() {\n    if (this._imageNode.length === 0) {\n      const icon = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n      icon.style.display = \"none\";\n    }\n    if (this._iconNode.length === 0) {\n      const icon = this.shadowRoot.querySelector(\".card-icon\") as HTMLDivElement;\n      icon.style.display = \"none\";\n    }\n    if (this.disabled && this._linkNode.length > 0) {\n      const hyperlink = (this._linkNode[0] as HTMLLinkElement).querySelector(\"a\");\n      hyperlink.setAttribute(\"disabled\", \"true\");\n      hyperlink.removeAttribute(\"href\");\n    }\n  }\n\n  handleTitleSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLElement>;\n\n    if (this.stretchedLink && childNodes[0] instanceof HTMLAnchorElement) {\n      const hyperlink = childNodes[0].querySelector(\"a\") || childNodes[0];\n      hyperlink.removeAttribute(\"href\");\n    }\n    return;\n  }\n\n  handleLinkSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as\n      | Array<HTMLLinkElement>\n      | Array<HTMLAnchorElement>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's link slot\");\n    }\n\n    if (this.stretchedLink) {\n      const hyperlink = childNodes[0].querySelector(\"a\") || childNodes[0];\n      this.card.setAttribute(\"href\", hyperlink.href);\n      const linkSlot = this.shadowRoot.querySelector(\"slot[name='link']\") as HTMLSlotElement;\n      linkSlot.style.display = \"none\";\n    }\n    return;\n  }\n\n  handleImgSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        <div class=\"card-image\">\n          <slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n        </div>\n        <div class=\"card-icon\">\n          <slot name=\"icon\"></slot>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"card-header\">\n            <slot name=\"subtitle\"></slot>\n            <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n          </div>\n          <p class=\"card-text\">\n            <slot name=\"description\"></slot>\n          </p>\n          <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsCard;\n"],"names":["cardStyle"],"mappings":"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"}

package/components/Checkbox/checkbox.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md)}.form-check-input:focus,.form-check-input:focus-visible{box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-check-input:checked.is-invalid,.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-bg)}.form-check-input:indeterminate.is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-bg)}.form-check-label{width:100%}`;
+var css_248z = css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md)}:host(:not([disabled]):not([invalid]):not([checked]):not([indeterminate])) .form-check-input:hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-check-input:focus,.form-check-input:focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:checked:focus,.form-check-input:checked:hover,.form-check-input[checked]:focus-visible,.form-check-input[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-label{width:100%}`;
 
 export { css_248z as default };
 //# sourceMappingURL=checkbox.js.map

package/components/Checkbox/index.umd.js

@@ -4489,7 +4489,7 @@
    */
   const live = directive(LiveDirective);
 
-  var css_248z$6 = css`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color);line-height:var(--sgds-line-height-min)}.invalid-feedback{font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color)}`;
+  var css_248z$6 = css`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color-default);line-height:var(--sgds-line-height-min)}.invalid-feedback{font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`;
 
   var css_248z$5 = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1);line-height:var(--sgds-line-height-min)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`;
 
@@ -4497,7 +4497,7 @@
 
   var css_248z$3 = css`.form-control::placeholder{color:var(--sgds-form-color-subtle);font-family:var(--sgds-font-family-brand);font-weight:var(--sgds-font-weight-light);line-height:var(--sgds-line-height-body)}`;
 
-  var css_248z$2 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}a[target=_blank]{align-items:center;display:flex;gap:var(--sgds-gap-2-xs);justify-content:center}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding:0 .45em}::slotted(svg){vertical-align:middle}}`;
+  var css_248z$2 = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}a[target=_blank]{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding:0 .45em}::slotted(svg){vertical-align:middle}}`;
 
   /**
    * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
@@ -4893,7 +4893,7 @@
       };
   }
 
-  var css_248z$1 = css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md)}.form-check-input:focus,.form-check-input:focus-visible{box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-check-input:checked.is-invalid,.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-bg)}.form-check-input:indeterminate.is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-bg)}.form-check-label{width:100%}`;
+  var css_248z$1 = css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md)}:host(:not([disabled]):not([invalid]):not([checked]):not([indeterminate])) .form-check-input:hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-check-input:focus,.form-check-input:focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:checked:focus,.form-check-input:checked:hover,.form-check-input[checked]:focus-visible,.form-check-input[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-label{width:100%}`;
 
   /**
    * @summary Checkbox component is used when you require users to select multiple items from a list.

package/components/ComboBox/combo-box-item2.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host([active]) .dropdown-item{background-color:var(--sgds-form-primary-bg-translucent)}.dropdown-item{background-color:var(--sgds-default-bg-transparent);clear:both;color:var(--sgds-default-color);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit;white-space:nowrap}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg);color:var(--sgds-primary-bg)}.dropdown-item:hover{background:var(--sgds-form-bg-translucent)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-form-bg-translucent);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
+var css_248z = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit;white-space:nowrap}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
 
 export { css_248z as default };
 //# sourceMappingURL=combo-box-item2.js.map

package/components/ComboBox/combo-box.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host{display:block;position:relative}.combobox{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.combobox .dropdown-menu{min-width:100%}.dropdown{display:flex;height:100%}.combobox .form-control-icon{align-items:center}.sgds.combobox{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.form-control-icon{bottom:0}.combobox-caret{color:var(--sgds-form-color-default)}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.form-control-group.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-bg);border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-md);justify-content:space-between;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:inline;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.combobox-input-container{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs)}.empty-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px)}.form-control-group.readonly{border-color:var(--sgds-form-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-control-group.disabled{background-color:var(--sgds-form-bg-muted)}`;
+var css_248z = css`:host{display:block;position:relative}.combobox{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.combobox .dropdown-menu{min-width:100%}.dropdown{display:flex;height:100%}.combobox .form-control-icon{align-items:center}.sgds.combobox{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.form-control-icon{bottom:0}.combobox-caret{color:var(--sgds-form-color-default)}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.form-control-group.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-md);justify-content:space-between;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:inline;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.combobox-input-container{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs)}.empty-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px)}.form-control-group.readonly{border-color:var(--sgds-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=combo-box.js.map

package/components/ComboBox/index.umd.js

@@ -8141,7 +8141,7 @@
       return target;
   };
 
-  var css_248z$b = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}a[target=_blank]{align-items:center;display:flex;gap:var(--sgds-gap-2-xs);justify-content:center}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding:0 .45em}::slotted(svg){vertical-align:middle}}`;
+  var css_248z$b = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}a[target=_blank]{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.274 3.9H9.3a.6.6 0 0 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.361 6.41c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v5.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h5.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.469-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.274c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.524-.042-1.175-.042-1.993V9.274c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C7.805 3.9 8.456 3.9 9.274 3.9Zm3.626.6a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V5.949l-5.976 5.975a.6.6 0 0 1-.848-.848L18.05 5.1H13.5a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding:0 .45em}::slotted(svg){vertical-align:middle}}`;
 
   /**
    * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
@@ -8511,7 +8511,7 @@
       state()
   ], DropdownListElement.prototype, "prevDropdownItemNo", void 0);
 
-  var css_248z$a = css`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color);line-height:var(--sgds-line-height-min)}.invalid-feedback{font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color)}`;
+  var css_248z$a = css`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color-default);line-height:var(--sgds-line-height-min)}.invalid-feedback{font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`;
 
   var css_248z$9 = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1);line-height:var(--sgds-line-height-min)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`;
 
@@ -8804,9 +8804,9 @@
       };
   }
 
-  var css_248z$8 = css`:host{display:inline-flex}:host([variant=success]) .badge{background-color:var(--sgds-success-bg)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-bg)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-bg)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-bg)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-bg-subtle);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-subtle)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-bg-subtle);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-subtle)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-bg-subtle);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-subtle)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-bg-subtle);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-subtle)}.badge{align-items:center;background-color:var(--sgds-primary-bg);border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-default-color-on-dark);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24);justify-content:center;min-width:var(---sgds-dimension-24);padding:0 var(--sgds-padding-2-xs)}.badge.outlined{background-color:var(--sgds-primary-bg-subtle);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-subtle);color:var(--sgds-default-color-on-light)}.badge-label{padding:0 var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}slot::slotted(*){font-size:14px;font-weight:400}`;
+  var css_248z$8 = css`:host{display:inline-flex}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-default)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-default)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-default)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-default)}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);display:inline-flex;font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-24);justify-content:center;min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-default);color:var(--sgds-color-fixed-dark)}.badge-label{line-height:var(--sgds-line-height-min);padding:var(--sgds-padding-none) var(--sgds-padding-2-xs)}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}slot::slotted(*){font-size:14px;font-weight:400}`;
 
-  var css_248z$7 = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{align-items:center;background-color:var(--sgds-default-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close-light{color:var(--sgds-default-color-on-dark)}.btn-close-dark{color:var(--sgds-default-color-on-light)}.btn-close:hover{background-color:var(--sgds-default-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-default-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
+  var css_248z$7 = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close-light{color:var(--sgds-color-fixed-light)}.btn-close-dark{color:var(--sgds-color-fixed-dark)}.btn-close:hover{background-color:var(--sgds-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
 
   /**
    *
@@ -8965,7 +8965,7 @@
       watch("show")
   ], SgdsBadge.prototype, "_handleShowChange", null);
 
-  var css_248z$6 = css`.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-neutral-bg-inverse);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 4px 8px 0 rgba(0,0,0,.14);color:var(--sgds-default-color);display:none;list-style:none;margin:0;min-width:var(--sgds-dimension-280);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:1000}.dropdown .dropdown-menu{max-height:var(--sgds-dimension-192)}.dropdown-menu.show{display:block}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:576px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:992px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1200px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1400px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`;
+  var css_248z$6 = css`.dropdown-menu{background-clip:padding-box;background-color:var(--sgds-surface-default);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 4px 8px 0 hsla(0,0%,5%,.12);color:var(--sgds-color-default);display:none;list-style:none;margin:0;min-width:var(--sgds-dimension-280);overflow-y:auto;padding:var(--sgds-padding-xs) 0;position:absolute;text-align:left;z-index:1000}.dropdown .dropdown-menu{max-height:var(--sgds-dimension-192)}.dropdown-menu.show{display:block}.nav-tabs .dropdown-menu{border-top-left-radius:0;border-top-right-radius:0;margin-top:calc(var(--sgds-nav-tabs-border-width)*-1)}@media (min-width:576px){.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:768px){.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:992px){.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1200px){.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}}@media (min-width:1400px){.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.sgds.navbar .dropdown-menu.megamenu{left:0;right:0;width:100%}.sgds.combobox>.dropdown-menu{min-width:100%}`;
 
   /**
    * @license
@@ -9224,7 +9224,7 @@
       property({ type: Boolean, reflect: true })
   ], FormControlElement.prototype, "invalid", void 0);
 
-  var css_248z$2 = css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-bg);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md)}.form-check-input:focus,.form-check-input:focus-visible{box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-bg)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-check-input:checked.is-invalid,.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-bg)}.form-check-input:indeterminate.is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-bg)}.form-check-label{width:100%}`;
+  var css_248z$2 = css`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input,.form-check-input-container{height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md)}:host(:not([disabled]):not([invalid]):not([checked]):not([indeterminate])) .form-check-input:hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-check-input:focus,.form-check-input:focus-visible{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-check-input:checked,.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path d="M14.347 3.979a.522.522 0 0 1 0 .739L7.043 12.02a.521.521 0 0 1-.738 0L2.653 8.369a.522.522 0 1 1 .739-.738l3.282 3.283 6.934-6.935a.52.52 0 0 1 .739 0Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:checked:focus,.form-check-input:checked:hover,.form-check-input[checked]:focus-visible,.form-check-input[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}.form-check-input:indeterminate,.form-check-input[indeterminate]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5Z" fill="%23fff"/></svg>');background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:indeterminate:focus,.form-check-input:indeterminate:hover,.form-check-input[indeterminate]:focus-visible,.form-check-input[indeterminate]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-check-input:checked.is-invalid,.form-check-input:indeterminate.is-invalid,.form-check-input[checked].is-invalid,.form-check-input[indeterminate].is-invalid{background-color:var(--sgds-form-danger-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-label{width:100%}`;
 
   /**
    * @summary Checkbox component is used when you require users to select multiple items from a list.
@@ -9399,7 +9399,7 @@
       watch("_isTouched", { waitUntilFirstUpdate: true })
   ], SgdsCheckbox.prototype, "_handleIsTouched", null);
 
-  var css_248z$1 = css`:host([active]) .dropdown-item{background-color:var(--sgds-form-primary-bg-translucent)}.dropdown-item{background-color:var(--sgds-default-bg-transparent);clear:both;color:var(--sgds-default-color);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit;white-space:nowrap}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg);color:var(--sgds-primary-bg)}.dropdown-item:hover{background:var(--sgds-form-bg-translucent)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-form-bg-translucent);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
+  var css_248z$1 = css`:host([active]) .dropdown-item{background-color:var(--sgds-primary-surface-translucent)}.dropdown-item{background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;height:100%;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit;white-space:nowrap}.dropdown-item .normal-item-content{align-items:center;display:flex;justify-content:space-between}:host([active]) .dropdown-item .normal-item-content{color:var(--sgds-primary-bg-default)}:host([active]) .dropdown-item .normal-item-content sgds-icon{fill:var(--sgds-primary-bg-default);color:var(--sgds-primary-bg-default)}.dropdown-item:hover{background:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background:var(--sgds-bg-translucent-subtle);box-shadow:inset var(--sgds-form-box-shadow-focus);outline:0}`;
 
   class ComboBoxItem extends SgdsElement {
       constructor() {
@@ -9478,7 +9478,7 @@
       property({ type: Boolean, reflect: true })
   ], ComboBoxItem.prototype, "checkbox", void 0);
 
-  var css_248z = css`:host{display:block;position:relative}.combobox{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.combobox .dropdown-menu{min-width:100%}.dropdown{display:flex;height:100%}.combobox .form-control-icon{align-items:center}.sgds.combobox{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.form-control-icon{bottom:0}.combobox-caret{color:var(--sgds-form-color-default)}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.form-control-group.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-bg);border:var(--sgds-form-border-width-default) solid var(--sgds-form-border-color);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-md);justify-content:space-between;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:inline;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.combobox-input-container{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs)}.empty-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px)}.form-control-group.readonly{border-color:var(--sgds-form-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color)}.form-control-group.disabled{background-color:var(--sgds-form-bg-muted)}`;
+  var css_248z = css`:host{display:block;position:relative}.combobox{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.combobox .dropdown-menu{min-width:100%}.dropdown{display:flex;height:100%}.combobox .form-control-icon{align-items:center}.sgds.combobox{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.form-control-icon{bottom:0}.combobox-caret{color:var(--sgds-form-color-default)}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.form-control-group.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-md);justify-content:space-between;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:inline;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.combobox-input-container{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs)}.empty-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px)}.form-control-group.readonly{border-color:var(--sgds-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}`;
 
   /**
    * @summary ComboBox component is used for users to make one or more selections from a list.
@@ -9518,7 +9518,12 @@
           this.invalidFeedback = "";
           /** Marks the component as invalid. Replace the pseudo :invalid selector. */
           this.invalid = false;
-          /** The list of items to display in the dropdown. */
+          /** The list of items to display in the dropdown.
+           * `interface SgdsComboBoxItemData {
+           * label: string;
+           * value: string;
+           * }`
+           */
           this.menuList = [];
           /** If true, renders multiple checkbox selection items. If false, single-select. */
           this.multiSelect = false;