@universal-material/web 3.0.28 → 3.0.29

package/app-bar/top-app-bar.styles.js

@@ -2,7 +2,7 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: block;
-    background-color: var(--u-top-app-bar-background-color, var(--u-color-background, var(--u-color-surface, rgb(254, 247, 255))));
+    background-color: var(--u-top-app-bar-background-color, var(--u-color-body, var(--u-color-surface, rgb(254, 247, 255))));
     color: var(--u-top-app-bar-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));
     transition: background-color 100ms, inset 375ms cubic-bezier(0.19, 1, 0.22, 1);
   }

package/app-bar/top-app-bar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-app-bar.styles.js","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    background-color: var(--u-top-app-bar-background-color, var(--u-color-background, var(--u-color-surface, rgb(254, 247, 255))));\n    color: var(--u-top-app-bar-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    transition: background-color 100ms, inset 375ms cubic-bezier(0.19, 1, 0.22, 1);\n  }\n\n  :host([container-scrolled]) {\n    background-color: var(--u-top-app-bar-elevated-background-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n  }\n\n  :host(:not([has-leading-icon])) .leading-icon {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .trailing-icon {\n    display: none;\n  }\n\n  slot[name=leading-icon],\n  slot[name=trailing-icon] {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--u-top-app-bar-icons-gap, 8px);\n  }\n\n  slot[name=leading-icon]::slotted(u-icon-button) {\n    color: inherit;\n  }\n\n  :host([position=absolute]) .content {\n    position: absolute;\n  }\n\n  :host([position=fixed]) .content {\n    position: fixed;\n    inset-inline: 0;\n    inset-block-start: 0;\n    inset-inline-start: var(--u-app-bar-offset, 0);\n  }\n\n  :host([position=absolute]),\n  :host([position=fixed]) {\n    padding-top: var(--_content-height);\n  }\n  :host([position=absolute]) .content,\n  :host([position=fixed]) .content {\n    z-index: var(--u-fixed-app-bar-z-index, 1010);\n  }\n\n  .content {\n    display: flex;\n    align-items: center;\n    background-color: inherit;\n    transition: inherit;\n    min-height: var(--u-top-app-bar-min-height, 56px);\n  }\n  @media (min-width: 840px) {\n    .content {\n      min-height: var(--u-top-app-bar-extended-min-height, 64px);\n    }\n  }\n\n  .headline {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-top-app-bar-headline-line-height, var(--u-title-l-line-height, 1.75rem));\n    font-size: var(--u-top-app-bar-headline-font-size, var(--u-title-l-font-size, 1.375rem));\n    letter-spacing: var(--u-top-app-bar-headline-letter-spacing, var(--u-title-l-letter-spacing, 0rem));\n    font-weight: var(--u-top-app-bar-headline-font-weight, var(--u-title-l-font-weight, var(--u-font-weight-regular, 400)));\n    margin-inline: var(--u-headline-margin, 16px);\n  }\n\n  .leading-icon {\n    margin-inline: var(--u-leading-icon-margin, 8px);\n  }\n  .leading-icon + .headline {\n    margin-inline-start: 0;\n  }\n\n  .trailing-icon {\n    padding-inline: var(--u-trailing-icon-margin, 8px);\n    margin-inline-start: auto;\n  }\n`;\n"]}
+{"version":3,"file":"top-app-bar.styles.js","sourceRoot":"","sources":["../../src/app-bar/top-app-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    background-color: var(--u-top-app-bar-background-color, var(--u-color-body, var(--u-color-surface, rgb(254, 247, 255))));\n    color: var(--u-top-app-bar-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    transition: background-color 100ms, inset 375ms cubic-bezier(0.19, 1, 0.22, 1);\n  }\n\n  :host([container-scrolled]) {\n    background-color: var(--u-top-app-bar-elevated-background-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n  }\n\n  :host(:not([has-leading-icon])) .leading-icon {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .trailing-icon {\n    display: none;\n  }\n\n  slot[name=leading-icon],\n  slot[name=trailing-icon] {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--u-top-app-bar-icons-gap, 8px);\n  }\n\n  slot[name=leading-icon]::slotted(u-icon-button) {\n    color: inherit;\n  }\n\n  :host([position=absolute]) .content {\n    position: absolute;\n  }\n\n  :host([position=fixed]) .content {\n    position: fixed;\n    inset-inline: 0;\n    inset-block-start: 0;\n    inset-inline-start: var(--u-app-bar-offset, 0);\n  }\n\n  :host([position=absolute]),\n  :host([position=fixed]) {\n    padding-top: var(--_content-height);\n  }\n  :host([position=absolute]) .content,\n  :host([position=fixed]) .content {\n    z-index: var(--u-fixed-app-bar-z-index, 1010);\n  }\n\n  .content {\n    display: flex;\n    align-items: center;\n    background-color: inherit;\n    transition: inherit;\n    min-height: var(--u-top-app-bar-min-height, 56px);\n  }\n  @media (min-width: 840px) {\n    .content {\n      min-height: var(--u-top-app-bar-extended-min-height, 64px);\n    }\n  }\n\n  .headline {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-top-app-bar-headline-line-height, var(--u-title-l-line-height, 1.75rem));\n    font-size: var(--u-top-app-bar-headline-font-size, var(--u-title-l-font-size, 1.375rem));\n    letter-spacing: var(--u-top-app-bar-headline-letter-spacing, var(--u-title-l-letter-spacing, 0rem));\n    font-weight: var(--u-top-app-bar-headline-font-weight, var(--u-title-l-font-weight, var(--u-font-weight-regular, 400)));\n    margin-inline: var(--u-headline-margin, 16px);\n  }\n\n  .leading-icon {\n    margin-inline: var(--u-leading-icon-margin, 8px);\n  }\n  .leading-icon + .headline {\n    margin-inline-start: 0;\n  }\n\n  .trailing-icon {\n    padding-inline: var(--u-trailing-icon-margin, 8px);\n    margin-inline-start: auto;\n  }\n`;\n"]}

package/button/button.js

@@ -35,7 +35,7 @@ let UmButton = class UmButton extends UmButtonBase {
       </span>`;
         return html `
       ${this.trailingIcon ? nothing : icon}
-      <span><slot></slot></span>
+      <span id="text"><slot></slot></span>
       ${this.trailingIcon ? icon : nothing}
     `;
     }

package/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAa,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACnF,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,qBAAqB,CAAC;AAMtB,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAAnC;;QAIL;;WAEG;QACwB,YAAO,GAAoB,QAAQ,CAAC;QASO,iBAAY,GAAG,KAAK,CAAC;QAE3F;;;;WAIG;QAC8D,YAAO,GAAG,KAAK,CAAC;IAwBnF,CAAC;IAnBoB,aAAa;QAC9B,MAAM,IAAI,GAAG,IAAI,CAAA;;;;;yBAKI,IAAI,CAAC,gBAAgB;cAChC,CAAC;QAEX,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;;QAElC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;KACrC,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/C,CAAC;;AA5Ce,eAAM,GAA4B,CAAC,mBAAmB,EAAE,MAAM,CAAC,AAAzD,CAA0D;AAKrD;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAqC;AAOpC;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;uCAAsB;AAEsB;IAArE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;8CAAsB;AAO1B;IAAhE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAiB;AAGhE;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;+CACN;AA1BpC,QAAQ;IADpB,aAAa,CAAC,UAAU,CAAC;GACb,QAAQ,CA+CpB","sourcesContent":["import { CSSResult, html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as buttonWrapperStyles } from '../shared/button-wrapper.styles.js';\nimport { UmButtonBase } from './button-base.js';\nimport { styles } from './button.styles.js';\nimport '../ripple/ripple.js';\n\nexport type UmButtonVariant = 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text';\nexport type UmButtonColor = 'primary' | 'secondary' | 'tertiary' | 'error' | undefined;\n\n@customElement('u-button')\nexport class UmButton extends UmButtonBase {\n\n  static override styles: CSSResult | CSSResult[] = [buttonWrapperStyles, styles];\n\n  /**\n   * The Button variant to render\n   */\n  @property({reflect: true}) variant: UmButtonVariant = 'filled';\n\n  /**\n   * The Button color\n   *\n   * _Note:_ Filled buttons only\n   */\n  @property({reflect: true}) color: UmButtonColor;\n\n  @property({type: Boolean, attribute: 'trailing-icon', reflect: true}) trailingIcon = false;\n\n  /**\n   * Whether the button has icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon = false;\n\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly assignedIcons!: HTMLElement[];\n\n  protected override renderContent(): HTMLTemplateResult {\n    const icon = html`\n      <span class=\"icon\">\n        <slot\n          name=\"icon\"\n          aria-hidden=\"true\"\n          @slotchange=\"${this.handleSlotChange}\"></slot>\n      </span>`;\n\n    return html`\n      ${this.trailingIcon ? nothing : icon}\n      <span><slot></slot></span>\n      ${this.trailingIcon ? icon : nothing}\n    `;\n  }\n\n  private handleSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-button': UmButton;\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAa,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACnF,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,qBAAqB,CAAC;AAMtB,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAAnC;;QAIL;;WAEG;QACwB,YAAO,GAAoB,QAAQ,CAAC;QASO,iBAAY,GAAG,KAAK,CAAC;QAE3F;;;;WAIG;QAC8D,YAAO,GAAG,KAAK,CAAC;IAwBnF,CAAC;IAnBoB,aAAa;QAC9B,MAAM,IAAI,GAAG,IAAI,CAAA;;;;;yBAKI,IAAI,CAAC,gBAAgB;cAChC,CAAC;QAEX,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;;QAElC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;KACrC,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/C,CAAC;;AA5Ce,eAAM,GAA4B,CAAC,mBAAmB,EAAE,MAAM,CAAC,AAAzD,CAA0D;AAKrD;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAqC;AAOpC;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;uCAAsB;AAEsB;IAArE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;8CAAsB;AAO1B;IAAhE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAiB;AAGhE;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;+CACN;AA1BpC,QAAQ;IADpB,aAAa,CAAC,UAAU,CAAC;GACb,QAAQ,CA+CpB","sourcesContent":["import { CSSResult, html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as buttonWrapperStyles } from '../shared/button-wrapper.styles.js';\nimport { UmButtonBase } from './button-base.js';\nimport { styles } from './button.styles.js';\nimport '../ripple/ripple.js';\n\nexport type UmButtonVariant = 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text';\nexport type UmButtonColor = 'primary' | 'secondary' | 'tertiary' | 'error' | undefined;\n\n@customElement('u-button')\nexport class UmButton extends UmButtonBase {\n\n  static override styles: CSSResult | CSSResult[] = [buttonWrapperStyles, styles];\n\n  /**\n   * The Button variant to render\n   */\n  @property({reflect: true}) variant: UmButtonVariant = 'filled';\n\n  /**\n   * The Button color\n   *\n   * _Note:_ Filled buttons only\n   */\n  @property({reflect: true}) color: UmButtonColor;\n\n  @property({type: Boolean, attribute: 'trailing-icon', reflect: true}) trailingIcon = false;\n\n  /**\n   * Whether the button has icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon = false;\n\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly assignedIcons!: HTMLElement[];\n\n  protected override renderContent(): HTMLTemplateResult {\n    const icon = html`\n      <span class=\"icon\">\n        <slot\n          name=\"icon\"\n          aria-hidden=\"true\"\n          @slotchange=\"${this.handleSlotChange}\"></slot>\n      </span>`;\n\n    return html`\n      ${this.trailingIcon ? nothing : icon}\n      <span id=\"text\"><slot></slot></span>\n      ${this.trailingIcon ? icon : nothing}\n    `;\n  }\n\n  private handleSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-button': UmButton;\n  }\n}\n"]}

