@threadlabs/looma 0.32.1 → 0.33.1

package/components/ui-button/ui-button.html

@@ -15,7 +15,8 @@
     >rounded uses the theme's action radius; pill rounds the ends fully, for a compact choice such as a status or a person.</prop>
     <prop name="tone" type="keyword" values="accent, neutral, danger, success, warning, info" default="accent"
     >Which colour the button speaks in. It applies to every variant, so an outline, a ghost, and a solid in the same tone are the same action at three volumes:
-      tone="danger" variant="outline" is a destructive secondary action. neutral is the quiet one, for a button that should not claim a colour. The field variant always uses neutral field colors.</prop>
+      tone="danger" variant="outline" is a destructive secondary action. neutral is the quiet one, for a button that should not claim a colour. The field
+      variant always uses neutral field colors.</prop>
     <prop name="disabled" type="boolean" default="false"
     >Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (as="a" with href) drops its
       href and states aria-disabled="true" instead, because a link has no native disabled state.</prop>
@@ -191,10 +192,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);
     }
@@ -204,12 +205,12 @@
     }
 
     :host([align="start"]) {
-      justify-content: flex-start;
+      justify-content: flex-start !important;
       text-align: start;
     }
 
     :host([stretch]) {
-      display: flex;
+      display: flex !important;
       inline-size: 100%;
     }
 
@@ -228,16 +229,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. */
@@ -246,7 +248,7 @@
     }
 
     .spinner-wrap {
-      display: inline-flex;
+      display: inline-flex !important;
       flex: none;
       vertical-align: middle;
     }
