npm - igniteui-webcomponents - Versions diffs - 4.0.0-alpha.2 → 4.0.0 - Mend

igniteui-webcomponents 4.0.0-alpha.2 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (240) hide show

package/components/calendar/themes/fluent/calendar.fluent.css.js CHANGED Viewed

@@ -1,6 +1,40 @@
 import { css } from 'lit';
 export const styles = css `/* stylelint-disable max-line-length */
+: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);
+}
+[hidden] {
+  display: none !important;
+}
 :host(igc-calendar) {
+  --size: max(var(--is-large, 1) * 2rem, var(--is-medium, 1) * 1.75rem, var(--is-small, 1) * 1.5rem);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -15,107 +49,50 @@ export const styles = css `/* stylelint-disable max-line-length */
 :host(igc-calendar) > * {
   font-family: var(--ig-font-family);
 }
-:host(igc-calendar[size=large]) igc-days-view::part(date),
-:host(igc-calendar[size=large]) igc-days-view::part(week-number),
-:host(igc-calendar[size=large]) igc-days-view::part(label),
-:host(igc-calendar[size=large]) igc-days-view::part(days-row) {
-  height: 2rem;
-}
-:host(igc-calendar[size=large]) igc-days-view::part(week-number-inner),
-:host(igc-calendar[size=large]) igc-days-view::part(date-inner) {
-  width: calc(2rem - 0.125rem);
-  min-width: calc(2rem - 0.125rem);
-  height: 100%;
-}
-:host(igc-calendar[size=large]) igc-days-view::part(label) {
-  min-width: 2rem;
-  height: 2rem;
-}
-:host(igc-calendar[size=large]) igc-days-view::part(date-inner) {
-  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1.125rem), 1.125rem);
-}
-:host(igc-calendar[size=large]) igc-months-view {
-  grid-template-rows: repeat(4, minmax(2rem, 1fr));
+:host(igc-calendar) igc-days-view::part(date),
+:host(igc-calendar) igc-days-view::part(week-number),
+:host(igc-calendar) igc-days-view::part(label),
+:host(igc-calendar) igc-days-view::part(days-row) {
+  height: var(--size);
 }
-:host(igc-calendar[size=large]) igc-months-view::part(month-inner) {
-  height: 2rem;
-  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1.125rem), 1.125rem);
-}
-:host(igc-calendar[size=large]) igc-years-view {
-  grid-template-rows: repeat(5, minmax(2rem, 1fr));
-}
-:host(igc-calendar[size=large]) igc-years-view::part(year-inner) {
-  height: 2rem;
-  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1.125rem), 1.125rem);
-}
-:host(igc-calendar[size=medium]) igc-days-view::part(date),
-:host(igc-calendar[size=medium]) igc-days-view::part(week-number),
-:host(igc-calendar[size=medium]) igc-days-view::part(label),
-:host(igc-calendar[size=medium]) igc-days-view::part(days-row) {
-  height: 1.75rem;
-}
-:host(igc-calendar[size=medium]) igc-days-view::part(week-number-inner),
-:host(igc-calendar[size=medium]) igc-days-view::part(date-inner) {
-  width: calc(1.75rem - 0.125rem);
-  min-width: calc(1.75rem - 0.125rem);
+:host(igc-calendar) igc-days-view::part(week-number-inner),
+:host(igc-calendar) igc-days-view::part(date-inner) {
+  width: calc(var(--size) - 0.125rem);
+  min-width: calc(var(--size) - 0.125rem);
   height: 100%;
 }
-:host(igc-calendar[size=medium]) igc-days-view::part(label) {
-  min-width: 1.75rem;
-  height: 1.75rem;
+:host(igc-calendar) igc-days-view::part(label) {
+  min-width: var(--size);
+  height: var(--size);
 }
-:host(igc-calendar[size=medium]) igc-days-view::part(date-inner) {
-  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1rem), 1rem);
+:host(igc-calendar) igc-days-view::part(date-inner) {
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));
 }
-:host(igc-calendar[size=medium]) igc-months-view {
-  grid-template-rows: repeat(4, minmax(1.75rem, 1fr));
+:host(igc-calendar) igc-months-view {
+  grid-template-rows: repeat(4, minmax(var(--size), 1fr));
 }
-:host(igc-calendar[size=medium]) igc-months-view::part(month-inner) {
-  height: 1.75rem;
-  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1rem), 1rem);
+:host(igc-calendar) igc-months-view::part(month-inner) {
+  height: var(--size);
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));
 }
-:host(igc-calendar[size=medium]) igc-years-view {
-  grid-template-rows: repeat(5, minmax(1.75rem, 1fr));
+:host(igc-calendar) igc-years-view {
+  grid-template-rows: repeat(5, minmax(var(--size), 1fr));
 }
-:host(igc-calendar[size=medium]) igc-years-view::part(year-inner) {
-  height: 1.75rem;
-  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1rem), 1rem);
+:host(igc-calendar) igc-years-view::part(year-inner) {
+  height: var(--size);
+  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));
 }
-:host(igc-calendar[size=small]) igc-days-view::part(date),
-:host(igc-calendar[size=small]) igc-days-view::part(week-number),
-:host(igc-calendar[size=small]) igc-days-view::part(label),
-:host(igc-calendar[size=small]) igc-days-view::part(days-row) {
-  height: 1.5rem;
-}
-:host(igc-calendar[size=small]) igc-days-view::part(week-number-inner),
-:host(igc-calendar[size=small]) igc-days-view::part(date-inner) {
-  width: calc(1.5rem - 0.125rem);
-  min-width: calc(1.5rem - 0.125rem);
-  height: 100%;
-}
-:host(igc-calendar[size=small]) igc-days-view::part(label) {
-  min-width: 1.5rem;
-  height: 1.5rem;
+:host(igc-calendar[size=large]) {
+  --component-size: var(--ig-size, var(--ig-size-large));
 }
-:host(igc-calendar[size=small]) igc-days-view::part(date-inner) {
-  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.875rem), 0.875rem);
-}
-:host(igc-calendar[size=small]) igc-months-view {
-  grid-template-rows: repeat(4, minmax(1.5rem, 1fr));
-}
-:host(igc-calendar[size=small]) igc-months-view::part(month-inner) {
-  height: 1.5rem;
-  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.875rem), 0.875rem);
-}
-:host(igc-calendar[size=small]) igc-years-view {
-  grid-template-rows: repeat(6, minmax(1.5rem, 1fr));
+:host(igc-calendar[size=medium]) {
+  --component-size: var(--ig-size, var(--ig-size-medium));
 }
-:host(igc-calendar[size=small]) igc-years-view::part(year-inner) {
-  height: 1.5rem;
-  border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.875rem), 0.875rem);
+:host(igc-calendar[size=small]) {
+  --component-size: var(--ig-size, var(--ig-size-small));
 }
 [part=navigation] {

package/components/calendar/themes/fluent/calendar.fluent.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"calendar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/calendar/themes/fluent/calendar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiSvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length /\n:host(igc-calendar) {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n font-family: var(--ig-font-family);\n background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n color: var(--ig-surface-500-contrast);\n}\n:host(igc-calendar) > {\n font-family: var(--ig-font-family);\n}\n\n:host(igc-calendar[size=large]) igc-days-view::part(date),\n:host(igc-calendar[size=large]) igc-days-view::part(week-number),\n:host(igc-calendar[size=large]) igc-days-view::part(label),\n:host(igc-calendar[size=large]) igc-days-view::part(days-row) {\n height: 2rem;\n}\n:host(igc-calendar[size=large]) igc-days-view::part(week-number-inner),\n:host(igc-calendar[size=large]) igc-days-view::part(date-inner) {\n width: calc(2rem - 0.125rem);\n min-width: calc(2rem - 0.125rem);\n height: 100%;\n}\n:host(igc-calendar[size=large]) igc-days-view::part(label) {\n min-width: 2rem;\n height: 2rem;\n}\n:host(igc-calendar[size=large]) igc-days-view::part(date-inner) {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1.125rem), 1.125rem);\n}\n:host(igc-calendar[size=large]) igc-months-view {\n grid-template-rows: repeat(4, minmax(2rem, 1fr));\n}\n:host(igc-calendar[size=large]) igc-months-view::part(month-inner) {\n height: 2rem;\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1.125rem), 1.125rem);\n}\n:host(igc-calendar[size=large]) igc-years-view {\n grid-template-rows: repeat(5, minmax(2rem, 1fr));\n}\n:host(igc-calendar[size=large]) igc-years-view::part(year-inner) {\n height: 2rem;\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1.125rem), 1.125rem);\n}\n\n:host(igc-calendar[size=medium]) igc-days-view::part(date),\n:host(igc-calendar[size=medium]) igc-days-view::part(week-number),\n:host(igc-calendar[size=medium]) igc-days-view::part(label),\n:host(igc-calendar[size=medium]) igc-days-view::part(days-row) {\n height: 1.75rem;\n}\n:host(igc-calendar[size=medium]) igc-days-view::part(week-number-inner),\n:host(igc-calendar[size=medium]) igc-days-view::part(date-inner) {\n width: calc(1.75rem - 0.125rem);\n min-width: calc(1.75rem - 0.125rem);\n height: 100%;\n}\n:host(igc-calendar[size=medium]) igc-days-view::part(label) {\n min-width: 1.75rem;\n height: 1.75rem;\n}\n:host(igc-calendar[size=medium]) igc-days-view::part(date-inner) {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1rem), 1rem);\n}\n:host(igc-calendar[size=medium]) igc-months-view {\n grid-template-rows: repeat(4, minmax(1.75rem, 1fr));\n}\n:host(igc-calendar[size=medium]) igc-months-view::part(month-inner) {\n height: 1.75rem;\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1rem), 1rem);\n}\n:host(igc-calendar[size=medium]) igc-years-view {\n grid-template-rows: repeat(5, minmax(1.75rem, 1fr));\n}\n:host(igc-calendar[size=medium]) igc-years-view::part(year-inner) {\n height: 1.75rem;\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 1rem), 1rem);\n}\n\n:host(igc-calendar[size=small]) igc-days-view::part(date),\n:host(igc-calendar[size=small]) igc-days-view::part(week-number),\n:host(igc-calendar[size=small]) igc-days-view::part(label),\n:host(igc-calendar[size=small]) igc-days-view::part(days-row) {\n height: 1.5rem;\n}\n:host(igc-calendar[size=small]) igc-days-view::part(week-number-inner),\n:host(igc-calendar[size=small]) igc-days-view::part(date-inner) {\n width: calc(1.5rem - 0.125rem);\n min-width: calc(1.5rem - 0.125rem);\n height: 100%;\n}\n:host(igc-calendar[size=small]) igc-days-view::part(label) {\n min-width: 1.5rem;\n height: 1.5rem;\n}\n:host(igc-calendar[size=small]) igc-days-view::part(date-inner) {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.875rem), 0.875rem);\n}\n:host(igc-calendar[size=small]) igc-months-view {\n grid-template-rows: repeat(4, minmax(1.5rem, 1fr));\n}\n:host(igc-calendar[size=small]) igc-months-view::part(month-inner) {\n height: 1.5rem;\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.875rem), 0.875rem);\n}\n:host(igc-calendar[size=small]) igc-years-view {\n grid-template-rows: repeat(6, minmax(1.5rem, 1fr));\n}\n:host(igc-calendar[size=small]) igc-years-view::part(year-inner) {\n height: 1.5rem;\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * 0.875rem), 0.875rem);\n}\n\n[part=navigation] {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 1.25rem;\n padding: 1.5625rem 1.125rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n[part=months-navigation],\n[part=years-navigation],\n[part~=navigation-button] {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background: transparent;\n border: none;\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n font-size: 1rem;\n padding: 0;\n -webkit-transition: color 150ms ease-in-out;\n -o-transition: color 150ms ease-in-out;\n transition: color 150ms ease-in-out;\n}\n[part=months-navigation]:hover, [part=months-navigation]:focus,\n[part=years-navigation]:hover,\n[part=years-navigation]:focus,\n[part~=navigation-button]:hover,\n[part~=navigation-button]:focus {\n color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n cursor: pointer;\n}\n[part=months-navigation]:focus,\n[part=years-navigation]:focus,\n[part~=navigation-button]:focus {\n outline: none;\n}\n\n[part~=navigation-button] {\n -webkit-margin-start: 1.5rem;\n margin-inline-start: 1.5rem;\n}\n[part~=navigation-button][part~=vertical] {\n -webkit-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg);\n}\n\n[part=navigation-buttons] {\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}\n\n:host(igc-calendar[header-orientation=vertical]) {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n}\n:host(igc-calendar[header-orientation=vertical]) [part=header] {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n width: 8.75rem;\n}\n:host(igc-calendar[header-orientation=vertical]) [part=header-date] {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n[part=days-view-container] {\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n}\n\n[part=header] {\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-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 1rem;\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n color: var(--ig-secondary-600-contrast);\n}\n\n[part=header-date],\n[part=header-title] {\n margin: 0;\n}\n\n[part=header-date] {\n font-family: var(--ig-h4-font-family);\n font-size: var(--ig-h4-font-size);\n font-weight: var(--ig-h4-font-weight);\n font-style: var(--ig-h4-font-style);\n line-height: var(--ig-h4-line-height);\n letter-spacing: var(--ig-h4-letter-spacing);\n text-transform: var(--ig-h4-text-transform);\n margin-top: var(--ig-h4-margin-top);\n margin-bottom: var(--ig-h4-margin-bottom);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n white-space: pre-wrap;\n}\n\n[part=header-title] {\n font-family: var(--ig-overline-font-family);\n font-size: var(--ig-overline-font-size);\n font-weight: var(--ig-overline-font-weight);\n font-style: var(--ig-overline-font-style);\n line-height: var(--ig-overline-line-height);\n letter-spacing: var(--ig-overline-letter-spacing);\n text-transform: var(--ig-overline-text-transform);\n margin-top: var(--ig-overline-margin-top);\n margin-bottom: var(--ig-overline-margin-bottom);\n}\n\n.aria-off-screen {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n border: none;\n clip: rect(0, 0, 0, 0);\n outline: 0;\n pointer-events: none;\n overflow: hidden;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n\n:host(igc-calendar[size=large]) igc-days-view::part(date-inner),\n:host(igc-calendar[size=large]) igc-months-view::part(month-inner),\n:host(igc-calendar[size=large]) igc-years-view::part(year-inner),\n:host(igc-calendar[size=medium]) igc-days-view::part(date-inner),\n:host(igc-calendar[size=medium]) igc-months-view::part(month-inner),\n:host(igc-calendar[size=medium]) igc-years-view::part(year-inner),\n:host(igc-calendar[size=small]) igc-days-view::part(date-inner),\n:host(igc-calendar[size=small]) igc-months-view::part(month-inner),\n:host(igc-calendar[size=small]) igc-years-view::part(year-inner) {\n border-radius: 0;\n}`;\n"]}
1	+ {"version":3,"file":"calendar.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/calendar/themes/fluent/calendar.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0QvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`/* stylelint-disable max-line-length /\n:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--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[hidden] {\n display: none !important;\n}\n\n:host(igc-calendar) {\n --size: max(var(--is-large, 1) * 2rem, var(--is-medium, 1) * 1.75rem, var(--is-small, 1) * 1.5rem);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n font-family: var(--ig-font-family);\n background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n color: var(--ig-surface-500-contrast);\n}\n:host(igc-calendar) > * {\n font-family: var(--ig-font-family);\n}\n:host(igc-calendar) igc-days-view::part(date),\n:host(igc-calendar) igc-days-view::part(week-number),\n:host(igc-calendar) igc-days-view::part(label),\n:host(igc-calendar) igc-days-view::part(days-row) {\n height: var(--size);\n}\n:host(igc-calendar) igc-days-view::part(week-number-inner),\n:host(igc-calendar) igc-days-view::part(date-inner) {\n width: calc(var(--size) - 0.125rem);\n min-width: calc(var(--size) - 0.125rem);\n height: 100%;\n}\n:host(igc-calendar) igc-days-view::part(label) {\n min-width: var(--size);\n height: var(--size);\n}\n:host(igc-calendar) igc-days-view::part(date-inner) {\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));\n}\n:host(igc-calendar) igc-months-view {\n grid-template-rows: repeat(4, minmax(var(--size), 1fr));\n}\n:host(igc-calendar) igc-months-view::part(month-inner) {\n height: var(--size);\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));\n}\n:host(igc-calendar) igc-years-view {\n grid-template-rows: repeat(5, minmax(var(--size), 1fr));\n}\n:host(igc-calendar) igc-years-view::part(year-inner) {\n height: var(--size);\n border-radius: clamp(0rem, calc(var(--ig-radius-factor) * calc(calc(var(--size) / 2) + 0.125rem)), calc(calc(var(--size) / 2) + 0.125rem));\n}\n\n:host(igc-calendar[size=large]) {\n --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host(igc-calendar[size=medium]) {\n --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host(igc-calendar[size=small]) {\n --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n[part=navigation] {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 1.25rem;\n padding: 1.5625rem 1.125rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n[part=months-navigation],\n[part=years-navigation],\n[part~=navigation-button] {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n background: transparent;\n border: none;\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n font-size: 1rem;\n padding: 0;\n -webkit-transition: color 150ms ease-in-out;\n -o-transition: color 150ms ease-in-out;\n transition: color 150ms ease-in-out;\n}\n[part=months-navigation]:hover, [part=months-navigation]:focus,\n[part=years-navigation]:hover,\n[part=years-navigation]:focus,\n[part~=navigation-button]:hover,\n[part~=navigation-button]:focus {\n color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n cursor: pointer;\n}\n[part=months-navigation]:focus,\n[part=years-navigation]:focus,\n[part~=navigation-button]:focus {\n outline: none;\n}\n\n[part~=navigation-button] {\n -webkit-margin-start: 1.5rem;\n margin-inline-start: 1.5rem;\n}\n[part~=navigation-button][part~=vertical] {\n -webkit-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg);\n}\n\n[part=navigation-buttons] {\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}\n\n:host(igc-calendar[header-orientation=vertical]) {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n}\n:host(igc-calendar[header-orientation=vertical]) [part=header] {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n width: 8.75rem;\n}\n:host(igc-calendar[header-orientation=vertical]) [part=header-date] {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n[part=days-view-container] {\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n}\n\n[part=header] {\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-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 1rem;\n background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n color: var(--ig-secondary-600-contrast);\n}\n\n[part=header-date],\n[part=header-title] {\n margin: 0;\n}\n\n[part=header-date] {\n font-family: var(--ig-h4-font-family);\n font-size: var(--ig-h4-font-size);\n font-weight: var(--ig-h4-font-weight);\n font-style: var(--ig-h4-font-style);\n line-height: var(--ig-h4-line-height);\n letter-spacing: var(--ig-h4-letter-spacing);\n text-transform: var(--ig-h4-text-transform);\n margin-top: var(--ig-h4-margin-top);\n margin-bottom: var(--ig-h4-margin-bottom);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n white-space: pre-wrap;\n}\n\n[part=header-title] {\n font-family: var(--ig-overline-font-family);\n font-size: var(--ig-overline-font-size);\n font-weight: var(--ig-overline-font-weight);\n font-style: var(--ig-overline-font-style);\n line-height: var(--ig-overline-line-height);\n letter-spacing: var(--ig-overline-letter-spacing);\n text-transform: var(--ig-overline-text-transform);\n margin-top: var(--ig-overline-margin-top);\n margin-bottom: var(--ig-overline-margin-bottom);\n}\n\n.aria-off-screen {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n border: none;\n clip: rect(0, 0, 0, 0);\n outline: 0;\n pointer-events: none;\n overflow: hidden;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n\n:host(igc-calendar[size=large]) igc-days-view::part(date-inner),\n:host(igc-calendar[size=large]) igc-months-view::part(month-inner),\n:host(igc-calendar[size=large]) igc-years-view::part(year-inner),\n:host(igc-calendar[size=medium]) igc-days-view::part(date-inner),\n:host(igc-calendar[size=medium]) igc-months-view::part(month-inner),\n:host(igc-calendar[size=medium]) igc-years-view::part(year-inner),\n:host(igc-calendar[size=small]) igc-days-view::part(date-inner),\n:host(igc-calendar[size=small]) igc-months-view::part(month-inner),\n:host(igc-calendar[size=small]) igc-years-view::part(year-inner) {\n border-radius: 0;\n}`;\n"]}

