@sveltia/ui 0.42.1 → 0.44.0

package/dist/components/resizable-pane/resizable-handle.svelte

@@ -290,7 +290,7 @@
 .resizable-handle:focus-visible, .resizable-handle:hover, .resizable-handle.dragging {
   outline: none;
   z-index: 1;
-  background-color: var(--sui-primary-accent-color-translucent);
+  background-color: var(--sui-primary-accent-color-translucent-light);
 }
 .resizable-handle:focus-visible .handle-bar, .resizable-handle:hover .handle-bar, .resizable-handle.dragging .handle-bar {
   background-color: var(--sui-primary-accent-color);

package/dist/components/select/select-tags.svelte

@@ -283,8 +283,7 @@
   outline: none;
 }
 .select-tags span[draggable]:focus-within {
-  outline: var(--sui-focus-ring-width) solid var(--sui-primary-accent-color-translucent);
-  outline-offset: 1px;
+  outline: var(--sui-focus-ring-width) solid var(--sui-focus-ring-color);
 }
 .select-tags span[draggable].drag-source {
   opacity: 0.4;
@@ -310,6 +309,9 @@
 .select-tags span[draggable] .label {
   outline: none;
 }
+.select-tags span[draggable] :global(button) {
+  outline-offset: -2px;
+}
 .select-tags span[draggable] :global(.icon) {
   font-size: var(--sui-font-size-large);
 }</style>

package/dist/components/switch/switch.svelte

@@ -117,7 +117,7 @@ button:focus-visible {
   outline: 0;
 }
 button:focus-visible span {
-  outline-color: var(--sui-primary-accent-color-translucent);
+  outline-color: var(--sui-focus-ring-color);
 }
 button[aria-checked=true] span {
   background-color: var(--sui-primary-accent-color);

package/dist/components/text-editor/code-editor.svelte

@@ -119,7 +119,12 @@
 
 <style>.code-editor {
   margin: var(--sui-focus-ring-width);
+  border-radius: var(--sui-textbox-border-radius);
   width: calc(100% - var(--sui-focus-ring-width) * 2);
+  transition: all 200ms;
+}
+.code-editor:focus-within {
+  outline: var(--sui-focus-ring-width) solid var(--sui-focus-ring-color);
 }
 .code-editor.flex:not([hidden]) {
   display: block;

package/dist/components/text-editor/core.js

@@ -28,6 +28,7 @@ import {
   ListNode,
 } from '@lexical/list';
 import {
+  CODE,
   $convertFromMarkdownString as convertFromMarkdownString,
   $convertToMarkdownString as convertToMarkdownString,
   registerMarkdownShortcuts,
@@ -210,11 +211,11 @@ export const initEditor = ({
           .filter(([button]) => enabledButtons.includes(/** @type {TextEditorNodeType} */ (button)))
           .flatMap(([, nodes]) => nodes),
       ),
-      ...(isCodeEditor ? [CodeNode, CodeHighlightNode] : []),
-      HorizontalRuleNode,
-      TableNode,
-      TableCellNode,
-      TableRowNode,
+      ...(isCodeEditor
+        ? [CodeNode, CodeHighlightNode]
+        : // We haven’t implemented buttons for horizontal rules and tables yet, but we still want
+          // to support them in Markdown, so always include them in the node list
+          [HorizontalRuleNode, TableNode, TableCellNode, TableRowNode]),
     ],
     theme: EDITOR_THEME,
   };
@@ -227,8 +228,10 @@ export const initEditor = ({
         .filter(([button]) => enabledButtons.includes(/** @type {TextEditorNodeType} */ (button)))
         .flatMap(([, transformers]) => transformers),
     ),
-    HR,
-    TABLE,
+    ...(isCodeEditor
+      ? [CODE]
+      : // See the comment above for why we always include horizontal rules and tables
+        [HR, TABLE]),
   ];
 
   const editor = createEditor(editorConfig);

package/dist/components/text-editor/text-editor.svelte

@@ -133,7 +133,12 @@
 
 <style>.text-editor {
   margin: var(--sui-focus-ring-width);
+  border-radius: var(--sui-textbox-border-radius);
   width: calc(100% - var(--sui-focus-ring-width) * 2);
+  transition: all 200ms;
+}
+.text-editor:focus-within {
+  outline: var(--sui-focus-ring-width) solid var(--sui-focus-ring-color);
 }
 .text-editor.flex:not([hidden]) {
   display: block;

package/dist/components/text-field/text-area.svelte

@@ -123,7 +123,6 @@
   transition-duration: 0ms;
 }
 :is(textarea, .clone):focus {
-  border-color: var(--sui-textbox-border-color-focus, var(--sui-primary-accent-color));
   color: var(--sui-textbox-foreground-color-focus, var(--sui-textbox-foreground-color));
   background-color: var(--sui-textbox-background-color-focus, var(--sui-textbox-background-color));
 }

package/dist/components/text-field/text-input.svelte

@@ -172,7 +172,6 @@ input {
   transition: all 200ms;
 }
 input:focus {
-  border-color: var(--sui-textbox-border-color-focus, var(--sui-primary-accent-color));
   color: var(--sui-textbox-foreground-color-focus, var(--sui-textbox-foreground-color));
   background-color: var(--sui-textbox-background-color-focus, var(--sui-textbox-background-color));
 }

package/dist/components/util/app-shell.svelte

@@ -6,7 +6,6 @@
 -->
 <script>
   import { onMount } from 'svelte';
-  import { initLocales } from '../../services/i18n';
 
   /**
    * @import { Snippet } from 'svelte';
@@ -39,10 +38,6 @@
 
   let fontLoaded = $state(false);
 
-  $effect.pre(() => {
-    initLocales();
-  });
-
   onMount(() => {
     const mediaQuery = globalThis.matchMedia('(prefers-color-scheme: dark)');
     const { dataset } = document.documentElement;
@@ -183,7 +178,8 @@
     var(--sui-success-color-hue) var(--sui-alert-background-color-saturation)
       var(--sui-alert-background-color-lightness)
   );
-  --sui-focus-ring-width: 4px;
+  --sui-focus-ring-width: 2px;
+  --sui-focus-ring-color: var(--sui-primary-accent-color-translucent);
   --sui-primary-border-color: hsl(var(--sui-border-color-2-hsl));
   --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));
   --sui-error-border-color: hsl(
@@ -329,7 +325,8 @@
   --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 40%);
   --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 35%);
   --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
-  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
+  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 60%);
+  --sui-primary-accent-color-translucent-light: hsl(var(--sui-base-hue) 80% 50% / 40%);
   --sui-error-color-hue: 0;
   --sui-warning-color-hue: 40;
   --sui-info-color-hue: 210;
@@ -363,7 +360,8 @@
   --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 40%);
   --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 100% 35%);
   --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
-  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
+  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 60%);
+  --sui-primary-accent-color-translucent-light: hsl(var(--sui-base-hue) 80% 50% / 40%);
   --sui-error-color-hue: 0;
   --sui-warning-color-hue: 40;
   --sui-info-color-hue: 210;
@@ -398,7 +396,8 @@
     --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 40%);
     --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 35%);
     --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
-    --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
+    --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 60%);
+    --sui-primary-accent-color-translucent-light: hsl(var(--sui-base-hue) 80% 50% / 40%);
     --sui-error-color-hue: 0;
     --sui-warning-color-hue: 40;
     --sui-info-color-hue: 210;
@@ -434,7 +433,8 @@
     --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 40%);
     --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 100% 35%);
     --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%);
-    --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
+    --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 60%);
+    --sui-primary-accent-color-translucent-light: hsl(var(--sui-base-hue) 80% 50% / 40%);
     --sui-error-color-hue: 0;
     --sui-warning-color-hue: 40;
     --sui-info-color-hue: 210;
@@ -474,7 +474,7 @@
   }
 }
 :global(::selection) {
-  background-color: var(--sui-primary-accent-color-translucent);
+  background-color: var(--sui-primary-accent-color-translucent-light);
 }
 :global(*) {
   -webkit-tap-highlight-color: transparent;
@@ -484,7 +484,7 @@
   outline-width: 0;
 }
 :global(:focus-visible) {
-  outline-color: var(--sui-primary-accent-color-translucent);
+  outline-color: var(--sui-focus-ring-color);
   z-index: 2;
 }
 :global(h1) {

package/dist/index.d.ts

@@ -78,4 +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";
+export { initLocales, strings } from "./services/i18n.js";

package/dist/index.js

@@ -77,7 +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';
+export { initLocales, strings } from './services/i18n.js';
 
 // eslint-disable-next-line import/export
 export * from './typedefs.js';

package/dist/services/i18n.d.ts

@@ -3,7 +3,7 @@
  * strings as values.
  * @type {Record<string, Record<string, string>>}
  */
-export const resources: Record<string, Record<string, string>>;
+export const strings: Record<string, Record<string, string>>;
 export function initLocales({ fallbackLocale, initialLocale }?: {
     fallbackLocale?: string | undefined;
     initialLocale?: string | undefined;

package/dist/services/i18n.js

@@ -1,22 +1,22 @@
 import { addMessages, init } from '@sveltia/i18n';
 
-const rawResources = import.meta.glob('../locales/*.yaml', { eager: true, import: 'default' });
+const resources = 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]) => [
+export const strings = Object.fromEntries(
+  Object.entries(resources).map(([path, resource]) => [
     /** @type {string} */ (path.match(/.+\/(?<locale>.+?)\.yaml$/)?.groups?.locale),
     /** @type {Record<string, string>} */ (resource),
   ]),
 );
 
 /**
- * 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.
+ * Load strings and initialize the locales. Consumers can use this function or {@link strings} to
+ * load the localized strings for their application.
  * @param {object} [init] Initialize options.
  * @param {string} [init.fallbackLocale] Fallback locale.
  * @param {string} [init.initialLocale] Initial locale.
@@ -24,7 +24,7 @@ export const resources = Object.fromEntries(
  * @see https://vitejs.dev/guide/features.html#glob-import
  */
 export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}) => {
-  Object.entries(resources).forEach(([locale, resource]) => {
+  Object.entries(strings).forEach(([locale, resource]) => {
     // Add `_sui` suffix to avoid collision with app localization
     addMessages(locale, { _sui: resource });
   });

package/dist/services/popup.svelte.js

@@ -29,8 +29,11 @@ class Popup {
     if (value) {
       this.checkPosition();
     } else if (this.anchorElement.getAttribute('aria-expanded') === 'true') {
-      this.anchorElement.focus();
-      this.anchorElement.removeAttribute('aria-controls');
+      // Wait for the popup to close before focusing the anchor, otherwise the focus will be lost
+      window.requestAnimationFrame(() => {
+        this.anchorElement.focus();
+        this.anchorElement.removeAttribute('aria-controls');
+      });
     }
 
     this.anchorElement.setAttribute('aria-expanded', String(value));

package/dist/styles/core.scss

@@ -31,7 +31,7 @@
   }
 
   ::selection {
-    background-color: var(--sui-primary-accent-color-translucent);
+    background-color: var(--sui-primary-accent-color-translucent-light);
   }
 
   * {
@@ -44,7 +44,7 @@
   }
 
   :focus-visible {
-    outline-color: var(--sui-primary-accent-color-translucent);
+    outline-color: var(--sui-focus-ring-color);
     z-index: 2;
   }
 

package/dist/styles/variables.scss

@@ -20,7 +20,8 @@
   --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 40%);
   --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 80% 35%);
   --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%); // white
-  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
+  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 60%);
+  --sui-primary-accent-color-translucent-light: hsl(var(--sui-base-hue) 80% 50% / 40%);
   // Alerts
   --sui-error-color-hue: 0;
   --sui-warning-color-hue: 40;
@@ -56,7 +57,8 @@
   --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 40%);
   --sui-primary-accent-color-dark: hsl(var(--sui-base-hue) 100% 35%);
   --sui-primary-accent-color-inverted: hsl(var(--sui-base-hue) 10% 100%); // white
