@govtechsg/sgds-web-component 3.22.1 → 3.23.0-rc.1

package/package.json

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

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

@@ -7,6 +7,7 @@ var tslib = require('tslib');
 var lit = require('lit');
 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 sgdsElement = require('../../base/sgds-element.cjs.js');
 var sgdsIcon = require('../Icon/sgds-icon.cjs.js');
 var dropdownItem = require('./dropdown-item.cjs.js');
@@ -23,6 +24,8 @@ class SgdsDropdownItem extends sgdsElement["default"] {
         this.active = false;
         /** Disables the SgdsMainnavItem */
         this.disabled = false;
+        /** Forwards aria-label to the inner clickable element for accessibility */
+        this.ariaLabel = "";
     }
     connectedCallback() {
         super.connectedCallback();
@@ -42,6 +45,7 @@ class SgdsDropdownItem extends sgdsElement["default"] {
             active: this.active
         })}"
         tabindex=${this.disabled ? "-1" : "0"}
+        aria-label=${ifDefined_js.ifDefined(this.ariaLabel || undefined)}
       >
         <slot></slot>
       </div>
@@ -61,6 +65,9 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsDropdownItem.prototype, "disabled", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String })
+], SgdsDropdownItem.prototype, "ariaLabel", void 0);
 
 exports.SgdsDropdownItem = SgdsDropdownItem;
 exports["default"] = SgdsDropdownItem;

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 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  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      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdownItem;\n"],"names":["SgdsElement","html","classMap","dropdownStyle","dropdownItemStyle","SgdsIcon","__decorate","queryAssignedElements","property"],"mappings":";;;;;;;;;;;;;;AAOA;;;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;KA0BlB;IAxBC,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;;;;KAIxC,CAAC;KACH;;AAvCM,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;;;;;"}
+{"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;;;;;"}

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

@@ -3,6 +3,7 @@ import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { queryAssignedElements, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import SgdsElement from '../../base/sgds-element.js';
 import { SgdsIcon } from '../Icon/sgds-icon.js';
 import css_248z$1 from './dropdown-item.js';
@@ -19,6 +20,8 @@ class SgdsDropdownItem extends SgdsElement {
         this.active = false;
         /** Disables the SgdsMainnavItem */
         this.disabled = false;
+        /** Forwards aria-label to the inner clickable element for accessibility */
+        this.ariaLabel = "";
     }
     connectedCallback() {
         super.connectedCallback();
@@ -38,6 +41,7 @@ class SgdsDropdownItem extends SgdsElement {
             active: this.active
         })}"
         tabindex=${this.disabled ? "-1" : "0"}
+        aria-label=${ifDefined(this.ariaLabel || undefined)}
       >
         <slot></slot>
       </div>
@@ -57,6 +61,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsDropdownItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], SgdsDropdownItem.prototype, "ariaLabel", void 0);
 
 export { SgdsDropdownItem, SgdsDropdownItem as default };
 //# sourceMappingURL=sgds-dropdown-item.js.map

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 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  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      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDropdownItem;\n"],"names":["dropdownStyle","dropdownItemStyle"],"mappings":";;;;;;;;;;AAOA;;;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;KA0BlB;IAxBC,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;;;;KAIxC,CAAC;KACH;;AAvCM,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;;;;"}
+{"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;;;;"}

package/react/components/Sidenav/sgds-sidenav-item.cjs.js

@@ -7,6 +7,7 @@ var tslib = require('tslib');
 var lit = require('lit');
 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 sgdsElement = require('../../base/sgds-element.cjs.js');
 var animate = require('../../utils/animate.cjs.js');
 var animationRegistry = require('../../utils/animation-registry.cjs.js');
@@ -203,6 +204,7 @@ class SgdsSidenavItem extends sgdsElement["default"] {
         aria-expanded=${this.active}
         aria-controls=${this._collapseId}
         aria-current=${this.active}
+        aria-label=${ifDefined_js.ifDefined(this.ariaLabel)}
         id=${this._buttonId}
         ?disabled=${this.disabled}
         aria-disabled=${this.disabled ? "true" : "false"}
@@ -242,6 +244,9 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsSidenavItem.prototype, "disabled", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String })
+], SgdsSidenavItem.prototype, "ariaLabel", void 0);
 tslib.__decorate([
     decorators_js.state()
 ], SgdsSidenavItem.prototype, "isLink", void 0);