package/components/card/themes/light/card.actions.bootstrap.css.js CHANGED Viewed

@@ -1,10 +1,17 @@
 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(--scrolbar-size, 0.875rem);
-  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  scrollbar-width: var(--ig-scrollbar-size);
+  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
 }
 :host *,
 :host *::before,
@@ -13,12 +20,12 @@ export const styles = css `:host {
           box-sizing: border-box;
 }
 :host ::-webkit-scrollbar {
-  width: var(--scrolbar-size, 0.875rem);
-  height: var(--scrolbar-size, 0.875rem);
-  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  width: var(--ig-scrollbar-size);
+  height: var(--ig-scrollbar-size);
+  background: var(--ig-scrollbar-track-background);
 }
 :host ::-webkit-scrollbar-thumb {
-  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  background: var(--ig-scrollbar-thumb-background);
 }
 [hidden] {

package/components/card/themes/light/card.actions.bootstrap.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.actions.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.actions.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6FvB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n ~~position~~: ~~relative;\n~~ -~~webkit~~-~~box-sizing:~~ ~~border~~-~~box;\n box~~-~~sizing:~~ ~~border-box~~;\n ~~scrollbar~~-~~width:~~ var(--~~scrolbar~~-size, ~~0.875rem~~)~~;\n scrollbar~~-~~color:~~ var(--~~igc~~-~~scrollbar~~-~~thumb-color~~, ~~hsla~~(var(--ig-~~gray~~-~~400~~), var(--ig-~~gray~~-a))) var(--~~igc~~-scrollbar-~~track~~-color, ~~hsla(~~var(--ig-~~gray~~-~~200~~), var(--ig-~~gray~~-a)));\n}\n:host ,\n:host ::before,\n:host ::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--~~scrolbar~~-size~~, 0.875rem~~);\n height: var(--~~scrolbar~~-size~~, 0.875rem~~);\n background: var(--~~igc~~-scrollbar-track-~~color, hsla(var(--ig-gray-200~~)~~, var(--ig-gray-a)))~~;\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--~~igc~~-scrollbar-thumb-~~color, hsla(var(--ig-gray-400~~)~~, var(--ig-gray-a)))~~;\n}\n\n[hidden] {\n display: none !important;\n}\n\n/ stylelint-disable max-line-length */\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-flow: column nowrap;\n flex-flow: column nowrap;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 0.5rem;\n -ms-flex-preferred-size: min-content;\n flex-basis: min-content;\n}\n\n:host(:not([orientation=vertical])) {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n:host(:not([orientation=vertical])) ::slotted(igc-icon-button:not(:first-of-type)),\n:host(:not([orientation=vertical])) ::slotted(igc-button:not(:first-of-type)) {\n -webkit-margin-start: 0.5rem;\n margin-inline-start: 0.5rem;\n}\n\n::slotted([slot=start]) {\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-ordinal-group: 1;\n -ms-flex-order: 0;\n order: 0;\n}\n\n::slotted([slot=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-margin-start: auto;\n margin-inline-start: auto;\n -webkit-box-ordinal-group: 2;\n -ms-flex-order: 1;\n order: 1;\n}\n\n::slotted(igc-icon) {\n opacity: 0.6;\n}\n\n:host {\n padding: 1rem;\n}`;\n"]}
1	+ {"version":3,"file":"card.actions.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.actions.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--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[hidden] {\n display: none !important;\n}\n\n/ stylelint-disable max-line-length */\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-flow: column nowrap;\n flex-flow: column nowrap;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 0.5rem;\n -ms-flex-preferred-size: min-content;\n flex-basis: min-content;\n}\n\n:host(:not([orientation=vertical])) {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n:host(:not([orientation=vertical])) ::slotted(igc-icon-button:not(:first-of-type)),\n:host(:not([orientation=vertical])) ::slotted(igc-button:not(:first-of-type)) {\n -webkit-margin-start: 0.5rem;\n margin-inline-start: 0.5rem;\n}\n\n::slotted([slot=start]) {\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-ordinal-group: 1;\n -ms-flex-order: 0;\n order: 0;\n}\n\n::slotted([slot=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-margin-start: auto;\n margin-inline-start: auto;\n -webkit-box-ordinal-group: 2;\n -ms-flex-order: 1;\n order: 1;\n}\n\n::slotted(igc-icon) {\n opacity: 0.6;\n}\n\n:host {\n padding: 1rem;\n}`;\n"]}

