@vollowx/seele 0.7.0

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

@@ -0,0 +1,38 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Input } from '../../base/input.js';
+import '../field/filled-field.js';
+import { textFieldStyles } from './text-field-styles.css.js';
+let M3FilledTextField = class M3FilledTextField extends Input {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.supportingText = '';
+    }
+    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>
+    `;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], M3FilledTextField.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], M3FilledTextField.prototype, "supportingText", void 0);
+M3FilledTextField = __decorate([
+    customElement('md-filled-text-field')
+], M3FilledTextField);
+export { M3FilledTextField };

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

@@ -0,0 +1,40 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { Input } from '../../base/input.js';
+import '../field/outlined-field.js';
+import { textFieldStyles } from './text-field-styles.css.js';
+let M3OutlinedTextField = class M3OutlinedTextField extends Input {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.supportingText = '';
+    }
+    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>
+    `;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], M3OutlinedTextField.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], M3OutlinedTextField.prototype, "supportingText", void 0);
+M3OutlinedTextField = __decorate([
+    customElement('md-outlined-text-field')
+], M3OutlinedTextField);
+export { M3OutlinedTextField };

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

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export const textFieldStyles = css `:host{-webkit-user-select:none;user-select:none;display:inline-block}md-filled-field,md-outlined-field{inset:0}[part=input]{color:inherit;font:inherit;background:0 0;border:none;outline:none;width:100%;height:100%;margin:0;padding:0}`;

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

@@ -0,0 +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}:host([type=floating]){--_padding:8px;--_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)}:host([type=floating][orientation=vertical]){flex-direction:column;align-items:stretch;width:56px;min-height:auto}[part=container]{box-sizing:border-box;align-items:center;gap:var(--_gap);height:56px;padding:0 var(--_padding);flex:auto;justify-content:space-between;width:100%;display:flex}:host([type=floating]) [part=container]{background-color:color-mix(in srgb,var(--_container-color)var(--_container-opacity,100%),transparent);border-radius:var(--md-toolbar-shape,28px);box-shadow:var(--md-toolbar-shadow,var(--md-sys-elevation-shadow-3));width:fit-content}[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][orientation=vertical]) [part=container]{height:fit-content;padding:var(--_padding)0;flex-direction:column;width:100%}::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)}:host([color=vibrant]) ::slotted(md-icon-button[variant=text]),:host([color=vibrant]) ::slotted(md-icon-button-toggle[variant=tonal]){--_text-color:var(--md-sys-color-on-primary-container)}:host([color=vibrant]) ::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)}`;

package/src/m3/toolbar.js

@@ -0,0 +1,53 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { internals, InternalsAttached, } from '../base/mixins/internals-attached.js';
+import { toolbarStyles } from './toolbar-styles.css.js';
+/**
+ * @tag md-toolbar
+ *
+ * @csspart container
+ * @csspart fab-slot
+ *
+ * @slot - toolbar contents
+ * @slot fab - FAB element
+ */
+let M3Toolbar = class M3Toolbar extends InternalsAttached(LitElement) {
+    static { this.styles = [toolbarStyles]; }
+    constructor() {
+        super();
+        this.type = 'docked';
+        this.color = 'standard';
+        this.orientation = 'horizontal';
+        this[internals].role = 'toolbar';
+        this[internals].ariaOrientation = this.orientation;
+    }
+    updated(changed) {
+        if (changed.has('orientation')) {
+            this[internals].ariaOrientation = this.orientation;
+        }
+    }
+    render() {
+        return html `
+      <div part="container">
+        <slot></slot>
+      </div>
+      <div part="fab-slot">
+        <slot name="fab"></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], M3Toolbar.prototype, "type", void 0);
+__decorate([
+    property({ reflect: true })
+], M3Toolbar.prototype, "color", void 0);
+__decorate([
+    property({ reflect: true })
+], M3Toolbar.prototype, "orientation", void 0);
+M3Toolbar = __decorate([
+    customElement('md-toolbar')
+], M3Toolbar);
+export { M3Toolbar };

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

@@ -0,0 +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:9999;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(.4)}:host(:state(closed)){display:none}:host(:state(opening)){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)){color:var(--md-sys-color-inverse-on-surface);opacity:1;pointer-events:auto;transform:scaleY(1)}:host(:state(closing)){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(.4)}`;

package/src/m3/tooltip.js

@@ -0,0 +1,18 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Tooltip } from '../base/tooltip.js';
+import { tooltipStyles } from './tooltip-styles.css.js';
+/**
+ * @tag md-tooltip
+ */
+let M3Tooltip = class M3Tooltip extends Tooltip {
+    constructor() {
+        super(...arguments);
+        this._durations = { show: 150, hide: 150 };
+    }
+    static { this.styles = [tooltipStyles]; }
+};
+M3Tooltip = __decorate([
+    customElement('md-tooltip')
+], M3Tooltip);
+export { M3Tooltip };