@material/web 2.1.1-nightly.024d6d9.0 → 2.1.1-nightly.28d8a1e.0

package/checkbox/internal/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '../../internal/events/form-label-activation.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../labs/behaviors/constraint-validation.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\nimport {CheckboxValidator} from '../../labs/behaviors/validators/checkbox-validator.js';\n\n// Separate variable needed for closure.\nconst checkboxBaseClass = mixinDelegatesAria(\n  mixinConstraintValidation(\n    mixinFormAssociated(mixinElementInternals(LitElement)),\n  ),\n);\n\n/**\n * A checkbox component.\n *\n *\n * @fires change {Event} The native `change` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n * --bubbles\n * @fires input {InputEvent} The native `input` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)\n * --bubbles --composed\n */\nexport class Checkbox extends checkboxBaseClass {\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Whether or not the checkbox is selected.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Whether or not the checkbox is indeterminate.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n   */\n  @property({type: Boolean}) indeterminate = false;\n\n  /**\n   * When true, require the checkbox to be selected when participating in\n   * form submission.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The value of the checkbox that is submitted with a form when selected.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  @property() value = 'on';\n\n  @state() private prevChecked = false;\n  @state() private prevDisabled = false;\n  @state() private prevIndeterminate = false;\n  @query('input') private readonly input!: HTMLInputElement | null;\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', (event: MouseEvent) => {\n        if (!isActivationClick(event) || !this.input) {\n          return;\n        }\n        this.focus();\n        dispatchActivationClick(this.input);\n      });\n    }\n  }\n\n  protected override update(changed: PropertyValues<Checkbox>) {\n    if (\n      changed.has('checked') ||\n      changed.has('disabled') ||\n      changed.has('indeterminate')\n    ) {\n      this.prevChecked = changed.get('checked') ?? this.checked;\n      this.prevDisabled = changed.get('disabled') ?? this.disabled;\n      this.prevIndeterminate =\n        changed.get('indeterminate') ?? this.indeterminate;\n    }\n\n    super.update(changed);\n  }\n\n  protected override render() {\n    const prevNone = !this.prevChecked && !this.prevIndeterminate;\n    const prevChecked = this.prevChecked && !this.prevIndeterminate;\n    const prevIndeterminate = this.prevIndeterminate;\n    const isChecked = this.checked && !this.indeterminate;\n    const isIndeterminate = this.indeterminate;\n\n    const containerClasses = classMap({\n      'disabled': this.disabled,\n      'selected': isChecked || isIndeterminate,\n      'unselected': !isChecked && !isIndeterminate,\n      'checked': isChecked,\n      'indeterminate': isIndeterminate,\n      'prev-unselected': prevNone,\n      'prev-checked': prevChecked,\n      'prev-indeterminate': prevIndeterminate,\n      'prev-disabled': this.prevDisabled,\n    });\n\n    // Needed for closure conformance\n    const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n    // Note: <input> needs to be rendered before the <svg> for\n    // form.reportValidity() to work in Chrome.\n    return html`\n      <div class=\"container ${containerClasses}\">\n        <input\n          type=\"checkbox\"\n          id=\"input\"\n          aria-checked=${isIndeterminate ? 'mixed' : nothing}\n          aria-label=${ariaLabel || nothing}\n          aria-invalid=${ariaInvalid || nothing}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          .indeterminate=${this.indeterminate}\n          .checked=${this.checked}\n          @input=${this.handleInput}\n          @change=${this.handleChange} />\n\n        <div class=\"outline\"></div>\n        <div class=\"background\"></div>\n        <md-focus-ring part=\"focus-ring\" for=\"input\"></md-focus-ring>\n        <md-ripple for=\"input\" ?disabled=${this.disabled}></md-ripple>\n        <svg class=\"icon\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n          <rect class=\"mark short\" />\n          <rect class=\"mark long\" />\n        </svg>\n      </div>\n    `;\n  }\n\n  private handleInput(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.indeterminate = target.indeterminate;\n    // <input> 'input' event bubbles and is composed, don't re-dispatch it.\n  }\n\n  private handleChange(event: Event) {\n    // <input> 'change' event is not composed, re-dispatch it.\n    redispatchEvent(this, event);\n  }\n\n  // Writable mixin properties for lit-html binding, needed for lit-analyzer\n  declare disabled: boolean;\n  declare name: string;\n\n  override [getFormValue]() {\n    if (!this.checked || this.indeterminate) {\n      return null;\n    }\n\n    return this.value;\n  }\n\n  override [getFormState]() {\n    return String(this.checked);\n  }\n\n  override formResetCallback() {\n    // The checked property does not reflect, so the original attribute set by\n    // the user is used to determine the default value.\n    this.checked = this.hasAttribute('checked');\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.checked = state === 'true';\n  }\n\n  [createValidator]() {\n    return new CheckboxValidator(() => this);\n  }\n\n  [getValidityAnchor]() {\n    return this.input;\n  }\n}\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2019 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, isServer, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '../../internal/events/form-label-activation.js';\nimport {redispatchEvent} from '../../internal/events/redispatch-event.js';\nimport {\n  createValidator,\n  getValidityAnchor,\n  mixinConstraintValidation,\n} from '../../labs/behaviors/constraint-validation.js';\nimport {mixinElementInternals} from '../../labs/behaviors/element-internals.js';\nimport {\n  getFormState,\n  getFormValue,\n  mixinFormAssociated,\n} from '../../labs/behaviors/form-associated.js';\nimport {CheckboxValidator} from '../../labs/behaviors/validators/checkbox-validator.js';\n\n// Separate variable needed for closure.\nconst checkboxBaseClass = mixinDelegatesAria(\n  mixinConstraintValidation(\n    mixinFormAssociated(mixinElementInternals(LitElement)),\n  ),\n);\n\n/**\n * A checkbox component.\n *\n *\n * @fires change {Event} The native `change` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n * --bubbles\n * @fires input {InputEvent} The native `input` event on\n * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)\n * --bubbles --composed\n */\nexport class Checkbox extends checkboxBaseClass {\n  /** @nocollapse */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Whether or not the checkbox is selected.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Whether or not the checkbox is indeterminate.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes\n   */\n  @property({type: Boolean}) indeterminate = false;\n\n  /**\n   * When true, require the checkbox to be selected when participating in\n   * form submission.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation\n   */\n  @property({type: Boolean}) required = false;\n\n  /**\n   * The value of the checkbox that is submitted with a form when selected.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n   */\n  @property() value = 'on';\n\n  @state() private prevChecked = false;\n  @state() private prevDisabled = false;\n  @state() private prevIndeterminate = false;\n  @query('input') private readonly input!: HTMLInputElement | null;\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('click', (event: MouseEvent) => {\n        if (!isActivationClick(event) || !this.input) {\n          return;\n        }\n        this.focus();\n        dispatchActivationClick(this.input);\n      });\n    }\n  }\n\n  protected override update(changed: PropertyValues<Checkbox>) {\n    if (\n      changed.has('checked') ||\n      changed.has('disabled') ||\n      changed.has('indeterminate')\n    ) {\n      this.prevChecked = changed.get('checked') ?? this.checked;\n      this.prevDisabled = changed.get('disabled') ?? this.disabled;\n      this.prevIndeterminate =\n        changed.get('indeterminate') ?? this.indeterminate;\n    }\n\n    super.update(changed);\n  }\n\n  protected override render() {\n    const prevNone = !this.prevChecked && !this.prevIndeterminate;\n    const prevChecked = this.prevChecked && !this.prevIndeterminate;\n    const prevIndeterminate = this.prevIndeterminate;\n    const isChecked = this.checked && !this.indeterminate;\n    const isIndeterminate = this.indeterminate;\n\n    const containerClasses = classMap({\n      'disabled': this.disabled,\n      'selected': isChecked || isIndeterminate,\n      'unselected': !isChecked && !isIndeterminate,\n      'checked': isChecked,\n      'indeterminate': isIndeterminate,\n      'prev-unselected': prevNone,\n      'prev-checked': prevChecked,\n      'prev-indeterminate': prevIndeterminate,\n      'prev-disabled': this.prevDisabled,\n    });\n\n    // Needed for closure conformance\n    const {ariaLabel, ariaInvalid} = this as ARIAMixinStrict;\n    // Note: <input> needs to be rendered before the <svg> for\n    // form.reportValidity() to work in Chrome.\n    return html`\n      <div class=\"container ${containerClasses}\">\n        <input\n          type=\"checkbox\"\n          id=\"input\"\n          aria-checked=${isIndeterminate ? 'mixed' : nothing}\n          aria-label=${ariaLabel || nothing}\n          aria-invalid=${ariaInvalid || nothing}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          .indeterminate=${this.indeterminate}\n          .checked=${this.checked}\n          @input=${this.handleInput}\n          @change=${this.handleChange} />\n\n        <div class=\"outline\"></div>\n        <div class=\"background\"></div>\n        <md-focus-ring part=\"focus-ring\" for=\"input\"></md-focus-ring>\n        <md-ripple for=\"input\" ?disabled=${this.disabled}></md-ripple>\n        <svg class=\"icon\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n          <rect class=\"mark short\" />\n          <rect class=\"mark long\" />\n        </svg>\n      </div>\n    `;\n  }\n\n  private handleInput(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.indeterminate = target.indeterminate;\n    // <input> 'input' event bubbles and is composed, don't re-dispatch it.\n  }\n\n  private handleChange(event: Event) {\n    // <input> 'change' event is not composed, re-dispatch it.\n    redispatchEvent(this, event);\n  }\n\n  // Writable mixin properties for lit-html binding, needed for lit-analyzer\n  declare disabled: boolean;\n  declare name: string;\n\n  override [getFormValue]() {\n    if (!this.checked || this.indeterminate) {\n      return null;\n    }\n\n    return this.value;\n  }\n\n  override [getFormState]() {\n    return String(this.checked);\n  }\n\n  override formResetCallback() {\n    // The checked property does not reflect, so the original attribute set by\n    // the user is used to determine the default value.\n    this.checked = this.hasAttribute('checked');\n  }\n\n  override formStateRestoreCallback(state: string) {\n    this.checked = state === 'true';\n  }\n\n  override [createValidator]() {\n    return new CheckboxValidator(() => this);\n  }\n\n  override [getValidityAnchor]() {\n    return this.input;\n  }\n}\n"]}

package/field/internal/_shared.scss

@@ -72,6 +72,17 @@
     pointer-events: none;
   }
 
