@material/web 0.1.0-alpha.0

package/field/lib/field.js

@@ -0,0 +1,253 @@
+/**
+ * @requirecss {field.lib.shared_styles}
+ *
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { createAnimationSignal, Easing } from '@material/web/motion/animation.js';
+import { html, LitElement } from 'lit';
+import { property, queryAsync, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+/** @soyCompatible */
+export class Field extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.error = false;
+        this.focused = false;
+        this.populated = false;
+        this.required = false;
+        /**
+         * Whether or not the field has leading content.
+         */
+        this.hasStart = false;
+        /**
+         * Whether or not the field has trailing content.
+         */
+        this.hasEnd = false;
+        this.isAnimating = false;
+        this.labelAnimationSignal = createAnimationSignal();
+    }
+    /** @soyTemplate */
+    render() {
+        return html `
+      <span class="md3-field ${classMap(this.getRenderClasses())}">
+        ${this.renderContainer()}
+        ${this.renderSupportingText()}
+      </span>
+    `;
+    }
+    /** @soyTemplate */
+    renderContainer() {
+        return html `
+      <span class="md3-field__container">
+        ${this.renderContainerContents()}
+      </span>
+    `;
+    }
+    /** @soyTemplate */
+    getRenderClasses() {
+        return {
+            'md3-field--disabled': this.disabled,
+            'md3-field--error': this.error,
+            'md3-field--focused': this.focused,
+            'md3-field--with-start': this.hasStart,
+            'md3-field--with-end': this.hasEnd,
+            'md3-field--populated': this.populated,
+            'md3-field--required': this.required,
+            'md3-field--no-label': !this.label,
+        };
+    }
+    /** @soyTemplate */
+    renderContainerContents() {
+        return html `
+      <span class="md3-field__start">
+        <slot name="start"></slot>
+      </span>
+      <span class="md3-field__middle">${this.renderMiddleContents()}</span>
+      <span class="md3-field__end">
+        <slot name="end"></slot>
+      </span>
+    `;
+    }
+    /** @soyTemplate */
+    renderMiddleContents() {
+        return html `
+      <span class="md3-field__content"><slot></slot></span>
+    `;
+    }
+    /** @soyTemplate */
+    renderFloatingLabel() {
+        const visible = (this.focused || this.populated) && !this.isAnimating;
+        /** @classMap */
+        const classes = { 'md3-field__label--hidden': !visible };
+        return html `
+      <span class="md3-field__label md3-field__label--floating ${classMap(classes)}"
+        aria-hidden=${!visible}
+      >${this.renderLabelText()}</span>
+    `;
+        // TODO(b/217441842): Create shared function once argument bug is fixed
+        // return this.renderLabel(LabelType.FLOATING);
+    }
+    /** @soyTemplate */
+    renderRestingLabel() {
+        const visible = !(this.focused || this.populated) || this.isAnimating;
+        /** @classMap */
+        const classes = { 'md3-field__label--hidden': !visible };
+        return html `
+      <span class="md3-field__label md3-field__label--resting ${classMap(classes)}"
+        aria-hidden=${!visible}
+      >${this.renderLabelText()}</span>
+    `;
+        // TODO(b/217441842): Create shared function once argument bug is fixed
+        // return this.renderLabel(LabelType.RESTING);
+    }
+    /** @soyTemplate */
+    renderLabelText() {
+        const labelText = this.label ?? '';
+        const optionalAsterisk = this.required && labelText ? '*' : '';
+        return labelText + optionalAsterisk;
+    }
+    /** @soyTemplate */
+    renderSupportingText() {
+        return html `
+      <span class="md3-field__supporting-text">
+        <span class="md3-field__supporting-text-start">
+          <slot name="supporting-text"></slot>
+        </span>
+        <span class="md3-field__supporting-text-end">
+          <slot name="supporting-text-end"></slot>
+        </span>
+      </span>
+    `;
+    }
+    update(props) {
+        // Client-side property updates
+        // When disabling, remove focus styles if focused.
+        if (this.disabled && this.focused) {
+            props.set('focused', true);
+            this.focused = false;
+        }
+        // Animate if focused or populated change.
+        this.animateLabelIfNeeded({
+            wasFocused: props.get('focused'),
+            wasPopulated: props.get('populated')
+        });
+        super.update(props);
+    }
+    async animateLabelIfNeeded({ wasFocused, wasPopulated }) {
+        if (!this.label) {
+            return;
+        }
+        wasFocused ?? (wasFocused = this.focused);
+        wasPopulated ?? (wasPopulated = this.populated);
+        const wasFloating = wasFocused || wasPopulated;
+        const shouldBeFloating = this.focused || this.populated;
+        if (wasFloating === shouldBeFloating) {
+            return;
+        }
+        this.isAnimating = true;
+        const signal = this.labelAnimationSignal.start();
+        // Only one label is visible at a time for clearer text rendering.
+        // The resting label is visible and used during animation. At the end of the
+        // animation, it will either remain visible (if resting) or hide and the
+        // floating label will be shown.
+        const labelEl = await this.restingLabelEl;
+        const keyframes = await this.getLabelKeyframes();
+        if (signal.aborted) {
+            // Don't animate if this animation was requested to stop while getting
+            // the label element or calculating keyframes
+            return;
+        }
+        // We don't use forward filling because if the dimensions of the text field
+        // change (leading icon removed, density changes, etc), then the animation
+        // will be inaccurate.
+        //
+        // Re-calculating the animation each time will prevent any visual glitches
+        // from appearing.
+        // TODO(b/241113345): use animation tokens
+        const animation = labelEl.animate(keyframes, { duration: 150, easing: Easing.STANDARD });
+        signal.addEventListener('abort', () => {
+            // Cancel if requested (another animation starts playing).
+            animation.cancel();
+        });
+        animation.addEventListener('finish', () => {
+            // At the end of the animation, update the visible label.
+            this.isAnimating = false;
+            this.labelAnimationSignal.finish();
+        });
+    }
+    async getLabelKeyframes() {
+        const floatingLabelEl = await this.floatingLabelEl;
+        const restingLabelEl = await this.restingLabelEl;
+        const { x: floatingX, y: floatingY, width: floatingWidth, height: floatingHeight } = floatingLabelEl.getBoundingClientRect();
+        const { x: restingX, y: restingY, width: restingWidth, height: restingHeight } = restingLabelEl.getBoundingClientRect();
+        // Scale by width ratio instead of font size since letter-spacing will scale
+        // incorrectly. Using the width we can better approximate the adjusted
+        // scale and compensate for tracking.
+        const scale = floatingWidth / restingWidth;
+        const xDelta = floatingX - restingX;
+        // The line-height of the resting and floating label are different. When
+        // we move the resting label up to the floating label's position, it won't
+        // exactly match because of this. We need to adjust by half of what the
+        // final scaled resting label's height will be.
+        const yDelta = floatingY - restingY +
+            Math.round((floatingHeight - restingHeight * scale) / 2);
+        // Create the two transforms: resting to floating (using the calculations
+        // above), and floating to resting (re-setting the transform to initial
+        // values).
+        const floatTransform = `translateX(${xDelta}px) translateY(calc(-50% + ${yDelta}px)) scale(${scale})`;
+        const restTransform = `translateX(0) translateY(-50%) scale(1)`;
+        if (this.focused || this.populated) {
+            return [{ transform: restTransform }, { transform: floatTransform }];
+        }
+        return [{ transform: floatTransform }, { transform: restTransform }];
+    }
+}
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Field.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Field.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Field.prototype, "focused", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Field.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Field.prototype, "populated", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Field.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Field.prototype, "hasStart", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Field.prototype, "hasEnd", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Field.prototype, "isAnimating", void 0);
+__decorate([
+    queryAsync('.md3-field__label--floating'),
+    __metadata("design:type", Promise)
+], Field.prototype, "floatingLabelEl", void 0);
+__decorate([
+    queryAsync('.md3-field__label--resting'),
+    __metadata("design:type", Promise)
+], Field.prototype, "restingLabelEl", void 0);
+//# sourceMappingURL=field.js.map

