twntyx-css 1.0.13 → 1.0.15

package/llm/components/menu.json

@@ -105,6 +105,11 @@
       "name": "details[open]",
       "className": "details[open]",
       "description": "State for open collapsible menu"
+    },
+    {
+      "name": "is-editing",
+      "className": "is-editing",
+      "description": "Applies inline rename state to a menu row item"
     }
   ],
   "structure": {
@@ -127,7 +132,8 @@
       "menu-lg",
       "menu-rounded-sm",
       "menu-rounded-lg",
-      "details[open]"
+      "details[open]",
+      "is-editing"
     ],
     "requiredChildren": [],
     "optionalChildren": []

package/llm/components/radio.json

@@ -25,6 +25,7 @@
     "assets/styles/form-shared.css",
     "assets/styles/form-text-select.css",
     "assets/styles/input-group.css",
+    "assets/styles/menu.css",
     "assets/styles/shared.css"
   ],
   "apiModel": "html-class",
@@ -129,6 +130,7 @@
     "line-strong",
     "line-success",
     "line-warning",
+    "text-brand-active",
     "text-default",
     "text-disabled",
     "text-error",

package/llm/components/select-input.json

@@ -29,6 +29,7 @@
     "assets/styles/form-checkbox-radio-toggle.css",
     "assets/styles/form-text-select.css",
     "assets/styles/input-group.css",
+    "assets/styles/menu.css",
     "assets/styles/toast.css"
   ],
   "apiModel": "html-class",
@@ -179,6 +180,7 @@
     "core-ui-800",
     "core-ui-900",
     "core-white",
+    "line-brand",
     "line-default",
     "line-error",
     "line-focus",

package/llm/components/textarea.json

@@ -24,7 +24,8 @@
     "assets/styles/field.css",
     "assets/styles/form-checkbox-radio-toggle.css",
     "assets/styles/form-text-select.css",
-    "assets/styles/input-group.css"
+    "assets/styles/input-group.css",
+    "assets/styles/menu.css"
   ],
   "apiModel": "html-class",
   "baseClass": "input-textarea",
@@ -143,6 +144,7 @@
     "core-ui-800",
     "core-ui-900",
     "core-white",
+    "line-brand",
     "line-default",
     "line-error",
     "line-focus",
@@ -151,6 +153,7 @@
     "line-strong",
     "line-success",
     "line-warning",
+    "text-brand-active",
     "text-default",
     "text-disabled",
     "text-error",

package/llm/components/toggle.json

@@ -25,7 +25,8 @@
     "assets/styles/form-checkbox-radio-toggle.css",
     "assets/styles/form-shared.css",
     "assets/styles/form-text-select.css",
-    "assets/styles/input-group.css"
+    "assets/styles/input-group.css",
+    "assets/styles/menu.css"
   ],
   "apiModel": "html-class",
   "baseClass": "toggle",
@@ -120,6 +121,7 @@
     "core-ui-800",
     "core-ui-900",
     "core-white",
+    "line-brand",
     "line-default",
     "line-error",
     "line-focus",
@@ -128,6 +130,7 @@
     "line-strong",
     "line-success",
     "line-warning",
+    "text-brand-active",
     "text-default",
     "text-disabled",
     "text-error",

package/llm/index.json

@@ -1,9 +1,9 @@
 {
   "llmSchemaVersion": "1.0.0",
-  "designSystemVersion": "1.0.13",
+  "designSystemVersion": "1.0.15",
   "packageName": "twntyx-css",
   "apiModel": "html-class",
-  "sourceFingerprint": "b22a1bf6e72e195e6f9e1b03c3e2ee4f9898182fbd18b1f2598241d2776935a2",
+  "sourceFingerprint": "e1f4d4ff6601711c6cf50c03f9b0aad3f7aaf75e3f18e57148fe69b4c31aeda0",
   "files": {
     "schema": "schema.json",
     "tokens": "tokens.json",

package/package.json

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

package/styles/menu.css

@@ -45,6 +45,10 @@
         &:active > * {
           @apply translate-y-px duration-0;
         }
+
+        svg {
+          @apply fill-current size-5;
+        }
       }
 
       > .menu-row-action {
@@ -58,6 +62,38 @@
           @apply fill-current size-4;
         }
       }
+
+      > .menu-row-input {
+        @apply relative z-10 flex flex-1 min-w-0 select-text;
+
+        .input-control {
+          @apply flex-1 w-full min-h-0 p-0 border-transparent shadow-none bg-transparent input-ghost;
+          --input-text-select-height: auto;
+
+          &:hover,
+          &:focus-within,
+          &:has(input:focus) {
+            @apply bg-transparent border-transparent shadow-none;
+          }
+        }
+
+        .input-text {
+          @apply px-0 py-0 min-h-0 h-auto w-full font-medium text-inherit bg-transparent select-text;
+
+          &:hover,
+          &:focus {
+            @apply bg-transparent;
+          }
+        }
+      }
+    }
+
+    &.is-editing > .menu-row {
+      @apply include-hover-primary-active text-text-default cursor-text;
+
+      > :where(a, button:not(.menu-row-action)) {
+        @apply hidden;
+      }
     }
 
     &.menu-row-action-hover > .menu-row > .menu-row-action {
@@ -213,6 +249,18 @@
   li {
     > .menu-row {
       @apply gap-1 px-2 py-1 text-xs;
+
+      > :where(a, button:not(.menu-row-action)) svg {
+        @apply size-3.5;
+      }
+
+      > .menu-row-action svg {
+        @apply size-3;
+      }
+
+      .menu-row-input .input-text {
+        @apply text-xs;
+      }
     }
     > * {
       &:not(ul, details, .menu-title, .menu-row),
@@ -242,6 +290,18 @@
   li {
     > .menu-row {
       @apply gap-1.5 px-3 py-1.5 text-xs;
+
+      > :where(a, button:not(.menu-row-action)) svg {
+        @apply size-[18px];
+      }
+
+      > .menu-row-action svg {
+        @apply size-3.5;
+      }
+
+      .menu-row-input .input-text {
+        @apply text-xs;
+      }
     }
     > * {
       &:not(ul, details, .menu-title, .menu-row),
@@ -271,6 +331,18 @@
   li {
     > .menu-row {
       @apply gap-3 px-5 py-3 text-base;
+
+      > :where(a, button:not(.menu-row-action)) svg {
+        @apply size-6;
+      }
+
+      > .menu-row-action svg {
+        @apply size-4;
+      }
+
+      .menu-row-input .input-text {
+        @apply text-base;
+      }
     }
     > * {
       &:not(ul, details, .menu-title, .menu-row),