@sentropic/design-system-svelte 0.34.49 → 0.34.51

package/dist/NavRail.svelte

@@ -0,0 +1,147 @@
+<script lang="ts" module>
+  import type { Snippet } from "svelte";
+
+  export interface NavRailItem {
+    id: string;
+    label: string;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    badge?: string | number;
+    icon?: Snippet;
+  }
+
+  export interface NavRailProps {
+    items?: NavRailItem[];
+    label?: string;
+    activeItemId?: string;
+    onItemSelect?: (id: string) => void;
+    footer?: Snippet;
+    children?: Snippet;
+    class?: string;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    items = [],
+    label = "Primary navigation",
+    activeItemId,
+    onItemSelect,
+    footer,
+    children,
+    class: className
+  }: NavRailProps = $props();
+
+  const classes = $derived(["st-navRail", className].filter(Boolean).join(" "));
+
+  function isActive(item: NavRailItem) {
+    return item.active === true || item.id === activeItemId;
+  }
+
+  function selectItem(item: NavRailItem) {
+    if (!item.disabled) onItemSelect?.(item.id);
+  }
+</script>
+
+<nav class={classes} aria-label={label}>
+  <div class="st-navRail__items">
+    {#each items as item (item.id)}
+      {#if item.href && !item.disabled}
+        <a class="st-navRail__item" class:st-navRail__item--active={isActive(item)} href={item.href} aria-current={isActive(item) ? "page" : undefined} title={item.label} onclick={() => selectItem(item)}>
+          {#if item.icon}<span class="st-navRail__icon">{@render item.icon()}</span>{/if}
+          <span class="st-navRail__label">{item.label}</span>
+          {#if item.badge != null}<span class="st-navRail__badge">{item.badge}</span>{/if}
+        </a>
+      {:else}
+        <button class="st-navRail__item" class:st-navRail__item--active={isActive(item)} type="button" disabled={item.disabled} aria-current={isActive(item) ? "page" : undefined} title={item.label} onclick={() => selectItem(item)}>
+          {#if item.icon}<span class="st-navRail__icon">{@render item.icon()}</span>{/if}
+          <span class="st-navRail__label">{item.label}</span>
+          {#if item.badge != null}<span class="st-navRail__badge">{item.badge}</span>{/if}
+        </button>
+      {/if}
+    {/each}
+    {@render children?.()}
+  </div>
+  {#if footer}
+    <footer class="st-navRail__footer">{@render footer()}</footer>
+  {/if}
+</nav>
+
+<style>
+  .st-navRail {
+    align-items: stretch;
+    background: var(--st-component-navRail-surface, var(--st-semantic-surface-raised));
+    color: var(--st-semantic-text-primary);
+    display: grid;
+    grid-template-rows: 1fr auto;
+    block-size: 100%;
+    inline-size: var(--st-component-navRail-width, 4.5rem);
+    padding: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-navRail__items,
+  .st-navRail__footer {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-navRail__items {
+    min-block-size: 0;
+    overflow-y: auto;
+  }
+
+  .st-navRail__item {
+    align-items: center;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--st-radius-md, 0.375rem);
+    color: var(--st-semantic-text-secondary);
+    cursor: pointer;
+    display: inline-flex;
+    flex-direction: column;
+    font: inherit;
+    gap: var(--st-spacing-1, 0.25rem);
+    inline-size: 100%;
+    min-block-size: 3.25rem;
+    padding: var(--st-spacing-2, 0.5rem);
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+  }
+
+  .st-navRail__item:hover,
+  .st-navRail__item--active {
+    background: var(--st-component-navRail-activeBackground, var(--st-semantic-surface-subtle));
+    color: var(--st-semantic-text-primary);
+  }
+
+  .st-navRail__item--active {
+    border-color: var(--st-component-navRail-activeBorder, var(--st-semantic-border-strong));
+  }
+
+  .st-navRail__item:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .st-navRail__label {
+    font-size: 0.6875rem;
+    font-weight: 650;
+    line-height: 1.1;
+  }
+
+  .st-navRail__badge {
+    background: var(--st-component-navRail-badgeBackground, var(--st-semantic-surface-inverse));
+    border-radius: 999px;
+    color: var(--st-semantic-text-inverse);
+    font-size: 0.625rem;
+    line-height: 1;
+    padding: 0.125rem 0.3rem;
+    position: absolute;
+    right: 0.25rem;
+    top: 0.25rem;
+  }
+</style>

package/dist/NavRail.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+export interface NavRailItem {
+    id: string;
+    label: string;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    badge?: string | number;
+    icon?: Snippet;
+}
+export interface NavRailProps {
+    items?: NavRailItem[];
+    label?: string;
+    activeItemId?: string;
+    onItemSelect?: (id: string) => void;
+    footer?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const NavRail: import("svelte").Component<NavRailProps, {}, "">;
+type NavRail = ReturnType<typeof NavRail>;
+export default NavRail;
+//# sourceMappingURL=NavRail.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavRail.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NavRail.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsDH,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/NavShell.svelte

@@ -0,0 +1,218 @@
+<script lang="ts" module>
+  /** Variante de chrome du panneau de navigation.
+   * - `rail`   : panneau latéral persistant (`<aside>` complementary) ;
+   * - `drawer` : overlay — DÉLÈGUE au composant Drawer (rôle dialog + Escape + backdrop). */
+  export type NavShellVariant = "rail" | "drawer";
+
+  /** Côté d'ancrage quand `variant="drawer"` (transmis tel quel à Drawer). */
+  export type NavShellSide = "left" | "right" | "bottom";
+</script>
+
+<script lang="ts">
+  // NavShell — CHROME d'un rail / drawer de navigation (vague 3 du NavSystem).
+  // Régions EXCLUSIVES pour que les produits ne mélangent plus nav + filtre +
+  // action + détail dans une bouillie :
+  //   • header   → titre (optionnel), flèche-retour maître→détail, sous-titre ;
+  //   • search   → slot pleine largeur (le consommateur y met un Search fluid) ;
+  //   • body     → corps SCROLLABLE (NavSection / NavList / NavTree) ;
+  //   • footer   → zone d'actions (le consommateur y met un NavActionStack).
+  // ZÉRO-ENTROPIE : en mode `drawer`, on ne réimplémente PAS l'overlay — on
+  // RÉUTILISE le composant Drawer (open/side/title + dialog/Escape/backdrop) et
+  // on lui passe le même header/search/body/footer via ses slots children/footer.
+  // En mode `rail`, panneau persistant <aside> role=complementary.
+  // Style token-only scopé, AUCUN hex.
+  import type { Snippet } from "svelte";
+  import Drawer from "./Drawer.svelte";
+
+  type NavShellProps = {
+    /** Chrome : panneau persistant (`rail`) ou overlay délégué à Drawer (`drawer`). */
+    variant?: NavShellVariant;
+    /** Titre du panneau, rendu dans le `<header>` (rail) ou via Drawer (drawer). */
+    title?: string;
+    /** Sous-titre muet sous le titre. */
+    subtitle?: string;
+    /** Affiche une flèche-retour dans l'en-tête (pattern maître→détail). */
+    back?: boolean;
+    /** Appelé au clic sur la flèche-retour. */
+    onBack?: () => void;
+    /** Libellé accessible de la flèche-retour. */
+    backLabel?: string;
+    /** Libellé accessible du panneau (aria-label de l'aside / du dialog). */
+    label?: string;
+    /** Slot de recherche rendu PLEINE LARGEUR (ex. Search fluid). */
+    search?: Snippet;
+    /** Zone d'actions en pied (ex. NavActionStack). */
+    footer?: Snippet;
+    /** Corps scrollable (NavSection / NavList / NavTree). */
+    children: Snippet;
+    /** Ouverture du tiroir quand `variant="drawer"` (bindable). */
+    open?: boolean;
+    /** Côté d'ancrage du tiroir quand `variant="drawer"`. */
+    side?: NavShellSide;
+    class?: string;
+  };
+
+  let {
+    variant = "rail",
+    title,
+    subtitle,
+    back = false,
+    onBack,
+    backLabel = "Retour",
+    label,
+    search,
+    footer,
+    children,
+    open = $bindable(false),
+    side = "left",
+    class: className
+  }: NavShellProps = $props();
+
+  const rootClasses = $derived(
+    ["st-navShell", `st-navShell--${variant}`, className].filter(Boolean).join(" ")
+  );
+</script>
+
+<!-- Contenu commun aux deux variantes : header (back/titre/sous-titre) + search
+     pleine largeur. Le corps et le footer diffèrent selon le contenant. -->
+{#snippet head()}
+  {#if back || title || subtitle}
+    <header class="st-navShell__header">
+      {#if back}
+        <button
+          type="button"
+          class="st-navShell__back"
+          aria-label={backLabel}
+          onclick={() => onBack?.()}
+        >
+          <span aria-hidden="true">&#8592;</span>
+        </button>
+      {/if}
+      {#if title || subtitle}
+        <div class="st-navShell__heading">
+          {#if title}<p class="st-navShell__title">{title}</p>{/if}
+          {#if subtitle}<p class="st-navShell__subtitle">{subtitle}</p>{/if}
+        </div>
+      {/if}
+    </header>
+  {/if}
+  {#if search}
+    <div class="st-navShell__search">{@render search()}</div>
+  {/if}
+{/snippet}
+
+{#if variant === "drawer"}
+  <!-- Overlay : on délègue le chrome (dialog/Escape/backdrop) à Drawer. Drawer
+       exige un `title` ; à défaut on retombe sur `label` puis une valeur sûre.
+       Le header/search/body passent dans `children`, le footer dans son slot. -->
+  <Drawer
+    bind:open
+    {side}
+    title={title ?? label ?? "Navigation"}
+    class={rootClasses}
+    {footer}
+  >
+    {@render head()}
+    <div class="st-navShell__body">
+      {@render children()}
+    </div>
+  </Drawer>
+{:else}
+  <!-- Panneau persistant : région complementary titrée. -->
+  <aside class={rootClasses} aria-label={label ?? title}>
+    {@render head()}
+    <div class="st-navShell__body">
+      {@render children()}
+    </div>
+    {#if footer}
+      <footer class="st-navShell__footer">
+        {@render footer()}
+      </footer>
+    {/if}
+  </aside>
+{/if}
+
+<style>
+  /* Token-only scopé. Rail = grille à 3 rangs (header+search auto / body 1fr /
+     footer auto) qui plafonne en hauteur pour que SEUL le corps scrolle. */
+  .st-navShell--rail {
+    background: var(--st-component-navShell-surface, var(--st-semantic-surface-raised));
+    border-color: var(--st-component-navShell-border, var(--st-semantic-border-subtle));
+    border-right-style: solid;
+    border-right-width: 1px;
+    color: var(--st-semantic-text-primary);
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    height: 100%;
+    inline-size: var(--st-component-navShell-width, 18rem);
+    max-inline-size: 100%;
+    padding: var(--st-spacing-4, 1rem);
+  }
+
+  .st-navShell__header {
+    align-items: center;
+    display: flex;
+    gap: var(--st-spacing-2, 0.5rem);
+    padding-block-end: var(--st-spacing-3, 0.75rem);
+  }
+
+  .st-navShell__back {
+    align-items: center;
+    background: transparent;
+    border: 1px solid var(--st-semantic-border-subtle);
+    border-radius: var(--st-radius-small, 0.375rem);
+    color: var(--st-semantic-text-primary);
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: 2rem;
+    justify-content: center;
+    width: 2rem;
+  }
+
+  .st-navShell__heading {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-1, 0.25rem);
+    min-inline-size: 0;
+  }
+
+  .st-navShell__title {
+    font-size: var(--st-component-navShell-titleSize, 1rem);
+    font-weight: 600;
+    line-height: 1.3;
+    margin: 0;
+  }
+
+  .st-navShell__subtitle {
+    color: var(--st-semantic-text-secondary);
+    font-size: var(--st-component-navShell-subtitleSize, 0.8125rem);
+    line-height: 1.4;
+    margin: 0;
+  }
+
+  /* Search pleine largeur du panneau. */
+  .st-navShell__search {
+    display: block;
+    inline-size: 100%;
+    padding-block-end: var(--st-spacing-3, 0.75rem);
+  }
+
+  /* Le corps est la SEULE région scrollable (1fr en rail, overflow en drawer). */
+  .st-navShell__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-2, 0.5rem);
+    min-block-size: 0;
+    overflow-y: auto;
+  }
+
+  .st-navShell__footer {
+    border-color: var(--st-component-navShell-border, var(--st-semantic-border-subtle));
+    border-top-style: solid;
+    border-top-width: 1px;
+    display: block;
+    margin-block-start: var(--st-spacing-3, 0.75rem);
+    padding-block-start: var(--st-spacing-3, 0.75rem);
+  }
+</style>

package/dist/NavShell.svelte.d.ts

@@ -0,0 +1,38 @@
+/** Variante de chrome du panneau de navigation.
+ * - `rail`   : panneau latéral persistant (`<aside>` complementary) ;
+ * - `drawer` : overlay — DÉLÈGUE au composant Drawer (rôle dialog + Escape + backdrop). */
+export type NavShellVariant = "rail" | "drawer";
+/** Côté d'ancrage quand `variant="drawer"` (transmis tel quel à Drawer). */
+export type NavShellSide = "left" | "right" | "bottom";
+import type { Snippet } from "svelte";
+type NavShellProps = {
+    /** Chrome : panneau persistant (`rail`) ou overlay délégué à Drawer (`drawer`). */
+    variant?: NavShellVariant;
+    /** Titre du panneau, rendu dans le `<header>` (rail) ou via Drawer (drawer). */
+    title?: string;
+    /** Sous-titre muet sous le titre. */
+    subtitle?: string;
+    /** Affiche une flèche-retour dans l'en-tête (pattern maître→détail). */
+    back?: boolean;
+    /** Appelé au clic sur la flèche-retour. */
+    onBack?: () => void;
+    /** Libellé accessible de la flèche-retour. */
+    backLabel?: string;
+    /** Libellé accessible du panneau (aria-label de l'aside / du dialog). */
+    label?: string;
+    /** Slot de recherche rendu PLEINE LARGEUR (ex. Search fluid). */
+    search?: Snippet;
+    /** Zone d'actions en pied (ex. NavActionStack). */
+    footer?: Snippet;
+    /** Corps scrollable (NavSection / NavList / NavTree). */
+    children: Snippet;
+    /** Ouverture du tiroir quand `variant="drawer"` (bindable). */
+    open?: boolean;
+    /** Côté d'ancrage du tiroir quand `variant="drawer"`. */
+    side?: NavShellSide;
+    class?: string;
+};
+declare const NavShell: import("svelte").Component<NavShellProps, {}, "open">;
+type NavShell = ReturnType<typeof NavShell>;
+export default NavShell;
+//# sourceMappingURL=NavShell.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavShell.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NavShell.svelte.ts"],"names":[],"mappings":"AAGE;;2FAE2F;AAC3F,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEhD,4EAA4E;AAC5E,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAezD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,KAAK,aAAa,GAAG;IACnB,mFAAmF;IACnF,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yDAAyD;IACzD,QAAQ,EAAE,OAAO,CAAC;IAClB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yDAAyD;IACzD,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA0FJ,QAAA,MAAM,QAAQ,uDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/ObjectPage.svelte

@@ -0,0 +1,222 @@
+<script lang="ts" module>
+  export interface ObjectPageBreadcrumbItem {
+    label: string;
+    href?: string;
+  }
+
+  export interface ObjectPageKpi {
+    label: string;
+    value: string;
+    unit?: string;
+  }
+
+  export interface ObjectPageField {
+    key: string;
+    value: string;
+  }
+
+  export interface ObjectPageColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    align?: "start" | "center" | "end";
+    width?: string;
+  }
+
+  export interface ObjectPageRow {
+    id: string;
+    [key: string]: unknown;
+  }
+
+  export type ObjectPageProps = {
+    breadcrumb?: ObjectPageBreadcrumbItem[];
+    entityTitle: string;
+    entityStatus?: { label: string; tone: "neutral" | "info" | "success" | "warning" | "error" };
+    primaryAction?: string;
+    secondaryAction?: string;
+    kpis?: ObjectPageKpi[];
+    fieldsTitle?: string;
+    fields?: ObjectPageField[];
+    relatedTitle?: string;
+    relatedColumns?: ObjectPageColumn[];
+    relatedRows?: ObjectPageRow[];
+    onprimaryaction?: () => void;
+    onsecondaryaction?: () => void;
+  };
+</script>
+
+<script lang="ts">
+  import Badge from "./Badge.svelte";
+  import Button from "./Button.svelte";
+  import DataTable from "./DataTable.svelte";
+  import Breadcrumb from "./Breadcrumb.svelte";
+
+  let {
+    breadcrumb = [],
+    entityTitle,
+    entityStatus,
+    primaryAction,
+    secondaryAction,
+    kpis = [],
+    fieldsTitle,
+    fields = [],
+    relatedTitle,
+    relatedColumns = [],
+    relatedRows = [],
+    onprimaryaction,
+    onsecondaryaction,
+  }: ObjectPageProps = $props();
+</script>
+
+<div class="st-op">
+  {#if breadcrumb.length > 0}
+    <Breadcrumb items={breadcrumb} />
+  {/if}
+
+  <div class="st-op__header">
+    <div class="st-op__titleRow">
+      <h1 class="st-op__title">{entityTitle}</h1>
+      {#if entityStatus}
+        <Badge tone={entityStatus.tone}>{entityStatus.label}</Badge>
+      {/if}
+    </div>
+    <div class="st-op__actions">
+      {#if secondaryAction}
+        <Button variant="secondary" onclick={onsecondaryaction}>{secondaryAction}</Button>
+      {/if}
+      {#if primaryAction}
+        <Button variant="primary" onclick={onprimaryaction}>{primaryAction}</Button>
+      {/if}
+    </div>
+  </div>
+
+  {#if kpis.length > 0}
+    <div class="st-op__kpi-row">
+      {#each kpis as kpi}
+        <div class="st-op__kpi">
+          <span class="st-op__kpiLabel">{kpi.label}</span>
+          <span class="st-op__kpiValue">{kpi.value}{#if kpi.unit}<span class="st-op__kpiUnit"> {kpi.unit}</span>{/if}</span>
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  {#if fields.length > 0}
+    <div class="st-op__fields">
+      {#if fieldsTitle}
+        <h2 class="st-op__sectionTitle">{fieldsTitle}</h2>
+      {/if}
+      <dl class="st-op__dl">
+        {#each fields as field}
+          <div class="st-op__dlRow">
+            <dt class="st-op__dt">{field.key}</dt>
+            <dd class="st-op__dd">{field.value}</dd>
+          </div>
+        {/each}
+      </dl>
+    </div>
+  {/if}
+
+  {#if relatedColumns.length > 0}
+    <div class="st-op__related">
+      {#if relatedTitle}
+        <h2 class="st-op__sectionTitle">{relatedTitle}</h2>
+      {/if}
+      <DataTable columns={relatedColumns} rows={relatedRows} />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .st-op {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-6, 1.5rem);
+    padding: var(--st-spacing-6, 1.5rem);
+    background: var(--st-semantic-surface-default);
+    color: var(--st-semantic-text-primary);
+    min-block-size: 100%;
+  }
+  .st-op__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--st-spacing-4, 1rem);
+    flex-wrap: wrap;
+  }
+  .st-op__titleRow {
+    display: flex;
+    align-items: center;
+    gap: var(--st-spacing-3, 0.75rem);
+    flex-wrap: wrap;
+  }
+  .st-op__title {
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin: 0;
+  }
+  .st-op__actions {
+    display: flex;
+    gap: var(--st-spacing-2, 0.5rem);
+    flex-shrink: 0;
+  }
+  .st-op__kpi-row {
+    display: flex;
+    gap: var(--st-spacing-4, 1rem);
+    flex-wrap: wrap;
+  }
+  .st-op__kpi {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-1, 0.25rem);
+    padding: var(--st-spacing-4, 1rem);
+    background: var(--st-semantic-surface-raised);
+    border: 1px solid var(--st-semantic-border-subtle);
+    border-radius: var(--st-radius-md, 0.5rem);
+    min-inline-size: 10rem;
+  }
+  .st-op__kpiLabel {
+    font-size: 0.75rem;
+    color: var(--st-semantic-text-secondary);
+  }
+  .st-op__kpiValue {
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
+  .st-op__kpiUnit {
+    font-size: 0.875rem;
+    font-weight: 400;
+    color: var(--st-semantic-text-secondary);
+  }
+  .st-op__sectionTitle {
+    font-size: 1rem;
+    font-weight: 650;
+    margin: 0 0 var(--st-spacing-3, 0.75rem);
+  }
+  .st-op__dl {
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+    gap: var(--st-spacing-3, 0.75rem) var(--st-spacing-6, 1.5rem);
+  }
+  .st-op__dlRow {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+  .st-op__dt {
+    font-size: 0.75rem;
+    color: var(--st-semantic-text-secondary);
+    font-weight: 500;
+  }
+  .st-op__dd {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--st-semantic-text-primary);
+  }
+  .st-op__fields,
+  .st-op__related {
+    display: flex;
+    flex-direction: column;
+  }
+</style>

package/dist/ObjectPage.svelte.d.ts

@@ -0,0 +1,46 @@
+export interface ObjectPageBreadcrumbItem {
+    label: string;
+    href?: string;
+}
+export interface ObjectPageKpi {
+    label: string;
+    value: string;
+    unit?: string;
+}
+export interface ObjectPageField {
+    key: string;
+    value: string;
+}
+export interface ObjectPageColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    align?: "start" | "center" | "end";
+    width?: string;
+}
+export interface ObjectPageRow {
+    id: string;
+    [key: string]: unknown;
+}
+export type ObjectPageProps = {
+    breadcrumb?: ObjectPageBreadcrumbItem[];
+    entityTitle: string;
+    entityStatus?: {
+        label: string;
+        tone: "neutral" | "info" | "success" | "warning" | "error";
+    };
+    primaryAction?: string;
+    secondaryAction?: string;
+    kpis?: ObjectPageKpi[];
+    fieldsTitle?: string;
+    fields?: ObjectPageField[];
+    relatedTitle?: string;
+    relatedColumns?: ObjectPageColumn[];
+    relatedRows?: ObjectPageRow[];
+    onprimaryaction?: () => void;
+    onsecondaryaction?: () => void;
+};
+declare const ObjectPage: import("svelte").Component<ObjectPageProps, {}, "">;
+type ObjectPage = ReturnType<typeof ObjectPage>;
+export default ObjectPage;
+//# sourceMappingURL=ObjectPage.svelte.d.ts.map