@dxlbnl/ui 0.1.0

package/dist/components/layout/Grid.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Grid from "./Grid.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Grid: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Grid = InstanceType<typeof Grid>;
+export default Grid;

package/dist/components/layout/Grid.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type { Snippet } from 'svelte'
+
+  type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  type GridCols = 1 | 2 | 3 | 4 | 'auto'
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** HTML element to render as. @default 'div' */
+    as?: string
+    /** Number of equal columns, or `'auto'` for responsive auto-fill. @default 3 */
+    cols?: GridCols
+    /** Space between grid cells. @default 'sm' */
+    gap?: GapSize
+    /** Minimum column width used when `cols` is `'auto'`. @default '240px' */
+    minColWidth?: string
+    children?: Snippet
+    [key: string]: unknown
+  }
+
+  let { as = 'div', cols = 3, gap = 'sm', minColWidth = '240px', children, ...rest }: Props = $props()
+
+  const gapMap: Record<GapSize, string> = {
+    none: '0',
+    xs:   'var(--u)',
+    sm:   'var(--u2)',
+    md:   'var(--u2)',
+    lg:   'var(--u4)',
+    xl:   'var(--u5)',
+  }
+
+  const colsTemplate = $derived(
+    cols === 'auto'
+      ? `repeat(auto-fill, minmax(${minColWidth}, 1fr))`
+      : cols === 1
+        ? '1fr'
+        : `repeat(${cols}, 1fr)`
+  )
+</script>
+
+<svelte:element
+  this={as}
+  class="grid-layout"
+  style="grid-template-columns: {colsTemplate}; gap: {gapMap[gap]};"
+  {...rest}
+>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .grid-layout {
+    display: grid;
+  }
+</style>

package/dist/components/layout/Grid.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type GridCols = 1 | 2 | 3 | 4 | 'auto';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** HTML element to render as. @default 'div' */
+    as?: string;
+    /** Number of equal columns, or `'auto'` for responsive auto-fill. @default 3 */
+    cols?: GridCols;
+    /** Space between grid cells. @default 'sm' */
+    gap?: GapSize;
+    /** Minimum column width used when `cols` is `'auto'`. @default '240px' */
+    minColWidth?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+}
+declare const Grid: import("svelte").Component<Props, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;

package/dist/components/layout/Inline.stories.svelte

@@ -0,0 +1,136 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Inline from "./Inline.svelte";
+  import Button from "../primitives/Button.svelte";
+  import TagPill from "../primitives/TagPill.svelte";
+
+  const { Story } = defineMeta({
+    title: "Layout/Inline",
+    component: Inline,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Tag Row" args={{ gap: "sm", "aria-label": "test-label" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(root).toBeVisible();
+    const style = getComputedStyle(root);
+    await expect(style.display).toBe("flex");
+    await expect(style.flexWrap).toBe("wrap");
+    await expect(style.alignItems).toBe("center");
+    // gap="sm" is non-zero
+    const gap = style.gap || style.columnGap;
+    await expect(gap).not.toBe("0px");
+    // aria-label forwarded via ...rest
+    await expect(root.getAttribute("aria-label")).toBe("test-label");
+  }}>
+  <TagPill>Utility</TagPill>
+  <TagPill variant="amber">Featured</TagPill>
+  <TagPill variant="cyan">New</TagPill>
+  <TagPill>Power Supply</TagPill>
+  <TagPill variant="amber">Latest</TagPill>
+</Story>
+
+<Story name="None Gap" args={{ gap: "none" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    const style = getComputedStyle(root);
+    const gap = style.gap || style.columnGap;
+    await expect(gap === "0px" || gap === "0").toBe(true);
+  }}>
+  <TagPill>Alpha</TagPill>
+  <TagPill variant="amber">Beta</TagPill>
+</Story>
+
+<Story name="Button Row" args={{ gap: "md" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    const buttons = root.querySelectorAll("button");
+    await expect(buttons.length).toBe(2);
+  }}>
+  <Button variant="ghost">View All →</Button>
+  <Button variant="primary">Order Now</Button>
+</Story>
+
+<Story name="Large Gap" args={{ gap: "lg" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    const style = getComputedStyle(root);
+    const gap = style.gap || style.columnGap;
+    await expect(gap.includes("32px")).toBe(true);
+  }}>
+  <TagPill>Alpha</TagPill>
+  <TagPill variant="amber">Beta</TagPill>
+  <TagPill variant="cyan">Gamma</TagPill>
+</Story>
+
+<!-- B27 AC-3: default (no align prop) keeps align-items: center -->
+<Story name="Align Default"
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    // No align prop passed — default must be "center"
+    await expect(getComputedStyle(root).alignItems).toBe("center");
+    // data-align should be "center" (the resolved default)
+    await expect(root.dataset.align).toBe("center");
+  }}>
+  <TagPill>Alpha</TagPill>
+  <TagPill variant="amber">Beta</TagPill>
+</Story>
+
+<!-- B27 AC-7: align="baseline" produces align-items: baseline -->
+<!-- B27 AC-2: data-align attribute is forwarded to the root element -->
+<Story name="Align Baseline" args={{ gap: "sm", align: "baseline" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(getComputedStyle(root).alignItems).toBe("baseline");
+    await expect(root.dataset.align).toBe("baseline");
+  }}>
+  <span style="font-size: 24px;">Big</span>
+  <span style="font-size: 12px;">Small</span>
+</Story>
+
+<!-- B27 AC-4: align="start" produces align-items: flex-start -->
+<Story name="Align Start" args={{ align: "start" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(getComputedStyle(root).alignItems).toBe("flex-start");
+    await expect(root.dataset.align).toBe("start");
+  }}>
+  <TagPill>Alpha</TagPill>
+  <TagPill variant="amber">Beta</TagPill>
+</Story>
+
+<!-- B27 AC-5: align="center" explicit produces align-items: center -->
+<Story name="Align Center" args={{ align: "center" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(getComputedStyle(root).alignItems).toBe("center");
+    await expect(root.dataset.align).toBe("center");
+  }}>
+  <TagPill>Alpha</TagPill>
+  <TagPill variant="amber">Beta</TagPill>
+</Story>
+
+<!-- B27 AC-6: align="end" produces align-items: flex-end -->
+<Story name="Align End" args={{ align: "end" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(getComputedStyle(root).alignItems).toBe("flex-end");
+    await expect(root.dataset.align).toBe("end");
+  }}>
+  <TagPill>Alpha</TagPill>
+  <TagPill variant="amber">Beta</TagPill>
+</Story>
+
+<!-- B27 AC-8: align="stretch" produces align-items: stretch -->
+<Story name="Align Stretch" args={{ align: "stretch" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(getComputedStyle(root).alignItems).toBe("stretch");
+    await expect(root.dataset.align).toBe("stretch");
+  }}>
+  <TagPill>Alpha</TagPill>
+  <TagPill variant="amber">Beta</TagPill>
+</Story>

