@material/web 1.5.1 → 1.5.2-nightly.5b73f4c.0

package/field/internal/_filled-field.scss

@@ -41,9 +41,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-field-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-filled-field-values();
 
   @layer styles {
     :host {

package/field/internal/_outlined-field.scss

@@ -36,9 +36,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-outlined-field-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-outlined-field-values();
 
   @layer styles {
     :host {

package/field/internal/field.js

@@ -209,8 +209,8 @@ export class Field extends LitElement {
         if (!this.label) {
             return;
         }
-        wasFocused ?? (wasFocused = this.focused);
-        wasPopulated ?? (wasPopulated = this.populated);
+        wasFocused ??= this.focused;
+        wasPopulated ??= this.populated;
         const wasFloating = wasFocused || wasPopulated;
         const shouldBeFloating = this.focused || this.populated;
         if (wasFloating === shouldBeFloating) {

package/field/internal/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sourceRoot":"","sources":["field.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n  render,\n  TemplateResult,\n} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {EASING} from '../../internal/motion/animation.js';\n\n/**\n * A field component.\n */\nexport class Field extends LitElement {\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) error = false;\n  @property({type: Boolean}) focused = false;\n  @property() label = '';\n  @property({type: Boolean, attribute: 'no-asterisk'}) noAsterisk = false;\n  @property({type: Boolean}) populated = false;\n  @property({type: Boolean}) required = false;\n  @property({type: Boolean}) resizable = false;\n  @property({attribute: 'supporting-text'}) supportingText = '';\n  @property({attribute: 'error-text'}) errorText = '';\n  @property({type: Number}) count = -1;\n  @property({type: Number}) max = -1;\n\n  /**\n   * Whether or not the field has leading content.\n   */\n  @property({type: Boolean, attribute: 'has-start'}) hasStart = false;\n\n  /**\n   * Whether or not the field has trailing content.\n   */\n  @property({type: Boolean, attribute: 'has-end'}) hasEnd = false;\n\n  @queryAssignedElements({slot: 'aria-describedby'})\n  private readonly slottedAriaDescribedBy!: HTMLElement[];\n\n  private get counterText() {\n    // Count and max are typed as number, but can be set to null when Lit removes\n    // their attributes. These getters coerce back to a number for calculations.\n    const countAsNumber = this.count ?? -1;\n    const maxAsNumber = this.max ?? -1;\n    // Counter does not show if count is negative, or max is negative or 0.\n    if (countAsNumber < 0 || maxAsNumber <= 0) {\n      return '';\n    }\n\n    return `${countAsNumber} / ${maxAsNumber}`;\n  }\n\n  private get supportingOrErrorText() {\n    return this.error && this.errorText ? this.errorText : this.supportingText;\n  }\n\n  @state() private isAnimating = false;\n  private labelAnimation?: Animation;\n  /**\n   * When set to true, the error text's `role=\"alert\"` will be removed, then\n   * re-added after an animation frame. This will re-announce an error message\n   * to screen readers.\n   */\n  @state() private refreshErrorAlert = false;\n  @state() private disableTransitions = false;\n  @query('.label.floating')\n  private readonly floatingLabelEl!: HTMLElement | null;\n  @query('.label.resting') private readonly restingLabelEl!: HTMLElement | null;\n  @query('.container') private readonly containerEl!: HTMLElement | null;\n\n  /**\n   * Re-announces the field's error supporting text to screen readers.\n   *\n   * Error text announces to screen readers anytime it is visible and changes.\n   * Use the method to re-announce the message when the text has not changed,\n   * but announcement is still needed (such as for `reportValidity()`).\n   */\n  reannounceError() {\n    this.refreshErrorAlert = true;\n  }\n\n  protected override update(props: PropertyValues<Field>) {\n    // Client-side property updates\n    const isDisabledChanging =\n      props.has('disabled') && props.get('disabled') !== undefined;\n    if (isDisabledChanging) {\n      this.disableTransitions = true;\n    }\n\n    // When disabling, remove focus styles if focused.\n    if (this.disabled && this.focused) {\n      props.set('focused', true);\n      this.focused = false;\n    }\n\n    // Animate if focused or populated change.\n    this.animateLabelIfNeeded({\n      wasFocused: props.get('focused'),\n      wasPopulated: props.get('populated'),\n    });\n\n    super.update(props);\n  }\n\n  protected override render() {\n    const floatingLabel = this.renderLabel(/*isFloating*/ true);\n    const restingLabel = this.renderLabel(/*isFloating*/ false);\n    const outline = this.renderOutline?.(floatingLabel);\n    const classes = {\n      'disabled': this.disabled,\n      'disable-transitions': this.disableTransitions,\n      'error': this.error && !this.disabled,\n      'focused': this.focused,\n      'with-start': this.hasStart,\n      'with-end': this.hasEnd,\n      'populated': this.populated,\n      'resizable': this.resizable,\n      'required': this.required,\n      'no-label': !this.label,\n    };\n\n    return html`\n      <div class=\"field ${classMap(classes)}\">\n        <div class=\"container-overflow\">\n          ${this.renderBackground?.()} ${this.renderIndicator?.()} ${outline}\n          <div class=\"container\">\n            <div class=\"start\">\n              <slot name=\"start\"></slot>\n            </div>\n            <div class=\"middle\">\n              <div class=\"label-wrapper\">\n                ${restingLabel} ${outline ? nothing : floatingLabel}\n              </div>\n              <div class=\"content\">\n                <slot></slot>\n              </div>\n            </div>\n            <div class=\"end\">\n              <slot name=\"end\"></slot>\n            </div>\n          </div>\n        </div>\n        ${this.renderSupportingText()}\n      </div>\n    `;\n  }\n\n  protected override updated(changed: PropertyValues<Field>) {\n    if (\n      changed.has('supportingText') ||\n      changed.has('errorText') ||\n      changed.has('count') ||\n      changed.has('max')\n    ) {\n      this.updateSlottedAriaDescribedBy();\n    }\n\n    if (this.refreshErrorAlert) {\n      // The past render cycle removed the role=\"alert\" from the error message.\n      // Re-add it after an animation frame to re-announce the error.\n      requestAnimationFrame(() => {\n        this.refreshErrorAlert = false;\n      });\n    }\n\n    if (this.disableTransitions) {\n      requestAnimationFrame(() => {\n        this.disableTransitions = false;\n      });\n    }\n  }\n\n  protected renderBackground?(): TemplateResult;\n  protected renderIndicator?(): TemplateResult;\n  protected renderOutline?(floatingLabel: unknown): TemplateResult;\n\n  private renderSupportingText() {\n    const {supportingOrErrorText, counterText} = this;\n    if (!supportingOrErrorText && !counterText) {\n      return nothing;\n    }\n\n    // Always render the supporting text span so that our `space-around`\n    // container puts the counter at the end.\n    const start = html`<span>${supportingOrErrorText}</span>`;\n    // Conditionally render counter so we don't render the extra `gap`.\n    // TODO(b/244473435): add aria-label and announcements\n    const end = counterText\n      ? html`<span class=\"counter\">${counterText}</span>`\n      : nothing;\n\n    // Announce if there is an error and error text visible.\n    // If refreshErrorAlert is true, do not announce. This will remove the\n    // role=\"alert\" attribute. Another render cycle will happen after an\n    // animation frame to re-add the role.\n    const shouldErrorAnnounce =\n      this.error && this.errorText && !this.refreshErrorAlert;\n    const role = shouldErrorAnnounce ? 'alert' : nothing;\n    return html`\n      <div class=\"supporting-text\" role=${role}>${start}${end}</div>\n      <slot\n        name=\"aria-describedby\"\n        @slotchange=${this.updateSlottedAriaDescribedBy}></slot>\n    `;\n  }\n\n  private updateSlottedAriaDescribedBy() {\n    for (const element of this.slottedAriaDescribedBy) {\n      render(html`${this.supportingOrErrorText} ${this.counterText}`, element);\n      element.setAttribute('hidden', '');\n    }\n  }\n\n  private renderLabel(isFloating: boolean) {\n    if (!this.label) {\n      return nothing;\n    }\n\n    let visible: boolean;\n    if (isFloating) {\n      // Floating label is visible when focused/populated or when animating.\n      visible = this.focused || this.populated || this.isAnimating;\n    } else {\n      // Resting label is visible when unfocused. It is never visible while\n      // animating.\n      visible = !this.focused && !this.populated && !this.isAnimating;\n    }\n\n    const classes = {\n      'hidden': !visible,\n      'floating': isFloating,\n      'resting': !isFloating,\n    };\n\n    // Add '*' if a label is present and the field is required\n    const labelText = `${this.label}${\n      this.required && !this.noAsterisk ? '*' : ''\n    }`;\n\n    return html`\n      <span class=\"label ${classMap(classes)}\" aria-hidden=${!visible}\n        >${labelText}</span\n      >\n    `;\n  }\n\n  private animateLabelIfNeeded({\n    wasFocused,\n    wasPopulated,\n  }: {\n    wasFocused?: boolean;\n    wasPopulated?: boolean;\n  }) {\n    if (!this.label) {\n      return;\n    }\n\n    wasFocused ??= this.focused;\n    wasPopulated ??= this.populated;\n    const wasFloating = wasFocused || wasPopulated;\n    const shouldBeFloating = this.focused || this.populated;\n    if (wasFloating === shouldBeFloating) {\n      return;\n    }\n\n    this.isAnimating = true;\n    this.labelAnimation?.cancel();\n\n    // Only one label is visible at a time for clearer text rendering.\n    // The floating label is visible and used during animation. At the end of\n    // the animation, it will either remain visible (if floating) or hide and\n    // the resting label will be shown.\n    //\n    // We don't use forward filling because if the dimensions of the text field\n    // change (leading icon removed, density changes, etc), then the animation\n    // will be inaccurate.\n    //\n    // Re-calculating the animation each time will prevent any visual glitches\n    // from appearing.\n    // TODO(b/241113345): use animation tokens\n    this.labelAnimation = this.floatingLabelEl?.animate(\n      this.getLabelKeyframes(),\n      {duration: 150, easing: EASING.STANDARD},\n    );\n\n    this.labelAnimation?.addEventListener('finish', () => {\n      // At the end of the animation, update the visible label.\n      this.isAnimating = false;\n    });\n  }\n\n  private getLabelKeyframes() {\n    const {floatingLabelEl, restingLabelEl} = this;\n    if (!floatingLabelEl || !restingLabelEl) {\n      return [];\n    }\n\n    const {\n      x: floatingX,\n      y: floatingY,\n      height: floatingHeight,\n    } = floatingLabelEl.getBoundingClientRect();\n    const {\n      x: restingX,\n      y: restingY,\n      height: restingHeight,\n    } = restingLabelEl.getBoundingClientRect();\n    const floatingScrollWidth = floatingLabelEl.scrollWidth;\n    const restingScrollWidth = restingLabelEl.scrollWidth;\n    // Scale by width ratio instead of font size since letter-spacing will scale\n    // incorrectly. Using the width we can better approximate the adjusted\n    // scale and compensate for tracking and overflow.\n    // (use scrollWidth instead of width to account for clipped labels)\n    const scale = restingScrollWidth / floatingScrollWidth;\n    const xDelta = restingX - floatingX;\n    // The line-height of the resting and floating label are different. When\n    // we move the floating label down to the resting label's position, it won't\n    // exactly match because of this. We need to adjust by half of what the\n    // final scaled floating label's height will be.\n    const yDelta =\n      restingY -\n      floatingY +\n      Math.round((restingHeight - floatingHeight * scale) / 2);\n\n    // Create the two transforms: floating to resting (using the calculations\n    // above), and resting to floating (re-setting the transform to initial\n    // values).\n    const restTransform = `translateX(${xDelta}px) translateY(${yDelta}px) scale(${scale})`;\n    const floatTransform = `translateX(0) translateY(0) scale(1)`;\n\n    // Constrain the floating labels width to a scaled percentage of the\n    // resting label's width. This will prevent long clipped labels from\n    // overflowing the container.\n    const restingClientWidth = restingLabelEl.clientWidth;\n    const isRestingClipped = restingScrollWidth > restingClientWidth;\n    const width = isRestingClipped ? `${restingClientWidth / scale}px` : '';\n    if (this.focused || this.populated) {\n      return [\n        {transform: restTransform, width},\n        {transform: floatTransform, width},\n      ];\n    }\n\n    return [\n      {transform: floatTransform, width},\n      {transform: restTransform, width},\n    ];\n  }\n\n  getSurfacePositionClientRect() {\n    return this.containerEl!.getBoundingClientRect();\n  }\n}\n"]}
+{"version":3,"file":"field.js","sourceRoot":"","sources":["field.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n  render,\n  TemplateResult,\n} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {EASING} from '../../internal/motion/animation.js';\n\n/**\n * A field component.\n */\nexport class Field extends LitElement {\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) error = false;\n  @property({type: Boolean}) focused = false;\n  @property() label = '';\n  @property({type: Boolean, attribute: 'no-asterisk'}) noAsterisk = false;\n  @property({type: Boolean}) populated = false;\n  @property({type: Boolean}) required = false;\n  @property({type: Boolean}) resizable = false;\n  @property({attribute: 'supporting-text'}) supportingText = '';\n  @property({attribute: 'error-text'}) errorText = '';\n  @property({type: Number}) count = -1;\n  @property({type: Number}) max = -1;\n\n  /**\n   * Whether or not the field has leading content.\n   */\n  @property({type: Boolean, attribute: 'has-start'}) hasStart = false;\n\n  /**\n   * Whether or not the field has trailing content.\n   */\n  @property({type: Boolean, attribute: 'has-end'}) hasEnd = false;\n\n  @queryAssignedElements({slot: 'aria-describedby'})\n  private readonly slottedAriaDescribedBy!: HTMLElement[];\n\n  private get counterText() {\n    // Count and max are typed as number, but can be set to null when Lit removes\n    // their attributes. These getters coerce back to a number for calculations.\n    const countAsNumber = this.count ?? -1;\n    const maxAsNumber = this.max ?? -1;\n    // Counter does not show if count is negative, or max is negative or 0.\n    if (countAsNumber < 0 || maxAsNumber <= 0) {\n      return '';\n    }\n\n    return `${countAsNumber} / ${maxAsNumber}`;\n  }\n\n  private get supportingOrErrorText() {\n    return this.error && this.errorText ? this.errorText : this.supportingText;\n  }\n\n  @state() private isAnimating = false;\n  private labelAnimation?: Animation;\n  /**\n   * When set to true, the error text's `role=\"alert\"` will be removed, then\n   * re-added after an animation frame. This will re-announce an error message\n   * to screen readers.\n   */\n  @state() private refreshErrorAlert = false;\n  @state() private disableTransitions = false;\n  @query('.label.floating')\n  private readonly floatingLabelEl!: HTMLElement | null;\n  @query('.label.resting') private readonly restingLabelEl!: HTMLElement | null;\n  @query('.container') private readonly containerEl!: HTMLElement | null;\n\n  /**\n   * Re-announces the field's error supporting text to screen readers.\n   *\n   * Error text announces to screen readers anytime it is visible and changes.\n   * Use the method to re-announce the message when the text has not changed,\n   * but announcement is still needed (such as for `reportValidity()`).\n   */\n  reannounceError() {\n    this.refreshErrorAlert = true;\n  }\n\n  protected override update(props: PropertyValues<Field>) {\n    // Client-side property updates\n    const isDisabledChanging =\n      props.has('disabled') && props.get('disabled') !== undefined;\n    if (isDisabledChanging) {\n      this.disableTransitions = true;\n    }\n\n    // When disabling, remove focus styles if focused.\n    if (this.disabled && this.focused) {\n      props.set('focused', true);\n      this.focused = false;\n    }\n\n    // Animate if focused or populated change.\n    this.animateLabelIfNeeded({\n      wasFocused: props.get('focused'),\n      wasPopulated: props.get('populated'),\n    });\n\n    super.update(props);\n  }\n\n  protected override render() {\n    const floatingLabel = this.renderLabel(/*isFloating*/ true);\n    const restingLabel = this.renderLabel(/*isFloating*/ false);\n    const outline = this.renderOutline?.(floatingLabel);\n    const classes = {\n      'disabled': this.disabled,\n      'disable-transitions': this.disableTransitions,\n      'error': this.error && !this.disabled,\n      'focused': this.focused,\n      'with-start': this.hasStart,\n      'with-end': this.hasEnd,\n      'populated': this.populated,\n      'resizable': this.resizable,\n      'required': this.required,\n      'no-label': !this.label,\n    };\n\n    return html`\n      <div class=\"field ${classMap(classes)}\">\n        <div class=\"container-overflow\">\n          ${this.renderBackground?.()} ${this.renderIndicator?.()} ${outline}\n          <div class=\"container\">\n            <div class=\"start\">\n              <slot name=\"start\"></slot>\n            </div>\n            <div class=\"middle\">\n              <div class=\"label-wrapper\">\n                ${restingLabel} ${outline ? nothing : floatingLabel}\n              </div>\n              <div class=\"content\">\n                <slot></slot>\n              </div>\n            </div>\n            <div class=\"end\">\n              <slot name=\"end\"></slot>\n            </div>\n          </div>\n        </div>\n        ${this.renderSupportingText()}\n      </div>\n    `;\n  }\n\n  protected override updated(changed: PropertyValues<Field>) {\n    if (\n      changed.has('supportingText') ||\n      changed.has('errorText') ||\n      changed.has('count') ||\n      changed.has('max')\n    ) {\n      this.updateSlottedAriaDescribedBy();\n    }\n\n    if (this.refreshErrorAlert) {\n      // The past render cycle removed the role=\"alert\" from the error message.\n      // Re-add it after an animation frame to re-announce the error.\n      requestAnimationFrame(() => {\n        this.refreshErrorAlert = false;\n      });\n    }\n\n    if (this.disableTransitions) {\n      requestAnimationFrame(() => {\n        this.disableTransitions = false;\n      });\n    }\n  }\n\n  protected renderBackground?(): TemplateResult;\n  protected renderIndicator?(): TemplateResult;\n  protected renderOutline?(floatingLabel: unknown): TemplateResult;\n\n  private renderSupportingText() {\n    const {supportingOrErrorText, counterText} = this;\n    if (!supportingOrErrorText && !counterText) {\n      return nothing;\n    }\n\n    // Always render the supporting text span so that our `space-around`\n    // container puts the counter at the end.\n    const start = html`<span>${supportingOrErrorText}</span>`;\n    // Conditionally render counter so we don't render the extra `gap`.\n    // TODO(b/244473435): add aria-label and announcements\n    const end = counterText\n      ? html`<span class=\"counter\">${counterText}</span>`\n      : nothing;\n\n    // Announce if there is an error and error text visible.\n    // If refreshErrorAlert is true, do not announce. This will remove the\n    // role=\"alert\" attribute. Another render cycle will happen after an\n    // animation frame to re-add the role.\n    const shouldErrorAnnounce =\n      this.error && this.errorText && !this.refreshErrorAlert;\n    const role = shouldErrorAnnounce ? 'alert' : nothing;\n    return html`\n      <div class=\"supporting-text\" role=${role}>${start}${end}</div>\n      <slot\n        name=\"aria-describedby\"\n        @slotchange=${this.updateSlottedAriaDescribedBy}></slot>\n    `;\n  }\n\n  private updateSlottedAriaDescribedBy() {\n    for (const element of this.slottedAriaDescribedBy) {\n      render(html`${this.supportingOrErrorText} ${this.counterText}`, element);\n      element.setAttribute('hidden', '');\n    }\n  }\n\n  private renderLabel(isFloating: boolean) {\n    if (!this.label) {\n      return nothing;\n    }\n\n    let visible: boolean;\n    if (isFloating) {\n      // Floating label is visible when focused/populated or when animating.\n      visible = this.focused || this.populated || this.isAnimating;\n    } else {\n      // Resting label is visible when unfocused. It is never visible while\n      // animating.\n      visible = !this.focused && !this.populated && !this.isAnimating;\n    }\n\n    const classes = {\n      'hidden': !visible,\n      'floating': isFloating,\n      'resting': !isFloating,\n    };\n\n    // Add '*' if a label is present and the field is required\n    const labelText = `${this.label}${\n      this.required && !this.noAsterisk ? '*' : ''\n    }`;\n\n    return html`\n      <span class=\"label ${classMap(classes)}\" aria-hidden=${!visible}\n        >${labelText}</span\n      >\n    `;\n  }\n\n  private animateLabelIfNeeded({\n    wasFocused,\n    wasPopulated,\n  }: {\n    wasFocused?: boolean;\n    wasPopulated?: boolean;\n  }) {\n    if (!this.label) {\n      return;\n    }\n\n    wasFocused ??= this.focused;\n    wasPopulated ??= this.populated;\n    const wasFloating = wasFocused || wasPopulated;\n    const shouldBeFloating = this.focused || this.populated;\n    if (wasFloating === shouldBeFloating) {\n      return;\n    }\n\n    this.isAnimating = true;\n    this.labelAnimation?.cancel();\n\n    // Only one label is visible at a time for clearer text rendering.\n    // The floating label is visible and used during animation. At the end of\n    // the animation, it will either remain visible (if floating) or hide and\n    // the resting label will be shown.\n    //\n    // We don't use forward filling because if the dimensions of the text field\n    // change (leading icon removed, density changes, etc), then the animation\n    // will be inaccurate.\n    //\n    // Re-calculating the animation each time will prevent any visual glitches\n    // from appearing.\n    // TODO(b/241113345): use animation tokens\n    this.labelAnimation = this.floatingLabelEl?.animate(\n      this.getLabelKeyframes(),\n      {duration: 150, easing: EASING.STANDARD},\n    );\n\n    this.labelAnimation?.addEventListener('finish', () => {\n      // At the end of the animation, update the visible label.\n      this.isAnimating = false;\n    });\n  }\n\n  private getLabelKeyframes() {\n    const {floatingLabelEl, restingLabelEl} = this;\n    if (!floatingLabelEl || !restingLabelEl) {\n      return [];\n    }\n\n    const {\n      x: floatingX,\n      y: floatingY,\n      height: floatingHeight,\n    } = floatingLabelEl.getBoundingClientRect();\n    const {\n      x: restingX,\n      y: restingY,\n      height: restingHeight,\n    } = restingLabelEl.getBoundingClientRect();\n    const floatingScrollWidth = floatingLabelEl.scrollWidth;\n    const restingScrollWidth = restingLabelEl.scrollWidth;\n    // Scale by width ratio instead of font size since letter-spacing will scale\n    // incorrectly. Using the width we can better approximate the adjusted\n    // scale and compensate for tracking and overflow.\n    // (use scrollWidth instead of width to account for clipped labels)\n    const scale = restingScrollWidth / floatingScrollWidth;\n    const xDelta = restingX - floatingX;\n    // The line-height of the resting and floating label are different. When\n    // we move the floating label down to the resting label's position, it won't\n    // exactly match because of this. We need to adjust by half of what the\n    // final scaled floating label's height will be.\n    const yDelta =\n      restingY -\n      floatingY +\n      Math.round((restingHeight - floatingHeight * scale) / 2);\n\n    // Create the two transforms: floating to resting (using the calculations\n    // above), and resting to floating (re-setting the transform to initial\n    // values).\n    const restTransform = `translateX(${xDelta}px) translateY(${yDelta}px) scale(${scale})`;\n    const floatTransform = `translateX(0) translateY(0) scale(1)`;\n\n    // Constrain the floating labels width to a scaled percentage of the\n    // resting label's width. This will prevent long clipped labels from\n    // overflowing the container.\n    const restingClientWidth = restingLabelEl.clientWidth;\n    const isRestingClipped = restingScrollWidth > restingClientWidth;\n    const width = isRestingClipped ? `${restingClientWidth / scale}px` : '';\n    if (this.focused || this.populated) {\n      return [\n        {transform: restTransform, width},\n        {transform: floatTransform, width},\n      ];\n    }\n\n    return [\n      {transform: floatTransform, width},\n      {transform: restTransform, width},\n    ];\n  }\n\n  getSurfacePositionClientRect() {\n    return this.containerEl!.getBoundingClientRect();\n  }\n}\n"]}

package/field/internal/filled-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_filled-field.scss"],"names":[],"mappings":"AA+CE,cACE,MAII,63TAIJ,yBAEE,sBACA,QACA,oBACA,kBAGF,YACE,mCAGF,aACE,kBAGF,yCACE,mBAGF,gBACE,kBACA,iCAGF,uCACE,0CAGF,qCACE,yCAGF,kBACE,iBAGA,oBACA,kBACA,WACA,UAEA,mDAEE,mFAEA,iBACA,WACA,kBACA,WAIF,yBACE,UACA,oDAKJ,kCACE,UAGF,8CACE,2CAGF,4CACE,0CAGF,yDACE,+CACA,0FAKF,mDAEE,8CACA,yFAKF,iCACE,yDACA,0DAIF,yBACE,yDACA,0DAGF,oBACE,2CACA,0CAGF,oCACE,4DACA,6DACA,kDAGF,sBACE,4CACA,2CAGF,iCACE,yDAGF,uCACE,+DAGF,0BACE,iDACA,gDAIF,gCACE,+DAKF,sBACE,6CAEA,6DAGF,wBACE,2CAIJ,WACE,8BACE,oCACE,sBACA","file":"filled-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_filled-field.scss"],"names":[],"mappings":"AA6CE,cACE,MAII,63TAIJ,yBAEE,sBACA,QACA,oBACA,kBAGF,YACE,mCAGF,aACE,kBAGF,yCACE,mBAGF,gBACE,kBACA,iCAGF,uCACE,0CAGF,qCACE,yCAGF,kBACE,iBAGA,oBACA,kBACA,WACA,UAEA,mDAEE,mFAEA,iBACA,WACA,kBACA,WAIF,yBACE,UACA,oDAKJ,kCACE,UAGF,8CACE,2CAGF,4CACE,0CAGF,yDACE,+CACA,0FAKF,mDAEE,8CACA,yFAKF,iCACE,yDACA,0DAIF,yBACE,yDACA,0DAGF,oBACE,2CACA,0CAGF,oCACE,4DACA,6DACA,kDAGF,sBACE,4CACA,2CAGF,iCACE,yDAGF,uCACE,+DAGF,0BACE,iDACA,gDAIF,gCACE,+DAKF,sBACE,6CAEA,6DAGF,wBACE,2CAIJ,WACE,8BACE,oCACE,sBACA","file":"filled-styles.css"}

package/field/internal/outlined-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_outlined-field.scss"],"names":[],"mappings":"AA0CE,cACE,MAII,klSAIJ,SACE,mCACA,sBACA,aAEA,oBACA,YACA,kBACA,WACA,UASA,gNAEE,eACA,WACA,QACA,kBAIJ,4BAEE,eACA,sBACA,sBACA,kBAEA,sFAEE,0BACA,uBAGF,0CACE,UACA,oDAKJ,4DAEE,UAIA,6CAEE,gCACA,6BACA,kCACA,0BACA,gCACA,wBACA,gDAIJ,aACE,YACA,2DAEA,yCAEE,+BACA,8BACA,4BACA,gCACA,0BACA,8BAIJ,eACE,uBACA,eACA,aACA,2DACA,gDACA,sEACA,wCACA,kBAGF,yBACE,aAGF,8CAEE,eACA,0BACA,QACA,kBAEA,0HAEE,uBACA,mBACA,YACA,oBACA,sDAMF,8DACE,UACA,0BAGF,4DACE,SACA,2BAQF,oUAEE,oBAIJ,sBACE,UACA,oDAIF,+BACE,UAGF,eACE,aACA,eAEA,sEAqBF,6DAEE,qBARY,sIAWd,uCACE,oBAZY,sIAed,4CACE,mBAZU,mGAeZ,qCACE,kBAhBU,mGAmBZ,mIAKE,mCAKF,gBACE,yCACA,kCAGF,sKAKE,yCAGF,kBACE,yCACA,kCAGF,2HAKE,yCAGF,mBACE,4CACA,qCAGF,kFAGE,yCAGF,qLAKE,4CAGF,gBACE,yCACA,kCAGF,sBACE,+CAEA,wCAGF,wBACE,+CAEA,wCAKF,sBACE,mCACA,6CAEA,6EAKF,wBACE,gCACA,+CAGF,+BACE,8EAMJ,WACE,8BACE,mBACE,sBACA,eAGF,mEACE","file":"outlined-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_outlined-field.scss"],"names":[],"mappings":"AAwCE,cACE,MAII,klSAIJ,SACE,mCACA,sBACA,aAEA,oBACA,YACA,kBACA,WACA,UASA,gNAEE,eACA,WACA,QACA,kBAIJ,4BAEE,eACA,sBACA,sBACA,kBAEA,sFAEE,0BACA,uBAGF,0CACE,UACA,oDAKJ,4DAEE,UAIA,6CAEE,gCACA,6BACA,kCACA,0BACA,gCACA,wBACA,gDAIJ,aACE,YACA,2DAEA,yCAEE,+BACA,8BACA,4BACA,gCACA,0BACA,8BAIJ,eACE,uBACA,eACA,aACA,2DACA,gDACA,sEACA,wCACA,kBAGF,yBACE,aAGF,8CAEE,eACA,0BACA,QACA,kBAEA,0HAEE,uBACA,mBACA,YACA,oBACA,sDAMF,8DACE,UACA,0BAGF,4DACE,SACA,2BAQF,oUAEE,oBAIJ,sBACE,UACA,oDAIF,+BACE,UAGF,eACE,aACA,eAEA,sEAqBF,6DAEE,qBARY,sIAWd,uCACE,oBAZY,sIAed,4CACE,mBAZU,mGAeZ,qCACE,kBAhBU,mGAmBZ,mIAKE,mCAKF,gBACE,yCACA,kCAGF,sKAKE,yCAGF,kBACE,yCACA,kCAGF,2HAKE,yCAGF,mBACE,4CACA,qCAGF,kFAGE,yCAGF,qLAKE,4CAGF,gBACE,yCACA,kCAGF,sBACE,+CAEA,wCAGF,wBACE,+CAEA,wCAKF,sBACE,mCACA,6CAEA,6EAKF,wBACE,gCACA,+CAGF,+BACE,8EAMJ,WACE,8BACE,mBACE,sBACA,eAGF,mEACE","file":"outlined-styles.css"}

package/focus/internal/_focus-ring.scss

@@ -27,9 +27,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-focus-ring-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-focus-ring-values();
 
   $active-width: map.get($tokens, 'active-width');
   $color: map.get($tokens, 'color');

package/focus/internal/focus-ring-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_focus-ring.scss"],"names":[],"mappings":"AA4CE,MACE,kEACA,iHACA,qDACA,sBACA,MAfM,mEAgBN,aACA,oBACA,kBAGF,iBACE,aAGF,sBACE,2CACA,+KACA,mLACA,mLACA,uLACA,wDACA,2DAGF,gBACE,yCACA,8KACA,kLACA,kLACA,sLACA,0DACA,MAvCc,wCA0ChB,wBACE,KACE,gBAEF,GACE,cAnDW,wCAuDf,0BACE,KACE,cAzDW,wCA6Df,uBACE,KACE,eAEF,GACE,aAlEW,wCAsEf,yBACE,KACE,aAxEW,wCA4Ef,+BACE,MACE","file":"focus-ring-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_focus-ring.scss"],"names":[],"mappings":"AA0CE,MACE,kEACA,iHACA,qDACA,sBACA,MAfM,mEAgBN,aACA,oBACA,kBAGF,iBACE,aAGF,sBACE,2CACA,+KACA,mLACA,mLACA,uLACA,wDACA,2DAGF,gBACE,yCACA,8KACA,kLACA,kLACA,sLACA,0DACA,MAvCc,wCA0ChB,wBACE,KACE,gBAEF,GACE,cAnDW,wCAuDf,0BACE,KACE,cAzDW,wCA6Df,uBACE,KACE,eAEF,GACE,aAlEW,wCAsEf,yBACE,KACE,aAxEW,wCA4Ef,+BACE,MACE","file":"focus-ring-styles.css"}

package/icon/internal/_icon.scss

@@ -26,9 +26,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-icon-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-icon-values();
 
   :host {
     font-size: map.get($tokens, 'size');

package/icon/internal/icon-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_icon.scss"],"names":[],"mappings":"AAgCE,MACE,oCACA,gCACA,iCACA,cACA,gCACA,gBACA,2DACA,oBACA,kBACA,mBACA,qBACA,cAEA,gBAOA,sBACA,oBACA,iBACA,mBACA,iBAEA,cAGA,mCAEA,kCAEA,kCAGF,eACE,kBAGF,aACE,YACA","file":"icon-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_icon.scss"],"names":[],"mappings":"AA8BE,MACE,oCACA,gCACA,iCACA,cACA,gCACA,gBACA,2DACA,oBACA,kBACA,mBACA,qBACA,cAEA,gBAOA,sBACA,oBACA,iBACA,mBACA,iBAEA,cAGA,mCAEA,kCAEA,kCAGF,eACE,kBAGF,aACE,YACA","file":"icon-styles.css"}

package/iconbutton/internal/_filled-icon-button.scss

@@ -26,9 +26,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-icon-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-filled-icon-button-values();
 
   :host {
     // Only use the logical properties.
@@ -53,7 +51,7 @@
       color: var(--_pressed-icon-color);
     }
 
-    &:disabled {
+    &:is(:disabled, [aria-disabled='true']) {
       color: var(--_disabled-icon-color);
     }
 
@@ -77,17 +75,17 @@
     z-index: -1; // place behind content
   }
 
-  .icon-button:disabled::before {
+  .icon-button:is(:disabled, [aria-disabled='true'])::before {
     background-color: var(--_disabled-container-color);
     opacity: var(--_disabled-container-opacity);
   }
 
-  .icon-button:disabled .icon {
+  .icon-button:is(:disabled, [aria-disabled='true']) .icon {
     opacity: var(--_disabled-icon-opacity);
   }
 
   .toggle-filled {
-    &:not(:disabled) {
+    &:not(:disabled, [aria-disabled='true']) {
       color: var(--_toggle-icon-color);
 
       &:hover {
@@ -111,14 +109,14 @@
     );
   }
 
-  .toggle-filled:not(:disabled)::before {
+  .toggle-filled:not(:disabled, [aria-disabled='true'])::before {
     // Note: filled icon buttons have three container colors,
     // "container-color" for regular, then selected/unselected for toggle.
     background-color: var(--_unselected-container-color);
   }
 
   .selected {
-    &:not(:disabled) {
+    &:not(:disabled, [aria-disabled='true']) {
       color: var(--_toggle-selected-icon-color);
 
       &:hover {
@@ -142,7 +140,7 @@
     );
   }
 
-  .selected:not(:disabled)::before {
+  .selected:not(:disabled, [aria-disabled='true'])::before {
     background-color: var(--_selected-container-color);
   }
 }

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

@@ -12,8 +12,6 @@
 @use '../../tokens';
 // go/keep-sorted end
 
-$_custom-property-prefix: 'filled-tonal-icon-button';
-
 @mixin theme($tokens) {
   $supported-tokens: tokens.$md-comp-filled-tonal-icon-button-supported-tokens;
   @each $token, $value in $tokens {
@@ -28,9 +26,7 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-filled-tonal-icon-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-filled-tonal-icon-button-values();
 
   :host {
     // Only use the logical properties.
@@ -55,7 +51,7 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
       color: var(--_pressed-icon-color);
     }
 
-    &:disabled {
+    &:is(:disabled, [aria-disabled='true']) {
       color: var(--_disabled-icon-color);
     }
 
@@ -79,17 +75,17 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
     z-index: -1; // place behind content
   }
 
-  .icon-button:disabled::before {
+  .icon-button:is(:disabled, [aria-disabled='true'])::before {
     background-color: var(--_disabled-container-color);
     opacity: var(--_disabled-container-opacity);
   }
 
-  .icon-button:disabled .icon {
+  .icon-button:is(:disabled, [aria-disabled='true']) .icon {
     opacity: var(--_disabled-icon-opacity);
   }
 
   .toggle-filled-tonal {
-    &:not(:disabled) {
+    &:not(:disabled, [aria-disabled='true']) {
       color: var(--_toggle-icon-color);
 
       &:hover {
@@ -113,14 +109,14 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
     );
   }
 
-  .toggle-filled-tonal:not(:disabled)::before {
+  .toggle-filled-tonal:not(:disabled, [aria-disabled='true'])::before {
     // Note: filled tonal icon buttons have three container colors,
     // "container-color" for regular, then selected/unselected for toggle.
     background-color: var(--_unselected-container-color);
   }
 
   .selected {
-    &:not(:disabled) {
+    &:not(:disabled, [aria-disabled='true']) {
       color: var(--_toggle-selected-icon-color);
 
       &:hover {
@@ -144,7 +140,7 @@ $_custom-property-prefix: 'filled-tonal-icon-button';
     );
   }
 
-  .selected:not(:disabled)::before {
+  .selected:not(:disabled, [aria-disabled='true'])::before {
     background-color: var(--_selected-container-color);
   }
 }

package/iconbutton/internal/_icon-button.scss

@@ -28,9 +28,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-icon-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-icon-button-values();
 
   :host {
     @each $token, $value in $tokens {
@@ -91,7 +89,7 @@
       color: var(--_pressed-icon-color);
     }
 
-    &:disabled {
+    &:is(:disabled, [aria-disabled='true']) {
       color: var(--_disabled-icon-color);
     }
   }
@@ -100,12 +98,12 @@
     border-radius: var(--_state-layer-shape);
   }
 
-  .standard:disabled .icon {
+  .standard:is(:disabled, [aria-disabled='true']) {
     opacity: var(--_disabled-icon-opacity);
   }
 
   .selected {
-    &:not(:disabled) {
+    &:not(:disabled, [aria-disabled='true']) {
       color: var(--_selected-icon-color);
 
       &:hover {

package/iconbutton/internal/_outlined-icon-button.scss

@@ -27,9 +27,7 @@
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-outlined-icon-button-values(
-    $exclude-custom-properties: false,
-  );
+  $tokens: tokens.md-comp-outlined-icon-button-values();
 
   :host {
     // Only use the logical properties.
@@ -69,7 +67,7 @@
       color: var(--_pressed-icon-color);
     }
 
-    &:disabled {
+    &:is(:disabled, [aria-disabled='true']) {
       color: var(--_disabled-icon-color);
 
       &::before {
@@ -79,7 +77,7 @@
     }
   }
 
-  .outlined:disabled .icon {
+  .outlined:is(:disabled, [aria-disabled='true']) .icon {
     opacity: var(--_disabled-icon-opacity);
   }
 
@@ -103,7 +101,7 @@
 
   // Selected icon button toggle.
   .selected {
-    &:not(:disabled) {
+    &:not(:disabled, [aria-disabled='true']) {
       color: var(--_selected-icon-color);
 
       &:hover {
@@ -129,17 +127,17 @@
     );
   }
 
-  .selected:not(:disabled)::before {
+  .selected:not(:disabled, [aria-disabled='true'])::before {
     background-color: var(--_selected-container-color);
   }
 
-  .selected:disabled::before {
+  .selected:is(:disabled, [aria-disabled='true'])::before {
     background-color: var(--_disabled-selected-container-color);
     opacity: var(--_disabled-selected-container-opacity);
   }
 
   @media (forced-colors: active) {
-    :host([disabled]) {
+    :host(:is([disabled], [soft-disabled])) {
       --_disabled-outline-opacity: 1;
     }
 
@@ -150,7 +148,7 @@
         border-width: var(--_outline-width);
       }
 
-      &:disabled::before {
+      &:is(:disabled, [aria-disabled='true'])::before {
         border-color: GrayText;
         opacity: 1;
       }

package/iconbutton/internal/_shared.scss

@@ -41,7 +41,7 @@
     );
   }
 
-  :host([disabled]) {
+  :host(:is([disabled], [soft-disabled])) {
     pointer-events: none;
   }
 
@@ -109,7 +109,8 @@
   }
 
   @media (forced-colors: active) {
-    :host([disabled]) {
+    :host(:is([disabled], [soft-disabled])) {
+      --_disabled-icon-color: GrayText;
       --_disabled-icon-opacity: 1;
     }
   }

package/iconbutton/internal/filled-styles.css

@@ -1 +1 @@
-:host{--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-height: var(--md-filled-icon-button-container-height, 40px);--_container-width: var(--md-filled-icon-button-container-width, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-icon-button-disabled-container-opacity, 0.12);--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-icon-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_toggle-focus-icon-color: var(--md-filled-icon-button-toggle-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-icon-color: var(--md-filled-icon-button-toggle-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-state-layer-color: var(--md-filled-icon-button-toggle-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-icon-color: var(--md-filled-icon-button-toggle-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-icon-color: var(--md-filled-icon-button-toggle-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-state-layer-color: var(--md-filled-icon-button-toggle-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.icon-button{color:var(--_icon-color);--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)}.icon-button:hover{color:var(--_hover-icon-color)}.icon-button:focus{color:var(--_focus-icon-color)}.icon-button:active{color:var(--_pressed-icon-color)}.icon-button:disabled{color:var(--_disabled-icon-color)}.icon-button::before{background-color:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute;z-index:-1}.icon-button:disabled::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.icon-button:disabled .icon{opacity:var(--_disabled-icon-opacity)}.toggle-filled{--md-ripple-hover-color: var(--_toggle-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-pressed-state-layer-color)}.toggle-filled:not(:disabled){color:var(--_toggle-icon-color)}.toggle-filled:not(:disabled):hover{color:var(--_toggle-hover-icon-color)}.toggle-filled:not(:disabled):focus{color:var(--_toggle-focus-icon-color)}.toggle-filled:not(:disabled):active{color:var(--_toggle-pressed-icon-color)}.toggle-filled:not(:disabled)::before{background-color:var(--_unselected-container-color)}.selected{--md-ripple-hover-color: var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-selected-pressed-state-layer-color)}.selected:not(:disabled){color:var(--_toggle-selected-icon-color)}.selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}.selected:not(:disabled)::before{background-color:var(--_selected-container-color)}/*# sourceMappingURL=filled-styles.css.map */
+:host{--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-height: var(--md-filled-icon-button-container-height, 40px);--_container-width: var(--md-filled-icon-button-container-width, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-icon-button-disabled-container-opacity, 0.12);--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-icon-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_toggle-focus-icon-color: var(--md-filled-icon-button-toggle-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-icon-color: var(--md-filled-icon-button-toggle-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-state-layer-color: var(--md-filled-icon-button-toggle-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-icon-color: var(--md-filled-icon-button-toggle-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-icon-color: var(--md-filled-icon-button-toggle-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-state-layer-color: var(--md-filled-icon-button-toggle-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.icon-button{color:var(--_icon-color);--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)}.icon-button:hover{color:var(--_hover-icon-color)}.icon-button:focus{color:var(--_focus-icon-color)}.icon-button:active{color:var(--_pressed-icon-color)}.icon-button:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}.icon-button::before{background-color:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute;z-index:-1}.icon-button:is(:disabled,[aria-disabled=true])::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.icon-button:is(:disabled,[aria-disabled=true]) .icon{opacity:var(--_disabled-icon-opacity)}.toggle-filled{--md-ripple-hover-color: var(--_toggle-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-pressed-state-layer-color)}.toggle-filled:not(:disabled,[aria-disabled=true]){color:var(--_toggle-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-hover-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-focus-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-pressed-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true])::before{background-color:var(--_unselected-container-color)}.selected{--md-ripple-hover-color: var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-selected-pressed-state-layer-color)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_toggle-selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-selected-pressed-icon-color)}.selected:not(:disabled,[aria-disabled=true])::before{background-color:var(--_selected-container-color)}/*# sourceMappingURL=filled-styles.css.map */

package/iconbutton/internal/filled-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_filled-icon-button.scss","../../ripple/internal/_ripple.scss"],"names":[],"mappings":"AAgCE,MAII,ggIAIJ,aACE,yBCpBE,oPDsBF,mBACE,+BAGF,mBACE,+BAGF,oBACE,iCAGF,sBACE,kCAaJ,qBAEE,yCACA,sBACA,WACA,QACA,kBACA,WAGF,8BACE,kDACA,2CAGF,4BACE,sCAGF,eCnEI,oIDoEF,8BACE,gCAEA,oCACE,sCAGF,oCACE,sCAGF,qCACE,wCAYN,sCAGE,oDAGF,UClGI,sJDmGF,yBACE,yCAEA,+BACE,+CAGF,+BACE,+CAGF,gCACE,iDAYN,iCACE","file":"filled-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_filled-icon-button.scss","../../ripple/internal/_ripple.scss"],"names":[],"mappings":"AA8BE,MAII,ggIAIJ,aACE,yBClBE,oPDoBF,mBACE,+BAGF,mBACE,+BAGF,oBACE,iCAGF,gDACE,kCAaJ,qBAEE,yCACA,sBACA,WACA,QACA,kBACA,WAGF,wDACE,kDACA,2CAGF,sDACE,sCAGF,eCjEI,oIDkEF,mDACE,gCAEA,yDACE,sCAGF,yDACE,sCAGF,0DACE,wCAYN,2DAGE,oDAGF,UChGI,sJDiGF,8CACE,yCAEA,oDACE,+CAGF,oDACE,+CAGF,qDACE,iDAYN,sDACE","file":"filled-styles.css"}

package/iconbutton/internal/filled-styles.js

@@ -5,6 +5,6 @@
  */
 // Generated stylesheet for ./iconbutton/internal/filled-styles.css.
 import { css } from 'lit';
-export const styles = css `:host{--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-height: var(--md-filled-icon-button-container-height, 40px);--_container-width: var(--md-filled-icon-button-container-width, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-icon-button-disabled-container-opacity, 0.12);--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-icon-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_toggle-focus-icon-color: var(--md-filled-icon-button-toggle-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-icon-color: var(--md-filled-icon-button-toggle-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-state-layer-color: var(--md-filled-icon-button-toggle-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-icon-color: var(--md-filled-icon-button-toggle-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-icon-color: var(--md-filled-icon-button-toggle-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-state-layer-color: var(--md-filled-icon-button-toggle-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.icon-button{color:var(--_icon-color);--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)}.icon-button:hover{color:var(--_hover-icon-color)}.icon-button:focus{color:var(--_focus-icon-color)}.icon-button:active{color:var(--_pressed-icon-color)}.icon-button:disabled{color:var(--_disabled-icon-color)}.icon-button::before{background-color:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute;z-index:-1}.icon-button:disabled::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.icon-button:disabled .icon{opacity:var(--_disabled-icon-opacity)}.toggle-filled{--md-ripple-hover-color: var(--_toggle-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-pressed-state-layer-color)}.toggle-filled:not(:disabled){color:var(--_toggle-icon-color)}.toggle-filled:not(:disabled):hover{color:var(--_toggle-hover-icon-color)}.toggle-filled:not(:disabled):focus{color:var(--_toggle-focus-icon-color)}.toggle-filled:not(:disabled):active{color:var(--_toggle-pressed-icon-color)}.toggle-filled:not(:disabled)::before{background-color:var(--_unselected-container-color)}.selected{--md-ripple-hover-color: var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-selected-pressed-state-layer-color)}.selected:not(:disabled){color:var(--_toggle-selected-icon-color)}.selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}.selected:not(:disabled)::before{background-color:var(--_selected-container-color)}
+export const styles = css `:host{--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-height: var(--md-filled-icon-button-container-height, 40px);--_container-width: var(--md-filled-icon-button-container-width, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-icon-button-disabled-container-opacity, 0.12);--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-icon-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_toggle-focus-icon-color: var(--md-filled-icon-button-toggle-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-icon-color: var(--md-filled-icon-button-toggle-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-state-layer-color: var(--md-filled-icon-button-toggle-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-icon-color: var(--md-filled-icon-button-toggle-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-icon-color: var(--md-filled-icon-button-toggle-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-state-layer-color: var(--md-filled-icon-button-toggle-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.icon-button{color:var(--_icon-color);--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)}.icon-button:hover{color:var(--_hover-icon-color)}.icon-button:focus{color:var(--_focus-icon-color)}.icon-button:active{color:var(--_pressed-icon-color)}.icon-button:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}.icon-button::before{background-color:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute;z-index:-1}.icon-button:is(:disabled,[aria-disabled=true])::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.icon-button:is(:disabled,[aria-disabled=true]) .icon{opacity:var(--_disabled-icon-opacity)}.toggle-filled{--md-ripple-hover-color: var(--_toggle-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-pressed-state-layer-color)}.toggle-filled:not(:disabled,[aria-disabled=true]){color:var(--_toggle-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-hover-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-focus-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-pressed-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true])::before{background-color:var(--_unselected-container-color)}.selected{--md-ripple-hover-color: var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-selected-pressed-state-layer-color)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_toggle-selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-selected-pressed-icon-color)}.selected:not(:disabled,[aria-disabled=true])::before{background-color:var(--_selected-container-color)}
 `;
 //# sourceMappingURL=filled-styles.js.map

package/iconbutton/internal/filled-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-styles.js","sourceRoot":"","sources":["filled-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,oEAAoE;AACpE,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./iconbutton/internal/filled-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-height: var(--md-filled-icon-button-container-height, 40px);--_container-width: var(--md-filled-icon-button-container-width, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-icon-button-disabled-container-opacity, 0.12);--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-icon-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_toggle-focus-icon-color: var(--md-filled-icon-button-toggle-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-icon-color: var(--md-filled-icon-button-toggle-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-state-layer-color: var(--md-filled-icon-button-toggle-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-icon-color: var(--md-filled-icon-button-toggle-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-icon-color: var(--md-filled-icon-button-toggle-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-state-layer-color: var(--md-filled-icon-button-toggle-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.icon-button{color:var(--_icon-color);--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)}.icon-button:hover{color:var(--_hover-icon-color)}.icon-button:focus{color:var(--_focus-icon-color)}.icon-button:active{color:var(--_pressed-icon-color)}.icon-button:disabled{color:var(--_disabled-icon-color)}.icon-button::before{background-color:var(--_container-color);border-radius:inherit;content:\"\";inset:0;position:absolute;z-index:-1}.icon-button:disabled::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.icon-button:disabled .icon{opacity:var(--_disabled-icon-opacity)}.toggle-filled{--md-ripple-hover-color: var(--_toggle-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-pressed-state-layer-color)}.toggle-filled:not(:disabled){color:var(--_toggle-icon-color)}.toggle-filled:not(:disabled):hover{color:var(--_toggle-hover-icon-color)}.toggle-filled:not(:disabled):focus{color:var(--_toggle-focus-icon-color)}.toggle-filled:not(:disabled):active{color:var(--_toggle-pressed-icon-color)}.toggle-filled:not(:disabled)::before{background-color:var(--_unselected-container-color)}.selected{--md-ripple-hover-color: var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-selected-pressed-state-layer-color)}.selected:not(:disabled){color:var(--_toggle-selected-icon-color)}.selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}.selected:not(:disabled)::before{background-color:var(--_selected-container-color)}\n`;\n"]}
+{"version":3,"file":"filled-styles.js","sourceRoot":"","sources":["filled-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,oEAAoE;AACpE,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./iconbutton/internal/filled-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{--_container-color: var(--md-filled-icon-button-container-color, var(--md-sys-color-primary, #6750a4));--_container-height: var(--md-filled-icon-button-container-height, 40px);--_container-width: var(--md-filled-icon-button-container-width, 40px);--_disabled-container-color: var(--md-filled-icon-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-icon-button-disabled-container-opacity, 0.12);--_disabled-icon-color: var(--md-filled-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-icon-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-icon-button-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-icon-color: var(--md-filled-icon-button-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-color: var(--md-filled-icon-button-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_hover-state-layer-opacity: var(--md-filled-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-icon-button-icon-color, var(--md-sys-color-on-primary, #fff));--_icon-size: var(--md-filled-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-icon-button-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-color: var(--md-filled-icon-button-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_pressed-state-layer-opacity: var(--md-filled-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-icon-button-selected-container-color, var(--md-sys-color-primary, #6750a4));--_toggle-selected-focus-icon-color: var(--md-filled-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-icon-color: var(--md-filled-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-hover-state-layer-color: var(--md-filled-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-icon-color: var(--md-filled-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-icon-color: var(--md-filled-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff));--_toggle-selected-pressed-state-layer-color: var(--md-filled-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-primary, #fff));--_unselected-container-color: var(--md-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_toggle-focus-icon-color: var(--md-filled-icon-button-toggle-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-icon-color: var(--md-filled-icon-button-toggle-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-hover-state-layer-color: var(--md-filled-icon-button-toggle-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_toggle-icon-color: var(--md-filled-icon-button-toggle-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-icon-color: var(--md-filled-icon-button-toggle-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_toggle-pressed-state-layer-color: var(--md-filled-icon-button-toggle-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var(--md-filled-icon-button-container-shape-start-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-icon-button-container-shape-start-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-icon-button-container-shape-end-end, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-icon-button-container-shape-end-start, var(--md-filled-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.icon-button{color:var(--_icon-color);--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)}.icon-button:hover{color:var(--_hover-icon-color)}.icon-button:focus{color:var(--_focus-icon-color)}.icon-button:active{color:var(--_pressed-icon-color)}.icon-button:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}.icon-button::before{background-color:var(--_container-color);border-radius:inherit;content:\"\";inset:0;position:absolute;z-index:-1}.icon-button:is(:disabled,[aria-disabled=true])::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.icon-button:is(:disabled,[aria-disabled=true]) .icon{opacity:var(--_disabled-icon-opacity)}.toggle-filled{--md-ripple-hover-color: var(--_toggle-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-pressed-state-layer-color)}.toggle-filled:not(:disabled,[aria-disabled=true]){color:var(--_toggle-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-hover-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-focus-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-pressed-icon-color)}.toggle-filled:not(:disabled,[aria-disabled=true])::before{background-color:var(--_unselected-container-color)}.selected{--md-ripple-hover-color: var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-selected-pressed-state-layer-color)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_toggle-selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-selected-pressed-icon-color)}.selected:not(:disabled,[aria-disabled=true])::before{background-color:var(--_selected-container-color)}\n`;\n"]}

package/iconbutton/internal/filled-tonal-styles.css

@@ -1 +1 @@
-:host{--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-height: var(--md-filled-tonal-icon-button-container-height, 40px);--_container-width: var(--md-filled-tonal-icon-button-container-width, 40px);--_disabled-container-color: var(--md-filled-tonal-icon-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-tonal-icon-button-disabled-container-opacity, 0.12);--_disabled-icon-color: var(--md-filled-tonal-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-tonal-icon-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-icon-color: var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_toggle-selected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-container-color: var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_toggle-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-icon-color: var(--md-filled-tonal-icon-button-toggle-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.icon-button{color:var(--_icon-color);--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)}.icon-button:hover{color:var(--_hover-icon-color)}.icon-button:focus{color:var(--_focus-icon-color)}.icon-button:active{color:var(--_pressed-icon-color)}.icon-button:disabled{color:var(--_disabled-icon-color)}.icon-button::before{background-color:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute;z-index:-1}.icon-button:disabled::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.icon-button:disabled .icon{opacity:var(--_disabled-icon-opacity)}.toggle-filled-tonal{--md-ripple-hover-color: var(--_toggle-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-pressed-state-layer-color)}.toggle-filled-tonal:not(:disabled){color:var(--_toggle-icon-color)}.toggle-filled-tonal:not(:disabled):hover{color:var(--_toggle-hover-icon-color)}.toggle-filled-tonal:not(:disabled):focus{color:var(--_toggle-focus-icon-color)}.toggle-filled-tonal:not(:disabled):active{color:var(--_toggle-pressed-icon-color)}.toggle-filled-tonal:not(:disabled)::before{background-color:var(--_unselected-container-color)}.selected{--md-ripple-hover-color: var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-selected-pressed-state-layer-color)}.selected:not(:disabled){color:var(--_toggle-selected-icon-color)}.selected:not(:disabled):hover{color:var(--_toggle-selected-hover-icon-color)}.selected:not(:disabled):focus{color:var(--_toggle-selected-focus-icon-color)}.selected:not(:disabled):active{color:var(--_toggle-selected-pressed-icon-color)}.selected:not(:disabled)::before{background-color:var(--_selected-container-color)}/*# sourceMappingURL=filled-tonal-styles.css.map */
+:host{--_container-color: var(--md-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container, #e8def8));--_container-height: var(--md-filled-tonal-icon-button-container-height, 40px);--_container-width: var(--md-filled-tonal-icon-button-container-width, 40px);--_disabled-container-color: var(--md-filled-tonal-icon-button-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-tonal-icon-button-disabled-container-opacity, 0.12);--_disabled-icon-color: var(--md-filled-tonal-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-filled-tonal-icon-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-filled-tonal-icon-button-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-icon-color: var(--md-filled-tonal-icon-button-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-color: var(--md-filled-tonal-icon-button-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_hover-state-layer-opacity: var(--md-filled-tonal-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_icon-size: var(--md-filled-tonal-icon-button-icon-size, 24px);--_pressed-icon-color: var(--md-filled-tonal-icon-button-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-color: var(--md-filled-tonal-icon-button-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_pressed-state-layer-opacity: var(--md-filled-tonal-icon-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_toggle-selected-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_toggle-selected-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-container-color: var(--md-filled-tonal-icon-button-unselected-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_toggle-focus-icon-color: var(--md-filled-tonal-icon-button-toggle-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-hover-icon-color: var(--md-filled-tonal-icon-button-toggle-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-hover-state-layer-color: var(--md-filled-tonal-icon-button-toggle-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-icon-color: var(--md-filled-tonal-icon-button-toggle-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-pressed-icon-color: var(--md-filled-tonal-icon-button-toggle-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_toggle-pressed-state-layer-color: var(--md-filled-tonal-icon-button-toggle-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_container-shape-start-start: var(--md-filled-tonal-icon-button-container-shape-start-start, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-start-end: var(--md-filled-tonal-icon-button-container-shape-start-end, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-end: var(--md-filled-tonal-icon-button-container-shape-end-end, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)));--_container-shape-end-start: var(--md-filled-tonal-icon-button-container-shape-end-start, var(--md-filled-tonal-icon-button-container-shape, var(--md-sys-shape-corner-full, 9999px)))}.icon-button{color:var(--_icon-color);--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)}.icon-button:hover{color:var(--_hover-icon-color)}.icon-button:focus{color:var(--_focus-icon-color)}.icon-button:active{color:var(--_pressed-icon-color)}.icon-button:is(:disabled,[aria-disabled=true]){color:var(--_disabled-icon-color)}.icon-button::before{background-color:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute;z-index:-1}.icon-button:is(:disabled,[aria-disabled=true])::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.icon-button:is(:disabled,[aria-disabled=true]) .icon{opacity:var(--_disabled-icon-opacity)}.toggle-filled-tonal{--md-ripple-hover-color: var(--_toggle-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-pressed-state-layer-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]){color:var(--_toggle-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-hover-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-focus-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-pressed-icon-color)}.toggle-filled-tonal:not(:disabled,[aria-disabled=true])::before{background-color:var(--_unselected-container-color)}.selected{--md-ripple-hover-color: var(--_toggle-selected-hover-state-layer-color);--md-ripple-pressed-color: var(--_toggle-selected-pressed-state-layer-color)}.selected:not(:disabled,[aria-disabled=true]){color:var(--_toggle-selected-icon-color)}.selected:not(:disabled,[aria-disabled=true]):hover{color:var(--_toggle-selected-hover-icon-color)}.selected:not(:disabled,[aria-disabled=true]):focus{color:var(--_toggle-selected-focus-icon-color)}.selected:not(:disabled,[aria-disabled=true]):active{color:var(--_toggle-selected-pressed-icon-color)}.selected:not(:disabled,[aria-disabled=true])::before{background-color:var(--_selected-container-color)}/*# sourceMappingURL=filled-tonal-styles.css.map */

package/iconbutton/internal/filled-tonal-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_filled-tonal-icon-button.scss","../../ripple/internal/_ripple.scss"],"names":[],"mappings":"AAkCE,MAII,k/IAIJ,aACE,yBCtBE,oPDwBF,mBACE,+BAGF,mBACE,+BAGF,oBACE,iCAGF,sBACE,kCAaJ,qBAEE,yCACA,sBACA,WACA,QACA,kBACA,WAGF,8BACE,kDACA,2CAGF,4BACE,sCAGF,qBCrEI,oIDsEF,oCACE,gCAEA,0CACE,sCAGF,0CACE,sCAGF,2CACE,wCAYN,4CAGE,oDAGF,UCpGI,sJDqGF,yBACE,yCAEA,+BACE,+CAGF,+BACE,+CAGF,gCACE,iDAYN,iCACE","file":"filled-tonal-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_filled-tonal-icon-button.scss","../../ripple/internal/_ripple.scss"],"names":[],"mappings":"AA8BE,MAII,k/IAIJ,aACE,yBClBE,oPDoBF,mBACE,+BAGF,mBACE,+BAGF,oBACE,iCAGF,gDACE,kCAaJ,qBAEE,yCACA,sBACA,WACA,QACA,kBACA,WAGF,wDACE,kDACA,2CAGF,sDACE,sCAGF,qBCjEI,oIDkEF,yDACE,gCAEA,+DACE,sCAGF,+DACE,sCAGF,gEACE,wCAYN,iEAGE,oDAGF,UChGI,sJDiGF,8CACE,yCAEA,oDACE,+CAGF,oDACE,+CAGF,qDACE,iDAYN,sDACE","file":"filled-tonal-styles.css"}