@fragment-build/ui 3.3.0 → 4.0.0

package/index.d.ts

@@ -4,10 +4,15 @@ export { CodeSnippet, type CodeSnippetProps } from './components/code-snippet/Co
 export { Grid, type GridProps } from './components/grid/Grid';
 export { MultiSwitch, type MultiSwitchProps } from './components/multi-switch/MultiSwitch';
 export { ThemeSwitch, type ThemeSwitchProps } from './components/theme-switch/ThemeSwitch';
+export { SegmentedControl, type SegmentedControlProps, type SegmentedControlOption, } from './components/segmented-control/SegmentedControl';
 export { Form, type FormProps } from './fragments/form/Form';
 export { FormSection, type FormSectionProps } from './fragments/form/FormSection';
+export { FormCard, type FormCardProps } from './fragments/form/FormCard';
+export { SaveBar, type SaveBarProps } from './fragments/save-bar/SaveBar';
 export { PageHeader, type PageHeaderProps } from './fragments/page/PageHeader';
 export { Navbar, type NavbarProps } from './fragments/navbar/Navbar';
 export { Shell, type ShellProps } from './fragments/shell/Shell';
 export { Sidebar, type SidebarProps } from './fragments/sidebar/Sidebar';
 export { Widget, type WidgetProps } from './fragments/widget/Widget';
+export { StatCard, type StatCardProps, type StatCardDelta } from './fragments/stat/StatCard';
+export { EmptyState, type EmptyStateProps } from './fragments/empty-state/EmptyState';

package/index.js

@@ -6,11 +6,16 @@ export { CodeSnippet } from './components/code-snippet/CodeSnippet';
 export { Grid } from './components/grid/Grid';
 export { MultiSwitch } from './components/multi-switch/MultiSwitch';
 export { ThemeSwitch } from './components/theme-switch/ThemeSwitch';
+export { SegmentedControl, } from './components/segmented-control/SegmentedControl';
 export { Form } from './fragments/form/Form';
 export { FormSection } from './fragments/form/FormSection';
+export { FormCard } from './fragments/form/FormCard';
+export { SaveBar } from './fragments/save-bar/SaveBar';
 export { PageHeader } from './fragments/page/PageHeader';
 export { Navbar } from './fragments/navbar/Navbar';
 export { Shell } from './fragments/shell/Shell';
 export { Sidebar } from './fragments/sidebar/Sidebar';
 export { Widget } from './fragments/widget/Widget';
+export { StatCard } from './fragments/stat/StatCard';
+export { EmptyState } from './fragments/empty-state/EmptyState';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,sBAAsB;AACtB,OAAO,EAAE,IAAI,EAAkB,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAyB,MAAM,uCAAuC,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAkB,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAyB,MAAM,uCAAuC,CAAC;AAC3F,OAAO,EAAE,WAAW,EAAyB,MAAO,uCAAuC,CAAC;AAE5F,OAAO,EAAE,IAAI,EAAkB,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAyB,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,UAAU,EAAwB,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,MAAM,EAAoB,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,KAAK,EAAmB,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,OAAO,EAAqB,MAAM,6BAA6B,CAAC;AACzE,OAAO,EAAE,MAAM,EAAoB,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,sBAAsB;AACtB,OAAO,EAAE,IAAI,EAAkB,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAyB,MAAM,uCAAuC,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAkB,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAyB,MAAM,uCAAuC,CAAC;AAC3F,OAAO,EAAE,WAAW,EAAyB,MAAO,uCAAuC,CAAC;AAC5F,OAAO,EACL,gBAAgB,GACjB,MAAM,iDAAiD,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAkB,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAyB,MAAM,8BAA8B,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAsB,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,OAAO,EAAqB,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAwB,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,MAAM,EAAoB,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,KAAK,EAAmB,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,OAAO,EAAqB,MAAM,6BAA6B,CAAC;AACzE,OAAO,EAAE,MAAM,EAAoB,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,QAAQ,EAA0C,MAAM,2BAA2B,CAAC;AAC7F,OAAO,EAAE,UAAU,EAAwB,MAAM,oCAAoC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragment-build/ui",
-  "version": "3.3.0",
+  "version": "4.0.0",
   "type": "module",
   "engines": {
     "node": ">=22"

package/src/components/code-snippet/code-snippet.css

@@ -11,3 +11,21 @@
     @apply text-muted;
   }
 }
