@sveltia/ui 0.1.0

package/package/components/core/text-area.svelte

@@ -0,0 +1,90 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#textbox
+-->
+<svelte:options accessors={true} />
+
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  // eslint-disable-next-line padding-line-between-statements
+  let className = '';
+
+  export { className as class };
+
+  /** @type {(HTMLTextAreaElement|undefined)} */
+  export let element = undefined;
+
+  export let name = '';
+
+  /** @type {(String|undefined)} */
+  export let value = undefined;
+
+  export let autoResize = false;
+
+  /** @type {(String|undefined)} */
+  let height;
+
+  const resizeTextarea = () => {
+    height = 'auto';
+
+    window.requestAnimationFrame(() => {
+      height = value && element?.scrollHeight ? `${element.scrollHeight + 4}px` : undefined;
+    });
+  };
+
+  $: {
+    if (value && autoResize) {
+      resizeTextarea();
+    }
+  }
+</script>
+
+<div class="sui text-area {className}">
+  <textarea
+    name={name || undefined}
+    {...$$restProps}
+    style:height
+    bind:this={element}
+    on:click
+    on:input
+    on:keypress
+    on:input={() => {
+      value = element.value;
+    }}>{value}</textarea
+  >
+</div>
+
+<style>.text-area {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+}
+
+textarea {
+  display: block;
+  margin: 0;
+  border-width: 1px;
+  border-color: var(--control-border-color);
+  border-radius: var(--input--medium--border-radius);
+  background-color: var(--control-background-color);
+  padding: 8px;
+  width: 100%;
+  min-height: 8em;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.75;
+  resize: vertical;
+  transition: all 200ms;
+}
+textarea:focus {
+  border-color: var(--primary-accent-color);
+}
+textarea:disabled {
+  background-color: var(--disabled-background-color);
+  opacity: 0.4;
+  cursor: default;
+}</style>

package/package/components/core/text-area.svelte.d.ts

