@sveltia/ui 0.75.4 → 0.75.5

package/dist/components/button/button.svelte

@@ -290,7 +290,4 @@ button .label {
 }
 button > :global(*) {
   pointer-events: none;
-}
-button :global(:has([slot=start-icon] + [slot=end-icon])) {
-  gap: 0;
 }</style>

package/dist/components/button/select-button-group.svelte

@@ -94,15 +94,18 @@
   color: var(--sui-highlight-foreground-color);
   background-color: var(--sui-selected-background-color);
 }
-.select-button-group :global([aria-invalid=true]) :global(button) {
+.select-button-group[aria-invalid=true] :global(button) {
   border-color: var(--sui-error-border-color);
 }
-.select-button-group :global([aria-disabled=false]) :global(button[aria-disabled=true]) {
+.select-button-group[aria-disabled=false] :global(button[aria-disabled='true']) {
   filter: grayscale(0) opacity(1);
 }
-.select-button-group :global([aria-disabled=false]) :global(button[aria-disabled=true]) :global(*) {
+.select-button-group[aria-disabled=false] :global(button[aria-disabled='true']) :global(*) {
   filter: grayscale(1) opacity(var(--sui-disabled-opacity, 0.35));
 }
+.select-button-group[aria-readonly=true] :global(button) {
+  pointer-events: none;
+}
 
 .inner {
   display: contents;

package/dist/components/calendar/calendar.svelte

@@ -259,9 +259,10 @@
 .grid div.other-month {
   color: var(--sui-tertiary-foreground-color);
 }
-.grid div :global(.today) :global(button) {
-  color: var(--sui-highlight-foreground-color);
-  background-color: var(--sui-primary-accent-color);
+.grid div.today :global(button) {
+  border-width: 1px;
+  border-color: var(--sui-primary-accent-color);
+  color: var(--sui-primary-accent-color-text);
 }
 .grid div :global(button) {
   justify-content: center;
@@ -277,6 +278,10 @@
   border-width: 1px;
   border-color: var(--sui-primary-accent-color-light);
 }
+.grid div :global(button[aria-selected=true]) {
+  color: var(--sui-highlight-foreground-color);
+  background-color: var(--sui-primary-accent-color);
+}
 
 .footer :global(button) {
   font-size: var(--sui-font-size-small);

package/dist/components/checkbox/checkbox.svelte

@@ -223,6 +223,17 @@
 .checkbox label {
   cursor: inherit;
 }
+.checkbox.readonly {
+  cursor: default;
+}
+.checkbox.readonly :global(button), .checkbox.readonly:is(:hover, :active) :global(button) {
+  background-color: var(--sui-checkbox-background-color);
+}
+.checkbox.readonly :global(button[aria-checked='true']:not([aria-invalid='true'])), .checkbox.readonly:is(:hover, :active) :global(button[aria-checked='true']:not([aria-invalid='true'])) {
+  border-color: var(--sui-readonly-accent-color);
+  color: var(--sui-readonly-accent-color-inverted);
+  background-color: var(--sui-readonly-accent-color);
+}
 
 .inner {
   display: contents;

package/dist/components/listbox/listbox.svelte

@@ -142,6 +142,9 @@
 [role=listbox].tabs :global(.option) :global(button) :global(.icon) {
   display: none;
 }
+[role=listbox].tabs[aria-readonly=true] :global(.option button[aria-selected='true']) {
+  border-color: var(--sui-readonly-accent-color);
+}
 [role=listbox].in-combobox:focus-visible {
   outline-color: transparent;
 }

package/dist/components/listbox/option.svelte

@@ -173,7 +173,7 @@
 .option:focus-visible {
   outline-width: 0 !important;
 }
-.option :global(.wrap) :global(button) {
+.option.wrap :global(button) {
   white-space: normal;
 }
 .option :global(button) {
@@ -210,4 +210,15 @@
 :global([role='listbox']:focus-visible) .option :global(.focused) {
   outline-color: var(--sui-focus-ring-color);
   outline-offset: calc(var(--sui-focus-ring-width) * -1);
+}
+
+:global([role='listbox'][aria-readonly='true']) .option :global(button) {
+  cursor: default;
+}
+:global([role='listbox'][aria-readonly='true']) .option :global(button:not(.focused):is(:hover, :active)) {
+  color: var(--sui-control-foreground-color);
+  background-color: transparent;
+}
+:global([role='listbox'][aria-readonly='true']) .option :global(button[aria-selected=true]) :global(.icon.check) {
+  color: var(--sui-readonly-accent-color);
 }</style>

package/dist/components/menu/menu-item.svelte

@@ -184,19 +184,6 @@
 .menuitem :global(button:active) {
   background-color: var(--sui-active-background-color);
 }
-.menuitem :global(:hover) > :global([role=menu]) {
-  opacity: 1;
-}
-.menuitem > :global([role=menu]) {
-  position: absolute;
-  inset-block-start: 2px;
-  inset-block-end: auto;
-  inset-inline-start: calc(100% + 4px);
-  inset-inline-end: auto;
-}
-.menuitem > :global([role=menu]:hover) {
-  opacity: 1;
-}
 
 .content {
   flex: auto;

package/dist/components/menu/menu.svelte

@@ -61,7 +61,7 @@
   margin: 0;
   border-width: var(--sui-menu-border-width, 1px);
   border-style: var(--sui-menu-border-style, solid);
-  border-color: var(--sui-menu-border-width, var(--sui-secondary-border-color));
+  border-color: var(--sui-menu-border-color, var(--sui-secondary-border-color));
   border-radius: var(--sui-menu-border-radius, 4px);
   padding: var(--sui-menu-padding, 4px);
 }

package/dist/components/radio/radio-group.svelte

@@ -93,13 +93,13 @@
     gap: 8px;
   }
 }
-.radio-group :global([aria-invalid=true]) :global(button) {
+.radio-group[aria-invalid=true] :global(button) {
   border-color: var(--sui-error-border-color);
 }
-.radio-group :global([aria-invalid=true]) :global(button[aria-checked=true]) {
+.radio-group[aria-invalid=true] :global(button[aria-checked=true]) {
   border-color: var(--sui-error-border-color);
 }
-.radio-group :global([aria-invalid=true]) :global(button[aria-checked=true]::before) {
+.radio-group[aria-invalid=true] :global(button[aria-checked=true]::before) {
   background-color: var(--sui-error-border-color);
 }
 

package/dist/components/radio/radio.svelte

@@ -74,6 +74,13 @@
   const accessibleLabel = $derived(ariaLabel ?? restProps['aria-label']);
   const hasVisibleLabel = $derived(!!(children || label));
 
+  /**
+   * Check if the radio button belongs to a read-only `<RadioGroup>`.
+   * @returns {boolean} Result.
+   */
+  const isGroupReadOnly = () =>
+    !!buttonElement?.closest('[role="radiogroup"]')?.matches('[aria-readonly="true"]');
+
   // Sync `checked` with `group` and `value`
   $effect(() => {
     if (typeof group === 'string') {
@@ -119,7 +126,9 @@
     onclick={(event) => {
       event.preventDefault();
 
-      if (disabled || checked) {
+      // A read-only group turns the selection down too, but only once this handler has run, so it
+      // has to be checked here as well
+      if (disabled || checked || isGroupReadOnly()) {
         return;
       }
 
@@ -158,20 +167,20 @@
   -webkit-user-select: none;
   user-select: none;
 }
-.radio :global(:hover) :global(button) {
+.radio:hover :global(button) {
   background-color: var(--sui-hover-background-color);
 }
-.radio :global(:hover) :global(button[aria-checked=true]) {
+.radio:hover :global(button[aria-checked=true]) {
   border-color: var(--sui-primary-accent-color-light);
   color: var(--sui-primary-accent-color-text);
 }
-.radio :global(:hover) :global(button[aria-checked=true]::before) {
+.radio:hover :global(button[aria-checked=true]::before) {
   background-color: var(--sui-primary-accent-color-light);
 }
-.radio :global(:active) :global(button) {
+.radio:active :global(button) {
   background-color: var(--sui-active-background-color);
 }
-.radio :global(:active) :global(button[aria-checked=true]) {
+.radio:active :global(button[aria-checked=true]) {
   border-color: var(--sui-primary-accent-color-dark);
   color: var(--sui-primary-accent-color-dark);
 }
@@ -207,4 +216,17 @@
 }
 .radio label {
   cursor: inherit;
+}
+
+:global([role='radiogroup'][aria-readonly='true']) .radio {
+  cursor: default;
+}
+:global([role='radiogroup'][aria-readonly='true']) .radio :global(button), :global([role='radiogroup'][aria-readonly='true']) .radio:is(:hover, :active) :global(button) {
+  background-color: var(--sui-checkbox-background-color);
+}
+:global([role='radiogroup'][aria-readonly='true']) .radio :global(button[aria-checked='true']), :global([role='radiogroup'][aria-readonly='true']) .radio:is(:hover, :active) :global(button[aria-checked='true']) {
+  border-color: var(--sui-readonly-accent-color);
+}
+:global([role='radiogroup'][aria-readonly='true']) .radio :global(button[aria-checked='true']::before), :global([role='radiogroup'][aria-readonly='true']) .radio:is(:hover, :active) :global(button[aria-checked='true']::before) {
+  background-color: var(--sui-readonly-accent-color);
 }</style>

package/dist/components/select/combobox.svelte

@@ -477,6 +477,12 @@
 .combobox div[role=combobox]:is(:hover, :focus) {
   background-color: var(--sui-hover-background-color);
 }
+.combobox div[role=combobox][aria-readonly=true] {
+  cursor: default;
+}
+.combobox div[role=combobox][aria-readonly=true]:is(:hover, :focus):not(:focus-visible) {
+  background-color: var(--sui-disabled-background-color);
+}
 .combobox div[role=combobox][aria-invalid=true] {
   border-color: var(--sui-error-border-color);
 }
@@ -506,9 +512,6 @@
 .combobox > :global(button[tabindex="-1"]) {
   pointer-events: none;
 }
-.combobox :global(:not(.editable)) > :global(button) {
-  background-color: transparent !important;
-}
 .combobox :global(.text-input) {
   margin: 0 !important;
   width: 100% !important;

package/dist/components/slider/slider.svelte

@@ -407,6 +407,19 @@
 .slider:active .base-bar {
   background-color: var(--sui-active-background-color);
 }
+.slider.readonly .base-bar, .slider.readonly:is(:hover, :active) .base-bar {
+  background-color: var(--sui-slider-background-color, var(--sui-secondary-background-color));
+}
+.slider.readonly .base,
+.slider.readonly [role=slider] {
+  cursor: default;
+}
+.slider.readonly:not(.invalid) .slider-bar {
+  background-color: var(--sui-readonly-accent-color);
+}
+.slider.readonly:not(.invalid) [role=slider] {
+  border-color: var(--sui-readonly-accent-color);
+}
 
 .base {
   position: relative;

package/dist/components/switch/switch.svelte

@@ -134,6 +134,19 @@ button[aria-checked=true] span:dir(ltr)::before {
 button[aria-checked=true] span:dir(rtl)::before {
   transform: translateX(calc((var(--translateX)) * -1));
 }
+button[aria-readonly=true] {
+  cursor: default;
+}
+button[aria-readonly=true][aria-checked=false] span, button[aria-readonly=true]:is(:hover, :active)[aria-checked=false] span {
+  background-color: var(--sui-control-background-color);
+}
+button[aria-readonly=true][aria-checked=true] span, button[aria-readonly=true]:is(:hover, :active)[aria-checked=true] span {
+  background-color: var(--sui-readonly-accent-color);
+}
+button[aria-readonly=true][aria-checked=true] span::before, button[aria-readonly=true]:is(:hover, :active)[aria-checked=true] span::before {
+  border-color: var(--sui-readonly-accent-color);
+  background-color: var(--sui-readonly-accent-color-inverted);
+}
 
 span {
   position: relative;

package/dist/components/text-editor/shiki/version.d.ts

@@ -1,4 +1,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION: "0.75.4";
+export const UI_VERSION: "0.75.5";

package/dist/components/text-editor/shiki/version.js

@@ -3,4 +3,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION = '0.75.4';
+export const UI_VERSION = '0.75.5';

package/dist/components/text-field/number-input.svelte

@@ -216,6 +216,12 @@
   width: stretch;
   min-width: 0;
 }
+.number-input:not(.disabled) :global(button[aria-disabled='true']) {
+  filter: grayscale(0) opacity(1);
+}
+.number-input:not(.disabled) :global(button[aria-disabled='true']) :global(*) {
+  filter: grayscale(1) opacity(var(--sui-disabled-opacity, 0.35));
+}
 .number-input :global(:not(:first-child)) :global(input) {
   border-start-start-radius: 0;
   border-end-start-radius: 0;
@@ -224,12 +230,6 @@
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
-.number-input :global(:not(.disabled)) :global(button[aria-disabled=true]) {
-  filter: grayscale(0) opacity(1);
-}
-.number-input :global(:not(.disabled)) :global(button[aria-disabled=true]) :global(*) {
-  filter: grayscale(1) opacity(var(--sui-disabled-opacity, 0.35));
-}
 .number-input :global(.text-input) {
   flex: auto;
   margin: 0 !important;

package/dist/components/toast/toast.svelte

@@ -3,7 +3,181 @@
   Toast/snackbar notification. Use the Popover API if possible to acquire a non-modal top layer.
   @see https://w3c.github.io/aria/#alert
   @see https://developer.chrome.com/blog/introducing-popover-api/
+  @see https://github.com/whatwg/html/issues/9936
 -->
+<script module>
+  /**
+   * Modal dialogs currently open, the topmost last. While a modal dialog is open, the rest of the
+   * document is inert, including a popover stacked on top of the dialog, so the toast base has to
+   * live inside the topmost dialog to stay interactive and be announced by screen readers.
+   * @type {HTMLDialogElement[]}
+   */
+  const modals = [];
+
+  /**
+   * Get the element the toast base should be placed in.
+   * @returns {HTMLElement} Topmost modal dialog, the app shell, or the `<body>`.
+   */
+  const getHost = () => {
+    // Drop the dialogs that have been closed or removed without us noticing
+    modals.splice(
+      0,
+      modals.length,
+      ...modals.filter((dialog) => dialog.isConnected && dialog.matches(':modal')),
+    );
+
+    return modals.at(-1) ?? document.querySelector('.sui.app-shell') ?? document.body;
+  };
+
+  /**
+   * Move the toast base to the top of the top layer if it has any toast, or close it otherwise.
+   * It has to be reopened, because a modal dialog opened after the base is stacked on top of it.
+   * @param {HTMLElement} base Toast base.
+   */
+  const raiseBase = (base) => {
+    // Skip if the browser doesn’t support the Popover API
+    /* v8 ignore next */
+    if (!base.showPopover) {
+      return;
+    }
+
+    if (base.matches(':popover-open')) {
+      base.hidePopover();
+    }
+
+    if (base.querySelector('.toast')) {
+      base.showPopover();
+    }
+  };
+
+  /**
+   * Move the toast base to the host returned by {@link getHost}, if it’s not there yet. Use
+   * `moveBefore()` where supported, so the base stays open and the focus stays in a toast.
+   * @param {HTMLElement} base Toast base.
+   * @returns {boolean} Whether the base has been moved.
+   */
+  const moveBase = (base) => {
+    const host = getHost();
+
+    if (base.parentElement === host) {
+      return false;
+    }
+
+    const { moveBefore } = /** @type {any} */ (host);
+
+    if (typeof moveBefore === 'function' && base.isConnected) {
+      moveBefore.call(host, base, null);
+    } else {
+      host.appendChild(base);
+    }
+
+    return true;
+  };
+
+  /**
+   * Toast base shared by all the toasts. It’s created by the first toast mounted and removed with
+   * the last one unmounted, rather than rendered by a component, so it doesn’t go away with the
+   * toast that happened to create it.
+   * @type {HTMLElement | undefined}
+   */
+  let base;
+  /**
+   * Number of the toasts currently mounted.
+   */
+  let mountCount = 0;
+
+  /**
+   * Move the base into a modal dialog that has just been opened.
+   * @param {Event} event `toggle` event.
+   */
+  const onToggle = (event) => {
+    const { target, newState } = /** @type {ToggleEvent} */ (event);
+
+    if (
+      base &&
+      target instanceof HTMLDialogElement &&
+      newState === 'open' &&
+      target.matches(':modal') &&
+      !modals.includes(target)
+    ) {
+      modals.push(target);
+      moveBase(base);
+      raiseBase(base);
+    }
+  };
+
+  /**
+   * Move the base out of a modal dialog that is being closed, before the dialog is possibly
+   * removed from the DOM tree along with the base. `beforetoggle` is fired synchronously when the
+   * dialog is closed; `close` is a fallback for browsers that don’t fire it on a dialog.
+   * @param {Event} event `beforetoggle` or `close` event.
+   */
+  const onClose = (event) => {
+    const { target } = event;
+
+    if (
+      !base ||
+      !(target instanceof HTMLDialogElement) ||
+      (event.type === 'beforetoggle' && /** @type {ToggleEvent} */ (event).newState !== 'closed')
+    ) {
+      return;
+    }
+
+    const index = modals.indexOf(target);
+
+    if (index > -1) {
+      modals.splice(index, 1);
+    }
+
+    if (target.contains(base) && moveBase(base) && !base.matches(':popover-open')) {
+      raiseBase(base);
+    }
+  };
+
+  /**
+   * Get the toast base, creating it if needed, and start keeping it in the topmost modal dialog.
+   * Call {@link releaseBase} once done.
+   * @returns {HTMLElement} Toast base.
+   */
+  const acquireBase = () => {
+    mountCount += 1;
+
+    if (!base) {
+      base = document.createElement('div');
+      base.setAttribute('role', 'none');
+      base.className = 'sui toast-base enabled';
+      base.popover = 'manual';
+      modals.push(...document.querySelectorAll(/** @type {'dialog'} */ ('dialog:modal')));
+      // These events don’t bubble, so listen in the capture phase
+      document.addEventListener('toggle', onToggle, true);
+      document.addEventListener('beforetoggle', onClose, true);
+      document.addEventListener('close', onClose, true);
+    }
+
+    moveBase(base);
+
+    return base;
+  };
+
+  /**
+   * Release the toast base, removing it once no toast uses it.
+   */
+  const releaseBase = () => {
+    mountCount -= 1;
+
+    if (mountCount > 0 || !base) {
+      return;
+    }
+
+    document.removeEventListener('toggle', onToggle, true);
+    document.removeEventListener('beforetoggle', onClose, true);
+    document.removeEventListener('close', onClose, true);
+    base.remove();
+    base = undefined;
+    modals.length = 0;
+  };
+</script>
+
 <script>
   import { onMount, untrack } from 'svelte';
 
@@ -38,10 +212,6 @@
     /* eslint-enable prefer-const */
   } = $props();
 
-  /**
-   * @type {HTMLElement | undefined}
-   */
-  let popoverBase = $state();
   /**
    * @type {HTMLElement | undefined}
    */
@@ -70,33 +240,12 @@
   let rendered = $state(false);
 
   onMount(() => {
-    popover =
-      /** @type {HTMLElement} */ (document.querySelector('.sui.toast-base.enabled')) ?? undefined;
-
-    if (popover) {
-      // eslint-disable-next-line svelte/no-dom-manipulating
-      popoverBase?.remove();
-    } else {
-      popover = popoverBase;
-
-      // The base is bound by the time the component is mounted
-      /* v8 ignore else */
-      if (popover) {
-        popover.classList.add('enabled');
-        (document.querySelector('.sui.app-shell') ?? document.body).appendChild(popover);
-
-        // Move the element to top layer, unless the browser doesn’t support the Popover API
-        /* v8 ignore else */
-        if (popover.showPopover) {
-          popover.popover = 'manual';
-          popover.showPopover();
-        }
-      }
-    }
+    popover = acquireBase();
 
     return () => {
       // eslint-disable-next-line svelte/no-dom-manipulating
       toast?.remove();
+      releaseBase();
     };
   });
 
@@ -124,10 +273,31 @@
 
   $effect(() => {
     // Both are in place by the time the effect first runs; see `onMount()` above
-    /* v8 ignore else */
-    if (popover && toast) {
-      popover.appendChild(toast);
+    /* v8 ignore next */
+    if (!popover || !toast) {
+      return;
     }
+
+    // Keep the toast out of the base while it’s hidden, so faded-out toasts don’t pile up there
+    if (!rendered) {
+      // eslint-disable-next-line svelte/no-dom-manipulating
+      toast.remove();
+      // A detached element gets no `pointerleave` or `focusout`, so release the hold here, or the
+      // countdown would never start the next time the toast is shown
+      held = false;
+
+      // Close the base once the last toast is gone
+      if (!popover.querySelector('.toast') && popover.matches(':popover-open')) {
+        popover.hidePopover();
+      }
+
+      return;
+    }
+
+    // Make sure the base is in the topmost modal dialog, in case a dialog event has been missed
+    moveBase(popover);
+    popover.appendChild(toast);
+    raiseBase(popover);
   });
 
   $effect(() => {
@@ -169,8 +339,6 @@
   });
 </script>
 
-<div bind:this={popoverBase} role="none" class="sui toast-base"></div>
-
 <div
   {...restProps}
   bind:this={toast}
@@ -194,7 +362,7 @@
   {/if}
 </div>
 
-<style>.toast-base {
+<style>:global(.sui.toast-base) {
   position: fixed;
   inset: 16px;
   z-index: 99999;
@@ -230,6 +398,13 @@
   opacity: 1;
   transition-duration: 250ms;
   will-change: opacity;
+}
+@starting-style {
+  .toast {
+    opacity: 0;
+  }
+}
+.toast {
   pointer-events: auto;
 }
 .toast[aria-hidden=true] {

package/dist/components/toast/toast.svelte.d.ts

@@ -7,6 +7,7 @@ type Toast = {
  * Toast/snackbar notification. Use the Popover API if possible to acquire a non-modal top layer.
  * @see https://w3c.github.io/aria/#alert
  * @see https://developer.chrome.com/blog/introducing-popover-api/
+ * @see https://github.com/whatwg/html/issues/9936
  */
 declare const Toast: import("svelte").Component<{
     /**

package/dist/components/tree/tree-item.svelte

@@ -200,6 +200,20 @@
 [role=treeitem] > .row:active {
   background-color: var(--sui-active-background-color);
 }
+:global([role='tree'][aria-readonly='true']) [role=treeitem] > .row {
+  cursor: default;
+}
+:global([role='tree'][aria-readonly='true']) [role=treeitem] > .row:is(:hover, :active) {
+  color: var(--sui-tree-foreground-color);
+  background-color: transparent;
+}
+:global([role='tree'][aria-readonly='true']) [role=treeitem] > .row > .chevron:not(.placeholder) {
+  cursor: pointer;
+}
+:global([role='tree'][aria-readonly='true']) [role=treeitem][aria-selected=true] > .row:is(:hover, :active) {
+  color: var(--sui-highlight-foreground-color);
+  background-color: var(--sui-selected-background-color);
+}
 [role=treeitem][aria-expanded=true] > .row > .chevron:dir(ltr) {
   transform: rotate(90deg);
 }

package/dist/components/util/app-shell.svelte

@@ -161,7 +161,7 @@
   --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));
   --sui-error-border-color: hsl(
     var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
-      var(--sui-alert-border-color-lightness)
+      var(--sui-error-border-color-lightness, var(--sui-alert-border-color-lightness))
   );
   --sui-warning-border-color: hsl(
     var(--sui-warning-color-hue) var(--sui-alert-border-color-saturation)
@@ -231,6 +231,8 @@
   --sui-checkbox-height: 20px;
   --sui-checkbox-border-color: hsl(var(--sui-border-color-1-hsl));
   --sui-checkbox-background-color: var(--sui-control-background-color);
+  --sui-readonly-accent-color: var(--sui-tertiary-foreground-color);
+  --sui-readonly-accent-color-inverted: var(--sui-primary-background-color);
   --sui-option-border-radius: var(--sui-control-medium-border-radius);
   --sui-option-padding: calc((var(--sui-control-medium-height) / 6))
     calc((var(--sui-control-medium-height) / 5));
@@ -302,8 +304,8 @@
   --sui-background-color-4-hsl: var(--sui-base-hue) 5% 92%;
   --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%;
   --sui-border-color-1-hsl: var(--sui-base-hue) 5% 60%;
-  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 86%;
-  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 90%;
+  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 72%;
+  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 80%;
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
   --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
   --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
@@ -322,6 +324,7 @@
   --sui-alert-background-color-lightness: 90%;
   --sui-alert-border-color-saturation: 48%;
   --sui-alert-border-color-lightness: 68%;
+  --sui-error-border-color-lightness: 60%;
 }
 :global(:root[data-theme=dark]),
 :global(:host[data-theme=dark]) {
@@ -373,8 +376,8 @@
     --sui-background-color-4-hsl: var(--sui-base-hue) 5% 92%;
     --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%;
     --sui-border-color-1-hsl: var(--sui-base-hue) 5% 60%;
-    --sui-border-color-2-hsl: var(--sui-base-hue) 5% 86%;
-    --sui-border-color-3-hsl: var(--sui-base-hue) 5% 90%;
+    --sui-border-color-2-hsl: var(--sui-base-hue) 5% 72%;
+    --sui-border-color-3-hsl: var(--sui-base-hue) 5% 80%;
     --sui-shadow-color: var(--sui-base-hue) 10% 0%;
     --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
     --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
@@ -393,6 +396,7 @@
     --sui-alert-background-color-lightness: 90%;
     --sui-alert-border-color-saturation: 48%;
     --sui-alert-border-color-lightness: 68%;
+    --sui-error-border-color-lightness: 60%;
   }
 }
 @media (prefers-color-scheme: dark) {
@@ -451,6 +455,7 @@
   --sui-alert-foreground-color-lightness: 18%;
   --sui-alert-border-color-saturation: 55%;
   --sui-alert-border-color-lightness: 40%;
+  --sui-error-border-color-lightness: 40%;
   --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 60%);
   --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl));
   --sui-active-background-color: hsl(var(--sui-background-color-5-hsl));
@@ -518,6 +523,7 @@
     --sui-alert-foreground-color-lightness: 18%;
     --sui-alert-border-color-saturation: 55%;
     --sui-alert-border-color-lightness: 40%;
+    --sui-error-border-color-lightness: 40%;
     --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 60%);
     --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl));
     --sui-active-background-color: hsl(var(--sui-background-color-5-hsl));
@@ -588,6 +594,7 @@
     --sui-alert-foreground-color-lightness: 18%;
     --sui-alert-border-color-saturation: 55%;
     --sui-alert-border-color-lightness: 40%;
+    --sui-error-border-color-lightness: 40%;
     --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 60%);
     --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl));
     --sui-active-background-color: hsl(var(--sui-background-color-5-hsl));
@@ -656,6 +663,7 @@
     --sui-alert-foreground-color-lightness: 18%;
     --sui-alert-border-color-saturation: 55%;
     --sui-alert-border-color-lightness: 40%;
+    --sui-error-border-color-lightness: 40%;
     --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 60%);
     --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl));
     --sui-active-background-color: hsl(var(--sui-background-color-5-hsl));

package/dist/styles/variables.scss

@@ -11,8 +11,8 @@
   --sui-background-color-4-hsl: var(--sui-base-hue) 5% 92%; // tertiary/disabled
   --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%; // highlight
   --sui-border-color-1-hsl: var(--sui-base-hue) 5% 60%; // control
-  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 86%; // primary
-  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 90%; // secondary
+  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 72%; // primary
+  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 80%; // secondary
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
   // Accents
   --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
@@ -33,6 +33,8 @@
   --sui-alert-background-color-lightness: 90%;
   --sui-alert-border-color-saturation: 48%;
   --sui-alert-border-color-lightness: 68%;
+  // Darker than the other alert borders, as it also marks invalid controls (3:1, WCAG 1.4.11)
+  --sui-error-border-color-lightness: 60%;
 }
 
 @mixin dark-theme {
@@ -97,6 +99,7 @@
   --sui-alert-foreground-color-lightness: 18%;
   --sui-alert-border-color-saturation: 55%;
   --sui-alert-border-color-lightness: 40%;
+  --sui-error-border-color-lightness: 40%;
   @include high-contrast-common;
 }
 
@@ -239,7 +242,7 @@
     --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));
     --sui-error-border-color: hsl(
       var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
-        var(--sui-alert-border-color-lightness)
+        var(--sui-error-border-color-lightness, var(--sui-alert-border-color-lightness))
     );
     --sui-warning-border-color: hsl(
       var(--sui-warning-color-hue) var(--sui-alert-border-color-saturation)
@@ -314,6 +317,10 @@
     --sui-checkbox-height: 20px;
     --sui-checkbox-border-color: hsl(var(--sui-border-color-1-hsl));
     --sui-checkbox-background-color: var(--sui-control-background-color);
+    // Read-only choice controls draw their checked or selected state in a neutral colour instead
+    // of the accent, so they don’t look editable while keeping full contrast
+    --sui-readonly-accent-color: var(--sui-tertiary-foreground-color);
+    --sui-readonly-accent-color-inverted: var(--sui-primary-background-color);
     // Option & menu item
     --sui-option-border-radius: var(--sui-control-medium-border-radius);
     --sui-option-padding: calc((var(--sui-control-medium-height) / 6))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.75.4",
+  "version": "0.75.5",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",