@vollowx/seele 0.7.0

package/src/m3/button/common-button-toggle.js

@@ -0,0 +1,69 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Switch } from '../../base/switch.js';
+import { internals } from '../../base/mixins/internals-attached.js';
+import '../focus-ring.js';
+import '../ripple.js';
+import { targetStyles } from '../target-styles.css.js';
+import { sharedButtonStyles } from './shared-button-styles.css.js';
+import { commonButtonStyles } from './common-button-styles.css.js';
+import { commonButtonToggleStyles } from './common-button-toggle-styles.css.js';
+/**
+ * @tag md-button-toggle
+ *
+ * @csspart label
+ * @csspart label checked
+ * @csspart icon
+ * @csspart icon checked
+ *
+ * @slot - label
+ * @slot icon - leading icon
+ */
+let M3ButtonToggle = class M3ButtonToggle extends Switch {
+    static { this.styles = [
+        ...super.styles,
+        targetStyles,
+        sharedButtonStyles,
+        commonButtonStyles,
+        commonButtonToggleStyles,
+    ]; }
+    constructor() {
+        super();
+        this.size = 'small';
+        this.shape = 'rounded';
+        this.variant = 'filled';
+        /**
+         * Whether to show the icon at the end of the button.
+         */
+        this.trailingIcon = false;
+        this[internals].role = 'button';
+    }
+    render() {
+        return html `
+      <md-focus-ring></md-focus-ring>
+      <md-ripple></md-ripple>
+      <span part="target"></span>
+      <slot part="icon unchecked" name="icon" aria-hidden="true"></slot>
+      <slot part="icon checked" name="icon-checked" aria-hidden="true"></slot>
+      <slot part="label unchecked"></slot>
+      <slot part="label checked" name="checked"></slot>
+    `;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], M3ButtonToggle.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], M3ButtonToggle.prototype, "shape", void 0);
+__decorate([
+    property({ reflect: true })
+], M3ButtonToggle.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3ButtonToggle.prototype, "trailingIcon", void 0);
+M3ButtonToggle = __decorate([
+    customElement('md-button-toggle')
+], M3ButtonToggle);
+export { M3ButtonToggle };

package/src/m3/button/common-button.js

@@ -0,0 +1,65 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Button } from '../../base/button.js';
+import '../focus-ring.js';
+import '../ripple.js';
+import { targetStyles } from '../target-styles.css.js';
+import { sharedButtonStyles } from './shared-button-styles.css.js';
+import { commonButtonStyles } from './common-button-styles.css.js';
+/**
+ * @tag md-button
+ *
+ * @csspart label
+ * @csspart icon
+ *
+ * @slot - label
+ * @slot icon - leading icon
+ */
+let M3Button = class M3Button extends Button {
+    constructor() {
+        super(...arguments);
+        this.size = 'small';
+        this.shape = 'rounded';
+        this.color = 'primary';
+        this.variant = 'filled';
+        /**
+         * Whether to show the icon at the end of the button.
+         */
+        this.trailingIcon = false;
+    }
+    static { this.styles = [
+        ...super.styles,
+        targetStyles,
+        sharedButtonStyles,
+        commonButtonStyles,
+    ]; }
+    render() {
+        return html `
+      <md-focus-ring></md-focus-ring>
+      <md-ripple></md-ripple>
+      <span part="target"></span>
+      <slot part="icon" name="icon" aria-hidden="true"></slot>
+      <slot part="label"></slot>
+    `;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], M3Button.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], M3Button.prototype, "shape", void 0);
+__decorate([
+    property({ reflect: true })
+], M3Button.prototype, "color", void 0);
+__decorate([
+    property({ reflect: true })
+], M3Button.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3Button.prototype, "trailingIcon", void 0);
+M3Button = __decorate([
+    customElement('md-button')
+], M3Button);
+export { M3Button };