+  slot[name='container'] {
+    border-radius: inherit;
+  }
+
+  slot[name='container']::slotted(*) {
+    border-radius: inherit;
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+  }
+
   @include content.styles;
   @include label.styles;
   @include supporting-text.styles;

package/field/internal/field.d.ts

@@ -55,6 +55,7 @@ export declare class Field extends LitElement {
     protected render(): TemplateResult<1>;
     protected updated(changed: PropertyValues<Field>): void;
     protected renderBackground?(): TemplateResult;
+    protected renderStateLayer?(): TemplateResult;
     protected renderIndicator?(): TemplateResult;
     protected renderOutline?(floatingLabel: unknown): TemplateResult;
     private renderSupportingText;

package/field/internal/field.js

@@ -104,7 +104,9 @@ export class Field extends LitElement {
         return html `
       <div class="field ${classMap(classes)}">
         <div class="container-overflow">
-          ${this.renderBackground?.()} ${this.renderIndicator?.()} ${outline}
+          ${this.renderBackground?.()}
+          <slot name="container"></slot>
+          ${this.renderStateLayer?.()} ${this.renderIndicator?.()} ${outline}
           <div class="container">
             <div class="start">
               <slot name="start"></slot>

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":"AAAA;;;;GAIG;;AAEH,OAAO,EACL,IAAI,EACJ,UAAU,EACV,OAAO,EAEP,MAAM,GAEP,MAAM,KAAK,CAAC;AACb,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAChF,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,MAAM,EAAC,MAAM,oCAAoC,CAAC;AAE1D;;GAEG;AACH,MAAM,OAAO,KAAM,SAAQ,UAAU;IAArC;;QAC6B,aAAQ,GAAG,KAAK,CAAC;QACjB,UAAK,GAAG,KAAK,CAAC;QACd,YAAO,GAAG,KAAK,CAAC;QAC/B,UAAK,GAAG,EAAE,CAAC;QAC8B,eAAU,GAAG,KAAK,CAAC;QAC7C,cAAS,GAAG,KAAK,CAAC;QAClB,aAAQ,GAAG,KAAK,CAAC;QACjB,cAAS,GAAG,KAAK,CAAC;QACH,mBAAc,GAAG,EAAE,CAAC;QACzB,cAAS,GAAG,EAAE,CAAC;QAC1B,UAAK,GAAG,CAAC,CAAC,CAAC;QACX,QAAG,GAAG,CAAC,CAAC,CAAC;QAEnC;;WAEG;QACgD,aAAQ,GAAG,KAAK,CAAC;QAEpE;;WAEG;QAC8C,WAAM,GAAG,KAAK,CAAC;QAsB/C,gBAAW,GAAG,KAAK,CAAC;QAErC;;;;WAIG;QACc,sBAAiB,GAAG,KAAK,CAAC;QAC1B,uBAAkB,GAAG,KAAK,CAAC;IAmS9C,CAAC;IA5TC,IAAY,WAAW;QACrB,6EAA6E;QAC7E,4EAA4E;QAC5E,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;QACvC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;QACnC,uEAAuE;QACvE,IAAI,aAAa,GAAG,CAAC,IAAI,WAAW,IAAI,CAAC,EAAE;YACzC,OAAO,EAAE,CAAC;SACX;QAED,OAAO,GAAG,aAAa,MAAM,WAAW,EAAE,CAAC;IAC7C,CAAC;IAED,IAAY,qBAAqB;QAC/B,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC;IAC7E,CAAC;IAgBD;;;;;;OAMG;IACH,eAAe;QACb,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;IAChC,CAAC;IAEkB,MAAM,CAAC,KAA4B;QACpD,+BAA+B;QAC/B,MAAM,kBAAkB,GACtB,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,SAAS,CAAC;QAC/D,IAAI,kBAAkB,EAAE;YACtB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;SAChC;QAED,kDAAkD;QAClD,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE;YACjC,KAAK,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;YAC3B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;QAED,0CAA0C;QAC1C,IAAI,CAAC,oBAAoB,CAAC;YACxB,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC;YAChC,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC;SACrC,CAAC,CAAC;QAEH,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAEkB,MAAM;QACvB,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAC5D,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAC5D,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,aAAa,CAAC,CAAC;QACpD,MAAM,OAAO,GAAG;YACd,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,qBAAqB,EAAE,IAAI,CAAC,kBAAkB;YAC9C,OAAO,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ;YACrC,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,YAAY,EAAE,IAAI,CAAC,QAAQ;YAC3B,UAAU,EAAE,IAAI,CAAC,MAAM;YACvB,WAAW,EAAE,IAAI,CAAC,SAAS;YAC3B,WAAW,EAAE,IAAI,CAAC,SAAS;YAC3B,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,UAAU,EAAE,CAAC,IAAI,CAAC,KAAK;SACxB,CAAC;QAEF,OAAO,IAAI,CAAA;0BACW,QAAQ,CAAC,OAAO,CAAC;;YAE/B,IAAI,CAAC,gBAAgB,EAAE,EAAE;;YAEzB,IAAI,CAAC,gBAAgB,EAAE,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE,EAAE,IAAI,OAAO;;;;;;;kBAO1D,YAAY,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa;;;;;;;;;;;UAWzD,IAAI,CAAC,oBAAoB,EAAE;;KAEhC,CAAC;IACJ,CAAC;IAEkB,OAAO,CAAC,OAA8B;QACvD,IACE,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC;YAC7B,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC;YACxB,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;YACpB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAClB;YACA,IAAI,CAAC,4BAA4B,EAAE,CAAC;SACrC;QAED,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC1B,yEAAyE;YACzE,+DAA+D;YAC/D,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;YACjC,CAAC,CAAC,CAAC;SACJ;QAED,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC3B,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;YAClC,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAOO,oBAAoB;QAC1B,MAAM,EAAC,qBAAqB,EAAE,WAAW,EAAC,GAAG,IAAI,CAAC;QAClD,IAAI,CAAC,qBAAqB,IAAI,CAAC,WAAW,EAAE;YAC1C,OAAO,OAAO,CAAC;SAChB;QAED,oEAAoE;QACpE,yCAAyC;QACzC,MAAM,KAAK,GAAG,IAAI,CAAA,SAAS,qBAAqB,SAAS,CAAC;QAC1D,mEAAmE;QACnE,sDAAsD;QACtD,MAAM,GAAG,GAAG,WAAW;YACrB,CAAC,CAAC,IAAI,CAAA,yBAAyB,WAAW,SAAS;YACnD,CAAC,CAAC,OAAO,CAAC;QAEZ,wDAAwD;QACxD,sEAAsE;QACtE,oEAAoE;QACpE,sCAAsC;QACtC,MAAM,mBAAmB,GACvB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;QAC1D,MAAM,IAAI,GAAG,mBAAmB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;QACrD,OAAO,IAAI,CAAA;0CAC2B,IAAI,IAAI,KAAK,GAAG,GAAG;;;sBAGvC,IAAI,CAAC,4BAA4B;KAClD,CAAC;IACJ,CAAC;IAEO,4BAA4B;QAClC,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,sBAAsB,EAAE;YACjD,MAAM,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE,OAAO,CAAC,CAAC;YACzE,OAAO,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;SACpC;IACH,CAAC;IAEO,WAAW,CAAC,UAAmB;QACrC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,OAAO,OAAO,CAAC;SAChB;QAED,IAAI,OAAgB,CAAC;QACrB,IAAI,UAAU,EAAE;YACd,sEAAsE;YACtE,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC;SAC9D;aAAM;YACL,qEAAqE;YACrE,aAAa;YACb,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;SACjE;QAED,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,CAAC,OAAO;YAClB,UAAU,EAAE,UAAU;YACtB,SAAS,EAAE,CAAC,UAAU;SACvB,CAAC;QAEF,0DAA0D;QAC1D,MAAM,SAAS,GAAG,GAAG,IAAI,CAAC,KAAK,GAC7B,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAC5C,EAAE,CAAC;QAEH,OAAO,IAAI,CAAA;2BACY,QAAQ,CAAC,OAAO,CAAC,iBAAiB,CAAC,OAAO;WAC1D,SAAS;;KAEf,CAAC;IACJ,CAAC;IAEO,oBAAoB,CAAC,EAC3B,UAAU,EACV,YAAY,GAIb;QACC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,OAAO;SACR;QAED,UAAU,KAAK,IAAI,CAAC,OAAO,CAAC;QAC5B,YAAY,KAAK,IAAI,CAAC,SAAS,CAAC;QAChC,MAAM,WAAW,GAAG,UAAU,IAAI,YAAY,CAAC;QAC/C,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC;QACxD,IAAI,WAAW,KAAK,gBAAgB,EAAE;YACpC,OAAO;SACR;QAED,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC;QAE9B,kEAAkE;QAClE,yEAAyE;QACzE,yEAAyE;QACzE,mCAAmC;QACnC,EAAE;QACF,2EAA2E;QAC3E,0EAA0E;QAC1E,sBAAsB;QACtB,EAAE;QACF,0EAA0E;QAC1E,kBAAkB;QAClB,0CAA0C;QAC1C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,EAAE,OAAO,CACjD,IAAI,CAAC,iBAAiB,EAAE,EACxB,EAAC,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,QAAQ,EAAC,CACzC,CAAC;QAEF,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACnD,yDAAyD;YACzD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QAC3B,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,iBAAiB;QACvB,MAAM,EAAC,eAAe,EAAE,cAAc,EAAC,GAAG,IAAI,CAAC;QAC/C,IAAI,CAAC,eAAe,IAAI,CAAC,cAAc,EAAE;YACvC,OAAO,EAAE,CAAC;SACX;QAED,MAAM,EACJ,CAAC,EAAE,SAAS,EACZ,CAAC,EAAE,SAAS,EACZ,MAAM,EAAE,cAAc,GACvB,GAAG,eAAe,CAAC,qBAAqB,EAAE,CAAC;QAC5C,MAAM,EACJ,CAAC,EAAE,QAAQ,EACX,CAAC,EAAE,QAAQ,EACX,MAAM,EAAE,aAAa,GACtB,GAAG,cAAc,CAAC,qBAAqB,EAAE,CAAC;QAC3C,MAAM,mBAAmB,GAAG,eAAe,CAAC,WAAW,CAAC;QACxD,MAAM,kBAAkB,GAAG,cAAc,CAAC,WAAW,CAAC;QACtD,4EAA4E;QAC5E,sEAAsE;QACtE,kDAAkD;QAClD,mEAAmE;QACnE,MAAM,KAAK,GAAG,kBAAkB,GAAG,mBAAmB,CAAC;QACvD,MAAM,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;QACpC,wEAAwE;QACxE,4EAA4E;QAC5E,uEAAuE;QACvE,gDAAgD;QAChD,MAAM,MAAM,GACV,QAAQ;YACR,SAAS;YACT,IAAI,CAAC,KAAK,CAAC,CAAC,aAAa,GAAG,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;QAE3D,yEAAyE;QACzE,uEAAuE;QACvE,WAAW;QACX,MAAM,aAAa,GAAG,cAAc,MAAM,kBAAkB,MAAM,aAAa,KAAK,GAAG,CAAC;QACxF,MAAM,cAAc,GAAG,sCAAsC,CAAC;QAE9D,oEAAoE;QACpE,oEAAoE;QACpE,6BAA6B;QAC7B,MAAM,kBAAkB,GAAG,cAAc,CAAC,WAAW,CAAC;QACtD,MAAM,gBAAgB,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;QACjE,MAAM,KAAK,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,kBAAkB,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;QACxE,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,EAAE;YAClC,OAAO;gBACL,EAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAC;gBACjC,EAAC,SAAS,EAAE,cAAc,EAAE,KAAK,EAAC;aACnC,CAAC;SACH;QAED,OAAO;YACL,EAAC,SAAS,EAAE,cAAc,EAAE,KAAK,EAAC;YAClC,EAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAC;SAClC,CAAC;IACJ,CAAC;IAED,4BAA4B;QAC1B,OAAO,IAAI,CAAC,WAAY,CAAC,qBAAqB,EAAE,CAAC;IACnD,CAAC;CACF;AAtV4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;uCAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;oCAAe;AACd;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;sCAAiB;AAC/B;IAAX,QAAQ,EAAE;oCAAY;AAC8B;IAApD,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAC,CAAC;yCAAoB;AAC7C;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;wCAAmB;AAClB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;uCAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;wCAAmB;AACH;IAAzC,QAAQ,CAAC,EAAC,SAAS,EAAE,iBAAiB,EAAC,CAAC;6CAAqB;AACzB;IAApC,QAAQ,CAAC,EAAC,SAAS,EAAE,YAAY,EAAC,CAAC;wCAAgB;AAC1B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oCAAY;AACX;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;kCAAU;AAKgB;IAAlD,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAC,CAAC;uCAAkB;AAKnB;IAAhD,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAC,CAAC;qCAAgB;AAG/C;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,kBAAkB,EAAC,CAAC;qDACM;AAmBvC;IAAhB,KAAK,EAAE;0CAA6B;AAOpB;IAAhB,KAAK,EAAE;gDAAmC;AAC1B;IAAhB,KAAK,EAAE;iDAAoC;AAE3B;IADhB,KAAK,CAAC,iBAAiB,CAAC;8CAC6B;AACZ;IAAzC,KAAK,CAAC,gBAAgB,CAAC;6CAAsD;AACxC;IAArC,KAAK,CAAC,YAAY,CAAC;0CAAmD","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?.()}\n          <slot name=\"container\"></slot>\n          ${this.renderStateLayer?.()} ${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 renderStateLayer?(): 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-field.d.ts

@@ -9,5 +9,6 @@ import { Field } from './field.js';
  */
 export declare class FilledField extends Field {
     protected renderBackground(): import("lit-html").TemplateResult<1>;
+    protected renderStateLayer(): import("lit-html").TemplateResult<1>;
     protected renderIndicator(): import("lit-html").TemplateResult<1>;
 }

package/field/internal/filled-field.js

@@ -10,10 +10,10 @@ import { Field } from './field.js';
  */
 export class FilledField extends Field {
     renderBackground() {
-        return html `
-      <div class="background"></div>
-      <div class="state-layer"></div>
-    `;
+        return html ` <div class="background"></div> `;
+    }
+    renderStateLayer() {
+        return html ` <div class="state-layer"></div> `;
     }
     renderIndicator() {
         return html `<div class="active-indicator"></div>`;

package/field/internal/filled-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-field.js","sourceRoot":"","sources":["filled-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAC;AAEjC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,KAAK;IACjB,gBAAgB;QACjC,OAAO,IAAI,CAAA;;;KAGV,CAAC;IACJ,CAAC;IAEkB,eAAe;QAChC,OAAO,IAAI,CAAA,sCAAsC,CAAC;IACpD,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\n\nimport {Field} from './field.js';\n\n/**\n * A filled field component.\n */\nexport class FilledField extends Field {\n  protected override renderBackground() {\n    return html`\n      <div class=\"background\"></div>\n      <div class=\"state-layer\"></div>\n    `;\n  }\n\n  protected override renderIndicator() {\n    return html`<div class=\"active-indicator\"></div>`;\n  }\n}\n"]}
+{"version":3,"file":"filled-field.js","sourceRoot":"","sources":["filled-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAC;AAEjC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,KAAK;IACjB,gBAAgB;QACjC,OAAO,IAAI,CAAA,kCAAkC,CAAC;IAChD,CAAC;IAEkB,gBAAgB;QACjC,OAAO,IAAI,CAAA,mCAAmC,CAAC;IACjD,CAAC;IAEkB,eAAe;QAChC,OAAO,IAAI,CAAA,sCAAsC,CAAC;IACpD,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\n\nimport {Field} from './field.js';\n\n/**\n * A filled field component.\n */\nexport class FilledField extends Field {\n  protected override renderBackground() {\n    return html` <div class=\"background\"></div> `;\n  }\n\n  protected override renderStateLayer() {\n    return html` <div class=\"state-layer\"></div> `;\n  }\n\n  protected override renderIndicator() {\n    return html`<div class=\"active-indicator\"></div>`;\n  }\n}\n"]}

package/field/internal/shared-styles.css

@@ -1 +1 @@
-:host{display:inline-flex;resize:both}.field{display:flex;flex:1;flex-direction:column;writing-mode:horizontal-tb;max-width:100%}.container-overflow{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:flex;height:100%;position:relative}.container{align-items:center;border-radius:inherit;display:flex;flex:1;max-height:100%;min-height:100%;min-width:min-content;position:relative}.field,.container-overflow{resize:inherit}.resizable:not(.disabled) .container{resize:inherit;overflow:hidden}.disabled{pointer-events:none}@layer styles{.start,.middle,.end{display:flex;box-sizing:border-box;height:100%;position:relative}.start{color:var(--_leading-content-color)}.end{color:var(--_trailing-content-color)}.start,.end{align-items:center;justify-content:center}.with-start .start{margin-inline:var(--_with-leading-content-leading-space) var(--_content-space)}.with-end .end{margin-inline:var(--_content-space) var(--_with-trailing-content-trailing-space)}.middle{align-items:stretch;align-self:baseline;flex:1}.content{color:var(--_content-color);display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.2, 0, 0, 1)}.no-label .content,.focused .content,.populated .content{opacity:1;transition-delay:67ms}:is(.disabled,.disable-transitions) .content{transition:none}.content ::slotted(*){all:unset;color:currentColor;font-family:var(--_content-font);font-size:var(--_content-size);line-height:var(--_content-line-height);font-weight:var(--_content-weight);width:100%;overflow-wrap:revert;white-space:revert}.content ::slotted(:not(textarea)){padding-top:var(--_top-space);padding-bottom:var(--_bottom-space)}.content ::slotted(textarea){margin-top:var(--_top-space);margin-bottom:var(--_bottom-space)}:hover .content{color:var(--_hover-content-color)}:hover .start{color:var(--_hover-leading-content-color)}:hover .end{color:var(--_hover-trailing-content-color)}.focused .content{color:var(--_focus-content-color)}.focused .start{color:var(--_focus-leading-content-color)}.focused .end{color:var(--_focus-trailing-content-color)}.disabled .content{color:var(--_disabled-content-color)}.disabled.no-label .content,.disabled.focused .content,.disabled.populated .content{opacity:var(--_disabled-content-opacity)}.disabled .start{color:var(--_disabled-leading-content-color);opacity:var(--_disabled-leading-content-opacity)}.disabled .end{color:var(--_disabled-trailing-content-color);opacity:var(--_disabled-trailing-content-opacity)}.error .content{color:var(--_error-content-color)}.error .start{color:var(--_error-leading-content-color)}.error .end{color:var(--_error-trailing-content-color)}.error:hover .content{color:var(--_error-hover-content-color)}.error:hover .start{color:var(--_error-hover-leading-content-color)}.error:hover .end{color:var(--_error-hover-trailing-content-color)}.error.focused .content{color:var(--_error-focus-content-color)}.error.focused .start{color:var(--_error-focus-leading-content-color)}.error.focused .end{color:var(--_error-focus-trailing-content-color)}}@layer hcm{@media(forced-colors: active){.disabled :is(.start,.content,.end){color:GrayText;opacity:1}}}@layer styles{.label{box-sizing:border-box;color:var(--_label-text-color);overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);width:min-content}.label-wrapper{inset:0;pointer-events:none;position:absolute}.label.resting{position:absolute;top:var(--_top-space)}.label.floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height);transform-origin:top left}.label.hidden{opacity:0}.no-label .label{display:none}.label-wrapper{inset:0;position:absolute;text-align:initial}:hover .label{color:var(--_hover-label-text-color)}.focused .label{color:var(--_focus-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color)}.disabled .label:not(.hidden){opacity:var(--_disabled-label-text-opacity)}.error .label{color:var(--_error-label-text-color)}.error:hover .label{color:var(--_error-hover-label-text-color)}.error.focused .label{color:var(--_error-focus-label-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .label:not(.hidden){color:GrayText;opacity:1}}}@layer styles{.supporting-text{color:var(--_supporting-text-color);display:flex;font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);gap:16px;justify-content:space-between;padding-inline-start:var(--_supporting-text-leading-space);padding-inline-end:var(--_supporting-text-trailing-space);padding-top:var(--_supporting-text-top-space)}.supporting-text :nth-child(2){flex-shrink:0}:hover .supporting-text{color:var(--_hover-supporting-text-color)}.focus .supporting-text{color:var(--_focus-supporting-text-color)}.disabled .supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.error .supporting-text{color:var(--_error-supporting-text-color)}.error:hover .supporting-text{color:var(--_error-hover-supporting-text-color)}.error.focus .supporting-text{color:var(--_error-focus-supporting-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .supporting-text{color:GrayText;opacity:1}}}/*# sourceMappingURL=shared-styles.css.map */
+:host{display:inline-flex;resize:both}.field{display:flex;flex:1;flex-direction:column;writing-mode:horizontal-tb;max-width:100%}.container-overflow{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:flex;height:100%;position:relative}.container{align-items:center;border-radius:inherit;display:flex;flex:1;max-height:100%;min-height:100%;min-width:min-content;position:relative}.field,.container-overflow{resize:inherit}.resizable:not(.disabled) .container{resize:inherit;overflow:hidden}.disabled{pointer-events:none}slot[name=container]{border-radius:inherit}slot[name=container]::slotted(*){border-radius:inherit;inset:0;pointer-events:none;position:absolute}@layer styles{.start,.middle,.end{display:flex;box-sizing:border-box;height:100%;position:relative}.start{color:var(--_leading-content-color)}.end{color:var(--_trailing-content-color)}.start,.end{align-items:center;justify-content:center}.with-start .start{margin-inline:var(--_with-leading-content-leading-space) var(--_content-space)}.with-end .end{margin-inline:var(--_content-space) var(--_with-trailing-content-trailing-space)}.middle{align-items:stretch;align-self:baseline;flex:1}.content{color:var(--_content-color);display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.2, 0, 0, 1)}.no-label .content,.focused .content,.populated .content{opacity:1;transition-delay:67ms}:is(.disabled,.disable-transitions) .content{transition:none}.content ::slotted(*){all:unset;color:currentColor;font-family:var(--_content-font);font-size:var(--_content-size);line-height:var(--_content-line-height);font-weight:var(--_content-weight);width:100%;overflow-wrap:revert;white-space:revert}.content ::slotted(:not(textarea)){padding-top:var(--_top-space);padding-bottom:var(--_bottom-space)}.content ::slotted(textarea){margin-top:var(--_top-space);margin-bottom:var(--_bottom-space)}:hover .content{color:var(--_hover-content-color)}:hover .start{color:var(--_hover-leading-content-color)}:hover .end{color:var(--_hover-trailing-content-color)}.focused .content{color:var(--_focus-content-color)}.focused .start{color:var(--_focus-leading-content-color)}.focused .end{color:var(--_focus-trailing-content-color)}.disabled .content{color:var(--_disabled-content-color)}.disabled.no-label .content,.disabled.focused .content,.disabled.populated .content{opacity:var(--_disabled-content-opacity)}.disabled .start{color:var(--_disabled-leading-content-color);opacity:var(--_disabled-leading-content-opacity)}.disabled .end{color:var(--_disabled-trailing-content-color);opacity:var(--_disabled-trailing-content-opacity)}.error .content{color:var(--_error-content-color)}.error .start{color:var(--_error-leading-content-color)}.error .end{color:var(--_error-trailing-content-color)}.error:hover .content{color:var(--_error-hover-content-color)}.error:hover .start{color:var(--_error-hover-leading-content-color)}.error:hover .end{color:var(--_error-hover-trailing-content-color)}.error.focused .content{color:var(--_error-focus-content-color)}.error.focused .start{color:var(--_error-focus-leading-content-color)}.error.focused .end{color:var(--_error-focus-trailing-content-color)}}@layer hcm{@media(forced-colors: active){.disabled :is(.start,.content,.end){color:GrayText;opacity:1}}}@layer styles{.label{box-sizing:border-box;color:var(--_label-text-color);overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);width:min-content}.label-wrapper{inset:0;pointer-events:none;position:absolute}.label.resting{position:absolute;top:var(--_top-space)}.label.floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height);transform-origin:top left}.label.hidden{opacity:0}.no-label .label{display:none}.label-wrapper{inset:0;position:absolute;text-align:initial}:hover .label{color:var(--_hover-label-text-color)}.focused .label{color:var(--_focus-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color)}.disabled .label:not(.hidden){opacity:var(--_disabled-label-text-opacity)}.error .label{color:var(--_error-label-text-color)}.error:hover .label{color:var(--_error-hover-label-text-color)}.error.focused .label{color:var(--_error-focus-label-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .label:not(.hidden){color:GrayText;opacity:1}}}@layer styles{.supporting-text{color:var(--_supporting-text-color);display:flex;font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);gap:16px;justify-content:space-between;padding-inline-start:var(--_supporting-text-leading-space);padding-inline-end:var(--_supporting-text-trailing-space);padding-top:var(--_supporting-text-top-space)}.supporting-text :nth-child(2){flex-shrink:0}:hover .supporting-text{color:var(--_hover-supporting-text-color)}.focus .supporting-text{color:var(--_focus-supporting-text-color)}.disabled .supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.error .supporting-text{color:var(--_error-supporting-text-color)}.error:hover .supporting-text{color:var(--_error-hover-supporting-text-color)}.error.focus .supporting-text{color:var(--_error-focus-supporting-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .supporting-text{color:GrayText;opacity:1}}}/*# sourceMappingURL=shared-styles.css.map */

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_shared.scss","_content.scss","_label.scss","_supporting-text.scss"],"names":[],"mappings":"AAeE,MACE,oBACA,YAGF,OACE,aACA,OACA,sBAGA,2BACA,eAMF,oBACE,8DACA,0DACA,sDACA,0DACA,aACA,YACA,kBAGF,WACE,mBACA,sBACA,aACA,OACA,gBACA,gBACA,sBACA,kBAGF,2BAEE,eAGF,qCAGE,eAKA,gBAGF,UACE,oBChDF,cACE,oBAGE,aACA,sBACA,YAGA,kBAGF,OACE,oCAGF,KACE,qCAGF,YAEE,mBACA,uBAGF,mBACE,+EAIF,eACE,iFAIF,QACE,oBAQA,oBACA,OAGF,SACE,4BACA,aACA,OACA,UACA,mDAIF,yDAGE,UACA,iBAjES,KAoEX,6CACE,gBAGF,sBACE,UAGA,mBACA,iCACA,+BACA,wCACA,mCACA,WAEA,qBACA,mBAGF,mCACE,8BACA,oCAGF,6BAEE,6BACA,mCAGF,gBACE,kCAGF,cACE,0CAGF,YACE,2CAGF,kBACE,kCAGF,gBACE,0CAGF,cACE,2CAGF,mBACE,qCAGF,oFAGE,yCAGF,iBACE,6CACA,iDAGF,eACE,8CACA,kDAGF,gBACE,kCAGF,cACE,0CAGF,YACE,2CAGF,sBACE,wCAGF,oBACE,gDAGF,kBACE,iDAGF,wBACE,wCAGF,sBACE,gDAGF,oBACE,kDAIJ,WACE,8BACE,oCACE,eACA,YCrMN,cACE,OACE,sBACA,+BACA,gBACA,eACA,uBACA,mBACA,UACA,oCACA,kCACA,2CACA,sCACA,kBAGF,eACE,QAOA,oBACA,kBAGF,eACE,kBACA,sBAGF,gBACE,4CACA,qDACA,0BAGF,cACE,UAGF,iBACE,aAMF,eACE,QACA,kBAGA,mBAGF,cACE,qCAGF,gBACE,qCAGF,iBACE,wCAGF,8BACE,4CAGF,cACE,qCAGF,oBACE,2CAGF,sBACE,4CAIJ,WACE,8BACE,8BACE,eACA,YC3FN,cACE,iBACE,oCACA,aACA,yCACA,uCACA,gDACA,2CACA,SACA,8BACA,2DACA,0DACA,8CAIF,+BACE,cAGF,wBACE,0CAGF,wBACE,0CAGF,2BACE,6CACA,iDAGF,wBACE,0CAGF,8BACE,gDAGF,8BACE,iDAIJ,WACE,8BACE,2BACE,eACA","file":"shared-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_shared.scss","_content.scss","_label.scss","_supporting-text.scss"],"names":[],"mappings":"AAeE,MACE,oBACA,YAGF,OACE,aACA,OACA,sBAGA,2BACA,eAMF,oBACE,8DACA,0DACA,sDACA,0DACA,aACA,YACA,kBAGF,WACE,mBACA,sBACA,aACA,OACA,gBACA,gBACA,sBACA,kBAGF,2BAEE,eAGF,qCAGE,eAKA,gBAGF,UACE,oBAGF,qBACE,sBAGF,iCACE,sBACA,QACA,oBACA,kBC3DF,cACE,oBAGE,aACA,sBACA,YAGA,kBAGF,OACE,oCAGF,KACE,qCAGF,YAEE,mBACA,uBAGF,mBACE,+EAIF,eACE,iFAIF,QACE,oBAQA,oBACA,OAGF,SACE,4BACA,aACA,OACA,UACA,mDAIF,yDAGE,UACA,iBAjES,KAoEX,6CACE,gBAGF,sBACE,UAGA,mBACA,iCACA,+BACA,wCACA,mCACA,WAEA,qBACA,mBAGF,mCACE,8BACA,oCAGF,6BAEE,6BACA,mCAGF,gBACE,kCAGF,cACE,0CAGF,YACE,2CAGF,kBACE,kCAGF,gBACE,0CAGF,cACE,2CAGF,mBACE,qCAGF,oFAGE,yCAGF,iBACE,6CACA,iDAGF,eACE,8CACA,kDAGF,gBACE,kCAGF,cACE,0CAGF,YACE,2CAGF,sBACE,wCAGF,oBACE,gDAGF,kBACE,iDAGF,wBACE,wCAGF,sBACE,gDAGF,oBACE,kDAIJ,WACE,8BACE,oCACE,eACA,YCrMN,cACE,OACE,sBACA,+BACA,gBACA,eACA,uBACA,mBACA,UACA,oCACA,kCACA,2CACA,sCACA,kBAGF,eACE,QAOA,oBACA,kBAGF,eACE,kBACA,sBAGF,gBACE,4CACA,qDACA,0BAGF,cACE,UAGF,iBACE,aAMF,eACE,QACA,kBAGA,mBAGF,cACE,qCAGF,gBACE,qCAGF,iBACE,wCAGF,8BACE,4CAGF,cACE,qCAGF,oBACE,2CAGF,sBACE,4CAIJ,WACE,8BACE,8BACE,eACA,YC3FN,cACE,iBACE,oCACA,aACA,yCACA,uCACA,gDACA,2CACA,SACA,8BACA,2DACA,0DACA,8CAIF,+BACE,cAGF,wBACE,0CAGF,wBACE,0CAGF,2BACE,6CACA,iDAGF,wBACE,0CAGF,8BACE,gDAGF,8BACE,iDAIJ,WACE,8BACE,2BACE,eACA","file":"shared-styles.css"}

