@universal-material/web 3.0.27 → 3.0.29

package/scss/mixins/_breakpoints.scss

@@ -1,10 +1,29 @@
+@use "sass:map";
+
 @use "../variables";
 
+@function breakpoint-next($name) {
+  $breakpoint-names: map.keys(variables.$breakpoints);
+
+  $n: index($breakpoint-names, $name);
+
+  @if not $n {
+    @return null;
+  }
+
+  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
 @function breakpoint-min($name) {
-  $min: map-get(variables.$breakpoints, $name);
+  $min: map.get(variables.$breakpoints, $name);
   @return if($min != 0, $min, null);
 }
 
+@function breakpoint-max($name) {
+  $next: breakpoint-next($name);
+  @return if($next, breakpoint-min($next) - .02px, null);
+}
+
 @function breakpoint-infix($name) {
   @return if(breakpoint-min($name) == null, "", "-#{$name}");
 }
@@ -19,3 +38,34 @@
     @content;
   }
 }
+
+@mixin media-breakpoint-down($name) {
+  $max: breakpoint-max($name);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin media-breakpoint-only($name) {
+  $min:  breakpoint-min($name);
+  $next: breakpoint-next($name);
+  $max:  breakpoint-min($next);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($name) {
+      @content;
+    }
+  }
+}

package/scss/mixins/_text-bg.scss

@@ -1,7 +1,8 @@
 @use "sass:string";
 
-@mixin _current-color-vars-important($current-color-rgb) {
-  --u-current-text-color-rgb: #{$current-color-rgb} !important;
+@mixin _current-color-vars-important($current-color-var-name) {
+  --u-current-text-color: var(#{$current-color-var-name}) !important;
+  --u-current-text-color-rgb: var(#{$current-color-var-name}-rgb) !important;
   --u-text-opacity: 1;
   color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity)) !important;
 }
@@ -24,10 +25,7 @@
   }
 
   .u-text-bg-#{$color-name} {
-    @include _current-color-vars-important(var(--u-color-#{$on-color-name}-rgb));
+    @include _current-color-vars-important(--u-color-#{$on-color-name});
     background-color: var(--u-color-#{$color-name}) !important;
-
-    --u-divider-color: rgb(var(--u-current-text-color-rgb)) !important;
-    --u-divider-opacity: .4 !important;
   }
 }

package/scss/mixins/_typo.scss

@@ -12,6 +12,7 @@
     font-family: var(--u-font-family, #{functions.get-font-family-var()});
   } @else {
     font-family: var(--u-font-family);
+    color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity));
   }
 
   $props: map.get(variables.$typography-styles, $style);
@@ -24,3 +25,20 @@
     }
   }
 }
+
+
+@mixin typo-prop($style, $prop, $target-name: null) {
+  @if not map.has-key(variables.$typography-styles, $style) {
+    @error "Invalid style specified! #{$style} doesn't exist. Choose one of #{map.keys(variables.$typography-styles)}";
+  }
+
+  $props: map.get(variables.$typography-styles, $style);
+
+  $value: map.get($props, $prop);
+
+  @if $target-name != null {
+    #{$prop}: var(--u-#{$target-name}-#{$prop}, var(--u-#{$style}-#{$prop}, #{$value}));
+  } @else {
+    #{$prop}: var(--u-#{$style}-#{$prop});
+  }
+}

package/scss/table/_table.scss

@@ -0,0 +1,47 @@
+@use "../functions";
+
+:root {
+  --u-table-hover-opacity: var(--u-state-layer-hover-opacity);
+  --u-table-cell-padding: 13px 16px;
+  --u-table-cell-font-weight: #{functions.get-font-weight-var(medium)};
+}
+
+.u-table {
+  min-width: 100%;
+  border-collapse: collapse;
+  font-family: var(--u-font-family, #{functions.get-font-family-var()});
+
+  > tbody > tr,
+  > thead > tr,
+  > tfoot > tr,
+  > tr {
+    &:not(:first-child) {
+      border-top: 1px solid rgba(var(--u-current-text-color-rgb), var(--u-table-divider-opacity, .2));
+    }
+
+    > td {
+      padding: var(--u-td-padding, var(--u-table-cell-padding));
+      font-size: var(--u-td-font-size, .875rem);
+      font-weight: var(--u-td-font-weight, var(--u-table-cell-font-weight));
+      text-align: start;
+    }
+
+    > th {
+      --u-text-opacity: var(--u-low-emphasis-opacity);
+      padding: var(--u-th-padding, var(--u-table-cell-padding));
+      font-size: var(--u-th-font-size, .8125rem);
+      font-weight: var(--u-th-font-weight, var(--u-table-cell-font-weight));
+      color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity));
+      text-align: start;
+    }
+  }
+}
+
+.u-table-hover {
+  > tbody > tr,
+  > tr {
+    &:hover {
+      background-color: rgba(var(--u-current-text-color-rgb), var(--u-table-hover-opacity));
+    }
+  }
+}

