twico-ui 1.36.1 → 1.37.1

package/dist/index.d.cts

@@ -122,7 +122,9 @@ interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "al
   src?: string;
   /** Alternative text (required for accessibility; pass "" for decorative images). */
   alt: string;
-  /** object-fit value. */
+  /** object-fit value. When set, the image fills its container by default (`width`/`height: 100%`); pass an
+   *  explicit `width`/`height` (or size the container / `style`) to give it a fixed box that `fit` crops within
+   *  — an explicit `width`/`height` now wins over the fill (#378). */
   fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
   /** Border radius token (e.g. "md", "lg", "full"). */
   radius?: string;
@@ -2915,8 +2917,14 @@ interface DialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"
   footer?: React.ReactNode;
   /** `"full"` is a near-fullscreen panel (fills the viewport minus a small margin). @default "md" */
   size?: "sm" | "md" | "lg" | "full";
-  /** Keep the header + footer fixed and scroll only the body (for long content). @default false */
+  /** Keep the header + footer fixed and scroll only the body when content exceeds the viewport — so the
+   *  action buttons never scroll off-screen (#371). Set `false` for a panel that should scroll as one block
+   *  (rare; note a non-portaled child that deliberately overflows the panel would be clipped). @default true */
   scrollBody?: boolean;
+  /** Draw a rule between header/body and body/footer. Suppressed automatically where the region is empty
+   *  (no footer; a header with only a close button and no title/description). Set `false` for a panel that
+   *  should read as one continuous surface. @default true */
+  dividers?: boolean;
   /** Close when the backdrop is clicked. @default true */
   closeOnBackdrop?: boolean;
   children?: React.ReactNode;
@@ -2962,6 +2970,10 @@ interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"
   height?: "sm" | "md" | "lg" | number | string;
   /** Close when the backdrop is clicked. @default true */
   closeOnBackdrop?: boolean;
+  /** Draw a rule between header/body and body/footer (matches `Dialog`). Suppressed automatically where the
+   *  region is empty (no footer; a header with only a close button and no title/description). Set `false` for a
+   *  panel that should read as one continuous surface. @default true */
+  dividers?: boolean;
   children?: React.ReactNode;
 }
 

package/dist/index.d.ts

@@ -122,7 +122,9 @@ interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "al
   src?: string;
   /** Alternative text (required for accessibility; pass "" for decorative images). */
   alt: string;
-  /** object-fit value. */
+  /** object-fit value. When set, the image fills its container by default (`width`/`height: 100%`); pass an
+   *  explicit `width`/`height` (or size the container / `style`) to give it a fixed box that `fit` crops within
+   *  — an explicit `width`/`height` now wins over the fill (#378). */
   fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
   /** Border radius token (e.g. "md", "lg", "full"). */
   radius?: string;
@@ -2915,8 +2917,14 @@ interface DialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"
   footer?: React.ReactNode;
   /** `"full"` is a near-fullscreen panel (fills the viewport minus a small margin). @default "md" */
   size?: "sm" | "md" | "lg" | "full";
-  /** Keep the header + footer fixed and scroll only the body (for long content). @default false */
+  /** Keep the header + footer fixed and scroll only the body when content exceeds the viewport — so the
+   *  action buttons never scroll off-screen (#371). Set `false` for a panel that should scroll as one block
+   *  (rare; note a non-portaled child that deliberately overflows the panel would be clipped). @default true */
   scrollBody?: boolean;
+  /** Draw a rule between header/body and body/footer. Suppressed automatically where the region is empty
+   *  (no footer; a header with only a close button and no title/description). Set `false` for a panel that
+   *  should read as one continuous surface. @default true */
+  dividers?: boolean;
   /** Close when the backdrop is clicked. @default true */
   closeOnBackdrop?: boolean;
   children?: React.ReactNode;
@@ -2962,6 +2970,10 @@ interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"
   height?: "sm" | "md" | "lg" | number | string;
   /** Close when the backdrop is clicked. @default true */
   closeOnBackdrop?: boolean;
+  /** Draw a rule between header/body and body/footer (matches `Dialog`). Suppressed automatically where the
+   *  region is empty (no footer; a header with only a close button and no title/description). Set `false` for a
+   *  panel that should read as one continuous surface. @default true */
+  dividers?: boolean;
   children?: React.ReactNode;
 }
 

package/dist/index.mjs

@@ -304,6 +304,8 @@ var Image = React51__default.forwardRef(function Image2({
   className = "",
   style,
   onError,
+  width,
+  height,
   ...rest
 }, ref) {
   const __twcStyles = useScopedStyles("twc-image-styles", IMAGE_CSS);
@@ -313,6 +315,14 @@ var Image = React51__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__ */ jsxs(Fragment, { children: [
@@ -326,6 +336,8 @@ var Image = React51__default.forwardRef(function Image2({
         loading,
         className: `twc-image ${className}`.trim(),
         "data-fit": fit || void 0,
+        width,
+        height,
         style: s,
         onError: (e) => {
           onError?.(e);
@@ -15412,6 +15424,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,
@@ -15421,7 +15437,8 @@ function Dialog({
   footer,
   children,
   size = "md",
-  scrollBody = false,
+  scrollBody = true,
+  dividers = true,
   closeOnBackdrop = true,
   className = "",
   ...rest
@@ -15462,7 +15479,7 @@ function Dialog({
   }, children: [
     __twcStyles,
     /* @__PURE__ */ 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__ */ jsxs("div", { className: "twc-dialog__header", children: [
+      title || description || onClose ? /* @__PURE__ */ jsxs("div", { className: "twc-dialog__header", "data-divider": dividers && (title || description) && (children || footer) ? "true" : void 0, children: [
         /* @__PURE__ */ jsxs("div", { className: "twc-dialog__titles", children: [
           title ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__title", id: titleId, children: title }) : null,
           description ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__desc", id: descId, children: description }) : null
@@ -15470,7 +15487,7 @@ function Dialog({
         onClose ? /* @__PURE__ */ jsx("button", { className: "twc-dialog__close", onClick: onClose, "aria-label": "Close", type: "button", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
       ] }) : null,
       children ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__body", children }) : null,
-      footer ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__footer", children: footer }) : null
+      footer ? /* @__PURE__ */ jsx("div", { className: "twc-dialog__footer", "data-divider": dividers && children ? "true" : void 0, children: footer }) : null
     ] })
   ] });
   return renderPortal(overlay);
@@ -15570,7 +15587,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; }
 }
@@ -15586,6 +15607,7 @@ function Drawer({
   width,
   height,
   closeOnBackdrop = true,
+  dividers = true,
   children,
   className = "",
   style,
@@ -15631,7 +15653,7 @@ function Drawer({
   }, children: [
     __twcStyles,
     /* @__PURE__ */ 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__ */ jsxs("div", { className: "twc-drawer__header", children: [
+      title || description || onClose ? /* @__PURE__ */ jsxs("div", { className: "twc-drawer__header", "data-divider": dividers && (title || description) ? "true" : void 0, children: [
         /* @__PURE__ */ jsxs("div", { className: "twc-drawer__titles", children: [
           title ? /* @__PURE__ */ jsx("div", { className: "twc-drawer__title", id: titleId, children: title }) : null,
           description ? /* @__PURE__ */ jsx("div", { className: "twc-drawer__desc", id: descId, children: description }) : null
@@ -15639,7 +15661,7 @@ function Drawer({
         onClose ? /* @__PURE__ */ jsx("button", { className: "twc-drawer__close", onClick: onClose, "aria-label": "Close", type: "button", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
       ] }) : null,
       /* @__PURE__ */ jsx("div", { className: "twc-drawer__body", children }),
-      footer ? /* @__PURE__ */ jsx("div", { className: "twc-drawer__footer", children: footer }) : null
+      footer ? /* @__PURE__ */ jsx("div", { className: "twc-drawer__footer", "data-divider": dividers ? "true" : void 0, children: footer }) : null
     ] })
   ] });
   return renderPortal(overlay);
@@ -16340,7 +16362,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({
@@ -16402,7 +16426,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";
@@ -16414,7 +16438,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__default.useEffect(() => {
     if (!open) return;
@@ -16480,7 +16504,7 @@ function Popover({
       children: [
         __twcStyles,
         /* @__PURE__ */ jsx("span", { className: "twc-popover__arrow", style: pos.arrow, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxs("div", { className: "twc-popover__inner", children: [
+        /* @__PURE__ */ jsxs("div", { className: "twc-popover__inner", style: { maxHeight: pos.maxHeight }, children: [
           title ? /* @__PURE__ */ jsx("div", { className: "twc-popover__title", id: `${popId}-title`, children: title }) : null,
           children
         ] })