@cds/core 5.7.0 → 6.0.0-beta.2

package/navigation/navigation-item.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-item.element.js","sources":["../../../src/navigation/navigation-item.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { baseStyles, createId, i18n, I18nService, state, property, querySlot, querySlotAll, spanWrapper, } from '@cds/core/internal';\nimport styles from './navigation-item.element.scss';\nimport { manageScreenReaderElements, NAVIGATION_TEXT_WRAPPER } from './utils/index.js';\nexport const CdsNavigationItemTagName = 'cds-navigation-item';\n/**\n * ```typescript\n * import '@cds/core/navigation/register.js';\n * ```\n *\n * ```html\n *  <cds-navigation-item><a href=\"/home\">Home</cds-navigation-item>\n * ```\n *\n * @beta\n * @element cds-navigation-item\n * @cssprop --color\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --letter-spacing\n * @cssprop --padding\n * @slot\n */\nexport class CdsNavigationItem extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.i18n = I18nService.keys.navigation;\n        this.active = false;\n        this.disabled = false;\n        this.expanded = false;\n        this.expandedGroup = true;\n        this.hasFocus = false;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.role = 'listitem';\n        if (!this.id) {\n            this.id = createId();\n        }\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        this.handleItemAnchorText();\n        manageScreenReaderElements(this, this.expanded);\n    }\n    handleItemAnchorText() {\n        var _a;\n        const anchorElement = this.querySelector('a');\n        if (anchorElement) {\n            spanWrapper(anchorElement.childNodes);\n            (_a = anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.querySelector('span')) === null || _a === void 0 ? void 0 : _a.setAttribute(NAVIGATION_TEXT_WRAPPER, '');\n        }\n    }\n    render() {\n        return html `\n      <div\n        class=\"private-host ${this.groupItem ? 'group-item' : ''}\"\n        cds-layout=\"horizontal align:horizontal-stretch wrap:none gap:md\"\n      >\n        <slot @slotchange=${this.handleItemAnchorText}></slot>\n      </div>\n    `;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n    updated(props) {\n        super.updated(props);\n        manageScreenReaderElements(this, this.expanded);\n    }\n}\n__decorate([\n    i18n()\n], CdsNavigationItem.prototype, \"i18n\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"active\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"disabled\", void 0);\n__decorate([\n    state({ type: Boolean })\n], CdsNavigationItem.prototype, \"expanded\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"expandedGroup\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"groupItem\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"hasFocus\", void 0);\n__decorate([\n    querySlot('a')\n], CdsNavigationItem.prototype, \"focusElement\", void 0);\n__decorate([\n    querySlot('cds-icon', { assign: 'cds-icon-slot' })\n], CdsNavigationItem.prototype, \"itemIcon\", void 0);\n__decorate([\n    querySlotAll('[cds-navigation-sr-text]')\n], CdsNavigationItem.prototype, \"itemText\", void 0);\n"],"names":["CdsNavigationItemTagName","CdsNavigationItem","LitElement","constructor","super","this","i18n","I18nService","keys","navigation","active","disabled","expanded","expandedGroup","hasFocus","connectedCallback","role","id","createId","firstUpdated","props","handleItemAnchorText","manageScreenReaderElements","_a","anchorElement","querySelector","spanWrapper","childNodes","setAttribute","NAVIGATION_TEXT_WRAPPER","render","html","groupItem","styles","baseStyles","updated","__decorate","prototype","property","type","Boolean","reflect","state","querySlot","assign","querySlotAll"],"mappings":"8XAUY,MAACA,EAA2B,sBAmBjC,MAAMC,UAA0BC,EACnCC,cACIC,oBACAC,KAAKC,KAAOC,EAAYC,KAAKC,WAC7BJ,KAAKK,QAAS,EACdL,KAAKM,UAAW,EAChBN,KAAKO,UAAW,EAChBP,KAAKQ,eAAgB,EACrBR,KAAKS,UAAW,EAEpBC,oBACIX,MAAMW,oBACNV,KAAKW,KAAO,WACPX,KAAKY,KACNZ,KAAKY,GAAKC,KAGlBC,aAAaC,GACThB,MAAMe,aAAaC,GACnBf,KAAKgB,uBACLC,EAA2BjB,KAAMA,KAAKO,UAE1CS,uBACI,IAAIE,EACJ,MAAMC,EAAgBnB,KAAKoB,cAAc,KACrCD,IACAE,EAAYF,EAAcG,YACmF,QAA5GJ,EAAKC,MAAAA,OAAqD,EAASA,EAAcC,cAAc,eAA4B,IAAPF,GAAyBA,EAAGK,aAAaC,EAAyB,KAG/LC,SACI,OAAOC,CAAK,4BAEU1B,KAAK2B,UAAY,aAAe,4FAGlC3B,KAAKgB,sCAIlBY,oBACP,MAAO,CAACC,EAAYD,GAExBE,QAAQf,GACJhB,MAAM+B,QAAQf,GACdE,EAA2BjB,KAAMA,KAAKO,WAG9CwB,EAAW,CACP9B,KACDL,EAAkBoC,UAAW,YAAQ,GACxCD,EAAW,CACPE,EAAS,CAAEC,KAAMC,QAASC,SAAS,KACpCxC,EAAkBoC,UAAW,cAAU,GAC1CD,EAAW,CACPE,EAAS,CAAEC,KAAMC,QAASC,SAAS,KACpCxC,EAAkBoC,UAAW,gBAAY,GAC5CD,EAAW,CACPM,EAAM,CAAEH,KAAMC,WACfvC,EAAkBoC,UAAW,gBAAY,GAC5CD,EAAW,CACPM,EAAM,CAAEH,KAAMC,QAASC,SAAS,KACjCxC,EAAkBoC,UAAW,qBAAiB,GACjDD,EAAW,CACPM,EAAM,CAAEH,KAAMC,QAASC,SAAS,KACjCxC,EAAkBoC,UAAW,iBAAa,GAC7CD,EAAW,CACPM,EAAM,CAAEH,KAAMC,QAASC,SAAS,KACjCxC,EAAkBoC,UAAW,gBAAY,GAC5CD,EAAW,CACPO,EAAU,MACX1C,EAAkBoC,UAAW,oBAAgB,GAChDD,EAAW,CACPO,EAAU,WAAY,CAAEC,OAAQ,mBACjC3C,EAAkBoC,UAAW,gBAAY,GAC5CD,EAAW,CACPS,EAAa,6BACd5C,EAAkBoC,UAAW,gBAAY"}
+{"version":3,"file":"navigation-item.element.js","sources":["../../../src/navigation/navigation-item.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { baseStyles, createId, i18n, I18nService, state, property, querySlot, querySlotAll, spanWrapper, } from '@cds/core/internal';\nimport styles from './navigation-item.element.scss';\nimport { manageScreenReaderElements, NAVIGATION_TEXT_WRAPPER } from './utils/utils.js';\nexport const CdsNavigationItemTagName = 'cds-navigation-item';\n/**\n * ```typescript\n * import '@cds/core/navigation/register.js';\n * ```\n *\n * ```html\n *  <cds-navigation-item><a href=\"/home\">Home</cds-navigation-item>\n * ```\n *\n * @element cds-navigation-item\n * @cssprop --color\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --letter-spacing\n * @cssprop --padding\n * @slot\n */\nexport class CdsNavigationItem extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.i18n = I18nService.keys.navigation;\n        this.active = false;\n        this.disabled = false;\n        this.expanded = false;\n        this.expandedGroup = true;\n        this.hasFocus = false;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.role = 'listitem';\n        if (!this.id) {\n            this.id = createId();\n        }\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        this.handleItemAnchorText();\n        manageScreenReaderElements(this, this.expanded);\n    }\n    handleItemAnchorText() {\n        const anchorElement = this.querySelector('a');\n        if (anchorElement) {\n            spanWrapper(anchorElement.childNodes);\n            anchorElement?.querySelector('span')?.setAttribute(NAVIGATION_TEXT_WRAPPER, '');\n        }\n    }\n    render() {\n        return html `\n      <div\n        class=\"private-host ${this.groupItem ? 'group-item' : ''}\"\n        cds-layout=\"horizontal align:horizontal-stretch wrap:none gap:sm\"\n      >\n        <slot @slotchange=${this.handleItemAnchorText}></slot>\n      </div>\n    `;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n    updated(props) {\n        super.updated(props);\n        manageScreenReaderElements(this, this.expanded);\n    }\n}\n__decorate([\n    i18n()\n], CdsNavigationItem.prototype, \"i18n\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"active\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"disabled\", void 0);\n__decorate([\n    state({ type: Boolean })\n], CdsNavigationItem.prototype, \"expanded\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"expandedGroup\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"groupItem\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationItem.prototype, \"hasFocus\", void 0);\n__decorate([\n    querySlot('a')\n], CdsNavigationItem.prototype, \"focusElement\", void 0);\n__decorate([\n    querySlot('cds-icon', { assign: 'cds-icon-slot' })\n], CdsNavigationItem.prototype, \"itemIcon\", void 0);\n__decorate([\n    querySlotAll('[cds-navigation-sr-text]')\n], CdsNavigationItem.prototype, \"itemText\", void 0);\n"],"names":["CdsNavigationItemTagName","CdsNavigationItem","LitElement","constructor","super","this","i18n","I18nService","keys","navigation","active","disabled","expanded","expandedGroup","hasFocus","connectedCallback","role","id","createId","firstUpdated","props","handleItemAnchorText","manageScreenReaderElements","anchorElement","querySelector","spanWrapper","childNodes","setAttribute","NAVIGATION_TEXT_WRAPPER","render","html","groupItem","styles","baseStyles","updated","__decorate","prototype","property","type","Boolean","reflect","state","querySlot","assign","querySlotAll"],"mappings":"8XAUY,MAACA,EAA2B,sBAkBjC,MAAMC,UAA0BC,EACnCC,cACIC,oBACAC,KAAKC,KAAOC,EAAYC,KAAKC,WAC7BJ,KAAKK,QAAS,EACdL,KAAKM,UAAW,EAChBN,KAAKO,UAAW,EAChBP,KAAKQ,eAAgB,EACrBR,KAAKS,UAAW,EAEpBC,oBACIX,MAAMW,oBACNV,KAAKW,KAAO,WACPX,KAAKY,KACNZ,KAAKY,GAAKC,KAGlBC,aAAaC,GACThB,MAAMe,aAAaC,GACnBf,KAAKgB,uBACLC,EAA2BjB,KAAMA,KAAKO,UAE1CS,uBACI,MAAME,EAAgBlB,KAAKmB,cAAc,KACrCD,IACAE,EAAYF,EAAcG,YAC1BH,GAAeC,cAAc,SAASG,aAAaC,EAAyB,KAGpFC,SACI,OAAOC,CAAK,4BAEUzB,KAAK0B,UAAY,aAAe,4FAGlC1B,KAAKgB,sCAIlBW,oBACP,MAAO,CAACC,EAAYD,GAExBE,QAAQd,GACJhB,MAAM8B,QAAQd,GACdE,EAA2BjB,KAAMA,KAAKO,WAG9CuB,EAAW,CACP7B,KACDL,EAAkBmC,UAAW,YAAQ,GACxCD,EAAW,CACPE,EAAS,CAAEC,KAAMC,QAASC,SAAS,KACpCvC,EAAkBmC,UAAW,cAAU,GAC1CD,EAAW,CACPE,EAAS,CAAEC,KAAMC,QAASC,SAAS,KACpCvC,EAAkBmC,UAAW,gBAAY,GAC5CD,EAAW,CACPM,EAAM,CAAEH,KAAMC,WACftC,EAAkBmC,UAAW,gBAAY,GAC5CD,EAAW,CACPM,EAAM,CAAEH,KAAMC,QAASC,SAAS,KACjCvC,EAAkBmC,UAAW,qBAAiB,GACjDD,EAAW,CACPM,EAAM,CAAEH,KAAMC,QAASC,SAAS,KACjCvC,EAAkBmC,UAAW,iBAAa,GAC7CD,EAAW,CACPM,EAAM,CAAEH,KAAMC,QAASC,SAAS,KACjCvC,EAAkBmC,UAAW,gBAAY,GAC5CD,EAAW,CACPO,EAAU,MACXzC,EAAkBmC,UAAW,oBAAgB,GAChDD,EAAW,CACPO,EAAU,WAAY,CAAEC,OAAQ,mBACjC1C,EAAkBmC,UAAW,gBAAY,GAC5CD,EAAW,CACPS,EAAa,6BACd3C,EAAkBmC,UAAW,gBAAY"}

package/navigation/navigation-item.element.scss.js

@@ -1,2 +1,2 @@
-import{css as o}from"lit";var a=o`:host{--color:var(--cds-alias-object-interaction-color, var(--cds-global-color-construction-700, #3a4d55));--background:var(--cds-alias-object-interaction-background, var(--cds-global-color-white, white));--line-height:var(--cds-alias-object-interaction-touch-target, calc(36 / var(--cds-global-base, 20) * 1rem));--font-size:inherit;--font-weight:inherit;--letter-spacing:inherit;--padding:0 var(--cds-global-space-5, calc(8 / var(--cds-global-base, 20) * 1rem));--cursor:pointer}:host([_group-item]){--padding:0 var(--cds-global-space-5, calc(8 / var(--cds-global-base, 20) * 1rem)) 0 var(--cds-global-space-7, calc(16 / var(--cds-global-base, 20) * 1rem))}.private-host{min-height:var(--line-height);font-size:var(--font-size);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);line-height:var(--line-height);width:100%;height:fit-content;color:var(--color);background:var(--background);border:0;cursor:var(--cursor);padding:var(--padding)}:host(:hover),:host([_has-focus]){--color:var(--cds-alias-object-interaction-color-hover, var(--cds-global-color-construction-1000, #1b2b32))}:host(:hover){--background:var(--cds-alias-object-interaction-background-hover, var(--cds-global-color-blue-50, #e6f7ff))}:host([_has-focus]){outline:var(--cds-alias-object-interaction-outline,Highlight solid 2px);outline-offset:calc(var(--cds-alias-object-interaction-outline-offset,1px)*-2)}@media (-webkit-min-device-pixel-ratio:0){:host([_has-focus]){outline:var(--cds-alias-object-interaction-outline-webkit,5px auto -webkit-focus-ring-color)}}:host([_active]:not([_expanded])),:host([active]){--background:var(--cds-alias-object-interaction-background-selected, var(--cds-global-color-blue-50, #e6f7ff));--color:var(--cds-alias-object-interaction-color, var(--cds-global-color-construction-700, #3a4d55))}:host([_active]:not([_expanded])) .private-host,:host([active]) .private-host{box-shadow:inset var(--cds-alias-object-border-width-300,calc(3 / var(--cds-global-base,20) * 1rem)) 0 0 0 var(--cds-alias-object-interaction-background-highlight,var(--cds-global-color-blue-700,#0079ad))}:host(:active),:host(:active:focus){--color:var(--cds-alias-object-interaction-color-active, var(--cds-global-color-construction-1000, #1b2b32));--background:var(--cds-alias-object-interaction-background-active, var(--cds-global-color-blue-100, #bdebff))}:host([selected]){--color:var(--cds-alias-object-interaction-color-selected, var(--cds-global-color-construction-700, #3a4d55));--background:var(--cds-alias-object-interaction-background-selected, var(--cds-global-color-blue-50, #e6f7ff))}:host([disabled]),:host([disabled]:hover){--color:var(--cds-alias-object-interaction-color-disabled, var(--cds-global-color-construction-300, #aeb8bc));--background:var(--cds-alias-object-interaction-background-disabled, var(--cds-global-color-white, white));--cursor:not-allowed}::slotted([role=button]),::slotted(a),::slotted(button),button{line-height:var(--line-height);min-height:var(--line-height);cursor:var(--cursor);text-decoration:none!important;padding:0;outline:0;background:0 0;border:0;color:inherit;display:flex;flex:1;align-items:center;gap:var(--cds-global-space-6,calc(12 / var(--cds-global-base,20) * 1rem))}`;export{a as default};
+import{css as o}from"lit";var a=o`:host{--color:var(--cds-alias-object-interaction-color, var(--cds-global-color-construction-700, #3a4d55));--background:var(--cds-alias-object-interaction-background, var(--cds-global-color-white, white));--line-height:var(--cds-alias-object-interaction-touch-target, 2.25rem);--font-size:inherit;--font-weight:inherit;--letter-spacing:inherit;--padding:0 var(--cds-global-space-5, 0.5rem);--cursor:pointer}:host([_group-item]){--padding:0 var(--cds-global-space-5, 0.5rem) 0 var(--cds-global-space-7, 1rem)}.private-host{min-height:var(--line-height);font-size:var(--font-size);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);line-height:var(--line-height);width:100%;height:fit-content;color:var(--color);background:var(--background);border:0;cursor:var(--cursor);padding:var(--padding)}:host(:hover),:host([_has-focus]){--color:var(--cds-alias-object-interaction-color-hover, var(--cds-global-color-construction-1000, #1b2b32))}:host(:hover){--background:var(--cds-alias-object-interaction-background-hover, var(--cds-global-color-blue-50, #e6f7ff))}:host([_has-focus]){outline:var(--cds-alias-object-interaction-outline,Highlight solid 2px);outline-offset:calc(var(--cds-alias-object-interaction-outline-offset,1px)*-2)}@media (-webkit-min-device-pixel-ratio:0){:host([_has-focus]){outline:var(--cds-alias-object-interaction-outline-webkit,5px auto -webkit-focus-ring-color)}}:host([_active]:not([_expanded])),:host([active]){--background:var(--cds-alias-object-interaction-background-selected, var(--cds-global-color-blue-50, #e6f7ff));--color:var(--cds-alias-object-interaction-color, var(--cds-global-color-construction-700, #3a4d55))}:host([_active]:not([_expanded])) .private-host,:host([active]) .private-host{box-shadow:inset var(--cds-alias-object-border-width-300,.1875rem) 0 0 0 var(--cds-alias-object-interaction-background-highlight,var(--cds-global-color-blue-700,#0079ad))}:host(:active),:host(:active:focus){--color:var(--cds-alias-object-interaction-color-active, var(--cds-global-color-construction-1000, #1b2b32));--background:var(--cds-alias-object-interaction-background-active, var(--cds-global-color-blue-100, #bdebff))}:host([selected]){--color:var(--cds-alias-object-interaction-color-selected, var(--cds-global-color-construction-700, #3a4d55));--background:var(--cds-alias-object-interaction-background-selected, var(--cds-global-color-blue-50, #e6f7ff))}:host([disabled]),:host([disabled]:hover){--color:var(--cds-alias-object-interaction-color-disabled, var(--cds-global-color-construction-300, #aeb8bc));--background:var(--cds-alias-object-interaction-background-disabled, var(--cds-global-color-white, white));--cursor:not-allowed}::slotted([role=button]),::slotted(a),::slotted(button),button{line-height:var(--line-height);min-height:var(--line-height);cursor:var(--cursor);text-decoration:none!important;padding:0;outline:0;background:0 0;border:0;color:inherit;display:flex;flex:1;align-items:center;gap:var(--cds-global-space-6,.75rem)}`;export{a as default};
 //# sourceMappingURL=navigation-item.element.scss.js.map

package/navigation/navigation-start.element.d.ts

@@ -12,7 +12,7 @@ export declare const CdsNavigationStartTagName = "cds-navigation-start";
  * ```html
  * <cds-navigation-start>Start text</cds-navigation-start>
  * ```
- * @beta
+ *
  * @element cds-navigation-start
  * @cssprop --color: inherit
  * @cssprop --line-height: inherit
@@ -23,7 +23,10 @@ export declare const CdsNavigationStartTagName = "cds-navigation-start";
  */
 export declare class CdsNavigationStart extends LitElement implements FocusableItem {
     i18n: {
-        [key: string]: string | undefined;
+        navigationElement: string;
+        navigationLabel: string;
+        navigationAbridgedText: string;
+        navigationUnabridgedText: string;
     };
     /**
      * @desc
@@ -65,12 +68,12 @@ export declare class CdsNavigationStart extends LitElement implements FocusableI
     protected startIcon: CdsIcon;
     itemText: NodeListOf<HTMLSpanElement>;
     connectedCallback(): void;
-    firstUpdated(props: PropertyValues): void;
+    firstUpdated(props: PropertyValues<this>): void;
     private handleStartButtonText;
     private renderRootStart;
     private renderGroupStart;
     render(): import("lit-html").TemplateResult<1>;
     static get styles(): import("lit").CSSResultGroup[];
     private get toggleIconDirection();
-    updated(props: PropertyValues): void;
+    updated(props: PropertyValues<this>): void;
 }

package/navigation/navigation-start.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{LitElement as o,html as e}from"lit";import{I18nService as i,createId as s,spanWrapper as n,baseStyles as a,i18n as r,property as d,state as l,querySlot as p,querySlotAll as c}from"@cds/core/internal";import h from"./navigation-item.element.scss.js";import{NAVIGATION_TEXT_WRAPPER as u,getToggleIconDirection as g,manageScreenReaderElements as v}from"./utils/index.js";const x="cds-navigation-start";class y extends o{constructor(){super(...arguments);this.i18n=i.keys.navigation,this.expandedRoot=!1,this.hasFocus=!1,this.isGroupStart=!1,this.active=!1,this.expanded=!1}connectedCallback(){super.connectedCallback(),this.role="listitem",this.id||(this.id=s())}firstUpdated(t){var o;super.firstUpdated(t);const e=null===(o=this.shadowRoot)||void 0===o?void 0:o.querySelector("button");e&&(this.focusElement=e),this.handleStartButtonText()}handleStartButtonText(){var t;n(this.childNodes),null===(t=this.querySelector("span"))||void 0===t||t.setAttribute(u,"")}renderRootStart(){return e`<slot @slotchange="${this.handleStartButtonText}"></slot><button aria-pressed="${this.expandedRoot}" aria-label="${this.expandedRoot?this.i18n.navigationUnabridgedText:this.i18n.navigationAbridgedText}" id="${this.isGroupStart?this.navigationGroupId:""}" type="button"><div cds-layout="horizontal align:vertical-center"><span class="icon-slot" cds-layout="${this.expandedRoot?"align:right":"align:left"}"><slot name="cds-icon-slot">${this.startIcon?"":e`<cds-icon size="${!this.expandedRoot&&this.isGroupStart?"xs":"sm"}" shape="${this.isGroupStart?"angle":"angle-double"}" direction="${this.toggleIconDirection}"></cds-icon>`}</slot></span></div></button>`}renderGroupStart(){return e`<button aria-expanded="${this.expanded}" id="${this.isGroupStart?this.navigationGroupId:""}" type="button"><div cds-layout="horizontal wrap:none align:vertical-center gap:md"><slot @slotchange="${this.handleStartButtonText}"></slot><span class="icon-slot" cds-layout="${this.expandedRoot?"align:right":"align:left"}"><slot name="cds-icon-slot">${this.startIcon?"":e`<cds-icon size="${!this.expandedRoot&&this.isGroupStart?"xs":"sm"}" shape="${this.isGroupStart?"angle":"angle-double"}" direction="${this.toggleIconDirection}"></cds-icon>`}</slot></span></div></button>`}render(){return e`<div class="private-host" cds-layout="horizontal align:vertical-center align:horizontal-stretch">${this.isGroupStart?this.renderGroupStart():this.renderRootStart()}</div>`}static get styles(){return[a,h]}get toggleIconDirection(){return g(this)}updated(t){super.updated(t),v(this,this.expandedRoot)}}t([r()],y.prototype,"i18n",void 0),t([d({type:Boolean})],y.prototype,"expandedRoot",void 0),t([l({type:Boolean,reflect:!0})],y.prototype,"hasFocus",void 0),t([d({type:Boolean,reflect:!0})],y.prototype,"isGroupStart",void 0),t([d({type:String})],y.prototype,"navigationGroupId",void 0),t([l({type:Boolean,reflect:!0})],y.prototype,"active",void 0),t([l({type:Boolean,reflect:!0})],y.prototype,"expanded",void 0),t([p("[cds-navigation-start-icon]",{assign:"cds-icon-slot"})],y.prototype,"startIcon",void 0),t([c("[cds-navigation-sr-text]")],y.prototype,"itemText",void 0);export{y as CdsNavigationStart,x as CdsNavigationStartTagName};
+import{__decorate as t}from"tslib";import{LitElement as o,html as e}from"lit";import{I18nService as i,createId as s,spanWrapper as n,baseStyles as a,i18n as r,property as d,state as l,querySlot as p,querySlotAll as c}from"@cds/core/internal";import h from"./navigation-item.element.scss.js";import{NAVIGATION_TEXT_WRAPPER as u,getToggleIconDirection as g,manageScreenReaderElements as v}from"./utils/utils.js";const y="cds-navigation-start";class x extends o{constructor(){super(...arguments);this.i18n=i.keys.navigation,this.expandedRoot=!1,this.hasFocus=!1,this.isGroupStart=!1,this.active=!1,this.expanded=!1}connectedCallback(){super.connectedCallback(),this.role="listitem",this.id||(this.id=s())}firstUpdated(t){super.firstUpdated(t);const o=this.shadowRoot?.querySelector("button");o&&(this.focusElement=o),this.handleStartButtonText()}handleStartButtonText(){n(this.childNodes),this.querySelector("span")?.setAttribute(u,"")}renderRootStart(){return e`<slot @slotchange="${this.handleStartButtonText}"></slot><button aria-pressed="${this.expandedRoot}" aria-label="${this.expandedRoot?this.i18n.navigationUnabridgedText:this.i18n.navigationAbridgedText}" id="${this.isGroupStart?this.navigationGroupId:""}" type="button"><div cds-layout="horizontal align:vertical-center"><span class="icon-slot" cds-layout="${this.expandedRoot?"align:right":"align:left"}"><slot name="cds-icon-slot">${this.startIcon?"":e`<cds-icon size="${!this.expandedRoot&&this.isGroupStart?"xs":"sm"}" shape="${this.isGroupStart?"angle":"angle-double"}" direction="${this.toggleIconDirection}"></cds-icon>`}</slot></span></div></button>`}renderGroupStart(){return e`<button aria-expanded="${this.expanded}" id="${this.isGroupStart?this.navigationGroupId:""}" type="button"><div cds-layout="horizontal wrap:none align:vertical-center gap:sm"><slot @slotchange="${this.handleStartButtonText}"></slot><span class="icon-slot" cds-layout="${this.expandedRoot?"align:right":"align:left"}"><slot name="cds-icon-slot">${this.startIcon?"":e`<cds-icon size="${!this.expandedRoot&&this.isGroupStart?"xs":"sm"}" shape="${this.isGroupStart?"angle":"angle-double"}" direction="${this.toggleIconDirection}"></cds-icon>`}</slot></span></div></button>`}render(){return e`<div class="private-host" cds-layout="horizontal align:vertical-center align:horizontal-stretch">${this.isGroupStart?this.renderGroupStart():this.renderRootStart()}</div>`}static get styles(){return[a,h]}get toggleIconDirection(){return g(this)}updated(t){super.updated(t),v(this,this.expandedRoot)}}t([r()],x.prototype,"i18n",void 0),t([d({type:Boolean})],x.prototype,"expandedRoot",void 0),t([l({type:Boolean,reflect:!0})],x.prototype,"hasFocus",void 0),t([d({type:Boolean,reflect:!0})],x.prototype,"isGroupStart",void 0),t([d({type:String})],x.prototype,"navigationGroupId",void 0),t([l({type:Boolean,reflect:!0})],x.prototype,"active",void 0),t([l({type:Boolean,reflect:!0})],x.prototype,"expanded",void 0),t([p("[cds-navigation-start-icon]",{assign:"cds-icon-slot"})],x.prototype,"startIcon",void 0),t([c("[cds-navigation-sr-text]")],x.prototype,"itemText",void 0);export{x as CdsNavigationStart,y as CdsNavigationStartTagName};
 //# sourceMappingURL=navigation-start.element.js.map

package/navigation/navigation-start.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-start.element.js","sources":["../../../src/navigation/navigation-start.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { baseStyles, createId, i18n, I18nService, property, querySlot, querySlotAll, spanWrapper, state, } from '@cds/core/internal';\nimport itemStyles from './navigation-item.element.scss';\nimport { getToggleIconDirection, manageScreenReaderElements, NAVIGATION_TEXT_WRAPPER } from './utils/index.js';\nexport const CdsNavigationStartTagName = 'cds-navigation-start';\n/**\n * Web component navigation.\n *\n * ```typescript\n * import '@cds/core/navigation/register.js';\n * ```\n *\n * ```html\n * <cds-navigation-start>Start text</cds-navigation-start>\n * ```\n * @beta\n * @element cds-navigation-start\n * @cssprop --color: inherit\n * @cssprop --line-height: inherit\n * @cssprop --font-size: inherit\n * @cssprop --font-weight: inherit\n * @slot\n * @slot cds-navigation-start-icon - customize the default start toggle icon\n */\nexport class CdsNavigationStart extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.i18n = I18nService.keys.navigation;\n        /**\n         * @desc\n         * Synced down from the root navigation element. Determines if the vertical navigation is wide or narrow.\n         */\n        this.expandedRoot = false;\n        /**\n         * @desc\n         * Is set to true by the root cds-navigation element when the instance is focused.\n         */\n        this.hasFocus = false;\n        /**\n         * @desc\n         * The value is synced down from the root cds-navigation element.\n         */\n        this.isGroupStart = false;\n        /**\n         * @desc info synced down from group element and used in css to set proper bg color if a group has an active item and is not expanded\n         *\n         * @private\n         */\n        this.active = false;\n        /**\n         * @desc\n         * Describes the groups expanded state\n         *\n         * @private\n         */\n        this.expanded = false;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.role = 'listitem';\n        if (!this.id) {\n            this.id = createId();\n        }\n    }\n    firstUpdated(props) {\n        var _a;\n        super.firstUpdated(props);\n        const button = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');\n        if (button) {\n            this.focusElement = button;\n        }\n        this.handleStartButtonText();\n    }\n    handleStartButtonText() {\n        var _a;\n        spanWrapper(this.childNodes);\n        // get the projected text now wrapped in a span and add the sr attribute.\n        (_a = this.querySelector('span')) === null || _a === void 0 ? void 0 : _a.setAttribute(NAVIGATION_TEXT_WRAPPER, '');\n    }\n    renderRootStart() {\n        return html `\n      <slot @slotchange=${this.handleStartButtonText}></slot>\n      <button\n        aria-pressed=\"${this.expandedRoot}\"\n        aria-label=\"${this.expandedRoot ? this.i18n.navigationUnabridgedText : this.i18n.navigationAbridgedText}\"\n        id=\"${this.isGroupStart ? this.navigationGroupId : ''}\"\n        type=\"button\"\n      >\n        <div cds-layout=\"horizontal align:vertical-center\">\n          <span class=\"icon-slot\" cds-layout=\"${this.expandedRoot ? 'align:right' : 'align:left'}\">\n            <slot name=\"cds-icon-slot\">\n              ${this.startIcon\n            ? ''\n            : html ` <cds-icon\n                    size=\"${!this.expandedRoot && this.isGroupStart ? 'xs' : 'sm'}\"\n                    shape=\"${this.isGroupStart ? 'angle' : 'angle-double'}\"\n                    direction=\"${this.toggleIconDirection}\"\n                  >\n                  </cds-icon>`}\n            </slot>\n          </span>\n        </div>\n      </button>\n    `;\n    }\n    renderGroupStart() {\n        return html `\n      <button aria-expanded=\"${this.expanded}\" id=\"${this.isGroupStart ? this.navigationGroupId : ''}\" type=\"button\">\n        <div cds-layout=\"horizontal wrap:none align:vertical-center gap:md\">\n          <slot @slotchange=${this.handleStartButtonText}></slot>\n          <span class=\"icon-slot\" cds-layout=\"${this.expandedRoot ? 'align:right' : 'align:left'}\">\n            <slot name=\"cds-icon-slot\">\n              ${this.startIcon\n            ? ''\n            : html ` <cds-icon\n                    size=\"${!this.expandedRoot && this.isGroupStart ? 'xs' : 'sm'}\"\n                    shape=\"${this.isGroupStart ? 'angle' : 'angle-double'}\"\n                    direction=\"${this.toggleIconDirection}\"\n                  >\n                  </cds-icon>`}\n            </slot>\n          </span>\n        </div>\n      </button>\n    `;\n    }\n    render() {\n        return html `\n      <div class=\"private-host\" cds-layout=\"horizontal align:vertical-center align:horizontal-stretch\">\n        ${this.isGroupStart ? this.renderGroupStart() : this.renderRootStart()}\n      </div>\n    `;\n    }\n    static get styles() {\n        return [baseStyles, itemStyles];\n    }\n    get toggleIconDirection() {\n        return getToggleIconDirection(this);\n    }\n    updated(props) {\n        super.updated(props);\n        manageScreenReaderElements(this, this.expandedRoot);\n    }\n}\n__decorate([\n    i18n()\n], CdsNavigationStart.prototype, \"i18n\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsNavigationStart.prototype, \"expandedRoot\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationStart.prototype, \"hasFocus\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsNavigationStart.prototype, \"isGroupStart\", void 0);\n__decorate([\n    property({ type: String })\n], CdsNavigationStart.prototype, \"navigationGroupId\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationStart.prototype, \"active\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationStart.prototype, \"expanded\", void 0);\n__decorate([\n    querySlot('[cds-navigation-start-icon]', { assign: 'cds-icon-slot' })\n], CdsNavigationStart.prototype, \"startIcon\", void 0);\n__decorate([\n    querySlotAll('[cds-navigation-sr-text]')\n], CdsNavigationStart.prototype, \"itemText\", void 0);\n"],"names":["CdsNavigationStartTagName","CdsNavigationStart","LitElement","constructor","super","this","i18n","I18nService","keys","navigation","expandedRoot","hasFocus","isGroupStart","active","expanded","connectedCallback","role","id","createId","firstUpdated","props","_a","button","shadowRoot","querySelector","focusElement","handleStartButtonText","spanWrapper","childNodes","setAttribute","NAVIGATION_TEXT_WRAPPER","renderRootStart","html","navigationUnabridgedText","navigationAbridgedText","navigationGroupId","startIcon","toggleIconDirection","renderGroupStart","render","styles","baseStyles","itemStyles","getToggleIconDirection","updated","manageScreenReaderElements","__decorate","prototype","property","type","Boolean","state","reflect","String","querySlot","assign","querySlotAll"],"mappings":"0ZAUY,MAACA,EAA4B,uBAoBlC,MAAMC,UAA2BC,EACpCC,cACIC,oBACAC,KAAKC,KAAOC,EAAYC,KAAKC,WAK7BJ,KAAKK,cAAe,EAKpBL,KAAKM,UAAW,EAKhBN,KAAKO,cAAe,EAMpBP,KAAKQ,QAAS,EAOdR,KAAKS,UAAW,EAEpBC,oBACIX,MAAMW,oBACNV,KAAKW,KAAO,WACPX,KAAKY,KACNZ,KAAKY,GAAKC,KAGlBC,aAAaC,GACT,IAAIC,EACJjB,MAAMe,aAAaC,GACnB,MAAME,EAAoC,QAA1BD,EAAKhB,KAAKkB,kBAA+B,IAAPF,OAAgB,EAASA,EAAGG,cAAc,UACxFF,IACAjB,KAAKoB,aAAeH,GAExBjB,KAAKqB,wBAETA,wBACI,IAAIL,EACJM,EAAYtB,KAAKuB,YAEqB,QAArCP,EAAKhB,KAAKmB,cAAc,eAA4B,IAAPH,GAAyBA,EAAGQ,aAAaC,EAAyB,IAEpHC,kBACI,OAAOC,CAAK,sBACM3B,KAAKqB,uDAEPrB,KAAKK,6BACPL,KAAKK,aAAeL,KAAKC,KAAK2B,yBAA2B5B,KAAKC,KAAK4B,+BAC3E7B,KAAKO,aAAeP,KAAK8B,kBAAoB,4GAIX9B,KAAKK,aAAe,cAAgB,4CAEpEL,KAAK+B,UACP,GACAJ,CAAK,oBACU3B,KAAKK,cAAgBL,KAAKO,aAAe,KAAO,gBAChDP,KAAKO,aAAe,QAAU,8BAC1BP,KAAKgC,kEASlCC,mBACI,OAAON,CAAK,0BACW3B,KAAKS,iBAAiBT,KAAKO,aAAeP,KAAK8B,kBAAoB,4GAEpE9B,KAAKqB,qEACarB,KAAKK,aAAe,cAAgB,4CAEpEL,KAAK+B,UACP,GACAJ,CAAK,oBACU3B,KAAKK,cAAgBL,KAAKO,aAAe,KAAO,gBAChDP,KAAKO,aAAe,QAAU,8BAC1BP,KAAKgC,kEASlCE,SACI,OAAOP,CAAK,oGAEV3B,KAAKO,aAAeP,KAAKiC,mBAAqBjC,KAAK0B,0BAI9CS,oBACP,MAAO,CAACC,EAAYC,GAEpBL,0BACA,OAAOM,EAAuBtC,MAElCuC,QAAQxB,GACJhB,MAAMwC,QAAQxB,GACdyB,EAA2BxC,KAAMA,KAAKK,eAG9CoC,EAAW,CACPxC,KACDL,EAAmB8C,UAAW,YAAQ,GACzCD,EAAW,CACPE,EAAS,CAAEC,KAAMC,WAClBjD,EAAmB8C,UAAW,oBAAgB,GACjDD,EAAW,CACPK,EAAM,CAAEF,KAAMC,QAASE,SAAS,KACjCnD,EAAmB8C,UAAW,gBAAY,GAC7CD,EAAW,CACPE,EAAS,CAAEC,KAAMC,QAASE,SAAS,KACpCnD,EAAmB8C,UAAW,oBAAgB,GACjDD,EAAW,CACPE,EAAS,CAAEC,KAAMI,UAClBpD,EAAmB8C,UAAW,yBAAqB,GACtDD,EAAW,CACPK,EAAM,CAAEF,KAAMC,QAASE,SAAS,KACjCnD,EAAmB8C,UAAW,cAAU,GAC3CD,EAAW,CACPK,EAAM,CAAEF,KAAMC,QAASE,SAAS,KACjCnD,EAAmB8C,UAAW,gBAAY,GAC7CD,EAAW,CACPQ,EAAU,8BAA+B,CAAEC,OAAQ,mBACpDtD,EAAmB8C,UAAW,iBAAa,GAC9CD,EAAW,CACPU,EAAa,6BACdvD,EAAmB8C,UAAW,gBAAY"}
+{"version":3,"file":"navigation-start.element.js","sources":["../../../src/navigation/navigation-start.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { baseStyles, createId, i18n, I18nService, property, querySlot, querySlotAll, spanWrapper, state, } from '@cds/core/internal';\nimport itemStyles from './navigation-item.element.scss';\nimport { getToggleIconDirection, manageScreenReaderElements, NAVIGATION_TEXT_WRAPPER } from './utils/utils.js';\nexport const CdsNavigationStartTagName = 'cds-navigation-start';\n/**\n * Web component navigation.\n *\n * ```typescript\n * import '@cds/core/navigation/register.js';\n * ```\n *\n * ```html\n * <cds-navigation-start>Start text</cds-navigation-start>\n * ```\n *\n * @element cds-navigation-start\n * @cssprop --color: inherit\n * @cssprop --line-height: inherit\n * @cssprop --font-size: inherit\n * @cssprop --font-weight: inherit\n * @slot\n * @slot cds-navigation-start-icon - customize the default start toggle icon\n */\nexport class CdsNavigationStart extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.i18n = I18nService.keys.navigation;\n        /**\n         * @desc\n         * Synced down from the root navigation element. Determines if the vertical navigation is wide or narrow.\n         */\n        this.expandedRoot = false;\n        /**\n         * @desc\n         * Is set to true by the root cds-navigation element when the instance is focused.\n         */\n        this.hasFocus = false;\n        /**\n         * @desc\n         * The value is synced down from the root cds-navigation element.\n         */\n        this.isGroupStart = false;\n        /**\n         * @desc info synced down from group element and used in css to set proper bg color if a group has an active item and is not expanded\n         *\n         * @private\n         */\n        this.active = false;\n        /**\n         * @desc\n         * Describes the groups expanded state\n         *\n         * @private\n         */\n        this.expanded = false;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.role = 'listitem';\n        if (!this.id) {\n            this.id = createId();\n        }\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        const button = this.shadowRoot?.querySelector('button');\n        if (button) {\n            this.focusElement = button;\n        }\n        this.handleStartButtonText();\n    }\n    handleStartButtonText() {\n        spanWrapper(this.childNodes);\n        // get the projected text now wrapped in a span and add the sr attribute.\n        this.querySelector('span')?.setAttribute(NAVIGATION_TEXT_WRAPPER, '');\n    }\n    renderRootStart() {\n        return html `\n      <slot @slotchange=${this.handleStartButtonText}></slot>\n      <button\n        aria-pressed=\"${this.expandedRoot}\"\n        aria-label=\"${this.expandedRoot ? this.i18n.navigationUnabridgedText : this.i18n.navigationAbridgedText}\"\n        id=\"${this.isGroupStart ? this.navigationGroupId : ''}\"\n        type=\"button\"\n      >\n        <div cds-layout=\"horizontal align:vertical-center\">\n          <span class=\"icon-slot\" cds-layout=\"${this.expandedRoot ? 'align:right' : 'align:left'}\">\n            <slot name=\"cds-icon-slot\">\n              ${this.startIcon\n            ? ''\n            : html ` <cds-icon\n                    size=\"${!this.expandedRoot && this.isGroupStart ? 'xs' : 'sm'}\"\n                    shape=\"${this.isGroupStart ? 'angle' : 'angle-double'}\"\n                    direction=\"${this.toggleIconDirection}\"\n                  >\n                  </cds-icon>`}\n            </slot>\n          </span>\n        </div>\n      </button>\n    `;\n    }\n    renderGroupStart() {\n        return html `\n      <button aria-expanded=\"${this.expanded}\" id=\"${this.isGroupStart ? this.navigationGroupId : ''}\" type=\"button\">\n        <div cds-layout=\"horizontal wrap:none align:vertical-center gap:sm\">\n          <slot @slotchange=${this.handleStartButtonText}></slot>\n          <span class=\"icon-slot\" cds-layout=\"${this.expandedRoot ? 'align:right' : 'align:left'}\">\n            <slot name=\"cds-icon-slot\">\n              ${this.startIcon\n            ? ''\n            : html ` <cds-icon\n                    size=\"${!this.expandedRoot && this.isGroupStart ? 'xs' : 'sm'}\"\n                    shape=\"${this.isGroupStart ? 'angle' : 'angle-double'}\"\n                    direction=\"${this.toggleIconDirection}\"\n                  >\n                  </cds-icon>`}\n            </slot>\n          </span>\n        </div>\n      </button>\n    `;\n    }\n    render() {\n        return html `\n      <div class=\"private-host\" cds-layout=\"horizontal align:vertical-center align:horizontal-stretch\">\n        ${this.isGroupStart ? this.renderGroupStart() : this.renderRootStart()}\n      </div>\n    `;\n    }\n    static get styles() {\n        return [baseStyles, itemStyles];\n    }\n    get toggleIconDirection() {\n        return getToggleIconDirection(this);\n    }\n    updated(props) {\n        super.updated(props);\n        manageScreenReaderElements(this, this.expandedRoot);\n    }\n}\n__decorate([\n    i18n()\n], CdsNavigationStart.prototype, \"i18n\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsNavigationStart.prototype, \"expandedRoot\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationStart.prototype, \"hasFocus\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsNavigationStart.prototype, \"isGroupStart\", void 0);\n__decorate([\n    property({ type: String })\n], CdsNavigationStart.prototype, \"navigationGroupId\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationStart.prototype, \"active\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsNavigationStart.prototype, \"expanded\", void 0);\n__decorate([\n    querySlot('[cds-navigation-start-icon]', { assign: 'cds-icon-slot' })\n], CdsNavigationStart.prototype, \"startIcon\", void 0);\n__decorate([\n    querySlotAll('[cds-navigation-sr-text]')\n], CdsNavigationStart.prototype, \"itemText\", void 0);\n"],"names":["CdsNavigationStartTagName","CdsNavigationStart","LitElement","constructor","super","this","i18n","I18nService","keys","navigation","expandedRoot","hasFocus","isGroupStart","active","expanded","connectedCallback","role","id","createId","firstUpdated","props","button","shadowRoot","querySelector","focusElement","handleStartButtonText","spanWrapper","childNodes","setAttribute","NAVIGATION_TEXT_WRAPPER","renderRootStart","html","navigationUnabridgedText","navigationAbridgedText","navigationGroupId","startIcon","toggleIconDirection","renderGroupStart","render","styles","baseStyles","itemStyles","getToggleIconDirection","updated","manageScreenReaderElements","__decorate","prototype","property","type","Boolean","state","reflect","String","querySlot","assign","querySlotAll"],"mappings":"0ZAUY,MAACA,EAA4B,uBAoBlC,MAAMC,UAA2BC,EACpCC,cACIC,oBACAC,KAAKC,KAAOC,EAAYC,KAAKC,WAK7BJ,KAAKK,cAAe,EAKpBL,KAAKM,UAAW,EAKhBN,KAAKO,cAAe,EAMpBP,KAAKQ,QAAS,EAOdR,KAAKS,UAAW,EAEpBC,oBACIX,MAAMW,oBACNV,KAAKW,KAAO,WACPX,KAAKY,KACNZ,KAAKY,GAAKC,KAGlBC,aAAaC,GACThB,MAAMe,aAAaC,GACnB,MAAMC,EAAShB,KAAKiB,YAAYC,cAAc,UAC1CF,IACAhB,KAAKmB,aAAeH,GAExBhB,KAAKoB,wBAETA,wBACIC,EAAYrB,KAAKsB,YAEjBtB,KAAKkB,cAAc,SAASK,aAAaC,EAAyB,IAEtEC,kBACI,OAAOC,CAAK,sBACM1B,KAAKoB,uDAEPpB,KAAKK,6BACPL,KAAKK,aAAeL,KAAKC,KAAK0B,yBAA2B3B,KAAKC,KAAK2B,+BAC3E5B,KAAKO,aAAeP,KAAK6B,kBAAoB,4GAIX7B,KAAKK,aAAe,cAAgB,4CAEpEL,KAAK8B,UACP,GACAJ,CAAK,oBACU1B,KAAKK,cAAgBL,KAAKO,aAAe,KAAO,gBAChDP,KAAKO,aAAe,QAAU,8BAC1BP,KAAK+B,kEASlCC,mBACI,OAAON,CAAK,0BACW1B,KAAKS,iBAAiBT,KAAKO,aAAeP,KAAK6B,kBAAoB,4GAEpE7B,KAAKoB,qEACapB,KAAKK,aAAe,cAAgB,4CAEpEL,KAAK8B,UACP,GACAJ,CAAK,oBACU1B,KAAKK,cAAgBL,KAAKO,aAAe,KAAO,gBAChDP,KAAKO,aAAe,QAAU,8BAC1BP,KAAK+B,kEASlCE,SACI,OAAOP,CAAK,oGAEV1B,KAAKO,aAAeP,KAAKgC,mBAAqBhC,KAAKyB,0BAI9CS,oBACP,MAAO,CAACC,EAAYC,GAEpBL,0BACA,OAAOM,EAAuBrC,MAElCsC,QAAQvB,GACJhB,MAAMuC,QAAQvB,GACdwB,EAA2BvC,KAAMA,KAAKK,eAG9CmC,EAAW,CACPvC,KACDL,EAAmB6C,UAAW,YAAQ,GACzCD,EAAW,CACPE,EAAS,CAAEC,KAAMC,WAClBhD,EAAmB6C,UAAW,oBAAgB,GACjDD,EAAW,CACPK,EAAM,CAAEF,KAAMC,QAASE,SAAS,KACjClD,EAAmB6C,UAAW,gBAAY,GAC7CD,EAAW,CACPE,EAAS,CAAEC,KAAMC,QAASE,SAAS,KACpClD,EAAmB6C,UAAW,oBAAgB,GACjDD,EAAW,CACPE,EAAS,CAAEC,KAAMI,UAClBnD,EAAmB6C,UAAW,yBAAqB,GACtDD,EAAW,CACPK,EAAM,CAAEF,KAAMC,QAASE,SAAS,KACjClD,EAAmB6C,UAAW,cAAU,GAC3CD,EAAW,CACPK,EAAM,CAAEF,KAAMC,QAASE,SAAS,KACjClD,EAAmB6C,UAAW,gBAAY,GAC7CD,EAAW,CACPQ,EAAU,8BAA+B,CAAEC,OAAQ,mBACpDrD,EAAmB6C,UAAW,iBAAa,GAC9CD,EAAW,CACPU,EAAa,6BACdtD,EAAmB6C,UAAW,gBAAY"}

package/navigation/navigation.element.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues } from 'lit';
-import { Animatable, EventEmitter } from '@cds/core/internal';
-import { FocusableElement } from './utils/index.js';
+import { EventEmitter } from '@cds/core/internal';
+import { FocusableElement } from './utils/utils.js';
 import { CdsNavigationGroup } from './navigation-group.element.js';
 import { CdsNavigationStart } from './navigation-start.element.js';
 import { CdsNavigationItem } from './navigation-item.element.js';