package/scss/universal-material.scss

@@ -1,7 +1,14 @@
+@import "variables";
 @import "css-vars";
-@import "common";
-@import "data-table/data-table";
-@import "text-bg/text-bg";
-@import "text-bg/text";
+@import "colors";
+@import "layout";
+@import "utilities";
+@import "table/table";
 @import "typo/font";
 @import "typo/typo";
+
+@import "reboot";
+
+@if $include-reboot {
+  @include reboot;
+}

package/scss/utilities/_divider.scss

@@ -0,0 +1,13 @@
+@use "../api";
+
+.u-divider,
+.u-divider-no-margin {
+  display: block;
+  height: var(--u-divider-thickness, 1px);
+  background-color: var(--u-divider-color, var(--u-current-text-color));
+  opacity: var(--u-divider-opacity, .4);
+}
+
+.u-divider {
+  margin-block: 8px;
+}

package/scss/utilities/_spacing.scss

@@ -0,0 +1,23 @@
+@use "sass:list";
+@use "sass:map";
+
+@use "../variables";
+@use "../api";
+
+@each $breakpoint in map.keys(variables.$breakpoints) {
+  $infix: api.breakpoint-infix($breakpoint);
+
+  @each $spacing in map.keys(variables.$spacings) {
+    @each $side, $value in variables.$spacing-sides {
+      @include api.media-breakpoint-up($breakpoint) {
+        .u-m#{$side}#{$infix}-#{$spacing} {
+          margin#{$value}: var(--u-spacing-#{$spacing});
+        }
+
+        .u-p#{$side}#{$infix}-#{$spacing} {
+          padding#{$value}: var(--u-spacing-#{$spacing});
+        }
+      }
+    }
+  }
+}

package/scss/utilities/_text.scss

@@ -0,0 +1,21 @@
+@use "../variables";
+
+.u-text-high-emphasis {
+  --u-text-opacity: var(--u-high-emphasis-opacity);
+  color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity)) !important;
+}
+.u-text-low-emphasis {
+  --u-text-opacity: var(--u-low-emphasis-opacity);
+  color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity)) !important;
+}
+
+.u-text-lower-emphasis {
+  --u-text-opacity: var(--u-lower-emphasis-opacity);
+  color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity)) !important;
+}
+
+@each $weight, $value in variables.$font-weights {
+  .u-font-weight-#{$weight} {
+    font-weight: var(--u-font-weight-#{$weight}) !important;
+  }
+}

package/shared/base.styles.js

@@ -7,21 +7,21 @@ export const styles = css `
     outline: 0;
   }
 
-  *:focus-visible {
-    animation: u-focus-pulse 400ms ease;
+  .focus-ring:focus-visible {
+    animation: u-focus-pulse 500ms ease;
     animation-fill-mode: forwards;
     outline-offset: 2px;
   }
 
   @keyframes u-focus-pulse {
     0% {
-      outline: 2px solid var(--u-color-primary);
+      outline: 0 solid var(--u-color-primary);
     }
     50% {
-      outline: 4px solid var(--u-color-primary);
+      outline: 6px solid var(--u-color-primary);
     }
     100% {
-      outline: 2px solid var(--u-color-primary);
+      outline: 4px solid var(--u-color-primary);
     }
   }
 `;