package/src/m3/button/icon-button-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const iconButtonStyles = css `:host{--_icon-size:24px;background-color:color-mix(in srgb,var(--_background-color)var(--_background-opacity,100%),transparent);border-radius:calc(var(--_h)/2);color:color-mix(in srgb,var(--_text-color)var(--_text-opacity,100%),transparent);height:var(--_h);transition:border-radius var(--md-sys-motion-std-effects-slow-duration)var(--md-sys-motion-std-effects-slow);width:var(--_h)}:host([variant=text]){--_text-color:var(--md-sys-color-on-surface-variant)}:host([width=narrow]){width:var(--_w_narrow)}:host([width=wide]){width:var(--_w_wide)}:host(:disabled){--_text-opacity:38%;cursor:default;pointer-events:none;--_text-color:var(--md-sys-color-on-surface)!important}:host([variant=filled]:disabled),:host([variant=tonal]:disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:10%}:host([variant=outlined]:disabled){--_outline-color:var(--md-sys-color-on-surface);--_outline-opacity:10%}::slotted(*){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}`;

package/src/m3/button/icon-button-toggle-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const iconButtonToggleStyles = css `:host([variant=text]:state(checked)){--_text-color:var(--md-sys-color-primary)}:host([variant=filled]:not(:state(checked))){--_background-color:var(--md-sys-color-surface-container);--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=tonal]:not(:state(checked))){--_background-color:var(--md-sys-color-surface-container-highest);--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=outlined]:state(checked)){--_background-color:var(--md-sys-color-inverse-surface);--_outline-color:var(--md-sys-color-inverse-surface);--_text-color:var(--md-sys-color-inverse-on-surface)}:host([variant=outlined]:state(checked):disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:10%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;border-width:0}`;

package/src/m3/button/icon-button-toggle.js

@@ -0,0 +1,57 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Switch } from '../../base/switch.js';
+import { internals } from '../../base/mixins/internals-attached.js';
+import '../focus-ring.js';
+import '../ripple.js';
+import { targetStyles } from '../target-styles.css.js';
+import { sharedButtonStyles } from './shared-button-styles.css.js';
+import { iconButtonStyles } from './icon-button-styles.css.js';
+import { iconButtonToggleStyles } from './icon-button-toggle-styles.css.js';
+/**
+ * @tag md-icon-button-toggle
+ *
+ * @csspart icon
+ *
+ * @slot - icon
+ * @slot checked - icon when checked
+ */
+let M3IconButtonToggle = class M3IconButtonToggle extends Switch {
+    static { this.styles = [
+        ...super.styles,
+        targetStyles,
+        sharedButtonStyles,
+        iconButtonStyles,
+        iconButtonToggleStyles,
+    ]; }
+    constructor() {
+        super();
+        this.size = 'small';
+        this.variant = 'text';
+        this.width = 'standard';
+        this[internals].role = 'button';
+    }
+    render() {
+        return html `
+      <md-focus-ring></md-focus-ring>
+      <md-ripple enterbehavior="always"></md-ripple>
+      <span part="target"></span>
+      <slot part="icon unchecked"></slot>
+      <slot part="icon checked" name="checked"></slot>
+    `;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], M3IconButtonToggle.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], M3IconButtonToggle.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], M3IconButtonToggle.prototype, "width", void 0);
+M3IconButtonToggle = __decorate([
+    customElement('md-icon-button-toggle')
+], M3IconButtonToggle);
+export { M3IconButtonToggle };

package/src/m3/button/icon-button.js

@@ -0,0 +1,51 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Button } from '../../base/button.js';
+import '../focus-ring.js';
+import '../ripple.js';
+import { targetStyles } from '../target-styles.css.js';
+import { sharedButtonStyles } from './shared-button-styles.css.js';
+import { iconButtonStyles } from './icon-button-styles.css.js';
+/**
+ * @tag md-icon-button
+ *
+ * @csspart icon
+ *
+ * @slot - icon
+ */
+let M3IconButton = class M3IconButton extends Button {
+    constructor() {
+        super(...arguments);
+        this.size = 'small';
+        this.variant = 'text';
+        this.width = 'standard';
+    }
+    static { this.styles = [
+        ...super.styles,
+        targetStyles,
+        sharedButtonStyles,
+        iconButtonStyles,
+    ]; }
+    render() {
+        return html `
+      <md-focus-ring></md-focus-ring>
+      <md-ripple></md-ripple>
+      <span part="target"></span>
+      <slot part="icon"></slot>
+    `;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], M3IconButton.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], M3IconButton.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], M3IconButton.prototype, "width", void 0);
+M3IconButton = __decorate([
+    customElement('md-icon-button')
+], M3IconButton);
+export { M3IconButton };