@@ -18,7 +18,6 @@ export declare const CdsNavigationTagName = "cds-navigation";
  *  </cds-navigation>
  * ```
  *
- * @beta
  * @element cds-navigation
  * @event expandedChange - notify when the user has clicked the navigation expand/collapse button
  * @cssprop --animation-duration
@@ -33,10 +32,10 @@ export declare const CdsNavigationTagName = "cds-navigation";
  * @cssprop --nested-padding
  * @cssprop --padding
  * @slot
- * @slot - cds-navigation-substart - project content below the navigation toggle button
- * @slot - cds-navigation-end - project content below the scrollable section
+ * @slot cds-navigation-substart - project content below the navigation toggle button
+ * @slot cds-navigation-end - project content below the scrollable section
  */
-export declare class CdsNavigation extends LitElement implements Animatable {
+export declare class CdsNavigation extends LitElement {
     expandedRoot: boolean;
     cdsMotion: string;
     protected expandedChange: EventEmitter<boolean>;
@@ -58,7 +57,10 @@ export declare class CdsNavigation extends LitElement implements Animatable {
      */
     expanded: boolean;
     i18n: {
-        [key: string]: string | undefined;
+        navigationElement: string;
+        navigationLabel: string;
+        navigationAbridgedText: string;
+        navigationUnabridgedText: string;
     };
     /**
      * The end slot that items can be projected into with slot="cds-navigation-end"
@@ -109,7 +111,7 @@ export declare class CdsNavigation extends LitElement implements Animatable {
     protected get startTemplate(): string | import("lit-html").TemplateResult<1>;
     protected get visibleChildren(): FocusableElement[];
     addStartEventListener(): void;
-    firstUpdated(props: PropertyValues): void;
+    firstUpdated(props: PropertyValues<this>): void;
     private blurItemKeys;
     private focusRootStart;
     private blurRootStart;

package/navigation/navigation.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{LitElement as i,html as e}from"lit";import{I18nService as a,isVisible as n,setAttributes as o,onKey as s,syncPropsForAllItems as r,syncProps as d,baseStyles as v,property as c,event as l,state as h,i18n as p,querySlot as u,querySlotAll as g,animate as m,reverseAnimation as f}from"@cds/core/internal";import y from"./navigation.element.scss.js";import{removeFocus as I,setFocus as A,visibleElement as b,getNextFocusElement as E,getPreviousFocusElement as S}from"./utils/index.js";import{AnimationNavigationOpenName as x}from"../internal/motion/animations/cds-navigation-open.js";const N="cds-navigation";let R=class extends i{constructor(){super(...arguments);this.expandedRoot=!1,this.cdsMotion="on",this.groupItem=!0,this.expanded=!1,this.i18n=a.keys.navigation}toggle(){this.expandedChange.emit(!this.expanded)}get currentActiveItem(){return this.visibleChildren.find((t=>t.id===this.ariaActiveDescendant))}get endTemplate(){return this.navigationEnd?e`<div class="navigation-end" cds-layout="vertical align:horizontal-stretch"><slot name="cds-navigation-end"></slot></div>`:""}get startTemplate(){let t;return t=this.rootNavigationStart?e`<div class="navigation-start" cds-layout="vertical align:horizontal-stretch"><slot @slotchange="${()=>this.addStartEventListener()}" name="navigation-start"></slot><cds-divider class="start-divider"></cds-divider></div>`:"",t}get visibleChildren(){return Array.from(this.allNavigationElements).filter((t=>n(t)))}addStartEventListener(){this.rootNavigationStart&&this.rootNavigationStart.addEventListener("click",this.toggle.bind(this))}firstUpdated(t){var i;super.firstUpdated(t),this.allNavigationElements.forEach((t=>{o(t,["tabindex","-1"])}));const e=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector("#item-container");null==e||e.addEventListener("focus",this.initItemKeys.bind(this)),null==e||e.addEventListener("keydown",this.handleItemKeys.bind(this)),null==e||e.addEventListener("blur",this.blurItemKeys.bind(this))}blurItemKeys(){this.currentActiveItem&&I(this.currentActiveItem)}focusRootStart(){this.rootNavigationStart&&A(this.rootNavigationStart)}blurRootStart(){this.rootNavigationStart&&I(this.rootNavigationStart)}initItemKeys(){if(this.currentActiveItem){const t=this.currentActiveItem?this.currentActiveItem:this.allNavigationElements[0];A(t),this.ariaActiveDescendant=t.id}else A(this.focusableElements[0]),this.ariaActiveDescendant=this.focusableElements[0].id}get focusableElements(){return Array.from(this.allNavigationElements).filter(b)}handleItemKeys(t){s("arrow-down",t,(()=>{if(this.currentActiveItem){I(this.currentActiveItem);const i=E(this.currentActiveItem,this.focusableElements);this.ariaActiveDescendant=i.id,A(i),t.preventDefault()}})),s("arrow-up",t,(()=>{if(this.currentActiveItem){I(this.currentActiveItem);const i=S(this.currentActiveItem,this.focusableElements);this.ariaActiveDescendant=i.id,A(i),t.preventDefault()}})),s("arrow-right",t,(()=>{var t;const i=null===(t=this.currentActiveItem)||void 0===t?void 0:t.closest("cds-navigation-group");!i||i.expanded||i.expandedChange.emit(!i.expanded)})),s("arrow-left",t,(()=>{var t,i,e;const a=null===(t=this.currentActiveItem)||void 0===t?void 0:t.closest("cds-navigation-group");if("CDS-NAVIGATION-ITEM"===(null===(i=this.currentActiveItem)||void 0===i?void 0:i.tagName)&&a){const t=null==a?void 0:a.querySelector("cds-navigation-start");return I(this.currentActiveItem),this.ariaActiveDescendant=null!==(e=null==t?void 0:t.id)&&void 0!==e?e:null,void A(t)}a&&a.expanded&&a.expandedChange.emit(!a.expanded)})),s("home",t,(()=>{if(this.currentActiveItem){I(this.currentActiveItem);const t=this.focusableElements[0];this.ariaActiveDescendant=t.id,A(t)}})),s("end",t,(()=>{if(this.currentActiveItem){I(this.currentActiveItem);const t=this.focusableElements[this.focusableElements.length-1];this.ariaActiveDescendant=t.id,A(t)}})),s("enter",t,(()=>{var t,i;(null===(t=this.currentActiveItem)||void 0===t?void 0:t.focusElement)&&(null===(i=this.currentActiveItem)||void 0===i||i.focusElement.click())})),s("space",t,(()=>{var t,i;(null===(t=this.currentActiveItem)||void 0===t?void 0:t.focusElement)&&(null===(i=this.currentActiveItem)||void 0===i||i.focusElement.click())}))}handleRootStartKeys(t){s("arrow-right",t,(()=>{this.expanded||this.toggle()})),s("arrow-left",t,(()=>{this.expanded&&this.toggle()}))}connectedCallback(){var t,i,e;super.connectedCallback(),this.role="list",null===(t=this.rootNavigationStart)||void 0===t||t.addEventListener("focus",this.focusRootStart.bind(this)),null===(i=this.rootNavigationStart)||void 0===i||i.addEventListener("blur",this.blurRootStart.bind(this)),null===(e=this.rootNavigationStart)||void 0===e||e.addEventListener("keydown",this.handleRootStartKeys.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.rootNavigationStart&&this.rootNavigationStart.removeEventListener("click",this.toggle.bind(this))}render(){return e`<div class="private-host" aria-label="${this.i18n.navigationLabel}" cds-layout="vertical wrap:none">${this.startTemplate}<slot name="cds-navigation-substart"></slot><nav class="navigation-body-wrapper"><div .ariaActiveDescendant="${this.ariaActiveDescendant}" tabindex="0" id="item-container"><div class="navigation-body" cds-layout="vertical wrap:none align:horizontal-stretch"><slot></slot></div></div></nav>${this.endTemplate}</div>`}updated(t){super.updated(t),t.has("expanded")&&(this.expandedRoot=this.expanded),this.updateChildrenProps()}updateChildrenProps(){this.navigationGroupItems&&r(Array.from(this.navigationGroupItems),this,{groupItem:!0}),this.navigationItemRefs&&r(Array.from(this.navigationItemRefs),this,{expanded:!0}),this.navigationStartRefs&&r(Array.from(this.navigationStartRefs),this,{expandedRoot:!0}),this.rootNavigationStart&&d(this.rootNavigationStart,this,{expanded:this.expanded}),this.rootNavigationItems.length>0&&r(Array.from(this.rootNavigationItems),this,{expanded:this.expanded}),this.navigationGroupRefs.length>0&&r(Array.from(this.navigationGroupRefs),this,{layout:!0})}static get styles(){return[v,y]}};t([c({type:String})],R.prototype,"cdsMotion",void 0),t([l()],R.prototype,"expandedChange",void 0),t([l()],R.prototype,"cdsMotionChange",void 0),t([h({type:Boolean})],R.prototype,"groupItem",void 0),t([c({type:Boolean})],R.prototype,"expanded",void 0),t([p()],R.prototype,"i18n",void 0),t([u('[slot="cds-navigation-end"]',{assign:"cds-navigation-end"})],R.prototype,"navigationEnd",void 0),t([g("cds-navigation-group > cds-navigation-start, cds-navigation-item:not([disabled])")],R.prototype,"allNavigationElements",void 0),t([g("cds-navigation-start")],R.prototype,"navigationStartRefs",void 0),t([g(":scope > cds-divider")],R.prototype,"rootDividers",void 0),t([g(":scope > cds-navigation-group")],R.prototype,"rootNavigationGroups",void 0),t([g(":scope > cds-navigation-item")],R.prototype,"rootNavigationItems",void 0),t([u(":scope > cds-navigation-start",{assign:"navigation-start"})],R.prototype,"rootNavigationStart",void 0),t([g(":scope > cds-navigation-group > cds-navigation-item")],R.prototype,"navigationGroupItems",void 0),t([g("cds-navigation-item")],R.prototype,"navigationItemRefs",void 0),t([g("cds-navigation-group")],R.prototype,"navigationGroupRefs",void 0),R=t([m({expanded:{true:x,false:f(x)}})],R);export{R as CdsNavigation,N as CdsNavigationTagName};
+import{__decorate as t}from"tslib";import{LitElement as e,html as i}from"lit";import{I18nService as a,isVisible as n,setAttributes as o,onKey as s,syncPropsForAllItems as r,syncProps as d,baseStyles as c,property as v,event as h,state as l,i18n as p,querySlot as g,querySlotAll as m,animate as u,reverseAnimation as f}from"@cds/core/internal";import y from"./navigation.element.scss.js";import{removeFocus as I,setFocus as A,visibleElement as b,getNextFocusElement as E,getPreviousFocusElement as S}from"./utils/utils.js";import{AnimationNavigationOpenName as x}from"../internal/motion/animations/cds-navigation-open.js";const N="cds-navigation";let R=class extends e{constructor(){super(...arguments);this.expandedRoot=!1,this.cdsMotion="on",this.groupItem=!0,this.expanded=!1,this.i18n=a.keys.navigation}toggle(){this.expandedChange.emit(!this.expanded)}get currentActiveItem(){return this.visibleChildren.find((t=>t.id===this.ariaActiveDescendant))}get endTemplate(){return this.navigationEnd?i`<div class="navigation-end" cds-layout="vertical align:horizontal-stretch"><slot name="cds-navigation-end"></slot></div>`:""}get startTemplate(){let t;return t=this.rootNavigationStart?i`<div class="navigation-start" cds-layout="vertical align:horizontal-stretch"><slot @slotchange="${()=>this.addStartEventListener()}" name="navigation-start"></slot><cds-divider class="start-divider"></cds-divider></div>`:"",t}get visibleChildren(){return Array.from(this.allNavigationElements).filter((t=>n(t)))}addStartEventListener(){this.rootNavigationStart&&this.rootNavigationStart.addEventListener("click",this.toggle.bind(this))}firstUpdated(t){super.firstUpdated(t),this.allNavigationElements.forEach((t=>{o(t,["tabindex","-1"])}));const e=this.shadowRoot?.querySelector("#item-container");e?.addEventListener("focus",this.initItemKeys.bind(this)),e?.addEventListener("keydown",this.handleItemKeys.bind(this)),e?.addEventListener("blur",this.blurItemKeys.bind(this))}blurItemKeys(){this.currentActiveItem&&I(this.currentActiveItem)}focusRootStart(){this.rootNavigationStart&&A(this.rootNavigationStart)}blurRootStart(){this.rootNavigationStart&&I(this.rootNavigationStart)}initItemKeys(){if(this.currentActiveItem){const t=this.currentActiveItem?this.currentActiveItem:this.allNavigationElements[0];A(t),this.ariaActiveDescendant=t.id}else A(this.focusableElements[0]),this.ariaActiveDescendant=this.focusableElements[0].id}get focusableElements(){return Array.from(this.allNavigationElements).filter(b)}handleItemKeys(t){s("arrow-down",t,(()=>{if(this.currentActiveItem){I(this.currentActiveItem);const e=E(this.currentActiveItem,this.focusableElements);this.ariaActiveDescendant=e.id,A(e),t.preventDefault()}})),s("arrow-up",t,(()=>{if(this.currentActiveItem){I(this.currentActiveItem);const e=S(this.currentActiveItem,this.focusableElements);this.ariaActiveDescendant=e.id,A(e),t.preventDefault()}})),s("arrow-right",t,(()=>{const t=this.currentActiveItem?.closest("cds-navigation-group");!t||t.expanded||t.expandedChange.emit(!t.expanded)})),s("arrow-left",t,(()=>{const t=this.currentActiveItem?.closest("cds-navigation-group");if("CDS-NAVIGATION-ITEM"===this.currentActiveItem?.tagName&&t){const e=t?.querySelector("cds-navigation-start");return I(this.currentActiveItem),this.ariaActiveDescendant=e?.id??null,void A(e)}t&&t.expanded&&t.expandedChange.emit(!t.expanded)})),s("home",t,(()=>{if(this.currentActiveItem){I(this.currentActiveItem);const t=this.focusableElements[0];this.ariaActiveDescendant=t.id,A(t)}})),s("end",t,(()=>{if(this.currentActiveItem){I(this.currentActiveItem);const t=this.focusableElements[this.focusableElements.length-1];this.ariaActiveDescendant=t.id,A(t)}})),s("enter",t,(()=>{this.currentActiveItem?.focusElement&&this.currentActiveItem?.focusElement.click()})),s("space",t,(()=>{this.currentActiveItem?.focusElement&&this.currentActiveItem?.focusElement.click()}))}handleRootStartKeys(t){s("arrow-right",t,(()=>{this.expanded||this.toggle()})),s("arrow-left",t,(()=>{this.expanded&&this.toggle()}))}connectedCallback(){super.connectedCallback(),this.role="list",this.rootNavigationStart?.addEventListener("focus",this.focusRootStart.bind(this)),this.rootNavigationStart?.addEventListener("blur",this.blurRootStart.bind(this)),this.rootNavigationStart?.addEventListener("keydown",this.handleRootStartKeys.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.rootNavigationStart&&this.rootNavigationStart.removeEventListener("click",this.toggle.bind(this))}render(){return i`<div class="private-host" aria-label="${this.i18n.navigationLabel}" cds-layout="vertical wrap:none">${this.startTemplate}<slot name="cds-navigation-substart"></slot><nav class="navigation-body-wrapper"><div .ariaActiveDescendant="${this.ariaActiveDescendant}" tabindex="0" id="item-container"><div class="navigation-body" cds-layout="vertical wrap:none align:horizontal-stretch"><slot></slot></div></div></nav>${this.endTemplate}</div>`}updated(t){super.updated(t),t.has("expanded")&&(this.expandedRoot=this.expanded),this.updateChildrenProps()}updateChildrenProps(){this.navigationGroupItems&&r(Array.from(this.navigationGroupItems),this,{groupItem:!0}),this.navigationItemRefs&&r(Array.from(this.navigationItemRefs),this,{expanded:!0}),this.navigationStartRefs&&r(Array.from(this.navigationStartRefs),this,{expandedRoot:!0}),this.rootNavigationStart&&d(this.rootNavigationStart,this,{expanded:this.expanded}),this.rootNavigationItems.length>0&&r(Array.from(this.rootNavigationItems),this,{expanded:this.expanded}),this.navigationGroupRefs.length>0&&r(Array.from(this.navigationGroupRefs),this,{layout:!0})}static get styles(){return[c,y]}};t([v({type:String})],R.prototype,"cdsMotion",void 0),t([h()],R.prototype,"expandedChange",void 0),t([h()],R.prototype,"cdsMotionChange",void 0),t([l({type:Boolean})],R.prototype,"groupItem",void 0),t([v({type:Boolean})],R.prototype,"expanded",void 0),t([p()],R.prototype,"i18n",void 0),t([g('[slot="cds-navigation-end"]',{assign:"cds-navigation-end"})],R.prototype,"navigationEnd",void 0),t([m("cds-navigation-group > cds-navigation-start, cds-navigation-item:not([disabled])")],R.prototype,"allNavigationElements",void 0),t([m("cds-navigation-start")],R.prototype,"navigationStartRefs",void 0),t([m(":scope > cds-divider")],R.prototype,"rootDividers",void 0),t([m(":scope > cds-navigation-group")],R.prototype,"rootNavigationGroups",void 0),t([m(":scope > cds-navigation-item")],R.prototype,"rootNavigationItems",void 0),t([g(":scope > cds-navigation-start",{assign:"navigation-start"})],R.prototype,"rootNavigationStart",void 0),t([m(":scope > cds-navigation-group > cds-navigation-item")],R.prototype,"navigationGroupItems",void 0),t([m("cds-navigation-item")],R.prototype,"navigationItemRefs",void 0),t([m("cds-navigation-group")],R.prototype,"navigationGroupRefs",void 0),R=t([u({expanded:{true:x,false:f(x)}})],R);export{R as CdsNavigation,N as CdsNavigationTagName};
 //# sourceMappingURL=navigation.element.js.map

package/navigation/navigation.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.element.js","sources":["../../../src/navigation/navigation.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { animate, baseStyles, event, i18n, I18nService, state, isVisible, onKey, property, querySlot, querySlotAll, reverseAnimation, setAttributes, syncProps, syncPropsForAllItems, } from '@cds/core/internal';\nimport styles from './navigation.element.scss';\nimport { getNextFocusElement, getPreviousFocusElement, removeFocus, setFocus, visibleElement, } from './utils/index.js';\nimport { AnimationNavigationOpenName } from '../internal/motion/animations/cds-navigation-open.js';\nexport const CdsNavigationTagName = 'cds-navigation';\n/**\n * ```typescript\n * import '@cds/core/navigation/register.js';\n * ```\n *\n * ```html\n *  <cds-navigation>\n *    <cds-navigation-item><a href=\"/home\">Home</cds-navigation-item>\n *    <cds-navigation-item><a href=\"/account\">Account</cds-navigation-item>\n *  </cds-navigation>\n * ```\n *\n * @beta\n * @element cds-navigation\n * @event expandedChange - notify when the user has clicked the navigation expand/collapse button\n * @cssprop --animation-duration\n * @cssprop --animation-easing\n * @cssprop --background\n * @cssprop --collapsed-width\n * @cssprop --expanded-width\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --letter-spacing\n * @cssprop --line-height\n * @cssprop --nested-padding\n * @cssprop --padding\n * @slot\n * @slot - cds-navigation-substart - project content below the navigation toggle button\n * @slot - cds-navigation-end - project content below the scrollable section\n */\nlet CdsNavigation = class CdsNavigation extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.expandedRoot = false;\n        this.cdsMotion = 'on';\n        /**\n         * This is used to sync down the information to this.navigationGroupItems\n         *\n         * @type { boolean }\n         * @protected\n         */\n        this.groupItem = true;\n        /**\n         *\n         * Vertical navigation elements can be either wide or narrow. Expanded indicates it should be wide.\n         * When navigation is wide cds-navigation-start button elements and cds-navigation-item a elements display\n         * text. When it is narrow they do not (consumer should provide an icon that stays visible).\n      \n         * @type {boolean}\n         */\n        this.expanded = false;\n        this.i18n = I18nService.keys.navigation;\n    }\n    toggle() {\n        this.expandedChange.emit(!this.expanded);\n    }\n    get currentActiveItem() {\n        return this.visibleChildren.find(c => c.id === this.ariaActiveDescendant);\n    }\n    get endTemplate() {\n        return this.navigationEnd\n            ? html `\n          <div class=\"navigation-end\" cds-layout=\"vertical align:horizontal-stretch\">\n            <slot name=\"cds-navigation-end\"></slot>\n          </div>\n        `\n            : '';\n    }\n    get startTemplate() {\n        let returnHTML;\n        this.rootNavigationStart\n            ? (returnHTML = html `\n          <div class=\"navigation-start\" cds-layout=\"vertical align:horizontal-stretch\">\n            <slot @slotchange=\"${() => this.addStartEventListener()}\" name=\"navigation-start\"></slot>\n            <cds-divider class=\"start-divider\"></cds-divider>\n          </div>\n        `)\n            : (returnHTML = '');\n        return returnHTML;\n    }\n    get visibleChildren() {\n        return Array.from(this.allNavigationElements).filter(n => isVisible(n));\n    }\n    addStartEventListener() {\n        // This is controlled by the slotchange event on the navigation-start slot\n        // Make sure we reattach the click handler for toggle if consumer changes the start element (e.g *ngIf)\n        if (this.rootNavigationStart) {\n            this.rootNavigationStart.addEventListener('click', this.toggle.bind(this));\n        }\n    }\n    firstUpdated(props) {\n        var _a;\n        super.firstUpdated(props);\n        // set all visible navigation elements to tabindex = -1\n        this.allNavigationElements.forEach(item => {\n            setAttributes(item, ['tabindex', '-1']);\n        });\n        const itemWrapper = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#item-container');\n        itemWrapper === null || itemWrapper === void 0 ? void 0 : itemWrapper.addEventListener('focus', this.initItemKeys.bind(this));\n        itemWrapper === null || itemWrapper === void 0 ? void 0 : itemWrapper.addEventListener('keydown', this.handleItemKeys.bind(this));\n        itemWrapper === null || itemWrapper === void 0 ? void 0 : itemWrapper.addEventListener('blur', this.blurItemKeys.bind(this));\n    }\n    blurItemKeys() {\n        if (this.currentActiveItem) {\n            removeFocus(this.currentActiveItem);\n        }\n    }\n    focusRootStart() {\n        if (this.rootNavigationStart) {\n            setFocus(this.rootNavigationStart);\n        }\n    }\n    blurRootStart() {\n        if (this.rootNavigationStart) {\n            removeFocus(this.rootNavigationStart);\n        }\n    }\n    initItemKeys() {\n        if (!this.currentActiveItem) {\n            setFocus(this.focusableElements[0]);\n            this.ariaActiveDescendant = this.focusableElements[0].id;\n        }\n        else {\n            const focusElement = this.currentActiveItem ? this.currentActiveItem : this.allNavigationElements[0];\n            setFocus(focusElement);\n            this.ariaActiveDescendant = focusElement.id;\n        }\n    }\n    get focusableElements() {\n        return Array.from(this.allNavigationElements).filter(visibleElement);\n    }\n    handleItemKeys(event) {\n        onKey('arrow-down', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const next = getNextFocusElement(this.currentActiveItem, this.focusableElements);\n                this.ariaActiveDescendant = next.id;\n                setFocus(next);\n                event.preventDefault();\n            }\n        });\n        onKey('arrow-up', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const previous = getPreviousFocusElement(this.currentActiveItem, this.focusableElements);\n                this.ariaActiveDescendant = previous.id;\n                setFocus(previous);\n                event.preventDefault();\n            }\n        });\n        onKey('arrow-right', event, () => {\n            var _a;\n            const groupParent = (_a = this.currentActiveItem) === null || _a === void 0 ? void 0 : _a.closest('cds-navigation-group');\n            if (groupParent && !groupParent.expanded) {\n                groupParent.expandedChange.emit(!groupParent.expanded);\n                return;\n            }\n        });\n        onKey('arrow-left', event, () => {\n            var _a, _b, _c;\n            const groupParent = (_a = this.currentActiveItem) === null || _a === void 0 ? void 0 : _a.closest('cds-navigation-group');\n            if (((_b = this.currentActiveItem) === null || _b === void 0 ? void 0 : _b.tagName) === 'CDS-NAVIGATION-ITEM' && !!groupParent) {\n                const groupStartElement = groupParent === null || groupParent === void 0 ? void 0 : groupParent.querySelector('cds-navigation-start');\n                removeFocus(this.currentActiveItem);\n                this.ariaActiveDescendant = (_c = groupStartElement === null || groupStartElement === void 0 ? void 0 : groupStartElement.id) !== null && _c !== void 0 ? _c : null;\n                setFocus(groupStartElement);\n                return;\n            }\n            if (groupParent && groupParent.expanded) {\n                groupParent.expandedChange.emit(!groupParent.expanded);\n                return;\n            }\n        });\n        onKey('home', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const home = this.focusableElements[0];\n                this.ariaActiveDescendant = home.id;\n                setFocus(home);\n            }\n        });\n        onKey('end', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const end = this.focusableElements[this.focusableElements.length - 1];\n                this.ariaActiveDescendant = end.id;\n                setFocus(end);\n            }\n        });\n        onKey('enter', event, () => {\n            var _a, _b;\n            // focusElement is either an Anchor or a button and we want to click it here\n            if ((_a = this.currentActiveItem) === null || _a === void 0 ? void 0 : _a.focusElement) {\n                (_b = this.currentActiveItem) === null || _b === void 0 ? void 0 : _b.focusElement.click();\n            }\n        });\n        onKey('space', event, () => {\n            var _a, _b;\n            // focusElement is either an Anchor or a button and we want to click it here\n            if ((_a = this.currentActiveItem) === null || _a === void 0 ? void 0 : _a.focusElement) {\n                (_b = this.currentActiveItem) === null || _b === void 0 ? void 0 : _b.focusElement.click();\n            }\n        });\n    }\n    handleRootStartKeys(event) {\n        onKey('arrow-right', event, () => {\n            if (!this.expanded) {\n                this.toggle();\n                return;\n            }\n        });\n        onKey('arrow-left', event, () => {\n            if (this.expanded) {\n                this.toggle();\n                return;\n            }\n        });\n    }\n    connectedCallback() {\n        var _a, _b, _c;\n        super.connectedCallback();\n        this.role = 'list';\n        (_a = this.rootNavigationStart) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', this.focusRootStart.bind(this));\n        (_b = this.rootNavigationStart) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', this.blurRootStart.bind(this));\n        (_c = this.rootNavigationStart) === null || _c === void 0 ? void 0 : _c.addEventListener('keydown', this.handleRootStartKeys.bind(this));\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        if (this.rootNavigationStart) {\n            this.rootNavigationStart.removeEventListener('click', this.toggle.bind(this));\n        }\n    }\n    render() {\n        return html `<div class=\"private-host\" aria-label=\"${this.i18n.navigationLabel}\" cds-layout=\"vertical wrap:none\">\n      ${this.startTemplate}\n      <slot name=\"cds-navigation-substart\"></slot>\n      <nav class=\"navigation-body-wrapper\">\n        <div .ariaActiveDescendant=${this.ariaActiveDescendant} tabindex=\"0\" id=\"item-container\">\n          <div class=\"navigation-body\" cds-layout=\"vertical wrap:none align:horizontal-stretch\">\n            <slot></slot>\n          </div>\n        </div>\n      </nav>\n      ${this.endTemplate}\n    </div>`;\n    }\n    updated(props) {\n        super.updated(props);\n        if (props.has('expanded')) {\n            this.expandedRoot = this.expanded;\n        }\n        this.updateChildrenProps();\n    }\n    updateChildrenProps() {\n        if (this.navigationGroupItems) {\n            syncPropsForAllItems(Array.from(this.navigationGroupItems), this, { groupItem: true });\n        }\n        if (this.navigationItemRefs) {\n            syncPropsForAllItems(Array.from(this.navigationItemRefs), this, {\n                expanded: true,\n            });\n        }\n        if (this.navigationStartRefs) {\n            syncPropsForAllItems(Array.from(this.navigationStartRefs), this, {\n                expandedRoot: true,\n            });\n        }\n        if (this.rootNavigationStart) {\n            syncProps(this.rootNavigationStart, this, {\n                expanded: this.expanded,\n            });\n        }\n        if (this.rootNavigationItems.length > 0) {\n            syncPropsForAllItems(Array.from(this.rootNavigationItems), this, {\n                expanded: this.expanded,\n            });\n        }\n        if (this.navigationGroupRefs.length > 0) {\n            syncPropsForAllItems(Array.from(this.navigationGroupRefs), this, {\n                layout: true,\n            });\n        }\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n};\n__decorate([\n    property({ type: String })\n], CdsNavigation.prototype, \"cdsMotion\", void 0);\n__decorate([\n    event()\n], CdsNavigation.prototype, \"expandedChange\", void 0);\n__decorate([\n    event()\n], CdsNavigation.prototype, \"cdsMotionChange\", void 0);\n__decorate([\n    state({ type: Boolean })\n], CdsNavigation.prototype, \"groupItem\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsNavigation.prototype, \"expanded\", void 0);\n__decorate([\n    i18n()\n], CdsNavigation.prototype, \"i18n\", void 0);\n__decorate([\n    querySlot('[slot=\"cds-navigation-end\"]', { assign: 'cds-navigation-end' })\n], CdsNavigation.prototype, \"navigationEnd\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-group > cds-navigation-start, cds-navigation-item:not([disabled])')\n], CdsNavigation.prototype, \"allNavigationElements\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-start')\n], CdsNavigation.prototype, \"navigationStartRefs\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-divider')\n], CdsNavigation.prototype, \"rootDividers\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-group')\n], CdsNavigation.prototype, \"rootNavigationGroups\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-item')\n], CdsNavigation.prototype, \"rootNavigationItems\", void 0);\n__decorate([\n    querySlot(':scope > cds-navigation-start', { assign: 'navigation-start' })\n], CdsNavigation.prototype, \"rootNavigationStart\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-group > cds-navigation-item')\n], CdsNavigation.prototype, \"navigationGroupItems\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-item')\n], CdsNavigation.prototype, \"navigationItemRefs\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-group')\n], CdsNavigation.prototype, \"navigationGroupRefs\", void 0);\nCdsNavigation = __decorate([\n    animate({\n        expanded: {\n            true: AnimationNavigationOpenName,\n            false: reverseAnimation(AnimationNavigationOpenName),\n        },\n    })\n], CdsNavigation);\nexport { CdsNavigation };\n"],"names":["CdsNavigationTagName","CdsNavigation","LitElement","constructor","super","this","expandedRoot","cdsMotion","groupItem","expanded","i18n","I18nService","keys","navigation","toggle","expandedChange","emit","currentActiveItem","visibleChildren","find","c","id","ariaActiveDescendant","endTemplate","navigationEnd","html","startTemplate","returnHTML","rootNavigationStart","addStartEventListener","Array","from","allNavigationElements","filter","n","isVisible","addEventListener","bind","firstUpdated","props","_a","forEach","item","setAttributes","itemWrapper","shadowRoot","querySelector","initItemKeys","handleItemKeys","blurItemKeys","removeFocus","focusRootStart","setFocus","blurRootStart","focusElement","focusableElements","visibleElement","event","onKey","next","getNextFocusElement","preventDefault","previous","getPreviousFocusElement","groupParent","closest","_b","_c","tagName","groupStartElement","home","end","length","click","handleRootStartKeys","connectedCallback","role","disconnectedCallback","removeEventListener","render","navigationLabel","updated","has","updateChildrenProps","navigationGroupItems","syncPropsForAllItems","navigationItemRefs","navigationStartRefs","syncProps","rootNavigationItems","navigationGroupRefs","layout","styles","baseStyles","__decorate","property","type","String","prototype","state","Boolean","querySlot","assign","querySlotAll","animate","true","AnimationNavigationOpenName","false","reverseAnimation"],"mappings":"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"}
+{"version":3,"file":"navigation.element.js","sources":["../../../src/navigation/navigation.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html, LitElement } from 'lit';\nimport { animate, baseStyles, event, i18n, I18nService, state, isVisible, onKey, property, querySlot, querySlotAll, reverseAnimation, setAttributes, syncProps, syncPropsForAllItems, } from '@cds/core/internal';\nimport styles from './navigation.element.scss';\nimport { getNextFocusElement, getPreviousFocusElement, removeFocus, setFocus, visibleElement, } from './utils/utils.js';\nimport { AnimationNavigationOpenName } from '../internal/motion/animations/cds-navigation-open.js';\nexport const CdsNavigationTagName = 'cds-navigation';\n/**\n * ```typescript\n * import '@cds/core/navigation/register.js';\n * ```\n *\n * ```html\n *  <cds-navigation>\n *    <cds-navigation-item><a href=\"/home\">Home</cds-navigation-item>\n *    <cds-navigation-item><a href=\"/account\">Account</cds-navigation-item>\n *  </cds-navigation>\n * ```\n *\n * @element cds-navigation\n * @event expandedChange - notify when the user has clicked the navigation expand/collapse button\n * @cssprop --animation-duration\n * @cssprop --animation-easing\n * @cssprop --background\n * @cssprop --collapsed-width\n * @cssprop --expanded-width\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --letter-spacing\n * @cssprop --line-height\n * @cssprop --nested-padding\n * @cssprop --padding\n * @slot\n * @slot cds-navigation-substart - project content below the navigation toggle button\n * @slot cds-navigation-end - project content below the scrollable section\n */\nlet CdsNavigation = class CdsNavigation extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.expandedRoot = false;\n        this.cdsMotion = 'on';\n        /**\n         * This is used to sync down the information to this.navigationGroupItems\n         *\n         * @type { boolean }\n         * @protected\n         */\n        this.groupItem = true;\n        /**\n         *\n         * Vertical navigation elements can be either wide or narrow. Expanded indicates it should be wide.\n         * When navigation is wide cds-navigation-start button elements and cds-navigation-item a elements display\n         * text. When it is narrow they do not (consumer should provide an icon that stays visible).\n      \n         * @type {boolean}\n         */\n        this.expanded = false;\n        this.i18n = I18nService.keys.navigation;\n    }\n    toggle() {\n        this.expandedChange.emit(!this.expanded);\n    }\n    get currentActiveItem() {\n        return this.visibleChildren.find(c => c.id === this.ariaActiveDescendant);\n    }\n    get endTemplate() {\n        return this.navigationEnd\n            ? html `\n          <div class=\"navigation-end\" cds-layout=\"vertical align:horizontal-stretch\">\n            <slot name=\"cds-navigation-end\"></slot>\n          </div>\n        `\n            : '';\n    }\n    get startTemplate() {\n        let returnHTML;\n        this.rootNavigationStart\n            ? (returnHTML = html `\n          <div class=\"navigation-start\" cds-layout=\"vertical align:horizontal-stretch\">\n            <slot @slotchange=\"${() => this.addStartEventListener()}\" name=\"navigation-start\"></slot>\n            <cds-divider class=\"start-divider\"></cds-divider>\n          </div>\n        `)\n            : (returnHTML = '');\n        return returnHTML;\n    }\n    get visibleChildren() {\n        return Array.from(this.allNavigationElements).filter(n => isVisible(n));\n    }\n    addStartEventListener() {\n        // This is controlled by the slotchange event on the navigation-start slot\n        // Make sure we reattach the click handler for toggle if consumer changes the start element (e.g *ngIf)\n        if (this.rootNavigationStart) {\n            this.rootNavigationStart.addEventListener('click', this.toggle.bind(this));\n        }\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        // set all visible navigation elements to tabindex = -1\n        this.allNavigationElements.forEach(item => {\n            setAttributes(item, ['tabindex', '-1']);\n        });\n        const itemWrapper = this.shadowRoot?.querySelector('#item-container');\n        itemWrapper?.addEventListener('focus', this.initItemKeys.bind(this));\n        itemWrapper?.addEventListener('keydown', this.handleItemKeys.bind(this));\n        itemWrapper?.addEventListener('blur', this.blurItemKeys.bind(this));\n    }\n    blurItemKeys() {\n        if (this.currentActiveItem) {\n            removeFocus(this.currentActiveItem);\n        }\n    }\n    focusRootStart() {\n        if (this.rootNavigationStart) {\n            setFocus(this.rootNavigationStart);\n        }\n    }\n    blurRootStart() {\n        if (this.rootNavigationStart) {\n            removeFocus(this.rootNavigationStart);\n        }\n    }\n    initItemKeys() {\n        if (!this.currentActiveItem) {\n            setFocus(this.focusableElements[0]);\n            this.ariaActiveDescendant = this.focusableElements[0].id;\n        }\n        else {\n            const focusElement = this.currentActiveItem ? this.currentActiveItem : this.allNavigationElements[0];\n            setFocus(focusElement);\n            this.ariaActiveDescendant = focusElement.id;\n        }\n    }\n    get focusableElements() {\n        return Array.from(this.allNavigationElements).filter(visibleElement);\n    }\n    handleItemKeys(event) {\n        onKey('arrow-down', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const next = getNextFocusElement(this.currentActiveItem, this.focusableElements);\n                this.ariaActiveDescendant = next.id;\n                setFocus(next);\n                event.preventDefault();\n            }\n        });\n        onKey('arrow-up', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const previous = getPreviousFocusElement(this.currentActiveItem, this.focusableElements);\n                this.ariaActiveDescendant = previous.id;\n                setFocus(previous);\n                event.preventDefault();\n            }\n        });\n        onKey('arrow-right', event, () => {\n            const groupParent = this.currentActiveItem?.closest('cds-navigation-group');\n            if (groupParent && !groupParent.expanded) {\n                groupParent.expandedChange.emit(!groupParent.expanded);\n                return;\n            }\n        });\n        onKey('arrow-left', event, () => {\n            const groupParent = this.currentActiveItem?.closest('cds-navigation-group');\n            if (this.currentActiveItem?.tagName === 'CDS-NAVIGATION-ITEM' && !!groupParent) {\n                const groupStartElement = groupParent?.querySelector('cds-navigation-start');\n                removeFocus(this.currentActiveItem);\n                this.ariaActiveDescendant = groupStartElement?.id ?? null;\n                setFocus(groupStartElement);\n                return;\n            }\n            if (groupParent && groupParent.expanded) {\n                groupParent.expandedChange.emit(!groupParent.expanded);\n                return;\n            }\n        });\n        onKey('home', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const home = this.focusableElements[0];\n                this.ariaActiveDescendant = home.id;\n                setFocus(home);\n            }\n        });\n        onKey('end', event, () => {\n            if (this.currentActiveItem) {\n                removeFocus(this.currentActiveItem);\n                const end = this.focusableElements[this.focusableElements.length - 1];\n                this.ariaActiveDescendant = end.id;\n                setFocus(end);\n            }\n        });\n        onKey('enter', event, () => {\n            // focusElement is either an Anchor or a button and we want to click it here\n            if (this.currentActiveItem?.focusElement) {\n                this.currentActiveItem?.focusElement.click();\n            }\n        });\n        onKey('space', event, () => {\n            // focusElement is either an Anchor or a button and we want to click it here\n            if (this.currentActiveItem?.focusElement) {\n                this.currentActiveItem?.focusElement.click();\n            }\n        });\n    }\n    handleRootStartKeys(event) {\n        onKey('arrow-right', event, () => {\n            if (!this.expanded) {\n                this.toggle();\n                return;\n            }\n        });\n        onKey('arrow-left', event, () => {\n            if (this.expanded) {\n                this.toggle();\n                return;\n            }\n        });\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.role = 'list';\n        this.rootNavigationStart?.addEventListener('focus', this.focusRootStart.bind(this));\n        this.rootNavigationStart?.addEventListener('blur', this.blurRootStart.bind(this));\n        this.rootNavigationStart?.addEventListener('keydown', this.handleRootStartKeys.bind(this));\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        if (this.rootNavigationStart) {\n            this.rootNavigationStart.removeEventListener('click', this.toggle.bind(this));\n        }\n    }\n    render() {\n        return html `<div class=\"private-host\" aria-label=\"${this.i18n.navigationLabel}\" cds-layout=\"vertical wrap:none\">\n      ${this.startTemplate}\n      <slot name=\"cds-navigation-substart\"></slot>\n      <nav class=\"navigation-body-wrapper\">\n        <div .ariaActiveDescendant=${this.ariaActiveDescendant} tabindex=\"0\" id=\"item-container\">\n          <div class=\"navigation-body\" cds-layout=\"vertical wrap:none align:horizontal-stretch\">\n            <slot></slot>\n          </div>\n        </div>\n      </nav>\n      ${this.endTemplate}\n    </div>`;\n    }\n    updated(props) {\n        super.updated(props);\n        if (props.has('expanded')) {\n            this.expandedRoot = this.expanded;\n        }\n        this.updateChildrenProps();\n    }\n    updateChildrenProps() {\n        if (this.navigationGroupItems) {\n            syncPropsForAllItems(Array.from(this.navigationGroupItems), this, { groupItem: true });\n        }\n        if (this.navigationItemRefs) {\n            syncPropsForAllItems(Array.from(this.navigationItemRefs), this, {\n                expanded: true,\n            });\n        }\n        if (this.navigationStartRefs) {\n            syncPropsForAllItems(Array.from(this.navigationStartRefs), this, {\n                expandedRoot: true,\n            });\n        }\n        if (this.rootNavigationStart) {\n            syncProps(this.rootNavigationStart, this, {\n                expanded: this.expanded,\n            });\n        }\n        if (this.rootNavigationItems.length > 0) {\n            syncPropsForAllItems(Array.from(this.rootNavigationItems), this, {\n                expanded: this.expanded,\n            });\n        }\n        if (this.navigationGroupRefs.length > 0) {\n            syncPropsForAllItems(Array.from(this.navigationGroupRefs), this, {\n                layout: true,\n            });\n        }\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n};\n__decorate([\n    property({ type: String })\n], CdsNavigation.prototype, \"cdsMotion\", void 0);\n__decorate([\n    event()\n], CdsNavigation.prototype, \"expandedChange\", void 0);\n__decorate([\n    event()\n], CdsNavigation.prototype, \"cdsMotionChange\", void 0);\n__decorate([\n    state({ type: Boolean })\n], CdsNavigation.prototype, \"groupItem\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsNavigation.prototype, \"expanded\", void 0);\n__decorate([\n    i18n()\n], CdsNavigation.prototype, \"i18n\", void 0);\n__decorate([\n    querySlot('[slot=\"cds-navigation-end\"]', { assign: 'cds-navigation-end' })\n], CdsNavigation.prototype, \"navigationEnd\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-group > cds-navigation-start, cds-navigation-item:not([disabled])')\n], CdsNavigation.prototype, \"allNavigationElements\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-start')\n], CdsNavigation.prototype, \"navigationStartRefs\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-divider')\n], CdsNavigation.prototype, \"rootDividers\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-group')\n], CdsNavigation.prototype, \"rootNavigationGroups\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-item')\n], CdsNavigation.prototype, \"rootNavigationItems\", void 0);\n__decorate([\n    querySlot(':scope > cds-navigation-start', { assign: 'navigation-start' })\n], CdsNavigation.prototype, \"rootNavigationStart\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-group > cds-navigation-item')\n], CdsNavigation.prototype, \"navigationGroupItems\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-item')\n], CdsNavigation.prototype, \"navigationItemRefs\", void 0);\n__decorate([\n    querySlotAll('cds-navigation-group')\n], CdsNavigation.prototype, \"navigationGroupRefs\", void 0);\nCdsNavigation = __decorate([\n    animate({\n        expanded: {\n            true: AnimationNavigationOpenName,\n            false: reverseAnimation(AnimationNavigationOpenName),\n        },\n    })\n], CdsNavigation);\nexport { CdsNavigation };\n"],"names":["CdsNavigationTagName","CdsNavigation","LitElement","constructor","super","this","expandedRoot","cdsMotion","groupItem","expanded","i18n","I18nService","keys","navigation","toggle","expandedChange","emit","currentActiveItem","visibleChildren","find","c","id","ariaActiveDescendant","endTemplate","navigationEnd","html","startTemplate","returnHTML","rootNavigationStart","addStartEventListener","Array","from","allNavigationElements","filter","n","isVisible","addEventListener","bind","firstUpdated","props","forEach","item","setAttributes","itemWrapper","shadowRoot","querySelector","initItemKeys","handleItemKeys","blurItemKeys","removeFocus","focusRootStart","setFocus","blurRootStart","focusElement","focusableElements","visibleElement","event","onKey","next","getNextFocusElement","preventDefault","previous","getPreviousFocusElement","groupParent","closest","tagName","groupStartElement","home","end","length","click","handleRootStartKeys","connectedCallback","role","disconnectedCallback","removeEventListener","render","navigationLabel","updated","has","updateChildrenProps","navigationGroupItems","syncPropsForAllItems","navigationItemRefs","navigationStartRefs","syncProps","rootNavigationItems","navigationGroupRefs","layout","styles","baseStyles","__decorate","property","type","String","prototype","state","Boolean","querySlot","assign","querySlotAll","animate","true","AnimationNavigationOpenName","false","reverseAnimation"],"mappings":"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"}

