@vollowx/seele 0.13.0 → 0.13.1

package/README.md

@@ -31,74 +31,14 @@ What's the differences comparing to other projects?
   meaning that its size is relatively small and the compatibility is not the
   best
 
-## Installation
+## Getting started
 
-seele is published on [npm](https://www.npmjs.com/package/@vollowx/seele),
-install with your preferred package manager like
-
-```sh
-npm install @vollowx/seele
-```
-
-## Quickstart
-
-### Importing
-
-You can import the entire library or import as needed.
-
-```javascript
-// Import all components
-import '@vollowx/seele';
-
-// Or import specific components (recommended)
-// They all follow such path: @/catagory/group/component.js
-import '@vollowx/seele/m3/button/common-button.js';
-import '@vollowx/seele/m3/checkbox/checkbox.js';
-
-import '@vollowx/seele/win98/button/button.js';
-```
-
-### Using
-
-Once imported, the components can be used just like standard HTML elements.
-
-```html
-<md-button variant="filled">Filled Button</md-button>
-<md-button variant="outlined">Outlined Button</md-button>
-
-<label>
-  <md-checkbox checked></md-checkbox>
-  Labelled Checkbox
-</label>
-
-<win98-button>Look old?</win98-button>
-```
-
-### Theming
-
-seele components use CSS variables for styling. To include the systems for
-Material You Expressive ones, add this to your style files.
-
-```css
-@import '@vollowx/seele/m3/systems/base.css';
-/* This includes basic system variables including elevation system and
-   typography system */
-@import '@vollowx/seele/m3/systems/defaults.css';
-/* (Optional) This includes basic styling for body, selection and links */
-```
-
-Note that there is no default color system and motion physics system to
-have more flexibility and reduce redundant code.
-
-For the color system, you can use the official
-[Material Theme Builder](https://material-foundation.github.io/material-theme-builder/).
-You can also find some references in ./dev/shared.css.
-
-For the motion physics system, check [docs/05-Material_You_Expressive.md](./docs/05-Material_You_Expressive.md).
+Check out [Overview](./docs/00-Overview.md).
 
 ## Documentations
 
-[Documentations and demos](https://tideover.cc/seele/docs/).
+- Previous [documentations and demos](https://tideover.cc/seele/docs/), being replaced
+- [Documentations](./docs/00-Overview.md)
 
 ## Download
 
@@ -108,7 +48,7 @@ For the motion physics system, check [docs/05-Material_You_Expressive.md](./docs
 
 ## Browser Support
 
-seele relies on the folling modern web standards:
+seele relies on the following modern web standards:
 
 - [`ElementInternals`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals), Baseline 2023
 - [Constructable Stylesheets](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet), Baseline 2024, C[^1] 90, F 126
@@ -130,7 +70,7 @@ these following web features might be used and require higher browser versions:
 
 ## Other Information
 
-- [Roadmap](./ROADMAP.md)
+- [Roadmap](./docs/01-Roadmap.md)
 - [Contributing](./CONTRIBUTING.md)
 - [License (Apache-2.0)](./LICENSE)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "description": "A extensible Web Components library, with Material Design 3 components pre-provided.",
   "author": "vollowx",
   "license": "Apache-2.0",
@@ -52,6 +52,7 @@
     "@web/dev-server-esbuild": "^1.0.5",
     "chokidar": "^5.0.0",
     "lightningcss": "^1.33.0",
+    "minify-html-literals": "^1.3.5",
     "prettier": "^3.9.6"
   },
   "dependencies": {

package/src/all.js

@@ -5,6 +5,8 @@ export { M3Button } from './m3/button/common-button.js';
 export { M3ButtonToggle } from './m3/button/common-button-toggle.js';
 export { M3IconButton } from './m3/button/icon-button.js';
 export { M3IconButtonToggle } from './m3/button/icon-button-toggle.js';
+export { M3StandardButtonGroup } from './m3/button-group/standard-button-group.js';
+// export { M3ConnectedButtonGroup }  from './m3/button-group/connected-button-group.js';
 export { M3Checkbox } from './m3/checkbox/checkbox.js';
 export { M3Dialog } from './m3/dialog/dialog.js';
 export { M3Divider } from './m3/divider/divider.js';

package/src/base/autocomplete.js

@@ -11,10 +11,7 @@ const Base = FocusDelegated(InternalsAttached(LitElement));
         return this.inputSlotElements[0];
     }
     render() {
-        return html`
-      <slot name="input" @slotchange=${this.handleInputSlotChange}></slot>
-      ${this.renderMenu()}
-    `;
+        return html`<slot name="input" @slotchange="${this.handleInputSlotChange}"></slot>${this.renderMenu()}`;
     }
     /**
    * Example content:

package/src/base/input.js

@@ -16,47 +16,9 @@ export class Input extends Base {
         const minLength = this.minLength > -1 ? this.minLength : nothing;
         const maxLength = this.maxLength > -1 ? this.maxLength : nothing;
         if (isTextarea) {
-            return html`
-        <textarea
-          part="input"
-          .value=${live(this.value)}
-          placeholder=${this.placeholder || nothing}
-          ?required=${this.required}
-          ?readonly=${this.readOnly}
-          ?disabled=${this.disabled}
-          minlength=${minLength}
-          maxlength=${maxLength}
-          autocomplete=${this.autocomplete || nothing}
-          @input=${this.handleInput}
-          @change=${this.handleChange}
-          @focus=${this.handleFocus}
-          @blur=${this.handleBlur}
-        ></textarea>
-      `;
+            return html`<textarea part="input" .value="${live(this.value)}" placeholder="${this.placeholder || nothing}" ?required="${this.required}" ?readonly="${this.readOnly}" ?disabled="${this.disabled}" minlength="${minLength}" maxlength="${maxLength}" autocomplete="${this.autocomplete || nothing}" @input="${this.handleInput}" @change="${this.handleChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea>`;
         }
-        return html`
-      <input
-        part="input"
-        type=${this.type}
-        .value=${live(this.value)}
-        placeholder=${this.placeholder || nothing}
-        ?required=${this.required}
-        ?readonly=${this.readOnly}
-        ?disabled=${this.disabled}
-        ?multiple=${this.multiple}
-        min=${this.min || nothing}
-        max=${this.max || nothing}
-        step=${this.step || nothing}
-        minlength=${minLength}
-        maxlength=${maxLength}
-        pattern=${this.pattern || nothing}
-        autocomplete=${this.autocomplete || nothing}
-        @input=${this.handleInput}
-        @change=${this.handleChange}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-      />
-    `;
+        return html`<input part="input" type="${this.type}" .value="${live(this.value)}" placeholder="${this.placeholder || nothing}" ?required="${this.required}" ?readonly="${this.readOnly}" ?disabled="${this.disabled}" ?multiple="${this.multiple}" min="${this.min || nothing}" max="${this.max || nothing}" step="${this.step || nothing}" minlength="${minLength}" maxlength="${maxLength}" pattern="${this.pattern || nothing}" autocomplete="${this.autocomplete || nothing}" @input="${this.handleInput}" @change="${this.handleChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}">`;
     }
     updated(changedProperties) {
         super.updated(changedProperties);

package/src/base/list.js

@@ -17,7 +17,7 @@ const Base = InternalsAttached(LitElement);
         return this.listController.items || [];
     }
     render() {
-        return html` ${this.renderItemSlot()} `;
+        return html`${this.renderItemSlot()}`;
     }
     renderItemSlot() {
         return html`<slot part="items"></slot>`;

package/src/base/menu.js

@@ -21,15 +21,7 @@ const Base = FocusDelegated(InternalsAttached(Attachable(LitElement)));
         return this.listController.items || [];
     }
     render() {
-        return html`<div
-      part="menu"
-      role="${this.type}"
-      tabindex="${this.tabIndex}"
-      @keydown=${this.#handleKeyDown.bind(this)}
-      @focusout=${this.#handleFocusOut.bind(this)}
-    >
-      ${this.renderItemSlot()}
-    </div>`;
+        return html`<div part="menu" role="${this.type}" tabindex="${this.tabIndex}" @keydown="${this.#handleKeyDown.bind(this)}" @focusout="${this.#handleFocusOut.bind(this)}">${this.renderItemSlot()}</div>`;
     }
     renderItemSlot() {
         return html`<slot part="items"></slot>`;

package/src/base/select.js

@@ -94,7 +94,7 @@ const Base = FormAssociated(FocusDelegated(InternalsAttached(LitElement)));
         return html``;
     }
     renderFieldContent() {
-        return html`<span part="value">${this.displayText || html`&nbsp;`}</span>`;
+        return html`<span part="value">${this.displayText || html` `}</span>`;
     }
     constructor(){
         super(), // Form-related

package/src/base/slider.js

@@ -43,31 +43,10 @@ export class Slider extends Base {
     }
     renderInput({ start, value, ariaLabel, ariaValueText, ariaMin, ariaMax }) {
         const name = start ? `start` : `end`;
-        return html`<input
-      type="range"
-      class="${classMap({
+        return html`<input type="range" class="${classMap({
             start,
             end: !start
-        })}"
-      @focus=${this.handleFocus}
-      @pointerdown=${this.handleDown}
-      @pointerup=${this.handleUp}
-      @keydown=${this.handleKeydown}
-      @keyup=${this.handleKeyup}
-      @input=${this.handleInput}
-      @change=${this.handleChange}
-      id=${name}
-      .disabled=${this.disabled}
-      .min=${String(this.min)}
-      aria-valuemin=${ariaMin}
-      .max=${String(this.max)}
-      aria-valuemax=${ariaMax}
-      .step=${String(this.step)}
-      .value=${String(value)}
-      .tabIndex=${start ? 1 : 0}
-      aria-label=${ariaLabel || nothing}
-      aria-valuetext=${ariaValueText}
-    />`;
+        })}" @focus="${this.handleFocus}" @pointerdown="${this.handleDown}" @pointerup="${this.handleUp}" @keydown="${this.handleKeydown}" @keyup="${this.handleKeyup}" @input="${this.handleInput}" @change="${this.handleChange}" id="${name}" .disabled="${this.disabled}" .min="${String(this.min)}" aria-valuemin="${ariaMin}" .max="${String(this.max)}" aria-valuemax="${ariaMax}" .step="${String(this.step)}" .value="${String(value)}" .tabIndex="${start ? 1 : 0}" aria-label="${ariaLabel || nothing}" aria-valuetext="${ariaValueText}">`;
     }
     constructor(){
         super(), this.min = 0, this.max = 100, this.valueLabel = '', this.valueLabelStart = '', this.valueLabelEnd = '', this.ariaLabelStart = '', this.ariaValueTextStart = '', this.ariaLabelEnd = '', this.ariaValueTextEnd = '', this.step = 1, this.ticks = false, this.labeled = false, this.range = false, this.startOnTop = false, this.handlesOverlapping = false, this.isRedispatchingEvent = false, // @TODO: Delegate ARIA attributes to inputs, automatically convert from

package/src/base/tabs.js

@@ -12,11 +12,7 @@ import { internals } from './mixins/internals-attached.js';
         return this.parentNode instanceof ShadowRoot ? this.parentNode.host : this.parentElement;
     }
     render() {
-        return html`
-      <div part="tablist" role="tablist">
-        <slot @slotchange=${this.#handleSlotChange}></slot>
-      </div>
-    `;
+        return html`<div part="tablist" role="tablist"><slot @slotchange="${this.#handleSlotChange}"></slot></div>`;
     }
     connectedCallback() {
         super.connectedCallback();

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const autocompleteStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block;position:relative}::slotted([slot=input]){cursor:pointer;outline:none;width:100%}[part=menu]{--md-menu-max-height:300px;min-width:100%}`;
+export const autocompleteStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block;position:relative}::slotted([slot=input]){cursor:pointer;outline:0;width:100%}[part=menu]{--md-menu-max-height:300px;min-width:100%}`;

package/src/m3/autocomplete/autocomplete.js

@@ -10,26 +10,7 @@ export class M3Autocomplete extends Autocomplete {
         ];
     }
     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-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>`;
     }
 }
 M3Autocomplete = _ts_decorate([

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const badgeStyles = css`:host{--md-badge-offset:0}[part~=root]{vertical-align:middle;flex-shrink:0;display:inline-flex;position:relative}[part~=badge]{--md-badge-scale:1;top:var(--md-badge-offset);right:var(--md-badge-offset);box-sizing:border-box;font:var(--md-sys-typography-label-small);z-index:1;background-color:var(--md-sys-color-error);min-width:16px;height:16px;color:var(--md-sys-color-on-error);transform:scale(var(--md-badge-scale)) translate(50%, -50%);transform-origin:100% 0;transition:transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);pointer-events:none;border-radius:8px;flex-flow:wrap;justify-content:center;align-items:center;padding:0 2.5px;display:flex;position:absolute}:host([small]) [part~=badge]{--md-badge-scale:.375;color:#0000}:host([hidden]){display:hidden}:host([value="0"]:not([show-zero])) [part~=badge],:host([hidden]) [part~=badge]{--md-badge-scale:0}:host([circle]){--md-badge-offset:14%}:host([left]:not([dir=rtl])) [part~=badge],:host(:not([left])[dir=rtl]) [part~=badge]{right:auto;left:var(--md-badge-offset);transform:scale(var(--md-badge-scale)) translate(-50%, -50%);transform-origin:0 0}:host([bottom]) [part~=badge]{top:auto;bottom:var(--md-badge-offset);transform:scale(var(--md-badge-scale)) translate(50%, 50%);transform-origin:100% 100%}:host([left][bottom]:not([dir=rtl])) [part~=badge],:host(:not([left])[dir=rtl][bottom]) [part~=badge]{transform:scale(var(--md-badge-scale)) translate(-50%, 50%);transform-origin:0 100%}`;
+export const badgeStyles = css`:host{--md-badge-offset:0}[part~=root]{vertical-align:middle;flex-shrink:0;display:inline-flex;position:relative}[part~=badge]{--md-badge-scale:1;top:var(--md-badge-offset);right:var(--md-badge-offset);box-sizing:border-box;font:var(--md-sys-typography-label-small);z-index:1;background-color:var(--md-sys-color-error);min-width:16px;height:16px;color:var(--md-sys-color-on-error);transform:scale(var(--md-badge-scale)) translate(50%,-50%);transform-origin:100% 0;transition:transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast),color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);pointer-events:none;border-radius:8px;flex-flow:wrap;justify-content:center;align-items:center;padding:0 2.5px;display:flex;position:absolute}:host([small]) [part~=badge]{--md-badge-scale:.375;color:#0000}:host([hidden]){display:hidden}:host([hidden]) [part~=badge],:host([value="0"]:not([show-zero])) [part~=badge]{--md-badge-scale:0}:host([circle]){--md-badge-offset:14%}:host(:not([left])[dir=rtl]) [part~=badge],:host([left]:not([dir=rtl])) [part~=badge]{right:auto;left:var(--md-badge-offset);transform:scale(var(--md-badge-scale)) translate(-50%,-50%);transform-origin:0 0}:host([bottom]) [part~=badge]{top:auto;bottom:var(--md-badge-offset);transform:scale(var(--md-badge-scale)) translate(50%,50%);transform-origin:100% 100%}:host(:not([left])[dir=rtl][bottom]) [part~=badge],:host([left][bottom]:not([dir=rtl])) [part~=badge]{transform:scale(var(--md-badge-scale)) translate(-50%,50%);transform-origin:0 100%}`;

package/src/m3/badge/badge.js

@@ -9,12 +9,7 @@ export class M3Badge extends LitElement {
         ];
     }
     render() {
-        return html`
-      <div part="root">
-        <slot></slot>
-        <span part="badge">${this.#getDisplayValue()}</span>
-      </div>
-    `;
+        return html`<div part="root"><slot></slot><span part="badge">${this.#getDisplayValue()}</span></div>`;
     }
     #getDisplayValue() {
         const value = this.value;

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);border-radius:calc(var(--_h) / 2);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=xsmall]){--_padding:12px;gap:4px}:host([size=medium]){--_padding:24px;font:var(--md-sys-typography-title-medium);gap:8px}:host([size=large]){--_padding:48px;font:var(--md-sys-typography-headline-small);gap:12px}:host([size=xlarge]){--_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)}[part~=icon]{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 common-button{block-size:1em;font-size:var(--_icon-size);inline-size:1em}`;

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

@@ -19,15 +19,7 @@ export class M3ButtonToggle extends ToggleButton {
         ];
     }
     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>
-    `;
+        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>`;
     }
     constructor(...args){
         super(...args), this.size = 'small', this.shape = 'rounded', this.color = 'primary', this.variant = 'filled', /**

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

@@ -17,13 +17,7 @@ export class M3Button extends Button {
         ];
     }
     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>
-    `;
+        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>`;
     }
     constructor(...args){
         super(...args), this.size = 'small', this.shape = 'rounded', this.color = 'primary', this.variant = 'filled', /**

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);border-radius:calc(var(--_h) / 2);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=xsmall]){--_wn:28px;--_ww:40px}:host([size=medium]){--_wn:48px;--_ww:72px}:host([size=large]){--_wn:64px;--_ww:128px}:host([size=xlarge]){--_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``;

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

@@ -19,13 +19,7 @@ export class M3IconButtonToggle extends ToggleButton {
         ];
     }
     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 enterbehavior="always"></md-ripple><span part="target"></span><slot part="icon unchecked"></slot><slot part="icon checked" name="checked"></slot>`;
     }
     constructor(...args){
         super(...args), this.size = 'small', this.color = 'primary', this.variant = 'text', this.width = 'standard';

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

@@ -17,12 +17,7 @@ export class M3IconButton extends Button {
         ];
     }
     render() {
-        return html`
-      <md-focus-ring></md-focus-ring>
-      <md-ripple></md-ripple>
-      <span part="target"></span>
-      <slot part="icon"></slot>
-    `;
+        return html`<md-focus-ring></md-focus-ring><md-ripple></md-ripple><span part="target"></span><slot part="icon"></slot>`;
     }
     constructor(...args){
         super(...args), this.size = 'small', this.color = 'primary', this.variant = 'text', this.width = 'standard';

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;--_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;height:var(--_h);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;vertical-align:top;outline:0;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}:host([size=xsmall]){--_h:32px}:host([size=medium]){--_h:56px;--_icon-size:24px;--_rad-sq:16px;--_rad-pr:12px}:host([size=large]){--_h:96px;--_icon-size:32px;--_rad-sq:28px;--_rad-pr:16px}:host([size=xlarge]){--_h:136px;--_icon-size:40px;--_rad-sq:28px;--_rad-pr: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(--_outline-color) var(--_outline-opacity,100%), transparent);box-shadow:none;border-style:solid;border-width:1px}:host([variant=text]){--_text-color:var(--_color);--_background-color:transparent!important}:host([shape=square]){--md-focus-ring-shape:var(--_rad-sq);border-radius:var(--_rad-sq)}}@layer shared-toggle,override;@layer active{:host(:active){--md-focus-ring-shape:var(--_rad-pr);border-radius:var(--_rad-pr)}}@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%;--_outline-color:var(--md-sys-color-on-surface);--_outline-opacity:10%;box-shadow:none;pointer-events:none}}`;
+export const sharedButtonStyles = css``;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const sharedButtonToggleStyles = css`@layer shared-toggle{:host{transition:border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), box-shadow var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default), background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast)}:host(:state(checked)){--md-focus-ring-shape:var(--_rad-sq);border-radius:var(--_rad-sq)}:host(:state(checked)) [part~=unchecked],:host(:not(:state(checked))) [part~=checked]{display:none}: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);--_text-color:var(--md-sys-color-inverse-on-surface);border-width:0}}`;
+export const sharedButtonToggleStyles = css``;

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const standardButtonGroupStyles = css`:host{gap:8px;display:inline-flex}`;

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

@@ -0,0 +1,130 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { LitElement, html } from 'lit';
+import { customElement } from '../../core/decorators';
+import { standardButtonGroupStyles } from './standard-button-group-styles.css.js';
+import { queryAssignedElements } from 'lit/decorators.js';
+const EXPAND_FACTOR = 1.15;
+const shapeAnimation = Symbol('shapeAnimation');
+export class M3StandardButtonGroup extends LitElement {
+    static{
+        this.styles = [
+            standardButtonGroupStyles
+        ];
+    }
+    render() {
+        return html`<slot @slotchange="${this.#handleSlotChange}"></slot>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('pointerdown', this.#handlePointerDown);
+        this.addEventListener('keydown', this.#handleKeyDown, {
+            capture: true
+        });
+        window.addEventListener('pointerup', this.#reset);
+        window.addEventListener('pointercancel', this.#reset);
+        window.addEventListener('keyup', this.#reset, {
+            capture: true
+        });
+        this.#resizeObserver = new ResizeObserver((entries)=>{
+            if (this.#activeIndex !== -1) return; // Skip if animating
+            entries.forEach((entry)=>{
+                const target = entry.target;
+                const index = this.$buttons.indexOf(target);
+                if (index !== -1) {
+                    const currentWidth = target.style.width;
+                    target.style.width = '';
+                    this.#baseWidths[index] = entry.target.getBoundingClientRect().width;
+                    if (currentWidth) target.style.width = currentWidth;
+                }
+            });
+        });
+    }
+    disconnectedCallback() {
+        window.removeEventListener('pointerup', this.#reset);
+        window.removeEventListener('pointercancel', this.#reset);
+        window.removeEventListener('keyup', this.#reset, {
+            capture: true
+        });
+        this.#resizeObserver.disconnect();
+        super.disconnectedCallback();
+    }
+    #activeIndex;
+    #resizeObserver;
+    #baseWidths;
+    #handleSlotChange;
+    #handlePointerDown;
+    #handleKeyDown;
+    #reset;
+    /**
+   * Passing no element resets all shape changes
+   */ updateLayout(target = null) {
+        const pressedIndex = target ? this.$buttons.indexOf(target) : -1;
+        this.#activeIndex = pressedIndex;
+        const pressedBaseWidth = pressedIndex !== -1 ? this.#baseWidths[pressedIndex] : 0;
+        const expansionDelta = pressedBaseWidth * (EXPAND_FACTOR - 1);
+        const isPressedAtEdge = pressedIndex === 0 || pressedIndex === this.$buttons.length - 1;
+        this.$buttons.forEach((btn, i)=>{
+            const currentWidth = btn.getBoundingClientRect().width;
+            let targetWidth = this.#baseWidths[i];
+            if (pressedIndex !== -1) {
+                if (i === pressedIndex) {
+                    targetWidth = pressedBaseWidth * EXPAND_FACTOR;
+                } else if (Math.abs(i - pressedIndex) === 1) {
+                    if (isPressedAtEdge) targetWidth = this.#baseWidths[i] - expansionDelta;
+                    else targetWidth = this.#baseWidths[i] - expansionDelta / 2;
+                }
+            }
+            const styles = getComputedStyle(this);
+            const rawDuration = styles.getPropertyValue('--md-sys-motion-spatial-fast-duration');
+            const rawEasing = styles.getPropertyValue('--md-sys-motion-spatial-fast');
+            const duration = parseInt(rawDuration.substring(0, rawDuration.length - 2)) || 0;
+            const easing = rawEasing || 'ease';
+            if (btn[shapeAnimation]) btn[shapeAnimation].cancel();
+            btn[shapeAnimation] = btn.animate([
+                {
+                    width: `${currentWidth}px`
+                },
+                {
+                    width: `${targetWidth}px`
+                }
+            ], {
+                duration,
+                easing,
+                fill: 'forwards'
+            });
+            btn[shapeAnimation].onfinish = ()=>{
+                if (pressedIndex === -1) {
+                    btn.style.width = '';
+                    btn[shapeAnimation].cancel();
+                }
+            };
+        });
+    }
+    constructor(...args){
+        super(...args), this.#activeIndex = -1, this.#baseWidths = [], this.#handleSlotChange = ()=>{
+            this.#resizeObserver.disconnect();
+            this.$buttons.forEach((btn, i)=>{
+                this.#baseWidths[i] = btn.getBoundingClientRect().width;
+                this.#resizeObserver.observe(btn);
+            });
+        }, this.#handlePointerDown = (e)=>{
+            if (this === e.target) return;
+            this.updateLayout(e.target);
+        }, this.#handleKeyDown = (e)=>{
+            if (e.key !== ' ' && e.key !== 'Enter') return;
+            this.updateLayout(e.target);
+        }, this.#reset = (e)=>{
+            if (e && e.type === 'keyup' && e.key !== ' ' && e.key !== 'Enter') return;
+            if (this.#activeIndex !== -1) {
+                this.#activeIndex = -1;
+                this.updateLayout();
+            }
+        };
+    }
+}
+_ts_decorate([
+    queryAssignedElements()
+], M3StandardButtonGroup.prototype, "$buttons", void 0);
+M3StandardButtonGroup = _ts_decorate([
+    customElement('md-button-group', false)
+], M3StandardButtonGroup);

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

