@threadlabs/looma 0.28.10 → 0.28.12

package/vue/components.css

@@ -3824,6 +3824,404 @@ footer[data-v-de6bc526]:empty {
 }
 }
 
+/* This component's hooks style the element they are set on, and never a nested one. An Input
+       Group sets --_ui-default-input-* for the input inside it, below the input's own hooks. */
+@property --ui-input-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-border-hover {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-border-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-focus-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-focus-outline {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-focus-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-inline-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-invalid-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-invalid-focus-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-min-block-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-surface {
+  syntax: "*";
+  inherits: false;
+}
+
+/* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
+
+/* Under touch a small field is still a touch-sized target, as a small button is, and keeps
+   body-size text: below 16px, iOS zooms the page into the focused field. */
+
+/* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
+
+/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+
+/* Forced colors drop box shadows, so the focus ring becomes an outline. */
+
+/* No text-box-trim here: trimming a native input's line box below its line height lets the text
+ * scroll vertically inside the field. Native inputs already center their single line. */
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-input) {
+:scope:where([data-v-a8c06d86]:scope) {
+    box-sizing: border-box;
+    display: inline-block;
+    inline-size: var(--ui-input-inline-size, 100%);
+    min-inline-size: 0;
+    min-block-size: var(
+      --ui-input-min-block-size,
+      var(--_ui-default-input-min-block-size, var(--ui-control-size-md))
+    );
+    margin: 0;
+    padding: var(--ui-space-2) var(--ui-space-3);
+    appearance: none;
+    padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3));
+    border: var(
+      --ui-input-border-width,
+      var(--_ui-default-input-border-width, var(--ui-border-width))
+    ) solid
+      var(
+        --ui-input-border,
+        var(--_ui-default-input-border, var(--ui-control-border, var(--ui-border-strong)))
+      );
+    border-radius: var(
+      --ui-input-radius,
+      var(--_ui-default-input-radius, var(--ui-field-radius, var(--ui-radius-md)))
+    );
+    background: var(
+      --ui-input-surface,
+      var(--_ui-default-input-surface, var(--ui-control-surface, var(--ui-surface-elevated)))
+    );
+    color: var(--ui-text-primary);
+    font: inherit;
+    line-height: var(--ui-line-height-tight);
+    box-shadow: var(--ui-input-shadow, var(--_ui-default-input-shadow, var(--ui-control-inset)));
+    transition:
+      border-color var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+      background-color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+:scope:where([data-v-a8c06d86]:scope):is([data-ui-input-state~="size=sm"]) {
+    min-block-size: var(
+      --ui-input-min-block-size,
+      var(--_ui-default-input-min-block-size, var(--ui-control-size-sm))
+    );
+    padding: var(--ui-space-1) var(--ui-space-2);
+    font-size: var(--ui-font-size-sm);
+}
+:scope:where([data-v-a8c06d86]:scope):is([data-ui-input-state~="size=lg"]) {
+    min-block-size: var(
+      --ui-input-min-block-size,
+      var(--_ui-default-input-min-block-size, var(--ui-control-size-lg))
+    );
+    padding: var(--ui-space-3) var(--ui-space-4);
+    font-size: var(--ui-font-size-md);
+}
+@media (pointer: coarse) {
+:scope:where([data-v-a8c06d86]:scope) {
+      min-block-size: var(
+        --ui-input-min-block-size,
+        var(
+          --_ui-default-input-min-block-size,
+          max(var(--ui-control-size-md), var(--ui-control-min-block-size))
+        )
+      );
+}
+:scope:where([data-v-a8c06d86]:scope),
+    :scope:where([data-v-a8c06d86]:scope):is([data-ui-input-state~="size=sm"]),
+    :scope:where([data-v-a8c06d86]:scope):is([data-ui-input-state~="size=lg"]) {
+      font-size: var(--ui-font-size-md);
+}
+:scope:where([data-v-a8c06d86]:scope):is([data-ui-input-state~="size=sm"]) {
+      min-block-size: var(
+        --ui-input-min-block-size,
+        var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size))
+      );
+}
+}
+:scope:where([data-v-a8c06d86]:scope)::selection {
+    background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+    color: inherit;
+}
+:scope:where([data-v-a8c06d86]:scope)::placeholder {
+    color: var(--ui-control-placeholder, var(--ui-text-secondary));
+    opacity: 1;
+}
+:scope:where([data-v-a8c06d86]:scope):is(:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid]))) {
+    border-color: var(
+      --ui-input-border-hover,
+      var(
+        --_ui-default-input-border-hover,
+        var(--ui-control-border-hover, var(--ui-text-secondary))
+      )
+    );
+}
+:scope:where([data-v-a8c06d86]:scope):is(:focus-visible) {
+    border-color: var(
+      --ui-input-focus-border,
+      var(--_ui-default-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)))
+    );
+    outline: none;
+    box-shadow: var(
+      --ui-input-focus-shadow,
+      var(
+        --_ui-default-input-focus-shadow,
+        var(--ui-control-inset),
+        var(--ui-control-focus-halo-shadow)
+      )
+    );
+}
+:scope:where([data-v-a8c06d86]:scope):is([aria-invalid="true"]),
+  :scope:where([data-v-a8c06d86]:scope):is(:is(:user-invalid, [data-user-invalid])) {
+    border-color: var(
+      --ui-input-invalid-border,
+      var(--_ui-default-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
+    );
+}
+:scope:where([data-v-a8c06d86]:scope):is(:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
+    box-shadow: var(
+      --ui-input-invalid-focus-shadow,
+      var(
+        --_ui-default-input-invalid-focus-shadow,
+        var(--ui-control-inset),
+        0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+          in srgb,
+          var(--ui-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+          transparent
+        )
+      )
+    );
+}
+:scope:where([data-v-a8c06d86]:scope):is(:disabled) {
+    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+    color: var(--ui-disabled-text);
+    box-shadow: none;
+    cursor: not-allowed;
+}
+@media (forced-colors: active) {
+:scope:where([data-v-a8c06d86]:scope):is(:focus-visible) {
+      outline: var(
+        --ui-input-focus-outline,
+        var(--_ui-default-input-focus-outline, var(--ui-focus-width) solid Highlight)
+      );
+      outline-offset: var(--ui-border-width);
+}
+}
+:scope:where([data-v-a8c06d86]:scope):is([hidden]) {
+    display: none;
+}
+}
+
+@property --ui-radio-group-invalid-text {
+  syntax: "*";
+  inherits: false;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-radio-group) {
+:scope:where([data-v-b26d4760]:scope) {
+    --_ui-radio-group-invalid-text: var(
+      --ui-radio-group-invalid-text,
+      var(--ui-field-danger, var(--ui-danger-solid))
+    );
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-2);
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+legend[data-v-b26d4760] {
+    float: inline-start;
+    inline-size: 100%;
+    margin: 0 0 var(--ui-space-2);
+    padding: 0;
+    color: var(--ui-text-primary);
+    font-weight: var(--ui-font-medium);
+}
+legend[data-v-b26d4760] + * {
+    clear: both;
+}
+legend.sr-only[data-v-b26d4760] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+:scope[data-ui-radio-group-state~="invalid"] legend[data-v-b26d4760] {
+    color: var(--_ui-radio-group-invalid-text);
+}
+:scope:where([data-v-b26d4760]:scope):is([data-ui-radio-group-state~="orientation=vertical"]) {
+    display: inline-grid;
+    justify-items: start;
+}
+:scope:where([data-v-b26d4760]:scope):is([hidden]) {
+    display: none;
+}
+}
+
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-stack-height {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-stack-gap {
+  syntax: "*";
+  inherits: false;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-stack) {
+:scope:where([data-v-12a17b88]:scope) {
+    --_layout-gap: var(--ui-space-4);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--ui-stack-gap, var(--_layout-gap));
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    margin: 0;
+}
+:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="fill"]) {
+    flex: 1;
+    min-block-size: 0;
+}
+:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="height"]) {
+    block-size: calc(var(--ui-stack-height, 0) * 1px);
+    min-block-size: 0;
+}
+:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="gap=none"]) {
+    --_layout-gap: 0px;
+}
+:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="gap=xs"]) {
+    --_layout-gap: var(--ui-space-2);
+}
+:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="gap=s"]) {
+    --_layout-gap: var(--ui-space-3);
+}
+:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="gap=m"]) {
+    --_layout-gap: var(--ui-space-4);
+}
+:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="gap=l"]) {
+    --_layout-gap: var(--ui-space-5);
+}
+:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="gap=xl"]) {
+    --_layout-gap: var(--ui-space-6);
+}
+:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="align=start"]) {
+    align-items: flex-start;
+}
+:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="align=center"]) {
+    align-items: center;
+}
+:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="align=end"]) {
+    align-items: flex-end;
+}
+:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="justify=center"]) {
+    justify-content: center;
+}
+:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="justify=end"]) {
+    justify-content: flex-end;
+}
+:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="justify=between"]) {
+    justify-content: space-between;
+}
+:scope:where([data-v-12a17b88]:scope):is([hidden]) {
+    display: none;
+}
+}
+
+@property --ui-swatch-size {
+  syntax: "*";
+  inherits: false;
+}
+
+/* A native radio drawn as a round dot. Inside a ui-radio-group the group names it, applies its
+   value, and moves between swatches with the arrow keys. */
+
+/* The chosen swatch and the focused one share one ring at the focus width (2px by default), in
+   the tone or the focus colour. */
+@scope (.ui-swatch) {
+:scope:where([data-v-42e76006]:scope) {
+    --_surface: var(--ui-surface-subtle);
+    --_text: var(--ui-text-secondary);
+
+    appearance: none;
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    inline-size: var(--ui-swatch-size, 1.65rem);
+    block-size: var(--ui-swatch-size, 1.65rem);
+    margin: 0;
+    border: var(--ui-border-width) solid color-mix(in srgb, var(--_surface) 75%, var(--_text) 25%);
+    border-radius: 50%;
+    background: var(--_surface);
+    cursor: pointer;
+}
+:scope:where([data-v-42e76006]:scope):is([data-ui-swatch-state~="tone=blue"]) {
+    --_surface: var(--ui-info-soft);
+    --_text: var(--ui-info-subtle-text);
+}
+:scope:where([data-v-42e76006]:scope):is([data-ui-swatch-state~="tone=green"]) {
+    --_surface: var(--ui-success-soft);
+    --_text: var(--ui-success-subtle-text);
+}
+:scope:where([data-v-42e76006]:scope):is([data-ui-swatch-state~="tone=yellow"]) {
+    --_surface: var(--ui-warning-soft);
+    --_text: var(--ui-warning-subtle-text);
+}
+:scope:where([data-v-42e76006]:scope):is([data-ui-swatch-state~="tone=red"]) {
+    --_surface: var(--ui-danger-soft);
+    --_text: var(--ui-danger-subtle-text);
+}
+:scope:where([data-v-42e76006]:scope):is([data-ui-swatch-state~="tone=purple"]) {
+    --_surface: var(--ui-accent-soft);
+    --_text: var(--ui-accent-subtle-text);
+}
+:scope:where([data-v-42e76006]:scope):is(:checked) {
+    outline: var(--ui-focus-width) solid var(--_text);
+    outline-offset: var(--ui-focus-width);
+}
+:scope:where([data-v-42e76006]:scope):is(:focus-visible) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
+    outline-offset: var(--ui-focus-width);
+}
+}
+
 /* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
        wrapping into several lines, and a fade at each edge that has more to show says so. */
 