package/navigation/navigation.element.scss.js

@@ -1,2 +1,2 @@
-import{css as a}from"lit";var o=a`:host{--animation-duration:var(--cds-global-animation-duration-secondary, 0.3s);--animation-easing:var(--cds-global-animation-easing-primary, cubic-bezier(0, 0.99, 0, 0.99));--background:var(--cds-alias-object-container-background, var(--cds-global-color-white, white));--color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--collapsed-width:var(--cds-global-layout-space-xl, calc(48 / var(--cds-global-base, 20) * 1rem));--expanded-width:calc(var(--cds-global-space-6, calc(12 / var(--cds-global-base, 20) * 1rem)) * 20);--line-height:var(--cds-global-space-11, calc(36 / var(--cds-global-base, 20) * 1rem));--font-size:var(--cds-global-typography-font-size-4, calc(14 / var(--cds-global-base, 20) * 1rem));--font-weight:var(--cds-global-typography-font-weight-regular, 400);--letter-spacing:var(--cds-global-typography-body-letter-spacing, -0.014286em);--nested-padding:var(--cds-global-space-4, calc(6 / var(--cds-global-base, 20) * 1rem));--padding:0 var(--cds-global-space-4, calc(6 / var(--cds-global-base, 20) * 1rem));height:inherit}:host(:focus){outline:0!important}:host([expanded]) .private-host{width:var(--expanded-width);min-width:var(--expanded-width)}:host([cds-motion=off]){width:var(--collapsed-width)}:host([cds-motion=off][expanded]){width:var(--expanded-width)}:host([cds-motion][_cds-animation-status=ready]:not([cds-motion=off])){width:var(--collapsed-width)}:host([cds-motion][expanded][_cds-animation-status=ready]:not([cds-motion=off])){width:var(--expanded-width);transform:none}.private-host{color:var(--color);background:var(--background);height:100%;width:var(--collapsed-width);min-width:var(--collapsed-width)}.navigation-body{height:100%}.navigation-body-wrapper{height:100%;width:100%;overflow:auto;outline:0}#item-container{outline:0;height:100%}::slotted([slot=cds-navigation-substart]){width:100%}`;export{o as default};
+import{css as a}from"lit";var o=a`:host{--animation-duration:var(--cds-global-animation-duration-secondary, 0.3s);--animation-easing:var(--cds-global-animation-easing-primary, cubic-bezier(0, 0.99, 0, 0.99));--background:var(--cds-alias-object-container-background, var(--cds-global-color-white, white));--color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--collapsed-width:var(--cds-global-layout-space-xxl, 3rem);--expanded-width:calc(var(--cds-global-space-6, 0.75rem) * 20);--line-height:var(--cds-global-space-11, 2.25rem);--font-size:var(--cds-global-typography-font-size-4, 0.875rem);--font-weight:var(--cds-global-typography-font-weight-regular, 400);--letter-spacing:var(--cds-global-typography-body-letter-spacing, -0.014286em);--nested-padding:var(--cds-global-space-4, 0.375rem);--padding:0 var(--cds-global-space-4, 0.375rem);height:inherit}:host(:focus){outline:0!important}:host([expanded]) .private-host{width:var(--expanded-width);min-width:var(--expanded-width)}:host([cds-motion=off]){width:var(--collapsed-width)}:host([cds-motion=off][expanded]){width:var(--expanded-width)}:host([cds-motion][_cds-animation-status=ready]:not([cds-motion=off])){width:var(--collapsed-width)}:host([cds-motion][expanded][_cds-animation-status=ready]:not([cds-motion=off])){width:var(--expanded-width);transform:none}.private-host{color:var(--color);background:var(--background);height:100%;width:var(--collapsed-width);min-width:var(--collapsed-width)}.navigation-body{height:100%}.navigation-body-wrapper{height:100%;width:100%;overflow:auto;outline:0}#item-container{outline:0;height:100%}::slotted([slot=cds-navigation-substart]){width:100%}`;export{o as default};
 //# sourceMappingURL=navigation.element.scss.js.map

package/navigation/utils/utils.js

@@ -0,0 +1,2 @@
+import{setOrRemoveAttribute as t}from"@cds/core/internal";const n="cds-navigation-sr-text",e="vertical";function r(t,n){const e=n.indexOf(t);return n[e+1]?n[e+1]:n[0]}function o(t,n){const e=n.indexOf(t);return n[e-1]?n[e-1]:n[n.length-1]}function a(t){return t.isGroupStart?t.expanded?"down":"right":t.expandedRoot?"left":"right"}function c(n,e){const r=n.querySelector("span");r&&t(r,["cds-layout","display:screen-reader-only"],(()=>!e))}function s(t){t.hasFocus=!1}function i(t){t.hasFocus=!0,t.scrollIntoView()}function u(t){const n=t?.tagName,e=t?.parentElement?.parentElement;switch(n){case"CDS-NAVIGATION-ITEM":return t.hasAttribute("_expanded-group");case"CDS-NAVIGATION-START":return!("CDS-NAVIGATION-GROUP"===e?.tagName&&!e?.hasAttribute("expanded"));default:return!1}}export{e as DEFAULT_NAVIGATION_LAYOUT,n as NAVIGATION_TEXT_WRAPPER,r as getNextFocusElement,o as getPreviousFocusElement,a as getToggleIconDirection,c as manageScreenReaderElements,s as removeFocus,i as setFocus,u as visibleElement};
+//# sourceMappingURL=utils.js.map

