igniteui-webcomponents 4.4.0 → 4.5.0

package/components/calendar/themes/light/material/days-view.material.css.js

@@ -0,0 +1,166 @@
+import { css } from 'lit';
+export const styles = css `[part~=date-inner]:hover, [part~=date-inner]:focus {
+  background: hsla(var(--ig-secondary-100), var(--ig-secondary-a));
+  color: var(--ig-secondary-100-contrast);
+  border-color: hsla(var(--ig-secondary-100), var(--ig-secondary-a));
+}
+
+[part~=date-inner][part~=current][part~=selected] {
+  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));
+          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));
+}
+
+[part~=current][part~=date-inner] {
+  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));
+          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));
+}
+[part~=current][part~=date-inner]:hover, [part~=current][part~=date-inner]:focus {
+  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a));
+          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a));
+}
+
+[part~=date],
+[part~=week-number],
+[part~=label] {
+  color: hsla(var(--ig-gray-800), var(--ig-gray-a));
+  border-top: 0.0625rem solid transparent;
+  border-bottom: 0.0625rem solid transparent;
+}
+
+[part~=date-inner],
+[part~=week-number-inner] {
+  border: 0.0625rem solid transparent;
+}
+
+[part~=date][part~=range] {
+  background: hsla(var(--ig-secondary-50), var(--ig-secondary-a));
+}
+
+[part~=date][part~=range][part~=preview] {
+  background: transparent;
+  border-top: 0.0625rem dashed hsla(var(--ig-gray-300), var(--ig-gray-a));
+  border-bottom: 0.0625rem dashed hsla(var(--ig-gray-300), var(--ig-gray-a));
+}
+
+[part~=date][part~=range][part~=preview][part~=first],
+[part~=date][part~=range][part~=preview][part~=last] {
+  background: transparent;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
+[part~=date][part~=range][part~=preview][part~=first]::after,
+[part~=date][part~=range][part~=preview][part~=last]::after {
+  border-top: 0.0625rem dashed hsla(var(--ig-gray-300), var(--ig-gray-a));
+  border-bottom: 0.0625rem dashed hsla(var(--ig-gray-300), var(--ig-gray-a));
+  background: transparent;
+}
+
+[part~=date][part~=range][part~=first],
+[part~=date][part~=range][part~=last] {
+  background: transparent;
+}
+[part~=date][part~=range][part~=first]::after,
+[part~=date][part~=range][part~=last]::after {
+  background: hsla(var(--ig-secondary-50), var(--ig-secondary-a));
+  border-top: 0.0625rem solid hsla(var(--ig-secondary-50), var(--ig-secondary-a));
+  border-bottom: 0.0625rem solid hsla(var(--ig-secondary-50), var(--ig-secondary-a));
+}
+
+[part~=date-inner][part~=inactive],
+[part~=date-inner][part~=label],
+[part~=date-inner][part~=disabled] {
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+}
+
+[part~=date-inner][part~=weekend]:hover, [part~=date-inner][part~=weekend]:focus,
+[part~=date-inner][part~=inactive]:hover,
+[part~=date-inner][part~=inactive]:focus {
+  color: var(--ig-secondary-100-contrast);
+}
+
+[part~=date-inner][part~=selected][part~=range][part~=first],
+[part~=date-inner][part~=selected][part~=range][part~=last],
+[part~=date-inner][part~=selected][part~=range][part~=weekend][part~=first],
+[part~=date-inner][part~=selected][part~=range][part~=weekend][part~=last],
+[part~=date-inner][part~=selected][part~=range][part~=inactive][part~=first],
+[part~=date-inner][part~=selected][part~=range][part~=inactive][part~=last] {
+  color: var(--ig-secondary-700-contrast);
+}
+
+[part~=date-inner][part~=selected][part~=range][part~=weekend],
+[part~=date-inner][part~=selected][part~=range][part~=inactive],
+[part~=date-inner][part~=selected][part~=range] {
+  color: var(--ig-secondary-50-contrast);
+}
+[part~=date-inner][part~=selected][part~=range][part~=weekend]:hover, [part~=date-inner][part~=selected][part~=range][part~=weekend]:focus,
+[part~=date-inner][part~=selected][part~=range][part~=inactive]:hover,
+[part~=date-inner][part~=selected][part~=range][part~=inactive]:focus,
+[part~=date-inner][part~=selected][part~=range]:hover,
+[part~=date-inner][part~=selected][part~=range]:focus {
+  color: var(--ig-secondary-100-contrast);
+  background: hsla(var(--ig-secondary-100), var(--ig-secondary-a));
+  border-color: hsla(var(--ig-secondary-100), var(--ig-secondary-a));
+}
+
+[part~=date-inner][part~=selected][part~=range][part~=first],
+[part~=date-inner][part~=selected][part~=range][part~=last],
+[part~=date-inner][part~=selected]:not([part~=range]) {
+  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
+  border-color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
+}
+[part~=date-inner][part~=selected][part~=range][part~=first]:hover, [part~=date-inner][part~=selected][part~=range][part~=first]:focus,
+[part~=date-inner][part~=selected][part~=range][part~=last]:hover,
+[part~=date-inner][part~=selected][part~=range][part~=last]:focus,
+[part~=date-inner][part~=selected]:not([part~=range]):hover,
+[part~=date-inner][part~=selected]:not([part~=range]):focus {
+  background: hsla(var(--ig-secondary-700), var(--ig-secondary-a));
+  border-color: hsla(var(--ig-secondary-700), var(--ig-secondary-a));
+  color: var(--ig-secondary-700-contrast);
+}
+
+[part~=date-inner][part~=selected][part~=weekend]:not([part~=range]),
+[part~=date-inner][part~=selected][part~=inactive]:not([part~=range]),
+[part~=date-inner][part~=selected]:not([part~=range]) {
+  color: var(--ig-secondary-700-contrast);
+}
+
+[part~=week-number] {
+  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
+}
+
+[part="week-number-inner first"] {
+  border-top-left-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem);
+  border-top-right-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem);
+}
+
+[part="week-number-inner last"] {
+  border-bottom-left-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem);
+  border-bottom-right-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem);
+}
+
+[part~=week-number-inner] {
+  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
+  border-inline-end-color: hsla(var(--ig-gray-200), var(--ig-gray-a));
+}
+[part~=week-number-inner]::after {
+  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
+  -webkit-border-start: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));
+          border-inline-start: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));
+  -webkit-border-end: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));
+          border-inline-end: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));
+}
+
+[part~=date-inner][part~=special][part~=range],
+[part~=date-inner][part~=special] {
+  background: hsla(var(--ig-gray-100), var(--ig-gray-a));
+  border-color: hsla(var(--ig-gray-100), var(--ig-gray-a));
+  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
+  font-weight: 900;
+}
+[part~=date-inner][part~=special][part~=range]:hover, [part~=date-inner][part~=special][part~=range]:focus,
+[part~=date-inner][part~=special]:hover,
+[part~=date-inner][part~=special]:focus {
+  background: hsla(var(--ig-secondary-100), var(--ig-secondary-a));
+  border-color: hsla(var(--ig-secondary-100), var(--ig-secondary-a));
+}`;
+//# sourceMappingURL=days-view.material.css.js.map

