@threadlabs/looma 0.17.0 → 0.17.1

package/components/ui-menu-item/ui-menu-item.html

@@ -35,7 +35,6 @@
     >
       <span class="indicator" aria-hidden="true">
         <ui-icon $if="type = 'checkbox' and internalChecked" name="check"></ui-icon>
-        <ui-icon $if="type = 'radio' and internalChecked" name="circle-dot"></ui-icon>
       </span>
       <span class="label"><slot></slot></span>
       <span class="shortcut" aria-hidden="true"><slot name="shortcut"></slot></span>
@@ -71,7 +70,7 @@
     :host {
       display: flex;
       align-items: center;
-      gap: var(--ui-space-5);
+      gap: var(--ui-space-2);
       box-sizing: border-box;
       width: 100%;
       padding: var(--ui-menu-item-padding-block, var(--_ui-default-menu-item-padding-block, var(--ui-space-2)))
@@ -94,16 +93,43 @@
 
     .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;
     }
 
     :host-state([type="action"]) .indicator {
       display: none;
     }
 
+    :host-state([type="checkbox"])[aria-checked="true"] .indicator {
+      border-color: var(--ui-accent);
+      background: var(--ui-accent);
+    }
+
+    :host-state([type="radio"]) .indicator {
+      border-radius: var(--ui-radius-round);
+    }
+
+    :host-state([type="radio"])[aria-checked="true"] .indicator {
+      border-color: var(--ui-accent);
+    }
+
+    :host-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);
@@ -134,10 +160,21 @@
     }
 
     :host[aria-disabled="true"] {
-      opacity: 0.6;
+      background: var(--ui-disabled-surface);
+      color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
 
+    :host[aria-disabled="true"] .indicator {
+      border-color: var(--ui-disabled-border);
+      background: transparent;
+      color: var(--ui-disabled-text);
+    }
+
+    :host[aria-disabled="true"] .indicator::after {
+      background: var(--ui-disabled-text);
+    }
+
     @media (forced-colors: active) {
       :host:focus-visible {
         outline-color: Highlight;

package/components/ui-meter/ui-meter.html

@@ -57,6 +57,7 @@
       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;
     }
@@ -69,7 +70,9 @@
     .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);
     }
 
     :host-state([tone="accent"]) {

package/components/ui-nav-item/ui-nav-item.html

@@ -115,7 +115,6 @@
       inset-inline-start: 0;
       display: none;
       border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
-      border-radius: var(--ui-radius-round);
     }
 
     :host[aria-current] .indicator {

package/components/ui-page-header/ui-page-header.html

@@ -20,6 +20,7 @@
     :host {
       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/components/ui-popover/ui-popover.html

@@ -72,7 +72,7 @@
       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, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }

package/components/ui-radio/ui-radio.html

@@ -76,7 +76,7 @@
       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;
     }
@@ -90,6 +90,9 @@
       color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
+    :host-state([disabled]) .description {
+      color: var(--ui-disabled-text);
+    }
     :host-state([disabled]) input {
       cursor: not-allowed;
     }
@@ -116,7 +119,7 @@
 
     :host-state([size="sm"]) input,
     :host-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/components/ui-scroll-area/ui-scroll-area.html

@@ -1,15 +1,14 @@
-<template component="ui-scroll-area">
+<template component="ui-scroll-area" controller="./ui-scroll-area.js">
   <defs>
     <prop name="orientation" type="vertical | horizontal" default="vertical"
     >The direction the content scrolls. Vertical scrolls up and down and clips sideways overflow; horizontal scrolls sideways and clips vertical
       overflow.</prop>
   </defs>
-  <div><slot></slot></div>
+  <div><div class="content" $ref="content"><slot></slot></div></div>
   <style>
-    /* 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. */
     :host {
       display: block;
       box-sizing: border-box;
@@ -28,20 +27,16 @@
         #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;
     }
 
     :host-state([orientation="horizontal"]) {
       overflow-x: auto;
       overflow-y: hidden;
       --_ui-scroll-fade-direction: var(--_ui-scroll-fade-inline);
-      animation-timeline: scroll(self inline);
     }
 
     :host:dir(rtl) {

package/components/ui-scroll-area/ui-scroll-area.js

@@ -0,0 +1,32 @@
+export default function controller(host) {
+  const area = host.element;
+  let frame = 0;
+
+  const update = () => {
+    frame = 0;
+    const horizontal = host.state.orientation === "horizontal";
+    const extent = horizontal ? area.scrollWidth - area.clientWidth : area.scrollHeight - area.clientHeight;
+    const rtl = horizontal && getComputedStyle(area).direction === "rtl";
+    const position = horizontal ? (rtl ? -area.scrollLeft : area.scrollLeft) : area.scrollTop;
+    const start = Math.max(0, position);
+    const end = Math.max(0, extent - position);
+    area.style.setProperty("--_ui-scroll-fade-start", `min(var(--_ui-scroll-fade-size), ${start}px)`);
+    area.style.setProperty("--_ui-scroll-fade-end", `min(var(--_ui-scroll-fade-size), ${end}px)`);
+  };
+  const schedule = () => {
+    if (!frame) frame = requestAnimationFrame(update);
+  };
+  const observer = new ResizeObserver(schedule);
+  observer.observe(area);
+  observer.observe(host.refs.content);
+  area.addEventListener("scroll", schedule, { passive: true });
+  const stop = host.effect(schedule);
+  schedule();
+
+  return () => {
+    stop();
+    observer.disconnect();
+    area.removeEventListener("scroll", schedule);
+    if (frame) cancelAnimationFrame(frame);
+  };
+}

package/components/ui-search-result-row/ui-search-result-row.html

@@ -1,6 +1,7 @@
 <template component="ui-search-result-row">
   <defs>
-    <prop name="disabled" type="boolean" default="false">Disables the row's button, so it cannot be chosen or focused, and fades it to 60% opacity.</prop>
+    <prop name="disabled" type="boolean" default="false"
+    >Disables the row's button, so it cannot be chosen or focused, and gives it a flat muted treatment.</prop>
     <prop name="selected" type="boolean" default="false"
     >Marks the row as the current result: it gets the hover surface and aria-current="true", which assistive technology announces as current. Set it on one row
       at a time, such as the result the arrow keys have moved to.</prop>
@@ -61,7 +62,7 @@
       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;
@@ -89,7 +90,8 @@
     }
 
     :host:disabled {
-      opacity: 0.6;
+      background: var(--ui-disabled-surface);
+      color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
 

package/components/ui-search-shell/ui-search-shell.html

@@ -16,7 +16,7 @@
         <div class="search"><slot name="search"></slot></div>
         <div class="status"><slot name="status"></slot></div>
         <div class="body"><slot name="body"></slot></div>
-        <div class="footer"><slot name="footer"></slot></div>
+        <div class="actions"><slot name="footer"></slot></div>
       </div>
     </dialog>
   </div>
@@ -110,14 +110,14 @@
       margin-inline: auto;
       overflow: hidden;
       background: var(--_ui-search-shell-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-      border: 1px solid var(--_ui-search-shell-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border: 1px 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(--_ui-search-shell-shadow, var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl))));
     }
 
     .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);
     }
 