-  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 40%);
+  --sui-primary-accent-color-translucent: hsl(var(--sui-base-hue) 80% 50% / 60%);
+  --sui-primary-accent-color-translucent-light: hsl(var(--sui-base-hue) 80% 50% / 40%);
   // Alerts
   --sui-error-color-hue: 0;
   --sui-warning-color-hue: 40;
@@ -127,7 +129,8 @@
         var(--sui-alert-background-color-lightness)
     );
     // Outline
-    --sui-focus-ring-width: 4px;
+    --sui-focus-ring-width: 2px;
+    --sui-focus-ring-color: var(--sui-primary-accent-color-translucent);
     // Borders
     --sui-primary-border-color: hsl(var(--sui-border-color-2-hsl));
     --sui-secondary-border-color: hsl(var(--sui-border-color-3-hsl));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.42.1",
+  "version": "0.44.0",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -45,7 +45,7 @@
     "@lexical/selection": "^0.47.0",
     "@lexical/table": "^0.47.0",
     "@lexical/utils": "^0.47.0",
-    "@sveltia/i18n": "^1.1.2",
+    "@sveltia/i18n": "^1.1.3",
     "@sveltia/utils": "^0.10.7",
     "lexical": "^0.47.0",
     "prismjs": "^1.30.0"
@@ -53,22 +53,22 @@
   "devDependencies": {
     "@rollup/plugin-yaml": "^5.0.0",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.69.2",
+    "@sveltejs/kit": "^2.69.3",
     "@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.5",
-    "eslint-config-airbnb-extended": "^3.1.0",
+    "eslint-config-airbnb-extended": "^3.1.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsdoc": "^63.0.13",
-    "eslint-plugin-package-json": "^1.5.0",
+    "eslint-plugin-package-json": "^1.6.0",
     "eslint-plugin-svelte": "^3.20.0",
     "globals": "^17.7.0",
     "happy-dom": "^20.10.6",
-    "oxlint": "^1.73.0",
-    "postcss": "^8.5.16",
+    "oxlint": "^1.74.0",
+    "postcss": "^8.5.19",
     "postcss-html": "^1.8.1",
     "prettier": "^3.9.5",
     "prettier-plugin-svelte": "^4.1.1",
@@ -76,7 +76,7 @@
     "stylelint": "^17.14.0",
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-scss": "^7.2.0",
-    "svelte": "^5.56.4",
+    "svelte": "^5.56.5",
     "svelte-check": "^4.7.2",
     "svelte-preprocess": "^6.0.5",
     "tslib": "^2.8.1",