@sveltia/ui 0.6.5 → 0.7.0

package/package/components/button/button.svelte

@@ -7,65 +7,84 @@
 <svelte:options accessors={true} />
 
 <script>
-  import { activateKeyShortcuts } from '../util/events';
+  import { activateKeyShortcuts } from '../../services/events';
   import Popup from '../util/popup.svelte';
 
   /**
-   * CSS class name on the button.
+   * Reference to the `<button>` element.
+   * @type {HTMLButtonElement | undefined}
+   */
+  export let element = undefined;
+  /**
+   * The `class` attribute on the `<button>` element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
-  /**
-   * Reference to the button element.
-   * @type {HTMLButtonElement?}
-   */
-  export let element = undefined;
-
   /**
-   * The `type` attribute on the button element.
-   * @type {('button'|'submit'|'reset')}
+   * The `type` attribute on the `<button>` element.
+   * @type {'button' | 'submit' | 'reset'}
    */
   export let type = 'button';
-
   /**
-   * The `role` attribute on the button element.
+   * The `role` attribute on the `<button>` element.
    * @type {string}
    */
   export let role = 'button';
-
   /**
-   * The height of the button.
-   * @type {('small'|'medium'|'large')}
+   * The `name` attribute on the `<button>` element.
+   * @type {string | undefined}
    */
-  export let size = 'medium';
-
+  export let name = undefined;
   /**
-   * Whether the button is hidden.
-   * @type {boolean}
+   * The `value` attribute on the `<button>` element.
+   * @type {string | undefined}
    */
-  export let hidden = false;
-
+  export let value = undefined;
   /**
-   * Whether the button is disabled.
+   * 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;
-
   /**
-   * The `aria-pressed` attribute on the button element.
-   * @type {(boolean | 'false' | 'mixed' | 'true' | undefined)}
+   * Whether to mark the widget pressed. An alias of the `aria-pressed` attribute.
+   * @type {boolean | 'mixed' | undefined}
    */
   export let pressed = undefined;
-
+  /**
+   * Keyboard shortcuts. An alias of the `aria-keyshortcuts` attribute. Accepts the special `Accel`
+   * key, which will be replaced with `Control` or `Meta` depending on the user’s operating system.
+   * @type {string | undefined}
+   */
+  export let keyShortcuts = undefined;
   /**
    * Text label displayed on the button.
    * @type {string}
    */
   export let label = '';
-
+  /**
+   * The style variant of the button.
+   * @type {'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link' | undefined}
+   */
+  export let variant = undefined;
+  /**
+   * The size of the button.
+   * @type {'small' | 'medium' | 'large' | undefined}
+   */
+  export let size = 'medium';
+  /**
+   * Whether to only show an icon on the button and trim the padding.
+   */
+  export let iconic = false;
+  /**
+   * Whether to make the button rounded.
+   */
+  export let pill = false;
   /**
    * Where to show the dropdown menu.
    * @type {PopupPosition}
@@ -73,25 +92,28 @@
   export let popupPosition = 'bottom-left';
 
   /**
-   * Keyboard shortcuts.
-   * @type {string}
+   * Reference to the `Popup` component.
+   * @type {Popup | undefined}
    */
-  export let keyShortcuts = '';
-
-  /** @type {?Popup} */
-  let popupComponent;
+  let popupComponent = undefined;
 </script>
 
 <button
+  class="sui button {variant ?? ''} {size} {className}"
+  class:iconic
+  class:pill
   {type}
+  {name}
+  {value}
+  hidden={hidden || undefined}
+  disabled={disabled || undefined}
   {role}
-  hidden={hidden ? true : undefined}
-  disabled={disabled ? true : undefined}
-  class="sui button {size} {className}"
-  aria-hidden={hidden ? true : undefined}
-  aria-disabled={disabled ? true : undefined}
+  aria-hidden={hidden}
+  aria-disabled={disabled}
   aria-pressed={pressed}
   {...$$restProps}
+  bind:this={element}
+  use:activateKeyShortcuts={keyShortcuts}
   on:mouseenter
   on:mouseleave
   on:click
@@ -102,8 +124,7 @@
   on:keydown
   on:keyup
   on:keypress
