@threadlabs/looma 0.12.6 → 0.13.0

package/styles/ui-dialog.css

@@ -1,4 +1,16 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-dialog-duration {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-dialog-max-width {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-dialog-viewport-gap {
+      syntax: "*";
+      inherits: false;
+    }
 @keyframes ui-dialog-enter {
       from {
         opacity: 0;
@@ -11,7 +23,12 @@
       }
     }
 @scope ([data-component~="ui-dialog"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-dialog-duration: var(--ui-dialog-duration);
+
       position: fixed;
       inset: 0;
       box-sizing: border-box;
@@ -171,18 +188,20 @@
     :scope::backdrop {
       background-color: transparent;
       transition:
-        background-color var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
-        display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
-        overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
+        background-color var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
+        display var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
+        overlay var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
     }
 
     :scope[open]::backdrop {
       background-color: var(--ui-overlay-backdrop);
-      animation: ui-dialog-backdrop-enter var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
+      animation: ui-dialog-backdrop-enter var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
     }
 }
 @scope ([data-component~="ui-dialog"]) to ([data-component]) {
-/* Header and actions stay pinned; only the body scrolls when content is long. */
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Header and actions stay pinned; only the body scrolls when content is long. */
 
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
 

package/styles/ui-disclosure.css

@@ -1,7 +1,26 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-disclosure-trigger-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-disclosure-trigger-padding-block {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-disclosure-trigger-padding-inline {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-disclosure"]) to ([data-component], [data-slotted]) {
-/* Density resolves into the summary row's own values; the public tokens still override them. */
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Density resolves into the summary row's own values; the public tokens still override them. */
     :scope {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-disclosure-trigger-min-block-size: var(--ui-disclosure-trigger-min-block-size);
+      --_ui-disclosure-trigger-padding-block: var(--ui-disclosure-trigger-padding-block);
+      --_ui-disclosure-trigger-padding-inline: var(--ui-disclosure-trigger-padding-inline);
+
       --_trigger-min-block-size: var(--ui-control-size);
       --_trigger-padding-block: var(--ui-space-2);
       --_trigger-padding-inline: var(--ui-space-3);
@@ -29,9 +48,9 @@
       gap: var(--ui-space-3);
       align-items: center;
       inline-size: 100%;
-      min-block-size: var(--ui-disclosure-trigger-min-block-size, var(--_trigger-min-block-size));
-      padding: var(--ui-disclosure-trigger-padding-block, var(--_trigger-padding-block))
-        var(--ui-disclosure-trigger-padding-inline, var(--_trigger-padding-inline));
+      min-block-size: var(--_ui-disclosure-trigger-min-block-size, var(--_trigger-min-block-size));
+      padding: var(--_ui-disclosure-trigger-padding-block, var(--_trigger-padding-block))
+        var(--_ui-disclosure-trigger-padding-inline, var(--_trigger-padding-inline));
       border: 0;
       background: transparent;
       color: inherit;
@@ -51,7 +70,7 @@
       box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
     }
     .trigger:disabled {
-      color: var(--ui-text-muted);
+      color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
 
@@ -99,7 +118,9 @@
     }
 }
 @scope ([data-component~="ui-disclosure"]) to ([data-component]) {
-/* Density resolves into the summary row's own values; the public tokens still override them. */
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Density resolves into the summary row's own values; the public tokens still override them. */
 
     /* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
      * select or combobox. Stacked disclosures share their dividers. */

package/styles/ui-editable.css

@@ -120,7 +120,7 @@
     }
 
     :scope[data-ui-editable-state~="disabled"] .preview {
-      color: var(--ui-text-muted);
+      color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
 

package/styles/ui-editor-slash-menu.css

@@ -122,8 +122,8 @@
     }
 
     .icon {
-      --ui-icon-size: 1rem;
-      --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+      --_ui-default-icon-size: 1rem;
+      --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
     }
 
     .body {

package/styles/ui-editor-table-context-menu.css

@@ -42,8 +42,8 @@
     }
 
     :scope button {
-      --ui-icon-size: 1rem;
-      --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+      --_ui-default-icon-size: 1rem;
+      --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
     }
 
     :scope button:hover:not(:disabled) {

package/styles/ui-editor-table-overlay.css

@@ -67,8 +67,8 @@
     }
 
     .handle {
-      --ui-icon-size: 14px;
-      --ui-icon-stroke-width: 2;
+      --_ui-default-icon-size: 14px;
+      --_ui-default-icon-stroke-width: 2;
     }
 
     .handle[data-ui-proximity="near"],
@@ -216,8 +216,8 @@
 
     .selector:hover,
     .cell-menu:hover {
-      background: var(--ui-icon-button-hover-surface, var(--ui-surface-muted));
-      color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
+      background: var(--ui-surface-muted);
+      color: var(--ui-text-primary);
       box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
     }
 
@@ -241,8 +241,8 @@
       display: block;
       width: 14px;
       height: 14px;
-      --ui-icon-size: 14px;
-      --ui-icon-stroke-width: 2;
+      --_ui-default-icon-size: 14px;
+      --_ui-default-icon-stroke-width: 2;
       opacity: 0;
       transform: scale(0.72);
       transition:
@@ -304,8 +304,8 @@
     }
 
     .cell-menu {
-      --ui-icon-size: 15px;
-      --ui-icon-stroke-width: 2;
+      --_ui-default-icon-size: 15px;
+      --_ui-default-icon-stroke-width: 2;
     }
 
     :scope[hidden] {

package/styles/ui-editor-table-toolbar.css

@@ -103,13 +103,13 @@
     }
 
     :scope {
-      --ui-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
-      --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+      --_ui-default-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
+      --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
     }
 
     .chevron {
       display: inline-flex;
-      --ui-icon-size: 0.875rem;
+      --_ui-default-icon-size: 0.875rem;
     }
 
     :scope .icon-button {

package/styles/ui-floating-action-button.css

@@ -1,6 +1,20 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-floating-action-button-inset-block-end {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-floating-action-button-inset-inline-end {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-floating-action-button-z-index {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-floating-action-button"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
       position: fixed;
       inset-block-end: calc(var(--ui-floating-action-button-inset-block-end, var(--ui-space-6)) + env(safe-area-inset-bottom));
       inset-inline-end: max(
@@ -63,7 +77,9 @@
     }
 }
 @scope ([data-component~="ui-floating-action-button"]) to ([data-component]) {
-:where([data-slotted], [data-slotted] *):is(svg) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :where([data-slotted], [data-slotted] *):is(svg) {
       inline-size: var(--ui-icon-size-lg);
       block-size: var(--ui-icon-size-lg);
       flex-shrink: 0;

package/styles/ui-form-field.css

@@ -1,6 +1,15 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-form-field-help-min-block-size {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-form-field"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
+
       display: grid;
       gap: var(--ui-space-2);
       min-inline-size: 0;
@@ -35,11 +44,13 @@
     }
 }
 @scope ([data-component~="ui-form-field"]) to ([data-component]) {
-/* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* Each named region styles whatever fills it, however it was slotted (slot="…" in HTML, #label
        in Vue), and generates no box of its own, so an empty region adds no gap. */
 
     .help > :where([data-slotted], [data-slotted] *):is(*) {
-      min-block-size: var(--ui-form-field-help-min-block-size, 0);
+      min-block-size: var(--_ui-form-field-help-min-block-size, 0);
     }
 
     /* An error reads in the danger colour, the one the invalid control's border takes. */

package/styles/ui-grid.css

@@ -1,6 +1,16 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-grid-gap {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-grid-min {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-grid"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
       --_grid-gap: var(--ui-space-4);
       --_grid-min: 12rem;
       display: grid;
@@ -39,5 +49,7 @@
     }
 }
 @scope ([data-component~="ui-grid"]) to ([data-component]) {
-/* A component that sets its display still honours the hidden attribute on its root. */
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-icon-button.css

@@ -1,6 +1,84 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-icon-button-active-scale {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-button-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-button-disabled-filter {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-button-disabled-opacity {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-button-hover-border {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-button-hover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-button-hover-text {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-button-icon-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-button-icon-stroke-width {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-button-outline-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-button-outline-text {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-button-radius {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-button-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-button-solid-hover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-button-solid-shadow {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-button-solid-surface {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-button-solid-text {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-button-surface {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-icon-button"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
+      /* Hooks do not inherit, so the parts below read them from the root. */
+      --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
+      --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
+
       display: inline-flex;
       color: var(--ui-text-secondary);
     }
@@ -187,7 +265,9 @@
     }
 }
 @scope ([data-component~="ui-icon-button"]) to ([data-component]) {
-/* At rest an anticipatory button shows only its guide dot; proximity, hover, or focus reveals the
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* At rest an anticipatory button shows only its guide dot; proximity, hover, or focus reveals the
      * surface and icon. The root is the native button, so hiding it outright would hide the dot
      * too, and slotted icons sit outside this scope; `color: transparent` hides currentColor icons. */
     @media (hover: hover) and (pointer: fine) {
@@ -205,10 +285,10 @@
     /* Disabled washes the button out the way Button does: the same shape, one filter. */
 
     :where([data-slotted], [data-slotted] *):is(svg) {
-      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));
+      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);
+      stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/styles/ui-icon.css

@@ -1,16 +1,30 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@property --ui-icon-size {
+      syntax: "*";
+      inherits: false;
+    }
+@property --ui-icon-stroke-width {
+      syntax: "*";
+      inherits: false;
+    }
 @scope ([data-component~="ui-icon"]) to ([data-component], [data-slotted]) {
-:scope {
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    :scope {
+      /* Hooks do not inherit, so the svg reads the stroke from the root. A Looma component that
+         sizes the icons it renders sets --_ui-default-icon-*, which the icon's own hooks override. */
+      --_ui-icon-stroke-width: var(--ui-icon-stroke-width, var(--_ui-default-icon-stroke-width));
+
       display: inline-flex;
       flex: none;
-      inline-size: var(--ui-icon-size, 1em);
-      block-size: var(--ui-icon-size, 1em);
+      inline-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
+      block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
     }
 
     svg {
       inline-size: 100%;
       block-size: 100%;
-      stroke-width: var(--ui-icon-stroke-width, 2);
+      stroke-width: var(--_ui-icon-stroke-width, 2);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
@@ -19,5 +33,7 @@
     }
 }
 @scope ([data-component~="ui-icon"]) to ([data-component]) {
-/* A component that sets its display still honours the hidden attribute on its root. */
+/* This component's hooks style the element they are set on, and never a nested one. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-input-group.css

@@ -9,19 +9,20 @@
        thing the field is for ("Continue" after a site's address), so it reads as the field's action
        and not the form's. */
     :scope {
-      /* The group's own border and height stand for the input's, so the group is a lone Input's height. */
-      --ui-input-border-width: 0;
-      --ui-input-min-block-size: 0;
-      --ui-input-border: transparent;
-      --ui-input-border-hover: transparent;
-      --ui-input-focus-border: transparent;
-      --ui-input-invalid-border: transparent;
-      --ui-input-invalid-focus-shadow: none;
-      --ui-input-shadow: none;
-      --ui-input-focus-shadow: none;
-      --ui-input-focus-outline: none;
-      --ui-input-radius: 0;
-      --ui-input-surface: transparent;
+      /* The group's own border and height stand for the input's, so the group is a lone Input's height.
+         Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
+      --_ui-default-input-border-width: 0;
+      --_ui-default-input-min-block-size: 0;
+      --_ui-default-input-border: transparent;
+      --_ui-default-input-border-hover: transparent;
+      --_ui-default-input-focus-border: transparent;
+      --_ui-default-input-invalid-border: transparent;
+      --_ui-default-input-invalid-focus-shadow: none;
+      --_ui-default-input-shadow: none;
+      --_ui-default-input-focus-shadow: none;
+      --_ui-default-input-focus-outline: none;
+      --_ui-default-input-radius: 0;
+      --_ui-default-input-surface: transparent;
 
       display: flex;
       align-items: stretch;

package/styles/ui-input.css

@@ -1,21 +1,73 @@
 /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@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-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;
+    }
 @scope ([data-component~="ui-input"]) to ([data-component], [data-slotted]) {
-:scope {
+/* 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. */
+
+    :scope {
       box-sizing: border-box;
       display: inline-block;
       inline-size: 100%;
       min-inline-size: 0;
-      min-block-size: var(--ui-input-min-block-size, var(--ui-control-size-md));
+      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;
-      border: var(--ui-input-border-width, 1px) solid var(--ui-input-border, var(--ui-control-border, var(--ui-border-strong)));
-      border-radius: var(--ui-input-radius, var(--ui-radius-md));
-      background: var(--ui-input-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
+      border: var(--ui-input-border-width, var(--_ui-default-input-border-width, 1px)) 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-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-md);
-      box-shadow: var(--ui-input-shadow, var(--ui-control-inset));
+      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),
@@ -34,32 +86,35 @@
     }
 
     :scope:hover:not(:focus):not(:disabled) {
-      border-color: var(--ui-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)));
+      border-color: var(--ui-input-border-hover, var(--_ui-default-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary))));
     }
 
     :scope:focus-visible {
-      border-color: var(--ui-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
+      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-control-inset), var(--ui-control-focus-halo-shadow));
+      box-shadow: var(--ui-input-focus-shadow, var(--_ui-default-input-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow)));
     }
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
     :scope[aria-invalid="true"],
     :scope:is(:user-invalid, [data-user-invalid]) {
-      border-color: var(--ui-input-invalid-border, var(--ui-danger-solid));
+      border-color: var(--ui-input-invalid-border, var(--_ui-default-input-invalid-border, var(--ui-danger-solid)));
     }
 
     :scope:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
       box-shadow: var(
         --ui-input-invalid-focus-shadow,
-        var(--ui-control-inset),
-        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent)
+        var(
+          --_ui-default-input-invalid-focus-shadow,
+          var(--ui-control-inset),
+          0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent)
+        )
       );
     }
 
     :scope:disabled {
       background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-      color: var(--ui-text-muted);
+      color: var(--ui-disabled-text);
       box-shadow: none;
       cursor: not-allowed;
     }
@@ -67,7 +122,7 @@
     /* Forced colors drop box shadows, so the focus ring becomes an outline. */
     @media (forced-colors: active) {
       :scope:focus-visible {
-        outline: var(--ui-input-focus-outline, 2px solid Highlight);
+        outline: var(--ui-input-focus-outline, var(--_ui-default-input-focus-outline, 2px solid Highlight));
         outline-offset: 1px;
       }
     }
@@ -81,7 +136,10 @@
     }
 }
 @scope ([data-component~="ui-input"]) to ([data-component]) {
-/* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
+/* 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. */
+
+    /* 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. */