package/src/m3/button/shared-button-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const sharedButtonStyles = css `:host{--_on-color:var(--md-sys-color-on-primary);--_color:var(--md-sys-color-primary);--_h:40px;--_w_narrow:32px;--_w_wide:52px;--_icon-size:20px;--_pad:16px;--_gap:8px;--_rad-sq:12px;--_rad-pr:8px;--_text-color:var(--_on-color);--_background-color:var(--_color);--_outline-color:var(--md-sys-color-outline-variant);box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;vertical-align:top;outline:0;justify-content:center;align-items:center;display:inline-flex;position:relative}:host([size=xsmall]){--_h:32px;--_w_narrow:28px;--_w_wide:40px;--_pad:12px;--_gap:4px}:host([size=medium]){--_h:56px;--_w_narrow:48px;--_w_wide:72px;--_icon-size:24px;--_pad:24px;--_gap:8px;--_rad-sq:16px;--_rad-pr:12px;font:var(--md-sys-typography-title-medium)}:host([size=large]){--_h:96px;--_w_narrow:64px;--_w_wide:128px;--_icon-size:32px;--_pad:48px;--_gap:12px;--_rad-sq:28px;--_rad-pr:16px;font:var(--md-sys-typography-headline-small)}:host([size=xlarge]){--_h:136px;--_w_narrow:104px;--_w_wide:184px;--_icon-size:40px;--_pad:64px;--_gap:16px;--_rad-sq:28px;--_rad-pr:16px;font:var(--md-sys-typography-headline-medium)}:host([color=secondary]){--_on-color:var(--md-sys-color-on-secondary);--_color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_on-color:var(--md-sys-color-on-tertiary);--_color:var(--md-sys-color-tertiary)}:host([variant=tonal]){--_background-color:var(--md-sys-color-secondary-container);--_text-color:var(--md-sys-color-on-secondary-container)}:host([variant=outlined]){--_background-color:transparent;--_text-color:var(--md-sys-color-on-surface-variant);--md-focus-ring-offset:3px;border-color:color-mix(in srgb,var(--_outline-color)var(--_outline-opacity,100%),transparent);box-shadow:none;border-style:solid;border-width:1px}:host([variant=text]){--_background-color:transparent;--_text-color:var(--_color)}:host([shape=square]),:host(:state(checked)){--md-focus-ring-shape:var(--_rad-sq);border-radius:var(--_rad-sq)}:host(:active){--md-focus-ring-shape:var(--_rad-pr);border-radius:var(--_rad-pr)}:host(:state(checked)) [part~=unchecked],:host(:not(:state(checked))) [part~=checked]{display:none}`;

package/src/m3/checkbox-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const checkboxStyles = css `:host{--md-focus-ring-radius:9999px;--_container-color:transparent;--_outline-color:var(--md-sys-color-on-surface-variant);--_mark-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-on-surface);--_checkbox-size:18px;background-color:color-mix(in srgb,var(--_container-color)var(--_container-opacity,100%),transparent);border-color:color-mix(in srgb,var(--_outline-color)var(--_outline-opacity,100%),transparent);border-style:solid;border-width:var(--md-checkbox-outline-width,2px);box-sizing:border-box;cursor:pointer;height:var(--_checkbox-size);-webkit-tap-highlight-color:transparent;transition:background-color var(--md-sys-motion-exp-effects-fast-duration)var(--md-sys-motion-exp-effects-fast),border-color var(--md-sys-motion-exp-effects-fast-duration)var(--md-sys-motion-exp-effects-fast);-webkit-user-select:none;user-select:none;vertical-align:top;width:var(--_checkbox-size);border-radius:2px;outline:0;place-content:center;place-items:center;margin:15px;display:inline-grid;position:relative}:host(:state(checked)),:host(:state(indeterminate)){--_container-color:var(--md-sys-color-primary);--_outline-color:var(--md-sys-color-primary);--_mark-color:var(--md-sys-color-on-primary);--_mark-opacity:100%;--_ripple-color:var(--md-sys-color-primary)}:host([error]){--_outline-color:var(--md-sys-color-error);--_mark-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-error)}:host([error]:state(checked)),:host([error]:state(indeterminate)){--_container-color:var(--md-sys-color-error);--_outline-color:var(--md-sys-color-error);--_mark-color:var(--md-sys-color-on-error);--_ripple-color:var(--md-sys-color-error)}:host(:disabled){--_outline-color:var(--md-sys-color-on-surface);--_outline-opacity:38%;--_mark-color:var(--md-sys-color-surface-container-highest);cursor:default;pointer-events:none}:host(:disabled:state(checked)),:host(:disabled:state(indeterminate)){--_container-color:var(--md-sys-color-on-surface);--_container-opacity:38%;--_outline-color:var(--md-sys-color-surface);--_outline-opacity:0%;--_mark-color:var(--md-sys-color-surface)}@media (hover:hover) and (pointer:fine){:host(:hover){--_unchecked-outline-color:var(--md-sys-color-on-surface)}}@media (forced-colors:active){:host{forced-color-adjust:none}}:host(:disabled){--_unchecked-container-opacity:38%}[part~=icon]{fill:color-mix(in srgb,var(--_mark-color)var(--_mark-opacity,0%),transparent);height:18px;transition:fill var(--md-sys-motion-exp-effects-fast-duration)var(--md-sys-motion-exp-effects-fast);width:18px;position:absolute;inset:-2px}[part~=mark]{transition-duration:var(--md-sys-motion-exp-effects-fast-duration);transition-timing-function:var(--md-sys-motion-exp-effects-fast);transform:scaleY(-1)translate(7px,-14px)rotate(45deg)}:host(:state(indeterminate)) [part~=mark]{transform:scaleY(-1)translate(4px,-10px)rotate(0)}:host(:state(checked)) [part~=mark],:host(:state(indeterminate)) [part~=mark]{transition-duration:var(--md-sys-motion-exp-effects-slow-duration);transition-timing-function:var(--md-sys-motion-exp-effects-slow)}[part~=mark-short]{width:2px;height:0;transition-property:transform,height}[part~=mark-long]{width:0;height:2px;transition-property:transform,width}:host(:not(:state(checked)):not(:state(indeterminate)):state(was-checked)) [part~=mark],:host(:not(:state(checked)):not(:state(indeterminate)):state(was-indeterminate)) [part~=mark]{transition-delay:var(--md-sys-motion-exp-effects-fast-duration)}:host(:state(checked)) [part~=mark-short]{height:5.65685px}:host(:state(checked)) [part~=mark-long]{width:11.3137px}:host(:state(checked):state(was-unchecked)) [part~=mark-short]{transition-property:none}:host(:state(indeterminate)) [part~=mark-short]{height:2px}:host(:state(indeterminate)) [part~=mark-long]{width:10px}:host(:state(indeterminate):state(was-unchecked)) [part~=mark-short]{transition-property:height}:host(:state(indeterminate):state(was-unchecked)) [part~=mark-long]{transition-property:width}md-focus-ring{height:44px;inset:unset;width:44px}md-ripple{--md-ripple-color:var(--_ripple-color);height:40px;inset:unset;border-radius:9999px;width:40px}`;

package/src/m3/checkbox.js

