igniteui-webcomponents 4.4.0 → 4.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"months-view.js","sourceRoot":"","sources":["../../../../src/components/calendar/months-view/months-view.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { themes } from '../../../theming/theming-decorator.js';\nimport { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';\nimport { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';\nimport { watch } from '../../common/decorators/watch.js';\nimport { Constructor } from '../../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../../common/mixins/event-emitter.js';\nimport { partNameMap } from '../../common/util.js';\nimport {\n  IgcCalendarBaseEventMap,\n  MONTHS_PER_ROW,\n} from '../common/calendar-base.js';\nimport { Calendar, TimeDeltaInterval } from '../common/calendar.model.js';\nimport { setDateSafe } from '../common/utils.js';\nimport { styles as bootstrap } from '../themes/bootstrap/year-month-view.bootstrap.css.js';\nimport { styles as fluent } from '../themes/fluent/year-month-view.fluent.css.js';\nimport { styles } from '../themes/year-month-view.base.css.js';\n\n/**\n * Instantiate a months view as a separate component in the calendar.\n *\n * @element igc-months-view\n *\n * @csspart months-row - The months row container.\n * @csspart month - The month container.\n * @csspart month-inner - The inner month container.\n */\n@blazorIndirectRender\n@blazorSuppressComponent\n@themes({\n  bootstrap,\n  fluent,\n})\nexport default class IgcMonthsViewComponent extends EventEmitterMixin<\n  IgcCalendarBaseEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-months-view';\n  public static styles = styles;\n  private calendarModel = new Calendar();\n  private monthFormatter: any;\n\n  @query('[tabindex=\"0\"]')\n  private activeMonth!: HTMLElement;\n\n  /** Тhe current value of the calendar. */\n  @property({ attribute: false })\n  public value = new Date();\n\n  /** Sets the locale used for formatting and displaying the dates. */\n  @property()\n  public locale = 'en';\n\n  /** The format of the month. Defaults to long. */\n  @property({ attribute: 'month-format' })\n  public monthFormat:\n    | 'numeric'\n    | '2-digit'\n    | 'long'\n    | 'short'\n    | 'narrow'\n    | undefined = 'long';\n\n  @watch('locale')\n  @watch('monthFormat')\n  protected formatChange() {\n    this.initMonthFormatter();\n  }\n\n  constructor() {\n    super();\n    this.setAttribute('role', 'grid');\n    this.initMonthFormatter();\n  }\n\n  /** Focuses the active date. */\n  public focusActiveDate() {\n    this.activeMonth.focus();\n  }\n\n  private initMonthFormatter() {\n    this.monthFormatter = new Intl.DateTimeFormat(this.locale, {\n      month: this.monthFormat,\n    });\n  }\n\n  private formattedMonth(value: Date) {\n    return this.monthFormatter.format(value);\n  }\n\n  private get months(): Date[][] {\n    let date = new Date(this.value.getFullYear(), 0, 1);\n    const result = [];\n\n    const rowsCount = 12 / MONTHS_PER_ROW;\n\n    for (let i = 0; i < rowsCount; i++) {\n      const row: Date[] = [];\n\n      for (let j = 0; j < MONTHS_PER_ROW; j++) {\n        row.push(date);\n        date = this.calendarModel.timedelta(date, TimeDeltaInterval.Month, 1);\n      }\n      result.push(row);\n    }\n\n    return result;\n  }\n\n  private resolveMonthPartName(date: Date) {\n    const today = new Date();\n    return {\n      month: true,\n      selected: date.getMonth() === this.value.getMonth(),\n      current:\n        date.getFullYear() === today.getFullYear() &&\n        date.getMonth() === today.getMonth(),\n    };\n  }\n\n  private selectMonth(month: Date) {\n    const value = new Date(month);\n    setDateSafe(value, this.value.getDate());\n    this.value = value;\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  private monthKeyDown(event: KeyboardEvent, month: Date) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.selectMonth(month);\n    }\n  }\n\n  protected override render() {\n    return html`${this.months.map((row) => {\n      return html`<div part=\"months-row\" role=\"row\">\n        ${row.map((month) => {\n          const monthPartName = partNameMap(this.resolveMonthPartName(month));\n          const monthInnerPartName = monthPartName.replace(\n            'month',\n            'month-inner'\n          );\n\n          return html`<span part=${monthPartName}>\n            <span\n              part=${monthInnerPartName}\n              role=\"gridcell\"\n              aria-label=${month.toLocaleString(this.locale, {\n                month: 'long',\n                year: 'numeric',\n              })}\n              aria-selected=${month.getMonth() === this.value.getMonth()}\n              tabindex=\"${month.getFullYear() === this.value.getFullYear() &&\n              month.getMonth() === this.value.getMonth()\n                ? 0\n                : -1}\"\n              @click=${() => this.selectMonth(month)}\n              @keydown=${(event: KeyboardEvent) =>\n                this.monthKeyDown(event, month)}\n            >\n              ${this.formattedMonth(month)}\n            </span>\n          </span>`;\n        })}\n      </div>`;\n    })}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-months-view': IgcMonthsViewComponent;\n  }\n}\n"]}
+{"version":3,"file":"months-view.js","sourceRoot":"","sources":["../../../../src/components/calendar/months-view/months-view.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,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,iDAAiD,CAAC;AACvF,OAAO,EAAE,uBAAuB,EAAE,MAAM,oDAAoD,CAAC;AAC7F,OAAO,EAAE,KAAK,EAAE,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAEzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAEL,cAAc,GACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,uCAAuC,CAAC;AAC/D,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,4DAA4D,CAAC;AACjG,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AACxF,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,0DAA0D,CAAC;AAC9F,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,sDAAsD,CAAC;AA2BxF,IAAqB,sBAAsB,GAA3C,MAAqB,sBAAuB,SAAQ,iBAAiB,CAGnE,UAAU,CAAC;IAIJ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IA4BS,YAAY;QACpB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QA/BF,kBAAa,GAAG,IAAI,QAAQ,EAAE,CAAC;QAQhC,UAAK,GAAG,IAAI,IAAI,EAAE,CAAC;QAInB,WAAM,GAAG,IAAI,CAAC;QAId,gBAAW,GAMF,MAAM,CAAC;QAUrB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAClC,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAGM,eAAe;QACpB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;IAC3B,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE;YACzD,KAAK,EAAE,IAAI,CAAC,WAAW;SACxB,CAAC,CAAC;IACL,CAAC;IAEO,cAAc,CAAC,KAAW;QAChC,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,IAAY,MAAM;QAChB,IAAI,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QACpD,MAAM,MAAM,GAAG,EAAE,CAAC;QAElB,MAAM,SAAS,GAAG,EAAE,GAAG,cAAc,CAAC;QAEtC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,EAAE;YAClC,MAAM,GAAG,GAAW,EAAE,CAAC;YAEvB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,EAAE;gBACvC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBACf,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,IAAI,EAAE,iBAAiB,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;aACvE;YACD,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAClB;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAEO,oBAAoB,CAAC,IAAU;QACrC,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC;QACzB,OAAO;YACL,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;YACnD,OAAO,EACL,IAAI,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC,WAAW,EAAE;gBAC1C,IAAI,CAAC,QAAQ,EAAE,KAAK,KAAK,CAAC,QAAQ,EAAE;SACvC,CAAC;IACJ,CAAC;IAEO,WAAW,CAAC,KAAW;QAC7B,MAAM,KAAK,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;QACzC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACtD,CAAC;IAEO,YAAY,CAAC,KAAoB,EAAE,KAAW;QACpD,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SACzB;IACH,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YACpC,OAAO,IAAI,CAAA;UACP,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBAClB,MAAM,aAAa,GAAG,WAAW,CAAC,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,CAAC;gBACpE,MAAM,kBAAkB,GAAG,aAAa,CAAC,OAAO,CAC9C,OAAO,EACP,aAAa,CACd,CAAC;gBAEF,OAAO,IAAI,CAAA,cAAc,aAAa;;qBAE3B,kBAAkB;;2BAEZ,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE;oBAC7C,KAAK,EAAE,MAAM;oBACb,IAAI,EAAE,SAAS;iBAChB,CAAC;8BACc,KAAK,CAAC,QAAQ,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;0BAC9C,KAAK,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;oBAC5D,KAAK,CAAC,QAAQ,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;oBACxC,CAAC,CAAC,CAAC;oBACH,CAAC,CAAC,CAAC,CAAC;uBACG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;yBAC3B,CAAC,KAAoB,EAAE,EAAE,CAClC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC;;gBAE/B,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;;kBAExB,CAAC;YACX,CAAC,CAAC;aACG,CAAC;QACV,CAAC,CAAC,EAAE,CAAC;IACP,CAAC;;AAvIsB,8BAAO,GAAG,iBAAiB,AAApB,CAAqB;AACrC,6BAAM,GAAG,MAAM,AAAT,CAAU;AAUtB;IADP,KAAK,CAAC,gBAAgB,CAAC;2DACU;AAI3B;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;qDACL;AAInB;IADN,QAAQ,EAAE;sDACU;AAId;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2DAOjB;AAIb;IAFT,KAAK,CAAC,QAAQ,CAAC;IACf,KAAK,CAAC,aAAa,CAAC;0DAGpB;AAvCkB,sBAAsB;IAhB1C,oBAAoB;IACpB,uBAAuB;IACvB,MAAM,CAAC;QACN,KAAK,EAAE;YACL,SAAS;YACT,MAAM;YACN,QAAQ;YACR,MAAM;SACP;QACD,IAAI,EAAE;YACJ,SAAS;YACT,MAAM;YACN,QAAQ;YACR,MAAM;SACP;KACF,CAAC;GACmB,sBAAsB,CA4I1C;eA5IoB,sBAAsB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { themes } from '../../../theming/theming-decorator.js';\nimport { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';\nimport { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';\nimport { watch } from '../../common/decorators/watch.js';\nimport { registerComponent } from '../../common/definitions/register.js';\nimport { Constructor } from '../../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../../common/mixins/event-emitter.js';\nimport { partNameMap } from '../../common/util.js';\nimport {\n  IgcCalendarBaseEventMap,\n  MONTHS_PER_ROW,\n} from '../common/calendar-base.js';\nimport { Calendar, TimeDeltaInterval } from '../common/calendar.model.js';\nimport { setDateSafe } from '../common/utils.js';\nimport { styles } from '../themes/year-month-view.base.css.js';\nimport { styles as bootstrap } from '../themes/light/bootstrap/year-month-view.bootstrap.css.js';\nimport { styles as fluent } from '../themes/light/fluent/year-month-view.fluent.css.js';\nimport { styles as material } from '../themes/light/material/year-month-view.material.css.js';\nimport { styles as indigo } from '../themes/light/indigo/year-month-view.indigo.css.js';\n\n/**\n * Instantiate a months view as a separate component in the calendar.\n *\n * @element igc-months-view\n *\n * @csspart months-row - The months row container.\n * @csspart month - The month container.\n * @csspart month-inner - The inner month container.\n */\n@blazorIndirectRender\n@blazorSuppressComponent\n@themes({\n  light: {\n    bootstrap,\n    fluent,\n    material,\n    indigo,\n  },\n  dark: {\n    bootstrap,\n    fluent,\n    material,\n    indigo,\n  },\n})\nexport default class IgcMonthsViewComponent extends EventEmitterMixin<\n  IgcCalendarBaseEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-months-view';\n  public static styles = styles;\n\n  public static register() {\n    registerComponent(this);\n  }\n\n  private calendarModel = new Calendar();\n  private monthFormatter: any;\n\n  @query('[tabindex=\"0\"]')\n  private activeMonth!: HTMLElement;\n\n  /** Тhe current value of the calendar. */\n  @property({ attribute: false })\n  public value = new Date();\n\n  /** Sets the locale used for formatting and displaying the dates. */\n  @property()\n  public locale = 'en';\n\n  /** The format of the month. Defaults to long. */\n  @property({ attribute: 'month-format' })\n  public monthFormat:\n    | 'numeric'\n    | '2-digit'\n    | 'long'\n    | 'short'\n    | 'narrow'\n    | undefined = 'long';\n\n  @watch('locale')\n  @watch('monthFormat')\n  protected formatChange() {\n    this.initMonthFormatter();\n  }\n\n  constructor() {\n    super();\n    this.setAttribute('role', 'grid');\n    this.initMonthFormatter();\n  }\n\n  /** Focuses the active date. */\n  public focusActiveDate() {\n    this.activeMonth.focus();\n  }\n\n  private initMonthFormatter() {\n    this.monthFormatter = new Intl.DateTimeFormat(this.locale, {\n      month: this.monthFormat,\n    });\n  }\n\n  private formattedMonth(value: Date) {\n    return this.monthFormatter.format(value);\n  }\n\n  private get months(): Date[][] {\n    let date = new Date(this.value.getFullYear(), 0, 1);\n    const result = [];\n\n    const rowsCount = 12 / MONTHS_PER_ROW;\n\n    for (let i = 0; i < rowsCount; i++) {\n      const row: Date[] = [];\n\n      for (let j = 0; j < MONTHS_PER_ROW; j++) {\n        row.push(date);\n        date = this.calendarModel.timedelta(date, TimeDeltaInterval.Month, 1);\n      }\n      result.push(row);\n    }\n\n    return result;\n  }\n\n  private resolveMonthPartName(date: Date) {\n    const today = new Date();\n    return {\n      month: true,\n      selected: date.getMonth() === this.value.getMonth(),\n      current:\n        date.getFullYear() === today.getFullYear() &&\n        date.getMonth() === today.getMonth(),\n    };\n  }\n\n  private selectMonth(month: Date) {\n    const value = new Date(month);\n    setDateSafe(value, this.value.getDate());\n    this.value = value;\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  private monthKeyDown(event: KeyboardEvent, month: Date) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.selectMonth(month);\n    }\n  }\n\n  protected override render() {\n    return html`${this.months.map((row) => {\n      return html`<div part=\"months-row\" role=\"row\">\n        ${row.map((month) => {\n          const monthPartName = partNameMap(this.resolveMonthPartName(month));\n          const monthInnerPartName = monthPartName.replace(\n            'month',\n            'month-inner'\n          );\n\n          return html`<span part=${monthPartName}>\n            <span\n              part=${monthInnerPartName}\n              role=\"gridcell\"\n              aria-label=${month.toLocaleString(this.locale, {\n                month: 'long',\n                year: 'numeric',\n              })}\n              aria-selected=${month.getMonth() === this.value.getMonth()}\n              tabindex=\"${month.getFullYear() === this.value.getFullYear() &&\n              month.getMonth() === this.value.getMonth()\n                ? 0\n                : -1}\"\n              @click=${() => this.selectMonth(month)}\n              @keydown=${(event: KeyboardEvent) =>\n                this.monthKeyDown(event, month)}\n            >\n              ${this.formattedMonth(month)}\n            </span>\n          </span>`;\n        })}\n      </div>`;\n    })}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-months-view': IgcMonthsViewComponent;\n  }\n}\n"]}

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

