@vollowx/seele 0.13.7 → 0.13.8

package/src/m3/ripple/ripple.js

@@ -32,7 +32,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             if ((e.key === 'Enter' && this.enterBehavior === 'always') ||
                 (e.key === ' ' && this.spaceBehavior === 'always')) {
                 this.addRipple();
-                this.removeRippleAll();
+                this.keepLastRipple();
             }
             else if (e.key === ' ' && this.spaceBehavior === 'once') {
                 if (!this.#spaceKeyDown)
@@ -43,7 +43,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
         this.handleKeyUp = (e) => {
             if (e.key === ' ' && this.spaceBehavior === 'once') {
                 this.#spaceKeyDown = false;
-                this.removeRippleAll();
+                this.keepLastRipple();
             }
         };
         this.handlePointerEnter = (e) => {
@@ -56,7 +56,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
         this.handlePointerLeave = () => {
             this[internals].states.delete('hover');
             if (this.#pointerDown && this.clickBehavior === 'always')
-                this.removeRippleAll();
+                this.keepLastRipple();
         };
         this.handlePointerDown = (e) => {
             if (e.pointerType === 'mouse')
@@ -65,7 +65,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             document.addEventListener('touchcancel', this.handlePointerUp);
             document.addEventListener('touchend', this.handlePointerUp);
             document.addEventListener('touchmove', this.handlePointerUp);
-            if (e.button === 2)
+            if (e.button !== 0)
                 return;
             if (this.clickBehavior === 'always')
                 this.addRipple(e);
@@ -76,7 +76,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             document.removeEventListener('touchcancel', this.handlePointerUp);
             document.removeEventListener('touchend', this.handlePointerUp);
             document.removeEventListener('touchmove', this.handlePointerUp);
-            this.removeRippleAll();
+            this.keepLastRipple();
         };
         this[internals].ariaHidden = 'true';
     }
@@ -111,7 +111,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             }
         });
     }
-    calculateRipple(e = null) {
+    #calculateRipple(e = null) {
         const containerRect = this.getBoundingClientRect();
         const containerMiddle = {
             x: containerRect.width / 2,
@@ -134,7 +134,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
         return { startCenter, endCenter, radius };
     }
     addRipple(e = null) {
-        const { startCenter, endCenter, radius } = this.calculateRipple(e);
+        const { startCenter, endCenter, radius } = this.#calculateRipple(e);
         const diameter = radius * 2 + 'px';
         const translateStart = `${startCenter.x - radius}px ${startCenter.y - radius}px`;
         const translateEnd = `${endCenter.x - radius}px ${endCenter.y - radius}px`;
@@ -156,7 +156,6 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             scale: [0.2, 1.35],
         }, {
             duration: PRESS_GROW_MS,
-            // TODO: Control by global variables
             easing: 'cubic-bezier(0.2, 0, 0, 1)',
             fill: 'forwards',
         });
