@material/web 0.1.0-alpha.0

package/field/lib/outlined-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 './outlined-field-theme';
+@use './outlined-field';
+
+@include outlined-field.static-styles;
+
+.md3-field--outlined {
+  @include outlined-field-theme.theme-styles(outlined-field-theme.$light-theme);
+}

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

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

package/field/lib/shared-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 `:host{display:inline-flex}.md3-field{display:inline-flex;flex:1;flex-direction:column;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}.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}.md3-field__start,.md3-field__middle,.md3-field__end{display:flex;align-items:center;box-sizing:border-box;height:100%;position:relative}.md3-field__start,.md3-field__end{justify-content:center}.md3-field__middle{align-self:baseline;flex:1}.md3-field__content{display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--no-label .md3-field__content,.md3-field--focused .md3-field__content,.md3-field--populated .md3-field__content{opacity:1;transition-delay:67ms}.md3-field__label{overflow:hidden;max-width:100%;pointer-events:none;text-overflow:ellipsis;white-space:nowrap;z-index:1}.md3-field__label--resting{position:absolute;top:50%;transform:translateY(-50%);transform-origin:top left}.md3-field__label--floating{/*! Used in field.ts @queryAsync. go/css-conformance#unstyled-classes */}.md3-field__label--hidden{opacity:0}.md3-field--no-label .md3-field__label{display:none}.md3-field__supporting-text{display:flex;justify-content:space-between}.md3-field__supporting-text-start,.md3-field__supporting-text-end{display:flex}/*# sourceMappingURL=shared-styles.css.map */
+`;
+//# sourceMappingURL=shared-styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{display:inline-flex}.md3-field{display:inline-flex;flex:1;flex-direction:column;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}.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}.md3-field__start,.md3-field__middle,.md3-field__end{display:flex;align-items:center;box-sizing:border-box;height:100%;position:relative}.md3-field__start,.md3-field__end{justify-content:center}.md3-field__middle{align-self:baseline;flex:1}.md3-field__content{display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--no-label .md3-field__content,.md3-field--focused .md3-field__content,.md3-field--populated .md3-field__content{opacity:1;transition-delay:67ms}.md3-field__label{overflow:hidden;max-width:100%;pointer-events:none;text-overflow:ellipsis;white-space:nowrap;z-index:1}.md3-field__label--resting{position:absolute;top:50%;transform:translateY(-50%);transform-origin:top left}.md3-field__label--floating{/*! Used in field.ts @queryAsync. go/css-conformance#unstyled-classes */}.md3-field__label--hidden{opacity:0}.md3-field--no-label .md3-field__label{display:none}.md3-field__supporting-text{display:flex;justify-content:space-between}.md3-field__supporting-text-start,.md3-field__supporting-text-end{display:flex}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}

package/field/lib/shared-styles.scss

@@ -0,0 +1,14 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use './content';
+@use './field';
+@use './label';
+@use './supporting-text';
+
+@include field.static-styles;
+@include content.static-styles;
+@include label.static-styles;
+@include supporting-text.static-styles;

package/field/outlined-field.d.ts

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

package/field/outlined-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 { OutlinedField } from './lib/outlined-field.js';
+import { styles as outlinedStyles } from './lib/outlined-styles.css.js';
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdOutlinedField = class MdOutlinedField extends OutlinedField {
+};
+MdOutlinedField.styles = [sharedStyles, outlinedStyles];
+MdOutlinedField = __decorate([
+    customElement('md-outlined-field')
+], MdOutlinedField);
+export { MdOutlinedField };
+//# sourceMappingURL=outlined-field.js.map

package/field/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,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,aAAa,EAAC,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,aAAa;CAEjD,CAAA;AADiB,sBAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAE,CAAA;AAD7C,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAE3B;SAFY,eAAe","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 {OutlinedField} from './lib/outlined-field.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-field': MdOutlinedField;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-field')\nexport class MdOutlinedField extends OutlinedField {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}

package/focus/focus-ring.d.ts

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