+
+@layer components {
+  .fragment-code-snippet--block {
+    @apply overflow-hidden rounded-xl border border-border bg-surface-secondary;
+  }
+
+  .fragment-code-snippet__header {
+    @apply flex items-center justify-between gap-2 border-b border-border py-1 pr-1 pl-4;
+  }
+
+  .fragment-code-snippet__title {
+    @apply text-xs font-medium text-muted;
+  }
+
+  .fragment-code-snippet__block-code {
+    @apply overflow-x-auto px-4 py-3 font-mono text-xs leading-relaxed text-foreground;
+  }
+}

package/src/components/segmented-control/segmented-control.css

@@ -0,0 +1,41 @@
+@layer components {
+  .fragment-segmented-control {
+    @apply inline-flex items-center gap-0.5 rounded-[var(--field-radius)] bg-default p-0.5;
+  }
+
+  .fragment-segmented-control--full-width {
+    @apply flex w-full;
+
+    .fragment-segmented-control__item {
+      @apply flex-1;
+    }
+  }
+
+  .fragment-segmented-control__item.toggle-button {
+    @apply h-8 rounded-[calc(var(--field-radius)-0.125rem)] px-3 text-sm font-medium text-muted md:h-8;
+
+    --toggle-button-bg: transparent;
+    --toggle-button-bg-hover: transparent;
+    --toggle-button-bg-pressed: transparent;
+    --toggle-button-bg-selected: var(--surface);
+    --toggle-button-bg-selected-hover: var(--surface);
+    --toggle-button-bg-selected-pressed: var(--surface);
+    --toggle-button-fg-selected: var(--surface-foreground, var(--foreground));
+
+    &:hover, &[data-hovered="true"] {
+      @apply text-foreground;
+    }
+
+    &[data-selected="true"] {
+      @apply shadow-sm text-foreground;
+    }
+
+    & svg {
+      @apply size-4;
+    }
+  }
+
+  .fragment-segmented-control--sm .fragment-segmented-control__item.toggle-button {
+    @apply h-7 px-2.5 text-xs md:h-7;
+  }
+}

package/src/fragments/empty-state/empty-state.css

@@ -0,0 +1,39 @@
+@layer components {
+  .fragment-empty-state {
+    @apply flex flex-col items-center justify-center text-center px-6 py-12;
+  }
+
+  .fragment-empty-state--sm {
+    @apply py-8;
+
+    .fragment-empty-state__icon {
+      @apply size-9 mb-3;
+      & svg {
+        @apply size-[18px];
+      }
+    }
+  }
+
+  .fragment-empty-state--bordered {
+    @apply rounded-2xl border border-dashed border-border bg-surface;
+  }
+
+  .fragment-empty-state__icon {
+    @apply mb-4 flex size-11 items-center justify-center rounded-xl bg-default text-muted;
+    & svg {
+      @apply size-5;
+    }
+  }
+
+  .fragment-empty-state__title {
+    @apply text-sm font-semibold text-foreground;
+  }
+
+  .fragment-empty-state__description {
+    @apply mt-1 max-w-sm text-sm text-muted text-balance;
+  }
+
+  .fragment-empty-state__actions {
+    @apply mt-5 flex flex-wrap items-center justify-center gap-2;
+  }
+}

package/src/fragments/form/form-card.css

@@ -0,0 +1,42 @@
+@layer components {
+  .fragment-form-card {
+    @apply p-0 gap-0 overflow-visible;
+  }
+
+  .fragment-form-card__header {
+    @apply flex items-start gap-4 px-6 pt-5;
+  }
+
+  .fragment-form-card__heading {
+    @apply min-w-0 flex-1;
+  }
+
+  .fragment-form-card__title {
+    @apply text-base font-semibold;
+  }
+
+  .fragment-form-card__description {
+    @apply mt-1 text-sm text-muted;
+  }
+
+  .fragment-form-card__header-end {
+    @apply shrink-0 flex items-center gap-2;
+  }
+
+  .fragment-form-card__body {
+    @apply flex flex-col gap-5 px-6 pt-5 pb-6;
+  }
+
+  .fragment-form-card__footer {
+    @apply flex items-center justify-between gap-3 rounded-b-[inherit] border-t border-separator bg-surface-secondary px-6 py-3
+           text-xs text-muted;
+  }
+
+  .fragment-form-card--danger {
+    @apply border-danger/30;
+
+    .fragment-form-card__title {
+      @apply text-danger;
+    }
+  }
+}

