@slotted/angular 0.1.0-beta.0 → 0.1.0-beta.10

package/fesm2022/slotted-angular-color-picker.mjs

@@ -7,6 +7,7 @@ import { SlTextField, SlTextFieldInput, SlTextFieldStart } from '@slotted/angula
 import { parseColor, formatColor, COLOR_FORMATS, clampToGamut, rgbaToHsva, toCss, contrastRatio, contrastLevel, hsvaToRgba } from '@slotted/core/color';
 import { colorPickerMessages } from '@slotted/core/i18n';
 import { createControllable } from '@slotted/core/state';
+import { writeSelectorKey } from '@slotted/core/selector-key';
 import { SlField } from '@slotted/angular/field';
 import { SlGlyph, SlIcon } from '@slotted/angular/icon';
 import { SlMenu, SlMenuItem, SlMenuRadioGroup, SlMenuTrigger } from '@slotted/angular/menu';
@@ -217,7 +218,9 @@ class SlColorPicker {
             /* slMenuTriggerFor binds data-part to null outside a bar, and the
                binding is a constant: the part is written back once, the rule
                menu records for its own trigger. */
-            this.element.querySelector('[aria-haspopup="menu"]')?.setAttribute('data-part', 'format');
+            const format = this.element.querySelector('[aria-haspopup="menu"]');
+            if (format !== null)
+                writeSelectorKey(format, 'part', 'format');
         });
     }
     round(value) {
@@ -374,11 +377,12 @@ class SlColorPicker {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlColorPicker, isStandalone: true, selector: "div[slColorPicker]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, defaultFormat: { classPropertyName: "defaultFormat", publicName: "defaultFormat", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, contrastWith: { classPropertyName: "contrastWith", publicName: "contrastWith", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", formatChange: "formatChange" }, host: { attributes: { "data-ui": "color-picker", "data-part": "root" }, properties: { "attr.data-size": "size() ?? field?.resolvedSize() ?? defaults.size", "attr.data-format": "resolvedFormat()", "attr.data-disabled": "resolvedDisabled() ? '' : null", "attr.data-readonly": "resolvedReadOnly() ? '' : null", "attr.data-invalid": "resolvedInvalid() ? '' : null", "attr.data-out-of-gamut": "outOfGamut() ? '' : null", "style.--slotted-color-picker-color": "css()", "style.--slotted-color-picker-opaque": "opaque()", "style.--slotted-color-picker-hue": "hsva().h", "style.--slotted-color-picker-x": "hsva().s", "style.--slotted-color-picker-y": "hsva().v", "style.--slotted-color-picker-alpha": "hsva().a", "style.--slotted-color-picker-previous": "previousCss()", "style.--slotted-color-picker-contrast-with": "contrastCss()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlColorPicker, isStandalone: true, selector: "div[slColorPicker]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, defaultFormat: { classPropertyName: "defaultFormat", publicName: "defaultFormat", isSignal: true, isRequired: false, transformFunction: null }, alpha: { classPropertyName: "alpha", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, contrastWith: { classPropertyName: "contrastWith", publicName: "contrastWith", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", formatChange: "formatChange" }, host: { attributes: { "data-ui": "color-picker", "data-ui-color-picker": "", "data-part": "root", "data-part-root": "" }, properties: { "attr.data-size": "size() ?? field?.resolvedSize() ?? defaults.size", "attr.data-format": "resolvedFormat()", "attr.data-disabled": "resolvedDisabled() ? '' : null", "attr.data-readonly": "resolvedReadOnly() ? '' : null", "attr.data-invalid": "resolvedInvalid() ? '' : null", "attr.data-out-of-gamut": "outOfGamut() ? '' : null", "style.--slotted-color-picker-color": "css()", "style.--slotted-color-picker-opaque": "opaque()", "style.--slotted-color-picker-hue": "hsva().h", "style.--slotted-color-picker-x": "hsva().s", "style.--slotted-color-picker-y": "hsva().v", "style.--slotted-color-picker-alpha": "hsva().a", "style.--slotted-color-picker-previous": "previousCss()", "style.--slotted-color-picker-contrast-with": "contrastCss()" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlColorPicker), multi: true },
         ], exportAs: ["slColorPicker"], ngImport: i0, template: `
     <div
       data-part="area"
+      data-part-area=""
       [attr.data-dragging]="dragging() === 'area' ? '' : null"
       (pointerdown)="down($event, 'area')"
       (pointermove)="move($event, 'area')"
@@ -387,6 +391,7 @@ class SlColorPicker {
     >
       <div
         data-part="area-thumb"
+        data-part-area-thumb=""
         role="slider"
         [attr.aria-roledescription]="t('areaRoleDescription')"
         [attr.aria-label]="t('area')"
@@ -399,6 +404,7 @@ class SlColorPicker {
     @for (channel of channels(); track channel) {
       <div
         data-part="channel"
+        data-part-channel=""
         [attr.data-channel]="channel"
         [attr.data-dragging]="dragging() === channel ? '' : null"
         (pointerdown)="down($event, channel)"
@@ -408,6 +414,7 @@ class SlColorPicker {
       >
         <div
           data-part="channel-thumb"
+          data-part-channel-thumb=""
           role="slider"
           [attr.data-channel]="channel"
           [attr.aria-label]="channel === 'hue' ? t('hue') : t('alpha')"
@@ -421,10 +428,11 @@ class SlColorPicker {
         ></div>
       </div>
     }
-    <div data-part="row">
-      <span data-part="swatch" role="img" [attr.aria-label]="current()"></span>
+    <div data-part="row" data-part-row="">
+      <span data-part="swatch" data-part-swatch="" role="img" [attr.aria-label]="current()"></span>
       <button
         data-part="previous"
+        data-part-previous=""
         type="button"
         [attr.aria-label]="t('previous', { color: previous() ?? current() })"
         [disabled]="off()"
@@ -434,7 +442,9 @@ class SlColorPicker {
       </button>
       <div
         data-ui="text-field"
+        data-ui-text-field=""
         data-part="root"
+        data-part-root=""
         data-size="sm"
         data-variant="outline"
         data-mono=""
@@ -444,6 +454,7 @@ class SlColorPicker {
       >
         <input
           data-part="input"
+          data-part-input=""
           dir="ltr"
           autocomplete="off"
           spellcheck="false"
@@ -459,6 +470,7 @@ class SlColorPicker {
       </div>
       <button
         data-part="format"
+        data-part-format=""
         type="button"
         [attr.aria-label]="t('format', { format: resolvedFormat() })"
         [disabled]="off()"
@@ -479,6 +491,7 @@ class SlColorPicker {
       @if (eyedropper()) {
         <button
           data-part="eyedropper"
+          data-part-eyedropper=""
           type="button"
           [attr.aria-label]="t('eyedropper')"
           [disabled]="off()"
@@ -489,15 +502,21 @@ class SlColorPicker {
       }
     </div>
     @if (outOfGamut()) {
-      <p data-part="gamut" role="status">
+      <p data-part="gamut" data-part-gamut="" role="status">
         <span slIcon><svg slGlyph name="circle-alert"></svg></span>{{ t('gamut') }}
       </p>
     }
     @if (resolvedPresets().length > 0) {
-      <div data-part="presets" role="radiogroup" [attr.aria-label]="t('presets')">
+      <div
+        data-part="presets"
+        data-part-presets=""
+        role="radiogroup"
+        [attr.aria-label]="t('presets')"
+      >
         @for (preset of resolvedPresets(); track preset; let index = $index) {
           <button
             data-part="preset"
+            data-part-preset=""
             type="button"
             role="radio"
             [attr.aria-label]="preset"
@@ -513,13 +532,20 @@ class SlColorPicker {
       </div>
     }
     @if (contrast(); as measured) {
-      <div data-part="contrast" aria-live="polite" [attr.data-level]="measured.level">
-        <span data-part="contrast-sample" aria-hidden="true">{{ t('contrastSample') }}</span>
-        <span data-part="contrast-ratio">{{ measured.ratio }}:1</span>
-        <span data-part="contrast-level">{{ t(measured.key) }}</span>
+      <div
+        data-part="contrast"
+        data-part-contrast=""
+        aria-live="polite"
+        [attr.data-level]="measured.level"
+      >
+        <span data-part="contrast-sample" data-part-contrast-sample="" aria-hidden="true">{{
+          t('contrastSample')
+        }}</span>
+        <span data-part="contrast-ratio" data-part-contrast-ratio="">{{ measured.ratio }}:1</span>
+        <span data-part="contrast-level" data-part-contrast-level="">{{ t(measured.key) }}</span>
       </div>
     }
-  `, isInline: true, styles: ["@layer slotted.components{[data-ui=color-picker][data-part=root]{--_thumb: var(--slotted-color-picker-thumb-size, var(--slotted-space-6, 1rem));--_channel: var(--slotted-color-picker-channel-size, var(--slotted-space-5, .75rem));--_gap: var(--slotted-space-5, .75rem);--_radius: var(--slotted-radius-md, 6px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_color: var(--slotted-color-picker-color, transparent);--_opaque: var(--slotted-color-picker-opaque, transparent);--_hue: var(--slotted-color-picker-hue, 0);--_checker: repeating-conic-gradient( var(--slotted-surface-sunken, Canvas) 0 25%, var(--slotted-surface, Canvas) 0 50% ) 0 0 / var(--_channel) var(--_channel);box-sizing:border-box;color:var(--slotted-text, CanvasText);display:grid;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-control-font-size-md, 13px);gap:var(--_gap);inline-size:var(--slotted-color-picker-width, calc(var(--slotted-space-12, 4rem) * 4));max-inline-size:100%;min-inline-size:0}[data-ui=color-picker][data-part=root][data-size=sm]{--_gap: var(--slotted-space-4, .5rem);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);font-size:var(--slotted-control-font-size-sm, 12px)}[data-ui=color-picker][data-part=root][data-size=lg]{--_gap: var(--slotted-space-6, 1rem);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);font-size:var(--slotted-control-font-size-lg, 14px)}[data-ui=color-picker] [data-part=area]{aspect-ratio:3 / 2;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%);border-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:crosshair;position:relative;touch-action:none}[data-ui=color-picker] [data-part=area]:dir(rtl){background:linear-gradient(to top,#000,transparent),linear-gradient(to left,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%)}[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]){background:var(--_opaque);block-size:var(--_thumb);border:var(--slotted-border-width-medium, 2px) solid #fff;border-radius:var(--slotted-radius-full, 9999px);box-shadow:0 0 0 var(--slotted-border-width-thin, 1px) #0000003d,var(--slotted-shadow-sm, none);box-sizing:border-box;cursor:grab;inline-size:var(--_thumb);position:absolute;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard);translate:-50% -50%}[data-ui=color-picker] [data-part=area-thumb]{inset-block-start:calc((1 - var(--slotted-color-picker-y, 1)) * 100%);inset-inline-start:calc(var(--slotted-color-picker-x, 1) * 100%)}[data-ui=color-picker] [data-part=area-thumb]:dir(rtl){translate:50% -50%}[data-ui=color-picker] :is([data-part=area],[data-part=channel])[data-dragging]>:is([data-part=area-thumb],[data-part=channel-thumb]){cursor:grabbing;scale:1.15}[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=channel]{block-size:var(--_channel);border-radius:var(--slotted-radius-full, 9999px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;position:relative;touch-action:none}[data-ui=color-picker] [data-part=channel][data-channel=hue]{background:linear-gradient(to right,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui=color-picker] [data-part=channel][data-channel=alpha]{background:linear-gradient(to right,transparent,var(--_opaque)),var(--_checker)}[data-ui=color-picker] [data-part=channel][data-channel=hue]:dir(rtl){background:linear-gradient(to left,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui=color-picker] [data-part=channel][data-channel=alpha]:dir(rtl){background:linear-gradient(to left,transparent,var(--_opaque)),var(--_checker)}[data-ui=color-picker] [data-part=channel-thumb]{inset-block-start:50%}[data-ui=color-picker] [data-part=channel-thumb][data-channel=hue]{background:hsl(calc(var(--_hue) * 1deg) 100% 50%);inset-inline-start:calc(var(--_thumb) / 2 + var(--_hue) / 360 * (100% - var(--_thumb)))}[data-ui=color-picker] [data-part=channel-thumb][data-channel=alpha]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);inset-inline-start:calc(var(--_thumb) / 2 + var(--slotted-color-picker-alpha, 1) * (100% - var(--_thumb)))}[data-ui=color-picker] [data-part=channel-thumb]:dir(rtl){translate:50% -50%}[data-ui=color-picker] [data-part=row]{align-items:center;display:flex;gap:var(--slotted-space-3, .375rem);min-inline-size:0}[data-ui=color-picker] [data-part=swatch],[data-ui=color-picker] [data-part=previous]{appearance:none;block-size:var(--slotted-control-height-md, 34px);border:0;box-sizing:border-box;flex:0 0 auto;inline-size:calc(var(--slotted-control-height-md, 34px) * 3 / 4);margin:0;padding:0}[data-ui=color-picker] [data-part=swatch]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);border-end-start-radius:var(--_radius);border-start-start-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent)}[data-ui=color-picker] [data-part=swatch]:only-child,[data-ui=color-picker] [data-part=swatch]:not(:has(+[data-part=previous])){border-radius:var(--_radius)}[data-ui=color-picker] [data-part=previous]{background:linear-gradient(var(--slotted-color-picker-previous, transparent),var(--slotted-color-picker-previous, transparent)),var(--_checker);border-end-end-radius:var(--_radius);border-start-end-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin-inline-start:calc(var(--slotted-space-3, .375rem) * -1);position:relative;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=previous]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);color:#fff;filter:drop-shadow(0 0 1px rgb(0 0 0 / .6));inset:0;margin:auto;opacity:0;position:absolute;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=previous]:is(:hover,:focus-visible):not(:disabled)>[data-ui=icon]{opacity:1}[data-ui=color-picker] [data-part=previous]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=row]>[data-ui=text-field]{flex:1 1 0;inline-size:auto}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]){--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_inner-size);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-text-muted, GrayText);cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-variant-numeric:tabular-nums;gap:var(--slotted-space-2, .25rem);justify-content:center;min-inline-size:var(--_inner-size);padding:0;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=color-picker] [data-part=format]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem);text-transform:uppercase}[data-ui=color-picker] [data-part=format]{align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui=color-picker] [data-part=format]>[data-ui=icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):hover:not(:disabled,[aria-expanded=true]){background-color:var(--slotted-tone-secondary-subtle-hover)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):is(:active,[aria-expanded=true]):not(:disabled){background-color:var(--slotted-tone-secondary-subtle-active)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=color-picker] [data-part=presets]{display:grid;gap:var(--slotted-space-3, .375rem);grid-template-columns:repeat(auto-fill,minmax(calc(var(--_inner-size) - var(--slotted-space-2, 4px)),1fr))}[data-ui=color-picker] [data-part=preset]{appearance:none;aspect-ratio:1;background:linear-gradient(var(--slotted-color-picker-preset, transparent),var(--slotted-color-picker-preset, transparent)),var(--_checker);border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin:0;min-inline-size:0;padding:0;position:relative;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=preset]:hover:not(:disabled){scale:1.08}[data-ui=color-picker] [data-part=preset]:active:not(:disabled){scale:.94}[data-ui=color-picker] [data-part=preset][data-selected]{box-shadow:0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-surface-raised, Canvas),0 0 0 calc(var(--slotted-border-width-medium, 2px) * 2) var(--slotted-text, CanvasText)}[data-ui=color-picker] [data-part=preset]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=contrast]{align-items:center;display:flex;font-variant-numeric:tabular-nums;gap:var(--slotted-space-4, .5rem)}[data-ui=color-picker] [data-part=contrast-sample]{background:var(--slotted-color-picker-contrast-with, var(--slotted-surface, Canvas));block-size:var(--_inner-size);border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);color:var(--_color);display:inline-grid;font-weight:var(--slotted-font-weight-semibold, 600);inline-size:calc(var(--_inner-size) * 3 / 2);place-items:center}[data-ui=color-picker] [data-part=contrast-ratio]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=color-picker] [data-part=contrast-level]{border-radius:var(--slotted-radius-sm, 4px);font-size:var(--slotted-font-size-xs, 12px);font-weight:var(--slotted-font-weight-semibold, 600);margin-inline-start:auto;padding:var(--slotted-space-1, 2px) var(--slotted-space-3, .375rem)}[data-ui=color-picker] [data-part=contrast][data-level^=AA] [data-part=contrast-level]{background:var(--slotted-tone-success-surface, Canvas);color:var(--slotted-tone-success-text, CanvasText)}[data-ui=color-picker] [data-part=contrast][data-level=AA-large] [data-part=contrast-level]{background:var(--slotted-tone-warning-surface, Canvas);color:var(--slotted-tone-warning-text, CanvasText)}[data-ui=color-picker] [data-part=contrast][data-level=fail] [data-part=contrast-level]{background:var(--slotted-tone-danger-surface, Canvas);color:var(--slotted-tone-danger-text, CanvasText)}[data-ui=color-picker] [data-part=gamut]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-tone-warning-text, CanvasText);display:flex;font-size:var(--slotted-font-size-xs, 12px);gap:var(--slotted-space-2, .25rem)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]{appearance:none;background:linear-gradient(var(--_color, transparent),var(--_color, transparent)),repeating-conic-gradient(var(--slotted-surface-sunken, Canvas) 0 25%,var(--slotted-surface, Canvas) 0 50%) 0 0 / 8px 8px;block-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;flex:0 0 auto;inline-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));padding:0;position:relative;transition:box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);--_color: var(--slotted-color-picker-color, transparent)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:hover:not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-hover)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:is(:active,[aria-expanded=true]):not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-active)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker][data-part=root][data-disabled]{color:var(--slotted-disabled-foreground)}[data-ui=color-picker][data-part=root][data-disabled] :is([data-part=area],[data-part=channel],[data-part=presets]){filter:grayscale(1);pointer-events:none}[data-ui=color-picker][data-part=root][data-disabled] :is([data-part=area-thumb],[data-part=channel-thumb]){cursor:not-allowed}[data-ui=color-picker][data-part=root][data-readonly] :is([data-part=area],[data-part=channel],[data-part=preset],[data-part=area-thumb],[data-part=channel-thumb]){cursor:default}@media(forced-colors:active){[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]){border-color:CanvasText;forced-color-adjust:none}[data-ui=color-picker] :is([data-part=area],[data-part=channel],[data-part=swatch],[data-part=previous],[data-part=preset]){forced-color-adjust:none}}}\n", "@layer slotted.components{[data-ui=text-field][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-text-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px);--_action-size: var( --slotted-text-field-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_inset: max( 0px, calc( (var(--_height) - 2 * var(--slotted-control-border-width, 1px) - var(--_action-size)) / 2 ) );--_action-radius: max( var(--slotted-radius-xs, 2px), calc(var(--slotted-text-field-radius, var(--slotted-control-radius, 4px)) - var(--_inset)) );--_action-transition: background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing), color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);align-items:center;background-color:var(--slotted-text-field-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-text-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-text-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-text-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-text-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-inline-size:0;min-block-size:var(--_height);padding-inline:var(--_padding-inline);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=text-field][data-part=root]:has(>:is([data-part=clear],[data-part=copy],[data-part=reveal]):not([hidden]):last-child,>[data-part=end]:last-child>[data-part=action]:last-child){padding-inline-end:var(--_inset)}[data-ui=text-field][data-part=root]:has(>[data-part=start]:first-child>[data-part=action]:first-child){padding-inline-start:var(--_inset)}[data-ui=text-field]>[data-part=input]{background-color:transparent;align-self:stretch;margin-block:calc(var(--slotted-control-border-width, 1px) * -1);border:0;color:inherit;flex:1 1 auto;font:inherit;outline:none;padding:0;min-inline-size:0;text-align:inherit;text-overflow:ellipsis}[data-ui=text-field]>[data-part=input]::placeholder{color:var(--slotted-text-field-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui=text-field]>[data-part=input]::-webkit-search-cancel-button,[data-ui=text-field]>[data-part=input]::-webkit-search-decoration{appearance:none}[data-ui=text-field]>[data-part=input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-text-field-autofill-background, var(--slotted-tone-accent-surface));-webkit-text-fill-color:var(--slotted-text-field-color, var(--slotted-text, CanvasText))}[data-ui=text-field][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=text-field][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui=text-field][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px));--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=button-group]>[data-ui=text-field][data-part=root]{flex:1 1 0;inline-size:auto}[data-ui=text-field][data-part=root][data-variant=subtle]{background-color:var( --slotted-text-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-text-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=text-field][data-part=root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui=text-field][data-part=root][data-variant=plain]{border-color:ButtonBorder}}[data-ui=text-field][data-part=root][data-mono]{font-family:var(--slotted-font-family-mono, monospace);font-variant-numeric:tabular-nums}[data-ui=text-field]>[data-part=start],[data-ui=text-field]>[data-part=end]{align-items:center;color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui=text-field]>[data-part=start],[data-ui=text-field]>[data-part=end]{--slotted-icon-size: var(--_icon-size);--slotted-control-inner-size: var(--_inner-size)}[data-ui=text-field]>[data-part=start]>svg,[data-ui=text-field]>[data-part=end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=text-field]>[data-part=start]:not(:has(svg,img,[data-ui=icon],[data-part=action])),[data-ui=text-field]>[data-part=end]:not(:has(svg,img,[data-ui=icon],[data-part=action])){padding-inline:calc(var(--_icon-size) / 8)}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--_action-radius);box-sizing:border-box;color:var(--slotted-text-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;gap:var(--slotted-space-2, .25rem);justify-content:center;line-height:1;min-inline-size:var(--_action-size);padding:0;position:relative;touch-action:manipulation;transition:var(--_action-transition);unicode-bidi:plaintext;white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby]){color:var(--slotted-text-field-action-label-color, var(--slotted-text, CanvasText));font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem)}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby]){align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby])>[data-ui=icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui=text-field]>:is([data-part=start],[data-part=end]):has(>[data-part=action]){gap:0}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:after,[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=text-field]>:is([data-part=clear],[data-part=copy]):has(~:is([data-part=copy],[data-part=reveal]):not([hidden])):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:has(+[data-part=action]):after{inset-inline-end:0}[data-ui=text-field]>:is([data-part=clear],[data-part=copy]):not([hidden])~:is([data-part=copy],[data-part=reveal]):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]+[data-part=action]:after{inset-inline-start:0}}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):hover:not(:disabled,[data-complete]),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:hover:not(:disabled,[aria-expanded=true]){background-color:var( --slotted-text-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):active:not(:disabled),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:active:not(:disabled){background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action][aria-expanded=true]{background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:disabled,[data-ui=text-field][data-part=root][data-disabled]>:is([data-part=start],[data-part=end])>[data-part=action]{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):focus-visible,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=text-field]>[data-part=copy][data-complete]{color:var( --slotted-text-field-copy-complete-color, var(--slotted-tone-success-text, CanvasText) )}[data-ui=text-field]>:is([data-part=copy],[data-part=reveal])>[data-ui=icon]{transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}@starting-style{[data-ui=text-field]>:is([data-part=copy],[data-part=reveal])>[data-ui=icon]{opacity:0;scale:.8}}[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy]){transition:var(--_action-transition),opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter),display var(--slotted-duration-short) allow-discrete}[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy])[hidden]{display:none;opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit),display var(--slotted-duration-short) allow-discrete}@starting-style{[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy]){opacity:0;scale:.8}}[data-ui=text-field]>[data-part=busy]{--slotted-spinner-size: var(--_icon-size);color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));flex:0 0 auto}[data-ui=text-field]>[data-part=caps-lock]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-text-field-caps-lock-color, var(--slotted-tone-warning-text, CanvasText));display:inline-flex;flex:0 0 auto}[data-ui=text-field][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-text-field-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=text-field][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-text-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=text-field][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-text-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=text-field][data-part=root]:has(>[data-part=input]:focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=text-field][data-part=root][data-variant=plain]:has(>[data-part=input]:focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=text-field][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-text-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-text-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var(--slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui=text-field][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=text-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=text-field][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=text-field][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=text-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui=text-field][data-part=root][data-readonly]{background-color:var( --slotted-text-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui=text-field][data-part=root][data-disabled],[data-ui=text-field][data-part=root]:has(>[data-part=input]:disabled){background-color:var( --slotted-text-field-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-text-field-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-text-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=text-field][data-part=root][data-disabled]>[data-part=start],[data-ui=text-field][data-part=root][data-disabled]>[data-part=end]{color:var(--slotted-disabled-foreground)}}\n"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlMenu, selector: "sl-menu", inputs: ["value", "aria-label", "aria-describedby", "open", "align", "side", "size", "mount", "strategy", "sideOffset", "alignOffset", "collisionPadding", "submenuOpenDelay", "submenuCloseDelay", "typeaheadTimeout", "disabled", "loop", "typeahead", "openOnHover", "closeOnSelect", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "loading"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slMenu"] }, { kind: "component", type: SlMenuItem, selector: "button[slMenuItem], a[slMenuItem], button[slMenuCheckboxItem], button[slMenuRadioItem]", inputs: ["disabled", "textValue", "tone", "shortcut", "closeOnSelect", "value", "checked"], outputs: ["checkedChange", "checkedChangeRequest", "select"], exportAs: ["slMenuItem"] }, { kind: "component", type: SlMenuRadioGroup, selector: "sl-menu-radio-group", inputs: ["value"], outputs: ["valueChange", "valueChangeRequest"], exportAs: ["slMenuRadioGroup"] }, { kind: "directive", type: SlMenuTrigger, selector: "[slMenuTriggerFor]", inputs: ["slMenuTriggerFor"], exportAs: ["slMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui-color-picker][data-part-root]{--_thumb: var(--slotted-color-picker-thumb-size, var(--slotted-space-6, 1rem));--_channel: var(--slotted-color-picker-channel-size, var(--slotted-space-5, .75rem));--_gap: var(--slotted-space-5, .75rem);--_radius: var(--slotted-radius-md, 6px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_color: var(--slotted-color-picker-color, transparent);--_opaque: var(--slotted-color-picker-opaque, transparent);--_hue: var(--slotted-color-picker-hue, 0);--_checker: repeating-conic-gradient( var(--slotted-surface-sunken, Canvas) 0 25%, var(--slotted-surface, Canvas) 0 50% ) 0 0 / var(--_channel) var(--_channel);box-sizing:border-box;color:var(--slotted-text, CanvasText);display:grid;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-control-font-size-md, 13px);gap:var(--_gap);inline-size:var(--slotted-color-picker-width, calc(var(--slotted-space-12, 4rem) * 4));max-inline-size:100%;min-inline-size:0}[data-ui-color-picker][data-part-root][data-size=sm]{--_gap: var(--slotted-space-4, .5rem);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);font-size:var(--slotted-control-font-size-sm, 12px)}[data-ui-color-picker][data-part-root][data-size=lg]{--_gap: var(--slotted-space-6, 1rem);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);font-size:var(--slotted-control-font-size-lg, 14px)}[data-ui-color-picker] [data-part-area]{aspect-ratio:3 / 2;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%);border-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:crosshair;position:relative;touch-action:none}[data-ui-color-picker] [data-part-area]:dir(rtl){background:linear-gradient(to top,#000,transparent),linear-gradient(to left,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%)}[data-ui-color-picker] :is([data-part-area-thumb],[data-part-channel-thumb]){background:var(--_opaque);block-size:var(--_thumb);border:var(--slotted-border-width-medium, 2px) solid #fff;border-radius:var(--slotted-radius-full, 9999px);box-shadow:0 0 0 var(--slotted-border-width-thin, 1px) #0000003d,var(--slotted-shadow-sm, none);box-sizing:border-box;cursor:grab;inline-size:var(--_thumb);position:absolute;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard);translate:-50% -50%}[data-ui-color-picker] [data-part-area-thumb]{inset-block-start:calc((1 - var(--slotted-color-picker-y, 1)) * 100%);inset-inline-start:calc(var(--slotted-color-picker-x, 1) * 100%)}[data-ui-color-picker] [data-part-area-thumb]:dir(rtl){translate:50% -50%}[data-ui-color-picker] :is([data-part-area],[data-part-channel])[data-dragging]>:is([data-part-area-thumb],[data-part-channel-thumb]){cursor:grabbing;scale:1.15}[data-ui-color-picker] :is([data-part-area-thumb],[data-part-channel-thumb]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-color-picker] [data-part-channel]{block-size:var(--_channel);border-radius:var(--slotted-radius-full, 9999px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;position:relative;touch-action:none}[data-ui-color-picker] [data-part-channel][data-channel=hue]{background:linear-gradient(to right,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui-color-picker] [data-part-channel][data-channel=alpha]{background:linear-gradient(to right,transparent,var(--_opaque)),var(--_checker)}[data-ui-color-picker] [data-part-channel][data-channel=hue]:dir(rtl){background:linear-gradient(to left,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui-color-picker] [data-part-channel][data-channel=alpha]:dir(rtl){background:linear-gradient(to left,transparent,var(--_opaque)),var(--_checker)}[data-ui-color-picker] [data-part-channel-thumb]{inset-block-start:50%}[data-ui-color-picker] [data-part-channel-thumb][data-channel=hue]{background:hsl(calc(var(--_hue) * 1deg) 100% 50%);inset-inline-start:calc(var(--_thumb) / 2 + var(--_hue) / 360 * (100% - var(--_thumb)))}[data-ui-color-picker] [data-part-channel-thumb][data-channel=alpha]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);inset-inline-start:calc(var(--_thumb) / 2 + var(--slotted-color-picker-alpha, 1) * (100% - var(--_thumb)))}[data-ui-color-picker] [data-part-channel-thumb]:dir(rtl){translate:50% -50%}[data-ui-color-picker] [data-part-row]{align-items:center;display:flex;gap:var(--slotted-space-3, .375rem);min-inline-size:0}[data-ui-color-picker] [data-part-swatch],[data-ui-color-picker] [data-part-previous]{appearance:none;block-size:var(--slotted-control-height-md, 34px);border:0;box-sizing:border-box;flex:0 0 auto;inline-size:calc(var(--slotted-control-height-md, 34px) * 3 / 4);margin:0;padding:0}[data-ui-color-picker] [data-part-swatch]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);border-end-start-radius:var(--_radius);border-start-start-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent)}[data-ui-color-picker] [data-part-swatch]:only-child,[data-ui-color-picker] [data-part-swatch]:not(:has(+[data-part-previous])){border-radius:var(--_radius)}[data-ui-color-picker] [data-part-previous]{background:linear-gradient(var(--slotted-color-picker-previous, transparent),var(--slotted-color-picker-previous, transparent)),var(--_checker);border-end-end-radius:var(--_radius);border-start-end-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin-inline-start:calc(var(--slotted-space-3, .375rem) * -1);position:relative;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui-color-picker] [data-part-previous]>[data-ui-icon]{--slotted-icon-size: var(--_icon-size);color:#fff;filter:drop-shadow(0 0 1px rgb(0 0 0 / .6));inset:0;margin:auto;opacity:0;position:absolute;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui-color-picker] [data-part-previous]:is(:hover,:focus-visible):not(:disabled)>[data-ui-icon]{opacity:1}[data-ui-color-picker] [data-part-previous]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-color-picker] [data-part-row]>[data-ui-text-field]{flex:1 1 0;inline-size:auto}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]){--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_inner-size);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-text-muted, GrayText);cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-variant-numeric:tabular-nums;gap:var(--slotted-space-2, .25rem);justify-content:center;min-inline-size:var(--_inner-size);padding:0;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-color-picker] [data-part-format]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem);text-transform:uppercase}[data-ui-color-picker] [data-part-format]{align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui-color-picker] [data-part-format]>[data-ui-icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):hover:not(:disabled,[aria-expanded=true]){background-color:var(--slotted-tone-secondary-subtle-hover)}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):is(:active,[aria-expanded=true]):not(:disabled){background-color:var(--slotted-tone-secondary-subtle-active)}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-color-picker] [data-part-presets]{display:grid;gap:var(--slotted-space-3, .375rem);grid-template-columns:repeat(auto-fill,minmax(calc(var(--_inner-size) - var(--slotted-space-2, 4px)),1fr))}[data-ui-color-picker] [data-part-preset]{appearance:none;aspect-ratio:1;background:linear-gradient(var(--slotted-color-picker-preset, transparent),var(--slotted-color-picker-preset, transparent)),var(--_checker);border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin:0;min-inline-size:0;padding:0;position:relative;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui-color-picker] [data-part-preset]:hover:not(:disabled){scale:1.08}[data-ui-color-picker] [data-part-preset]:active:not(:disabled){scale:.94}[data-ui-color-picker] [data-part-preset][data-selected]{box-shadow:0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-surface-raised, Canvas),0 0 0 calc(var(--slotted-border-width-medium, 2px) * 2) var(--slotted-text, CanvasText)}[data-ui-color-picker] [data-part-preset]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-color-picker] [data-part-contrast]{align-items:center;display:flex;font-variant-numeric:tabular-nums;gap:var(--slotted-space-4, .5rem)}[data-ui-color-picker] [data-part-contrast-sample]{background:var(--slotted-color-picker-contrast-with, var(--slotted-surface, Canvas));block-size:var(--_inner-size);border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);color:var(--_color);display:inline-grid;font-weight:var(--slotted-font-weight-semibold, 600);inline-size:calc(var(--_inner-size) * 3 / 2);place-items:center}[data-ui-color-picker] [data-part-contrast-ratio]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui-color-picker] [data-part-contrast-level]{border-radius:var(--slotted-radius-sm, 4px);font-size:var(--slotted-font-size-xs, 12px);font-weight:var(--slotted-font-weight-semibold, 600);margin-inline-start:auto;padding:var(--slotted-space-1, 2px) var(--slotted-space-3, .375rem)}[data-ui-color-picker] [data-part-contrast][data-level^=AA] [data-part-contrast-level]{background:var(--slotted-tone-success-surface, Canvas);color:var(--slotted-tone-success-text, CanvasText)}[data-ui-color-picker] [data-part-contrast][data-level=AA-large] [data-part-contrast-level]{background:var(--slotted-tone-warning-surface, Canvas);color:var(--slotted-tone-warning-text, CanvasText)}[data-ui-color-picker] [data-part-contrast][data-level=fail] [data-part-contrast-level]{background:var(--slotted-tone-danger-surface, Canvas);color:var(--slotted-tone-danger-text, CanvasText)}[data-ui-color-picker] [data-part-gamut]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-tone-warning-text, CanvasText);display:flex;font-size:var(--slotted-font-size-xs, 12px);gap:var(--slotted-space-2, .25rem)}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]{appearance:none;background:linear-gradient(var(--_color, transparent),var(--_color, transparent)),repeating-conic-gradient(var(--slotted-surface-sunken, Canvas) 0 25%,var(--slotted-surface, Canvas) 0 50%) 0 0 / 8px 8px;block-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;flex:0 0 auto;inline-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));padding:0;position:relative;transition:box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);--_color: var(--slotted-color-picker-color, transparent)}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]:hover:not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-hover)}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]:is(:active,[aria-expanded=true]):not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-active)}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-color-picker][data-part-root][data-disabled]{color:var(--slotted-disabled-foreground)}[data-ui-color-picker][data-part-root][data-disabled] :is([data-part-area],[data-part-channel],[data-part-presets]){filter:grayscale(1);pointer-events:none}[data-ui-color-picker][data-part-root][data-disabled] :is([data-part-area-thumb],[data-part-channel-thumb]){cursor:not-allowed}[data-ui-color-picker][data-part-root][data-readonly] :is([data-part-area],[data-part-channel],[data-part-preset],[data-part-area-thumb],[data-part-channel-thumb]){cursor:default}@media(forced-colors:active){[data-ui-color-picker] :is([data-part-area-thumb],[data-part-channel-thumb]){border-color:CanvasText;forced-color-adjust:none}[data-ui-color-picker] :is([data-part-area],[data-part-channel],[data-part-swatch],[data-part-previous],[data-part-preset]){forced-color-adjust:none}}}\n", "@layer slotted.components{[data-ui-text-field][data-part-root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-text-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px);--_action-size: var( --slotted-text-field-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_inset: max( 0px, calc( (var(--_height) - 2 * var(--slotted-control-border-width, 1px) - var(--_action-size)) / 2 ) );--_action-radius: max( var(--slotted-radius-xs, 2px), calc(var(--slotted-text-field-radius, var(--slotted-control-radius, 4px)) - var(--_inset)) );--_action-transition: background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing), color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);align-items:center;background-color:var(--slotted-text-field-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-text-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-text-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-text-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-text-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-inline-size:0;min-block-size:var(--_height);padding-inline:var(--_padding-inline);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-text-field][data-part-root]:has(>:is([data-part-clear],[data-part-copy],[data-part-reveal]):not([hidden]):last-child,>[data-part-end]:last-child>[data-part-action]:last-child){padding-inline-end:var(--_inset)}[data-ui-text-field][data-part-root]:has(>[data-part-start]:first-child>[data-part-action]:first-child){padding-inline-start:var(--_inset)}[data-ui-text-field]>[data-part-input]{background-color:transparent;align-self:stretch;margin-block:calc(var(--slotted-control-border-width, 1px) * -1);border:0;color:inherit;flex:1 1 auto;font:inherit;outline:none;padding:0;min-inline-size:0;text-align:inherit;text-overflow:ellipsis}[data-ui-text-field]>[data-part-input]::placeholder{color:var(--slotted-text-field-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui-text-field]>[data-part-input]::-webkit-search-cancel-button,[data-ui-text-field]>[data-part-input]::-webkit-search-decoration{appearance:none}[data-ui-text-field][data-part-root]:has(>[data-part-input]:autofill){background-color:var( --slotted-text-field-autofill-background, var(--slotted-tone-accent-surface) )}[data-ui-text-field]>[data-part-input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-text-field-autofill-background, var(--slotted-tone-accent-surface));clip-path:inset(var(--slotted-control-border-width, 1px) 0);-webkit-text-fill-color:var(--slotted-text-field-color, var(--slotted-text, CanvasText))}[data-ui-text-field][data-part-root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui-text-field][data-part-root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui-text-field][data-part-root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px));--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui-button-group]>[data-ui-text-field][data-part-root]{flex:1 1 0;inline-size:auto}[data-ui-text-field][data-part-root][data-variant=subtle]{background-color:var( --slotted-text-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-text-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui-text-field][data-part-root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui-text-field][data-part-root][data-variant=plain]{border-color:ButtonBorder}}[data-ui-text-field][data-part-root][data-mono]{font-family:var(--slotted-font-family-mono, monospace);font-variant-numeric:tabular-nums}[data-ui-text-field]>[data-part-start],[data-ui-text-field]>[data-part-end]{align-items:center;color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui-text-field]>[data-part-start],[data-ui-text-field]>[data-part-end]{--slotted-icon-size: var(--_icon-size);--slotted-control-inner-size: var(--_inner-size)}[data-ui-text-field]>[data-part-start]>svg,[data-ui-text-field]>[data-part-end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui-text-field]>[data-part-start]:not(:has(svg,img,[data-ui-icon],[data-part-action])),[data-ui-text-field]>[data-part-end]:not(:has(svg,img,[data-ui-icon],[data-part-action])){padding-inline:calc(var(--_icon-size) / 8)}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]),[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--_action-radius);box-sizing:border-box;color:var(--slotted-text-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;gap:var(--slotted-space-2, .25rem);justify-content:center;line-height:1;min-inline-size:var(--_action-size);padding:0;position:relative;touch-action:manipulation;transition:var(--_action-transition);unicode-bidi:plaintext;white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:not([aria-label],[aria-labelledby]){color:var(--slotted-text-field-action-label-color, var(--slotted-text, CanvasText));font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem)}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:not([aria-label],[aria-labelledby]){align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:not([aria-label],[aria-labelledby])>[data-ui-icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui-text-field]>:is([data-part-start],[data-part-end]):has(>[data-part-action]){gap:0}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):after,[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:after,[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui-text-field]>:is([data-part-clear],[data-part-copy]):has(~:is([data-part-copy],[data-part-reveal]):not([hidden])):after,[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:has(+[data-part-action]):after{inset-inline-end:0}[data-ui-text-field]>:is([data-part-clear],[data-part-copy]):not([hidden])~:is([data-part-copy],[data-part-reveal]):after,[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]+[data-part-action]:after{inset-inline-start:0}}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):hover:not(:disabled,[data-complete]),[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:hover:not(:disabled,[aria-expanded=true]){background-color:var( --slotted-text-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):active:not(:disabled),[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:active:not(:disabled){background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action][aria-expanded=true]{background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:disabled,[data-ui-text-field][data-part-root][data-disabled]>:is([data-part-start],[data-part-end])>[data-part-action]{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):focus-visible,[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-text-field]>[data-part-copy][data-complete]{color:var( --slotted-text-field-copy-complete-color, var(--slotted-tone-success-text, CanvasText) )}[data-ui-text-field]>:is([data-part-copy],[data-part-reveal])>[data-ui-icon]{transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}@starting-style{[data-ui-text-field]>:is([data-part-copy],[data-part-reveal])>[data-ui-icon]{opacity:0;scale:.8}}[data-ui-text-field]>:is([data-part-busy],[data-part-caps-lock],[data-part-clear],[data-part-copy]){transition:var(--_action-transition),opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter),display var(--slotted-duration-short) allow-discrete}[data-ui-text-field]>:is([data-part-busy],[data-part-caps-lock],[data-part-clear],[data-part-copy])[hidden]{display:none;opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit),display var(--slotted-duration-short) allow-discrete}@starting-style{[data-ui-text-field]>:is([data-part-busy],[data-part-caps-lock],[data-part-clear],[data-part-copy]){opacity:0;scale:.8}}[data-ui-text-field]>[data-part-busy]{--slotted-spinner-size: var(--_icon-size);color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));flex:0 0 auto}[data-ui-text-field]>[data-part-caps-lock]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-text-field-caps-lock-color, var(--slotted-tone-warning-text, CanvasText));display:inline-flex;flex:0 0 auto}[data-ui-text-field][data-part-root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-text-field-hover-border-color, var(--slotted-tone-accent-border))}[data-ui-text-field][data-part-root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]):not(:has(>[data-part-input]:autofill)){background-color:var( --slotted-text-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-text-field][data-part-root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]):not(:has(>[data-part-input]:autofill)){background-color:var( --slotted-text-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui-text-field][data-part-root]:has(>[data-part-input]:focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-control-focus-ring-offset, var(--slotted-focus-ring-offset, 2px))}[data-ui-text-field][data-part-root][data-variant=plain]:has(>[data-part-input]:focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-text-field][data-part-root][data-invalid]{--slotted-focus-ring-color: var( --slotted-text-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-text-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var(--slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui-text-field][data-part-root][data-invalid]:has(>[data-part-input]:focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui-text-field][data-part-root][data-variant=plain][data-invalid]:has(>[data-part-input]:focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui-text-field][data-part-root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui-text-field][data-part-root][data-invalid]:has(>[data-part-input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var( --slotted-control-focus-ring-offset, var(--slotted-focus-ring-offset, 2px) )}[data-ui-text-field][data-part-root][data-variant=plain][data-invalid]:has(>[data-part-input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui-text-field][data-part-root][data-readonly]{background-color:var( --slotted-text-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui-text-field][data-part-root][data-disabled],[data-ui-text-field][data-part-root]:has(>[data-part-input]:disabled){background-color:var( --slotted-text-field-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-text-field-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-text-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui-text-field][data-part-root][data-disabled]>[data-part-start],[data-ui-text-field][data-part-root][data-disabled]>[data-part-end]{color:var(--slotted-disabled-foreground)}}\n"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlMenu, selector: "sl-menu", inputs: ["value", "aria-label", "aria-describedby", "open", "align", "side", "size", "width", "mount", "strategy", "sideOffset", "alignOffset", "collisionPadding", "submenuOpenDelay", "submenuCloseDelay", "typeaheadTimeout", "disabled", "loop", "typeahead", "openOnHover", "closeOnSelect", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "loading"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slMenu"] }, { kind: "component", type: SlMenuItem, selector: "button[slMenuItem], a[slMenuItem], button[slMenuCheckboxItem], button[slMenuRadioItem]", inputs: ["disabled", "textValue", "tone", "shortcut", "closeOnSelect", "value", "checked"], outputs: ["checkedChange", "checkedChangeRequest", "select"], exportAs: ["slMenuItem"] }, { kind: "component", type: SlMenuRadioGroup, selector: "sl-menu-radio-group", inputs: ["value"], outputs: ["valueChange", "valueChangeRequest"], exportAs: ["slMenuRadioGroup"] }, { kind: "directive", type: SlMenuTrigger, selector: "[slMenuTriggerFor]", inputs: ["slMenuTriggerFor"], exportAs: ["slMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColorPicker, decorators: [{
             type: Component,
@@ -528,6 +554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     ], template: `
     <div
       data-part="area"
+      data-part-area=""
       [attr.data-dragging]="dragging() === 'area' ? '' : null"
       (pointerdown)="down($event, 'area')"
       (pointermove)="move($event, 'area')"
@@ -536,6 +563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     >
       <div
         data-part="area-thumb"
+        data-part-area-thumb=""
         role="slider"
         [attr.aria-roledescription]="t('areaRoleDescription')"
         [attr.aria-label]="t('area')"
@@ -548,6 +576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     @for (channel of channels(); track channel) {
       <div
         data-part="channel"
+        data-part-channel=""
         [attr.data-channel]="channel"
         [attr.data-dragging]="dragging() === channel ? '' : null"
         (pointerdown)="down($event, channel)"
@@ -557,6 +586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       >
         <div
           data-part="channel-thumb"
+          data-part-channel-thumb=""
           role="slider"
           [attr.data-channel]="channel"
           [attr.aria-label]="channel === 'hue' ? t('hue') : t('alpha')"
@@ -570,10 +600,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         ></div>
       </div>
     }
-    <div data-part="row">
-      <span data-part="swatch" role="img" [attr.aria-label]="current()"></span>
+    <div data-part="row" data-part-row="">
+      <span data-part="swatch" data-part-swatch="" role="img" [attr.aria-label]="current()"></span>
       <button
         data-part="previous"
+        data-part-previous=""
         type="button"
         [attr.aria-label]="t('previous', { color: previous() ?? current() })"
         [disabled]="off()"
@@ -583,7 +614,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       </button>
       <div
         data-ui="text-field"
+        data-ui-text-field=""
         data-part="root"
+        data-part-root=""
         data-size="sm"
         data-variant="outline"
         data-mono=""
@@ -593,6 +626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       >
         <input
           data-part="input"
+          data-part-input=""
           dir="ltr"
           autocomplete="off"
           spellcheck="false"
@@ -608,6 +642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       </div>
       <button
         data-part="format"
+        data-part-format=""
         type="button"
         [attr.aria-label]="t('format', { format: resolvedFormat() })"
         [disabled]="off()"
@@ -628,6 +663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       @if (eyedropper()) {
         <button
           data-part="eyedropper"
+          data-part-eyedropper=""
           type="button"
           [attr.aria-label]="t('eyedropper')"
           [disabled]="off()"
@@ -638,15 +674,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       }
     </div>
     @if (outOfGamut()) {
-      <p data-part="gamut" role="status">
+      <p data-part="gamut" data-part-gamut="" role="status">
         <span slIcon><svg slGlyph name="circle-alert"></svg></span>{{ t('gamut') }}
       </p>
     }
     @if (resolvedPresets().length > 0) {
-      <div data-part="presets" role="radiogroup" [attr.aria-label]="t('presets')">
+      <div
+        data-part="presets"
+        data-part-presets=""
+        role="radiogroup"
+        [attr.aria-label]="t('presets')"
+      >
         @for (preset of resolvedPresets(); track preset; let index = $index) {
           <button
             data-part="preset"
+            data-part-preset=""
             type="button"
             role="radio"
             [attr.aria-label]="preset"
@@ -662,15 +704,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       </div>
     }
     @if (contrast(); as measured) {
-      <div data-part="contrast" aria-live="polite" [attr.data-level]="measured.level">
-        <span data-part="contrast-sample" aria-hidden="true">{{ t('contrastSample') }}</span>
-        <span data-part="contrast-ratio">{{ measured.ratio }}:1</span>
-        <span data-part="contrast-level">{{ t(measured.key) }}</span>
+      <div
+        data-part="contrast"
+        data-part-contrast=""
+        aria-live="polite"
+        [attr.data-level]="measured.level"
+      >
+        <span data-part="contrast-sample" data-part-contrast-sample="" aria-hidden="true">{{
+          t('contrastSample')
+        }}</span>
+        <span data-part="contrast-ratio" data-part-contrast-ratio="">{{ measured.ratio }}:1</span>
+        <span data-part="contrast-level" data-part-contrast-level="">{{ t(measured.key) }}</span>
       </div>
     }
   `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'data-ui': 'color-picker',
+                        'data-ui-color-picker': '',
                         'data-part': 'root',
+                        'data-part-root': '',
                         '[attr.data-size]': 'size() ?? field?.resolvedSize() ?? defaults.size',
                         '[attr.data-format]': 'resolvedFormat()',
                         '[attr.data-disabled]': "resolvedDisabled() ? '' : null",
@@ -685,7 +736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[style.--slotted-color-picker-alpha]': 'hsva().a',
                         '[style.--slotted-color-picker-previous]': 'previousCss()',
                         '[style.--slotted-color-picker-contrast-with]': 'contrastCss()',
-                    }, styles: ["@layer slotted.components{[data-ui=color-picker][data-part=root]{--_thumb: var(--slotted-color-picker-thumb-size, var(--slotted-space-6, 1rem));--_channel: var(--slotted-color-picker-channel-size, var(--slotted-space-5, .75rem));--_gap: var(--slotted-space-5, .75rem);--_radius: var(--slotted-radius-md, 6px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_color: var(--slotted-color-picker-color, transparent);--_opaque: var(--slotted-color-picker-opaque, transparent);--_hue: var(--slotted-color-picker-hue, 0);--_checker: repeating-conic-gradient( var(--slotted-surface-sunken, Canvas) 0 25%, var(--slotted-surface, Canvas) 0 50% ) 0 0 / var(--_channel) var(--_channel);box-sizing:border-box;color:var(--slotted-text, CanvasText);display:grid;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-control-font-size-md, 13px);gap:var(--_gap);inline-size:var(--slotted-color-picker-width, calc(var(--slotted-space-12, 4rem) * 4));max-inline-size:100%;min-inline-size:0}[data-ui=color-picker][data-part=root][data-size=sm]{--_gap: var(--slotted-space-4, .5rem);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);font-size:var(--slotted-control-font-size-sm, 12px)}[data-ui=color-picker][data-part=root][data-size=lg]{--_gap: var(--slotted-space-6, 1rem);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);font-size:var(--slotted-control-font-size-lg, 14px)}[data-ui=color-picker] [data-part=area]{aspect-ratio:3 / 2;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%);border-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:crosshair;position:relative;touch-action:none}[data-ui=color-picker] [data-part=area]:dir(rtl){background:linear-gradient(to top,#000,transparent),linear-gradient(to left,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%)}[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]){background:var(--_opaque);block-size:var(--_thumb);border:var(--slotted-border-width-medium, 2px) solid #fff;border-radius:var(--slotted-radius-full, 9999px);box-shadow:0 0 0 var(--slotted-border-width-thin, 1px) #0000003d,var(--slotted-shadow-sm, none);box-sizing:border-box;cursor:grab;inline-size:var(--_thumb);position:absolute;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard);translate:-50% -50%}[data-ui=color-picker] [data-part=area-thumb]{inset-block-start:calc((1 - var(--slotted-color-picker-y, 1)) * 100%);inset-inline-start:calc(var(--slotted-color-picker-x, 1) * 100%)}[data-ui=color-picker] [data-part=area-thumb]:dir(rtl){translate:50% -50%}[data-ui=color-picker] :is([data-part=area],[data-part=channel])[data-dragging]>:is([data-part=area-thumb],[data-part=channel-thumb]){cursor:grabbing;scale:1.15}[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=channel]{block-size:var(--_channel);border-radius:var(--slotted-radius-full, 9999px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;position:relative;touch-action:none}[data-ui=color-picker] [data-part=channel][data-channel=hue]{background:linear-gradient(to right,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui=color-picker] [data-part=channel][data-channel=alpha]{background:linear-gradient(to right,transparent,var(--_opaque)),var(--_checker)}[data-ui=color-picker] [data-part=channel][data-channel=hue]:dir(rtl){background:linear-gradient(to left,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui=color-picker] [data-part=channel][data-channel=alpha]:dir(rtl){background:linear-gradient(to left,transparent,var(--_opaque)),var(--_checker)}[data-ui=color-picker] [data-part=channel-thumb]{inset-block-start:50%}[data-ui=color-picker] [data-part=channel-thumb][data-channel=hue]{background:hsl(calc(var(--_hue) * 1deg) 100% 50%);inset-inline-start:calc(var(--_thumb) / 2 + var(--_hue) / 360 * (100% - var(--_thumb)))}[data-ui=color-picker] [data-part=channel-thumb][data-channel=alpha]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);inset-inline-start:calc(var(--_thumb) / 2 + var(--slotted-color-picker-alpha, 1) * (100% - var(--_thumb)))}[data-ui=color-picker] [data-part=channel-thumb]:dir(rtl){translate:50% -50%}[data-ui=color-picker] [data-part=row]{align-items:center;display:flex;gap:var(--slotted-space-3, .375rem);min-inline-size:0}[data-ui=color-picker] [data-part=swatch],[data-ui=color-picker] [data-part=previous]{appearance:none;block-size:var(--slotted-control-height-md, 34px);border:0;box-sizing:border-box;flex:0 0 auto;inline-size:calc(var(--slotted-control-height-md, 34px) * 3 / 4);margin:0;padding:0}[data-ui=color-picker] [data-part=swatch]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);border-end-start-radius:var(--_radius);border-start-start-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent)}[data-ui=color-picker] [data-part=swatch]:only-child,[data-ui=color-picker] [data-part=swatch]:not(:has(+[data-part=previous])){border-radius:var(--_radius)}[data-ui=color-picker] [data-part=previous]{background:linear-gradient(var(--slotted-color-picker-previous, transparent),var(--slotted-color-picker-previous, transparent)),var(--_checker);border-end-end-radius:var(--_radius);border-start-end-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin-inline-start:calc(var(--slotted-space-3, .375rem) * -1);position:relative;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=previous]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);color:#fff;filter:drop-shadow(0 0 1px rgb(0 0 0 / .6));inset:0;margin:auto;opacity:0;position:absolute;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=previous]:is(:hover,:focus-visible):not(:disabled)>[data-ui=icon]{opacity:1}[data-ui=color-picker] [data-part=previous]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=row]>[data-ui=text-field]{flex:1 1 0;inline-size:auto}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]){--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_inner-size);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-text-muted, GrayText);cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-variant-numeric:tabular-nums;gap:var(--slotted-space-2, .25rem);justify-content:center;min-inline-size:var(--_inner-size);padding:0;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=color-picker] [data-part=format]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem);text-transform:uppercase}[data-ui=color-picker] [data-part=format]{align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui=color-picker] [data-part=format]>[data-ui=icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):hover:not(:disabled,[aria-expanded=true]){background-color:var(--slotted-tone-secondary-subtle-hover)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):is(:active,[aria-expanded=true]):not(:disabled){background-color:var(--slotted-tone-secondary-subtle-active)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=color-picker] [data-part=presets]{display:grid;gap:var(--slotted-space-3, .375rem);grid-template-columns:repeat(auto-fill,minmax(calc(var(--_inner-size) - var(--slotted-space-2, 4px)),1fr))}[data-ui=color-picker] [data-part=preset]{appearance:none;aspect-ratio:1;background:linear-gradient(var(--slotted-color-picker-preset, transparent),var(--slotted-color-picker-preset, transparent)),var(--_checker);border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin:0;min-inline-size:0;padding:0;position:relative;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=preset]:hover:not(:disabled){scale:1.08}[data-ui=color-picker] [data-part=preset]:active:not(:disabled){scale:.94}[data-ui=color-picker] [data-part=preset][data-selected]{box-shadow:0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-surface-raised, Canvas),0 0 0 calc(var(--slotted-border-width-medium, 2px) * 2) var(--slotted-text, CanvasText)}[data-ui=color-picker] [data-part=preset]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=contrast]{align-items:center;display:flex;font-variant-numeric:tabular-nums;gap:var(--slotted-space-4, .5rem)}[data-ui=color-picker] [data-part=contrast-sample]{background:var(--slotted-color-picker-contrast-with, var(--slotted-surface, Canvas));block-size:var(--_inner-size);border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);color:var(--_color);display:inline-grid;font-weight:var(--slotted-font-weight-semibold, 600);inline-size:calc(var(--_inner-size) * 3 / 2);place-items:center}[data-ui=color-picker] [data-part=contrast-ratio]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=color-picker] [data-part=contrast-level]{border-radius:var(--slotted-radius-sm, 4px);font-size:var(--slotted-font-size-xs, 12px);font-weight:var(--slotted-font-weight-semibold, 600);margin-inline-start:auto;padding:var(--slotted-space-1, 2px) var(--slotted-space-3, .375rem)}[data-ui=color-picker] [data-part=contrast][data-level^=AA] [data-part=contrast-level]{background:var(--slotted-tone-success-surface, Canvas);color:var(--slotted-tone-success-text, CanvasText)}[data-ui=color-picker] [data-part=contrast][data-level=AA-large] [data-part=contrast-level]{background:var(--slotted-tone-warning-surface, Canvas);color:var(--slotted-tone-warning-text, CanvasText)}[data-ui=color-picker] [data-part=contrast][data-level=fail] [data-part=contrast-level]{background:var(--slotted-tone-danger-surface, Canvas);color:var(--slotted-tone-danger-text, CanvasText)}[data-ui=color-picker] [data-part=gamut]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-tone-warning-text, CanvasText);display:flex;font-size:var(--slotted-font-size-xs, 12px);gap:var(--slotted-space-2, .25rem)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]{appearance:none;background:linear-gradient(var(--_color, transparent),var(--_color, transparent)),repeating-conic-gradient(var(--slotted-surface-sunken, Canvas) 0 25%,var(--slotted-surface, Canvas) 0 50%) 0 0 / 8px 8px;block-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;flex:0 0 auto;inline-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));padding:0;position:relative;transition:box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);--_color: var(--slotted-color-picker-color, transparent)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:hover:not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-hover)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:is(:active,[aria-expanded=true]):not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-active)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker][data-part=root][data-disabled]{color:var(--slotted-disabled-foreground)}[data-ui=color-picker][data-part=root][data-disabled] :is([data-part=area],[data-part=channel],[data-part=presets]){filter:grayscale(1);pointer-events:none}[data-ui=color-picker][data-part=root][data-disabled] :is([data-part=area-thumb],[data-part=channel-thumb]){cursor:not-allowed}[data-ui=color-picker][data-part=root][data-readonly] :is([data-part=area],[data-part=channel],[data-part=preset],[data-part=area-thumb],[data-part=channel-thumb]){cursor:default}@media(forced-colors:active){[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]){border-color:CanvasText;forced-color-adjust:none}[data-ui=color-picker] :is([data-part=area],[data-part=channel],[data-part=swatch],[data-part=previous],[data-part=preset]){forced-color-adjust:none}}}\n", "@layer slotted.components{[data-ui=text-field][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-text-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px);--_action-size: var( --slotted-text-field-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_inset: max( 0px, calc( (var(--_height) - 2 * var(--slotted-control-border-width, 1px) - var(--_action-size)) / 2 ) );--_action-radius: max( var(--slotted-radius-xs, 2px), calc(var(--slotted-text-field-radius, var(--slotted-control-radius, 4px)) - var(--_inset)) );--_action-transition: background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing), color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);align-items:center;background-color:var(--slotted-text-field-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-text-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-text-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-text-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-text-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-inline-size:0;min-block-size:var(--_height);padding-inline:var(--_padding-inline);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=text-field][data-part=root]:has(>:is([data-part=clear],[data-part=copy],[data-part=reveal]):not([hidden]):last-child,>[data-part=end]:last-child>[data-part=action]:last-child){padding-inline-end:var(--_inset)}[data-ui=text-field][data-part=root]:has(>[data-part=start]:first-child>[data-part=action]:first-child){padding-inline-start:var(--_inset)}[data-ui=text-field]>[data-part=input]{background-color:transparent;align-self:stretch;margin-block:calc(var(--slotted-control-border-width, 1px) * -1);border:0;color:inherit;flex:1 1 auto;font:inherit;outline:none;padding:0;min-inline-size:0;text-align:inherit;text-overflow:ellipsis}[data-ui=text-field]>[data-part=input]::placeholder{color:var(--slotted-text-field-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui=text-field]>[data-part=input]::-webkit-search-cancel-button,[data-ui=text-field]>[data-part=input]::-webkit-search-decoration{appearance:none}[data-ui=text-field]>[data-part=input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-text-field-autofill-background, var(--slotted-tone-accent-surface));-webkit-text-fill-color:var(--slotted-text-field-color, var(--slotted-text, CanvasText))}[data-ui=text-field][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=text-field][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui=text-field][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px));--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=button-group]>[data-ui=text-field][data-part=root]{flex:1 1 0;inline-size:auto}[data-ui=text-field][data-part=root][data-variant=subtle]{background-color:var( --slotted-text-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-text-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=text-field][data-part=root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui=text-field][data-part=root][data-variant=plain]{border-color:ButtonBorder}}[data-ui=text-field][data-part=root][data-mono]{font-family:var(--slotted-font-family-mono, monospace);font-variant-numeric:tabular-nums}[data-ui=text-field]>[data-part=start],[data-ui=text-field]>[data-part=end]{align-items:center;color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui=text-field]>[data-part=start],[data-ui=text-field]>[data-part=end]{--slotted-icon-size: var(--_icon-size);--slotted-control-inner-size: var(--_inner-size)}[data-ui=text-field]>[data-part=start]>svg,[data-ui=text-field]>[data-part=end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=text-field]>[data-part=start]:not(:has(svg,img,[data-ui=icon],[data-part=action])),[data-ui=text-field]>[data-part=end]:not(:has(svg,img,[data-ui=icon],[data-part=action])){padding-inline:calc(var(--_icon-size) / 8)}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--_action-radius);box-sizing:border-box;color:var(--slotted-text-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;gap:var(--slotted-space-2, .25rem);justify-content:center;line-height:1;min-inline-size:var(--_action-size);padding:0;position:relative;touch-action:manipulation;transition:var(--_action-transition);unicode-bidi:plaintext;white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby]){color:var(--slotted-text-field-action-label-color, var(--slotted-text, CanvasText));font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem)}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby]){align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby])>[data-ui=icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui=text-field]>:is([data-part=start],[data-part=end]):has(>[data-part=action]){gap:0}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:after,[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=text-field]>:is([data-part=clear],[data-part=copy]):has(~:is([data-part=copy],[data-part=reveal]):not([hidden])):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:has(+[data-part=action]):after{inset-inline-end:0}[data-ui=text-field]>:is([data-part=clear],[data-part=copy]):not([hidden])~:is([data-part=copy],[data-part=reveal]):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]+[data-part=action]:after{inset-inline-start:0}}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):hover:not(:disabled,[data-complete]),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:hover:not(:disabled,[aria-expanded=true]){background-color:var( --slotted-text-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):active:not(:disabled),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:active:not(:disabled){background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action][aria-expanded=true]{background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:disabled,[data-ui=text-field][data-part=root][data-disabled]>:is([data-part=start],[data-part=end])>[data-part=action]{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):focus-visible,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=text-field]>[data-part=copy][data-complete]{color:var( --slotted-text-field-copy-complete-color, var(--slotted-tone-success-text, CanvasText) )}[data-ui=text-field]>:is([data-part=copy],[data-part=reveal])>[data-ui=icon]{transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}@starting-style{[data-ui=text-field]>:is([data-part=copy],[data-part=reveal])>[data-ui=icon]{opacity:0;scale:.8}}[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy]){transition:var(--_action-transition),opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter),display var(--slotted-duration-short) allow-discrete}[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy])[hidden]{display:none;opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit),display var(--slotted-duration-short) allow-discrete}@starting-style{[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy]){opacity:0;scale:.8}}[data-ui=text-field]>[data-part=busy]{--slotted-spinner-size: var(--_icon-size);color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));flex:0 0 auto}[data-ui=text-field]>[data-part=caps-lock]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-text-field-caps-lock-color, var(--slotted-tone-warning-text, CanvasText));display:inline-flex;flex:0 0 auto}[data-ui=text-field][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-text-field-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=text-field][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-text-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=text-field][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-text-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=text-field][data-part=root]:has(>[data-part=input]:focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=text-field][data-part=root][data-variant=plain]:has(>[data-part=input]:focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=text-field][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-text-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-text-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var(--slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui=text-field][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=text-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=text-field][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=text-field][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=text-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui=text-field][data-part=root][data-readonly]{background-color:var( --slotted-text-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui=text-field][data-part=root][data-disabled],[data-ui=text-field][data-part=root]:has(>[data-part=input]:disabled){background-color:var( --slotted-text-field-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-text-field-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-text-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=text-field][data-part=root][data-disabled]>[data-part=start],[data-ui=text-field][data-part=root][data-disabled]>[data-part=end]{color:var(--slotted-disabled-foreground)}}\n"] }]
+                    }, styles: ["@layer slotted.components{[data-ui-color-picker][data-part-root]{--_thumb: var(--slotted-color-picker-thumb-size, var(--slotted-space-6, 1rem));--_channel: var(--slotted-color-picker-channel-size, var(--slotted-space-5, .75rem));--_gap: var(--slotted-space-5, .75rem);--_radius: var(--slotted-radius-md, 6px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_color: var(--slotted-color-picker-color, transparent);--_opaque: var(--slotted-color-picker-opaque, transparent);--_hue: var(--slotted-color-picker-hue, 0);--_checker: repeating-conic-gradient( var(--slotted-surface-sunken, Canvas) 0 25%, var(--slotted-surface, Canvas) 0 50% ) 0 0 / var(--_channel) var(--_channel);box-sizing:border-box;color:var(--slotted-text, CanvasText);display:grid;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-control-font-size-md, 13px);gap:var(--_gap);inline-size:var(--slotted-color-picker-width, calc(var(--slotted-space-12, 4rem) * 4));max-inline-size:100%;min-inline-size:0}[data-ui-color-picker][data-part-root][data-size=sm]{--_gap: var(--slotted-space-4, .5rem);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);font-size:var(--slotted-control-font-size-sm, 12px)}[data-ui-color-picker][data-part-root][data-size=lg]{--_gap: var(--slotted-space-6, 1rem);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);font-size:var(--slotted-control-font-size-lg, 14px)}[data-ui-color-picker] [data-part-area]{aspect-ratio:3 / 2;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%);border-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:crosshair;position:relative;touch-action:none}[data-ui-color-picker] [data-part-area]:dir(rtl){background:linear-gradient(to top,#000,transparent),linear-gradient(to left,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%)}[data-ui-color-picker] :is([data-part-area-thumb],[data-part-channel-thumb]){background:var(--_opaque);block-size:var(--_thumb);border:var(--slotted-border-width-medium, 2px) solid #fff;border-radius:var(--slotted-radius-full, 9999px);box-shadow:0 0 0 var(--slotted-border-width-thin, 1px) #0000003d,var(--slotted-shadow-sm, none);box-sizing:border-box;cursor:grab;inline-size:var(--_thumb);position:absolute;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard);translate:-50% -50%}[data-ui-color-picker] [data-part-area-thumb]{inset-block-start:calc((1 - var(--slotted-color-picker-y, 1)) * 100%);inset-inline-start:calc(var(--slotted-color-picker-x, 1) * 100%)}[data-ui-color-picker] [data-part-area-thumb]:dir(rtl){translate:50% -50%}[data-ui-color-picker] :is([data-part-area],[data-part-channel])[data-dragging]>:is([data-part-area-thumb],[data-part-channel-thumb]){cursor:grabbing;scale:1.15}[data-ui-color-picker] :is([data-part-area-thumb],[data-part-channel-thumb]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-color-picker] [data-part-channel]{block-size:var(--_channel);border-radius:var(--slotted-radius-full, 9999px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;position:relative;touch-action:none}[data-ui-color-picker] [data-part-channel][data-channel=hue]{background:linear-gradient(to right,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui-color-picker] [data-part-channel][data-channel=alpha]{background:linear-gradient(to right,transparent,var(--_opaque)),var(--_checker)}[data-ui-color-picker] [data-part-channel][data-channel=hue]:dir(rtl){background:linear-gradient(to left,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui-color-picker] [data-part-channel][data-channel=alpha]:dir(rtl){background:linear-gradient(to left,transparent,var(--_opaque)),var(--_checker)}[data-ui-color-picker] [data-part-channel-thumb]{inset-block-start:50%}[data-ui-color-picker] [data-part-channel-thumb][data-channel=hue]{background:hsl(calc(var(--_hue) * 1deg) 100% 50%);inset-inline-start:calc(var(--_thumb) / 2 + var(--_hue) / 360 * (100% - var(--_thumb)))}[data-ui-color-picker] [data-part-channel-thumb][data-channel=alpha]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);inset-inline-start:calc(var(--_thumb) / 2 + var(--slotted-color-picker-alpha, 1) * (100% - var(--_thumb)))}[data-ui-color-picker] [data-part-channel-thumb]:dir(rtl){translate:50% -50%}[data-ui-color-picker] [data-part-row]{align-items:center;display:flex;gap:var(--slotted-space-3, .375rem);min-inline-size:0}[data-ui-color-picker] [data-part-swatch],[data-ui-color-picker] [data-part-previous]{appearance:none;block-size:var(--slotted-control-height-md, 34px);border:0;box-sizing:border-box;flex:0 0 auto;inline-size:calc(var(--slotted-control-height-md, 34px) * 3 / 4);margin:0;padding:0}[data-ui-color-picker] [data-part-swatch]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);border-end-start-radius:var(--_radius);border-start-start-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent)}[data-ui-color-picker] [data-part-swatch]:only-child,[data-ui-color-picker] [data-part-swatch]:not(:has(+[data-part-previous])){border-radius:var(--_radius)}[data-ui-color-picker] [data-part-previous]{background:linear-gradient(var(--slotted-color-picker-previous, transparent),var(--slotted-color-picker-previous, transparent)),var(--_checker);border-end-end-radius:var(--_radius);border-start-end-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin-inline-start:calc(var(--slotted-space-3, .375rem) * -1);position:relative;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui-color-picker] [data-part-previous]>[data-ui-icon]{--slotted-icon-size: var(--_icon-size);color:#fff;filter:drop-shadow(0 0 1px rgb(0 0 0 / .6));inset:0;margin:auto;opacity:0;position:absolute;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui-color-picker] [data-part-previous]:is(:hover,:focus-visible):not(:disabled)>[data-ui-icon]{opacity:1}[data-ui-color-picker] [data-part-previous]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-color-picker] [data-part-row]>[data-ui-text-field]{flex:1 1 0;inline-size:auto}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]){--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_inner-size);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-text-muted, GrayText);cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-variant-numeric:tabular-nums;gap:var(--slotted-space-2, .25rem);justify-content:center;min-inline-size:var(--_inner-size);padding:0;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-color-picker] [data-part-format]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem);text-transform:uppercase}[data-ui-color-picker] [data-part-format]{align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui-color-picker] [data-part-format]>[data-ui-icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):hover:not(:disabled,[aria-expanded=true]){background-color:var(--slotted-tone-secondary-subtle-hover)}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):is(:active,[aria-expanded=true]):not(:disabled){background-color:var(--slotted-tone-secondary-subtle-active)}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-color-picker] [data-part-presets]{display:grid;gap:var(--slotted-space-3, .375rem);grid-template-columns:repeat(auto-fill,minmax(calc(var(--_inner-size) - var(--slotted-space-2, 4px)),1fr))}[data-ui-color-picker] [data-part-preset]{appearance:none;aspect-ratio:1;background:linear-gradient(var(--slotted-color-picker-preset, transparent),var(--slotted-color-picker-preset, transparent)),var(--_checker);border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin:0;min-inline-size:0;padding:0;position:relative;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui-color-picker] [data-part-preset]:hover:not(:disabled){scale:1.08}[data-ui-color-picker] [data-part-preset]:active:not(:disabled){scale:.94}[data-ui-color-picker] [data-part-preset][data-selected]{box-shadow:0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-surface-raised, Canvas),0 0 0 calc(var(--slotted-border-width-medium, 2px) * 2) var(--slotted-text, CanvasText)}[data-ui-color-picker] [data-part-preset]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-color-picker] [data-part-contrast]{align-items:center;display:flex;font-variant-numeric:tabular-nums;gap:var(--slotted-space-4, .5rem)}[data-ui-color-picker] [data-part-contrast-sample]{background:var(--slotted-color-picker-contrast-with, var(--slotted-surface, Canvas));block-size:var(--_inner-size);border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);color:var(--_color);display:inline-grid;font-weight:var(--slotted-font-weight-semibold, 600);inline-size:calc(var(--_inner-size) * 3 / 2);place-items:center}[data-ui-color-picker] [data-part-contrast-ratio]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui-color-picker] [data-part-contrast-level]{border-radius:var(--slotted-radius-sm, 4px);font-size:var(--slotted-font-size-xs, 12px);font-weight:var(--slotted-font-weight-semibold, 600);margin-inline-start:auto;padding:var(--slotted-space-1, 2px) var(--slotted-space-3, .375rem)}[data-ui-color-picker] [data-part-contrast][data-level^=AA] [data-part-contrast-level]{background:var(--slotted-tone-success-surface, Canvas);color:var(--slotted-tone-success-text, CanvasText)}[data-ui-color-picker] [data-part-contrast][data-level=AA-large] [data-part-contrast-level]{background:var(--slotted-tone-warning-surface, Canvas);color:var(--slotted-tone-warning-text, CanvasText)}[data-ui-color-picker] [data-part-contrast][data-level=fail] [data-part-contrast-level]{background:var(--slotted-tone-danger-surface, Canvas);color:var(--slotted-tone-danger-text, CanvasText)}[data-ui-color-picker] [data-part-gamut]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-tone-warning-text, CanvasText);display:flex;font-size:var(--slotted-font-size-xs, 12px);gap:var(--slotted-space-2, .25rem)}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]{appearance:none;background:linear-gradient(var(--_color, transparent),var(--_color, transparent)),repeating-conic-gradient(var(--slotted-surface-sunken, Canvas) 0 25%,var(--slotted-surface, Canvas) 0 50%) 0 0 / 8px 8px;block-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;flex:0 0 auto;inline-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));padding:0;position:relative;transition:box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);--_color: var(--slotted-color-picker-color, transparent)}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]:hover:not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-hover)}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]:is(:active,[aria-expanded=true]):not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-active)}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-color-picker][data-part-root][data-disabled]{color:var(--slotted-disabled-foreground)}[data-ui-color-picker][data-part-root][data-disabled] :is([data-part-area],[data-part-channel],[data-part-presets]){filter:grayscale(1);pointer-events:none}[data-ui-color-picker][data-part-root][data-disabled] :is([data-part-area-thumb],[data-part-channel-thumb]){cursor:not-allowed}[data-ui-color-picker][data-part-root][data-readonly] :is([data-part-area],[data-part-channel],[data-part-preset],[data-part-area-thumb],[data-part-channel-thumb]){cursor:default}@media(forced-colors:active){[data-ui-color-picker] :is([data-part-area-thumb],[data-part-channel-thumb]){border-color:CanvasText;forced-color-adjust:none}[data-ui-color-picker] :is([data-part-area],[data-part-channel],[data-part-swatch],[data-part-previous],[data-part-preset]){forced-color-adjust:none}}}\n", "@layer slotted.components{[data-ui-text-field][data-part-root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-text-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px);--_action-size: var( --slotted-text-field-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_inset: max( 0px, calc( (var(--_height) - 2 * var(--slotted-control-border-width, 1px) - var(--_action-size)) / 2 ) );--_action-radius: max( var(--slotted-radius-xs, 2px), calc(var(--slotted-text-field-radius, var(--slotted-control-radius, 4px)) - var(--_inset)) );--_action-transition: background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing), color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);align-items:center;background-color:var(--slotted-text-field-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-text-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-text-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-text-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-text-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-inline-size:0;min-block-size:var(--_height);padding-inline:var(--_padding-inline);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-text-field][data-part-root]:has(>:is([data-part-clear],[data-part-copy],[data-part-reveal]):not([hidden]):last-child,>[data-part-end]:last-child>[data-part-action]:last-child){padding-inline-end:var(--_inset)}[data-ui-text-field][data-part-root]:has(>[data-part-start]:first-child>[data-part-action]:first-child){padding-inline-start:var(--_inset)}[data-ui-text-field]>[data-part-input]{background-color:transparent;align-self:stretch;margin-block:calc(var(--slotted-control-border-width, 1px) * -1);border:0;color:inherit;flex:1 1 auto;font:inherit;outline:none;padding:0;min-inline-size:0;text-align:inherit;text-overflow:ellipsis}[data-ui-text-field]>[data-part-input]::placeholder{color:var(--slotted-text-field-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui-text-field]>[data-part-input]::-webkit-search-cancel-button,[data-ui-text-field]>[data-part-input]::-webkit-search-decoration{appearance:none}[data-ui-text-field][data-part-root]:has(>[data-part-input]:autofill){background-color:var( --slotted-text-field-autofill-background, var(--slotted-tone-accent-surface) )}[data-ui-text-field]>[data-part-input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-text-field-autofill-background, var(--slotted-tone-accent-surface));clip-path:inset(var(--slotted-control-border-width, 1px) 0);-webkit-text-fill-color:var(--slotted-text-field-color, var(--slotted-text, CanvasText))}[data-ui-text-field][data-part-root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui-text-field][data-part-root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui-text-field][data-part-root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px));--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui-button-group]>[data-ui-text-field][data-part-root]{flex:1 1 0;inline-size:auto}[data-ui-text-field][data-part-root][data-variant=subtle]{background-color:var( --slotted-text-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-text-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui-text-field][data-part-root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui-text-field][data-part-root][data-variant=plain]{border-color:ButtonBorder}}[data-ui-text-field][data-part-root][data-mono]{font-family:var(--slotted-font-family-mono, monospace);font-variant-numeric:tabular-nums}[data-ui-text-field]>[data-part-start],[data-ui-text-field]>[data-part-end]{align-items:center;color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui-text-field]>[data-part-start],[data-ui-text-field]>[data-part-end]{--slotted-icon-size: var(--_icon-size);--slotted-control-inner-size: var(--_inner-size)}[data-ui-text-field]>[data-part-start]>svg,[data-ui-text-field]>[data-part-end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui-text-field]>[data-part-start]:not(:has(svg,img,[data-ui-icon],[data-part-action])),[data-ui-text-field]>[data-part-end]:not(:has(svg,img,[data-ui-icon],[data-part-action])){padding-inline:calc(var(--_icon-size) / 8)}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]),[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--_action-radius);box-sizing:border-box;color:var(--slotted-text-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;gap:var(--slotted-space-2, .25rem);justify-content:center;line-height:1;min-inline-size:var(--_action-size);padding:0;position:relative;touch-action:manipulation;transition:var(--_action-transition);unicode-bidi:plaintext;white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:not([aria-label],[aria-labelledby]){color:var(--slotted-text-field-action-label-color, var(--slotted-text, CanvasText));font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem)}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:not([aria-label],[aria-labelledby]){align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:not([aria-label],[aria-labelledby])>[data-ui-icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui-text-field]>:is([data-part-start],[data-part-end]):has(>[data-part-action]){gap:0}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):after,[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:after,[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui-text-field]>:is([data-part-clear],[data-part-copy]):has(~:is([data-part-copy],[data-part-reveal]):not([hidden])):after,[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:has(+[data-part-action]):after{inset-inline-end:0}[data-ui-text-field]>:is([data-part-clear],[data-part-copy]):not([hidden])~:is([data-part-copy],[data-part-reveal]):after,[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]+[data-part-action]:after{inset-inline-start:0}}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):hover:not(:disabled,[data-complete]),[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:hover:not(:disabled,[aria-expanded=true]){background-color:var( --slotted-text-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):active:not(:disabled),[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:active:not(:disabled){background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action][aria-expanded=true]{background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:disabled,[data-ui-text-field][data-part-root][data-disabled]>:is([data-part-start],[data-part-end])>[data-part-action]{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):focus-visible,[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-text-field]>[data-part-copy][data-complete]{color:var( --slotted-text-field-copy-complete-color, var(--slotted-tone-success-text, CanvasText) )}[data-ui-text-field]>:is([data-part-copy],[data-part-reveal])>[data-ui-icon]{transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}@starting-style{[data-ui-text-field]>:is([data-part-copy],[data-part-reveal])>[data-ui-icon]{opacity:0;scale:.8}}[data-ui-text-field]>:is([data-part-busy],[data-part-caps-lock],[data-part-clear],[data-part-copy]){transition:var(--_action-transition),opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter),display var(--slotted-duration-short) allow-discrete}[data-ui-text-field]>:is([data-part-busy],[data-part-caps-lock],[data-part-clear],[data-part-copy])[hidden]{display:none;opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit),display var(--slotted-duration-short) allow-discrete}@starting-style{[data-ui-text-field]>:is([data-part-busy],[data-part-caps-lock],[data-part-clear],[data-part-copy]){opacity:0;scale:.8}}[data-ui-text-field]>[data-part-busy]{--slotted-spinner-size: var(--_icon-size);color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));flex:0 0 auto}[data-ui-text-field]>[data-part-caps-lock]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-text-field-caps-lock-color, var(--slotted-tone-warning-text, CanvasText));display:inline-flex;flex:0 0 auto}[data-ui-text-field][data-part-root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-text-field-hover-border-color, var(--slotted-tone-accent-border))}[data-ui-text-field][data-part-root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]):not(:has(>[data-part-input]:autofill)){background-color:var( --slotted-text-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-text-field][data-part-root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]):not(:has(>[data-part-input]:autofill)){background-color:var( --slotted-text-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui-text-field][data-part-root]:has(>[data-part-input]:focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-control-focus-ring-offset, var(--slotted-focus-ring-offset, 2px))}[data-ui-text-field][data-part-root][data-variant=plain]:has(>[data-part-input]:focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-text-field][data-part-root][data-invalid]{--slotted-focus-ring-color: var( --slotted-text-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-text-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var(--slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui-text-field][data-part-root][data-invalid]:has(>[data-part-input]:focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui-text-field][data-part-root][data-variant=plain][data-invalid]:has(>[data-part-input]:focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui-text-field][data-part-root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui-text-field][data-part-root][data-invalid]:has(>[data-part-input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var( --slotted-control-focus-ring-offset, var(--slotted-focus-ring-offset, 2px) )}[data-ui-text-field][data-part-root][data-variant=plain][data-invalid]:has(>[data-part-input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui-text-field][data-part-root][data-readonly]{background-color:var( --slotted-text-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui-text-field][data-part-root][data-disabled],[data-ui-text-field][data-part-root]:has(>[data-part-input]:disabled){background-color:var( --slotted-text-field-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-text-field-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-text-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui-text-field][data-part-root][data-disabled]>[data-part-start],[data-ui-text-field][data-part-root][data-disabled]>[data-part-end]{color:var(--slotted-disabled-foreground)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], defaultFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFormat", required: false }] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], contrastWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "contrastWith", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], formatChange: [{ type: i0.Output, args: ["formatChange"] }] } });
 
 function sameColor(a, b) {
@@ -798,7 +849,9 @@ class SlColorField {
             slPopoverTrigger
             type="button"
             data-ui="color-picker"
+            data-ui-color-picker=""
             data-part="trigger"
+            data-part-trigger=""
             [attr.aria-label]="t('trigger')"
             [disabled]="resolvedDisabled()"
             [style.--slotted-color-picker-color]="css()"
@@ -836,7 +889,7 @@ class SlColorField {
         </div>
       </ng-template>
     </ng-container>
-  `, isInline: true, styles: ["@layer slotted.components{[data-ui=color-picker][data-part=root]{--_thumb: var(--slotted-color-picker-thumb-size, var(--slotted-space-6, 1rem));--_channel: var(--slotted-color-picker-channel-size, var(--slotted-space-5, .75rem));--_gap: var(--slotted-space-5, .75rem);--_radius: var(--slotted-radius-md, 6px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_color: var(--slotted-color-picker-color, transparent);--_opaque: var(--slotted-color-picker-opaque, transparent);--_hue: var(--slotted-color-picker-hue, 0);--_checker: repeating-conic-gradient( var(--slotted-surface-sunken, Canvas) 0 25%, var(--slotted-surface, Canvas) 0 50% ) 0 0 / var(--_channel) var(--_channel);box-sizing:border-box;color:var(--slotted-text, CanvasText);display:grid;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-control-font-size-md, 13px);gap:var(--_gap);inline-size:var(--slotted-color-picker-width, calc(var(--slotted-space-12, 4rem) * 4));max-inline-size:100%;min-inline-size:0}[data-ui=color-picker][data-part=root][data-size=sm]{--_gap: var(--slotted-space-4, .5rem);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);font-size:var(--slotted-control-font-size-sm, 12px)}[data-ui=color-picker][data-part=root][data-size=lg]{--_gap: var(--slotted-space-6, 1rem);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);font-size:var(--slotted-control-font-size-lg, 14px)}[data-ui=color-picker] [data-part=area]{aspect-ratio:3 / 2;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%);border-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:crosshair;position:relative;touch-action:none}[data-ui=color-picker] [data-part=area]:dir(rtl){background:linear-gradient(to top,#000,transparent),linear-gradient(to left,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%)}[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]){background:var(--_opaque);block-size:var(--_thumb);border:var(--slotted-border-width-medium, 2px) solid #fff;border-radius:var(--slotted-radius-full, 9999px);box-shadow:0 0 0 var(--slotted-border-width-thin, 1px) #0000003d,var(--slotted-shadow-sm, none);box-sizing:border-box;cursor:grab;inline-size:var(--_thumb);position:absolute;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard);translate:-50% -50%}[data-ui=color-picker] [data-part=area-thumb]{inset-block-start:calc((1 - var(--slotted-color-picker-y, 1)) * 100%);inset-inline-start:calc(var(--slotted-color-picker-x, 1) * 100%)}[data-ui=color-picker] [data-part=area-thumb]:dir(rtl){translate:50% -50%}[data-ui=color-picker] :is([data-part=area],[data-part=channel])[data-dragging]>:is([data-part=area-thumb],[data-part=channel-thumb]){cursor:grabbing;scale:1.15}[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=channel]{block-size:var(--_channel);border-radius:var(--slotted-radius-full, 9999px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;position:relative;touch-action:none}[data-ui=color-picker] [data-part=channel][data-channel=hue]{background:linear-gradient(to right,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui=color-picker] [data-part=channel][data-channel=alpha]{background:linear-gradient(to right,transparent,var(--_opaque)),var(--_checker)}[data-ui=color-picker] [data-part=channel][data-channel=hue]:dir(rtl){background:linear-gradient(to left,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui=color-picker] [data-part=channel][data-channel=alpha]:dir(rtl){background:linear-gradient(to left,transparent,var(--_opaque)),var(--_checker)}[data-ui=color-picker] [data-part=channel-thumb]{inset-block-start:50%}[data-ui=color-picker] [data-part=channel-thumb][data-channel=hue]{background:hsl(calc(var(--_hue) * 1deg) 100% 50%);inset-inline-start:calc(var(--_thumb) / 2 + var(--_hue) / 360 * (100% - var(--_thumb)))}[data-ui=color-picker] [data-part=channel-thumb][data-channel=alpha]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);inset-inline-start:calc(var(--_thumb) / 2 + var(--slotted-color-picker-alpha, 1) * (100% - var(--_thumb)))}[data-ui=color-picker] [data-part=channel-thumb]:dir(rtl){translate:50% -50%}[data-ui=color-picker] [data-part=row]{align-items:center;display:flex;gap:var(--slotted-space-3, .375rem);min-inline-size:0}[data-ui=color-picker] [data-part=swatch],[data-ui=color-picker] [data-part=previous]{appearance:none;block-size:var(--slotted-control-height-md, 34px);border:0;box-sizing:border-box;flex:0 0 auto;inline-size:calc(var(--slotted-control-height-md, 34px) * 3 / 4);margin:0;padding:0}[data-ui=color-picker] [data-part=swatch]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);border-end-start-radius:var(--_radius);border-start-start-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent)}[data-ui=color-picker] [data-part=swatch]:only-child,[data-ui=color-picker] [data-part=swatch]:not(:has(+[data-part=previous])){border-radius:var(--_radius)}[data-ui=color-picker] [data-part=previous]{background:linear-gradient(var(--slotted-color-picker-previous, transparent),var(--slotted-color-picker-previous, transparent)),var(--_checker);border-end-end-radius:var(--_radius);border-start-end-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin-inline-start:calc(var(--slotted-space-3, .375rem) * -1);position:relative;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=previous]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);color:#fff;filter:drop-shadow(0 0 1px rgb(0 0 0 / .6));inset:0;margin:auto;opacity:0;position:absolute;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=previous]:is(:hover,:focus-visible):not(:disabled)>[data-ui=icon]{opacity:1}[data-ui=color-picker] [data-part=previous]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=row]>[data-ui=text-field]{flex:1 1 0;inline-size:auto}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]){--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_inner-size);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-text-muted, GrayText);cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-variant-numeric:tabular-nums;gap:var(--slotted-space-2, .25rem);justify-content:center;min-inline-size:var(--_inner-size);padding:0;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=color-picker] [data-part=format]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem);text-transform:uppercase}[data-ui=color-picker] [data-part=format]{align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui=color-picker] [data-part=format]>[data-ui=icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):hover:not(:disabled,[aria-expanded=true]){background-color:var(--slotted-tone-secondary-subtle-hover)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):is(:active,[aria-expanded=true]):not(:disabled){background-color:var(--slotted-tone-secondary-subtle-active)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=color-picker] [data-part=presets]{display:grid;gap:var(--slotted-space-3, .375rem);grid-template-columns:repeat(auto-fill,minmax(calc(var(--_inner-size) - var(--slotted-space-2, 4px)),1fr))}[data-ui=color-picker] [data-part=preset]{appearance:none;aspect-ratio:1;background:linear-gradient(var(--slotted-color-picker-preset, transparent),var(--slotted-color-picker-preset, transparent)),var(--_checker);border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin:0;min-inline-size:0;padding:0;position:relative;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=preset]:hover:not(:disabled){scale:1.08}[data-ui=color-picker] [data-part=preset]:active:not(:disabled){scale:.94}[data-ui=color-picker] [data-part=preset][data-selected]{box-shadow:0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-surface-raised, Canvas),0 0 0 calc(var(--slotted-border-width-medium, 2px) * 2) var(--slotted-text, CanvasText)}[data-ui=color-picker] [data-part=preset]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=contrast]{align-items:center;display:flex;font-variant-numeric:tabular-nums;gap:var(--slotted-space-4, .5rem)}[data-ui=color-picker] [data-part=contrast-sample]{background:var(--slotted-color-picker-contrast-with, var(--slotted-surface, Canvas));block-size:var(--_inner-size);border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);color:var(--_color);display:inline-grid;font-weight:var(--slotted-font-weight-semibold, 600);inline-size:calc(var(--_inner-size) * 3 / 2);place-items:center}[data-ui=color-picker] [data-part=contrast-ratio]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=color-picker] [data-part=contrast-level]{border-radius:var(--slotted-radius-sm, 4px);font-size:var(--slotted-font-size-xs, 12px);font-weight:var(--slotted-font-weight-semibold, 600);margin-inline-start:auto;padding:var(--slotted-space-1, 2px) var(--slotted-space-3, .375rem)}[data-ui=color-picker] [data-part=contrast][data-level^=AA] [data-part=contrast-level]{background:var(--slotted-tone-success-surface, Canvas);color:var(--slotted-tone-success-text, CanvasText)}[data-ui=color-picker] [data-part=contrast][data-level=AA-large] [data-part=contrast-level]{background:var(--slotted-tone-warning-surface, Canvas);color:var(--slotted-tone-warning-text, CanvasText)}[data-ui=color-picker] [data-part=contrast][data-level=fail] [data-part=contrast-level]{background:var(--slotted-tone-danger-surface, Canvas);color:var(--slotted-tone-danger-text, CanvasText)}[data-ui=color-picker] [data-part=gamut]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-tone-warning-text, CanvasText);display:flex;font-size:var(--slotted-font-size-xs, 12px);gap:var(--slotted-space-2, .25rem)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]{appearance:none;background:linear-gradient(var(--_color, transparent),var(--_color, transparent)),repeating-conic-gradient(var(--slotted-surface-sunken, Canvas) 0 25%,var(--slotted-surface, Canvas) 0 50%) 0 0 / 8px 8px;block-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;flex:0 0 auto;inline-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));padding:0;position:relative;transition:box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);--_color: var(--slotted-color-picker-color, transparent)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:hover:not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-hover)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:is(:active,[aria-expanded=true]):not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-active)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker][data-part=root][data-disabled]{color:var(--slotted-disabled-foreground)}[data-ui=color-picker][data-part=root][data-disabled] :is([data-part=area],[data-part=channel],[data-part=presets]){filter:grayscale(1);pointer-events:none}[data-ui=color-picker][data-part=root][data-disabled] :is([data-part=area-thumb],[data-part=channel-thumb]){cursor:not-allowed}[data-ui=color-picker][data-part=root][data-readonly] :is([data-part=area],[data-part=channel],[data-part=preset],[data-part=area-thumb],[data-part=channel-thumb]){cursor:default}@media(forced-colors:active){[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]){border-color:CanvasText;forced-color-adjust:none}[data-ui=color-picker] :is([data-part=area],[data-part=channel],[data-part=swatch],[data-part=previous],[data-part=preset]){forced-color-adjust:none}}}\n"], dependencies: [{ kind: "component", type: SlColorPicker, selector: "div[slColorPicker]", inputs: ["value", "defaultValue", "format", "defaultFormat", "alpha", "presets", "contrastWith", "size", "disabled", "readOnly", "invalid", "messages"], outputs: ["valueChange", "formatChange"], exportAs: ["slColorPicker"] }, { kind: "directive", type: SlPopover, selector: "[slPopover]", inputs: ["open", "defaultOpen", "disabled", "size", "width", "side", "align", "mount", "strategy", "messages", "initialFocus", "finalFocus", "arrow", "autoFocus", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "sideOffset", "alignOffset", "collisionPadding", "arrowPadding"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slPopover"] }, { kind: "directive", type: SlPopoverAnchor, selector: "[slPopoverAnchor]", exportAs: ["slPopoverAnchor"] }, { kind: "directive", type: SlPopoverBody, selector: "[slPopoverBody]", exportAs: ["slPopoverBody"] }, { kind: "component", type: SlPopoverContent, selector: "[slPopoverContent]", exportAs: ["slPopoverContent"] }, { kind: "directive", type: SlPopoverLayer, selector: "ng-template[slPopoverLayer]", exportAs: ["slPopoverLayer"] }, { kind: "directive", type: SlPopoverTrigger, selector: "[slPopoverTrigger]", exportAs: ["slPopoverTrigger"] }, { kind: "component", type: SlTextField, selector: "[slTextField]", inputs: ["size", "variant", "mono", "clearable", "revealable", "copyable", "messages", "loading"], outputs: ["valueCopy"], exportAs: ["slTextField"] }, { kind: "directive", type: SlTextFieldInput, selector: "input[slTextFieldInput]", inputs: ["value", "defaultValue", "disabled", "readOnly", "invalid", "showCount", "countMax", "revealed", "defaultRevealed", "type"], outputs: ["valueChange", "revealedChange"], exportAs: ["slTextFieldInput"] }, { kind: "directive", type: SlTextFieldStart, selector: "[slTextFieldStart]", exportAs: ["slTextFieldStart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui-color-picker][data-part-root]{--_thumb: var(--slotted-color-picker-thumb-size, var(--slotted-space-6, 1rem));--_channel: var(--slotted-color-picker-channel-size, var(--slotted-space-5, .75rem));--_gap: var(--slotted-space-5, .75rem);--_radius: var(--slotted-radius-md, 6px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_color: var(--slotted-color-picker-color, transparent);--_opaque: var(--slotted-color-picker-opaque, transparent);--_hue: var(--slotted-color-picker-hue, 0);--_checker: repeating-conic-gradient( var(--slotted-surface-sunken, Canvas) 0 25%, var(--slotted-surface, Canvas) 0 50% ) 0 0 / var(--_channel) var(--_channel);box-sizing:border-box;color:var(--slotted-text, CanvasText);display:grid;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-control-font-size-md, 13px);gap:var(--_gap);inline-size:var(--slotted-color-picker-width, calc(var(--slotted-space-12, 4rem) * 4));max-inline-size:100%;min-inline-size:0}[data-ui-color-picker][data-part-root][data-size=sm]{--_gap: var(--slotted-space-4, .5rem);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);font-size:var(--slotted-control-font-size-sm, 12px)}[data-ui-color-picker][data-part-root][data-size=lg]{--_gap: var(--slotted-space-6, 1rem);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);font-size:var(--slotted-control-font-size-lg, 14px)}[data-ui-color-picker] [data-part-area]{aspect-ratio:3 / 2;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%);border-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:crosshair;position:relative;touch-action:none}[data-ui-color-picker] [data-part-area]:dir(rtl){background:linear-gradient(to top,#000,transparent),linear-gradient(to left,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%)}[data-ui-color-picker] :is([data-part-area-thumb],[data-part-channel-thumb]){background:var(--_opaque);block-size:var(--_thumb);border:var(--slotted-border-width-medium, 2px) solid #fff;border-radius:var(--slotted-radius-full, 9999px);box-shadow:0 0 0 var(--slotted-border-width-thin, 1px) #0000003d,var(--slotted-shadow-sm, none);box-sizing:border-box;cursor:grab;inline-size:var(--_thumb);position:absolute;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard);translate:-50% -50%}[data-ui-color-picker] [data-part-area-thumb]{inset-block-start:calc((1 - var(--slotted-color-picker-y, 1)) * 100%);inset-inline-start:calc(var(--slotted-color-picker-x, 1) * 100%)}[data-ui-color-picker] [data-part-area-thumb]:dir(rtl){translate:50% -50%}[data-ui-color-picker] :is([data-part-area],[data-part-channel])[data-dragging]>:is([data-part-area-thumb],[data-part-channel-thumb]){cursor:grabbing;scale:1.15}[data-ui-color-picker] :is([data-part-area-thumb],[data-part-channel-thumb]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-color-picker] [data-part-channel]{block-size:var(--_channel);border-radius:var(--slotted-radius-full, 9999px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;position:relative;touch-action:none}[data-ui-color-picker] [data-part-channel][data-channel=hue]{background:linear-gradient(to right,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui-color-picker] [data-part-channel][data-channel=alpha]{background:linear-gradient(to right,transparent,var(--_opaque)),var(--_checker)}[data-ui-color-picker] [data-part-channel][data-channel=hue]:dir(rtl){background:linear-gradient(to left,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui-color-picker] [data-part-channel][data-channel=alpha]:dir(rtl){background:linear-gradient(to left,transparent,var(--_opaque)),var(--_checker)}[data-ui-color-picker] [data-part-channel-thumb]{inset-block-start:50%}[data-ui-color-picker] [data-part-channel-thumb][data-channel=hue]{background:hsl(calc(var(--_hue) * 1deg) 100% 50%);inset-inline-start:calc(var(--_thumb) / 2 + var(--_hue) / 360 * (100% - var(--_thumb)))}[data-ui-color-picker] [data-part-channel-thumb][data-channel=alpha]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);inset-inline-start:calc(var(--_thumb) / 2 + var(--slotted-color-picker-alpha, 1) * (100% - var(--_thumb)))}[data-ui-color-picker] [data-part-channel-thumb]:dir(rtl){translate:50% -50%}[data-ui-color-picker] [data-part-row]{align-items:center;display:flex;gap:var(--slotted-space-3, .375rem);min-inline-size:0}[data-ui-color-picker] [data-part-swatch],[data-ui-color-picker] [data-part-previous]{appearance:none;block-size:var(--slotted-control-height-md, 34px);border:0;box-sizing:border-box;flex:0 0 auto;inline-size:calc(var(--slotted-control-height-md, 34px) * 3 / 4);margin:0;padding:0}[data-ui-color-picker] [data-part-swatch]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);border-end-start-radius:var(--_radius);border-start-start-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent)}[data-ui-color-picker] [data-part-swatch]:only-child,[data-ui-color-picker] [data-part-swatch]:not(:has(+[data-part-previous])){border-radius:var(--_radius)}[data-ui-color-picker] [data-part-previous]{background:linear-gradient(var(--slotted-color-picker-previous, transparent),var(--slotted-color-picker-previous, transparent)),var(--_checker);border-end-end-radius:var(--_radius);border-start-end-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin-inline-start:calc(var(--slotted-space-3, .375rem) * -1);position:relative;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui-color-picker] [data-part-previous]>[data-ui-icon]{--slotted-icon-size: var(--_icon-size);color:#fff;filter:drop-shadow(0 0 1px rgb(0 0 0 / .6));inset:0;margin:auto;opacity:0;position:absolute;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui-color-picker] [data-part-previous]:is(:hover,:focus-visible):not(:disabled)>[data-ui-icon]{opacity:1}[data-ui-color-picker] [data-part-previous]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-color-picker] [data-part-row]>[data-ui-text-field]{flex:1 1 0;inline-size:auto}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]){--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_inner-size);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-text-muted, GrayText);cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-variant-numeric:tabular-nums;gap:var(--slotted-space-2, .25rem);justify-content:center;min-inline-size:var(--_inner-size);padding:0;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-color-picker] [data-part-format]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem);text-transform:uppercase}[data-ui-color-picker] [data-part-format]{align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui-color-picker] [data-part-format]>[data-ui-icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):hover:not(:disabled,[aria-expanded=true]){background-color:var(--slotted-tone-secondary-subtle-hover)}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):is(:active,[aria-expanded=true]):not(:disabled){background-color:var(--slotted-tone-secondary-subtle-active)}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-color-picker] [data-part-presets]{display:grid;gap:var(--slotted-space-3, .375rem);grid-template-columns:repeat(auto-fill,minmax(calc(var(--_inner-size) - var(--slotted-space-2, 4px)),1fr))}[data-ui-color-picker] [data-part-preset]{appearance:none;aspect-ratio:1;background:linear-gradient(var(--slotted-color-picker-preset, transparent),var(--slotted-color-picker-preset, transparent)),var(--_checker);border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin:0;min-inline-size:0;padding:0;position:relative;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui-color-picker] [data-part-preset]:hover:not(:disabled){scale:1.08}[data-ui-color-picker] [data-part-preset]:active:not(:disabled){scale:.94}[data-ui-color-picker] [data-part-preset][data-selected]{box-shadow:0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-surface-raised, Canvas),0 0 0 calc(var(--slotted-border-width-medium, 2px) * 2) var(--slotted-text, CanvasText)}[data-ui-color-picker] [data-part-preset]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-color-picker] [data-part-contrast]{align-items:center;display:flex;font-variant-numeric:tabular-nums;gap:var(--slotted-space-4, .5rem)}[data-ui-color-picker] [data-part-contrast-sample]{background:var(--slotted-color-picker-contrast-with, var(--slotted-surface, Canvas));block-size:var(--_inner-size);border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);color:var(--_color);display:inline-grid;font-weight:var(--slotted-font-weight-semibold, 600);inline-size:calc(var(--_inner-size) * 3 / 2);place-items:center}[data-ui-color-picker] [data-part-contrast-ratio]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui-color-picker] [data-part-contrast-level]{border-radius:var(--slotted-radius-sm, 4px);font-size:var(--slotted-font-size-xs, 12px);font-weight:var(--slotted-font-weight-semibold, 600);margin-inline-start:auto;padding:var(--slotted-space-1, 2px) var(--slotted-space-3, .375rem)}[data-ui-color-picker] [data-part-contrast][data-level^=AA] [data-part-contrast-level]{background:var(--slotted-tone-success-surface, Canvas);color:var(--slotted-tone-success-text, CanvasText)}[data-ui-color-picker] [data-part-contrast][data-level=AA-large] [data-part-contrast-level]{background:var(--slotted-tone-warning-surface, Canvas);color:var(--slotted-tone-warning-text, CanvasText)}[data-ui-color-picker] [data-part-contrast][data-level=fail] [data-part-contrast-level]{background:var(--slotted-tone-danger-surface, Canvas);color:var(--slotted-tone-danger-text, CanvasText)}[data-ui-color-picker] [data-part-gamut]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-tone-warning-text, CanvasText);display:flex;font-size:var(--slotted-font-size-xs, 12px);gap:var(--slotted-space-2, .25rem)}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]{appearance:none;background:linear-gradient(var(--_color, transparent),var(--_color, transparent)),repeating-conic-gradient(var(--slotted-surface-sunken, Canvas) 0 25%,var(--slotted-surface, Canvas) 0 50%) 0 0 / 8px 8px;block-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;flex:0 0 auto;inline-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));padding:0;position:relative;transition:box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);--_color: var(--slotted-color-picker-color, transparent)}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]:hover:not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-hover)}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]:is(:active,[aria-expanded=true]):not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-active)}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-color-picker][data-part-root][data-disabled]{color:var(--slotted-disabled-foreground)}[data-ui-color-picker][data-part-root][data-disabled] :is([data-part-area],[data-part-channel],[data-part-presets]){filter:grayscale(1);pointer-events:none}[data-ui-color-picker][data-part-root][data-disabled] :is([data-part-area-thumb],[data-part-channel-thumb]){cursor:not-allowed}[data-ui-color-picker][data-part-root][data-readonly] :is([data-part-area],[data-part-channel],[data-part-preset],[data-part-area-thumb],[data-part-channel-thumb]){cursor:default}@media(forced-colors:active){[data-ui-color-picker] :is([data-part-area-thumb],[data-part-channel-thumb]){border-color:CanvasText;forced-color-adjust:none}[data-ui-color-picker] :is([data-part-area],[data-part-channel],[data-part-swatch],[data-part-previous],[data-part-preset]){forced-color-adjust:none}}}\n"], dependencies: [{ kind: "component", type: SlColorPicker, selector: "div[slColorPicker]", inputs: ["value", "defaultValue", "format", "defaultFormat", "alpha", "presets", "contrastWith", "size", "disabled", "readOnly", "invalid", "messages"], outputs: ["valueChange", "formatChange"], exportAs: ["slColorPicker"] }, { kind: "directive", type: SlPopover, selector: "[slPopover]", inputs: ["open", "defaultOpen", "disabled", "size", "width", "side", "align", "mount", "strategy", "messages", "initialFocus", "finalFocus", "arrow", "autoFocus", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "sideOffset", "alignOffset", "collisionPadding", "arrowPadding"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slPopover"] }, { kind: "directive", type: SlPopoverAnchor, selector: "[slPopoverAnchor]", exportAs: ["slPopoverAnchor"] }, { kind: "directive", type: SlPopoverBody, selector: "[slPopoverBody]", exportAs: ["slPopoverBody"] }, { kind: "component", type: SlPopoverContent, selector: "[slPopoverContent]", exportAs: ["slPopoverContent"] }, { kind: "directive", type: SlPopoverLayer, selector: "ng-template[slPopoverLayer]", exportAs: ["slPopoverLayer"] }, { kind: "directive", type: SlPopoverTrigger, selector: "[slPopoverTrigger]", exportAs: ["slPopoverTrigger"] }, { kind: "component", type: SlTextField, selector: "[slTextField]", inputs: ["size", "variant", "mono", "clearable", "revealable", "copyable", "messages", "loading"], outputs: ["valueCopy"], exportAs: ["slTextField"] }, { kind: "directive", type: SlTextFieldInput, selector: "input[slTextFieldInput]", inputs: ["value", "defaultValue", "disabled", "readOnly", "invalid", "showCount", "countMax", "revealed", "defaultRevealed", "type"], outputs: ["valueChange", "revealedChange"], exportAs: ["slTextFieldInput"] }, { kind: "directive", type: SlTextFieldStart, selector: "[slTextFieldStart]", exportAs: ["slTextFieldStart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColorField, decorators: [{
             type: Component,
@@ -861,7 +914,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             slPopoverTrigger
             type="button"
             data-ui="color-picker"
+            data-ui-color-picker=""
             data-part="trigger"
+            data-part-trigger=""
             [attr.aria-label]="t('trigger')"
             [disabled]="resolvedDisabled()"
             [style.--slotted-color-picker-color]="css()"
@@ -899,7 +954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         </div>
       </ng-template>
     </ng-container>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[attr.aria-label]': 'null' }, styles: ["@layer slotted.components{[data-ui=color-picker][data-part=root]{--_thumb: var(--slotted-color-picker-thumb-size, var(--slotted-space-6, 1rem));--_channel: var(--slotted-color-picker-channel-size, var(--slotted-space-5, .75rem));--_gap: var(--slotted-space-5, .75rem);--_radius: var(--slotted-radius-md, 6px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_color: var(--slotted-color-picker-color, transparent);--_opaque: var(--slotted-color-picker-opaque, transparent);--_hue: var(--slotted-color-picker-hue, 0);--_checker: repeating-conic-gradient( var(--slotted-surface-sunken, Canvas) 0 25%, var(--slotted-surface, Canvas) 0 50% ) 0 0 / var(--_channel) var(--_channel);box-sizing:border-box;color:var(--slotted-text, CanvasText);display:grid;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-control-font-size-md, 13px);gap:var(--_gap);inline-size:var(--slotted-color-picker-width, calc(var(--slotted-space-12, 4rem) * 4));max-inline-size:100%;min-inline-size:0}[data-ui=color-picker][data-part=root][data-size=sm]{--_gap: var(--slotted-space-4, .5rem);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);font-size:var(--slotted-control-font-size-sm, 12px)}[data-ui=color-picker][data-part=root][data-size=lg]{--_gap: var(--slotted-space-6, 1rem);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);font-size:var(--slotted-control-font-size-lg, 14px)}[data-ui=color-picker] [data-part=area]{aspect-ratio:3 / 2;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%);border-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:crosshair;position:relative;touch-action:none}[data-ui=color-picker] [data-part=area]:dir(rtl){background:linear-gradient(to top,#000,transparent),linear-gradient(to left,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%)}[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]){background:var(--_opaque);block-size:var(--_thumb);border:var(--slotted-border-width-medium, 2px) solid #fff;border-radius:var(--slotted-radius-full, 9999px);box-shadow:0 0 0 var(--slotted-border-width-thin, 1px) #0000003d,var(--slotted-shadow-sm, none);box-sizing:border-box;cursor:grab;inline-size:var(--_thumb);position:absolute;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard);translate:-50% -50%}[data-ui=color-picker] [data-part=area-thumb]{inset-block-start:calc((1 - var(--slotted-color-picker-y, 1)) * 100%);inset-inline-start:calc(var(--slotted-color-picker-x, 1) * 100%)}[data-ui=color-picker] [data-part=area-thumb]:dir(rtl){translate:50% -50%}[data-ui=color-picker] :is([data-part=area],[data-part=channel])[data-dragging]>:is([data-part=area-thumb],[data-part=channel-thumb]){cursor:grabbing;scale:1.15}[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=channel]{block-size:var(--_channel);border-radius:var(--slotted-radius-full, 9999px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;position:relative;touch-action:none}[data-ui=color-picker] [data-part=channel][data-channel=hue]{background:linear-gradient(to right,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui=color-picker] [data-part=channel][data-channel=alpha]{background:linear-gradient(to right,transparent,var(--_opaque)),var(--_checker)}[data-ui=color-picker] [data-part=channel][data-channel=hue]:dir(rtl){background:linear-gradient(to left,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui=color-picker] [data-part=channel][data-channel=alpha]:dir(rtl){background:linear-gradient(to left,transparent,var(--_opaque)),var(--_checker)}[data-ui=color-picker] [data-part=channel-thumb]{inset-block-start:50%}[data-ui=color-picker] [data-part=channel-thumb][data-channel=hue]{background:hsl(calc(var(--_hue) * 1deg) 100% 50%);inset-inline-start:calc(var(--_thumb) / 2 + var(--_hue) / 360 * (100% - var(--_thumb)))}[data-ui=color-picker] [data-part=channel-thumb][data-channel=alpha]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);inset-inline-start:calc(var(--_thumb) / 2 + var(--slotted-color-picker-alpha, 1) * (100% - var(--_thumb)))}[data-ui=color-picker] [data-part=channel-thumb]:dir(rtl){translate:50% -50%}[data-ui=color-picker] [data-part=row]{align-items:center;display:flex;gap:var(--slotted-space-3, .375rem);min-inline-size:0}[data-ui=color-picker] [data-part=swatch],[data-ui=color-picker] [data-part=previous]{appearance:none;block-size:var(--slotted-control-height-md, 34px);border:0;box-sizing:border-box;flex:0 0 auto;inline-size:calc(var(--slotted-control-height-md, 34px) * 3 / 4);margin:0;padding:0}[data-ui=color-picker] [data-part=swatch]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);border-end-start-radius:var(--_radius);border-start-start-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent)}[data-ui=color-picker] [data-part=swatch]:only-child,[data-ui=color-picker] [data-part=swatch]:not(:has(+[data-part=previous])){border-radius:var(--_radius)}[data-ui=color-picker] [data-part=previous]{background:linear-gradient(var(--slotted-color-picker-previous, transparent),var(--slotted-color-picker-previous, transparent)),var(--_checker);border-end-end-radius:var(--_radius);border-start-end-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin-inline-start:calc(var(--slotted-space-3, .375rem) * -1);position:relative;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=previous]>[data-ui=icon]{--slotted-icon-size: var(--_icon-size);color:#fff;filter:drop-shadow(0 0 1px rgb(0 0 0 / .6));inset:0;margin:auto;opacity:0;position:absolute;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=previous]:is(:hover,:focus-visible):not(:disabled)>[data-ui=icon]{opacity:1}[data-ui=color-picker] [data-part=previous]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=row]>[data-ui=text-field]{flex:1 1 0;inline-size:auto}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]){--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_inner-size);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-text-muted, GrayText);cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-variant-numeric:tabular-nums;gap:var(--slotted-space-2, .25rem);justify-content:center;min-inline-size:var(--_inner-size);padding:0;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=color-picker] [data-part=format]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem);text-transform:uppercase}[data-ui=color-picker] [data-part=format]{align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui=color-picker] [data-part=format]>[data-ui=icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):hover:not(:disabled,[aria-expanded=true]){background-color:var(--slotted-tone-secondary-subtle-hover)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):is(:active,[aria-expanded=true]):not(:disabled){background-color:var(--slotted-tone-secondary-subtle-active)}[data-ui=color-picker] :is([data-part=format],[data-part=eyedropper]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=color-picker] [data-part=presets]{display:grid;gap:var(--slotted-space-3, .375rem);grid-template-columns:repeat(auto-fill,minmax(calc(var(--_inner-size) - var(--slotted-space-2, 4px)),1fr))}[data-ui=color-picker] [data-part=preset]{appearance:none;aspect-ratio:1;background:linear-gradient(var(--slotted-color-picker-preset, transparent),var(--slotted-color-picker-preset, transparent)),var(--_checker);border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin:0;min-inline-size:0;padding:0;position:relative;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui=color-picker] [data-part=preset]:hover:not(:disabled){scale:1.08}[data-ui=color-picker] [data-part=preset]:active:not(:disabled){scale:.94}[data-ui=color-picker] [data-part=preset][data-selected]{box-shadow:0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-surface-raised, Canvas),0 0 0 calc(var(--slotted-border-width-medium, 2px) * 2) var(--slotted-text, CanvasText)}[data-ui=color-picker] [data-part=preset]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker] [data-part=contrast]{align-items:center;display:flex;font-variant-numeric:tabular-nums;gap:var(--slotted-space-4, .5rem)}[data-ui=color-picker] [data-part=contrast-sample]{background:var(--slotted-color-picker-contrast-with, var(--slotted-surface, Canvas));block-size:var(--_inner-size);border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);color:var(--_color);display:inline-grid;font-weight:var(--slotted-font-weight-semibold, 600);inline-size:calc(var(--_inner-size) * 3 / 2);place-items:center}[data-ui=color-picker] [data-part=contrast-ratio]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=color-picker] [data-part=contrast-level]{border-radius:var(--slotted-radius-sm, 4px);font-size:var(--slotted-font-size-xs, 12px);font-weight:var(--slotted-font-weight-semibold, 600);margin-inline-start:auto;padding:var(--slotted-space-1, 2px) var(--slotted-space-3, .375rem)}[data-ui=color-picker] [data-part=contrast][data-level^=AA] [data-part=contrast-level]{background:var(--slotted-tone-success-surface, Canvas);color:var(--slotted-tone-success-text, CanvasText)}[data-ui=color-picker] [data-part=contrast][data-level=AA-large] [data-part=contrast-level]{background:var(--slotted-tone-warning-surface, Canvas);color:var(--slotted-tone-warning-text, CanvasText)}[data-ui=color-picker] [data-part=contrast][data-level=fail] [data-part=contrast-level]{background:var(--slotted-tone-danger-surface, Canvas);color:var(--slotted-tone-danger-text, CanvasText)}[data-ui=color-picker] [data-part=gamut]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-tone-warning-text, CanvasText);display:flex;font-size:var(--slotted-font-size-xs, 12px);gap:var(--slotted-space-2, .25rem)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]{appearance:none;background:linear-gradient(var(--_color, transparent),var(--_color, transparent)),repeating-conic-gradient(var(--slotted-surface-sunken, Canvas) 0 25%,var(--slotted-surface, Canvas) 0 50%) 0 0 / 8px 8px;block-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;flex:0 0 auto;inline-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));padding:0;position:relative;transition:box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);--_color: var(--slotted-color-picker-color, transparent)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:hover:not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-hover)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:is(:active,[aria-expanded=true]):not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-active)}[data-ui=text-field] [data-ui=color-picker][data-part=trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=color-picker][data-part=root][data-disabled]{color:var(--slotted-disabled-foreground)}[data-ui=color-picker][data-part=root][data-disabled] :is([data-part=area],[data-part=channel],[data-part=presets]){filter:grayscale(1);pointer-events:none}[data-ui=color-picker][data-part=root][data-disabled] :is([data-part=area-thumb],[data-part=channel-thumb]){cursor:not-allowed}[data-ui=color-picker][data-part=root][data-readonly] :is([data-part=area],[data-part=channel],[data-part=preset],[data-part=area-thumb],[data-part=channel-thumb]){cursor:default}@media(forced-colors:active){[data-ui=color-picker] :is([data-part=area-thumb],[data-part=channel-thumb]){border-color:CanvasText;forced-color-adjust:none}[data-ui=color-picker] :is([data-part=area],[data-part=channel],[data-part=swatch],[data-part=previous],[data-part=preset]){forced-color-adjust:none}}}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[attr.aria-label]': 'null' }, styles: ["@layer slotted.components{[data-ui-color-picker][data-part-root]{--_thumb: var(--slotted-color-picker-thumb-size, var(--slotted-space-6, 1rem));--_channel: var(--slotted-color-picker-channel-size, var(--slotted-space-5, .75rem));--_gap: var(--slotted-space-5, .75rem);--_radius: var(--slotted-radius-md, 6px);--_inner-size: var(--slotted-control-inner-size-md, 24px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_color: var(--slotted-color-picker-color, transparent);--_opaque: var(--slotted-color-picker-opaque, transparent);--_hue: var(--slotted-color-picker-hue, 0);--_checker: repeating-conic-gradient( var(--slotted-surface-sunken, Canvas) 0 25%, var(--slotted-surface, Canvas) 0 50% ) 0 0 / var(--_channel) var(--_channel);box-sizing:border-box;color:var(--slotted-text, CanvasText);display:grid;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--slotted-control-font-size-md, 13px);gap:var(--_gap);inline-size:var(--slotted-color-picker-width, calc(var(--slotted-space-12, 4rem) * 4));max-inline-size:100%;min-inline-size:0}[data-ui-color-picker][data-part-root][data-size=sm]{--_gap: var(--slotted-space-4, .5rem);--_inner-size: var(--slotted-control-inner-size-sm, 22px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);font-size:var(--slotted-control-font-size-sm, 12px)}[data-ui-color-picker][data-part-root][data-size=lg]{--_gap: var(--slotted-space-6, 1rem);--_inner-size: var(--slotted-control-inner-size-lg, 28px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);font-size:var(--slotted-control-font-size-lg, 14px)}[data-ui-color-picker] [data-part-area]{aspect-ratio:3 / 2;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%);border-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:crosshair;position:relative;touch-action:none}[data-ui-color-picker] [data-part-area]:dir(rtl){background:linear-gradient(to top,#000,transparent),linear-gradient(to left,#fff,transparent),hsl(calc(var(--_hue) * 1deg) 100% 50%)}[data-ui-color-picker] :is([data-part-area-thumb],[data-part-channel-thumb]){background:var(--_opaque);block-size:var(--_thumb);border:var(--slotted-border-width-medium, 2px) solid #fff;border-radius:var(--slotted-radius-full, 9999px);box-shadow:0 0 0 var(--slotted-border-width-thin, 1px) #0000003d,var(--slotted-shadow-sm, none);box-sizing:border-box;cursor:grab;inline-size:var(--_thumb);position:absolute;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard);translate:-50% -50%}[data-ui-color-picker] [data-part-area-thumb]{inset-block-start:calc((1 - var(--slotted-color-picker-y, 1)) * 100%);inset-inline-start:calc(var(--slotted-color-picker-x, 1) * 100%)}[data-ui-color-picker] [data-part-area-thumb]:dir(rtl){translate:50% -50%}[data-ui-color-picker] :is([data-part-area],[data-part-channel])[data-dragging]>:is([data-part-area-thumb],[data-part-channel-thumb]){cursor:grabbing;scale:1.15}[data-ui-color-picker] :is([data-part-area-thumb],[data-part-channel-thumb]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-color-picker] [data-part-channel]{block-size:var(--_channel);border-radius:var(--slotted-radius-full, 9999px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;position:relative;touch-action:none}[data-ui-color-picker] [data-part-channel][data-channel=hue]{background:linear-gradient(to right,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui-color-picker] [data-part-channel][data-channel=alpha]{background:linear-gradient(to right,transparent,var(--_opaque)),var(--_checker)}[data-ui-color-picker] [data-part-channel][data-channel=hue]:dir(rtl){background:linear-gradient(to left,red,#ffbf00 12.5%,#ffef00,#dfff00 18.75%,#7fff00,#20ff00 31.25%,#00ff10,#00ff40 37.5%,#0ff,#0040ff 62.5%,#0010ff,#2000ff 68.75%,#7f00ff,#df00ff 81.25%,#ff00ef,#ff00bf 87.5%,red)}[data-ui-color-picker] [data-part-channel][data-channel=alpha]:dir(rtl){background:linear-gradient(to left,transparent,var(--_opaque)),var(--_checker)}[data-ui-color-picker] [data-part-channel-thumb]{inset-block-start:50%}[data-ui-color-picker] [data-part-channel-thumb][data-channel=hue]{background:hsl(calc(var(--_hue) * 1deg) 100% 50%);inset-inline-start:calc(var(--_thumb) / 2 + var(--_hue) / 360 * (100% - var(--_thumb)))}[data-ui-color-picker] [data-part-channel-thumb][data-channel=alpha]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);inset-inline-start:calc(var(--_thumb) / 2 + var(--slotted-color-picker-alpha, 1) * (100% - var(--_thumb)))}[data-ui-color-picker] [data-part-channel-thumb]:dir(rtl){translate:50% -50%}[data-ui-color-picker] [data-part-row]{align-items:center;display:flex;gap:var(--slotted-space-3, .375rem);min-inline-size:0}[data-ui-color-picker] [data-part-swatch],[data-ui-color-picker] [data-part-previous]{appearance:none;block-size:var(--slotted-control-height-md, 34px);border:0;box-sizing:border-box;flex:0 0 auto;inline-size:calc(var(--slotted-control-height-md, 34px) * 3 / 4);margin:0;padding:0}[data-ui-color-picker] [data-part-swatch]{background:linear-gradient(var(--_color),var(--_color)),var(--_checker);border-end-start-radius:var(--_radius);border-start-start-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent)}[data-ui-color-picker] [data-part-swatch]:only-child,[data-ui-color-picker] [data-part-swatch]:not(:has(+[data-part-previous])){border-radius:var(--_radius)}[data-ui-color-picker] [data-part-previous]{background:linear-gradient(var(--slotted-color-picker-previous, transparent),var(--slotted-color-picker-previous, transparent)),var(--_checker);border-end-end-radius:var(--_radius);border-start-end-radius:var(--_radius);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin-inline-start:calc(var(--slotted-space-3, .375rem) * -1);position:relative;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui-color-picker] [data-part-previous]>[data-ui-icon]{--slotted-icon-size: var(--_icon-size);color:#fff;filter:drop-shadow(0 0 1px rgb(0 0 0 / .6));inset:0;margin:auto;opacity:0;position:absolute;transition:opacity var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui-color-picker] [data-part-previous]:is(:hover,:focus-visible):not(:disabled)>[data-ui-icon]{opacity:1}[data-ui-color-picker] [data-part-previous]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-color-picker] [data-part-row]>[data-ui-text-field]{flex:1 1 0;inline-size:auto}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]){--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_inner-size);border:0;border-radius:var(--slotted-control-radius, 4px);color:var(--slotted-text-muted, GrayText);cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;font-variant-numeric:tabular-nums;gap:var(--slotted-space-2, .25rem);justify-content:center;min-inline-size:var(--_inner-size);padding:0;position:relative;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-color-picker] [data-part-format]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem);text-transform:uppercase}[data-ui-color-picker] [data-part-format]{align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui-color-picker] [data-part-format]>[data-ui-icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):hover:not(:disabled,[aria-expanded=true]){background-color:var(--slotted-tone-secondary-subtle-hover)}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):is(:active,[aria-expanded=true]):not(:disabled){background-color:var(--slotted-tone-secondary-subtle-active)}[data-ui-color-picker] :is([data-part-format],[data-part-eyedropper]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-color-picker] [data-part-presets]{display:grid;gap:var(--slotted-space-3, .375rem);grid-template-columns:repeat(auto-fill,minmax(calc(var(--_inner-size) - var(--slotted-space-2, 4px)),1fr))}[data-ui-color-picker] [data-part-preset]{appearance:none;aspect-ratio:1;background:linear-gradient(var(--slotted-color-picker-preset, transparent),var(--slotted-color-picker-preset, transparent)),var(--_checker);border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;margin:0;min-inline-size:0;padding:0;position:relative;transition:scale var(--slotted-duration-short) var(--slotted-easing-standard),box-shadow var(--slotted-duration-short) var(--slotted-easing-standard)}[data-ui-color-picker] [data-part-preset]:hover:not(:disabled){scale:1.08}[data-ui-color-picker] [data-part-preset]:active:not(:disabled){scale:.94}[data-ui-color-picker] [data-part-preset][data-selected]{box-shadow:0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-surface-raised, Canvas),0 0 0 calc(var(--slotted-border-width-medium, 2px) * 2) var(--slotted-text, CanvasText)}[data-ui-color-picker] [data-part-preset]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-color-picker] [data-part-contrast]{align-items:center;display:flex;font-variant-numeric:tabular-nums;gap:var(--slotted-space-4, .5rem)}[data-ui-color-picker] [data-part-contrast-sample]{background:var(--slotted-color-picker-contrast-with, var(--slotted-surface, Canvas));block-size:var(--_inner-size);border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);color:var(--_color);display:inline-grid;font-weight:var(--slotted-font-weight-semibold, 600);inline-size:calc(var(--_inner-size) * 3 / 2);place-items:center}[data-ui-color-picker] [data-part-contrast-ratio]{color:var(--slotted-text, CanvasText);font-weight:var(--slotted-font-weight-medium, 500)}[data-ui-color-picker] [data-part-contrast-level]{border-radius:var(--slotted-radius-sm, 4px);font-size:var(--slotted-font-size-xs, 12px);font-weight:var(--slotted-font-weight-semibold, 600);margin-inline-start:auto;padding:var(--slotted-space-1, 2px) var(--slotted-space-3, .375rem)}[data-ui-color-picker] [data-part-contrast][data-level^=AA] [data-part-contrast-level]{background:var(--slotted-tone-success-surface, Canvas);color:var(--slotted-tone-success-text, CanvasText)}[data-ui-color-picker] [data-part-contrast][data-level=AA-large] [data-part-contrast-level]{background:var(--slotted-tone-warning-surface, Canvas);color:var(--slotted-tone-warning-text, CanvasText)}[data-ui-color-picker] [data-part-contrast][data-level=fail] [data-part-contrast-level]{background:var(--slotted-tone-danger-surface, Canvas);color:var(--slotted-tone-danger-text, CanvasText)}[data-ui-color-picker] [data-part-gamut]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-tone-warning-text, CanvasText);display:flex;font-size:var(--slotted-font-size-xs, 12px);gap:var(--slotted-space-2, .25rem)}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]{appearance:none;background:linear-gradient(var(--_color, transparent),var(--_color, transparent)),repeating-conic-gradient(var(--slotted-surface-sunken, Canvas) 0 25%,var(--slotted-surface, Canvas) 0 50%) 0 0 / 8px 8px;block-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));border:0;border-radius:var(--slotted-radius-sm, 4px);box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent);cursor:pointer;flex:0 0 auto;inline-size:calc(var(--slotted-control-inner-size, 24px) - var(--slotted-space-2, 4px));padding:0;position:relative;transition:box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);--_color: var(--slotted-color-picker-color, transparent)}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]:hover:not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-hover)}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]:is(:active,[aria-expanded=true]):not(:disabled){box-shadow:inset 0 0 0 var(--slotted-border-width-thin, 1px) var(--slotted-border-subtle, transparent),0 0 0 var(--slotted-border-width-medium, 2px) var(--slotted-tone-secondary-subtle-active)}[data-ui-text-field] [data-ui-color-picker][data-part-trigger]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui-color-picker][data-part-root][data-disabled]{color:var(--slotted-disabled-foreground)}[data-ui-color-picker][data-part-root][data-disabled] :is([data-part-area],[data-part-channel],[data-part-presets]){filter:grayscale(1);pointer-events:none}[data-ui-color-picker][data-part-root][data-disabled] :is([data-part-area-thumb],[data-part-channel-thumb]){cursor:not-allowed}[data-ui-color-picker][data-part-root][data-readonly] :is([data-part-area],[data-part-channel],[data-part-preset],[data-part-area-thumb],[data-part-channel-thumb]){cursor:default}@media(forced-colors:active){[data-ui-color-picker] :is([data-part-area-thumb],[data-part-channel-thumb]){border-color:CanvasText;forced-color-adjust:none}[data-ui-color-picker] :is([data-part-area],[data-part-channel],[data-part-swatch],[data-part-previous],[data-part-preset]){forced-color-adjust:none}}}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], alpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "alpha", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], contrastWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "contrastWith", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], formatChange: [{ type: i0.Output, args: ["formatChange"] }] } });
 
 /**