@sveltia/ui 0.7.5 → 0.8.0

package/package/components/grid/grid-cell.svelte.d.ts

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  GridCellProps */
+/** @typedef {typeof __propDef.events}  GridCellEvents */
+/** @typedef {typeof __propDef.slots}  GridCellSlots */
+/**
+ * The interactive version of `<TableCell>`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
+ * @see https://w3c.github.io/aria/#gridcell
+ */
+export default class GridCell extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridCellProps = typeof __propDef.props;
+export type GridCellEvents = typeof __propDef.events;
+export type GridCellSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/grid/grid-col-header.svelte

@@ -0,0 +1,22 @@
+<!--
+  @component
+  The interactive version of `<TableColHeader>`.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+  @see https://w3c.github.io/aria/#columnheader
+-->
+<script>
+  /**
+   * The `class` attribute on the wrapper element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+</script>
+
+<div role="columnheader" class="sui grid-col-header {className}" {...$$restProps}>
+  <slot />
+</div>
+
+<style>.grid-col-header {
+  display: table-cell;
+}</style>

package/package/components/grid/grid-col-header.svelte.d.ts

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  GridColHeaderProps */
+/** @typedef {typeof __propDef.events}  GridColHeaderEvents */
+/** @typedef {typeof __propDef.slots}  GridColHeaderSlots */
+/**
+ * The interactive version of `<TableColHeader>`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+ * @see https://w3c.github.io/aria/#columnheader
+ */
+export default class GridColHeader extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridColHeaderProps = typeof __propDef.props;
+export type GridColHeaderEvents = typeof __propDef.events;
+export type GridColHeaderSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/grid/grid-foot.svelte

@@ -0,0 +1,27 @@
+<!--
+  @component
+  The interactive version of `<TableFoot>`.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot
+  @see https://w3c.github.io/aria/#rowgroup
+-->
+<script>
+  /**
+   * The `class` attribute on the wrapper element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+</script>
+
+<div
+  role="rowgroup"
+  class="sui grid-foot {className}"
+  aria-roledescription="grid foot"
+  {...$$restProps}
+>
+  <slot />
+</div>
+
+<style>.grid-foot {
+  display: table-footer-group;
+}</style>

package/package/components/grid/grid-foot.svelte.d.ts

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  GridFootProps */
+/** @typedef {typeof __propDef.events}  GridFootEvents */
+/** @typedef {typeof __propDef.slots}  GridFootSlots */
+/**
+ * The interactive version of `<TableFoot>`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot
+ * @see https://w3c.github.io/aria/#rowgroup
+ */
+export default class GridFoot extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridFootProps = typeof __propDef.props;
+export type GridFootEvents = typeof __propDef.events;
+export type GridFootSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/grid/grid-head.svelte

@@ -0,0 +1,27 @@
+<!--
+  @component
+  The interactive version of `<TableThead>`.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
+  @see https://w3c.github.io/aria/#rowgroup
+-->
+<script>
+  /**
+   * The `class` attribute on the wrapper element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+</script>
+
+<div
+  role="rowgroup"
+  class="sui grid-head {className}"
+  aria-roledescription="grid head"
+  {...$$restProps}
+>
+  <slot />
+</div>
+
+<style>.grid-head {
+  display: table-header-group;
+}</style>

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

@@ -0,0 +1,34 @@
+/** @typedef {typeof __propDef.props}  GridHeadProps */
+/** @typedef {typeof __propDef.events}  GridHeadEvents */
+/** @typedef {typeof __propDef.slots}  GridHeadSlots */
+/**
+ * The interactive version of `<TableThead>`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
+ * @see https://w3c.github.io/aria/#rowgroup
+ */
+export default class GridHead extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridHeadProps = typeof __propDef.props;
+export type GridHeadEvents = typeof __propDef.events;
+export type GridHeadSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

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

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

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

package/package/components/grid/grid-row.svelte

