@iyulab/modern-app 0.51.0 → 0.52.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [0.52.0] - 2026-10-12
+
+### Changed
+
+- 🔴**`u-group-box`, `u-page-header` and `u-action-bar` no longer use size containment.** In Chromium a
+  `container-type: inline-size` box — on the host, and after 0.49.1 on an inner box — could stay collapsed to its
+  border (2px high) after a commit that changed layout elsewhere on the page (a sibling `fieldset` turning
+  `disabled`, a block appearing above it), until something forced a relayout. The three still fold by their own
+  width at the same points (480px, 640px, 420px); the threshold is now an item's `flex-basis`. Consequences:
+  - Unnamed `@container` queries in content slotted into `u-group-box` no longer resolve to the card. Lay that
+    content out intrinsically, or give it a container of your own.
+  - A card in a box that sizes to its content (a flex row item without `flex: 1`, `inline-block`, a grid `auto`
+    column) now sizes to its content instead of shrinking to its border.
+  - `u-group-box`'s header folds when the card is narrower than 480px, measured on the card's border box as before.
+  - The inner `.frame` wrapper `u-group-box` gained in 0.49.1 is gone; the header and body are direct children of
+    the shadow root again.
+
 ## [0.51.0] - 2026-10-12
 
 ### Changed

package/dist/components/ActionBar.styles.js

@@ -11,8 +11,14 @@ var t = e`
 
 
 
-    flex-wrap: wrap;
-    container-type: inline-size;
+    flex-wrap: wrap-reverse;
+  }
+
+  
+  .danger,
+  .main {
+    flex: 0 1 calc((420px - 100%) * 999);
+    min-width: fit-content;
   }
 
   
@@ -52,20 +58,6 @@ var t = e`
     border-top: 1px solid var(--u-border-color-weak, #EEEEEE);
     padding: var(--u-space-md, 12px) 0;
   }
-
-  
-
-  @container (max-width: 420px) {
-    .main {
-      order: -1;
-      width: 100%;
-      margin-left: 0;
-    }
-    .danger {
-      width: 100%;
-      margin-right: 0;
-    }
-  }
 `;
 //#endregion
 export { t as styles };

package/dist/components/GroupBox.js

@@ -33,7 +33,7 @@ var f, p = {
 	}
 	render() {
 		let e = !!this.title || !!this.description || this.hasActions;
-		return a`<div class="frame">
+		return a`
       <div class="header ${this.divider ? "divider" : ""} ${e ? "" : "empty"}" part="header">
         <div class="titles">
           ${u`<${p[this.headingLevel]} class="title" part="title">${this.title}${this.title && this.meta ? a` <span class="meta" part="meta">${this.meta}</span>` : ""}</${p[this.headingLevel]}>`}
@@ -45,8 +45,7 @@ var f, p = {
           ></slot>
         </div>
       </div>
-      <div class="body ${this.flush ? "flush" : ""}" part="body"><slot></slot></div>
-    </div>`;
+      <div class="body ${this.flush ? "flush" : ""}" part="body"><slot></slot></div>`;
 	}
 };
 t([c({ type: String }), e("design:type", Object)], m.prototype, "title", void 0), t([c({ type: String }), e("design:type", String)], m.prototype, "meta", void 0), t([c({ type: String }), e("design:type", String)], m.prototype, "description", void 0), t([c({ type: Boolean }), e("design:type", Object)], m.prototype, "divider", void 0), t([c({ type: Boolean }), e("design:type", Object)], m.prototype, "flush", void 0), t([c({

package/dist/components/GroupBox.styles.js

@@ -18,13 +18,15 @@ var t = e`
 
 
 
+  
+
+
+
 
-  .frame {
-    container-type: inline-size;
-  }
 
   .header {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: var(--u-space-sm, 8px);
     padding: var(--u-space-xl, 20px) var(--u-space-xl, 20px) 0;
@@ -43,7 +45,7 @@ var t = e`
 
   
   .titles {
-    flex: 1 1 auto;
+    flex: 9999 1 calc((480px - 2 * var(--u-space-xl, 20px) - 100%) * 999);
     min-width: 0;
     display: flex;
     flex-direction: column;
@@ -82,7 +84,7 @@ var t = e`
   }
 
   .actions {
-    flex: 0 0 auto;
+    flex: 1 0 auto;
     display: flex;
     align-items: center;
     gap: var(--u-space-sm, 8px);
@@ -112,18 +114,6 @@ var t = e`
 
   
 
-
-
-  @container (max-width: 480px) {
-    .header {
-      flex-wrap: wrap;
-    }
-    .actions {
-      width: 100%;
-    }
-  }
-  
-
   .body.flush {
     padding: 0;
   }

package/dist/components/PageHeader.styles.js

@@ -7,10 +7,17 @@ var t = e`
     gap: var(--u-space-md, 12px);
     flex-wrap: wrap;
     margin-bottom: var(--u-space-2xl, 24px);
-    
-    container-type: inline-size;
   }
 
+  
+
+
+
+
+
+
+
+
   .heading {
     flex: 1 1 auto;
     min-width: 0; 
@@ -93,32 +100,16 @@ var t = e`
   }
 
   .actions {
-    flex: 0 0 auto;
+    flex: 0 1 calc((640px - 100%) * 999);
+    min-width: fit-content;
     display: flex;
     align-items: center;
     gap: var(--u-space-sm, 8px);
-    margin-left: auto;
   }
   
   .actions.empty {
     display: none;
   }
-
-  
-
-
-
-
-
-
-
-
-  @container (max-width: 640px) {
-    .actions {
-      margin-left: 0;
-      width: 100%;
-    }
-  }
 `;
 //#endregion
 export { t as styles };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.51.0",
+  "version": "0.52.0",
   "keywords": [
     "iyulab",
     "web-framework",

package/skills/modern-app/references/components/group-box.md

@@ -18,12 +18,11 @@ up different on every screen.
 The body is a flex column with token spacing, so block children get vertical rhythm and share
 a left edge without any consumer CSS.
 
-**Width comes from outside.** The card folds by its own width (at 480px or less the header
-actions move under the title), so its content is a size query container and does not size the
-card. In normal flow and in grid `1fr` columns that is invisible; where a box sizes to its
-content — a flex row item without `flex: 1`, `inline-block`, a grid `auto` column — give the card
-a width (`flex: 1 1 20rem`, `width: …`), or it shrinks to its border. Unnamed `@container`
-queries in your slotted content resolve to the card's width.
+**It folds by its own width, without a size container.** Below 480px the header actions move under
+the title and fill the row. The threshold is the title's `flex-basis`, not a container query, so
+the card sizes to its content like any block, and unnamed `@container` queries in your slotted
+content do not resolve to the card — lay slotted content out intrinsically (the house-style grids
+do).
 
 ## Slots