@cds/core 5.7.0 → 6.0.0-beta.2

package/internal-components/popup/popup.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.element.js","sources":["../../../../src/internal-components/popup/popup.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 { animate, AnimationResponsivePopupEnterName, baseStyles, event, getElementUpdates, i18n, I18nService, isScrollable, property, querySlot, reverseAnimation, setAttributes, setPopupPosition, state, ariaPopup, } from '@cds/core/internal';\nimport { html } from 'lit';\nimport { query } from 'lit/decorators/query.js';\nimport { CdsInternalStaticOverlay } from '@cds/core/internal-components/overlay';\nimport sharedStyles from '../overlay/shared.element.scss';\nimport styles from './popup.element.scss';\n/**\n * ```typescript\n * import '@cds/core/internal-components/popup/register.js';\n * ```\n *\n * ```html\n * <cds-internal-popup>\n *  <section cds-layout=\"vertical align:horizontal-stretch\">\n *    <div cds-layout=\"vertical pad:md gap:md\">\n *      <h2 cds-text=\"display\">A Title</h2>\n *      <div>\n *        <p cds-text=\"body\">\n *          Content inside a generic popup.\n *        </p>\n *      </div>\n *    </div>\n *  </section>\n * </cds-internal-popup>\n * ```\n *\n * @beta\n * @element cds-internal-popup\n * @slot - Content slot for the content inside the popup's panel\n * @event closeChange - Notify user when close event has occurred\n * @cssprop --active-corner-border-radius\n * @cssprop --background\n * @cssprop --backdrop-background\n * @cssprop --layered-backdrop-background\n * @cssprop --border-color\n * @cssprop --border-radius\n * @cssprop --border-width\n * @cssprop --box-shadow\n * @cssprop --close-button-offset\n * @cssprop --color\n * @cssprop --min-height\n * @cssprop --min-width\n * @cssprop --max-height\n * @cssprop --max-width\n * @cssprop --mobile-max-height\n * @cssprop --overflow - sets overflow x and y values respectively\n * @cssprop --height\n * @cssprop --width\n * @cssprop --animation-duration\n * @cssprop --animation-easing\n *\n * KNOWN ISSUE: Safari jumps through the exit animation but only when the ESC key is pressed.\n *\n */\nlet CdsInternalPopup = class CdsInternalPopup extends CdsInternalStaticOverlay {\n    constructor() {\n        // --- mixins/composables ---\n        super(...arguments);\n        this.i18n = I18nService.keys.popup;\n        this.cdsMotion = 'on';\n        /**\n         * force responsive by setting orientation to 'none'.\n         * do not manipulate the responsive property because the\n         * positioning logic may override your changes.\n         */\n        /** @private */\n        this.responsive = false;\n        this.anchorAlign = 'start';\n        // --- pointer ---\n        this.pointerAlign = 'start';\n        // TODO: TESTME\n        /**\n         * Forces a pointer to show with popup from known pointer types\n         * @type {'angle' | 'default'}\n         */\n        this.defaultPointerType = null;\n        // --- observers and callbacks ---\n        this.observers = [];\n    }\n    // this getter is stealth private so we can test it in isolation\n    /** @private */\n    get anchorElement() {\n        const anchor = this.anchor;\n        // if string we have an id\n        if (typeof anchor === 'string') {\n            // check shadowRoot first in the event that we have a wrapper web component\n            const shadowAnchor = this.getRootNode().querySelector(`#${anchor}`);\n            if (shadowAnchor === null) {\n                // check document/light-dom next; lookup below returns an element or null\n                return this.getRootNode({ composed: true }).querySelector(`#${this.anchor}`);\n            }\n            else {\n                return shadowAnchor;\n            }\n        }\n        // anchor is not an id/string; so return whatever it is\n        return anchor;\n    }\n    /** @private */\n    get anchorRect() {\n        return this.anchorElement?.getBoundingClientRect() || new DOMRect();\n    }\n    setUpPositioningObserver() {\n        this.observers.push(getElementUpdates(this, 'hidden', () => {\n            if (this.hidden === false) {\n                setPopupPosition(this);\n            }\n        }));\n    }\n    connectedCallback() {\n        if (!this.pointer && this.defaultPointerType) {\n            const defaultPointer = document.createElement('cds-internal-pointer');\n            defaultPointer.type = this.defaultPointerType;\n            this.appendChild(defaultPointer);\n        }\n        super.connectedCallback();\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        this.observers.forEach(o => o?.disconnect());\n    }\n    // --- lifecycle ---\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        this.setUpPositioningObserver();\n    }\n    updated(props) {\n        if (this.pointer && !this.pointer.hasAttribute('part')) {\n            setAttributes(this.pointer, ['part', 'pointer']);\n        }\n        if (props.has('hidden')) {\n            setAttributes(this.contentWrapper, ['tabindex', isScrollable(this.contentWrapper) ? '0' : false]);\n        }\n        super.updated(props);\n    }\n    // --- render and styles ---\n    render() {\n        return html `\n      ${this.backdropTemplate}\n      <div class=\"private-host\" tabindex=\"-1\">\n        <div cds-layout=\"display:screen-reader-only\">${this.i18n.contentStart}</div>\n        <div class=\"popup-wrapper\">\n          <div class=\"popup-content\">\n            ${this.closable || this.responsive ? this.closeButtonTemplate : ''}\n            <slot></slot>\n          </div>\n          <div class=\"pointer-wrapper\">\n            <div class=\"popup-pointer\"><slot name=\"pointer\"></slot></div>\n          </div>\n        </div>\n        <div cds-layout=\"display:screen-reader-only\">${this.i18n.contentEnd}</div>\n      </div>\n    `;\n    }\n    static get styles() {\n        return [baseStyles, styles, sharedStyles];\n    }\n};\n__decorate([\n    i18n()\n], CdsInternalPopup.prototype, \"i18n\", void 0);\n__decorate([\n    property({ type: String })\n], CdsInternalPopup.prototype, \"cdsMotion\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true, attribute: 'responsive' })\n], CdsInternalPopup.prototype, \"responsive\", void 0);\n__decorate([\n    event()\n], CdsInternalPopup.prototype, \"cdsMotionChange\", void 0);\n__decorate([\n    property({ type: Object })\n], CdsInternalPopup.prototype, \"trigger\", void 0);\n__decorate([\n    property({ type: String })\n], CdsInternalPopup.prototype, \"anchor\", void 0);\n__decorate([\n    property({ type: String })\n], CdsInternalPopup.prototype, \"anchorAlign\", void 0);\n__decorate([\n    property({ type: Number })\n], CdsInternalPopup.prototype, \"mainAxisOffset\", void 0);\n__decorate([\n    property({ type: Number })\n], CdsInternalPopup.prototype, \"crossAxisOffset\", void 0);\n__decorate([\n    property({ type: String })\n], CdsInternalPopup.prototype, \"orientation\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsInternalPopup.prototype, \"closable\", void 0);\n__decorate([\n    property({ type: String })\n], CdsInternalPopup.prototype, \"pointerAlign\", void 0);\n__decorate([\n    property({ type: String })\n], CdsInternalPopup.prototype, \"defaultPointerType\", void 0);\n__decorate([\n    querySlot('cds-internal-pointer', { assign: 'pointer' })\n], CdsInternalPopup.prototype, \"pointer\", void 0);\n__decorate([\n    query('.popup-pointer')\n], CdsInternalPopup.prototype, \"pointerWrapper\", void 0);\n__decorate([\n    query('.private-host')\n], CdsInternalPopup.prototype, \"hostWrapper\", void 0);\n__decorate([\n    query('.popup-wrapper')\n], CdsInternalPopup.prototype, \"popupWrapper\", void 0);\n__decorate([\n    query('.popup-content')\n], CdsInternalPopup.prototype, \"contentWrapper\", void 0);\nCdsInternalPopup = __decorate([\n    ariaPopup(),\n    animate({\n        hidden: {\n            true: reverseAnimation(AnimationResponsivePopupEnterName),\n            false: AnimationResponsivePopupEnterName,\n        },\n    })\n], CdsInternalPopup);\nexport { CdsInternalPopup };\n"],"names":["CdsInternalPopup","CdsInternalStaticOverlay","constructor","super","this","i18n","I18nService","keys","popup","cdsMotion","responsive","anchorAlign","pointerAlign","defaultPointerType","observers","anchorElement","anchor","shadowAnchor","getRootNode","querySelector","composed","anchorRect","getBoundingClientRect","DOMRect","setUpPositioningObserver","push","getElementUpdates","hidden","setPopupPosition","connectedCallback","pointer","defaultPointer","document","createElement","type","appendChild","disconnectedCallback","forEach","o","disconnect","firstUpdated","props","updated","hasAttribute","setAttributes","has","contentWrapper","isScrollable","render","html","backdropTemplate","contentStart","closable","closeButtonTemplate","contentEnd","styles","baseStyles","sharedStyles","__decorate","prototype","property","String","state","Boolean","reflect","attribute","event","Object","Number","querySlot","assign","query","ariaPopup","animate","true","reverseAnimation","AnimationResponsivePopupEnterName","false"],"mappings":"gkBA4DG,IAACA,EAAmB,cAA+BC,EAClDC,cAEIC,oBACAC,KAAKC,KAAOC,EAAYC,KAAKC,MAC7BJ,KAAKK,UAAY,KAOjBL,KAAKM,YAAa,EAClBN,KAAKO,YAAc,QAEnBP,KAAKQ,aAAe,QAMpBR,KAAKS,mBAAqB,KAE1BT,KAAKU,UAAY,GAIjBC,oBACA,MAAMC,EAASZ,KAAKY,OAEpB,GAAsB,iBAAXA,EAAqB,CAE5B,MAAMC,EAAeb,KAAKc,cAAcC,cAAc,IAAIH,GAC1D,OAAqB,OAAjBC,EAEOb,KAAKc,YAAY,CAAEE,UAAU,IAAQD,cAAc,IAAIf,KAAKY,QAG5DC,EAIf,OAAOD,EAGPK,iBACA,OAAOjB,KAAKW,eAAeO,yBAA2B,IAAIC,QAE9DC,2BACIpB,KAAKU,UAAUW,KAAKC,EAAkBtB,KAAM,UAAU,MAC9B,IAAhBA,KAAKuB,QACLC,EAAiBxB,UAI7ByB,oBACI,IAAKzB,KAAK0B,SAAW1B,KAAKS,mBAAoB,CAC1C,MAAMkB,EAAiBC,SAASC,cAAc,wBAC9CF,EAAeG,KAAO9B,KAAKS,mBAC3BT,KAAK+B,YAAYJ,GAErB5B,MAAM0B,oBAEVO,uBACIjC,MAAMiC,uBACNhC,KAAKU,UAAUuB,SAAQC,GAAKA,GAAGC,eAGnCC,aAAaC,GACTtC,MAAMqC,aAAaC,GACnBrC,KAAKoB,2BAETkB,QAAQD,GACArC,KAAK0B,UAAY1B,KAAK0B,QAAQa,aAAa,SAC3CC,EAAcxC,KAAK0B,QAAS,CAAC,OAAQ,YAErCW,EAAMI,IAAI,WACVD,EAAcxC,KAAK0C,eAAgB,CAAC,aAAYC,EAAa3C,KAAK0C,iBAAkB,MAExF3C,MAAMuC,QAAQD,GAGlBO,SACI,OAAOC,CAAK,GACZ7C,KAAK8C,wGAE0C9C,KAAKC,KAAK8C,2EAGnD/C,KAAKgD,UAAYhD,KAAKM,WAAaN,KAAKiD,oBAAsB,2KAOrBjD,KAAKC,KAAKiD,yBAIlDC,oBACP,MAAO,CAACC,EAAYD,EAAQE,KAGpCC,EAAW,CACPrD,KACDL,EAAiB2D,UAAW,YAAQ,GACvCD,EAAW,CACPE,EAAS,CAAE1B,KAAM2B,UAClB7D,EAAiB2D,UAAW,iBAAa,GAC5CD,EAAW,CACPI,EAAM,CAAE5B,KAAM6B,QAASC,SAAS,EAAMC,UAAW,gBAClDjE,EAAiB2D,UAAW,kBAAc,GAC7CD,EAAW,CACPQ,KACDlE,EAAiB2D,UAAW,uBAAmB,GAClDD,EAAW,CACPE,EAAS,CAAE1B,KAAMiC,UAClBnE,EAAiB2D,UAAW,eAAW,GAC1CD,EAAW,CACPE,EAAS,CAAE1B,KAAM2B,UAClB7D,EAAiB2D,UAAW,cAAU,GACzCD,EAAW,CACPE,EAAS,CAAE1B,KAAM2B,UAClB7D,EAAiB2D,UAAW,mBAAe,GAC9CD,EAAW,CACPE,EAAS,CAAE1B,KAAMkC,UAClBpE,EAAiB2D,UAAW,sBAAkB,GACjDD,EAAW,CACPE,EAAS,CAAE1B,KAAMkC,UAClBpE,EAAiB2D,UAAW,uBAAmB,GAClDD,EAAW,CACPE,EAAS,CAAE1B,KAAM2B,UAClB7D,EAAiB2D,UAAW,mBAAe,GAC9CD,EAAW,CACPE,EAAS,CAAE1B,KAAM6B,WAClB/D,EAAiB2D,UAAW,gBAAY,GAC3CD,EAAW,CACPE,EAAS,CAAE1B,KAAM2B,UAClB7D,EAAiB2D,UAAW,oBAAgB,GAC/CD,EAAW,CACPE,EAAS,CAAE1B,KAAM2B,UAClB7D,EAAiB2D,UAAW,0BAAsB,GACrDD,EAAW,CACPW,EAAU,uBAAwB,CAAEC,OAAQ,aAC7CtE,EAAiB2D,UAAW,eAAW,GAC1CD,EAAW,CACPa,EAAM,mBACPvE,EAAiB2D,UAAW,sBAAkB,GACjDD,EAAW,CACPa,EAAM,kBACPvE,EAAiB2D,UAAW,mBAAe,GAC9CD,EAAW,CACPa,EAAM,mBACPvE,EAAiB2D,UAAW,oBAAgB,GAC/CD,EAAW,CACPa,EAAM,mBACPvE,EAAiB2D,UAAW,sBAAkB,GACjD3D,EAAmB0D,EAAW,CAC1Bc,IACAC,EAAQ,CACJ9C,OAAQ,CACJ+C,KAAMC,EAAiBC,GACvBC,MAAOD,MAGhB5E"}

package/internal-components/popup/popup.element.scss.js

@@ -0,0 +1,2 @@
+import{css as o}from"lit";var t=o`:host{--backdrop-background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--layered-backdrop-background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--border-color:var(--cds-alias-object-border-color, var(--cds-global-color-construction-200, #cbd4d8));--border-width:var(--cds-alias-object-border-width-100, 0.0625rem);--border-radius:var(--cds-alias-object-border-radius-100, 0.25rem);--padding:var(--cds-global-space-7, 1rem);--active-corner-border-radius:0;--color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--close-button-offset:var(--cds-global-space-1, 0.0625rem);--background:var(--cds-alias-object-interaction-background, var(--cds-global-color-white, white));--box-shadow:var(--cds-alias-object-shadow-100, 0 calc(1 / var(--cds-global-base, 20) * 1rem) calc(3 / var(--cds-global-base, 20) * 1rem) 0 rgba(27, 43, 50, 0.5));--min-width:6rem;--max-width:18rem;--width:fit-content;--height:auto;--max-height:auto;--mobile-max-height:66vh;--overflow:hidden auto;--animation-duration:var(--cds-global-animation-duration-primary, 0.4s);--animation-easing:var(--cds-global-animation-easing-primary, cubic-bezier(0, 0.99, 0, 0.99));position:fixed;top:0;bottom:0;left:0;right:0;z-index:1000000}::slotted(cds-internal-pointer){--pointer-fill:var(--background);--pointer-outline:var(--border-color)}.private-host{display:block;position:relative}.popup-wrapper{display:flex;flex-direction:column;width:fit-content}.popup-content{background:var(--background);color:var(--color);border-radius:var(--border-radius);border-color:var(--border-color);border-width:var(--border-width);border-style:solid;box-shadow:var(--box-shadow);min-width:var(--min-width);padding:var(--padding);width:var(--width);max-width:var(--max-width);height:var(--height);max-height:var(--max-height);overflow:var(--overflow);position:relative}:host([_position-at="popup-left pointer-top"]) .popup-content,:host([_position-at="popup-top pointer-left"]) .popup-content{border-top-left-radius:var(--active-corner-border-radius)}:host([_position-at="popup-right pointer-top"]) .popup-content,:host([_position-at="popup-top pointer-right"]) .popup-content{border-top-right-radius:var(--active-corner-border-radius)}:host([_position-at="popup-bottom pointer-right"]) .popup-content,:host([_position-at="popup-right pointer-bottom"]) .popup-content{border-bottom-right-radius:var(--active-corner-border-radius)}:host([_position-at="popup-bottom pointer-left"]) .popup-content,:host([_position-at="popup-left pointer-bottom"]) .popup-content{border-bottom-left-radius:var(--active-corner-border-radius)}:host([_pointer-type=default]){--active-corner-border-radius:var(--border-radius)}cds-internal-close-button{position:absolute;top:var(--close-button-offset);right:var(--close-button-offset);margin:var(--cds-global-space-3,.25rem)}:host([_position-at*=popup-top]) .popup-wrapper{flex-direction:column-reverse}:host([_position-at*=popup-top]) .popup-pointer{transform:translateY(var(--border-width))}:host([_position-at*=pointer-center]) .popup-wrapper,:host([_position-at*=pointer-mid]) .popup-wrapper{align-items:center}:host([_position-at="popup-top pointer-right"]) .popup-wrapper{align-items:flex-end}:host([_position-at="popup-top pointer-right"]) .popup-pointer{transform:scaleX(-1) translateY(var(--border-width))}:host([_position-at*=popup-bottom]) .popup-pointer{transform:scaleY(-1) translateY(var(--border-width))}:host([_position-at="popup-bottom pointer-right"]) .popup-wrapper{align-items:flex-end}:host([_position-at="popup-bottom pointer-right"]) .popup-pointer{transform:scaleY(-1) scaleX(-1) translateY(var(--border-width))}:host([_position-at*=popup-left]) .popup-wrapper{flex-direction:row-reverse}:host([_position-at*=popup-left]) .popup-pointer{transform-origin:right top;transform:scaleY(-1) rotate(-90deg) translateY(calc(-100% + var(--border-width))) translateX(100%)}:host([_position-at="popup-left pointer-bottom"]) .popup-wrapper{align-items:flex-end}:host([_position-at="popup-left pointer-bottom"]) .popup-pointer{transform:rotate(90deg) scaleY(-1) translateY(var(--border-width));transform-origin:bottom right}:host([_position-at="popup-left pointer-bottom"][_pointer-type=angle]) .pointer-wrapper{transform-origin:center center;transform:scaleY(-1)}:host([_position-at*=popup-right]) .popup-wrapper{flex-direction:row}:host([_position-at*=popup-right]) .popup-pointer{transform-origin:left top;transform:rotate(90deg) translateY(calc(-100% + var(--border-width)))}:host([_position-at="popup-right pointer-bottom"]) .popup-wrapper{align-items:flex-end}:host([_position-at="popup-right pointer-bottom"]) .popup-pointer{transform:rotate(-90deg) scaleY(-1) translateY(var(--border-width));transform-origin:bottom left}:host(:not([responsive])){--backdrop-background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))}:host([responsive]){--backdrop-background:var(--cds-alias-object-overlay-backdrop-background, rgba(0, 0, 0, 0.6))}:host([responsive]) cds-internal-pointer{display:none}:host([responsive]) .popup-content,:host([responsive]) .popup-wrapper,:host([responsive]) .private-host{width:100%;max-width:100%;height:auto;max-height:var(--mobile-max-height)}:host([responsive]) .private-host{position:absolute;bottom:0;left:0}:host([responsive]) .popup-content{border-radius:0}:host([responsive]) .pointer-wrapper{display:none}:host([cds-motion][_cds-animation-status=active]){display:inline-flex!important}:host([hidden]){--animation-duration:var(--cds-global-animation-duration-secondary, 0.3s)}:host([hidden*=false]){display:inline-flex!important}`;export{t as default};
+//# sourceMappingURL=popup.element.scss.js.map

package/internal-components/popup/popup.element.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.element.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/internal-components/popup/register.d.ts

@@ -0,0 +1,9 @@
+import '@cds/core/internal-components/close-button/register.js';
+import { CdsInternalPopup } from './popup.element.js';
+import { CdsInternalPointer } from './pointer.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'cds-internal-popup': CdsInternalPopup;
+        'cds-internal-pointer': CdsInternalPointer;
+    }
+}

package/internal-components/popup/register.js

@@ -0,0 +1,2 @@
+import"@cds/core/internal-components/close-button/register.js";import{ClarityMotion as e,AnimationResponsivePopupEnterName as o,AnimationResponsivePopupEnterConfig as r,registerElementSafely as t}from"@cds/core/internal";import{CdsInternalPopup as n}from"./popup.element.js";import{CdsInternalPointer as p}from"./pointer.element.js";e.add(o,r),t("cds-internal-popup",n),t("cds-internal-pointer",p);
+//# sourceMappingURL=register.js.map

package/internal-components/popup/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","sources":["../../../../src/internal-components/popup/register.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 '@cds/core/internal-components/close-button/register.js';\nimport { registerElementSafely, ClarityMotion, AnimationResponsivePopupEnterName, AnimationResponsivePopupEnterConfig, } from '@cds/core/internal';\nimport { CdsInternalPopup } from './popup.element.js';\nimport { CdsInternalPointer } from './pointer.element.js';\nClarityMotion.add(AnimationResponsivePopupEnterName, AnimationResponsivePopupEnterConfig);\nregisterElementSafely('cds-internal-popup', CdsInternalPopup);\nregisterElementSafely('cds-internal-pointer', CdsInternalPointer);\n"],"names":["ClarityMotion","add","AnimationResponsivePopupEnterName","AnimationResponsivePopupEnterConfig","registerElementSafely","CdsInternalPopup","CdsInternalPointer"],"mappings":"6UASAA,EAAcC,IAAIC,EAAmCC,GACrDC,EAAsB,qBAAsBC,GAC5CD,EAAsB,uBAAwBE"}

package/internal-components/popup/utils/pointer.utils.d.ts

@@ -0,0 +1,2 @@
+import { TemplateResult } from 'lit';
+export declare function getPointer(type: string): TemplateResult<2>;

package/internal-components/popup/utils/pointer.utils.js

