@universal-material/web 3.0.135 → 3.0.136

package/checkbox/checkbox.d.ts

@@ -3,7 +3,7 @@ import { HTMLTemplateResult } from 'lit';
 import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
 export declare class UmCheckbox extends UmSelectionControl {
     #private;
-    static styles: import("lit").CSSResult[];
+    static styles: import("lit").CSSResultGroup[];
     hideStateLayer: boolean;
     get indeterminate(): boolean;
     set indeterminate(indeterminate: boolean);

package/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAM/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAEtF,qBACa,UAAW,SAAQ,kBAAkB;;IAChD,OAAgB,MAAM,4BAGpB;IAIuE,cAAc,UAAS;IAEhG,IACI,aAAa,IAAI,OAAO,CAE3B;IACD,IAAI,aAAa,CAAC,aAAa,EAAE,OAAO,EAUvC;IAED,IAAa,OAAO,IAAI,OAAO,CAE9B;IACD,IAAa,OAAO,CAAC,OAAO,EAAE,OAAO,EAGpC;;IAMQ,YAAY,CAAC,iBAAiB,EAAE,cAAc;cAMpC,eAAe,IAAI,kBAAkB;CAGzD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,UAAU,CAAC;KAC1B;CACF"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAK/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAEtF,qBACa,UAAW,SAAQ,kBAAkB;;IAChD,OAAgB,MAAM,iCAAuC;IAIc,cAAc,UAAS;IAElG,IACI,aAAa,IAAI,OAAO,CAE3B;IACD,IAAI,aAAa,CAAC,aAAa,EAAE,OAAO,EAUvC;IAED,IAAa,OAAO,IAAI,OAAO,CAE9B;IACD,IAAa,OAAO,CAAC,OAAO,EAAE,OAAO,EAGpC;;IAMQ,YAAY,CAAC,iBAAiB,EAAE,cAAc;cAMpC,eAAe,IAAI,kBAAkB;CAKzD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,UAAU,CAAC;KAC1B;CACF"}

package/checkbox/checkbox.js