package/components/card/themes/light/card.actions.material.css.js CHANGED Viewed

@@ -1,10 +1,17 @@
 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(--scrolbar-size, 0.875rem);
-  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  scrollbar-width: var(--ig-scrollbar-size);
+  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
 }
 :host *,
 :host *::before,
@@ -13,12 +20,12 @@ export const styles = css `:host {
           box-sizing: border-box;
 }
 :host ::-webkit-scrollbar {
-  width: var(--scrolbar-size, 0.875rem);
-  height: var(--scrolbar-size, 0.875rem);
-  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  width: var(--ig-scrollbar-size);
+  height: var(--ig-scrollbar-size);
+  background: var(--ig-scrollbar-track-background);
 }
 :host ::-webkit-scrollbar-thumb {
-  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  background: var(--ig-scrollbar-thumb-background);
 }
 [hidden] {

package/components/card/themes/light/card.actions.material.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.actions.material.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.actions.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyFvB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n ~~position~~: ~~relative;\n~~ -~~webkit~~-~~box-sizing:~~ ~~border~~-~~box;\n box~~-~~sizing:~~ ~~border-box~~;\n ~~scrollbar~~-~~width:~~ var(--~~scrolbar~~-size, ~~0.875rem~~)~~;\n scrollbar~~-~~color:~~ var(--~~igc~~-~~scrollbar~~-~~thumb-color~~, ~~hsla~~(var(--ig-~~gray~~-~~400~~), var(--ig-~~gray~~-a))) var(--~~igc~~-scrollbar-~~track~~-color, ~~hsla(~~var(--ig-~~gray~~-~~200~~), var(--ig-~~gray~~-a)));\n}\n:host ,\n:host ::before,\n:host ::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--~~scrolbar~~-size~~, 0.875rem~~);\n height: var(--~~scrolbar~~-size~~, 0.875rem~~);\n background: var(--~~igc~~-scrollbar-track-~~color, hsla(var(--ig-gray-200~~)~~, var(--ig-gray-a)))~~;\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--~~igc~~-scrollbar-thumb-~~color, hsla(var(--ig-gray-400~~)~~, var(--ig-gray-a)))~~;\n}\n\n[hidden] {\n display: none !important;\n}\n\n/ stylelint-disable max-line-length */\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-flow: column nowrap;\n flex-flow: column nowrap;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 0.5rem;\n -ms-flex-preferred-size: min-content;\n flex-basis: min-content;\n}\n\n:host(:not([orientation=vertical])) {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n:host(:not([orientation=vertical])) ::slotted(igc-icon-button:not(:first-of-type)),\n:host(:not([orientation=vertical])) ::slotted(igc-button:not(:first-of-type)) {\n -webkit-margin-start: 0.5rem;\n margin-inline-start: 0.5rem;\n}\n\n::slotted([slot=start]) {\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-ordinal-group: 1;\n -ms-flex-order: 0;\n order: 0;\n}\n\n::slotted([slot=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-margin-start: auto;\n margin-inline-start: auto;\n -webkit-box-ordinal-group: 2;\n -ms-flex-order: 1;\n order: 1;\n}\n\n::slotted(igc-icon) {\n opacity: 0.6;\n}`;\n"]}
1	+ {"version":3,"file":"card.actions.material.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.actions.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--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[hidden] {\n display: none !important;\n}\n\n/ stylelint-disable max-line-length */\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-flow: column nowrap;\n flex-flow: column nowrap;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding: 0.5rem;\n -ms-flex-preferred-size: min-content;\n flex-basis: min-content;\n}\n\n:host(:not([orientation=vertical])) {\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n:host(:not([orientation=vertical])) ::slotted(igc-icon-button:not(:first-of-type)),\n:host(:not([orientation=vertical])) ::slotted(igc-button:not(:first-of-type)) {\n -webkit-margin-start: 0.5rem;\n margin-inline-start: 0.5rem;\n}\n\n::slotted([slot=start]) {\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-ordinal-group: 1;\n -ms-flex-order: 0;\n order: 0;\n}\n\n::slotted([slot=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-margin-start: auto;\n margin-inline-start: auto;\n -webkit-box-ordinal-group: 2;\n -ms-flex-order: 1;\n order: 1;\n}\n\n::slotted(igc-icon) {\n opacity: 0.6;\n}`;\n"]}

