@sveltia/ui 0.10.8 → 0.11.0

package/package/components/button/button.svelte

@@ -153,6 +153,7 @@
   on:change={(/** @type {CustomEvent} */ event) => {
     dispatch('change', event.detail);
   }}
+  on:toggle
 >
   <slot name="start-icon" />
   {#if variant === 'link'}

package/package/components/button/button.svelte.d.ts

@@ -41,6 +41,7 @@ export default class Button extends SvelteComponent<{
     keypress: KeyboardEvent;
     focus: FocusEvent;
     blur: FocusEvent;
+    toggle: Event;
     select: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
@@ -150,6 +151,7 @@ declare const __propDef: {
         keypress: KeyboardEvent;
         focus: FocusEvent;
         blur: FocusEvent;
+        toggle: Event;
         select: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {

package/package/components/drawer/drawer.svelte

@@ -150,7 +150,6 @@
   position: absolute;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
   max-width: 100dvw;
   max-height: 100dvh;
   background-color: var(--sui-secondary-background-color-translucent);

package/package/components/listbox/listbox.svelte

@@ -46,6 +46,16 @@
    * @type {boolean}
    */
   export let multiple = false;
+  /**
+   * Search terms to be used to filter the items.
+   * @type {string}
+   */
+  export let searchTerms = '';
+
+  /**
+   * @type {boolean}
+   */
+  let filtered = false;
 
   const dispatch = createEventDispatcher();
 </script>
@@ -53,6 +63,7 @@
 <div
   role="listbox"
   class="sui listbox {className}"
+  class:filtered
   tabindex={disabled ? -1 : 0}
   hidden={hidden || undefined}
   aria-hidden={hidden}
@@ -62,11 +73,15 @@
   aria-invalid={invalid}
   aria-multiselectable={multiple}
   {...$$restProps}
-  use:activateGroup
+  use:activateGroup={{ searchTerms }}
   on:click
   on:change={(/** @type {CustomEvent} */ event) => {
     dispatch('change', event.detail);
   }}
+  on:filter
+  on:filter={(/** @type {CustomEvent} */ { detail: { matched, total } }) => {
+    filtered = matched !== total;
+  }}
 >
   <div role="none" class="inner" inert={disabled}>
     <slot />
@@ -113,6 +128,12 @@
 [role=listbox]:global(.tabs) :global(.option button[aria-selected="true"]) {
   border-color: var(--sui-primary-accent-color-light);
 }
+[role=listbox].in-combobox:focus-visible {
+  outline-color: transparent;
+}
+[role=listbox].filtered :global([role="separator"]) {
+  display: none;
+}
 
 .inner {
   display: contents;

package/package/components/listbox/listbox.svelte.d.ts

@@ -16,8 +16,10 @@ export default class Listbox extends SvelteComponent<{
     required?: boolean | undefined;
     hidden?: boolean | undefined;
     readonly?: boolean | undefined;
+    searchTerms?: string | undefined;
 }, {
     click: MouseEvent;
+    filter: Event | KeyboardEvent | UIEvent | ErrorEvent | AnimationEvent | MouseEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | ProgressEvent<EventTarget> | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -39,9 +41,11 @@ declare const __propDef: {
         required?: boolean | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean | undefined;
+        searchTerms?: string | undefined;
     };
     events: {
         click: MouseEvent;
+        filter: Event | KeyboardEvent | UIEvent | ErrorEvent | AnimationEvent | MouseEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | ProgressEvent<EventTarget> | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/listbox/option.svelte

@@ -31,14 +31,19 @@
   export let disabled = false;
   /**
    * Text label displayed on the item.
-   * @type {string | undefined}
+   * @type {string}
    */
-  export let label = '';
+  export let label;
   /**
    * The `value` attribute on the `<button>` element.
-   * @type {string | undefined}
+   * @type {string}
+   */
+  export let value = label;
+  /**
+   * The value to be searched.
+   * @type {string}
    */
-  export let value = undefined;
+  export let searchValue = label;
 </script>
 
 <div role="none" class="sui option {className}" hidden={hidden || undefined}>
@@ -51,6 +56,8 @@
     {hidden}
     {disabled}
     data-type={typeof value}
+    data-label={label}
+    data-search-value={searchValue}
     {...$$restProps}
     on:click
     on:dblclick
@@ -65,6 +72,10 @@
     on:change={(event) => {
       selected = event.detail.selected;
     }}
+    on:toggle={(event) => {
+      hidden = /** @type {CustomEvent} */ (event).detail.hidden;
+      selected = false;
+    }}
   >
     {#if selected}
       <slot name="check-icon">

package/package/components/listbox/option.svelte.d.ts

@@ -8,12 +8,13 @@
  */
 export default class Option extends SvelteComponent<{
     [x: string]: any;
+    label: string;
     class?: string | undefined;
     disabled?: boolean | undefined;
-    label?: string | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
     selected?: boolean | undefined;
+    searchValue?: string | undefined;
 }, {
     click: MouseEvent;
     dblclick: MouseEvent;
@@ -45,12 +46,13 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        label: string;
         class?: string | undefined;
         disabled?: boolean | undefined;
-        label?: string | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
         selected?: boolean | undefined;
+        searchValue?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/package/components/select/combobox.svelte

@@ -13,6 +13,7 @@
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import Listbox from '../listbox/listbox.svelte';
+  import SearchBar from '../text-field/search-bar.svelte';
   import TextInput from '../text-field/text-input.svelte';
   import Popup from '../util/popup.svelte';
 
@@ -74,6 +75,12 @@
   let isPopupOpen = writable(false);
   /** @type {string} */
   let label = '';
+  /** @type {boolean} */
+  let showFilter = false;
+  /** @type {string} */
+  let searchTerms = '';
+  /** @type {boolean} */
+  let hasMatchingOptions = true;
 
   /**
    * Update the {@link label} and selected option when the {@link value} is changed.
@@ -86,7 +93,7 @@
     );
 
     if (target) {
-      label = target.querySelector('.label')?.textContent || target.textContent || target.value;
+      label = target.dataset.label || target.textContent || target.value;
 
       if (selected !== target) {
         selected?.setAttribute('aria-selected', 'false');
@@ -200,16 +207,49 @@
   touchOptimized={true}
   bind:open={isPopupOpen}
   bind:this={popupComponent}
+  on:open={() => {
+    showFilter = (popupComponent?.content?.querySelectorAll('[role="option"]')?.length ?? 0) > 5;
+    searchTerms = '';
+  }}
 >
-  <Listbox
-    on:click={(event) => {
-      if (/** @type {HTMLElement} */ (event.target).matches('[role="option"]')) {
-        onSelect(/** @type {HTMLButtonElement} */ (event.target));
-      }
-    }}
-  >
-    <slot />
-  </Listbox>
+  <div role="none" class="combobox-inner">
+    {#if showFilter}
+      <SearchBar
+        flex
+        aria-label={$_('_sui.combobox.filter_options')}
+        aria-controls="{id}-listbox"
+        bind:value={searchTerms}
+        on:keydown={(event) => {
+          if (['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {
+            event.preventDefault();
+            popupComponent?.content
+              ?.querySelector('.sui.listbox')
+              ?.dispatchEvent(new KeyboardEvent('keydown', event));
+          }
+        }}
+      />
+    {/if}
+    <Listbox
+      id="{id}-listbox"
+      class="in-combobox"
+      {searchTerms}
+      on:click={(event) => {
+        if (/** @type {HTMLElement} */ (event.target).matches('[role="option"]')) {
+          onSelect(/** @type {HTMLButtonElement} */ (event.target));
+        }
+      }}
+      on:filter={(event) => {
+        hasMatchingOptions = !!(/** @type {CustomEvent} */ (event).detail.matched);
+      }}
+    >
+      <slot />
+    </Listbox>
+    {#if !hasMatchingOptions}
+      <div role="alert" class="no-options">
+        {$_('_sui.combobox.no_matching_options')}
+      </div>
+    {/if}
+  </div>
 </Popup>
 
 <style>.combobox {
@@ -297,4 +337,25 @@
 .combobox + :global([role="listbox"]:not(.open)) {
   opacity: 0;
   pointer-events: none;
+}
+
+.combobox-inner {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.combobox-inner :global(.sui.search-bar) {
+  flex: none;
+}
+.combobox-inner :global(.sui.listbox) {
+  flex: auto;
+  overflow-y: auto;
+}
+.combobox-inner .no-options {
+  flex: none;
+  display: flex;
+  align-items: center;
+  padding: var(--sui-option-padding);
+  height: var(--sui-option-height);
+  color: var(--sui-tertiary-foreground-color);
 }</style>

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

@@ -268,10 +268,10 @@
   --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
   --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%;
   --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%;
-  --sui-background-color-5-hsl: var(--sui-base-hue) 5% 74%;
-  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 50%;
-  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 74%;
-  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 70%;
+  --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%;
+  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 84%;
+  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 88%;
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
   --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
   --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
@@ -303,7 +303,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%;
   --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%;
   --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%;
-  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 50%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 45%;
   --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%;
   --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%;
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
@@ -337,10 +337,10 @@
     --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
     --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%;
     --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%;
-    --sui-background-color-5-hsl: var(--sui-base-hue) 5% 74%;
-    --sui-border-color-1-hsl: var(--sui-base-hue) 5% 50%;
-    --sui-border-color-2-hsl: var(--sui-base-hue) 5% 74%;
-    --sui-border-color-3-hsl: var(--sui-base-hue) 5% 70%;
+    --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%;
+    --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%;
+    --sui-border-color-2-hsl: var(--sui-base-hue) 5% 84%;
+    --sui-border-color-3-hsl: var(--sui-base-hue) 5% 88%;
     --sui-shadow-color: var(--sui-base-hue) 10% 0%;
     --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
     --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
@@ -374,7 +374,7 @@
     --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%;
     --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%;
     --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%;
-    --sui-border-color-1-hsl: var(--sui-base-hue) 10% 50%;
+    --sui-border-color-1-hsl: var(--sui-base-hue) 10% 45%;
     --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%;
     --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%;
     --sui-shadow-color: var(--sui-base-hue) 10% 0%;

package/package/components/util/modal.svelte

@@ -221,7 +221,7 @@ dialog.backdrop {
   background-color: var(--sui-popup-backdrop-color);
 }
 dialog.open {
-  transition-duration: 200ms;
+  transition-duration: 50ms;
   opacity: 1;
 }
 dialog:not(.open) {

package/package/components/util/popup.svelte

@@ -203,7 +203,7 @@
   padding: 8px 4px !important;
 }
 :global(dialog.open) .content {
-  transition-duration: 150ms;
+  transition-duration: 50ms;
   opacity: 1;
   transform: translateY(2px);
 }

package/package/locales/en.d.ts

@@ -21,6 +21,8 @@ export namespace strings {
     }
     namespace combobox {
         const select_an_option: string;
+        const filter_options: string;
+        const no_matching_options: string;
     }
     namespace number_input {
         const decrease: string;

package/package/locales/en.js

@@ -21,6 +21,8 @@ export const strings = {
   },
   combobox: {
     select_an_option: 'Select an option…',
+    filter_options: 'Filter Options',
+    no_matching_options: 'No matching options found',
   },
   number_input: {
     decrease: 'Decrease',

package/package/locales/ja.d.ts

@@ -21,6 +21,8 @@ export namespace strings {
     }
     namespace combobox {
         const select_an_option: string;
+        const filter_options: string;
+        const no_matching_options: string;
     }
     namespace number_input {
         const decrease: string;

package/package/locales/ja.js

@@ -21,6 +21,8 @@ export const strings = {
   },
   combobox: {
     select_an_option: 'オプションを選択…',
+    filter_options: 'オプションを絞り込み',
+    no_matching_options: '一致するオプションは見つかりませんでした',
   },
   number_input: {
     decrease: '減らす',

package/package/services/group.d.ts

@@ -1 +1 @@
-export function activateGroup(parent: HTMLElement): void;
+export function activateGroup(parent: HTMLElement, _params?: object | undefined): import('svelte/action').ActionReturn;

package/package/services/group.js

@@ -75,7 +75,18 @@ class Group {
     this.childSelectedProp = childSelectedAttr.replace('aria-', '');
     this.focusChild = focusChild;
 
-    const { allMembers, selected: defaultSelected } = this;
+    // Wait a bit before the relevant components, including the `aria-controls` target are mounted
+    (async () => {
+      await sleep(100);
+      this.activate();
+    })();
+  }
+
+  /**
+   * Activate the members.
+   */
+  activate() {
+    const { parent, allMembers, selected: defaultSelected } = this;
 
     allMembers.forEach((element, index) => {
       // Select the first one if no member has the `selected` attribute
@@ -340,9 +351,10 @@ class Group {
     const target = /** @type {HTMLElement} */ (event.target);
     const { allMembers, activeMembers } = this;
 
+    /** @type {HTMLElement | undefined} */
     const currentTarget = (() => {
       if (!this.focusChild) {
-        return activeMembers.find((member) => member.matches('.focused')) ?? activeMembers[0];
+        return activeMembers.find((member) => member.matches('.focused'));
       }
 
       if (target.matches(this.selector)) {
@@ -352,22 +364,20 @@ class Group {
       return undefined;
     })();
 
-    if (!currentTarget) {
-      return;
-    }
-
     if (['Enter', ' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
       event.preventDefault();
     }
 
     if (key === 'Enter') {
-      currentTarget.click(); // Also close the popup if needed
+      currentTarget?.click(); // Also close the popup if needed
 
       return;
     }
 
     if (key === ' ') {
-      this.selectTarget(event, currentTarget);
+      if (currentTarget) {
+        this.selectTarget(event, currentTarget);
+      }
 
       return;
     }
@@ -376,9 +386,9 @@ class Group {
     let newTarget;
 
     if (this.grid) {
-      const colCount = Math.floor(this.parent.clientWidth / currentTarget.clientWidth);
+      const colCount = Math.floor(this.parent.clientWidth / activeMembers[0].clientWidth);
 
-      index = allMembers.indexOf(currentTarget);
+      index = currentTarget ? allMembers.indexOf(currentTarget) : -1;
 
       if (key === 'ArrowUp' && index > 0) {
         newTarget = allMembers[index - colCount];
@@ -400,7 +410,7 @@ class Group {
         newTarget = undefined;
       }
     } else {
-      index = activeMembers.indexOf(currentTarget);
+      index = currentTarget ? activeMembers.indexOf(currentTarget) : -1;
 
       if (key === (this.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp')) {
         if (index > 0) {
@@ -431,17 +441,56 @@ class Group {
       this.selectTarget(event, newTarget);
     }
   }
+
+  /**
+   * Called whenever the params are updated. Filter the items based on the search terms.
+   * @param {{ searchTerms: string }} params - Updated params.
+   */
+  onUpdate({ searchTerms }) {
+    const terms = searchTerms.trim().toLocaleLowerCase();
+    const _terms = terms ? terms.split(/\s+/) : [];
+
+    const matched = this.allMembers
+      .map((member) => {
+        const searchValue =
+          (
+            member.dataset.searchValue ??
+            member.dataset.label ??
+            member.querySelector('.label')?.textContent ??
+            member.textContent
+          )?.toLocaleLowerCase() ?? '';
+
+        const hidden = !_terms.every((term) => searchValue.includes(term));
+
+        member.dispatchEvent(new CustomEvent('toggle', { detail: { hidden } }));
+
+        return hidden;
+      })
+      .filter((hidden) => !hidden).length;
+
+    this.parent.dispatchEvent(
+      new CustomEvent('filter', { detail: { matched, total: this.allMembers.length } }),
+    );
+  }
 }
 
 /**
  * Activate a new group.
  * @param {HTMLElement} parent - Parent element.
+ * @param {object} [_params] - Action params.
+ * @returns {import('svelte/action').ActionReturn} Action.
  */
-export const activateGroup = (parent) => {
-  (async () => {
-    // Wait a bit before the relevant components, including the `aria-controls` target are mounted
-    await sleep(100);
-
-    return new Group(parent);
-  })();
+// eslint-disable-next-line no-unused-vars
+export const activateGroup = (parent, _params) => {
+  const group = new Group(parent);
+
+  return {
+    /**
+     * Called whenever the params are updated.
+     * @param {any} params - Updated params.
+     */
+    update(params) {
+      group.onUpdate(params);
+    },
+  };
 };

package/package/styles/variables.scss

@@ -9,10 +9,10 @@
   --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%; // primary
   --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%; // secondary
   --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%; // tertiary/disabled
-  --sui-background-color-5-hsl: var(--sui-base-hue) 5% 74%; // highlight
-  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 50%; // control
-  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 74%; // primary
-  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 70%; // secondary
+  --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%; // highlight
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%; // control
+  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 84%; // primary
+  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 88%; // secondary
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
   // Accents
   --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
@@ -46,7 +46,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%; // secondary
   --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%; // tertiary/disabled
   --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%; // highlight
-  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 50%; // control
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 45%; // control
   --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%; // primary
   --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%; // secondary
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.10.8",
+  "version": "0.11.0",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -26,32 +26,32 @@
     "svelte": "^4.2.12"
   },
   "devDependencies": {
-    "@playwright/test": "^1.42.1",
+    "@playwright/test": "^1.43.0",
     "@sveltejs/adapter-auto": "^3.2.0",
     "@sveltejs/kit": "^2.5.5",
-    "@sveltejs/package": "^2.3.0",
+    "@sveltejs/package": "^2.3.1",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "cspell": "^8.6.1",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsdoc": "^48.2.2",
+    "eslint-plugin-jsdoc": "^48.2.3",
     "eslint-plugin-svelte": "^2.35.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "postcss-html": "^1.6.0",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.2",
-    "sass": "^1.72.0",
+    "sass": "^1.74.1",
     "stylelint": "^16.3.1",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-scss": "^6.2.1",
-    "svelte-check": "^3.6.8",
+    "svelte-check": "^3.6.9",
     "svelte-i18n": "^4.0.0",
     "svelte-preprocess": "^5.1.3",
     "tslib": "^2.6.2",
-    "vite": "^5.2.7",
+    "vite": "^5.2.8",
     "vitest": "^1.4.0"
   },
   "exports": {