@threadlabs/looma 0.16.5 → 0.17.1

package/vue/UiMenuItem.vue

@@ -118,8 +118,7 @@ function attribute(value: unknown): any {
     <span class="indicator" aria-hidden="true"><UiIcon
         v-if="type === 'checkbox' && internalChecked"
         name="check"
-      />
-      <UiIcon v-if="type === 'radio' && internalChecked" name="circle-dot" /></span>
+      /></span>
     <span class="label"><slot /></span>
     <span class="shortcut" aria-hidden="true"><slot name="shortcut" /></span>
   </div>
@@ -155,7 +154,7 @@ function attribute(value: unknown): any {
 [data-component~="ui-menu-item"] {
   display: flex;
   align-items: center;
-  gap: var(--ui-space-5);
+  gap: var(--ui-space-2);
   box-sizing: border-box;
   width: 100%;
   padding: var(
@@ -192,16 +191,46 @@ function attribute(value: unknown): any {
 
 .indicator {
   display: inline-flex;
-  place-items: center;
+  align-items: center;
+  justify-content: center;
   flex: none;
-  inline-size: var(--ui-icon-size-md);
-  color: var(--ui-accent-solid);
+  box-sizing: border-box;
+  inline-size: var(--ui-icon-size-sm);
+  block-size: var(--ui-icon-size-sm);
+  border: 1.5px solid var(--ui-control-border);
+  border-radius: var(--ui-radius-sm);
+  color: var(--ui-surface);
+  --_ui-default-icon-size: 0.75rem;
 }
 
 [data-component~="ui-menu-item"][data-ui-menu-item-state~="type=action"] .indicator {
   display: none;
 }
 
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=checkbox"][aria-checked="true"]
+  .indicator {
+  border-color: var(--ui-accent);
+  background: var(--ui-accent);
+}
+
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=radio"] .indicator {
+  border-radius: var(--ui-radius-round);
+}
+
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=radio"][aria-checked="true"]
+  .indicator {
+  border-color: var(--ui-accent);
+}
+
+[data-component~="ui-menu-item"][data-ui-menu-item-state~="type=radio"][aria-checked="true"]
+  .indicator::after {
+  content: "";
+  inline-size: 0.375rem;
+  block-size: 0.375rem;
+  border-radius: var(--ui-radius-round);
+  background: var(--ui-accent);
+}
+
 .shortcut {
   margin-inline-start: auto;
   color: var(--ui-text-secondary);
@@ -232,10 +261,21 @@ function attribute(value: unknown): any {
 }
 
 [data-component~="ui-menu-item"][aria-disabled="true"] {
-  opacity: 0.6;
+  background: var(--ui-disabled-surface);
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
 
+[data-component~="ui-menu-item"][aria-disabled="true"] .indicator {
+  border-color: var(--ui-disabled-border);
+  background: transparent;
+  color: var(--ui-disabled-text);
+}
+
+[data-component~="ui-menu-item"][aria-disabled="true"] .indicator::after {
+  background: var(--ui-disabled-text);
+}
+
 @media (forced-colors: active) {
   [data-component~="ui-menu-item"]:focus-visible {
     outline-color: Highlight;

package/vue/UiMeter.vue

@@ -147,6 +147,7 @@ function number(value: unknown): number | undefined {
   overflow: hidden;
   border-radius: var(--ui-radius-round);
   background: var(--ui-border);
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1), inset 0 -1px rgb(255 255 255 / 0.22);
   /* Unseen until forced colours draw it, where the track's own colour is gone. */
   outline: 1px solid transparent;
 }
@@ -159,7 +160,9 @@ function number(value: unknown): number | undefined {
 .fill {
   display: block;
   block-size: 100%;
-  background: var(--_meter-fill);
+  background-color: var(--_meter-fill);
+  background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.26), transparent 70%);
+  box-shadow: inset 0 1px rgb(255 255 255 / 0.26), inset 0 -1px rgb(0 0 0 / 0.1);
 }
 
 [data-component~="ui-meter"][data-ui-meter-state~="tone=accent"] {

package/vue/UiNavItem.vue

@@ -152,7 +152,6 @@ function attribute(value: unknown): any {
   inset-inline-start: 0;
   display: none;
   border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
-  border-radius: var(--ui-radius-round);
 }
 
 [data-component~="ui-nav-item"][aria-current] .indicator {

package/vue/UiPageHeader.vue

@@ -42,6 +42,7 @@ const hostState = computed(() =>
 [data-component~="ui-page-header"] {
   display: flex;
   flex-wrap: wrap;
+  inline-size: 100%;
   align-items: center;
   gap: var(--ui-space-3) var(--ui-space-4);
   min-inline-size: 0;

package/vue/UiPopover.vue

@@ -148,7 +148,7 @@ useComponentHost(controllerModule.default, {
   overflow: auto;
   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-default)));
+  border: 1px 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

@@ -144,7 +144,7 @@ input {
   flex: 0 0 auto;
   inline-size: var(--_ui-radio-size, 1.125rem);
   block-size: var(--_ui-radio-size, 1.125rem);
-  margin: 0.125em 0 0;
+  margin: calc(0.125em + 1px) 0 0;
   accent-color: var(--ui-accent-solid);
   cursor: pointer;
 }
@@ -158,6 +158,9 @@ input:focus-visible {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
+[data-component~="ui-radio"][data-ui-radio-state~="disabled"] .description {
+  color: var(--ui-disabled-text);
+}
 [data-component~="ui-radio"][data-ui-radio-state~="disabled"] input {
   cursor: not-allowed;
 }
@@ -184,7 +187,7 @@ input:focus-visible {
 
 [data-component~="ui-radio"][data-ui-radio-state~="size=sm"] input,
 [data-component~="ui-radio"][data-ui-radio-state~="size=lg"] input {
-  margin-top: calc((var(--_line) - var(--_ui-radio-size, 1.125rem)) / 2);
+  margin-top: calc((var(--_line) - var(--_ui-radio-size, 1.125rem)) / 2 + 1px);
 }
 
 @media (pointer: coarse) {

package/vue/UiScrollArea.vue

@@ -1,6 +1,8 @@
 <!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
+import * as controllerModule from '../components/ui-scroll-area/ui-scroll-area.js'
+import { createDispatch, useComponentHost } from './host'
 
 defineOptions({ inheritAttrs: false })
 
@@ -13,12 +15,24 @@ const props = withDefaults(
   },
 )
 
+const root = ref<HTMLElement | null>(null)
+const contentElement = useTemplateRef<HTMLElement>('content')
+
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
     props.orientation && `orientation orientation=${props.orientation}`,
   ].filter(Boolean).join(' ')
 )
+
+const dispatch = createDispatch(root)
+
+useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
+  refs: { content: contentElement },
+})
 </script>
 
 <template>
@@ -26,16 +40,16 @@ const hostState = computed(() =>
     data-component="ui-scroll-area"
     v-bind="$attrs"
     :data-ui-scroll-area-state="hostState || undefined"
+    ref="root"
   >
-    <slot />
+    <div class="content" ref="content"><slot /></div>
   </div>
 </template>
 
 <style scoped>
-/* A region that scrolls when its content outgrows it. Each edge that hides content fades, growing
-       in as the content leaves that edge (the scroll fade in tokens.css), so the reader can tell there
-       is more; an edge with nothing past it stays crisp, and content that fits shows no fade. The
-       fade is a mask, so it blends into whatever is behind the area without knowing its colour. */
+/* The controller sets each fade length from overflow and scroll position. The mask blends
+       into whatever is behind the area without needing to know its colour. Before upgrade, its
+       zero-length defaults leave the authored scroll area fully visible. */
 [data-component~="ui-scroll-area"] {
   display: block;
   box-sizing: border-box;
@@ -54,24 +68,16 @@ const hostState = computed(() =>
     #000 calc(100% - var(--_ui-scroll-fade-end)),
     transparent
   );
-  animation:
-    ui-scroll-fade-start linear,
-    ui-scroll-fade-start-hold linear,
-    ui-scroll-fade-end-hold linear,
-    ui-scroll-fade-end linear;
-  animation-timeline: scroll(self block);
-  animation-range:
-    0 var(--_ui-scroll-fade-size),
-    var(--_ui-scroll-fade-size) calc(100% + 1px),
-    -1px calc(100% - var(--_ui-scroll-fade-size)),
-    calc(100% - var(--_ui-scroll-fade-size)) 100%;
+}
+
+.content {
+  display: flow-root;
 }
 
 [data-component~="ui-scroll-area"][data-ui-scroll-area-state~="orientation=horizontal"] {
   overflow-x: auto;
   overflow-y: hidden;
   --_ui-scroll-fade-direction: var(--_ui-scroll-fade-inline);
-  animation-timeline: scroll(self inline);
 }
 
 [data-component~="ui-scroll-area"]:dir(rtl) {

package/vue/UiSearchResultRow.vue

@@ -87,7 +87,7 @@ const hostState = computed(() =>
   gap: var(--ui-search-result-row-gap, var(--ui-space-3));
   background: var(--ui-search-result-row-surface, transparent);
   border: none;
-  border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border));
+  border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border-divider));
   color: inherit;
   cursor: pointer;
   text-align: left;
@@ -118,7 +118,8 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-search-result-row"]:disabled {
-  opacity: 0.6;
+  background: var(--ui-disabled-surface);
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
 

package/vue/UiSearchShell.vue

@@ -69,7 +69,7 @@ useComponentHost(controllerModule.default, {
         <div class="search"><slot name="search" /></div>
         <div class="status"><slot name="status" /></div>
         <div class="body"><slot name="body" /></div>
-        <div class="footer"><slot name="footer" /></div>
+        <div class="actions"><slot name="footer" /></div>
       </div>
     </dialog>
   </div>
@@ -170,7 +170,7 @@ dialog::backdrop {
     var(--ui-overlay-surface, var(--ui-surface-elevated))
   );
   border: 1px solid
-    var(--_ui-search-shell-border, var(--ui-overlay-border, var(--ui-border-default)));
+    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(
     --_ui-search-shell-shadow,
@@ -180,7 +180,7 @@ dialog::backdrop {
 
 .search {
   padding: var(--ui-space-3);
-  border-block-end: 1px solid var(--ui-border-default);
+  border-block-end: 1px solid var(--ui-border-divider);
   transition:
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
@@ -212,7 +212,7 @@ dialog::backdrop {
 }
 
 .status,
-.footer {
+.actions {
   flex-shrink: 0;
   padding: var(--ui-space-2) var(--ui-space-4);
   color: var(--ui-text-secondary);
@@ -220,22 +220,22 @@ dialog::backdrop {
 }
 
 .status {
-  border-block-end: 1px solid var(--ui-border-default);
+  border-block-end: 1px solid var(--ui-border-divider);
 }
 
 /* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */
-.footer {
+.actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
   gap: var(--ui-space-2);
   padding: var(--ui-space-3) var(--ui-space-4);
-  border-block-start: 1px solid var(--ui-border-default);
+  border-block-start: 1px solid var(--ui-border-divider);
 }
 
 .status:empty,
-.footer:empty {
+.actions:empty {
   display: none;
 }
 

package/vue/UiSection.vue

@@ -51,18 +51,20 @@ const hostState = computed(() =>
 
 [data-component~="ui-section"][data-ui-section-state~="variant=card"] {
   padding: var(--ui-space-5);
-  border: 1px solid var(--ui-border-default);
+  border: 1px 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-default);
+  border-block-start: 1px solid var(--ui-border-divider);
 }
 
 [data-component~="ui-section"][data-ui-section-state~="variant=card"][data-ui-section-state~="tone=danger"] {
-  border-color: var(--ui-danger);
+  border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
+  border-inline-start: 4px solid var(--ui-danger);
+  background: var(--ui-danger-soft);
 }
 
 .head {

package/vue/UiSeparator.vue

@@ -29,12 +29,12 @@ withDefaults(
   align-self: stretch;
   margin: 0;
   border: 0;
-  border-block-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
+  border-block-start: 1px 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-default));
+  border-inline-start: 1px solid var(--ui-separator-color, var(--ui-border-divider));
 }
 </style>

package/vue/UiSidebar.vue

@@ -146,12 +146,12 @@ useComponentHost(controllerModule.default, {
   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-default));
+  border-inline-end: 1px 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-default));
+  border-inline-start: 1px 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

package/vue/UiSpinner.vue

@@ -1,7 +1,6 @@
 <!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed } from 'vue'
-import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -40,6 +39,7 @@ function attribute(value: unknown): any {
 <template>
   <span
     data-component="ui-spinner"
+    class="ring"
     v-bind="$attrs"
     :role="attribute(({ true: 'status', false: null })[`${label !== ''}`])"
     :aria-label="typeof (({ true: label, false: null })[`${label !== ''}`]) === 'boolean'
@@ -49,33 +49,54 @@ function attribute(value: unknown): any {
     ? String(({ true: null, false: 'true' })[`${label !== ''}`])
     : attribute(({ true: null, false: 'true' })[`${label !== ''}`])"
     :data-ui-spinner-state="hostState || undefined"
-  ><UiIcon name="loader" /></span>
+  ></span>
 </template>
 
 <style scoped>
-/* Something is on its way. It turns in the current text colour; with reduced motion it holds still,
+/* Something is on its way. The ring chases in the current text colour; with reduced motion it holds still,
        and the label (or the text beside it) still says what is happening. */
 [data-component~="ui-spinner"] {
   display: inline-flex;
   flex: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1em;
+  block-size: 1em;
   color: currentColor;
   font-size: var(--ui-font-size-lg);
   line-height: 1;
-  animation: ui-spinner-turn 0.8s linear infinite;
+}
+
+.ring {
+  display: block;
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: 100%;
+  border: 2px solid transparent;
+  border-block-start-color: currentColor;
+  border-inline-end-color: color-mix(in srgb, currentColor 52%, transparent);
+  border-radius: 50%;
+  animation: ui-spinner-chase 1s linear infinite;
 }
 
 [data-component~="ui-spinner"][data-ui-spinner-state~="size=sm"] {
   font-size: var(--ui-font-size-md);
 }
 
-@keyframes ui-spinner-turn {
-  to {
+@keyframes ui-spinner-chase {
+  0% {
+    transform: rotate(0);
+  }
+  70% {
+    transform: rotate(160deg);
+  }
+  100% {
     transform: rotate(1turn);
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  [data-component~="ui-spinner"] {
+  .ring {
     animation: none;
   }
 }

package/vue/UiStatusMessage.vue

@@ -74,7 +74,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-default);
+  border: 1px dashed var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
 }
 

package/vue/UiSwitch.vue

@@ -154,14 +154,14 @@ 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-hover, var(--ui-border-strong));
+  border: 1px solid var(--ui-control-border, var(--ui-border-strong));
   border-radius: var(--ui-radius-round);
-  background: var(--ui-control-surface, var(--ui-surface-default));
-  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-text-primary) 10%, transparent);
+  background-color: var(--ui-control-surface, var(--ui-surface-default));
+  box-shadow: var(--ui-control-inset);
   cursor: pointer;
   transition:
-    background-color var(--ui-motion-fast) var(--ui-motion-ease),
-    border-color var(--ui-motion-fast) var(--ui-motion-ease);
+    background-color var(--ui-motion-base) var(--ui-motion-ease),
+    border-color var(--ui-motion-base) var(--ui-motion-ease);
   margin: 0;
 }
 
@@ -175,11 +175,13 @@ input::after {
   border-radius: var(--ui-radius-round);
   background: var(--ui-text-secondary);
   box-shadow: var(--ui-shadow-xs);
-  transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
+  transition:
+    transform var(--ui-motion-base) var(--ui-motion-ease),
+    background-color var(--ui-motion-base) var(--ui-motion-ease);
 }
 
 input:checked {
-  background: var(--ui-accent-solid);
+  background-color: var(--ui-accent-solid);
   border-color: var(--ui-accent-solid);
 }
 
@@ -197,12 +199,21 @@ input:focus-visible {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
+[data-component~="ui-switch"][data-ui-switch-state~="disabled"] .description {
+  color: var(--ui-disabled-text);
+}
 [data-component~="ui-switch"][data-ui-switch-state~="disabled"] input {
-  border-color: var(--ui-border-default);
-  background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+  border-color: var(--ui-disabled-border);
+  background-color: var(--ui-disabled-surface);
+  box-shadow: none;
   cursor: not-allowed;
 }
 
+[data-component~="ui-switch"][data-ui-switch-state~="disabled"] input::after {
+  background-color: var(--ui-disabled-text);
+  box-shadow: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
   input, input::after {
     transition: none;

package/vue/UiTable.vue

@@ -135,7 +135,7 @@ useComponentHost(controllerModule.default, {
 :slotted(thead th) {
   block-size: auto;
   padding-block: var(--ui-space-2);
-  border-block-end-color: var(--ui-border-default);
+  border-block-end-color: var(--ui-border-divider);
   background: var(--ui-surface);
   color: var(--ui-text-muted);
   font-weight: var(--ui-font-medium);

package/vue/UiTabs.vue

@@ -154,10 +154,11 @@ useComponentHost(controllerModule.default, {
   overflow-y: hidden;
   overscroll-behavior: contain;
   scrollbar-width: thin;
-  border-block-end: 1px solid var(--ui-border-default);
+  border-block-end: 1px solid var(--ui-border-divider);
 }
 
-.list button {
+.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;
   padding: var(--_ui-tabs-tab-padding-block, var(--_tab-padding-block))
@@ -180,7 +181,8 @@ useComponentHost(controllerModule.default, {
 /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
  * Trimming applies to block containers, so the box is a block with centred content. */
 @supports (text-box-trim: trim-both) {
-  .list button {
+  .list button,
+  .list > :slotted(button[slot="tab"]) {
     display: block;
     text-align: center;
     align-content: center;
@@ -193,19 +195,23 @@ useComponentHost(controllerModule.default, {
   grid-auto-columns: minmax(max-content, 1fr);
 }
 
-.list button {
+.list button,
+.list > :slotted(button[slot="tab"]) {
   white-space: nowrap;
 }
 
-.list button:hover {
+.list button:hover,
+.list > :slotted(button[slot="tab"]:hover) {
   color: var(--ui-text-primary);
   background: var(--ui-surface-muted);
 }
-.list button[aria-selected="true"] {
+.list button[aria-selected="true"],
+.list > :slotted(button[slot="tab"][aria-selected="true"]) {
   color: var(--ui-accent-solid);
   border-block-end-color: var(--ui-accent-solid);
 }
-.list button:focus-visible {
+.list button:focus-visible,
+.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);
@@ -215,7 +221,7 @@ useComponentHost(controllerModule.default, {
 .panels {
   min-inline-size: 0;
 }
-:slotted(*) {
+.panels > :slotted(*) {
   padding: var(--ui-space-4);
 }
 
@@ -228,10 +234,13 @@ useComponentHost(controllerModule.default, {
   grid-auto-flow: row;
   grid-auto-columns: auto;
   border-block-end: 0;
-  border-inline-end: 1px solid var(--ui-border-default);
+  border-inline-end: 1px 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 button,
+[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"]
+  .list
+  > :slotted(button[slot="tab"]) {
   margin: 0 -1px 0 0;
   border-block-end: 0;
   border-inline-end: 2px solid transparent;
@@ -240,12 +249,16 @@ useComponentHost(controllerModule.default, {
 
 [data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"]
   .list
-  button[aria-selected="true"] {
+  button[aria-selected="true"],
+[data-component~="ui-tabs"][data-ui-tabs-state~="orientation=vertical"]
+  .list
+  > :slotted(button[slot="tab"][aria-selected="true"]) {
   border-inline-end-color: var(--ui-accent-solid);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .list button {
+  .list button,
+  .list > :slotted(button[slot="tab"]) {
     transition: none;
   }
 }

package/vue/UiToast.vue

@@ -131,7 +131,7 @@ 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-default)));
+  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-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)));

package/vue/UiToastRegion.vue

@@ -207,7 +207,7 @@ defineExpose({
   gap: var(--ui-space-2);
   align-items: start;
   border: 1px solid
-    var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-default)));
+    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);
   background: var(