@inf-monkeys-tech/monkeys-design 2.0.158 → 2.0.159

package/dist/{index.d-f64a66a7b12e.d.mts → index.d-b153d2606ed2.d.mts}

@@ -58,7 +58,8 @@ declare function CardGrid({ view, minCardWidth, columnGap, className, style, ...
 interface CardProps extends Omit<HTMLAttributes<HTMLElement>, 'content' | 'title'> {
     title: ReactNode;
     variant?: 'card' | 'content' | 'detail' | 'preview' | 'row';
-    /** Let a containing panel own the surface while preserving card content and interactions. */
+    /** Let a containing panel own the surface while preserving card content and interactions.
+     * Add data-frame="bento" to adapt detail borders and inset to the containing Bento tokens. */
     chrome?: 'card' | 'plain';
     selected?: boolean;
     onSelectedChange?: (selected: boolean) => void;

package/dist/{index.d-f64a66a7b12e.d.ts → index.d-b153d2606ed2.d.ts}

@@ -58,7 +58,8 @@ declare function CardGrid({ view, minCardWidth, columnGap, className, style, ...
 interface CardProps extends Omit<HTMLAttributes<HTMLElement>, 'content' | 'title'> {
     title: ReactNode;
     variant?: 'card' | 'content' | 'detail' | 'preview' | 'row';
-    /** Let a containing panel own the surface while preserving card content and interactions. */
+    /** Let a containing panel own the surface while preserving card content and interactions.
+     * Add data-frame="bento" to adapt detail borders and inset to the containing Bento tokens. */
     chrome?: 'card' | 'plain';
     selected?: boolean;
     onSelectedChange?: (selected: boolean) => void;

package/dist/ui.css

@@ -494,9 +494,160 @@
 
 /* A containing panel owns only the outer chrome. Detail information keeps its own surface. */
 .monkeys-ui-card[data-chrome=plain]{border:0;border-radius:0;background:var(--monkeys-ui-transparent,var(--monkeys-ui-default-transparent));box-shadow:none}
+/* Explicitly opt an embedded detail into its containing Bento's geometry.
+   The parent owns padding; retain the detail surface and effect without a second inset. */
+.monkeys-ui-record-detail[data-frame=bento] .monkeys-ui-sidebar-details{margin:0;border-color:var(--monkeys-bento-border-color);border-width:var(--monkeys-bento-border-width);border-style:var(--monkeys-bento-border-style);border-radius:max(0px,calc(var(--monkeys-bento-radius) - var(--monkeys-bento-padding) - var(--monkeys-bento-border-width)))}
 /* Native data attributes also work through existing declarative registrations.
    A containing Bento owns the frame and padding; standalone panels are unchanged. */
 .monkeys-ui-panel[data-chrome=plain]{border:0;border-radius:0;background:var(--monkeys-ui-transparent,var(--monkeys-ui-default-transparent));box-shadow:none}
 .monkeys-ui-panel[data-chrome=plain]:not(.monkeys-ui-brand-banner)>.monkeys-ui-scroll-viewport>div>.monkeys-ui-panel-header,.monkeys-ui-panel[data-chrome=plain]:not(.monkeys-ui-brand-banner)>.monkeys-ui-scroll-viewport>div>.monkeys-ui-panel-body{padding:0}
 /* Keep the standalone banner's content coordinates when Bento owns its surface. */
 .monkeys-ui-brand-banner[data-chrome=plain]{--monkeys-ui-brand-banner-host-padding:var(--monkeys-bento-padding,var(--global-spacing,0.75rem));--monkeys-ui-brand-banner-host-border:var(--monkeys-bento-border-width,1px)}
+
+/* Opt-in single-row collection preview: 178px minimum cards, 12px gaps, up to 24 columns.
+   The first grid child is a creation tile. Marker classes select preview items and its toggle;
+   unmarked/expanded collections keep their normal layout and all focus targets. */
+@container monkeys-grid-preview (min-width: 0px) and (width < 368px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 1),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(1))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 368px) and (width < 558px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 2),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(2))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 558px) and (width < 748px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 3),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(3))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 748px) and (width < 938px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 4),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(4))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 938px) and (width < 1128px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 5),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(5))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 1128px) and (width < 1318px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 6),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(6))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 1318px) and (width < 1508px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 7),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(7))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 1508px) and (width < 1698px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 8),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(8))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 1698px) and (width < 1888px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 9),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(9))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 1888px) and (width < 2078px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 10),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(10))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 2078px) and (width < 2268px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 11),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(11))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 2268px) and (width < 2458px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 12),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(12))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 2458px) and (width < 2648px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 13),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(13))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 2648px) and (width < 2838px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 14),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(14))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 2838px) and (width < 3028px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 15),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(15))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 3028px) and (width < 3218px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 16),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(16))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 3218px) and (width < 3408px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 17),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(17))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 3408px) and (width < 3598px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 18),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(18))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 3598px) and (width < 3788px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 19),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(19))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 3788px) and (width < 3978px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 20),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(20))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 3978px) and (width < 4168px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 21),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(21))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 4168px) and (width < 4358px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 22),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(22))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 4358px) and (width < 4548px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 23),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(23))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}
+@container monkeys-grid-preview (min-width: 4548px) {
+  .monkeys-ui-grid-preview-items > .monkeys-ui-record-card:nth-child(n + 24),
+  .monkeys-ui-grid-preview-header:not(:has(+ .monkeys-ui-grid-preview .monkeys-ui-record-card:nth-child(24))) .monkeys-ui-grid-preview-toggle {
+    display: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inf-monkeys-tech/monkeys-design",
-  "version": "2.0.158",
+  "version": "2.0.159",
   "description": "Monkeys Design Components Library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",