@cds/core 5.6.2 → 6.0.0-next.3

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);--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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:-webkit-fit-content;width:-moz-fit-content;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;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);min-width:var(--min-width);width:var(--width);max-width:var(--max-width);height:var(--height);max-height:var(--max-height);overflow:var(--overflow)}: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)}:host([_position-at*=popup-top]) .popup-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host([_position-at*=popup-top]) .popup-pointer{-webkit-transform:translateY(var(--border-width));transform:translateY(var(--border-width))}:host([_position-at*=pointer-center]) .popup-wrapper,:host([_position-at*=pointer-mid]) .popup-wrapper{-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host([_position-at="popup-top pointer-right"]) .popup-wrapper{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}:host([_position-at="popup-top pointer-right"]) .popup-pointer{-webkit-transform:scaleX(-1) translateY(var(--border-width));transform:scaleX(-1) translateY(var(--border-width))}:host([_position-at*=popup-bottom]) .popup-pointer{-webkit-transform:scaleY(-1) translateY(var(--border-width));transform:scaleY(-1) translateY(var(--border-width))}:host([_position-at="popup-bottom pointer-right"]) .popup-wrapper{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}:host([_position-at="popup-bottom pointer-right"]) .popup-pointer{-webkit-transform:scaleY(-1) scaleX(-1) translateY(var(--border-width));transform:scaleY(-1) scaleX(-1) translateY(var(--border-width))}:host([_position-at*=popup-left]) .popup-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host([_position-at*=popup-left]) .popup-pointer{-webkit-transform-origin:right top;transform-origin:right top;-webkit-transform:scaleY(-1) rotate(-90deg) translateY(calc(-100% + var(--border-width))) translateX(100%);transform:scaleY(-1) rotate(-90deg) translateY(calc(-100% + var(--border-width))) translateX(100%)}:host([_position-at="popup-left pointer-bottom"]) .popup-wrapper{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}:host([_position-at="popup-left pointer-bottom"]) .popup-pointer{-webkit-transform:rotate(90deg) scaleY(-1) translateY(var(--border-width));transform:rotate(90deg) scaleY(-1) translateY(var(--border-width));-webkit-transform-origin:bottom right;transform-origin:bottom right}:host([_position-at="popup-left pointer-bottom"][_pointer-type=angle]) .pointer-wrapper{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:scaleY(-1);transform:scaleY(-1)}:host([_position-at*=popup-right]) .popup-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}:host([_position-at*=popup-right]) .popup-pointer{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:rotate(90deg) translateY(calc(-100% + var(--border-width)));transform:rotate(90deg) translateY(calc(-100% + var(--border-width)))}:host([_position-at="popup-right pointer-bottom"]) .popup-wrapper{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}:host([_position-at="popup-right pointer-bottom"]) .popup-pointer{-webkit-transform:rotate(-90deg) scaleY(-1) translateY(var(--border-width));transform:rotate(-90deg) scaleY(-1) translateY(var(--border-width));-webkit-transform-origin:bottom left;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:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}:host([hidden]){--animation-duration:var(--cds-global-animation-duration-secondary, 0.3s)}:host([hidden*=false]){display:-webkit-inline-box!important;display:-ms-inline-flexbox!important;display:inline-flex!important}`;export default t;
+//# 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":null,"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":null,"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":null,"names":["getPointer","type","svg"],"mappings":"0BAOO,SAASA,EAAWC,GACvB,MAAa,UAATA,EACOC,CAAI,wVAMJA,CAAI"}

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 default r;
+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);-webkit-transform:translateY(var(--cds-global-space-3,.25rem)) rotate(-45deg);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;-webkit-transform:translateY(calc(var(--cds-global-space-1,.0625rem)*.15));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 default o;
 //# sourceMappingURL=visual-checkbox.element.scss.js.map

package/list/list.css

@@ -13,14 +13,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-left: 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-left: var(--cds-global-space-9, 1.5rem);
   margin: 0;
 }
 
@@ -71,22 +71,22 @@ 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));
+  padding-left: 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;
+  padding-left: 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;
+  padding-left: 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));
+  padding-left: var(--cds-global-space-9, 1.5rem);
 }
 
 ul[cds-layout~=horizontal] li,

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-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, 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, 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-left:0;padding-left: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, 1.5rem)!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, 1.5rem)!important}ol[cds-list]>li>ol[cds-list]{margin-left:0;padding-left: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-left: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-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":null,"names":["CdsModalContent","LitElement","[object Object]","super","arguments","this","tabIndexAttr","shadowRootOptions","delegatesFocus","hasAttribute","html","styles","baseStyles","__decorate","state","type","Number","attribute","reflect","prototype"],"mappings":"yIA+BO,MAAMA,UAAwBC,EACjCC,cACIC,SAASC,WACTC,KAAKC,aAAe,EAMxBC,+BAEI,MAAO,IAAKJ,MAAMI,kBAAmBC,gBAAgB,GAEzDN,SACI,OAAOG,KAAKI,aAAa,cACnBC,CAAK,gBACLA,CAAK,+DAEfC,oBACI,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":null,"names":["CdsModalContent","LitElement","shadowRootOptions","super","delegatesFocus","[object Object]","this","hasAttribute","html","styles","baseStyles"],"mappings":"2FA8BO,MAAMA,UAAwBC,EAKjCC,+BAEI,MAAO,IAAKC,MAAMD,kBAAmBE,gBAAgB,GAEzDC,SACI,OAAOC,KAAKC,aAAa,cACnBC,CAAK,gBACLA,CAAK,+DAEfC,oBACI,MAAO,CAACC"}

package/modal/modal.element.d.ts

@@ -1,5 +1,8 @@
-import { Animatable } from '@cds/core/internal';
+import { TemplateResult } from 'lit';
+import { HTMLAttributeTuple } from '@cds/core/internal';
 import { CdsInternalOverlay } from '@cds/core/internal-components/overlay';
+import { CdsModalHeader } from './modal-header.element';
+import { CdsModalActions } from './modal-actions.element';
 /**
  * Web component modal.
  *
@@ -39,7 +42,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;
@@ -49,9 +53,15 @@ export declare class CdsModal extends CdsInternalOverlay implements Animatable {
     };
     /** If false, the modal will not render the close button.  */
     closable: boolean;
+    hidden: boolean;
     /** Sets the overall height and width of the modal and icon based on value */
     size: 'default' | 'sm' | 'lg' | 'xl';
-    toggleCloseButton(): void;
+    content: HTMLElement;
+    modalHeader: CdsModalHeader;
+    modalFooter: CdsModalActions;
+    protected get closeButtonAttrs(): HTMLAttributeTuple[];
+    protected isScrollable: boolean;
     updated(props: Map<string, any>): void;
-    render(): import("lit-html").TemplateResult<1>;
+    private get modalFooterTemplate();
+    render(): TemplateResult<1>;
 }

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 o}from"lit";import{query as e}from"lit/decorators/query.js";import{I18nService as l,isScrollable as s,setAttributes as i,i18n as a,property as d,querySlot as r,animate as n,reverseAnimation as c,AnimationModalEnterName as p}from"@cds/core/internal";import{CdsInternalOverlay as m}from"@cds/core/internal-components/overlay";import h from"./modal.element.scss.js";let y=class extends m{constructor(){super(...arguments),this.i18n=l.keys.modal,this.closable=!0,this.hidden=!0,this.isScrollable=!1}get customBumpers(){return[this.modalHeader,this.modalFooter]}static get styles(){return[...super.styles,h]}get closeButtonAttrs(){return[["cds-layout","align:top"],["slot","close-button"],["aria-label",this.i18n.closeButtonAriaLabel],["icon-size","24"]]}updated(t){t.has("hidden")&&!0===t.get("hidden")&&(this.isScrollable=s(this.content),i(this.content,["tabindex",!!this.isScrollable&&"0"],["aria-label",!!this.isScrollable&&this.i18n.contentBox])),super.updated(t)}get modalFooterTemplate(){return this.modalFooter?o`<div cds-layout="align-stretch p-x:lg p-b:lg"><slot name="modal-actions"></slot></div>`:o``}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: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>`}};t([a()],y.prototype,"i18n",void 0),t([d({type:Boolean})],y.prototype,"closable",void 0),t([d({type:Boolean})],y.prototype,"hidden",void 0),t([d({type:String})],y.prototype,"size",void 0),t([e(".modal-body")],y.prototype,"content",void 0),t([r("cds-modal-header")],y.prototype,"modalHeader",void 0),t([r("cds-modal-actions")],y.prototype,"modalFooter",void 0),y=t([n({hidden:{true:c(p),false:p}})],y);export{y 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":null,"names":["CdsModal","CdsInternalOverlay","[object Object]","super","arguments","this","i18n","I18nService","keys","modal","closable","styles","closeButtonAttrs","closeButtonAriaLabel","appendCloseButton","closeOverlay","removeCloseButton","props","has","toggleCloseButton","update","html","backdropTemplate","contentStart","contentBox","contentEnd","__decorate","prototype","property","type","Boolean","String","animate","hidden","true","reverseAnimation","AnimationModalEnterName","false"],"mappings":"+ZAkDG,IAACA,EAAW,cAAuBC,EAClCC,cACIC,SAASC,WACTC,KAAKC,KAAOC,EAAYC,KAAKC,MAE7BJ,KAAKK,UAAW,EAEpBC,oBACI,MAAO,IAAIR,MAAMQ,OAAQA,GAE7BT,oBACI,MAAMU,EAAmB,CACrB,CAAC,aAAc,aACf,CAAC,OAAQ,gBACT,CAAC,aAAcP,KAAKC,KAAKO,sBACzB,CAAC,YAAa,OAEdR,KAAKK,SACLI,EAAkBT,KAAMO,GAAkB,IAAMP,KAAKU,aAAa,wBAGlEC,EAAkBX,MAK1BH,QAAQe,GACAA,EAAMC,IAAI,aACVb,KAAKc,oBAEThB,MAAMiB,OAAOH,GAGjBf,SACI,OAAOmB,CAAK,GACZhB,KAAKiB,+IAE0CjB,KAAKC,KAAKiB,wYAWJlB,KAAKC,KAAKkB,+LAOhBnB,KAAKC,KAAKmB,2BAKjEC,EAAW,CACPpB,KACDN,EAAS2B,UAAW,YAAQ,GAC/BD,EAAW,CACPE,EAAS,CAAEC,KAAMC,WAClB9B,EAAS2B,UAAW,gBAAY,GACnCD,EAAW,CACPE,EAAS,CAAEC,KAAME,UAClB/B,EAAS2B,UAAW,YAAQ,GAC/B3B,EAAW0B,EAAW,CAClBM,EAAQ,CACJC,OAAQ,CACJC,KAAMC,EAAiBC,GACvBC,MAAOD,MAGhBpC"}
+{"version":3,"file":"modal.element.js","sources":["../../../src/modal/modal.element.ts"],"sourcesContent":null,"names":["CdsModal","CdsInternalOverlay","[object Object]","super","arguments","this","i18n","I18nService","keys","modal","closable","hidden","isScrollable","customBumpers","modalHeader","modalFooter","styles","closeButtonAttrs","closeButtonAriaLabel","props","has","get","content","setAttributes","contentBox","updated","modalFooterTemplate","html","backdropTemplate","contentStart","closeButtonTemplate","contentEnd","__decorate","prototype","property","type","Boolean","String","query","querySlot","animate","true","reverseAnimation","AnimationModalEnterName","false"],"mappings":"6ZAkDG,IAACA,EAAW,cAAuBC,EAClCC,cACIC,SAASC,WACTC,KAAKC,KAAOC,EAAYC,KAAKC,MAE7BJ,KAAKK,UAAW,EAChBL,KAAKM,QAAS,EACdN,KAAKO,cAAe,EAExBC,oBACI,MAAO,CAACR,KAAKS,YAAaT,KAAKU,aAEnCC,oBACI,MAAO,IAAIb,MAAMa,OAAQA,GAE7BC,uBACI,MAAO,CACH,CAAC,aAAc,aACf,CAAC,OAAQ,gBACT,CAAC,aAAcZ,KAAKC,KAAKY,sBACzB,CAAC,YAAa,OAGtBhB,QAAQiB,GACAA,EAAMC,IAAI,YAAqC,IAAxBD,EAAME,IAAI,YACjChB,KAAKO,aAAeA,EAAaP,KAAKiB,SACtCC,EAAclB,KAAKiB,QAAS,CAAC,aAAYjB,KAAKO,cAAe,KAAc,CAAC,eAAcP,KAAKO,cAAeP,KAAKC,KAAKkB,cAE5HrB,MAAMsB,QAAQN,GAElBO,0BACI,OAAIrB,KAAKU,YACEY,CAAK,yFAKLA,CAAK,GAIpBzB,SACI,OAAOyB,CAAK,GACZtB,KAAKuB,+IAE0CvB,KAAKC,KAAKuB,gTASnDxB,KAAKK,SAAWL,KAAKyB,oBAAsB,0EAK7CzB,KAAKqB,yEAEsCrB,KAAKC,KAAKyB,2BAKjEC,EAAW,CACP1B,KACDN,EAASiC,UAAW,YAAQ,GAC/BD,EAAW,CACPE,EAAS,CAAEC,KAAMC,WAClBpC,EAASiC,UAAW,gBAAY,GACnCD,EAAW,CACPE,EAAS,CAAEC,KAAMC,WAClBpC,EAASiC,UAAW,cAAU,GACjCD,EAAW,CACPE,EAAS,CAAEC,KAAME,UAClBrC,EAASiC,UAAW,YAAQ,GAC/BD,EAAW,CACPM,EAAM,gBACPtC,EAASiC,UAAW,eAAW,GAClCD,EAAW,CACPO,EAAU,qBACXvC,EAASiC,UAAW,mBAAe,GACtCD,EAAW,CACPO,EAAU,sBACXvC,EAASiC,UAAW,mBAAe,GACtCjC,EAAWgC,EAAW,CAClBQ,EAAQ,CACJ7B,OAAQ,CACJ8B,KAAMC,EAAiBC,GACvBC,MAAOD,MAGhB3C"}

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 default o;
+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);-webkit-box-shadow:var(--box-shadow);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){-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;margin:0}cds-internal-close-button{-webkit-transform:translate(.35rem,-.25rem);transform:translate(.35rem,-.25rem)}}`;export default o;
 //# 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";
@@ -25,7 +25,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>;

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

@@ -1,6 +1,2 @@
-import{css as o}from"lit";var i=o`/*!
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */:host{--animation-duration:var(--cds-global-animation-duration-secondary, 0.3s);--animation-easing:var(--cds-global-animation-easing-primary, cubic-bezier(0, 0.99, 0, 0.99));--background:inherit}.navigation-group-items{height:0;overflow-y:hidden}:host([cds-motion=off]) .navigation-group-items{height:0}:host([cds-motion=off][expanded]) .navigation-group-items{height:auto}:host([cds-motion][_cds-animation-status=ready]:not([cds-motion=off])) .navigation-group-items{height:0}:host([cds-motion][expanded][_cds-animation-status=ready]:not([cds-motion=off])) .navigation-group-items{height:auto!important;transform:none}.group-items-container,.group-items-wrapper{width:100%}`;export default i;
+import{css as o}from"lit";var i=o`:host{--animation-duration:var(--cds-global-animation-duration-secondary, 0.3s);--animation-easing:var(--cds-global-animation-easing-primary, cubic-bezier(0, 0.99, 0, 0.99));--background:inherit}.navigation-group-items{height:0;overflow-y:hidden}:host([cds-motion=off]) .navigation-group-items{height:0}:host([cds-motion=off][expanded]) .navigation-group-items{height:auto}:host([cds-motion][_cds-animation-status=ready]:not([cds-motion=off])) .navigation-group-items{height:0}:host([cds-motion][expanded][_cds-animation-status=ready]:not([cds-motion=off])) .navigation-group-items{height:auto!important;-webkit-transform:none;transform:none}.group-items-container,.group-items-wrapper{width:100%}`;export default i;
 //# sourceMappingURL=navigation-group.element.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-group.element.scss.js","sources":[],"sourcesContent":null,"names":[],"mappings":";;;;"}
+{"version":3,"file":"navigation-group.element.scss.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}

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,this.role="listitem"}connectedCallback(){super.connectedCallback(),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 n,i18n as d,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 u,NAVIGATION_TEXT_WRAPPER as m}from"./utils/utils.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,this.role="listitem"}connectedCallback(){super.connectedCallback(),this.id||(this.id=s())}firstUpdated(t){super.firstUpdated(t),this.handleItemAnchorText(),u(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(m,""))}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[n,h]}updated(t){super.updated(t),u(this,this.expanded)}}t([d()],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};
 //# sourceMappingURL=navigation-item.element.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-item.element.scss.js","sources":[],"sourcesContent":null,"names":[],"mappings":";;;;"}
+{"version":3,"file":"navigation-item.element.scss.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}

package/navigation/navigation-start.element.js

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

package/navigation/navigation.element.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues } from 'lit';
-import { Animatable, EventEmitter } from '@cds/core/internal';
-import { FocusableElement } from './utils/index.js';
+import { EventEmitter } from '@cds/core/internal';
+import { FocusableElement } from './utils/utils.js';
 import { CdsNavigationGroup } from './navigation-group.element.js';
 import { CdsNavigationStart } from './navigation-start.element.js';
 import { CdsNavigationItem } from './navigation-item.element.js';
@@ -33,10 +33,10 @@ export declare const CdsNavigationTagName = "cds-navigation";
  * @cssprop --nested-padding
  * @cssprop --padding
  * @slot
- * @slot - cds-navigation-substart - project content below the navigation toggle button
- * @slot - cds-navigation-end - project content below the scrollable section
+ * @slot cds-navigation-substart - project content below the navigation toggle button
+ * @slot cds-navigation-end - project content below the scrollable section
  */
-export declare class CdsNavigation extends LitElement implements Animatable {
+export declare class CdsNavigation extends LitElement {
     expandedRoot: boolean;
     cdsMotion: string;
     protected expandedChange: EventEmitter<boolean>;

package/navigation/navigation.element.js

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

package/navigation/navigation.element.scss.js

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

package/navigation/utils/{index.js → utils.js}

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

package/navigation/utils/{index.js.map → utils.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/navigation/utils/index.ts"],"sourcesContent":null,"names":["NAVIGATION_TEXT_WRAPPER","DEFAULT_NAVIGATION_LAYOUT","getNextFocusElement","current","elements","idx","indexOf","getPreviousFocusElement","length","getToggleIconDirection","element","isGroupStart","expanded","expandedRoot","manageScreenReaderElements","span","querySelector","setOrRemoveAttribute","removeFocus","hasFocus","setFocus","scrollIntoView","visibleElement","_a","elementType","tagName","grandparent","parentElement","hasAttribute"],"mappings":"0DAMY,MAACA,EAA0B,yBAC1BC,EAA4B,WAClC,SAASC,EAAoBC,EAASC,GACzC,MAAMC,EAAMD,EAASE,QAAQH,GAC7B,OAAOC,EAASC,EAAM,GAAKD,EAASC,EAAM,GAAKD,EAAS,GAErD,SAASG,EAAwBJ,EAASC,GAC7C,MAAMC,EAAMD,EAASE,QAAQH,GAC7B,OAAOC,EAASC,EAAM,GAAKD,EAASC,EAAM,GAAKD,EAASA,EAASI,OAAS,GAEvE,SAASC,EAAuBC,GACnC,OAAIA,EAAQC,aACDD,EAAQE,SAAW,OAAS,QAG5BF,EAAQG,aAAe,OAAS,QAGxC,SAASC,EAA2BJ,EAASG,GAChD,MAAME,EAAOL,EAAQM,cAAc,QAC/BD,GACAE,EAAqBF,EAAM,CAAC,aAAc,+BAA+B,KAC7DF,IAIb,SAASK,EAAYR,GACxBA,EAAQS,UAAW,EAEhB,SAASC,EAASV,GACrBA,EAAQS,UAAW,EACnBT,EAAQW,iBAEL,SAASC,EAAeZ,GAC3B,IAAIa,EACJ,MAAMC,EAAcd,MAAAA,OAAyC,EAASA,EAAQe,QACxEC,EAAiG,QAAlFH,EAAKb,MAAAA,OAAyC,EAASA,EAAQiB,qBAAkC,IAAPJ,OAAgB,EAASA,EAAGI,cAC3I,OAAQH,GACJ,IAAK,sBACD,OAAOd,EAAQkB,aAAa,mBAChC,IAAK,uBACD,QAA6F,0BAAnFF,MAAAA,OAAiD,EAASA,EAAYD,YAAyCC,MAAAA,OAAiD,EAASA,EAAYE,aAAa,cAChN,QACI,OAAO"}
+{"version":3,"file":"utils.js","sources":["../../../../src/navigation/utils/utils.ts"],"sourcesContent":null,"names":["NAVIGATION_TEXT_WRAPPER","DEFAULT_NAVIGATION_LAYOUT","getNextFocusElement","current","elements","idx","indexOf","getPreviousFocusElement","length","getToggleIconDirection","element","isGroupStart","expanded","expandedRoot","manageScreenReaderElements","span","querySelector","setOrRemoveAttribute","removeFocus","hasFocus","setFocus","scrollIntoView","visibleElement","_a","elementType","tagName","grandparent","parentElement","hasAttribute"],"mappings":"0DAMY,MAACA,EAA0B,yBAC1BC,EAA4B,WAClC,SAASC,EAAoBC,EAASC,GACzC,MAAMC,EAAMD,EAASE,QAAQH,GAC7B,OAAOC,EAASC,EAAM,GAAKD,EAASC,EAAM,GAAKD,EAAS,GAErD,SAASG,EAAwBJ,EAASC,GAC7C,MAAMC,EAAMD,EAASE,QAAQH,GAC7B,OAAOC,EAASC,EAAM,GAAKD,EAASC,EAAM,GAAKD,EAASA,EAASI,OAAS,GAEvE,SAASC,EAAuBC,GACnC,OAAIA,EAAQC,aACDD,EAAQE,SAAW,OAAS,QAG5BF,EAAQG,aAAe,OAAS,QAGxC,SAASC,EAA2BJ,EAASG,GAChD,MAAME,EAAOL,EAAQM,cAAc,QAC/BD,GACAE,EAAqBF,EAAM,CAAC,aAAc,+BAA+B,KAC7DF,IAIb,SAASK,EAAYR,GACxBA,EAAQS,UAAW,EAEhB,SAASC,EAASV,GACrBA,EAAQS,UAAW,EACnBT,EAAQW,iBAEL,SAASC,EAAeZ,GAC3B,IAAIa,EACJ,MAAMC,EAAcd,MAAAA,OAAyC,EAASA,EAAQe,QACxEC,EAAiG,QAAlFH,EAAKb,MAAAA,OAAyC,EAASA,EAAQiB,qBAAkC,IAAPJ,OAAgB,EAASA,EAAGI,cAC3I,OAAQH,GACJ,IAAK,sBACD,OAAOd,EAAQkB,aAAa,mBAChC,IAAK,uBACD,QAA6F,0BAAnFF,MAAAA,OAAiD,EAASA,EAAYD,YAAyCC,MAAAA,OAAiD,EAASA,EAAYE,aAAa,cAChN,QACI,OAAO"}