package/components/calendar/themes/light/material/days-view.material.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"days-view.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/calendar/themes/light/material/days-view.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmKvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=date-inner]:hover, [part~=date-inner]:focus {\n  background: hsla(var(--ig-secondary-100), var(--ig-secondary-a));\n  color: var(--ig-secondary-100-contrast);\n  border-color: hsla(var(--ig-secondary-100), var(--ig-secondary-a));\n}\n\n[part~=date-inner][part~=current][part~=selected] {\n  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n\n[part~=current][part~=date-inner] {\n  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n[part~=current][part~=date-inner]:hover, [part~=current][part~=date-inner]:focus {\n  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a));\n          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a));\n}\n\n[part~=date],\n[part~=week-number],\n[part~=label] {\n  color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n  border-top: 0.0625rem solid transparent;\n  border-bottom: 0.0625rem solid transparent;\n}\n\n[part~=date-inner],\n[part~=week-number-inner] {\n  border: 0.0625rem solid transparent;\n}\n\n[part~=date][part~=range] {\n  background: hsla(var(--ig-secondary-50), var(--ig-secondary-a));\n}\n\n[part~=date][part~=range][part~=preview] {\n  background: transparent;\n  border-top: 0.0625rem dashed hsla(var(--ig-gray-300), var(--ig-gray-a));\n  border-bottom: 0.0625rem dashed hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\n[part~=date][part~=range][part~=preview][part~=first],\n[part~=date][part~=range][part~=preview][part~=last] {\n  background: transparent;\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n}\n[part~=date][part~=range][part~=preview][part~=first]::after,\n[part~=date][part~=range][part~=preview][part~=last]::after {\n  border-top: 0.0625rem dashed hsla(var(--ig-gray-300), var(--ig-gray-a));\n  border-bottom: 0.0625rem dashed hsla(var(--ig-gray-300), var(--ig-gray-a));\n  background: transparent;\n}\n\n[part~=date][part~=range][part~=first],\n[part~=date][part~=range][part~=last] {\n  background: transparent;\n}\n[part~=date][part~=range][part~=first]::after,\n[part~=date][part~=range][part~=last]::after {\n  background: hsla(var(--ig-secondary-50), var(--ig-secondary-a));\n  border-top: 0.0625rem solid hsla(var(--ig-secondary-50), var(--ig-secondary-a));\n  border-bottom: 0.0625rem solid hsla(var(--ig-secondary-50), var(--ig-secondary-a));\n}\n\n[part~=date-inner][part~=inactive],\n[part~=date-inner][part~=label],\n[part~=date-inner][part~=disabled] {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n[part~=date-inner][part~=weekend]:hover, [part~=date-inner][part~=weekend]:focus,\n[part~=date-inner][part~=inactive]:hover,\n[part~=date-inner][part~=inactive]:focus {\n  color: var(--ig-secondary-100-contrast);\n}\n\n[part~=date-inner][part~=selected][part~=range][part~=first],\n[part~=date-inner][part~=selected][part~=range][part~=last],\n[part~=date-inner][part~=selected][part~=range][part~=weekend][part~=first],\n[part~=date-inner][part~=selected][part~=range][part~=weekend][part~=last],\n[part~=date-inner][part~=selected][part~=range][part~=inactive][part~=first],\n[part~=date-inner][part~=selected][part~=range][part~=inactive][part~=last] {\n  color: var(--ig-secondary-700-contrast);\n}\n\n[part~=date-inner][part~=selected][part~=range][part~=weekend],\n[part~=date-inner][part~=selected][part~=range][part~=inactive],\n[part~=date-inner][part~=selected][part~=range] {\n  color: var(--ig-secondary-50-contrast);\n}\n[part~=date-inner][part~=selected][part~=range][part~=weekend]:hover, [part~=date-inner][part~=selected][part~=range][part~=weekend]:focus,\n[part~=date-inner][part~=selected][part~=range][part~=inactive]:hover,\n[part~=date-inner][part~=selected][part~=range][part~=inactive]:focus,\n[part~=date-inner][part~=selected][part~=range]:hover,\n[part~=date-inner][part~=selected][part~=range]:focus {\n  color: var(--ig-secondary-100-contrast);\n  background: hsla(var(--ig-secondary-100), var(--ig-secondary-a));\n  border-color: hsla(var(--ig-secondary-100), var(--ig-secondary-a));\n}\n\n[part~=date-inner][part~=selected][part~=range][part~=first],\n[part~=date-inner][part~=selected][part~=range][part~=last],\n[part~=date-inner][part~=selected]:not([part~=range]) {\n  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  border-color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n[part~=date-inner][part~=selected][part~=range][part~=first]:hover, [part~=date-inner][part~=selected][part~=range][part~=first]:focus,\n[part~=date-inner][part~=selected][part~=range][part~=last]:hover,\n[part~=date-inner][part~=selected][part~=range][part~=last]:focus,\n[part~=date-inner][part~=selected]:not([part~=range]):hover,\n[part~=date-inner][part~=selected]:not([part~=range]):focus {\n  background: hsla(var(--ig-secondary-700), var(--ig-secondary-a));\n  border-color: hsla(var(--ig-secondary-700), var(--ig-secondary-a));\n  color: var(--ig-secondary-700-contrast);\n}\n\n[part~=date-inner][part~=selected][part~=weekend]:not([part~=range]),\n[part~=date-inner][part~=selected][part~=inactive]:not([part~=range]),\n[part~=date-inner][part~=selected]:not([part~=range]) {\n  color: var(--ig-secondary-700-contrast);\n}\n\n[part~=week-number] {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n[part=\"week-number-inner first\"] {\n  border-top-left-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem);\n  border-top-right-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem);\n}\n\n[part=\"week-number-inner last\"] {\n  border-bottom-left-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem);\n  border-bottom-right-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem);\n}\n\n[part~=week-number-inner] {\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n  border-inline-end-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n[part~=week-number-inner]::after {\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n  -webkit-border-start: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));\n          border-inline-start: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));\n  -webkit-border-end: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));\n          border-inline-end: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n\n[part~=date-inner][part~=special][part~=range],\n[part~=date-inner][part~=special] {\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n  border-color: hsla(var(--ig-gray-100), var(--ig-gray-a));\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  font-weight: 900;\n}\n[part~=date-inner][part~=special][part~=range]:hover, [part~=date-inner][part~=special][part~=range]:focus,\n[part~=date-inner][part~=special]:hover,\n[part~=date-inner][part~=special]:focus {\n  background: hsla(var(--ig-secondary-100), var(--ig-secondary-a));\n  border-color: hsla(var(--ig-secondary-100), var(--ig-secondary-a));\n}`;\n"]}

package/components/calendar/themes/light/material/year-month-view.material.css.js

@@ -0,0 +1,40 @@
+import { css } from 'lit';
+export const styles = css `[part~=month-inner]:hover, [part~=month-inner]:focus,
+[part~=year-inner]:hover,
+[part~=year-inner]:focus {
+  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
+}
+[part~=month-inner]:hover,
+[part~=year-inner]:hover {
+  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
+}
+
+[part~=month-inner][part~=selected],
+[part~=year-inner][part~=selected] {
+  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
+  color: var(--ig-secondary-600-contrast);
+}
+[part~=month-inner][part~=selected]:hover,
+[part~=year-inner][part~=selected]:hover {
+  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
+  color: var(--ig-secondary-600-contrast);
+}
+[part~=month-inner][part~=selected]:focus,
+[part~=year-inner][part~=selected]:focus {
+  outline: none;
+  background: hsla(var(--ig-secondary-700), var(--ig-secondary-a));
+  color: var(--ig-secondary-700-contrast);
+}
+
+[part~=month-inner][part~=current],
+[part~=year-inner][part~=current] {
+  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));
+          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));
+}
+
+[part~=month-inner][part~=selected][part~=current],
+[part~=year-inner][part~=selected][part~=current] {
+  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));
+          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));
+}`;
+//# sourceMappingURL=year-month-view.material.css.js.map

package/components/calendar/themes/light/material/year-month-view.material.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"year-month-view.material.css.js","sourceRoot":"","sources":["../../../../../../src/components/calendar/themes/light/material/year-month-view.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part~=month-inner]:hover, [part~=month-inner]:focus,\n[part~=year-inner]:hover,\n[part~=year-inner]:focus {\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n[part~=month-inner]:hover,\n[part~=year-inner]:hover {\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n\n[part~=month-inner][part~=selected],\n[part~=year-inner][part~=selected] {\n  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  color: var(--ig-secondary-600-contrast);\n}\n[part~=month-inner][part~=selected]:hover,\n[part~=year-inner][part~=selected]:hover {\n  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  color: var(--ig-secondary-600-contrast);\n}\n[part~=month-inner][part~=selected]:focus,\n[part~=year-inner][part~=selected]:focus {\n  outline: none;\n  background: hsla(var(--ig-secondary-700), var(--ig-secondary-a));\n  color: var(--ig-secondary-700-contrast);\n}\n\n[part~=month-inner][part~=current],\n[part~=year-inner][part~=current] {\n  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n\n[part~=month-inner][part~=selected][part~=current],\n[part~=year-inner][part~=selected][part~=current] {\n  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}`;\n"]}

package/components/calendar/themes/year-month-view.base.css.js

@@ -53,43 +53,5 @@ export const styles = css `:host {
           user-select: none;
   cursor: pointer;
   padding: 0 0.75rem;
-}
-[part~=month-inner]:hover, [part~=month-inner]:focus,
-[part~=year-inner]:hover,
-[part~=year-inner]:focus {
-  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
-}
-[part~=month-inner]:hover,
-[part~=year-inner]:hover {
-  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
-}
-
-[part~=month-inner][part~=selected],
-[part~=year-inner][part~=selected] {
-  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
-  color: var(--ig-secondary-600-contrast);
-}
-[part~=month-inner][part~=selected]:hover,
-[part~=year-inner][part~=selected]:hover {
-  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
-  color: var(--ig-secondary-600-contrast);
-}
-[part~=month-inner][part~=selected]:focus,
-[part~=year-inner][part~=selected]:focus {
-  outline: none;
-  background: hsla(var(--ig-secondary-700), var(--ig-secondary-a));
-  color: var(--ig-secondary-700-contrast);
-}
-
-[part~=month-inner][part~=current],
-[part~=year-inner][part~=current] {
-  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));
-          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));
-}
-
-[part~=month-inner][part~=selected][part~=current],
-[part~=year-inner][part~=selected][part~=current] {
-  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));
-          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));
 }`;
 //# sourceMappingURL=year-month-view.base.css.js.map

