@rokkit/themes 1.1.0 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.1.0",
+  "version": "1.1.4",
   "description": "Theme styles for @rokkit/ui components",
   "repository": {
     "type": "git",
@@ -103,10 +103,10 @@
   "build": "bun run build.mjs"
 },
 "dependencies": {
-  "@rokkit/core": "1.1.0"
+  "@rokkit/core": "1.1.4"
 },
 "devDependencies": {
-  "@rokkit/unocss": "1.1.0",
+  "@rokkit/unocss": "1.1.4",
   "magic-string": "^0.30.21",
   "unocss": "^66.5.1"
 },

package/src/base/table.css

@@ -111,6 +111,107 @@
   vertical-align: middle;
 }
 
+/* =============================================================================
+   Tree Table — hierarchy cell layout
+   ============================================================================= */
+
+/* Hierarchy cell hosts the connector prefix + chevron + label inline so a
+   row stays a single line regardless of nesting depth. */
+[data-tree-table] [data-table-cell][data-hierarchy='true'] {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  white-space: nowrap;
+}
+
+[data-tree-table-cell-prefix] {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Lock the connector slot width to match the toggle button so every
+   row indents by the same step regardless of whether the slot holds a
+   chevron, a connector line, or the empty placeholder. */
+[data-tree-table] [data-connector] {
+  width: 1.25rem;
+  min-height: 1.5rem;
+}
+
+/* Placeholder used in the toggle slot for non-expandable (leaf) rows
+   so the label X-position lines up vertically across rows regardless
+   of whether the row has a chevron. Same box as the toggle button. */
+[data-tree-table-empty] {
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+/* Connector lines — broaden the Tree-component rules so the lines also
+   appear inside a tree-table. */
+[data-tree-table]:not([data-line-style='none']) [data-connector-v] {
+  border-right-width: 1px;
+}
+[data-tree-table]:not([data-line-style='none']) [data-connector-h] {
+  border-bottom-width: 1px;
+}
+[data-tree-table]:not([data-line-style='none']) [data-connector-corner] {
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+}
+[data-tree-table][data-line-style='solid'] [data-connector-v] {
+  border-right-style: solid;
+}
+[data-tree-table][data-line-style='solid'] [data-connector-h] {
+  border-bottom-style: solid;
+}
+[data-tree-table][data-line-style='solid'] [data-connector-corner] {
+  border-bottom-style: solid;
+  border-right-style: solid;
+}
+[data-tree-table][data-line-style='dashed'] [data-connector-v] {
+  border-right-style: dashed;
+}
+[data-tree-table][data-line-style='dashed'] [data-connector-h] {
+  border-bottom-style: dashed;
+}
+[data-tree-table][data-line-style='dotted'] [data-connector-v] {
+  border-right-style: dotted;
+}
+[data-tree-table][data-line-style='dotted'] [data-connector-h] {
+  border-bottom-style: dotted;
+}
+
+/* Toggle button is square, borderless, fills the connector slot.
+   Sized to match the connector visual rhythm — no extra row height. */
+[data-tree-table-toggle] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  border-radius: 0.25rem;
+}
+
+[data-tree-table-toggle]:hover {
+  background: var(--paper-mute);
+}
+
+[data-tree-table-toggle]:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
+/* Tree-table rows pick up data-tree-level from the component — use it as
+   a hook for theme-specific connector tinting, not for indent (the
+   Connector spans already provide indentation). */
+
 /* =============================================================================
    Empty State
    ============================================================================= */

package/src/material/input.css

@@ -160,5 +160,5 @@
 /* Placeholders */
 [data-style='material'] [data-input-root] input::placeholder,
 [data-style='material'] [data-input-root] textarea::placeholder {
-  @apply text-paper-edge;
+  @apply text-ink-soft;
 }

package/src/minimal/input.css

@@ -167,5 +167,5 @@
 /* Placeholders */
 [data-style='minimal'] [data-input-root] input::placeholder,
 [data-style='minimal'] [data-input-root] textarea::placeholder {
-  @apply text-paper-mute;
+  @apply text-ink-soft;
 }

package/src/zen-sumi/input.css

@@ -167,5 +167,5 @@
 /* Placeholders */
 [data-style='zen-sumi'] [data-input-root] input::placeholder,
 [data-style='zen-sumi'] [data-input-root] textarea::placeholder {
-  color: var(--color-surface-z4);
+  @apply text-ink-soft;
 }

package/src/zen-sumi/search-filter.css

@@ -17,7 +17,7 @@
 }
 
 [data-style='zen-sumi'] [data-search-input]::placeholder {
-  @apply text-paper-edge;
+  @apply text-ink-soft;
 }
 
 /* =============================================================================

package/src/zen-sumi/select.css

@@ -152,7 +152,7 @@
 }
 
 [data-style='zen-sumi'] [data-select-filter-input]::placeholder {
-  @apply text-paper-edge;
+  @apply text-ink-soft;
 }
 
 [data-style='zen-sumi'] [data-select-empty] {