@sveltia/ui 0.6.6 → 0.7.1

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

@@ -4,39 +4,52 @@
   @see https://w3c.github.io/aria/#tablist
   @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
 -->
-<svelte:options accessors={true} />
-
 <script>
-  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 };
-
-  /** @type {HTMLElement?} */
-  export let element = undefined;
-
-  /** @type {('horizontal'|'vertical')} */
+  /**
+   * 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;
+  /**
+   * Orientation of the widget. An alias of the `aria-orientation` attribute.
+   * @type {'horizontal' | 'vertical'}
+   */
   export let orientation = 'horizontal';
-
-  export let name = '';
+  /**
+   * The `data-name` attribute on the wrapper element.
+   * @type {string | undefined}
+   */
+  export let name = undefined;
 </script>
 
 <div
   class="sui tab-list {className}"
   role="tablist"
+  hidden={hidden || undefined}
+  aria-hidden={hidden}
+  aria-disabled={disabled}
   aria-orientation={orientation}
   data-name={name || undefined}
   {...$$restProps}
-  bind:this={element}
-  on:select
   use:activateGroup
+  on:change
 >
-  <slot />
+  <div class="inner" inert={disabled}>
+    <slot />
+  </div>
 </div>
 
 <style>.tab-list {
@@ -73,5 +86,9 @@
   height: var(--sui-tab-medium-height);
 }
 .tab-list :global(button[aria-selected="true"]) {
-  border-color: var(--sui-primary-accent-color-lighter);
+  border-color: var(--sui-primary-accent-color-light);
+}
+
+.inner {
+  display: contents;
 }</style>

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

@@ -10,27 +10,16 @@ export default class TabList extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     name?: string;
-    element?: HTMLElement;
+    disabled?: boolean;
+    hidden?: boolean;
     orientation?: "vertical" | "horizontal";
 }, {
-    select: Event;
+    change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
 }> {
-    /**accessor*/
-    set class(arg: string);
-    get class(): string;
-    /**accessor*/
-    set element(arg: HTMLElement);
-    get element(): HTMLElement;
-    /**accessor*/
-    set orientation(arg: "vertical" | "horizontal");
-    get orientation(): "vertical" | "horizontal";
-    /**accessor*/
-    set name(arg: string);
-    get name(): string;
 }
 export type TabListProps = typeof __propDef.props;
 export type TabListEvents = typeof __propDef.events;
@@ -40,12 +29,13 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        name?: string;
-        element?: HTMLElement | null;
-        orientation?: ('horizontal' | 'vertical');
+        name?: string | undefined;
+        disabled?: boolean;
+        hidden?: boolean | undefined;
+        orientation?: 'horizontal' | 'vertical';
     };
     events: {
-        select: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/tabs/tab-panel.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/tabs/tab.svelte

@@ -8,15 +8,37 @@
   import Button from '../button/button.svelte';
 
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the `<button>` element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
+  /**
+   * Whether to select the widget. An alias of the `aria-selected` attribute.
+   * @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;
 </script>
 
-<Button role="tab" class="sui tab {className}" {...$$restProps}>
+<Button
+  class="sui tab {className}"
+  role="tab"
+  {hidden}
+  {disabled}
+  aria-selected={selected}
+  {...$$restProps}
+  on:select
+>
   <slot name="start-icon" slot="start-icon" />
   <slot />
   <slot name="end-icon" slot="end-icon" />

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

@@ -9,7 +9,12 @@
 export default class Tab extends SvelteComponent<{
     [x: string]: any;
     class?: string;
+    disabled?: boolean;
+    hidden?: boolean;
+    selected?: boolean;
 }, {
+    select: Event;
+} & {
     [evt: string]: CustomEvent<any>;
 }, {
     'start-icon': {
@@ -29,8 +34,13 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
+        disabled?: boolean;
+        hidden?: boolean | undefined;
+        selected?: boolean;
     };
     events: {
+        select: Event;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

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

@@ -10,10 +10,36 @@
   import Toolbar from '../toolbar/toolbar.svelte';
   import TextArea from './text-area.svelte';
 
-  /** @type {string?} */
-  export let value = undefined;
-
+  /**
+   * 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 `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;
+  /**
+   * Input value.
+   * @type {string | undefined}
+   */
+  export let value = undefined;
 
   const defaultButtons = [
     { name: 'bold', label: $_('_sui.markdown_editor.bold'), icon: 'format_bold' },
@@ -46,37 +72,43 @@
   ];
 </script>
 
-<div>
-  <Toolbar aria-label={$_('_sui.markdown_editor.markdown_editor')}>
-    {#each defaultButtons as { label, icon, separator }}
-      {#if separator}
-        <Divider />
-      {:else}
-        <Button {disabled}>
-          <Icon slot="start-icon" name={icon} {label} />
-        </Button>
-      {/if}
-    {/each}
-  </Toolbar>
-  <TextArea autoResize={true} {disabled} bind:value />
+<div class="wrapper" class:disabled hidden={hidden || undefined} {...$$restProps}>
+  <div class="inner" inert={disabled}>
+    <Toolbar 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>
+        {/if}
+      {/each}
+    </Toolbar>
+    <TextArea autoResize={true} bind:value {hidden} {disabled} {readonly} {required} {invalid} />
+  </div>
 </div>
 
-<style>div {
+<style>.wrapper {
   display: contents;
 }
-div :global([role="toolbar"]) {
+.wrapper :global([role="toolbar"]) {
   display: flex;
-  gap: 8px;
+  gap: 0;
   border-radius: 4px 4px 0 0;
   padding: 8px;
   background-color: var(--sui-tertiary-background-color);
 }
-div :global([role="toolbar"]) :global(button) {
+.wrapper :global([role="toolbar"]) :global(button) {
   flex: none;
 }
-div :global([role="toolbar"]) + :global(div) {
+.wrapper :global([role="toolbar"]) + :global(div) {
   width: 100%;
 }
-div :global([role="toolbar"]) + :global(div) :global(textarea) {
+.wrapper :global([role="toolbar"]) + :global(div) :global(textarea) {
   border-radius: 0 0 4px 4px !important;
+}
+
+.inner {
+  display: contents;
 }</style>

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

@@ -3,8 +3,13 @@
 /** @typedef {typeof __propDef.slots}  MarkdownEditorSlots */
 /** A Markdown text editor. */
 export default class MarkdownEditor extends SvelteComponent<{
+    [x: string]: any;
+    invalid?: boolean;
     disabled?: boolean;
+    required?: boolean;
     value?: string;
+    hidden?: boolean;
+    readonly?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -15,8 +20,13 @@ export type MarkdownEditorSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
+        invalid?: boolean;
         disabled?: boolean;
-        value?: string | null;
+        required?: boolean;
+        value?: string | undefined;
+        hidden?: boolean | undefined;
+        readonly?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -11,25 +11,65 @@
   import TextInput from './text-input.svelte';
 
   /**
-   * 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 value = undefined;
-
+  /**
+   * 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 `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;
+  /**
+   * Input value.
+   * @type {string | undefined}
+   */
+  export let value = undefined;
+  /**
+   * Minimum allowed value.
+   * @type {number | undefined}
+   */
   export let min = undefined;
+  /**
+   * Maximum allowed value.
+   * @type {number | undefined}
+   */
   export let max = undefined;
+  /**
+   * Value to be added or removed when using the up/down arrow key or button.
+   */
   export let step = 1;
 
   $: 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);
+
   let component;
 
   /**
@@ -55,14 +95,19 @@
   };
 </script>
 
-<div class="sui number-input {className}">
+<div class="sui number-input {className}" class:disabled hidden={hidden || undefined}>
   <TextInput
     bind:this={component}
     bind:value
-    {disabled}
     role="spinbutton"
+    {hidden}
+    {disabled}
+    {readonly}
+    {required}
+    {invalid}
     aria-valuenow={Number(value || 0)}
-    aria-invalid={value !== undefined && Number.isNaN(Number(value))}
+    aria-valuemin={min}
+    aria-valuemax={max}
     {...$$restProps}
     on:keydown={(event) => {
       const { key, ctrlKey, metaKey, altKey, shiftKey } = event;
@@ -82,7 +127,7 @@
     on:input
   />
   <Button
-    class="iconic"
+    iconic
     disabled={disabled || Number.isNaN(Number(value)) || isMin}
     on:click={() => {
       decrease();
@@ -91,7 +136,7 @@
     <Icon slot="start-icon" name="arrow_downward" label={$_('_sui.number_input.decrease')} />
   </Button>
   <Button
-    class="iconic"
+    iconic
     disabled={disabled || Number.isNaN(Number(value)) || isMax}
     on:click={() => {
       increase();
@@ -107,14 +152,14 @@
   align-items: center;
 }
 .number-input :global(input) {
-  border-radius: 4px 0 0 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 .number-input :global(button) {
   flex: none;
   border-width: 1px;
-  border-color: var(--sui-control-border-color);
-  width: 32px;
-  height: var(--sui-textbox-medium-height);
+  border-color: var(--sui-textbox-border-color);
+  width: var(--sui-textbox-height);
 }
 .number-input :global(button):first-of-type {
   border-radius: 0;
@@ -125,4 +170,10 @@
 }
 .number-input :global(button) :global(.icon) {
   font-size: var(--sui-font-size-xx-large);
+}
+.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);
 }</style>

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

@@ -9,11 +9,15 @@
 export default class NumberInput extends SvelteComponent<{
     [x: string]: any;
     class?: string;
+    invalid?: boolean;
     disabled?: boolean;
-    max?: any;
-    min?: any;
+    max?: number;
+    min?: number;
+    required?: boolean;
     step?: number;
     value?: string;
+    hidden?: boolean;
+    readonly?: boolean;
 }, {
     keypress: KeyboardEvent;
     input: Event;
@@ -29,11 +33,15 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
+        invalid?: boolean;
         disabled?: boolean;
-        max?: any;
-        min?: any;
+        max?: number | undefined;
+        min?: number | undefined;
+        required?: boolean;
         step?: number;
-        value?: string | null;
+        value?: string | undefined;
+        hidden?: boolean | undefined;
+        readonly?: boolean;
     };
     events: {
         keypress: KeyboardEvent;

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

@@ -12,14 +12,40 @@
   import TextInput from './text-input.svelte';
 
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the wrapper element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
-  /** @type {string?} */
+  /**
+   * 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 `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;
+  /**
+   * Input value.
+   * @type {string | undefined}
+   */
   export let value = undefined;
 
   /**
@@ -35,18 +61,24 @@
   }
 </script>
 
-<div class="sui password-input {className}">
+<div class="sui password-input {className}" class:disabled hidden={hidden || undefined}>
   <TextInput
     bind:this={inputComponent}
     bind:value
     type="password"
+    {hidden}
+    {disabled}
+    {readonly}
+    {required}
+    {invalid}
     {...$$restProps}
     on:input
     on:keypress
     on:change
   />
   <Button
-    class="iconic"
+    iconic
+    {disabled}
     pressed={passwordVisible}
     on:click={() => {
       passwordVisible = !passwordVisible;
@@ -66,14 +98,15 @@
   align-items: center;
 }
 .password-input :global(input) {
-  border-radius: 4px 0 0 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 .password-input :global(button) {
   flex: none;
   margin-left: -1px;
   border-width: 1px;
-  border-color: var(--sui-control-border-color);
-  height: var(--sui-textbox-medium-height);
+  border-color: var(--sui-textbox-border-color);
+  width: var(--sui-textbox-height);
   aspect-ratio: 1/1;
 }
 .password-input :global(button):last-child {

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

@@ -10,7 +10,12 @@
 export default class PasswordInput extends SvelteComponent<{
     [x: string]: any;
     class?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    required?: boolean;
     value?: string;
+    hidden?: boolean;
+    readonly?: boolean;
 }, {
     input: Event;
     keypress: KeyboardEvent;
@@ -27,7 +32,12 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        value?: string | null;
+        invalid?: boolean;
+        disabled?: boolean;
+        required?: boolean;
+        value?: string | undefined;
+        hidden?: boolean | undefined;
+        readonly?: boolean;
     };
     events: {
         input: Event;