@sveltia/ui 0.2.4 → 0.2.5

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

@@ -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/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';
@@ -162,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,7 +3,7 @@
 /** @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;

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>

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/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} />
 
@@ -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;

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} />
 

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;

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

@@ -1,8 +1,8 @@
 <!--
   @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';
@@ -23,23 +23,24 @@
 </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';

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;

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} />
 
@@ -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;

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} />
 
@@ -151,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);
 }
@@ -173,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);
 }

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

@@ -3,7 +3,7 @@
 /** @typedef {typeof __propDef.slots}  ButtonSlots */
 /**
  * @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;

package/package/components/core/checkbox.svelte

@@ -1,7 +1,7 @@
 <!--
   @component
   @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';
@@ -20,6 +20,9 @@
   /** @type {string} */
   export let name = '';
 
+  /** @type {string?} */
+  export let label = undefined;
+
   /** @type {string?} */
   export let value = undefined;
 
@@ -35,7 +38,7 @@
   const dispatch = createEventDispatcher();
   const id = getRandomId('checkbox');
   /** @type {Button} */
-  let button;
+  let buttonComponent;
 </script>
 
 {#if name && value && checked && !indeterminate}
@@ -43,24 +46,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 +76,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 +99,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(--primary-control-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(--primary-control-border-color);
 }
 .checkbox :global(button[aria-checked="false"]) {
   color: transparent;
+}
+.checkbox label {
+  cursor: inherit;
 }</style>

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

@@ -3,9 +3,10 @@
 /** @typedef {typeof __propDef.slots}  CheckboxSlots */
 /**
  * @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<{
+    label?: string;
     class?: string;
     disabled?: boolean;
     name?: string;
@@ -26,6 +27,7 @@ export type CheckboxSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        label?: string | null;
         class?: string;
         disabled?: boolean;
         name?: string;

package/package/components/core/dialog.svelte

@@ -1,7 +1,7 @@
 <!--
   @component
   @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';

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

@@ -3,7 +3,7 @@
 /** @typedef {typeof __propDef.slots}  DialogSlots */
 /**
  * @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/core/drawer.svelte

@@ -1,7 +1,7 @@
 <!--
   @component
   @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';

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

@@ -3,7 +3,7 @@
 /** @typedef {typeof __propDef.slots}  DrawerSlots */
 /**
  * @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/menu-button.svelte

@@ -1,6 +1,6 @@
 <!--
   @component
-  @see https://w3c.github.io/aria-practices/#menubutton
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
 -->
 <script>
   import Popup from '../util/popup.svelte';

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

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  MenuButtonProps */
 /** @typedef {typeof __propDef.events}  MenuButtonEvents */
 /** @typedef {typeof __propDef.slots}  MenuButtonSlots */
-/** @see https://w3c.github.io/aria-practices/#menubutton */
+/** @see https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ */
 export default class MenuButton extends SvelteComponentTyped<{
     [x: string]: any;
     class?: string;

package/package/components/core/number-input.svelte

@@ -24,28 +24,32 @@
   export let max = undefined;
   export let step = 1;
 
+  $: maximumFractionDigits = String(step).split('.')[1]?.length || 0;
+  $: isMin = typeof min === 'number' && Number(value || 0) <= min;
+  $: isMax = typeof max === 'number' && Number(value || 0) >= max;
+
   let component;
 
   /**
    *
    */
   const decrease = () => {
-    if (typeof min === 'number' && Number(value || 0) === min) {
+    if (isMin) {
       return;
     }
 
-    value = String(Number(value || 0) - step);
+    value = Number(Number(value || 0) - step).toFixed(maximumFractionDigits);
   };
 
   /**
    *
    */
   const increase = () => {
-    if (typeof min === 'number' && Number(value || 0) === max) {
+    if (isMax) {
       return;
     }
 
-    value = String(Number(value || 0) + step);
+    value = Number(Number(value || 0) + step).toFixed(maximumFractionDigits);
   };
 </script>
 
@@ -76,7 +80,7 @@
   />
   <Button
     class="iconic"
-    disabled={disabled || Number.isNaN(Number(value))}
+    disabled={disabled || Number.isNaN(Number(value)) || isMin}
     on:click={() => {
       decrease();
     }}
@@ -85,7 +89,7 @@
   </Button>
   <Button
     class="iconic"
-    disabled={disabled || Number.isNaN(Number(value))}
+    disabled={disabled || Number.isNaN(Number(value)) || isMax}
     on:click={() => {
       increase();
     }}
@@ -106,7 +110,7 @@
   flex: none;
   margin-left: -1px;
   border-width: 1px;
-  border-color: var(--control-border-color);
+  border-color: var(--secondary-control-border-color);
   width: 32px;
   height: var(--input--medium--height);
 }

package/package/components/core/password-input.svelte

@@ -69,7 +69,7 @@
   flex: none;
   margin-left: -1px;
   border-width: 1px;
-  border-color: var(--control-border-color);
+  border-color: var(--secondary-control-border-color);
   height: var(--input--medium--height);
   aspect-ratio: 1/1;
 }