@threadlabs/looma 0.22.13 → 0.23.0

package/vue/UiText.d.ts

@@ -32,6 +32,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"p" | "span" | "div" | "small" | "strong" | "label" | "h2" | "h3" | "h4" | "h5" | "h6" | null>;
         default: string;
     };
+    font: {
+        type: PropType<"inherit" | "sans" | null>;
+        default: string;
+    };
     size: {
         type: PropType<"inherit" | "xs" | "sm" | "md" | "lg" | null>;
         default: string;
@@ -52,6 +56,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"inherit" | "normal" | "medium" | "semibold" | null>;
         default: string;
     };
+    wrap: {
+        type: PropType<"normal" | "anywhere" | null>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     align: {
         type: PropType<"start" | "center" | null>;
@@ -61,6 +69,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"p" | "span" | "div" | "small" | "strong" | "label" | "h2" | "h3" | "h4" | "h5" | "h6" | null>;
         default: string;
     };
+    font: {
+        type: PropType<"inherit" | "sans" | null>;
+        default: string;
+    };
     size: {
         type: PropType<"inherit" | "xs" | "sm" | "md" | "lg" | null>;
         default: string;
@@ -81,12 +93,18 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"inherit" | "normal" | "medium" | "semibold" | null>;
         default: string;
     };
+    wrap: {
+        type: PropType<"normal" | "anywhere" | null>;
+        default: string;
+    };
 }>> & Readonly<{}>, {
+    font: "inherit" | "sans" | null;
     size: "inherit" | "xs" | "sm" | "md" | "lg" | null;
     tone: "secondary" | "default" | "info" | "accent" | "success" | "warning" | "danger" | "muted" | null;
     variant: "code" | "body" | "eyebrow" | null;
     align: "center" | "start" | null;
     as: "div" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "p" | "small" | "span" | "strong" | null;
+    wrap: "normal" | "anywhere" | null;
     truncate: boolean | null;
     weight: "inherit" | "normal" | "medium" | "semibold" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/UiText.vue

@@ -26,6 +26,15 @@ const propValidityContract = {
       values: ['p', 'span', 'div', 'small', 'strong', 'label', 'h2', 'h3', 'h4', 'h5', 'h6'],
       default: 'p',
     },
+    font: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'font' },
+      description:
+        'Use sans for UI text rendered outside its original font context; inherit preserves the surrounding typeface.',
+      values: ['inherit', 'sans'],
+      default: 'inherit',
+    },
     size: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -69,6 +78,15 @@ const propValidityContract = {
       values: ['inherit', 'normal', 'medium', 'semibold'],
       default: 'inherit',
     },
