@fragment-build/ui 3.2.3 → 4.0.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

@@ -4,27 +4,30 @@
   }
 
   .fragment-sidebar__collapsed {
-    @apply fixed top-0 left-0 border-r border-border flex flex-col h-screen gap-8 transition-all;
+    @apply fixed top-0 left-0 border-r border-border bg-sidebar text-sidebar-foreground
+           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 flex flex-col h-screen gap-8 overflow-hidden transition-all;
+    @apply fixed top-0 left-0 border-r border-border bg-sidebar text-sidebar-foreground
+           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 {
@@ -32,15 +35,18 @@
   }
 
   .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 {
-    @apply fixed md:hidden z-50 bottom-0 bg-background flex w-full gap-2 px-2 py-1 border-t border-border;
+    @apply fixed md:hidden z-50 bottom-0 bg-sidebar text-sidebar-foreground flex w-full gap-2 px-2 py-1 border-t border-border;
     & > *:nth-child(n+5):not(:last-child) {
       @apply hidden;
     }
@@ -67,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;
     }
   }
 
@@ -104,26 +110,40 @@
   }
 
   .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
-           text-foreground transition-colors;
+    @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"] {
-      @apply bg-default!;
+      /* `--default` is a page-level palette colour; opt out per-rail with `--sidebar-default`. */
+      background-color: var(--sidebar-default, var(--default)) !important;
     }
     & > .fragment-sidebar__accordion-label {
       @apply flex-1 text-left;
@@ -131,7 +151,7 @@
   }
 
   .fragment-sidebar__accordion-trigger--active {
-    @apply text-accent-soft-foreground;
+    color: var(--sidebar-accent-soft-foreground, var(--accent-soft-foreground));
   }
 
   .fragment-sidebar__accordion-trigger .accordion__indicator {
@@ -149,7 +169,7 @@
     @apply relative pl-7;
     &::before {
       content: '';
-      @apply absolute top-0 bottom-0 w-px bg-foreground opacity-15 rounded-full left-5;
+      @apply absolute top-0 bottom-0 w-px bg-sidebar-foreground opacity-15 rounded-full left-5;
     }
     .list-box {
       @apply overflow-visible;
@@ -157,14 +177,16 @@
   }
 
   .fragment-sidebar__nav-item--active {
-    @apply bg-accent-soft! text-accent-soft-foreground!;
+    /* `--accent-soft` is translucent, so it composites over the rail, not the page. */
+    @apply bg-accent-soft! font-medium!;
+    color: var(--sidebar-accent-soft-foreground, var(--accent-soft-foreground)) !important;
   }
 
   .fragment-sidebar__sub-item {
     @apply pl-8! relative;
     &::before {
       content: '';
-      @apply absolute -left-3 ml-px top-1/2 -translate-y-1/2 w-3 h-px bg-foreground opacity-15;
+      @apply absolute -left-3 ml-px top-1/2 -translate-y-1/2 w-3 h-px bg-sidebar-foreground opacity-15;
     }
   }
 
@@ -175,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;
@@ -190,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;
     }
   }
 
@@ -205,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;
+  }
 }

package/src/index.css

