@vollowx/seele 0.13.10 → 0.14.1

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

package/src/m3/switch/switch.js

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

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const tabsStyles = css`:host{--_tab-selected-color:var(--md-sys-color-primary);--_indicator-height:3px;box-sizing:border-box;flex-direction:column;display:flex;position:relative}[part=tablist]{border-bottom:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none;display:flex;overflow:auto hidden}::slotted(md-tab),::slotted(md-secondary-tab){flex:1}:host([iconsabove]){--_tab-flex-dir:column;--_tab-height:64px;--_tab-gap:2px}@media (forced-colors:active){[part=indicator]{background-color:highlight}}`;
+export const tabsStyles = css`:host{--_tab-selected-color:var(--md-sys-color-primary);--_indicator-height:3px;box-sizing:border-box;flex-direction:column;display:flex;position:relative}[part=tablist]{border-bottom:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none;display:flex;overflow:auto hidden}::slotted(md-tab),::slotted(md-secondary-tab){flex:1}:host([icons-above]){--_tab-flex-dir:column;--_tab-height:64px;--_tab-gap:2px}@media (forced-colors:active){[part=indicator]{background-color:highlight}}`;

package/src/m3/tab/tabs.js

@@ -23,7 +23,7 @@ let M3Tabs = class M3Tabs extends Tabs {
     }
 };
 __decorate([
-    property({ type: Boolean, reflect: true })
+    property({ type: Boolean, reflect: true, attribute: 'icons-above' })
 ], M3Tabs.prototype, "iconsAbove", void 0);
 M3Tabs = __decorate([
     customElement('md-tabs')

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

@@ -12,14 +12,14 @@ let M3FilledTextField = class M3FilledTextField extends Input {
     }
     static { this.styles = [textFieldStyles]; }
     render() {
-        return html `<md-filled-field label="${this.label}" supportingtext="${this.supportingText}" ?populated="${!!this.value}" ?disabled="${this.disabled}" ?focused="${this.focused}" ?error="${this.checkValidity() === false}">${super.render()}</md-filled-field>`;
+        return html `<md-filled-field label="${this.label}" supporting-text="${this.supportingText}" ?populated="${!!this.value}" ?disabled="${this.disabled}" ?focused="${this.focused}" ?error="${this.checkValidity() === false}">${super.render()}</md-filled-field>`;
     }
 };
 __decorate([
     property({ reflect: true })
 ], M3FilledTextField.prototype, "label", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, attribute: 'supporting-text' })
 ], M3FilledTextField.prototype, "supportingText", void 0);
 M3FilledTextField = __decorate([
     customElement('md-filled-text-field')

package/src/m3/text-field/outlined-text-field.js

@@ -12,14 +12,14 @@ let M3OutlinedTextField = class M3OutlinedTextField extends Input {
     }
     static { this.styles = [textFieldStyles]; }
     render() {
-        return html `<md-outlined-field label="${this.label}" supportingtext="${this.supportingText}" ?populated="${!!this.value}" ?disabled="${this.disabled}" ?focused="${this.focused}" ?error="${this.checkValidity() === false}">${super.render()}<slot slot="start" name="start"></slot><slot slot="end" name="end"></slot></md-outlined-field>`;
+        return html `<md-outlined-field label="${this.label}" supporting-text="${this.supportingText}" ?populated="${!!this.value}" ?disabled="${this.disabled}" ?focused="${this.focused}" ?error="${this.checkValidity() === false}">${super.render()}<slot slot="start" name="start"></slot><slot slot="end" name="end"></slot></md-outlined-field>`;
     }
 };
 __decorate([
     property({ reflect: true })
 ], M3OutlinedTextField.prototype, "label", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, attribute: 'supporting-text' })
 ], M3OutlinedTextField.prototype, "supportingText", void 0);
 M3OutlinedTextField = __decorate([
     customElement('md-outlined-text-field')

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([forceinvisible])){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([forceinvisible])){color:var(--md-sys-color-inverse-on-surface);opacity:1;pointer-events:auto;transform:scaleY(1)}:host(:state(closing):not([forceinvisible])){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);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)}`;

package/src/core/focus-visible.d.ts

@@ -1,2 +0,0 @@
-export declare let focusVisible: boolean;
-export declare function setFocusVisible(value: boolean): void;

package/src/core/focus-visible.js

@@ -1,13 +0,0 @@
-import { isServer } from 'lit';
-export let focusVisible = false;
-export function setFocusVisible(value) {
-    focusVisible = value;
-}
-if (!isServer) {
-    window.addEventListener('keydown', () => (focusVisible = true), {
-        capture: true,
-    });
-    window.addEventListener('mousedown', () => (focusVisible = false), {
-        capture: true,
-    });
-}

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

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export const popupStyles = css`:host{background:var(--md-sys-color-surface-container);box-shadow:var(--md-sys-elevation-shadow-2);color:var(--md-sys-color-on-surface);opacity:0;transition:opacity var(--md-sys-motion-effects-fast-duration), transform var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast), display var(--md-sys-motion-spatial-default-duration) allow-discrete, overlay var(--md-sys-motion-spatial-default-duration) allow-discrete;border-radius:16px;transform:scaleY(.35)}slot{opacity:0;transition:opacity 67ms}:host(:popover-open){opacity:1;transition:opacity 67ms linear, transform var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);transform:scaleY(1);& slot{opacity:1;transition:opacity 67ms linear 67ms}}@starting-style{:host(:popover-open){opacity:0;transform:scaleY(.35);& slot{opacity:0}}}`;

package/src/m3/experimental/popup.js

@@ -1,11 +0,0 @@
-import { __decorate } from "tslib";
-import { customElement } from 'lit/decorators.js';
-import { Popup } from '../../base/experimental/popup.js';
-import { popupStyles } from './popup-styles.css.js';
-let M3Popup = class M3Popup extends Popup {
-    static { this.styles = [...super.styles, popupStyles]; }
-};
-M3Popup = __decorate([
-    customElement('md-popup')
-], M3Popup);
-export { M3Popup };