@sveltia/ui 0.7.4 → 0.7.5

package/package/components/button/button.svelte

@@ -51,6 +51,12 @@
    * @type {boolean}
    */
   export let disabled = false;
+  /**
+   * Whether to make the widget read-only. An alias of the `aria-readonly` attribute used in certain
+   * roles, including `checkbox`, `listbox`, `slider` and `textbox`.
+   * @type {boolean | undefined}
+   */
+  export let readonly = undefined;
   /**
    * Whether to mark the widget pressed. An alias of the `aria-pressed` attribute.
    * @type {boolean | 'mixed' | undefined}
@@ -110,6 +116,7 @@
   {role}
   aria-hidden={hidden}
   aria-disabled={disabled}
+  aria-readonly={readonly}
   aria-pressed={pressed}
   {...$$restProps}
   bind:this={element}
@@ -246,6 +253,7 @@ button:global(.link) {
   color: var(--sui-primary-accent-color-text);
 }
 button:global(.link) :global(.label) {
+  padding: 0;
   line-height: var(--sui-line-height-compact);
   white-space: normal;
 }

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

@@ -18,6 +18,7 @@ export default class Button extends SvelteComponent<{
     hidden?: boolean;
     element?: HTMLButtonElement;
     role?: string;
+    readonly?: boolean;
     pressed?: boolean | "mixed";
     keyShortcuts?: string;
     variant?: "link" | "primary" | "secondary" | "tertiary" | "ghost";
@@ -69,6 +70,9 @@ export default class Button extends SvelteComponent<{
     set disabled(arg: boolean);
     get disabled(): boolean;
     /**accessor*/
+    set readonly(arg: boolean);
+    get readonly(): boolean;
+    /**accessor*/
     set pressed(arg: boolean | "mixed");
     get pressed(): boolean | "mixed";
     /**accessor*/