package/button/button.styles.d.ts.map

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

package/button/button.styles.js

@@ -55,18 +55,23 @@ export const styles = css `
       --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);
     }
   }
-  :host([variant=outlined]),
-  :host([variant=text]),
-  :host([variant=elevated]) {
-    color: var(--_color-primary);
+  :host([variant=text]) {
+    color: var(--u-text-button-text-color, var(--_color-primary));
   }
 
   :host([variant=outlined]) {
-    border: 1px solid var(--u-color-outline, rgb(121, 116, 126));
+    color: var(--u-outlined-button-text-color, var(--u-text-button-text-color, var(--_color-primary)));
+    border: 1px solid var(--u-outlined-button-outline-color, var(--u-color-outline, rgb(121, 116, 126)));
   }
 
   :host([variant=elevated]) {
     --u-elevation-level: var(--u-elevated-button-elevation-level, 1);
+    color: var(--u-elevated-button-text-color, var(--_color-primary));
+  }
+
+  :host([disabled][variant=outlined]) {
+    background-color: transparent !important;
+    border-color: var(--u-outlined-button-disabled-border-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-outlined-button-disabled-border-opacity, 0.12))) !important;
   }
 
   @media (hover: hover) {

package/button/button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../src/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);\n    --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);\n    --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n    --_common-button-height: var(--u-common-button-height, 2.5rem);\n    --_common-button-padding: var(--u-common-button-padding, 24px);\n    --_common-button-icon-size: var(--u-common-button-icon-size, 1.125rem);\n    --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n    --_common-button-icon-margin: var(--u-common-button-icon-margin, 8px);\n    border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    height: var(--u-common-button-height, 40px);\n    font-size: var(--u-common-button-font-size);\n    font-weight: var(--u-common-button-font-weight);\n    padding-inline: var(--_common-button-padding);\n    box-sizing: border-box;\n  }\n\n  :host([variant=filled]),\n  :host([variant=filled][color=primary]) {\n    background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));\n    color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=secondary]) {\n    background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n    color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=tertiary]) {\n    background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));\n    color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=error]) {\n    background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));\n    color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-tonal-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-elevated-button-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  @media (hover: hover) {\n    :host([variant=filled]:hover:not(:focus-within):not(:active)),\n    :host([variant=tonal]:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n    }\n  }\n  :host([variant=outlined]),\n  :host([variant=text]),\n  :host([variant=elevated]) {\n    color: var(--_color-primary);\n  }\n\n  :host([variant=outlined]) {\n    border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n  }\n\n  :host([variant=elevated]) {\n    --u-elevation-level: var(--u-elevated-button-elevation-level, 1);\n  }\n\n  @media (hover: hover) {\n    :host([variant=elevated]:hover) {\n      --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);\n    }\n  }\n  :host([has-icon]) {\n    padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);\n  }\n\n  :host([has-icon][trailing-icon]) {\n    padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);\n  }\n\n  :host(:not([has-icon])) .icon {\n    display: none;\n  }\n\n  .icon {\n    font-size: var(--_common-button-icon-size);\n    padding-inline-end: var(--_common-button-icon-margin);\n    margin-inline-end: auto;\n  }\n\n  :host([trailing-icon]) .icon {\n    padding-inline: var(--_common-button-icon-margin) 0;\n    margin-inline: auto 0;\n  }\n`;\n"]}
+{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../src/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);\n    --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);\n    --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n    --_common-button-height: var(--u-common-button-height, 2.5rem);\n    --_common-button-padding: var(--u-common-button-padding, 24px);\n    --_common-button-icon-size: var(--u-common-button-icon-size, 1.125rem);\n    --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n    --_common-button-icon-margin: var(--u-common-button-icon-margin, 8px);\n    border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    height: var(--u-common-button-height, 40px);\n    font-size: var(--u-common-button-font-size);\n    font-weight: var(--u-common-button-font-weight);\n    padding-inline: var(--_common-button-padding);\n    box-sizing: border-box;\n  }\n\n  :host([variant=filled]),\n  :host([variant=filled][color=primary]) {\n    background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));\n    color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=secondary]) {\n    background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n    color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=tertiary]) {\n    background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));\n    color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=error]) {\n    background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));\n    color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-tonal-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-elevated-button-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  @media (hover: hover) {\n    :host([variant=filled]:hover:not(:focus-within):not(:active)),\n    :host([variant=tonal]:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n    }\n  }\n  :host([variant=text]) {\n    color: var(--u-text-button-text-color, var(--_color-primary));\n  }\n\n  :host([variant=outlined]) {\n    color: var(--u-outlined-button-text-color, var(--u-text-button-text-color, var(--_color-primary)));\n    border: 1px solid var(--u-outlined-button-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n  }\n\n  :host([variant=elevated]) {\n    --u-elevation-level: var(--u-elevated-button-elevation-level, 1);\n    color: var(--u-elevated-button-text-color, var(--_color-primary));\n  }\n\n  :host([disabled][variant=outlined]) {\n    background-color: transparent !important;\n    border-color: var(--u-outlined-button-disabled-border-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-outlined-button-disabled-border-opacity, 0.12))) !important;\n  }\n\n  @media (hover: hover) {\n    :host([variant=elevated]:hover) {\n      --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);\n    }\n  }\n  :host([has-icon]) {\n    padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);\n  }\n\n  :host([has-icon][trailing-icon]) {\n    padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);\n  }\n\n  :host(:not([has-icon])) .icon {\n    display: none;\n  }\n\n  .icon {\n    font-size: var(--_common-button-icon-size);\n    padding-inline-end: var(--_common-button-icon-margin);\n    margin-inline-end: auto;\n  }\n\n  :host([trailing-icon]) .icon {\n    padding-inline: var(--_common-button-icon-margin) 0;\n    margin-inline: auto 0;\n  }\n`;\n"]}

package/button/icon-button.styles.d.ts.map

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

package/button/icon-button.styles.js

@@ -19,10 +19,10 @@ export const styles = css `
     display: none;
   }
 
