@material/web 1.1.2-nightly.035d155.0 → 1.1.2-nightly.044ee51.0

package/button/internal/_filled-button.scss

@@ -4,6 +4,7 @@
 //
 
 // go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start

package/button/internal/_filled-tonal-button.scss

@@ -4,6 +4,7 @@
 //
 
 // go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start

package/button/internal/_text-button.scss

@@ -4,6 +4,7 @@
 //
 
 // go/keep-sorted start
+@use 'sass:list';
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start

package/button/internal/button.d.ts

@@ -6,7 +6,7 @@
 import '../../focus/md-focus-ring.js';
 import '../../ripple/ripple.js';
 import { LitElement } from 'lit';
-import { FormSubmitter, FormSubmitterType } from '../../internal/controller/form-submitter.js';
+import { FormSubmitter, type FormSubmitterType } from '../../internal/controller/form-submitter.js';
 declare const buttonBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<typeof LitElement, import("../../labs/behaviors/element-internals.js").WithElementInternals>;
 /**
  * A button component.
@@ -40,7 +40,15 @@ export declare abstract class Button extends buttonBaseClass implements FormSubm
      * Whether to display the icon or not.
      */
     hasIcon: boolean;
+    /**
+     * The default behavior of the button. May be "text", "reset", or "submit"
+     * (default).
+     */
     type: FormSubmitterType;
+    /**
+     * The value added to a form with the button's name when the button submits a
+     * form.
+     */
     value: string;
     get name(): string;
     set name(name: string);

package/button/internal/button.js

