igniteui-webcomponents 4.0.0-alpha → 4.0.0-alpha.3

package/components/tree/themes/light/tree-item.base.css.js

@@ -1,5 +1,12 @@
 import { css } from 'lit';
 export const styles = css `:host {
+  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
+  --is-medium:
+      min(
+          clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
+          clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
+      );
+  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
   position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -25,7 +32,10 @@ export const styles = css `:host {
   display: none !important;
 }
 
+/* stylelint-disable max-line-length */
 :host {
+  --size: max(var(--is-large, 1) * 3.125rem, var(--is-medium, 1) * 2.5rem, var(--is-small, 1) * 2rem);
+  --igc-tree-indentation-size: 24px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -34,7 +44,6 @@ export const styles = css `:host {
       -ms-flex-direction: column;
           flex-direction: column;
   font-family: inherit;
-  --igc-tree-indentation-size: 24px;
 }
 
 :host(:focus-within) {
@@ -56,6 +65,8 @@ export const styles = css `:host {
   position: relative;
   background: hsla(var(--ig-surface-500), var(--ig-surface-a));
   color: var(--ig-surface-500-contrast);
+  height: var(--size);
+  padding: 0 max(var(--is-large, 1) * 24px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 12px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));
 }
 [part~=wrapper]::after {
   content: "";
@@ -157,36 +168,15 @@ export const styles = css `:host {
   display: none;
 }
 
-[part~=large] {
-  height: 3.125rem;
-}
 [part~=large] igc-circular-progress {
   --diameter: 1.5rem;
 }
 
-[part~=medium] {
-  height: 2.5rem;
-}
 [part~=medium] igc-circular-progress {
   --diameter: 1.25rem;
 }
 
-[part~=small] {
-  height: 2rem;
-}
 [part~=small] igc-circular-progress {
   --diameter: 1.125rem;
-}
-
-[part~=wrapper][part~=large] {
-  padding: 0 1.5rem;
-}
-
-[part~=wrapper][part~=medium] {
-  padding: 0 1rem;
-}
-
-[part~=wrapper][part~=small] {
-  padding: 0 0.75rem;
 }`;
 //# sourceMappingURL=tree-item.base.css.js.map

package/components/tree/themes/light/tree-item.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-item.base.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/tree-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6LvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--scrolbar-size, 0.875rem);\n  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--scrolbar-size, 0.875rem);\n  height: var(--scrolbar-size, 0.875rem);\n  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[hidden] {\n  display: none !important;\n}\n\n:host {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  font-family: inherit;\n  --igc-tree-indentation-size: 24px;\n}\n\n:host(:focus-within) {\n  outline: none;\n}\n\n:host([disabled]) {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n}\n\n[part~=wrapper] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  position: relative;\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  color: var(--ig-surface-500-contrast);\n}\n[part~=wrapper]::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 0;\n  background: transparent;\n}\n[part~=wrapper]:hover::after {\n  background: var(--hover-color, hsla(var(--ig-gray-900), 0.1));\n}\n\n[part~=active] {\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n  color: var(--ig-gray-200-contrast);\n}\n\n[part~=selected] {\n  background: hsla(var(--ig-secondary-200), var(--ig-secondary-a));\n  color: var(--ig-secondary-200-contrast);\n}\n\n[part~=selected][part~=focused][part~=active],\n[part~=selected][part~=focused],\n[part~=selected][part~=active] {\n  background: hsla(var(--ig-secondary-300), var(--ig-secondary-a));\n  color: var(--ig-secondary-300-contrast);\n}\n\n[part~=focused] {\n  -webkit-box-shadow: inset 0 0 0 1px hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n          box-shadow: inset 0 0 0 1px hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n\n[part~=indicator] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  z-index: 1;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  -webkit-margin-end: 0.25rem;\n          margin-inline-end: 0.25rem;\n  min-width: 1.5rem;\n}\n[part~=indicator] igc-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: 1.5rem;\n}\n\n[part~=label] {\n  display: block;\n  font-family: var(--ig-body-2-font-family);\n  font-size: var(--ig-body-2-font-size);\n  font-weight: var(--ig-body-2-font-weight);\n  font-style: var(--ig-body-2-font-style);\n  line-height: var(--ig-body-2-line-height);\n  letter-spacing: var(--ig-body-2-letter-spacing);\n  text-transform: var(--ig-body-2-text-transform);\n  margin-top: var(--ig-body-2-margin-top);\n  margin-bottom: var(--ig-body-2-margin-bottom);\n  margin: 0;\n}\n\n[part~=label],\n[part~=text] {\n  z-index: 1;\n  white-space: nowrap;\n  -o-text-overflow: ellipsis;\n     text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n[part~=select] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  z-index: 1;\n  -webkit-margin-end: 0.25rem;\n          margin-inline-end: 0.25rem;\n}\n[part~=select] igc-checkbox::part(label) {\n  display: none;\n}\n\n[part~=large] {\n  height: 3.125rem;\n}\n[part~=large] igc-circular-progress {\n  --diameter: 1.5rem;\n}\n\n[part~=medium] {\n  height: 2.5rem;\n}\n[part~=medium] igc-circular-progress {\n  --diameter: 1.25rem;\n}\n\n[part~=small] {\n  height: 2rem;\n}\n[part~=small] igc-circular-progress {\n  --diameter: 1.125rem;\n}\n\n[part~=wrapper][part~=large] {\n  padding: 0 1.5rem;\n}\n\n[part~=wrapper][part~=medium] {\n  padding: 0 1rem;\n}\n\n[part~=wrapper][part~=small] {\n  padding: 0 0.75rem;\n}`;\n"]}
+{"version":3,"file":"tree-item.base.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/tree-item.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmLvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium:\n      min(\n          clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n          clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n      );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--scrolbar-size, 0.875rem);\n  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--scrolbar-size, 0.875rem);\n  height: var(--scrolbar-size, 0.875rem);\n  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */\n:host {\n  --size: max(var(--is-large, 1) * 3.125rem, var(--is-medium, 1) * 2.5rem, var(--is-small, 1) * 2rem);\n  --igc-tree-indentation-size: 24px;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  font-family: inherit;\n}\n\n:host(:focus-within) {\n  outline: none;\n}\n\n:host([disabled]) {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n}\n\n[part~=wrapper] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  position: relative;\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  color: var(--ig-surface-500-contrast);\n  height: var(--size);\n  padding: 0 max(var(--is-large, 1) * 24px * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * 16px * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * 12px * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n}\n[part~=wrapper]::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 0;\n  background: transparent;\n}\n[part~=wrapper]:hover::after {\n  background: var(--hover-color, hsla(var(--ig-gray-900), 0.1));\n}\n\n[part~=active] {\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n  color: var(--ig-gray-200-contrast);\n}\n\n[part~=selected] {\n  background: hsla(var(--ig-secondary-200), var(--ig-secondary-a));\n  color: var(--ig-secondary-200-contrast);\n}\n\n[part~=selected][part~=focused][part~=active],\n[part~=selected][part~=focused],\n[part~=selected][part~=active] {\n  background: hsla(var(--ig-secondary-300), var(--ig-secondary-a));\n  color: var(--ig-secondary-300-contrast);\n}\n\n[part~=focused] {\n  -webkit-box-shadow: inset 0 0 0 1px hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n          box-shadow: inset 0 0 0 1px hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n\n[part~=indicator] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  z-index: 1;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  -webkit-margin-end: 0.25rem;\n          margin-inline-end: 0.25rem;\n  min-width: 1.5rem;\n}\n[part~=indicator] igc-icon {\n  width: 1.5rem;\n  height: 1.5rem;\n  font-size: 1.5rem;\n}\n\n[part~=label] {\n  display: block;\n  font-family: var(--ig-body-2-font-family);\n  font-size: var(--ig-body-2-font-size);\n  font-weight: var(--ig-body-2-font-weight);\n  font-style: var(--ig-body-2-font-style);\n  line-height: var(--ig-body-2-line-height);\n  letter-spacing: var(--ig-body-2-letter-spacing);\n  text-transform: var(--ig-body-2-text-transform);\n  margin-top: var(--ig-body-2-margin-top);\n  margin-bottom: var(--ig-body-2-margin-bottom);\n  margin: 0;\n}\n\n[part~=label],\n[part~=text] {\n  z-index: 1;\n  white-space: nowrap;\n  -o-text-overflow: ellipsis;\n     text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n[part~=select] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  z-index: 1;\n  -webkit-margin-end: 0.25rem;\n          margin-inline-end: 0.25rem;\n}\n[part~=select] igc-checkbox::part(label) {\n  display: none;\n}\n\n[part~=large] igc-circular-progress {\n  --diameter: 1.5rem;\n}\n\n[part~=medium] igc-circular-progress {\n  --diameter: 1.25rem;\n}\n\n[part~=small] igc-circular-progress {\n  --diameter: 1.125rem;\n}`;\n"]}

