@sveltia/ui 0.10.7 → 0.11.0

package/package/components/button/button-group.svelte

@@ -0,0 +1,17 @@
+<script>
+  /**
+   * The `class` attribute on the wrapper element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+</script>
+
+<div role="group" class="sui button-group {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style>.button-group {
+  display: inline-flex;
+  align-items: center;
+}</style>

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

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  ButtonGroupProps */
+/** @typedef {typeof __propDef.events}  ButtonGroupEvents */
+/** @typedef {typeof __propDef.slots}  ButtonGroupSlots */
+export default class ButtonGroup extends SvelteComponent<{
+    [x: string]: any;
+    class?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ButtonGroupProps = typeof __propDef.props;
+export type ButtonGroupEvents = typeof __propDef.events;
+export type ButtonGroupSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -10,8 +10,8 @@ export default class Button extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
-    label?: string | undefined;
     disabled?: boolean | undefined;
+    label?: string | undefined;
     size?: "small" | "medium" | "large" | undefined;
     type?: "reset" | "submit" | "button" | undefined;
     value?: string | undefined;
@@ -41,6 +41,7 @@ export default class Button extends SvelteComponent<{
     keypress: KeyboardEvent;
     focus: FocusEvent;
     blur: FocusEvent;
+    toggle: Event;
     select: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
@@ -118,8 +119,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
-        label?: string | undefined;
         disabled?: boolean | undefined;
+        label?: string | undefined;
         size?: 'small' | 'medium' | 'large' | undefined;
         type?: "reset" | "submit" | "button" | undefined;
         value?: string | undefined;
@@ -150,6 +151,7 @@ declare const __propDef: {
         keypress: KeyboardEvent;
         focus: FocusEvent;
         blur: FocusEvent;
+        toggle: Event;
         select: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {

package/package/components/button/select-button-group.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class SelectButtonGroup extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     required?: boolean | undefined;
     hidden?: boolean | undefined;
     readonly?: boolean | undefined;
@@ -30,8 +30,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         required?: boolean | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean | undefined;

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

@@ -9,8 +9,8 @@
 export default class SelectButton extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    label?: string | undefined;
     disabled?: boolean | undefined;
+    label?: string | undefined;
     size?: "small" | "medium" | "large" | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
@@ -42,8 +42,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        label?: string | undefined;
         disabled?: boolean | undefined;
+        label?: string | undefined;
         size?: "small" | "medium" | "large" | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;

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

@@ -10,8 +10,8 @@
 export default class SplitButton extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    label?: string | undefined;
     disabled?: boolean | undefined;
+    label?: string | undefined;
     size?: "small" | "medium" | "large" | undefined;
     hidden?: boolean | undefined;
     variant?: "primary" | "secondary" | "tertiary" | "ghost" | undefined;
@@ -41,8 +41,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        label?: string | undefined;
         disabled?: boolean | undefined;
+        label?: string | undefined;
         size?: 'small' | 'medium' | 'large' | undefined;
         hidden?: boolean | undefined;
         variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | undefined;

package/package/components/checkbox/checkbox.svelte.d.ts

@@ -11,10 +11,10 @@ export default class Checkbox extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
+    disabled?: boolean | undefined;
     invalid?: boolean | undefined;
     label?: string | undefined;
     checked?: boolean | "mixed" | undefined;
-    disabled?: boolean | undefined;
     required?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
@@ -39,10 +39,10 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
+        disabled?: boolean | undefined;
         invalid?: boolean | undefined;
         label?: string | undefined;
         checked?: boolean | "mixed" | undefined;
-        disabled?: boolean | undefined;
         required?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;

package/package/components/disclosure/disclosure.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class Disclosure extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    label?: string | undefined;
     disabled?: boolean | undefined;
+    label?: string | undefined;
     hidden?: boolean | undefined;
     expanded?: boolean | undefined;
 }, {
@@ -47,8 +47,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        label?: string | undefined;
         disabled?: boolean | undefined;
+        label?: string | undefined;
         hidden?: boolean | undefined;
         expanded?: boolean | undefined;
     };

package/package/components/divider/divider.svelte

@@ -36,8 +36,12 @@
   background-color: var(--sui-secondary-border-color);
 }
 .divider[aria-orientation=horizontal] {
+  margin: 8px 0;
+  width: 100%;
   height: 1px;
 }
 .divider[aria-orientation=vertical] {
+  margin: 0 8px;
   width: 1px;
+  height: 100%;
 }</style>

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

@@ -10,14 +10,16 @@
 export default class Listbox extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     multiple?: boolean | undefined;
     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>;
@@ -33,15 +35,17 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         multiple?: boolean | undefined;
         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-group.svelte.d.ts

@@ -11,8 +11,8 @@
 export default class OptionGroup extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    label?: string | undefined;
     disabled?: boolean | undefined;
+    label?: string | undefined;
     hidden?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -28,8 +28,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        label?: string | undefined;
         disabled?: boolean | undefined;
+        label?: string | undefined;
         hidden?: boolean | undefined;
     };
     events: {

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;
-    label?: string | undefined;
     disabled?: boolean | 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;
-        label?: string | undefined;
         disabled?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
         selected?: boolean | undefined;
+        searchValue?: string | undefined;
     };
     events: {
         click: MouseEvent;

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

@@ -8,9 +8,9 @@
 export default class MenuButton extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
+    disabled?: boolean | undefined;
     focus?: (() => void) | undefined;
     label?: string | undefined;
-    disabled?: boolean | undefined;
     size?: "small" | "medium" | "large" | undefined;
     hidden?: boolean | undefined;
     variant?: "link" | "primary" | "secondary" | "tertiary" | "ghost" | undefined;
@@ -40,9 +40,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
+        disabled?: boolean | undefined;
         focus?: (() => void) | undefined;
         label?: string | undefined;
-        disabled?: boolean | undefined;
         size?: "small" | "medium" | "large" | undefined;
         hidden?: boolean | undefined;
         variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link' | undefined;

package/package/components/menu/menu-item-checkbox.svelte.d.ts

@@ -8,9 +8,9 @@
 export default class MenuItemCheckbox extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
+    disabled?: boolean | undefined;
     label?: string | undefined;
     checked?: boolean | undefined;
-    disabled?: boolean | undefined;
     hidden?: boolean | undefined;
     iconName?: string | undefined;
     iconLabel?: string | undefined;
@@ -32,9 +32,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
+        disabled?: boolean | undefined;
         label?: string | undefined;
         checked?: boolean | undefined;
-        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
         iconName?: string | undefined;
         iconLabel?: string | undefined;

package/package/components/menu/menu-item-group.svelte.d.ts

@@ -5,8 +5,8 @@
 export default class MenuItemGroup extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    title?: string | undefined;
     disabled?: boolean | undefined;
+    title?: string | undefined;
     hidden?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -22,8 +22,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        title?: string | undefined;
         disabled?: boolean | undefined;
+        title?: string | undefined;
         hidden?: boolean | undefined;
     };
     events: {

package/package/components/menu/menu-item-radio.svelte.d.ts

@@ -9,9 +9,9 @@
 export default class MenuItemRadio extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
+    disabled?: boolean | undefined;
     label?: string | undefined;
     checked?: boolean | undefined;
-    disabled?: boolean | undefined;
     hidden?: boolean | undefined;
     iconName?: string | undefined;
     iconLabel?: string | undefined;
@@ -33,9 +33,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
+        disabled?: boolean | undefined;
         label?: string | undefined;
         checked?: boolean | undefined;
-        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
         iconName?: string | undefined;
         iconLabel?: string | undefined;

package/package/components/menu/menu-item.svelte.d.ts

@@ -8,8 +8,8 @@
 export default class MenuItem extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    label?: string | undefined;
     disabled?: boolean | undefined;
+    label?: string | undefined;
     role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
     hidden?: boolean | undefined;
     iconName?: string | undefined;
@@ -42,8 +42,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        label?: string | undefined;
         disabled?: boolean | undefined;
+        label?: string | undefined;
         role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
         hidden?: boolean | undefined;
         iconName?: string | undefined;

package/package/components/radio/radio-group.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class RadioGroup extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     required?: boolean | undefined;
     hidden?: boolean | undefined;
     readonly?: boolean | undefined;
@@ -31,8 +31,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         required?: boolean | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean | undefined;

package/package/components/radio/radio.svelte.d.ts

@@ -11,9 +11,9 @@ export default class Radio extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
+    disabled?: boolean | undefined;
     label?: string | undefined;
     checked?: boolean | undefined;
-    disabled?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
 }, {
@@ -36,9 +36,9 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
+        disabled?: boolean | undefined;
         label?: string | undefined;
         checked?: boolean | undefined;
-        disabled?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
     };

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>