package/src/fragments/form/form-section.css

@@ -1,41 +1,53 @@
 @layer components {
   .fragment-form-section__main {
-    @apply flex flex-col;
+    @apply flex flex-col gap-4;
   }
 
   .fragment-form-section__info {
-    @apply flex-1 pb-4;
+    @apply min-w-0;
   }
 
-  .fragment-form-section__content {
-    @apply flex flex-col gap-4 flex-1 min-w-0;
+  .fragment-form-section__title-row {
+    @apply flex items-center gap-2;
+  }
+
+  .fragment-form-section__title {
+    @apply text-sm font-semibold;
   }
 
   .fragment-form-section__description {
-    @apply text-sm text-muted;
+    @apply mt-1 text-sm text-muted;
+  }
+
+  .fragment-form-section__content {
+    @apply flex flex-col gap-5 flex-1 min-w-0;
   }
 
+  /*
+   * Label column and control column. The label column is narrow and fixed so that, down a long
+   * settings page, every control starts on the same vertical line.
+   */
   .fragment-form-section--horizontal {
     .fragment-form-section__main {
-      @apply sm:flex-row;
+      @apply md:flex-row md:gap-10;
     }
     .fragment-form-section__info {
-      @apply sm:max-w-sm sm:pr-4 sm:pb-0;
+      @apply md:w-72 md:shrink-0;
     }
     .fragment-form-section__content {
-      @apply sm:items-end sm:justify-center sm:max-w-sm;
+      @apply md:max-w-xl;
     }
   }
 
   .fragment-form-section--vertical {
     .fragment-form-section__content {
-      @apply sm:max-w-3xl;
+      @apply md:max-w-3xl;
     }
   }
 
   .fragment-form-section--full-width {
     .fragment-form-section__content {
-      @apply sm:max-w-full;
+      @apply md:max-w-full;
     }
   }
 }

package/src/fragments/form/form.css

@@ -1,5 +1,5 @@
 @layer components {
   .fragment-form__separator {
-    @apply my-6;
+    @apply my-7;
   }
 }

package/src/fragments/page/page-header.css

@@ -1,13 +1,33 @@
 @layer components {
   .fragment-page-header {
-    @apply flex gap-4 justify-between sm:items-end mb-8 flex-col sm:flex-row;
+    @apply flex flex-col gap-5 mb-8;
+  }
+
+  .fragment-page-header--with-footer {
+    @apply mb-6;
+  }
+
+  .fragment-page-header__row {
+    @apply flex gap-4 justify-between flex-col sm:flex-row sm:items-end;
+  }
+
+  .fragment-page-header__heading {
+    @apply min-w-0;
+  }
+
+  .fragment-page-header__eyebrow {
+    @apply mb-1.5 flex items-center gap-1.5 text-xs font-medium text-muted;
   }
 
   .fragment-page-header__description {
-    @apply mt-2 text-muted;
+    @apply mt-1 max-w-2xl text-sm text-muted;
   }
 
   .fragment-page-header__actions {
-    @apply flex gap-4;
+    @apply flex flex-wrap gap-2 items-center shrink-0;
+  }
+
+  .fragment-page-header__footer {
+    @apply min-w-0;
   }
 }

package/src/fragments/save-bar/save-bar.css

@@ -0,0 +1,28 @@
+@layer components {
+  /* Sticky inside the form rather than fixed to the viewport, so it never needs to know how wide the rail is. */
+  /* Takes no room while hidden, so a clean form ends where its last field does. */
+  .fragment-save-bar {
+    @apply pointer-events-none sticky bottom-20 z-30 flex h-0 justify-center overflow-visible md:bottom-6;
+    @apply translate-y-4 opacity-0 transition-[opacity,translate] duration-200 motion-reduce:transition-none;
+  }
+
+  .fragment-save-bar--visible {
+    @apply pointer-events-auto mt-6 h-auto translate-y-0 opacity-100;
+  }
+
+  .fragment-save-bar__bar {
+    @apply flex w-full max-w-2xl items-center justify-between gap-4 rounded-2xl border border-border bg-overlay py-2 pr-2 pl-4
+           text-sm shadow-lg;
+  }
+
+  .fragment-save-bar__message {
+    @apply flex items-center gap-2 font-medium text-foreground;
+    & svg {
+      @apply shrink-0 text-warning;
+    }
+  }
+
+  .fragment-save-bar__actions {
+    @apply flex shrink-0 items-center gap-1;
+  }
+}

package/src/fragments/shell/shell.css

@@ -7,16 +7,20 @@
     @apply flex-col;
   }
 
