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

package/react/components/Sidebar/sidebar-element.js

@@ -6,8 +6,6 @@ import SgdsElement from '../../base/sgds-element.js';
 import { consume } from '@lit/context';
 import { SidebarCollapsed, SidebarActiveItem, SidebarActiveGroup, SidebarDrawerItems, SidebarDrawerOpen, SidebarDrawerOverlay } from './sidebar-context.js';
 
-const ARROW_DOWN = "ArrowDown";
-const ARROW_UP = "ArrowUp";
 const ARROW_LEFT = "ArrowLeft";
 const ARROW_RIGHT = "ArrowRight";
 const ENTER = "Enter";
@@ -27,9 +25,9 @@ const SPACE = " ";
  * - Automatic child element tracking and nesting level detection
  *
  * Keyboard Navigation:
- * - Arrow Up/Down: Navigate between siblings in the same level
+ * - Tab/Shift+Tab: Navigate between visible items in DOM order
  * - Arrow Left/Right: Navigate hierarchically (collapse/expand or move in drawer)
- * - Enter: Activate focused item or toggle group
+ * - Enter/Space: Activate focused item or toggle group
  *
  * Context Management:
  * - Consumes: SidebarCollapsed, SidebarActiveItem, SidebarActiveGroup, SidebarDrawerItems
