@sveltia/ui 0.6.5 → 0.7.0

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

@@ -10,7 +10,9 @@ export default class Option extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     label?: string;
-    value?: any;
+    disabled?: boolean;
+    value?: string;
+    hidden?: boolean;
     selected?: boolean;
 }, {
     click: MouseEvent;
@@ -18,6 +20,7 @@ export default class Option extends SvelteComponent<{
     dragleave: DragEvent;
     dragend: DragEvent;
     drop: DragEvent;
+    select: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -38,8 +41,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        label?: string;
-        value?: any;
+        label?: string | undefined;
+        disabled?: boolean;
+        value?: string | undefined;
+        hidden?: boolean | undefined;
         selected?: boolean;
     };
     events: {
@@ -48,6 +53,7 @@ declare const __propDef: {
         dragleave: DragEvent;
         dragend: DragEvent;
         drop: DragEvent;
+        select: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -8,27 +8,73 @@
   import Popup from '../util/popup.svelte';
 
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the `<button>` element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
+  /**
+   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
+   * @type {boolean | undefined}
+   */
+  export let hidden = undefined;
+  /**
+   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
+   * @type {boolean}
+   */
+  export let disabled = false;
   /**
    * Where to show the dropdown menu.
    * @type {PopupPosition}
    */
   export let popupPosition = 'bottom-left';
+  /**
+   * Text label displayed on the button.
+   * @type {string}
+   */
+  export let label = '';
+  /**
+   * The style variant of the button.
+   * @type {'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link' | undefined}
+   */
+  export let variant = undefined;
+  /**
+   * The size of the button.
+   * @type {'small' | 'medium' | 'large'}
+   */
+  export let size = 'medium';
+  /**
+   * Whether to only show an icon on the button and trim the padding.
+   */
+  export let iconic = false;
 
-  /** @type {?Button} */
+  /**
+   * Reference to the `Button` component.
+   * @type {Button | undefined}
+   */
   let buttonComponent;
-  /** @type {?Popup} */
+  /**
+   * Reference to the `Popup` component.
+   * @type {Popup | undefined}
+   */
   let popupComponent;
+
+  /**
+   * Move focus to the `<button>` element.
+   */
+  export const focus = () => {
+    buttonComponent?.element.focus();
+  };
 </script>
 
 <Button
   class="sui menu-button {className}"
+  {hidden}
+  {disabled}
+  {label}
+  {variant}
+  {size}
+  {iconic}
   aria-haspopup="menu"
   {...$$restProps}
   bind:this={buttonComponent}

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

@@ -8,6 +8,13 @@
 export default class MenuButton extends SvelteComponent<{
     [x: string]: any;
     class?: string;
+    label?: string;
+    focus?: () => void;
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    hidden?: boolean;
+    variant?: "link" | "primary" | "secondary" | "tertiary" | "ghost";
+    iconic?: boolean;
     popupPosition?: PopupPosition;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -21,6 +28,7 @@ export default class MenuButton extends SvelteComponent<{
     };
     popup: {};
 }> {
+    get focus(): () => void;
 }
 export type MenuButtonProps = typeof __propDef.props;
 export type MenuButtonEvents = typeof __propDef.events;
@@ -30,6 +38,13 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
+        label?: string;
+        focus?: () => void;
+        disabled?: boolean;
+        size?: 'small' | 'medium' | 'large';
+        hidden?: boolean | undefined;
+        variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link' | undefined;
+        iconic?: boolean;
         popupPosition?: PopupPosition;
     };
     events: {

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

@@ -4,22 +4,61 @@
   @see https://w3c.github.io/aria/#menuitemcheckbox
 -->
 <script>
+  import Icon from '../icon/icon.svelte';
   import MenuItem from './menu-item.svelte';
 
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
+  /**
+   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
+   * @type {boolean | undefined}
+   */
+  export let hidden = undefined;
+  /**
+   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
+   * @type {boolean}
+   */
+  export let disabled = false;
+  /**
+   * Whether to mark the widget checked.
+   * @type {boolean}
+   */
+  export let checked = false;
+  /**
+   * Text label displayed on the item.
+   * @type {string | undefined}
+   */
+  export let label = '';
+  /**
+   * Name of `<Icon>` displayed before the label.
+   */
+  export let iconName = '';
+  /**
+   * ARIA label of `<Icon>` displayed before the label.
+   */
+  export let iconLabel = '';
 </script>
 
 <MenuItem
   class="sui menu-item-checkbox {className}"
   role="menuitemcheckbox"
+  {label}
+  {hidden}
+  {disabled}
+  aria-checked={checked}
+  {iconName}
+  {iconLabel}
   {...$$restProps}
   on:click
+  on:click={() => {
+    checked = !checked;
+  }}
+  on:select
 >
   <slot />
+  <svelte:component this={checked ? Icon : undefined} slot="end-icon" name="check" />
 </MenuItem>

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

@@ -8,8 +8,15 @@
 export default class MenuItemCheckbox extends SvelteComponent<{
     [x: string]: any;
     class?: string;
+    label?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+    iconName?: string;
+    iconLabel?: string;
 }, {
     click: MouseEvent;
+    select: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -24,9 +31,16 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
+        label?: string | undefined;
+        checked?: boolean;
+        disabled?: boolean;
+        hidden?: boolean | undefined;
+        iconName?: string;
+        iconLabel?: string;
     };
     events: {
         click: MouseEvent;
+        select: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -3,33 +3,50 @@
   A menu item group.
 -->
 <script>
-  import { getRandomId } from '../util/util';
+  import { getRandomId } from '../../services/util';
 
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
+  /**
+   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
+   * @type {boolean | undefined}
+   */
+  export let hidden = undefined;
+  /**
+   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
+   * @type {boolean}
+   */
+  export let disabled = false;
+  /**
+   *  Text label displayed above the group items.
+   */
   export let title = '';
 
-  export let ariaLabel = '';
-
   const id = getRandomId('group');
 </script>
 
 <div
+  {id}
   class="sui menu-item-group {className}"
+  hidden={hidden || undefined}
   role="group"
-  {id}
-  aria-label={ariaLabel || undefined}
+  aria-hidden={hidden}
+  aria-disabled={disabled}
   aria-labelledby={title ? '{id}-title' : undefined}
   {...$$restProps}
 >
   {#if title}
     <div class="title" id="{id}-title">{title}</div>
   {/if}
-  <slot />
+  <div class="inner" inert={disabled}>
+    <slot />
+  </div>
 </div>
+
+<style>.inner {
+  display: contents;
+}</style>

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

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

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

@@ -5,17 +5,61 @@
   @see https://w3c.github.io/aria/#menuitemradio
 -->
 <script>
+  import Icon from '../icon/icon.svelte';
   import MenuItem from './menu-item.svelte';
 
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
+  /**
+   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
+   * @type {boolean | undefined}
+   */
+  export let hidden = undefined;
+  /**
+   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
+   * @type {boolean}
+   */
+  export let disabled = false;
+  /**
+   * Whether to check the widget. An alias of the `aria-checked` attribute.
+   * @type {boolean}
+   */
+  export let checked = false;
+  /**
+   * Text label displayed on the item.
+   * @type {string | undefined}
+   */
+  export let label = '';
+  /**
+   * Name of `<Icon>` displayed before the label.
+   */
+  export let iconName = '';
+  /**
+   * ARIA label of `<Icon>` displayed before the label.
+   */
+  export let iconLabel = '';
 </script>
 
-<MenuItem class="sui menu-item-radio {className}" role="menuitemradio" {...$$restProps} on:click>
+<MenuItem
+  class="sui menu-item-radio {className}"
+  role="menuitemradio"
+  {label}
+  {hidden}
+  {disabled}
+  aria-checked={checked}
+  {iconName}
+  {iconLabel}
+  {...$$restProps}
+  on:click
+  on:click={() => {
+    checked = !checked;
+  }}
+  on:select
+>
   <slot />
+  <svelte:component this={checked ? Icon : undefined} slot="end-icon" name="check" />
 </MenuItem>

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

@@ -9,8 +9,15 @@
 export default class MenuItemRadio extends SvelteComponent<{
     [x: string]: any;
     class?: string;
+    label?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+    iconName?: string;
+    iconLabel?: string;
 }, {
     click: MouseEvent;
+    select: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -25,9 +32,16 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
+        label?: string | undefined;
+        checked?: boolean;
+        disabled?: boolean;
+        hidden?: boolean | undefined;
+        iconName?: string;
+        iconLabel?: string;
     };
     events: {
         click: MouseEvent;
+        select: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -10,21 +10,41 @@
   import Popup from '../util/popup.svelte';
   import Menu from './menu.svelte';
 
+  /**
+   * The `class` attribute on the wrapper element.
+   * @type {string}
+   */
   let className = '';
-
   export { className as class };
-
-  /** @type {('menuitem'|'menuitemcheckbox'|'menuitemradio')} */
+  /**
+   * The `role` attribute on the `<button>` element.
+   * @type {'menuitem' | 'menuitemcheckbox' | 'menuitemradio'}
+   */
   export let role = 'menuitem';
-
+  /**
+   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
+   * @type {boolean | undefined}
+   */
+  export let hidden = undefined;
+  /**
+   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
+   * @type {boolean}
+   */
+  export let disabled = false;
+  /**
+   * Text label displayed on the item.
+   * @type {string | undefined}
+   */
   export let label = '';
-
+  /**
+   * Name of `<Icon>` displayed before the label.
+   */
   export let iconName = '';
-
+  /**
+   * ARIA label of `<Icon>` displayed before the label.
+   */
   export let iconLabel = '';
 
-  export let checked = false;
-
   /** @type {Button} */
   let buttonComponent;
   let isPopupOpen = writable(false);
@@ -32,21 +52,27 @@
   $: hasChildren = role === 'menuitem' && $$slots.default;
 </script>
 
-<div class="sui menuitem {className}">
+<div class="sui menuitem {className}" hidden={hidden || undefined}>
   <Button
     {role}
-    aria-checked={checked}
+    {hidden}
+    {disabled}
     aria-haspopup={hasChildren ? 'menu' : undefined}
-    aria-expanded={hasChildren && $isPopupOpen ? true : undefined}
+    aria-expanded={hasChildren ? $isPopupOpen : undefined}
     {...$$restProps}
     bind:this={buttonComponent}
     on:click
     on:mouseenter={() => {
-      $isPopupOpen = true;
+      if (hasChildren) {
+        $isPopupOpen = true;
+      }
     }}
     on:mouseleave={() => {
-      $isPopupOpen = false;
+      if (hasChildren) {
+        $isPopupOpen = false;
+      }
     }}
+    on:select
   >
     {#if iconName}
       <Icon slot="start-icon" name={iconName} label={iconLabel} />
@@ -54,11 +80,9 @@
     {#if label}
       <span class="label">{label}</span>
     {/if}
-    {#if role === 'menuitemradio' || role === 'menuitemcheckbox'}
+    {#if $$slots['end-icon']}
       <span class="icon-outer">
-        {#if checked}
-          <Icon name="check" />
-        {/if}
+        <slot name="end-icon" />
       </span>
     {/if}
     {#if hasChildren}
@@ -82,18 +106,21 @@
 .menuitem :global(button) {
   display: flex;
   justify-content: space-between !important;
-  border-radius: 4px;
+  border-radius: var(--sui-option-border-radius);
   padding: 0 16px;
   width: 100%;
   min-width: 160px;
-  height: var(--sui-option-medium-height);
+  height: var(--sui-option-height);
 }
 .menuitem :global(button[aria-checked="true"]) :global(.icon) {
-  color: var(--sui-primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-text);
 }
 .menuitem :global(button:hover) {
   color: var(--sui-highlight-foreground-color);
-  background-color: var(--sui-highlight-background-color);
+  background-color: var(--sui-hover-background-color);
+}
+.menuitem :global(button:active) {
+  background-color: var(--sui-active-background-color);
 }
 .menuitem:hover > :global([role="menu"]) {
   opacity: 1;

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

@@ -9,15 +9,18 @@ export default class MenuItem extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     label?: string;
-    checked?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
     role?: "menuitem" | "menuitemcheckbox" | "menuitemradio";
     iconName?: string;
     iconLabel?: string;
 }, {
     click: MouseEvent;
+    select: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
+    'end-icon': {};
     default: {};
 }> {
 }
@@ -29,18 +32,21 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        label?: string;
-        checked?: boolean;
-        role?: ('menuitem' | 'menuitemcheckbox' | 'menuitemradio');
+        label?: string | undefined;
+        disabled?: boolean;
+        hidden?: boolean | undefined;
+        role?: 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';
         iconName?: string;
         iconLabel?: string;
     };
     events: {
         click: MouseEvent;
+        select: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'end-icon': {};
         default: {};
     };
 };

package/package/components/menu/menu.svelte

@@ -4,29 +4,36 @@
   @see https://w3c.github.io/aria/#menu
   @see https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
 -->
-<svelte:options accessors={true} />
-
 <script>
-  import { activateGroup } from '../util/group';
+  import { activateGroup } from '../../services/group';
 
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
-  /** @type {HTMLElement?} */
-  export let element = undefined;
+  /**
+   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
+   * @type {boolean | undefined}
+   */
+  export let hidden = undefined;
+  /**
+   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
+   * @type {boolean}
+   */
+  export let disabled = false;
 </script>
 
 <div
   class="sui menu {className}"
   role="menu"
+  hidden={hidden || undefined}
+  aria-hidden={hidden}
+  aria-disabled={disabled}
   {...$$restProps}
-  bind:this={element}
   use:activateGroup
+  on:change
 >
   <slot />
 </div>
@@ -42,4 +49,5 @@
 }
 .menu :global([role="separator"]) {
   margin: 4px;
+  background-color: var(--sui-control-border-color);
 }</style>

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

@@ -9,18 +9,15 @@
 export default class Menu extends SvelteComponent<{
     [x: string]: any;
     class?: string;
-    element?: HTMLElement;
+    disabled?: boolean;
+    hidden?: boolean;
 }, {
+    change: Event;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
 }> {
-    /**accessor*/
-    set class(arg: string);
-    get class(): string;
-    /**accessor*/
-    set element(arg: HTMLElement);
-    get element(): HTMLElement;
 }
 export type MenuProps = typeof __propDef.props;
 export type MenuEvents = typeof __propDef.events;
@@ -30,9 +27,12 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        element?: HTMLElement | null;
+        disabled?: boolean;
+        hidden?: boolean | undefined;
     };
     events: {
+        change: Event;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {