@sveltia/ui 0.6.6 → 0.7.0

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

@@ -10,12 +10,29 @@ export default class Disclosure extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     label?: string;
+    disabled?: boolean;
+    hidden?: boolean;
     expanded?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
 }> {
+    /**accessor*/
+    set class(arg: string);
+    get class(): string;
+    /**accessor*/
+    set hidden(arg: boolean);
+    get hidden(): boolean;
+    /**accessor*/
+    set disabled(arg: boolean);
+    get disabled(): boolean;
+    /**accessor*/
+    set expanded(arg: boolean);
+    get expanded(): boolean;
+    /**accessor*/
+    set label(arg: string);
+    get label(): string;
 }
 export type DisclosureProps = typeof __propDef.props;
 export type DisclosureEvents = typeof __propDef.events;
@@ -26,6 +43,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         label?: string;
+        disabled?: boolean;
+        hidden?: boolean | undefined;
         expanded?: boolean;
     };
     events: {

package/package/components/divider/divider.svelte

@@ -4,21 +4,29 @@
   @see https://w3c.github.io/aria/#separator
 -->
 <script>
-  /** @type {('horizontal' | 'vertical')} */
-  export let orientation = 'horizontal';
-
   /**
-   * CSS class name on the button.
+   * CSS class name 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;
+  /**
+   * Orientation of the widget. An alias of the `aria-orientation` attribute.
+   * @type {'horizontal' | 'vertical'}
+   */
+  export let orientation = 'horizontal';
 </script>
 
 <div
-  role="separator"
   class="sui divider {className}"
+  role="separator"
+  hidden={hidden || undefined}
+  aria-hidden={hidden}
   aria-orientation={orientation}
   {...$$restProps}
 />

package/package/components/divider/divider.svelte.d.ts

@@ -8,6 +8,7 @@
 export default class Divider extends SvelteComponent<{
     [x: string]: any;
     class?: string;
+    hidden?: boolean;
     orientation?: "vertical" | "horizontal";
 }, {
     [evt: string]: CustomEvent<any>;
@@ -21,7 +22,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        orientation?: ('horizontal' | 'vertical');
+        hidden?: boolean | undefined;
+        orientation?: 'horizontal' | 'vertical';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/divider/spacer.svelte

@@ -4,18 +4,30 @@
 -->
 <script>
   /**
-   * CSS class name on the button.
+   * CSS class name on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
-  /** @type {boolean} */
+  /**
+   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
+   * @type {boolean | undefined}
+   */
+  export let hidden = undefined;
+  /**
+   * Whether to make the spacer flexible.
+   * @type {boolean}
+   */
   export let flex = false;
 </script>
 
-<div class="sui spacer {className}" class:flex {...$$restProps} />
+<div
+  class="sui spacer {className}"
+  class:flex
+  hidden={hidden || undefined}
+  aria-hidden={hidden}
+  {...$$restProps}
+/>
 
 <style>.spacer.flex {
   flex: auto;

package/package/components/divider/spacer.svelte.d.ts

@@ -5,6 +5,7 @@
 export default class Spacer extends SvelteComponent<{
     [x: string]: any;
     class?: string;
+    hidden?: boolean;
     flex?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -18,6 +19,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
+        hidden?: boolean | undefined;
         flex?: boolean;
     };
     events: {

package/package/components/drawer/drawer.svelte

@@ -113,9 +113,10 @@
     }
   };
 
-  // Call the function only when the `open` prop is changed
-  // @ts-ignore
-  $: toggleDialog(open);
+  $: {
+    void open;
+    toggleDialog();
+  }
 
   onMount(() => {
     dialog.remove();
@@ -149,7 +150,9 @@
     <div class="extra-control">
       {#if showClose === 'outside'}
         <Button
-          class="ghost iconic close"
+          variant="ghost"
+          iconic
+          class="close"
           on:click={() => {
             dialog.returnValue = 'close';
             open = false;
@@ -174,7 +177,9 @@
             {/if}
             {#if showClose === 'inside'}
               <Button
-                class="ghost iconic close"
+                variant="ghost"
+                iconic
+                class="close"
                 on:click={() => {
                   dialog.returnValue = 'close';
                   open = false;
@@ -232,6 +237,8 @@ dialog form {
   display: flex;
   flex-direction: column;
   border-radius: 4px;
+  max-width: 100vw;
+  max-height: 100vh;
   background-color: var(--sui-secondary-background-color-translucent);
   -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);

package/package/components/listbox/listbox.svelte

@@ -5,37 +5,67 @@
   @see https://w3c.github.io/aria/#listbox
   @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
 -->
-<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;
+  /**
+   * Whether to disable the widget. An alias of the `aria-readonly` attribute.
+   * @type {boolean}
+   */
+  export let readonly = false;
+  /**
+   * Whether to disable the widget. An alias of the `aria-required` attribute.
+   * @type {boolean}
+   */
+  export let required = false;
+  /**
+   * Whether to disable the widget. An alias of the `aria-invalid` attribute.
+   * @type {boolean}
+   */
+  export let invalid = false;
+  /**
+   * Whether to allow selecting more than one `<Option>`. An alias of the `aria-multiselectable`
+   * attribute.
+   * @type {boolean}
+   */
   export let multiple = false;
 </script>
 
 <div
   class="sui listbox {className}"
-  tabindex="0"
+  tabindex={disabled ? -1 : 0}
   role="listbox"
+  hidden={hidden || undefined}
+  aria-hidden={hidden}
+  aria-disabled={disabled}
+  aria-readonly={readonly}
+  aria-required={required}
+  aria-invalid={invalid}
   aria-multiselectable={multiple}
   {...$$restProps}
-  bind:this={element}
-  on:click
-  on:select
   use:activateGroup
+  on:click
+  on:change
 >
-  <slot />
+  <div class="inner" inert={disabled}>
+    <slot />
+  </div>
 </div>
 
 <style>[role=listbox] {
@@ -43,18 +73,19 @@
   flex-direction: column;
   margin: 0;
   border-width: 1px;
-  border-color: var(--sui-control-border-color);
-  border-radius: 4px;
+  border-color: var(--sui-listbox-border-color);
+  border-radius: var(--sui-listbox-border-radius);
   padding: 4px;
-  min-width: 160px;
-  color: var(--sui-control-foreground-color);
-  background-color: var(--sui-control-background-color);
+  min-width: var(--sui-listbox-min-width, calc(var(--sui-option-height) * 5));
+  color: var(--sui-listbox-foreground-color);
+  background-color: var(--sui-listbox-background-color);
   font-family: var(--sui-control-font-family);
   font-size: var(--sui-control-font-size);
   line-height: var(--sui-control-line-height);
 }
 [role=listbox] :global([role="separator"]) {
   margin: 4px;
+  background-color: var(--sui-control-border-color);
 }
 [role=listbox]:global(.tabs) {
   padding: 0;
@@ -74,5 +105,9 @@
   display: none;
 }
 [role=listbox]:global(.tabs) :global(.option button[aria-selected="true"]) {
-  border-color: var(--sui-primary-accent-color-lighter);
+  border-color: var(--sui-primary-accent-color-light);
+}
+
+.inner {
+  display: contents;
 }</style>

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

@@ -10,25 +10,20 @@
 export default class Listbox extends SvelteComponent<{
     [x: string]: any;
     class?: string;
+    invalid?: boolean;
+    disabled?: boolean;
     multiple?: boolean;
-    element?: HTMLElement;
+    required?: boolean;
+    hidden?: boolean;
+    readonly?: boolean;
 }, {
     click: MouseEvent;
-    select: Event;
+    change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
 }> {
-    /**accessor*/
-    set class(arg: string);
-    get class(): string;
-    /**accessor*/
-    set element(arg: HTMLElement);
-    get element(): HTMLElement;
-    /**accessor*/
-    set multiple(arg: boolean);
-    get multiple(): boolean;
 }
 export type ListboxProps = typeof __propDef.props;
 export type ListboxEvents = typeof __propDef.events;
@@ -38,12 +33,16 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
+        invalid?: boolean;
+        disabled?: boolean;
         multiple?: boolean;
-        element?: HTMLElement | null;
+        required?: boolean;
+        hidden?: boolean | undefined;
+        readonly?: boolean;
     };
     events: {
         click: MouseEvent;
-        select: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/listbox/option-group.svelte

@@ -7,16 +7,24 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/
 -->
 <script>
-  import { getRandomId } from '../util/util';
+  import { getRandomId } from '../../services/util';
 
   /**
-   * CSS class name on the group.
+   * 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;
   /**
    * The group’s label to be displayed above the child `<Option>`s.
    */
@@ -29,11 +37,16 @@
   {id}
   class="sui optgroup {className}"
   role="group"
+  hidden={hidden || undefined}
+  aria-hidden={hidden}
+  aria-disabled={disabled}
   aria-labelledby="{id}-label"
   {...$$restProps}
 >
   <div id="{id}-label" class="label" role="none">{label}</div>
-  <slot />
+  <div class="inner" inert={disabled}>
+    <slot />
+  </div>
 </div>
 
 <style>.optgroup:not(:first-child) {
@@ -44,4 +57,8 @@
   margin: 8px;
   color: var(--sui-secondary-foreground-color);
   font-size: var(--sui-font-size-small);
+}
+
+.inner {
+  display: contents;
 }</style>

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

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

package/package/components/listbox/option.svelte

@@ -10,19 +10,40 @@
   import Icon from '../icon/icon.svelte';
 
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
+  /**
+   * Whether to select the widget. An alias of the `aria-selected` attribute.
+   * @type {boolean}
+   */
+  export let selected = false;
+  /**
+   * 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 = '';
+  /**
+   * The `value` attribute on the `<button>` element.
+   * @type {string | undefined}
+   */
   export let value = undefined;
-  export let selected = false;
 
   /**
-   * @type {Button}
+   * Reference to the `Button` component.
+   * @type {Button | undefined}
    */
   let buttonComponent;
 
@@ -45,7 +66,7 @@
   });
 </script>
 
-<div class="sui option {className}">
+<div class="sui option {className}" hidden={hidden || undefined}>
   <Button
     bind:this={buttonComponent}
     tabindex="-1"
@@ -53,6 +74,8 @@
     aria-selected={selected}
     {label}
     {value}
+    {hidden}
+    {disabled}
     data-type={typeof value}
     {...$$restProps}
     on:click
@@ -60,6 +83,7 @@
     on:dragleave
     on:dragend
     on:drop
+    on:select
   >
     {#if selected}
       <Icon class="check" name="check" />
@@ -76,22 +100,25 @@
 .option:focus-visible {
   outline-width: 0 !important;
 }
-.option :global([role="option"]) {
+.option :global(button) {
   flex: none;
   display: flex;
   justify-content: space-between;
   gap: 4px;
-  border-radius: 4px;
-  padding: 0 8px 0 16px;
+  border-radius: var(--sui-option-border-radius);
+  padding: var(--sui-option-padding);
   width: 100%;
-  height: var(--sui-option-medium-height);
+  height: var(--sui-option-height);
   white-space: nowrap;
 }
 .option :global(.focused),
-.option :global([role="option"]:hover) {
+.option :global(button:hover) {
   color: var(--sui-highlight-foreground-color);
-  background-color: var(--sui-highlight-background-color);
+  background-color: var(--sui-hover-background-color);
+}
+.option :global(button:active) {
+  background-color: var(--sui-active-background-color);
 }
-.option :global([role="option"][aria-selected="true"]) :global(.icon) {
-  color: var(--sui-primary-accent-color-lighter);
+.option :global(button[aria-selected="true"]) :global(.icon) {
+  color: var(--sui-primary-accent-color-text);
 }</style>

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: {