@@ -105,9 +103,16 @@ class SidebarElement extends SgdsElement {
         this._getChildLevel();
     }
     updated() {
+        var _a;
         if (this._childLevel === 2) {
             this._hidden = !this.closest(".sidebar-nested-overlay");
         }
+        else if (this._childLevel >= 3) {
+            const inOverlay = !!this.closest(".sidebar-nested-overlay");
+            const parentGroup = this.parentElement;
+            const parentExpanded = (_a = parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.showMenu) !== null && _a !== void 0 ? _a : false;
+            this._hidden = !inOverlay || !parentExpanded;
+        }
     }
     /**
      * Updates child elements from slot content when DOM changes.
@@ -136,7 +141,7 @@ class SidebarElement extends SgdsElement {
      * @returns {void}
      */
     _handleKeyDown(event) {
-        var _a, _b, _c, _d;
+        var _a, _b;
         const target = event.target;
         switch (event.key) {
             case SPACE:
@@ -147,33 +152,6 @@ class SidebarElement extends SgdsElement {
                     this._handleClick();
                 return;
             }
-            case ARROW_DOWN: {
-                event.preventDefault();
-                event.stopPropagation();
-                const child = target._childElements[0];
-                const isChildHidden = child === null || child === void 0 ? void 0 : child._hidden;
-                const childElement = !isChildHidden ? child : null;
-                const nextElement = childElement || target.nextElementSibling || ((_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.nextElementSibling);
-                if (nextElement === null || nextElement === void 0 ? void 0 : nextElement.shadowRoot) {
-                    const focusTarget = nextElement.shadowRoot.querySelector("[tabindex]");
-                    focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus();
-                }
-                return;
-            }
-            case ARROW_UP: {
-                event.preventDefault();
-                event.stopPropagation();
-                const prevSiblingChildren = (_b = target.previousElementSibling) === null || _b === void 0 ? void 0 : _b._childElements;
-                const lastChild = prevSiblingChildren ? prevSiblingChildren[(prevSiblingChildren === null || prevSiblingChildren === void 0 ? void 0 : prevSiblingChildren.length) - 1] : null;
-                const isChildHidden = lastChild === null || lastChild === void 0 ? void 0 : lastChild._hidden;
-                const childElement = !isChildHidden ? lastChild : null;
-                const prevElement = childElement || target.previousElementSibling || target.parentElement;
-                if (prevElement === null || prevElement === void 0 ? void 0 : prevElement.shadowRoot) {
-                    const focusTarget = prevElement.shadowRoot.querySelector("[tabindex]");
-                    focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus();
-                }
-                return;
-            }
             case ARROW_LEFT: {
                 event.preventDefault();
                 event.stopPropagation();
@@ -185,7 +163,7 @@ class SidebarElement extends SgdsElement {
                 else {
                     // check if we are on the drawer, if so move back to parent
                     const childLevel = target._childLevel;
-                    if (childLevel >= 2 && ((_c = this._sidebarActiveGroup) === null || _c === void 0 ? void 0 : _c.shadowRoot)) {
+                    if (childLevel >= 2 && ((_a = this._sidebarActiveGroup) === null || _a === void 0 ? void 0 : _a.shadowRoot)) {
                         const focusTarget = this._sidebarActiveGroup.shadowRoot.querySelector("[tabindex]");
                         focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus();
                     }
@@ -196,7 +174,7 @@ class SidebarElement extends SgdsElement {
                 event.preventDefault();
                 event.stopPropagation();
                 if (this._sidebarActiveGroup === this) {
-                    if ((_d = this._drawerItems) === null || _d === void 0 ? void 0 : _d.length) {
+                    if ((_b = this._drawerItems) === null || _b === void 0 ? void 0 : _b.length) {
                         if (this._showDrawer) {
                             const drawerItem = this._drawerItems[0];
                             if (drawerItem === null || drawerItem === void 0 ? void 0 : drawerItem.shadowRoot) {

package/react/components/Sidebar/sidebar-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-element.js","sources":["../../../../src/components/Sidebar/sidebar-element.ts"],"sourcesContent":["import { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { DropdownElement } from \"../../base/dropdown-element\";\nimport { PropertyValueMap } from \"lit\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { consume } from \"@lit/context\";\nimport {\n  SidebarActiveGroup,\n  SidebarActiveItem,\n  SidebarCollapsed,\n  SidebarDrawerItems,\n  SidebarDrawerOpen,\n  SidebarDrawerOverlay\n} from \"./sidebar-context\";\n\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ARROW_LEFT = \"ArrowLeft\";\nconst ARROW_RIGHT = \"ArrowRight\";\nconst ENTER = \"Enter\";\nconst SPACE = \" \";\n\n/**\n * @summary Base class for sidebar navigation components.\n * Provides core functionality for sidebar items and groups including keyboard navigation,\n * selection state management, and nesting support. This class manages hierarchical navigation,\n * active state tracking, and drawer overlay coordination through context providers.\n *\n * Features:\n * - Multi-level keyboard navigation (Arrow keys, Enter)\n * - Active state management via Lit context subscription\n * - Support for nested hierarchies up to 3 levels deep\n * - Focus management and full ARIA attribute support\n * - Event emission for sidebar coordination (i-sgds-click)\n * - Automatic child element tracking and nesting level detection\n *\n * Keyboard Navigation:\n * - Arrow Up/Down: Navigate between siblings in the same level\n * - Arrow Left/Right: Navigate hierarchically (collapse/expand or move in drawer)\n * - Enter: Activate focused item or toggle group\n *\n * Context Management:\n * - Consumes: SidebarCollapsed, SidebarActiveItem, SidebarActiveGroup, SidebarDrawerItems\n * - Updates state based on context changes for responsive UI updates\n *\n * @internal\n */\nexport class SidebarElement extends SgdsElement {\n  static styles = DropdownElement.styles;\n\n  /**\n   * The display title/label for the sidebar element.\n   * Shown in the UI and used for accessibility labels (aria-label).\n   * @attribute title\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) title = \"\";\n\n  /**\n   * The unique name identifier for the sidebar element.\n   * Used to identify selections in sgds-select events and manage active states.\n   * Should be unique among siblings in the same navigation level.\n   * @attribute name\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) name = \"\";\n\n  /** @internal */\n  @consume({ context: SidebarCollapsed, subscribe: true })\n  @state()\n  _sidebarCollapsed = false;\n\n  /** @internal */\n  @consume({ context: SidebarActiveItem, subscribe: true })\n  @state()\n  _sidebarActiveItem: SidebarElement | null = null;\n\n  /** @internal */\n  @consume({ context: SidebarActiveGroup, subscribe: true })\n  @state()\n  _sidebarActiveGroup: SidebarElement | null = null;\n\n  /** @internal */\n  @consume({ context: SidebarDrawerItems, subscribe: true })\n  @state()\n  _drawerItems: SidebarElement[] | null = null;\n\n  /** @internal Tracks whether a drawer overlay is currently open */\n  @consume({ context: SidebarDrawerOpen, subscribe: true })\n  @state()\n  _showDrawer = false;\n\n  /** @internal Tracks whether sidebar is overlay or not */\n  @consume({ context: SidebarDrawerOverlay, subscribe: true })\n  @state()\n  _isOverlay = false;\n\n  /** @internal */\n  @state() _childLevel = 1;\n\n  /**\n   * Indicates whether this element is currently selected/active in the sidebar.\n   * @internal\n   */\n  @state() _selected = false;\n\n  /**\n   * Indicates whether this element should be hidden based on parent drawer visibility.\n   * Used to hide level 2 items until their parent's drawer is opened.\n   * @internal\n   */\n  @state() _hidden = false;\n\n  /**\n   * List of direct child sidebar elements (items or groups).\n   * Updated when slot content changes.\n   * @internal\n   */\n  @state()\n  _childElements: SidebarElement[] = [];\n\n  /** @internal */\n  @state() _childActive = false;\n\n  /** @internal */\n  @queryAssignedElements({ flatten: true })\n  private _defaultNodes!: SidebarElement[];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._getChildLevel();\n    this.addEventListener(\"keydown\", this._handleKeyDown);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"keydown\", this._handleKeyDown);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._getChildLevel();\n  }\n\n  updated() {\n    if (this._childLevel === 2) {\n      this._hidden = !this.closest(\".sidebar-nested-overlay\");\n    }\n  }\n\n  /**\n   * Updates child elements from slot content when DOM changes.\n   * Called automatically when slot content changes.\n   * @internal\n   * @returns {void}\n   */\n  protected _handleSlotChange() {\n    this._childElements = this._defaultNodes;\n  }\n\n  /**\n   * Handles click/activation of this element, emitting internal event for parent sidebar.\n   * Parent sidebar processes this event to manage selection and drawer state.\n   * @internal\n   * @returns {void}\n   */\n  protected _handleClick() {\n    this.emit(\"i-sgds-click\", { detail: { element: this, level: this._childLevel } });\n  }\n\n  /**\n   * Manages keyboard navigation for the sidebar hierarchy.\n   * Handles arrow keys for navigation, Enter to activate, and manages drawer/submenu expansion.\n   * Prevents default browser behavior and stops event propagation.\n   * @internal\n   * @param {KeyboardEvent} event - The keyboard event\n   * @returns {void}\n   */\n  private _handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n\n    switch (event.key) {\n      case SPACE:\n      case ENTER: {\n        event.preventDefault();\n        event.stopPropagation();\n        if (event.target === this) this._handleClick();\n        return;\n      }\n      case ARROW_DOWN: {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const child = (target as SidebarElement)._childElements[0];\n\n        const isChildHidden = child?._hidden;\n        const childElement = !isChildHidden ? child : null;\n        const nextElement = childElement || target.nextElementSibling || target.parentElement?.nextElementSibling;\n\n        if (nextElement?.shadowRoot) {\n          const focusTarget = nextElement.shadowRoot.querySelector(\"[tabindex]\") as HTMLElement | null;\n          focusTarget?.focus();\n        }\n\n        return;\n      }\n      case ARROW_UP: {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const prevSiblingChildren = (target.previousElementSibling as SidebarElement)?._childElements;\n        const lastChild = prevSiblingChildren ? prevSiblingChildren[prevSiblingChildren?.length - 1] : null;\n        const isChildHidden = lastChild?._hidden;\n\n        const childElement = !isChildHidden ? lastChild : null;\n        const prevElement = childElement || target.previousElementSibling || target.parentElement;\n\n        if (prevElement?.shadowRoot) {\n          const focusTarget = prevElement.shadowRoot.querySelector(\"[tabindex]\") as HTMLElement | null;\n          focusTarget?.focus();\n        }\n        return;\n      }\n      case ARROW_LEFT: {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (this._sidebarActiveGroup === this) {\n          // when drawer is open, close it\n          if (this._showDrawer) this._handleClick();\n        } else {\n          // check if we are on the drawer, if so move back to parent\n          const childLevel = (target as SidebarElement)._childLevel;\n          if (childLevel >= 2 && this._sidebarActiveGroup?.shadowRoot) {\n            const focusTarget = this._sidebarActiveGroup.shadowRoot.querySelector(\"[tabindex]\") as HTMLElement | null;\n            focusTarget?.focus();\n          }\n        }\n\n        return;\n      }\n      case ARROW_RIGHT: {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (this._sidebarActiveGroup === this) {\n          if (this._drawerItems?.length) {\n            if (this._showDrawer) {\n              const drawerItem = this._drawerItems[0];\n              if (drawerItem?.shadowRoot) {\n                const focusTarget = drawerItem.shadowRoot.querySelector(\"[tabindex]\") as HTMLElement | null;\n                focusTarget?.focus();\n              }\n            } else {\n              this._handleClick();\n            }\n          }\n        } else {\n          if (this._childLevel === 1 && this._childElements.length > 0) {\n            // when there is nested, we trigger click to show drawer\n            this._handleClick();\n          }\n        }\n\n        return;\n      }\n    }\n  }\n\n  /**\n   * Calculates the nesting depth by counting sgds-sidebar-group ancestors.\n   * Level 1 = root items, Level 2+ = nested within groups.\n   * Accounts for items positioned in drawer overlays.\n   * @internal\n   * @returns {void}\n   */\n  private _getChildLevel() {\n    let currentEle = this.parentElement;\n    let level = 1;\n\n    while (currentEle?.tagName.toLowerCase() === \"sgds-sidebar-group\") {\n      level += 1;\n      currentEle = currentEle.parentElement;\n    }\n\n    const isInDrawer = currentEle?.classList.contains(\"sidebar-nested-overlay\");\n    this._childLevel = isInDrawer ? level + 1 : level;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sidebar-element.js","sources":["../../../../src/components/Sidebar/sidebar-element.ts"],"sourcesContent":["import { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { DropdownElement } from \"../../base/dropdown-element\";\nimport { PropertyValueMap } from \"lit\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { consume } from \"@lit/context\";\nimport {\n  SidebarActiveGroup,\n  SidebarActiveItem,\n  SidebarCollapsed,\n  SidebarDrawerItems,\n  SidebarDrawerOpen,\n  SidebarDrawerOverlay\n} from \"./sidebar-context\";\n\nconst ARROW_LEFT = \"ArrowLeft\";\nconst ARROW_RIGHT = \"ArrowRight\";\nconst ENTER = \"Enter\";\nconst SPACE = \" \";\n\n/**\n * @summary Base class for sidebar navigation components.\n * Provides core functionality for sidebar items and groups including keyboard navigation,\n * selection state management, and nesting support. This class manages hierarchical navigation,\n * active state tracking, and drawer overlay coordination through context providers.\n *\n * Features:\n * - Multi-level keyboard navigation (Arrow keys, Enter)\n * - Active state management via Lit context subscription\n * - Support for nested hierarchies up to 3 levels deep\n * - Focus management and full ARIA attribute support\n * - Event emission for sidebar coordination (i-sgds-click)\n * - Automatic child element tracking and nesting level detection\n *\n * Keyboard Navigation:\n * - Tab/Shift+Tab: Navigate between visible items in DOM order\n * - Arrow Left/Right: Navigate hierarchically (collapse/expand or move in drawer)\n * - Enter/Space: Activate focused item or toggle group\n *\n * Context Management:\n * - Consumes: SidebarCollapsed, SidebarActiveItem, SidebarActiveGroup, SidebarDrawerItems\n * - Updates state based on context changes for responsive UI updates\n *\n * @internal\n */\nexport class SidebarElement extends SgdsElement {\n  static styles = DropdownElement.styles;\n\n  /**\n   * The display title/label for the sidebar element.\n   * Shown in the UI and used for accessibility labels (aria-label).\n   * @attribute title\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) title = \"\";\n\n  /**\n   * The unique name identifier for the sidebar element.\n   * Used to identify selections in sgds-select events and manage active states.\n   * Should be unique among siblings in the same navigation level.\n   * @attribute name\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) name = \"\";\n\n  /** @internal */\n  @consume({ context: SidebarCollapsed, subscribe: true })\n  @state()\n  _sidebarCollapsed = false;\n\n  /** @internal */\n  @consume({ context: SidebarActiveItem, subscribe: true })\n  @state()\n  _sidebarActiveItem: SidebarElement | null = null;\n\n  /** @internal */\n  @consume({ context: SidebarActiveGroup, subscribe: true })\n  @state()\n  _sidebarActiveGroup: SidebarElement | null = null;\n\n  /** @internal */\n  @consume({ context: SidebarDrawerItems, subscribe: true })\n  @state()\n  _drawerItems: SidebarElement[] | null = null;\n\n  /** @internal Tracks whether a drawer overlay is currently open */\n  @consume({ context: SidebarDrawerOpen, subscribe: true })\n  @state()\n  _showDrawer = false;\n\n  /** @internal Tracks whether sidebar is overlay or not */\n  @consume({ context: SidebarDrawerOverlay, subscribe: true })\n  @state()\n  _isOverlay = false;\n\n  /** @internal */\n  @state() _childLevel = 1;\n\n  /**\n   * Indicates whether this element is currently selected/active in the sidebar.\n   * @internal\n   */\n  @state() _selected = false;\n\n  /**\n   * Indicates whether this element should be hidden based on parent drawer visibility.\n   * Used to hide level 2 items until their parent's drawer is opened.\n   * @internal\n   */\n  @state() _hidden = false;\n\n  /**\n   * List of direct child sidebar elements (items or groups).\n   * Updated when slot content changes.\n   * @internal\n   */\n  @state()\n  _childElements: SidebarElement[] = [];\n\n  /** @internal */\n  @state() _childActive = false;\n\n  /** @internal */\n  @queryAssignedElements({ flatten: true })\n  private _defaultNodes!: SidebarElement[];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._getChildLevel();\n    this.addEventListener(\"keydown\", this._handleKeyDown);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"keydown\", this._handleKeyDown);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._getChildLevel();\n  }\n\n  updated() {\n    if (this._childLevel === 2) {\n      this._hidden = !this.closest(\".sidebar-nested-overlay\");\n    } else if (this._childLevel >= 3) {\n      const inOverlay = !!this.closest(\".sidebar-nested-overlay\");\n      const parentGroup = this.parentElement as SidebarElement & { showMenu?: boolean };\n      const parentExpanded = parentGroup?.showMenu ?? false;\n      this._hidden = !inOverlay || !parentExpanded;\n    }\n  }\n\n  /**\n   * Updates child elements from slot content when DOM changes.\n   * Called automatically when slot content changes.\n   * @internal\n   * @returns {void}\n   */\n  protected _handleSlotChange() {\n    this._childElements = this._defaultNodes;\n  }\n\n  /**\n   * Handles click/activation of this element, emitting internal event for parent sidebar.\n   * Parent sidebar processes this event to manage selection and drawer state.\n   * @internal\n   * @returns {void}\n   */\n  protected _handleClick() {\n    this.emit(\"i-sgds-click\", { detail: { element: this, level: this._childLevel } });\n  }\n\n  /**\n   * Manages keyboard navigation for the sidebar hierarchy.\n   * Handles arrow keys for navigation, Enter to activate, and manages drawer/submenu expansion.\n   * Prevents default browser behavior and stops event propagation.\n   * @internal\n   * @param {KeyboardEvent} event - The keyboard event\n   * @returns {void}\n   */\n  private _handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n\n    switch (event.key) {\n      case SPACE:\n      case ENTER: {\n        event.preventDefault();\n        event.stopPropagation();\n        if (event.target === this) this._handleClick();\n        return;\n      }\n      case ARROW_LEFT: {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (this._sidebarActiveGroup === this) {\n          // when drawer is open, close it\n          if (this._showDrawer) this._handleClick();\n        } else {\n          // check if we are on the drawer, if so move back to parent\n          const childLevel = (target as SidebarElement)._childLevel;\n          if (childLevel >= 2 && this._sidebarActiveGroup?.shadowRoot) {\n            const focusTarget = this._sidebarActiveGroup.shadowRoot.querySelector(\"[tabindex]\") as HTMLElement | null;\n            focusTarget?.focus();\n          }\n        }\n\n        return;\n      }\n      case ARROW_RIGHT: {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (this._sidebarActiveGroup === this) {\n          if (this._drawerItems?.length) {\n            if (this._showDrawer) {\n              const drawerItem = this._drawerItems[0];\n              if (drawerItem?.shadowRoot) {\n                const focusTarget = drawerItem.shadowRoot.querySelector(\"[tabindex]\") as HTMLElement | null;\n                focusTarget?.focus();\n              }\n            } else {\n              this._handleClick();\n            }\n          }\n        } else {\n          if (this._childLevel === 1 && this._childElements.length > 0) {\n            // when there is nested, we trigger click to show drawer\n            this._handleClick();\n          }\n        }\n\n        return;\n      }\n    }\n  }\n\n  /**\n   * Calculates the nesting depth by counting sgds-sidebar-group ancestors.\n   * Level 1 = root items, Level 2+ = nested within groups.\n   * Accounts for items positioned in drawer overlays.\n   * @internal\n   * @returns {void}\n   */\n  private _getChildLevel() {\n    let currentEle = this.parentElement;\n    let level = 1;\n\n    while (currentEle?.tagName.toLowerCase() === \"sgds-sidebar-group\") {\n      level += 1;\n      currentEle = currentEle.parentElement;\n    }\n\n    const isInDrawer = currentEle?.classList.contains(\"sidebar-nested-overlay\");\n    this._childLevel = isInDrawer ? level + 1 : level;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -31,6 +31,8 @@ class SgdsTabGroup extends sgdsElement["default"] {
         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([
@@ -197,6 +199,7 @@ class SgdsTabGroup extends sgdsElement["default"] {
         this._updateTabsAttribute("variant");
         this._updateTabsAttribute("orientation");
         this._updateTabsAttribute("density");
+        this._updateTabsAttribute("fullWidth");
         this._syncTabsAndPanels();
     }
     willUpdate(_changedProperties) {
@@ -210,6 +213,9 @@ class SgdsTabGroup extends sgdsElement["default"] {
         if (_changedProperties.has("density")) {
             this._updateTabsAttribute("density");
         }
+        if (_changedProperties.has("fullWidth")) {
+            this._updateTabsAttribute("fullWidth");
+        }
     }
     render() {
         return lit.html `
@@ -244,6 +250,9 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.property({ type: String, reflect: true })
 ], SgdsTabGroup.prototype, "density", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true })
+], SgdsTabGroup.prototype, "fullWidth", void 0);
 tslib.__decorate([
     decorators_js.queryAssignedElements({ slot: "nav", flatten: true })
 ], SgdsTabGroup.prototype, "_navSlot", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-tab-group.cjs.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":["SgdsElement","html","tabGroupStyle","__decorate","query","property","queryAssignedElements"],"mappings":"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"}
+{"version":3,"file":"sgds-tab-group.cjs.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":["SgdsElement","html","tabGroupStyle","__decorate","query","property","queryAssignedElements"],"mappings":"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"}

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

@@ -27,6 +27,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([
@@ -193,6 +195,7 @@ class SgdsTabGroup extends SgdsElement {
         this._updateTabsAttribute("variant");
         this._updateTabsAttribute("orientation");
         this._updateTabsAttribute("density");
+        this._updateTabsAttribute("fullWidth");
         this._syncTabsAndPanels();
     }
     willUpdate(_changedProperties) {
@@ -206,6 +209,9 @@ class SgdsTabGroup extends SgdsElement {
         if (_changedProperties.has("density")) {
             this._updateTabsAttribute("density");
         }
+        if (_changedProperties.has("fullWidth")) {
+            this._updateTabsAttribute("fullWidth");
+        }
     }
     render() {
         return html `
@@ -240,6 +246,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/react/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/react/components/Tab/tab-group.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.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 = lit.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%}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=tab-group.cjs.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 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/react/components/Tab/tab-panel.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.tab-panel{display:block}.tab-panel:not(.tab-panel--active){display:none}`;
+var css_248z = lit.css`:host(:not([active])){display:none}.tab-panel{display:block}.tab-panel:not(.tab-panel--active){display:none}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=tab-panel.cjs.js.map

package/react/components/Tab/tab-panel.js

@@ -1,7 +1,7 @@
 'use client';
 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/react/components/Tab/tab.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.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 = lit.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)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=tab.cjs.js.map

package/react/components/Tab/tab.js

@@ -1,7 +1,7 @@
 'use client';
 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/react/css/grid.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.sgds-container,.sgds-container-sidebar{margin-left:auto;margin-right:auto;max-width:calc(100% - 40px);width:100%}.sgds-container-sidebar .sgds-grid{gap:var(--sgds-gap-md)}.sgds-grid{display:grid;gap:var(--sgds-gap-layout-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container,.sgds-container-sidebar{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 56px)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-container-sidebar .sgds-grid{gap:var(--sgds-gap-xl)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-container{max-width:var(--sgds-dimension-888)}.sgds-col-lg-1{grid-column:span 1}.sgds-col-lg-2{grid-column:span 2}.sgds-col-lg-3{grid-column:span 3}.sgds-col-lg-4{grid-column:span 4}.sgds-col-lg-5{grid-column:span 5}.sgds-col-lg-6{grid-column:span 6}.sgds-col-lg-7{grid-column:span 7}.sgds-col-lg-8{grid-column:span 8}.sgds-col-lg-9{grid-column:span 9}.sgds-col-lg-10{grid-column:span 10}.sgds-col-lg-11{grid-column:span 11}.sgds-col-lg-12{grid-column:span 12}.sgds-col-lg-center-2{grid-column:6/span 2}.sgds-col-lg-center-4{grid-column:5/span 4}.sgds-col-lg-center-6{grid-column:4/span 6}.sgds-col-lg-center-8{grid-column:3/span 8}.sgds-col-lg-center-10{grid-column:2/span 10}.sgds-col-md-none{display:revert}.sgds-col-lg-none{display:none}}@media (min-width:1280px){.sgds-container{max-width:var(--sgds-dimension-1168)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-xl-1{grid-column:span 1}.sgds-col-xl-2{grid-column:span 2}.sgds-col-xl-3{grid-column:span 3}.sgds-col-xl-4{grid-column:span 4}.sgds-col-xl-5{grid-column:span 5}.sgds-col-xl-6{grid-column:span 6}.sgds-col-xl-7{grid-column:span 7}.sgds-col-xl-8{grid-column:span 8}.sgds-col-xl-9{grid-column:span 9}.sgds-col-xl-10{grid-column:span 10}.sgds-col-xl-11{grid-column:span 11}.sgds-col-xl-12{grid-column:span 12}.sgds-col-xl-center-2{grid-column:6/span 2}.sgds-col-xl-center-4{grid-column:5/span 4}.sgds-col-xl-center-6{grid-column:4/span 6}.sgds-col-xl-center-8{grid-column:3/span 8}.sgds-col-xl-center-10{grid-column:2/span 10}.sgds-col-lg-none{display:revert}.sgds-col-xl-none{display:none}}@media (min-width:1440px){.sgds-container{max-width:var(--sgds-dimension-1312)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-2-xl-1{grid-column:span 1}.sgds-col-2-xl-2{grid-column:span 2}.sgds-col-2-xl-3{grid-column:span 3}.sgds-col-2-xl-4{grid-column:span 4}.sgds-col-2-xl-5{grid-column:span 5}.sgds-col-2-xl-6{grid-column:span 6}.sgds-col-2-xl-7{grid-column:span 7}.sgds-col-2-xl-8{grid-column:span 8}.sgds-col-2-xl-9{grid-column:span 9}.sgds-col-2-xl-10{grid-column:span 10}.sgds-col-2-xl-11{grid-column:span 11}.sgds-col-2-xl-12{grid-column:span 12}.sgds-col-2-xl-center-2{grid-column:6/span 2}.sgds-col-2-xl-center-4{grid-column:5/span 4}.sgds-col-2-xl-center-6{grid-column:4/span 6}.sgds-col-2-xl-center-8{grid-column:3/span 8}.sgds-col-2-xl-center-10{grid-column:2/span 10}.sgds-col-xl-none{display:revert}.sgds-col-2-xl-none{display:none}}@media (min-width:1680px){.sgds-container-sidebar{max-width:var(--sgds-dimension-1296)}.sgds-col-3-xl-1{grid-column:span 1}.sgds-col-3-xl-2{grid-column:span 2}.sgds-col-3-xl-3{grid-column:span 3}.sgds-col-3-xl-4{grid-column:span 4}.sgds-col-3-xl-5{grid-column:span 5}.sgds-col-3-xl-6{grid-column:span 6}.sgds-col-3-xl-7{grid-column:span 7}.sgds-col-3-xl-8{grid-column:span 8}.sgds-col-3-xl-9{grid-column:span 9}.sgds-col-3-xl-10{grid-column:span 10}.sgds-col-3-xl-11{grid-column:span 11}.sgds-col-3-xl-12{grid-column:span 12}.sgds-col-3-xl-center-2{grid-column:6/span 2}.sgds-col-3-xl-center-4{grid-column:5/span 4}.sgds-col-3-xl-center-6{grid-column:4/span 6}.sgds-col-3-xl-center-8{grid-column:3/span 8}.sgds-col-3-xl-center-10{grid-column:2/span 10}.sgds-col-2-xl-none{display:revert}.sgds-col-3-xl-none{display:none}}`;
+var css_248z = lit.css`.sgds-container,.sgds-container-sidebar{margin-left:auto;margin-right:auto;max-width:calc(100% - 40px);width:100%}.sgds-container-sidebar .sgds-grid{gap:var(--sgds-gap-md)}.sgds-grid{display:grid;gap:var(--sgds-layout-gap-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container,.sgds-container-sidebar{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 56px)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-container-sidebar .sgds-grid{gap:var(--sgds-gap-xl)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-container{max-width:var(--sgds-dimension-888)}.sgds-col-lg-1{grid-column:span 1}.sgds-col-lg-2{grid-column:span 2}.sgds-col-lg-3{grid-column:span 3}.sgds-col-lg-4{grid-column:span 4}.sgds-col-lg-5{grid-column:span 5}.sgds-col-lg-6{grid-column:span 6}.sgds-col-lg-7{grid-column:span 7}.sgds-col-lg-8{grid-column:span 8}.sgds-col-lg-9{grid-column:span 9}.sgds-col-lg-10{grid-column:span 10}.sgds-col-lg-11{grid-column:span 11}.sgds-col-lg-12{grid-column:span 12}.sgds-col-lg-center-2{grid-column:6/span 2}.sgds-col-lg-center-4{grid-column:5/span 4}.sgds-col-lg-center-6{grid-column:4/span 6}.sgds-col-lg-center-8{grid-column:3/span 8}.sgds-col-lg-center-10{grid-column:2/span 10}.sgds-col-md-none{display:revert}.sgds-col-lg-none{display:none}}@media (min-width:1280px){.sgds-container{max-width:var(--sgds-dimension-1168)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-xl-1{grid-column:span 1}.sgds-col-xl-2{grid-column:span 2}.sgds-col-xl-3{grid-column:span 3}.sgds-col-xl-4{grid-column:span 4}.sgds-col-xl-5{grid-column:span 5}.sgds-col-xl-6{grid-column:span 6}.sgds-col-xl-7{grid-column:span 7}.sgds-col-xl-8{grid-column:span 8}.sgds-col-xl-9{grid-column:span 9}.sgds-col-xl-10{grid-column:span 10}.sgds-col-xl-11{grid-column:span 11}.sgds-col-xl-12{grid-column:span 12}.sgds-col-xl-center-2{grid-column:6/span 2}.sgds-col-xl-center-4{grid-column:5/span 4}.sgds-col-xl-center-6{grid-column:4/span 6}.sgds-col-xl-center-8{grid-column:3/span 8}.sgds-col-xl-center-10{grid-column:2/span 10}.sgds-col-lg-none{display:revert}.sgds-col-xl-none{display:none}}@media (min-width:1440px){.sgds-container{max-width:var(--sgds-dimension-1312)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-2-xl-1{grid-column:span 1}.sgds-col-2-xl-2{grid-column:span 2}.sgds-col-2-xl-3{grid-column:span 3}.sgds-col-2-xl-4{grid-column:span 4}.sgds-col-2-xl-5{grid-column:span 5}.sgds-col-2-xl-6{grid-column:span 6}.sgds-col-2-xl-7{grid-column:span 7}.sgds-col-2-xl-8{grid-column:span 8}.sgds-col-2-xl-9{grid-column:span 9}.sgds-col-2-xl-10{grid-column:span 10}.sgds-col-2-xl-11{grid-column:span 11}.sgds-col-2-xl-12{grid-column:span 12}.sgds-col-2-xl-center-2{grid-column:6/span 2}.sgds-col-2-xl-center-4{grid-column:5/span 4}.sgds-col-2-xl-center-6{grid-column:4/span 6}.sgds-col-2-xl-center-8{grid-column:3/span 8}.sgds-col-2-xl-center-10{grid-column:2/span 10}.sgds-col-xl-none{display:revert}.sgds-col-2-xl-none{display:none}}@media (min-width:1680px){.sgds-container-sidebar{max-width:var(--sgds-dimension-1296)}.sgds-col-3-xl-1{grid-column:span 1}.sgds-col-3-xl-2{grid-column:span 2}.sgds-col-3-xl-3{grid-column:span 3}.sgds-col-3-xl-4{grid-column:span 4}.sgds-col-3-xl-5{grid-column:span 5}.sgds-col-3-xl-6{grid-column:span 6}.sgds-col-3-xl-7{grid-column:span 7}.sgds-col-3-xl-8{grid-column:span 8}.sgds-col-3-xl-9{grid-column:span 9}.sgds-col-3-xl-10{grid-column:span 10}.sgds-col-3-xl-11{grid-column:span 11}.sgds-col-3-xl-12{grid-column:span 12}.sgds-col-3-xl-center-2{grid-column:6/span 2}.sgds-col-3-xl-center-4{grid-column:5/span 4}.sgds-col-3-xl-center-6{grid-column:4/span 6}.sgds-col-3-xl-center-8{grid-column:3/span 8}.sgds-col-3-xl-center-10{grid-column:2/span 10}.sgds-col-2-xl-none{display:revert}.sgds-col-3-xl-none{display:none}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=grid.cjs.js.map

package/react/css/grid.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.sgds-container,.sgds-container-sidebar{margin-left:auto;margin-right:auto;max-width:calc(100% - 40px);width:100%}.sgds-container-sidebar .sgds-grid{gap:var(--sgds-gap-md)}.sgds-grid{display:grid;gap:var(--sgds-gap-layout-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container,.sgds-container-sidebar{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 56px)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-container-sidebar .sgds-grid{gap:var(--sgds-gap-xl)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-container{max-width:var(--sgds-dimension-888)}.sgds-col-lg-1{grid-column:span 1}.sgds-col-lg-2{grid-column:span 2}.sgds-col-lg-3{grid-column:span 3}.sgds-col-lg-4{grid-column:span 4}.sgds-col-lg-5{grid-column:span 5}.sgds-col-lg-6{grid-column:span 6}.sgds-col-lg-7{grid-column:span 7}.sgds-col-lg-8{grid-column:span 8}.sgds-col-lg-9{grid-column:span 9}.sgds-col-lg-10{grid-column:span 10}.sgds-col-lg-11{grid-column:span 11}.sgds-col-lg-12{grid-column:span 12}.sgds-col-lg-center-2{grid-column:6/span 2}.sgds-col-lg-center-4{grid-column:5/span 4}.sgds-col-lg-center-6{grid-column:4/span 6}.sgds-col-lg-center-8{grid-column:3/span 8}.sgds-col-lg-center-10{grid-column:2/span 10}.sgds-col-md-none{display:revert}.sgds-col-lg-none{display:none}}@media (min-width:1280px){.sgds-container{max-width:var(--sgds-dimension-1168)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-xl-1{grid-column:span 1}.sgds-col-xl-2{grid-column:span 2}.sgds-col-xl-3{grid-column:span 3}.sgds-col-xl-4{grid-column:span 4}.sgds-col-xl-5{grid-column:span 5}.sgds-col-xl-6{grid-column:span 6}.sgds-col-xl-7{grid-column:span 7}.sgds-col-xl-8{grid-column:span 8}.sgds-col-xl-9{grid-column:span 9}.sgds-col-xl-10{grid-column:span 10}.sgds-col-xl-11{grid-column:span 11}.sgds-col-xl-12{grid-column:span 12}.sgds-col-xl-center-2{grid-column:6/span 2}.sgds-col-xl-center-4{grid-column:5/span 4}.sgds-col-xl-center-6{grid-column:4/span 6}.sgds-col-xl-center-8{grid-column:3/span 8}.sgds-col-xl-center-10{grid-column:2/span 10}.sgds-col-lg-none{display:revert}.sgds-col-xl-none{display:none}}@media (min-width:1440px){.sgds-container{max-width:var(--sgds-dimension-1312)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-2-xl-1{grid-column:span 1}.sgds-col-2-xl-2{grid-column:span 2}.sgds-col-2-xl-3{grid-column:span 3}.sgds-col-2-xl-4{grid-column:span 4}.sgds-col-2-xl-5{grid-column:span 5}.sgds-col-2-xl-6{grid-column:span 6}.sgds-col-2-xl-7{grid-column:span 7}.sgds-col-2-xl-8{grid-column:span 8}.sgds-col-2-xl-9{grid-column:span 9}.sgds-col-2-xl-10{grid-column:span 10}.sgds-col-2-xl-11{grid-column:span 11}.sgds-col-2-xl-12{grid-column:span 12}.sgds-col-2-xl-center-2{grid-column:6/span 2}.sgds-col-2-xl-center-4{grid-column:5/span 4}.sgds-col-2-xl-center-6{grid-column:4/span 6}.sgds-col-2-xl-center-8{grid-column:3/span 8}.sgds-col-2-xl-center-10{grid-column:2/span 10}.sgds-col-xl-none{display:revert}.sgds-col-2-xl-none{display:none}}@media (min-width:1680px){.sgds-container-sidebar{max-width:var(--sgds-dimension-1296)}.sgds-col-3-xl-1{grid-column:span 1}.sgds-col-3-xl-2{grid-column:span 2}.sgds-col-3-xl-3{grid-column:span 3}.sgds-col-3-xl-4{grid-column:span 4}.sgds-col-3-xl-5{grid-column:span 5}.sgds-col-3-xl-6{grid-column:span 6}.sgds-col-3-xl-7{grid-column:span 7}.sgds-col-3-xl-8{grid-column:span 8}.sgds-col-3-xl-9{grid-column:span 9}.sgds-col-3-xl-10{grid-column:span 10}.sgds-col-3-xl-11{grid-column:span 11}.sgds-col-3-xl-12{grid-column:span 12}.sgds-col-3-xl-center-2{grid-column:6/span 2}.sgds-col-3-xl-center-4{grid-column:5/span 4}.sgds-col-3-xl-center-6{grid-column:4/span 6}.sgds-col-3-xl-center-8{grid-column:3/span 8}.sgds-col-3-xl-center-10{grid-column:2/span 10}.sgds-col-2-xl-none{display:revert}.sgds-col-3-xl-none{display:none}}`;
+var css_248z = css`.sgds-container,.sgds-container-sidebar{margin-left:auto;margin-right:auto;max-width:calc(100% - 40px);width:100%}.sgds-container-sidebar .sgds-grid{gap:var(--sgds-gap-md)}.sgds-grid{display:grid;gap:var(--sgds-layout-gap-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container,.sgds-container-sidebar{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 56px)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-container-sidebar .sgds-grid{gap:var(--sgds-gap-xl)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-container{max-width:var(--sgds-dimension-888)}.sgds-col-lg-1{grid-column:span 1}.sgds-col-lg-2{grid-column:span 2}.sgds-col-lg-3{grid-column:span 3}.sgds-col-lg-4{grid-column:span 4}.sgds-col-lg-5{grid-column:span 5}.sgds-col-lg-6{grid-column:span 6}.sgds-col-lg-7{grid-column:span 7}.sgds-col-lg-8{grid-column:span 8}.sgds-col-lg-9{grid-column:span 9}.sgds-col-lg-10{grid-column:span 10}.sgds-col-lg-11{grid-column:span 11}.sgds-col-lg-12{grid-column:span 12}.sgds-col-lg-center-2{grid-column:6/span 2}.sgds-col-lg-center-4{grid-column:5/span 4}.sgds-col-lg-center-6{grid-column:4/span 6}.sgds-col-lg-center-8{grid-column:3/span 8}.sgds-col-lg-center-10{grid-column:2/span 10}.sgds-col-md-none{display:revert}.sgds-col-lg-none{display:none}}@media (min-width:1280px){.sgds-container{max-width:var(--sgds-dimension-1168)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-xl-1{grid-column:span 1}.sgds-col-xl-2{grid-column:span 2}.sgds-col-xl-3{grid-column:span 3}.sgds-col-xl-4{grid-column:span 4}.sgds-col-xl-5{grid-column:span 5}.sgds-col-xl-6{grid-column:span 6}.sgds-col-xl-7{grid-column:span 7}.sgds-col-xl-8{grid-column:span 8}.sgds-col-xl-9{grid-column:span 9}.sgds-col-xl-10{grid-column:span 10}.sgds-col-xl-11{grid-column:span 11}.sgds-col-xl-12{grid-column:span 12}.sgds-col-xl-center-2{grid-column:6/span 2}.sgds-col-xl-center-4{grid-column:5/span 4}.sgds-col-xl-center-6{grid-column:4/span 6}.sgds-col-xl-center-8{grid-column:3/span 8}.sgds-col-xl-center-10{grid-column:2/span 10}.sgds-col-lg-none{display:revert}.sgds-col-xl-none{display:none}}@media (min-width:1440px){.sgds-container{max-width:var(--sgds-dimension-1312)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-2-xl-1{grid-column:span 1}.sgds-col-2-xl-2{grid-column:span 2}.sgds-col-2-xl-3{grid-column:span 3}.sgds-col-2-xl-4{grid-column:span 4}.sgds-col-2-xl-5{grid-column:span 5}.sgds-col-2-xl-6{grid-column:span 6}.sgds-col-2-xl-7{grid-column:span 7}.sgds-col-2-xl-8{grid-column:span 8}.sgds-col-2-xl-9{grid-column:span 9}.sgds-col-2-xl-10{grid-column:span 10}.sgds-col-2-xl-11{grid-column:span 11}.sgds-col-2-xl-12{grid-column:span 12}.sgds-col-2-xl-center-2{grid-column:6/span 2}.sgds-col-2-xl-center-4{grid-column:5/span 4}.sgds-col-2-xl-center-6{grid-column:4/span 6}.sgds-col-2-xl-center-8{grid-column:3/span 8}.sgds-col-2-xl-center-10{grid-column:2/span 10}.sgds-col-xl-none{display:revert}.sgds-col-2-xl-none{display:none}}@media (min-width:1680px){.sgds-container-sidebar{max-width:var(--sgds-dimension-1296)}.sgds-col-3-xl-1{grid-column:span 1}.sgds-col-3-xl-2{grid-column:span 2}.sgds-col-3-xl-3{grid-column:span 3}.sgds-col-3-xl-4{grid-column:span 4}.sgds-col-3-xl-5{grid-column:span 5}.sgds-col-3-xl-6{grid-column:span 6}.sgds-col-3-xl-7{grid-column:span 7}.sgds-col-3-xl-8{grid-column:span 8}.sgds-col-3-xl-9{grid-column:span 9}.sgds-col-3-xl-10{grid-column:span 10}.sgds-col-3-xl-11{grid-column:span 11}.sgds-col-3-xl-12{grid-column:span 12}.sgds-col-3-xl-center-2{grid-column:6/span 2}.sgds-col-3-xl-center-4{grid-column:5/span 4}.sgds-col-3-xl-center-6{grid-column:4/span 6}.sgds-col-3-xl-center-8{grid-column:3/span 8}.sgds-col-3-xl-center-10{grid-column:2/span 10}.sgds-col-2-xl-none{display:revert}.sgds-col-3-xl-none{display:none}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=grid.js.map