@@ -31,56 +31,7 @@ export const styles = css `:host {
 [hidden] {
   display: none !important;
 }
-
 :host(igc-calendar) {
-  --content-background: var(--ig-calendar-content-background, hsla(var(--ig-surface-500), var(--ig-surface-a)));
-  --content-text-color: var(--ig-calendar-content-text-color, var(--ig-surface-500-contrast));
-  --border-color: var(--ig-calendar-border-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
-  --header-background: var(--ig-calendar-header-background, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
-  --header-text-color: var(--ig-calendar-header-text-color, var(--ig-secondary-500-contrast));
-  --picker-background-color: var(--ig-calendar-picker-background-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
-  --picker-arrow-color: var(--ig-calendar-picker-arrow-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
-  --picker-arrow-hover-color: var(--ig-calendar-picker-arrow-hover-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
-  --picker-text-color: var(--ig-calendar-picker-text-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
-  --picker-text-hover-color: var(--ig-calendar-picker-text-hover-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
-  --inactive-text-color: var(--ig-calendar-inactive-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
-  --label-color: var(--ig-calendar-label-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
-  --weekend-text-color: var(--ig-calendar-weekend-text-color, var(--ig-surface-500-contrast));
-  --year-current-text-color: var(--ig-calendar-year-current-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
-  --month-current-text-color: var(--ig-calendar-month-current-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
-  --month-hover-current-text-color: var(--ig-calendar-month-hover-current-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
-  --year-hover-text-color: var(--ig-calendar-year-hover-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
-  --month-hover-background: var(--ig-calendar-month-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
-  --month-hover-text-color: var(--ig-calendar-month-hover-text-color, var(--ig-gray-200-contrast));
-  --date-selected-background: var(--ig-calendar-date-selected-background, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
-  --date-selected-hover-background: var(--ig-calendar-date-selected-hover-background, hsla(var(--ig-gray-100), 0.18));
-  --date-selected-focus-background: var(--ig-calendar-date-selected-focus-background, hsla(var(--ig-gray-100), 0.18));
-  --date-selected-current-background: var(--ig-calendar-date-selected-current-background, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
-  --date-selected-current-hover-background: var(--ig-calendar-date-selected-current-hover-background, hsla(var(--ig-gray-100), 0.18));
-  --date-selected-current-focus-background: var(--ig-calendar-date-selected-current-focus-background, hsla(var(--ig-gray-100), 0.18));
-  --date-selected-text-color: var(--ig-calendar-date-selected-text-color, var(--ig-secondary-500-contrast));
-  --date-selected-hover-foreground: var(--ig-calendar-date-selected-hover-foreground, var(--ig-gray-100-contrast));
-  --date-selected-focus-foreground: var(--ig-calendar-date-selected-focus-foreground, var(--ig-gray-100-contrast));
-  --date-current-text-color: var(--ig-calendar-date-current-text-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
-  --date-current-hover-foreground: var(--ig-calendar-date-current-hover-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
-  --date-current-focus-foreground: var(--ig-calendar-date-current-focus-foreground, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
-  --date-selected-current-foreground: var(--ig-calendar-date-selected-current-foreground, var(--ig-secondary-500-contrast));
-  --date-selected-current-hover-foreground: var(--ig-calendar-date-selected-current-hover-foreground, var(--ig-secondary-500-contrast));
-  --date-selected-current-focus-foreground: var(--ig-calendar-date-selected-current-focus-foreground, var(--ig-gray-100-contrast));
-  --date-current-bg-color: var(--ig-calendar-date-current-bg-color, transparent);
-  --date-current-hover-background: var(--ig-calendar-date-current-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
-  --date-current-focus-background: var(--ig-calendar-date-current-focus-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
-  --date-hover-background: var(--ig-calendar-date-hover-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
-  --date-focus-background: var(--ig-calendar-date-focus-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
-  --date-special-background: var(--ig-calendar-date-special-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
-  --date-special-text-color: var(--ig-calendar-date-special-text-color, hsla(var(--ig-gray-900), var(--ig-gray-a)));
-  --date-disabled-text-color: var(--ig-calendar-date-disabled-text-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
-  --date-disabled-background: var(--ig-calendar-date-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
-  --week-number-color: var(--ig-calendar-week-number-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
-  --week-number-background: var(--ig-calendar-week-number-background, hsla(var(--ig-gray-200), var(--ig-gray-a)));
-  --border-radius: var(--ig-calendar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
-  --date-border-radius: var(--ig-calendar-date-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.25rem), 1.25rem));
-  --month-border-radius: var(--ig-calendar-month-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1.25rem), 1.25rem));
   --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));
   display: -webkit-box;
   display: -ms-flexbox;
@@ -90,9 +41,6 @@ export const styles = css `:host {
       -ms-flex-direction: column;
           flex-direction: column;
   font-family: var(--ig-font-family);
-  background: hsla(var(--ig-surface-500), var(--ig-surface-a));
-  color: var(--ig-surface-500-contrast);
-  border-radius: var(--border-radius);
 }
 :host(igc-calendar) > * {
   font-family: var(--ig-font-family);
@@ -113,34 +61,17 @@ export const styles = css `:host {
   min-width: var(--size);
   height: var(--size);
 }
-:host(igc-calendar) igc-days-view::part(date-inner) {
-  border-radius: var(--date-border-radius);
-}
 :host(igc-calendar) igc-months-view {
   grid-template-rows: repeat(4, minmax(var(--size), 1fr));
 }
 :host(igc-calendar) igc-months-view::part(month-inner) {
   height: var(--size);
-  border-radius: var(--month-border-radius);
 }
 :host(igc-calendar) igc-years-view {
   grid-template-rows: repeat(5, minmax(var(--size), 1fr));
 }
 :host(igc-calendar) igc-years-view::part(year-inner) {
   height: var(--size);
-  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] {
@@ -172,9 +103,7 @@ export const styles = css `:host {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  background: transparent;
   border: none;
-  color: hsla(var(--ig-gray-800), var(--ig-gray-a));
   font-size: 1rem;
   padding: 0;
   -webkit-transition: color 150ms ease-in-out;
@@ -185,7 +114,6 @@ export const styles = css `:host {
 [part=years-navigation]:focus,
 [part~=navigation-button]:hover,
 [part~=navigation-button]:focus {
-  color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
   cursor: pointer;
 }
 [part=months-navigation]:focus,
@@ -210,6 +138,19 @@ export const styles = css `:host {
   gap: 1.5rem;
 }
 
+:host-context([dir=rtl]) [part~=navigation-button],
+:host([dir=rtl]) [part~=navigation-button] {
+  -webkit-transform: rotate(180deg);
+      -ms-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+:host-context([dir=rtl]) [part~=navigation-button][part~=vertical],
+:host([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;
@@ -253,8 +194,6 @@ export const styles = css `:host {
       -ms-flex-pack: justify;
           justify-content: space-between;
   padding: 1rem;
-  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
-  color: var(--ig-secondary-600-contrast);
 }
 
 [part=content] {

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyPvB,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(igc-calendar) {\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}\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-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}\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}\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  border: none;\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  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-context([dir=rtl]) [part~=navigation-button],\n:host([dir=rtl]) [part~=navigation-button] {\n  -webkit-transform: rotate(180deg);\n      -ms-transform: rotate(180deg);\n          transform: rotate(180deg);\n}\n:host-context([dir=rtl]) [part~=navigation-button][part~=vertical],\n:host([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}\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/days-view.base.css.js

@@ -36,32 +36,12 @@ export const styles = css `:host([part=days-view]) {
           user-select: none;
   z-index: 2;
 }
-[part~=date-inner]:hover, [part~=date-inner]:focus {
-  background: hsla(var(--ig-secondary-100), var(--ig-secondary-a));
-  color: var(--ig-secondary-100-contrast);
-  border-color: hsla(var(--ig-secondary-100), var(--ig-secondary-a));
-}
-
-[part~=date-inner][part~=current][part~=selected] {
-  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));
-          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));
-}
-
-[part~=current][part~=date-inner] {
-  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));
-          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));
-}
-[part~=current][part~=date-inner]:hover, [part~=current][part~=date-inner]:focus {
-  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a));
-          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a));
-}
 
 [part~=date],
 [part~=week-number],
 [part~=label] {
   font-size: var(--ig-subtitle-1-font-size);
   width: 100%;
-  color: hsla(var(--ig-gray-800), var(--ig-gray-a));
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -79,8 +59,6 @@ export const styles = css `:host([part=days-view]) {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  border-top: 0.0625rem solid transparent;
-  border-bottom: 0.0625rem solid transparent;
 }
 
 [part=label-inner] {
@@ -101,49 +79,18 @@ export const styles = css `:host([part=days-view]) {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  border: 0.0625rem solid transparent;
 }
 [part~=date-inner]:focus,
 [part~=week-number-inner]:focus {
   outline: none;
 }
 
-[part~=date][part~=range] {
-  background: hsla(var(--ig-secondary-50), var(--ig-secondary-a));
-}
-
-[part~=date][part~=range][part~=preview] {
-  background: transparent;
-  border-top: 0.0625rem dashed hsla(var(--ig-gray-300), var(--ig-gray-a));
-  border-bottom: 0.0625rem dashed hsla(var(--ig-gray-300), var(--ig-gray-a));
-}
-
-[part~=date][part~=range][part~=preview][part~=first],
-[part~=date][part~=range][part~=preview][part~=last] {
-  background: transparent;
-  border-top-color: transparent;
-  border-bottom-color: transparent;
-}
-[part~=date][part~=range][part~=preview][part~=first]::after,
-[part~=date][part~=range][part~=preview][part~=last]::after {
-  border-top: 0.0625rem dashed hsla(var(--ig-gray-300), var(--ig-gray-a));
-  border-bottom: 0.0625rem dashed hsla(var(--ig-gray-300), var(--ig-gray-a));
-  background: transparent;
-}
-
-[part~=date][part~=range][part~=first],
-[part~=date][part~=range][part~=last] {
-  background: transparent;
-}
 [part~=date][part~=range][part~=first]::after,
 [part~=date][part~=range][part~=last]::after {
   content: "";
   position: absolute;
   height: 100%;
   width: calc(50% + 0.0625rem);
-  background: hsla(var(--ig-secondary-50), var(--ig-secondary-a));
-  border-top: 0.0625rem solid hsla(var(--ig-secondary-50), var(--ig-secondary-a));
-  border-bottom: 0.0625rem solid hsla(var(--ig-secondary-50), var(--ig-secondary-a));
   z-index: 1;
 }
 
@@ -165,95 +112,26 @@ export const styles = css `:host([part=days-view]) {
   color: hsla(var(--ig-gray-500), var(--ig-gray-a));
 }
 
-[part~=date-inner][part~=weekend]:hover, [part~=date-inner][part~=weekend]:focus,
-[part~=date-inner][part~=inactive]:hover,
-[part~=date-inner][part~=inactive]:focus {
-  color: var(--ig-secondary-100-contrast);
-}
-
-[part~=date-inner][part~=selected][part~=range][part~=first],
-[part~=date-inner][part~=selected][part~=range][part~=last],
-[part~=date-inner][part~=selected][part~=range][part~=weekend][part~=first],
-[part~=date-inner][part~=selected][part~=range][part~=weekend][part~=last],
-[part~=date-inner][part~=selected][part~=range][part~=inactive][part~=first],
-[part~=date-inner][part~=selected][part~=range][part~=inactive][part~=last] {
-  color: var(--ig-secondary-700-contrast);
-}
-
-[part~=date-inner][part~=selected][part~=range][part~=weekend],
-[part~=date-inner][part~=selected][part~=range][part~=inactive],
-[part~=date-inner][part~=selected][part~=range] {
-  color: var(--ig-secondary-50-contrast);
-}
-[part~=date-inner][part~=selected][part~=range][part~=weekend]:hover, [part~=date-inner][part~=selected][part~=range][part~=weekend]:focus,
-[part~=date-inner][part~=selected][part~=range][part~=inactive]:hover,
-[part~=date-inner][part~=selected][part~=range][part~=inactive]:focus,
-[part~=date-inner][part~=selected][part~=range]:hover,
-[part~=date-inner][part~=selected][part~=range]:focus {
-  color: var(--ig-secondary-100-contrast);
-  background: hsla(var(--ig-secondary-100), var(--ig-secondary-a));
-  border-color: hsla(var(--ig-secondary-100), var(--ig-secondary-a));
-}
-
-[part~=date-inner][part~=selected][part~=range][part~=first],
-[part~=date-inner][part~=selected][part~=range][part~=last],
-[part~=date-inner][part~=selected]:not([part~=range]) {
-  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
-  border-color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
-}
-[part~=date-inner][part~=selected][part~=range][part~=first]:hover, [part~=date-inner][part~=selected][part~=range][part~=first]:focus,
-[part~=date-inner][part~=selected][part~=range][part~=last]:hover,
-[part~=date-inner][part~=selected][part~=range][part~=last]:focus,
-[part~=date-inner][part~=selected]:not([part~=range]):hover,
-[part~=date-inner][part~=selected]:not([part~=range]):focus {
-  background: hsla(var(--ig-secondary-700), var(--ig-secondary-a));
-  border-color: hsla(var(--ig-secondary-700), var(--ig-secondary-a));
-  color: var(--ig-secondary-700-contrast);
-}
-
-[part~=date-inner][part~=selected][part~=weekend]:not([part~=range]),
-[part~=date-inner][part~=selected][part~=inactive]:not([part~=range]),
-[part~=date-inner][part~=selected]:not([part~=range]) {
-  color: var(--ig-secondary-700-contrast);
-}
-
 [part~=week-number] {
   -webkit-box-ordinal-group: 1;
       -ms-flex-order: 0;
           order: 0;
-  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
   cursor: default;
 }
 
-[part="week-number-inner first"] {
-  border-top-left-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem);
-  border-top-right-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem);
-}
 [part="week-number-inner first"]::after {
   display: none;
 }
 
-[part="week-number-inner last"] {
-  border-bottom-left-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem);
-  border-bottom-right-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem);
-}
-
 [part~=week-number-inner] {
   position: relative;
-  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
-  border-inline-end-color: hsla(var(--ig-gray-200), var(--ig-gray-a));
 }
 [part~=week-number-inner]::after {
   content: "";
   position: absolute;
   bottom: 100%;
-  height: calc(0.375rem + (0.0625rem * 2 + 2px));
+  height: calc(0.375rem + 0.0625rem * 2 + 2px);
   width: 100%;
-  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
-  -webkit-border-start: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));
-          border-inline-start: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));
-  -webkit-border-end: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));
-          border-inline-end: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));
 }
 
 [part~=date-inner][part~=disabled] {
@@ -265,20 +143,6 @@ export const styles = css `:host([part=days-view]) {
   cursor: not-allowed;
 }
 
-[part~=date-inner][part~=special][part~=range],
-[part~=date-inner][part~=special] {
-  background: hsla(var(--ig-gray-100), var(--ig-gray-a));
-  border-color: hsla(var(--ig-gray-100), var(--ig-gray-a));
-  color: hsla(var(--ig-gray-900), var(--ig-gray-a));
-  font-weight: 900;
-}
-[part~=date-inner][part~=special][part~=range]:hover, [part~=date-inner][part~=special][part~=range]:focus,
-[part~=date-inner][part~=special]:hover,
-[part~=date-inner][part~=special]:focus {
-  background: hsla(var(--ig-secondary-100), var(--ig-secondary-a));
-  border-color: hsla(var(--ig-secondary-100), var(--ig-secondary-a));
-}
-
 [part~=hidden] {
   visibility: hidden;
 }`;

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

@@ -1 +1 @@
-{"version":3,"file":"days-view.base.css.js","sourceRoot":"","sources":["../../../../src/components/calendar/themes/days-view.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0RvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host([part=days-view]) {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  min-width: 18.125rem;\n  outline: none;\n  padding: 0 0.75rem 1rem 0.75rem;\n  overflow: hidden;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  gap: 0.375rem;\n}\n\n[part~=days-row] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n}\n\n[part~=date-inner] {\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  z-index: 2;\n}\n[part~=date-inner]:hover, [part~=date-inner]:focus {\n  background: hsla(var(--ig-secondary-100), var(--ig-secondary-a));\n  color: var(--ig-secondary-100-contrast);\n  border-color: hsla(var(--ig-secondary-100), var(--ig-secondary-a));\n}\n\n[part~=date-inner][part~=current][part~=selected] {\n  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a)), 0 0 0 0.0625rem hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n\n[part~=current][part~=date-inner] {\n  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));\n          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-gray-600), var(--ig-gray-a));\n}\n[part~=current][part~=date-inner]:hover, [part~=current][part~=date-inner]:focus {\n  -webkit-box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a));\n          box-shadow: inset 0 0 0 0.0625rem hsla(var(--ig-surface-500), var(--ig-surface-a));\n}\n\n[part~=date],\n[part~=week-number],\n[part~=label] {\n  font-size: var(--ig-subtitle-1-font-size);\n  width: 100%;\n  color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n  position: relative;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  outline: none;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  border-top: 0.0625rem solid transparent;\n  border-bottom: 0.0625rem solid transparent;\n}\n\n[part=label-inner] {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  min-width: 4ch;\n  text-align: center;\n}\n\n[part~=date-inner],\n[part~=week-number-inner] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  border: 0.0625rem solid transparent;\n}\n[part~=date-inner]:focus,\n[part~=week-number-inner]:focus {\n  outline: none;\n}\n\n[part~=date][part~=range] {\n  background: hsla(var(--ig-secondary-50), var(--ig-secondary-a));\n}\n\n[part~=date][part~=range][part~=preview] {\n  background: transparent;\n  border-top: 0.0625rem dashed hsla(var(--ig-gray-300), var(--ig-gray-a));\n  border-bottom: 0.0625rem dashed hsla(var(--ig-gray-300), var(--ig-gray-a));\n}\n\n[part~=date][part~=range][part~=preview][part~=first],\n[part~=date][part~=range][part~=preview][part~=last] {\n  background: transparent;\n  border-top-color: transparent;\n  border-bottom-color: transparent;\n}\n[part~=date][part~=range][part~=preview][part~=first]::after,\n[part~=date][part~=range][part~=preview][part~=last]::after {\n  border-top: 0.0625rem dashed hsla(var(--ig-gray-300), var(--ig-gray-a));\n  border-bottom: 0.0625rem dashed hsla(var(--ig-gray-300), var(--ig-gray-a));\n  background: transparent;\n}\n\n[part~=date][part~=range][part~=first],\n[part~=date][part~=range][part~=last] {\n  background: transparent;\n}\n[part~=date][part~=range][part~=first]::after,\n[part~=date][part~=range][part~=last]::after {\n  content: \"\";\n  position: absolute;\n  height: 100%;\n  width: calc(50% + 0.0625rem);\n  background: hsla(var(--ig-secondary-50), var(--ig-secondary-a));\n  border-top: 0.0625rem solid hsla(var(--ig-secondary-50), var(--ig-secondary-a));\n  border-bottom: 0.0625rem solid hsla(var(--ig-secondary-50), var(--ig-secondary-a));\n  z-index: 1;\n}\n\n[part~=date][part~=range][part~=first]::after {\n  inset-inline-start: 50%;\n}\n\n[part~=date][part~=range][part~=last]::after {\n  inset-inline-end: calc(50% - 0.0625rem);\n}\n\n[part~=date][part~=range] + [part~=date][part~=range][part~=last]::after {\n  inset-inline-end: 50%;\n}\n\n[part~=date-inner][part~=inactive],\n[part~=date-inner][part~=label],\n[part~=date-inner][part~=disabled] {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n[part~=date-inner][part~=weekend]:hover, [part~=date-inner][part~=weekend]:focus,\n[part~=date-inner][part~=inactive]:hover,\n[part~=date-inner][part~=inactive]:focus {\n  color: var(--ig-secondary-100-contrast);\n}\n\n[part~=date-inner][part~=selected][part~=range][part~=first],\n[part~=date-inner][part~=selected][part~=range][part~=last],\n[part~=date-inner][part~=selected][part~=range][part~=weekend][part~=first],\n[part~=date-inner][part~=selected][part~=range][part~=weekend][part~=last],\n[part~=date-inner][part~=selected][part~=range][part~=inactive][part~=first],\n[part~=date-inner][part~=selected][part~=range][part~=inactive][part~=last] {\n  color: var(--ig-secondary-700-contrast);\n}\n\n[part~=date-inner][part~=selected][part~=range][part~=weekend],\n[part~=date-inner][part~=selected][part~=range][part~=inactive],\n[part~=date-inner][part~=selected][part~=range] {\n  color: var(--ig-secondary-50-contrast);\n}\n[part~=date-inner][part~=selected][part~=range][part~=weekend]:hover, [part~=date-inner][part~=selected][part~=range][part~=weekend]:focus,\n[part~=date-inner][part~=selected][part~=range][part~=inactive]:hover,\n[part~=date-inner][part~=selected][part~=range][part~=inactive]:focus,\n[part~=date-inner][part~=selected][part~=range]:hover,\n[part~=date-inner][part~=selected][part~=range]:focus {\n  color: var(--ig-secondary-100-contrast);\n  background: hsla(var(--ig-secondary-100), var(--ig-secondary-a));\n  border-color: hsla(var(--ig-secondary-100), var(--ig-secondary-a));\n}\n\n[part~=date-inner][part~=selected][part~=range][part~=first],\n[part~=date-inner][part~=selected][part~=range][part~=last],\n[part~=date-inner][part~=selected]:not([part~=range]) {\n  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  border-color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n[part~=date-inner][part~=selected][part~=range][part~=first]:hover, [part~=date-inner][part~=selected][part~=range][part~=first]:focus,\n[part~=date-inner][part~=selected][part~=range][part~=last]:hover,\n[part~=date-inner][part~=selected][part~=range][part~=last]:focus,\n[part~=date-inner][part~=selected]:not([part~=range]):hover,\n[part~=date-inner][part~=selected]:not([part~=range]):focus {\n  background: hsla(var(--ig-secondary-700), var(--ig-secondary-a));\n  border-color: hsla(var(--ig-secondary-700), var(--ig-secondary-a));\n  color: var(--ig-secondary-700-contrast);\n}\n\n[part~=date-inner][part~=selected][part~=weekend]:not([part~=range]),\n[part~=date-inner][part~=selected][part~=inactive]:not([part~=range]),\n[part~=date-inner][part~=selected]:not([part~=range]) {\n  color: var(--ig-secondary-700-contrast);\n}\n\n[part~=week-number] {\n  -webkit-box-ordinal-group: 1;\n      -ms-flex-order: 0;\n          order: 0;\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n  cursor: default;\n}\n\n[part=\"week-number-inner first\"] {\n  border-top-left-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem);\n  border-top-right-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem);\n}\n[part=\"week-number-inner first\"]::after {\n  display: none;\n}\n\n[part=\"week-number-inner last\"] {\n  border-bottom-left-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem);\n  border-bottom-right-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.25rem), 0.25rem);\n}\n\n[part~=week-number-inner] {\n  position: relative;\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n  border-inline-end-color: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n[part~=week-number-inner]::after {\n  content: \"\";\n  position: absolute;\n  bottom: 100%;\n  height: calc(0.375rem + (0.0625rem * 2 + 2px));\n  width: 100%;\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n  -webkit-border-start: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));\n          border-inline-start: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));\n  -webkit-border-end: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));\n          border-inline-end: 0.0625rem solid hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n\n[part~=date-inner][part~=disabled] {\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: not-allowed;\n}\n\n[part~=date-inner][part~=special][part~=range],\n[part~=date-inner][part~=special] {\n  background: hsla(var(--ig-gray-100), var(--ig-gray-a));\n  border-color: hsla(var(--ig-gray-100), var(--ig-gray-a));\n  color: hsla(var(--ig-gray-900), var(--ig-gray-a));\n  font-weight: 900;\n}\n[part~=date-inner][part~=special][part~=range]:hover, [part~=date-inner][part~=special][part~=range]:focus,\n[part~=date-inner][part~=special]:hover,\n[part~=date-inner][part~=special]:focus {\n  background: hsla(var(--ig-secondary-100), var(--ig-secondary-a));\n  border-color: hsla(var(--ig-secondary-100), var(--ig-secondary-a));\n}\n\n[part~=hidden] {\n  visibility: hidden;\n}`;\n"]}
+{"version":3,"file":"days-view.base.css.js","sourceRoot":"","sources":["../../../../src/components/calendar/themes/days-view.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkJvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host([part=days-view]) {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  min-width: 18.125rem;\n  outline: none;\n  padding: 0 0.75rem 1rem 0.75rem;\n  overflow: hidden;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  gap: 0.375rem;\n}\n\n[part~=days-row] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n}\n\n[part~=date-inner] {\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  z-index: 2;\n}\n\n[part~=date],\n[part~=week-number],\n[part~=label] {\n  font-size: var(--ig-subtitle-1-font-size);\n  width: 100%;\n  position: relative;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  outline: none;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n\n[part=label-inner] {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  min-width: 4ch;\n  text-align: center;\n}\n\n[part~=date-inner],\n[part~=week-number-inner] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: center;\n      -ms-flex-pack: center;\n          justify-content: center;\n}\n[part~=date-inner]:focus,\n[part~=week-number-inner]:focus {\n  outline: none;\n}\n\n[part~=date][part~=range][part~=first]::after,\n[part~=date][part~=range][part~=last]::after {\n  content: \"\";\n  position: absolute;\n  height: 100%;\n  width: calc(50% + 0.0625rem);\n  z-index: 1;\n}\n\n[part~=date][part~=range][part~=first]::after {\n  inset-inline-start: 50%;\n}\n\n[part~=date][part~=range][part~=last]::after {\n  inset-inline-end: calc(50% - 0.0625rem);\n}\n\n[part~=date][part~=range] + [part~=date][part~=range][part~=last]::after {\n  inset-inline-end: 50%;\n}\n\n[part~=date-inner][part~=inactive],\n[part~=date-inner][part~=label],\n[part~=date-inner][part~=disabled] {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n}\n\n[part~=week-number] {\n  -webkit-box-ordinal-group: 1;\n      -ms-flex-order: 0;\n          order: 0;\n  cursor: default;\n}\n\n[part=\"week-number-inner first\"]::after {\n  display: none;\n}\n\n[part~=week-number-inner] {\n  position: relative;\n}\n[part~=week-number-inner]::after {\n  content: \"\";\n  position: absolute;\n  bottom: 100%;\n  height: calc(0.375rem + 0.0625rem * 2 + 2px);\n  width: 100%;\n}\n\n[part~=date-inner][part~=disabled] {\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  cursor: not-allowed;\n}\n\n[part~=hidden] {\n  visibility: hidden;\n}`;\n"]}

package/components/calendar/themes/{bootstrap → light/bootstrap}/calendar.bootstrap.css.js

@@ -48,21 +48,18 @@ export const styles = css `:host(igc-calendar) {
   --border-radius: var(--ig-calendar-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
   --date-border-radius: var(--ig-calendar-date-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
   --month-border-radius: var(--ig-calendar-month-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));
-  border: 0.0625rem solid hsla(var(--ig-gray-300), var(--ig-gray-a));
+  background: hsla(var(--ig-surface-500), var(--ig-surface-a));
+  color: var(--ig-surface-500-contrast);
   border-radius: var(--border-radius);
+  border: 0.0625rem solid hsla(var(--ig-gray-300), var(--ig-gray-a));
 }
-
-: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) {
+  border-radius: var(--month-border-radius);
+}
+:host(igc-calendar) igc-years-view::part(year-inner) {
   border-radius: var(--month-border-radius);
 }
 
@@ -72,12 +69,24 @@ export const styles = css `:host(igc-calendar) {
 }
 
 [part~=navigation-button] {
+  background: transparent;
   color: hsla(var(--ig-primary-500), var(--ig-primary-a));
 }
 [part~=navigation-button]:hover, [part~=navigation-button]:focus {
   color: hsla(var(--ig-primary-600), var(--ig-primary-a));
 }
 
+[part=months-navigation],
+[part=years-navigation] {
+  background: transparent;
+  color: hsla(var(--ig-gray-800), var(--ig-gray-a));
+}
+[part=months-navigation]:hover, [part=months-navigation]:focus,
+[part=years-navigation]:hover,
+[part=years-navigation]:focus {
+  color: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
+}
+
 [part~=navigation],
 [part~=header] {
   background: hsla(var(--ig-secondary-50), 0.2);
@@ -94,5 +103,10 @@ export const styles = css `:host(igc-calendar) {
   text-transform: var(--ig-subtitle-1-text-transform);
   margin-top: var(--ig-subtitle-1-margin-top);
   margin-bottom: var(--ig-subtitle-1-margin-bottom);
+}
+
+[part=header] {
+  background: hsla(var(--ig-secondary-50), 0.2);
+  color: var(--ig-gray-50-contrast);
 }`;
 //# sourceMappingURL=calendar.bootstrap.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.bootstrap.css.js","sourceRoot":"","sources":["../../../../../../src/components/calendar/themes/light/bootstrap/calendar.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6GvB,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  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  color: var(--ig-surface-500-contrast);\n  border-radius: var(--border-radius);\n  border: 0.0625rem solid hsla(var(--ig-gray-300), var(--ig-gray-a));\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  border-radius: var(--month-border-radius);\n}\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  background: transparent;\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=months-navigation],\n[part=years-navigation] {\n  background: transparent;\n  color: hsla(var(--ig-gray-800), var(--ig-gray-a));\n}\n[part=months-navigation]:hover, [part=months-navigation]:focus,\n[part=years-navigation]:hover,\n[part=years-navigation]:focus {\n  color: hsla(var(--ig-secondary-500), var(--ig-secondary-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\n[part=header] {\n  background: hsla(var(--ig-secondary-50), 0.2);\n  color: var(--ig-gray-50-contrast);\n}`;\n"]}