-  use:activateKeyShortcuts={keyShortcuts}
-  bind:this={element}
+  on:select
 >
   <slot name="start-icon" />
   {#if label}
@@ -114,7 +135,7 @@
 </button>
 
 {#if $$slots.popup}
-  <Popup anchor={element} position={popupPosition} bind:this={popupComponent}>
+  <Popup anchor={element} position={popupPosition} touchOptimized={true} bind:this={popupComponent}>
     <slot name="popup" />
   </Popup>
 {/if}
@@ -135,6 +156,7 @@
   line-height: var(--sui-control-line-height);
   font-weight: normal;
   text-align: left;
+  white-space: nowrap;
   cursor: pointer;
   transition: all 200ms;
 }
@@ -147,87 +169,100 @@ button:global(:not(:disabled):focus-visible) {
 button[hidden] {
   display: none !important;
 }
-button[disabled] {
-  opacity: 0.4;
-  cursor: default;
-  pointer-events: none;
-}
 button:global(.primary), button:global(.secondary), button:global(.tertiary), button:global(.ghost) {
   justify-content: center;
   border-width: 1px;
-  border-radius: var(--sui-button-medium-border-radius);
-  padding: var(--sui-button-medium-padding, 0 8px);
-  height: var(--sui-button-medium-height);
 }
 button:global(.primary) :global(.label:only-child), button:global(.secondary) :global(.label:only-child), button:global(.tertiary) :global(.label:only-child), button:global(.ghost) :global(.label:only-child) {
   padding: 0 4px;
 }
 button:global(.primary) {
-  border-color: var(--sui-control-border-color);
-  color: var(--sui-primary-accent-color-foreground);
+  border-color: var(--sui-primary-accent-color);
+  color: var(--sui-primary-accent-color-inverted);
   background-color: var(--sui-primary-accent-color);
 }
-button:global(.primary):hover, button:global(.primary):focus-visible {
-  background-color: var(--sui-primary-accent-color-lighter);
+button:global(.primary):hover, button:global(.primary):focus-visible, button:global(.primary)[aria-expanded=true] {
+  background-color: var(--sui-primary-accent-color-light);
 }
 button:global(.primary):active {
-  background-color: var(--sui-primary-accent-color-darker);
+  background-color: var(--sui-primary-accent-color-dark);
 }
 button:global(.secondary) {
   border-color: var(--sui-primary-accent-color);
-  color: var(--sui-primary-accent-color-lighter);
-  background-color: var(--sui-tertiary-background-color);
+  color: var(--sui-primary-accent-color-text);
+  background-color: var(--sui-button-background-color);
+}
+button:global(.secondary):hover, button:global(.secondary):focus-visible, button:global(.secondary)[aria-expanded=true] {
+  background-color: var(--sui-hover-background-color);
 }
-button:global(.secondary):hover, button:global(.secondary):focus-visible {
-  background-color: var(--sui-highlight-background-color);
+button:global(.secondary):active {
+  background-color: var(--sui-active-background-color);
 }
 button:global(.secondary)[aria-pressed=true] {
   background-color: var(--sui-primary-accent-color);
 }
 button:global(.tertiary) {
-  border-color: var(--sui-control-border-color);
+  border-color: var(--sui-button-border-color);
   color: var(--sui-highlight-foreground-color);
-  background-color: var(--sui-tertiary-background-color);
+  background-color: var(--sui-button-background-color);
 }
-button:global(.tertiary):hover, button:global(.tertiary):focus-visible {
-  background-color: var(--sui-highlight-background-color);
+button:global(.tertiary):hover, button:global(.tertiary):focus-visible, button:global(.tertiary)[aria-expanded=true] {
+  background-color: var(--sui-hover-background-color);
+}
+button:global(.tertiary):active {
+  background-color: var(--sui-active-background-color);
 }
 button:global(.tertiary)[aria-pressed=true] {
-  background-color: var(--sui-highlight-background-color);
+  background-color: var(--sui-selected-background-color);
+}
+button:global(.ghost):hover, button:global(.ghost):focus-visible, button:global(.ghost)[aria-expanded=true] {
+  background-color: var(--sui-hover-background-color);
 }
-button:global(.ghost):hover, button:global(.ghost):focus-visible {
-  background-color: var(--sui-highlight-background-color);
+button:global(.ghost):active {
+  background-color: var(--sui-active-background-color);
 }
 button:global(.ghost)[aria-pressed=true] {
-  background-color: var(--sui-highlight-background-color);
+  background-color: var(--sui-selected-background-color);
 }
-button:global(.danger) {
-  background-color: var(--sui-error-background-color);
+button:global(.link) {
+  outline: 0;
+  color: var(--sui-primary-accent-color-text);
 }
-button:global(.large) {
-  height: var(--sui-button-large-height);
+button:global(.link):hover, button:global(.link):focus, button:global(.link):active {
+  text-decoration: underline;
 }
 button:global(.small) {
-  padding: var(--sui-button-small-padding, 0 8px);
+  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);
 }
 button:global(.small) :global(.icon) {
   font-size: var(--sui-font-size-large);
 }
-button:global(.pill) {
-  border-radius: var(--sui-button-medium-pill-height, 16px);
-  padding: var(--sui-button-medium-pill-padding, 0 16px);
+button:global(.medium) {
+  border-radius: var(--sui-button-medium-border-radius);
+  padding: var(--sui-button-medium-padding);
+  height: var(--sui-button-medium-height);
 }
-button:global(.link) {
-  color: var(--sui-primary-accent-color-lighter);
+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);
+}
+button:global(.pill) {
+  border-radius: 80px;
+  padding: var(--sui-button-medium-pill-padding, 0 12px);
 }
 button:global(.iconic) {
   justify-content: center;
   padding: 0;
-  border-radius: 4px;
   aspect-ratio: 1/1;
 }
+button:global(.danger) {
+  background-color: var(--sui-error-background-color);
+}
 button :global(.label) {
   padding: 0 4px;
 }</style>

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

@@ -9,16 +9,21 @@
 export default class Button extends SvelteComponent<{
     [x: string]: any;
     class?: string;
+    name?: string;
     label?: string;
     type?: "reset" | "submit" | "button";
     disabled?: boolean;
     size?: "small" | "medium" | "large";
+    value?: string;
     hidden?: boolean;
     element?: HTMLButtonElement;
     role?: string;
-    pressed?: boolean | "true" | "false" | "mixed";
-    popupPosition?: PopupPosition;
+    pressed?: boolean | "mixed";
     keyShortcuts?: string;
+    variant?: "link" | "primary" | "secondary" | "tertiary" | "ghost";
+    iconic?: boolean;
+    pill?: boolean;
+    popupPosition?: PopupPosition;
 }, {
     mouseenter: MouseEvent;
     mouseleave: MouseEvent;
@@ -30,6 +35,7 @@ export default class Button extends SvelteComponent<{
     keydown: KeyboardEvent;
     keyup: KeyboardEvent;
     keypress: KeyboardEvent;
+    select: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -38,21 +44,24 @@ export default class Button extends SvelteComponent<{
     'end-icon': {};
     popup: {};
 }> {
-    /**accessor*/
-    set class(arg: string);
-    get class(): string;
     /**accessor*/
     set element(arg: HTMLButtonElement);
     get element(): HTMLButtonElement;
     /**accessor*/
+    set class(arg: string);
+    get class(): string;
+    /**accessor*/
     set type(arg: "reset" | "submit" | "button");
     get type(): "reset" | "submit" | "button";
     /**accessor*/
     set role(arg: string);
     get role(): string;
     /**accessor*/
-    set size(arg: "small" | "medium" | "large");
-    get size(): "small" | "medium" | "large";
+    set name(arg: string);
+    get name(): string;
+    /**accessor*/
+    set value(arg: string);
+    get value(): string;
     /**accessor*/
     set hidden(arg: boolean);
     get hidden(): boolean;
@@ -60,17 +69,29 @@ export default class Button extends SvelteComponent<{
     set disabled(arg: boolean);
     get disabled(): boolean;
     /**accessor*/
-    set pressed(arg: boolean | "true" | "false" | "mixed");
-    get pressed(): boolean | "true" | "false" | "mixed";
+    set pressed(arg: boolean | "mixed");
+    get pressed(): boolean | "mixed";
+    /**accessor*/
+    set keyShortcuts(arg: string);
+    get keyShortcuts(): string;
     /**accessor*/
     set label(arg: string);
     get label(): string;
     /**accessor*/
+    set variant(arg: "link" | "primary" | "secondary" | "tertiary" | "ghost");
+    get variant(): "link" | "primary" | "secondary" | "tertiary" | "ghost";
+    /**accessor*/
+    set size(arg: "small" | "medium" | "large");
+    get size(): "small" | "medium" | "large";
+    /**accessor*/
+    set iconic(arg: boolean);
+    get iconic(): boolean;
+    /**accessor*/
+    set pill(arg: boolean);
+    get pill(): boolean;
+    /**accessor*/
     set popupPosition(arg: PopupPosition);
     get popupPosition(): PopupPosition;
-    /**accessor*/
-    set keyShortcuts(arg: string);
-    get keyShortcuts(): string;
 }
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
@@ -80,16 +101,21 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
+        name?: string | undefined;
         label?: string;
-        type?: ('button' | 'submit' | 'reset');
+        type?: 'button' | 'submit' | 'reset';
         disabled?: boolean;
-        size?: ('small' | 'medium' | 'large');
-        hidden?: boolean;
-        element?: HTMLButtonElement | null;
+        size?: 'small' | 'medium' | 'large' | undefined;
+        value?: string | undefined;
+        hidden?: boolean | undefined;
+        element?: HTMLButtonElement | undefined;
         role?: string;
-        pressed?: (boolean | 'false' | 'mixed' | 'true' | undefined);
+        pressed?: boolean | 'mixed' | undefined;
+        keyShortcuts?: string | undefined;
+        variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link' | undefined;
+        iconic?: boolean;
+        pill?: boolean;
         popupPosition?: PopupPosition;
-        keyShortcuts?: string;
     };
     events: {
         mouseenter: MouseEvent;
@@ -102,6 +128,7 @@ declare const __propDef: {
         keydown: KeyboardEvent;
         keyup: KeyboardEvent;
         keypress: KeyboardEvent;
+        select: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -5,47 +5,58 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
 -->
 <script>
-  import { createEventDispatcher } from 'svelte';
-  import { activateGroup } from '../util/group';
+  import { activateGroup } from '../../services/group';
 
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
-  export let value = '';
-  export let ariaLabel = '';
+  /**
+   * Whether to hide the widget.
+   * @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;
-
-  const dispatch = createEventDispatcher();
-
-  /** @type {HTMLElement?} */
-  export let element = undefined;
-
-  $: {
-    dispatch('change', { value });
-  }
+  /**
+   * 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;
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="sui select-button-group {className}"
+  hidden={hidden || undefined}
   tabindex="-1"
   role="radiogroup"
-  aria-label={ariaLabel || undefined}
-  aria-disabled={disabled ? true : undefined}
-  bind:this={element}
-  on:click={({ target }) => {
-    if (target.matches('[role="radio"]')) {
-      value = target.value;
-    }
-  }}
+  aria-hidden={hidden}
+  aria-disabled={disabled}
+  aria-readonly={readonly}
+  aria-required={required}
+  aria-invalid={invalid}
+  {...$$restProps}
   use:activateGroup
+  on:change
 >
-  <slot />
+  <div class="inner" inert={disabled}>
+    <slot />
+  </div>
 </div>
 
 <style>.select-button-group {
@@ -56,19 +67,29 @@
   outline-width: 0 !important;
 }
 .select-button-group :global(button) {
-  border-radius: 0;
+  border-radius: 0 !important;
   color: var(--sui-primary-foreground-color);
 }
 .select-button-group :global(button):first-child {
-  border-radius: 4px 0 0 4px;
+  border-radius: 4px 0 0 4px !important;
 }
 .select-button-group :global(button):not(:first-child) {
   border-left-width: 0;
 }
 .select-button-group :global(button):last-child {
-  border-radius: 0 4px 4px 0;
+  border-radius: 0 4px 4px 0 !important;
 }
 .select-button-group :global(button[aria-checked="true"]) {
   color: var(--sui-highlight-foreground-color);
-  background-color: var(--sui-highlight-background-color);
+  background-color: var(--sui-selected-background-color);
+}
+.select-button-group[aria-disabled=false] :global(button[aria-disabled="true"]) {
+  filter: grayscale(0) opacity(1);
+}
+.select-button-group[aria-disabled=false] :global(button[aria-disabled="true"]) :global(*) {
+  filter: grayscale(1) opacity(0.35);
+}
+
+.inner {
+  display: contents;
 }</style>

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

@@ -7,13 +7,15 @@
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
 export default class SelectButtonGroup extends SvelteComponent<{
+    [x: string]: any;
     class?: string;
+    invalid?: boolean;
     disabled?: boolean;
-    value?: string;
-    element?: HTMLElement;
-    ariaLabel?: string;
+    required?: boolean;
+    hidden?: boolean;
+    readonly?: boolean;
 }, {
-    change: CustomEvent<any>;
+    change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -26,14 +28,16 @@ export type SelectButtonGroupSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         class?: string;
+        invalid?: boolean;
         disabled?: boolean;
-        value?: string;
-        element?: HTMLElement | null;
-        ariaLabel?: string;
+        required?: boolean;
+        hidden?: boolean | undefined;
+        readonly?: boolean;
     };
     events: {
-        change: CustomEvent<any>;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -12,18 +12,66 @@
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
+  /**
+   * The `value` attribute on the `<button>` element.
+   * @type {string | undefined}
+   */
+  export let value = undefined;
+  /**
+   * Whether to select the widget. An alias of the `aria-checked` attribute.
+   * Because the UI is a button, we expose `selected` instead of `checked`.
+   * @type {boolean}
+   */
   export let selected = false;
+  /**
+   * 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' | 'link' | undefined}
+   */
+  export let variant = undefined;
+  /**
+   * The size of the button.
+   * @type {'small' | 'medium' | 'large'}
+   */
+  export let size = 'medium';
+  /**
+   * Whether to only show an icon on the button and trim the padding.
+   */
+  export let iconic = false;
 </script>
 
 <Button
   class="sui select-button {className}"
+  {value}
+  {hidden}
+  {disabled}
+  {label}
+  {variant}
+  {size}
+  {iconic}
   role="radio"
   aria-checked={selected}
   {...$$restProps}
   on:click
+  on:click={() => {
+    selected = !selected;
+  }}
+  on:select
 >
   <slot name="start-icon" slot="start-icon" />
   <slot />