igniteui-webcomponents 7.3.1 → 7.3.2

package/CHANGELOG.md

@@ -4,7 +4,26 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## [Unreleased]
+## [7.3.2] - 2026-09-09
+### Added
+- #### Library
+  - Each GitHub release now carries a CycloneDX 1.6 SBOM for the published package and for the build environment, together with Sigstore attestations for the build provenance and for the SBOM. The release notes link the attestations, thus you can verify the tarball that you install. [#2370](https://github.com/IgniteUI/igniteui-webcomponents/pull/2370)
+- #### QR code
+  - `toBlob()` serializes the rendered code to an `image/svg+xml` blob. Theme colors become plain `fill` attributes and a logo that is not a data URI is fetched and inlined, so the output renders the same outside the component. [#2367](https://github.com/IgniteUI/igniteui-webcomponents/pull/2367)
+  - `toImage(options)` exports the code as a `File` in `svg`, `png`, `jpeg` or `webp` format. The `scale` option multiplies the component `size`, thus a 256px code with `scale: 2` gives a 512x512 image. Set `download: true` to open the browser download dialog. The `QrCodeExportFormat` and `QrCodeExportOptions` types are exported from the package entry point.
+- #### Themes
+  - All components now carry `forced-colors: active` styles in the Material, Bootstrap, Fluent and Indigo themes. Thus in Windows High Contrast mode they draw from the system palette (`CanvasText`, `Highlight`, `GrayText`, `LinkText`), and the disabled, hover, focus and selected states stay distinguishable. [#2347](https://github.com/IgniteUI/igniteui-webcomponents/pull/2347)
+
+### Changed
+- #### Calendar, Date picker, Date range picker
+  - When `week-start` is not set, the week starts on the first day of the week of the `locale`, as reported by `Intl.Locale.prototype.getWeekInfo()`. For example, `bg` starts on Monday and `en` stays on Sunday. An explicit `week-start` has priority. Set `weekStart` to `undefined` to return to the locale value. Browsers without `getWeekInfo()` keep the Sunday default. [#1020](https://github.com/IgniteUI/igniteui-webcomponents/issues/1020)
+  - The header date and the month/year navigation follow the field order of the `locale`. For `ja`, the header shows `7月15日(火)`, and the year button precedes the month button and shows `2025年`. The years view keeps plain numbers. In vertical header orientation, the weekday line has no trailing comma. [#1712](https://github.com/IgniteUI/igniteui-webcomponents/issues/1712)
+
+### Fixed
+- #### Library
+  - `defineAllComponents()` did not register `igc-qr-code` and `igc-virtual-scroll`. Thus the two components stayed undefined when you relied on the bulk registration. [#2373](https://github.com/IgniteUI/igniteui-webcomponents/pull/2373)
+- #### Validation
+  - A host that starts invalid, such as `<igc-input required invalid>`, showed no validation messages. The validation container keeps its first render neutral for SSR parity and skips the projection slots until the host updates, and a host that hydrated invalid never rendered again. [#2374](https://github.com/IgniteUI/igniteui-webcomponents/pull/2374)
 
 ## [7.3.1] - 2026-09-01
 ### Added
@@ -50,6 +69,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Added
 - #### Calendar
   - `igc-calendar` now exports the `label-inner`, `months-row` and `years-row` parts. The pickers export them as `calendar-label-inner`, `months-row` and `years-row`. The views rendered these parts but did not export them, thus you could not style them through the calendar.
+- #### Color picker
+  - New `igc-color-picker` component. It provides a user interface for selecting colors, supporting various color formats and a customizable palette. [#1973](https://github.com/IgniteUI/igniteui-webcomponents/pull/1973)
 - #### Chip
   - `outlined` property. When you set it to `true`, the chip shows an outlined style. [#2307](https://github.com/IgniteUI/igniteui-webcomponents/pull/2307)
 - #### Icon
@@ -1595,6 +1616,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[7.3.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.3.1...7.3.2
 [7.3.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.3.0...7.3.1
 [7.3.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.2.4...7.3.0
 [7.2.4]: https://github.com/IgniteUI/igniteui-webcomponents/compare/7.2.3...7.2.4

package/components/avatar/themes/avatar.base.css.js

@@ -1,3 +1,3 @@
 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;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:inline-flex;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}[part=base]{position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline-style:none;flex-shrink:0;overflow:hidden;font-family:var(--ig-font-family)}img{position:absolute;width:100%;height:100%;border-radius:inherit;background-color:inherit;-o-object-fit:cover;object-fit:cover}[part=initials]{text-transform:uppercase}:host([shape=square]) [part=base]{border-radius:0}`;
+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;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:inline-flex;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}[part=base]{position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline-style:none;flex-shrink:0;overflow:hidden;font-family:var(--ig-font-family)}img{position:absolute;width:100%;height:100%;border-radius:inherit;background-color:inherit;-o-object-fit:cover;object-fit:cover}[part=initials]{text-transform:uppercase}:host([shape=square]) [part=base]{border-radius:0}@media(forced-colors: active){[part=base]{border:.0625rem solid CanvasText}}`;
 //# sourceMappingURL=avatar.base.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.base.css.js","sourceRoot":"","sources":["../../../../src/components/avatar/themes/avatar.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,mgDAAmgD,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  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;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:inline-flex;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}[part=base]{position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline-style:none;flex-shrink:0;overflow:hidden;font-family:var(--ig-font-family)}img{position:absolute;width:100%;height:100%;border-radius:inherit;background-color:inherit;-o-object-fit:cover;object-fit:cover}[part=initials]{text-transform:uppercase}:host([shape=square]) [part=base]{border-radius:0}`;\n  "]}
+{"version":3,"file":"avatar.base.css.js","sourceRoot":"","sources":["../../../../src/components/avatar/themes/avatar.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,+kDAA+kD,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  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;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{display:inline-flex;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}[part=base]{position:relative;display:inline-flex;justify-content:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline-style:none;flex-shrink:0;overflow:hidden;font-family:var(--ig-font-family)}img{position:absolute;width:100%;height:100%;border-radius:inherit;background-color:inherit;-o-object-fit:cover;object-fit:cover}[part=initials]{text-transform:uppercase}:host([shape=square]) [part=base]{border-radius:0}@media(forced-colors: active){[part=base]{border:.0625rem solid CanvasText}}`;\n  "]}

package/components/badge/themes/badge.base.css.js

@@ -1,3 +1,3 @@
 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;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:inline-flex;vertical-align:top}[part~=base]{display:inline-flex;min-width:var(--_badge-size);min-height:var(--_badge-size);justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;font-size:max(var(--is-large, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-caption-font-size), -1 * var(--ig-caption-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-caption-font-weight), -1 * var(--ig-caption-font-weight)));line-height:max(var(--is-large, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-caption-line-height), -1 * var(--ig-caption-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-caption-letter-spacing), -1 * var(--ig-caption-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-caption-text-transform), -1 * var(--ig-caption-text-transform)))}:host(:not(:empty,[dot])) [part~=base]:not([part~=icon]){padding-inline:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([variant=info]) [part~=base]{background:var(--ig-info-500)}:host([variant=success]) [part~=base]{background:var(--ig-success-500)}:host([variant=warning]) [part~=base]{background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}:host([variant=warning]) [part~=base] igc-icon,:host([variant=warning]) [part~=base] ::slotted(igc-icon){color:var(--ig-warn-500-contrast)}:host([variant=danger]) [part~=base]{background:var(--ig-error-500);color:var(--ig-error-900-contrast)}:host([shape=rounded]),:host([shape=rounded]) [part~=base],:host([dot]) [part~=base]{border-radius:calc(var(--_badge-size)*2)}`;
+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;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:inline-flex;vertical-align:top}[part~=base]{display:inline-flex;min-width:var(--_badge-size);min-height:var(--_badge-size);justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;font-size:max(var(--is-large, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-caption-font-size), -1 * var(--ig-caption-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-caption-font-weight), -1 * var(--ig-caption-font-weight)));line-height:max(var(--is-large, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-caption-line-height), -1 * var(--ig-caption-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-caption-letter-spacing), -1 * var(--ig-caption-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-caption-text-transform), -1 * var(--ig-caption-text-transform)))}:host(:not(:empty,[dot])) [part~=base]:not([part~=icon]){padding-inline:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([variant=info]) [part~=base]{background:var(--ig-info-500)}:host([variant=success]) [part~=base]{background:var(--ig-success-500)}:host([variant=warning]) [part~=base]{background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}:host([variant=warning]) [part~=base] igc-icon,:host([variant=warning]) [part~=base] ::slotted(igc-icon){color:var(--ig-warn-500-contrast)}:host([variant=danger]) [part~=base]{background:var(--ig-error-500);color:var(--ig-error-900-contrast)}:host([shape=rounded]),:host([shape=rounded]) [part~=base],:host([dot]) [part~=base]{border-radius:calc(var(--_badge-size)*2)}@media(forced-colors: active){[part~=base]{border:.0625rem solid CanvasText}}`;
 //# sourceMappingURL=badge.base.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge.base.css.js","sourceRoot":"","sources":["../../../../src/components/badge/themes/badge.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,urHAAurH,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  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;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:inline-flex;vertical-align:top}[part~=base]{display:inline-flex;min-width:var(--_badge-size);min-height:var(--_badge-size);justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;font-size:max(var(--is-large, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-caption-font-size), -1 * var(--ig-caption-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-caption-font-weight), -1 * var(--ig-caption-font-weight)));line-height:max(var(--is-large, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-caption-line-height), -1 * var(--ig-caption-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-caption-letter-spacing), -1 * var(--ig-caption-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-caption-text-transform), -1 * var(--ig-caption-text-transform)))}:host(:not(:empty,[dot])) [part~=base]:not([part~=icon]){padding-inline:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([variant=info]) [part~=base]{background:var(--ig-info-500)}:host([variant=success]) [part~=base]{background:var(--ig-success-500)}:host([variant=warning]) [part~=base]{background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}:host([variant=warning]) [part~=base] igc-icon,:host([variant=warning]) [part~=base] ::slotted(igc-icon){color:var(--ig-warn-500-contrast)}:host([variant=danger]) [part~=base]{background:var(--ig-error-500);color:var(--ig-error-900-contrast)}:host([shape=rounded]),:host([shape=rounded]) [part~=base],:host([dot]) [part~=base]{border-radius:calc(var(--_badge-size)*2)}`;\n  "]}
+{"version":3,"file":"badge.base.css.js","sourceRoot":"","sources":["../../../../src/components/badge/themes/badge.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,owHAAowH,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  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;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;display:inline-flex;vertical-align:top}[part~=base]{display:inline-flex;min-width:var(--_badge-size);min-height:var(--_badge-size);justify-content:center;align-items:center;overflow:hidden;white-space:nowrap;font-size:max(var(--is-large, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-medium, 1)*max(var(--ig-body-2-font-size), -1 * var(--ig-body-2-font-size)),var(--is-small, 1)*max(var(--ig-caption-font-size), -1 * var(--ig-caption-font-size)));font-weight:max(var(--is-large, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-medium, 1)*max(var(--ig-body-2-font-weight), -1 * var(--ig-body-2-font-weight)),var(--is-small, 1)*max(var(--ig-caption-font-weight), -1 * var(--ig-caption-font-weight)));line-height:max(var(--is-large, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-medium, 1)*max(var(--ig-body-2-line-height), -1 * var(--ig-body-2-line-height)),var(--is-small, 1)*max(var(--ig-caption-line-height), -1 * var(--ig-caption-line-height)));letter-spacing:max(var(--is-large, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-medium, 1)*max(var(--ig-body-2-letter-spacing), -1 * var(--ig-body-2-letter-spacing)),var(--is-small, 1)*max(var(--ig-caption-letter-spacing), -1 * var(--ig-caption-letter-spacing)));text-transform:max(var(--is-large, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-medium, 1)*max(var(--ig-body-2-text-transform), -1 * var(--ig-body-2-text-transform)),var(--is-small, 1)*max(var(--ig-caption-text-transform), -1 * var(--ig-caption-text-transform)))}:host(:not(:empty,[dot])) [part~=base]:not([part~=icon]){padding-inline:max(var(--is-large, 1)*max(0.5rem, -1 * 0.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(0.375rem, -1 * 0.375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(0.25rem, -1 * 0.25rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}:host([variant=info]) [part~=base]{background:var(--ig-info-500)}:host([variant=success]) [part~=base]{background:var(--ig-success-500)}:host([variant=warning]) [part~=base]{background:var(--ig-warn-500);color:var(--ig-warn-500-contrast)}:host([variant=warning]) [part~=base] igc-icon,:host([variant=warning]) [part~=base] ::slotted(igc-icon){color:var(--ig-warn-500-contrast)}:host([variant=danger]) [part~=base]{background:var(--ig-error-500);color:var(--ig-error-900-contrast)}:host([shape=rounded]),:host([shape=rounded]) [part~=base],:host([dot]) [part~=base]{border-radius:calc(var(--_badge-size)*2)}@media(forced-colors: active){[part~=base]{border:.0625rem solid CanvasText}}`;\n  "]}

package/components/banner/themes/banner.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{display:block;min-width:20rem;flex-basis:20rem}[part~=spacer]{display:flex;flex-wrap:wrap;padding-block:max(var(--is-large, 1)*max(16px, -1 * 16px)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(16px, -1 * 16px)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(16px, -1 * 16px)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(8px, -1 * 8px)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(8px, -1 * 8px)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(8px, -1 * 8px)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));gap:.5rem;justify-content:flex-end}[part~=message]{min-width:9.375rem;flex-basis:9.375rem;flex-grow:1}[part~=illustration]{justify-content:center}[part~=illustration],[part~=message]{display:flex;align-items:center}[part~=actions]{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;align-self:flex-end}::slotted([slot=actions]){display:flex;flex-wrap:wrap;gap:.5rem}::slotted([slot=prefix]){margin-inline-end:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}[part~=base]{overflow:hidden}:host(:not([open])) [part~=base]{height:0}:host([open]) [part~=base]{height:auto}`;
+export const styles = css `:host{display:block;min-width:20rem;flex-basis:20rem}[part~=spacer]{display:flex;flex-wrap:wrap;padding-block:max(var(--is-large, 1)*max(16px, -1 * 16px)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(16px, -1 * 16px)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(16px, -1 * 16px)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(8px, -1 * 8px)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(8px, -1 * 8px)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(8px, -1 * 8px)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));gap:.5rem;justify-content:flex-end}[part~=message]{min-width:9.375rem;flex-basis:9.375rem;flex-grow:1}[part~=illustration]{justify-content:center}[part~=illustration],[part~=message]{display:flex;align-items:center}[part~=actions]{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;align-self:flex-end}::slotted([slot=actions]){display:flex;flex-wrap:wrap;gap:.5rem}::slotted([slot=prefix]){margin-inline-end:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}[part~=base]{overflow:hidden}:host(:not([open])) [part~=base]{height:0}:host([open]) [part~=base]{height:auto}@media(forced-colors: active){[part~=spacer]{border-block-end:.0625rem solid CanvasText}}`;
 //# sourceMappingURL=banner.base.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"banner.base.css.js","sourceRoot":"","sources":["../../../../src/components/banner/themes/banner.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,wrDAAwrD,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{display:block;min-width:20rem;flex-basis:20rem}[part~=spacer]{display:flex;flex-wrap:wrap;padding-block:max(var(--is-large, 1)*max(16px, -1 * 16px)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(16px, -1 * 16px)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(16px, -1 * 16px)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(8px, -1 * 8px)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(8px, -1 * 8px)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(8px, -1 * 8px)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));gap:.5rem;justify-content:flex-end}[part~=message]{min-width:9.375rem;flex-basis:9.375rem;flex-grow:1}[part~=illustration]{justify-content:center}[part~=illustration],[part~=message]{display:flex;align-items:center}[part~=actions]{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;align-self:flex-end}::slotted([slot=actions]){display:flex;flex-wrap:wrap;gap:.5rem}::slotted([slot=prefix]){margin-inline-end:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}[part~=base]{overflow:hidden}:host(:not([open])) [part~=base]{height:0}:host([open]) [part~=base]{height:auto}`;\n  "]}
+{"version":3,"file":"banner.base.css.js","sourceRoot":"","sources":["../../../../src/components/banner/themes/banner.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,ixDAAixD,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{display:block;min-width:20rem;flex-basis:20rem}[part~=spacer]{display:flex;flex-wrap:wrap;padding-block:max(var(--is-large, 1)*max(16px, -1 * 16px)*var(--ig-spacing-block-large, var(--ig-spacing-block, var(--ig-spacing))),var(--is-medium, 1)*max(16px, -1 * 16px)*var(--ig-spacing-block-medium, var(--ig-spacing-block, var(--ig-spacing))),var(--is-small, 1)*max(16px, -1 * 16px)*var(--ig-spacing-block-small, var(--ig-spacing-block, var(--ig-spacing))));padding-inline:max(var(--is-large, 1)*max(8px, -1 * 8px)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(8px, -1 * 8px)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(8px, -1 * 8px)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));gap:.5rem;justify-content:flex-end}[part~=message]{min-width:9.375rem;flex-basis:9.375rem;flex-grow:1}[part~=illustration]{justify-content:center}[part~=illustration],[part~=message]{display:flex;align-items:center}[part~=actions]{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;align-self:flex-end}::slotted([slot=actions]){display:flex;flex-wrap:wrap;gap:.5rem}::slotted([slot=prefix]){margin-inline-end:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}[part~=base]{overflow:hidden}:host(:not([open])) [part~=base]{height:0}:host([open]) [part~=base]{height:auto}@media(forced-colors: active){[part~=spacer]{border-block-end:.0625rem solid CanvasText}}`;\n  "]}

package/components/banner/themes/shared/banner.indigo.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `[part~=spacer]{padding:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));background:var(--banner-background);box-shadow:inset 0 0 0 .0625rem var(--banner-border-color);border-radius:var(--border-radius)}[part~=message]{gap:.5rem}::slotted([slot=prefix]){--default-size: 2;--component-size: var(--ig-size, var(--default-size)) !important;margin-inline-end:0;color:inherit}[part~=illustration]{color:var(--banner-illustration-color)}[part~=content]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);color:var(--banner-message-color)}`;
+export const styles = css `[part~=spacer]{padding:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));background:var(--banner-background);box-shadow:inset 0 0 0 .0625rem var(--banner-border-color);border-radius:var(--border-radius)}[part~=message]{gap:.5rem}::slotted([slot=prefix]){--default-size: 2;--component-size: var(--ig-size, var(--default-size)) !important;margin-inline-end:0;color:inherit}[part~=illustration]{color:var(--banner-illustration-color)}[part~=content]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);color:var(--banner-message-color)}@media(forced-colors: active){[part~=spacer]{border:.0625rem solid CanvasText}}`;
 //# sourceMappingURL=banner.indigo.css.js.map

package/components/banner/themes/shared/banner.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/banner/themes/shared/banner.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,0nCAA0nC,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`[part~=spacer]{padding:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));background:var(--banner-background);box-shadow:inset 0 0 0 .0625rem var(--banner-border-color);border-radius:var(--border-radius)}[part~=message]{gap:.5rem}::slotted([slot=prefix]){--default-size: 2;--component-size: var(--ig-size, var(--default-size)) !important;margin-inline-end:0;color:inherit}[part~=illustration]{color:var(--banner-illustration-color)}[part~=content]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);color:var(--banner-message-color)}`;\n  "]}
+{"version":3,"file":"banner.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/banner/themes/shared/banner.indigo.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,ysCAAysC,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`[part~=spacer]{padding:max(var(--is-large, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(1rem, -1 * 1rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));background:var(--banner-background);box-shadow:inset 0 0 0 .0625rem var(--banner-border-color);border-radius:var(--border-radius)}[part~=message]{gap:.5rem}::slotted([slot=prefix]){--default-size: 2;--component-size: var(--ig-size, var(--default-size)) !important;margin-inline-end:0;color:inherit}[part~=illustration]{color:var(--banner-illustration-color)}[part~=content]{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);color:var(--banner-message-color)}@media(forced-colors: active){[part~=spacer]{border:.0625rem solid CanvasText}}`;\n  "]}

package/components/calendar/base.d.ts

@@ -6,6 +6,7 @@ import type { CalendarSelection, DateRangeDescriptor, WeekDays } from './types.j
 declare const IgcCalendarBaseComponent_base: import("../../internals/mixins/constructor.js").AbstractConstructor<import("#internals/mixins/i18n.js").I18nInterface<IgcCalendarResourceStrings | ICalendarResourceStrings, IgcCalendarResourceStrings & ICalendarResourceStrings>> & typeof LitElement;
 export declare class IgcCalendarBaseComponent extends IgcCalendarBaseComponent_base {
     private _initialActiveDateSet;
+    private _weekStart?;
     protected get _hasValues(): boolean;
     /**
      * The index of the first day of the week (Sunday = 0) as derived from {@link weekStart}.
@@ -57,10 +58,14 @@ export declare class IgcCalendarBaseComponent extends IgcCalendarBaseComponent_b
     showWeekNumbers: boolean;
     /**
      * Gets/Sets the first day of the week.
+     *
+     * @remarks
+     * When not set, the week starts on the first day of the week of the current {@link locale}.
+     * Setting `undefined` returns to the locale value.
      * @attr week-start
-     * @default sunday
      */
-    weekStart: WeekDays;
+    set weekStart(value: WeekDays | undefined);
+    get weekStart(): WeekDays;
     /**
      * Gets/Sets the special dates for the component.
      *

package/components/calendar/base.js

@@ -13,7 +13,7 @@ import { blazorDeepImport } from '#internals/decorators/blazorDeepImport.js';
 import { blazorIndirectRender } from '#internals/decorators/blazorIndirectRender.js';
 import { I18nMixin } from '#internals/mixins/i18n.js';
 import { firstOf } from '#internals/utils/arrays.js';
-import { getWeekDayNumber } from './helpers.js';
+import { getLocaleWeekStart, getWeekDayNumber } from './helpers.js';
 const i18n = {
     defaultEN: CalendarResourceStringsEN,
     resourceMapName: 'calendar',
@@ -29,7 +29,6 @@ let IgcCalendarBaseComponent = class IgcCalendarBaseComponent extends I18nMixin(
         this._disabledDates = [];
         this.selection = 'single';
         this.showWeekNumbers = false;
-        this.weekStart = 'sunday';
     }
     get _hasValues() {
         return this._values.length > 0;
@@ -67,6 +66,12 @@ let IgcCalendarBaseComponent = class IgcCalendarBaseComponent extends I18nMixin(
     get activeDate() {
         return this._activeDate.native;
     }
+    set weekStart(value) {
+        this._weekStart = value ?? undefined;
+    }
+    get weekStart() {
+        return this._weekStart ?? getLocaleWeekStart(this.locale);
+    }
     set specialDates(value) {
         this._specialDates = value ?? [];
     }
@@ -134,7 +139,7 @@ __decorate([
 ], IgcCalendarBaseComponent.prototype, "showWeekNumbers", void 0);
 __decorate([
     property({ attribute: 'week-start' })
-], IgcCalendarBaseComponent.prototype, "weekStart", void 0);
+], IgcCalendarBaseComponent.prototype, "weekStart", null);
 __decorate([
     property({ attribute: false })
 ], IgcCalendarBaseComponent.prototype, "specialDates", null);

package/components/calendar/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../src/components/calendar/base.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  CalendarResourceStringsEN,\n  type ICalendarResourceStrings,\n} from 'igniteui-i18n-core';\nimport { LitElement, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { convertToDate, convertToDates } from '#internals/date/converters.js';\nimport { CalendarDay, toCalendarDayOrNull } from '#internals/date/model.js';\nimport { blazorDeepImport } from '#internals/decorators/blazorDeepImport.js';\nimport { blazorIndirectRender } from '#internals/decorators/blazorIndirectRender.js';\nimport type { IgcCalendarResourceStrings } from '#internals/i18n/EN/calendar.resources.js';\nimport type { I18nControllerConfig } from '#internals/i18n/i18n-controller.js';\nimport { I18nMixin } from '#internals/mixins/i18n.js';\nimport { firstOf } from '#internals/utils/arrays.js';\nimport { getWeekDayNumber } from './helpers.js';\nimport type {\n  CalendarSelection,\n  DateRangeDescriptor,\n  WeekDays,\n} from './types.js';\n\nconst i18n: I18nControllerConfig<\n  IgcCalendarResourceStrings | ICalendarResourceStrings\n> = {\n  defaultEN: CalendarResourceStringsEN,\n  resourceMapName: 'calendar',\n};\n\n@blazorIndirectRender\n@blazorDeepImport\nexport class IgcCalendarBaseComponent extends I18nMixin<\n  IgcCalendarResourceStrings | ICalendarResourceStrings,\n  typeof LitElement,\n  IgcCalendarResourceStrings & ICalendarResourceStrings\n>(LitElement, i18n) {\n  private _initialActiveDateSet = false;\n\n  protected get _hasValues(): boolean {\n    return this._values.length > 0;\n  }\n\n  /**\n   * The index of the first day of the week (Sunday = 0) as derived from {@link weekStart}.\n   *\n   * @remarks\n   * Derived on access instead of in `update()`, so that its consumers are not sensitive\n   * to the order in which the base class and its descendants update.\n   */\n  protected get _firstDayOfWeek(): number {\n    return getWeekDayNumber(this.weekStart);\n  }\n\n  protected get _isSingle(): boolean {\n    return this.selection === 'single';\n  }\n\n  protected get _isMultiple(): boolean {\n    return this.selection === 'multiple';\n  }\n\n  protected get _isRange(): boolean {\n    return this.selection === 'range';\n  }\n\n  @state()\n  protected _rangePreviewDate?: CalendarDay;\n\n  @state()\n  protected _activeDate = CalendarDay.today;\n\n  @state()\n  protected _value: CalendarDay | null = null;\n\n  @state()\n  protected _values: CalendarDay[] = [];\n\n  @state()\n  protected _specialDates: DateRangeDescriptor[] = [];\n\n  @state()\n  protected _disabledDates: DateRangeDescriptor[] = [];\n\n  /* blazorSuppress */\n  /**\n   * The current value of the calendar.\n   * Used when selection is set to single\n   *\n   * @attr value\n   */\n  @property({ converter: convertToDate })\n  public set value(value: Date | string | null | undefined) {\n    this._value = toCalendarDayOrNull(convertToDate(value));\n  }\n\n  public get value(): Date | null {\n    return this._value ? this._value.native : null;\n  }\n\n  /* blazorSuppress */\n  /**\n   * The current values of the calendar.\n   * Used when selection is set to multiple or range.\n   *\n   * @attr values\n   */\n  @property({ converter: convertToDates })\n  public set values(values: (Date | string)[] | string | null | undefined) {\n    const converted = convertToDates(values);\n    this._values = converted ? converted.map((v) => CalendarDay.from(v)) : [];\n  }\n\n  public get values(): Date[] {\n    return this._values ? this._values.map((v) => v.native) : [];\n  }\n\n  /* blazorSuppress */\n  /** Get/Set the date which is shown in view and is highlighted. By default it is the current date. */\n  @property({ attribute: 'active-date', converter: convertToDate })\n  public set activeDate(value: Date | string | null | undefined) {\n    this._initialActiveDateSet = true;\n    this._activeDate =\n      toCalendarDayOrNull(convertToDate(value)) ?? CalendarDay.today;\n  }\n\n  public get activeDate(): Date {\n    return this._activeDate.native;\n  }\n\n  /**\n   * Sets the type of selection in the component.\n   * @attr selection\n   * @default single\n   */\n  @property()\n  public selection: CalendarSelection = 'single';\n\n  /**\n   * Whether to show the week numbers.\n   * @attr show-week-numbers\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-week-numbers' })\n  public showWeekNumbers = false;\n\n  /**\n   * Gets/Sets the first day of the week.\n   * @attr week-start\n   * @default sunday\n   */\n  @property({ attribute: 'week-start' })\n  public weekStart: WeekDays = 'sunday';\n\n  /**\n   * Gets/Sets the special dates for the component.\n   *\n   * @remarks\n   * Returns `undefined` when no dates are set, which the setter accepts as well so that\n   * a round trip through the property is valid.\n   */\n  @property({ attribute: false })\n  public set specialDates(value: DateRangeDescriptor[] | undefined) {\n    this._specialDates = value ?? [];\n  }\n\n  public get specialDates(): DateRangeDescriptor[] | undefined {\n    return this._specialDates.length ? this._specialDates : undefined;\n  }\n\n  /**\n   * Gets/Sets the disabled dates for the component.\n   *\n   * @remarks\n   * Returns `undefined` when no dates are set, which the setter accepts as well so that\n   * a round trip through the property is valid.\n   */\n  @property({ attribute: false })\n  public set disabledDates(value: DateRangeDescriptor[] | undefined) {\n    this._disabledDates = value ?? [];\n  }\n\n  public get disabledDates(): DateRangeDescriptor[] | undefined {\n    return this._disabledDates.length ? this._disabledDates : undefined;\n  }\n\n  /** @internal */\n  protected override update(props: PropertyValues): void {\n    if (props.has('selection') && this.hasUpdated) {\n      this._rangePreviewDate = undefined;\n      this._value = null;\n      this._values = [];\n    }\n\n    super.update(props);\n  }\n\n  /** @internal */\n  protected override firstUpdated(): void {\n    if (this._initialActiveDateSet) {\n      return;\n    }\n\n    if (this._isSingle) {\n      this.activeDate = this.value ?? this.activeDate;\n    } else {\n      this.activeDate = firstOf(this.values) ?? this.activeDate;\n    }\n  }\n}\n"]}
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../src/components/calendar/base.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  CalendarResourceStringsEN,\n  type ICalendarResourceStrings,\n} from 'igniteui-i18n-core';\nimport { LitElement, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { convertToDate, convertToDates } from '#internals/date/converters.js';\nimport { CalendarDay, toCalendarDayOrNull } from '#internals/date/model.js';\nimport { blazorDeepImport } from '#internals/decorators/blazorDeepImport.js';\nimport { blazorIndirectRender } from '#internals/decorators/blazorIndirectRender.js';\nimport type { IgcCalendarResourceStrings } from '#internals/i18n/EN/calendar.resources.js';\nimport type { I18nControllerConfig } from '#internals/i18n/i18n-controller.js';\nimport { I18nMixin } from '#internals/mixins/i18n.js';\nimport { firstOf } from '#internals/utils/arrays.js';\nimport { getLocaleWeekStart, getWeekDayNumber } from './helpers.js';\nimport type {\n  CalendarSelection,\n  DateRangeDescriptor,\n  WeekDays,\n} from './types.js';\n\nconst i18n: I18nControllerConfig<\n  IgcCalendarResourceStrings | ICalendarResourceStrings\n> = {\n  defaultEN: CalendarResourceStringsEN,\n  resourceMapName: 'calendar',\n};\n\n@blazorIndirectRender\n@blazorDeepImport\nexport class IgcCalendarBaseComponent extends I18nMixin<\n  IgcCalendarResourceStrings | ICalendarResourceStrings,\n  typeof LitElement,\n  IgcCalendarResourceStrings & ICalendarResourceStrings\n>(LitElement, i18n) {\n  private _initialActiveDateSet = false;\n  private _weekStart?: WeekDays;\n\n  protected get _hasValues(): boolean {\n    return this._values.length > 0;\n  }\n\n  /**\n   * The index of the first day of the week (Sunday = 0) as derived from {@link weekStart}.\n   *\n   * @remarks\n   * Derived on access instead of in `update()`, so that its consumers are not sensitive\n   * to the order in which the base class and its descendants update.\n   */\n  protected get _firstDayOfWeek(): number {\n    return getWeekDayNumber(this.weekStart);\n  }\n\n  protected get _isSingle(): boolean {\n    return this.selection === 'single';\n  }\n\n  protected get _isMultiple(): boolean {\n    return this.selection === 'multiple';\n  }\n\n  protected get _isRange(): boolean {\n    return this.selection === 'range';\n  }\n\n  @state()\n  protected _rangePreviewDate?: CalendarDay;\n\n  @state()\n  protected _activeDate = CalendarDay.today;\n\n  @state()\n  protected _value: CalendarDay | null = null;\n\n  @state()\n  protected _values: CalendarDay[] = [];\n\n  @state()\n  protected _specialDates: DateRangeDescriptor[] = [];\n\n  @state()\n  protected _disabledDates: DateRangeDescriptor[] = [];\n\n  /* blazorSuppress */\n  /**\n   * The current value of the calendar.\n   * Used when selection is set to single\n   *\n   * @attr value\n   */\n  @property({ converter: convertToDate })\n  public set value(value: Date | string | null | undefined) {\n    this._value = toCalendarDayOrNull(convertToDate(value));\n  }\n\n  public get value(): Date | null {\n    return this._value ? this._value.native : null;\n  }\n\n  /* blazorSuppress */\n  /**\n   * The current values of the calendar.\n   * Used when selection is set to multiple or range.\n   *\n   * @attr values\n   */\n  @property({ converter: convertToDates })\n  public set values(values: (Date | string)[] | string | null | undefined) {\n    const converted = convertToDates(values);\n    this._values = converted ? converted.map((v) => CalendarDay.from(v)) : [];\n  }\n\n  public get values(): Date[] {\n    return this._values ? this._values.map((v) => v.native) : [];\n  }\n\n  /* blazorSuppress */\n  /** Get/Set the date which is shown in view and is highlighted. By default it is the current date. */\n  @property({ attribute: 'active-date', converter: convertToDate })\n  public set activeDate(value: Date | string | null | undefined) {\n    this._initialActiveDateSet = true;\n    this._activeDate =\n      toCalendarDayOrNull(convertToDate(value)) ?? CalendarDay.today;\n  }\n\n  public get activeDate(): Date {\n    return this._activeDate.native;\n  }\n\n  /**\n   * Sets the type of selection in the component.\n   * @attr selection\n   * @default single\n   */\n  @property()\n  public selection: CalendarSelection = 'single';\n\n  /**\n   * Whether to show the week numbers.\n   * @attr show-week-numbers\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-week-numbers' })\n  public showWeekNumbers = false;\n\n  /**\n   * Gets/Sets the first day of the week.\n   *\n   * @remarks\n   * When not set, the week starts on the first day of the week of the current {@link locale}.\n   * Setting `undefined` returns to the locale value.\n   * @attr week-start\n   */\n  @property({ attribute: 'week-start' })\n  public set weekStart(value: WeekDays | undefined) {\n    this._weekStart = value ?? undefined;\n  }\n\n  public get weekStart(): WeekDays {\n    return this._weekStart ?? getLocaleWeekStart(this.locale);\n  }\n\n  /**\n   * Gets/Sets the special dates for the component.\n   *\n   * @remarks\n   * Returns `undefined` when no dates are set, which the setter accepts as well so that\n   * a round trip through the property is valid.\n   */\n  @property({ attribute: false })\n  public set specialDates(value: DateRangeDescriptor[] | undefined) {\n    this._specialDates = value ?? [];\n  }\n\n  public get specialDates(): DateRangeDescriptor[] | undefined {\n    return this._specialDates.length ? this._specialDates : undefined;\n  }\n\n  /**\n   * Gets/Sets the disabled dates for the component.\n   *\n   * @remarks\n   * Returns `undefined` when no dates are set, which the setter accepts as well so that\n   * a round trip through the property is valid.\n   */\n  @property({ attribute: false })\n  public set disabledDates(value: DateRangeDescriptor[] | undefined) {\n    this._disabledDates = value ?? [];\n  }\n\n  public get disabledDates(): DateRangeDescriptor[] | undefined {\n    return this._disabledDates.length ? this._disabledDates : undefined;\n  }\n\n  /** @internal */\n  protected override update(props: PropertyValues): void {\n    if (props.has('selection') && this.hasUpdated) {\n      this._rangePreviewDate = undefined;\n      this._value = null;\n      this._values = [];\n    }\n\n    super.update(props);\n  }\n\n  /** @internal */\n  protected override firstUpdated(): void {\n    if (this._initialActiveDateSet) {\n      return;\n    }\n\n    if (this._isSingle) {\n      this.activeDate = this.value ?? this.activeDate;\n    } else {\n      this.activeDate = firstOf(this.values) ?? this.activeDate;\n    }\n  }\n}\n"]}

package/components/calendar/calendar.d.ts

@@ -158,6 +158,8 @@ export default class IgcCalendarComponent extends IgcCalendarComponent_base {
     private _getNextEnabledDate;
     protected _renderNavigationButtons(): TemplateResult<1>;
     protected _renderMonthButtonNavigation(active: CalendarDay, viewIndex: number): TemplateResult;
+    /** The year with the unit of the locale - `2025年` for `ja`, `2025 г.` for `bg`. */
+    protected _formatYear(day: CalendarDay): string;
     protected _renderYearButtonNavigation(active: CalendarDay, viewIndex: number): TemplateResult;
     /**
      * Renders the off screen live region announcing the period the calendar navigated to.
@@ -169,6 +171,8 @@ export default class IgcCalendarComponent extends IgcCalendarComponent_base {
      */
     protected _renderActivePeriod(): typeof nothing | TemplateResult<1>;
     protected _renderYearRangeNavigation(active: CalendarDay): TemplateResult;
+    /** Renders the month and year buttons of the days view in the field order of the locale. */
+    protected _renderDayViewNavigation(active: CalendarDay, viewIndex: number): TemplateResult[];
     protected _renderNavigation(date?: CalendarDay, showButtons?: boolean, viewIndex?: number): TemplateResult;
     protected _renderHeader(): typeof nothing | TemplateResult<1>;
     protected _renderHeaderDateSingle(): TemplateResult;

package/components/calendar/calendar.js

@@ -22,7 +22,7 @@ import { addThemingController } from '#theming/theming-controller.js';
 import IgcIconComponent from '../icon/icon.js';
 import { IgcCalendarBaseComponent } from './base.js';
 import IgcDaysViewComponent from './days-view/days-view.js';
-import { areSameMonth, getYearRange, isDateInRanges, MONTHS_PER_ROW, YEARS_PER_PAGE, YEARS_PER_ROW, } from './helpers.js';
+import { areSameMonth, getYearRange, isDateInRanges, isDatePartBefore, MONTHS_PER_ROW, YEARS_PER_PAGE, YEARS_PER_ROW, } from './helpers.js';
 import IgcMonthsViewComponent from './months-view/months-view.js';
 import { selectDate } from './selection.js';
 import { styles } from './themes/calendar.base.css.js';
@@ -317,15 +317,21 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
       </button>
     `;
     }
+    _formatYear(day) {
+        return getDateFormatter().formatDateTime(day.native, this.locale, {
+            year: 'numeric',
+        });
+    }
     _renderYearButtonNavigation(active, viewIndex) {
-        const ariaLabel = `${active.year}, ${this.resourceStrings.calendar_select_year}`;
+        const year = this._formatYear(active);
+        const ariaLabel = `${year}, ${this.resourceStrings.calendar_select_year}`;
         return html `
       <button
         part="years-navigation"
         aria-label=${ariaLabel}
         @click=${() => this._navigateToYearView(viewIndex)}
       >
-        ${active.year}
+        ${year}
       </button>
     `;
     }
@@ -339,7 +345,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
         });
         return html `
       <span class="aria-off-screen" aria-live="polite">
-        ${this._isDayView ? format(this._activeDate.native) : this._activeDate.year}
+        ${this._isDayView ? format(this._activeDate.native) : this._formatYear(this._activeDate)}
       </span>
     `;
     }
@@ -349,15 +355,22 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
       <span part="years-range" aria-live="polite"> ${start} - ${end} </span>
     `;
     }
+    _renderDayViewNavigation(active, viewIndex) {
+        const parts = getDateFormatter().formatDateTimeToParts(active.native, this.locale, { year: 'numeric', month: this.formatOptions.month });
+        const yearFirst = isDatePartBefore(parts, 'year', 'month');
+        const month = this._renderMonthButtonNavigation(active, viewIndex);
+        const year = this._renderYearButtonNavigation(active, viewIndex);
+        return yearFirst ? [year, month] : [month, year];
+    }
     _renderNavigation(date, showButtons = true, viewIndex = 0) {
         const activeDate = date ?? this._activeDate;
         return html `
       <div part="navigation">
         <div part="picker-dates">
           ${this._isDayView
-            ? this._renderMonthButtonNavigation(activeDate, viewIndex)
+            ? this._renderDayViewNavigation(activeDate, viewIndex)
             : nothing}
-          ${this._isDayView || this._isMonthView
+          ${this._isMonthView
             ? this._renderYearButtonNavigation(activeDate, viewIndex)
             : nothing}
           ${this._isYearView
@@ -386,17 +399,30 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
     }
     _renderHeaderDateSingle() {
         const date = this.value ?? CalendarDay.today.native;
+        const { locale } = this;
         const formatter = getDateFormatter();
-        const weekday = formatter.formatDateTime(date, this.locale, {
-            weekday: 'short',
-        });
-        const monthDay = formatter.formatDateTime(date, this.locale, {
+        const weekdayOptions = { weekday: 'short' };
+        const dateOptions = {
             month: 'short',
             day: 'numeric',
+        };
+        if (this.headerOrientation !== 'vertical') {
+            const formatted = formatter.formatDateTime(date, locale, {
+                ...weekdayOptions,
+                ...dateOptions,
+            });
+            return html `<slot name="header-date">${formatted}</slot>`;
+        }
+        const parts = formatter.formatDateTimeToParts(date, locale, {
+            ...weekdayOptions,
+            ...dateOptions,
         });
-        const separator = this.headerOrientation === 'vertical' ? html `<br />` : ' ';
-        const formatted = html `${weekday},${separator}${monthDay}`;
-        return html `<slot name="header-date">${formatted}</slot>`;
+        const weekday = formatter.formatDateTime(date, locale, weekdayOptions);
+        const monthDay = formatter.formatDateTime(date, locale, dateOptions);
+        const [first, second] = isDatePartBefore(parts, 'weekday', 'month')
+            ? [weekday, monthDay]
+            : [monthDay, weekday];
+        return html `<slot name="header-date">${first}<br />${second}</slot>`;
     }
     _renderHeaderDateRange() {
         const values = this.values;
@@ -430,6 +456,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
         const length = activeDates.length - 1;
         const format = this.formatOptions
             .weekday;
+        const weekStart = this.weekStart;
         return html `${activeDates.map((date, idx) => html `
         <div part="days-view-container">
           ${this._renderNavigation(date, horizontal ? idx === length : idx === 0, idx)}
@@ -453,7 +480,7 @@ export default class IgcCalendarComponent extends EventEmitterMixin(IgcCalendarB
             .value=${this.value}
             .values=${this.values}
             .weekDayFormat=${format}
-            .weekStart=${this.weekStart}
+            .weekStart=${weekStart}
           ></igc-days-view>
         </div>
       `)}`;