@vollowx/seele 0.14.2 → 0.14.3

package/README.md

@@ -74,7 +74,10 @@ 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 `color-mix()`                | 2026     | 151      | 155     | 27     |
 
 _* omitting a specific browser version means using that standard does not raise
 the minimum required version of seele_
@@ -97,3 +100,4 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vollowx/seele",
-  "version": "0.14.2",
+  "version": "0.14.3",
   "description": "An extensible Web Components library, with Material 3 components pre-provided.",
   "author": "vollowx",
   "license": "Apache-2.0",

package/src/all.d.ts

@@ -21,6 +21,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

@@ -21,6 +21,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/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);

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/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/icon-button-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-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)}}`;
+export const iconButtonStyles = css`@layer main{:host{--_wn:32px;--_ww:52px;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]){color:var(--md-sys-color-on-surface-variant)}:host([variant=text]:state(checked)){color:var(--_color)}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-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}}}`;
+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;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);color:var(--md-sys-color-on-secondary-container)}:host([variant=outlined]){--md-focus-ring-offset:3px;color:var(--md-sys-color-on-surface-variant);border-color:var(--md-sys-color-outline-variant);background-color:#0000;border-style:solid;border-width:1px;& md-ripple{inset:-1px}}:host([variant=text]){color:var(--_color);background-color:#0000}: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:oklch(from var(--md-sys-color-outline) l c h / 10%)}:host(:disabled),:host([variant=outlined]:state(checked):disabled){background-color:oklch(from var(--md-sys-color-on-surface) l c h / 10%);color:oklch(from var(--md-sys-color-on-surface) l c h / 38%);border-color:oklch(from var(--md-sys-color-on-surface) l c h / 10%);box-shadow:none;pointer-events:none}@media (forced-colors:active){:host(:disabled){color:graytext;border-color:graytext}}}`;

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(--_rs);border-radius:var(--_rs)}: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}@media (forced-colors:active){:host(:state(checked)){color:highlighttext;background:highlight}}}`;
+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(--_rs);border-radius:var(--_rs)}: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);color:var(--md-sys-color-on-surface-variant)}:host([variant=tonal]:not(:state(checked))){background-color:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface-variant)}:host([variant=outlined]:state(checked)){background-color:var(--md-sys-color-inverse-surface);color:var(--md-sys-color-inverse-on-surface);border-width:0}@media (forced-colors:active){:host(:state(checked)){color:highlighttext;background:highlight}}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const connectedButtonGroupStyles = css`:host{gap:2px;display:inline-flex}::slotted(*){flex:1}::slotted(:not(:first-child)[size=xs]){--_inner-left-radius:4px}::slotted(:not(:last-child)[size=xs]){--_inner-right-radius:4px}::slotted(:not(:first-child)){--_inner-left-radius:8px}::slotted(:not(:last-child)){--_inner-right-radius:8px}::slotted(:not(:first-child)[size=l]){--_inner-left-radius:16px}::slotted(:not(:last-child)[size=l]){--_inner-right-radius:16px}::slotted(:not(:first-child)[size=xl]){--_inner-left-radius:20px}::slotted(:not(:last-child)[size=xl]){--_inner-right-radius:20px}::slotted(:first-child:state(checked):not(:active,[square])){border-start-start-radius:calc(var(--_h) / 2);border-end-start-radius:calc(var(--_h) / 2)}::slotted(:last-child:state(checked):not(:active,[square])){border-start-end-radius:calc(var(--_h) / 2);border-end-end-radius:calc(var(--_h) / 2)}`;
+export const connectedButtonGroupStyles = css`:host{gap:2px;display:inline-flex}::slotted(*){flex:1}::slotted(:not(:first-child)[size=xs]){--_inner-left-radius:4px}::slotted(:not(:last-child)[size=xs]){--_inner-right-radius:4px}::slotted(:not(:first-child)){--_inner-left-radius:8px}::slotted(:not(:last-child)){--_inner-right-radius:8px}::slotted(:not(:first-child)[size=l]){--_inner-left-radius:16px}::slotted(:not(:last-child)[size=l]){--_inner-right-radius:16px}::slotted(:not(:first-child)[size=xl]){--_inner-left-radius:20px}::slotted(:not(:last-child)[size=xl]){--_inner-right-radius:20px}::slotted(:first-child:not([square])){border-start-start-radius:calc(var(--_h) / 2);border-end-start-radius:calc(var(--_h) / 2)}::slotted(:last-child:not([square])){border-start-end-radius:calc(var(--_h) / 2);border-end-end-radius:calc(var(--_h) / 2)}`;

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

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

package/src/m3/progress/circular-progress-styles.css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const circularProgressStyles = css`:host{--_size:var(--md-circular-progress-size,40px);--_thickness:var(--md-circular-progress-thickness,4px);--_gap:var(--md-circular-progress-gap,4px);--_value:0;height:var(--_size);width:var(--_size);display:inline-flex;position:relative;overflow:hidden}[part=container]{width:100%;height:100%;position:absolute;transform:rotate(-90deg)}svg{fill:#0000;width:100%;height:100%}[part~=track]{stroke:var(--md-sys-color-secondary-container);stroke-width:var(--_thickness);stroke-linecap:round;cx:calc(var(--_size) / 2);cy:calc(var(--_size) / 2);r:calc((var(--_size) - var(--_thickness)) / 2);stroke-dasharray:min((1 - var(--_value)) * (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) - var(--_gap) - var(--_thickness), 6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap) - var(--_gap) - 2 * var(--_thickness)) calc(6.28319 * (var(--_size) - var(--_thickness)) / 2 - min((1 - var(--_value)) * (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) - var(--_gap) - var(--_thickness), 6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap) - var(--_gap) - 2 * var(--_thickness)));stroke-dashoffset:calc(min((1 - var(--_value)) * (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) - var(--_gap) - var(--_thickness), 6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap) - var(--_gap) - 2 * var(--_thickness)) + var(--_gap) + var(--_thickness));transition:stroke-dasharray .5s cubic-bezier(0,0,.2,1),stroke-dashoffset .5s cubic-bezier(0,0,.2,1),stroke-width .25s cubic-bezier(.4,0,.6,1)}[part=active]{stroke:var(--md-sys-color-primary);stroke-width:var(--_thickness);stroke-linecap:round;cx:calc(var(--_size) / 2);cy:calc(var(--_size) / 2);r:calc((var(--_size) - var(--_thickness)) / 2);stroke-dasharray:calc(var(--_value) * (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) - var(--_thickness)) calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - var(--_value) * (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) + var(--_thickness));transition:stroke-dasharray .5s cubic-bezier(0,0,.2,1),stroke-width .25s cubic-bezier(.4,0,.6,1)}:host([indeterminate]){animation:6s linear infinite rotate;& [part=container]{animation:6s infinite container-rotate}& [part=track]{animation:6s infinite track-grow}& [part=active]{animation:6s infinite active-grow}}@keyframes rotate{0%{transform:rotate(-90deg)}to{transform:rotate(990deg)}}@keyframes container-rotate{0%{transform:rotate(0)}8.33333%{transform:rotate(90deg)}25%{transform:rotate(90deg)}33.3333%{transform:rotate(180deg)}50%{transform:rotate(180deg)}58.3333%{transform:rotate(270deg)}75%{transform:rotate(270deg)}83.3333%{transform:rotate(360deg)}to{transform:rotate(360deg)}}@keyframes track-grow{0%{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 - var(--_gap) - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 + var(--_gap) + var(--_thickness));stroke-dashoffset:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 - var(--_gap) - var(--_thickness) + var(--_gap) + var(--_thickness))}50%{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .13 - var(--_gap) - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .13 + var(--_gap) + var(--_thickness));stroke-dashoffset:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .13 - var(--_gap) - var(--_thickness) + var(--_gap) + var(--_thickness))}to{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 - var(--_gap) - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 + var(--_gap) + var(--_thickness));stroke-dashoffset:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .84 - var(--_gap) - var(--_thickness) + var(--_gap) + var(--_thickness))}}@keyframes active-grow{0%{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .16 - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .16 + var(--_thickness))}50%{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .87 - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .87 + var(--_thickness))}to{stroke-dasharray:calc((6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .16 - var(--_thickness)), calc((var(--_size) - var(--_thickness)) * 6.28319 / 2 - (6.28319 * (var(--_size) - var(--_thickness)) / 2 - var(--_gap)) * .16 + var(--_thickness))}}`;

package/src/m3/progress/circular-progress.d.ts

@@ -0,0 +1,19 @@
+import { ProgressBar } from '../../base/progressbar.js';
+/**
+ * TODO: wavy?
+ *
+ * @tag md-circular-progress
+ *
+ * @csspart container
+ * @csspart track
+ * @csspart active
+ */
+export declare class M3CircularProgress extends ProgressBar {
+    static styles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-circular-progress': M3CircularProgress;
+    }
+}

package/src/m3/progress/circular-progress.js

@@ -0,0 +1,29 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { customElement } from '../../core/decorators.js';
+import { ProgressBar } from '../../base/progressbar.js';
+import { circularProgressStyles } from './circular-progress-styles.css.js';
+/**
+ * TODO: wavy?
+ *
+ * @tag md-circular-progress
+ *
+ * @csspart container
+ * @csspart track
+ * @csspart active
+ */
+let M3CircularProgress = class M3CircularProgress extends ProgressBar {
+    static { this.styles = [circularProgressStyles]; }
+    render() {
+        const progress = Math.min(Math.max(this.value, 0), 100);
+        const style = {
+            '--_value': `${progress === 100 ? 1.08 : (progress) / 100}`,
+        };
+        return html `<div part="container" aria-hidden="true" style="${styleMap(style)}"><svg xmlns="http://www.w3.org/2000/svg"><circle part="track"></circle><circle part="active"></circle></svg></div>`;
+    }
+};
+M3CircularProgress = __decorate([
+    customElement('md-circular-progress')
+], M3CircularProgress);
+export { M3CircularProgress };

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const radioStyles = css`:host{--_d:var(--md-sys-motion-effects-default-duration);--_default:var(--_d) var(--md-sys-motion-effects-default);--_slow:var(--md-sys-motion-effects-slow-duration) var(--md-sys-motion-effects-slow);cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:20px;outline:0;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex;position:relative}.icon{z-index:1;width:20px;height:20px}.ring{fill:none;r:9px;stroke:var(--md-sys-color-on-surface-variant);stroke-width:2px;transition:stroke var(--_default);will-change:r, stroke-width}:host(:state(checked)) .ring{stroke:var(--md-sys-color-primary)}.dot{fill:var(--md-sys-color-primary);r:0px;will-change:r}:host(:state(checked)) .dot{r:5px}:host(:state(checking)) .ring{animation:check-ring-1 var(--_default), check-ring-2 var(--_slow) var(--_d)}:host(:state(checking)) .dot{animation:check-dot-1 var(--_default), check-dot-2 var(--_slow) var(--_d)}@keyframes check-ring-1{0%{r:9px;stroke-width:2px}to{r:4.5px;stroke-width:9px}}@keyframes check-ring-2{0%{r:8px;stroke-width:2px}to{r:9px;stroke-width:2px}}@keyframes check-dot-1{0%,to{r:0px}}@keyframes check-dot-2{0%{r:7px}to{r:5px}}:host(:state(unchecking)) .ring{animation:uncheck-ring-1 var(--_default), uncheck-ring-2 var(--_slow) var(--_d)}:host(:state(unchecking)) .dot{animation:uncheck-dot-1 var(--_default)}@keyframes uncheck-ring-1{0%{r:9px;stroke:var(--md-sys-color-primary);stroke-width:2px}to{r:8px;stroke:var(--md-sys-color-on-surface-variant);stroke-width:2px}}@keyframes uncheck-ring-2{0%{r:4.5px;stroke-width:9px}to{r:9px;stroke-width:2px}}@keyframes uncheck-dot-1{0%{fill:var(--md-sys-color-primary);r:5px}to{fill:var(--md-sys-color-on-surface-variant);r:7.5px}}:host([disabled]){pointer-events:none}:host([disabled]) .ring{stroke:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}:host([disabled]) .dot{fill:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}@media (forced-colors:active){:host{--md-sys-color-primary:SelectedItem;--md-sys-color-on-surface-variant:CanvasText}:host(:disabled) .ring{stroke:graytext}:host(:disabled) .dot{fill:graytext}}`;
+export const radioStyles = css`:host{--_d:var(--md-sys-motion-effects-default-duration);--_default:var(--_d) var(--md-sys-motion-effects-default);--_slow:var(--md-sys-motion-effects-slow-duration) var(--md-sys-motion-effects-slow);cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:20px;outline:0;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex;position:relative}.icon{z-index:1;width:20px;height:20px}.ring{fill:none;r:9px;stroke:var(--md-sys-color-on-surface-variant);stroke-width:2px;transition:stroke var(--_default);will-change:r, stroke-width}:host(:state(checked)) .ring{stroke:var(--md-sys-color-primary)}.dot{fill:var(--md-sys-color-primary);r:0px;will-change:r}:host(:state(checked)) .dot{r:5px}:host(:state(checking)) .ring{animation:check-ring-1 var(--_default), check-ring-2 var(--_slow) var(--_d)}:host(:state(checking)) .dot{animation:check-dot-1 var(--_default), check-dot-2 var(--_slow) var(--_d)}@keyframes check-ring-1{0%{r:9px;stroke-width:2px}to{r:4.5px;stroke-width:9px}}@keyframes check-ring-2{0%{r:8px;stroke-width:2px}to{r:9px;stroke-width:2px}}@keyframes check-dot-1{0%,to{r:0px}}@keyframes check-dot-2{0%{r:7px}to{r:5px}}:host(:state(unchecking)) .ring{animation:uncheck-ring-1 var(--_default), uncheck-ring-2 var(--_slow) var(--_d)}:host(:state(unchecking)) .dot{animation:uncheck-dot-1 var(--_default)}@keyframes uncheck-ring-1{0%{r:9px;stroke:var(--md-sys-color-primary);stroke-width:2px}to{r:8px;stroke:var(--md-sys-color-on-surface-variant);stroke-width:2px}}@keyframes uncheck-ring-2{0%{r:4.5px;stroke-width:9px}to{r:9px;stroke-width:2px}}@keyframes uncheck-dot-1{0%{fill:var(--md-sys-color-primary);r:5px}to{fill:var(--md-sys-color-on-surface-variant);r:7.5px}}:host([disabled]){pointer-events:none}:host([disabled]) .ring{stroke:oklch(from var(--md-sys-color-on-surface) l c h / 38%)}:host([disabled]) .dot{fill:oklch(from var(--md-sys-color-on-surface) l c h / 38%)}@media (forced-colors:active){:host{--md-sys-color-primary:SelectedItem;--md-sys-color-on-surface-variant:CanvasText}:host(:disabled) .ring{stroke:graytext}:host(:disabled) .dot{fill:graytext}}`;

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const sliderStyles = css`:host{--_target-size:48px;--_half-target:calc(var(--_target-size) / 2);--_handle-width-start:var(--md-slider-handle-width,4px);--_handle-width-end:var(--md-slider-handle-width,4px);--_handle-height:var(--md-slider-handle-height,44px);--_handle-shape:var(--md-slider-handle-shape,20px);--_handle-margin:6px;--_tick-size:var(--md-slider-tick-size,2px);--_track-shape:8px;--_track-height:var(--md-slider-track-height,16px);isolation:isolate;vertical-align:middle;min-inline-size:200px;display:inline-flex}md-focus-ring{width:16px;height:56px;inset:unset}:host([disabled]){opacity:.38}:host([disabled]) input{cursor:default;pointer-events:none}.container{--_start-px:calc(100% * var(--_start));--_end-px:calc(100% * var(--_end));--_inv-start-px:calc(100% * (1 - var(--_start)));--_inv-end-px:calc(100% * (1 - var(--_end)));--_mask-offset-start:calc(var(--_handle-width-start) / 2 + var(--_handle-margin));--_mask-offset-end:calc(var(--_handle-width-end) / 2 + var(--_handle-margin));--_cut-start:calc(var(--_start-px) + var(--_mask-offset-start));--_cut-end:calc(var(--_inv-end-px) + var(--_mask-offset-end));--_cut-inv-start:calc(var(--_inv-start-px) + var(--_mask-offset-start));--_cut-inv-end:calc(var(--_end-px) + var(--_mask-offset-end));block-size:var(--_target-size);pointer-events:none;touch-action:none;user-select:none;flex:1;align-items:center;display:flex;position:relative}.track,.tickmarks{block-size:var(--_track-height);align-items:center;display:flex;position:absolute;inset-inline:0}.track div,.tickmarks div{inset:0 calc(var(--_target-size) / 2);position:absolute}.track div{border-radius:var(--_track-shape)}.track .inactive-before,.track .inactive-after{background:var(--md-sys-color-secondary-container)}.track .active{background:var(--md-sys-color-primary)}:host([disabled]) .track .inactive-before,:host([disabled]) .track .inactive-after{background:var(--md-sys-color-on-surface);opacity:.315789}:host([disabled]) .track .active{background:var(--md-sys-color-on-surface)}.tickmarks div{--_tick-color:var(--md-sys-color-on-secondary-container);background-size:calc((100% - var(--_tick-size) * 2) / var(--_ticks)) 100%;background-image:radial-gradient(circle at var(--_tick-size) center, var(--_tick-color) 0, var(--_tick-color) calc(var(--_tick-size) / 2), transparent calc(var(--_tick-size) / 2))}.tickmarks .active{--_tick-color:var(--md-sys-color-on-primary)}:host([disabled]) .tickmarks div{--_tick-color:var(--md-sys-color-on-surface)}:host([disabled]) .tickmarks .active{--_tick-color:var(--md-sys-color-inverse-on-surface)}.inactive-before{clip-path:inset(0 var(--_cut-inv-start) 0 0 round 2px)}.inactive-after{clip-path:inset(0 0 0 var(--_cut-inv-end) round 2px)}.active{clip-path:inset(0 var(--_cut-end) 0 0 round 2px)}.ranged .active{clip-path:inset(0 var(--_cut-end) 0 var(--_cut-start) round 2px)}:host(:dir(rtl)) .inactive-before{clip-path:inset(0 0 0 var(--_cut-inv-start) round 2px)}:host(:dir(rtl)) .inactive-after{clip-path:inset(0 var(--_cut-inv-end) 0 0 round 2px)}:host(:dir(rtl)) .active{clip-path:inset(0 0 0 var(--_cut-end) round 2px)}:host(:dir(rtl)) .ranged .active{clip-path:inset(0 var(--_cut-start) 0 var(--_cut-end) round 2px)}.handles-padded{block-size:100%;inline-size:100%;padding-inline:calc(var(--_target-size) / 2);box-sizing:border-box;position:absolute;inset:0}.handles{block-size:100%;inline-size:100%;inline-size:calc(var(--_end-px) - var(--_start-px));position:relative;inset-block:0;inset-inline-start:var(--_start-px)}.handle{--md-ripple-color:var(--md-sys-color-primary);block-size:var(--_target-size);inline-size:var(--_target-size);border-radius:var(--_handle-shape);place-content:center;place-items:center;display:flex;position:absolute}.handle.start{inset-inline-start:calc(0px - var(--_half-target))}.handle.end{inset-inline-end:calc(0px - var(--_half-target))}.nub{height:var(--_handle-height);width:var(--_handle-width-end);border-radius:var(--_handle-shape);background:var(--md-sys-color-primary);transition:width var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);position:absolute}.start .nub{width:var(--_handle-width-start)}:host([disabled]) .nub{background:var(--md-sys-color-on-surface)}.onTop.isOverlapping .nub{border:1px solid var(--md-sys-color-surface)}.label{box-sizing:border-box;color:var(--md-sys-color-inverse-on-surface);background:var(--md-sys-color-inverse-surface);font:var(--md-sys-typography-label-large);opacity:0;border-radius:9999px;place-content:center;place-items:center;min-block-size:44px;min-inline-size:48px;padding:0 16px;transition:opacity 67ms linear;display:flex;position:absolute;inset-block-end:100%;transform:translateY(-2px)}:host(:not(:disabled)) :where(:has(input:active)) .label,:host(:not(:disabled)) :where(:has(input:focus-visible)) .label{opacity:1}@media (hover:hover) and (pointer:fine){:host(:not(:disabled)) :where(:has(input:hover)) .label{opacity:1}}input[type=range]{opacity:0;-webkit-tap-highlight-color:transparent;box-sizing:border-box;cursor:pointer;pointer-events:auto;appearance:none;width:100%;height:100%;margin:0;position:absolute}input[type=range]:focus{outline:none}:host(:not([disabled])) :has(input.start:active){--_handle-width-start:2px}:host(:not([disabled])) :has(input.end:active){--_handle-width-end:2px}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_target-size);inline-size:var(--_target-size);opacity:0;z-index:2}::-moz-range-thumb{appearance:none;block-size:var(--_target-size);inline-size:var(--_target-size);opacity:0;z-index:2;transform:scaleX(0)}.ranged input{--track-len:calc(100% - var(--_target-size));--mid-frac:calc(var(--_start) + ((var(--_end) - var(--_start)) / 2));--clip-px:calc(var(--_half-target) + var(--track-len) * var(--mid-frac))}.ranged input.start{clip-path:inset(0 calc(100% - var(--clip-px)) 0 0)}.ranged input.end{clip-path:inset(0 0 0 var(--clip-px))}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - var(--clip-px)))}.ranged input.end:dir(rtl){clip-path:inset(0 var(--clip-px) 0 0)}.onTop{z-index:1}`;
+export const sliderStyles = css`:host{--_target-width:48px;--_half-target:calc(var(--_target-width) / 2);--_handle-width-start:var(--md-slider-handle-width,4px);--_handle-width-end:var(--md-slider-handle-width,4px);--_handle-height:var(--md-slider-handle-height,44px);--_handle-shape:var(--md-slider-handle-shape,20px);--_handle-margin:6px;--_tick-size:var(--md-slider-tick-size,4px);--_tick-color:var(--md-sys-color-on-secondary-container);--_tick-active-color:var(--md-sys-color-on-primary);--_track-shape:var(--md-slider-track-shape,8px);--_track-height:var(--md-slider-track-height,16px);isolation:isolate;vertical-align:middle;min-inline-size:200px;display:inline-flex}:host([size=s]){--md-slider-track-height:24px}:host([size=m]){--md-slider-handle-height:52px;--md-slider-track-height:40px;--md-slider-track-shape:12px}:host([size=l]){--md-slider-handle-height:68px;--md-slider-track-height:56px;--md-slider-track-shape:16px}:host([size=xl]){--md-slider-handle-height:108px;--md-slider-track-height:96px;--md-slider-track-shape:28px}md-focus-ring{height:calc(var(--_handle-height) + 12px);width:16px;inset:unset}:host([disabled]){--_tick-color:oklch(from var(--md-sys-color-on-surface) l c h / .38);--_tick-active-color:var(--md-sys-color-inverse-on-surface)}:host([disabled]) input{cursor:default;pointer-events:none}.container{block-size:var(--_handle-height);pointer-events:none;touch-action:none;user-select:none;flex:1;align-items:center;display:flex;position:relative}.track,.tickmarks{block-size:var(--_track-height);align-items:center;display:flex;position:absolute;inset-inline:0}.track div,.tickmarks div{--_clip-1:calc(var(--_clip-offset) + var(--_handle-margin) + (100% - var(--_clip-offset) * 2) * var(--_start-value) + var(--_handle-width-start) / 2);--_clip-1-till-end:calc(var(--_clip-offset) + var(--_handle-margin) + (100% - var(--_clip-offset) * 2) * (1 - var(--_start-value)) + var(--_handle-width-start) / 2);--_clip-2:calc(var(--_clip-offset) + var(--_handle-margin) + (100% - var(--_clip-offset) * 2) * var(--_end-value) + var(--_handle-width-end) / 2);--_clip-2-till-end:calc(var(--_clip-offset) + var(--_handle-margin) + (100% - var(--_clip-offset) * 2) * (1 - var(--_end-value)) + var(--_handle-width-end) / 2);inset:0 calc(var(--_target-width) / 2);position:absolute}.track div{--_clip-offset:6px;inset:0 calc(var(--_target-width) / 2 - var(--_clip-offset))}.track .inactive-before,.track .inactive-after{background:var(--md-sys-color-secondary-container)}.track .active{background:var(--md-sys-color-primary)}:host([disabled]) .track .inactive-before,:host([disabled]) .track .inactive-after{background:oklch(from var(--md-sys-color-on-surface) l c h / .12)}:host([disabled]) .track .active{background:oklch(from var(--md-sys-color-on-surface) l c h / .38)}.tickmarks div{--_clip-offset:calc(var(--_tick-size) / 2);inset:0 calc(var(--_target-width) / 2 - var(--_clip-offset));background-size:calc((100% - var(--_tick-size)) / var(--_ticks)) 100%;background-image:radial-gradient(circle at calc(var(--_tick-size) / 2) center, var(--_tick-color) 0, var(--_tick-color) calc(var(--_tick-size) / 2), transparent calc(var(--_tick-size) / 2))}.tickmarks .active{--_tick-color:var(--_tick-active-color)}.inactive-before{clip-path:inset(0 var(--_clip-1-till-end) 0 0 round var(--_track-shape) 2px 2px var(--_track-shape))}.inactive-after{clip-path:inset(0 0 0 var(--_clip-2) round 2px var(--_track-shape) var(--_track-shape) 2px)}.active{clip-path:inset(0 var(--_clip-2-till-end) 0 0 round var(--_track-shape) 2px 2px var(--_track-shape))}.ranged .active{clip-path:inset(0 var(--_clip-2-till-end) 0 var(--_clip-1) round 2px)}:host(:dir(rtl)) .inactive-before{clip-path:inset(0 0 0 var(--_clip-1-till-end) round 2px var(--_track-shape) var(--_track-shape) 2px)}:host(:dir(rtl)) .inactive-after{clip-path:inset(0 var(--_clip-2) 0 0 round var(--_track-shape) 2px 2px var(--_track-shape))}:host(:dir(rtl)) .active{clip-path:inset(0 0 0 var(--_clip-2-till-end) round 2px var(--_track-shape) var(--_track-shape) 2px)}:host(:dir(rtl)) .ranged .active{clip-path:inset(0 var(--_clip-1) 0 var(--_clip-2-till-end) round 2px)}:host([stop]:not(:is([ticks],[range]))) .inactive-after:before{content:"";inline-size:var(--_tick-size);block-size:var(--_tick-size);background:var(--_tick-color);border-radius:50%;margin-block:auto;position:absolute;inset-block:0;inset-inline-end:calc(var(--_clip-offset) - var(--_tick-size) / 2)}.handles-padded{block-size:100%;inline-size:100%;padding-inline:calc(var(--_target-width) / 2);box-sizing:border-box;position:absolute;inset:0}.handles{block-size:100%;inline-size:100%;inline-size:calc(100% * (var(--_end-value) - var(--_start-value)));position:relative;inset-block:0;inset-inline-start:calc(100% * var(--_start-value))}.handle{block-size:var(--_handle-height);inline-size:var(--_target-width);place-content:center;place-items:center;display:flex;position:absolute}.handle.start{inset-inline-start:calc(0px - var(--_half-target))}.handle.end{inset-inline-end:calc(0px - var(--_half-target))}.nub{height:var(--_handle-height);width:var(--_handle-width-end);border-radius:var(--_handle-shape);background:var(--md-sys-color-primary);transition:width var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);position:absolute}.start .nub{width:var(--_handle-width-start)}:host([disabled]) .nub{background:oklch(from var(--md-sys-color-on-surface) l c h / .38)}.onTop.isOverlapping .nub{border:1px solid var(--md-sys-color-surface)}.label{box-sizing:border-box;color:var(--md-sys-color-inverse-on-surface);background:var(--md-sys-color-inverse-surface);font:var(--md-sys-typography-label-large);opacity:0;border-radius:9999px;place-content:center;place-items:center;min-block-size:44px;min-inline-size:48px;padding:0 16px;transition:opacity 67ms linear;display:flex;position:absolute;inset-block-end:100%;transform:translateY(-2px)}:host(:not(:disabled)) :where(:has(input:active)) .label,:host(:not(:disabled)) :where(:has(input:focus-visible)) .label{opacity:1}@media (hover:hover) and (pointer:fine){:host(:not(:disabled)) :where(:has(input:hover)) .label{opacity:1}}input[type=range]{opacity:0;-webkit-tap-highlight-color:transparent;box-sizing:border-box;cursor:pointer;pointer-events:auto;appearance:none;width:100%;height:100%;margin:0;position:absolute}input[type=range]:focus{outline:none}:host(:not([disabled])) :has(input.start:active){--_handle-width-start:2px}:host(:not([disabled])) :has(input.end:active){--_handle-width-end:2px}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_handle-height);inline-size:var(--_target-width);opacity:0;z-index:2}::-moz-range-thumb{appearance:none;block-size:var(--_handle-height);inline-size:var(--_target-width);opacity:0;z-index:2;transform:scaleX(0)}.ranged input{--_track-len:calc(100% - var(--_target-width));--_mid-frac:calc(var(--_start-value) + ((var(--_end-value) - var(--_start-value)) / 2));--_clip-input:calc(var(--_half-target) + var(--_track-len) * var(--_mid-frac))}.ranged input.start{clip-path:inset(0 calc(100% - var(--_clip-input)) 0 0)}.ranged input.end{clip-path:inset(0 0 0 var(--_clip-input))}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - var(--_clip-input)))}.ranged input.end:dir(rtl){clip-path:inset(0 var(--_clip-input) 0 0)}.onTop{z-index:1}`;

package/src/m3/slider/slider.d.ts

@@ -1,12 +1,15 @@
 import { Slider } from '../../base/slider.js';
 import '../focus-ring/focus-ring.js';
 /**
- * TODO: Add size variants
  * TODO: Add orientation: vertical
  *
  * @tag md-slider
  */
 export declare class M3Slider extends Slider {
+    size: 'xs' | 's' | 'm' | 'l' | 'xl';
+    stop: boolean;
+    ticks: boolean;
+    labeled: boolean;
     static styles: any[];
     render(): import("lit-html").TemplateResult<1>;
     private renderTrack;

package/src/m3/slider/slider.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, nothing } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
@@ -8,12 +8,18 @@ import { Slider } from '../../base/slider.js';
 import '../focus-ring/focus-ring.js';
 import { sliderStyles } from './slider-styles.css.js';
 /**
- * TODO: Add size variants
  * TODO: Add orientation: vertical
  *
  * @tag md-slider
  */
 let M3Slider = class M3Slider extends Slider {
+    constructor() {
+        super(...arguments);
+        this.size = 'xs';
+        this.stop = false;
+        this.ticks = false;
+        this.labeled = false;
+    }
     static { this.styles = [sliderStyles]; }
     render() {
         const step = this.step === 0 ? 1 : this.step;
@@ -23,8 +29,8 @@ let M3Slider = class M3Slider extends Slider {
             : 0;
         const endFraction = ((this.renderValueEnd ?? this.min) - this.min) / range;
         const containerStyles = {
-            '--_start': String(startFraction),
-            '--_end': String(endFraction),
+            '--_start-value': String(startFraction),
+            '--_end-value': String(endFraction),
             '--_ticks': String(range / step),
         };
         const containerClasses = { ranged: this.range };
@@ -76,6 +82,18 @@ let M3Slider = class M3Slider extends Slider {
         })}"><md-focus-ring part="focus-ring" for="${name}"></md-focus-ring><div class="nub"></div>${when(this.labeled, () => this.renderLabel(label))}</div>`;
     }
 };
