@sveltia/ui 0.2.4 → 0.3.0

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

@@ -1,7 +1,8 @@
 <!--
   @component
+  A generic button widget based on the HTML `<button>` element.
   @see https://w3c.github.io/aria/#button
-  @see https://w3c.github.io/aria-practices/#button
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/button/
 -->
 <svelte:options accessors={true} />
 

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://w3c.github.io/aria-practices/#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

@@ -1,12 +1,12 @@
 <!--
   @component
-  A variant of `<RadioButtonGroup>`, looking like normal buttons.
+  A variant of `<RadioGroup>`, looking like normal buttons.
   @see https://w3c.github.io/aria/#radiogroup
-  @see https://w3c.github.io/aria-practices/#radiobutton
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
 -->
 <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 → button}/select-button-group.svelte.d.ts

@@ -2,15 +2,15 @@
 /** @typedef {typeof __propDef.events}  SelectButtonGroupEvents */
 /** @typedef {typeof __propDef.slots}  SelectButtonGroupSlots */
 /**
- * A variant of `<RadioButtonGroup>`, looking like normal buttons.
+ * A variant of `<RadioGroup>`, looking like normal buttons.
  * @see https://w3c.github.io/aria/#radiogroup
- * @see https://w3c.github.io/aria-practices/#radiobutton
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
 export default class SelectButtonGroup extends SvelteComponentTyped<{
-    class?: string;
-    element?: HTMLElement;
     disabled?: boolean;
     value?: string;
+    class?: string;
+    element?: HTMLElement;
     ariaLabel?: string;
 }, {
     change: CustomEvent<any>;
@@ -26,10 +26,10 @@ export type SelectButtonGroupSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        class?: string;
-        element?: HTMLElement | null;
         disabled?: boolean;
         value?: string;
+        class?: string;
+        element?: HTMLElement | null;
         ariaLabel?: string;
     };
     events: {

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

@@ -1,8 +1,8 @@
 <!--
   @component
-  A variant of `<RadioButton>`, looking like a normal button.
+  A variant of `<Radio>`, looking like a normal button.
   @see https://w3c.github.io/aria/#radio
-  @see https://w3c.github.io/aria-practices/#radiobutton
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
 -->
 <script>
   import Button from './button.svelte';

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

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  SelectButtonEvents */
 /** @typedef {typeof __propDef.slots}  SelectButtonSlots */
 /**
- * A variant of `<RadioButton>`, looking like a normal button.
+ * A variant of `<Radio>`, looking like a normal button.
  * @see https://w3c.github.io/aria/#radio
- * @see https://w3c.github.io/aria-practices/#radiobutton
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
 export default class SelectButton extends SvelteComponentTyped<{
     [x: string]: any;

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>
   /**
@@ -32,11 +32,12 @@
 
 <style>.checkbox-group {
   display: inline-flex;
-  gap: 16px;
 }
 .checkbox-group.horizontal {
+  gap: 16px;
   align-items: center;
 }
 .checkbox-group.vertical {
+  gap: 8px;
   flex-direction: column;
 }</style>

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://w3c.github.io/aria-practices/#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.
@@ -20,6 +22,9 @@
   /** @type {string} */
   export let name = '';
 
+  /** @type {string?} */
+  export let label = undefined;
+
   /** @type {string?} */
   export let value = undefined;
 
@@ -35,7 +40,7 @@
   const dispatch = createEventDispatcher();
   const id = getRandomId('checkbox');
   /** @type {Button} */
-  let button;
+  let buttonComponent;
 </script>
 
 {#if name && value && checked && !indeterminate}
@@ -43,24 +48,26 @@
 {/if}
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<label
+<span
   class="sui checkbox {className}"
   class:checked
   class:indeterminate
   class:disabled
   on:click|preventDefault|stopPropagation={(event) => {
     if (!(/** @type {HTMLElement} */ (event.target).matches('button'))) {
-      button.element.click();
+      buttonComponent.element.click();
     }
   }}
 >
   <Button
     {id}
     {disabled}
+    {name}
+    {value}
     role="checkbox"
     aria-checked={indeterminate ? 'mixed' : checked}
     aria-labelledby="{id}-label"
-    bind:this={button}
+    bind:this={buttonComponent}
     on:click={(event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -71,12 +78,16 @@
   >
     <Icon slot="start-icon" name={indeterminate ? 'remove' : 'check'} />
   </Button>
-  {#if $$slots.default}
+  {#if $$slots.default || label}
     <label id="{id}-label">
-      <slot />
+      {#if $$slots.default}
+        <slot />
+      {:else}
+        {label}
+      {/if}
     </label>
   {/if}
-</label>
+</span>
 
 <style>.checkbox {
   display: inline-flex;
@@ -90,25 +101,35 @@
 .checkbox.disabled {
   cursor: default;
 }
+.checkbox.disabled label {
+  color: var(--disabled-foreground-color);
+}
 .checkbox :global(button) {
   align-items: center;
   justify-content: center;
   overflow: hidden;
   border-width: 2px;
-  border-color: var(--control-border-color);
+  border-color: var(--checkbox-border-color);
   border-radius: 4px;
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   color: var(--primary-accent-color-lighter);
   transition: all 200ms;
 }
 .checkbox :global(button) :global(.icon) {
-  font-size: var(--font-size--xx-large);
+  font-size: 20px;
+}
+.checkbox :global(button[aria-checked="true"]) {
+  border-color: var(--primary-accent-color-lighter);
+  color: var(--control-background-color);
+  background-color: var(--primary-accent-color-lighter);
 }
-.checkbox :global(button[aria-checked="true"]),
 .checkbox :global(button[aria-checked="mixed"]) {
-  color: var(--primary-accent-color-lighter);
+  color: var(--checkbox-border-color);
 }
 .checkbox :global(button[aria-checked="false"]) {
   color: transparent;
+}
+.checkbox label {
+  cursor: inherit;
 }</style>

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

@@ -2,14 +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://w3c.github.io/aria-practices/#checkbox
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
  */
 export default class Checkbox extends SvelteComponentTyped<{
-    class?: string;
+    label?: string;
     disabled?: boolean;
     name?: string;
     value?: string;
+    class?: string;
     checked?: string | boolean;
     indeterminate?: boolean;
 }, {
@@ -26,10 +29,11 @@ export type CheckboxSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        class?: string;
+        label?: string | null;
         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://w3c.github.io/aria-practices/#dialog_modal
+  @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,8 +2,9 @@
 /** @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://w3c.github.io/aria-practices/#dialog_modal
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  */
 export default class Dialog extends SvelteComponentTyped<{
     title?: string;

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

@@ -1,12 +1,13 @@
 <!--
   @component
-  @see https://w3c.github.io/aria-practices/#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://w3c.github.io/aria-practices/#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://w3c.github.io/aria-practices/#dialog_modal
+  @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,8 +2,9 @@
 /** @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://w3c.github.io/aria-practices/#dialog_modal
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  */
 export default class Drawer extends SvelteComponentTyped<{
     title?: string;

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>;