@vollowx/seele 0.13.7 → 0.13.9

package/src/m3/tab/tabs.js

@@ -1,7 +1,5 @@
 import { __decorate } from "tslib";
-import { html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { computePosition, autoUpdate } from '@floating-ui/dom';
+import { customElement, property } from 'lit/decorators.js';
 import { Tabs } from '../../base/tabs.js';
 import { tabsStyles } from './tabs-styles.css.js';
 /**
@@ -9,52 +7,21 @@ import { tabsStyles } from './tabs-styles.css.js';
  *
  * @tag md-tabs
  *
- * @csspart indicator
- *
  * @slot - tabs
  */
 let M3Tabs = class M3Tabs extends Tabs {
     constructor() {
         super(...arguments);
-        this.secondary = false;
         this.iconsAbove = false;
     }
-    #cleanup;
     static { this.styles = [tabsStyles]; }
-    render() {
-        return html `${super.render()}<div part="indicator" role="presentation"></div>`;
-    }
-    selectTab(selectedTab) {
-        super.selectTab(selectedTab);
-        // It's kinda ridiculous to use floating-ui on such simple element, but I
-        // do not want to have indicators in each tab either.
-        // Another solution is using CSS anchor, which does not work across Shadow
-        // DOM for now.
-        this.#cleanup?.();
-        const updatePosition = () => {
-            computePosition(selectedTab, this.$indicator, {
-                placement: 'bottom',
-                strategy: 'absolute',
-            }).then(({ x }) => {
-                const left = (this.secondary ? x : (x + 2));
-                const width = this.secondary
-                    ? selectedTab.offsetWidth
-                    : (selectedTab.$content.offsetWidth - 4);
-                Object.assign(this.$indicator.style, {
-                    left: `${left}px`,
-                    width: `${width}px`,
-                });
-            });
-        };
-        this.#cleanup = autoUpdate(selectedTab, this.$indicator, updatePosition);
+    _selectTab(selectedTab) {
+        const previousTab = this.$tabs.find((t) => t.selected);
+        super._selectTab(selectedTab);
+        if (previousTab && previousTab !== selectedTab)
+            selectedTab.animateIndicator(previousTab);
     }
 };
-__decorate([
-    query('[part="indicator"]')
-], M3Tabs.prototype, "$indicator", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], M3Tabs.prototype, "secondary", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], M3Tabs.prototype, "iconsAbove", void 0);

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

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const toolbarStyles = css`:host{--_padding:16px;--_gap:32px;--_container-color:var(--md-sys-color-surface-container);--_on-color:var(--md-sys-color-on-surface);background-color:color-mix(in srgb, var(--_container-color) var(--_container-opacity,100%), transparent);box-sizing:border-box;color:color-mix(in srgb, var(--_on-color) var(--_on-opacity,100%), transparent);align-items:center;width:100%;height:64px;display:flex}[part=container]{box-sizing:border-box;align-items:center;gap:var(--_gap);height:64px;padding:0 var(--_padding);flex:auto;justify-content:space-between;width:100%;display:flex}[part=fab-slot]{justify-content:flex-end;align-items:center;display:flex}:host(:not([orientation=vertical])) ::slotted([slot=fab]){margin-inline-start:8px}:host([orientation=vertical]) ::slotted([slot=fab]){margin-block-start:8px}:host([type=floating]){--_padding:12px;--_gap:4px;--_container-color:var(--md-sys-color-surface-container-high);box-shadow:none;background:0 0;width:fit-content;max-width:calc(100% - 32px);& [part=container]{background-color:color-mix(in srgb, var(--_container-color) var(--_container-opacity,100%), transparent);box-shadow:var(--md-toolbar-shadow,var(--md-sys-elevation-shadow-3));border-radius:32px;width:fit-content}& ::slotted(md-button),& ::slotted(md-button-toggle),& ::slotted(md-icon-button),& ::slotted(md-icon-button-toggle){--md-focus-ring-shape:calc(var(--_h) / 2);border-radius:calc(var(--_h) / 2)}}:host([type=floating][orientation=vertical]){flex-direction:column;align-items:stretch;width:64px;min-height:auto;& [part=container]{height:fit-content;padding:var(--_padding) 0;flex-direction:column;width:100%}}::slotted(md-button-toggle[variant=tonal]:not(:state(checked))),::slotted(md-icon-button-toggle[variant=tonal]:not(:state(checked))){--_background-color:transparent}:host([color=vibrant]){--_container-color:var(--md-sys-color-primary-container);--_on-color:var(--md-sys-color-on-primary-container);& ::slotted(md-icon-button[variant=text]),& ::slotted(md-icon-button-toggle[variant=tonal]){--_text-color:var(--md-sys-color-on-primary-container)}& ::slotted(md-icon-button-toggle[variant=tonal]:state(checked)){--_background-color:var(--md-sys-color-surface-container);--_text-color:var(--md-sys-color-on-surface)}}`;
+export const toolbarStyles = css`:host{--_padding:16px;--_gap:32px;--_container-color:var(--md-sys-color-surface-container);--_on-color:var(--md-sys-color-on-surface);background-color:color-mix(in srgb, var(--_container-color) var(--_container-opacity,100%), transparent);box-sizing:border-box;color:color-mix(in srgb, var(--_on-color) var(--_on-opacity,100%), transparent);align-items:center;width:100%;height:64px;display:flex}[part=container]{box-sizing:border-box;align-items:center;gap:var(--_gap);height:64px;padding:0 var(--_padding);flex:auto;justify-content:space-between;width:100%;display:flex}[part=fab-slot]{justify-content:flex-end;align-items:center;display:flex}:host(:not([orientation=vertical])) ::slotted([slot=fab]){margin-inline-start:8px}:host([orientation=vertical]) ::slotted([slot=fab]){margin-block-start:8px}:host([type=floating]){--_padding:12px;--_gap:4px;--_container-color:var(--md-sys-color-surface-container-high);box-shadow:none;background:0 0;width:fit-content;max-width:calc(100% - 32px);& [part=container]{background-color:color-mix(in srgb, var(--_container-color) var(--_container-opacity,100%), transparent);box-shadow:var(--md-toolbar-shadow,var(--md-sys-elevation-shadow-3));border-radius:32px;width:fit-content}& ::slotted(md-button),& ::slotted(md-button-toggle),& ::slotted(md-icon-button),& ::slotted(md-icon-button-toggle){--md-focus-ring-shape:calc(var(--_h) / 2);border-radius:calc(var(--_h) / 2)}}:host([type=floating][orientation=vertical]){flex-direction:column;align-items:stretch;width:64px;min-height:auto;& [part=container]{height:fit-content;padding:var(--_padding) 0;flex-direction:column;width:100%}}::slotted(md-button-toggle[variant=tonal]:not(:state(checked))),::slotted(md-icon-button-toggle[variant=tonal]:not(:state(checked))){--_background-color:transparent}:host([color=vibrant]){--_container-color:var(--md-sys-color-primary-container);--_on-color:var(--md-sys-color-on-primary-container);& ::slotted(md-icon-button[variant=text]),& ::slotted(md-icon-button-toggle[variant=tonal]){--_text-color:var(--md-sys-color-on-primary-container)}& ::slotted(md-icon-button-toggle[variant=tonal]:state(checked)){--_background-color:var(--md-sys-color-surface-container);--_text-color:var(--md-sys-color-on-surface)}}@media (forced-colors:active){[part=container]{outline:1px solid canvastext}}`;

