@sveltia/ui 0.2.1 → 0.2.3

package/package/components/composite/calendar.svelte

@@ -43,28 +43,28 @@
   <input type="hidden" bind:value />
   <div class="header">
     <Button
-      class="tertiary"
+      class="ghost"
       label={firstDay.toLocaleDateString('en', { year: 'numeric', month: 'short' })}
       aria-haspopup="dialog"
     >
       <Icon slot="end-icon" name="arrow_drop_down" />
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div slot="popup" class="popup-inner" on:click|stopPropagation>
-        <div role="group" aria-label={$_('sui.calendar.year')}>
+        <div role="group" aria-label={$_('_sui.calendar.year')}>
           <div class="header">
             <Button
               on:click={() => {
                 //
               }}
             >
-              <Icon name="chevron_left" label={$_('sui.calendar.previous_decade')} />
+              <Icon name="chevron_left" label={$_('_sui.calendar.previous_decade')} />
             </Button>
             <Button
               on:click={() => {
                 //
               }}
             >
-              <Icon name="chevron_right" label={$_('sui.calendar.next_decade')} />
+              <Icon name="chevron_right" label={$_('_sui.calendar.next_decade')} />
             </Button>
           </div>
           <div class="grid">
@@ -76,7 +76,7 @@
           </div>
         </div>
         <Separator orientation="vertical" />
-        <div role="group" aria-label={$_('sui.calendar.month')}>
+        <div role="group" aria-label={$_('_sui.calendar.month')}>
           <div class="grid">
             {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] as month}
               <div>
@@ -97,7 +97,7 @@
         firstDay = firstDay;
       }}
     >
-      <Icon name="chevron_left" label={$_('sui.calendar.previous_month')} />
+      <Icon name="chevron_left" label={$_('_sui.calendar.previous_month')} />
     </Button>
     <Button
       on:click={() => {
@@ -105,7 +105,7 @@
         firstDay = firstDay;
       }}
     >
-      <Icon name="chevron_right" label={$_('sui.calendar.next_month')} />
+      <Icon name="chevron_right" label={$_('_sui.calendar.next_month')} />
     </Button>
   </div>
   <div class="grid" role="listbox">
@@ -139,7 +139,7 @@
         value = '';
       }}
     >
-      {$_('sui._.clear')}
+      {$_('_sui._.clear')}
     </Button>
     <Spacer flex={true} />
     <Button
@@ -147,7 +147,7 @@
         [value] = now.toJSON().split('T');
       }}
     >
-      {$_('sui.calendar.today')}
+      {$_('_sui.calendar.today')}
     </Button>
   </div>
 </div>

package/package/components/composite/combobox.svelte

@@ -69,7 +69,7 @@
       bind:this={comboboxElement}
     >
       <div class="label">
-        {value !== undefined ? label || value : $_('sui.combobox.select_an_option')}
+        {value !== undefined ? label || value : $_('_sui.combobox.select_an_option')}
       </div>
     </div>
   {:else}
@@ -93,7 +93,7 @@
     aria-controls="{id}-popup"
     aria-expanded={$isPopupOpen}
     aria-disabled={disabled ? true : undefined}