@@ -56,7 +56,15 @@ export class Button extends buttonBaseClass {
          * Whether to display the icon or not.
          */
         this.hasIcon = false;
+        /**
+         * The default behavior of the button. May be "text", "reset", or "submit"
+         * (default).
+         */
         this.type = 'submit';
+        /**
+         * The value added to a form with the button's name when the button submits a
+         * form.
+         */
         this.value = '';
         this.handleActivationClick = (event) => {
             if (!isActivationClick(event) || !this.buttonElement) {
@@ -162,7 +170,7 @@ __decorate([
     property()
 ], Button.prototype, "type", void 0);
 __decorate([
-    property()
+    property({ reflect: true })
 ], Button.prototype, "value", void 0);
 __decorate([
     query('.button')

package/button/internal/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {\n  FormSubmitter,\n  FormSubmitterType,\n  setupFormSubmitter,\n} from '../../internal/controller/form-submitter.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '../../internal/events/form-label-activation.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../labs/behaviors/element-internals.js';\n\n// Separate variable needed for closure.\nconst buttonBaseClass = mixinElementInternals(LitElement);\n\n/**\n * A button component.\n */\nexport abstract class Button extends buttonBaseClass implements FormSubmitter {\n  static {\n    requestUpdateOnAriaChange(Button);\n    setupFormSubmitter(Button);\n  }\n\n  /** @nocollapse */\n  static readonly formAssociated = true;\n\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  /**\n   * Whether or not the button is disabled.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href = '';\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: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the\n   * inline start.\n   *\n   * _Note:_ Link buttons cannot have trailing icons.\n   */\n  @property({type: Boolean, attribute: 'trailing-icon', reflect: true})\n  trailingIcon = false;\n\n  /**\n   * Whether to display the icon or not.\n   */\n  @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon =\n    false;\n\n  @property() type: FormSubmitterType = 'submit';\n\n  @property() value = '';\n\n  get name() {\n    return this.getAttribute('name') ?? '';\n  }\n  set name(name: string) {\n    this.setAttribute('name', name);\n  }\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this[internals].form;\n  }\n\n  @query('.button') private readonly buttonElement!: HTMLElement | null;\n\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly assignedIcons!: HTMLElement[];\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', this.handleActivationClick);\n    }\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  protected override render() {\n    // Link buttons may not be disabled\n    const isDisabled = this.disabled && !this.href;\n    const buttonOrLink = this.href ? this.renderLink() : this.renderButton();\n    // TODO(b/310046938): due to a limitation in focus ring/ripple, we can't use\n    // the same ID for different elements, so we change the ID instead.\n    const buttonId = this.href ? 'link' : 'button';\n    return html`\n      ${this.renderElevationOrOutline?.()}\n      <div class=\"background\"></div>\n      <md-focus-ring part=\"focus-ring\" for=${buttonId}></md-focus-ring>\n      <md-ripple for=${buttonId} ?disabled=\"${isDisabled}\"></md-ripple>\n      ${buttonOrLink}\n    `;\n  }\n\n  // Buttons can override this to add elevation or an outline. Use this and\n  // return `<md-elevation>` (for elevated, filled, and tonal buttons)\n  // or `<div class=\"outline\">` (for outlined buttons).\n  // Text buttons that have neither do not need to implement this.\n  protected renderElevationOrOutline?(): unknown;\n\n  private renderButton() {\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    return html`<button\n      id=\"button\"\n      class=\"button\"\n      ?disabled=${this.disabled}\n      aria-label=\"${ariaLabel || nothing}\"\n      aria-haspopup=\"${ariaHasPopup || nothing}\"\n      aria-expanded=\"${ariaExpanded || nothing}\">\n      ${this.renderContent()}\n    </button>`;\n  }\n\n  private renderLink() {\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    return html`<a\n      id=\"link\"\n      class=\"button\"\n      aria-label=\"${ariaLabel || nothing}\"\n      aria-haspopup=\"${ariaHasPopup || nothing}\"\n      aria-expanded=\"${ariaExpanded || nothing}\"\n      href=${this.href}\n      target=${this.target || nothing}\n      >${this.renderContent()}\n    </a>`;\n  }\n\n  private renderContent() {\n    const icon = html`<slot\n      name=\"icon\"\n      @slotchange=\"${this.handleSlotChange}\"></slot>`;\n\n    return html`\n      <span class=\"touch\"></span>\n      ${this.trailingIcon ? nothing : icon}\n      <span class=\"label\"><slot></slot></span>\n      ${this.trailingIcon ? icon : nothing}\n    `;\n  }\n\n  private readonly handleActivationClick = (event: MouseEvent) => {\n    if (!isActivationClick(event) || !this.buttonElement) {\n      return;\n    }\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  private handleSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing} from 'lit';\nimport {property, query, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\nimport {\n  FormSubmitter,\n  setupFormSubmitter,\n  type FormSubmitterType,\n} from '../../internal/controller/form-submitter.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '../../internal/events/form-label-activation.js';\nimport {\n  internals,\n  mixinElementInternals,\n} from '../../labs/behaviors/element-internals.js';\n\n// Separate variable needed for closure.\nconst buttonBaseClass = mixinElementInternals(LitElement);\n\n/**\n * A button component.\n */\nexport abstract class Button extends buttonBaseClass implements FormSubmitter {\n  static {\n    requestUpdateOnAriaChange(Button);\n    setupFormSubmitter(Button);\n  }\n\n  /** @nocollapse */\n  static readonly formAssociated = true;\n\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  /**\n   * Whether or not the button is disabled.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href = '';\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: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the\n   * inline start.\n   *\n   * _Note:_ Link buttons cannot have trailing icons.\n   */\n  @property({type: Boolean, attribute: 'trailing-icon', reflect: true})\n  trailingIcon = false;\n\n  /**\n   * Whether to display the icon or not.\n   */\n  @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon =\n    false;\n\n  /**\n   * The default behavior of the button. May be \"text\", \"reset\", or \"submit\"\n   * (default).\n   */\n  @property() type: FormSubmitterType = 'submit';\n\n  /**\n   * The value added to a form with the button's name when the button submits a\n   * form.\n   */\n  @property({reflect: true}) value = '';\n\n  get name() {\n    return this.getAttribute('name') ?? '';\n  }\n  set name(name: string) {\n    this.setAttribute('name', name);\n  }\n\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  get form() {\n    return this[internals].form;\n  }\n\n  @query('.button') private readonly buttonElement!: HTMLElement | null;\n\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly assignedIcons!: HTMLElement[];\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', this.handleActivationClick);\n    }\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  protected override render() {\n    // Link buttons may not be disabled\n    const isDisabled = this.disabled && !this.href;\n    const buttonOrLink = this.href ? this.renderLink() : this.renderButton();\n    // TODO(b/310046938): due to a limitation in focus ring/ripple, we can't use\n    // the same ID for different elements, so we change the ID instead.\n    const buttonId = this.href ? 'link' : 'button';\n    return html`\n      ${this.renderElevationOrOutline?.()}\n      <div class=\"background\"></div>\n      <md-focus-ring part=\"focus-ring\" for=${buttonId}></md-focus-ring>\n      <md-ripple for=${buttonId} ?disabled=\"${isDisabled}\"></md-ripple>\n      ${buttonOrLink}\n    `;\n  }\n\n  // Buttons can override this to add elevation or an outline. Use this and\n  // return `<md-elevation>` (for elevated, filled, and tonal buttons)\n  // or `<div class=\"outline\">` (for outlined buttons).\n  // Text buttons that have neither do not need to implement this.\n  protected renderElevationOrOutline?(): unknown;\n\n  private renderButton() {\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    return html`<button\n      id=\"button\"\n      class=\"button\"\n      ?disabled=${this.disabled}\n      aria-label=\"${ariaLabel || nothing}\"\n      aria-haspopup=\"${ariaHasPopup || nothing}\"\n      aria-expanded=\"${ariaExpanded || nothing}\">\n      ${this.renderContent()}\n    </button>`;\n  }\n\n  private renderLink() {\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    return html`<a\n      id=\"link\"\n      class=\"button\"\n      aria-label=\"${ariaLabel || nothing}\"\n      aria-haspopup=\"${ariaHasPopup || nothing}\"\n      aria-expanded=\"${ariaExpanded || nothing}\"\n      href=${this.href}\n      target=${this.target || nothing}\n      >${this.renderContent()}\n    </a>`;\n  }\n\n  private renderContent() {\n    const icon = html`<slot\n      name=\"icon\"\n      @slotchange=\"${this.handleSlotChange}\"></slot>`;\n\n    return html`\n      <span class=\"touch\"></span>\n      ${this.trailingIcon ? nothing : icon}\n      <span class=\"label\"><slot></slot></span>\n      ${this.trailingIcon ? icon : nothing}\n    `;\n  }\n\n  private readonly handleActivationClick = (event: MouseEvent) => {\n    if (!isActivationClick(event) || !this.buttonElement) {\n      return;\n    }\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  private handleSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n"]}

package/checkbox/internal/_checkbox.scss

@@ -49,38 +49,43 @@ $_checkmark-bottom-left: 7px, -14px;
 @mixin styles() {
   $tokens: tokens.md-comp-checkbox-values();
 
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: var(--md-checkbox-#{$token}, #{$value});
-    }
+  // Support logical shape properties
+  $container-shape: map.get($tokens, 'container-shape');
+  $tokens: map.set(
+    $tokens,
+    'container-shape-start-start',
+    var(--md-checkbox-container-shape, #{$container-shape})
+  );
+  $tokens: map.set(
+    $tokens,
+    'container-shape-start-end',
+    var(--md-checkbox-container-shape, #{$container-shape})
+  );
+  $tokens: map.set(
+    $tokens,
+    'container-shape-end-end',
+    var(--md-checkbox-container-shape, #{$container-shape})
+  );
+  $tokens: map.set(
+    $tokens,
+    'container-shape-end-start',
+    var(--md-checkbox-container-shape, #{$container-shape})
+  );
 
-    // Support logical shape properties
-    --_container-shape-start-start: var(
-      --md-checkbox-container-shape-start-start,
-      var(--_container-shape)
-    );
-    --_container-shape-start-end: var(
-      --md-checkbox-container-shape-start-end,
-      var(--_container-shape)
-    );
-    --_container-shape-end-end: var(
-      --md-checkbox-container-shape-end-end,
-      var(--_container-shape)
-    );
-    --_container-shape-end-start: var(
-      --md-checkbox-container-shape-end-start,
-      var(--_container-shape)
-    );
+  @each $token, $value in $tokens {
+    $tokens: map.set($tokens, $token, var(--md-checkbox-#{$token}, #{$value}));
+  }
 
-    border-start-start-radius: var(--_container-shape-start-start);
-    border-start-end-radius: var(--_container-shape-start-end);
-    border-end-end-radius: var(--_container-shape-end-end);
-    border-end-start-radius: var(--_container-shape-end-start);
+  :host {
+    border-start-start-radius: map.get($tokens, 'container-shape-start-start');
+    border-start-end-radius: map.get($tokens, 'container-shape-start-end');
+    border-end-end-radius: map.get($tokens, 'container-shape-end-end');
+    border-end-start-radius: map.get($tokens, 'container-shape-end-start');
     display: inline-flex;
-    height: var(--_container-size);
+    height: map.get($tokens, 'container-size');
     position: relative;
     vertical-align: top; // Fix extra space when placed inside display: block
-    width: var(--_container-size);
+    width: map.get($tokens, 'container-size');
     -webkit-tap-highlight-color: transparent;
     cursor: pointer;
   }
@@ -90,7 +95,7 @@ $_checkmark-bottom-left: 7px, -14px;
   }
 
   :host([touch-target='wrapper']) {
-    margin: max(0px, ((48px - var(--_container-size)) / 2));
+    margin: max(0px, ((48px - map.get($tokens, 'container-size')) / 2));
   }
 
   md-focus-ring {
@@ -140,14 +145,14 @@ $_checkmark-bottom-left: 7px, -14px;
   }
 
   .outline {
-    border-color: var(--_outline-color);
+    border-color: map.get($tokens, 'outline-color');
     border-style: solid;
-    border-width: var(--_outline-width);
+    border-width: map.get($tokens, 'outline-width');
     box-sizing: border-box;
   }
 
   .background {
-    background-color: var(--_selected-container-color);
+    background-color: map.get($tokens, 'selected-container-color');
   }
 
   // Background and icon transitions.
@@ -181,17 +186,17 @@ $_checkmark-bottom-left: 7px, -14px;
   // Ripple
 
   md-ripple {
-    border-radius: var(--_state-layer-shape);
-    height: var(--_state-layer-size);
+    border-radius: map.get($tokens, 'state-layer-shape');
+    height: map.get($tokens, 'state-layer-size');
     inset: unset;
-    width: var(--_state-layer-size);
+    width: map.get($tokens, 'state-layer-size');
 
     @include ripple.theme(
       (
-        hover-color: var(--_hover-state-layer-color),
-        hover-opacity: var(--_hover-state-layer-opacity),
-        pressed-color: var(--_pressed-state-layer-color),
-        pressed-opacity: var(--_pressed-state-layer-opacity),
+        hover-color: map.get($tokens, 'hover-state-layer-color'),
+        hover-opacity: map.get($tokens, 'hover-state-layer-opacity'),
+        pressed-color: map.get($tokens, 'pressed-state-layer-color'),
+        pressed-opacity: map.get($tokens, 'pressed-state-layer-opacity'),
       )
     );
   }
@@ -199,10 +204,11 @@ $_checkmark-bottom-left: 7px, -14px;
   .selected md-ripple {
     @include ripple.theme(
       (
-        hover-color: var(--_selected-hover-state-layer-color),
-        hover-opacity: var(--_selected-hover-state-layer-opacity),
-        pressed-color: var(--_selected-pressed-state-layer-color),
-        pressed-opacity: var(--_selected-pressed-state-layer-opacity),
+        hover-color: map.get($tokens, 'selected-hover-state-layer-color'),
+        hover-opacity: map.get($tokens, 'selected-hover-state-layer-opacity'),
+        pressed-color: map.get($tokens, 'selected-pressed-state-layer-color'),
+        pressed-opacity:
+          map.get($tokens, 'selected-pressed-state-layer-opacity'),
       )
     );
   }
@@ -217,9 +223,9 @@ $_checkmark-bottom-left: 7px, -14px;
     // 2. Long end
     //   - the larger trailing part of the checkmark
     //   - the entirety of the indeterminate mark
-    fill: var(--_selected-icon-color);
-    height: var(--_icon-size);
-    width: var(--_icon-size);
+    fill: map.get($tokens, 'selected-icon-color');
+    height: map.get($tokens, 'icon-size');
+    width: map.get($tokens, 'icon-size');
   }
 
   // The short end of the checkmark. Initially hidden underneath the
@@ -327,42 +333,42 @@ $_checkmark-bottom-left: 7px, -14px;
   // States
 
   :where(:hover) .outline {
-    border-color: var(--_hover-outline-color);
-    border-width: var(--_hover-outline-width);
+    border-color: map.get($tokens, 'hover-outline-color');
+    border-width: map.get($tokens, 'hover-outline-width');
   }
 
   :where(:hover) .background {
-    background: var(--_selected-hover-container-color);
+    background: map.get($tokens, 'selected-hover-container-color');
   }
 
   :where(:hover) .icon {
-    fill: var(--_selected-hover-icon-color);
+    fill: map.get($tokens, 'selected-hover-icon-color');
   }
 
   :where(:focus-within) .outline {
-    border-color: var(--_focus-outline-color);
-    border-width: var(--_focus-outline-width);
+    border-color: map.get($tokens, 'focus-outline-color');
+    border-width: map.get($tokens, 'focus-outline-width');
   }
 
   :where(:focus-within) .background {
-    background: var(--_selected-focus-container-color);
+    background: map.get($tokens, 'selected-focus-container-color');
   }
 
   :where(:focus-within) .icon {
-    fill: var(--_selected-focus-icon-color);
+    fill: map.get($tokens, 'selected-focus-icon-color');
   }
 
   :where(:active) .outline {
-    border-color: var(--_pressed-outline-color);
-    border-width: var(--_pressed-outline-width);
+    border-color: map.get($tokens, 'pressed-outline-color');
+    border-width: map.get($tokens, 'pressed-outline-width');
   }
 
   :where(:active) .background {
-    background: var(--_selected-pressed-container-color);
+    background: map.get($tokens, 'selected-pressed-container-color');
   }
 
   :where(:active) .icon {
-    fill: var(--_selected-pressed-icon-color);
+    fill: map.get($tokens, 'selected-pressed-icon-color');
   }
 
   // Don't animate to/from disabled states because the outline is hidden when
@@ -374,9 +380,9 @@ $_checkmark-bottom-left: 7px, -14px;
   }
 
   :where(.disabled) .outline {
-    border-color: var(--_disabled-outline-color);
-    border-width: var(--_disabled-outline-width);
-    opacity: var(--_disabled-container-opacity);
+    border-color: map.get($tokens, 'disabled-outline-color');
+    border-width: map.get($tokens, 'disabled-outline-width');
+    opacity: map.get($tokens, 'disabled-container-opacity');
   }
 
   :where(.selected.disabled) .outline {
@@ -388,12 +394,12 @@ $_checkmark-bottom-left: 7px, -14px;
   :where(.selected.disabled) .background {
     // Set disabled opacity only when selected since opacity is used to show
     // or hide the container background.
-    background: var(--_selected-disabled-container-color);
-    opacity: var(--_selected-disabled-container-opacity);
+    background: map.get($tokens, 'selected-disabled-container-color');
+    opacity: map.get($tokens, 'selected-disabled-container-opacity');
   }
 
   :where(.disabled) .icon {
-    fill: var(--_selected-disabled-icon-color);
+    fill: map.get($tokens, 'selected-disabled-icon-color');
   }
 
   @media (forced-colors: active) {

package/checkbox/internal/checkbox-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-shape: var(--md-checkbox-container-shape, 2px);--_container-size: var(--md-checkbox-container-size, 18px);--_icon-size: var(--md-checkbox-icon-size, 18px);--_selected-container-color: var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4));--_selected-disabled-container-color: var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-disabled-container-opacity: var(--md-checkbox-selected-disabled-container-opacity, 0.38);--_selected-disabled-icon-color: var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff));--_selected-focus-container-color: var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-icon-color: var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-container-color: var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-state-layer-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-container-color: var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-state-layer-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-checkbox-state-layer-shape, 9999px);--_state-layer-size: var(--md-checkbox-state-layer-size, 40px);--_disabled-container-opacity: var(--md-checkbox-disabled-container-opacity, 0.38);--_disabled-outline-color: var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-width: var(--md-checkbox-disabled-outline-width, 2px);--_focus-outline-color: var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-outline-width: var(--md-checkbox-focus-outline-width, 2px);--_hover-outline-color: var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-checkbox-hover-outline-width, 2px);--_hover-state-layer-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--_outline-color: var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-width: var(--md-checkbox-outline-width, 2px);--_pressed-outline-color: var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-outline-width: var(--md-checkbox-pressed-outline-width, 2px);--_pressed-state-layer-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12);--_container-shape-start-start: var( --md-checkbox-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-checkbox-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-checkbox-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-checkbox-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:inline-flex;height:var(--_container-size);position:relative;vertical-align:top;width:var(--_container-size);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-size))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px;z-index:1;cursor:inherit}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:flex;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--_outline-color);border-style:solid;border-width:var(--_outline-width);box-sizing:border-box}.background{background-color:var(--_selected-container-color)}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--_state-layer-shape);height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.selected md-ripple{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.icon{fill:var(--_selected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(:hover) .outline{border-color:var(--_hover-outline-color);border-width:var(--_hover-outline-width)}:where(:hover) .background{background:var(--_selected-hover-container-color)}:where(:hover) .icon{fill:var(--_selected-hover-icon-color)}:where(:focus-within) .outline{border-color:var(--_focus-outline-color);border-width:var(--_focus-outline-width)}:where(:focus-within) .background{background:var(--_selected-focus-container-color)}:where(:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:where(:active) .outline{border-color:var(--_pressed-outline-color);border-width:var(--_pressed-outline-width)}:where(:active) .background{background:var(--_selected-pressed-container-color)}:where(:active) .icon{fill:var(--_selected-pressed-icon-color)}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--_disabled-outline-color);border-width:var(--_disabled-outline-width);opacity:var(--_disabled-container-opacity)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--_selected-disabled-container-color);opacity:var(--_selected-disabled-container-opacity)}:where(.disabled) .icon{fill:var(--_selected-disabled-icon-color)}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}}/*# sourceMappingURL=checkbox-styles.css.map */
+export const styles = css `:host{border-start-start-radius:var(--md-checkbox-container-shape-start-start, var(--md-checkbox-container-shape, 2px));border-start-end-radius:var(--md-checkbox-container-shape-start-end, var(--md-checkbox-container-shape, 2px));border-end-end-radius:var(--md-checkbox-container-shape-end-end, var(--md-checkbox-container-shape, 2px));border-end-start-radius:var(--md-checkbox-container-shape-end-start, var(--md-checkbox-container-shape, 2px));display:inline-flex;height:var(--md-checkbox-container-size, 18px);position:relative;vertical-align:top;width:var(--md-checkbox-container-size, 18px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-checkbox-container-size, 18px))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px;z-index:1;cursor:inherit}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:flex;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));border-style:solid;border-width:var(--md-checkbox-outline-width, 2px);box-sizing:border-box}.background{background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--md-checkbox-state-layer-shape, 9999px);height:var(--md-checkbox-state-layer-size, 40px);inset:unset;width:var(--md-checkbox-state-layer-size, 40px);--md-ripple-hover-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12)}.selected md-ripple{--md-ripple-hover-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12)}.icon{fill:var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));height:var(--md-checkbox-icon-size, 18px);width:var(--md-checkbox-icon-size, 18px)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(:hover) .outline{border-color:var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-hover-outline-width, 2px)}:where(:hover) .background{background:var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4))}:where(:hover) .icon{fill:var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:focus-within) .outline{border-color:var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-focus-outline-width, 2px)}:where(:focus-within) .background{background:var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4))}:where(:focus-within) .icon{fill:var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:active) .outline{border-color:var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-pressed-outline-width, 2px)}:where(:active) .background{background:var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4))}:where(:active) .icon{fill:var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-disabled-outline-width, 2px);opacity:var(--md-checkbox-disabled-container-opacity, 0.38)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-checkbox-selected-disabled-container-opacity, 0.38)}:where(.disabled) .icon{fill:var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff))}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}}/*# sourceMappingURL=checkbox-styles.css.map */
 `;
 //# sourceMappingURL=checkbox-styles.css.js.map

