@fusion.dev/helix 0.146.0 → 0.148.0

package/dist/color-input/root/color-input-root.css.js

@@ -1,123 +1,14 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`[part="field"] {
-align-items: center;
-background-color: var(--color-input-background-color, var(--helix-color-well));
-block-size: var(--helix-size-control);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-display: flex;
-gap: var(--helix-space-2xs);
-overflow: hidden;
-padding-inline-start: var(--helix-space-xs);
-transition:
+export const styles = createSheet(`[part="field"] {align-items: center;background-color: var(--color-input-background-color, var(--helix-color-well));block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: flex;gap: var(--helix-space-2xs);overflow: hidden;padding-inline-start: var(--helix-space-xs);transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
-border-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-:host(:disabled) [part="field"] {
-color: var(--helix-color-foreground-subtle);
-}
-
-[part="trigger"] {
-all: unset;
-align-items: stretch;
-align-self: stretch;
-box-sizing: border-box;
-cursor: pointer;
-display: flex;
-flex: none;
-}
-
-[part="trigger"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: calc(var(--helix-size-focus-offset) * -1);
-}
-
-:host(:disabled) [part="trigger"] {
-cursor: not-allowed;
-}
-
-[part="preview"] {
-background-image:
+border-color var(--helix-duration-fast) var(--helix-easing-standard);}:host(:disabled) [part="field"] {color: var(--helix-color-foreground-subtle);}[part="trigger"] {all: unset;align-items: stretch;align-self: stretch;box-sizing: border-box;cursor: pointer;display: flex;flex: none;}[part="trigger"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}:host(:disabled) [part="trigger"] {cursor: not-allowed;}[part="preview"] {background-image:
 linear-gradient(var(--color-input-swatch, transparent), var(--color-input-swatch, transparent)),
 conic-gradient(
 var(--helix-color-surface-sunken) 0 25%,
 var(--helix-color-surface) 0 50%,
 var(--helix-color-surface-sunken) 0 75%,
 var(--helix-color-surface) 0
-);
-background-size:
+);background-size:
 100% 100%,
-var(--helix-space-sm) var(--helix-space-sm);
-border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
-box-sizing: border-box;
-display: block;
-inline-size: var(--helix-size-control);
-}
-
-[part="surface"] {
---_floating-border-color: var(--color-input-border-color, var(--helix-color-border));
---_floating-border-width: var(--color-input-border-width, var(--helix-border-floating));
---_floating-shadow: var(--color-input-shadow, var(--helix-shadow-floating));
-
-inline-size: var(--color-input-panel-size, 264px);
-overflow: hidden;
-padding: var(--helix-space-none);
-position: absolute;
-}
-
-[part="picker"] {
-display: block;
-padding: var(--helix-space-sm);
-}
-
-::slotted([slot="panel-header"]) {
-display: block;
-margin: var(--helix-space-sm) var(--helix-space-sm) var(--helix-space-none);
-}
-
-::slotted([slot="panel-footer"]) {
-display: block;
-margin: var(--helix-space-none) var(--helix-space-sm) var(--helix-space-sm);
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="field"] {
-transition: none;
-}
-}
-
-:host([variant="swatch"]) [part="field"] {
-background-color: transparent;
-border: none;
-inline-size: max-content;
-padding-inline: var(--helix-space-none);
-}
-
-:host([variant="swatch"]) [part="trigger"] {
-block-size: var(--color-input-swatch-size, var(--helix-size-control));
-inline-size: var(--color-input-swatch-size, var(--helix-size-control));
-}
-
-:host([variant="swatch"]:focus-within) [part="field"] {
-outline: none;
-}
-
-:host([variant="swatch"]) [part="preview"] {
-block-size: 100%;
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--color-input-swatch-radius, var(--helix-radii-sm));
-inline-size: 100%;
-}
-
-slot[name="start"]::slotted(*),
-slot[name="end"]::slotted(*) {
-color: var(--helix-color-foreground-subtle);
-flex: 0 0 auto;
-}
-
-@media print {
-:host {
-print-color-adjust: exact;
-}
-}`);
+var(--helix-space-sm) var(--helix-space-sm);border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: block;inline-size: var(--helix-size-control);}[part="surface"] {--_floating-border-color: var(--color-input-border-color, var(--helix-color-border));--_floating-border-width: var(--color-input-border-width, var(--helix-border-floating));--_floating-shadow: var(--color-input-shadow, var(--helix-shadow-floating));inline-size: var(--color-input-panel-size, 264px);overflow: hidden;padding: var(--helix-space-none);position: absolute;}[part="picker"] {display: block;padding: var(--helix-space-sm);}::slotted([slot="panel-header"]) {display: block;margin: var(--helix-space-sm) var(--helix-space-sm) var(--helix-space-none);}::slotted([slot="panel-footer"]) {display: block;margin: var(--helix-space-none) var(--helix-space-sm) var(--helix-space-sm);}@media (prefers-reduced-motion: reduce) {[part="field"] {transition: none;}}:host([variant="swatch"]) [part="field"] {background-color: transparent;border: none;inline-size: max-content;padding-inline: var(--helix-space-none);}:host([variant="swatch"]) [part="trigger"] {block-size: var(--color-input-swatch-size, var(--helix-size-control));inline-size: var(--color-input-swatch-size, var(--helix-size-control));}:host([variant="swatch"]:focus-within) [part="field"] {outline: none;}:host([variant="swatch"]) [part="preview"] {block-size: 100%;border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--color-input-swatch-radius, var(--helix-radii-sm));inline-size: 100%;}slot[name="start"]::slotted(*),
+slot[name="end"]::slotted(*) {color: var(--helix-color-foreground-subtle);flex: 0 0 auto;}@media print {:host {print-color-adjust: exact;}}`);

package/dist/color-picker/root/color-picker-root.css.js

@@ -1,18 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-
---_color-picker-along: to right;
-display: block;
-padding-block-end: var(--color-picker-padding, var(--helix-space-none));
-}
-
-:host(:dir(rtl)) {
---_color-picker-along: to left;
-}
-
-[part="sample"],
-[part="swatch"] {
-background-image:
+export const styles = createSheet(`:host {--_color-picker-along: to right;display: block;padding-block-end: var(--color-picker-padding, var(--helix-space-none));}:host(:dir(rtl)) {--_color-picker-along: to left;}[part="sample"],
+[part="swatch"] {background-image:
 linear-gradient(
 var(--color-picker-swatch, transparent),
 var(--color-picker-swatch, transparent)
@@ -22,143 +10,45 @@ var(--helix-color-surface-sunken) 0 25%,
 var(--helix-color-surface) 0 50%,
 var(--helix-color-surface-sunken) 0 75%,
 var(--helix-color-surface) 0
-);
-background-size:
+);background-size:
 100% 100%,
-var(--helix-space-sm) var(--helix-space-sm);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-box-sizing: border-box;
-}
-
-[part="grid"] {
-aspect-ratio: var(--color-picker-grid-ratio, 1 / 0.7);
-background-image:
+var(--helix-space-sm) var(--helix-space-sm);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box;}[part="grid"] {aspect-ratio: var(--color-picker-grid-ratio, 1 / 0.7);background-image:
 linear-gradient(to top, hsl(0 0% 0%), transparent),
 linear-gradient(var(--_color-picker-along), hsl(0 0% 100%), transparent),
-linear-gradient(hsl(var(--color-picker-hue) 100% 50%), hsl(var(--color-picker-hue) 100% 50%));
-border-radius: var(--color-picker-grid-radius, var(--helix-radii-sm));
-cursor: crosshair;
-position: relative;
-touch-action: none;
-}
-
-[part="grid"]::after {
-
---_color-picker-mark-half: calc(var(--helix-size-icon-tight) / 2);
-block-size: var(--helix-size-icon-tight);
-border: var(--helix-border-thick) solid var(--helix-color-foreground-media);
-border-radius: var(--helix-radii-full);
-box-shadow:
+linear-gradient(hsl(var(--color-picker-hue) 100% 50%), hsl(var(--color-picker-hue) 100% 50%));border-radius: var(--color-picker-grid-radius, var(--helix-radii-sm));cursor: crosshair;position: relative;touch-action: none;}[part="grid"]::after {--_color-picker-mark-half: calc(var(--helix-size-icon-tight) / 2);block-size: var(--helix-size-icon-tight);border: var(--helix-border-thick) solid var(--helix-color-foreground-media);border-radius: var(--helix-radii-full);box-shadow:
 0 0 0 var(--helix-border-thin)
 color-mix(in oklab, var(--helix-color-surface-media) 60%, transparent),
-var(--helix-shadow-sm);
-content: "";
-inline-size: var(--helix-size-icon-tight);
-inset-block-start: clamp(
+var(--helix-shadow-sm);content: "";inline-size: var(--helix-size-icon-tight);inset-block-start: clamp(
 var(--_color-picker-mark-half),
 calc(100% - var(--color-picker-brightness, 100%)),
 calc(100% - var(--_color-picker-mark-half))
-);
-inset-inline-start: clamp(
+);inset-inline-start: clamp(
 var(--_color-picker-mark-half),
 var(--color-picker-saturation, 100%),
 calc(100% - var(--_color-picker-mark-half))
-);
-pointer-events: none;
-position: absolute;
-translate: -50% -50%;
-}
-
-:host(:dir(rtl)) [part="grid"]::after {
-translate: 50% -50%;
-}
-
-[part="grid-saturation"],
-[part="grid-brightness"] {
-appearance: none;
-background: none;
-inline-size: 100%;
-inset: 0;
-margin: var(--helix-space-none);
-opacity: 0;
-pointer-events: none;
-position: absolute;
-}
-
-[part="grid"]:has(:focus-visible) {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="controls"] {
-align-items: center;
-display: flex;
-gap: var(--helix-space-xs);
-padding-block-start: var(--helix-space-sm);
-padding-inline: var(--color-picker-padding, var(--helix-space-none));
-}
-
-[part="sample"] {
-
-appearance: none;
-background-color: transparent;
-block-size: var(--color-picker-sample-size, 36px);
-box-sizing: border-box;
-cursor: copy;
-flex: none;
-font: inherit;
-inline-size: var(--color-picker-sample-size, 36px);
-padding: var(--helix-space-none);
-position: relative;
-transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);
-}
-
-[part="sample"]:disabled {
-cursor: not-allowed;
-}
-
-[part="sample"]:focus-visible {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: var(--helix-size-focus-offset);
-}
-
-[part="sample"][data-copied] {
-scale: 0.94;
-}
-
-[part="sample"][data-copied]::after {
-background-color: var(--helix-color-surface-overlay);
-block-size: 100%;
-content: "";
-inset: 0;
-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
-mask-position: center;
-mask-repeat: no-repeat;
-mask-size: 60%;
-position: absolute;
-}
-
-[part="channels"] {
-display: flex;
-flex: 1 1 auto;
-flex-direction: column;
-gap: var(--helix-space-sm);
-min-inline-size: 0;
-}
-
-[part="channel"]::part(label) {
-block-size: 1px;
-clip-path: inset(50%);
-inline-size: 1px;
-overflow: hidden;
-padding: var(--helix-space-none);
-position: absolute;
-white-space: nowrap;
-}
-
-[part="channel"][data-channel="hue"] {
---slider-track-image: linear-gradient(
+);pointer-events: none;position: absolute;translate: -50% -50%;}:host(:dir(rtl)) [part="grid"]::after {translate: 50% -50%;}[part="grid-saturation"],
+[part="grid-brightness"] {appearance: none;background: none;inline-size: 100%;inset: 0;margin: var(--helix-space-none);opacity: 0;pointer-events: none;position: absolute;}[part="grid"]:has(:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="wheel"] {--_color-picker-ring: var(--color-picker-wheel-thickness, var(--helix-space-lg));aspect-ratio: 1;border-radius: var(--helix-radii-full);cursor: crosshair;display: grid;margin-inline: auto;max-inline-size: var(--color-picker-wheel-size, 100%);place-items: center;position: relative;touch-action: none;}[part="wheel"]::before {background-image: conic-gradient(
+hsl(0 100% 50%),
+hsl(60 100% 50%),
+hsl(120 100% 50%),
+hsl(180 100% 50%),
+hsl(240 100% 50%),
+hsl(300 100% 50%),
+hsl(360 100% 50%)
+);border-radius: inherit;content: "";inset: 0;mask-image: radial-gradient(
+farthest-side,
+transparent calc(100% - var(--_color-picker-ring)),
+#000 calc(100% - var(--_color-picker-ring) + 0.5px)
+);position: absolute;}[part="wheel"]::after {--_color-picker-mark-half: calc(var(--helix-size-icon-tight) / 2);background-image: radial-gradient(
+circle at 50% calc(var(--_color-picker-ring) / 2),
+transparent calc(var(--_color-picker-mark-half) - var(--helix-border-thick)),
+var(--helix-color-foreground-media)
+calc(var(--_color-picker-mark-half) - var(--helix-border-thick))
+var(--_color-picker-mark-half),
+color-mix(in oklab, var(--helix-color-surface-media) 60%, transparent)
+var(--_color-picker-mark-half) calc(var(--_color-picker-mark-half) + var(--helix-border-thin)),
+transparent calc(var(--_color-picker-mark-half) + var(--helix-border-thin))
+);content: "";inset: 0;pointer-events: none;position: absolute;rotate: calc(var(--color-picker-hue, 0) * 1deg);}[part="wheel"] [part="grid"] {aspect-ratio: 1;inline-size: calc((100% - var(--_color-picker-ring) * 2 - var(--helix-space-sm) * 2) * 0.7071);}[part="wheel-hue"] {appearance: none;background: none;inset: 0;margin: var(--helix-space-none);opacity: 0;pointer-events: none;position: absolute;}[part="wheel"]:has([part="wheel-hue"]:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="controls"] {align-items: center;display: flex;gap: var(--helix-space-xs);padding-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}[part="sample"] {appearance: none;background-color: transparent;block-size: var(--color-picker-sample-size, 36px);box-sizing: border-box;cursor: copy;flex: none;font: inherit;inline-size: var(--color-picker-sample-size, 36px);padding: var(--helix-space-none);position: relative;transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);}[part="sample"]:disabled {cursor: not-allowed;}[part="sample"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="sample"][data-copied] {scale: 0.94;}[part="sample"][data-copied]::after {background-color: var(--helix-color-surface-overlay);block-size: 100%;content: "";inset: 0;mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");mask-position: center;mask-repeat: no-repeat;mask-size: 60%;position: absolute;}[part="channels"] {display: flex;flex: 1 1 auto;flex-direction: column;gap: var(--helix-space-sm);min-inline-size: 0;}[part="channel"]::part(label) {block-size: 1px;clip-path: inset(50%);inline-size: 1px;overflow: hidden;padding: var(--helix-space-none);position: absolute;white-space: nowrap;}[part="channel"][data-channel="hue"] {--slider-track-image: linear-gradient(
 var(--_color-picker-along),
 hsl(0 100% 50%),
 hsl(60 100% 50%),
@@ -167,208 +57,20 @@ hsl(180 100% 50%),
 hsl(240 100% 50%),
 hsl(300 100% 50%),
 hsl(360 100% 50%)
-);
-}
-
-[part="channel"][data-channel="alpha"] {
---slider-track-image:
+);}[part="channel"][data-channel="alpha"] {--slider-track-image:
 linear-gradient(var(--_color-picker-along), transparent, hsl(var(--color-picker-hue) 100% 50%)),
 conic-gradient(
 var(--helix-color-surface-sunken) 0 25%,
 var(--helix-color-surface) 0 50%,
 var(--helix-color-surface-sunken) 0 75%,
 var(--helix-color-surface) 0
-);
-background-size:
+);background-size:
 100% 100%,
-var(--helix-space-sm) var(--helix-space-sm);
-}
-
-[part="channel"] {
---slider-fill-color: transparent;
---slider-track-color: transparent;
-}
-
-[part="footer"]:empty {
-display: none;
-}
-
-[part="footer"] {
-display: flex;
-gap: var(--helix-space-xs);
-margin-block-start: var(--helix-space-sm);
-padding-inline: var(--color-picker-padding, var(--helix-space-none));
-}
-
-[part="value"] {
-all: unset;
-background-color: var(--helix-color-surface-sunken);
-
-block-size: var(--helix-size-control);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-box-sizing: border-box;
-color: var(--helix-color-foreground);
-flex: 1 1 auto;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-control);
-font-weight: var(--helix-weight-medium);
-min-inline-size: 0;
-padding-inline: var(--helix-space-xs);
-transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="value"]:hover {
-border-color: var(--helix-color-foreground-muted);
-}
-
-[part="value"]:focus-visible {
-border-color: var(--helix-color-primary);
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: 0;
-}
-
-:host([invalid]) [part="value"],
+var(--helix-space-sm) var(--helix-space-sm);}[part="channel"] {--slider-fill-color: transparent;--slider-track-color: transparent;}[part="footer"]:empty {display: none;}[part="footer"] {display: flex;gap: var(--helix-space-xs);margin-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}[part="value"] {all: unset;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-control);font-weight: var(--helix-weight-medium);min-inline-size: 0;padding-inline: var(--helix-space-xs);transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="value"]:hover {border-color: var(--helix-color-foreground-muted);}[part="value"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}:host([invalid]) [part="value"],
 :host([invalid]) [part="value"]:hover,
-:host([invalid]) [part="value"]:focus-visible {
-border-color: var(--helix-color-danger);
-outline-color: var(--helix-color-danger);
-}
-
-[part="fields"] {
-display: grid;
-gap: var(--color-picker-fields-gap, var(--helix-space-xs));
-grid-auto-columns: minmax(0, 1fr);
-grid-auto-flow: column;
-margin-block-start: var(--helix-space-sm);
-padding-inline: var(--color-picker-padding, var(--helix-space-none));
-}
-
-:host([alpha]) [part="fields"] {
-grid-auto-flow: row;
-grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-[part="field"] {
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
-min-inline-size: 0;
-}
-
-[part="field-label"] {
-color: var(--color-picker-field-label-color, var(--helix-color-foreground-muted));
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
-}
-
-[part="field-input"] {
-all: unset;
-
-appearance: textfield;
-background-color: var(--helix-color-surface-sunken);
-block-size: var(--helix-size-control);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
-box-sizing: border-box;
-color: var(--helix-color-foreground);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-control);
-font-variant-numeric: tabular-nums;
-font-weight: var(--helix-weight-medium);
-inline-size: 100%;
-min-inline-size: 0;
-padding-inline: var(--helix-space-xs);
-transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);
-}
-
-[part="field-input"]::-webkit-inner-spin-button,
-[part="field-input"]::-webkit-outer-spin-button {
-appearance: none;
-margin: 0;
-}
-
-[part="field-input"]:hover {
-border-color: var(--helix-color-foreground-muted);
-}
-
-[part="field-input"]:focus-visible {
-border-color: var(--helix-color-primary);
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: 0;
-}
-
-[part="actions"] {
-display: flex;
-flex: 1 1 auto;
-}
-
-[part="actions"] helix-button {
-flex: 1 1 0;
-}
-
-::slotted([slot="eyedropper-icon"]) {
-block-size: var(--icon-size, var(--helix-size-icon));
-flex: 0 0 auto;
-inline-size: var(--icon-size, var(--helix-size-icon));
-}
-
-[part="format"] {
-font-family: var(--helix-font-mono);
-font-variant-caps: all-small-caps;
-}
-
-[part="swatches"] {
-border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
-display: flex;
-flex-wrap: wrap;
-gap: var(--helix-space-2xs);
-margin-block-start: var(--helix-space-sm);
-padding-block-start: var(--helix-space-sm);
-
-padding-inline: var(--color-picker-padding, var(--helix-space-none));
-}
-
-[part="swatch"] {
-block-size: var(--color-picker-swatch-size, var(--helix-size-icon-loose));
-cursor: pointer;
-inline-size: var(--color-picker-swatch-size, var(--helix-size-icon-loose));
-padding: var(--helix-space-none);
-}
-
-[part="feedback"] {
-color: var(--color-picker-feedback-color, var(--helix-color-danger));
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);
-padding-inline: var(--color-picker-padding, var(--helix-space-none));
-}
-
-@media (prefers-reduced-motion: reduce) {
-
-[part="sample"] {
-transition: none;
-}
-
-[part="sample"][data-copied] {
-scale: 1;
-}
-}
-
-:host(:disabled) {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-:host([readonly]) [part="grid"],
-:host([readonly]) [part="swatch"] {
-cursor: default;
-}
-
-@media print {
-:host {
-box-shadow: none;
-print-color-adjust: exact;
-}
-}`);
+:host([invalid]) [part="value"]:focus-visible,
+:host(:state(invalid)) [part="value"],
+:host(:state(invalid)) [part="value"]:hover,
+:host(:state(invalid)) [part="value"]:focus-visible {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}[part="fields"] {display: grid;gap: var(--color-picker-fields-gap, var(--helix-space-xs));grid-auto-columns: minmax(0, 1fr);grid-auto-flow: column;margin-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}:host([alpha]) [part="fields"] {grid-auto-flow: row;grid-template-columns: repeat(2, minmax(0, 1fr));}[part="field"] {display: flex;flex-direction: column;gap: var(--helix-space-2xs);min-inline-size: 0;}[part="field-label"] {color: var(--color-picker-field-label-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);}[part="field-input"] {all: unset;appearance: textfield;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-control);font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);inline-size: 100%;min-inline-size: 0;padding-inline: var(--helix-space-xs);transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="field-input"]::-webkit-inner-spin-button,
+[part="field-input"]::-webkit-outer-spin-button {appearance: none;margin: 0;}[part="field-input"]:hover {border-color: var(--helix-color-foreground-muted);}[part="field-input"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}[part="actions"] {display: flex;flex: 1 1 auto;}[part="actions"] helix-button {flex: 1 1 0;}::slotted([slot="eyedropper-icon"]) {block-size: var(--icon-size, var(--helix-size-icon));flex: 0 0 auto;inline-size: var(--icon-size, var(--helix-size-icon));}[part="format"] {font-family: var(--helix-font-mono);font-variant-caps: all-small-caps;}[part="swatches"] {border-block-start: var(--helix-border-thin) solid var(--helix-color-border);display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);margin-block-start: var(--helix-space-sm);padding-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}[part="swatch"] {block-size: var(--color-picker-swatch-size, var(--helix-size-icon-loose));cursor: pointer;inline-size: var(--color-picker-swatch-size, var(--helix-size-icon-loose));padding: var(--helix-space-none);}[part="feedback"] {color: var(--color-picker-feedback-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);padding-inline: var(--color-picker-padding, var(--helix-space-none));}@media (prefers-reduced-motion: reduce) {[part="sample"] {transition: none;}[part="sample"][data-copied] {scale: 1;}}:host(:disabled) {cursor: not-allowed;opacity: 0.5;}:host([readonly]) [part="grid"],
+:host([readonly]) [part="swatch"] {cursor: default;}@media print {:host {box-shadow: none;print-color-adjust: exact;}}`);

package/dist/color-picker/root/color-picker-root.d.ts

@@ -42,6 +42,8 @@ import '../../slider/index.js';
  * @cssproperty --color-picker-padding - The inset of the rows under the square and of the picker's bottom edge.
  * @cssproperty --color-picker-sample-size - The width and height of the chip that copies the value.
  * @cssproperty --color-picker-swatch-size - The width and height of one preset.
+ * @cssproperty --color-picker-wheel-size - The widest the hue ring draws, with `wheel`. The picker's width by default.
+ * @cssproperty --color-picker-wheel-thickness - The width of the hue ring's band, with `wheel`.
  */
 export declare class HelixColorPicker extends HelixHeadlessColorPicker {
     static tier: string;