-    class="tertiary iconic"
+    class="ghost iconic"
     on:click={(event) => {
       event.stopPropagation();
 
@@ -105,7 +105,7 @@
     <Icon
       slot="start-icon"
       name="expand_more"
-      label={$isPopupOpen ? $_('sui._.collapse') : $_('sui._.expand')}
+      label={$isPopupOpen ? $_('_sui._.collapse') : $_('_sui._.expand')}
     />
   </Button>
 </div>
@@ -151,8 +151,6 @@
   z-index: 1;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  border-width: 0;
-  background-color: transparent;
 }
 .combobox > :global(button[tabindex="-1"]) {
   pointer-events: none;

package/package/components/core/button.svelte

@@ -141,14 +141,14 @@ button[disabled] {
   cursor: default;
   pointer-events: none;
 }
-button:global(.primary), button:global(.secondary), button:global(.tertiary) {
+button:global(.primary), button:global(.secondary), button:global(.tertiary), button:global(.ghost) {
   justify-content: center;
   border-width: 1px;
   border-radius: var(--button--medium--border-radius);
   padding: var(--button--medium--padding, 0 8px);
   height: var(--button--medium--height);
 }
-button:global(.primary) :global(.label:only-child), button:global(.secondary) :global(.label:only-child), button:global(.tertiary) :global(.label:only-child) {
+button:global(.primary) :global(.label:only-child), button:global(.secondary) :global(.label:only-child), button:global(.tertiary) :global(.label:only-child), button:global(.ghost) :global(.label:only-child) {
   padding: 0 4px;
 }
 button:global(.primary) {
@@ -156,7 +156,7 @@ button:global(.primary) {
   color: var(--primary-accent-color-foreground);
   background-color: var(--primary-accent-color);
 }
-button:global(.primary):hover, button:global(.primary):focus {
+button:global(.primary):hover, button:global(.primary):focus-visible {
   background-color: var(--primary-accent-color-lighter);
 }
 button:global(.primary):active {
@@ -167,7 +167,7 @@ button:global(.secondary) {
   color: var(--primary-accent-color-lighter);
   background-color: var(--tertiary-background-color);
 }
-button:global(.secondary):hover, button:global(.secondary):focus {
+button:global(.secondary):hover, button:global(.secondary):focus-visible {
   background-color: var(--highlight-background-color);
 }
 button:global(.secondary)[aria-pressed=true] {
@@ -178,12 +178,18 @@ button:global(.tertiary) {
   color: var(--highlight-foreground-color);
   background-color: var(--tertiary-background-color);
 }
-button:global(.tertiary):hover, button:global(.tertiary):focus {
+button:global(.tertiary):hover, button:global(.tertiary):focus-visible {
   background-color: var(--highlight-background-color);
 }
 button:global(.tertiary)[aria-pressed=true] {
   background-color: var(--highlight-background-color);
 }
+button:global(.ghost):hover, button:global(.ghost):focus-visible {
+  background-color: var(--highlight-background-color);
+}
+button:global(.ghost)[aria-pressed=true] {
+  background-color: var(--highlight-background-color);
+}
 button:global(.danger) {
   background-color: var(--danger-background-color);
 }

package/package/components/core/dialog.svelte

@@ -147,13 +147,13 @@
             {/if}
             {#if showClose}
               <Button
-                class="tertiary iconic"
+                class="ghost iconic"
                 on:click={() => {
                   dialog.returnValue = 'close';
                   open = false;
                 }}
               >
-                <Icon slot="start-icon" name="close" label={$_('sui._.close')} />
+                <Icon slot="start-icon" name="close" label={$_('_sui._.close')} />
               </Button>
             {/if}
           {/if}
@@ -174,7 +174,7 @@
             {#if showOk}
               <Button
                 class="primary"
-                label={okLabel || $_('sui._.ok')}
+                label={okLabel || $_('_sui._.ok')}
                 disabled={okDisabled}
                 on:click={() => {
                   dialog.returnValue = 'ok';
@@ -185,7 +185,7 @@
             {#if showCancel}
               <Button
                 class="secondary"
-                label={cancelLabel || $_('sui._.cancel')}
+                label={cancelLabel || $_('_sui._.cancel')}
                 disabled={cancelDisabled}
                 on:click={() => {
                   dialog.returnValue = 'cancel';

package/package/components/core/drawer.svelte

@@ -137,13 +137,13 @@
     <div class="extra-control">
       {#if showClose === 'outside'}
         <Button
-          class="iconic close"
+          class="ghost iconic close"
           on:click={() => {
             dialog.returnValue = 'close';
             open = false;
           }}
         >
-          <Icon slot="start-icon" name="close" label={$_('sui._.close')} />
+          <Icon slot="start-icon" name="close" label={$_('_sui._.close')} />
         </Button>
       {/if}
     </div>
@@ -162,13 +162,13 @@
             {/if}
             {#if showClose === 'inside'}
               <Button
-                class="tertiary iconic close"
+                class="ghost iconic close"
                 on:click={() => {
                   dialog.returnValue = 'close';
                   open = false;
                 }}
               >
-                <Icon slot="start-icon" name="close" label={$_('sui._.close')} />
+                <Icon slot="start-icon" name="close" label={$_('_sui._.close')} />
               </Button>
             {/if}
           {/if}

package/package/components/core/number-input.svelte

@@ -50,7 +50,7 @@
     {disabled}
     role="spinbutton"
     aria-valuenow={Number(value || 0)}
-    aria-invalid={Number.isNaN(Number(value))}
+    aria-invalid={value !== undefined && Number.isNaN(Number(value))}
     {...$$restProps}
     on:keydown={(event) => {
       const { key, ctrlKey, metaKey, altKey, shiftKey } = event;
@@ -75,7 +75,7 @@
       decrease();
     }}
   >
-    <Icon slot="start-icon" name="arrow_downward" label={$_('sui.number_input.decrease')} />
+    <Icon slot="start-icon" name="arrow_downward" label={$_('_sui.number_input.decrease')} />
   </Button>
   <Button
     class="iconic"
@@ -84,7 +84,7 @@
       increase();
     }}
   >
-    <Icon slot="start-icon" name={'arrow_upward'} label={$_('sui.number_input.increase')} />
+    <Icon slot="start-icon" name={'arrow_upward'} label={$_('_sui.number_input.increase')} />
   </Button>
 </div>
 

package/package/components/core/password-input.svelte

@@ -52,7 +52,7 @@
     <Icon
       slot="start-icon"
       name={passwordVisible ? 'visibility_off' : 'visibility'}
-      label={$_('sui.password_input.show_password')}
+      label={$_('_sui.password_input.show_password')}
     />
   </Button>
 </div>

package/package/components/core/search-bar.svelte

@@ -57,7 +57,7 @@
         });
       }}
     >
-      <Icon slot="start-icon" name="close" label={$_('sui._.clear')} />
+      <Icon slot="start-icon" name="close" label={$_('_sui._.clear')} />
     </Button>
   {/if}
 </div>

package/package/components/core/text-area.svelte

@@ -5,6 +5,8 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { onMount, tick } from 'svelte';
+
   /**
    * CSS class name on the button.
    * @type {String}
@@ -26,35 +28,67 @@
 
   /** @type {(String|undefined)} */
   let height;
+  /** @type {(HTMLTextAreaElement|undefined)} */
+  let outer = undefined;
+  let resizing = false;
+  let lastWidth = 0;
 
-  const resizeTextarea = () => {
+  /**
+   * Resize the `<textarea>` based on the filled text content.
+   */
+  const resizeTextarea = async () => {
+    resizing = true;
     height = 'auto';
 
-    window.requestAnimationFrame(() => {
-      height = value && element?.scrollHeight ? `${element.scrollHeight + 4}px` : undefined;
-    });
+    await tick();
+
+    height = value && element?.scrollHeight ? `${element.scrollHeight + 4}px` : undefined;
+    resizing = false;
   };
 
+  /**
+   * Call {@link resizeTextarea} whenever the text content is updated.
+   */
   $: {
-    if (value && autoResize) {
-      resizeTextarea();
+    if (autoResize) {
+      resizeTextarea(value);
     }
   }
+
+  /**
+   * Call {@link resizeTextarea} whenever it’s horizontally resized.
+   */
+  onMount(() => {
+    const observer = new ResizeObserver(([{ contentRect }]) => {
+      const { width } = contentRect;
+
+      if (autoResize && lastWidth !== width) {
+        lastWidth = width;
+        resizeTextarea();
+      }
+    });
+
+    observer.observe(outer);
+
+    // onUnmount
+    return () => {
+      observer.disconnect();
+    };
+  });
 </script>
 
-<div class="sui text-area {className}">
+<div class="sui text-area {className}" bind:this={outer}>
   <textarea
     name={name || undefined}
     {...$$restProps}
     style:height
+    class:resizing
     bind:this={element}
+    bind:value
     on:click
     on:input
     on:keypress
-    on:input={() => {
-      value = element.value;
-    }}>{value}</textarea
-  >
+  />
 </div>
 
 <style>.text-area {
@@ -80,6 +114,9 @@ textarea {
   resize: vertical;
   transition: all 200ms;
 }
+textarea.resizing {
+  transition-duration: 0ms;
+}
 textarea:focus {
   border-color: var(--primary-accent-color);
 }

package/package/components/editor/markdown.svelte

@@ -12,38 +12,38 @@
   export let disabled = false;
 
   const defaultButtons = [
-    { name: 'bold', label: $_('sui.markdown_editor.bold'), icon: 'format_bold' },
-    { name: 'italic', label: $_('sui.markdown_editor.italic'), icon: 'format_italic' },
-    { name: 'code', label: $_('sui.markdown_editor.code'), icon: 'code' },
-    { name: 'link', label: $_('sui.markdown_editor.link'), icon: 'link' },
+    { name: 'bold', label: $_('_sui.markdown_editor.bold'), icon: 'format_bold' },
+    { name: 'italic', label: $_('_sui.markdown_editor.italic'), icon: 'format_italic' },
+    { name: 'code', label: $_('_sui.markdown_editor.code'), icon: 'code' },
+    { name: 'link', label: $_('_sui.markdown_editor.link'), icon: 'link' },
     { separator: true },
     {
       name: 'heading-one',
-      label: $_('sui.markdown_editor.heading_x', { values: { level: 1 } }),
+      label: $_('_sui.markdown_editor.heading_x', { values: { level: 1 } }),
       icon: 'format_h1',
     },
     {
       name: 'heading-two',
-      label: $_('sui.markdown_editor.heading_x', { values: { level: 2 } }),
+      label: $_('_sui.markdown_editor.heading_x', { values: { level: 2 } }),
       icon: 'format_h2',
     },
-    { name: 'quote', label: $_('sui.markdown_editor.quote'), icon: 'format_quote' },
+    { name: 'quote', label: $_('_sui.markdown_editor.quote'), icon: 'format_quote' },
     { separator: true },
     {
       name: 'bulleted-list',
-      label: $_('sui.markdown_editor.bulleted_list'),
+      label: $_('_sui.markdown_editor.bulleted_list'),
       icon: 'format_list_bulleted',
     },
     {
       name: 'numbered-list',
-      label: $_('sui.markdown_editor.numbered_list'),
+      label: $_('_sui.markdown_editor.numbered_list'),
       icon: 'format_list_numbered',
     },
   ];
 </script>
 
 <div>
-  <Toolbar aria-label={$_('sui.markdown_editor.markdown_editor')}>
+  <Toolbar aria-label={$_('_sui.markdown_editor.markdown_editor')}>
     {#each defaultButtons as { label, icon, separator }}
       {#if separator}
         <Separator />

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

@@ -75,8 +75,8 @@
   --foreground-color-2-hsl: var(--base-hue) 10% 80%;
   --foreground-color-3-hsl: var(--base-hue) 10% 60%;
   --foreground-color-4-hsl: var(--base-hue) 10% 40%;
-  --border-color-1-hsl: var(--base-hue) 10% 25%;
-  --border-color-2-hsl: var(--base-hue) 10% 20%;
+  --border-color-1-hsl: var(--base-hue) 10% 28%;
+  --border-color-2-hsl: var(--base-hue) 10% 24%;
   --background-color-1-hsl: var(--base-hue) 10% 10%;
   --background-color-2-hsl: var(--base-hue) 10% 12%;
   --background-color-3-hsl: var(--base-hue) 10% 16%;

package/package/index.js

@@ -12,8 +12,8 @@ export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}
   Object.entries(modules).forEach(([path, { strings }]) => {
     const [, locale] = path.match(/([a-zA-Z-]+)\.js/);
 
-    // Add `sui` suffix to avoid collision with app localization
-    addMessages(locale, { sui: strings });
+    // Add `_sui` suffix to avoid collision with app localization
+    addMessages(locale, { _sui: strings });
   });
 
   init({
@@ -22,6 +22,8 @@ export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}
   });
 };
 
+initLocales();
+
 export { default as Calendar } from './components/composite/calendar.svelte';
 export { default as CheckboxGroup } from './components/composite/checkbox-group.svelte';
 export { default as Combobox } from './components/composite/combobox.svelte';

package/package/styles/variables.scss

@@ -34,8 +34,8 @@
   --foreground-color-2-hsl: var(--base-hue) 10% 80%; // primary
   --foreground-color-3-hsl: var(--base-hue) 10% 60%; // secondary
   --foreground-color-4-hsl: var(--base-hue) 10% 40%; // tertiary
-  --border-color-1-hsl: var(--base-hue) 10% 25%; // primary
-  --border-color-2-hsl: var(--base-hue) 10% 20%; // secondary/input
+  --border-color-1-hsl: var(--base-hue) 10% 28%; // primary
+  --border-color-2-hsl: var(--base-hue) 10% 24%; // secondary/input
   --background-color-1-hsl: var(--base-hue) 10% 10%; // content/input
   --background-color-2-hsl: var(--base-hue) 10% 12%; // primary
   --background-color-3-hsl: var(--base-hue) 10% 16%; // secondary

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -27,11 +27,11 @@
     "svelte": "^3.55.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.4",
+    "@babel/core": "^7.21.5",
     "@babel/eslint-parser": "^7.21.3",
-    "@playwright/test": "^1.32.3",
-    "@sveltejs/adapter-auto": "2.0.0",
-    "@sveltejs/kit": "1.15.7",
+    "@playwright/test": "^1.33.0",
+    "@sveltejs/adapter-auto": "2.0.1",
+    "@sveltejs/kit": "1.15.9",
     "@sveltejs/package": "^2.0.2",
     "cspell": "^6.31.1",
     "eslint": "^8.39.0",
@@ -44,16 +44,16 @@
     "postcss-html": "^1.5.0",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.0",
-    "sass": "^1.62.0",
+    "sass": "^1.62.1",
     "stylelint": "^15.6.0",
-    "stylelint-config-recommended-scss": "^10.0.0",
-    "stylelint-scss": "^4.6.0",
+    "stylelint-config-recommended-scss": "^11.0.0",
+    "stylelint-scss": "^5.0.0",
     "svelte-check": "^3.2.0",
     "svelte-i18n": "^3.6.0",
     "svelte-migrate": "^1.1.3",
     "svelte-preprocess": "^5.0.3",
     "tslib": "^2.5.0",
-    "vite": "^4.3.1",
+    "vite": "^4.3.3",
     "vitest": "^0.30.1"
   },
   "exports": {