+    wrap: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'wrap' },
+      description:
+        'Use anywhere for unbroken values such as long destinations; ordinary prose keeps its normal wrapping.',
+      values: ['normal', 'anywhere'],
+      default: 'normal',
+    },
   },
 } as const
 const props = defineProps({
@@ -79,6 +97,7 @@ const props = defineProps({
     >,
     default: 'p',
   },
+  font: { type: null as unknown as PropType<'inherit' | 'sans' | null>, default: 'inherit' },
   size: {
     type: null as unknown as PropType<'inherit' | 'xs' | 'sm' | 'md' | 'lg' | null>,
     default: 'inherit',
@@ -106,15 +125,18 @@ const props = defineProps({
     type: null as unknown as PropType<'inherit' | 'normal' | 'medium' | 'semibold' | null>,
     default: 'inherit',
   },
+  wrap: { type: null as unknown as PropType<'normal' | 'anywhere' | null>, default: 'normal' },
 })
 const acceptedProps: Record<string, unknown> = {
   align: 'start',
   as: 'p',
+  font: 'inherit',
   size: 'inherit',
   tone: 'default',
   truncate: false,
   variant: 'body',
   weight: 'inherit',
+  wrap: 'normal',
 }
 const checkedProps = computed(() => ({
   align: checkedProp<'start' | 'center'>(
@@ -138,6 +160,13 @@ const checkedProps = computed(() => ({
     | 'h4'
     | 'h5'
     | 'h6',
+  font: checkedProp<'inherit' | 'sans'>(
+    props['font'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'font',
+    acceptedProps,
+  ) as 'inherit' | 'sans',
   size: checkedProp<'inherit' | 'xs' | 'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
@@ -177,6 +206,13 @@ const checkedProps = computed(() => ({
     'weight',
     acceptedProps,
   ) as 'inherit' | 'normal' | 'medium' | 'semibold',
+  wrap: checkedProp<'normal' | 'anywhere'>(
+    props['wrap'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'wrap',
+    acceptedProps,
+  ) as 'normal' | 'anywhere',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -267,6 +303,10 @@ const hostState = computed(() =>
     checkedProps.value.truncate && 'truncate',
     checkedProps.value.align && 'align',
     checkedProps.value.align != null && `align=${encodeURIComponent(checkedProps.value.align)}`,
+    checkedProps.value.font && 'font',
+    checkedProps.value.font != null && `font=${encodeURIComponent(checkedProps.value.font)}`,
+    checkedProps.value.wrap && 'wrap',
+    checkedProps.value.wrap != null && `wrap=${encodeURIComponent(checkedProps.value.wrap)}`,
   ].filter(Boolean).join(' ')
 )
 </script>
@@ -279,11 +319,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   ><slot /></span>
@@ -294,11 +336,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -311,11 +355,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   ><slot /></small>
@@ -326,11 +372,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   ><slot /></strong>
@@ -341,11 +389,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   ><slot /></label>
@@ -356,11 +406,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -373,11 +425,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -390,11 +444,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -407,11 +463,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -424,11 +482,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -441,11 +501,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
+    :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -551,6 +613,14 @@ const hostState = computed(() =>
   text-align: center;
 }
 
+[data-component~="ui-text"][data-ui-text-state~="font=sans"] {
+  font-family: var(--ui-font-family-sans, sans-serif);
+}
+
+[data-component~="ui-text"][data-ui-text-state~="wrap=anywhere"] {
+  overflow-wrap: anywhere;
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-text"][hidden] {
   display: none;

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. */

package/vue/UiTooltip.vue

@@ -424,7 +424,7 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
   position: relative;
   box-sizing: border-box;
   max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
-  border: 1px solid var(--_tooltip-line);
+  border: var(--ui-border-width) solid var(--_tooltip-line);
   border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
   background: var(--_ui-tooltip-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
   color: var(--_ui-tooltip-text, var(--ui-text-primary));
@@ -475,27 +475,29 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
   position: absolute;
   z-index: 1;
   inset-inline-start: var(--ui-space-3);
-  inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
+  inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
   inline-size: var(--_ui-tooltip-arrow-size, 0.625rem);
   block-size: var(--_ui-tooltip-arrow-size, 0.625rem);
   box-sizing: border-box;
   background: inherit;
   border: 0 solid var(--_tooltip-line);
-  border-inline-end-width: 1px;
-  border-block-end-width: 1px;
-  border-end-end-radius: 1px;
+  border-inline-end-width: var(--ui-border-width);
+  border-block-end-width: var(--ui-border-width);
+  border-end-end-radius: var(--ui-border-width);
   transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
 }
 
 [data-component~="ui-tooltip"][data-ui-actual-placement="bottom"] .surface::after {
-  inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
+  inset-block-start: calc(
+    var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2
+  );
   inset-block-end: auto;
   border-inline-end-width: 0;
   border-block-end-width: 0;
-  border-inline-start-width: 1px;
-  border-block-start-width: 1px;
+  border-inline-start-width: var(--ui-border-width);
+  border-block-start-width: var(--ui-border-width);
   border-end-end-radius: 0;
-  border-start-start-radius: 1px;
+  border-start-start-radius: var(--ui-border-width);
 }
 
 [data-component~="ui-tooltip"][data-ui-actual-align="center"] .surface::after {
@@ -516,16 +518,18 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
 
 [data-component~="ui-tooltip"][data-ui-actual-placement="left"] .surface::after {
   inset-inline-start: auto;
-  inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
-  border-inline-end-width: 1px;
-  border-block-start-width: 1px;
+  inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
+  border-inline-end-width: var(--ui-border-width);
+  border-block-start-width: var(--ui-border-width);
 }
 
 [data-component~="ui-tooltip"][data-ui-actual-placement="right"] .surface::after {
-  inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
+  inset-inline-start: calc(
+    var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2
+  );
   inset-inline-end: auto;
-  border-inline-start-width: 1px;
-  border-block-end-width: 1px;
+  border-inline-start-width: var(--ui-border-width);
+  border-block-end-width: var(--ui-border-width);
 }
 
 [data-component~="ui-tooltip"][data-ui-actual-placement="left"][data-ui-actual-align="start"]

package/vue/UiTopBar.vue

@@ -95,7 +95,7 @@ if (
     env(safe-area-inset-right)
   );
   background: var(--ui-top-bar-surface, var(--ui-surface-elevated));
-  border-block-end: 1px solid var(--ui-top-bar-border, var(--ui-border-divider));
+  border-block-end: var(--ui-border-width) solid var(--ui-top-bar-border, var(--ui-border-divider));
 }
 
 .leading,

package/vue/UiTreeItem.vue

@@ -568,7 +568,7 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
   min-block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
   min-inline-size: 0;
   font-size: var(--_ui-tree-item-font-size, var(--ui-font-size-sm));
-  border-radius: var(--ui-radius-md);
+  border-radius: var(--ui-selection-radius);
   color: var(--ui-text-secondary);
   transition:
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
@@ -579,12 +579,22 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
 }
 
 .row:hover,
-[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] .row,
 .row:focus-within {
   color: var(--ui-text-primary);
   background: var(--ui-surface-muted);
 }
 
+/* Selection is the same surface recipe as destination and choice rows. */
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"] > .row {
+  color: var(--ui-selection-text);
+  background: var(--ui-selection-surface);
+}
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"]:not([aria-disabled="true"])
+  > .row
+  > .leading {
+  color: var(--ui-selection-text);
+}
+
 [data-component~="ui-tree-item"][data-ui-tree-item-state~="disabled"] .row {
   color: var(--ui-disabled-text);
   background: var(--ui-disabled-surface);
@@ -599,13 +609,14 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
 }
 
 [data-component~="ui-tree-item"]:focus-visible .row {
-  box-shadow: 0 0 0 2px var(--ui-focus-ring);
+  box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
 }
 
 /* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
 [data-component~="ui-tree-item"][data-drop-position="inside"] > .row {
   background: var(--ui-accent-subtle);
-  box-shadow: inset 0 0 0 1px var(--_ui-tree-drop-color, var(--ui-accent-solid));
+  box-shadow: inset 0 0 0 var(--ui-accent-line-width)
+    var(--_ui-tree-drop-color, var(--ui-accent-solid));
 }
 
 .disclosure,
@@ -935,7 +946,7 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
   z-index: 3;
   inset-inline: 1px;
   display: none;
-  block-size: 2px;
+  block-size: var(--ui-accent-line-width);
   border-radius: var(--ui-radius-round);
   background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
   pointer-events: none;
@@ -948,7 +959,7 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
   inset-block-start: 50%;
   inline-size: 7px;
   block-size: 7px;
-  border: 2px solid var(--_ui-tree-drop-color, var(--ui-accent-solid));
+  border: var(--ui-accent-line-width) solid var(--_ui-tree-drop-color, var(--ui-accent-solid));
   border-radius: var(--ui-radius-round);
   background: var(--ui-surface-elevated);
   transform: translateY(-50%);
@@ -963,12 +974,12 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
 
 [data-component~="ui-tree-item"][data-drop-position="before"] > .row > .row-drop-indicator {
   display: block;
-  inset-block-start: -1px;
+  inset-block-start: calc(-0.5 * var(--ui-accent-line-width));
 }
 
 [data-component~="ui-tree-item"][data-drop-position="after"] > .subtree-drop-indicator {
   display: block;
-  inset-block-end: -1px;
+  inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
 }
 
 .children[hidden] {
@@ -1044,6 +1055,18 @@ html[data-ui-input-modality="touch"]
   }
 }
 
+@media (forced-colors: active) {
+  [data-component~="ui-tree-item"]:focus-visible > .row {
+    outline: var(--ui-focus-width) solid Highlight;
+    outline-offset: calc(-1 * var(--ui-focus-width));
+  }
+  [data-component~="ui-tree-item"][data-ui-tree-item-state~="selected"]:not(:focus-visible):not([aria-disabled="true"])
+    > .row {
+    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-tree-item"][hidden] {
   display: none;

package/vue/chunks/UiAvatar.js

@@ -335,6 +335,6 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-5cd53487"]]);
+}), [["__scopeId", "data-v-55aefae2"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiAvatarGroup.js

@@ -227,6 +227,6 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-d3d2981c"]]);
+}), [["__scopeId", "data-v-29579f97"]]);
 //#endregion
 export { UiAvatarGroup_default as t };

package/vue/chunks/UiBadge.js

@@ -163,6 +163,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-eba32334"]]);
+}), [["__scopeId", "data-v-dac78ff4"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiButton.js

@@ -533,6 +533,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-79e949e5"]]);
+}), [["__scopeId", "data-v-a77b2cb4"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCallout.js

@@ -160,6 +160,6 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-a88cefbd"]]);
+}), [["__scopeId", "data-v-46b53e77"]]);
 //#endregion
 export { UiCallout_default as t };