package/components/calendar/themes/year-month-view.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"year-month-view.base.css.js","sourceRoot":"","sources":["../../../../src/components/calendar/themes/year-month-view.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4FvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`: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  min-width: 18.125rem;\n  outline: none;\n  padding: 0 0.75rem 1rem 0.75rem;\n  overflow: hidden;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  gap: 0.25rem;\n}\n\n[part=months-row],\n[part=years-row] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n[part~=month],\n[part~=year] {\n  -webkit-box-flex: 1;\n      -ms-flex: 1;\n          flex: 1;\n}\n\n[part~=month],\n[part~=year],\n[part~=month-inner],\n[part~=year-inner] {\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}\n\n[part~=month-inner],\n[part~=year-inner] {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n  padding: 0 0.75rem;\n}\n[part~=month-inner]:hover, [part~=month-inner]:focus,\n[part~=year-inner]:hover,\n[part~=year-inner]:focus {\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n[part~=month-inner]:hover,\n[part~=year-inner]:hover {\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n\n[part~=month-inner][part~=selected],\n[part~=year-inner][part~=selected] {\n  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  color: var(--ig-secondary-600-contrast);\n}\n[part~=month-inner][part~=selected]:hover,\n[part~=year-inner][part~=selected]:hover {\n  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  color: var(--ig-secondary-600-contrast);\n}\n[part~=month-inner][part~=selected]:focus,\n[part~=year-inner][part~=selected]:focus {\n  outline: none;\n  background: hsla(var(--ig-secondary-700), var(--ig-secondary-a));\n  color: var(--ig-secondary-700-contrast);\n}\n\n[part~=month-inner][part~=current],\n[part~=year-inner][part~=current] {\n  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n\n[part~=month-inner][part~=selected][part~=current],\n[part~=year-inner][part~=selected][part~=current] {\n  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}`;\n"]}
+{"version":3,"file":"year-month-view.base.css.js","sourceRoot":"","sources":["../../../../src/components/calendar/themes/year-month-view.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`: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  min-width: 18.125rem;\n  outline: none;\n  padding: 0 0.75rem 1rem 0.75rem;\n  overflow: hidden;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  gap: 0.25rem;\n}\n\n[part=months-row],\n[part=years-row] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n[part~=month],\n[part~=year] {\n  -webkit-box-flex: 1;\n      -ms-flex: 1;\n          flex: 1;\n}\n\n[part~=month],\n[part~=year],\n[part~=month-inner],\n[part~=year-inner] {\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}\n\n[part~=month-inner],\n[part~=year-inner] {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: pointer;\n  padding: 0 0.75rem;\n}`;\n"]}

package/components/calendar/years-view/years-view.d.ts

