@cds/core 5.7.0 → 6.0.0-beta.2

package/tokens/tokens.scss

@@ -1,11 +1,12 @@
 // This token format is currently experimental and may change in the future
-$cds-global-layout-space-xxs: var(--cds-global-layout-space-xxs) !default;
-$cds-global-layout-space-xs: var(--cds-global-layout-space-xs) !default;
-$cds-global-layout-space-sm: var(--cds-global-layout-space-sm) !default;
-$cds-global-layout-space-md: var(--cds-global-layout-space-md) !default;
-$cds-global-layout-space-lg: var(--cds-global-layout-space-lg) !default;
-$cds-global-layout-space-xl: var(--cds-global-layout-space-xl) !default;
-$cds-global-layout-space-xxl: var(--cds-global-layout-space-xxl) !default;
+$cds-global-base: var(--cds-global-base) !default;
+$cds-global-base-static: 20 !default;
+$cds-global-scale-space: var(--cds-global-scale-space) !default;
+$cds-global-scale-space-static: 1 !default;
+$cds-global-scale-layout-space: var(--cds-global-scale-layout-space) !default;
+$cds-global-scale-layout-space-static: 1 !default;
+$cds-global-scale-typography: var(--cds-global-scale-typography) !default;
+$cds-global-scale-typography-static: 1 !default;
 $cds-global-layout-grid-cols: var(--cds-global-layout-grid-cols) !default;
 $cds-global-layout-grid-cols-static: 12 !default;
 $cds-global-layout-width-xs: var(--cds-global-layout-width-xs) !default;
@@ -18,20 +19,56 @@ $cds-global-layout-width-lg: var(--cds-global-layout-width-lg) !default;
 $cds-global-layout-width-lg-static: 1200px !default;
 $cds-global-layout-width-xl: var(--cds-global-layout-width-xl) !default;
 $cds-global-layout-width-xl-static: 1440px !default;
+$cds-global-layout-space-xxxs: var(--cds-global-layout-space-xxxs) !default;
+$cds-global-layout-space-xxxs-static: 2 !default;
+$cds-global-layout-space-xxs: var(--cds-global-layout-space-xxs) !default;
+$cds-global-layout-space-xxs-static: 4 !default;
+$cds-global-layout-space-xs: var(--cds-global-layout-space-xs) !default;
+$cds-global-layout-space-xs-static: 8 !default;
+$cds-global-layout-space-sm: var(--cds-global-layout-space-sm) !default;
+$cds-global-layout-space-sm-static: 12 !default;
+$cds-global-layout-space-md: var(--cds-global-layout-space-md) !default;
+$cds-global-layout-space-md-static: 16 !default;
+$cds-global-layout-space-lg: var(--cds-global-layout-space-lg) !default;
+$cds-global-layout-space-lg-static: 24 !default;
+$cds-global-layout-space-xl: var(--cds-global-layout-space-xl) !default;
+$cds-global-layout-space-xl-static: 32 !default;
+$cds-global-layout-space-xxl: var(--cds-global-layout-space-xxl) !default;
+$cds-global-layout-space-xxl-static: 48 !default;
+$cds-global-layout-space-xxxl: var(--cds-global-layout-space-xxxl) !default;
+$cds-global-layout-space-xxxl-static: 64 !default;
 $cds-global-space-0: var(--cds-global-space-0) !default;
+$cds-global-space-0-static: 0 !default;
 $cds-global-space-1: var(--cds-global-space-1) !default;
+$cds-global-space-1-static: 1 !default;
 $cds-global-space-2: var(--cds-global-space-2) !default;
+$cds-global-space-2-static: 2 !default;
 $cds-global-space-3: var(--cds-global-space-3) !default;
+$cds-global-space-3-static: 4 !default;
 $cds-global-space-4: var(--cds-global-space-4) !default;
+$cds-global-space-4-static: 6 !default;
 $cds-global-space-5: var(--cds-global-space-5) !default;
+$cds-global-space-5-static: 8 !default;
 $cds-global-space-6: var(--cds-global-space-6) !default;
+$cds-global-space-6-static: 12 !default;
 $cds-global-space-7: var(--cds-global-space-7) !default;
+$cds-global-space-7-static: 16 !default;
 $cds-global-space-8: var(--cds-global-space-8) !default;
+$cds-global-space-8-static: 18 !default;
 $cds-global-space-9: var(--cds-global-space-9) !default;
+$cds-global-space-9-static: 24 !default;
 $cds-global-space-10: var(--cds-global-space-10) !default;
+$cds-global-space-10-static: 32 !default;
 $cds-global-space-11: var(--cds-global-space-11) !default;
+$cds-global-space-11-static: 36 !default;
 $cds-global-space-12: var(--cds-global-space-12) !default;
+$cds-global-space-12-static: 48 !default;
 $cds-global-space-13: var(--cds-global-space-13) !default;
+$cds-global-space-13-static: 64 !default;
+$cds-global-space-14: var(--cds-global-space-14) !default;
+$cds-global-space-14-static: 72 !default;
+$cds-global-space-15: var(--cds-global-space-15) !default;
+$cds-global-space-15-static: 96 !default;
 $cds-global-color-black: var(--cds-global-color-black) !default;
 $cds-global-color-white: var(--cds-global-color-white) !default;
 $cds-global-color-green-50: var(--cds-global-color-green-50) !default;
@@ -144,6 +181,17 @@ $cds-global-color-yellow-700: var(--cds-global-color-yellow-700) !default;
 $cds-global-color-yellow-800: var(--cds-global-color-yellow-800) !default;
 $cds-global-color-yellow-900: var(--cds-global-color-yellow-900) !default;
 $cds-global-color-yellow-1000: var(--cds-global-color-yellow-1000) !default;
+$cds-global-color-lime-50: var(--cds-global-color-lime-50) !default;
+$cds-global-color-lime-100: var(--cds-global-color-lime-100) !default;
+$cds-global-color-lime-200: var(--cds-global-color-lime-200) !default;
+$cds-global-color-lime-300: var(--cds-global-color-lime-300) !default;
+$cds-global-color-lime-400: var(--cds-global-color-lime-400) !default;
+$cds-global-color-lime-500: var(--cds-global-color-lime-500) !default;
+$cds-global-color-lime-600: var(--cds-global-color-lime-600) !default;
+$cds-global-color-lime-700: var(--cds-global-color-lime-700) !default;
+$cds-global-color-lime-800: var(--cds-global-color-lime-800) !default;
+$cds-global-color-lime-900: var(--cds-global-color-lime-900) !default;
+$cds-global-color-lime-1000: var(--cds-global-color-lime-1000) !default;
 $cds-global-color-tangerine-50: var(--cds-global-color-tangerine-50) !default;
 $cds-global-color-tangerine-100: var(--cds-global-color-tangerine-100) !default;
 $cds-global-color-tangerine-200: var(--cds-global-color-tangerine-200) !default;
