@nuykon/basecoat-svelte 0.0.0-stage → 1.0.2

package/dist/PopoverRoot.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { attachWidget, cx } from './core.js';
+  let {
+    children,
+    class: className,
+    ...rest
+  }: SvelteHTMLElements['div'] & { children?: Snippet } = $props();
+  let element: HTMLElement;
+  $effect(() => attachWidget(element));
+</script>
+
+<div
+  {...rest}
+  bind:this={element}
+  class={cx('popover', typeof className === 'string' ? className : undefined)}
+>
+  {@render children?.()}
+</div>

package/dist/PopoverRoot.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = SvelteHTMLElements['div'] & {
+    children?: Snippet;
+};
+declare const PopoverRoot: import("svelte").Component<$$ComponentProps, {}, "">;
+type PopoverRoot = ReturnType<typeof PopoverRoot>;
+export default PopoverRoot;

package/dist/Progress.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { percentage } from './core.js';
+  let {
+    value,
+    max = 100,
+    label = 'Progress',
+  }: { value?: number; max?: number; label?: string } = $props();
+</script>
+
+<div
+  class="progress"
+  role="progressbar"
+  aria-label={label}
+  aria-valuemin={0}
+  aria-valuemax={max}
+  aria-valuenow={value}
+  aria-busy={value === undefined}
+>
+  <span style:width={`${value === undefined ? 100 : percentage(value, 0, max)}%`}></span>
+</div>