package/focus/focus-ring.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { FocusRing } from './lib/focus-ring.js';
+import { styles } from './lib/focus-ring-styles.css.js';
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {visibility}
+ */
+let MdFocusRing = class MdFocusRing extends FocusRing {
+};
+MdFocusRing.styles = [styles];
+MdFocusRing = __decorate([
+    customElement('md-focus-ring')
+], MdFocusRing);
+export { MdFocusRing };
+//# sourceMappingURL=focus-ring.js.map

package/focus/focus-ring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AAQtD;;;;GAIG;AAEH,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,SAAS;CAEzC,CAAA;AADiB,kBAAM,GAAG,CAAC,MAAM,CAAE,CAAA;AADvB,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAEvB;SAFY,WAAW","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 {FocusRing} from './lib/focus-ring.js';\nimport {styles} from './lib/focus-ring-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-focus-ring': MdFocusRing;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-focus-ring')\nexport class MdFocusRing extends FocusRing {\n  static override styles = [styles];\n}\n"]}

package/focus/lib/_focus-ring-theme.scss

@@ -0,0 +1,89 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:map';
+@use '@material/web/sass/resolvers';
+@use '@material/web/sass/theme';
+@use '@material/web/tokens';
+
+$_custom-property-prefix: 'focus-ring';
+$_color-sys: tokens.md-sys-color-values-light-dynamic();
+
+$light-theme: (
+  ring-radius: 8px,
+  container-outer-padding-vertical: 2px,
+  container-outer-padding-horizontal: 2px,
+  inner-ring-width: 2px,
+  inner-ring-color: map.get($_color-sys, on-tertiary-container),
+  outer-ring-width: 2px,
+  outer-ring-color: map.get($_color-sys, tertiary-container),
+);
+
+@mixin theme($theme, $resolvers: resolvers.$material) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($theme);
+}
+
+@mixin theme-styles($theme, $resolvers: resolvers.$material) {
+  $theme: theme.validate-theme-styles($light-theme, $theme);
+  $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
+
+  $container-outer-padding-vertical: map.get(
+    $theme,
+    container-outer-padding-vertical
+  );
+  $container-outer-padding-horizontal: map.get(
+    $theme,
+    container-outer-padding-horizontal
+  );
+  $inner-width: map.get($theme, inner-ring-width);
+  $inner-color: map.get($theme, inner-ring-color);
+
+  $outer-width: map.get($theme, outer-ring-width);
+  $outer-color: map.get($theme, outer-ring-color);
+
+  $outer-radius: map.get($theme, ring-radius);
+  $inner-radius: calc(#{$outer-radius} - #{$outer-width});
+
+  // Outer
+  @include _outer-ring-size(
+    $container-outer-padding-vertical,
+    $container-outer-padding-horizontal,
+    $inner-width,
+    $outer-width
+  );
+  @include _set-border($outer-width, $outer-color, $outer-radius);
+
+  // Inner
+  &::before {
+    @include _set-border($inner-width, $inner-color, $inner-radius);
+  }
+}
+
+@mixin _outer-ring-size(
+  $container-outer-padding-vertical,
+  $container-outer-padding-horizontal,
+  $inner-width,
+  $outer-width
+) {
+  // Note that the ring will not respect its parent's border. This will not be
+  // an issue as long as border is set via a sibling node, similar to ripple
+  // and touch target.
+  $vertical-inset: calc(
+    -1 * (#{$container-outer-padding-vertical} + #{$inner-width} + #{$outer-width})
+  );
+  $horizontal-inset: calc(
+    -1 * (#{$container-outer-padding-horizontal} + #{$inner-width} + #{$outer-width})
+  );
+
+  inset: $vertical-inset $horizontal-inset;
+}
+
+@mixin _set-border($width, $color, $radius) {
+  border: $width solid $color;
+  border-radius: $radius;
+}

package/focus/lib/_focus-ring.scss

@@ -0,0 +1,41 @@
+//
+// 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 {
+    @include host-root;
+  }
+
+  .md3-focus-ring {
+    @include root;
+  }
+
+  .md3-focus-ring--visible {
+    display: block;
+  }
+}
+
+@mixin host-root() {
+  pointer-events: none;
+}
+
+@mixin root() {
+  display: none;
+  position: absolute;
+  box-sizing: border-box;
+
+  &::before {
+    @include inner-ring;
+  }
+}
+
+@mixin inner-ring() {
+  inset: 0;
+  position: absolute;
+  content: '';
+}

package/focus/lib/focus-ring-styles.css.d.ts

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

package/focus/lib/focus-ring-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 `:host{pointer-events:none}.md3-focus-ring{display:none;position:absolute;box-sizing:border-box}.md3-focus-ring::before{inset:0;position:absolute;content:""}.md3-focus-ring--visible{display:block}.md3-focus-ring{inset:calc(-1*(var(--md-focus-ring-container-outer-padding-vertical, 2px) + var(--md-focus-ring-inner-ring-width, 2px) + var(--md-focus-ring-outer-ring-width, 2px))) calc(-1*(var(--md-focus-ring-container-outer-padding-horizontal, 2px) + var(--md-focus-ring-inner-ring-width, 2px) + var(--md-focus-ring-outer-ring-width, 2px)));border:var(--md-focus-ring-outer-ring-width, 2px) solid var(--md-focus-ring-outer-ring-color, var(--md-sys-color-tertiary-container, #ffd8e4));border-radius:var(--md-focus-ring-ring-radius, 8px)}.md3-focus-ring::before{border:var(--md-focus-ring-inner-ring-width, 2px) solid var(--md-focus-ring-inner-ring-color, var(--md-sys-color-on-tertiary-container, #31111d));border-radius:calc(var(--md-focus-ring-ring-radius, 8px) - var(--md-focus-ring-outer-ring-width, 2px))}/*# sourceMappingURL=focus-ring-styles.css.map */
+`;
+//# sourceMappingURL=focus-ring-styles.css.js.map

package/focus/lib/focus-ring-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-ring-styles.css.js","sourceRoot":"","sources":["focus-ring-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{pointer-events:none}.md3-focus-ring{display:none;position:absolute;box-sizing:border-box}.md3-focus-ring::before{inset:0;position:absolute;content:\"\"}.md3-focus-ring--visible{display:block}.md3-focus-ring{inset:calc(-1*(var(--md-focus-ring-container-outer-padding-vertical, 2px) + var(--md-focus-ring-inner-ring-width, 2px) + var(--md-focus-ring-outer-ring-width, 2px))) calc(-1*(var(--md-focus-ring-container-outer-padding-horizontal, 2px) + var(--md-focus-ring-inner-ring-width, 2px) + var(--md-focus-ring-outer-ring-width, 2px)));border:var(--md-focus-ring-outer-ring-width, 2px) solid var(--md-focus-ring-outer-ring-color, var(--md-sys-color-tertiary-container, #ffd8e4));border-radius:var(--md-focus-ring-ring-radius, 8px)}.md3-focus-ring::before{border:var(--md-focus-ring-inner-ring-width, 2px) solid var(--md-focus-ring-inner-ring-color, var(--md-sys-color-on-tertiary-container, #31111d));border-radius:calc(var(--md-focus-ring-ring-radius, 8px) - var(--md-focus-ring-outer-ring-width, 2px))}/*# sourceMappingURL=focus-ring-styles.css.map */\n`;\n "]}

