@sveltia/ui 0.9.0 → 0.10.1

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

@@ -30,9 +30,14 @@
   export let popupPosition = 'bottom-left';
   /**
    * The base element of {@link popupPosition}. If omitted, this will be {@link buttonComponent}.
-   * @type {HTMLElement}
+   * @type {HTMLElement | undefined}
    */
   export let popupPositionBaseElement = undefined;
+  /**
+   * Whether to show the backdrop for the popup.
+   * @type {boolean}
+   */
+  export let showPopupBackdrop = false;
   /**
    * Text label displayed on the button.
    * @type {string}
@@ -68,7 +73,7 @@
    * Move focus to the `<button>` element.
    */
   export const focus = () => {
-    buttonComponent?.element.focus();
+    buttonComponent?.element?.focus();
   };
 </script>
 
@@ -95,6 +100,7 @@
   anchor={buttonComponent?.element}
   position={popupPosition}
   positionBaseElement={popupPositionBaseElement}
+  showBackdrop={showPopupBackdrop}
   bind:this={popupComponent}
 >
   <slot name="popup" />

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

@@ -7,16 +7,17 @@
  */
 export default class MenuButton extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    focus?: () => void;
-    label?: string;
-    disabled?: boolean;
-    size?: "small" | "medium" | "large";
-    hidden?: boolean;
-    variant?: "link" | "primary" | "secondary" | "tertiary" | "ghost";
-    iconic?: boolean;
-    popupPosition?: PopupPosition;
-    popupPositionBaseElement?: HTMLElement;
+    class?: string | 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;
+    iconic?: boolean | undefined;
+    popupPosition?: PopupPosition | undefined;
+    showPopupBackdrop?: boolean | undefined;
+    popupPositionBaseElement?: HTMLElement | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -38,16 +39,17 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        focus?: () => void;
-        label?: string;
-        disabled?: boolean;
-        size?: 'small' | 'medium' | 'large';
+        class?: string | 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;
-        iconic?: boolean;
-        popupPosition?: PopupPosition;
-        popupPositionBaseElement?: HTMLElement;
+        iconic?: boolean | undefined;
+        popupPosition?: PopupPosition | undefined;
+        showPopupBackdrop?: boolean | undefined;
+        popupPositionBaseElement?: HTMLElement | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -57,7 +57,7 @@
   on:select
   on:change
   on:change={(event) => {
-    checked = /** @type {CustomEvent} */ (event).detail.checked;
+    checked = event.detail.checked;
   }}
 >
   <slot />

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

@@ -7,17 +7,17 @@
  */
 export default class MenuItemCheckbox extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    label?: string;
-    checked?: boolean;
-    disabled?: boolean;
-    hidden?: boolean;
-    iconName?: string;
-    iconLabel?: string;
+    class?: string | undefined;
+    label?: string | undefined;
+    checked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
+    iconName?: string | undefined;
+    iconLabel?: string | undefined;
 }, {
     click: MouseEvent;
-    select: Event;
-    change: Event;
+    select: CustomEvent<any>;
+    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -31,18 +31,18 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
         label?: string | undefined;
-        checked?: boolean;
-        disabled?: boolean;
+        checked?: boolean | undefined;
+        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
-        iconName?: string;
-        iconLabel?: string;
+        iconName?: string | undefined;
+        iconLabel?: string | undefined;
     };
     events: {
         click: MouseEvent;
-        select: Event;
-        change: Event;
+        select: CustomEvent<any>;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -22,7 +22,7 @@
    */
   export let disabled = false;
   /**
-   *  Text label displayed above the group items.
+   * Text label displayed above the group items.
    */
   export let title = '';
 

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

@@ -4,10 +4,10 @@
 /** A menu item group. */
 export default class MenuItemGroup extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    title?: string;
-    disabled?: boolean;
-    hidden?: boolean;
+    class?: string | undefined;
+    title?: string | undefined;
+    disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -21,9 +21,9 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        title?: string;
-        disabled?: boolean;
+        class?: string | undefined;
+        title?: string | undefined;
+        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
     };
     events: {

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

@@ -58,7 +58,7 @@
   on:select
   on:change
   on:change={(event) => {
-    checked = /** @type {CustomEvent} */ (event).detail.checked;
+    checked = event.detail.checked;
   }}
 >
   <slot />

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

@@ -8,17 +8,17 @@
  */
 export default class MenuItemRadio extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    label?: string;
-    checked?: boolean;
-    disabled?: boolean;
-    hidden?: boolean;
-    iconName?: string;
-    iconLabel?: string;
+    class?: string | undefined;
+    label?: string | undefined;
+    checked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
+    iconName?: string | undefined;
+    iconLabel?: string | undefined;
 }, {
     click: MouseEvent;
-    select: Event;
-    change: Event;
+    select: CustomEvent<any>;
+    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -32,18 +32,18 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
         label?: string | undefined;
-        checked?: boolean;
-        disabled?: boolean;
+        checked?: boolean | undefined;
+        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
-        iconName?: string;
-        iconLabel?: string;
+        iconName?: string | undefined;
+        iconLabel?: string | undefined;
     };
     events: {
         click: MouseEvent;
-        select: Event;
-        change: Event;
+        select: CustomEvent<any>;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -49,7 +49,7 @@
   let buttonComponent;
   let isPopupOpen = writable(false);
 
-  $: hasChildren = role === 'menuitem' && $$slots.default;
+  $: hasChildren = role === 'menuitem' && $$slots.children;
 </script>
 
 <div role="none" class="sui menuitem {className}" hidden={hidden || undefined}>
@@ -75,27 +75,31 @@
     on:select
     on:change
   >
-    {#if iconName}
-      <Icon slot="start-icon" name={iconName} aria-label={iconLabel} />
-    {/if}
-    {#if label}
-      <span role="none" class="label">{label}</span>
-    {/if}
-    {#if $$slots['end-icon']}
-      <span role="none" class="icon-outer">
-        <slot name="end-icon" />
-      </span>
-    {/if}
+    <slot name="start-icon" slot="start-icon">
+      {#if iconName}
+        <Icon name={iconName} aria-label={iconLabel} />
+      {/if}
+    </slot>
+    <div role="none" class="content" class:label={!!label}>
+      {#if label}
+        {label}
+      {:else}
+        <slot />
+      {/if}
+    </div>
+    <slot name="end-icon" slot="end-icon" />
     {#if hasChildren}
       <span role="none" class="icon-outer">
-        <Icon name="chevron_right" />
+        <slot name="chevron-icon">
+          <Icon name="chevron_right" />
+        </slot>
       </span>
     {/if}
   </Button>
   {#if hasChildren}
     <Popup anchor={buttonComponent?.element} position="right-top" bind:open={isPopupOpen}>
       <Menu>
-        <slot />
+        <slot name="children" />
       </Menu>
     </Popup>
   {/if}
@@ -106,13 +110,18 @@
 }
 .menuitem :global(button) {
   display: flex;
-  justify-content: space-between !important;
-  border-radius: var(--sui-option-border-radius);
+  gap: var(--sui-menuitem-gap, 4px);
+  align-items: var(--sui-menuitem-align-items, center);
+  border-radius: var(--sui-menuitem-border-radius, var(--sui-option-border-radius, 4px));
   margin: 0 !important;
-  padding: 0 16px;
+  padding: var(--sui-menuitem-padding, 0 16px);
   width: 100%;
-  min-width: 160px;
-  height: var(--sui-option-height);
+  min-width: var(--sui-menuitem-min-width, 160px);
+  height: var(--sui-menuitem-height, var(--sui-option-height));
+  color: var(--sui-menuitem-foreground-color, var(--sui-control-foreground-color, inherit));
+  background-color: var(--sui-menuitem-background-color, transparent);
+  font-size: var(--sui-menuitem-font-size, var(--sui-option-font-size));
+  font-weight: var(--sui-menuitem-font-weight, var(--sui-option-font-weight));
 }
 .menuitem :global(button[aria-checked="true"]) :global(.icon) {
   color: var(--sui-primary-accent-color-text);
@@ -135,6 +144,10 @@
   opacity: 1;
 }
 
+.content {
+  flex: auto;
+}
+
 .icon-outer {
   flex: none;
   width: 24px;

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

@@ -7,22 +7,29 @@
  */
 export default class MenuItem extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    label?: string;
-    disabled?: boolean;
-    role?: "menuitem" | "menuitemcheckbox" | "menuitemradio";
-    hidden?: boolean;
-    iconName?: string;
-    iconLabel?: string;
+    class?: string | undefined;
+    label?: string | undefined;
+    disabled?: boolean | undefined;
+    role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
+    hidden?: boolean | undefined;
+    iconName?: string | undefined;
+    iconLabel?: string | undefined;
 }, {
     click: MouseEvent;
-    select: Event;
-    change: Event;
+    select: CustomEvent<any>;
+    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
-    'end-icon': {};
+    'start-icon': {
+        slot: string;
+    };
     default: {};
+    'end-icon': {
+        slot: string;
+    };
+    'chevron-icon': {};
+    children: {};
 }> {
 }
 export type MenuItemProps = typeof __propDef.props;
@@ -32,24 +39,31 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
         label?: string | undefined;
-        disabled?: boolean;
-        role?: 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';
+        disabled?: boolean | undefined;
+        role?: "menuitem" | "menuitemcheckbox" | "menuitemradio" | undefined;
         hidden?: boolean | undefined;
-        iconName?: string;
-        iconLabel?: string;
+        iconName?: string | undefined;
+        iconLabel?: string | undefined;
     };
     events: {
         click: MouseEvent;
-        select: Event;
-        change: Event;
+        select: CustomEvent<any>;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        'end-icon': {};
+        'start-icon': {
+            slot: string;
+        };
         default: {};
+        'end-icon': {
+            slot: string;
+        };
+        'chevron-icon': {};
+        children: {};
     };
 };
 export {};

package/package/components/menu/menu.svelte

@@ -5,6 +5,7 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
 -->
 <script>
+  import { createEventDispatcher } from 'svelte';
   import { activateGroup } from '../../services/group';
 
   /**
@@ -23,6 +24,8 @@
    * @type {boolean}
    */
   export let disabled = false;
+
+  const dispatch = createEventDispatcher();
 </script>
 
 <div
@@ -33,7 +36,9 @@
   aria-disabled={disabled}
   {...$$restProps}
   use:activateGroup
-  on:change
+  on:change={(/** @type {CustomEvent} */ event) => {
+    dispatch('change', event.detail);
+  }}
 >
   <slot />
 </div>
@@ -42,12 +47,13 @@
   display: flex;
   flex-direction: column;
   margin: 0;
-  border-width: 1px;
-  border-color: var(--sui-secondary-border-color);
-  border-radius: 4px;
-  padding: 4px;
+  border-width: var(--sui-menu-border-width, 1px);
+  border-style: var(--sui-menu-border-style, solid);
+  border-color: var(--sui-menu-border-width, var(--sui-secondary-border-color));
+  border-radius: var(--sui-menu-border-radius, 4px);
+  padding: var(--sui-menu-padding, 4px);
 }
 .menu :global([role="separator"]) {
-  margin: 4px;
-  background-color: var(--sui-control-border-color);
+  margin: var(--sui-menu-divider-margin, 4px);
+  background-color: var(--sui-menu-divider-color, var(--sui-control-border-color));
 }</style>

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

@@ -8,11 +8,11 @@
  */
 export default class Menu extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    disabled?: boolean;
-    hidden?: boolean;
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
 }, {
-    change: Event;
+    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -26,12 +26,12 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        disabled?: boolean;
+        class?: string | undefined;
+        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
     };
     events: {
-        change: Event;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -5,6 +5,7 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
 -->
 <script>
+  import { createEventDispatcher } from 'svelte';
   import { activateGroup } from '../../services/group';
 
   /**
@@ -43,6 +44,8 @@
    * @type {'horizontal' | 'vertical'}
    */
   export let orientation = 'horizontal';
+
+  const dispatch = createEventDispatcher();
 </script>
 
 <div
@@ -58,7 +61,9 @@
   aria-orientation={orientation}
   {...$$restProps}
   use:activateGroup
-  on:change
+  on:change={(/** @type {CustomEvent} */ event) => {
+    dispatch('change', event.detail);
+  }}
 >
   <div role="none" class="inner" inert={disabled}>
     <slot />

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

@@ -8,15 +8,15 @@
  */
 export default class RadioGroup extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    hidden?: boolean;
-    readonly?: boolean;
-    orientation?: "vertical" | "horizontal";
+    class?: string | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    hidden?: boolean | undefined;
+    readonly?: boolean | undefined;
+    orientation?: "vertical" | "horizontal" | undefined;
 }, {
-    change: Event;
+    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -30,16 +30,16 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        invalid?: boolean;
-        disabled?: boolean;
-        required?: boolean;
+        class?: string | undefined;
+        invalid?: boolean | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
         hidden?: boolean | undefined;
-        readonly?: boolean;
-        orientation?: 'horizontal' | 'vertical';
+        readonly?: boolean | undefined;
+        orientation?: "vertical" | "horizontal" | undefined;
     };
     events: {
-        change: Event;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/radio/radio.svelte

@@ -63,7 +63,7 @@
   {...$$restProps}
   on:click={(event) => {
     if (!(/** @type {HTMLElement} */ (event.target).matches('button'))) {
-      buttonComponent.element.click();
+      buttonComponent?.element?.click();
     }
   }}
 >

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

@@ -9,16 +9,16 @@
  */
 export default class Radio extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    name?: string;
-    label?: string;
-    checked?: boolean;
-    disabled?: boolean;
-    value?: string;
-    hidden?: boolean;
+    class?: string | undefined;
+    name?: string | undefined;
+    label?: string | undefined;
+    checked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    hidden?: boolean | undefined;
 }, {
-    select: Event;
-    change: Event;
+    select: CustomEvent<any>;
+    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -32,17 +32,17 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
         name?: string | undefined;
         label?: string | undefined;
-        checked?: boolean;
-        disabled?: boolean;
+        checked?: boolean | undefined;
+        disabled?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
     };
     events: {
-        select: Event;
-        change: Event;
+        select: CustomEvent<any>;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };