docs(combobox): fixup aria styles

qwikifiers · Dec 8, 2023 · 1ac6ad7 · 1ac6ad7
1 parent b3cd8c3
commit 1ac6ad7
Show file tree

Hide file tree

Showing 18 changed files with 18 additions and 18 deletions.
diff --git a/apps/website/src/routes/docs/headless/combobox/examples/animation.tsx b/apps/website/src/routes/docs/headless/combobox/examples/animation.tsx
@@ -65,7 +65,7 @@ export default component$(() => {
           optionRenderer$={(option: ResolvedOption, index: number) => (
             <ComboboxOption
               key={option.key}
-              class="hover:bg-accent group rounded-sm border-2 border-transparent px-2"
+              class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
               index={index}
               resolved={option}
             >

diff --git a/apps/website/src/routes/docs/headless/combobox/examples/auto-placement.tsx b/apps/website/src/routes/docs/headless/combobox/examples/auto-placement.tsx
@@ -51,7 +51,7 @@ export default component$(() => {
               optionRenderer$={(option: ResolvedOption, index: number) => (
                 <ComboboxOption
                   key={option.key}
-                  class="hover:bg-accent group rounded-sm border-2 border-transparent px-2"
+                  class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
                   index={index}
                   resolved={option}
                 >

diff --git a/apps/website/src/routes/docs/headless/combobox/examples/context.tsx b/apps/website/src/routes/docs/headless/combobox/examples/context.tsx
@@ -47,7 +47,7 @@ export const ContextChild = component$(() => {
             <ComboboxOption
               index={index}
               resolved={option}
-              class="hover:bg-accent group rounded-sm border-2 border-transparent px-2"
+              class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
             >
               <span class="duration-350 block transition-transform group-aria-selected:translate-x-[3px]">
                 <span>{option.label}</span>

diff --git a/apps/website/src/routes/docs/headless/combobox/examples/custom-filter.tsx b/apps/website/src/routes/docs/headless/combobox/examples/custom-filter.tsx
@@ -55,7 +55,7 @@ export default component$(() => {
           optionRenderer$={(option: ResolvedOption, index: number) => (
             <ComboboxOption
               key={option.key}
-              class="hover:bg-accent group rounded-sm border-2 border-transparent px-2"
+              class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
               index={index}
               resolved={option}
             >

diff --git a/apps/website/src/routes/docs/headless/combobox/examples/custom-keys.tsx b/apps/website/src/routes/docs/headless/combobox/examples/custom-keys.tsx
@@ -68,7 +68,7 @@ export default component$(() => {
               return (
                 <ComboboxOption
                   key={option.key}
-                  class="hover:bg-accent group flex justify-between rounded-sm border-2 border-transparent  px-2 aria-disabled:text-slate-600 aria-disabled:hover:bg-slate-700 aria-selected:border-slate-200 aria-selected:bg-slate-500"
+                  class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
                   index={index}
                   resolved={option}
                   onMouseEnter$={() => {

diff --git a/apps/website/src/routes/docs/headless/combobox/examples/default-label.tsx b/apps/website/src/routes/docs/headless/combobox/examples/default-label.tsx
@@ -33,7 +33,7 @@ export default component$(() => {
           optionRenderer$={(option: ResolvedOption, index: number) => (
             <ComboboxOption
               key={option.key}
-              class="hover:bg-accent group rounded-sm border-2 border-transparent px-2"
+              class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
               index={index}
               resolved={option}
             >

diff --git a/apps/website/src/routes/docs/headless/combobox/examples/disable-blur.tsx b/apps/website/src/routes/docs/headless/combobox/examples/disable-blur.tsx
@@ -53,7 +53,7 @@ export default component$(() => {
             optionRenderer$={(option: ResolvedOption, index: number) => (
               <ComboboxOption
                 key={option.key}
-                class="hover:bg-accent group rounded-sm border-2 border-transparent px-2"
+                class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
                 index={index}
                 resolved={option}
               >

diff --git a/apps/website/src/routes/docs/headless/combobox/examples/disabled.tsx b/apps/website/src/routes/docs/headless/combobox/examples/disabled.tsx
@@ -48,7 +48,7 @@ export default component$(() => {
           optionRenderer$={(option: ResolvedOption, index: number) => (
             <ComboboxOption
               key={option.key}
-              class="hover:bg-accent group rounded-sm border-2 border-transparent px-2"
+              class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
               index={index}
               resolved={option}
             >

diff --git a/apps/website/src/routes/docs/headless/combobox/examples/flip.tsx b/apps/website/src/routes/docs/headless/combobox/examples/flip.tsx
@@ -47,7 +47,7 @@ export default component$(() => {
             optionRenderer$={(option: ResolvedOption, index: number) => (
               <ComboboxOption
                 key={option.key}
-                class="hover:bg-accent group rounded-sm border-2 border-transparent px-2"
+                class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
                 index={index}
                 resolved={option}
               >

diff --git a/apps/website/src/routes/docs/headless/combobox/examples/gutter.tsx b/apps/website/src/routes/docs/headless/combobox/examples/gutter.tsx
@@ -51,7 +51,7 @@ export default component$(() => {
           optionRenderer$={(option: ResolvedOption, index: number) => (
             <ComboboxOption
               key={option.key}
-              class="hover:bg-accent group rounded-sm border-2 border-transparent px-2"
+              class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
               index={index}
               resolved={option}
             >

diff --git a/apps/website/src/routes/docs/headless/combobox/examples/hero.tsx b/apps/website/src/routes/docs/headless/combobox/examples/hero.tsx
@@ -62,7 +62,7 @@ export default component$(() => {
                 key={option.key}
                 resolved={option}
                 index={index}
-                class="hover:bg-accent group rounded-sm border-2 border-transparent px-2"
+                class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
               >
                 <span class="duration-350 block transition-transform group-aria-selected:translate-x-[3px]">
                   {myData.testLabel}

diff --git a/apps/website/src/routes/docs/headless/combobox/examples/hide.tsx b/apps/website/src/routes/docs/headless/combobox/examples/hide.tsx
@@ -56,7 +56,7 @@ export default component$(() => {
             optionRenderer$={(option: ResolvedOption, index: number) => (
               <ComboboxOption
                 key={option.key}
-                class="hover:bg-accent group rounded-sm border-2 border-transparent px-2"
+                class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
                 index={index}
                 resolved={option}
               >

diff --git a/apps/website/src/routes/docs/headless/combobox/examples/object.tsx b/apps/website/src/routes/docs/headless/combobox/examples/object.tsx
@@ -42,7 +42,7 @@ export default component$(() => {
           optionRenderer$={(option: ResolvedOption, index: number) => (
             <ComboboxOption
               key={option.key}
-              class="hover:bg-accent group rounded-sm border-2 border-transparent px-2"
+              class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
               index={index}
               resolved={option}
             >

diff --git a/apps/website/src/routes/docs/headless/combobox/examples/placement.tsx b/apps/website/src/routes/docs/headless/combobox/examples/placement.tsx
@@ -50,7 +50,7 @@ export default component$(() => {
             optionRenderer$={(option: ResolvedOption, index: number) => (
               <ComboboxOption
                 key={option.key}
-                class="hover:bg-accent group rounded-sm border-2 border-transparent px-2"
+                class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
                 index={index}
                 resolved={option}
               >

diff --git a/apps/website/src/routes/docs/headless/combobox/examples/shift.tsx b/apps/website/src/routes/docs/headless/combobox/examples/shift.tsx
@@ -53,7 +53,7 @@ export default component$(() => {
               optionRenderer$={(option: ResolvedOption, index: number) => (
                 <ComboboxOption
                   key={option.key}
-                  class="hover:bg-accent group rounded-sm border-2 border-transparent px-2"
+                  class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
                   index={index}
                   resolved={option}
                 >

diff --git a/apps/website/src/routes/docs/headless/combobox/examples/signal-binds.tsx b/apps/website/src/routes/docs/headless/combobox/examples/signal-binds.tsx
@@ -50,7 +50,7 @@ export default component$(() => {
               optionRenderer$={(option: ResolvedOption, index: number) => (
                 <ComboboxOption
                   key={option.key}
-                  class="hover:bg-accent group rounded-sm border-2 border-transparent px-2"
+                  class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
                   index={index}
                   resolved={option}
                 >

diff --git a/apps/website/src/routes/docs/headless/combobox/examples/sort-filter.tsx b/apps/website/src/routes/docs/headless/combobox/examples/sort-filter.tsx
@@ -59,7 +59,7 @@ export default component$(() => {
           optionRenderer$={(option: ResolvedOption, index: number) => (
             <ComboboxOption
               key={option.key}
-              class="hover:bg-accent group rounded-sm border-2 border-transparent px-2"
+              class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
               index={index}
               resolved={option}
             >

diff --git a/apps/website/src/routes/docs/headless/combobox/examples/string.tsx b/apps/website/src/routes/docs/headless/combobox/examples/string.tsx
@@ -58,7 +58,7 @@ export default component$(() => {
           optionRenderer$={(option: ResolvedOption, index: number) => (
             <ComboboxOption
               key={option.key}
-              class="hover:bg-accent group rounded-sm border-2 border-transparent px-2"
+              class="hover:bg-accent aria-disabled:text-muted-foreground aria-disabled:hover:bg-muted aria-selected:border-border aria-selected:bg-accent group flex justify-between rounded-sm border border-transparent px-2 aria-disabled:font-light aria-selected:cursor-pointer"
               index={index}
               resolved={option}
             >