package/focus/lib/focus-ring-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 './focus-ring';
+@use './focus-ring-theme';
+
+@include focus-ring.static-styles;
+
+.md3-focus-ring {
+  @include focus-ring-theme.theme-styles(focus-ring-theme.$light-theme);
+}

package/focus/lib/focus-ring.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+/** @soyCompatible */
+export declare class FocusRing extends LitElement {
+    visible: boolean;
+    /** @soyTemplate */
+    protected render(): TemplateResult;
+    /** @soyTemplate */
+    protected getRenderClasses(): ClassInfo;
+}

package/focus/lib/focus-ring.js

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+/** @soyCompatible */
+export class FocusRing extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.visible = false;
+    }
+    /** @soyTemplate */
+    render() {
+        return html `<span class="md3-focus-ring ${classMap(this.getRenderClasses())}"></span>`;
+    }
+    /** @soyTemplate */
+    getRenderClasses() {
+        return {
+            'md3-focus-ring--visible': this.visible,
+        };
+    }
+}
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FocusRing.prototype, "visible", void 0);
+//# sourceMappingURL=focus-ring.js.map

package/focus/lib/focus-ring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-ring.js","sourceRoot":"","sources":["focus-ring.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAEhE,qBAAqB;AACrB,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QAC6B,YAAO,GAAG,KAAK,CAAC;IAc7C,CAAC;IAZC,mBAAmB;IACA,MAAM;QACvB,OAAO,IAAI,CAAA,+BACP,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,WAAW,CAAC;IACnD,CAAC;IAED,mBAAmB;IACT,gBAAgB;QACxB,OAAO;YACL,yBAAyB,EAAE,IAAI,CAAC,OAAO;SACxC,CAAC;IACJ,CAAC;CACF;AAd4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;0CAAiB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\n\n/** @soyCompatible */\nexport class FocusRing extends LitElement {\n  @property({type: Boolean}) visible = false;\n\n  /** @soyTemplate */\n  protected override render(): TemplateResult {\n    return html`<span class=\"md3-focus-ring ${\n        classMap(this.getRenderClasses())}\"></span>`;\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-focus-ring--visible': this.visible,\n    };\n  }\n}\n"]}

package/focus/strong-focus.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+interface StrongFocus {
+    visible: boolean;
+    setVisible(visible: boolean): void;
+}
+/**
+ * Set up integration with alternate global focus tracking object
+ *
+ * @param focusGlobal A global focus object to coordinate between multiple
+ *     systems
+ * @param enableKeydownHandler Set to true to let StrongFocusService listen for
+ *     keyboard navigation
+ */
+export declare function setup(focusGlobal: StrongFocus, enableKeydownHandler?: boolean): void;
+/**
+ * Returns `true` if the component should show strong focus.
+ *
+ * By default, strong focus is shown only on keyboard navigation, and not on
+ * pointer interaction.
+ */
+export declare function shouldShowStrongFocus(): boolean;
+/**
+ * Control if strong focus should always be shown on component focus
+ *
+ * Defaults to `false`
+ */
+export declare function setForceStrongFocus(force: boolean): void;
+/**
+ * If `true`, strong focus is always shown
+ */
+export declare function isStrongFocusForced(): boolean;
+/**
+ * Components should call this when a user interacts with a component with a
+ * pointing device.
+ *
+ * By default, this will prevent the strong focus from being shown.
+ */
+export declare function pointerPress(): void;
+export {};

package/focus/strong-focus.js

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+class FocusGlobal {
+    constructor() {
+        this.visible = false;
+    }
+    setVisible(visible) {
+        this.visible = visible;
+    }
+}
+/**
+ * This object can be overwritten by the `setup()` function to use a different
+ * focus coordination object.
+ */
+let focusObject = new FocusGlobal();
+/**
+ * Set of keyboard event codes that correspond to keyboard navigation
+ */
+const KEYBOARD_NAVIGATION_KEYS = new Set(['Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']);
+const KEYDOWN_HANDLER = (e) => {
+    if (KEYBOARD_NAVIGATION_KEYS.has(e.key)) {
+        focusObject.setVisible(true);
+    }
+};
+/**
+ * Set up integration with alternate global focus tracking object
+ *
+ * @param focusGlobal A global focus object to coordinate between multiple
+ *     systems
+ * @param enableKeydownHandler Set to true to let StrongFocusService listen for
+ *     keyboard navigation
+ */
+export function setup(focusGlobal, enableKeydownHandler = false) {
+    focusObject = focusGlobal;
+    if (enableKeydownHandler) {
+        window.addEventListener('keydown', KEYDOWN_HANDLER);
+    }
+    else {
+        window.removeEventListener('keydown', KEYDOWN_HANDLER);
+    }
+}
+/**
+ * Setting for always showing strong focus
+ *
+ * Defaults to false, controlled by `setForceStrongFocus`
+ */
+let alwaysStrong = false;
+/**
+ * Returns `true` if the component should show strong focus.
+ *
+ * By default, strong focus is shown only on keyboard navigation, and not on
+ * pointer interaction.
+ */
+export function shouldShowStrongFocus() {
+    return alwaysStrong || focusObject.visible;
+}
+/**
+ * Control if strong focus should always be shown on component focus
+ *
+ * Defaults to `false`
+ */
+export function setForceStrongFocus(force) {
+    alwaysStrong = force;
+}
+/**
+ * If `true`, strong focus is always shown
+ */
+export function isStrongFocusForced() {
+    return alwaysStrong;
+}
+/**
+ * Components should call this when a user interacts with a component with a
+ * pointing device.
+ *
+ * By default, this will prevent the strong focus from being shown.
+ */
+export function pointerPress() {
+    focusObject.setVisible(false);
+}
+setup(focusObject, true);
+//# sourceMappingURL=strong-focus.js.map

package/focus/strong-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"strong-focus.js","sourceRoot":"","sources":["strong-focus.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,MAAM,WAAW;IAAjB;QACE,YAAO,GAAG,KAAK,CAAC;IAIlB,CAAC;IAHC,UAAU,CAAC,OAAgB;QACzB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;CACF;AAED;;;GAGG;AACH,IAAI,WAAW,GAAgB,IAAI,WAAW,EAAE,CAAC;AAEjD;;GAEG;AACH,MAAM,wBAAwB,GAC1B,IAAI,GAAG,CAAC,CAAC,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;AAExE,MAAM,eAAe,GAAG,CAAC,CAAgB,EAAE,EAAE;IAC3C,IAAI,wBAAwB,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;QACvC,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;KAC9B;AACH,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,UAAU,KAAK,CAAC,WAAwB,EAAE,oBAAoB,GAAG,KAAK;IAC1E,WAAW,GAAG,WAAW,CAAC;IAC1B,IAAI,oBAAoB,EAAE;QACxB,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;KACrD;SAAM;QACL,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;KACxD;AACH,CAAC;AAED;;;;GAIG;AACH,IAAI,YAAY,GAAG,KAAK,CAAC;AAEzB;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB;IACnC,OAAO,YAAY,IAAI,WAAW,CAAC,OAAO,CAAC;AAC7C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAAc;IAChD,YAAY,GAAG,KAAK,CAAC;AACvB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,mBAAmB;IACjC,OAAO,YAAY,CAAC;AACtB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,YAAY;IAC1B,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AAChC,CAAC;AAED,KAAK,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\ninterface StrongFocus {\n  visible: boolean;\n  setVisible(visible: boolean): void;\n}\n\nclass FocusGlobal implements StrongFocus {\n  visible = false;\n  setVisible(visible: boolean) {\n    this.visible = visible;\n  }\n}\n\n/**\n * This object can be overwritten by the `setup()` function to use a different\n * focus coordination object.\n */\nlet focusObject: StrongFocus = new FocusGlobal();\n\n/**\n * Set of keyboard event codes that correspond to keyboard navigation\n */\nconst KEYBOARD_NAVIGATION_KEYS =\n    new Set(['Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']);\n\nconst KEYDOWN_HANDLER = (e: KeyboardEvent) => {\n  if (KEYBOARD_NAVIGATION_KEYS.has(e.key)) {\n    focusObject.setVisible(true);\n  }\n};\n\n/**\n * Set up integration with alternate global focus tracking object\n *\n * @param focusGlobal A global focus object to coordinate between multiple\n *     systems\n * @param enableKeydownHandler Set to true to let StrongFocusService listen for\n *     keyboard navigation\n */\nexport function setup(focusGlobal: StrongFocus, enableKeydownHandler = false) {\n  focusObject = focusGlobal;\n  if (enableKeydownHandler) {\n    window.addEventListener('keydown', KEYDOWN_HANDLER);\n  } else {\n    window.removeEventListener('keydown', KEYDOWN_HANDLER);\n  }\n}\n\n/**\n * Setting for always showing strong focus\n *\n * Defaults to false, controlled by `setForceStrongFocus`\n */\nlet alwaysStrong = false;\n\n/**\n * Returns `true` if the component should show strong focus.\n *\n * By default, strong focus is shown only on keyboard navigation, and not on\n * pointer interaction.\n */\nexport function shouldShowStrongFocus() {\n  return alwaysStrong || focusObject.visible;\n}\n\n/**\n * Control if strong focus should always be shown on component focus\n *\n * Defaults to `false`\n */\nexport function setForceStrongFocus(force: boolean) {\n  alwaysStrong = force;\n}\n\n/**\n * If `true`, strong focus is always shown\n */\nexport function isStrongFocusForced() {\n  return alwaysStrong;\n}\n\n/**\n * Components should call this when a user interacts with a component with a\n * pointing device.\n *\n * By default, this will prevent the strong focus from being shown.\n */\nexport function pointerPress() {\n  focusObject.setVisible(false);\n}\n\nsetup(focusObject, true);"]}

package/formfield/formfield.d.ts

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

package/formfield/formfield.js

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

package/formfield/formfield.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formfield.js","sourceRoot":"","sources":["formfield.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAC,MAAM,IAAI,eAAe,EAAC,MAAM,+BAA+B,CAAC;AAQxE;;;;GAIG;AAEH,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,SAAS;CAEzC,CAAA;AADiB,kBAAM,GAAG,CAAC,eAAe,CAAE,CAAA;AADhC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAEvB;SAFY,WAAW","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 {Formfield} from './lib/formfield.js';\nimport {styles as formfieldStyles} from './lib/formfield-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-formfield': MdFormfield;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-formfield')\nexport class MdFormfield extends Formfield {\n  static override styles = [formfieldStyles];\n}\n"]}

package/formfield/lib/_formfield-theme.scss

@@ -0,0 +1,41 @@
+//
+// 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 'sass:map';
+
+@use '@material/web/sass/theme';
+@use '@material/web/tokens';
+
+$custom-property-prefix: 'formfield';
+
+$light-theme: (
+  label-text-color:
+    map.get(tokens.md-sys-color-values-light-dynamic(), on-surface),
+  disabled-label-text-color:
+    map.get(tokens.md-sys-color-values-light-dynamic(), on-surface-variant),
+);
+
+@mixin theme($theme) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  @include theme.emit-theme-vars(
+    theme.create-theme-vars($theme, $custom-property-prefix)
+  );
+}
+
+@mixin theme-styles($theme) {
+  $theme: theme.validate-theme($light-theme, $theme);
+  $theme: theme.create-theme-vars($theme, $prefix: $custom-property-prefix);
+
+  .md3-formfield__label {
+    color: map.get($theme, label-text-color);
+  }
+
+  &.md3-formfield--disabled .md3-formfield__label {
+    color: map.get($theme, disabled-label-text-color);
+  }
+}