package/checkbox/internal/checkbox-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-styles.css.js","sourceRoot":"","sources":["checkbox-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape: var(--md-checkbox-container-shape, 2px);--_container-size: var(--md-checkbox-container-size, 18px);--_icon-size: var(--md-checkbox-icon-size, 18px);--_selected-container-color: var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4));--_selected-disabled-container-color: var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-disabled-container-opacity: var(--md-checkbox-selected-disabled-container-opacity, 0.38);--_selected-disabled-icon-color: var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff));--_selected-focus-container-color: var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-icon-color: var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-container-color: var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-hover-state-layer-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-container-color: var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_selected-pressed-state-layer-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12);--_state-layer-shape: var(--md-checkbox-state-layer-shape, 9999px);--_state-layer-size: var(--md-checkbox-state-layer-size, 40px);--_disabled-container-opacity: var(--md-checkbox-disabled-container-opacity, 0.38);--_disabled-outline-color: var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-width: var(--md-checkbox-disabled-outline-width, 2px);--_focus-outline-color: var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-outline-width: var(--md-checkbox-focus-outline-width, 2px);--_hover-outline-color: var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-checkbox-hover-outline-width, 2px);--_hover-state-layer-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--_outline-color: var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_outline-width: var(--md-checkbox-outline-width, 2px);--_pressed-outline-color: var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-outline-width: var(--md-checkbox-pressed-outline-width, 2px);--_pressed-state-layer-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12);--_container-shape-start-start: var( --md-checkbox-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-checkbox-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-checkbox-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-checkbox-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:inline-flex;height:var(--_container-size);position:relative;vertical-align:top;width:var(--_container-size);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-size))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px;z-index:1;cursor:inherit}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:flex;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--_outline-color);border-style:solid;border-width:var(--_outline-width);box-sizing:border-box}.background{background-color:var(--_selected-container-color)}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--_state-layer-shape);height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.selected md-ripple{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.icon{fill:var(--_selected-icon-color);height:var(--_icon-size);width:var(--_icon-size)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(:hover) .outline{border-color:var(--_hover-outline-color);border-width:var(--_hover-outline-width)}:where(:hover) .background{background:var(--_selected-hover-container-color)}:where(:hover) .icon{fill:var(--_selected-hover-icon-color)}:where(:focus-within) .outline{border-color:var(--_focus-outline-color);border-width:var(--_focus-outline-width)}:where(:focus-within) .background{background:var(--_selected-focus-container-color)}:where(:focus-within) .icon{fill:var(--_selected-focus-icon-color)}:where(:active) .outline{border-color:var(--_pressed-outline-color);border-width:var(--_pressed-outline-width)}:where(:active) .background{background:var(--_selected-pressed-container-color)}:where(:active) .icon{fill:var(--_selected-pressed-icon-color)}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--_disabled-outline-color);border-width:var(--_disabled-outline-width);opacity:var(--_disabled-container-opacity)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--_selected-disabled-container-color);opacity:var(--_selected-disabled-container-opacity)}:where(.disabled) .icon{fill:var(--_selected-disabled-icon-color)}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}}/*# sourceMappingURL=checkbox-styles.css.map */\n`;\n "]}
+{"version":3,"file":"checkbox-styles.css.js","sourceRoot":"","sources":["checkbox-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{border-start-start-radius:var(--md-checkbox-container-shape-start-start, var(--md-checkbox-container-shape, 2px));border-start-end-radius:var(--md-checkbox-container-shape-start-end, var(--md-checkbox-container-shape, 2px));border-end-end-radius:var(--md-checkbox-container-shape-end-end, var(--md-checkbox-container-shape, 2px));border-end-start-radius:var(--md-checkbox-container-shape-end-start, var(--md-checkbox-container-shape, 2px));display:inline-flex;height:var(--md-checkbox-container-size, 18px);position:relative;vertical-align:top;width:var(--md-checkbox-container-size, 18px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-checkbox-container-size, 18px))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px;z-index:1;cursor:inherit}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:flex;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));border-style:solid;border-width:var(--md-checkbox-outline-width, 2px);box-sizing:border-box}.background{background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--md-checkbox-state-layer-shape, 9999px);height:var(--md-checkbox-state-layer-size, 40px);inset:unset;width:var(--md-checkbox-state-layer-size, 40px);--md-ripple-hover-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12)}.selected md-ripple{--md-ripple-hover-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12)}.icon{fill:var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));height:var(--md-checkbox-icon-size, 18px);width:var(--md-checkbox-icon-size, 18px)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(:hover) .outline{border-color:var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-hover-outline-width, 2px)}:where(:hover) .background{background:var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4))}:where(:hover) .icon{fill:var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:focus-within) .outline{border-color:var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-focus-outline-width, 2px)}:where(:focus-within) .background{background:var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4))}:where(:focus-within) .icon{fill:var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:active) .outline{border-color:var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-pressed-outline-width, 2px)}:where(:active) .background{background:var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4))}:where(:active) .icon{fill:var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-disabled-outline-width, 2px);opacity:var(--md-checkbox-disabled-container-opacity, 0.38)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-checkbox-selected-disabled-container-opacity, 0.38)}:where(.disabled) .icon{fill:var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff))}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}}/*# sourceMappingURL=checkbox-styles.css.map */\n`;\n "]}

package/chips/internal/filter-chip.js

@@ -88,10 +88,16 @@ export class FilterChip extends MultiActionChip {
         if (this.disabled) {
             return;
         }
+        // Store prevValue to revert in case `chip.selected` is changed during an
+        // event listener.
+        const prevValue = this.selected;
         this.selected = !this.selected;
         const preventDefault = !redispatchEvent(this, event);
         if (preventDefault) {
-            this.selected = !this.selected;
+            // We should not do `this.selected = !this.selected`, since a client
+            // click listener could change its value. Instead, always revert to the
+            // original value.
+            this.selected = prevValue;
             return;
         }
     }

package/chips/internal/filter-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\n\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n/**\n * A filter chip component.\n *\n * @fires remove {Event} Dispatched when the remove button is clicked.\n */\nexport class FilterChip extends MultiActionChip {\n  @property({type: Boolean}) elevated = false;\n  @property({type: Boolean}) removable = false;\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  /**\n   * Only needed for SSR.\n   *\n   * Add this attribute when a filter chip has a `slot=\"selected-icon\"` to avoid\n   * a Flash Of Unstyled Content.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'has-selected-icon'})\n  hasSelectedIcon = false;\n\n  protected get primaryId() {\n    return 'button';\n  }\n\n  @query('.primary.action')\n  protected readonly primaryAction!: HTMLElement | null;\n  @query('.trailing.action')\n  protected readonly trailingAction!: HTMLElement | null;\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      elevated: this.elevated,\n      selected: this.selected,\n      'has-trailing': this.removable,\n      'has-icon': this.hasIcon || this.selected,\n    };\n  }\n\n  protected override renderPrimaryAction(content: unknown) {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        aria-pressed=${this.selected}\n        ?disabled=${this.disabled && !this.alwaysFocusable}\n        @click=${this.handleClick}\n        >${content}</button\n      >\n    `;\n  }\n\n  protected override renderLeadingIcon() {\n    if (!this.selected) {\n      return super.renderLeadingIcon();\n    }\n\n    return html`\n      <slot name=\"selected-icon\">\n        <svg class=\"checkmark\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n          <path\n            d=\"M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z\" />\n        </svg>\n      </slot>\n    `;\n  }\n\n  protected override renderTrailingAction(focusListener: EventListener) {\n    if (this.removable) {\n      return renderRemoveButton({\n        focusListener,\n        ariaLabel: this.ariaLabelRemove,\n        disabled: this.disabled,\n      });\n    }\n\n    return nothing;\n  }\n\n  protected override renderOutline() {\n    if (this.elevated) {\n      return html`<md-elevation></md-elevation>`;\n    }\n\n    return super.renderOutline();\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    this.selected = !this.selected;\n\n    const preventDefault = !redispatchEvent(this, event);\n    if (preventDefault) {\n      this.selected = !this.selected;\n      return;\n    }\n  }\n}\n"]}
+{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAClC,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAGlD,OAAO,EAAC,eAAe,EAAC,MAAM,2CAA2C,CAAC;AAE1E,OAAO,EAAC,eAAe,EAAC,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAC,kBAAkB,EAAC,MAAM,qBAAqB,CAAC;AAEvD;;;;GAIG;AACH,MAAM,OAAO,UAAW,SAAQ,eAAe;IAA/C;;QAC6B,aAAQ,GAAG,KAAK,CAAC;QACjB,cAAS,GAAG,KAAK,CAAC;QACH,aAAQ,GAAG,KAAK,CAAC;QAE3D;;;;;WAKG;QAEH,oBAAe,GAAG,KAAK,CAAC;IA0F1B,CAAC;IAxFC,IAAc,SAAS;QACrB,OAAO,QAAQ,CAAC;IAClB,CAAC;IAOkB,mBAAmB;QACpC,OAAO;YACL,GAAG,KAAK,CAAC,mBAAmB,EAAE;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,cAAc,EAAE,IAAI,CAAC,SAAS;YAC9B,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ;SAC1C,CAAC;IACJ,CAAC;IAEkB,mBAAmB,CAAC,OAAgB;QACrD,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;;;qBAIM,SAAS,IAAI,OAAO;uBAClB,IAAI,CAAC,QAAQ;oBAChB,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe;iBACzC,IAAI,CAAC,WAAW;WACtB,OAAO;;KAEb,CAAC;IACJ,CAAC;IAEkB,iBAAiB;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,KAAK,CAAC,iBAAiB,EAAE,CAAC;SAClC;QAED,OAAO,IAAI,CAAA;;;;;;;KAOV,CAAC;IACJ,CAAC;IAEkB,oBAAoB,CAAC,aAA4B;QAClE,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,OAAO,kBAAkB,CAAC;gBACxB,aAAa;gBACb,SAAS,EAAE,IAAI,CAAC,eAAe;gBAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;SACJ;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAEkB,aAAa;QAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,+BAA+B,CAAC;SAC5C;QAED,OAAO,KAAK,CAAC,aAAa,EAAE,CAAC;IAC/B,CAAC;IAEO,WAAW,CAAC,KAAiB;QACnC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,yEAAyE;QACzE,kBAAkB;QAClB,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAChC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAE/B,MAAM,cAAc,GAAG,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QACrD,IAAI,cAAc,EAAE;YAClB,oEAAoE;YACpE,uEAAuE;YACvE,kBAAkB;YAClB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;YAC1B,OAAO;SACR;IACH,CAAC;CACF;AArG4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;6CAAmB;AACH;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAkB;AAS3D;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,mBAAmB,EAAC,CAAC;mDACjD;AAOL;IADlB,KAAK,CAAC,iBAAiB,CAAC;iDAC6B;AAEnC;IADlB,KAAK,CAAC,kBAAkB,CAAC;kDAC6B","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\n\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n/**\n * A filter chip component.\n *\n * @fires remove {Event} Dispatched when the remove button is clicked.\n */\nexport class FilterChip extends MultiActionChip {\n  @property({type: Boolean}) elevated = false;\n  @property({type: Boolean}) removable = false;\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  /**\n   * Only needed for SSR.\n   *\n   * Add this attribute when a filter chip has a `slot=\"selected-icon\"` to avoid\n   * a Flash Of Unstyled Content.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'has-selected-icon'})\n  hasSelectedIcon = false;\n\n  protected get primaryId() {\n    return 'button';\n  }\n\n  @query('.primary.action')\n  protected readonly primaryAction!: HTMLElement | null;\n  @query('.trailing.action')\n  protected readonly trailingAction!: HTMLElement | null;\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      elevated: this.elevated,\n      selected: this.selected,\n      'has-trailing': this.removable,\n      'has-icon': this.hasIcon || this.selected,\n    };\n  }\n\n  protected override renderPrimaryAction(content: unknown) {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        aria-pressed=${this.selected}\n        ?disabled=${this.disabled && !this.alwaysFocusable}\n        @click=${this.handleClick}\n        >${content}</button\n      >\n    `;\n  }\n\n  protected override renderLeadingIcon() {\n    if (!this.selected) {\n      return super.renderLeadingIcon();\n    }\n\n    return html`\n      <slot name=\"selected-icon\">\n        <svg class=\"checkmark\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n          <path\n            d=\"M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z\" />\n        </svg>\n      </slot>\n    `;\n  }\n\n  protected override renderTrailingAction(focusListener: EventListener) {\n    if (this.removable) {\n      return renderRemoveButton({\n        focusListener,\n        ariaLabel: this.ariaLabelRemove,\n        disabled: this.disabled,\n      });\n    }\n\n    return nothing;\n  }\n\n  protected override renderOutline() {\n    if (this.elevated) {\n      return html`<md-elevation></md-elevation>`;\n    }\n\n    return super.renderOutline();\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    // Store prevValue to revert in case `chip.selected` is changed during an\n    // event listener.\n    const prevValue = this.selected;\n    this.selected = !this.selected;\n\n    const preventDefault = !redispatchEvent(this, event);\n    if (preventDefault) {\n      // We should not do `this.selected = !this.selected`, since a client\n      // click listener could change its value. Instead, always revert to the\n      // original value.\n      this.selected = prevValue;\n      return;\n    }\n  }\n}\n"]}

package/dialog/internal/_dialog.scss

@@ -34,37 +34,45 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-dialog-values();
   $md-sys-color: tokens.md-sys-color-values-light();
   $md-sys-motion: tokens.md-sys-motion-values();
+  $tokens: tokens.md-comp-dialog-values();
+  @each $token, $value in $tokens {
+    $tokens: map.set($tokens, $token, var(--md-dialog-#{$token}, #{$value}));
+  }
 
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: var(--md-dialog-#{$token}, #{$value});
-    }
+  // Support logical shape properties
+  $tokens: map.merge(
+    $tokens,
+    (
+      'container-shape-start-start':
+        var(
+          --md-dialog-container-shape-start-start,
+          map.get($tokens, 'container-shape')
+        ),
+      'container-shape-start-end':
+        var(
+          --md-dialog-container-shape-start-end,
+          map.get($tokens, 'container-shape')
+        ),
+      'container-shape-end-end':
+        var(
+          --md-dialog-container-shape-end-end,
+          map.get($tokens, 'container-shape')
+        ),
+      'container-shape-end-start':
+        var(
+          --md-dialog-container-shape-end-start,
+          map.get($tokens, 'container-shape')
+        ),
+    )
+  );
 
-    // Support logical shape properties
-    --_container-shape-start-start: var(
-      --md-dialog-container-shape-start-start,
-      var(--_container-shape)
-    );
-    --_container-shape-start-end: var(
-      --md-dialog-container-shape-start-end,
-      var(--_container-shape)
-    );
-    --_container-shape-end-end: var(
-      --md-dialog-container-shape-end-end,
-      var(--_container-shape)
-    );
-    --_container-shape-end-start: var(
-      --md-dialog-container-shape-end-start,
-      var(--_container-shape)
-    );
-
-    border-start-start-radius: var(--_container-shape-start-start);
-    border-start-end-radius: var(--_container-shape-start-end);
-    border-end-end-radius: var(--_container-shape-end-end);
-    border-end-start-radius: var(--_container-shape-end-start);
+  :host {
+    border-start-start-radius: map.get($tokens, 'container-shape-start-start');
+    border-start-end-radius: map.get($tokens, 'container-shape-start-end');
+    border-end-end-radius: map.get($tokens, 'container-shape-end-end');
+    border-end-start-radius: map.get($tokens, 'container-shape-end-start');
     display: contents;
     margin: auto;
     max-height: min(560px, calc(100% - 48px));
@@ -123,13 +131,13 @@
 
   .headline {
     align-items: center;
-    color: var(--_headline-color);
+    color: map.get($tokens, 'headline-color');
     display: flex;
     flex-direction: column;
-    font-family: var(--_headline-font);
-    font-size: var(--_headline-size);
-    line-height: var(--_headline-line-height);
-    font-weight: var(--_headline-weight);
+    font-family: map.get($tokens, 'headline-font');
+    font-size: map.get($tokens, 'headline-size');
+    line-height: map.get($tokens, 'headline-line-height');
+    font-weight: map.get($tokens, 'headline-weight');
     position: relative;
   }
 
@@ -147,12 +155,12 @@
   }
 
   slot[name='icon']::slotted(*) {
-    color: var(--_icon-color);
+    color: map.get($tokens, 'icon-color');
     fill: currentColor;
-    font-size: var(--_icon-size);
+    font-size: map.get($tokens, 'icon-size');
     margin-top: 24px;
-    height: var(--_icon-size);
-    width: var(--_icon-size);
+    height: map.get($tokens, 'icon-size');
+    width: map.get($tokens, 'icon-size');
   }
 
   .has-icon slot[name='headline']::slotted(*) {
@@ -181,7 +189,7 @@
   }
 
   .container::before {
-    background: var(--_container-color);
+    background: map.get($tokens, 'container-color');
     border-radius: inherit;
     content: '';
     inset: 0;
@@ -208,11 +216,11 @@
   }
 
   .content {
-    color: var(--_supporting-text-color);
-    font-family: var(--_supporting-text-font);
-    font-size: var(--_supporting-text-size);
-    line-height: var(--_supporting-text-line-height);
-    font-weight: var(--_supporting-text-weight);
+    color: map.get($tokens, 'supporting-text-color');
+    font-family: map.get($tokens, 'supporting-text-font');
+    font-size: map.get($tokens, 'supporting-text-size');
+    line-height: map.get($tokens, 'supporting-text-line-height');
+    font-weight: map.get($tokens, 'supporting-text-weight');
     height: min-content; // Needed for Safari
     position: relative;
   }