@@ -0,0 +1,46 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Checkbox } from '../base/checkbox.js';
+import './focus-ring.js';
+import './ripple.js';
+import { checkboxStyles } from './checkbox-styles.css.js';
+import { targetStyles } from './target-styles.css.js';
+/**
+ * @tag md-checkbox
+ *
+ * @csspart icon
+ * @csspart mark
+ * @csspart mark-short
+ * @csspart mark-long
+ */
+let M3Checkbox = class M3Checkbox extends Checkbox {
+    constructor() {
+        super(...arguments);
+        this.error = false;
+    }
+    static { this.styles = [...super.styles, targetStyles, checkboxStyles]; }
+    render() {
+        return html `
+      <md-focus-ring></md-focus-ring>
+      <md-ripple enterbehavior="none"></md-ripple>
+      <span part="target"></span>
+      ${this.renderIcon()}
+    `;
+    }
+    renderIcon() {
+        return html `
+      <svg part="icon" viewBox="0 0 18 18" aria-hidden="true">
+        <rect part="mark mark-short"></rect>
+        <rect part="mark mark-long"></rect>
+      </svg>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3Checkbox.prototype, "error", void 0);
+M3Checkbox = __decorate([
+    customElement('md-checkbox')
+], M3Checkbox);
+export { M3Checkbox };

package/src/m3/fab-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const fabStyles = css `:host{--_text-color:var(--md-sys-color-primary);--_background-color:var(--md-sys-color-surface-container-high);--_size:56px;--_border-radius:16px;--_icon-size:24px;background-color:color-mix(in srgb,var(--_background-color)var(--_background-opacity,100%),transparent);border-radius:var(--_border-radius);box-shadow:var(--md-sys-elevation-shadow-3);box-sizing:border-box;color:color-mix(in srgb,var(--_text-color)var(--_text-opacity,100%),transparent);cursor:pointer;font:var(--md-sys-typography-label-large);height:var(--_size);min-width:var(--_size);padding-inline:calc((var(--_size) - var(--_icon-size))/2);-webkit-tap-highlight-color:transparent;transition:box-shadow var(--md-sys-motion-std-effects-slow-duration)var(--md-sys-motion-std-effects-slow);-webkit-user-select:none;user-select:none;vertical-align:middle;outline:0;justify-content:center;align-items:center;gap:8px;display:inline-flex;position:relative}:host([lowered]){--_background-color:var(--md-sys-color-surface-container-low);box-shadow:var(--md-sys-elevation-shadow-1)}:host([size=small]){--_size:40px;--_border-radius:12px}:host([size=large]){--_size:96px;--_border-radius:28px;--_icon-size:36px}:host([color=primary]){--_text-color:var(--md-sys-color-on-primary);--_background-color:var(--md-sys-color-primary)}:host([color=secondary]){--_text-color:var(--md-sys-color-on-secondary);--_background-color:var(--md-sys-color-secondary)}:host([color=tertiary]){--_text-color:var(--md-sys-color-on-tertiary);--_background-color:var(--md-sys-color-tertiary)}:host(:disabled){--_background-color:var(--md-sys-color-on-surface);--_background-opacity:12%;--_text-color:var(--md-sys-color-on-surface);--_text-opacity:38%;box-shadow:none;cursor:default;pointer-events:none}@media (hover:hover) and (pointer:fine){:host(:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-4)}:host([lowered]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-2)}}md-focus-ring{--md-focus-ring-shape:var(--_border-radius)}::slotted(:not([slot=label])){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em;display:inline-flex}::slotted([slot=label]){margin-inline:4px}`;

package/src/m3/fab.js

@@ -0,0 +1,48 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Button } from '../base/button.js';
+import './focus-ring.js';
+import './ripple.js';
+import { fabStyles } from './fab-styles.css.js';
+import { targetStyles } from './target-styles.css.js';
+/**
+ * @tag md-fab
+ *
+ * @csspart icon
+ * @csspart label
+ *
+ * @slot - icon
+ * @slot label - label
+ */
+let M3FAB = class M3FAB extends Button {
+    constructor() {
+        super(...arguments);
+        this.size = 'medium';
+        this.color = 'surface';
+        this.lowered = false;
+    }
+    static { this.styles = [...super.styles, targetStyles, fabStyles]; }
+    render() {
+        return html `
+      <md-focus-ring></md-focus-ring>
+      <md-ripple></md-ripple>
+      <span part="target"></span>
+      <slot part="icon" aria-hidden="true"></slot>
+      <slot part="label" name="label"></slot>
+    `;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], M3FAB.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], M3FAB.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3FAB.prototype, "lowered", void 0);
+M3FAB = __decorate([
+    customElement('md-fab')
+], M3FAB);
+export { M3FAB };

package/src/m3/field/field-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const fieldStyles = css `:host{cursor:text;-webkit-user-select:none;user-select:none;vertical-align:top;flex-direction:column;display:inline-flex;position:relative}.container{box-sizing:border-box;flex:1;align-items:center;min-height:56px;padding-block:16px;display:flex;position:relative}:host([disabled]){opacity:.38;pointer-events:none}.start,.end{color:var(--md-sys-color-on-surface-variant);justify-content:center;align-items:center;min-width:48px;display:flex}.start[hidden],.end[hidden]{display:none}.middle{flex-direction:column;flex:1;justify-content:center;height:100%;display:flex;position:relative;overflow:hidden}.label{font:var(--md-sys-typography-body-large);pointer-events:none;text-overflow:ellipsis;transform-origin:0 0;max-width:calc(100% - 24px);transition:margin-top var(--md-sys-motion-exp-effects-default-duration)var(--md-sys-motion-exp-effects-default),font-size var(--md-sys-motion-exp-effects-default-duration)var(--md-sys-motion-exp-effects-default);white-space:nowrap}.input-wrapper{flex:1;align-items:center;display:flex}:host([haslabel]:not([focused]):not([populated])) ::slotted(input)::placeholder,:host([haslabel]:not([focused]):not([populated])) ::slotted(textarea)::placeholder{opacity:0}::slotted(*){caret-color:var(--md-sys-color-primary);font:var(--md-sys-typography-body-large)}.supporting-text{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typography-body-small);padding-inline:16px;padding-top:4px}:host([error]) ::slotted(*){caret-color:var(--md-sys-color-error)}:host([error]) .supporting-text{color:var(--md-sys-color-error)}`;

package/src/m3/field/field.js

@@ -0,0 +1,93 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { Field } from '../../base/field.js';
+import { fieldStyles } from './field-styles.css.js';
+/**
+ * @fires {Event} change - Fired when the selected value has changed.
+ * @fires {Event} input - Fired when the selected value has changed.
+ */
+export class M3Field extends Field {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.supportingText = '';
+        this.disabled = false;
+        this.error = false;
+        this.focused = false;
+        this.populated = false;
+        this.hasLabel = false;
+        this.hasStart = false;
+        this.hasEnd = false;
+    }
+    static { this.styles = [fieldStyles]; }
+    update(changedProperties) {
+        if (changedProperties.has('label')) {
+            this.hasLabel = !!this.label;
+        }
+        super.update(changedProperties);
+    }
+    render() {
+        return html `
+      <div class="container">${this.renderContainerContent()}</div>
+      ${this.renderSupportingText()}
+    `;
+    }
+    renderSupportingText() {
+        if (!this.supportingText) {
+            return '';
+        }
+        return html `<div class="supporting-text">${this.supportingText}</div>`;
+    }
+    renderStart() {
+        return html `<slot
+      name="start"
+      class="start"
+      ?hidden=${!this.hasStart}
+      @slotchange=${this.handleSlotChange}
+    ></slot>`;
+    }
+    renderEnd() {
+        return html `<slot
+      name="end"
+      class="end"
+      ?hidden=${!this.hasEnd}
+      @slotchange=${this.handleSlotChange}
+    ></slot>`;
+    }
+    handleSlotChange(e) {
+        const slot = e.target;
+        const hasContent = slot.assignedNodes({ flatten: true }).length > 0;
+        if (slot.name === 'start')
+            this.hasStart = hasContent;
+        if (slot.name === 'end')
+            this.hasEnd = hasContent;
+    }
+}
+__decorate([
+    property({ type: String, reflect: true })
+], M3Field.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], M3Field.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3Field.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3Field.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3Field.prototype, "focused", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3Field.prototype, "populated", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3Field.prototype, "hasLabel", void 0);
+__decorate([
+    state()
+], M3Field.prototype, "hasStart", void 0);
+__decorate([
+    state()
+], M3Field.prototype, "hasEnd", void 0);

package/src/m3/field/filled-field-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const filledFieldStyles = css `.container{--_indicator-height:1px;--_indicator-color:var(--md-sys-color-on-surface-variant);background-color:var(--md-sys-color-surface-container-highest);box-shadow:inset 0 calc(var(--_indicator-height)*-1)0 0 var(--_indicator-color);transition:box-shadow var(--md-sys-motion-exp-effects-default-duration)var(--md-sys-motion-exp-effects-default);border-radius:4px 4px 0 0;padding:0 16px}:host([haslabel]) .input-wrapper{padding-top:24px;padding-bottom:8px}.label{color:var(--md-sys-color-on-surface-variant);margin-top:15px;position:absolute;top:0;left:0}:host([focused]) .label{color:var(--md-sys-color-primary)}:host([error]) .label{color:var(--md-sys-color-error)}:host([populated]) .label,:host([focused]) .label{margin-top:4px;font-size:.75rem}:host([focused]) .container{--_indicator-height:3px;--_indicator-color:var(--md-sys-color-primary)}:host([error]) .container,:host([error][focused]) .container{--_indicator-color:var(--md-sys-color-error)}`;

package/src/m3/field/filled-field.js

@@ -0,0 +1,30 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { M3Field } from './field.js';
+import '../ripple.js';
+import { filledFieldStyles } from './filled-field-styles.css.js';
+let M3FilledField = class M3FilledField extends M3Field {
+    static { this.styles = [...super.styles, filledFieldStyles]; }
+    renderContainerContent() {
+        return html `
+      <md-ripple
+        clickbehavior="none"
+        enterbehavior="none"
+        spacebehavior="none"
+      ></md-ripple>
+      ${this.renderStart()}
+      <div class="middle">
+        <span class="label">${this.label}</span>
+        <div class="input-wrapper">
+          <slot></slot>
+        </div>
+      </div>
+      ${this.renderEnd()}
+    `;
+    }
+};
+M3FilledField = __decorate([
+    customElement('md-filled-field')
+], M3FilledField);
+export { M3FilledField };

package/src/m3/field/outlined-field-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const outlinedFieldStyles = css `:host{--_outline-width:1px}.container{border-radius:4px;padding-inline:16px}.outline{border-radius:inherit;color:var(--md-sys-color-outline);pointer-events:none;display:flex;position:absolute;inset:0}.outline-start,.outline-notch,.outline-end{border:var(--_outline-width)solid currentColor;box-sizing:border-box;transition:border-width var(--md-sys-motion-exp-effects-default-duration)var(--md-sys-motion-exp-effects-default),border-top-color var(--md-sys-motion-exp-effects-default-duration)var(--md-sys-motion-exp-effects-default)}.outline-start{border-radius:inherit;border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;width:12px}.outline-end{border-radius:inherit;border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;flex:1}.outline-notch{border-left:none;border-right:none;align-items:flex-start;max-width:calc(100% - 24px);margin-top:0;padding:0 4px;display:flex}:host(:not([haslabel])) .outline-notch{display:none}.label{margin-top:15px}:host(:hover) .label,:host(:hover) .outline{color:var(--md-sys-color-on-surface)}:host([focused]){--_outline-width:3px}:host([focused]) .label,:host([focused]) .outline{color:var(--md-sys-color-primary)}:host([error]) .label,:host([error]) .outline{color:var(--md-sys-color-error)}:host([populated]) .outline-notch,:host([focused]) .outline-notch{border-top-width:0;border-top-color:#0000}:host([populated]) .label,:host([focused]) .label{margin-top:-12px;font-size:.75rem}:host([disabled]) .outline{color:var(--md-sys-color-outline-variant)}:host([disabled]) .label{color:var(--md-sys-color-on-surface-variant)}`;

package/src/m3/field/outlined-field.js

@@ -0,0 +1,34 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { M3Field } from './field.js';
+import { outlinedFieldStyles } from './outlined-field-styles.css.js';
+let M3OutlinedField = class M3OutlinedField extends M3Field {
+    static { this.styles = [...super.styles, outlinedFieldStyles]; }
+    renderContainerContent() {
+        return html `
+      ${this.renderOutline()} ${this.renderStart()}
+      <div class="middle">
+        <div class="input-wrapper">
+          <slot></slot>
+        </div>
+      </div>
+      ${this.renderEnd()}
+    `;
+    }
+    renderOutline() {
+        return html `
+      <div class="outline">
+        <div class="outline-start"></div>
+        <div class="outline-notch">
+          <span class="label">${this.label}</span>
+        </div>
+        <div class="outline-end"></div>
+      </div>
+    `;
+    }
+};
+M3OutlinedField = __decorate([
+    customElement('md-outlined-field')
+], M3OutlinedField);
+export { M3OutlinedField };

package/src/m3/focus-ring-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const focusRingStyles = css `:host{animation-delay:0s,calc(var(--md-focus-ring-duration,.6s)*.25);animation-duration:calc(var(--md-focus-ring-duration,.6s)*.25),calc(var(--md-focus-ring-duration,.6s)*.75);animation-timing-function:var(--md-sys-motion-exp-spatial-slow);box-sizing:border-box;color:var(--md-focus-ring-color,var(--md-sys-color-secondary));pointer-events:none;display:none;position:absolute}:host(:state(visible)){display:flex}:host(:not([inward])){inset:calc(-1*var(--md-focus-ring-outward-offset,2px));outline:var(--md-focus-ring-width,3px)solid currentColor;border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) + var(--md-focus-ring-outward-offset,2px));animation-name:outward-grow,outward-shrink}:host([inward]){border:var(--md-focus-ring-width,3px)solid currentColor;inset:var(--md-focus-ring-inward-offset,0px);border-start-start-radius:calc(var(--md-focus-ring-shape-start-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-end-radius:calc(var(--md-focus-ring-shape-end-end,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start,var(--md-focus-ring-shape,9999px)) - var(--md-focus-ring-inward-offset,0px));animation-name:inward-grow,inward-shrink}@keyframes outward-grow{0%{outline-width:0}to{outline-width:var(--md-focus-ring-active-width,8px)}}@keyframes outward-shrink{0%{outline-width:var(--md-focus-ring-active-width,8px)}}@keyframes inward-grow{0%{border-width:0}to{border-width:var(--md-focus-ring-active-width,8px)}}@keyframes inward-shrink{0%{border-width:var(--md-focus-ring-active-width,8px)}}@media (prefers-reduced-motion){:host{animation:none}}`;

package/src/m3/focus-ring.js

@@ -0,0 +1,72 @@
+import { __decorate } from "tslib";
+import { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { focusVisible } from '../core/focus-visible.js';
+import { Attachable } from '../base/mixins/attachable.js';
+import { InternalsAttached, internals, } from '../base/mixins/internals-attached.js';
+import { focusRingStyles } from './focus-ring-styles.css.js';
+/**
+ * @tag md-focus-ring
+ *
+ * @cssprop --md-focus-ring-active-width
+ * @cssprop --md-focus-ring-color
+ * @cssprop --md-focus-ring-duration
+ * @cssprop --md-focus-ring-inward-offset
+ * @cssprop --md-focus-ring-outward-offset
+ * @cssprop --md-focus-ring-shape
+ * @cssprop --md-focus-ring-shape-end-end
+ * @cssprop --md-focus-ring-shape-end-start
+ * @cssprop --md-focus-ring-shape-start-end
+ * @cssprop --md-focus-ring-shape-start-start
+ * @cssprop --md-focus-ring-width
+ */
+let M3FocusRing = class M3FocusRing extends Attachable(InternalsAttached(LitElement)) {
+    constructor() {
+        super();
+        this.inward = false;
+        this.#boundFocusIn = this.#handleFocusIn.bind(this);
+        this.#boundFocusOut = this.#handleFocusOut.bind(this);
+        this.#boundPointerDown = this.#handlePointerDown.bind(this);
+        this[internals].ariaHidden = 'true';
+    }
+    static { this.styles = [focusRingStyles]; }
+    #boundFocusIn;
+    #boundFocusOut;
+    #boundPointerDown;
+    #handleFocusIn() {
+        if (focusVisible)
+            this[internals].states.add('visible');
+        else
+            this[internals].states.delete('visible');
+    }
+    #handleFocusOut() {
+        this[internals].states.delete('visible');
+    }
+    #handlePointerDown() {
+        this[internals].states.delete('visible');
+    }
+    visualFocus() {
+        this.#handleFocusIn();
+    }
+    visualBlur() {
+        this.#handleFocusOut();
+    }
+    handleControlChange(prev = null, next = null) {
+        const eventHandlers = {
+            focusin: this.#boundFocusIn,
+            focusout: this.#boundFocusOut,
+            pointerdown: this.#boundPointerDown,
+        };
+        Object.keys(eventHandlers).forEach((eventName) => {
+            prev?.removeEventListener(eventName, eventHandlers[eventName]);
+            next?.addEventListener(eventName, eventHandlers[eventName]);
+        });
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3FocusRing.prototype, "inward", void 0);
+M3FocusRing = __decorate([
+    customElement('md-focus-ring')
+], M3FocusRing);
+export { M3FocusRing };

package/src/m3/item-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const itemStyles = css `:host{border-radius:inherit;box-sizing:border-box;font:var(--md-sys-typography-body-large);-webkit-user-select:none;user-select:none;flex:1;align-items:center;gap:8px;min-height:48px;padding:0 12px;display:flex;position:relative}[name=container]{border-radius:inherit}[name=container]::slotted(*){position:absolute;inset:0}`;