@govtechsg/sgds-web-component 3.26.1-rc.0 → 3.26.1-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.26.1-rc.0",
+  "version": "3.26.1-rc.2",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/components/Dropdown/dropdown-item.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-40);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.dropdown-item.mainnav-dropdown-link{padding:var(--sgds-padding-none)}.dropdown-item.mainnav-dropdown-link ::slotted(*){box-sizing:border-box;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
+var css_248z = lit.css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.dropdown-item.readonly{cursor:default}.dropdown-item.readonly:focus,.dropdown-item.readonly:focus-visible,.dropdown-item.readonly:hover{background-color:var(--sgds-bg-transparent);outline:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.dropdown-item.mainnav-dropdown-link{padding:var(--sgds-padding-none)}.dropdown-item.mainnav-dropdown-link ::slotted(*){box-sizing:border-box;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=dropdown-item.cjs.js.map

package/react/components/Dropdown/dropdown-item.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-40);pointer-events:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.dropdown-item.mainnav-dropdown-link{padding:var(--sgds-padding-none)}.dropdown-item.mainnav-dropdown-link ::slotted(*){box-sizing:border-box;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
+var css_248z = css`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.dropdown-item.readonly{cursor:default}.dropdown-item.readonly:focus,.dropdown-item.readonly:focus-visible,.dropdown-item.readonly:hover{background-color:var(--sgds-bg-transparent);outline:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.dropdown-item.mainnav-dropdown-link{padding:var(--sgds-padding-none)}.dropdown-item.mainnav-dropdown-link ::slotted(*){box-sizing:border-box;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=dropdown-item.js.map

package/react/components/Dropdown/sgds-dropdown-item.cjs.js

@@ -24,6 +24,8 @@ class SgdsDropdownItem extends sgdsElement["default"] {
         this.active = false;
         /** Disables the SgdsMainnavItem */
         this.disabled = false;
+        /** When true, removes interactive styles (hover, cursor) for non-navigational display items */
+        this.readonly = false;
         /** Forwards aria-label to the inner clickable element for accessibility */
         this.ariaLabel = "";
     }
@@ -42,9 +44,10 @@ class SgdsDropdownItem extends sgdsElement["default"] {
       <div
         class="dropdown-item ${classMap_js.classMap({
             disabled: this.disabled,
-            active: this.active
+            active: this.active,
+            readonly: this.readonly
         })}"
-        tabindex=${this.disabled ? "-1" : "0"}
+        tabindex=${this.disabled || this.readonly ? "-1" : "0"}
         aria-label=${ifDefined_js.ifDefined(this.ariaLabel || undefined)}
       >
         <slot></slot>
@@ -65,6 +68,9 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsDropdownItem.prototype, "disabled", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true })
+], SgdsDropdownItem.prototype, "readonly", void 0);
 tslib.__decorate([
     decorators_js.property({ type: String })
 ], SgdsDropdownItem.prototype, "ariaLabel", void 0);

package/react/components/Dropdown/sgds-dropdown-item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-dropdown-item.cjs.js","sources":["../../../../src/components/Dropdown/sgds-dropdown-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport dropdownItemStyle from \"./dropdown-item.css\";\nimport dropdownStyle from \"./dropdown.css\";\n/**\n * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`\n * @slot default - The default slot for SgdsDropdownItem. Pass in a single anchor tag per dropdown item directly for navigation items.\n */\nexport class SgdsDropdownItem extends SgdsElement {\n  static styles = [dropdownStyle, dropdownItemStyle];\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** @internal */\n  @queryAssignedElements({ flatten: true }) private anchor: HTMLAnchorElement[];\n\n  /** when true, sets the active stylings of dropdown item */\n  @property({ type: Boolean })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Forwards aria-label to the inner clickable element for accessibility */\n  @property({ type: String })\n  ariaLabel = \"\";\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n      if (e.key === \"Enter\" && this.anchor.length > 0) {\n        this.anchor[0].click();\n      }\n    });\n    this.setAttribute(\"role\", \"menuitem\");\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"dropdown-item ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        aria-label=${ifDefined(this.ariaLabel || undefined)}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdownItem;\n"],"names":["SgdsElement","html","classMap","ifDefined","dropdownStyle","dropdownItemStyle","SgdsIcon","__decorate","queryAssignedElements","property"],"mappings":";;;;;;;;;;;;;;;AAQA;;;AAGG;AACG,MAAO,gBAAiB,SAAQA,sBAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAWE,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAIf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAIjB,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;KA2BhB;IAzBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC/C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACxB;AACH,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;KACxD;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEgB,6BAAA,EAAAC,oBAAQ,CAAC;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;mBACS,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;AACxB,mBAAA,EAAAC,sBAAS,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,CAAA;;;;KAItD,CAAC;KACH;;AA5CM,gBAAA,CAAA,MAAM,GAAG,CAACC,mBAAa,EAAEC,uBAAiB,CAAC,CAAC;AAC5C,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAEC,iBAAQ;AACtB,CAFkB,CAEjB;AAGgDC,gBAAA,CAAA;AAAjD,IAAAC,mCAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqC,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9ED,gBAAA,CAAA;AADC,IAAAE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIfF,gBAAA,CAAA;IADCE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjBF,gBAAA,CAAA;AADC,IAAAE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACZ,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-dropdown-item.cjs.js","sources":["../../../../src/components/Dropdown/sgds-dropdown-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport dropdownItemStyle from \"./dropdown-item.css\";\nimport dropdownStyle from \"./dropdown.css\";\n/**\n * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`\n * @slot default - The default slot for SgdsDropdownItem. Pass in a single anchor tag per dropdown item directly for navigation items.\n */\nexport class SgdsDropdownItem extends SgdsElement {\n  static styles = [dropdownStyle, dropdownItemStyle];\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** @internal */\n  @queryAssignedElements({ flatten: true }) private anchor: HTMLAnchorElement[];\n\n  /** when true, sets the active stylings of dropdown item */\n  @property({ type: Boolean })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** When true, removes interactive styles (hover, cursor) for non-navigational display items */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /** Forwards aria-label to the inner clickable element for accessibility */\n  @property({ type: String })\n  ariaLabel = \"\";\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n      if (e.key === \"Enter\" && this.anchor.length > 0) {\n        this.anchor[0].click();\n      }\n    });\n    this.setAttribute(\"role\", \"menuitem\");\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"dropdown-item ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          readonly: this.readonly\n        })}\"\n        tabindex=${this.disabled || this.readonly ? \"-1\" : \"0\"}\n        aria-label=${ifDefined(this.ariaLabel || undefined)}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdownItem;\n"],"names":["SgdsElement","html","classMap","ifDefined","dropdownStyle","dropdownItemStyle","SgdsIcon","__decorate","queryAssignedElements","property"],"mappings":";;;;;;;;;;;;;;;AAQA;;;AAGG;AACG,MAAO,gBAAiB,SAAQA,sBAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAWE,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAIf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAIjB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAIjB,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;KA4BhB;IA1BC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC/C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACxB;AACH,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;KACxD;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEgB,6BAAA,EAAAC,oBAAQ,CAAC;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;AACS,iBAAA,EAAA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;AACzC,mBAAA,EAAAC,sBAAS,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,CAAA;;;;KAItD,CAAC;KACH;;AAjDM,gBAAA,CAAA,MAAM,GAAG,CAACC,mBAAa,EAAEC,uBAAiB,CAAC,CAAC;AAC5C,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAEC,iBAAQ;AACtB,CAFkB,CAEjB;AAGgDC,gBAAA,CAAA;AAAjD,IAAAC,mCAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqC,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9ED,gBAAA,CAAA;AADC,IAAAE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIfF,gBAAA,CAAA;IADCE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjBF,gBAAA,CAAA;IADCE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjBF,gBAAA,CAAA;AADC,IAAAE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACZ,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Dropdown/sgds-dropdown-item.js

@@ -20,6 +20,8 @@ class SgdsDropdownItem extends SgdsElement {
         this.active = false;
         /** Disables the SgdsMainnavItem */
         this.disabled = false;
+        /** When true, removes interactive styles (hover, cursor) for non-navigational display items */
+        this.readonly = false;
         /** Forwards aria-label to the inner clickable element for accessibility */
         this.ariaLabel = "";
     }
@@ -38,9 +40,10 @@ class SgdsDropdownItem extends SgdsElement {
       <div
         class="dropdown-item ${classMap({
             disabled: this.disabled,
-            active: this.active
+            active: this.active,
+            readonly: this.readonly
         })}"
-        tabindex=${this.disabled ? "-1" : "0"}
+        tabindex=${this.disabled || this.readonly ? "-1" : "0"}
         aria-label=${ifDefined(this.ariaLabel || undefined)}
       >
         <slot></slot>
@@ -61,6 +64,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsDropdownItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsDropdownItem.prototype, "readonly", void 0);
 __decorate([
     property({ type: String })
 ], SgdsDropdownItem.prototype, "ariaLabel", void 0);

package/react/components/Dropdown/sgds-dropdown-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-dropdown-item.js","sources":["../../../../src/components/Dropdown/sgds-dropdown-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport dropdownItemStyle from \"./dropdown-item.css\";\nimport dropdownStyle from \"./dropdown.css\";\n/**\n * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`\n * @slot default - The default slot for SgdsDropdownItem. Pass in a single anchor tag per dropdown item directly for navigation items.\n */\nexport class SgdsDropdownItem extends SgdsElement {\n  static styles = [dropdownStyle, dropdownItemStyle];\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** @internal */\n  @queryAssignedElements({ flatten: true }) private anchor: HTMLAnchorElement[];\n\n  /** when true, sets the active stylings of dropdown item */\n  @property({ type: Boolean })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Forwards aria-label to the inner clickable element for accessibility */\n  @property({ type: String })\n  ariaLabel = \"\";\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n      if (e.key === \"Enter\" && this.anchor.length > 0) {\n        this.anchor[0].click();\n      }\n    });\n    this.setAttribute(\"role\", \"menuitem\");\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"dropdown-item ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        aria-label=${ifDefined(this.ariaLabel || undefined)}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdownItem;\n"],"names":["dropdownStyle","dropdownItemStyle"],"mappings":";;;;;;;;;;;AAQA;;;AAGG;AACG,MAAO,gBAAiB,SAAQ,WAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAWE,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAIf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAIjB,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;KA2BhB;IAzBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC/C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACxB;AACH,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;KACxD;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEgB,6BAAA,EAAA,QAAQ,CAAC;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;mBACS,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;AACxB,mBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,CAAA;;;;KAItD,CAAC;KACH;;AA5CM,gBAAA,CAAA,MAAM,GAAG,CAACA,QAAa,EAAEC,UAAiB,CAAC,CAAC;AAC5C,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAE,QAAQ;AACtB,CAFkB,CAEjB;AAGgD,UAAA,CAAA;AAAjD,IAAA,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqC,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9E,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIf,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjB,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACZ,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-dropdown-item.js","sources":["../../../../src/components/Dropdown/sgds-dropdown-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport dropdownItemStyle from \"./dropdown-item.css\";\nimport dropdownStyle from \"./dropdown.css\";\n/**\n * @summary `SgdsDropdownItem` are navigation links built with `HTMLAnchorElement`. It should be used in the default slot of `SgdsDropdown`\n * @slot default - The default slot for SgdsDropdownItem. Pass in a single anchor tag per dropdown item directly for navigation items.\n */\nexport class SgdsDropdownItem extends SgdsElement {\n  static styles = [dropdownStyle, dropdownItemStyle];\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** @internal */\n  @queryAssignedElements({ flatten: true }) private anchor: HTMLAnchorElement[];\n\n  /** when true, sets the active stylings of dropdown item */\n  @property({ type: Boolean })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** When true, removes interactive styles (hover, cursor) for non-navigational display items */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /** Forwards aria-label to the inner clickable element for accessibility */\n  @property({ type: String })\n  ariaLabel = \"\";\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n      if (e.key === \"Enter\" && this.anchor.length > 0) {\n        this.anchor[0].click();\n      }\n    });\n    this.setAttribute(\"role\", \"menuitem\");\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"dropdown-item ${classMap({\n          disabled: this.disabled,\n          active: this.active,\n          readonly: this.readonly\n        })}\"\n        tabindex=${this.disabled || this.readonly ? \"-1\" : \"0\"}\n        aria-label=${ifDefined(this.ariaLabel || undefined)}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdownItem;\n"],"names":["dropdownStyle","dropdownItemStyle"],"mappings":";;;;;;;;;;;AAQA;;;AAGG;AACG,MAAO,gBAAiB,SAAQ,WAAW,CAAA;AAAjD,IAAA,WAAA,GAAA;;;QAWE,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAIf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAIjB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAIjB,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;KA4BhB;IA1BC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,KAAI;AACpD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC/C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;aACxB;AACH,SAAC,CAAC,CAAC;AACH,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;KACxD;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEgB,6BAAA,EAAA,QAAQ,CAAC;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;AACS,iBAAA,EAAA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;AACzC,mBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,CAAA;;;;KAItD,CAAC;KACH;;AAjDM,gBAAA,CAAA,MAAM,GAAG,CAACA,QAAa,EAAEC,UAAiB,CAAC,CAAC;AAC5C,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAE,QAAQ;AACtB,CAFkB,CAEjB;AAGgD,UAAA,CAAA;AAAjD,IAAA,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqC,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI9E,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIf,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjB,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACZ,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/components/Mainnav/mainnav-dropdown.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
+var css_248z = lit.css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}:host([tone=brand][expand=always]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=always]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=sm]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=md]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=lg]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xxl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=mainnav-dropdown.cjs.js.map

