@sveltia/ui 0.7.4 → 0.8.0

package/package/components/table/table-row.svelte.d.ts

@@ -9,11 +9,7 @@
 export default class TableRow extends SvelteComponent<{
     [x: string]: any;
     class?: string;
-    selected?: boolean;
 }, {
-    click: MouseEvent;
-    select: Event;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
@@ -27,12 +23,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        selected?: boolean;
     };
     events: {
-        click: MouseEvent;
-        select: Event;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/package/components/table/table.svelte

@@ -2,37 +2,25 @@
   @component
   The equivalent of the HTML `<table>` element.
   @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
-  @see https://w3c.github.io/aria/#grid
+  @see https://w3c.github.io/aria/#table
 -->
 <script>
-  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 };
-
-  /** @type {HTMLElement?} */
-  export let element = undefined;
 </script>
 
-<div
-  role="grid"
-  class="sui table {className}"
-  {...$$restProps}
-  bind:this={element}
-  use:activateGroup
-  on:change
->
+<div role="table" class="sui table {className}" {...$$restProps}>
   <slot />
 </div>
 
 <style>.table {
   display: table;
-  width: 100%;
+  margin: var(--sui-focus-ring-width);
+  width: calc(100% - var(--sui-focus-ring-width) * 2);
 }
 .table:global(.data) {
   border-collapse: collapse;

package/package/components/table/table.svelte.d.ts

@@ -4,15 +4,12 @@
 /**
  * The equivalent of the HTML `<table>` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
- * @see https://w3c.github.io/aria/#grid
+ * @see https://w3c.github.io/aria/#table
  */
 export default class Table extends SvelteComponent<{
     [x: string]: any;
     class?: string;
-    element?: HTMLElement;
 }, {
-    change: Event;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
@@ -26,11 +23,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        element?: HTMLElement | null;
     };
     events: {
-        change: Event;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/package/components/tabs/tab-list.svelte

@@ -36,8 +36,8 @@
 </script>
 
 <div
-  class="sui tab-list {className}"
   role="tablist"
+  class="sui tab-list {className}"
   hidden={hidden || undefined}
   aria-hidden={hidden}
   aria-disabled={disabled}
@@ -47,7 +47,7 @@
   use:activateGroup
   on:change
 >
-  <div class="inner" inert={disabled}>
+  <div role="none" class="inner" inert={disabled}>
     <slot />
   </div>
 </div>
@@ -55,11 +55,12 @@
 <style>.tab-list {
   display: flex;
   align-items: center;
+  margin: var(--sui-focus-ring-width);
   border-color: var(--sui-control-border-color);
 }
 .tab-list[aria-orientation=horizontal] {
-  gap: 16px;
-  margin: 0 0 32px;
+  gap: 8px;
+  margin-bottom: 32px;
   border-width: 0 0 1px;
   padding: 0 16px;
 }
@@ -69,7 +70,7 @@
 .tab-list[aria-orientation=vertical] {
   gap: 8px;
   flex-direction: column;
-  margin: 0 32px 0 0;
+  margin-right: 32px;
   border-width: 0 1px 0 0;
   padding: 8px 0;
   width: 240px;
@@ -81,6 +82,7 @@
 .tab-list :global(button) {
   justify-content: flex-start;
   border-color: transparent;
+  margin: 0 !important;
   padding: 0;
   border-radius: 0;
   height: var(--sui-tab-medium-height);

package/package/components/tabs/tab-panel.svelte

@@ -13,7 +13,7 @@
   export { className as class };
 </script>
 
-<div class="sui tabpanel {className}" role="tabpanel" {...$$restProps}>
+<div role="tabpanel" class="sui tabpanel {className}" {...$$restProps}>
   <slot />
 </div>
 

package/package/components/tabs/tab.svelte

@@ -31,13 +31,14 @@
 </script>
 
 <Button
-  class="sui tab {className}"
   role="tab"
+  class="sui tab {className}"
   {hidden}
   {disabled}
   aria-selected={selected}
   {...$$restProps}
   on:select
+  on:change
 >
   <slot name="start-icon" slot="start-icon" />
   <slot />

package/package/components/tabs/tab.svelte.d.ts

@@ -14,6 +14,7 @@ export default class Tab extends SvelteComponent<{
     selected?: boolean;
 }, {
     select: Event;
+    change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -40,6 +41,7 @@ declare const __propDef: {
     };
     events: {
         select: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -4,12 +4,18 @@
 -->
 <script>
   import { _ } from 'svelte-i18n';
+  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
   import Divider from '../divider/divider.svelte';
   import Icon from '../icon/icon.svelte';
   import Toolbar from '../toolbar/toolbar.svelte';
   import TextArea from './text-area.svelte';
 
+  /**
+   * Make the text input container flexible.
+   * @type {boolean}
+   */
+  export let flex = false;
   /**
    * Whether to hide the widget. An alias of the `aria-hidden` attribute.
    * @type {boolean | undefined}
@@ -26,12 +32,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;
@@ -41,6 +47,8 @@
    */
   export let value = undefined;
 
+  const id = getRandomId('editor');
+
   const defaultButtons = [
     { name: 'bold', label: $_('_sui.markdown_editor.bold'), icon: 'format_bold' },
     { name: 'italic', label: $_('_sui.markdown_editor.italic'), icon: 'format_italic' },
@@ -72,25 +80,39 @@
   ];
 </script>
 
-<div class="wrapper" class:disabled hidden={hidden || undefined} {...$$restProps}>
-  <div class="inner" inert={disabled}>
-    <Toolbar aria-label={$_('_sui.markdown_editor.markdown_editor')}>
+<div role="none" class="wrapper" hidden={hidden || undefined} {...$$restProps}>
+  <div role="none" 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}>
-            <Icon slot="start-icon" name={icon} {label} />
+          <Button iconic aria-label={label} aria-controls={id}>
+            <Icon slot="start-icon" name={icon} />
           </Button>
         {/if}
       {/each}
     </Toolbar>
-    <TextArea autoResize={true} bind:value {hidden} {disabled} {readonly} {required} {invalid} />
+    <TextArea
+      {id}
+      autoResize={true}
+      bind:value
+      {flex}
+      {hidden}
+      {disabled}
+      {readonly}
+      {required}
+      {invalid}
+    />
   </div>
 </div>
 
 <style>.wrapper {
-  display: contents;
+  margin: var(--sui-focus-ring-width);
+  width: calc(100% - var(--sui-focus-ring-width) * 2);
 }
 .wrapper :global([role="toolbar"]) {
   display: flex;
@@ -101,6 +123,7 @@
 }
 .wrapper :global([role="toolbar"]) :global(button) {
   flex: none;
+  margin: 0 !important;
 }
 .wrapper :global([role="toolbar"]) + :global(div) {
   width: 100%;
@@ -111,4 +134,8 @@
 
 .inner {
   display: contents;
+}
+.inner :global(.text-area) {
+  margin: 0 !important;
+  width: 100% !important;
 }</style>

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

@@ -10,6 +10,7 @@ export default class MarkdownEditor extends SvelteComponent<{
     value?: string;
     hidden?: boolean;
     readonly?: boolean;
+    flex?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -27,6 +28,7 @@ declare const __propDef: {
         value?: string | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean;
+        flex?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/text-field/number-input.svelte

@@ -6,6 +6,7 @@
 -->
 <script>
   import { _ } from 'svelte-i18n';
+  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
@@ -16,6 +17,11 @@
    */
   let className = '';
   export { className as class };
+  /**
+   * Make the text input container flexible.
+   * @type {boolean}
+   */
+  export let flex = false;
   /**
    * Whether to hide the widget. An alias of the `aria-hidden` attribute.
    * @type {boolean | undefined}
@@ -32,12 +38,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;
@@ -61,14 +67,20 @@
    */
   export let step = 1;
 
+  const id = getRandomId('input');
+  let edited = false;
+
   $: maximumFractionDigits = String(step).split('.')[1]?.length || 0;
   $: isMin = typeof min === 'number' && Number(value || 0) <= min;
   $: isMax = typeof max === 'number' && Number(value || 0) >= max;
 
   $: invalid =
-    (value !== undefined && Number.isNaN(Number(value))) ||
-    (typeof min === 'number' && Number(value || 0) < min) ||
-    (typeof max === 'number' && Number(value || 0) > max);
+    (required && edited && (value === undefined || value === '')) ||
+    (value !== undefined &&
+      value !== '' &&
+      (Number.isNaN(Number(value)) ||
+        (typeof min === 'number' && Number(value || 0) < min) ||
+        (typeof max === 'number' && Number(value || 0) > max)));
 
   let component;
 
@@ -95,11 +107,44 @@
   };
 </script>
 
-<div class="sui number-input {className}" class:disabled hidden={hidden || undefined}>
+<div
+  role="none"
+  class="sui number-input {className}"
+  class:flex
+  class:disabled
+  class:readonly
+  hidden={hidden || undefined}
+>
+  <div role="none" class="buttons">
+    <Button
+      iconic
+      disabled={disabled || readonly || Number.isNaN(Number(value)) || isMax}
+      aria-label={$_('_sui.number_input.increase')}
+      aria-controls={id}
+      on:click={() => {
+        increase();
+      }}
+    >
+      <Icon slot="start-icon" name="expand_less" />
+    </Button>
+    <Button
+      iconic
+      disabled={disabled || readonly || Number.isNaN(Number(value)) || isMin}
+      aria-label={$_('_sui.number_input.decrease')}
+      aria-controls={id}
+      on:click={() => {
+        decrease();
+      }}
+    >
+      <Icon slot="start-icon" name="expand_more" />
+    </Button>
+  </div>
   <TextInput
-    bind:this={component}
-    bind:value
     role="spinbutton"
+    {id}
+    bind:value
+    spellcheck="false"
+    {flex}
     {hidden}
     {disabled}
     {readonly}
@@ -108,7 +153,9 @@
     aria-valuenow={Number(value || 0)}
     aria-valuemin={min}
     aria-valuemax={max}
+    inputmode={maximumFractionDigits > 0 ? 'decimal' : 'numeric'}
     {...$$restProps}
+    bind:this={component}
     on:keydown={(event) => {
       const { key, ctrlKey, metaKey, altKey, shiftKey } = event;
       const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
@@ -122,58 +169,75 @@
         event.preventDefault();
         increase();
       }
+
+      if (!edited) {
+        edited = true;
+      }
     }}
     on:keypress
     on:input
   />
-  <Button
-    iconic
-    disabled={disabled || Number.isNaN(Number(value)) || isMin}
-    on:click={() => {
-      decrease();
-    }}
-  >
-    <Icon slot="start-icon" name="arrow_downward" label={$_('_sui.number_input.decrease')} />
-  </Button>
-  <Button
-    iconic
-    disabled={disabled || Number.isNaN(Number(value)) || isMax}
-    on:click={() => {
-      increase();
-    }}
-  >
-    <Icon slot="start-icon" name={'arrow_upward'} label={$_('_sui.number_input.increase')} />
-  </Button>
 </div>
 
 <style>.number-input {
-  width: 100%;
   display: inline-flex;
   align-items: center;
+  margin: var(--sui-focus-ring-width);
+  min-width: var(--sui-textbox-singleline-min-width);
 }
-.number-input :global(input) {
+.number-input.flex {
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: stretch;
+  min-width: 0;
+}
+.number-input :global(:not(:first-child) input) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.number-input :global(:not(:last-child) input) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-.number-input :global(button) {
+.number-input:not(.disabled) :global(button[aria-disabled="true"]) {
+  filter: grayscale(0) opacity(1);
+}
+.number-input:not(.disabled) :global(button[aria-disabled="true"]) :global(*) {
+  filter: grayscale(1) opacity(0.35);
+}
+.number-input :global(.text-input) {
+  flex: auto;
+  margin: 0 !important;
+  width: 0;
+  min-width: 0 !important;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: column;
+  width: 24px;
+  height: var(--sui-textbox-height);
+}
+.buttons :global(button) {
   flex: none;
+  margin: 0 !important;
   border-width: 1px;
   border-color: var(--sui-textbox-border-color);
-  width: var(--sui-textbox-height);
-}
-.number-input :global(button):first-of-type {
-  border-radius: 0;
-  border-width: 1px 0;
-}
-.number-input :global(button):last-of-type {
-  border-radius: 0 4px 4px 0;
+  width: 100%;
+  height: 50%;
 }
-.number-input :global(button) :global(.icon) {
-  font-size: var(--sui-font-size-xx-large);
+.buttons :global(button):first-of-type {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  border-width: 1px 0 0 1px;
 }
-.number-input:not(.disabled) :global(button[aria-disabled="true"]) {
-  filter: grayscale(0) opacity(1);
+.buttons :global(button):last-of-type {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-width: 0 0 1px 1px;
 }
-.number-input:not(.disabled) :global(button[aria-disabled="true"]) :global(*) {
-  filter: grayscale(1) opacity(0.35);
+.buttons :global(button) :global(.icon) {
+  font-size: 20px;
 }</style>

package/package/components/text-field/number-input.svelte.d.ts

@@ -18,6 +18,7 @@ export default class NumberInput extends SvelteComponent<{
     value?: string;
     hidden?: boolean;
     readonly?: boolean;
+    flex?: boolean;
 }, {
     keypress: KeyboardEvent;
     input: Event;
@@ -42,6 +43,7 @@ declare const __propDef: {
         value?: string | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean;
+        flex?: boolean;
     };
     events: {
         keypress: KeyboardEvent;

package/package/components/text-field/password-input.svelte

@@ -7,6 +7,7 @@
 -->
 <script>
   import { _ } from 'svelte-i18n';
+  import { getRandomId } from '../../services/util';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
@@ -17,6 +18,11 @@
    */
   let className = '';
   export { className as class };
+  /**
+   * Make the text input container flexible.
+   * @type {boolean}
+   */
+  export let flex = false;
   /**
    * Whether to hide the widget. An alias of the `aria-hidden` attribute.
    * @type {boolean | undefined}
@@ -33,12 +39,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;
@@ -48,6 +54,8 @@
    */
   export let value = undefined;
 
+  const id = getRandomId('input');
+
   /**
    * @type {TextInput}
    */
@@ -61,41 +69,64 @@
   }
 </script>
 
-<div class="sui password-input {className}" class:disabled hidden={hidden || undefined}>
+<div
+  role="none"
+  class="sui password-input {className}"
+  class:flex
+  class:disabled
+  class:readonly
+  hidden={hidden || undefined}
+>
   <TextInput
-    bind:this={inputComponent}
+    {id}
     bind:value
     type="password"
+    spellcheck="false"
+    {flex}
     {hidden}
     {disabled}
     {readonly}
     {required}
     {invalid}
     {...$$restProps}
+    bind:this={inputComponent}
     on:input
     on:keypress
     on:change
   />
   <Button
     iconic
-    {disabled}
+    disabled={disabled || readonly}
     pressed={passwordVisible}
+    aria-label={$_(
+      passwordVisible ? '_sui.password_input.hide_password' : '_sui.password_input.show_password',
+    )}
+    aria-controls={id}
     on:click={() => {
       passwordVisible = !passwordVisible;
     }}
   >
-    <Icon
-      slot="start-icon"
-      name={passwordVisible ? 'visibility_off' : 'visibility'}
-      label={$_('_sui.password_input.show_password')}
-    />
+    <Icon slot="start-icon" name={passwordVisible ? 'visibility_off' : 'visibility'} />
   </Button>
 </div>
 
 <style>.password-input {
-  width: 100%;
   display: inline-flex;
   align-items: center;
+  margin: var(--sui-focus-ring-width);
+  min-width: var(--sui-textbox-singleline-min-width);
+}
+.password-input.flex {
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: stretch;
+  min-width: 0;
+}
+.password-input :global(.text-input) {
+  flex: auto;
+  margin: 0 !important;
+  width: 0;
+  min-width: 0 !important;
 }
 .password-input :global(input) {
   border-top-right-radius: 0;
@@ -103,7 +134,7 @@
 }
 .password-input :global(button) {
   flex: none;
-  margin-left: -1px;
+  margin: 0 0 0 -1px;
   border-width: 1px;
   border-color: var(--sui-textbox-border-color);
   width: var(--sui-textbox-height);

package/package/components/text-field/password-input.svelte.d.ts

@@ -16,6 +16,7 @@ export default class PasswordInput extends SvelteComponent<{
     value?: string;
     hidden?: boolean;
     readonly?: boolean;
+    flex?: boolean;
 }, {
     input: Event;
     keypress: KeyboardEvent;
@@ -38,6 +39,7 @@ declare const __propDef: {
         value?: string | undefined;
         hidden?: boolean | undefined;
         readonly?: boolean;
+        flex?: boolean;
     };
     events: {
         input: Event;