@sveltia/ui 0.7.5 → 0.8.0

package/package/components/table/table-foot.svelte

@@ -6,15 +6,19 @@
 -->
 <script>
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
 </script>
 
-<div role="rowgroup" class="sui table-foot {className}" {...$$restProps}>
+<div
+  role="rowgroup"
+  class="sui table-foot {className}"
+  aria-roledescription="table foot"
+  {...$$restProps}
+>
   <slot />
 </div>
 

package/package/components/table/table-head.svelte

@@ -6,15 +6,19 @@
 -->
 <script>
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
 </script>
 
-<div role="rowgroup" class="sui table-head {className}" {...$$restProps}>
+<div
+  role="rowgroup"
+  class="sui table-head {className}"
+  aria-roledescription="table head"
+  {...$$restProps}
+>
   <slot />
 </div>
 

package/package/components/table/table-row-header.svelte

@@ -6,11 +6,10 @@
 -->
 <script>
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
 </script>
 

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

@@ -11,22 +11,9 @@
    */
   let className = '';
   export { className as class };
-  /**
-   * Whether to select the widget. An alias of the `aria-selected` attribute.
-   * @type {boolean}
-   */
-  export let selected = false;
 </script>
 
-<div
-  class="sui table-row {className}"
-  role="row"
-  tabindex="0"
-  aria-selected={selected}
-  {...$$restProps}
-  on:click
-  on:select
->
+<div role="row" class="sui table-row {className}" {...$$restProps}>
   <slot />
 </div>
 

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}
@@ -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,8 +80,8 @@
   ];
 </script>
 
-<div class="wrapper" hidden={hidden || undefined} {...$$restProps}>
-  <div class="inner">
+<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')}
@@ -82,18 +90,29 @@
         {#if separator}
           <Divider />
         {:else}
-          <Button iconic>
-            <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;
@@ -104,6 +123,7 @@
 }
 .wrapper :global([role="toolbar"]) :global(button) {
   flex: none;
+  margin: 0 !important;
 }
 .wrapper :global([role="toolbar"]) + :global(div) {
   width: 100%;
@@ -114,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}
@@ -61,6 +67,7 @@
    */
   export let step = 1;
 
+  const id = getRandomId('input');
   let edited = false;
 
   $: maximumFractionDigits = String(step).split('.')[1]?.length || 0;
@@ -101,35 +108,43 @@
 </script>
 
 <div
+  role="none"
   class="sui number-input {className}"
+  class:flex
   class:disabled
   class:readonly
   hidden={hidden || undefined}
 >
-  <div class="buttons">
+  <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" label={$_('_sui.number_input.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" label={$_('_sui.number_input.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}
@@ -140,6 +155,7 @@
     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;
@@ -164,9 +180,16 @@
 </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.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;
@@ -182,6 +205,12 @@
 .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;
@@ -191,6 +220,7 @@
 }
 .buttons :global(button) {
   flex: none;
+  margin: 0 !important;
   border-width: 1px;
   border-color: var(--sui-textbox-border-color);
   width: 100%;

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}
@@ -48,6 +54,8 @@
    */
   export let value = undefined;
 
+  const id = getRandomId('input');
+
   /**
    * @type {TextInput}
    */
@@ -62,21 +70,26 @@
 </script>
 
 <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
@@ -85,22 +98,35 @@
     iconic
     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;
@@ -108,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;