@threadlabs/looma 0.32.0 → 0.33.0

package/styles/ui-button.css

@@ -104,10 +104,10 @@
       --_tone-text: var(--_hue-text);
       --_on-tone: var(--_on-hue);
 
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      column-gap: var(--ui-space-2);
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      column-gap: var(--ui-space-2) !important;
       vertical-align: middle;
       color: var(--_tone-text);
     }
@@ -117,12 +117,12 @@
     }
 
     :scope:where([data-component~="ui-button"])[data-ui-button-state~="align=start"] {
-      justify-content: flex-start;
+      justify-content: flex-start !important;
       text-align: start;
     }
 
     :scope:where([data-component~="ui-button"])[data-ui-button-state~="stretch"] {
-      display: flex;
+      display: flex !important;
       inline-size: 100%;
     }
 
@@ -141,16 +141,17 @@
       /* Unset, a button wraps as its container does. */
       white-space: var(--ui-button-white-space, inherit);
       line-height: var(--ui-line-height-tight);
-      padding: var(--ui-space-2) var(--ui-space-3);
+      padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-action-inset-md, var(--ui-space-3)) !important;
       background-image: none;
       box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
       cursor: pointer;
       transition:
+        scale var(--ui-motion-press, var(--ui-motion-fast)) var(--ui-motion-ease),
         background-color var(--ui-motion-fast) var(--ui-motion-ease),
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
         color var(--ui-motion-fast) var(--ui-motion-ease),
         box-shadow var(--ui-motion-base) var(--ui-motion-ease);
-      margin: 0;
+      margin: 0 !important;
     }
 
     /* An anchor keeps the boxed button look even when an app styles ordinary links. */
@@ -159,7 +160,7 @@
     }
 
     .spinner-wrap {
-      display: inline-flex;
+      display: inline-flex !important;
       flex: none;
       vertical-align: middle;
     }
@@ -167,17 +168,17 @@
     /* A count is an adornment, not another line of label text. Keep the standard control height
        with enough inset for a 24px mark; large content can still grow the button naturally. */
     :scope:where([data-component~="ui-button"]):not([variant="link"]):has(.badge:not(:empty)) {
-      padding-block: var(--ui-space-0-5);
+      padding-block: var(--ui-space-0-5) !important;
     }
 
     .badge {
-      display: inline-flex;
-      align-items: center;
+      display: inline-flex !important;
+      align-items: center !important;
       flex: none;
     }
 
     .badge:empty {
-      display: none;
+      display: none !important;
     }
 
     @supports (text-box-trim: trim-both) {
@@ -189,7 +190,7 @@
 
     :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=xs"] {
       min-block-size: 1.5rem;
-      padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25);
+      padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25) !important;
       font-size: var(--ui-font-size-xs);
     }
 
@@ -199,24 +200,24 @@
 
     :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=sm"] {
       min-block-size: var(--ui-control-size-sm);
-      padding: var(--ui-space-1) var(--ui-space-2);
+      padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-action-inset-sm, var(--ui-space-2)) !important;
       font-size: var(--ui-font-size-sm);
     }
 
     :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=lg"] {
       min-block-size: var(--ui-control-size-lg);
-      padding: var(--ui-space-3) var(--ui-space-4);
+      padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-action-inset-lg, var(--ui-space-4)) !important;
       font-size: var(--ui-font-size-md);
     }
 
     /* Card actions inherit Button's palette and behavior; only their shared layout changes.
        The icon may contain any decorative composition. Empty icons remove their column. */
     :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"] {
-      display: grid;
+      display: grid !important;
       grid-template-columns: auto minmax(0, 1fr) auto;
-      align-content: center;
-      align-items: start;
-      gap: var(--ui-space-3);
+      align-content: center !important;
+      align-items: start !important;
+      gap: var(--ui-space-3) !important;
       inline-size: 100%;
       min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-md));
       text-align: start;
@@ -231,18 +232,18 @@
       grid-template-columns: minmax(0, 1fr) auto;
     }
     .card-icon {
-      display: flex;
-      align-items: flex-start;
+      display: flex !important;
+      align-items: flex-start !important;
     }
     .card-icon:empty {
-      display: none;
+      display: none !important;
     }
     .card-content {
       min-inline-size: 0;
     }
     .card-action {
-      display: flex;
-      align-items: center;
+      display: flex !important;
+      align-items: center !important;
       align-self: center;
     }
 