@@ -174,7 +173,7 @@ let M3Ripple = class M3Ripple extends Attachable(InternalsAttached(LitElement))
             animation.onfinish = animation.oncancel = () => ripple.remove();
         }, Math.max(MINIMUM_PRESS_MS - (Date.now() - this.#lastTime), 0));
     }
-    removeRippleAll() {
+    keepLastRipple() {
         for (const ripple of this.$ripples.splice(0))
             this.removeRipple(ripple);
     }

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

package/src/m3/switch/switch.d.ts

@@ -1,5 +1,6 @@
 import { ToggleButton } from '../../base/toggle-button.js';
 import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
 import { M3Ripple } from '../ripple/ripple.js';
 /**
  * @tag md-switch
@@ -9,6 +10,8 @@ import { M3Ripple } from '../ripple/ripple.js';
  */
 export declare class M3Switch extends ToggleButton {
     #private;
+    icons: boolean;
+    checkedIconOnly: boolean;
     $ripple: M3Ripple;
     $thumb: HTMLSpanElement;
     static styles: any[];
@@ -17,8 +20,6 @@ export declare class M3Switch extends ToggleButton {
     renderOffIcon(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    icons: boolean;
-    checkedIconOnly: boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/m3/switch/switch.js

@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { ToggleButton } from '../../base/toggle-button.js';
 import '../focus-ring/focus-ring.js';
+import '../ripple/ripple.js';
 import { switchStyles } from './switch-styles.css.js';
 import { targetStyles } from '../target-styles.css.js';
 function isRTL() {
@@ -53,12 +54,12 @@ let M3Switch = class M3Switch extends ToggleButton {
             this.$thumb.style.setProperty('--_thumb-diameter', '');
             this.$thumb.style.transitionDuration = '';
             if (this.checked != shouldBeChecked)
-                this.toggleChecked();
+                this._toggle();
         };
     }
     static { this.styles = [targetStyles, switchStyles]; }
     render() {
-        return html `<md-focus-ring></md-focus-ring><div part="thumb"><md-ripple spacebehavior="always"></md-ripple><span part="target"></span> ${this.renderOffIcon()}${this.renderOnIcon()}</div>`;
+        return html `<md-focus-ring></md-focus-ring><div part="thumb"><md-ripple></md-ripple><span part="target"></span> ${this.renderOffIcon()}${this.renderOnIcon()}</div>`;
     }
     renderOnIcon() {
         return html `<svg part="icons icon-on" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z"/></svg>`;
@@ -69,33 +70,33 @@ let M3Switch = class M3Switch extends ToggleButton {
     connectedCallback() {
         super.connectedCallback();
         this.updateComplete.then(() => {
-            this.$ripple.attach(this);
+            this.$ripple.attach(this, true);
         });
         this.addEventListener('pointerdown', this.#handlePointerDown);
         this.addEventListener('pointerup', this.#handlePointerUp);
     }
     disconnectedCallback() {
-        super.disconnectedCallback();
         this.removeEventListener('pointerdown', this.#handlePointerDown);
         this.removeEventListener('pointerup', this.#handlePointerUp);
+        super.disconnectedCallback();
     }
     #pointerDownX;
     #handlePointerDown;
     #handlePointerMove;
     #handlePointerUp;
 };
-__decorate([
-    query('md-ripple')
-], M3Switch.prototype, "$ripple", void 0);
-__decorate([
-    query('[part~="thumb"]')
-], M3Switch.prototype, "$thumb", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], M3Switch.prototype, "icons", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], M3Switch.prototype, "checkedIconOnly", void 0);
+__decorate([
+    query('md-ripple')
+], M3Switch.prototype, "$ripple", void 0);
+__decorate([
+    query('[part~="thumb"]')
+], M3Switch.prototype, "$thumb", void 0);
 M3Switch = __decorate([
     customElement('md-switch')
 ], M3Switch);

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);--_tab-indicator-height:3px;border-bottom:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none;display:block;position:relative;overflow:auto hidden}[part=tablist]{display:flex}[part=indicator]{height:var(--_tab-indicator-height);background-color:var(--md-sys-color-primary);transition:left var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default), width var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);will-change:left, width;border-radius:3px 3px 0 0;position:absolute;bottom:0}::slotted(*){flex:1}:host([secondary]){--_tab-selected-color:var(--md-sys-color-on-surface);--_tab-indicator-height:2px}:host([secondary]) [part=indicator]{border-radius:0}:host([iconsabove]){--_tab-flex-dir:column;--_tab-height:64px;--_tab-gap:2px}`;
+export const tabsStyles = css`:host{--_tab-selected-color:var(--md-sys-color-primary);--_tab-indicator-height:3px;border-bottom:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none;display:block;position:relative;overflow:auto hidden}[part=tablist]{display:flex}[part=indicator]{height:var(--_tab-indicator-height);background-color:var(--md-sys-color-primary);transition:left var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default), width var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default);will-change:left, width;border-radius:3px 3px 0 0;position:absolute;bottom:0}::slotted(*){flex:1}:host([secondary]){--_tab-selected-color:var(--md-sys-color-on-surface);--_tab-indicator-height:2px}:host([secondary]) [part=indicator]{border-radius:0}:host([iconsabove]){--_tab-flex-dir:column;--_tab-height:64px;--_tab-gap:2px}@media (forced-colors:active){[part=indicator]{background-color:highlight}}`;

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