igniteui-webcomponents 4.4.0 → 4.5.0

package/components/nav-drawer/themes/light/{nav-drawer-item.base.css.js → item/nav-drawer-item.bootstrap.css.js}

@@ -14,56 +14,25 @@ export const styles = css `:host {
   --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
   --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
   --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
+  --background-color: var(--ig-nav-drawer-background-color, hsla(var(--ig-gray-500), 0.54));
 }
 
 [part~=base] {
   border-radius: var(--item-border-radius);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 2rem;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-flow: row nowrap;
-          flex-flow: row nowrap;
-  position: relative;
-  color: hsla(var(--ig-gray-700), var(--ig-gray-a));
-  max-height: 3rem;
-  margin: 0.5rem;
-  padding: 0.75rem 0.5rem;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  outline: transparent;
-  white-space: nowrap;
-  text-decoration: none;
-  border: none;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
-  -webkit-transition: background 0.15s ease-out;
-  transition: background 0.15s ease-out;
-}
-[part~=base] ::slotted(igc-icon) {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  font: inherit;
+  color: var(--item-text-color);
 }
 [part~=base]:hover, [part~=base]:focus-within {
-  background: var(--hover-background, hsla(var(--ig-gray-200), 0.8));
-  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
+  background: var(--item-hover-background);
+  color: var(--item-hover-text-color);
+}
+[part~=base]:hover ::slotted(igc-icon), [part~=base]:focus-within ::slotted(igc-icon) {
+  color: var(--item-hover-icon-color);
+}
+[part~=base] ::slotted(igc-icon) {
+  color: var(--item-icon-color);
 }
 
 [part=content] {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
   font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));
   font-size: var(--ig-subtitle-2-font-size);
   font-weight: var(--ig-subtitle-2-font-weight);
@@ -75,30 +44,11 @@ export const styles = css `:host {
   margin-bottom: var(--ig-subtitle-2-margin-bottom);
 }
 
-[part="base mini"] {
-  display: block;
-}
-[part="base mini"] [part=content] {
-  display: none;
-}
-[part="base mini"] ::slotted(igc-icon) {
-  width: 100%;
-}
-
-:host([disabled]) {
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  cursor: initial;
-  pointer-events: none;
-}
-:host([disabled]) [part~=base] {
-  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
-}
-
 :host([active]) [part~=base] {
-  background: var(--active-background, hsla(var(--ig-primary-500), 0.12));
-  color: var(--active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  background: var(--item-active-background);
+  color: var(--item-active-text-color);
+}
+:host([active]) [part~=base] ::slotted(igc-icon) {
+  color: var(--item-active-icon-color);
 }`;
-//# sourceMappingURL=nav-drawer-item.base.css.js.map
+//# sourceMappingURL=nav-drawer-item.bootstrap.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer-item.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/item/nav-drawer-item.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n  --background-color: var(--ig-nav-drawer-background-color, hsla(var(--ig-gray-500), 0.54));\n}\n\n[part~=base] {\n  border-radius: var(--item-border-radius);\n  color: var(--item-text-color);\n}\n[part~=base]:hover, [part~=base]:focus-within {\n  background: var(--item-hover-background);\n  color: var(--item-hover-text-color);\n}\n[part~=base]:hover ::slotted(igc-icon), [part~=base]:focus-within ::slotted(igc-icon) {\n  color: var(--item-hover-icon-color);\n}\n[part~=base] ::slotted(igc-icon) {\n  color: var(--item-icon-color);\n}\n\n[part=content] {\n  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-2-font-size);\n  font-weight: var(--ig-subtitle-2-font-weight);\n  font-style: var(--ig-subtitle-2-font-style);\n  line-height: var(--ig-subtitle-2-line-height);\n  letter-spacing: var(--ig-subtitle-2-letter-spacing);\n  text-transform: var(--ig-subtitle-2-text-transform);\n  margin-top: var(--ig-subtitle-2-margin-top);\n  margin-bottom: var(--ig-subtitle-2-margin-bottom);\n}\n\n:host([active]) [part~=base] {\n  background: var(--item-active-background);\n  color: var(--item-active-text-color);\n}\n:host([active]) [part~=base] ::slotted(igc-icon) {\n  color: var(--item-active-icon-color);\n}`;\n"]}

package/components/nav-drawer/themes/light/item/nav-drawer-item.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/nav-drawer/themes/light/item/nav-drawer-item.fluent.css.js

@@ -0,0 +1,54 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));
+  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));
+  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));
+  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));
+  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
+  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
+  --background-color: var(--ig-nav-drawer-background-color, rgba(255, 255, 255, 0.4));
+}
+
+[part~=base] {
+  border-radius: var(--item-border-radius);
+  color: var(--item-text-color);
+}
+[part~=base]:hover, [part~=base]:focus-within {
+  background: var(--item-hover-background);
+  color: var(--item-hover-text-color);
+}
+[part~=base]:hover ::slotted(igc-icon), [part~=base]:focus-within ::slotted(igc-icon) {
+  color: var(--item-hover-icon-color);
+}
+[part~=base] ::slotted(igc-icon) {
+  color: var(--item-icon-color);
+}
+
+[part=content] {
+  font-family: var(--ig-body-2-font-family, var(--ig-font-family));
+  font-size: var(--ig-body-2-font-size);
+  font-weight: var(--ig-body-2-font-weight);
+  font-style: var(--ig-body-2-font-style);
+  line-height: var(--ig-body-2-line-height);
+  letter-spacing: var(--ig-body-2-letter-spacing);
+  text-transform: var(--ig-body-2-text-transform);
+  margin-top: var(--ig-body-2-margin-top);
+  margin-bottom: var(--ig-body-2-margin-bottom);
+}
+
+:host([active]) [part~=base] {
+  background: var(--item-active-background);
+  color: var(--item-active-text-color);
+}
+:host([active]) [part~=base] ::slotted(igc-icon) {
+  color: var(--item-active-icon-color);
+}`;
+//# sourceMappingURL=nav-drawer-item.fluent.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer-item.fluent.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/item/nav-drawer-item.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n  --background-color: var(--ig-nav-drawer-background-color, rgba(255, 255, 255, 0.4));\n}\n\n[part~=base] {\n  border-radius: var(--item-border-radius);\n  color: var(--item-text-color);\n}\n[part~=base]:hover, [part~=base]:focus-within {\n  background: var(--item-hover-background);\n  color: var(--item-hover-text-color);\n}\n[part~=base]:hover ::slotted(igc-icon), [part~=base]:focus-within ::slotted(igc-icon) {\n  color: var(--item-hover-icon-color);\n}\n[part~=base] ::slotted(igc-icon) {\n  color: var(--item-icon-color);\n}\n\n[part=content] {\n  font-family: var(--ig-body-2-font-family, var(--ig-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}\n\n:host([active]) [part~=base] {\n  background: var(--item-active-background);\n  color: var(--item-active-text-color);\n}\n:host([active]) [part~=base] ::slotted(igc-icon) {\n  color: var(--item-active-icon-color);\n}`;\n"]}

package/components/nav-drawer/themes/light/item/nav-drawer-item.indigo.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/nav-drawer/themes/light/{indigo → item}/nav-drawer-item.indigo.css.js

