@govtechsg/sgds-web-component 3.16.1-rc.2 → 3.17.0

package/components/Select/sgds-select.js

@@ -189,7 +189,8 @@ class SgdsSelect extends SelectElement {
         class=${classMap({
             disabled: this.disabled,
             select: true,
-            "form-control-container": true
+            "form-control-container": true,
+            "m-width-160": true
         })}
       >
         ${this._renderLabel()}

package/components/Select/sgds-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-select.js","sources":["../../../src/components/Select/sgds-select.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement } from \"../../base/select-element\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectStyle from \"./select.css\";\nimport SgdsSelectOption from \"./sgds-select-option\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n/**\n * @summary Select is used to make one selection from a list through keyboard or mouse actions\n *\n * @event sgds-select - Emitted when an option is selected.\n * @event sgds-change - Emitted when the select value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n *\n * @slot default - slot for sgds-select-option passed into select's menu\n */\nexport class SgdsSelect extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyles, selectStyle];\n  static childName = \"sgds-select-option\";\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-spinner\": SgdsSpinner,\n    [SgdsSelect.childName]: SgdsSelectOption\n  };\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n    });\n  }\n  @queryAssignedElements({ flatten: true, selector: \"sgds-select-option\" })\n  protected options: SgdsSelectOption[];\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n  }\n\n  private async _handleSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    assignedElements.forEach(el =>\n      el.addEventListener(\"click\", (e: MouseEvent) => {\n        const option = e.target as SgdsSelectOption;\n        if (option.disabled) return;\n        this._handleItemSelected(e);\n      })\n    );\n    assignedElements.forEach(el =>\n      el.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === \"Enter\") {\n          this._handleItemSelected(e);\n        }\n      })\n    );\n    this.menuList = await this._getMenuListFromOptions(assignedElements);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n  }\n  private _updateDisplayValue() {\n    if (this.value && this.menuList.length > 0) {\n      const initialSelectedItem = this.menuList.filter(({ value }) => value === this.value);\n      this.displayValue = initialSelectedItem[0].label;\n\n      this._setActiveToOption();\n    }\n  }\n  private _setActiveToOption() {\n    const activeIndex = this.menuList.findIndex(item => item.value.toString() === this.value);\n    this.options.forEach((option, index) => {\n      option.active = index === activeIndex;\n    });\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._setActiveToOption();\n\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput);\n\n    this._updateDisplayValue();\n    if (!this._isTouched && this.value === \"\") return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsSelectOption;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n    this.value = foundItem.value.toString();\n    this.displayValue = foundItem.label;\n    this.hideMenu();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    const initialItem = this.menuList.filter(({ value }) => value === this.value);\n    if (initialItem.length <= 0) {\n      this.displayValue = \"\";\n    } else {\n      this.displayValue = initialItem[0].label;\n    }\n    this._mixinResetValidity(await this._input);\n  }\n  private _blockInputKeydown = (e: KeyboardEvent) => {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n  };\n  /** Applicable for menuList prop only */\n  protected _renderMenu() {\n    const menu = this.menuList.map(item => {\n      const isActive = item.value === this.value;\n      return html`\n        <sgds-select-option\n          ?active=${isActive}\n          value=${item.value}\n          ?disabled=${item.disabled}\n          @click=${item.disabled ? null : this._handleItemSelected}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === \"Enter\") {\n              this._handleItemSelected(e);\n            }\n          }}\n        >\n          ${item.label}\n        </sgds-select-option>\n      `;\n    });\n    return this.menuList.length === 0 ? this._renderEmptyMenu() : menu;\n  }\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <input\n          class=\"form-control\"\n          type=\"text\"\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this.displayValue}\n          @blur=${this._handleInputBlur}\n          @focus=${this._handleFocus}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n          aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n            ? `${this._controlId}-invalid`\n            : \"\"}\"\n          @keydown=${this._blockInputKeydown}\n        />\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          disabled: this.disabled,\n          select: true,\n          \"form-control-container\": true\n        })}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\" ${ref(this.menuRef)}>\n          <slot id=\"default\" class=${classMap({ \"is-loading\": this.loading })} @slotchange=${this._handleSlotChange}\n            >${this._renderMenu()}</slot\n          >\n          ${this.loading ? this._renderLoadingMenu() : nothing}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSelect;\n"],"names":["formTextControlStyles","selectStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-select.js","sources":["../../../src/components/Select/sgds-select.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement } from \"../../base/select-element\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectStyle from \"./select.css\";\nimport SgdsSelectOption from \"./sgds-select-option\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n/**\n * @summary Select is used to make one selection from a list through keyboard or mouse actions\n *\n * @event sgds-select - Emitted when an option is selected.\n * @event sgds-change - Emitted when the select value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n *\n * @slot default - slot for sgds-select-option passed into select's menu\n */\nexport class SgdsSelect extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyles, selectStyle];\n  static childName = \"sgds-select-option\";\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-spinner\": SgdsSpinner,\n    [SgdsSelect.childName]: SgdsSelectOption\n  };\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n    });\n  }\n  @queryAssignedElements({ flatten: true, selector: \"sgds-select-option\" })\n  protected options: SgdsSelectOption[];\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n  }\n\n  private async _handleSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    assignedElements.forEach(el =>\n      el.addEventListener(\"click\", (e: MouseEvent) => {\n        const option = e.target as SgdsSelectOption;\n        if (option.disabled) return;\n        this._handleItemSelected(e);\n      })\n    );\n    assignedElements.forEach(el =>\n      el.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === \"Enter\") {\n          this._handleItemSelected(e);\n        }\n      })\n    );\n    this.menuList = await this._getMenuListFromOptions(assignedElements);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n  }\n  private _updateDisplayValue() {\n    if (this.value && this.menuList.length > 0) {\n      const initialSelectedItem = this.menuList.filter(({ value }) => value === this.value);\n      this.displayValue = initialSelectedItem[0].label;\n\n      this._setActiveToOption();\n    }\n  }\n  private _setActiveToOption() {\n    const activeIndex = this.menuList.findIndex(item => item.value.toString() === this.value);\n    this.options.forEach((option, index) => {\n      option.active = index === activeIndex;\n    });\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._setActiveToOption();\n\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput);\n\n    this._updateDisplayValue();\n    if (!this._isTouched && this.value === \"\") return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsSelectOption;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n    this.value = foundItem.value.toString();\n    this.displayValue = foundItem.label;\n    this.hideMenu();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    const initialItem = this.menuList.filter(({ value }) => value === this.value);\n    if (initialItem.length <= 0) {\n      this.displayValue = \"\";\n    } else {\n      this.displayValue = initialItem[0].label;\n    }\n    this._mixinResetValidity(await this._input);\n  }\n  private _blockInputKeydown = (e: KeyboardEvent) => {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n  };\n  /** Applicable for menuList prop only */\n  protected _renderMenu() {\n    const menu = this.menuList.map(item => {\n      const isActive = item.value === this.value;\n      return html`\n        <sgds-select-option\n          ?active=${isActive}\n          value=${item.value}\n          ?disabled=${item.disabled}\n          @click=${item.disabled ? null : this._handleItemSelected}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === \"Enter\") {\n              this._handleItemSelected(e);\n            }\n          }}\n        >\n          ${item.label}\n        </sgds-select-option>\n      `;\n    });\n    return this.menuList.length === 0 ? this._renderEmptyMenu() : menu;\n  }\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <input\n          class=\"form-control\"\n          type=\"text\"\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this.displayValue}\n          @blur=${this._handleInputBlur}\n          @focus=${this._handleFocus}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n          aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n            ? `${this._controlId}-invalid`\n            : \"\"}\"\n          @keydown=${this._blockInputKeydown}\n        />\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          disabled: this.disabled,\n          select: true,\n          \"form-control-container\": true,\n          \"m-width-160\": true\n        })}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <ul id=${this.dropdownMenuId} class=\"dropdown-menu\" part=\"menu\" tabindex=\"-1\" ${ref(this.menuRef)}>\n          <slot id=\"default\" class=${classMap({ \"is-loading\": this.loading })} @slotchange=${this._handleSlotChange}\n            >${this._renderMenu()}</slot\n          >\n          ${this.loading ? this._renderLoadingMenu() : nothing}\n        </ul>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSelect;\n"],"names":["formTextControlStyles","selectStyle"],"mappings":"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"}

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

