@sveltia/ui 0.6.6 → 0.7.0

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

@@ -9,9 +9,17 @@
 export default class SelectButton extends SvelteComponent<{
     [x: string]: any;
     class?: string;
+    label?: string;
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    value?: string;
+    hidden?: boolean;
+    variant?: "link" | "primary" | "secondary" | "tertiary" | "ghost";
+    iconic?: boolean;
     selected?: boolean;
 }, {
     click: MouseEvent;
+    select: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -32,10 +40,18 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
+        label?: string;
+        disabled?: boolean;
+        size?: 'small' | 'medium' | 'large';
+        value?: string | undefined;
+        hidden?: boolean | undefined;
+        variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link' | undefined;
+        iconic?: boolean;
         selected?: boolean;
     };
     events: {
         click: MouseEvent;
+        select: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/calendar/calendar.svelte

@@ -12,7 +12,9 @@
   /** @type {string?} */
   export let value = undefined;
 
+  /** @type {{ day: Date }[]} */
   const dayList = [];
+  /** @type {{ day: Date }[][]} */
   const weeks = [];
   const now = new Date();
 
@@ -50,7 +52,7 @@
   <input type="hidden" bind:value />
   <div class="header">
     <Button
-      class="ghost"
+      variant="ghost"
       label={firstDay.toLocaleDateString('en', { year: 'numeric', month: 'short' })}
       aria-haspopup="dialog"
     >
@@ -214,11 +216,11 @@
   border-radius: 50%;
 }
 .grid div :global(button):hover {
-  background-color: var(--sui-highlight-background-color);
+  background-color: var(--sui-hover-background-color);
 }
 .grid div :global(button):focus {
   border-width: 1px;
-  border-color: var(--sui-primary-accent-color-lighter);
+  border-color: var(--sui-primary-accent-color-light);
 }
 
 .footer :global(button) {

package/package/components/checkbox/checkbox-group.svelte

@@ -4,30 +4,39 @@
 -->
 <script>
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
   /**
-   * The `aria-label` attribute on the button element.
-   * @type {string}
+   * 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;
+  /**
+   * Orientation of the widget.
+   * @type {('horizontal'|'vertical')}
    */
-  export let ariaLabel = '';
-
-  /** @type {('horizontal'|'vertical')} */
   export let orientation = 'horizontal';
 </script>
 
 <div
   class="sui checkbox-group {className} {orientation}"
+  hidden={hidden || undefined}
   role="group"
-  aria-label={ariaLabel}
+  aria-hidden={hidden}
+  aria-disabled={disabled}
   {...$$restProps}
 >
-  <slot />
+  <div class="inner" inert={disabled}>
+    <slot />
+  </div>
 </div>
 
 <style>.checkbox-group {
@@ -40,4 +49,13 @@
 .checkbox-group.vertical {
   gap: 8px;
   flex-direction: column;
+}
+@media (pointer: coarse) {
+  .checkbox-group.vertical {
+    gap: 16px;
+  }
+}
+
+.inner {
+  display: contents;
 }</style>

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

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

package/package/components/checkbox/checkbox.svelte

@@ -7,51 +7,81 @@
 -->
 <script>
   import { createEventDispatcher } from 'svelte';
+  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 };
-
-  /** @type {string} */
-  export let name = '';
-
-  /** @type {string?} */
-  export let label = undefined;
-
-  /** @type {string?} */
+  /**
+   * The `name` attribute on the `<button>` element.
+   * @type {string | undefined}
+   */
+  export let name = undefined;
+  /**
+   * The `value` attribute on the `<button>` element.
+   * @type {string | undefined}
+   */
   export let value = undefined;
-
-  /** @type {(boolean | string | undefined)} */
-  export let checked = false;
-
-  /** @type {boolean} */
-  export let indeterminate = false;
-
-  /** @type {boolean} */
+  /**
+   * 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 check the widget. An alias of the `aria-checked` attribute.
+   * @type {boolean | 'mixed'}
+   */
+  export let checked = false;
+  /**
+   * Text label displayed next to the checkbox.
+   * @type {string | undefined}
+   */
+  export let label = undefined;
 
   const dispatch = createEventDispatcher();
   const id = getRandomId('checkbox');
-  /** @type {Button} */
-  let buttonComponent;
-</script>
 
-{#if name && value && checked && !indeterminate}
-  <input type="hidden" {name} {value} />
-{/if}
+  /**
+   * Reference to the `Button` component.
+   * @type {Button | undefined}
+   */
+  let buttonComponent = undefined;
 
-<span
+  $: ariaLabel = $$restProps['aria-label'];
+  $: indeterminate = checked === 'mixed';
+</script>
+
+<div
   class="sui checkbox {className}"
   class:checked
   class:indeterminate
   class:disabled
+  hidden={hidden || undefined}
   role="none"
   {...$$restProps}
   on:click|preventDefault|stopPropagation={(event) => {
@@ -60,35 +90,40 @@
     }
   }}
 >
-  <Button
-    {id}
-    {disabled}
-    {name}
-    {value}
-    role="checkbox"
-    aria-checked={indeterminate ? 'mixed' : checked}
-    aria-labelledby="{id}-label"
-    bind:this={buttonComponent}
-    on:click={(event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      checked = indeterminate ? true : !checked;
-      indeterminate = false;
-      dispatch('change', { checked });
-    }}
-  >
-    <Icon slot="start-icon" name={indeterminate ? 'remove' : 'check'} />
-  </Button>
-  {#if $$slots.default || label}
-    <label id="{id}-label">
-      {#if $$slots.default}
-        <slot />
-      {:else}
-        {label}
-      {/if}
-    </label>
-  {/if}
-</span>
+  <div class="inner" inert={disabled}>
+    <Button
+      {id}
+      {name}
+      {value}
+      role="checkbox"
+      {hidden}
+      {disabled}
+      {readonly}
+      {required}
+      {invalid}
+      aria-checked={checked}
+      aria-label={ariaLabel || undefined}
+      aria-labelledby={ariaLabel ? undefined : '{id}-label'}
+      bind:this={buttonComponent}
+      on:click={(event) => {
+        event.stopPropagation();
+        checked = indeterminate ? true : !checked;
+        dispatch('change', { checked });
+      }}
+    >
+      <Icon slot="start-icon" name={indeterminate ? 'remove' : 'check'} />
+    </Button>
+    {#if $$slots.default || label}
+      <label id="{id}-label">
+        {#if $$slots.default}
+          <slot />
+        {:else}
+          {label}
+        {/if}
+      </label>
+    {/if}
+  </div>
+</div>
 
 <style>.checkbox {
   display: inline-flex;
@@ -102,39 +137,47 @@
   -webkit-user-select: none;
   user-select: none;
 }
-.checkbox.disabled {
-  cursor: default;
+.checkbox:hover :global(button) {
+  background-color: var(--sui-hover-background-color);
+}
+.checkbox:hover :global(button[aria-checked="true"]) {
+  background-color: var(--sui-primary-accent-color-light);
 }
-.checkbox.disabled label {
-  color: var(--sui-disabled-foreground-color);
+.checkbox:active :global(button) {
+  background-color: var(--sui-active-background-color);
+}
+.checkbox:active :global(button[aria-checked="true"]) {
+  background-color: var(--sui-primary-accent-color-dark);
 }
 .checkbox :global(button) {
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  border-width: 2px;
+  border-width: 1.5px;
   border-color: var(--sui-checkbox-border-color);
-  border-radius: 4px;
-  width: 20px;
-  height: 20px;
-  color: var(--sui-primary-accent-color-lighter);
+  border-radius: var(--sui-checkbox-border-radius);
+  padding: 0;
+  width: var(--sui-checkbox-height);
+  height: var(--sui-checkbox-height);
+  color: var(--sui-primary-accent-text-color);
   background-color: var(--sui-checkbox-background-color);
   transition: all 200ms;
 }
 .checkbox :global(button) :global(.icon) {
-  font-size: 20px;
+  font-size: calc(var(--sui-checkbox-height) - 4px);
 }
 .checkbox :global(button[aria-checked="true"]) {
-  border-color: var(--sui-primary-accent-color-lighter);
-  color: var(--sui-primary-accent-color-foreground);
-  background-color: var(--sui-primary-accent-color-lighter);
-}
-.checkbox :global(button[aria-checked="mixed"]) {
-  color: var(--sui-checkbox-border-color);
+  border-color: var(--sui-primary-accent-color);
+  color: var(--sui-primary-accent-color-inverted);
+  background-color: var(--sui-primary-accent-color);
 }
 .checkbox :global(button[aria-checked="false"]) {
   color: transparent;
 }
 .checkbox label {
   cursor: inherit;
+}
+
+.inner {
+  display: contents;
 }</style>

package/package/components/checkbox/checkbox.svelte.d.ts

@@ -12,10 +12,13 @@ export default class Checkbox extends SvelteComponent<{
     class?: string;
     name?: string;
     label?: string;
-    checked?: string | boolean;
+    invalid?: boolean;
+    checked?: boolean | "mixed";
     disabled?: boolean;
-    indeterminate?: boolean;
+    required?: boolean;
     value?: string;
+    hidden?: boolean;
+    readonly?: boolean;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -32,12 +35,15 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        name?: string;
-        label?: string | null;
-        checked?: (boolean | string | undefined);
+        name?: string | undefined;
+        label?: string | undefined;
+        invalid?: boolean;
+        checked?: boolean | 'mixed';
         disabled?: boolean;
-        indeterminate?: boolean;
-        value?: string | null;
+        required?: boolean;
+        value?: string | undefined;
+        hidden?: boolean | undefined;
+        readonly?: boolean;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/dialog/dialog.svelte

@@ -79,16 +79,6 @@
   const closeDialog = async () => {
     showDialog = false;
 
-    if (dialog.returnValue === 'ok') {
-      dispatch('ok');
-    }
-
-    if (dialog.returnValue === 'cancel') {
-      dispatch('cancel');
-    }
-
-    dispatch('close', dialog.returnValue);
-
     await new Promise((resolve) => {
       form.addEventListener('transitionend', () => resolve(), { once: true });
     });
@@ -96,6 +86,12 @@
     showContent = false;
     dialog?.close();
     dialog?.remove();
+
+    if (['ok', 'cancel'].includes(dialog?.returnValue)) {
+      dispatch(dialog?.returnValue);
+    }
+
+    dispatch('close', dialog?.returnValue);
   };
 
   /**
@@ -111,9 +107,10 @@
     }
   };
 
-  // Call the function only when the `open` prop is changed
-  // @ts-ignore
-  $: toggleDialog(open);
+  $: {
+    void open;
+    toggleDialog();
+  }
 
   onMount(() => {
     dialog.remove();
@@ -131,6 +128,7 @@
   bind:this={dialog}
   class="sui dialog {className} {size}"
   class:open={showDialog}
+  aria-label={title}
   {...$$restProps}
   on:click={({ target }) => {
     if (closeOnBackdropClick && /** @type {HTMLElement?} */ (target)?.matches('dialog')) {
@@ -159,7 +157,8 @@
             {/if}
             {#if showClose}
               <Button
-                class="ghost iconic"
+                variant="ghost"
+                iconic
                 on:click={() => {
                   dialog.returnValue = 'close';
                   open = false;
@@ -185,7 +184,7 @@
             <Spacer flex={true} />
             {#if showOk}
               <Button
-                class="primary"
+                variant="primary"
                 label={okLabel || $_('_sui.ok')}
                 disabled={okDisabled}
                 on:click={() => {
@@ -196,7 +195,7 @@
             {/if}
             {#if showCancel}
               <Button
-                class="secondary"
+                variant="secondary"
                 label={cancelLabel || $_('_sui.cancel')}
                 disabled={cancelDisabled}
                 on:click={() => {
@@ -247,6 +246,7 @@ dialog form {
   display: flex;
   flex-direction: column;
   border-radius: 4px;
+  max-width: calc(100vw - 32px);
   background-color: var(--sui-secondary-background-color-translucent);
   -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);
@@ -258,18 +258,38 @@ dialog.small form {
   width: 400px;
   max-height: 400px;
 }
+@media (max-height: 400px) {
+  dialog.small form {
+    max-height: calc(100vh - 32px);
+  }
+}
 dialog.medium form {
   width: 600px;
   max-height: 600px;
 }
+@media (max-height: 600px) {
+  dialog.medium form {
+    max-height: calc(100vh - 32px);
+  }
+}
 dialog.large form {
   width: 800px;
   max-height: 800px;
 }
+@media (max-height: 800px) {
+  dialog.large form {
+    max-height: calc(100vh - 32px);
+  }
+}
 dialog.x-large form {
   width: 1000px;
   max-height: 1000px;
 }
+@media (max-height: 1000px) {
+  dialog.x-large form {
+    max-height: calc(100vh - 32px);
+  }
+}
 
 .header,
 .footer {

package/package/components/dialog/dialog.svelte.d.ts

@@ -23,8 +23,6 @@ export default class Dialog extends SvelteComponent<{
     closeOnBackdropClick?: boolean;
 }, {
     submit: SubmitEvent;
-    ok: CustomEvent<any>;
-    cancel: CustomEvent<any>;
     close: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
@@ -59,8 +57,6 @@ declare const __propDef: {
     };
     events: {
         submit: SubmitEvent;
-        ok: CustomEvent<any>;
-        cancel: CustomEvent<any>;
         close: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

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;