@@ -14,25 +14,46 @@ export const styles = css `:host {
   --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
   --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
   --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));
+  --background-color: var(--ig-nav-drawer-background-color, hsla(var(--ig-gray-500), 0.54));
 }
-:host [part~=base] {
-  border-radius: var(--item-border-radius);
+
+[part~=base] {
   gap: 1.5rem;
-  color: var(--text-color, hsla(var(--ig-gray-300), 0.8));
   padding: 0.25rem;
   margin: 0.9375rem 0.5rem;
+  border-radius: var(--item-border-radius);
+  color: var(--item-text-color);
+}
+[part~=base]:hover, [part~=base]:focus-within {
+  background: var(--item-hover-background);
+  color: var(--item-hover-text-color);
 }
-:host [part~=base]:hover, :host [part~=base]:focus-within {
-  background: transparent;
-  color: var(--hover-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+[part~=base]:hover ::slotted(igc-icon), [part~=base]:focus-within ::slotted(igc-icon) {
+  color: var(--item-hover-icon-color);
 }
-:host [part=content] {
+[part~=base] ::slotted(igc-icon) {
+  color: var(--item-icon-color);
+}
+
+[part=content] {
+  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));
+  font-size: var(--ig-subtitle-2-font-size);
+  font-weight: var(--ig-subtitle-2-font-weight);
+  font-style: var(--ig-subtitle-2-font-style);
+  line-height: var(--ig-subtitle-2-line-height);
+  letter-spacing: var(--ig-subtitle-2-letter-spacing);
+  text-transform: var(--ig-subtitle-2-text-transform);
+  margin-top: var(--ig-subtitle-2-margin-top);
+  margin-bottom: var(--ig-subtitle-2-margin-bottom);
   -webkit-padding-start: 0.5rem;
           padding-inline-start: 0.5rem;
 }
 
 :host([active]) [part~=base] {
-  background: var(--active-background, hsla(var(--ig-gray-600), 0.8));
-  color: hsla(var(--ig-gray-50), var(--ig-gray-a));
+  background: var(--item-active-background);
+  color: var(--item-active-text-color);
+}
+:host([active]) [part~=base] ::slotted(igc-icon) {
+  color: var(--item-active-icon-color);
 }`;
 //# sourceMappingURL=nav-drawer-item.indigo.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer-item.indigo.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/item/nav-drawer-item.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-0));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --border-color: var(--ig-nav-drawer-border-color, transparent);\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-300), 0.8));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-300), 0.8));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-gray-600), 0.8));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, transparent);\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.5rem), 1.5rem));\n  --background-color: var(--ig-nav-drawer-background-color, hsla(var(--ig-gray-500), 0.54));\n}\n\n[part~=base] {\n  gap: 1.5rem;\n  padding: 0.25rem;\n  margin: 0.9375rem 0.5rem;\n  border-radius: var(--item-border-radius);\n  color: var(--item-text-color);\n}\n[part~=base]:hover, [part~=base]:focus-within {\n  background: var(--item-hover-background);\n  color: var(--item-hover-text-color);\n}\n[part~=base]:hover ::slotted(igc-icon), [part~=base]:focus-within ::slotted(igc-icon) {\n  color: var(--item-hover-icon-color);\n}\n[part~=base] ::slotted(igc-icon) {\n  color: var(--item-icon-color);\n}\n\n[part=content] {\n  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-2-font-size);\n  font-weight: var(--ig-subtitle-2-font-weight);\n  font-style: var(--ig-subtitle-2-font-style);\n  line-height: var(--ig-subtitle-2-line-height);\n  letter-spacing: var(--ig-subtitle-2-letter-spacing);\n  text-transform: var(--ig-subtitle-2-text-transform);\n  margin-top: var(--ig-subtitle-2-margin-top);\n  margin-bottom: var(--ig-subtitle-2-margin-bottom);\n  -webkit-padding-start: 0.5rem;\n          padding-inline-start: 0.5rem;\n}\n\n:host([active]) [part~=base] {\n  background: var(--item-active-background);\n  color: var(--item-active-text-color);\n}\n:host([active]) [part~=base] ::slotted(igc-icon) {\n  color: var(--item-active-icon-color);\n}`;\n"]}

package/components/nav-drawer/themes/light/item/nav-drawer-item.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/nav-drawer/themes/light/item/nav-drawer-item.material.css.js

