@sveltia/ui 0.63.0 → 0.63.1

package/dist/components/button/button.svelte

@@ -220,9 +220,7 @@ button.ghost[aria-pressed=true] {
   background-color: var(--sui-button-ghost-background-color-pressed, var(--sui-selected-background-color));
 }
 button.link {
-  outline: 0;
   margin: 0;
-  border-radius: 0 !important;
   padding: 0 !important;
   height: auto !important;
   color: var(--sui-button-link-foreground-color, var(--sui-primary-accent-color-text));
@@ -237,9 +235,6 @@ button.link .label {
 :global(:is(:root, :host)[data-underline-links='true']) button.link .label {
   text-decoration: underline;
 }
-button.link:is(:hover, :focus, :active) .label {
-  text-decoration: var(--sui-button-link-text-decoration-focus, underline);
-}
 button.small {
   border-radius: var(--sui-button-small-border-radius);
   padding: var(--sui-button-small-padding);

package/dist/components/listbox/option.svelte

@@ -50,6 +50,13 @@
     /* eslint-enable prefer-const */
   } = $props();
 
+  /**
+   * Fallback `id`, so the option can always be referenced by `aria-activedescendant`. `<Group>`
+   * assigns one to each member as it activates, but within a `<Combobox>` that happens while the
+   * dropdown is still collapsed and no option has rendered yet.
+   */
+  const fallbackId = $props.id();
+
   /**
    * The registry provided by an ancestor `<Combobox>`. This is `undefined` when the option is used
    * standalone within a `<Listbox>`, in which case it always renders itself.
@@ -126,6 +133,7 @@
     <Button
       {...restProps}
       role="option"
+      id={restProps.id ?? fallbackId}
       tabindex="-1"
       aria-selected={selected}
       {label}

package/dist/components/select/combobox.svelte

@@ -124,11 +124,63 @@
     onChange?.(new CustomEvent('Change', { detail }));
   };
 
+  /**
+   * The `<Listbox>` rendered for this combobox. It’s reached through {@link optionHost}, which owns
+   * it wherever the options currently live, rather than through the popup, which only holds it
+   * while the dropdown is expanded.
+   * @returns {HTMLElement | null | undefined} Listbox element.
+   */
+  const getListbox = () => optionHost?.querySelector('[role="listbox"]');
+
+  /**
+   * Make the selected option the starting point of the expanded dropdown: scroll it into view, and
+   * mark it as the focused member so the arrow keys carry on from there. A long option list is
+   * scrollable, and the dropdown would otherwise open at the top with the current selection nowhere
+   * to be seen — and the first arrow key would jump back up to the first option.
+   */
+  const revealSelectedOption = () => {
+    const listbox = getListbox();
+
+    const option = /** @type {HTMLElement | null | undefined} */ (
+      listbox?.querySelector('[role="option"][aria-selected="true"]')
+    );
+
+    if (!listbox || !option) {
+      return;
+    }
+
+    // `<Group>` tracks the focused member with this class, and moves it on from there
+    option.classList.add('focused');
+    listbox.setAttribute('aria-activedescendant', option.id);
+
+    option.scrollIntoView(true);
+  };
+
   // Let the options know whether they should render themselves
   $effect(() => {
     registry.expanded = isPopupOpen;
   });
 
+  // Reveal the selected option once the dropdown is expanded. The options are rendered and moved
+  // into the popup by the effects around this one, and the popup is then measured against the space
+  // below the anchor to get its height, so there is nothing to scroll until all of that has
+  // settled. The popup moves focus onto its first tab stop 100ms in, which scrolls that element
+  // into view in turn, so this has to come after it rather than be undone by it.
+  $effect(() => {
+    if (!isPopupOpen) {
+      return undefined;
+    }
+
+    const timer = globalThis.setTimeout(revealSelectedOption, 150);
+
+    return () => {
+      globalThis.clearTimeout(timer);
+      // The options are unmounted along with the popup, so the listbox is about to be pointing at
+      // an element that no longer exists
+      getListbox()?.removeAttribute('aria-activedescendant');
+    };
+  });
+
   // Move the options into the popup while it’s expanded, and back out before it’s unmounted. Only
   // the wrapper is moved, never its children, so Svelte keeps full ownership of the subtree.
   $effect(() => {
@@ -414,6 +466,7 @@
 }
 
 .combobox-inner {
+  flex: auto;
   display: flex;
   flex-direction: column;
   overflow: hidden;

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

@@ -7,7 +7,7 @@ export const SHIKI_VERSION: "4.4.3";
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION: "0.63.0";
+export const UI_VERSION: "0.63.1";
 /**
  * Available syntax highlighting languages, sorted by display name.
  * @type {{ id: string, name: string, aliases?: string[] }[]}

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

@@ -10,7 +10,7 @@ export const SHIKI_VERSION = "4.4.3";
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION = "0.63.0";
+export const UI_VERSION = "0.63.1";
 
 /**
  * Available syntax highlighting languages, sorted by display name.

package/dist/components/util/popup.svelte

@@ -247,6 +247,11 @@
   padding: 0;
   background-color: transparent;
 }
+.content.combobox {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
 .content.touch {
   position: static;
   border-width: 0 !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.63.0",
+  "version": "0.63.1",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -65,20 +65,20 @@
     "eslint-plugin-jsdoc": "^64.1.0",
     "eslint-plugin-package-json": "^1.7.1",
     "eslint-plugin-svelte": "^3.22.0",
-    "globals": "^17.10.0",
+    "globals": "^17.11.0",
     "happy-dom": "^20.11.2",
     "oxlint": "^1.78.0",
     "postcss": "^8.5.26",
     "postcss-html": "^2.0.0",
     "prettier": "^3.9.6",
     "prettier-plugin-svelte": "^4.1.1",
-    "rolldown": "^1.2.3",
+    "rolldown": "^1.2.4",
     "sass": "^1.102.0",
     "shiki": "^4.4.3",
     "stylelint": "^17.14.1",
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-scss": "^7.2.0",
-    "svelte": "^5.56.8",
+    "svelte": "^5.56.9",
     "svelte-check": "^4.7.5",
     "svelte-preprocess": "^6.0.5",
     "tslib": "^2.8.1",