twntyx-css 1.0.14 → 1.0.16

package/llm/components/menu.json

@@ -147,13 +147,15 @@
     "required": [],
     "dataAttributes": [],
     "roles": [],
-    "aria": []
+    "aria": [
+      "aria-label"
+    ]
   },
   "a11y": {
     "interactive": true,
     "requiredRoles": [],
     "requiredAria": [
-      "aria-label (when no visible label)"
+      "aria-label"
     ],
     "keyboardSupport": [
       "Tab",

package/llm/index.json

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

package/package.json

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

package/styles/menu.css

@@ -18,7 +18,7 @@
   }
 
   li {
-    @apply flex relative flex-col flex-wrap items-stretch shrink-0;
+    @apply flex relative flex-col flex-wrap items-stretch shrink-0 min-w-0 max-w-full;
 
     /* Default Link/Button Style */
     > *:not(ul, details, .menu-title, .menu-row) {
@@ -33,10 +33,10 @@
 
     /* Split row: main link + contextual action */
     > .menu-row {
-      @apply flex gap-1 items-center px-4 py-2 w-full max-w-full 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-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;
 
       > :where(a, button:not(.menu-row-action)) {
-        @apply flex flex-1 gap-2 items-center min-w-0 p-0 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-0 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;
@@ -45,22 +45,26 @@
         &:active > * {
           @apply translate-y-px duration-0;
         }
+
+        svg {
+          @apply shrink-0 fill-current size-5!;
+        }
       }
 
       > .menu-row-action {
-        @apply relative z-10 flex shrink-0 justify-center items-center 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 -my-0.5 mr-0 size-6 rounded cursor-pointer include-interactive text-text-tertiary hover:text-text-default;
 
         &::before {
           @apply hidden;
         }
 
         svg {
-          @apply fill-current size-4;
+          @apply fill-current size-4!;
         }
       }
 
       > .menu-row-input {
-        @apply relative z-10 flex flex-1 min-w-0 select-text;
+        @apply relative z-10 flex min-w-0 py-0 pl-4 pr-1 select-text -my-1;
 
         .input-control {
           @apply flex-1 w-full min-h-0 p-0 border-transparent shadow-none bg-transparent input-ghost;
@@ -93,19 +97,19 @@
     }
 
     &.menu-row-action-hover > .menu-row > .menu-row-action {
-      @apply opacity-0 pointer-events-none transition-opacity duration-75;
+      @apply hidden;
     }
 
-    &.menu-row-action-hover > .menu-row:hover > .menu-row-action,
-    &.menu-row-action-hover > .menu-row:focus-within > .menu-row-action {
-      @apply opacity-100 pointer-events-auto;
+    &.menu-row-action-hover:hover > .menu-row > .menu-row-action,
+    &.menu-row-action-hover:focus-within > .menu-row > .menu-row-action {
+      @apply flex;
     }
 
-    span {
+    > *:not(.menu-row) span {
       @apply truncate min-w-fit;
     }
 
-    > * {
+    > *:not(.menu-row) {
       &:has(svg:only-child) {
         @apply px-2;
       }
@@ -113,16 +117,24 @@
         @apply w-full;
       }
       svg {
-        @apply fill-current size-5;
+        @apply fill-current size-5!;
       }
     }
 
-    :where(a, button) {
-      @apply include-interactive;
-    }
-
     > .menu-row > :where(a, button:not(.menu-row-action)) {
       @apply outline-transparent focus-visible:outline-transparent active:outline-transparent;
+
+      > span {
+        @apply block min-w-0 flex-1 truncate;
+      }
+
+      > span + span {
+        @apply shrink-0 flex-none min-w-fit overflow-visible whitespace-normal;
+      }
+    }
+
+    :where(a, button) {
+      @apply include-interactive;
     }
 
     &.is-selected {
@@ -244,14 +256,34 @@
   @apply text-xs;
   li {
     > .menu-row {
-      @apply gap-1 px-2 py-1 text-xs;
+      @apply gap-1 py-1 pr-1 text-xs;
+
+      > :where(a, button:not(.menu-row-action)) {
+        @apply pl-2 pr-0.5;
+      }
+
+      > .menu-row-input {
+        @apply pl-2 pr-0.5;
+      }
+
+      > :where(a, button:not(.menu-row-action)) svg {
+        @apply size-3.5!;
+      }
+
+      > .menu-row-action {
+        @apply -my-0.5 mr-0 size-4;
+      }
+
+      > .menu-row-action svg {
+        @apply size-3!;
+      }
 
       .menu-row-input .input-text {
         @apply text-xs;
       }
     }
-    > * {
-      &:not(ul, details, .menu-title, .menu-row),
+    > *:not(.menu-row) {
+      &:not(ul, details, .menu-title),
       details > summary {
         @apply gap-1 px-2 py-1 text-xs;
       }
@@ -259,7 +291,7 @@
         @apply px-1;
       }
       > svg {
-        @apply size-3.5;
+        @apply size-3.5!;
       }
     }
   }
@@ -277,14 +309,34 @@
   @apply text-xs;
   li {
     > .menu-row {
-      @apply gap-1.5 px-3 py-1.5 text-xs;
+      @apply gap-1.5 py-1.5 pr-1.5 text-xs;
+
+      > :where(a, button:not(.menu-row-action)) {
+        @apply pl-3 pr-1;
+      }
+
+      > .menu-row-input {
+        @apply pl-3 pr-1;
+      }
+
+      > :where(a, button:not(.menu-row-action)) svg {
+        @apply size-[18px]!;
+      }
+
+      > .menu-row-action {
+        @apply -my-0.5 mr-0 size-5;
+      }
+
+      > .menu-row-action svg {
+        @apply size-3.5!;
+      }
 
       .menu-row-input .input-text {
         @apply text-xs;
       }
     }
-    > * {
-      &:not(ul, details, .menu-title, .menu-row),
+    > *:not(.menu-row) {
+      &:not(ul, details, .menu-title),
       details > summary {
         @apply gap-1.5 px-3 py-1.5 text-xs;
       }
@@ -292,7 +344,7 @@
         @apply px-1.5;
       }
       > svg {
-        @apply size-[18px];
+        @apply size-[18px]!;
       }
     }
   }
@@ -310,14 +362,34 @@
   @apply text-base;
   li {
     > .menu-row {
-      @apply gap-3 px-5 py-3 text-base;
+      @apply gap-3 py-3 pr-3 text-base;
+
+      > :where(a, button:not(.menu-row-action)) {
+        @apply pl-5 pr-1.5;
+      }
+
+      > .menu-row-input {
+        @apply pl-5 pr-1.5;
+      }
+
+      > :where(a, button:not(.menu-row-action)) svg {
+        @apply size-6!;
+      }
+
+      > .menu-row-action {
+        @apply -my-1 mr-0 size-7;
+      }
+
+      > .menu-row-action svg {
+        @apply size-4!;
+      }
 
       .menu-row-input .input-text {
         @apply text-base;
       }
     }
-    > * {
-      &:not(ul, details, .menu-title, .menu-row),
+    > *:not(.menu-row) {
+      &:not(ul, details, .menu-title),
       details > summary {
         @apply gap-3 px-5 py-3 text-base;
       }
@@ -325,7 +397,7 @@
         @apply px-3;
       }
       > svg {
-        @apply size-6;
+        @apply size-6!;
       }
     }
   }