@sveltia/ui 0.72.2 → 0.73.0

package/dist/locales/fi.yaml

@@ -18,6 +18,26 @@ expand: Näytä
 # Infobar/toast dismiss button label
 dismiss: Hylkää
 
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: Virhe
+  warning: Varoitus
+  info: Tiedoksi
+  success: Onnistui
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: laajennettava osio
+  option_group: vaihtoehtoryhmä
+  menu_item_group: valikkokohtien ryhmä
+  checkbox_group: valintaruuturyhmä
+  table_head: taulukon otsikko
+  table_body: taulukon sisältö
+  table_foot: taulukon alatunniste
+  grid_head: ruudukon otsikko
+  grid_body: ruudukon sisältö
+  grid_foot: ruudukon alatunniste
+
 # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
 emoji_suggestions: Emoji-ehdotukset
 

package/dist/locales/fr.yaml

@@ -18,6 +18,26 @@ expand: Développer
 # Infobar/toast dismiss button label
 dismiss: Ignorer
 
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: Erreur
+  warning: Avertissement
+  info: Information
+  success: Succès
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: section dépliable
+  option_group: groupe d’options
+  menu_item_group: groupe d’éléments de menu
+  checkbox_group: groupe de cases à cocher
+  table_head: en-tête de tableau
+  table_body: corps de tableau
+  table_foot: pied de tableau
+  grid_head: en-tête de grille
+  grid_body: corps de grille
+  grid_foot: pied de grille
+
 # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
 emoji_suggestions: Suggestions d’émojis
 

package/dist/locales/hr.yaml

@@ -18,6 +18,26 @@ expand: Proširi
 # Infobar/toast dismiss button label
 dismiss: Odbaci
 
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: Pogreška
+  warning: Upozorenje
+  info: Informacija
+  success: Uspjeh
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: proširivi odjeljak
+  option_group: grupa opcija
+  menu_item_group: grupa stavki izbornika
+  checkbox_group: grupa potvrdnih okvira
+  table_head: zaglavlje tablice
+  table_body: tijelo tablice
+  table_foot: podnožje tablice
+  grid_head: zaglavlje rešetke
+  grid_body: tijelo rešetke
+  grid_foot: podnožje rešetke
+
 # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
 emoji_suggestions: Prijedlozi emojija
 

package/dist/locales/it.yaml

@@ -18,6 +18,26 @@ expand: Espandi
 # Infobar/toast dismiss button label
 dismiss: Ignora
 
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: Errore
+  warning: Avviso
+  info: Informazione
+  success: Operazione riuscita
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: sezione espandibile
+  option_group: gruppo di opzioni
+  menu_item_group: gruppo di voci di menu
+  checkbox_group: gruppo di caselle di controllo
+  table_head: intestazione tabella
+  table_body: corpo tabella
+  table_foot: piè di tabella
+  grid_head: intestazione griglia
+  grid_body: corpo griglia
+  grid_foot: piè di griglia
+
 # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
 emoji_suggestions: Suggerimenti Emoji
 

package/dist/locales/ja.yaml

@@ -18,6 +18,26 @@ expand: 広げる
 # Infobar/toast dismiss button label
 dismiss: 閉じる
 
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: エラー
+  warning: 警告
+  info: 情報
+  success: 成功
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: 折りたたみセクション
+  option_group: オプショングループ
+  menu_item_group: メニュー項目グループ
+  checkbox_group: チェックボックスグループ
+  table_head: テーブルヘッダー
+  table_body: テーブル本体
+  table_foot: テーブルフッター
+  grid_head: グリッドヘッダー
+  grid_body: グリッド本体
+  grid_foot: グリッドフッター
+
 # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
 emoji_suggestions: 絵文字の候補
 

package/dist/locales/ko.yaml

@@ -18,6 +18,26 @@ expand: 펼치기
 # Infobar/toast dismiss button label
 dismiss: 닫기
 
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: 오류
+  warning: 경고
+  info: 정보
+  success: 성공
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: 펼치기 섹션
+  option_group: 옵션 그룹
+  menu_item_group: 메뉴 항목 그룹
+  checkbox_group: 체크박스 그룹
+  table_head: 표 머리글
+  table_body: 표 본문
+  table_foot: 표 바닥글
+  grid_head: 그리드 머리글
+  grid_body: 그리드 본문
+  grid_foot: 그리드 바닥글
+
 # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
 emoji_suggestions: 이모지 제안
 

package/dist/locales/nl.yaml

