@sveltia/ui 0.2.4 → 0.3.0

package/package/components/text-field/markdown-editor.svelte.d.ts

@@ -0,0 +1,26 @@
+/** @typedef {typeof __propDef.props}  MarkdownEditorProps */
+/** @typedef {typeof __propDef.events}  MarkdownEditorEvents */
+/** @typedef {typeof __propDef.slots}  MarkdownEditorSlots */
+/** A Markdown text editor. */
+export default class MarkdownEditor extends SvelteComponentTyped<{
+    disabled?: boolean;
+    value?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MarkdownEditorProps = typeof __propDef.props;
+export type MarkdownEditorEvents = typeof __propDef.events;
+export type MarkdownEditorSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        disabled?: boolean;
+        value?: string | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/{core → text-field}/number-input.svelte

@@ -1,11 +1,13 @@
 <!--
   @component
+  The equivalent of the HTML `<input type="number">` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
   @see https://w3c.github.io/aria/#textbox
 -->
 <script>
   import { _ } from 'svelte-i18n';
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
 
   /**
@@ -24,28 +26,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>
 
@@ -60,13 +66,14 @@
     {...$$restProps}
     on:keydown={(event) => {
       const { key, ctrlKey, metaKey, altKey, shiftKey } = event;
+      const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
 
-      if (key === 'ArrowDown' && !ctrlKey && !metaKey && !altKey && !shiftKey) {
+      if (key === 'ArrowDown' && !hasModifier) {
         event.preventDefault();
         decrease();
       }
 
-      if (key === 'ArrowUp' && !ctrlKey && !metaKey && !altKey && !shiftKey) {
+      if (key === 'ArrowUp' && !hasModifier) {
         event.preventDefault();
         increase();
       }
@@ -76,7 +83,7 @@
   />
   <Button
     class="iconic"
-    disabled={disabled || Number.isNaN(Number(value))}
+    disabled={disabled || Number.isNaN(Number(value)) || isMin}
     on:click={() => {
       decrease();
     }}
@@ -85,7 +92,7 @@
   </Button>
   <Button
     class="iconic"
-    disabled={disabled || Number.isNaN(Number(value))}
+    disabled={disabled || Number.isNaN(Number(value)) || isMax}
     on:click={() => {
       increase();
     }}
@@ -104,13 +111,16 @@
 }
 .number-input :global(button) {
   flex: none;
-  margin-left: -1px;
   border-width: 1px;
   border-color: var(--control-border-color);
   width: 32px;
   height: var(--input--medium--height);
 }
-.number-input :global(button):last-child {
+.number-input :global(button):first-of-type {
+  border-radius: 0;
+  border-width: 1px 0;
+}
+.number-input :global(button):last-of-type {
   border-radius: 0 4px 4px 0;
 }
 .number-input :global(button) :global(.icon) {

package/package/components/{core → text-field}/number-input.svelte.d.ts

@@ -1,12 +1,16 @@
 /** @typedef {typeof __propDef.props}  NumberInputProps */
 /** @typedef {typeof __propDef.events}  NumberInputEvents */
 /** @typedef {typeof __propDef.slots}  NumberInputSlots */
-/** @see https://w3c.github.io/aria/#textbox */
+/**
+ * The equivalent of the HTML `<input type="number">` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
+ * @see https://w3c.github.io/aria/#textbox
+ */
 export default class NumberInput extends SvelteComponentTyped<{
     [x: string]: any;
-    class?: string;
     disabled?: boolean;
     value?: string;
+    class?: string;
     min?: any;
     max?: any;
     step?: number;
@@ -24,9 +28,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
         disabled?: boolean;
         value?: string | null;
+        class?: string;
         min?: any;
         max?: any;
         step?: number;

package/package/components/{core → text-field}/password-input.svelte

@@ -1,11 +1,14 @@
 <!--
   @component
+  The equivalent of the HTML `<input type="password">` element, but it comes with the Show/Hide
+  button.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
   @see https://w3c.github.io/aria/#textbox
 -->
 <script>
   import { _ } from 'svelte-i18n';
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
 
   /**

package/package/components/{core → text-field}/password-input.svelte.d.ts

@@ -1,11 +1,16 @@
 /** @typedef {typeof __propDef.props}  PasswordInputProps */
 /** @typedef {typeof __propDef.events}  PasswordInputEvents */
 /** @typedef {typeof __propDef.slots}  PasswordInputSlots */
-/** @see https://w3c.github.io/aria/#textbox */
+/**
+ * The equivalent of the HTML `<input type="password">` element, but it comes with the Show/Hide
+ * button.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
+ * @see https://w3c.github.io/aria/#textbox
+ */
 export default class PasswordInput extends SvelteComponentTyped<{
     [x: string]: any;
-    class?: string;
     value?: string;
+    class?: string;
 }, {
     input: Event;
     keypress: KeyboardEvent;
@@ -21,8 +26,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
         value?: string | null;
+        class?: string;
     };
     events: {
         input: Event;

package/package/components/{core → text-field}/search-bar.svelte

@@ -1,13 +1,16 @@
 <!--
   @component
+  The equivalent of the HTML `<input type="search">` element. It comes with a magnifier icon and
+  clear button.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
   @see https://w3c.github.io/aria/#search
 -->
 <svelte:options accessors={true} />
 
 <script>
   import { _ } from 'svelte-i18n';
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
+  import Button from '../button/button.svelte';
+  import Icon from '../icon/icon.svelte';
   import TextInput from './text-input.svelte';
 
   /**

package/package/components/{core → text-field}/search-bar.svelte.d.ts

@@ -1,12 +1,17 @@
 /** @typedef {typeof __propDef.props}  SearchBarProps */
 /** @typedef {typeof __propDef.events}  SearchBarEvents */
 /** @typedef {typeof __propDef.slots}  SearchBarSlots */
-/** @see https://w3c.github.io/aria/#search */
+/**
+ * The equivalent of the HTML `<input type="search">` element. It comes with a magnifier icon and
+ * clear button.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
+ * @see https://w3c.github.io/aria/#search
+ */
 export default class SearchBar extends SvelteComponentTyped<{
     [x: string]: any;
     focus?: () => void;
-    class?: string;
     value?: string;
+    class?: string;
 }, {
     input: Event;
     keydown: KeyboardEvent;
@@ -32,8 +37,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         focus?: () => void;
-        class?: string;
         value?: string;
+        class?: string;
     };
     events: {
         input: Event;

package/package/components/{core → text-field}/text-area.svelte

@@ -1,5 +1,7 @@
 <!--
   @component
+  A multi-line text field. The equivalent of the HTML `<textarea>` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
   @see https://w3c.github.io/aria/#textbox
 -->
 <svelte:options accessors={true} />

package/package/components/{core → text-field}/text-area.svelte.d.ts

@@ -1,13 +1,17 @@
 /** @typedef {typeof __propDef.props}  TextAreaProps */
 /** @typedef {typeof __propDef.events}  TextAreaEvents */
 /** @typedef {typeof __propDef.slots}  TextAreaSlots */
-/** @see https://w3c.github.io/aria/#textbox */
+/**
+ * A multi-line text field. The equivalent of the HTML `<textarea>` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
+ * @see https://w3c.github.io/aria/#textbox
+ */
 export default class TextArea extends SvelteComponentTyped<{
     [x: string]: any;
-    class?: string;
-    element?: HTMLTextAreaElement;
     name?: string;
     value?: string;
+    class?: string;
+    element?: HTMLTextAreaElement;
     autoResize?: boolean;
 }, {
     click: MouseEvent;
@@ -39,10 +43,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        element?: HTMLTextAreaElement | null;
         name?: string;
         value?: string | null;
+        class?: string;
+        element?: HTMLTextAreaElement | null;
         autoResize?: boolean;
     };
     events: {

package/package/components/{core → text-field}/text-input.svelte

@@ -1,11 +1,13 @@
 <!--
   @component
+  A generic, single-line text field. The equivalent of the HTML `<input type="text">` element.
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
   @see https://w3c.github.io/aria/#textbox
 -->
 <svelte:options accessors={true} />
 
 <script>
-  import { getRandomId } from '../helpers/util';
+  import { getRandomId } from '../util/util';
 
   /**
    * CSS class name on the button.

package/package/components/{core → text-field}/text-input.svelte.d.ts

@@ -1,15 +1,19 @@
 /** @typedef {typeof __propDef.props}  TextInputProps */
 /** @typedef {typeof __propDef.events}  TextInputEvents */
 /** @typedef {typeof __propDef.slots}  TextInputSlots */
-/** @see https://w3c.github.io/aria/#textbox */
+/**
+ * A generic, single-line text field. The equivalent of the HTML `<input type="text">` element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
+ * @see https://w3c.github.io/aria/#textbox
+ */
 export default class TextInput extends SvelteComponentTyped<{
     [x: string]: any;
-    class?: string;
-    element?: HTMLInputElement;
-    role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
     disabled?: boolean;
     name?: string;
     value?: string | number;
+    class?: string;
+    element?: HTMLInputElement;
+    role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
     readOnly?: boolean;
 }, {
     input: Event;
@@ -49,12 +53,12 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
-        element?: HTMLInputElement | null;
-        role?: ('textbox' | 'searchbox' | 'combobox' | 'spinbutton');
         disabled?: boolean;
         name?: string;
         value?: (string | number | undefined);
+        class?: string;
+        element?: HTMLInputElement | null;
+        role?: ('textbox' | 'searchbox' | 'combobox' | 'spinbutton');
         readOnly?: boolean;
     };
     events: {

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

@@ -1,7 +1,8 @@
 <!--
   @component
+  A toolbar layout that can contain `<Button>`, `<Select>` and other widgets.
   @see https://w3c.github.io/aria/#toolbar
-  @see https://w3c.github.io/aria-practices/#toolbar
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
 -->
 <script>
   /**

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

@@ -2,13 +2,14 @@
 /** @typedef {typeof __propDef.events}  ToolbarEvents */
 /** @typedef {typeof __propDef.slots}  ToolbarSlots */
 /**
+ * A toolbar layout that can contain `<Button>`, `<Select>` and other widgets.
  * @see https://w3c.github.io/aria/#toolbar
- * @see https://w3c.github.io/aria-practices/#toolbar
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
  */
 export default class Toolbar extends SvelteComponentTyped<{
     [x: string]: any;
     class?: string;
-    orientation?: "horizontal" | "vertical";
+    orientation?: "vertical" | "horizontal";
 }, {
     [evt: string]: CustomEvent<any>;
 }, {

package/package/components/util/app-shell.svelte

@@ -52,13 +52,13 @@
   --foreground-color-2-hsl: var(--base-hue) 5% 20%;
   --foreground-color-3-hsl: var(--base-hue) 5% 40%;
   --foreground-color-4-hsl: var(--base-hue) 5% 60%;
-  --border-color-1-hsl: var(--base-hue) 5% 75%;
-  --border-color-2-hsl: var(--base-hue) 5% 80%;
   --background-color-1-hsl: var(--base-hue) 5% 100%;
   --background-color-2-hsl: var(--base-hue) 5% 98%;
   --background-color-3-hsl: var(--base-hue) 5% 94%;
   --background-color-4-hsl: var(--base-hue) 5% 90%;
   --background-color-5-hsl: var(--base-hue) 5% 86%;
+  --border-color-1-hsl: var(--base-hue) 5% 78%;
+  --border-color-2-hsl: var(--base-hue) 5% 82%;
   --shadow-color: var(--base-hue) 10% 0%;
   --primary-accent-color: hsl(var(--base-hue) 80% 45%);
   --primary-accent-color-lighter: hsl(var(--base-hue) 80% 40%);
@@ -81,13 +81,13 @@
   --foreground-color-2-hsl: var(--base-hue) 10% 80%;
   --foreground-color-3-hsl: var(--base-hue) 10% 60%;
   --foreground-color-4-hsl: var(--base-hue) 10% 40%;
-  --border-color-1-hsl: var(--base-hue) 10% 28%;
-  --border-color-2-hsl: var(--base-hue) 10% 24%;
   --background-color-1-hsl: var(--base-hue) 10% 10%;
   --background-color-2-hsl: var(--base-hue) 10% 12%;
   --background-color-3-hsl: var(--base-hue) 10% 16%;
   --background-color-4-hsl: var(--base-hue) 10% 20%;
   --background-color-5-hsl: var(--base-hue) 10% 24%;
+  --border-color-1-hsl: var(--base-hue) 10% 32%;
+  --border-color-2-hsl: var(--base-hue) 10% 28%;
   --shadow-color: var(--base-hue) 10% 0%;
   --primary-accent-color: hsl(var(--base-hue) 100% 45%);
   --primary-accent-color-lighter: hsl(var(--base-hue) 100% 55%);
@@ -157,6 +157,7 @@
   --primary-border-color: hsl(var(--border-color-1-hsl));
   --secondary-border-color: hsl(var(--border-color-2-hsl));
   --control-border-color: hsl(var(--border-color-2-hsl));
+  --checkbox-border-color: hsl(var(--foreground-color-3-hsl));
   --danger-border-color: hsl(
     var(--danger-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
   );
@@ -224,6 +225,10 @@
 :global(*) {
   scroll-behavior: smooth;
   box-sizing: border-box;
+  outline-offset: 1px;
+  outline-width: 2px !important;
+  outline-style: solid;
+  outline-color: transparent;
   border-width: 0;
   border-style: solid;
 }
@@ -234,10 +239,7 @@
 }
 
 :global(:focus-visible) {
-  outline-offset: -2px;
-  outline-width: 2px !important;
-  outline-style: solid;
-  outline-color: hsl(var(--hue), 100%, 50%, 25%);
+  outline-color: var(--primary-accent-color-lighter);
 }
 
 :global(h1),
@@ -280,17 +282,6 @@
   line-height: 1.75;
 }
 
-:global([role=grid]) {
-  display: table;
-  width: 100%;
-}
-:global([role=grid]) :global(.colgroup) {
-  display: table-column-group;
-}
-:global([role=grid]) :global(.colgroup) :global(.col) {
-  display: table-column;
-}
-
 :global(code),
 :global(pre) {
   font-family: var(--font-family--monospace);
@@ -324,23 +315,6 @@
   background: transparent;
 }
 
-:global(.thead[role=rowgroup]) {
-  display: table-header-group;
-}
-
-:global(.tbody[role=rowgroup]) {
-  display: table-row-group;
-}
-
-:global([role=row]) {
-  display: table-row;
-}
-
-:global([role=columnheader]),
-:global([role=gridcell]) {
-  display: table-cell;
-}
-
 :global(.app-shell) {
   position: fixed;
   inset: 0;