@govtechsg/sgds-web-component 3.25.0 → 3.25.1-rc.0

package/components/Tab/sgds-tab-group.d.ts

@@ -27,6 +27,8 @@ export declare class SgdsTabGroup extends SgdsElement {
     orientation: "horizontal" | "vertical";
     /** The density of tabs. Controls the density of all `sgds-tabs` in its slot. It also sets the density attribute of `sgds-tab` */
     density: "compact" | "default";
+    /** When set, all `sgds-tabs` in its slot will be in full width. Only takes effect when `orientation` is set to `horizontal` */
+    fullWidth: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /** Shows the specified tab panel. */

package/components/Tab/sgds-tab-group.js

@@ -26,6 +26,8 @@ class SgdsTabGroup extends SgdsElement {
         this.orientation = "horizontal";
         /** The density of tabs. Controls the density of all `sgds-tabs` in its slot. It also sets the density attribute of `sgds-tab` */
         this.density = "default";
+        /** When set, all `sgds-tabs` in its slot will be in full width. Only takes effect when `orientation` is set to `horizontal` */
+        this.fullWidth = false;
     }
     connectedCallback() {
         const whenAllDefined = Promise.all([
@@ -192,6 +194,7 @@ class SgdsTabGroup extends SgdsElement {
         this._updateTabsAttribute("variant");
         this._updateTabsAttribute("orientation");
         this._updateTabsAttribute("density");
+        this._updateTabsAttribute("fullWidth");
         this._syncTabsAndPanels();
     }
     willUpdate(_changedProperties) {
@@ -205,6 +208,9 @@ class SgdsTabGroup extends SgdsElement {
         if (_changedProperties.has("density")) {
             this._updateTabsAttribute("density");
         }
+        if (_changedProperties.has("fullWidth")) {
+            this._updateTabsAttribute("fullWidth");
+        }
     }
     render() {
         return html `
@@ -239,6 +245,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], SgdsTabGroup.prototype, "density", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsTabGroup.prototype, "fullWidth", void 0);
 __decorate([
     queryAssignedElements({ slot: "nav", flatten: true })
 ], SgdsTabGroup.prototype, "_navSlot", void 0);

package/components/Tab/sgds-tab-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-tab-group.js","sources":["../../../src/components/Tab/sgds-tab-group.ts"],"sourcesContent":["import { html, PropertyValues } from \"lit\";\nimport { property, query, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { SgdsTab } from \"./sgds-tab\";\nimport { SgdsTabPanel } from \"./sgds-tab-panel\";\nimport tabGroupStyle from \"./tab-group.css\";\n/**\n * @summary Tab Group organizes content into a container with the syncing of tab and their corresponding panels.\n * Each tab must be slotted into the nav slot and its `panel` must refer to a tab panel of the same name.\n *\n * @slot default - The slot for `sgds-tab-panel`\n * @slot nav - The slot for `sgds-tab`\n *\n * @event sgds-tab-show - Emitted when a tab and its panels are shown. `event.detail.name` contains the active tab's panel name.\n * @event sgds-tab-hide - Emitted when a tab and its panels are hidden. `event.detail.name` contains the hidden tab's panel name.\n *\n */\nexport class SgdsTabGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, tabGroupStyle];\n\n  @query(\".tab-group\") private _tabGroup: HTMLElement;\n\n  @query(\".tab-group__body\") private _body: HTMLSlotElement;\n\n  @query(\".tab-group__nav\") private _nav: HTMLElement;\n\n  private _activeTab?: SgdsTab;\n\n  private _mutationObserver: MutationObserver;\n\n  private _resizeObserver: ResizeObserver;\n\n  private _tabs: SgdsTab[] = [];\n\n  private _panels: SgdsTabPanel[] = [];\n  /** The variant of tabs. Controls the visual styles of all `sgds-tabs` in its slot. It also sets the variant atttribute of `sgds-tab` */\n  @property({ type: String, reflect: true }) variant: \"underlined\" | \"solid\" = \"underlined\";\n  /** The orientation of tabs. Controls the orientation of all `sgds-tabs` in its slot. It also sets the orientation attribute of `sgds-tab` */\n  @property({ type: String, reflect: true }) orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n  /** The density of tabs. Controls the density of all `sgds-tabs` in its slot. It also sets the density attribute of `sgds-tab` */\n  @property({ type: String, reflect: true }) density: \"compact\" | \"default\" = \"default\";\n\n  connectedCallback() {\n    const whenAllDefined = Promise.all([\n      customElements.whenDefined(\"sgds-tab\"),\n      customElements.whenDefined(\"sgds-tab-panel\")\n    ]);\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => {\n      return;\n    });\n\n    this._mutationObserver = new MutationObserver(mutations => {\n      // Update aria labels when the DOM changes\n      if (mutations.some(m => ![\"aria-labelledby\", \"aria-controls\"].includes(m.attributeName))) {\n        setTimeout(() => this._setAriaLabels());\n      }\n\n      // Sync tabs when disabled states change\n      if (mutations.some(m => m.attributeName === \"disabled\")) {\n        this._syncTabsAndPanels();\n      }\n    });\n\n    this.updateComplete.then(() => {\n      this._syncTabsAndPanels();\n      this._mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });\n      this._resizeObserver.observe(this._nav);\n      whenAllDefined.then(() => {\n        // Set initial tab state when the tabs first become visible\n        const intersectionObserver = new IntersectionObserver((entries, observer) => {\n          if (entries[0].intersectionRatio > 0) {\n            this._setAriaLabels();\n            // this.setTabVariant();\n            this._setActiveTab(this._getActiveTab() ?? this._tabs[0], { emitEvents: false });\n            observer.unobserve(entries[0].target);\n          }\n        });\n        intersectionObserver.observe(this._tabGroup);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this._mutationObserver.disconnect();\n    this._resizeObserver.unobserve(this._nav);\n  }\n\n  /** Shows the specified tab panel. */\n  public show(panel: string) {\n    const tab = this._tabs.find(el => el.panel === panel);\n\n    if (tab) {\n      this._setActiveTab(tab);\n    }\n  }\n  private _getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {\n    const slot = this.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"nav\"]');\n\n    return [...(slot.assignedElements() as SgdsTab[])].filter(el => {\n      return options.includeDisabled\n        ? el.tagName.toLowerCase() === \"sgds-tab\"\n        : el.tagName.toLowerCase() === \"sgds-tab\" && !el.disabled;\n    });\n  }\n  private _getAllPanels() {\n    return [...this._body.assignedElements()].filter(el => el.tagName.toLowerCase() === \"sgds-tab-panel\") as [\n      SgdsTabPanel\n    ];\n  }\n  private _getActiveTab() {\n    return this._tabs.find(el => el.active);\n  }\n  private _handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    if (tab !== null) {\n      this._setActiveTab(tab);\n    }\n  }\n  private _handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    // Activate a tab\n    if ([\"Enter\", \" \"].includes(event.key)) {\n      if (tab !== null) {\n        this._setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if ([\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\", \"Home\", \"End\"].includes(event.key)) {\n      const activeEl = this._tabs.find(t => t.matches(\":focus\"));\n\n      if (activeEl?.tagName.toLowerCase() === \"sgds-tab\") {\n        let index = this._tabs.indexOf(activeEl);\n\n        if (event.key === \"Home\") {\n          index = 0;\n        } else if (event.key === \"End\") {\n          index = this._tabs.length - 1;\n        } else if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n          index--;\n        } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n          index++;\n        }\n\n        if (index < 0) {\n          index = this._tabs.length - 1;\n        }\n\n        if (index > this._tabs.length - 1) {\n          index = 0;\n        }\n\n        this._tabs[index].focus({ preventScroll: true });\n\n        this._setActiveTab(this._tabs[index] /** , { scrollBehavior: \"smooth\" }*/);\n\n        event.preventDefault();\n      }\n    }\n  }\n  private _setActiveTab(tab: SgdsTab, options?: { emitEvents?: boolean }) {\n    options = {\n      emitEvents: true,\n      ...options\n    };\n\n    if (tab !== this._activeTab && !tab.disabled) {\n      const previousTab = this._activeTab;\n      this._activeTab = tab;\n\n      // Sync active tab and panel\n      this._tabs.forEach(el => {\n        el.active = el === this._activeTab ? true : false;\n      });\n\n      this._panels.map(el => (el.active = el.name === this._activeTab?.panel));\n\n      // Emit events\n      if (options.emitEvents) {\n        if (previousTab) {\n          this.emit(\"sgds-tab-hide\", { detail: { name: previousTab.panel } });\n        }\n\n        this.emit(\"sgds-tab-show\", { detail: { name: this._activeTab.panel } });\n      }\n    }\n  }\n  private _setAriaLabels() {\n    // Link each tab with its corresponding panel\n    this._tabs.forEach(tab => {\n      const panel = this._panels.find(el => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute(\"aria-controls\", panel.getAttribute(\"id\"));\n        panel.setAttribute(\"aria-labelledby\", tab.getAttribute(\"id\"));\n      }\n    });\n  }\n\n  // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n  private _syncTabsAndPanels() {\n    this._tabs = this._getAllTabs({ includeDisabled: false });\n    this._panels = this._getAllPanels();\n  }\n\n  @queryAssignedElements({ slot: \"nav\", flatten: true })\n  private _navSlot: SgdsTab[];\n\n  private _updateTabsAttribute(name: string) {\n    if (!this._navSlot) return;\n    const tabs = this._navSlot;\n    tabs.forEach(tab => {\n      tab.setAttribute(name, this[name]);\n    });\n  }\n\n  private _handleSlotChange() {\n    this._updateTabsAttribute(\"variant\");\n    this._updateTabsAttribute(\"orientation\");\n    this._updateTabsAttribute(\"density\");\n    this._syncTabsAndPanels();\n  }\n\n  protected willUpdate(_changedProperties: PropertyValues): void {\n    // similar to @watch\n    if (_changedProperties.has(\"variant\")) {\n      this._updateTabsAttribute(\"variant\");\n    }\n    if (_changedProperties.has(\"orientation\")) {\n      this._updateTabsAttribute(\"orientation\");\n    }\n    if (_changedProperties.has(\"density\")) {\n      this._updateTabsAttribute(\"density\");\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"tab-group\" @click=${this._handleClick} @keydown=${this._handleKeyDown}>\n        <div class=\"tab-group__nav\" role=\"tablist\">\n          <slot name=\"nav\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n\n        <div class=\"tab-group__content\">\n          <slot class=\"tab-group__body\" @slotchange=${this._syncTabsAndPanels}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTabGroup;\n"],"names":["tabGroupStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-tab-group.js","sources":["../../../src/components/Tab/sgds-tab-group.ts"],"sourcesContent":["import { html, PropertyValues } from \"lit\";\nimport { property, query, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { SgdsTab } from \"./sgds-tab\";\nimport { SgdsTabPanel } from \"./sgds-tab-panel\";\nimport tabGroupStyle from \"./tab-group.css\";\n/**\n * @summary Tab Group organizes content into a container with the syncing of tab and their corresponding panels.\n * Each tab must be slotted into the nav slot and its `panel` must refer to a tab panel of the same name.\n *\n * @slot default - The slot for `sgds-tab-panel`\n * @slot nav - The slot for `sgds-tab`\n *\n * @event sgds-tab-show - Emitted when a tab and its panels are shown. `event.detail.name` contains the active tab's panel name.\n * @event sgds-tab-hide - Emitted when a tab and its panels are hidden. `event.detail.name` contains the hidden tab's panel name.\n *\n */\nexport class SgdsTabGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, tabGroupStyle];\n\n  @query(\".tab-group\") private _tabGroup: HTMLElement;\n\n  @query(\".tab-group__body\") private _body: HTMLSlotElement;\n\n  @query(\".tab-group__nav\") private _nav: HTMLElement;\n\n  private _activeTab?: SgdsTab;\n\n  private _mutationObserver: MutationObserver;\n\n  private _resizeObserver: ResizeObserver;\n\n  private _tabs: SgdsTab[] = [];\n\n  private _panels: SgdsTabPanel[] = [];\n  /** The variant of tabs. Controls the visual styles of all `sgds-tabs` in its slot. It also sets the variant atttribute of `sgds-tab` */\n  @property({ type: String, reflect: true }) variant: \"underlined\" | \"solid\" = \"underlined\";\n  /** The orientation of tabs. Controls the orientation of all `sgds-tabs` in its slot. It also sets the orientation attribute of `sgds-tab` */\n  @property({ type: String, reflect: true }) orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n  /** The density of tabs. Controls the density of all `sgds-tabs` in its slot. It also sets the density attribute of `sgds-tab` */\n  @property({ type: String, reflect: true }) density: \"compact\" | \"default\" = \"default\";\n  /** When set, all `sgds-tabs` in its slot will be in full width. Only takes effect when `orientation` is set to `horizontal` */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  connectedCallback() {\n    const whenAllDefined = Promise.all([\n      customElements.whenDefined(\"sgds-tab\"),\n      customElements.whenDefined(\"sgds-tab-panel\")\n    ]);\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => {\n      return;\n    });\n\n    this._mutationObserver = new MutationObserver(mutations => {\n      // Update aria labels when the DOM changes\n      if (mutations.some(m => ![\"aria-labelledby\", \"aria-controls\"].includes(m.attributeName))) {\n        setTimeout(() => this._setAriaLabels());\n      }\n\n      // Sync tabs when disabled states change\n      if (mutations.some(m => m.attributeName === \"disabled\")) {\n        this._syncTabsAndPanels();\n      }\n    });\n\n    this.updateComplete.then(() => {\n      this._syncTabsAndPanels();\n      this._mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });\n      this._resizeObserver.observe(this._nav);\n      whenAllDefined.then(() => {\n        // Set initial tab state when the tabs first become visible\n        const intersectionObserver = new IntersectionObserver((entries, observer) => {\n          if (entries[0].intersectionRatio > 0) {\n            this._setAriaLabels();\n            // this.setTabVariant();\n            this._setActiveTab(this._getActiveTab() ?? this._tabs[0], { emitEvents: false });\n            observer.unobserve(entries[0].target);\n          }\n        });\n        intersectionObserver.observe(this._tabGroup);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this._mutationObserver.disconnect();\n    this._resizeObserver.unobserve(this._nav);\n  }\n\n  /** Shows the specified tab panel. */\n  public show(panel: string) {\n    const tab = this._tabs.find(el => el.panel === panel);\n\n    if (tab) {\n      this._setActiveTab(tab);\n    }\n  }\n  private _getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {\n    const slot = this.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"nav\"]');\n\n    return [...(slot.assignedElements() as SgdsTab[])].filter(el => {\n      return options.includeDisabled\n        ? el.tagName.toLowerCase() === \"sgds-tab\"\n        : el.tagName.toLowerCase() === \"sgds-tab\" && !el.disabled;\n    });\n  }\n  private _getAllPanels() {\n    return [...this._body.assignedElements()].filter(el => el.tagName.toLowerCase() === \"sgds-tab-panel\") as [\n      SgdsTabPanel\n    ];\n  }\n  private _getActiveTab() {\n    return this._tabs.find(el => el.active);\n  }\n  private _handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    if (tab !== null) {\n      this._setActiveTab(tab);\n    }\n  }\n  private _handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    // Activate a tab\n    if ([\"Enter\", \" \"].includes(event.key)) {\n      if (tab !== null) {\n        this._setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if ([\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\", \"Home\", \"End\"].includes(event.key)) {\n      const activeEl = this._tabs.find(t => t.matches(\":focus\"));\n\n      if (activeEl?.tagName.toLowerCase() === \"sgds-tab\") {\n        let index = this._tabs.indexOf(activeEl);\n\n        if (event.key === \"Home\") {\n          index = 0;\n        } else if (event.key === \"End\") {\n          index = this._tabs.length - 1;\n        } else if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n          index--;\n        } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n          index++;\n        }\n\n        if (index < 0) {\n          index = this._tabs.length - 1;\n        }\n\n        if (index > this._tabs.length - 1) {\n          index = 0;\n        }\n\n        this._tabs[index].focus({ preventScroll: true });\n\n        this._setActiveTab(this._tabs[index] /** , { scrollBehavior: \"smooth\" }*/);\n\n        event.preventDefault();\n      }\n    }\n  }\n  private _setActiveTab(tab: SgdsTab, options?: { emitEvents?: boolean }) {\n    options = {\n      emitEvents: true,\n      ...options\n    };\n\n    if (tab !== this._activeTab && !tab.disabled) {\n      const previousTab = this._activeTab;\n      this._activeTab = tab;\n\n      // Sync active tab and panel\n      this._tabs.forEach(el => {\n        el.active = el === this._activeTab ? true : false;\n      });\n\n      this._panels.map(el => (el.active = el.name === this._activeTab?.panel));\n\n      // Emit events\n      if (options.emitEvents) {\n        if (previousTab) {\n          this.emit(\"sgds-tab-hide\", { detail: { name: previousTab.panel } });\n        }\n\n        this.emit(\"sgds-tab-show\", { detail: { name: this._activeTab.panel } });\n      }\n    }\n  }\n  private _setAriaLabels() {\n    // Link each tab with its corresponding panel\n    this._tabs.forEach(tab => {\n      const panel = this._panels.find(el => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute(\"aria-controls\", panel.getAttribute(\"id\"));\n        panel.setAttribute(\"aria-labelledby\", tab.getAttribute(\"id\"));\n      }\n    });\n  }\n\n  // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n  private _syncTabsAndPanels() {\n    this._tabs = this._getAllTabs({ includeDisabled: false });\n    this._panels = this._getAllPanels();\n  }\n\n  @queryAssignedElements({ slot: \"nav\", flatten: true })\n  private _navSlot: SgdsTab[];\n\n  private _updateTabsAttribute(name: string) {\n    if (!this._navSlot) return;\n    const tabs = this._navSlot;\n    tabs.forEach(tab => {\n      tab.setAttribute(name, this[name]);\n    });\n  }\n\n  private _handleSlotChange() {\n    this._updateTabsAttribute(\"variant\");\n    this._updateTabsAttribute(\"orientation\");\n    this._updateTabsAttribute(\"density\");\n    this._updateTabsAttribute(\"fullWidth\");\n    this._syncTabsAndPanels();\n  }\n\n  protected willUpdate(_changedProperties: PropertyValues): void {\n    // similar to @watch\n    if (_changedProperties.has(\"variant\")) {\n      this._updateTabsAttribute(\"variant\");\n    }\n    if (_changedProperties.has(\"orientation\")) {\n      this._updateTabsAttribute(\"orientation\");\n    }\n    if (_changedProperties.has(\"density\")) {\n      this._updateTabsAttribute(\"density\");\n    }\n    if (_changedProperties.has(\"fullWidth\")) {\n      this._updateTabsAttribute(\"fullWidth\");\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"tab-group\" @click=${this._handleClick} @keydown=${this._handleKeyDown}>\n        <div class=\"tab-group__nav\" role=\"tablist\">\n          <slot name=\"nav\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n\n        <div class=\"tab-group__content\">\n          <slot class=\"tab-group__body\" @slotchange=${this._syncTabsAndPanels}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTabGroup;\n"],"names":["tabGroupStyle"],"mappings":"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"}

package/components/Tab/tab-group.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.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)}`;
+var css_248z = css`.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)}:host([fullWidth][orientation=horizontal]) slot[name=nav]::slotted(sgds-tab){width:100%}`;
 
 export { css_248z as default };
 //# sourceMappingURL=tab-group.js.map

package/components/Tab/tab-panel.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.tab-panel{display:block}.tab-panel:not(.tab-panel--active){display:none}`;
+var css_248z = css`:host(:not([active])){display:none}.tab-panel{display:block}.tab-panel:not(.tab-panel--active){display:none}`;
 
 export { css_248z as default };
 //# sourceMappingURL=tab-panel.js.map

package/components/Tab/tab.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host([density=compact]) .tab{font-size:var(--sgds-font-size-label-sm);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-40)}: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)}`;
+var css_248z = css`:host([density=compact]) .tab{font-size:var(--sgds-font-size-label-sm);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-40)}: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)}:host([fullWidth][orientation=horizontal]) .tab{justify-content:center}.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)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=tab.js.map

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

@@ -76,7 +76,7 @@ class extends Nt{constructor(t){if(super(t),t.type!==It&&t.type!==Et&&t.type!==z
    * @license
    * Copyright 2020 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
-   */var jt,Ht=r`.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-20)}.invalid-feedback{font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`,qt=r`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs)}.form-text.disabled{opacity:var(--sgds-opacity-40)}`,Bt=r`.form-label{color:var(--sgds-form-color-default);font-weight:var(--sgds-font-weight-semibold);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`,Zt=r`.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-24)}`,Jt=r`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;color:var(--sgds-body-color-default,#1a1a1a);display:block;font-family:var(--sgds-font-family-brand,"Inter",system-ui,sans-serif);font-size:var(--sgds-font-size-body-md,1rem);font-weight:var(--sgds-font-weight-regular,400);line-height:var(--sgds-line-height-xs,24px);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 Gt extends bt{emit(t,e){const i=new CustomEvent(t,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},e));return this.dispatchEvent(i),i}static define(t,e=this,i={}){if(customElements.get(t));else try{customElements.define(t,e,i)}catch(s){customElements.define(t,class extends e{},i)}}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}))}))}}function Yt(t="",e=""){return`id-${Math.random().toString().substring(2,6)}-sgds-${t}-${e}`}Gt.styles=[Jt],Gt.dependencies={},t([kt({type:Boolean,reflect:!0})],Gt.prototype,"ssr",void 0);class Xt extends Gt{constructor(){super(...arguments),this.label="",this.hintText="",this.disabled=!1,this.invalid=!1,this._controlId=Yt("input"),this._labelId=Yt("label")}setInvalid(t){this.invalid=t,t?this.emit("sgds-invalid"):this.emit("sgds-valid")}}Xt.styles=[...Gt.styles,Ht,qt,Bt,Zt],t([kt({reflect:!0})],Xt.prototype,"label",void 0),t([kt({reflect:!0})],Xt.prototype,"hintText",void 0),t([kt({reflect:!0})],Xt.prototype,"name",void 0),t([kt({type:Boolean,reflect:!0})],Xt.prototype,"disabled",void 0),t([kt({type:Boolean,reflect:!0})],Xt.prototype,"invalid",void 0);class Kt{constructor(t,e){(this.host=t).addController(this),this._internals=t._internals||this.host.attachInternals(),this.options=Object.assign({setInvalid:(t,e)=>{t.invalid=e},value:t=>t.value,input:t=>t.input},e)}hostConnected(){this.host.addEventListener("invalid",t=>this.handleInvalid(t))}hostDisconnected(){this.host.removeEventListener("invalid",t=>this.handleInvalid(t))}handleInvalid(t){t.preventDefault(),this.options.setInvalid(this.host,!0)}handleInput(t){const e=t.target;this.options.setInvalid(this.host,!1),this.validateInput(e)}handleChange(t){const e=t.target;this.validateInput(e),this.options.setInvalid(this.host,!this.checkValidity())}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}updateInvalidState(){this.options.setInvalid(this.host,!this.checkValidity())}resetValidity(){return this._internals.setValidity({})}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}setValidity(t,e,i){return this._internals.setValidity(t,e,i)}setFormValue(){const t=this.options.value(this.host);this._internals.setFormValue(t)}validateInput(t){if(this.options.input(this.host).disabled)return this._internals.setValidity({});const e=t.validity;if(e.valid)this._internals.setValidity({});else for(const i in e)e[i]&&(this.validationError=i.toString(),this._internals.setValidity({[this.validationError]:!0},t.validationMessage,t))}}const Qt=e=>{class i extends e{constructor(...t){super(...t),this._isTouched=!1,this._internals=this.attachInternals()}connectedCallback(){var t;super.connectedCallback(),null!==(t=this.inputValidationController)&&void 0!==t||(this.inputValidationController=new Kt(this))}async firstUpdated(t){super.firstUpdated(t),this.input=this.shadowRoot.querySelector("input")||await this.sgdsInput||this.shadowRoot.querySelector("textarea")||await this.sgdsDatepickerInput,this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this._mixinValidate(this.input)}formResetCallback(){this._mixinResetFormControl?this._mixinResetFormControl():(this.value=this.defaultValue,this._mixinResetValidity(this.input)),this._mixinSetFormValue()}_mixinHandleChange(t){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleChange(t)}_mixinHandleInputChange(t){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleInput(t)}_mixinResetValidity(t){this.inputValidationController.resetValidity(),this.inputValidationController.updateInvalidState(),this._isTouched&&(this._isTouched=!1),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.validateInput(t)}_mixinValidate(t){this._mixinShouldSkipSgdsValidation()||this.inputValidationController.validateInput(t)}_mixinSetFormValue(){const t=this.value;this._internals.setFormValue(t)}_mixinCheckValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.checkValidity()}_mixinReportValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.reportValidity()}_mixinGetValidity(){return this._internals.validity}_mixinGetValidationMessage(){return this._internals.validationMessage}_mixinSetValidity(t,e,i){if(!this._mixinShouldSkipSgdsValidation())return this.inputValidationController.setValidity(t,e,i)}_mixinShouldSkipSgdsValidation(){const t=this.closest("form");return(null==t?void 0:t.noValidate)||this.noValidate}}return i.formAssociated=!0,t([Tt("sgds-input")],i.prototype,"sgdsInput",void 0),t([Tt("sgds-datepicker-input")],i.prototype,"sgdsDatepickerInput",void 0),i};function te(t,e){const i=Object.assign({waitUntilFirstUpdate:!1},e);return(e,s)=>{const{update:n}=e;if(t in e){const o=t;e.update=function(t){if(t.has(o)){const e=t.get(o),n=this[o];e!==n&&(i.waitUntilFirstUpdate&&!this.hasUpdated||this[s](e,n))}n.call(this,t)}}}}var ee,ie,se,ne,oe,re=r`textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;resize:vertical}textarea.form-control-group{min-height:var(--sgds-dimension-136);overflow:auto;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x)}.textarea-resize-none{resize:none}.textarea-resize-vertical{resize:vertical}.textarea-resize-auto{height:auto;overflow-y:hidden;resize:none}.textarea-info-container{display:flex;justify-content:space-between}.word-count{margin-left:auto}`,ae=r`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.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(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 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:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;class le extends(Qt(Xt)){constructor(){super(...arguments),this.value="",this.spellcheck=!1,this.rows=4,this.placeholder="Placeholder",this.invalidFeedback="",this.autofocus=!1,this.readonly=!1,this.resize="vertical",this.defaultValue="",this.hasFeedback=!1,this.required=!1,this.noValidate=!1,this.hintText="",this._isTouched=!1}focus(t){this.textarea.focus(t)}blur(){this.textarea.blur()}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}select(){this.textarea.select()}_handleInvalid(t){t.preventDefault(),this.invalid=!0}_handleChange(t){this.value=this.input.value,this.emit("sgds-change"),super._mixinHandleChange(t)}_handleInputChange(t){this.value=this.input.value,this.emit("sgds-input"),super._mixinHandleInputChange(t)}_handleFocus(){this.emit("sgds-focus")}_handleBlur(){const t=this.emit("sgds-blur",{cancelable:!0});this._mixinShouldSkipSgdsValidation()||t.defaultPrevented||(this.setInvalid(!this._mixinCheckValidity()),this._isTouched=!0)}_handleRowsChange(){this._setTextareaHeight()}_setTextareaHeight(){"auto"===this.resize?(this.textarea.style.height="auto",this.textarea.style.height=`${this.textarea.scrollHeight}px`):this.textarea.style.height=void 0}_handleIsTouched(){this._mixinShouldSkipSgdsValidation()||this._isTouched&&this.setInvalid(!this._mixinCheckValidity())}_handleDisabledChange(){this.setInvalid(!1)}_handleValueChange(){this.updateComplete.then(()=>this._setTextareaHeight())}_renderHintText(){const t=Lt` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;return this.hintText&&t}_wordCount(){return Lt`
+   */var jt,Ht=r`.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-20)}.invalid-feedback{font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`,qt=r`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs)}.form-text.disabled{opacity:var(--sgds-opacity-40)}`,Bt=r`.form-label{color:var(--sgds-form-color-default);font-weight:var(--sgds-font-weight-semibold);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-40)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`,Zt=r`.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-24)}`,Jt=r`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;color:var(--sgds-body-color-default,#1a1a1a);display:block;font-family:var(--sgds-font-family-brand,"Inter",system-ui,sans-serif);font-size:var(--sgds-font-size-body-md,1rem);font-weight:var(--sgds-font-weight-regular,400);line-height:var(--sgds-line-height-xs,24px);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 Gt extends bt{emit(t,e){const i=new CustomEvent(t,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},e));return this.dispatchEvent(i),i}static define(t,e=this,i={}){if(customElements.get(t));else try{customElements.define(t,e,i)}catch(s){customElements.define(t,class extends e{},i)}}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}))}))}}function Yt(t="",e=""){return`id-${Math.random().toString().substring(2,6)}-sgds-${t}-${e}`}Gt.styles=[Jt],Gt.dependencies={},t([kt({type:Boolean,reflect:!0})],Gt.prototype,"ssr",void 0);class Xt extends Gt{constructor(){super(...arguments),this.label="",this.hintText="",this.disabled=!1,this.invalid=!1,this._controlId=Yt("input"),this._labelId=Yt("label")}setInvalid(t){this.invalid=t,t?this.emit("sgds-invalid"):this.emit("sgds-valid")}}Xt.styles=[...Gt.styles,Ht,qt,Bt,Zt],t([kt({reflect:!0})],Xt.prototype,"label",void 0),t([kt({reflect:!0})],Xt.prototype,"hintText",void 0),t([kt({reflect:!0})],Xt.prototype,"name",void 0),t([kt({type:Boolean,reflect:!0})],Xt.prototype,"disabled",void 0),t([kt({type:Boolean,reflect:!0})],Xt.prototype,"invalid",void 0);class Kt{constructor(t,e){(this.host=t).addController(this),this._internals=t._internals||this.host.attachInternals(),this.options=Object.assign({setInvalid:(t,e)=>{t.invalid=e},value:t=>t.value,input:t=>t.input},e)}hostConnected(){this.host.addEventListener("invalid",t=>this.handleInvalid(t))}hostDisconnected(){this.host.removeEventListener("invalid",t=>this.handleInvalid(t))}handleInvalid(t){t.preventDefault(),this.options.setInvalid(this.host,!0)}handleInput(t){const e=t.target;this.options.setInvalid(this.host,!1),this.validateInput(e)}handleChange(t){const e=t.target;this.validateInput(e),this.options.setInvalid(this.host,!this.checkValidity())}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}updateInvalidState(){this.options.setInvalid(this.host,!this.checkValidity())}resetValidity(){return this._internals.setValidity({})}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}setValidity(t,e,i){return this._internals.setValidity(t,e,i)}setFormValue(){const t=this.options.value(this.host);this._internals.setFormValue(t)}validateInput(t){if(this.options.input(this.host).disabled)return this._internals.setValidity({});const e=t.validity;if(e.valid)this._internals.setValidity({});else for(const i in e)e[i]&&(this.validationError=i.toString(),this._internals.setValidity({[this.validationError]:!0},t.validationMessage,t))}}const Qt=e=>{class i extends e{constructor(...t){super(...t),this._isTouched=!1,this._internals=this.attachInternals()}connectedCallback(){var t;super.connectedCallback(),null!==(t=this.inputValidationController)&&void 0!==t||(this.inputValidationController=new Kt(this))}async firstUpdated(t){super.firstUpdated(t),this.input=this.shadowRoot.querySelector("input")||await this.sgdsInput||this.shadowRoot.querySelector("textarea")||await this.sgdsDatepickerInput,this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this._mixinValidate(this.input)}formResetCallback(){this._mixinResetFormControl?this._mixinResetFormControl():(this.value=this.defaultValue,this._mixinResetValidity(this.input)),this._mixinSetFormValue()}_mixinHandleChange(t){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleChange(t)}_mixinHandleInputChange(t){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleInput(t)}_mixinResetValidity(t){this.inputValidationController.resetValidity(),this.inputValidationController.updateInvalidState(),this._isTouched&&(this._isTouched=!1),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.validateInput(t)}_mixinValidate(t){this._mixinShouldSkipSgdsValidation()||this.inputValidationController.validateInput(t)}_mixinSetFormValue(){const t=this.value;this._internals.setFormValue(t)}_mixinCheckValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.checkValidity()}_mixinReportValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.reportValidity()}_mixinGetValidity(){return this._internals.validity}_mixinGetValidationMessage(){return this._internals.validationMessage}_mixinSetValidity(t,e,i){if(!this._mixinShouldSkipSgdsValidation())return this.inputValidationController.setValidity(t,e,i)}_mixinShouldSkipSgdsValidation(){const t=this.closest("form");return(null==t?void 0:t.noValidate)||this.noValidate}}return i.formAssociated=!0,t([Tt("sgds-input")],i.prototype,"sgdsInput",void 0),t([Tt("sgds-datepicker-input")],i.prototype,"sgdsDatepickerInput",void 0),i};function te(t,e){const i=Object.assign({waitUntilFirstUpdate:!1},e);return(e,s)=>{const{update:n}=e;if(t in e){const o=t;e.update=function(t){if(t.has(o)){const e=t.get(o),n=this[o];e!==n&&(i.waitUntilFirstUpdate&&!this.hasUpdated||this[s](e,n))}n.call(this,t)}}}}var ee,ie,se,ne,oe,re=r`textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;resize:vertical}textarea.form-control-group{min-height:var(--sgds-dimension-136);overflow:auto;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x)}.textarea-resize-none{resize:none}.textarea-resize-vertical{resize:vertical}.textarea-resize-auto{height:auto;overflow-y:hidden;resize:none}.textarea-info-container{display:flex;justify-content:space-between}.word-count{margin-left:auto}`,ae=r`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.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(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-xl);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 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:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}@media (prefers-reduced-motion:reduce){.form-control-group{transition:none}}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;class le extends(Qt(Xt)){constructor(){super(...arguments),this.value="",this.spellcheck=!1,this.rows=4,this.placeholder="Placeholder",this.invalidFeedback="",this.autofocus=!1,this.readonly=!1,this.resize="vertical",this.defaultValue="",this.hasFeedback=!1,this.required=!1,this.noValidate=!1,this.hintText="",this._isTouched=!1}focus(t){this.textarea.focus(t)}blur(){this.textarea.blur()}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}select(){this.textarea.select()}_handleInvalid(t){t.preventDefault(),this.invalid=!0}_handleChange(t){this.value=this.input.value,this.emit("sgds-change"),super._mixinHandleChange(t)}_handleInputChange(t){this.value=this.input.value,this.emit("sgds-input"),super._mixinHandleInputChange(t)}_handleFocus(){this.emit("sgds-focus")}_handleBlur(){const t=this.emit("sgds-blur",{cancelable:!0});this._mixinShouldSkipSgdsValidation()||t.defaultPrevented||(this.setInvalid(!this._mixinCheckValidity()),this._isTouched=!0)}_handleRowsChange(){this._setTextareaHeight()}_setTextareaHeight(){"auto"===this.resize?(this.textarea.style.height="auto",this.textarea.style.height=`${this.textarea.scrollHeight}px`):this.textarea.style.height=void 0}_handleIsTouched(){this._mixinShouldSkipSgdsValidation()||this._isTouched&&this.setInvalid(!this._mixinCheckValidity())}_handleDisabledChange(){this.setInvalid(!1)}_handleValueChange(){this.updateComplete.then(()=>this._setTextareaHeight())}_renderHintText(){const t=Lt` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;return this.hintText&&t}_wordCount(){return Lt`
       <div
         class="form-text word-count ${Mt({"invalid-feedback":this.invalid&&this.hasFeedback})}"
       >

package/components/index.d.ts

@@ -12,6 +12,10 @@ export * from "./Checkbox/sgds-checkbox-group";
 export * from "./CloseButton/sgds-close-button";
 export * from "./ComboBox/sgds-combo-box";
 export * from "./ComboBox/sgds-combo-box-option";
+export * from "./DataTable/sgds-data-table";
+export * from "./DataTable/sgds-data-table-cell";
+export * from "./DataTable/sgds-data-table-head";
+export * from "./DataTable/sgds-data-table-row";
 export * from "./Datepicker/sgds-datepicker";
 export * from "./DescriptionList/sgds-description-list";
 export * from "./DescriptionList/sgds-description-list-group";

package/components/index.js

@@ -12,6 +12,10 @@ export { SgdsCheckboxGroup } from './Checkbox/sgds-checkbox-group.js';
 export { SgdsCloseButton } from './CloseButton/sgds-close-button.js';
 export { SgdsComboBox } from './ComboBox/sgds-combo-box.js';
 export { SgdsComboBoxOption } from './ComboBox/sgds-combo-box-option.js';
+export { SgdsDataTable } from './DataTable/sgds-data-table.js';
+export { SgdsDataTableCell } from './DataTable/sgds-data-table-cell.js';
+export { SgdsDataTableHead } from './DataTable/sgds-data-table-head.js';
+export { SgdsDataTableRow } from './DataTable/sgds-data-table-row.js';
 export { SgdsDatepicker } from './Datepicker/sgds-datepicker.js';
 export { SgdsDescriptionList } from './DescriptionList/sgds-description-list.js';
 export { SgdsDescriptionListGroup } from './DescriptionList/sgds-description-list-group.js';

package/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}