Merge branch 'main' into tailwind-v4-tailwind-merge

Author: maiieul

apps/website/src/components/navigation-docs/navigation-docs.tsx

@@ -1,5 +1,5 @@
 import { PropsOf, component$ } from '@builder.io/qwik';
-import { Link, useLocation } from '@builder.io/qwik-city';
+import { useLocation } from '@builder.io/qwik-city';
 import { ComponentStatus } from '~/_state/component-status.type';
 import { StatusBadge } from '../component-status-badge/component-status-badge';
 import { cn } from '@qwik-ui/utils';
@@ -60,7 +60,7 @@ export const DocsNavigation = component$(
                   const isLinkActive = location.url.pathname === link.href;
                   return (
                     <li key={link.name + link.href}>
-                      <Link
+                      <a
                         class={cn(
                           buttonVariants({ look: 'ghost' }),
                           'rounded-base flex h-10 items-center font-sans',
@@ -78,7 +78,7 @@ export const DocsNavigation = component$(
                           <div>{link.name}</div>
                           {link.status && <StatusBadge status={link.status} />}
                         </div>
-                      </Link>
+                      </a>
                     </li>
                   );
                 })}

apps/website/src/routes/docs/headless/popover/index.mdx

@@ -5,12 +5,31 @@ title: Qwik UI | Popover
 import { statusByComponent } from '~/_state/component-statuses';
 import Styles from './examples/styles';
 
-import { ShowcaseHero, ShowcaseBasic, ShowcaseInspect, ShowcaseAuto, ShowcaseManual, ShowcaseProgrammatic, ShowcaseToggleEvent, ShowcaseFloating, ShowcasePlacement, ShowcaseCorners, ShowcaseFlip, ShowcaseGutter, ShowcaseStyling, ShowcaseAnimation, ShowcaseTransition } from './showcase-components';
-import { CodeSnippetFloatingCss, CodeSnippetPopoverCss, CodeSnippetBuildingBlocks } from './code-snippets';
+import {
+  ShowcaseHero,
+  ShowcaseBasic,
+  ShowcaseInspect,
+  ShowcaseAuto,
+  ShowcaseManual,
+  ShowcaseProgrammatic,
+  ShowcaseToggleEvent,
+  ShowcaseFloating,
+  ShowcasePlacement,
+  ShowcaseCorners,
+  ShowcaseFlip,
+  ShowcaseGutter,
+  ShowcaseStyling,
+  ShowcaseAnimation,
+  ShowcaseTransition,
+} from './showcase-components';
+import {
+  CodeSnippetFloatingCss,
+  CodeSnippetPopoverCss,
+  CodeSnippetBuildingBlocks,
+} from './code-snippets';
 
 <StatusBanner status={statusByComponent.headless.Popover} />
 
-
 # Popover
 
 A popup that goes above other content on the page. You can still interact with the rest of the page while the popover is open.
@@ -24,6 +43,7 @@ A popup that goes above other content on the page. You can still interact with t
     'Polyfill for unsupported browsers',
     'Executes code on interaction',
     'Float and position the popover',
+    'Supports RTL',
   ]}
 />
 
@@ -342,9 +362,15 @@ To read more about the popover API you can check it out on:
     },
     {
       name: 'floating',
-      type: 'boolean | TPlacement',
+      type: 'boolean | Placement',
       description: 'Enables extra JavaScript behavior for floating elements.',
     },
