@sveltia/ui 0.6.5 → 0.7.0

package/package/components/disclosure/disclosure.svelte

@@ -4,47 +4,70 @@
   @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
   @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
 -->
+<svelte:options accessors={true} />
+
 <script>
+  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
-  import { getRandomId } from '../util/util';
 
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
-  export let label = '';
-
+  /**
+   * 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 show the content. An alias of the `aria-expanded` attribute.
+   * @type {boolean}
+   */
   export let expanded = false;
+  /**
+   * Text label displayed next to the expander.
+   * @type {string}
+   */
+  export let label = '';
 
   const id = getRandomId('disclosure');
 </script>
 
 <div
-  class="sui disclosure {className}"
   {id}
+  class="sui disclosure {className}"
   role="group"
+  hidden={hidden || undefined}
+  aria-hidden={hidden}
+  aria-disabled={disabled}
   aria-labelledby="{id}-header"
   {...$$restProps}
 >
-  <Button
-    class="header"
-    id="{id}-header"
-    aria-controls="{id}-content"
-    aria-expanded={expanded}
-    on:click={() => {
-      expanded = !expanded;
-    }}
-  >
-    <Icon name="expand_more" />
-    {label}
-  </Button>
-  <div class="content" id="{id}-content" hidden={!expanded ? true : undefined}>
-    <slot />
+  <div class="inner" inert={disabled}>
+    <Button
+      class="header"
+      id="{id}-header"
+      {disabled}
+      aria-controls="{id}-content"
+      aria-expanded={expanded}
+      on:click={() => {
+        expanded = !expanded;
+      }}
+    >
+      <Icon name="expand_more" />
+      {label}
+    </Button>
+    <div class="content" id="{id}-content" hidden={!expanded}>
+      <slot />
+    </div>
   </div>
 </div>
 
@@ -60,6 +83,10 @@
   transform: rotate(-90deg);
 }
 
+.inner {
+  display: contents;
+}
+
 .content[hidden] {
   display: block;
   overflow: hidden;

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,13 +150,15 @@
     <div class="extra-control">
       {#if showClose === 'outside'}
         <Button
-          class="ghost iconic close"
+          variant="ghost"
+          iconic
+          class="close"
           on:click={() => {
             dialog.returnValue = 'close';
             open = false;
           }}
         >
-          <Icon slot="start-icon" name="close" label={$_('_sui._.close')} />
+          <Icon slot="start-icon" name="close" label={$_('_sui.close')} />
         </Button>
       {/if}
     </div>
@@ -174,13 +177,15 @@
             {/if}
             {#if showClose === 'inside'}
               <Button
-                class="ghost iconic close"
+                variant="ghost"
+                iconic
+                class="close"
                 on:click={() => {
                   dialog.returnValue = 'close';
                   open = false;
                 }}
               >
-                <Icon slot="start-icon" name="close" label={$_('_sui._.close')} />
+                <Icon slot="start-icon" name="close" label={$_('_sui.close')} />
               </Button>
             {/if}
           {/if}
@@ -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/drawer/drawer.svelte.d.ts

@@ -10,8 +10,8 @@ export default class Drawer extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     title?: string;
-    position?: "top" | "right" | "bottom" | "left";
     size?: "small" | "medium" | "large" | "x-large";
+    position?: "top" | "right" | "bottom" | "left";
     open?: boolean;
     showClose?: false | "inside" | "outside";
     closeOnBackdropClick?: boolean;
@@ -38,8 +38,8 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         title?: string;
-        position?: ('top' | 'right' | 'bottom' | 'left');
         size?: ('small' | 'medium' | 'large' | 'x-large');
+        position?: ('top' | 'right' | 'bottom' | 'left');
         open?: boolean;
         showClose?: ('inside' | 'outside' | false);
         closeOnBackdropClick?: boolean;

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>