@@ -4437,298 +4835,78 @@ footer[data-v-de6bc526]:empty {
 }
 :is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"])
     .content[data-v-4a58a364] {
-    display: none;
-}
-@media (prefers-reduced-motion: reduce) {
-:scope[data-ui-icon-button-state~="anticipatory"] .content[data-v-4a58a364] {
-      transition: none;
-}
-}
-:scope:where([data-v-4a58a364]:scope):is(:focus-visible) {
-    outline: none;
-    box-shadow: var(--ui-focus-halo);
-}
-:scope:where([data-v-4a58a364]:scope):is([data-ui-icon-button-state~="variant=outline"]:focus-visible) {
-    box-shadow:
-      var(--ui-action-shadow, var(--_ui-action-shadow)),
-      var(--ui-focus-halo);
-}
-:scope:where([data-v-4a58a364]:scope):is([data-ui-icon-button-state~="variant=solid"]:focus-visible) {
-    box-shadow:
-      var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
-      var(--ui-focus-halo);
-}
-:scope:where([data-v-4a58a364]:scope):is(:is(:scope[data-ui-icon-button-state~="variant=outline"], :scope[data-ui-icon-button-state~="variant=solid"]):active:enabled:not([aria-disabled="true"])) {
-    background-image: none;
-    box-shadow: var(--ui-pressed);
-}
-:scope:where([data-v-4a58a364]:scope):is([data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible) {
-    box-shadow:
-      var(--ui-pressed),
-      var(--ui-focus-halo);
-}
-@media (forced-colors: active) {
-:scope:where([data-v-4a58a364]:scope):is([data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled) {
-      outline: var(--ui-focus-width) solid Highlight;
-      outline-offset: calc(-2 * var(--ui-focus-width));
-}
-:scope:where([data-v-4a58a364]:scope):is([data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible) {
-      outline-offset: var(--ui-focus-width);
-}
-}
-:scope:where([data-v-4a58a364]:scope):is(:disabled) {
-    border-color: var(--ui-disabled-border);
-    background-color: var(--ui-disabled-surface);
-    color: var(--ui-disabled-text);
-    filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
-    opacity: var(--ui-icon-button-disabled-opacity, 1);
-    cursor: not-allowed;
-    box-shadow: none;
-    background-image: none;
-}
-:scope:where([data-v-4a58a364]:scope):is([data-ui-icon-button-state~="variant=ghost"]:disabled) {
-    border-color: transparent;
-}
-:scope:where([data-v-4a58a364]:scope) {
-    --_icon-button-icon-default: var(--ui-icon-size-md);
-    /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
-       defaults, which its own --ui-icon-* hooks still override. */
-    --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
-    --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
-}
-:scope:where([data-v-4a58a364]:scope):is([data-ui-icon-button-state~="size=sm"]) {
-    --_icon-button-icon-default: var(--ui-icon-size-sm);
-}
-:scope:where([data-v-4a58a364]:scope):is([data-ui-icon-button-state~="size=lg"]) {
-    --_icon-button-icon-default: var(--ui-icon-size-lg);
-}
-svg[data-v-4a58a364-s] {
-    inline-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
-    block-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
-    flex-shrink: 0;
-    stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
-}
-:scope:where([data-v-4a58a364]:scope):is([hidden]) {
-    display: none;
-}
-}
-
-/* This component's hooks style the element they are set on, and never a nested one. An Input
-       Group sets --_ui-default-input-* for the input inside it, below the input's own hooks. */
-@property --ui-input-border {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-border-hover {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-border-width {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-focus-border {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-focus-outline {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-focus-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-inline-size {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-invalid-border {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-invalid-focus-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-min-block-size {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-radius {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-surface {
-  syntax: "*";
-  inherits: false;
-}
-
-/* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
-
-/* Under touch a small field is still a touch-sized target, as a small button is, and keeps
-   body-size text: below 16px, iOS zooms the page into the focused field. */
-
-/* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
-
-/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-
-/* Forced colors drop box shadows, so the focus ring becomes an outline. */
-
-/* No text-box-trim here: trimming a native input's line box below its line height lets the text
- * scroll vertically inside the field. Native inputs already center their single line. */
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-input) {
-:scope:where([data-v-a8c06d86]:scope) {
-    box-sizing: border-box;
-    display: inline-block;
-    inline-size: var(--ui-input-inline-size, 100%);
-    min-inline-size: 0;
-    min-block-size: var(
-      --ui-input-min-block-size,
-      var(--_ui-default-input-min-block-size, var(--ui-control-size-md))
-    );
-    margin: 0;
-    padding: var(--ui-space-2) var(--ui-space-3);
-    appearance: none;
-    padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3));
-    border: var(
-      --ui-input-border-width,
-      var(--_ui-default-input-border-width, var(--ui-border-width))
-    ) solid
-      var(
-        --ui-input-border,
-        var(--_ui-default-input-border, var(--ui-control-border, var(--ui-border-strong)))
-      );
-    border-radius: var(
-      --ui-input-radius,
-      var(--_ui-default-input-radius, var(--ui-field-radius, var(--ui-radius-md)))
-    );
-    background: var(
-      --ui-input-surface,
-      var(--_ui-default-input-surface, var(--ui-control-surface, var(--ui-surface-elevated)))
-    );
-    color: var(--ui-text-primary);
-    font: inherit;
-    line-height: var(--ui-line-height-tight);
-    box-shadow: var(--ui-input-shadow, var(--_ui-default-input-shadow, var(--ui-control-inset)));
-    transition:
-      border-color var(--ui-motion-fast) var(--ui-motion-ease),
-      box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
-      background-color var(--ui-motion-fast) var(--ui-motion-ease);
-}
-:scope:where([data-v-a8c06d86]:scope):is([data-ui-input-state~="size=sm"]) {
-    min-block-size: var(
-      --ui-input-min-block-size,
-      var(--_ui-default-input-min-block-size, var(--ui-control-size-sm))
-    );
-    padding: var(--ui-space-1) var(--ui-space-2);
-    font-size: var(--ui-font-size-sm);
-}
-:scope:where([data-v-a8c06d86]:scope):is([data-ui-input-state~="size=lg"]) {
-    min-block-size: var(
-      --ui-input-min-block-size,
-      var(--_ui-default-input-min-block-size, var(--ui-control-size-lg))
-    );
-    padding: var(--ui-space-3) var(--ui-space-4);
-    font-size: var(--ui-font-size-md);
-}
-@media (pointer: coarse) {
-:scope:where([data-v-a8c06d86]:scope) {
-      min-block-size: var(
-        --ui-input-min-block-size,
-        var(
-          --_ui-default-input-min-block-size,
-          max(var(--ui-control-size-md), var(--ui-control-min-block-size))
-        )
-      );
+    display: none;
 }
-:scope:where([data-v-a8c06d86]:scope),
-    :scope:where([data-v-a8c06d86]:scope):is([data-ui-input-state~="size=sm"]),
-    :scope:where([data-v-a8c06d86]:scope):is([data-ui-input-state~="size=lg"]) {
-      font-size: var(--ui-font-size-md);
+@media (prefers-reduced-motion: reduce) {
+:scope[data-ui-icon-button-state~="anticipatory"] .content[data-v-4a58a364] {
+      transition: none;
 }
-:scope:where([data-v-a8c06d86]:scope):is([data-ui-input-state~="size=sm"]) {
-      min-block-size: var(
-        --ui-input-min-block-size,
-        var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size))
-      );
 }
+:scope:where([data-v-4a58a364]:scope):is(:focus-visible) {
+    outline: none;
+    box-shadow: var(--ui-focus-halo);
 }
-:scope:where([data-v-a8c06d86]:scope)::selection {
-    background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
-    color: inherit;
+:scope:where([data-v-4a58a364]:scope):is([data-ui-icon-button-state~="variant=outline"]:focus-visible) {
+    box-shadow:
+      var(--ui-action-shadow, var(--_ui-action-shadow)),
+      var(--ui-focus-halo);
 }
-:scope:where([data-v-a8c06d86]:scope)::placeholder {
-    color: var(--ui-control-placeholder, var(--ui-text-secondary));
-    opacity: 1;
+:scope:where([data-v-4a58a364]:scope):is([data-ui-icon-button-state~="variant=solid"]:focus-visible) {
+    box-shadow:
+      var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+      var(--ui-focus-halo);
 }
-:scope:where([data-v-a8c06d86]:scope):is(:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid]))) {
-    border-color: var(
-      --ui-input-border-hover,
-      var(
-        --_ui-default-input-border-hover,
-        var(--ui-control-border-hover, var(--ui-text-secondary))
-      )
-    );
+:scope:where([data-v-4a58a364]:scope):is(:is(:scope[data-ui-icon-button-state~="variant=outline"], :scope[data-ui-icon-button-state~="variant=solid"]):active:enabled:not([aria-disabled="true"])) {
+    background-image: none;
+    box-shadow: var(--ui-pressed);
 }
-:scope:where([data-v-a8c06d86]:scope):is(:focus-visible) {
-    border-color: var(
-      --ui-input-focus-border,
-      var(--_ui-default-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)))
-    );
-    outline: none;
-    box-shadow: var(
-      --ui-input-focus-shadow,
-      var(
-        --_ui-default-input-focus-shadow,
-        var(--ui-control-inset),
-        var(--ui-control-focus-halo-shadow)
-      )
-    );
+:scope:where([data-v-4a58a364]:scope):is([data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible) {
+    box-shadow:
+      var(--ui-pressed),
+      var(--ui-focus-halo);
 }
-:scope:where([data-v-a8c06d86]:scope):is([aria-invalid="true"]),
-  :scope:where([data-v-a8c06d86]:scope):is(:is(:user-invalid, [data-user-invalid])) {
-    border-color: var(
-      --ui-input-invalid-border,
-      var(--_ui-default-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
-    );
+@media (forced-colors: active) {
+:scope:where([data-v-4a58a364]:scope):is([data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled) {
+      outline: var(--ui-focus-width) solid Highlight;
+      outline-offset: calc(-2 * var(--ui-focus-width));
 }
-:scope:where([data-v-a8c06d86]:scope):is(:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
-    box-shadow: var(
-      --ui-input-invalid-focus-shadow,
-      var(
-        --_ui-default-input-invalid-focus-shadow,
-        var(--ui-control-inset),
-        0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
-          in srgb,
-          var(--ui-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
-          transparent
-        )
-      )
-    );
+:scope:where([data-v-4a58a364]:scope):is([data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible) {
+      outline-offset: var(--ui-focus-width);
 }
-:scope:where([data-v-a8c06d86]:scope):is(:disabled) {
-    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+}
+:scope:where([data-v-4a58a364]:scope):is(:disabled) {
+    border-color: var(--ui-disabled-border);
+    background-color: var(--ui-disabled-surface);
     color: var(--ui-disabled-text);
-    box-shadow: none;
+    filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
+    opacity: var(--ui-icon-button-disabled-opacity, 1);
     cursor: not-allowed;
+    box-shadow: none;
+    background-image: none;
 }
-@media (forced-colors: active) {
-:scope:where([data-v-a8c06d86]:scope):is(:focus-visible) {
-      outline: var(
-        --ui-input-focus-outline,
-        var(--_ui-default-input-focus-outline, var(--ui-focus-width) solid Highlight)
-      );
-      outline-offset: var(--ui-border-width);
+:scope:where([data-v-4a58a364]:scope):is([data-ui-icon-button-state~="variant=ghost"]:disabled) {
+    border-color: transparent;
 }
+:scope:where([data-v-4a58a364]:scope) {
+    --_icon-button-icon-default: var(--ui-icon-size-md);
+    /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
+       defaults, which its own --ui-icon-* hooks still override. */
+    --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+    --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
 }
-:scope:where([data-v-a8c06d86]:scope):is([hidden]) {
+:scope:where([data-v-4a58a364]:scope):is([data-ui-icon-button-state~="size=sm"]) {
+    --_icon-button-icon-default: var(--ui-icon-size-sm);
+}
+:scope:where([data-v-4a58a364]:scope):is([data-ui-icon-button-state~="size=lg"]) {
+    --_icon-button-icon-default: var(--ui-icon-size-lg);
+}
+svg[data-v-4a58a364-s] {
+    inline-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+    block-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+    flex-shrink: 0;
+    stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
+}
+:scope:where([data-v-4a58a364]:scope):is([hidden]) {
     display: none;
 }
 }
@@ -4845,77 +5023,6 @@ svg[data-v-4a58a364-s] {
 }
 }
 
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-stack-height {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-stack-gap {
-  syntax: "*";
-  inherits: false;
-}
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-stack) {
-:scope:where([data-v-12a17b88]:scope) {
-    --_layout-gap: var(--ui-space-4);
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    gap: var(--ui-stack-gap, var(--_layout-gap));
-    min-inline-size: 0;
-    max-inline-size: 100%;
-    margin: 0;
-}
-:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="fill"]) {
-    flex: 1;
-    min-block-size: 0;
-}
-:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="height"]) {
-    block-size: calc(var(--ui-stack-height, 0) * 1px);
-    min-block-size: 0;
-}
-:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="gap=none"]) {
-    --_layout-gap: 0px;
-}
-:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="gap=xs"]) {
-    --_layout-gap: var(--ui-space-2);
-}
-:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="gap=s"]) {
-    --_layout-gap: var(--ui-space-3);
-}
-:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="gap=m"]) {
-    --_layout-gap: var(--ui-space-4);
-}
-:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="gap=l"]) {
-    --_layout-gap: var(--ui-space-5);
-}
-:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="gap=xl"]) {
-    --_layout-gap: var(--ui-space-6);
-}
-:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="align=start"]) {
-    align-items: flex-start;
-}
-:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="align=center"]) {
-    align-items: center;
-}
-:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="align=end"]) {
-    align-items: flex-end;
-}
-:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="justify=center"]) {
-    justify-content: center;
-}
-:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="justify=end"]) {
-    justify-content: flex-end;
-}
-:scope:where([data-v-12a17b88]:scope):is([data-ui-stack-state~="justify=between"]) {
-    justify-content: space-between;
-}
-:scope:where([data-v-12a17b88]:scope):is([hidden]) {
-    display: none;
-}
-}
-
 /* Running text, set on the type scale and in a tone that says what it is, so a view never styles
        text of its own. The root is a paragraph unless as= names a span, div, small, strong, label, or
        heading. */
@@ -7664,49 +7771,6 @@ input[data-v-502a1e4a]:focus-visible {
 }
 }
 
-@property --ui-radio-group-invalid-text {
-  syntax: "*";
-  inherits: false;
-}
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-radio-group) {
-:scope:where([data-v-49ebfb5d]:scope) {
-    --_ui-radio-group-invalid-text: var(
-      --ui-radio-group-invalid-text,
-      var(--ui-field-danger, var(--ui-danger-solid))
-    );
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-2);
-    min-inline-size: 0;
-    margin: 0;
-    padding: 0;
-    border: 0;
-}
-legend[data-v-49ebfb5d] {
-    float: inline-start;
-    inline-size: 100%;
-    margin: 0 0 var(--ui-space-2);
-    padding: 0;
-    color: var(--ui-text-primary);
-    font-weight: var(--ui-font-medium);
-}
-legend[data-v-49ebfb5d] + * {
-    clear: both;
-}
-:scope[data-ui-radio-group-state~="invalid"] legend[data-v-49ebfb5d] {
-    color: var(--_ui-radio-group-invalid-text);
-}
-:scope:where([data-v-49ebfb5d]:scope):is([data-ui-radio-group-state~="orientation=vertical"]) {
-    display: inline-grid;
-    justify-items: start;
-}
-:scope:where([data-v-49ebfb5d]:scope):is([hidden]) {
-    display: none;
-}
-}
-
 /* This component's hooks style the element they are set on, and never a nested one. */
 @property --ui-reel-gap {
   syntax: "*";
@@ -10644,46 +10708,6 @@ html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .r
   inline-size: min(15rem, calc(100vw - 2rem));
 }
 