package/react/components/Sidenav/sgds-sidenav-item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav-item.cjs.js","sources":["../../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n * @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n *\n * @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @state() private isLink = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private _buttonId: string = genId(\"sidenav\", \"button\");\n\n  private _levelId = genId(\"sidenav\", \"this\");\n  private _firstLevelId = \"first-level-\" + this._levelId;\n  private _secondLevelId = \"second-level-\" + this._levelId;\n  private _thirdLevelId = \"third-level-\" + this._levelId;\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  /** Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types */\n  public async show() {\n    if (this.isLink) return;\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item.  Only applicable to sgds-sidenav-item that are of menu types */\n  public async hide() {\n    if (this.isLink) return;\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add(this._firstLevelId);\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.isLink) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n\n    this._handleOpenMenu();\n  }\n\n  /**\n   * Sets active to true to open menu ,\n   * evaluating based on whether any of the child in any level is active\n   * If at least 1 child is active, parent item should be active\n   */\n  private _handleOpenMenu() {\n    if (!this.active) {\n      this.active = this._items.some((i: SgdsSidenavItem | SgdsSidenavLink) => i.active);\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async _handleOpenChange() {\n    if (this.isLink) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n  @queryAssignedElements() private _items: SgdsSidenavLink[];\n  private _handleSlotChange(e: Event) {\n    const anchorItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"a\");\n\n    if (anchorItems.length > 1) {\n      return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n    } else if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n      this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n      this.active && anchor.setAttribute(\"aria-current\", \"true\");\n      return (this.isLink = true);\n    }\n\n    const sideNavItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n    /** All sgds-sidenav-item in this slot is a 2nd level item */\n    sideNavItems.forEach(i => {\n      const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n      i.classList.replace(firstLevelId, this._secondLevelId);\n    });\n    /** All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n    if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n      this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n    }\n\n    this._handleOpenMenu();\n  }\n\n  render() {\n    const withMenuTemplate = html`\n      <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        aria-expanded=${this.active}\n        aria-controls=${this._collapseId}\n        aria-current=${this.active}\n        id=${this._buttonId}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n          <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const noMenuTemplate = html` <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot> `;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"names":["SgdsElement","genId","waitForEvent","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","html","classMap","sidenavItemStyle","SgdsIcon","__decorate","query","property","state","watch","queryAssignedElements","setDefaultAnimation"],"mappings":"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"}
+{"version":3,"file":"sgds-sidenav-item.cjs.js","sources":["../../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } 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 { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n * @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n *\n * @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute.\n   */\n  @property({ type: String })\n  ariaLabel: string;\n\n  @state() private isLink = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private _buttonId: string = genId(\"sidenav\", \"button\");\n\n  private _levelId = genId(\"sidenav\", \"this\");\n  private _firstLevelId = \"first-level-\" + this._levelId;\n  private _secondLevelId = \"second-level-\" + this._levelId;\n  private _thirdLevelId = \"third-level-\" + this._levelId;\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  /** Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types */\n  public async show() {\n    if (this.isLink) return;\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item.  Only applicable to sgds-sidenav-item that are of menu types */\n  public async hide() {\n    if (this.isLink) return;\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add(this._firstLevelId);\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.isLink) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n\n    this._handleOpenMenu();\n  }\n\n  /**\n   * Sets active to true to open menu ,\n   * evaluating based on whether any of the child in any level is active\n   * If at least 1 child is active, parent item should be active\n   */\n  private _handleOpenMenu() {\n    if (!this.active) {\n      this.active = this._items.some((i: SgdsSidenavItem | SgdsSidenavLink) => i.active);\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async _handleOpenChange() {\n    if (this.isLink) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n  @queryAssignedElements() private _items: SgdsSidenavLink[];\n  private _handleSlotChange(e: Event) {\n    const anchorItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"a\");\n\n    if (anchorItems.length > 1) {\n      return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n    } else if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n      this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n      this.active && anchor.setAttribute(\"aria-current\", \"true\");\n      return (this.isLink = true);\n    }\n\n    const sideNavItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n    /** All sgds-sidenav-item in this slot is a 2nd level item */\n    sideNavItems.forEach(i => {\n      const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n      i.classList.replace(firstLevelId, this._secondLevelId);\n    });\n    /** All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n    if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n      this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n    }\n\n    this._handleOpenMenu();\n  }\n\n  render() {\n    const withMenuTemplate = html`\n      <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        aria-expanded=${this.active}\n        aria-controls=${this._collapseId}\n        aria-current=${this.active}\n        aria-label=${ifDefined(this.ariaLabel)}\n        id=${this._buttonId}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n          <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const noMenuTemplate = html` <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot> `;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"names":["SgdsElement","genId","waitForEvent","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","html","classMap","ifDefined","sidenavItemStyle","SgdsIcon","__decorate","query","property","state","watch","queryAssignedElements","setDefaultAnimation"],"mappings":"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"}

package/react/components/Sidenav/sgds-sidenav-item.js

@@ -3,6 +3,7 @@ import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { query, property, state, queryAssignedElements } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import SgdsElement from '../../base/sgds-element.js';
 import { stopAnimations, animateTo, shimKeyframesHeightAuto } from '../../utils/animate.js';
 import { setDefaultAnimation, getAnimation } from '../../utils/animation-registry.js';
@@ -199,6 +200,7 @@ class SgdsSidenavItem extends SgdsElement {
         aria-expanded=${this.active}
         aria-controls=${this._collapseId}
         aria-current=${this.active}
+        aria-label=${ifDefined(this.ariaLabel)}
         id=${this._buttonId}
         ?disabled=${this.disabled}
         aria-disabled=${this.disabled ? "true" : "false"}
@@ -238,6 +240,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsSidenavItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], SgdsSidenavItem.prototype, "ariaLabel", void 0);
 __decorate([
     state()
 ], SgdsSidenavItem.prototype, "isLink", void 0);

package/react/components/Sidenav/sgds-sidenav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav-item.js","sources":["../../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n * @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n *\n * @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @state() private isLink = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private _buttonId: string = genId(\"sidenav\", \"button\");\n\n  private _levelId = genId(\"sidenav\", \"this\");\n  private _firstLevelId = \"first-level-\" + this._levelId;\n  private _secondLevelId = \"second-level-\" + this._levelId;\n  private _thirdLevelId = \"third-level-\" + this._levelId;\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  /** Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types */\n  public async show() {\n    if (this.isLink) return;\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item.  Only applicable to sgds-sidenav-item that are of menu types */\n  public async hide() {\n    if (this.isLink) return;\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add(this._firstLevelId);\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.isLink) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n\n    this._handleOpenMenu();\n  }\n\n  /**\n   * Sets active to true to open menu ,\n   * evaluating based on whether any of the child in any level is active\n   * If at least 1 child is active, parent item should be active\n   */\n  private _handleOpenMenu() {\n    if (!this.active) {\n      this.active = this._items.some((i: SgdsSidenavItem | SgdsSidenavLink) => i.active);\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async _handleOpenChange() {\n    if (this.isLink) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n  @queryAssignedElements() private _items: SgdsSidenavLink[];\n  private _handleSlotChange(e: Event) {\n    const anchorItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"a\");\n\n    if (anchorItems.length > 1) {\n      return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n    } else if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n      this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n      this.active && anchor.setAttribute(\"aria-current\", \"true\");\n      return (this.isLink = true);\n    }\n\n    const sideNavItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n    /** All sgds-sidenav-item in this slot is a 2nd level item */\n    sideNavItems.forEach(i => {\n      const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n      i.classList.replace(firstLevelId, this._secondLevelId);\n    });\n    /** All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n    if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n      this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n    }\n\n    this._handleOpenMenu();\n  }\n\n  render() {\n    const withMenuTemplate = html`\n      <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        aria-expanded=${this.active}\n        aria-controls=${this._collapseId}\n        aria-current=${this.active}\n        id=${this._buttonId}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n          <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const noMenuTemplate = html` <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot> `;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"names":["sidenavItemStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-sidenav-item.js","sources":["../../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } 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 { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n * @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n *\n * @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute.\n   */\n  @property({ type: String })\n  ariaLabel: string;\n\n  @state() private isLink = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private _buttonId: string = genId(\"sidenav\", \"button\");\n\n  private _levelId = genId(\"sidenav\", \"this\");\n  private _firstLevelId = \"first-level-\" + this._levelId;\n  private _secondLevelId = \"second-level-\" + this._levelId;\n  private _thirdLevelId = \"third-level-\" + this._levelId;\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  /** Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types */\n  public async show() {\n    if (this.isLink) return;\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item.  Only applicable to sgds-sidenav-item that are of menu types */\n  public async hide() {\n    if (this.isLink) return;\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add(this._firstLevelId);\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.isLink) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n\n    this._handleOpenMenu();\n  }\n\n  /**\n   * Sets active to true to open menu ,\n   * evaluating based on whether any of the child in any level is active\n   * If at least 1 child is active, parent item should be active\n   */\n  private _handleOpenMenu() {\n    if (!this.active) {\n      this.active = this._items.some((i: SgdsSidenavItem | SgdsSidenavLink) => i.active);\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async _handleOpenChange() {\n    if (this.isLink) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n  @queryAssignedElements() private _items: SgdsSidenavLink[];\n  private _handleSlotChange(e: Event) {\n    const anchorItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"a\");\n\n    if (anchorItems.length > 1) {\n      return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n    } else if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n      this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n      this.active && anchor.setAttribute(\"aria-current\", \"true\");\n      return (this.isLink = true);\n    }\n\n    const sideNavItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n    /** All sgds-sidenav-item in this slot is a 2nd level item */\n    sideNavItems.forEach(i => {\n      const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n      i.classList.replace(firstLevelId, this._secondLevelId);\n    });\n    /** All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n    if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n      this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n    }\n\n    this._handleOpenMenu();\n  }\n\n  render() {\n    const withMenuTemplate = html`\n      <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        aria-expanded=${this.active}\n        aria-controls=${this._collapseId}\n        aria-current=${this.active}\n        aria-label=${ifDefined(this.ariaLabel)}\n        id=${this._buttonId}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n          <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const noMenuTemplate = html` <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot> `;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"names":["sidenavItemStyle"],"mappings":"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"}

package/react/css/grid.cjs.js

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

package/react/css/grid.js

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

package/react/index.cjs.js

@@ -18,9 +18,9 @@ var index$b = require('./close-button/index.cjs.js');
 var index$c = require('./combo-box-option/index.cjs.js');
 var index$d = require('./combo-box/index.cjs.js');
 var index$e = require('./datepicker/index.cjs.js');
-var index$f = require('./divider/index.cjs.js');
-var index$g = require('./description-list-group/index.cjs.js');
-var index$h = require('./description-list/index.cjs.js');
+var index$f = require('./description-list-group/index.cjs.js');
+var index$g = require('./description-list/index.cjs.js');
+var index$h = require('./divider/index.cjs.js');
 var index$i = require('./drawer/index.cjs.js');
 var index$j = require('./dropdown-item/index.cjs.js');
 var index$k = require('./dropdown/index.cjs.js');
@@ -94,9 +94,9 @@ exports.SgdsCloseButton = index$b["default"];
 exports.SgdsComboBoxOption = index$c["default"];
 exports.SgdsComboBox = index$d["default"];
 exports.SgdsDatepicker = index$e["default"];
-exports.SgdsDivider = index$f["default"];
-exports.SgdsDescriptionListGroup = index$g["default"];
-exports.SgdsDescriptionList = index$h["default"];
+exports.SgdsDescriptionListGroup = index$f["default"];
+exports.SgdsDescriptionList = index$g["default"];
+exports.SgdsDivider = index$h["default"];
 exports.SgdsDrawer = index$i["default"];
 exports.SgdsDropdownItem = index$j["default"];
 exports.SgdsDropdown = index$k["default"];

package/react/index.d.ts

@@ -13,9 +13,9 @@ export { default as SgdsCloseButton } from './close-button';
 export { default as SgdsComboBoxOption } from './combo-box-option';
 export { default as SgdsComboBox } from './combo-box';
 export { default as SgdsDatepicker } from './datepicker';
-export { default as SgdsDivider } from './divider';
 export { default as SgdsDescriptionListGroup } from './description-list-group';
 export { default as SgdsDescriptionList } from './description-list';
+export { default as SgdsDivider } from './divider';
 export { default as SgdsDrawer } from './drawer';
 export { default as SgdsDropdownItem } from './dropdown-item';
 export { default as SgdsDropdown } from './dropdown';

package/react/index.js

@@ -14,9 +14,9 @@ export { default as SgdsCloseButton } from './close-button/index.js';
 export { default as SgdsComboBoxOption } from './combo-box-option/index.js';
 export { default as SgdsComboBox } from './combo-box/index.js';
 export { default as SgdsDatepicker } from './datepicker/index.js';
-export { default as SgdsDivider } from './divider/index.js';
 export { default as SgdsDescriptionListGroup } from './description-list-group/index.js';
 export { default as SgdsDescriptionList } from './description-list/index.js';
+export { default as SgdsDivider } from './divider/index.js';
 export { default as SgdsDrawer } from './drawer/index.js';
 export { default as SgdsDropdownItem } from './dropdown-item/index.js';
 export { default as SgdsDropdown } from './dropdown/index.js';

package/themes/root.css

@@ -131,6 +131,7 @@
   --sgds-breakpoint-sbar-lg: var(--sgds-dimension-1024);
   --sgds-breakpoint-sbar-xl: var(--sgds-dimension-1280);
   --sgds-breakpoint-sbar-2-xl: var(--sgds-dimension-1440);
+  --sgds-breakpoint-sbar-3-xl: var(--sgds-dimension-1600);
 
   /* Primitive - Font Family */
   --sgds-font-family-brand: "Inter", system-ui, sans-serif;
@@ -300,6 +301,7 @@
   --sgds-dimension-1280: 1280px;
   --sgds-dimension-1312: 1312px;
   --sgds-dimension-1440: 1440px;
+  --sgds-dimension-1600: 1600px;
 
   /* Semantic - Padding */
   --sgds-padding-none: var(--sgds-spacer-0);

package/types/react.d.ts

@@ -526,15 +526,6 @@ range mode as array of string. eg.'["22/12/2023"]' for single &
   onSgdsAfterHide?: SgdsEventHandler;
 }
 
-// ── Divider ─────────────────────────────────────────────────────────────
-
-export interface SgdsDividerProps extends SgdsBaseProps {
-  /** Sets the orientation of divider to vertical. Defaults to horizontal */
-  orientation?: "horizontal" | "vertical";
-  /** Sets the orientation of divider to vertical. Defaults to false */
-  thickness?: "thin" | "thick" | "thicker";
-}
-
 // ── DescriptionListGroup ─────────────────────────────────────────────────────────────
 
 export interface SgdsDescriptionListGroupProps extends SgdsBaseProps {
@@ -557,6 +548,15 @@ export interface SgdsDescriptionListProps extends SgdsBaseProps {
   bordered?: boolean;
 }
 
+// ── Divider ─────────────────────────────────────────────────────────────
+
+export interface SgdsDividerProps extends SgdsBaseProps {
+  /** Sets the orientation of divider to vertical. Defaults to horizontal */
+  orientation?: "horizontal" | "vertical";
+  /** Sets the orientation of divider to vertical. Defaults to false */
+  thickness?: "thin" | "thick" | "thicker";
+}
+
 // ── Drawer ─────────────────────────────────────────────────────────────
 
 export interface SgdsDrawerProps extends SgdsBaseProps {
@@ -596,6 +596,8 @@ export interface SgdsDropdownItemProps extends SgdsBaseProps {
   active?: boolean;
   /** Disables the SgdsMainnavItem */
   disabled?: boolean;
+  /** Forwards aria-label to the inner clickable element for accessibility */
+  ariaLabel?: string;
 }
 
 // ── Dropdown ─────────────────────────────────────────────────────────────
@@ -1267,6 +1269,8 @@ export interface SgdsSidenavItemProps extends SgdsBaseProps {
   active?: boolean;
   /** Disables the SgdsSidenavItem */
   disabled?: boolean;
+  /** Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute. */
+  ariaLabel?: string;
   "onsgds-toggle"?: SgdsEventHandler;
   onSgdsToggle?: SgdsEventHandler;
   "onsgds-show"?: SgdsEventHandler;
@@ -1695,9 +1699,9 @@ declare module "react" {
       "sgds-combo-box-option": React.DetailedHTMLProps<SgdsComboBoxOptionProps, HTMLElement>;
       "sgds-combo-box": React.DetailedHTMLProps<SgdsComboBoxProps, HTMLElement>;
       "sgds-datepicker": React.DetailedHTMLProps<SgdsDatepickerProps, HTMLElement>;
-      "sgds-divider": React.DetailedHTMLProps<SgdsDividerProps, HTMLElement>;
       "sgds-description-list-group": React.DetailedHTMLProps<SgdsDescriptionListGroupProps, HTMLElement>;
       "sgds-description-list": React.DetailedHTMLProps<SgdsDescriptionListProps, HTMLElement>;
+      "sgds-divider": React.DetailedHTMLProps<SgdsDividerProps, HTMLElement>;
       "sgds-drawer": React.DetailedHTMLProps<SgdsDrawerProps, HTMLElement>;
       "sgds-dropdown-item": React.DetailedHTMLProps<SgdsDropdownItemProps, HTMLElement>;
       "sgds-dropdown": React.DetailedHTMLProps<SgdsDropdownProps, HTMLElement>;
@@ -1778,9 +1782,9 @@ declare global {
     "sgds-combo-box-option": HTMLElement;
     "sgds-combo-box": HTMLElement;
     "sgds-datepicker": HTMLElement;
-    "sgds-divider": HTMLElement;
     "sgds-description-list-group": HTMLElement;
     "sgds-description-list": HTMLElement;
+    "sgds-divider": HTMLElement;
     "sgds-drawer": HTMLElement;
     "sgds-dropdown-item": HTMLElement;
     "sgds-dropdown": HTMLElement;