@slotted/styles 0.1.0-beta.7 → 0.1.0-beta.9

package/src/color-picker/color-picker.css

@@ -13,7 +13,7 @@
    * as a runtime property (`runtime-properties.mjs`); the panel's own chrome
    * reads the theme like any other family.
    */
-  [data-ui='color-picker'][data-part='root'] {
+  [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, 0.75rem));
     --_gap: var(--slotted-space-5, 0.75rem);
@@ -45,7 +45,7 @@
     min-inline-size: 0;
   }
 
-  [data-ui='color-picker'][data-part='root'][data-size='sm'] {
+  [data-ui-color-picker][data-part-root][data-size='sm'] {
     --_gap: var(--slotted-space-4, 0.5rem);
     --_inner-size: var(--slotted-control-inner-size-sm, 22px);
     --_icon-size: var(--slotted-control-icon-size-sm, 14px);
@@ -53,7 +53,7 @@
     font-size: var(--slotted-control-font-size-sm, 12px);
   }
 
-  [data-ui='color-picker'][data-part='root'][data-size='lg'] {
+  [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);
@@ -69,7 +69,7 @@
    * and nowhere else. The edge is drawn inside, a hairline of the theme's
    * subtle border, so a pale colour still has a boundary on a pale page.
    */
-  [data-ui='color-picker'] [data-part='area'] {
+  [data-ui-color-picker] [data-part-area] {
     aspect-ratio: 3 / 2;
     background:
       linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent),
@@ -85,7 +85,7 @@
 
   /* The area mirrors in a right-to-left document: saturation grows along the
      reading direction, the way the hue channel does. */
-  [data-ui='color-picker'] [data-part='area']:dir(rtl) {
+  [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%);
@@ -98,7 +98,7 @@
    * ring is the model's white for the reason the area's is. Held, it grows a
    * step, so the reader sees what the pointer has taken.
    */
-  [data-ui='color-picker'] :is([data-part='area-thumb'], [data-part='channel-thumb']) {
+  [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;
@@ -116,24 +116,23 @@
     translate: -50% -50%;
   }
 
-  [data-ui='color-picker'] [data-part='area-thumb'] {
+  [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) {
+  [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']) {
+  [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 {
+  [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);
   }
@@ -144,7 +143,7 @@
    * the browser draws the rainbow rather than seven stops written by hand.
    * Alpha is the colour fading to nothing over the transparency grid.
    */
-  [data-ui='color-picker'] [data-part='channel'] {
+  [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)
@@ -154,42 +153,42 @@
     touch-action: none;
   }
 
-  [data-ui='color-picker'] [data-part='channel'][data-channel='hue'] {
+  [data-ui-color-picker] [data-part-channel][data-channel='hue'] {
     background: linear-gradient(to right in hsl longer hue, hsl(0 100% 50%), hsl(0 100% 50%));
   }
 
-  [data-ui='color-picker'] [data-part='channel'][data-channel='alpha'] {
+  [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) {
+  [data-ui-color-picker] [data-part-channel][data-channel='hue']:dir(rtl) {
     background: linear-gradient(to left in hsl longer hue, hsl(0 100% 50%), hsl(0 100% 50%));
   }
 
-  [data-ui='color-picker'] [data-part='channel'][data-channel='alpha']:dir(rtl) {
+  [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'] {
+  [data-ui-color-picker] [data-part-channel-thumb] {
     inset-block-start: 50%;
   }
 
   /* A channel's thumb travels inside the track, its centre a half thumb in
      from each end, so at 0 and at the maximum it still sits on the colour it
      names rather than hanging past the rounded end. */
-  [data-ui='color-picker'] [data-part='channel-thumb'][data-channel='hue'] {
+  [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'] {
+  [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) {
+  [data-ui-color-picker] [data-part-channel-thumb]:dir(rtl) {
     translate: 50% -50%;
   }
 
@@ -199,7 +198,7 @@
    * the eyedropper. The row is the control height, so the text input inside
    * it lines up with any field beside the panel.
    */
-  [data-ui='color-picker'] [data-part='row'] {
+  [data-ui-color-picker] [data-part-row] {
     align-items: center;
     display: flex;
     gap: var(--slotted-space-3, 0.375rem);
@@ -211,8 +210,8 @@
    * the start, the colour the panel opened with on the end. Each half is the
    * colour over the transparency grid. Pressing the old half restores it.
    */
-  [data-ui='color-picker'] [data-part='swatch'],
-  [data-ui='color-picker'] [data-part='previous'] {
+  [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;
@@ -223,7 +222,7 @@
     padding: 0;
   }
 
-  [data-ui='color-picker'] [data-part='swatch'] {
+  [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);
@@ -231,12 +230,12 @@
       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'])) {
+  [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'] {
+  [data-ui-color-picker] [data-part-previous] {
     background:
       linear-gradient(
         var(--slotted-color-picker-previous, transparent),
@@ -254,7 +253,7 @@
   }
 
   /* The old colour answers the pointer with the revert mark over it. */
-  [data-ui='color-picker'] [data-part='previous'] > [data-ui='icon'] {
+  [data-ui-color-picker] [data-part-previous] > [data-ui-icon] {
     --slotted-icon-size: var(--_icon-size);
 
     color: #fff;
@@ -266,20 +265,20 @@
     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'] {
+  [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 {
+  [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);
   }
 
   /* The value as text sits in a `text-field` the binding renders; it takes
      the width the row leaves. */
-  [data-ui='color-picker'] [data-part='row'] > [data-ui='text-field'] {
+  [data-ui-color-picker] [data-part-row] > [data-ui-text-field] {
     flex: 1 1 0;
     inline-size: auto;
   }
@@ -289,7 +288,7 @@
    * Both are inner controls of the row (R2): no frame and no ground at rest,
    * one step of ground for hover and one for press.
    */
-  [data-ui='color-picker'] :is([data-part='format'], [data-part='eyedropper']) {
+  [data-ui-color-picker] :is([data-part-format], [data-part-eyedropper]) {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -313,7 +312,7 @@
       var(--slotted-control-transition-easing);
   }
 
-  [data-ui='color-picker'] [data-part='format'] {
+  [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, 0.375rem);
@@ -332,7 +331,7 @@
    * translate puts its centre at `(1cap + 1ex) / 4` above the baseline — the
    * midpoint of the capitals' and the lowercase letters' own centres.
    */
-  [data-ui='color-picker'] [data-part='format'] {
+  [data-ui-color-picker] [data-part-format] {
     align-content: center;
     align-items: baseline;
     display: inline-grid;
@@ -340,39 +339,36 @@
     justify-content: center;
   }
 
-  [data-ui='color-picker'] [data-part='format'] > [data-ui='icon'] {
+  [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 {
+  [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 {
+    [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']
-    ) {
+  [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(
+  [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 {
+  [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);
   }
@@ -383,7 +379,7 @@
    * chosen one is ringed in the theme's ring colour at a gap of the panel's
    * ground, so the ring never touches the colour it marks.
    */
-  [data-ui='color-picker'] [data-part='presets'] {
+  [data-ui-color-picker] [data-part-presets] {
     display: grid;
     gap: var(--slotted-space-3, 0.375rem);
     /* A step under the control's inner size, so the ten swatches of a
@@ -394,7 +390,7 @@
     );
   }
 
-  [data-ui='color-picker'] [data-part='preset'] {
+  [data-ui-color-picker] [data-part-preset] {
     appearance: none;
     aspect-ratio: 1;
     background:
@@ -417,21 +413,21 @@
       box-shadow var(--slotted-duration-short) var(--slotted-easing-standard);
   }
 
-  [data-ui='color-picker'] [data-part='preset']:hover:not(:disabled) {
+  [data-ui-color-picker] [data-part-preset]:hover:not(:disabled) {
     scale: 1.08;
   }
 
-  [data-ui='color-picker'] [data-part='preset']:active:not(:disabled) {
+  [data-ui-color-picker] [data-part-preset]:active:not(:disabled) {
     scale: 0.94;
   }
 
-  [data-ui='color-picker'] [data-part='preset'][data-selected] {
+  [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 {
+  [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);
   }
@@ -442,14 +438,14 @@
    * WCAG ratio and the level it reaches. The level is a word in a badge
    * coloured by its tone, never colour alone.
    */
-  [data-ui='color-picker'] [data-part='contrast'] {
+  [data-ui-color-picker] [data-part-contrast] {
     align-items: center;
     display: flex;
     font-variant-numeric: tabular-nums;
     gap: var(--slotted-space-4, 0.5rem);
   }
 
-  [data-ui='color-picker'] [data-part='contrast-sample'] {
+  [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);
@@ -462,12 +458,12 @@
     place-items: center;
   }
 
-  [data-ui='color-picker'] [data-part='contrast-ratio'] {
+  [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'] {
+  [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);
@@ -475,24 +471,22 @@
     padding: var(--slotted-space-1, 2px) var(--slotted-space-3, 0.375rem);
   }
 
-  [data-ui='color-picker'] [data-part='contrast'][data-level^='AA'] [data-part='contrast-level'] {
+  [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'] {
+  [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'] {
+  [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'] {
+  [data-ui-color-picker] [data-part-gamut] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -509,7 +503,7 @@
    * It is the trigger, and it answers the press like the field's other inner
    * buttons, by its ground — here the ring around it.
    */
-  [data-ui='text-field'] [data-ui='color-picker'][data-part='trigger'] {
+  [data-ui-text-field] [data-ui-color-picker][data-part-trigger] {
     appearance: none;
     background:
       linear-gradient(var(--_color, transparent), var(--_color, transparent)),
@@ -533,73 +527,71 @@
     --_color: var(--slotted-color-picker-color, transparent);
   }
 
-  [data-ui='text-field'] [data-ui='color-picker'][data-part='trigger']::after {
+  [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) {
+  [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
-    ) {
+  [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 {
+  [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);
   }
 
   /* ── States ───────────────────────────────────────────────────────────── */
 
-  [data-ui='color-picker'][data-part='root'][data-disabled] {
+  [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']) {
+  [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']) {
+  [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]
+  [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']
+      [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']) {
+    [data-ui-color-picker] :is([data-part-area-thumb], [data-part-channel-thumb]) {
       border-color: CanvasText;
       forced-color-adjust: none;
     }
 
-    [data-ui='color-picker']
+    [data-ui-color-picker]
       :is(
-        [data-part='area'],
-        [data-part='channel'],
-        [data-part='swatch'],
-        [data-part='previous'],
-        [data-part='preset']
+        [data-part-area],
+        [data-part-channel],
+        [data-part-swatch],
+        [data-part-previous],
+        [data-part-preset]
       ) {
       forced-color-adjust: none;
     }