igniteui-webcomponents 4.4.0 → 4.5.0-beta.1

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

@@ -51,7 +51,6 @@ export const styles = css `:host {
   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, 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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}

@@ -14,17 +14,48 @@ 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(--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/navbar.base.css.js

@@ -42,8 +42,12 @@ export const styles = css `:host {
   font-family: var(--ig-font-family);
   z-index: 4;
 }
+:host ::slotted(igc-icon) {
+  --ig-size: 3;
+}
 
 [part=base] {
+  --ig-size: 1;
   display: inherit;
   position: relative;
   -webkit-box-orient: horizontal;
@@ -108,18 +112,8 @@ export const styles = css `:host {
           margin-inline-end: 0.0625rem;
 }
 
-::slotted(igc-avatar[part=base]) {
-  max-width: 2rem;
-  max-height: 2rem;
-  min-height: 0;
-  min-width: 0;
-}
-
 ::slotted(igc-icon) {
   cursor: pointer;
-  width: 2rem;
-  height: 2rem;
-  font-size: 2rem;
   -webkit-transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

package/components/navbar/themes/navbar.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.base.css.js","sourceRoot":"","sources":["../../../../src/components/navbar/themes/navbar.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyIvB,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  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  min-height: 3.5rem;\n  max-height: 8rem;\n  padding: 0 1rem;\n  font-family: var(--ig-font-family);\n  z-index: 4;\n}\n\n[part=base] {\n  display: inherit;\n  position: relative;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-flow: row nowrap;\n          flex-flow: row nowrap;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n\n[part=middle] {\n  display: -webkit-inline-box;\n  -webkit-line-clamp: 4;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  -webkit-user-select: text;\n     -moz-user-select: text;\n      -ms-user-select: text;\n          user-select: text;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  overflow: visible;\n}\n\n[part=start],\n[part=end] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  overflow: visible;\n}\n\n[name=start]::slotted(*) {\n  -webkit-margin-end: 1rem;\n          margin-inline-end: 1rem;\n  -webkit-margin-start: 0.0625rem;\n          margin-inline-start: 0.0625rem;\n}\n\n[name=end]::slotted(*) {\n  -webkit-margin-start: 1rem;\n          margin-inline-start: 1rem;\n  -webkit-margin-end: 0.0625rem;\n          margin-inline-end: 0.0625rem;\n}\n\n::slotted(igc-avatar[part=base]) {\n  max-width: 2rem;\n  max-height: 2rem;\n  min-height: 0;\n  min-width: 0;\n}\n\n::slotted(igc-icon) {\n  cursor: pointer;\n  width: 2rem;\n  height: 2rem;\n  font-size: 2rem;\n  -webkit-transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n::slotted(*) {\n  font-family: var(--ig-h6-font-family, var(--ig-font-family));\n  font-size: var(--ig-h6-font-size);\n  font-weight: var(--ig-h6-font-weight);\n  font-style: var(--ig-h6-font-style);\n  line-height: var(--ig-h6-line-height);\n  letter-spacing: var(--ig-h6-letter-spacing);\n  text-transform: var(--ig-h6-text-transform);\n  margin-top: var(--ig-h6-margin-top);\n  margin-bottom: var(--ig-h6-margin-bottom);\n  line-height: normal;\n  margin: 0;\n}`;\n"]}
+{"version":3,"file":"navbar.base.css.js","sourceRoot":"","sources":["../../../../src/components/navbar/themes/navbar.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmIvB,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  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  min-height: 3.5rem;\n  max-height: 8rem;\n  padding: 0 1rem;\n  font-family: var(--ig-font-family);\n  z-index: 4;\n}\n:host ::slotted(igc-icon) {\n  --ig-size: 3;\n}\n\n[part=base] {\n  --ig-size: 1;\n  display: inherit;\n  position: relative;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n      -ms-flex-flow: row nowrap;\n          flex-flow: row nowrap;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n}\n\n[part=middle] {\n  display: -webkit-inline-box;\n  -webkit-line-clamp: 4;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  -webkit-user-select: text;\n     -moz-user-select: text;\n      -ms-user-select: text;\n          user-select: text;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  overflow: visible;\n}\n\n[part=start],\n[part=end] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  overflow: visible;\n}\n\n[name=start]::slotted(*) {\n  -webkit-margin-end: 1rem;\n          margin-inline-end: 1rem;\n  -webkit-margin-start: 0.0625rem;\n          margin-inline-start: 0.0625rem;\n}\n\n[name=end]::slotted(*) {\n  -webkit-margin-start: 1rem;\n          margin-inline-start: 1rem;\n  -webkit-margin-end: 0.0625rem;\n          margin-inline-end: 0.0625rem;\n}\n\n::slotted(igc-icon) {\n  cursor: pointer;\n  -webkit-transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  transition: color 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n::slotted(*) {\n  font-family: var(--ig-h6-font-family, var(--ig-font-family));\n  font-size: var(--ig-h6-font-size);\n  font-weight: var(--ig-h6-font-weight);\n  font-style: var(--ig-h6-font-style);\n  line-height: var(--ig-h6-line-height);\n  letter-spacing: var(--ig-h6-letter-spacing);\n  text-transform: var(--ig-h6-text-transform);\n  margin-top: var(--ig-h6-margin-top);\n  margin-bottom: var(--ig-h6-margin-bottom);\n  line-height: normal;\n  margin: 0;\n}`;\n"]}

package/components/rating/rating.base.css.js

@@ -48,18 +48,6 @@ export const styles = css `:host {
   gap: 0.25rem;
 }
 
-:host([size=large]) {
-  --component-size: var(--ig-size, var(--ig-size-large));
-}
-
-:host([size=medium]) {
-  --component-size: var(--ig-size, var(--ig-size-medium));
-}
-
-:host([size=small]) {
-  --component-size: var(--ig-size, var(--ig-size-small));
-}
-
 [part=base] {
   position: relative;
   display: -webkit-box;

package/components/rating/rating.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.base.css.js","sourceRoot":"","sources":["../../../src/components/rating/rating.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmJvB,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  --symbol-full-color: hsla(var(--ig-warn-500), var(--ig-warn-a));\n  --symbol-empty-color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  font-family: var(--ig-font-family);\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  gap: 0.25rem;\n}\n\n:host([size=large]) {\n  --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host([size=medium]) {\n  --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=small]) {\n  --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n[part=base] {\n  position: relative;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  gap: 0.25rem;\n}\n\n[part~=symbols] {\n  position: relative;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  padding: 0.125rem;\n  gap: 0.125rem;\n  inset-inline-start: 0;\n}\n\n[part~=value-label] {\n  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-1-font-size);\n  font-weight: var(--ig-subtitle-1-font-weight);\n  font-style: var(--ig-subtitle-1-font-style);\n  line-height: var(--ig-subtitle-1-line-height);\n  letter-spacing: var(--ig-subtitle-1-letter-spacing);\n  text-transform: var(--ig-subtitle-1-text-transform);\n  margin-top: var(--ig-subtitle-1-margin-top);\n  margin-bottom: var(--ig-subtitle-1-margin-bottom);\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n[part~=label] {\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n  -webkit-padding-start: 0.25rem;\n          padding-inline-start: 0.25rem;\n  height: auto;\n  width: auto;\n  min-height: 0;\n  min-width: 0;\n  margin: 0;\n}\n\n:host(:not(:disabled, [disabled], [readonly])) [part~=symbols] {\n  cursor: pointer;\n}\n\n:host([disabled]),\n:host(:disabled) {\n  --symbol-full-color: hsla(var(--ig-warn-200), var(--ig-warn-a));\n  --symbol-empty-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n  --symbol-full-filter: grayscale(50%);\n  --symbol-empty-filter: grayscale(100%) opacity(50%);\n}\n:host([disabled]) [part~=value-label],\n:host([disabled]) [part~=label],\n:host(:disabled) [part~=value-label],\n:host(:disabled) [part~=label] {\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host([disabled]) [part~=symbols],\n:host(:disabled) [part~=symbols] {\n  cursor: initial;\n}`;\n"]}
+{"version":3,"file":"rating.base.css.js","sourceRoot":"","sources":["../../../src/components/rating/rating.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuIvB,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  --symbol-full-color: hsla(var(--ig-warn-500), var(--ig-warn-a));\n  --symbol-empty-color: hsla(var(--ig-gray-600), var(--ig-gray-a));\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  font-family: var(--ig-font-family);\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  gap: 0.25rem;\n}\n\n[part=base] {\n  position: relative;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  gap: 0.25rem;\n}\n\n[part~=symbols] {\n  position: relative;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  padding: 0.125rem;\n  gap: 0.125rem;\n  inset-inline-start: 0;\n}\n\n[part~=value-label] {\n  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-1-font-size);\n  font-weight: var(--ig-subtitle-1-font-weight);\n  font-style: var(--ig-subtitle-1-font-style);\n  line-height: var(--ig-subtitle-1-line-height);\n  letter-spacing: var(--ig-subtitle-1-letter-spacing);\n  text-transform: var(--ig-subtitle-1-text-transform);\n  margin-top: var(--ig-subtitle-1-margin-top);\n  margin-bottom: var(--ig-subtitle-1-margin-bottom);\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n[part~=label] {\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n  -webkit-padding-start: 0.25rem;\n          padding-inline-start: 0.25rem;\n  height: auto;\n  width: auto;\n  min-height: 0;\n  min-width: 0;\n  margin: 0;\n}\n\n:host(:not(:disabled, [disabled], [readonly])) [part~=symbols] {\n  cursor: pointer;\n}\n\n:host([disabled]),\n:host(:disabled) {\n  --symbol-full-color: hsla(var(--ig-warn-200), var(--ig-warn-a));\n  --symbol-empty-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n  --symbol-full-filter: grayscale(50%);\n  --symbol-empty-filter: grayscale(100%) opacity(50%);\n}\n:host([disabled]) [part~=value-label],\n:host([disabled]) [part~=label],\n:host(:disabled) [part~=value-label],\n:host(:disabled) [part~=label] {\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host([disabled]) [part~=symbols],\n:host(:disabled) [part~=symbols] {\n  cursor: initial;\n}`;\n"]}

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

@@ -46,18 +46,6 @@ export const styles = css `:host {
   z-index: 10005;
 }
 
-:host([size=small]) {
-  --component-size: var(--ig-size, var(--ig-size-small));
-}
-
-:host([size=medium]) {
-  --component-size: var(--ig-size, var(--ig-size-medium));
-}
-
-:host([size=large]) {
-  --component-size: var(--ig-size, var(--ig-size-large));
-}
-
 :host {
   display: block;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"select.base.css.js","sourceRoot":"","sources":["../../../../../src/components/select/themes/light/select.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0GvB,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\n:host {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  font-family: var(--ig-font-family);\n}\n\n[part=base] {\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-width: 7rem;\n  z-index: 10005;\n}\n\n:host([size=small]) {\n  --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n:host([size=medium]) {\n  --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=large]) {\n  --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host {\n  display: block;\n}\n\n[role=combobox] {\n  outline-style: none;\n}\n\n:host([disabled]) [role=combobox] {\n  pointer-events: none;\n}\n\nigc-input {\n  cursor: pointer;\n}\n\nigc-input::part(input) {\n  cursor: pointer;\n}\nigc-input::part(input)::-moz-selection {\n  background: transparent;\n}\nigc-input::part(input)::selection {\n  background: transparent;\n}\n\n[part=helper-text] {\n  line-height: 1;\n}\n[part=helper-text] ::slotted([slot=helper-text]) {\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n  line-height: inherit;\n}\n\n[name=prefix]::slotted(*),\n[name=suffix]::slotted(*) {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n}`;\n"]}
+{"version":3,"file":"select.base.css.js","sourceRoot":"","sources":["../../../../../src/components/select/themes/light/select.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8FvB,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\n:host {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  font-family: var(--ig-font-family);\n}\n\n[part=base] {\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-width: 7rem;\n  z-index: 10005;\n}\n\n:host {\n  display: block;\n}\n\n[role=combobox] {\n  outline-style: none;\n}\n\n:host([disabled]) [role=combobox] {\n  pointer-events: none;\n}\n\nigc-input {\n  cursor: pointer;\n}\n\nigc-input::part(input) {\n  cursor: pointer;\n}\nigc-input::part(input)::-moz-selection {\n  background: transparent;\n}\nigc-input::part(input)::selection {\n  background: transparent;\n}\n\n[part=helper-text] {\n  line-height: 1;\n}\n[part=helper-text] ::slotted([slot=helper-text]) {\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n  line-height: inherit;\n}\n\n[name=prefix]::slotted(*),\n[name=suffix]::slotted(*) {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n}`;\n"]}

package/components/tabs/themes/light/tab.base.css.js

@@ -82,6 +82,9 @@ export const styles = css `:host {
   color: hsla(var(--ig-gray-700), var(--ig-gray-a));
   border-radius: var(--border-radius);
 }
+:host ::slotted(igc-icon) {
+  --ig-size: 3;
+}
 
 :host(:hover),
 :host(:focus-within) {
@@ -153,9 +156,5 @@ export const styles = css `:host {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
-}
-
-::slotted(igc-icon) {
-  --size: 1.5rem;
 }`;
 //# sourceMappingURL=tab.base.css.js.map

package/components/tabs/themes/light/tab.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.base.css.js","sourceRoot":"","sources":["../../../../../src/components/tabs/themes/light/tab.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8JvB,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  --item-text-color: var(--ig-tabs-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-background: var(--ig-tabs-item-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --item-hover-background: var(--ig-tabs-item-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-hover-color: var(--ig-tabs-item-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-color: var(--ig-tabs-item-active-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-icon-color: var(--ig-tabs-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-tabs-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-hover-icon-color: var(--ig-tabs-item-hover-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-disabled-icon-color: var(--ig-tabs-item-disabled-icon-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --item-active-background: var(--ig-tabs-item-active-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-disabled-color: var(--ig-tabs-item-disabled-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --indicator-color: var(--ig-tabs-indicator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --button-color: var(--ig-tabs-button-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --button-background: var(--ig-tabs-button-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --button-hover-background: var(--ig-tabs-button-hover-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --button-hover-color: var(--ig-tabs-button-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --button-disabled-color: var(--ig-tabs-button-disabled-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --tab-ripple-color: var(--ig-tabs-tab-ripple-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --button-ripple-color: var(--ig-tabs-button-ripple-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --border-color: var(--ig-tabs-border-color, transparent);\n  --border-color--hover: var(--ig-tabs-border-color--hover, transparent);\n  --border-radius: var(--ig-tabs-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 0.375rem), 0.375rem));\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  min-width: 5.625rem;\n  max-width: 22.5rem;\n  word-wrap: break-word;\n  padding: 0.75rem 1rem;\n  overflow: hidden;\n  cursor: pointer;\n  position: relative;\n  -webkit-transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);\n  transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n  border-radius: var(--border-radius);\n}\n\n:host(:hover),\n:host(:focus-within) {\n  background: var(--hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host([selected]) {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host([selected]) ::slotted(igc-icon) {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([selected]:hover),\n:host([selected]:focus-within) {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  cursor: initial;\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n[part=base] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: justify;\n      -ms-flex-pack: justify;\n          justify-content: space-between;\n  outline-style: none;\n  gap: 0.5rem;\n}\n\n[part=content] {\n  font-family: var(--ig-button-font-family, var(--ig-font-family));\n  font-size: var(--ig-button-font-size);\n  font-weight: var(--ig-button-font-weight);\n  font-style: var(--ig-button-font-style);\n  line-height: var(--ig-button-line-height);\n  letter-spacing: var(--ig-button-letter-spacing);\n  text-transform: var(--ig-button-text-transform);\n  margin-top: var(--ig-button-margin-top);\n  margin-bottom: var(--ig-button-margin-bottom);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  text-align: center;\n  outline-style: none;\n  gap: 0.5rem;\n}\n[part=content] ::slotted(*) {\n  display: -webkit-inline-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n::slotted(igc-icon) {\n  --size: 1.5rem;\n}`;\n"]}
+{"version":3,"file":"tab.base.css.js","sourceRoot":"","sources":["../../../../../src/components/tabs/themes/light/tab.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6JvB,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  --item-text-color: var(--ig-tabs-item-text-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-background: var(--ig-tabs-item-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --item-hover-background: var(--ig-tabs-item-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-hover-color: var(--ig-tabs-item-hover-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-color: var(--ig-tabs-item-active-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-icon-color: var(--ig-tabs-item-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-active-icon-color: var(--ig-tabs-item-active-icon-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --item-hover-icon-color: var(--ig-tabs-item-hover-icon-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --item-disabled-icon-color: var(--ig-tabs-item-disabled-icon-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --item-active-background: var(--ig-tabs-item-active-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  --item-disabled-color: var(--ig-tabs-item-disabled-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --indicator-color: var(--ig-tabs-indicator-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --button-color: var(--ig-tabs-button-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --button-background: var(--ig-tabs-button-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --button-hover-background: var(--ig-tabs-button-hover-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --button-hover-color: var(--ig-tabs-button-hover-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --button-disabled-color: var(--ig-tabs-button-disabled-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --tab-ripple-color: var(--ig-tabs-tab-ripple-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --button-ripple-color: var(--ig-tabs-button-ripple-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --border-color: var(--ig-tabs-border-color, transparent);\n  --border-color--hover: var(--ig-tabs-border-color--hover, transparent);\n  --border-radius: var(--ig-tabs-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 0.375rem), 0.375rem));\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  min-width: 5.625rem;\n  max-width: 22.5rem;\n  word-wrap: break-word;\n  padding: 0.75rem 1rem;\n  overflow: hidden;\n  cursor: pointer;\n  position: relative;\n  -webkit-transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);\n  transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n  border-radius: var(--border-radius);\n}\n:host ::slotted(igc-icon) {\n  --ig-size: 3;\n}\n\n:host(:hover),\n:host(:focus-within) {\n  background: var(--hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host([selected]) {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n:host([selected]) ::slotted(igc-icon) {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([selected]:hover),\n:host([selected]:focus-within) {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  cursor: initial;\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n[part=base] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: justify;\n      -ms-flex-pack: justify;\n          justify-content: space-between;\n  outline-style: none;\n  gap: 0.5rem;\n}\n\n[part=content] {\n  font-family: var(--ig-button-font-family, var(--ig-font-family));\n  font-size: var(--ig-button-font-size);\n  font-weight: var(--ig-button-font-weight);\n  font-style: var(--ig-button-font-style);\n  line-height: var(--ig-button-line-height);\n  letter-spacing: var(--ig-button-letter-spacing);\n  text-transform: var(--ig-button-text-transform);\n  margin-top: var(--ig-button-margin-top);\n  margin-bottom: var(--ig-button-margin-bottom);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  text-align: center;\n  outline-style: none;\n  gap: 0.5rem;\n}\n[part=content] ::slotted(*) {\n  display: -webkit-inline-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}`;\n"]}

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

@@ -153,6 +153,7 @@ export const styles = css `:host {
   padding: 0;
   min-width: 3rem;
   width: 3rem;
+  height: inherit;
   cursor: pointer;
   position: relative;
   background: hsla(var(--ig-surface-500), var(--ig-surface-a));

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.base.css.js","sourceRoot":"","sources":["../../../../../src/components/tabs/themes/light/tabs.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4LvB,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  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  overflow: hidden;\n}\n\n:host([alignment=start]) [part=headers-scroll] ::slotted(igc-tab:last-of-type) {\n  -webkit-margin-end: auto;\n          margin-inline-end: auto;\n}\n\n:host([alignment=end]) [part=headers-scroll] ::slotted(igc-tab:first-of-type) {\n  -webkit-margin-start: auto;\n          margin-inline-start: auto;\n}\n\n:host([alignment=center]) [part=headers-scroll] ::slotted(igc-tab:first-of-type) {\n  -webkit-margin-start: auto;\n          margin-inline-start: auto;\n}\n:host([alignment=center]) [part=headers-scroll] ::slotted(igc-tab:last-of-type) {\n  -webkit-margin-end: auto;\n          margin-inline-end: auto;\n}\n\n:host([alignment=justify]) [part=headers-scroll] ::slotted(igc-tab) {\n  -ms-flex-preferred-size: 100px;\n      flex-basis: 100px;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n  max-width: 100%;\n}\n\n[part=headers] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  overflow: hidden;\n  min-height: 2.625rem;\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  -webkit-box-flex: 0;\n      -ms-flex: none;\n          flex: none;\n}\n\n[part=headers-content] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-flex: 1;\n      -ms-flex: 1 1 auto;\n          flex: 1 1 auto;\n  scroll-behavior: smooth;\n  overflow: hidden;\n}\n\n[part=headers-wrapper] {\n  position: relative;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n}\n\n[part=headers-scroll] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  height: 100%;\n}\n\n[part=content] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n  overflow: hidden;\n}\n\n[part=selected-indicator] {\n  position: absolute;\n  inset-inline-start: 0;\n  bottom: 0;\n  -webkit-transform: translateX(0);\n      -ms-transform: translateX(0);\n          transform: translateX(0);\n  height: 0.125rem;\n  min-width: 5.625rem;\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  -webkit-transition: width 0.2s cubic-bezier(0.35, 0, 0.25, 1), -webkit-transform 0.3s cubic-bezier(0.35, 0, 0.25, 1);\n  transition: width 0.2s cubic-bezier(0.35, 0, 0.25, 1), -webkit-transform 0.3s cubic-bezier(0.35, 0, 0.25, 1);\n  transition: transform 0.3s cubic-bezier(0.35, 0, 0.25, 1), width 0.2s cubic-bezier(0.35, 0, 0.25, 1);\n  transition: transform 0.3s cubic-bezier(0.35, 0, 0.25, 1), width 0.2s cubic-bezier(0.35, 0, 0.25, 1), -webkit-transform 0.3s cubic-bezier(0.35, 0, 0.25, 1);\n}\n\n[part=start-scroll-button],\n[part=end-scroll-button] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  z-index: 1;\n  border: none;\n  padding: 0;\n  min-width: 3rem;\n  width: 3rem;\n  cursor: pointer;\n  position: relative;\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n}\n[part=start-scroll-button]:hover, [part=start-scroll-button]:focus,\n[part=end-scroll-button]:hover,\n[part=end-scroll-button]:focus {\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n[part=start-scroll-button] ::slotted(*),\n[part=end-scroll-button] ::slotted(*) {\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n\nigc-icon-button::part(base) {\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\nigc-icon-button::part(base):hover, igc-icon-button::part(base):focus-within {\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  background: transparent;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n\nigc-icon-button[disabled]::part(base) {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n:host([dir=rtl]) [part=start-scroll-button],\n:host([dir=rtl]) [part=end-scroll-button] {\n  -webkit-transform: scaleX(-1);\n      -ms-transform: scaleX(-1);\n          transform: scaleX(-1);\n}`;\n"]}
+{"version":3,"file":"tabs.base.css.js","sourceRoot":"","sources":["../../../../../src/components/tabs/themes/light/tabs.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6LvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --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  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  overflow: hidden;\n}\n\n:host([alignment=start]) [part=headers-scroll] ::slotted(igc-tab:last-of-type) {\n  -webkit-margin-end: auto;\n          margin-inline-end: auto;\n}\n\n:host([alignment=end]) [part=headers-scroll] ::slotted(igc-tab:first-of-type) {\n  -webkit-margin-start: auto;\n          margin-inline-start: auto;\n}\n\n:host([alignment=center]) [part=headers-scroll] ::slotted(igc-tab:first-of-type) {\n  -webkit-margin-start: auto;\n          margin-inline-start: auto;\n}\n:host([alignment=center]) [part=headers-scroll] ::slotted(igc-tab:last-of-type) {\n  -webkit-margin-end: auto;\n          margin-inline-end: auto;\n}\n\n:host([alignment=justify]) [part=headers-scroll] ::slotted(igc-tab) {\n  -ms-flex-preferred-size: 100px;\n      flex-basis: 100px;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n  max-width: 100%;\n}\n\n[part=headers] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  overflow: hidden;\n  min-height: 2.625rem;\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  -webkit-box-flex: 0;\n      -ms-flex: none;\n          flex: none;\n}\n\n[part=headers-content] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-flex: 1;\n      -ms-flex: 1 1 auto;\n          flex: 1 1 auto;\n  scroll-behavior: smooth;\n  overflow: hidden;\n}\n\n[part=headers-wrapper] {\n  position: relative;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n}\n\n[part=headers-scroll] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  height: 100%;\n}\n\n[part=content] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n  overflow: hidden;\n}\n\n[part=selected-indicator] {\n  position: absolute;\n  inset-inline-start: 0;\n  bottom: 0;\n  -webkit-transform: translateX(0);\n      -ms-transform: translateX(0);\n          transform: translateX(0);\n  height: 0.125rem;\n  min-width: 5.625rem;\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  -webkit-transition: width 0.2s cubic-bezier(0.35, 0, 0.25, 1), -webkit-transform 0.3s cubic-bezier(0.35, 0, 0.25, 1);\n  transition: width 0.2s cubic-bezier(0.35, 0, 0.25, 1), -webkit-transform 0.3s cubic-bezier(0.35, 0, 0.25, 1);\n  transition: transform 0.3s cubic-bezier(0.35, 0, 0.25, 1), width 0.2s cubic-bezier(0.35, 0, 0.25, 1);\n  transition: transform 0.3s cubic-bezier(0.35, 0, 0.25, 1), width 0.2s cubic-bezier(0.35, 0, 0.25, 1), -webkit-transform 0.3s cubic-bezier(0.35, 0, 0.25, 1);\n}\n\n[part=start-scroll-button],\n[part=end-scroll-button] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  z-index: 1;\n  border: none;\n  padding: 0;\n  min-width: 3rem;\n  width: 3rem;\n  height: inherit;\n  cursor: pointer;\n  position: relative;\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n}\n[part=start-scroll-button]:hover, [part=start-scroll-button]:focus,\n[part=end-scroll-button]:hover,\n[part=end-scroll-button]:focus {\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n}\n[part=start-scroll-button] ::slotted(*),\n[part=end-scroll-button] ::slotted(*) {\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n\nigc-icon-button::part(base) {\n  color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\nigc-icon-button::part(base):hover, igc-icon-button::part(base):focus-within {\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  background: transparent;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n}\n\nigc-icon-button[disabled]::part(base) {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n:host([dir=rtl]) [part=start-scroll-button],\n:host([dir=rtl]) [part=end-scroll-button] {\n  -webkit-transform: scaleX(-1);\n      -ms-transform: scaleX(-1);\n          transform: scaleX(-1);\n}`;\n"]}