@sveltia/ui 0.6.4 → 0.6.6

package/package/components/button/button.svelte

@@ -135,6 +135,7 @@
   line-height: var(--sui-control-line-height);
   font-weight: normal;
   text-align: left;
+  white-space: nowrap;
   cursor: pointer;
   transition: all 200ms;
 }
@@ -167,7 +168,7 @@ button:global(.primary) {
   color: var(--sui-primary-accent-color-foreground);
   background-color: var(--sui-primary-accent-color);
 }
-button:global(.primary):hover, button:global(.primary):focus-visible {
+button:global(.primary):hover, button:global(.primary):focus-visible, button:global(.primary)[aria-expanded=true] {
   background-color: var(--sui-primary-accent-color-lighter);
 }
 button:global(.primary):active {
@@ -178,7 +179,7 @@ button:global(.secondary) {
   color: var(--sui-primary-accent-color-lighter);
   background-color: var(--sui-tertiary-background-color);
 }
-button:global(.secondary):hover, button:global(.secondary):focus-visible {
+button:global(.secondary):hover, button:global(.secondary):focus-visible, button:global(.secondary)[aria-expanded=true] {
   background-color: var(--sui-highlight-background-color);
 }
 button:global(.secondary)[aria-pressed=true] {
@@ -189,13 +190,13 @@ button:global(.tertiary) {
   color: var(--sui-highlight-foreground-color);
   background-color: var(--sui-tertiary-background-color);
 }
-button:global(.tertiary):hover, button:global(.tertiary):focus-visible {
+button:global(.tertiary):hover, button:global(.tertiary):focus-visible, button:global(.tertiary)[aria-expanded=true] {
   background-color: var(--sui-highlight-background-color);
 }
 button:global(.tertiary)[aria-pressed=true] {
   background-color: var(--sui-highlight-background-color);
 }
-button:global(.ghost):hover, button:global(.ghost):focus-visible {
+button:global(.ghost):hover, button:global(.ghost):focus-visible, button:global(.ghost)[aria-expanded=true] {
   background-color: var(--sui-highlight-background-color);
 }
 button:global(.ghost)[aria-pressed=true] {

package/package/components/calendar/calendar.svelte

@@ -145,7 +145,7 @@
         value = '';
       }}
     >
-      {$_('_sui._.clear')}
+      {$_('_sui.clear')}
     </Button>
     <Spacer flex={true} />
     <Button

package/package/components/checkbox/checkbox.svelte

@@ -118,6 +118,7 @@
   width: 20px;
   height: 20px;
   color: var(--sui-primary-accent-color-lighter);
+  background-color: var(--sui-checkbox-background-color);
   transition: all 200ms;
 }
 .checkbox :global(button) :global(.icon) {
@@ -125,7 +126,7 @@
 }
 .checkbox :global(button[aria-checked="true"]) {
   border-color: var(--sui-primary-accent-color-lighter);
-  color: var(--sui-control-background-color);
+  color: var(--sui-primary-accent-color-foreground);
   background-color: var(--sui-primary-accent-color-lighter);
 }
 .checkbox :global(button[aria-checked="mixed"]) {

package/package/components/dialog/dialog.svelte

@@ -165,7 +165,7 @@
                   open = false;
                 }}
               >
-                <Icon slot="start-icon" name="close" label={$_('_sui._.close')} />
+                <Icon slot="start-icon" name="close" label={$_('_sui.close')} />
               </Button>
             {/if}
           {/if}
@@ -186,7 +186,7 @@
             {#if showOk}
               <Button
                 class="primary"
-                label={okLabel || $_('_sui._.ok')}
+                label={okLabel || $_('_sui.ok')}
                 disabled={okDisabled}
                 on:click={() => {
                   dialog.returnValue = 'ok';
@@ -197,7 +197,7 @@
             {#if showCancel}
               <Button
                 class="secondary"
-                label={cancelLabel || $_('_sui._.cancel')}
+                label={cancelLabel || $_('_sui.cancel')}
                 disabled={cancelDisabled}
                 on:click={() => {
                   dialog.returnValue = 'cancel';
@@ -248,6 +248,7 @@ dialog form {
   flex-direction: column;
   border-radius: 4px;
   background-color: var(--sui-secondary-background-color-translucent);
+  -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);
   box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   will-change: opacity, transform;

package/package/components/drawer/drawer.svelte

@@ -155,7 +155,7 @@
             open = false;
           }}
         >
-          <Icon slot="start-icon" name="close" label={$_('_sui._.close')} />
+          <Icon slot="start-icon" name="close" label={$_('_sui.close')} />
         </Button>
       {/if}
     </div>
@@ -180,7 +180,7 @@
                   open = false;
                 }}
               >
-                <Icon slot="start-icon" name="close" label={$_('_sui._.close')} />
+                <Icon slot="start-icon" name="close" label={$_('_sui.close')} />
               </Button>
             {/if}
           {/if}
@@ -233,6 +233,7 @@ dialog form {
   flex-direction: column;
   border-radius: 4px;
   background-color: var(--sui-secondary-background-color-translucent);
+  -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);
   box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   will-change: opacity, transform;

package/package/components/drawer/drawer.svelte.d.ts

@@ -10,8 +10,8 @@ export default class Drawer extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     title?: string;
-    position?: "top" | "right" | "bottom" | "left";
     size?: "small" | "medium" | "large" | "x-large";
+    position?: "top" | "right" | "bottom" | "left";
     open?: boolean;
     showClose?: false | "inside" | "outside";
     closeOnBackdropClick?: boolean;
@@ -38,8 +38,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         title?: string;
-        position?: ('top' | 'right' | 'bottom' | 'left');
         size?: ('small' | 'medium' | 'large' | 'x-large');
+        position?: ('top' | 'right' | 'bottom' | 'left');
         open?: boolean;
         showClose?: ('inside' | 'outside' | false);
         closeOnBackdropClick?: boolean;

package/package/components/select/combobox.svelte

@@ -106,7 +106,7 @@
     <Icon
       slot="start-icon"
       name="expand_more"
-      label={$isPopupOpen ? $_('_sui._.collapse') : $_('_sui._.expand')}
+      label={$isPopupOpen ? $_('_sui.collapse') : $_('_sui.expand')}
     />
   </Button>
 </div>
@@ -207,6 +207,7 @@
   box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   overflow: auto;
   background-color: var(--sui-secondary-background-color);
+  -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);
   /* Add .1s delay before the position can be determined */
   transition: opacity 100ms 100ms;

package/package/components/select/combobox.svelte.d.ts

@@ -10,10 +10,10 @@ export default class Combobox extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     label?: string;
-    position?: PopupPosition;
     disabled?: boolean;
     readOnly?: boolean;
     value?: string | number;
+    position?: PopupPosition;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -27,17 +27,14 @@ export type ComboboxEvents = typeof __propDef.events;
 export type ComboboxSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    /**
-       * Where to show the dropdown menu.
-       * @type {PopupPosition}
-       */ props: {
+    props: {
         [x: string]: any;
         class?: string;
         label?: string;
-        position?: PopupPosition;
         disabled?: boolean;
         readOnly?: boolean;
         value?: (string | number | undefined);
+        position?: PopupPosition;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/text-field/search-bar.svelte

@@ -60,7 +60,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/util/app-shell.svelte

@@ -58,8 +58,8 @@
 </svelte:head>
 
 <!-- Preload fonts, including the icons -->
-<div class="font-loader" aria-hidden="true" bind:this={fontLoader}>
-  Sveltia UI <span class="material-symbols-outlined">favorite</span>
+<div class="font-loader" aria-hidden="true" bind:this={fontLoader} style:opacity="0">
+  <strong>Sveltia</strong> <em>UI</em> <span class="material-symbols-outlined">favorite</span>
 </div>
 
 <div
@@ -195,6 +195,7 @@
   --sui-primary-border-color: hsl(var(--sui-border-color-1-hsl));
   --sui-secondary-border-color: hsl(var(--sui-border-color-2-hsl));
   --sui-checkbox-border-color: hsl(var(--sui-foreground-color-4-hsl));
+  --sui-checkbox-background-color: hsl(var(--sui-background-color-5-hsl));
   --sui-error-border-color: hsl(
     var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
       var(--sui-alert-border-color-lightness)
@@ -358,6 +359,7 @@
 :global(.font-loader) {
   position: absolute;
   left: -99999px;
+  font-family: var(--sui-font-family-default);
 }
 
 :global(.app-shell) {

package/package/components/util/popup.js

@@ -17,7 +17,9 @@ class Popup {
         return;
       }
 
-      const contentHeight = this.popupElement.querySelector('.content').scrollHeight;
+      const { scrollHeight: contentHeight, scrollWidth: contentWidth } =
+        this.popupElement.querySelector('.content');
+
       const topMargin = intersectionRect.top - 8;
       const bottomMargin = rootBounds.height - intersectionRect.bottom - 8;
       let { position } = this;
@@ -36,6 +38,13 @@ class Popup {
         }
       }
 
+      // If the popup overflows the viewport, change the position
+      if (position.endsWith('-left')) {
+        if (intersectionRect.left + contentWidth > rootBounds.width - 8) {
+          position = /** @type {PopupPosition} */ (position.replace('-left', '-right'));
+        }
+      }
+
       const top = position.startsWith('bottom-')
         ? `${Math.round(intersectionRect.bottom)}px`
         : position.endsWith('-top')

package/package/components/util/popup.svelte

@@ -156,6 +156,7 @@
   outline-width: 0 !important;
   color: var(--sui-primary-foreground-color);
   background-color: var(--sui-secondary-background-color-translucent);
+  -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);
   box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   will-change: opacity, transform;

package/package/locales/en.d.ts

@@ -1,13 +1,11 @@
 export namespace strings {
-    namespace _ {
-        const ok: string;
-        const cancel: string;
-        const close: string;
-        const clear: string;
-        const remove: string;
-        const collapse: string;
-        const expand: string;
-    }
+    const ok: string;
+    const cancel: string;
+    const close: string;
+    const clear: string;
+    const remove: string;
+    const collapse: string;
+    const expand: string;
     namespace calendar {
         const year: string;
         const previous_decade: string;

package/package/locales/en.js

@@ -1,13 +1,11 @@
 export const strings = {
-  _: {
-    ok: 'OK',
-    cancel: 'Cancel',
-    close: 'Close',
-    clear: 'Clear',
-    remove: 'Remove',
-    collapse: 'Collapse',
-    expand: 'Expand',
-  },
+  ok: 'OK',
+  cancel: 'Cancel',
+  close: 'Close',
+  clear: 'Clear',
+  remove: 'Remove',
+  collapse: 'Collapse',
+  expand: 'Expand',
   calendar: {
     year: 'Year',
     previous_decade: 'Previous Decade',

package/package/locales/ja.d.ts

@@ -1,13 +1,11 @@
 export namespace strings {
-    namespace _ {
-        const ok: string;
-        const cancel: string;
-        const close: string;
-        const clear: string;
-        const remove: string;
-        const collapse: string;
-        const expand: string;
-    }
+    const ok: string;
+    const cancel: string;
+    const close: string;
+    const clear: string;
+    const remove: string;
+    const collapse: string;
+    const expand: string;
     namespace calendar {
         const year: string;
         const previous_decade: string;

package/package/locales/ja.js

@@ -1,13 +1,11 @@
 export const strings = {
-  _: {
-    ok: 'OK',
-    cancel: 'キャンセル',
-    close: '閉じる',
-    clear: 'クリア',
-    remove: '削除',
-    collapse: '折り畳む',
-    expand: '広げる',
-  },
+  ok: 'OK',
+  cancel: 'キャンセル',
+  close: '閉じる',
+  clear: 'クリア',
+  remove: '削除',
+  collapse: '折り畳む',
+  expand: '広げる',
   calendar: {
     year: '年',
     previous_decade: '前の 10 年',

package/package/styles/variables.scss

@@ -118,6 +118,7 @@
   --sui-primary-border-color: hsl(var(--sui-border-color-1-hsl));
   --sui-secondary-border-color: hsl(var(--sui-border-color-2-hsl));
   --sui-checkbox-border-color: hsl(var(--sui-foreground-color-4-hsl));
+  --sui-checkbox-background-color: hsl(var(--sui-background-color-5-hsl));
   --sui-error-border-color: hsl(
     var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
       var(--sui-alert-border-color-lightness)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -23,36 +23,36 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "svelte": "^4.2.0"
+    "svelte": "^4.2.2"
   },
   "devDependencies": {
-    "@playwright/test": "^1.38.0",
+    "@playwright/test": "^1.39.0",
     "@sveltejs/adapter-auto": "2.1.0",
-    "@sveltejs/kit": "^1.25.0",
+    "@sveltejs/kit": "^1.27.2",
     "@sveltejs/package": "^2.2.2",
-    "cspell": "^7.3.6",
-    "eslint": "^8.49.0",
+    "cspell": "^7.3.8",
+    "eslint": "^8.52.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsdoc": "^46.8.1",
-    "eslint-plugin-svelte": "^2.33.1",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsdoc": "^46.8.2",
+    "eslint-plugin-svelte": "^2.34.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.29",
+    "postcss": "^8.4.31",
     "postcss-html": "^1.5.0",
     "prettier": "^3.0.3",
     "prettier-plugin-svelte": "^3.0.3",
-    "sass": "^1.67.0",
-    "stylelint": "^15.10.3",
+    "sass": "^1.69.5",
+    "stylelint": "^15.11.0",
     "stylelint-config-recommended-scss": "^13.0.0",
-    "stylelint-scss": "^5.2.1",
-    "svelte-check": "^3.5.1",
-    "svelte-i18n": "^3.7.4",
-    "svelte-migrate": "^1.2.6",
+    "stylelint-scss": "^5.3.0",
+    "svelte-check": "^3.5.2",
+    "svelte-i18n": "^4.0.0",
+    "svelte-migrate": "^1.2.7",
     "svelte-preprocess": "^5.0.4",
     "tslib": "^2.6.2",
-    "vite": "^4.4.9",
-    "vitest": "^0.34.4"
+    "vite": "^4.5.0",
+    "vitest": "^0.34.6"
   },
   "exports": {
     "./package.json": "./package.json",