-.looma-editor__chip-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-space-3);
-}
-
-.looma-editor__chip-form input {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: var(--ui-control-min-block-size);
-  padding: var(--ui-space-2);
-  border: var(--ui-border-width) solid var(--ui-control-border);
-  border-radius: var(--ui-field-radius, var(--ui-radius-md));
-  background: var(--ui-control-surface);
-  color: var(--ui-text-primary);
-  font: inherit;
-}
-
-.looma-editor__chip-colors {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--ui-space-1);
-}
-
-.looma-editor__chip-color {
-  display: grid;
-  place-items: center;
-  width: 1.65rem;
-  height: 1.65rem;
-  padding: 0;
-  border: var(--ui-border-width) solid var(--_chip-border);
-  border-radius: 50%;
-  background: var(--_chip-surface);
-  color: var(--_chip-text);
-  font: inherit;
-  font-size: var(--ui-font-size-xs);
-  cursor: pointer;
-}
-
-.looma-editor__chip-form :is(input, button):focus-visible,
 .looma-editor .ProseMirror [data-looma-chip]:focus-visible {
   outline: var(--ui-focus-width) solid var(--ui-focus-ring);
   outline-offset: var(--ui-focus-width);
@@ -10772,8 +10796,7 @@ html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .r
   white-space: nowrap;
 }
 