package/components/card/themes/light/card.content.bootstrap.css.js CHANGED Viewed

@@ -1,10 +1,17 @@
 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(--scrolbar-size, 0.875rem);
-  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  scrollbar-width: var(--ig-scrollbar-size);
+  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
 }
 :host *,
 :host *::before,
@@ -13,12 +20,12 @@ export const styles = css `:host {
           box-sizing: border-box;
 }
 :host ::-webkit-scrollbar {
-  width: var(--scrolbar-size, 0.875rem);
-  height: var(--scrolbar-size, 0.875rem);
-  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  width: var(--ig-scrollbar-size);
+  height: var(--ig-scrollbar-size);
+  background: var(--ig-scrollbar-track-background);
 }
 :host ::-webkit-scrollbar-thumb {
-  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  background: var(--ig-scrollbar-thumb-background);
 }
 [hidden] {

package/components/card/themes/light/card.content.bootstrap.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.content.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.content.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EvB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n ~~position~~: ~~relative;\n~~ -~~webkit~~-~~box-sizing:~~ ~~border~~-~~box;\n box~~-~~sizing:~~ ~~border-box~~;\n ~~scrollbar~~-~~width:~~ var(--~~scrolbar~~-size, ~~0.875rem~~)~~;\n scrollbar~~-~~color:~~ var(--~~igc~~-~~scrollbar~~-~~thumb-color~~, ~~hsla~~(var(--ig-~~gray~~-~~400~~), var(--ig-~~gray~~-a))) var(--~~igc~~-scrollbar-~~track~~-color, ~~hsla(~~var(--ig-~~gray~~-~~200~~), var(--ig-~~gray~~-a)));\n}\n:host ,\n:host ::before,\n:host ::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--~~scrolbar~~-size~~, 0.875rem~~);\n height: var(--~~scrolbar~~-size~~, 0.875rem~~);\n background: var(--~~igc~~-scrollbar-track-~~color, hsla(var(--ig-gray-200~~)~~, var(--ig-gray-a)))~~;\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--~~igc~~-scrollbar-thumb-~~color, hsla(var(--ig-gray-400~~)~~, var(--ig-gray-a)))~~;\n}\n\n[hidden] {\n display: none !important;\n}\n\n/ stylelint-disable max-line-length /\n:host {\n display: block;\n width: 100%;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n padding: 1rem;\n color: var(--ig-surface-500-contrast);\n}\n\n::slotted() {\n font-family: var(--ig-body-2-font-family);\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n opacity: 0.6;\n margin: 0;\n}\n\n:host {\n font-family: var(--ig-body-1-font-family);\n font-size: var(--ig-body-1-font-size);\n font-weight: var(--ig-body-1-font-weight);\n font-style: var(--ig-body-1-font-style);\n line-height: var(--ig-body-1-line-height);\n letter-spacing: var(--ig-body-1-letter-spacing);\n text-transform: var(--ig-body-1-text-transform);\n margin-top: var(--ig-body-1-margin-top);\n margin-bottom: var(--ig-body-1-margin-bottom);\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n::slotted(*) {\n font-family: var(--ig-body-1-font-family);\n font-size: var(--ig-body-1-font-size);\n font-weight: var(--ig-body-1-font-weight);\n font-style: var(--ig-body-1-font-style);\n line-height: var(--ig-body-1-line-height);\n letter-spacing: var(--ig-body-1-letter-spacing);\n text-transform: var(--ig-body-1-text-transform);\n margin-top: var(--ig-body-1-margin-top);\n margin-bottom: var(--ig-body-1-margin-bottom);\n opacity: 1;\n}`;\n"]}
1	+ {"version":3,"file":"card.content.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.content.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkFvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--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[hidden] {\n display: none !important;\n}\n\n/ stylelint-disable max-line-length /\n:host {\n display: block;\n width: 100%;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n padding: 1rem;\n color: var(--ig-surface-500-contrast);\n}\n\n::slotted() {\n font-family: var(--ig-body-2-font-family);\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n opacity: 0.6;\n margin: 0;\n}\n\n:host {\n font-family: var(--ig-body-1-font-family);\n font-size: var(--ig-body-1-font-size);\n font-weight: var(--ig-body-1-font-weight);\n font-style: var(--ig-body-1-font-style);\n line-height: var(--ig-body-1-line-height);\n letter-spacing: var(--ig-body-1-letter-spacing);\n text-transform: var(--ig-body-1-text-transform);\n margin-top: var(--ig-body-1-margin-top);\n margin-bottom: var(--ig-body-1-margin-bottom);\n color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n}\n\n::slotted(*) {\n font-family: var(--ig-body-1-font-family);\n font-size: var(--ig-body-1-font-size);\n font-weight: var(--ig-body-1-font-weight);\n font-style: var(--ig-body-1-font-style);\n line-height: var(--ig-body-1-line-height);\n letter-spacing: var(--ig-body-1-letter-spacing);\n text-transform: var(--ig-body-1-text-transform);\n margin-top: var(--ig-body-1-margin-top);\n margin-bottom: var(--ig-body-1-margin-bottom);\n opacity: 1;\n}`;\n"]}