@@ -147,7 +147,7 @@
     }
 
     .status,
-    .footer {
+    .actions {
       flex-shrink: 0;
       padding: var(--ui-space-2) var(--ui-space-4);
       color: var(--ui-text-secondary);
@@ -155,22 +155,22 @@
     }
 
     .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/components/ui-section/ui-section.html

@@ -30,18 +30,20 @@
 
     :host-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);
     }
 
     :host-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);
     }
 
     :host-state([variant="card"][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/components/ui-separator/ui-separator.html

@@ -17,13 +17,13 @@
       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));
     }
 
     :host[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>
 </template>

package/components/ui-sidebar/ui-sidebar.html

@@ -62,12 +62,12 @@
       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));
     }
 
     :host-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/components/ui-spinner/ui-spinner.html

@@ -6,36 +6,56 @@
     <prop name="size" type="sm | md" default="md">sm fits inside a button or a line of small text; md sits beside body text.</prop>
   </defs>
   <span
+    class="ring"
     :role="{ true: 'status', false: null }[format('%s', label != '')]"
     :aria-label="{ true: label, false: null }[format('%s', label != '')]"
     :aria-hidden="{ true: null, false: 'true' }[format('%s', label != '')]"
-  >
-    <ui-icon name="loader"></ui-icon>
-  </span>
+  ></span>
   <style>
-    /* 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. */
     :host {
       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;
     }
 
     :host-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) {
-      :host {
+      .ring {
         animation: none;
       }
     }

package/components/ui-status-message/ui-status-message.html

@@ -36,7 +36,7 @@
 
     :host-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/components/ui-switch/ui-switch.html

@@ -82,12 +82,12 @@
       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);
+      transition: background-color var(--ui-motion-base) var(--ui-motion-ease), border-color var(--ui-motion-base) var(--ui-motion-ease);
       margin: 0;
     }
 
@@ -101,11 +101,11 @@
       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);
     }
 
@@ -123,12 +123,21 @@
       color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
+    :host-state([disabled]) .description {
+      color: var(--ui-disabled-text);
+    }
     :host-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;
     }
 
+    :host-state([disabled]) input::after {
+      background-color: var(--ui-disabled-text);
+      box-shadow: none;
+    }
+
     @media (prefers-reduced-motion: reduce) {
       input, input::after {
         transition: none;

package/components/ui-table/ui-table.html

@@ -93,7 +93,7 @@
     :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/components/ui-tabs/ui-tabs.html

@@ -89,10 +89,11 @@
       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)) var(--_ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
@@ -114,7 +115,8 @@
     /* 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;
@@ -127,19 +129,23 @@
       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);
@@ -149,7 +155,7 @@
     .panels {
       min-inline-size: 0;
     }
-    :slotted(*) {
+    .panels > :slotted(*) {
       padding: var(--ui-space-4);
     }
 
@@ -162,22 +168,25 @@
       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);
     }
 
-    :host-state([orientation="vertical"]) .list button {
+    :host-state([orientation="vertical"]) .list button,
+    :host-state([orientation="vertical"]) .list > :slotted(button[slot="tab"]) {
       margin: 0 -1px 0 0;
       border-block-end: 0;
       border-inline-end: 2px solid transparent;
       text-align: start;
     }
 
-    :host-state([orientation="vertical"]) .list button[aria-selected="true"] {
+    :host-state([orientation="vertical"]) .list button[aria-selected="true"],
+    :host-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/components/ui-toast/ui-toast.html

@@ -48,7 +48,7 @@
       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/components/ui-toast-region/ui-toast-region.html

@@ -120,7 +120,7 @@
       grid-template-columns: 1fr auto;
       gap: var(--ui-space-2);
       align-items: start;
-      border: 1px solid var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border: 1px 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);
       background: var(--_ui-toast-region-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));