package/navigation/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/navigation/utils/utils.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { setOrRemoveAttribute } from '@cds/core/internal';\nexport const NAVIGATION_TEXT_WRAPPER = 'cds-navigation-sr-text';\nexport const DEFAULT_NAVIGATION_LAYOUT = 'vertical';\nexport function getNextFocusElement(current, elements) {\n    const idx = elements.indexOf(current);\n    return elements[idx + 1] ? elements[idx + 1] : elements[0];\n}\nexport function getPreviousFocusElement(current, elements) {\n    const idx = elements.indexOf(current);\n    return elements[idx - 1] ? elements[idx - 1] : elements[elements.length - 1];\n}\nexport function getToggleIconDirection(element) {\n    if (element.isGroupStart) {\n        return element.expanded ? 'down' : 'right';\n    }\n    else {\n        return element.expandedRoot ? 'left' : 'right';\n    }\n}\nexport function manageScreenReaderElements(element, expandedRoot) {\n    const span = element.querySelector('span');\n    if (span) {\n        setOrRemoveAttribute(span, ['cds-layout', 'display:screen-reader-only'], () => {\n            return !expandedRoot;\n        });\n    }\n}\nexport function removeFocus(element) {\n    element.hasFocus = false;\n}\nexport function setFocus(element) {\n    element.hasFocus = true;\n    element.scrollIntoView(); // Bring elements that are hidden by overflow into viewport\n}\nexport function visibleElement(element) {\n    const elementType = element?.tagName;\n    const grandparent = element?.parentElement?.parentElement;\n    switch (elementType) {\n        case 'CDS-NAVIGATION-ITEM':\n            return element.hasAttribute('_expanded-group');\n        case 'CDS-NAVIGATION-START':\n            return !(grandparent?.tagName === 'CDS-NAVIGATION-GROUP' && !grandparent?.hasAttribute('expanded'));\n        default:\n            return false;\n    }\n}\n"],"names":["NAVIGATION_TEXT_WRAPPER","DEFAULT_NAVIGATION_LAYOUT","getNextFocusElement","current","elements","idx","indexOf","getPreviousFocusElement","length","getToggleIconDirection","element","isGroupStart","expanded","expandedRoot","manageScreenReaderElements","span","querySelector","setOrRemoveAttribute","removeFocus","hasFocus","setFocus","scrollIntoView","visibleElement","elementType","tagName","grandparent","parentElement","hasAttribute"],"mappings":"0DAMY,MAACA,EAA0B,yBAC1BC,EAA4B,WAClC,SAASC,EAAoBC,EAASC,GACzC,MAAMC,EAAMD,EAASE,QAAQH,GAC7B,OAAOC,EAASC,EAAM,GAAKD,EAASC,EAAM,GAAKD,EAAS,GAErD,SAASG,EAAwBJ,EAASC,GAC7C,MAAMC,EAAMD,EAASE,QAAQH,GAC7B,OAAOC,EAASC,EAAM,GAAKD,EAASC,EAAM,GAAKD,EAASA,EAASI,OAAS,GAEvE,SAASC,EAAuBC,GACnC,OAAIA,EAAQC,aACDD,EAAQE,SAAW,OAAS,QAG5BF,EAAQG,aAAe,OAAS,QAGxC,SAASC,EAA2BJ,EAASG,GAChD,MAAME,EAAOL,EAAQM,cAAc,QAC/BD,GACAE,EAAqBF,EAAM,CAAC,aAAc,+BAA+B,KAC7DF,IAIb,SAASK,EAAYR,GACxBA,EAAQS,UAAW,EAEhB,SAASC,EAASV,GACrBA,EAAQS,UAAW,EACnBT,EAAQW,iBAEL,SAASC,EAAeZ,GAC3B,MAAMa,EAAcb,GAASc,QACvBC,EAAcf,GAASgB,eAAeA,cAC5C,OAAQH,GACJ,IAAK,sBACD,OAAOb,EAAQiB,aAAa,mBAChC,IAAK,uBACD,QAAkC,yBAAzBF,GAAaD,UAAuCC,GAAaE,aAAa,aAC3F,QACI,OAAO"}

package/package.json

@@ -32,7 +32,6 @@
   },
   "optionalDependencies": {
     "@cds/city": "^1.1.0",
-    "@types/resize-observer-browser": "^0.1.5",
     "modern-normalize": "1.1.0"
   },
   "sideEffects": [
@@ -40,19 +39,28 @@
     "./alert/register.js",
     "./badge/register.js",
     "./breadcrumb/register.js",
+    "./button-action/register.js",
+    "./button-expand/register.js",
+    "./button-handle/register.js",
+    "./button-inline/register.js",
+    "./button-sort/register.js",
     "./button/register.js",
     "./card/register.js",
     "./checkbox/register.js",
     "./datalist/register.js",
     "./date/register.js",
     "./divider/register.js",
+    "./dropdown/register.js",
     "./file/register.js",
     "./forms/register.js",
+    "./grid/register.js",
     "./icon/register.js",
     "./input/register.js",
     "./internal-components/close-button/register.js",
     "./internal-components/overlay/register.js",
     "./internal-components/panel/register.js",
+    "./internal-components/popup/register.js",
+    "./internal-components/split-handle/register.js",
     "./internal-components/visual-checkbox/register.js",
     "./modal/register.js",
     "./navigation/register.js",
@@ -65,6 +73,7 @@
     "./select/register.js",
     "./selection-panels/checkbox/register.js",
     "./selection-panels/radio/register.js",
+    "./signpost/register.js",
     "./tag/register.js",
     "./test-dropdown/register.js",
     "./textarea/register.js",
@@ -72,6 +81,7 @@
     "./toggle/register.js",
     "./tree-view/register.js",
     "./polyfills/aria-reflect.js",
+    "./polyfills/at.js",
     "./polyfills/index.js"
   ],
   "exports": {
@@ -81,27 +91,34 @@
     "./alert": "./alert/index.js",
     "./badge": "./badge/index.js",
     "./breadcrumb": "./breadcrumb/index.js",
+    "./button-action": "./button-action/index.js",
+    "./button-expand": "./button-expand/index.js",
+    "./button-handle": "./button-handle/index.js",
+    "./button-inline": "./button-inline/index.js",
+    "./button-sort": "./button-sort/index.js",
     "./button": "./button/index.js",
     "./card": "./card/index.js",
     "./checkbox": "./checkbox/index.js",
     "./datalist": "./datalist/index.js",
     "./date": "./date/index.js",
+    "./demo": "./demo/index.js",
     "./divider": "./divider/index.js",
+    "./dropdown": "./dropdown/index.js",
     "./file": "./file/index.js",
     "./forms": "./forms/index.js",
-    "./forms/utils": "./forms/utils/index.js",
+    "./grid": "./grid/index.js",
     "./icon": "./icon/index.js",
     "./": "./index.js",
     "./input": "./input/index.js",
     "./internal-components/close-button": "./internal-components/close-button/index.js",
     "./internal-components/overlay": "./internal-components/overlay/index.js",
     "./internal-components/panel": "./internal-components/panel/index.js",
+    "./internal-components/popup": "./internal-components/popup/index.js",
+    "./internal-components/split-handle": "./internal-components/split-handle/index.js",
     "./internal-components/visual-checkbox": "./internal-components/visual-checkbox/index.js",
     "./internal": "./internal/index.js",
-    "./internal/interfaces": "./internal/interfaces/index.js",
     "./modal": "./modal/index.js",
     "./navigation": "./navigation/index.js",
-    "./navigation/utils": "./navigation/utils/index.js",
     "./pagination": "./pagination/index.js",
     "./password": "./password/index.js",
     "./polyfills": "./polyfills/index.js",
@@ -112,6 +129,7 @@
     "./select": "./select/index.js",
     "./selection-panels/checkbox": "./selection-panels/checkbox/index.js",
     "./selection-panels/radio": "./selection-panels/radio/index.js",
+    "./signpost": "./signpost/index.js",
     "./tag": "./tag/index.js",
     "./test-dropdown": "./test-dropdown/index.js",
     "./test": "./test/index.js",
@@ -127,6 +145,16 @@
     "./badge/register": "./badge/register.js",
     "./breadcrumb/register.js": "./breadcrumb/register.js",
     "./breadcrumb/register": "./breadcrumb/register.js",
+    "./button-action/register.js": "./button-action/register.js",
+    "./button-action/register": "./button-action/register.js",
+    "./button-expand/register.js": "./button-expand/register.js",
+    "./button-expand/register": "./button-expand/register.js",
+    "./button-handle/register.js": "./button-handle/register.js",
+    "./button-handle/register": "./button-handle/register.js",
+    "./button-inline/register.js": "./button-inline/register.js",
+    "./button-inline/register": "./button-inline/register.js",
+    "./button-sort/register.js": "./button-sort/register.js",
+    "./button-sort/register": "./button-sort/register.js",
     "./button/register.js": "./button/register.js",
     "./button/register": "./button/register.js",
     "./card/register.js": "./card/register.js",
@@ -139,10 +167,14 @@
     "./date/register": "./date/register.js",
     "./divider/register.js": "./divider/register.js",
     "./divider/register": "./divider/register.js",
+    "./dropdown/register.js": "./dropdown/register.js",
+    "./dropdown/register": "./dropdown/register.js",
     "./file/register.js": "./file/register.js",
     "./file/register": "./file/register.js",
     "./forms/register.js": "./forms/register.js",
     "./forms/register": "./forms/register.js",
+    "./grid/register.js": "./grid/register.js",
+    "./grid/register": "./grid/register.js",
     "./icon/register.js": "./icon/register.js",
     "./icon/register": "./icon/register.js",
     "./input/register.js": "./input/register.js",
@@ -153,6 +185,10 @@
     "./internal-components/overlay/register": "./internal-components/overlay/register.js",
     "./internal-components/panel/register.js": "./internal-components/panel/register.js",
     "./internal-components/panel/register": "./internal-components/panel/register.js",
+    "./internal-components/popup/register.js": "./internal-components/popup/register.js",
+    "./internal-components/popup/register": "./internal-components/popup/register.js",
+    "./internal-components/split-handle/register.js": "./internal-components/split-handle/register.js",
+    "./internal-components/split-handle/register": "./internal-components/split-handle/register.js",
     "./internal-components/visual-checkbox/register.js": "./internal-components/visual-checkbox/register.js",
     "./internal-components/visual-checkbox/register": "./internal-components/visual-checkbox/register.js",
     "./modal/register.js": "./modal/register.js",
@@ -177,6 +213,8 @@
     "./selection-panels/checkbox/register": "./selection-panels/checkbox/register.js",
     "./selection-panels/radio/register.js": "./selection-panels/radio/register.js",
     "./selection-panels/radio/register": "./selection-panels/radio/register.js",
+    "./signpost/register.js": "./signpost/register.js",
+    "./signpost/register": "./signpost/register.js",
     "./tag/register.js": "./tag/register.js",
     "./tag/register": "./tag/register.js",
     "./test-dropdown/register.js": "./test-dropdown/register.js",
@@ -191,18 +229,20 @@
     "./tree-view/register": "./tree-view/register.js",
     "./global.css": "./global.css",
     "./global.min.css": "./global.min.css",
+    "./styles/shim.clr-ui.css": "./styles/shim.clr-ui.css",
+    "./styles/shim.clr-ui.min.css": "./styles/shim.clr-ui.min.css",
     "./styles/module.layout.css": "./styles/module.layout.css",
     "./styles/module.layout.min.css": "./styles/module.layout.min.css",
     "./styles/module.reset.css": "./styles/module.reset.css",
     "./styles/module.reset.min.css": "./styles/module.reset.min.css",
-    "./styles/module.shims.css": "./styles/module.shims.css",
-    "./styles/module.shims.min.css": "./styles/module.shims.min.css",
     "./styles/module.typography.css": "./styles/module.typography.css",
     "./styles/module.typography.min.css": "./styles/module.typography.min.css",
     "./styles/theme.dark.css": "./styles/theme.dark.css",
     "./styles/theme.dark.min.css": "./styles/theme.dark.min.css",
     "./styles/theme.low-motion.css": "./styles/theme.low-motion.css",
     "./styles/theme.low-motion.min.css": "./styles/theme.low-motion.min.css",
+    "./styles/theme.high-contrast.css": "./styles/theme.high-contrast.css",
+    "./styles/theme.high-contrast.min.css": "./styles/theme.high-contrast.min.css",
     "./list/list.css": "./list/list.css",
     "./list/list.min.css": "./list/list.min.css",
     "./table/table.css": "./table/table.css",
@@ -216,5 +256,5 @@
     "./tokens/tokens.ios.swift": "./tokens/tokens.ios.swift",
     "./tokens/tokens.android.xml": "./tokens/tokens.android.xml"
   },
-  "version": "5.7.0"
+  "version": "6.0.0-beta.2"
 }