@@ -1,2 +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-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;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-effects-fast-duration) var(--md-sys-motion-effects-fast);width:18px;position:absolute;inset:-2px}[part~=mark]{transition-duration:var(--md-sys-motion-effects-default-duration);transition-timing-function:var(--md-sys-motion-effects-default);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-effects-default-duration);transition-timing-function:var(--md-sys-motion-effects-default)}[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-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}`;
+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-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;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-effects-fast-duration) var(--md-sys-motion-effects-fast);width:18px;position:absolute;inset:-2px}[part~=mark]{transition-duration:var(--md-sys-motion-effects-default-duration);transition-timing-function:var(--md-sys-motion-effects-default);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-effects-default-duration);transition-timing-function:var(--md-sys-motion-effects-default)}[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-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/checkbox.js

@@ -14,20 +14,10 @@ export class M3Checkbox extends Checkbox {
         ];
     }
     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 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>
-    `;
+        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>`;
     }
     constructor(...args){
         super(...args), this.error = false;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const dialogStyles = css`dialog{background:0 0;border:none;outline:0;min-width:280px;max-width:min(560px,100% - 48px);min-height:140px;max-height:min(560px,100% - 48px);padding:0;overflow:visible}dialog[open]{display:flex}dialog::backdrop{background:0 0}[part=container]{box-sizing:border-box;will-change:height, transform, opacity;background-color:var(--md-sys-color-surface-container-high);border-radius:28px;flex-direction:column;flex-grow:1;display:flex;position:relative;overflow:hidden}[part=content]{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typography-body-medium);will-change:transform, opacity;padding:24px 24px 0;display:block}[part=actions]{justify-content:flex-end;gap:8px;display:flex;position:absolute;bottom:0;left:0;right:0}::slotted([slot=headline]){font:var(--md-sys-typography-headline-small);color:var(--md-sys-color-on-surface);margin:0;padding:24px 24px 0}slot[name=actions]::slotted(*){box-sizing:border-box;justify-content:flex-end;gap:8px;padding:24px;display:flex}[part=scrim]{background:var(--md-sys-color-scrim);opacity:.32;pointer-events:none;z-index:1;display:none;position:fixed;inset:0}dialog[open]+[part=scrim]{display:block}`;
+export const dialogStyles = css`dialog{background:0 0;border:none;outline:0;min-width:280px;max-width:min(560px,100% - 48px);min-height:140px;max-height:min(560px,100% - 48px);padding:0;overflow:visible}dialog[open]{display:flex}dialog::backdrop{background:0 0}[part=container]{box-sizing:border-box;will-change:height,transform,opacity;background-color:var(--md-sys-color-surface-container-high);border-radius:28px;flex-direction:column;flex-grow:1;padding-top:8px;display:flex;position:relative;overflow:hidden}[part=headline]{flex-direction:column;display:flex}::slotted([slot=icon]){block-size:1em;color:var(--md-sys-color-secondary);fill:currentColor;inline-size:1em;margin:16px 0 0;font-size:24px}::slotted([slot=headline]){box-sizing:border-box;font:var(--md-sys-typography-headline-small);color:var(--md-sys-color-on-surface);margin:0;padding:16px 24px 0}[part=headline].has-icon{align-items:center}[part=content]{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typography-body-medium);will-change:opacity;padding:16px 24px 0;display:block}[part=actions]{justify-content:flex-end;gap:8px;display:flex;position:absolute;bottom:0;left:0;right:0}slot[name=actions]::slotted(*){box-sizing:border-box;justify-content:flex-end;gap:8px;padding:24px;display:flex}[part=scrim]{background:var(--md-sys-color-scrim);opacity:.32;pointer-events:none;z-index:1;display:none;position:fixed;inset:0}dialog[open]+[part=scrim]{display:block}`;