@@ -264,6 +265,7 @@
 
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
     :scope:where([data-component~="ui-button"]):active:not(:disabled, [aria-disabled="true"]) {
+      scale: var(--ui-press-scale, 1);
       background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
       background-image: none;
       box-shadow: var(--ui-pressed);
@@ -449,9 +451,9 @@
     /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
        WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
     :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"] {
-      display: inline;
+      display: inline !important;
       min-block-size: 0;
-      padding: 0;
+      padding: 0 !important;
       border: 0;
       border-radius: var(--ui-radius-sm);
       background: none;
@@ -491,7 +493,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-button"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-button"]) to ([data-component]) {

package/styles/ui-callout.css

@@ -73,14 +73,14 @@
       --_callout-border: var(--ui-info-solid);
       --_callout-icon: var(--ui-info-solid);
 
-      display: grid;
+      display: grid !important;
       grid-template-columns: var(--ui-callout-icon-column, 1.125rem) minmax(0, 1fr);
-      gap: var(--ui-callout-gap, calc(var(--ui-space-2) * 0.75));
-      align-items: start;
+      gap: var(--ui-callout-gap, calc(var(--ui-space-2) * 0.75)) !important;
+      align-items: start !important;
       max-width: 100%;
-      padding-block: var(--ui-callout-padding-block, var(--ui-space-2));
-      padding-inline-start: var(--ui-callout-padding-inline, var(--ui-space-2));
-      padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3));
+      padding-block: var(--ui-callout-padding-block, var(--ui-space-2)) !important;
+      padding-inline-start: var(--ui-callout-padding-inline, var(--ui-space-2)) !important;
+      padding-inline-end: var(--ui-callout-padding-inline, var(--ui-space-3)) !important;
       border: var(--ui-callout-border-width, var(--ui-border-width)) solid
         color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
       border-inline-start: var(--ui-callout-leading-border-width, var(--ui-callout-border-width, var(--ui-border-width))) solid
@@ -96,7 +96,7 @@
 
     /* One line box tall, so the icon centres on the first line of text. */
     .icon {
-      display: grid;
+      display: grid !important;
       place-items: center;
       inline-size: var(--_ui-callout-icon-column, 1.125rem);
       block-size: 1lh;
@@ -113,7 +113,7 @@
     }
 
     .heading {
-      display: block;
+      display: block !important;
       font-weight: var(--ui-font-semibold);
     }
 
@@ -160,7 +160,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-callout"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-callout"]) to ([data-component]) {

package/styles/ui-card.css

@@ -14,12 +14,12 @@
       --_ui-selection-context-surface: initial;
       --_ui-selection-context-border: initial;
       --_ui-selection-context-text: initial;
-      display: flex;
-      flex-direction: column;
-      gap: var(--ui-space-4);
-      box-sizing: border-box;
+      display: flex !important;
+      flex-direction: column !important;
+      gap: var(--ui-space-4) !important;
+      box-sizing: border-box !important;
       min-inline-size: 0;
-      padding: var(--ui-space-5);
+      padding: var(--ui-space-5) !important;
       border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       background: var(--_ui-card-surface);
@@ -27,16 +27,16 @@
     }
 
     :scope:where([data-component~="ui-card"])[data-ui-card-state~="padding=xs"] {
-      gap: var(--ui-space-1);
-      padding: var(--ui-space-2);
+      gap: var(--ui-space-1) !important;
+      padding: var(--ui-space-2) !important;
     }
     :scope:where([data-component~="ui-card"])[data-ui-card-state~="padding=sm"] {
-      gap: var(--ui-space-2);
-      padding: var(--ui-space-3);
+      gap: var(--ui-space-2) !important;
+      padding: var(--ui-space-3) !important;
     }
 
     :scope:where([data-component~="ui-card"])[data-ui-card-state~="padding=lg"] {
-      padding: var(--ui-space-6);
+      padding: var(--ui-space-6) !important;
     }
 
     :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=subtle"] {