package/field/lib/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sourceRoot":"","sources":["field.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @requirecss {field.lib.shared_styles}\n *\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {createAnimationSignal, Easing} from '@material/web/motion/animation.js';\nimport {html, LitElement, PropertyValues, TemplateResult} from 'lit';\nimport {property, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\n/** @soyCompatible */\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({type: String}) label?: string;\n  @property({type: Boolean}) populated = false;\n  @property({type: Boolean}) required = false;\n\n  /**\n   * Whether or not the field has leading content.\n   */\n  @property({type: Boolean}) hasStart = false;\n  /**\n   * Whether or not the field has trailing content.\n   */\n  @property({type: Boolean}) hasEnd = false;\n\n  @state() protected isAnimating = false;\n\n  protected readonly labelAnimationSignal = createAnimationSignal();\n\n  @queryAsync('.md3-field__label--floating')\n  protected readonly floatingLabelEl!: Promise<HTMLElement>;\n  @queryAsync('.md3-field__label--resting')\n  protected readonly restingLabelEl!: Promise<HTMLElement>;\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`\n      <span class=\"md3-field ${classMap(this.getRenderClasses())}\">\n        ${this.renderContainer()}\n        ${this.renderSupportingText()}\n      </span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected renderContainer(): TemplateResult {\n    return html`\n      <span class=\"md3-field__container\">\n        ${this.renderContainerContents()}\n      </span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-field--disabled': this.disabled,\n      'md3-field--error': this.error,\n      'md3-field--focused': this.focused,\n      'md3-field--with-start': this.hasStart,\n      'md3-field--with-end': this.hasEnd,\n      'md3-field--populated': this.populated,\n      'md3-field--required': this.required,\n      'md3-field--no-label': !this.label,\n    };\n  }\n\n  /** @soyTemplate */\n  protected renderContainerContents(): TemplateResult {\n    return html`\n      <span class=\"md3-field__start\">\n        <slot name=\"start\"></slot>\n      </span>\n      <span class=\"md3-field__middle\">${this.renderMiddleContents()}</span>\n      <span class=\"md3-field__end\">\n        <slot name=\"end\"></slot>\n      </span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected renderMiddleContents(): TemplateResult {\n    return html`\n      <span class=\"md3-field__content\"><slot></slot></span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected renderFloatingLabel(): TemplateResult {\n    const visible = (this.focused || this.populated) && !this.isAnimating;\n    /** @classMap */\n    const classes = {'md3-field__label--hidden': !visible};\n    return html`\n      <span class=\"md3-field__label md3-field__label--floating ${\n        classMap(classes)}\"\n        aria-hidden=${!visible}\n      >${this.renderLabelText()}</span>\n    `;\n\n    // TODO(b/217441842): Create shared function once argument bug is fixed\n    // return this.renderLabel(LabelType.FLOATING);\n  }\n\n  /** @soyTemplate */\n  protected renderRestingLabel(): TemplateResult {\n    const visible = !(this.focused || this.populated) || this.isAnimating;\n    /** @classMap */\n    const classes = {'md3-field__label--hidden': !visible};\n    return html`\n      <span class=\"md3-field__label md3-field__label--resting ${\n        classMap(classes)}\"\n        aria-hidden=${!visible}\n      >${this.renderLabelText()}</span>\n    `;\n\n    // TODO(b/217441842): Create shared function once argument bug is fixed\n    // return this.renderLabel(LabelType.RESTING);\n  }\n\n  /** @soyTemplate */\n  protected renderLabelText(): string {\n    const labelText = this.label ?? '';\n    const optionalAsterisk = this.required && labelText ? '*' : '';\n    return labelText + optionalAsterisk;\n  }\n\n  /** @soyTemplate */\n  protected renderSupportingText(): TemplateResult {\n    return html`\n      <span class=\"md3-field__supporting-text\">\n        <span class=\"md3-field__supporting-text-start\">\n          <slot name=\"supporting-text\"></slot>\n        </span>\n        <span class=\"md3-field__supporting-text-end\">\n          <slot name=\"supporting-text-end\"></slot>\n        </span>\n      </span>\n    `;\n  }\n\n  protected override update(props: PropertyValues<Field>) {\n    // Client-side property updates\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 async animateLabelIfNeeded({wasFocused, wasPopulated}: {\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    const signal = this.labelAnimationSignal.start();\n\n    // Only one label is visible at a time for clearer text rendering.\n    // The resting label is visible and used during animation. At the end of the\n    // animation, it will either remain visible (if resting) or hide and the\n    // floating label will be shown.\n    const labelEl = await this.restingLabelEl;\n    const keyframes = await this.getLabelKeyframes();\n    if (signal.aborted) {\n      // Don't animate if this animation was requested to stop while getting\n      // the label element or calculating keyframes\n      return;\n    }\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    const animation =\n        labelEl.animate(keyframes, {duration: 150, easing: Easing.STANDARD});\n\n    signal.addEventListener('abort', () => {\n      // Cancel if requested (another animation starts playing).\n      animation.cancel();\n    });\n\n    animation.addEventListener('finish', () => {\n      // At the end of the animation, update the visible label.\n      this.isAnimating = false;\n      this.labelAnimationSignal.finish();\n    });\n  }\n\n  protected async getLabelKeyframes() {\n    const floatingLabelEl = await this.floatingLabelEl;\n    const restingLabelEl = await this.restingLabelEl;\n    const {\n      x: floatingX,\n      y: floatingY,\n      width: floatingWidth,\n      height: floatingHeight\n    } = floatingLabelEl.getBoundingClientRect();\n    const {\n      x: restingX,\n      y: restingY,\n      width: restingWidth,\n      height: restingHeight\n    } = restingLabelEl.getBoundingClientRect();\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.\n    const scale = floatingWidth / restingWidth;\n    const xDelta = floatingX - restingX;\n    // The line-height of the resting and floating label are different. When\n    // we move the resting label up to the floating label's position, it won't\n    // exactly match because of this. We need to adjust by half of what the\n    // final scaled resting label's height will be.\n    const yDelta = floatingY - restingY +\n        Math.round((floatingHeight - restingHeight * scale) / 2);\n\n    // Create the two transforms: resting to floating (using the calculations\n    // above), and floating to resting (re-setting the transform to initial\n    // values).\n    const floatTransform = `translateX(${xDelta}px) translateY(calc(-50% + ${\n        yDelta}px)) scale(${scale})`;\n    const restTransform = `translateX(0) translateY(-50%) scale(1)`;\n\n    if (this.focused || this.populated) {\n      return [{transform: restTransform}, {transform: floatTransform}];\n    }\n\n    return [{transform: floatTransform}, {transform: restTransform}];\n  }\n}\n"]}

package/field/lib/filled-field.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { PropertyValues, TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+import { Field } from './field.js';
+/** @soyCompatible */
+export declare class FilledField extends Field {
+    protected strokeTransformOrigin: string;
+    /** @soyTemplate */
+    protected getRenderClasses(): ClassInfo;
+    /** @soyTemplate */
+    protected renderContainer(): TemplateResult;
+    /** @soyTemplate */
+    protected renderContainerContents(): TemplateResult;
+    /** @soyTemplate */
+    protected renderMiddleContents(): TemplateResult;
+    protected handleClick(event: MouseEvent | TouchEvent): void;
+    protected update(props: PropertyValues<this>): void;
+    protected updateStrokeTransformOrigin(event?: MouseEvent | TouchEvent): Promise<void>;
+}

package/field/lib/filled-field.js

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { html } from 'lit';
+import { state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { Field } from './field.js';
+/** @soyCompatible */
+export class FilledField extends Field {
+    constructor() {
+        super(...arguments);
+        this.strokeTransformOrigin = '';
+    }
+    /** @soyTemplate */
+    getRenderClasses() {
+        return {
+            ...super.getRenderClasses(),
+            'md3-field--filled': true,
+        };
+    }
+    /** @soyTemplate */
+    renderContainer() {
+        return html `
+      <span class="md3-field__container" @click=${this.handleClick}>
+        ${this.renderContainerContents()}
+      </span>
+    `;
+    }
+    /** @soyTemplate */
+    renderContainerContents() {
+        /** @styleMap */
+        const strokeStyle = { transformOrigin: this.strokeTransformOrigin };
+        return html `
+      <span class="md3-field__state-layer"></span>
+      ${super.renderContainerContents()}
+      <span class="md3-field__active-indicator"
+        style="${styleMap(strokeStyle)}"></span>
+    `;
+    }
+    /** @soyTemplate */
+    renderMiddleContents() {
+        return html `
+      ${this.renderFloatingLabel()}
+      ${this.renderRestingLabel()}
+      ${super.renderMiddleContents()}
+    `;
+    }
+    handleClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        this.updateStrokeTransformOrigin(event);
+    }
+    update(props) {
+        // Upon losing focus, the stroke resets to expanding from the center, such
+        // as when re-focusing with a keyboard.
+        const unfocusing = props.has('focused') && !this.focused;
+        if (unfocusing) {
+            this.updateStrokeTransformOrigin();
+        }
+        super.update(props);
+    }
+    async updateStrokeTransformOrigin(event) {
+        let transformOrigin = '';
+        if (event) {
+            // Can't use instanceof TouchEvent since Firefox does not provide the
+            // constructor globally.
+            const isTouchEvent = 'touches' in event;
+            const eventX = isTouchEvent ? event.touches[0].clientX : event.clientX;
+            const rootRect = this.getBoundingClientRect();
+            transformOrigin = `${eventX - rootRect.x}px`;
+        }
+        this.strokeTransformOrigin = transformOrigin;
+    }
+}
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FilledField.prototype, "strokeTransformOrigin", void 0);
+//# sourceMappingURL=filled-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filled-field.js","sourceRoot":"","sources":["filled-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAiC,MAAM,KAAK,CAAC;AACzD,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAC;AAEjC,qBAAqB;AACrB,MAAM,OAAO,WAAY,SAAQ,KAAK;IAAtC;;QACqB,0BAAqB,GAAG,EAAE,CAAC;IAwEhD,CAAC;IAtEC,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,mBAAmB,EAAE,IAAI;SAC1B,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,eAAe;QAChC,OAAO,IAAI,CAAA;kDACmC,IAAI,CAAC,WAAW;UACxD,IAAI,CAAC,uBAAuB,EAAE;;KAEnC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,uBAAuB;QACxC,gBAAgB;QAChB,MAAM,WAAW,GAAG,EAAC,eAAe,EAAE,IAAI,CAAC,qBAAqB,EAAC,CAAC;QAClE,OAAO,IAAI,CAAA;;QAEP,KAAK,CAAC,uBAAuB,EAAE;;iBAEtB,QAAQ,CAAC,WAAW,CAAC;KACjC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,oBAAoB;QACrC,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,mBAAmB,EAAE;QAC1B,IAAI,CAAC,kBAAkB,EAAE;QACzB,KAAK,CAAC,oBAAoB,EAAE;KAC/B,CAAC;IACJ,CAAC;IAES,WAAW,CAAC,KAA4B;QAChD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,2BAA2B,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEkB,MAAM,CAAC,KAA2B;QACnD,0EAA0E;QAC1E,uCAAuC;QACvC,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;QACzD,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,2BAA2B,EAAE,CAAC;SACpC;QAED,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAES,KAAK,CAAC,2BAA2B,CAAC,KAA6B;QACvE,IAAI,eAAe,GAAG,EAAE,CAAC;QACzB,IAAI,KAAK,EAAE;YACT,qEAAqE;YACrE,wBAAwB;YACxB,MAAM,YAAY,GAAG,SAAS,IAAI,KAAK,CAAC;YACxC,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;YACvE,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC9C,eAAe,GAAG,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC,IAAI,CAAC;SAC9C;QAED,IAAI,CAAC,qBAAqB,GAAG,eAAe,CAAC;IAC/C,CAAC;CACF;AAxEU;IAAR,KAAK,EAAE;;0DAAsC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, PropertyValues, TemplateResult} from 'lit';\nimport {state} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {Field} from './field.js';\n\n/** @soyCompatible */\nexport class FilledField extends Field {\n  @state() protected strokeTransformOrigin = '';\n\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-field--filled': true,\n    };\n  }\n\n  /** @soyTemplate */\n  protected override renderContainer(): TemplateResult {\n    return html`\n      <span class=\"md3-field__container\" @click=${this.handleClick}>\n        ${this.renderContainerContents()}\n      </span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected override renderContainerContents(): TemplateResult {\n    /** @styleMap */\n    const strokeStyle = {transformOrigin: this.strokeTransformOrigin};\n    return html`\n      <span class=\"md3-field__state-layer\"></span>\n      ${super.renderContainerContents()}\n      <span class=\"md3-field__active-indicator\"\n        style=\"${styleMap(strokeStyle)}\"></span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected override renderMiddleContents(): TemplateResult {\n    return html`\n      ${this.renderFloatingLabel()}\n      ${this.renderRestingLabel()}\n      ${super.renderMiddleContents()}\n    `;\n  }\n\n  protected handleClick(event: MouseEvent|TouchEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    this.updateStrokeTransformOrigin(event);\n  }\n\n  protected override update(props: PropertyValues<this>) {\n    // Upon losing focus, the stroke resets to expanding from the center, such\n    // as when re-focusing with a keyboard.\n    const unfocusing = props.has('focused') && !this.focused;\n    if (unfocusing) {\n      this.updateStrokeTransformOrigin();\n    }\n\n    super.update(props);\n  }\n\n  protected async updateStrokeTransformOrigin(event?: MouseEvent|TouchEvent) {\n    let transformOrigin = '';\n    if (event) {\n      // Can't use instanceof TouchEvent since Firefox does not provide the\n      // constructor globally.\n      const isTouchEvent = 'touches' in event;\n      const eventX = isTouchEvent ? event.touches[0].clientX : event.clientX;\n      const rootRect = this.getBoundingClientRect();\n      transformOrigin = `${eventX - rootRect.x}px`;\n    }\n\n    this.strokeTransformOrigin = transformOrigin;\n  }\n}\n"]}

