@sky.ui/core 0.0.60 → 0.0.61
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.
|
@@ -14,7 +14,6 @@ export type SkyColorPickerDetail = {
|
|
|
14
14
|
* @documentation https://sky-ui.com/components/color-picker
|
|
15
15
|
*
|
|
16
16
|
* @dependency sky-button
|
|
17
|
-
* @dependency sky-input
|
|
18
17
|
* @dependency sky-dropdown
|
|
19
18
|
* @dependency sky-dropdown-item
|
|
20
19
|
*
|
|
@@ -91,6 +90,8 @@ export declare class SkyColorPicker extends LitElement {
|
|
|
91
90
|
private _stopBubble;
|
|
92
91
|
private _onFormatSelect;
|
|
93
92
|
private get _formatLabel();
|
|
93
|
+
private _formatTrigger;
|
|
94
|
+
private _num;
|
|
94
95
|
private get _canEye();
|
|
95
96
|
protected render(): import("lit-html").TemplateResult<1>;
|
|
96
97
|
}
|
|
@@ -1,12 +1,70 @@
|
|
|
1
|
-
import{css as t,LitElement as e,
|
|
2
|
-
<
|
|
1
|
+
import{css as t,LitElement as e,html as i,nothing as r}from"lit";import{property as s,state as a,query as n,customElement as o}from"lit/decorators.js";import{live as l}from"lit/directives/live.js";import{hsva as h,parseCssColor as p,hsvaToCss as d,hsvaToHex6 as c,clamp as m,hexToHsva as v,hsvaToRgba as u,rgbaToHsva as y,hueCss as _}from"./color-model.js";var g=Object.defineProperty,b=Object.getOwnPropertyDescriptor,x=(t,e,i,r)=>{for(var s,a=r>1?void 0:r?b(e,i):e,n=t.length-1;n>=0;n--)(s=t[n])&&(a=(r?s(e,i,a):s(a))||a);return r&&a&&g(e,i,a),a};let f=class extends e{constructor(){super(...arguments),this.value="#000000",this.format="hex",this.alpha=!0,this.eyedropper=!0,this.actions=!0,this._hsva=h(0,1,1,1),this._hexDraft="#000000",this._drag=null,this._origin="",this._syncedFromProp="",this._onSvDown=t=>{t.preventDefault(),this._drag="sv",t.currentTarget.setPointerCapture?.(t.pointerId),this._svFromEvent(t)},this._onHueDown=t=>{t.preventDefault(),this._drag="hue",t.currentTarget.setPointerCapture?.(t.pointerId),this._hueFromEvent(t)},this._onAlphaDown=t=>{t.preventDefault(),this._drag="alpha",t.currentTarget.setPointerCapture?.(t.pointerId),this._alphaFromEvent(t)},this._onWinMove=t=>{this._drag&&("sv"===this._drag?this._svFromEvent(t):"hue"===this._drag?this._hueFromEvent(t):this._alphaFromEvent(t))},this._onWinUp=()=>{this._drag&&(this._drag=null,this.actions||this._emit("color-change",!0))},this._stopBubble=t=>{t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this._origin=this.value,this._applyValue(this.value,!0),window.addEventListener("pointermove",this._onWinMove),window.addEventListener("pointerup",this._onWinUp),window.addEventListener("pointercancel",this._onWinUp)}disconnectedCallback(){window.removeEventListener("pointermove",this._onWinMove),window.removeEventListener("pointerup",this._onWinUp),window.removeEventListener("pointercancel",this._onWinUp),super.disconnectedCallback()}willUpdate(t){t.has("value")&&null==this._drag&&this.value!==this._syncedFromProp&&this._applyValue(this.value,!1)}_hsvaEq(t,e){return t.h===e.h&&t.s===e.s&&t.v===e.v&&t.a===e.a}_applyValue(t,e){const i=p(t)??h(0,0,0,1),r=d(i);this._hsvaEq(this._hsva,i)||(this._hsva=i),this._hexDraft!==r&&(this._hexDraft=r),this._syncedFromProp=r,e&&(this._origin=t)}get _css(){return this.alpha?d(this._hsva):c(this._hsva)}_emit(t,e){const i=this._css;this._syncedFromProp=i,this.dispatchEvent(new CustomEvent(t,{detail:{value:i},bubbles:!0,composed:!0})),!e&&this.actions||this.dispatchEvent(new CustomEvent("color-change",{detail:{value:i},bubbles:!0,composed:!0}))}_setHsva(t,e){const i=d(t);this._hsvaEq(this._hsva,t)&&this._hexDraft===i||(this._hsva=t,this._hexDraft=i,this._emit("color-input",!this.actions&&e))}_ratio(t,e,i){if(!t)return 0;const r=t.getBoundingClientRect();return m("x"===i?(e.clientX-r.left)/r.width:(e.clientY-r.top)/r.height,0,1)}_svFromEvent(t){const e=this._ratio(this._svEl,t,"x"),i=1-this._ratio(this._svEl,t,"y");this._setHsva({...this._hsva,s:e,v:i},!0)}_hueFromEvent(t){const e=360*this._ratio(this._hueEl,t,"x");this._setHsva({...this._hsva,h:e},!0)}_alphaFromEvent(t){const e=this._ratio(this._alphaEl,t,"x");this._setHsva({...this._hsva,a:e},!0)}_eventValue(t){const e=t.detail;return String(e&&"value"in e?e.value??"":t.target?.value??"")}_onHexInput(t){if(this._drag)return;const e=this._eventValue(t);this._hexDraft=e;const i=v(e.startsWith("#")?e:`#${e}`);i&&this._setHsva(i,!0)}_onRgb(t,e){if(this._drag)return;const i=m(Number(this._eventValue(e)),0,255),r=u(this._hsva);r[t]=i,this._setHsva(y(r),!0)}_onHsb(t,e){if(this._drag)return;const i=Number(this._eventValue(e));"h"===t?this._setHsva({...this._hsva,h:m(i,0,360)},!0):this._setHsva({...this._hsva,[t]:m(i,0,100)/100},!0)}_onPct(t){if(this._drag)return;const e=m(Number(this._eventValue(t)),0,100);this._setHsva({...this._hsva,a:e/100},!0)}async _eyedrop(){const t=window.EyeDropper;if(t)try{const{sRGBHex:e}=await(new t).open(),i=p(e);i&&this._setHsva({...i,a:this._hsva.a},!0)}catch{}}_done(){this._origin=this._css,this._emit("color-done",!0)}_cancel(){this._applyValue(this._origin,!1),this.dispatchEvent(new CustomEvent("color-cancel",{detail:{value:this._origin},bubbles:!0,composed:!0}))}_onFormatSelect(t){t.stopPropagation();const e=t.detail?.value;"hex"!==e&&"hsb"!==e&&"rgb"!==e||(this.format=e)}get _formatLabel(){return"hex"===this.format?"Hex":"hsb"===this.format?"HSB":"RGB"}_formatTrigger(){return i`
|
|
2
|
+
<sky-dropdown
|
|
3
|
+
part="format"
|
|
4
|
+
class="format-dd"
|
|
5
|
+
trigger="click"
|
|
6
|
+
placement="bottom"
|
|
7
|
+
align="start"
|
|
8
|
+
.width=${"auto"}
|
|
9
|
+
.closeOnClick=${!0}
|
|
10
|
+
.maxHeight=${"none"}
|
|
11
|
+
.value=${this.format}
|
|
12
|
+
@open=${this._stopBubble}
|
|
13
|
+
@close=${this._stopBubble}
|
|
14
|
+
@open-change=${this._stopBubble}
|
|
15
|
+
@dropdown-item-click=${this._stopBubble}
|
|
16
|
+
@dropdown-select=${this._onFormatSelect}
|
|
17
|
+
>
|
|
18
|
+
<sky-button
|
|
19
|
+
slot="trigger"
|
|
20
|
+
type="button"
|
|
21
|
+
size="xs"
|
|
22
|
+
variant="transparent"
|
|
23
|
+
color="default"
|
|
24
|
+
animation="none"
|
|
25
|
+
.iconR=${"mdi:chevron-down"}
|
|
26
|
+
.label=${this._formatLabel}
|
|
27
|
+
></sky-button>
|
|
28
|
+
<sky-dropdown-item
|
|
29
|
+
value="hex"
|
|
30
|
+
label="Hex"
|
|
31
|
+
size="sm"
|
|
32
|
+
?selected=${"hex"===this.format}
|
|
33
|
+
></sky-dropdown-item>
|
|
34
|
+
<sky-dropdown-item
|
|
35
|
+
value="hsb"
|
|
36
|
+
label="HSB"
|
|
37
|
+
size="sm"
|
|
38
|
+
?selected=${"hsb"===this.format}
|
|
39
|
+
></sky-dropdown-item>
|
|
40
|
+
<sky-dropdown-item
|
|
41
|
+
value="rgb"
|
|
42
|
+
label="RGB"
|
|
43
|
+
size="sm"
|
|
44
|
+
?selected=${"rgb"===this.format}
|
|
45
|
+
></sky-dropdown-item>
|
|
46
|
+
</sky-dropdown>
|
|
47
|
+
`}_num(t,e,r,s,a){return i`
|
|
48
|
+
<input
|
|
49
|
+
class="num"
|
|
50
|
+
type="number"
|
|
51
|
+
inputmode="numeric"
|
|
52
|
+
min=${r}
|
|
53
|
+
max=${s}
|
|
54
|
+
step="1"
|
|
55
|
+
aria-label=${t}
|
|
56
|
+
.value=${l(e)}
|
|
57
|
+
@input=${a}
|
|
58
|
+
/>
|
|
59
|
+
`}get _canEye(){return this.eyedropper&&"undefined"!=typeof window&&"EyeDropper"in window}render(){const{h:t,s:e,v:s,a:a}=this._hsva,n=u(this._hsva),o=_(t),h=c(this._hsva);return i`
|
|
60
|
+
<div class="root" style="--cp-hue:${o}">
|
|
3
61
|
<div
|
|
4
62
|
part="field"
|
|
5
63
|
class="sv checker"
|
|
6
64
|
@pointerdown=${this._onSvDown}
|
|
7
65
|
>
|
|
8
|
-
<div class="sv-fill" style="opacity:${this.alpha?
|
|
9
|
-
<div class="thumb" style="left:${100*e}%;top:${100*(1-
|
|
66
|
+
<div class="sv-fill" style="opacity:${this.alpha?a:1}"></div>
|
|
67
|
+
<div class="thumb" style="left:${100*e}%;top:${100*(1-s)}%"></div>
|
|
10
68
|
</div>
|
|
11
69
|
|
|
12
70
|
<div class="tools">
|
|
@@ -31,161 +89,59 @@ import{css as t,LitElement as e,nothing as i,html as s}from"lit";import{property
|
|
|
31
89
|
</div>
|
|
32
90
|
|
|
33
91
|
<div class="values">
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
.label=${this._formatLabel}
|
|
59
|
-
></sky-button>
|
|
60
|
-
<sky-dropdown-item
|
|
61
|
-
value="hex"
|
|
62
|
-
label="Hex"
|
|
63
|
-
size="sm"
|
|
64
|
-
?selected=${"hex"===this.format}
|
|
65
|
-
></sky-dropdown-item>
|
|
66
|
-
<sky-dropdown-item
|
|
67
|
-
value="hsb"
|
|
68
|
-
label="HSB"
|
|
69
|
-
size="sm"
|
|
70
|
-
?selected=${"hsb"===this.format}
|
|
71
|
-
></sky-dropdown-item>
|
|
72
|
-
<sky-dropdown-item
|
|
73
|
-
value="rgb"
|
|
74
|
-
label="RGB"
|
|
75
|
-
size="sm"
|
|
76
|
-
?selected=${"rgb"===this.format}
|
|
77
|
-
></sky-dropdown-item>
|
|
78
|
-
</sky-dropdown>
|
|
79
|
-
|
|
80
|
-
${"hex"===this.format?s`
|
|
81
|
-
<sky-input
|
|
82
|
-
class="field"
|
|
83
|
-
.compact=${!0}
|
|
84
|
-
spellcheck="false"
|
|
85
|
-
.ariaLabel=${"Hex color"}
|
|
86
|
-
.value=${l(this._hexDraft)}
|
|
87
|
-
@value-changed=${this._onHexInput}
|
|
88
|
-
></sky-input>
|
|
89
|
-
`:"hsb"===this.format?s`
|
|
90
|
-
<div class="triple">
|
|
91
|
-
<sky-input
|
|
92
|
-
class="field"
|
|
93
|
-
.compact=${!0}
|
|
94
|
-
type="number"
|
|
95
|
-
min="0"
|
|
96
|
-
max="360"
|
|
97
|
-
step="1"
|
|
98
|
-
.ariaLabel=${"Hue"}
|
|
99
|
-
.value=${String(Math.round(t))}
|
|
100
|
-
@value-changed=${t=>this._onHsb("h",t)}
|
|
101
|
-
></sky-input>
|
|
102
|
-
<sky-input
|
|
103
|
-
class="field"
|
|
104
|
-
.compact=${!0}
|
|
105
|
-
type="number"
|
|
106
|
-
min="0"
|
|
107
|
-
max="100"
|
|
108
|
-
step="1"
|
|
109
|
-
.ariaLabel=${"Saturation"}
|
|
110
|
-
.value=${String(Math.round(100*e))}
|
|
111
|
-
@value-changed=${t=>this._onHsb("s",t)}
|
|
112
|
-
></sky-input>
|
|
113
|
-
<sky-input
|
|
114
|
-
class="field"
|
|
115
|
-
.compact=${!0}
|
|
116
|
-
type="number"
|
|
117
|
-
min="0"
|
|
118
|
-
max="100"
|
|
119
|
-
step="1"
|
|
120
|
-
.ariaLabel=${"Brightness"}
|
|
121
|
-
.value=${String(Math.round(100*a))}
|
|
122
|
-
@value-changed=${t=>this._onHsb("v",t)}
|
|
123
|
-
></sky-input>
|
|
124
|
-
</div>
|
|
125
|
-
`:s`
|
|
126
|
-
<div class="triple">
|
|
127
|
-
<sky-input
|
|
128
|
-
class="field"
|
|
129
|
-
.compact=${!0}
|
|
130
|
-
type="number"
|
|
131
|
-
min="0"
|
|
132
|
-
max="255"
|
|
133
|
-
step="1"
|
|
134
|
-
.ariaLabel=${"Red"}
|
|
135
|
-
.value=${String(o.r)}
|
|
136
|
-
@value-changed=${t=>this._onRgb("r",t)}
|
|
137
|
-
></sky-input>
|
|
138
|
-
<sky-input
|
|
139
|
-
class="field"
|
|
140
|
-
.compact=${!0}
|
|
141
|
-
type="number"
|
|
142
|
-
min="0"
|
|
143
|
-
max="255"
|
|
144
|
-
step="1"
|
|
145
|
-
.ariaLabel=${"Green"}
|
|
146
|
-
.value=${String(o.g)}
|
|
147
|
-
@value-changed=${t=>this._onRgb("g",t)}
|
|
148
|
-
></sky-input>
|
|
149
|
-
<sky-input
|
|
150
|
-
class="field"
|
|
151
|
-
.compact=${!0}
|
|
152
|
-
type="number"
|
|
153
|
-
min="0"
|
|
154
|
-
max="255"
|
|
155
|
-
step="1"
|
|
156
|
-
.ariaLabel=${"Blue"}
|
|
157
|
-
.value=${String(o.b)}
|
|
158
|
-
@value-changed=${t=>this._onRgb("b",t)}
|
|
159
|
-
></sky-input>
|
|
160
|
-
</div>
|
|
161
|
-
`}
|
|
92
|
+
<div class="channel">
|
|
93
|
+
${this._formatTrigger()}
|
|
94
|
+
${"hex"===this.format?i`
|
|
95
|
+
<input
|
|
96
|
+
class="num hex"
|
|
97
|
+
spellcheck="false"
|
|
98
|
+
aria-label="Hex color"
|
|
99
|
+
.value=${l(this._hexDraft)}
|
|
100
|
+
@input=${this._onHexInput}
|
|
101
|
+
/>
|
|
102
|
+
`:"hsb"===this.format?i`
|
|
103
|
+
<div class="splits">
|
|
104
|
+
${this._num("Hue",String(Math.round(t)),0,360,t=>this._onHsb("h",t))}
|
|
105
|
+
${this._num("Saturation",String(Math.round(100*e)),0,100,t=>this._onHsb("s",t))}
|
|
106
|
+
${this._num("Brightness",String(Math.round(100*s)),0,100,t=>this._onHsb("v",t))}
|
|
107
|
+
</div>
|
|
108
|
+
`:i`
|
|
109
|
+
<div class="splits">
|
|
110
|
+
${this._num("Red",String(n.r),0,255,t=>this._onRgb("r",t))}
|
|
111
|
+
${this._num("Green",String(n.g),0,255,t=>this._onRgb("g",t))}
|
|
112
|
+
${this._num("Blue",String(n.b),0,255,t=>this._onRgb("b",t))}
|
|
113
|
+
</div>
|
|
114
|
+
`}
|
|
115
|
+
</div>
|
|
162
116
|
|
|
163
|
-
${this.alpha?
|
|
117
|
+
${this.alpha?i`
|
|
164
118
|
<div class="alpha-row">
|
|
165
119
|
<div part="alpha" class="track checker" @pointerdown=${this._onAlphaDown}>
|
|
166
120
|
<div
|
|
167
121
|
class="track-fill"
|
|
168
122
|
style="background:linear-gradient(to right, transparent, ${h})"
|
|
169
123
|
></div>
|
|
170
|
-
<div class="thumb" style="left:${100*
|
|
124
|
+
<div class="thumb" style="left:${100*a}%"></div>
|
|
125
|
+
</div>
|
|
126
|
+
<div class="pct">
|
|
127
|
+
<input
|
|
128
|
+
class="num"
|
|
129
|
+
type="number"
|
|
130
|
+
inputmode="numeric"
|
|
131
|
+
min="0"
|
|
132
|
+
max="100"
|
|
133
|
+
step="1"
|
|
134
|
+
aria-label="Opacity percent"
|
|
135
|
+
.value=${l(String(Math.round(100*a)))}
|
|
136
|
+
@input=${this._onPct}
|
|
137
|
+
/>
|
|
138
|
+
<span class="unit">%</span>
|
|
171
139
|
</div>
|
|
172
|
-
<sky-input
|
|
173
|
-
class="pct"
|
|
174
|
-
.compact=${!0}
|
|
175
|
-
type="number"
|
|
176
|
-
min="0"
|
|
177
|
-
max="100"
|
|
178
|
-
step="1"
|
|
179
|
-
suffix="%"
|
|
180
|
-
.ariaLabel=${"Opacity percent"}
|
|
181
|
-
.value=${String(Math.round(100*r))}
|
|
182
|
-
@value-changed=${this._onPct}
|
|
183
|
-
></sky-input>
|
|
184
140
|
</div>
|
|
185
|
-
`:
|
|
141
|
+
`:r}
|
|
186
142
|
</div>
|
|
187
143
|
|
|
188
|
-
${this.actions?
|
|
144
|
+
${this.actions?i`
|
|
189
145
|
<div class="actions">
|
|
190
146
|
<sky-button
|
|
191
147
|
type="button"
|
|
@@ -207,9 +163,9 @@ import{css as t,LitElement as e,nothing as i,html as s}from"lit";import{property
|
|
|
207
163
|
@click=${this._done}
|
|
208
164
|
></sky-button>
|
|
209
165
|
</div>
|
|
210
|
-
`:
|
|
166
|
+
`:r}
|
|
211
167
|
</div>
|
|
212
|
-
`}};
|
|
168
|
+
`}};f.styles=t`
|
|
213
169
|
:host {
|
|
214
170
|
display: block;
|
|
215
171
|
width: 100%;
|
|
@@ -339,40 +295,97 @@ import{css as t,LitElement as e,nothing as i,html as s}from"lit";import{property
|
|
|
339
295
|
|
|
340
296
|
.values {
|
|
341
297
|
display: grid;
|
|
342
|
-
grid-template-columns:
|
|
298
|
+
grid-template-columns: minmax(0, 1fr);
|
|
343
299
|
gap: var(--sky-space-1, 4px) var(--sky-space-2, 8px);
|
|
344
300
|
align-items: center;
|
|
345
301
|
min-width: 0;
|
|
346
302
|
}
|
|
347
303
|
|
|
304
|
+
.channel {
|
|
305
|
+
display: flex;
|
|
306
|
+
align-items: stretch;
|
|
307
|
+
min-width: 0;
|
|
308
|
+
height: 28px;
|
|
309
|
+
border: var(--sky-border-primary, 1px solid color-mix(in oklch, var(--sky-text-primary) 16%, transparent));
|
|
310
|
+
border-radius: var(--sky-radius-primary, 6px);
|
|
311
|
+
background: var(--sky-glass-primary, transparent);
|
|
312
|
+
overflow: hidden;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.channel:focus-within {
|
|
316
|
+
box-shadow: var(--sky-focus-ring);
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.splits {
|
|
320
|
+
display: grid;
|
|
321
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
322
|
+
flex: 1;
|
|
323
|
+
min-width: 0;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.num {
|
|
327
|
+
width: 100%;
|
|
328
|
+
min-width: 0;
|
|
329
|
+
height: 100%;
|
|
330
|
+
margin: 0;
|
|
331
|
+
border: 0;
|
|
332
|
+
outline: none;
|
|
333
|
+
background: transparent;
|
|
334
|
+
color: inherit;
|
|
335
|
+
font: inherit;
|
|
336
|
+
text-align: center;
|
|
337
|
+
padding: 0 0.35rem;
|
|
338
|
+
appearance: textfield;
|
|
339
|
+
-moz-appearance: textfield;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.num.hex {
|
|
343
|
+
flex: 1;
|
|
344
|
+
text-align: start;
|
|
345
|
+
padding-inline: 0.5rem 0.65rem;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.splits .num + .num {
|
|
349
|
+
border-inline-start: var(--sky-border-tertiary, 1px solid color-mix(in oklch, var(--sky-text-primary) 12%, transparent));
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.num::-webkit-outer-spin-button,
|
|
353
|
+
.num::-webkit-inner-spin-button {
|
|
354
|
+
-webkit-appearance: none;
|
|
355
|
+
margin: 0;
|
|
356
|
+
}
|
|
357
|
+
|
|
348
358
|
.format-dd {
|
|
349
|
-
display:
|
|
350
|
-
|
|
359
|
+
display: inline-flex;
|
|
360
|
+
flex: 0 0 auto;
|
|
361
|
+
align-items: center;
|
|
362
|
+
width: auto;
|
|
363
|
+
min-width: 0;
|
|
364
|
+
border-inline-end: var(--sky-border-tertiary, 1px solid color-mix(in oklch, var(--sky-text-primary) 12%, transparent));
|
|
351
365
|
}
|
|
352
366
|
|
|
353
367
|
.format-dd::part(trigger) {
|
|
354
|
-
display:
|
|
355
|
-
width:
|
|
368
|
+
display: inline-flex;
|
|
369
|
+
width: auto;
|
|
356
370
|
}
|
|
357
371
|
|
|
358
372
|
.format-dd sky-button {
|
|
359
|
-
display:
|
|
360
|
-
width:
|
|
361
|
-
box-sizing: border-box;
|
|
373
|
+
display: inline-flex;
|
|
374
|
+
width: auto;
|
|
362
375
|
}
|
|
363
376
|
|
|
364
377
|
.format-dd::part(content) {
|
|
365
378
|
box-sizing: border-box;
|
|
366
379
|
padding: var(--sky-space-2, 8px);
|
|
367
|
-
width:
|
|
368
|
-
min-width:
|
|
369
|
-
max-width:
|
|
380
|
+
width: max-content;
|
|
381
|
+
min-width: 8.5rem;
|
|
382
|
+
max-width: none;
|
|
370
383
|
}
|
|
371
384
|
|
|
372
385
|
.format-dd::part(content-inner) {
|
|
373
386
|
overflow: visible;
|
|
374
387
|
max-height: none;
|
|
375
|
-
max-width:
|
|
388
|
+
max-width: none;
|
|
376
389
|
}
|
|
377
390
|
|
|
378
391
|
.format-dd sky-dropdown-item {
|
|
@@ -380,23 +393,42 @@ import{css as t,LitElement as e,nothing as i,html as s}from"lit";import{property
|
|
|
380
393
|
--di-pad-y: 6px;
|
|
381
394
|
}
|
|
382
395
|
|
|
396
|
+
.format-dd sky-dropdown-item::part(label) {
|
|
397
|
+
overflow: visible;
|
|
398
|
+
text-overflow: clip;
|
|
399
|
+
}
|
|
400
|
+
|
|
383
401
|
.format-dd sky-dropdown-item::part(root) {
|
|
384
402
|
padding: 0.4rem 0.75rem;
|
|
385
403
|
border-radius: 6px;
|
|
386
404
|
}
|
|
387
405
|
|
|
388
|
-
.field,
|
|
389
406
|
.pct {
|
|
390
|
-
display:
|
|
391
|
-
|
|
407
|
+
display: flex;
|
|
408
|
+
align-items: center;
|
|
409
|
+
width: 5rem;
|
|
392
410
|
min-width: 0;
|
|
411
|
+
height: 28px;
|
|
412
|
+
border: var(--sky-border-primary, 1px solid color-mix(in oklch, var(--sky-text-primary) 16%, transparent));
|
|
413
|
+
border-radius: var(--sky-radius-primary, 6px);
|
|
414
|
+
background: var(--sky-glass-primary, transparent);
|
|
415
|
+
overflow: hidden;
|
|
393
416
|
}
|
|
394
417
|
|
|
395
|
-
.
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
418
|
+
.pct:focus-within {
|
|
419
|
+
box-shadow: var(--sky-focus-ring);
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.pct .num {
|
|
423
|
+
text-align: end;
|
|
424
|
+
padding-inline-end: 0;
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.unit {
|
|
428
|
+
flex: 0 0 auto;
|
|
429
|
+
padding-inline: 0.2rem 0.45rem;
|
|
430
|
+
color: var(--sky-text-secondary, inherit);
|
|
431
|
+
font-size: var(--sky-font-size-xs, 0.75rem);
|
|
400
432
|
}
|
|
401
433
|
|
|
402
434
|
.alpha-row {
|
|
@@ -414,5 +446,5 @@ import{css as t,LitElement as e,nothing as i,html as s}from"lit";import{property
|
|
|
414
446
|
align-items: center;
|
|
415
447
|
gap: var(--sky-space-1, 4px);
|
|
416
448
|
}
|
|
417
|
-
`,
|
|
449
|
+
`,x([s({type:String})],f.prototype,"value",2),x([s({type:String,reflect:!0})],f.prototype,"format",2),x([s({type:Boolean})],f.prototype,"alpha",2),x([s({type:Boolean})],f.prototype,"eyedropper",2),x([s({type:Boolean})],f.prototype,"actions",2),x([a()],f.prototype,"_hsva",2),x([a()],f.prototype,"_hexDraft",2),x([n('[part="field"]')],f.prototype,"_svEl",2),x([n('[part="hue"]')],f.prototype,"_hueEl",2),x([n('[part="alpha"]')],f.prototype,"_alphaEl",2),f=x([o("sky-color-picker")],f);export{f as SkyColorPicker};
|
|
418
450
|
//# sourceMappingURL=sky-color-picker.js.map
|