@@ -6,14 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { styles as baseStyles } from '../shared/base.styles.js';
 import { styles } from './checkbox.styles.js';
 import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
 let UmCheckbox = class UmCheckbox extends UmSelectionControl {
-    static { this.styles = [
-        baseStyles,
-        styles
-    ]; }
+    static { this.styles = [UmSelectionControl.styles, styles]; }
     #indeterminate;
     get indeterminate() {
         return this.#indeterminate;
@@ -45,7 +41,9 @@ let UmCheckbox = class UmCheckbox extends UmSelectionControl {
         this.indeterminate = this.indeterminate;
     }
     renderIndicator() {
-        return html `<div class="border"><div class="indicator"></div></div>`;
+        return html `
+      <div class="border"><div class="indicator"></div></div>
+    `;
     }
 };
 __decorate([

package/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/checkbox/checkbox.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAG/E,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,kBAAkB;aAChC,WAAM,GAAG;QACvB,UAAU;QACV,MAAM;KACP,AAHqB,CAGpB;IAEF,cAAc,CAAS;IAKvB,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IACD,IAAI,aAAa,CAAC,aAAsB;QACtC,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;QAEpC,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;YAC9C,OAAO;QACT,CAAC;QAED,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;QAC3C,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3C,CAAC;IAED,IAAa,OAAO;QAClB,OAAO,KAAK,CAAC,OAAO,CAAC;IACvB,CAAC;IACD,IAAa,OAAO,CAAC,OAAgB;QACnC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QA7BV,mBAAc,GAAG,KAAK,CAAC;QAEkD,mBAAc,GAAG,KAAK,CAAC;IA4BhG,CAAC;IAEQ,YAAY,CAAC,iBAAiC;QACrD,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACtC,0CAA0C;QAC1C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;IAC1C,CAAC;IAEkB,eAAe;QAChC,OAAO,IAAI,CAAA,yDAAyD,CAAC;IACvE,CAAC;;AAtCwE;IAAxE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;kDAAwB;AAGhG;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;+CAGzB;AAbU,UAAU;IADtB,aAAa,CAAC,YAAY,CAAC;GACf,UAAU,CA+CtB","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './checkbox.styles.js';\n\nimport { UmSelectionControl } from '../shared/selection-control/selection-control.js';\n\n@customElement('u-checkbox')\nexport class UmCheckbox extends UmSelectionControl {\n  static override styles = [\n    baseStyles,\n    styles\n  ];\n\n  #indeterminate = false;\n\n  @property({type: Boolean, attribute: 'hide-state-layer', reflect: true}) hideStateLayer = false;\n\n  @property({type: Boolean})\n  get indeterminate(): boolean {\n    return this.#indeterminate;\n  }\n  set indeterminate(indeterminate: boolean) {\n    this.#indeterminate = indeterminate;\n\n    if (!indeterminate) {\n      this.input?.classList.remove('indeterminate');\n      return;\n    }\n \n    this.input?.classList.add('indeterminate');\n    this.elementInternals.setFormValue(null);\n  }\n\n  override get checked(): boolean {\n    return super.checked;\n  }\n  override set checked(checked: boolean) {\n    super.checked = checked;\n    this.indeterminate = false;\n  }\n\n  constructor() {\n    super();\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    // eslint-disable-next-line no-self-assign\n    this.indeterminate = this.indeterminate;\n  }\n\n  protected override renderIndicator(): HTMLTemplateResult {\n    return html`<div class=\"border\"><div class=\"indicator\"></div></div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-checkbox': UmCheckbox;\n  }\n}\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/checkbox/checkbox.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAG/E,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,kBAAkB;aAChC,WAAM,GAAG,CAAC,kBAAkB,CAAC,MAAM,EAAE,MAAM,CAAC,AAAtC,CAAuC;IAE7D,cAAc,CAAS;IAKvB,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IACD,IAAI,aAAa,CAAC,aAAsB;QACtC,IAAI,CAAC,cAAc,GAAG,aAAa,CAAC;QAEpC,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;YAC9C,OAAO;QACT,CAAC;QAED,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;QAC3C,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3C,CAAC;IAED,IAAa,OAAO;QAClB,OAAO,KAAK,CAAC,OAAO,CAAC;IACvB,CAAC;IACD,IAAa,OAAO,CAAC,OAAgB;QACnC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QA7BV,mBAAc,GAAG,KAAK,CAAC;QAEoD,mBAAc,GAAG,KAAK,CAAC;IA4BlG,CAAC;IAEQ,YAAY,CAAC,iBAAiC;QACrD,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACtC,0CAA0C;QAC1C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;IAC1C,CAAC;IAEkB,eAAe;QAChC,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;AAxC0E;IAA1E,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAwB;AAGlG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAG3B;AAVU,UAAU;IADtB,aAAa,CAAC,YAAY,CAAC;GACf,UAAU,CA8CtB","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './checkbox.styles.js';\n\nimport { UmSelectionControl } from '../shared/selection-control/selection-control.js';\n\n@customElement('u-checkbox')\nexport class UmCheckbox extends UmSelectionControl {\n  static override styles = [UmSelectionControl.styles, styles];\n\n  #indeterminate = false;\n\n  @property({ type: Boolean, attribute: 'hide-state-layer', reflect: true }) hideStateLayer = false;\n\n  @property({ type: Boolean })\n  get indeterminate(): boolean {\n    return this.#indeterminate;\n  }\n  set indeterminate(indeterminate: boolean) {\n    this.#indeterminate = indeterminate;\n\n    if (!indeterminate) {\n      this.input?.classList.remove('indeterminate');\n      return;\n    }\n\n    this.input?.classList.add('indeterminate');\n    this.elementInternals.setFormValue(null);\n  }\n\n  override get checked(): boolean {\n    return super.checked;\n  }\n  override set checked(checked: boolean) {\n    super.checked = checked;\n    this.indeterminate = false;\n  }\n\n  constructor() {\n    super();\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    // eslint-disable-next-line no-self-assign\n    this.indeterminate = this.indeterminate;\n  }\n\n  protected override renderIndicator(): HTMLTemplateResult {\n    return html`\n      <div class=\"border\"><div class=\"indicator\"></div></div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-checkbox': UmCheckbox;\n  }\n}\n"]}

package/checkbox/checkbox.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4HlB,CAAC"}
+{"version":3,"file":"checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA2DlB,CAAC"}

package/checkbox/checkbox.styles.js

@@ -1,70 +1,5 @@
 import { css } from 'lit';
 export const styles = css `
-  :host {
-    --_state-layer-padding: var(--u-checkbox-state-layer-padding, 4px);
-    --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);
-    --_indicator-color: var(--u-checkbox-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  .container {
-    cursor: pointer;
-    position: relative;
-    width: var(--_width);
-    height: var(--_height);
-    padding: var(--_state-layer-padding);
-    border-radius: var(--u-shape-corner-full, 9999px);
-  }
-
-  :host([hide-state-layer]) .container {
-    width: var(--_indicator-size);
-    height: var(--_indicator-size);
-    padding: 0;
-  }
-  :host([hide-state-layer]) u-ripple {
-    display: none;
-  }
-
-  input {
-    cursor: pointer;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    margin: 0;
-    border-radius: inherit;
-    appearance: none;
-    pointer-events: none;
-  }
-
-  u-ripple {
-    padding: var(--_state-layer-padding);
-  }
-
-  .indicator-container {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    inset: 0;
-    pointer-events: none;
-  }
-
-  input:checked ~ .indicator-container {
-    --_indicator-color: var(--u-checkbox-indicator-selected-color, var(--u-color-primary, rgb(103, 80, 164)));
-  }
-
-  :host([disabled]) {
-    opacity: var(--u-checkbox-disabled-state-opacity, 0.38);
-  }
-  :host([disabled]) input,
-  :host([disabled]) .container {
-    cursor: default;
-  }
-  :host([disabled]) .indicator-container {
-    --_indicator-color: var(--u-checkbox-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));
-  }
-
   :host {
     --_indicator-size: var(--u-checkbox-indicator-size, 1.125rem);
     --_width: var(--u-checkbox-size, 3rem);

package/checkbox/checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.styles.js","sourceRoot":"","sources":["../../src/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_state-layer-padding: var(--u-checkbox-state-layer-padding, 4px);\n    --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n    --_indicator-color: var(--u-checkbox-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  .container {\n    cursor: pointer;\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    padding: var(--_state-layer-padding);\n    border-radius: var(--u-shape-corner-full, 9999px);\n  }\n\n  :host([hide-state-layer]) .container {\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    padding: 0;\n  }\n  :host([hide-state-layer]) u-ripple {\n    display: none;\n  }\n\n  input {\n    cursor: pointer;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    border-radius: inherit;\n    appearance: none;\n    pointer-events: none;\n  }\n\n  u-ripple {\n    padding: var(--_state-layer-padding);\n  }\n\n  .indicator-container {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  input:checked ~ .indicator-container {\n    --_indicator-color: var(--u-checkbox-indicator-selected-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  :host([disabled]) {\n    opacity: var(--u-checkbox-disabled-state-opacity, 0.38);\n  }\n  :host([disabled]) input,\n  :host([disabled]) .container {\n    cursor: default;\n  }\n  :host([disabled]) .indicator-container {\n    --_indicator-color: var(--u-checkbox-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n  }\n\n  :host {\n    --_indicator-size: var(--u-checkbox-indicator-size, 1.125rem);\n    --_width: var(--u-checkbox-size, 3rem);\n    --_height: var(--_width);\n  }\n\n  .border {\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    box-shadow: 0 0 0 var(--u-checkbox-indicator-border-width, 0.125rem) var(--_indicator-color) inset;\n    border-radius: var(--u-checkbox-indicator-shaper-coner, 2px);\n    transition: box-shadow 175ms 175ms;\n  }\n\n  .indicator {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    overflow: hidden;\n    clip: rect(0, 0, var(--_indicator-size), 0);\n    transition: clip 275ms;\n  }\n  .indicator::before {\n    position: relative;\n    top: 25%;\n    box-sizing: border-box;\n    display: block;\n    width: 0.75rem;\n    height: 0.35rem;\n    content: \"\";\n    border: var(--u-checkbox-indicator-border-width, 0.125rem) solid var(--u-color-on-primary, rgb(255, 255, 255));\n    border-top-style: none;\n    border-right-style: none;\n    transform: rotate(-45deg);\n    transition: border 175ms, transform 175ms;\n  }\n\n  input.indeterminate ~ .indicator-container .border,\n  input:checked ~ .indicator-container .border {\n    box-shadow: 0 0 0 calc(var(--_indicator-size) / 2) var(--_indicator-color) inset;\n    transition: box-shadow 175ms;\n  }\n  input.indeterminate ~ .indicator-container .indicator,\n  input:checked ~ .indicator-container .indicator {\n    clip: rect(0, var(--_indicator-size), var(--_indicator-size), 0);\n    transition: clip 175ms 175ms;\n  }\n\n  input.indeterminate ~ .indicator-container {\n    --_indicator-color: var(--u-checkbox-indicator-indeterminate-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n  input.indeterminate ~ .indicator-container .indicator::before {\n    border-left-style: none;\n    transform: rotate(0);\n    width: 0.6rem;\n  }\n`;\n"]}
+{"version":3,"file":"checkbox.styles.js","sourceRoot":"","sources":["../../src/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_indicator-size: var(--u-checkbox-indicator-size, 1.125rem);\n    --_width: var(--u-checkbox-size, 3rem);\n    --_height: var(--_width);\n  }\n\n  .border {\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    box-shadow: 0 0 0 var(--u-checkbox-indicator-border-width, 0.125rem) var(--_indicator-color) inset;\n    border-radius: var(--u-checkbox-indicator-shaper-coner, 2px);\n    transition: box-shadow 175ms 175ms;\n  }\n\n  .indicator {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    overflow: hidden;\n    clip: rect(0, 0, var(--_indicator-size), 0);\n    transition: clip 275ms;\n  }\n  .indicator::before {\n    position: relative;\n    top: 25%;\n    box-sizing: border-box;\n    display: block;\n    width: 0.75rem;\n    height: 0.35rem;\n    content: \"\";\n    border: var(--u-checkbox-indicator-border-width, 0.125rem) solid var(--u-color-on-primary, rgb(255, 255, 255));\n    border-top-style: none;\n    border-right-style: none;\n    transform: rotate(-45deg);\n    transition: border 175ms, transform 175ms;\n  }\n\n  input.indeterminate ~ .indicator-container .border,\n  input:checked ~ .indicator-container .border {\n    box-shadow: 0 0 0 calc(var(--_indicator-size) / 2) var(--_indicator-color) inset;\n    transition: box-shadow 175ms;\n  }\n  input.indeterminate ~ .indicator-container .indicator,\n  input:checked ~ .indicator-container .indicator {\n    clip: rect(0, var(--_indicator-size), var(--_indicator-size), 0);\n    transition: clip 175ms 175ms;\n  }\n\n  input.indeterminate ~ .indicator-container {\n    --_indicator-color: var(--u-checkbox-indicator-indeterminate-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n  input.indeterminate ~ .indicator-container .indicator::before {\n    border-left-style: none;\n    transform: rotate(0);\n    width: 0.6rem;\n  }\n`;\n"]}