@exxatdesignux/ui 0.2.9 → 0.2.11

package/consumer-extras/cursor-skills/exxat-card-vs-list-rows/SKILL.md

@@ -0,0 +1,20 @@
+# Exxat DS — cards vs rows vs lists
+
+Use when choosing **card grids**, **`DataTable`**, or **simple list rows** for a surface.
+
+## Read first
+
+- **`docs/card-vs-rows-pattern.md`**
+- **`.cursor/rules/exxat-card-vs-list-rows.mdc`**, **`exxat-data-tables.mdc`**, **`exxat-board-cards.mdc`**
+- **`exxat-centralized-list-dataset.mdc`** — one `tableState.rows` for table + board + cards
+
+## Checklist
+
+1. **10+ homogeneous records + compare/sort/filter?** → **`DataTable`** + hub template.
+2. **Kanban / visual tiles / folders?** → **`ListPageBoardCard`** or **`ListPageViewFrame`** + card primitives.
+3. **Medium vertical list without full table chrome?** → List row pattern; **promote** to `DataTable` when density and parity demand it.
+
+## MUST NOT
+
+- Card wall for the **primary** sortable hub that other hubs implement as **`DataTable`** without product reason.
+- Second mock row source for cards vs table.

package/consumer-extras/cursor-skills/exxat-collaboration-access/SKILL.md

@@ -0,0 +1,33 @@
+---
+name: exxat-collaboration-access
+description: Shared hub collaboration — PageHeader face rail, InviteCollaboratorsDrawer, library access vs directory role tags. Use when adding invite people, access roster, or collaboration variant headers.
+user-invocable: true
+---
+
+# Exxat DS — collaboration & access
+
+**Handbook:** `apps/web/AGENTS.md` §4.7  
+**Narrative:** `apps/web/docs/collaboration-access-pattern.md`  
+**Cursor rule:** `.cursor/rules/exxat-collaboration-access.mdc`
+
+## Wiring checklist
+
+1. **`PageHeaderCollaborator`** — `name`, `email`, `access`, optional `roles[]`, avatar fields (`components/page-header.tsx`).
+2. **Mock/API** — `lib/mock/<entity>-header-collaborators.ts`; one shape for header + invite sheet.
+3. **Entity header** — `variant="collaboration"`; **Invite people** first in **⋯ More**; pass **`onAddCollaborator`** and **`onCollaboratorsOpen`**.
+4. **Hub client** — **`CollaborationAccessFlow`** (preferred) or `collaborators` + `inviteOpen` + **`InviteCollaboratorsDrawer`**; on invite, append to **`collaborators`**.
+5. **Access maps** — `lib/collaborator-access.ts` for Owner / Editor / Commenter / Viewer, invite options, and **`COLLABORATION_HEADER_ADD_LABEL`**.
+6. **Header** — empty roster → outline **Add collaborator**; non-empty → face rail; both open the invite sheet.
+7. **Invite sheet** — `InviteCollaboratorsDrawer`: export-style **`Sheet`**, combined email + access menu, grouped roster (name → email → role tags → access badge).
+
+## MUST NOT
+
+- A second invite control beside a populated face rail.
+- Per-hub access label forks or parallel collaborator types.
+- Toast/snackbar for invite outcomes (**`exxat-no-toast.mdc`**).
+- **`Select`** in **`InputGroupAddon`** for access inside the sheet.
+
+## Reference
+
+- `components/collaboration-access-flow.tsx`, `components/question-bank-page-header.tsx`, `components/question-bank-client.tsx`
+- `components/invite-collaborators-drawer.tsx`, `components/export-drawer.tsx`

package/consumer-extras/cursor-skills/exxat-dedicated-search-surfaces/SKILL.md

