@sveltia/ui 0.2.5 → 0.3.0

package/package/components/{core → button}/button.svelte

@@ -1,5 +1,6 @@
 <!--
   @component
+  A generic button widget based on the HTML `<button>` element.
   @see https://w3c.github.io/aria/#button
   @see https://www.w3.org/WAI/ARIA/apg/patterns/button/
 -->
@@ -151,7 +152,7 @@ button:global(.primary) :global(.label:only-child), button:global(.secondary) :g
   padding: 0 4px;
 }
 button:global(.primary) {
-  border-color: var(--secondary-control-border-color);
+  border-color: var(--control-border-color);
   color: var(--primary-accent-color-foreground);
   background-color: var(--primary-accent-color);
 }
@@ -173,7 +174,7 @@ button:global(.secondary)[aria-pressed=true] {
   background-color: var(--primary-accent-color);
 }
 button:global(.tertiary) {
-  border-color: var(--secondary-control-border-color);
+  border-color: var(--control-border-color);
   color: var(--highlight-foreground-color);
   background-color: var(--tertiary-background-color);
 }

package/package/components/{core → button}/button.svelte.d.ts

@@ -2,19 +2,20 @@
 /** @typedef {typeof __propDef.events}  ButtonEvents */
 /** @typedef {typeof __propDef.slots}  ButtonSlots */
 /**
+ * A generic button widget based on the HTML `<button>` element.
  * @see https://w3c.github.io/aria/#button
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/button/
  */
 export default class Button extends SvelteComponentTyped<{
     [x: string]: any;
     label?: string;
+    disabled?: boolean;
+    type?: "reset" | "submit" | "button";
     class?: string;
     element?: HTMLButtonElement;
-    type?: "reset" | "submit" | "button";
     role?: string;
     size?: "small" | "medium" | "large";
     hidden?: boolean;
-    disabled?: boolean;
     pressed?: boolean | "true" | "false" | "mixed";
     popupPosition?: PopupPosition;
 }, {
@@ -75,13 +76,13 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         label?: string;
+        disabled?: boolean;
+        type?: ('button' | 'submit' | 'reset');
         class?: string;
         element?: HTMLButtonElement | null;
-        type?: ('button' | 'submit' | 'reset');
         role?: string;
         size?: ('small' | 'medium' | 'large');
         hidden?: boolean;
-        disabled?: boolean;
         pressed?: (boolean | 'false' | 'mixed' | 'true' | undefined);
         popupPosition?: PopupPosition;
     };

package/package/components/{composite → button}/select-button-group.svelte

@@ -6,7 +6,7 @@
 -->
 <script>
   import { createEventDispatcher } from 'svelte';
-  import { activateGroup } from '../helpers/group';
+  import { activateGroup } from '../util/group';
 
   /**
    * CSS class name on the button.
@@ -33,8 +33,8 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="sui select-button-group {className}"
+  tabindex="-1"
   role="radiogroup"
-  tabindex="0"
   aria-label={ariaLabel || undefined}
   aria-disabled={disabled ? true : undefined}
   bind:this={element}
@@ -52,6 +52,9 @@
   display: inline-flex;
   align-items: center;
 }
+.select-button-group:focus-visible {
+  outline-width: 0 !important;
+}
 .select-button-group :global(button) {
   border-radius: 0;
   color: var(--secondary-foreground-color);
@@ -60,7 +63,7 @@
   border-radius: 4px 0 0 4px;
 }
 .select-button-group :global(button):not(:first-child) {
-  margin-left: -1px;
+  border-left-width: 0;
 }
 .select-button-group :global(button):last-child {
   border-radius: 0 4px 4px 0;

package/package/components/{composite → calendar}/calendar.svelte

@@ -1,9 +1,13 @@
+<!--
+  @component
+  A calendar (date picker) widget.
+-->
 <script>
   import { _ } from 'svelte-i18n';
-  import Button from '../core/button.svelte';
-  import Icon from '../core/icon.svelte';
-  import Separator from '../core/separator.svelte';
-  import Spacer from '../core/spacer.svelte';
+  import Button from '../button/button.svelte';
+  import Divider from '../divider/divider.svelte';
+  import Spacer from '../divider/spacer.svelte';
+  import Icon from '../icon/icon.svelte';
 
   /** @type {string?} */
   export let value = undefined;
@@ -78,7 +82,7 @@
             {/each}
           </div>
         </div>