+    {
+      name: 'strategy',
+      type: 'absolute | fixed',
+      description:
+        'The strategy to use when positioning the floating element. The default value is absolute, which suites most cases, while fixed position might be better in legacy browsers like iOS 15.4.',
+    },
     {
       name: 'anchorRef',
       type: 'Signal',

apps/website/src/routes/docs/headless/tooltip/index.mdx

@@ -4,7 +4,19 @@ title: Qwik UI | Tooltip
 
 import { statusByComponent } from '~/_state/component-statuses';
 
-import { ShowcaseHero, ShowcaseFloating, ShowcasePlacement, ShowcaseFlip, ShowcaseGutter, ShowcaseStyling, ShowcaseAnimation, ShowcaseTransition, ShowcaseOnChange, ShowcaseBasic, ShowcaseComplex } from './showcase-components';
+import {
+  ShowcaseHero,
+  ShowcaseFloating,
+  ShowcasePlacement,
+  ShowcaseFlip,
+  ShowcaseGutter,
+  ShowcaseStyling,
+  ShowcaseAnimation,
+  ShowcaseTransition,
+  ShowcaseOnChange,
+  ShowcaseBasic,
+  ShowcaseComplex,
+} from './showcase-components';
 
 <StatusBanner status={statusByComponent.headless.Tooltip} />
 
@@ -25,6 +37,7 @@ A text label that appears when a user hovers, focuses, or touches an element.
     'Accessibility with ARIA roles and keyboard interactions',
     'Flipping to avoid overflow',
     'Automatic placement adjustment',
+    'Supports RTL',
   ]}
 />
 
@@ -42,9 +55,7 @@ export default component$(() => {
       <Tooltip.Trigger>
         <button>Hover or Focus me</button>
       </Tooltip.Trigger>
-      <Tooltip.Panel aria-label="Tooltip content">
-        Tooltip content here
-      </Tooltip.Panel>
+      <Tooltip.Panel aria-label="Tooltip content">Tooltip content here</Tooltip.Panel>
     </Tooltip.Root>
   );
 });

apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx

@@ -35,7 +35,7 @@ pnpm qwik-ui add input
 ### Step 1: Install the Headless Kit and qwikest icons
 
 ```zsh
-pnpm i -D @qwik-ui/headless @qwikest/icons tailwindcss-animate
+pnpm i -D @qwik-ui/headless @qwikest/icons tailwindcss-animate @qwik-ui/utils class-variance-authority
 ```
 
 ### Step 2: copy/paste your theme config

apps/website/src/routes/docs/styled/checkbox/index.mdx

@@ -30,22 +30,23 @@ qwik-ui add checkbox
 import { $, type PropsOf, component$ } from '@builder.io/qwik';
 import { cn } from '@qwik-ui/utils';
 
