@sveltia/ui 0.6.6 → 0.7.1

package/package/components/radio/radio.svelte

@@ -6,45 +6,60 @@
   @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
 -->
 <script>
+  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
-  import Icon from '../icon/icon.svelte';
-  import { getRandomId } from '../util/util';
 
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
-  /** @type {string} */
-  export let name = '';
-
-  /** @type {string?} */
-  export let label = undefined;
-
-  /** @type {string?} */
-  export let value = undefined;
-
-  /** @type {boolean} */
-  export let selected = false;
-
-  /** @type {boolean} */
+  /**
+   * 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;
+  /**
+   * Whether to check the widget. An alias of the `aria-checked` attribute.
+   * @type {boolean}
+   */
+  export let checked = false;
+  /**
+   * The `name` attribute on the `<button>` element.
+   * @type {string | undefined}
+   */
+  export let name = undefined;
+  /**
+   * The `value` attribute on the `<button>` element.
+   * @type {string | undefined}
+   */
+  export let value = undefined;
+  /**
+   * Text label displayed next to the checkbox.
+   * @type {string | undefined}
+   */
+  export let label = undefined;
 
   const id = getRandomId('checkbox');
-  /** @type {Button} */
+
+  /**
+   * Reference to the `Button` component.
+   * @type {Button | undefined}
+   */
   let buttonComponent;
 </script>
 
-{#if name && value && selected}
-  <input type="hidden" {name} {value} />
-{/if}
-
 <span
   class="sui radio {className}"
+  class:disabled
   role="none"
+  hidden={hidden || undefined}
   {...$$restProps}
   on:click={(event) => {
     if (!(/** @type {HTMLElement} */ (event.target).matches('button'))) {
@@ -54,20 +69,20 @@
 >
   <Button
     {id}
+    role="radio"
+    {hidden}
     {disabled}
     {name}
     {value}
-    role="radio"
-    aria-checked={selected}
+    aria-checked={checked}
     aria-labelledby="{id}-label"
     bind:this={buttonComponent}
     on:click={(event) => {
       event.preventDefault();
-      selected = true;
+      checked = true;
     }}
-  >
-    <Icon slot="start-icon" name="circle" />
-  </Button>
+    on:select
+  />
   {#if $$slots.default || label}
     <label id="{id}-label">
       {#if $$slots.default}
@@ -91,33 +106,49 @@
   -webkit-user-select: none;
   user-select: none;
 }
-.radio.disabled {
-  cursor: default;
+.radio:hover :global(button) {
+  background-color: var(--sui-hover-background-color);
 }
-.radio.disabled label {
-  color: var(--sui-disabled-foreground-color);
+.radio:hover :global(button[aria-checked="true"]) {
+  border-color: var(--sui-primary-accent-color-light);
+  color: var(--sui-primary-accent-color-text);
+}
+.radio:hover :global(button[aria-checked="true"]::before) {
+  background-color: var(--sui-primary-accent-color-light);
+}
+.radio:active :global(button) {
+  background-color: var(--sui-active-background-color);
+}
+.radio:active :global(button[aria-checked="true"]) {
+  border-color: var(--sui-primary-accent-color-dark);
+  color: var(--sui-primary-accent-color-dark);
 }
 .radio :global(button) {
   justify-content: center;
   overflow: hidden;
-  border-width: 2px;
+  border-width: 1.5px;
   border-color: var(--sui-checkbox-border-color);
-  border-radius: 24px;
-  width: 20px;
-  height: 20px;
-  color: var(--sui-primary-accent-color-lighter);
+  border-radius: var(--sui-checkbox-height);
+  padding: 0;
+  width: var(--sui-checkbox-height);
+  height: var(--sui-checkbox-height);
+  background-color: var(--sui-checkbox-background-color);
   transition: all 200ms;
 }
-.radio :global(button) :global(.icon) {
-  font-size: 14px;
-  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
+.radio :global(button::before) {
+  content: "";
+  border-radius: var(--sui-checkbox-height);
+  width: calc(var(--sui-checkbox-height) - 7px);
+  height: calc(var(--sui-checkbox-height) - 7px);
+  background-color: var(--sui-primary-accent-color);
+  transition: all 200ms;
+  will-change: opacity;
 }
 .radio :global(button[aria-checked="true"]) {
-  border-color: var(--sui-primary-accent-color-lighter);
-  color: var(--sui-primary-accent-color-lighter);
+  border-color: var(--sui-primary-accent-color);
 }
-.radio :global(button[aria-checked="false"]) {
-  color: transparent;
+.radio :global(button[aria-checked="false"]::before) {
+  opacity: 0;
 }
 .radio label {
   cursor: inherit;

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

@@ -12,10 +12,13 @@ export default class Radio extends SvelteComponent<{
     class?: string;
     name?: string;
     label?: string;
+    checked?: boolean;
     disabled?: boolean;
     value?: string;
-    selected?: boolean;
+    hidden?: boolean;
 }, {
+    select: Event;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
@@ -29,13 +32,16 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        name?: string;
-        label?: string | null;
+        name?: string | undefined;
+        label?: string | undefined;
+        checked?: boolean;
         disabled?: boolean;
-        value?: string | null;
-        selected?: boolean;
+        value?: string | undefined;
+        hidden?: boolean | undefined;
     };
     events: {
+        select: Event;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/package/components/select/combobox.svelte

@@ -8,44 +8,63 @@
   import { createEventDispatcher } from 'svelte';
   import { _ } from 'svelte-i18n';
   import { writable } from 'svelte/store';
+  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import Listbox from '../listbox/listbox.svelte';
   import TextInput from '../text-field/text-input.svelte';
   import Popup from '../util/popup.svelte';
-  import { getRandomId } from '../util/util';
 
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
   /**
-   * Where to show the dropdown menu.
-   * @type {PopupPosition}
+   * Whether to hide the widget. An alias of the `aria-hidden` attribute.
+   * @type {boolean | undefined}
    */
-  export let position = 'bottom-left';
-
+  export let hidden = undefined;
   /**
-   * Whether the textbox is editable.
+   * Whether to disable the widget. An alias of the `aria-disabled` attribute.
+   * @type {boolean}
    */
-  export let readOnly = false;
-
   export let disabled = false;
-
+  /**
+   * 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;
+  /**
+   * Text label displayed on the readonly item.
+   * @type {string}
+   */
   export let label = '';
-
   /**
    * Selected option’s value.
    * @type {(string | number | undefined)}
    */
   export let value = undefined;
+  /**
+   * Where to show the dropdown menu.
+   * @type {PopupPosition}
+   */
+  export let position = 'bottom-left';
 
   const dispatch = createEventDispatcher();
   const id = getRandomId('combobox');
+  /** @type {HTMLElement} */
   let comboboxElement;
   /** @type {TextInput?} */
   let inputComponent;
@@ -54,16 +73,18 @@
   let isPopupOpen = writable(false);
 </script>
 
-<div class="sui combobox {className}" {...$$restProps}>
-  {#if readOnly}
+<div class="sui combobox {className}" class:readonly hidden={hidden || undefined} {...$$restProps}>
+  {#if readonly}
     <div
-      class:selected={value !== undefined}
-      role="combobox"
       {id}
+      class:selected={value !== undefined}
       tabindex={disabled ? -1 : 0}
+      role="combobox"
       aria-controls="{id}-popup"
       aria-expanded={$isPopupOpen}
-      aria-disabled={disabled ? true : undefined}
+      aria-hidden={hidden}
+      aria-disabled={disabled}
+      aria-readonly="true"
       aria-haspopup="listbox"
       aria-activedescendant="selected-option"
       {...$$restProps}
@@ -78,10 +99,13 @@
       role="combobox"
       {id}
       {value}
+      {hidden}
       {disabled}
+      {readonly}
+      {required}
+      {invalid}
       aria-controls="{id}-popup"
       aria-expanded={$isPopupOpen}
-      aria-disabled={disabled ? true : undefined}
       aria-haspopup="listbox"
       aria-activedescendant="selected-option"
       {...$$restProps}
@@ -89,12 +113,13 @@
     />
   {/if}
   <Button
+    variant="ghost"
+    iconic
+    {hidden}
     {disabled}
-    tabindex={readOnly || disabled ? -1 : 0}
+    tabindex={readonly || disabled ? -1 : 0}
     aria-controls="{id}-popup"
     aria-expanded={$isPopupOpen}
-    aria-disabled={disabled ? true : undefined}
-    class="ghost iconic"
     on:click={(event) => {
       event.stopPropagation();
 
@@ -112,8 +137,10 @@
 </div>
 <Popup
   id="{id}-popup"
-  anchor={comboboxElement || inputComponent?.element}
+  class="combobox"
+  anchor={comboboxElement ?? inputComponent?.element}
   {position}
+  touchOptimized={true}
   bind:open={isPopupOpen}
   bind:this={popupComponent}
 >
@@ -138,7 +165,7 @@
   display: flex;
   align-items: center;
   position: relative;
-  min-width: var(--sui-combobox-min-width, 160px);
+  min-width: var(--sui-combobox-min-width, calc(var(--sui-option-height) * 5));
 }
 .combobox :global(.icon) {
   font-size: var(--sui-font-size-xx-large);
@@ -156,6 +183,9 @@
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+.combobox.readonly > :global(button) {
+  background-color: transparent !important;
+}
 .combobox > :global(button[tabindex="-1"]) {
   pointer-events: none;
 }
@@ -164,10 +194,10 @@
   align-items: center;
   border-width: 1px;
   border-color: var(--sui-control-border-color);
-  border-radius: 4px;
-  padding: 0 32px 0 8px;
+  border-radius: var(--sui-textbox-border-radius);
+  padding: 0 var(--sui-textbox-height) 0 calc(var(--sui-textbox-height) / 4);
   width: 100%;
-  height: var(--sui-textbox-medium-height);
+  height: var(--sui-textbox-height);
   color: var(--sui-control-foreground-color);
   background-color: var(--sui-disabled-background-color);
   font-family: var(--sui-control-font-family);
@@ -182,7 +212,7 @@
   font-style: italic;
 }
 .combobox div[role=combobox]:hover, .combobox div[role=combobox]:focus {
-  background-color: var(--sui-highlight-background-color);
+  background-color: var(--sui-hover-background-color);
 }
 .combobox div[role=combobox][aria-disabled=true] {
   background-color: var(--sui-disabled-background-color);
@@ -203,7 +233,7 @@
 .combobox + :global([role="listbox"]) {
   position: fixed;
   z-index: 100;
-  border-radius: 4px;
+  border-radius: var(--sui-control-medium-border-radius);
   box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   overflow: auto;
   background-color: var(--sui-secondary-background-color);

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

@@ -10,10 +10,13 @@ export default class Combobox extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     label?: string;
+    invalid?: boolean;
     disabled?: boolean;
-    readOnly?: boolean;
+    required?: boolean;
     value?: string | number;
     position?: PopupPosition;
+    hidden?: boolean;
+    readonly?: boolean;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -31,10 +34,13 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         label?: string;
+        invalid?: boolean;
         disabled?: boolean;
-        readOnly?: boolean;
+        required?: boolean;
         value?: (string | number | undefined);
         position?: PopupPosition;
+        hidden?: boolean | undefined;
+        readonly?: boolean;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/select/select.svelte

@@ -8,18 +8,39 @@
   import Combobox from './combobox.svelte';
 
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper 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;
+  /**
+   * 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;
+  /**
+   * Text label displayed on the readonly item.
+   * @type {string}
+   */
   export let label = '';
-
   /**
    * Selected option’s value.
-   * @type {string?}
+   * @type {(string | number | undefined)}
    */
   export let value = undefined;
 </script>
@@ -27,8 +48,12 @@
 <Combobox
   bind:value
   class="sui select {className}"
+  {hidden}
+  {disabled}
+  readonly={true}
+  {required}
+  {invalid}
   {label}
-  readOnly={true}
   {...$$restProps}
   on:change
 >

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

@@ -10,7 +10,11 @@ export default class Select extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     label?: string;
-    value?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    value?: string | number;
+    hidden?: boolean;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -28,7 +32,11 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         label?: string;
-        value?: string | null;
+        invalid?: boolean;
+        disabled?: boolean;
+        required?: boolean;
+        value?: (string | number | undefined);
+        hidden?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;