package/shared/base.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.styles.js","sourceRoot":"","sources":["../../src/shared/base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CAyBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  * {\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    box-sizing: border-box;\n    outline: 0;\n  }\n\n  *:focus-visible {\n    animation: u-focus-pulse 400ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 2px solid var(--u-color-primary);\n    }\n    50% {\n      outline: 4px solid var(--u-color-primary);\n    }\n    100% {\n      outline: 2px solid var(--u-color-primary);\n    }\n  }\n`;\n"]}
+{"version":3,"file":"base.styles.js","sourceRoot":"","sources":["../../src/shared/base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CAyBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  * {\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    box-sizing: border-box;\n    outline: 0;\n  }\n\n  .focus-ring:focus-visible {\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--u-color-primary);\n    }\n    50% {\n      outline: 6px solid var(--u-color-primary);\n    }\n    100% {\n      outline: 4px solid var(--u-color-primary);\n    }\n  }\n`;\n"]}

package/shared/button-wrapper.d.ts

@@ -18,8 +18,9 @@ export declare abstract class UmButtonWrapper extends LitElement {
     name: string | undefined;
     private readonly buttonElement;
     private readonly ripple;
+    protected innerRole: string | null;
     get pathname(): string;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): HTMLTemplateResult;
     private renderButton;
     private renderLink;
     protected abstract renderContent(): HTMLTemplateResult;

package/shared/button-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-wrapper.d.ts","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpE,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAG7B,8BAAsB,eAAgB,SAAQ,UAAU;IAEtD;;OAEG;IACuC,QAAQ,UAAS;IAE3D;;OAEG;IACS,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAErC;;;OAGG;IACS,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAe;IAC5C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAY;IAEtD,IAAI,QAAQ,IAAI,MAAM,CAErB;cAEkB,MAAM;IAMzB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,UAAU;IAclB,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;IAE7C,iBAAiB;IAOjB,oBAAoB;IAOpB,KAAK;IAIL,IAAI;IAKb,SAAS,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI,GAAG,OAAO,OAAO;IAIxD,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,iBAAiB;IAazB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CAGxC"}
+{"version":3,"file":"button-wrapper.d.ts","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpE,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAG7B,8BAAsB,eAAgB,SAAQ,UAAU;IAEtD;;OAEG;IACuC,QAAQ,UAAS;IAE3D;;OAEG;IACS,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAErC;;;OAGG;IACS,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAe;IAC5C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAY;IAEtD,SAAS,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1C,IAAI,QAAQ,IAAI,MAAM,CAErB;cAEkB,MAAM,IAAI,kBAAkB;IAM/C,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,UAAU;IAgBlB,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;IAE7C,iBAAiB;IAOjB,oBAAoB;IAOpB,KAAK;IAIL,IAAI;IAKb,SAAS,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI,GAAG,OAAO,OAAO;IAKxD,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,iBAAiB;IAazB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CAGxC"}

package/shared/button-wrapper.js

