@vollowx/seele 0.10.1 → 0.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vollowx/seele",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.2",
|
|
4
4
|
"description": "Standard Extensible Elements. A web components library that can be styled and extended freely, pre-providing components in Material Design 3.",
|
|
5
5
|
"author": "vollowx",
|
|
6
6
|
"license": "MIT",
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { isServer } from 'lit';
|
|
2
|
+
import { customElement } from 'lit/decorators.js';
|
|
3
|
+
const wrappedCustomElement = (tagName, allowSSR = true) => {
|
|
4
|
+
if (isServer && !allowSSR) {
|
|
5
|
+
console.log(`[SEELE]: <${tagName}> will not be rendered server-side.`);
|
|
6
|
+
return (cls) => cls;
|
|
7
|
+
}
|
|
8
|
+
else {
|
|
9
|
+
return customElement(tagName);
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
export { wrappedCustomElement as customElement };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const outlinedFieldStyles = css `:host{--_outline-width:1px}.container{border-radius:4px;padding-inline:16px}.outline{border-radius:inherit;color:var(--md-sys-color-outline);pointer-events:none;display:flex;position:absolute;inset:0}.outline-start,.outline-notch,.outline-end{border:var(--_outline-width)solid currentColor;box-sizing:border-box;transition:border-width var(--md-sys-motion-exp-effects-default-duration)var(--md-sys-motion-exp-effects-default),border-top-color var(--md-sys-motion-exp-effects-default-duration)var(--md-sys-motion-exp-effects-default)}.outline-start{border-
|
|
2
|
+
export const outlinedFieldStyles = css `:host{--_outline-width:1px}.container{border-radius:4px;padding-inline:16px}.outline{border-radius:inherit;color:var(--md-sys-color-outline);pointer-events:none;display:flex;position:absolute;inset:0}.outline-start,.outline-notch,.outline-end{border:var(--_outline-width)solid currentColor;box-sizing:border-box;transition:border-width var(--md-sys-motion-exp-effects-default-duration)var(--md-sys-motion-exp-effects-default),border-top-color var(--md-sys-motion-exp-effects-default-duration)var(--md-sys-motion-exp-effects-default)}.outline-start{border-radius:inherit;border-inline-end:none;border-start-end-radius:0;border-end-end-radius:0;width:12px}.outline-end{border-radius:inherit;border-inline-start:none;border-start-start-radius:0;border-end-start-radius:0;flex:1}.outline-notch{border-inline:none;align-items:flex-start;max-width:calc(100% - 24px);margin-top:0;padding:0 4px;display:flex}:host(:not([haslabel])) .outline-notch{display:none}.label{margin-top:calc(var(--_padding-top) - 1px)}:host(:hover) .label,:host(:hover) .outline{color:var(--md-sys-color-on-surface)}:host([focused]){--_outline-width:3px}:host([focused]) .label,:host([focused]) .outline{color:var(--md-sys-color-primary)}:host([error]) .label,:host([error]) .outline{color:var(--md-sys-color-error)}:host([populated]) .outline-notch,:host([focused]) .outline-notch{border-top-width:0;border-top-color:#0000}:host([populated]) .label,:host([focused]) .label{margin-top:calc(-.75em - 3px);font-size:.75em}:host([disabled]) .outline{color:var(--md-sys-color-outline-variant)}:host([disabled]) .label{color:var(--md-sys-color-on-surface-variant)}`;
|
package/src/m3/focus-ring.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { LitElement } from 'lit';
|
|
3
|
-
import {
|
|
3
|
+
import { property } from 'lit/decorators.js';
|
|
4
|
+
import { customElement } from '../core/decorators.js';
|
|
4
5
|
import { focusVisible } from '../core/focus-visible.js';
|
|
5
6
|
import { Attachable } from '../base/mixins/attachable.js';
|
|
6
7
|
import { InternalsAttached, internals, } from '../base/mixins/internals-attached.js';
|
|
@@ -67,6 +68,6 @@ __decorate([
|
|
|
67
68
|
property({ type: Boolean, reflect: true })
|
|
68
69
|
], M3FocusRing.prototype, "inward", void 0);
|
|
69
70
|
M3FocusRing = __decorate([
|
|
70
|
-
customElement('md-focus-ring')
|
|
71
|
+
customElement('md-focus-ring', false)
|
|
71
72
|
], M3FocusRing);
|
|
72
73
|
export { M3FocusRing };
|
package/src/m3/ripple.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { LitElement } from 'lit';
|
|
3
|
-
import {
|
|
3
|
+
import { property } from 'lit/decorators.js';
|
|
4
|
+
import { customElement } from '../core/decorators.js';
|
|
4
5
|
import { Attachable } from '../base/mixins/attachable.js';
|
|
5
6
|
import { InternalsAttached, internals, } from '../base/mixins/internals-attached.js';
|
|
6
7
|
import { rippleStyles } from './ripple-styles.css.js';
|
|
@@ -188,6 +189,6 @@ __decorate([
|
|
|
188
189
|
property()
|
|
189
190
|
], M3Ripple.prototype, "spaceBehavior", void 0);
|
|
190
191
|
M3Ripple = __decorate([
|
|
191
|
-
customElement('md-ripple')
|
|
192
|
+
customElement('md-ripple', false)
|
|
192
193
|
], M3Ripple);
|
|
193
194
|
export { M3Ripple };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const sliderStyles = css `:host{--_target-size:48px;--_half-target:calc(var(--_target-size)/2);--_handle-width-start:var(--md-slider-handle-width,4px);--_handle-width-end:var(--md-slider-handle-width,4px);--_handle-height:var(--md-slider-handle-height,44px);--_handle-shape:var(--md-slider-handle-shape,20px);--_handle-margin:6px;--_tick-size:var(--md-slider-tick-size,2px);--_track-shape:8px;--_track-height:var(--md-slider-track-height,16px);vertical-align:middle;min-inline-size:200px;display:inline-flex}md-focus-ring{width:16px;height:56px;inset:unset}:host([disabled]){opacity:.38}:host([disabled]) input{cursor:default;pointer-events:none}.container{--_start-px:calc(100%*var(--_start));--_end-px:calc(100%*var(--_end));--_inv-start-px:calc(100%*(1 - var(--_start)));--_inv-end-px:calc(100%*(1 - var(--_end)));--_mask-offset-start:calc(var(--_handle-width-start)/2 + var(--_handle-margin));--_mask-offset-end:calc(var(--_handle-width-end)/2 + var(--_handle-margin));--_cut-start:calc(var(--_start-px) + var(--_mask-offset-start));--_cut-end:calc(var(--_inv-end-px) + var(--_mask-offset-end));--_cut-inv-start:calc(var(--_inv-start-px) + var(--_mask-offset-start));--_cut-inv-end:calc(var(--_end-px) + var(--_mask-offset-end));block-size:var(--_target-size);pointer-events:none;touch-action:none;user-select:none;flex:1;align-items:center;display:flex;position:relative}.track,.tickmarks{block-size:var(--_track-height);align-items:center;display:flex;position:absolute;inset-inline:0}.track div,.tickmarks div{position:absolute
|
|
2
|
+
export const sliderStyles = css `:host{--_target-size:48px;--_half-target:calc(var(--_target-size)/2);--_handle-width-start:var(--md-slider-handle-width,4px);--_handle-width-end:var(--md-slider-handle-width,4px);--_handle-height:var(--md-slider-handle-height,44px);--_handle-shape:var(--md-slider-handle-shape,20px);--_handle-margin:6px;--_tick-size:var(--md-slider-tick-size,2px);--_track-shape:8px;--_track-height:var(--md-slider-track-height,16px);vertical-align:middle;min-inline-size:200px;display:inline-flex}md-focus-ring{width:16px;height:56px;inset:unset}:host([disabled]){opacity:.38}:host([disabled]) input{cursor:default;pointer-events:none}.container{--_start-px:calc(100%*var(--_start));--_end-px:calc(100%*var(--_end));--_inv-start-px:calc(100%*(1 - var(--_start)));--_inv-end-px:calc(100%*(1 - var(--_end)));--_mask-offset-start:calc(var(--_handle-width-start)/2 + var(--_handle-margin));--_mask-offset-end:calc(var(--_handle-width-end)/2 + var(--_handle-margin));--_cut-start:calc(var(--_start-px) + var(--_mask-offset-start));--_cut-end:calc(var(--_inv-end-px) + var(--_mask-offset-end));--_cut-inv-start:calc(var(--_inv-start-px) + var(--_mask-offset-start));--_cut-inv-end:calc(var(--_end-px) + var(--_mask-offset-end));block-size:var(--_target-size);pointer-events:none;touch-action:none;user-select:none;flex:1;align-items:center;display:flex;position:relative}.track,.tickmarks{block-size:var(--_track-height);align-items:center;display:flex;position:absolute;inset-inline:0}.track div,.tickmarks div{inset:0 calc(var(--_target-size)/2);position:absolute}.track div{border-radius:var(--_track-shape)}.track .inactive-before,.track .inactive-after{background:var(--md-sys-color-secondary-container)}.track .active{background:var(--md-sys-color-primary)}:host([disabled]) .track .inactive-before,:host([disabled]) .track .inactive-after{background:var(--md-sys-color-on-surface);opacity:.315789}:host([disabled]) .track .active{background:var(--md-sys-color-on-surface)}.tickmarks div{--_tick-color:var(--md-sys-color-on-secondary-container);background-size:calc((100% - var(--_tick-size)*2)/var(--_ticks))100%;background-image:radial-gradient(circle at var(--_tick-size)center,var(--_tick-color)0,var(--_tick-color)calc(var(--_tick-size)/2),transparent calc(var(--_tick-size)/2))}.tickmarks .active{--_tick-color:var(--md-sys-color-on-primary)}:host([disabled]) .tickmarks div{--_tick-color:var(--md-sys-color-on-surface)}:host([disabled]) .tickmarks .active{--_tick-color:var(--md-sys-color-inverse-on-surface)}.inactive-before{clip-path:inset(0 var(--_cut-inv-start)0 0 round 2px)}.inactive-after{clip-path:inset(0 0 0 var(--_cut-inv-end)round 2px)}.active{clip-path:inset(0 var(--_cut-end)0 0 round 2px)}.ranged .active{clip-path:inset(0 var(--_cut-end)0 var(--_cut-start)round 2px)}:host(:dir(rtl)) .inactive-before{clip-path:inset(0 0 0 var(--_cut-inv-start)round 2px)}:host(:dir(rtl)) .inactive-after{clip-path:inset(0 var(--_cut-inv-end)0 0 round 2px)}:host(:dir(rtl)) .active{clip-path:inset(0 0 0 var(--_cut-end)round 2px)}:host(:dir(rtl)) .ranged .active{clip-path:inset(0 var(--_cut-start)0 var(--_cut-end)round 2px)}.handles-padded{block-size:100%;inline-size:100%;padding-inline:calc(var(--_target-size)/2);box-sizing:border-box;position:absolute;inset:0}.handles{block-size:100%;inline-size:100%;inline-size:calc(var(--_end-px) - var(--_start-px));position:relative;inset-block:0;inset-inline-start:var(--_start-px)}.handle{--md-ripple-color:var(--md-sys-color-primary);block-size:var(--_target-size);inline-size:var(--_target-size);border-radius:var(--_handle-shape);place-content:center;place-items:center;display:flex;position:absolute}.handle.start{inset-inline-start:calc(0px - var(--_half-target))}.handle.end{inset-inline-end:calc(0px - var(--_half-target))}.nub{height:var(--_handle-height);width:var(--_handle-width-end);border-radius:var(--_handle-shape);background:var(--md-sys-color-primary);transition:width var(--md-sys-motion-std-effects-fast-duration)var(--md-sys-motion-std-effects-fast);position:absolute}.start .nub{width:var(--_handle-width-start)}:host([disabled]) .nub{background:var(--md-sys-color-on-surface)}.onTop.isOverlapping .nub{border:1px solid var(--md-sys-color-surface)}.label{box-sizing:border-box;color:var(--md-sys-color-inverse-on-surface);background:var(--md-sys-color-inverse-surface);font:var(--md-sys-typography-label-large);opacity:0;border-radius:9999px;place-content:center;place-items:center;min-block-size:44px;min-inline-size:48px;padding:0 16px;transition:opacity 67ms linear;display:flex;position:absolute;inset-block-end:100%;transform:translateY(-2px)}:host(:not(:disabled)) :where(:has(input:active)) .label,:host(:not(:disabled)) :where(:has(input:focus-visible)) .label{opacity:1}@media (hover:hover) and (pointer:fine){:host(:not(:disabled)) :where(:has(input:hover)) .label{opacity:1}}input[type=range]{opacity:0;-webkit-tap-highlight-color:transparent;box-sizing:border-box;cursor:pointer;pointer-events:auto;appearance:none;width:100%;height:100%;margin:0;position:absolute}input[type=range]:focus{outline:none}:host(:not([disabled])) :has(input.start:active){--_handle-width-start:2px}:host(:not([disabled])) :has(input.end:active){--_handle-width-end:2px}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_target-size);inline-size:var(--_target-size);opacity:0;z-index:2}::-moz-range-thumb{appearance:none;block-size:var(--_target-size);inline-size:var(--_target-size);opacity:0;z-index:2;transform:scaleX(0)}.ranged input{--track-len:calc(100% - var(--_target-size));--mid-frac:calc(var(--_start) + ((var(--_end) - var(--_start))/2));--clip-px:calc(var(--_half-target) + var(--track-len)*var(--mid-frac))}.ranged input.start{clip-path:inset(0 calc(100% - var(--clip-px))0 0)}.ranged input.end{clip-path:inset(0 0 0 var(--clip-px))}.ranged input.start:dir(rtl){clip-path:inset(0 0 0 calc(100% - var(--clip-px)))}.ranged input.end:dir(rtl){clip-path:inset(0 var(--clip-px)0 0)}.onTop{z-index:1}`;
|
package/src/m3/slider.js
CHANGED
|
@@ -59,9 +59,11 @@ let M3Slider = class M3Slider extends Slider {
|
|
|
59
59
|
>
|
|
60
60
|
${when(this.range, () => this.renderInput(inputStartProps))}
|
|
61
61
|
${this.renderInput(inputEndProps)} ${this.renderTrack()}
|
|
62
|
-
<div class="handles">
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
<div class="handles-padded">
|
|
63
|
+
<div class="handles">
|
|
64
|
+
${when(this.range, () => this.renderHandle(handleStartProps))}
|
|
65
|
+
${this.renderHandle(handleEndProps)}
|
|
66
|
+
</div>
|
|
65
67
|
</div>
|
|
66
68
|
</div>`;
|
|
67
69
|
}
|