package/field/internal/shared-styles.js

@@ -5,6 +5,6 @@
  */
 // Generated stylesheet for ./field/internal/shared-styles.css.
 import { css } from 'lit';
-export const styles = css `:host{display:inline-flex;resize:both}.field{display:flex;flex:1;flex-direction:column;writing-mode:horizontal-tb;max-width:100%}.container-overflow{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:flex;height:100%;position:relative}.container{align-items:center;border-radius:inherit;display:flex;flex:1;max-height:100%;min-height:100%;min-width:min-content;position:relative}.field,.container-overflow{resize:inherit}.resizable:not(.disabled) .container{resize:inherit;overflow:hidden}.disabled{pointer-events:none}@layer styles{.start,.middle,.end{display:flex;box-sizing:border-box;height:100%;position:relative}.start{color:var(--_leading-content-color)}.end{color:var(--_trailing-content-color)}.start,.end{align-items:center;justify-content:center}.with-start .start{margin-inline:var(--_with-leading-content-leading-space) var(--_content-space)}.with-end .end{margin-inline:var(--_content-space) var(--_with-trailing-content-trailing-space)}.middle{align-items:stretch;align-self:baseline;flex:1}.content{color:var(--_content-color);display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.2, 0, 0, 1)}.no-label .content,.focused .content,.populated .content{opacity:1;transition-delay:67ms}:is(.disabled,.disable-transitions) .content{transition:none}.content ::slotted(*){all:unset;color:currentColor;font-family:var(--_content-font);font-size:var(--_content-size);line-height:var(--_content-line-height);font-weight:var(--_content-weight);width:100%;overflow-wrap:revert;white-space:revert}.content ::slotted(:not(textarea)){padding-top:var(--_top-space);padding-bottom:var(--_bottom-space)}.content ::slotted(textarea){margin-top:var(--_top-space);margin-bottom:var(--_bottom-space)}:hover .content{color:var(--_hover-content-color)}:hover .start{color:var(--_hover-leading-content-color)}:hover .end{color:var(--_hover-trailing-content-color)}.focused .content{color:var(--_focus-content-color)}.focused .start{color:var(--_focus-leading-content-color)}.focused .end{color:var(--_focus-trailing-content-color)}.disabled .content{color:var(--_disabled-content-color)}.disabled.no-label .content,.disabled.focused .content,.disabled.populated .content{opacity:var(--_disabled-content-opacity)}.disabled .start{color:var(--_disabled-leading-content-color);opacity:var(--_disabled-leading-content-opacity)}.disabled .end{color:var(--_disabled-trailing-content-color);opacity:var(--_disabled-trailing-content-opacity)}.error .content{color:var(--_error-content-color)}.error .start{color:var(--_error-leading-content-color)}.error .end{color:var(--_error-trailing-content-color)}.error:hover .content{color:var(--_error-hover-content-color)}.error:hover .start{color:var(--_error-hover-leading-content-color)}.error:hover .end{color:var(--_error-hover-trailing-content-color)}.error.focused .content{color:var(--_error-focus-content-color)}.error.focused .start{color:var(--_error-focus-leading-content-color)}.error.focused .end{color:var(--_error-focus-trailing-content-color)}}@layer hcm{@media(forced-colors: active){.disabled :is(.start,.content,.end){color:GrayText;opacity:1}}}@layer styles{.label{box-sizing:border-box;color:var(--_label-text-color);overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);width:min-content}.label-wrapper{inset:0;pointer-events:none;position:absolute}.label.resting{position:absolute;top:var(--_top-space)}.label.floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height);transform-origin:top left}.label.hidden{opacity:0}.no-label .label{display:none}.label-wrapper{inset:0;position:absolute;text-align:initial}:hover .label{color:var(--_hover-label-text-color)}.focused .label{color:var(--_focus-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color)}.disabled .label:not(.hidden){opacity:var(--_disabled-label-text-opacity)}.error .label{color:var(--_error-label-text-color)}.error:hover .label{color:var(--_error-hover-label-text-color)}.error.focused .label{color:var(--_error-focus-label-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .label:not(.hidden){color:GrayText;opacity:1}}}@layer styles{.supporting-text{color:var(--_supporting-text-color);display:flex;font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);gap:16px;justify-content:space-between;padding-inline-start:var(--_supporting-text-leading-space);padding-inline-end:var(--_supporting-text-trailing-space);padding-top:var(--_supporting-text-top-space)}.supporting-text :nth-child(2){flex-shrink:0}:hover .supporting-text{color:var(--_hover-supporting-text-color)}.focus .supporting-text{color:var(--_focus-supporting-text-color)}.disabled .supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.error .supporting-text{color:var(--_error-supporting-text-color)}.error:hover .supporting-text{color:var(--_error-hover-supporting-text-color)}.error.focus .supporting-text{color:var(--_error-focus-supporting-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .supporting-text{color:GrayText;opacity:1}}}
+export const styles = css `:host{display:inline-flex;resize:both}.field{display:flex;flex:1;flex-direction:column;writing-mode:horizontal-tb;max-width:100%}.container-overflow{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:flex;height:100%;position:relative}.container{align-items:center;border-radius:inherit;display:flex;flex:1;max-height:100%;min-height:100%;min-width:min-content;position:relative}.field,.container-overflow{resize:inherit}.resizable:not(.disabled) .container{resize:inherit;overflow:hidden}.disabled{pointer-events:none}slot[name=container]{border-radius:inherit}slot[name=container]::slotted(*){border-radius:inherit;inset:0;pointer-events:none;position:absolute}@layer styles{.start,.middle,.end{display:flex;box-sizing:border-box;height:100%;position:relative}.start{color:var(--_leading-content-color)}.end{color:var(--_trailing-content-color)}.start,.end{align-items:center;justify-content:center}.with-start .start{margin-inline:var(--_with-leading-content-leading-space) var(--_content-space)}.with-end .end{margin-inline:var(--_content-space) var(--_with-trailing-content-trailing-space)}.middle{align-items:stretch;align-self:baseline;flex:1}.content{color:var(--_content-color);display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.2, 0, 0, 1)}.no-label .content,.focused .content,.populated .content{opacity:1;transition-delay:67ms}:is(.disabled,.disable-transitions) .content{transition:none}.content ::slotted(*){all:unset;color:currentColor;font-family:var(--_content-font);font-size:var(--_content-size);line-height:var(--_content-line-height);font-weight:var(--_content-weight);width:100%;overflow-wrap:revert;white-space:revert}.content ::slotted(:not(textarea)){padding-top:var(--_top-space);padding-bottom:var(--_bottom-space)}.content ::slotted(textarea){margin-top:var(--_top-space);margin-bottom:var(--_bottom-space)}:hover .content{color:var(--_hover-content-color)}:hover .start{color:var(--_hover-leading-content-color)}:hover .end{color:var(--_hover-trailing-content-color)}.focused .content{color:var(--_focus-content-color)}.focused .start{color:var(--_focus-leading-content-color)}.focused .end{color:var(--_focus-trailing-content-color)}.disabled .content{color:var(--_disabled-content-color)}.disabled.no-label .content,.disabled.focused .content,.disabled.populated .content{opacity:var(--_disabled-content-opacity)}.disabled .start{color:var(--_disabled-leading-content-color);opacity:var(--_disabled-leading-content-opacity)}.disabled .end{color:var(--_disabled-trailing-content-color);opacity:var(--_disabled-trailing-content-opacity)}.error .content{color:var(--_error-content-color)}.error .start{color:var(--_error-leading-content-color)}.error .end{color:var(--_error-trailing-content-color)}.error:hover .content{color:var(--_error-hover-content-color)}.error:hover .start{color:var(--_error-hover-leading-content-color)}.error:hover .end{color:var(--_error-hover-trailing-content-color)}.error.focused .content{color:var(--_error-focus-content-color)}.error.focused .start{color:var(--_error-focus-leading-content-color)}.error.focused .end{color:var(--_error-focus-trailing-content-color)}}@layer hcm{@media(forced-colors: active){.disabled :is(.start,.content,.end){color:GrayText;opacity:1}}}@layer styles{.label{box-sizing:border-box;color:var(--_label-text-color);overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);width:min-content}.label-wrapper{inset:0;pointer-events:none;position:absolute}.label.resting{position:absolute;top:var(--_top-space)}.label.floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height);transform-origin:top left}.label.hidden{opacity:0}.no-label .label{display:none}.label-wrapper{inset:0;position:absolute;text-align:initial}:hover .label{color:var(--_hover-label-text-color)}.focused .label{color:var(--_focus-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color)}.disabled .label:not(.hidden){opacity:var(--_disabled-label-text-opacity)}.error .label{color:var(--_error-label-text-color)}.error:hover .label{color:var(--_error-hover-label-text-color)}.error.focused .label{color:var(--_error-focus-label-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .label:not(.hidden){color:GrayText;opacity:1}}}@layer styles{.supporting-text{color:var(--_supporting-text-color);display:flex;font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);gap:16px;justify-content:space-between;padding-inline-start:var(--_supporting-text-leading-space);padding-inline-end:var(--_supporting-text-trailing-space);padding-top:var(--_supporting-text-top-space)}.supporting-text :nth-child(2){flex-shrink:0}:hover .supporting-text{color:var(--_hover-supporting-text-color)}.focus .supporting-text{color:var(--_focus-supporting-text-color)}.disabled .supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.error .supporting-text{color:var(--_error-supporting-text-color)}.error:hover .supporting-text{color:var(--_error-hover-supporting-text-color)}.error.focus .supporting-text{color:var(--_error-focus-supporting-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .supporting-text{color:GrayText;opacity:1}}}
 `;
 //# sourceMappingURL=shared-styles.js.map

package/field/internal/shared-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared-styles.js","sourceRoot":"","sources":["shared-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,+DAA+D;AAC/D,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 ./field/internal/shared-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{display:inline-flex;resize:both}.field{display:flex;flex:1;flex-direction:column;writing-mode:horizontal-tb;max-width:100%}.container-overflow{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:flex;height:100%;position:relative}.container{align-items:center;border-radius:inherit;display:flex;flex:1;max-height:100%;min-height:100%;min-width:min-content;position:relative}.field,.container-overflow{resize:inherit}.resizable:not(.disabled) .container{resize:inherit;overflow:hidden}.disabled{pointer-events:none}@layer styles{.start,.middle,.end{display:flex;box-sizing:border-box;height:100%;position:relative}.start{color:var(--_leading-content-color)}.end{color:var(--_trailing-content-color)}.start,.end{align-items:center;justify-content:center}.with-start .start{margin-inline:var(--_with-leading-content-leading-space) var(--_content-space)}.with-end .end{margin-inline:var(--_content-space) var(--_with-trailing-content-trailing-space)}.middle{align-items:stretch;align-self:baseline;flex:1}.content{color:var(--_content-color);display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.2, 0, 0, 1)}.no-label .content,.focused .content,.populated .content{opacity:1;transition-delay:67ms}:is(.disabled,.disable-transitions) .content{transition:none}.content ::slotted(*){all:unset;color:currentColor;font-family:var(--_content-font);font-size:var(--_content-size);line-height:var(--_content-line-height);font-weight:var(--_content-weight);width:100%;overflow-wrap:revert;white-space:revert}.content ::slotted(:not(textarea)){padding-top:var(--_top-space);padding-bottom:var(--_bottom-space)}.content ::slotted(textarea){margin-top:var(--_top-space);margin-bottom:var(--_bottom-space)}:hover .content{color:var(--_hover-content-color)}:hover .start{color:var(--_hover-leading-content-color)}:hover .end{color:var(--_hover-trailing-content-color)}.focused .content{color:var(--_focus-content-color)}.focused .start{color:var(--_focus-leading-content-color)}.focused .end{color:var(--_focus-trailing-content-color)}.disabled .content{color:var(--_disabled-content-color)}.disabled.no-label .content,.disabled.focused .content,.disabled.populated .content{opacity:var(--_disabled-content-opacity)}.disabled .start{color:var(--_disabled-leading-content-color);opacity:var(--_disabled-leading-content-opacity)}.disabled .end{color:var(--_disabled-trailing-content-color);opacity:var(--_disabled-trailing-content-opacity)}.error .content{color:var(--_error-content-color)}.error .start{color:var(--_error-leading-content-color)}.error .end{color:var(--_error-trailing-content-color)}.error:hover .content{color:var(--_error-hover-content-color)}.error:hover .start{color:var(--_error-hover-leading-content-color)}.error:hover .end{color:var(--_error-hover-trailing-content-color)}.error.focused .content{color:var(--_error-focus-content-color)}.error.focused .start{color:var(--_error-focus-leading-content-color)}.error.focused .end{color:var(--_error-focus-trailing-content-color)}}@layer hcm{@media(forced-colors: active){.disabled :is(.start,.content,.end){color:GrayText;opacity:1}}}@layer styles{.label{box-sizing:border-box;color:var(--_label-text-color);overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);width:min-content}.label-wrapper{inset:0;pointer-events:none;position:absolute}.label.resting{position:absolute;top:var(--_top-space)}.label.floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height);transform-origin:top left}.label.hidden{opacity:0}.no-label .label{display:none}.label-wrapper{inset:0;position:absolute;text-align:initial}:hover .label{color:var(--_hover-label-text-color)}.focused .label{color:var(--_focus-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color)}.disabled .label:not(.hidden){opacity:var(--_disabled-label-text-opacity)}.error .label{color:var(--_error-label-text-color)}.error:hover .label{color:var(--_error-hover-label-text-color)}.error.focused .label{color:var(--_error-focus-label-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .label:not(.hidden){color:GrayText;opacity:1}}}@layer styles{.supporting-text{color:var(--_supporting-text-color);display:flex;font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);gap:16px;justify-content:space-between;padding-inline-start:var(--_supporting-text-leading-space);padding-inline-end:var(--_supporting-text-trailing-space);padding-top:var(--_supporting-text-top-space)}.supporting-text :nth-child(2){flex-shrink:0}:hover .supporting-text{color:var(--_hover-supporting-text-color)}.focus .supporting-text{color:var(--_focus-supporting-text-color)}.disabled .supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.error .supporting-text{color:var(--_error-supporting-text-color)}.error:hover .supporting-text{color:var(--_error-hover-supporting-text-color)}.error.focus .supporting-text{color:var(--_error-focus-supporting-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .supporting-text{color:GrayText;opacity:1}}}\n`;\n"]}
+{"version":3,"file":"shared-styles.js","sourceRoot":"","sources":["shared-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,+DAA+D;AAC/D,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 ./field/internal/shared-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{display:inline-flex;resize:both}.field{display:flex;flex:1;flex-direction:column;writing-mode:horizontal-tb;max-width:100%}.container-overflow{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:flex;height:100%;position:relative}.container{align-items:center;border-radius:inherit;display:flex;flex:1;max-height:100%;min-height:100%;min-width:min-content;position:relative}.field,.container-overflow{resize:inherit}.resizable:not(.disabled) .container{resize:inherit;overflow:hidden}.disabled{pointer-events:none}slot[name=container]{border-radius:inherit}slot[name=container]::slotted(*){border-radius:inherit;inset:0;pointer-events:none;position:absolute}@layer styles{.start,.middle,.end{display:flex;box-sizing:border-box;height:100%;position:relative}.start{color:var(--_leading-content-color)}.end{color:var(--_trailing-content-color)}.start,.end{align-items:center;justify-content:center}.with-start .start{margin-inline:var(--_with-leading-content-leading-space) var(--_content-space)}.with-end .end{margin-inline:var(--_content-space) var(--_with-trailing-content-trailing-space)}.middle{align-items:stretch;align-self:baseline;flex:1}.content{color:var(--_content-color);display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.2, 0, 0, 1)}.no-label .content,.focused .content,.populated .content{opacity:1;transition-delay:67ms}:is(.disabled,.disable-transitions) .content{transition:none}.content ::slotted(*){all:unset;color:currentColor;font-family:var(--_content-font);font-size:var(--_content-size);line-height:var(--_content-line-height);font-weight:var(--_content-weight);width:100%;overflow-wrap:revert;white-space:revert}.content ::slotted(:not(textarea)){padding-top:var(--_top-space);padding-bottom:var(--_bottom-space)}.content ::slotted(textarea){margin-top:var(--_top-space);margin-bottom:var(--_bottom-space)}:hover .content{color:var(--_hover-content-color)}:hover .start{color:var(--_hover-leading-content-color)}:hover .end{color:var(--_hover-trailing-content-color)}.focused .content{color:var(--_focus-content-color)}.focused .start{color:var(--_focus-leading-content-color)}.focused .end{color:var(--_focus-trailing-content-color)}.disabled .content{color:var(--_disabled-content-color)}.disabled.no-label .content,.disabled.focused .content,.disabled.populated .content{opacity:var(--_disabled-content-opacity)}.disabled .start{color:var(--_disabled-leading-content-color);opacity:var(--_disabled-leading-content-opacity)}.disabled .end{color:var(--_disabled-trailing-content-color);opacity:var(--_disabled-trailing-content-opacity)}.error .content{color:var(--_error-content-color)}.error .start{color:var(--_error-leading-content-color)}.error .end{color:var(--_error-trailing-content-color)}.error:hover .content{color:var(--_error-hover-content-color)}.error:hover .start{color:var(--_error-hover-leading-content-color)}.error:hover .end{color:var(--_error-hover-trailing-content-color)}.error.focused .content{color:var(--_error-focus-content-color)}.error.focused .start{color:var(--_error-focus-leading-content-color)}.error.focused .end{color:var(--_error-focus-trailing-content-color)}}@layer hcm{@media(forced-colors: active){.disabled :is(.start,.content,.end){color:GrayText;opacity:1}}}@layer styles{.label{box-sizing:border-box;color:var(--_label-text-color);overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);width:min-content}.label-wrapper{inset:0;pointer-events:none;position:absolute}.label.resting{position:absolute;top:var(--_top-space)}.label.floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height);transform-origin:top left}.label.hidden{opacity:0}.no-label .label{display:none}.label-wrapper{inset:0;position:absolute;text-align:initial}:hover .label{color:var(--_hover-label-text-color)}.focused .label{color:var(--_focus-label-text-color)}.disabled .label{color:var(--_disabled-label-text-color)}.disabled .label:not(.hidden){opacity:var(--_disabled-label-text-opacity)}.error .label{color:var(--_error-label-text-color)}.error:hover .label{color:var(--_error-hover-label-text-color)}.error.focused .label{color:var(--_error-focus-label-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .label:not(.hidden){color:GrayText;opacity:1}}}@layer styles{.supporting-text{color:var(--_supporting-text-color);display:flex;font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);gap:16px;justify-content:space-between;padding-inline-start:var(--_supporting-text-leading-space);padding-inline-end:var(--_supporting-text-trailing-space);padding-top:var(--_supporting-text-top-space)}.supporting-text :nth-child(2){flex-shrink:0}:hover .supporting-text{color:var(--_hover-supporting-text-color)}.focus .supporting-text{color:var(--_focus-supporting-text-color)}.disabled .supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.error .supporting-text{color:var(--_error-supporting-text-color)}.error:hover .supporting-text{color:var(--_error-hover-supporting-text-color)}.error.focus .supporting-text{color:var(--_error-focus-supporting-text-color)}}@layer hcm{@media(forced-colors: active){.disabled .supporting-text{color:GrayText;opacity:1}}}\n`;\n"]}