package/components/card/themes/light/card.content.indigo.css.js CHANGED Viewed

@@ -1,10 +1,17 @@
 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(--scrolbar-size, 0.875rem);
-  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  scrollbar-width: var(--ig-scrollbar-size);
+  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
 }
 :host *,
 :host *::before,
@@ -13,12 +20,12 @@ export const styles = css `:host {
           box-sizing: border-box;
 }
 :host ::-webkit-scrollbar {
-  width: var(--scrolbar-size, 0.875rem);
-  height: var(--scrolbar-size, 0.875rem);
-  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  width: var(--ig-scrollbar-size);
+  height: var(--ig-scrollbar-size);
+  background: var(--ig-scrollbar-track-background);
 }
 :host ::-webkit-scrollbar-thumb {
-  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  background: var(--ig-scrollbar-thumb-background);
 }
 [hidden] {

package/components/card/themes/light/card.content.indigo.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.content.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.content.indigo.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 ~~position~~: ~~relative;\n~~ -~~webkit~~-~~box-sizing:~~ ~~border~~-~~box;\n box~~-~~sizing:~~ ~~border-box~~;\n ~~scrollbar~~-~~width:~~ var(--~~scrolbar~~-size, ~~0.875rem~~)~~;\n scrollbar~~-~~color:~~ var(--~~igc~~-~~scrollbar~~-~~thumb-color~~, ~~hsla~~(var(--ig-~~gray~~-~~400~~), var(--ig-~~gray~~-a))) var(--~~igc~~-scrollbar-~~track~~-color, ~~hsla(~~var(--ig-~~gray~~-~~200~~), var(--ig-~~gray~~-a)));\n}\n:host ,\n:host ::before,\n:host ::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--~~scrolbar~~-size~~, 0.875rem~~);\n height: var(--~~scrolbar~~-size~~, 0.875rem~~);\n background: var(--~~igc~~-scrollbar-track-~~color, hsla(var(--ig-gray-200~~)~~, var(--ig-gray-a)))~~;\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--~~igc~~-scrollbar-thumb-~~color, hsla(var(--ig-gray-400~~)~~, var(--ig-gray-a)))~~;\n}\n\n[hidden] {\n display: none !important;\n}\n\n/ stylelint-disable max-line-length /\n:host {\n display: block;\n width: 100%;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n padding: 1rem;\n color: var(--ig-surface-500-contrast);\n}\n\n::slotted() {\n font-family: var(--ig-body-2-font-family);\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n opacity: 0.6;\n margin: 0;\n}\n\n:host {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n::slotted(*) {\n opacity: 1;\n}`;\n"]}
1	+ {"version":3,"file":"card.content.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.content.indigo.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:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--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[hidden] {\n display: none !important;\n}\n\n/ stylelint-disable max-line-length /\n:host {\n display: block;\n width: 100%;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n padding: 1rem;\n color: var(--ig-surface-500-contrast);\n}\n\n::slotted() {\n font-family: var(--ig-body-2-font-family);\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n opacity: 0.6;\n margin: 0;\n}\n\n:host {\n color: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n::slotted(*) {\n opacity: 1;\n}`;\n"]}

