@vollowx/seele 0.13.9 → 0.14.0

package/src/m3/autocomplete/autocomplete.js

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { Autocomplete } from '../../base/autocomplete.js';
+import '../popup/popup.js';
 import '../menu/menu.js';
 import { autocompleteStyles } from './autocomplete-styles.css.js';
 /**
@@ -10,7 +11,7 @@ import { autocompleteStyles } from './autocomplete-styles.css.js';
 let M3Autocomplete = class M3Autocomplete extends Autocomplete {
     static { this.styles = [autocompleteStyles]; }
     renderMenu() {
-        return html `<md-menu part="menu" id="menu" type="listbox" data-tabindex="-1" ?quick="${this.quick}" .offset="${this.offset}" .align="${this.align}" .alignStrategy="${this.alignStrategy}" ?keep-open-select="${this.keepOpenSelect}" no-focus-control ?open="${this.open}" @open="${() => (this.open = true)}" @close="${() => (this.open = false)}" @select="${this.handleMenuSelect}"><slot @slotchange="${this.handleItemsSlotChange}"></slot></md-menu>`;
+        return html `<md-popup part="popup" role="presentation" no-focus-control quick .open="${this.open}" @toggle="${(e) => (this.open = e.newState === 'open')}"><md-menu part="menu" id="menu" type="listbox" tabindex="-1" @action="${this.handleMenuAction}"><slot @slotchange="${this.handleItemsSlotChange}"></slot></md-menu></md-popup>`;
     }
 };
 M3Autocomplete = __decorate([

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const commonButtonStyles = css`@layer common-button{:host{--_padding:16px;--md-focus-ring-shape:calc(var(--_h) / 2);background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);font:var(--md-sys-typography-label-large);min-width:64px;padding-inline:var(--_padding);transition:box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default), border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);gap:8px}:host([size=xs]){--_padding:12px;gap:4px}:host([size=m]){--_padding:24px;font:var(--md-sys-typography-title-medium);gap:8px}:host([size=l]){--_padding:48px;font:var(--md-sys-typography-headline-small);gap:12px}:host([size=xl]){--_padding:64px;font:var(--md-sys-typography-headline-medium);gap:16px}:host([trailing-icon]){flex-direction:row-reverse}:host([variant=outlined]){padding-inline:calc(var(--_padding) - 1px)}:host([variant=text]){padding-inline:calc(var(--_padding) / 4 * 3)}::slotted([slot=icon]),::slotted([slot=icon-checked]){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}}@layer override{:host([variant=elevated]){--_background-color:var(--md-sys-color-surface-container-low);--_text-color:var(--_color);box-shadow:var(--md-sys-elevation-shadow-1)}@media (hover:hover) and (pointer:fine){:host([variant=filled]:hover:not(:active)),:host([variant=tonal]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-1)}:host([variant=elevated]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-2)}}}`;
+export const commonButtonStyles = css`@layer main{:host{--_padding:16px;--md-focus-ring-shape:calc(var(--_h) / 2);background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);font:var(--md-sys-typography-label-large);min-inline-size:64px;padding-inline:var(--_padding);transition:box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default), border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);justify-content:center;align-items:center;gap:8px;display:inline-flex}:host([size=xs]){--_padding:12px;gap:4px}:host([size=m]){--_padding:24px;font:var(--md-sys-typography-title-medium);gap:8px}:host([size=l]){--_padding:48px;font:var(--md-sys-typography-headline-small);gap:12px}:host([size=xl]){--_padding:64px;font:var(--md-sys-typography-headline-medium);gap:16px}:host([trailing-icon]){flex-direction:row-reverse}:host([variant=outlined]){padding-inline:calc(var(--_padding) - 1px)}:host([variant=text]){padding-inline:calc(var(--_padding) / 4 * 3)}::slotted([slot=icon]),::slotted([slot=icon-checked]){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}}@layer override{:host([variant=elevated]){--_background-color:var(--md-sys-color-surface-container-low);--_text-color:var(--_color);box-shadow:var(--md-sys-elevation-shadow-1)}@media (hover:hover) and (pointer:fine){:host([variant=filled]:hover:not(:active)),:host([variant=tonal]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-1)}:host([variant=elevated]:hover:not(:active)){box-shadow:var(--md-sys-elevation-shadow-2)}}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const iconButtonStyles = css`@layer icon-button{:host{--_wn:32px;--_ww:52px;background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);transition:border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);width:var(--_h)}:host([size=xs]){--_wn:28px;--_ww:40px}:host([size=m]){--_wn:48px;--_ww:72px}:host([size=l]){--_wn:64px;--_ww:128px}:host([size=xl]){--_wn:104px;--_ww:184px}:host([width=narrow]){width:var(--_wn)}:host([width=wide]){width:var(--_ww)}::slotted(*){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}}@layer override{:host([size=small]){--_icon-size:24px}:host([variant=text]){--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=text]:state(checked)){--_text-color:var(--_color)}}`;
+export const iconButtonStyles = css`@layer main{:host{--_wn:32px;--_ww:52px;background-color:color-mix(in srgb, var(--_background-color) var(--_background-opacity,100%), transparent);color:color-mix(in srgb, var(--_text-color) var(--_text-opacity,100%), transparent);transition:border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);inline-size:var(--_h);place-items:center;display:inline-grid}:host([size=xs]){--_wn:28px;--_ww:40px}:host([size=m]){--_wn:48px;--_ww:72px}:host([size=l]){--_wn:64px;--_ww:128px}:host([size=xl]){--_wn:104px;--_ww:184px}:host([width=narrow]){inline-size:var(--_wn)}:host([width=wide]){inline-size:var(--_ww)}::slotted(*){fill:currentColor;block-size:1em;font-size:var(--_icon-size);inline-size:1em}}@layer override{:host([size=small]){--_icon-size:24px}:host([variant=text]){--_text-color:var(--md-sys-color-on-surface-variant)}:host([variant=text]:state(checked)){--_text-color:var(--_color)}}`;

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

@@ -17,7 +17,7 @@ import { sharedButtonToggleStyles } from './shared-button-toggle-styles.css.js';
 let M3IconButtonToggle = class M3IconButtonToggle extends ButtonToggleMixin(M3IconButton) {
     static { this.styles = [...super.styles, sharedButtonToggleStyles]; }
     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>`;
+        return html `<md-focus-ring></md-focus-ring><md-ripple enter-behavior="always"></md-ripple><span part="target"></span><slot part="icon unchecked"></slot><slot part="icon checked" name="checked"></slot>`;
     }
 };
 M3IconButtonToggle = __decorate([

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const sharedButtonStyles = css`@layer common-button,icon-button;@layer shared{:host{--_on-color:var(--md-sys-color-on-primary);--_color:var(--md-sys-color-primary);--_h:40px;--_icon-size:20px;--_rs:12px;--_rp:8px;--_text-color:var(--_on-color);--_background-color:var(--_color);box-sizing:border-box;cursor:pointer;height:var(--_h);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;vertical-align:top;border-start-start-radius:var(--_inner-left-radius,calc(var(--_h) / 2));border-start-end-radius:var(--_inner-right-radius,calc(var(--_h) / 2));border-end-end-radius:var(--_inner-right-radius,calc(var(--_h) / 2));border-end-start-radius:var(--_inner-left-radius,calc(var(--_h) / 2));outline:0;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}:host([notransition]){transition:none!important}md-ripple,md-focus-ring{position:absolute}:host([size=xs]){--_h:32px}:host([size=m]){--_h:56px;--_icon-size:24px;--_rs:16px;--_rp:12px}:host([size=l]){--_h:96px;--_icon-size:32px;--_rs:28px;--_rp:16px}:host([size=xl]){--_h:136px;--_icon-size:40px;--_rs:28px;--_rp:16px}: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(--md-sys-color-outline-variant) 100%, transparent);border-style:solid;border-width:1px;& md-ripple{inset:-1px}}:host([variant=text]){--_text-color:var(--_color);--_background-color:transparent!important}:host([square]){--md-focus-ring-shape:var(--_rs);border-radius:var(--_rs)}@media (forced-colors:active){:host{forced-color-adjust:none;color:buttontext;background:buttonface;border:1px solid buttonborder}}}@layer shared-toggle,override;@layer active{:host(:active),:host(:state(active)){--md-focus-ring-shape:var(--_rp);border-radius:var(--_rp)}}@layer disabled{:host([variant=outlined]:disabled){--_background-color:var(--md-sys-color-outline)}:host(:disabled),: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-color:color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);box-shadow:none;pointer-events:none}@media (forced-colors:active){:host(:disabled){color:graytext;border-color:graytext}}}`;
+export const sharedButtonStyles = css`@layer main;@layer shared{:host{--_on-color:var(--md-sys-color-on-primary);--_color:var(--md-sys-color-primary);--_h:40px;--_icon-size:20px;--_rs:12px;--_rp:8px;--_text-color:var(--_on-color);--_background-color:var(--_color);box-sizing:border-box;cursor:pointer;block-size:var(--_h);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;vertical-align:top;border-start-start-radius:var(--_inner-left-radius,calc(var(--_h) / 2));border-start-end-radius:var(--_inner-right-radius,calc(var(--_h) / 2));border-end-end-radius:var(--_inner-right-radius,calc(var(--_h) / 2));border-end-start-radius:var(--_inner-left-radius,calc(var(--_h) / 2));outline:0;flex-shrink:0;position:relative}:host([notransition]){transition:none!important}md-ripple,md-focus-ring{position:absolute}:host([size=xs]){--_h:32px}:host([size=m]){--_h:56px;--_icon-size:24px;--_rs:16px;--_rp:12px}:host([size=l]){--_h:96px;--_icon-size:32px;--_rs:28px;--_rp:16px}:host([size=xl]){--_h:136px;--_icon-size:40px;--_rs:28px;--_rp:16px}: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(--md-sys-color-outline-variant) 100%, transparent);border-style:solid;border-width:1px;& md-ripple{inset:-1px}}:host([variant=text]){--_text-color:var(--_color);--_background-color:transparent!important}:host([square]){--md-focus-ring-shape:var(--_rs);border-radius:var(--_rs)}@media (forced-colors:active){:host{forced-color-adjust:none;color:buttontext;background:buttonface;border:1px solid buttonborder}}}@layer shared-toggle,override;@layer active{:host(:active),:host(:state(active)){--md-focus-ring-shape:var(--_rp);border-radius:var(--_rp)}}@layer disabled{:host([variant=outlined]:disabled){--_background-color:var(--md-sys-color-outline)}:host(:disabled),: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-color:color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);box-shadow:none;pointer-events:none}@media (forced-colors:active){:host(:disabled){color:graytext;border-color:graytext}}}`;

package/src/m3/button-group/standard-button-group.js

@@ -66,7 +66,7 @@ let M3StandardButtonGroup = class M3StandardButtonGroup extends LitElement {
             entries.forEach((entry) => {
                 const target = entry.target;
                 const index = this.$buttons.indexOf(target);
-                if (index !== -1) {
+                if (index !== -1) { // TODO: support for vertical languages?
                     const currentWidth = target.style.width;
                     target.style.width = '';
                     this.#baseWidths[index] = target.getBoundingClientRect().width;

package/src/m3/checkbox/checkbox.js

@@ -21,7 +21,7 @@ let M3Checkbox = class M3Checkbox extends Checkbox {
     }
     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()}`;
+        return html `<md-focus-ring></md-focus-ring><md-ripple enter-behavior="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>`;

package/src/m3/dialog/dialog.d.ts

@@ -38,8 +38,8 @@ export declare class M3Dialog extends Dialog {
     static styles: any[];
     render(): import("lit-html").TemplateResult<1>;
     firstUpdated(): Promise<void>;
-    show(): void;
-    close(): void;
+    show(): Promise<void>;
+    close(): Promise<void>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/dialog/dialog.js

@@ -66,7 +66,7 @@ let M3Dialog = class M3Dialog extends Dialog {
     #handleClick;
     #handleIconSlotChange;
     #opening;
-    show() {
+    async show() {
         if (this.#opening)
             return;
         this.#clearAnimations();
@@ -117,7 +117,7 @@ let M3Dialog = class M3Dialog extends Dialog {
         };
     }
     #closing;
-    close() {
+    async close() {
         if (this.#closing)
             return;
         this.#clearAnimations();

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const fieldStyles = css`:host{--_min-height:56px;--_padding-top:16px;--_padding-bottom:16px;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;min-height:var(--_min-height);flex:1;align-items:center;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-effects-default-duration) var(--md-sys-motion-effects-default), font-size var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);white-space:nowrap}.input-wrapper{padding-block:var(--_padding-top) var(--_padding-bottom);flex:1;align-items:center;display:flex}:host([haslabel]:not([focused]):not([populated])) ::slotted(input:placeholder-shown),:host([haslabel]:not([focused]):not([populated])) ::slotted(textarea:placeholder-shown){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)}@media (forced-colors:active){:host{--md-sys-color-primary:Highlight;--md-sys-color-error:VisitedText}}`;
+export const fieldStyles = css`:host{--_min-height:56px;--_padding-top:16px;--_padding-bottom:16px;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;min-height:var(--_min-height);flex:1;align-items:center;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-effects-default-duration) var(--md-sys-motion-effects-default), font-size var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default);white-space:nowrap}.input-wrapper{padding-block:var(--_padding-top) var(--_padding-bottom);flex:1;align-items:center;display:flex}:host([has-label]:not([focused]):not([populated])) ::slotted(input:placeholder-shown),:host([has-label]:not([focused]):not([populated])) ::slotted(textarea:placeholder-shown){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)}@media (forced-colors:active){:host{--md-sys-color-primary:Highlight;--md-sys-color-error:VisitedText}}`;

package/src/m3/field/field.js

@@ -55,7 +55,7 @@ __decorate([
     property({ type: String, reflect: true })
 ], M3Field.prototype, "label", void 0);
 __decorate([
-    property({ type: String, reflect: true })
+    property({ type: String, reflect: true, attribute: 'supporting-text' })
 ], M3Field.prototype, "supportingText", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -70,7 +70,7 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], M3Field.prototype, "populated", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
+    property({ type: Boolean, reflect: true, attribute: 'has-label' })
 ], M3Field.prototype, "hasLabel", void 0);
 __decorate([
     state()

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

@@ -1,2 +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-effects-fast-duration) var(--md-sys-motion-effects-fast);border-radius:4px 4px 0 0;padding:0 16px}:host([haslabel]){--_padding-top:24px;--_padding-bottom:8px}.label{color:var(--md-sys-color-on-surface-variant);margin-top:calc((var(--_padding-top) + var(--_padding-bottom)) / 2);position:absolute;top: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:calc(var(--_padding-top) / 2 - .75em);font-size:.75em}: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)}@media (forced-colors:active){:host{--md-sys-color-primary:Highlight;outline:1px solid canvastext}:host([focused]){outline-color:highlight}}`;
+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-effects-fast-duration) var(--md-sys-motion-effects-fast);border-radius:4px 4px 0 0;padding:0 16px}:host([has-label]){--_padding-top:24px;--_padding-bottom:8px}.label{color:var(--md-sys-color-on-surface-variant);margin-top:calc((var(--_padding-top) + var(--_padding-bottom)) / 2);position:absolute;top: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:calc(var(--_padding-top) / 2 - .75em);font-size:.75em}: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)}@media (forced-colors:active){:host{--md-sys-color-primary:Highlight;outline:1px solid canvastext}:host([focused]){outline-color:highlight}}`;

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

@@ -7,7 +7,7 @@ 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()}`;
+        return html `<md-ripple click-behavior="none" enter-behavior="none" space-behavior="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([

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

@@ -1,2 +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-effects-fast-duration) var(--md-sys-motion-effects-fast), border-top-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast)}.outline-start{border-radius:inherit;border-inline-end:none;border-start-end-radius:0;border-end-end-radius:0;width:12px}.outline-end{border-radius:inherit;border-inline-start:none;border-start-start-radius:0;border-end-start-radius:0;flex:1}.outline-notch{border-inline: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:calc(var(--_padding-top) - 1px)}: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:calc(-.75em - 3px);font-size:.75em}:host([disabled]) .outline{color:var(--md-sys-color-outline-variant)}:host([disabled]) .label{color:var(--md-sys-color-on-surface-variant)}`;
+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-effects-fast-duration) var(--md-sys-motion-effects-fast), border-top-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast)}.outline-start{border-radius:inherit;border-inline-end:none;border-start-end-radius:0;border-end-end-radius:0;width:12px}.outline-end{border-radius:inherit;border-inline-start:none;border-start-start-radius:0;border-end-start-radius:0;flex:1}.outline-notch{border-inline:none;align-items:flex-start;max-width:calc(100% - 24px);margin-top:0;padding:0 4px;display:flex}:host(:not([has-label])) .outline-notch{display:none}.label{margin-top:calc(var(--_padding-top) - 1px)}: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:calc(-.75em - 3px);font-size:.75em}:host([disabled]) .outline{color:var(--md-sys-color-outline-variant)}:host([disabled]) .label{color:var(--md-sys-color-on-surface-variant)}`;

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

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { customElement } from '../../core/decorators.js';
-import { focusVisible } from '../../core/focus-visible.js';
+import { focusVisible } from '../../core/focus.js';
 import { Attachable, handleControlChange } from '../../base/mixins/attachable.js';
 import { InternalsAttached, internals, replaceStates, } from '../../base/mixins/internals-attached.js';
 import { focusRingStyles } from './focus-ring-styles.css.js';

package/src/m3/list/list-item.d.ts

@@ -10,8 +10,8 @@ import type { M3FocusRing } from '../focus-ring/focus-ring.js';
  * @slot - contents in md-item
  */
 export declare class M3ListItem extends ListItem {
-    ripple: M3Ripple;
-    focusRing: M3FocusRing;
+    $ripple: M3Ripple;
+    $focusRing: M3FocusRing;
     static styles: any[];
     render(): import("lit-html").TemplateResult<1>;
     constructor();

package/src/m3/list/list-item.js

@@ -19,28 +19,28 @@ let M3ListItem = class M3ListItem extends ListItem {
     constructor() {
         super();
         this.updateComplete.then(() => {
-            this.ripple.$control = this;
-            this.focusRing.$control = this;
+            this.$ripple.$control = this;
+            this.$focusRing.$control = this;
         });
     }
     updated(changed) {
         super.updated(changed);
         if (changed.has('focused')) {
             if (this.focused) {
-                this.focusRing.visualFocus();
+                this.$focusRing.visualFocus();
             }
             else {
-                this.focusRing.visualBlur();
+                this.$focusRing.visualBlur();
             }
         }
     }
 };
 __decorate([
     query('md-ripple')
-], M3ListItem.prototype, "ripple", void 0);
+], M3ListItem.prototype, "$ripple", void 0);
 __decorate([
     query('md-focus-ring')
-], M3ListItem.prototype, "focusRing", void 0);
+], M3ListItem.prototype, "$focusRing", void 0);
 M3ListItem = __decorate([
     customElement('md-list-item')
 ], M3ListItem);

