@dreamlake/dockit 0.2.16 → 0.2.18

package/dist/components/Table.js

@@ -10,23 +10,24 @@ function Table({
   const [wrap, setWrap] = useState(true);
   const generatedId = useId();
   const tableId = id ?? generatedId;
+  const actionLabel = wrap ? "Unwrap" : "Wrap";
   return /* @__PURE__ */ jsxs("div", { className: "doc-table", "data-wrap": wrap ? "on" : "off", children: [
-    /* @__PURE__ */ jsx("div", { className: "doc-table-toolbar", children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: "doc-table-wrap",
-        "aria-label": "Wrap table text",
-        "aria-pressed": wrap,
-        "aria-controls": tableId,
-        title: wrap ? "Turn off text wrapping" : "Wrap table text",
-        onClick: () => setWrap((value) => !value),
-        children: [
-          /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs("div", { className: "doc-table-toolbar", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "doc-table-wrap",
+          "aria-label": "Wrap table text",
+          "aria-pressed": wrap,
+          "aria-controls": tableId,
+          "aria-describedby": `${generatedId}-wrap-hint`,
+          onClick: () => setWrap((value) => !value),
+          children: /* @__PURE__ */ jsx(
             "svg",
             {
-              width: "14",
-              height: "14",
+              width: "12",
+              height: "12",
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
@@ -34,13 +35,13 @@ function Table({
               strokeLinecap: "round",
               strokeLinejoin: "round",
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx("path", { d: "M3 6h18M3 12h14a3 3 0 0 1 0 6h-4m3-3-3 3 3 3M3 18h4" })
+              children: /* @__PURE__ */ jsx("path", { d: wrap ? "M3 6h18M3 12h14a3 3 0 0 1 0 6h-4m3-3-3 3 3 3M3 18h4" : "M3 6h18M3 12h18M3 18h18" })
             }
-          ),
-          "Wrap"
-        ]
-      }
-    ) }),
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "doc-table-wrap-hint", id: `${generatedId}-wrap-hint`, role: "tooltip", children: actionLabel })
+    ] }),
     /* @__PURE__ */ jsx(
       "div",
       {

package/dist/styles.css

@@ -109,41 +109,69 @@
   overflow-x: auto;
 }
 
-.doc-table { min-width: 0; max-width: 100%; margin: 0 0 14px; }
-.doc-table-toolbar { display: flex; justify-content: flex-end; margin-bottom: 6px; }
+.doc-table { position: relative; min-width: 0; max-width: 100%; margin: 0 0 14px; }
+.doc-table-toolbar { position: absolute; top: 7px; right: 7px; z-index: 1; }
 .doc-table-wrap {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
-  height: 24px;
-  padding: 2px 8px;
-  border: 1px solid var(--color-doc-template-faint);
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 4px;
+  border: 0;
   border-radius: var(--radius-doc-template-sm);
   background: transparent;
   color: var(--color-doc-template-muted);
   font-family: var(--font-doc-template-mono);
   font-size: 10px;
+  opacity: 0.65;
+  transition: color 120ms ease, opacity 120ms ease;
   cursor: pointer;
 }
 .doc-table-wrap[aria-pressed='true'] {
-  color: var(--color-doc-template-accent);
-  background: var(--color-doc-template-accent-soft);
+  opacity: 0.9;
+}
+.doc-table-wrap:hover, .doc-table-wrap:focus-visible {
+  color: var(--color-doc-template-ink);
+  opacity: 1;
+  outline: none;
+}
+.doc-table-wrap-hint {
+  position: absolute;
+  right: 26px;
+  top: 0;
+  padding: 3px 6px;
+  border-radius: var(--radius-doc-template-sm);
+  background: var(--color-doc-template-code);
+  color: var(--color-doc-template-ink);
+  font-family: var(--font-doc-template-mono);
+  font-size: 10px;
+  line-height: 14px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 120ms ease, visibility 120ms ease;
+}
+.doc-table-wrap:hover + .doc-table-wrap-hint,
+.doc-table-wrap:focus-visible + .doc-table-wrap-hint {
+  opacity: 1;
+  visibility: visible;
 }
-.doc-table-wrap:hover { border-color: var(--color-doc-template-muted); }
-.doc-table-wrap:focus-visible, .doc-table-scroll:focus-visible {
-  outline: 2px solid var(--color-doc-template-accent);
+.doc-table-scroll:focus-visible {
+  outline: 2px solid var(--color-doc-template-muted);
   outline-offset: 2px;
 }
 .doc-table-scroll { overflow-x: auto; border-radius: var(--radius-doc-template-sm); }
 .doc-table-scroll > table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
 .doc-table-scroll > table > thead > tr > th {
-  border-bottom: 0;
+  border: 2px solid transparent;
+  border-radius: var(--radius-doc-template-sm);
   background: var(--color-doc-template-chip);
+  background-clip: padding-box;
 }
-.doc-table-scroll > table > thead > tr:first-child > th:first-child { border-top-left-radius: var(--radius-doc-template-sm); }
-.doc-table-scroll > table > thead > tr:first-child > th:last-child { border-top-right-radius: var(--radius-doc-template-sm); }
-.doc-table-scroll > table > thead > tr:last-child > th:first-child { border-bottom-left-radius: var(--radius-doc-template-sm); }
-.doc-table-scroll > table > thead > tr:last-child > th:last-child { border-bottom-right-radius: var(--radius-doc-template-sm); }
+/* Reserve room under the overlay, including headers with inline cell padding. */
+.doc-table-scroll > table > thead > tr > th:last-child { padding-right: 36px !important; }
 .doc-table[data-wrap='on'] > .doc-table-scroll > table { white-space: normal; overflow-wrap: anywhere; }
 .doc-table[data-wrap='off'] > .doc-table-scroll > table { white-space: nowrap; overflow-wrap: normal; }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamlake/dockit",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "description": "The DreamLake documentation shell — Vike + React + Tailwind v4 + MDX docs framework with sidebar, TOC, search, and theming",
   "license": "MIT",
   "type": "module",