@sveltia/ui 0.8.3 → 0.10.0

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

@@ -0,0 +1,111 @@
+<!--
+  @component
+  A combination of a normal `<Button>` (default action) and an arrow-only `<MenuButton>` (different
+  actions). For example, Microsoft Word has the Paste button along with the Keep Source Formatting,
+  Match Formatting and Keep Text Only options.
+  @see https://www.google.com/search?q=split+button&tbm=isch
+-->
+<script>
+  import { _ } from 'svelte-i18n';
+  import Icon from '../icon/icon.svelte';
+  import MenuButton from '../menu/menu-button.svelte';
+  import Button from './button.svelte';
+
+  /**
+   * 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;
+  /**
+   * Text label displayed on the button.
+   * @type {string}
+   */
+  export let label = '';
+  /**
+   * The style variant of the button.
+   * @type {'primary' | 'secondary' | 'tertiary' | 'ghost' | undefined}
+   */
+  export let variant = undefined;
+  /**
+   * The size of the button.
+   * @type {'small' | 'medium' | 'large' | undefined}
+   */
+  export let size = 'medium';
+  /**
+   * Where to show the dropdown menu.
+   * @type {PopupPosition}
+   */
+  export let popupPosition = 'bottom-left';
+  /**
+   * Whether to show the backdrop for the popup.
+   * @type {boolean}
+   */
+  export let showPopupBackdrop = false;
+
+  /**
+   * @type {HTMLElement | undefined}
+   */
+  let wrapper;
+</script>
+
+<div
+  role="group"
+  class="sui split-button"
+  hidden={hidden || undefined}
+  aria-hidden={hidden}
+  aria-disabled={disabled}
+  aria-label={$_('_sui.split_button.x_options', { values: { name: label } })}
+  bind:this={wrapper}
+>
+  <Button class={className} {hidden} {disabled} {label} {variant} {size} {...$$restProps} on:click>
+    <slot name="start-icon" slot="start-icon" />
+  </Button>
+  <MenuButton
+    iconic
+    {hidden}
+    {disabled}
+    {variant}
+    {size}
+    aria-label={$_('_sui.split_button.more_options')}
+    {popupPosition}
+    popupPositionBaseElement={wrapper}
+    {showPopupBackdrop}
+  >
+    <slot name="chevron-icon" slot="end-icon">
+      <Icon name="arrow_drop_down" />
+    </slot>
+    <slot name="popup" slot="popup" />
+  </MenuButton>
+</div>
+
+<style>.split-button {
+  display: inline-flex;
+  margin: var(--sui-focus-ring-width);
+}
+.split-button :global(button) {
+  margin: 0;
+}
+.split-button :global(button):not(.menu-button) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.split-button :global(button):is(.menu-button) {
+  border-left-width: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  aspect-ratio: 3/4;
+}
+.split-button :global(button):is(.menu-button) :global(.icon) {
+  font-size: 20px;
+}</style>

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

@@ -0,0 +1,69 @@
+/** @typedef {typeof __propDef.props}  SplitButtonProps */
+/** @typedef {typeof __propDef.events}  SplitButtonEvents */
+/** @typedef {typeof __propDef.slots}  SplitButtonSlots */
+/**
+ * A combination of a normal `<Button>` (default action) and an arrow-only `<MenuButton>` (different
+ * actions). For example, Microsoft Word has the Paste button along with the Keep Source Formatting,
+ * Match Formatting and Keep Text Only options.
+ * @see https://www.google.com/search?q=split+button&tbm=isch
+ */
+export default class SplitButton extends SvelteComponent<{
+    [x: string]: any;
+    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;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'start-icon': {
+        slot: string;
+    };
+    'chevron-icon': {
+        slot: string;
+    };
+    popup: {
+        slot: string;
+    };
+}> {
+}
+export type SplitButtonProps = typeof __propDef.props;
+export type SplitButtonEvents = typeof __propDef.events;
+export type SplitButtonSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        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;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'start-icon': {
+            slot: string;
+        };
+        'chevron-icon': {
+            slot: string;
+        };
+        popup: {
+            slot: string;
+        };
+    };
+};
+export {};

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}>