package/dist/components/layout/Inline.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Inline from "./Inline.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Inline: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Inline = InstanceType<typeof Inline>;
+export default Inline;

package/dist/components/layout/Inline.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { ClassValue } from 'svelte/elements'
+  import type { Snippet } from 'svelte'
+
+  type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  type AlignValue = 'start' | 'center' | 'end' | 'baseline' | 'stretch'
+
+  interface Props {
+    /** HTML element to render as. @default 'div' */
+    as?: string
+    /** Space between children. @default 'sm' */
+    gap?: GapSize
+    /** Cross-axis alignment. @default 'center' */
+    align?: AlignValue
+    children?: Snippet
+    class?: ClassValue | null
+    style?: string | null
+    [key: string]: unknown
+  }
+
+  let { as = 'div', gap = 'sm', align = 'center', children, class: klass = '', ...rest }: Props = $props()
+</script>
+
+<svelte:element this={as} class={['inline', klass]} data-gap={gap} data-align={align} {...rest}>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .inline {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .inline[data-gap="none"] { gap: 0; }
+  .inline[data-gap="xs"]   { gap: var(--u); }
+  .inline[data-gap="sm"]   { gap: var(--u2); }
+  .inline[data-gap="md"]   { gap: var(--u3); }
+  .inline[data-gap="lg"]   { gap: var(--u4); }
+  .inline[data-gap="xl"]   { gap: var(--u5); }
+
+  .inline[data-align="start"]    { align-items: flex-start; }
+  .inline[data-align="center"]   { align-items: center; }
+  .inline[data-align="end"]      { align-items: flex-end; }
+  .inline[data-align="baseline"] { align-items: baseline; }
+  .inline[data-align="stretch"]  { align-items: stretch; }
+</style>

package/dist/components/layout/Inline.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { ClassValue } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AlignValue = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+interface Props {
+    /** HTML element to render as. @default 'div' */
+    as?: string;
+    /** Space between children. @default 'sm' */
+    gap?: GapSize;
+    /** Cross-axis alignment. @default 'center' */
+    align?: AlignValue;
+    children?: Snippet;
+    class?: ClassValue | null;
+    style?: string | null;
+    [key: string]: unknown;
+}
+declare const Inline: import("svelte").Component<Props, {}, "">;
+type Inline = ReturnType<typeof Inline>;
+export default Inline;