twico-ui 1.11.0 → 1.11.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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.11.1](https://github.com/EncryptionL/twico-ui/compare/v1.11.0...v1.11.1) (2026-07-09)
+
+
+### Bug Fixes
+
+* **datatable:** pointer cursor on the Columns-panel visibility toggle ([9d30343](https://github.com/EncryptionL/twico-ui/commit/9d303434f51c4a4131cf393e56f8534d53f0a7bb))
+* **tooltip:** grow horizontally + point the arrow at the trigger ([19aa76a](https://github.com/EncryptionL/twico-ui/commit/19aa76a6ffe597d81aff00a4144182661db0971b))
+
 # [1.11.0](https://github.com/EncryptionL/twico-ui/compare/v1.10.0...v1.11.0) (2026-07-07)
 
 

package/dist/index.cjs

@@ -7838,7 +7838,12 @@ var TOOLTIP_CSS = `
   padding: 6px 10px; border-radius: var(--radius-md);
   background: var(--color-text); color: var(--color-surface);
   font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--font-medium);
-  line-height: 1.3; white-space: normal; max-width: var(--_tw-maxw, 260px); box-shadow: var(--shadow-md);
+  line-height: 1.3; white-space: normal;
+  /* Grow horizontally to max-width, then wrap. max-content sizes to the content (capped by
+     max-width) and \u2014 unlike shrink-to-fit width:auto \u2014 is NOT constrained by the space between
+     the fixed left edge and the viewport edge, so a tooltip near the right edge no longer
+     collapses to ~1 word per line and stretch vertically. */
+  width: max-content; max-width: var(--_tw-maxw, 320px); box-shadow: var(--shadow-md);
   opacity: 0; transform: scale(0.9); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-spring);
 }
 .twc-tooltip[data-show="true"] { pointer-events: auto; }
@@ -7849,10 +7854,13 @@ var TOOLTIP_CSS = `
 .twc-tooltip[data-place="right"]  { transform-origin: left center; translate: 0 -50%; }
 .twc-tooltip[data-show="true"][data-place="top"], .twc-tooltip[data-show="true"][data-place="bottom"] { transform: scale(1); }
 .twc-tooltip__arrow { position: absolute; width: 7px; height: 7px; background: var(--color-text); transform: rotate(45deg); }
-.twc-tooltip[data-place="top"] .twc-tooltip__arrow    { bottom: -3px; left: 50%; margin-left: -3.5px; }
-.twc-tooltip[data-place="bottom"] .twc-tooltip__arrow { top: -3px; left: 50%; margin-left: -3.5px; }
-.twc-tooltip[data-place="left"] .twc-tooltip__arrow   { right: -3px; top: 50%; margin-top: -3.5px; }
-.twc-tooltip[data-place="right"] .twc-tooltip__arrow  { left: -3px; top: 50%; margin-top: -3.5px; }
+/* Arrow tracks the trigger via --_tw-arrow-x/y (px from the tooltip edge) instead of being
+   locked to the centre, so it still points at the trigger when the bubble is clamped near a
+   viewport edge. Falls back to 50% before measurement / SSR. */
+.twc-tooltip[data-place="top"] .twc-tooltip__arrow    { bottom: -3px; left: var(--_tw-arrow-x, 50%); margin-left: -3.5px; }
+.twc-tooltip[data-place="bottom"] .twc-tooltip__arrow { top: -3px; left: var(--_tw-arrow-x, 50%); margin-left: -3.5px; }
+.twc-tooltip[data-place="left"] .twc-tooltip__arrow   { right: -3px; top: var(--_tw-arrow-y, 50%); margin-top: -3.5px; }
+.twc-tooltip[data-place="right"] .twc-tooltip__arrow  { left: -3px; top: var(--_tw-arrow-y, 50%); margin-top: -3.5px; }
 @media (prefers-reduced-motion: reduce) { .twc-tooltip { transition: opacity var(--duration-fast) linear; transform: none; } }
 `;
 function Tooltip({
@@ -7906,10 +7914,22 @@ function Tooltip({
     else if (placement === "left" && spaceLeft < tw && spaceRight > spaceLeft) side = "right";
     else if (placement === "right" && spaceRight < tw && spaceLeft > spaceRight) side = "left";
     const base = { left: "auto", right: "auto", top: "auto", bottom: "auto", place: side };
-    if (side === "bottom") setCoords({ ...base, left: clampX(cx), top: Math.round(r2.bottom + gap) });
-    else if (side === "left") setCoords({ ...base, top: clampY(cy), right: Math.round(vw - r2.left + gap) });
-    else if (side === "right") setCoords({ ...base, top: clampY(cy), left: Math.round(r2.right + gap) });
-    else setCoords({ ...base, left: clampX(cx), bottom: Math.round(vh - r2.top + gap) });
+    const AP = 12;
+    const arrowX = (center) => tw ? Math.round(Math.min(Math.max(cx - (center - tw / 2), AP), tw - AP)) : void 0;
+    const arrowY = (center) => th ? Math.round(Math.min(Math.max(cy - (center - th / 2), AP), th - AP)) : void 0;
+    if (side === "bottom") {
+      const c = clampX(cx);
+      setCoords({ ...base, left: c, top: Math.round(r2.bottom + gap), arrowX: arrowX(c) });
+    } else if (side === "left") {
+      const c = clampY(cy);
+      setCoords({ ...base, top: c, right: Math.round(vw - r2.left + gap), arrowY: arrowY(c) });
+    } else if (side === "right") {
+      const c = clampY(cy);
+      setCoords({ ...base, top: c, left: Math.round(r2.right + gap), arrowY: arrowY(c) });
+    } else {
+      const c = clampX(cx);
+      setCoords({ ...base, left: c, bottom: Math.round(vh - r2.top + gap), arrowX: arrowX(c) });
+    }
   }, [placement]);
   React51__namespace.default.useEffect(() => {
     place();
@@ -7966,7 +7986,15 @@ function Tooltip({
               "aria-hidden": show ? void 0 : "true",
               onMouseEnter: cancelClose,
               onMouseLeave: close,
-              style: { position: "fixed", left: coords.left, right: coords.right, top: coords.top, bottom: coords.bottom },
+              style: {
+                position: "fixed",
+                left: coords.left,
+                right: coords.right,
+                top: coords.top,
+                bottom: coords.bottom,
+                "--_tw-arrow-x": coords.arrowX != null ? `${coords.arrowX}px` : void 0,
+                "--_tw-arrow-y": coords.arrowY != null ? `${coords.arrowY}px` : void 0
+              },
               children: [
                 label,
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twc-tooltip__arrow", "aria-hidden": "true" })
@@ -8346,7 +8374,8 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
 .twc-dt__col-pin:hover { background: var(--color-surface); color: var(--color-text); }
 .twc-dt__col-pin[data-on="true"] { color: var(--color-primary); background: var(--color-primary-subtle); }
 .twc-dt__col-pin svg { width: 14px; height: 14px; }
-.twc-dt__sw { width: 32px; height: 18px; border-radius: var(--radius-full); background: var(--color-border-strong); position: relative; flex: none; transition: background-color var(--duration-base); }
+.twc-dt__sw { width: 32px; height: 18px; border-radius: var(--radius-full); background: var(--color-border-strong); position: relative; flex: none; cursor: pointer; transition: background-color var(--duration-base); }
+.twc-dt__sw[aria-disabled="true"] { cursor: default; }
 .twc-dt__sw[data-on="true"] { background: var(--color-primary); }
 .twc-dt__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--color-primary-fg); box-shadow: var(--shadow-sm); transition: transform var(--duration-base) var(--ease-spring); }
 .twc-dt__sw:focus-visible { outline: none; box-shadow: var(--ring); }