@sveltia/ui 0.1.5 → 0.2.0

package/package/components/core/tab-panel.svelte

@@ -1,23 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#tabpanel
-  @see https://w3c.github.io/aria-practices/#tabpanel
--->
-<script>
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  // eslint-disable-next-line padding-line-between-statements
-  let className = '';
-
-  export { className as class };
-</script>
-
-<div class="sui tabpanel {className}" role="tabpanel" {...$$restProps}>
-  <slot />
-</div>
-
-<style>.tabpanel[aria-hidden=true], .tabpanel:not([aria-hidden]) {
-  display: none;
-}</style>

package/package/components/core/tab-panel.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  TabPanelProps */
-/** @typedef {typeof __propDef.events}  TabPanelEvents */
-/** @typedef {typeof __propDef.slots}  TabPanelSlots */
-/**
- * @see https://w3c.github.io/aria/#tabpanel
- * @see https://w3c.github.io/aria-practices/#tabpanel
- */
-export default class TabPanel {
-}
-export type TabPanelProps = typeof __propDef.props;
-export type TabPanelEvents = typeof __propDef.events;
-export type TabPanelSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/package/components/core/tab.svelte

@@ -1,22 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#tab
-  @see https://w3c.github.io/aria-practices/#tabpanel
--->
-<script>
-  import Button from './button.svelte';
-
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  let className = '';
-
-  export { className as class };
-</script>
-
-<Button role="tab" class="sui tab {className}" {...$$restProps}>
-  <slot name="start-icon" slot="start-icon" />
-  <slot />
-  <slot name="end-icon" slot="end-icon" />
-</Button>

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

@@ -1,31 +0,0 @@
-/** @typedef {typeof __propDef.props}  TabProps */
-/** @typedef {typeof __propDef.events}  TabEvents */
-/** @typedef {typeof __propDef.slots}  TabSlots */
-/**
- * @see https://w3c.github.io/aria/#tab
- * @see https://w3c.github.io/aria-practices/#tabpanel
- */
-export default class Tab {
-}
-export type TabProps = typeof __propDef.props;
-export type TabEvents = typeof __propDef.events;
-export type TabSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'start-icon': {
-            slot: string;
-        };
-        default: {};
-        'end-icon': {
-            slot: string;
-        };
-    };
-};
-export {};

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

@@ -1,90 +0,0 @@
-<!--
-  @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

@@ -1,43 +0,0 @@
-/** @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 {
-    /**accessor*/
-    set class(arg: any);
-    get class(): any;
-    /**accessor*/
-    set element(arg: any);
-    get element(): any;
-    /**accessor*/
-    set name(arg: any);
-    get name(): any;
-    /**accessor*/
-    set value(arg: any);
-    get value(): any;
-    /**accessor*/
-    set autoResize(arg: any);
-    get autoResize(): any;
-}
-export type TextAreaProps = typeof __propDef.props;
-export type TextAreaEvents = typeof __propDef.events;
-export type TextAreaSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-        element?: (HTMLTextAreaElement | undefined);
-        name?: string;
-        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

@@ -1,145 +0,0 @@
-<!--
-  @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

@@ -1,53 +0,0 @@
-/** @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 {
-    /**accessor*/
-    set class(arg: any);
-    get class(): any;
-    /**accessor*/
-    set element(arg: any);
-    get element(): any;
-    /**accessor*/
-    set role(arg: any);
-    get role(): any;
-    /**accessor*/
-    set readOnly(arg: any);
-    get readOnly(): any;
-    /**accessor*/
-    set disabled(arg: any);
-    get disabled(): any;
-    /**accessor*/
-    set name(arg: any);
-    get name(): any;
-    /**accessor*/
-    set value(arg: any);
-    get value(): any;
-}
-export type TextInputProps = typeof __propDef.props;
-export type TextInputEvents = typeof __propDef.events;
-export type TextInputSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-        element?: (HTMLInputElement | undefined);
-        role?: ('textbox' | 'searchbox' | 'combobox' | 'spinbutton');
-        disabled?: boolean;
-        name?: string;
-        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

@@ -1,74 +0,0 @@
-<!--
-  @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

@@ -1,26 +0,0 @@
-/** @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 {
-}
-export type ToolbarProps = typeof __propDef.props;
-export type ToolbarEvents = typeof __propDef.events;
-export type ToolbarSlots = typeof __propDef.slots;
-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

@@ -1,78 +0,0 @@
-<script>
-  import { _ } from 'svelte-i18n';
-  import Button from '../core/button.svelte';
-  import Icon from '../core/icon.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}>
-          <Icon slot="start-icon" name={icon} {label} />
-        </Button>
-      {/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

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

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

@@ -1,37 +0,0 @@
-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 {};