@sveltia/ui 0.9.0 → 0.10.1

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

@@ -9,13 +9,14 @@
  */
 export default class SplitButton extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    label?: string;
-    disabled?: boolean;
-    size?: "small" | "medium" | "large";
-    hidden?: boolean;
-    variant?: "primary" | "secondary" | "tertiary" | "ghost";
-    popupPosition?: PopupPosition;
+    class?: string | undefined;
+    label?: string | undefined;
+    disabled?: boolean | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    hidden?: boolean | undefined;
+    variant?: "primary" | "secondary" | "tertiary" | "ghost" | undefined;
+    popupPosition?: PopupPosition | undefined;
+    showPopupBackdrop?: boolean | undefined;
 }, {
     click: MouseEvent;
 } & {
@@ -24,6 +25,9 @@ export default class SplitButton extends SvelteComponent<{
     'start-icon': {
         slot: string;
     };
+    'chevron-icon': {
+        slot: string;
+    };
     popup: {
         slot: string;
     };
@@ -36,13 +40,14 @@ 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;
         size?: 'small' | 'medium' | 'large' | undefined;
         hidden?: boolean | undefined;
         variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | undefined;
-        popupPosition?: PopupPosition;
+        popupPosition?: PopupPosition | undefined;
+        showPopupBackdrop?: boolean | undefined;
     };
     events: {
         click: MouseEvent;
@@ -53,6 +58,9 @@ declare const __propDef: {
         'start-icon': {
             slot: string;
         };
+        'chevron-icon': {
+            slot: string;
+        };
         popup: {
             slot: string;
         };

package/package/components/calendar/calendar.svelte

@@ -9,7 +9,7 @@
   import Spacer from '../divider/spacer.svelte';
   import Icon from '../icon/icon.svelte';
 
-  /** @type {string?} */
+  /** @type {string | undefined} */
   export let value = undefined;
 
   /** @type {{ day: Date }[]} */
@@ -23,7 +23,7 @@
   $: firstDay = new Date(firstDayOfMonth);
 
   /**
-   *
+   * Populate {@link weeks} as per the current {@link firstDay}.
    */
   const getWeeks = () => {
     const cursor = new Date(firstDay);

package/package/components/calendar/calendar.svelte.d.ts

@@ -3,7 +3,7 @@
 /** @typedef {typeof __propDef.slots}  CalendarSlots */
 /** A calendar (date picker) widget. */
 export default class Calendar extends SvelteComponent<{
-    value?: string;
+    value?: string | undefined;
 }, {
     click: MouseEvent;
 } & {
@@ -16,7 +16,7 @@ export type CalendarSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        value?: string | null;
+        value?: string | undefined;
     };
     events: {
         click: MouseEvent;

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

@@ -4,10 +4,10 @@
 /** The layout container of `<Checkbox>`es. */
 export default class CheckboxGroup extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    disabled?: boolean;
-    hidden?: boolean;
-    orientation?: "vertical" | "horizontal";
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
+    orientation?: "vertical" | "horizontal" | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -21,10 +21,10 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        disabled?: boolean;
+        class?: string | undefined;
+        disabled?: boolean | undefined;
         hidden?: boolean | undefined;
-        orientation?: ('horizontal' | 'vertical');
+        orientation?: "vertical" | "horizontal" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/checkbox/checkbox.svelte

@@ -86,7 +86,7 @@
   hidden={hidden || undefined}
   on:click|preventDefault|stopPropagation={(event) => {
     if (!(/** @type {HTMLElement} */ (event.target).matches('button'))) {
-      buttonComponent.element.click();
+      buttonComponent?.element?.click();
     }
   }}
 >
@@ -116,7 +116,9 @@
         }
       }}
     >
-      <Icon slot="start-icon" name={indeterminate ? 'remove' : 'check'} />
+      <slot name="check-icon" slot="start-icon">
+        <Icon name={indeterminate ? 'remove' : 'check'} />
+      </slot>
     </Button>
     {#if $$slots.default || label}
       <label id="{id}-label">
@@ -160,7 +162,7 @@
   justify-content: center;
   overflow: hidden;
   margin: 0 !important;
-  border-width: 1.5px;
+  border-width: var(--sui-checkbox-border-width, 1.5px);
   border-color: var(--sui-checkbox-border-color);
   border-radius: var(--sui-checkbox-border-radius);
   padding: 0;
@@ -174,9 +176,9 @@
   font-size: calc(var(--sui-checkbox-height) - 2px);
 }
 .checkbox :global(button[aria-checked="true"]) {
-  border-color: var(--sui-primary-accent-color);
-  color: var(--sui-primary-accent-color-inverted);
-  background-color: var(--sui-primary-accent-color);
+  border-color: var(--sui-checkbox-border-color-checked, var(--sui-primary-accent-color));
+  color: var(--sui-checkbox-foreground-color-checked, var(--sui-primary-accent-color-inverted));
+  background-color: var(--sui-checkbox-background-color-checked, var(--sui-primary-accent-color));
 }
 .checkbox :global(button[aria-checked="false"]) {
   color: transparent;

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

@@ -9,21 +9,24 @@
  */
 export default class Checkbox extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    name?: string;
-    invalid?: boolean;
-    label?: string;
-    checked?: boolean | "mixed";
-    disabled?: boolean;
-    required?: boolean;
-    value?: string;
-    hidden?: boolean;
-    readonly?: boolean;
+    class?: string | undefined;
+    name?: string | undefined;
+    invalid?: boolean | undefined;
+    label?: string | undefined;
+    checked?: boolean | "mixed" | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    value?: string | undefined;
+    hidden?: boolean | undefined;
+    readonly?: boolean | undefined;
 }, {
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
+    'check-icon': {
+        slot: string;
+    };
     default: {};
 }> {
 }
@@ -34,16 +37,16 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
         name?: string | undefined;
-        invalid?: boolean;
+        invalid?: boolean | undefined;
         label?: string | undefined;
-        checked?: boolean | 'mixed';
-        disabled?: boolean;
-        required?: boolean;
+        checked?: boolean | "mixed" | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
-        readonly?: boolean;
+        readonly?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;
@@ -51,6 +54,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'check-icon': {
+            slot: string;
+        };
         default: {};
     };
 };

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

@@ -10,9 +10,9 @@
 export default class AlertDialog extends SvelteComponent<{
     [x: string]: any;
     title: string;
-    class?: string;
-    open?: boolean;
-    okLabel?: string;
+    class?: string | undefined;
+    open?: boolean | undefined;
+    okLabel?: string | undefined;
 }, {
     opening: CustomEvent<any>;
     open: CustomEvent<any>;
@@ -34,9 +34,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         title: string;
-        class?: string;
-        open?: boolean;
-        okLabel?: string;
+        class?: string | undefined;
+        open?: boolean | undefined;
+        okLabel?: string | undefined;
     };
     events: {
         opening: CustomEvent<any>;

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

@@ -10,10 +10,10 @@
 export default class ConfirmationDialog extends SvelteComponent<{
     [x: string]: any;
     title: string;
-    class?: string;
-    open?: boolean;
-    okLabel?: string;
-    cancelLabel?: string;
+    class?: string | undefined;
+    open?: boolean | undefined;
+    okLabel?: string | undefined;
+    cancelLabel?: string | undefined;
 }, {
     opening: CustomEvent<any>;
     open: CustomEvent<any>;
@@ -35,10 +35,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         title: string;
-        class?: string;
-        open?: boolean;
-        okLabel?: string;
-        cancelLabel?: string;
+        class?: string | undefined;
+        open?: boolean | undefined;
+        okLabel?: string | undefined;
+        cancelLabel?: string | undefined;
     };
     events: {
         opening: CustomEvent<any>;

package/package/components/dialog/dialog.svelte

@@ -85,7 +85,7 @@
    */
   const id = getRandomId('dialog');
   /**
-   * a reference to the modal component.
+   * A reference to the modal component.
    * @type {Modal}
    */
   let modal;
@@ -133,7 +133,9 @@
                 modal.close('close');
               }}
             >
-              <Icon slot="start-icon" name="close" />
+              <slot name="close-icon" slot="start-icon">
+                <Icon name="close" />
+              </slot>
             </Button>
           {/if}
         {/if}
@@ -181,12 +183,12 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  border-radius: 4px;
-  max-width: calc(100dvw - 32px);
-  background-color: var(--sui-secondary-background-color-translucent);
-  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
-  -webkit-backdrop-filter: blur(16px);
-  backdrop-filter: blur(16px);
+  border-radius: var(--sui-dialog-content-border-radius, 4px);
+  max-width: calc(100dvw - var(--sui-dialog-content-margin, 16px) * 2);
+  background-color: var(--sui-dialog-content-background-color, var(--sui-secondary-background-color-translucent));
+  box-shadow: var(--sui-dialog-content-box-shadow, 0 8px 16px var(--sui-popup-shadow-color));
+  -webkit-backdrop-filter: var(--sui-dialog-content-backdrop-filter, blur(16px));
+  backdrop-filter: var(--sui-dialog-content-backdrop-filter, blur(16px));
   transition-property: transform;
 }
 :global(dialog.open) .content {
@@ -243,23 +245,23 @@
 
 .header {
   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-dialog-header-margin, 0 16px);
+  border-width: var(--sui-dialog-header-border-width, 0 0 1px);
+  border-color: var(--sui-dialog-header-border-color, var(--sui-secondary-border-color));
+  padding: var(--sui-dialog-header-padding, 16px 8px);
+  height: var(--sui-dialog-header-height, 32px);
 }
 .header .title {
   font-size: var(--sui-font-size-large);
 }
 
 .footer {
-  margin: 0 24px 24px;
+  margin: var(--sui-dialog-footer-margin, 0 24px 24px);
 }
 
 .body {
   overflow: auto;
-  margin: 24px 24px;
+  margin: var(--sui-dialog-body-margin, 24px 24px);
   white-space: normal;
   line-height: var(--sui-line-height-compact);
 }</style>

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

@@ -9,18 +9,18 @@
 export default class Dialog extends SvelteComponent<{
     [x: string]: any;
     title: string;
-    class?: string;
-    size?: "small" | "medium" | "large" | "x-large";
-    role?: "dialog" | "alertdialog";
-    open?: boolean;
-    lightDismiss?: boolean;
-    showClose?: boolean;
-    showOk?: boolean;
-    okLabel?: string;
-    okDisabled?: boolean;
-    showCancel?: boolean;
-    cancelLabel?: string;
-    cancelDisabled?: boolean;
+    class?: string | undefined;
+    size?: "small" | "medium" | "large" | "x-large" | undefined;
+    role?: "dialog" | "alertdialog" | undefined;
+    open?: boolean | undefined;
+    lightDismiss?: boolean | undefined;
+    showClose?: boolean | undefined;
+    showOk?: boolean | undefined;
+    okLabel?: string | undefined;
+    okDisabled?: boolean | undefined;
+    showCancel?: boolean | undefined;
+    cancelLabel?: string | undefined;
+    cancelDisabled?: boolean | undefined;
 }, {
     opening: CustomEvent<any>;
     open: CustomEvent<any>;
@@ -33,6 +33,9 @@ export default class Dialog extends SvelteComponent<{
 }, {
     header: {};
     'header-extra': {};
+    'close-icon': {
+        slot: string;
+    };
     default: {};
     footer: {};
     'footer-extra': {};
@@ -46,18 +49,18 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         title: string;
-        class?: string;
-        size?: ('small' | 'medium' | 'large' | 'x-large');
-        role?: 'dialog' | 'alertdialog';
-        open?: boolean;
-        lightDismiss?: boolean;
-        showClose?: boolean;
-        showOk?: boolean;
-        okLabel?: string;
-        okDisabled?: boolean;
-        showCancel?: boolean;
-        cancelLabel?: string;
-        cancelDisabled?: boolean;
+        class?: string | undefined;
+        size?: "small" | "medium" | "large" | "x-large" | undefined;
+        role?: "dialog" | "alertdialog" | undefined;
+        open?: boolean | undefined;
+        lightDismiss?: boolean | undefined;
+        showClose?: boolean | undefined;
+        showOk?: boolean | undefined;
+        okLabel?: string | undefined;
+        okDisabled?: boolean | undefined;
+        showCancel?: boolean | undefined;
+        cancelLabel?: string | undefined;
+        cancelDisabled?: boolean | undefined;
     };
     events: {
         opening: CustomEvent<any>;
@@ -72,6 +75,9 @@ declare const __propDef: {
     slots: {
         header: {};
         'header-extra': {};
+        'close-icon': {
+            slot: string;
+        };
         default: {};
         footer: {};
         'footer-extra': {};

package/package/components/dialog/prompt-dialog.svelte

@@ -42,7 +42,7 @@
    */
   export let value = '';
   /**
-   * Extra attributes for the `<TextInput>`
+   * Extra attributes for the `<TextInput>`.
    * @type {object}
    */
   export let textboxAttrs = {};

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

@@ -11,12 +11,12 @@
 export default class PromptDialog extends SvelteComponent<{
     [x: string]: any;
     title: string;
-    class?: string;
-    value?: string;
-    open?: boolean;
-    okLabel?: string;
-    cancelLabel?: string;
-    textboxAttrs?: object;
+    class?: string | undefined;
+    value?: string | undefined;
+    open?: boolean | undefined;
+    okLabel?: string | undefined;
+    cancelLabel?: string | undefined;
+    textboxAttrs?: object | undefined;
 }, {
     opening: CustomEvent<any>;
     open: CustomEvent<any>;
@@ -43,12 +43,12 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         title: string;
-        class?: string;
-        value?: string;
-        open?: boolean;
-        okLabel?: string;
-        cancelLabel?: string;
-        textboxAttrs?: object;
+        class?: string | undefined;
+        value?: string | undefined;
+        open?: boolean | undefined;
+        okLabel?: string | undefined;
+        cancelLabel?: string | undefined;
+        textboxAttrs?: object | undefined;
     };
     events: {
         opening: CustomEvent<any>;

package/package/components/disclosure/disclosure.svelte

@@ -7,6 +7,7 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { createEventDispatcher } from 'svelte';
   import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
@@ -38,6 +39,7 @@
    */
   export let label = '';
 
+  const dispatch = createEventDispatcher();
   const id = getRandomId('disclosure');
 </script>
 
@@ -61,9 +63,12 @@
       aria-expanded={expanded}
       on:click={() => {
         expanded = !expanded;
+        dispatch('change', { expanded });
       }}
     >
-      <Icon name="expand_more" />
+      <slot name="chevron-icon" slot="start-icon">
+        <Icon name="expand_more" />
+      </slot>
       {label}
     </Button>
     <div class="content" id="{id}-content" hidden={!expanded}>

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

@@ -8,31 +8,36 @@
  */
 export default class Disclosure extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    label?: string;
-    disabled?: boolean;
-    hidden?: boolean;
-    expanded?: boolean;
+    class?: string | undefined;
+    label?: string | undefined;
+    disabled?: boolean | undefined;
+    hidden?: boolean | undefined;
+    expanded?: boolean | undefined;
 }, {
+    change: CustomEvent<any>;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {
+    'chevron-icon': {
+        slot: string;
+    };
     default: {};
 }> {
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: string | undefined);
+    get class(): string | undefined;
     /**accessor*/
-    set hidden(arg: boolean);
-    get hidden(): boolean;
+    set hidden(arg: boolean | undefined);
+    get hidden(): boolean | undefined;
     /**accessor*/
-    set disabled(arg: boolean);
-    get disabled(): boolean;
+    set disabled(arg: boolean | undefined);
+    get disabled(): boolean | undefined;
     /**accessor*/
-    set expanded(arg: boolean);
-    get expanded(): boolean;
+    set expanded(arg: boolean | undefined);
+    get expanded(): boolean | undefined;
     /**accessor*/
-    set label(arg: string);
-    get label(): string;
+    set label(arg: string | undefined);
+    get label(): string | undefined;
 }
 export type DisclosureProps = typeof __propDef.props;
 export type DisclosureEvents = typeof __propDef.events;
@@ -41,16 +46,21 @@ 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;
-        expanded?: boolean;
+        expanded?: boolean | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'chevron-icon': {
+            slot: string;
+        };
         default: {};
     };
 };

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

@@ -7,9 +7,9 @@
  */
 export default class Divider extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    hidden?: boolean;
-    orientation?: "vertical" | "horizontal";
+    class?: string | undefined;
+    hidden?: boolean | undefined;
+    orientation?: "vertical" | "horizontal" | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -21,9 +21,9 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
         hidden?: boolean | undefined;
-        orientation?: 'horizontal' | 'vertical';
+        orientation?: "vertical" | "horizontal" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -4,8 +4,8 @@
 /** A content divider with no line. It can be flexible. */
 export default class Spacer extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    flex?: boolean;
+    class?: string | undefined;
+    flex?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -17,8 +17,8 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        flex?: boolean;
+        class?: string | undefined;
+        flex?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;