@sveltia/ui 0.2.5 → 0.3.1

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

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  TableHeadProps */
+/** @typedef {typeof __propDef.events}  TableHeadEvents */
+/** @typedef {typeof __propDef.slots}  TableHeadSlots */
+/**
+ * The equivalent of the HTML `<thead>` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
+ * @see https://w3c.github.io/aria/#rowgroup
+ */
+export default class TableHead extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableHeadProps = typeof __propDef.props;
+export type TableHeadEvents = typeof __propDef.events;
+export type TableHeadSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,23 @@
+<!--
+  @component
+  The equivalent of the HTML `<th scope="row">` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+  @see https://w3c.github.io/aria/#rowheader
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="rowheader" class="sui table-row-header {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style>.table-row-header {
+  display: table-cell;
+}</style>

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

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  TableRowHeaderProps */
+/** @typedef {typeof __propDef.events}  TableRowHeaderEvents */
+/** @typedef {typeof __propDef.slots}  TableRowHeaderSlots */
+/**
+ * The equivalent of the HTML `<th scope="row">` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+ * @see https://w3c.github.io/aria/#rowheader
+ */
+export default class TableRowHeader extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableRowHeaderProps = typeof __propDef.props;
+export type TableRowHeaderEvents = typeof __propDef.events;
+export type TableRowHeaderSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,23 @@
+<!--
+  @component
+  The equivalent of the HTML `<tr>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
+  @see https://w3c.github.io/aria/#row
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="row" tabindex="0" class="sui table-row {className}" {...$$restProps} on:click>
+  <slot />
+</div>
+
+<style>.table-row {
+  display: table-row;
+}</style>

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

@@ -0,0 +1,38 @@
+/** @typedef {typeof __propDef.props}  TableRowProps */
+/** @typedef {typeof __propDef.events}  TableRowEvents */
+/** @typedef {typeof __propDef.slots}  TableRowSlots */
+/**
+ * The equivalent of the HTML `<tr>` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
+ * @see https://w3c.github.io/aria/#row
+ */
+export default class TableRow extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableRowProps = typeof __propDef.props;
+export type TableRowEvents = typeof __propDef.events;
+export type TableRowSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/table/table.svelte

@@ -0,0 +1,44 @@
+<!--
+  @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
+-->
+<script>
+  import { activateGroup } from '../util/group';
+
+  /**
+   * CSS class name on the button.
+   * @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
+>
+  <slot />
+</div>
+
+<style>.table {
+  display: table;
+  width: 100%;
+}
+.table:global(.data) {
+  border-collapse: collapse;
+}
+.table:global(.data) :global(.table-col-header),
+.table:global(.data) :global(.table-row-header),
+.table:global(.data) :global(.table-cell) {
+  border: 1px solid var(--secondary-border-color);
+  padding: 8px 8px;
+}</style>

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

@@ -0,0 +1,36 @@
+/** @typedef {typeof __propDef.props}  TableProps */
+/** @typedef {typeof __propDef.events}  TableEvents */
+/** @typedef {typeof __propDef.slots}  TableSlots */
+/**
+ * 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
+ */
+export default class Table extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    element?: HTMLElement;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        element?: HTMLElement | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/{composite → tabs}/tab-list.svelte

@@ -1,12 +1,13 @@
 <!--
   @component
+  A tab list widget.
   @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 '../helpers/group';
+  import { activateGroup } from '../util/group';
 
   /**
    * CSS class name on the button.
@@ -41,7 +42,7 @@
 <style>.tab-list {
   display: flex;
   align-items: center;
-  border-color: var(--secondary-control-border-color);
+  border-color: var(--control-border-color);
 }
 .tab-list[aria-orientation=horizontal] {
   gap: 16px;

package/package/components/{composite → tabs}/tab-list.svelte.d.ts

@@ -2,15 +2,16 @@
 /** @typedef {typeof __propDef.events}  TabListEvents */
 /** @typedef {typeof __propDef.slots}  TabListSlots */
 /**
+ * A tab list widget.
  * @see https://w3c.github.io/aria/#tablist
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */
 export default class TabList extends SvelteComponentTyped<{
     [x: string]: any;
+    name?: string;
     class?: string;
     element?: HTMLElement;
-    name?: string;
-    orientation?: "horizontal" | "vertical";
+    orientation?: "vertical" | "horizontal";
 }, {
     select: Event;
 } & {
@@ -25,8 +26,8 @@ export default class TabList extends SvelteComponentTyped<{
     set element(arg: HTMLElement);
     get element(): HTMLElement;
     /**accessor*/
-    set orientation(arg: "horizontal" | "vertical");
-    get orientation(): "horizontal" | "vertical";
+    set orientation(arg: "vertical" | "horizontal");
+    get orientation(): "vertical" | "horizontal";
     /**accessor*/
     set name(arg: string);
     get name(): string;
@@ -38,9 +39,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        name?: string;
         class?: string;
         element?: HTMLElement | null;
-        name?: string;
         orientation?: ('horizontal' | 'vertical');
     };
     events: {

package/package/components/{core → tabs}/tab-panel.svelte

@@ -1,5 +1,6 @@
 <!--
   @component
+  A tab content panel.
   @see https://w3c.github.io/aria/#tabpanel
   @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
 -->

package/package/components/{core → tabs}/tab-panel.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  TabPanelEvents */
 /** @typedef {typeof __propDef.slots}  TabPanelSlots */
 /**
+ * A tab content panel.
  * @see https://w3c.github.io/aria/#tabpanel
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */

package/package/components/{core → tabs}/tab.svelte

@@ -1,10 +1,11 @@
 <!--
   @component
+  A tab widget.
   @see https://w3c.github.io/aria/#tab
   @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
 -->
 <script>
-  import Button from './button.svelte';
+  import Button from '../button/button.svelte';
 
   /**
    * CSS class name on the button.

package/package/components/{core → tabs}/tab.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  TabEvents */
 /** @typedef {typeof __propDef.slots}  TabSlots */
 /**
+ * A tab widget.
  * @see https://w3c.github.io/aria/#tab
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */

package/package/components/{editor/markdown.svelte → text-field/markdown-editor.svelte}

@@ -1,10 +1,14 @@
+<!--
+  @component
+  A Markdown text editor.
+-->
 <script>
   import { _ } from 'svelte-i18n';
-  import Button from '../core/button.svelte';
-  import Icon from '../core/icon.svelte';
-  import Separator from '../core/separator.svelte';
-  import TextArea from '../core/text-area.svelte';
-  import Toolbar from '../core/toolbar.svelte';
+  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';
 
   /** @type {string?} */
   export let value = undefined;
@@ -46,7 +50,7 @@
   <Toolbar aria-label={$_('_sui.markdown_editor.markdown_editor')}>
     {#each defaultButtons as { label, icon, separator }}
       {#if separator}
-        <Separator />
+        <Divider />
       {:else}
         <Button {disabled}>
           <Icon slot="start-icon" name={icon} {label} />

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

@@ -0,0 +1,26 @@
+/** @typedef {typeof __propDef.props}  MarkdownEditorProps */
+/** @typedef {typeof __propDef.events}  MarkdownEditorEvents */
+/** @typedef {typeof __propDef.slots}  MarkdownEditorSlots */
+/** A Markdown text editor. */
+export default class MarkdownEditor extends SvelteComponentTyped<{
+    disabled?: boolean;
+    value?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MarkdownEditorProps = typeof __propDef.props;
+export type MarkdownEditorEvents = typeof __propDef.events;
+export type MarkdownEditorSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        disabled?: boolean;
+        value?: string | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/{core → text-field}/number-input.svelte

@@ -1,11 +1,13 @@
 <!--
   @component
+  The equivalent of the HTML `<input type="number">` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
   @see https://w3c.github.io/aria/#textbox
 -->
 <script>
   import { _ } from 'svelte-i18n';
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
 
   /**
@@ -64,13 +66,14 @@
     {...$$restProps}
     on:keydown={(event) => {
       const { key, ctrlKey, metaKey, altKey, shiftKey } = event;
+      const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
 
-      if (key === 'ArrowDown' && !ctrlKey && !metaKey && !altKey && !shiftKey) {
+      if (key === 'ArrowDown' && !hasModifier) {
         event.preventDefault();
         decrease();
       }
 
-      if (key === 'ArrowUp' && !ctrlKey && !metaKey && !altKey && !shiftKey) {
+      if (key === 'ArrowUp' && !hasModifier) {
         event.preventDefault();
         increase();
       }
@@ -108,13 +111,16 @@
 }
 .number-input :global(button) {
   flex: none;
-  margin-left: -1px;
   border-width: 1px;
-  border-color: var(--secondary-control-border-color);
+  border-color: var(--control-border-color);
   width: 32px;
   height: var(--input--medium--height);
 }
-.number-input :global(button):last-child {
+.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;
 }
 .number-input :global(button) :global(.icon) {

package/package/components/{core → text-field}/number-input.svelte.d.ts

@@ -1,12 +1,16 @@
 /** @typedef {typeof __propDef.props}  NumberInputProps */
 /** @typedef {typeof __propDef.events}  NumberInputEvents */
 /** @typedef {typeof __propDef.slots}  NumberInputSlots */
-/** @see https://w3c.github.io/aria/#textbox */
+/**
+ * The equivalent of the HTML `<input type="number">` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
+ * @see https://w3c.github.io/aria/#textbox
+ */
 export default class NumberInput extends SvelteComponentTyped<{
     [x: string]: any;
-    class?: string;
     disabled?: boolean;
     value?: string;
+    class?: string;
     min?: any;
     max?: any;
     step?: number;
@@ -24,9 +28,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
         disabled?: boolean;
         value?: string | null;
+        class?: string;
         min?: any;
         max?: any;
         step?: number;

package/package/components/{core → text-field}/password-input.svelte

@@ -1,11 +1,14 @@
 <!--
   @component
+  The equivalent of the HTML `<input type="password">` element, but it comes with the Show/Hide
+  button.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
   @see https://w3c.github.io/aria/#textbox
 -->
 <script>
   import { _ } from 'svelte-i18n';
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
 
   /**
@@ -69,7 +72,7 @@
   flex: none;
   margin-left: -1px;
   border-width: 1px;
-  border-color: var(--secondary-control-border-color);
+  border-color: var(--control-border-color);
   height: var(--input--medium--height);
   aspect-ratio: 1/1;
 }

package/package/components/{core → text-field}/password-input.svelte.d.ts

@@ -1,11 +1,16 @@
 /** @typedef {typeof __propDef.props}  PasswordInputProps */
 /** @typedef {typeof __propDef.events}  PasswordInputEvents */
 /** @typedef {typeof __propDef.slots}  PasswordInputSlots */
-/** @see https://w3c.github.io/aria/#textbox */
+/**
+ * The equivalent of the HTML `<input type="password">` element, but it comes with the Show/Hide
+ * button.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
+ * @see https://w3c.github.io/aria/#textbox
+ */
 export default class PasswordInput extends SvelteComponentTyped<{
     [x: string]: any;
-    class?: string;
     value?: string;
+    class?: string;
 }, {
     input: Event;
     keypress: KeyboardEvent;
@@ -21,8 +26,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
         value?: string | null;
+        class?: string;
     };
     events: {
         input: Event;

package/package/components/{core → text-field}/search-bar.svelte

@@ -1,13 +1,16 @@
 <!--
   @component
+  The equivalent of the HTML `<input type="search">` element. It comes with a magnifier icon and
+  clear button.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
   @see https://w3c.github.io/aria/#search
 -->
 <svelte:options accessors={true} />
 
 <script>
   import { _ } from 'svelte-i18n';
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
 
   /**

package/package/components/{core → text-field}/search-bar.svelte.d.ts

@@ -1,12 +1,17 @@
 /** @typedef {typeof __propDef.props}  SearchBarProps */
 /** @typedef {typeof __propDef.events}  SearchBarEvents */
 /** @typedef {typeof __propDef.slots}  SearchBarSlots */
-/** @see https://w3c.github.io/aria/#search */
+/**
+ * The equivalent of the HTML `<input type="search">` element. It comes with a magnifier icon and
+ * clear button.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
+ * @see https://w3c.github.io/aria/#search
+ */
 export default class SearchBar extends SvelteComponentTyped<{
     [x: string]: any;
     focus?: () => void;
-    class?: string;
     value?: string;
+    class?: string;
 }, {
     input: Event;
     keydown: KeyboardEvent;
@@ -32,8 +37,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         focus?: () => void;
-        class?: string;
         value?: string;
+        class?: string;
     };
     events: {
         input: Event;

package/package/components/{core → text-field}/text-area.svelte

@@ -1,5 +1,7 @@
 <!--
   @component
+  A multi-line text field. The equivalent of the HTML `<textarea>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
   @see https://w3c.github.io/aria/#textbox
 -->
 <svelte:options accessors={true} />
@@ -101,7 +103,7 @@ textarea {
   display: block;
   margin: 0;
   border-width: 1px;
-  border-color: var(--secondary-control-border-color);
+  border-color: var(--control-border-color);
   border-radius: var(--input--medium--border-radius);
   background-color: var(--control-background-color);
   padding: 8px;

package/package/components/{core → text-field}/text-area.svelte.d.ts

@@ -1,13 +1,17 @@
 /** @typedef {typeof __propDef.props}  TextAreaProps */
 /** @typedef {typeof __propDef.events}  TextAreaEvents */
 /** @typedef {typeof __propDef.slots}  TextAreaSlots */
-/** @see https://w3c.github.io/aria/#textbox */
+/**
+ * A multi-line text field. The equivalent of the HTML `<textarea>` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
+ * @see https://w3c.github.io/aria/#textbox
+ */
 export default class TextArea extends SvelteComponentTyped<{
     [x: string]: any;
-    class?: string;
-    element?: HTMLTextAreaElement;
     name?: string;
     value?: string;
+    class?: string;
+    element?: HTMLTextAreaElement;
     autoResize?: boolean;
 }, {
     click: MouseEvent;
@@ -39,10 +43,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        element?: HTMLTextAreaElement | null;
         name?: string;
         value?: string | null;
+        class?: string;
+        element?: HTMLTextAreaElement | null;
         autoResize?: boolean;
     };
     events: {