+__decorate([
+    property({ reflect: true })
+], M3Slider.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], M3Slider.prototype, "stop", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], M3Slider.prototype, "ticks", void 0);
+__decorate([
+    property({ type: Boolean })
+], M3Slider.prototype, "labeled", void 0);
 M3Slider = __decorate([
     customElement('md-slider')
 ], M3Slider);

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const tabStyles = css`:host{--md-focus-ring-shape:12px;box-sizing:border-box;color:var(--md-sys-color-on-surface-variant);cursor:pointer;font:var(--md-sys-typography-title-small);-webkit-tap-highlight-color:transparent;text-wrap-mode:nowrap;user-select:none;-webkit-user-select-:none;outline:none;flex-shrink:0;justify-content:center;padding:0 16px;display:inline-flex;position:relative}:host([selected]){color:var(--_tab-selected-color);& md-focus-ring{margin-bottom:calc(var(--_indicator-height) + 2px)}& [part=indicator]{opacity:1}}:host([disabled]){pointer-events:none;color:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}[part=content]{flex-direction:var(--_tab-flex-dir,row);align-items:center;gap:var(--_tab-gap,8px);height:var(--_tab-height,48px);justify-content:center;display:inline-flex;position:relative}[part=indicator]{height:var(--_indicator-height);background-color:var(--md-sys-color-primary);opacity:0;transform-origin:0;pointer-events:none;will-change:transform, opacity;border-radius:3px 3px 0 0;min-width:24px;position:absolute;bottom:0;left:2px;right:2px}::slotted([slot=icon]){fill:currentColor;block-size:1em;inline-size:1em;font-size:24px}`;
+export const tabStyles = css`:host{--md-focus-ring-shape:12px;box-sizing:border-box;color:var(--md-sys-color-on-surface-variant);cursor:pointer;font:var(--md-sys-typography-title-small);-webkit-tap-highlight-color:transparent;text-wrap-mode:nowrap;user-select:none;-webkit-user-select-:none;outline:none;flex-shrink:0;justify-content:center;padding:0 16px;display:inline-flex;position:relative}:host([selected]){color:var(--_tab-selected-color);& md-focus-ring{margin-bottom:calc(var(--_indicator-height) + 2px)}& [part=indicator]{opacity:1}}:host([disabled]){pointer-events:none;color:oklch(from var(--md-sys-color-on-surface) l c h / 38%)}[part=content]{flex-direction:var(--_tab-flex-dir,row);align-items:center;gap:var(--_tab-gap,8px);height:var(--_tab-height,48px);justify-content:center;display:inline-flex;position:relative}[part=indicator]{height:var(--_indicator-height);background-color:var(--md-sys-color-primary);opacity:0;transform-origin:0;pointer-events:none;will-change:transform, opacity;border-radius:3px 3px 0 0;min-width:24px;position:absolute;bottom:0;left:2px;right:2px}::slotted([slot=icon]){fill:currentColor;block-size:1em;inline-size:1em;font-size:24px}`;