package/src/win98/button/button-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const buttonStyles = css`:host{-webkit-font-smoothing:none;box-sizing:border-box;color:#0000;text-shadow:0 0 #222;-webkit-user-select:none;user-select:none;cursor:default;background:silver;border:none;border-radius:0;justify-content:center;align-items:center;min-width:75px;min-height:23px;padding:0 12px;font-family:Arial;font-size:11px;display:inline-flex;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px #dfdfdf}:host(:active){text-shadow:1px 1px #222;box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px gray}:host(:focus){outline-offset:-4px;outline:1px dotted #000}:host(:disabled){color:gray;text-shadow:1px 1px #fff;pointer-events:none}`;
+export const buttonStyles = css`:host{-webkit-font-smoothing:none;box-sizing:border-box;color:#0000;text-shadow:0 0 #222;-webkit-user-select:none;user-select:none;cursor:default;background:silver;border:none;border-radius:0;justify-content:center;align-items:center;min-width:75px;min-height:23px;padding:0 12px;font-family:Arial;font-size:11px;display:inline-flex;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px #dfdfdf}:host(:active),:host(:state(active)){text-shadow:1px 1px #222;box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px gray}:host(:focus){outline-offset:-4px;outline:1px dotted #000}:host(:disabled){color:gray;text-shadow:1px 1px #fff;pointer-events:none}`;

package/src/m3/system/typography.css

@@ -1,34 +0,0 @@
-:root {
-  --md-sys-typography-family: sans-serif;
-
-  --md-sys-typography-display-large: 400 3.5625rem / 4rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-display-medium: 400 2.8125rem / 3.25rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-display-small: 400 2.25rem / 2.75rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-headline-large: 400 2rem / 2.5rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-headline-medium: 400 1.75rem / 2.25rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-headline-small: 400 1.5rem / 2rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-title-large: 400 1.375rem / 1.75rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-title-medium: 500 1rem / 1.25rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-title-small: 500 0.875rem / 1.125rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-label-large: 500 0.875rem / 1.25rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-label-medium: 500 0.75rem / 1rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-label-small: 500 0.6875rem / 0.875rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-body-large: 400 1rem / 1.5rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-body-medium: 400 0.875rem / 1.25rem
-    var(--md-sys-typography-family);
-  --md-sys-typography-body-small: 400 0.75rem / 1rem
-    var(--md-sys-typography-family);
-}