From 7f087887fadd299d476c3393aad3f83250951db4 Mon Sep 17 00:00:00 2001
From: Vitalii Dudnik <dudnikvtl@gmail.com>
Date: Fri, 13 Mar 2026 11:57:43 +0200
Subject: [PATCH] feat: enhance UI components with outline styles for better
 accessibility and visual consistency

---
 src/ui.button-link/config.ts           | 1 +
 src/ui.button-toggle/config.ts         | 2 +-
 src/ui.button/config.ts                | 2 +-
 src/ui.container-collapsible/config.ts | 2 +-
 src/ui.dropdown-link/config.ts         | 1 +
 src/ui.form-calendar/config.ts         | 2 +-
 src/ui.form-checkbox/config.ts         | 2 +-
 src/ui.form-input-file/config.ts       | 2 +-
 src/ui.form-input/config.ts            | 2 +-
 src/ui.form-radio/config.ts            | 2 +-
 src/ui.form-select/config.ts           | 4 ++--
 src/ui.form-switch/config.ts           | 2 +-
 src/ui.form-textarea/config.ts         | 2 +-
 src/ui.text-badge/config.ts            | 2 +-
 14 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/ui.button-link/config.ts b/src/ui.button-link/config.ts
index 1227fe2ab..d686983af 100644
--- a/src/ui.button-link/config.ts
+++ b/src/ui.button-link/config.ts
@@ -5,6 +5,7 @@ export default /*tw*/ {
       text-{color} decoration-{color} underline-offset-4
       hover:text-{color}-lifted hover:decoration-{color}-lifted
       active:text-{color}-accented active:decoration-{color}-accented
+      outline-solid outline-transparent
       focus-visible:outline-medium focus-visible:rounded-small
       focus-visible:outline-offset-4 focus-visible:outline-{color}
     `,
diff --git a/src/ui.button-toggle/config.ts b/src/ui.button-toggle/config.ts
index ed9b90d7b..008aa90df 100644
--- a/src/ui.button-toggle/config.ts
+++ b/src/ui.button-toggle/config.ts
@@ -58,7 +58,7 @@ export default /*tw*/ {
     variants: {
       split: {
         false: "border-0",
-        true: "border border-primary/75 outline-small outline-primary/75",
+        true: "border border-primary/75 outline-solid outline-small outline-primary/75",
       },
     },
     defaults: {
diff --git a/src/ui.button/config.ts b/src/ui.button/config.ts
index 5e4bc8708..d9dda8c07 100644
--- a/src/ui.button/config.ts
+++ b/src/ui.button/config.ts
@@ -2,7 +2,7 @@ export default /*tw*/ {
   button: {
     base: `
       flex items-center justify-center font-medium leading-snug! whitespace-nowrap
-      border border-solid transition cursor-pointer
+      border border-solid outline-solid outline-transparent transition cursor-pointer
       focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-{color}
       disabled:cursor-not-allowed disabled:outline-0 disabled:outline-offset-0
     `,
diff --git a/src/ui.container-collapsible/config.ts b/src/ui.container-collapsible/config.ts
index 021ed8d6b..751ac21da 100644
--- a/src/ui.container-collapsible/config.ts
+++ b/src/ui.container-collapsible/config.ts
@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: {
     base: `
-      relative inline-block h-max rounded-medium transition cursor-pointer outline-transparent
+      relative inline-block h-max rounded-medium transition cursor-pointer outline-solid outline-transparent
       focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-primary`,
     variants: {
       disabled: {
diff --git a/src/ui.dropdown-link/config.ts b/src/ui.dropdown-link/config.ts
index 0115e9811..3d7851e06 100644
--- a/src/ui.dropdown-link/config.ts
+++ b/src/ui.dropdown-link/config.ts
@@ -3,6 +3,7 @@ export default /*tw*/ {
     base: `
       {UDropdown}
       inline-flex gap-0.5 items-center justify-between rounded-small h-max
+      outline-solid outline-transparent
       focus-visible:outline-offset-4
     `,
     defaults: {
diff --git a/src/ui.form-calendar/config.ts b/src/ui.form-calendar/config.ts
index a0f011fed..51adcc383 100644
--- a/src/ui.form-calendar/config.ts
+++ b/src/ui.form-calendar/config.ts
@@ -56,7 +56,7 @@ export default /*tw*/ {
   timepicker: "mt-2 pl-1 pt-3 text-medium flex items-stretch justify-between gap-2 border-t border-muted",
   timepickerLabel: "w-full self-center",
   timepickerInputWrapper: `
-    flex items-center rounded-medium border border-solid border-default
+    flex items-center rounded-medium border border-solid border-default outline-solid outline-transparent
     hover:focus-within:border-primary focus-within:border-primary
     focus-within:outline focus-within:outline-small focus-within:outline-primary
   `,
diff --git a/src/ui.form-checkbox/config.ts b/src/ui.form-checkbox/config.ts
index ea4e5d592..bce9e13ae 100644
--- a/src/ui.form-checkbox/config.ts
+++ b/src/ui.form-checkbox/config.ts
@@ -12,7 +12,7 @@ export default /*tw*/ {
   },
   checkbox: {
     base: `
-      {>checkboxBase} ml-0 bg-default border border-solid border-default outline-transparent
+      {>checkboxBase} ml-0 bg-default border border-solid border-default outline-solid outline-transparent
       appearance-none p-0 print:color-adjust-exact inline-block align-middle bg-origin-border select-none shrink-0
       hover:border-lifted
       active:border-{color} active:bg-{color}/15
diff --git a/src/ui.form-input-file/config.ts b/src/ui.form-input-file/config.ts
index dff4fea78..8287168aa 100644
--- a/src/ui.form-input-file/config.ts
+++ b/src/ui.form-input-file/config.ts
@@ -3,7 +3,7 @@ export default /*tw*/ {
   dropzone: {
     base: `
       p-3 size-auto w-full bg-default transition
-      rounded-medium border border-solid border-default
+      rounded-medium border border-solid border-default outline-solid outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary
     `,
diff --git a/src/ui.form-input/config.ts b/src/ui.form-input/config.ts
index 9c09e40a6..a68e93570 100644
--- a/src/ui.form-input/config.ts
+++ b/src/ui.form-input/config.ts
@@ -12,7 +12,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex gap-3 w-full px-3 relative bg-default transition
-      border border-solid rounded-medium border-default outline-transparent
+      border border-solid rounded-medium border-default outline-solid outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,
diff --git a/src/ui.form-radio/config.ts b/src/ui.form-radio/config.ts
index 2d04455be..ac59675fd 100644
--- a/src/ui.form-radio/config.ts
+++ b/src/ui.form-radio/config.ts
@@ -3,7 +3,7 @@ export default /*tw*/ {
   radio: {
     base: `
       bg-default cursor-pointer transition
-      border border-solid border-default rounded-full outline-transparent
+      border border-solid border-default rounded-full outline-solid outline-transparent
       appearance-none p-0 print:color-adjust-exact inline-block align-middle bg-origin-border select-none shrink-0
       hover:border-lifted hover:checked:border-{color}
       active:border-{color} active:bg-{color}/15
diff --git a/src/ui.form-select/config.ts b/src/ui.form-select/config.ts
index 15e7d2554..b67ac282e 100644
--- a/src/ui.form-select/config.ts
+++ b/src/ui.form-select/config.ts
@@ -12,7 +12,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex flex-row-reverse justify-between w-full min-h-full box-border relative
-      rounded-medium border border-solid border-default bg-default outline-transparent
+      rounded-medium border border-solid border-default bg-default outline-solid outline-transparent
       hover:border-lifted hover:transition hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,
@@ -131,7 +131,7 @@ export default /*tw*/ {
     },
   },
   listbox: `
-    {UListbox} border-0 outline-1! outline-default
+    {UListbox} border-0 outline-solid outline-1! outline-default
     my-2 group-[*]/top:bottom-full group-[*]/top:top-auto top-full w-full
   `,
   i18n: {
diff --git a/src/ui.form-switch/config.ts b/src/ui.form-switch/config.ts
index 45f8b3811..999fc44ca 100644
--- a/src/ui.form-switch/config.ts
+++ b/src/ui.form-switch/config.ts
@@ -6,7 +6,7 @@ export default /*tw*/ {
   },
   wrapper: {
     base: `
-      flex items-center p-0.5 relative rounded-full outline-transparent cursor-pointer transition focus-within:transition
+      flex items-center p-0.5 relative rounded-full outline-solid outline-transparent cursor-pointer transition focus-within:transition
       focus-visible:outline focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-{color}
     `,
     variants: {
diff --git a/src/ui.form-textarea/config.ts b/src/ui.form-textarea/config.ts
index f6e5c7f3e..ff79a9467 100644
--- a/src/ui.form-textarea/config.ts
+++ b/src/ui.form-textarea/config.ts
@@ -15,7 +15,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex px-3 py-2 gap-3 w-full bg-default transition
-      rounded-medium border border-solid border-default outline-transparent
+      rounded-medium border border-solid border-default outline-solid outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,
diff --git a/src/ui.text-badge/config.ts b/src/ui.text-badge/config.ts
index 2cb470c94..35f845688 100644
--- a/src/ui.text-badge/config.ts
+++ b/src/ui.text-badge/config.ts
@@ -2,7 +2,7 @@ export default /*tw*/ {
   badge: {
     base: `
       inline-flex items-center justify-between py-1
-      border border-solid rounded-medium leading-none! outline-hidden
+      border border-solid rounded-medium leading-none! outline-solid outline-transparent
     `,
     variants: {
       variant: {