@@ -37,16 +37,17 @@ let St;$t?.({LitElement:yt}),(ft.litElementVersions??=[]).push("4.2.2"),ft.litEl
    * @license
    * Copyright 2021 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
-   */globalThis.litIssuedWarnings??=new Set,Et=(t,e)=>{e+=t?` See https://lit.dev/msg/${t} for more information.`:"",globalThis.litIssuedWarnings.has(e)||globalThis.litIssuedWarnings.has(t)||(console.warn(e),globalThis.litIssuedWarnings.add(e))};var At=o`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);display:block;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-16);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-24);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 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.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.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.039h4.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.468-.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.774c-.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-.525-.042-1.175-.042-1.993V9.774c0-.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-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.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' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 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.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.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.039h4.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.468-.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.774c-.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-.525-.042-1.175-.042-1.993V9.774c0-.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-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.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;vertical-align:top;width:1em}::slotted(svg){vertical-align:middle}}`;class Nt extends yt{emit(t,e){const s=new CustomEvent(t,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},e));return this.dispatchEvent(s),s}static define(t,e=this,s={}){if(customElements.get(t));else try{customElements.define(t,e,s)}catch(i){customElements.define(t,class extends e{},s)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach(([t,e])=>{this.constructor.define(t,e)})}firstUpdated(t){var e;super.firstUpdated(t),this.ssr&&(null===(e=this.shadowRoot)||void 0===e||e.querySelectorAll("slot").forEach(t=>{t.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))}))}}Nt.styles=[At],Nt.dependencies={},t([xt({type:Boolean,reflect:!0})],Nt.prototype,"ssr",void 0);var Ot=o`:host([density=compact]) .tab{font-size:var(--sgds-font-size-14);padding:var(--sgds-spacer-3) var(--sgds-spacer-5)}:host(:not([active])) .tab{cursor:pointer}:host([variant=solid]) .tab{background-color:var(--sgds-bg-translucent-subtle);border-radius:var(--sgds-border-radius-md)}:host([variant=solid][active]) .tab{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus,:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([variant=solid]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent)}:host([disabled]) .tab{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=underlined][active]) .tab{color:var(--sgds-primary-color-default)}:host([variant=underlined][orientation=vertical]) .tab{border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([variant=underlined][orientation=vertical][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:0;content:"";height:100%;position:absolute;right:-1px;width:var(--sgds-border-width-4)}:host([variant=underlined][orientation=horizontal]) .tab{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([variant=underlined][orientation=horizontal][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:-1px;content:"";height:var(--sgds-border-width-4);left:0;position:absolute;width:100%}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus,:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent-subtle);outline:0}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([variant=underlined]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent-subtle)}.tab{align-items:center;color:var(--sgds-color-default);display:flex;gap:var(--sgds-spacer-3);padding:var(--sgds-spacer-4) var(--sgds-spacer-5);position:relative}.tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;function Ut(t,e){const s=Object.assign({waitUntilFirstUpdate:!1},e);return(e,i)=>{const{update:n}=e;if(t in e){const r=t;e.update=function(t){if(t.has(r)){const e=t.get(r),n=this[r];e!==n&&(s.waitUntilFirstUpdate&&!this.hasUpdated||this[i](e,n))}n.call(this,t)}}}}let Vt=0;class zt extends Nt{constructor(){super(...arguments),this.attrId=++Vt,this.componentId=`sgds-tab-${this.attrId}`,this.panel="",this.active=!1,this.disabled=!1}connectedCallback(){super.connectedCallback(),this.id=this.id.length>0?this.id:this.componentId,this.setAttribute("role","tab")}focus(t){var e,s;null===(s=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".tab"))||void 0===s||s.focus(t)}blur(){this.tab.blur()}handleActiveChange(){this.setAttribute("aria-selected",this.active?"true":"false")}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false"),this.disabled&&(this.active=!1)}render(){return Q`
+   */globalThis.litIssuedWarnings??=new Set,Et=(t,e)=>{e+=t?` See https://lit.dev/msg/${t} for more information.`:"",globalThis.litIssuedWarnings.has(e)||globalThis.litIssuedWarnings.has(t)||(console.warn(e),globalThis.litIssuedWarnings.add(e))};var At=o`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);display:block;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-16);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-24);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 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.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.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.039h4.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.468-.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.774c-.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-.525-.042-1.175-.042-1.993V9.774c0-.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-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.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' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 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.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.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.039h4.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.468-.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.774c-.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-.525-.042-1.175-.042-1.993V9.774c0-.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-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.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;vertical-align:top;width:1em}::slotted(svg){vertical-align:middle}}`;class Nt extends yt{emit(t,e){const s=new CustomEvent(t,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},e));return this.dispatchEvent(s),s}static define(t,e=this,s={}){if(customElements.get(t));else try{customElements.define(t,e,s)}catch(i){customElements.define(t,class extends e{},s)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach(([t,e])=>{this.constructor.define(t,e)})}firstUpdated(t){var e;super.firstUpdated(t),this.ssr&&(null===(e=this.shadowRoot)||void 0===e||e.querySelectorAll("slot").forEach(t=>{t.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))}))}}Nt.styles=[At],Nt.dependencies={},t([xt({type:Boolean,reflect:!0})],Nt.prototype,"ssr",void 0);var Ot=o`:host([density=compact]) .tab{font-size:var(--sgds-font-size-14);padding:var(--sgds-spacer-3) var(--sgds-spacer-5)}:host(:not([active])) .tab{cursor:pointer}:host([variant=solid]) .tab{background-color:var(--sgds-bg-translucent-subtle);border-radius:var(--sgds-border-radius-md)}:host([variant=solid][active]) .tab{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus,:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent)}:host([variant=solid]:not([active]):not([disabled])) .tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([variant=solid]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent)}:host([disabled]) .tab{cursor:not-allowed;opacity:var(--sgds-opacity-50)}:host([variant=underlined][active]) .tab{color:var(--sgds-primary-color-default)}:host([variant=underlined][orientation=vertical][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:0;content:"";height:100%;position:absolute;right:-1px;width:var(--sgds-border-width-4)}:host([variant=underlined][orientation=horizontal][active]) .tab:after{background-color:var(--sgds-primary-surface-default);bottom:-1px;content:"";height:var(--sgds-border-width-4);left:0;position:absolute;width:100%}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus,:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{background-color:var(--sgds-bg-translucent-subtle);outline:0}:host([variant=underlined]:not([active]):not([disabled])) .tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([variant=underlined]:not([active]):not([disabled])) .tab:hover{background-color:var(--sgds-bg-translucent-subtle)}.tab{align-items:center;color:var(--sgds-color-default);display:flex;gap:var(--sgds-spacer-3);padding:var(--sgds-spacer-4) var(--sgds-spacer-5);position:relative}.tab:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;function Ut(t,e){const s=Object.assign({waitUntilFirstUpdate:!1},e);return(e,i)=>{const{update:n}=e;if(t in e){const r=t;e.update=function(t){if(t.has(r)){const e=t.get(r),n=this[r];e!==n&&(s.waitUntilFirstUpdate&&!this.hasUpdated||this[i](e,n))}n.call(this,t)}}}}let Vt=0;class zt extends Nt{constructor(){super(...arguments),this.attrId=++Vt,this.componentId=`sgds-tab-${this.attrId}`,this.panel="",this.active=!1,this.disabled=!1}connectedCallback(){super.connectedCallback(),this.id=this.id.length>0?this.id:this.componentId,this.setAttribute("role","tab")}focus(t){var e,s;null===(s=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(".tab"))||void 0===s||s.focus(t)}blur(){this.tab.blur()}handleActiveChange(){this.setAttribute("aria-selected",this.active?"true":"false")}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false"),this.disabled&&(this.active=!1)}render(){return Q`
       <div data-testid="inner-tab" tabindex=${this.disabled?"-1":"0"} class="tab">
         <slot name="icon"></slot>
         <slot></slot>
       </div>