@@ -1,37 +1,65 @@
-@theme {
-  --text-xs: 13px;
-  --text-sm: 15px;
+/*
+ * Type scale.
+ *
+ * Tailwind's own steps (12 / 14 / 16). Fragment used to pin `text-xs` to 13px and `text-sm` to
+ * 15px, which made every HeroUI control one step larger than the component library was drawn for
+ * and pushed dashboards towards a consumer-app density. Body copy is set to `text-sm` below, which
+ * is the size HeroUI's fields, list boxes and tables already use, so running text and controls now
+ * share one size.
+ */
+
+/*
+ * Fragment surface roles.
+ *
+ * `inline` so the utilities compile to `var(--sidebar)` / `var(--navbar)` and are
+ * therefore resolved on the element, not frozen at `:root`. Each falls back to the
+ * page role, so a theme that never declares them renders exactly as before.
+ */
+@theme inline {
+  --color-sidebar: var(--sidebar, var(--background));
+  --color-sidebar-foreground: var(--sidebar-foreground, var(--foreground));
+
+  --color-navbar: var(--navbar, var(--background));
+  --color-navbar-foreground: var(--navbar-foreground, var(--foreground));
 }
 
 @layer base {
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground text-sm antialiased;
   }
 
+  /*
+   * Page title, section, card. A dashboard has many more card titles than page titles, so the
+   * steps are tight and the weight carries the hierarchy rather than the size.
+   */
   h1 {
-    @apply text-3xl font-semibold;
+    @apply text-2xl font-semibold tracking-tight;
   }
 
   h2 {
-    @apply text-2xl font-semibold;
+    @apply text-lg font-semibold tracking-tight;
   }
 
   h3 {
-    @apply text-xl font-semibold;
+    @apply text-base font-semibold;
+  }
+
+  h4 {
+    @apply text-sm font-semibold;
   }
 }
 
 @layer components {
+  /*
+   * Fields keep HeroUI's own height and padding. They get a hairline border instead of the
+   * default shadow, so a form reads as a set of crisp boxes on a flat surface.
+   */
   .input, .textarea, .select__trigger {
-    @apply border border-border px-6 py-4 shadow-none;
+    @apply border border-border shadow-none;
   }
 
-  .input-group, .search-field__group, .number-field__group{
-    @apply border border-border shadow-none h-auto;
-
-    .input-group__input, .search-field__input, .number-field__input {
-      @apply px-6 py-4;
-    }
+  .input-group, .search-field__group, .number-field__group {
+    @apply border border-border shadow-none;
   }
 
   .slider {
@@ -50,14 +78,6 @@
     }
   }
 
-  .select__indicator {
-    @apply right-4;
-  }
-
-  .select__trigger:has(.select__indicator) {
-    @apply pr-10;
-  }
-
   .select__popover {
     @apply rounded-xl;
   }
@@ -65,18 +85,18 @@
   .tabs {
     &:not(.tabs--secondary) {
       .tabs__list {
-        @apply bg-surface p-0;
-        
-        border-radius: calc(var(--radius-3xl) + 0.25rem);
+        @apply bg-default p-1;
+
+        border-radius: calc(var(--radius-xl) + 0.25rem);
       }
 
       .tabs__indicator {
-        @apply shadow-none bg-surface-tertiary;
+        @apply bg-surface shadow-sm;
       }
 
       .tabs__tab {
         &[data-selected="true"] {
-          @apply text-surface-tertiary-foreground;
+          @apply text-surface-foreground;
         }
       }
 
@@ -86,7 +106,7 @@
     }
 
     .tabs__tab {
-      @apply h-10 px-6 text-xs text-nowrap;
+      @apply h-8 px-4 text-sm text-nowrap;
     }
 
     .tabs__list {
@@ -95,25 +115,89 @@
       }
     }
 
+    /* Underline tabs size to their label, so a short list sits left instead of spreading out. */
     &.tabs--secondary {
+      .tabs__list[data-orientation="horizontal"] {
+        @apply gap-6;
+      }
+
       .tabs__tab {
-        @apply h-12 px-10;
+        @apply h-11 w-auto min-w-0 px-0.5 gap-2;
+        & svg {
+          @apply size-4;
+        }
+
+        /*
+         * A static underline for tab lists that render no <Tabs.Indicator>. The animated indicator
+         * slides from the previous tab with an inline translate, and when the selection is decided
+         * during hydration (a tab read from the URL) its first frame can stick, leaving the line
+         * under the wrong tab.
+         */
+        &[data-selected="true"]:not(:has(.tabs__indicator))::after {
+          content: '';
+          @apply absolute inset-x-0 bottom-0 h-0.5 bg-accent;
+        }
       }
     }
   }
 
