igniteui-webcomponents 4.5.0-beta.1 → 4.5.0

package/components/slider/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAoC1D,MAAqB,kBAAmB,SAAQ,mBAAmB,CACjE,iBAAiB,CACf,sBAAsB,CACvB,CACF;IAJD;;QAYS,UAAK,GAAG,CAAC,CAAC;IAqEnB,CAAC;IAlEW,YAAY;QACpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5C,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACrC,CAAC;IAED,IAAuB,WAAW;QAChC,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAEkB,cAAc;QAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,CAAC;IAEkB,aAAa;QAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClD,MAAM,gBAAgB,GAAG;YACvB,KAAK,EAAE,GAAG,QAAQ,GAAG,GAAG,GAAG;SAC5B,CAAC;QAEF,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IAEkB,WAAW,CAAC,SAAiB;QAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;QAE5B,IAAI,CAAC,KAAK,GAAI,IAAI,CAAC,KAAgB,GAAG,SAAS,CAAC;QAEhD,IAAI,QAAQ,KAAK,IAAI,CAAC,KAAK,EAAE;YAC3B,OAAO,KAAK,CAAC;SACd;QAED,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACd,CAAC;IAEkB,cAAc;QAC/B,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACrD,CAAC;IAEkB,eAAe;QAChC,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACtD,CAAC;IAMM,MAAM,CAAC,aAAa,GAAG,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC;IACtD,CAAC;IAMM,QAAQ,CAAC,aAAa,GAAG,CAAC;QAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC;IACtD,CAAC;IAEkB,YAAY;QAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QAClD,IAAI,SAAS,EAAE;YACb,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;SACpC;QACD,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,SAAU,CAAC,EAAE,CAAC;IAC3D,CAAC;;AA3EsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AAOvC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACV;AAGP;IADT,KAAK,CAAC,OAAO,CAAC;sDAId;eAlBkB,kBAAkB","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { watch } from '../common/decorators/watch.js';\nimport { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { FormAssociatedMixin } from '../common/mixins/form-associated.js';\nimport { IgcSliderBaseComponent } from './slider-base.js';\n\nexport interface IgcSliderEventMap {\n  /**\n   * Emitted when a value is changed via thumb drag or keyboard interaction.\n   */\n  igcInput: CustomEvent<number>;\n  /**\n   * Emitted when a value change is committed on a thumb drag end or keyboard interaction.\n   */\n  igcChange: CustomEvent<number>;\n}\n\n/**\n * A slider component used to select numeric value within a range.\n *\n * @element igc-slider\n *\n * @fires igcInput - Emitted when a value is changed via thumb drag or keyboard interaction.\n * @fires igcChange - Emitted when a value change is committed on a thumb drag end or keyboard interaction.\n *\n * @csspart base - The base wrapper of the slider.\n * @csspart ticks - The ticks container.\n * @csspart tick-group - The tick group container.\n * @csspart tick - The tick element.\n * @csspart tick-label - The tick label element.\n * @csspart tick-label-inner - The inner element of the tick label.\n * @csspart thumbs - The thumbs container.\n * @csspart thumb - The thumb element.\n * @csspart thumb-label - The thumb tooltip label container.\n * @csspart thumb-label-inner - The thumb tooltip label inner element.\n * @csspart track - The track container.\n * @csspart steps - The track steps element.\n * @csspart inactive - The inactive element of the track.\n * @csspart fill - The filled part of the track.\n */\nexport default class IgcSliderComponent extends FormAssociatedMixin(\n  EventEmitterMixin<IgcSliderEventMap, Constructor<IgcSliderBaseComponent>>(\n    IgcSliderBaseComponent\n  )\n) {\n  public static readonly tagName = 'igc-slider';\n\n  /**\n   * The current value of the component.\n   * @attr\n   */\n  @property({ type: Number })\n  public value = 0;\n\n  @watch('value')\n  protected valueChanged() {\n    this.value = this.validateValue(this.value);\n    this.setFormValue(`${this.value}`);\n  }\n\n  protected override get activeValue(): number {\n    return this.value;\n  }\n\n  protected override normalizeValue(): void {\n    this.value = this.validateValue(this.value);\n  }\n\n  protected override getTrackStyle() {\n    const position = this.valueToFraction(this.value);\n    const filledTrackStyle = {\n      width: `${position * 100}%`,\n    };\n\n    return filledTrackStyle;\n  }\n\n  protected override updateValue(increment: number) {\n    const oldValue = this.value;\n\n    this.value = (this.value as number) + increment;\n\n    if (oldValue === this.value) {\n      return false;\n    }\n\n    this.emitInputEvent();\n    return true;\n  }\n\n  protected override emitInputEvent() {\n    this.emitEvent('igcInput', { detail: this.value });\n  }\n\n  protected override emitChangeEvent() {\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  /**\n   * Increments the value of the slider by `stepIncrement * step`, where `stepIncrement` defaults to 1.\n   * @param stepIncrement Optional step increment. If no parameter is passed, it defaults to 1.\n   */\n  public stepUp(stepIncrement = 1) {\n    this.value = this.value + stepIncrement * this.step;\n  }\n\n  /**\n   * Decrements the value of the slider by `stepDecrement * step`, where `stepDecrement` defaults to 1.\n   * @param stepDecrement Optional step decrement. If no parameter is passed, it defaults to 1.\n   */\n  public stepDown(stepDecrement = 1) {\n    this.value = this.value - stepDecrement * this.step;\n  }\n\n  protected override renderThumbs() {\n    const ariaLabel = this.getAttribute('aria-label');\n    if (ariaLabel) {\n      this.removeAttribute('aria-label');\n    }\n    return html`${this.renderThumb(this.value, ariaLabel!)}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-slider': IgcSliderComponent;\n  }\n}\n"]}
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAC1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,uBAAuB,MAAM,mBAAmB,CAAC;AAoCxD,MAAqB,kBAAmB,SAAQ,mBAAmB,CACjE,iBAAiB,CACf,sBAAsB,CACvB,CACF;IAJD;;QAgBS,UAAK,GAAG,CAAC,CAAC;IAqEnB,CAAC;IA9EQ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,IAAI,EAAE,uBAAuB,CAAC,CAAC;IACnD,CAAC;IAUS,YAAY;QACpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5C,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACrC,CAAC;IAED,IAAuB,WAAW;QAChC,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAEkB,cAAc;QAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,CAAC;IAEkB,aAAa;QAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClD,MAAM,gBAAgB,GAAG;YACvB,KAAK,EAAE,GAAG,QAAQ,GAAG,GAAG,GAAG;SAC5B,CAAC;QAEF,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IAEkB,WAAW,CAAC,SAAiB;QAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;QAE5B,IAAI,CAAC,KAAK,GAAI,IAAI,CAAC,KAAgB,GAAG,SAAS,CAAC;QAEhD,IAAI,QAAQ,KAAK,IAAI,CAAC,KAAK,EAAE;YAC3B,OAAO,KAAK,CAAC;SACd;QAED,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACd,CAAC;IAEkB,cAAc;QAC/B,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACrD,CAAC;IAEkB,eAAe;QAChC,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACtD,CAAC;IAMM,MAAM,CAAC,aAAa,GAAG,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC;IACtD,CAAC;IAMM,QAAQ,CAAC,aAAa,GAAG,CAAC;QAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC;IACtD,CAAC;IAEkB,YAAY;QAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QAClD,IAAI,SAAS,EAAE;YACb,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;SACpC;QACD,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,SAAU,CAAC,EAAE,CAAC;IAC3D,CAAC;;AA/EsB,0BAAO,GAAG,YAAY,AAAf,CAAgB;AAWvC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACV;AAGP;IADT,KAAK,CAAC,OAAO,CAAC;sDAId;eAtBkB,kBAAkB","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.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 { FormAssociatedMixin } from '../common/mixins/form-associated.js';\nimport { IgcSliderBaseComponent } from './slider-base.js';\nimport IgcSliderLabelComponent from './slider-label.js';\n\nexport interface IgcSliderEventMap {\n  /**\n   * Emitted when a value is changed via thumb drag or keyboard interaction.\n   */\n  igcInput: CustomEvent<number>;\n  /**\n   * Emitted when a value change is committed on a thumb drag end or keyboard interaction.\n   */\n  igcChange: CustomEvent<number>;\n}\n\n/**\n * A slider component used to select numeric value within a range.\n *\n * @element igc-slider\n *\n * @fires igcInput - Emitted when a value is changed via thumb drag or keyboard interaction.\n * @fires igcChange - Emitted when a value change is committed on a thumb drag end or keyboard interaction.\n *\n * @csspart base - The base wrapper of the slider.\n * @csspart ticks - The ticks container.\n * @csspart tick-group - The tick group container.\n * @csspart tick - The tick element.\n * @csspart tick-label - The tick label element.\n * @csspart tick-label-inner - The inner element of the tick label.\n * @csspart thumbs - The thumbs container.\n * @csspart thumb - The thumb element.\n * @csspart thumb-label - The thumb tooltip label container.\n * @csspart thumb-label-inner - The thumb tooltip label inner element.\n * @csspart track - The track container.\n * @csspart steps - The track steps element.\n * @csspart inactive - The inactive element of the track.\n * @csspart fill - The filled part of the track.\n */\nexport default class IgcSliderComponent extends FormAssociatedMixin(\n  EventEmitterMixin<IgcSliderEventMap, Constructor<IgcSliderBaseComponent>>(\n    IgcSliderBaseComponent\n  )\n) {\n  public static readonly tagName = 'igc-slider';\n\n  public static register() {\n    registerComponent(this, IgcSliderLabelComponent);\n  }\n\n  /**\n   * The current value of the component.\n   * @attr\n   */\n  @property({ type: Number })\n  public value = 0;\n\n  @watch('value')\n  protected valueChanged() {\n    this.value = this.validateValue(this.value);\n    this.setFormValue(`${this.value}`);\n  }\n\n  protected override get activeValue(): number {\n    return this.value;\n  }\n\n  protected override normalizeValue(): void {\n    this.value = this.validateValue(this.value);\n  }\n\n  protected override getTrackStyle() {\n    const position = this.valueToFraction(this.value);\n    const filledTrackStyle = {\n      width: `${position * 100}%`,\n    };\n\n    return filledTrackStyle;\n  }\n\n  protected override updateValue(increment: number) {\n    const oldValue = this.value;\n\n    this.value = (this.value as number) + increment;\n\n    if (oldValue === this.value) {\n      return false;\n    }\n\n    this.emitInputEvent();\n    return true;\n  }\n\n  protected override emitInputEvent() {\n    this.emitEvent('igcInput', { detail: this.value });\n  }\n\n  protected override emitChangeEvent() {\n    this.emitEvent('igcChange', { detail: this.value });\n  }\n\n  /**\n   * Increments the value of the slider by `stepIncrement * step`, where `stepIncrement` defaults to 1.\n   * @param stepIncrement Optional step increment. If no parameter is passed, it defaults to 1.\n   */\n  public stepUp(stepIncrement = 1) {\n    this.value = this.value + stepIncrement * this.step;\n  }\n\n  /**\n   * Decrements the value of the slider by `stepDecrement * step`, where `stepDecrement` defaults to 1.\n   * @param stepDecrement Optional step decrement. If no parameter is passed, it defaults to 1.\n   */\n  public stepDown(stepDecrement = 1) {\n    this.value = this.value - stepDecrement * this.step;\n  }\n\n  protected override renderThumbs() {\n    const ariaLabel = this.getAttribute('aria-label');\n    if (ariaLabel) {\n      this.removeAttribute('aria-label');\n    }\n    return html`${this.renderThumb(this.value, ariaLabel!)}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-slider': IgcSliderComponent;\n  }\n}\n"]}

package/components/slider/themes/dark/slider.material.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/components/slider/themes/dark/slider.material.css.js

@@ -0,0 +1,3 @@
+import { css } from 'lit';
+export const styles = css ``;
+//# sourceMappingURL=slider.material.css.js.map

package/components/slider/themes/dark/slider.material.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.material.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/dark/slider.material.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,EAAE,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css``;\n"]}

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

@@ -65,7 +65,6 @@ slot {
 
 [part=fill] {
   position: absolute;
-  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
   border-radius: inherit;
 }
 
@@ -73,7 +72,6 @@ slot {
   position: absolute;
   width: 100%;
   top: 0.0625rem;
-  background: hsla(var(--ig-secondary-500), 0.24);
   -webkit-transition: background 0.2s ease-out;
   transition: background 0.2s ease-out;
   border-radius: inherit;
@@ -90,7 +88,6 @@ slot {
   -webkit-transform: translateY(-50%);
       -ms-transform: translateY(-50%);
           transform: translateY(-50%);
-  color: white;
 }
 [part=steps] svg {
   -webkit-clip-path: inset(0 0.1875rem 0 0.1875rem);
@@ -138,7 +135,6 @@ slot {
 }
 
 [part=tick] {
-  background: hsla(var(--ig-gray-500), var(--ig-gray-a));
   height: 0.5rem;
   width: 0.125rem;
 }
@@ -148,7 +144,6 @@ slot {
 }
 
 [part=tick-label] {
-  color: hsla(var(--ig-gray-500), var(--ig-gray-a));
   position: absolute;
   top: 1.5rem;
   line-height: 0.7;
@@ -200,7 +195,6 @@ slot {
   transition: border-radius 0.1s ease-out, -webkit-transform 0.1s ease-out;
   transition: transform 0.1s ease-out, border-radius 0.1s ease-out;
   transition: transform 0.1s ease-out, border-radius 0.1s ease-out, -webkit-transform 0.1s ease-out;
-  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));
 }
 
 [part=thumb-label] {
@@ -238,8 +232,6 @@ slot {
   -webkit-margin-start: -50%;
           margin-inline-start: -50%;
   padding: 0 0.125rem;
-  color: var(--ig-gray-700-contrast);
-  background: hsla(var(--ig-gray-700), var(--ig-gray-a));
 }
 [part=thumb-label-inner]::after {
   content: "";
@@ -247,7 +239,6 @@ slot {
   top: 85%;
   border-left: 0.625rem solid transparent;
   border-right: 0.625rem solid transparent;
-  border-top: 0.625rem solid hsla(var(--ig-gray-700), var(--ig-gray-a));
 }
 
 :host(:not([tick-label-rotation="0"])) [part=tick-label-inner] {
@@ -273,37 +264,5 @@ slot {
           user-select: none;
   pointer-events: none;
   cursor: initial;
-}
-:host([disabled]) [part=inactive],
-:host(:disabled) [part=inactive] {
-  background: hsla(var(--ig-gray-200), var(--ig-gray-a));
-}
-:host([disabled]) [part=fill],
-:host([disabled]) [part=tick],
-:host(:disabled) [part=fill],
-:host(:disabled) [part=tick] {
-  background: hsla(var(--ig-gray-400), var(--ig-gray-a));
-}
-:host([disabled]) [part=tick-label],
-:host(:disabled) [part=tick-label] {
-  color: hsla(var(--ig-gray-400), var(--ig-gray-a));
-}
-:host([disabled]) [part~=thumb],
-:host(:disabled) [part~=thumb] {
-  background: hsla(var(--ig-gray-400), var(--ig-gray-a));
-}
-:host([disabled]) [part~=thumb]:focus::after,
-:host(:disabled) [part~=thumb]:focus::after {
-  -webkit-transform: scale(0);
-      -ms-transform: scale(0);
-          transform: scale(0);
-}
-:host([disabled]):hover [part=inactive],
-:host(:disabled):hover [part=inactive] {
-  background: hsla(var(--ig-gray-400), var(--ig-gray-a));
-}
-:host([disabled]):hover [part~=thumb],
-:host(:disabled):hover [part~=thumb] {
-  border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));
 }`;
 //# sourceMappingURL=slider.base.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider.base.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/light/slider.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkTvB,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: block;\n}\n\nslot {\n  display: none;\n}\n\n[part~=base] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  height: 3rem;\n  -webkit-transition: all 0.2s ease-out;\n  transition: all 0.2s ease-out;\n  font-family: var(--ig-font-family);\n}\n\n[part=track] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 2rem), 2rem);\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n\n[part=fill] {\n  position: absolute;\n  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n  border-radius: inherit;\n}\n\n[part=inactive] {\n  position: absolute;\n  width: 100%;\n  top: 0.0625rem;\n  background: hsla(var(--ig-secondary-500), 0.24);\n  -webkit-transition: background 0.2s ease-out;\n  transition: background 0.2s ease-out;\n  border-radius: inherit;\n}\n\n[part=steps] {\n  position: absolute;\n  width: 100%;\n  height: 0.25rem;\n  opacity: 0.85;\n  -webkit-transition: opacity 0.2s ease-out;\n  transition: opacity 0.2s ease-out;\n  top: 50%;\n  -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n          transform: translateY(-50%);\n  color: white;\n}\n[part=steps] svg {\n  -webkit-clip-path: inset(0 0.1875rem 0 0.1875rem);\n          clip-path: inset(0 0.1875rem 0 0.1875rem);\n}\n[part=steps] line {\n  -webkit-transform: translateY(25%);\n      -ms-transform: translateY(25%);\n          transform: translateY(25%);\n  stroke: currentcolor;\n  stroke-width: 0.1875rem;\n  stroke-linecap: round;\n}\n\n[part=ticks] {\n  width: 100%;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  bottom: 0;\n  -webkit-box-pack: justify;\n      -ms-flex-pack: justify;\n          justify-content: space-between;\n}\n[part=ticks]:first-child {\n  bottom: auto;\n  top: 0;\n  -webkit-box-align: end;\n      -ms-flex-align: end;\n          align-items: flex-end;\n}\n[part=ticks]:first-child [part=tick-label] {\n  top: auto;\n  bottom: 1.5rem;\n}\n\n[part=tick-group]:first-of-type {\n  -webkit-margin-start: -0.0625rem;\n          margin-inline-start: -0.0625rem;\n}\n[part=tick-group]:last-of-type {\n  -webkit-margin-start: -0.0625rem;\n          margin-inline-start: -0.0625rem;\n}\n\n[part=tick] {\n  background: hsla(var(--ig-gray-500), var(--ig-gray-a));\n  height: 0.5rem;\n  width: 0.125rem;\n}\n\n[part=tick][data-primary=true] {\n  height: 1rem;\n}\n\n[part=tick-label] {\n  color: hsla(var(--ig-gray-500), var(--ig-gray-a));\n  position: absolute;\n  top: 1.5rem;\n  line-height: 0.7;\n  opacity: 1;\n  -webkit-transition: opacity 0.2s ease-in-out;\n  transition: opacity 0.2s ease-in-out;\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n}\n\n[part=tick-label-inner] {\n  -webkit-margin-start: -50%;\n          margin-inline-start: -50%;\n}\n\n[part=thumbs] {\n  position: absolute;\n  width: 100%;\n  height: 0;\n  cursor: default;\n  inset-inline-start: 0;\n}\n\n[part~=thumb] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.625rem), 0.625rem);\n  position: absolute;\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  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  outline-style: none;\n  -webkit-transition: border-radius 0.1s ease-out, -webkit-transform 0.1s ease-out;\n  transition: border-radius 0.1s ease-out, -webkit-transform 0.1s ease-out;\n  transition: transform 0.1s ease-out, border-radius 0.1s ease-out;\n  transition: transform 0.1s ease-out, border-radius 0.1s ease-out, -webkit-transform 0.1s ease-out;\n  background: hsla(var(--ig-secondary-500), var(--ig-secondary-a));\n}\n\n[part=thumb-label] {\n  position: absolute;\n  top: calc((1.875rem + 1.25rem) * -1);\n  pointer-events: none;\n  height: 1.875rem;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n[part=thumb-label-inner] {\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.125rem), 0.125rem);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  min-width: 2.5rem;\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  white-space: nowrap;\n  -webkit-margin-start: -50%;\n          margin-inline-start: -50%;\n  padding: 0 0.125rem;\n  color: var(--ig-gray-700-contrast);\n  background: hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n[part=thumb-label-inner]::after {\n  content: \"\";\n  position: absolute;\n  top: 85%;\n  border-left: 0.625rem solid transparent;\n  border-right: 0.625rem solid transparent;\n  border-top: 0.625rem solid hsla(var(--ig-gray-700), var(--ig-gray-a));\n}\n\n:host(:not([tick-label-rotation=\"0\"])) [part=tick-label-inner] {\n  -webkit-writing-mode: vertical-rl;\n      -ms-writing-mode: tb-rl;\n          writing-mode: vertical-rl;\n  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n  margin-block: -50%;\n}\n\n:host([tick-label-rotation=\"-90\"]) [part=tick-label-inner] {\n  -webkit-transform: rotate(180deg);\n      -ms-transform: rotate(180deg);\n          transform: rotate(180deg);\n}\n\n:host([disabled]),\n:host(:disabled) {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  pointer-events: none;\n  cursor: initial;\n}\n:host([disabled]) [part=inactive],\n:host(:disabled) [part=inactive] {\n  background: hsla(var(--ig-gray-200), var(--ig-gray-a));\n}\n:host([disabled]) [part=fill],\n:host([disabled]) [part=tick],\n:host(:disabled) [part=fill],\n:host(:disabled) [part=tick] {\n  background: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host([disabled]) [part=tick-label],\n:host(:disabled) [part=tick-label] {\n  color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host([disabled]) [part~=thumb],\n:host(:disabled) [part~=thumb] {\n  background: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host([disabled]) [part~=thumb]:focus::after,\n:host(:disabled) [part~=thumb]:focus::after {\n  -webkit-transform: scale(0);\n      -ms-transform: scale(0);\n          transform: scale(0);\n}\n:host([disabled]):hover [part=inactive],\n:host(:disabled):hover [part=inactive] {\n  background: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}\n:host([disabled]):hover [part~=thumb],\n:host(:disabled):hover [part~=thumb] {\n  border-color: hsla(var(--ig-gray-400), var(--ig-gray-a));\n}`;\n"]}
+{"version":3,"file":"slider.base.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/light/slider.base.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyQvB,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: block;\n}\n\nslot {\n  display: none;\n}\n\n[part~=base] {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n          flex-grow: 1;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  height: 3rem;\n  -webkit-transition: all 0.2s ease-out;\n  transition: all 0.2s ease-out;\n  font-family: var(--ig-font-family);\n}\n\n[part=track] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 2rem), 2rem);\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n\n[part=fill] {\n  position: absolute;\n  border-radius: inherit;\n}\n\n[part=inactive] {\n  position: absolute;\n  width: 100%;\n  top: 0.0625rem;\n  -webkit-transition: background 0.2s ease-out;\n  transition: background 0.2s ease-out;\n  border-radius: inherit;\n}\n\n[part=steps] {\n  position: absolute;\n  width: 100%;\n  height: 0.25rem;\n  opacity: 0.85;\n  -webkit-transition: opacity 0.2s ease-out;\n  transition: opacity 0.2s ease-out;\n  top: 50%;\n  -webkit-transform: translateY(-50%);\n      -ms-transform: translateY(-50%);\n          transform: translateY(-50%);\n}\n[part=steps] svg {\n  -webkit-clip-path: inset(0 0.1875rem 0 0.1875rem);\n          clip-path: inset(0 0.1875rem 0 0.1875rem);\n}\n[part=steps] line {\n  -webkit-transform: translateY(25%);\n      -ms-transform: translateY(25%);\n          transform: translateY(25%);\n  stroke: currentcolor;\n  stroke-width: 0.1875rem;\n  stroke-linecap: round;\n}\n\n[part=ticks] {\n  width: 100%;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  bottom: 0;\n  -webkit-box-pack: justify;\n      -ms-flex-pack: justify;\n          justify-content: space-between;\n}\n[part=ticks]:first-child {\n  bottom: auto;\n  top: 0;\n  -webkit-box-align: end;\n      -ms-flex-align: end;\n          align-items: flex-end;\n}\n[part=ticks]:first-child [part=tick-label] {\n  top: auto;\n  bottom: 1.5rem;\n}\n\n[part=tick-group]:first-of-type {\n  -webkit-margin-start: -0.0625rem;\n          margin-inline-start: -0.0625rem;\n}\n[part=tick-group]:last-of-type {\n  -webkit-margin-start: -0.0625rem;\n          margin-inline-start: -0.0625rem;\n}\n\n[part=tick] {\n  height: 0.5rem;\n  width: 0.125rem;\n}\n\n[part=tick][data-primary=true] {\n  height: 1rem;\n}\n\n[part=tick-label] {\n  position: absolute;\n  top: 1.5rem;\n  line-height: 0.7;\n  opacity: 1;\n  -webkit-transition: opacity 0.2s ease-in-out;\n  transition: opacity 0.2s ease-in-out;\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n}\n\n[part=tick-label-inner] {\n  -webkit-margin-start: -50%;\n          margin-inline-start: -50%;\n}\n\n[part=thumbs] {\n  position: absolute;\n  width: 100%;\n  height: 0;\n  cursor: default;\n  inset-inline-start: 0;\n}\n\n[part~=thumb] {\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.625rem), 0.625rem);\n  position: absolute;\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  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n      -ms-flex-direction: column;\n          flex-direction: column;\n  outline-style: none;\n  -webkit-transition: border-radius 0.1s ease-out, -webkit-transform 0.1s ease-out;\n  transition: border-radius 0.1s ease-out, -webkit-transform 0.1s ease-out;\n  transition: transform 0.1s ease-out, border-radius 0.1s ease-out;\n  transition: transform 0.1s ease-out, border-radius 0.1s ease-out, -webkit-transform 0.1s ease-out;\n}\n\n[part=thumb-label] {\n  position: absolute;\n  top: calc((1.875rem + 1.25rem) * -1);\n  pointer-events: none;\n  height: 1.875rem;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n[part=thumb-label-inner] {\n  font-family: var(--ig-caption-font-family, var(--ig-font-family));\n  font-size: var(--ig-caption-font-size);\n  font-weight: var(--ig-caption-font-weight);\n  font-style: var(--ig-caption-font-style);\n  line-height: var(--ig-caption-line-height);\n  letter-spacing: var(--ig-caption-letter-spacing);\n  text-transform: var(--ig-caption-text-transform);\n  margin-top: var(--ig-caption-margin-top);\n  margin-bottom: var(--ig-caption-margin-bottom);\n  border-radius: clamp(0rem, calc(var(--ig-radius-factor, 1) * 0.125rem), 0.125rem);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  min-width: 2.5rem;\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  white-space: nowrap;\n  -webkit-margin-start: -50%;\n          margin-inline-start: -50%;\n  padding: 0 0.125rem;\n}\n[part=thumb-label-inner]::after {\n  content: \"\";\n  position: absolute;\n  top: 85%;\n  border-left: 0.625rem solid transparent;\n  border-right: 0.625rem solid transparent;\n}\n\n:host(:not([tick-label-rotation=\"0\"])) [part=tick-label-inner] {\n  -webkit-writing-mode: vertical-rl;\n      -ms-writing-mode: tb-rl;\n          writing-mode: vertical-rl;\n  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n  margin-block: -50%;\n}\n\n:host([tick-label-rotation=\"-90\"]) [part=tick-label-inner] {\n  -webkit-transform: rotate(180deg);\n      -ms-transform: rotate(180deg);\n          transform: rotate(180deg);\n}\n\n:host([disabled]),\n:host(:disabled) {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  pointer-events: none;\n  cursor: initial;\n}`;\n"]}

package/components/slider/themes/light/slider.bootstrap.css.js

@@ -1,5 +1,26 @@
 import { css } from 'lit';
-export const styles = css `[part=track],
+export const styles = css `:host {
+  --track-color: var(--ig-slider-track-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --track-step-color: var(--ig-slider-track-step-color, white);
+  --track-step-size: var(--ig-slider-track-step-size, 0.1875rem);
+  --track-hover-color: var(--ig-slider-track-hover-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --thumb-color: var(--ig-slider-thumb-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --thumb-focus-color: var(--ig-slider-thumb-focus-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --thumb-border-color: var(--ig-slider-thumb-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --thumb-border-focus-color: var(--ig-slider-thumb-border-focus-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --thumb-disabled-border-color: var(--ig-slider-thumb-disabled-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-thumb-color: var(--ig-slider-disabled-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --label-background-color: var(--ig-slider-label-background-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --label-text-color: var(--ig-slider-label-text-color, var(--ig-gray-700-contrast));
+  --base-track-color: var(--ig-slider-base-track-color, hsla(var(--ig-secondary-500), 0.24));
+  --base-track-hover-color: var(--ig-slider-base-track-hover-color, hsla(var(--ig-secondary-500), 0.24));
+  --disabled-base-track-color: var(--ig-slider-disabled-base-track-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --disabled-fill-track-color: var(--ig-slider-disabled-fill-track-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --tick-color: var(--ig-slider-tick-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --tick-label-color: var(--ig-slider-tick-label-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+}
+
+[part=track],
 [part=inactive] {
   height: 0.5rem;
 }
@@ -9,20 +30,55 @@ export const styles = css `[part=track],
 }
 
 [part=inactive] {
-  background: var(--inactive-background, hsla(var(--ig-secondary-500), 0.24));
+  background: var(--base-track-color);
+}
+
+[part=steps] {
+  color: var(--track-step-color);
 }
 
 [part~=thumb] {
   width: 1rem;
   height: 1rem;
-  background: hsla(var(--ig-primary-500), var(--ig-primary-a));
+  background: var(--thumb-color);
   top: calc((1rem - calc(1rem / 2)) * -1);
   -webkit-margin-start: calc((1rem - calc(1rem / 2)) * -1);
           margin-inline-start: calc((1rem - calc(1rem / 2)) * -1);
 }
 [part~=thumb]:focus {
-  border: 0.0625rem solid hsla(var(--ig-surface-500), var(--ig-surface-a));
-  -webkit-box-shadow: 0 0 0 0.1875rem hsla(var(--ig-primary-200), var(--ig-primary-a));
-          box-shadow: 0 0 0 0.1875rem hsla(var(--ig-primary-200), var(--ig-primary-a));
+  border: 0.0625rem solid var(--thumb-border-focus-color);
+  -webkit-box-shadow: 0 0 0 0.1875rem var(--thumb-focus-color);
+          box-shadow: 0 0 0 0.1875rem var(--thumb-focus-color);
+}
+
+[part=tick] {
+  background: var(--tick-color);
+}
+
+[part=tick-label] {
+  color: var(--tick-label-color);
+}
+
+[part=thumb-label-inner] {
+  color: var(--label-text-color);
+  background: var(--label-background-color);
+}
+[part=thumb-label-inner]::after {
+  border-top: 0.625rem solid var(--label-background-color);
+}
+
+:host([disabled]) [part=inactive],
+:host([disabled]) [part=tick],
+:host(:disabled) [part=inactive],
+:host(:disabled) [part=tick] {
+  background: var(--disabled-base-track-color);
+}
+:host([disabled]) [part~=thumb],
+:host(:disabled) [part~=thumb] {
+  background: var(--disabled-thumb-color);
+}
+:host([disabled]) [part=tick-label],
+:host(:disabled) [part=tick-label] {
+  color: var(--disabled-base-track-color);
 }`;
 //# sourceMappingURL=slider.bootstrap.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/light/slider.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=track],\n[part=inactive] {\n  height: 0.5rem;\n}\n\n[part=fill] {\n  display: none;\n}\n\n[part=inactive] {\n  background: var(--inactive-background, hsla(var(--ig-secondary-500), 0.24));\n}\n\n[part~=thumb] {\n  width: 1rem;\n  height: 1rem;\n  background: hsla(var(--ig-primary-500), var(--ig-primary-a));\n  top: calc((1rem - calc(1rem / 2)) * -1);\n  -webkit-margin-start: calc((1rem - calc(1rem / 2)) * -1);\n          margin-inline-start: calc((1rem - calc(1rem / 2)) * -1);\n}\n[part~=thumb]:focus {\n  border: 0.0625rem solid hsla(var(--ig-surface-500), var(--ig-surface-a));\n  -webkit-box-shadow: 0 0 0 0.1875rem hsla(var(--ig-primary-200), var(--ig-primary-a));\n          box-shadow: 0 0 0 0.1875rem hsla(var(--ig-primary-200), var(--ig-primary-a));\n}`;\n"]}
+{"version":3,"file":"slider.bootstrap.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/light/slider.bootstrap.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiFvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --track-color: var(--ig-slider-track-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --track-step-color: var(--ig-slider-track-step-color, white);\n  --track-step-size: var(--ig-slider-track-step-size, 0.1875rem);\n  --track-hover-color: var(--ig-slider-track-hover-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --thumb-color: var(--ig-slider-thumb-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --thumb-focus-color: var(--ig-slider-thumb-focus-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n  --thumb-border-color: var(--ig-slider-thumb-border-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --thumb-border-focus-color: var(--ig-slider-thumb-border-focus-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --thumb-disabled-border-color: var(--ig-slider-thumb-disabled-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --disabled-thumb-color: var(--ig-slider-disabled-thumb-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --label-background-color: var(--ig-slider-label-background-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --label-text-color: var(--ig-slider-label-text-color, var(--ig-gray-700-contrast));\n  --base-track-color: var(--ig-slider-base-track-color, hsla(var(--ig-secondary-500), 0.24));\n  --base-track-hover-color: var(--ig-slider-base-track-hover-color, hsla(var(--ig-secondary-500), 0.24));\n  --disabled-base-track-color: var(--ig-slider-disabled-base-track-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --disabled-fill-track-color: var(--ig-slider-disabled-fill-track-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --tick-color: var(--ig-slider-tick-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --tick-label-color: var(--ig-slider-tick-label-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n}\n\n[part=track],\n[part=inactive] {\n  height: 0.5rem;\n}\n\n[part=fill] {\n  display: none;\n}\n\n[part=inactive] {\n  background: var(--base-track-color);\n}\n\n[part=steps] {\n  color: var(--track-step-color);\n}\n\n[part~=thumb] {\n  width: 1rem;\n  height: 1rem;\n  background: var(--thumb-color);\n  top: calc((1rem - calc(1rem / 2)) * -1);\n  -webkit-margin-start: calc((1rem - calc(1rem / 2)) * -1);\n          margin-inline-start: calc((1rem - calc(1rem / 2)) * -1);\n}\n[part~=thumb]:focus {\n  border: 0.0625rem solid var(--thumb-border-focus-color);\n  -webkit-box-shadow: 0 0 0 0.1875rem var(--thumb-focus-color);\n          box-shadow: 0 0 0 0.1875rem var(--thumb-focus-color);\n}\n\n[part=tick] {\n  background: var(--tick-color);\n}\n\n[part=tick-label] {\n  color: var(--tick-label-color);\n}\n\n[part=thumb-label-inner] {\n  color: var(--label-text-color);\n  background: var(--label-background-color);\n}\n[part=thumb-label-inner]::after {\n  border-top: 0.625rem solid var(--label-background-color);\n}\n\n:host([disabled]) [part=inactive],\n:host([disabled]) [part=tick],\n:host(:disabled) [part=inactive],\n:host(:disabled) [part=tick] {\n  background: var(--disabled-base-track-color);\n}\n:host([disabled]) [part~=thumb],\n:host(:disabled) [part~=thumb] {\n  background: var(--disabled-thumb-color);\n}\n:host([disabled]) [part=tick-label],\n:host(:disabled) [part=tick-label] {\n  color: var(--disabled-base-track-color);\n}`;\n"]}

package/components/slider/themes/light/slider.fluent.css.js

@@ -1,9 +1,30 @@
 import { css } from 'lit';
-export const styles = css `:host(:hover) [part=fill] {
-  background: var(--fill-hover-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+export const styles = css `:host {
+  --track-color: var(--ig-slider-track-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  --track-step-color: var(--ig-slider-track-step-color, white);
+  --track-step-size: var(--ig-slider-track-step-size, 0.1875rem);
+  --track-hover-color: var(--ig-slider-track-hover-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --thumb-color: var(--ig-slider-thumb-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --thumb-focus-color: var(--ig-slider-thumb-focus-color, hsla(var(--ig-primary-700), var(--ig-primary-a)));
+  --thumb-border-color: var(--ig-slider-thumb-border-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --thumb-border-focus-color: var(--ig-slider-thumb-border-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --thumb-disabled-border-color: var(--ig-slider-thumb-disabled-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-thumb-color: var(--ig-slider-disabled-thumb-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));
+  --label-background-color: var(--ig-slider-label-background-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  --label-text-color: var(--ig-slider-label-text-color, var(--ig-gray-700-contrast));
+  --base-track-color: var(--ig-slider-base-track-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --base-track-hover-color: var(--ig-slider-base-track-hover-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  --disabled-base-track-color: var(--ig-slider-disabled-base-track-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  --disabled-fill-track-color: var(--ig-slider-disabled-fill-track-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --tick-color: var(--ig-slider-tick-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --tick-label-color: var(--ig-slider-tick-label-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+}
+
+:host(:hover) [part=fill] {
+  background: var(--track-hover-color);
 }
 :host(:hover) [part~=thumb] {
-  border-color: var(--thumb-hover-border, hsla(var(--ig-primary-700), var(--ig-primary-a)));
+  border-color: var(--thumb-focus-color);
 }
 
 [part~=focused]::after {
@@ -14,10 +35,10 @@ export const styles = css `:host(:hover) [part=fill] {
   -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
-  -webkit-box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-700), var(--ig-gray-a));
-          box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-700), var(--ig-gray-a));
-  width: calc(1rem + (0.125rem * 2));
-  height: calc(1rem + (0.125rem * 2));
+  -webkit-box-shadow: 0 0 0 0.0625rem var(--thumb-border-focus-color);
+          box-shadow: 0 0 0 0.0625rem var(--thumb-border-focus-color);
+  width: calc(1rem + 0.125rem * 2);
+  height: calc(1rem + 0.125rem * 2);
 }
 
 [part=track],
@@ -27,17 +48,29 @@ export const styles = css `:host(:hover) [part=fill] {
 }
 
 [part=inactive] {
-  background: var(--inactive-background, hsla(var(--ig-gray-600), var(--ig-gray-a)));
+  background: var(--base-track-color);
   top: initial;
 }
 
 [part=fill] {
-  background: var(--fill-background, hsla(var(--ig-gray-800), var(--ig-gray-a)));
+  background: var(--track-color);
+}
+
+[part=steps] {
+  color: var(--track-step-color);
+}
+
+[part=tick] {
+  background: var(--tick-color);
+}
+
+[part=tick-label] {
+  color: var(--tick-label-color);
 }
 
 [part~=thumb] {
-  background: hsla(var(--ig-surface-500), var(--ig-surface-a));
-  border: 0.125rem solid var(--thumb-border, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  background: var(--thumb-color);
+  border: 0.125rem solid var(--thumb-border-color);
   width: 1rem;
   height: 1rem;
   top: calc((1rem - 0.5rem) * -1);
@@ -46,23 +79,28 @@ export const styles = css `:host(:hover) [part=fill] {
 }
 
 [part=thumb-label-inner] {
-  background: var(--fill-hover-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  background: var(--label-background-color);
+  color: var(--label-text-color);
 }
 [part=thumb-label-inner]::after {
-  border-top: 0.625rem solid var(--fill-hover-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));
+  border-top: 0.625rem solid var(--label-background-color);
 }
 
 :host([disabled]) [part=inactive],
 :host(:disabled) [part=inactive] {
-  background: var(--inactive-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));
+  background: var(--disabled-base-track-color);
 }
 :host([disabled]) [part=fill],
 :host(:disabled) [part=fill] {
-  background: var(--fill-disabled-background, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  background: var(--disabled-fill-track-color);
 }
 :host([disabled]) [part~=thumb],
 :host(:disabled) [part~=thumb] {
-  background: hsla(var(--ig-surface-500), var(--ig-surface-a));
-  border-color: var(--thumb-disabled-border, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  background: var(--disabled-thumb-color);
+  border-color: var(--thumb-disabled-border-color);
+}
+:host([disabled]) [part=tick-label],
+:host(:disabled) [part=tick-label] {
+  color: var(--disabled-fill-track-color);
 }`;
 //# sourceMappingURL=slider.fluent.css.js.map

package/components/slider/themes/light/slider.fluent.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/light/slider.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiEvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host(:hover) [part=fill] {\n  background: var(--fill-hover-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}\n:host(:hover) [part~=thumb] {\n  border-color: var(--thumb-hover-border, hsla(var(--ig-primary-700), var(--ig-primary-a)));\n}\n\n[part~=focused]::after {\n  position: absolute;\n  content: \"\";\n  left: 50%;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n      -ms-transform: translate(-50%, -50%);\n          transform: translate(-50%, -50%);\n  -webkit-box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-700), var(--ig-gray-a));\n          box-shadow: 0 0 0 0.0625rem hsla(var(--ig-gray-700), var(--ig-gray-a));\n  width: calc(1rem + (0.125rem * 2));\n  height: calc(1rem + (0.125rem * 2));\n}\n\n[part=track],\n[part=fill],\n[part=inactive] {\n  height: 0.25rem;\n}\n\n[part=inactive] {\n  background: var(--inactive-background, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  top: initial;\n}\n\n[part=fill] {\n  background: var(--fill-background, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n}\n\n[part~=thumb] {\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  border: 0.125rem solid var(--thumb-border, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  width: 1rem;\n  height: 1rem;\n  top: calc((1rem - 0.5rem) * -1);\n  -webkit-margin-start: calc((1rem - 0.5rem) * -1);\n          margin-inline-start: calc((1rem - 0.5rem) * -1);\n}\n\n[part=thumb-label-inner] {\n  background: var(--fill-hover-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}\n[part=thumb-label-inner]::after {\n  border-top: 0.625rem solid var(--fill-hover-background, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n}\n\n:host([disabled]) [part=inactive],\n:host(:disabled) [part=inactive] {\n  background: var(--inactive-disabled-background, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n}\n:host([disabled]) [part=fill],\n:host(:disabled) [part=fill] {\n  background: var(--fill-disabled-background, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n}\n:host([disabled]) [part~=thumb],\n:host(:disabled) [part~=thumb] {\n  background: hsla(var(--ig-surface-500), var(--ig-surface-a));\n  border-color: var(--thumb-disabled-border, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}`;\n"]}
+{"version":3,"file":"slider.fluent.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/light/slider.fluent.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --track-color: var(--ig-slider-track-color, hsla(var(--ig-gray-800), var(--ig-gray-a)));\n  --track-step-color: var(--ig-slider-track-step-color, white);\n  --track-step-size: var(--ig-slider-track-step-size, 0.1875rem);\n  --track-hover-color: var(--ig-slider-track-hover-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --thumb-color: var(--ig-slider-thumb-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --thumb-focus-color: var(--ig-slider-thumb-focus-color, hsla(var(--ig-primary-700), var(--ig-primary-a)));\n  --thumb-border-color: var(--ig-slider-thumb-border-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --thumb-border-focus-color: var(--ig-slider-thumb-border-focus-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --thumb-disabled-border-color: var(--ig-slider-thumb-disabled-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --disabled-thumb-color: var(--ig-slider-disabled-thumb-color, hsla(var(--ig-surface-500), var(--ig-surface-a)));\n  --label-background-color: var(--ig-slider-label-background-color, hsla(var(--ig-primary-500), var(--ig-primary-a)));\n  --label-text-color: var(--ig-slider-label-text-color, var(--ig-gray-700-contrast));\n  --base-track-color: var(--ig-slider-base-track-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --base-track-hover-color: var(--ig-slider-base-track-hover-color, hsla(var(--ig-gray-600), var(--ig-gray-a)));\n  --disabled-base-track-color: var(--ig-slider-disabled-base-track-color, hsla(var(--ig-gray-100), var(--ig-gray-a)));\n  --disabled-fill-track-color: var(--ig-slider-disabled-fill-track-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --tick-color: var(--ig-slider-tick-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --tick-label-color: var(--ig-slider-tick-label-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n}\n\n:host(:hover) [part=fill] {\n  background: var(--track-hover-color);\n}\n:host(:hover) [part~=thumb] {\n  border-color: var(--thumb-focus-color);\n}\n\n[part~=focused]::after {\n  position: absolute;\n  content: \"\";\n  left: 50%;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n      -ms-transform: translate(-50%, -50%);\n          transform: translate(-50%, -50%);\n  -webkit-box-shadow: 0 0 0 0.0625rem var(--thumb-border-focus-color);\n          box-shadow: 0 0 0 0.0625rem var(--thumb-border-focus-color);\n  width: calc(1rem + 0.125rem * 2);\n  height: calc(1rem + 0.125rem * 2);\n}\n\n[part=track],\n[part=fill],\n[part=inactive] {\n  height: 0.25rem;\n}\n\n[part=inactive] {\n  background: var(--base-track-color);\n  top: initial;\n}\n\n[part=fill] {\n  background: var(--track-color);\n}\n\n[part=steps] {\n  color: var(--track-step-color);\n}\n\n[part=tick] {\n  background: var(--tick-color);\n}\n\n[part=tick-label] {\n  color: var(--tick-label-color);\n}\n\n[part~=thumb] {\n  background: var(--thumb-color);\n  border: 0.125rem solid var(--thumb-border-color);\n  width: 1rem;\n  height: 1rem;\n  top: calc((1rem - 0.5rem) * -1);\n  -webkit-margin-start: calc((1rem - 0.5rem) * -1);\n          margin-inline-start: calc((1rem - 0.5rem) * -1);\n}\n\n[part=thumb-label-inner] {\n  background: var(--label-background-color);\n  color: var(--label-text-color);\n}\n[part=thumb-label-inner]::after {\n  border-top: 0.625rem solid var(--label-background-color);\n}\n\n:host([disabled]) [part=inactive],\n:host(:disabled) [part=inactive] {\n  background: var(--disabled-base-track-color);\n}\n:host([disabled]) [part=fill],\n:host(:disabled) [part=fill] {\n  background: var(--disabled-fill-track-color);\n}\n:host([disabled]) [part~=thumb],\n:host(:disabled) [part~=thumb] {\n  background: var(--disabled-thumb-color);\n  border-color: var(--thumb-disabled-border-color);\n}\n:host([disabled]) [part=tick-label],\n:host(:disabled) [part=tick-label] {\n  color: var(--disabled-fill-track-color);\n}`;\n"]}

package/components/slider/themes/light/slider.indigo.css.js

@@ -1,13 +1,38 @@
 import { css } from 'lit';
-export const styles = css `[part=base]:hover [part=inactive] {
-  background: var(--inactive-hover-background, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+export const styles = css `:host {
+  --track-color: var(--ig-slider-track-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --track-step-color: var(--ig-slider-track-step-color, white);
+  --track-step-size: var(--ig-slider-track-step-size, 0.1875rem);
+  --track-hover-color: var(--ig-slider-track-hover-color, hsla(var(--ig-primary-400), var(--ig-primary-a)));
+  --thumb-color: var(--ig-slider-thumb-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --thumb-focus-color: var(--ig-slider-thumb-focus-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));
+  --thumb-border-color: var(--ig-slider-thumb-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --thumb-border-focus-color: var(--ig-slider-thumb-border-focus-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));
+  --thumb-disabled-border-color: var(--ig-slider-thumb-disabled-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --disabled-thumb-color: var(--ig-slider-disabled-thumb-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --label-background-color: var(--ig-slider-label-background-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));
+  --label-text-color: var(--ig-slider-label-text-color, var(--ig-gray-700-contrast));
+  --base-track-color: var(--ig-slider-base-track-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  --base-track-hover-color: var(--ig-slider-base-track-hover-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --disabled-base-track-color: var(--ig-slider-disabled-base-track-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --disabled-fill-track-color: var(--ig-slider-disabled-fill-track-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));
+  --tick-color: var(--ig-slider-tick-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+  --tick-label-color: var(--ig-slider-tick-label-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));
+}
+
+[part=base]:hover [part=inactive] {
+  background: var(--base-track-hover-color);
 }
 [part=base]:hover [part=fill] {
-  background: hsla(var(--ig-primary-400), var(--ig-primary-a));
+  background: var(--track-hover-color);
+}
+
+[part=fill] {
+  background: var(--track-color);
 }
 
 [part=inactive] {
-  background: var(--inactive-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));
+  background: var(--base-track-color);
 }
 
 [part=track],
@@ -19,6 +44,7 @@ export const styles = css `[part=base]:hover [part=inactive] {
 }
 
 [part=steps] {
+  color: var(--track-step-color);
   height: 0.125rem;
 }
 [part=steps] line {
@@ -27,7 +53,16 @@ export const styles = css `[part=base]:hover [part=inactive] {
           transform: none;
 }
 
+[part=tick] {
+  background: var(--tick-color);
+}
+
+[part=tick-label] {
+  color: var(--tick-label-color);
+}
+
 [part~=thumb] {
+  background: var(--thumb-color);
   width: 0.875rem;
   height: 0.875rem;
   top: calc((0.875rem - 0.4375rem) * -1);
@@ -35,19 +70,37 @@ export const styles = css `[part=base]:hover [part=inactive] {
           margin-inline-start: calc((0.875rem - 0.4375rem) * -1);
 }
 [part~=thumb]:focus {
-  -webkit-box-shadow: 0 0 0 0.1875rem hsla(var(--ig-primary-200), var(--ig-primary-a));
-          box-shadow: 0 0 0 0.1875rem hsla(var(--ig-primary-200), var(--ig-primary-a));
+  -webkit-box-shadow: 0 0 0 0.1875rem var(--thumb-focus-color);
+          box-shadow: 0 0 0 0.1875rem var(--thumb-focus-color);
 }
 [part~=thumb]::after {
   display: none;
 }
 
-:host([disabled]) [part~=thumb],
-:host([disabled]) [part=fill],
+[part=thumb-label-inner] {
+  background: var(--label-background-color);
+  color: var(--label-text-color);
+}
+[part=thumb-label-inner]::after {
+  border-top: 0.625rem solid var(--label-background-color);
+}
+
 :host([disabled]) [part=inactive],
-:host(:disabled) [part~=thumb],
-:host(:disabled) [part=fill],
 :host(:disabled) [part=inactive] {
-  background: hsla(var(--ig-gray-300), var(--ig-gray-a));
+  background: var(--disabled-base-track-color);
+}
+:host([disabled]) [part=fill],
+:host([disabled]) [part=tick],
+:host(:disabled) [part=fill],
+:host(:disabled) [part=tick] {
+  background: var(--disabled-fill-track-color);
+}
+:host([disabled]) [part~=thumb],
+:host(:disabled) [part~=thumb] {
+  background: var(--disabled-thumb-color);
+}
+:host([disabled]) [part=tick-label],
+:host(:disabled) [part=tick-label] {
+  color: var(--disabled-fill-track-color);
 }`;
 //# sourceMappingURL=slider.indigo.css.js.map

package/components/slider/themes/light/slider.indigo.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/light/slider.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`[part=base]:hover [part=inactive] {\n  background: var(--inactive-hover-background, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n}\n[part=base]:hover [part=fill] {\n  background: hsla(var(--ig-primary-400), var(--ig-primary-a));\n}\n\n[part=inactive] {\n  background: var(--inactive-background, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n}\n\n[part=track],\n[part=fill],\n[part=inactive] {\n  height: 0.125rem;\n  top: initial;\n  border-radius: initial;\n}\n\n[part=steps] {\n  height: 0.125rem;\n}\n[part=steps] line {\n  -webkit-transform: none;\n      -ms-transform: none;\n          transform: none;\n}\n\n[part~=thumb] {\n  width: 0.875rem;\n  height: 0.875rem;\n  top: calc((0.875rem - 0.4375rem) * -1);\n  -webkit-margin-start: calc((0.875rem - 0.4375rem) * -1);\n          margin-inline-start: calc((0.875rem - 0.4375rem) * -1);\n}\n[part~=thumb]:focus {\n  -webkit-box-shadow: 0 0 0 0.1875rem hsla(var(--ig-primary-200), var(--ig-primary-a));\n          box-shadow: 0 0 0 0.1875rem hsla(var(--ig-primary-200), var(--ig-primary-a));\n}\n[part~=thumb]::after {\n  display: none;\n}\n\n:host([disabled]) [part~=thumb],\n:host([disabled]) [part=fill],\n:host([disabled]) [part=inactive],\n:host(:disabled) [part~=thumb],\n:host(:disabled) [part=fill],\n:host(:disabled) [part=inactive] {\n  background: hsla(var(--ig-gray-300), var(--ig-gray-a));\n}`;\n"]}
+{"version":3,"file":"slider.indigo.css.js","sourceRoot":"","sources":["../../../../../src/components/slider/themes/light/slider.indigo.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuGvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`:host {\n  --track-color: var(--ig-slider-track-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --track-step-color: var(--ig-slider-track-step-color, white);\n  --track-step-size: var(--ig-slider-track-step-size, 0.1875rem);\n  --track-hover-color: var(--ig-slider-track-hover-color, hsla(var(--ig-primary-400), var(--ig-primary-a)));\n  --thumb-color: var(--ig-slider-thumb-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --thumb-focus-color: var(--ig-slider-thumb-focus-color, hsla(var(--ig-primary-200), var(--ig-primary-a)));\n  --thumb-border-color: var(--ig-slider-thumb-border-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --thumb-border-focus-color: var(--ig-slider-thumb-border-focus-color, hsla(var(--ig-secondary-500), var(--ig-secondary-a)));\n  --thumb-disabled-border-color: var(--ig-slider-thumb-disabled-border-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --disabled-thumb-color: var(--ig-slider-disabled-thumb-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --label-background-color: var(--ig-slider-label-background-color, hsla(var(--ig-gray-700), var(--ig-gray-a)));\n  --label-text-color: var(--ig-slider-label-text-color, var(--ig-gray-700-contrast));\n  --base-track-color: var(--ig-slider-base-track-color, hsla(var(--ig-gray-400), var(--ig-gray-a)));\n  --base-track-hover-color: var(--ig-slider-base-track-hover-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --disabled-base-track-color: var(--ig-slider-disabled-base-track-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --disabled-fill-track-color: var(--ig-slider-disabled-fill-track-color, hsla(var(--ig-gray-300), var(--ig-gray-a)));\n  --tick-color: var(--ig-slider-tick-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n  --tick-label-color: var(--ig-slider-tick-label-color, hsla(var(--ig-gray-500), var(--ig-gray-a)));\n}\n\n[part=base]:hover [part=inactive] {\n  background: var(--base-track-hover-color);\n}\n[part=base]:hover [part=fill] {\n  background: var(--track-hover-color);\n}\n\n[part=fill] {\n  background: var(--track-color);\n}\n\n[part=inactive] {\n  background: var(--base-track-color);\n}\n\n[part=track],\n[part=fill],\n[part=inactive] {\n  height: 0.125rem;\n  top: initial;\n  border-radius: initial;\n}\n\n[part=steps] {\n  color: var(--track-step-color);\n  height: 0.125rem;\n}\n[part=steps] line {\n  -webkit-transform: none;\n      -ms-transform: none;\n          transform: none;\n}\n\n[part=tick] {\n  background: var(--tick-color);\n}\n\n[part=tick-label] {\n  color: var(--tick-label-color);\n}\n\n[part~=thumb] {\n  background: var(--thumb-color);\n  width: 0.875rem;\n  height: 0.875rem;\n  top: calc((0.875rem - 0.4375rem) * -1);\n  -webkit-margin-start: calc((0.875rem - 0.4375rem) * -1);\n          margin-inline-start: calc((0.875rem - 0.4375rem) * -1);\n}\n[part~=thumb]:focus {\n  -webkit-box-shadow: 0 0 0 0.1875rem var(--thumb-focus-color);\n          box-shadow: 0 0 0 0.1875rem var(--thumb-focus-color);\n}\n[part~=thumb]::after {\n  display: none;\n}\n\n[part=thumb-label-inner] {\n  background: var(--label-background-color);\n  color: var(--label-text-color);\n}\n[part=thumb-label-inner]::after {\n  border-top: 0.625rem solid var(--label-background-color);\n}\n\n:host([disabled]) [part=inactive],\n:host(:disabled) [part=inactive] {\n  background: var(--disabled-base-track-color);\n}\n:host([disabled]) [part=fill],\n:host([disabled]) [part=tick],\n:host(:disabled) [part=fill],\n:host(:disabled) [part=tick] {\n  background: var(--disabled-fill-track-color);\n}\n:host([disabled]) [part~=thumb],\n:host(:disabled) [part~=thumb] {\n  background: var(--disabled-thumb-color);\n}\n:host([disabled]) [part=tick-label],\n:host(:disabled) [part=tick-label] {\n  color: var(--disabled-fill-track-color);\n}`;\n"]}