slexkit 0.2.0

package/src/components/svelte/input/Select.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { bindPropStore } from "../bindProps";
+  import { emit, label, list, text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props, ctx }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  let value = $state<unknown>("");
+  let open = $state(false);
+  let activeIndex = $state(-1);
+  let triggerEl = $state<HTMLButtonElement | null>(null);
+  const ariaLabel = $derived(text(p["aria-label"] ?? p.ariaLabel));
+  const baseId = $derived(`slex-select-${ctx.id}`);
+  const labelId = $derived(`${baseId}-label`);
+  const valueId = $derived(`${baseId}-value`);
+  const listboxId = $derived(`${baseId}-listbox`);
+  $effect(() => bindPropStore(props, (next) => {
+    p = next;
+    value = next.value ?? "";
+    activeIndex = selectedIndex();
+  }));
+
+  const options = $derived(list(p.options).map((item) => ({
+    label: text(item.label ?? item.value),
+    value: text(item.value ?? item.label),
+    disabled: !!item.disabled,
+    icon: item.icon,
+  })));
+
+  const placeholder = $derived(label(ctx, "select.placeholder", p.placeholder, "Select..."));
+  const selected = $derived(options.find((item) => item.value === text(value)));
+  const displayLabel = $derived(selected?.label || placeholder);
+  const activeOptionId = $derived(open && activeIndex >= 0 ? `${baseId}-option-${activeIndex}` : undefined);
+
+  onMount(() => {
+    function closeFromOutside(event: MouseEvent): void {
+      const target = event.target as Node | null;
+      if (!target || !triggerEl?.closest(".slex-select")?.contains(target)) close(false);
+    }
+
+    document.addEventListener("mousedown", closeFromOutside);
+    return () => document.removeEventListener("mousedown", closeFromOutside);
+  });
+
+  function choose(next: unknown): void {
+    if (p.disabled) return;
+    value = next;
+    activeIndex = selectedIndex();
+    close();
+    emit(ctx, "change", next);
+    emit(ctx, "select", next);
+  }
+
+  function selectedIndex(): number {
+    return options.findIndex((item) => item.value === text(value));
+  }
+
+  function firstEnabledIndex(): number {
+    return options.findIndex((item) => !item.disabled);
+  }
+
+  function lastEnabledIndex(): number {
+    for (let i = options.length - 1; i >= 0; i -= 1) {
+      if (!options[i].disabled) return i;
+    }
+    return -1;
+  }
+
+  function moveActive(delta: 1 | -1): void {
+    if (!options.length) {
+      activeIndex = -1;
+      return;
+    }
+    const start = activeIndex >= 0 ? activeIndex : selectedIndex();
+    let next = start;
+    for (let i = 0; i < options.length; i += 1) {
+      next = (next + delta + options.length) % options.length;
+      if (!options[next].disabled) {
+        activeIndex = next;
+        return;
+      }
+    }
+    activeIndex = -1;
+  }
+
+  function openMenu(direction: 1 | -1 = 1): void {
+    if (p.disabled) return;
+    open = true;
+    const current = selectedIndex();
+    activeIndex = current >= 0 && !options[current]?.disabled
+      ? current
+      : direction > 0 ? firstEnabledIndex() : lastEnabledIndex();
+  }
+
+  function close(focusTrigger = true): void {
+    open = false;
+    activeIndex = selectedIndex();
+    if (focusTrigger) requestAnimationFrame(() => triggerEl?.focus());
+  }
+
+  function toggle(): void {
+    if (open) close(false);
+    else openMenu();
+  }
+
+  function onKeydown(event: KeyboardEvent): void {
+    if (p.disabled) return;
+
+    if (!open && (event.key === "Enter" || event.key === " " || event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      event.preventDefault();
+      openMenu(event.key === "ArrowUp" ? -1 : 1);
+      return;
+    }
+
+    if (!open) return;
+
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveActive(1);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveActive(-1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      activeIndex = firstEnabledIndex();
+    } else if (event.key === "End") {
+      event.preventDefault();
+      activeIndex = lastEnabledIndex();
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const item = options[activeIndex];
+      if (item && !item.disabled) choose(item.value);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      close();
+    } else if (event.key === "Tab") {
+      close(false);
+    }
+  }
+</script>
+
+<div class="slex-select" data-variant={text(p.variant, "default")}>
+  {#if p.label || p.icon}
+    <label class="slex-select-label" id={labelId} for={baseId}>
+      {#if p.icon}<InlineIcon name={p.icon} className="slex-select-label-icon" />{/if}
+      {#if p.label}<span>{text(p.label)}</span>{/if}
+    </label>
+  {/if}
+  <button
+    bind:this={triggerEl}
+    id={baseId}
+    type="button"
+    class="slex-select-trigger"
+    disabled={!!p.disabled}
+    aria-haspopup="listbox"
+    aria-expanded={open}
+    aria-controls={listboxId}
+    aria-activedescendant={activeOptionId}
+    aria-labelledby={p.label ? `${labelId} ${valueId}` : undefined}
+    aria-label={!p.label && ariaLabel ? ariaLabel : undefined}
+    onclick={toggle}
+    onkeydown={onKeydown}
+  >
+    <span id={valueId} class="slex-select-value" data-placeholder={selected ? undefined : ""}>
+      {#if selected?.icon}<InlineIcon name={selected.icon} selected className="slex-select-value-icon" />{/if}
+      <span>{displayLabel}</span>
+    </span>
+    <span class="slex-select-icon" aria-hidden="true"></span>
+  </button>
+  {#if open}
+    <ul
+      id={listboxId}
+      class="slex-select-menu"
+      role="listbox"
+      aria-labelledby={p.label ? labelId : undefined}
+      aria-label={!p.label && ariaLabel ? ariaLabel : undefined}
+    >
+      {#each options as item, index}
+        {@const isSelected = item.value === text(value)}
+        {@const isActive = index === activeIndex}
+        <li
+          id={`${baseId}-option-${index}`}
+          class="slex-select-option"
+          class:slex-select-option--active={isActive}
+          class:slex-select-option--selected={isSelected}
+          role="option"
+          aria-selected={isSelected}
+          aria-disabled={item.disabled || undefined}
+          data-disabled={item.disabled ? "" : undefined}
+          onmouseenter={() => { if (!item.disabled) activeIndex = index; }}
+          onmousedown={(event) => event.preventDefault()}
+          onclick={() => { if (!item.disabled) choose(item.value); }}
+        >
+          <span class="slex-select-option-label">
+            {#if item.icon}<InlineIcon name={item.icon} selected={isSelected} className="slex-select-option-icon" />{/if}
+            <span>{item.label}</span>
+          </span>
+          {#if isSelected}<span class="slex-select-check" aria-hidden="true"></span>{/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+  <select
+    class="slex-select-native"
+    bind:value
+    disabled={!!p.disabled}
+    required={!!p.required}
+    tabindex="-1"
+    aria-hidden="true"
+    aria-label={ariaLabel || undefined}
+    onchange={(event) => choose((event.target as HTMLSelectElement).value)}
+  >
+    <option value="" disabled={!!p.required}>{label(ctx, "select.placeholder", p.placeholder, "Select...")}</option>
+    {#each options as item}
+      <option value={item.value} disabled={item.disabled}>{item.label}</option>
+    {/each}
+  </select>
+</div>

package/src/components/svelte/input/Slider.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { emit, text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props, ctx, componentName }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  let value = $state<unknown>(0);
+  let lastHapticTick = $state<number | null>(null);
+  $effect(() => bindPropStore(props, (next) => {
+    p = next;
+    value = next.value ?? 0;
+  }));
+
+  function choose(next: number): void {
+    value = next;
+    vibrateStep(next);
+    emit(ctx, "change", next);
+  }
+
+  function numberProp(input: unknown, fallback: number): number {
+    const next = Number(input ?? fallback);
+    return Number.isFinite(next) ? next : fallback;
+  }
+
+  function sliderProgress(current: unknown, min: unknown, max: unknown): string {
+    const low = numberProp(min, 0);
+    const high = numberProp(max, 100);
+    const next = numberProp(current, low);
+    if (high <= low) return "0%";
+
+    const ratio = Math.min(1, Math.max(0, (next - low) / (high - low)));
+    return `${Math.round(ratio * 10000) / 100}%`;
+  }
+
+  function stepSize(): number {
+    const step = numberProp(p.step, 1);
+    return step > 0 ? step : 1;
+  }
+
+  function tickCount(): number {
+    const low = numberProp(p.min, 0);
+    const high = numberProp(p.max, 100);
+    if (high <= low) return 0;
+    return Math.round((high - low) / stepSize());
+  }
+
+  function tickIndex(current: unknown): number {
+    const low = numberProp(p.min, 0);
+    return Math.round((numberProp(current, low) - low) / stepSize());
+  }
+
+  function vibrate(duration = 8): void {
+    if (p.haptic === false || p.haptics === false) return;
+    const api = globalThis.navigator as (Navigator & { vibrate?: (pattern: number | number[]) => boolean }) | undefined;
+    api?.vibrate?.(duration);
+  }
+
+  function grabSlider(): void {
+    lastHapticTick = tickIndex(value);
+    vibrate(8);
+  }
+
+  function vibrateStep(next: number): void {
+    if (tickCount() > 20) return;
+    const tick = tickIndex(next);
+    if (tick === lastHapticTick) return;
+
+    lastHapticTick = tick;
+    vibrate(5);
+  }
+</script>
+
+<div class="slex-slider-field" data-orientation={text(p.orientation, "horizontal")}>
+  <div class="slex-slider-label">
+    <span class="slex-slider-label-text">
+      {#if p.icon}<InlineIcon name={p.icon} className="slex-slider-icon" />{/if}
+      <span>{text(p.label ?? componentName)}</span>
+    </span>
+    <span class="slex-slider-value">{text(value ?? 0)}{#if p.unit} {text(p.unit)}{/if}</span>
+  </div>
+  <input
+    type="range"
+    class="slex-slider"
+    min={Number(p.min ?? 0)}
+    max={Number(p.max ?? 100)}
+    step={Number(p.step ?? 1)}
+    value={Number(value ?? 0)}
+    disabled={!!p.disabled}
+    aria-label={text(p["aria-label"] ?? p.ariaLabel ?? p.label ?? componentName)}
+    style={`--slex-slider-progress: ${sliderProgress(value, p.min, p.max)}`}
+    onpointerdown={grabSlider}
+    oninput={(event) => choose(Number((event.target as HTMLInputElement).value))}
+  />
+</div>

package/src/components/svelte/input/Submit.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { label } from "../helpers";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props, ctx }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  $effect(() => bindPropStore(props, (next) => (p = next)));
+
+  function submitTool(): void {
+    if (p.disabled) return;
+    const runtime = ctx.g.__slexkitTool as { submit?: (value: unknown) => void } | undefined;
+    if (!runtime?.submit) return;
+    const result: Record<string, unknown> = {};
+    for (const key of Array.isArray(p.returnKeys) ? p.returnKeys : []) {
+      result[String(key)] = String(key).split(".").reduce((current: unknown, part: string) => (
+        current && typeof current === "object" ? (current as Record<string, unknown>)[part] : undefined
+      ), ctx.g);
+    }
+    runtime.submit(result);
+  }
+
+  function ignoreTool(): void {
+    const runtime = ctx.g.__slexkitTool as { ignore?: () => void } | undefined;
+    runtime?.ignore?.();
+  }
+</script>
+
+<div class="slex-submit-bar">
+  <button type="button" class="slex-button slex-button--ghost" onclick={ignoreTool}>{label(ctx, "submit.ignore", p.ignoreLabel, "Ignore")}</button>
+  <button type="button" class="slex-button slex-button--primary" disabled={!!p.disabled} onclick={submitTool}>{label(ctx, "submit.submit", p.submitLabel, "Submit")}</button>
+</div>

package/src/components/svelte/input/Switch.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { emit, text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props, ctx }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  let enabled = $state(false);
+  let lastHapticAt = 0;
+  $effect(() => bindPropStore(props, (next) => {
+    p = next;
+    enabled = !!next.enabled;
+  }));
+
+  function toggle(event: Event): void {
+    if (p.disabled) return;
+    enabled = (event.target as HTMLInputElement).checked;
+    emit(ctx, "change", enabled);
+  }
+
+  function vibrate(duration = 8): void {
+    if (p.haptic === false || p.haptics === false || p.disabled) return;
+    const api = globalThis.navigator as (Navigator & { vibrate?: (pattern: number | number[]) => boolean }) | undefined;
+    api?.vibrate?.(duration);
+  }
+
+  function haptic(duration = 8): void {
+    const now = Date.now();
+    if (now - lastHapticAt < 80) return;
+    lastHapticAt = now;
+    vibrate(duration);
+  }
+</script>
+
+<span class="slex-switch-event-layer" onpointerdown={() => haptic(8)} onclick={() => haptic(8)}>
+  <label class="slex-switch" data-state={enabled ? "on" : "off"}>
+    <input
+      type="checkbox"
+      role="switch"
+      class="slex-switch-input"
+      bind:checked={enabled}
+      disabled={!!p.disabled}
+      aria-label={text(p["aria-label"] ?? p.ariaLabel ?? p.label) || undefined}
+      onchange={toggle}
+    />
+    <span class="slex-switch-control" aria-hidden="true"></span>
+    <span class="slex-switch-label">
+      {#if p.icon}<InlineIcon name={p.icon} className="slex-switch-icon" />{/if}
+      <span>{text(p.label)}</span>
+    </span>
+  </label>
+</span>

package/src/components/svelte/input/Tabs.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+  import FlowbiteTabs from "../../../../node_modules/flowbite-svelte/dist/tabs/Tabs.svelte";
+  import FlowbiteTabItem from "../../../../node_modules/flowbite-svelte/dist/tabs/TabItem.svelte";
+  import { bindPropStore } from "../bindProps";
+  import { emit, list, text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props, ctx }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  let value = $state<unknown>(undefined);
+  let iconVersion = $state(0);
+  const orientation = $derived(text(p.orientation, "horizontal"));
+  const items = $derived(list(p.tabs));
+  const triggerClass = "slex-tabs-trigger";
+  $effect(() => bindPropStore(props, (next) => {
+    p = next;
+    value = next.value;
+  }));
+
+  function choose(next: unknown): void {
+    value = next;
+    emit(ctx, "change", next);
+  }
+
+  function requestIndicatorUpdate(): void {
+    iconVersion += 1;
+  }
+
+  function isLayoutContent(value: unknown): value is Record<string, unknown> {
+    return !!value && typeof value === "object" && !Array.isArray(value);
+  }
+
+  function renderTabPanel(node: HTMLElement, item: Record<string, unknown>) {
+    function render(next: Record<string, unknown>) {
+      node.replaceChildren();
+      if (isLayoutContent(next.content)) {
+        ctx.renderTree(next.content, node, ctx.forCtx);
+        return;
+      }
+      if (next.content !== undefined && next.content !== null) {
+        node.textContent = text(next.content);
+      }
+    }
+
+    render(item);
+    return {
+      update(next: Record<string, unknown>) {
+        render(next);
+      },
+      destroy() {
+        node.replaceChildren();
+      },
+    };
+  }
+
+  function annotateTabs(node: HTMLElement) {
+    let raf: number | undefined;
+    let resizeObserver: ResizeObserver | undefined;
+    let indicatorReady = false;
+
+    function scheduleIndicatorUpdate(list: HTMLElement, selectedTrigger: HTMLElement | undefined) {
+      if (raf !== undefined) cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        raf = undefined;
+        if (!selectedTrigger) {
+          list.style.setProperty("--slex-tabs-indicator-opacity", "0");
+          return;
+        }
+
+        const listRect = list.getBoundingClientRect();
+        const triggerRect = selectedTrigger.getBoundingClientRect();
+        const iconRect = selectedTrigger
+          .querySelector<HTMLElement>(".slex-tabs-trigger-icon")
+          ?.getBoundingClientRect();
+        const vertical = orientation === "vertical";
+        const indicatorStyle = getComputedStyle(list);
+        const inlineInset = Number.parseFloat(indicatorStyle.getPropertyValue("--slex-tabs-indicator-inline-inset")) || 0;
+        const blockInset = Number.parseFloat(indicatorStyle.getPropertyValue("--slex-tabs-indicator-block-inset")) || 0;
+        const iconOnly = !!iconRect && selectedTrigger.classList.contains("slex-tabs-trigger--icon");
+        const targetRect = iconOnly && iconRect.width > 0 ? iconRect : triggerRect;
+        const width = vertical
+          ? 2
+          : iconOnly
+            ? Math.max(14, Math.min(22, targetRect.width + 2))
+            : Math.max(8, triggerRect.width - inlineInset * 2);
+        const height = vertical ? Math.max(8, triggerRect.height - blockInset * 2) : 2;
+        const targetCenterX = targetRect.left - listRect.left + targetRect.width / 2;
+        const targetCenterY = targetRect.top - listRect.top + targetRect.height / 2;
+        const x = vertical ? listRect.width - width : targetCenterX - width / 2;
+        const y = vertical ? targetCenterY - height / 2 : listRect.height - height;
+        list.style.setProperty("--slex-tabs-indicator-width", `${Math.max(0, width)}px`);
+        list.style.setProperty("--slex-tabs-indicator-height", `${Math.max(0, height)}px`);
+        list.style.setProperty("--slex-tabs-indicator-x", `${Math.max(0, x)}px`);
+        list.style.setProperty("--slex-tabs-indicator-y", `${Math.max(0, y)}px`);
+        list.style.setProperty("--slex-tabs-indicator-opacity", "1");
+        if (!indicatorReady) {
+          indicatorReady = true;
+          requestAnimationFrame(() => {
+            list.dataset.indicatorReady = "true";
+          });
+        }
+      });
+    }
+
+    function applyNow() {
+      const triggers = node.querySelectorAll<HTMLElement>(".slex-tabs-trigger");
+      const list = node.querySelector<HTMLElement>(".slex-tabs-list");
+      let selectedTrigger: HTMLElement | undefined;
+      items.forEach((item, index) => {
+        const trigger = triggers[index];
+        if (!trigger) return;
+        const itemValue = item.value ?? item.label;
+        const selected = text(itemValue) === text(value);
+        trigger.dataset.value = text(itemValue);
+        trigger.toggleAttribute("data-selected", selected);
+        trigger.classList.toggle("slex-tabs-trigger--selected", selected);
+        trigger.setAttribute("aria-selected", String(selected));
+        if (selected) selectedTrigger = trigger;
+      });
+      if (list) scheduleIndicatorUpdate(list, selectedTrigger);
+    }
+
+    function apply() {
+      applyNow();
+      queueMicrotask(applyNow);
+    }
+
+    apply();
+    const list = node.querySelector<HTMLElement>(".slex-tabs-list");
+    if (list && "ResizeObserver" in window) {
+      resizeObserver = new ResizeObserver(apply);
+      resizeObserver.observe(list);
+    }
+    return {
+      update() {
+        apply();
+      },
+      destroy() {
+        if (raf !== undefined) cancelAnimationFrame(raf);
+        resizeObserver?.disconnect();
+      },
+    };
+  }
+</script>
+
+<div class="slex-tabs" data-orientation={orientation} use:annotateTabs={{ value, items, iconVersion }}>
+  <FlowbiteTabs
+    class="slex-tabs-list"
+    tabStyle="none"
+    divider={false}
+    selected={text(value)}
+    aria-orientation={orientation}
+    classes={{ content: "slex-tabs-content" }}
+  >
+    {#each items as item}
+      {@const itemValue = item.value ?? item.label}
+      {@const selected = text(itemValue) === text(value)}
+      {@const hasIcon = !!text(item.icon)}
+      {@const label = text(item.label ?? itemValue)}
+      {@const itemIconOnly = !!item.iconOnly || (hasIcon && !item.label)}
+      {@const iconClass = itemIconOnly ? "slex-tabs-trigger--icon" : hasIcon ? "slex-tabs-trigger--with-icon" : ""}
+      <FlowbiteTabItem
+        key={text(itemValue)}
+        open={selected}
+        disabled={!!item.disabled}
+        data-value={text(itemValue)}
+        activeClass={`${triggerClass} slex-tabs-trigger--selected ${iconClass}`}
+        inactiveClass={`${triggerClass} ${iconClass}`}
+        classes={{ button: selected ? "slex-tabs-trigger--selected" : "" }}
+        onclick={() => choose(itemValue)}
+      >
+        {#snippet titleSlot()}
+          {#if hasIcon}
+            <InlineIcon name={item.icon} selected={selected} className="slex-tabs-trigger-icon" onIconLoad={requestIndicatorUpdate} />
+          {/if}
+          {#if itemIconOnly}
+            <span class="slex-sr-only">{label}</span>
+          {:else}
+            {label}
+          {/if}
+        {/snippet}
+        {#if item.content}<div use:renderTabPanel={item}></div>{/if}
+      </FlowbiteTabItem>
+    {/each}
+    <span class="slex-tabs-selected-indicator" aria-hidden="true"></span>
+  </FlowbiteTabs>
+</div>

package/src/components/svelte/layout/Card.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { renderChildren, text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props, ctx }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  $effect(() => bindPropStore(props, (next) => (p = next)));
+</script>
+
+<div class="slex-card" data-tone={p.tone ? text(p.tone) : undefined}>
+  {#if p.title || p.icon}
+    <div class="slex-card-title">{#if p.icon}<InlineIcon name={p.icon} className="slex-card-icon" />{/if}{#if p.title}<span>{text(p.title)}</span>{/if}</div>
+  {/if}
+  <div class="slex-card-body" use:renderChildren={ctx}></div>
+</div>

package/src/components/svelte/layout/Column.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { renderChildren, text } from "../helpers";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props, ctx }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  $effect(() => bindPropStore(props, (next) => (p = next)));
+</script>
+
+<div
+  class={`slex-column${p.class ? ` ${text(p.class)}` : ""}`}
+  id={p.id ? text(p.id) : undefined}
+  use:renderChildren={ctx}
+></div>

package/src/components/svelte/layout/Grid.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { renderChildren, text } from "../helpers";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props, ctx }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  $effect(() => bindPropStore(props, (next) => (p = next)));
+
+  function colValue(value: unknown, fallback = 1): string {
+    const n = Number(value ?? fallback);
+    return Number.isFinite(n) ? String(n) : String(fallback);
+  }
+</script>
+
+<div
+  class={`slex-grid${p.class ? ` ${text(p.class)}` : ""}`}
+  id={p.id ? text(p.id) : undefined}
+  data-cols={colValue(p.columns)}
+  data-cols-sm={p.smColumns === undefined ? undefined : colValue(p.smColumns, Number(p.columns ?? 1))}
+  data-cols-md={colValue(p.mdColumns, Number(p.columns ?? 1))}
+  data-cols-lg={p.lgColumns === undefined ? undefined : colValue(p.lgColumns, Number(p.mdColumns ?? p.columns ?? 1))}
+  data-cols-xl={p.xlColumns === undefined ? undefined : colValue(p.xlColumns, Number(p.lgColumns ?? p.mdColumns ?? p.columns ?? 1))}
+  style:gap={text(p.gap)}
+  use:renderChildren={ctx}
+></div>