@sveltia/ui 0.1.5 → 0.2.1

package/package/components/composite/calendar.svelte

@@ -43,7 +43,7 @@
   <input type="hidden" bind:value />
   <div class="header">
     <Button
-      class="ternary"
+      class="tertiary"
       label={firstDay.toLocaleDateString('en', { year: 'numeric', month: 'short' })}
       aria-haspopup="dialog"
     >
@@ -139,7 +139,7 @@
         value = '';
       }}
     >
-      {$_('sui.calendar.clear')}
+      {$_('sui._.clear')}
     </Button>
     <Spacer flex={true} />
     <Button
@@ -159,7 +159,6 @@
   -webkit-user-select: none;
   user-select: none;
   cursor: default;
-  font-size: 14px;
 }
 [role=group] > * {
   flex: none;
@@ -190,13 +189,13 @@
   align-items: center;
   width: 24px;
   height: 24px;
-  font-size: 12px;
+  font-size: var(--font-size--small);
 }
 .grid div.weekday {
   color: var(--secondary-foreground-color);
 }
 .grid div.other-month {
-  color: var(--ternary-foreground-color);
+  color: var(--tertiary-foreground-color);
 }
 .grid div.today :global(button) {
   color: var(--highlight-foreground-color);
@@ -217,7 +216,7 @@
 }
 
 .footer :global(button) {
-  font-size: 12px;
+  font-size: var(--font-size--small);
 }
 
 .popup-inner {

package/package/components/composite/calendar.svelte.d.ts

@@ -1,11 +1,18 @@
 /** @typedef {typeof __propDef.props}  CalendarProps */
 /** @typedef {typeof __propDef.events}  CalendarEvents */
 /** @typedef {typeof __propDef.slots}  CalendarSlots */
-export default class Calendar {
+export default class Calendar extends SvelteComponentTyped<{
+    value?: string;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
 }
 export type CalendarProps = typeof __propDef.props;
 export type CalendarEvents = typeof __propDef.events;
 export type CalendarSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         value?: (string | undefined);

package/package/components/composite/checkbox-group.svelte.d.ts

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

package/package/components/composite/combobox.svelte

@@ -51,19 +51,6 @@
   /** @type {(Popup| undefined)} */
   let popupComponent;
   let isPopupOpen = writable(false);
-
-  $: {
-    dispatch('change', { target: inputComponent?.element, value });
-  }
-
-  $: {
-    if (readOnly && value && popupComponent?.element) {
-      window.requestAnimationFrame(() => {
-        label =
-          popupComponent?.element.querySelector('[aria-selected="true"] .label')?.textContent || '';
-      });
-    }
-  }
 </script>
 
 <div class="sui combobox {className}">
@@ -72,7 +59,7 @@
       class:selected={value !== undefined}
       role="combobox"
       {id}
-      tabindex="0"
+      tabindex={disabled ? -1 : 0}
       aria-controls="{id}-popup"
       aria-expanded={$isPopupOpen}
       aria-disabled={disabled ? true : undefined}
@@ -102,10 +89,11 @@
   {/if}
   <Button
     {disabled}
+    tabindex={readOnly || disabled ? -1 : 0}
     aria-controls="{id}-popup"
     aria-expanded={$isPopupOpen}
     aria-disabled={disabled ? true : undefined}
-    class="ternary iconic"
+    class="tertiary iconic"
     on:click={(event) => {
       event.stopPropagation();
 
@@ -131,7 +119,10 @@
   <Listbox
     on:click={({ target }) => {
       if (target.matches('[role="option"]')) {
-        value = target.value;
+        // @todo support more types
+        value = target.dataset.type === 'number' ? Number(target.value) : target.value;
+        label = target.querySelector('.label')?.textContent || target.value;
+        dispatch('change', { target: inputComponent?.element, value });
       }
     }}
   >
@@ -143,9 +134,10 @@
   display: flex;
   align-items: center;
   position: relative;
+  min-width: var(--combobox-min-width, 160px);
 }
 .combobox :global(.icon) {
-  font-size: 20px;
+  font-size: var(--font-size--xx-large);
   opacity: 0.5;
 }
 .combobox > :global(.icon) {
@@ -157,6 +149,13 @@
   position: absolute;
   inset: 0 0 auto auto;
   z-index: 1;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-width: 0;
+  background-color: transparent;
+}
+.combobox > :global(button[tabindex="-1"]) {
+  pointer-events: none;
 }
 .combobox div[role=combobox] {
   display: flex;
@@ -167,13 +166,18 @@
   padding: 0 32px 0 8px;
   width: 100%;
   height: var(--input--medium--height);
+  background-color: var(--disabled-background-color);
   -webkit-user-select: none;
   user-select: none;
   cursor: pointer;
+  transition: all 200ms;
 }
 .combobox div[role=combobox]:not(.selected) {
   font-style: italic;
 }
+.combobox div[role=combobox]:hover, .combobox div[role=combobox]:focus {
+  background-color: var(--highlight-background-color);
+}
 .combobox div[role=combobox][aria-disabled=true] {
   background-color: var(--disabled-background-color);
   opacity: 0.4;

package/package/components/composite/combobox.svelte.d.ts

@@ -5,11 +5,26 @@
  * @see https://w3c.github.io/aria/#combobox
  * @see https://w3c.github.io/aria-practices/#combobox
  */
-export default class Combobox {
+export default class Combobox extends SvelteComponentTyped<{
+    [x: string]: any;
+    label?: string;
+    position?: any;
+    class?: string;
+    disabled?: boolean;
+    value?: string;
+    readOnly?: boolean;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 export type ComboboxProps = typeof __propDef.props;
 export type ComboboxEvents = typeof __propDef.events;
 export type ComboboxSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/composite/disclosure.svelte.d.ts

@@ -5,11 +5,20 @@
  * @see https://w3c.github.io/aria-practices/#disclosure
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
  */
-export default class Disclosure {
+export default class Disclosure extends SvelteComponentTyped<{
+    label?: string;
+    class?: string;
+    expanded?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 export type DisclosureProps = typeof __propDef.props;
 export type DisclosureEvents = typeof __propDef.events;
 export type DisclosureSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         label?: string;

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

@@ -1,11 +1,20 @@
 /** @typedef {typeof __propDef.props}  GridProps */
 /** @typedef {typeof __propDef.events}  GridEvents */
 /** @typedef {typeof __propDef.slots}  GridSlots */
-export default class Grid {
+export default class Grid extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    element?: HTMLElement;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 export type GridProps = typeof __propDef.props;
 export type GridEvents = typeof __propDef.events;
 export type GridSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/composite/listbox.svelte

@@ -58,6 +58,6 @@
 [role=listbox] :global([role="group"]) :global(.title) {
   margin: 0 8px 8px;
   color: var(--secondary-foreground-color);
-  font-size: 11px;
+  font-size: var(--font-size--x-small);
   text-transform: uppercase;
 }</style>

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

@@ -5,20 +5,33 @@
  * @see https://w3c.github.io/aria/#listbox
  * @see https://w3c.github.io/aria-practices/#Listbox
  */
-export default class Listbox {
+export default class Listbox extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    element?: HTMLElement;
+    multiple?: boolean;
+}, {
+    click: MouseEvent;
+    select: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
     /**accessor*/
-    set class(arg: any);
-    get class(): any;
+    set class(arg: string);
+    get class(): string;
     /**accessor*/
-    set element(arg: any);
-    get element(): any;
+    set element(arg: HTMLElement);
+    get element(): HTMLElement;
     /**accessor*/
-    set multiple(arg: any);
-    get multiple(): any;
+    set multiple(arg: boolean);
+    get multiple(): boolean;
 }
 export type ListboxProps = typeof __propDef.props;
 export type ListboxEvents = typeof __propDef.events;
 export type ListboxSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/composite/menu-item-group.svelte.d.ts

@@ -1,11 +1,21 @@
 /** @typedef {typeof __propDef.props}  MenuItemGroupProps */
 /** @typedef {typeof __propDef.events}  MenuItemGroupEvents */
 /** @typedef {typeof __propDef.slots}  MenuItemGroupSlots */
-export default class MenuItemGroup {
+export default class MenuItemGroup extends SvelteComponentTyped<{
+    [x: string]: any;
+    title?: string;
+    class?: string;
+    ariaLabel?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 export type MenuItemGroupProps = typeof __propDef.props;
 export type MenuItemGroupEvents = typeof __propDef.events;
 export type MenuItemGroupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/composite/menu.svelte.d.ts

@@ -5,17 +5,26 @@
  * @see https://w3c.github.io/aria/#menu
  * @see https://w3c.github.io/aria-practices/#menu
  */
-export default class Menu {
+export default class Menu extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    element?: HTMLElement;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
     /**accessor*/
-    set class(arg: any);
-    get class(): any;
+    set class(arg: string);
+    get class(): string;
     /**accessor*/
-    set element(arg: any);
-    get element(): any;
+    set element(arg: HTMLElement);
+    get element(): HTMLElement;
 }
 export type MenuProps = typeof __propDef.props;
 export type MenuEvents = typeof __propDef.events;
 export type MenuSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/composite/radio-button-group.svelte.d.ts

@@ -6,11 +6,20 @@
  * @see https://w3c.github.io/aria/#radiogroup
  * @see https://w3c.github.io/aria-practices/#radiobutton
  */
-export default class RadioButtonGroup {
+export default class RadioButtonGroup extends SvelteComponentTyped<{
+    class?: string;
+    element?: HTMLElement;
+    orientation?: "horizontal" | "vertical";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 export type RadioButtonGroupProps = typeof __propDef.props;
 export type RadioButtonGroupEvents = typeof __propDef.events;
 export type RadioButtonGroupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;

package/package/components/composite/select-button-group.svelte.d.ts

@@ -6,11 +6,24 @@
  * @see https://w3c.github.io/aria/#radiogroup
  * @see https://w3c.github.io/aria-practices/#radiobutton
  */
-export default class SelectButtonGroup {
+export default class SelectButtonGroup extends SvelteComponentTyped<{
+    class?: string;
+    element?: HTMLElement;
+    disabled?: boolean;
+    value?: string;
+    ariaLabel?: string;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 export type SelectButtonGroupProps = typeof __propDef.props;
 export type SelectButtonGroupEvents = typeof __propDef.events;
 export type SelectButtonGroupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;

package/package/components/composite/select.svelte.d.ts

@@ -2,11 +2,23 @@
 /** @typedef {typeof __propDef.events}  SelectEvents */
 /** @typedef {typeof __propDef.slots}  SelectSlots */
 /** A read-only variant of `<Combobox>`. */
-export default class Select {
+export default class Select extends SvelteComponentTyped<{
+    [x: string]: any;
+    label?: string;
+    class?: string;
+    value?: string;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 export type SelectProps = typeof __propDef.props;
 export type SelectEvents = typeof __propDef.events;
 export type SelectSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -15,7 +27,7 @@ declare const __propDef: {
         value?: (string | undefined);
     };
     events: {
-        change: any;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -5,23 +5,36 @@
  * @see https://w3c.github.io/aria/#tablist
  * @see https://w3c.github.io/aria-practices/#tabpanel
  */
-export default class TabList {
+export default class TabList extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    element?: HTMLElement;
+    name?: string;
+    orientation?: "horizontal" | "vertical";
+}, {
+    select: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
     /**accessor*/
-    set class(arg: any);
-    get class(): any;
+    set class(arg: string);
+    get class(): string;
     /**accessor*/
-    set element(arg: any);
-    get element(): any;
+    set element(arg: HTMLElement);
+    get element(): HTMLElement;
     /**accessor*/
-    set orientation(arg: any);
-    get orientation(): any;
+    set orientation(arg: "horizontal" | "vertical");
+    get orientation(): "horizontal" | "vertical";
     /**accessor*/
-    set name(arg: any);
-    get name(): any;
+    set name(arg: string);
+    get name(): string;
 }
 export type TabListProps = typeof __propDef.props;
 export type TabListEvents = typeof __propDef.events;
 export type TabListSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/core/button.svelte

@@ -141,41 +141,47 @@ button[disabled] {
   cursor: default;
   pointer-events: none;
 }
-button:global(.primary), button:global(.secondary), button:global(.ternary) {
+button:global(.primary), button:global(.secondary), button:global(.tertiary) {
   justify-content: center;
+  border-width: 1px;
   border-radius: var(--button--medium--border-radius);
   padding: var(--button--medium--padding, 0 8px);
   height: var(--button--medium--height);
 }
-button:global(.primary) :global(.label:only-child), button:global(.secondary) :global(.label:only-child), button:global(.ternary) :global(.label:only-child) {
+button:global(.primary) :global(.label:only-child), button:global(.secondary) :global(.label:only-child), button:global(.tertiary) :global(.label:only-child) {
   padding: 0 4px;
 }
 button:global(.primary) {
-  border-width: 1px;
   border-color: var(--control-border-color);
   color: var(--primary-accent-color-foreground);
   background-color: var(--primary-accent-color);
 }
-button:global(.primary):hover {
+button:global(.primary):hover, button:global(.primary):focus {
   background-color: var(--primary-accent-color-lighter);
 }
 button:global(.primary):active {
   background-color: var(--primary-accent-color-darker);
 }
 button:global(.secondary) {
-  border-width: 1px;
-  border-color: var(--control-border-color);
-  color: var(--highlight-foreground-color);
-  background-color: var(--ternary-background-color);
+  border-color: var(--primary-accent-color);
+  color: var(--primary-accent-color-lighter);
+  background-color: var(--tertiary-background-color);
+}
+button:global(.secondary):hover, button:global(.secondary):focus {
+  background-color: var(--highlight-background-color);
 }
 button:global(.secondary)[aria-pressed=true] {
   background-color: var(--primary-accent-color);
 }
-button:global(.ternary) {
-  color: var(--primary-foreground-color);
-  padding: var(--button--medium--padding, 0 8px);
+button:global(.tertiary) {
+  border-color: var(--control-border-color);
+  color: var(--highlight-foreground-color);
+  background-color: var(--tertiary-background-color);
 }
-button:global(.ternary)[aria-pressed=true] {
+button:global(.tertiary):hover, button:global(.tertiary):focus {
+  background-color: var(--highlight-background-color);
+}
+button:global(.tertiary)[aria-pressed=true] {
   background-color: var(--highlight-background-color);
 }
 button:global(.danger) {
@@ -187,16 +193,21 @@ button:global(.large) {
 button:global(.small) {
   padding: var(--button--small--padding, 0 8px);
   height: var(--button--small--height);
-  font-size: 12px;
+  font-size: var(--font-size--small);
 }
 button:global(.small) :global(.icon) {
-  font-size: 16px;
+  font-size: var(--font-size--large);
+}
+button:global(.pill) {
+  border-radius: var(--button--medium--pill--height, 16px);
+  padding: var(--button--medium--pill--padding, 0 16px);
 }
 button:global(.link) {
   color: var(--primary-accent-color-lighter);
 }
 button:global(.iconic) {
   justify-content: center;
+  padding: 0;
   border-radius: 4px;
   aspect-ratio: 1/1;
 }

package/package/components/core/button.svelte.d.ts

@@ -5,34 +5,64 @@
  * @see https://w3c.github.io/aria/#button
  * @see https://w3c.github.io/aria-practices/#button
  */
-export default class Button {
+export default class Button extends SvelteComponentTyped<{
+    [x: string]: any;
+    label?: string;
+    class?: string;
+    element?: HTMLButtonElement;
+    type?: "reset" | "submit" | "button";
+    role?: string;
+    size?: "small" | "medium" | "large";
+    hidden?: boolean;
+    disabled?: boolean;
+    pressed?: string | boolean;
+    popupPosition?: any;
+}, {
+    mouseenter: MouseEvent;
+    mouseleave: MouseEvent;
+    click: MouseEvent;
+    dragover: DragEvent;
+    dragleave: DragEvent;
+    dragend: DragEvent;
+    drop: DragEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'start-icon': {};
+    default: {};
+    'end-icon': {};
+    popup: {};
+}> {
     /**accessor*/
-    set class(arg: any);
-    get class(): any;
+    set class(arg: string);
+    get class(): string;
     /**accessor*/
-    set element(arg: any);
-    get element(): any;
+    set element(arg: HTMLButtonElement);
+    get element(): HTMLButtonElement;
     /**accessor*/
-    set type(arg: any);
-    get type(): any;
+    set type(arg: "reset" | "submit" | "button");
+    get type(): "reset" | "submit" | "button";
     /**accessor*/
-    set role(arg: any);
-    get role(): any;
+    set role(arg: string);
+    get role(): string;
     /**accessor*/
-    set size(arg: any);
-    get size(): any;
+    set size(arg: "small" | "medium" | "large");
+    get size(): "small" | "medium" | "large";
     /**accessor*/
-    set hidden(arg: any);
-    get hidden(): any;
+    set hidden(arg: boolean);
+    get hidden(): boolean;
     /**accessor*/
-    set disabled(arg: any);
-    get disabled(): any;
+    set disabled(arg: boolean);
+    get disabled(): boolean;
     /**accessor*/
-    set pressed(arg: any);
-    get pressed(): any;
+    set pressed(arg: string | boolean);
+    get pressed(): string | boolean;
     /**accessor*/
-    set label(arg: any);
-    get label(): any;
+    set label(arg: string);
+    get label(): string;
     /**accessor*/
     set popupPosition(arg: any);
     get popupPosition(): any;
@@ -40,6 +70,7 @@ export default class Button {
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
 export type ButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;