-        <Separator orientation="vertical" />
+        <Divider orientation="vertical" />
         <div role="group" aria-label={$_('_sui.calendar.month')}>
           <div class="grid">
             {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] as month}

package/package/components/{composite → calendar}/calendar.svelte.d.ts

@@ -1,6 +1,7 @@
 /** @typedef {typeof __propDef.props}  CalendarProps */
 /** @typedef {typeof __propDef.events}  CalendarEvents */
 /** @typedef {typeof __propDef.slots}  CalendarSlots */
+/** A calendar (date picker) widget. */
 export default class Calendar extends SvelteComponentTyped<{
     value?: string;
 }, {

package/package/components/{composite → checkbox}/checkbox-group.svelte

@@ -1,6 +1,6 @@
 <!--
   @component
-  The container of `<Checkbox>`es.
+  The layout container of `<Checkbox>`es.
 -->
 <script>
   /**

package/package/components/{composite → checkbox}/checkbox-group.svelte.d.ts

@@ -1,11 +1,11 @@
 /** @typedef {typeof __propDef.props}  CheckboxGroupProps */
 /** @typedef {typeof __propDef.events}  CheckboxGroupEvents */
 /** @typedef {typeof __propDef.slots}  CheckboxGroupSlots */
-/** The container of `<Checkbox>`es. */
+/** The layout container of `<Checkbox>`es. */
 export default class CheckboxGroup extends SvelteComponentTyped<{
     [x: string]: any;
     class?: string;
-    orientation?: "horizontal" | "vertical";
+    orientation?: "vertical" | "horizontal";
     ariaLabel?: string;
 }, {
     [evt: string]: CustomEvent<any>;

package/package/components/{core → checkbox}/checkbox.svelte

@@ -1,13 +1,15 @@
 <!--
   @component
+  The equivalent of the HTML `<input type="checkbox">` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
   @see https://w3c.github.io/aria/#checkbox
   @see https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
 -->
 <script>
   import { createEventDispatcher } from 'svelte';
-  import { getRandomId } from '../helpers/util';
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
+  import { getRandomId } from '../util/util';
 
   /**
    * CSS class name on the button.
@@ -107,7 +109,7 @@
   justify-content: center;
   overflow: hidden;
   border-width: 2px;
-  border-color: var(--primary-control-border-color);
+  border-color: var(--checkbox-border-color);
   border-radius: 4px;
   width: 20px;
   height: 20px;
@@ -123,7 +125,7 @@
   background-color: var(--primary-accent-color-lighter);
 }
 .checkbox :global(button[aria-checked="mixed"]) {
-  color: var(--primary-control-border-color);
+  color: var(--checkbox-border-color);
 }
 .checkbox :global(button[aria-checked="false"]) {
   color: transparent;

package/package/components/{core → checkbox}/checkbox.svelte.d.ts

@@ -2,15 +2,17 @@
 /** @typedef {typeof __propDef.events}  CheckboxEvents */
 /** @typedef {typeof __propDef.slots}  CheckboxSlots */
 /**
+ * The equivalent of the HTML `<input type="checkbox">` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
  * @see https://w3c.github.io/aria/#checkbox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
  */
 export default class Checkbox extends SvelteComponentTyped<{
     label?: string;
-    class?: string;
     disabled?: boolean;
     name?: string;
     value?: string;
+    class?: string;
     checked?: string | boolean;
     indeterminate?: boolean;
 }, {
@@ -28,10 +30,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         label?: string | null;
-        class?: string;
         disabled?: boolean;
         name?: string;
         value?: string | null;
+        class?: string;
         checked?: (boolean | string | undefined);
         indeterminate?: boolean;
     };

package/package/components/{core → dialog}/dialog.svelte

@@ -1,14 +1,15 @@
 <!--
   @component
+  A feedback dialog widget based on the HTML `<dialog>` element.
   @see https://w3c.github.io/aria/#dialog
   @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 -->
 <script>
   import { createEventDispatcher, onMount } from 'svelte';
   import { _ } from 'svelte-i18n';
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
-  import Spacer from './spacer.svelte';
+  import Button from '../button/button.svelte';
+  import Spacer from '../divider/spacer.svelte';
+  import Icon from '../icon/icon.svelte';
 
   /**
    * CSS class name on the button.

package/package/components/{core → dialog}/dialog.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  DialogEvents */
 /** @typedef {typeof __propDef.slots}  DialogSlots */
 /**
+ * A feedback dialog widget based on the HTML `<dialog>` element.
  * @see https://w3c.github.io/aria/#dialog
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  */

package/package/components/{composite → disclosure}/disclosure.svelte

@@ -1,12 +1,13 @@
 <!--
   @component
-  @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+  A disclosure (expander) widget. The equivalent of the HTML `<details>` element.
   @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
 -->
 <script>
-  import Button from '../core/button.svelte';
-  import Icon from '../core/icon.svelte';
-  import { getRandomId } from '../helpers/util';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
+  import { getRandomId } from '../util/util';
 
   /**
    * CSS class name on the button.

package/package/components/{composite → disclosure}/disclosure.svelte.d.ts

@@ -2,8 +2,9 @@
 /** @typedef {typeof __propDef.events}  DisclosureEvents */
 /** @typedef {typeof __propDef.slots}  DisclosureSlots */
 /**
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+ * A disclosure (expander) widget. The equivalent of the HTML `<details>` element.
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
  */
 export default class Disclosure extends SvelteComponentTyped<{
     label?: string;

package/package/components/{core/separator.svelte → divider/divider.svelte}

@@ -1,5 +1,6 @@
 <!--
   @component
+  A content divider with a visible vertical/horizontal line.
   @see https://w3c.github.io/aria/#separator
 -->
 <script>
@@ -15,15 +16,15 @@
   export { className as class };
 </script>
 
-<div role="separator" class="sui separator {className}" aria-orientation={orientation} />
+<div role="separator" class="sui divider {className}" aria-orientation={orientation} />
 
-<style>.separator {
+<style>.divider {
   flex: none;
   background-color: var(--secondary-border-color);
 }
-.separator[aria-orientation=horizontal] {
+.divider[aria-orientation=horizontal] {
   height: 1px;
 }
-.separator[aria-orientation=vertical] {
+.divider[aria-orientation=vertical] {
   width: 1px;
 }</style>

package/package/components/divider/divider.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  DividerProps */
+/** @typedef {typeof __propDef.events}  DividerEvents */
+/** @typedef {typeof __propDef.slots}  DividerSlots */
+/**
+ * A content divider with a visible vertical/horizontal line.
+ * @see https://w3c.github.io/aria/#separator
+ */
+export default class Divider extends SvelteComponentTyped<{
+    class?: string;
+    orientation?: "vertical" | "horizontal";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DividerProps = typeof __propDef.props;
+export type DividerEvents = typeof __propDef.events;
+export type DividerSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        orientation?: ('horizontal' | 'vertical');
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/{core → divider}/spacer.svelte

@@ -1,3 +1,7 @@
+<!--
+  @component
+  A content divider with no line. It can be flexible.
+-->
 <script>
   /**
    * CSS class name on the button.

package/package/components/{core → divider}/spacer.svelte.d.ts

@@ -1,6 +1,7 @@
 /** @typedef {typeof __propDef.props}  SpacerProps */
 /** @typedef {typeof __propDef.events}  SpacerEvents */
 /** @typedef {typeof __propDef.slots}  SpacerSlots */
+/** A content divider with no line. It can be flexible. */
 export default class Spacer extends SvelteComponentTyped<{
     class?: string;
     flex?: boolean;

package/package/components/{core → drawer}/drawer.svelte

@@ -1,14 +1,15 @@
 <!--
   @component
+  A generic drawer widget based on the HTML `<dialog>` element.
   @see https://w3c.github.io/aria/#dialog
   @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 -->
 <script>
   import { createEventDispatcher, onMount } from 'svelte';
   import { _ } from 'svelte-i18n';
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
-  import Spacer from './spacer.svelte';
+  import Button from '../button/button.svelte';
+  import Spacer from '../divider/spacer.svelte';
+  import Icon from '../icon/icon.svelte';
 
   /**
    * CSS class name on the button.

package/package/components/{core → drawer}/drawer.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  DrawerEvents */
 /** @typedef {typeof __propDef.slots}  DrawerSlots */
 /**
+ * A generic drawer widget based on the HTML `<dialog>` element.
  * @see https://w3c.github.io/aria/#dialog
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  */

package/package/components/{core → icon}/icon.svelte

@@ -1,3 +1,8 @@
+<!--
+  @component
+  A Material Symbols icon.
+  @see https://developers.google.com/fonts/docs/material_symbols
+-->
 <script>
   /**
    * CSS class name on the button.

package/package/components/{core → icon}/icon.svelte.d.ts

@@ -1,10 +1,14 @@
 /** @typedef {typeof __propDef.props}  IconProps */
 /** @typedef {typeof __propDef.events}  IconEvents */
 /** @typedef {typeof __propDef.slots}  IconSlots */
+/**
+ * A Material Symbols icon.
+ * @see https://developers.google.com/fonts/docs/material_symbols
+ */
 export default class Icon extends SvelteComponentTyped<{
     label?: string;
-    class?: string;
     name?: string;
+    class?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -16,8 +20,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         label?: string;
-        class?: string;
         name?: string;
+        class?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/listbox/listbox.svelte

@@ -0,0 +1,74 @@
+<!--
+  @component
+  A list widget with selectable options. The equivalent of the HTML `<select multiple>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
+  @see https://w3c.github.io/aria/#listbox
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
+-->
+<svelte:options accessors={true} />
+
+<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;
+
+  export let multiple = false;
+</script>
+
+<div
+  class="sui listbox {className}"
+  tabindex="0"
+  role="listbox"
+  aria-multiselectable={multiple}
+  {...$$restProps}
+  bind:this={element}
+  on:click
+  on:select
+  use:activateGroup
+>
+  <slot />
+</div>
+
+<style>[role=listbox] {
+  display: flex;
+  flex-direction: column;
+  color: inherit;
+  margin: 0;
+  border-width: 1px;
+  border-color: var(--control-border-color);
+  border-radius: 4px;
+  padding: 4px;
+  min-width: 160px;
+}
+[role=listbox] :global([role="separator"]) {
+  margin: 4px;
+}
+[role=listbox]:global(.tabs) {
+  padding: 0;
+  border-width: 0 1px 0 0;
+  border-color: var(--control-border-color);
+}
+[role=listbox]:global(.tabs) :global(.option button) {
+  justify-content: flex-start;
+  border-width: 0 2px 0 0;
+  border-color: transparent;
+  padding: 0 12px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  height: var(--tab--medium--height);
+}
+[role=listbox]:global(.tabs) :global(.option button) :global(.icon) {
+  display: none;
+}
+[role=listbox]:global(.tabs) :global(.option button[aria-selected="true"]) {
+  border-color: var(--primary-accent-color-lighter);
+}</style>

package/package/components/{composite → listbox}/listbox.svelte.d.ts

@@ -2,6 +2,8 @@
 /** @typedef {typeof __propDef.events}  ListboxEvents */
 /** @typedef {typeof __propDef.slots}  ListboxSlots */
 /**
+ * A list widget with selectable options. The equivalent of the HTML `<select multiple>` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
  * @see https://w3c.github.io/aria/#listbox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
  */

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

@@ -0,0 +1,47 @@
+<!--
+  @component
+  A group within a `<Listbox>`. The equivalent of the HTML `<optgroup>` element. It can contain one
+  or more `<Option>`s.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
+  @see https://w3c.github.io/aria/#listbox
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/
+-->
+<script>
+  import { getRandomId } from '../util/util';
+
+  /**
+   * CSS class name on the group.
+   * @type {string}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /**
+   * The group’s label to be displayed above the child `<Option>`s.
+   */
+  export let label = '';
+
+  const id = getRandomId('optgroup');
+</script>
+
+<div
+  {id}
+  class="sui optgroup {className}"
+  role="group"
+  aria-labelledby="{id}-label"
+  {...$$restProps}
+>
+  <div id="{id}-label" class="label" role="none">{label}</div>
+  <slot />
+</div>
+
+<style>.optgroup:not(:first-child) {
+  margin: 12px 0 0;
+}
+
+.label {
+  margin: 8px;
+  color: var(--secondary-foreground-color);
+  font-size: var(--font-size--small);
+}</style>

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

@@ -0,0 +1,38 @@
+/** @typedef {typeof __propDef.props}  OptionGroupProps */
+/** @typedef {typeof __propDef.events}  OptionGroupEvents */
+/** @typedef {typeof __propDef.slots}  OptionGroupSlots */
+/**
+ * A group within a `<Listbox>`. The equivalent of the HTML `<optgroup>` element. It can contain one
+ * or more `<Option>`s.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
+ * @see https://w3c.github.io/aria/#listbox
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/
+ */
+export default class OptionGroup extends SvelteComponentTyped<{
+    [x: string]: any;
+    label?: string;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type OptionGroupProps = typeof __propDef.props;
+export type OptionGroupEvents = typeof __propDef.events;
+export type OptionGroupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        label?: string;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};