@vollowx/seele 0.12.10 → 0.13.1

package/src/m3/tab/tabs.js

@@ -12,10 +12,7 @@ export class M3Tabs extends Tabs {
         ];
     }
     render() {
-        return html`
-      ${super.render()}
-      <div part="indicator" role="presentation"></div>
-    `;
+        return html`${super.render()}<div part="indicator" role="presentation"></div>`;
     }
     selectTab(selectedTab) {
         super.selectTab(selectedTab);

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

@@ -11,18 +11,7 @@ export class M3FilledTextField extends Input {
         ];
     }
     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}" supportingtext="${this.supportingText}" ?populated="${!!this.value}" ?disabled="${this.disabled}" ?focused="${this.focused}" ?error="${this.checkValidity() === false}">${super.render()}</md-filled-field>`;
     }
     constructor(...args){
         super(...args), this.label = '', this.supportingText = '';

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

@@ -11,20 +11,7 @@ export class M3OutlinedTextField extends Input {
         ];
     }
     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}" 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>`;
     }
     constructor(...args){
         super(...args), this.label = '', this.supportingText = '';

package/src/m3/text-field/text-field-styles.css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const textFieldStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block}md-filled-field,md-outlined-field{width:100%}[part=input]{color:inherit;font:inherit;-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;width:100%;height:100%;margin:0;padding:0}`;
+export const textFieldStyles = css`:host{-webkit-user-select:none;user-select:none;min-width:210px;display:inline-block}md-filled-field,md-outlined-field{width:100%}[part=input]{color:inherit;font:var(--md-sys-typography-body-large);-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:0;width:100%;height:100%;margin:0;padding: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);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)}::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)}`;

package/src/m3/toolbar/toolbar.js

@@ -10,14 +10,7 @@ export class M3Toolbar extends InternalsAttached(LitElement) {
         ];
     }
     render() {
-        return html`
-      <div part="container">
-        <slot></slot>
-      </div>
-      <div part="fab-slot">
-        <slot name="fab"></slot>
-      </div>
-    `;
+        return html`<div part="container"><slot></slot></div><div part="fab-slot"><slot name="fab"></slot></div>`;
     }
     constructor(){
         super(), this.type = 'docked', this.color = 'standard', this.orientation = 'horizontal';

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-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-fast), transform var(--md-sys-motion-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-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-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-fast), transform var(--md-sys-motion-exp-effects-fast-duration) var(--md-sys-motion-exp-effects-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([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)}`;

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

@@ -0,0 +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}`;

package/src/win98/button/button.js

@@ -0,0 +1,19 @@
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { Button } from '../../base/button.js';
+import { buttonStyles } from './button-styles.css.js';
+export class Win98Button extends Button {
+    static{
+        this.styles = [
+            ...super.styles,
+            buttonStyles
+        ];
+    }
+    render() {
+        return html`<slot></slot>`;
+    }
+}
+Win98Button = _ts_decorate([
+    customElement('win98-button')
+], Win98Button);

package/src/m3/system/motion.css

@@ -1,30 +0,0 @@
-:root {
-  /* std: standard, exp: expressive, mot: motion */
-  --md-sys-motion-exp-spatial-fast: cubic-bezier(0.42, 1.67, 0.21, 0.9);
-  --md-sys-motion-exp-spatial-fast-duration: 350ms;
-  --md-sys-motion-exp-spatial-default: cubic-bezier(0.38, 1.21, 0.22, 1);
-  --md-sys-motion-exp-spatial-default-duration: 500ms;
-  --md-sys-motion-exp-spatial-slow: cubic-bezier(0.39, 1.29, 0.35, 0.98);
-  --md-sys-motion-exp-spatial-slow-duration: 650ms;
-
-  --md-sys-motion-exp-effects-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
-  --md-sys-motion-exp-effects-fast-duration: 150ms;
-  --md-sys-motion-exp-effects-default: cubic-bezier(0.34, 0.8, 0.34, 1);
-  --md-sys-motion-exp-effects-default-duration: 200ms;
-  --md-sys-motion-exp-effects-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
-  --md-sys-motion-exp-effects-slow-duration: 300ms;
-
-  --md-sys-motion-std-spatial-fast: cubic-bezier(0.27, 1.06, 0.18, 1);
-  --md-sys-motion-std-spatial-fast-duration: 350ms;
-  --md-sys-motion-std-spatial-default: cubic-bezier(0.27, 1.06, 0.18, 1);
-  --md-sys-motion-std-spatial-default-duration: 500ms;
-  --md-sys-motion-std-spatial-slow: cubic-bezier(0.27, 1.06, 0.18, 1);
-  --md-sys-motion-std-spatial-slow-duration: 750ms;
-
-  --md-sys-motion-std-effects-fast: cubic-bezier(0.31, 0.94, 0.34, 1);
-  --md-sys-motion-std-effects-fast-duration: 150ms;
-  --md-sys-motion-std-effects-default: cubic-bezier(0.34, 0.8, 0.34, 1);
-  --md-sys-motion-std-effects-default-duration: 200ms;
-  --md-sys-motion-std-effects-slow: cubic-bezier(0.34, 0.88, 0.34, 1);
-  --md-sys-motion-std-effects-slow-duration: 300ms;
-}