igniteui-webcomponents 4.3.1 → 4.5.0-beta.1

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

@@ -45,13 +45,12 @@ export const styles = css `:host {
   --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, 0.25rem, 0rem, 1.5rem);
+  --item-border-radius: var(--ig-nav-drawer-item-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));
   -ms-flex-negative: 0;
       flex-shrink: 0;
   font-family: var(--ig-font-family);
 }
 :host [part=base] {
-  border-radius: var(--border-radius);
   position: fixed;
   height: 100%;
   min-height: 100%;
@@ -60,7 +59,6 @@ export const styles = css `:host {
   bottom: 0;
   inset-inline-start: 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;
 }
@@ -71,7 +69,6 @@ export const styles = css `:host {
   width: 3.75rem;
 }
 :host [part=overlay] {
-  background: hsla(var(--ig-gray-500), 0.54);
   position: fixed;
   inset: 0;
   z-index: 2;
@@ -79,23 +76,20 @@ export const styles = css `:host {
 
 :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=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);
+  border-inline-end-style: solid;
+  border-inline-end-width: 0.0625rem;
   inset-inline-start: 0;
 }
 
 :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);
+  border-inline-start-style: solid;
+  border-inline-start-width: 0.0625rem;
   inset-inline-end: 0;
 }
 
@@ -134,8 +128,8 @@ export const styles = css `:host {
 :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);
+  border-inline-start-style: solid;
+  border-inline-start-width: 0.0625rem;
   inset-inline-start: auto;
   inset-inline-end: 0;
 }
@@ -148,8 +142,8 @@ export const styles = css `:host {
   -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));
+  border-inline-end-style: solid;
+  border-inline-end-width: 0.0625rem;
 }
 :host([position=relative]) [part=overlay] {
   display: none;
@@ -160,10 +154,8 @@ 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] {

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, 0.25rem, 0rem, 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoKvB,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  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  -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  position: fixed;\n  inset: 0;\n  z-index: 2;\n}\n\n:host([position=start]) [part=mini],\n:host([position=end]) [part=mini] {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n}\n\n:host([position=start]) [part=mini] {\n  border-inline-end-style: solid;\n  border-inline-end-width: 0.0625rem;\n  inset-inline-start: 0;\n}\n\n:host([position=end]) [part=mini] {\n  border-inline-start-style: solid;\n  border-inline-start-width: 0.0625rem;\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  border-inline-start-style: solid;\n  border-inline-start-width: 0.0625rem;\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  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([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=main] {\n  display: none;\n}\n:host(:not([open])) [part=overlay] {\n  display: none;\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,60 @@
+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));
+}
+: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] {
+  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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDvB,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}\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  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;

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

@@ -0,0 +1,60 @@
+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));
+}
+: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] {
+  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.fluent.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDvB,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}\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  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.indigo.css.d.ts

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

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
 export const styles = css `:host {
   --elevation: var(--ig-nav-drawer-elevation, var(--ig-elevation-0));
   --background: var(--ig-nav-drawer-background, hsla(var(--ig-gray-700), var(--ig-gray-a)));
-  --border-color: var(--ig-nav-drawer-border-color, hsla(var(--ig-gray-900), 0.14));
+  --border-color: var(--ig-nav-drawer-border-color, transparent);
   --item-header-text-color: var(--ig-nav-drawer-item-header-text-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
   --item-text-color: var(--ig-nav-drawer-item-text-color, hsla(var(--ig-gray-300), 0.8));
   --item-icon-color: var(--ig-nav-drawer-item-icon-color, hsla(var(--ig-gray-300), 0.8));
@@ -13,18 +13,49 @@ export const styles = css `:host {
   --item-active-icon-color: var(--ig-nav-drawer-item-active-icon-color, hsla(var(--ig-gray-50), var(--ig-gray-a)));
   --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, 1.5rem, 0rem, 1.5rem);
+  --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(--border-radius);
-  background: var(--background, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  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] {
-  background: var(--background, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  -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] {
+  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.indigo.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DvB,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: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  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.material.css.d.ts

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

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

@@ -0,0 +1,60 @@
+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));
+}
+: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] {
+  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.material.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-drawer.material.css.js","sourceRoot":"","sources":["../../../../../src/components/nav-drawer/themes/light/nav-drawer.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDvB,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}\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  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/navbar/themes/light/navbar.bootstrap.css.js

@@ -1,37 +1,5 @@
 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;
-  scrollbar-width: var(--ig-scrollbar-size);
-  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
-}
-:host *,
-:host *::before,
-:host *::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-:host ::-webkit-scrollbar {
-  width: var(--ig-scrollbar-size);
-  height: var(--ig-scrollbar-size);
-  background: var(--ig-scrollbar-track-background);
-}
-:host ::-webkit-scrollbar-thumb {
-  background: var(--ig-scrollbar-thumb-background);
-}
-
-:host([hidden]),
-[hidden] {
-  display: none !important;
-}
-:host {
   --elevation: var(--ig-navbar-elevation, var(--ig-elevation-0));
   --background: var(--ig-navbar-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
   --text-color: var(--ig-navbar-text-color, var(--ig-surface-500-contrast));

package/components/navbar/themes/light/navbar.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/navbar/themes/light/navbar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwEvB,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-navbar-elevation, var(--ig-elevation-0));\n  --background: var(--ig-navbar-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --text-color: var(--ig-navbar-text-color, var(--ig-surface-500-contrast));\n  --idle-icon-color: var(--ig-navbar-idle-icon-color, var(--ig-surface-500-contrast));\n  --hover-icon-color: var(--ig-navbar-hover-icon-color, var(--ig-surface-500-contrast));\n  background: var(--background);\n  color: var(--text-color);\n  -webkit-box-shadow: var(--ig-elevation-0);\n          box-shadow: var(--ig-elevation-0);\n  padding: 0 0.5rem;\n}\n\n::slotted(igc-icon) {\n  color: var(--idle-icon-color);\n}\n\n::slotted(igc-icon:hover) {\n  color: var(--hover-icon-color);\n}\n\n[part=base] {\n  -webkit-padding-start: 0.25rem;\n          padding-inline-start: 0.25rem;\n  -webkit-padding-end: 0.25rem;\n          padding-inline-end: 0.25rem;\n}\n\n::slotted(*) {\n  font-family: var(--ig-h5-font-family, var(--ig-font-family));\n  font-size: var(--ig-h5-font-size);\n  font-weight: var(--ig-h5-font-weight);\n  font-style: var(--ig-h5-font-style);\n  line-height: var(--ig-h5-line-height);\n  letter-spacing: var(--ig-h5-letter-spacing);\n  text-transform: var(--ig-h5-text-transform);\n  margin-top: var(--ig-h5-margin-top);\n  margin-bottom: var(--ig-h5-margin-bottom);\n  line-height: normal;\n  margin: 0;\n}`;\n"]}
+{"version":3,"file":"navbar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/navbar/themes/light/navbar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-navbar-elevation, var(--ig-elevation-0));\n  --background: var(--ig-navbar-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --text-color: var(--ig-navbar-text-color, var(--ig-surface-500-contrast));\n  --idle-icon-color: var(--ig-navbar-idle-icon-color, var(--ig-surface-500-contrast));\n  --hover-icon-color: var(--ig-navbar-hover-icon-color, var(--ig-surface-500-contrast));\n  background: var(--background);\n  color: var(--text-color);\n  -webkit-box-shadow: var(--ig-elevation-0);\n          box-shadow: var(--ig-elevation-0);\n  padding: 0 0.5rem;\n}\n\n::slotted(igc-icon) {\n  color: var(--idle-icon-color);\n}\n\n::slotted(igc-icon:hover) {\n  color: var(--hover-icon-color);\n}\n\n[part=base] {\n  -webkit-padding-start: 0.25rem;\n          padding-inline-start: 0.25rem;\n  -webkit-padding-end: 0.25rem;\n          padding-inline-end: 0.25rem;\n}\n\n::slotted(*) {\n  font-family: var(--ig-h5-font-family, var(--ig-font-family));\n  font-size: var(--ig-h5-font-size);\n  font-weight: var(--ig-h5-font-weight);\n  font-style: var(--ig-h5-font-style);\n  line-height: var(--ig-h5-line-height);\n  letter-spacing: var(--ig-h5-letter-spacing);\n  text-transform: var(--ig-h5-text-transform);\n  margin-top: var(--ig-h5-margin-top);\n  margin-bottom: var(--ig-h5-margin-bottom);\n  line-height: normal;\n  margin: 0;\n}`;\n"]}

package/components/navbar/themes/light/navbar.fluent.css.js

@@ -1,37 +1,5 @@
 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;
-  scrollbar-width: var(--ig-scrollbar-size);
-  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
-}
-:host *,
-:host *::before,
-:host *::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-:host ::-webkit-scrollbar {
-  width: var(--ig-scrollbar-size);
-  height: var(--ig-scrollbar-size);
-  background: var(--ig-scrollbar-track-background);
-}
-:host ::-webkit-scrollbar-thumb {
-  background: var(--ig-scrollbar-thumb-background);
-}
-
-:host([hidden]),
-[hidden] {
-  display: none !important;
-}
-:host {
   --elevation: var(--ig-navbar-elevation, var(--ig-elevation-4));
   --background: var(--ig-navbar-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
   --text-color: var(--ig-navbar-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));

package/components/navbar/themes/light/navbar.fluent.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/navbar/themes/light/navbar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgEvB,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-navbar-elevation, var(--ig-elevation-4));\n  --background: var(--ig-navbar-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --text-color: var(--ig-navbar-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --idle-icon-color: var(--ig-navbar-idle-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --hover-icon-color: var(--ig-navbar-hover-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  background: var(--background);\n  color: var(--text-color);\n  -webkit-box-shadow: var(--ig-elevation-4);\n          box-shadow: var(--ig-elevation-4);\n}\n\n::slotted(igc-icon) {\n  color: var(--idle-icon-color);\n}\n\n::slotted(igc-icon:hover) {\n  color: var(--hover-icon-color);\n}\n\n::slotted(*) {\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  line-height: normal;\n  margin: 0;\n}`;\n"]}
+{"version":3,"file":"navbar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/navbar/themes/light/navbar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-navbar-elevation, var(--ig-elevation-4));\n  --background: var(--ig-navbar-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --text-color: var(--ig-navbar-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --idle-icon-color: var(--ig-navbar-idle-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --hover-icon-color: var(--ig-navbar-hover-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  background: var(--background);\n  color: var(--text-color);\n  -webkit-box-shadow: var(--ig-elevation-4);\n          box-shadow: var(--ig-elevation-4);\n}\n\n::slotted(igc-icon) {\n  color: var(--idle-icon-color);\n}\n\n::slotted(igc-icon:hover) {\n  color: var(--hover-icon-color);\n}\n\n::slotted(*) {\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  line-height: normal;\n  margin: 0;\n}`;\n"]}

package/components/navbar/themes/light/navbar.indigo.css.js

@@ -1,37 +1,5 @@
 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;
-  scrollbar-width: var(--ig-scrollbar-size);
-  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
-}
-:host *,
-:host *::before,
-:host *::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-:host ::-webkit-scrollbar {
-  width: var(--ig-scrollbar-size);
-  height: var(--ig-scrollbar-size);
-  background: var(--ig-scrollbar-track-background);
-}
-:host ::-webkit-scrollbar-thumb {
-  background: var(--ig-scrollbar-thumb-background);
-}
-
-:host([hidden]),
-[hidden] {
-  display: none !important;
-}
-:host {
   --elevation: var(--ig-navbar-elevation, var(--ig-elevation-0));
   --background: var(--ig-navbar-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
   --text-color: var(--ig-navbar-text-color, var(--ig-primary-500-contrast));

package/components/navbar/themes/light/navbar.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/navbar/themes/light/navbar.indigo.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: 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-navbar-elevation, var(--ig-elevation-0));\n  --background: var(--ig-navbar-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --text-color: var(--ig-navbar-text-color, var(--ig-primary-500-contrast));\n  --idle-icon-color: var(--ig-navbar-idle-icon-color, var(--ig-primary-500-contrast));\n  --hover-icon-color: var(--ig-navbar-hover-icon-color, var(--ig-primary-500-contrast));\n  background: var(--background);\n  color: var(--text-color);\n  -webkit-box-shadow: var(--ig-elevation-0);\n          box-shadow: var(--ig-elevation-0);\n}\n\n::slotted(igc-icon) {\n  color: var(--idle-icon-color);\n}\n\n::slotted(igc-icon:hover) {\n  color: var(--hover-icon-color);\n}`;\n"]}
+{"version":3,"file":"navbar.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/navbar/themes/light/navbar.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;EAkBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-navbar-elevation, var(--ig-elevation-0));\n  --background: var(--ig-navbar-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --text-color: var(--ig-navbar-text-color, var(--ig-primary-500-contrast));\n  --idle-icon-color: var(--ig-navbar-idle-icon-color, var(--ig-primary-500-contrast));\n  --hover-icon-color: var(--ig-navbar-hover-icon-color, var(--ig-primary-500-contrast));\n  background: var(--background);\n  color: var(--text-color);\n  -webkit-box-shadow: var(--ig-elevation-0);\n          box-shadow: var(--ig-elevation-0);\n}\n\n::slotted(igc-icon) {\n  color: var(--idle-icon-color);\n}\n\n::slotted(igc-icon:hover) {\n  color: var(--hover-icon-color);\n}`;\n"]}

package/components/navbar/themes/light/navbar.material.css.js

@@ -1,37 +1,5 @@
 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;
-  scrollbar-width: var(--ig-scrollbar-size);
-  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
-}
-:host *,
-:host *::before,
-:host *::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-:host ::-webkit-scrollbar {
-  width: var(--ig-scrollbar-size);
-  height: var(--ig-scrollbar-size);
-  background: var(--ig-scrollbar-track-background);
-}
-:host ::-webkit-scrollbar-thumb {
-  background: var(--ig-scrollbar-thumb-background);
-}
-
-:host([hidden]),
-[hidden] {
-  display: none !important;
-}
-:host {
   --elevation: var(--ig-navbar-elevation, var(--ig-elevation-4));
   --background: var(--ig-navbar-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
   --text-color: var(--ig-navbar-text-color, var(--ig-primary-500-contrast));

package/components/navbar/themes/light/navbar.material.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.material.css.js","sourceRoot":"","sources":["../../../../../src/components/navbar/themes/light/navbar.material.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: 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-navbar-elevation, var(--ig-elevation-4));\n  --background: var(--ig-navbar-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --text-color: var(--ig-navbar-text-color, var(--ig-primary-500-contrast));\n  --idle-icon-color: var(--ig-navbar-idle-icon-color, var(--ig-primary-500-contrast));\n  --hover-icon-color: var(--ig-navbar-hover-icon-color, var(--ig-primary-500-contrast));\n  background: var(--background);\n  color: var(--text-color);\n  -webkit-box-shadow: var(--ig-elevation-4);\n          box-shadow: var(--ig-elevation-4);\n}\n\n::slotted(igc-icon) {\n  color: var(--idle-icon-color);\n}\n\n::slotted(igc-icon:hover) {\n  color: var(--hover-icon-color);\n}`;\n"]}
+{"version":3,"file":"navbar.material.css.js","sourceRoot":"","sources":["../../../../../src/components/navbar/themes/light/navbar.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;EAkBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --elevation: var(--ig-navbar-elevation, var(--ig-elevation-4));\n  --background: var(--ig-navbar-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --text-color: var(--ig-navbar-text-color, var(--ig-primary-500-contrast));\n  --idle-icon-color: var(--ig-navbar-idle-icon-color, var(--ig-primary-500-contrast));\n  --hover-icon-color: var(--ig-navbar-hover-icon-color, var(--ig-primary-500-contrast));\n  background: var(--background);\n  color: var(--text-color);\n  -webkit-box-shadow: var(--ig-elevation-4);\n          box-shadow: var(--ig-elevation-4);\n}\n\n::slotted(igc-icon) {\n  color: var(--idle-icon-color);\n}\n\n::slotted(igc-icon:hover) {\n  color: var(--hover-icon-color);\n}`;\n"]}