@cds/core 6.0.0 → 6.0.3

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-group.element.js","sources":["../../../src/navigation/navigation-group.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, AnimationNavigationGroupOpenName, baseStyles, event, i18n, I18nService, id, property, querySlot, querySlotAll, reverseAnimation, state, syncProps, syncPropsForAllItems, } from '@cds/core/internal';\nimport styles from './navigation-group.element.scss';\nexport const CdsNavigationGroupTagName = 'cds-navigation-group';\n/**\n *\n * ```typescript\n * import '@cds/core/navigation/register.js';\n * ```\n *\n * ```html\n * <cds-navigation-group>\n *   <cds-navigation-start></cds-navigation-start>\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-group>\n * ```\n *\n * @element cds-navigation-group\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 * @slot\n */\nlet CdsNavigationGroup = class CdsNavigationGroup extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.cdsMotion = 'on';\n        this.i18n = I18nService.keys.navigation;\n        this.expanded = false;\n        /**\n         * @desc\n         * The value of this property is passed down to start and item children. It is used to query for visible items when\n         * managing focus with key events in the root cds-navigation element.\n         *\n         * Note: eslint-disable  @typescript-eslint/no-unused-vars isn't ignoring the line\n         // eslint error happens because the value is set but never read.\n      \n         * @private\n         */\n        this.expandedGroup = false;\n        /**\n         * @desc\n         *\n         * Used to coordinate css things and the keyboard navigation focus changes.\n         */\n        this.hasFocus = false;\n    }\n    /**\n     * @description\n     * Getter method for a reference to the selector cds-navigation-group > cds-navigation-start\n     * This lets each group flag its cds-navigation-start element and sync that info down. This is\n     * needed because cds-navigation-start elements can be used at the root level and inside\n     * cds-navigation-group elements.\n     *\n     * @private\n     */\n    get isGroupStart() {\n        return !!this.groupStart;\n    }\n    render() {\n        return html `\n      <div class=\"private-host\" cds-layout=\"vertical wrap:none align:horizontal-stretch\">\n        <slot name=\"group-start\"></slot>\n        <div\n          class=\"group-items-wrapper\"\n          aria-hidden=\"${!this.expandedGroup}\"\n          aria-labelledby=\"${this.navigationGroupId}\"\n        >\n          <div class=\"group-items-container\" aria-expanded=\"${this.expanded}\">\n            <div class=\"navigation-group-items\" cds-layout=\"vertical wrap:none align:horizontal-stretch\" role=\"list\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n    toggle() {\n        this.expandedChange.emit(!this.expanded);\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        this.groupStart.removeEventListener('click', this.toggle.bind(this));\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        if (this.groupStart) {\n            this.groupStart.addEventListener('click', this.toggle.bind(this));\n        }\n    }\n    updated(props) {\n        super.updated(props);\n        if (props.has('expanded')) {\n            this.expandedGroup = this.expanded;\n        }\n        if (this.groupStart) {\n            syncProps(this.groupStart, this, {\n                active: true,\n                expanded: true,\n                isGroupStart: this.isGroupStart,\n                navigationGroupId: true,\n            });\n        }\n        syncPropsForAllItems(Array.from(this.groupItems), this, {\n            expandedGroup: true,\n        });\n    }\n};\n__decorate([\n    property({ type: String })\n], CdsNavigationGroup.prototype, \"cdsMotion\", void 0);\n__decorate([\n    event()\n], CdsNavigationGroup.prototype, \"expandedChange\", void 0);\n__decorate([\n    event()\n], CdsNavigationGroup.prototype, \"cdsMotionChange\", void 0);\n__decorate([\n    id()\n], CdsNavigationGroup.prototype, \"navigationGroupId\", void 0);\n__decorate([\n    i18n()\n], CdsNavigationGroup.prototype, \"i18n\", void 0);\n__decorate([\n    state()\n], CdsNavigationGroup.prototype, \"isGroupStart\", null);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsNavigationGroup.prototype, \"expanded\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsNavigationGroup.prototype, \"active\", void 0);\n__decorate([\n    state()\n], CdsNavigationGroup.prototype, \"expandedGroup\", void 0);\n__decorate([\n    querySlot(':scope > cds-navigation-start', { assign: 'group-start' })\n], CdsNavigationGroup.prototype, \"groupStart\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-item')\n], CdsNavigationGroup.prototype, \"groupItems\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-group')\n], CdsNavigationGroup.prototype, \"nestedGroups\", void 0);\nCdsNavigationGroup = __decorate([\n    animate({\n        expanded: {\n            true: AnimationNavigationGroupOpenName,\n            false: reverseAnimation(AnimationNavigationGroupOpenName),\n        },\n    })\n], CdsNavigationGroup);\nexport { CdsNavigationGroup };\n"],"names":["CdsNavigationGroupTagName","CdsNavigationGroup","LitElement","constructor","super","this","cdsMotion","i18n","I18nService","keys","navigation","expanded","expandedGroup","hasFocus","isGroupStart","groupStart","render","html","navigationGroupId","styles","baseStyles","toggle","expandedChange","emit","disconnectedCallback","removeEventListener","bind","firstUpdated","props","addEventListener","updated","has","syncProps","active","syncPropsForAllItems","Array","from","groupItems","__decorate","property","type","String","prototype","event","id","state","Boolean","reflect","querySlot","assign","querySlotAll","animate","true","AnimationNavigationGroupOpenName","false","reverseAnimation"],"mappings":"0YASY,MAACA,EAA4B,uBAsBtC,IAACC,EAAqB,cAAiCC,EACtDC,cACIC,oBACAC,KAAKC,UAAY,KACjBD,KAAKE,KAAOC,EAAYC,KAAKC,WAC7BL,KAAKM,UAAW,EAWhBN,KAAKO,eAAgB,EAMrBP,KAAKQ,UAAW,EAWhBC,mBACA,QAAST,KAAKU,WAElBC,SACI,OAAOC,CAAK,qKAKMZ,KAAKO,mCACFP,KAAKa,wEAE4Bb,KAAKM,2JASpDQ,oBACP,MAAO,CAACC,EAAYD,GAExBE,SACIhB,KAAKiB,eAAeC,MAAMlB,KAAKM,UAEnCa,uBACIpB,MAAMoB,uBACNnB,KAAKU,WAAWU,oBAAoB,QAASpB,KAAKgB,OAAOK,KAAKrB,OAElEsB,aAAaC,GACTxB,MAAMuB,aAAaC,GACfvB,KAAKU,YACLV,KAAKU,WAAWc,iBAAiB,QAASxB,KAAKgB,OAAOK,KAAKrB,OAGnEyB,QAAQF,GACJxB,MAAM0B,QAAQF,GACVA,EAAMG,IAAI,cACV1B,KAAKO,cAAgBP,KAAKM,UAE1BN,KAAKU,YACLiB,EAAU3B,KAAKU,WAAYV,KAAM,CAC7B4B,QAAQ,EACRtB,UAAU,EACVG,aAAcT,KAAKS,aACnBI,mBAAmB,IAG3BgB,EAAqBC,MAAMC,KAAK/B,KAAKgC,YAAahC,KAAM,CACpDO,eAAe,MAI3B0B,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBxC,EAAmByC,UAAW,iBAAa,GAC9CJ,EAAW,CACPK,KACD1C,EAAmByC,UAAW,sBAAkB,GACnDJ,EAAW,CACPK,KACD1C,EAAmByC,UAAW,uBAAmB,GACpDJ,EAAW,CACPM,KACD3C,EAAmByC,UAAW,yBAAqB,GACtDJ,EAAW,CACP/B,KACDN,EAAmByC,UAAW,YAAQ,GACzCJ,EAAW,CACPO,KACD5C,EAAmByC,UAAW,eAAgB,MACjDJ,EAAW,CACPC,EAAS,CAAEC,KAAMM,QAASC,SAAS,KACpC9C,EAAmByC,UAAW,gBAAY,GAC7CJ,EAAW,CACPC,EAAS,CAAEC,KAAMM,WAClB7C,EAAmByC,UAAW,cAAU,GAC3CJ,EAAW,CACPO,KACD5C,EAAmByC,UAAW,qBAAiB,GAClDJ,EAAW,CACPU,EAAU,gCAAiC,CAAEC,OAAQ,iBACtDhD,EAAmByC,UAAW,kBAAc,GAC/CJ,EAAW,CACPY,EAAa,iCACdjD,EAAmByC,UAAW,kBAAc,GAC/CJ,EAAW,CACPY,EAAa,kCACdjD,EAAmByC,UAAW,oBAAgB,GACjDzC,EAAqBqC,EAAW,CAC5Ba,EAAQ,CACJxC,SAAU,CACNyC,KAAMC,EACNC,MAAOC,EAAiBF,OAGjCpD"}
+{"version":3,"file":"navigation-group.element.js","sources":["../../../src/navigation/navigation-group.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, AnimationNavigationGroupOpenName, baseStyles, event, i18n, I18nService, id, property, querySlot, querySlotAll, reverseAnimation, state, syncProps, syncPropsForAllItems, } from '@cds/core/internal';\nimport styles from './navigation-group.element.scss';\nexport const CdsNavigationGroupTagName = 'cds-navigation-group';\n/**\n *\n * ```typescript\n * import '@cds/core/navigation/register.js';\n * ```\n *\n * ```html\n * <cds-navigation-group>\n *   <cds-navigation-start></cds-navigation-start>\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-group>\n * ```\n *\n * @beta\n * @element cds-navigation-group\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 * @slot\n */\nlet CdsNavigationGroup = class CdsNavigationGroup extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.cdsMotion = 'on';\n        this.i18n = I18nService.keys.navigation;\n        this.expanded = false;\n        /**\n         * @desc\n         * The value of this property is passed down to start and item children. It is used to query for visible items when\n         * managing focus with key events in the root cds-navigation element.\n         *\n         * Note: eslint-disable  @typescript-eslint/no-unused-vars isn't ignoring the line\n         // eslint error happens because the value is set but never read.\n      \n         * @private\n         */\n        this.expandedGroup = false;\n        /**\n         * @desc\n         *\n         * Used to coordinate css things and the keyboard navigation focus changes.\n         */\n        this.hasFocus = false;\n    }\n    /**\n     * @description\n     * Getter method for a reference to the selector cds-navigation-group > cds-navigation-start\n     * This lets each group flag its cds-navigation-start element and sync that info down. This is\n     * needed because cds-navigation-start elements can be used at the root level and inside\n     * cds-navigation-group elements.\n     *\n     * @private\n     */\n    get isGroupStart() {\n        return !!this.groupStart;\n    }\n    render() {\n        return html `\n      <div class=\"private-host\" cds-layout=\"vertical wrap:none align:horizontal-stretch\">\n        <slot name=\"group-start\"></slot>\n        <div\n          class=\"group-items-wrapper\"\n          aria-hidden=\"${!this.expandedGroup}\"\n          aria-labelledby=\"${this.navigationGroupId}\"\n        >\n          <div class=\"group-items-container\" aria-expanded=\"${this.expanded}\">\n            <div class=\"navigation-group-items\" cds-layout=\"vertical wrap:none align:horizontal-stretch\" role=\"list\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n    toggle() {\n        this.expandedChange.emit(!this.expanded);\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        this.groupStart.removeEventListener('click', this.toggle.bind(this));\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        if (this.groupStart) {\n            this.groupStart.addEventListener('click', this.toggle.bind(this));\n        }\n    }\n    updated(props) {\n        super.updated(props);\n        if (props.has('expanded')) {\n            this.expandedGroup = this.expanded;\n        }\n        if (this.groupStart) {\n            syncProps(this.groupStart, this, {\n                active: true,\n                expanded: true,\n                isGroupStart: this.isGroupStart,\n                navigationGroupId: true,\n            });\n        }\n        syncPropsForAllItems(Array.from(this.groupItems), this, {\n            expandedGroup: true,\n        });\n    }\n};\n__decorate([\n    property({ type: String })\n], CdsNavigationGroup.prototype, \"cdsMotion\", void 0);\n__decorate([\n    event()\n], CdsNavigationGroup.prototype, \"expandedChange\", void 0);\n__decorate([\n    event()\n], CdsNavigationGroup.prototype, \"cdsMotionChange\", void 0);\n__decorate([\n    id()\n], CdsNavigationGroup.prototype, \"navigationGroupId\", void 0);\n__decorate([\n    i18n()\n], CdsNavigationGroup.prototype, \"i18n\", void 0);\n__decorate([\n    state()\n], CdsNavigationGroup.prototype, \"isGroupStart\", null);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsNavigationGroup.prototype, \"expanded\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsNavigationGroup.prototype, \"active\", void 0);\n__decorate([\n    state()\n], CdsNavigationGroup.prototype, \"expandedGroup\", void 0);\n__decorate([\n    querySlot(':scope > cds-navigation-start', { assign: 'group-start' })\n], CdsNavigationGroup.prototype, \"groupStart\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-item')\n], CdsNavigationGroup.prototype, \"groupItems\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-navigation-group')\n], CdsNavigationGroup.prototype, \"nestedGroups\", void 0);\nCdsNavigationGroup = __decorate([\n    animate({\n        expanded: {\n            true: AnimationNavigationGroupOpenName,\n            false: reverseAnimation(AnimationNavigationGroupOpenName),\n        },\n    })\n], CdsNavigationGroup);\nexport { CdsNavigationGroup };\n"],"names":["CdsNavigationGroupTagName","CdsNavigationGroup","LitElement","constructor","super","this","cdsMotion","i18n","I18nService","keys","navigation","expanded","expandedGroup","hasFocus","isGroupStart","groupStart","render","html","navigationGroupId","styles","baseStyles","toggle","expandedChange","emit","disconnectedCallback","removeEventListener","bind","firstUpdated","props","addEventListener","updated","has","syncProps","active","syncPropsForAllItems","Array","from","groupItems","__decorate","property","type","String","prototype","event","id","state","Boolean","reflect","querySlot","assign","querySlotAll","animate","true","AnimationNavigationGroupOpenName","false","reverseAnimation"],"mappings":"0YASY,MAACA,EAA4B,uBAuBtC,IAACC,EAAqB,cAAiCC,EACtDC,cACIC,oBACAC,KAAKC,UAAY,KACjBD,KAAKE,KAAOC,EAAYC,KAAKC,WAC7BL,KAAKM,UAAW,EAWhBN,KAAKO,eAAgB,EAMrBP,KAAKQ,UAAW,EAWhBC,mBACA,QAAST,KAAKU,WAElBC,SACI,OAAOC,CAAK,qKAKMZ,KAAKO,mCACFP,KAAKa,wEAE4Bb,KAAKM,2JASpDQ,oBACP,MAAO,CAACC,EAAYD,GAExBE,SACIhB,KAAKiB,eAAeC,MAAMlB,KAAKM,UAEnCa,uBACIpB,MAAMoB,uBACNnB,KAAKU,WAAWU,oBAAoB,QAASpB,KAAKgB,OAAOK,KAAKrB,OAElEsB,aAAaC,GACTxB,MAAMuB,aAAaC,GACfvB,KAAKU,YACLV,KAAKU,WAAWc,iBAAiB,QAASxB,KAAKgB,OAAOK,KAAKrB,OAGnEyB,QAAQF,GACJxB,MAAM0B,QAAQF,GACVA,EAAMG,IAAI,cACV1B,KAAKO,cAAgBP,KAAKM,UAE1BN,KAAKU,YACLiB,EAAU3B,KAAKU,WAAYV,KAAM,CAC7B4B,QAAQ,EACRtB,UAAU,EACVG,aAAcT,KAAKS,aACnBI,mBAAmB,IAG3BgB,EAAqBC,MAAMC,KAAK/B,KAAKgC,YAAahC,KAAM,CACpDO,eAAe,MAI3B0B,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBxC,EAAmByC,UAAW,iBAAa,GAC9CJ,EAAW,CACPK,KACD1C,EAAmByC,UAAW,sBAAkB,GACnDJ,EAAW,CACPK,KACD1C,EAAmByC,UAAW,uBAAmB,GACpDJ,EAAW,CACPM,KACD3C,EAAmByC,UAAW,yBAAqB,GACtDJ,EAAW,CACP/B,KACDN,EAAmByC,UAAW,YAAQ,GACzCJ,EAAW,CACPO,KACD5C,EAAmByC,UAAW,eAAgB,MACjDJ,EAAW,CACPC,EAAS,CAAEC,KAAMM,QAASC,SAAS,KACpC9C,EAAmByC,UAAW,gBAAY,GAC7CJ,EAAW,CACPC,EAAS,CAAEC,KAAMM,WAClB7C,EAAmByC,UAAW,cAAU,GAC3CJ,EAAW,CACPO,KACD5C,EAAmByC,UAAW,qBAAiB,GAClDJ,EAAW,CACPU,EAAU,gCAAiC,CAAEC,OAAQ,iBACtDhD,EAAmByC,UAAW,kBAAc,GAC/CJ,EAAW,CACPY,EAAa,iCACdjD,EAAmByC,UAAW,kBAAc,GAC/CJ,EAAW,CACPY,EAAa,kCACdjD,EAAmByC,UAAW,oBAAgB,GACjDzC,EAAqBqC,EAAW,CAC5Ba,EAAQ,CACJxC,SAAU,CACNyC,KAAMC,EACNC,MAAOC,EAAiBF,OAGjCpD"}

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