@@ -18,6 +18,26 @@ expand: Uitvouwen
 # Infobar/toast dismiss button label
 dismiss: Sluiten
 
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: Fout
+  warning: Waarschuwing
+  info: Informatie
+  success: Gelukt
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: uitklapbare sectie
+  option_group: optiegroep
+  menu_item_group: menu-itemgroep
+  checkbox_group: selectievakjesgroep
+  table_head: tabelkop
+  table_body: tabelinhoud
+  table_foot: tabelvoet
+  grid_head: rasterkop
+  grid_body: rasterinhoud
+  grid_foot: rastervoet
+
 # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
 emoji_suggestions: Emoji-suggesties
 

package/dist/locales/pl.yaml

@@ -18,6 +18,26 @@ expand: Rozwiń
 # Infobar/toast dismiss button label
 dismiss: Odrzuć
 
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: Błąd
+  warning: Ostrzeżenie
+  info: Informacja
+  success: Sukces
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: sekcja rozwijana
+  option_group: grupa opcji
+  menu_item_group: grupa pozycji menu
+  checkbox_group: grupa pól wyboru
+  table_head: nagłówek tabeli
+  table_body: treść tabeli
+  table_foot: stopka tabeli
+  grid_head: nagłówek siatki
+  grid_body: treść siatki
+  grid_foot: stopka siatki
+
 # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
 emoji_suggestions: Propozycje emoji
 

package/dist/locales/pt-BR.yaml

@@ -18,6 +18,26 @@ expand: Expandir
 # Infobar/toast dismiss button label
 dismiss: Dispensar
 
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: Erro
+  warning: Aviso
+  info: Informação
+  success: Sucesso
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: seção expansível
+  option_group: grupo de opções
+  menu_item_group: grupo de itens de menu
+  checkbox_group: grupo de caixas de seleção
+  table_head: cabeçalho da tabela
+  table_body: corpo da tabela
+  table_foot: rodapé da tabela
+  grid_head: cabeçalho da grade
+  grid_body: corpo da grade
+  grid_foot: rodapé da grade
+
 # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
 emoji_suggestions: Sugestões de emoji
 

package/dist/locales/pt-PT.yaml

@@ -18,6 +18,26 @@ expand: Expandir
 # Infobar/toast dismiss button label
 dismiss: Dispensar
 
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: Erro
+  warning: Aviso
+  info: Informação
+  success: Sucesso
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: secção expansível
+  option_group: grupo de opções
+  menu_item_group: grupo de itens de menu
+  checkbox_group: grupo de caixas de verificação
+  table_head: cabeçalho da tabela
+  table_body: corpo da tabela
+  table_foot: rodapé da tabela
+  grid_head: cabeçalho da grelha
+  grid_body: corpo da grelha
+  grid_foot: rodapé da grelha
+
 # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
 emoji_suggestions: Sugestões de emoji
 

package/dist/locales/ru.yaml

@@ -18,6 +18,26 @@ expand: Развернуть
 # Infobar/toast dismiss button label
 dismiss: Отклонить
 
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: Ошибка
+  warning: Предупреждение
+  info: Информация
+  success: Успешно
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: раскрывающийся раздел
+  option_group: группа вариантов
+  menu_item_group: группа пунктов меню
+  checkbox_group: группа флажков
+  table_head: заголовок таблицы
+  table_body: тело таблицы
+  table_foot: нижняя часть таблицы
+  grid_head: заголовок сетки
+  grid_body: тело сетки
+  grid_foot: нижняя часть сетки
+
 # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
 emoji_suggestions: Предложения эмодзи
 

package/dist/locales/sv.yaml

@@ -18,6 +18,26 @@ expand: Fäll ut
 # Infobar/toast dismiss button label
 dismiss: Avfärda
 
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: Fel
+  warning: Varning
+  info: Information
+  success: Lyckades
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: utfällbar sektion
+  option_group: alternativgrupp
+  menu_item_group: grupp med menyalternativ
+  checkbox_group: kryssrutegrupp
+  table_head: tabellhuvud
+  table_body: tabellkropp
+  table_foot: tabellfot
+  grid_head: rutnätshuvud
+  grid_body: rutnätskropp
+  grid_foot: rutnätsfot
+
 # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
 emoji_suggestions: Emojiförslag
 

package/dist/locales/tr.yaml

@@ -18,6 +18,26 @@ expand: Genişlet
 # Infobar/toast dismiss button label
 dismiss: Kapat
 
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: Hata
+  warning: Uyarı
+  info: Bilgi
+  success: Başarılı
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: genişletilebilir bölüm
+  option_group: seçenek grubu
+  menu_item_group: menü öğesi grubu
+  checkbox_group: onay kutusu grubu
+  table_head: tablo başlığı
+  table_body: tablo gövdesi
+  table_foot: tablo altbilgisi
+  grid_head: ızgara başlığı
+  grid_body: ızgara gövdesi
+  grid_foot: ızgara altbilgisi
+
 # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
 emoji_suggestions: Emoji Önerileri
 