@@ -110,7 +110,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-card"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-card"]) to ([data-component]) {

package/styles/ui-checkbox.css

@@ -23,28 +23,46 @@
 
     :scope:where([data-component~="ui-checkbox"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
-      --_ui-checkbox-size: var(--ui-checkbox-size);
+      --_ui-checkbox-size: var(--ui-checkbox-size, var(--ui-choice-mark-size));
       --_ui-checkbox-invalid-border: var(--ui-checkbox-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
 
-      display: inline-flex;
-      align-items: flex-start;
-      gap: var(--ui-checkbox-gap, var(--ui-space-2));
+      display: inline-flex !important;
+      align-items: flex-start !important;
+      flex-direction: row !important;
+      flex-wrap: nowrap !important;
+      justify-content: flex-start !important;
+      padding: 0 !important;
+      gap: var(--ui-checkbox-gap, var(--ui-space-2)) !important;
       max-inline-size: 100%;
       color: var(--ui-text-primary);
+      line-height: var(--ui-line-height-md) !important;
       cursor: pointer;
     }
 
     /* The label, and under it an optional line saying what the choice means. */
     .text {
-      display: flex;
-      flex-direction: column;
-      gap: var(--ui-space-1);
+      font: inherit !important;
+      align-self: auto !important;
+      order: 1 !important;
+      position: static !important;
+      transform: none !important;
+      padding: 0 !important;
+      margin: 0 !important;
+      display: flex !important;
+      flex-direction: column !important;
+      gap: var(--ui-space-1) !important;
       min-inline-size: 0;
     }
 
     .label {
+      position: static !important;
+      transform: none !important;
+      margin: 0 !important;
+      padding-inline: 0 !important;
+      font: inherit !important;
       min-inline-size: 0;
-      line-height: var(--ui-line-height-md);
+      line-height: var(--ui-line-height-md) !important;
+      padding-block: max(0px, calc((var(--_ui-checkbox-size, 1.125rem) - 1lh) / 2)) !important;
     }
 
     .description {
@@ -54,19 +72,25 @@
     }
 
     .description:empty {
-      display: none;
+      display: none !important;
     }
 
     input {
       appearance: none;
       -webkit-appearance: none;
-      position: relative;
+      position: relative !important;
+      transform: none !important;
+      order: 0 !important;
+      box-sizing: border-box !important;
+      padding: 0 !important;
       flex: 0 0 auto;
-      inline-size: var(--_ui-checkbox-size, 1.125rem);
-      block-size: var(--_ui-checkbox-size, 1.125rem);
-      margin: 0.125em 0 0;
+      align-self: auto !important;
+      inline-size: var(--_ui-checkbox-size, 1.125rem) !important;
+      block-size: var(--_ui-checkbox-size, 1.125rem) !important;
+      font: inherit !important;
+      margin: max(0px, calc((1lh - var(--_ui-checkbox-size, 1.125rem)) / 2)) 0 0 !important;
       border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
-      border-radius: var(--ui-radius-sm);
+      border-radius: min(var(--ui-radius-sm), calc(var(--_ui-checkbox-size, 1.125rem) / 4));
       background: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: var(--ui-control-inset);
       cursor: pointer;
@@ -80,7 +104,7 @@
       content: "";
       position: absolute;
       opacity: 0;
-      transition: opacity 120ms var(--ui-motion-ease);
+      transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
     input:checked,
@@ -93,22 +117,22 @@
     /* Centre the tick's box and lift it slightly for the rotated check shape. */
     input:checked:where(:not([data-component], [data-slotted]))::after {
       inset: 0;
-      margin: auto;
-      inline-size: 0.28rem;
-      block-size: 0.5rem;
+      margin: auto !important;
+      inline-size: calc(var(--_ui-checkbox-size) * 0.28 / 1.125);
+      block-size: calc(var(--_ui-checkbox-size) * 0.5 / 1.125);
       /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
          component, which left the tick with no style and no colour. */
       border-style: solid;
       border-color: var(--ui-text-on-accent);
-      border-width: 0 0.125rem 0.125rem 0;
+      border-width: 0 calc(var(--_ui-checkbox-size) * 0.125 / 1.125) calc(var(--_ui-checkbox-size) * 0.125 / 1.125) 0;
       opacity: 1;
-      transform: translateY(-0.09rem) rotate(45deg);
-      animation: ui-checkbox-check 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+      transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg);
+      animation: ui-checkbox-check var(--ui-motion-base) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
     }
 
     input:indeterminate:where(:not([data-component], [data-slotted]))::after {
-      inset: 50% 0.23rem auto;
-      block-size: 0.125rem;
+      inset: 50% calc(var(--_ui-checkbox-size) * 0.23 / 1.125) auto;
+      block-size: calc(var(--_ui-checkbox-size) * 0.125 / 1.125);
       border-radius: var(--ui-radius-round);
       background: var(--ui-text-on-accent);
       opacity: 1;
@@ -118,15 +142,15 @@
     @keyframes ui-checkbox-check {
       from {
         opacity: 0;
-        transform: translateY(-0.09rem) rotate(45deg) scale(0.55);
+        transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(0.55);
       }
       65% {
         opacity: 1;
-        transform: translateY(-0.09rem) rotate(45deg) scale(1.12);
+        transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(1.12);
       }
       to {
         opacity: 1;
-        transform: translateY(-0.09rem) rotate(45deg) scale(1);
+        transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(1);
       }
     }
 
@@ -181,12 +205,7 @@
     :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="size=lg"] {
       --_line: calc(var(--_font) * var(--ui-line-height-md));
       font-size: var(--_font);
-      padding-block: calc((var(--_row) - var(--_line)) / 2);
-    }
-
-    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="size=sm"] input,
-    :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="size=lg"] input {
-      margin-top: calc((var(--_line) - var(--_ui-checkbox-size, 1.125rem)) / 2);
+      padding-block: max(0px, calc((var(--_row) - max(var(--_line), var(--_ui-checkbox-size, 1.125rem))) / 2)) !important;
     }
 
     @media (pointer: coarse) {
@@ -197,7 +216,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-checkbox"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-checkbox"]) to ([data-component]) {

package/styles/ui-cluster.css

@@ -15,38 +15,38 @@
 
     :scope:where([data-component~="ui-cluster"]) {
       --_layout-gap: var(--ui-space-3);
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: var(--ui-cluster-gap, var(--_layout-gap));
+      display: flex !important;
+      flex-wrap: wrap !important;
+      align-items: center !important;
+      gap: var(--ui-cluster-gap, var(--_layout-gap)) !important;
       min-inline-size: 0;
       max-inline-size: 100%;
-      margin: 0;
+      margin: 0 !important;
     }
 
     :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="fixed"] {
       flex: none;
     }
     :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="padding=s"] {
-      padding: var(--ui-space-2);
+      padding: var(--ui-space-2) !important;
     }
     :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="padding=m"] {
-      padding: var(--ui-space-3);
+      padding: var(--ui-space-3) !important;
     }
     :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="padding=l"] {
-      padding: var(--ui-space-4);
+      padding: var(--ui-space-4) !important;
     }
     :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="paddingEnd=s"] {
-      padding-inline-end: var(--ui-space-2);
+      padding-inline-end: var(--ui-space-2) !important;
     }
     :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="paddingEnd=m"] {
-      padding-inline-end: var(--ui-space-3);
+      padding-inline-end: var(--ui-space-3) !important;
     }
     :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="paddingEnd=l"] {
-      padding-inline-end: var(--ui-space-4);
+      padding-inline-end: var(--ui-space-4) !important;
     }
     :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="paddingEnd=xl"] {
-      padding-inline-end: calc(var(--ui-space-4) * 4);
+      padding-inline-end: calc(var(--ui-space-4) * 4) !important;
     }
 
     :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="gap=xs"] {
@@ -65,33 +65,33 @@
       --_layout-gap: var(--ui-space-6);
     }
     :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="align=start"] {
-      align-items: flex-start;
+      align-items: flex-start !important;
     }
     :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="align=end"] {
-      align-items: flex-end;
+      align-items: flex-end !important;
     }
     :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="align=baseline"] {
-      align-items: baseline;
+      align-items: baseline !important;
     }
     :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="align=stretch"] {
-      align-items: stretch;
+      align-items: stretch !important;
     }
     :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="justify=center"] {
-      justify-content: center;
+      justify-content: center !important;
     }
     :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="justify=end"] {
-      justify-content: flex-end;
+      justify-content: flex-end !important;
     }
     :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="justify=between"] {
-      justify-content: space-between;
+      justify-content: space-between !important;
     }
     :scope:where([data-component~="ui-cluster"])[data-ui-cluster-state~="wrap=nowrap"] {
-      flex-wrap: nowrap;
+      flex-wrap: nowrap !important;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-cluster"])[hidden] {
-      display: none;
+      display: none !important;
     }
 }
 @scope ([data-component~="ui-cluster"]) to ([data-component]) {

package/styles/ui-color-picker.css

@@ -0,0 +1,120 @@
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-color-picker"] { --html-next-scope-owner: "ui-color-picker" !important; }
+}
+@scope ([data-component~="ui-color-picker"]) to ([data-component], [data-slotted]) {
+:scope:where([data-component~="ui-color-picker"]) {
+      display: inline-flex !important;
+      flex: 0 0 auto;
+      margin: 0 !important;
+      padding: 0 !important;
+      --_size: var(--ui-control-size-md);
+      --_font: 1em;
+      --_padding: var(--ui-control-inset-block-md, var(--ui-space-2));
+    }
+    :scope:where([data-component~="ui-color-picker"])[data-ui-color-picker-state~="size=sm"] {
+      --_size: var(--ui-control-size-sm);
+      --_font: var(--ui-font-size-sm);
+      --_padding: var(--ui-control-inset-block-sm, var(--ui-space-1));
+    }
+    :scope:where([data-component~="ui-color-picker"])[data-ui-color-picker-state~="size=lg"] {
+      --_size: var(--ui-control-size-lg);
+      --_font: var(--ui-font-size-md);
+      --_padding: var(--ui-control-inset-block-lg, var(--ui-space-3));
+    }
+    button {
+      --_radius: min(var(--ui-field-radius, var(--ui-radius-md)), calc(var(--_size) / 4));
+      --_inset: min(calc(var(--ui-space-1) * 1.5), calc(var(--_size) / 5));
+      box-sizing: border-box !important;
+      display: inline-grid !important;
+      place-items: center;
+      margin: 0 !important;
+      padding: var(--_inset) !important;
+      inline-size: max(var(--_size), calc(var(--_font) * var(--ui-line-height-tight) + var(--_padding) * 2 + var(--ui-border-width) * 2));
+      aspect-ratio: 1;
+      flex: 0 0 auto;
+      border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
+      border-radius: var(--_radius);
+      background: var(--ui-control-surface, var(--ui-surface-elevated));
+      box-shadow: var(--ui-control-inset);
+      font: inherit;
+      cursor: pointer;
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), scale var(--ui-motion-press, var(--ui-motion-fast)) var(--ui-motion-ease);
+    }
+    button:hover:not(:disabled) {
+      background: var(--ui-surface-subtle);
+    }
+    button:active:not(:disabled) {
+      scale: var(--ui-press-scale, 0.96);
+    }
+    button:focus-visible {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
+      outline-offset: var(--ui-focus-width);
+    }
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .colour {
+      display: block !important;
+      inline-size: 100%;
+      block-size: 100%;
+      border-radius: max(0px, calc(var(--_radius) - var(--_inset) - var(--ui-border-width)));
+      box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
+    }
+    :scope:where([data-component~="ui-color-picker"])[data-ui-color-picker-state~="round"] button {
+      border-radius: 50%;
+    }
+    :scope:where([data-component~="ui-color-picker"])[data-ui-color-picker-state~="round"] .colour {
+      border-radius: 50%;
+    }
+    .editor {
+      box-sizing: border-box !important;
+      display: grid !important;
+      gap: var(--ui-space-3) !important;
+      padding: var(--ui-space-4) !important;
+      margin: 0 !important;
+      inline-size: min(18rem, calc(100vw - 1rem));
+      border: var(--ui-border-width) solid var(--ui-border-strong);
+      border-radius: var(--ui-radius-md);
+      background: var(--ui-surface-elevated);
+      color: var(--ui-text-primary);
+      box-shadow: var(--ui-shadow-lg);
+      font: inherit;
+    }
+    .editor[hidden] {
+      display: none !important;
+    }
+    .channel {
+      display: grid !important;
+      grid-template-columns: 3.5em 1fr;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
+      padding: 0 !important;
+      margin: 0 !important;
+    }
+    input[type="range"] {
+      inline-size: 100%;
+      min-inline-size: 0;
+      margin: 0 !important;
+      padding: 0 !important;
+      accent-color: var(--ui-accent-solid);
+    }
+    @media (pointer: coarse) {
+      :scope:where([data-component~="ui-color-picker"]) {
+        --_size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+      }
+      :scope:where([data-component~="ui-color-picker"])[data-ui-color-picker-state~="size=sm"] {
+        --_size: var(--ui-control-min-block-size);
+        --_font: var(--ui-font-size-md);
+      }
+    }
+}
+@scope ([data-component~="ui-color-picker"]) to ([data-component]) {
+@media (pointer: coarse) {
+    }
+}