@@ -15,6 +15,7 @@ export class UmButtonWrapper extends LitElement {
          * Whether the button is disabled or not.
          */
         this.disabled = false;
+        this.innerRole = null;
     }
     get pathname() {
         return this.buttonElement?.pathname;
@@ -30,7 +31,9 @@ export class UmButtonWrapper extends LitElement {
         id="button"
         class="button"
         ?disabled=${this.disabled}
-        aria-label="${this.getAriaLabel()}"
+        aria-label=${this.ariaLabel || nothing}
+        aria-labelledby="${this.ariaLabel ? nothing : 'text'}"
+        .role=${this.innerRole}
         type="button">
         <u-ripple ?disabled=${this.disabled}></u-ripple>
         <u-elevation></u-elevation>
@@ -43,7 +46,9 @@ export class UmButtonWrapper extends LitElement {
       class="button"
       href=${this.disabled ? nothing : this.href}
       aria-disabled=${this.disabled || nothing}
-      aria-label="${this.getAriaLabel()}"
+      aria-label=${this.ariaLabel || nothing}
+      aria-labelledby="${this.ariaLabel ? nothing : 'text'}"
+      .role=${this.innerRole}
       target=${this.target || nothing}>
       <u-elevation></u-elevation>
       <u-ripple ?disabled=${this.disabled}></u-ripple>
@@ -67,6 +72,7 @@ export class UmButtonWrapper extends LitElement {
         this.buttonElement?.blur();
     }
     getAriaLabel() {
+        console.log(this.ariaLabel);
         return this.ariaLabel || nothing;
     }
     innerFocusHandler() {

package/shared/button-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-wrapper.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport '../elevation/elevation.js';\nimport '../ripple/ripple.js';\nimport { UmRipple } from '../ripple/ripple.js';\n\nexport abstract class UmButtonWrapper extends LitElement {\n\n  /**\n   * Whether the button is disabled or not.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href: string | undefined;\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: string | undefined;\n\n  @property() name: string | undefined;\n\n  @query('.button') private readonly buttonElement!: HTMLElement;\n  @query('u-ripple') private readonly ripple!: UmRipple;\n\n  get pathname(): string {\n    return (<HTMLAnchorElement>this.buttonElement)?.pathname\n  }\n\n  protected override render() {\n    return typeof this.href === 'string'\n      ? this.renderLink()\n      : this.renderButton();\n  }\n\n  private renderButton() {\n    return html`\n      <button\n        id=\"button\"\n        class=\"button\"\n        ?disabled=${this.disabled}\n        aria-label=\"${this.getAriaLabel()}\"\n        type=\"button\">\n        <u-ripple ?disabled=${this.disabled}></u-ripple>\n        <u-elevation></u-elevation>\n      </button>\n      <div class=\"content\">${this.renderContent()}</div>`;\n\n  }\n\n  private renderLink() {\n    return html`<a\n      id=\"link\"\n      class=\"button\"\n      href=${this.disabled ? nothing : this.href}\n      aria-disabled=${this.disabled || nothing}\n      aria-label=\"${this.getAriaLabel()}\"\n      target=${this.target || nothing}>\n      <u-elevation></u-elevation>\n      <u-ripple ?disabled=${this.disabled}></u-ripple>\n    </a>\n    <div class=\"content\">${this.renderContent()}</div>`;\n  }\n\n  protected abstract renderContent(): HTMLTemplateResult;\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('click', this.innerClickHandler);\n    this.addEventListener('focus', this.innerFocusHandler)\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('click', this.innerClickHandler);\n    this.removeEventListener('focus', this.innerFocusHandler);\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n\n    this.buttonElement?.blur();\n  }\n\n  protected getAriaLabel(): string | null | typeof nothing {\n    return this.ariaLabel || nothing;\n  }\n\n  private innerFocusHandler(): void {\n    const tabIndexAttributeValue = this.getAttribute('tabindex');\n\n    if (tabIndexAttributeValue !== \"0\") {\n      return;\n    }\n \n    this.removeAttribute('tabindex');\n    setTimeout(() => this.buttonElement?.focus());\n  }\n\n  private innerClickHandler(event: MouseEvent): void {\n\n    if (this.disabled) {\n      return;\n    }\n\n    if (!(<PointerEvent>event).pointerType) {\n      this.ripple.createRipple();\n    }\n\n    this.handleClick(event);\n  }\n\n  protected handleClick(_: UIEvent): void {\n\n  }\n}\n"]}
+{"version":3,"file":"button-wrapper.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport '../elevation/elevation.js';\nimport '../ripple/ripple.js';\nimport { UmRipple } from '../ripple/ripple.js';\n\nexport abstract class UmButtonWrapper extends LitElement {\n\n  /**\n   * Whether the button is disabled or not.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href: string | undefined;\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: string | undefined;\n\n  @property() name: string | undefined;\n\n  @query('.button') private readonly buttonElement!: HTMLElement;\n  @query('u-ripple') private readonly ripple!: UmRipple;\n\n  protected innerRole: string | null = null;\n\n  get pathname(): string {\n    return (<HTMLAnchorElement>this.buttonElement)?.pathname\n  }\n\n  protected override render(): HTMLTemplateResult {\n    return typeof this.href === 'string'\n      ? this.renderLink()\n      : this.renderButton();\n  }\n\n  private renderButton() {\n    return html`\n      <button\n        id=\"button\"\n        class=\"button\"\n        ?disabled=${this.disabled}\n        aria-label=${this.ariaLabel || nothing}\n        aria-labelledby=\"${this.ariaLabel ? nothing : 'text'}\"\n        .role=${this.innerRole}\n        type=\"button\">\n        <u-ripple ?disabled=${this.disabled}></u-ripple>\n        <u-elevation></u-elevation>\n      </button>\n      <div class=\"content\">${this.renderContent()}</div>`;\n\n  }\n\n  private renderLink() {\n    return html`<a\n      id=\"link\"\n      class=\"button\"\n      href=${this.disabled ? nothing : this.href}\n      aria-disabled=${this.disabled || nothing}\n      aria-label=${this.ariaLabel || nothing}\n      aria-labelledby=\"${this.ariaLabel ? nothing : 'text'}\"\n      .role=${this.innerRole}\n      target=${this.target || nothing}>\n      <u-elevation></u-elevation>\n      <u-ripple ?disabled=${this.disabled}></u-ripple>\n    </a>\n    <div class=\"content\">${this.renderContent()}</div>`;\n  }\n\n  protected abstract renderContent(): HTMLTemplateResult;\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('click', this.innerClickHandler);\n    this.addEventListener('focus', this.innerFocusHandler)\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('click', this.innerClickHandler);\n    this.removeEventListener('focus', this.innerFocusHandler);\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n\n    this.buttonElement?.blur();\n  }\n\n  protected getAriaLabel(): string | null | typeof nothing {\n    console.log(this.ariaLabel);\n    return this.ariaLabel || nothing;\n  }\n\n  private innerFocusHandler(): void {\n    const tabIndexAttributeValue = this.getAttribute('tabindex');\n\n    if (tabIndexAttributeValue !== \"0\") {\n      return;\n    }\n \n    this.removeAttribute('tabindex');\n    setTimeout(() => this.buttonElement?.focus());\n  }\n\n  private innerClickHandler(event: MouseEvent): void {\n\n    if (this.disabled) {\n      return;\n    }\n\n    if (!(<PointerEvent>event).pointerType) {\n      this.ripple.createRipple();\n    }\n\n    this.handleClick(event);\n  }\n\n  protected handleClick(_: UIEvent): void {\n\n  }\n}\n"]}

package/shared/button-wrapper.styles.js

@@ -12,8 +12,8 @@ export const styles = css `
 
   :host([disabled]) {
     --u-elevation-level: 0 !important;
-    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), 0.12)) !important;
-    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), 0.38)) !important;
+    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-background-opacity, 0.12))) !important;
+    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 0.38))) !important;
   }
 
   :host([disabled]) .button {

package/shared/button-wrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-wrapper.styles.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    -webkit-tap-highlight-color: transparent;\n    --u-elevation-level: 0;\n    position: relative;\n    display: inline-block;\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    appearance: none !important;\n  }\n\n  :host([disabled]) {\n    --u-elevation-level: 0 !important;\n    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), 0.12)) !important;\n    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), 0.38)) !important;\n  }\n\n  :host([disabled]) .button {\n    cursor: default;\n  }\n\n  * {\n    color: inherit;\n  }\n\n  u-elevation {\n    z-index: -1;\n  }\n\n  .button {\n    cursor: pointer;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\n    font-family: inherit;\n    border-radius: inherit;\n    color: inherit;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-align: center;\n    white-space: nowrap;\n    background: transparent;\n    user-select: none;\n    text-decoration: none;\n    outline: 0;\n    z-index: 0;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    width: 100%;\n    height: 100%;\n  }\n\n  .button:focus-visible {\n    animation: offset-pulse 400ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1em;\n  }\n\n  ::slotted([slot=icon]) {\n    display: inline-block;\n  }\n\n  @keyframes offset-pulse {\n    0% {\n      outline: 4px solid var(--_color-primary);\n    }\n    50% {\n      outline: 8px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n`;\n"]}
+{"version":3,"file":"button-wrapper.styles.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    -webkit-tap-highlight-color: transparent;\n    --u-elevation-level: 0;\n    position: relative;\n    display: inline-block;\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    appearance: none !important;\n  }\n\n  :host([disabled]) {\n    --u-elevation-level: 0 !important;\n    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-background-opacity, 0.12))) !important;\n    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-button-disabled-color, 0.38))) !important;\n  }\n\n  :host([disabled]) .button {\n    cursor: default;\n  }\n\n  * {\n    color: inherit;\n  }\n\n  u-elevation {\n    z-index: -1;\n  }\n\n  .button {\n    cursor: pointer;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\n    font-family: inherit;\n    border-radius: inherit;\n    color: inherit;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-align: center;\n    white-space: nowrap;\n    background: transparent;\n    user-select: none;\n    text-decoration: none;\n    outline: 0;\n    z-index: 0;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    width: 100%;\n    height: 100%;\n  }\n\n  .button:focus-visible {\n    animation: offset-pulse 400ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1em;\n  }\n\n  ::slotted([slot=icon]) {\n    display: inline-block;\n  }\n\n  @keyframes offset-pulse {\n    0% {\n      outline: 4px solid var(--_color-primary);\n    }\n    50% {\n      outline: 8px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n`;\n"]}

package/shared/selection-control/selection-control-list-item.d.ts

@@ -0,0 +1,5 @@
+import { UmSelectionControl } from './selection-control.js';
+export type MixinBase<ExpectedBase = object> = abstract new (...args: any[]) => ExpectedBase;
+export type MixinReturn<MixinBase, MixinClass = object> = (abstract new (...args: any[]) => MixinClass) & MixinBase;
+export declare const mixinSelectionControlListItem: <T extends MixinBase<UmSelectionControl>>(base: T) => MixinReturn<T, object>;
+//# sourceMappingURL=selection-control-list-item.d.ts.map

package/shared/selection-control/selection-control-list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-control-list-item.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control-list-item.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,MAAM,MAAM,SAAS,CAAC,YAAY,GAAG,MAAM,IAAI,QAAQ,MAGrD,GAAG,IAAI,EAAE,GAAG,EAAE,KACX,YAAY,CAAC;AAElB,MAAM,MAAM,WAAW,CAAC,SAAS,EAAE,UAAU,GAAG,MAAM,IAGpD,CAAC,QAAQ,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,UAAU,CAAC,GAAG,SAAS,CAAC;AAG5D,eAAO,MAAM,6BAA6B,8EAuBzC,CAAA"}

package/shared/selection-control/selection-control-list-item.js

@@ -0,0 +1,25 @@
+import { css, html } from 'lit';
+// @ts-ignore
+export const mixinSelectionControlListItem = (base) => {
+    // @ts-ignore
+    class SelectionControlListItem extends base {
+        render() {
+            return html `
+        <u-list-item ?selectable=${!this.disabled}>
+          <slot></slot>
+          <div slot="trailing">
+            ${super.render()}
+          </div>
+        </u-list-item>`;
+        }
+    }
+    SelectionControlListItem.styles = [
+        base.styles ?? [],
+        css `:host {
+        --u-list-item-block-padding: 0;
+        display: block;
+      }`
+    ];
+    return SelectionControlListItem;
+};
+//# sourceMappingURL=selection-control-list-item.js.map

package/shared/selection-control/selection-control-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-control-list-item.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAehE,aAAa;AACb,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAA0C,IAAO,EAAkB,EAAE;IAChH,aAAa;IACb,MAAe,wBAAyB,SAAQ,IAAI;QASzC,MAAM;YACb,OAAO,IAAI,CAAA;mCACkB,CAAC,IAAI,CAAC,QAAQ;;;cAGnC,KAAK,CAAC,MAAM,EAAE;;uBAEL,CAAC;QACpB,CAAC;;IAhBM,+BAAM,GAAG;QACb,IAAqC,CAAC,MAAM,IAAI,EAAE;QACnD,GAAG,CAAA;;;QAGD;KACH,CAAC;IAaJ,OAAO,wBAAwB,CAAC;AAClC,CAAC,CAAA","sourcesContent":["import { css, html, HTMLTemplateResult, LitElement } from 'lit';\n\nimport { UmSelectionControl } from './selection-control.js';\n\nexport type MixinBase<ExpectedBase = object> = abstract new (\n  // Mixins must have a constructor with `...args: any[]`\n  // @ts-ignore\n  ...args: any[]\n) => ExpectedBase;\n\nexport type MixinReturn<MixinBase, MixinClass = object> =\n// Mixins must have a constructor with `...args: any[]`\n// tslint:disable-next-line:no-any\n  (abstract new (...args: any[]) => MixinClass) & MixinBase;\n\n// @ts-ignore\nexport const mixinSelectionControlListItem = <T extends MixinBase<UmSelectionControl>>(base: T): MixinReturn<T> => {\n  // @ts-ignore\n  abstract class SelectionControlListItem extends base {\n    static styles = [\n      (base as unknown as typeof LitElement).styles ?? [],\n      css`:host {\n        --u-list-item-block-padding: 0;\n        display: block;\n      }`\n    ];\n\n    override render(): HTMLTemplateResult {\n      return html`\n        <u-list-item ?selectable=${!this.disabled}>\n          <slot></slot>\n          <div slot=\"trailing\">\n            ${super.render()}\n          </div>\n        </u-list-item>`;\n    }\n  }\n\n  return SelectionControlListItem;\n}\n"]}

package/shared/selection-control/selection-control.d.ts

@@ -0,0 +1,25 @@
+import { HTMLTemplateResult, LitElement } from 'lit';
+import '../../ripple/ripple.js';
+export declare abstract class UmSelectionControl extends LitElement {
+    #private;
+    static readonly formAssociated = true;
+    protected readonly elementInternals: ElementInternals;
+    name: string | undefined;
+    disabled: boolean;
+    input: HTMLInputElement;
+    get form(): HTMLFormElement | null;
+    protected inputType: 'checkbox' | 'radio';
+    protected renderRipple: boolean;
+    protected abstract renderIndicator(): HTMLTemplateResult;
+    /**
+     * The element value to use in form submission when checked.
+     */
+    value: string;
+    get checked(): boolean;
+    set checked(value: boolean);
+    protected constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): HTMLTemplateResult;
+}
+//# sourceMappingURL=selection-control.d.ts.map

package/shared/selection-control/selection-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-control.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAGpE,OAAO,wBAAwB,CAAC;AAEhC,8BAAsB,kBAAmB,SAAQ,UAAU;;IACzD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IAE1C,IAAI,EAAE,MAAM,GAAG,SAAS,CAAM;IACA,QAAQ,UAAS;IAC3C,KAAK,EAAG,gBAAgB,CAAC;IAKzC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAGD,SAAS,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAc;IACvD,SAAS,CAAC,YAAY,UAAQ;IAE9B,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,kBAAkB;IAExD;;OAEG;IACS,KAAK,SAAQ;IAEzB,IACI,OAAO,IAGQ,OAAO,CADzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAIzB;IAED,SAAS;IAKA,iBAAiB;IAKjB,oBAAoB;cAKV,MAAM,IAAI,kBAAkB;CAoBhD"}

package/shared/selection-control/selection-control.js

@@ -0,0 +1,93 @@
+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;
+};
+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 _UmSelectionControl_instances, _UmSelectionControl_checked, _UmSelectionControl_handleClick;
+import { html, LitElement, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import '../../ripple/ripple.js';
+export class UmSelectionControl extends LitElement {
+    // eslint-disable-next-line
+    // #value: any = '';
+    get form() {
+        return this.elementInternals.form;
+    }
+    get checked() {
+        return __classPrivateFieldGet(this, _UmSelectionControl_checked, "f");
+    }
+    set checked(value) {
+        console.log(value);
+        __classPrivateFieldSet(this, _UmSelectionControl_checked, value, "f");
+        this.elementInternals.setFormValue(value ? this.value : null);
+    }
+    constructor() {
+        super();
+        _UmSelectionControl_instances.add(this);
+        this.name = '';
+        this.disabled = false;
+        _UmSelectionControl_checked.set(this, false);
+        this.inputType = 'checkbox';
+        this.renderRipple = true;
+        /**
+         * The element value to use in form submission when checked.
+         */
+        this.value = 'on';
+        this.elementInternals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', __classPrivateFieldGet(this, _UmSelectionControl_instances, "m", _UmSelectionControl_handleClick));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', __classPrivateFieldGet(this, _UmSelectionControl_instances, "m", _UmSelectionControl_handleClick));
+    }
+    render() {
+        const ripple = html `<u-ripple ?disabled=${this.disabled}></u-ripple>`;
+        return html `
+      <div class="container">
+        ${this.renderRipple ? ripple : nothing}
+        <input
+          type=${this.inputType}
+          class="focus-ring"
+          ?name=${this.name}
+          .checked=${__classPrivateFieldGet(this, _UmSelectionControl_checked, "f")}
+          .disabled=${this.disabled} />
+        <div class="indicator-container">${this.renderIndicator()}</div>
+      </div>`;
+    }
+}
+_UmSelectionControl_checked = new WeakMap(), _UmSelectionControl_instances = new WeakSet(), _UmSelectionControl_handleClick = function _UmSelectionControl_handleClick() {
+    this.checked = this.inputType === 'radio' || !this.checked;
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+};
+UmSelectionControl.formAssociated = true;
+__decorate([
+    property()
+], UmSelectionControl.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmSelectionControl.prototype, "disabled", void 0);
+__decorate([
+    query('input')
+], UmSelectionControl.prototype, "input", void 0);
+__decorate([
+    property()
+], UmSelectionControl.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmSelectionControl.prototype, "checked", null);
+//# sourceMappingURL=selection-control.js.map

package/shared/selection-control/selection-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,wBAAwB,CAAC;AAEhC,MAAM,OAAgB,kBAAmB,SAAQ,UAAU;IASzD,2BAA2B;IAC3B,oBAAoB;IAEpB,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACpC,CAAC;IAcD,IAAI,OAAO;QACT,OAAO,uBAAA,IAAI,mCAAS,CAAC;IACvB,CAAC;IACD,IAAI,OAAO,CAAC,KAAc;QACxB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACnB,uBAAA,IAAI,+BAAY,KAAK,MAAA,CAAC;QACtB,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAChE,CAAC;IAED;QACE,KAAK,EAAE,CAAC;;QAjCE,SAAI,GAAuB,EAAE,CAAC;QACA,aAAQ,GAAG,KAAK,CAAC;QAU3D,sCAAW,KAAK,EAAC;QACP,cAAS,GAAyB,UAAU,CAAC;QAC7C,iBAAY,GAAG,IAAI,CAAC;QAI9B;;WAEG;QACS,UAAK,GAAG,IAAI,CAAC;QAcvB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,sEAAa,CAAC,CAAC;IACpD,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,uBAAA,IAAI,sEAAa,CAAC,CAAA;IACtD,CAAC;IAEkB,MAAM;QACvB,MAAM,MAAM,GAAG,IAAI,CAAA,uBAAuB,IAAI,CAAC,QAAQ,cAAc,CAAC;QAEtE,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;iBAE7B,IAAI,CAAC,SAAS;;kBAEb,IAAI,CAAC,IAAI;qBACN,uBAAA,IAAI,mCAAS;sBACZ,IAAI,CAAC,QAAQ;2CACQ,IAAI,CAAC,eAAe,EAAE;aACpD,CAAC;IACZ,CAAC;;;IAGC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;IAC3D,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;AAC3D,CAAC;AAtEe,iCAAc,GAAG,IAAI,AAAP,CAAQ;AAI1B;IAAX,QAAQ,EAAE;gDAA+B;AACA;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oDAAkB;AAC3C;IAAf,KAAK,CAAC,OAAO,CAAC;iDAA0B;AAkB7B;IAAX,QAAQ,EAAE;iDAAc;AAGzB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;iDAGzB","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport '../../ripple/ripple.js';\n\nexport abstract class UmSelectionControl extends LitElement {\n  static readonly formAssociated = true;\n\n  protected readonly elementInternals: ElementInternals;\n\n  @property() name: string | undefined = '';\n  @property({type: Boolean, reflect: true}) disabled = false;\n  @query('input') input!: HTMLInputElement;\n\n  // eslint-disable-next-line\n  // #value: any = '';\n\n  get form(): HTMLFormElement | null {\n    return this.elementInternals.form;\n  }\n\n  #checked = false;\n  protected inputType: 'checkbox' | 'radio' = 'checkbox';\n  protected renderRipple = true;\n\n  protected abstract renderIndicator(): HTMLTemplateResult;\n\n  /**\n   * The element value to use in form submission when checked.\n   */\n  @property() value = 'on';\n\n  @property({type: Boolean})\n  get checked() {\n    return this.#checked;\n  }\n  set checked(value: boolean) {\n    console.log(value);\n    this.#checked = value;\n    this.elementInternals.setFormValue(value ? this.value : null);\n  }\n\n  protected constructor() {\n    super();\n    this.elementInternals = this.attachInternals();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.#handleClick);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#handleClick)\n  }\n\n  protected override render(): HTMLTemplateResult {\n    const ripple = html`<u-ripple ?disabled=${this.disabled}></u-ripple>`;\n\n    return html`\n      <div class=\"container\">\n        ${this.renderRipple ? ripple : nothing}\n        <input\n          type=${this.inputType}\n          class=\"focus-ring\"\n          ?name=${this.name}\n          .checked=${this.#checked}\n          .disabled=${this.disabled} />\n        <div class=\"indicator-container\">${this.renderIndicator()}</div>\n      </div>`;\n  }\n\n  #handleClick() {\n    this.checked = this.inputType === 'radio' || !this.checked;\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n}\n"]}

package/shared/selection-control/selection-control.styles.d.ts

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

package/shared/selection-control/selection-control.styles.d.ts.map

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