@sveltia/ui 0.41.5 → 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.41.5",
+  "version": "0.42.0",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -33,36 +33,36 @@
     "!dist/**/*.test.*"
   ],
   "dependencies": {
-    "@lexical/code": "^0.46.0",
-    "@lexical/code-prism": "^0.46.0",
-    "@lexical/dragon": "^0.46.0",
-    "@lexical/extension": "^0.46.0",
-    "@lexical/history": "^0.46.0",
-    "@lexical/link": "^0.46.0",
-    "@lexical/list": "^0.46.0",
-    "@lexical/markdown": "^0.46.0",
-    "@lexical/rich-text": "^0.46.0",
-    "@lexical/selection": "^0.46.0",
-    "@lexical/table": "^0.46.0",
-    "@lexical/utils": "^0.46.0",
+    "@lexical/code": "^0.47.0",
+    "@lexical/code-prism": "^0.47.0",
+    "@lexical/dragon": "^0.47.0",
+    "@lexical/extension": "^0.47.0",
+    "@lexical/history": "^0.47.0",
+    "@lexical/link": "^0.47.0",
+    "@lexical/list": "^0.47.0",
+    "@lexical/markdown": "^0.47.0",
+    "@lexical/rich-text": "^0.47.0",
+    "@lexical/selection": "^0.47.0",
+    "@lexical/table": "^0.47.0",
+    "@lexical/utils": "^0.47.0",
     "@sveltia/i18n": "^1.1.2",
     "@sveltia/utils": "^0.10.7",
-    "lexical": "^0.46.0",
-    "prismjs": "^1.30.0",
-    "yaml": "^2.9.0"
+    "lexical": "^0.47.0",
+    "prismjs": "^1.30.0"
   },
   "devDependencies": {
+    "@rollup/plugin-yaml": "^5.0.0",
     "@sveltejs/adapter-auto": "^7.0.1",
     "@sveltejs/kit": "^2.69.2",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.2.0",
     "@vitest/coverage-v8": "^4.1.10",
     "cspell": "^10.0.1",
-    "eslint": "^9.39.4",
+    "eslint": "^9.39.5",
     "eslint-config-airbnb-extended": "^3.1.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^63.0.12",
+    "eslint-plugin-jsdoc": "^63.0.13",
     "eslint-plugin-package-json": "^1.5.0",
     "eslint-plugin-svelte": "^3.20.0",
     "globals": "^17.7.0",
@@ -70,7 +70,7 @@
     "oxlint": "^1.73.0",
     "postcss": "^8.5.16",
     "postcss-html": "^1.8.1",
-    "prettier": "^3.9.4",
+    "prettier": "^3.9.5",
     "prettier-plugin-svelte": "^4.1.1",
     "sass": "^1.101.0",
     "stylelint": "^17.14.0",
@@ -80,7 +80,7 @@
     "svelte-check": "^4.7.2",
     "svelte-preprocess": "^6.0.5",
     "tslib": "^2.8.1",
-    "vite": "^8.1.3",
+    "vite": "^8.1.4",
     "vitest": "^4.1.10"
   },
   "peerDependencies": {