package/src/m3/menu/composed-menu.d.ts

@@ -0,0 +1,19 @@
+import { handleControlChange } from '../../base/mixins/attachable.js';
+import { Popup } from '../../base/popup.js';
+import { M3Menu } from './menu.js';
+/**
+ * TODO: consider adding ariaLabel that is passed to the menu
+ */
+export declare class M3ComposedMenu extends Popup {
+    vibrant: boolean;
+    $menu: M3Menu;
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    constructor();
+    [handleControlChange](prev: HTMLElement | null, next: HTMLElement | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-composed-menu': M3ComposedMenu;
+    }
+}

package/src/m3/menu/composed-menu.js

@@ -0,0 +1,42 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { property, customElement, query } from 'lit/decorators.js';
+import { ensureReady } from '../../core/ensure-ready.js';
+import { internals } from '../../base/mixins/internals-attached.js';
+import { handleControlChange } from '../../base/mixins/attachable.js';
+import { Popup } from '../../base/popup.js';
+import { popupStyles } from '../popup/popup-styles.css.js';
+/**
+ * TODO: consider adding ariaLabel that is passed to the menu
+ */
+let M3ComposedMenu = class M3ComposedMenu extends Popup {
+    static { this.styles = [...super.styles, popupStyles]; }
+    render() {
+        return html `<md-menu><slot></slot></md-menu>`;
+    }
+    constructor() {
+        super();
+        this.vibrant = false;
+        this[internals].role = 'application';
+    }
+    [handleControlChange](prev, next) {
+        if (next) {
+            next.ariaHasPopup = 'menu';
+            ensureReady(this.$menu).then(() => {
+                next.ariaControlsElements = [this.$menu];
+                this.$menu[internals].ariaLabelledByElements = [this.$control];
+            });
+        }
+        super[handleControlChange](prev, next);
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3ComposedMenu.prototype, "vibrant", void 0);
+__decorate([
+    query('md-menu')
+], M3ComposedMenu.prototype, "$menu", void 0);
+M3ComposedMenu = __decorate([
+    customElement('md-composed-menu')
+], M3ComposedMenu);
+export { M3ComposedMenu };

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const menuStyles = css`:host{min-width:112px;display:contents}[part=menu]{background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);box-sizing:border-box;color:var(--md-sys-color-on-surface);height:inherit;max-height:var(--md-menu-max-height,inherit);max-width:inherit;min-width:inherit;opacity:0;-webkit-user-select:none;user-select:none;z-index:1000;border-radius:16px;outline:0;padding:4px;position:absolute;inset:auto;overflow-y:auto;transform:scaleY(.35)}:host([color=vibrant]){& [part=menu]{--md-divider-color:var(--md-sys-color-tertiary);--md-item-supporting-text-color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}& ::slotted([selected]){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary);background-color:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}}:host([alignstrategy=fixed]) [part=menu]{position:fixed}[part=items]{opacity:0;flex-direction:column;gap:2px;display:flex}:host(:state(closed)) [part=menu]{display:none}:host(:state(opening)){& [part=menu]{opacity:1;transition:opacity 67ms, transform var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);display:block;transform:scaleY(1)}& [part=items]{opacity:1;transition:opacity 67ms linear 67ms}}:host(:state(opened)){& [part=menu]{opacity:1;display:block;transform:scaleY(1)}& [part=items]{opacity:1}}:host(:state(closing)){& [part=menu]{opacity:0;transition:opacity var(--md-sys-motion-effects-fast-duration), transform var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);transform:scaleY(.35)}& [part=items]{opacity:0;transition:opacity 67ms}}::slotted(md-divider){margin-block:6px}@media (forced-colors:active){[part=menu]{border:1px solid canvastext}}`;
+export const menuStyles = css`:host{box-sizing:border-box;height:inherit;max-height:300px;width:inherit;-webkit-user-select:none;user-select:none;outline:0;padding:4px;scroll-padding-block:4px;display:block;overflow-y:auto}[part=items]{flex-direction:column;gap:2px;display:flex}::slotted(md-divider){margin-block:6px}@media (forced-colors:active){:host{border:1px solid canvastext}}`;

package/src/m3/menu/menu.d.ts

@@ -2,17 +2,11 @@ import { Menu } from '../../base/menu.js';
 /**
  * @tag md-menu
  *
- * @csspart menu-surface
- * @csspart list
+ * @csspart items
  *
  * @slot - menu items
  */
 export declare class M3Menu extends Menu {
-    readonly _durations: {
-        show: number;
-        hide: number;
-    };
-    color: 'standard' | 'vibrant';
     static styles: any[];
 }
 declare global {

package/src/m3/menu/menu.js

@@ -1,29 +1,17 @@
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { property } from 'lit/decorators.js';
 import { Menu } from '../../base/menu.js';
 import { menuStyles } from './menu-styles.css.js';
 /**
  * @tag md-menu
  *
- * @csspart menu-surface
- * @csspart list
+ * @csspart items
  *
  * @slot - menu items
  */
 let M3Menu = class M3Menu extends Menu {
-    constructor() {
-        super(...arguments);
-        this._durations = { show: 300, hide: 150 };
-        // FIXME: Might cause a long list to scroll more than expected
-        // override readonly _scrollPadding = 4;
-        this.color = 'standard';
-    }
     static { this.styles = [menuStyles]; }
 };
-__decorate([
-    property({ reflect: true })
-], M3Menu.prototype, "color", void 0);
 M3Menu = __decorate([
     customElement('md-menu')
 ], M3Menu);

package/src/m3/{nagivation → navigation}/navigation-rail-item-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const navigationRailItemStyles = css`:host{color:var(--md-sys-color-on-surface-variant);cursor:pointer;outline:0;grid-template-rows:40px 1fr;justify-content:flex-start;width:max-content;display:grid;position:relative}.pill-root{grid-template:".start icon.label end."32px/20px 16px 24px 0 0fr 16px 20px;place-self:center;display:grid;position:relative}.pill{border-radius:9999px;grid-area:1/start-start/auto/end-end;position:relative}::slotted(*){fill:currentColor;place-self:center;block-size:1em;inline-size:1em;font-size:24px;position:absolute}::slotted([slot=active]){opacity:0}.label-inside{font:var(--md-sys-typography-label-large);display:none}.label-outside{font:var(--md-sys-typography-label-medium);pointer-events:none;text-align:center;word-break:break-word;grid-template-rows:1fr;width:96px;display:block;overflow:hidden}:host([active]){& .pill{color:var(--md-sys-color-on-secondary-container)}& md-ripple{background-color:var(--md-sys-color-secondary-container)}&::slotted([slot=active]){opacity:1}&::slotted(:not([slot=active])){opacity:0}& .label-outside{color:var(--md-sys-color-secondary)}}`;
+export const navigationRailItemStyles = css`:host{color:var(--md-sys-color-on-surface-variant);cursor:pointer;outline:0;grid-template-rows:40px 1fr;justify-content:flex-start;width:max-content;display:grid;position:relative}.pill-root{grid-template:".start icon.label end."32px/20px 16px 24px 0 0fr 16px 20px;place-self:center;display:grid;position:relative}.pill{border-radius:9999px;grid-area:1/start-start/auto/end-end;position:relative}::slotted(*){fill:currentColor;place-self:center;block-size:1em;inline-size:1em;font-size:24px;position:absolute}::slotted([slot=active]){opacity:0}.label-inside{font:var(--md-sys-typography-label-large);display:none}.label-outside{font:var(--md-sys-typography-label-medium);pointer-events:none;text-align:center;word-break:break-word;grid-template-rows:1fr;width:96px;display:block;overflow:hidden}:host([active]){& .pill{color:var(--md-sys-color-on-secondary-container)}& md-ripple{background-color:var(--md-sys-color-secondary-container)}& ::slotted([slot=active]){opacity:1}& ::slotted(:not([slot=active])){opacity:0}& .label-outside{color:var(--md-sys-color-secondary)}}`;

package/src/m3/{nagivation → navigation}/navigation-rail-item.js

@@ -13,7 +13,7 @@ let M3NavigationRailItem = class M3NavigationRailItem extends Button {
     }
     static { this.styles = [navigationRailItemStyles]; }
     render() {
-        return html `<div class="pill-root"><div class="pill"><md-focus-ring></md-focus-ring><md-ripple></md-ripple></div><slot></slot><slot name="active"></slot><span class="label-inside">${this.label}</span></div><span class="label-outside">${this.label}</span>`;
+        return html `<div class="pill-root"><div class="pill"><md-focus-ring></md-focus-ring><md-ripple></md-ripple></div><slot aria-hidden="true"></slot><slot aria-hidden="true" name="active"></slot><span class="label-inside">${this.label}</span></div><span class="label-outside">${this.label}</span>`;
     }
     updated(changed) {
         if (changed.has('label'))

package/src/m3/navigation/navigation-rail-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const navigationRailStyles = css`:host{background-color:var(--md-sys-color-surface-container);box-sizing:border-box;-webkit-user-select:none;user-select:none;z-index:10;flex-shrink:0;grid-template-rows:min-content auto;justify-content:space-between;gap:40px;width:96px;height:100%;padding-block:20px;display:grid;overflow:visible}.actions{z-index:10;place-self:center;display:grid;position:sticky;top:-44px}::slotted(md-fab){box-shadow:none}.items{grid-template-areas:"stack";display:grid}slot:not([name]){flex-direction:column;grid-area:stack;gap:8px;padding:0;list-style:none;display:flex;position:relative}::slotted([end]){margin-block-start:auto}`;

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const popupStyles = css`:host{--_fast:var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);--_d:var(--md-sys-motion-spatial-default-duration);--_default:var(--_d) var(--md-sys-motion-spatial-default);background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);color:var(--md-sys-color-on-surface);opacity:0;transition:opacity var(--md-sys-motion-effects-fast-duration), transform var(--_fast), border-radius var(--_fast), display var(--_d) allow-discrete, overlay var(--_d) allow-discrete;border-radius:16px/46px;transform:scaleY(.35)}:host([strategy=fixed]){position:fixed}:host([vibrant]){--md-divider-color:var(--md-sys-color-tertiary);--md-item-supporting-text-color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);& ::slotted([selected]){--md-item-supporting-text-color:var(--md-sys-color-on-tertiary);background-color:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}}slot{opacity:0;transition:opacity 67ms;display:block}:host(:popover-open){opacity:1;transition:opacity 67ms linear, transform var(--_default), border-radius var(--_default);border-radius:16px;transform:scaleY(1);& slot{opacity:1;transition:opacity 67ms linear 67ms}}@starting-style{:host(:popover-open){opacity:0;border-radius:16px/46px;transform:scaleY(.35);& slot{opacity:0}}}`;

package/src/m3/{experimental → popup}/popup.d.ts

@@ -1,5 +1,6 @@
-import { Popup } from '../../base/experimental/popup.js';
+import { Popup } from '../../base/popup.js';
 export declare class M3Popup extends Popup {
+    vibrant: boolean;
     static styles: any[];
 }
 declare global {

package/src/m3/popup/popup.js

@@ -0,0 +1,18 @@
+import { __decorate } from "tslib";
+import { property, customElement } from 'lit/decorators.js';
+import { Popup } from '../../base/popup.js';
+import { popupStyles } from './popup-styles.css.js';
+let M3Popup = class M3Popup extends Popup {
+    constructor() {
+        super(...arguments);
+        this.vibrant = false;
+    }
+    static { this.styles = [...super.styles, popupStyles]; }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], M3Popup.prototype, "vibrant", void 0);
+M3Popup = __decorate([
+    customElement('md-popup')
+], M3Popup);
+export { M3Popup };

package/src/m3/radio/radio.js

@@ -14,7 +14,7 @@ import { radioStyles } from './radio-styles.css.js';
 let M3Radio = class M3Radio extends Radio {
     static { this.styles = [targetStyles, radioStyles]; }
     render() {
-        return html `<md-focus-ring></md-focus-ring><md-ripple enterbehavior="none"></md-ripple><span part="target"></span> <svg class="icon" viewBox="0 0 20 20" aria-hidden="true"><circle class="ring" cx="10" cy="10" r="9"/><circle class="dot" cx="10" cy="10" r="0"/></svg>`;
+        return html `<md-focus-ring></md-focus-ring><md-ripple enter-behavior="none"></md-ripple><span part="target"></span> <svg class="icon" viewBox="0 0 20 20" aria-hidden="true"><circle class="ring" cx="10" cy="10" r="9"/><circle class="dot" cx="10" cy="10" r="0"/></svg>`;
     }
     firstUpdated() {
         // SSR'd <md-radio> components don't have their labels set up on time

package/src/m3/ripple/ripple.js

@@ -177,13 +177,13 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
     }
 };
 __decorate([
-    property()
+    property({ attribute: 'click-behavior' })
 ], M3Ripple.prototype, "clickBehavior", void 0);
 __decorate([
-    property()
+    property({ attribute: 'enter-behavior' })
 ], M3Ripple.prototype, "enterBehavior", void 0);
 __decorate([
-    property()
+    property({ attribute: 'space-behavior' })
 ], M3Ripple.prototype, "spaceBehavior", void 0);
 M3Ripple = __decorate([
     customElement('md-ripple', false)

package/src/m3/select/filled-select.d.ts

@@ -5,12 +5,12 @@ import '../field/filled-field.js';
  *
  * @slot - options
  */
-export declare class MdFilledSelect extends M3Select {
+export declare class M3FilledSelect extends M3Select {
     static styles: any[];
     protected renderField(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'md-filled-select': MdFilledSelect;
+        'md-filled-select': M3FilledSelect;
     }
 }

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

@@ -9,13 +9,13 @@ import { selectStyles } from './select-styles.css.js';
  *
  * @slot - options
  */
-let MdFilledSelect = class MdFilledSelect extends M3Select {
+let M3FilledSelect = class M3FilledSelect extends M3Select {
     static { this.styles = [selectStyles]; }
     renderField() {
-        return html `<md-filled-field id="field" part="field" .label="${this.label}" .populated="${!!this.value}" .disabled="${this.disabled}" .required="${this.required}" .error="${this.error}" .focused="${this.open || this.focused}" supportingtext="${this.supportingText}" @click="${this.toggle}" @keydown="${this._handleFieldKeydown}" @focus="${() => (this.focused = true)}" @blur="${() => (this.focused = false)}" tabindex="${this.disabled ? '-1' : '0'}" role="combobox" aria-haspopup="listbox" aria-expanded="${this.open}" aria-controls="menu" aria-disabled="${this.disabled}" aria-required="${this.required}">${this.renderFieldContent()}</md-filled-field>`;
+        return html `<md-filled-field id="field" part="field" .label="${this.label}" .populated="${!!this.value}" .disabled="${this.disabled}" .required="${this.required}" .error="${this.error}" .focused="${this.open || this.focused}" supporting-text="${this.supportingText}" @keydown="${this._handleFieldKeydown}" @focus="${() => (this.focused = true)}" @blur="${() => (this.focused = false)}" tabindex="${this.disabled ? '-1' : '0'}" role="combobox" aria-haspopup="listbox" aria-controls="menu" aria-disabled="${this.disabled}" aria-required="${this.required}">${this.renderFieldContent()}</md-filled-field>`;
     }
 };
-MdFilledSelect = __decorate([
+M3FilledSelect = __decorate([
     customElement('md-filled-select')
-], MdFilledSelect);
-export { MdFilledSelect };
+], M3FilledSelect);
+export { M3FilledSelect };

package/src/m3/select/outlined-select.d.ts

@@ -5,12 +5,12 @@ import '../field/outlined-field.js';
  *
  * @slot - options
  */
-export declare class MdOutlinedSelect extends M3Select {
+export declare class M3OutlinedSelect extends M3Select {
     static styles: any[];
     protected renderField(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'md-outlined-select': MdOutlinedSelect;
+        'md-outlined-select': M3OutlinedSelect;
     }
 }

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

@@ -9,13 +9,13 @@ import { selectStyles } from './select-styles.css.js';
  *
  * @slot - options
  */
-let MdOutlinedSelect = class MdOutlinedSelect extends M3Select {
+let M3OutlinedSelect = class M3OutlinedSelect extends M3Select {
     static { this.styles = [selectStyles]; }
     renderField() {
-        return html `<md-outlined-field id="field" part="field" .label="${this.label}" .populated="${!!this.value}" .disabled="${this.disabled}" .required="${this.required}" .error="${this.error}" .focused="${this.open || this.focused}" supportingtext="${this.supportingText}" @click="${this.toggle}" @keydown="${this._handleFieldKeydown}" @focus="${() => (this.focused = true)}" @blur="${() => (this.focused = false)}" tabindex="${this.disabled ? '-1' : '0'}" role="combobox" aria-haspopup="listbox" aria-expanded="${this.open}" aria-controls="menu" aria-disabled="${this.disabled}" aria-required="${this.required}">${this.renderFieldContent()}</md-outlined-field>`;
+        return html `<md-outlined-field id="field" part="field" .label="${this.label}" .populated="${!!this.value}" .disabled="${this.disabled}" .required="${this.required}" .error="${this.error}" .focused="${this.open || this.focused}" supporting-text="${this.supportingText}" @keydown="${this._handleFieldKeydown}" @focus="${() => (this.focused = true)}" @blur="${() => (this.focused = false)}" tabindex="${this.disabled ? '-1' : '0'}" role="combobox" aria-haspopup="listbox" aria-controls="menu" aria-disabled="${this.disabled}" aria-required="${this.required}">${this.renderFieldContent()}</md-outlined-field>`;
     }
 };
-MdOutlinedSelect = __decorate([
+M3OutlinedSelect = __decorate([
     customElement('md-outlined-select')
-], MdOutlinedSelect);
-export { MdOutlinedSelect };
+], M3OutlinedSelect);
+export { M3OutlinedSelect };

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const selectStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block;position:relative}[part=field]{cursor:pointer;outline:none;width:100%}[part=value]{font:var(--md-sys-typography-body-large);height:1.5em}[part=menu]{--md-menu-max-height:300px;min-width:100%}`;
+export const selectStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block;position:relative}[part=field]{cursor:pointer;outline:none;width:100%}[part=value]{font:var(--md-sys-typography-body-large);height:1.5em}[part=popup]{--md-menu-max-height:300px;min-width:inherit}`;

package/src/m3/select/select.d.ts

@@ -1,10 +1,7 @@
+import '../popup/popup.js';
 import '../menu/menu.js';
 import { Select } from '../../base/select.js';
-import { M3Field } from '../field/field.js';
-/**
- * @fires {Event} change - Fired when the selected value has changed.
- * @fires {Event} input - Fired when the selected value has changed.
- */
+import type { M3Field } from '../field/field.js';
 export declare abstract class M3Select extends Select {
     label: string;
     supportingText: string;

package/src/m3/select/select.js

@@ -1,12 +1,9 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import '../popup/popup.js';
 import '../menu/menu.js';
 import { Select } from '../../base/select.js';
-/**
- * @fires {Event} change - Fired when the selected value has changed.
- * @fires {Event} input - Fired when the selected value has changed.
- */
 export class M3Select extends Select {
     constructor() {
         super(...arguments);
@@ -15,14 +12,14 @@ export class M3Select extends Select {
         this.focused = false;
     }
     renderMenu() {
-        return html `<md-menu part="menu" id="menu" for="field" type="listbox" data-tabindex="-1" ?quick="${this.quick}" offset="${this.offset}" align="${this.align}" align-strategy="${this.alignStrategy}" keep-open-blur no-focus-control ?open="${this.open}" @open="${() => (this.open = true)}" @close="${() => (this.open = false)}" @item-focus="${this._handleMenuItemFocus}" @select="${this._handleMenuSelect}"><slot part="items" @slotchange="${this._handleSlotChange}"></slot></md-menu>`;
+        return html `<md-popup part="popup" role="presentation" for="field" no-focus-control .open="${this.open}" @toggle="${(e) => (this.open = e.newState === 'open')}"><md-menu id="menu" part="menu" role="listbox" tabindex="-1" bare @item-focus="${this._handleMenuItemFocus}" @action="${this._handleMenuAction}"><slot @slotchange="${this._handleSlotChange}"></slot></md-menu></md-popup>`;
     }
 }
 __decorate([
     property({ type: String })
 ], M3Select.prototype, "label", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, attribute: 'supporting-text' })
 ], M3Select.prototype, "supportingText", void 0);
 __decorate([
     state()

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const switchStyles = css`:host{--_outline-color:var(--md-sys-color-outline);--_track-color:var(--md-sys-color-surface-container-highest);--_thumb-color:var(--md-sys-color-outline);--_icon-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-on-surface);background-color:color-mix(in srgb, var(--_track-color) var(--_track-opacity,100%), transparent);border-color:color-mix(in srgb, var(--_outline-color) var(--_outline-opacity,100%), transparent);box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;height:32px;transition:background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), border-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);-webkit-user-select:none;user-select:none;vertical-align:top;border-style:solid;border-width:2px;border-radius:9999px;outline:0;place-content:center;place-items:center;width:52px;display:inline-grid;position:relative}:host(:state(checked)){--_outline-color:var(--md-sys-color-primary);--_track-color:var(--md-sys-color-primary);--_thumb-color:var(--md-sys-color-on-primary);--_icon-color:var(--md-sys-color-on-primary-container);--_ripple-color:var(--md-sys-color-primary)}:host(:disabled){--_outline-color:var(--md-sys-color-on-surface);--_outline-opacity:12%;--_track-color:var(--md-sys-color-surface-variant);--_track-opacity:12%;--_thumb-color:var(--md-sys-color-on-surface);--_thumb-opacity:38%;--_icon-color:var(--md-sys-color-surface-container-highest);cursor:default;pointer-events:none}:host(:disabled:state(checked)){--_outline-color:var(--md-sys-color-surface);--_track-color:var(--md-sys-color-on-surface);--_thumb-color:var(--md-sys-color-surface);--_thumb-opacity:100%;--_icon-color:var(--md-sys-color-on-surface)}:host([icons]:not(:state(checked)):not([checkedicononly])) [part~=icon-off],:host([icons]:state(checked)) [part~=icon-on]{--_icon-opacity:100%}:host([icons]:state(checked):disabled) [part~=icon-on]{--_icon-opacity:38%}@media (hover:hover) and (pointer:fine){:host(:hover){--_thumb-color:var(--md-sys-color-on-surface-variant)}:host(:state(checked):hover){--_thumb-color:var(--md-sys-color-primary-container)}}@media (forced-colors:active){:host{forced-color-adjust:none}}[part~=thumb]{--_thumb-diameter:16px;--_thumb-diff-default:20px;background-color:color-mix(in srgb, var(--_thumb-color) var(--_thumb-opacity,100%), transparent);height:var(--_thumb-diameter);transition:background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), width var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), height var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), margin var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);width:var(--_thumb-diameter);z-index:1;border-radius:50%;place-content:center;place-items:center;margin-inline-start:calc(var(--_thumb-diff-pointer,0px) - var(--_thumb-diff-default));display:grid;position:absolute}:host(:state(checked)) [part~=thumb]{--_thumb-diameter:24px;--_thumb-diff-default:-20px;background-color:var(--_thumb-color)}:host([icons]:not([checkedicononly])) [part~=thumb]{--_thumb-diameter:24px}:host(:active) [part~=thumb]{--_thumb-color:var(--md-sys-color-on-surface-variant);--_thumb-diameter:28px!important}:host(:state(checked):active) [part~=thumb]{--_thumb-color:var(--md-sys-color-primary-container)}[part~=icons]{fill:color-mix(in srgb, var(--_icon-color) var(--_icon-opacity,0%), transparent);width:16px;height:16px;transition:fill 67ms linear;position:absolute}md-focus-ring{inset:-4px}md-ripple{color:var(--_ripple-color);height:40px;inset:unset;width:40px}@media (forced-colors:active){:host{--md-sys-color-primary:SelectedItem;--md-sys-color-primary-container:SelectedItemText;--md-sys-color-on-primary:SelectedItemText}}`;
+export const switchStyles = css`:host{--_outline-color:var(--md-sys-color-outline);--_track-color:var(--md-sys-color-surface-container-highest);--_thumb-color:var(--md-sys-color-outline);--_icon-color:var(--md-sys-color-surface-container-highest);--_ripple-color:var(--md-sys-color-on-surface);background-color:color-mix(in srgb, var(--_track-color) var(--_track-opacity,100%), transparent);border-color:color-mix(in srgb, var(--_outline-color) var(--_outline-opacity,100%), transparent);box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;height:32px;transition:background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), border-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);-webkit-user-select:none;user-select:none;vertical-align:top;border-style:solid;border-width:2px;border-radius:9999px;outline:0;place-content:center;place-items:center;width:52px;display:inline-grid;position:relative}:host(:state(checked)){--_outline-color:var(--md-sys-color-primary);--_track-color:var(--md-sys-color-primary);--_thumb-color:var(--md-sys-color-on-primary);--_icon-color:var(--md-sys-color-on-primary-container);--_ripple-color:var(--md-sys-color-primary)}:host(:disabled){--_outline-color:var(--md-sys-color-on-surface);--_outline-opacity:12%;--_track-color:var(--md-sys-color-surface-variant);--_track-opacity:12%;--_thumb-color:var(--md-sys-color-on-surface);--_thumb-opacity:38%;--_icon-color:var(--md-sys-color-surface-container-highest);cursor:default;pointer-events:none}:host(:disabled:state(checked)){--_outline-color:var(--md-sys-color-surface);--_track-color:var(--md-sys-color-on-surface);--_thumb-color:var(--md-sys-color-surface);--_thumb-opacity:100%;--_icon-color:var(--md-sys-color-on-surface)}:host([icons]:not(:state(checked)):not([checked-icon-only])) [part~=icon-off],:host([icons]:state(checked)) [part~=icon-on]{--_icon-opacity:100%}:host([icons]:state(checked):disabled) [part~=icon-on]{--_icon-opacity:38%}@media (hover:hover) and (pointer:fine){:host(:hover){--_thumb-color:var(--md-sys-color-on-surface-variant)}:host(:state(checked):hover){--_thumb-color:var(--md-sys-color-primary-container)}}@media (forced-colors:active){:host{forced-color-adjust:none}}[part~=thumb]{--_thumb-diameter:16px;--_thumb-diff-default:20px;background-color:color-mix(in srgb, var(--_thumb-color) var(--_thumb-opacity,100%), transparent);height:var(--_thumb-diameter);transition:background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), width var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), height var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), margin var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);width:var(--_thumb-diameter);z-index:1;border-radius:50%;place-content:center;place-items:center;margin-inline-start:calc(var(--_thumb-diff-pointer,0px) - var(--_thumb-diff-default));display:grid;position:absolute}:host(:state(checked)) [part~=thumb]{--_thumb-diameter:24px;--_thumb-diff-default:-20px;background-color:var(--_thumb-color)}:host([icons]:not([checked-icon-only])) [part~=thumb]{--_thumb-diameter:24px}:host(:active) [part~=thumb]{--_thumb-color:var(--md-sys-color-on-surface-variant);--_thumb-diameter:28px!important}:host(:state(checked):active) [part~=thumb]{--_thumb-color:var(--md-sys-color-primary-container)}[part~=icons]{fill:color-mix(in srgb, var(--_icon-color) var(--_icon-opacity,0%), transparent);width:16px;height:16px;transition:fill 67ms linear;position:absolute}md-focus-ring{inset:-4px}md-ripple{color:var(--_ripple-color);height:40px;inset:unset;width:40px}@media (forced-colors:active){:host{--md-sys-color-primary:SelectedItem;--md-sys-color-primary-container:SelectedItemText;--md-sys-color-on-primary:SelectedItemText}}`;

package/src/m3/switch/switch.js

@@ -90,7 +90,7 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], M3Switch.prototype, "icons", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
+    property({ type: Boolean, reflect: true, attribute: 'checked-icon-only' })
 ], M3Switch.prototype, "checkedIconOnly", void 0);
 __decorate([
     query('md-ripple')