-    `}}zt.styles=[Ot],t([kt(".tab")],zt.prototype,"tab",void 0),t([xt({reflect:!0})],zt.prototype,"panel",void 0),t([xt({type:Boolean,reflect:!0})],zt.prototype,"active",void 0),t([xt({type:Boolean,reflect:!0})],zt.prototype,"disabled",void 0),t([Ut("active")],zt.prototype,"handleActiveChange",null),t([Ut("disabled")],zt.prototype,"handleDisabledChange",null);var Mt,Rt=o`.tab-group{display:flex;flex-direction:column;gap:var(--sgds-gap-xl)}.tab-group__nav{display:flex;flex-direction:row}.tab-group__content{flex:1}:host([orientation=vertical]) .tab-group{flex-direction:row}:host([orientation=vertical]) .tab-group__nav{flex-direction:column}:host([variant=solid]) .tab-group__nav{gap:var(--sgds-gap-xs)}`;class Dt extends Nt{constructor(){super(...arguments),this._tabs=[],this._panels=[],this.variant="underlined",this.orientation="horizontal",this.density="default"}connectedCallback(){const t=Promise.all([customElements.whenDefined("sgds-tab"),customElements.whenDefined("sgds-tab-panel")]);super.connectedCallback(),this._resizeObserver=new ResizeObserver(()=>{}),this._mutationObserver=new MutationObserver(t=>{t.some(t=>!["aria-labelledby","aria-controls"].includes(t.attributeName))&&setTimeout(()=>this._setAriaLabels()),t.some(t=>"disabled"===t.attributeName)&&this._syncTabsAndPanels()}),this.updateComplete.then(()=>{this._syncTabsAndPanels(),this._mutationObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this._resizeObserver.observe(this._nav),t.then(()=>{new IntersectionObserver((t,e)=>{var s;t[0].intersectionRatio>0&&(this._setAriaLabels(),this._setActiveTab(null!==(s=this._getActiveTab())&&void 0!==s?s:this._tabs[0],{emitEvents:!1}),e.unobserve(t[0].target))}).observe(this._tabGroup)})})}disconnectedCallback(){this._mutationObserver.disconnect(),this._resizeObserver.unobserve(this._nav)}show(t){const e=this._tabs.find(e=>e.panel===t);e&&this._setActiveTab(e)}_getAllTabs(t={includeDisabled:!0}){return[...this.shadowRoot.querySelector('slot[name="nav"]').assignedElements()].filter(e=>t.includeDisabled?"sgds-tab"===e.tagName.toLowerCase():"sgds-tab"===e.tagName.toLowerCase()&&!e.disabled)}_getAllPanels(){return[...this._body.assignedElements()].filter(t=>"sgds-tab-panel"===t.tagName.toLowerCase())}_getActiveTab(){return this._tabs.find(t=>t.active)}_handleClick(t){const e=t.target.closest("sgds-tab");(null==e?void 0:e.closest("sgds-tab-group"))===this&&null!==e&&this._setActiveTab(e)}_handleKeyDown(t){const e=t.target.closest("sgds-tab");if((null==e?void 0:e.closest("sgds-tab-group"))===this&&(["Enter"," "].includes(t.key)&&null!==e&&(this._setActiveTab(e),t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))){const e=this._tabs.find(t=>t.matches(":focus"));if("sgds-tab"===(null==e?void 0:e.tagName.toLowerCase())){let s=this._tabs.indexOf(e);"Home"===t.key?s=0:"End"===t.key?s=this._tabs.length-1:"ArrowUp"===t.key||"ArrowLeft"===t.key?s--:"ArrowDown"!==t.key&&"ArrowRight"!==t.key||s++,s<0&&(s=this._tabs.length-1),s>this._tabs.length-1&&(s=0),this._tabs[s].focus({preventScroll:!0}),this._setActiveTab(this._tabs[s]),t.preventDefault()}}}_setActiveTab(t,e){if(e=Object.assign({emitEvents:!0},e),t!==this._activeTab&&!t.disabled){const s=this._activeTab;this._activeTab=t,this._tabs.forEach(t=>{t.active=t===this._activeTab}),this._panels.map(t=>{var e;return t.active=t.name===(null===(e=this._activeTab)||void 0===e?void 0:e.panel)}),e.emitEvents&&(s&&this.emit("sgds-tab-hide",{detail:{name:s.panel}}),this.emit("sgds-tab-show",{detail:{name:this._activeTab.panel}}))}}_setAriaLabels(){this._tabs.forEach(t=>{const e=this._panels.find(e=>e.name===t.panel);e&&(t.setAttribute("aria-controls",e.getAttribute("id")),e.setAttribute("aria-labelledby",t.getAttribute("id")))})}_syncTabsAndPanels(){this._tabs=this._getAllTabs({includeDisabled:!1}),this._panels=this._getAllPanels()}_updateTabsAttribute(t){if(!this._navSlot)return;this._navSlot.forEach(e=>{e.setAttribute(t,this[t])})}_handleSlotChange(){this._updateTabsAttribute("variant"),this._updateTabsAttribute("orientation"),this._updateTabsAttribute("density"),this._syncTabsAndPanels()}willUpdate(t){t.has("variant")&&this._updateTabsAttribute("variant"),t.has("orientation")&&this._updateTabsAttribute("orientation"),t.has("density")&&this._updateTabsAttribute("density")}render(){return Q`
+    `}}zt.styles=[Ot],t([kt(".tab")],zt.prototype,"tab",void 0),t([xt({reflect:!0})],zt.prototype,"panel",void 0),t([xt({type:Boolean,reflect:!0})],zt.prototype,"active",void 0),t([xt({type:Boolean,reflect:!0})],zt.prototype,"disabled",void 0),t([Ut("active")],zt.prototype,"handleActiveChange",null),t([Ut("disabled")],zt.prototype,"handleDisabledChange",null);var Mt,Rt=o`.tab-group{display:flex;flex-direction:column;gap:var(--sgds-gap-xl)}.tab-group__nav{display:flex;flex-direction:row}.tab-group__content{flex:1}:host([orientation=vertical]) .tab-group{flex-direction:row}:host([orientation=vertical]) .tab-group__nav{flex-direction:column}:host([variant=solid]) .tab-group__nav{gap:var(--sgds-gap-xs)}:host([variant=underlined][orientation=horizontal]) .tab-group__nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:flex;flex-direction:row}:host([variant=underlined][orientation=vertical]) .tab-group__nav{border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}`;class Dt extends Nt{constructor(){super(...arguments),this._tabs=[],this._panels=[],this.variant="underlined",this.orientation="horizontal",this.density="default"}connectedCallback(){const t=Promise.all([customElements.whenDefined("sgds-tab"),customElements.whenDefined("sgds-tab-panel")]);super.connectedCallback(),this._resizeObserver=new ResizeObserver(()=>{}),this._mutationObserver=new MutationObserver(t=>{t.some(t=>!["aria-labelledby","aria-controls"].includes(t.attributeName))&&setTimeout(()=>this._setAriaLabels()),t.some(t=>"disabled"===t.attributeName)&&this._syncTabsAndPanels()}),this.updateComplete.then(()=>{this._syncTabsAndPanels(),this._mutationObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this._resizeObserver.observe(this._nav),t.then(()=>{new IntersectionObserver((t,e)=>{var s;t[0].intersectionRatio>0&&(this._setAriaLabels(),this._setActiveTab(null!==(s=this._getActiveTab())&&void 0!==s?s:this._tabs[0],{emitEvents:!1}),e.unobserve(t[0].target))}).observe(this._tabGroup)})})}disconnectedCallback(){this._mutationObserver.disconnect(),this._resizeObserver.unobserve(this._nav)}show(t){const e=this._tabs.find(e=>e.panel===t);e&&this._setActiveTab(e)}_getAllTabs(t={includeDisabled:!0}){return[...this.shadowRoot.querySelector('slot[name="nav"]').assignedElements()].filter(e=>t.includeDisabled?"sgds-tab"===e.tagName.toLowerCase():"sgds-tab"===e.tagName.toLowerCase()&&!e.disabled)}_getAllPanels(){return[...this._body.assignedElements()].filter(t=>"sgds-tab-panel"===t.tagName.toLowerCase())}_getActiveTab(){return this._tabs.find(t=>t.active)}_handleClick(t){const e=t.target.closest("sgds-tab");(null==e?void 0:e.closest("sgds-tab-group"))===this&&null!==e&&this._setActiveTab(e)}_handleKeyDown(t){const e=t.target.closest("sgds-tab");if((null==e?void 0:e.closest("sgds-tab-group"))===this&&(["Enter"," "].includes(t.key)&&null!==e&&(this._setActiveTab(e),t.preventDefault()),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))){const e=this._tabs.find(t=>t.matches(":focus"));if("sgds-tab"===(null==e?void 0:e.tagName.toLowerCase())){let s=this._tabs.indexOf(e);"Home"===t.key?s=0:"End"===t.key?s=this._tabs.length-1:"ArrowUp"===t.key||"ArrowLeft"===t.key?s--:"ArrowDown"!==t.key&&"ArrowRight"!==t.key||s++,s<0&&(s=this._tabs.length-1),s>this._tabs.length-1&&(s=0),this._tabs[s].focus({preventScroll:!0}),this._setActiveTab(this._tabs[s]),t.preventDefault()}}}_setActiveTab(t,e){if(e=Object.assign({emitEvents:!0},e),t!==this._activeTab&&!t.disabled){const s=this._activeTab;this._activeTab=t,this._tabs.forEach(t=>{t.active=t===this._activeTab}),this._panels.map(t=>{var e;return t.active=t.name===(null===(e=this._activeTab)||void 0===e?void 0:e.panel)}),e.emitEvents&&(s&&this.emit("sgds-tab-hide",{detail:{name:s.panel}}),this.emit("sgds-tab-show",{detail:{name:this._activeTab.panel}}))}}_setAriaLabels(){this._tabs.forEach(t=>{const e=this._panels.find(e=>e.name===t.panel);e&&(t.setAttribute("aria-controls",e.getAttribute("id")),e.setAttribute("aria-labelledby",t.getAttribute("id")))})}_syncTabsAndPanels(){this._tabs=this._getAllTabs({includeDisabled:!1}),this._panels=this._getAllPanels()}_updateTabsAttribute(t){if(!this._navSlot)return;this._navSlot.forEach(e=>{e.setAttribute(t,this[t])})}_handleSlotChange(){this._updateTabsAttribute("variant"),this._updateTabsAttribute("orientation"),this._updateTabsAttribute("density"),this._syncTabsAndPanels()}willUpdate(t){t.has("variant")&&this._updateTabsAttribute("variant"),t.has("orientation")&&this._updateTabsAttribute("orientation"),t.has("density")&&this._updateTabsAttribute("density")}render(){return Q`
       <div class="tab-group" @click=${this._handleClick} @keydown=${this._handleKeyDown}>
         <div class="tab-group__nav" role="tablist">
           <slot name="nav" @slotchange=${this._handleSlotChange}></slot>
         </div>
+
         <div class="tab-group__content">
           <slot class="tab-group__body" @slotchange=${this._syncTabsAndPanels}></slot>
         </div>