@@ -14,6 +14,7 @@ declare const IgcYearsViewComponent_base: import("../../common/mixins/constructo
 export default class IgcYearsViewComponent extends IgcYearsViewComponent_base {
     static readonly tagName = "igc-years-view";
     static styles: import("lit").CSSResult;
+    static register(): void;
     private years;
     private activeYear;
     /** Тhe current value of the calendar. */

package/components/calendar/years-view/years-view.js

@@ -10,14 +10,20 @@ import { themes } from '../../../theming/theming-decorator.js';
 import { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';
 import { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';
 import { watch } from '../../common/decorators/watch.js';
+import { registerComponent } from '../../common/definitions/register.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
 import { partNameMap } from '../../common/util.js';
 import { YEARS_PER_ROW, } from '../common/calendar-base.js';
 import { calculateYearsRangeStart, setDateSafe } from '../common/utils.js';
-import { styles as bootstrap } from '../themes/bootstrap/year-month-view.bootstrap.css.js';
-import { styles as fluent } from '../themes/fluent/year-month-view.fluent.css.js';
 import { styles } from '../themes/year-month-view.base.css.js';
+import { styles as bootstrap } from '../themes/light/bootstrap/year-month-view.bootstrap.css.js';
+import { styles as fluent } from '../themes/light/fluent/year-month-view.fluent.css.js';
+import { styles as material } from '../themes/light/material/year-month-view.material.css.js';
+import { styles as indigo } from '../themes/light/indigo/year-month-view.indigo.css.js';
 let IgcYearsViewComponent = class IgcYearsViewComponent extends EventEmitterMixin(LitElement) {
+    static register() {
+        registerComponent(this);
+    }
     datesChange() {
         this.years = this.generateYears();
     }
@@ -114,8 +120,18 @@ IgcYearsViewComponent = __decorate([
     blazorIndirectRender,
     blazorSuppressComponent,
     themes({
-        bootstrap,
-        fluent,
+        light: {
+            bootstrap,
+            fluent,
+            material,
+            indigo,
+        },
+        dark: {
+            bootstrap,
+            fluent,
+            material,
+            indigo,
+        },
     })
 ], IgcYearsViewComponent);
 export default IgcYearsViewComponent;

package/components/calendar/years-view/years-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"years-view.js","sourceRoot":"","sources":["../../../../src/components/calendar/years-view/years-view.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { themes } from '../../../theming/theming-decorator.js';\nimport { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';\nimport { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';\nimport { watch } from '../../common/decorators/watch.js';\nimport { Constructor } from '../../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../../common/mixins/event-emitter.js';\nimport { partNameMap } from '../../common/util.js';\nimport {\n  IgcCalendarBaseEventMap,\n  YEARS_PER_ROW,\n} from '../common/calendar-base.js';\nimport { calculateYearsRangeStart, setDateSafe } from '../common/utils.js';\nimport { styles as bootstrap } from '../themes/bootstrap/year-month-view.bootstrap.css.js';\nimport { styles as fluent } from '../themes/fluent/year-month-view.fluent.css.js';\nimport { styles } from '../themes/year-month-view.base.css.js';\n\n/**\n * Instantiate a years view as a separate component in the calendar.\n *\n * @element igc-years-view\n *\n * @csspart years-row - The years row container.\n * @csspart year - The year container.\n * @csspart year-inner - The inner year container.\n */\n@blazorIndirectRender\n@blazorSuppressComponent\n@themes({\n  bootstrap,\n  fluent,\n})\nexport default class IgcYearsViewComponent extends EventEmitterMixin<\n  IgcCalendarBaseEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-years-view';\n  public static styles = styles;\n\n  private years!: Date[][];\n\n  @query('[tabindex=\"0\"]')\n  private activeYear!: HTMLElement;\n\n  /** Тhe current value of the calendar. */\n  @property({ attribute: false })\n  public value = new Date();\n\n  /** Sets how many years are displayed on a single page. */\n  @property({ type: Number, attribute: 'years-per-page' })\n  public yearsPerPage = 15;\n\n  @watch('value')\n  @watch('yearsPerPage')\n  protected datesChange() {\n    this.years = this.generateYears();\n  }\n\n  constructor() {\n    super();\n    this.setAttribute('role', 'grid');\n  }\n\n  /** Focuses the active date. */\n  public focusActiveDate() {\n    this.activeYear.focus();\n  }\n\n  private formattedYear(value: Date) {\n    return `${value.getFullYear()}`;\n  }\n\n  private generateYears() {\n    const startYear = calculateYearsRangeStart(this.value, this.yearsPerPage);\n    const month = this.value.getMonth();\n    const result = [];\n\n    const rows = this.yearsPerPage / YEARS_PER_ROW;\n\n    for (let i = 0; i < rows; i++) {\n      const row: Date[] = [];\n      for (let j = 0; j < YEARS_PER_ROW; j++) {\n        const year = startYear + i * YEARS_PER_ROW + j;\n        const date = new Date(year, month, 1);\n        // fix year since values between 0 and 100 results in 1900s\n        date.setFullYear(year);\n        row.push(date);\n      }\n      result.push(row);\n    }\n\n    return result;\n  }\n\n  private resolveYearPartName(date: Date) {\n    const today = new Date();\n    return {\n      year: true,\n      selected: date.getFullYear() === this.value.getFullYear(),\n      current: date.getFullYear() === today.getFullYear(),\n    };\n  }\n\n  private selectYear(year: Date) {\n    const value = new Date(year);\n    setDateSafe(value, this.value.getDate());\n    this.value = value;\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  private yearKeyDown(event: KeyboardEvent, year: Date) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.selectYear(year);\n    }\n  }\n\n  protected override render() {\n    return html`${this.years.map((row) => {\n      return html`<div part=\"years-row\" role=\"row\">\n        ${row.map((year) => {\n          const yearPartName = partNameMap(this.resolveYearPartName(year));\n          const yearInnerPartName = yearPartName.replace('year', 'year-inner');\n\n          return html`<span part=${yearPartName}>\n            <span\n              part=${yearInnerPartName}\n              role=\"gridcell\"\n              aria-selected=${year.getFullYear() === this.value.getFullYear()}\n              tabindex=\"${year.getFullYear() === this.value.getFullYear()\n                ? 0\n                : -1}\"\n              @click=${() => this.selectYear(year)}\n              @keydown=${(event: KeyboardEvent) =>\n                this.yearKeyDown(event, year)}\n            >\n              ${this.formattedYear(year)}\n            </span>\n          </span>`;\n        })}\n      </div>`;\n    })}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-years-view': IgcYearsViewComponent;\n  }\n}\n"]}
+{"version":3,"file":"years-view.js","sourceRoot":"","sources":["../../../../src/components/calendar/years-view/years-view.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { themes } from '../../../theming/theming-decorator.js';\nimport { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';\nimport { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';\nimport { watch } from '../../common/decorators/watch.js';\nimport { registerComponent } from '../../common/definitions/register.js';\nimport { Constructor } from '../../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../../common/mixins/event-emitter.js';\nimport { partNameMap } from '../../common/util.js';\nimport {\n  IgcCalendarBaseEventMap,\n  YEARS_PER_ROW,\n} from '../common/calendar-base.js';\nimport { calculateYearsRangeStart, setDateSafe } from '../common/utils.js';\nimport { styles } from '../themes/year-month-view.base.css.js';\nimport { styles as bootstrap } from '../themes/light/bootstrap/year-month-view.bootstrap.css.js';\nimport { styles as fluent } from '../themes/light/fluent/year-month-view.fluent.css.js';\nimport { styles as material } from '../themes/light/material/year-month-view.material.css.js';\nimport { styles as indigo } from '../themes/light/indigo/year-month-view.indigo.css.js';\n\n/**\n * Instantiate a years view as a separate component in the calendar.\n *\n * @element igc-years-view\n *\n * @csspart years-row - The years row container.\n * @csspart year - The year container.\n * @csspart year-inner - The inner year container.\n */\n@blazorIndirectRender\n@blazorSuppressComponent\n@themes({\n  light: {\n    bootstrap,\n    fluent,\n    material,\n    indigo,\n  },\n  dark: {\n    bootstrap,\n    fluent,\n    material,\n    indigo,\n  },\n})\nexport default class IgcYearsViewComponent extends EventEmitterMixin<\n  IgcCalendarBaseEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-years-view';\n  public static styles = styles;\n\n  public static register() {\n    registerComponent(this);\n  }\n\n  private years!: Date[][];\n\n  @query('[tabindex=\"0\"]')\n  private activeYear!: HTMLElement;\n\n  /** Тhe current value of the calendar. */\n  @property({ attribute: false })\n  public value = new Date();\n\n  /** Sets how many years are displayed on a single page. */\n  @property({ type: Number, attribute: 'years-per-page' })\n  public yearsPerPage = 15;\n\n  @watch('value')\n  @watch('yearsPerPage')\n  protected datesChange() {\n    this.years = this.generateYears();\n  }\n\n  constructor() {\n    super();\n    this.setAttribute('role', 'grid');\n  }\n\n  /** Focuses the active date. */\n  public focusActiveDate() {\n    this.activeYear.focus();\n  }\n\n  private formattedYear(value: Date) {\n    return `${value.getFullYear()}`;\n  }\n\n  private generateYears() {\n    const startYear = calculateYearsRangeStart(this.value, this.yearsPerPage);\n    const month = this.value.getMonth();\n    const result = [];\n\n    const rows = this.yearsPerPage / YEARS_PER_ROW;\n\n    for (let i = 0; i < rows; i++) {\n      const row: Date[] = [];\n      for (let j = 0; j < YEARS_PER_ROW; j++) {\n        const year = startYear + i * YEARS_PER_ROW + j;\n        const date = new Date(year, month, 1);\n        // fix year since values between 0 and 100 results in 1900s\n        date.setFullYear(year);\n        row.push(date);\n      }\n      result.push(row);\n    }\n\n    return result;\n  }\n\n  private resolveYearPartName(date: Date) {\n    const today = new Date();\n    return {\n      year: true,\n      selected: date.getFullYear() === this.value.getFullYear(),\n      current: date.getFullYear() === today.getFullYear(),\n    };\n  }\n\n  private selectYear(year: Date) {\n    const value = new Date(year);\n    setDateSafe(value, this.value.getDate());\n    this.value = value;\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  private yearKeyDown(event: KeyboardEvent, year: Date) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.selectYear(year);\n    }\n  }\n\n  protected override render() {\n    return html`${this.years.map((row) => {\n      return html`<div part=\"years-row\" role=\"row\">\n        ${row.map((year) => {\n          const yearPartName = partNameMap(this.resolveYearPartName(year));\n          const yearInnerPartName = yearPartName.replace('year', 'year-inner');\n\n          return html`<span part=${yearPartName}>\n            <span\n              part=${yearInnerPartName}\n              role=\"gridcell\"\n              aria-selected=${year.getFullYear() === this.value.getFullYear()}\n              tabindex=\"${year.getFullYear() === this.value.getFullYear()\n                ? 0\n                : -1}\"\n              @click=${() => this.selectYear(year)}\n              @keydown=${(event: KeyboardEvent) =>\n                this.yearKeyDown(event, year)}\n            >\n              ${this.formattedYear(year)}\n            </span>\n          </span>`;\n        })}\n      </div>`;\n    })}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-years-view': IgcYearsViewComponent;\n  }\n}\n"]}

package/components/card/card.actions.d.ts

@@ -9,6 +9,7 @@ import { LitElement } from 'lit';
 export default class IgcCardActionsComponent extends LitElement {
     static readonly tagName = "igc-card-actions";
     static styles: import("lit").CSSResult;
+    static register(): void;
     /**
      * The orientation of the actions.
      * @attr

package/components/card/card.actions.js

@@ -7,13 +7,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
+import { registerComponent } from '../common/definitions/register.js';
 import { styles as bootstrap } from './themes/light/card.actions.bootstrap.css.js';
-import { styles } from './themes/light/card.actions.material.css.js';
+import { styles } from './themes/light/card.actions.base.css.js';
 let IgcCardActionsComponent = class IgcCardActionsComponent extends LitElement {
     constructor() {
         super(...arguments);
         this.orientation = 'horizontal';
     }
+    static register() {
+        registerComponent(this);
+    }
     render() {
         return html `
       <slot name="start"></slot>
@@ -28,7 +32,7 @@ __decorate([
     property({ reflect: true })
 ], IgcCardActionsComponent.prototype, "orientation", void 0);
 IgcCardActionsComponent = __decorate([
-    themes({ bootstrap })
+    themes({ light: { bootstrap }, dark: { bootstrap } })
 ], IgcCardActionsComponent);
 export default IgcCardActionsComponent;
 //# sourceMappingURL=card.actions.js.map

package/components/card/card.actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.actions.js","sourceRoot":"","sources":["../../../src/components/card/card.actions.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,8CAA8C,CAAC;AACnF,OAAO,EAAE,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAUrE,IAAqB,uBAAuB,GAA5C,MAAqB,uBAAwB,SAAQ,UAAU;IAA/D;;QASS,gBAAW,GAA8B,YAAY,CAAC;IAS/D,CAAC;IAPoB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAhBsB,+BAAO,GAAG,kBAAkB,AAArB,CAAsB;AAC7B,8BAAM,GAAG,MAAM,AAAT,CAAU;AAOhC;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4DACiC;AAT1C,uBAAuB;IAD3C,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;GACD,uBAAuB,CAkB3C;eAlBoB,uBAAuB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles as bootstrap } from './themes/light/card.actions.bootstrap.css.js';\nimport { styles } from './themes/light/card.actions.material.css.js';\n\n/** A container for card action items like buttons\n * @element igc-card-actions\n *\n * @slot start - Renders items at the beginning of actions area\n * @slot - Renders items at the middle of actions area\n * @slot end - Renders items at the end of actions area\n */\n@themes({ bootstrap })\nexport default class IgcCardActionsComponent extends LitElement {\n  public static readonly tagName = 'igc-card-actions';\n  public static override styles = styles;\n\n  /**\n   * The orientation of the actions.\n   * @attr\n   */\n  @property({ reflect: true })\n  public orientation: 'vertical' | 'horizontal' = 'horizontal';\n\n  protected override render() {\n    return html`\n      <slot name=\"start\"></slot>\n      <slot></slot>\n      <slot name=\"end\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-card-actions': IgcCardActionsComponent;\n  }\n}\n"]}
+{"version":3,"file":"card.actions.js","sourceRoot":"","sources":["../../../src/components/card/card.actions.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,8CAA8C,CAAC;AACnF,OAAO,EAAE,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAUjE,IAAqB,uBAAuB,GAA5C,MAAqB,uBAAwB,SAAQ,UAAU;IAA/D;;QAaS,gBAAW,GAA8B,YAAY,CAAC;IAS/D,CAAC;IAlBQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IASkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AApBsB,+BAAO,GAAG,kBAAkB,AAArB,CAAsB;AAC7B,8BAAM,GAAG,MAAM,AAAT,CAAU;AAWhC;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4DACiC;AAb1C,uBAAuB;IAD3C,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC;GACjC,uBAAuB,CAsB3C;eAtBoB,uBAAuB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { styles as bootstrap } from './themes/light/card.actions.bootstrap.css.js';\nimport { styles } from './themes/light/card.actions.base.css.js';\n\n/** A container for card action items like buttons\n * @element igc-card-actions\n *\n * @slot start - Renders items at the beginning of actions area\n * @slot - Renders items at the middle of actions area\n * @slot end - Renders items at the end of actions area\n */\n@themes({ light: { bootstrap }, dark: { bootstrap } })\nexport default class IgcCardActionsComponent extends LitElement {\n  public static readonly tagName = 'igc-card-actions';\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(this);\n  }\n\n  /**\n   * The orientation of the actions.\n   * @attr\n   */\n  @property({ reflect: true })\n  public orientation: 'vertical' | 'horizontal' = 'horizontal';\n\n  protected override render() {\n    return html`\n      <slot name=\"start\"></slot>\n      <slot></slot>\n      <slot name=\"end\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-card-actions': IgcCardActionsComponent;\n  }\n}\n"]}

package/components/card/card.content.d.ts

@@ -7,6 +7,7 @@ import { LitElement } from 'lit';
 export default class IgcCardContentComponent extends LitElement {
     static readonly tagName = "igc-card-content";
     static styles: import("lit").CSSResult;
+    static register(): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/card/card.content.js

@@ -6,9 +6,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { styles } from './themes/light/card.content.base.css.js';
 import { styles as bootstrap } from './themes/light/card.content.bootstrap.css.js';
-import { styles } from './themes/light/card.content.material.css.js';
+import { styles as fluent } from './themes/light/card.content.fluent.css.js';
+import { styles as indigo } from './themes/light/card.content.indigo.css.js';
+import { styles as material } from './themes/light/card.content.material.css.js';
 let IgcCardContentComponent = class IgcCardContentComponent extends LitElement {
+    static register() {
+        registerComponent(this);
+    }
     render() {
         return html ` <slot></slot> `;
     }
@@ -16,7 +23,20 @@ let IgcCardContentComponent = class IgcCardContentComponent extends LitElement {
 IgcCardContentComponent.tagName = 'igc-card-content';
 IgcCardContentComponent.styles = styles;
 IgcCardContentComponent = __decorate([
-    themes({ bootstrap })
+    themes({
+        light: {
+            material,
+            bootstrap,
+            fluent,
+            indigo,
+        },
+        dark: {
+            material,
+            bootstrap,
+            fluent,
+            indigo,
+        },
+    })
 ], IgcCardContentComponent);
 export default IgcCardContentComponent;
 //# sourceMappingURL=card.content.js.map

package/components/card/card.content.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.content.js","sourceRoot":"","sources":["../../../src/components/card/card.content.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,8CAA8C,CAAC;AACnF,OAAO,EAAE,MAAM,EAAE,MAAM,6CAA6C,CAAC;AAQrE,IAAqB,uBAAuB,GAA5C,MAAqB,uBAAwB,SAAQ,UAAU;IAI1C,MAAM;QACvB,OAAO,IAAI,CAAA,iBAAiB,CAAC;IAC/B,CAAC;;AALsB,+BAAO,GAAG,kBAAkB,AAArB,CAAsB;AAC7B,8BAAM,GAAG,MAAM,AAAT,CAAU;AAFpB,uBAAuB;IAD3C,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;GACD,uBAAuB,CAO3C;eAPoB,uBAAuB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles as bootstrap } from './themes/light/card.content.bootstrap.css.js';\nimport { styles } from './themes/light/card.content.material.css.js';\n\n/** A container for card's text content\n * @element igc-card-content\n *\n * @slot - Renders the card text content\n */\n@themes({ bootstrap })\nexport default class IgcCardContentComponent extends LitElement {\n  public static readonly tagName = 'igc-card-content';\n  public static override styles = styles;\n\n  protected override render() {\n    return html` <slot></slot> `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-card-content': IgcCardContentComponent;\n  }\n}\n"]}
+{"version":3,"file":"card.content.js","sourceRoot":"","sources":["../../../src/components/card/card.content.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,yCAAyC,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,8CAA8C,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,2CAA2C,CAAC;AAC7E,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAqBjF,IAAqB,uBAAuB,GAA5C,MAAqB,uBAAwB,SAAQ,UAAU;IAItD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,iBAAiB,CAAC;IAC/B,CAAC;;AATsB,+BAAO,GAAG,kBAAkB,AAArB,CAAsB;AAC7B,8BAAM,GAAG,MAAM,AAAT,CAAU;AAFpB,uBAAuB;IAd3C,MAAM,CAAC;QACN,KAAK,EAAE;YACL,QAAQ;YACR,SAAS;YACT,MAAM;YACN,MAAM;SACP;QACD,IAAI,EAAE;YACJ,QAAQ;YACR,SAAS;YACT,MAAM;YACN,MAAM;SACP;KACF,CAAC;GACmB,uBAAuB,CAW3C;eAXoB,uBAAuB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { styles } from './themes/light/card.content.base.css.js';\nimport { styles as bootstrap } from './themes/light/card.content.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/card.content.fluent.css.js';\nimport { styles as indigo } from './themes/light/card.content.indigo.css.js';\nimport { styles as material } from './themes/light/card.content.material.css.js';\n\n/** A container for card's text content\n * @element igc-card-content\n *\n * @slot - Renders the card text content\n */\n@themes({\n  light: {\n    material,\n    bootstrap,\n    fluent,\n    indigo,\n  },\n  dark: {\n    material,\n    bootstrap,\n    fluent,\n    indigo,\n  },\n})\nexport default class IgcCardContentComponent extends LitElement {\n  public static readonly tagName = 'igc-card-content';\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(this);\n  }\n\n  protected override render() {\n    return html` <slot></slot> `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-card-content': IgcCardContentComponent;\n  }\n}\n"]}

package/components/card/card.d.ts

@@ -7,6 +7,7 @@ import { LitElement } from 'lit';
 export default class IgcCardComponent extends LitElement {
     static readonly tagName = "igc-card";
     static styles: import("lit").CSSResult;
+    static register(): void;
     /**
      * Sets card elevated style, otherwise card looks outlined.
      * @attr

package/components/card/card.header.d.ts

@@ -12,6 +12,7 @@ import { LitElement } from 'lit';
 export default class IgcCardHeaderComponent extends LitElement {
     static readonly tagName = "igc-card-header";
     static styles: import("lit").CSSResult;
+    static register(): void;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/components/card/card.header.js

@@ -6,11 +6,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { styles as material } from './themes/light/card.header.material.css.js';
 import { styles as bootstrap } from './themes/light/card.header.bootstrap.css.js';
 import { styles as fluent } from './themes/light/card.header.fluent.css.js';
 import { styles as indigo } from './themes/light/card.header.indigo.css.js';
-import { styles } from './themes/light/card.header.material.css.js';
+import { styles } from './themes/light/card.header.base.css.js';
 let IgcCardHeaderComponent = class IgcCardHeaderComponent extends LitElement {
+    static register() {
+        registerComponent(this);
+    }
     render() {
         return html `
       <section>
@@ -30,9 +35,18 @@ IgcCardHeaderComponent.tagName = 'igc-card-header';
 IgcCardHeaderComponent.styles = styles;
 IgcCardHeaderComponent = __decorate([
     themes({
-        bootstrap,
-        fluent,
-        indigo,
+        light: {
+            material,
+            bootstrap,
+            fluent,
+            indigo,
+        },
+        dark: {
+            material,
+            bootstrap,
+            fluent,
+            indigo,
+        },
     })
 ], IgcCardHeaderComponent);
 export default IgcCardHeaderComponent;

package/components/card/card.header.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.header.js","sourceRoot":"","sources":["../../../src/components/card/card.header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,6CAA6C,CAAC;AAClF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAiBpE,IAAqB,sBAAsB,GAA3C,MAAqB,sBAAuB,SAAQ,UAAU;IAIzC,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;;;;;;;KAWV,CAAC;IACJ,CAAC;;AAhBsB,8BAAO,GAAG,iBAAiB,AAApB,CAAqB;AAC5B,6BAAM,GAAG,MAAM,AAAT,CAAU;AAFpB,sBAAsB;IAL1C,MAAM,CAAC;QACN,SAAS;QACT,MAAM;QACN,MAAM;KACP,CAAC;GACmB,sBAAsB,CAkB1C;eAlBoB,sBAAsB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { styles as bootstrap } from './themes/light/card.header.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/card.header.fluent.css.js';\nimport { styles as indigo } from './themes/light/card.header.indigo.css.js';\nimport { styles } from './themes/light/card.header.material.css.js';\n\n/** A container for card's header\n * @element igc-card-header\n *\n * @slot thumbnail - Renders header media like icon\n * @slot title - Renders the card title\n * @slot subtitle - Renders the card subtitle\n * @slot - Renders content next to the card title\n *\n * @csspart header - The card header container\n */\n@themes({\n  bootstrap,\n  fluent,\n  indigo,\n})\nexport default class IgcCardHeaderComponent extends LitElement {\n  public static readonly tagName = 'igc-card-header';\n  public static override styles = styles;\n\n  protected override render() {\n    return html`\n      <section>\n        <slot name=\"thumbnail\"></slot>\n      </section>\n      <section>\n        <header part=\"header\">\n          <slot part=\"title\" name=\"title\"></slot>\n          <slot part=\"subtitle\" name=\"subtitle\"></slot>\n        </header>\n        <slot></slot>\n      </section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-card-header': IgcCardHeaderComponent;\n  }\n}\n"]}
+{"version":3,"file":"card.header.js","sourceRoot":"","sources":["../../../src/components/card/card.header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAChF,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,6CAA6C,CAAC;AAClF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,wCAAwC,CAAC;AA0BhE,IAAqB,sBAAsB,GAA3C,MAAqB,sBAAuB,SAAQ,UAAU;IAIrD,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;;;;;;;KAWV,CAAC;IACJ,CAAC;;AApBsB,8BAAO,GAAG,iBAAiB,AAApB,CAAqB;AAC5B,6BAAM,GAAG,MAAM,AAAT,CAAU;AAFpB,sBAAsB;IAd1C,MAAM,CAAC;QACN,KAAK,EAAE;YACL,QAAQ;YACR,SAAS;YACT,MAAM;YACN,MAAM;SACP;QACD,IAAI,EAAE;YACJ,QAAQ;YACR,SAAS;YACT,MAAM;YACN,MAAM;SACP;KACF,CAAC;GACmB,sBAAsB,CAsB1C;eAtBoB,sBAAsB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { styles as material } from './themes/light/card.header.material.css.js';\nimport { styles as bootstrap } from './themes/light/card.header.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/card.header.fluent.css.js';\nimport { styles as indigo } from './themes/light/card.header.indigo.css.js';\nimport { styles } from './themes/light/card.header.base.css.js';\n\n/** A container for card's header\n * @element igc-card-header\n *\n * @slot thumbnail - Renders header media like icon\n * @slot title - Renders the card title\n * @slot subtitle - Renders the card subtitle\n * @slot - Renders content next to the card title\n *\n * @csspart header - The card header container\n */\n@themes({\n  light: {\n    material,\n    bootstrap,\n    fluent,\n    indigo,\n  },\n  dark: {\n    material,\n    bootstrap,\n    fluent,\n    indigo,\n  },\n})\nexport default class IgcCardHeaderComponent extends LitElement {\n  public static readonly tagName = 'igc-card-header';\n  public static override styles = styles;\n\n  public static register() {\n    registerComponent(this);\n  }\n\n  protected override render() {\n    return html`\n      <section>\n        <slot name=\"thumbnail\"></slot>\n      </section>\n      <section>\n        <header part=\"header\">\n          <slot part=\"title\" name=\"title\"></slot>\n          <slot part=\"subtitle\" name=\"subtitle\"></slot>\n        </header>\n        <slot></slot>\n      </section>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-card-header': IgcCardHeaderComponent;\n  }\n}\n"]}

package/components/card/card.js

@@ -7,21 +7,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
+import { styles } from './themes/light/card.base.css.js';
+import { styles as material } from './themes/light/card.material.css.js';
 import { styles as bootstrap } from './themes/light/card.bootstrap.css.js';
 import { styles as fluent } from './themes/light/card.fluent.css.js';
 import { styles as indigo } from './themes/light/card.indigo.css.js';
-import { styles } from './themes/light/card.material.css.js';
-import { defineComponents } from '../common/definitions/defineComponents.js';
+import { registerComponent } from '../common/definitions/register.js';
 import IgcCardActionsComponent from './card.actions.js';
 import IgcCardContentComponent from './card.content.js';
 import IgcCardHeaderComponent from './card.header.js';
 import IgcCardMediaComponent from './card.media.js';
-defineComponents(IgcCardActionsComponent, IgcCardContentComponent, IgcCardHeaderComponent, IgcCardMediaComponent);
 let IgcCardComponent = class IgcCardComponent extends LitElement {
     constructor() {
         super(...arguments);
         this.elevated = false;
     }
+    static register() {
+        registerComponent(this, IgcCardActionsComponent, IgcCardContentComponent, IgcCardHeaderComponent, IgcCardMediaComponent);
+    }
     render() {
         return html ` <slot></slot> `;
     }
@@ -33,9 +36,18 @@ __decorate([
 ], IgcCardComponent.prototype, "elevated", void 0);
 IgcCardComponent = __decorate([
     themes({
-        bootstrap,
-        fluent,
-        indigo,
+        light: {
+            material,
+            bootstrap,
+            fluent,
+            indigo,
+        },
+        dark: {
+            material,
+            bootstrap,
+            fluent,
+            indigo,
+        },
     })
 ], IgcCardComponent);
 export default IgcCardComponent;