-  :host([selected]) .icon:not(.icon-selected) {
+  :host([selected][has-selection-icon]) .icon:not(.icon-selected) {
     display: none;
   }
-  :host([selected]) .icon.icon-selected {
+  :host([selected][has-selection-icon]) .icon.icon-selected {
     display: inline-block;
   }
 
@@ -50,11 +50,12 @@ export const styles = css `
 
   :host([variant=standard]),
   :host([variant=outlined]) {
-    color: var(--u-color-on-surface-variant, rgb(73, 69, 79));
+    color: var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
   }
 
   :host([variant=outlined]) {
     border: 1px solid var(--u-color-outline, rgb(121, 116, 126));
+    color: var(--u-outlined-icon-button-color, var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));
   }
 
   :host([selected][variant=outlined]) {
@@ -65,6 +66,12 @@ export const styles = css `
 
   :host([selected][variant=standard]) {
     color: var(--u-standard-icon-button-selected-text-color, var(--_color-primary));
+    background-color: var(--u-standard-icon-button-selected-background-color, transparent);
+  }
+
+  :host([disabled][variant=outlined]) {
+    background-color: transparent !important;
+    border-color: var(--u-outlined-icon-button-disabled-border-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-outlined-icon-button-disabled-border-opacity, 0.12))) !important;
   }
 `;
 //# sourceMappingURL=icon-button.styles.js.map

package/button/icon-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.styles.js","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_icon-button-size: var(--u-icon-button-size, 2.5rem);\n    --_color-surface-container-highest: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n    width: var(--_icon-button-size);\n    height: var(--_icon-button-size);\n    border-radius: var(--u-icon-button-shape-corner, 9999px);\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n  }\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--u-icon-button-icon-size, 1.5rem);\n  }\n  .icon.icon-selected {\n    display: none;\n  }\n\n  :host([selected]) .icon:not(.icon-selected) {\n    display: none;\n  }\n  :host([selected]) .icon.icon-selected {\n    display: inline-block;\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-filled-icon-button-unselected-background-color, var(--_color-surface-container-highest));\n    color: var(--u-filled-icon-button-unselected-text-color, var(--_color-primary));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-total-icon-button-unselected-background-color, var(--_color-surface-container-highest));\n    color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([selected][variant=filled]),\n  :host([variant=filled]:not([has-selection-icon])) {\n    background-color: var(--u-filled-icon-button-background-color, var(--_color-primary));\n    color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([selected][variant=tonal]),\n  :host([variant=tonal]:not([has-selection-icon])) {\n    background-color: var(--u-tonal-icon-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=standard]),\n  :host([variant=outlined]) {\n    color: var(--u-color-on-surface-variant, rgb(73, 69, 79));\n  }\n\n  :host([variant=outlined]) {\n    border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n  }\n\n  :host([selected][variant=outlined]) {\n    border: none;\n    background-color: var(--u-outlined-icon-button-selected-background-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n  }\n\n  :host([selected][variant=standard]) {\n    color: var(--u-standard-icon-button-selected-text-color, var(--_color-primary));\n  }\n`;\n"]}
+{"version":3,"file":"icon-button.styles.js","sourceRoot":"","sources":["../../src/button/icon-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_icon-button-size: var(--u-icon-button-size, 2.5rem);\n    --_color-surface-container-highest: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n    width: var(--_icon-button-size);\n    height: var(--_icon-button-size);\n    border-radius: var(--u-icon-button-shape-corner, 9999px);\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n  }\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--u-icon-button-icon-size, 1.5rem);\n  }\n  .icon.icon-selected {\n    display: none;\n  }\n\n  :host([selected][has-selection-icon]) .icon:not(.icon-selected) {\n    display: none;\n  }\n  :host([selected][has-selection-icon]) .icon.icon-selected {\n    display: inline-block;\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-filled-icon-button-unselected-background-color, var(--_color-surface-container-highest));\n    color: var(--u-filled-icon-button-unselected-text-color, var(--_color-primary));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-total-icon-button-unselected-background-color, var(--_color-surface-container-highest));\n    color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([selected][variant=filled]),\n  :host([variant=filled]:not([has-selection-icon])) {\n    background-color: var(--u-filled-icon-button-background-color, var(--_color-primary));\n    color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([selected][variant=tonal]),\n  :host([variant=tonal]:not([has-selection-icon])) {\n    background-color: var(--u-tonal-icon-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=standard]),\n  :host([variant=outlined]) {\n    color: var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([variant=outlined]) {\n    border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n    color: var(--u-outlined-icon-button-color, var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n  }\n\n  :host([selected][variant=outlined]) {\n    border: none;\n    background-color: var(--u-outlined-icon-button-selected-background-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n  }\n\n  :host([selected][variant=standard]) {\n    color: var(--u-standard-icon-button-selected-text-color, var(--_color-primary));\n    background-color: var(--u-standard-icon-button-selected-background-color, transparent);\n  }\n\n  :host([disabled][variant=outlined]) {\n    background-color: transparent !important;\n    border-color: var(--u-outlined-icon-button-disabled-border-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-outlined-icon-button-disabled-border-opacity, 0.12))) !important;\n  }\n`;\n"]}