package/field/lib/filled-styles.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/field/lib/filled-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `.md3-field--filled .md3-field__container{overflow:hidden;z-index:0}.md3-field--filled .md3-field__container::before,.md3-field--filled .md3-field__container::after{border-radius:inherit;content:"";display:flex;height:100%;position:absolute;width:100%;z-index:-1}.md3-field--filled .md3-field__container::after{visibility:hidden}.md3-field--filled:not(.md3-field--disabled):hover .md3-field__state-layer{visibility:visible}.md3-field--filled .md3-field__label--floating{position:absolute;top:0}.md3-field__state-layer{border-radius:inherit;height:100%;position:absolute;width:100%;visibility:hidden;z-index:-1}.md3-field__active-indicator{inset:auto 0 0 0;pointer-events:none;position:absolute;width:100%}.md3-field__active-indicator::before,.md3-field__active-indicator::after{border-bottom-style:solid;inset:auto 0 0 0;content:"";position:absolute;width:100%}.md3-field__active-indicator::after{opacity:0;transform:scaleX(0);transform-origin:inherit;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),transform 0s ease 150ms}.md3-field--focused .md3-field__active-indicator::after{opacity:1;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--filled .md3-field__container{flex-basis:var(--md-filled-field-container-height, 56px)}.md3-field--filled .md3-field__content{color:var(--md-filled-field-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:hover .md3-field__content{color:var(--md-filled-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled.md3-field--focused .md3-field__content{color:var(--md-filled-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled.md3-field--disabled .md3-field__content{color:var(--md-filled-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__content{color:var(--md-filled-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__content{color:var(--md-filled-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__content{color:var(--md-filled-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled.md3-field--disabled.md3-field--no-label .md3-field__content,.md3-field--filled.md3-field--disabled.md3-field--focused .md3-field__content,.md3-field--filled.md3-field--disabled.md3-field--populated .md3-field__content{opacity:var(--md-filled-field-disabled-content-opacity, 0.38)}.md3-field--filled .md3-field__label{color:var(--md-filled-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled:hover .md3-field__label{color:var(--md-filled-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled.md3-field--focused .md3-field__label{color:var(--md-filled-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4))}.md3-field--filled.md3-field--disabled .md3-field__label{color:var(--md-filled-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__label{color:var(--md-filled-field-error-label-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__label{color:var(--md-filled-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b))}.md3-field--filled:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__label{color:var(--md-filled-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled .md3-field__label{font-family:var(--md-filled-field-label-text-font, Roboto);font-weight:var(--md-filled-field-label-text-weight, 400);letter-spacing:var(--md-filled-field-label-text-tracking, 0.03125rem)}.md3-field--filled .md3-field__label--resting{font-size:var(--md-filled-field-label-text-size, 1rem);line-height:var(--md-filled-field-label-text-line-height, 1.5rem)}.md3-field--filled .md3-field__label--floating{font-size:var(--md-filled-field-label-text-populated-size, 0.75rem);line-height:var(--md-filled-field-label-text-populated-line-height, 1rem)}.md3-field--filled.md3-field--disabled .md3-field__label:not(.md3-field__label--hidden){opacity:var(--md-filled-field-disabled-label-text-opacity, 0.38)}.md3-field--filled .md3-field__supporting-text{color:var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled:hover .md3-field__supporting-text{color:var(--md-filled-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled.md3-field--focus .md3-field__supporting-text{color:var(--md-filled-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled.md3-field--disabled .md3-field__supporting-text{color:var(--md-filled-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__supporting-text{color:var(--md-filled-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__supporting-text{color:var(--md-filled-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled:not(.md3-field--disabled).md3-field--error.md3-field--focus .md3-field__supporting-text{color:var(--md-filled-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled .md3-field__supporting-text{font-family:var(--md-filled-field-supporting-text-font, Roboto);font-size:var(--md-filled-field-supporting-text-size, 0.75rem);font-weight:var(--md-filled-field-supporting-text-weight, 400);letter-spacing:var(--md-filled-field-supporting-text-tracking, 0.025rem);line-height:var(--md-filled-field-supporting-text-line-height, 1rem)}.md3-field--filled.md3-field--disabled .md3-field__supporting-text{opacity:var(--md-filled-field-disabled-supporting-text-opacity, 0.38)}.md3-field--filled .md3-field__supporting-text{padding:0 var(--md-filled-field-supporting-text-padding, 16px)}.md3-field--filled .md3-field__supporting-text-start ::slotted(:not(:empty)),.md3-field--filled .md3-field__supporting-text-end ::slotted(:not(:empty)){padding-top:var(--md-filled-field-supporting-text-padding-top, 4px)}.md3-field--filled .md3-field__supporting-text-end ::slotted(:not(:empty)){padding-inline-start:var(--md-filled-field-supporting-text-padding, 16px)}.md3-field--filled .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled:hover .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled .md3-field__active-indicator::after{border-bottom-color:var(--md-filled-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4))}.md3-field--filled.md3-field--disabled .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__active-indicator::after{border-bottom-color:var(--md-filled-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled.md3-field--disabled .md3-field__active-indicator::before{opacity:var(--md-filled-field-disabled-active-indicator-opacity, 0.38)}.md3-field--filled .md3-field__active-indicator::before{border-bottom-width:var(--md-filled-field-active-indicator-height, 1px)}.md3-field--filled:hover .md3-field__active-indicator::before{border-bottom-width:var(--md-filled-field-hover-active-indicator-height, 1px)}.md3-field--filled.md3-field--disabled .md3-field__active-indicator::before{border-bottom-width:var(--md-filled-field-disabled-active-indicator-height, 1px)}.md3-field--filled .md3-field__active-indicator::after{border-bottom-width:var(--md-filled-field-focus-active-indicator-height, 2px)}.md3-field--filled .md3-field__container::before{background:var(--md-filled-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec))}.md3-field--filled.md3-field--disabled .md3-field__container::before{background:var(--md-filled-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled.md3-field--disabled .md3-field__container::before{opacity:var(--md-filled-field-disabled-container-opacity, 0.04)}.md3-field--filled:not(.md3-field--with-start) .md3-field__start{padding-inline-start:var(--md-filled-field-container-padding-horizontal, 16px)}.md3-field--filled:not(.md3-field--with-end) .md3-field__end{padding-inline-end:var(--md-filled-field-container-padding-horizontal, 16px)}.md3-field--filled .md3-field__container{padding-top:var(--md-filled-field-container-padding-vertical, 8px);padding-bottom:var(--md-filled-field-container-padding-vertical, 8px)}.md3-field--filled .md3-field__container{border-start-start-radius:var(--md-filled-field-container-shape-start-start, 4px);border-start-end-radius:var(--md-filled-field-container-shape-start-end, 4px);border-end-end-radius:var(--md-filled-field-container-shape-end-end, 0);border-end-start-radius:var(--md-filled-field-container-shape-end-start, 0)}.md3-field--filled:not(.md3-field--no-label) .md3-field__middle{padding-top:var(--md-filled-field-label-text-populated-line-height, 1rem)}.md3-field--filled:hover .md3-field__state-layer{background:var(--md-filled-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__state-layer{background:var(--md-filled-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:hover .md3-field__state-layer{opacity:var(--md-filled-field-hover-state-layer-opacity, 0.08)}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__state-layer{opacity:var(--md-filled-field-error-hover-state-layer-opacity, 0.08)}/*# sourceMappingURL=filled-styles.css.map */
+`;
+//# sourceMappingURL=filled-styles.css.js.map