@@ -11,6 +11,7 @@ export declare const CdsNavigationItemTagName = "cds-navigation-item";
  *  <cds-navigation-item><a href="/home">Home</cds-navigation-item>
  * ```
  *
+ * @beta
  * @element cds-navigation-item
  * @cssprop --color
  * @cssprop --font-size

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/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"}
+{"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 * @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        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,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,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, 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};
+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 * 1rem / var(--cds-global-base, 20)));--font-size:inherit;--font-weight:inherit;--letter-spacing:inherit;--padding:0 var(--cds-global-space-5, calc(8 * 1rem / var(--cds-global-base, 20)));--cursor:pointer}:host([_group-item]){--padding:0 var(--cds-global-space-5, calc(8 * 1rem / var(--cds-global-base, 20))) 0 var(--cds-global-space-7, calc(16 * 1rem / var(--cds-global-base, 20)))}.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 * 1rem / var(--cds-global-base,20))) 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 * 1rem / var(--cds-global-base,20)))}`;export{a as default};
 //# sourceMappingURL=navigation-item.element.scss.js.map

package/navigation/navigation.element.d.ts

@@ -18,6 +18,7 @@ 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

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/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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"}
+{"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 * @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        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-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};
+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, calc(48 * 1rem / var(--cds-global-base, 20)));--expanded-width:calc(var(--cds-global-space-6, calc(12 * 1rem / var(--cds-global-base, 20))) * 20);--line-height:var(--cds-global-space-11, calc(36 * 1rem / var(--cds-global-base, 20)));--font-size:var(--cds-global-typography-font-size-4, calc(14 * 1rem / var(--cds-global-base, 20)));--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 * 1rem / var(--cds-global-base, 20)));--padding:0 var(--cds-global-space-4, calc(6 * 1rem / var(--cds-global-base, 20)));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/package.json