package/card/card.styles.d.ts.map

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

package/card/card.styles.js

@@ -6,10 +6,6 @@ export const styles = css `
     border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));
   }
 
-  :host(:not(:first-child)) {
-    margin-top: 8px;
-  }
-
   :host([variant=elevated]) {
     background-color: var(--u-color-surface-container-low, rgb(247, 242, 250));
   }

package/card/card.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../src/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    position: relative;\n    border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host(:not(:first-child)) {\n    margin-top: 8px;\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-color-surface-container-low, rgb(247, 242, 250));\n  }\n  :host([variant=elevated]) u-elevation {\n    --u-elevation-level: var(--u-elevated-card-elevation-level, 1);\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n  }\n\n  :host([variant=outlined]) {\n    border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n  }\n\n  u-card-content,\n  slot {\n    border-radius: inherit;\n  }\n`;\n"]}
+{"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../src/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    position: relative;\n    border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-color-surface-container-low, rgb(247, 242, 250));\n  }\n  :host([variant=elevated]) u-elevation {\n    --u-elevation-level: var(--u-elevated-card-elevation-level, 1);\n  }\n\n  :host([variant=filled]) {\n    background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n  }\n\n  :host([variant=outlined]) {\n    border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n  }\n\n  u-card-content,\n  slot {\n    border-radius: inherit;\n  }\n`;\n"]}

