@vollowx/seele 0.14.0 → 0.14.2

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);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-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}`;

package/src/m3/styles/color-default-dark.css

@@ -0,0 +1,51 @@
+:root {
+  --md-sys-color-primary: rgb(203 190 255);
+  --md-sys-color-surface-tint: rgb(203 190 255);
+  --md-sys-color-on-primary: rgb(51 39 94);
+  --md-sys-color-primary-container: rgb(73 62 118);
+  --md-sys-color-on-primary-container: rgb(231 222 255);
+  --md-sys-color-secondary: rgb(202 195 220);
+  --md-sys-color-on-secondary: rgb(50 46 65);
+  --md-sys-color-secondary-container: rgb(72 68 88);
+  --md-sys-color-on-secondary-container: rgb(230 223 249);
+  --md-sys-color-tertiary: rgb(238 184 203);
+  --md-sys-color-on-tertiary: rgb(73 37 52);
+  --md-sys-color-tertiary-container: rgb(98 59 75);
+  --md-sys-color-on-tertiary-container: rgb(255 217 229);
+  --md-sys-color-error: rgb(255 180 171);
+  --md-sys-color-on-error: rgb(105 0 5);
+  --md-sys-color-error-container: rgb(147 0 10);
+  --md-sys-color-on-error-container: rgb(255 218 214);
+  --md-sys-color-background: rgb(20 19 24);
+  --md-sys-color-on-background: rgb(230 225 233);
+  --md-sys-color-surface: rgb(20 19 24);
+  --md-sys-color-on-surface: rgb(230 225 233);
+  --md-sys-color-surface-variant: rgb(72 69 78);
+  --md-sys-color-on-surface-variant: rgb(201 196 207);
+  --md-sys-color-outline: rgb(147 143 153);
+  --md-sys-color-outline-variant: rgb(72 69 78);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(230 225 233);
+  --md-sys-color-inverse-on-surface: rgb(49 47 53);
+  --md-sys-color-inverse-primary: rgb(97 86 144);
+  --md-sys-color-primary-fixed: rgb(231 222 255);
+  --md-sys-color-on-primary-fixed: rgb(29 17 72);
+  --md-sys-color-primary-fixed-dim: rgb(203 190 255);
+  --md-sys-color-on-primary-fixed-variant: rgb(73 62 118);
+  --md-sys-color-secondary-fixed: rgb(230 223 249);
+  --md-sys-color-on-secondary-fixed: rgb(29 25 43);
+  --md-sys-color-secondary-fixed-dim: rgb(202 195 220);
+  --md-sys-color-on-secondary-fixed-variant: rgb(72 68 88);
+  --md-sys-color-tertiary-fixed: rgb(255 217 229);
+  --md-sys-color-on-tertiary-fixed: rgb(48 17 31);
+  --md-sys-color-tertiary-fixed-dim: rgb(238 184 203);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(98 59 75);
+  --md-sys-color-surface-dim: rgb(20 19 24);
+  --md-sys-color-surface-bright: rgb(58 56 62);
+  --md-sys-color-surface-container-lowest: rgb(15 13 19);
+  --md-sys-color-surface-container-low: rgb(28 27 32);
+  --md-sys-color-surface-container: rgb(32 31 36);
+  --md-sys-color-surface-container-high: rgb(43 41 47);
+  --md-sys-color-surface-container-highest: rgb(54 52 58);
+}

package/src/m3/styles/color-default-light.css

@@ -0,0 +1,51 @@
+:root {
+  --md-sys-color-primary: rgb(97 86 144);
+  --md-sys-color-surface-tint: rgb(97 86 144);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(231 222 255);
+  --md-sys-color-on-primary-container: rgb(73 62 118);
+  --md-sys-color-secondary: rgb(96 91 113);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(230 223 249);
+  --md-sys-color-on-secondary-container: rgb(72 68 88);
+  --md-sys-color-tertiary: rgb(125 82 99);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(255 217 229);
+  --md-sys-color-on-tertiary-container: rgb(98 59 75);
+  --md-sys-color-error: rgb(186 26 26);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(255 218 214);
+  --md-sys-color-on-error-container: rgb(147 0 10);
+  --md-sys-color-background: rgb(253 247 255);
+  --md-sys-color-on-background: rgb(28 27 32);
+  --md-sys-color-surface: rgb(253 247 255);
+  --md-sys-color-on-surface: rgb(28 27 32);
+  --md-sys-color-surface-variant: rgb(230 224 236);
+  --md-sys-color-on-surface-variant: rgb(72 69 78);
+  --md-sys-color-outline: rgb(121 117 127);
+  --md-sys-color-outline-variant: rgb(201 196 207);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(49 47 53);
+  --md-sys-color-inverse-on-surface: rgb(244 239 247);
+  --md-sys-color-inverse-primary: rgb(203 190 255);
+  --md-sys-color-primary-fixed: rgb(231 222 255);
+  --md-sys-color-on-primary-fixed: rgb(29 17 72);
+  --md-sys-color-primary-fixed-dim: rgb(203 190 255);
+  --md-sys-color-on-primary-fixed-variant: rgb(73 62 118);
+  --md-sys-color-secondary-fixed: rgb(230 223 249);
+  --md-sys-color-on-secondary-fixed: rgb(29 25 43);
+  --md-sys-color-secondary-fixed-dim: rgb(202 195 220);
+  --md-sys-color-on-secondary-fixed-variant: rgb(72 68 88);
+  --md-sys-color-tertiary-fixed: rgb(255 217 229);
+  --md-sys-color-on-tertiary-fixed: rgb(48 17 31);
+  --md-sys-color-tertiary-fixed-dim: rgb(238 184 203);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(98 59 75);
+  --md-sys-color-surface-dim: rgb(221 216 224);
+  --md-sys-color-surface-bright: rgb(253 247 255);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(247 242 250);
+  --md-sys-color-surface-container: rgb(241 236 244);
+  --md-sys-color-surface-container-high: rgb(236 230 238);
+  --md-sys-color-surface-container-highest: rgb(230 225 233);
+}

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

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

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const tooltipStyles = css`:host{background-color:var(--md-sys-color-inverse-surface);box-sizing:border-box;color:#0000;font:var(--md-sys-typography-body-small);max-width:var(--_max-width,300px);opacity:0;pointer-events:none;z-index:800;border-radius:4px;align-items:center;width:max-content;min-height:24px;padding:4px 8px;display:flex;position:absolute;top:0;left:0;transform:scaleY(.35)}:host(:state(closed)){display:none}:host(:state(opening):not([force-invisible])){color:var(--md-sys-color-inverse-on-surface);opacity:1;pointer-events:auto;transition:color linear 67ms 67ms, opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);transform:scaleY(1)}:host(:state(opened):not([force-invisible])){color:var(--md-sys-color-inverse-on-surface);opacity:1;pointer-events:auto;transform:scaleY(1)}:host(:state(closing):not([force-invisible])){color:#0000;opacity:0;transition:color linear 67ms, opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);transform:scaleY(.35)}`;
+export const tooltipStyles = css`:host{background-color:var(--md-sys-color-inverse-surface);color:#0000;font:var(--md-sys-typography-body-small);max-width:var(--_max-width,300px);opacity:0;width:max-content;min-height:24px;transition:color linear 67ms, opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), display var(--md-sys-motion-spatial-fast-duration) allow-discrete, overlay var(--md-sys-motion-spatial-fast-duration) allow-discrete;border-radius:4px;align-items:center;padding:4px 8px;display:flex;top:0;left:0;transform:scaleY(.5)}:host(:popover-open){color:var(--md-sys-color-inverse-on-surface);opacity:1;transition:color 67ms linear 67ms, opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast), transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);transform:scaleY(1)}@starting-style{:host(:popover-open){color:#0000;opacity:0;transform:scaleY(.5)}}`;

package/src/m3/tooltip/tooltip.d.ts

@@ -1,15 +1,8 @@
 import { Tooltip } from '../../base/tooltip.js';
 /**
  * @tag md-tooltip
- *
- * TODO: should not disable SSR, since the raw text would flash, but could try
- * to SSR a simpler one
  */
 export declare class M3Tooltip extends Tooltip {
-    readonly _durations: {
-        show: number;
-        hide: number;
-    };
     static styles: any[];
 }
 declare global {

package/src/m3/tooltip/tooltip.js

@@ -4,16 +4,9 @@ import { Tooltip } from '../../base/tooltip.js';
 import { tooltipStyles } from './tooltip-styles.css.js';
 /**
  * @tag md-tooltip
- *
- * TODO: should not disable SSR, since the raw text would flash, but could try
- * to SSR a simpler one
  */
 let M3Tooltip = class M3Tooltip extends Tooltip {
-    constructor() {
-        super(...arguments);
-        this._durations = { show: 150, hide: 150 };
-    }
-    static { this.styles = [tooltipStyles]; }
+    static { this.styles = [...super.styles, tooltipStyles]; }
 };
 M3Tooltip = __decorate([
     customElement('md-tooltip', true)

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

@@ -1,35 +0,0 @@
-import { ReactiveController, ReactiveControllerHost } from 'lit';
-import { InternalsAttachedInterface } from '../mixins/internals-attached.js';
-import { MiddlewareData, Placement, Strategy } from '@floating-ui/dom';
-export declare function transformOriginFromArrow(placement: Placement, arrowData?: MiddlewareData['arrow']): string;
-export interface PopoverControllerConfig {
-    popover: () => HTMLElement | null;
-    trigger: () => HTMLElement | null;
-    positioning: {
-        placement: () => Placement;
-        strategy: () => Strategy;
-        offset: () => number;
-        windowPadding: () => number;
-    };
-    durations: {
-        open: () => number;
-        close: () => number;
-    };
-    onClickAway?: () => void;
-}
-export declare class PopoverController implements ReactiveController {
-    #private;
-    host: ReactiveControllerHost & InternalsAttachedInterface;
-    private readonly config;
-    private _open;
-    get open(): boolean;
-    private cleanupAutoUpdate?;
-    constructor(host: ReactiveControllerHost & InternalsAttachedInterface, config: PopoverControllerConfig);
-    hostConnected(): void;
-    hostDisconnected(): void;
-    animateOpen(): Promise<void>;
-    animateClose(): Promise<void>;
-    private cleanup;
-    private _dummyArrow;
-    reposition(): Promise<void>;
-}

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

@@ -1,163 +0,0 @@
-import { isServer } from 'lit';
-import { internals, } from '../mixins/internals-attached.js';
-import { autoUpdate, computePosition, arrow, flip, offset, shift, } from '@floating-ui/dom';
-export function transformOriginFromArrow(placement, arrowData) {
-    const { x: arrowX, y: arrowY } = arrowData || {};
-    const [side] = placement.split('-');
-    let originX = '';
-    let originY = '';
-    if (side === 'top') {
-        originX = arrowX != null ? `${arrowX}px` : 'center';
-        originY = 'bottom';
-    }
-    else if (side === 'bottom') {
-        originX = arrowX != null ? `${arrowX}px` : 'center';
-        originY = 'top';
-    }
-    else if (side === 'left') {
-        originX = 'right';
-        originY = arrowY != null ? `${arrowY}px` : 'center';
-    }
-    else if (side === 'right') {
-        originX = 'left';
-        originY = arrowY != null ? `${arrowY}px` : 'center';
-    }
-    return `${originX} ${originY}`;
-}
-export class PopoverController {
-    get open() {
-        return this._open;
-    }
-    constructor(host, config) {
-        this._open = false;
-        // Different from those in the Tooltip, these timers are used to manage the
-        // animation timing.
-        this.#openTimer = null;
-        this.#closeTimer = null;
-        // TODO: Provide the ability to specify an arrow element.
-        this._dummyArrow = isServer ? null : document.createElement('div');
-        this.#handleClickAway = (event) => {
-            const trigger = this.config.trigger();
-            const popover = this.config.popover();
-            const path = event.composedPath();
-            if (trigger && path.includes(trigger))
-                return;
-            if (popover && path.includes(popover))
-                return;
-            this.config.onClickAway?.();
-        };
-        (this.host = host).addController(this);
-        this.config = config;
-    }
-    hostConnected() {
-        // Initial state
-        if (!this._open) {
-            this.host[internals].states.add('closed');
-        }
-    }
-    hostDisconnected() {
-        this.cleanupAutoUpdate?.();
-        window.removeEventListener('pointerup', this.#handleClickAway);
-    }
-    // Different from those in the Tooltip, these timers are used to manage the
-    // animation timing.
-    #openTimer;
-    #closeTimer;
-    async animateOpen() {
-        if (this._open)
-            return;
-        this._open = true;
-        // Prevent the click that triggered the open from immediately closing it
-        // TODO: Use a global event listener to manage this more effectively
-        setTimeout(() => {
-            if (this._open) {
-                window.addEventListener('pointerup', this.#handleClickAway);
-            }
-        }, 0);
-        clearTimeout(this.#openTimer);
-        clearTimeout(this.#closeTimer);
-        const openDuration = this.config.durations.open();
-        this.host[internals].states.delete('closed');
-        this.host[internals].states.delete('closing');
-        const trigger = this.config.trigger();
-        const popover = this.config.popover();
-        if (trigger && popover) {
-            this.cleanupAutoUpdate?.();
-            this.cleanupAutoUpdate = autoUpdate(trigger, popover, () => this.reposition());
-            // Initial position
-            await this.reposition();
-        }
-        if (openDuration === 0) {
-            this.host[internals].states.add('opened');
-        }
-        else {
-            // Wait for a frame to ensure the element is rendered with base styles
-            // e.g. (opacity 0) before adding the opening state e.g. (opacity 1) to
-            // trigger transition.
-            requestAnimationFrame(() => {
-                if (this._open) {
-                    this.host[internals].states.add('opening');
-                }
-            });
-            this.#openTimer = setTimeout(() => {
-                this.host[internals].states.delete('opening');
-                this.host[internals].states.add('opened');
-            }, openDuration);
-        }
-    }
-    async animateClose() {
-        if (!this._open)
-            return;
-        this._open = false;
-        window.removeEventListener('pointerup', this.#handleClickAway);
-        clearTimeout(this.#openTimer);
-        clearTimeout(this.#closeTimer);
-        const closeDuration = this.config.durations.close();
-        const wasOpened = this.host[internals].states.has('opened');
-        this.host[internals].states.delete('opened');
-        this.host[internals].states.delete('opening');
-        if (closeDuration === 0 || !wasOpened) {
-            this.cleanup();
-            this.host[internals].states.delete('closing');
-            this.host[internals].states.add('closed');
-        }
-        else {
-            this.host[internals].states.add('closing');
-            this.#closeTimer = setTimeout(() => {
-                this.cleanup();
-                this.host[internals].states.delete('closing');
-                this.host[internals].states.add('closed');
-            }, closeDuration);
-        }
-    }
-    cleanup() {
-        this.cleanupAutoUpdate?.();
-        this.cleanupAutoUpdate = undefined;
-    }
-    async reposition() {
-        const trigger = this.config.trigger();
-        const popover = this.config.popover();
-        if (!trigger || !popover)
-            return Promise.resolve();
-        return computePosition(trigger, popover, {
-            placement: this.config.positioning.placement(),
-            strategy: this.config.positioning.strategy(),
-            middleware: [
-                offset(this.config.positioning.offset()),
-                flip({ padding: this.config.positioning.windowPadding() }),
-                shift({
-                    padding: this.config.positioning.windowPadding(),
-                    crossAxis: true,
-                }),
-                arrow({ element: this._dummyArrow }),
-            ],
-        }).then(({ x, y, placement, middlewareData }) => {
-            Object.assign(popover.style, {
-                left: `${x}px`,
-                top: `${y}px`,
-                transformOrigin: transformOriginFromArrow(placement, middlewareData.arrow),
-            });
-        });
-    }
-    #handleClickAway;
-}

package/src/m3/loading-indicator/loading-indicator-styles.css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export const loadingIndicatorStyles = css`:host{aspect-ratio:1;background-color:var(--md-sys-color-surface);border-radius:9999px;place-items:center;width:48px;display:grid}:host([contained]){background-color:var(--md-sys-color-primary-container)}canvas{width:82%;height:82%;display:block}`;