package/dist/Progress.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    value?: number;
+    max?: number;
+    label?: string;
+};
+declare const Progress: import("svelte").Component<$$ComponentProps, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/RadioGroup.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { formReset, type Option } from './core.js';
+  type Props = {
+    options: readonly Option[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    label?: string;
+  };
+  let {
+    options,
+    value = $bindable(undefined),
+    defaultValue = '',
+    onValueChange,
+    name,
+    disabled,
+    required,
+    label,
+  }: Props = $props();
+  const id = $props.id();
+  let internal = $state((() => defaultValue)()),
+    element: HTMLDivElement;
+  let current = $derived(value === undefined ? internal : value);
+  function set(next: string) {
+    if (value === undefined) internal = next;
+    else if (!onValueChange) value = next;
+    onValueChange?.(next);
+  }
+  $effect(() => formReset(element, () => set(defaultValue)));
+</script>
+
+<div bind:this={element} role="radiogroup" aria-label={label} class="bc-radio-group">
+  {#each options as option (option.value)}<label
+      ><input
+        class="input"
+        type="radio"
+        name={name ?? id}
+        value={option.value}
+        checked={current === option.value}
+        disabled={disabled || option.disabled}
+        {required}
+        onchange={() => set(option.value)}
+      />
+      {option.label}</label
+    >{/each}
+</div>

package/dist/RadioGroup.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type Option } from './core.js';
+type Props = {
+    options: readonly Option[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    label?: string;
+};
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/ScrollArea.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { cx, type Variant, type Size } from './core.js';
+  type Props = Omit<SvelteHTMLElements['div'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+  };
+  let {
+    children,
+    variant,
+    size,
+    as = 'div',
+    element = $bindable(null),
+    class: className,
+    ...rest
+  }: Props = $props();
+</script>
+
+<svelte:element
+  this={as}
+  {...{ style: 'overflow:auto' }}
+  bind:this={element}
+  class={cx('scrollbar', typeof className === 'string' ? className : undefined)}
+  data-variant={variant}
+  data-size={size}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

package/dist/ScrollArea.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import { type Variant, type Size } from './core.js';
+type Props = Omit<SvelteHTMLElements['div'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+};
+declare const ScrollArea: import("svelte").Component<Props, {}, "element">;
+type ScrollArea = ReturnType<typeof ScrollArea>;
+export default ScrollArea;

package/dist/Select.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import {
+    attachFloating,
+    createTypeahead,
+    dismissableLayer,
+    formReset,
+    scrollWithin,
+    nextIndex,
+    type Option,
+  } from './core.js';
+  type Selection = string | string[];
+  type Props = {
+    options: readonly Option[];
+    value?: Selection;
+    defaultValue?: Selection;
+    onValueChange?: (value: Selection) => void;
+    multiple?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    label: string;
+    placeholder?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+  };
+  let {
+    options,
+    value = $bindable(undefined),
+    defaultValue,
+    onValueChange,
+    multiple = false,
+    disabled,
+    required,
+    name,
+    label,
+    placeholder = 'Select…',
+    searchable = false,
+    searchPlaceholder = 'Search…',
+    emptyLabel = 'No results',
+  }: Props = $props();
+  const id = $props.id(),
+    typeahead = createTypeahead();
+  let internal = $state((() => defaultValue ?? (multiple ? [] : ''))()),
+    current = $derived(value === undefined ? internal : value),
+    selected = $derived(Array.isArray(current) ? current : [current]);
+  let open = $state(false),
+    query = $state(''),
+    active = $state(-1),
+    visible = $derived(
+      options.filter(
+        (option) =>
+          !searchable || option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase()),
+      ),
+    );
+  let anchor: HTMLButtonElement,
+    popup = $state<HTMLDivElement>(),
+    list = $state<HTMLDivElement>(),
+    search = $state<HTMLInputElement>(),
+    native: HTMLSelectElement;
+  function set(next: Selection) {
+    if (value === undefined) internal = next;
+    else if (!onValueChange) value = next;
+    onValueChange?.(next);
+  }
+  function close(restore: boolean) {
+    open = false;
+    query = '';
+    if (restore) anchor.focus();
+  }
+  function choose(index: number) {
+    const option = visible[index];
+    if (!option || option.disabled) return;
+    set(
+      multiple
+        ? selected.includes(option.value)
+          ? selected.filter((value) => value !== option.value)
+          : [...selected.filter(Boolean), option.value]
+        : option.value,
+    );
+    if (!multiple) close(true);
+  }
+  function keyboard(event: KeyboardEvent) {
+    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+      event.preventDefault();
+      active = nextIndex(visible, active, event.key);
+    } else if (event.key === 'Enter' || (!searchable && event.key === ' ')) {
+      event.preventDefault();
+      choose(active);
+    } else if (event.key === 'Tab') close(false);
+    else if (
+      !searchable &&
+      event.key.length === 1 &&
+      !event.ctrlKey &&
+      !event.metaKey &&
+      !event.altKey
+    ) {
+      event.preventDefault();
+      active = typeahead(event.key, visible, active);
+    }
+  }
+  $effect(() => {
+    if (disabled) close(false);
+  });
+  $effect(() => {
+    if (!open || !popup) return;
+    const content = popup,
+      position = attachFloating(anchor, content, { matchWidth: true }),
+      layer = dismissableLayer(anchor.ownerDocument, {
+        elements: () => [anchor, content],
+        dismiss: (reason) => close(reason === 'escape'),
+      });
+    return () => {
+      layer();
+      position();
+    };
+  });
+  $effect(() => {
+    if (open) {
+      query;
+      active = nextIndex(visible, -1, 'Home');
+      void tick().then(() => (searchable ? search : list)?.focus());
+    }
+  });
+  $effect(() => {
+    const item = list?.querySelector<HTMLElement>(`[data-index="${active}"]`);
+    if (list && item) scrollWithin(list, item);
+  });
+  $effect(() => formReset(native, () => set(defaultValue ?? (multiple ? [] : ''))));
+</script>
+
+<div class={searchable ? 'combobox' : 'select'}>
+  <button
+    bind:this={anchor}
+    type="button"
+    class="btn"
+    data-variant="outline"
+    {disabled}
+    role="combobox"
+    aria-label={label}
+    aria-haspopup="listbox"
+    aria-expanded={open}
+    aria-controls={`${id}-list`}
+    aria-required={required}
+    onclick={() => (open = !open)}
+    onkeydown={(event) => {
+      if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+        event.preventDefault();
+        open = true;
+      }
+    }}
+    ><span
+      >{options
+        .filter((option) => selected.includes(option.value))
+        .map((option) => option.label)
+        .join(', ') || placeholder}</span
+    ><span aria-hidden="true">⌄</span></button
+  >
+  {#if open}<div bind:this={popup} data-popover="" popover="manual" class="bc-floating">
+      {#if searchable}<input
+          bind:this={search}
+          class="input bc-search"
+          value={query}
+          role="combobox"
+          aria-label={searchPlaceholder}
+          aria-autocomplete="list"
+          aria-expanded="true"
+          aria-controls={`${id}-list`}
+          aria-activedescendant={active >= 0 ? `${id}-option-${active}` : undefined}
+          placeholder={searchPlaceholder}
+          oninput={(event) => (query = event.currentTarget.value)}
+          onkeydown={keyboard}
+        />{/if}
+      <div
+        bind:this={list}
+        id={`${id}-list`}
+        role="listbox"
+        tabindex="-1"
+        aria-label={label}
+        aria-multiselectable={multiple || undefined}
+        aria-activedescendant={active >= 0 ? `${id}-option-${active}` : undefined}
+        data-empty={emptyLabel}
+        onkeydown={searchable ? undefined : keyboard}
+      >
+        {#each visible as option, index (option.value)}
+          <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_noninteractive_element_interactions -->
+          <div
+            id={`${id}-option-${index}`}
+            data-index={index}
+            data-value={option.value}
+            role="option"
+            tabindex="-1"
+            aria-selected={selected.includes(option.value)}
+            aria-disabled={option.disabled || undefined}
+            class:active={active === index}
+            onpointermove={(event) => {
+              if ((event.movementX || event.movementY) && !option.disabled) active = index;
+            }}
+            onpointerdown={(event) => event.preventDefault()}
+            onclick={() => choose(index)}
+          >
+            {option.label}
+          </div>
+        {/each}
+      </div>
+    </div>{/if}
+  <select
+    bind:this={native}
+    class="bc-form-control"
+    tabindex="-1"
+    aria-hidden="true"
+    {name}
+    {disabled}
+    {required}
+    {multiple}
+    value={current}
+    onchange={(event) =>
+      set(
+        multiple
+          ? [...event.currentTarget.selectedOptions].map((option) => option.value)
+          : event.currentTarget.value,
+      )}
+    oninvalid={(event) => {
+      event.preventDefault();
+      anchor.focus();
+      anchor.setAttribute('aria-invalid', 'true');
+    }}
+  >
+    {#if !multiple}<option value="">{placeholder}</option
+      >{/if}{#each options as option (option.value)}<option
+        value={option.value}
+        disabled={option.disabled}>{option.label}</option
+      >{/each}
+  </select>
+</div>

package/dist/Select.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type Option } from './core.js';
+type Selection = string | string[];
+type Props = {
+    options: readonly Option[];
+    value?: Selection;
+    defaultValue?: Selection;
+    onValueChange?: (value: Selection) => void;
+    multiple?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    label: string;
+    placeholder?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+};
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/SelectRoot.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { attachWidget, cx } from './core.js';
+  let {
+    children,
+    class: className,
+    ...rest
+  }: SvelteHTMLElements['div'] & { children?: Snippet } = $props();
+  let element: HTMLElement;
+  $effect(() => attachWidget(element));
+</script>
+
+<div
+  {...rest}
+  bind:this={element}
+  class={cx('select', typeof className === 'string' ? className : undefined)}
+>
+  {@render children?.()}
+</div>

package/dist/SelectRoot.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = SvelteHTMLElements['div'] & {
+    children?: Snippet;
+};
+declare const SelectRoot: import("svelte").Component<$$ComponentProps, {}, "">;
+type SelectRoot = ReturnType<typeof SelectRoot>;
+export default SelectRoot;

package/dist/Separator.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { cx, type Variant, type Size } from './core.js';
+  type Props = Omit<SvelteHTMLElements['hr'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+  };
+  let {
+    children,
+    variant,
+    size,
+    as = 'hr',
+    element = $bindable(null),
+    class: className,
+    ...rest
+  }: Props = $props();
+</script>
+
+<svelte:element
+  this={as}
+  {...{}}
+  bind:this={element}
+  class={cx('', typeof className === 'string' ? className : undefined)}
+  data-variant={variant}
+  data-size={size}
+  {...rest}
+/>

package/dist/Separator.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import { type Variant, type Size } from './core.js';
+type Props = Omit<SvelteHTMLElements['hr'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+};
+declare const Separator: import("svelte").Component<Props, {}, "element">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/Sidebar.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  let {
+    collapsed = $bindable(undefined),
+    defaultCollapsed = false,
+    onCollapsedChange,
+    children,
+    label = 'Navigation',
+  }: {
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    children?: Snippet;
+    label?: string;
+  } = $props();
+  let internal = $state((() => defaultCollapsed)()),
+    current = $derived(collapsed === undefined ? internal : collapsed);
+  function set(next: boolean) {
+    if (collapsed === undefined) internal = next;
+    else if (!onCollapsedChange) collapsed = next;
+    onCollapsedChange?.(next);
+  }
+</script>
+
+<aside class="bc-sidebar" data-collapsed={current}>
+  <button
+    type="button"
+    class="btn"
+    data-variant="ghost"
+    aria-label={current ? 'Expand sidebar' : 'Collapse sidebar'}
+    aria-expanded={!current}
+    onclick={() => set(!current)}>☰</button
+  >
+  <nav aria-label={label}>{@render children?.()}</nav>
+</aside>

package/dist/Sidebar.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    children?: Snippet;
+    label?: string;
+};
+declare const Sidebar: import("svelte").Component<$$ComponentProps, {}, "collapsed">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/SidebarContent.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { cx, type Variant, type Size } from './core.js';
+  type Props = Omit<SvelteHTMLElements['section'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+  };
+  let {
+    children,
+    variant,
+    size,
+    as = 'section',
+    element = $bindable(null),
+    class: className,
+    ...rest
+  }: Props = $props();
+</script>
+
+<svelte:element
+  this={as}
+  {...{}}
+  bind:this={element}
+  class={cx('', typeof className === 'string' ? className : undefined)}
+  data-variant={variant}
+  data-size={size}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

package/dist/SidebarContent.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import { type Variant, type Size } from './core.js';
+type Props = Omit<SvelteHTMLElements['section'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+};
+declare const SidebarContent: import("svelte").Component<Props, {}, "element">;
+type SidebarContent = ReturnType<typeof SidebarContent>;
+export default SidebarContent;

package/dist/SidebarFooter.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { cx, type Variant, type Size } from './core.js';
+  type Props = Omit<SvelteHTMLElements['footer'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+  };
+  let {
+    children,
+    variant,
+    size,
+    as = 'footer',
+    element = $bindable(null),
+    class: className,
+    ...rest
+  }: Props = $props();
+</script>
+
+<svelte:element
+  this={as}
+  {...{}}
+  bind:this={element}
+  class={cx('', typeof className === 'string' ? className : undefined)}
+  data-variant={variant}
+  data-size={size}
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>

package/dist/SidebarFooter.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import { type Variant, type Size } from './core.js';
+type Props = Omit<SvelteHTMLElements['footer'], 'children' | 'size'> & {
+    children?: Snippet;
+    variant?: Variant;
+    size?: Size;
+    as?: keyof HTMLElementTagNameMap;
+    element?: HTMLElement | null;
+};
+declare const SidebarFooter: import("svelte").Component<Props, {}, "element">;
+type SidebarFooter = ReturnType<typeof SidebarFooter>;
+export default SidebarFooter;