+  /*
+   * The content column is capped at a width a table or a two-column dashboard still reads well at.
+   * Past ~1600px the eye travels too far between a label and its value, and a wide monitor is
+   * better spent on margin than on stretching every card.
+   */
   .fragment-shell__main {
-    @apply flex-1 min-w-0 mx-auto;
+    @apply flex-1 min-w-0 mx-auto w-full;
 
     .fragment-shell--horizontal & {
-      @apply px-8 lg:px-12 xl:px-20 py-14 max-w-[2100px];
+      @apply px-4 sm:px-6 lg:px-10 pt-6 pb-24 md:pt-8 md:pb-12 max-w-[1600px];
     }
 
     .fragment-shell--vertical & {
-      @apply px-8 py-6 max-w-[2100px] w-full;
+      @apply px-4 sm:px-6 lg:px-10 py-6 max-w-[1600px];
     }
-
   }
 }

package/src/fragments/sidebar/sidebar.css

@@ -5,28 +5,29 @@
 
   .fragment-sidebar__collapsed {
     @apply fixed top-0 left-0 border-r border-border bg-sidebar text-sidebar-foreground
-           flex flex-col h-screen gap-8 transition-all;
+           flex flex-col h-screen gap-4 transition-all z-40;
   }
 
   .fragment-sidebar__collapsed-body {
-    @apply w-20 items-center flex flex-col gap-8 px-3 pt-8 overflow-y-auto flex-1;
+    @apply w-16 items-center flex flex-col gap-6 px-2 pt-5 overflow-y-auto flex-1;
   }
 
   .fragment-sidebar__collapsed-footer {
-    @apply w-20 items-center flex flex-col gap-8 px-3 pb-8;
+    @apply w-16 items-center flex flex-col gap-3 px-2 pb-4;
   }
 
   .fragment-sidebar__expanded {
     @apply fixed top-0 left-0 border-r border-border bg-sidebar text-sidebar-foreground
-           flex flex-col h-screen gap-8 overflow-hidden transition-all;
+           flex flex-col h-screen gap-4 overflow-hidden transition-all z-40;
   }
 
   .fragment-sidebar__expanded-body {
-    @apply w-72 flex flex-col gap-8 px-3 pt-8 overflow-y-auto flex-1;
+    @apply w-64 flex flex-col gap-6 px-3 pt-5 overflow-y-auto flex-1;
   }
 