-.looma-editor .ProseMirror [data-looma-chip],
-.looma-editor__chip-color {
+.looma-editor .ProseMirror [data-looma-chip] {
   --_chip-tone-surface: var(--ui-surface-subtle);
   --_chip-tone-text: var(--ui-text-secondary);
   --_chip-surface: var(--ui-editor-chip-surface, var(--_chip-tone-surface));
@@ -10781,32 +10804,27 @@ html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .r
   --_chip-border: var(--ui-editor-chip-border, color-mix(in srgb, var(--_chip-surface) 75%, var(--_chip-text) 25%));
 }
 
-.looma-editor .ProseMirror [data-looma-chip][data-color="blue"],
-.looma-editor__chip-color[data-color="blue"] {
+.looma-editor .ProseMirror [data-looma-chip][data-color="blue"] {
   --_chip-tone-surface: var(--ui-info-soft);
   --_chip-tone-text: var(--ui-info-subtle-text);
 }
 
-.looma-editor .ProseMirror [data-looma-chip][data-color="green"],
-.looma-editor__chip-color[data-color="green"] {
+.looma-editor .ProseMirror [data-looma-chip][data-color="green"] {
   --_chip-tone-surface: var(--ui-success-soft);
   --_chip-tone-text: var(--ui-success-subtle-text);
 }
 
-.looma-editor .ProseMirror [data-looma-chip][data-color="yellow"],
-.looma-editor__chip-color[data-color="yellow"] {
+.looma-editor .ProseMirror [data-looma-chip][data-color="yellow"] {
   --_chip-tone-surface: var(--ui-warning-soft);
   --_chip-tone-text: var(--ui-warning-subtle-text);
 }
 
-.looma-editor .ProseMirror [data-looma-chip][data-color="red"],
-.looma-editor__chip-color[data-color="red"] {
+.looma-editor .ProseMirror [data-looma-chip][data-color="red"] {
   --_chip-tone-surface: var(--ui-danger-soft);
   --_chip-tone-text: var(--ui-danger-subtle-text);
 }
 
-.looma-editor .ProseMirror [data-looma-chip][data-color="purple"],
-.looma-editor__chip-color[data-color="purple"] {
+.looma-editor .ProseMirror [data-looma-chip][data-color="purple"] {
   --_chip-tone-surface: var(--ui-accent-soft);
   --_chip-tone-text: var(--ui-accent-subtle-text);
 }