package/components/card/themes/light/card.content.material.css.js CHANGED Viewed

@@ -1,10 +1,17 @@
 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(--scrolbar-size, 0.875rem);
-  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  scrollbar-width: var(--ig-scrollbar-size);
+  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
 }
 :host *,
 :host *::before,
@@ -13,12 +20,12 @@ export const styles = css `:host {
           box-sizing: border-box;
 }
 :host ::-webkit-scrollbar {
-  width: var(--scrolbar-size, 0.875rem);
-  height: var(--scrolbar-size, 0.875rem);
-  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  width: var(--ig-scrollbar-size);
+  height: var(--ig-scrollbar-size);
+  background: var(--ig-scrollbar-track-background);
 }
 :host ::-webkit-scrollbar-thumb {
-  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  background: var(--ig-scrollbar-thumb-background);
 }
 [hidden] {

package/components/card/themes/light/card.content.material.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.content.material.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.content.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDvB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n ~~position~~: ~~relative;\n~~ -~~webkit~~-~~box-sizing:~~ ~~border~~-~~box;\n box~~-~~sizing:~~ ~~border-box~~;\n ~~scrollbar~~-~~width:~~ var(--~~scrolbar~~-size, ~~0.875rem~~)~~;\n scrollbar~~-~~color:~~ var(--~~igc~~-~~scrollbar~~-~~thumb-color~~, ~~hsla~~(var(--ig-~~gray~~-~~400~~), var(--ig-~~gray~~-a))) var(--~~igc~~-scrollbar-~~track~~-color, ~~hsla(~~var(--ig-~~gray~~-~~200~~), var(--ig-~~gray~~-a)));\n}\n:host ,\n:host ::before,\n:host ::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--~~scrolbar~~-size~~, 0.875rem~~);\n height: var(--~~scrolbar~~-size~~, 0.875rem~~);\n background: var(--~~igc~~-scrollbar-track-~~color, hsla(var(--ig-gray-200~~)~~, var(--ig-gray-a)))~~;\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--~~igc~~-scrollbar-thumb-~~color, hsla(var(--ig-gray-400~~)~~, var(--ig-gray-a)))~~;\n}\n\n[hidden] {\n display: none !important;\n}\n\n/ stylelint-disable max-line-length /\n:host {\n display: block;\n width: 100%;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n padding: 1rem;\n color: var(--ig-surface-500-contrast);\n}\n\n::slotted() {\n font-family: var(--ig-body-2-font-family);\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n opacity: 0.6;\n margin: 0;\n}`;\n"]}
1	+ {"version":3,"file":"card.content.material.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.content.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--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[hidden] {\n display: none !important;\n}\n\n/ stylelint-disable max-line-length /\n:host {\n display: block;\n width: 100%;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n padding: 1rem;\n color: var(--ig-surface-500-contrast);\n}\n\n::slotted() {\n font-family: var(--ig-body-2-font-family);\n font-size: var(--ig-body-2-font-size);\n font-weight: var(--ig-body-2-font-weight);\n font-style: var(--ig-body-2-font-style);\n line-height: var(--ig-body-2-line-height);\n letter-spacing: var(--ig-body-2-letter-spacing);\n text-transform: var(--ig-body-2-text-transform);\n margin-top: var(--ig-body-2-margin-top);\n margin-bottom: var(--ig-body-2-margin-bottom);\n opacity: 0.6;\n margin: 0;\n}`;\n"]}

package/components/card/themes/light/card.header.bootstrap.css.js CHANGED Viewed

@@ -1,10 +1,17 @@
 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(--scrolbar-size, 0.875rem);
-  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  scrollbar-width: var(--ig-scrollbar-size);
+  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
 }
 :host *,
 :host *::before,
