@crisp-ui-kit/crisp 0.33.5 → 0.35.0

package/dist/styles.css

@@ -122,90 +122,6 @@
   --crisp-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
 }
 
-/* -----------------------------------------------------------------
- * Deprecated unprefixed aliases (issue #276) — SCHEDULED FOR REMOVAL in
- * the next major version. Prefer the --crisp-* custom property
- * above; these only forward to it so an existing override keeps working.
- * ----------------------------------------------------------------- */
-:root {
-  --bg-brand-solid: var(--crisp-bg-brand-solid);
-  --bg-brand-solid-pressed: var(--crisp-bg-brand-solid-pressed);
-  --fg-on-brand: var(--crisp-fg-on-brand);
-  --fg-on-tone: var(--crisp-fg-on-tone);
-  --bg-surface: var(--crisp-bg-surface);
-  --bg-raised: var(--crisp-bg-raised);
-  --border-default: var(--crisp-border-default);
-  --border-subtle: var(--crisp-border-subtle);
-  --ring-neutral: var(--crisp-ring-neutral);
-  --bg-tile-active: var(--crisp-bg-tile-active);
-  --shadow-tile-active: var(--crisp-shadow-tile-active);
-  --bg-overlay-frost: var(--crisp-bg-overlay-frost);
-  --shadow-overlay1: var(--crisp-shadow-overlay1);
-  --shadow-overlay2: var(--crisp-shadow-overlay2);
-  --shadow-overlay3: var(--crisp-shadow-overlay3);
-  --bg-popover: var(--crisp-bg-popover);
-  --ring-popover: var(--crisp-ring-popover);
-  --shadow-popover1: var(--crisp-shadow-popover1);
-  --shadow-popover2: var(--crisp-shadow-popover2);
-  --shadow-popover3: var(--crisp-shadow-popover3);
-  --fg-primary: var(--crisp-fg-primary);
-  --fg-muted: var(--crisp-fg-muted);
-  --bg-danger: var(--crisp-bg-danger);
-  --bg-danger-solid: var(--crisp-bg-danger-solid);
-  --stroke-field-focus: var(--crisp-stroke-field-focus);
-  --fg-disabled: var(--crisp-fg-disabled);
-  --bg-neutral-weak: var(--crisp-bg-neutral-weak);
-  --bg-neutral-inverted: var(--crisp-bg-neutral-inverted);
-  --fg-on-neutral-inverted: var(--crisp-fg-on-neutral-inverted);
-  --fg-neutral-subtle: var(--crisp-fg-neutral-subtle);
-  --fg-neutral-muted: var(--crisp-fg-neutral-muted);
-  --stroke-focus-ring: var(--crisp-stroke-focus-ring);
-  --bg-success: var(--crisp-bg-success);
-  --bg-warning: var(--crisp-bg-warning);
-  --bg-orange: var(--crisp-bg-orange);
-  --bg-cyan: var(--crisp-bg-cyan);
-  --bg-purple: var(--crisp-bg-purple);
-  --bg-sidebar: var(--crisp-bg-sidebar);
-  --bg-subtle: var(--crisp-bg-subtle);
-  --space-1: var(--crisp-space-1);
-  --space-2: var(--crisp-space-2);
-  --space-3: var(--crisp-space-3);
-  --space-4: var(--crisp-space-4);
-  --space-5: var(--crisp-space-5);
-  --space-6: var(--crisp-space-6);
-  --space-8: var(--crisp-space-8);
-  --space-px: var(--crisp-space-px);
-  --space-0-5: var(--crisp-space-0-5);
-  --space-1-5: var(--crisp-space-1-5);
-  --space-2-5: var(--crisp-space-2-5);
-  --radius-chip: var(--crisp-radius-chip);
-  --radius-sm: var(--crisp-radius-sm);
-  --radius-md: var(--crisp-radius-md);
-  --radius-lg: var(--crisp-radius-lg);
-  --radius-xl: var(--crisp-radius-xl);
-  --radius-2xl: var(--crisp-radius-2xl);
-  --radius-full: var(--crisp-radius-full);
-  --size-icon: var(--crisp-size-icon);
-  --size-chip: var(--crisp-size-chip);
-  --size-row: var(--crisp-size-row);
-  --size-menuRow: var(--crisp-size-menuRow);
-  --size-tableRow: var(--crisp-size-tableRow);
-  --size-tableHeader: var(--crisp-size-tableHeader);
-  --size-header: var(--crisp-size-header);
-  --size-calendarCell: var(--crisp-size-calendarCell);
-  --size-calendarPill: var(--crisp-size-calendarPill);
-  --text-xs: var(--crisp-text-xs);
-  --text-sm: var(--crisp-text-sm);
-  --text-md: var(--crisp-text-md);
-  --text-lg: var(--crisp-text-lg);
-  --text-xl: var(--crisp-text-xl);
-  --weight-regular: var(--crisp-weight-regular);
-  --weight-medium: var(--crisp-weight-medium);
-  --weight-semibold: var(--crisp-weight-semibold);
-  --weight-bold: var(--crisp-weight-bold);
-  --font-sans: var(--crisp-font-sans);
-}
-
 .crisp-accordion {
   display: flex; flex-direction: column; font-family: var(--crisp-font-sans);
     & .crisp-accordion-item { border-bottom: 1px solid var(--crisp-border-subtle); }
@@ -595,6 +511,8 @@
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
     & .crisp-table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
+    /* mirror of the rule above, for stickyLast's trailing column (#327) */
+    & .crisp-table-scroll[data-scrolled-x-end] [data-sticky-edge-end] { clip-path: inset(0 0 0 -38px); box-shadow: -6px 0 16px 4px rgba(0,0,0,0.12); }
     /* add-row + summary footer */
     & .crisp-datatable-addcell { padding: 0; border-top: none; }
     & .crisp-datatable-addrow { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border: none; border-top: 1px solid var(--crisp-border-subtle); background: var(--crisp-bg-surface); color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); cursor: pointer; transition: background-color .12s; }
@@ -618,7 +536,12 @@
     & .crisp-datatable-entity { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
     & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: var(--crisp-radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
-    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); } & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); } & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); } & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); } & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); } & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); }
+    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); }
+    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); }
+    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); }
+    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); }
+    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
     & .crisp-datatable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
@@ -631,10 +554,11 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
-    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
-       a leading 20px grip column, a 16px grip icon, and the row's own hairline doubling as the drop indicator (it tints toward the brand colour as the active drop target). The affordance + geometry are measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
-       draggable + dataTransfer, the same one column reorder already uses
-       (RecordsTable's reorderColumn) -- not a proprietary pointer-events implementation. */
+    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures a leading 20px grip column, a 16px grip icon, and the row's own
+       hairline doubling as the drop indicator (it tints toward the brand
+       colour as the active drop target). The affordance + geometry are
+       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5 draggable + dataTransfer, the same one column reorder already uses (RecordsTable's reorderColumn) -- not a proprietary
+       pointer-events implementation. */
     & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
     & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }
@@ -920,6 +844,68 @@
   }
 }
 
+.crisp-filldoc {
+  display: flex; flex-direction: column; gap: var(--crisp-space-4); box-sizing: border-box; width: 210mm; min-height: 297mm; padding: 20mm; margin: 0 auto; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 22px; color: var(--crisp-fg-primary); border-radius: 0; box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+    &:focus, &:focus-visible { outline: none; }
+    & .crisp-filldoc-block { position: relative; }
+    & .crisp-filldoc-heading { margin: 0; font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); line-height: 26px; color: var(--crisp-fg-primary); white-space: pre-wrap; overflow-wrap: break-word; }
+    & .crisp-filldoc-text { margin: 0; font-size: var(--crisp-text-lg); line-height: 22px; color: var(--crisp-fg-primary); white-space: pre-wrap; overflow-wrap: break-word; }
+    & .crisp-filldoc-writer { display: block; width: 100%; margin: 0; padding: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; resize: none; overflow: hidden; user-select: text; -webkit-user-select: text; }
+    & .crisp-filldoc-insert { position: absolute; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: calc(var(--crisp-space-4) / -2); height: var(--crisp-space-4); display: flex; align-items: center; gap: var(--crisp-space-2); opacity: 0; transition: opacity .1s; cursor: pointer; }
+    & .crisp-filldoc-block:hover .crisp-filldoc-insert, & .crisp-filldoc-insert:focus-within { opacity: 1; }
+    & .crisp-filldoc-insert-rule { flex: 1; height: 1px; background: var(--crisp-border-default); }
+    & .crisp-filldoc-insert button { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-raised); font-family: inherit; font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-filldoc-insert button:hover { background: var(--crisp-bg-neutral-weak); color: var(--crisp-fg-primary); }
+    & .crisp-filldoc-tools { position: absolute; inset-inline-end: 100%; inset-block-start: 0; padding-inline-end: var(--crisp-space-2); display: flex; gap: var(--crisp-space-1); opacity: 0; transition: opacity .1s; }
+    & .crisp-filldoc-block:hover .crisp-filldoc-tools, & .crisp-filldoc-tools:focus-within { opacity: 1; }
+    & .crisp-filldoc-tools button { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: transparent; font-family: inherit; font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-filldoc-tools button:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+}
+.crisp-filldoc--page_a4 {
+  
+}
+.crisp-filldoc--page_auto {
+  width: 100%; min-height: 0; max-width: 210mm;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-filldoc, .crisp-filldoc * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+.crisp-fillsheet {
+  display: grid; grid-template-columns: var(--crisp-fillsheet-cols); grid-template-rows: var(--crisp-fillsheet-rows); position: relative; overflow: auto; max-width: 100%; box-sizing: border-box; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); border-radius: 0; border: 1px solid var(--crisp-border-default); user-select: none; -webkit-user-select: none;
+    &:focus, &:focus-visible { outline: none; }
+    & .crisp-fillsheet-cell { position: relative; display: flex; align-items: flex-start; min-width: 0; padding-inline: var(--crisp-space-3); padding-block: var(--crisp-space-3); border-inline-end: 1px solid var(--crisp-border-default); border-block-end: 1px solid var(--crisp-border-default); background: var(--crisp-bg-surface); white-space: pre-wrap; overflow-wrap: break-word; line-height: 20px; cursor: cell; }
+    & .crisp-fillsheet-cell[aria-readonly] { background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
+    & .crisp-fillsheet-cell:last-child { border-inline-end: none; }
+    & > div:last-child .crisp-fillsheet-cell { border-block-end: none; }
+    & .crisp-fillsheet-cell[data-align="end"] { justify-content: flex-end; font-variant-numeric: tabular-nums; }
+    &[data-multi] .crisp-fillsheet-cell[data-range] { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }
+    &[data-keynav] .crisp-fillsheet-cell[data-selected] { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); box-shadow: inset 0 -2px 0 var(--crisp-fg-primary); }
+    & .crisp-fillsheet-cell[data-editing] { background: var(--crisp-bg-surface); }
+    & .crisp-fillsheet-colresize { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-end: 0; z-index: 3; width: 5px; cursor: col-resize; touch-action: none; }
+    & .crisp-fillsheet-rowresize { position: absolute; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0; z-index: 3; height: 5px; cursor: row-resize; touch-action: none; }
+    & .crisp-fillsheet-colresize:hover { background: linear-gradient(to right, transparent 0, transparent calc(50% - 1px), var(--crisp-fg-primary) calc(50% - 1px), var(--crisp-fg-primary) calc(50% + 1px), transparent calc(50% + 1px)); }
+    & .crisp-fillsheet-rowresize:hover { background: linear-gradient(to bottom, transparent 0, transparent calc(50% - 1px), var(--crisp-fg-primary) calc(50% - 1px), var(--crisp-fg-primary) calc(50% + 1px), transparent calc(50% + 1px)); }
+    & .crisp-fillsheet-editor { display: block; flex-grow: 1; width: 100%; min-width: 0; margin: 0; padding: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: inherit; line-height: 20px; color: inherit; resize: none; user-select: text; -webkit-user-select: text; overflow: hidden; }
+    & .crisp-fillsheet-select .crisp-select-trigger { width: 100%; height: 100%; padding: 0; border: none; background: transparent; box-shadow: none; font: inherit; color: inherit; }
+    & .crisp-fillsheet-select .crisp-select-trigger:hover, & .crisp-fillsheet-select .crisp-select-trigger[data-open] { background: transparent; box-shadow: none; }
+    & .crisp-fillsheet-select .crisp-select-chevron { display: none; }
+}
+.crisp-fillsheet--surface_panel {
+  
+}
+.crisp-fillsheet--surface_paper {
+  box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+}
+.crisp-fillsheet--surface_bare {
+  border: none;
+}
+
 .crisp-formfield {
   display: flex; flex-direction: column; gap: var(--crisp-space-1-5); box-sizing: border-box; font-family: var(--crisp-font-sans);
     & .crisp-formfield-label { display: inline-flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }

package/dist/styles.layered.css

@@ -122,90 +122,6 @@
   --crisp-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
 }
 
-/* -----------------------------------------------------------------
- * Deprecated unprefixed aliases (issue #276) — SCHEDULED FOR REMOVAL in
- * the next major version. Prefer the --crisp-* custom property
- * above; these only forward to it so an existing override keeps working.
- * ----------------------------------------------------------------- */
-:root {
-  --bg-brand-solid: var(--crisp-bg-brand-solid);
-  --bg-brand-solid-pressed: var(--crisp-bg-brand-solid-pressed);
-  --fg-on-brand: var(--crisp-fg-on-brand);
-  --fg-on-tone: var(--crisp-fg-on-tone);
-  --bg-surface: var(--crisp-bg-surface);
-  --bg-raised: var(--crisp-bg-raised);
-  --border-default: var(--crisp-border-default);
-  --border-subtle: var(--crisp-border-subtle);
-  --ring-neutral: var(--crisp-ring-neutral);
-  --bg-tile-active: var(--crisp-bg-tile-active);
-  --shadow-tile-active: var(--crisp-shadow-tile-active);
-  --bg-overlay-frost: var(--crisp-bg-overlay-frost);
-  --shadow-overlay1: var(--crisp-shadow-overlay1);
-  --shadow-overlay2: var(--crisp-shadow-overlay2);
-  --shadow-overlay3: var(--crisp-shadow-overlay3);
-  --bg-popover: var(--crisp-bg-popover);
-  --ring-popover: var(--crisp-ring-popover);
-  --shadow-popover1: var(--crisp-shadow-popover1);
-  --shadow-popover2: var(--crisp-shadow-popover2);
-  --shadow-popover3: var(--crisp-shadow-popover3);
-  --fg-primary: var(--crisp-fg-primary);
-  --fg-muted: var(--crisp-fg-muted);
-  --bg-danger: var(--crisp-bg-danger);
-  --bg-danger-solid: var(--crisp-bg-danger-solid);
-  --stroke-field-focus: var(--crisp-stroke-field-focus);
-  --fg-disabled: var(--crisp-fg-disabled);
-  --bg-neutral-weak: var(--crisp-bg-neutral-weak);
-  --bg-neutral-inverted: var(--crisp-bg-neutral-inverted);
-  --fg-on-neutral-inverted: var(--crisp-fg-on-neutral-inverted);
-  --fg-neutral-subtle: var(--crisp-fg-neutral-subtle);
-  --fg-neutral-muted: var(--crisp-fg-neutral-muted);
-  --stroke-focus-ring: var(--crisp-stroke-focus-ring);
-  --bg-success: var(--crisp-bg-success);
-  --bg-warning: var(--crisp-bg-warning);
-  --bg-orange: var(--crisp-bg-orange);
-  --bg-cyan: var(--crisp-bg-cyan);
-  --bg-purple: var(--crisp-bg-purple);
-  --bg-sidebar: var(--crisp-bg-sidebar);
-  --bg-subtle: var(--crisp-bg-subtle);
-  --space-1: var(--crisp-space-1);
-  --space-2: var(--crisp-space-2);
-  --space-3: var(--crisp-space-3);
-  --space-4: var(--crisp-space-4);
-  --space-5: var(--crisp-space-5);
-  --space-6: var(--crisp-space-6);
-  --space-8: var(--crisp-space-8);
-  --space-px: var(--crisp-space-px);
-  --space-0-5: var(--crisp-space-0-5);
-  --space-1-5: var(--crisp-space-1-5);
-  --space-2-5: var(--crisp-space-2-5);
-  --radius-chip: var(--crisp-radius-chip);
-  --radius-sm: var(--crisp-radius-sm);
-  --radius-md: var(--crisp-radius-md);
-  --radius-lg: var(--crisp-radius-lg);
-  --radius-xl: var(--crisp-radius-xl);
-  --radius-2xl: var(--crisp-radius-2xl);
-  --radius-full: var(--crisp-radius-full);
-  --size-icon: var(--crisp-size-icon);
-  --size-chip: var(--crisp-size-chip);
-  --size-row: var(--crisp-size-row);
-  --size-menuRow: var(--crisp-size-menuRow);
-  --size-tableRow: var(--crisp-size-tableRow);
-  --size-tableHeader: var(--crisp-size-tableHeader);
-  --size-header: var(--crisp-size-header);
-  --size-calendarCell: var(--crisp-size-calendarCell);
-  --size-calendarPill: var(--crisp-size-calendarPill);
-  --text-xs: var(--crisp-text-xs);
-  --text-sm: var(--crisp-text-sm);
-  --text-md: var(--crisp-text-md);
-  --text-lg: var(--crisp-text-lg);
-  --text-xl: var(--crisp-text-xl);
-  --weight-regular: var(--crisp-weight-regular);
-  --weight-medium: var(--crisp-weight-medium);
-  --weight-semibold: var(--crisp-weight-semibold);
-  --weight-bold: var(--crisp-weight-bold);
-  --font-sans: var(--crisp-font-sans);
-}
-
 @layer crisp-components {
 .crisp-accordion {
   display: flex; flex-direction: column; font-family: var(--crisp-font-sans);
@@ -596,6 +512,8 @@
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
     & .crisp-table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
+    /* mirror of the rule above, for stickyLast's trailing column (#327) */
+    & .crisp-table-scroll[data-scrolled-x-end] [data-sticky-edge-end] { clip-path: inset(0 0 0 -38px); box-shadow: -6px 0 16px 4px rgba(0,0,0,0.12); }
     /* add-row + summary footer */
     & .crisp-datatable-addcell { padding: 0; border-top: none; }
     & .crisp-datatable-addrow { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border: none; border-top: 1px solid var(--crisp-border-subtle); background: var(--crisp-bg-surface); color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); cursor: pointer; transition: background-color .12s; }
@@ -619,7 +537,12 @@
     & .crisp-datatable-entity { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
     & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: var(--crisp-radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
-    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); } & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); } & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); } & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); } & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); } & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); }
+    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); }
+    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); }
+    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); }
+    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); }
+    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
     & .crisp-datatable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
@@ -632,10 +555,11 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
-    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
-       a leading 20px grip column, a 16px grip icon, and the row's own hairline doubling as the drop indicator (it tints toward the brand colour as the active drop target). The affordance + geometry are measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
-       draggable + dataTransfer, the same one column reorder already uses
-       (RecordsTable's reorderColumn) -- not a proprietary pointer-events implementation. */
+    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures a leading 20px grip column, a 16px grip icon, and the row's own
+       hairline doubling as the drop indicator (it tints toward the brand
+       colour as the active drop target). The affordance + geometry are
+       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5 draggable + dataTransfer, the same one column reorder already uses (RecordsTable's reorderColumn) -- not a proprietary
+       pointer-events implementation. */
     & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
     & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }
@@ -921,6 +845,68 @@
   }
 }
 
+.crisp-filldoc {
+  display: flex; flex-direction: column; gap: var(--crisp-space-4); box-sizing: border-box; width: 210mm; min-height: 297mm; padding: 20mm; margin: 0 auto; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 22px; color: var(--crisp-fg-primary); border-radius: 0; box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+    &:focus, &:focus-visible { outline: none; }
+    & .crisp-filldoc-block { position: relative; }
+    & .crisp-filldoc-heading { margin: 0; font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); line-height: 26px; color: var(--crisp-fg-primary); white-space: pre-wrap; overflow-wrap: break-word; }
+    & .crisp-filldoc-text { margin: 0; font-size: var(--crisp-text-lg); line-height: 22px; color: var(--crisp-fg-primary); white-space: pre-wrap; overflow-wrap: break-word; }
+    & .crisp-filldoc-writer { display: block; width: 100%; margin: 0; padding: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; resize: none; overflow: hidden; user-select: text; -webkit-user-select: text; }
+    & .crisp-filldoc-insert { position: absolute; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: calc(var(--crisp-space-4) / -2); height: var(--crisp-space-4); display: flex; align-items: center; gap: var(--crisp-space-2); opacity: 0; transition: opacity .1s; cursor: pointer; }
+    & .crisp-filldoc-block:hover .crisp-filldoc-insert, & .crisp-filldoc-insert:focus-within { opacity: 1; }
+    & .crisp-filldoc-insert-rule { flex: 1; height: 1px; background: var(--crisp-border-default); }
+    & .crisp-filldoc-insert button { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-raised); font-family: inherit; font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-filldoc-insert button:hover { background: var(--crisp-bg-neutral-weak); color: var(--crisp-fg-primary); }
+    & .crisp-filldoc-tools { position: absolute; inset-inline-end: 100%; inset-block-start: 0; padding-inline-end: var(--crisp-space-2); display: flex; gap: var(--crisp-space-1); opacity: 0; transition: opacity .1s; }
+    & .crisp-filldoc-block:hover .crisp-filldoc-tools, & .crisp-filldoc-tools:focus-within { opacity: 1; }
+    & .crisp-filldoc-tools button { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: transparent; font-family: inherit; font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-filldoc-tools button:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+}
+.crisp-filldoc--page_a4 {
+  
+}
+.crisp-filldoc--page_auto {
+  width: 100%; min-height: 0; max-width: 210mm;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-filldoc, .crisp-filldoc * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+.crisp-fillsheet {
+  display: grid; grid-template-columns: var(--crisp-fillsheet-cols); grid-template-rows: var(--crisp-fillsheet-rows); position: relative; overflow: auto; max-width: 100%; box-sizing: border-box; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); border-radius: 0; border: 1px solid var(--crisp-border-default); user-select: none; -webkit-user-select: none;
+    &:focus, &:focus-visible { outline: none; }
+    & .crisp-fillsheet-cell { position: relative; display: flex; align-items: flex-start; min-width: 0; padding-inline: var(--crisp-space-3); padding-block: var(--crisp-space-3); border-inline-end: 1px solid var(--crisp-border-default); border-block-end: 1px solid var(--crisp-border-default); background: var(--crisp-bg-surface); white-space: pre-wrap; overflow-wrap: break-word; line-height: 20px; cursor: cell; }
+    & .crisp-fillsheet-cell[aria-readonly] { background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
+    & .crisp-fillsheet-cell:last-child { border-inline-end: none; }
+    & > div:last-child .crisp-fillsheet-cell { border-block-end: none; }
+    & .crisp-fillsheet-cell[data-align="end"] { justify-content: flex-end; font-variant-numeric: tabular-nums; }
+    &[data-multi] .crisp-fillsheet-cell[data-range] { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }
+    &[data-keynav] .crisp-fillsheet-cell[data-selected] { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); box-shadow: inset 0 -2px 0 var(--crisp-fg-primary); }
+    & .crisp-fillsheet-cell[data-editing] { background: var(--crisp-bg-surface); }
+    & .crisp-fillsheet-colresize { position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-end: 0; z-index: 3; width: 5px; cursor: col-resize; touch-action: none; }
+    & .crisp-fillsheet-rowresize { position: absolute; inset-inline-start: 0; inset-inline-end: 0; inset-block-end: 0; z-index: 3; height: 5px; cursor: row-resize; touch-action: none; }
+    & .crisp-fillsheet-colresize:hover { background: linear-gradient(to right, transparent 0, transparent calc(50% - 1px), var(--crisp-fg-primary) calc(50% - 1px), var(--crisp-fg-primary) calc(50% + 1px), transparent calc(50% + 1px)); }
+    & .crisp-fillsheet-rowresize:hover { background: linear-gradient(to bottom, transparent 0, transparent calc(50% - 1px), var(--crisp-fg-primary) calc(50% - 1px), var(--crisp-fg-primary) calc(50% + 1px), transparent calc(50% + 1px)); }
+    & .crisp-fillsheet-editor { display: block; flex-grow: 1; width: 100%; min-width: 0; margin: 0; padding: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: inherit; line-height: 20px; color: inherit; resize: none; user-select: text; -webkit-user-select: text; overflow: hidden; }
+    & .crisp-fillsheet-select .crisp-select-trigger { width: 100%; height: 100%; padding: 0; border: none; background: transparent; box-shadow: none; font: inherit; color: inherit; }
+    & .crisp-fillsheet-select .crisp-select-trigger:hover, & .crisp-fillsheet-select .crisp-select-trigger[data-open] { background: transparent; box-shadow: none; }
+    & .crisp-fillsheet-select .crisp-select-chevron { display: none; }
+}
+.crisp-fillsheet--surface_panel {
+  
+}
+.crisp-fillsheet--surface_paper {
+  box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+}
+.crisp-fillsheet--surface_bare {
+  border: none;
+}
+
 .crisp-formfield {
   display: flex; flex-direction: column; gap: var(--crisp-space-1-5); box-sizing: border-box; font-family: var(--crisp-font-sans);
     & .crisp-formfield-label { display: inline-flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }

package/dist/tokens.css

@@ -121,87 +121,3 @@
   --crisp-weight-bold: 700;
   --crisp-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
 }