-  .card {
-    @apply border border-border shadow-none;
-  }
+  /*
+   * The primary table as one flat card: a hairline frame, a header band and row dividers, instead
+   * of HeroUI's grey frame with a white card inset in it — which on a tinted page reads as a box
+   * in a box. Rows get a visible hover, since the default (`surface` at 40%) vanishes on white.
+   */
+  .table-root--primary {
+    @apply border border-border bg-surface p-0;
+
+    border-radius: var(--radius-3xl);
+    box-shadow: var(--fragment-card-shadow, none);
 
-  .button {
-    &.button--md:not(.button--icon-only) {
-      @apply h-12 px-6;
+    .table__column {
+      @apply py-2.5 whitespace-nowrap;
 
-      @media (width >= 48rem) {
-        @apply h-12 px-6;
+      &::after {
+        content: none;
       }
     }
+
+    .table__header {
+      @apply border-b border-separator;
+    }
+
+    .table__body tr td {
+      border-radius: 0 !important;
+    }
+
+    .table__cell {
+      @apply border-b border-separator;
+    }
+
+    .table__body tr:last-child .table__cell {
+      @apply border-b-0;
+    }
+
+    .table__row {
+      @media (hover: hover) {
+        &:hover .table__cell,
+        &[data-hovered="true"] .table__cell {
+          @apply bg-surface-secondary;
+        }
+      }
+    }
+
+    .table__footer {
+      @apply border-t border-separator;
+    }
+  }
+
+  /*
+   * Cards sit apart from the page by a hairline and an optional, very soft lift. The lift is a
+   * token so a theme on a white page (where the border is all there is) can turn it off.
+   */
+  .card {
+    @apply border border-border;
+
+    box-shadow: var(--fragment-card-shadow, none);
   }
 }
 
@@ -124,10 +208,15 @@
 @import "./fragments/widget/widget.css";
 @import "./components/grid/grid.css";
 @import "./components/multi-switch/multi-switch.css";
+@import "./components/segmented-control/segmented-control.css";
 @import "./components/code/code.css";
 @import "./components/code-snippet/code-snippet.css";
 @import "./fragments/form/form.css";
 @import "./fragments/form/form-section.css";
+@import "./fragments/form/form-card.css";
+@import "./fragments/save-bar/save-bar.css";
+@import "./fragments/stat/stat-card.css";
+@import "./fragments/empty-state/empty-state.css";
 
 .light,
 .default,
@@ -137,6 +226,12 @@
   --background: #fff;
   --border: rgba(0, 0, 0, 0.07);
   --surface-secondary: rgba(0, 0, 0, 0.02);
+
+  /* Fragment surfaces: default to the page surface */
+  --sidebar: var(--background);
+  --sidebar-foreground: var(--foreground);
+  --navbar: var(--background);
+  --navbar-foreground: var(--foreground);
 }
 
 .dark,
@@ -146,6 +241,12 @@
   --foreground: var(--snow);
   --border: rgba(255, 255, 255, 0.07);
   --surface-secondary: rgba(255, 255, 255, 0.02);
+
+  /* Fragment surfaces: default to the page surface */
+  --sidebar: var(--background);
+  --sidebar-foreground: var(--foreground);
+  --navbar: var(--background);
+  --navbar-foreground: var(--foreground);
 }
 
 /* @import "./theme.example.css"; */

package/src/theme.example.css

@@ -43,6 +43,23 @@
   --surface-tertiary: rgba(0, 0, 0, 0.9);
   --surface-tertiary-foreground: #FCFAF6;
 
+  /*
+   * Fragment surfaces — Sidebar / Navbar.
+   * Omit them and each fragment stays on the page surface, exactly as before.
+   * Set --sidebar to give the rail its own ground; --sidebar-foreground moves the ink with it.
+   */
+  --sidebar: #F7F5F0;
+  --sidebar-foreground: var(--foreground);
+  --navbar: var(--background);
+  --navbar-foreground: var(--foreground);
+
+  /*
+   * Optional. The states inside the rail are page-level palette roles, so they do not
+   * follow --sidebar on their own. Set these when the rail contrasts with the page.
+   */
+  /* --sidebar-default: rgba(0, 0, 0, 0.04); */
+  /* --sidebar-accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--sidebar-foreground) 30%); */
+
   --success: oklch(73.29% 0.1968 123.30);
   --success-foreground: rgba(0, 0, 0, 0.9);
   --warning: oklch(78.19% 0.1612 44.82);
@@ -91,6 +108,15 @@
   --surface-secondary-foreground: oklch(99.11% 0.0000 24.57);
   --surface-tertiary: oklch(27.21% 0.0000 24.57);
   --surface-tertiary-foreground: oklch(99.11% 0.0000 24.57);
+
+  /* Fragment surfaces — Sidebar / Navbar */
+  --sidebar: oklch(16.00% 0.0000 24.57);
+  --sidebar-foreground: var(--foreground);
+  --navbar: var(--background);
+  --navbar-foreground: var(--foreground);
+
+  /* --sidebar-default: rgba(255, 255, 255, 0.06); */
+  /* --sidebar-accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--sidebar-foreground) 30%); */
   --warning: oklch(82.03% 0.1388 48.83);
   --warning-foreground: oklch(21.03% 0.0059 48.83);
 }