@@ -256,5 +256,5 @@
     "./tokens/tokens.ios.swift": "./tokens/tokens.ios.swift",
     "./tokens/tokens.android.xml": "./tokens/tokens.android.xml"
   },
-  "version": "6.0.0"
+  "version": "6.0.3"
 }

package/pagination/pagination.element.scss.js

@@ -1,2 +1,2 @@
-import{css as o}from"lit";var a=o`:host{--color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--font-size:var(--cds-global-typography-font-size-3, 0.8125rem);--action-color:var(--color);color:var(--color);display:flex;width:100%;flex-wrap:none;font-size:var(--font-size)}::slotted(cds-input[cds-pagination-number]){--background:var(--cds-alias-object-container-background);--border-radius:var(--cds-alias-object-border-radius-100);--border:var(--cds-alias-object-border-width-100) solid var(--cds-alias-object-border-color);--border-bottom:0;--padding:var(--cds-global-space-2) var(--cds-global-space-4) 0;--font-size:var(--cds-global-typography-font-size-3, 0.8125rem);--text-align:center}::slotted(span){display:block}::slotted(cds-pagination-button){--color:var(--action-color)}::slotted([cds-control]){--min-width:initial;--label-width:0;--control-width:initial;width:auto}`;export{a as default};
+import{css as o}from"lit";var a=o`:host{--color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--font-size:var(--cds-global-typography-font-size-3, calc(13 * 1rem / var(--cds-global-base, 20)));--action-color:var(--color);color:var(--color);display:flex;flex-wrap:none;font-size:var(--font-size)}::slotted(cds-input[cds-pagination-number]){--background:var(--cds-alias-object-container-background);--border-radius:var(--cds-alias-object-border-radius-100);--border:var(--cds-alias-object-border-width-100) solid var(--cds-alias-object-border-color);--border-bottom:0;--padding:var(--cds-global-space-2) var(--cds-global-space-4) 0;--font-size:var(--cds-global-typography-font-size-3, calc(13 * 1rem / var(--cds-global-base, 20)));--text-align:center}::slotted(span){display:block}::slotted(cds-pagination-button:not([disabled])){--color:var(--action-color)}::slotted([cds-control]){--min-width:initial;--label-width:0;--control-width:initial;width:auto}`;export{a as default};
 //# sourceMappingURL=pagination.element.scss.js.map

