@sveltia/ui 0.41.3 → 0.42.0

package/dist/components/util/modal.svelte

@@ -217,51 +217,62 @@
   </dialog>
 {/snippet}
 
-<style>dialog {
-  position: fixed;
-  inset: 0;
-  z-index: 9999999;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  outline: 0;
-  margin: 0;
-  border: 0;
-  padding: 0;
-  width: 100dvw;
-  max-width: 100dvw;
-  height: 100dvh;
-  max-height: 100dvh;
-  color: var(--sui-primary-foreground-color);
-  background: transparent;
-  -webkit-user-select: none;
-  user-select: none;
-  touch-action: none;
-  pointer-events: all;
-  cursor: default;
-}
-dialog::backdrop {
-  background: transparent;
-}
-dialog.backdrop {
-  background-color: var(--sui-popup-backdrop-color);
-}
-dialog.open {
-  transition-duration: 50ms;
-  opacity: 1;
-}
-dialog:not(.open) {
-  transition-duration: 400ms;
-  opacity: 0;
-}
-dialog[hidden] {
-  transition-duration: 1ms !important;
-}
-dialog:not(.active) {
-  pointer-events: none !important;
-}
-dialog:not(.active) :global(*) {
-  transition-duration: 0ms !important;
-  pointer-events: none !important;
-}</style>
+<style lang="scss">
+  dialog {
+    position: fixed;
+    inset: 0;
+    z-index: 9999999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    outline: 0;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    width: 100dvw;
+    max-width: 100dvw;
+    height: 100dvh;
+    max-height: 100dvh;
+    color: var(--sui-primary-foreground-color);
+    background: transparent;
+    -webkit-user-select: none;
+    user-select: none;
+    touch-action: none;
+    pointer-events: all;
+    cursor: default;
+
+    &::backdrop {
+      background: transparent;
+    }
+
+    &.backdrop {
+      background-color: var(--sui-popup-backdrop-color);
+    }
+
+    &.open {
+      transition-duration: 50ms;
+      opacity: 1;
+    }
+
+    &:not(.open) {
+      transition-duration: 400ms;
+      opacity: 0;
+    }
+
+    &[hidden] {
+      transition-duration: 1ms !important;
+    }
+
+    &:not(.active) {
+      pointer-events: none !important;
+
+      :global {
+        * {
+          transition-duration: 0ms !important;
+          pointer-events: none !important;
+        }
+      }
+    }
+  }
+</style>

package/dist/components/util/popup.svelte

@@ -201,70 +201,90 @@
   </Modal>
 {/if}
 
-<style>.content {
-  position: absolute;
-  overflow-y: auto;
-  outline-width: 0 !important;
-  width: auto;
-  color: var(--sui-primary-foreground-color);
-  background-color: var(--sui-secondary-background-color-translucent);
-  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
-  -webkit-backdrop-filter: blur(16px);
-  backdrop-filter: blur(16px);
-  transition-property: opacity, transform;
-}
-.content.menu {
-  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-radius: var(--sui-menu-border-radius, 4px);
-  padding: var(--sui-menu-padding, 4px);
-}
-.content.menu :global(.sui.menu) {
-  border-width: 0;
-  border-radius: 0;
-  padding: 0;
-  background-color: transparent;
-}
-.content.listbox {
-  border-width: var(--sui-listbox-border-width, 1px);
-  border-style: var(--sui-listbox-border-style, solid);
-  border-color: var(--sui-listbox-border-width, var(--sui-secondary-border-color));
-  border-radius: var(--sui-listbox-border-radius, 4px);
-  padding: var(--sui-listbox-padding, 4px);
-}
-.content.listbox :global(.sui.listbox) {
-  border-width: 0;
-  border-radius: 0;
-  padding: 0;
-  background-color: transparent;
-}
-.content.touch {
-  position: static;
-  border-width: 0 !important;
-  border-radius: 4px !important;
-  padding: 8px;
-  min-width: 320px !important;
-  max-width: calc(100dvw - 32px) !important;
-  max-height: calc(100dvh - 32px) !important;
-}
-:global(dialog.open) .content.touch {
-  transform: scale(100%) !important;
-}
-:global(dialog:not(.open)) .content.touch {
-  transform: scale(90%);
-}
-.content.touch.combobox :global(.sui.listbox) {
-  gap: 4px;
-  padding: 8px 4px !important;
-}
-:global(dialog.open) .content {
-  transition-duration: 50ms;
-  opacity: 1;
-  transform: translateY(2px);
-}
-:global(dialog:not(.open)) .content {
-  transition-duration: 300ms;
-  opacity: 0;
-  transform: translateY(-8px);
-}</style>
+<style lang="scss">
+  .content {
+    position: absolute;
+    overflow-y: auto;
+    outline-width: 0 !important;
+    width: auto;
+    color: var(--sui-primary-foreground-color);
+    background-color: var(--sui-secondary-background-color-translucent);
+    box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
+    transition-property: opacity, transform;
+
+    &.menu {
+      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-radius: var(--sui-menu-border-radius, 4px);
+      padding: var(--sui-menu-padding, 4px);
+
+      :global {
+        .sui.menu {
+          border-width: 0;
+          border-radius: 0;
+          padding: 0;
+          background-color: transparent;
+        }
+      }
+    }
+
+    &.listbox {
+      border-width: var(--sui-listbox-border-width, 1px);
+      border-style: var(--sui-listbox-border-style, solid);
+      border-color: var(--sui-listbox-border-width, var(--sui-secondary-border-color));
+      border-radius: var(--sui-listbox-border-radius, 4px);
+      padding: var(--sui-listbox-padding, 4px);
+
+      :global {
+        .sui.listbox {
+          border-width: 0;
+          border-radius: 0;
+          padding: 0;
+          background-color: transparent;
+        }
+      }
+    }
+
+    &.touch {
+      position: static;
+      border-width: 0 !important;
+      border-radius: 4px !important;
+      padding: 8px;
+      min-width: 320px !important;
+      max-width: calc(100dvw - 32px) !important;
+      max-height: calc(100dvh - 32px) !important;
+
+      :global(dialog.open) & {
+        transform: scale(100%) !important;
+      }
+
+      :global(dialog:not(.open)) & {
+        transform: scale(90%);
+      }
+
+      &.combobox {
+        :global {
+          .sui.listbox {
+            gap: 4px;
+            padding: 8px 4px !important;
+          }
+        }
+      }
+    }
+
+    :global(dialog.open) & {
+      transition-duration: 50ms;
+      opacity: 1;
+      transform: translateY(2px);
+    }
+
+    :global(dialog:not(.open)) & {
+      transition-duration: 300ms;
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+  }
+</style>

package/dist/index.d.ts

@@ -78,3 +78,4 @@ export { default as EmptyState } from "./components/util/empty-state.svelte";
 export { default as Group } from "./components/util/group.svelte";
 export { default as Modal } from "./components/util/modal.svelte";
 export * from "./typedefs.js";
+export { initLocales, resources } from "./services/i18n.js";

package/dist/index.js

@@ -1,7 +1,3 @@
-import { initLocales } from './services/i18n.js';
-
-initLocales();
-
 export { default as Alert } from './components/alert/alert.svelte';
 export { default as Infobar } from './components/alert/infobar.svelte';
 export { default as BottomNavigation } from './components/bottom-navigation/bottom-navigation.svelte';
@@ -81,6 +77,7 @@ export { default as AppShell } from './components/util/app-shell.svelte';
 export { default as EmptyState } from './components/util/empty-state.svelte';
 export { default as Group } from './components/util/group.svelte';
 export { default as Modal } from './components/util/modal.svelte';
+export { initLocales, resources } from './services/i18n.js';
 
 // eslint-disable-next-line import/export
 export * from './typedefs.js';

package/dist/locales/en.yaml

@@ -1,45 +1,85 @@
+# Dialog action button labels
 ok: OK
 cancel: Cancel
 close: Close
+
+# Button to clear content, e.g. search input or calendar date
 clear: Clear
+
+# Text editor dialog buttons for link/image insertion
 insert: Insert
 update: Update
 remove: Remove
+
+# Combobox dropdown toggle button aria-labels
 collapse: Collapse
 expand: Expand
+
+# Infobar/toast dismiss button label
 dismiss: Dismiss
+
+# Calendar component
 calendar:
+  # View switcher group aria-labels and navigation button aria-labels
   year: Year
   previous_decade: Previous Decade
   next_decade: Next Decade
   month: Month
   previous_month: Previous Month
   next_month: Next Month
+  # “Today” button label in footer
   today: Today
+
+# Split button component
 split_button:
+  # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
   x_options: "{$name} Options"
+  # Dropdown toggle aria-label
   more_options: More Options
+
+# Combobox component
 combobox:
+  # Placeholder when no option is selected
   select_an_option: Select an option…
+  # Filter input aria-label
   filter_options: Filter Options
+  # Empty state message when filter has no matches
   no_matching_options: No matching options found
+
+# Number input component
 number_input:
-  decrease: Decrease
+  # Spin button aria-labels for incrementing/decrementing the number value
   increase: Increase
+  decrease: Decrease
+
+# Password input component
 password_input:
+  # Visibility toggle button aria-labels
   show_password: Show Password
   hide_password: Hide Password
+
+# Secret input component (API keys, tokens, etc.)
 secret_input:
+  # Visibility toggle button aria-labels
   show_secret: Show Secret
   hide_secret: Hide Secret
+
+# Select tags component (multi-select)
 select_tags:
-  selected_options: Selected options
+  # Listbox aria-label
+  selected_options: Selected Options
+  # Remove button aria-label, e.g. “Remove Option 1”
   remove_x: "Remove {$name}"
+
+# Text editor component
 text_editor:
+  # Toolbar aria-labels
   text_editor: Text Editor
   code_editor: Code Editor
+  # Block style menu button and menu aria-labels
   text_style_options: Text Style Options
   show_text_style_options: Show Text Style Options
+  # Block style menu items
   paragraph: Paragraph
   heading_1: Heading 1
   heading_2: Heading 2
@@ -51,16 +91,23 @@ text_editor:
   numbered_list: Numbered List
   blockquote: Block Quote
   code_block: Code Block
+  # Inline style button aria-labels
   bold: Bold
   italic: Italic
   strikethrough: Strikethrough
   code: Code
   link: Link
+  # Link dialog title
   insert_link: Insert Link
   update_link: Update Link
+  # Link dialog input field labels
   text: Text
   url: URL
+  # Markdown mode toggle button aria-label
   edit_in_markdown: Edit in Markdown
-  converter_error: There was an error while enabling rich text mode. Please use the plain text editor instead.
+  # Error message when rich text conversion fails
+  converter_error: Unable to enable rich text mode. Please use the plain text editor instead.
+  # Language selector aria-label
   language: Language
+  # Plain text mode option in language selector
   plain_text: Plain Text

package/dist/locales/ja.yaml

@@ -1,45 +1,85 @@
+# Dialog action button labels
 ok: OK
 cancel: キャンセル
 close: 閉じる
+
+# Button to clear content, e.g. search input or calendar date
 clear: クリア
+
+# Text editor dialog buttons for link/image insertion
 insert: 挿入
 update: 更新
 remove: 削除
+
+# Combobox dropdown toggle button aria-labels
 collapse: 折り畳む
 expand: 広げる
+
+# Infobar/toast dismiss button label
 dismiss: 閉じる
+
+# Calendar component
 calendar:
+  # View switcher group aria-labels and navigation button aria-labels
   year: 年
   previous_decade: 前の 10 年
   next_decade: 次の 10 年
   month: 月
   previous_month: 前月
   next_month: 翌月
+  # "Today" button label in footer
   today: 今日
+
+# Split button component
 split_button:
+  # Wrapper aria-label, e.g. "Save Options" when primary button is "Save"
   x_options: "{$name} オプション"
+  # Dropdown toggle aria-label
   more_options: その他のオプション
+
+# Combobox component
 combobox:
+  # Placeholder when no option is selected
   select_an_option: オプションを選択…
+  # Filter input aria-label
   filter_options: オプションを絞り込み
+  # Empty state message when filter has no matches
   no_matching_options: 一致するオプションは見つかりませんでした
+
+# Number input component
 number_input:
-  decrease: 減らす
+  # Spin button aria-labels for incrementing/decrementing the number value
   increase: 増やす
+  decrease: 減らす
+
+# Password input component
 password_input:
+  # Visibility toggle button aria-labels
   show_password: パスワードを表示
   hide_password: パスワードを隠す
+
+# Secret input component (API keys, tokens, etc.)
 secret_input:
+  # Visibility toggle button aria-labels
   show_secret: シークレットを表示
   hide_secret: シークレットを隠す
+
+# Select tags component (multi-select)
 select_tags:
+  # Listbox aria-label
   selected_options: 選択済みのオプション
+  # Remove button aria-label, e.g. "Remove Option 1"
   remove_x: "{$name} を削除"
+
+# Text editor component
 text_editor:
+  # Toolbar aria-labels
   text_editor: テキストエディター
   code_editor: コードエディター
+  # Block style menu button and menu aria-labels
   text_style_options: テキストスタイルオプション
   show_text_style_options: テキストスタイルオプションを表示
+  # Block style menu items
   paragraph: 段落
   heading_1: 見出し 1
   heading_2: 見出し 2
@@ -51,16 +91,23 @@ text_editor:
   numbered_list: 番号付きリスト
   blockquote: ブロック引用
   code_block: コードブロック
+  # Inline style button aria-labels
   bold: 太字
   italic: 斜体
   strikethrough: 取り消し線
   code: コード
   link: リンク
+  # Link dialog title
   insert_link: リンクを挿入
   update_link: リンクを更新
+  # Link dialog input field labels
   text: テキスト
   url: URL
+  # Markdown mode toggle button aria-label
   edit_in_markdown: マークダウンで編集
-  converter_error: リッチテキストモードを有効化中に問題が発生しました。代わりにプレーンテキストエディターを使用してください。
+  # Error message when rich text conversion fails
+  converter_error: リッチテキストモードを有効にできませんでした。プレーンテキストエディターを使用してください。
+  # Language selector aria-label
   language: 言語
+  # Plain text mode option in language selector
   plain_text: プレーンテキスト

package/dist/services/i18n.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Object containing all the locale resources, with the locale names as keys and the corresponding
+ * strings as values.
+ * @type {Record<string, Record<string, string>>}
+ */
+export const resources: Record<string, Record<string, string>>;
 export function initLocales({ fallbackLocale, initialLocale }?: {
     fallbackLocale?: string | undefined;
     initialLocale?: string | undefined;

package/dist/services/i18n.js

@@ -1,8 +1,22 @@
 import { addMessages, init } from '@sveltia/i18n';
-import { parse as parseYaml } from 'yaml';
+
+const rawResources = import.meta.glob('../locales/*.yaml', { eager: true, import: 'default' });
+
+/**
+ * Object containing all the locale resources, with the locale names as keys and the corresponding
+ * strings as values.
+ * @type {Record<string, Record<string, string>>}
+ */
+export const resources = Object.fromEntries(
+  Object.entries(rawResources).map(([path, resource]) => [
+    /** @type {string} */ (path.match(/.+\/(?<locale>.+?)\.yaml$/)?.groups?.locale),
+    /** @type {Record<string, string>} */ (resource),
+  ]),
+);
 
 /**
- * Load strings and initialize the locales.
+ * Load strings and initialize the locales. Consumers can use this function to load the localized
+ * strings for their application. If `<AppShell>` is used, this function is called automatically.
  * @param {object} [init] Initialize options.
  * @param {string} [init.fallbackLocale] Fallback locale.
  * @param {string} [init.initialLocale] Initial locale.
@@ -10,18 +24,9 @@ import { parse as parseYaml } from 'yaml';
  * @see https://vitejs.dev/guide/features.html#glob-import
  */
 export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}) => {
-  const resources = import.meta.glob('../locales/*.yaml', {
-    eager: true,
-    query: '?raw',
-    import: 'default',
-  });
-
-  Object.entries(resources).forEach(([path, resource]) => {
-    addMessages(
-      /** @type {string} */ (path.match(/.+\/(?<locale>.+?)\.yaml$/)?.groups?.locale),
-      // Add `_sui` suffix to avoid collision with app localization
-      { _sui: parseYaml(/** @type {string} */ (resource)) },
-    );
+  Object.entries(resources).forEach(([locale, resource]) => {
+    // Add `_sui` suffix to avoid collision with app localization
+    addMessages(locale, { _sui: resource });
   });
 
   init({ fallbackLocale, initialLocale });

package/dist/typedefs.d.ts

@@ -397,6 +397,10 @@ export type ComboboxProps = {
      * Use `-1` to always hide the filter.
      */
     filterThreshold?: number | undefined;
+    /**
+     * The `aria-label` attribute on the wrapper element.
+     */
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */
@@ -490,7 +494,7 @@ export type TextInputProps = {
     /**
      * `aria-label` attribute.
      */
-    "aria-label"?: string | undefined;
+    ariaLabel?: string | undefined;
     /**
      * Primary slot content.
      */

package/dist/typedefs.js

@@ -139,6 +139,7 @@
  * @property {PopupPosition} [position] Where to show the dropdown menu.
  * @property {number} [filterThreshold] Number of items to start showing the filter. Default: `5`.
  * Use `-1` to always hide the filter.
+ * @property {string} [ariaLabel] The `aria-label` attribute on the wrapper element.
  * @property {Snippet} [children] Primary slot content.
  * @property {Snippet} [chevronIcon] Chevron icon slot content.
  * @property {(event: CustomEvent) => void} [onChange] Custom `change` event handler.
@@ -174,7 +175,7 @@
  * `aria-required` attribute.
  * @property {boolean} [invalid] Whether to mark the widget invalid. An alias of the `aria-invalid`
  * attribute.
- * @property {string} [aria-label] `aria-label` attribute.
+ * @property {string} [ariaLabel] `aria-label` attribute.
  * @property {Snippet} [children] Primary slot content.
  */