@@ -0,0 +1,45 @@
+---
+name: exxat-dedicated-search-surfaces
+description: >-
+  Dedicated search landing vs results split, URL composer, recents storage, and templates
+  (generic DedicatedSearch*). Use when adding a route pair like empty ?q= landing + ListPageTemplate results,
+  or wiring localStorage recents without hydration mismatches.
+---
+
+# Dedicated search surfaces (Exxat DS)
+
+## When to use
+
+- A hub exposes **two URL states** on the same feature: **landing** (no primary query / empty `?q=`) vs **results** (non-empty query drives `ListPageTemplate` / `DataTable`).
+- You need an **AI-style composer** that **updates the URL** with `router.replace` and **does not** open Ask Leo.
+- You need **recent searches** persisted in `localStorage` **without** SSR/client markup drift.
+
+## MUST
+
+1. **Hydration-safe recents** — **MUST NOT** read `localStorage` in `useState` initializers. Initial client paint **MUST** match the server (`[]` then `useEffect` sync). See **`DedicatedSearchRecents`**.
+2. **Generic names** — Reusable pieces live under **`DedicatedSearch*`** (`components/dedicated-search-*.tsx`, **`components/templates/dedicated-search-*-template.tsx`**, **`lib/dedicated-search-*.ts`**). Hub code passes **`patchSearchParams`**, **`recents` controller**, copy, and entity table — **MUST NOT** fork parallel “question search landing” components for a second hub.
+3. **Landing shell** — Use **`DedicatedSearchLandingTemplate`** (`ListPageViewFrame` + title + composer slot + optional trailing).
+4. **Results chrome** — Reuse **`DEDICATED_SEARCH_RESULTS_OUTER_CONTENT_CLASSNAME`** on the hub content wrapper and **`DedicatedSearchResultsHeaderChrome`** around page header + composer strip.
+5. **Namespaces recents** — Use **`createDedicatedSearchRecentsController(namespace, legacy?)`** from **`lib/dedicated-search-recents.ts`**. When replacing an existing storage key, pass **`legacy: { storageKey, eventName }`** so users do not lose saved rows.
+
+## MUST NOT
+
+- Gate render on **`typeof window`** for the **first** paint of recents or landing bodies.
+- Duplicate the landing vertical rhythm (`mt-*` between title, composer, recents) outside the template without updating the template for product-wide consistency.
+
+## References (apps/web)
+
+| Piece | Path |
+|-------|------|
+| Landing template | `components/templates/dedicated-search-landing-template.tsx` |
+| Results chrome | `components/templates/dedicated-search-results-template.tsx` |
+| URL composer | `components/dedicated-search-url-composer.tsx` |
+| Recents list | `components/dedicated-search-recents.tsx` |
+| Recents storage factory | `lib/dedicated-search-recents.ts` |
+| Optional default `q` patcher | `lib/dedicated-search-url.ts` |
+| Question bank adapter (placeholders + patch) | `lib/question-bank-dedicated-search.ts` |
+| Question bank wiring | `components/question-bank-client.tsx` |
+
+## Cursor rule
+
+- **`.cursor/rules/exxat-dedicated-search-surfaces.mdc`**

package/consumer-extras/cursor-skills/exxat-drawer-vs-dialog/SKILL.md

@@ -0,0 +1,20 @@
+# Exxat DS — drawer vs dialog
+
+Use when choosing **Radix `Dialog` / `AlertDialog`** vs **`Sheet` / `Drawer`** vs **route** for a flow.
+
+## Read first
+
+- **`docs/drawer-vs-dialog-pattern.md`**
+- **`AGENTS.md` §6.4** + **`docs/data-views-pattern.md`** (page vs drawer)
+- **`.cursor/rules/exxat-drawer-vs-dialog.mdc`**, **`exxat-page-vs-drawer.mdc`**
+
+## Checklist
+
+1. **Must the user see the hub while acting?** Yes → **drawer/sheet** (properties, export, invite). No and short → **dialog**. Long / own URL → **route**.
+2. **Destructive confirm?** Prefer **dialog** (`AlertDialog`) unless the product explicitly keeps context in a drawer with the same safeguards.
+3. **Title + focus** — Dialog/drawer/sheet all need an accessible **title**; restore focus to trigger on close.
+
+## Repo references
+
+- `TablePropertiesDrawer`, `ExportDrawer`, `InviteCollaboratorsDrawer` — drawer-class.
+- Delete / irreversible — dialog pattern, not toast (**`exxat-no-toast.mdc`**).

package/consumer-extras/cursor-skills/exxat-ds-skill/SKILL.md

@@ -21,7 +21,7 @@ description: >
 - **Stack:** Next.js 16 (App Router), React, TypeScript, Tailwind CSS, shadcn/ui primitives, Font Awesome icons
 - **App root:** `exxat-ds/app/(app)/` — route group that wraps all authenticated pages
 - **Single source of truth:** `exxat-ds/AGENTS.md` for full prose explanations; this skill is the actionable summary
-- **Companion skills (narrow topics):** `exxat-fontawesome-icons`, `exxat-primary-nav-secondary-panel`, `exxat-centralized-list-dataset`, `exxat-list-page-view-shells`, `exxat-accessibility`, `exxat-board-cards` — live under `.cursor/skills/`; vetted copies ship with **`@exxatdesignux/ui`** in `consumer-extras/cursor-skills/` after **`pnpm --filter @exxatdesignux/ui vendor:consumer-extras`**.
+- **Companion skills (narrow topics):** `exxat-fontawesome-icons`, `exxat-primary-nav-secondary-panel`, `exxat-centralized-list-dataset`, `exxat-list-page-view-shells`, `exxat-dedicated-search-surfaces`, `exxat-accessibility`, `exxat-board-cards`, `exxat-collaboration-access` — live under `.cursor/skills/`; vetted copies ship with **`@exxatdesignux/ui`** in `consumer-extras/cursor-skills/` after **`pnpm --filter @exxatdesignux/ui vendor:consumer-extras`**.
 
 ---
 
@@ -88,7 +88,7 @@ To add a primary nav item, append to `NAV_PRIMARY`:
 | Concern | Pattern |
 |--------|---------|
 | **Product (One / Prism)** | **`ExxatProductLogo`** (`components/exxat-product-logo.tsx`) for the header control and **`ProductSwitcher`** — **not** logo.dev rasters unless product explicitly changes that. |