package/field/lib/filled-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`.md3-field--filled .md3-field__container{overflow:hidden;z-index:0}.md3-field--filled .md3-field__container::before,.md3-field--filled .md3-field__container::after{border-radius:inherit;content:\"\";display:flex;height:100%;position:absolute;width:100%;z-index:-1}.md3-field--filled .md3-field__container::after{visibility:hidden}.md3-field--filled:not(.md3-field--disabled):hover .md3-field__state-layer{visibility:visible}.md3-field--filled .md3-field__label--floating{position:absolute;top:0}.md3-field__state-layer{border-radius:inherit;height:100%;position:absolute;width:100%;visibility:hidden;z-index:-1}.md3-field__active-indicator{inset:auto 0 0 0;pointer-events:none;position:absolute;width:100%}.md3-field__active-indicator::before,.md3-field__active-indicator::after{border-bottom-style:solid;inset:auto 0 0 0;content:\"\";position:absolute;width:100%}.md3-field__active-indicator::after{opacity:0;transform:scaleX(0);transform-origin:inherit;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),transform 0s ease 150ms}.md3-field--focused .md3-field__active-indicator::after{opacity:1;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--filled .md3-field__container{flex-basis:var(--md-filled-field-container-height, 56px)}.md3-field--filled .md3-field__content{color:var(--md-filled-field-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:hover .md3-field__content{color:var(--md-filled-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled.md3-field--focused .md3-field__content{color:var(--md-filled-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled.md3-field--disabled .md3-field__content{color:var(--md-filled-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__content{color:var(--md-filled-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__content{color:var(--md-filled-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__content{color:var(--md-filled-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled.md3-field--disabled.md3-field--no-label .md3-field__content,.md3-field--filled.md3-field--disabled.md3-field--focused .md3-field__content,.md3-field--filled.md3-field--disabled.md3-field--populated .md3-field__content{opacity:var(--md-filled-field-disabled-content-opacity, 0.38)}.md3-field--filled .md3-field__label{color:var(--md-filled-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled:hover .md3-field__label{color:var(--md-filled-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled.md3-field--focused .md3-field__label{color:var(--md-filled-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4))}.md3-field--filled.md3-field--disabled .md3-field__label{color:var(--md-filled-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__label{color:var(--md-filled-field-error-label-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__label{color:var(--md-filled-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b))}.md3-field--filled:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__label{color:var(--md-filled-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled .md3-field__label{font-family:var(--md-filled-field-label-text-font, Roboto);font-weight:var(--md-filled-field-label-text-weight, 400);letter-spacing:var(--md-filled-field-label-text-tracking, 0.03125rem)}.md3-field--filled .md3-field__label--resting{font-size:var(--md-filled-field-label-text-size, 1rem);line-height:var(--md-filled-field-label-text-line-height, 1.5rem)}.md3-field--filled .md3-field__label--floating{font-size:var(--md-filled-field-label-text-populated-size, 0.75rem);line-height:var(--md-filled-field-label-text-populated-line-height, 1rem)}.md3-field--filled.md3-field--disabled .md3-field__label:not(.md3-field__label--hidden){opacity:var(--md-filled-field-disabled-label-text-opacity, 0.38)}.md3-field--filled .md3-field__supporting-text{color:var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled:hover .md3-field__supporting-text{color:var(--md-filled-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled.md3-field--focus .md3-field__supporting-text{color:var(--md-filled-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled.md3-field--disabled .md3-field__supporting-text{color:var(--md-filled-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__supporting-text{color:var(--md-filled-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__supporting-text{color:var(--md-filled-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled:not(.md3-field--disabled).md3-field--error.md3-field--focus .md3-field__supporting-text{color:var(--md-filled-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled .md3-field__supporting-text{font-family:var(--md-filled-field-supporting-text-font, Roboto);font-size:var(--md-filled-field-supporting-text-size, 0.75rem);font-weight:var(--md-filled-field-supporting-text-weight, 400);letter-spacing:var(--md-filled-field-supporting-text-tracking, 0.025rem);line-height:var(--md-filled-field-supporting-text-line-height, 1rem)}.md3-field--filled.md3-field--disabled .md3-field__supporting-text{opacity:var(--md-filled-field-disabled-supporting-text-opacity, 0.38)}.md3-field--filled .md3-field__supporting-text{padding:0 var(--md-filled-field-supporting-text-padding, 16px)}.md3-field--filled .md3-field__supporting-text-start ::slotted(:not(:empty)),.md3-field--filled .md3-field__supporting-text-end ::slotted(:not(:empty)){padding-top:var(--md-filled-field-supporting-text-padding-top, 4px)}.md3-field--filled .md3-field__supporting-text-end ::slotted(:not(:empty)){padding-inline-start:var(--md-filled-field-supporting-text-padding, 16px)}.md3-field--filled .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled:hover .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled .md3-field__active-indicator::after{border-bottom-color:var(--md-filled-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4))}.md3-field--filled.md3-field--disabled .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__active-indicator::after{border-bottom-color:var(--md-filled-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled.md3-field--disabled .md3-field__active-indicator::before{opacity:var(--md-filled-field-disabled-active-indicator-opacity, 0.38)}.md3-field--filled .md3-field__active-indicator::before{border-bottom-width:var(--md-filled-field-active-indicator-height, 1px)}.md3-field--filled:hover .md3-field__active-indicator::before{border-bottom-width:var(--md-filled-field-hover-active-indicator-height, 1px)}.md3-field--filled.md3-field--disabled .md3-field__active-indicator::before{border-bottom-width:var(--md-filled-field-disabled-active-indicator-height, 1px)}.md3-field--filled .md3-field__active-indicator::after{border-bottom-width:var(--md-filled-field-focus-active-indicator-height, 2px)}.md3-field--filled .md3-field__container::before{background:var(--md-filled-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec))}.md3-field--filled.md3-field--disabled .md3-field__container::before{background:var(--md-filled-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled.md3-field--disabled .md3-field__container::before{opacity:var(--md-filled-field-disabled-container-opacity, 0.04)}.md3-field--filled:not(.md3-field--with-start) .md3-field__start{padding-inline-start:var(--md-filled-field-container-padding-horizontal, 16px)}.md3-field--filled:not(.md3-field--with-end) .md3-field__end{padding-inline-end:var(--md-filled-field-container-padding-horizontal, 16px)}.md3-field--filled .md3-field__container{padding-top:var(--md-filled-field-container-padding-vertical, 8px);padding-bottom:var(--md-filled-field-container-padding-vertical, 8px)}.md3-field--filled .md3-field__container{border-start-start-radius:var(--md-filled-field-container-shape-start-start, 4px);border-start-end-radius:var(--md-filled-field-container-shape-start-end, 4px);border-end-end-radius:var(--md-filled-field-container-shape-end-end, 0);border-end-start-radius:var(--md-filled-field-container-shape-end-start, 0)}.md3-field--filled:not(.md3-field--no-label) .md3-field__middle{padding-top:var(--md-filled-field-label-text-populated-line-height, 1rem)}.md3-field--filled:hover .md3-field__state-layer{background:var(--md-filled-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__state-layer{background:var(--md-filled-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:hover .md3-field__state-layer{opacity:var(--md-filled-field-hover-state-layer-opacity, 0.08)}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__state-layer{opacity:var(--md-filled-field-error-hover-state-layer-opacity, 0.08)}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}

package/field/lib/filled-styles.scss

@@ -0,0 +1,16 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use './filled-field-theme';
+@use './filled-field';
+
+@include filled-field.static-styles;
+
+.md3-field--filled {
+  @include filled-field-theme.theme-styles(filled-field-theme.$light-theme);
+}

package/field/lib/outlined-field.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+import { Field } from './field.js';
+/** @soyCompatible */
+export declare class OutlinedField extends Field {
+    /** @soyTemplate */
+    protected getRenderClasses(): ClassInfo;
+    /** @soyTemplate */
+    protected renderContainerContents(): TemplateResult;
+    /** @soyTemplate */
+    protected renderOutline(): TemplateResult;
+    /** @soyTemplate */
+    protected renderMiddleContents(): TemplateResult;
+}

package/field/lib/outlined-field.js

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { html } from 'lit';
+import { Field } from './field.js';
+/** @soyCompatible */
+export class OutlinedField extends Field {
+    /** @soyTemplate */
+    getRenderClasses() {
+        return {
+            ...super.getRenderClasses(),
+            'md3-field--outlined': true,
+        };
+    }
+    /** @soyTemplate */
+    renderContainerContents() {
+        return html `
+      ${this.renderOutline()}
+      ${super.renderContainerContents()}
+    `;
+    }
+    /** @soyTemplate */
+    renderOutline() {
+        return html `
+      <span class="md3-field__outline">
+        <span class="md3-field__outline-start"></span>
+        <span class="md3-field__outline-notch">
+          <span class="md3-field__outline-panel-inactive"></span>
+          <span class="md3-field__outline-panel-active"></span>
+          ${this.renderFloatingLabel()}
+        </span>
+        <span class="md3-field__outline-end"></span>
+      </span>
+    `;
+    }
+    /** @soyTemplate */
+    renderMiddleContents() {
+        return html `
+      ${this.renderRestingLabel()}
+      ${super.renderMiddleContents()}
+    `;
+    }
+}
+//# sourceMappingURL=outlined-field.js.map

package/field/lib/outlined-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-field.js","sourceRoot":"","sources":["outlined-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAC;AAEjC,qBAAqB;AACrB,MAAM,OAAO,aAAc,SAAQ,KAAK;IACtC,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,qBAAqB,EAAE,IAAI;SAC5B,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,uBAAuB;QACxC,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,aAAa,EAAE;QACpB,KAAK,CAAC,uBAAuB,EAAE;KAClC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACT,aAAa;QACrB,OAAO,IAAI,CAAA;;;;;;YAMH,IAAI,CAAC,mBAAmB,EAAE;;;;KAIjC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,oBAAoB;QACrC,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,kBAAkB,EAAE;QACzB,KAAK,CAAC,oBAAoB,EAAE;KAC/B,CAAC;IACJ,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, TemplateResult} from 'lit';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {Field} from './field.js';\n\n/** @soyCompatible */\nexport class OutlinedField extends Field {\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-field--outlined': true,\n    };\n  }\n\n  /** @soyTemplate */\n  protected override renderContainerContents(): TemplateResult {\n    return html`\n      ${this.renderOutline()}\n      ${super.renderContainerContents()}\n    `;\n  }\n\n  /** @soyTemplate */\n  protected renderOutline(): TemplateResult {\n    return html`\n      <span class=\"md3-field__outline\">\n        <span class=\"md3-field__outline-start\"></span>\n        <span class=\"md3-field__outline-notch\">\n          <span class=\"md3-field__outline-panel-inactive\"></span>\n          <span class=\"md3-field__outline-panel-active\"></span>\n          ${this.renderFloatingLabel()}\n        </span>\n        <span class=\"md3-field__outline-end\"></span>\n      </span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected override renderMiddleContents(): TemplateResult {\n    return html`\n      ${this.renderRestingLabel()}\n      ${super.renderMiddleContents()}\n    `;\n  }\n}\n"]}

