@helixui/library 2.1.2-next.52 → 2.1.2-next.54

package/dist/css/hx-clinical-status.css

@@ -34,12 +34,12 @@
     gap: var(--hx-clinical-status-gap, var(--hx-space-3, 0.75rem));
     padding: var(--hx-clinical-status-padding, var(--hx-space-4, 1rem));
     border: var(--hx-clinical-status-border-width, var(--hx-border-width-thin, 1px)) solid
-      var(--hx-clinical-status-border-color, var(--hx-color-info-200, #b3d9ef));
+      var(--hx-clinical-status-border-color, var(--hx-color-info-200, #bae6fd));
     border-inline-start: var(--hx-clinical-status-accent-width, 4px) solid
-      var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #3b82f6));
+      var(--hx-clinical-status-accent-color, var(--hx-color-info-500, #0284c7));
     border-radius: var(--hx-clinical-status-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-clinical-status-bg, var(--hx-color-info-50, #e8f4fd));
-    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #1a3a4a));
+    background-color: var(--hx-clinical-status-bg, var(--hx-color-info-50, #f0f9ff));
+    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #0c4a6e));
     font-family: var(--hx-clinical-status-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -60,11 +60,11 @@
 
   :host([severity='info']) .clinical-status,
   :host(:not([severity])) .clinical-status {
-    --hx-clinical-status-bg: var(--hx-color-info-50, #e8f4fd);
-    --hx-clinical-status-border-color: var(--hx-color-info-200, #b3d9ef);
-    --hx-clinical-status-accent-color: var(--hx-color-info-500, #3b82f6);
-    --hx-clinical-status-color: var(--hx-color-info-800, #1a3a4a);
-    --hx-clinical-status-icon-color: var(--hx-color-info-500, #3b82f6);
+    --hx-clinical-status-bg: var(--hx-color-info-50, #f0f9ff);
+    --hx-clinical-status-border-color: var(--hx-color-info-200, #bae6fd);
+    --hx-clinical-status-accent-color: var(--hx-color-info-500, #0284c7);
+    --hx-clinical-status-color: var(--hx-color-info-800, #0c4a6e);
+    --hx-clinical-status-icon-color: var(--hx-color-info-500, #0284c7);
   }
 
   /* ─── Severity: warning ─── */
@@ -72,9 +72,9 @@
   :host([severity='warning']) .clinical-status {
     --hx-clinical-status-bg: var(--hx-color-warning-50, #fffbeb);
     --hx-clinical-status-border-color: var(--hx-color-warning-200, #fde68a);
-    --hx-clinical-status-accent-color: var(--hx-color-warning-500, #f59e0b);
-    --hx-clinical-status-color: var(--hx-color-warning-800, #92400e);
-    --hx-clinical-status-icon-color: var(--hx-color-warning-500, #f59e0b);
+    --hx-clinical-status-accent-color: var(--hx-color-warning-500, #d97706);
+    --hx-clinical-status-color: var(--hx-color-warning-800, #78350f);
+    --hx-clinical-status-icon-color: var(--hx-color-warning-500, #d97706);
   }
 
   /* ─── Severity: critical ─── */
@@ -82,9 +82,9 @@
   :host([severity='critical']) .clinical-status {
     --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);
     --hx-clinical-status-border-color: var(--hx-color-error-200, #fecaca);
-    --hx-clinical-status-accent-color: var(--hx-color-error-500, #ef4444);
-    --hx-clinical-status-color: var(--hx-color-error-800, #991b1b);
-    --hx-clinical-status-icon-color: var(--hx-color-error-500, #ef4444);
+    --hx-clinical-status-accent-color: var(--hx-color-error-500, #dc2626);
+    --hx-clinical-status-color: var(--hx-color-error-800, #7f1d1d);
+    --hx-clinical-status-icon-color: var(--hx-color-error-500, #dc2626);
   }
 
   /* ─── Severity: emergent ─── */
@@ -92,9 +92,9 @@
   :host([severity='emergent']) .clinical-status {
     --hx-clinical-status-bg: var(--hx-color-error-50, #fef2f2);
     --hx-clinical-status-border-color: var(--hx-color-error-300, #fca5a5);
-    --hx-clinical-status-accent-color: var(--hx-color-error-700, #b91c1c);
-    --hx-clinical-status-color: var(--hx-color-error-900, #7f1d1d);
-    --hx-clinical-status-icon-color: var(--hx-color-error-700, #b91c1c);
+    --hx-clinical-status-accent-color: var(--hx-color-error-700, #991b1b);
+    --hx-clinical-status-color: var(--hx-color-error-900, #651a1a);
+    --hx-clinical-status-icon-color: var(--hx-color-error-700, #991b1b);
     border-inline-start-width: var(--hx-clinical-status-emergent-accent-width, 6px);
     font-weight: var(--hx-font-weight-semibold, 600);
   }
@@ -105,7 +105,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #3b82f6));
+    color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #0284c7));
   }
 
   .clinical-status__icon svg {
@@ -168,7 +168,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #1a3a4a));
+    color: var(--hx-clinical-status-color, var(--hx-color-info-800, #0c4a6e));
     cursor: pointer;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: 1;
@@ -185,7 +185,7 @@
 
   .clinical-status__dismiss-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));
+      var(--hx-focus-ring-color, var(--hx-color-focus, #60a5fa));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
@@ -216,7 +216,7 @@
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-semibold, 600);
     text-transform: uppercase;
-    letter-spacing: var(--hx-letter-spacing-wide, 0.05em);
+    letter-spacing: var(--hx-letter-spacing-wide, 0.025em);
     cursor: pointer;
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-touch-target-size, 44px);
@@ -231,7 +231,7 @@
 
   .clinical-status__acknowledge-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));
+      var(--hx-focus-ring-color, var(--hx-color-focus, #60a5fa));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -246,3 +246,26 @@
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .clinical-status {
+      border-color: CanvasText;
+      border-inline-start-color: CanvasText;
+    }
+
+    .clinical-status__icon svg {
+      fill: CanvasText;
+    }
+
+    .clinical-status__dismiss-button {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+
+    .clinical-status__acknowledge-button {
+      border-color: ButtonText;
+      color: ButtonText;
+    }
+  }

package/dist/css/hx-code-snippet.css

@@ -63,7 +63,7 @@
     display: block;
     font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));
     font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875rem));
-    line-height: var(--hx-line-height-relaxed, 1.625);
+    line-height: var(--hx-line-height-relaxed, 1.75);
     color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));
     tab-size: var(--hx-code-snippet-tab-size, 2);
   }
@@ -82,7 +82,7 @@
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background-color: var(--hx-color-neutral-800, #1e293b);
     color: var(--hx-color-neutral-200, #e2e8f0);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-medium, 500);
     line-height: 1; /* intentional literal: icon/action button needs line-height 1; no token maps to exactly 1 */
@@ -124,7 +124,7 @@
     border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-700, #334155);
     background-color: var(--hx-color-neutral-800, #1e293b);
     color: var(--hx-color-neutral-300, #cbd5e1);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
     text-align: center;
@@ -164,6 +164,28 @@
     }
   }
 
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .code-snippet {
+      border: 1px solid CanvasText;
+    }
+
+    .code-snippet--inline {
+      border: 1px solid CanvasText;
+    }
+
+    .code-snippet__copy-button {
+      border-color: ButtonText;
+      color: ButtonText;
+    }
+
+    .code-snippet__expand-button {
+      border-top-color: CanvasText;
+      color: ButtonText;
+    }
+  }
+
   /* ─── Screen-reader only ─── */
 
   .sr-only {

package/dist/css/hx-color-picker.css

@@ -1,2 +1,277 @@
 /* hx-color-picker — extracted from Shadow DOM styles */
-:host{display:inline-block;position:relative;font-family:var(--hx-font-family-sans, sans-serif);font-size:var(--hx-font-size-sm, .875rem)}:host([disabled]){pointer-events:none;opacity:var(--hx-opacity-disabled, .4)}.trigger{display:inline-flex;align-items:center;gap:var(--hx-space-2, .5rem);padding:var(--hx-space-1, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-md, .375rem);background:var(--hx-color-neutral-0, #fff);cursor:pointer;transition:border-color var(--hx-transition-fast, .15s ease)}.trigger:hover:not([disabled]){border-color:var(--hx-color-primary-500, #3b82f6)}:is(.trigger,.gradient-grid,.slider-track,.swatch-btn,.format-btn):focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, var(--hx-color-primary-500));outline-offset:var(--hx-focus-ring-offset, 2px)}.trigger-swatch{width:1.5rem;height:1.5rem;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);display:block;flex-shrink:0}.trigger-label{font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-700, #374151);font-family:var(--hx-font-family-mono, monospace);white-space:nowrap}.panel{position:absolute;z-index:var(--hx-color-picker-z-index, 1000);top:calc(100% + 4px);left:0;background:var(--hx-color-neutral-0, #fff);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem);box-shadow:0 8px 24px var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, .15)));padding:var(--hx-space-4, 1rem);width:var(--hx-color-picker-width, 260px);display:flex;flex-direction:column;gap:var(--hx-space-3, .75rem);outline:none}:host([inline]) .panel{position:static;box-shadow:none;border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem)}.gradient-grid{position:relative;width:100%;height:var(--hx-color-picker-grid-height, 160px);border-radius:var(--hx-border-radius-sm, .25rem);cursor:crosshair;overflow:hidden;touch-action:none;flex-shrink:0}.gradient-grid-bg{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000),linear-gradient(to right,#fff,var(--_hue-color, hsl(0, 100%, 50%)));pointer-events:none}.gradient-thumb{position:absolute;width:12px;height:12px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;top:var(--_thumb-y, 0%);left:var(--_thumb-x, 100%)}.slider-track{position:relative;width:100%;height:12px;border-radius:6px;cursor:pointer;touch-action:none;flex-shrink:0}.hue-track{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.opacity-track{background-image:linear-gradient(to right,transparent,var(--_hue-color, hsl(0, 100%, 50%))),repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 0 0 / 12px 12px}.slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;left:var(--_slider-pct, 0%);background:var(--_thumb-color, hsl(0, 100%, 50%))}.swatches{display:flex;flex-wrap:wrap;gap:var(--hx-space-1, .25rem)}.swatch-btn{width:20px;height:20px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));cursor:pointer;padding:0;flex-shrink:0;transition:transform var(--hx-transition-fast, .15s ease)}.swatch-btn:hover{transform:scale(1.15);border-color:var( --hx-color-picker-swatch-border-hover, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)) )}.input-area{display:flex;align-items:center;gap:var(--hx-space-2, .5rem)}.format-btn{flex-shrink:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);background:var(--hx-color-neutral-100, #f3f4f6);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);cursor:pointer;font-size:var(--hx-font-size-xs, .75rem);color:var(--hx-color-neutral-600, #4b5563);text-transform:uppercase;font-weight:var(--hx-font-weight-semibold, 600);letter-spacing:.05em}.color-input{flex:1;min-width:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);font-family:var(--hx-font-family-mono, monospace);font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-900, #111827);background:var(--hx-color-neutral-0, #fff);outline:none}.color-input:focus-visible{border-color:var(--hx-focus-ring-color, var(--hx-color-primary-500));box-shadow:0 0 0 2px color-mix(in srgb,var(--hx-focus-ring-color, var(--hx-color-primary-500)) 20%,transparent)}.input-preview{width:24px;height:24px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);flex-shrink:0}@media(prefers-reduced-motion:reduce){.trigger,.swatch-btn{transition:none}}
+:host {
+    display: inline-block;
+    position: relative;
+    font-family: var(--hx-font-family-sans, sans-serif);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: var(--hx-opacity-disabled, 0.5);
+  }
+  .trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+    padding: var(--hx-space-1, 0.25rem);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+    background: var(--hx-color-neutral-0, #ffffff);
+    cursor: pointer;
+    transition: border-color var(--hx-transition-fast, 150ms ease);
+  }
+  .trigger:hover:not([disabled]) {
+    border-color: var(--hx-color-primary-500, #2563eb);
+  }
+  :is(.trigger, .gradient-grid, .slider-track, .swatch-btn, .format-btn):focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-500));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+  .trigger-swatch {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)));
+    background: var(--_preview-color, #000);
+    display: block;
+    flex-shrink: 0;
+  }
+  .trigger-label {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    color: var(--hx-color-neutral-700, #334155);
+    font-family: var(--hx-font-family-mono, monospace);
+    white-space: nowrap;
+  }
+  .panel {
+    position: absolute;
+    z-index: var(--hx-color-picker-z-index, 1000);
+    top: calc(100% + 4px);
+    left: 0;
+    background: var(--hx-color-neutral-0, #ffffff);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
+    border-radius: var(--hx-border-radius-lg, 0.5rem);
+    box-shadow: 0 8px 24px
+      var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, 0.15)));
+    padding: var(--hx-space-4, 1rem);
+    width: var(--hx-color-picker-width, 260px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-3, 0.75rem);
+    outline: none;
+  }
+  :host([inline]) .panel {
+    position: static;
+    box-shadow: none;
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
+    border-radius: var(--hx-border-radius-lg, 0.5rem);
+  }
+  .gradient-grid {
+    position: relative;
+    width: 100%;
+    height: var(--hx-color-picker-grid-height, 160px);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    cursor: crosshair;
+    overflow: hidden;
+    touch-action: none;
+    flex-shrink: 0;
+  }
+  .gradient-grid-bg {
+    position: absolute;
+    inset: 0;
+    background:
+      linear-gradient(to bottom, transparent, #000),
+      linear-gradient(to right, #fff, var(--_hue-color, hsl(0, 100%, 50%)));
+    pointer-events: none;
+  }
+  .gradient-thumb {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: none;
+    box-shadow:
+      0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #ffffff)),
+      0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, 0.3)));
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    top: var(--_thumb-y, 0%);
+    left: var(--_thumb-x, 100%);
+  }
+  .slider-track {
+    position: relative;
+    width: 100%;
+    height: 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    touch-action: none;
+    flex-shrink: 0;
+  }
+  .hue-track {
+    background: linear-gradient(
+      to right,
+      red,
+      #ff8000,
+      #ff0,
+      #80ff00,
+      #0f0,
+      #00ff80,
+      #0ff,
+      #0080ff,
+      #00f,
+      #7f00ff,
+      #f0f,
+      #ff0080,
+      red
+    );
+  }
+  .opacity-track {
+    background-image:
+      linear-gradient(to right, transparent, var(--_hue-color, hsl(0, 100%, 50%))),
+      repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 12px 12px;
+  }
+  .slider-thumb {
+    position: absolute;
+    top: 50%;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: none;
+    box-shadow:
+      0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #ffffff)),
+      0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, 0.3)));
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    left: var(--_slider-pct, 0%);
+    background: var(--_thumb-color, hsl(0, 100%, 50%));
+  }
+  .swatches {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--hx-space-1, 0.25rem);
+  }
+  .swatch-btn {
+    width: 20px;
+    height: 20px;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)));
+    cursor: pointer;
+    padding: 0;
+    flex-shrink: 0;
+    transition: transform var(--hx-transition-fast, 150ms ease);
+  }
+  .swatch-btn:hover {
+    transform: scale(1.15);
+    border-color: var(
+      --hx-color-picker-swatch-border-hover,
+      var(--hx-overlay-black-30, rgba(0, 0, 0, 0.3))
+    );
+  }
+  .input-area {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-space-2, 0.5rem);
+  }
+  .format-btn {
+    flex-shrink: 0;
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
+    background: var(--hx-color-neutral-100, #f1f5f9);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    cursor: pointer;
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-600, #475569);
+    text-transform: uppercase;
+    font-weight: var(--hx-font-weight-semibold, 600);
+    letter-spacing: 0.05em;
+  }
+  .color-input {
+    flex: 1;
+    min-width: 0;
+    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    font-family: var(--hx-font-family-mono, monospace);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    color: var(--hx-color-neutral-900, #0f172a);
+    background: var(--hx-color-neutral-0, #ffffff);
+    outline: none;
+  }
+  .color-input:focus-visible {
+    border-color: var(--hx-focus-ring-color, var(--hx-color-primary-500));
+    box-shadow: 0 0 0 2px
+      color-mix(in srgb, var(--hx-focus-ring-color, var(--hx-color-primary-500)) 20%, transparent);
+  }
+  .input-preview {
+    width: 24px;
+    height: 24px;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)));
+    background: var(--_preview-color, #000);
+    flex-shrink: 0;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .trigger,
+    .swatch-btn {
+      transition: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .trigger {
+      forced-color-adjust: none;
+      background-color: Field;
+      color: FieldText;
+      border: 2px solid ButtonText;
+    }
+    .trigger:hover:not([disabled]) {
+      border-color: Highlight;
+    }
+    :is(.trigger, .gradient-grid, .slider-track, .swatch-btn, .format-btn):focus-visible {
+      outline-color: Highlight;
+    }
+    .panel {
+      forced-color-adjust: none;
+      background-color: Canvas;
+      border: 2px solid CanvasText;
+      box-shadow: none;
+    }
+    .gradient-thumb,
+    .slider-thumb {
+      box-shadow: 0 0 0 2px CanvasText;
+    }
+    .swatch-btn {
+      border: 2px solid ButtonText;
+    }
+    .swatch-btn:hover {
+      border-color: Highlight;
+    }
+    .color-input {
+      forced-color-adjust: none;
+      background-color: Field;
+      color: FieldText;
+      border: 2px solid ButtonText;
+    }
+    .color-input:focus-visible {
+      border-color: Highlight;
+      box-shadow: none;
+    }
+    .format-btn {
+      forced-color-adjust: none;
+      background-color: ButtonFace;
+      color: ButtonText;
+      border: 2px solid ButtonText;
+    }
+    .trigger-label {
+      color: FieldText;
+    }
+    :host([disabled]) {
+      opacity: 1;
+    }
+    :host([disabled]) .trigger {
+      border-color: GrayText;
+      color: GrayText;
+    }
+  }