-
-/* -----------------------------------------------------------------
- * Deprecated unprefixed aliases (issue #276) — SCHEDULED FOR REMOVAL in
- * the next major version. Prefer the --crisp-* custom property
- * above; these only forward to it so an existing override keeps working.
- * ----------------------------------------------------------------- */
-:root {
-  --bg-brand-solid: var(--crisp-bg-brand-solid);
-  --bg-brand-solid-pressed: var(--crisp-bg-brand-solid-pressed);
-  --fg-on-brand: var(--crisp-fg-on-brand);
-  --fg-on-tone: var(--crisp-fg-on-tone);
-  --bg-surface: var(--crisp-bg-surface);
-  --bg-raised: var(--crisp-bg-raised);
-  --border-default: var(--crisp-border-default);
-  --border-subtle: var(--crisp-border-subtle);
-  --ring-neutral: var(--crisp-ring-neutral);
-  --bg-tile-active: var(--crisp-bg-tile-active);
-  --shadow-tile-active: var(--crisp-shadow-tile-active);
-  --bg-overlay-frost: var(--crisp-bg-overlay-frost);
-  --shadow-overlay1: var(--crisp-shadow-overlay1);
-  --shadow-overlay2: var(--crisp-shadow-overlay2);
-  --shadow-overlay3: var(--crisp-shadow-overlay3);
-  --bg-popover: var(--crisp-bg-popover);
-  --ring-popover: var(--crisp-ring-popover);
-  --shadow-popover1: var(--crisp-shadow-popover1);
-  --shadow-popover2: var(--crisp-shadow-popover2);
-  --shadow-popover3: var(--crisp-shadow-popover3);
-  --fg-primary: var(--crisp-fg-primary);
-  --fg-muted: var(--crisp-fg-muted);
-  --bg-danger: var(--crisp-bg-danger);
-  --bg-danger-solid: var(--crisp-bg-danger-solid);
-  --stroke-field-focus: var(--crisp-stroke-field-focus);
-  --fg-disabled: var(--crisp-fg-disabled);
-  --bg-neutral-weak: var(--crisp-bg-neutral-weak);
-  --bg-neutral-inverted: var(--crisp-bg-neutral-inverted);
-  --fg-on-neutral-inverted: var(--crisp-fg-on-neutral-inverted);
-  --fg-neutral-subtle: var(--crisp-fg-neutral-subtle);
-  --fg-neutral-muted: var(--crisp-fg-neutral-muted);
-  --stroke-focus-ring: var(--crisp-stroke-focus-ring);
-  --bg-success: var(--crisp-bg-success);
-  --bg-warning: var(--crisp-bg-warning);
-  --bg-orange: var(--crisp-bg-orange);
-  --bg-cyan: var(--crisp-bg-cyan);
-  --bg-purple: var(--crisp-bg-purple);
-  --bg-sidebar: var(--crisp-bg-sidebar);
-  --bg-subtle: var(--crisp-bg-subtle);
-  --space-1: var(--crisp-space-1);
-  --space-2: var(--crisp-space-2);
-  --space-3: var(--crisp-space-3);
-  --space-4: var(--crisp-space-4);
-  --space-5: var(--crisp-space-5);
-  --space-6: var(--crisp-space-6);
-  --space-8: var(--crisp-space-8);
-  --space-px: var(--crisp-space-px);
-  --space-0-5: var(--crisp-space-0-5);
-  --space-1-5: var(--crisp-space-1-5);
-  --space-2-5: var(--crisp-space-2-5);
-  --radius-chip: var(--crisp-radius-chip);
-  --radius-sm: var(--crisp-radius-sm);
-  --radius-md: var(--crisp-radius-md);
-  --radius-lg: var(--crisp-radius-lg);
-  --radius-xl: var(--crisp-radius-xl);
-  --radius-2xl: var(--crisp-radius-2xl);
-  --radius-full: var(--crisp-radius-full);
-  --size-icon: var(--crisp-size-icon);
-  --size-chip: var(--crisp-size-chip);
-  --size-row: var(--crisp-size-row);
-  --size-menuRow: var(--crisp-size-menuRow);
-  --size-tableRow: var(--crisp-size-tableRow);
-  --size-tableHeader: var(--crisp-size-tableHeader);
-  --size-header: var(--crisp-size-header);
-  --size-calendarCell: var(--crisp-size-calendarCell);
-  --size-calendarPill: var(--crisp-size-calendarPill);
-  --text-xs: var(--crisp-text-xs);
-  --text-sm: var(--crisp-text-sm);
-  --text-md: var(--crisp-text-md);
-  --text-lg: var(--crisp-text-lg);
-  --text-xl: var(--crisp-text-xl);
-  --weight-regular: var(--crisp-weight-regular);
-  --weight-medium: var(--crisp-weight-medium);
-  --weight-semibold: var(--crisp-weight-semibold);
-  --weight-bold: var(--crisp-weight-bold);
-  --font-sans: var(--crisp-font-sans);
-}

