twico-ui 1.36.1 → 1.37.1

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+## [1.37.1](https://github.com/EncryptionL/twico-ui/compare/v1.37.0...v1.37.1) (2026-09-14)
+
+
+### Bug Fixes
+
+* **image:** let explicit width/height win over fit's container fill ([#378](https://github.com/EncryptionL/twico-ui/issues/378)) ([770823d](https://github.com/EncryptionL/twico-ui/commit/770823ddced42288e623bb00e8f92886bd01d373))
+
+# [1.37.0](https://github.com/EncryptionL/twico-ui/compare/v1.36.1...v1.37.0) (2026-09-11)
+
+
+### Features
+
+* **overlay:** safer Dialog/Drawer defaults + Popover height clamp ([#371](https://github.com/EncryptionL/twico-ui/issues/371), [#372](https://github.com/EncryptionL/twico-ui/issues/372), [#373](https://github.com/EncryptionL/twico-ui/issues/373)) ([0f7a386](https://github.com/EncryptionL/twico-ui/commit/0f7a38656956bb9ef7cdd0331d2b5e6776aa7d7c))
+
 ## [1.36.1](https://github.com/EncryptionL/twico-ui/compare/v1.36.0...v1.36.1) (2026-09-09)
 
 

package/dist/index.cjs

@@ -325,6 +325,8 @@ var Image = React51__namespace.default.forwardRef(function Image2({
   className = "",
   style,
   onError,
+  width,
+  height,
   ...rest
 }, ref) {
   const __twcStyles = useScopedStyles("twc-image-styles", IMAGE_CSS);
@@ -334,6 +336,14 @@ var Image = React51__namespace.default.forwardRef(function Image2({
     objectFit: fit,
     borderRadius: radius ? `var(--radius-${radius})` : void 0,
     aspectRatio,
+    // #378: only when `fit` is set, also emit explicit width/height as inline style — that's the sole case
+    // where the `[data-fit] { width/height: 100% }` rule overrides the width/height ATTRIBUTES (a
+    // presentational attr loses to a real CSS rule), silently sizing `<Image width height fit>` to the
+    // container/intrinsic size. Inline style beats that rule so the props mean what they say (object-fit
+    // still crops within the box), placed before `...style` so a caller's own `style` still wins. Gated on
+    // `fit` so the no-fit path stays attribute-only — a consumer's own CSS/className can still override it.
+    ...fit && width != null ? { width } : null,
+    ...fit && height != null ? { height } : null,
     ...style
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -347,6 +357,8 @@ var Image = React51__namespace.default.forwardRef(function Image2({
         loading,
         className: `twc-image ${className}`.trim(),
         "data-fit": fit || void 0,
+        width,
+        height,
         style: s,
         onError: (e) => {
           onError?.(e);
@@ -15433,6 +15445,10 @@ var DIALOG_CSS = `
 .twc-dialog__close svg { width: 18px; height: 18px; }
 .twc-dialog__body { padding: var(--space-4) var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
 .twc-dialog__footer { display: flex; gap: var(--space-2); justify-content: flex-end; padding: 0 var(--space-5) var(--space-5); }
+/* #372: header/body and body/footer rules (on by default). Per-region data-divider so the rule is
+   suppressed when the region is empty (no footer; a header with only a close button and no title/description). */
+.twc-dialog__header[data-divider="true"] { padding-bottom: var(--space-4); border-bottom: var(--border-thin) solid var(--color-divider); }
+.twc-dialog__footer[data-divider="true"] { padding-top: var(--space-4); border-top: var(--border-thin) solid var(--color-divider); }
 `;
 function Dialog({
   open,
@@ -15442,7 +15458,8 @@ function Dialog({
   footer,
   children,
   size = "md",
-  scrollBody = false,
+  scrollBody = true,
+  dividers = true,
   closeOnBackdrop = true,
   className = "",
   ...rest
@@ -15483,7 +15500,7 @@ function Dialog({
   }, children: [
     __twcStyles,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: dialogRef, className: `twc-dialog ${className}`, "data-state": state, "data-size": size, "data-scroll-body": scrollBody ? "true" : void 0, role: "dialog", "aria-modal": "true", tabIndex: -1, "aria-labelledby": title ? titleId : void 0, "aria-label": !title ? "Dialog" : void 0, "aria-describedby": description ? descId : void 0, ...rest, children: [
-      title || description || onClose ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dialog__header", children: [
+      title || description || onClose ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dialog__header", "data-divider": dividers && (title || description) && (children || footer) ? "true" : void 0, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-dialog__titles", children: [
           title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dialog__title", id: titleId, children: title }) : null,
           description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dialog__desc", id: descId, children: description }) : null
@@ -15491,7 +15508,7 @@ function Dialog({
         onClose ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: "twc-dialog__close", onClick: onClose, "aria-label": "Close", type: "button", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
       ] }) : null,
       children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dialog__body", children }) : null,
-      footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dialog__footer", children: footer }) : null
+      footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-dialog__footer", "data-divider": dividers && children ? "true" : void 0, children: footer }) : null
     ] })
   ] });
   return renderPortal(overlay);
@@ -15591,7 +15608,11 @@ var DRAWER_CSS = `
 .twc-drawer__close:hover { background: var(--color-surface-sunken); color: var(--color-text); }
 .twc-drawer__close svg { width: 18px; height: 18px; }
 .twc-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-2) var(--space-5) var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
-.twc-drawer__footer { display: flex; gap: var(--space-2); justify-content: flex-end; padding: var(--space-4) var(--space-5); border-top: var(--border-thin) solid var(--color-divider); }
+.twc-drawer__footer { display: flex; gap: var(--space-2); justify-content: flex-end; padding: var(--space-4) var(--space-5); }
+/* #372: header/footer rules (on by default), consistent with Dialog. Per-region data-divider so an empty
+   region grows no stray line (no footer; a header with only a close button and no title/description). */
+.twc-drawer__header[data-divider="true"] { border-bottom: var(--border-thin) solid var(--color-divider); }
+.twc-drawer__footer[data-divider="true"] { border-top: var(--border-thin) solid var(--color-divider); }
 @media (prefers-reduced-motion: reduce) {
   .twc-drawer__overlay[data-state], .twc-drawer[data-state] { animation-duration: 1ms; }
 }
@@ -15607,6 +15628,7 @@ function Drawer({
   width,
   height,
   closeOnBackdrop = true,
+  dividers = true,
   children,
   className = "",
   style,
@@ -15652,7 +15674,7 @@ function Drawer({
   }, children: [
     __twcStyles,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: panelRef, className: `twc-drawer ${className}`, "data-side": side, "data-state": state, role: "dialog", "aria-modal": "true", tabIndex: -1, "aria-labelledby": title ? titleId : void 0, "aria-label": !title ? "Drawer" : void 0, "aria-describedby": description ? descId : void 0, style: { ...dim ? sizeVar : null, ...style }, ...rest, children: [
-      title || description || onClose ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-drawer__header", children: [
+      title || description || onClose ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-drawer__header", "data-divider": dividers && (title || description) ? "true" : void 0, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-drawer__titles", children: [
           title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-drawer__title", id: titleId, children: title }) : null,
           description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-drawer__desc", id: descId, children: description }) : null
@@ -15660,7 +15682,7 @@ function Drawer({
         onClose ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: "twc-drawer__close", onClick: onClose, "aria-label": "Close", type: "button", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
       ] }) : null,
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-drawer__body", children }),
-      footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-drawer__footer", children: footer }) : null
+      footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-drawer__footer", "data-divider": dividers ? "true" : void 0, children: footer }) : null
     ] })
   ] });
   return renderPortal(overlay);
@@ -16361,7 +16383,9 @@ var POPOVER_CSS = `
 .twc-popover__arrow { position: absolute; width: 11px; height: 11px; background: var(--color-surface-raised);
   border-left: var(--border-thin) solid var(--color-border); border-top: var(--border-thin) solid var(--color-border);
   transform: rotate(45deg); }
-.twc-popover__inner { padding: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
+/* #373: cap the panel to the room place() measured and scroll INSIDE the inner (not the panel \u2014 the panel
+   must keep overflow visible so the absolutely-positioned arrow isn't clipped) so a tall panel's footer stays reachable. */
+.twc-popover__inner { padding: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); overflow-y: auto; }
 .twc-popover__title { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-text); margin-bottom: 4px; }
 `;
 function Popover({
@@ -16423,7 +16447,7 @@ function Popover({
       l = Math.max(M, Math.min(l, vw - w - M));
       left = l;
       arrow = { left: Math.min(Math.max(r2.left + r2.width / 2 - l - 5.5, 10), w - 20), [flip ? "bottom" : "top"]: -6 };
-      return setPos({ top, bottom, left, width: w, flip, arrow });
+      return setPos({ top, bottom, left, width: w, flip, arrow, maxHeight: flip ? spaceAbove : spaceBelow });
     }
     const ph = popRef.current ? popRef.current.offsetHeight : 120;
     let onRight = placement === "right";
@@ -16435,7 +16459,7 @@ function Popover({
     const cy = r2.top + r2.height / 2;
     top = Math.max(M, Math.min(cy - ph / 2, vh - ph - M));
     arrow = { top: Math.min(Math.max(cy - top - 5.5, 8), ph - 18), [onRight ? "left" : "right"]: -6 };
-    setPos({ top, left, width: w, flip: false, arrow });
+    setPos({ top, left, width: w, flip: false, arrow, maxHeight: vh - 2 * M });
   }, [placement, align, width]);
   React51__namespace.default.useEffect(() => {
     if (!open) return;
@@ -16501,7 +16525,7 @@ function Popover({
       children: [
         __twcStyles,
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-popover__arrow", style: pos.arrow, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-popover__inner", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twc-popover__inner", style: { maxHeight: pos.maxHeight }, children: [
           title ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twc-popover__title", id: `${popId}-title`, children: title }) : null,
           children
         ] })