@sveltia/ui 0.9.0 → 0.10.1

package/package/components/drawer/drawer.svelte

@@ -35,7 +35,7 @@
   export let position = 'right';
   /**
    * Width or height of the drawer.
-   * @type {'small' | 'medium' | 'large' | 'x-large'}
+   * @type {'small' | 'medium' | 'large' | 'x-large' | 'full'}
    */
   export let size = 'small';
   /**
@@ -97,15 +97,17 @@
             modal.close('close');
           }}
         >
-          <Icon slot="start-icon" name="close" />
+          <slot name="close-button" slot="start-icon">
+            <Icon name="close" />
+          </slot>
         </Button>
       {/if}
     </div>
     {#if title || showClose === 'inside' || $$slots.header || $$slots['header-extra']}
-      <div role="none" class="header">
-        {#if $$slots.header}
-          <slot name="header" />
-        {:else}
+      {#if $$slots.header}
+        <slot name="header" />
+      {:else}
+        <div role="none" class="header">
           <div role="none" class="title">
             {title}
           </div>
@@ -124,11 +126,13 @@
                 modal.close('close');
               }}
             >
-              <Icon slot="start-icon" name="close" />
+              <slot name="close-button" slot="start-icon">
+                <Icon name="close" />
+              </slot>
             </Button>
           {/if}
-        {/if}
-      </div>
+        </div>
+      {/if}
     {/if}
     <div role="none" class="main">
       <slot />
@@ -145,7 +149,6 @@
   position: absolute;
   display: flex;
   flex-direction: column;
-  border-radius: 4px;
   max-width: 100dvw;
   max-height: 100dvh;
   background-color: var(--sui-secondary-background-color-translucent);
@@ -169,6 +172,7 @@
 }
 .content.right {
   inset: 0 0 0 auto;
+  border-radius: var(--sui-drawer-right-content-border-radius, var(--sui-drawer-content-border-radius, 4px 0 0 4px));
 }
 .content.right .extra-control {
   inset: 0 100% auto auto;
@@ -178,6 +182,7 @@
 }
 .content.left {
   inset: 0 auto 0 0;
+  border-radius: var(--sui-drawer-left-content-border-radius, var(--sui-drawer-content-border-radius, 0 4px 4px 0));
 }
 .content.left .extra-control {
   inset: 0 auto auto 100%;
@@ -205,8 +210,14 @@
 .content.vertical.x-large {
   width: 1000px;
 }
+.content.vertical.full {
+  border-radius: 0 !important;
+  width: 100dvw;
+  max-width: none !important;
+}
 .content.top {
   inset: 0 0 auto 0;
+  border-radius: var(--sui-drawer-top-content-border-radius, var(--sui-drawer-content-border-radius, 0 0 4px 4px));
 }
 .content.top .extra-control {
   inset: 100% 0 auto auto;
@@ -216,6 +227,7 @@
 }
 .content.bottom {
   inset: auto 0 0 0;
+  border-radius: var(--sui-drawer-bottom-content-border-radius, var(--sui-drawer-content-border-radius, 4px 4px 0 0));
 }
 .content.bottom .extra-control {
   inset: auto 0 100% auto;
@@ -243,6 +255,11 @@
 .content.horizontal.x-large {
   height: 1000px;
 }
+.content.horizontal.full {
+  border-radius: 0 !important;
+  height: 100dvh;
+  max-height: none !important;
+}
 
 .header,
 .footer {
@@ -252,12 +269,13 @@
 }
 
 .header {
+  flex-direction: var(--sui-drawer-header-flex-direction, row);
   box-sizing: content-box;
-  margin: 0 16px;
-  border-width: 0 0 1px;
-  border-color: var(--sui-secondary-border-color);
-  padding: 16px 8px;
-  height: 32px;
+  margin: var(--sui-drawer-header-margin, 0 16px);
+  border-width: var(--sui-drawer-header-border-width, 0 0 1px);
+  border-color: var(--sui-drawer-header-border-color, var(--sui-secondary-border-color));
+  padding: var(--sui-drawer-header-padding, 16px 8px);
+  height: var(--sui-drawer-header-height, 32px);
 }
 .header .title {
   font-size: var(--sui-font-size-large);
@@ -270,6 +288,6 @@
 .main {
   flex: auto;
   overflow: auto;
-  padding: 24px;
+  padding: var(--sui-drawer-main-padding, 24px);
   white-space: normal;
 }</style>

package/package/components/drawer/drawer.svelte.d.ts

@@ -8,14 +8,14 @@
  */
 export default class Drawer extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    title?: string;
-    size?: "small" | "medium" | "large" | "x-large";
-    position?: "top" | "right" | "bottom" | "left";
-    open?: boolean;
-    lightDismiss?: boolean;
-    keepContent?: boolean;
-    showClose?: false | "inside" | "outside";
+    class?: string | undefined;
+    title?: string | undefined;
+    size?: "small" | "medium" | "large" | "x-large" | "full" | undefined;
+    position?: "top" | "right" | "bottom" | "left" | undefined;
+    open?: boolean | undefined;
+    lightDismiss?: boolean | undefined;
+    keepContent?: boolean | undefined;
+    showClose?: false | "inside" | "outside" | undefined;
 }, {
     opening: CustomEvent<any>;
     open: CustomEvent<any>;
@@ -26,6 +26,9 @@ export default class Drawer extends SvelteComponent<{
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
+    'close-button': {
+        slot: string;
+    };
     header: {};
     'header-extra': {};
     default: {};
@@ -39,14 +42,14 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        title?: string;
-        size?: 'small' | 'medium' | 'large' | 'x-large';
-        position?: 'top' | 'right' | 'bottom' | 'left';
-        open?: boolean;
-        lightDismiss?: boolean;
-        keepContent?: boolean;
-        showClose?: 'inside' | 'outside' | false;
+        class?: string | undefined;
+        title?: string | undefined;
+        size?: "small" | "medium" | "large" | "x-large" | "full" | undefined;
+        position?: "top" | "right" | "bottom" | "left" | undefined;
+        open?: boolean | undefined;
+        lightDismiss?: boolean | undefined;
+        keepContent?: boolean | undefined;
+        showClose?: false | "inside" | "outside" | undefined;
     };
     events: {
         opening: CustomEvent<any>;
@@ -59,6 +62,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'close-button': {
+            slot: string;
+        };
         header: {};
         'header-extra': {};
         default: {};

package/package/components/grid/grid-body.svelte.d.ts

@@ -8,8 +8,8 @@
  */
 export default class GridBody extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    label?: string;
+    class?: string | undefined;
+    label?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -23,8 +23,8 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        label?: string;
+        class?: string | undefined;
+        label?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/grid/grid-cell.svelte.d.ts

@@ -8,7 +8,7 @@
  */
 export default class GridCell extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
+    class?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -22,7 +22,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/grid/grid-col-header.svelte.d.ts

@@ -8,7 +8,7 @@
  */
 export default class GridColHeader extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
+    class?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -22,7 +22,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/grid/grid-foot.svelte.d.ts

@@ -8,7 +8,7 @@
  */
 export default class GridFoot extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
+    class?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -22,7 +22,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/grid/grid-head.svelte.d.ts

@@ -8,7 +8,7 @@
  */
 export default class GridHead extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
+    class?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -22,7 +22,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/grid/grid-row-header.svelte.d.ts

@@ -8,7 +8,7 @@
  */
 export default class GridRowHeader extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
+    class?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -22,7 +22,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/grid/grid-row.svelte

@@ -5,6 +5,8 @@
   @see https://w3c.github.io/aria/#row
 -->
 <script>
+  import { createEventDispatcher } from 'svelte';
+
   /**
    * The `class` attribute on the wrapper element.
    * @type {string}
@@ -16,6 +18,8 @@
    * @type {boolean}
    */
   export let selected = false;
+
+  const dispatch = createEventDispatcher();
 </script>
 
 <div
@@ -25,8 +29,12 @@
   aria-selected={selected}
   {...$$restProps}
   on:click
-  on:select
-  on:change
+  on:select={(/** @type {any} */ event) => {
+    dispatch('select', /** @type {CustomEvent} */ (event).detail);
+  }}
+  on:change={(/** @type {any} */ event) => {
+    dispatch('change', /** @type {CustomEvent} */ (event).detail);
+  }}
 >
   <slot />
 </div>

package/package/components/grid/grid-row.svelte.d.ts

@@ -8,12 +8,12 @@
  */
 export default class GridRow extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    selected?: boolean;
+    class?: string | undefined;
+    selected?: boolean | undefined;
 }, {
     click: MouseEvent;
-    select: Event;
-    change: Event;
+    select: CustomEvent<any>;
+    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -27,13 +27,13 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        selected?: boolean;
+        class?: string | undefined;
+        selected?: boolean | undefined;
     };
     events: {
         click: MouseEvent;
-        select: Event;
-        change: Event;
+        select: CustomEvent<any>;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/grid/grid.svelte

@@ -5,6 +5,7 @@
   @see https://w3c.github.io/aria/#grid
 -->
 <script>
+  import { createEventDispatcher } from 'svelte';
   import { activateGroup } from '../../services/group';
 
   /**
@@ -20,8 +21,10 @@
    */
   export let multiple = false;
 
-  /** @type {HTMLElement?} */
+  /** @type {HTMLElement | undefined} */
   export let element = undefined;
+
+  const dispatch = createEventDispatcher();
 </script>
 
 <div
@@ -31,7 +34,9 @@
   {...$$restProps}
   bind:this={element}
   use:activateGroup
-  on:change
+  on:change={(/** @type {CustomEvent} */ event) => {
+    dispatch('change', event.detail);
+  }}
 >
   <slot />
 </div>

package/package/components/grid/grid.svelte.d.ts

@@ -8,11 +8,11 @@
  */
 export default class Grid extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    multiple?: boolean;
-    element?: HTMLElement;
+    class?: string | undefined;
+    multiple?: boolean | undefined;
+    element?: HTMLElement | 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;
-        multiple?: boolean;
-        element?: HTMLElement | null;
+        class?: string | undefined;
+        multiple?: boolean | undefined;
+        element?: HTMLElement | undefined;
     };
     events: {
-        change: Event;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/icon/icon.svelte.d.ts

@@ -7,8 +7,8 @@
  */
 export default class Icon extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    name?: string;
+    class?: string | undefined;
+    name?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -20,8 +20,8 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        name?: string;
+        class?: string | undefined;
+        name?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/listbox/listbox.svelte

@@ -6,6 +6,7 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
 -->
 <script>
+  import { createEventDispatcher } from 'svelte';
   import { activateGroup } from '../../services/group';
 
   /**
@@ -45,6 +46,8 @@
    * @type {boolean}
    */
   export let multiple = false;
+
+  const dispatch = createEventDispatcher();
 </script>
 
 <div
@@ -61,7 +64,9 @@
   {...$$restProps}
   use:activateGroup
   on:click
-  on:change
+  on:change={(/** @type {CustomEvent} */ event) => {
+    dispatch('change', event.detail);
+  }}
 >
   <div role="none" class="inner" inert={disabled}>
     <slot />
@@ -72,10 +77,11 @@
   display: flex;
   flex-direction: column;
   margin: var(--sui-focus-ring-width);
-  border-width: 1px;
-  border-color: var(--sui-listbox-border-color);
-  border-radius: var(--sui-listbox-border-radius);
-  padding: 4px;
+  border-width: var(--sui-listbox-border-width, 1px);
+  border-style: var(--sui-listbox-border-style, solid);
+  border-color: var(--sui-listbox-border-width, var(--sui-secondary-border-color));
+  border-radius: var(--sui-listbox-border-radius, 4px);
+  padding: var(--sui-listbox-padding, 4px);
   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);

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

@@ -9,16 +9,16 @@
  */
 export default class Listbox extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    multiple?: boolean;
-    required?: boolean;
-    hidden?: boolean;
-    readonly?: boolean;
+    class?: string | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    multiple?: boolean | undefined;
+    required?: boolean | undefined;
+    hidden?: boolean | undefined;
+    readonly?: boolean | undefined;
 }, {
     click: MouseEvent;
-    change: Event;
+    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -32,17 +32,17 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        invalid?: boolean;
-        disabled?: boolean;
-        multiple?: boolean;
-        required?: boolean;
+        class?: string | undefined;
+        invalid?: boolean | undefined;
+        disabled?: boolean | undefined;
+        multiple?: boolean | undefined;
+        required?: boolean | undefined;
         hidden?: boolean | undefined;
-        readonly?: boolean;
+        readonly?: boolean | undefined;
     };
     events: {
         click: MouseEvent;
-        change: Event;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -10,10 +10,10 @@
  */
 export default class OptionGroup extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    label?: string;
-    disabled?: boolean;
-    hidden?: boolean;
+    class?: string | undefined;
+    label?: string | undefined;
+    disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -27,9 +27,9 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        label?: string;
-        disabled?: boolean;
+        class?: string | undefined;
+        label?: string | undefined;
+        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
     };
     events: {

package/package/components/listbox/option.svelte

@@ -60,11 +60,13 @@
     on:select
     on:change
     on:change={(event) => {
-      selected = /** @type {CustomEvent} */ (event).detail.selected;
+      selected = event.detail.selected;
     }}
   >
     {#if selected}
-      <Icon class="check" name="check" />
+      <slot name="check-icon">
+        <Icon class="check" name="check" />
+      </slot>
     {/if}
     <slot name="start-icon" slot="start-icon" />
     <slot />

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

@@ -8,23 +8,24 @@
  */
 export default class Option extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    label?: string;
-    disabled?: boolean;
-    value?: string;
-    hidden?: boolean;
-    selected?: boolean;
+    class?: string | undefined;
+    label?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | undefined;
+    hidden?: boolean | undefined;
+    selected?: boolean | undefined;
 }, {
     click: MouseEvent;
     dragover: DragEvent;
     dragleave: DragEvent;
     dragend: DragEvent;
     drop: DragEvent;
-    select: Event;
-    change: Event;
+    select: CustomEvent<any>;
+    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
+    'check-icon': {};
     'start-icon': {
         slot: string;
     };
@@ -41,12 +42,12 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
         label?: string | undefined;
-        disabled?: boolean;
+        disabled?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
-        selected?: boolean;
+        selected?: boolean | undefined;
     };
     events: {
         click: MouseEvent;
@@ -54,12 +55,13 @@ declare const __propDef: {
         dragleave: DragEvent;
         dragend: DragEvent;
         drop: DragEvent;
-        select: Event;
-        change: Event;
+        select: CustomEvent<any>;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'check-icon': {};
         'start-icon': {
             slot: string;
         };