@@ -110,6 +114,7 @@ declare const __propDef: {
         hidden?: boolean | undefined;
         element?: HTMLButtonElement | undefined;
         role?: string;
+        readonly?: boolean | undefined;
         pressed?: boolean | 'mixed' | undefined;
         keyShortcuts?: string | undefined;
         variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'link' | undefined;

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

@@ -24,17 +24,17 @@
    */
   export let disabled = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-readonly` attribute.
+   * Whether to make the widget read-only. 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.
+   * Whether to mark the widget required. 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.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;

package/package/components/checkbox/checkbox.svelte

@@ -38,17 +38,17 @@
    */
   export let disabled = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-readonly` attribute.
+   * Whether to make the widget read-only. 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.
+   * Whether to mark the widget required. 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.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
@@ -81,6 +81,7 @@
   class:checked
   class:indeterminate
   class:disabled
+  class:readonly
   hidden={hidden || undefined}
   role="none"
   {...$$restProps}
@@ -106,9 +107,13 @@
       aria-labelledby={ariaLabel ? undefined : '{id}-label'}
       bind:this={buttonComponent}
       on:click={(event) => {
+        event.preventDefault();
         event.stopPropagation();
-        checked = indeterminate ? true : !checked;
-        dispatch('change', { checked });
+
+        if (!disabled && !readonly) {
+          checked = indeterminate ? true : !checked;
+          dispatch('change', { checked });
+        }
       }}
     >
       <Icon slot="start-icon" name={indeterminate ? 'remove' : 'check'} />

package/package/components/dialog/dialog.svelte

@@ -248,8 +248,8 @@ dialog form {
   border-radius: 4px;
   max-width: calc(100vw - 32px);
   background-color: var(--sui-secondary-background-color-translucent);
-  -webkit-backdrop-filter: blur(16px);
-  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(32px);
+  backdrop-filter: blur(32px);
   box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   will-change: opacity, transform;
   transition-property: opacity, transform;

package/package/components/disclosure/disclosure.svelte

@@ -74,7 +74,6 @@
 <style>.disclosure :global(button) {
   display: flex;
   width: 100%;
-  justify-content: space-between;
 }
 .disclosure :global(button .icon) {
   transition: all 200ms;

package/package/components/drawer/drawer.svelte

@@ -245,8 +245,8 @@ dialog form {
   max-width: 100vw;
   max-height: 100vh;
   background-color: var(--sui-secondary-background-color-translucent);
-  -webkit-backdrop-filter: blur(16px);
-  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(32px);
+  backdrop-filter: blur(32px);
   box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   will-change: opacity, transform;
   transition-property: opacity, transform;

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

@@ -12,10 +12,10 @@ export default class Drawer extends SvelteComponent<{
     title?: string;
     size?: "small" | "medium" | "large" | "x-large";
     position?: "top" | "right" | "bottom" | "left";
+    keepContent?: boolean;
     open?: boolean;
     showClose?: false | "inside" | "outside";
     closeOnBackdropClick?: boolean;
-    keepContent?: boolean;
 }, {
     submit: SubmitEvent;
     ok: CustomEvent<any>;
@@ -41,10 +41,10 @@ declare const __propDef: {
         title?: string;
         size?: ('small' | 'medium' | 'large' | 'x-large');
         position?: ('top' | 'right' | 'bottom' | 'left');
+        keepContent?: boolean;
         open?: boolean;
         showClose?: ('inside' | 'outside' | false);
         closeOnBackdropClick?: boolean;
-        keepContent?: boolean;
     };
     events: {
         submit: SubmitEvent;

package/package/components/listbox/listbox.svelte

@@ -25,17 +25,17 @@
    */
   export let disabled = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-readonly` attribute.
+   * Whether to make the widget read-only. 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.
+   * Whether to mark the widget required. 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.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;

package/package/components/radio/radio-group.svelte

@@ -24,17 +24,17 @@
    */
   export let disabled = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-readonly` attribute.
+   * Whether to make the widget read-only. 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.
+   * Whether to mark the widget required. 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.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;

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

@@ -13,8 +13,8 @@ export default class RadioGroup extends SvelteComponent<{
     disabled?: boolean;
     required?: boolean;
     hidden?: boolean;
-    orientation?: "vertical" | "horizontal";
     readonly?: boolean;
+    orientation?: "vertical" | "horizontal";
 }, {
     change: Event;
 } & {
@@ -35,8 +35,8 @@ declare const __propDef: {
         disabled?: boolean;
         required?: boolean;
         hidden?: boolean | undefined;
-        orientation?: 'horizontal' | 'vertical';
         readonly?: boolean;
+        orientation?: 'horizontal' | 'vertical';
     };
     events: {
         change: Event;

package/package/components/select/combobox.svelte

@@ -3,6 +3,7 @@
   A variant of the `<Select>` widget with an auto-complete text input field.
   @see https://w3c.github.io/aria/#combobox
   @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+  @todo Add DOM API compatibility.
 -->
 <script>
   import { createEventDispatcher } from 'svelte';
@@ -32,30 +33,29 @@
    */
   export let disabled = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-readonly` attribute.
+   * Whether to make the widget read-only. 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.
+   * Whether to mark the widget required. 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.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
-  /**
-   * Text label displayed on the readonly item.
-   * @type {string}
-   */
-  export let label = '';
   /**
    * Selected option’s value.
    * @type {(string | number | undefined)}
    */
   export let value = undefined;
+  /**
+   * Whether to make the `combobox` editable.
+   */
+  export let editable = true;
   /**
    * Where to show the dropdown menu.
    * @type {PopupPosition}
@@ -71,10 +71,37 @@
   /** @type {Popup?} */
   let popupComponent;
   let isPopupOpen = writable(false);
+  /** @type {string} */
+  let label = '';
+
+  /**
+   * Update the `value` and `label` whenever an option is selected
+   * @param {HTMLButtonElement} target Selected option.
+   */
+  const onSelect = (target) => {
+    // @todo support more types
+    value = target.dataset.type === 'number' ? Number(target.value) : target.value;
+    label = target.querySelector('.label')?.textContent || target.value;
+    dispatch('change', { target: inputComponent?.element, value });
+  };
+
+  $: {
+    if (popupComponent?.content) {
+      window.requestAnimationFrame(() => {
+        const selected = popupComponent.content.querySelector(
+          '[role="option"][aria-selected="true"]',
+        );
+
+        if (selected) {
+          onSelect(/** @type {HTMLButtonElement?} */ (selected));
+        }
+      });
+    }
+  }
 </script>
 
-<div class="sui combobox {className}" class:readonly hidden={hidden || undefined} {...$$restProps}>
-  {#if readonly}
+<div class="sui combobox {className}" hidden={hidden || undefined} {...$$restProps}>
+  {#if !editable}
     <div
       {id}
       class:selected={value !== undefined}
@@ -84,14 +111,14 @@
       aria-expanded={$isPopupOpen}
       aria-hidden={hidden}
       aria-disabled={disabled}
-      aria-readonly="true"
+      aria-readonly={readonly}
       aria-haspopup="listbox"
       aria-activedescendant="selected-option"
       {...$$restProps}
       bind:this={comboboxElement}
     >
       <div class="label">
-        {value !== undefined ? label || value : $_('_sui.combobox.select_an_option')}
+        {value !== undefined ? label : $_('_sui.combobox.select_an_option')}
       </div>
     </div>
   {:else}
@@ -121,9 +148,10 @@
     aria-controls="{id}-popup"
     aria-expanded={$isPopupOpen}
     on:click={(event) => {
+      event.preventDefault();
       event.stopPropagation();
 
-      if (!disabled) {
+      if (!disabled && !readonly) {
         $isPopupOpen = !$isPopupOpen;
       }
     }}
@@ -140,6 +168,7 @@
   class="combobox"
   anchor={comboboxElement ?? inputComponent?.element}
   {position}
+  keepContent={true}
   touchOptimized={true}
   bind:open={isPopupOpen}
   bind:this={popupComponent}
@@ -147,13 +176,7 @@
   <Listbox
     on:click={(event) => {
       if (/** @type {HTMLElement} */ (event.target).matches('[role="option"]')) {
-        // eslint-disable-next-line prefer-destructuring
-        const target = /** @type {HTMLButtonElement?} */ (event.target);
-
-        // @todo support more types
-        value = target.dataset.type === 'number' ? Number(target.value) : target.value;
-        label = target.querySelector('.label')?.textContent || target.value;
-        dispatch('change', { target: inputComponent?.element, value });
+        onSelect(/** @type {HTMLButtonElement?} */ (event.target));
       }
     }}
   >
@@ -214,11 +237,6 @@
 .combobox div[role=combobox]:hover, .combobox div[role=combobox]:focus {
   background-color: var(--sui-hover-background-color);
 }
-.combobox div[role=combobox][aria-disabled=true] {
-  background-color: var(--sui-disabled-background-color);
-  opacity: 0.4;
-  cursor: default;
-}
 .combobox div[role=combobox] .label {
   display: block;
   overflow: hidden;
@@ -228,7 +246,7 @@
 }
 .combobox :global(input) {
   padding: 0 32px 0 8px;
-  width: 100%;
+  width: 0;
 }
 .combobox + :global([role="listbox"]) {
   position: fixed;
@@ -237,8 +255,8 @@
   box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   overflow: auto;
   background-color: var(--sui-secondary-background-color);
-  -webkit-backdrop-filter: blur(16px);
-  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(32px);
+  backdrop-filter: blur(32px);
   /* Add .1s delay before the position can be determined */
   transition: opacity 100ms 100ms;
 }

package/package/components/select/combobox.svelte.d.ts

@@ -5,11 +5,11 @@
  * A variant of the `<Select>` widget with an auto-complete text input field.
  * @see https://w3c.github.io/aria/#combobox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+ * @todo Add DOM API compatibility.
  */
 export default class Combobox extends SvelteComponent<{
     [x: string]: any;
     class?: string;
-    label?: string;
     invalid?: boolean;
     disabled?: boolean;
     required?: boolean;
@@ -17,6 +17,7 @@ export default class Combobox extends SvelteComponent<{
     position?: PopupPosition;
     hidden?: boolean;
     readonly?: boolean;
+    editable?: boolean;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -33,7 +34,6 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        label?: string;
         invalid?: boolean;
         disabled?: boolean;
         required?: boolean;
@@ -41,6 +41,7 @@ declare const __propDef: {
         position?: PopupPosition;
         hidden?: boolean | undefined;
         readonly?: boolean;
+        editable?: boolean;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/select/select.svelte

@@ -1,8 +1,9 @@
 <!--
   @component
-  A read-only variant of `<Combobox>`. The equivalent of the HTML `<select>` element.
+  A select-only variant of `<Combobox>`. The equivalent of the HTML `<select>` element.
   @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
   @see https://w3c.github.io/aria/#combobox
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
 -->
 <script>
   import Combobox from './combobox.svelte';
@@ -23,21 +24,21 @@
    * @type {boolean}
    */
   export let disabled = false;
+  /**
+   * Whether to make the widget read-only. 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.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
-  /**
-   * Text label displayed on the readonly item.
-   * @type {string}
-   */
-  export let label = '';
   /**
    * Selected option’s value.
    * @type {(string | number | undefined)}
@@ -50,11 +51,11 @@
   class="sui select {className}"
   {hidden}
   {disabled}
-  readonly={true}
+  {readonly}
   {required}
   {invalid}
-  {label}
   {...$$restProps}
+  editable={false}
   on:change
 >
   <slot />

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

@@ -2,19 +2,20 @@
 /** @typedef {typeof __propDef.events}  SelectEvents */
 /** @typedef {typeof __propDef.slots}  SelectSlots */
 /**
- * A read-only variant of `<Combobox>`. The equivalent of the HTML `<select>` element.
+ * A select-only variant of `<Combobox>`. The equivalent of the HTML `<select>` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
  * @see https://w3c.github.io/aria/#combobox
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
  */
 export default class Select extends SvelteComponent<{
     [x: string]: any;
     class?: string;
-    label?: string;
     invalid?: boolean;
     disabled?: boolean;
     required?: boolean;
     value?: string | number;
     hidden?: boolean;
+    readonly?: boolean;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -31,12 +32,12 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        label?: string;
         invalid?: boolean;
         disabled?: boolean;
         required?: boolean;
         value?: (string | number | undefined);
         hidden?: boolean | undefined;
+        readonly?: boolean;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/slider/slider.svelte

@@ -27,12 +27,12 @@
    */
   export let disabled = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-readonly` attribute.
+   * Whether to make the widget read-only. An alias of the `aria-readonly` attribute.
    * @type {boolean}
    */
   export let readonly = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-invalid` attribute.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
@@ -289,6 +289,7 @@
 <div
   class="sui slider {className}"
   class:disabled
+  class:readonly
   role="none"
   hidden={hidden || undefined}
   {...$$restProps}

package/package/components/switch/switch.svelte

@@ -22,17 +22,17 @@
    */
   export let disabled = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-readonly` attribute.
+   * Whether to make the widget read-only. 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.
+   * Whether to mark the widget required. 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.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
@@ -62,7 +62,9 @@
   aria-invalid={invalid}
   {...$$restProps}
   on:click={() => {
-    checked = !checked;
+    if (!disabled && !readonly) {
+      checked = !checked;
+    }
   }}
 >
   <span />

package/package/components/text-field/markdown-editor.svelte

@@ -26,12 +26,12 @@
    */
   export let readonly = false;
   /**
-   * Whether to disable the widget. An alias of the `aria-required` attribute.
+   * Whether to mark the widget required. 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.
+   * Whether to mark the widget invalid. An alias of the `aria-invalid` attribute.
    * @type {boolean}
    */
   export let invalid = false;
@@ -72,14 +72,17 @@
   ];
 </script>
 
-<div class="wrapper" class:disabled hidden={hidden || undefined} {...$$restProps}>
-  <div class="inner" inert={disabled}>
-    <Toolbar aria-label={$_('_sui.markdown_editor.markdown_editor')}>
+<div class="wrapper" hidden={hidden || undefined} {...$$restProps}>
+  <div class="inner">
+    <Toolbar
+      disabled={disabled || readonly}
+      aria-label={$_('_sui.markdown_editor.markdown_editor')}
+    >
       {#each defaultButtons as { label, icon, separator }}
         {#if separator}
           <Divider />
         {:else}
-          <Button iconic {disabled}>
+          <Button iconic>
             <Icon slot="start-icon" name={icon} {label} />
           </Button>
         {/if}