@esuiss/tailwind 0.5.6 → 0.5.7

package/README.md

@@ -7,4 +7,4 @@ The type scale, shadows, Tailwind CSS variants, animations, utilities, and base
 @import "@esuiss/tailwind";
 ```
 
-Your theme stays in your own stylesheet: colors under `:root` and `.dark`, and the `@theme inline` block that maps them to Tailwind classes. The type scale (`text-3xs` to `text-3xl`) comes from this package; to change a size, redefine it in your own `@theme` block, for example `--text-base: 1rem;`. The `shadow-md` and `shadow-lg` values come from this package as well and can be overridden the same way. Requires Tailwind CSS 4.2 or later.
+Your theme stays in your own stylesheet: colors under `:root` and `.dark`, and the `@theme inline` block that maps them to Tailwind classes. The type scale (`text-3xs` to `text-3xl`) comes from this package; to change a size, redefine it in your own `@theme` block, for example `--text-base: 1rem;`. The `shadow-md` and `shadow-lg` values come from this package as well and can be overridden the same way. Components draw their keyboard focus outline with the `focus-ring` utility; adjust it per element with the `--focus-ring-width`, `--focus-ring-offset` and `--focus-ring-color` variables. Requires Tailwind CSS 4.2 or later.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esuiss/tailwind",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "description": "Tailwind CSS variants, animations, utilities, and base styles for esuiss-ui components.",
   "keywords": [
     "tailwindcss",

package/tailwind.css

@@ -113,6 +113,12 @@
   }
 }
 
+@utility focus-ring {
+  outline: var(--focus-ring-width, 2px) solid
+    var(--focus-ring-color, var(--color-ring));
+  outline-offset: var(--focus-ring-offset, 1px);
+}
+
 @utility no-scrollbar {
   -ms-overflow-style: none;
   scrollbar-width: none;