twntyx-css 1.0.16 → 1.0.17

package/llm/components/badge.json

@@ -23,6 +23,7 @@
     "assets/styles/badge.css",
     "assets/styles/contest.css",
     "assets/styles/form-text-select.css",
+    "assets/styles/menu.css",
     "assets/styles/shared.css"
   ],
   "apiModel": "html-class",
@@ -121,6 +122,7 @@
     "line-success",
     "line-warning",
     "text-attention",
+    "text-brand-active",
     "text-default",
     "text-disabled",
     "text-error",

package/llm/components/menu.json

@@ -109,7 +109,7 @@
     {
       "name": "is-editing",
       "className": "is-editing",
-      "description": "Applies inline rename state to a menu row item"
+      "description": "Inline rename state: invisible in-flow link, absolute menu-row-input overlay, hidden action"
     }
   ],
   "structure": {

package/llm/index.json

@@ -1,9 +1,9 @@
 {
   "llmSchemaVersion": "1.0.0",
-  "designSystemVersion": "1.0.16",
+  "designSystemVersion": "1.0.17",
   "packageName": "twntyx-css",
   "apiModel": "html-class",
-  "sourceFingerprint": "cf9f34775c1b86e3b2eb4ba59f55ea4075ab5faad4f27535cf971319d65014fc",
+  "sourceFingerprint": "f0c14f0a6476267f1e282ad0a6ae789f4c2446a73692165389eaa64730e2d87d",
   "files": {
     "schema": "schema.json",
     "tokens": "tokens.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twntyx-css",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "exports": {
     "./llm": "./llm/index.json",
     "./llm/components/*": "./llm/components/*.json",

package/styles/menu.css

@@ -33,10 +33,10 @@
 
     /* Split row: main link + contextual action */
     > .menu-row {
-      @apply grid grid-cols-[minmax(0,1fr)_auto] items-center py-2 pl-0 pr-2 w-full max-w-full min-w-0 text-sm rounded cursor-default include-hover-primary include-interactive text-text-tertiary hover:text-text-default;
+      @apply grid grid-cols-[minmax(0,1fr)_auto] items-center py-0 pl-0 pr-2 w-full max-w-full min-w-0 text-sm rounded cursor-default include-hover-primary include-interactive text-text-tertiary hover:text-text-default;
 
       > :where(a, button:not(.menu-row-action)) {
-        @apply flex gap-2 items-center min-w-0 py-0 pl-4 pr-1 rounded-none cursor-pointer text-inherit hover:text-inherit outline-transparent focus-visible:outline-transparent active:outline-transparent;
+        @apply flex gap-2 items-center min-w-0 py-2 pl-4 pr-1 rounded-none cursor-pointer text-inherit hover:text-inherit outline-transparent focus-visible:outline-transparent active:outline-transparent;
 
         &::before {
           @apply hidden;
@@ -52,7 +52,7 @@
       }
 
       > .menu-row-action {
-        @apply relative z-10 flex shrink-0 flex-none justify-center items-center -my-0.5 mr-0 size-6 rounded cursor-pointer include-interactive text-text-tertiary hover:text-text-default;
+        @apply relative z-10 flex shrink-0 flex-none justify-center items-center mr-0 size-6 rounded cursor-pointer include-interactive text-text-tertiary hover:text-text-default;
 
         &::before {
           @apply hidden;
@@ -64,7 +64,7 @@
       }
 
       > .menu-row-input {
-        @apply relative z-10 flex min-w-0 py-0 pl-4 pr-1 select-text -my-1;
+        @apply relative z-10 flex min-w-0 py-2 pl-4 pr-1 select-text;
 
         .input-control {
           @apply flex-1 w-full min-h-0 p-0 border-transparent shadow-none bg-transparent input-ghost;
@@ -89,13 +89,26 @@
     }
 
     &.is-editing > .menu-row {
-      @apply include-hover-primary-active text-text-default cursor-text;
+      @apply relative include-hover-primary-active text-text-default cursor-text;
 
       > :where(a, button:not(.menu-row-action)) {
+        @apply opacity-0 pointer-events-none select-none;
+      }
+
+      > .menu-row-input {
+        @apply absolute top-0 bottom-0 left-0 right-2 z-20;
+      }
+
+      > .menu-row-action {
         @apply hidden;
       }
     }
 
+    &.is-editing.menu-row-action-hover:hover > .menu-row > .menu-row-action,
+    &.is-editing.menu-row-action-hover:focus-within > .menu-row > .menu-row-action {
+      @apply hidden;
+    }
+
     &.menu-row-action-hover > .menu-row > .menu-row-action {
       @apply hidden;
     }
@@ -113,7 +126,7 @@
       &:has(svg:only-child) {
         @apply px-2;
       }
-      > *:not(svg, .avatar, .material-symbols-rounded) {
+      > *:not(svg, .avatar, .badge, .material-symbols-rounded) {
         @apply w-full;
       }
       svg {
@@ -125,7 +138,7 @@
       @apply outline-transparent focus-visible:outline-transparent active:outline-transparent;
 
       > span {
-        @apply block min-w-0 flex-1 truncate;
+        @apply block min-w-0 flex-1 truncate text-left;
       }
 
       > span + span {
@@ -255,15 +268,19 @@
 @utility menu-xs {
   @apply text-xs;
   li {
+    &.is-editing > .menu-row > .menu-row-input {
+      @apply right-1;
+    }
+
     > .menu-row {
-      @apply gap-1 py-1 pr-1 text-xs;
+      @apply py-0 pr-1 text-xs;
 
       > :where(a, button:not(.menu-row-action)) {
-        @apply pl-2 pr-0.5;
+        @apply py-1 pl-2 pr-0.5;
       }
 
       > .menu-row-input {
-        @apply pl-2 pr-0.5;
+        @apply py-1 pl-2 pr-0.5;
       }
 
       > :where(a, button:not(.menu-row-action)) svg {
@@ -271,7 +288,7 @@
       }
 
       > .menu-row-action {
-        @apply -my-0.5 mr-0 size-4;
+        @apply mr-0 size-4;
       }
 
       > .menu-row-action svg {
@@ -308,15 +325,19 @@
 @utility menu-sm {
   @apply text-xs;
   li {
+    &.is-editing > .menu-row > .menu-row-input {
+      @apply right-1.5;
+    }
+
     > .menu-row {
-      @apply gap-1.5 py-1.5 pr-1.5 text-xs;
+      @apply py-0 pr-1.5 text-xs;
 
       > :where(a, button:not(.menu-row-action)) {
-        @apply pl-3 pr-1;
+        @apply py-1.5 pl-3 pr-1;
       }
 
       > .menu-row-input {
-        @apply pl-3 pr-1;
+        @apply py-1.5 pl-3 pr-1;
       }
 
       > :where(a, button:not(.menu-row-action)) svg {
@@ -324,7 +345,7 @@
       }
 
       > .menu-row-action {
-        @apply -my-0.5 mr-0 size-5;
+        @apply mr-0 size-5;
       }
 
       > .menu-row-action svg {
@@ -361,15 +382,19 @@
 @utility menu-lg {
   @apply text-base;
   li {
+    &.is-editing > .menu-row > .menu-row-input {
+      @apply right-3;
+    }
+
     > .menu-row {
-      @apply gap-3 py-3 pr-3 text-base;
+      @apply py-0 pr-3 text-base;
 
       > :where(a, button:not(.menu-row-action)) {
-        @apply pl-5 pr-1.5;
+        @apply py-3 pl-5 pr-1.5;
       }
 
       > .menu-row-input {
-        @apply pl-5 pr-1.5;
+        @apply py-3 pl-5 pr-1.5;
       }
 
       > :where(a, button:not(.menu-row-action)) svg {
@@ -377,7 +402,7 @@
       }
 
       > .menu-row-action {
-        @apply -my-1 mr-0 size-7;
+        @apply mr-0 size-7;
       }
 
       > .menu-row-action svg {