fold-ng 0.12.0 → 0.12.1

package/CHANGELOG.md

@@ -8,6 +8,25 @@ All notable changes to **fold-ng** are documented here. The format follows
 
 _Nothing yet._
 
+## [0.12.1] - 2026-08-22
+
+### Fixed
+
+- **A panel body no longer crushes a child that clips its own overflow.**
+  `fold-panel-body` laid its children out as a flex column, where every child
+  may shrink and a child whose `overflow` is not `visible` has an automatic
+  minimum size of **zero**. `fold-danger-zone` clips its overflow to keep its
+  dividers flush with its rounded corners, so in a full panel it was measured
+  at **2px** — its two borders — with the destructive action, its heading and
+  its explanation all erased. The box reported barely any overflow, so there
+  was nothing to scroll to either: the panel looked finished and was not.
+
+  The body is now a single-column grid with `grid-auto-rows: max-content`:
+  rows are sized by their content and the box overflows, which is what a
+  scrolling column is for. Every child is protected, not only the ones we
+  thought of. `fold-danger-zone` also asks for its content-based minimum back
+  explicitly, so it survives a hand-rolled flex column too.
+
 ## [0.12.0] - 2026-08-22
 
 ### Added
@@ -1616,7 +1635,8 @@ design-token stylesheet.
   `currentColor`; `prefers-reduced-motion` + `forced-colors` are respected;
   strings localise via inputs / providers (`provideFoldPanelLabels`).
 
