igniteui-webcomponents 4.4.0 → 4.5.0-beta.1

package/CHANGELOG.md

@@ -4,6 +4,16 @@ 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]
+### Deprecated
+  - The `size` property and attribute have been deprecated for all components. Use the `--ig-size` CSS custom property instead.
+    The following example sets the size of the avatar component to small:
+    ```css
+      igc-avatar {
+        --ig-size: var(--ig-size-small);
+      }
+    ```
+
 ## [4.4.0] - 2023-08-30
 ### Added
 - The following components are now Form Associated Custom Elements. They are automatically associated with a parent `<form>`

package/components/avatar/avatar.js

@@ -18,14 +18,11 @@ import { styles as fluent } from './themes/light/avatar.fluent.css.js';
 import { styles as indigo } from './themes/light/avatar.indigo.css.js';
 let IgcAvatarComponent = class IgcAvatarComponent extends SizableMixin(LitElement) {
     get classes() {
-        const { size, shape } = this;
+        const { shape } = this;
         return {
             circle: shape === 'circle',
             rounded: shape === 'rounded',
             square: shape === 'square',
-            small: size === 'small',
-            medium: size === 'medium',
-            large: size === 'large',
         };
     }
     constructor() {
@@ -43,7 +40,7 @@ let IgcAvatarComponent = class IgcAvatarComponent extends SizableMixin(LitElemen
         part="base"
         role="img"
         aria-label="avatar"
-        aria-roledescription=${this.size + ' ' + this.shape}
+        aria-roledescription=${this.shape}
         class=${classMap(this.classes)}
       >
         ${this.initials

package/components/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAgBvE,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,YAAY,CAAC,UAAU,CAAC;IAmCtE,IAAY,OAAO;QACjB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE7B,OAAO;YACL,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,OAAO,EAAE,KAAK,KAAK,SAAS;YAC5B,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,MAAM,EAAE,IAAI,KAAK,QAAQ;YACzB,KAAK,EAAE,IAAI,KAAK,OAAO;SACxB,CAAC;IACJ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QArCF,aAAQ,GAAG,KAAK,CAAC;QAqBlB,UAAK,GAAoC,QAAQ,CAAC;QAiBvD,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;IACtB,CAAC;IAGS,gBAAgB;QACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;+BAKgB,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK;gBAC3C,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;;UAE5B,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS;YACrD,CAAC,CAAC,IAAI,CAAA,iBAAiB;UACvB,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;;;sBAGM,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;sBACnB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;0BACf,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;aAEzC;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AAjFsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AACvB,yBAAM,GAAG,MAAM,AAAT,CAAU;AAOhC;IADN,QAAQ,EAAE;+CACS;AAGZ;IADP,KAAK,EAAE;oDACiB;AAOlB;IADN,QAAQ,EAAE;+CACS;AAOb;IADN,QAAQ,EAAE;oDACc;AAOlB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC6B;AAqB/C;IADT,KAAK,CAAC,KAAK,CAAC;0DAGZ;AAxDkB,kBAAkB;IADtC,MAAM,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GAC3B,kBAAkB,CAmFtC;eAnFoB,kBAAkB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { styles } from './themes/avatar.base.css.js';\nimport { styles as material } from './themes/light/avatar.material.css.js';\nimport { styles as bootstrap } from './themes/light/avatar.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/avatar.fluent.css.js';\nimport { styles as indigo } from './themes/light/avatar.indigo.css.js';\n\n/**\n * An avatar component is used as a representation of a user identity\n * typically in a user profile.\n *\n * @element igc-avatar\n *\n * @slot - Renders an icon inside the default slot.\n *\n * @csspart base - The base wrapper of the avatar.\n * @csspart initials - The initials wrapper of the avatar.\n * @csspart image - The image wrapper of the avatar.\n * @csspart icon - The icon wrapper of the avatar.\n */\n@themes({ bootstrap, material, fluent, indigo })\nexport default class IgcAvatarComponent extends SizableMixin(LitElement) {\n  public static readonly tagName = 'igc-avatar';\n  public static override styles = styles;\n\n  /**\n   * The image source to use.\n   * @attr\n   */\n  @property()\n  public src!: string;\n\n  @state()\n  private hasError = false;\n\n  /**\n   * Alternative text for the image.\n   * @attr\n   */\n  @property()\n  public alt!: string;\n\n  /**\n   * Initials to use as a fallback when no image is available.\n   * @attr\n   */\n  @property()\n  public initials!: string;\n\n  /**\n   * The shape of the avatar.\n   * @attr\n   */\n  @property({ reflect: true })\n  public shape: 'circle' | 'rounded' | 'square' = 'square';\n\n  private get classes() {\n    const { size, shape } = this;\n\n    return {\n      circle: shape === 'circle',\n      rounded: shape === 'rounded',\n      square: shape === 'square',\n      small: size === 'small',\n      medium: size === 'medium',\n      large: size === 'large',\n    };\n  }\n\n  constructor() {\n    super();\n    this.size = 'small';\n  }\n\n  @watch('src')\n  protected handleErrorState() {\n    this.hasError = false;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=\"base\"\n        role=\"img\"\n        aria-label=\"avatar\"\n        aria-roledescription=${this.size + ' ' + this.shape}\n        class=${classMap(this.classes)}\n      >\n        ${this.initials\n          ? html`<span part=\"initials\">${this.initials}</span>`\n          : html` <slot></slot> `}\n        ${this.src && !this.hasError\n          ? html`\n              <img\n                part=\"image\"\n                alt=${ifDefined(this.alt)}\n                src=${ifDefined(this.src)}\n                @error=\"${() => (this.hasError = true)}\"\n              />\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-avatar': IgcAvatarComponent;\n  }\n}\n"]}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAgBvE,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,YAAY,CAAC,UAAU,CAAC;IAmCtE,IAAY,OAAO;QACjB,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEvB,OAAO;YACL,MAAM,EAAE,KAAK,KAAK,QAAQ;YAC1B,OAAO,EAAE,KAAK,KAAK,SAAS;YAC5B,MAAM,EAAE,KAAK,KAAK,QAAQ;SAC3B,CAAC;IACJ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAlCF,aAAQ,GAAG,KAAK,CAAC;QAqBlB,UAAK,GAAoC,QAAQ,CAAC;QAcvD,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;IACtB,CAAC;IAGS,gBAAgB;QACxB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;;;;+BAKgB,IAAI,CAAC,KAAK;gBACzB,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;;UAE5B,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS;YACrD,CAAC,CAAC,IAAI,CAAA,iBAAiB;UACvB,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC1B,CAAC,CAAC,IAAI,CAAA;;;sBAGM,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;sBACnB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;0BACf,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;;aAEzC;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AA9EsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AACvB,yBAAM,GAAG,MAAM,AAAT,CAAU;AAOhC;IADN,QAAQ,EAAE;+CACS;AAGZ;IADP,KAAK,EAAE;oDACiB;AAOlB;IADN,QAAQ,EAAE;+CACS;AAOb;IADN,QAAQ,EAAE;oDACc;AAOlB;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC6B;AAkB/C;IADT,KAAK,CAAC,KAAK,CAAC;0DAGZ;AArDkB,kBAAkB;IADtC,MAAM,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;GAC3B,kBAAkB,CAgFtC;eAhFoB,kBAAkB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { SizableMixin } from '../common/mixins/sizable.js';\nimport { styles } from './themes/avatar.base.css.js';\nimport { styles as material } from './themes/light/avatar.material.css.js';\nimport { styles as bootstrap } from './themes/light/avatar.bootstrap.css.js';\nimport { styles as fluent } from './themes/light/avatar.fluent.css.js';\nimport { styles as indigo } from './themes/light/avatar.indigo.css.js';\n\n/**\n * An avatar component is used as a representation of a user identity\n * typically in a user profile.\n *\n * @element igc-avatar\n *\n * @slot - Renders an icon inside the default slot.\n *\n * @csspart base - The base wrapper of the avatar.\n * @csspart initials - The initials wrapper of the avatar.\n * @csspart image - The image wrapper of the avatar.\n * @csspart icon - The icon wrapper of the avatar.\n */\n@themes({ bootstrap, material, fluent, indigo })\nexport default class IgcAvatarComponent extends SizableMixin(LitElement) {\n  public static readonly tagName = 'igc-avatar';\n  public static override styles = styles;\n\n  /**\n   * The image source to use.\n   * @attr\n   */\n  @property()\n  public src!: string;\n\n  @state()\n  private hasError = false;\n\n  /**\n   * Alternative text for the image.\n   * @attr\n   */\n  @property()\n  public alt!: string;\n\n  /**\n   * Initials to use as a fallback when no image is available.\n   * @attr\n   */\n  @property()\n  public initials!: string;\n\n  /**\n   * The shape of the avatar.\n   * @attr\n   */\n  @property({ reflect: true })\n  public shape: 'circle' | 'rounded' | 'square' = 'square';\n\n  private get classes() {\n    const { shape } = this;\n\n    return {\n      circle: shape === 'circle',\n      rounded: shape === 'rounded',\n      square: shape === 'square',\n    };\n  }\n\n  constructor() {\n    super();\n    this.size = 'small';\n  }\n\n  @watch('src')\n  protected handleErrorState() {\n    this.hasError = false;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        part=\"base\"\n        role=\"img\"\n        aria-label=\"avatar\"\n        aria-roledescription=${this.shape}\n        class=${classMap(this.classes)}\n      >\n        ${this.initials\n          ? html`<span part=\"initials\">${this.initials}</span>`\n          : html` <slot></slot> `}\n        ${this.src && !this.hasError\n          ? html`\n              <img\n                part=\"image\"\n                alt=${ifDefined(this.alt)}\n                src=${ifDefined(this.src)}\n                @error=\"${() => (this.hasError = true)}\"\n              />\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-avatar': IgcAvatarComponent;\n  }\n}\n"]}

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

@@ -79,18 +79,6 @@ img {
   text-transform: uppercase;
 }
 
-:host([size=large]) {
-  --component-size: var(--ig-size, var(--ig-size-large));
-}
-
-:host([size=medium]) {
-  --component-size: var(--ig-size, var(--ig-size-medium));
-}
-
-:host([size=small]) {
-  --component-size: var(--ig-size, var(--ig-size-small));
-}
-
 :host([shape=square]) [part=base] {
   border-radius: 0;
 }`;

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":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8FvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -webkit-fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n[part=base] {\n  position: relative;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  outline-style: none;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  overflow: hidden;\n  font-family: var(--ig-font-family);\n}\n\nimg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  background-color: inherit;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n[part=initials] {\n  text-transform: uppercase;\n}\n\n:host([size=large]) {\n  --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host([size=medium]) {\n  --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=small]) {\n  --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n:host([shape=square]) [part=base] {\n  border-radius: 0;\n}`;\n"]}
+{"version":3,"file":"avatar.base.css.js","sourceRoot":"","sources":["../../../../src/components/avatar/themes/avatar.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkFvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -webkit-fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n[part=base] {\n  position: relative;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  outline-style: none;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  overflow: hidden;\n  font-family: var(--ig-font-family);\n}\n\nimg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  background-color: inherit;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n[part=initials] {\n  text-transform: uppercase;\n}\n\n:host([shape=square]) [part=base] {\n  border-radius: 0;\n}`;\n"]}

package/components/button/button.d.ts

@@ -30,9 +30,6 @@ export default class IgcButtonComponent extends IgcButtonBaseComponent {
         outlined: boolean;
         contained: boolean;
         fab: boolean;
-        small: boolean;
-        medium: boolean;
-        large: boolean;
         disabled: boolean;
     };
     protected renderContent(): import("lit-html").TemplateResult<1>;

package/components/button/button.js

@@ -20,15 +20,12 @@ let IgcButtonComponent = class IgcButtonComponent extends IgcButtonBaseComponent
         this.size = 'medium';
     }
     get classes() {
-        const { size, variant } = this;
+        const { variant } = this;
         return {
             flat: variant === 'flat',
             outlined: variant === 'outlined',
             contained: variant === 'contained',
             fab: variant === 'fab',
-            small: size === 'small',
-            medium: size === 'medium',
-            large: size === 'large',
             disabled: this.disabled,
         };
     }

package/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,8CAA8C,CAAC;AAoBlF,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,sBAAsB;IAYpE;QACE,KAAK,EAAE,CAAC;QAHH,YAAO,GAA8C,WAAW,CAAC;QAItE,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;IACvB,CAAC;IAED,IAAuB,OAAO;QAC5B,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAE/B,OAAO;YACL,IAAI,EAAE,OAAO,KAAK,MAAM;YACxB,QAAQ,EAAE,OAAO,KAAK,UAAU;YAChC,SAAS,EAAE,OAAO,KAAK,WAAW;YAClC,GAAG,EAAE,OAAO,KAAK,KAAK;YACtB,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,MAAM,EAAE,IAAI,KAAK,QAAQ;YACzB,KAAK,EAAE,IAAI,KAAK,OAAO;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AArCsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AAE7B,yBAAM,GAAG,MAAM,AAAT,CAAU;AAO1B;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC4C;AAVrD,kBAAkB;IADtC,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;GAC3B,kBAAkB,CAuCtC;eAvCoB,kBAAkB","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { IgcButtonBaseComponent } from './button-base.js';\nimport { styles } from './themes/button/light/button.base.css.js';\nimport { styles as bootstrap } from './themes/button/light/button.bootstrap.css.js';\nimport { styles as fluent } from './themes/button/light/button.fluent.css.js';\nimport { styles as indigo } from './themes/button/light/button.indigo.css.js';\nimport { styles as material } from './themes/button/light/button.material.css.js';\n\n/**\n * Represents a clickable button, used to submit forms or anywhere in a\n * document for accessible, standard button functionality.\n *\n * @element igc-button\n *\n * @slot - Renders the label of the button.\n * @slot prefix - Renders content before the label of the button.\n * @slot suffix - Renders content after the label of the button.\n *\n * @fires igcFocus - Emitted when the button gains focus.\n * @fires igcBlur - Emitted when the button loses focus.\n *\n * @csspart base - The native button element.\n * @csspart prefix - The prefix container.\n * @csspart suffix - The suffix container.\n */\n@themes({ bootstrap, indigo, fluent, material })\nexport default class IgcButtonComponent extends IgcButtonBaseComponent {\n  public static readonly tagName = 'igc-button';\n\n  protected static styles = styles;\n\n  /**\n   * Sets the variant of the button.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant: 'flat' | 'contained' | 'outlined' | 'fab' = 'contained';\n\n  constructor() {\n    super();\n    this.size = 'medium';\n  }\n\n  protected override get classes() {\n    const { size, variant } = this;\n\n    return {\n      flat: variant === 'flat',\n      outlined: variant === 'outlined',\n      contained: variant === 'contained',\n      fab: variant === 'fab',\n      small: size === 'small',\n      medium: size === 'medium',\n      large: size === 'large',\n      disabled: this.disabled,\n    };\n  }\n\n  protected renderContent() {\n    return html`\n      <slot name=\"prefix\"></slot>\n      <slot></slot>\n      <slot name=\"suffix\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-button': IgcButtonComponent;\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,8CAA8C,CAAC;AAoBlF,IAAqB,kBAAkB,GAAvC,MAAqB,kBAAmB,SAAQ,sBAAsB;IAYpE;QACE,KAAK,EAAE,CAAC;QAHH,YAAO,GAA8C,WAAW,CAAC;QAItE,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;IACvB,CAAC;IAED,IAAuB,OAAO;QAC5B,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAEzB,OAAO;YACL,IAAI,EAAE,OAAO,KAAK,MAAM;YACxB,QAAQ,EAAE,OAAO,KAAK,UAAU;YAChC,SAAS,EAAE,OAAO,KAAK,WAAW;YAClC,GAAG,EAAE,OAAO,KAAK,KAAK;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAlCsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AAE7B,yBAAM,GAAG,MAAM,AAAT,CAAU;AAO1B;IADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC4C;AAVrD,kBAAkB;IADtC,MAAM,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;GAC3B,kBAAkB,CAoCtC;eApCoB,kBAAkB","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { IgcButtonBaseComponent } from './button-base.js';\nimport { styles } from './themes/button/light/button.base.css.js';\nimport { styles as bootstrap } from './themes/button/light/button.bootstrap.css.js';\nimport { styles as fluent } from './themes/button/light/button.fluent.css.js';\nimport { styles as indigo } from './themes/button/light/button.indigo.css.js';\nimport { styles as material } from './themes/button/light/button.material.css.js';\n\n/**\n * Represents a clickable button, used to submit forms or anywhere in a\n * document for accessible, standard button functionality.\n *\n * @element igc-button\n *\n * @slot - Renders the label of the button.\n * @slot prefix - Renders content before the label of the button.\n * @slot suffix - Renders content after the label of the button.\n *\n * @fires igcFocus - Emitted when the button gains focus.\n * @fires igcBlur - Emitted when the button loses focus.\n *\n * @csspart base - The native button element.\n * @csspart prefix - The prefix container.\n * @csspart suffix - The suffix container.\n */\n@themes({ bootstrap, indigo, fluent, material })\nexport default class IgcButtonComponent extends IgcButtonBaseComponent {\n  public static readonly tagName = 'igc-button';\n\n  protected static styles = styles;\n\n  /**\n   * Sets the variant of the button.\n   * @attr\n   */\n  @property({ reflect: true })\n  public variant: 'flat' | 'contained' | 'outlined' | 'fab' = 'contained';\n\n  constructor() {\n    super();\n    this.size = 'medium';\n  }\n\n  protected override get classes() {\n    const { variant } = this;\n\n    return {\n      flat: variant === 'flat',\n      outlined: variant === 'outlined',\n      contained: variant === 'contained',\n      fab: variant === 'fab',\n      disabled: this.disabled,\n    };\n  }\n\n  protected renderContent() {\n    return html`\n      <slot name=\"prefix\"></slot>\n      <slot></slot>\n      <slot name=\"suffix\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-button': IgcButtonComponent;\n  }\n}\n"]}

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

@@ -48,18 +48,6 @@ export const styles = css `:host {
   font-size: inherit !important;
 }
 
-:host([size=small]) {
-  --component-size: var(--ig-size, var(--ig-size-small));
-}
-
-:host([size=medium]) {
-  --component-size: var(--ig-size, var(--ig-size-medium));
-}
-
-:host([size=large]) {
-  --component-size: var(--ig-size, var(--ig-size-large));
-}
-
 [part=base] {
   font-family: var(--ig-button-font-family, var(--ig-font-family));
   font-size: var(--ig-button-font-size);

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

@@ -1 +1 @@
-{"version":3,"file":"button.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/button/light/button.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4GvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --gap: max(var(--is-large, 1) * max(0.75rem, -1 * 0.75rem), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem));\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  vertical-align: middle;\n}\n:host ::slotted(*) {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  font-size: inherit !important;\n}\n\n:host([size=small]) {\n  --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n:host([size=medium]) {\n  --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=large]) {\n  --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n[part=base] {\n  font-family: var(--ig-button-font-family, var(--ig-font-family));\n  font-size: var(--ig-button-font-size);\n  font-weight: var(--ig-button-font-weight);\n  font-style: var(--ig-button-font-style);\n  line-height: var(--ig-button-line-height);\n  letter-spacing: var(--ig-button-letter-spacing);\n  text-transform: var(--ig-button-text-transform);\n  margin-top: var(--ig-button-margin-top);\n  margin-bottom: var(--ig-button-margin-bottom);\n  position: relative;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-flex: 1;\n      -ms-flex: 1;\n          flex: 1;\n  border: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  outline-style: none;\n  -webkit-tap-highlight-color: transparent;\n  overflow: hidden;\n  white-space: nowrap;\n  text-decoration: none;\n  z-index: 0;\n  padding: 0 max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(12px, -1 * 12px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(8px, -1 * 8px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n  gap: var(--gap);\n  min-width: 5.5rem;\n}\n\n:host(:not([disabled])) [part=base]:hover,\n:host(:not(:disabled)) [part=base]:hover {\n  cursor: pointer;\n}\n\n:host(:disabled),\n:host([disabled]) {\n  pointer-events: none;\n}`;\n"]}
+{"version":3,"file":"button.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/button/light/button.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --gap: max(var(--is-large, 1) * max(0.75rem, -1 * 0.75rem), var(--is-medium, 1) * max(0.5rem, -1 * 0.5rem), var(--is-small, 1) * max(0.25rem, -1 * 0.25rem));\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  vertical-align: middle;\n}\n:host ::slotted(*) {\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  font-size: inherit !important;\n}\n\n[part=base] {\n  font-family: var(--ig-button-font-family, var(--ig-font-family));\n  font-size: var(--ig-button-font-size);\n  font-weight: var(--ig-button-font-weight);\n  font-style: var(--ig-button-font-style);\n  line-height: var(--ig-button-line-height);\n  letter-spacing: var(--ig-button-letter-spacing);\n  text-transform: var(--ig-button-text-transform);\n  margin-top: var(--ig-button-margin-top);\n  margin-bottom: var(--ig-button-margin-bottom);\n  position: relative;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-flex: 1;\n      -ms-flex: 1;\n          flex: 1;\n  border: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  outline-style: none;\n  -webkit-tap-highlight-color: transparent;\n  overflow: hidden;\n  white-space: nowrap;\n  text-decoration: none;\n  z-index: 0;\n  padding: 0 max(var(--is-large, 1) * max(16px, -1 * 16px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(12px, -1 * 12px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(8px, -1 * 8px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n  gap: var(--gap);\n  min-width: 5.5rem;\n}\n\n:host(:not([disabled])) [part=base]:hover,\n:host(:not(:disabled)) [part=base]:hover {\n  cursor: pointer;\n}\n\n:host(:disabled),\n:host([disabled]) {\n  pointer-events: none;\n}`;\n"]}

package/components/button/themes/icon-button/light/icon-button.base.css.js

@@ -86,18 +86,6 @@ export const styles = css `:host {
   line-height: 1;
 }
 
-:host([size=small]) {
-  --component-size: var(--ig-size, var(--ig-size-small));
-}
-
-:host([size=medium]) {
-  --component-size: var(--ig-size, var(--ig-size-medium));
-}
-
-:host([size=large]) {
-  --component-size: var(--ig-size, var(--ig-size-large));
-}
-
 :host([disabled]),
 :host(:disabled) {
   pointer-events: none;

package/components/button/themes/icon-button/light/icon-button.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/icon-button/light/icon-button.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --icon-size: 1.125rem;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  vertical-align: middle;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -webkit-fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n::slotted(:not(igc-ripple)) {\n  --icon-size: 1.125rem;\n  font-size: var(--icon-size) !important;\n  vertical-align: middle;\n  pointer-events: none;\n}\n\n[part=icon] {\n  --size: 1.125rem;\n}\n\n[part=base] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  border: none;\n  outline-style: none;\n  background: transparent;\n  padding: max(var(--is-large, 1) * max(6px, -1 * 6px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(5px, -1 * 5px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  cursor: pointer;\n  -webkit-transition: background 0.15s ease-out, -webkit-box-shadow 0.2s ease-in;\n  transition: background 0.15s ease-out, -webkit-box-shadow 0.2s ease-in;\n  transition: box-shadow 0.2s ease-in, background 0.15s ease-out;\n  transition: box-shadow 0.2s ease-in, background 0.15s ease-out, -webkit-box-shadow 0.2s ease-in;\n  -webkit-transition-delay: 0.05s;\n          transition-delay: 0.05s;\n  font-size: var(--icon-size);\n  line-height: 1;\n}\n\n:host([size=small]) {\n  --component-size: var(--ig-size, var(--ig-size-small));\n}\n\n:host([size=medium]) {\n  --component-size: var(--ig-size, var(--ig-size-medium));\n}\n\n:host([size=large]) {\n  --component-size: var(--ig-size, var(--ig-size-large));\n}\n\n:host([disabled]),\n:host(:disabled) {\n  pointer-events: none;\n}`;\n"]}
+{"version":3,"file":"icon-button.base.css.js","sourceRoot":"","sources":["../../../../../../src/components/button/themes/icon-button/light/icon-button.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0FvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);\n  --is-medium: min(\n      clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),\n      clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)\n  );\n  --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  scrollbar-width: var(--ig-scrollbar-size);\n  scrollbar-color: var(--ig-scrollbar-thumb-background) var(--ig-scrollbar-track-background);\n}\n:host *,\n:host *::before,\n:host *::after {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n}\n:host ::-webkit-scrollbar {\n  width: var(--ig-scrollbar-size);\n  height: var(--ig-scrollbar-size);\n  background: var(--ig-scrollbar-track-background);\n}\n:host ::-webkit-scrollbar-thumb {\n  background: var(--ig-scrollbar-thumb-background);\n}\n\n:host([hidden]),\n[hidden] {\n  display: none !important;\n}\n:host {\n  --icon-size: 1.125rem;\n  display: -webkit-inline-box;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  vertical-align: middle;\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -webkit-fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n::slotted(:not(igc-ripple)) {\n  --icon-size: 1.125rem;\n  font-size: var(--icon-size) !important;\n  vertical-align: middle;\n  pointer-events: none;\n}\n\n[part=icon] {\n  --size: 1.125rem;\n}\n\n[part=base] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  border: none;\n  outline-style: none;\n  background: transparent;\n  padding: max(var(--is-large, 1) * max(6px, -1 * 6px) * var(--ig-spacing-large, var(--ig-spacing, --ig-spacing)), var(--is-medium, 1) * max(5px, -1 * 5px) * var(--ig-spacing-medium, var(--ig-spacing, --ig-spacing)), var(--is-small, 1) * max(4px, -1 * 4px) * var(--ig-spacing-small, var(--ig-spacing, --ig-spacing)));\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  cursor: pointer;\n  -webkit-transition: background 0.15s ease-out, -webkit-box-shadow 0.2s ease-in;\n  transition: background 0.15s ease-out, -webkit-box-shadow 0.2s ease-in;\n  transition: box-shadow 0.2s ease-in, background 0.15s ease-out;\n  transition: box-shadow 0.2s ease-in, background 0.15s ease-out, -webkit-box-shadow 0.2s ease-in;\n  -webkit-transition-delay: 0.05s;\n          transition-delay: 0.05s;\n  font-size: var(--icon-size);\n  line-height: 1;\n}\n\n:host([disabled]),\n:host(:disabled) {\n  pointer-events: none;\n}`;\n"]}

package/components/calendar/themes/bootstrap/calendar.bootstrap.css.js

@@ -51,18 +51,11 @@ export const styles = css `:host(igc-calendar) {
   border: 0.0625rem solid hsla(var(--ig-gray-300), var(--ig-gray-a));
   border-radius: var(--border-radius);
 }
-
-:host(igc-calendar[size=large]) igc-days-view::part(date-inner),
-:host(igc-calendar[size=medium]) igc-days-view::part(date-inner),
-:host(igc-calendar[size=small]) igc-days-view::part(date-inner) {
+:host(igc-calendar) igc-days-view::part(date-inner) {
   border-radius: var(--date-border-radius);
 }
-:host(igc-calendar[size=large]) igc-months-view::part(month-inner),
-:host(igc-calendar[size=large]) igc-years-view::part(year-inner),
-:host(igc-calendar[size=medium]) igc-months-view::part(month-inner),
-:host(igc-calendar[size=medium]) igc-years-view::part(year-inner),
-:host(igc-calendar[size=small]) igc-months-view::part(month-inner),
-:host(igc-calendar[size=small]) igc-years-view::part(year-inner) {
+:host(igc-calendar) igc-months-view::part(month-inner),
+:host(igc-calendar) igc-years-view::part(year-inner) {
   border-radius: var(--month-border-radius);
 }
 

package/components/calendar/themes/bootstrap/calendar.bootstrap.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/calendar/themes/bootstrap/calendar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+FvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host(igc-calendar) {\n  --content-background: var(--ig-calendar-content-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --content-text-color: var(--ig-calendar-content-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-color: var(--ig-calendar-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --header-background: var(--ig-calendar-header-background, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --header-text-color: var(--ig-calendar-header-text-color, var(--ig-secondary-500-contrast));\n  --picker-background-color: var(--ig-calendar-picker-background-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --picker-arrow-color: var(--ig-calendar-picker-arrow-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --picker-arrow-hover-color: var(--ig-calendar-picker-arrow-hover-color, hsla(var(--ig-primary-800), var(--ig-primary-a)));\n  --picker-text-color: var(--ig-calendar-picker-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --picker-text-hover-color: var(--ig-calendar-picker-text-hover-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --inactive-text-color: var(--ig-calendar-inactive-text-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --label-color: var(--ig-calendar-label-color, hsla(var(--ig-info-500), var(--ig-info-a)));\n  --weekend-text-color: var(--ig-calendar-weekend-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --year-current-text-color: var(--ig-calendar-year-current-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --month-current-text-color: var(--ig-calendar-month-current-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --month-hover-current-text-color: var(--ig-calendar-month-hover-current-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --year-hover-text-color: var(--ig-calendar-year-hover-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --month-hover-background: var(--ig-calendar-month-hover-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --month-hover-text-color: var(--ig-calendar-month-hover-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --date-selected-background: var(--ig-calendar-date-selected-background, hsla(var(--ig-primary-300), var(--ig-primary-a)));\n  --date-selected-hover-background: var(--ig-calendar-date-selected-hover-background, hsla(var(--ig-gray-100), 0.18));\n  --date-selected-focus-background: var(--ig-calendar-date-selected-focus-background, hsla(var(--ig-gray-100), 0.18));\n  --date-selected-current-background: var(--ig-calendar-date-selected-current-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  --date-selected-current-hover-background: var(--ig-calendar-date-selected-current-hover-background, hsla(var(--ig-primary-700), var(--ig-primary-a)));\n  --date-selected-current-focus-background: var(--ig-calendar-date-selected-current-focus-background, hsla(var(--ig-primary-700), var(--ig-primary-a)));\n  --date-selected-text-color: var(--ig-calendar-date-selected-text-color, var(--ig-primary-900-contrast));\n  --date-selected-hover-foreground: var(--ig-calendar-date-selected-hover-foreground, var(--ig-gray-900-contrast));\n  --date-selected-focus-foreground: var(--ig-calendar-date-selected-focus-foreground, var(--ig-gray-900-contrast));\n  --date-current-text-color: var(--ig-calendar-date-current-text-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --date-current-hover-foreground: var(--ig-calendar-date-current-hover-foreground, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --date-current-focus-foreground: var(--ig-calendar-date-current-focus-foreground, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --date-selected-current-foreground: var(--ig-calendar-date-selected-current-foreground, var(--ig-secondary-500-contrast));\n  --date-selected-current-hover-foreground: var(--ig-calendar-date-selected-current-hover-foreground, var(--ig-primary-600-contrast));\n  --date-selected-current-focus-foreground: var(--ig-calendar-date-selected-current-focus-foreground, var(--ig-primary-600-contrast));\n  --date-current-bg-color: var(--ig-calendar-date-current-bg-color, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  --date-current-hover-background: var(--ig-calendar-date-current-hover-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  --date-current-focus-background: var(--ig-calendar-date-current-focus-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  --date-hover-background: var(--ig-calendar-date-hover-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --date-focus-background: var(--ig-calendar-date-focus-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --date-special-background: var(--ig-calendar-date-special-background, hsla(var(--ig-warn-500), var(--ig-warn-a)));\n  --date-special-text-color: var(--ig-calendar-date-special-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --date-disabled-text-color: var(--ig-calendar-date-disabled-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --date-disabled-background: var(--ig-calendar-date-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --week-number-color: var(--ig-calendar-week-number-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --week-number-background: var(--ig-calendar-week-number-background, hsla(var(--ig-gray-300), 0.5));\n  --border-radius: var(--ig-calendar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n  --date-border-radius: var(--ig-calendar-date-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n  --month-border-radius: var(--ig-calendar-month-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n  border: 0.0625rem solid hsla(var(--ig-gray-300), var(--ig-gray-a));\n  border-radius: var(--border-radius);\n}\n\n:host(igc-calendar[size=large]) igc-days-view::part(date-inner),\n:host(igc-calendar[size=medium]) igc-days-view::part(date-inner),\n:host(igc-calendar[size=small]) igc-days-view::part(date-inner) {\n  border-radius: var(--date-border-radius);\n}\n:host(igc-calendar[size=large]) igc-months-view::part(month-inner),\n:host(igc-calendar[size=large]) igc-years-view::part(year-inner),\n:host(igc-calendar[size=medium]) igc-months-view::part(month-inner),\n:host(igc-calendar[size=medium]) igc-years-view::part(year-inner),\n:host(igc-calendar[size=small]) igc-months-view::part(month-inner),\n:host(igc-calendar[size=small]) igc-years-view::part(year-inner) {\n  border-radius: var(--month-border-radius);\n}\n\n:host([hide-header]) [part~=navigation] {\n  border-start-start-radius: var(--border-radius);\n  border-start-end-radius: var(--border-radius);\n}\n\n[part~=navigation-button] {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n[part~=navigation-button]:hover, [part~=navigation-button]:focus {\n  color: hsla(var(--ig-primary-600), var(--ig-primary-a));\n}\n\n[part~=navigation],\n[part~=header] {\n  background: hsla(var(--ig-secondary-50), 0.2);\n  color: var(--ig-gray-50-contrast);\n}\n\n[part=header-title] {\n  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-1-font-size);\n  font-weight: var(--ig-subtitle-1-font-weight);\n  font-style: var(--ig-subtitle-1-font-style);\n  line-height: var(--ig-subtitle-1-line-height);\n  letter-spacing: var(--ig-subtitle-1-letter-spacing);\n  text-transform: var(--ig-subtitle-1-text-transform);\n  margin-top: var(--ig-subtitle-1-margin-top);\n  margin-bottom: var(--ig-subtitle-1-margin-bottom);\n}`;\n"]}
+{"version":3,"file":"calendar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/calendar/themes/bootstrap/calendar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwFvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host(igc-calendar) {\n  --content-background: var(--ig-calendar-content-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --content-text-color: var(--ig-calendar-content-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --border-color: var(--ig-calendar-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --header-background: var(--ig-calendar-header-background, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --header-text-color: var(--ig-calendar-header-text-color, var(--ig-secondary-500-contrast));\n  --picker-background-color: var(--ig-calendar-picker-background-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --picker-arrow-color: var(--ig-calendar-picker-arrow-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --picker-arrow-hover-color: var(--ig-calendar-picker-arrow-hover-color, hsla(var(--ig-primary-800), var(--ig-primary-a)));\n  --picker-text-color: var(--ig-calendar-picker-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --picker-text-hover-color: var(--ig-calendar-picker-text-hover-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --inactive-text-color: var(--ig-calendar-inactive-text-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --label-color: var(--ig-calendar-label-color, hsla(var(--ig-info-500), var(--ig-info-a)));\n  --weekend-text-color: var(--ig-calendar-weekend-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --year-current-text-color: var(--ig-calendar-year-current-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --month-current-text-color: var(--ig-calendar-month-current-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --month-hover-current-text-color: var(--ig-calendar-month-hover-current-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --year-hover-text-color: var(--ig-calendar-year-hover-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --month-hover-background: var(--ig-calendar-month-hover-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --month-hover-text-color: var(--ig-calendar-month-hover-text-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --date-selected-background: var(--ig-calendar-date-selected-background, hsla(var(--ig-primary-300), var(--ig-primary-a)));\n  --date-selected-hover-background: var(--ig-calendar-date-selected-hover-background, hsla(var(--ig-gray-100), 0.18));\n  --date-selected-focus-background: var(--ig-calendar-date-selected-focus-background, hsla(var(--ig-gray-100), 0.18));\n  --date-selected-current-background: var(--ig-calendar-date-selected-current-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  --date-selected-current-hover-background: var(--ig-calendar-date-selected-current-hover-background, hsla(var(--ig-primary-700), var(--ig-primary-a)));\n  --date-selected-current-focus-background: var(--ig-calendar-date-selected-current-focus-background, hsla(var(--ig-primary-700), var(--ig-primary-a)));\n  --date-selected-text-color: var(--ig-calendar-date-selected-text-color, var(--ig-primary-900-contrast));\n  --date-selected-hover-foreground: var(--ig-calendar-date-selected-hover-foreground, var(--ig-gray-900-contrast));\n  --date-selected-focus-foreground: var(--ig-calendar-date-selected-focus-foreground, var(--ig-gray-900-contrast));\n  --date-current-text-color: var(--ig-calendar-date-current-text-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --date-current-hover-foreground: var(--ig-calendar-date-current-hover-foreground, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --date-current-focus-foreground: var(--ig-calendar-date-current-focus-foreground, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --date-selected-current-foreground: var(--ig-calendar-date-selected-current-foreground, var(--ig-secondary-500-contrast));\n  --date-selected-current-hover-foreground: var(--ig-calendar-date-selected-current-hover-foreground, var(--ig-primary-600-contrast));\n  --date-selected-current-focus-foreground: var(--ig-calendar-date-selected-current-focus-foreground, var(--ig-primary-600-contrast));\n  --date-current-bg-color: var(--ig-calendar-date-current-bg-color, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  --date-current-hover-background: var(--ig-calendar-date-current-hover-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  --date-current-focus-background: var(--ig-calendar-date-current-focus-background, hsla(var(--ig-primary-600), var(--ig-primary-a)));\n  --date-hover-background: var(--ig-calendar-date-hover-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --date-focus-background: var(--ig-calendar-date-focus-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --date-special-background: var(--ig-calendar-date-special-background, hsla(var(--ig-warn-500), var(--ig-warn-a)));\n  --date-special-text-color: var(--ig-calendar-date-special-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));\n  --date-disabled-text-color: var(--ig-calendar-date-disabled-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --date-disabled-background: var(--ig-calendar-date-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --week-number-color: var(--ig-calendar-week-number-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --week-number-background: var(--ig-calendar-week-number-background, hsla(var(--ig-gray-300), 0.5));\n  --border-radius: var(--ig-calendar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n  --date-border-radius: var(--ig-calendar-date-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n  --month-border-radius: var(--ig-calendar-month-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));\n  border: 0.0625rem solid hsla(var(--ig-gray-300), var(--ig-gray-a));\n  border-radius: var(--border-radius);\n}\n:host(igc-calendar) igc-days-view::part(date-inner) {\n  border-radius: var(--date-border-radius);\n}\n:host(igc-calendar) igc-months-view::part(month-inner),\n:host(igc-calendar) igc-years-view::part(year-inner) {\n  border-radius: var(--month-border-radius);\n}\n\n:host([hide-header]) [part~=navigation] {\n  border-start-start-radius: var(--border-radius);\n  border-start-end-radius: var(--border-radius);\n}\n\n[part~=navigation-button] {\n  color: hsla(var(--ig-primary-500), var(--ig-primary-a));\n}\n[part~=navigation-button]:hover, [part~=navigation-button]:focus {\n  color: hsla(var(--ig-primary-600), var(--ig-primary-a));\n}\n\n[part~=navigation],\n[part~=header] {\n  background: hsla(var(--ig-secondary-50), 0.2);\n  color: var(--ig-gray-50-contrast);\n}\n\n[part=header-title] {\n  font-family: var(--ig-subtitle-1-font-family, var(--ig-font-family));\n  font-size: var(--ig-subtitle-1-font-size);\n  font-weight: var(--ig-subtitle-1-font-weight);\n  font-style: var(--ig-subtitle-1-font-style);\n  line-height: var(--ig-subtitle-1-line-height);\n  letter-spacing: var(--ig-subtitle-1-letter-spacing);\n  text-transform: var(--ig-subtitle-1-text-transform);\n  margin-top: var(--ig-subtitle-1-margin-top);\n  margin-bottom: var(--ig-subtitle-1-margin-bottom);\n}`;\n"]}

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

@@ -131,18 +131,6 @@ export const styles = css `:host {
   border-radius: var(--month-border-radius);
 }
 
-:host(igc-calendar[size=large]) {
-  --component-size: var(--ig-size, var(--ig-size-large));
-}
-
-:host(igc-calendar[size=medium]) {
-  --component-size: var(--ig-size, var(--ig-size-medium));
-}
-
-:host(igc-calendar[size=small]) {
-  --component-size: var(--ig-size, var(--ig-size-small));
-}
-
 [part=navigation] {
   position: relative;
   display: -webkit-box;
@@ -210,6 +198,19 @@ export const styles = css `:host {
   gap: 1.5rem;
 }
 
+[dir=rtl] igc-calendar [part~=navigation-button],
+:host(igc-calendar[dir=rtl]) [part~=navigation-button] {
+  -webkit-transform: rotate(180deg);
+      -ms-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+[dir=rtl] igc-calendar [part~=navigation-button][part~=vertical],
+:host(igc-calendar[dir=rtl]) [part~=navigation-button][part~=vertical] {
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+
 :host(igc-calendar[header-orientation=vertical]) {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;

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

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

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

@@ -131,18 +131,6 @@ export const styles = css `:host {
   border-radius: var(--month-border-radius);
 }
 
-:host(igc-calendar[size=large]) {
-  --component-size: var(--ig-size, var(--ig-size-large));
-}
-
-:host(igc-calendar[size=medium]) {
-  --component-size: var(--ig-size, var(--ig-size-medium));
-}
-
-:host(igc-calendar[size=small]) {
-  --component-size: var(--ig-size, var(--ig-size-small));
-}
-
 [part=navigation] {
   position: relative;
   display: -webkit-box;
@@ -210,6 +198,19 @@ export const styles = css `:host {
   gap: 1.5rem;
 }
 
+[dir=rtl] igc-calendar [part~=navigation-button],
+:host(igc-calendar[dir=rtl]) [part~=navigation-button] {
+  -webkit-transform: rotate(180deg);
+      -ms-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+[dir=rtl] igc-calendar [part~=navigation-button][part~=vertical],
+:host(igc-calendar[dir=rtl]) [part~=navigation-button][part~=vertical] {
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+
 :host(igc-calendar[header-orientation=vertical]) {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
@@ -362,18 +363,11 @@ export const styles = css `:host {
   --month-border-radius: var(--ig-calendar-month-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0) * 1.25rem), 1.25rem));
   border-radius: var(--border-radius);
 }
-
-:host([size=large]) igc-days-view::part(date-inner),
-:host([size=medium]) igc-days-view::part(date-inner),
-:host([size=small]) igc-days-view::part(date-inner) {
+:host(igc-calendar) igc-days-view::part(date-inner) {
   border-radius: 0;
 }
-:host([size=large]) igc-months-view::part(month-inner),
-:host([size=large]) igc-years-view::part(year-inner),
-:host([size=medium]) igc-months-view::part(month-inner),
-:host([size=medium]) igc-years-view::part(year-inner),
-:host([size=small]) igc-months-view::part(month-inner),
-:host([size=small]) igc-years-view::part(year-inner) {
+:host(igc-calendar) igc-months-view::part(month-inner),
+:host(igc-calendar) igc-years-view::part(year-inner) {
   border-radius: var(--month-border-radius);
 }
 

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

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

package/components/calendar/themes/fluent/days-view.fluent.css.js

@@ -1,5 +1,9 @@
 import { css } from 'lit';
-export const styles = css `[part~=date-inner]:focus, [part~=date-inner]:hover {
+export const styles = css `:host {
+  --date-size: max(var(--is-large, 1) * max(1rem, -1 * 1rem), var(--is-medium, 1) * max(0.875rem, -1 * 0.875rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));
+}
+
+[part~=date-inner]:focus, [part~=date-inner]:hover {
   background: hsla(var(--ig-gray-300), var(--ig-gray-a));
   border-color: hsla(var(--ig-gray-300), var(--ig-gray-a));
   color: var(--date-color-hover, var(--ig-gray-300-contrast));
@@ -181,32 +185,12 @@ export const styles = css `[part~=date-inner]:focus, [part~=date-inner]:hover {
 
 [part~=date][part~=first][part~=selected][part~=range]::before {
   border-inline-end-color: transparent;
+  inset-inline-start: calc(50% - var(--date-size));
 }
 
 [part~=date][part~=last][part~=selected][part~=range]::before {
   border-inline-start-color: transparent;
-}
-
-:host(igc-calendar[size=large]) igc-days-view::part(date first selected range)::before {
-  margin: 0;
-  inset-inline-start: calc(50% - 1rem);
-}
-:host(igc-calendar[size=large]) igc-days-view::part(date last selected range)::before {
-  inset-inline-end: calc(50% - 1rem);
-}
-
-:host(igc-calendar[size=medium]) igc-days-view::part(date first selected range)::before {
-  inset-inline-start: calc(50% - 0.875rem);
-}
-:host(igc-calendar[size=medium]) igc-days-view::part(date last selected range)::before {
-  inset-inline-end: calc(50% - 0.875rem);
-}
-
-:host(igc-calendar[size=small]) igc-days-view::part(date first selected range)::before {
-  inset-inline-start: calc(50% - 0.75rem);
-}
-:host(igc-calendar[size=small]) igc-days-view::part(date last selected range)::before {
-  inset-inline-end: calc(50% - 0.75rem);
+  inset-inline-end: calc(50% - var(--date-size));
 }
 
 [part~=date][part~=first][part~=last][part~=selected][part~=range]::before {