package/formfield/lib/_formfield.scss

@@ -0,0 +1,40 @@
+//
+// 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-formfield {
+    align-items: center;
+    display: inline-flex;
+    vertical-align: middle;
+    width: 100%;
+  }
+
+  .md3-formfield__label {
+    margin-inline: 0 auto;
+    order: 0;
+    padding-inline: 4px 0;
+  }
+
+  .md3-formfield--align-end .md3-formfield__label {
+    margin-inline: auto 0;
+    order: -1;
+    padding-inline: 0 4px;
+  }
+
+  .md3-formfield--space-between {
+    justify-content: space-between;
+  }
+
+  .md3-formfield--space-between .md3-formfield__label {
+    margin: 0;
+  }
+}

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

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

package/formfield/lib/formfield-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 `:host{display:inline-flex}.md3-formfield{align-items:center;display:inline-flex;vertical-align:middle;width:100%}.md3-formfield__label{margin-inline:0 auto;order:0;padding-inline:4px 0}.md3-formfield--align-end .md3-formfield__label{margin-inline:auto 0;order:-1;padding-inline:0 4px}.md3-formfield--space-between{justify-content:space-between}.md3-formfield--space-between .md3-formfield__label{margin:0}.md3-formfield .md3-formfield__label{color:var(--md-formfield-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-formfield.md3-formfield--disabled .md3-formfield__label{color:var(--md-formfield-disabled-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}/*# sourceMappingURL=formfield-styles.css.map */
+`;
+//# sourceMappingURL=formfield-styles.css.js.map