-[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.12.0...HEAD
+[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.12.1...HEAD
+[0.12.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.12.1
 [0.12.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.12.0
 [0.11.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.11.1
 [0.11.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.11.0

package/fesm2022/fold-ng.mjs

@@ -3296,7 +3296,7 @@ class FoldDangerZoneComponent {
     /** Stable id the host's `aria-labelledby` points at. */
     titleId = this.ids.next("fold-danger-zone");
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldDangerZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldDangerZoneComponent, isStandalone: true, selector: "fold-danger-zone", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmPhrase: { classPropertyName: "confirmPhrase", publicName: "confirmPhrase", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed" }, host: { attributes: { "role": "group" }, properties: { "attr.data-appearance": "appearance()", "attr.aria-labelledby": "titleId" } }, ngImport: i0, template: "<div class=\"dz-head\">\n  <fold-icon name=\"warning\" size=\"sm\" class=\"dz-icon\" aria-hidden=\"true\" />\n  <h3 class=\"dz-title\" [id]=\"titleId\">{{ title() }}</h3>\n</div>\n\n<div class=\"dz-body\">\n  <ng-content />\n</div>\n\n@if (actionLabel(); as label) {\n  <div class=\"dz-actions\">\n    <fold-inline-confirm\n      [match]=\"confirmPhrase() ?? ''\"\n      [message]=\"message() ?? ''\"\n      [intent]=\"intent()\"\n      (confirmed)=\"confirmed.emit($event)\"\n    >\n      <button foldButton emphasis=\"solid\" [intent]=\"intent()\">\n        {{ label }}\n      </button>\n    </fold-inline-confirm>\n  </div>\n}\n", styles: [":host{display:block;border:1px solid var(--fold-color-alert-border);border-radius:var(--fold-radius-md, 10px);overflow:hidden}:host([data-appearance=filled]){background:var(--fold-color-alert-surface)}:host([data-appearance=section]){background:var(--fold-color-surface-card)}.dz-head{display:flex;align-items:center;gap:.5rem;padding:var(--fold-space-lg) var(--fold-space-lg) var(--fold-space-sm);color:var(--fold-color-alert-text)}.dz-icon{flex:none}.dz-title{margin:0;font-size:var(--fold-text-md, 1rem);font-weight:600}.dz-body{padding:0 var(--fold-space-lg) var(--fold-space-md);color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm, .875rem);line-height:1.5}.dz-body:empty{display:none}.dz-body :first-child{margin-top:0}.dz-body :last-child{margin-bottom:0}.dz-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg)}:host([data-appearance=section]) .dz-actions{border-top:1px solid var(--fold-color-border-subtle);background:var(--fold-color-surface-sunken)}@media(forced-colors:active){:host{border-color:CanvasText}:host([data-appearance=section]) .dz-actions{border-top-color:CanvasText}}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldButtonComponent, selector: "button[foldButton], a[foldButton]", inputs: ["emphasis", "intent", "size", "shape", "block", "icon", "iconTrailing", "type", "disabled", "loading"] }, { kind: "component", type: FoldInlineConfirmComponent, selector: "fold-inline-confirm", inputs: ["intent", "message", "match", "password", "placeholder", "loading", "size", "confirmIcon", "cancelIcon", "keepOpenOnConfirm", "labels", "open"], outputs: ["confirmed", "cancelled", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldDangerZoneComponent, isStandalone: true, selector: "fold-danger-zone", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmPhrase: { classPropertyName: "confirmPhrase", publicName: "confirmPhrase", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed" }, host: { attributes: { "role": "group" }, properties: { "attr.data-appearance": "appearance()", "attr.aria-labelledby": "titleId" } }, ngImport: i0, template: "<div class=\"dz-head\">\n  <fold-icon name=\"warning\" size=\"sm\" class=\"dz-icon\" aria-hidden=\"true\" />\n  <h3 class=\"dz-title\" [id]=\"titleId\">{{ title() }}</h3>\n</div>\n\n<div class=\"dz-body\">\n  <ng-content />\n</div>\n\n@if (actionLabel(); as label) {\n  <div class=\"dz-actions\">\n    <fold-inline-confirm\n      [match]=\"confirmPhrase() ?? ''\"\n      [message]=\"message() ?? ''\"\n      [intent]=\"intent()\"\n      (confirmed)=\"confirmed.emit($event)\"\n    >\n      <button foldButton emphasis=\"solid\" [intent]=\"intent()\">\n        {{ label }}\n      </button>\n    </fold-inline-confirm>\n  </div>\n}\n", styles: [":host{display:block;border:1px solid var(--fold-color-alert-border);border-radius:var(--fold-radius-md, 10px);overflow:hidden;min-height:min-content}:host([data-appearance=filled]){background:var(--fold-color-alert-surface)}:host([data-appearance=section]){background:var(--fold-color-surface-card)}.dz-head{display:flex;align-items:center;gap:.5rem;padding:var(--fold-space-lg) var(--fold-space-lg) var(--fold-space-sm);color:var(--fold-color-alert-text)}.dz-icon{flex:none}.dz-title{margin:0;font-size:var(--fold-text-md, 1rem);font-weight:600}.dz-body{padding:0 var(--fold-space-lg) var(--fold-space-md);color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm, .875rem);line-height:1.5}.dz-body:empty{display:none}.dz-body :first-child{margin-top:0}.dz-body :last-child{margin-bottom:0}.dz-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg)}:host([data-appearance=section]) .dz-actions{border-top:1px solid var(--fold-color-border-subtle);background:var(--fold-color-surface-sunken)}@media(forced-colors:active){:host{border-color:CanvasText}:host([data-appearance=section]) .dz-actions{border-top-color:CanvasText}}\n"], dependencies: [{ kind: "component", type: FoldIconComponent, selector: "fold-icon", inputs: ["name", "size", "tone", "title"] }, { kind: "component", type: FoldButtonComponent, selector: "button[foldButton], a[foldButton]", inputs: ["emphasis", "intent", "size", "shape", "block", "icon", "iconTrailing", "type", "disabled", "loading"] }, { kind: "component", type: FoldInlineConfirmComponent, selector: "fold-inline-confirm", inputs: ["intent", "message", "match", "password", "placeholder", "loading", "size", "confirmIcon", "cancelIcon", "keepOpenOnConfirm", "labels", "open"], outputs: ["confirmed", "cancelled", "openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldDangerZoneComponent, decorators: [{
             type: Component,
@@ -3304,7 +3304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         role: "group",
                         "[attr.data-appearance]": "appearance()",
                         "[attr.aria-labelledby]": "titleId",
-                    }, template: "<div class=\"dz-head\">\n  <fold-icon name=\"warning\" size=\"sm\" class=\"dz-icon\" aria-hidden=\"true\" />\n  <h3 class=\"dz-title\" [id]=\"titleId\">{{ title() }}</h3>\n</div>\n\n<div class=\"dz-body\">\n  <ng-content />\n</div>\n\n@if (actionLabel(); as label) {\n  <div class=\"dz-actions\">\n    <fold-inline-confirm\n      [match]=\"confirmPhrase() ?? ''\"\n      [message]=\"message() ?? ''\"\n      [intent]=\"intent()\"\n      (confirmed)=\"confirmed.emit($event)\"\n    >\n      <button foldButton emphasis=\"solid\" [intent]=\"intent()\">\n        {{ label }}\n      </button>\n    </fold-inline-confirm>\n  </div>\n}\n", styles: [":host{display:block;border:1px solid var(--fold-color-alert-border);border-radius:var(--fold-radius-md, 10px);overflow:hidden}:host([data-appearance=filled]){background:var(--fold-color-alert-surface)}:host([data-appearance=section]){background:var(--fold-color-surface-card)}.dz-head{display:flex;align-items:center;gap:.5rem;padding:var(--fold-space-lg) var(--fold-space-lg) var(--fold-space-sm);color:var(--fold-color-alert-text)}.dz-icon{flex:none}.dz-title{margin:0;font-size:var(--fold-text-md, 1rem);font-weight:600}.dz-body{padding:0 var(--fold-space-lg) var(--fold-space-md);color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm, .875rem);line-height:1.5}.dz-body:empty{display:none}.dz-body :first-child{margin-top:0}.dz-body :last-child{margin-bottom:0}.dz-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg)}:host([data-appearance=section]) .dz-actions{border-top:1px solid var(--fold-color-border-subtle);background:var(--fold-color-surface-sunken)}@media(forced-colors:active){:host{border-color:CanvasText}:host([data-appearance=section]) .dz-actions{border-top-color:CanvasText}}\n"] }]
+                    }, template: "<div class=\"dz-head\">\n  <fold-icon name=\"warning\" size=\"sm\" class=\"dz-icon\" aria-hidden=\"true\" />\n  <h3 class=\"dz-title\" [id]=\"titleId\">{{ title() }}</h3>\n</div>\n\n<div class=\"dz-body\">\n  <ng-content />\n</div>\n\n@if (actionLabel(); as label) {\n  <div class=\"dz-actions\">\n    <fold-inline-confirm\n      [match]=\"confirmPhrase() ?? ''\"\n      [message]=\"message() ?? ''\"\n      [intent]=\"intent()\"\n      (confirmed)=\"confirmed.emit($event)\"\n    >\n      <button foldButton emphasis=\"solid\" [intent]=\"intent()\">\n        {{ label }}\n      </button>\n    </fold-inline-confirm>\n  </div>\n}\n", styles: [":host{display:block;border:1px solid var(--fold-color-alert-border);border-radius:var(--fold-radius-md, 10px);overflow:hidden;min-height:min-content}:host([data-appearance=filled]){background:var(--fold-color-alert-surface)}:host([data-appearance=section]){background:var(--fold-color-surface-card)}.dz-head{display:flex;align-items:center;gap:.5rem;padding:var(--fold-space-lg) var(--fold-space-lg) var(--fold-space-sm);color:var(--fold-color-alert-text)}.dz-icon{flex:none}.dz-title{margin:0;font-size:var(--fold-text-md, 1rem);font-weight:600}.dz-body{padding:0 var(--fold-space-lg) var(--fold-space-md);color:var(--fold-color-text-secondary);font-size:var(--fold-text-sm, .875rem);line-height:1.5}.dz-body:empty{display:none}.dz-body :first-child{margin-top:0}.dz-body :last-child{margin-bottom:0}.dz-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--fold-space-sm);padding:var(--fold-space-md) var(--fold-space-lg)}:host([data-appearance=section]) .dz-actions{border-top:1px solid var(--fold-color-border-subtle);background:var(--fold-color-surface-sunken)}@media(forced-colors:active){:host{border-color:CanvasText}:host([data-appearance=section]) .dz-actions{border-top-color:CanvasText}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], confirmPhrase: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmPhrase", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], intent: [{ type: i0.Input, args: [{ isSignal: true, alias: "intent", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }] } });
 
 /**
@@ -12451,7 +12451,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * failure this component prevents.
  *
  * It also lays its children out in a column with the standard gap, so a panel
- * stops setting a margin on every field.
+ * stops setting a margin on every field. That column is a **grid**, not a flex
+ * column, for a reason worth stating: in a flex column every child may shrink,
+ * and a child whose `overflow` is not `visible` has an automatic minimum size
+ * of **zero** — it is crushed to its borders rather than allowed to overflow.
+ * A `fold-danger-zone` (rounded corners, so `overflow: hidden`) measured 2px in
+ * a full panel: a destructive-action block erased, with almost no overflow left
+ * to scroll to either. `grid-auto-rows: max-content` sizes each row to its
+ * content and lets the box overflow, which is what a scrolling column is for.
  *
  * ```html
  * <fold-panel-header title="Réglage" />
@@ -12469,11 +12476,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  */
 class FoldPanelBodyComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPanelBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: FoldPanelBodyComponent, isStandalone: true, selector: "fold-panel-body", ngImport: i0, template: "<ng-content />", isInline: true, styles: [":host{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--fold-space-md);min-height:0;overflow-y:auto;padding:var(--fold-space-lg)}@container (max-width: 640px){:host{padding:var(--fold-space-md)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: FoldPanelBodyComponent, isStandalone: true, selector: "fold-panel-body", ngImport: i0, template: "<ng-content />", isInline: true, styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-content:start;flex:1 1 auto;gap:var(--fold-space-md);min-height:0;overflow-y:auto;padding:var(--fold-space-lg)}@container (max-width: 640px){:host{padding:var(--fold-space-md)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPanelBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: "fold-panel-body", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />", styles: [":host{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--fold-space-md);min-height:0;overflow-y:auto;padding:var(--fold-space-lg)}@container (max-width: 640px){:host{padding:var(--fold-space-md)}}\n"] }]
+            args: [{ selector: "fold-panel-body", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-content:start;flex:1 1 auto;gap:var(--fold-space-md);min-height:0;overflow-y:auto;padding:var(--fold-space-lg)}@container (max-width: 640px){:host{padding:var(--fold-space-md)}}\n"] }]
         }] });
 
 /**