package/checkbox/checkbox-list-item.d.ts

@@ -0,0 +1,11 @@
+import { UmCheckbox } from './checkbox.js';
+declare const UmCheckboxListItem_base: import("../shared/selection-control/selection-control-list-item.js").MixinReturn<typeof UmCheckbox, object>;
+export declare class UmCheckboxListItem extends UmCheckboxListItem_base {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-checkbox-list-item': UmCheckboxListItem;
+    }
+}
+export {};
+//# sourceMappingURL=checkbox-list-item.d.ts.map

package/checkbox/checkbox-list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-list-item.d.ts","sourceRoot":"","sources":["../../src/checkbox/checkbox-list-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;;AAE3C,qBACa,kBAAmB,SAAQ,uBAAyC;CAEhF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}

package/checkbox/checkbox-list-item.js

@@ -0,0 +1,16 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from 'lit/decorators.js';
+import { mixinSelectionControlListItem } from '../shared/selection-control/selection-control-list-item.js';
+import { UmCheckbox } from './checkbox.js';
+let UmCheckboxListItem = class UmCheckboxListItem extends mixinSelectionControlListItem(UmCheckbox) {
+};
+UmCheckboxListItem = __decorate([
+    customElement('u-checkbox-list-item')
+], UmCheckboxListItem);
+export { UmCheckboxListItem };
+//# sourceMappingURL=checkbox-list-item.js.map

package/checkbox/checkbox-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-list-item.js","sourceRoot":"","sources":["../../src/checkbox/checkbox-list-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,6BAA6B,EAAE,MAAM,4DAA4D,CAAC;AAC3G,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGpC,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,6BAA6B,CAAC,UAAU,CAAC;CAEhF,CAAA;AAFY,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAE9B","sourcesContent":["import { customElement } from 'lit/decorators.js';\n\nimport { mixinSelectionControlListItem } from '../shared/selection-control/selection-control-list-item.js';\nimport { UmCheckbox } from './checkbox.js';\n\n@customElement('u-checkbox-list-item')\nexport class UmCheckboxListItem extends mixinSelectionControlListItem(UmCheckbox) {\n\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-checkbox-list-item': UmCheckboxListItem;\n  }\n}\n"]}

package/checkbox/checkbox.d.ts

@@ -1,12 +1,17 @@
-import { HTMLTemplateResult, LitElement } from 'lit';
-export declare class UmCheckbox extends LitElement {
+import { PropertyValues } from '@lit/reactive-element';
+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[];
-    private readonly ripple;
-    private readonly assignedInputs;
-    private input;
-    render(): HTMLTemplateResult;
-    private handleSlotChange;
-    private handleInputChange;
+    hideStateLayer: boolean;
+    get indeterminate(): boolean;
+    set indeterminate(indeterminate: boolean);
+    get checked(): boolean;
+    set checked(checked: boolean);
+    constructor();
+    firstUpdated(changedProperties: PropertyValues): void;
+    protected renderIndicator(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMhE,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BA4BpB;IAEiB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAY;IAEtD,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAsB;IAErD,OAAO,CAAC,KAAK,CAA+B;IAEnC,MAAM,IAAI,kBAAkB;IAOrC,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,iBAAiB,CAIvB;CACH;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;AAI/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAGtF,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"}

package/checkbox/checkbox.js

@@ -4,69 +4,68 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html, LitElement } from 'lit';
-import { customElement, query, queryAssignedElements } from 'lit/decorators.js';
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _UmCheckbox_indeterminate;
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { styles as baseStyles } from '../shared/base.styles.js';
-let UmCheckbox = class UmCheckbox extends LitElement {
+import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
+import { styles } from './checkbox.styles.js';
+let UmCheckbox = class UmCheckbox extends UmSelectionControl {
+    get indeterminate() {
+        return __classPrivateFieldGet(this, _UmCheckbox_indeterminate, "f");
+    }
+    set indeterminate(indeterminate) {
+        __classPrivateFieldSet(this, _UmCheckbox_indeterminate, indeterminate, "f");
+        if (!indeterminate) {
+            this.input?.classList.remove('indeterminate');
+            return;
+        }
+        this.input?.classList.add('indeterminate');
+        this.elementInternals.setFormValue(null);
+    }
+    get checked() {
+        return super.checked;
+    }
+    set checked(checked) {
+        super.checked = checked;
+        this.indeterminate = false;
+    }
     constructor() {
-        super(...arguments);
-        this.handleInputChange = (e) => {
-            if (this.input !== document.elementFromPoint(e.clientX, e.clientY)) {
-                this.ripple.createRipple();
-            }
-        };
+        super();
+        _UmCheckbox_indeterminate.set(this, false);
+        this.hideStateLayer = false;
     }
-    render() {
-        return html `
-      <div class="touch">
-        <u-ripple><slot @slotchange="${this.handleSlotChange}"></slot></u-ripple>
-      </div>`;
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        // eslint-disable-next-line no-self-assign
+        this.indeterminate = this.indeterminate;
     }
-    handleSlotChange() {
-        if (this.input) {
-            this.input.removeEventListener('click', this.handleInputChange);
-        }
-        this.input = this.assignedInputs[0];
-        if (this.input) {
-            this.input.addEventListener('click', this.handleInputChange);
-        }
+    renderIndicator() {
+        return html `<div class="border"><div class="indicator"></div></div>`;
     }
 };
+_UmCheckbox_indeterminate = new WeakMap();
 UmCheckbox.styles = [
     baseStyles,
-    css `
-      :host {
-        position: relative;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        width: 48px;
-        height: 48px;
-      }
-      
-      ::slotted(input) {
-        position: relative;
-        padding: 0;
-        margin: 0;
-        aspect-ratio: 1;
-        height: 100%;
-        z-index: 1;
-        appearance: none;
-      }
-      
-      .touch {
-        position: absolute;
-        inset: 0;
-        border-radius: 9999px;
-      }
-    `
+    styles
 ];
 __decorate([
-    query('u-ripple')
-], UmCheckbox.prototype, "ripple", void 0);
+    property({ type: Boolean, attribute: 'hide-state-layer', reflect: true })
+], UmCheckbox.prototype, "hideStateLayer", void 0);
 __decorate([
-    queryAssignedElements({ selector: 'input', flatten: true })
-], UmCheckbox.prototype, "assignedInputs", void 0);
+    property({ type: Boolean })
+], UmCheckbox.prototype, "indeterminate", null);
 UmCheckbox = __decorate([
     customElement('u-checkbox')
 ], UmCheckbox);