package/labs/badge/internal/_badge.scss

@@ -29,7 +29,7 @@
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-badge-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
   }
 

package/labs/badge/internal/badge-styles.css

@@ -1 +1 @@
-:host{--_color: var(--md-badge-color, var(--md-badge-color, var(--md-sys-color-error, #b3261e)));--_large-color: var(--md-badge-large-color, var(--md-badge-large-color, var(--md-sys-color-error, #b3261e)));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff)));--_large-label-text-font: var(--md-badge-large-label-text-font, var(--md-badge-large-label-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto))));--_large-label-text-line-height: var(--md-badge-large-label-text-line-height, var(--md-badge-large-label-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem)));--_large-label-text-size: var(--md-badge-large-label-text-size, var(--md-badge-large-label-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem)));--_large-label-text-weight: var(--md-badge-large-label-text-weight, var(--md-badge-large-label-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500))));--_large-shape: var(--md-badge-large-shape, var(--md-badge-large-shape, var(--md-sys-shape-corner-full, 9999px)));--_large-size: var(--md-badge-large-size, var(--md-badge-large-size, 16px));--_shape: var(--md-badge-shape, var(--md-badge-shape, var(--md-sys-shape-corner-full, 9999px)));--_size: var(--md-badge-size, var(--md-badge-size, 6px))}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px;text-align:center}.md3-badge__value{font-family:var(--_large-label-text-font);font-size:var(--_large-label-text-size);line-height:var(--_large-label-text-line-height);font-weight:var(--_large-label-text-weight)}/*# sourceMappingURL=badge-styles.css.map */
+:host{--_color: var(--md-badge-color, var(--md-sys-color-error, #b3261e));--_large-color: var(--md-badge-large-color, var(--md-sys-color-error, #b3261e));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff));--_large-label-text-font: var(--md-badge-large-label-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));--_large-label-text-line-height: var(--md-badge-large-label-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));--_large-label-text-size: var(--md-badge-large-label-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));--_large-label-text-weight: var(--md-badge-large-label-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)));--_large-shape: var(--md-badge-large-shape, var(--md-sys-shape-corner-full, 9999px));--_large-size: var(--md-badge-large-size, 16px);--_shape: var(--md-badge-shape, var(--md-sys-shape-corner-full, 9999px));--_size: var(--md-badge-size, 6px)}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px;text-align:center}.md3-badge__value{font-family:var(--_large-label-text-font);font-size:var(--_large-label-text-size);line-height:var(--_large-label-text-line-height);font-weight:var(--_large-label-text-weight)}/*# sourceMappingURL=badge-styles.css.map */

package/labs/badge/internal/badge-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_badge.scss"],"names":[],"mappings":"AA6BE,MAEI,u3CAIJ,WACE,uBACA,wBACA,uBACA,kBACA,sBACA,+BACA,4BACA,oBAEA,kCAEE,mBAGF,4BACE,aACA,sBACA,uBACA,wBACA,uBACA,qCACA,kCACA,0BACA,6BACA,qCAEA,8CACE,gBACA,kBAKN,kBACE,0CACA,wCACA,iDACA","file":"badge-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_badge.scss"],"names":[],"mappings":"AA6BE,MAEI,ghCAIJ,WACE,uBACA,wBACA,uBACA,kBACA,sBACA,+BACA,4BACA,oBAEA,kCAEE,mBAGF,4BACE,aACA,sBACA,uBACA,wBACA,uBACA,qCACA,kCACA,0BACA,6BACA,qCAEA,8CACE,gBACA,kBAKN,kBACE,0CACA,wCACA,iDACA","file":"badge-styles.css"}

package/labs/badge/internal/badge-styles.js

@@ -5,6 +5,6 @@
  */
 // Generated stylesheet for ./labs/badge/internal/badge-styles.css.
 import { css } from 'lit';
-export const styles = css `:host{--_color: var(--md-badge-color, var(--md-badge-color, var(--md-sys-color-error, #b3261e)));--_large-color: var(--md-badge-large-color, var(--md-badge-large-color, var(--md-sys-color-error, #b3261e)));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff)));--_large-label-text-font: var(--md-badge-large-label-text-font, var(--md-badge-large-label-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto))));--_large-label-text-line-height: var(--md-badge-large-label-text-line-height, var(--md-badge-large-label-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem)));--_large-label-text-size: var(--md-badge-large-label-text-size, var(--md-badge-large-label-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem)));--_large-label-text-weight: var(--md-badge-large-label-text-weight, var(--md-badge-large-label-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500))));--_large-shape: var(--md-badge-large-shape, var(--md-badge-large-shape, var(--md-sys-shape-corner-full, 9999px)));--_large-size: var(--md-badge-large-size, var(--md-badge-large-size, 16px));--_shape: var(--md-badge-shape, var(--md-badge-shape, var(--md-sys-shape-corner-full, 9999px)));--_size: var(--md-badge-size, var(--md-badge-size, 6px))}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px;text-align:center}.md3-badge__value{font-family:var(--_large-label-text-font);font-size:var(--_large-label-text-size);line-height:var(--_large-label-text-line-height);font-weight:var(--_large-label-text-weight)}
+export const styles = css `:host{--_color: var(--md-badge-color, var(--md-sys-color-error, #b3261e));--_large-color: var(--md-badge-large-color, var(--md-sys-color-error, #b3261e));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff));--_large-label-text-font: var(--md-badge-large-label-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));--_large-label-text-line-height: var(--md-badge-large-label-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));--_large-label-text-size: var(--md-badge-large-label-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));--_large-label-text-weight: var(--md-badge-large-label-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)));--_large-shape: var(--md-badge-large-shape, var(--md-sys-shape-corner-full, 9999px));--_large-size: var(--md-badge-large-size, 16px);--_shape: var(--md-badge-shape, var(--md-sys-shape-corner-full, 9999px));--_size: var(--md-badge-size, 6px)}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px;text-align:center}.md3-badge__value{font-family:var(--_large-label-text-font);font-size:var(--_large-label-text-size);line-height:var(--_large-label-text-line-height);font-weight:var(--_large-label-text-weight)}
 `;
 //# sourceMappingURL=badge-styles.js.map

package/labs/badge/internal/badge-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge-styles.js","sourceRoot":"","sources":["badge-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,mEAAmE;AACnE,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 ./labs/badge/internal/badge-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{--_color: var(--md-badge-color, var(--md-badge-color, var(--md-sys-color-error, #b3261e)));--_large-color: var(--md-badge-large-color, var(--md-badge-large-color, var(--md-sys-color-error, #b3261e)));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff)));--_large-label-text-font: var(--md-badge-large-label-text-font, var(--md-badge-large-label-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto))));--_large-label-text-line-height: var(--md-badge-large-label-text-line-height, var(--md-badge-large-label-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem)));--_large-label-text-size: var(--md-badge-large-label-text-size, var(--md-badge-large-label-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem)));--_large-label-text-weight: var(--md-badge-large-label-text-weight, var(--md-badge-large-label-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500))));--_large-shape: var(--md-badge-large-shape, var(--md-badge-large-shape, var(--md-sys-shape-corner-full, 9999px)));--_large-size: var(--md-badge-large-size, var(--md-badge-large-size, 16px));--_shape: var(--md-badge-shape, var(--md-badge-shape, var(--md-sys-shape-corner-full, 9999px)));--_size: var(--md-badge-size, var(--md-badge-size, 6px))}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px;text-align:center}.md3-badge__value{font-family:var(--_large-label-text-font);font-size:var(--_large-label-text-size);line-height:var(--_large-label-text-line-height);font-weight:var(--_large-label-text-weight)}\n`;\n"]}
+{"version":3,"file":"badge-styles.js","sourceRoot":"","sources":["badge-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,mEAAmE;AACnE,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 ./labs/badge/internal/badge-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{--_color: var(--md-badge-color, var(--md-sys-color-error, #b3261e));--_large-color: var(--md-badge-large-color, var(--md-sys-color-error, #b3261e));--_large-label-text-color: var(--md-badge-large-label-text-color, var(--md-sys-color-on-error, #fff));--_large-label-text-font: var(--md-badge-large-label-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));--_large-label-text-line-height: var(--md-badge-large-label-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));--_large-label-text-size: var(--md-badge-large-label-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));--_large-label-text-weight: var(--md-badge-large-label-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)));--_large-shape: var(--md-badge-large-shape, var(--md-sys-shape-corner-full, 9999px));--_large-size: var(--md-badge-large-size, 16px);--_shape: var(--md-badge-shape, var(--md-sys-shape-corner-full, 9999px));--_size: var(--md-badge-size, 6px)}.md3-badge{inset-inline-start:50%;margin-inline-start:6px;margin-block-start:4px;position:absolute;inset-block-start:0px;background-color:var(--_color);border-radius:var(--_shape);height:var(--_size)}.md3-badge:not(.md3-badge--large){width:var(--_size)}.md3-badge.md3-badge--large{display:flex;flex-direction:column;justify-content:center;margin-inline-start:2px;margin-block-start:1px;background-color:var(--_large-color);border-radius:var(--_large-shape);height:var(--_large-size);min-width:var(--_large-size);color:var(--_large-label-text-color)}.md3-badge.md3-badge--large .md3-badge__value{padding:0px 4px;text-align:center}.md3-badge__value{font-family:var(--_large-label-text-font);font-size:var(--_large-label-text-size);line-height:var(--_large-label-text-line-height);font-weight:var(--_large-label-text-weight)}\n`;\n"]}

package/labs/navigationbar/internal/_navigation-bar.scss

@@ -35,7 +35,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-navigation-bar-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     @include elevation.theme(

package/labs/navigationbar/internal/navigation-bar-styles.css

@@ -1 +1 @@
-:host{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8)));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, var(--md-navigation-bar-active-indicator-height, 32px));--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, var(--md-navigation-bar-active-indicator-shape, var(--md-sys-shape-corner-full, 9999px)));--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, var(--md-navigation-bar-active-indicator-width, 64px));--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, var(--md-navigation-bar-active-label-text-weight, var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700))));--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_container-color: var(--md-navigation-bar-container-color, var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7)));--_container-elevation: var(--md-navigation-bar-container-elevation, var(--md-navigation-bar-container-elevation, 2));--_container-height: var(--md-navigation-bar-container-height, var(--md-navigation-bar-container-height, 80px));--_container-shape: var(--md-navigation-bar-container-shape, var(--md-navigation-bar-container-shape, var(--md-sys-shape-corner-none, 0px)));--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, var(--md-navigation-bar-focus-state-layer-opacity, 0.12));--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, var(--md-navigation-bar-hover-state-layer-opacity, 0.08));--_icon-size: var(--md-navigation-bar-icon-size, var(--md-navigation-bar-icon-size, 24px));--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f)));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f)));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-navigation-bar-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto))));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, var(--md-navigation-bar-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem)));--_label-text-size: var(--md-navigation-bar-label-text-size, var(--md-navigation-bar-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem)));--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, var(--md-navigation-bar-label-text-tracking, ));--_label-text-type: var(--md-navigation-bar-label-text-type, var(--md-navigation-bar-label-text-type, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem) var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto))));--_label-text-weight: var(--md-navigation-bar-label-text-weight, var(--md-navigation-bar-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))));--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, var(--md-navigation-bar-pressed-state-layer-opacity, 0.12));--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;z-index:0}/*# sourceMappingURL=navigation-bar-styles.css.map */
+:host{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, var(--md-sys-shape-corner-full, 9999px));--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700)));--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, var(--md-sys-shape-corner-none, 0px));--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-navigation-bar-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem));--_label-text-size: var(--md-navigation-bar-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem));--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, );--_label-text-type: var(--md-navigation-bar-label-text-type, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem) var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-weight: var(--md-navigation-bar-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;z-index:0}/*# sourceMappingURL=navigation-bar-styles.css.map */