package/react/components/Mainnav/mainnav-dropdown.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
+var css_248z = css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}.nav-link{align-items:center;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.nav-link.show,.nav-link:not(.disabled).active{border-color:var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}.dropdown-items{background-color:var(--sgds-surface-default);height:100%;left:100%;overflow-y:auto;padding:var(--sgds-padding-md) 0;position:absolute;top:0;width:100%}.dropdown-items a{align-items:center;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.dropdown-items a:hover{color:var(--sgds-primary-color-default)}.dropdown-items a:focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus);outline-offset:-5px}:host([tone=brand][expand=always]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=always]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=sm]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=md]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=lg]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) slot[name=toggler]::slotted(*),:host([tone^=gradient][expand=xxl]) slot[name=toggler]::slotted(*){color:var(--sgds-color-fixed-light)}}slot[name=toggler]::slotted(*){flex:1}sgds-dropdown{display:block;height:100%}@media screen and (min-width:1024px){.dropdown-items a,.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=mainnav-dropdown.js.map

package/react/components/Mainnav/mainnav-item.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-color-default)!important;cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);height:auto!important;line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important}@media screen and (min-width:1024px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:active){color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:active){color:var(--sgds-primary-color-default)!important}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
+var css_248z = lit.css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-color-default)!important;cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);height:auto!important;line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important}:host([tone=brand][expand=always]) ::slotted(*),:host([tone^=gradient][expand=always]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) ::slotted(*),:host([tone^=gradient][expand=sm]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) ::slotted(*),:host([tone^=gradient][expand=md]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) ::slotted(*),:host([tone^=gradient][expand=lg]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) ::slotted(*),:host([tone^=gradient][expand=xl]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) ::slotted(*),:host([tone^=gradient][expand=xxl]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}@media screen and (min-width:512px){:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:768px){:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:active){color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:active){color:var(--sgds-primary-color-default)!important}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=mainnav-item.cjs.js.map