package/dist/locales/uk.yaml

@@ -18,6 +18,26 @@ expand: Розгорнути
 # Infobar/toast dismiss button label
 dismiss: Відхилити
 
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: Помилка
+  warning: Попередження
+  info: Інформація
+  success: Успішно
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: розгортаний розділ
+  option_group: група варіантів
+  menu_item_group: група пунктів меню
+  checkbox_group: група прапорців
+  table_head: заголовок таблиці
+  table_body: тіло таблиці
+  table_foot: нижня частина таблиці
+  grid_head: заголовок сітки
+  grid_body: тіло сітки
+  grid_foot: нижня частина сітки
+
 # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
 emoji_suggestions: Пропозиції емодзі
 

package/dist/locales/vi.yaml

@@ -18,6 +18,26 @@ expand: Mở rộng
 # Infobar/toast dismiss button label
 dismiss: Đóng
 
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: Lỗi
+  warning: Cảnh báo
+  info: Thông tin
+  success: Thành công
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: phần có thể mở rộng
+  option_group: nhóm tùy chọn
+  menu_item_group: nhóm mục menu
+  checkbox_group: nhóm hộp kiểm
+  table_head: đầu bảng
+  table_body: thân bảng
+  table_foot: chân bảng
+  grid_head: đầu lưới
+  grid_body: thân lưới
+  grid_foot: chân lưới
+
 # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
 emoji_suggestions: Gợi ý biểu tượng cảm xúc
 

package/dist/locales/zh-CN.yaml

@@ -18,6 +18,26 @@ expand: 展开
 # Infobar/toast dismiss button label
 dismiss: 关闭
 
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: 错误
+  warning: 警告
+  info: 信息
+  success: 成功
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: 可展开区域
+  option_group: 选项组
+  menu_item_group: 菜单项组
+  checkbox_group: 复选框组
+  table_head: 表头
+  table_body: 表体
+  table_foot: 表尾
+  grid_head: 网格表头
+  grid_body: 网格表体
+  grid_foot: 网格表尾
+
 # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
 emoji_suggestions: 表情符号建议
 

package/dist/locales/zh-TW.yaml

@@ -18,6 +18,26 @@ expand: 展開
 # Infobar/toast dismiss button label
 dismiss: 關閉
 
+# Alert & infobar status, read out by screen readers before the message (visually hidden)
+alert:
+  error: 錯誤
+  warning: 警告
+  info: 資訊
+  success: 成功
+
+# Role descriptions, read out by screen readers in place of the generic “group” role
+role_descriptions:
+  disclosure: 可展開區塊
+  option_group: 選項群組
+  menu_item_group: 選單項目群組
+  checkbox_group: 核取方塊群組
+  table_head: 表格標頭
+  table_body: 表格內容
+  table_foot: 表格頁尾
+  grid_head: 網格標頭
+  grid_body: 網格內容
+  grid_foot: 網格頁尾
+
 # Emoji suggestion listbox aria-label, shared by the text fields and the text editor
 emoji_suggestions: 表情符號建議
 

package/dist/services/group.svelte.js

@@ -2,6 +2,7 @@ import { isRTL } from '@sveltia/i18n';
 import { generateElementId } from '@sveltia/utils/element';
 import { sleep } from '@sveltia/utils/misc';
 import { getSelectedItemDetail } from './select.svelte.js';
+import { findTypeAheadMatch, TypeAhead } from './type-ahead.js';
 
 /**
  * @import { Attachment } from 'svelte/attachments';
@@ -200,6 +201,12 @@ export class Group {
    */
   #hiddenState = new WeakMap();
 
