@texturehq/edges 1.15.2 → 1.15.3

package/dist/styles/utilities.css

@@ -28,8 +28,21 @@
   outline: none;
 }
 
-/* Ensure focus-visible still works for interactive elements */
-:focus-visible {
+/**
+ * Remove default focus outlines from menu items and list items
+ * We'll use data-[focused] with custom styling for keyboard focus instead
+ */
+[role="menuitem"],
+[role="option"] {
+  outline: none;
+}
+
+/**
+ * Global focus-visible for keyboard navigation accessibility
+ * Applies to buttons, links, and form controls
+ * Menu/list items use data-[focused] with custom styling instead
+ */
+:focus-visible:not([role="menuitem"]):not([role="option"]) {
   outline: 2px solid var(--color-action-default);
   outline-offset: 2px;
 }

package/dist/styles.css

@@ -1039,7 +1039,10 @@
 [role="dialog"], [role="menu"], [role="listbox"], [data-react-aria-dialog], [data-react-aria-modal] {
   outline: none;
 }
-:focus-visible {
+[role="menuitem"], [role="option"] {
+  outline: none;
+}
+:focus-visible:not([role="menuitem"]):not([role="option"]) {
   outline: 2px solid var(--color-action-default);
   outline-offset: 2px;
 }
@@ -3998,12 +4001,6 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1.5px;
   }
-  .-outline-offset-2 {
-    outline-offset: calc(2px * -1);
-  }
-  .-outline-offset-4 {
-    outline-offset: calc(4px * -1);
-  }
   .outline-offset-0 {
     outline-offset: 0px;
   }
@@ -4016,9 +4013,6 @@
   .outline-border-input {
     outline-color: var(--color-border-input);
   }
-  .outline-white {
-    outline-color: var(--color-white);
-  }
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -4739,16 +4733,6 @@
       left: var(--spacing-4);
     }
   }
-  .focus\:bg-background-hover {
-    &:focus {
-      background-color: var(--color-background-hover);
-    }
-  }
-  .focus\:bg-feedback-error-background {
-    &:focus {
-      background-color: var(--color-feedback-error-background);
-    }
-  }
   .focus\:ring-0 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -4798,12 +4782,6 @@
       outline-color: var(--color-action-default);
     }
   }
-  .focus\:\!outline-none {
-    &:focus {
-      --tw-outline-style: none !important;
-      outline-style: none !important;
-    }
-  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -4837,12 +4815,6 @@
       outline-color: var(--color-action-default);
     }
   }
-  .focus-visible\:\!outline-none {
-    &:focus-visible {
-      --tw-outline-style: none !important;
-      outline-style: none !important;
-    }
-  }
   .disabled\:cursor-not-allowed {
     &:disabled {
       cursor: not-allowed;
@@ -4891,11 +4863,37 @@
       transition-timing-function: var(--ease-in);
     }
   }
+  .data-\[focus-visible\]\:ring-2 {
+    &[data-focus-visible] {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .data-\[focus-visible\]\:ring-action-default {
+    &[data-focus-visible] {
+      --tw-ring-color: var(--color-action-default);
+    }
+  }
+  .data-\[focus-visible\]\:ring-feedback-error-border {
+    &[data-focus-visible] {
+      --tw-ring-color: var(--color-feedback-error-border);
+    }
+  }
+  .data-\[focus-visible\]\:ring-inset {
+    &[data-focus-visible] {
+      --tw-ring-inset: inset;
+    }
+  }
   .data-\[focused\]\:bg-background-hover {
     &[data-focused] {
       background-color: var(--color-background-hover);
     }
   }
+  .data-\[focused\]\:bg-feedback-error-background {
+    &[data-focused] {
+      background-color: var(--color-feedback-error-background);
+    }
+  }
   .data-\[focused\]\:opacity-100 {
     &[data-focused] {
       opacity: 100%;
@@ -6088,11 +6086,6 @@
       --tw-ring-color: var(--color-gray-700);
     }
   }
-  .dark\:outline-white {
-    @media (prefers-color-scheme: dark) {
-      outline-color: var(--color-white);
-    }
-  }
   .dark\:backdrop-blur-2xl {
     @media (prefers-color-scheme: dark) {
       --tw-backdrop-blur: blur(var(--blur-2xl));
@@ -6282,11 +6275,6 @@
       outline-color: GrayText;
     }
   }
-  .forced-colors\:outline-\[HighlightText\] {
-    @media (forced-colors: active) {
-      outline-color: HighlightText;
-    }
-  }
   .forced-colors\:group-invalid\:bg-\[Mark\] {
     @media (forced-colors: active) {
       &:is(:where(.group):invalid *) {

package/dist/utilities.manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.15.2",
-  "generatedAt": "2025-10-30T20:56:00.368Z",
+  "version": "1.15.3",
+  "generatedAt": "2025-10-31T11:11:25.558Z",
   "categories": {
     "hooks": {
       "description": "React hooks for common functionality like breakpoints, debouncing, local storage, and media queries",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "1.15.2",
+  "version": "1.15.3",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",