@threadlabs/looma 0.22.14 → 0.23.1

package/vue/UiNavItem.vue

@@ -23,10 +23,19 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'current' },
       description:
-        'Marks the item as where you are: it takes the selected surface, a stronger label, and a bar on its start edge, and states aria-current, which assistive\n      technology announces. "true" means the current page (aria-current="page"); "step" marks the current step of a process, and "location" the current place in\n      a set, such as a section of a record. Set it on one item at a time.',
+        'Marks the item as where you are: it takes the selected surface, the selected text, and the chosen surface or line treatment, and states aria-current, which\n      assistive technology announces. "true" means the current page (aria-current="page"); "step" marks the current step of a process, and "location" the\n      current place in a set, such as a section of a record. Set it on one item at a time.',
       values: ['true', 'false', 'page', 'step', 'location'],
       default: 'false',
     },
+    density: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'density' },
+      description:
+        'Compact uses smaller type and row spacing to sit alongside a compact tree; comfortable keeps the regular navigation row.',
+      values: ['comfortable', 'compact'],
+      default: 'comfortable',
+    },
     href: {
       type: { kind: 'terminal', name: 'string' },
       required: false,
@@ -47,6 +56,15 @@ const propValidityContract = {
       target: { attribute: 'target' },
       description: 'Where a link opens, as on a native link. Only meaningful with as="a".',
     },
+    variant: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'variant' },
+      description:
+        'surface marks the current row with a quiet filled surface and shared corners. line uses square corners and a continuous logical start edge. Both retain the\n      resting label weight and expose aria-current.',
+      values: ['surface', 'line'],
+      default: 'surface',
+    },
   },
 } as const
 const props = defineProps({
@@ -55,16 +73,23 @@ const props = defineProps({
     type: null as unknown as PropType<'true' | 'false' | 'page' | 'step' | 'location' | null>,
     default: 'false',
   },
+  density: {
+    type: null as unknown as PropType<'comfortable' | 'compact' | null>,
+    default: 'comfortable',
+  },
   href: { type: null as unknown as PropType<string | null>, default: null },
   rel: { type: null as unknown as PropType<string | null>, default: null },
   target: { type: null as unknown as PropType<string | null>, default: null },
+  variant: { type: null as unknown as PropType<'surface' | 'line' | null>, default: 'surface' },
 })
 const acceptedProps: Record<string, unknown> = {
   as: 'button',
   current: 'false',
+  density: 'comfortable',
   href: null,
   rel: null,
   target: null,
+  variant: 'surface',
 }
 const checkedProps = computed(() => ({
   as: checkedProp<'button' | 'a'>(
@@ -81,6 +106,13 @@ const checkedProps = computed(() => ({
     'current',
     acceptedProps,
   ) as 'true' | 'false' | 'page' | 'step' | 'location',
+  density: checkedProp<'comfortable' | 'compact'>(
+    props['density'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'density',
+    acceptedProps,
+  ) as 'comfortable' | 'compact',
   href: checkedProp<string>(
     props['href'],
     { kind: 'terminal', name: 'string' },
@@ -102,6 +134,13 @@ const checkedProps = computed(() => ({
     'target',
     acceptedProps,
   ),
+  variant: checkedProp<'surface' | 'line'>(
+    props['variant'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'variant',
+    acceptedProps,
+  ) as 'surface' | 'line',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -162,6 +201,18 @@ if (
   )
 }
 
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    checkedProps.value.variant && 'variant',
+    checkedProps.value.variant != null
+    && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
+    checkedProps.value.density && 'density',
+    checkedProps.value.density != null
+    && `density=${encodeURIComponent(checkedProps.value.density)}`,
+  ].filter(Boolean).join(' ')
+)
+
 function text(value: unknown): string {
   if (Array.isArray(value)) return value.map(text).join(' ')
   return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
@@ -206,9 +257,12 @@ function attribute(value: unknown): any {
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
+    :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
     :data-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
     :data-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
+    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-nav-item-state="hostState || undefined"
     ref="@html-next/root"
   ><span class="indicator" aria-hidden="true"></span>
     <span class="leading"><slot name="leading" /></span>
@@ -241,9 +295,12 @@ function attribute(value: unknown): any {
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
+    :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-href="reflectedProp('href', 'href', checkedProps.href, undefined, false)"
     :data-rel="reflectedProp('rel', 'rel', checkedProps.rel, undefined, false)"
     :data-target="reflectedProp('target', 'target', checkedProps.target, undefined, false)"
+    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
+    :data-ui-nav-item-state="hostState || undefined"
     ref="@html-next/root"
   >
     <span class="indicator" aria-hidden="true"></span>
@@ -277,7 +334,7 @@ function attribute(value: unknown): any {
    belongs to. Label and description are one line each and end in an ellipsis, so every item in a
    navigation has the same height and the rail never grows sideways. */
 [data-component~="ui-nav-item"] {
-  --_indicator-width: var(--ui-nav-item-indicator-width, 3px);
+  --_indicator-width: var(--ui-nav-item-indicator-width, var(--ui-accent-line-width));
   --_indicator-color: var(--ui-nav-item-indicator-color, var(--ui-accent));
   position: relative;
   box-sizing: border-box;
@@ -291,11 +348,11 @@ function attribute(value: unknown): any {
   padding-block: var(--ui-space-2);
   padding-inline: var(--ui-space-3);
   border: 0;
-  border-radius: var(--ui-radius-md);
+  border-radius: var(--ui-selection-radius);
   background: transparent;
   color: var(--ui-text-secondary);
   font: inherit;
-  font-weight: var(--ui-font-medium);
+  font-weight: var(--ui-font-normal);
   text-align: start;
   text-decoration: none;
   cursor: pointer;
@@ -313,32 +370,43 @@ function attribute(value: unknown): any {
 /* The ring is an outline, drawn inside the item: forced colors keep an outline where they drop a
    box shadow, and a scrolling rail cannot clip a ring that stays within the item. */
 [data-component~="ui-nav-item"]:focus-visible {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: -2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: calc(-1 * var(--ui-focus-width));
 }
 
 [data-component~="ui-nav-item"][aria-current] {
-  background: var(--ui-nav-item-current-surface, var(--ui-accent-soft));
-  color: var(--ui-accent-subtle-text, var(--ui-text-primary));
-  font-weight: var(--ui-font-semibold);
+  background: var(--ui-nav-item-current-surface, var(--ui-selection-surface));
+  color: var(--ui-selection-text);
 }
 
-/* The bar on the start edge is a border, not a fill: forced colors replace backgrounds but keep a
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=line"] {
+  border-radius: 0;
+}
+
+/* A line treatment has straight corners and a continuous edge. Surface treatment has
+   shared rounded corners and no edge marker; never combine the two geometries.
+   The line is a border, not a fill: forced colors replace backgrounds but keep a
    border, so the current item stays marked in high contrast. Logical edges mirror it in a
    right-to-left page. */
 .indicator {
   position: absolute;
-  inset-block: var(--ui-space-2);
+  inset-block: 0;
   inset-inline-start: 0;
   display: none;
   border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
 }
 
-[data-component~="ui-nav-item"][aria-current] .indicator {
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=line"][aria-current] .indicator {
   display: block;
 }
 
 @media (forced-colors: active) {
+  /* System colors may erase the selected fill. Trace the complete surface, without
+     creating an edge stripe; the stronger keyboard focus outline keeps precedence. */
+  [data-component~="ui-nav-item"][data-ui-nav-item-state~="variant=surface"][aria-current]:not(:focus-visible) {
+    outline: var(--ui-border-width) solid Highlight;
+    outline-offset: calc(-1 * var(--ui-border-width));
+  }
   .indicator {
     border-inline-start-color: Highlight;
   }
@@ -381,6 +449,22 @@ function attribute(value: unknown): any {
   line-height: var(--ui-line-height-tight);
 }
 
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] {
+  min-block-size: var(--ui-control-size-sm);
+  padding-block: var(--ui-space-1);
+  padding-inline: var(--ui-space-2);
+}
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] .leading,
+[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] .label {
+  font-size: var(--ui-font-size-sm);
+}
+
+@media (pointer: coarse) {
+  [data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] {
+    min-block-size: var(--ui-control-min-block-size);
+  }
+}
+
 /* An unused region takes no space. */
 .leading:empty,
 .description:empty {

package/vue/UiPopover.vue

@@ -339,7 +339,8 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
   overflow: auto;
   padding: var(--_ui-popover-padding, var(--ui-space-3));
   background: var(--_ui-popover-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-  border: 1px solid var(--_ui-popover-border, var(--ui-overlay-border, var(--ui-border-strong)));
+  border: var(--ui-border-width) solid
+    var(--_ui-popover-border, var(--ui-overlay-border, var(--ui-border-strong)));
   border-radius: var(--_ui-popover-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
   box-shadow: var(
     --_ui-popover-shadow,

package/vue/UiRadio.vue

@@ -328,8 +328,8 @@ input {
 }
 
 input:focus-visible {
-  outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
-  outline-offset: 2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
+  outline-offset: var(--ui-focus-width);
 }
 
 [data-component~="ui-radio"][data-ui-radio-state~="disabled"] {

package/vue/UiSearchResultRow.vue

@@ -204,8 +204,8 @@ const hostState = computed(() =>
   align-items: flex-start;
   gap: var(--ui-search-result-row-gap, var(--ui-space-3));
   background: var(--ui-search-result-row-surface, transparent);
-  border: 1px solid var(--ui-search-result-row-border, transparent);
-  border-radius: var(--ui-radius-md);
+  border: var(--ui-border-width) solid var(--ui-search-result-row-border, transparent);
+  border-radius: var(--ui-selection-radius);
   color: inherit;
   cursor: pointer;
   text-align: left;
@@ -221,6 +221,18 @@ const hostState = computed(() =>
   font-family: var(--ui-font-family-sans, sans-serif);
 }
 
+/* Slot wrappers own their line boxes even when an app makes buttons inherit body typography. */
+[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="density=compact"]
+  .title {
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height);
+}
+
+[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="density=compact"] .meta {
+  font-size: var(--ui-font-size-xs);
+  line-height: var(--ui-line-height);
+}
+
 [data-component~="ui-search-result-row"]:hover:enabled {
   background: var(
     --ui-search-result-row-hover-surface,
@@ -231,13 +243,14 @@ const hostState = computed(() =>
 [data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"] {
   background: var(
     --ui-search-result-row-selected-bg,
-    var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%))
+    var(--ui-selection-surface)
   );
+  color: var(--ui-selection-text);
 }
 
 [data-component~="ui-search-result-row"]:focus-visible {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: -2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: calc(-1 * var(--ui-focus-width));
 }
 
 [data-component~="ui-search-result-row"]:disabled {
@@ -282,6 +295,13 @@ const hostState = computed(() =>
   margin: 0;
 }
 
+@media (forced-colors: active) {
+  [data-component~="ui-search-result-row"][data-ui-search-result-row-state~="selected"]:not(:focus-visible):not(:disabled) {
+    outline: var(--ui-border-width) solid Highlight;
+    outline-offset: calc(-1 * var(--ui-border-width));
+  }
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-search-result-row"][hidden] {
   display: none;

package/vue/UiSearchShell.vue

@@ -318,7 +318,7 @@ dialog[data-ui-backdrop-hidden]::backdrop {
     --_ui-search-shell-surface,
     var(--ui-overlay-surface, var(--ui-surface-elevated))
   );
-  border: 1px solid
+  border: var(--ui-border-width) solid
     var(--_ui-search-shell-border, var(--ui-overlay-border, var(--ui-border-strong)));
   border-radius: var(--_ui-search-shell-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
   box-shadow: var(
@@ -336,7 +336,7 @@ dialog[data-ui-backdrop-hidden]::backdrop {
   inline-size: 100%;
   min-block-size: var(--ui-control-min-block-size);
   padding: var(--ui-space-2) var(--ui-space-3);
-  border: 1px solid var(--ui-control-border);
+  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);
@@ -346,8 +346,8 @@ dialog[data-ui-backdrop-hidden]::backdrop {
 
 :slotted(input[slot="search"]:focus-visible) {
   border-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: 2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-focus-width);
 }
 
 .status,

package/vue/UiSection.vue

@@ -166,19 +166,19 @@ const hostState = computed(() =>
 
 [data-component~="ui-section"][data-ui-section-state~="variant=card"] {
   padding: var(--ui-space-5);
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
   background: var(--ui-surface-raised);
 }
 
 [data-component~="ui-section"][data-ui-section-state~="variant=divided"] {
   padding-block-start: var(--ui-space-6);
-  border-block-start: 1px solid var(--ui-border-divider);
+  border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
 }
 
 [data-component~="ui-section"][data-ui-section-state~="variant=card"][data-ui-section-state~="tone=danger"] {
   border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
-  border-inline-start: 4px solid var(--ui-danger);
+  border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
   background: var(--ui-danger-soft);
 }
 

package/vue/UiSelect.vue

@@ -278,7 +278,8 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
   min-block-size: var(--ui-control-size-md);
   margin: 0;
   padding: var(--ui-space-2) var(--ui-space-3);
-  border: 1px solid var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
+  border: var(--ui-border-width) solid
+    var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
   border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
   background-color: var(--ui-select-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
   color: var(--ui-text-primary);
@@ -333,7 +334,7 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
   box-shadow: var(
     --ui-select-invalid-focus-shadow,
     var(--ui-control-inset),
-    0 0 0 3px color-mix(
+    0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
       in srgb,
       var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
       transparent

package/vue/UiSeparator.vue

@@ -114,12 +114,14 @@ if (
   align-self: stretch;
   margin: 0;
   border: 0;
-  border-block-start: 1px solid var(--ui-separator-color, var(--ui-border-divider));
+  border-block-start: var(--ui-border-width) solid
+    var(--ui-separator-color, var(--ui-border-divider));
 }
 
 [data-component~="ui-separator"][aria-orientation="vertical"] {
   block-size: auto;
   border-block-start: 0;
-  border-inline-start: 1px solid var(--ui-separator-color, var(--ui-border-divider));
+  border-inline-start: var(--ui-border-width) solid
+    var(--ui-separator-color, var(--ui-border-divider));
 }
 </style>

package/vue/UiSidebar.vue

@@ -383,12 +383,14 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
   max-inline-size: 100%;
   min-block-size: 0;
   background: var(--ui-sidebar-surface, var(--ui-surface-default));
-  border-inline-end: 1px solid var(--ui-sidebar-border, var(--ui-border-divider));
+  border-inline-end: var(--ui-border-width) solid
+    var(--ui-sidebar-border, var(--ui-border-divider));
 }
 
 [data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"] {
   border-inline-end: 0;
-  border-inline-start: 1px solid var(--ui-sidebar-border, var(--ui-border-divider));
+  border-inline-start: var(--ui-border-width) solid
+    var(--ui-sidebar-border, var(--ui-border-divider));
 }
 
 /* The panel's content scrolls, and each edge that hides content fades: the scroll fade every
@@ -471,7 +473,7 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
   inset-inline-start: 50%;
   inline-size: 6px;
   block-size: 22px;
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-round);
   background: var(--ui-surface-elevated);
   opacity: 0;

package/vue/UiStatusMessage.vue

@@ -192,7 +192,7 @@ function attribute(value: unknown): any {
 
 [data-component~="ui-status-message"][data-ui-status-message-state~="layout=panel"] {
   padding: var(--ui-space-6);
-  border: 1px dashed var(--ui-border-strong);
+  border: var(--ui-border-width) dashed var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
 }
 

package/vue/UiSwitch.vue

@@ -331,7 +331,7 @@ input {
   width: var(--_ui-switch-track-width, 2.5rem);
   height: var(--_ui-switch-track-height, 1.5rem);
   padding: 0;
-  border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+  border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
   border-radius: var(--ui-radius-round);
   background-color: var(--ui-control-surface, var(--ui-surface-default));
   box-shadow: var(--ui-control-inset);
@@ -368,8 +368,8 @@ input:checked::after {
 }
 
 input:focus-visible {
-  outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
-  outline-offset: 2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
+  outline-offset: var(--ui-focus-width);
 }
 
 [data-component~="ui-switch"][data-ui-switch-state~="disabled"] {

package/vue/UiTable.vue

@@ -198,8 +198,8 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
 }
 
 [data-component~="ui-table"]:focus-visible {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: -2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: calc(-1 * var(--ui-focus-width));
 }
 
 [data-component~="ui-table"][data-ui-table-state~="density=compact"] {
@@ -232,7 +232,7 @@ useComponentHost(() => import('../components/ui-table/ui-table.js'), {
 :slotted(td) {
   block-size: var(--_row-size);
   padding: var(--_pad-block) var(--_pad-inline);
-  border-block-end: 1px solid var(--ui-border-subtle);
+  border-block-end: var(--ui-border-width) solid var(--ui-border-subtle);
   text-align: start;
   vertical-align: middle;
 }

package/vue/UiTabs.vue

@@ -410,17 +410,17 @@ function uniqueKeys<T>(
   overflow-y: hidden;
   overscroll-behavior: contain;
   scrollbar-width: thin;
-  border-block-end: 1px solid var(--ui-border-divider);
+  border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
 }
 
 .list button,
 .list > :slotted(button[slot="tab"]) {
   min-block-size: var(--_ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
-  margin: 0 0 -1px;
+  margin: 0 0 calc(-1 * var(--ui-border-width));
   padding: var(--_ui-tabs-tab-padding-block, var(--_tab-padding-block))
     var(--_ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
   border: 0;
-  border-block-end: 2px solid transparent;
+  border-block-end: var(--ui-accent-line-width) solid transparent;
   background: transparent;
   color: var(--ui-text-secondary);
   font: inherit;
@@ -470,7 +470,8 @@ function uniqueKeys<T>(
 .list > :slotted(button[slot="tab"]:focus-visible) {
   position: relative;
   outline: none;
-  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+  box-shadow: inset 0 0 0 var(--ui-focus-width)
+    color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
   border-radius: var(--ui-radius-sm);
 }
 
@@ -490,16 +491,16 @@ function uniqueKeys<T>(
   grid-auto-flow: row;
   grid-auto-columns: auto;
   border-block-end: 0;
-  border-inline-end: 1px solid var(--ui-border-divider);
+  border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
 }
 
 [data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"] .list button,
 [data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"]
   .list
   > :slotted(button[slot="tab"]) {
-  margin: 0 -1px 0 0;
+  margin: 0 calc(-1 * var(--ui-border-width)) 0 0;
   border-block-end: 0;
-  border-inline-end: 2px solid transparent;
+  border-inline-end: var(--ui-accent-line-width) solid transparent;
   text-align: start;
 }
 

package/vue/UiTextarea.vue

@@ -314,7 +314,7 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
   padding: var(--ui-space-2) var(--ui-space-3);
   appearance: none;
   resize: vertical;
-  border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+  border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
   border-radius: var(--ui-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)));
   background: var(--ui-control-surface, var(--ui-surface-elevated));
   color: var(--ui-text-primary);
@@ -362,7 +362,7 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
   box-shadow: var(
     --ui-textarea-invalid-focus-shadow,
     var(--ui-control-inset),
-    0 0 0 3px color-mix(
+    0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
       in srgb,
       var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
       transparent

package/vue/UiToast.vue

@@ -241,8 +241,10 @@ function attribute(value: unknown): any {
   inline-size: 100%;
   margin: 0;
   padding: var(--ui-space-3) var(--ui-space-4);
-  border: 1px solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-strong)));
-  border-inline-start: 3px solid var(--ui-toast-accent, var(--_ui-toast-accent));
+  border: var(--ui-border-width) solid
+    var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-strong)));
+  border-inline-start: var(--ui-accent-line-width) solid
+    var(--ui-toast-accent, var(--_ui-toast-accent));
   border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
   background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
   color: var(--ui-text-primary);

package/vue/UiToastRegion.vue

@@ -401,7 +401,7 @@ function uniqueKeys<T>(
   grid-template-columns: 1fr auto;
   gap: var(--ui-space-2);
   align-items: start;
-  border: 1px solid
+  border: var(--ui-border-width) solid
     var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-strong)));
   border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
   padding: var(--ui-space-3) var(--ui-space-4);
@@ -419,16 +419,16 @@ function uniqueKeys<T>(
 }
 
 .toast[data-tone="info"] {
-  border-inline-start: 3px solid var(--ui-info-solid);
+  border-inline-start: var(--ui-accent-line-width) solid var(--ui-info-solid);
 }
 .toast[data-tone="success"] {
-  border-inline-start: 3px solid var(--ui-success-solid);
+  border-inline-start: var(--ui-accent-line-width) solid var(--ui-success-solid);
 }
 .toast[data-tone="warning"] {
-  border-inline-start: 3px solid var(--ui-warning-solid);
+  border-inline-start: var(--ui-accent-line-width) solid var(--ui-warning-solid);
 }
 .toast[data-tone="danger"] {
-  border-inline-start: 3px solid var(--ui-danger-solid);
+  border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger-solid);
 }
 
 /* Leaving slides on down and fades; the controller removes the toast when this ends. */