@sky.ui/core 0.0.59 → 0.0.61

package/dist/sky-color-picker/sky-color-picker.js

@@ -1,12 +1,70 @@
-import{css as t,LitElement as e,nothing as i,html as s}from"lit";import{property as a,state as r,query as o,customElement as n}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 v,hexToHsva as u,hsvaToRgba as m,rgbaToHsva as y,hueCss as _}from"./color-model.js";var b=Object.defineProperty,g=Object.getOwnPropertyDescriptor,f=(t,e,i,s)=>{for(var a,r=s>1?void 0:s?g(e,i):e,o=t.length-1;o>=0;o--)(a=t[o])&&(r=(s?a(e,i,r):a(r))||r);return s&&r&&b(e,i,r),r};let k=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),s=d(i);this._hsvaEq(this._hsva,i)||(this._hsva=i),this._hexDraft!==s&&(this._hexDraft=s),this._syncedFromProp=s,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 s=t.getBoundingClientRect();return v("x"===i?(e.clientX-s.left)/s.width:(e.clientY-s.top)/s.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=u(e.startsWith("#")?e:`#${e}`);i&&this._setHsva(i,!0)}_onRgb(t,e){if(this._drag)return;const i=v(Number(this._eventValue(e)),0,255),s=m(this._hsva);s[t]=i,this._setHsva(y(s),!0)}_onHsb(t,e){if(this._drag)return;const i=Number(this._eventValue(e));"h"===t?this._setHsva({...this._hsva,h:v(i,0,360)},!0):this._setHsva({...this._hsva,[t]:v(i,0,100)/100},!0)}_onPct(t){if(this._drag)return;const e=v(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"}get _canEye(){return this.eyedropper&&"undefined"!=typeof window&&"EyeDropper"in window}render(){const{h:t,s:e,v:a,a:r}=this._hsva,o=m(this._hsva),n=_(t),h=c(this._hsva);return s`
-      <div class="root" style="--cp-hue:${n}">
+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`
+      <sky-dropdown
+        part="format"
+        class="format-dd"
+        trigger="click"
+        placement="bottom"
+        align="start"
+        .width=${"auto"}
+        .closeOnClick=${!0}
+        .maxHeight=${"none"}
+        .value=${this.format}
+        @open=${this._stopBubble}
+        @close=${this._stopBubble}
+        @open-change=${this._stopBubble}
+        @dropdown-item-click=${this._stopBubble}
+        @dropdown-select=${this._onFormatSelect}
+      >
+        <sky-button
+          slot="trigger"
+          type="button"
+          size="xs"
+          variant="transparent"
+          color="default"
+          animation="none"
+          .iconR=${"mdi:chevron-down"}
+          .label=${this._formatLabel}
+        ></sky-button>
+        <sky-dropdown-item
+          value="hex"
+          label="Hex"
+          size="sm"
+          ?selected=${"hex"===this.format}
+        ></sky-dropdown-item>
+        <sky-dropdown-item
+          value="hsb"
+          label="HSB"
+          size="sm"
+          ?selected=${"hsb"===this.format}
+        ></sky-dropdown-item>
+        <sky-dropdown-item
+          value="rgb"
+          label="RGB"
+          size="sm"
+          ?selected=${"rgb"===this.format}
+        ></sky-dropdown-item>
+      </sky-dropdown>
+    `}_num(t,e,r,s,a){return i`
+      <input
+        class="num"
+        type="number"
+        inputmode="numeric"
+        min=${r}
+        max=${s}
+        step="1"
+        aria-label=${t}
+        .value=${l(e)}
+        @input=${a}
+      />
+    `}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`
+      <div class="root" style="--cp-hue:${o}">
         <div
           part="field"
           class="sv checker"
           @pointerdown=${this._onSvDown}
         >
-          <div class="sv-fill" style="opacity:${this.alpha?r:1}"></div>
-          <div class="thumb" style="left:${100*e}%;top:${100*(1-a)}%"></div>
+          <div class="sv-fill" style="opacity:${this.alpha?a:1}"></div>
+          <div class="thumb" style="left:${100*e}%;top:${100*(1-s)}%"></div>
         </div>
 
         <div class="tools">
@@ -31,161 +89,59 @@ import{css as t,LitElement as e,nothing as i,html as s}from"lit";import{property
         </div>
 
         <div class="values">
-          <sky-dropdown
-            part="format"
-            class="format-dd"
-            trigger="click"
-            placement="bottom"
-            align="start"
-            .width=${"trigger"}
-            .closeOnClick=${!0}
-            .maxHeight=${"none"}
-            .value=${this.format}
-            @open=${this._stopBubble}
-            @close=${this._stopBubble}
-            @open-change=${this._stopBubble}
-            @dropdown-item-click=${this._stopBubble}
-            @dropdown-select=${this._onFormatSelect}
-          >
-            <sky-button
-              slot="trigger"
-              type="button"
-              size="xs"
-              variant="bordered"
-              color="default"
-              animation="none"
-              .iconR=${"mdi:chevron-down"}
-              .label=${this._formatLabel}
-            ></sky-button>
-            <sky-dropdown-item
-              value="hex"
-              label="Hex"
-              size="sm"
-              ?selected=${"hex"===this.format}
-            ></sky-dropdown-item>
-            <sky-dropdown-item
-              value="hsb"
-              label="HSB"
-              size="sm"
-              ?selected=${"hsb"===this.format}
-            ></sky-dropdown-item>
-            <sky-dropdown-item
-              value="rgb"
-              label="RGB"
-              size="sm"
-              ?selected=${"rgb"===this.format}
-            ></sky-dropdown-item>
-          </sky-dropdown>
-
-          ${"hex"===this.format?s`
-                <sky-input
-                  class="field"
-                  .compact=${!0}
-                  spellcheck="false"
-                  .ariaLabel=${"Hex color"}
-                  .value=${l(this._hexDraft)}
-                  @value-changed=${this._onHexInput}
-                ></sky-input>
-              `:"hsb"===this.format?s`
-                  <div class="triple">
-                    <sky-input
-                      class="field"
-                      .compact=${!0}
-                      type="number"
-                      min="0"
-                      max="360"
-                      step="1"
-                      .ariaLabel=${"Hue"}
-                      .value=${String(Math.round(t))}
-                      @value-changed=${t=>this._onHsb("h",t)}
-                    ></sky-input>
-                    <sky-input
-                      class="field"
-                      .compact=${!0}
-                      type="number"
-                      min="0"
-                      max="100"
-                      step="1"
-                      .ariaLabel=${"Saturation"}
-                      .value=${String(Math.round(100*e))}
-                      @value-changed=${t=>this._onHsb("s",t)}
-                    ></sky-input>
-                    <sky-input
-                      class="field"
-                      .compact=${!0}
-                      type="number"
-                      min="0"
-                      max="100"
-                      step="1"
-                      .ariaLabel=${"Brightness"}
-                      .value=${String(Math.round(100*a))}
-                      @value-changed=${t=>this._onHsb("v",t)}
-                    ></sky-input>
-                  </div>
-                `:s`
-                  <div class="triple">
-                    <sky-input
-                      class="field"
-                      .compact=${!0}
-                      type="number"
-                      min="0"
-                      max="255"
-                      step="1"
-                      .ariaLabel=${"Red"}
-                      .value=${String(o.r)}
-                      @value-changed=${t=>this._onRgb("r",t)}
-                    ></sky-input>
-                    <sky-input
-                      class="field"
-                      .compact=${!0}
-                      type="number"
-                      min="0"
-                      max="255"
-                      step="1"
-                      .ariaLabel=${"Green"}
-                      .value=${String(o.g)}
-                      @value-changed=${t=>this._onRgb("g",t)}
-                    ></sky-input>
-                    <sky-input
-                      class="field"
-                      .compact=${!0}
-                      type="number"
-                      min="0"
-                      max="255"
-                      step="1"
-                      .ariaLabel=${"Blue"}
-                      .value=${String(o.b)}
-                      @value-changed=${t=>this._onRgb("b",t)}
-                    ></sky-input>
-                  </div>
-                `}
+          <div class="channel">
+            ${this._formatTrigger()}
+            ${"hex"===this.format?i`
+                  <input
+                    class="num hex"
+                    spellcheck="false"
+                    aria-label="Hex color"
+                    .value=${l(this._hexDraft)}
+                    @input=${this._onHexInput}
+                  />
+                `:"hsb"===this.format?i`
+                    <div class="splits">
+                      ${this._num("Hue",String(Math.round(t)),0,360,t=>this._onHsb("h",t))}
+                      ${this._num("Saturation",String(Math.round(100*e)),0,100,t=>this._onHsb("s",t))}
+                      ${this._num("Brightness",String(Math.round(100*s)),0,100,t=>this._onHsb("v",t))}
+                    </div>
+                  `:i`
+                    <div class="splits">
+                      ${this._num("Red",String(n.r),0,255,t=>this._onRgb("r",t))}
+                      ${this._num("Green",String(n.g),0,255,t=>this._onRgb("g",t))}
+                      ${this._num("Blue",String(n.b),0,255,t=>this._onRgb("b",t))}
+                    </div>
+                  `}
+          </div>
 
-          ${this.alpha?s`
+          ${this.alpha?i`
                 <div class="alpha-row">
                   <div part="alpha" class="track checker" @pointerdown=${this._onAlphaDown}>
                     <div
                       class="track-fill"
                       style="background:linear-gradient(to right, transparent, ${h})"
                     ></div>
-                    <div class="thumb" style="left:${100*r}%"></div>
+                    <div class="thumb" style="left:${100*a}%"></div>
+                  </div>
+                  <div class="pct">
+                    <input
+                      class="num"
+                      type="number"
+                      inputmode="numeric"
+                      min="0"
+                      max="100"
+                      step="1"
+                      aria-label="Opacity percent"
+                      .value=${l(String(Math.round(100*a)))}
+                      @input=${this._onPct}
+                    />
+                    <span class="unit">%</span>
                   </div>
-                  <sky-input
-                    class="pct"
-                    .compact=${!0}
-                    type="number"
-                    min="0"
-                    max="100"
-                    step="1"
-                    suffix="%"
-                    .ariaLabel=${"Opacity percent"}
-                    .value=${String(Math.round(100*r))}
-                    @value-changed=${this._onPct}
-                  ></sky-input>
                 </div>
-              `:i}
+              `:r}
         </div>
 
-        ${this.actions?s`
+        ${this.actions?i`
               <div class="actions">
                 <sky-button
                   type="button"
@@ -207,9 +163,9 @@ import{css as t,LitElement as e,nothing as i,html as s}from"lit";import{property
                   @click=${this._done}
                 ></sky-button>
               </div>
-            `:i}
+            `:r}
       </div>
-    `}};k.styles=t`
+    `}};f.styles=t`
     :host {
       display: block;
       width: 100%;
@@ -262,6 +218,7 @@ import{css as t,LitElement as e,nothing as i,html as s}from"lit";import{property
       position: relative;
       width: 100%;
       aspect-ratio: 1.2 / 1;
+      max-height: var(--sky-color-sv-max-h, none);
       border-radius: var(--sky-radius-secondary, 8px);
       overflow: hidden;
       cursor: crosshair;
@@ -338,40 +295,97 @@ import{css as t,LitElement as e,nothing as i,html as s}from"lit";import{property
 
     .values {
       display: grid;
-      grid-template-columns: auto minmax(0, 1fr);
+      grid-template-columns: minmax(0, 1fr);
       gap: var(--sky-space-1, 4px) var(--sky-space-2, 8px);
       align-items: center;
       min-width: 0;
     }
 
+    .channel {
+      display: flex;
+      align-items: stretch;
+      min-width: 0;
+      height: 28px;
+      border: var(--sky-border-primary, 1px solid color-mix(in oklch, var(--sky-text-primary) 16%, transparent));
+      border-radius: var(--sky-radius-primary, 6px);
+      background: var(--sky-glass-primary, transparent);
+      overflow: hidden;
+    }
+
+    .channel:focus-within {
+      box-shadow: var(--sky-focus-ring);
+    }
+
+    .splits {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      flex: 1;
+      min-width: 0;
+    }
+
+    .num {
+      width: 100%;
+      min-width: 0;
+      height: 100%;
+      margin: 0;
+      border: 0;
+      outline: none;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      text-align: center;
+      padding: 0 0.35rem;
+      appearance: textfield;
+      -moz-appearance: textfield;
+    }
+
+    .num.hex {
+      flex: 1;
+      text-align: start;
+      padding-inline: 0.5rem 0.65rem;
+    }
+
+    .splits .num + .num {
+      border-inline-start: var(--sky-border-tertiary, 1px solid color-mix(in oklch, var(--sky-text-primary) 12%, transparent));
+    }
+
+    .num::-webkit-outer-spin-button,
+    .num::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
     .format-dd {
-      display: block;
-      min-width: 4.5rem;
+      display: inline-flex;
+      flex: 0 0 auto;
+      align-items: center;
+      width: auto;
+      min-width: 0;
+      border-inline-end: var(--sky-border-tertiary, 1px solid color-mix(in oklch, var(--sky-text-primary) 12%, transparent));
     }
 
     .format-dd::part(trigger) {
-      display: block;
-      width: 100%;
+      display: inline-flex;
+      width: auto;
     }
 
     .format-dd sky-button {
-      display: block;
-      width: 100%;
-      box-sizing: border-box;
+      display: inline-flex;
+      width: auto;
     }
 
     .format-dd::part(content) {
       box-sizing: border-box;
       padding: var(--sky-space-2, 8px);
-      width: var(--sky-dd-width, max-content);
-      min-width: var(--sky-dd-width, auto);
-      max-width: var(--sky-dd-width, none);
+      width: max-content;
+      min-width: 8.5rem;
+      max-width: none;
     }
 
     .format-dd::part(content-inner) {
       overflow: visible;
       max-height: none;
-      max-width: 100%;
+      max-width: none;
     }
 
     .format-dd sky-dropdown-item {
@@ -379,23 +393,42 @@ import{css as t,LitElement as e,nothing as i,html as s}from"lit";import{property
       --di-pad-y: 6px;
     }
 
+    .format-dd sky-dropdown-item::part(label) {
+      overflow: visible;
+      text-overflow: clip;
+    }
+
     .format-dd sky-dropdown-item::part(root) {
       padding: 0.4rem 0.75rem;
       border-radius: 6px;
     }
 
-    .field,
     .pct {
-      display: block;
-      width: 100%;
+      display: flex;
+      align-items: center;
+      width: 5rem;
       min-width: 0;
+      height: 28px;
+      border: var(--sky-border-primary, 1px solid color-mix(in oklch, var(--sky-text-primary) 16%, transparent));
+      border-radius: var(--sky-radius-primary, 6px);
+      background: var(--sky-glass-primary, transparent);
+      overflow: hidden;
     }
 
-    .triple {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: var(--sky-space-1, 4px);
-      min-width: 0;
+    .pct:focus-within {
+      box-shadow: var(--sky-focus-ring);
+    }
+
+    .pct .num {
+      text-align: end;
+      padding-inline-end: 0;
+    }
+
+    .unit {
+      flex: 0 0 auto;
+      padding-inline: 0.2rem 0.45rem;
+      color: var(--sky-text-secondary, inherit);
+      font-size: var(--sky-font-size-xs, 0.75rem);
     }
 
     .alpha-row {
@@ -413,5 +446,5 @@ import{css as t,LitElement as e,nothing as i,html as s}from"lit";import{property
       align-items: center;
       gap: var(--sky-space-1, 4px);
     }
-  `,f([a({type:String})],k.prototype,"value",2),f([a({type:String,reflect:!0})],k.prototype,"format",2),f([a({type:Boolean})],k.prototype,"alpha",2),f([a({type:Boolean})],k.prototype,"eyedropper",2),f([a({type:Boolean})],k.prototype,"actions",2),f([r()],k.prototype,"_hsva",2),f([r()],k.prototype,"_hexDraft",2),f([o('[part="field"]')],k.prototype,"_svEl",2),f([o('[part="hue"]')],k.prototype,"_hueEl",2),f([o('[part="alpha"]')],k.prototype,"_alphaEl",2),k=f([n("sky-color-picker")],k);export{k as SkyColorPicker};
+  `,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};
 //# sourceMappingURL=sky-color-picker.js.map