package/progress-circle/progress-circle.element.scss.js

@@ -1,2 +1,2 @@
-import{css as a}from"lit";var s=a`@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{--ring-opacity:1;--ring-color:var(--cds-alias-status-neutral-tint, var(--cds-global-color-construction-50, #f1f6f8));--fill-color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--fill-speed:var(--cds-global-animation-duration-secondary, 0.3s);font-family:inherit;font-size:inherit;color:inherit;display:block;cursor:inherit}.private-host,svg{height:100%;width:100%}svg{display:block}.private-host{display:flex;align-items:center;justify-content:center}.private-host .backstroke{stroke:var(--ring-color);opacity:var(--ring-opacity)}.private-host .arcstroke{stroke:var(--fill-color);transition:stroke-dashoffset var(--fill-speed) var(--cds-global-animation-easing-loop,cubic-bezier(.17,.4,.8,.79))}:host,:host([size=sm]){height:var(--cds-global-space-7,1rem);width:var(--cds-global-space-7,1rem)}:host([size=md]){height:var(--cds-global-space-9,1.5rem);width:var(--cds-global-space-9,1.5rem)}:host([size=lg]){height:var(--cds-global-space-11,2.25rem);width:var(--cds-global-space-11,2.25rem)}:host([size=xl]){height:var(--cds-global-space-12,3rem);width:var(--cds-global-space-12,3rem)}:host([size=xxl]){height:calc(var(--cds-global-space-13,4rem) - var(--cds-global-space-5,.5rem));width:calc(var(--cds-global-space-13,4rem) - var(--cds-global-space-5,.5rem))}:host([value="0"]) .fillstroke,:host([value="100"]) .fillstroke{display:none}:host(:not([value])) .progress-wrapper{animation:spin var(--cds-global-animation-duration-slowest,.8s) var(--cds-global-animation-easing-loop,cubic-bezier(.17,.4,.8,.79)) infinite}:host([status=info]){--ring-color:var(--cds-alias-status-info-tint, var(--cds-global-color-blue-50, #e6f7ff));--fill-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([status=success]){--ring-color:var(--cds-alias-status-success-tint, var(--cds-global-color-green-50, #eefce3));--fill-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([status=warning]){--ring-color:var(--cds-alias-status-warning-tint, var(--cds-global-color-ochre-100, #fff2d6));--fill-color:var(--cds-alias-status-warning, var(--cds-global-color-ochre-500, #ffb92e))}:host([status=danger]){--ring-color:var(--cds-alias-status-danger-tint, var(--cds-global-color-red-50, #fff2f0));--fill-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=alt]){--ring-color:var(--cds-alias-status-alt-tint, var(--cds-global-color-violet-600, #9b32c8));--fill-color:var(--cds-alias-status-alt, var(--cds-global-color-violet-700, #7c12a5))}:host([inverse]){--ring-color:var(--cds-alias-status-neutral-tint, var(--cds-global-color-construction-50, #f1f6f8));--fill-color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169))}`;export{s as default};
+import{css as a}from"lit";var s=a`@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{--ring-opacity:1;--ring-color:var(--cds-alias-status-neutral-tint, var(--cds-global-color-construction-50, #f1f6f8));--fill-color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--fill-speed:var(--cds-global-animation-duration-secondary, 0.3s);font-family:inherit;font-size:inherit;color:inherit;display:block;cursor:inherit}.private-host,svg{height:100%;width:100%}svg{display:block}.private-host{display:flex;align-items:center;justify-content:center}.private-host .backstroke{stroke:var(--ring-color);opacity:var(--ring-opacity)}.private-host .arcstroke{stroke:var(--fill-color);transition:stroke-dashoffset var(--fill-speed) var(--cds-global-animation-easing-loop,cubic-bezier(.17,.4,.8,.79))}:host,:host([size=sm]){height:var(--cds-global-space-7,calc(16 * 1rem / var(--cds-global-base,20)));width:var(--cds-global-space-7,calc(16 * 1rem / var(--cds-global-base,20)))}:host([size=md]){height:var(--cds-global-space-9,calc(24 * 1rem / var(--cds-global-base,20)));width:var(--cds-global-space-9,calc(24 * 1rem / var(--cds-global-base,20)))}:host([size=lg]){height:var(--cds-global-space-11,calc(36 * 1rem / var(--cds-global-base,20)));width:var(--cds-global-space-11,calc(36 * 1rem / var(--cds-global-base,20)))}:host([size=xl]){height:var(--cds-global-space-12,calc(48 * 1rem / var(--cds-global-base,20)));width:var(--cds-global-space-12,calc(48 * 1rem / var(--cds-global-base,20)))}:host([size=xxl]){height:calc(var(--cds-global-space-13,calc(64 * 1rem / var(--cds-global-base,20))) - var(--cds-global-space-5,calc(8 * 1rem / var(--cds-global-base,20))));width:calc(var(--cds-global-space-13,calc(64 * 1rem / var(--cds-global-base,20))) - var(--cds-global-space-5,calc(8 * 1rem / var(--cds-global-base,20))))}:host([value="0"]) .fillstroke,:host([value="100"]) .fillstroke{display:none}:host(:not([value])) .progress-wrapper{animation:spin var(--cds-global-animation-duration-slowest,.8s) var(--cds-global-animation-easing-loop,cubic-bezier(.17,.4,.8,.79)) infinite}:host([status=info]){--ring-color:var(--cds-alias-status-info-tint, var(--cds-global-color-blue-50, #e6f7ff));--fill-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([status=success]){--ring-color:var(--cds-alias-status-success-tint, var(--cds-global-color-green-50, #eefce3));--fill-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([status=warning]){--ring-color:var(--cds-alias-status-warning-tint, var(--cds-global-color-ochre-100, #fff2d6));--fill-color:var(--cds-alias-status-warning, var(--cds-global-color-ochre-500, #ffb92e))}:host([status=danger]){--ring-color:var(--cds-alias-status-danger-tint, var(--cds-global-color-red-50, #fff2f0));--fill-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=alt]){--ring-color:var(--cds-alias-status-alt-tint, var(--cds-global-color-violet-600, #9b32c8));--fill-color:var(--cds-alias-status-alt, var(--cds-global-color-violet-700, #7c12a5))}:host([inverse]){--ring-color:var(--cds-alias-status-neutral-tint, var(--cds-global-color-construction-50, #f1f6f8));--fill-color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169))}`;export{s as default};
 //# sourceMappingURL=progress-circle.element.scss.js.map

package/radio/radio.element.scss.js

@@ -1,2 +1,2 @@
-import{css as r}from"lit";var a=r`:host{--width:var(--cds-global-space-7, 1rem);--height:var(--cds-global-space-7, 1rem);--border:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--background:none}.input{width:var(--width);height:var(--height);min-width:var(--width);border:var(--border);background:var(--background);border-radius:var(--cds-alias-object-border-radius-300,50%);content:"";cursor:pointer;display:flex;align-items:center;justify-content:center}:host([status=error]){--border:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([_checked]){--border:0!important;--background:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([_checked]) .input::after{border-radius:var(--cds-alias-object-border-radius-300,50%);content:"";background:var(--cds-global-typography-color-100,var(--cds-global-color-white,#fff));width:var(--cds-global-space-3,.25rem);height:var(--cds-global-space-3,.25rem)}:host([_disabled]){--border:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))}:host([_disabled]) .input::after{cursor:not-allowed}:host([_disabled][_checked]){--border:0!important;--background:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))}`;export{a as default};
+import{css as a}from"lit";var r=a`:host{--width:var(--cds-global-space-7, calc(16 * 1rem / var(--cds-global-base, 20)));--height:var(--cds-global-space-7, calc(16 * 1rem / var(--cds-global-base, 20)));--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--background:none}.input{width:var(--width);height:var(--height);min-width:var(--width);border:var(--border);background:var(--background);border-radius:var(--cds-alias-object-border-radius-300,50%);content:"";cursor:pointer;display:flex;align-items:center;justify-content:center}:host([status=error]){--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([_checked]){--border:0!important;--background:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([_checked]) .input::after{border-radius:var(--cds-alias-object-border-radius-300,50%);content:"";background:var(--cds-global-typography-color-100,var(--cds-global-color-white,#fff));width:var(--cds-global-space-3,calc(4 * 1rem / var(--cds-global-base,20)));height:var(--cds-global-space-3,calc(4 * 1rem / var(--cds-global-base,20)))}:host([_disabled]){--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))}:host([_disabled]) .input::after{cursor:not-allowed}:host([_disabled][_checked]){--border:0!important;--background:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))}`;export{r as default};
 //# sourceMappingURL=radio.element.scss.js.map

package/range/range.element.scss.js

@@ -1,2 +1,2 @@
-import{css as a}from"lit";var r=a`:host{--track-background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--track-fill-background:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--track-height:var(--cds-alias-object-border-width-400, 0.25rem);--track-width:50%;--thumb-background:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--thumb-width:calc(var(--cds-alias-object-border-width-400, 0.25rem) + calc(var(--cds-global-space-5, 0.5rem) + var(--cds-global-space-1, 0.0625rem)));--thumb-height:calc(var(--cds-alias-object-border-width-400, 0.25rem) + calc(var(--cds-global-space-5, 0.5rem) + var(--cds-global-space-1, 0.0625rem)));display:block;width:100%}.input-container{position:relative}::slotted(input){-webkit-appearance:none;width:100%;height:var(--track-height);margin:var(--cds-global-space-5,.5rem) 0 var(--cds-global-space-4,.375rem) 0;position:relative;padding:0!important;padding:var(--cds-global-space-4,.375rem) 0;cursor:pointer}.input-track{position:absolute;top:var(--cds-global-space-6,.75rem);left:0;width:var(--track-width);height:var(--track-height);background:var(--track-fill-background);border-radius:var(--border-radius,var(--cds-alias-object-border-radius-100,.25rem));pointer-events:none;z-index:999}:host([_disabled]){--track-background:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8));--track-fill-background:var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc));--thumb-background:var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}:host([_disabled]) .input,:host([_disabled]) ::slotted(input){cursor:not-allowed}.rtl .input-track{left:initial;right:0}.input-container{padding:var(--cds-global-space-6,.75rem) 0 var(--cds-global-space-5,.5rem) 0}`;export{r as default};
+import{css as a}from"lit";var c=a`:host{--track-background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--track-fill-background:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--track-height:var(--cds-alias-object-border-width-400, calc(4 * 1rem / var(--cds-global-base, 20)));--track-width:50%;--thumb-background:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--thumb-width:calc(var(--cds-alias-object-border-width-400, calc(4 * 1rem / var(--cds-global-base, 20))) + calc(var(--cds-global-space-5, calc(8 * 1rem / var(--cds-global-base, 20))) + var(--cds-global-space-1, calc(1 * 1rem / var(--cds-global-base, 20)))));--thumb-height:calc(var(--cds-alias-object-border-width-400, calc(4 * 1rem / var(--cds-global-base, 20))) + calc(var(--cds-global-space-5, calc(8 * 1rem / var(--cds-global-base, 20))) + var(--cds-global-space-1, calc(1 * 1rem / var(--cds-global-base, 20)))));display:block;width:100%}.input-container{position:relative}::slotted(input){-webkit-appearance:none;width:100%;height:var(--track-height);margin:var(--cds-global-space-5,calc(8 * 1rem / var(--cds-global-base,20))) 0 var(--cds-global-space-4,calc(6 * 1rem / var(--cds-global-base,20))) 0;position:relative;padding:0!important;padding:var(--cds-global-space-4,calc(6 * 1rem / var(--cds-global-base,20))) 0;cursor:pointer}.input-track{position:absolute;top:var(--cds-global-space-6,calc(12 * 1rem / var(--cds-global-base,20)));left:0;width:var(--track-width);height:var(--track-height);background:var(--track-fill-background);border-radius:var(--border-radius,var(--cds-alias-object-border-radius-100,calc(4 * 1rem / var(--cds-global-base,20))));pointer-events:none;z-index:999}:host([_disabled]){--track-background:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8));--track-fill-background:var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc));--thumb-background:var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}:host([_disabled]) .input,:host([_disabled]) ::slotted(input){cursor:not-allowed}.rtl .input-track{left:initial;right:0}.input-container{padding:var(--cds-global-space-6,calc(12 * 1rem / var(--cds-global-base,20))) 0 var(--cds-global-space-5,calc(8 * 1rem / var(--cds-global-base,20))) 0}`;export{c as default};
 //# sourceMappingURL=range.element.scss.js.map

package/range/range.global.scss.js

@@ -1,2 +1,2 @@
-import{css as r}from"lit";var a=r`cds-range input[type=range]::-webkit-slider-runnable-track{width:100%;height:var(--track-height);background:var(--track-background);border-radius:var(--border-radius,var(--cds-alias-object-border-radius-100,.25rem));border:0;box-shadow:none;display:flex}cds-range input[type=range]::-webkit-slider-thumb{box-shadow:none;border:0;height:var(--thumb-height);width:var(--thumb-width);border-radius:var(--cds-alias-object-border-radius-200,.75rem);background:var(--thumb-background);-webkit-appearance:none;align-self:center;margin-top:calc(var(--cds-global-space-3,.25rem)*-1)}cds-range input[type=range]:focus::-webkit-slider-runnable-track{background:var(--track-background)}cds-range input[type=range]::-moz-range-track{width:100%;height:var(--track-height);box-shadow:0;background:var(--track-background);border-radius:var(--border-radius,var(--cds-alias-object-border-radius-100,.25rem));border:0}cds-range input[type=range]::-moz-range-thumb{box-shadow:0;border:0;height:var(--thumb-height);width:var(--thumb-width);border-radius:var(--cds-alias-object-border-radius-200,.75rem);background:var(--thumb-background)}`;export{a as default};
+import{css as r}from"lit";var a=r`cds-range input[type=range]::-webkit-slider-runnable-track{width:100%;height:var(--track-height);background:var(--track-background);border-radius:var(--border-radius,var(--cds-alias-object-border-radius-100,calc(4 * 1rem / var(--cds-global-base,20))));border:0;box-shadow:none;display:flex}cds-range input[type=range]::-webkit-slider-thumb{box-shadow:none;border:0;height:var(--thumb-height);width:var(--thumb-width);border-radius:var(--cds-alias-object-border-radius-200,calc(12 * 1rem / var(--cds-global-base,20)));background:var(--thumb-background);-webkit-appearance:none;align-self:center;margin-top:calc(var(--cds-global-space-3,calc(4 * 1rem / var(--cds-global-base,20)))*-1)}cds-range input[type=range]:focus::-webkit-slider-runnable-track{background:var(--track-background)}cds-range input[type=range]::-moz-range-track{width:100%;height:var(--track-height);box-shadow:0;background:var(--track-background);border-radius:var(--border-radius,var(--cds-alias-object-border-radius-100,calc(4 * 1rem / var(--cds-global-base,20))));border:0}cds-range input[type=range]::-moz-range-thumb{box-shadow:0;border:0;height:var(--thumb-height);width:var(--thumb-width);border-radius:var(--cds-alias-object-border-radius-200,calc(12 * 1rem / var(--cds-global-base,20)));background:var(--thumb-background)}`;export{a as default};
 //# sourceMappingURL=range.global.scss.js.map

package/select/select.element.scss.js

@@ -1,2 +1,2 @@
-import{css as t}from"lit";var o=t`:host([_multiple]),:host([_size]){--border:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--cds-alias-object-border-color, var(--cds-global-color-construction-200, #cbd4d8))!important;--border-bottom:0}:host([_multiple]) [cds-button-action],:host([_size]) [cds-button-action]{display:none}::slotted([slot=input]){cursor:pointer}::slotted([slot=input][multiple]),::slotted([slot=input][size]){width:100%!important;border-radius:var(--cds-alias-object-border-radius-100,.25rem)!important;border:var(--border);padding:0!important;font-size:var(--cds-global-typography-font-size-3,.8125rem)!important}`;export{o as default};
+import{css as o}from"lit";var t=o`:host([_multiple]),:host([_size]){--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-object-border-color, var(--cds-global-color-construction-200, #cbd4d8))!important;--border-bottom:0}:host([_multiple]) [cds-button-action],:host([_size]) [cds-button-action]{display:none}::slotted([slot=input]){cursor:pointer}::slotted([slot=input][multiple]),::slotted([slot=input][size]){width:100%!important;border-radius:var(--cds-alias-object-border-radius-100,calc(4 * 1rem / var(--cds-global-base,20)))!important;border:var(--border);padding:0!important;font-size:var(--cds-global-typography-font-size-3,calc(13 * 1rem / var(--cds-global-base,20)))!important}`;export{t as default};
 //# sourceMappingURL=select.element.scss.js.map

package/select/select.global.scss.js

@@ -1,2 +1,2 @@
-import{css as o}from"lit";var a=o`cds-select option{background:var(--cds-alias-object-container-background,var(--cds-global-color-white,#fff));color:var(--cds-global-typography-color-400,var(--cds-global-color-construction-900,#21333b));padding:var(--cds-global-space-4,.375rem);font-size:var(--cds-global-typography-font-size-3,.8125rem)}cds-select input::-webkit-calendar-picker-indicator{display:none}`;export{a as default};
+import{css as a}from"lit";var o=a`cds-select option{background:var(--cds-alias-object-container-background,var(--cds-global-color-white,#fff));color:var(--cds-global-typography-color-400,var(--cds-global-color-construction-900,#21333b));padding:var(--cds-global-space-4,calc(6 * 1rem / var(--cds-global-base,20)));font-size:var(--cds-global-typography-font-size-3,calc(13 * 1rem / var(--cds-global-base,20)))}cds-select input::-webkit-calendar-picker-indicator{display:none}`;export{o as default};
 //# sourceMappingURL=select.global.scss.js.map

package/selection-panels/shared/selection-panel.element.scss.js

@@ -1,2 +1,2 @@
-import{css as a}from"lit";var r=a`:host{--panel-width:calc(var(--cds-global-space-8, 1.125rem) * 10);--panel-height:calc(var(--cds-global-space-8, 1.125rem) * 10);--panel-background:var(--cds-alias-object-interaction-background, var(--cds-global-color-white, white));--border:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--box-shadow:0 var(--cds-global-space-2, 0.125rem) 0 var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--padding:var(--cds-global-layout-space-sm, 0.75rem)}.private-host{gap:0!important;position:relative;width:var(--panel-width);height:var(--panel-height)}.input,[focusable]{left:initial;margin:0 0 var(--cds-global-layout-space-xs,.5rem) var(--cds-global-layout-space-xxs,.25rem);position:absolute;right:var(--cds-global-space-4,.375rem);top:var(--cds-global-space-4,.375rem);z-index:99}::slotted(label){box-shadow:var(--box-shadow);background:var(--panel-background);border:var(--border);border-radius:var(--cds-alias-object-border-radius-100,.25rem);cursor:pointer;display:flex;margin:0;padding:var(--padding);text-wrap:normal;white-space:normal;word-break:break-word;overflow:hidden;width:var(--panel-width)!important;height:var(--panel-height)}:host([_disabled][_checked]){--border:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))!important}:host([_disabled]),:host([_disabled][_checked]),:host([_disabled][_checked]) .input{--box-shadow:0 var(--cds-global-space-2, 0.125rem) 0 var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}:host([_disabled][_checked]) .input{--border:var(--border)}:host([_disabled]){--border:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))}:host([status=error]) ::slotted(label){--border:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200));--box-shadow:0 var(--cds-global-space-2, 0.125rem) 0 var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host(:hover:not([_disabled])) .input,:host(:hover:not([_disabled])) ::slotted(label){--border:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--box-shadow:0 var(--cds-global-space-2, 0.125rem) 0 var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([status=error]:hover:not([_disabled])) .input,:host([status=error]:hover:not([_disabled])) ::slotted(label){--border:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--cds-alias-status-danger-dark, var(--cds-global-color-red-900, #8f1500));--box-shadow:0 var(--cds-global-space-2, 0.125rem) 0 var(--cds-alias-status-danger-dark, var(--cds-global-color-red-900, #8f1500))}:host([_checked]:hover:not([_disabled])) .input{--border:var(--border)}:host([_checked]:not([_disabled])) ::slotted(label){--border:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--box-shadow:0 var(--cds-global-space-2, 0.125rem) 0 var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([size=sm]),:host([size=sm]) ::slotted(label){--panel-width:calc(var(--cds-global-space-8, 1.125rem) * 10);--panel-height:calc(var(--cds-global-space-8, 1.125rem) * 10)}:host([size=md]),:host([size=md]) ::slotted(label){--panel-width:calc(var(--cds-global-space-6, 0.75rem) * 20);--panel-height:calc(var(--cds-global-space-6, 0.75rem) * 20)}:host([size=lg]),:host([size=lg]) ::slotted(label){--panel-width:calc(var(--cds-global-space-8, 1.125rem) * 20);--panel-height:calc(var(--cds-global-space-8, 1.125rem) * 20)}:host([size=xl]),:host([size=xl]) ::slotted(label){--panel-width:calc(var(--cds-global-space-6, 0.75rem) * 40);--panel-height:calc(var(--cds-global-space-6, 0.75rem) * 40)}`;export{r as default};
+import{css as a}from"lit";var l=a`:host{--panel-width:calc(var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20))) * 10);--panel-height:calc(var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20))) * 10);--panel-background:var(--cds-alias-object-interaction-background, var(--cds-global-color-white, white));--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--box-shadow:0 var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))) 0 var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--padding:var(--cds-global-layout-space-sm, calc(12 * 1rem / var(--cds-global-base, 20)))}.private-host{gap:0!important;position:relative;width:var(--panel-width);height:var(--panel-height)}.input,[focusable]{left:initial;margin:0 0 var(--cds-global-layout-space-xs,calc(8 * 1rem / var(--cds-global-base,20))) var(--cds-global-layout-space-xxs,calc(4 * 1rem / var(--cds-global-base,20)));position:absolute;right:var(--cds-global-space-4,calc(6 * 1rem / var(--cds-global-base,20)));top:var(--cds-global-space-4,calc(6 * 1rem / var(--cds-global-base,20)));z-index:99}::slotted(label){box-shadow:var(--box-shadow);background:var(--panel-background);border:var(--border);border-radius:var(--cds-alias-object-border-radius-100,calc(4 * 1rem / var(--cds-global-base,20)));cursor:pointer;display:flex;margin:0;padding:var(--padding);text-wrap:normal;white-space:normal;word-break:break-word;overflow:hidden;width:var(--panel-width)!important;height:var(--panel-height)}:host([_disabled][_checked]){--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))!important}:host([_disabled]),:host([_disabled][_checked]),:host([_disabled][_checked]) .input{--box-shadow:0 var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))) 0 var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}:host([_disabled][_checked]) .input{--border:var(--border)}:host([_disabled]){--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))}:host([status=error]) ::slotted(label){--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200));--box-shadow:0 var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))) 0 var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host(:hover:not([_disabled])) .input,:host(:hover:not([_disabled])) ::slotted(label){--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--box-shadow:0 var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))) 0 var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([status=error]:hover:not([_disabled])) .input,:host([status=error]:hover:not([_disabled])) ::slotted(label){--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-danger-dark, var(--cds-global-color-red-900, #8f1500));--box-shadow:0 var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))) 0 var(--cds-alias-status-danger-dark, var(--cds-global-color-red-900, #8f1500))}:host([_checked]:hover:not([_disabled])) .input{--border:var(--border)}:host([_checked]:not([_disabled])) ::slotted(label){--border:var(--cds-alias-object-border-width-100, calc(1 * 1rem / var(--cds-global-base, 20))) solid var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--box-shadow:0 var(--cds-global-space-2, calc(2 * 1rem / var(--cds-global-base, 20))) 0 var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([size=sm]),:host([size=sm]) ::slotted(label){--panel-width:calc(var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20))) * 10);--panel-height:calc(var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20))) * 10)}:host([size=md]),:host([size=md]) ::slotted(label){--panel-width:calc(var(--cds-global-space-6, calc(12 * 1rem / var(--cds-global-base, 20))) * 20);--panel-height:calc(var(--cds-global-space-6, calc(12 * 1rem / var(--cds-global-base, 20))) * 20)}:host([size=lg]),:host([size=lg]) ::slotted(label){--panel-width:calc(var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20))) * 20);--panel-height:calc(var(--cds-global-space-8, calc(18 * 1rem / var(--cds-global-base, 20))) * 20)}:host([size=xl]),:host([size=xl]) ::slotted(label){--panel-width:calc(var(--cds-global-space-6, calc(12 * 1rem / var(--cds-global-base, 20))) * 40);--panel-height:calc(var(--cds-global-space-6, calc(12 * 1rem / var(--cds-global-base, 20))) * 40)}`;export{l as default};
 //# sourceMappingURL=selection-panel.element.scss.js.map

package/styles/module.layout.css

@@ -16,15 +16,15 @@
  */
 :root,
 :host {
-  --δ1: var(--cds-global-layout-space-xxxs, 0.125rem);
-  --δ2: var(--cds-global-layout-space-xxs, 0.25rem);
-  --δ3: var(--cds-global-layout-space-xs, 0.5rem);
-  --δ4: var(--cds-global-layout-space-sm, 0.75rem);
-  --δ5: var(--cds-global-layout-space-md, 1rem);
-  --δ6: var(--cds-global-layout-space-lg, 1.5rem);
-  --δ7: var(--cds-global-layout-space-xl, 2rem);
-  --δ8: var(--cds-global-layout-space-xxl, 3rem);
-  --δ9: var(--cds-global-layout-space-xxxl, 4rem);
+  --δ1: var(--cds-global-layout-space-xxxs, calc(2 * 1rem / var(--cds-global-base, 20)));
+  --δ2: var(--cds-global-layout-space-xxs, calc(4 * 1rem / var(--cds-global-base, 20)));
+  --δ3: var(--cds-global-layout-space-xs, calc(8 * 1rem / var(--cds-global-base, 20)));
+  --δ4: var(--cds-global-layout-space-sm, calc(12 * 1rem / var(--cds-global-base, 20)));
+  --δ5: var(--cds-global-layout-space-md, calc(16 * 1rem / var(--cds-global-base, 20)));
+  --δ6: var(--cds-global-layout-space-lg, calc(24 * 1rem / var(--cds-global-base, 20)));
+  --δ7: var(--cds-global-layout-space-xl, calc(32 * 1rem / var(--cds-global-base, 20)));
+  --δ8: var(--cds-global-layout-space-xxl, calc(48 * 1rem / var(--cds-global-base, 20)));
+  --δ9: var(--cds-global-layout-space-xxxl, calc(64 * 1rem / var(--cds-global-base, 20)));
 }
 
 /*