@sveltia/ui 0.10.6 → 0.10.8

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

@@ -137,6 +137,7 @@
   on:mouseenter
   on:mouseleave
   on:click
+  on:dblclick
   on:dragover
   on:dragleave
   on:dragend
@@ -144,6 +145,8 @@
   on:keydown
   on:keyup
   on:keypress
+  on:focus
+  on:blur
   on:select={(/** @type {CustomEvent} */ event) => {
     dispatch('select', event.detail);
   }}

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;
@@ -31,6 +31,7 @@ export default class Button extends SvelteComponent<{
     mouseenter: MouseEvent;
     mouseleave: MouseEvent;
     click: MouseEvent;
+    dblclick: MouseEvent;
     dragover: DragEvent;
     dragleave: DragEvent;
     dragend: DragEvent;
@@ -38,6 +39,8 @@ export default class Button extends SvelteComponent<{
     keydown: KeyboardEvent;
     keyup: KeyboardEvent;
     keypress: KeyboardEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
     select: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
@@ -115,8 +118,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;
@@ -137,6 +140,7 @@ declare const __propDef: {
         mouseenter: MouseEvent;
         mouseleave: MouseEvent;
         click: MouseEvent;
+        dblclick: MouseEvent;
         dragover: DragEvent;
         dragleave: DragEvent;
         dragend: DragEvent;
@@ -144,6 +148,8 @@ declare const __propDef: {
         keydown: KeyboardEvent;
         keyup: KeyboardEvent;
         keypress: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
         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

@@ -69,6 +69,7 @@
   aria-checked={selected}
   {...$$restProps}
   on:click
+  on:dblclick
   on:select
   on:change
   on:change={(event) => {

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;
@@ -19,6 +19,7 @@ export default class SelectButton extends SvelteComponent<{
     selected?: boolean | undefined;
 }, {
     click: MouseEvent;
+    dblclick: MouseEvent;
     select: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
@@ -41,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;
@@ -52,6 +53,7 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        dblclick: MouseEvent;
         select: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {

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/grid/grid-row.svelte

@@ -29,6 +29,9 @@
   aria-selected={selected}
   {...$$restProps}
   on:click
+  on:dblclick
+  on:focus
+  on:blur
   on:select={(/** @type {any} */ event) => {
     dispatch('select', /** @type {CustomEvent} */ (event).detail);
   }}

package/package/components/grid/grid-row.svelte.d.ts

@@ -12,6 +12,9 @@ export default class GridRow extends SvelteComponent<{
     selected?: boolean | undefined;
 }, {
     click: MouseEvent;
+    dblclick: MouseEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
     select: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
@@ -32,6 +35,9 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        dblclick: MouseEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
         select: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {

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

@@ -10,8 +10,8 @@
 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;
@@ -33,8 +33,8 @@ 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;

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

@@ -53,6 +53,9 @@
     data-type={typeof value}
     {...$$restProps}
     on:click
+    on:dblclick
+    on:focus
+    on:blur
     on:dragover
     on:dragleave
     on:dragend

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

@@ -9,13 +9,16 @@
 export default class Option extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    label?: string | undefined;
     disabled?: boolean | undefined;
+    label?: string | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
     selected?: boolean | undefined;
 }, {
     click: MouseEvent;
+    dblclick: MouseEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
     dragover: DragEvent;
     dragleave: DragEvent;
     dragend: DragEvent;
@@ -43,14 +46,17 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        label?: string | undefined;
         disabled?: boolean | undefined;
+        label?: string | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
         selected?: boolean | undefined;
     };
     events: {
         click: MouseEvent;
+        dblclick: MouseEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
         dragover: DragEvent;
         dragleave: DragEvent;
         dragend: DragEvent;

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

@@ -72,6 +72,8 @@
         $isPopupOpen = false;
       }
     }}
+    on:focus
+    on:blur
     on:select
     on:change
   >

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

@@ -8,14 +8,16 @@
 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;
     iconLabel?: string | undefined;
 }, {
     click: MouseEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
     select: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
@@ -40,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;
@@ -49,6 +51,8 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
         select: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {

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

@@ -81,6 +81,8 @@
       event.preventDefault();
       checked = true;
     }}
+    on:focus
+    on:blur
     on:select
     on:change
   />

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

@@ -11,12 +11,14 @@ 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;
 }, {
+    focus: FocusEvent;
+    blur: FocusEvent;
     select: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
@@ -34,13 +36,15 @@ 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;
     };
     events: {
+        focus: FocusEvent;
+        blur: FocusEvent;
         select: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {

package/package/components/select/combobox.svelte

@@ -64,6 +64,7 @@
 
   const dispatch = createEventDispatcher();
   const id = getRandomId('combobox');
+  const selectedSelector = '[role="option"][aria-selected="true"]';
   /** @type {HTMLElement} */
   let comboboxElement;
   /** @type {TextInput | undefined} */
@@ -75,22 +76,40 @@
   let label = '';
 
   /**
-   * Update the `value` and `label` whenever an option is selected.
+   * Update the {@link label} and selected option when the {@link value} is changed.
+   */
+  const onChange = () => {
+    const selected = popupComponent?.content?.querySelector(selectedSelector);
+
+    const target = /** @type {HTMLButtonElement} */ (
+      popupComponent?.content?.querySelector(`[role="option"][value="${value}"]`)
+    );
+
+    if (target) {
+      label = target.querySelector('.label')?.textContent || target.textContent || target.value;
+
+      if (selected !== target) {
+        selected?.setAttribute('aria-selected', 'false');
+        target.setAttribute('aria-selected', 'true');
+      }
+    }
+  };
+
+  /**
+   * Update the {@link value} whenever an option is selected.
    * @param {HTMLButtonElement} target - Selected option.
    */
   const onSelect = (target) => {
     // @todo support more types
     value = target.dataset.type === 'number' ? Number(target.value) : target.value;
-    label = target.querySelector('.label')?.textContent || target.value;
+    onChange();
     dispatch('change', { target: inputComponent?.element, value });
   };
 
   $: {
     if (popupComponent?.content) {
       window.requestAnimationFrame(() => {
-        const selected = popupComponent?.content?.querySelector(
-          '[role="option"][aria-selected="true"]',
-        );
+        const selected = popupComponent?.content?.querySelector(selectedSelector);
 
         if (selected) {
           onSelect(/** @type {HTMLButtonElement} */ (selected));
@@ -98,6 +117,11 @@
       });
     }
   }
+
+  $: {
+    void value;
+    onChange();
+  }
 </script>
 
 <div

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

@@ -10,8 +10,8 @@
 export default class Combobox extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     required?: boolean | undefined;
     value?: string | number | undefined;
     position?: PopupPosition | undefined;
@@ -37,8 +37,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         required?: boolean | undefined;
         value?: (string | number | undefined);
         position?: PopupPosition | undefined;

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

@@ -10,8 +10,8 @@
 export default class Select extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     required?: boolean | undefined;
     value?: string | number | undefined;
     hidden?: boolean | undefined;
@@ -32,8 +32,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         required?: boolean | undefined;
         value?: (string | number | undefined);
         hidden?: boolean | undefined;

package/package/components/slider/slider.svelte.d.ts

@@ -12,8 +12,8 @@
 export default class Slider extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     max?: number | undefined;
     min?: number | undefined;
     step?: number | undefined;
@@ -39,8 +39,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         max?: number | undefined;
         min?: number | undefined;
         step?: number | undefined;

package/package/components/switch/switch.svelte.d.ts

@@ -9,10 +9,10 @@
 export default class Switch extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
+    disabled?: boolean | undefined;
     invalid?: boolean | undefined;
     label?: string | undefined;
     checked?: boolean | "mixed" | undefined;
-    disabled?: boolean | undefined;
     required?: boolean | undefined;
     hidden?: boolean | undefined;
     readonly?: boolean | undefined;
@@ -32,10 +32,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
+        disabled?: boolean | undefined;
         invalid?: boolean | undefined;
         label?: string | undefined;
         checked?: boolean | "mixed" | undefined;
-        disabled?: boolean | undefined;
         required?: boolean | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean | undefined;

package/package/components/tabs/tab.svelte

@@ -37,6 +37,8 @@
   {disabled}
   aria-selected={selected}
   {...$$restProps}
+  on:focus
+  on:blur
   on:select
   on:change
 >

package/package/components/tabs/tab.svelte.d.ts

@@ -13,6 +13,8 @@ export default class Tab extends SvelteComponent<{
     hidden?: boolean | undefined;
     selected?: boolean | undefined;
 }, {
+    focus: FocusEvent;
+    blur: FocusEvent;
     select: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
@@ -40,6 +42,8 @@ declare const __propDef: {
         selected?: boolean | undefined;
     };
     events: {
+        focus: FocusEvent;
+        blur: FocusEvent;
         select: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {

package/package/components/text-field/markdown-editor.svelte.d.ts

@@ -4,8 +4,8 @@
 /** A Markdown text editor. */
 export default class MarkdownEditor extends SvelteComponent<{
     [x: string]: any;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     required?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
@@ -22,8 +22,8 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         required?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;

package/package/components/text-field/number-input.svelte.d.ts

@@ -9,8 +9,8 @@
 export default class NumberInput extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     max?: number | undefined;
     min?: number | undefined;
     required?: boolean | undefined;
@@ -44,8 +44,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         max?: number | undefined;
         min?: number | undefined;
         required?: boolean | undefined;

package/package/components/text-field/password-input.svelte.d.ts

@@ -10,8 +10,8 @@
 export default class PasswordInput extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     required?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
@@ -39,8 +39,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         required?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;

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

@@ -10,9 +10,9 @@
 export default class SearchBar extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
+    disabled?: boolean | undefined;
     focus?: (() => void) | undefined;
     invalid?: boolean | undefined;
-    disabled?: boolean | undefined;
     required?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
@@ -66,9 +66,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
+        disabled?: boolean | undefined;
         focus?: (() => void) | undefined;
         invalid?: boolean | undefined;
-        disabled?: boolean | undefined;
         required?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;

package/package/components/text-field/text-area.svelte.d.ts

@@ -11,8 +11,8 @@ export default class TextArea extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     required?: boolean | undefined;
     value?: string | undefined;
     hidden?: boolean | undefined;
@@ -38,8 +38,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         required?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;

package/package/components/text-field/text-input.svelte.d.ts

@@ -10,8 +10,8 @@ export default class TextInput extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     name?: string | undefined;
-    invalid?: boolean | undefined;
     disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
     required?: boolean | undefined;
     value?: string | number | undefined;
     role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;
@@ -83,8 +83,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         name?: string | undefined;
-        invalid?: boolean | undefined;
         disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
         required?: boolean | undefined;
         value?: string | number | undefined;
         role?: "textbox" | "searchbox" | "combobox" | "spinbutton" | undefined;

package/package/components/toolbar/toolbar.svelte

@@ -78,18 +78,34 @@
   background-color: var(--sui-selected-background-color);
 }
 [role=toolbar] :global(h2) {
+  flex: auto;
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0;
   padding: 0 8px;
+  min-width: 0;
   font-size: var(--sui-font-size-large);
 }
+[role=toolbar] :global(h2) :global(strong) {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 [role=toolbar] :global(h2) :global(span) {
   font-size: var(--sui-font-size-small);
   font-weight: normal;
   opacity: 0.8;
 }
+[role=toolbar] :global(.divider[aria-orientation="horizontal"]) {
+  margin: 0 4px;
+  width: calc(100% - 8px);
+}
+[role=toolbar] :global(.divider[aria-orientation="vertical"]) {
+  margin: 4px 0;
+  height: calc(100% - 8px);
+}
 
 .inner {
   display: contents;

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

@@ -171,7 +171,7 @@
   --sui-font-weight-normal: 300;
   --sui-font-weight-bold: 600;
   --sui-font-family-monospace: "Noto Sans Mono", monospace;
-  --sui-font-size-monospace: 13px;
+  --sui-font-size-monospace: 12.5px;
   --sui-line-height-default: 1.25;
   --sui-line-height-compact: 1.5;
   --sui-line-height-comfortable: 1.75;
@@ -424,6 +424,10 @@
   }
 }
 
+:global(::selection) {
+  background-color: var(--sui-primary-accent-color-translucent);
+}
+
 :global(*) {
   -webkit-tap-highlight-color: transparent;
 }
@@ -465,6 +469,7 @@
 :global(code),
 :global(pre) {
   font-family: var(--sui-font-family-monospace);
+  font-size: var(--sui-font-size-monospace);
 }
 
 :global(pre) {

package/package/index.d.ts

@@ -3,6 +3,7 @@ export function initLocales({ fallbackLocale, initialLocale }?: {
     initialLocale?: string | undefined;
 } | undefined): void;
 export { default as Alert } from "./components/alert/alert.svelte";
+export { default as ButtonGroup } from "./components/button/button-group.svelte";
 export { default as Button } from "./components/button/button.svelte";
 export { default as SelectButtonGroup } from "./components/button/select-button-group.svelte";
 export { default as SelectButton } from "./components/button/select-button.svelte";

package/package/index.js

@@ -28,6 +28,7 @@ export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}
 initLocales();
 
 export { default as Alert } from './components/alert/alert.svelte';
+export { default as ButtonGroup } from './components/button/button-group.svelte';
 export { default as Button } from './components/button/button.svelte';
 export { default as SelectButtonGroup } from './components/button/select-button-group.svelte';
 export { default as SelectButton } from './components/button/select-button.svelte';

package/package/services/events.js

@@ -62,16 +62,18 @@ export const activateKeyShortcuts = (element, shortcuts = '') => {
    * @param {KeyboardEvent} event - `keydown` event.
    */
   const handler = (event) => {
+    const { disabled, offsetParent, offsetLeft, offsetTop } = element;
+
+    // Check if the element is enabled, visible and clickable (not behind a modal dialog)
     if (
-      !!element.offsetParent &&
+      !disabled &&
+      !!offsetParent &&
+      document.elementsFromPoint(offsetLeft + 4, offsetTop + 4).includes(element) &&
       matchShortcuts(event, /** @type {string} */ (platformKeyShortcuts))
     ) {
       event.preventDefault();
-
-      if (!element.disabled) {
-        element.focus();
-        element.click();
-      }
+      element.focus();
+      element.click();
     }
   };
 

package/package/services/group.js

@@ -252,10 +252,15 @@ class Group {
 
           if (isTarget) {
             element.focus();
+            element.dispatchEvent(new CustomEvent('focus'));
           }
         });
       } else {
         element.classList.toggle('focused', isTarget);
+
+        if (isTarget) {
+          element.dispatchEvent(new CustomEvent('focus'));
+        }
       }
 
       if (controlTarget) {

package/package/styles/core.scss

@@ -35,6 +35,10 @@
   }
 }
 
+::selection {
+  background-color: var(--sui-primary-accent-color-translucent);
+}
+
 * {
   -webkit-tap-highlight-color: transparent;
 }
@@ -76,6 +80,7 @@ li {
 code,
 pre {
   font-family: var(--sui-font-family-monospace);
+  font-size: var(--sui-font-size-monospace);
 }
 
 pre {

package/package/styles/variables.scss

@@ -160,7 +160,7 @@
   --sui-font-weight-normal: 300;
   --sui-font-weight-bold: 600;
   --sui-font-family-monospace: "Noto Sans Mono", monospace;
-  --sui-font-size-monospace: 13px;
+  --sui-font-size-monospace: 12.5px;
   --sui-line-height-default: 1.25;
   --sui-line-height-compact: 1.5;
   --sui-line-height-comfortable: 1.75;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.10.6",
+  "version": "0.10.8",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -27,32 +27,32 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.42.1",
-    "@sveltejs/adapter-auto": "^3.1.1",
-    "@sveltejs/kit": "^2.5.3",
+    "@sveltejs/adapter-auto": "^3.2.0",
+    "@sveltejs/kit": "^2.5.5",
     "@sveltejs/package": "^2.3.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "cspell": "^8.6.0",
+    "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.1",
+    "eslint-plugin-jsdoc": "^48.2.2",
     "eslint-plugin-svelte": "^2.35.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "postcss-html": "^1.6.0",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.2",
-    "sass": "^1.71.1",
-    "stylelint": "^16.2.1",
+    "sass": "^1.72.0",
+    "stylelint": "^16.3.1",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-scss": "^6.2.1",
-    "svelte-check": "^3.6.6",
+    "svelte-check": "^3.6.8",
     "svelte-i18n": "^4.0.0",
     "svelte-preprocess": "^5.1.3",
     "tslib": "^2.6.2",
-    "vite": "^5.1.5",
-    "vitest": "^1.3.1"
+    "vite": "^5.2.7",
+    "vitest": "^1.4.0"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -61,6 +61,11 @@
       "svelte": "./package/components/alert/alert.svelte",
       "default": "./package/components/alert/alert.svelte"
     },
+    "./components/button/button-group.svelte": {
+      "types": "./package/components/button/button-group.svelte.d.ts",
+      "svelte": "./package/components/button/button-group.svelte",
+      "default": "./package/components/button/button-group.svelte"
+    },
     "./components/button/button.svelte": {
       "types": "./package/components/button/button.svelte.d.ts",
       "svelte": "./package/components/button/button.svelte",
@@ -431,6 +436,9 @@
       "components/alert/alert.svelte": [
         "./package/components/alert/alert.svelte.d.ts"
       ],
+      "components/button/button-group.svelte": [
+        "./package/components/button/button-group.svelte.d.ts"
+      ],
       "components/button/button.svelte": [
         "./package/components/button/button.svelte.d.ts"
       ],