-export const Checkbox = component$<PropsOf<'input'>>(
-  ({ id, name, ['bind:checked']: checkedSig, checked, onInput$, ...props }) => {
+export const Checkbox = component$<Partial<PropsOf<'input'> & { type?: 'checkbox' }>>(
+  ({ id, name, ['bind:checked']: bindSig, checked, onInput$, ...props }) => {
     const inputId = id || name;
     return (
       <input
-        type="checkbox"
         {...props}
+        type="checkbox"
         // workaround to support two way data-binding on the Input component (https://github.com/QwikDev/qwik/issues/3926)
-        checked={checkedSig ? checkedSig.value : checked}
-        onInput$={checkedSig ? $((_, el) => (checkedSig.value = el.checked)) : onInput$}
-        data-checked={checked || checkedSig?.value || ''}
+        checked={bindSig ? bindSig.value : checked}
+        onInput$={[bindSig && $((_, el) => (bindSig.value = el.checked)), onInput$]}
+        data-checked={checked || bindSig?.value || ''}
         class={cn(
           'peer h-4 w-4 shrink-0 border-primary text-primary accent-primary ring-offset-background focus:ring-ring focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
           props.class,
         )}
         id={inputId}
+        name={name}
       />
     );
   },

apps/website/src/routes/docs/styled/input/index.mdx

@@ -31,26 +31,27 @@ type InputProps = PropsOf<'input'> & {
 };
 
 export const Input = component$<InputProps>(
-  ({ name, error, id, ['bind:value']: valueSig, value, onInput$, ...props }) => {
+  ({ name, error, id, ['bind:value']: bindSig, value, onInput$, ...props }) => {
     const inputId = id || name;
 
     return (
       <>
         <input
           {...props}
           aria-errormessage={`${inputId}-error`}
-          aria-invaid={!!error}
+          aria-invalid={!!error}
           // workaround to support two way data-binding on the Input component (https://github.com/QwikDev/qwik/issues/3926)
-          value={valueSig ? valueSig.value : value}
-          onInput$={valueSig ? $((__, el) => (valueSig.value = el.value)) : onInput$}
+          value={bindSig ? bindSig.value : value}
+          onInput$={[bindSig && $((_, el) => (bindSig.value = el.value)), onInput$]}
           class={cn(
             'flex h-12 w-full rounded-base border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
             props.class,
           )}
           id={inputId}
+          name={name}
         />
         {error && (
-          <div id={`${inputId}-error`} class="text-alert mt-1 text-sm">
+          <div id={`${inputId}-error`} class="mt-1 text-sm text-alert">
             {error}
           </div>
         )}

apps/website/src/routes/docs/styled/textarea/index.mdx

@@ -31,20 +31,21 @@ type TextareaProps = PropsOf<'textarea'> & {
 };
 
 export const Textarea = component$<TextareaProps>(
-  ({ id, name, error, ['bind:value']: valueSig, value, onInput$, ...props }) => {
+  ({ id, name, error, ['bind:value']: bindSig, value, onInput$, ...props }) => {
     const textareaId = id || name;
     return (
       <>
         <textarea
           {...props}
           // workaround to support two way data-binding on the Input component (https://github.com/QwikDev/qwik/issues/3926)
-          value={valueSig ? valueSig.value : value}
-          onInput$={valueSig ? $((__, el) => (valueSig.value = el.value)) : onInput$}
+          value={bindSig ? bindSig.value : value}
+          onInput$={[bindSig && $((_, el) => (bindSig.value = el.value)), onInput$]}
           class={cn(
             '[&::-webkit-scrollbar-track]:bg-blue flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
             props.class,
           )}
           id={textareaId}
+          name={name}
         />
         {error && <div id={`${textareaId}-error`}>{error}</div>}
       </>

cla-signs/v1/cla.json

@@ -591,6 +591,22 @@
       "created_at": "2025-06-14T18:27:16Z",
       "repoId": 545159943,
       "pullRequestNo": 1109
+    },
+    {
+      "name": "Caesarovich",
+      "id": 38408878,
+      "comment_id": 3027890969,
+      "created_at": "2025-07-02T13:27:28Z",
+      "repoId": 545159943,
+      "pullRequestNo": 1110
+    },
+    {
+      "name": "ignatvilesov",
+      "id": 4927804,
+      "comment_id": 3061111709,
+      "created_at": "2025-07-11T07:57:53Z",
+      "repoId": 545159943,
+      "pullRequestNo": 1114
     }
   ]
 }

packages/kit-headless/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.7.0
+
+### Minor Changes
+
+- minor: adds strategy prop to use when positioning the floating element in popover (by [@ignatvilesov](https://github.com/ignatvilesov) in [#1114](https://github.com/qwikifiers/qwik-ui/pull/1114))
+
+### Patch Changes
+
+- 🐞🩹 Modal.Close now of type button (by [@Caesarovich](https://github.com/Caesarovich) in [#1110](https://github.com/qwikifiers/qwik-ui/pull/1110))
+
+- Support rtl for elements using floating ui (by [@omerman](https://github.com/omerman) in [#1109](https://github.com/qwikifiers/qwik-ui/pull/1109))
+
 ## 0.6.8
 
 ### Patch Changes

packages/kit-headless/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwik-ui/headless",
-  "version": "0.6.8",
+  "version": "0.7.0",
   "description": "Qwik UI headless components library",
   "publishConfig": {
     "access": "public"