@@ -0,0 +1,2 @@
+import{svg as t}from"lit";function r(r){return"angle"===r?t`<svg part="pointer-img" class="pointer-img angle-pointer" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" height="12" width="12"><path part="pointer-fill" class="pointer-fill" d="M0 12, 0 0, 12 12Z"></path><path part="pointer-border" class="pointer-border" d="M0 12, 0 0, 12 12, 10 12, 1.4 3, 1.4 12Z"></path></svg>`:t`<svg part="pointer-img" class="pointer-img default-pointer" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M8 10L14 16H2L8 10Z" part="pointer-fill" class="pointer-fill"></path><path d="M8 10L14 16H12.6L8 11.4L3.4 16H2L8 10Z" part="pointer-border" class="pointer-border"></path></svg>`}export{r as getPointer};
+//# sourceMappingURL=pointer.utils.js.map

package/internal-components/popup/utils/pointer.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pointer.utils.js","sources":["../../../../../src/internal-components/popup/utils/pointer.utils.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { svg } from 'lit';\n/* c8 ignore next */\nexport function getPointer(type) {\n    if (type === 'angle') {\n        return svg `<svg part=\"pointer-img\" class=\"pointer-img angle-pointer\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" height=\"12\" width=\"12\">\n        <path part=\"pointer-fill\" class=\"pointer-fill\" d=\"M0 12, 0 0, 12 12Z\"></path>\n        <path part=\"pointer-border\" class=\"pointer-border\" d=\"M0 12, 0 0, 12 12, 10 12, 1.4 3, 1.4 12Z\"></path>\n      </svg>`;\n    }\n    else {\n        return svg `<svg part=\"pointer-img\" class=\"pointer-img default-pointer\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M8 10L14 16H2L8 10Z\" part=\"pointer-fill\" class=\"pointer-fill\"></path>\n      <path d=\"M8 10L14 16H12.6L8 11.4L3.4 16H2L8 10Z\" part=\"pointer-border\" class=\"pointer-border\"></path>\n    </svg>`;\n    }\n}\n"],"names":["getPointer","type","svg"],"mappings":"0BAOO,SAASA,EAAWC,GACvB,MAAa,UAATA,EACOC,CAAI,wVAMJA,CAAI"}

package/internal-components/split-handle/index.d.ts

@@ -0,0 +1 @@
+export * from './split-handle.element.js';

package/internal-components/split-handle/index.js

@@ -0,0 +1,2 @@
+export{CdsInternalSplitHandle}from"./split-handle.element.js";
+//# sourceMappingURL=index.js.map

package/internal-components/split-handle/index.js.map

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

package/internal-components/split-handle/register.d.ts

@@ -0,0 +1,7 @@
+import { CdsInternalSplitHandle } from './split-handle.element.js';
+import '@cds/core/icon/register.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'cds-internal-split-handle': CdsInternalSplitHandle;
+    }
+}

package/internal-components/split-handle/register.js

@@ -0,0 +1,2 @@
+import{registerElementSafely as e}from"@cds/core/internal";import{CdsInternalSplitHandle as r}from"./split-handle.element.js";import"@cds/core/icon/register.js";e("cds-internal-split-handle",r);
+//# sourceMappingURL=register.js.map

package/internal-components/split-handle/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","sources":["../../../../src/internal-components/split-handle/register.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 { registerElementSafely } from '@cds/core/internal';\nimport { CdsInternalSplitHandle } from './split-handle.element.js';\nimport '@cds/core/icon/register.js';\nregisterElementSafely('cds-internal-split-handle', CdsInternalSplitHandle);\n"],"names":["registerElementSafely","CdsInternalSplitHandle"],"mappings":"iKAQAA,EAAsB,4BAA6BC"}

package/internal-components/split-handle/split-handle.element.d.ts

@@ -0,0 +1,38 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * Button Split
+ *
+ * ```typescript
+ * import '@cds/core/internal-components/split-handle/register.js';
+ * ```
+ *
+ * ```html
+ * <cds-internal-split-handle>
+ *  <input type="range" step="10" aria-label="resize" />
+ * </cds-internal-split-handle>
+ * ```
+ * @beta
+ * @element cds-internal-split-handle
+ * @slot - For projecting range input
+ */
+export declare class CdsInternalSplitHandle extends LitElement {
+    i18n: {
+        sort: string;
+        expand: string;
+        close: string;
+        resize: string;
+        filter: string;
+    };
+    direction: 'vertical' | 'horizontal';
+    protected readonly: boolean;
+    protected focused: boolean;
+    private step;
+    private range;
+    static styles: import("lit").CSSResultGroup[];
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    firstUpdated(props: PropertyValues): void;
+    private toughStart;
+    private touchEnd;
+    private touchMove;
+}

package/internal-components/split-handle/split-handle.element.js

@@ -0,0 +1,2 @@
+import{__decorate as t}from"tslib";import{LitElement as e,html as s}from"lit";import{I18nService as i,i18n as r,property as o,state as n,querySlot as a,touch as d}from"@cds/core/internal";import h from"./split-handle.element.scss.js";let c=class extends e{constructor(){super(...arguments);this.i18n=i.keys.actions,this.direction="vertical",this.readonly=!1,this.focused=!1,this.step="1"}render(){return s`<div class="private-host"><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.readonly=!this.range}firstUpdated(t){super.firstUpdated(t),this.range&&(this.range.ariaLabel=this.range.ariaLabel?this.range.ariaLabel:this.i18n.resize,this.range.addEventListener("focus",(()=>this.focused=!0)),this.range.addEventListener("blur",(()=>this.focused=!1)),this.addEventListener("cdsTouchStart",(()=>this.toughStart())),this.addEventListener("cdsTouchEnd",(()=>this.touchEnd())),this.addEventListener("cdsTouchMove",(t=>this.touchMove(t))))}toughStart(){this.focused=!0,this.step=this.range.step,this.range.step="1"}touchEnd(){this.focused=!1,this.range.step=this.step}touchMove(t){const e="vertical"===this.direction?t.detail.offsetX:t.detail.offsetY;this.range.valueAsNumber=this.range.valueAsNumber+e,requestAnimationFrame((()=>this.range.dispatchEvent(new Event("input"))))}};c.styles=[h],t([r()],c.prototype,"i18n",void 0),t([o({type:String})],c.prototype,"direction",void 0),t([n({type:Boolean,reflect:!0})],c.prototype,"readonly",void 0),t([n({type:Boolean,reflect:!0})],c.prototype,"focused",void 0),t([n()],c.prototype,"step",void 0),t([a("input")],c.prototype,"range",void 0),c=t([d()],c);export{c as CdsInternalSplitHandle};
+//# sourceMappingURL=split-handle.element.js.map

package/internal-components/split-handle/split-handle.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-handle.element.js","sources":["../../../../src/internal-components/split-handle/split-handle.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 { i18n, I18nService, state, property, querySlot, touch } from '@cds/core/internal';\nimport styles from './split-handle.element.scss';\n/**\n * Button Split\n *\n * ```typescript\n * import '@cds/core/internal-components/split-handle/register.js';\n * ```\n *\n * ```html\n * <cds-internal-split-handle>\n *  <input type=\"range\" step=\"10\" aria-label=\"resize\" />\n * </cds-internal-split-handle>\n * ```\n * @beta\n * @element cds-internal-split-handle\n * @slot - For projecting range input\n */\nlet CdsInternalSplitHandle = class CdsInternalSplitHandle extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.i18n = I18nService.keys.actions;\n        this.direction = 'vertical';\n        this.readonly = false;\n        this.focused = false;\n        this.step = '1';\n    }\n    render() {\n        return html `\n      <div class=\"private-host\">\n        <slot></slot>\n      </div>\n    `;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.readonly = !this.range;\n    }\n    firstUpdated(props) {\n        super.firstUpdated(props);\n        if (this.range) {\n            this.range.ariaLabel = this.range.ariaLabel ? this.range.ariaLabel : this.i18n.resize;\n            this.range.addEventListener('focus', () => (this.focused = true));\n            this.range.addEventListener('blur', () => (this.focused = false));\n            this.addEventListener('cdsTouchStart', () => this.toughStart());\n            this.addEventListener('cdsTouchEnd', () => this.touchEnd());\n            this.addEventListener('cdsTouchMove', (e) => this.touchMove(e));\n        }\n    }\n    toughStart() {\n        this.focused = true;\n        this.step = this.range.step;\n        this.range.step = '1';\n    }\n    touchEnd() {\n        this.focused = false;\n        this.range.step = this.step;\n    }\n    touchMove(e) {\n        const offset = this.direction === 'vertical' ? e.detail.offsetX : e.detail.offsetY;\n        this.range.valueAsNumber = this.range.valueAsNumber + offset;\n        requestAnimationFrame(() => this.range.dispatchEvent(new Event('input')));\n    }\n};\nCdsInternalSplitHandle.styles = [styles];\n__decorate([\n    i18n()\n], CdsInternalSplitHandle.prototype, \"i18n\", void 0);\n__decorate([\n    property({ type: String })\n], CdsInternalSplitHandle.prototype, \"direction\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsInternalSplitHandle.prototype, \"readonly\", void 0);\n__decorate([\n    state({ type: Boolean, reflect: true })\n], CdsInternalSplitHandle.prototype, \"focused\", void 0);\n__decorate([\n    state()\n], CdsInternalSplitHandle.prototype, \"step\", void 0);\n__decorate([\n    querySlot('input')\n], CdsInternalSplitHandle.prototype, \"range\", void 0);\nCdsInternalSplitHandle = __decorate([\n    touch()\n], CdsInternalSplitHandle);\nexport { CdsInternalSplitHandle };\n"],"names":["CdsInternalSplitHandle","LitElement","constructor","super","this","i18n","I18nService","keys","actions","direction","readonly","focused","step","render","html","connectedCallback","range","firstUpdated","props","ariaLabel","resize","addEventListener","toughStart","touchEnd","e","touchMove","offset","detail","offsetX","offsetY","valueAsNumber","requestAnimationFrame","dispatchEvent","Event","styles","__decorate","prototype","property","type","String","state","Boolean","reflect","querySlot","touch"],"mappings":"0OAyBG,IAACA,EAAyB,cAAqCC,EAC9DC,cACIC,oBACAC,KAAKC,KAAOC,EAAYC,KAAKC,QAC7BJ,KAAKK,UAAY,WACjBL,KAAKM,UAAW,EAChBN,KAAKO,SAAU,EACfP,KAAKQ,KAAO,IAEhBC,SACI,OAAOC,CAAK,gDAMhBC,oBACIZ,MAAMY,oBACNX,KAAKM,UAAYN,KAAKY,MAE1BC,aAAaC,GACTf,MAAMc,aAAaC,GACfd,KAAKY,QACLZ,KAAKY,MAAMG,UAAYf,KAAKY,MAAMG,UAAYf,KAAKY,MAAMG,UAAYf,KAAKC,KAAKe,OAC/EhB,KAAKY,MAAMK,iBAAiB,SAAS,IAAOjB,KAAKO,SAAU,IAC3DP,KAAKY,MAAMK,iBAAiB,QAAQ,IAAOjB,KAAKO,SAAU,IAC1DP,KAAKiB,iBAAiB,iBAAiB,IAAMjB,KAAKkB,eAClDlB,KAAKiB,iBAAiB,eAAe,IAAMjB,KAAKmB,aAChDnB,KAAKiB,iBAAiB,gBAAiBG,GAAMpB,KAAKqB,UAAUD,MAGpEF,aACIlB,KAAKO,SAAU,EACfP,KAAKQ,KAAOR,KAAKY,MAAMJ,KACvBR,KAAKY,MAAMJ,KAAO,IAEtBW,WACInB,KAAKO,SAAU,EACfP,KAAKY,MAAMJ,KAAOR,KAAKQ,KAE3Ba,UAAUD,GACN,MAAME,EAA4B,aAAnBtB,KAAKK,UAA2Be,EAAEG,OAAOC,QAAUJ,EAAEG,OAAOE,QAC3EzB,KAAKY,MAAMc,cAAgB1B,KAAKY,MAAMc,cAAgBJ,EACtDK,uBAAsB,IAAM3B,KAAKY,MAAMgB,cAAc,IAAIC,MAAM,cAGvEjC,EAAuBkC,OAAS,CAACA,GACjCC,EAAW,CACP9B,KACDL,EAAuBoC,UAAW,YAAQ,GAC7CD,EAAW,CACPE,EAAS,CAAEC,KAAMC,UAClBvC,EAAuBoC,UAAW,iBAAa,GAClDD,EAAW,CACPK,EAAM,CAAEF,KAAMG,QAASC,SAAS,KACjC1C,EAAuBoC,UAAW,gBAAY,GACjDD,EAAW,CACPK,EAAM,CAAEF,KAAMG,QAASC,SAAS,KACjC1C,EAAuBoC,UAAW,eAAW,GAChDD,EAAW,CACPK,KACDxC,EAAuBoC,UAAW,YAAQ,GAC7CD,EAAW,CACPQ,EAAU,UACX3C,EAAuBoC,UAAW,aAAS,GAC9CpC,EAAyBmC,EAAW,CAChCS,KACD5C"}

