@vollowx/seele 0.14.2 → 0.14.4

package/README.md

@@ -2,7 +2,6 @@
 
 [![npm package](https://img.shields.io/npm/v/%40vollowx%2Fseele)](https://www.npmjs.com/package/@vollowx/seele)
 [![builds.sr.ht status](https://builds.sr.ht/~lucaz/seele.svg)](https://builds.sr.ht/~lucaz/seele?)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@vollowx/seele)
 
 [https://tideover.cc/seele/](https://tideover.cc/seele/)
 [docs/](https://tideover.cc/seele/docs/)
@@ -74,7 +73,11 @@ It is 2026 now, so you don't really need to worry about this. However, in the
 future, the following web features might be used and require higher browser
 versions:
 
-- [`anchor()`][anchor] — Baseline 2026, Firefox 147, Safari 26, _will remove the dependency `floating-dom`_
+| feature                  | benefits                             | baseline | Chromium | Firefox | Safari  |
+| ---                      | ---                                  | :---:    | :---:    | :---:   | :---:   |
+| [`anchor()`][anchor]     | remove the dependency `floating-dom` | 2026     | -        | 147     | 26      |
+| [`alpha()`][alpha]       | replace `oklch()`                    | 2026     | 151      | 155     | 27      |
+| [focusgroup][focusgroup] | replace roving focus code            | not yet  | 150      | not yet | not yet |
 
 _* omitting a specific browser version means using that standard does not raise
 the minimum required version of seele_
@@ -97,3 +100,5 @@ the minimum required version of seele_
 [popover-api]: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
 [starting-style]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@starting-style
 [anchor]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/anchor
+[alpha]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/alpha
+[focusgroup]: https://open-ui.org/components/focusgroup-v2.explainer/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.14.2",
+  "version": "0.14.4",
   "description": "An extensible Web Components library, with Material 3 components pre-provided.",
   "author": "vollowx",
   "license": "Apache-2.0",
@@ -42,11 +42,11 @@
     "note": "echo 'tsc must be called after build:css since it completes missing *-styles.css.js'",
 
     "dev": "web-dev-server",
-    "dev:css": "bun scripts/convert-css.ts --watch",
-    "build": "bun run build:css && tsc && bun scripts/minify-html-literals.ts",
-    "build:css": "bun scripts/convert-css.ts --minify",
+    "dev:css": "node scripts/convert-css.ts --watch",
+    "build": "pnpm run build:css && tsc && node scripts/minify-html-literals.ts",
+    "build:css": "node scripts/convert-css.ts --minify",
     "clean": "./scripts/clean.sh",
-    "prepublishOnly": "bun clean && bun run build",
+    "prepublishOnly": "pnpm clean && pnpm run build",
     "format": "prettier . --check",
     "format:write": "prettier . --check --write",
     "cem": "cem analyze --litelement --globs './src/m3/**/*.ts'"

package/src/all.d.ts

@@ -2,8 +2,10 @@ import './m3/autocomplete/autocomplete.js';
 import './m3/badge/badge.js';
 import './m3/button/common-button.js';
 import './m3/button/common-button-toggle.js';
+import './m3/button/common-button-link.js';
 import './m3/button/icon-button.js';
 import './m3/button/icon-button-toggle.js';
+import './m3/button/icon-button-link.js';
 import './m3/button-group/standard-button-group.js';
 import './m3/button-group/connected-button-group.js';
 import './m3/checkbox/checkbox.js';
@@ -21,6 +23,7 @@ import './m3/menu/composed-menu.js';
 import './m3/navigation/navigation-rail.js';
 import './m3/navigation/navigation-rail-item.js';
 import './m3/popup/popup.js';
+import './m3/progress/circular-progress.js';
 import './m3/progress/linear-progress.js';
 import './m3/radio/radio.js';
 import './m3/ripple/ripple.js';

package/src/all.js

@@ -2,8 +2,10 @@ import './m3/autocomplete/autocomplete.js';
 import './m3/badge/badge.js';
 import './m3/button/common-button.js';
 import './m3/button/common-button-toggle.js';
+import './m3/button/common-button-link.js';
 import './m3/button/icon-button.js';
 import './m3/button/icon-button-toggle.js';
+import './m3/button/icon-button-link.js';
 import './m3/button-group/standard-button-group.js';
 import './m3/button-group/connected-button-group.js';
 import './m3/checkbox/checkbox.js';
@@ -21,6 +23,7 @@ import './m3/menu/composed-menu.js';
 import './m3/navigation/navigation-rail.js';
 import './m3/navigation/navigation-rail-item.js';
 import './m3/popup/popup.js';
+import './m3/progress/circular-progress.js';
 import './m3/progress/linear-progress.js';
 import './m3/radio/radio.js';
 import './m3/ripple/ripple.js';

package/src/base/anchor.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+declare const Base: Constructor<import("./mixins/focus-delegated.js").FocusDelegatedInterface> & Constructor<import("./mixins/internals-attached.js").InternalsAttachedInterface> & typeof LitElement;
+export declare class Anchor extends Base {
+    href: string;
+    target: string;
+    rel: string;
+    /**
+     * `null` when the attribute is absent, `''` when the attribute is present
+     * but empty, in which case the browser suggests a filename, just like a
+     * native `<a>`.
+     */
+    download: string | null;
+    hreflang: string;
+    referrerpolicy: string;
+    ping: Array<string>;
+    $anchor: HTMLAnchorElement | null;
+    static styles: any[];
+    _renderAnchor(content: unknown): import("lit").TemplateResult<1>;
+    click(): void;
+}
+export {};

package/src/base/anchor.js

@@ -0,0 +1,60 @@
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { FocusDelegated } from './mixins/focus-delegated.js';
+import { InternalsAttached } from './mixins/internals-attached.js';
+import { hiddenStyles } from './hidden-styles.css.js';
+const Base = FocusDelegated(InternalsAttached(LitElement));
+export class Anchor extends Base {
+    constructor() {
+        super(...arguments);
+        this.href = '';
+        this.target = '';
+        this.rel = '';
+        /**
+         * `null` when the attribute is absent, `''` when the attribute is present
+         * but empty, in which case the browser suggests a filename, just like a
+         * native `<a>`.
+         */
+        this.download = null;
+        this.hreflang = '';
+        this.referrerpolicy = '';
+        this.ping = [];
+    }
+    static { this.styles = [hiddenStyles]; }
+    _renderAnchor(content) {
+        return html `<a part="anchor" href="${this.href || nothing}" target="${this.target || nothing}" rel="${this.rel || nothing}" download="${this.download ?? nothing}" hreflang="${this.hreflang || nothing}" referrerpolicy="${this.referrerpolicy || nothing}" ping="${this.ping.join(' ') || nothing}">${content}</a>`;
+    }
+    click() {
+        this.$anchor.click();
+    }
+}
+__decorate([
+    property()
+], Anchor.prototype, "href", void 0);
+__decorate([
+    property()
+], Anchor.prototype, "target", void 0);
+__decorate([
+    property()
+], Anchor.prototype, "rel", void 0);
+__decorate([
+    property()
+], Anchor.prototype, "download", void 0);
+__decorate([
+    property()
+], Anchor.prototype, "hreflang", void 0);
+__decorate([
+    property()
+], Anchor.prototype, "referrerpolicy", void 0);
+__decorate([
+    property({
+        converter: {
+            fromAttribute: (value) => value?.split(/\s+/).filter(Boolean) ?? [],
+            toAttribute: (value) => value.join(' '),
+        },
+    })
+], Anchor.prototype, "ping", void 0);
+__decorate([
+    query('a')
+], Anchor.prototype, "$anchor", void 0);

package/src/base/autocomplete.d.ts

@@ -15,11 +15,11 @@ export declare class Autocomplete extends Base {
     inputSlotElements: HTMLElement[];
     itemSlotElements: HTMLElement[];
     private get $input();
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     /**
      * Check example content from the m3 implementation
      */
-    renderMenu(): import("lit-html").TemplateResult<1>;
+    renderMenu(): import("lit").TemplateResult<1>;
     constructor();
     firstUpdated(): Promise<void>;
     private handleInputSlotChange;

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

@@ -9,8 +9,8 @@ import type { Menu } from './menu.js';
  * @csspart menu - the internal menu part
  */
 export declare class ComposedMenu extends Popup {
-    $menu: Menu;
-    render(): import("lit-html").TemplateResult<1>;
+    $menu: Menu | null;
+    render(): import("lit").TemplateResult<1>;
     constructor();
     [handleControlChange](prev: HTMLElement | null, next: HTMLElement | null): void;
 }

package/src/base/composed-menu.js

@@ -19,13 +19,16 @@ export class ComposedMenu extends Popup {
     constructor() {
         super();
         this[internals].role = 'application';
+        this[internals].ariaRoleDescription = 'Menu';
+        // You should set this to "Menu" in the language of your webpage
     }
     [handleControlChange](prev, next) {
         if (next) {
             next.ariaHasPopup = 'menu';
-            ensureReady(this.$menu).then(() => {
-                next.ariaControlsElements = [this.$menu];
-                this.$menu[internals].ariaLabelledByElements = [next];
+            const menu = this.$menu;
+            ensureReady(menu).then(() => {
+                next.ariaControlsElements = [menu];
+                menu[internals].ariaLabelledByElements = [next];
             });
         }
         super[handleControlChange](prev, next);

package/src/base/controllers/list-controller.d.ts

@@ -34,5 +34,5 @@ export declare class ListController<Item extends ListItem> implements ReactiveCo
     focusPreviousItem(): void;
     handleSlotChange(): void;
 }
-export declare function filterOptions(options: string[], filter: string, exclude?: string[]): string[];
+export declare function filterOptions(options: string[] | undefined, filter: string, exclude?: string[]): string[];
 export declare function getIndexByLetter(options: string[], filter: string, startIndex?: number): number;

package/src/base/controllers/list-controller.js

@@ -9,7 +9,7 @@ export class ListController {
         this.getPossibleItems = getPossibleItems;
         this.blurItem = blurItem;
         this.focusItem = focusItem;
-        this.wrapNavigation = wrapNavigation;
+        this.wrapNavigation = wrapNavigation ?? (() => false);
     }
     hostConnected() { }
     hostDisconnected() { }

package/src/base/dialog.d.ts

@@ -13,7 +13,7 @@ import { LitElement } from 'lit';
  * ```
  */
 export declare class Dialog extends LitElement {
-    $dialog: HTMLDialogElement;
+    $dialog: HTMLDialogElement | null;
     _handleCancel: (e: Event) => void;
     show(): Promise<void>;
     close(): Promise<void>;

package/src/base/dialog.js

@@ -24,6 +24,7 @@ export class Dialog extends LitElement {
         };
     }
     async show() {
+        await this.updateComplete;
         this.$dialog.showModal();
         const autoFocus = this.querySelector('[autofocus]');
         if (autoFocus) {
@@ -35,6 +36,7 @@ export class Dialog extends LitElement {
         }
     }
     async close() {
+        await this.updateComplete;
         this.$dialog.close();
     }
 }

package/src/base/input.d.ts

@@ -27,7 +27,7 @@ export declare class Input extends Base {
     autocomplete: string;
     focused: boolean;
     $inputOrTextarea: HTMLInputElement | HTMLTextAreaElement;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     protected updated(changedProperties: PropertyValues): void;
     private handleInput;
     private handleChange;

package/src/base/list.d.ts

@@ -29,7 +29,7 @@ export declare class List extends List_base {
     focusFirstItem(): void;
     focusLastItem(): void;
     focusItem(item: ListItem): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     private readonly listController;
     constructor();
     handleKeyDown(event: KeyboardEvent): void;

package/src/base/menu.d.ts

@@ -31,7 +31,7 @@ export declare class Menu extends Menu_base {
     focusFirstItem(): void;
     focusLastItem(): void;
     focusItem(item: MenuItem): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     constructor();
     private readonly listController;
     handleKeyDown(event: KeyboardEvent): void;

package/src/base/menu.js

@@ -85,7 +85,8 @@ export class Menu extends InternalsAttached(LitElement) {
         this.listController.focusFirstItem();
     }
     #handleFocusOut() {
-        this.listController._blurItem(this.listController._focusedItem);
+        if (this.listController._focusedItem)
+            this.listController._blurItem(this.listController._focusedItem);
     }
     handleKeyDown(event) {
         if (event.defaultPrevented)

package/src/base/mixins/internals-attached.d.ts

@@ -5,6 +5,6 @@ export declare const replaceStates: unique symbol;
 export declare class InternalsAttachedInterface {
     [internals]: ElementInternals;
     [updateInternals]?(): void;
-    [replaceStates](del: Array<string>, add: Array<string>): void;
+    [replaceStates](del: Array<string>, add: Array<string | null>): void;
 }
 export declare const InternalsAttached: <T extends Constructor<LitElement>>(superClass: T) => Constructor<InternalsAttachedInterface> & T;

package/src/base/mixins/internals-attached.js

@@ -12,7 +12,10 @@ export const InternalsAttached = (superClass) => {
         }
         [replaceStates](del, add) {
             del.forEach((state) => this[internals].states.delete(state));
-            add.forEach((state) => this[internals].states.add(state));
+            add.forEach((state) => {
+                if (state)
+                    this[internals].states.add(state);
+            });
         }
     }
     return InternalsAttachedElement;

package/src/base/popup.d.ts

@@ -34,7 +34,7 @@ export declare class Popup extends Popup_base {
     windowPadding: number;
     $ariaControl: HTMLElement | null;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

package/src/base/select.d.ts

@@ -1,5 +1,4 @@
 import { LitElement, PropertyValues } from 'lit';
-import type { Field } from './field.js';
 import type { Option } from './option.js';
 import type { Popup } from './popup.js';
 import type { Menu, MenuItemFocusEvent, MenuActionEvent } from './menu.js';
@@ -31,23 +30,23 @@ export declare class Select extends Base {
     get selectedIndex(): number;
     set selectedIndex(index: number);
     get selectedOptions(): Option[];
-    $field: Field;
+    $field: any;
     $popup: Popup;
     $menu: Menu;
     private lastUserSetValue;
     private lastUserSetSelectedIndex;
     private lastSelectedOption;
     private lastSelectedOptionRecords;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     /**
      * Check example content from the m3 implementation
      */
-    protected renderField(): import("lit-html").TemplateResult<1>;
+    protected renderField(): import("lit").TemplateResult<1>;
     /**
      * Check example content from the m3 implementation
      */
-    protected renderMenu(): import("lit-html").TemplateResult<1>;
-    protected renderFieldContent(): import("lit-html").TemplateResult<1>;
+    protected renderMenu(): import("lit").TemplateResult<1>;
+    protected renderFieldContent(): import("lit").TemplateResult<1>;
     constructor();
     protected firstUpdated(changed: PropertyValues<Select>): Promise<void>;
     protected update(changed: PropertyValues<Select>): void;

package/src/base/slider.d.ts

@@ -20,8 +20,6 @@ export declare class Slider extends Base {
     ariaLabelEnd: string;
     ariaValueTextEnd: string;
     step: number;
-    ticks: boolean;
-    labeled: boolean;
     range: boolean;
     get nameStart(): string;
     set nameStart(name: string);
@@ -46,7 +44,7 @@ export declare class Slider extends Base {
         ariaValueText: string;
         ariaMin: number;
         ariaMax: number;
-    }): import("lit-html").TemplateResult<1>;
+    }): import("lit").TemplateResult<1>;
     private isRedispatchingEvent;
     private action?;
     ariaLabel: string | null;

package/src/base/slider.js

@@ -68,8 +68,6 @@ export class Slider extends Base {
         this.ariaLabelEnd = '';
         this.ariaValueTextEnd = '';
         this.step = 1;
-        this.ticks = false;
-        this.labeled = false;
         this.range = false;
         this.startOnTop = false;
         this.handlesOverlapping = false;
@@ -344,12 +342,6 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], Slider.prototype, "step", void 0);
-__decorate([
-    property({ type: Boolean })
-], Slider.prototype, "ticks", void 0);
-__decorate([
-    property({ type: Boolean })
-], Slider.prototype, "labeled", void 0);
 __decorate([
     property({ type: Boolean })
 ], Slider.prototype, "range", void 0);

package/src/base/tab-panel.d.ts

@@ -3,7 +3,7 @@ declare const TabPanel_base: Constructor<import("./mixins/internals-attached.js"
 export declare class TabPanel extends TabPanel_base {
     value: string;
     selected: boolean;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     constructor();
 }
 export {};

package/src/base/tab.d.ts

@@ -5,7 +5,7 @@ export declare class Tab extends Tab_base {
     disabled: boolean;
     selected: boolean;
     value: string;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     constructor();
     protected updated(changed: Map<string, any>): void;
 }

package/src/base/tabs.d.ts

@@ -10,7 +10,7 @@ export declare class Tabs extends LitElement {
     selected: string;
     get $tabs(): Array<Tab>;
     get $panels(): Array<TabPanel>;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     constructor();
     connectedCallback(): void;
     protected updated(changed: Map<string, any>): void;

package/src/base/tooltip.d.ts

@@ -28,7 +28,7 @@ export declare class Tooltip extends Base {
     forceInvisible: boolean;
     open: boolean;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     constructor();
     disconnectedCallback(): void;
     protected updated(changedProperties: PropertyValues<this>): void;

package/src/base/tooltip.js

@@ -40,9 +40,6 @@ export class Tooltip extends Base {
         this.windowPadding = 8;
         this.forceInvisible = false;
         this.open = false;
-        // Used to manage the delay before showing/hiding the tooltip.
-        this.#openTimer = null;
-        this.#closeTimer = null;
         this.#holdingUserSelect = false;
         this.#handleFocusIn = () => {
             if (!focusVisible)
@@ -115,8 +112,9 @@ export class Tooltip extends Base {
             touchend: this.#handleTouchEnd,
         };
         Object.keys(eventHandlers).forEach((key) => {
-            prev?.removeEventListener(key, eventHandlers[key]);
-            next?.addEventListener(key, eventHandlers[key]);
+            const handler = eventHandlers[key];
+            prev?.removeEventListener(key, handler);
+            next?.addEventListener(key, handler);
         });
         if (prev)
             prev.ariaDescribedByElements = [];

package/src/core/ensure-ready.js

@@ -1,6 +1,6 @@
 export async function ensureReady(element, useAnimationFrame = false) {
     if (!element)
-        return null;
+        return;
     if (element.matches(':not(:defined)'))
         await customElements.whenDefined(element.tagName.toLowerCase());
     if ('updateComplete' in element)

package/src/m3/autocomplete/autocomplete.d.ts

@@ -6,5 +6,5 @@ import '../menu/menu.js';
  */
 export declare class M3Autocomplete extends Autocomplete {
     static styles: any[];
-    renderMenu(): import("lit-html").TemplateResult<1>;
+    renderMenu(): import("lit").TemplateResult<1>;
 }

package/src/m3/badge/badge.d.ts

@@ -7,7 +7,7 @@ export declare class M3Badge extends LitElement {
     small: boolean;
     left: boolean;
     bottom: boolean;
-    $badge: HTMLSpanElement;
+    $badge: HTMLSpanElement | null;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }

package/src/m3/button/common-button-link.d.ts

@@ -0,0 +1,30 @@
+import { Anchor } from '../../base/anchor.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+/**
+ * @tag md-button-link
+ *
+ * @csspart anchor
+ * @csspart label
+ * @csspart icon
+ *
+ * @slot - label
+ * @slot icon - leading icon
+ */
+export declare class M3ButtonLink extends Anchor {
+    size: 'xs' | 's' | 'm' | 'l' | 'xl';
+    square: boolean;
+    color: 'primary' | 'secondary' | 'tertiary';
+    variant: 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text';
+    /**
+     * Whether to show the icon at the end of the button.
+     */
+    trailingIcon: boolean;
+    static styles: any[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-button-link': M3ButtonLink;
+    }
+}

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

@@ -0,0 +1,62 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Anchor } from '../../base/anchor.js';
+import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
+import { targetStyles } from '../target-styles.css.js';
+import { sharedButtonLinkStyles } from './shared-button-link-styles.css.js';
+import { sharedButtonStyles } from './shared-button-styles.css.js';
+import { commonButtonStyles } from './common-button-styles.css.js';
+/**
+ * @tag md-button-link
+ *
+ * @csspart anchor
+ * @csspart label
+ * @csspart icon
+ *
+ * @slot - label
+ * @slot icon - leading icon
+ */
+let M3ButtonLink = class M3ButtonLink extends Anchor {
+    constructor() {
+        super(...arguments);
+        this.size = 's';
+        this.square = false;
+        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,
+        sharedButtonLinkStyles,
+        commonButtonStyles,
+    ]; }
+    render() {
+        return this._renderAnchor(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 })
+], M3ButtonLink.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], M3ButtonLink.prototype, "square", void 0);
+__decorate([
+    property({ reflect: true })
+], M3ButtonLink.prototype, "color", void 0);
+__decorate([
+    property({ reflect: true })
+], M3ButtonLink.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'trailing-icon' })
+], M3ButtonLink.prototype, "trailingIcon", void 0);
+M3ButtonLink = __decorate([
+    customElement('md-button-link')
+], M3ButtonLink);
+export { M3ButtonLink };

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-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)}}}`;
+export const commonButtonStyles = css`@layer main{:host{--_padding:16px;--md-focus-ring-shape:calc(var(--_h) / 2);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);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/common-button-toggle.d.ts

@@ -15,7 +15,7 @@ declare const M3ButtonToggle_base: Constructor<import("../../base/mixins/button-
  */
 export declare class M3ButtonToggle extends M3ButtonToggle_base {
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/button/common-button.d.ts

@@ -12,7 +12,7 @@ import '../ripple/ripple.js';
  */
 export declare class M3Button extends Button {
     size: 'xs' | 's' | 'm' | 'l' | 'xl';
-    square: false;
+    square: boolean;
     color: 'primary' | 'secondary' | 'tertiary';
     variant: 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text';
     /**
@@ -20,7 +20,7 @@ export declare class M3Button extends Button {
      */
     trailingIcon: boolean;
     static styles: any[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {