@sveltia/ui 0.2.3 → 0.2.5

package/package/components/composite/calendar.svelte

@@ -5,7 +5,7 @@
   import Separator from '../core/separator.svelte';
   import Spacer from '../core/spacer.svelte';
 
-  /** @type {(String|undefined)} */
+  /** @type {string?} */
   export let value = undefined;
 
   const dayList = [];
@@ -16,6 +16,9 @@
   $: firstDayOfMonth = new Date(date.getUTCFullYear(), date.getUTCMonth(), 1);
   $: firstDay = new Date(firstDayOfMonth);
 
+  /**
+   *
+   */
   const getWeeks = () => {
     const cursor = new Date(firstDay);
 

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

@@ -15,7 +15,7 @@ export type CalendarSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        value?: (string | undefined);
+        value?: string | null;
     };
     events: {
         click: MouseEvent;

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

@@ -5,16 +5,15 @@
 <script>
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
-  // eslint-disable-next-line padding-line-between-statements
   let className = '';
 
   export { className as class };
 
   /**
    * The `aria-label` attribute on the button element.
-   * @type {String}
+   * @type {string}
    */
   export let ariaLabel = '';
 
@@ -33,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/combobox.svelte

@@ -1,7 +1,7 @@
 <!--
   @component
   @see https://w3c.github.io/aria/#combobox
-  @see https://w3c.github.io/aria-practices/#combobox
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
 -->
 <script>
   import { createEventDispatcher } from 'svelte';
@@ -16,7 +16,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
@@ -39,16 +39,16 @@
 
   /**
    * Selected option’s value.
-   * @type {(String|undefined)}
+   * @type {(string | number | undefined)}
    */
   export let value = undefined;
 
   const dispatch = createEventDispatcher();
   const id = getRandomId('combobox');
   let comboboxElement;
-  /** @type {(TextInput| undefined)} */
+  /** @type {TextInput?} */
   let inputComponent;
-  /** @type {(Popup| undefined)} */
+  /** @type {Popup?} */
   let popupComponent;
   let isPopupOpen = writable(false);
 </script>
@@ -117,8 +117,11 @@
   bind:this={popupComponent}
 >
   <Listbox
-    on:click={({ target }) => {
-      if (target.matches('[role="option"]')) {
+    on:click={(event) => {
+      if (/** @type {HTMLElement} */ (event.target).matches('[role="option"]')) {
+        // eslint-disable-next-line prefer-destructuring
+        const target = /** @type {HTMLButtonElement?} */ (event.target);
+
         // @todo support more types
         value = target.dataset.type === 'number' ? Number(target.value) : target.value;
         label = target.querySelector('.label')?.textContent || target.value;
@@ -159,7 +162,7 @@
   display: flex;
   align-items: center;
   border-width: 1px;
-  border-color: var(--control-border-color);
+  border-color: var(--secondary-control-border-color);
   border-radius: 4px;
   padding: 0 32px 0 8px;
   width: 100%;

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

@@ -3,15 +3,15 @@
 /** @typedef {typeof __propDef.slots}  ComboboxSlots */
 /**
  * @see https://w3c.github.io/aria/#combobox
- * @see https://w3c.github.io/aria-practices/#combobox
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
  */
 export default class Combobox extends SvelteComponentTyped<{
     [x: string]: any;
     label?: string;
-    position?: any;
+    position?: PopupPosition;
     class?: string;
     disabled?: boolean;
-    value?: string;
+    value?: string | number;
     readOnly?: boolean;
 }, {
     change: CustomEvent<any>;
@@ -29,10 +29,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         label?: string;
-        position?: any;
+        position?: PopupPosition;
         class?: string;
         disabled?: boolean;
-        value?: (string | undefined);
+        value?: (string | number | undefined);
         readOnly?: boolean;
     };
     events: {

package/package/components/composite/disclosure.svelte

@@ -1,6 +1,6 @@
 <!--
   @component
-  @see https://w3c.github.io/aria-practices/#disclosure
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
   @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
 -->
 <script>
@@ -10,7 +10,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
@@ -36,7 +36,7 @@
     <Icon name="expand_more" />
     {label}
   </Button>
-  <div class="content" id="{id}-content" hidden={!expanded ? 'hidden' : undefined}>
+  <div class="content" id="{id}-content" hidden={!expanded ? true : undefined}>
     <slot />
   </div>
 </div>

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

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  DisclosureEvents */
 /** @typedef {typeof __propDef.slots}  DisclosureSlots */
 /**
- * @see https://w3c.github.io/aria-practices/#disclosure
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
  */
 export default class Disclosure extends SvelteComponentTyped<{

package/package/components/composite/grid.svelte

@@ -3,13 +3,13 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {(HTMLElement|undefined)} */
+  /** @type {HTMLElement?} */
   export let element = undefined;
 </script>
 

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

@@ -19,7 +19,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        element?: (HTMLElement | undefined);
+        element?: HTMLElement | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/composite/listbox.svelte

@@ -1,7 +1,7 @@
 <!--
   @component
   @see https://w3c.github.io/aria/#listbox
-  @see https://w3c.github.io/aria-practices/#Listbox
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
 -->
 <svelte:options accessors={true} />
 
@@ -10,13 +10,13 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {(HTMLElement|undefined)} */
+  /** @type {HTMLElement?} */
   export let element = undefined;
 
   export let multiple = false;
@@ -42,7 +42,7 @@
   color: inherit;
   margin: 0;
   border-width: 1px;
-  border-color: var(--control-border-color);
+  border-color: var(--secondary-control-border-color);
   border-radius: 4px;
   padding: 4px;
 }

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

@@ -3,7 +3,7 @@
 /** @typedef {typeof __propDef.slots}  ListboxSlots */
 /**
  * @see https://w3c.github.io/aria/#listbox
- * @see https://w3c.github.io/aria-practices/#Listbox
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
  */
 export default class Listbox extends SvelteComponentTyped<{
     [x: string]: any;
@@ -36,7 +36,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        element?: (HTMLElement | undefined);
+        element?: HTMLElement | null;
         multiple?: boolean;
     };
     events: {

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

@@ -3,7 +3,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 

package/package/components/composite/menu.svelte

@@ -1,7 +1,7 @@
 <!--
   @component
   @see https://w3c.github.io/aria/#menu
-  @see https://w3c.github.io/aria-practices/#menu
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
 -->
 <svelte:options accessors={true} />
 
@@ -10,13 +10,13 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {(HTMLElement|undefined)} */
+  /** @type {HTMLElement?} */
   export let element = undefined;
 </script>
 

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

@@ -3,7 +3,7 @@
 /** @typedef {typeof __propDef.slots}  MenuSlots */
 /**
  * @see https://w3c.github.io/aria/#menu
- * @see https://w3c.github.io/aria-practices/#menu
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
  */
 export default class Menu extends SvelteComponentTyped<{
     [x: string]: any;
@@ -29,7 +29,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        element?: (HTMLElement | undefined);
+        element?: HTMLElement | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,15 +1,15 @@
 <!--
   @component
-  The container of `<RadioButton>`s.
+  The container of `<Radio>`s.
   @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 { activateGroup } from '../helpers/group';
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
@@ -18,28 +18,29 @@
   /** @type {('horizontal'|'vertical')} */
   export let orientation = 'horizontal';
 
-  /** @type {(HTMLElement|undefined)} */
+  /** @type {HTMLElement?} */
   export let element = undefined;
 </script>
 
 <div
-  class="sui radio-button-group {className} {orientation}"
+  class="sui radio-group {className} {orientation}"
   role="radiogroup"
   tabindex="0"
   bind:this={element}
+  on:select
   use:activateGroup
 >
   <slot />
 </div>
 
-<style>.radio-button-group {
+<style>.radio-group {
   display: inline-flex;
-  align-items: center;
-  gap: 16px;
 }
-.radio-button-group.horizontal {
+.radio-group.horizontal {
+  gap: 16px;
   align-items: center;
 }
-.radio-button-group.vertical {
+.radio-group.vertical {
+  gap: 8px;
   flex-direction: column;
 }</style>

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

@@ -0,0 +1,40 @@
+/** @typedef {typeof __propDef.props}  RadioGroupProps */
+/** @typedef {typeof __propDef.events}  RadioGroupEvents */
+/** @typedef {typeof __propDef.slots}  RadioGroupSlots */
+/**
+ * The container of `<Radio>`s.
+ * @see https://w3c.github.io/aria/#radiogroup
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+ */
+export default class RadioGroup extends SvelteComponentTyped<{
+    class?: string;
+    element?: HTMLElement;
+    orientation?: "horizontal" | "vertical";
+}, {
+    select: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type RadioGroupProps = typeof __propDef.props;
+export type RadioGroupEvents = typeof __propDef.events;
+export type RadioGroupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        element?: HTMLElement | null;
+        orientation?: ('horizontal' | 'vertical');
+    };
+    events: {
+        select: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -1,8 +1,8 @@
 <!--
   @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';
@@ -10,7 +10,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
@@ -22,7 +22,7 @@
 
   const dispatch = createEventDispatcher();
 
-  /** @type {(HTMLElement|undefined)} */
+  /** @type {HTMLElement?} */
   export let element = undefined;
 
   $: {

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

@@ -2,9 +2,9 @@
 /** @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;
@@ -27,7 +27,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;
-        element?: (HTMLElement | undefined);
+        element?: HTMLElement | null;
         disabled?: boolean;
         value?: string;
         ariaLabel?: string;

package/package/components/composite/select.svelte

@@ -7,7 +7,7 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
@@ -17,7 +17,7 @@
 
   /**
    * Selected option’s value.
-   * @type {(String|undefined)}
+   * @type {string?}
    */
   export let value = undefined;
 </script>

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

@@ -24,7 +24,7 @@ declare const __propDef: {
         [x: string]: any;
         label?: string;
         class?: string;
-        value?: (string | undefined);
+        value?: string | null;
     };
     events: {
         change: CustomEvent<any>;

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

@@ -1,7 +1,7 @@
 <!--
   @component
   @see https://w3c.github.io/aria/#tablist
-  @see https://w3c.github.io/aria-practices/#tabpanel
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
 -->
 <svelte:options accessors={true} />
 
@@ -10,13 +10,13 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
   let className = '';
 
   export { className as class };
 
-  /** @type {(HTMLElement|undefined)} */
+  /** @type {HTMLElement?} */
   export let element = undefined;
 
   /** @type {('horizontal'|'vertical')} */
@@ -41,7 +41,7 @@
 <style>.tab-list {
   display: flex;
   align-items: center;
-  border-color: var(--control-border-color);
+  border-color: var(--secondary-control-border-color);
 }
 .tab-list[aria-orientation=horizontal] {
   gap: 16px;

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

@@ -3,7 +3,7 @@
 /** @typedef {typeof __propDef.slots}  TabListSlots */
 /**
  * @see https://w3c.github.io/aria/#tablist
- * @see https://w3c.github.io/aria-practices/#tabpanel
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */
 export default class TabList extends SvelteComponentTyped<{
     [x: string]: any;
@@ -39,7 +39,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        element?: (HTMLElement | undefined);
+        element?: HTMLElement | null;
         name?: string;
         orientation?: ('horizontal' | 'vertical');
     };

package/package/components/core/button.svelte

@@ -1,7 +1,7 @@
 <!--
   @component
   @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} />
 
@@ -10,16 +10,15 @@
 
   /**
    * CSS class name on the button.
-   * @type {String}
+   * @type {string}
    */
-  // eslint-disable-next-line padding-line-between-statements
   let className = '';
 
   export { className as class };
 
   /**
    * Reference to the button element.
-   * @type {(HTMLButtonElement|undefined)}
+   * @type {HTMLButtonElement?}
    */
   export let element = undefined;
 
@@ -31,7 +30,7 @@
 
   /**
    * The `role` attribute on the button element.
-   * @type {String}
+   * @type {string}
    */
   export let role = 'button';
 
@@ -43,25 +42,25 @@
 
   /**
    * Whether the button is hidden.
-   * @type {Boolean}
+   * @type {boolean}
    */
   export let hidden = false;
 
   /**
    * Whether the button is disabled.
-   * @type {Boolean}
+   * @type {boolean}
    */
   export let disabled = false;
 
   /**
    * The `aria-pressed` attribute on the button element.
-   * @type {(Boolean|String|undefined)}
+   * @type {(boolean | 'false' | 'mixed' | 'true' | undefined)}
    */
   export let pressed = undefined;
 
   /**
    * Text label displayed on the button.
-   * @type {String}
+   * @type {string}
    */
   export let label = '';
 
@@ -78,8 +77,8 @@
 <button
   {type}
   {role}
-  hidden={hidden ? 'hidden' : undefined}
-  disabled={disabled ? 'disabled' : undefined}
+  hidden={hidden ? true : undefined}
+  disabled={disabled ? true : undefined}
   class="sui button {size} {className}"
   aria-hidden={hidden ? true : undefined}
   aria-disabled={disabled ? true : undefined}
@@ -152,7 +151,7 @@ button:global(.primary) :global(.label:only-child), button:global(.secondary) :g
   padding: 0 4px;
 }
 button:global(.primary) {
-  border-color: var(--control-border-color);
+  border-color: var(--secondary-control-border-color);
   color: var(--primary-accent-color-foreground);
   background-color: var(--primary-accent-color);
 }
@@ -174,7 +173,7 @@ button:global(.secondary)[aria-pressed=true] {
   background-color: var(--primary-accent-color);
 }
 button:global(.tertiary) {
-  border-color: var(--control-border-color);
+  border-color: var(--secondary-control-border-color);
   color: var(--highlight-foreground-color);
   background-color: var(--tertiary-background-color);
 }