@@ -267,17 +315,25 @@ $cds-global-typography-font-weight-semibold: var(--cds-global-typography-font-we
 $cds-global-typography-font-weight-bold: var(--cds-global-typography-font-weight-bold) !default;
 $cds-global-typography-font-weight-extrabold: var(--cds-global-typography-font-weight-extrabold) !default;
 $cds-global-typography-font-size-0: var(--cds-global-typography-font-size-0) !default;
+$cds-global-typography-font-size-0-static: 10 !default;
 $cds-global-typography-font-size-1: var(--cds-global-typography-font-size-1) !default;
+$cds-global-typography-font-size-1-static: 11 !default;
 $cds-global-typography-font-size-2: var(--cds-global-typography-font-size-2) !default;
+$cds-global-typography-font-size-2-static: 12 !default;
 $cds-global-typography-font-size-3: var(--cds-global-typography-font-size-3) !default;
+$cds-global-typography-font-size-3-static: 13 !default;
 $cds-global-typography-font-size-4: var(--cds-global-typography-font-size-4) !default;
+$cds-global-typography-font-size-4-static: 14 !default;
 $cds-global-typography-font-size-5: var(--cds-global-typography-font-size-5) !default;
+$cds-global-typography-font-size-5-static: 16 !default;
 $cds-global-typography-font-size-6: var(--cds-global-typography-font-size-6) !default;
+$cds-global-typography-font-size-6-static: 20 !default;
 $cds-global-typography-font-size-7: var(--cds-global-typography-font-size-7) !default;
+$cds-global-typography-font-size-7-static: 24 !default;
 $cds-global-typography-font-size-8: var(--cds-global-typography-font-size-8) !default;
+$cds-global-typography-font-size-8-static: 32 !default;
 $cds-global-typography-font-size-9: var(--cds-global-typography-font-size-9) !default;
-$cds-global-typography-base-font-size: var(--cds-global-typography-base-font-size) !default;
-$cds-global-typography-base-font-size-px: var(--cds-global-typography-base-font-size-px) !default;
+$cds-global-typography-font-size-9-static: 40 !default;
 $cds-global-typography-font-family: var(--cds-global-typography-font-family) !default;
 $cds-global-typography-header-font-family: var(--cds-global-typography-header-font-family) !default;
 $cds-global-typography-monospace-font-family: var(--cds-global-typography-monospace-font-family) !default;
@@ -289,51 +345,62 @@ $cds-global-typography-link-color-hover: var(--cds-global-typography-link-color-
 $cds-global-typography-link-color-visited: var(--cds-global-typography-link-color-visited) !default;
 $cds-global-typography-link-color-visited-hover: var(--cds-global-typography-link-color-visited-hover) !default;
 $cds-global-typography-body-font-size: var(--cds-global-typography-body-font-size) !default;
+$cds-global-typography-body-font-size-static: 14 !default;
 $cds-global-typography-body-line-height: var(--cds-global-typography-body-line-height) !default;
 $cds-global-typography-body-line-height-static: 1.42857em !default;
 $cds-global-typography-body-letter-spacing: var(--cds-global-typography-body-letter-spacing) !default;
 $cds-global-typography-body-font-weight: var(--cds-global-typography-body-font-weight) !default;
 $cds-global-typography-display-font-size: var(--cds-global-typography-display-font-size) !default;
+$cds-global-typography-display-font-size-static: 40 !default;
 $cds-global-typography-display-line-height: var(--cds-global-typography-display-line-height) !default;
 $cds-global-typography-display-line-height-static: 1.1em !default;
 $cds-global-typography-display-letter-spacing: var(--cds-global-typography-display-letter-spacing) !default;
 $cds-global-typography-display-font-weight: var(--cds-global-typography-display-font-weight) !default;
 $cds-global-typography-heading-font-size: var(--cds-global-typography-heading-font-size) !default;
+$cds-global-typography-heading-font-size-static: 32 !default;
 $cds-global-typography-heading-line-height: var(--cds-global-typography-heading-line-height) !default;
 $cds-global-typography-heading-line-height-static: 1.125em !default;
 $cds-global-typography-heading-letter-spacing: var(--cds-global-typography-heading-letter-spacing) !default;
 $cds-global-typography-heading-font-weight: var(--cds-global-typography-heading-font-weight) !default;
 $cds-global-typography-title-font-size: var(--cds-global-typography-title-font-size) !default;
+$cds-global-typography-title-font-size-static: 24 !default;
 $cds-global-typography-title-line-height: var(--cds-global-typography-title-line-height) !default;
 $cds-global-typography-title-line-height-static: 1.16667em !default;
 $cds-global-typography-title-letter-spacing: var(--cds-global-typography-title-letter-spacing) !default;
 $cds-global-typography-title-font-weight: var(--cds-global-typography-title-font-weight) !default;
 $cds-global-typography-section-font-size: var(--cds-global-typography-section-font-size) !default;
+$cds-global-typography-section-font-size-static: 20 !default;
 $cds-global-typography-section-line-height: var(--cds-global-typography-section-line-height) !default;
 $cds-global-typography-section-line-height-static: 1.2em !default;
 $cds-global-typography-section-letter-spacing: var(--cds-global-typography-section-letter-spacing) !default;
 $cds-global-typography-section-font-weight: var(--cds-global-typography-section-font-weight) !default;
 $cds-global-typography-subsection-font-size: var(--cds-global-typography-subsection-font-size) !default;
+$cds-global-typography-subsection-font-size-static: 16 !default;
 $cds-global-typography-subsection-line-height: var(--cds-global-typography-subsection-line-height) !default;
 $cds-global-typography-subsection-line-height-static: 1.25em !default;
 $cds-global-typography-subsection-letter-spacing: var(--cds-global-typography-subsection-letter-spacing) !default;
 $cds-global-typography-subsection-font-weight: var(--cds-global-typography-subsection-font-weight) !default;
 $cds-global-typography-message-font-size: var(--cds-global-typography-message-font-size) !default;
+$cds-global-typography-message-font-size-static: 16 !default;
 $cds-global-typography-message-line-height: var(--cds-global-typography-message-line-height) !default;
 $cds-global-typography-message-line-height-static: 1.25em !default;
 $cds-global-typography-message-letter-spacing: var(--cds-global-typography-message-letter-spacing) !default;
 $cds-global-typography-message-font-weight: var(--cds-global-typography-message-font-weight) !default;
+$cds-global-typography-message-font-weight-static: 400 !default;
 $cds-global-typography-secondary-font-size: var(--cds-global-typography-secondary-font-size) !default;
+$cds-global-typography-secondary-font-size-static: 13 !default;
 $cds-global-typography-secondary-line-height: var(--cds-global-typography-secondary-line-height) !default;
 $cds-global-typography-secondary-line-height-static: 1.23077em !default;
 $cds-global-typography-secondary-letter-spacing: var(--cds-global-typography-secondary-letter-spacing) !default;
 $cds-global-typography-secondary-font-weight: var(--cds-global-typography-secondary-font-weight) !default;
 $cds-global-typography-caption-font-size: var(--cds-global-typography-caption-font-size) !default;
+$cds-global-typography-caption-font-size-static: 11 !default;
 $cds-global-typography-caption-line-height: var(--cds-global-typography-caption-line-height) !default;
 $cds-global-typography-caption-line-height-static: 1.454545em !default;
 $cds-global-typography-caption-letter-spacing: var(--cds-global-typography-caption-letter-spacing) !default;
 $cds-global-typography-caption-font-weight: var(--cds-global-typography-caption-font-weight) !default;
 $cds-global-typography-smallcaption-font-size: var(--cds-global-typography-smallcaption-font-size) !default;
+$cds-global-typography-smallcaption-font-size-static: 10 !default;
 $cds-global-typography-smallcaption-line-height: var(--cds-global-typography-smallcaption-line-height) !default;
 $cds-global-typography-smallcaption-line-height-static: 1.2em !default;
 $cds-global-typography-smallcaption-letter-spacing: var(--cds-global-typography-smallcaption-letter-spacing) !default;
@@ -350,15 +417,19 @@ $cds-global-animation-duration-slowest: var(--cds-global-animation-duration-slow
 $cds-global-animation-easing-primary: var(--cds-global-animation-easing-primary) !default;
 $cds-global-animation-easing-secondary: var(--cds-global-animation-easing-secondary) !default;
 $cds-global-animation-easing-loop: var(--cds-global-animation-easing-loop) !default;
-$cds-global-base: var(--cds-global-base) !default;
-$cds-global-base-static: 20 !default;
 $cds-alias-object-border-radius-100: var(--cds-alias-object-border-radius-100) !default;
+$cds-alias-object-border-radius-100-static: 4 !default;
 $cds-alias-object-border-radius-200: var(--cds-alias-object-border-radius-200) !default;
+$cds-alias-object-border-radius-200-static: 12 !default;
 $cds-alias-object-border-radius-300: var(--cds-alias-object-border-radius-300) !default;
 $cds-alias-object-border-width-100: var(--cds-alias-object-border-width-100) !default;
+$cds-alias-object-border-width-100-static: 1 !default;
 $cds-alias-object-border-width-200: var(--cds-alias-object-border-width-200) !default;
+$cds-alias-object-border-width-200-static: 2 !default;
 $cds-alias-object-border-width-300: var(--cds-alias-object-border-width-300) !default;
+$cds-alias-object-border-width-300-static: 3 !default;
 $cds-alias-object-border-width-400: var(--cds-alias-object-border-width-400) !default;
+$cds-alias-object-border-width-400-static: 4 !default;
 $cds-alias-object-border-color: var(--cds-alias-object-border-color) !default;
 $cds-alias-object-border-color-tint: var(--cds-alias-object-border-color-tint) !default;
 $cds-alias-object-border-color-shade: var(--cds-alias-object-border-color-shade) !default;
@@ -370,9 +441,13 @@ $cds-alias-object-opacity-100: var(--cds-alias-object-opacity-100) !default;
 $cds-alias-object-opacity-200: var(--cds-alias-object-opacity-200) !default;
 $cds-alias-object-opacity-300: var(--cds-alias-object-opacity-300) !default;
 $cds-alias-object-interaction-outline: var(--cds-alias-object-interaction-outline) !default;
+$cds-alias-object-interaction-outline-static: Highlight solid 2px !default;
 $cds-alias-object-interaction-outline-webkit: var(--cds-alias-object-interaction-outline-webkit) !default;
+$cds-alias-object-interaction-outline-webkit-static: 5px auto -webkit-focus-ring-color !default;
 $cds-alias-object-interaction-outline-offset: var(--cds-alias-object-interaction-outline-offset) !default;
+$cds-alias-object-interaction-outline-offset-static: 1px !default;
 $cds-alias-object-interaction-touch-target: var(--cds-alias-object-interaction-touch-target) !default;
+$cds-alias-object-interaction-touch-target-static: 36 !default;
 $cds-alias-object-interaction-border-color: var(--cds-alias-object-interaction-border-color) !default;
 $cds-alias-object-interaction-background: var(--cds-alias-object-interaction-background) !default;
 $cds-alias-object-interaction-background-hover: var(--cds-alias-object-interaction-background-hover) !default;
@@ -414,4 +489,7 @@ $cds-alias-status-disabled-tint: var(--cds-alias-status-disabled-tint) !default;
 $cds-alias-status-disabled-shade: var(--cds-alias-status-disabled-shade) !default;
 $cds-alias-status-alt: var(--cds-alias-status-alt) !default;
 $cds-alias-status-alt-tint: var(--cds-alias-status-alt-tint) !default;
-$cds-alias-status-alt-shade: var(--cds-alias-status-alt-shade) !default;
+$cds-alias-status-alt-shade: var(--cds-alias-status-alt-shade) !default;
+$cds-internal-scale-1: var(--cds-internal-scale-1) !default;
+$cds-internal-scale-2: var(--cds-internal-scale-2) !default;
+$cds-internal-scale-3: var(--cds-internal-scale-3) !default;

package/tree-view/register.d.ts

@@ -1,6 +1,7 @@
 import '@cds/core/icon/register.js';
 import '@cds/core/internal-components/visual-checkbox/register.js';
 import '@cds/core/progress-circle/register.js';
+import '@cds/core/button-expand/register.js';
 import { CdsTree } from './tree.element.js';
 import { CdsTreeItem } from './tree-item.element.js';
 declare global {

package/tree-view/register.js

@@ -1,2 +1,2 @@
-import"@cds/core/icon/register.js";import"@cds/core/internal-components/visual-checkbox/register.js";import"@cds/core/progress-circle/register.js";import{registerElementSafely as e,ClarityMotion as r,AnimationTreeItemExpandName as o,AnimationTreeItemExpandConfig as s}from"@cds/core/internal";import{CdsTree as c}from"./tree.element.js";import{CdsTreeItem as i}from"./tree-item.element.js";import{ClarityIcons as t}from"@cds/core/icon/icon.service.js";import{angleIcon as m}from"@cds/core/icon/shapes/angle.js";e("cds-tree",c),e("cds-tree-item",i),t.addIcons(m),r.add(o,s);
+import"@cds/core/icon/register.js";import"@cds/core/internal-components/visual-checkbox/register.js";import"@cds/core/progress-circle/register.js";import"@cds/core/button-expand/register.js";import{registerElementSafely as e,ClarityMotion as r,AnimationTreeItemExpandName as t,AnimationTreeItemExpandConfig as o}from"@cds/core/internal";import{CdsTree as s}from"./tree.element.js";import{CdsTreeItem as c}from"./tree-item.element.js";e("cds-tree",s),e("cds-tree-item",c),r.add(t,o);
 //# sourceMappingURL=register.js.map

package/tree-view/register.js.map

@@ -1 +1 @@
-{"version":3,"file":"register.js","sources":["../../../src/tree-view/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/icon/register.js';\nimport '@cds/core/internal-components/visual-checkbox/register.js';\nimport '@cds/core/progress-circle/register.js';\nimport { ClarityMotion, AnimationTreeItemExpandName, AnimationTreeItemExpandConfig, registerElementSafely, } from '@cds/core/internal';\nimport { CdsTree } from './tree.element.js';\nimport { CdsTreeItem } from './tree-item.element.js';\nimport { ClarityIcons } from '@cds/core/icon/icon.service.js';\nimport { angleIcon } from '@cds/core/icon/shapes/angle.js';\nregisterElementSafely('cds-tree', CdsTree);\nregisterElementSafely('cds-tree-item', CdsTreeItem);\nClarityIcons.addIcons(angleIcon);\nClarityMotion.add(AnimationTreeItemExpandName, AnimationTreeItemExpandConfig);\n"],"names":["registerElementSafely","CdsTree","CdsTreeItem","ClarityIcons","addIcons","angleIcon","ClarityMotion","add","AnimationTreeItemExpandName","AnimationTreeItemExpandConfig"],"mappings":"+fAaAA,EAAsB,WAAYC,GAClCD,EAAsB,gBAAiBE,GACvCC,EAAaC,SAASC,GACtBC,EAAcC,IAAIC,EAA6BC"}
+{"version":3,"file":"register.js","sources":["../../../src/tree-view/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/icon/register.js';\nimport '@cds/core/internal-components/visual-checkbox/register.js';\nimport '@cds/core/progress-circle/register.js';\nimport '@cds/core/button-expand/register.js';\nimport { ClarityMotion, AnimationTreeItemExpandName, AnimationTreeItemExpandConfig, registerElementSafely, } from '@cds/core/internal';\nimport { CdsTree } from './tree.element.js';\nimport { CdsTreeItem } from './tree-item.element.js';\nregisterElementSafely('cds-tree', CdsTree);\nregisterElementSafely('cds-tree-item', CdsTreeItem);\nClarityMotion.add(AnimationTreeItemExpandName, AnimationTreeItemExpandConfig);\n"],"names":["registerElementSafely","CdsTree","CdsTreeItem","ClarityMotion","add","AnimationTreeItemExpandName","AnimationTreeItemExpandConfig"],"mappings":"kbAYAA,EAAsB,WAAYC,GAClCD,EAAsB,gBAAiBE,GACvCC,EAAcC,IAAIC,EAA6BC"}

package/tree-view/story-utils.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @description
+ *
+ * These are storybook utils for creating a dynamic demo.
+ *
+ * @internal
+ */
+export declare type CheckboxSelection = true | false | 'indeterminate';
+export declare class TreeItem {
+    id: string;
+    open: boolean;
+    show: boolean;
+    expanded: false;
+    expandable: false;
+    parent: TreeItem | null;
+    nodes: TreeItem[];
+    private _selected;
+    set selected(value: CheckboxSelection);
+    get selected(): CheckboxSelection;
+    constructor(id: string);
+}
+export declare function createItems(parent?: any, length?: number): TreeItem[];

package/tree-view/tree-item.element.d.ts

@@ -1,4 +1,4 @@
-import { Animatable, EventEmitter } from '@cds/core/internal';
+import { EventEmitter } from '@cds/core/internal';
 import { LitElement, PropertyValues } from 'lit';
 /**
  * Tree view is a hierarchical component that gives users access to a hierarchical set of objects displayed in a the parent-child relationship.
@@ -15,7 +15,6 @@ import { LitElement, PropertyValues } from 'lit';
  *  </cds-tree>
  * ```
  *
- * @beta
  * @element cds-tree-item
  * @slot - Content slot for inside the tree item
  * @slot expand-collapse-icon
@@ -29,7 +28,7 @@ import { LitElement, PropertyValues } from 'lit';
  * @cssprop --font-size
  * @cssprop --font-weight
  */
-export declare class CdsTreeItem extends LitElement implements Animatable {
+export declare class CdsTreeItem extends LitElement {
     i18n: {
         loading: string;
     };
@@ -38,6 +37,14 @@ export declare class CdsTreeItem extends LitElement implements Animatable {
     multiSelect: boolean;
     disabled: boolean;
     expanded: boolean;
+    /**
+     * @description
+     *
+     * Expandable is used (see line 124) to automatically show the cds-button-expand element when a tree-item detects that
+     * there are children. However, when doing investigation into why styles were not applied for tree-items controlled
+     * via *ngIf (or any conditional DOM and code that will put tree-item elements there at some unknown point in the
+     * future) it was re-discovered as a public property without a demo for manual usage.
+     */
     expandable: boolean;
     indeterminate: boolean;
     loading: boolean;

package/tree-view/tree-item.element.js

@@ -1,2 +1,2 @@
-import{__decorate as e}from"tslib";import{I18nService as t,createId as i,baseStyles as s,i18n as d,property as l,event as o,querySlotAll as a,querySlot as n,animate as r,AnimationTreeItemExpandName as c,reverseAnimation as p}from"@cds/core/internal";import{LitElement as h,html as m}from"lit";import{ifDefined as g}from"lit/directives/if-defined.js";import u from"./tree-item.element.scss.js";let v=class extends h{constructor(){super(...arguments);this.i18n=t.keys.treeview,this.cdsMotion="on",this.multiSelect=!1,this.disabled=!1,this.expanded=!1,this.expandable=!1,this.indeterminate=!1,this.loading=!1,this.selected=!1}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.role="treeitem",this.id||(this.id=i())}updated(e){super.updated(e),this.treeItemChildren.length>0&&(this.expandable=!0),this.expandable?this.ariaExpanded=this.expanded?"true":"false":this.ariaExpanded=null,this.multiSelect?this.ariaSelected=this.selected?"true":"false":this.ariaSelected=null,this.ariaDisabled=this.disabled?"true":"false"}toggleExpanded(){this.expandedChange.emit(!this.expanded)}toggleSelected(){this.selectedChange.emit(!this.selected),this.anchorLink&&this.anchorLink.click()}onSlotChange(){this.treeItemChildren.forEach((e=>{e.getAttribute("slot")||e.setAttribute("slot",i())})),this.requestUpdate()}render(){return m`<div class="private-host" cds-layout="p-l:md"><div cds-layout="horizontal align:vertical-center ${this.multiSelect?"gap:md":"gap:sm"}"><div class="lhs-container">${this.treeItemLeftHandSideTemplate}</div><div class="item-content" cds-layout="p:sm ${this.multiSelect?"p-x:md":""} align:stretch" @click="${()=>this.toggleSelected()}"><span cds-layout="horizontal align:vertical-center gap:md" cds-text="lhe">${this.multiSelect?m`<cds-internal-visual-checkbox part="checkbox" .disabled="${this.disabled}" .indeterminate="${this.indeterminate}" .selected="${this.selected}"></cds-internal-visual-checkbox>`:m``}<slot @slotchange="${this.onSlotChange}"></slot></span></div></div><div class="item-children" role="${g(this.expanded?"group":void 0)}" ?hidden="${!this.expanded}">${Array.from(this.treeItemChildren).map((e=>m`<slot name="${e.getAttribute("slot")}"></slot>`))}</div></div>`}get treeItemLeftHandSideTemplate(){return this.loading?m`<cds-progress-circle size="xs" aria-label="${this.i18n.loading}"></cds-progress-circle>`:this.expandable?m`<div @click="${()=>this.toggleExpanded()}"><cds-icon class="expand-collapse-icon" part="expand-collapse-icon" shape="angle"></cds-icon></div>`:m``}static get styles(){return[s,u]}};e([d()],v.prototype,"i18n",void 0),e([l({type:String})],v.prototype,"cdsMotion",void 0),e([o()],v.prototype,"cdsMotionChange",void 0),e([l({type:Boolean,reflect:!0,attribute:"multi-select"})],v.prototype,"multiSelect",void 0),e([l({type:Boolean})],v.prototype,"disabled",void 0),e([l({type:Boolean,reflect:!0})],v.prototype,"expanded",void 0),e([l({type:Boolean,reflect:!0})],v.prototype,"expandable",void 0),e([l({type:Boolean,reflect:!0})],v.prototype,"indeterminate",void 0),e([l({type:Boolean,reflect:!0})],v.prototype,"loading",void 0),e([l({type:Boolean,reflect:!0})],v.prototype,"selected",void 0),e([a(":scope > cds-tree-item")],v.prototype,"treeItemChildren",void 0),e([n(":scope > a")],v.prototype,"anchorLink",void 0),e([o()],v.prototype,"expandedChange",void 0),e([o()],v.prototype,"selectedChange",void 0),v=e([r({expanded:{true:c,false:p(c)}})],v);export{v as CdsTreeItem};
+import{__decorate as e}from"tslib";import{I18nService as t,createId as i,baseStyles as d,i18n as s,property as o,event as a,querySlotAll as l,querySlot as n,animate as r,AnimationTreeItemExpandName as c,reverseAnimation as p}from"@cds/core/internal";import{LitElement as h,html as m}from"lit";import{ifDefined as g}from"lit/directives/if-defined.js";import v from"./tree-item.element.scss.js";let x=class extends h{constructor(){super(...arguments);this.i18n=t.keys.treeview,this.cdsMotion="on",this.multiSelect=!1,this.disabled=!1,this.expanded=!1,this.expandable=!1,this.indeterminate=!1,this.loading=!1,this.selected=!1}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.role="treeitem",this.id||(this.id=i())}updated(e){super.updated(e),this.treeItemChildren.length>0&&(this.expandable=!0),this.expandable?this.ariaExpanded=this.expanded?"true":"false":this.ariaExpanded=null,this.multiSelect?this.ariaSelected=this.selected?"true":"false":this.ariaSelected=null,this.ariaDisabled=this.disabled?"true":"false"}toggleExpanded(){this.expandedChange.emit(!this.expanded)}toggleSelected(){this.selectedChange.emit(!this.selected),this.anchorLink&&this.anchorLink.click()}onSlotChange(){this.treeItemChildren.forEach((e=>{e.getAttribute("slot")||e.setAttribute("slot",i())})),this.requestUpdate()}render(){return m`<div class="private-host" cds-layout="p-l:md"><div cds-layout="horizontal align:vertical-center ${this.multiSelect?"gap:xs":"gap:xxs"}"><div class="lhs-container">${this.treeItemLeftHandSideTemplate}</div><div class="item-content" cds-layout="horizontal p:xxs align:vertical-center align:stretch" @click="${()=>this.toggleSelected()}"><span cds-layout="horizontal align:vertical-center gap:sm" cds-text="lhe">${this.multiSelect?m`<cds-internal-visual-checkbox part="checkbox" .disabled="${this.disabled}" .indeterminate="${this.indeterminate}" .selected="${this.selected}"></cds-internal-visual-checkbox>`:m``}<slot @slotchange="${this.onSlotChange}"></slot></span></div></div><div class="item-children" role="${g(this.expanded?"group":void 0)}" ?hidden="${!this.expanded}">${Array.from(this.treeItemChildren).map((e=>m`<slot name="${e.getAttribute("slot")}"></slot>`))}</div></div>`}get treeItemLeftHandSideTemplate(){return this.loading?m`<cds-progress-circle size="xs" aria-label="${this.i18n.loading}"></cds-progress-circle>`:this.expandable?m`<div @click="${()=>this.toggleExpanded()}"><cds-button-expand .expanded="${this.expanded}" readonly="readonly" action="vertical" part="expand-collapse-icon"></cds-button-expand></div>`:m``}static get styles(){return[d,v]}};e([s()],x.prototype,"i18n",void 0),e([o({type:String})],x.prototype,"cdsMotion",void 0),e([a()],x.prototype,"cdsMotionChange",void 0),e([o({type:Boolean,reflect:!0,attribute:"multi-select"})],x.prototype,"multiSelect",void 0),e([o({type:Boolean})],x.prototype,"disabled",void 0),e([o({type:Boolean,reflect:!0})],x.prototype,"expanded",void 0),e([o({type:Boolean,reflect:!0})],x.prototype,"expandable",void 0),e([o({type:Boolean,reflect:!0})],x.prototype,"indeterminate",void 0),e([o({type:Boolean,reflect:!0})],x.prototype,"loading",void 0),e([o({type:Boolean,reflect:!0})],x.prototype,"selected",void 0),e([l(":scope > cds-tree-item")],x.prototype,"treeItemChildren",void 0),e([n(":scope > a")],x.prototype,"anchorLink",void 0),e([a()],x.prototype,"expandedChange",void 0),e([a()],x.prototype,"selectedChange",void 0),x=e([r({expanded:{true:c,false:p(c)}})],x);export{x as CdsTreeItem};
 //# sourceMappingURL=tree-item.element.js.map

package/tree-view/tree-item.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-item.element.js","sources":["../../../src/tree-view/tree-item.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { animate, AnimationTreeItemExpandName, baseStyles, createId, event, i18n, I18nService, property, querySlot, querySlotAll, reverseAnimation, } from '@cds/core/internal';\nimport { html, LitElement } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport styles from './tree-item.element.scss';\n/**\n * Tree view is a hierarchical component that gives users access to a hierarchical set of objects displayed in a the parent-child relationship.\n *\n * ```typescript\n * import '@cds/core/tree-view/register.js';\n * ```\n *\n * ```html\n *  <cds-tree>\n *    <cds-tree-item>1</cds-tree-item>\n *    <cds-tree-item>2</cds-tree-item>\n *    <cds-tree-item>3</cds-tree-item>\n *  </cds-tree>\n * ```\n *\n * @beta\n * @element cds-tree-item\n * @slot - Content slot for inside the tree item\n * @slot expand-collapse-icon\n * @event expandedChange - notify when the user has clicked the expand / collapse button\n * @event selectedChange - notify when the user has clicked the tree item\n * @cssprop --animation-duration\n * @cssprop --animation-easing\n * @cssprop --background\n * @cssprop --color\n * @cssprop --focus-width\n * @cssprop --font-size\n * @cssprop --font-weight\n */\nlet CdsTreeItem = class CdsTreeItem extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.i18n = I18nService.keys.treeview;\n        this.cdsMotion = 'on';\n        this.multiSelect = false;\n        this.disabled = false;\n        this.expanded = false;\n        this.expandable = false;\n        this.indeterminate = false;\n        this.loading = false;\n        this.selected = false;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.tabIndex = -1;\n        this.role = 'treeitem';\n        if (!this.id) {\n            this.id = createId();\n        }\n    }\n    updated(props) {\n        super.updated(props);\n        if (this.treeItemChildren.length > 0) {\n            this.expandable = true;\n        }\n        if (this.expandable) {\n            this.ariaExpanded = this.expanded ? 'true' : 'false';\n        }\n        else {\n            this.ariaExpanded = null;\n        }\n        if (this.multiSelect) {\n            this.ariaSelected = this.selected ? 'true' : 'false';\n        }\n        else {\n            this.ariaSelected = null;\n        }\n        this.ariaDisabled = this.disabled ? 'true' : 'false';\n    }\n    toggleExpanded() {\n        this.expandedChange.emit(!this.expanded);\n    }\n    toggleSelected() {\n        this.selectedChange.emit(!this.selected);\n        if (this.anchorLink) {\n            this.anchorLink.click();\n        }\n    }\n    onSlotChange() {\n        this.treeItemChildren.forEach(i => {\n            if (!i.getAttribute('slot')) {\n                i.setAttribute('slot', createId());\n            }\n        });\n        this.requestUpdate();\n    }\n    render() {\n        return html `\n      <div class=\"private-host\" cds-layout=\"p-l:md\">\n        <div cds-layout=\"horizontal align:vertical-center ${this.multiSelect ? 'gap:md' : 'gap:sm'}\">\n          <div class=\"lhs-container\">${this.treeItemLeftHandSideTemplate}</div>\n          <div\n            class=\"item-content\"\n            cds-layout=\"p:sm ${this.multiSelect ? 'p-x:md' : ''} align:stretch\"\n            @click=\"${() => this.toggleSelected()}\"\n          >\n            <span cds-layout=\"horizontal align:vertical-center gap:md\" cds-text=\"lhe\">\n              ${this.multiSelect\n            ? html `\n                    <cds-internal-visual-checkbox\n                      part=\"checkbox\"\n                      .disabled=\"${this.disabled}\"\n                      .indeterminate=\"${this.indeterminate}\"\n                      .selected=\"${this.selected}\"\n                    ></cds-internal-visual-checkbox>\n                  `\n            : html ``}\n              <slot @slotchange=${this.onSlotChange}></slot>\n            </span>\n          </div>\n        </div>\n        <div class=\"item-children\" role=${ifDefined(this.expanded ? 'group' : undefined)} ?hidden=\"${!this.expanded}\">\n          ${Array.from(this.treeItemChildren).map((i) => html `<slot name=\"${i.getAttribute('slot')}\"></slot>`)}\n        </div>\n      </div>\n    `;\n    }\n    /**\n     * This container contains one of the following depending on the state of the tree item:\n     *   - caret if the tree item is expandable\n     *   - progress circle if the tree item is loading its children (via an async call, etc)\n     *   - nothing if the tree item is an end node\n     *\n     * The container with a fixed width ensures the same alignment whether or not it contains\n     * a child elemeent to render.\n     */\n    /** @private */\n    get treeItemLeftHandSideTemplate() {\n        if (this.loading) {\n            return html ` <cds-progress-circle size=\"xs\" aria-label=\"${this.i18n.loading}\"></cds-progress-circle> `;\n        }\n        else if (this.expandable) {\n            return html `\n        <div @click=\"${() => this.toggleExpanded()}\">\n          <cds-icon class=\"expand-collapse-icon\" part=\"expand-collapse-icon\" shape=\"angle\"></cds-icon>\n        </div>\n      `;\n        }\n        else {\n            return html ``;\n        }\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n};\n__decorate([\n    i18n()\n], CdsTreeItem.prototype, \"i18n\", void 0);\n__decorate([\n    property({ type: String })\n], CdsTreeItem.prototype, \"cdsMotion\", void 0);\n__decorate([\n    event()\n], CdsTreeItem.prototype, \"cdsMotionChange\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true, attribute: 'multi-select' })\n], CdsTreeItem.prototype, \"multiSelect\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsTreeItem.prototype, \"disabled\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsTreeItem.prototype, \"expanded\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsTreeItem.prototype, \"expandable\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsTreeItem.prototype, \"indeterminate\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsTreeItem.prototype, \"loading\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsTreeItem.prototype, \"selected\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-tree-item')\n], CdsTreeItem.prototype, \"treeItemChildren\", void 0);\n__decorate([\n    querySlot(':scope > a')\n], CdsTreeItem.prototype, \"anchorLink\", void 0);\n__decorate([\n    event()\n], CdsTreeItem.prototype, \"expandedChange\", void 0);\n__decorate([\n    event()\n], CdsTreeItem.prototype, \"selectedChange\", void 0);\nCdsTreeItem = __decorate([\n    animate({\n        expanded: {\n            true: AnimationTreeItemExpandName,\n            false: reverseAnimation(AnimationTreeItemExpandName),\n        },\n    })\n], CdsTreeItem);\nexport { CdsTreeItem };\n"],"names":["CdsTreeItem","LitElement","constructor","super","this","i18n","I18nService","keys","treeview","cdsMotion","multiSelect","disabled","expanded","expandable","indeterminate","loading","selected","connectedCallback","tabIndex","role","id","createId","updated","props","treeItemChildren","length","ariaExpanded","ariaSelected","ariaDisabled","toggleExpanded","expandedChange","emit","toggleSelected","selectedChange","anchorLink","click","onSlotChange","forEach","i","getAttribute","setAttribute","requestUpdate","render","html","treeItemLeftHandSideTemplate","ifDefined","undefined","Array","from","map","styles","baseStyles","__decorate","prototype","property","type","String","event","Boolean","reflect","attribute","querySlotAll","querySlot","animate","true","AnimationTreeItemExpandName","false","reverseAnimation"],"mappings":"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"}
+{"version":3,"file":"tree-item.element.js","sources":["../../../src/tree-view/tree-item.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { animate, AnimationTreeItemExpandName, baseStyles, createId, event, i18n, I18nService, property, querySlot, querySlotAll, reverseAnimation, } from '@cds/core/internal';\nimport { html, LitElement } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport styles from './tree-item.element.scss';\n/**\n * Tree view is a hierarchical component that gives users access to a hierarchical set of objects displayed in a the parent-child relationship.\n *\n * ```typescript\n * import '@cds/core/tree-view/register.js';\n * ```\n *\n * ```html\n *  <cds-tree>\n *    <cds-tree-item>1</cds-tree-item>\n *    <cds-tree-item>2</cds-tree-item>\n *    <cds-tree-item>3</cds-tree-item>\n *  </cds-tree>\n * ```\n *\n * @element cds-tree-item\n * @slot - Content slot for inside the tree item\n * @slot expand-collapse-icon\n * @event expandedChange - notify when the user has clicked the expand / collapse button\n * @event selectedChange - notify when the user has clicked the tree item\n * @cssprop --animation-duration\n * @cssprop --animation-easing\n * @cssprop --background\n * @cssprop --color\n * @cssprop --focus-width\n * @cssprop --font-size\n * @cssprop --font-weight\n */\nlet CdsTreeItem = class CdsTreeItem extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.i18n = I18nService.keys.treeview;\n        this.cdsMotion = 'on';\n        this.multiSelect = false;\n        this.disabled = false;\n        this.expanded = false;\n        /**\n         * @description\n         *\n         * Expandable is used (see line 124) to automatically show the cds-button-expand element when a tree-item detects that\n         * there are children. However, when doing investigation into why styles were not applied for tree-items controlled\n         * via *ngIf (or any conditional DOM and code that will put tree-item elements there at some unknown point in the\n         * future) it was re-discovered as a public property without a demo for manual usage.\n         */\n        this.expandable = false;\n        this.indeterminate = false;\n        this.loading = false;\n        this.selected = false;\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.tabIndex = -1;\n        this.role = 'treeitem';\n        if (!this.id) {\n            this.id = createId();\n        }\n    }\n    updated(props) {\n        super.updated(props);\n        if (this.treeItemChildren.length > 0) {\n            this.expandable = true;\n        }\n        if (this.expandable) {\n            this.ariaExpanded = this.expanded ? 'true' : 'false';\n        }\n        else {\n            this.ariaExpanded = null;\n        }\n        if (this.multiSelect) {\n            this.ariaSelected = this.selected ? 'true' : 'false';\n        }\n        else {\n            this.ariaSelected = null;\n        }\n        this.ariaDisabled = this.disabled ? 'true' : 'false';\n    }\n    toggleExpanded() {\n        this.expandedChange.emit(!this.expanded);\n    }\n    toggleSelected() {\n        this.selectedChange.emit(!this.selected);\n        if (this.anchorLink) {\n            this.anchorLink.click();\n        }\n    }\n    onSlotChange() {\n        this.treeItemChildren.forEach(i => {\n            if (!i.getAttribute('slot')) {\n                i.setAttribute('slot', createId());\n            }\n        });\n        this.requestUpdate();\n    }\n    render() {\n        return html `\n      <div class=\"private-host\" cds-layout=\"p-l:md\">\n        <div cds-layout=\"horizontal align:vertical-center ${this.multiSelect ? 'gap:xs' : 'gap:xxs'}\">\n          <div class=\"lhs-container\">${this.treeItemLeftHandSideTemplate}</div>\n          <div\n            class=\"item-content\"\n            cds-layout=\"horizontal p:xxs align:vertical-center align:stretch\"\n            @click=\"${() => this.toggleSelected()}\"\n          >\n            <span cds-layout=\"horizontal align:vertical-center gap:sm\" cds-text=\"lhe\">\n              ${this.multiSelect\n            ? html `\n                    <cds-internal-visual-checkbox\n                      part=\"checkbox\"\n                      .disabled=\"${this.disabled}\"\n                      .indeterminate=\"${this.indeterminate}\"\n                      .selected=\"${this.selected}\"\n                    ></cds-internal-visual-checkbox>\n                  `\n            : html ``}\n              <slot @slotchange=${this.onSlotChange}></slot>\n            </span>\n          </div>\n        </div>\n        <div class=\"item-children\" role=${ifDefined(this.expanded ? 'group' : undefined)} ?hidden=\"${!this.expanded}\">\n          ${Array.from(this.treeItemChildren).map((i) => html `<slot name=\"${i.getAttribute('slot')}\"></slot>`)}\n        </div>\n      </div>\n    `;\n    }\n    /**\n     * This container contains one of the following depending on the state of the tree item:\n     *   - caret if the tree item is expandable\n     *   - progress circle if the tree item is loading its children (via an async call, etc)\n     *   - nothing if the tree item is an end node\n     *\n     * The container with a fixed width ensures the same alignment whether or not it contains\n     * a child elemeent to render.\n     */\n    /** @private */\n    get treeItemLeftHandSideTemplate() {\n        if (this.loading) {\n            return html ` <cds-progress-circle size=\"xs\" aria-label=\"${this.i18n.loading}\"></cds-progress-circle> `;\n        }\n        else if (this.expandable) {\n            return html `\n        <div @click=\"${() => this.toggleExpanded()}\">\n          <cds-button-expand\n            .expanded=${this.expanded}\n            readonly\n            action=\"vertical\"\n            part=\"expand-collapse-icon\"\n          ></cds-button-expand>\n        </div>\n      `;\n        }\n        else {\n            return html ``;\n        }\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n};\n__decorate([\n    i18n()\n], CdsTreeItem.prototype, \"i18n\", void 0);\n__decorate([\n    property({ type: String })\n], CdsTreeItem.prototype, \"cdsMotion\", void 0);\n__decorate([\n    event()\n], CdsTreeItem.prototype, \"cdsMotionChange\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true, attribute: 'multi-select' })\n], CdsTreeItem.prototype, \"multiSelect\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsTreeItem.prototype, \"disabled\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsTreeItem.prototype, \"expanded\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsTreeItem.prototype, \"expandable\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsTreeItem.prototype, \"indeterminate\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsTreeItem.prototype, \"loading\", void 0);\n__decorate([\n    property({ type: Boolean, reflect: true })\n], CdsTreeItem.prototype, \"selected\", void 0);\n__decorate([\n    querySlotAll(':scope > cds-tree-item')\n], CdsTreeItem.prototype, \"treeItemChildren\", void 0);\n__decorate([\n    querySlot(':scope > a')\n], CdsTreeItem.prototype, \"anchorLink\", void 0);\n__decorate([\n    event()\n], CdsTreeItem.prototype, \"expandedChange\", void 0);\n__decorate([\n    event()\n], CdsTreeItem.prototype, \"selectedChange\", void 0);\nCdsTreeItem = __decorate([\n    animate({\n        expanded: {\n            true: AnimationTreeItemExpandName,\n            false: reverseAnimation(AnimationTreeItemExpandName),\n        },\n    })\n], CdsTreeItem);\nexport { CdsTreeItem };\n"],"names":["CdsTreeItem","LitElement","constructor","super","this","i18n","I18nService","keys","treeview","cdsMotion","multiSelect","disabled","expanded","expandable","indeterminate","loading","selected","connectedCallback","tabIndex","role","id","createId","updated","props","treeItemChildren","length","ariaExpanded","ariaSelected","ariaDisabled","toggleExpanded","expandedChange","emit","toggleSelected","selectedChange","anchorLink","click","onSlotChange","forEach","i","getAttribute","setAttribute","requestUpdate","render","html","treeItemLeftHandSideTemplate","ifDefined","undefined","Array","from","map","styles","baseStyles","__decorate","prototype","property","type","String","event","Boolean","reflect","attribute","querySlotAll","querySlot","animate","true","AnimationTreeItemExpandName","false","reverseAnimation"],"mappings":"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"}

package/tree-view/tree-item.element.scss.js

@@ -1,2 +1,2 @@
-import{css as o}from"lit";var a=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:var(--cds-alias-object-app-background, var(--cds-global-color-gray-50, #fafafa));--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--focus-width:var(--cds-alias-object-border-width-300, calc(3 / var(--cds-global-base, 20) * 1rem));--font-size:var(--cds-global-typography-font-size-3, calc(13 / var(--cds-global-base, 20) * 1rem));--font-weight:var(--cds-global-typography-body-font-weight, 400);--icon-transform:rotate(90deg);cursor:pointer}.private-host{cursor:inherit}.item-children{overflow:hidden}.item-content{background:var(--background);border-left:var(--focus-width) solid transparent;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight)}.item-content:hover{--background:var(--cds-alias-object-interaction-background-hover, var(--cds-global-color-blue-50, #e6f7ff));--color:var(--cds-alias-object-interaction-color-hover, var(--cds-global-color-construction-1000, #1b2b32))}.lhs-container{width:var(--cds-global-space-7,calc(16 / var(--cds-global-base,20) * 1rem))}.expand-collapse-icon{--color:var(--cds-alias-object-interaction-color, var(--cds-global-color-construction-700, #3a4d55));transform:var(--icon-transform);transition:transform var(--animation-duration)}:host(:focus) .item-content{border-color:var(--cds-alias-object-interaction-background-hover,var(--cds-global-color-blue-50,#e6f7ff));outline-offset:calc(var(--cds-alias-object-interaction-outline-offset,1px)*-2);outline:var(--cds-alias-object-interaction-outline,Highlight solid 2px)}:host(:focus) .item-content:active{--background:var(--cds-alias-object-interaction-background-active, var(--cds-global-color-blue-100, #bdebff));--color:var(--cds-alias-object-interaction-color-active, var(--cds-global-color-construction-1000, #1b2b32))}@media (-webkit-min-device-pixel-ratio:0){:host(:focus) .item-content{outline:var(--cds-alias-object-interaction-outline-webkit,5px auto -webkit-focus-ring-color)}}:host([selected]) .item-content{--background:var(--cds-alias-object-interaction-background-selected, var(--cds-global-color-blue-50, #e6f7ff))}:host([disabled]) .item-content{--background:var(--cds-alias-object-interaction-background-disabled, var(--cds-global-color-white, white))!important;--color:var(--cds-alias-object-interaction-color-disabled, var(--cds-global-color-construction-300, #aeb8bc))!important;border-color:var(--cds-alias-object-interaction-color-disabled,var(--cds-global-color-construction-300,#aeb8bc))!important;cursor:not-allowed}:host([cds-motion=off])>.private-host>.item-children{height:0}:host([cds-motion=off][expanded])>.private-host>.item-children{height:auto}:host([cds-motion][_cds-animation-status=ready]:not([cds-motion=off]))>.private-host>.item-children{height:0}:host([cds-motion][expanded][_cds-animation-status=ready]:not([cds-motion=off]))>.private-host>.item-children{height:auto!important;transform:none}:host([expanded]){--icon-transform:rotate(180deg)}`;export{a as default};
+import{css as o}from"lit";var t=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:var(--cds-alias-object-app-background, var(--cds-global-color-gray-50, #fafafa));--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--focus-width:var(--cds-alias-object-border-width-300, 0.1875rem);--font-size:var(--cds-global-typography-font-size-3, 0.8125rem);--font-weight:var(--cds-global-typography-body-font-weight, 400);cursor:pointer}.private-host{cursor:inherit}.item-children{overflow:hidden}.item-content{background:var(--background);border-left:var(--focus-width) solid transparent;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);min-height:var(--cds-alias-object-interaction-touch-target,2.25rem)}.item-content:hover{--background:var(--cds-alias-object-interaction-background-hover, var(--cds-global-color-blue-50, #e6f7ff));--color:var(--cds-alias-object-interaction-color-hover, var(--cds-global-color-construction-1000, #1b2b32))}.lhs-container{width:var(--cds-global-space-7,1rem)}:host(:focus) .item-content{border-color:var(--cds-alias-object-interaction-background-hover,var(--cds-global-color-blue-50,#e6f7ff));outline-offset:calc(var(--cds-alias-object-interaction-outline-offset,1px)*-2);outline:var(--cds-alias-object-interaction-outline,Highlight solid 2px)}:host(:focus) .item-content:active{--background:var(--cds-alias-object-interaction-background-active, var(--cds-global-color-blue-100, #bdebff));--color:var(--cds-alias-object-interaction-color-active, var(--cds-global-color-construction-1000, #1b2b32))}@media (-webkit-min-device-pixel-ratio:0){:host(:focus) .item-content{outline:var(--cds-alias-object-interaction-outline-webkit,5px auto -webkit-focus-ring-color)}}:host([selected]) .item-content{--background:var(--cds-alias-object-interaction-background-selected, var(--cds-global-color-blue-50, #e6f7ff))}:host([disabled]) .item-content{--background:var(--cds-alias-object-interaction-background-disabled, var(--cds-global-color-white, white))!important;--color:var(--cds-alias-object-interaction-color-disabled, var(--cds-global-color-construction-300, #aeb8bc))!important;border-color:var(--cds-alias-object-interaction-color-disabled,var(--cds-global-color-construction-300,#aeb8bc))!important;cursor:not-allowed}:host([cds-motion=off])>.private-host>.item-children{height:0}:host([cds-motion=off][expanded])>.private-host>.item-children{height:auto}:host([cds-motion][_cds-animation-status=ready]:not([cds-motion=off]))>.private-host>.item-children{height:0}:host([cds-motion][expanded][_cds-animation-status=ready]:not([cds-motion=off]))>.private-host>.item-children{height:auto!important;transform:none}`;export{t as default};
 //# sourceMappingURL=tree-item.element.scss.js.map

package/tree-view/tree.element.d.ts

@@ -15,7 +15,6 @@ import { CdsTreeItem } from './tree-item.element.js';
  *  </cds-tree>
  * ```
  *
- * @beta
  * @element cds-tree
  * @slot - Content slot for inside the tree
  */

package/tree-view/tree.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.element.js","sources":["../../../src/tree-view/tree.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 { arrayHead, arrayTail, baseStyles, isVisible, nextInArray, onAnyKey, onKey, previousInArray, property, querySlot, querySlotAll, syncProps, } from '@cds/core/internal';\nimport { html, LitElement } from 'lit';\nimport { CdsTreeItem } from './tree-item.element.js';\nimport styles from './tree.element.scss';\n/**\n * Tree view is a hierarchical component that gives users access to a hierarchical set of objects displayed in a the parent-child relationship.\n *\n * ```typescript\n * import '@cds/core/tree-view/register.js';\n * ```\n *\n * ```html\n *  <cds-tree>\n *    <cds-tree-item>1</cds-tree-item>\n *    <cds-tree-item>2</cds-tree-item>\n *    <cds-tree-item>3</cds-tree-item>\n *  </cds-tree>\n * ```\n *\n * @beta\n * @element cds-tree\n * @slot - Content slot for inside the tree\n */\nexport class CdsTree extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.multiSelect = false;\n        this.keyboardNavigationHandler = (e) => {\n            const current = this.currentActiveItem;\n            if (current && current instanceof CdsTreeItem) {\n                onAnyKey(['arrow-left', 'arrow-right', 'arrow-up', 'arrow-down', 'home', 'end', 'enter', 'space'], e, () => {\n                    // prevent element container scroll\n                    // MDN references this is really the only way to prevent native browser interactions\n                    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets\n                    e.preventDefault();\n                });\n                onKey('arrow-left', e, () => {\n                    if (current.expandable && current.expanded) {\n                        current.expandedChange.emit(false);\n                    }\n                    else {\n                        const parentNode = current.parentElement;\n                        if (parentNode && parentNode instanceof CdsTreeItem) {\n                            this.setAriaActiveDescendant(parentNode);\n                        }\n                    }\n                });\n                onKey('arrow-right', e, () => {\n                    if (current.expandable) {\n                        if (current.expanded) {\n                            this.setAriaActiveDescendant(nextInArray(current, this.visibleChildren));\n                        }\n                        else {\n                            current.expandedChange.emit(true);\n                        }\n                    }\n                });\n                onKey('arrow-down', e, () => {\n                    if (current) {\n                        this.setAriaActiveDescendant(nextInArray(current, this.visibleChildren));\n                    }\n                });\n                onKey('arrow-up', e, () => {\n                    if (current) {\n                        this.setAriaActiveDescendant(previousInArray(current, this.visibleChildren));\n                    }\n                });\n                onKey('home', e, () => {\n                    if (current) {\n                        this.setAriaActiveDescendant(arrayHead(this.visibleChildren));\n                    }\n                });\n                onKey('end', e, () => {\n                    if (current) {\n                        this.setAriaActiveDescendant(arrayTail(this.visibleChildren));\n                    }\n                });\n                onKey('enter', e, () => {\n                    // activate onclick if link: https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-2/treeview-2a.html\n                    // this means a treeview item should not be expandable AND contain an anchor tag at the same time\n                    if (current.anchorLink) {\n                        current.anchorLink.click();\n                    }\n                    if (current.expandable) {\n                        current.expandedChange.emit(!current.expanded);\n                    }\n                });\n                onKey('space', e, () => {\n                    // activate onclick if link: https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-2/treeview-2a.html\n                    // this means a treeview item should not be expandable AND contain an anchor tag at the same time\n                    if (current.anchorLink) {\n                        current.anchorLink.click();\n                    }\n                    if (current && !current.disabled) {\n                        current.selectedChange.emit(!current.selected);\n                    }\n                });\n            }\n        };\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.tabIndex = 0;\n        this.role = 'tree';\n        this.addEventListener('focus', this.initAriaActiveDescendant);\n        this.addEventListener('click', this.clickHandler);\n        this.addEventListener('keydown', this.keyboardNavigationHandler);\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n    }\n    updated(props) {\n        super.updated(props);\n        this.ariaMultiSelectable = this.multiSelect ? 'true' : 'false';\n        this.childrenItems.forEach(c => syncProps(c, this, { multiSelect: this.multiSelect }));\n    }\n    clickHandler(e) {\n        if (e.target instanceof CdsTreeItem) {\n            const match = this.visibleChildren.find(c => c === e.target);\n            if (match) {\n                this.setAriaActiveDescendant(match);\n            }\n        }\n    }\n    get currentActiveItem() {\n        return this.visibleChildren.find(c => c.id === this.ariaActiveDescendant);\n    }\n    /**\n     * The reason why we wait till onfocus to initialize aria-activedescendant is to\n     * account for lazy loaded children.\n     * */\n    initAriaActiveDescendant() {\n        if (!this.currentActiveItem) {\n            // If none of the nodes are selected before the tree receives focus, focus is set on the first node.\n            // If one or more nodes are selected before the tree receives focus, focus is set on the first selected node.\n            const focusableChild = this.visibleChildren.find(c => c.selected) || this.firstChildItem;\n            if (focusableChild) {\n                this.setAriaActiveDescendant(focusableChild);\n            }\n        }\n    }\n    setAriaActiveDescendant(activeItem) {\n        if (activeItem) {\n            this.ariaActiveDescendant = activeItem.id;\n            activeItem.focus();\n        }\n    }\n    /** @private */\n    get visibleChildren() {\n        return Array.from(this.childrenItems).filter(n => isVisible(n));\n    }\n    render() {\n        return html `<slot></slot>`;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n}\n__decorate([\n    property({ type: Boolean, attribute: 'multi-select' })\n], CdsTree.prototype, \"multiSelect\", void 0);\n__decorate([\n    querySlot('cds-tree-item')\n], CdsTree.prototype, \"firstChildItem\", void 0);\n__decorate([\n    querySlotAll('cds-tree-item')\n], CdsTree.prototype, \"childrenItems\", void 0);\n"],"names":["CdsTree","LitElement","constructor","super","this","multiSelect","keyboardNavigationHandler","e","current","currentActiveItem","CdsTreeItem","onAnyKey","preventDefault","onKey","expandable","expanded","expandedChange","emit","parentNode","parentElement","setAriaActiveDescendant","nextInArray","visibleChildren","previousInArray","arrayHead","arrayTail","anchorLink","click","disabled","selectedChange","selected","connectedCallback","tabIndex","role","addEventListener","initAriaActiveDescendant","clickHandler","disconnectedCallback","updated","props","ariaMultiSelectable","childrenItems","forEach","c","syncProps","target","match","find","id","ariaActiveDescendant","focusableChild","firstChildItem","activeItem","focus","Array","from","filter","n","isVisible","render","html","styles","baseStyles","__decorate","property","type","Boolean","attribute","prototype","querySlot","querySlotAll"],"mappings":"mYA6BO,MAAMA,UAAgBC,EACzBC,cACIC,oBACAC,KAAKC,aAAc,EACnBD,KAAKE,0BAA6BC,IAC9B,MAAMC,EAAUJ,KAAKK,kBACjBD,GAAWA,aAAmBE,IAC9BC,EAAS,CAAC,aAAc,cAAe,WAAY,aAAc,OAAQ,MAAO,QAAS,SAAUJ,GAAG,KAIlGA,EAAEK,oBAENC,EAAM,aAAcN,GAAG,KACnB,GAAIC,EAAQM,YAAcN,EAAQO,SAC9BP,EAAQQ,eAAeC,MAAK,OAE3B,CACD,MAAMC,EAAaV,EAAQW,cACvBD,GAAcA,aAAsBR,GACpCN,KAAKgB,wBAAwBF,OAIzCL,EAAM,cAAeN,GAAG,KAChBC,EAAQM,aACJN,EAAQO,SACRX,KAAKgB,wBAAwBC,EAAYb,EAASJ,KAAKkB,kBAGvDd,EAAQQ,eAAeC,MAAK,OAIxCJ,EAAM,aAAcN,GAAG,KACfC,GACAJ,KAAKgB,wBAAwBC,EAAYb,EAASJ,KAAKkB,qBAG/DT,EAAM,WAAYN,GAAG,KACbC,GACAJ,KAAKgB,wBAAwBG,EAAgBf,EAASJ,KAAKkB,qBAGnET,EAAM,OAAQN,GAAG,KACTC,GACAJ,KAAKgB,wBAAwBI,EAAUpB,KAAKkB,qBAGpDT,EAAM,MAAON,GAAG,KACRC,GACAJ,KAAKgB,wBAAwBK,EAAUrB,KAAKkB,qBAGpDT,EAAM,QAASN,GAAG,KAGVC,EAAQkB,YACRlB,EAAQkB,WAAWC,QAEnBnB,EAAQM,YACRN,EAAQQ,eAAeC,MAAMT,EAAQO,aAG7CF,EAAM,QAASN,GAAG,KAGVC,EAAQkB,YACRlB,EAAQkB,WAAWC,QAEnBnB,IAAYA,EAAQoB,UACpBpB,EAAQqB,eAAeZ,MAAMT,EAAQsB,eAMzDC,oBACI5B,MAAM4B,oBACN3B,KAAK4B,SAAW,EAChB5B,KAAK6B,KAAO,OACZ7B,KAAK8B,iBAAiB,QAAS9B,KAAK+B,0BACpC/B,KAAK8B,iBAAiB,QAAS9B,KAAKgC,cACpChC,KAAK8B,iBAAiB,UAAW9B,KAAKE,2BAE1C+B,uBACIlC,MAAMkC,uBAEVC,QAAQC,GACJpC,MAAMmC,QAAQC,GACdnC,KAAKoC,oBAAsBpC,KAAKC,YAAc,OAAS,QACvDD,KAAKqC,cAAcC,SAAQC,GAAKC,EAAUD,EAAGvC,KAAM,CAAEC,YAAaD,KAAKC,gBAE3E+B,aAAa7B,GACT,GAAIA,EAAEsC,kBAAkBnC,EAAa,CACjC,MAAMoC,EAAQ1C,KAAKkB,gBAAgByB,MAAKJ,GAAKA,IAAMpC,EAAEsC,SACjDC,GACA1C,KAAKgB,wBAAwB0B,IAIrCrC,wBACA,OAAOL,KAAKkB,gBAAgByB,MAAKJ,GAAKA,EAAEK,KAAO5C,KAAK6C,uBAMxDd,2BACI,IAAK/B,KAAKK,kBAAmB,CAGzB,MAAMyC,EAAiB9C,KAAKkB,gBAAgByB,MAAKJ,GAAKA,EAAEb,YAAa1B,KAAK+C,eACtED,GACA9C,KAAKgB,wBAAwB8B,IAIzC9B,wBAAwBgC,GAChBA,IACAhD,KAAK6C,qBAAuBG,EAAWJ,GACvCI,EAAWC,SAIf/B,sBACA,OAAOgC,MAAMC,KAAKnD,KAAKqC,eAAee,QAAOC,GAAKC,EAAUD,KAEhEE,SACI,OAAOC,CAAK,gBAELC,oBACP,MAAO,CAACC,EAAYD,IAG5BE,EAAW,CACPC,EAAS,CAAEC,KAAMC,QAASC,UAAW,kBACtCnE,EAAQoE,UAAW,mBAAe,GACrCL,EAAW,CACPM,EAAU,kBACXrE,EAAQoE,UAAW,sBAAkB,GACxCL,EAAW,CACPO,EAAa,kBACdtE,EAAQoE,UAAW,qBAAiB"}
+{"version":3,"file":"tree.element.js","sources":["../../../src/tree-view/tree.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 { arrayHead, arrayTail, baseStyles, isVisible, nextInArray, onAnyKey, onKey, previousInArray, property, querySlot, querySlotAll, syncProps, } from '@cds/core/internal';\nimport { html, LitElement } from 'lit';\nimport { CdsTreeItem } from './tree-item.element.js';\nimport styles from './tree.element.scss';\n/**\n * Tree view is a hierarchical component that gives users access to a hierarchical set of objects displayed in a the parent-child relationship.\n *\n * ```typescript\n * import '@cds/core/tree-view/register.js';\n * ```\n *\n * ```html\n *  <cds-tree>\n *    <cds-tree-item>1</cds-tree-item>\n *    <cds-tree-item>2</cds-tree-item>\n *    <cds-tree-item>3</cds-tree-item>\n *  </cds-tree>\n * ```\n *\n * @element cds-tree\n * @slot - Content slot for inside the tree\n */\nexport class CdsTree extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.multiSelect = false;\n        this.keyboardNavigationHandler = (e) => {\n            const current = this.currentActiveItem;\n            if (current && current instanceof CdsTreeItem) {\n                onAnyKey(['arrow-left', 'arrow-right', 'arrow-up', 'arrow-down', 'home', 'end', 'enter', 'space'], e, () => {\n                    // prevent element container scroll\n                    // MDN references this is really the only way to prevent native browser interactions\n                    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets\n                    e.preventDefault();\n                });\n                onKey('arrow-left', e, () => {\n                    if (current.expandable && current.expanded) {\n                        current.expandedChange.emit(false);\n                    }\n                    else {\n                        const parentNode = current.parentElement;\n                        if (parentNode && parentNode instanceof CdsTreeItem) {\n                            this.setAriaActiveDescendant(parentNode);\n                        }\n                    }\n                });\n                onKey('arrow-right', e, () => {\n                    if (current.expandable) {\n                        if (current.expanded) {\n                            this.setAriaActiveDescendant(nextInArray(current, this.visibleChildren));\n                        }\n                        else {\n                            current.expandedChange.emit(true);\n                        }\n                    }\n                });\n                onKey('arrow-down', e, () => {\n                    if (current) {\n                        this.setAriaActiveDescendant(nextInArray(current, this.visibleChildren));\n                    }\n                });\n                onKey('arrow-up', e, () => {\n                    if (current) {\n                        this.setAriaActiveDescendant(previousInArray(current, this.visibleChildren));\n                    }\n                });\n                onKey('home', e, () => {\n                    if (current) {\n                        this.setAriaActiveDescendant(arrayHead(this.visibleChildren));\n                    }\n                });\n                onKey('end', e, () => {\n                    if (current) {\n                        this.setAriaActiveDescendant(arrayTail(this.visibleChildren));\n                    }\n                });\n                onKey('enter', e, () => {\n                    // activate onclick if link: https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-2/treeview-2a.html\n                    // this means a treeview item should not be expandable AND contain an anchor tag at the same time\n                    if (current.anchorLink) {\n                        current.anchorLink.click();\n                    }\n                    if (current.expandable) {\n                        current.expandedChange.emit(!current.expanded);\n                    }\n                });\n                onKey('space', e, () => {\n                    // activate onclick if link: https://www.w3.org/TR/wai-aria-practices/examples/treeview/treeview-2/treeview-2a.html\n                    // this means a treeview item should not be expandable AND contain an anchor tag at the same time\n                    if (current.anchorLink) {\n                        current.anchorLink.click();\n                    }\n                    if (current && !current.disabled) {\n                        current.selectedChange.emit(!current.selected);\n                    }\n                });\n            }\n        };\n    }\n    connectedCallback() {\n        super.connectedCallback();\n        this.tabIndex = 0;\n        this.role = 'tree';\n        this.addEventListener('focus', this.initAriaActiveDescendant);\n        this.addEventListener('click', this.clickHandler);\n        this.addEventListener('keydown', this.keyboardNavigationHandler);\n    }\n    disconnectedCallback() {\n        super.disconnectedCallback();\n    }\n    updated(props) {\n        super.updated(props);\n        this.ariaMultiSelectable = this.multiSelect ? 'true' : 'false';\n        this.childrenItems.forEach(c => syncProps(c, this, { multiSelect: this.multiSelect }));\n    }\n    clickHandler(e) {\n        if (e.target instanceof CdsTreeItem) {\n            const match = this.visibleChildren.find(c => c === e.target);\n            if (match) {\n                this.setAriaActiveDescendant(match);\n            }\n        }\n    }\n    get currentActiveItem() {\n        return this.visibleChildren.find(c => c.id === this.ariaActiveDescendant);\n    }\n    /**\n     * The reason why we wait till onfocus to initialize aria-activedescendant is to\n     * account for lazy loaded children.\n     * */\n    initAriaActiveDescendant() {\n        if (!this.currentActiveItem) {\n            // If none of the nodes are selected before the tree receives focus, focus is set on the first node.\n            // If one or more nodes are selected before the tree receives focus, focus is set on the first selected node.\n            const focusableChild = this.visibleChildren.find(c => c.selected) || this.firstChildItem;\n            if (focusableChild) {\n                this.setAriaActiveDescendant(focusableChild);\n            }\n        }\n    }\n    setAriaActiveDescendant(activeItem) {\n        if (activeItem) {\n            this.ariaActiveDescendant = activeItem.id;\n            activeItem.focus();\n        }\n    }\n    /** @private */\n    get visibleChildren() {\n        return Array.from(this.childrenItems).filter(n => isVisible(n));\n    }\n    render() {\n        return html `<slot></slot>`;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n}\n__decorate([\n    property({ type: Boolean, attribute: 'multi-select' })\n], CdsTree.prototype, \"multiSelect\", void 0);\n__decorate([\n    querySlot('cds-tree-item')\n], CdsTree.prototype, \"firstChildItem\", void 0);\n__decorate([\n    querySlotAll('cds-tree-item')\n], CdsTree.prototype, \"childrenItems\", void 0);\n"],"names":["CdsTree","LitElement","constructor","super","this","multiSelect","keyboardNavigationHandler","e","current","currentActiveItem","CdsTreeItem","onAnyKey","preventDefault","onKey","expandable","expanded","expandedChange","emit","parentNode","parentElement","setAriaActiveDescendant","nextInArray","visibleChildren","previousInArray","arrayHead","arrayTail","anchorLink","click","disabled","selectedChange","selected","connectedCallback","tabIndex","role","addEventListener","initAriaActiveDescendant","clickHandler","disconnectedCallback","updated","props","ariaMultiSelectable","childrenItems","forEach","c","syncProps","target","match","find","id","ariaActiveDescendant","focusableChild","firstChildItem","activeItem","focus","Array","from","filter","n","isVisible","render","html","styles","baseStyles","__decorate","property","type","Boolean","attribute","prototype","querySlot","querySlotAll"],"mappings":"mYA4BO,MAAMA,UAAgBC,EACzBC,cACIC,oBACAC,KAAKC,aAAc,EACnBD,KAAKE,0BAA6BC,IAC9B,MAAMC,EAAUJ,KAAKK,kBACjBD,GAAWA,aAAmBE,IAC9BC,EAAS,CAAC,aAAc,cAAe,WAAY,aAAc,OAAQ,MAAO,QAAS,SAAUJ,GAAG,KAIlGA,EAAEK,oBAENC,EAAM,aAAcN,GAAG,KACnB,GAAIC,EAAQM,YAAcN,EAAQO,SAC9BP,EAAQQ,eAAeC,MAAK,OAE3B,CACD,MAAMC,EAAaV,EAAQW,cACvBD,GAAcA,aAAsBR,GACpCN,KAAKgB,wBAAwBF,OAIzCL,EAAM,cAAeN,GAAG,KAChBC,EAAQM,aACJN,EAAQO,SACRX,KAAKgB,wBAAwBC,EAAYb,EAASJ,KAAKkB,kBAGvDd,EAAQQ,eAAeC,MAAK,OAIxCJ,EAAM,aAAcN,GAAG,KACfC,GACAJ,KAAKgB,wBAAwBC,EAAYb,EAASJ,KAAKkB,qBAG/DT,EAAM,WAAYN,GAAG,KACbC,GACAJ,KAAKgB,wBAAwBG,EAAgBf,EAASJ,KAAKkB,qBAGnET,EAAM,OAAQN,GAAG,KACTC,GACAJ,KAAKgB,wBAAwBI,EAAUpB,KAAKkB,qBAGpDT,EAAM,MAAON,GAAG,KACRC,GACAJ,KAAKgB,wBAAwBK,EAAUrB,KAAKkB,qBAGpDT,EAAM,QAASN,GAAG,KAGVC,EAAQkB,YACRlB,EAAQkB,WAAWC,QAEnBnB,EAAQM,YACRN,EAAQQ,eAAeC,MAAMT,EAAQO,aAG7CF,EAAM,QAASN,GAAG,KAGVC,EAAQkB,YACRlB,EAAQkB,WAAWC,QAEnBnB,IAAYA,EAAQoB,UACpBpB,EAAQqB,eAAeZ,MAAMT,EAAQsB,eAMzDC,oBACI5B,MAAM4B,oBACN3B,KAAK4B,SAAW,EAChB5B,KAAK6B,KAAO,OACZ7B,KAAK8B,iBAAiB,QAAS9B,KAAK+B,0BACpC/B,KAAK8B,iBAAiB,QAAS9B,KAAKgC,cACpChC,KAAK8B,iBAAiB,UAAW9B,KAAKE,2BAE1C+B,uBACIlC,MAAMkC,uBAEVC,QAAQC,GACJpC,MAAMmC,QAAQC,GACdnC,KAAKoC,oBAAsBpC,KAAKC,YAAc,OAAS,QACvDD,KAAKqC,cAAcC,SAAQC,GAAKC,EAAUD,EAAGvC,KAAM,CAAEC,YAAaD,KAAKC,gBAE3E+B,aAAa7B,GACT,GAAIA,EAAEsC,kBAAkBnC,EAAa,CACjC,MAAMoC,EAAQ1C,KAAKkB,gBAAgByB,MAAKJ,GAAKA,IAAMpC,EAAEsC,SACjDC,GACA1C,KAAKgB,wBAAwB0B,IAIrCrC,wBACA,OAAOL,KAAKkB,gBAAgByB,MAAKJ,GAAKA,EAAEK,KAAO5C,KAAK6C,uBAMxDd,2BACI,IAAK/B,KAAKK,kBAAmB,CAGzB,MAAMyC,EAAiB9C,KAAKkB,gBAAgByB,MAAKJ,GAAKA,EAAEb,YAAa1B,KAAK+C,eACtED,GACA9C,KAAKgB,wBAAwB8B,IAIzC9B,wBAAwBgC,GAChBA,IACAhD,KAAK6C,qBAAuBG,EAAWJ,GACvCI,EAAWC,SAIf/B,sBACA,OAAOgC,MAAMC,KAAKnD,KAAKqC,eAAee,QAAOC,GAAKC,EAAUD,KAEhEE,SACI,OAAOC,CAAK,gBAELC,oBACP,MAAO,CAACC,EAAYD,IAG5BE,EAAW,CACPC,EAAS,CAAEC,KAAMC,QAASC,UAAW,kBACtCnE,EAAQoE,UAAW,mBAAe,GACrCL,EAAW,CACPM,EAAU,kBACXrE,EAAQoE,UAAW,sBAAkB,GACxCL,EAAW,CACPO,EAAa,kBACdtE,EAAQoE,UAAW,qBAAiB"}

package/button/icon-button.element.scss.js

@@ -1,2 +0,0 @@
-import{css as a}from"lit";var r=a`:host{--padding:calc(var(--cds-global-space-6, calc(12 / var(--cds-global-base, 20) * 1rem)) - var(--border-width)) calc(var(--cds-global-space-6, calc(12 / var(--cds-global-base, 20) * 1rem)) - var(--cds-global-space-2, calc(2 / var(--cds-global-base, 20) * 1rem)) - var(--border-width))}.private-host{min-width:0}`;export{r as default};
-//# sourceMappingURL=icon-button.element.scss.js.map

package/button/icon-button.element.scss.js.map

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

package/button/inline-button.element.js

@@ -1,2 +0,0 @@
-import{CdsBaseButton as t,addClassnames as e,baseStyles as s}from"@cds/core/internal";import{html as n}from"lit";import o from"./inline-button.element.scss.js";class r extends t{connectedCallback(){super.connectedCallback(),this.icon&&e(this.icon,"anchored-icon")}render(){return n`<span class="private-host"><slot></slot></span>`}static get styles(){return[s,o]}}export{r as CdsInlineButton};
-//# sourceMappingURL=inline-button.element.js.map

package/button/inline-button.element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inline-button.element.js","sources":["../../../src/button/inline-button.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 { addClassnames, baseStyles, CdsBaseButton } from '@cds/core/internal';\nimport { html } from 'lit';\nimport styles from './inline-button.element.scss';\n/**\n * Inline buttons are used inside and alongside textual content within Clarity components.\n * They give action buttons a less prominent, yet familiar, visual presence.\n *\n * ```typescript\n * import '@cds/core/button/register.js';\n * ```\n *\n * ```html\n * <cds-inline-button>Button text goes here</cds-inline-button>\n * ```\n *\n * @element cds-inline-button\n * @slot - Content slot for inside the button\n * @cssprop --text-decoration\n * @cssprop --color\n * @cssprop --font-size\n * @cssprop --line-height\n * @cssprop --letter-spacing\n */\nexport class CdsInlineButton extends CdsBaseButton {\n    connectedCallback() {\n        super.connectedCallback();\n        // we need a class on the icon because that's how the icon element knows to style itself\n        // we can't style it from the icon-button anymore because it's a nested+slotted element\n        if (this.icon) {\n            addClassnames(this.icon, 'anchored-icon');\n        }\n    }\n    render() {\n        return html `<span class=\"private-host\"><slot></slot></span>`;\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n}\n"],"names":["CdsInlineButton","CdsBaseButton","connectedCallback","super","this","icon","addClassnames","render","html","styles","baseStyles"],"mappings":"gKA4BO,MAAMA,UAAwBC,EACjCC,oBACIC,MAAMD,oBAGFE,KAAKC,MACLC,EAAcF,KAAKC,KAAM,iBAGjCE,SACI,OAAOC,CAAK,kDAELC,oBACP,MAAO,CAACC,EAAYD"}

package/button/inline-button.element.scss.js.map

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

package/forms/control-action/control-action.element.scss.js

@@ -1,2 +0,0 @@
-import{css as a}from"lit";var c=a`:host{pointer-events:none;display:inline-block}:host([role=button]){cursor:pointer;min-width:var(--cds-global-space-9,calc(24 / var(--cds-global-base,20) * 1rem));pointer-events:initial}.private-host{color:var(--cds-global-typography-color-300,var(--cds-global-color-construction-800,#2d4048));font-size:var(--cds-global-typography-font-size-3,calc(13 / var(--cds-global-base,20) * 1rem));display:flex;justify-content:center;align-items:center;line-height:calc(var(--cds-global-space-9,calc(24 / var(--cds-global-base,20) * 1rem)) - var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)))}::slotted(cds-icon){width:calc(var(--cds-global-space-9,calc(24 / var(--cds-global-base,20) * 1rem)) - var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)));height:calc(var(--cds-global-space-9,calc(24 / var(--cds-global-base,20) * 1rem)) - var(--cds-global-space-2,calc(2 / var(--cds-global-base,20) * 1rem)));margin-bottom:var(--cds-global-space-1,calc(1 / var(--cds-global-base,20) * 1rem));pointer-events:none}::slotted(cds-icon[shape=angle]){height:var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem));width:var(--cds-global-space-8,calc(18 / var(--cds-global-base,20) * 1rem));margin-right:var(--cds-global-space-3,calc(4 / var(--cds-global-base,20) * 1rem))}:host(:hover) ::slotted(cds-icon){--color:var(--cds-alias-object-interaction-color-active, var(--cds-global-color-construction-1000, #1b2b32))}:host([_disabled]) ::slotted(cds-icon){--color:var(--cds-alias-object-interaction-color-disabled, var(--cds-global-color-construction-300, #aeb8bc))}`;export{c as default};
-//# sourceMappingURL=control-action.element.scss.js.map

package/forms/control-action/control-action.element.scss.js.map

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

package/forms/utils/index.js

@@ -1,2 +0,0 @@
-import{html as t}from"lit";import{createId as n,pxToRem as i}from"@cds/core/internal";const e=["vertical","vertical-inline","horizontal","horizontal-inline","compact"],o="horizontal",r="stretch";function l(t,n){t&&n&&(a(t),n.setAttribute("for",t.id))}function c(t,n){n&&(a(t),n.id=t.id+"-datalist",t.setAttribute("list",n.id))}function a(t){t.id.length||(t.id=n())}const u={"horizontal-inline":"horizontal","vertical-inline":"vertical",horizontal:"horizontal",vertical:"vertical",compact:"compact"};function s(n){return t`${"neutral"!==n?t`<cds-control-action readonly="readonly" class="status" cds-layout="align:shrink"><cds-icon status="${"error"===n?"danger":"success"}" shape="${"error"===n?"exclamation-circle":"check-circle"}" size="16" inner-offset="${4}"></cds-icon></cds-control-action>`:""}`}async function d(t){return Promise.all(t.map((t=>t.updateComplete))).then((()=>{const n=t.filter((t=>{var n;return"primary"===(null===(n=t.controlLabel)||void 0===n?void 0:n.action)}));return i(Math.max(...n.map((t=>t.controlLabel.getBoundingClientRect().width))))}))}function h(t,n,i){return"vertical"!==i&&"vertical-inline"!==i&&t.getBoundingClientRect().top>(null==n?void 0:n.getBoundingClientRect().top)+12}function p(t,n){const i=t[0],e=t[t.length-1];return("vertical-inline"===n||"horizontal-inline"===n)&&e.getBoundingClientRect().top>i.getBoundingClientRect().top}function f(t){return"vertical"===t||"vertical-inline"===t}async function v(t){const n=t.find((t=>"neutral"!==t.status));return await(null==n?void 0:n.updateComplete),n&&!n.hidden?n.status:"neutral"}export{a as assignInputId,l as associateInputAndLabel,c as associateInputToDatalist,h as controlIsWrapped,r as defaultControlWidth,o as defaultFormLayout,e as formLayouts,v as getCurrentMessageStatus,d as getLargestPrimaryLabelWidth,s as getStatusIcon,p as inlineControlListIsWrapped,f as isVerticalLayout,u as layoutGroupToControlMapper};
-//# sourceMappingURL=index.js.map

package/forms/utils/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../src/forms/utils/index.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 { html } from 'lit';\nimport { createId, pxToRem } from '@cds/core/internal';\nexport const formLayouts = ['vertical', 'vertical-inline', 'horizontal', 'horizontal-inline', 'compact'];\nexport const defaultFormLayout = 'horizontal';\nexport const defaultControlWidth = 'stretch';\nexport function associateInputAndLabel(input, label) {\n    if (input && label) {\n        assignInputId(input);\n        label.setAttribute('for', input.id);\n    }\n}\nexport function associateInputToDatalist(input, datalist) {\n    if (datalist) {\n        assignInputId(input);\n        datalist.id = `${input.id}-datalist`;\n        input.setAttribute('list', datalist.id);\n    }\n}\nexport function assignInputId(input) {\n    if (!input.id.length) {\n        input.id = createId();\n    }\n}\nexport const layoutGroupToControlMapper = {\n    'horizontal-inline': 'horizontal',\n    'vertical-inline': 'vertical',\n    horizontal: 'horizontal',\n    vertical: 'vertical',\n    compact: 'compact',\n};\nexport function getStatusIcon(status) {\n    return html `${status !== 'neutral'\n        ? html ` <cds-control-action readonly class=\"status\" cds-layout=\"align:shrink\">\n        <cds-icon\n          status=\"${status === 'error' ? 'danger' : 'success'}\"\n          shape=\"${status === 'error' ? 'exclamation-circle' : 'check-circle'}\"\n          size=\"16\"\n          inner-offset=${4}\n        ></cds-icon>\n      </cds-control-action>`\n        : ''} `;\n}\nexport async function getLargestPrimaryLabelWidth(controls) {\n    return Promise.all(controls.map(c => c.updateComplete)).then(() => {\n        const primaryLabels = controls.filter(c => { var _a; return ((_a = c.controlLabel) === null || _a === void 0 ? void 0 : _a.action) === 'primary'; });\n        return pxToRem(Math.max(...primaryLabels.map(c => c.controlLabel.getBoundingClientRect().width)));\n    });\n}\nexport function controlIsWrapped(input, label, layout) {\n    return (layout !== 'vertical' &&\n        layout !== 'vertical-inline' &&\n        input.getBoundingClientRect().top > (label === null || label === void 0 ? void 0 : label.getBoundingClientRect().top) + 12 // 12px buffer for rounding and inputs that are thin like the range input\n    );\n}\nexport function inlineControlListIsWrapped(inlineControls, layout) {\n    const first = inlineControls[0];\n    const last = inlineControls[inlineControls.length - 1];\n    const isInlineLayout = layout === 'vertical-inline' || layout === 'horizontal-inline';\n    return isInlineLayout && last.getBoundingClientRect().top > first.getBoundingClientRect().top;\n}\nexport function isVerticalLayout(layout) {\n    return layout === 'vertical' || layout === 'vertical-inline';\n}\n/**\n * Returns updated message status unless hidden then returns 'neutral'\n */\nexport async function getCurrentMessageStatus(messages) {\n    const message = messages.find(m => m.status !== 'neutral');\n    await (message === null || message === void 0 ? void 0 : message.updateComplete);\n    return message && !message.hidden ? message.status : 'neutral';\n}\n"],"names":["formLayouts","defaultFormLayout","defaultControlWidth","associateInputAndLabel","input","label","assignInputId","setAttribute","id","associateInputToDatalist","datalist","length","createId","layoutGroupToControlMapper","horizontal","vertical","compact","getStatusIcon","status","html","async","getLargestPrimaryLabelWidth","controls","Promise","all","map","c","updateComplete","then","primaryLabels","filter","_a","controlLabel","action","pxToRem","Math","max","getBoundingClientRect","width","controlIsWrapped","layout","top","inlineControlListIsWrapped","inlineControls","first","last","isVerticalLayout","getCurrentMessageStatus","messages","message","find","m","hidden"],"mappings":"sFAOY,MAACA,EAAc,CAAC,WAAY,kBAAmB,aAAc,oBAAqB,WACjFC,EAAoB,aACpBC,EAAsB,UAC5B,SAASC,EAAuBC,EAAOC,GACtCD,GAASC,IACTC,EAAcF,GACdC,EAAME,aAAa,MAAOH,EAAMI,KAGjC,SAASC,EAAyBL,EAAOM,GACxCA,IACAJ,EAAcF,GACdM,EAASF,GAAQJ,EAAMI,GAAT,YACdJ,EAAMG,aAAa,OAAQG,EAASF,KAGrC,SAASF,EAAcF,GACrBA,EAAMI,GAAGG,SACVP,EAAMI,GAAKI,KAGP,MAACC,EAA6B,CACtC,oBAAqB,aACrB,kBAAmB,WACnBC,WAAY,aACZC,SAAU,WACVC,QAAS,WAEN,SAASC,EAAcC,GAC1B,OAAOC,CAAK,GAAc,YAAXD,EACTC,CAAK,sGAEgB,UAAXD,EAAqB,SAAW,qBACtB,UAAXA,EAAqB,qBAAuB,2CAEtC,sCAGf,KAEHE,eAAeC,EAA4BC,GAC9C,OAAOC,QAAQC,IAAIF,EAASG,KAAIC,GAAKA,EAAEC,kBAAiBC,MAAK,KACzD,MAAMC,EAAgBP,EAASQ,QAAOJ,IAAO,IAAIK,EAAI,MAAkF,aAAhD,QAAzBA,EAAKL,EAAEM,oBAAiC,IAAPD,OAAgB,EAASA,EAAGE,WAC3H,OAAOC,EAAQC,KAAKC,OAAOP,EAAcJ,KAAIC,GAAKA,EAAEM,aAAaK,wBAAwBC,aAG1F,SAASC,EAAiBnC,EAAOC,EAAOmC,GAC3C,MAAmB,aAAXA,GACO,oBAAXA,GACApC,EAAMiC,wBAAwBI,KAAOpC,MAAAA,OAAqC,EAASA,EAAMgC,wBAAwBI,KAAO,GAGzH,SAASC,EAA2BC,EAAgBH,GACvD,MAAMI,EAAQD,EAAe,GACvBE,EAAOF,EAAeA,EAAehC,OAAS,GAEpD,OADkC,oBAAX6B,GAA2C,sBAAXA,IAC9BK,EAAKR,wBAAwBI,IAAMG,EAAMP,wBAAwBI,IAEvF,SAASK,EAAiBN,GAC7B,MAAkB,aAAXA,GAAoC,oBAAXA,EAK7BpB,eAAe2B,EAAwBC,GAC1C,MAAMC,EAAUD,EAASE,MAAKC,GAAkB,YAAbA,EAAEjC,SAErC,aADO+B,MAAAA,OAAyC,EAASA,EAAQtB,gBAC1DsB,IAAYA,EAAQG,OAASH,EAAQ/B,OAAS"}

package/internal/base/css-gap.base.d.ts

@@ -1,18 +0,0 @@
-/**
- * @internal
- * This base class allows us to conditionally apply the css shim needed
- * for Safari to use CSS Gap API. CSS Gap is used within our layout utilities.
- *
- * The shim is loaded in the `base.element.scss` and conditionally applied
- * when the `_nfg` (no flex gap) attribute is on the component. Unfortunately
- * there is no way to detect flex gap support with only CSS and JS is required.
- *
- * The Class is applied during the registration step of the custom element.
- * This shim CSS is also applied at the global level for applications in
- * the `module.shims.css` file.
- *
- * Once Safari ships Flex Gap support this can be removed. Currently Safari
- * supports Flex Gap in the Safari Technical Preview so it should be available
- * in the next major release.
- */
-export declare function applyCSSGapShim(elementClass: any): any;

package/internal/base/css-gap.base.js

@@ -1,2 +0,0 @@
-import{browserFeatures as t}from"../utils/supports.js";function e(e){return t.supports.flexGap?e:class extends e{connectedCallback(){super.connectedCallback(),this.setAttribute("_nfg","")}}}export{e as applyCSSGapShim};
-//# sourceMappingURL=css-gap.base.js.map

package/internal/base/css-gap.base.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"css-gap.base.js","sources":["../../../../src/internal/base/css-gap.base.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 { browserFeatures } from '../utils/supports.js';\n/**\n * @internal\n * This base class allows us to conditionally apply the css shim needed\n * for Safari to use CSS Gap API. CSS Gap is used within our layout utilities.\n *\n * The shim is loaded in the `base.element.scss` and conditionally applied\n * when the `_nfg` (no flex gap) attribute is on the component. Unfortunately\n * there is no way to detect flex gap support with only CSS and JS is required.\n *\n * The Class is applied during the registration step of the custom element.\n * This shim CSS is also applied at the global level for applications in\n * the `module.shims.css` file.\n *\n * Once Safari ships Flex Gap support this can be removed. Currently Safari\n * supports Flex Gap in the Safari Technical Preview so it should be available\n * in the next major release.\n */\nexport function applyCSSGapShim(elementClass) {\n    class GapShim extends elementClass {\n        connectedCallback() {\n            super.connectedCallback();\n            this.setAttribute('_nfg', '');\n        }\n    }\n    return browserFeatures.supports.flexGap ? elementClass : GapShim;\n}\n"],"names":["applyCSSGapShim","elementClass","browserFeatures","supports","flexGap","connectedCallback","super","this","setAttribute"],"mappings":"uDAuBO,SAASA,EAAgBC,GAO5B,OAAOC,EAAgBC,SAASC,QAAUH,EAN1C,cAAsBA,EAClBI,oBACIC,MAAMD,oBACNE,KAAKC,aAAa,OAAQ"}

package/internal/interfaces/index.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=index.js.map