@sveltia/ui 0.1.1 → 0.1.3

package/package/components/composite/calendar.svelte

@@ -46,6 +46,7 @@
     <MenuButton
       class="ternary"
       label={firstDay.toLocaleDateString('en', { year: 'numeric', month: 'short' })}
+      aria-haspopup="dialog"
       iconName="arrow_drop_down"
     >
       <!-- svelte-ignore a11y-click-events-have-key-events -->

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

@@ -1,18 +1,11 @@
 /** @typedef {typeof __propDef.props}  CalendarProps */
 /** @typedef {typeof __propDef.events}  CalendarEvents */
 /** @typedef {typeof __propDef.slots}  CalendarSlots */
-export default class Calendar extends SvelteComponentTyped<{
-    value?: string;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+export default class Calendar {
 }
 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,21 +2,11 @@
 /** @typedef {typeof __propDef.events}  CheckboxGroupEvents */
 /** @typedef {typeof __propDef.slots}  CheckboxGroupSlots */
 /** The container of `<Checkbox>`es. */
-export default class CheckboxGroup extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    orientation?: "vertical" | "horizontal";
-    ariaLabel?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class CheckboxGroup {
 }
 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

@@ -9,6 +9,7 @@
   import { writable } from 'svelte/store';
   import Button from '../core/button.svelte';
   import TextInput from '../core/text-input.svelte';
+  import { getRandomId } from '../helpers/util';
   import Popup from '../util/popup.svelte';
   import Listbox from './listbox.svelte';
 
@@ -42,6 +43,7 @@
   export let value = undefined;
 
   const dispatch = createEventDispatcher();
+  const id = getRandomId('combobox');
   let comboboxElement;
   /** @type {(TextInput| undefined)} */
   let inputComponent;
@@ -65,10 +67,13 @@
 
 <div class="sui combobox {className}">
   {#if readOnly}
-    <!-- svelte-ignore a11y-role-has-required-aria-props -->
     <div
       class:selected={value !== undefined}
       role="combobox"
+      {id}
+      tabindex="0"
+      aria-controls="{id}-popup"
+      aria-expanded={$isPopupOpen}
       aria-disabled={disabled ? true : undefined}
       aria-haspopup="listbox"
       aria-activedescendant="selected-option"
@@ -80,8 +85,12 @@
   {:else}
     <TextInput
       role="combobox"
+      {id}
       {value}
       {disabled}
+      aria-controls="{id}-popup"
+      aria-expanded={$isPopupOpen}
+      aria-disabled={disabled ? true : undefined}
       aria-haspopup="listbox"
       aria-activedescendant="selected-option"
       {...$$restProps}
@@ -90,6 +99,9 @@
   {/if}
   <Button
     {disabled}
+    aria-controls="{id}-popup"
+    aria-expanded={$isPopupOpen}
+    aria-disabled={disabled ? true : undefined}
     class="ternary iconic"
     iconName="expand_more"
     iconLabel={$isPopupOpen ? $_('sui._.collapse') : $_('sui._.expand')}
@@ -103,6 +115,7 @@
   />
 </div>
 <Popup
+  id="{id}-popup"
   anchor={comboboxElement || inputComponent?.element}
   {position}
   bind:open={isPopupOpen}

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

@@ -5,26 +5,11 @@
  * @see https://w3c.github.io/aria/#combobox
  * @see https://w3c.github.io/aria-practices/#combobox
  */
-export default class Combobox extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    label?: string;
-    disabled?: boolean;
-    value?: string;
-    position?: any;
-    readOnly?: boolean;
-}, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Combobox {
 }
 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,20 +5,11 @@
  * @see https://w3c.github.io/aria-practices/#disclosure
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
  */
-export default class Disclosure extends SvelteComponentTyped<{
-    class?: string;
-    label?: string;
-    expanded?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Disclosure {
 }
 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: {
         class?: string;

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

@@ -1,20 +1,11 @@
 /** @typedef {typeof __propDef.props}  GridProps */
 /** @typedef {typeof __propDef.events}  GridEvents */
 /** @typedef {typeof __propDef.slots}  GridSlots */
-export default class Grid extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    element?: HTMLElement;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Grid {
 }
 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.d.ts

@@ -5,33 +5,20 @@
  * @see https://w3c.github.io/aria/#listbox
  * @see https://w3c.github.io/aria-practices/#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: {};
-}> {
+export default class Listbox {
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: any);
+    get class(): any;
     /**accessor*/
-    set element(arg: HTMLElement);
-    get element(): HTMLElement;
+    set element(arg: any);
+    get element(): any;
     /**accessor*/
-    set multiple(arg: boolean);
-    get multiple(): boolean;
+    set multiple(arg: any);
+    get multiple(): any;
 }
 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,21 +1,11 @@
 /** @typedef {typeof __propDef.props}  MenuItemGroupProps */
 /** @typedef {typeof __propDef.events}  MenuItemGroupEvents */
 /** @typedef {typeof __propDef.slots}  MenuItemGroupSlots */
-export default class MenuItemGroup extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    title?: string;
-    ariaLabel?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class MenuItemGroup {
 }
 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,26 +5,17 @@
  * @see https://w3c.github.io/aria/#menu
  * @see https://w3c.github.io/aria-practices/#menu
  */
-export default class Menu extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    element?: HTMLElement;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Menu {
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: any);
+    get class(): any;
     /**accessor*/
-    set element(arg: HTMLElement);
-    get element(): HTMLElement;
+    set element(arg: any);
+    get element(): any;
 }
 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

@@ -25,6 +25,7 @@
 <div
   class="sui radio-button-group {className} {orientation}"
   role="radiogroup"
+  tabindex="0"
   bind:this={element}
   use:activateGroup
 >

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

@@ -6,20 +6,11 @@
  * @see https://w3c.github.io/aria/#radiogroup
  * @see https://w3c.github.io/aria-practices/#radiobutton
  */
-export default class RadioButtonGroup extends SvelteComponentTyped<{
-    class?: string;
-    element?: HTMLElement;
-    orientation?: "vertical" | "horizontal";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class RadioButtonGroup {
 }
 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

@@ -34,6 +34,7 @@
 <div
   class="sui select-button-group {className}"
   role="radiogroup"
+  tabindex="0"
   aria-label={ariaLabel || undefined}
   aria-disabled={disabled ? true : undefined}
   bind:this={element}

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

@@ -6,24 +6,11 @@
  * @see https://w3c.github.io/aria/#radiogroup
  * @see https://w3c.github.io/aria-practices/#radiobutton
  */
-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 default class SelectButtonGroup {
 }
 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,23 +2,11 @@
 /** @typedef {typeof __propDef.events}  SelectEvents */
 /** @typedef {typeof __propDef.slots}  SelectSlots */
 /** A read-only variant of `<Combobox>`. */
-export default class Select extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    label?: string;
-    value?: string;
-}, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Select {
 }
 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;
@@ -27,7 +15,7 @@ declare const __propDef: {
         value?: (string | undefined);
     };
     events: {
-        change: CustomEvent<any>;
+        change: any;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -43,16 +43,16 @@
   align-items: center;
   border-color: var(--control-border-color);
 }
-.tab-list:global([aria-orientation="horizontal"]) {
+.tab-list[aria-orientation=horizontal] {
   gap: 16px;
   margin: 0 0 32px;
   border-width: 0 0 1px;
   padding: 0 16px;
 }
-.tab-list:global([aria-orientation="horizontal"]) :global(button) {
+.tab-list[aria-orientation=horizontal] :global(button) {
   border-width: 0 0 2px 0;
 }
-.tab-list:global([aria-orientation="vertical"]) {
+.tab-list[aria-orientation=vertical] {
   gap: 8px;
   flex-direction: column;
   margin: 0 32px 0 0;
@@ -60,7 +60,7 @@
   padding: 8px 0;
   width: 240px;
 }
-.tab-list:global([aria-orientation="vertical"]) :global(button) {
+.tab-list[aria-orientation=vertical] :global(button) {
   border-width: 0 2px 0 0;
   width: 100%;
 }

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

@@ -5,36 +5,23 @@
  * @see https://w3c.github.io/aria/#tablist
  * @see https://w3c.github.io/aria-practices/#tabpanel
  */
-export default class TabList extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    name?: string;
-    element?: HTMLElement;
-    orientation?: "vertical" | "horizontal";
-}, {
-    select: Event;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class TabList {
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: any);
+    get class(): any;
     /**accessor*/
-    set element(arg: HTMLElement);
-    get element(): HTMLElement;
+    set element(arg: any);
+    get element(): any;
     /**accessor*/
-    set orientation(arg: "vertical" | "horizontal");
-    get orientation(): "vertical" | "horizontal";
+    set orientation(arg: any);
+    get orientation(): any;
     /**accessor*/
-    set name(arg: string);
-    get name(): string;
+    set name(arg: any);
+    get name(): any;
 }
 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

@@ -137,10 +137,10 @@ button > :global(*) {
 button:global(:not(:disabled):focus-visible) {
   z-index: 1;
 }
-button:global([hidden]) {
+button[hidden] {
   display: none !important;
 }
-button:global([disabled]) {
+button[disabled] {
   opacity: 0.4;
   cursor: default;
   pointer-events: none;
@@ -148,7 +148,7 @@ button:global([disabled]) {
 button:global(.primary), button:global(.secondary), button:global(.ternary) {
   justify-content: center;
   border-radius: var(--button--medium--border-radius);
-  padding: 0 8px;
+  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) {
@@ -172,14 +172,14 @@ button:global(.secondary) {
   color: var(--highlight-foreground-color);
   background-color: var(--ternary-background-color);
 }
-button:global(.secondary):global([aria-pressed="true"]) {
+button:global(.secondary)[aria-pressed=true] {
   background-color: var(--primary-accent-color);
 }
 button:global(.ternary) {
   color: var(--primary-foreground-color);
-  padding: 0 8px;
+  padding: var(--button--medium--padding, 0 8px);
 }
-button:global(.ternary):global([aria-pressed="true"]) {
+button:global(.ternary)[aria-pressed=true] {
   background-color: var(--highlight-background-color);
 }
 button:global(.danger) {
@@ -189,7 +189,7 @@ button:global(.large) {
   height: var(--button--large--height);
 }
 button:global(.small) {
-  padding: 0 4px;
+  padding: var(--button--small--padding, 0 8px);
   height: var(--button--small--height);
   font-size: 12px;
 }

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

@@ -5,77 +5,47 @@
  * @see https://w3c.github.io/aria/#button
  * @see https://w3c.github.io/aria-practices/#button
  */
-export default class Button extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    label?: string;
-    element?: HTMLButtonElement;
-    type?: "button" | "submit" | "reset";
-    role?: string;
-    size?: "small" | "medium" | "large";
-    hidden?: boolean;
-    disabled?: boolean;
-    pressed?: string | boolean;
-    iconName?: string;
-    iconLabel?: string;
-    iconPosition?: "start" | "end";
-}, {
-    mouseenter: MouseEvent;
-    mouseleave: MouseEvent;
-    click: MouseEvent;
-    dragover: DragEvent;
-    dragleave: DragEvent;
-    dragend: DragEvent;
-    drop: DragEvent;
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Button {
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: any);
+    get class(): any;
     /**accessor*/
-    set element(arg: HTMLButtonElement);
-    get element(): HTMLButtonElement;
+    set element(arg: any);
+    get element(): any;
     /**accessor*/
-    set type(arg: "button" | "submit" | "reset");
-    get type(): "button" | "submit" | "reset";
+    set type(arg: any);
+    get type(): any;
     /**accessor*/
-    set role(arg: string);
-    get role(): string;
+    set role(arg: any);
+    get role(): any;
     /**accessor*/
-    set size(arg: "small" | "medium" | "large");
-    get size(): "small" | "medium" | "large";
+    set size(arg: any);
+    get size(): any;
     /**accessor*/
-    set hidden(arg: boolean);
-    get hidden(): boolean;
+    set hidden(arg: any);
+    get hidden(): any;
     /**accessor*/
-    set disabled(arg: boolean);
-    get disabled(): boolean;
+    set disabled(arg: any);
+    get disabled(): any;
     /**accessor*/
-    set pressed(arg: string | boolean);
-    get pressed(): string | boolean;
+    set pressed(arg: any);
+    get pressed(): any;
     /**accessor*/
-    set label(arg: string);
-    get label(): string;
+    set label(arg: any);
+    get label(): any;
     /**accessor*/
-    set iconName(arg: string);
-    get iconName(): string;
+    set iconName(arg: any);
+    get iconName(): any;
     /**accessor*/
-    set iconLabel(arg: string);
-    get iconLabel(): string;
+    set iconLabel(arg: any);
+    get iconLabel(): any;
     /**accessor*/
-    set iconPosition(arg: "start" | "end");
-    get iconPosition(): "start" | "end";
+    set iconPosition(arg: any);
+    get iconPosition(): any;
 }
 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;

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

@@ -5,24 +5,11 @@
  * @see https://w3c.github.io/aria/#checkbox
  * @see https://w3c.github.io/aria-practices/#checkbox
  */
-export default class Checkbox extends SvelteComponentTyped<{
-    class?: string;
-    name?: string;
-    value?: string;
-    checked?: string | boolean;
-    indeterminate?: boolean;
-}, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Checkbox {
 }
 export type CheckboxProps = typeof __propDef.props;
 export type CheckboxEvents = typeof __propDef.events;
 export type CheckboxSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;