@material/web 0.1.0-alpha.0

package/fab/lib/fab-shared.js

@@ -0,0 +1,138 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import '@material/web/focus/focus-ring.js';
+import '@material/web/ripple/ripple.js';
+import { ActionElement } from '@material/web/actionelement/action-element.js';
+import { pointerPress, shouldShowStrongFocus } from '@material/web/focus/strong-focus.js';
+import { MdRipple } from '@material/web/ripple/ripple.js';
+import { html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ * @soyCompatible
+ */
+export class FabShared extends ActionElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.icon = '';
+        this.label = '';
+        this.lowered = false;
+        this.reducedTouchTarget = false;
+        this.showFocusRing = false;
+    }
+    /**
+     * @soyTemplate
+     * @soyClasses fabClasses: .md3-fab
+     */
+    render() {
+        const ariaLabel = this.label ? this.label : this.icon;
+        return html `
+      <button
+        class="md3-fab md3-surface ${classMap(this.getRenderClasses())}"
+        ?disabled="${this.disabled}"
+        aria-label="${ariaLabel}"
+        @focus="${this.handleFocus}"
+        @blur="${this.handleBlur}"
+        @pointerdown="${this.handlePointerDown}"
+        @pointerup="${this.handlePointerUp}"
+        @pointercancel="${this.handlePointerCancel}"
+        @pointerleave="${this.handlePointerLeave}"
+        @pointerenter="${this.handlePointerEnter}"
+        @click="${this.handleClick}"
+        @contextmenu="${this.handleContextMenu}">
+        ${this.renderElevationOverlay()}
+        ${this.renderFocusRing()}
+        ${this.renderRipple()}
+        <span class="md3-fab__icon">
+          <slot name="icon">${this.renderIcon(this.icon)}</slot>
+        </span>
+        ${this.renderLabel()}
+        ${this.renderTouchTarget()}
+      </button>`;
+    }
+    /** @soyTemplate */
+    getRenderClasses() {
+        return { 'md3-fab--lowered': this.lowered };
+    }
+    /** @soyTemplate */
+    renderTouchTarget() {
+        return this.reducedTouchTarget ? html `` :
+            html `<div class="md3-fab__touch"></div>`;
+    }
+    /** @soyTemplate */
+    renderLabel() {
+        return '';
+    }
+    /** @soyTemplate */
+    renderElevationOverlay() {
+        return html `<div class="md3-elevation-overlay"></div>`;
+    }
+    /** @soyTemplate */
+    renderRipple() {
+        return html `<md-ripple class="md3-fab__ripple" ?disabled="${this.disabled}"></md-ripple>`;
+    }
+    /** @soyTemplate */
+    renderFocusRing() {
+        return html `<md-focus-ring .visible="${this.showFocusRing}"></md-focus-ring>`;
+    }
+    beginPress({ positionEvent }) {
+        this.ripple.beginPress(positionEvent);
+    }
+    endPress(options) {
+        this.ripple.endPress();
+        super.endPress(options);
+    }
+    handlePointerDown(e) {
+        super.handlePointerDown(e);
+        pointerPress();
+        this.showFocusRing = shouldShowStrongFocus();
+    }
+    handlePointerEnter(e) {
+        this.ripple.beginHover(e);
+    }
+    handlePointerLeave(e) {
+        super.handlePointerLeave(e);
+        this.ripple.endHover();
+    }
+    handleFocus() {
+        this.showFocusRing = shouldShowStrongFocus();
+    }
+    handleBlur() {
+        this.showFocusRing = false;
+    }
+}
+FabShared.shadowRootOptions = { mode: 'open', delegatesFocus: true };
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FabShared.prototype, "disabled", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FabShared.prototype, "icon", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FabShared.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FabShared.prototype, "lowered", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FabShared.prototype, "reducedTouchTarget", void 0);
+__decorate([
+    query('md-ripple'),
+    __metadata("design:type", MdRipple)
+], FabShared.prototype, "ripple", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FabShared.prototype, "showFocusRing", void 0);
+//# sourceMappingURL=fab-shared.js.map