package/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/checkbox/checkbox.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAGhF,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGzD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAyDG,sBAAiB,GAAG,CAAC,CAAa,EAAE,EAAE;YAC5C,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC;gBACnE,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC;YAC7B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC;IAzBU,MAAM;QACb,OAAO,IAAI,CAAA;;uCAEwB,IAAI,CAAC,gBAAgB;aAC/C,CAAC;IACZ,CAAC;IAEO,gBAAgB;QAEtB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAClE,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC/D,CAAC;IACH,CAAC;;AAtDe,iBAAM,GAAG;IACvB,UAAU;IACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBF;CACF,AA5BqB,CA4BpB;AAEkC;IAAnC,KAAK,CAAC,UAAU,CAAC;0CAAoC;AAErC;IADhB,qBAAqB,CAAC,EAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;kDACL;AAjC1C,UAAU;IADtB,aAAa,CAAC,YAAY,CAAC;GACf,UAAU,CA8DtB","sourcesContent":["import { css, html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { UmRipple } from '../ripple/ripple.js';\nimport { styles as baseStyles } from '../shared/base.styles.js';\n\n@customElement('u-checkbox')\nexport class UmCheckbox extends LitElement {\n  static override styles = [\n    baseStyles,\n    css`\n      :host {\n        position: relative;\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        width: 48px;\n        height: 48px;\n      }\n      \n      ::slotted(input) {\n        position: relative;\n        padding: 0;\n        margin: 0;\n        aspect-ratio: 1;\n        height: 100%;\n        z-index: 1;\n        appearance: none;\n      }\n      \n      .touch {\n        position: absolute;\n        inset: 0;\n        border-radius: 9999px;\n      }\n    `\n  ];\n\n  @query('u-ripple') private readonly ripple!: UmRipple;\n  @queryAssignedElements({selector: 'input', flatten: true})\n  private readonly assignedInputs!: HTMLInputElement[];\n\n  private input: HTMLInputElement | undefined;\n\n  override render(): HTMLTemplateResult {\n    return html`\n      <div class=\"touch\">\n        <u-ripple><slot @slotchange=\"${this.handleSlotChange}\"></slot></u-ripple>\n      </div>`;\n  }\n\n  private handleSlotChange(): void {\n\n    if (this.input) {\n      this.input.removeEventListener('click', this.handleInputChange);\n    }\n\n    this.input = this.assignedInputs[0];\n\n    if (this.input) {\n      this.input.addEventListener('click', this.handleInputChange);\n    }\n  }\n\n  private handleInputChange = (e: MouseEvent) => {\n    if (this.input !== document.elementFromPoint(e.clientX, e.clientY)) {\n      this.ripple.createRipple();\n    }\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,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AACtF,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGvC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,kBAAkB;IAWhD,IAAI,aAAa;QACf,OAAO,uBAAA,IAAI,iCAAe,CAAC;IAC7B,CAAC;IACD,IAAI,aAAa,CAAC,aAAsB;QACtC,uBAAA,IAAI,6BAAkB,aAAa,MAAA,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,oCAAiB,KAAK,EAAC;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;;;AA7Ce,iBAAM,GAAG;IACvB,UAAU;IACV,MAAM;CACP,AAHqB,CAGpB;AAIuE;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 { UmSelectionControl } from '../shared/selection-control/selection-control.js';\nimport { styles } from './checkbox.styles.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"]}

package/{container/container.styles.d.ts → checkbox/checkbox.styles.d.ts}

@@ -1,2 +1,2 @@
 export declare const styles: import("lit").CSSResult;
-//# sourceMappingURL=container.styles.d.ts.map
+//# sourceMappingURL=checkbox.styles.d.ts.map

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

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

package/checkbox/checkbox.styles.js

@@ -0,0 +1,126 @@
+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;
+  }
+
+  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-unselected-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-size, 1.125rem);
+    --_width: var(--u-checkbox-size, 3rem);
+    --_height: var(--_width);
+  }
+
+  .border {
+    width: var(--_indicator-size);
+    height: var(--_indicator-size);
+    box-shadow: 0 0 0 var(--u-checkbox-indicator-border-width, 0.125rem) var(--_indicator-color) inset;
+    border-radius: var(--u-checkbox-indicator-shaper-coner, 2px);
+    transition: box-shadow 175ms 175ms;
+  }
+
+  .indicator {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    width: var(--_indicator-size);
+    height: var(--_indicator-size);
+    overflow: hidden;
+    clip: rect(0, 0, var(--_indicator-size), 0);
+    transition: clip 275ms;
+  }
+  .indicator::before {
+    position: relative;
+    top: 25%;
+    box-sizing: border-box;
+    display: block;
+    width: 0.75rem;
+    height: 0.35rem;
+    content: "";
+    border: var(--u-checkbox-indicator-border-width, 0.125rem) solid var(--u-color-on-primary);
+    border-top-style: none;
+    border-right-style: none;
+    transform: rotate(-45deg);
+    transition: border 175ms, transform 175ms;
+  }
+
+  input.indeterminate ~ .indicator-container .border,
+  input:checked ~ .indicator-container .border {
+    box-shadow: 0 0 0 calc(var(--_indicator-size) / 2) var(--_indicator-color) inset;
+    transition: box-shadow 175ms;
+  }
+  input.indeterminate ~ .indicator-container .indicator,
+  input:checked ~ .indicator-container .indicator {
+    clip: rect(0, var(--_indicator-size), var(--_indicator-size), 0);
+    transition: clip 175ms 175ms;
+  }
+
+  input.indeterminate ~ .indicator-container {
+    --_indicator-color: var(--u-checkbox-indicator-indeterminate-color, var(--u-color-primary, rgb(103, 80, 164)));
+  }
+  input.indeterminate ~ .indicator-container .indicator::before {
+    border-left-style: none;
+    transform: rotate(0);
+    width: 0.6rem;
+  }
+`;
+//# sourceMappingURL=checkbox.styles.js.map

package/checkbox/checkbox.styles.js.map

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2HzB,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  }\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-unselected-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-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);\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"]}

package/config.d.ts

@@ -1,4 +1,7 @@
 export declare const config: {
+    fields: {
+        defaultAppearance: "filled" | "outlined";
+    };
     navigationDrawer: {
         useSwiperJs: boolean;
     };

package/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,MAAM;;;;CAAU,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,MAAM;;;;;;;CAAU,CAAC"}

package/config.js

@@ -1,4 +1,7 @@
 const _config = {
+    fields: {
+        defaultAppearance: 'filled'
+    },
     navigationDrawer: {
         useSwiperJs: false
     }

package/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,GAAG;IACd,gBAAgB,EAAE;QAChB,WAAW,EAAE,KAAK;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC","sourcesContent":["const _config = {\n  navigationDrawer: {\n    useSwiperJs: false\n  }\n};\n\nexport const config = _config;\n"]}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,GAAG;IACd,MAAM,EAAE;QACN,iBAAiB,EAAE,QAAiC;KACrD;IACD,gBAAgB,EAAE;QAChB,WAAW,EAAE,KAAK;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC","sourcesContent":["const _config = {\n  fields: {\n    defaultAppearance: 'filled' as 'filled' | 'outlined'\n  },\n  navigationDrawer: {\n    useSwiperJs: false\n  }\n};\n\nexport const config = _config;\n"]}