aplance-ui 1.4.0 → 1.5.1

package/registry/components/ui/accordion/accordion.tsx

@@ -9,6 +9,7 @@ import {
 import clsx from "clsx";
 import { IconChevronDown } from "@tabler/icons-react";
 import { useResizeObserver } from "../../../hooks/useResizeObserver";
+import { Button } from "../button/button";
 import s from "./accordion.module.css";
 
 export type AccordionVariant = "bordered" | "minimal";
@@ -17,12 +18,23 @@ export type AccordionMode = "single" | "multiple";
 
 export type AccordionSize = "sm" | "md" | "lg";
 
+/**
+ * How an item opens. icon: the whole heading, with a chevron in it. button:
+ * the heading too, with a bordered chevron button at its end, as a table row
+ * ends in its menu button.
+ */
+export type AccordionToggle = "icon" | "button";
+
 export type AccordionItem = {
   id: string;
   title: ReactNode;
   content: ReactNode;
   disabled?: boolean;
   defaultOpen?: boolean;
+  /** Controls beside the heading, outside the button that opens it: a row's menu. */
+  actions?: ReactNode;
+  /** This item's own class, beside `itemClassName`: one marked apart from the rest. */
+  className?: string;
 };
 
 type AccordionBaseProps = {
@@ -35,6 +47,7 @@ type AccordionBaseProps = {
   size?: AccordionSize;
   icon?: ReactNode;
   iconRotation?: number;
+  toggle?: AccordionToggle;
 };
 
 type AccordionSingleProps = {
@@ -80,6 +93,7 @@ type ItemViewProps = {
   size: AccordionSize;
   variant: AccordionVariant;
   icon?: ReactNode;
+  toggle: AccordionToggle;
   itemClassName?: string;
   triggerClassName?: string;
   contentClassName?: string;
@@ -114,6 +128,7 @@ const AccordionItemView = ({
   size,
   variant,
   icon,
+  toggle,
   itemClassName,
   triggerClassName,
   contentClassName,
@@ -138,6 +153,13 @@ const AccordionItemView = ({
 
   useResizeObserver(contentRef, updateHeight, { enabled: isOpen });
 
+  const chevron = icon ?? (
+    <IconChevronDown size={size === "sm" ? 16 : size === "lg" ? 20 : 18} />
+  );
+  // With actions or a toggle button, the heading is a row: the button that
+  // opens the item, then the controls beside it, outside that button.
+  const row = toggle === "button" || item.actions !== undefined;
+
   return (
     <section
       className={clsx(
@@ -146,42 +168,90 @@ const AccordionItemView = ({
         isOpen && s.item_open,
         item.disabled && s.item_disabled,
         itemClassName,
+        item.className,
       )}
       data-state={isOpen ? "open" : "closed"}
     >
-      <button
-        id={triggerId}
-        type="button"
-        disabled={item.disabled}
-        aria-expanded={isOpen}
-        aria-controls={panelId}
-        onClick={onToggle}
-        className={clsx(
-          s.trigger,
-          s[`trigger_${size}`],
-          s[`trigger_${variant}`],
-          isOpen && s.trigger_open,
-          triggerClassName,
-        )}
-      >
-        <span className={clsx(s.title, s[`title_${size}`])}>{item.title}</span>
-        <span
-          className={clsx(s.icon, isOpen && s.icon_open)}
-          aria-hidden="true"
+      {row ? (
+        <div
+          className={clsx(
+            s.header,
+            s[`trigger_${size}`],
+            s[`header_${variant}`],
+            isOpen && s.trigger_open,
+          )}
         >
-          {icon ?? (
-            <IconChevronDown
-              size={size === "sm" ? 16 : size === "lg" ? 20 : 18}
-            />
+          <button
+            id={triggerId}
+            type="button"
+            disabled={item.disabled}
+            aria-expanded={isOpen}
+            aria-controls={panelId}
+            onClick={onToggle}
+            className={clsx(s.trigger, s.header_trigger, triggerClassName)}
+          >
+            <span className={clsx(s.title, s[`title_${size}`])}>{item.title}</span>
+            {toggle === "icon" ? (
+              <span
+                className={clsx(s.icon, isOpen && s.icon_open)}
+                aria-hidden="true"
+              >
+                {chevron}
+              </span>
+            ) : null}
+          </button>
+          {item.actions !== undefined ? (
+            <div className={s.actions}>{item.actions}</div>
+          ) : null}
+          {toggle === "button" ? (
+            <Button
+              type="button"
+              variant="bordered"
+              size="sm"
+              layout="box"
+              aria-label={isOpen ? "Collapse section" : "Expand section"}
+              aria-expanded={isOpen}
+              aria-controls={panelId}
+              disabled={item.disabled}
+              onClick={onToggle}
+              className={clsx(s.toggle, isOpen && s.toggle_open)}
+            >
+              {chevron}
+            </Button>
+          ) : null}
+        </div>
+      ) : (
+        <button
+          id={triggerId}
+          type="button"
+          disabled={item.disabled}
+          aria-expanded={isOpen}
+          aria-controls={panelId}
+          onClick={onToggle}
+          className={clsx(
+            s.trigger,
+            s[`trigger_${size}`],
+            s[`trigger_${variant}`],
+            isOpen && s.trigger_open,
+            triggerClassName,
           )}
-        </span>
-      </button>
+        >
+          <span className={clsx(s.title, s[`title_${size}`])}>{item.title}</span>
+          <span
+            className={clsx(s.icon, isOpen && s.icon_open)}
+            aria-hidden="true"
+          >
+            {chevron}
+          </span>
+        </button>
+      )}
 
       <div
         id={panelId}
         role="region"
         aria-labelledby={triggerId}
         aria-hidden={!isOpen}
+        inert={!isOpen}
         className={clsx(s.panel, isOpen && s.panel_open)}
         style={{ height: `${panelHeight}px` }}
       >
@@ -212,6 +282,7 @@ export const Accordion = ({
   size = "md",
   icon,
   iconRotation = 180,
+  toggle = "icon",
   ...variantProps
 }: AccordionProps) => {
   const uid = useId();
@@ -317,6 +388,7 @@ export const Accordion = ({
           size={size}
           variant={variant}
           icon={icon}
+          toggle={toggle}
           itemClassName={itemClassName}
           triggerClassName={triggerClassName}
           contentClassName={contentClassName}

package/registry/components/ui/avatar/avatar.tsx

@@ -17,10 +17,10 @@ const COLORS = [
   { bg: "oklch(0.92 0.06 85)", fg: "oklch(0.4 0.15 85)" },
   { bg: "oklch(0.92 0.05 25)", fg: "oklch(0.4 0.15 25)" },
   { bg: "oklch(0.92 0.05 330)", fg: "oklch(0.4 0.15 330)" },
-];
+] as const;
 
 export function Avatar({ name, size = "md", className }: AvatarProps) {
-  const color = COLORS[hashName(name) % COLORS.length];
+  const color = COLORS[hashName(name) % COLORS.length] ?? COLORS[0];
   const initials = getInitials(name) || "?";
   return (
     <div

package/registry/components/ui/breadcrumbs/breadcrumbs.module.css

@@ -9,8 +9,7 @@
   --breadcrumbs-color-current: var(--color-foreground);
   --breadcrumbs-color-separator: var(--color-muted-foreground);
   --breadcrumbs-font-size: var(--font-size-sm);
-  --breadcrumbs-gap: var(--spacing-3);
-  --breadcrumbs-padding: var(--spacing-2) var(--spacing-3);
+  --breadcrumbs-gap: var(--spacing-5);
 
   display: block;
   width: 100%;
@@ -22,8 +21,7 @@
 
 .size_sm {
   --breadcrumbs-font-size: var(--font-size-xs);
-  --breadcrumbs-gap: var(--spacing-2);
-  --breadcrumbs-padding: var(--spacing-1) var(--spacing-2);
+  --breadcrumbs-gap: var(--spacing-4);
 }
 
 /* ─── List ───────────────────────────────────────────────────────────────── */
@@ -45,15 +43,18 @@
   min-width: 0;
 }
 
-/* ─── Crumb (link / button / span) ───────────────────────────────────────── */
+/* ─── Crumb (link / button / span) ───────────────────────────────────────────
+   A text link, not a button: no padding or hover fill, so every crumb sits on
+   the same edge as the content under it. Hover darkens the text.
+   ─────────────────────────────────────────────────────────────────────────── */
 
 .crumb {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-2);
   min-width: 0;
-  padding: var(--breadcrumbs-padding);
-  border-radius: var(--radius-md);
+  padding: 0;
+  border-radius: var(--radius-sm);
   color: inherit;
   background-color: transparent;
   font: inherit;
@@ -62,7 +63,7 @@
   white-space: nowrap;
   cursor: default;
   transition: var(--transition-fast);
-  transition-property: background-color, color;
+  transition-property: color;
 }
 
 .crumb_link {
@@ -71,7 +72,6 @@
 
   &:hover {
     color: var(--breadcrumbs-color-hover);
-    background-color: var(--color-muted);
   }
 
   &:focus-visible {

package/registry/components/ui/button/button.module.css

@@ -1,4 +1,4 @@
-.base {
+.base {
   --button-fg: var(--color-foreground);
   --button-placeholder: var(--button-fg);
   --button-icon: var(--button-fg);
@@ -11,7 +11,9 @@
   min-height: var(--spacing-11);
   border-radius: var(--radius-md);
   display: flex;
-  min-width: fit-content;
+  /* Never narrower than its label, unless the host sets the variable (a
+     full-width field trigger sets 0, so its label truncates). */
+  min-width: var(--button-min-width, fit-content);
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-4);
@@ -24,7 +26,7 @@
   outline: none;
   border: none;
 
-  line-height: 1.125;
+  line-height: 1.125;
 
   svg {
     cursor: pointer;
@@ -36,12 +38,16 @@
     font-size: var(--font-size-xs);
   }
 
-  &.box {
+  /* An icon button: as wide as it is high, its own size and never its
+     content's (the base keeps a button at least as wide as its content), so
+     a round one stays round; the icon sits in its middle. */
+  &.box {
     width: var(--spacing-11);
+    min-width: 0;
     min-height: unset;
     justify-content: center;
     height: var(--spacing-11);
-    padding: var(--spacing-2);
+    padding: 0;
 
     &.sm {
       width: var(--spacing-10);
@@ -183,6 +189,38 @@
   }
 }
 
+/* Same pattern - danger is the soft red a Badge's error tone uses, for an
+   action that cannot be taken back: deleting, purging, removing. It reads in
+   both themes from the error tokens alone. */
+:is(.danger, .tone_danger) {
+  --button-fg: var(--color-error-foreground);
+  --button-placeholder: var(--color-error-foreground);
+  --button-icon: var(--color-error-foreground);
+}
+
+.danger {
+  background-color: var(--color-error-subtle);
+  border: 1px solid
+    color-mix(in oklch, var(--color-error-foreground) 24%, var(--color-border));
+  color: var(--button-fg);
+  box-shadow: var(--shadow-sm);
+
+  svg {
+    color: var(--button-icon);
+  }
+
+  &:hover:not(.disabled),
+  &:active:not(.disabled),
+  &.input_focus:focus,
+  &.active {
+    background-color: color-mix(
+      in oklch,
+      var(--color-error-foreground) 14%,
+      var(--color-error-subtle)
+    );
+  }
+}
+
 /* Same pattern - ghost is transparent background; tone alias lets composing
    components inherit these vars without applying the full ghost layout rules. */
 :is(.ghost, .tone_ghost) {

package/registry/components/ui/button/button.tsx

@@ -12,7 +12,8 @@ export type ButtonVariant =
   | "secondary"
   | "bordered"
   | "border_b"
-  | "ghost";
+  | "ghost"
+  | "danger";
 export type ButtonSize = "default" | "sm";
 export type ButtonLayout = "default" | "box";
 export type AsProp = "button" | "div" | "span" | "link";

package/registry/components/ui/copy-button/copy-button.module.css

@@ -1,6 +1,8 @@
+/* A fixed control: long text beside it, as in a table cell, never squeezes it. */
 .base {
   display: inline-flex;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .icon {

package/registry/components/ui/data-table/data-table.module.css

@@ -181,6 +181,12 @@
   scrollbar-gutter: auto;
 }
 
+/* The columns fit (`columnsFit` in data-table.tsx): nothing to scroll to
+   sideways, so a sub-pixel overhang can't raise a horizontal scrollbar. */
+.table_body_wrap[data-fits="true"] {
+  overflow-x: hidden;
+}
+
 /* ─────────────────────────────────────────────
    Shared <table> - header wrap + body wrap.
    table-layout:fixed + identical widths = perfect column alignment.
@@ -209,6 +215,16 @@
   tbody tr {
     transition: background var(--transition-fast);
 
+    /* The last row's line is a shadow, not a border. A shadow never adds to
+       the body's scroll height, and the body clips it at its own edge: with
+       space left under the rows it closes them, and where the rows reach the
+       body's border it is cut off instead of drawing a second line there.
+       Placed before the drop target, which wins on a last row. */
+    &:last-child td {
+      border-bottom: none;
+      box-shadow: 0 var(--border-1) 0 var(--color-border);
+    }
+
     &:hover td {
       background: var(--color-secondary);
     }
@@ -589,55 +605,59 @@
   flex-shrink: 0;
   margin-top: auto;
   width: 100%;
+  min-width: 0;
   display: flex;
+  /* The count and the controls share a row while both fit; past that the
+     controls take a row of their own below. Nothing scrolls or clips. */
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-8);
-  min-width: 0;
-  /* When the count + controls can't fit, the WHOLE bar scrolls horizontally as
-     one strip rather than wrapping or clipping. The outlet hides X overflow, so
-     letting a cluster shrink would just clip the nav buttons - scroll the bar
-     instead. `space-between` still spreads them when there IS room. The vertical
-     padding gives the buttons' focus rings room so `overflow-x: auto` (which also
-     clips the Y axis) doesn't crop them. */
-  overflow-x: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-border) transparent;
-  padding-block: var(--spacing-2);
-
-  > * {
-    flex-shrink: 0;
-  }
+  column-gap: var(--spacing-8);
+  row-gap: var(--spacing-4);
 }
 
 @media (--sm) {
   .pagination_bar {
-    gap: var(--spacing-5);
+    column-gap: var(--spacing-5);
   }
 }
 
-.pagination_bar_loading {
-  flex-wrap: wrap;
-  row-gap: var(--spacing-4);
-}
-
 .loading_select_skeleton {
   border-radius: var(--radius-sm);
   flex-shrink: 0;
 }
 
+/* The count, then what a page adds beside it, like the actions on ticked
+   rows. The block sizes from nothing and never below its count, so the
+   controls wrap only once the count alone and they cannot share a row; on
+   their row it takes what the controls leave, and its extra scrolls there. */
 .pagination_left {
   display: flex;
   align-items: center;
   gap: var(--spacing-8);
-  min-width: 0;
+  flex: 1 1 0;
+  min-width: min-content;
 }
 
 .pagination_left_loading {
   overflow: hidden;
 }
 
+/* The extra slot, a ScrollRail: it takes what the count leaves on the row
+   and scrolls across on its own, with no scrollbar, so the bar never changes
+   height. Its items claim no width of the row (inline-size containment):
+   however many there are, the controls keep their place beside the count. */
+.pagination_extra {
+  flex: 1 1 0;
+  contain: inline-size;
+}
+
+.pagination_extra_items {
+  gap: var(--spacing-4);
+}
+
 .pagination_count {
+  flex-shrink: 0;
   font-size: var(--font-size-sm);
   color: var(--color-muted-foreground);
   white-space: nowrap;
@@ -650,14 +670,37 @@
 
 .pagination_controls {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: var(--spacing-8);
+  justify-content: flex-end;
+  column-gap: var(--spacing-8);
+  row-gap: var(--spacing-4);
   min-width: 0;
 }
 
+/* A phone gives the controls a row of their own: the page size at its start,
+   the pages at its end. The size keeps its label for screen readers only, and
+   the first/last buttons go: prev/next and the page number say as much. */
 @media (--sm) {
   .pagination_controls {
-    gap: var(--spacing-5);
+    flex-basis: 100%;
+    column-gap: var(--spacing-5);
+  }
+
+  .page_size_wrap {
+    margin-inline-end: auto;
+  }
+
+  .page_size_label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+
+  .page_nav_edge {
+    display: none;
   }
 }