package/fab/lib/fab-shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab-shared.js","sourceRoot":"","sources":["fab-shared.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/focus/focus-ring.js';\nimport '@material/web/ripple/ripple.js';\n\nimport {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element.js';\nimport {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus.js';\nimport {MdRipple} from '@material/web/ripple/ripple.js';\nimport {html, TemplateResult} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\n/**\n * @soyCompatible\n */\nexport abstract class FabShared extends ActionElement {\n  static override shadowRootOptions:\n      ShadowRootInit = {mode: 'open', delegatesFocus: true};\n\n  @property({type: Boolean}) disabled = false;\n\n  @property() icon = '';\n\n  @property() label = '';\n\n  @property({type: Boolean}) lowered = false;\n\n  @property({type: Boolean}) reducedTouchTarget = false;\n\n  @query('md-ripple') ripple!: MdRipple;\n\n  @state() protected showFocusRing = false;\n\n  /**\n   * @soyTemplate\n   * @soyClasses fabClasses: .md3-fab\n   */\n  protected override render(): TemplateResult {\n    const ariaLabel = this.label ? this.label : this.icon;\n\n    return html`\n      <button\n        class=\"md3-fab md3-surface ${classMap(this.getRenderClasses())}\"\n        ?disabled=\"${this.disabled}\"\n        aria-label=\"${ariaLabel}\"\n        @focus=\"${this.handleFocus}\"\n        @blur=\"${this.handleBlur}\"\n        @pointerdown=\"${this.handlePointerDown}\"\n        @pointerup=\"${this.handlePointerUp}\"\n        @pointercancel=\"${this.handlePointerCancel}\"\n        @pointerleave=\"${this.handlePointerLeave}\"\n        @pointerenter=\"${this.handlePointerEnter}\"\n        @click=\"${this.handleClick}\"\n        @contextmenu=\"${this.handleContextMenu}\">\n        ${this.renderElevationOverlay()}\n        ${this.renderFocusRing()}\n        ${this.renderRipple()}\n        <span class=\"md3-fab__icon\">\n          <slot name=\"icon\">${this.renderIcon(this.icon)}</slot>\n        </span>\n        ${this.renderLabel()}\n        ${this.renderTouchTarget()}\n      </button>`;\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {'md3-fab--lowered': this.lowered};\n  }\n\n  /** @soyTemplate */\n  protected abstract renderIcon(icon: string): TemplateResult|string;\n\n  /** @soyTemplate */\n  protected renderTouchTarget(): TemplateResult {\n    return this.reducedTouchTarget ? html`` :\n                                     html`<div class=\"md3-fab__touch\"></div>`;\n  }\n\n  /** @soyTemplate */\n  protected renderLabel(): TemplateResult|string {\n    return '';\n  }\n\n  /** @soyTemplate */\n  protected renderElevationOverlay(): TemplateResult {\n    return html`<div class=\"md3-elevation-overlay\"></div>`;\n  }\n\n  /** @soyTemplate */\n  protected renderRipple(): TemplateResult {\n    return html`<md-ripple class=\"md3-fab__ripple\" ?disabled=\"${\n        this.disabled}\"></md-ripple>`;\n  }\n\n  /** @soyTemplate */\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  override beginPress({positionEvent}: BeginPressConfig) {\n    this.ripple.beginPress(positionEvent);\n  }\n\n  override endPress(options: EndPressConfig) {\n    this.ripple.endPress();\n    super.endPress(options);\n  }\n\n  override handlePointerDown(e: PointerEvent) {\n    super.handlePointerDown(e);\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handlePointerEnter(e: PointerEvent) {\n    this.ripple.beginHover(e);\n  }\n\n  override handlePointerLeave(e: PointerEvent) {\n    super.handlePointerLeave(e);\n    this.ripple.endHover();\n  }\n\n  protected handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.showFocusRing = false;\n  }\n}\n"]}

package/fab/lib/fab-styles.css.d.ts

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

package/fab/lib/fab-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-fab--regular{padding:0}.md3-fab{--md-ripple-hover-state-layer-color:var(--md-fab-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-fab-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-state-layer-color:var(--md-fab-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-state-layer-opacity:var(--md-fab-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-fab-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-fab-pressed-state-layer-opacity, 0.12);width:var(--md-fab-container-width, 56px);height:var(--md-fab-container-height, 56px)}.md3-fab:enabled{--md-elevation-box-shadow-for-gss:0px 1px 3px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 4px 8px 3px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-fab-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-fab:enabled .md3-elevation-overlay{opacity:var(--md-fab-container-elevation-overlay-opacity, 0.11)}.md3-fab:hover{--md-elevation-box-shadow-for-gss:0px 2px 3px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 6px 10px 4px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-fab-hover-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-fab:hover .md3-elevation-overlay{opacity:var(--md-fab-hover-container-elevation-overlay-opacity, 0.12)}.md3-fab:focus{--md-elevation-box-shadow-for-gss:0px 1px 3px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 4px 8px 3px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-fab-focus-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-fab:focus .md3-elevation-overlay{opacity:var(--md-fab-focus-container-elevation-overlay-opacity, 0.11)}.md3-fab:active{--md-elevation-box-shadow-for-gss:0px 1px 3px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 4px 8px 3px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-fab-pressed-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-fab:active .md3-elevation-overlay{opacity:var(--md-fab-pressed-container-elevation-overlay-opacity, 0.11)}.md3-fab.md3-fab--lowered:enabled{--md-elevation-box-shadow-for-gss:0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 1px 3px 1px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-fab-lowered-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-fab.md3-fab--lowered:enabled .md3-elevation-overlay{opacity:var(--md-fab-lowered-container-elevation-overlay-opacity, 0.05)}.md3-fab.md3-fab--lowered:hover{--md-elevation-box-shadow-for-gss:0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 2px 6px 2px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-fab-lowered-hover-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-fab.md3-fab--lowered:hover .md3-elevation-overlay{opacity:var(--md-fab-lowered-hover-container-elevation-overlay-opacity, 0.08)}.md3-fab.md3-fab--lowered:focus{--md-elevation-box-shadow-for-gss:0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 1px 3px 1px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-fab-lowered-focus-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-fab.md3-fab--lowered:focus .md3-elevation-overlay{opacity:var(--md-fab-lowered-focus-container-elevation-overlay-opacity, 0.05)}.md3-fab.md3-fab--lowered:active{--md-elevation-box-shadow-for-gss:0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 1px 3px 1px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-fab-lowered-pressed-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-fab.md3-fab--lowered:active .md3-elevation-overlay{opacity:var(--md-fab-lowered-pressed-container-elevation-overlay-opacity, 0.05)}.md3-fab .md3-elevation-overlay{background-color:var(--md-fab-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4))}.md3-fab:enabled{background-color:var(--md-fab-container-color, var(--md-sys-color-surface, #fffbfe))}.md3-fab,.md3-fab .md3-fab__ripple{border-radius:var(--md-fab-container-shape, 16px)}.md3-fab:enabled ::slotted(*),.md3-fab:enabled .md3-fab__icon{color:var(--md-fab-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-fab:hover ::slotted(*),.md3-fab:hover .md3-fab__icon{color:var(--md-fab-hover-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-fab:focus ::slotted(*),.md3-fab:focus .md3-fab__icon{color:var(--md-fab-focus-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-fab:active ::slotted(*),.md3-fab:active .md3-fab__icon{color:var(--md-fab-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-fab ::slotted(*),.md3-fab .md3-fab__icon,.md3-fab i,.md3-fab svg,.md3-fab img{font-size:var(--md-fab-icon-size, 24px);height:var(--md-fab-icon-size, 24px);width:var(--md-fab-icon-size, 24px)}/*# sourceMappingURL=fab-styles.css.map */
+`;
+//# sourceMappingURL=fab-styles.css.js.map

package/fab/lib/fab-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab-styles.css.js","sourceRoot":"","sources":["fab-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-fab--regular{padding:0}.md3-fab{--md-ripple-hover-state-layer-color:var(--md-fab-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-focus-state-layer-color:var(--md-fab-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-state-layer-color:var(--md-fab-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-state-layer-opacity:var(--md-fab-hover-state-layer-opacity, 0.08);--md-ripple-focus-state-layer-opacity:var(--md-fab-focus-state-layer-opacity, 0.12);--md-ripple-pressed-state-layer-opacity:var(--md-fab-pressed-state-layer-opacity, 0.12);width:var(--md-fab-container-width, 56px);height:var(--md-fab-container-height, 56px)}.md3-fab:enabled{--md-elevation-box-shadow-for-gss:0px 1px 3px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 4px 8px 3px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-fab-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-fab:enabled .md3-elevation-overlay{opacity:var(--md-fab-container-elevation-overlay-opacity, 0.11)}.md3-fab:hover{--md-elevation-box-shadow-for-gss:0px 2px 3px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 6px 10px 4px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-fab-hover-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-fab:hover .md3-elevation-overlay{opacity:var(--md-fab-hover-container-elevation-overlay-opacity, 0.12)}.md3-fab:focus{--md-elevation-box-shadow-for-gss:0px 1px 3px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 4px 8px 3px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-fab-focus-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-fab:focus .md3-elevation-overlay{opacity:var(--md-fab-focus-container-elevation-overlay-opacity, 0.11)}.md3-fab:active{--md-elevation-box-shadow-for-gss:0px 1px 3px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 4px 8px 3px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-fab-pressed-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-fab:active .md3-elevation-overlay{opacity:var(--md-fab-pressed-container-elevation-overlay-opacity, 0.11)}.md3-fab.md3-fab--lowered:enabled{--md-elevation-box-shadow-for-gss:0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 1px 3px 1px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-fab-lowered-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-fab.md3-fab--lowered:enabled .md3-elevation-overlay{opacity:var(--md-fab-lowered-container-elevation-overlay-opacity, 0.05)}.md3-fab.md3-fab--lowered:hover{--md-elevation-box-shadow-for-gss:0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 2px 6px 2px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-fab-lowered-hover-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-fab.md3-fab--lowered:hover .md3-elevation-overlay{opacity:var(--md-fab-lowered-hover-container-elevation-overlay-opacity, 0.08)}.md3-fab.md3-fab--lowered:focus{--md-elevation-box-shadow-for-gss:0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 1px 3px 1px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-fab-lowered-focus-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-fab.md3-fab--lowered:focus .md3-elevation-overlay{opacity:var(--md-fab-lowered-focus-container-elevation-overlay-opacity, 0.05)}.md3-fab.md3-fab--lowered:active{--md-elevation-box-shadow-for-gss:0px 1px 2px 0px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.3), 0px 1px 3px 1px rgb(var(--md-sys-color-shadow-rgb, 0, 0, 0), 0.15);box-shadow:var(--md-fab-lowered-pressed-container-elevation-shadow, var(--md-elevation-box-shadow-for-gss))}.md3-fab.md3-fab--lowered:active .md3-elevation-overlay{opacity:var(--md-fab-lowered-pressed-container-elevation-overlay-opacity, 0.05)}.md3-fab .md3-elevation-overlay{background-color:var(--md-fab-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4))}.md3-fab:enabled{background-color:var(--md-fab-container-color, var(--md-sys-color-surface, #fffbfe))}.md3-fab,.md3-fab .md3-fab__ripple{border-radius:var(--md-fab-container-shape, 16px)}.md3-fab:enabled ::slotted(*),.md3-fab:enabled .md3-fab__icon{color:var(--md-fab-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-fab:hover ::slotted(*),.md3-fab:hover .md3-fab__icon{color:var(--md-fab-hover-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-fab:focus ::slotted(*),.md3-fab:focus .md3-fab__icon{color:var(--md-fab-focus-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-fab:active ::slotted(*),.md3-fab:active .md3-fab__icon{color:var(--md-fab-pressed-icon-color, var(--md-sys-color-primary, #6750a4))}.md3-fab ::slotted(*),.md3-fab .md3-fab__icon,.md3-fab i,.md3-fab svg,.md3-fab img{font-size:var(--md-fab-icon-size, 24px);height:var(--md-fab-icon-size, 24px);width:var(--md-fab-icon-size, 24px)}/*# sourceMappingURL=fab-styles.css.map */\n`;\n "]}

package/fab/lib/fab-styles.scss

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

package/fab/lib/fab.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+import { FabShared } from './fab-shared.js';
+/**
+ * @soyCompatible
+ */
+export declare class Fab extends FabShared {
+    /** @soyTemplate */
+    protected getRenderClasses(): ClassInfo;
+    /** @soyTemplate */
+    protected renderIcon(icon: string): TemplateResult | string;
+}

package/fab/lib/fab.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { FabShared } from './fab-shared.js';
+/**
+ * @soyCompatible
+ */
+export class Fab extends FabShared {
+    /** @soyTemplate */
+    getRenderClasses() {
+        return {
+            ...super.getRenderClasses(),
+            'md3-fab--regular': true,
+        };
+    }
+    /** @soyTemplate */
+    renderIcon(icon) {
+        return '';
+    }
+}
+//# sourceMappingURL=fab.js.map

package/fab/lib/fab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab.js","sourceRoot":"","sources":["fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C;;GAEG;AACH,MAAM,OAAO,GAAI,SAAQ,SAAS;IAChC,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,kBAAkB,EAAE,IAAI;SACzB,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,UAAU,CAAC,IAAY;QACxC,OAAO,EAAE,CAAC;IACZ,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {TemplateResult} from 'lit';\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {FabShared} from './fab-shared.js';\n\n/**\n * @soyCompatible\n */\nexport class Fab extends FabShared {\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-fab--regular': true,\n    };\n  }\n\n  /** @soyTemplate */\n  protected override renderIcon(icon: string): TemplateResult|string {\n    return '';\n  }\n}\n"]}

package/field/_filled-field.scss

@@ -0,0 +1,8 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/filled-field-theme' show
+  theme,
+  values;

package/field/_outlined-field.scss

@@ -0,0 +1,8 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/outlined-field-theme' show
+  theme,
+  values;

package/field/filled-field.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { FilledField } from './lib/filled-field.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-filled-field': MdFilledField;
+    }
+}
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdFilledField extends FilledField {
+    static styles: import("lit").CSSResult[];
+}

package/field/filled-field.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { FilledField } from './lib/filled-field.js';
+import { styles as filledStyles } from './lib/filled-styles.css.js';
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdFilledField = class MdFilledField extends FilledField {
+};
+MdFilledField.styles = [sharedStyles, filledStyles];
+MdFilledField = __decorate([
+    customElement('md-filled-field')
+], MdFilledField);
+export { MdFilledField };
+//# sourceMappingURL=filled-field.js.map

package/field/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,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEH,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,WAAW;CAE7C,CAAA;AADiB,oBAAM,GAAG,CAAC,YAAY,EAAE,YAAY,CAAE,CAAA;AAD3C,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAEzB;SAFY,aAAa","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {FilledField} from './lib/filled-field.js';\nimport {styles as filledStyles} from './lib/filled-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-field': MdFilledField;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-field')\nexport class MdFilledField extends FilledField {\n  static override styles = [sharedStyles, filledStyles];\n}\n"]}

package/field/harness.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '@material/web/testing/harness.js';
+import { Field } from './lib/field.js';
+/**
+ * Test harness for field elements.
+ */
+export declare class FieldHarness extends Harness<Field> {
+    focusWithKeyboard(init?: KeyboardEventInit): Promise<void>;
+    focusWithPointer(): Promise<void>;
+    blur(): Promise<void>;
+    protected getInteractiveElement(): Promise<HTMLElement>;
+}

package/field/harness.js

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '@material/web/testing/harness.js';
+/**
+ * Test harness for field elements.
+ */
+export class FieldHarness extends Harness {
+    async focusWithKeyboard(init = {}) {
+        this.element.focused = true;
+        await super.focusWithKeyboard(init);
+    }
+    async focusWithPointer() {
+        this.element.focused = true;
+        await super.focusWithPointer();
+    }
+    async blur() {
+        this.element.focused = false;
+        await super.blur();
+    }
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return (this.element.querySelector(':not([slot])') ||
+            this.element.renderRoot.querySelector('.md3-field'));
+    }
+}
+//# sourceMappingURL=harness.js.map

package/field/harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAIzD;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,OAAc;IACrC,KAAK,CAAC,iBAAiB,CAAC,OAA0B,EAAE;QAC3D,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,MAAM,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC;IAEQ,KAAK,CAAC,gBAAgB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,MAAM,KAAK,CAAC,gBAAgB,EAAE,CAAC;IACjC,CAAC;IAEQ,KAAK,CAAC,IAAI;QACjB,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAEkB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC;YAC1C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,CAAgB,CAAC;IAC9E,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '@material/web/testing/harness.js';\n\nimport {Field} from './lib/field.js';\n\n/**\n * Test harness for field elements.\n */\nexport class FieldHarness extends Harness<Field> {\n  override async focusWithKeyboard(init: KeyboardEventInit = {}) {\n    this.element.focused = true;\n    await super.focusWithKeyboard(init);\n  }\n\n  override async focusWithPointer() {\n    this.element.focused = true;\n    await super.focusWithPointer();\n  }\n\n  override async blur() {\n    this.element.focused = false;\n    await super.blur();\n  }\n\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return (this.element.querySelector(':not([slot])') ||\n            this.element.renderRoot.querySelector('.md3-field')) as HTMLElement;\n  }\n}\n"]}

package/field/lib/_content-theme.scss

@@ -0,0 +1,80 @@
+//
+// 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 'sass:map';
+
+@mixin theme-styles($theme) {
+  @include _content-color(
+    (
+      default: map.get($theme, content-color),
+      hover: map.get($theme, hover-content-color),
+      focus: map.get($theme, focus-content-color),
+      disabled: map.get($theme, disabled-content-color),
+    )
+  );
+  @include _content-error-color(
+    (
+      default: map.get($theme, error-content-color),
+      hover: map.get($theme, error-hover-content-color),
+      focus: map.get($theme, error-focus-content-color),
+    )
+  );
+  @include _content-opacity(
+    (
+      disabled: map.get($theme, disabled-content-opacity),
+    )
+  );
+}
+
+@mixin _content-color($colors) {
+  @include _set-content-color(map.get($colors, default));
+
+  &:hover {
+    @include _set-content-color(map.get($colors, hover));
+  }
+
+  &.md3-field--focused {
+    @include _set-content-color(map.get($colors, focus));
+  }
+
+  &.md3-field--disabled {
+    @include _set-content-color(map.get($colors, disabled));
+  }
+}
+
+@mixin _content-error-color($colors) {
+  &:not(.md3-field--disabled).md3-field--error {
+    @include _content-color($colors);
+  }
+}
+
+@mixin _set-content-color($color) {
+  // Content elements provided to the field (such as <input>) may use
+  // `currentColor` to inherit this property.
+  .md3-field__content {
+    color: $color;
+  }
+}
+
+@mixin _content-opacity($opacities) {
+  @include _set-content-opacity(map.get($opacities, default));
+
+  &.md3-field--disabled {
+    @include _set-content-opacity(map.get($opacities, disabled));
+  }
+}
+
+@mixin _set-content-opacity($opacity) {
+  &.md3-field--no-label,
+  &.md3-field--focused,
+  &.md3-field--populated {
+    .md3-field__content {
+      opacity: $opacity;
+    }
+  }
+}

package/field/lib/_content.scss

@@ -0,0 +1,63 @@
+//
+// 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 'sass:math';
+@use '@material/web/motion/animation';
+
+// Duration of the label animation.
+$_label-duration: 150ms;
+// Duration of the content's visibility animation.
+$_visible-duration: math.round(math.div($_label-duration * 5, 9));
+// Short delay when entering (focusing/populating) so that the label may move
+// out of the way before the content starts to appear.
+$_enter-delay: $_label-duration - $_visible-duration;
+
+@mixin static-styles() {
+  .md3-field__start,
+  .md3-field__middle,
+  .md3-field__end {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    height: 100%;
+    // Relative position for absolutely positioned labels (to avoid interfering
+    // with baseline alignment).
+    position: relative;
+  }
+
+  .md3-field__start,
+  .md3-field__end {
+    justify-content: center;
+  }
+
+  .md3-field__middle {
+    // The container of the field aligns sections by "center". Only the middle
+    // section opts in to baseline alignment.
+    //
+    // Labels are absolutely positioned, which leaves only the content as the
+    // evaluated baseline for the field.
+    //
+    // See https://www.w3.org/TR/css-flexbox-1/#baseline-participation
+    align-self: baseline;
+    flex: 1;
+  }
+
+  .md3-field__content {
+    display: flex;
+    flex: 1;
+    opacity: 0;
+    transition: animation.standard(opacity, $_visible-duration);
+
+    .md3-field--no-label &,
+    .md3-field--focused &,
+    .md3-field--populated & {
+      opacity: 1;
+      transition-delay: $_enter-delay;
+    }
+  }
+}

package/field/lib/_field-theme.scss

@@ -0,0 +1,15 @@
+//
+// 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 'sass:map';
+
+@mixin theme-styles($theme) {
+  .md3-field__container {
+    flex-basis: map.get($theme, container-height);
+  }
+}

package/field/lib/_field.scss

@@ -0,0 +1,52 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@mixin static-styles() {
+  :host {
+    display: inline-flex;
+  }
+
+  .md3-field {
+    display: inline-flex;
+    flex: 1;
+    flex-direction: column;
+    // Allow the use of block/inline reflexive RTL properties without impacting
+    // structure when languages change.
+    writing-mode: horizontal-tb;
+  }
+
+  .md3-field__container {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1;
+    position: relative;
+  }
+
+  .md3-field--disabled {
+    pointer-events: none;
+  }
+
+  // TODO(b/239188049): remove when layout tokens are ready
+  .md3-field--with-start .md3-field__start,
+  .md3-field--with-end .md3-field__end {
+    min-width: 48px;
+  }
+
+  .md3-field--with-start {
+    .md3-field__start {
+      margin-inline-end: 4px;
+    }
+  }
+
+  .md3-field--with-end {
+    .md3-field__end {
+      margin-inline-start: 4px;
+    }
+  }
+}