+  /**
+   * Keystroke buffer for type-ahead.
+   * @type {TypeAhead}
+   */
+  #typeAhead = new TypeAhead();
+
   /**
    * Get the normalized value a member is searched by, computing it only when the underlying raw
    * value has changed since the last call.
@@ -802,6 +809,58 @@ export class Group {
       event.preventDefault();
     }
 
+    // Home, End and type-ahead only apply to keystrokes on the group itself or on a member. A text
+    // field nested in a menu, say, keeps them for its own caret and content.
+    const fromMember = target === this.parent || target.matches(this.selector);
+
+    // Home and End jump to the ends of the group, in any layout
+    if (key === 'Home' || key === 'End') {
+      if (!fromMember) {
+        return;
+      }
+
+      event.preventDefault();
+
+      const newTarget = activeMembers[key === 'Home' ? 0 : activeMembers.length - 1];
+
+      if (newTarget && newTarget !== currentTarget) {
+        this.selectTarget(event, newTarget);
+      }
+
+      return;
+    }
+
+    // Type-ahead: a printable character moves to the next member whose label starts with what has
+    // been typed so far, as in a native `<select>` and per the Listbox and Menu patterns. This goes
+    // by the visible label, not the search value, which may hold synonyms for filtering — and by
+    // the label element rather than the whole text, which would take in icon ligature names.
+    if (key.length === 1 && key !== ' ' && fromMember && (this.role === 'listbox' || isMenu)) {
+      // Swallow the key whether or not it matches, as a native `<select>` does. Left to the
+      // browser, a printable key on a non-editable element starts Firefox’s find-as-you-type.
+      event.preventDefault();
+
+      const labels = activeMembers.map((member) =>
+        normalize(
+          member.dataset.label ??
+            member.querySelector('.label')?.textContent ??
+            member.textContent ??
+            '',
+        ),
+      );
+
+      const index = findTypeAheadMatch(
+        labels,
+        this.#typeAhead.push(key),
+        currentTarget ? activeMembers.indexOf(currentTarget) : -1,
+      );
+
+      if (index !== -1 && activeMembers[index] !== currentTarget) {
+        this.selectTarget(event, activeMembers[index]);
+      }
+
+      return;
+    }
+
     if (key === 'Enter') {
       currentTarget?.click(); // Also close the popup if needed
 
@@ -929,6 +988,7 @@ export class Group {
    * Clean up event listeners.
    */
   destroy() {
+    this.#typeAhead.reset();
     this.observer.disconnect();
     this.parent.removeEventListener('click', this._onClick);
     this.parent.removeEventListener('keydown', this._onKeyDown);

package/dist/services/popup.svelte.js

@@ -115,10 +115,33 @@ class Popup {
       const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
       const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
 
-      if (!this.isDisabled && !this.isReadOnly && ['Enter', ' '].includes(key) && !hasModifier) {
+      if (this.isDisabled || this.isReadOnly) {
+        return;
+      }
+
+      if (['Enter', ' '].includes(key) && !hasModifier) {
         event.preventDefault();
         event.stopPropagation();
         this.open = !this.open;
+
+        return;
+      }
+
+      // The arrow keys open a listbox or menu, the way they do a native `<select>`; Alt+Down is the
+      // combobox convention (APG Select-Only Combobox, Menu Button). They never close one: inside
+      // the popup they belong to the list. A menu item that opens a submenu is left alone: there
+      // the arrows move through the parent menu, and the submenu opens with the inline arrow.
+      if (
+        ['ArrowDown', 'ArrowUp'].includes(key) &&
+        !(shiftKey || ctrlKey || metaKey) &&
+        (!altKey || key === 'ArrowDown') &&
+        ['listbox', 'menu'].includes(anchorElement.getAttribute('aria-haspopup') ?? '') &&
+        !anchorElement.matches('[role^="menuitem"]') &&
+        !this.open
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.open = true;
       }
     });
 

package/dist/services/select.svelte.d.ts

@@ -20,6 +20,11 @@ export class OptionRegistry {
      * @returns {number} Count.
      */
     get count(): number;
+    /**
+     * Registered options, in registration order.
+     * @returns {OptionEntry[]} Entries.
+     */
+    get entries(): OptionEntry[];
     /**
      * The option that is currently marked as selected, if any.
      * @returns {OptionEntry | undefined} Matching option.

package/dist/services/select.svelte.js

@@ -42,6 +42,14 @@ export class OptionRegistry {
     return this.#entries.length;
   }
 
+  /**
+   * Registered options, in registration order.
+   * @returns {OptionEntry[]} Entries.
+   */
+  get entries() {
+    return this.#entries;
+  }
+
   /**
    * The option that is currently marked as selected, if any.
    * @returns {OptionEntry | undefined} Matching option.

package/dist/services/type-ahead.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Type-ahead support shared by the composite widgets: the collapsed select-only combobox, and the
+ * listbox and menu groups.
+ */
+/**
+ * How long, in milliseconds, successive keystrokes keep adding up to one type-ahead prefix.
+ */
+export const TYPE_AHEAD_TIMEOUT: 500;
+/**
+ * Keystroke buffer behind type-ahead: printable keys typed in quick succession make up a prefix,
+ * which is dropped again after a short pause.
+ */
+export class TypeAhead {
+    /**
+     * Add a keystroke to the prefix.
+     * @param {string} key Printable key.
+     * @returns {string} Current prefix.
+     */
+    push(key: string): string;
+    /**
+     * Drop the prefix.
+     */
+    reset(): void;
+    #private;
+}
+export function findTypeAheadMatch(labels: string[], prefix: string, currentIndex: number): number;