@@ -0,0 +1,37 @@
+<!--
+  @component
+  The interactive version of `<TableRow>`.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
+  @see https://w3c.github.io/aria/#row
+-->
+<script>
+  /**
+   * The `class` attribute on the wrapper 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;
+</script>
+
+<div
+  role="row"
+  class="sui grid-row {className}"
+  tabindex="0"
+  aria-selected={selected}
+  {...$$restProps}
+  on:click
+  on:select
+  on:change
+>
+  <slot />
+</div>
+
+<style>.grid-row {
+  display: table-row;
+  height: var(--sui-primary-row-height);
+}</style>

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

@@ -0,0 +1,44 @@
+/** @typedef {typeof __propDef.props}  GridRowProps */
+/** @typedef {typeof __propDef.events}  GridRowEvents */
+/** @typedef {typeof __propDef.slots}  GridRowSlots */
+/**
+ * The interactive version of `<TableRow>`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
+ * @see https://w3c.github.io/aria/#row
+ */
+export default class GridRow extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
+    selected?: boolean;
+}, {
+    click: MouseEvent;
+    select: Event;
+    change: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridRowProps = typeof __propDef.props;
+export type GridRowEvents = typeof __propDef.events;
+export type GridRowSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        selected?: boolean;
+    };
+    events: {
+        click: MouseEvent;
+        select: Event;
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/grid/grid.svelte

@@ -0,0 +1,52 @@
+<!--
+  @component
+  The interactive version of `<Table>`.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
+  @see https://w3c.github.io/aria/#grid
+-->
+<script>
+  import { activateGroup } from '../../services/group';
+
+  /**
+   * The `class` attribute on the wrapper element.
+   * @type {string}
+   */
+  let className = '';
+  export { className as class };
+  /**
+   * Whether to allow selecting more than one `<GridRow>` and/or `<GridCell>`. An alias of the
+   * `aria-multiselectable` attribute.
+   * @type {boolean}
+   */
+  export let multiple = false;
+
+  /** @type {HTMLElement?} */
+  export let element = undefined;
+</script>
+
+<div
+  role="grid"
+  class="sui grid {className}"
+  aria-multiselectable={multiple}
+  {...$$restProps}
+  bind:this={element}
+  use:activateGroup
+  on:change
+>
+  <slot />
+</div>
+
+<style>.grid {
+  display: table;
+  margin: var(--sui-focus-ring-width);
+  width: calc(100% - var(--sui-focus-ring-width) * 2);
+}
+.grid:global(.data) {
+  border-collapse: collapse;
+}
+.grid:global(.data) :global(.grid-col-header),
+.grid:global(.data) :global(.grid-row-header),
+.grid:global(.data) :global(.grid-cell) {
+  border: 1px solid var(--sui-secondary-border-color);
+  padding: 8px 8px;
+}</style>

package/package/components/grid/grid.svelte.d.ts

@@ -0,0 +1,42 @@
+/** @typedef {typeof __propDef.props}  GridProps */
+/** @typedef {typeof __propDef.events}  GridEvents */
+/** @typedef {typeof __propDef.slots}  GridSlots */
+/**
+ * The interactive version of `<Table>`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
+ * @see https://w3c.github.io/aria/#grid
+ */
+export default class Grid extends SvelteComponent<{
+    [x: string]: any;
+    class?: string;
+    multiple?: boolean;
+    element?: HTMLElement;
+}, {
+    change: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridProps = typeof __propDef.props;
+export type GridEvents = typeof __propDef.events;
+export type GridSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        multiple?: boolean;
+        element?: HTMLElement | null;
+    };
+    events: {
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/icon/icon.svelte

@@ -5,22 +5,21 @@
 -->
 <script>
   /**
-   * CSS class name on the button.
+   * The `class` attribute on the `span` element.
    * @type {string}
    */
   let className = '';
-
   export { className as class };
-
+  /**
+   * Icon name, e.g. `search`, `expand_more`, `close`, etc.
+   * @type {string}
+   */
   export let name = '';
-
-  export let label = '';
 </script>
 
 <span
   class="sui icon material-symbols-outlined {className}"
-  aria-label={label || undefined}
-  aria-hidden={label ? undefined : true}
+  aria-hidden={!('aria-label' in $$restProps)}
   {...$$restProps}
 >
   {name}

package/package/components/icon/icon.svelte.d.ts

@@ -9,7 +9,6 @@ export default class Icon extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     name?: string;
-    label?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -23,7 +22,6 @@ declare const __propDef: {
         [x: string]: any;
         class?: string;
         name?: string;
-        label?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/listbox/listbox.svelte

@@ -48,9 +48,9 @@
 </script>
 
 <div
+  role="listbox"
   class="sui listbox {className}"
   tabindex={disabled ? -1 : 0}
-  role="listbox"
   hidden={hidden || undefined}
   aria-hidden={hidden}
   aria-disabled={disabled}
@@ -63,7 +63,7 @@
   on:click
   on:change
 >
-  <div class="inner" inert={disabled}>
+  <div role="none" class="inner" inert={disabled}>
     <slot />
   </div>
 </div>
@@ -71,7 +71,7 @@
 <style>[role=listbox] {
   display: flex;
   flex-direction: column;
-  margin: 0;
+  margin: var(--sui-focus-ring-width);
   border-width: 1px;
   border-color: var(--sui-listbox-border-color);
   border-radius: var(--sui-listbox-border-radius);

package/package/components/listbox/option-group.svelte

@@ -34,22 +34,23 @@
 </script>
 
 <div
-  {id}
-  class="sui optgroup {className}"
   role="group"
+  {id}
+  class="sui option-group {className}"
   hidden={hidden || undefined}
   aria-hidden={hidden}
   aria-disabled={disabled}
   aria-labelledby="{id}-label"
+  aria-roledescription="option group"
   {...$$restProps}
 >
-  <div id="{id}-label" class="label" role="none">{label}</div>
-  <div class="inner" inert={disabled}>
+  <div role="none" id="{id}-label" class="label">{label}</div>
+  <div role="none" class="inner" inert={disabled}>
     <slot />
   </div>
 </div>
 
-<style>.optgroup:not(:first-child) {
+<style>.option-group:not(:first-child) {
   margin: 12px 0 0;
 }
 

package/package/components/listbox/option.svelte

@@ -5,7 +5,6 @@
   @see https://w3c.github.io/aria/#option
 -->
 <script>
-  import { onMount } from 'svelte';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
 
@@ -40,37 +39,12 @@
    * @type {string | undefined}
    */
   export let value = undefined;
-
-  /**
-   * Reference to the `Button` component.
-   * @type {Button | undefined}
-   */
-  let buttonComponent;
-
-  /**
-   * Event listener for the `select` event fired in `group.js`.
-   * @param {CustomEvent} event `select` event.
-   */
-  const listener = ({ type }) => {
-    selected = type === 'select';
-  };
-
-  onMount(() => {
-    buttonComponent.element.addEventListener('select', listener);
-    buttonComponent.element.addEventListener('unselect', listener);
-
-    return () => {
-      buttonComponent.element.removeEventListener('select', listener);
-      buttonComponent.element.removeEventListener('unselect', listener);
-    };
-  });
 </script>
 
-<div class="sui option {className}" hidden={hidden || undefined}>
+<div role="none" class="sui option {className}" hidden={hidden || undefined}>
   <Button
-    bind:this={buttonComponent}
-    tabindex="-1"
     role="option"
+    tabindex="-1"
     aria-selected={selected}
     {label}
     {value}
@@ -84,6 +58,10 @@
     on:dragend
     on:drop
     on:select
+    on:change
+    on:change={(event) => {
+      selected = /** @type {CustomEvent} */ (event).detail.selected;
+    }}
   >
     {#if selected}
       <Icon class="check" name="check" />
@@ -105,6 +83,7 @@
   display: flex;
   justify-content: space-between;
   gap: 4px;
+  margin: 0 !important;
   border-radius: var(--sui-option-border-radius);
   padding: var(--sui-option-padding);
   width: 100%;

package/package/components/listbox/option.svelte.d.ts

@@ -21,6 +21,7 @@ export default class Option extends SvelteComponent<{
     dragend: DragEvent;
     drop: DragEvent;
     select: Event;
+    change: Event;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -54,6 +55,7 @@ declare const __propDef: {
         dragend: DragEvent;
         drop: DragEvent;
         select: Event;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };