@govtechsg/sgds-web-component 3.29.1-rc.2 → 3.29.1-rc.3

package/components/Badge/sgds-badge.d.ts

@@ -46,6 +46,7 @@ export declare class SgdsBadge extends SgdsElement {
     /**@internal */
     _handleTruncation(): void;
     private _handleLabelSlotChange;
+    private get _closeButtonTone();
     private _renderBadge;
     render(): typeof nothing | import("lit").TemplateResult<1>;
 }

package/components/Badge/sgds-badge.js

@@ -69,8 +69,13 @@ var SgdsBadge = class extends SgdsElement {
 	_handleLabelSlotChange(e) {
 		this.text = getTextContent(e.target);
 	}
+	get _closeButtonTone() {
+		if (this.variant === "white") return "fixed-dark";
+		if (this.outlined) return "default";
+		if (this.variant === "warning") return "fixed-dark";
+		return "fixed-light";
+	}
 	_renderBadge() {
-		const isDarkCloseButton = this.outlined || this.variant === "warning" || this.variant === "white";
 		return html`<div
       class="  
           ${classMap({
@@ -91,7 +96,7 @@ var SgdsBadge = class extends SgdsElement {
             size="sm"
             aria-label="close the badge"
             @click=${this.close}
-            tone=${isDarkCloseButton ? "fixed-dark" : "fixed-light"}
+            tone=${this._closeButtonTone}
           ></sgds-close-button>` : nothing}
     </div>`;
 	}

package/components/Badge/sgds-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-badge.js","names":["badgeStyle"],"sources":["../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport { watch } from \"../../utils/watch\";\nimport badgeStyle from \"./badge.css\";\n\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsTooltip from \"../Tooltip/sgds-tooltip\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\n\nimport { getTextContent } from \"../../utils/slot\";\n\nexport type BadgeVariant =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"cyan\"\n  | \"purple\"\n  | \"neutral\"\n  | \"white\"\n  | \"info\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted when the badge is starting to close but has not closed.\n * @event sgds-after-show - Emitted after the badge has appeared\n * @event sgds-after-hide - Emitted after the badge has closed\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-tooltip\": SgdsTooltip\n  };\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /**\n   * One or more badge variant combinations.\n   * Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.\n   *\n   * (@deprecated) The `info` variant is deprecated. Use `primary` instead.\n   */\n  @property({ reflect: true }) variant: BadgeVariant = \"primary\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Manually enable full width */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  @state() private truncated = false;\n  @state() private text = \"\";\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    if (this.show) {\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.show = false;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.show = true;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /**@internal */\n  @watch(\"text\", { waitUntilFirstUpdate: true })\n  _handleTruncation() {\n    // check scroll width if its exceeding parent, it reflects truncation has happened\n    const badgeLabel = this.shadowRoot?.querySelector(\".badge-label\");\n    if (badgeLabel) {\n      this.truncated = badgeLabel.scrollWidth > badgeLabel.clientWidth;\n    }\n  }\n\n  private _handleLabelSlotChange(e: Event) {\n    this.text = getTextContent(e.target as HTMLSlotElement);\n    return;\n  }\n\n  private _renderBadge() {\n    const isDarkCloseButton = this.outlined || this.variant === \"warning\" || this.variant === \"white\";\n\n    return html`<div\n      class=\"  \n          ${classMap({\n        [`badge-dismissible`]: this.dismissible,\n        badge: true,\n        outlined: this.outlined,\n        \"full-width\": this.fullWidth\n      })}\"\n      aria-hidden=${this.show ? \"false\" : \"true\"}\n    >\n      ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n\n      <span class=\"badge-label\">\n        <slot @slotchange=${this._handleLabelSlotChange}></slot>\n      </span>\n\n      ${this.dismissible\n        ? html`<sgds-close-button\n            size=\"sm\"\n            aria-label=\"close the badge\"\n            @click=${this.close}\n            tone=${isDarkCloseButton ? \"fixed-dark\" : \"fixed-light\"}\n          ></sgds-close-button>`\n        : nothing}\n    </div>`;\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? this.truncated\n        ? html`<sgds-tooltip content=${this.text} @sgds-hide=${e => e.stopPropagation()}\n            >${this._renderBadge()}</sgds-tooltip\n          >`\n        : this._renderBadge()\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqCA,IAAa,YAAb,cAA+B,YAAY;;;EAUU,KAAA,OAAA;EAQE,KAAA,UAAA;EAGE,KAAA,WAAA;EAGG,KAAA,cAAA;EAGF,KAAA,YAAA;EAE3B,KAAA,YAAA;EACL,KAAA,OAAA;;;EA7BR,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAU;;;EAG5B,KAAA,eAAA;GACpB,qBAAqB;GACrB,gBAAgB;EAClB;;;CA0BA,QAAe;EACb,KAAK,OAAO;CACd;;CAGA,oBACoB;EAClB,IAAI,KAAK,MAAM;GAEb,IADiB,KAAK,KAAK,aAAa,EAAE,YAAY,KAAK,CAChD,CAAC,CAAC,kBAAkB;IAC7B,KAAK,OAAO;IACZ;GACF;GAGA,KAAK,KAAK,iBAAiB;EAC7B,OAAO;GAEL,IADiB,KAAK,KAAK,aAAa,EAAE,YAAY,KAAK,CAChD,CAAC,CAAC,kBAAkB;IAC7B,KAAK,OAAO;IACZ;GACF;GAGA,KAAK,KAAK,iBAAiB;EAC7B;CACF;;CAGA,oBACoB;EAElB,MAAM,aAAa,KAAK,YAAY,cAAc,cAAc;EAChE,IAAI,YACF,KAAK,YAAY,WAAW,cAAc,WAAW;CAEzD;CAEA,uBAA+B,GAAU;EACvC,KAAK,OAAO,eAAe,EAAE,MAAyB;CAExD;CAEA,eAAuB;EACrB,MAAM,oBAAoB,KAAK,YAAY,KAAK,YAAY,aAAa,KAAK,YAAY;EAE1F,OAAO,IAAI;;YAEH,SAAS;IACZ,sBAAsB,KAAK;GAC5B,OAAO;GACP,UAAU,KAAK;GACf,cAAc,KAAK;EACrB,CAAC,EAAE;oBACW,KAAK,OAAO,UAAU,OAAO;;QAEzC,CAAC,KAAK,cAAc,IAAI,8BAA8B,QAAQ;;;4BAG1C,KAAK,uBAAuB;;;QAGhD,KAAK,cACH,IAAI;;;qBAGO,KAAK,MAAM;mBACb,oBAAoB,eAAe,cAAc;mCAE1D,QAAQ;;CAEhB;CAEA,SAAS;EACP,OAAQ,KAAK,eAAe,KAAK,QAAS,CAAC,KAAK,cAC5C,KAAK,YACH,IAAI,yBAAyB,KAAK,KAAK,eAAc,MAAK,EAAE,gBAAgB,EAAE;eACzE,KAAK,aAAa,EAAE;eAEzB,KAAK,aAAa,IACpB;CACN;AACF;AAzGG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAQzC,WAAA,CAAA,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,WAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,eAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,aAAA,KAAA,CAAA;AAEzC,WAAA,CAAA,MAAM,CAAA,GAAA,UAAA,WAAA,aAAA,KAAA,CAAA;AACN,WAAA,CAAA,MAAM,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAQN,WAAA,CAAA,MAAM,MAAM,CAAA,GAAA,UAAA,WAAA,qBAAA,IAAA;AAwBZ,WAAA,CAAA,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,qBAAA,IAAA"}
+{"version":3,"file":"sgds-badge.js","names":["badgeStyle"],"sources":["../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport { watch } from \"../../utils/watch\";\nimport badgeStyle from \"./badge.css\";\n\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsTooltip from \"../Tooltip/sgds-tooltip\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\n\nimport { getTextContent } from \"../../utils/slot\";\n\nexport type BadgeVariant =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"cyan\"\n  | \"purple\"\n  | \"neutral\"\n  | \"white\"\n  | \"info\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted when the badge is starting to close but has not closed.\n * @event sgds-after-show - Emitted after the badge has appeared\n * @event sgds-after-hide - Emitted after the badge has closed\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-tooltip\": SgdsTooltip\n  };\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /**\n   * One or more badge variant combinations.\n   * Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.\n   *\n   * (@deprecated) The `info` variant is deprecated. Use `primary` instead.\n   */\n  @property({ reflect: true }) variant: BadgeVariant = \"primary\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Manually enable full width */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  @state() private truncated = false;\n  @state() private text = \"\";\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    if (this.show) {\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.show = false;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.show = true;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /**@internal */\n  @watch(\"text\", { waitUntilFirstUpdate: true })\n  _handleTruncation() {\n    // check scroll width if its exceeding parent, it reflects truncation has happened\n    const badgeLabel = this.shadowRoot?.querySelector(\".badge-label\");\n    if (badgeLabel) {\n      this.truncated = badgeLabel.scrollWidth > badgeLabel.clientWidth;\n    }\n  }\n\n  private _handleLabelSlotChange(e: Event) {\n    this.text = getTextContent(e.target as HTMLSlotElement);\n    return;\n  }\n\n  private get _closeButtonTone() {\n    if (this.variant === \"white\") return \"fixed-dark\";\n    if (this.outlined) return \"default\";\n    if (this.variant === \"warning\") return \"fixed-dark\";\n    return \"fixed-light\";\n  }\n\n  private _renderBadge() {\n    return html`<div\n      class=\"  \n          ${classMap({\n        [`badge-dismissible`]: this.dismissible,\n        badge: true,\n        outlined: this.outlined,\n        \"full-width\": this.fullWidth\n      })}\"\n      aria-hidden=${this.show ? \"false\" : \"true\"}\n    >\n      ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n\n      <span class=\"badge-label\">\n        <slot @slotchange=${this._handleLabelSlotChange}></slot>\n      </span>\n\n      ${this.dismissible\n        ? html`<sgds-close-button\n            size=\"sm\"\n            aria-label=\"close the badge\"\n            @click=${this.close}\n            tone=${this._closeButtonTone}\n          ></sgds-close-button>`\n        : nothing}\n    </div>`;\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? this.truncated\n        ? html`<sgds-tooltip content=${this.text} @sgds-hide=${e => e.stopPropagation()}\n            >${this._renderBadge()}</sgds-tooltip\n          >`\n        : this._renderBadge()\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqCA,IAAa,YAAb,cAA+B,YAAY;;;EAUU,KAAA,OAAA;EAQE,KAAA,UAAA;EAGE,KAAA,WAAA;EAGG,KAAA,cAAA;EAGF,KAAA,YAAA;EAE3B,KAAA,YAAA;EACL,KAAA,OAAA;;;EA7BR,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAU;;;EAG5B,KAAA,eAAA;GACpB,qBAAqB;GACrB,gBAAgB;EAClB;;;CA0BA,QAAe;EACb,KAAK,OAAO;CACd;;CAGA,oBACoB;EAClB,IAAI,KAAK,MAAM;GAEb,IADiB,KAAK,KAAK,aAAa,EAAE,YAAY,KAAK,CAChD,CAAC,CAAC,kBAAkB;IAC7B,KAAK,OAAO;IACZ;GACF;GAGA,KAAK,KAAK,iBAAiB;EAC7B,OAAO;GAEL,IADiB,KAAK,KAAK,aAAa,EAAE,YAAY,KAAK,CAChD,CAAC,CAAC,kBAAkB;IAC7B,KAAK,OAAO;IACZ;GACF;GAGA,KAAK,KAAK,iBAAiB;EAC7B;CACF;;CAGA,oBACoB;EAElB,MAAM,aAAa,KAAK,YAAY,cAAc,cAAc;EAChE,IAAI,YACF,KAAK,YAAY,WAAW,cAAc,WAAW;CAEzD;CAEA,uBAA+B,GAAU;EACvC,KAAK,OAAO,eAAe,EAAE,MAAyB;CAExD;CAEA,IAAY,mBAAmB;EAC7B,IAAI,KAAK,YAAY,SAAS,OAAO;EACrC,IAAI,KAAK,UAAU,OAAO;EAC1B,IAAI,KAAK,YAAY,WAAW,OAAO;EACvC,OAAO;CACT;CAEA,eAAuB;EACrB,OAAO,IAAI;;YAEH,SAAS;IACZ,sBAAsB,KAAK;GAC5B,OAAO;GACP,UAAU,KAAK;GACf,cAAc,KAAK;EACrB,CAAC,EAAE;oBACW,KAAK,OAAO,UAAU,OAAO;;QAEzC,CAAC,KAAK,cAAc,IAAI,8BAA8B,QAAQ;;;4BAG1C,KAAK,uBAAuB;;;QAGhD,KAAK,cACH,IAAI;;;qBAGO,KAAK,MAAM;mBACb,KAAK,iBAAiB;mCAE/B,QAAQ;;CAEhB;CAEA,SAAS;EACP,OAAQ,KAAK,eAAe,KAAK,QAAS,CAAC,KAAK,cAC5C,KAAK,YACH,IAAI,yBAAyB,KAAK,KAAK,eAAc,MAAK,EAAE,gBAAgB,EAAE;eACzE,KAAK,aAAa,EAAE;eAEzB,KAAK,aAAa,IACpB;CACN;AACF;AA9GG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAQzC,WAAA,CAAA,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,WAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,eAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,aAAA,KAAA,CAAA;AAEzC,WAAA,CAAA,MAAM,CAAA,GAAA,UAAA,WAAA,aAAA,KAAA,CAAA;AACN,WAAA,CAAA,MAAM,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAQN,WAAA,CAAA,MAAM,MAAM,CAAA,GAAA,UAAA,WAAA,qBAAA,IAAA;AAwBZ,WAAA,CAAA,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,qBAAA,IAAA"}

package/components/ComboBox/index.umd.min.js

@@ -112,7 +112,7 @@ let n=e._$AN;if(n===void 0)return!1;for(let e of n)e._$AO?.(t,!1),ut(e,t);return
         class=${I({"form-label":!0,required:this.required})}
         >${this.label}</label
       >
-    `;return this.label&&e}_handleClick(){if(this.readonly)return null;this.menuIsOpen?this.hideMenu():this.showMenu()}async _getMenuListFromOptions(e){let t=e.map(async e=>(await e.updateComplete,e));return(await Promise.all(t))?.map(e=>({label:e.textContent?.trim()??``,value:e.getAttribute(`value`),disabled:e.disabled??void 0}))}_renderEmptyMenu(){return T` <div class="empty-menu">No options</div> `}_renderLoadingMenu(){return T`<div class="loading-menu"><sgds-spinner size="xs" tone="brand"></sgds-spinner>Loading...</div>`}};q([P({reflect:!0})],X.prototype,`label`,void 0),q([P({reflect:!0})],X.prototype,`hintText`,void 0),q([P({reflect:!0})],X.prototype,`name`,void 0),q([P({type:String,reflect:!0})],X.prototype,`placeholder`,void 0),q([P({type:Boolean,reflect:!0})],X.prototype,`autofocus`,void 0),q([P({type:Boolean,reflect:!0})],X.prototype,`disabled`,void 0),q([P({type:Boolean,reflect:!0})],X.prototype,`required`,void 0),q([P({type:Boolean,reflect:!0})],X.prototype,`loading`,void 0),q([P({type:String,reflect:!0})],X.prototype,`value`,void 0),q([F()],X.prototype,`displayValue`,void 0),q([mr()],X.prototype,`defaultValue`,void 0),q([P({type:Boolean,reflect:!0})],X.prototype,`hasFeedback`,void 0),q([P({type:String,reflect:!0})],X.prototype,`invalidFeedback`,void 0),q([P({type:Boolean,reflect:!0})],X.prototype,`invalid`,void 0),q([P({type:String,reflect:!0})],X.prototype,`autocomplete`,void 0),q([P({type:Array})],X.prototype,`menuList`,void 0),q([F()],X.prototype,`selectedItems`,void 0),q([F()],X.prototype,`filteredList`,void 0),q([st(`input.form-control`)],X.prototype,`_input`,void 0);function kr(e,t){let n={waitUntilFirstUpdate:!1,...t};return(t,r)=>{let{update:i}=t;if(e in t){let a=e;t.update=function(e){if(e.has(a)){let t=e.get(a),i=this[a];t!==i&&(!n.waitUntilFirstUpdate||this.hasUpdated)&&this[r](t,i)}i.call(this,e)}}}}N();var Ar=j`:host{cursor:default;display:inline-flex;max-width:100%}:host([variant=accent]) .badge{background-color:var(--sgds-accent-surface-default)}: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=cyan]) .badge{background-color:var(--sgds-cyan-surface-default)}:host([variant=purple]) .badge{background-color:var(--sgds-purple-surface-default)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=white]) .badge{background-color:var(--sgds-surface-fixed-light);color:var(--sgds-color-fixed-dark)}:host([variant=accent][outlined]) .badge{background-color:var(--sgds-accent-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-accent-border-color-muted);color:var(--sgds-accent-color-fixed-dark)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted);color:var(--sgds-success-color-fixed-dark)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted);color:var(--sgds-danger-color-fixed-dark)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted);color:var(--sgds-warning-color-fixed-dark)}:host([variant=cyan][outlined]) .badge{background-color:var(--sgds-cyan-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-cyan-border-color-muted);color:var(--sgds-cyan-color-fixed-dark)}:host([variant=purple][outlined]) .badge{background-color:var(--sgds-purple-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-purple-border-color-muted);color:var(--sgds-purple-color-fixed-dark)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted);color:var(--sgds-color-fixed-dark)}:host([variant=white][outlined]) .badge{background-color:var(--sgds-surface-fixed-light);border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);color:var(--sgds-color-fixed-dark)}sgds-tooltip{display:block;max-width:100%}.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-label-xs);height:var(--sgds-dimension-24,24px);justify-content:center;line-height:var(--sgds-line-height-3-xs);max-width:var(--sgds-dimension-192,192px);min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted);color:var(--sgds-primary-color-fixed-dark)}.badge.full-width{max-width:100%}.badge-label{overflow:hidden;padding:var(--sgds-padding-none) var(--sgds-padding-3-xs);text-overflow:ellipsis;white-space:nowrap}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}slot::slotted(*){color:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;margin:inherit!important}`;N();var jr=j`:host{display:contents}.tooltip-placeholder{display:inline-block;max-width:100%}.tooltip{word-wrap:break-word;background-color:var(--sgds-surface-fixed-dark);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-color-fixed-light);display:block;font-size:var(--sgds-font-size-label-sm);line-break:auto;max-width:var(--sgds-dimension-320);padding:var(--sgds-padding-xs) var(--sgds-padding-sm);text-align:left;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;z-index:var(--sgds-z-index-overlay)}div{max-width:fit-content}`;N();var Mr=class extends J{constructor(...e){super(...e),this._myTooltip=_t(),this._tooltipBubble=_t(),this.content=``,this.placement=`top`,this.trigger=`hover focus`,this.open=!1,this._handleClickOutOfElement=e=>{this.open&&(e.composedPath().includes(this)||this.hide())}}static{this.styles=[...J.styles,jr]}connectedCallback(){super.connectedCallback(),this.trigger.includes(`click`)&&document.addEventListener(`click`,this._handleClickOutOfElement)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`click`,this._handleClickOutOfElement),this._cleanupAutoUpdate&&=(this._cleanupAutoUpdate(),void 0)}firstUpdated(e){super.firstUpdated(e),this._tooltipTargetElements.forEach(e=>{e.setAttribute(`data-sgds-tooltip`,this.content),this.trigger.includes(`hover`)&&(e.addEventListener(`mouseenter`,()=>this.show()),e.addEventListener(`mouseleave`,()=>this.hide())),this.trigger.includes(`focus`)&&(e.addEventListener(`focus`,()=>this.show()),e.addEventListener(`blur`,()=>this.hide())),this.trigger===`click`&&e.addEventListener(`click`,()=>this.toggle())})}_handleSlotChange(){this._tooltipTargetElements.forEach(e=>e.setAttribute(`data-sgds-tooltip`,this.content))}async updateFloatingPosition(){if(!this._myTooltip.value||!this._tooltipBubble.value)return;let{x:e,y:t,placement:n,strategy:r,middlewareData:i}=await lr(this._tooltipTargetElements[0],this._tooltipBubble.value,{strategy:`fixed`,placement:this.placement,middleware:[ir(8),or(),ar(),cr()]});this._tooltipBubble.value.setAttribute(`data-placement`,n),Object.assign(this._tooltipBubble.value.style,{position:r,left:`${e}px`,top:`${t}px`});let{referenceHidden:a,escaped:o}=i.hide||{};a||o?this._tooltipBubble.value.style.visibility=`hidden`:this._tooltipBubble.value.style.visibility=`visible`}async show(){this.open||(this.open=!0,this.emit(`sgds-show`),await this.updateComplete,await this.updateFloatingPosition(),this._myTooltip.value&&this._tooltipBubble.value&&(this._cleanupAutoUpdate=rr(this._tooltipTargetElements[0],this._tooltipBubble.value,()=>this.updateFloatingPosition())),this.emit(`sgds-after-show`))}hide(){this.open&&(this.emit(`sgds-hide`),this.open=!1,this._cleanupAutoUpdate&&=(this._cleanupAutoUpdate(),void 0),setTimeout(()=>this.emit(`sgds-after-hide`),0))}toggle(){this.open?this.hide():this.show()}render(){return T`
+    `;return this.label&&e}_handleClick(){if(this.readonly)return null;this.menuIsOpen?this.hideMenu():this.showMenu()}async _getMenuListFromOptions(e){let t=e.map(async e=>(await e.updateComplete,e));return(await Promise.all(t))?.map(e=>({label:e.textContent?.trim()??``,value:e.getAttribute(`value`),disabled:e.disabled??void 0}))}_renderEmptyMenu(){return T` <div class="empty-menu">No options</div> `}_renderLoadingMenu(){return T`<div class="loading-menu"><sgds-spinner size="xs" tone="brand"></sgds-spinner>Loading...</div>`}};q([P({reflect:!0})],X.prototype,`label`,void 0),q([P({reflect:!0})],X.prototype,`hintText`,void 0),q([P({reflect:!0})],X.prototype,`name`,void 0),q([P({type:String,reflect:!0})],X.prototype,`placeholder`,void 0),q([P({type:Boolean,reflect:!0})],X.prototype,`autofocus`,void 0),q([P({type:Boolean,reflect:!0})],X.prototype,`disabled`,void 0),q([P({type:Boolean,reflect:!0})],X.prototype,`required`,void 0),q([P({type:Boolean,reflect:!0})],X.prototype,`loading`,void 0),q([P({type:String,reflect:!0})],X.prototype,`value`,void 0),q([F()],X.prototype,`displayValue`,void 0),q([mr()],X.prototype,`defaultValue`,void 0),q([P({type:Boolean,reflect:!0})],X.prototype,`hasFeedback`,void 0),q([P({type:String,reflect:!0})],X.prototype,`invalidFeedback`,void 0),q([P({type:Boolean,reflect:!0})],X.prototype,`invalid`,void 0),q([P({type:String,reflect:!0})],X.prototype,`autocomplete`,void 0),q([P({type:Array})],X.prototype,`menuList`,void 0),q([F()],X.prototype,`selectedItems`,void 0),q([F()],X.prototype,`filteredList`,void 0),q([st(`input.form-control`)],X.prototype,`_input`,void 0);function kr(e,t){let n={waitUntilFirstUpdate:!1,...t};return(t,r)=>{let{update:i}=t;if(e in t){let a=e;t.update=function(e){if(e.has(a)){let t=e.get(a),i=this[a];t!==i&&(!n.waitUntilFirstUpdate||this.hasUpdated)&&this[r](t,i)}i.call(this,e)}}}}N();var Ar=j`:host{cursor:default;display:inline-flex;max-width:100%}:host([variant=accent]) .badge{background-color:var(--sgds-accent-surface-default)}: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=cyan]) .badge{background-color:var(--sgds-cyan-surface-default)}:host([variant=purple]) .badge{background-color:var(--sgds-purple-surface-default)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=white]) .badge{background-color:var(--sgds-surface-fixed-light);color:var(--sgds-color-fixed-dark)}:host([variant=accent][outlined]) .badge{background-color:var(--sgds-accent-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-accent-border-color-muted);color:var(--sgds-accent-color-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-muted);color:var(--sgds-success-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-muted);color:var(--sgds-danger-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-muted);color:var(--sgds-warning-color-default)}:host([variant=cyan][outlined]) .badge{background-color:var(--sgds-cyan-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-cyan-border-color-muted);color:var(--sgds-cyan-color-default)}:host([variant=purple][outlined]) .badge{background-color:var(--sgds-purple-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-purple-border-color-muted);color:var(--sgds-purple-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-muted);color:var(--sgds-color-subtle)}:host([variant=white][outlined]) .badge{background-color:var(--sgds-surface-fixed-light);border:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);color:var(--sgds-color-fixed-dark)}sgds-tooltip{display:block;max-width:100%}.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-label-xs);height:var(--sgds-dimension-24,24px);justify-content:center;line-height:var(--sgds-line-height-3-xs);max-width:var(--sgds-dimension-192,192px);min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted);color:var(--sgds-primary-color-default)}.badge.full-width{max-width:100%}.badge-label{overflow:hidden;padding:var(--sgds-padding-none) var(--sgds-padding-3-xs);text-overflow:ellipsis;white-space:nowrap}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}slot::slotted(*){color:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;margin:inherit!important}`;N();var jr=j`:host{display:contents}.tooltip-placeholder{display:inline-block;max-width:100%}.tooltip{word-wrap:break-word;background-color:var(--sgds-surface-fixed-dark);border-radius:var(--sgds-border-radius-md);box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 8px 16px 0 rgba(0,0,0,.14);color:var(--sgds-color-fixed-light);display:block;font-size:var(--sgds-font-size-label-sm);line-break:auto;max-width:var(--sgds-dimension-320);padding:var(--sgds-padding-xs) var(--sgds-padding-sm);text-align:left;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;z-index:var(--sgds-z-index-overlay)}div{max-width:fit-content}`;N();var Mr=class extends J{constructor(...e){super(...e),this._myTooltip=_t(),this._tooltipBubble=_t(),this.content=``,this.placement=`top`,this.trigger=`hover focus`,this.open=!1,this._handleClickOutOfElement=e=>{this.open&&(e.composedPath().includes(this)||this.hide())}}static{this.styles=[...J.styles,jr]}connectedCallback(){super.connectedCallback(),this.trigger.includes(`click`)&&document.addEventListener(`click`,this._handleClickOutOfElement)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`click`,this._handleClickOutOfElement),this._cleanupAutoUpdate&&=(this._cleanupAutoUpdate(),void 0)}firstUpdated(e){super.firstUpdated(e),this._tooltipTargetElements.forEach(e=>{e.setAttribute(`data-sgds-tooltip`,this.content),this.trigger.includes(`hover`)&&(e.addEventListener(`mouseenter`,()=>this.show()),e.addEventListener(`mouseleave`,()=>this.hide())),this.trigger.includes(`focus`)&&(e.addEventListener(`focus`,()=>this.show()),e.addEventListener(`blur`,()=>this.hide())),this.trigger===`click`&&e.addEventListener(`click`,()=>this.toggle())})}_handleSlotChange(){this._tooltipTargetElements.forEach(e=>e.setAttribute(`data-sgds-tooltip`,this.content))}async updateFloatingPosition(){if(!this._myTooltip.value||!this._tooltipBubble.value)return;let{x:e,y:t,placement:n,strategy:r,middlewareData:i}=await lr(this._tooltipTargetElements[0],this._tooltipBubble.value,{strategy:`fixed`,placement:this.placement,middleware:[ir(8),or(),ar(),cr()]});this._tooltipBubble.value.setAttribute(`data-placement`,n),Object.assign(this._tooltipBubble.value.style,{position:r,left:`${e}px`,top:`${t}px`});let{referenceHidden:a,escaped:o}=i.hide||{};a||o?this._tooltipBubble.value.style.visibility=`hidden`:this._tooltipBubble.value.style.visibility=`visible`}async show(){this.open||(this.open=!0,this.emit(`sgds-show`),await this.updateComplete,await this.updateFloatingPosition(),this._myTooltip.value&&this._tooltipBubble.value&&(this._cleanupAutoUpdate=rr(this._tooltipTargetElements[0],this._tooltipBubble.value,()=>this.updateFloatingPosition())),this.emit(`sgds-after-show`))}hide(){this.open&&(this.emit(`sgds-hide`),this.open=!1,this._cleanupAutoUpdate&&=(this._cleanupAutoUpdate(),void 0),setTimeout(()=>this.emit(`sgds-after-hide`),0))}toggle(){this.open?this.hide():this.show()}render(){return T`
       <div ${bt(this._myTooltip)} class="tooltip-placeholder">
         <slot @slotchange=${()=>this._handleSlotChange()}></slot>
         ${this.open?T`<div ${bt(this._tooltipBubble)} class="tooltip" role="tooltip">${this.content}</div>`:null}
@@ -121,7 +121,7 @@ let n=e._$AN;if(n===void 0)return!1;for(let e of n)e._$AO?.(t,!1),ut(e,t);return
       <button class="btn-close" aria-label="Close button" ?disabled=${this.disabled} @click=${this._handleClick}>
         <sgds-icon name="cross" size="sm"></sgds-icon>
       </button>
-    `}};q([P({type:String,reflect:!0})],Lr.prototype,`size`,void 0),q([P({type:String,reflect:!0})],Lr.prototype,`tone`,void 0),q([P({type:Boolean,reflect:!0})],Lr.prototype,`disabled`,void 0);var Rr=class{constructor(e,...t){this.slotNames=[],(this.host=e).addController(this),this.slotNames=t,this.handleSlotChange=this.handleSlotChange.bind(this)}hasDefaultSlot(){return[...this.host.childNodes].some(e=>{if(e.nodeType===e.TEXT_NODE&&e.textContent?.trim()!==``)return!0;if(e.nodeType===e.ELEMENT_NODE){let t=e;if(t.tagName.toLowerCase()===`sl-visually-hidden`)return!1;if(!t.hasAttribute(`slot`))return!0}return!1})}hasNamedSlot(e){return this.host.querySelector(`:scope > [slot="${e}"]`)!==null}test(e){return e===`[default]`?this.hasDefaultSlot():this.hasNamedSlot(e)}hostConnected(){this.host.shadowRoot?.addEventListener(`slotchange`,this.handleSlotChange)}hostDisconnected(){this.host.shadowRoot?.removeEventListener(`slotchange`,this.handleSlotChange)}handleSlotChange(e){let t=e.target;(this.slotNames.includes(`[default]`)&&!t.name||t.name&&this.slotNames.includes(t.name))&&this.host.requestUpdate()}};function zr(e){if(!e)return``;let t=e.assignedNodes({flatten:!0}),n=``;return[...t].forEach(e=>{e.nodeType===Node.TEXT_NODE&&(n+=e.textContent.trim())}),n}N();var Z=class extends J{constructor(...e){super(...e),this.show=!1,this.variant=`primary`,this.outlined=!1,this.dismissible=!1,this.fullWidth=!1,this.truncated=!1,this.text=``}static{this.styles=[...J.styles,Ar]}static{this.dependencies={"sgds-close-button":Lr,"sgds-tooltip":Mr}}close(){this.show=!1}_handleShowChange(){if(this.show){if(this.emit(`sgds-show`,{cancelable:!0}).defaultPrevented){this.show=!1;return}this.emit(`sgds-after-show`)}else{if(this.emit(`sgds-hide`,{cancelable:!0}).defaultPrevented){this.show=!0;return}this.emit(`sgds-after-hide`)}}_handleTruncation(){let e=this.shadowRoot?.querySelector(`.badge-label`);e&&(this.truncated=e.scrollWidth>e.clientWidth)}_handleLabelSlotChange(e){this.text=zr(e.target)}_renderBadge(){let e=this.outlined||this.variant===`warning`||this.variant===`white`;return T`<div
+    `}};q([P({type:String,reflect:!0})],Lr.prototype,`size`,void 0),q([P({type:String,reflect:!0})],Lr.prototype,`tone`,void 0),q([P({type:Boolean,reflect:!0})],Lr.prototype,`disabled`,void 0);var Rr=class{constructor(e,...t){this.slotNames=[],(this.host=e).addController(this),this.slotNames=t,this.handleSlotChange=this.handleSlotChange.bind(this)}hasDefaultSlot(){return[...this.host.childNodes].some(e=>{if(e.nodeType===e.TEXT_NODE&&e.textContent?.trim()!==``)return!0;if(e.nodeType===e.ELEMENT_NODE){let t=e;if(t.tagName.toLowerCase()===`sl-visually-hidden`)return!1;if(!t.hasAttribute(`slot`))return!0}return!1})}hasNamedSlot(e){return this.host.querySelector(`:scope > [slot="${e}"]`)!==null}test(e){return e===`[default]`?this.hasDefaultSlot():this.hasNamedSlot(e)}hostConnected(){this.host.shadowRoot?.addEventListener(`slotchange`,this.handleSlotChange)}hostDisconnected(){this.host.shadowRoot?.removeEventListener(`slotchange`,this.handleSlotChange)}handleSlotChange(e){let t=e.target;(this.slotNames.includes(`[default]`)&&!t.name||t.name&&this.slotNames.includes(t.name))&&this.host.requestUpdate()}};function zr(e){if(!e)return``;let t=e.assignedNodes({flatten:!0}),n=``;return[...t].forEach(e=>{e.nodeType===Node.TEXT_NODE&&(n+=e.textContent.trim())}),n}N();var Z=class extends J{constructor(...e){super(...e),this.show=!1,this.variant=`primary`,this.outlined=!1,this.dismissible=!1,this.fullWidth=!1,this.truncated=!1,this.text=``}static{this.styles=[...J.styles,Ar]}static{this.dependencies={"sgds-close-button":Lr,"sgds-tooltip":Mr}}close(){this.show=!1}_handleShowChange(){if(this.show){if(this.emit(`sgds-show`,{cancelable:!0}).defaultPrevented){this.show=!1;return}this.emit(`sgds-after-show`)}else{if(this.emit(`sgds-hide`,{cancelable:!0}).defaultPrevented){this.show=!0;return}this.emit(`sgds-after-hide`)}}_handleTruncation(){let e=this.shadowRoot?.querySelector(`.badge-label`);e&&(this.truncated=e.scrollWidth>e.clientWidth)}_handleLabelSlotChange(e){this.text=zr(e.target)}get _closeButtonTone(){return this.variant===`white`?`fixed-dark`:this.outlined?`default`:this.variant===`warning`?`fixed-dark`:`fixed-light`}_renderBadge(){return T`<div
       class="  
           ${I({"badge-dismissible":this.dismissible,badge:!0,outlined:this.outlined,"full-width":this.fullWidth})}"
       aria-hidden=${this.show?`false`:`true`}
@@ -136,7 +136,7 @@ let n=e._$AN;if(n===void 0)return!1;for(let e of n)e._$AO?.(t,!1),ut(e,t);return
             size="sm"
             aria-label="close the badge"
             @click=${this.close}
-            tone=${e?`fixed-dark`:`fixed-light`}
+            tone=${this._closeButtonTone}
           ></sgds-close-button>`:D}
     </div>`}render(){return this.dismissible&&this.show||!this.dismissible?this.truncated?T`<sgds-tooltip content=${this.text} @sgds-hide=${e=>e.stopPropagation()}
             >${this._renderBadge()}</sgds-tooltip