+  /* The footer is chrome (account, workspace), so it is tucked behind a hairline. */
   .fragment-sidebar__expanded-footer {
-    @apply w-72 flex flex-col gap-8 px-3 pb-8;
+    @apply w-64 flex flex-col gap-2 px-3 pt-3 pb-4 border-t border-border;
   }
 
   .fragment-sidebar__placeholder {
@@ -34,11 +35,14 @@
   }
 
   .fragment-sidebar__layout-button-wrapper {
-    @apply fixed top-6 transition-all;
+    @apply fixed top-6 transition-all z-50;
   }
 
   .fragment-sidebar__layout-button {
-    @apply h-6! w-6!;
+    @apply h-6! w-6! min-w-6! bg-surface! border border-border shadow-sm text-muted;
+    & svg {
+      @apply size-3.5;
+    }
   }
 
   .fragment-sidebar__bottom-nav {
@@ -69,7 +73,7 @@
   .fragment-sidebar__collapsed-nav {
     @apply flex flex-col gap-1;
     & svg {
-      @apply size-5! shrink-0 self-center;
+      @apply size-[18px]! shrink-0 self-center;
     }
   }
 
@@ -106,23 +110,36 @@
   }
 
   .fragment-sidebar__custom-item {
-    @apply px-2;
+    @apply px-1;
   }
 
   .fragment-sidebar__nav {
-    @apply text-sm;
+    @apply text-sm flex flex-col gap-0.5;
+
+    /* Group label: quiet, so it organises the list without competing with it. */
+    & > .header {
+      @apply px-3 pb-1 text-xs font-medium text-muted;
+    }
+
+    .list-box {
+      @apply gap-0.5;
+    }
 
     .list-box-item {
-      @apply px-3! pr-1! py-1! h-10!;
+      @apply px-3! pr-1! py-1! h-9! gap-3! rounded-lg! font-normal text-sidebar-foreground/80;
+      &:hover, &[data-hovered="true"] {
+        background-color: var(--sidebar-default, var(--default)) !important;
+        @apply text-sidebar-foreground;
+      }
     }
 
     & svg {
-      @apply size-5 shrink-0 self-center;
+      @apply size-[18px] shrink-0 self-center;
     }
   }
 
   .fragment-sidebar__accordion-trigger {
-    @apply w-full flex items-center gap-3 h-10 px-3 pr-1 py-1 rounded-2xl text-sm font-normal cursor-pointer
+    @apply w-full flex items-center gap-3 h-9 px-3 pr-1 py-1 rounded-lg text-sm font-normal cursor-pointer
            text-sidebar-foreground transition-colors;
     &:hover, &[data-hovered="true"] {
       /* `--default` is a page-level palette colour; opt out per-rail with `--sidebar-default`. */
@@ -161,7 +178,7 @@
 
   .fragment-sidebar__nav-item--active {
     /* `--accent-soft` is translucent, so it composites over the rail, not the page. */
-    @apply bg-accent-soft!;
+    @apply bg-accent-soft! font-medium!;
     color: var(--sidebar-accent-soft-foreground, var(--accent-soft-foreground)) !important;
   }
 
@@ -180,13 +197,13 @@
   /* Layout modifier variants */
   .fragment-sidebar--auto {
     .fragment-sidebar__expanded {
-      @apply w-20 opacity-0 pointer-events-none xl:w-72 xl:opacity-100 xl:pointer-events-auto;
+      @apply w-16 opacity-0 pointer-events-none xl:w-64 xl:opacity-100 xl:pointer-events-auto;
     }
     .fragment-sidebar__placeholder {
-      @apply w-20 opacity-0 pointer-events-none xl:w-72 xl:opacity-100 xl:pointer-events-auto;
+      @apply w-16 opacity-0 pointer-events-none xl:w-64 xl:opacity-100 xl:pointer-events-auto;
     }
     .fragment-sidebar__layout-button-wrapper {
-      @apply left-20 translate-x-1/2 rotate-180 xl:left-72 xl:-translate-x-1/2 xl:rotate-0;
+      @apply left-16 translate-x-1/2 rotate-180 xl:left-64 xl:-translate-x-1/2 xl:rotate-0;
     }
     .fragment-sidebar__collapsed {
       @apply xl:opacity-0;
@@ -195,13 +212,13 @@
 
   .fragment-sidebar--collapsed {
     .fragment-sidebar__expanded {
-      @apply w-20 opacity-0 pointer-events-none;
+      @apply w-16 opacity-0 pointer-events-none;
     }
     .fragment-sidebar__placeholder {
-      @apply w-20 opacity-0 pointer-events-none;
+      @apply w-16 opacity-0 pointer-events-none;
     }
     .fragment-sidebar__layout-button-wrapper {
-      @apply left-20 translate-x-1/2 rotate-180;
+      @apply left-16 translate-x-1/2 rotate-180;
     }
   }
 
@@ -210,13 +227,13 @@
       @apply opacity-0;
     }
     .fragment-sidebar__expanded {
-      @apply w-72;
+      @apply w-64;
     }
     .fragment-sidebar__placeholder {
-      @apply w-72;
+      @apply w-64;
     }
     .fragment-sidebar__layout-button-wrapper {
-      @apply left-72 -translate-x-1/2;
+      @apply left-64 -translate-x-1/2;
     }
   }
 }

package/src/fragments/stat/stat-card.css

@@ -0,0 +1,64 @@
+@layer components {
+  .fragment-stat-card {
+    @apply p-4 gap-2 min-w-0;
+  }
+
+  .fragment-stat-card__top {
+    @apply flex items-center justify-between gap-2;
+  }
+
+  .fragment-stat-card__label {
+    @apply flex items-center gap-1 text-xs font-medium text-muted min-w-0;
+  }
+
+  .fragment-stat-card__help {
+    @apply inline-flex text-muted/70 hover:text-foreground cursor-help rounded-full outline-none
+           focus-visible:ring-2 focus-visible:ring-focus;
+  }
+
+  .fragment-stat-card__icon {
+    @apply flex size-8 shrink-0 items-center justify-center rounded-lg bg-default text-muted;
+    & svg {
+      @apply size-4;
+    }
+  }
+
+  .fragment-stat-card__value-row {
+    @apply flex flex-wrap items-baseline gap-x-2 gap-y-1;
+  }
+
+  /* Proportional figures: a standalone number with tabular digits looks loosely set. */
+  .fragment-stat-card__value {
+    @apply text-2xl font-semibold tracking-tight text-foreground truncate;
+  }
+
+  .fragment-stat-card__delta {
+    @apply inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 text-xs font-medium;
+  }
+
+  .fragment-stat-card__delta--positive {
+    @apply bg-success-soft text-success-soft-foreground;
+  }
+
+  .fragment-stat-card__delta--negative {
+    @apply bg-danger-soft text-danger-soft-foreground;
+  }
+
+  .fragment-stat-card__delta--neutral {
+    @apply bg-default text-muted;
+  }
+
+  .fragment-stat-card__hint {
+    @apply text-xs text-muted;
+  }
+
+  .fragment-stat-card__skeleton {
+    @apply h-8 w-24 rounded-lg;
+  }
+
+  .fragment-stat-card--emphasis {
+    .fragment-stat-card__value {
+      @apply text-3xl;
+    }
+  }
+}

package/src/fragments/widget/widget.css

@@ -1,18 +1,59 @@
 @layer components {
   .fragment-widget {
-    @apply px-7 py-5 gap-5;
+    @apply p-5 gap-4 min-w-0;
   }
 
   .fragment-widget__header {
-    @apply p-0;
+    @apply p-0 flex flex-row items-start gap-3;
+  }
+
+  .fragment-widget__header-start {
+    @apply shrink-0;
+  }
+
+  .fragment-widget__heading {
+    @apply min-w-0 flex-1;
+  }
+
+  .fragment-widget__title {
+    @apply text-sm font-semibold;
+  }
+
+  .fragment-widget__description {
+    @apply mt-0.5 text-xs text-muted;
   }
 
   .fragment-widget__header-end {
-    @apply ml-auto;
+    @apply ml-auto flex items-center gap-2 shrink-0;
   }
 
   .fragment-widget__content {
-    @apply p-0 overflow-visible;
+    @apply p-0 overflow-visible min-w-0;
+  }
+
+  .fragment-widget__footer {
+    @apply -mx-5 -mb-5 mt-auto px-5 py-3 border-t border-separator text-xs text-muted;
+  }
+
+  .fragment-widget--padding-sm {
+    @apply p-4 gap-3;
+
+    .fragment-widget__footer {
+      @apply -mx-4 -mb-4 px-4;
+    }
+  }
+
+  /* Edge-to-edge content: the header keeps its inset, the body does not. */
+  .fragment-widget--flush {
+    @apply p-0 gap-0;
+
+    .fragment-widget__header {
+      @apply px-5 pt-5 pb-4;
+    }
+
+    .fragment-widget__footer {
+      @apply mx-0 mb-0;
+    }
   }
 
   .fragment-widget--sm {
@@ -26,4 +67,8 @@
   .fragment-widget--lg {
     @apply col-span-1 lg:col-span-2 2xl:col-span-3;
   }
+
+  .fragment-widget--full {
+    @apply col-span-full;
+  }
 }