@sveltia/ui 0.9.0 → 0.10.0

package/package/components/alert/alert.svelte

@@ -15,11 +15,9 @@
 </script>
 
 <div role="alert" class="sui alert {status}" {...$$restProps}>
-  {#if $$slots.icon}
-    <slot name="icon" />
-  {:else}
+  <slot name="icon">
     <Icon name={status === 'success' ? 'check_circle' : status} />
-  {/if}
+  </slot>
   <slot />
 </div>
 

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

@@ -8,7 +8,7 @@
  */
 export default class Alert extends SvelteComponent<{
     [x: string]: any;
-    status?: "error" | "warning" | "info" | "success";
+    status?: "error" | "warning" | "info" | "success" | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -23,7 +23,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        status?: 'error' | 'warning' | 'info' | 'success';
+        status?: "error" | "warning" | "info" | "success" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/button/button.svelte

@@ -7,6 +7,7 @@
 <svelte:options accessors={true} />
 
 <script>
+  import { createEventDispatcher } from 'svelte';
   import { activateKeyShortcuts } from '../../services/events';
   import Popup from '../util/popup.svelte';
 
@@ -91,12 +92,23 @@
    * Whether to make the button rounded.
    */
   export let pill = false;
+  /**
+   * Make the button width flexible.
+   * @type {boolean}
+   */
+  export let flex = false;
   /**
    * 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;
 
+  const dispatch = createEventDispatcher();
   /**
    * Reference to the `Popup` component.
    * @type {Popup | undefined}
@@ -108,6 +120,7 @@
   class="sui button {variant ?? ''} {size} {className}"
   class:iconic
   class:pill
+  class:flex
   {type}
   {name}
   {value}
@@ -131,8 +144,12 @@
   on:keydown
   on:keyup
   on:keypress
-  on:select
-  on:change
+  on:select={(/** @type {CustomEvent} */ event) => {
+    dispatch('select', event.detail);
+  }}
+  on:change={(/** @type {CustomEvent} */ event) => {
+    dispatch('change', event.detail);
+  }}
 >
   <slot name="start-icon" />
   {#if variant === 'link'}
@@ -157,7 +174,13 @@
 </button>
 
 {#if $$slots.popup}
-  <Popup anchor={element} position={popupPosition} touchOptimized={true} bind:this={popupComponent}>
+  <Popup
+    anchor={element}
+    position={popupPosition}
+    showBackdrop={showPopupBackdrop}
+    touchOptimized={true}
+    bind:this={popupComponent}
+  >
     <slot name="popup" />
   </Popup>
 {/if}
@@ -171,7 +194,7 @@
   border-style: solid;
   border-color: transparent;
   padding: 0;
-  color: var(--sui-control-foreground-color);
+  color: var(--sui-control-foreground-color, inherit);
   background-color: transparent;
   box-shadow: none;
   font-family: var(--sui-control-font-family);
@@ -200,52 +223,75 @@ button:global(.primary) :global(.label:only-child), button:global(.secondary) :g
   padding: 0 4px;
 }
 button:global(.primary) {
-  border-color: var(--sui-primary-accent-color);
-  color: var(--sui-primary-accent-color-inverted);
-  background-color: var(--sui-primary-accent-color);
+  border-width: var(--sui-button-primary-border-width, 1px);
+  border-style: var(--sui-button-primary-border-style, solid);
+  border-color: var(--sui-button-primary-border-color, var(--sui-primary-accent-color));
+  color: var(--sui-button-primary-foreground-color, var(--sui-primary-accent-color-inverted));
+  background-color: var(--sui-button-primary-background-color, var(--sui-primary-accent-color));
+  font-weight: var(--sui-button-primary-font-weight, normal);
 }
 button:global(.primary):hover, button:global(.primary):focus-visible, button:global(.primary)[aria-expanded=true] {
-  background-color: var(--sui-primary-accent-color-light);
+  color: var(--sui-button-primary-foreground-color-focus, initial);
+  background-color: var(--sui-button-primary-background-color-focus, var(--sui-primary-accent-color-light, initial));
 }
 button:global(.primary):active {
-  background-color: var(--sui-primary-accent-color-dark);
+  color: var(--sui-button-primary-foreground-color-active, initial);
+  background-color: var(--sui-button-primary-background-color-active, var(--sui-primary-accent-color-dark, initial));
 }
 button:global(.secondary) {
-  border-color: var(--sui-primary-accent-color);
-  color: var(--sui-primary-accent-color-text);
-  background-color: var(--sui-button-background-color);
+  border-width: var(--sui-button-secondary-border-width, 1px);
+  border-style: var(--sui-button-secondary-border-style, solid);
+  border-color: var(--sui-button-secondary-border-color, var(--sui-primary-accent-color));
+  color: var(--sui-button-secondary-foreground-color, var(--sui-primary-accent-color-text));
+  background-color: var(--sui-button-secondary-background-color, var(--sui-button-background-color));
+  font-weight: var(--sui-button-secondary-font-weight, normal);
 }
 button:global(.secondary):hover, button:global(.secondary):focus-visible, button:global(.secondary)[aria-expanded=true] {
-  background-color: var(--sui-hover-background-color);
+  color: var(--sui-button-secondary-foreground-color-focus, initial);
+  background-color: var(--sui-button-secondary-background-color-focus, var(--sui-hover-background-color, initial));
 }
 button:global(.secondary):active {
-  background-color: var(--sui-active-background-color);
+  color: var(--sui-button-secondary-foreground-color-active, initial);
+  background-color: var(--sui-button-secondary-background-color-active, var(--sui-active-background-color));
 }
 button:global(.secondary)[aria-pressed=true] {
-  background-color: var(--sui-primary-accent-color);
+  color: var(--sui-button-secondary-foreground-color-pressed, initial);
+  background-color: var(--sui-button-secondary-background-color-pressed, var(--sui-primary-accent-color, initial));
 }
 button:global(.tertiary) {
-  border-color: var(--sui-button-border-color);
-  color: var(--sui-highlight-foreground-color);
-  background-color: var(--sui-button-background-color);
+  border-width: var(--sui-button-tertiary-border-width, 1px);
+  border-style: var(--sui-button-tertiary-border-style, solid);
+  border-color: var(--sui-button-tertiary-border-color, var(--sui-button-border-color));
+  color: var(--sui-button-tertiary-foreground-color, var(--sui-highlight-foreground-color));
+  background-color: var(--sui-button-tertiary-background-color, var(--sui-button-background-color));
+  font-weight: var(--sui-button-tertiary-font-weight, normal);
 }
 button:global(.tertiary):hover, button:global(.tertiary):focus-visible, button:global(.tertiary)[aria-expanded=true] {
-  background-color: var(--sui-hover-background-color);
+  color: var(--sui-button-tertiary-foreground-color-focus, initial);
+  background-color: var(--sui-button-tertiary-background-color-focus, var(--sui-hover-background-color, initial));
 }
 button:global(.tertiary):active {
-  background-color: var(--sui-active-background-color);
+  color: var(--sui-button-tertiary-foreground-color-active, initial);
+  background-color: var(--sui-button-tertiary-background-color-active, var(--sui-active-background-color, initial));
 }
 button:global(.tertiary)[aria-pressed=true] {
-  background-color: var(--sui-selected-background-color);
+  color: var(--sui-button-tertiary-foreground-color-pressed, initial);
+  background-color: var(--sui-button-tertiary-background-color-pressed, var(--sui-selected-background-color, initial));
+}
+button:global(.ghost) {
+  font-weight: var(--sui-button-ghost-font-weight, normal);
 }
 button:global(.ghost):hover, button:global(.ghost):focus-visible, button:global(.ghost)[aria-expanded=true] {
-  background-color: var(--sui-hover-background-color);
+  color: var(--sui-button-ghost-foreground-color-focus, initial);
+  background-color: var(--sui-button-ghost-background-color-focus, var(--sui-hover-background-color, initial));
 }
 button:global(.ghost):active {
-  background-color: var(--sui-active-background-color);
+  color: var(--sui-button-ghost-foreground-color-active, initial);
+  background-color: var(--sui-button-ghost-background-color-active, var(--sui-active-background-color, initial));
 }
 button:global(.ghost)[aria-pressed=true] {
-  background-color: var(--sui-selected-background-color);
+  color: var(--sui-button-ghost-foreground-color-pressed, initial);
+  background-color: var(--sui-button-ghost-background-color-pressed, var(--sui-selected-background-color, initial));
 }
 button:global(.link) {
   outline: 0;
@@ -267,7 +313,7 @@ button:global(.small) {
   border-radius: var(--sui-button-small-border-radius);
   padding: var(--sui-button-small-padding);
   height: var(--sui-button-small-height);
-  font-size: var(--sui-font-size-small);
+  font-size: var(--sui-button-small-font-size, var(--sui-font-size-small));
 }
 button:global(.small) :global(.icon) {
   font-size: var(--sui-font-size-large);
@@ -276,17 +322,23 @@ button:global(.medium) {
   border-radius: var(--sui-button-medium-border-radius);
   padding: var(--sui-button-medium-padding);
   height: var(--sui-button-medium-height);
+  font-size: var(--sui-button-medium-font-size, var(--sui-font-size-default));
 }
 button:global(.large) {
   border-radius: var(--sui-button-large-border-radius);
   padding: var(--sui-button-large-padding);
   height: var(--sui-button-large-height);
-  font-size: var(--sui-font-size-large);
+  font-size: var(--sui-button-large-font-size, var(--sui-font-size-large));
 }
 button:global(.pill) {
   border-radius: 80px;
   padding: var(--sui-button-medium-pill-padding, 0 12px);
 }
+button:global(.flex) {
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: stretch;
+}
 button:global(.iconic) {
   justify-content: center;
   padding: 0;

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

@@ -8,23 +8,25 @@
  */
 export default class Button extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    name?: string;
-    label?: string;
-    disabled?: boolean;
-    size?: "small" | "medium" | "large";
-    type?: "reset" | "submit" | "button";
-    value?: string;
-    role?: string;
-    hidden?: boolean;
-    element?: HTMLButtonElement;
-    readonly?: boolean;
-    pressed?: boolean | "mixed";
-    keyShortcuts?: string;
-    variant?: "link" | "primary" | "secondary" | "tertiary" | "ghost";
-    iconic?: boolean;
-    pill?: boolean;
-    popupPosition?: PopupPosition;
+    class?: string | undefined;
+    name?: string | undefined;
+    label?: string | undefined;
+    disabled?: boolean | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    type?: "reset" | "submit" | "button" | undefined;
+    value?: string | undefined;
+    role?: string | undefined;
+    hidden?: boolean | undefined;
+    element?: HTMLButtonElement | undefined;
+    readonly?: boolean | undefined;
+    pressed?: boolean | "mixed" | undefined;
+    keyShortcuts?: string | undefined;
+    variant?: "link" | "primary" | "secondary" | "tertiary" | "ghost" | undefined;
+    iconic?: boolean | undefined;
+    pill?: boolean | undefined;
+    flex?: boolean | undefined;
+    popupPosition?: PopupPosition | undefined;
+    showPopupBackdrop?: boolean | undefined;
 }, {
     mouseenter: MouseEvent;
     mouseleave: MouseEvent;
@@ -36,8 +38,8 @@ export default class Button extends SvelteComponent<{
     keydown: KeyboardEvent;
     keyup: KeyboardEvent;
     keypress: KeyboardEvent;
-    select: Event;
-    change: Event;
+    select: CustomEvent<any>;
+    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -47,56 +49,62 @@ export default class Button extends SvelteComponent<{
     popup: {};
 }> {
     /**accessor*/
-    set element(arg: HTMLButtonElement);
-    get element(): HTMLButtonElement;
+    set element(arg: HTMLButtonElement | undefined);
+    get element(): HTMLButtonElement | undefined;
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: string | undefined);
+    get class(): string | undefined;
     /**accessor*/
-    set type(arg: "reset" | "submit" | "button");
-    get type(): "reset" | "submit" | "button";
+    set type(arg: "reset" | "submit" | "button" | undefined);
+    get type(): "reset" | "submit" | "button" | undefined;
     /**accessor*/
-    set role(arg: string);
-    get role(): string;
+    set role(arg: string | undefined);
+    get role(): string | undefined;
     /**accessor*/
-    set name(arg: string);
-    get name(): string;
+    set name(arg: string | undefined);
+    get name(): string | undefined;
     /**accessor*/
-    set value(arg: string);
-    get value(): string;
+    set value(arg: string | undefined);
+    get value(): 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 readonly(arg: boolean);
-    get readonly(): boolean;
+    set readonly(arg: boolean | undefined);
+    get readonly(): boolean | undefined;
     /**accessor*/
-    set pressed(arg: boolean | "mixed");
-    get pressed(): boolean | "mixed";
+    set pressed(arg: boolean | "mixed" | undefined);
+    get pressed(): boolean | "mixed" | undefined;
     /**accessor*/
-    set keyShortcuts(arg: string);
-    get keyShortcuts(): string;
+    set keyShortcuts(arg: string | undefined);
+    get keyShortcuts(): string | undefined;
     /**accessor*/
-    set label(arg: string);
-    get label(): string;
+    set label(arg: string | undefined);
+    get label(): string | undefined;
     /**accessor*/
-    set variant(arg: "link" | "primary" | "secondary" | "tertiary" | "ghost");
-    get variant(): "link" | "primary" | "secondary" | "tertiary" | "ghost";
+    set variant(arg: "link" | "primary" | "secondary" | "tertiary" | "ghost" | undefined);
+    get variant(): "link" | "primary" | "secondary" | "tertiary" | "ghost" | undefined;
     /**accessor*/
-    set size(arg: "small" | "medium" | "large");
-    get size(): "small" | "medium" | "large";
+    set size(arg: "small" | "medium" | "large" | undefined);
+    get size(): "small" | "medium" | "large" | undefined;
     /**accessor*/
-    set iconic(arg: boolean);
-    get iconic(): boolean;
+    set iconic(arg: boolean | undefined);
+    get iconic(): boolean | undefined;
     /**accessor*/
-    set pill(arg: boolean);
-    get pill(): boolean;
+    set pill(arg: boolean | undefined);
+    get pill(): boolean | undefined;
     /**accessor*/
-    set popupPosition(arg: PopupPosition);
-    get popupPosition(): PopupPosition;
+    set flex(arg: boolean | undefined);
+    get flex(): boolean | undefined;
+    /**accessor*/
+    set popupPosition(arg: PopupPosition | undefined);
+    get popupPosition(): PopupPosition | undefined;
+    /**accessor*/
+    set showPopupBackdrop(arg: boolean | undefined);
+    get showPopupBackdrop(): boolean | undefined;
 }
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
@@ -105,23 +113,25 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
+        class?: string | undefined;
         name?: string | undefined;
-        label?: string;
-        disabled?: boolean;
+        label?: string | undefined;
+        disabled?: boolean | undefined;
         size?: 'small' | 'medium' | 'large' | undefined;
-        type?: 'button' | 'submit' | 'reset';
+        type?: "reset" | "submit" | "button" | undefined;
         value?: string | undefined;
-        role?: string;
+        role?: string | undefined;
         hidden?: boolean | undefined;
         element?: HTMLButtonElement | undefined;
         readonly?: boolean | undefined;
         pressed?: boolean | 'mixed' | undefined;
         keyShortcuts?: string | undefined;
         variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link' | undefined;
-        iconic?: boolean;
-        pill?: boolean;
-        popupPosition?: PopupPosition;
+        iconic?: boolean | undefined;
+        pill?: boolean | undefined;
+        flex?: boolean | undefined;
+        popupPosition?: PopupPosition | undefined;
+        showPopupBackdrop?: boolean | undefined;
     };
     events: {
         mouseenter: MouseEvent;
@@ -134,8 +144,8 @@ declare const __propDef: {
         keydown: KeyboardEvent;
         keyup: KeyboardEvent;
         keypress: KeyboardEvent;
-        select: Event;
-        change: Event;
+        select: CustomEvent<any>;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/button/select-button-group.svelte

@@ -5,6 +5,7 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
 -->
 <script>
+  import { createEventDispatcher } from 'svelte';
   import { activateGroup } from '../../services/group';
 
   /**
@@ -38,6 +39,8 @@
    * @type {boolean}
    */
   export let invalid = false;
+
+  const dispatch = createEventDispatcher();
 </script>
 
 <div
@@ -52,7 +55,9 @@
   aria-invalid={invalid}
   {...$$restProps}
   use:activateGroup
-  on:change
+  on:change={(/** @type {CustomEvent} */ event) => {
+    dispatch('change', event.detail);
+  }}
 >
   <div role="none" class="inner" inert={disabled}>
     <slot />

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

@@ -8,14 +8,14 @@
  */
 export default class SelectButtonGroup extends SvelteComponent<{
     [x: string]: any;
-    class?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    hidden?: boolean;
-    readonly?: boolean;
+    class?: string | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    hidden?: boolean | undefined;
+    readonly?: boolean | undefined;
 }, {
-    change: Event;
+    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -29,15 +29,15 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        invalid?: boolean;
-        disabled?: boolean;
-        required?: boolean;
+        class?: string | undefined;
+        invalid?: boolean | undefined;
+        disabled?: boolean | undefined;
+        required?: boolean | undefined;
         hidden?: boolean | undefined;
-        readonly?: boolean;
+        readonly?: boolean | undefined;
     };
     events: {
-        change: Event;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -51,6 +51,7 @@
   export let size = 'medium';
   /**
    * Whether to only show an icon on the button and trim the padding.
+   * @type {boolean}
    */
   export let iconic = false;
 </script>
@@ -71,7 +72,7 @@
   on:select
   on:change
   on:change={(event) => {
-    selected = /** @type {CustomEvent} */ (event).detail.selected;
+    selected = event.detail.selected;
   }}
 >
   <slot name="start-icon" slot="start-icon" />

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

@@ -8,19 +8,19 @@
  */
 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;
+    class?: string | undefined;
+    label?: string | undefined;
+    disabled?: boolean | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    value?: string | undefined;
+    hidden?: boolean | undefined;
+    variant?: "link" | "primary" | "secondary" | "tertiary" | "ghost" | undefined;
+    iconic?: boolean | undefined;
+    selected?: boolean | undefined;
 }, {
     click: MouseEvent;
-    select: Event;
-    change: Event;
+    select: CustomEvent<any>;
+    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -40,20 +40,20 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        label?: string;
-        disabled?: boolean;
-        size?: 'small' | 'medium' | 'large';
+        class?: string | undefined;
+        label?: string | undefined;
+        disabled?: boolean | undefined;
+        size?: "small" | "medium" | "large" | undefined;
         value?: string | undefined;
         hidden?: boolean | undefined;
         variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link' | undefined;
-        iconic?: boolean;
-        selected?: boolean;
+        iconic?: boolean | undefined;
+        selected?: boolean | undefined;
     };
     events: {
         click: MouseEvent;
-        select: Event;
-        change: Event;
+        select: CustomEvent<any>;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -47,9 +47,14 @@
    * @type {PopupPosition}
    */
   export let popupPosition = 'bottom-left';
+  /**
+   * Whether to show the backdrop for the popup.
+   * @type {boolean}
+   */
+  export let showPopupBackdrop = false;
 
   /**
-   * @type {HTMLElement}
+   * @type {HTMLElement | undefined}
    */
   let wrapper;
 </script>
@@ -75,8 +80,11 @@
     aria-label={$_('_sui.split_button.more_options')}
     {popupPosition}
     popupPositionBaseElement={wrapper}
+    {showPopupBackdrop}
   >
-    <Icon slot="end-icon" name="arrow_drop_down" />
+    <slot name="chevron-icon" slot="end-icon">
+      <Icon name="arrow_drop_down" />
+    </slot>
     <slot name="popup" slot="popup" />
   </MenuButton>
 </div>