@@ -13,12 +20,12 @@ export const styles = css `:host {
           box-sizing: border-box;
 }
 :host ::-webkit-scrollbar {
-  width: var(--scrolbar-size, 0.875rem);
-  height: var(--scrolbar-size, 0.875rem);
-  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  width: var(--ig-scrollbar-size);
+  height: var(--ig-scrollbar-size);
+  background: var(--ig-scrollbar-track-background);
 }
 :host ::-webkit-scrollbar-thumb {
-  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  background: var(--ig-scrollbar-thumb-background);
 }
 [hidden] {

package/components/card/themes/light/card.header.bootstrap.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.header.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.header.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoIvB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n ~~position~~: ~~relative;\n~~ -~~webkit~~-~~box-sizing:~~ ~~border~~-~~box;\n box~~-~~sizing:~~ ~~border-box~~;\n ~~scrollbar~~-~~width:~~ var(--~~scrolbar~~-size, ~~0.875rem~~)~~;\n scrollbar~~-~~color:~~ var(--~~igc~~-~~scrollbar~~-~~thumb-color~~, ~~hsla~~(var(--ig-~~gray~~-~~400~~), var(--ig-~~gray~~-a))) var(--~~igc~~-scrollbar-~~track~~-color, ~~hsla(~~var(--ig-~~gray~~-~~200~~), var(--ig-~~gray~~-a)));\n}\n:host ,\n:host ::before,\n:host ::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n width: var(--~~scrolbar~~-size~~, 0.875rem~~);\n height: var(--~~scrolbar~~-size~~, 0.875rem~~);\n background: var(--~~igc~~-scrollbar-track-~~color, hsla(var(--ig-gray-200~~)~~, var(--ig-gray-a)))~~;\n}\n:host ::-webkit-scrollbar-thumb {\n background: var(--~~igc~~-scrollbar-thumb-~~color, hsla(var(--ig-gray-400~~)~~, var(--ig-gray-a)))~~;\n}\n\n[hidden] {\n display: none !important;\n}\n\n/ stylelint-disable max-line-length /\n:host {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-line-pack: start;\n align-content: flex-start;\n width: 100%;\n color: var(--ig-surface-500-contrast);\n padding: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n::slotted() {\n margin: 0;\n font: inherit;\n opacity: inherit;\n}\n\nheader {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-flow: column nowrap;\n flex-flow: column nowrap;\n overflow: hidden;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n}\n\n::slotted([slot=title]) {\n font-family: var(--ig-h6-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 opacity: 0.87;\n}\n\n::slotted([slot=subtitle]) {\n font-family: var(--ig-subtitle-2-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 opacity: 0.6;\n}\n\n::slotted([slot=thumbnail]) {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-item-align: start;\n align-self: flex-start;\n -webkit-margin-end: 1rem;\n margin-inline-end: 1rem;\n}\n\n::slotted([slot=title]) {\n font-family: var(--ig-h5-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 color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n opacity: 1;\n}\n\n::slotted([slot=subtitle]) {\n font-family: var(--ig-body-1-font-family);\n font-size: var(--ig-body-1-font-size);\n font-weight: var(--ig-body-1-font-weight);\n font-style: var(--ig-body-1-font-style);\n line-height: var(--ig-body-1-line-height);\n letter-spacing: var(--ig-body-1-letter-spacing);\n text-transform: var(--ig-body-1-text-transform);\n margin-top: var(--ig-body-1-margin-top);\n margin-bottom: var(--ig-body-1-margin-bottom);\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n opacity: 1;\n}`;\n"]}
1	+ {"version":3,"file":"card.header.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/card/themes/light/card.header.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2IvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n --is-medium:\n min(\n clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n );\n --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n position: relative;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n scrollbar-width: var(--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[hidden] {\n display: none !important;\n}\n\n/ stylelint-disable max-line-length /\n:host {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-line-pack: start;\n align-content: flex-start;\n width: 100%;\n color: var(--ig-surface-500-contrast);\n padding: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n::slotted() {\n margin: 0;\n font: inherit;\n opacity: inherit;\n}\n\nheader {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-flow: column nowrap;\n flex-flow: column nowrap;\n overflow: hidden;\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n}\n\n::slotted([slot=title]) {\n font-family: var(--ig-h6-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 opacity: 0.87;\n}\n\n::slotted([slot=subtitle]) {\n font-family: var(--ig-subtitle-2-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 opacity: 0.6;\n}\n\n::slotted([slot=thumbnail]) {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-item-align: start;\n align-self: flex-start;\n -webkit-margin-end: 1rem;\n margin-inline-end: 1rem;\n}\n\n::slotted([slot=title]) {\n font-family: var(--ig-h5-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 color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n opacity: 1;\n}\n\n::slotted([slot=subtitle]) {\n font-family: var(--ig-body-1-font-family);\n font-size: var(--ig-body-1-font-size);\n font-weight: var(--ig-body-1-font-weight);\n font-style: var(--ig-body-1-font-style);\n line-height: var(--ig-body-1-line-height);\n letter-spacing: var(--ig-body-1-letter-spacing);\n text-transform: var(--ig-body-1-text-transform);\n margin-top: var(--ig-body-1-margin-top);\n margin-bottom: var(--ig-body-1-margin-bottom);\n color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n opacity: 1;\n}`;\n"]}

package/components/card/themes/light/card.header.fluent.css.js CHANGED Viewed

@@ -1,10 +1,17 @@
 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(--scrolbar-size, 0.875rem);
-  scrollbar-color: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a))) var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  scrollbar-width: var(--ig-scrollbar-size);
+  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);
 }
 :host *,
 :host *::before,
@@ -13,12 +20,12 @@ export const styles = css `:host {
           box-sizing: border-box;
 }
 :host ::-webkit-scrollbar {
-  width: var(--scrolbar-size, 0.875rem);
-  height: var(--scrolbar-size, 0.875rem);
-  background: var(--igc-scrollbar-track-color, hsla(var(--ig-gray-200), var(--ig-gray-a)));
+  width: var(--ig-scrollbar-size);
+  height: var(--ig-scrollbar-size);
+  background: var(--ig-scrollbar-track-background);
 }
 :host ::-webkit-scrollbar-thumb {
-  background: var(--igc-scrollbar-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  background: var(--ig-scrollbar-thumb-background);
 }
 [hidden] {