-| **School/program menu width** | **`DropdownMenuContent`** ships with **`w-(--radix-dropdown-menu-trigger-width)`**, so the panel matches the **narrow sidebar trigger** and long names wrap too early. For **`TeamSwitcher`**, override with e.g. **`!w-max min-w-72 max-w-[min(100vw-2rem,28rem)]`**. |
+| **School/program menu width** | **`DropdownMenuContent`** defaults to **intrinsic width** (**`min-w-52 w-max max-w-[min(24rem,calc(100vw-2rem))]`** via **`DROPDOWN_MENU_CONTENT_SURFACE_CLASS`** in **`@exxatdesignux/ui/lib/dropdown-menu-surface`**) — pure CSS, no **`ResizeObserver`**. The **school / program** switcher still uses an explicit wider surface (**`!w-max min-w-72 max-w-[min(100vw-2rem,28rem)]`**) so dense rows stay readable. |
 | **School/program copy** | **Do not truncate** school or program names in the switcher; wrap (**`break-words`**, **`whitespace-normal`**, **`items-start`** on multi-line rows). The selected-school summary shows **school name + current program**. |
 | **Team switcher trigger** | **`SidebarMenuButton` `size="lg"`** uses **`h-12`** + **`overflow-hidden`**, which **clips** a second line (program). When the sidebar is **expanded** or **mobile**, add **`h-auto min-h-12`** and **`overflow-x-clip overflow-y-visible`**. On **icon rail**, hide label rows with **`group-data-[collapsible=icon]:hidden`** (tooltip still exposes the full string). Icon mode defaults **`size-8` + `p-2`** (~16px inner) **clips** school logos — override **`!size-9`**, **`!p-0`**, **`overflow-visible`**. Omit header **chevrons** next to logos if they look like stray chrome. |
 | **Motion / Animate UI** | [Animate UI](https://animate-ui.com/docs) — open **copy-first** animated components (Motion + Tailwind). This repo uses **`motion/react`** + **`lib/motion-ui.ts`** presets; pull more animations from their registry into `components/` when needed. |
@@ -130,9 +130,10 @@ ListPageTemplate
 ### Page vs drawer (actions)
 
 - **Drawer / sheet** — Use when the user needs **the current page behind them** *and* a **quick view**, **quick actions**, or a **short step** (e.g. properties, export, glance at a row).
+- **Dialog** — **Blocking** confirm/alert/short choice — **`docs/drawer-vs-dialog-pattern.md`**, **`.cursor/rules/exxat-drawer-vs-dialog.mdc`**.
 - **New page** — Use **otherwise**: **primary**, **long-form**, **multi-step**, or flows that need their **own URL** without the hub visible.
 
-Align with **`exxat-ds/AGENTS.md` §6.4**, **`docs/data-views-pattern.md`**, **`.cursor/rules/exxat-page-vs-drawer.mdc`**.
+Align with **`exxat-ds/AGENTS.md` §6.4**, **`docs/data-views-pattern.md`**, **`docs/drawer-vs-dialog-pattern.md`**, **`.cursor/rules/exxat-page-vs-drawer.mdc`**, **`.cursor/rules/exxat-drawer-vs-dialog.mdc`**.
 
 ---
 
@@ -179,6 +180,25 @@ Align with **`exxat-ds/AGENTS.md` §6.4**, **`docs/data-views-pattern.md`**, **`
 - `select` column: `defaultPin: "left"`, `lockPin: true`
 - `actions` column: `defaultPin: "right"`, `lockPin: true`
 
+### 5.1 Data table and view-toolbar menus
+
+**`DropdownMenuContent`** (from **`@/components/ui/dropdown-menu`**, backed by **`@exxatdesignux/ui`**) applies a **default surface** so **view settings**, **Add view**, **row ⋯**, **column ⋯**, and **filter field** menus get **`min-w-52`**, grow with **`w-max`**, and cap at **`max-w-[min(24rem,calc(100vw-2rem))]`** — all **static Tailwind** (no **`ResizeObserver`** / layout measurement).
+
+- **Override** only when the UX needs a fixed rail (e.g. **`className="w-20"`** on the pagination page-size menu, **`w-(--radix-dropdown-menu-trigger-width) min-w-60`** on **`NavUser`**, **`!w-max min-w-72 …`** on the school/program switcher).
+- **Reuse** **`DROPDOWN_MENU_CONTENT_SURFACE_CLASS`** if you build a custom menu primitive that does not wrap **`DropdownMenuContent`**.
+
+### 5.2 KPI trends (`KeyMetrics`, `*-kpi.ts`)
+
+**`MetricItem.trend`** must match the **signed change** (arrow direction = truth). **`trendPolarity`** (`higher_is_better` default, **`lower_is_better`**, **`informational`**) controls **tints** and **`aria-label`** — e.g. **low PBI / review flags** rising → `trend: "up"` + **`lower_is_better`** → unfavourable (red), not green. **Doc:** **`docs/kpi-trend-pattern.md`** · **Rule:** **`.cursor/rules/exxat-kpi-trends.mdc`** · **Skill:** **`.cursor/skills/exxat-kpi-trends/SKILL.md`**.
+
+### 5.3 KPI count (max four)
+
+**`ListPageTemplate`** metrics and **Data tab** key-metrics cards: **≤ 4** `MetricItem` — **`docs/kpi-strip-max-four-pattern.md`**, **`lib/dashboard-layout-merge.ts`**, **`.cursor/rules/exxat-kpi-max-four.mdc`**, **`.cursor/skills/exxat-kpi-max-four/SKILL.md`**.
+
+### 5.4 Cards vs table rows
+
+Dense comparable hub → **`DataTable`**. Boards / folders / visual browse → **`ListPageBoardCard`** + **`ListPageViewFrame`**. **Doc:** **`docs/card-vs-rows-pattern.md`** · **Rule:** **`.cursor/rules/exxat-card-vs-list-rows.mdc`**.
+
 **DataTable must wrap in `<div className="pb-6">`.**
 
 ---
@@ -207,7 +227,7 @@ Use `PageHeader` from `@/components/page-header` for the content-area header (be
             </Button>
           </DropdownMenuTrigger>
         </Tip>
-        <DropdownMenuContent align="end" className="w-52">
+        <DropdownMenuContent align="end">
           <DropdownMenuItem onClick={onExport}>
             <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
             Export
@@ -230,6 +250,12 @@ Use `PageHeader` from `@/components/page-header` for the content-area header (be
 - Subtitle: `"{count} items · Last updated now"` format
 - Title uses Ivy Presto (`font-heading` variable) — applied automatically by `PageHeader`
 
+### 6.1 Collaboration & access (shared hubs)
+
+When a hub is **shared**, use **`PageHeader` `variant="collaboration"`**: **empty roster** → outline **Add collaborator**; **non-empty** → face rail (faces / **`+N`** open the invite sheet). **Invite people** also lives under the entity header **⋯ More** and opens **`InviteCollaboratorsDrawer`** via **`CollaborationAccessFlow`** when possible. Library access (Owner / Editor / Commenter / Viewer) comes from **`lib/collaborator-access.ts`**; directory tags (Faculty, Program coordinator, Director) use **`PageHeaderCollaborator.roles`**.
+
+**Handbook:** `apps/web/AGENTS.md` §4.7 · **Doc:** `docs/collaboration-access-pattern.md` · **Skill:** `.cursor/skills/exxat-collaboration-access/SKILL.md` · **Reference:** Question bank header + client.
+
 ---
 
 ## 7. Navigation: Breadcrumbs vs Back Link
@@ -281,7 +307,7 @@ Never install new packages or create parallel components. Always use what exists
 | Color | CSS design tokens only — no hardcoded hex/rgb |
 | Minimum font size | **`text-xs`** (11px at 16px root via `--text-xs`) or larger — never arbitrary classes below 11px (`AGENTS.md` §8.3) |
 
-Before adding any component: search `components/ui/` first. Add a prop/variant to an existing component rather than creating a parallel one.
+Before adding any component: search `components/ui/` first. Add a prop/variant to an existing component rather than creating a parallel one. **If nothing fits** and you need a **new shared primitive or large bespoke widget**, **ask the user** before new files — **`.cursor/rules/exxat-reuse-before-custom.mdc`** (unless the task already approved greenfield).
 
 ---
 

package/consumer-extras/cursor-skills/exxat-kpi-max-four/SKILL.md

@@ -0,0 +1,19 @@
+# Exxat DS — KPI strip (max four)
+
+Use when building **`KeyMetrics`** on **`ListPageTemplate`** or **Data tab** key-metrics cards.
+
+## Read first
+
+- **`docs/kpi-strip-max-four-pattern.md`**
+- **`lib/dashboard-layout-merge.ts`** — `KEY_METRICS_KPI_COUNT_MAX`, `clampKeyMetricsKpiCount`
+- **`.cursor/rules/exxat-kpi-max-four.mdc`**
+
+## Checklist
+
+1. **`entityKpiMetrics`** returns **at most four** `MetricItem` for those surfaces (or `.slice(0, 4)` after priority sort).
+2. **Extra metrics** → `MetricInsight` description, a chart, or another card — not a fifth tile.
+3. **Dashboard persistence** — Respect clamped `keyMetricsKpiCount` (1–4); never bump max without design approval.
+
+## Related
+
+- **`docs/kpi-trend-pattern.md`** — deltas and `trendPolarity`.

package/consumer-extras/cursor-skills/exxat-kpi-trends/SKILL.md

@@ -0,0 +1,27 @@
+# Exxat DS — KPI trend arrows and polarity
+
+Use when adding or reviewing **`KeyMetrics`**, **`lib/mock/*-kpi.ts`** helpers, or **`ChartCard`** **`miniMetrics`** / **`kpi-chart`** trends.
+
+## Authoritative references
+
+- **`apps/web/docs/kpi-trend-pattern.md`** — product table + psychometrics example (PBI).
+- **`.cursor/rules/exxat-kpi-trends.mdc`** — binding MUST/MUST NOT.
+- **`apps/web/components/key-metrics.tsx`** — `MetricTrendPolarity`, `metricTrendTone`, `metricTrendAriaQualifier`, `MetricCell` rendering.
+
+## Checklist (new or changed KPI)
+
+1. **Delta honest?** `trend` follows the sign of the change vs the comparison period.
+2. **Polarity correct?** If “more” is bad → **`trendPolarity: "lower_is_better"`**. If no value judgment → **`"informational"`** (muted tints).
+3. **Copy contextual?** Label + value + delta tell users *what* moved, not only *how much*.
+4. **Screen readers** — Chip keeps icon + visible delta; `aria-label` reflects favorable / unfavorable wording automatically when polarity is set.
+5. **Chart cards** — When using **`ChartCard`** `miniMetrics`, pass **`trendPolarity`** the same way as on **`MetricItem`**.
+
+## Quick examples
+
+| Metric | More is… | `trendPolarity` |
+| --- | --- | --- |
+| Total placements | Better (capacity) | default / `higher_is_better` |
+| Pass rate | Better | `higher_is_better` |
+| Open incidents | Worse | `lower_is_better` |
+| Low PBI / review flags | Worse | `lower_is_better` |
+| Items by type (mix %) | Neutral | `informational` |

package/consumer-extras/cursor-skills/exxat-primary-nav-secondary-panel/SKILL.md

@@ -15,6 +15,7 @@ user-invocable: true
 2. **`components/secondary-panel.tsx`** — add **`PANELS["<id>"]`** → panel shell (title, optional search) + secondary nav component.
 3. **Hub client** — mount **`*PanelActivator`** with **`useAutoPanel("<id>")`** (same id) for the lifetime of the route (e.g. `QuestionBankPanelActivator`).
 4. **Data** — keep **one** **`useTableState`** / **`tableState.rows`**; drive scope from **URL** + small helpers (see **`lib/question-bank-nav.ts`**).
+5. **Collapse control** — the nested rail header uses **`collapseActiveSecondaryPanel()`** (angles-left icon), not “close”, so the panel stays dismissed until **`openPanel`** runs again (nav, scope hook, or hub re-entry). Layout effects that auto-call **`openPanel`** must respect **`secondaryPanelAutoReopenSuppressed`** (see **`app/(app)/question-bank/layout.tsx`** + **`SecondaryPanelProvider`**).
 
 ## MUST NOT
 

package/consumer-extras/patterns/collaboration-access-pattern.md

@@ -0,0 +1,114 @@
+# Collaboration & access pattern
+
+Shared UI for **who can access a hub** (face stack in the header) and **inviting people** (floating sheet). **Reference:** Question bank — `QuestionBankPageHeader`, `QuestionBankClient`, `InviteCollaboratorsDrawer`.
+
+## When to use
+
+- A list hub or library is **shared** across people (not a private directory).
+- Users need to see **who has access**, **invite by email**, and assign **library access** (Owner / Editor / Commenter / Viewer).
+- The hub already uses **`ListPageTemplate`** + **`PageHeader`** (or an entity header built on it).
+
+**Do not** use this for org-wide **role** administration (Faculty, Program coordinator, Director) as the only story — those are **directory role tags** on people, not library access.
+
+## Vocabulary
+
+| Concept | Meaning | Source |
+|--------|---------|--------|
+| **Library access** | What someone can do **in this hub** (Owner, Editor, Commenter, Viewer) | `lib/collaborator-access.ts` |
+| **Directory roles** | Org/job tags on a person (Faculty, Program coordinator, Director) | `PageHeaderCollaborator.roles` |
+| **Face rail** | Overlapping avatars in the header when the roster is non-empty | `PageHeader` `variant="collaboration"` |
+| **Empty roster CTA** | Outline **Add collaborator** in the header when `collaborators` is empty | `PageHeader` + `COLLABORATION_HEADER_ADD_LABEL` |
+| **Invite sheet** | Floating right **`Sheet`** for roster + invite form | `InviteCollaboratorsDrawer` |
+| **Hub wiring** | Roster state + invite sheet in one render-prop shell | `CollaborationAccessFlow` |
+
+## Header (`PageHeader`)
+
+- Set **`variant="collaboration"`**.
+- Pass **`collaborators`** (`PageHeaderCollaborator[]`) and optional **`accessInfo`**.
+- **Non-empty roster** — overlapping **face rail** only; each face and **`+N`** open the invite sheet via **`onCollaboratorsOpen`**.
+- **Empty roster** — outline **`Add collaborator`** (`addCollaboratorLabel`, default **`COLLABORATION_HEADER_ADD_LABEL`**) opens the same sheet.
+- **Invite** also lives under **⋯ More** on the entity page header (first item when `variant="collaboration"`).
+
+```tsx
+<CollaborationAccessFlow
+  initialCollaborators={QUESTION_BANK_HEADER_COLLABORATORS}
+  resourceLabel={hubHeader.title}
+>
+  {({ collaborators, openInvite }) => (
+    <QuestionBankPageHeader
+      variant="collaboration"
+      title={hubHeader.title}
+      questionCount={count}
+      collaborators={collaborators}
+      onAddCollaborator={openInvite}
+      onCollaboratorsOpen={openInvite}
+      onExport={() => setExportOpen(true)}
+      showMetrics={showMetrics}
+      onToggleMetrics={() => setShowMetrics(v => !v)}
+    />
+  )}
+</CollaborationAccessFlow>
+```
+
+## Hub client state
+
+- Prefer **`CollaborationAccessFlow`** — owns **`collaborators`**, **`openInvite`**, and **`InviteCollaboratorsDrawer`**; pass **`openInvite`** to **`onAddCollaborator`** / **`onCollaboratorsOpen`**.
+- Without the flow: **`collaborators`** — `useState` seeded from `lib/mock/<entity>-header-collaborators.ts` (or API later); **`inviteOpen`** — boolean; mount **`InviteCollaboratorsDrawer`** beside **`ListPageTemplate`**.
+- On invite success, append to **`collaborators`** so the **face rail** and sheet roster stay aligned.
+- **Change access** — roster menu updates **`collaborators`** via **`onCollaboratorAccessChange`** ( **`CollaborationAccessFlow`** default).
+- **Remove access** — confirm dialog then **`onCollaboratorRemove`**; blocked for the only **Owner**.
+
+## `PageHeaderCollaborator`
+
+| Field | Use |
+|-------|-----|
+| `id`, `name`, `imageUrl`, `initials` | Face rail + roster row |
+| `email` | Roster (below name); invite form |
+| `access` | Library access badge (Owner … Viewer) |
+| `roles` | Optional **outline** chips (Faculty, Program coordinator, Director) |
+
+## Invite sheet (`InviteCollaboratorsDrawer`)
+
+Mirror **`ExportDrawer`** chrome: floating **`Sheet`**, no overlay, **`showCloseButton={false}`**, footer **Cancel** / **Send invite** with inline **`Kbd`** (**Esc** / **⏎**), **`Shortcut`** for Enter on the open surface.
+
+**Invite field:** one bordered row — email input + **access** menu on the right.
+
+- Use **`Select`** with **`SelectGroup`** for access (invite row in **`InputGroupAddon`**, roster row standalone); **`position="popper"`** inside the sheet; **no** toast on success (**§6.5**).
+
+**People with access:** one **`rounded-lg border`** list with **`divide-y`** — **not** one card per person.
+
+Row order:
+
+1. **Name** (`text-sm font-medium`)
+2. **Email** (`text-xs text-muted-foreground`)
+3. **Role tags** (`Badge variant="outline"`) when `roles` is set
+4. Trailing **library access** **`Select`** when the hub wires **`onCollaboratorAccessChange`**; **Remove access** (trash) opens a confirm **`Dialog`** when **`onCollaboratorRemove`** is set. The sole **Owner** cannot be removed or demoted until another owner exists.
+
+## Library access constants
+
+- Types and invite options: **`lib/collaborator-access.ts`**
+- **`INVITE_COLLABORATOR_ACCESS_OPTIONS`** — Editor / Commenter / Viewer (no Owner on invite)
+- Customize option **descriptions** per hub; keep **values** stable for forms/API
+
+## File map
+
+| Piece | Path |
+|-------|------|
+| Access types | `lib/collaborator-access.ts` |
+| Hub flow | `components/collaboration-access-flow.tsx` |
+| Collaborator type | `components/page-header.tsx` (`PageHeaderCollaborator`) |
+| Invite sheet | `components/invite-collaborators-drawer.tsx` |
+| Entity header | `components/question-bank-page-header.tsx` |
+| Hub wiring | `components/question-bank-client.tsx` |
+| Demo roster | `lib/mock/question-bank-header-collaborators.ts` |
+
+## Checklist (new hub)
+
+- [ ] `PageHeader` / entity header uses **`variant="collaboration"`** when the product is shared.
+- [ ] **Empty roster** shows **Add collaborator**; **non-empty** shows face rail; both open the invite sheet.
+- [ ] **Invite people** under **⋯ More**; **`CollaborationAccessFlow`** (or equivalent) owns roster + sheet.
+- [ ] Roster: single bordered list; **name → email → role tags**; access badge on the right.
+- [ ] Invite row: email + access menu; **`FormDescription`** for format; **no** toast.
+- [ ] Labels from **`collaborator-access.ts`**; mock/API rows extend **`PageHeaderCollaborator`** once.
+
+**Handbook:** `AGENTS.md` §4.7 · **Rule:** `.cursor/rules/exxat-collaboration-access.mdc` · **Skill:** `.cursor/skills/exxat-collaboration-access/SKILL.md`

package/consumer-extras/patterns/data-views-pattern.md

@@ -45,7 +45,7 @@ Non-table view branches (e.g. **folder** icon grid, **panel** finder, OS-style f
 ## Mock data and connected views
 
 1. **Put entity rows in `lib/mock/<entity>.ts`** — Export a typed array (e.g. `TeamMember[]`, `Placement[]`) and reuse it from the page client and from KPI helpers.
-2. **KPI / summary helpers** — Add `lib/mock/<entity>-kpi.ts` (or next to the mock file) with pure functions **`entityKpiMetrics(rows: T[])`** and **`entityKpiInsight(rows: T[])`** returning `MetricItem[]` and `MetricInsight` from `@/components/key-metrics`. Drive **both** the template **`metrics`** slot and the **dashboard view** from the **same helpers**, passing **`tableState.rows`** in the table component so filters/search apply everywhere.
+2. **KPI / summary helpers** — Add `lib/mock/<entity>-kpi.ts` (or next to the mock file) with pure functions **`entityKpiMetrics(rows: T[])`** and **`entityKpiInsight(rows: T[])`** returning `MetricItem[]` and `MetricInsight` from `@/components/key-metrics`. Set **`MetricItem.trendPolarity`** when an increase is **not** favorable (see **`docs/kpi-trend-pattern.md`**). Drive **both** the template **`metrics`** slot and the **dashboard view** from the **same helpers**, passing **`tableState.rows`** in the table component so filters/search apply everywhere.
 3. **Single table component** — One component (e.g. `TeamTable`) receives **`members`** (full mock) + **`view`**. It calls **`useTableState(members, columns, …)`** once. Branch on `view`:
    - **`table`** → `DataTable` with that state.
    - **`list` / `board`** → `DataTableToolbar` + list/board UI with **`tableState.rows`**.
@@ -72,6 +72,12 @@ Non-table view branches (e.g. **folder** icon grid, **panel** finder, OS-style f
 
 **Import:** `@/components/table-properties` re-exports the drawer and types.
 
+## Dropdown menus (view settings, row actions)
+
+**`DropdownMenuContent`** in **`@exxatdesignux/ui`** merges a **default surface** (**`DROPDOWN_MENU_CONTENT_SURFACE_CLASS`**: **`min-w-52 w-max max-w-[min(24rem,calc(100vw-2rem))]`**) so **ListPageTemplate** view settings / Add view, **`DataTable`** filter and column menus, and hub **row ⋯** menus size to their labels (including shortcut hints) without fixed **`w-40` / `w-48`** rails. Sizing is **pure CSS** — do **not** add **`ResizeObserver`** or per-open measurement for standard menus.
+
+**Override** when product intent needs a fixed width (e.g. pagination **page size** **`w-20`**, **`NavUser`** trigger-width + **`min-w-60`**, school switcher **`!w-max min-w-72 …`**).
+
 ## Board UI reuse
 
 **Handbook:** **`AGENTS.md` §4.4** — board card shell, badge row, shared status maps, and MUST/MUST NOT. **Cursor:** **`.cursor/rules/exxat-board-cards.mdc`**, skill **`.cursor/skills/exxat-board-cards/SKILL.md`**.
@@ -138,9 +144,11 @@ Reference: `components/placements-page-header.tsx`, `components/team-page-header
 
 **When to use a new page (route):** The flow is **primary**, **long-form**, **multi-step**, or should have its **own URL** / bookmark / history **without** the parent page behind it — e.g. full create/edit, wizards, or detail that *is* the task.
 
-**Rule of thumb:** **Context + quick** → **drawer**; **otherwise** → **new page**.
+**Rule of thumb:** **Context + quick** → **drawer**; **blocking short choice** → **dialog**; **otherwise** → **new page**.
+
+**Modal vs side panel (same route):** When the overlay stays on the same URL, prefer **`docs/drawer-vs-dialog-pattern.md`** and **`.cursor/rules/exxat-drawer-vs-dialog.mdc`** — drawers keep the hub visible; dialogs trap focus for confirms.
 
-Canonical rules: **`AGENTS.md` §6.4**, root **`.cursor/rules/exxat-page-vs-drawer.mdc`**.
+Canonical rules: **`AGENTS.md` §6.4**, root **`.cursor/rules/exxat-page-vs-drawer.mdc`**, **`.cursor/rules/exxat-drawer-vs-dialog.mdc`**.
 
 ---
 
@@ -160,7 +168,7 @@ When a route is a **primary** destination in nav (main hub for an entity) **and*
 - [ ] **>10 items** → search, filter, sort, properties (per surface type above).
 - [ ] **Has data to export** → **More** menu with **Export** + shared `ExportDrawer` pattern.
 - [ ] **Primary + large / main hub** → `ListPageTemplate`-style shell where applicable.
-- [ ] **Page vs drawer (§6.4)** — Quick actions with parent **context** → drawer/sheet; primary or long flows → **new route**.
+- [ ] **Page vs drawer vs dialog (§6.4)** — Quick with parent **context** → drawer/sheet; **blocking** confirm → **dialog**; primary or long flows → **new route** (`docs/drawer-vs-dialog-pattern.md`).
 - [ ] **Primary button** → `Button` default variant (`size="lg"` for parity with Placements), not outline.
 - [ ] **Dashboard view tab** → `KeyMetrics` + shared KPI helpers from **`tableState.rows`**; no duplicate one-off metric cards.
 - [ ] **Data view charts** → `ChartFigure` + `chart-keyboard-selection`; layout persistence via **`data-view-dashboard-storage`** (see `AGENTS.md` §4.3).

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@exxatdesignux/ui",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "Exxat shared design system (components, hooks, tokens). Monorepo setup: clone repo then pnpm bootstrap at workspace root — see github.com/ExxatDesign/Exxat-DS-Workspace README.",
   "type": "module",
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "private": false,
   "publishConfig": {
     "access": "public",

package/src/components/ui/banner.tsx

@@ -63,7 +63,8 @@ type BannerVariant = keyof typeof VARIANT_CONFIG
 // ─────────────────────────────────────────────────────────────────────────────
 
 const systemBannerVariants = cva(
-  "relative flex overflow-hidden rounded-lg border text-sm transition-all",
+  // No `overflow-hidden` on root — it clips promo `boxShadow` (glow). Clip `decorativeOverlay` in a nested layer instead.
+  "relative isolate flex rounded-lg border text-sm transition-all",
   {
     variants: {
       variant: {
@@ -186,24 +187,36 @@ export function SystemBanner({
       }}
       {...props}
     >
-      {decorativeOverlay}
+      {decorativeOverlay ? (
+        <div
+          className="pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-lg"
+          aria-hidden
+        >
+          {decorativeOverlay}
+        </div>
+      ) : null}
       {/* Icon */}
       <i
