@sveltia/ui 0.63.0 → 0.64.0

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.64.0";
 /**
  * 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.64.0";
 
 /**
  * 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/dist/locales/es-CO.yaml

@@ -0,0 +1,113 @@
+# Dialog action button labels
+ok: OK
+cancel: Cancelar
+close: Cerrar
+
+# Button to clear content, e.g. search input or calendar date
+clear: Limpiar
+
+# Text editor dialog buttons for link/image insertion
+insert: Insertar
+update: Actualizar
+remove: Quitar
+
+# Combobox dropdown toggle button aria-labels
+collapse: Contraer
+expand: Expandir
+
+# Infobar/toast dismiss button label
+dismiss: Descartar
+
+# Calendar component
+calendar:
+  # View switcher group aria-labels and navigation button aria-labels
+  year: Año
+  previous_decade: Década anterior
+  next_decade: Década siguiente
+  month: Mes
+  previous_month: Mes anterior
+  next_month: Mes siguiente
+  # “Today” button label in footer
+  today: Hoy
+
+# Split button component
+split_button:
+  # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
+  x_options: 'Opciones de {$name}'
+  # Dropdown toggle aria-label
+  more_options: Más opciones
+
+# Combobox component
+combobox:
+  # Placeholder when no option is selected
+  select_an_option: Selecciona una opción…
+  # Filter input aria-label
+  filter_options: Filtrar opciones
+  # Empty state message when filter has no matches
+  no_matching_options: No se encontraron opciones coincidentes
+
+# Number input component
+number_input:
+  # Spin button aria-labels for incrementing/decrementing the number value
+  increase: Aumentar
+  decrease: Disminuir
+
+# Password input component
+password_input:
+  # Visibility toggle button aria-labels
+  show_password: Mostrar la contraseña
+  hide_password: Ocultar la contraseña
+
+# Secret input component (API keys, tokens, etc.)
+secret_input:
+  # Visibility toggle button aria-labels
+  show_secret: Mostrar el secreto
+  hide_secret: Ocultar el secreto
+
+# Select tags component (multi-select)
+select_tags:
+  # Listbox aria-label
+  selected_options: Opciones seleccionadas
+  # Remove button aria-label, e.g. “Remove Option 1”
+  remove_x: 'Quitar {$name}'
+
+# Text editor component
+text_editor:
+  # Toolbar aria-labels
+  text_editor: Editor de texto
+  code_editor: Editor de código
+  # Block style menu button and menu aria-labels
+  text_style_options: Opciones de estilo de texto
+  show_text_style_options: Mostrar las opciones de estilo de texto
+  # Block style menu items
+  paragraph: Párrafo
+  heading_1: Encabezado 1
+  heading_2: Encabezado 2
+  heading_3: Encabezado 3
+  heading_4: Encabezado 4
+  heading_5: Encabezado 5
+  heading_6: Encabezado 6
+  bulleted_list: Lista con viñetas
+  numbered_list: Lista numerada
+  blockquote: Cita
+  code_block: Bloque de código
+  # Inline style button aria-labels
+  bold: Negrita
+  italic: Cursiva
+  strikethrough: Tachado
+  code: Código
+  link: Enlace
+  # Link dialog title
+  insert_link: Insertar enlace
+  update_link: Actualizar enlace
+  # Link dialog input field labels
+  text: Texto
+  url: URL
+  # Markdown mode toggle button aria-label
+  edit_in_markdown: Editar en Markdown
+  # Error message when rich text conversion fails
+  converter_error: No se pudo activar el modo de texto enriquecido. Usa el editor de texto sin formato en su lugar.
+  # Language selector aria-label
+  language: Idioma
+  # Plain text mode option in language selector
+  plain_text: Texto sin formato

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.63.0",
+  "version": "0.64.0",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -46,7 +46,7 @@
     "@lexical/selection": "^0.49.0",
     "@lexical/table": "^0.49.0",
     "@lexical/utils": "^0.49.0",
-    "@sveltia/i18n": "^1.2.2",
+    "@sveltia/i18n": "^1.2.3",
     "@sveltia/utils": "^0.12.1",
     "lexical": "^0.49.0"
   },
@@ -64,22 +64,22 @@
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsdoc": "^64.1.0",
     "eslint-plugin-package-json": "^1.7.1",
-    "eslint-plugin-svelte": "^3.22.0",
-    "globals": "^17.10.0",
+    "eslint-plugin-svelte": "^3.23.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-check": "^4.7.5",
+    "svelte": "^5.56.9",
+    "svelte-check": "^4.7.6",
     "svelte-preprocess": "^6.0.5",
     "tslib": "^2.8.1",
     "vite": "^8.2.1",