@@ -0,0 +1,54 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));
+  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));
+  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));
+  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));
+  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
+  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
+  --background-color: var(--ig-nav-drawer-background-color, hsla(var(--ig-gray-500), 0.54));
+}
+
+[part~=base] {
+  border-radius: var(--item-border-radius);
+  color: var(--item-text-color);
+}
+[part~=base]:hover, [part~=base]:focus-within {
+  background: var(--item-hover-background);
+  color: var(--item-hover-text-color);
+}
+[part~=base]:hover ::slotted(igc-icon), [part~=base]:focus-within ::slotted(igc-icon) {
+  color: var(--item-hover-icon-color);
+}
+[part~=base] ::slotted(igc-icon) {
+  color: var(--item-icon-color);
+}
+
+[part=content] {
+  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));
+  font-size: var(--ig-subtitle-2-font-size);
+  font-weight: var(--ig-subtitle-2-font-weight);
+  font-style: var(--ig-subtitle-2-font-style);
+  line-height: var(--ig-subtitle-2-line-height);
+  letter-spacing: var(--ig-subtitle-2-letter-spacing);
+  text-transform: var(--ig-subtitle-2-text-transform);
+  margin-top: var(--ig-subtitle-2-margin-top);
+  margin-bottom: var(--ig-subtitle-2-margin-bottom);
+}
+
+:host([active]) [part~=base] {
+  background: var(--item-active-background);
+  color: var(--item-active-text-color);
+}
+:host([active]) [part~=base] ::slotted(igc-icon) {
+  color: var(--item-active-icon-color);
+}`;
+//# sourceMappingURL=nav-drawer-item.material.css.js.map

package/components/nav-drawer/themes/light/item/nav-drawer-item.material.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer-item.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/nav-drawer/themes/light/item/nav-drawer-item.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n  --background-color: var(--ig-nav-drawer-background-color, hsla(var(--ig-gray-500), 0.54));\n}\n\n[part~=base] {\n  border-radius: var(--item-border-radius);\n  color: var(--item-text-color);\n}\n[part~=base]:hover, [part~=base]:focus-within {\n  background: var(--item-hover-background);\n  color: var(--item-hover-text-color);\n}\n[part~=base]:hover ::slotted(igc-icon), [part~=base]:focus-within ::slotted(igc-icon) {\n  color: var(--item-hover-icon-color);\n}\n[part~=base] ::slotted(igc-icon) {\n  color: var(--item-icon-color);\n}\n\n[part=content] {\n  font-family: var(--ig-subtitle-2-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-2-font-size);\n  font-weight: var(--ig-subtitle-2-font-weight);\n  font-style: var(--ig-subtitle-2-font-style);\n  line-height: var(--ig-subtitle-2-line-height);\n  letter-spacing: var(--ig-subtitle-2-letter-spacing);\n  text-transform: var(--ig-subtitle-2-text-transform);\n  margin-top: var(--ig-subtitle-2-margin-top);\n  margin-bottom: var(--ig-subtitle-2-margin-bottom);\n}\n\n:host([active]) [part~=base] {\n  background: var(--item-active-background);\n  color: var(--item-active-text-color);\n}\n:host([active]) [part~=base] ::slotted(igc-icon) {\n  color: var(--item-active-icon-color);\n}`;\n"]}

package/components/nav-drawer/themes/light/nav-drawer.base.css.js

