@wakastellar/ui 3.5.0 → 4.0.0-dev.0

package/src/components/waka-address-autocomplete/WakaAddressAutocomplete.mdx

@@ -0,0 +1,63 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaAddressAutocomplete.stories'
+
+<Meta of={Stories} />
+
+# WakaAddressAutocomplete
+
+Address autocomplete bound to a geocoding provider; emits structured locality data.
+
+> ⚠️ **Composant en refactor.** Ce composant est marqué `refactor` dans l'audit (cf. `docs/audit/components/waka-address-autocomplete.md`). Il pourra être fusionné, scindé ou déplacé dans un sous-projet futur ; vérifiez la fiche d'audit avant tout usage massif.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaAddressAutocomplete } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-address-autocomplete`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### Disabled
+
+<Canvas of={Stories.Disabled} />
+
+### Minimal
+
+<Canvas of={Stories.Minimal} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/waka-address-autocomplete.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-address-autocomplete/WakaAddressAutocomplete.stories.tsx

@@ -5,7 +5,6 @@ const meta: Meta<typeof WakaAddressAutocomplete> = {
   title: "Forms/WakaAddressAutocomplete",
   component: WakaAddressAutocomplete,
   parameters: { layout: "centered" },
-  tags: ["autodocs"],
   argTypes: {
     placeholder: { control: "text", description: "Placeholder" },
     disabled: { control: "boolean", description: "Désactivé" },

package/src/components/waka-address-autocomplete/index.tsx

@@ -769,6 +769,11 @@ function SelectedAddressDisplay({
 // MAIN COMPONENT
 // ============================================
 
+/**
+ * @deprecated Since v3.6 — will be removed in v4.0.
+ * Use `WakaAutocomplete` with a Mapbox/Nominatim data-source preset instead.
+ * See `docs/audit/remove-relocate.md` §2.3.
+ */
 export const WakaAddressAutocomplete = React.forwardRef<
   HTMLInputElement,
   WakaAddressAutocompleteProps

package/src/components/waka-admincrumb/WakaAdmincrumb.stories.tsx

@@ -109,58 +109,80 @@ function InteractiveAdmincrumb({
 }
 
 export const Default: Story = {
-  render: () => <InteractiveAdmincrumb showIcons showBadges />,
+  args: {
+    showIcons: true,
+    showBadges: true,
+  },
+  render: (args) => <InteractiveAdmincrumb {...args} />,
 }
 
 export const WithSelection: Story = {
-  render: () => (
-    <InteractiveAdmincrumb
-      showIcons
-      showBadges
-      initialPartner={partnerItems[0]}
-      initialNetwork={networkItems[0]}
-    />
-  ),
+  args: {
+    showIcons: true,
+    showBadges: true,
+    initialPartner: partnerItems[0],
+    initialNetwork: networkItems[0],
+  },
+  render: (args) => <InteractiveAdmincrumb {...args} />,
 }
 
 export const NoBadges: Story = {
-  render: () => <InteractiveAdmincrumb showIcons showBadges={false} />,
+  args: {
+    showIcons: true,
+    showBadges: false,
+  },
+  render: (args) => <InteractiveAdmincrumb {...args} />,
 }
 
 export const WithHomeButton: Story = {
-  render: () => (
-    <InteractiveAdmincrumb
-      showIcons
-      showBadges
-      showHome
-      initialPartner={partnerItems[0]}
-    />
-  ),
+  args: {
+    showIcons: true,
+    showBadges: true,
+    showHome: true,
+    initialPartner: partnerItems[0],
+  },
+  render: (args) => <InteractiveAdmincrumb {...args} />,
 }
 
 export const Resetable: Story = {
-  render: () => (
-    <InteractiveAdmincrumb
-      showIcons
-      resetable
-      initialPartner={partnerItems[0]}
-      initialNetwork={networkItems[0]}
-    />
-  ),
+  args: {
+    showIcons: true,
+    resetable: true,
+    initialPartner: partnerItems[0],
+    initialNetwork: networkItems[0],
+  },
+  render: (args) => <InteractiveAdmincrumb {...args} />,
 }
 
 export const MinimalVariant: Story = {
-  render: () => <InteractiveAdmincrumb variant="minimal" showIcons />,
+  args: {
+    variant: "minimal",
+    showIcons: true,
+  },
+  render: (args) => <InteractiveAdmincrumb {...args} />,
 }
 
 export const PillsVariant: Story = {
-  render: () => <InteractiveAdmincrumb variant="pills" showIcons />,
+  args: {
+    variant: "pills",
+    showIcons: true,
+  },
+  render: (args) => <InteractiveAdmincrumb {...args} />,
 }
 
 export const InlineVariant: Story = {
-  render: () => <InteractiveAdmincrumb variant="inline" showIcons={false} />,
+  args: {
+    variant: "inline",
+    showIcons: false,
+  },
+  render: (args) => <InteractiveAdmincrumb {...args} />,
 }
 
 export const CompactVariant: Story = {
-  render: () => <InteractiveAdmincrumb variant="compact" showIcons showBadges={false} />,
+  args: {
+    variant: "compact",
+    showIcons: true,
+    showBadges: false,
+  },
+  render: (args) => <InteractiveAdmincrumb {...args} />,
 }

package/src/components/waka-admincrumb/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-internal` (workspace package
+ * `packages/ui-blocks-internal`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-blocks-internal'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-internal` in v3.6 — core copy will be removed in v4.0.
+ */
 import * as React from "react"
 import { ChevronRight, Search, Building2, Network, Users, X, Home, Filter } from "lucide-react"
 import { cn } from "../../utils"

package/src/components/waka-alert-panel/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-internal` (workspace package
+ * `packages/ui-blocks-internal`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-blocks-internal'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-internal` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"

package/src/components/waka-alert-stack/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-internal` (workspace package
+ * `packages/ui-blocks-internal`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-blocks-internal'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-internal` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"

package/src/components/waka-allocation-matrix/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-business` (workspace package
+ * `packages/ui-blocks-business`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-blocks-business'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-business` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"
@@ -705,6 +719,7 @@ function AllocationCell({
           onChange={(e) => setEditValue(e.target.value)}
           onKeyDown={handleKeyDown}
           onBlur={handleBlur}
+          aria-label="Allocation value (percent)"
           className={cn(
             "w-full h-full text-center bg-transparent outline-none",
             config.text,
@@ -977,6 +992,7 @@ export function WakaAllocationMatrix({
               <input
                 type="text"
                 placeholder="Search resources..."
+                aria-label="Search resources"
                 value={matrix.searchQuery}
                 onChange={(e) => matrix.setSearchQuery(e.target.value)}
                 className={cn(
@@ -987,6 +1003,7 @@ export function WakaAllocationMatrix({
               />
               {matrix.searchQuery && (
                 <button
+                  type="button"
                   onClick={() => matrix.setSearchQuery("")}
                   className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                 >
@@ -1004,6 +1021,7 @@ export function WakaAllocationMatrix({
                 {(["all", "over-allocated", "under-allocated", "unallocated"] as FilterMode[]).map(
                   (mode) => (
                     <button
+                      type="button"
                       key={mode}
                       onClick={() => matrix.setFilterMode(mode)}
                       className={cn(
@@ -1031,6 +1049,7 @@ export function WakaAllocationMatrix({
           {/* Sort controls */}
           <div className="flex items-center gap-2 ml-auto">
             <button
+              type="button"
               onClick={toggleRowSort}
               className={cn(
                 "flex items-center gap-1 px-3 py-1.5 border border-border rounded-lg",
@@ -1042,6 +1061,7 @@ export function WakaAllocationMatrix({
               Rows: {matrix.rowSort.field}
             </button>
             <button
+              type="button"
               onClick={toggleColumnSort}
               className={cn(
                 "flex items-center gap-1 px-3 py-1.5 border border-border rounded-lg",
@@ -1219,6 +1239,7 @@ export function WakaAllocationMatrix({
       {editable && onSave && (
         <div className="flex justify-end gap-2">
           <button
+            type="button"
             onClick={matrix.reset}
             className={cn(
               "px-4 py-2 border border-border rounded-lg",
@@ -1229,6 +1250,7 @@ export function WakaAllocationMatrix({
             Reset
           </button>
           <button
+            type="button"
             onClick={matrix.clearAll}
             className={cn(
               "px-4 py-2 border border-border rounded-lg",
@@ -1239,6 +1261,7 @@ export function WakaAllocationMatrix({
             Clear All
           </button>
           <button
+            type="button"
             onClick={handleSave}
             className={cn(
               "px-4 py-2 rounded-lg",

package/src/components/waka-approval-chain/WakaApprovalChain.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { WakaApprovalChain, type Approver } from "./index"
+import { WakaApprovalChain, type ApprovalStep } from "./index"
 
 const meta: Meta<typeof WakaApprovalChain> = {
   title: "Admin/WakaApprovalChain",
@@ -7,28 +7,27 @@ const meta: Meta<typeof WakaApprovalChain> = {
   parameters: { layout: "padded" },
   tags: ["autodocs"],
   argTypes: {
-    orientation: { control: "select", options: ["horizontal", "vertical"], description: "Orientation" },
+    variant: { control: "select", options: ["horizontal", "vertical"], description: "Orientation" },
     showComments: { control: "boolean", description: "Afficher les commentaires" },
-    interactive: { control: "boolean", description: "Mode interactif" },
   },
 }
 
 export default meta
 type Story = StoryObj<typeof WakaApprovalChain>
 
-const approvers: Approver[] = [
-  { id: "1", name: "Alice Martin", role: "Manager", status: "approved", date: new Date(Date.now() - 86400000), comment: "Approuvé" },
-  { id: "2", name: "Bob Dupont", role: "Finance", status: "approved", date: new Date(Date.now() - 43200000) },
-  { id: "3", name: "Charlie Bernard", role: "Directeur", status: "pending" },
+const steps: ApprovalStep[] = [
+  { id: "1", approver: { id: "a1", name: "Alice Martin", role: "Manager" }, status: "approved", timestamp: new Date(Date.now() - 86400000), comment: "Approuve" },
+  { id: "2", approver: { id: "a2", name: "Bob Dupont", role: "Finance" }, status: "approved", timestamp: new Date(Date.now() - 43200000) },
+  { id: "3", approver: { id: "a3", name: "Charlie Bernard", role: "Directeur" }, status: "pending" },
 ]
 
 export const Default: Story = {
-  args: { approvers, orientation: "horizontal", showComments: true },
+  args: { steps, variant: "horizontal", showComments: true },
   render: (args) => <WakaApprovalChain {...args} />,
 }
 
 export const Vertical: Story = {
-  args: { approvers, orientation: "vertical", showComments: true },
+  args: { steps, variant: "vertical", showComments: true },
   render: (args) => (
     <div style={{ maxWidth: 400 }}>
       <WakaApprovalChain {...args} />
@@ -38,18 +37,18 @@ export const Vertical: Story = {
 
 export const AllApproved: Story = {
   args: {
-    approvers: approvers.map(a => ({ ...a, status: "approved" as const, date: new Date() })),
-    orientation: "horizontal",
+    steps: steps.map(s => ({ ...s, status: "approved" as const, timestamp: new Date() })),
+    variant: "horizontal",
   },
   render: (args) => <WakaApprovalChain {...args} />,
 }
 
 export const Rejected: Story = {
   args: {
-    approvers: [
-      { ...approvers[0], status: "approved" as const },
-      { ...approvers[1], status: "rejected" as const, comment: "Budget insuffisant" },
-      { ...approvers[2], status: "skipped" as const },
+    steps: [
+      { ...steps[0], status: "approved" as const },
+      { ...steps[1], status: "rejected" as const, comment: "Budget insuffisant" },
+      { ...steps[2], status: "pending" as const },
     ],
     showComments: true,
   },
@@ -57,7 +56,6 @@ export const Rejected: Story = {
 }
 
 export const Interactive: Story = {
-  args: { approvers, interactive: true, showComments: true },
+  args: { steps, showComments: true, currentUserId: "a3" },
   render: (args) => <WakaApprovalChain {...args} />,
 }
-

package/src/components/waka-approval-chain/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-business` (workspace package
+ * `packages/ui-blocks-business`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-blocks-business'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-business` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"

package/src/components/waka-artifact-list/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-internal` (workspace package
+ * `packages/ui-blocks-internal`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-blocks-internal'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-internal` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"

package/src/components/waka-audit-log/index.tsx

@@ -1,3 +1,17 @@
+/**
+ * @deprecated SP1.relocates — Phase 1
+ *
+ * This surface has been relocated to `@wakastellar/ui-blocks-internal` (workspace package
+ * `packages/ui-blocks-internal`). The core `@wakastellar/ui` retains the original
+ * implementation for backward compatibility during phases 1–3 of the
+ * relocation plan; the duplicate will be removed in v4.0.
+ *
+ * Migration:
+ *   - Old: import { ... } from '@wakastellar/ui'
+ *   - New: import { ... } from '@wakastellar/ui-blocks-internal'
+ *
+ * @deprecated Moved to `@wakastellar/ui-blocks-internal` in v3.6 — core copy will be removed in v4.0.
+ */
 "use client"
 
 import * as React from "react"
@@ -711,6 +725,7 @@ function EventItem({ event, onEventClick, isNew }: EventItemProps) {
         {hasDetails && (
           <div className="mt-2">
             <button
+              type="button"
               className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
               onClick={(e) => {
                 e.stopPropagation()
@@ -733,6 +748,7 @@ function EventItem({ event, onEventClick, isNew }: EventItemProps) {
       {/* Click handler */}
       {onEventClick && (
         <button
+          type="button"
           className="absolute inset-0 opacity-0"
           onClick={() => onEventClick(event)}
           aria-label={`View details for ${event.description}`}
@@ -840,6 +856,7 @@ function FilterBar({ filters, onFilterChange, users, showSearch }: FilterBarProp
             <input
               type="text"
               placeholder="Search audit logs..."
+              aria-label="Search audit logs"
               value={searchValue}
               onChange={handleSearchChange}
               className="w-full pl-9 pr-4 py-2 text-sm rounded-lg border bg-background focus:outline-none focus:ring-2 focus:ring-ring"
@@ -848,6 +865,7 @@ function FilterBar({ filters, onFilterChange, users, showSearch }: FilterBarProp
         )}
 
         <button
+          type="button"
           className={cn(
             "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg border transition-colors",
             isOpen || hasActiveFilters
@@ -869,6 +887,7 @@ function FilterBar({ filters, onFilterChange, users, showSearch }: FilterBarProp
 
         {hasActiveFilters && (
           <button
+            type="button"
             className="inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded-lg border bg-background hover:bg-muted transition-colors"
             onClick={clearFilters}
           >
@@ -891,6 +910,7 @@ function FilterBar({ filters, onFilterChange, users, showSearch }: FilterBarProp
 
                 return (
                   <button
+                    type="button"
                     key={severity}
                     className={cn(
                       "px-3 py-1.5 rounded-lg text-xs font-medium transition-all",
@@ -921,6 +941,7 @@ function FilterBar({ filters, onFilterChange, users, showSearch }: FilterBarProp
 
                       return (
                         <button
+                          type="button"
                           key={type}
                           className={cn(
                             "px-2 py-1 rounded text-xs font-medium transition-all",
@@ -950,6 +971,7 @@ function FilterBar({ filters, onFilterChange, users, showSearch }: FilterBarProp
 
                   return (
                     <button
+                      type="button"
                       key={user.id}
                       className={cn(
                         "inline-flex items-center gap-2 px-2 py-1 rounded-lg text-xs font-medium transition-all",
@@ -974,6 +996,7 @@ function FilterBar({ filters, onFilterChange, users, showSearch }: FilterBarProp
             <div className="flex items-center gap-2">
               <input
                 type="date"
+                aria-label="Start date"
                 value={filters.startDate?.toISOString().split("T")[0] || ""}
                 onChange={(e) =>
                   onFilterChange({
@@ -986,6 +1009,7 @@ function FilterBar({ filters, onFilterChange, users, showSearch }: FilterBarProp
               <span className="text-xs text-muted-foreground">to</span>
               <input
                 type="date"
+                aria-label="End date"
                 value={filters.endDate?.toISOString().split("T")[0] || ""}
                 onChange={(e) =>
                   onFilterChange({
@@ -1017,6 +1041,7 @@ function ExportMenu({ onExport }: ExportMenuProps) {
   return (
     <div className="relative">
       <button
+        type="button"
         className="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg border bg-background hover:bg-muted transition-colors"
         onClick={() => setIsOpen(!isOpen)}
       >
@@ -1030,6 +1055,7 @@ function ExportMenu({ onExport }: ExportMenuProps) {
           <div className="fixed inset-0 z-10" onClick={() => setIsOpen(false)} />
           <div className="absolute right-0 top-full mt-1 z-20 w-40 bg-popover border rounded-lg shadow-lg overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200">
             <button
+              type="button"
               className="w-full px-3 py-2 text-sm text-left hover:bg-muted transition-colors flex items-center gap-2"
               onClick={() => {
                 onExport("csv")
@@ -1040,6 +1066,7 @@ function ExportMenu({ onExport }: ExportMenuProps) {
               Export as CSV
             </button>
             <button
+              type="button"
               className="w-full px-3 py-2 text-sm text-left hover:bg-muted transition-colors flex items-center gap-2"
               onClick={() => {
                 onExport("json")
@@ -1240,6 +1267,7 @@ export function WakaAuditLog({
           ) : (
             <div className="flex justify-center pt-4">
               <button
+                type="button"
                 className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border bg-background hover:bg-muted transition-colors"
                 onClick={onLoadMore}
               >

package/src/components/waka-autocomplete/WakaAutocomplete.mdx

@@ -0,0 +1,83 @@
+import { Meta, Canvas, Controls, Source, ArgTypes } from '@storybook/addon-docs/blocks'
+import * as Stories from './WakaAutocomplete.stories'
+
+<Meta of={Stories} />
+
+# WakaAutocomplete
+
+Single-select autocomplete with debounced async fetch.
+
+> ⚠️ **Composant en refactor.** Ce composant est marqué `refactor` dans l'audit (cf. `docs/audit/components/waka-autocomplete.md`). Il pourra être fusionné, scindé ou déplacé dans un sous-projet futur ; vérifiez la fiche d'audit avant tout usage massif.
+
+## Installation
+
+The component is exported from the root entry point of `@wakastellar/ui`:
+
+<Source language="tsx" code={`import { WakaAutocomplete } from '@wakastellar/ui'`} />
+
+If you use the CLI scaffolder:
+
+<Source language="bash" code={`npx wakastellar-ui add waka-autocomplete`} />
+
+## Usage
+
+<Canvas of={Stories.Default} />
+
+<Controls of={Stories.Default} />
+
+## Examples
+
+### With Description
+
+<Canvas of={Stories.WithDescription} />
+
+### Multiple
+
+<Canvas of={Stories.Multiple} />
+
+### Creatable
+
+<Canvas of={Stories.Creatable} />
+
+### With Groups
+
+<Canvas of={Stories.WithGroups} />
+
+### Loading
+
+<Canvas of={Stories.Loading} />
+
+### With Error
+
+<Canvas of={Stories.WithError} />
+
+### Disabled
+
+<Canvas of={Stories.Disabled} />
+
+
+## API Reference
+
+<ArgTypes of={Stories.Default} />
+
+## Accessibility
+
+- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, Arrow keys where applicable).
+- Compatible with screen readers via Radix UI primitives.
+- Focus ring visible at all times; never `outline: none` without a replacement.
+- Color contrast meets WCAG AA in both light and dark themes.
+
+## Theming
+
+All visual tokens are CSS custom properties consumed via Tailwind v4. Override
+in your app's `globals.css` to customize:
+
+<Source language="css" code={`:root {
+  --primary: oklch(0.65 0.18 250);
+  --primary-foreground: oklch(0.98 0 0);
+}`} />
+
+## Related
+
+- See the audit fiche: \`docs/audit/components/waka-autocomplete.md\`
+- See the [accessibility dimension report](?path=/docs/dimensions-accessibility--docs)

package/src/components/waka-autocomplete/WakaAutocomplete.stories.tsx

@@ -8,7 +8,6 @@ const meta: Meta<typeof WakaAutocomplete> = {
   parameters: {
     layout: "centered",
   },
-  tags: ["autodocs"],
   argTypes: {
     placeholder: {
       control: "text",