@@ -0,0 +1,57 @@
+/** @typedef {typeof __propDef.props}  TextAreaProps */
+/** @typedef {typeof __propDef.events}  TextAreaEvents */
+/** @typedef {typeof __propDef.slots}  TextAreaSlots */
+/** @see https://w3c.github.io/aria/#textbox */
+export default class TextArea extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    name?: string;
+    element?: HTMLTextAreaElement;
+    value?: string;
+    autoResize?: boolean;
+}, {
+    click: MouseEvent;
+    input: Event;
+    keypress: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    /**accessor*/
+    set class(arg: string);
+    get class(): string;
+    /**accessor*/
+    set element(arg: HTMLTextAreaElement);
+    get element(): HTMLTextAreaElement;
+    /**accessor*/
+    set name(arg: string);
+    get name(): string;
+    /**accessor*/
+    set value(arg: string);
+    get value(): string;
+    /**accessor*/
+    set autoResize(arg: boolean);
+    get autoResize(): boolean;
+}
+export type TextAreaProps = typeof __propDef.props;
+export type TextAreaEvents = typeof __propDef.events;
+export type TextAreaSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        name?: string;
+        element?: (HTMLTextAreaElement | undefined);
+        value?: (string | undefined);
+        autoResize?: boolean;
+    };
+    events: {
+        click: MouseEvent;
+        input: Event;
+        keypress: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,145 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#textbox
+-->
+<svelte:options accessors={true} />
+
+<script>
+  import { getRandomId } from '../helpers/util';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /** @type {(HTMLInputElement|undefined)} */
+  export let element = undefined;
+
+  /** @type {('textbox'|'searchbox'|'combobox'|'spinbutton')} */
+  export let role = 'textbox';
+
+  /**
+   * Whether the textbox is editable.
+   */
+  export let readOnly = false;
+
+  export let disabled = false;
+
+  export let name = '';
+
+  /** @type {(String|undefined)} */
+  export let value = undefined;
+
+  const id = getRandomId('input');
+  let ariaLabel = '';
+
+  $: {
+    // Replace `aria-label` with a visible label if `<input placeholder>` is not defined
+    if ('aria-label' in $$restProps && !('placeholder' in $$restProps)) {
+      ariaLabel = $$restProps['aria-label'];
+      delete $$restProps['aria-label'];
+      $$restProps['aria-labelledby'] = `${id}-label`;
+    }
+  }
+</script>
+
+<div class="sui text-input {className}">
+  <input
+    type="text"
+    {role}
+    name={name || undefined}
+    {readOnly}
+    aria-readonly={readOnly ? true : undefined}
+    {disabled}
+    aria-disabled={disabled ? true : undefined}
+    {...$$restProps}
+    bind:this={element}
+    bind:value
+    on:input
+    on:keydown
+    on:keyup
+    on:keypress
+    on:change
+  />
+  {#if ariaLabel}
+    <span id="{id}-label" class="label" class:hidden={!!value}>
+      {ariaLabel}
+    </span>
+  {/if}
+</div>
+
+<style>.text-input {
+  position: relative;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+}
+
+input {
+  z-index: 1;
+  display: inline-block;
+  flex: auto;
+  border-width: 1px;
+  border-color: var(--control-border-color);
+  border-radius: var(--input--medium--border-radius);
+  padding: 0 8px;
+  min-width: 0;
+  height: var(--input--medium--height);
+  background-color: var(--control-background-color);
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 30px;
+  transition: all 200ms;
+}
+input:focus {
+  border-color: var(--primary-accent-color);
+}
+input:read-only {
+  color: var(--ternary-foreground-color);
+  border-color: var(--control-border-color) !important;
+}
+input:disabled {
+  background-color: var(--disabled-background-color);
+  opacity: 0.4;
+  cursor: default;
+}
+input[aria-invalid=true] {
+  border-color: deeppink;
+}
+input ~ :global(button) {
+  flex: none;
+  margin-left: -1px;
+  border-width: 1px;
+  border-color: var(--control-border-color);
+  height: var(--input--medium--height);
+  aspect-ratio: 1/1;
+}
+input ~ :global(button):last-child {
+  border-radius: 0 4px 4px 0;
+}
+input ~ :global(button) :global(.icon) {
+  font-size: 20px;
+}
+
+.label {
+  position: absolute;
+  inset: 0 8px;
+  z-index: 2;
+  display: flex;
+  justify-content: var(--input-label-align, flex-start);
+  align-items: center;
+  color: var(--primary-foreground-color);
+  opacity: 0.5;
+  pointer-events: none;
+}
+.label.hidden {
+  opacity: 0;
+}
+
+input:focus + .label {
+  opacity: 0;
+}</style>

package/package/components/core/text-input.svelte.d.ts

@@ -0,0 +1,71 @@
+/** @typedef {typeof __propDef.props}  TextInputProps */
+/** @typedef {typeof __propDef.events}  TextInputEvents */
+/** @typedef {typeof __propDef.slots}  TextInputSlots */
+/** @see https://w3c.github.io/aria/#textbox */
+export default class TextInput extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    name?: string;
+    element?: HTMLInputElement;
+    role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
+    disabled?: boolean;
+    value?: string;
+    readOnly?: boolean;
+}, {
+    input: Event;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+    change: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    /**accessor*/
+    set class(arg: string);
+    get class(): string;
+    /**accessor*/
+    set element(arg: HTMLInputElement);
+    get element(): HTMLInputElement;
+    /**accessor*/
+    set role(arg: "textbox" | "searchbox" | "combobox" | "spinbutton");
+    get role(): "textbox" | "searchbox" | "combobox" | "spinbutton";
+    /**accessor*/
+    set readOnly(arg: boolean);
+    get readOnly(): boolean;
+    /**accessor*/
+    set disabled(arg: boolean);
+    get disabled(): boolean;
+    /**accessor*/
+    set name(arg: string);
+    get name(): string;
+    /**accessor*/
+    set value(arg: string);
+    get value(): string;
+}
+export type TextInputProps = typeof __propDef.props;
+export type TextInputEvents = typeof __propDef.events;
+export type TextInputSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        name?: string;
+        element?: (HTMLInputElement | undefined);
+        role?: ('textbox' | 'searchbox' | 'combobox' | 'spinbutton');
+        disabled?: boolean;
+        value?: (string | undefined);
+        readOnly?: boolean;
+    };
+    events: {
+        input: Event;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        keypress: KeyboardEvent;
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/core/toolbar.svelte

@@ -0,0 +1,74 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#toolbar
+  @see https://w3c.github.io/aria-practices/#toolbar
+-->
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  // eslint-disable-next-line padding-line-between-statements
+  let className = '';
+
+  export { className as class };
+
+  /**
+   * Define the `aria-orientation` property on the toolbar element.
+   * @type {('horizontal'|'vertical')}
+   */
+  export let orientation = 'horizontal';
+</script>
+
+<div
+  class="sui toolbar {orientation} {className}"
+  role="toolbar"
+  aria-orientation={orientation}
+  {...$$restProps}
+>
+  <slot />
+</div>
+
+<style>[role=toolbar] {
+  --toolbar-size: 40px;
+  flex: none !important;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+}
+[role=toolbar].primary {
+  --toolbar-size: 48px;
+  background-color: var(--secondary-background-color);
+}
+[role=toolbar].secondary {
+  background-color: var(--ternary-background-color);
+}
+[role=toolbar][aria-orientation=horizontal] {
+  height: var(--toolbar-size);
+}
+[role=toolbar][aria-orientation=vertical] {
+  flex-direction: column;
+  width: var(--toolbar-size);
+}
+[role=toolbar]:not(:last-child) {
+  border-width: 0 0 1px;
+  border-color: var(--primary-border-color);
+}
+[role=toolbar] :global(button[role="button"][aria-pressed="true"]),
+[role=toolbar] :global(button[role="button"][aria-checked="true"]) {
+  background-color: var(--highlight-background-color);
+}
+[role=toolbar] :global(h2) {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 0 8px;
+  font-size: 16px;
+}
+[role=toolbar] :global(h2) :global(span) {
+  font-size: 12px;
+  font-weight: normal;
+  opacity: 0.8;
+}</style>

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

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  ToolbarProps */
+/** @typedef {typeof __propDef.events}  ToolbarEvents */
+/** @typedef {typeof __propDef.slots}  ToolbarSlots */
+/**
+ * @see https://w3c.github.io/aria/#toolbar
+ * @see https://w3c.github.io/aria-practices/#toolbar
+ */
+export default class Toolbar extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    orientation?: "vertical" | "horizontal";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ToolbarProps = typeof __propDef.props;
+export type ToolbarEvents = typeof __propDef.events;
+export type ToolbarSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        orientation?: ('horizontal' | 'vertical');
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/editor/markdown.svelte

@@ -0,0 +1,75 @@
+<script>
+  import { _ } from 'svelte-i18n';
+  import Button from '../core/button.svelte';
+  import Separator from '../core/separator.svelte';
+  import TextArea from '../core/text-area.svelte';
+  import Toolbar from '../core/toolbar.svelte';
+
+  /** @type {(String|undefined)} */
+  export let value = undefined;
+
+  export let disabled = false;
+
+  const defaultButtons = [
+    { name: 'bold', label: $_('sui.markdown_editor.bold'), icon: 'format_bold' },
+    { name: 'italic', label: $_('sui.markdown_editor.italic'), icon: 'format_italic' },
+    { name: 'code', label: $_('sui.markdown_editor.code'), icon: 'code' },
+    { name: 'link', label: $_('sui.markdown_editor.link'), icon: 'link' },
+    { separator: true },
+    {
+      name: 'heading-one',
+      label: $_('sui.markdown_editor.heading_x', { values: { level: 1 } }),
+      icon: 'format_h1',
+    },
+    {
+      name: 'heading-two',
+      label: $_('sui.markdown_editor.heading_x', { values: { level: 2 } }),
+      icon: 'format_h2',
+    },
+    { name: 'quote', label: $_('sui.markdown_editor.quote'), icon: 'format_quote' },
+    { separator: true },
+    {
+      name: 'bulleted-list',
+      label: $_('sui.markdown_editor.bulleted_list'),
+      icon: 'format_list_bulleted',
+    },
+    {
+      name: 'numbered-list',
+      label: $_('sui.markdown_editor.numbered_list'),
+      icon: 'format_list_numbered',
+    },
+  ];
+</script>
+
+<div>
+  <Toolbar aria-label={$_('sui.markdown_editor.markdown_editor')}>
+    {#each defaultButtons as { label, icon, separator }}
+      {#if separator}
+        <Separator />
+      {:else}
+        <Button {disabled} iconName={icon} iconLabel={label} />
+      {/if}
+    {/each}
+  </Toolbar>
+  <TextArea autoResize={true} {disabled} bind:value />
+</div>
+
+<style>div {
+  display: contents;
+}
+div :global([role="toolbar"]) {
+  display: flex;
+  gap: 8px;
+  border-radius: 4px 4px 0 0;
+  padding: 8px;
+  background-color: var(--ternary-background-color);
+}
+div :global([role="toolbar"]) :global(button) {
+  flex: none;
+}
+div :global([role="toolbar"]) + :global(div) {
+  width: 100%;
+}
+div :global([role="toolbar"]) + :global(div) :global(textarea) {
+  border-radius: 0 0 4px 4px !important;
+}</style>

package/package/components/editor/markdown.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  MarkdownProps */
+/** @typedef {typeof __propDef.events}  MarkdownEvents */
+/** @typedef {typeof __propDef.slots}  MarkdownSlots */
+export default class Markdown extends SvelteComponentTyped<{
+    disabled?: boolean;
+    value?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MarkdownProps = typeof __propDef.props;
+export type MarkdownEvents = typeof __propDef.events;
+export type MarkdownSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        disabled?: boolean;
+        value?: (string | undefined);
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/helpers/group.d.ts

@@ -0,0 +1,37 @@
+export function activateGroup(...args: any[]): Promise<Group>;
+/**
+ * Implement keyboard and mouse interactions for a grouping composite widget.
+ */
+declare class Group {
+    /**
+     *
+     * @param {HTMLElement} parent
+     * @todo Check for added elements probably with `MutationObserver`.
+     */
+    constructor(parent: HTMLElement);
+    parent: HTMLElement;
+    role: string;
+    grid: boolean;
+    multi: boolean;
+    id: string;
+    parentGroupSelector: string;
+    orientation: any;
+    childSelectedAttr: any;
+    /** @type {string} */
+    get selector(): string;
+    /** @type {HTMLElement[]} */
+    get allMembers(): HTMLElement[];
+    /** @type {HTMLElement[]} */
+    get activeMembers(): HTMLElement[];
+    /**
+     *
+     * @param {KeyboardEvent}
+     */
+    onClick(event: any): void;
+    /**
+     *
+     * @param {KeyboardEvent}
+     */
+    onKeyDown(event: any): void;
+}
+export {};