@@ -254,17 +256,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. */
     :host: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) {
@@ -276,7 +278,7 @@
 
     :host([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);
     }
 
@@ -286,24 +288,24 @@
 
     :host([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);
     }
 
     :host([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. */
     :host([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;
@@ -318,18 +320,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;
     }
 
@@ -351,6 +353,7 @@
 
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
     :host: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);
@@ -536,9 +539,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. */
     :host([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;
@@ -578,7 +581,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-callout/ui-callout.html

@@ -132,14 +132,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
@@ -155,7 +155,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;
@@ -172,7 +172,7 @@
     }
 
     .heading {
-      display: block;
+      display: block !important;
       font-weight: var(--ui-font-semibold);
     }
 
@@ -225,7 +225,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-card/ui-card.html

@@ -27,12 +27,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);
@@ -40,16 +40,16 @@
     }
 
     :host([padding="xs"]) {
-      gap: var(--ui-space-1);
-      padding: var(--ui-space-2);
+      gap: var(--ui-space-1) !important;
+      padding: var(--ui-space-2) !important;
     }
     :host([padding="sm"]) {
-      gap: var(--ui-space-2);
-      padding: var(--ui-space-3);
+      gap: var(--ui-space-2) !important;
+      padding: var(--ui-space-3) !important;
     }
 
     :host([padding="lg"]) {
-      padding: var(--ui-space-6);
+      padding: var(--ui-space-6) !important;
     }
 
     :host([variant="subtle"]) {
@@ -123,7 +123,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-checkbox/ui-checkbox.html

@@ -62,28 +62,46 @@
 
     :host {
       /* 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 {
@@ -93,19 +111,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;
@@ -119,7 +143,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,
@@ -132,22 +156,22 @@
     /* Centre the tick's box and lift it slightly for the rotated check shape. */
     input:checked::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::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;
@@ -157,15 +181,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);
       }
     }
 
@@ -220,12 +244,7 @@
     :host([size="lg"]) {
       --_line: calc(var(--_font) * var(--ui-line-height-md));
       font-size: var(--_font);
-      padding-block: calc((var(--_row) - var(--_line)) / 2);
-    }
-
-    :host([size="sm"]) input,
-    :host([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) {
@@ -236,7 +255,7 @@
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-cluster/ui-cluster.html

@@ -29,38 +29,38 @@
 
     :host {
       --_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;
     }
 
     :host([fixed]) {
       flex: none;
     }
     :host([padding="s"]) {
-      padding: var(--ui-space-2);
+      padding: var(--ui-space-2) !important;
     }
     :host([padding="m"]) {
-      padding: var(--ui-space-3);
+      padding: var(--ui-space-3) !important;
     }
     :host([padding="l"]) {
-      padding: var(--ui-space-4);
+      padding: var(--ui-space-4) !important;
     }
     :host([paddingEnd="s"]) {
-      padding-inline-end: var(--ui-space-2);
+      padding-inline-end: var(--ui-space-2) !important;
     }
     :host([paddingEnd="m"]) {
-      padding-inline-end: var(--ui-space-3);
+      padding-inline-end: var(--ui-space-3) !important;
     }
     :host([paddingEnd="l"]) {
-      padding-inline-end: var(--ui-space-4);
+      padding-inline-end: var(--ui-space-4) !important;
     }
     :host([paddingEnd="xl"]) {
-      padding-inline-end: calc(var(--ui-space-4) * 4);
+      padding-inline-end: calc(var(--ui-space-4) * 4) !important;
     }
 
     :host([gap="xs"]) {
@@ -79,33 +79,33 @@
       --_layout-gap: var(--ui-space-6);
     }
     :host([align="start"]) {
-      align-items: flex-start;
+      align-items: flex-start !important;
     }
     :host([align="end"]) {
-      align-items: flex-end;
+      align-items: flex-end !important;
     }
     :host([align="baseline"]) {
-      align-items: baseline;
+      align-items: baseline !important;
     }
     :host([align="stretch"]) {
-      align-items: stretch;
+      align-items: stretch !important;
     }
     :host([justify="center"]) {
-      justify-content: center;
+      justify-content: center !important;
     }
     :host([justify="end"]) {
-      justify-content: flex-end;
+      justify-content: flex-end !important;
     }
     :host([justify="between"]) {
-      justify-content: space-between;
+      justify-content: space-between !important;
     }
     :host([wrap="nowrap"]) {
-      flex-wrap: nowrap;
+      flex-wrap: nowrap !important;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
-      display: none;
+      display: none !important;
     }
   </style>
 </template>

package/components/ui-color-picker/ui-color-picker.html

@@ -0,0 +1,135 @@
+<link rel="component" href="../ui-input/ui-input.html">
+<template component="ui-color-picker" module="./ui-color-picker.js">
+  <defs>
+    <prop name="value" type="string" default="#000000"
+    >An opaque sRGB colour as six hexadecimal digits prefixed with #. User edits emit input and change with detail.value. Invalid values are ignored. This
+      control does not submit a named form value.</prop>
+    <prop name="name" type="string" default="">The form field name. Leave empty to omit the colour from form submission. A form reset restores value.</prop>
+    <prop name="label" type="string" default="Choose colour">Accessible name for the swatch button and editor.</prop>
+    <prop name="size" type="keyword" values="sm, md, lg" default="md">Shared control height, matching Input and Button of the same size.</prop>
+    <prop name="round" type="boolean" default="false">Makes the square swatch circular.</prop>
+    <prop name="disabled" type="boolean" default="false">Prevents opening and editing.</prop>
+    <event name="input" type="object"><prop name="value" type="string" required></prop></event>
+    <event name="change" type="object"><prop name="value" type="string" required></prop></event>
+  </defs>
+  <span>
+    <input $ref="field" type="hidden" data-ui-field-value from:name="$name" from:disabled="$disabled">
+    <button data-ui-field-control $ref="trigger" type="button" from:aria-label="$label" from:disabled="$disabled" aria-haspopup="dialog" aria-expanded="false">
+      <span class="colour" $ref="colour"></span>
+    </button>
+    <span class="editor" $ref="editor" hidden role="dialog" from:aria-label="$label">
+      <label class="channel">Red<input $ref="red" type="range" min="0" max="255" aria-label="Red"></label>
+      <label class="channel">Green<input $ref="green" type="range" min="0" max="255" aria-label="Green"></label>
+      <label class="channel">Blue<input $ref="blue" type="range" min="0" max="255" aria-label="Blue"></label>
+      <ui-input $ref="hex" size="sm" aria-label="Hex colour" maxlength="7" spellcheck="false"></ui-input>
+    </span>
+  </span>
+  <style>
+    :host {
+      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));
+    }
+    :host([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));
+    }
+    :host([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);
+    }
+    :host([round]) button {
+      border-radius: 50%;
+    }
+    :host([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) {
+      :host {
+        --_size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+      }
+      :host([size="sm"]) {
+        --_size: var(--ui-control-min-block-size);
+        --_font: var(--ui-font-size-md);
+      }
+    }
+  </style>
+</template>