package/dist/types/components/datatable/datatable.d.ts

@@ -129,6 +129,12 @@ export type DataTableProps<T extends {
     onEdit?: (id: string, key: string, value: string) => void;
     /** Sticky the first column(s) with a horizontal scroll shadow (default true). */
     stickyFirst?: boolean;
+    /** Sticky the LAST column with a horizontal scroll shadow, mirroring
+     * `stickyFirst` (default false — additive, so an existing table's trailing
+     * column doesn't start pinning without being asked). Follows reading
+     * direction like `stickyFirst` does: it pins to the trailing edge, which is
+     * the left edge under `dir="rtl"` (#288). */
+    stickyLast?: boolean;
     /** BCP 47 locale for the built-in `date`/`number`/`currency` renderers
      * (default "en-US"). Formats the date and groups the number the way that
      * locale's readers expect — e.g. "mn-MN" renders a date as "2026.09.12"
@@ -163,7 +169,7 @@ export type DataTableProps<T extends {
 };
 export declare function DataTable<T extends {
     id: string;
-}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel, selectRowLabel, selectionAnnouncement, columnMenu, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder, searchLabel, onEdit, stickyFirst, locale: localeProp, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel, empty, showCount, countLabel, toolbar, className, reorderRowLabel, ...rest }: DataTableProps<T>): React.JSX.Element;
+}>({ columns: columnsProp, data, selectable, selectedIds, onSelectionChange, selectAllLabel, selectRowLabel, selectionAnnouncement, columnMenu, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable, searchPlaceholder, searchLabel, onEdit, stickyFirst, stickyLast, locale: localeProp, avatarTone, surface, interactive, onRowClick, onAddRow, addRowLabel, empty, showCount, countLabel, toolbar, className, reorderRowLabel, ...rest }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     var displayName: string;
 }

package/dist/types/components/filldoc/filldoc.d.ts

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { type FillSheetColumn } from "../fillsheet";
+/** A heading, a paragraph, or a sheet. */
+export type FillDocBlock = {
+    id: string;
+    type: "heading";
+    text: string;
+} | {
+    id: string;
+    type: "text";
+    text: string;
+} | {
+    id: string;
+    type: "table";
+    columns: FillSheetColumn[];
+    value: string[][];
+    /** The sheet's accessible name; see FillSheet's `label`. */
+    label?: string;
+};
+export type FillDocProps = {
+    /** The document, in order. */
+    blocks: FillDocBlock[];
+    /** Every edit comes back through here — typing, inserting, removing. */
+    onBlocksChange?: (next: FillDocBlock[]) => void;
+    /**
+     * `edit` is the person who MAKES the document: they can type anywhere and
+     * add or remove blocks. `fill` is the person who fills it in — the prose is
+     * fixed and only the sheets take input.
+     */
+    mode?: "edit" | "fill";
+    /** `a4` is a real page; `auto` grows to its content. */
+    page?: "a4" | "auto";
+    /** The document's accessible name. No English default — see FillSheet. */
+    label?: string;
+    /** Copy for the insert controls. English defaults, overridable. */
+    addTextLabel?: string;
+    addHeadingLabel?: string;
+    addTableLabel?: string;
+    removeLabel?: string;
+    className?: string;
+    style?: React.CSSProperties;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "children">;
+/**
+ * A page you can write on, of which a sheet is one block.
+ *
+ * FillSheet is the table; this is the document it sits in. The two share a
+ * look on purpose -- a real page, real margins, square corners, and nothing
+ * drawn that is not content -- and the same split between the person who
+ * MAKES a form and the person who fills it in: in `edit` you write the prose
+ * and add or remove blocks, in `fill` the prose is fixed and only the sheets
+ * take input.
+ *
+ * Every block's controls are hidden until the pointer is in that block. A
+ * page covered in handles and grips stops looking like a page, which is the
+ * whole thing this is for.
+ */
+export declare const FillDoc: React.ForwardRefExoticComponent<{
+    /** The document, in order. */
+    blocks: FillDocBlock[];
+    /** Every edit comes back through here — typing, inserting, removing. */
+    onBlocksChange?: (next: FillDocBlock[]) => void;
+    /**
+     * `edit` is the person who MAKES the document: they can type anywhere and
+     * add or remove blocks. `fill` is the person who fills it in — the prose is
+     * fixed and only the sheets take input.
+     */
+    mode?: "edit" | "fill";
+    /** `a4` is a real page; `auto` grows to its content. */
+    page?: "a4" | "auto";
+    /** The document's accessible name. No English default — see FillSheet. */
+    label?: string;
+    /** Copy for the insert controls. English defaults, overridable. */
+    addTextLabel?: string;
+    addHeadingLabel?: string;
+    addTableLabel?: string;
+    removeLabel?: string;
+    className?: string;
+    style?: React.CSSProperties;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & React.RefAttributes<HTMLDivElement>>;