package/react/components/Mainnav/mainnav-item.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-color-default)!important;cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);height:auto!important;line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important}@media screen and (min-width:1024px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:active){color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:active){color:var(--sgds-primary-color-default)!important}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
+var css_248z = css`:host([expand=always]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media screen and (min-width:512px){:host([expand=sm]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=sm]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:768px){:host([expand=md]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=md]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1024px){:host([expand=lg]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=lg]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1280px){:host([expand=xl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (min-width:1440px){:host([expand=xxl]) ::slotted(*){border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}:host(:not([disabled])[active][expand=xxl]) ::slotted(*){border-color:var(--sgds-primary-border-color-default)}}@media screen and (max-width:511px){:host(:not([disabled])[active][expand=sm]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:767px){:host(:not([disabled])[active][expand=md]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1023px){:host(:not([disabled])[active][expand=lg]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1279px){:host(:not([disabled])[active][expand=xl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}@media screen and (max-width:1439px){:host(:not([disabled])[active][expand=xxl]) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);--sgds-link-color-emphasis:var(--sgds-color-default);align-items:center;box-sizing:border-box;color:var(--sgds-color-default)!important;cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);height:auto!important;line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none!important}:host([tone=brand][expand=always]) ::slotted(*),:host([tone^=gradient][expand=always]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) ::slotted(*),:host([tone^=gradient][expand=sm]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) ::slotted(*),:host([tone^=gradient][expand=md]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) ::slotted(*),:host([tone^=gradient][expand=lg]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) ::slotted(*),:host([tone^=gradient][expand=xl]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) ::slotted(*),:host([tone^=gradient][expand=xxl]) ::slotted(*){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(*){border-color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}:host(:not([disabled])[active]) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important}:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=always]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=always]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}@media screen and (min-width:512px){:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=sm]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=sm]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:768px){:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=md]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=md]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=lg]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=lg]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=xl]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xl]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone=brand][expand=xxl]:not([disabled])[active]) ::slotted(a:hover),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(*),:host([tone^=gradient][expand=xxl]:not([disabled])[active]) ::slotted(a:hover){--sgds-link-color-default:var(--sgds-color-fixed-light);--sgds-link-color-emphasis:var(--sgds-color-fixed-light);color:var(--sgds-color-fixed-light)!important}}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default)!important}:host(:not([disabled]):not([active])) ::slotted(a:active){color:var(--sgds-color-default)!important}:host(:not([disabled])[active]) ::slotted(a:active){color:var(--sgds-primary-color-default)!important}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-primary-color-default)!important;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-40)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=mainnav-item.js.map

package/react/components/Mainnav/mainnav-profile.cjs.js

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var lit = require('lit');
+
+var css_248z = lit.css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}button.nav-link{appearance:none;background:none;border:none;font-family:inherit}.nav-link{align-items:center;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.profile-text{display:flex;flex:1;flex-direction:column;gap:var(--sgds-gap-text-2-xs,2px);text-align:left}.profile-label{font-weight:var(--sgds-font-weight-semibold)}.profile-label,.profile-secondary-text{font-size:var(--sgds-font-size-body-xs);line-height:var(--sgds-line-height-3-xs,16px)}sgds-dropdown{display:block;height:100%}.profile-avatar-mobile{align-items:center;border-radius:var(--sgds-border-radius-full);cursor:pointer;display:flex;height:100%}.profile-avatar-mobile:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.profile-mobile-panel{animation:profile-panel-show .2s ease-in-out;background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);left:0;overflow:hidden;padding:var(--sgds-padding-md) 0;position:absolute;top:100%;width:100%;z-index:var(--sgds-z-index-floating)}.profile-mobile-panel[hidden]{display:none}@keyframes profile-panel-show{0%{max-height:0;opacity:0}to{max-height:100dvh;opacity:1}}.profile-mobile-items{display:flex;flex-direction:column;margin:auto;max-height:calc(100dvh - 72px);max-width:var(--sgds-mainnav-max-width,1440px);overflow-y:auto;width:100%}@media screen and (min-width:1024px){.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
+
+exports["default"] = css_248z;
+//# sourceMappingURL=mainnav-profile.cjs.js.map

package/react/components/Mainnav/mainnav-profile.cjs.js.map

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

package/react/components/Mainnav/mainnav-profile.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host([expand=always]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}@media (min-width:512px){:host([expand=sm]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:768px){:host([expand=md]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1024px){:host(:not([expand])) .nav-link,:host([expand=lg]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1280px){:host([expand=xl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}@media (min-width:1440px){:host([expand=xxl]) .nav-link{border-bottom:var(--sgds-border-width-4) solid transparent;min-height:100%;padding:0 var(--sgds-padding-md)}}button.nav-link{appearance:none;background:none;border:none;font-family:inherit}.nav-link{align-items:center;box-sizing:border-box;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-2-xs,20px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x);text-decoration:none}.nav-link:not(.disabled):hover{color:var(--sgds-primary-color-default)}.nav-link:not(.disabled):focus-visible{color:var(--sgds-primary-color-default);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.nav-link.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-40)}:host([tone=brand][expand=always]) .nav-link,:host([tone^=gradient][expand=always]) .nav-link{color:var(--sgds-color-fixed-light)}@media screen and (min-width:512px){:host([tone=brand][expand=sm]) .nav-link,:host([tone^=gradient][expand=sm]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:768px){:host([tone=brand][expand=md]) .nav-link,:host([tone^=gradient][expand=md]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1024px){:host([tone=brand][expand=lg]) .nav-link,:host([tone^=gradient][expand=lg]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1280px){:host([tone=brand][expand=xl]) .nav-link,:host([tone^=gradient][expand=xl]) .nav-link{color:var(--sgds-color-fixed-light)}}@media screen and (min-width:1440px){:host([tone=brand][expand=xxl]) .nav-link,:host([tone^=gradient][expand=xxl]) .nav-link{color:var(--sgds-color-fixed-light)}}.profile-text{display:flex;flex:1;flex-direction:column;gap:var(--sgds-gap-text-2-xs,2px);text-align:left}.profile-label{font-weight:var(--sgds-font-weight-semibold)}.profile-label,.profile-secondary-text{font-size:var(--sgds-font-size-body-xs);line-height:var(--sgds-line-height-3-xs,16px)}sgds-dropdown{display:block;height:100%}.profile-avatar-mobile{align-items:center;border-radius:var(--sgds-border-radius-full);cursor:pointer;display:flex;height:100%}.profile-avatar-mobile:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.profile-mobile-panel{animation:profile-panel-show .2s ease-in-out;background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);left:0;overflow:hidden;padding:var(--sgds-padding-md) 0;position:absolute;top:100%;width:100%;z-index:var(--sgds-z-index-floating)}.profile-mobile-panel[hidden]{display:none}@keyframes profile-panel-show{0%{max-height:0;opacity:0}to{max-height:100dvh;opacity:1}}.profile-mobile-items{display:flex;flex-direction:column;margin:auto;max-height:calc(100dvh - 72px);max-width:var(--sgds-mainnav-max-width,1440px);overflow-y:auto;width:100%}@media screen and (min-width:1024px){.nav-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;
+
+export { css_248z as default };
+//# sourceMappingURL=mainnav-profile.js.map

package/react/components/Mainnav/mainnav-profile.js.map

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

package/react/components/Mainnav/mainnav.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:80px;padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand{align-items:center;color:var(--sgds-color-default);display:flex;text-decoration:none;white-space:nowrap}.navbar-brand:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4);margin-left:auto}slot[name=non-collapsible].non-collapsible-empty{display:none}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
+var css_248z = lit.css`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}:host([tone=brand]) nav{background-color:var(--sgds-primary-surface-default)}:host([tone=gradient-1]) nav{background:var(--sgds-gradient-1)}:host([tone=gradient-2]) nav{background:var(--sgds-gradient-2)}:host([tone=gradient-3]) nav{background:var(--sgds-gradient-3)}:host([tone=gradient-4]) nav{background:var(--sgds-gradient-4)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:flex-start;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:var(--sgds-mainnav-height,72px);padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand{align-items:center;color:var(--sgds-color-default);display:flex;text-decoration:none;white-space:nowrap}:host([tone=brand]) .navbar-brand,:host([tone^=gradient]) .navbar-brand{color:var(--sgds-color-fixed-light)}.navbar-brand:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown):not(sgds-mainnav-profile)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}:host([tone=brand]) .navbar-toggler,:host([tone^=gradient]) .navbar-toggler{color:var(--sgds-color-fixed-light)}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-end{margin-left:auto}.navbar-end,slot[name=start]{align-items:center;display:flex;gap:var(--sgds-gap-xs)}slot[name=profile]{align-self:stretch;display:flex}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4)}slot[name=non-collapsible].non-collapsible-empty{display:none}:host([tone=brand]) slot[name=non-collapsible]::slotted(*),:host([tone^=gradient]) slot[name=non-collapsible]::slotted(*){color:var(--sgds-color-fixed-light)}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);height:inherit;margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=mainnav.cjs.js.map

package/react/components/Mainnav/mainnav.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:80px;padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand{align-items:center;color:var(--sgds-color-default);display:flex;text-decoration:none;white-space:nowrap}.navbar-brand:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4);margin-left:auto}slot[name=non-collapsible].non-collapsible-empty{display:none}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
+var css_248z = css`:host{display:block}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);position:relative;z-index:var(--sgds-z-index-floating)}:host([tone=brand]) nav{background-color:var(--sgds-primary-surface-default)}:host([tone=gradient-1]) nav{background:var(--sgds-gradient-1)}:host([tone=gradient-2]) nav{background:var(--sgds-gradient-2)}:host([tone=gradient-3]) nav{background:var(--sgds-gradient-3)}:host([tone=gradient-4]) nav{background:var(--sgds-gradient-4)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-xs);justify-content:flex-start;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);min-height:var(--sgds-mainnav-height,72px);padding:0 var(--sgds-mainnav-mobile-padding-x);width:100%}:host([fluid]) .navbar{max-width:none}.navbar-brand{align-items:center;color:var(--sgds-color-default);display:flex;text-decoration:none;white-space:nowrap}:host([tone=brand]) .navbar-brand,:host([tone^=gradient]) .navbar-brand{color:var(--sgds-color-fixed-light)}.navbar-brand:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);box-shadow:0 2px 4px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:var(--sgds-z-index-floating)}nav>.navbar-body .navbar-nav{height:100dvh;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px)}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown):not(sgds-mainnav-profile)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}:host([tone=brand]) .navbar-toggler,:host([tone^=gradient]) .navbar-toggler{color:var(--sgds-color-fixed-light)}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:512px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar{padding:0 var(--sgds-mainnav-padding-x)}.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-end{margin-left:auto}.navbar-end,slot[name=start]{align-items:center;display:flex;gap:var(--sgds-gap-xs)}slot[name=profile]{align-self:stretch;display:flex}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4)}slot[name=non-collapsible].non-collapsible-empty{display:none}:host([tone=brand]) slot[name=non-collapsible]::slotted(*),:host([tone^=gradient]) slot[name=non-collapsible]::slotted(*){color:var(--sgds-color-fixed-light)}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);height:inherit;margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
 
 export { css_248z as default };
 //# sourceMappingURL=mainnav.js.map

package/react/components/Mainnav/sgds-mainnav-profile.cjs.js

@@ -0,0 +1,142 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var lit = require('lit');
+var context = require('@lit/context');
+var decorators_js = require('lit/decorators.js');
+var classMap_js = require('lit/directives/class-map.js');
+var ifDefined_js = require('lit/directives/if-defined.js');
+var dom = require('@floating-ui/dom');
+var sgdsElement = require('../../base/sgds-element.cjs.js');
+var sgdsDropdown = require('../Dropdown/sgds-dropdown.cjs.js');
+var sgdsDropdownItem = require('../Dropdown/sgds-dropdown-item.cjs.js');
+var sgdsIcon = require('../Icon/sgds-icon.cjs.js');
+var mainnavContext = require('./mainnav-context.cjs.js');
+var mainnavProfile = require('./mainnav-profile.cjs.js');
+var generateId = require('../../utils/generateId.cjs.js');
+
+/**
+ * @summary A profile component for the mainnav that shows a full dropdown in desktop and handles its own mobile menu.
+ * In desktop: renders avatar + label + secondaryText with a dropdown.
+ * In mobile: renders the avatar as a toggler that opens a self-contained mobile panel with profile items.
+ * When present, it disables the mainnav's default hamburger toggler.
+ *
+ * @slot avatar - Avatar element displayed in both desktop (before label) and mobile (as toggler)
+ * @slot default - Profile menu items (sgds-dropdown-item elements)
+ */
+class SgdsMainnavProfile extends sgdsElement["default"] {
+    constructor() {
+        super(...arguments);
+        this._breakpointReached = true;
+        /** @internal Whether the mobile menu is open */
+        this._mobileMenuOpen = false;
+        /** Primary text displayed next to the avatar in desktop (e.g. user name) */
+        this.label = "";
+        /** Secondary text displayed below the label in desktop (e.g. agency or role) */
+        this.secondaryText = "";
+        /** When true, disables the profile dropdown */
+        this.disabled = false;
+        /** Accessible label for the profile toggle button */
+        this.ariaLabel = "";
+        /** Controls dropdown close behavior. "default" auto-closes on item/outside click, "outside" closes only on outside click, "inside" prevents auto-close. */
+        this.close = "default";
+        /** @internal */
+        this.togglerId = generateId["default"]("profile", "button");
+        this._handleMobileToggle = () => {
+            this._mobileMenuOpen = !this._mobileMenuOpen;
+        };
+        this._handleKeydown = (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                this._handleMobileToggle();
+            }
+        };
+    }
+    render() {
+        if (!this._breakpointReached) {
+            // Desktop: dropdown with avatar + label + secondaryText
+            return lit.html `
+        <sgds-dropdown .floatingOpts=${{ middleware: [dom.offset(0)] }} ?disabled=${this.disabled} close=${this.close}>
+          <button
+            class="${classMap_js.classMap({
+                "nav-link": true,
+                disabled: this.disabled
+            })}"
+            aria-disabled=${this.disabled ? "true" : "false"}
+            aria-label=${ifDefined_js.ifDefined(this.ariaLabel)}
+            id=${this.togglerId}
+            tabindex=${this.disabled ? "-1" : "0"}
+            slot="toggler"
+          >
+            <slot name="avatar"></slot>
+            ${this.label || this.secondaryText
+                ? lit.html `<div class="profile-text">
+                  ${this.label ? lit.html `<span class="profile-label">${this.label}</span>` : lit.nothing}
+                  ${this.secondaryText
+                    ? lit.html `<span class="profile-secondary-text">${this.secondaryText}</span>`
+                    : lit.nothing}
+                </div>`
+                : lit.nothing}
+            <sgds-icon name="chevron-down" size="md"></sgds-icon>
+          </button>
+          <slot></slot>
+        </sgds-dropdown>
+      `;
+        }
+        // Mobile: avatar toggler + self-contained mobile panel
+        return lit.html `
+      <div
+        class="profile-avatar-mobile"
+        role="button"
+        tabindex="0"
+        aria-label=${this.ariaLabel || "Toggle navigation"}
+        aria-expanded=${this._mobileMenuOpen ? "true" : "false"}
+        @click=${this._handleMobileToggle}
+        @keydown=${this._handleKeydown}
+      >
+        <slot name="avatar"></slot>
+      </div>
+      <div class="profile-mobile-panel" ?hidden=${!this._mobileMenuOpen}>
+        <div class="profile-mobile-items">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsMainnavProfile.styles = [...sgdsElement["default"].styles, mainnavProfile["default"]];
+/** @internal */
+SgdsMainnavProfile.dependencies = {
+    "sgds-dropdown": sgdsDropdown.SgdsDropdown,
+    "sgds-dropdown-item": sgdsDropdownItem.SgdsDropdownItem,
+    "sgds-icon": sgdsIcon.SgdsIcon
+};
+tslib.__decorate([
+    context.consume({ context: mainnavContext.MainnavBreakpointContext, subscribe: true }),
+    decorators_js.state()
+], SgdsMainnavProfile.prototype, "_breakpointReached", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsMainnavProfile.prototype, "_mobileMenuOpen", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String, reflect: true })
+], SgdsMainnavProfile.prototype, "label", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String, reflect: true })
+], SgdsMainnavProfile.prototype, "secondaryText", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: Boolean })
+], SgdsMainnavProfile.prototype, "disabled", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String })
+], SgdsMainnavProfile.prototype, "ariaLabel", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String })
+], SgdsMainnavProfile.prototype, "close", void 0);
+
+exports.SgdsMainnavProfile = SgdsMainnavProfile;
+exports["default"] = SgdsMainnavProfile;
+//# sourceMappingURL=sgds-mainnav-profile.cjs.js.map

package/react/components/Mainnav/sgds-mainnav-profile.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-mainnav-profile.cjs.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-profile.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { consume } from \"@lit/context\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { offset } from \"@floating-ui/dom\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsDropdown from \"../Dropdown/sgds-dropdown\";\nimport SgdsDropdownItem from \"../Dropdown/sgds-dropdown-item\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavBreakpointContext } from \"./mainnav-context\";\nimport mainnavProfileStyle from \"./mainnav-profile.css\";\nimport genId from \"../../utils/generateId\";\n\n/**\n * @summary A profile component for the mainnav that shows a full dropdown in desktop and handles its own mobile menu.\n * In desktop: renders avatar + label + secondaryText with a dropdown.\n * In mobile: renders the avatar as a toggler that opens a self-contained mobile panel with profile items.\n * When present, it disables the mainnav's default hamburger toggler.\n *\n * @slot avatar - Avatar element displayed in both desktop (before label) and mobile (as toggler)\n * @slot default - Profile menu items (sgds-dropdown-item elements)\n */\nexport class SgdsMainnavProfile extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavProfileStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-dropdown\": SgdsDropdown,\n    \"sgds-dropdown-item\": SgdsDropdownItem,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @consume({ context: MainnavBreakpointContext, subscribe: true })\n  @state()\n  private _breakpointReached = true;\n\n  /** @internal Whether the mobile menu is open */\n  @state()\n  private _mobileMenuOpen = false;\n\n  /** Primary text displayed next to the avatar in desktop (e.g. user name) */\n  @property({ type: String, reflect: true })\n  label = \"\";\n\n  /** Secondary text displayed below the label in desktop (e.g. agency or role) */\n  @property({ type: String, reflect: true })\n  secondaryText = \"\";\n\n  /** When true, disables the profile dropdown */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Accessible label for the profile toggle button */\n  @property({ type: String })\n  ariaLabel = \"\";\n\n  /** Controls dropdown close behavior. \"default\" auto-closes on item/outside click, \"outside\" closes only on outside click, \"inside\" prevents auto-close. */\n  @property({ type: String })\n  close: \"default\" | \"outside\" | \"inside\" = \"default\";\n\n  /** @internal */\n  private togglerId: string = genId(\"profile\", \"button\");\n\n  private _handleMobileToggle = () => {\n    this._mobileMenuOpen = !this._mobileMenuOpen;\n  };\n\n  private _handleKeydown = (e: KeyboardEvent) => {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      this._handleMobileToggle();\n    }\n  };\n\n  render() {\n    if (!this._breakpointReached) {\n      // Desktop: dropdown with avatar + label + secondaryText\n      return html`\n        <sgds-dropdown .floatingOpts=${{ middleware: [offset(0)] }} ?disabled=${this.disabled} close=${this.close}>\n          <button\n            class=\"${classMap({\n              \"nav-link\": true,\n              disabled: this.disabled\n            })}\"\n            aria-disabled=${this.disabled ? \"true\" : \"false\"}\n            aria-label=${ifDefined(this.ariaLabel)}\n            id=${this.togglerId}\n            tabindex=${this.disabled ? \"-1\" : \"0\"}\n            slot=\"toggler\"\n          >\n            <slot name=\"avatar\"></slot>\n            ${this.label || this.secondaryText\n              ? html`<div class=\"profile-text\">\n                  ${this.label ? html`<span class=\"profile-label\">${this.label}</span>` : nothing}\n                  ${this.secondaryText\n                    ? html`<span class=\"profile-secondary-text\">${this.secondaryText}</span>`\n                    : nothing}\n                </div>`\n              : nothing}\n            <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n          </button>\n          <slot></slot>\n        </sgds-dropdown>\n      `;\n    }\n\n    // Mobile: avatar toggler + self-contained mobile panel\n    return html`\n      <div\n        class=\"profile-avatar-mobile\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=${this.ariaLabel || \"Toggle navigation\"}\n        aria-expanded=${this._mobileMenuOpen ? \"true\" : \"false\"}\n        @click=${this._handleMobileToggle}\n        @keydown=${this._handleKeydown}\n      >\n        <slot name=\"avatar\"></slot>\n      </div>\n      <div class=\"profile-mobile-panel\" ?hidden=${!this._mobileMenuOpen}>\n        <div class=\"profile-mobile-items\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsMainnavProfile;\n"],"names":["SgdsElement","genId","html","offset","classMap","ifDefined","nothing","mainnavProfileStyle","SgdsDropdown","SgdsDropdownItem","SgdsIcon","__decorate","consume","MainnavBreakpointContext","state","property"],"mappings":";;;;;;;;;;;;;;;;;;;;AAcA;;;;;;;;AAQG;AACG,MAAO,kBAAmB,SAAQA,sBAAW,CAAA;AAAnD,IAAA,WAAA,GAAA;;QAWU,IAAkB,CAAA,kBAAA,GAAG,IAAI,CAAC;;QAI1B,IAAe,CAAA,eAAA,GAAG,KAAK,CAAC;;QAIhC,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;;QAIX,IAAa,CAAA,aAAA,GAAG,EAAE,CAAC;;QAInB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAIjB,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;;QAIf,IAAK,CAAA,KAAA,GAAqC,SAAS,CAAC;;AAG5C,QAAA,IAAA,CAAA,SAAS,GAAWC,qBAAK,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;QAE/C,IAAmB,CAAA,mBAAA,GAAG,MAAK;AACjC,YAAA,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;AAC/C,SAAC,CAAC;AAEM,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,CAAgB,KAAI;AAC5C,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;gBACtC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,mBAAmB,EAAE,CAAC;aAC5B;AACH,SAAC,CAAC;KAsDH;IApDC,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;;AAE5B,YAAA,OAAOC,QAAI,CAAA,CAAA;AACsB,qCAAA,EAAA,EAAE,UAAU,EAAE,CAACC,UAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA,WAAA,EAAc,IAAI,CAAC,QAAQ,CAAU,OAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;AAE5F,mBAAA,EAAAC,oBAAQ,CAAC;AAChB,gBAAA,UAAU,EAAE,IAAI;gBAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAA;4BACc,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AACnC,uBAAA,EAAAC,sBAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AACjC,eAAA,EAAA,IAAI,CAAC,SAAS,CAAA;uBACR,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;;;;AAInC,YAAA,EAAA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,aAAa;kBAC9BH,QAAI,CAAA,CAAA;AACA,kBAAA,EAAA,IAAI,CAAC,KAAK,GAAGA,QAAI,CAAA,CAA+B,4BAAA,EAAA,IAAI,CAAC,KAAK,CAAA,OAAA,CAAS,GAAGI,WAAO,CAAA;AAC7E,kBAAA,EAAA,IAAI,CAAC,aAAa;AAClB,sBAAEJ,QAAI,CAAA,wCAAwC,IAAI,CAAC,aAAa,CAAS,OAAA,CAAA;AACzE,sBAAEI,WAAO,CAAA;AACN,sBAAA,CAAA;AACT,kBAAEA,WAAO,CAAA;;;;;OAKhB,CAAC;SACH;;AAGD,QAAA,OAAOJ,QAAI,CAAA,CAAA;;;;;qBAKM,IAAI,CAAC,SAAS,IAAI,mBAAmB,CAAA;wBAClC,IAAI,CAAC,eAAe,GAAG,MAAM,GAAG,OAAO,CAAA;AAC9C,eAAA,EAAA,IAAI,CAAC,mBAAmB,CAAA;AACtB,iBAAA,EAAA,IAAI,CAAC,cAAc,CAAA;;;;kDAIY,CAAC,IAAI,CAAC,eAAe,CAAA;;;;;KAKlE,CAAC;KACH;;AArGM,kBAAM,CAAA,MAAA,GAAG,CAAC,GAAGF,sBAAW,CAAC,MAAM,EAAEO,yBAAmB,CAA9C,CAAgD;AAC7D;AACO,kBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,eAAe,EAAEC,yBAAY;AAC7B,IAAA,oBAAoB,EAAEC,iCAAgB;AACtC,IAAA,WAAW,EAAEC,iBAAQ;AACtB,CAJkB,CAIjB;AAIMC,gBAAA,CAAA;IAFPC,eAAO,CAAC,EAAE,OAAO,EAAEC,uCAAwB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC/D,IAAAC,mBAAK,EAAE;AAC0B,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI1BH,gBAAA,CAAA;AADP,IAAAG,mBAAK,EAAE;AACwB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIhCH,gBAAA,CAAA;IADCI,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC/B,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIXJ,gBAAA,CAAA;IADCI,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACvB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAInBJ,gBAAA,CAAA;AADC,IAAAI,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACX,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjBJ,gBAAA,CAAA;AADC,IAAAI,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACZ,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIfJ,gBAAA,CAAA;AADC,IAAAI,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACyB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}