-        className={cn(config.prefix, icon ?? config.icon, "shrink-0 text-[14px]", actionPosition === "bottom" ? "mt-0.5" : "")}
+        className={cn(
+          config.prefix,
+          icon ?? config.icon,
+          "relative z-[1] shrink-0 text-[14px]",
+          actionPosition === "bottom" ? "mt-0.5" : "",
+        )}
         aria-hidden="true"
       />
 
       {/* Content + inline action */}
       {actionPosition === "inline" ? (
         <>
-          <div className="min-w-0 flex-1">
+          <div className="relative z-[1] min-w-0 flex-1">
             {title && <span className="font-semibold mr-1.5">{title}</span>}
             <span className="opacity-90">{children}</span>
           </div>
-          {actionEl}
+          {actionEl ? <span className="relative z-[1] inline-flex shrink-0">{actionEl}</span> : null}
         </>
       ) : (
-        <div className="min-w-0 flex-1">
+        <div className="relative z-[1] min-w-0 flex-1">
           {title && <p className="font-semibold leading-tight mb-0.5">{title}</p>}
           <p className="opacity-90 leading-relaxed">{children}</p>
           {actionEl && <div className="mt-1.5">{actionEl}</div>}
@@ -218,7 +231,7 @@ export function SystemBanner({
             aria-label="Dismiss banner"
             onClick={handleDismiss}
             className={cn(
-              "inline-flex size-5 shrink-0 items-center justify-center rounded transition-colors",
+              "relative z-[2] inline-flex size-5 shrink-0 items-center justify-center rounded transition-colors",
               actionPosition === "bottom" ? "absolute top-2.5 right-2.5" : "",
               "hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             )}

package/src/components/ui/date-picker-field.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 
 import { cn } from "../../lib/utils"
-import { formatDateUS } from "../../lib/date-filter"
+import { formatDateFromDate } from "../../lib/date-filter"
 import { Button } from "./button"
 import { Calendar } from "./calendar"
 import {
@@ -59,11 +59,11 @@ export function DatePickerField({
             "w-full justify-start text-left font-normal",
             triggerClassName,
           )}
-          aria-label={value ? formatDateUS(value.toISOString()) : "Pick a date"}
+          aria-label={value ? formatDateFromDate(value) : "Pick a date"}
         >
           <i className={cn(DATE_PICKER_ICON_CLASS, "mr-2 shrink-0 text-muted-foreground")} aria-hidden="true" />
           <span className={cn(!value && "text-muted-foreground")}>
-            {value ? formatDateUS(value.toISOString()) : "MM/DD/YYYY"}
+            {value ? formatDateFromDate(value) : "MM/DD/YYYY"}
           </span>
         </Button>
       </PopoverTrigger>

package/src/components/ui/dropdown-menu.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
 
 import { cn } from "../../lib/utils"
+import { DROPDOWN_MENU_CONTENT_SURFACE_CLASS } from "../../lib/dropdown-menu-surface"
 
 function DropdownMenu({
   ...props
@@ -43,7 +44,11 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         align={align}
-        className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+        className={cn(
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          DROPDOWN_MENU_CONTENT_SURFACE_CLASS,
+          className,
+        )}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
@@ -81,7 +86,7 @@ function DropdownMenuItem({
       data-variant={variant}
       asChild={asChild}
       className={cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([data-product-logo]):not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_i]:pointer-events-none [&_svg]:shrink-0 [&_i]:shrink-0 [&_svg:not([data-product-logo]):not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
         className
       )}
       {...props}
@@ -247,7 +252,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pe-8 ps-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([data-product-logo]):not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pe-8 ps-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_i]:pointer-events-none [&_svg]:shrink-0 [&_i]:shrink-0 [&_svg:not([data-product-logo]):not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -290,7 +295,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pe-8 ps-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([data-product-logo]):not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pe-8 ps-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_i]:pointer-events-none [&_svg]:shrink-0 [&_i]:shrink-0 [&_svg:not([data-product-logo]):not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -377,7 +382,7 @@ function DropdownMenuSubTrigger({
       suppressHydrationWarning
       data-inset={inset}
       className={cn(
-        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([data-product-logo]):not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_i]:pointer-events-none [&_svg]:shrink-0 [&_i]:shrink-0 [&_svg:not([data-product-logo]):not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -395,7 +400,11 @@ function DropdownMenuSubContent({
   return (
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
-      className={cn("z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      className={cn(
+        "z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        DROPDOWN_MENU_CONTENT_SURFACE_CLASS,
+        className,
+      )}
       {...props}
     />
   )
@@ -420,3 +429,5 @@ export {
   Shortcut,
   useShortcut,
 }
+
+export { DROPDOWN_MENU_CONTENT_SURFACE_CLASS } from "../../lib/dropdown-menu-surface"

package/src/components/ui/input-group.tsx

@@ -14,7 +14,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5",
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-md border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5",
         className
       )}
       {...props}