package/field/lib/outlined-styles.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/field/lib/outlined-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `.md3-field__outline{display:flex;pointer-events:none;height:100%;position:absolute;width:100%}.md3-field__outline-start::before,.md3-field__outline-start::after,.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after,.md3-field__outline-end::before,.md3-field__outline-end::after{border:inherit;content:"";inset:0;position:absolute}.md3-field__outline-start,.md3-field__outline-end{border:inherit;border-radius:inherit;box-sizing:border-box;position:relative}.md3-field__outline-start::before,.md3-field__outline-start::after,.md3-field__outline-end::before,.md3-field__outline-end::after{border-bottom-style:solid;border-top-style:solid}.md3-field__outline-start::after,.md3-field__outline-end::after{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--focused .md3-field__outline-start::after,.md3-field--focused .md3-field__outline-end::after{opacity:1}.md3-field__outline-start::before,.md3-field__outline-start::after{border-inline-start-style:solid;border-inline-end-style:none;border-start-start-radius:inherit;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:0}.md3-field__outline-end{flex-grow:1}.md3-field__outline-end::before,.md3-field__outline-end::after{border-inline-start-style:none;border-inline-end-style:solid;border-start-start-radius:0;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:inherit}.md3-field__outline-notch{align-items:flex-start;border:inherit;display:flex;position:relative}.md3-field--no-label .md3-field__outline-notch{display:none}.md3-field__outline-panel-inactive,.md3-field__outline-panel-active{border:inherit;border-bottom-style:solid;inset:0;position:absolute}.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after{border-top-style:solid;border-bottom:none;bottom:auto;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-active::before{right:50%;transform-origin:top left}.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::after{left:50%;transform-origin:top right}.md3-field--populated .md3-field__outline-panel-inactive::before,.md3-field--populated .md3-field__outline-panel-inactive::after,.md3-field--focused .md3-field__outline-panel-inactive::before,.md3-field--focused .md3-field__outline-panel-inactive::after,.md3-field--populated .md3-field__outline-panel-active::before,.md3-field--populated .md3-field__outline-panel-active::after,.md3-field--focused .md3-field__outline-panel-active::before,.md3-field--focused .md3-field__outline-panel-active::after{transform:scaleX(0)}.md3-field__outline-panel-active{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--focused .md3-field__outline-panel-active{opacity:1}.md3-field--outlined .md3-field__container{flex-basis:var(--md-outlined-field-container-height, 56px)}.md3-field--outlined .md3-field__content{color:var(--md-outlined-field-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:hover .md3-field__content{color:var(--md-outlined-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--focused .md3-field__content{color:var(--md-outlined-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--disabled .md3-field__content{color:var(--md-outlined-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error .md3-field__content{color:var(--md-outlined-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error:hover .md3-field__content{color:var(--md-outlined-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__content{color:var(--md-outlined-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--disabled.md3-field--no-label .md3-field__content,.md3-field--outlined.md3-field--disabled.md3-field--focused .md3-field__content,.md3-field--outlined.md3-field--disabled.md3-field--populated .md3-field__content{opacity:var(--md-outlined-field-disabled-content-opacity, 0.38)}.md3-field--outlined .md3-field__label{color:var(--md-outlined-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--outlined:hover .md3-field__label{color:var(--md-outlined-field-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--focused .md3-field__label{color:var(--md-outlined-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4))}.md3-field--outlined.md3-field--disabled .md3-field__label{color:var(--md-outlined-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error .md3-field__label{color:var(--md-outlined-field-error-label-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error:hover .md3-field__label{color:var(--md-outlined-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__label{color:var(--md-outlined-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined .md3-field__label{font-family:var(--md-outlined-field-label-text-font, Roboto);font-weight:var(--md-outlined-field-label-text-weight, 400);letter-spacing:var(--md-outlined-field-label-text-tracking, 0.03125rem)}.md3-field--outlined .md3-field__label--resting{font-size:var(--md-outlined-field-label-text-size, 1rem);line-height:var(--md-outlined-field-label-text-line-height, 1.5rem)}.md3-field--outlined .md3-field__label--floating{font-size:var(--md-outlined-field-label-text-populated-size, 0.75rem);line-height:var(--md-outlined-field-label-text-populated-line-height, 1rem)}.md3-field--outlined.md3-field--disabled .md3-field__label:not(.md3-field__label--hidden){opacity:var(--md-outlined-field-disabled-label-text-opacity, 0.38)}.md3-field--outlined .md3-field__supporting-text{color:var(--md-outlined-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--outlined:hover .md3-field__supporting-text{color:var(--md-outlined-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--outlined.md3-field--focus .md3-field__supporting-text{color:var(--md-outlined-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--outlined.md3-field--disabled .md3-field__supporting-text{color:var(--md-outlined-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error .md3-field__supporting-text{color:var(--md-outlined-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error:hover .md3-field__supporting-text{color:var(--md-outlined-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error.md3-field--focus .md3-field__supporting-text{color:var(--md-outlined-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined .md3-field__supporting-text{font-family:var(--md-outlined-field-supporting-text-font, Roboto);font-size:var(--md-outlined-field-supporting-text-size, 0.75rem);font-weight:var(--md-outlined-field-supporting-text-weight, 400);letter-spacing:var(--md-outlined-field-supporting-text-tracking, 0.025rem);line-height:var(--md-outlined-field-supporting-text-line-height, 1rem)}.md3-field--outlined.md3-field--disabled .md3-field__supporting-text{opacity:var(--md-outlined-field-disabled-supporting-text-opacity, 0.38)}.md3-field--outlined .md3-field__supporting-text{padding:0 var(--md-outlined-field-supporting-text-padding, 16px)}.md3-field--outlined .md3-field__supporting-text-start ::slotted(:not(:empty)),.md3-field--outlined .md3-field__supporting-text-end ::slotted(:not(:empty)){padding-top:var(--md-outlined-field-supporting-text-padding-top, 4px)}.md3-field--outlined .md3-field__supporting-text-end ::slotted(:not(:empty)){padding-inline-start:var(--md-outlined-field-supporting-text-padding, 16px)}.md3-field--outlined .md3-field__label--floating{transform:translateY(calc(-100% + var(--md-outlined-field-label-text-padding-bottom, 8px)))}.md3-field--outlined .md3-field__outline-start,.md3-field--outlined:not(.md3-field--with-start) .md3-field__start{padding-inline-start:max(var(--md-outlined-field-container-padding-horizontal, 16px),max(var(--md-outlined-field-container-shape-start-start, 4px),var(--md-outlined-field-container-shape-end-start, 4px)) + var(--md-outlined-field-outline-label-padding, 4px))}.md3-field--outlined:not(.md3-field--with-end) .md3-field__end{padding-inline-end:max(var(--md-outlined-field-container-padding-horizontal, 16px),max(var(--md-outlined-field-container-shape-start-end, 4px),var(--md-outlined-field-container-shape-end-end, 4px)))}.md3-field--outlined .md3-field__outline{border-start-start-radius:var(--md-outlined-field-container-shape-start-start, 4px);border-start-end-radius:var(--md-outlined-field-container-shape-start-end, 4px);border-end-end-radius:var(--md-outlined-field-container-shape-end-end, 4px);border-end-start-radius:var(--md-outlined-field-container-shape-end-start, 4px)}.md3-field--outlined .md3-field__outline{border-color:var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e));color:var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e))}.md3-field--outlined:hover .md3-field__outline{border-color:var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f));color:var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--focused .md3-field__outline{border-color:var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));color:var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4))}.md3-field--outlined.md3-field--disabled .md3-field__outline{border-color:var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));color:var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error .md3-field__outline{border-color:var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e));color:var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error:hover .md3-field__outline{border-color:var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));color:var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__outline{border-color:var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));color:var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined .md3-field__outline-start::before,.md3-field--outlined .md3-field__outline-start::after{margin-inline-end:var(--md-outlined-field-outline-label-padding, 4px)}.md3-field--outlined .md3-field__outline-notch{padding:0 var(--md-outlined-field-outline-label-padding, 4px);margin-inline-start:calc(-1 * var(--md-outlined-field-outline-label-padding, 4px));margin-inline-end:var(--md-outlined-field-outline-label-padding, 4px)}.md3-field--outlined .md3-field__outline-end{margin-inline-start:calc(-1 * var(--md-outlined-field-outline-label-padding, 4px))}.md3-field--outlined.md3-field--disabled .md3-field__outline-start,.md3-field--outlined.md3-field--disabled .md3-field__outline-end,.md3-field--outlined.md3-field--disabled .md3-field__outline-panel-inactive{opacity:var(--md-outlined-field-disabled-outline-opacity, 0.12)}.md3-field--outlined .md3-field__outline-notch{max-width:calc(100% - 2 * var(--md-outlined-field-container-padding-horizontal, 16px))}.md3-field--outlined .md3-field__outline-start::before,.md3-field--outlined .md3-field__outline-end::before,.md3-field--outlined .md3-field__outline-panel-inactive,.md3-field--outlined .md3-field__outline-panel-inactive::before,.md3-field--outlined .md3-field__outline-panel-inactive::after{border-width:var(--md-outlined-field-outline-width, 1px)}.md3-field--outlined:hover .md3-field__outline-start::before,.md3-field--outlined:hover .md3-field__outline-end::before,.md3-field--outlined:hover .md3-field__outline-panel-inactive,.md3-field--outlined:hover .md3-field__outline-panel-inactive::before,.md3-field--outlined:hover .md3-field__outline-panel-inactive::after{border-width:var(--md-outlined-field-hover-outline-width, 1px)}.md3-field--outlined .md3-field__outline-start::after,.md3-field--outlined .md3-field__outline-end::after,.md3-field--outlined .md3-field__outline-panel-active,.md3-field--outlined .md3-field__outline-panel-active::before,.md3-field--outlined .md3-field__outline-panel-active::after{border-width:var(--md-outlined-field-focus-outline-width, 2px)}.md3-field--outlined.md3-field--disabled .md3-field__outline-start::before,.md3-field--outlined.md3-field--disabled .md3-field__outline-end::before,.md3-field--outlined.md3-field--disabled .md3-field__outline-panel-inactive,.md3-field--outlined.md3-field--disabled .md3-field__outline-panel-inactive::before,.md3-field--outlined.md3-field--disabled .md3-field__outline-panel-inactive::after{border-width:var(--md-outlined-field-disabled-outline-width, 1px)}/*# sourceMappingURL=outlined-styles.css.map */
+`;
+//# sourceMappingURL=outlined-styles.css.js.map

package/field/lib/outlined-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`.md3-field__outline{display:flex;pointer-events:none;height:100%;position:absolute;width:100%}.md3-field__outline-start::before,.md3-field__outline-start::after,.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after,.md3-field__outline-end::before,.md3-field__outline-end::after{border:inherit;content:\"\";inset:0;position:absolute}.md3-field__outline-start,.md3-field__outline-end{border:inherit;border-radius:inherit;box-sizing:border-box;position:relative}.md3-field__outline-start::before,.md3-field__outline-start::after,.md3-field__outline-end::before,.md3-field__outline-end::after{border-bottom-style:solid;border-top-style:solid}.md3-field__outline-start::after,.md3-field__outline-end::after{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--focused .md3-field__outline-start::after,.md3-field--focused .md3-field__outline-end::after{opacity:1}.md3-field__outline-start::before,.md3-field__outline-start::after{border-inline-start-style:solid;border-inline-end-style:none;border-start-start-radius:inherit;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:0}.md3-field__outline-end{flex-grow:1}.md3-field__outline-end::before,.md3-field__outline-end::after{border-inline-start-style:none;border-inline-end-style:solid;border-start-start-radius:0;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:inherit}.md3-field__outline-notch{align-items:flex-start;border:inherit;display:flex;position:relative}.md3-field--no-label .md3-field__outline-notch{display:none}.md3-field__outline-panel-inactive,.md3-field__outline-panel-active{border:inherit;border-bottom-style:solid;inset:0;position:absolute}.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after{border-top-style:solid;border-bottom:none;bottom:auto;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-active::before{right:50%;transform-origin:top left}.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::after{left:50%;transform-origin:top right}.md3-field--populated .md3-field__outline-panel-inactive::before,.md3-field--populated .md3-field__outline-panel-inactive::after,.md3-field--focused .md3-field__outline-panel-inactive::before,.md3-field--focused .md3-field__outline-panel-inactive::after,.md3-field--populated .md3-field__outline-panel-active::before,.md3-field--populated .md3-field__outline-panel-active::after,.md3-field--focused .md3-field__outline-panel-active::before,.md3-field--focused .md3-field__outline-panel-active::after{transform:scaleX(0)}.md3-field__outline-panel-active{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--focused .md3-field__outline-panel-active{opacity:1}.md3-field--outlined .md3-field__container{flex-basis:var(--md-outlined-field-container-height, 56px)}.md3-field--outlined .md3-field__content{color:var(--md-outlined-field-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:hover .md3-field__content{color:var(--md-outlined-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--focused .md3-field__content{color:var(--md-outlined-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--disabled .md3-field__content{color:var(--md-outlined-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error .md3-field__content{color:var(--md-outlined-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error:hover .md3-field__content{color:var(--md-outlined-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__content{color:var(--md-outlined-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--disabled.md3-field--no-label .md3-field__content,.md3-field--outlined.md3-field--disabled.md3-field--focused .md3-field__content,.md3-field--outlined.md3-field--disabled.md3-field--populated .md3-field__content{opacity:var(--md-outlined-field-disabled-content-opacity, 0.38)}.md3-field--outlined .md3-field__label{color:var(--md-outlined-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--outlined:hover .md3-field__label{color:var(--md-outlined-field-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--focused .md3-field__label{color:var(--md-outlined-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4))}.md3-field--outlined.md3-field--disabled .md3-field__label{color:var(--md-outlined-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error .md3-field__label{color:var(--md-outlined-field-error-label-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error:hover .md3-field__label{color:var(--md-outlined-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__label{color:var(--md-outlined-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined .md3-field__label{font-family:var(--md-outlined-field-label-text-font, Roboto);font-weight:var(--md-outlined-field-label-text-weight, 400);letter-spacing:var(--md-outlined-field-label-text-tracking, 0.03125rem)}.md3-field--outlined .md3-field__label--resting{font-size:var(--md-outlined-field-label-text-size, 1rem);line-height:var(--md-outlined-field-label-text-line-height, 1.5rem)}.md3-field--outlined .md3-field__label--floating{font-size:var(--md-outlined-field-label-text-populated-size, 0.75rem);line-height:var(--md-outlined-field-label-text-populated-line-height, 1rem)}.md3-field--outlined.md3-field--disabled .md3-field__label:not(.md3-field__label--hidden){opacity:var(--md-outlined-field-disabled-label-text-opacity, 0.38)}.md3-field--outlined .md3-field__supporting-text{color:var(--md-outlined-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--outlined:hover .md3-field__supporting-text{color:var(--md-outlined-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--outlined.md3-field--focus .md3-field__supporting-text{color:var(--md-outlined-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--outlined.md3-field--disabled .md3-field__supporting-text{color:var(--md-outlined-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error .md3-field__supporting-text{color:var(--md-outlined-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error:hover .md3-field__supporting-text{color:var(--md-outlined-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error.md3-field--focus .md3-field__supporting-text{color:var(--md-outlined-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined .md3-field__supporting-text{font-family:var(--md-outlined-field-supporting-text-font, Roboto);font-size:var(--md-outlined-field-supporting-text-size, 0.75rem);font-weight:var(--md-outlined-field-supporting-text-weight, 400);letter-spacing:var(--md-outlined-field-supporting-text-tracking, 0.025rem);line-height:var(--md-outlined-field-supporting-text-line-height, 1rem)}.md3-field--outlined.md3-field--disabled .md3-field__supporting-text{opacity:var(--md-outlined-field-disabled-supporting-text-opacity, 0.38)}.md3-field--outlined .md3-field__supporting-text{padding:0 var(--md-outlined-field-supporting-text-padding, 16px)}.md3-field--outlined .md3-field__supporting-text-start ::slotted(:not(:empty)),.md3-field--outlined .md3-field__supporting-text-end ::slotted(:not(:empty)){padding-top:var(--md-outlined-field-supporting-text-padding-top, 4px)}.md3-field--outlined .md3-field__supporting-text-end ::slotted(:not(:empty)){padding-inline-start:var(--md-outlined-field-supporting-text-padding, 16px)}.md3-field--outlined .md3-field__label--floating{transform:translateY(calc(-100% + var(--md-outlined-field-label-text-padding-bottom, 8px)))}.md3-field--outlined .md3-field__outline-start,.md3-field--outlined:not(.md3-field--with-start) .md3-field__start{padding-inline-start:max(var(--md-outlined-field-container-padding-horizontal, 16px),max(var(--md-outlined-field-container-shape-start-start, 4px),var(--md-outlined-field-container-shape-end-start, 4px)) + var(--md-outlined-field-outline-label-padding, 4px))}.md3-field--outlined:not(.md3-field--with-end) .md3-field__end{padding-inline-end:max(var(--md-outlined-field-container-padding-horizontal, 16px),max(var(--md-outlined-field-container-shape-start-end, 4px),var(--md-outlined-field-container-shape-end-end, 4px)))}.md3-field--outlined .md3-field__outline{border-start-start-radius:var(--md-outlined-field-container-shape-start-start, 4px);border-start-end-radius:var(--md-outlined-field-container-shape-start-end, 4px);border-end-end-radius:var(--md-outlined-field-container-shape-end-end, 4px);border-end-start-radius:var(--md-outlined-field-container-shape-end-start, 4px)}.md3-field--outlined .md3-field__outline{border-color:var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e));color:var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e))}.md3-field--outlined:hover .md3-field__outline{border-color:var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f));color:var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--focused .md3-field__outline{border-color:var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));color:var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4))}.md3-field--outlined.md3-field--disabled .md3-field__outline{border-color:var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));color:var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error .md3-field__outline{border-color:var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e));color:var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error:hover .md3-field__outline{border-color:var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));color:var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__outline{border-color:var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));color:var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined .md3-field__outline-start::before,.md3-field--outlined .md3-field__outline-start::after{margin-inline-end:var(--md-outlined-field-outline-label-padding, 4px)}.md3-field--outlined .md3-field__outline-notch{padding:0 var(--md-outlined-field-outline-label-padding, 4px);margin-inline-start:calc(-1 * var(--md-outlined-field-outline-label-padding, 4px));margin-inline-end:var(--md-outlined-field-outline-label-padding, 4px)}.md3-field--outlined .md3-field__outline-end{margin-inline-start:calc(-1 * var(--md-outlined-field-outline-label-padding, 4px))}.md3-field--outlined.md3-field--disabled .md3-field__outline-start,.md3-field--outlined.md3-field--disabled .md3-field__outline-end,.md3-field--outlined.md3-field--disabled .md3-field__outline-panel-inactive{opacity:var(--md-outlined-field-disabled-outline-opacity, 0.12)}.md3-field--outlined .md3-field__outline-notch{max-width:calc(100% - 2 * var(--md-outlined-field-container-padding-horizontal, 16px))}.md3-field--outlined .md3-field__outline-start::before,.md3-field--outlined .md3-field__outline-end::before,.md3-field--outlined .md3-field__outline-panel-inactive,.md3-field--outlined .md3-field__outline-panel-inactive::before,.md3-field--outlined .md3-field__outline-panel-inactive::after{border-width:var(--md-outlined-field-outline-width, 1px)}.md3-field--outlined:hover .md3-field__outline-start::before,.md3-field--outlined:hover .md3-field__outline-end::before,.md3-field--outlined:hover .md3-field__outline-panel-inactive,.md3-field--outlined:hover .md3-field__outline-panel-inactive::before,.md3-field--outlined:hover .md3-field__outline-panel-inactive::after{border-width:var(--md-outlined-field-hover-outline-width, 1px)}.md3-field--outlined .md3-field__outline-start::after,.md3-field--outlined .md3-field__outline-end::after,.md3-field--outlined .md3-field__outline-panel-active,.md3-field--outlined .md3-field__outline-panel-active::before,.md3-field--outlined .md3-field__outline-panel-active::after{border-width:var(--md-outlined-field-focus-outline-width, 2px)}.md3-field--outlined.md3-field--disabled .md3-field__outline-start::before,.md3-field--outlined.md3-field--disabled .md3-field__outline-end::before,.md3-field--outlined.md3-field--disabled .md3-field__outline-panel-inactive,.md3-field--outlined.md3-field--disabled .md3-field__outline-panel-inactive::before,.md3-field--outlined.md3-field--disabled .md3-field__outline-panel-inactive::after{border-width:var(--md-outlined-field-disabled-outline-width, 1px)}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}