@@ -46,57 +46,60 @@ export const styles = css `:host {
   --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
   --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
   --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
+  --menu-full-width: 16rem;
+  --menu-mini-width: 3.75rem;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   -ms-flex-negative: 0;
       flex-shrink: 0;
   font-family: var(--ig-font-family);
 }
-:host [part=base] {
-  border-radius: var(--border-radius);
+:host [part=base],
+:host [part~=mini] {
+  --ig-scrollbar-size: rem(8px);
   position: fixed;
   height: 100%;
   min-height: 100%;
   overflow-x: hidden;
-  top: 0;
-  bottom: 0;
-  inset-inline-start: 0;
+  inset-block: 0;
   z-index: 999;
-  background: hsla(var(--ig-surface-500), var(--ig-surface-a));
-  -webkit-transition: all ease-out 0.3s, 0.3s;
-  transition: all ease-out 0.3s, 0.3s;
+  -webkit-transition: 0.3s, -webkit-transform ease-out 0.3s;
+  transition: 0.3s, -webkit-transform ease-out 0.3s;
+  transition: transform ease-out 0.3s, 0.3s;
+  transition: transform ease-out 0.3s, 0.3s, -webkit-transform ease-out 0.3s;
 }
-:host [part=main] {
-  width: 16rem;
+:host [part~=mini] {
+  min-width: var(--menu-mini-width);
 }
-:host [part=mini] {
-  width: 3.75rem;
+:host [part=main] {
+  width: var(--menu-full-width);
 }
 :host [part=overlay] {
-  background: hsla(var(--ig-gray-500), 0.54);
   position: fixed;
   inset: 0;
   z-index: 2;
+  opacity: 1;
+  -webkit-transition: opacity ease-out 0.3s, 0.3s;
+  transition: opacity ease-out 0.3s, 0.3s;
 }
 
-:host([position=start]) [part=mini],
-:host([position=end]) [part=mini] {
-  background: hsla(var(--ig-surface-500), var(--ig-surface-a));
-  -webkit-box-shadow: var(--ig-elevation-16);
-          box-shadow: var(--ig-elevation-16);
-  position: fixed;
-  top: 0;
-  bottom: 0;
+:host([position=relative]) [part=base] {
+  position: relative;
+  width: var(--menu-full-width);
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  z-index: initial;
+  border-inline-end-style: solid;
+  border-inline-end-width: 0.0625rem;
 }
-
-:host([position=start]) [part=mini] {
-  -webkit-border-end: 1px solid hsla(var(--ig-gray-900), 0.14);
-          border-inline-end: 1px solid hsla(var(--ig-gray-900), 0.14);
-  inset-inline-start: 0;
+:host([position=relative]) [part~=mini] {
+  position: relative;
+  border-inline-end-style: solid;
+  border-inline-end-width: 0.0625rem;
 }
-
-:host([position=end]) [part=mini] {
-  -webkit-border-start: 1px solid hsla(var(--ig-gray-900), 0.14);
-          border-inline-start: 1px solid hsla(var(--ig-gray-900), 0.14);
-  inset-inline-end: 0;
+:host([position=relative]) [part=overlay] {
+  display: none;
 }
 
 :host([position=top]) [part=main],
@@ -107,8 +110,8 @@ export const styles = css `:host {
 :host([position=bottom]) [part=base] {
   height: 50vh;
   min-height: initial;
-  top: auto;
   width: 100%;
+  inset-inline: 0;
 }
 
 :host([position=top]) [part=base] {
@@ -116,10 +119,45 @@ export const styles = css `:host {
   bottom: auto;
 }
 
+:host([position=bottom]) [part=base] {
+  top: auto;
+  bottom: 0;
+}
+
+:host([position=start]) [part=base],
+:host([position=start]) [part~=mini] {
+  inset-inline-start: 0;
+  border-inline-end-style: solid;
+  border-inline-end-width: 0.0625rem;
+}
+
+:host([position=end]) [part=base],
+:host([position=end]) [part~=mini] {
+  inset-inline-end: 0;
+  border-inline-start-style: solid;
+  border-inline-start-width: 0.0625rem;
+}
+
+:host(:not([open])[position=start]),
+:host([dir=rtl]:not([open])[position=end]) {
+  --dir: calc(var(--ig-dir, 1) * -1);
+}
+
+:host(:not([open])[position=end]),
+:host([dir=rtl]:not([open])[position=start]) {
+  --dir: calc(var(--ig-dir, 1) * 1);
+}
+
+:host(:not([open])[position=relative]) [part=base] {
+  -webkit-margin-start: calc(var(--menu-full-width) * -1);
+          margin-inline-start: calc(var(--menu-full-width) * -1);
+}
+
 :host(:not([open])[position=top]) [part=base],
 :host(:not([open])[position=bottom]) [part=base] {
-  -webkit-transform: translate3d(0, -60vh, 0);
-          transform: translate3d(0, -60vh, 0);
+  -webkit-transform: translateY(-60vh);
+      -ms-transform: translateY(-60vh);
+          transform: translateY(-60vh);
 }
 :host(:not([open])[position=top]) [part=mini],
 :host(:not([open])[position=bottom]) [part=mini] {
@@ -127,32 +165,16 @@ export const styles = css `:host {
 }
 
 :host(:not([open])[position=bottom]) [part=base] {
-  -webkit-transform: translate3d(0, 60vh, 0);
-          transform: translate3d(0, 60vh, 0);
+  -webkit-transform: translateY(60vh);
+      -ms-transform: translateY(60vh);
+          transform: translateY(60vh);
 }
 
 :host([open][position=end]) [part=base] {
   -webkit-border-end: none;
           border-inline-end: none;
-  -webkit-border-start: 1px solid hsla(var(--ig-gray-900), 0.14);
-          border-inline-start: 1px solid hsla(var(--ig-gray-900), 0.14);
-  inset-inline-start: auto;
-  inset-inline-end: 0;
-}
-
-:host([position=relative]) [part=base] {
-  position: relative;
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  z-index: initial;
-  -webkit-border-end: 1px solid hsla(var(--ig-gray-300), var(--ig-gray-a));
-          border-inline-end: 1px solid hsla(var(--ig-gray-300), var(--ig-gray-a));
-}
-:host([position=relative]) [part=overlay] {
-  display: none;
+  border-inline-start-style: solid;
+  border-inline-start-width: 0.0625rem;
 }
 
 :host([open]) [part=mini] {
@@ -160,16 +182,17 @@ export const styles = css `:host {
 }
 
 :host([open]:not([position=relative])) [part=base] {
-  -webkit-border-end: 1px solid hsla(var(--ig-gray-900), 0.14);
-          border-inline-end: 1px solid hsla(var(--ig-gray-900), 0.14);
-  -webkit-box-shadow: var(--ig-elevation-16);
-          box-shadow: var(--ig-elevation-16);
+  border-inline-end-style: solid;
+  border-inline-end-width: 0.0625rem;
 }
 
-:host(:not([open])) [part=main] {
-  display: none;
+:host(:not([open])) [part=base] {
+  -webkit-transform: translateX(calc(100% * var(--dir)));
+      -ms-transform: translateX(calc(100% * var(--dir)));
+          transform: translateX(calc(100% * var(--dir)));
 }
 :host(:not([open])) [part=overlay] {
-  display: none;
+  pointer-events: none;
+  opacity: 0;
 }`;
 //# sourceMappingURL=nav-drawer.base.css.js.map

package/components/nav-drawer/themes/light/nav-drawer.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-drawer.base.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4KvB,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: 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(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\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(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  font-family: var(--ig-font-family);\n}\n:host [part=base] {\n  border-radius: var(--border-radius);\n  position: fixed;\n  height: 100%;\n  min-height: 100%;\n  overflow-x: hidden;\n  top: 0;\n  bottom: 0;\n  inset-inline-start: 0;\n  z-index: 999;\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  -webkit-transition: all ease-out 0.3s, 0.3s;\n  transition: all ease-out 0.3s, 0.3s;\n}\n:host [part=main] {\n  width: 16rem;\n}\n:host [part=mini] {\n  width: 3.75rem;\n}\n:host [part=overlay] {\n  background: hsla(var(--ig-gray-500), 0.54);\n  position: fixed;\n  inset: 0;\n  z-index: 2;\n}\n\n:host([position=start]) [part=mini],\n:host([position=end]) [part=mini] {\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  -webkit-box-shadow: var(--ig-elevation-16);\n          box-shadow: var(--ig-elevation-16);\n  position: fixed;\n  top: 0;\n  bottom: 0;\n}\n\n:host([position=start]) [part=mini] {\n  -webkit-border-end: 1px solid hsla(var(--ig-gray-900), 0.14);\n          border-inline-end: 1px solid hsla(var(--ig-gray-900), 0.14);\n  inset-inline-start: 0;\n}\n\n:host([position=end]) [part=mini] {\n  -webkit-border-start: 1px solid hsla(var(--ig-gray-900), 0.14);\n          border-inline-start: 1px solid hsla(var(--ig-gray-900), 0.14);\n  inset-inline-end: 0;\n}\n\n:host([position=top]) [part=main],\n:host([position=bottom]) [part=main] {\n  width: 100%;\n}\n:host([position=top]) [part=base],\n:host([position=bottom]) [part=base] {\n  height: 50vh;\n  min-height: initial;\n  top: auto;\n  width: 100%;\n}\n\n:host([position=top]) [part=base] {\n  top: 0;\n  bottom: auto;\n}\n\n:host(:not([open])[position=top]) [part=base],\n:host(:not([open])[position=bottom]) [part=base] {\n  -webkit-transform: translate3d(0, -60vh, 0);\n          transform: translate3d(0, -60vh, 0);\n}\n:host(:not([open])[position=top]) [part=mini],\n:host(:not([open])[position=bottom]) [part=mini] {\n  display: none;\n}\n\n:host(:not([open])[position=bottom]) [part=base] {\n  -webkit-transform: translate3d(0, 60vh, 0);\n          transform: translate3d(0, 60vh, 0);\n}\n\n:host([open][position=end]) [part=base] {\n  -webkit-border-end: none;\n          border-inline-end: none;\n  -webkit-border-start: 1px solid hsla(var(--ig-gray-900), 0.14);\n          border-inline-start: 1px solid hsla(var(--ig-gray-900), 0.14);\n  inset-inline-start: auto;\n  inset-inline-end: 0;\n}\n\n:host([position=relative]) [part=base] {\n  position: relative;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n  z-index: initial;\n  -webkit-border-end: 1px solid hsla(var(--ig-gray-300), var(--ig-gray-a));\n          border-inline-end: 1px solid hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n:host([position=relative]) [part=overlay] {\n  display: none;\n}\n\n:host([open]) [part=mini] {\n  display: none;\n}\n\n:host([open]:not([position=relative])) [part=base] {\n  -webkit-border-end: 1px solid hsla(var(--ig-gray-900), 0.14);\n          border-inline-end: 1px solid hsla(var(--ig-gray-900), 0.14);\n  -webkit-box-shadow: var(--ig-elevation-16);\n          box-shadow: var(--ig-elevation-16);\n}\n\n:host(:not([open])) [part=main] {\n  display: none;\n}\n:host(:not([open])) [part=overlay] {\n  display: none;\n}`;\n"]}
+{"version":3,"file":"nav-drawer.base.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmMvB,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: 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(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\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(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n  --menu-full-width: 16rem;\n  --menu-mini-width: 3.75rem;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  font-family: var(--ig-font-family);\n}\n:host [part=base],\n:host [part~=mini] {\n  --ig-scrollbar-size: rem(8px);\n  position: fixed;\n  height: 100%;\n  min-height: 100%;\n  overflow-x: hidden;\n  inset-block: 0;\n  z-index: 999;\n  -webkit-transition: 0.3s, -webkit-transform ease-out 0.3s;\n  transition: 0.3s, -webkit-transform ease-out 0.3s;\n  transition: transform ease-out 0.3s, 0.3s;\n  transition: transform ease-out 0.3s, 0.3s, -webkit-transform ease-out 0.3s;\n}\n:host [part~=mini] {\n  min-width: var(--menu-mini-width);\n}\n:host [part=main] {\n  width: var(--menu-full-width);\n}\n:host [part=overlay] {\n  position: fixed;\n  inset: 0;\n  z-index: 2;\n  opacity: 1;\n  -webkit-transition: opacity ease-out 0.3s, 0.3s;\n  transition: opacity ease-out 0.3s, 0.3s;\n}\n\n:host([position=relative]) [part=base] {\n  position: relative;\n  width: var(--menu-full-width);\n  -webkit-box-shadow: none;\n          box-shadow: none;\n  z-index: initial;\n  border-inline-end-style: solid;\n  border-inline-end-width: 0.0625rem;\n}\n:host([position=relative]) [part~=mini] {\n  position: relative;\n  border-inline-end-style: solid;\n  border-inline-end-width: 0.0625rem;\n}\n:host([position=relative]) [part=overlay] {\n  display: none;\n}\n\n:host([position=top]) [part=main],\n:host([position=bottom]) [part=main] {\n  width: 100%;\n}\n:host([position=top]) [part=base],\n:host([position=bottom]) [part=base] {\n  height: 50vh;\n  min-height: initial;\n  width: 100%;\n  inset-inline: 0;\n}\n\n:host([position=top]) [part=base] {\n  top: 0;\n  bottom: auto;\n}\n\n:host([position=bottom]) [part=base] {\n  top: auto;\n  bottom: 0;\n}\n\n:host([position=start]) [part=base],\n:host([position=start]) [part~=mini] {\n  inset-inline-start: 0;\n  border-inline-end-style: solid;\n  border-inline-end-width: 0.0625rem;\n}\n\n:host([position=end]) [part=base],\n:host([position=end]) [part~=mini] {\n  inset-inline-end: 0;\n  border-inline-start-style: solid;\n  border-inline-start-width: 0.0625rem;\n}\n\n:host(:not([open])[position=start]),\n:host([dir=rtl]:not([open])[position=end]) {\n  --dir: calc(var(--ig-dir, 1) * -1);\n}\n\n:host(:not([open])[position=end]),\n:host([dir=rtl]:not([open])[position=start]) {\n  --dir: calc(var(--ig-dir, 1) * 1);\n}\n\n:host(:not([open])[position=relative]) [part=base] {\n  -webkit-margin-start: calc(var(--menu-full-width) * -1);\n          margin-inline-start: calc(var(--menu-full-width) * -1);\n}\n\n:host(:not([open])[position=top]) [part=base],\n:host(:not([open])[position=bottom]) [part=base] {\n  -webkit-transform: translateY(-60vh);\n      -ms-transform: translateY(-60vh);\n          transform: translateY(-60vh);\n}\n:host(:not([open])[position=top]) [part=mini],\n:host(:not([open])[position=bottom]) [part=mini] {\n  display: none;\n}\n\n:host(:not([open])[position=bottom]) [part=base] {\n  -webkit-transform: translateY(60vh);\n      -ms-transform: translateY(60vh);\n          transform: translateY(60vh);\n}\n\n:host([open][position=end]) [part=base] {\n  -webkit-border-end: none;\n          border-inline-end: none;\n  border-inline-start-style: solid;\n  border-inline-start-width: 0.0625rem;\n}\n\n:host([open]) [part=mini] {\n  display: none;\n}\n\n:host([open]:not([position=relative])) [part=base] {\n  border-inline-end-style: solid;\n  border-inline-end-width: 0.0625rem;\n}\n\n:host(:not([open])) [part=base] {\n  -webkit-transform: translateX(calc(100% * var(--dir)));\n      -ms-transform: translateX(calc(100% * var(--dir)));\n          transform: translateX(calc(100% * var(--dir)));\n}\n:host(:not([open])) [part=overlay] {\n  pointer-events: none;\n  opacity: 0;\n}`;\n"]}

package/components/nav-drawer/themes/light/nav-drawer.bootstrap.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/nav-drawer/themes/light/nav-drawer.bootstrap.css.js

@@ -0,0 +1,62 @@
+import { css } from 'lit';
+export const styles = css `:host {
+  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));
+  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));
+  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));
+  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));
+  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
+  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));
+  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
+  --background-color: var(--ig-nav-drawer-background-color, hsla(var(--ig-gray-500), 0.54));
+}
+:host [part=base] {
+  border-radius: var(--border-radius);
+  background: var(--background);
+  border: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+:host [part=overlay] {
+  background: var(--background-color);
+}
+
+[part=mini] {
+  background: var(--background);
+}
+
+:host([position=start]) [part=mini],
+:host([position=end]) [part=mini] {
+  -webkit-box-shadow: var(--elevation);
+          box-shadow: var(--elevation);
+}
+
+:host([position=start]) [part=mini] {
+  border-inline-end-color: var(--border-color);
+}
+
+:host([position=end]) [part=mini] {
+  border-inline-start-color: var(--border-color);
+}
+
+:host([open][position=end]) [part=base] {
+  border-inline-start-color: var(--border-color);
+}
+
+:host([position=relative]) [part=base],
+:host([position=relative]) [part~=mini] {
+  border-inline-end-color: var(--border-color);
+}
+
+:host([open]:not([position=relative])) [part=base] {
+  border-inline-end-color: var(--border-color);
+  -webkit-box-shadow: var(--elevation);
+          box-shadow: var(--elevation);
+}`;
+//# sourceMappingURL=nav-drawer.bootstrap.css.js.map

package/components/nav-drawer/themes/light/nav-drawer.bootstrap.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-16));\n  --background: var(--ig-nav-drawer-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));\n  --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-text-color: var(--ig-nav-drawer-item-active-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-active-background: var(--ig-nav-drawer-item-active-background, hsla(var(--ig-primary-500), 0.12));\n  --item-hover-background: var(--ig-nav-drawer-item-hover-background, hsla(var(--ig-gray-200), 0.8));\n  --item-hover-text-color: var(--ig-nav-drawer-item-hover-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-hover-icon-color: var(--ig-nav-drawer-item-hover-icon-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-radius: var(--ig-nav-drawer-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 2.25rem), 2.25rem));\n  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));\n  --background-color: var(--ig-nav-drawer-background-color, hsla(var(--ig-gray-500), 0.54));\n}\n:host [part=base] {\n  border-radius: var(--border-radius);\n  background: var(--background);\n  border: none;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n:host [part=overlay] {\n  background: var(--background-color);\n}\n\n[part=mini] {\n  background: var(--background);\n}\n\n:host([position=start]) [part=mini],\n:host([position=end]) [part=mini] {\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}\n\n:host([position=start]) [part=mini] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([position=end]) [part=mini] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([open][position=end]) [part=base] {\n  border-inline-start-color: var(--border-color);\n}\n\n:host([position=relative]) [part=base],\n:host([position=relative]) [part~=mini] {\n  border-inline-end-color: var(--border-color);\n}\n\n:host([open]:not([position=relative])) [part=base] {\n  border-inline-end-color: var(--border-color);\n  -webkit-box-shadow: var(--elevation);\n          box-shadow: var(--elevation);\n}`;\n"]}

package/components/nav-drawer/themes/light/nav-drawer.fluent.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;