package/labs/navigationbar/internal/navigation-bar-styles.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_navigation-bar.scss","../../../elevation/internal/_elevation.scss"],"names":[],"mappings":"AAmCE,MAEI,g+NCfA,8GDyBF,WAGF,oBACE,aACA,kBACA,WACA,yCACA,sCACA,gCAEA,6DACE,gBACA,cAIJ,aACE,0BAEA","file":"navigation-bar-styles.css"}
+{"version":3,"sourceRoot":"","sources":["_navigation-bar.scss","../../../elevation/internal/_elevation.scss"],"names":[],"mappings":"AAmCE,MAEI,g8JCfA,8GDyBF,WAGF,oBACE,aACA,kBACA,WACA,yCACA,sCACA,gCAEA,6DACE,gBACA,cAIJ,aACE,0BAEA","file":"navigation-bar-styles.css"}

package/labs/navigationbar/internal/navigation-bar-styles.js

@@ -5,6 +5,6 @@
  */
 // Generated stylesheet for ./labs/navigationbar/internal/navigation-bar-styles.css.
 import { css } from 'lit';
-export const styles = css `:host{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8)));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, var(--md-navigation-bar-active-indicator-height, 32px));--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, var(--md-navigation-bar-active-indicator-shape, var(--md-sys-shape-corner-full, 9999px)));--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, var(--md-navigation-bar-active-indicator-width, 64px));--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, var(--md-navigation-bar-active-label-text-weight, var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700))));--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_container-color: var(--md-navigation-bar-container-color, var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7)));--_container-elevation: var(--md-navigation-bar-container-elevation, var(--md-navigation-bar-container-elevation, 2));--_container-height: var(--md-navigation-bar-container-height, var(--md-navigation-bar-container-height, 80px));--_container-shape: var(--md-navigation-bar-container-shape, var(--md-navigation-bar-container-shape, var(--md-sys-shape-corner-none, 0px)));--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, var(--md-navigation-bar-focus-state-layer-opacity, 0.12));--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, var(--md-navigation-bar-hover-state-layer-opacity, 0.08));--_icon-size: var(--md-navigation-bar-icon-size, var(--md-navigation-bar-icon-size, 24px));--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f)));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f)));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-navigation-bar-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto))));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, var(--md-navigation-bar-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem)));--_label-text-size: var(--md-navigation-bar-label-text-size, var(--md-navigation-bar-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem)));--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, var(--md-navigation-bar-label-text-tracking, ));--_label-text-type: var(--md-navigation-bar-label-text-type, var(--md-navigation-bar-label-text-type, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem) var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto))));--_label-text-weight: var(--md-navigation-bar-label-text-weight, var(--md-navigation-bar-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))));--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, var(--md-navigation-bar-pressed-state-layer-opacity, 0.12));--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;z-index:0}
+export const styles = css `:host{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, var(--md-sys-shape-corner-full, 9999px));--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700)));--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, var(--md-sys-shape-corner-none, 0px));--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-navigation-bar-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem));--_label-text-size: var(--md-navigation-bar-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem));--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, );--_label-text-type: var(--md-navigation-bar-label-text-type, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem) var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-weight: var(--md-navigation-bar-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;z-index:0}
 `;
 //# sourceMappingURL=navigation-bar-styles.js.map

package/labs/navigationbar/internal/navigation-bar-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-bar-styles.js","sourceRoot":"","sources":["navigation-bar-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,oFAAoF;AACpF,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 ./labs/navigationbar/internal/navigation-bar-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8)));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, var(--md-navigation-bar-active-indicator-height, 32px));--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, var(--md-navigation-bar-active-indicator-shape, var(--md-sys-shape-corner-full, 9999px)));--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, var(--md-navigation-bar-active-indicator-width, 64px));--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, var(--md-navigation-bar-active-label-text-weight, var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700))));--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b)));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_container-color: var(--md-navigation-bar-container-color, var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7)));--_container-elevation: var(--md-navigation-bar-container-elevation, var(--md-navigation-bar-container-elevation, 2));--_container-height: var(--md-navigation-bar-container-height, var(--md-navigation-bar-container-height, 80px));--_container-shape: var(--md-navigation-bar-container-shape, var(--md-navigation-bar-container-shape, var(--md-sys-shape-corner-none, 0px)));--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, var(--md-navigation-bar-focus-state-layer-opacity, 0.12));--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, var(--md-navigation-bar-hover-state-layer-opacity, 0.08));--_icon-size: var(--md-navigation-bar-icon-size, var(--md-navigation-bar-icon-size, 24px));--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f)));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f)));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20)));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20)));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-navigation-bar-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto))));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, var(--md-navigation-bar-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem)));--_label-text-size: var(--md-navigation-bar-label-text-size, var(--md-navigation-bar-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem)));--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, var(--md-navigation-bar-label-text-tracking, ));--_label-text-type: var(--md-navigation-bar-label-text-type, var(--md-navigation-bar-label-text-type, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem) var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto))));--_label-text-weight: var(--md-navigation-bar-label-text-weight, var(--md-navigation-bar-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))));--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, var(--md-navigation-bar-pressed-state-layer-opacity, 0.12));--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;z-index:0}\n`;\n"]}
+{"version":3,"file":"navigation-bar-styles.js","sourceRoot":"","sources":["navigation-bar-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,oFAAoF;AACpF,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 ./labs/navigationbar/internal/navigation-bar-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{--_active-indicator-color: var(--md-navigation-bar-active-indicator-color, var(--md-sys-color-secondary-container, #e8def8));--_active-indicator-height: var(--md-navigation-bar-active-indicator-height, 32px);--_active-indicator-shape: var(--md-navigation-bar-active-indicator-shape, var(--md-sys-shape-corner-full, 9999px));--_active-indicator-width: var(--md-navigation-bar-active-indicator-width, 64px);--_active-focus-icon-color: var(--md-navigation-bar-active-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-focus-label-text-color: var(--md-navigation-bar-active-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-focus-state-layer-color: var(--md-navigation-bar-active-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-icon-color: var(--md-navigation-bar-active-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-hover-label-text-color: var(--md-navigation-bar-active-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-hover-state-layer-color: var(--md-navigation-bar-active-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_active-icon-color: var(--md-navigation-bar-active-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-label-text-color: var(--md-navigation-bar-active-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-label-text-weight: var(--md-navigation-bar-active-label-text-weight, var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700)));--_active-pressed-icon-color: var(--md-navigation-bar-active-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_active-pressed-label-text-color: var(--md-navigation-bar-active-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_active-pressed-state-layer-color: var(--md-navigation-bar-active-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_container-color: var(--md-navigation-bar-container-color, var(--md-sys-color-surface-container, #f3edf7));--_container-elevation: var(--md-navigation-bar-container-elevation, 2);--_container-height: var(--md-navigation-bar-container-height, 80px);--_container-shape: var(--md-navigation-bar-container-shape, var(--md-sys-shape-corner-none, 0px));--_focus-state-layer-opacity: var(--md-navigation-bar-focus-state-layer-opacity, 0.12);--_hover-state-layer-opacity: var(--md-navigation-bar-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-navigation-bar-icon-size, 24px);--_inactive-focus-icon-color: var(--md-navigation-bar-inactive-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-label-text-color: var(--md-navigation-bar-inactive-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-focus-state-layer-color: var(--md-navigation-bar-inactive-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-icon-color: var(--md-navigation-bar-inactive-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-label-text-color: var(--md-navigation-bar-inactive-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-hover-state-layer-color: var(--md-navigation-bar-inactive-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-icon-color: var(--md-navigation-bar-inactive-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-label-text-color: var(--md-navigation-bar-inactive-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_inactive-pressed-icon-color: var(--md-navigation-bar-inactive-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-label-text-color: var(--md-navigation-bar-inactive-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_inactive-pressed-state-layer-color: var(--md-navigation-bar-inactive-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-font: var(--md-navigation-bar-label-text-font, var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-navigation-bar-label-text-line-height, var(--md-sys-typescale-label-medium-line-height, 1rem));--_label-text-size: var(--md-navigation-bar-label-text-size, var(--md-sys-typescale-label-medium-size, 0.75rem));--_label-text-tracking: var(--md-navigation-bar-label-text-tracking, );--_label-text-type: var(--md-navigation-bar-label-text-type, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)) var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem) var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-weight: var(--md-navigation-bar-label-text-weight, var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-state-layer-opacity: var(--md-navigation-bar-pressed-state-layer-opacity, 0.12);--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color);width:100%}.md3-navigation-bar{display:flex;position:relative;width:100%;background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-bar .md3-navigation-bar__tabs-slot-container{display:inherit;width:inherit}md-elevation{transition-duration:280ms;z-index:0}\n`;\n"]}

package/labs/navigationtab/internal/_navigation-tab.scss

@@ -38,7 +38,7 @@ $animation-duration: 100ms;
 
   :host {
     @each $token, $value in $tokens {
-      --_#{$token}: var(--md-navigation-bar-#{$token}, #{$value});
+      --_#{$token}: #{$value};
     }
 
     display: flex;