@sentropic/design-system-svelte 0.10.4 → 0.11.0

package/dist/ChatMessage.svelte

@@ -12,7 +12,13 @@
     timestamp?: string;
     class?: string;
     avatar?: Snippet;
-    children: Snippet;
+    /**
+     * Message body. Either provide children (canonical) or the `content`
+     * string prop (cross-framework parity with React/Vue). `content` is
+     * rendered only when no children are supplied.
+     */
+    children?: Snippet;
+    content?: string;
     footer?: Snippet;
     actions?: Snippet;
   };
@@ -24,6 +30,7 @@
     class: className,
     avatar,
     children,
+    content,
     footer,
     actions,
     ...rest
@@ -66,7 +73,7 @@
   <div class="st-chatMessage__body">
     <div class="st-chatMessage__bubble">
       <div class="st-chatMessage__content">
-        {@render children()}
+        {#if children}{@render children()}{:else if content}{content}{/if}
       </div>
       {#if isStreaming()}
         <span class="st-chatMessage__pulse" aria-hidden="true"></span>

package/dist/ChatMessage.svelte.d.ts

@@ -9,7 +9,13 @@ type ChatMessageProps = Omit<HTMLAttributes<HTMLElement>, "class" | "role"> & {
     timestamp?: string;
     class?: string;
     avatar?: Snippet;
-    children: Snippet;
+    /**
+     * Message body. Either provide children (canonical) or the `content`
+     * string prop (cross-framework parity with React/Vue). `content` is
+     * rendered only when no children are supplied.
+     */
+    children?: Snippet;
+    content?: string;
     footer?: Snippet;
     actions?: Snippet;
 };

package/dist/ChatMessage.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessage.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ChatMessage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AACvE,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,QAAQ,CAAC;AAClF,KAAK,uBAAuB,GAAG,MAAM,GAAG,WAAW,GAAG,OAAO,CAAC;AAE9D,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IAC5E,IAAI,EAAE,eAAe,CAAC;IACtB,MAAM,CAAC,EAAE,iBAAiB,GAAG,uBAAuB,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA0EJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ChatMessage.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ChatMessage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AACvE,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,YAAY,GAAG,WAAW,GAAG,QAAQ,CAAC;AAClF,KAAK,uBAAuB,GAAG,MAAM,GAAG,WAAW,GAAG,OAAO,CAAC;AAE9D,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IAC5E,IAAI,EAAE,eAAe,CAAC;IACtB,MAAM,CAAC,EAAE,iBAAiB,GAAG,uBAAuB,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA2EJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/Col.svelte

@@ -0,0 +1,118 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export type ColSpan = number | "auto";
+
+  export type ColProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Number of 12-grid columns to span, or "auto" to size to content. */
+    span?: ColSpan;
+    /** Columns to offset (0..11) via margin-inline-start. */
+    offset?: number;
+    /** Responsive overrides applied at and above the breakpoint. */
+    sm?: ColSpan;
+    md?: ColSpan;
+    lg?: ColSpan;
+    as?: string;
+    class?: string;
+    children?: Snippet;
+  };
+
+  /** Width expression for a given span. Accounts for the shared row gutter so a
+      full 12 columns still fit on one line (gap-based layout). */
+  export function spanBasis(span: ColSpan | undefined): string | undefined {
+    if (span == null) return undefined;
+    if (span === "auto") return "auto";
+    const clamped = Math.max(1, Math.min(12, Math.round(span)));
+    const ratio = clamped / 12;
+    // Subtract this column's share of the inter-column gutters.
+    return `calc(${ratio * 100}% - var(--st-row-gutter, 0px) * ${(12 - clamped) / 12})`;
+  }
+
+  export function offsetMargin(offset: number | undefined): string | undefined {
+    if (!offset) return undefined;
+    const clamped = Math.max(0, Math.min(11, Math.round(offset)));
+    if (clamped === 0) return undefined;
+    const ratio = clamped / 12;
+    return `calc(${ratio * 100}% + var(--st-row-gutter, 0px) * ${ratio})`;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    span = "auto",
+    offset = 0,
+    sm,
+    md,
+    lg,
+    as = "div",
+    class: className,
+    children,
+    ...rest
+  }: ColProps = $props();
+
+  const isAuto = $derived(span === "auto");
+  const classes = $derived(
+    [
+      "st-col",
+      isAuto && "st-col--auto",
+      sm != null && "st-col--has-sm",
+      md != null && "st-col--has-md",
+      lg != null && "st-col--has-lg",
+      className
+    ]
+      .filter(Boolean)
+      .join(" ")
+  );
+</script>
+
+<svelte:element
+  this={as}
+  {...rest}
+  class={classes}
+  style:flex-basis={spanBasis(span)}
+  style:max-inline-size={isAuto ? undefined : spanBasis(span)}
+  style:flex-grow={isAuto ? "1" : "0"}
+  style:margin-inline-start={offsetMargin(offset)}
+  style:--st-col-sm={spanBasis(sm)}
+  style:--st-col-md={spanBasis(md)}
+  style:--st-col-lg={spanBasis(lg)}
+>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .st-col {
+    box-sizing: border-box;
+    flex-shrink: 1;
+    min-width: 0;
+  }
+
+  .st-col--auto {
+    flex-basis: auto;
+  }
+
+  @media (min-width: 640px) {
+    .st-col--has-sm {
+      flex-basis: var(--st-col-sm);
+      max-inline-size: var(--st-col-sm);
+      flex-grow: 0;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .st-col--has-md {
+      flex-basis: var(--st-col-md);
+      max-inline-size: var(--st-col-md);
+      flex-grow: 0;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .st-col--has-lg {
+      flex-basis: var(--st-col-lg);
+      max-inline-size: var(--st-col-lg);
+      flex-grow: 0;
+    }
+  }
+</style>

package/dist/Col.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export type ColSpan = number | "auto";
+export type ColProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** Number of 12-grid columns to span, or "auto" to size to content. */
+    span?: ColSpan;
+    /** Columns to offset (0..11) via margin-inline-start. */
+    offset?: number;
+    /** Responsive overrides applied at and above the breakpoint. */
+    sm?: ColSpan;
+    md?: ColSpan;
+    lg?: ColSpan;
+    as?: string;
+    class?: string;
+    children?: Snippet;
+};
+/** Width expression for a given span. Accounts for the shared row gutter so a
+    full 12 columns still fit on one line (gap-based layout). */
+export declare function spanBasis(span: ColSpan | undefined): string | undefined;
+export declare function offsetMargin(offset: number | undefined): string | undefined;
+declare const Col: import("svelte").Component<ColProps, {}, "">;
+type Col = ReturnType<typeof Col>;
+export default Col;
+//# sourceMappingURL=Col.svelte.d.ts.map

package/dist/Col.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Col.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Col.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAEtC,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IAClE,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;gEACgE;AAChE,wBAAgB,SAAS,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAOvE;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAM3E;AAwCH,QAAA,MAAM,GAAG,8CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

package/dist/Container.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
+
+  export type ContainerProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    size?: ContainerSize;
+    /** Apply horizontal padding using the spacing scale. */
+    padding?: boolean;
+    as?: string;
+    class?: string;
+    children?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  let {
+    size = "lg",
+    padding = true,
+    as = "div",
+    class: className,
+    children,
+    ...rest
+  }: ContainerProps = $props();
+
+  const classes = $derived(
+    [
+      "st-container",
+      `st-container--${size}`,
+      padding && "st-container--padded",
+      className
+    ]
+      .filter(Boolean)
+      .join(" ")
+  );
+</script>
+
+<svelte:element this={as} {...rest} class={classes}>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .st-container {
+    box-sizing: border-box;
+    inline-size: 100%;
+    margin-inline: auto;
+  }
+
+  .st-container--sm {
+    max-inline-size: var(--st-container-sm, 40rem);
+  }
+
+  .st-container--md {
+    max-inline-size: var(--st-container-md, 48rem);
+  }
+
+  .st-container--lg {
+    max-inline-size: var(--st-container-lg, 64rem);
+  }
+
+  .st-container--xl {
+    max-inline-size: var(--st-container-xl, 80rem);
+  }
+
+  .st-container--full {
+    max-inline-size: none;
+  }
+
+  .st-container--padded {
+    padding-inline: var(--st-spacing-4, 1rem);
+  }
+</style>

package/dist/Container.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
+export type ContainerProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    size?: ContainerSize;
+    /** Apply horizontal padding using the spacing scale. */
+    padding?: boolean;
+    as?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const Container: import("svelte").Component<ContainerProps, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;
+//# sourceMappingURL=Container.svelte.d.ts.map

package/dist/Container.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Container.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACxE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAkCJ,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/Divider.svelte

@@ -0,0 +1,129 @@
+<script lang="ts" module>
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export type DividerOrientation = "horizontal" | "vertical";
+  export type DividerVariant = "solid" | "dashed";
+
+  export type DividerProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    orientation?: DividerOrientation;
+    /** Spacing scale step (0..12) applied as margin around the divider. */
+    spacing?: number;
+    /** Optional label centered on a horizontal divider line. */
+    label?: string;
+    variant?: DividerVariant;
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { spacingToken } from "./Flex.svelte";
+
+  let {
+    orientation = "horizontal",
+    spacing,
+    label,
+    variant = "solid",
+    class: className,
+    ...rest
+  }: DividerProps = $props();
+
+  const isVertical = $derived(orientation === "vertical");
+  const hasLabel = $derived(!isVertical && label != null && label !== "");
+  const margin = $derived(spacingToken(spacing));
+
+  const classes = $derived(
+    [
+      "st-divider",
+      `st-divider--${orientation}`,
+      `st-divider--${variant}`,
+      hasLabel && "st-divider--labeled",
+      className
+    ]
+      .filter(Boolean)
+      .join(" ")
+  );
+</script>
+
+{#if hasLabel}
+  <div
+    {...rest}
+    class={classes}
+    role="separator"
+    aria-orientation="horizontal"
+    style:margin-block={margin}
+  >
+    <span class="st-divider__line" aria-hidden="true"></span>
+    <span class="st-divider__label">{label}</span>
+    <span class="st-divider__line" aria-hidden="true"></span>
+  </div>
+{:else}
+  <div
+    {...rest}
+    class={classes}
+    role="separator"
+    aria-orientation={orientation}
+    style:margin-block={isVertical ? undefined : margin}
+    style:margin-inline={isVertical ? margin : undefined}
+  ></div>
+{/if}
+
+<style>
+  .st-divider {
+    border: 0;
+    box-sizing: border-box;
+    color: var(--st-semantic-border-subtle, #e2e8f0);
+  }
+
+  .st-divider--horizontal:not(.st-divider--labeled) {
+    block-size: 0;
+    border-block-start-width: 1px;
+    border-block-start-style: solid;
+    border-block-start-color: currentColor;
+    inline-size: 100%;
+  }
+
+  .st-divider--vertical {
+    align-self: stretch;
+    border-inline-start-width: 1px;
+    border-inline-start-style: solid;
+    border-inline-start-color: currentColor;
+    display: inline-block;
+    inline-size: 0;
+    min-block-size: 1em;
+  }
+
+  .st-divider--dashed.st-divider--horizontal:not(.st-divider--labeled) {
+    border-block-start-style: dashed;
+  }
+
+  .st-divider--dashed.st-divider--vertical {
+    border-inline-start-style: dashed;
+  }
+
+  .st-divider--labeled {
+    align-items: center;
+    display: flex;
+    gap: var(--st-spacing-3, 0.75rem);
+    inline-size: 100%;
+  }
+
+  .st-divider__line {
+    block-size: 0;
+    border-block-start-width: 1px;
+    border-block-start-style: solid;
+    border-block-start-color: currentColor;
+    flex: 1 1 0;
+  }
+
+  .st-divider--dashed .st-divider__line {
+    border-block-start-style: dashed;
+  }
+
+  .st-divider__label {
+    color: var(--st-semantic-text-secondary, inherit);
+    flex: 0 0 auto;
+    font-size: var(--st-font-size-sm, 0.875rem);
+    line-height: 1;
+    white-space: nowrap;
+  }
+</style>

package/dist/Divider.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from "svelte/elements";
+export type DividerOrientation = "horizontal" | "vertical";
+export type DividerVariant = "solid" | "dashed";
+export type DividerProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    orientation?: DividerOrientation;
+    /** Spacing scale step (0..12) applied as margin around the divider. */
+    spacing?: number;
+    /** Optional label centered on a horizontal divider line. */
+    label?: string;
+    variant?: DividerVariant;
+    class?: string;
+};
+declare const Divider: import("svelte").Component<DividerProps, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;
+//# sourceMappingURL=Divider.svelte.d.ts.map

package/dist/Divider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Divider.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhD,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAkDJ,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/Flex.svelte

@@ -0,0 +1,110 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
+  export type FlexAlign = "start" | "center" | "end" | "stretch" | "baseline";
+  export type FlexJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+
+  export type FlexProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    direction?: FlexDirection;
+    /** Spacing scale step (0..12) mapped to `--st-spacing-*`. */
+    gap?: number;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    wrap?: boolean;
+    inline?: boolean;
+    as?: string;
+    class?: string;
+    children?: Snippet;
+  };
+
+  /** rem fallbacks for the Sent Tech spacing scale (steps 5/7/9/10/11 are
+      interpolated since no token exists, but the var() is still preferred). */
+  const SPACING_FALLBACK: Record<number, string> = {
+    0: "0",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    7: "1.75rem",
+    8: "2rem",
+    9: "2.25rem",
+    10: "2.5rem",
+    11: "2.75rem",
+    12: "3rem"
+  };
+
+  /** Resolve a spacing step to a `var(--st-spacing-N, fallback)` expression. */
+  export function spacingToken(step: number | undefined): string | undefined {
+    if (step == null) return undefined;
+    const clamped = Math.max(0, Math.min(12, Math.round(step)));
+    if (clamped === 0) return "0";
+    return `var(--st-spacing-${clamped}, ${SPACING_FALLBACK[clamped]})`;
+  }
+
+  const ALIGN: Record<FlexAlign, string> = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    stretch: "stretch",
+    baseline: "baseline"
+  };
+
+  const JUSTIFY: Record<FlexJustify, string> = {
+    start: "flex-start",
+    center: "center",
+    end: "flex-end",
+    between: "space-between",
+    around: "space-around",
+    evenly: "space-evenly"
+  };
+
+  export function alignValue(align: FlexAlign | undefined): string | undefined {
+    return align ? ALIGN[align] : undefined;
+  }
+
+  export function justifyValue(justify: FlexJustify | undefined): string | undefined {
+    return justify ? JUSTIFY[justify] : undefined;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    direction = "row",
+    gap,
+    align,
+    justify,
+    wrap = false,
+    inline = false,
+    as = "div",
+    class: className,
+    children,
+    ...rest
+  }: FlexProps = $props();
+
+  const classes = $derived(["st-flex", className].filter(Boolean).join(" "));
+</script>
+
+<svelte:element
+  this={as}
+  {...rest}
+  class={classes}
+  style:display={inline ? "inline-flex" : "flex"}
+  style:flex-direction={direction}
+  style:flex-wrap={wrap ? "wrap" : "nowrap"}
+  style:align-items={alignValue(align)}
+  style:justify-content={justifyValue(justify)}
+  style:gap={spacingToken(gap)}
+>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .st-flex {
+    box-sizing: border-box;
+    min-width: 0;
+  }
+</style>

package/dist/Flex.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
+export type FlexAlign = "start" | "center" | "end" | "stretch" | "baseline";
+export type FlexJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+export type FlexProps = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    direction?: FlexDirection;
+    /** Spacing scale step (0..12) mapped to `--st-spacing-*`. */
+    gap?: number;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    wrap?: boolean;
+    inline?: boolean;
+    as?: string;
+    class?: string;
+    children?: Snippet;
+};
+/** Resolve a spacing step to a `var(--st-spacing-N, fallback)` expression. */
+export declare function spacingToken(step: number | undefined): string | undefined;
+export declare function alignValue(align: FlexAlign | undefined): string | undefined;
+export declare function justifyValue(justify: FlexJustify | undefined): string | undefined;
+declare const Flex: import("svelte").Component<FlexProps, {}, "">;
+type Flex = ReturnType<typeof Flex>;
+export default Flex;
+//# sourceMappingURL=Flex.svelte.d.ts.map

package/dist/Flex.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Flex.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAChF,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;AAC5E,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEvF,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACnE,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAoBF,8EAA8E;AAC9E,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAKzE;AAmBD,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAE3E;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAEjF;AA6BH,QAAA,MAAM,IAAI,+CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}