package/internal-components/split-handle/split-handle.element.scss.js

@@ -0,0 +1,2 @@
+import{css as t}from"lit";var o=t`:host{--color:var(--cds-global-color-construction-300, #aeb8bc);--cursor:ew-resize;--padding:0;--height:100%;--width:var(--cds-global-space-1, 0.0625rem);--min-height:var(--cds-alias-object-interaction-touch-target, 2.25rem);--secondary-line-display:block;touch-action:pan-y}.private-host{position:relative;line-height:0;display:block;height:var(--height);width:var(--width);background:var(--color);cursor:var(--cursor);min-height:var(--min-height)}.private-host::before{content:"";position:absolute;display:var(--secondary-line-display);background:var(--color);height:var(--cds-global-space-9,1.5rem);width:var(--cds-global-space-1,.0625rem);right:calc(var(--cds-global-space-3,.25rem)*-1);top:calc(50% - var(--cds-global-space-6,.75rem))}.private-host::after{content:"";position:absolute;inset:0;left:calc((var(--cds-alias-object-interaction-touch-target,2.25rem)/ 2)*-1);min-width:var(--cds-alias-object-interaction-touch-target,2.25rem);min-height:var(--cds-alias-object-interaction-touch-target,2.25rem)}:host([direction=horizontal]){--cursor:ns-resize;--width:100%;--height:var(--cds-global-space-1, 0.0625rem);touch-action:pan-x}:host([direction=horizontal]) .private-host{min-width:var(--cds-alias-object-interaction-touch-target,2.25rem);min-height:auto}:host([direction=horizontal]) .private-host::after{top:calc((var(--cds-alias-object-interaction-touch-target,2.25rem)/ 2)*-1);left:0}:host([direction=horizontal]) .private-host::before{content:"";position:absolute;background:var(--color);height:var(--cds-global-space-1,.0625rem);width:var(--cds-global-space-9,1.5rem);top:var(--cds-global-space-3,.25rem);left:calc(50% - var(--cds-global-space-6,.75rem))}:host(:focus-within){outline:var(--cds-alias-object-interaction-outline,Highlight solid 2px)}@media (-webkit-min-device-pixel-ratio:0){:host(:focus-within){outline-color:-webkit-focus-ring-color}}::slotted(input){clip:rect(0 0 0 0);clip-path:inset(50%);height:var(--cds-global-space-1,.0625rem);width:var(--cds-global-space-1,.0625rem);overflow:hidden;position:absolute;white-space:nowrap}:host([_readonly]){--cursor:default}:host([_readonly]) .private-host::after,:host([_readonly]) .private-host::before{display:none}`;export{o as default};
+//# sourceMappingURL=split-handle.element.scss.js.map

package/internal-components/split-handle/split-handle.element.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-handle.element.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/internal-components/visual-checkbox/visual-checkbox.element.scss.js

@@ -1,2 +1,2 @@
-import{css as a}from"lit";var r=a`:host{--color:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--check-color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white));--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--border-radius:var(--cds-alias-object-border-radius-100, calc(4 / var(--cds-global-base, 20) * 1rem));--border:var(--cds-alias-object-border-width-100, calc(1 / var(--cds-global-base, 20) * 1rem)) solid var(--cds-alias-object-border-color, var(--cds-global-color-construction-200, #cbd4d8))}.private-host,.private-host::before{width:var(--cds-global-space-7,calc(16 / var(--cds-global-base,20) * 1rem));height:var(--cds-global-space-7,calc(16 / var(--cds-global-base,20) * 1rem));display:inline-block}.private-host{position:relative;cursor:inherit}.private-host::before{background:var(--background);border:var(--border);border-radius:var(--border-radius);position:absolute;content:""}.private-host::after{position:absolute;content:"";display:none;height:calc(var(--cds-global-space-3,calc(4 / var(--cds-global-base,20) * 1rem)) + var(--cds-global-space-1,calc(1 / var(--cds-global-base,20) * 1rem)));width:var(--cds-global-space-5,calc(8 / var(--cds-global-base,20) * 1rem));left:var(--cds-global-space-3,calc(4 / var(--cds-global-base,20) * 1rem));border-left:var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)) solid;border-bottom:var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)) solid;border-color:var(--check-color);border-left-color:var(--check-color);border-bottom-color:var(--check-color);border-right-color:var(--check-color);border-top-color:var(--check-color);transform:translateY(var(--cds-global-space-3,calc(4 / var(--cds-global-base,20) * 1rem))) rotate(-45deg)}:host([disabled]){--color:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8));--border:var(--cds-alias-object-border-width-100, calc(1 / var(--cds-global-base, 20) * 1rem)) solid var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))}:host([indeterminate]){--color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169))}:host([indeterminate]) .private-host::after{border-left:none;border-bottom-color:var(--color);display:inline-block;transform:translateY(calc(var(--cds-global-space-1,calc(1 / var(--cds-global-base,20) * 1rem))*.15));top:var(--cds-global-space-3,calc(4 / var(--cds-global-base,20) * 1rem))}:host([selected]){--color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--background:var(--color);--border:var(--cds-alias-object-border-width-100, calc(1 / var(--cds-global-base, 20) * 1rem)) solid var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([selected]) .private-host:after{display:inline-block}`;export{r as default};
+import{css as r}from"lit";var o=r`:host{--color:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--check-color:var(--cds-global-typography-color-100, var(--cds-global-color-white, white));--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0));--border-radius:var(--cds-alias-object-border-radius-100, 0.25rem);--border:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--cds-alias-object-border-color, var(--cds-global-color-construction-200, #cbd4d8))}.private-host,.private-host::before{width:var(--cds-global-space-7,1rem);height:var(--cds-global-space-7,1rem);display:inline-block}.private-host{position:relative;cursor:inherit}.private-host::before{background:var(--background);border:var(--border);border-radius:var(--border-radius);position:absolute;content:""}.private-host::after{position:absolute;content:"";display:none;height:calc(var(--cds-global-space-3,.25rem) + var(--cds-global-space-1,.0625rem));width:var(--cds-global-space-5,.5rem);left:var(--cds-global-space-3,.25rem);border-left:var(--cds-global-space-2,.125rem) solid;border-bottom:var(--cds-global-space-2,.125rem) solid;border-color:var(--check-color);border-left-color:var(--check-color);border-bottom-color:var(--check-color);border-right-color:var(--check-color);border-top-color:var(--check-color);transform:translateY(var(--cds-global-space-3,.25rem)) rotate(-45deg)}:host([disabled]){--color:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8));--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([indeterminate]){--color:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169))}:host([indeterminate]) .private-host::after{border-left:none;border-bottom-color:var(--color);display:inline-block;transform:translateY(calc(var(--cds-global-space-1,.0625rem)*.15));top:var(--cds-global-space-3,.25rem)}:host([selected]){--color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--background:var(--color);--border:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([selected]) .private-host:after{display:inline-block}`;export{o as default};
 //# sourceMappingURL=visual-checkbox.element.scss.js.map

package/list/list.css

@@ -10,7 +10,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 ul[cds-list=unstyled] {
-  padding-left: 0 !important;
+  padding-inline-start: 0 !important;
   margin: 0 !important;
   list-style: "​" !important;
   list-style-position: inside !important;
@@ -23,14 +23,14 @@ ul[cds-list=unstyled] {
 ol[cds-list] {
   list-style-type: decimal;
   list-style-position: outside;
-  padding-left: var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem));
+  padding-inline-start: var(--cds-global-space-9, 1.5rem);
   margin: 0;
 }
 
 ul[cds-list]:not([cds-list=unstyled]) {
   list-style-type: disc;
   list-style-position: outside;
-  padding-left: var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem));
+  padding-inline-start: var(--cds-global-space-9, 1.5rem);
   margin: 0;
 }
 
@@ -80,23 +80,23 @@ ol[cds-list=upper-roman] {
 
 ul[cds-list=unstyled] > li > ul:not([cds-list=unstyled]),
 ul[cds-list=unstyled] > li ol {
-  margin-left: 0;
-  padding-left: var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem));
+  margin-inline-start: 0;
+  padding-inline-start: var(--cds-global-space-9, 1.5rem);
 }
 ul[cds-list=unstyled] > li > ul[cds-list=unstyled] {
-  margin-left: 0;
-  padding-left: var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem)) !important;
+  margin-inline-start: 0;
+  padding-inline-start: var(--cds-global-space-9, 1.5rem) !important;
 }
 
 ul:not([cds-list=unstyled]) > li > ul[cds-list=unstyled],
 ol[cds-list] > li > ul[cds-list=unstyled] {
-  margin-left: 0;
-  padding-left: var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem)) !important;
+  margin-inline-start: 0;
+  padding-inline-start: var(--cds-global-space-9, 1.5rem) !important;
 }
 
 ol[cds-list] > li > ol[cds-list] {
-  margin-left: 0;
-  padding-left: var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem));
+  margin-inline-start: 0;
+  padding-inline-start: var(--cds-global-space-9, 1.5rem);
 }
 
 ul[cds-layout~=horizontal] li,
@@ -111,5 +111,5 @@ dl[cds-list] dt {
   font-weight: bold;
 }
 dl[cds-list] dd {
-  margin-left: 0;
+  margin-inline-start: 0;
 }

package/list/list.min.css

@@ -1 +1 @@
-@charset "UTF-8";ul[cds-list=unstyled]{padding-left:0!important;margin:0!important;list-style:"​"!important;list-style-position:inside!important}[cds-list]{color:var(--cds-global-typography-color-300, var(--cds-global-color-construction-800, #2d4048))}ol[cds-list]{list-style-type:decimal;list-style-position:outside;padding-left:var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem));margin:0}ul[cds-list]:not([cds-list=unstyled]){list-style-type:disc;list-style-position:outside;padding-left:var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem));margin:0}ul[cds-list=disc]{list-style-type:disc}ul[cds-list=circle]{list-style-type:circle}ul[cds-list=square]{list-style-type:square}ol[cds-list=decimal]{list-style-type:decimal}ol[cds-list=decimal-leading-zero]{list-style-type:decimal-leading-zero}ol[cds-list=lower-alpha]{list-style-type:lower-alpha}ol[cds-list=lower-latin]{list-style-type:lower-latin}ol[cds-list=lower-roman]{list-style-type:lower-roman}ol[cds-list=upper-alpha]{list-style-type:upper-alpha}ol[cds-list=upper-latin]{list-style-type:upper-latin}ol[cds-list=upper-roman]{list-style-type:upper-roman}ul[cds-list=unstyled]>li ol,ul[cds-list=unstyled]>li>ul:not([cds-list=unstyled]){margin-left:0;padding-left:var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem))}ul[cds-list=unstyled]>li>ul[cds-list=unstyled]{margin-left:0;padding-left:var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem))!important}ol[cds-list]>li>ul[cds-list=unstyled],ul:not([cds-list=unstyled])>li>ul[cds-list=unstyled]{margin-left:0;padding-left:var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem))!important}ol[cds-list]>li>ol[cds-list]{margin-left:0;padding-left:var(--cds-global-space-9, calc(24 / var(--cds-global-base, 20) * 1rem))}ol[cds-layout~=horizontal] li,ul[cds-layout~=horizontal] li{list-style-position:inside}dl[cds-list]{margin:0}dl[cds-list] dt{font-weight:700}dl[cds-list] dd{margin-left:0}
+@charset "UTF-8";ul[cds-list=unstyled]{padding-inline-start:0!important;margin:0!important;list-style:"​"!important;list-style-position:inside!important}[cds-list]{color:var(--cds-global-typography-color-300, var(--cds-global-color-construction-800, #2d4048))}ol[cds-list]{list-style-type:decimal;list-style-position:outside;padding-inline-start:var(--cds-global-space-9, 1.5rem);margin:0}ul[cds-list]:not([cds-list=unstyled]){list-style-type:disc;list-style-position:outside;padding-inline-start:var(--cds-global-space-9, 1.5rem);margin:0}ul[cds-list=disc]{list-style-type:disc}ul[cds-list=circle]{list-style-type:circle}ul[cds-list=square]{list-style-type:square}ol[cds-list=decimal]{list-style-type:decimal}ol[cds-list=decimal-leading-zero]{list-style-type:decimal-leading-zero}ol[cds-list=lower-alpha]{list-style-type:lower-alpha}ol[cds-list=lower-latin]{list-style-type:lower-latin}ol[cds-list=lower-roman]{list-style-type:lower-roman}ol[cds-list=upper-alpha]{list-style-type:upper-alpha}ol[cds-list=upper-latin]{list-style-type:upper-latin}ol[cds-list=upper-roman]{list-style-type:upper-roman}ul[cds-list=unstyled]>li ol,ul[cds-list=unstyled]>li>ul:not([cds-list=unstyled]){margin-inline-start:0;padding-inline-start:var(--cds-global-space-9, 1.5rem)}ul[cds-list=unstyled]>li>ul[cds-list=unstyled]{margin-inline-start:0;padding-inline-start:var(--cds-global-space-9, 1.5rem)!important}ol[cds-list]>li>ul[cds-list=unstyled],ul:not([cds-list=unstyled])>li>ul[cds-list=unstyled]{margin-inline-start:0;padding-inline-start:var(--cds-global-space-9, 1.5rem)!important}ol[cds-list]>li>ol[cds-list]{margin-inline-start:0;padding-inline-start:var(--cds-global-space-9, 1.5rem)}ol[cds-layout~=horizontal] li,ul[cds-layout~=horizontal] li{list-style-position:inside}dl[cds-list]{margin:0}dl[cds-list] dt{font-weight:700}dl[cds-list] dd{margin-inline-start:0}

package/modal/modal-actions.element.js

@@ -1,2 +1,2 @@
-import{baseStyles as t}from"@cds/core/internal";import{LitElement as s,html as e}from"lit";class o extends s{connectedCallback(){super.connectedCallback(),this.setAttribute("slot","modal-actions")}render(){return this.hasAttribute("cds-layout")?e`<slot></slot>`:e`<div cds-layout="horizontal gap:sm align:right"><slot></slot></div>`}static get styles(){return[t]}}export{o as CdsModalActions};
+import{baseStyles as t}from"@cds/core/internal";import{LitElement as s,html as e}from"lit";class o extends s{connectedCallback(){super.connectedCallback(),this.setAttribute("slot","modal-actions")}render(){return this.hasAttribute("cds-layout")?e`<slot></slot>`:e`<div cds-layout="horizontal gap:xs align:right"><slot></slot></div>`}static get styles(){return[t]}}export{o as CdsModalActions};
 //# sourceMappingURL=modal-actions.element.js.map

package/modal/modal-actions.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-actions.element.js","sources":["../../../src/modal/modal-actions.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 { baseStyles } from '@cds/core/internal';\nimport { html, LitElement } from 'lit';\n/**\n * Web component modal actions to be used inside modal.\n *\n * ```typescript\n * import '@cds/core/modal/register.js';\n * ```\n *\n * ```html\n * <cds-modal>\n *   <cds-modal-header>\n *      <h3 cds-text=\"title\">My Modal</h3>\n *   </cds-modal-header>\n *   <cds-modal-content>\n *     <p>Lorem Ipsum</p>\n *   </cds-modal-content>\n *   <cds-modal-actions>\n *       <cds-button>Ok</cds-button>\n *   </cds-modal-actions>\n * </cds-modal>\n * ```\n *\n * @element cds-modal-actions\n */\nexport class CdsModalActions extends LitElement {\n    connectedCallback() {\n        super.connectedCallback();\n        this.setAttribute('slot', 'modal-actions');\n    }\n    render() {\n        return this.hasAttribute('cds-layout')\n            ? html `<slot></slot>`\n            : html `<div cds-layout=\"horizontal gap:sm align:right\"><slot></slot></div>`;\n    }\n    static get styles() {\n        return [baseStyles];\n    }\n}\n"],"names":["CdsModalActions","LitElement","connectedCallback","super","this","setAttribute","render","hasAttribute","html","styles","baseStyles"],"mappings":"2FA8BO,MAAMA,UAAwBC,EACjCC,oBACIC,MAAMD,oBACNE,KAAKC,aAAa,OAAQ,iBAE9BC,SACI,OAAOF,KAAKG,aAAa,cACnBC,CAAK,gBACLA,CAAK,sEAEJC,oBACP,MAAO,CAACC"}
+{"version":3,"file":"modal-actions.element.js","sources":["../../../src/modal/modal-actions.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 { baseStyles } from '@cds/core/internal';\nimport { html, LitElement } from 'lit';\n/**\n * Web component modal actions to be used inside modal.\n *\n * ```typescript\n * import '@cds/core/modal/register.js';\n * ```\n *\n * ```html\n * <cds-modal>\n *   <cds-modal-header>\n *      <h3 cds-text=\"title\">My Modal</h3>\n *   </cds-modal-header>\n *   <cds-modal-content>\n *     <p>Lorem Ipsum</p>\n *   </cds-modal-content>\n *   <cds-modal-actions>\n *       <cds-button>Ok</cds-button>\n *   </cds-modal-actions>\n * </cds-modal>\n * ```\n *\n * @element cds-modal-actions\n */\nexport class CdsModalActions extends LitElement {\n    connectedCallback() {\n        super.connectedCallback();\n        this.setAttribute('slot', 'modal-actions');\n    }\n    render() {\n        return this.hasAttribute('cds-layout')\n            ? html `<slot></slot>`\n            : html `<div cds-layout=\"horizontal gap:xs align:right\"><slot></slot></div>`;\n    }\n    static get styles() {\n        return [baseStyles];\n    }\n}\n"],"names":["CdsModalActions","LitElement","connectedCallback","super","this","setAttribute","render","hasAttribute","html","styles","baseStyles"],"mappings":"2FA8BO,MAAMA,UAAwBC,EACjCC,oBACIC,MAAMD,oBACNE,KAAKC,aAAa,OAAQ,iBAE9BC,SACI,OAAOF,KAAKG,aAAa,cACnBC,CAAK,gBACLA,CAAK,sEAEJC,oBACP,MAAO,CAACC"}

package/modal/modal-content.element.d.ts

@@ -25,7 +25,6 @@ import { LitElement } from 'lit';
 export declare class CdsModalContent extends LitElement {
     /** @private */
     static get shadowRootOptions(): any;
-    protected tabIndexAttr: number;
     render(): import("lit-html").TemplateResult<1>;
     static get styles(): import("lit").CSSResultGroup[];
 }

package/modal/modal-content.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{baseStyles as e,state as r}from"@cds/core/internal";import{LitElement as o,html as s}from"lit";class i extends o{constructor(){super(...arguments);this.tabIndexAttr=0}static get shadowRootOptions(){return{...super.shadowRootOptions,delegatesFocus:!0}}render(){return this.hasAttribute("cds-layout")?s`<slot></slot>`:s`<div cds-layout="vertical gap:lg p-y:xs"><slot></slot></div>`}static get styles(){return[e]}}t([r({type:Number,attribute:"tabindex",reflect:!0})],i.prototype,"tabIndexAttr",void 0);export{i as CdsModalContent};
+import{baseStyles as t}from"@cds/core/internal";import{LitElement as s,html as o}from"lit";class e extends s{static get shadowRootOptions(){return{...super.shadowRootOptions,delegatesFocus:!0}}render(){return this.hasAttribute("cds-layout")?o`<slot></slot>`:o`<div cds-layout="vertical gap:lg p-y:xs"><slot></slot></div>`}static get styles(){return[t]}}export{e as CdsModalContent};
 //# sourceMappingURL=modal-content.element.js.map

package/modal/modal-content.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-content.element.js","sources":["../../../src/modal/modal-content.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 { baseStyles, state } from '@cds/core/internal';\nimport { html, LitElement } from 'lit';\n/**\n * Web component modal content to be used inside modal.\n *\n * ```typescript\n * import '@cds/core/modal/register.js';\n * ```\n *\n * ```html\n * <cds-modal size='lg'>\n *   <cds-modal-header>\n *      <h3 cds-text=\"title\">My Modal</h3>\n *   </cds-modal-header>\n *   <cds-modal-content>\n *      <p>Lorem Ipsum</p>\n *   </cds-modal-content>\n *   <cds-modal-actions>\n *       <cds-button>Ok</cds-button>\n *   </cds-modal-actions>\n * </cds-modal>\n * ```\n *\n * @element cds-modal-content\n */\nexport class CdsModalContent extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.tabIndexAttr = 0; // don't override native prop as it stops native focus behavior\n    }\n    // renderRoot needs delegatesFocus so that focus can cross the shadowDOM\n    // inside modal-content with a tabindex of -1. we need the tabindex so a\n    // modal's content can scroll if it needs to.\n    /** @private */\n    static get shadowRootOptions() {\n        // any is used until TS 4.4.x adopted through other @cds/* libraries. Can be removed in 6.0\n        return { ...super.shadowRootOptions, delegatesFocus: true };\n    }\n    render() {\n        return this.hasAttribute('cds-layout')\n            ? html `<slot></slot>`\n            : html `<div cds-layout=\"vertical gap:lg p-y:xs\"><slot></slot></div>`;\n    }\n    static get styles() {\n        return [baseStyles];\n    }\n}\n__decorate([\n    state({ type: Number, attribute: 'tabindex', reflect: true })\n], CdsModalContent.prototype, \"tabIndexAttr\", void 0);\n"],"names":["CdsModalContent","LitElement","constructor","super","this","tabIndexAttr","shadowRootOptions","delegatesFocus","render","hasAttribute","html","styles","baseStyles","__decorate","state","type","Number","attribute","reflect","prototype"],"mappings":"yIA+BO,MAAMA,UAAwBC,EACjCC,cACIC,oBACAC,KAAKC,aAAe,EAMbC,+BAEP,MAAO,IAAKH,MAAMG,kBAAmBC,gBAAgB,GAEzDC,SACI,OAAOJ,KAAKK,aAAa,cACnBC,CAAK,gBACLA,CAAK,+DAEJC,oBACP,MAAO,CAACC,IAGhBC,EAAW,CACPC,EAAM,CAAEC,KAAMC,OAAQC,UAAW,WAAYC,SAAS,KACvDlB,EAAgBmB,UAAW,oBAAgB"}
+{"version":3,"file":"modal-content.element.js","sources":["../../../src/modal/modal-content.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 { baseStyles } from '@cds/core/internal';\nimport { html, LitElement } from 'lit';\n/**\n * Web component modal content to be used inside modal.\n *\n * ```typescript\n * import '@cds/core/modal/register.js';\n * ```\n *\n * ```html\n * <cds-modal size='lg'>\n *   <cds-modal-header>\n *      <h3 cds-text=\"title\">My Modal</h3>\n *   </cds-modal-header>\n *   <cds-modal-content>\n *      <p>Lorem Ipsum</p>\n *   </cds-modal-content>\n *   <cds-modal-actions>\n *       <cds-button>Ok</cds-button>\n *   </cds-modal-actions>\n * </cds-modal>\n * ```\n *\n * @element cds-modal-content\n */\nexport class CdsModalContent extends LitElement {\n    // renderRoot needs delegatesFocus so that focus can cross the shadowDOM\n    // inside modal-content with a tabindex. we need the tabindex so a\n    // modal's content can scroll if it needs to.\n    /** @private */\n    static get shadowRootOptions() {\n        // any is used until TS 4.4.x adopted through other @cds/* libraries. Can be removed in 6.0\n        return { ...super.shadowRootOptions, delegatesFocus: true };\n    }\n    render() {\n        return this.hasAttribute('cds-layout')\n            ? html `<slot></slot>`\n            : html `<div cds-layout=\"vertical gap:lg p-y:xs\"><slot></slot></div>`;\n    }\n    static get styles() {\n        return [baseStyles];\n    }\n}\n"],"names":["CdsModalContent","LitElement","shadowRootOptions","super","delegatesFocus","render","this","hasAttribute","html","styles","baseStyles"],"mappings":"2FA8BO,MAAMA,UAAwBC,EAKtBC,+BAEP,MAAO,IAAKC,MAAMD,kBAAmBE,gBAAgB,GAEzDC,SACI,OAAOC,KAAKC,aAAa,cACnBC,CAAK,gBACLA,CAAK,+DAEJC,oBACP,MAAO,CAACC"}

package/modal/modal.element.d.ts

@@ -1,6 +1,7 @@
-import { PropertyValues } from 'lit';
-import { Animatable } from '@cds/core/internal';
+import { TemplateResult } from 'lit';
 import { CdsInternalOverlay } from '@cds/core/internal-components/overlay';
+import { CdsModalHeader } from './modal-header.element';
+import { CdsModalActions } from './modal-actions.element';
 /**
  * Web component modal.
  *
@@ -40,7 +41,8 @@ import { CdsInternalOverlay } from '@cds/core/internal-components/overlay';
  * @cssprop --max-height - sets hard limit on height of modal
  * @cssprop --tablet-max-height - sets hard limit on height of modal when on a tablet in landscape mode
  */
-export declare class CdsModal extends CdsInternalOverlay implements Animatable {
+export declare class CdsModal extends CdsInternalOverlay {
+    protected get customBumpers(): [HTMLElement, HTMLElement];
     static get styles(): import("lit").CSSResultGroup[];
     i18n: {
         closeButtonAriaLabel: string;
@@ -52,7 +54,14 @@ export declare class CdsModal extends CdsInternalOverlay implements Animatable {
     closable: boolean;
     /** Sets the overall height and width of the modal and icon based on value */
     size: 'default' | 'sm' | 'lg' | 'xl';
-    toggleCloseButton(): void;
-    updated(props: PropertyValues<this>): void;
-    render(): import("lit-html").TemplateResult<1>;
+    content: HTMLElement;
+    modalHeader: CdsModalHeader;
+    modalFooter: CdsModalActions;
+    protected isScrollable: boolean;
+    private get modalFooterTemplate();
+    protected observers: (MutationObserver | ResizeObserver)[];
+    render(): TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setScrollableProperties;
 }

package/modal/modal.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{html as o}from"lit";import{I18nService as e,i18n as l,property as s,animate as i,reverseAnimation as a,AnimationModalEnterName as d}from"@cds/core/internal";import{CdsInternalOverlay as n}from"@cds/core/internal-components/overlay";import{appendCloseButton as r,removeCloseButton as c}from"@cds/core/internal-components/close-button";import p from"./modal.element.scss.js";let m=class extends n{constructor(){super(...arguments);this.i18n=e.keys.modal,this.closable=!0}static get styles(){return[...super.styles,p]}toggleCloseButton(){const t=[["cds-layout","align:top"],["slot","close-button"],["aria-label",this.i18n.closeButtonAriaLabel],["icon-size","24"]];this.closable?r(this,t,(()=>this.closeOverlay("close-button-click"))):c(this)}updated(t){t.has("closable")&&this.toggleCloseButton(),super.update(t)}render(){return o`${this.backdropTemplate}<div class="modal-dialog private-host" tabindex="-1" cds-layout="m:md m@md:xl"><div cds-layout="display:screen-reader-only">${this.i18n.contentStart}</div><div class="modal-content" cds-layout="vertical gap:md gap@md:lg align:stretch"><div cds-layout="horizontal gap:md wrap:none align:vertical-center p-x:lg p-t:lg"><div><slot name="modal-header"></slot></div><div cds-layout="align:right"><slot name="modal-header-actions"></slot></div><slot name="close-button"></slot></div><div class="modal-body" tabindex="0" aria-label="${this.i18n.contentBox}" cds-layout="p-x:lg"><slot></slot></div><div cds-layout="align-stretch p-x:lg p-b:lg"><slot name="modal-actions"></slot></div></div><div cds-layout="display:screen-reader-only">${this.i18n.contentEnd}</div></div>`}};t([l()],m.prototype,"i18n",void 0),t([s({type:Boolean})],m.prototype,"closable",void 0),t([s({type:String})],m.prototype,"size",void 0),m=t([i({hidden:{true:a(d),false:d}})],m);export{m as CdsModal};
+import{__decorate as t}from"tslib";import{html as e}from"lit";import{query as o}from"lit/decorators/query.js";import{I18nService as l,getElementUpdates as s,isScrollable as a,i18n as i,property as r,querySlot as d,animate as n,reverseAnimation as c,AnimationModalEnterName as m}from"@cds/core/internal";import{CdsInternalOverlay as p}from"@cds/core/internal-components/overlay";import h from"./modal.element.scss.js";let v=class extends p{constructor(){super(...arguments);this.i18n=l.keys.modal,this.closable=!0,this.isScrollable=!1,this.observers=[]}get customBumpers(){return[this.modalHeader,this.modalFooter]}static get styles(){return[...super.styles,h]}get modalFooterTemplate(){return this.modalFooter?e`<div cds-layout="align-stretch p-x:lg p-b:lg"><slot name="modal-actions"></slot></div>`:e``}render(){return e`${this.backdropTemplate}<div class="modal-dialog private-host" tabindex="-1" cds-layout="m:md m@md:xl"><div cds-layout="display:screen-reader-only">${this.i18n.contentStart}</div><div class="modal-content" cds-layout="vertical gap:sm gap@md:lg align:stretch"><div cds-layout="horizontal gap:sm wrap:none align:vertical-center p-x:lg p-t:lg"><div><slot name="modal-header"></slot></div><div cds-layout="align:right"><slot name="modal-header-actions"></slot></div>${this.closable?this.closeButtonTemplate:""}</div><div class="modal-body" cds-layout="p-x:lg"><slot></slot></div>${this.modalFooterTemplate}</div><div cds-layout="display:screen-reader-only">${this.i18n.contentEnd}</div></div>`}connectedCallback(){super.connectedCallback(),this.observers.push(s(this,"hidden",(()=>this.setScrollableProperties())))}disconnectedCallback(){super.disconnectedCallback(),this.observers.forEach((t=>t?.disconnect()))}async setScrollableProperties(){const t=this.content;!1===this.hidden&&null!==t&&(await this.updateComplete,this.isScrollable=a(t),t.tabIndex=this.isScrollable?0:-1,t.ariaLabel=this.isScrollable?this.i18n.contentBox:null)}};t([i()],v.prototype,"i18n",void 0),t([r({type:Boolean})],v.prototype,"closable",void 0),t([r({type:String})],v.prototype,"size",void 0),t([o(".modal-body")],v.prototype,"content",void 0),t([d("cds-modal-header")],v.prototype,"modalHeader",void 0),t([d("cds-modal-actions")],v.prototype,"modalFooter",void 0),v=t([n({hidden:{true:c(m),false:m}})],v);export{v as CdsModal};
 //# sourceMappingURL=modal.element.js.map

package/modal/modal.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.element.js","sources":["../../../src/modal/modal.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 } from 'lit';\nimport { animate, AnimationModalEnterName, i18n, I18nService, property, reverseAnimation, } from '@cds/core/internal';\nimport { CdsInternalOverlay } from '@cds/core/internal-components/overlay';\nimport { appendCloseButton, removeCloseButton } from '@cds/core/internal-components/close-button';\nimport styles from './modal.element.scss';\n/**\n * Web component modal.\n *\n * ```typescript\n * import '@cds/core/modal/register.js';\n * ```\n *\n * ```html\n * <cds-modal>\n *   <cds-modal-header>\n *      <h3 cds-text=\"title\">My Modal</h3>\n *   </cds-modal-header>\n *   <cds-modal-content>\n *     <p>Lorem Ipsum</p>\n *   </cds-modal-content>\n *   <cds-modal-actions>\n *       <cds-button>Ok</cds-button>\n *   </cds-modal-actions>\n * </cds-modal>\n * ```\n *\n * @element cds-modal\n * @slot\n * @slot cds-modal-content\n * @slot cds-modal-header\n * @slot cds-modal-actions\n * @event closeChange - notify when the user has clicked the close button\n * @cssprop --backdrop-background - inherited from the internal overlay component\n * @cssprop --layered-backdrop-background - inherited from the internal overlay component\n * @cssprop --border-color\n * @cssprop --border-width\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --box-shadow\n * @cssprop --width\n * @cssprop --content-overflow - set as { x, y }. take care when customizing because overflow settings can have unintended side effects.\n * @cssprop --max-height - sets hard limit on height of modal\n * @cssprop --tablet-max-height - sets hard limit on height of modal when on a tablet in landscape mode\n */\nlet CdsModal = class CdsModal extends CdsInternalOverlay {\n    constructor() {\n        super(...arguments);\n        this.i18n = I18nService.keys.modal;\n        /** If false, the modal will not render the close button.  */\n        this.closable = true;\n    }\n    static get styles() {\n        return [...super.styles, styles];\n    }\n    toggleCloseButton() {\n        const closeButtonAttrs = [\n            ['cds-layout', 'align:top'],\n            ['slot', 'close-button'],\n            ['aria-label', this.i18n.closeButtonAriaLabel],\n            ['icon-size', '24'],\n        ];\n        if (this.closable) {\n            appendCloseButton(this, closeButtonAttrs, () => this.closeOverlay('close-button-click'));\n        }\n        else {\n            removeCloseButton(this);\n        }\n    }\n    // TODO: Document what's going on here with the role dialog and aria modal true\n    // Also document why we have to keep everything in the light Dom\n    updated(props) {\n        if (props.has('closable')) {\n            this.toggleCloseButton();\n        }\n        super.update(props);\n    }\n    // modal-body requires a tab index so it can be scrolled\n    render() {\n        return html `\n      ${this.backdropTemplate}\n      <div class=\"modal-dialog private-host\" tabindex=\"-1\" cds-layout=\"m:md m@md:xl\">\n        <div cds-layout=\"display:screen-reader-only\">${this.i18n.contentStart}</div>\n        <div class=\"modal-content\" cds-layout=\"vertical gap:md gap@md:lg align:stretch\">\n          <div cds-layout=\"horizontal gap:md wrap:none align:vertical-center p-x:lg p-t:lg\">\n            <div>\n              <slot name=\"modal-header\"></slot>\n            </div>\n            <div cds-layout=\"align:right\">\n              <slot name=\"modal-header-actions\"></slot>\n            </div>\n            <slot name=\"close-button\"></slot>\n          </div>\n          <div class=\"modal-body\" tabindex=\"0\" aria-label=\"${this.i18n.contentBox}\" cds-layout=\"p-x:lg\">\n            <slot></slot>\n          </div>\n          <div cds-layout=\"align-stretch p-x:lg p-b:lg\">\n            <slot name=\"modal-actions\"></slot>\n          </div>\n        </div>\n        <div cds-layout=\"display:screen-reader-only\">${this.i18n.contentEnd}</div>\n      </div>\n    `;\n    }\n};\n__decorate([\n    i18n()\n], CdsModal.prototype, \"i18n\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsModal.prototype, \"closable\", void 0);\n__decorate([\n    property({ type: String })\n], CdsModal.prototype, \"size\", void 0);\nCdsModal = __decorate([\n    animate({\n        hidden: {\n            true: reverseAnimation(AnimationModalEnterName),\n            false: AnimationModalEnterName,\n        },\n    })\n], CdsModal);\nexport { CdsModal };\n"],"names":["CdsModal","CdsInternalOverlay","constructor","super","this","i18n","I18nService","keys","modal","closable","styles","toggleCloseButton","closeButtonAttrs","closeButtonAriaLabel","appendCloseButton","closeOverlay","removeCloseButton","updated","props","has","update","render","html","backdropTemplate","contentStart","contentBox","contentEnd","__decorate","prototype","property","type","Boolean","String","animate","hidden","true","reverseAnimation","AnimationModalEnterName","false"],"mappings":"+ZAkDG,IAACA,EAAW,cAAuBC,EAClCC,cACIC,oBACAC,KAAKC,KAAOC,EAAYC,KAAKC,MAE7BJ,KAAKK,UAAW,EAETC,oBACP,MAAO,IAAIP,MAAMO,OAAQA,GAE7BC,oBACI,MAAMC,EAAmB,CACrB,CAAC,aAAc,aACf,CAAC,OAAQ,gBACT,CAAC,aAAcR,KAAKC,KAAKQ,sBACzB,CAAC,YAAa,OAEdT,KAAKK,SACLK,EAAkBV,KAAMQ,GAAkB,IAAMR,KAAKW,aAAa,wBAGlEC,EAAkBZ,MAK1Ba,QAAQC,GACAA,EAAMC,IAAI,aACVf,KAAKO,oBAETR,MAAMiB,OAAOF,GAGjBG,SACI,OAAOC,CAAK,GACZlB,KAAKmB,+IAE0CnB,KAAKC,KAAKmB,wYAWJpB,KAAKC,KAAKoB,+LAOhBrB,KAAKC,KAAKqB,2BAKjEC,EAAW,CACPtB,KACDL,EAAS4B,UAAW,YAAQ,GAC/BD,EAAW,CACPE,EAAS,CAAEC,KAAMC,WAClB/B,EAAS4B,UAAW,gBAAY,GACnCD,EAAW,CACPE,EAAS,CAAEC,KAAME,UAClBhC,EAAS4B,UAAW,YAAQ,GAC/B5B,EAAW2B,EAAW,CAClBM,EAAQ,CACJC,OAAQ,CACJC,KAAMC,EAAiBC,GACvBC,MAAOD,MAGhBrC"}
+{"version":3,"file":"modal.element.js","sources":["../../../src/modal/modal.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 } from 'lit';\nimport { query } from 'lit/decorators/query.js';\nimport { animate, AnimationModalEnterName, i18n, I18nService, isScrollable, property, reverseAnimation, querySlot, getElementUpdates, } from '@cds/core/internal';\nimport { CdsInternalOverlay } from '@cds/core/internal-components/overlay';\nimport styles from './modal.element.scss';\n/**\n * Web component modal.\n *\n * ```typescript\n * import '@cds/core/modal/register.js';\n * ```\n *\n * ```html\n * <cds-modal>\n *   <cds-modal-header>\n *      <h3 cds-text=\"title\">My Modal</h3>\n *   </cds-modal-header>\n *   <cds-modal-content>\n *     <p>Lorem Ipsum</p>\n *   </cds-modal-content>\n *   <cds-modal-actions>\n *       <cds-button>Ok</cds-button>\n *   </cds-modal-actions>\n * </cds-modal>\n * ```\n *\n * @element cds-modal\n * @slot\n * @slot cds-modal-content\n * @slot cds-modal-header\n * @slot cds-modal-actions\n * @event closeChange - notify when the user has clicked the close button\n * @cssprop --backdrop-background - inherited from the internal overlay component\n * @cssprop --layered-backdrop-background - inherited from the internal overlay component\n * @cssprop --border-color\n * @cssprop --border-width\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --box-shadow\n * @cssprop --width\n * @cssprop --content-overflow - set as { x, y }. take care when customizing because overflow settings can have unintended side effects.\n * @cssprop --max-height - sets hard limit on height of modal\n * @cssprop --tablet-max-height - sets hard limit on height of modal when on a tablet in landscape mode\n */\nlet CdsModal = class CdsModal extends CdsInternalOverlay {\n    constructor() {\n        super(...arguments);\n        this.i18n = I18nService.keys.modal;\n        /** If false, the modal will not render the close button.  */\n        this.closable = true;\n        this.isScrollable = false;\n        this.observers = [];\n    }\n    get customBumpers() {\n        return [this.modalHeader, this.modalFooter];\n    }\n    static get styles() {\n        return [...super.styles, styles];\n    }\n    get modalFooterTemplate() {\n        if (this.modalFooter) {\n            return html `<div cds-layout=\"align-stretch p-x:lg p-b:lg\">\n        <slot name=\"modal-actions\"></slot>\n      </div>`;\n        }\n        else {\n            return html ``;\n        }\n    }\n    // modal-body requires a tab index so it can be scrolled\n    render() {\n        return html `\n      ${this.backdropTemplate}\n      <div class=\"modal-dialog private-host\" tabindex=\"-1\" cds-layout=\"m:md m@md:xl\">\n        <div cds-layout=\"display:screen-reader-only\">${this.i18n.contentStart}</div>\n        <div class=\"modal-content\" cds-layout=\"vertical gap:sm gap@md:lg align:stretch\">\n          <div cds-layout=\"horizontal gap:sm wrap:none align:vertical-center p-x:lg p-t:lg\">\n            <div>\n              <slot name=\"modal-header\"></slot>\n            </div>\n            <div cds-layout=\"align:right\">\n              <slot name=\"modal-header-actions\"></slot>\n            </div>\n            ${this.closable ? this.closeButtonTemplate : ''}\n          </div>\n          <div class=\"modal-body\" cds-layout=\"p-x:lg\">\n            <slot></slot>\n          </div>\n          ${this.modalFooterTemplate}\n        </div>\n        <div cds-layout=\"display:screen-reader-only\">${this.i18n.contentEnd}</div>\n      </div>\n    `;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.observers.push(getElementUpdates(this, 'hidden', () => this.setScrollableProperties()));\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n        this.observers.forEach(o => o?.disconnect());\n    }\n    async setScrollableProperties() {\n        const contentElement = this.content;\n        if (this.hidden === false && contentElement !== null) {\n            await this.updateComplete; // wait until after render to measure if scrollable\n            this.isScrollable = isScrollable(contentElement);\n            contentElement.tabIndex = this.isScrollable ? 0 : -1;\n            contentElement.ariaLabel = this.isScrollable ? this.i18n.contentBox : null;\n        }\n    }\n};\n__decorate([\n    i18n()\n], CdsModal.prototype, \"i18n\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsModal.prototype, \"closable\", void 0);\n__decorate([\n    property({ type: String })\n], CdsModal.prototype, \"size\", void 0);\n__decorate([\n    query('.modal-body')\n], CdsModal.prototype, \"content\", void 0);\n__decorate([\n    querySlot('cds-modal-header')\n], CdsModal.prototype, \"modalHeader\", void 0);\n__decorate([\n    querySlot('cds-modal-actions')\n], CdsModal.prototype, \"modalFooter\", void 0);\nCdsModal = __decorate([\n    animate({\n        hidden: {\n            true: reverseAnimation(AnimationModalEnterName),\n            false: AnimationModalEnterName,\n        },\n    })\n], CdsModal);\nexport { CdsModal };\n"],"names":["CdsModal","CdsInternalOverlay","constructor","super","this","i18n","I18nService","keys","modal","closable","isScrollable","observers","customBumpers","modalHeader","modalFooter","styles","modalFooterTemplate","html","render","backdropTemplate","contentStart","closeButtonTemplate","contentEnd","connectedCallback","push","getElementUpdates","setScrollableProperties","disconnectedCallback","forEach","o","disconnect","async","contentElement","content","hidden","updateComplete","tabIndex","ariaLabel","contentBox","__decorate","prototype","property","type","Boolean","String","query","querySlot","animate","true","reverseAnimation","AnimationModalEnterName","false"],"mappings":"iaAkDG,IAACA,EAAW,cAAuBC,EAClCC,cACIC,oBACAC,KAAKC,KAAOC,EAAYC,KAAKC,MAE7BJ,KAAKK,UAAW,EAChBL,KAAKM,cAAe,EACpBN,KAAKO,UAAY,GAEjBC,oBACA,MAAO,CAACR,KAAKS,YAAaT,KAAKU,aAExBC,oBACP,MAAO,IAAIZ,MAAMY,OAAQA,GAEzBC,0BACA,OAAIZ,KAAKU,YACEG,CAAK,yFAKLA,CAAK,GAIpBC,SACI,OAAOD,CAAK,GACZb,KAAKe,+IAE0Cf,KAAKC,KAAKe,gTASnDhB,KAAKK,SAAWL,KAAKiB,oBAAsB,0EAK7CjB,KAAKY,yEAEsCZ,KAAKC,KAAKiB,yBAI7DC,oBACIpB,MAAMoB,oBACNnB,KAAKO,UAAUa,KAAKC,EAAkBrB,KAAM,UAAU,IAAMA,KAAKsB,6BAErEC,uBACIxB,MAAMwB,uBACNvB,KAAKO,UAAUiB,SAAQC,GAAKA,GAAGC,eAEnCC,gCACI,MAAMC,EAAiB5B,KAAK6B,SACR,IAAhB7B,KAAK8B,QAAuC,OAAnBF,UACnB5B,KAAK+B,eACX/B,KAAKM,aAAeA,EAAasB,GACjCA,EAAeI,SAAWhC,KAAKM,aAAe,GAAK,EACnDsB,EAAeK,UAAYjC,KAAKM,aAAeN,KAAKC,KAAKiC,WAAa,QAIlFC,EAAW,CACPlC,KACDL,EAASwC,UAAW,YAAQ,GAC/BD,EAAW,CACPE,EAAS,CAAEC,KAAMC,WAClB3C,EAASwC,UAAW,gBAAY,GACnCD,EAAW,CACPE,EAAS,CAAEC,KAAME,UAClB5C,EAASwC,UAAW,YAAQ,GAC/BD,EAAW,CACPM,EAAM,gBACP7C,EAASwC,UAAW,eAAW,GAClCD,EAAW,CACPO,EAAU,qBACX9C,EAASwC,UAAW,mBAAe,GACtCD,EAAW,CACPO,EAAU,sBACX9C,EAASwC,UAAW,mBAAe,GACtCxC,EAAWuC,EAAW,CAClBQ,EAAQ,CACJb,OAAQ,CACJc,KAAMC,EAAiBC,GACvBC,MAAOD,MAGhBlD"}

package/modal/modal.element.scss.js

@@ -1,2 +1,2 @@
-import{css as a}from"lit";var o=a`:host{--border-color:var(--cds-alias-object-container-border-color, var(--cds-global-color-construction-200, #cbd4d8));--border-width:var(--cds-alias-object-border-width-100, calc(1 / var(--cds-global-base, 20) * 1rem));--border-radius:var(--cds-alias-object-border-radius-100, calc(4 / var(--cds-global-base, 20) * 1rem));--background:var(--cds-alias-object-overlay-background, var(--cds-global-color-white, white));--box-shadow:var(--cds-alias-object-shadow-100, 0 1px 3px 0 rgba(27, 43, 50, 0.5));--width:calc(8 * var(--cds-global-space-13, calc(72 / var(--cds-global-base, 20) * 1rem)));--content-overflow:hidden auto;--max-height:70vh;--tablet-max-height:55vh}:host([size=sm]){--width:calc(4 * var(--cds-global-space-13, calc(72 / var(--cds-global-base, 20) * 1rem)))}:host([size=lg]){--width:calc(12 * var(--cds-global-space-13, calc(72 / var(--cds-global-base, 20) * 1rem)))}:host([size=xl]){--width:calc(16 * var(--cds-global-space-13, calc(72 / var(--cds-global-base, 20) * 1rem)))}:host([_demo-mode]){position:absolute}.modal-dialog{width:var(--width);max-width:100%}.modal-content{background:var(--background);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow)}.overlay-backdrop{background:var(--backdrop-background)}.modal-body{max-height:var(--max-height);overflow:var(--content-overflow)}`;export{o as default};
+import{css as a}from"lit";var o=a`:host{--border-color:var(--cds-alias-object-container-border-color, var(--cds-global-color-construction-200, #cbd4d8));--border-width:var(--cds-alias-object-border-width-100, 0.0625rem);--border-radius:var(--cds-alias-object-border-radius-100, 0.25rem);--background:var(--cds-alias-object-overlay-background, var(--cds-global-color-white, white));--box-shadow:var(--cds-alias-object-shadow-100, 0 calc(1 / var(--cds-global-base, 20) * 1rem) calc(3 / var(--cds-global-base, 20) * 1rem) 0 rgba(27, 43, 50, 0.5));--width:calc(8 * var(--cds-global-space-14, 4.5rem));--content-overflow:hidden auto;--max-height:70vh;--tablet-max-height:55vh}:host([size=sm]){--width:calc(4 * var(--cds-global-space-14, 4.5rem))}:host([size=lg]){--width:calc(12 * var(--cds-global-space-14, 4.5rem))}:host([size=xl]){--width:calc(16 * var(--cds-global-space-14, 4.5rem))}:host([_demo-mode]){position:absolute}.modal-dialog{width:var(--width);max-width:100%}.modal-content{background:var(--background);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow)}.overlay-backdrop{background:var(--backdrop-background)}.modal-body{max-height:var(--max-height);overflow:var(--content-overflow)}@media screen and (max-width:768px) and (orientation:landscape){.modal-body{max-height:var(--tablet-max-height)}}@media screen and (max-width:576px){.modal-dialog{width:100%;height:100%;margin:0!important}.modal-body{max-height:unset}.modal-content{border-radius:0;height:100%}.modal-content>div:not(.modal-body){flex-grow:0;margin:0}cds-internal-close-button{transform:translate(.35rem,-.25rem)}}`;export{o as default};
 //# sourceMappingURL=modal.element.scss.js.map

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

@@ -1,5 +1,5 @@
 import { LitElement, PropertyValues } from 'lit';
-import { Animatable, EventEmitter } from '@cds/core/internal';
+import { EventEmitter } from '@cds/core/internal';
 import { CdsNavigationItem } from './navigation-item.element';
 import { CdsNavigationStart } from './navigation-start.element';
 export declare const CdsNavigationGroupTagName = "cds-navigation-group";
@@ -17,7 +17,6 @@ export declare const CdsNavigationGroupTagName = "cds-navigation-group";
  * </cds-navigation-group>
  * ```
  *
- * @beta
  * @element cds-navigation-group
  * @event expandedChange - notify when the user has clicked the navigation expand/collapse button
  * @cssprop --animation-duration
@@ -25,7 +24,7 @@ export declare const CdsNavigationGroupTagName = "cds-navigation-group";
  * @cssprop --background
  * @slot
  */
-export declare class CdsNavigationGroup extends LitElement implements Animatable {
+export declare class CdsNavigationGroup extends LitElement {
     cdsMotion: string;
     /** @private **/
     expandedChange: EventEmitter<boolean>;
@@ -38,7 +37,10 @@ export declare class CdsNavigationGroup extends LitElement implements Animatable
      */
     navigationGroupId: string;
     i18n: {
-        [key: string]: string | undefined;
+        navigationElement: string;
+        navigationLabel: string;
+        navigationAbridgedText: string;
+        navigationUnabridgedText: string;
     };
     /**
      * @description
@@ -76,6 +78,6 @@ export declare class CdsNavigationGroup extends LitElement implements Animatable
     static get styles(): import("lit").CSSResultGroup[];
     private toggle;
     disconnectedCallback(): void;
-    protected firstUpdated(props: PropertyValues): void;
+    protected firstUpdated(props: PropertyValues<this>): void;
     updated(props: PropertyValues<this>): void;
 }

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 * @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"}
+{"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"}

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

@@ -11,7 +11,6 @@ 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
@@ -22,7 +21,10 @@ export declare const CdsNavigationItemTagName = "cds-navigation-item";
  */
 export declare class CdsNavigationItem extends LitElement implements FocusableItem {
     i18n: {
-        [key: string]: string | undefined;
+        navigationElement: string;
+        navigationLabel: string;
+        navigationAbridgedText: string;
+        navigationUnabridgedText: string;
     };
     active: boolean;
     disabled: boolean;
@@ -34,9 +36,9 @@ export declare class CdsNavigationItem extends LitElement implements FocusableIt
     protected itemIcon: CdsIcon;
     itemText: NodeListOf<HTMLSpanElement>;
     connectedCallback(): void;
-    firstUpdated(props: PropertyValues): void;
+    firstUpdated(props: PropertyValues<this>): void;
     private handleItemAnchorText;
     render(): import("lit-html").TemplateResult<1>;
     static get styles(): import("lit").CSSResultGroup[];
-    protected updated(props: PropertyValues): void;
+    protected updated(props: PropertyValues<this>): void;
 }

package/navigation/navigation-item.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{LitElement as e,html as o}from"lit";import{I18nService as i,createId as s,spanWrapper as r,baseStyles as d,i18n as n,property as p,state as a,querySlot as l,querySlotAll as c}from"@cds/core/internal";import h from"./navigation-item.element.scss.js";import{manageScreenReaderElements as m,NAVIGATION_TEXT_WRAPPER as u}from"./utils/index.js";const v="cds-navigation-item";class y extends e{constructor(){super(...arguments);this.i18n=i.keys.navigation,this.active=!1,this.disabled=!1,this.expanded=!1,this.expandedGroup=!0,this.hasFocus=!1}connectedCallback(){super.connectedCallback(),this.role="listitem",this.id||(this.id=s())}firstUpdated(t){super.firstUpdated(t),this.handleItemAnchorText(),m(this,this.expanded)}handleItemAnchorText(){var t;const e=this.querySelector("a");e&&(r(e.childNodes),null===(t=null==e?void 0:e.querySelector("span"))||void 0===t||t.setAttribute(u,""))}render(){return o`<div class="private-host ${this.groupItem?"group-item":""}" cds-layout="horizontal align:horizontal-stretch wrap:none gap:md"><slot @slotchange="${this.handleItemAnchorText}"></slot></div>`}static get styles(){return[d,h]}updated(t){super.updated(t),m(this,this.expanded)}}t([n()],y.prototype,"i18n",void 0),t([p({type:Boolean,reflect:!0})],y.prototype,"active",void 0),t([p({type:Boolean,reflect:!0})],y.prototype,"disabled",void 0),t([a({type:Boolean})],y.prototype,"expanded",void 0),t([a({type:Boolean,reflect:!0})],y.prototype,"expandedGroup",void 0),t([a({type:Boolean,reflect:!0})],y.prototype,"groupItem",void 0),t([a({type:Boolean,reflect:!0})],y.prototype,"hasFocus",void 0),t([l("a")],y.prototype,"focusElement",void 0),t([l("cds-icon",{assign:"cds-icon-slot"})],y.prototype,"itemIcon",void 0),t([c("[cds-navigation-sr-text]")],y.prototype,"itemText",void 0);export{y as CdsNavigationItem,v as CdsNavigationItemTagName};
+import{__decorate as t}from"tslib";import{LitElement as e,html as o}from"lit";import{I18nService as i,createId as s,spanWrapper as r,baseStyles as p,i18n as n,property as a,state as d,querySlot as l,querySlotAll as c}from"@cds/core/internal";import h from"./navigation-item.element.scss.js";import{manageScreenReaderElements as m,NAVIGATION_TEXT_WRAPPER as u}from"./utils/utils.js";const y="cds-navigation-item";class v extends e{constructor(){super(...arguments);this.i18n=i.keys.navigation,this.active=!1,this.disabled=!1,this.expanded=!1,this.expandedGroup=!0,this.hasFocus=!1}connectedCallback(){super.connectedCallback(),this.role="listitem",this.id||(this.id=s())}firstUpdated(t){super.firstUpdated(t),this.handleItemAnchorText(),m(this,this.expanded)}handleItemAnchorText(){const t=this.querySelector("a");t&&(r(t.childNodes),t?.querySelector("span")?.setAttribute(u,""))}render(){return o`<div class="private-host ${this.groupItem?"group-item":""}" cds-layout="horizontal align:horizontal-stretch wrap:none gap:sm"><slot @slotchange="${this.handleItemAnchorText}"></slot></div>`}static get styles(){return[p,h]}updated(t){super.updated(t),m(this,this.expanded)}}t([n()],v.prototype,"i18n",void 0),t([a({type:Boolean,reflect:!0})],v.prototype,"active",void 0),t([a({type:Boolean,reflect:!0})],v.prototype,"disabled",void 0),t([d({type:Boolean})],v.prototype,"expanded",void 0),t([d({type:Boolean,reflect:!0})],v.prototype,"expandedGroup",void 0),t([d({type:Boolean,reflect:!0})],v.prototype,"groupItem",void 0),t([d({type:Boolean,reflect:!0})],v.prototype,"hasFocus",void 0),t([l("a")],v.prototype,"focusElement",void 0),t([l("cds-icon",{assign:"cds-icon-slot"})],v.prototype,"itemIcon",void 0),t([c("[cds-navigation-sr-text]")],v.prototype,"itemText",void 0);export{v as CdsNavigationItem,y as CdsNavigationItemTagName};
 //# sourceMappingURL=navigation-item.element.js.map