From 4bd21b5a2723fd7f06ebecd5da68ba30bdc37b55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ma=C3=AFeul?= <45822175+maiieul@users.noreply.github.com>
Date: Fri, 6 Dec 2024 14:21:03 +0800
Subject: [PATCH 1/3] Styled accordion 100 score on lighthouse (#1024)

* Revert "fix(select): types for multiple yes/no (#1021)"

This reverts commit 7a98c2c695a1c2f5e0f09a5e544370b3f4504ae1.

* docs(styled accordion): 100 score on lighthouse
---
 .changeset/shy-bottles-agree.md               |  5 --
 .changeset/tender-pens-run.md                 |  5 --
 .../docs/styled/accordion/examples/hero.tsx   |  2 +-
 .../routes/docs/styled/accordion/index.mdx    |  2 +
 .../src/components/modal/modal-trigger.tsx    |  1 +
 .../src/components/select/select-inline.tsx   |  6 +-
 .../src/components/select/select-root.tsx     | 57 ++++++++++++-------
 .../src/components/select/select.tsx          |  6 +-
 8 files changed, 45 insertions(+), 39 deletions(-)
 delete mode 100644 .changeset/shy-bottles-agree.md
 delete mode 100644 .changeset/tender-pens-run.md

diff --git a/.changeset/shy-bottles-agree.md b/.changeset/shy-bottles-agree.md
deleted file mode 100644
index 8e31e876c..000000000
--- a/.changeset/shy-bottles-agree.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@qwik-ui/styled': patch
----
-
-FIX: onChange not accepting regular functions
diff --git a/.changeset/tender-pens-run.md b/.changeset/tender-pens-run.md
deleted file mode 100644
index 57a8db21a..000000000
--- a/.changeset/tender-pens-run.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@qwik-ui/headless': patch
----
-
-FIX: types for multiple values
diff --git a/apps/website/src/routes/docs/styled/accordion/examples/hero.tsx b/apps/website/src/routes/docs/styled/accordion/examples/hero.tsx
index 3b80e8cc5..7aa564730 100644
--- a/apps/website/src/routes/docs/styled/accordion/examples/hero.tsx
+++ b/apps/website/src/routes/docs/styled/accordion/examples/hero.tsx
@@ -5,7 +5,7 @@ export default component$(() => {
   return (
     <Accordion.Root class="w-full">
       <Accordion.Item>
-        <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
+        <Accordion.Trigger header="h2">Is it accessible?</Accordion.Trigger>
         <Accordion.Content>
           Yes. It adheres to the WAI-ARIA design pattern.
         </Accordion.Content>
diff --git a/apps/website/src/routes/docs/styled/accordion/index.mdx b/apps/website/src/routes/docs/styled/accordion/index.mdx
index e8f40e295..4e8288429 100644
--- a/apps/website/src/routes/docs/styled/accordion/index.mdx
+++ b/apps/website/src/routes/docs/styled/accordion/index.mdx
@@ -1,9 +1,11 @@
 ---
 title: Qwik UI | Styled Accordion Component
+description: A vertically stacked set of interactive headings that each reveal a section of content. Copy/paste into your project from the documentation or by using the CLI. Easily customize the CVA variants according to your brand requirements.
 ---
 
 import { statusByComponent } from '~/_state/component-statuses';
 
+
 <StatusBanner status={statusByComponent.styled.Accordion} />
 
 # Accordion
diff --git a/packages/kit-headless/src/components/modal/modal-trigger.tsx b/packages/kit-headless/src/components/modal/modal-trigger.tsx
index 5b3dc37f5..113b4bf3c 100644
--- a/packages/kit-headless/src/components/modal/modal-trigger.tsx
+++ b/packages/kit-headless/src/components/modal/modal-trigger.tsx
@@ -11,6 +11,7 @@ export const HModalTrigger = component$((props: PropsOf<'button'>) => {
   return (
     <button
       aria-haspopup="dialog"
+      aria-label="Open Theme Customization Panel"
       aria-expanded={context.showSig.value}
       data-open={context.showSig.value ? '' : undefined}
       data-closed={!context.showSig.value ? '' : undefined}
diff --git a/packages/kit-headless/src/components/select/select-inline.tsx b/packages/kit-headless/src/components/select/select-inline.tsx
index ff6537b42..84e6b725b 100644
--- a/packages/kit-headless/src/components/select/select-inline.tsx
+++ b/packages/kit-headless/src/components/select/select-inline.tsx
@@ -1,4 +1,4 @@
-import { type JSXNode, type PublicProps } from '@builder.io/qwik';
+import { type JSXNode, Component } from '@builder.io/qwik';
 import { HSelectImpl, type SelectProps } from './select-root';
 import { HSelectItem as InternalSelectItem } from './select-item';
 import { HSelectItemLabel as InternalSelectItemLabel } from './select-item-label';
@@ -14,8 +14,8 @@ type InlineCompProps = {
   This is an inline component. An example use case of an inline component to get the proper indexes with CSR. See issue #4757
   for more information.
 */
-export const HSelectRoot = <M extends true>(
-  props: PublicProps<SelectProps<M> & InlineCompProps>,
+export const HSelectRoot: Component<SelectProps & InlineCompProps> = (
+  props: SelectProps & InlineCompProps,
 ) => {
   const {
     children: myChildren,
diff --git a/packages/kit-headless/src/components/select/select-root.tsx b/packages/kit-headless/src/components/select/select-root.tsx
index 060d1b9a3..449c9d812 100644
--- a/packages/kit-headless/src/components/select/select-root.tsx
+++ b/packages/kit-headless/src/components/select/select-root.tsx
@@ -32,24 +32,44 @@ export type InternalSelectProps = {
   _itemsMap: TItemsMap;
 };
 
-export type SelectProps<
-  M extends true,
-  T = boolean extends M ? string : M extends true ? string[] : string,
-> = Omit<PropsOf<'div'>, 'onChange$'> & {
+export type TMultiple<M> = M extends true ? string[] : string;
+
+/**
+ *  Value sets an initial value for the select. If multiple is true, value is disabled
+ *
+ */
+type TMultiValue =
+  | { multiple: true; value?: never }
+  | { multiple?: false; value?: string };
+
+type TStringOrArray =
+  | {
+    multiple?: true;
+    onChange$?: QRL<(value: string[]) => void>;
+  }
+  | {
+    multiple?: false;
+    onChange$?: QRL<(value: string) => void>;
+  };
+
+export type SelectProps<M extends boolean = boolean> = Omit<
+  PropsOf<'div'>,
+  'onChange$'
+> & {
   /** A signal that controls the current selected value (controlled). */
-  'bind:value'?: T extends string ? Signal<T> : never;
+  'bind:value'?: Signal<TMultiple<M>>;
 
   /** A signal that controls the current open state (controlled). */
   'bind:open'?: Signal<boolean>;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  'bind:displayValue'?: T extends string ? Signal<T> : never;
+  'bind:displayValue'?: Signal<TMultiple<M>>;
 
   /**
    * QRL handler that runs when a select value changes.
    * @param value The new value as a string.
    */
-  onChange$?: QRL<(value: T) => void>;
+  onChange$?: QRL<(value: TMultiple<M>) => void>;
   /**
    * QRL handler that runs when the listbox opens or closes.
    * @param open The new state of the listbox.
@@ -87,18 +107,13 @@ export type SelectProps<
    */
   multiple?: M;
 
-  /**
-   *  Value sets an initial value for the select. If multiple is true, value is disabled
-   *
-   */
-  value?: M extends false ? string : never;
-
   invalid?: boolean;
-};
+} & TMultiValue &
+  TStringOrArray;
 
 /* root component in select-inline.tsx */
-export const HSelectImpl = component$(
-  <M extends true, T>(props: SelectProps<M, T> & InternalSelectProps) => {
+export const HSelectImpl = component$<SelectProps<boolean> & InternalSelectProps>(
+  (props: SelectProps<boolean> & InternalSelectProps) => {
     const {
       _itemsMap,
       _valuePropIndex: givenValuePropIndex,
@@ -244,7 +259,7 @@ export const HSelectImpl = component$(
       }
 
       if (onChange$ && selectedIndexSetSig.value.size > 0) {
-        await onChange$(context.multiple ? (values as T) : (values[0] as T));
+        await onChange$(context.multiple ? values : values[0]);
       }
 
       // sync the user's given signal when an option is selected
@@ -254,9 +269,9 @@ export const HSelectImpl = component$(
 
         if (currUserSigValues !== newUserSigValues) {
           if (context.multiple) {
-            bindValueSig.value = values as T;
+            bindValueSig.value = values;
           } else {
-            bindValueSig.value = values[0] as T;
+            bindValueSig.value = values[0];
           }
         }
       }
@@ -266,8 +281,8 @@ export const HSelectImpl = component$(
       // sync the user's given signal for the display value
       if (bindDisplayTextSig && context.currDisplayValueSig.value) {
         bindDisplayTextSig.value = context.multiple
-          ? (context.currDisplayValueSig.value as T)
-          : (context.currDisplayValueSig.value[0] as T);
+          ? context.currDisplayValueSig.value
+          : context.currDisplayValueSig.value[0];
       }
     });
 
diff --git a/packages/kit-styled/src/components/select/select.tsx b/packages/kit-styled/src/components/select/select.tsx
index 65e88790f..7fb4bab3c 100644
--- a/packages/kit-styled/src/components/select/select.tsx
+++ b/packages/kit-styled/src/components/select/select.tsx
@@ -1,11 +1,9 @@
-import { type PropsOf, type PublicProps, Slot, component$ } from '@builder.io/qwik';
+import { type PropsOf, Slot, component$ } from '@builder.io/qwik';
 import { Select as HeadlessSelect } from '@qwik-ui/headless';
 import { cn } from '@qwik-ui/utils';
 import { LuCheck, LuChevronDown } from '@qwikest/icons/lucide';
 
-const Root = <M extends true>(
-  props: PublicProps<PropsOf<typeof HeadlessSelect.Root<M>>>,
-) => (
+const Root = (props: PropsOf<typeof HeadlessSelect.Root>) => (
   <HeadlessSelect.Root
     {...props}
     selectItemComponent={Item}

From d448ab829ce961a2bbf1cf15ab7fdf4b21b34c18 Mon Sep 17 00:00:00 2001
From: Jack Shelton <104264123+thejackshelton@users.noreply.github.com>
Date: Tue, 10 Dec 2024 18:24:03 -0600
Subject: [PATCH 2/3] fix: modal animation (#1018)

---
 .../src/components/modal/modal-panel.tsx             | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/kit-headless/src/components/modal/modal-panel.tsx b/packages/kit-headless/src/components/modal/modal-panel.tsx
index 98adc38f1..a62c76de7 100644
--- a/packages/kit-headless/src/components/modal/modal-panel.tsx
+++ b/packages/kit-headless/src/components/modal/modal-panel.tsx
@@ -53,11 +53,9 @@ export const HModalPanel = component$((props: PropsOf<'dialog'>) => {
 
       await showModal(panelRef.value);
       window.requestAnimationFrame = storedRequestAnimationFrame;
-      await context.onShow$?.();
       activateFocusTrap(focusTrap);
     } else {
       await closeModal(panelRef.value);
-      await context.onClose$?.();
     }
 
     cleanup(async () => {
@@ -65,6 +63,16 @@ export const HModalPanel = component$((props: PropsOf<'dialog'>) => {
     });
   });
 
+  useTask$(async ({ track }) => {
+    track(() => context.showSig.value);
+
+    if (context.showSig.value) {
+      await context.onShow$?.();
+    } else {
+      await context.onClose$?.();
+    }
+  });
+
   const closeOnBackdropClick$ = $(async (e: MouseEvent) => {
     if (context.alert === true || context.closeOnBackdropClick === false) {
       return;

From 0736b8432f0b6e7c841682e517f591479ed8b1a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ma=C3=AFeul?= <45822175+maiieul@users.noreply.github.com>
Date: Tue, 17 Dec 2024 16:31:11 +0100
Subject: [PATCH 3/3] chore: add /docs/* cache control (#1027)

---
 apps/website/public/_headers | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/website/public/_headers b/apps/website/public/_headers
index 0690cb420..555fe4134 100644
--- a/apps/website/public/_headers
+++ b/apps/website/public/_headers
@@ -2,3 +2,6 @@
 
 /build/*
   Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable
+
+/docs/*
+  Cache-Control: public, max-age=3600, s-maxage=3600
\ No newline at end of file