package/components/tree/themes/light/tree-item.bootstrap.css.js

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const styles = css `[part~=active] {
+export const styles = css `/* stylelint-disable max-line-length */
+[part~=active] {
   background: var(--active-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
   color: var(--active-color, var(--ig-gray-200-contrast));
 }

package/components/tree/themes/light/tree-item.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-item.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/tree-item.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=active] {\n  background: var(--active-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  color: var(--active-color, var(--ig-gray-200-contrast));\n}\n\n[part~=selected] {\n  background: var(--selected-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  color: var(--selected-color, var(--ig-primary-600-contrast));\n}\n\n[part~=selected][part~=focused][part~=active],\n[part~=selected][part~=focused],\n[part~=selected][part~=active] {\n  background: var(--active-selected-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  color: var(--active-selected-color, var(--ig-primary-600-contrast));\n}\n\n[part~=select] {\n  -webkit-margin-end: 0.5rem;\n          margin-inline-end: 0.5rem;\n}\n\n[part~=focused] {\n  -webkit-box-shadow: inset 0 0 0 1px var(--focused-border-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n          box-shadow: inset 0 0 0 1px var(--focused-border-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n}`;\n"]}
+{"version":3,"file":"tree-item.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/tree-item.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */\n[part~=active] {\n  background: var(--active-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  color: var(--active-color, var(--ig-gray-200-contrast));\n}\n\n[part~=selected] {\n  background: var(--selected-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  color: var(--selected-color, var(--ig-primary-600-contrast));\n}\n\n[part~=selected][part~=focused][part~=active],\n[part~=selected][part~=focused],\n[part~=selected][part~=active] {\n  background: var(--active-selected-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  color: var(--active-selected-color, var(--ig-primary-600-contrast));\n}\n\n[part~=select] {\n  -webkit-margin-end: 0.5rem;\n          margin-inline-end: 0.5rem;\n}\n\n[part~=focused] {\n  -webkit-box-shadow: inset 0 0 0 1px var(--focused-border-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n          box-shadow: inset 0 0 0 1px var(--focused-border-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n}`;\n"]}

package/components/tree/themes/light/tree-item.fluent.css.js

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const styles = css `[part~=active] {
+export const styles = css `/* stylelint-disable max-line-length */
+[part~=active] {
   background: var(--active-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
   color: var(--active-color, var(--ig-gray-200-contrast));
 }

package/components/tree/themes/light/tree-item.fluent.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-item.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/tree-item.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=active] {\n  background: var(--active-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  color: var(--active-color, var(--ig-gray-200-contrast));\n}\n\n[part~=selected] {\n  background: var(--selected-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  color: var(--selected-color, var(--ig-gray-200-contrast));\n}\n\n[part~=selected][part~=focused][part~=active],\n[part~=selected][part~=focused],\n[part~=selected][part~=active] {\n  background: var(--active-selected-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  color: var(--active-selected-color, var(--ig-gray-300-contrast));\n}\n\n[part~=select] {\n  -webkit-margin-end: 0.5rem;\n          margin-inline-end: 0.5rem;\n}\n\n[part~=focused] {\n  -webkit-box-shadow: inset 0 0 0 1px var(--focused-border-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n          box-shadow: inset 0 0 0 1px var(--focused-border-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n}`;\n"]}
+{"version":3,"file":"tree-item.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/tree-item.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */\n[part~=active] {\n  background: var(--active-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  color: var(--active-color, var(--ig-gray-200-contrast));\n}\n\n[part~=selected] {\n  background: var(--selected-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  color: var(--selected-color, var(--ig-gray-200-contrast));\n}\n\n[part~=selected][part~=focused][part~=active],\n[part~=selected][part~=focused],\n[part~=selected][part~=active] {\n  background: var(--active-selected-background, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  color: var(--active-selected-color, var(--ig-gray-300-contrast));\n}\n\n[part~=select] {\n  -webkit-margin-end: 0.5rem;\n          margin-inline-end: 0.5rem;\n}\n\n[part~=focused] {\n  -webkit-box-shadow: inset 0 0 0 1px var(--focused-border-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n          box-shadow: inset 0 0 0 1px var(--focused-border-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n}`;\n"]}

package/components/tree/themes/light/tree-item.indigo.css.js

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const styles = css `[part~=active] {
+export const styles = css `/* stylelint-disable max-line-length */
+[part~=active] {
   background: var(--active-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
   color: var(--active-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
 }

package/components/tree/themes/light/tree-item.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-item.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/tree-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=active] {\n  background: var(--active-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  color: var(--active-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}\n[part~=active]:hover {\n  color: var(--active-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}\n\n[part~=selected] {\n  background: var(--selected-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  color: var(--selected-color, var(--ig-primary-600-contrast));\n}\n\n[part~=selected][part~=focused][part~=active],\n[part~=selected][part~=focused],\n[part~=selected][part~=active] {\n  background: var(--active-selected-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n  color: var(--active-selected-color, var(--ig-primary-400-contrast));\n}\n\n[part~=select] {\n  -webkit-margin-end: 0.5rem;\n          margin-inline-end: 0.5rem;\n}\n\n[part~=focused] {\n  -webkit-box-shadow: inset 0 0 0 1px var(--focused-border-color, hsla(var(--ig-primary-300), var(--ig-primary-a)));\n          box-shadow: inset 0 0 0 1px var(--focused-border-color, hsla(var(--ig-primary-300), var(--ig-primary-a)));\n}`;\n"]}
+{"version":3,"file":"tree-item.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/tree-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length */\n[part~=active] {\n  background: var(--active-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  color: var(--active-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}\n[part~=active]:hover {\n  color: var(--active-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}\n\n[part~=selected] {\n  background: var(--selected-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  color: var(--selected-color, var(--ig-primary-600-contrast));\n}\n\n[part~=selected][part~=focused][part~=active],\n[part~=selected][part~=focused],\n[part~=selected][part~=active] {\n  background: var(--active-selected-background, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n  color: var(--active-selected-color, var(--ig-primary-400-contrast));\n}\n\n[part~=select] {\n  -webkit-margin-end: 0.5rem;\n          margin-inline-end: 0.5rem;\n}\n\n[part~=focused] {\n  -webkit-box-shadow: inset 0 0 0 1px var(--focused-border-color, hsla(var(--ig-primary-300), var(--ig-primary-a)));\n          box-shadow: inset 0 0 0 1px var(--focused-border-color, hsla(var(--ig-primary-300), var(--ig-primary-a)));\n}`;\n"]}

package/components/tree/themes/light/tree.base.css.js

@@ -1,5 +1,12 @@
 import { css } from 'lit';
 export const styles = css `:host {
+  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
+  --is-medium:
+      min(
+          clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
+          clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
+      );
+  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
   position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -25,9 +32,22 @@ export const styles = css `:host {
   display: none !important;
 }
 
+/* stylelint-disable max-line-length */
 :host {
   display: block;
   overflow: auto;
   font-family: var(--ig-font-family);
+}
+
+:host([size=small]) {
+  --component-size: var(--ig-size, var(--ig-size-small));
+}
+
+:host([size=medium]) {
+  --component-size: var(--ig-size, var(--ig-size-medium));
+}
+
+:host([size=large]) {
+  --component-size: var(--ig-size, var(--ig-size-large));
 }`;
 //# sourceMappingURL=tree.base.css.js.map

package/components/tree/themes/light/tree.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.base.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/tree.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--scrolbar-size, 0.875rem);\n  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--scrolbar-size, 0.875rem);\n  height: var(--scrolbar-size, 0.875rem);\n  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[hidden] {\n  display: none !important;\n}\n\n:host {\n  display: block;\n  overflow: auto;\n  font-family: var(--ig-font-family);\n}`;\n"]}
+{"version":3,"file":"tree.base.css.js","sourceRoot":"","sources":["../../../../../src/components/tree/themes/light/tree.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium:\n      min(\n          clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n          clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n      );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--scrolbar-size, 0.875rem);\n  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--scrolbar-size, 0.875rem);\n  height: var(--scrolbar-size, 0.875rem);\n  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[hidden] {\n  display: none !important;\n}\n\n/* stylelint-disable max-line-length */\n:host {\n  display: block;\n  overflow: auto;\n  font-family: var(--ig-font-family);\n}\n\n:host([size=small]) {\n  --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n:host([size=medium]) {\n  --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=large]) {\n  --component-size: var(--ig-size, var(--ig-size-large));\n}`;\n"]}