@kennycorrea/ui 1.7.0 → 1.8.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.8.1 — 2026-10-30
+
+TabBar label contrast.
+
+- **`TabBar` is opaque by default.** Over coloured content the translucent bar left its 10px labels below WCAG AA (gray-11 at 3.3:1 in light). The see-through material is now opt-in with `translucent`, which switches labels to step 12 (≥ 6:1 over any backdrop). The active label uses `accent-12` in both modes, because `accent-11` on the canvas fails for eleven accents in light; the icon keeps the brand colour. The active item is also bolder and has an indicator pill, so colour is not the only difference. Checked against saturated backdrops in `test/TabBar-contrast.test.tsx`; demo in `examples/TabBars.tsx`.
+
+## 1.8.0 — 2026-10-27
+
+An `Accordion` organism.
+
+- **`Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`.** Built on native `<details>`/`<summary>`, so keyboard and screen-reader support come from the browser. `type="multiple"` (default) or `"single"`; controlled with `value`/`onValueChange` or uncontrolled with `defaultValue`. The trigger takes any content and wraps; a chevron turns when open and stays still under reduced motion. Content mounts only while its item is open, unless `keepMounted` is set on the Accordion or the item. No built-in strings. Example in `examples/Accordions.tsx`; axe-checked in light and dark in `test/Accordion.test.tsx`.
+
 ## 1.7.0 — 2026-10-23
 
 Sidebar groups as an accordion, and select-all for stacked tables.

package/dist/atoms/TabBar/TabBar.d.ts

@@ -26,16 +26,22 @@ export interface TabBarProps {
     onValueChange?: (value: string) => void;
     /** Breakpoint (Radix Themes' scale) from which the bar is hidden. Default `md`. */
     hideFrom?: TabBarBreakpoint;
+    /**
+     * Blurred see-through material instead of the default opaque bar. Labels switch to step 12 so
+     * they stay AA over whatever scrolls beneath.
+     */
+    translucent?: boolean;
     'aria-label'?: string;
     className?: string;
 }
 /**
  * A fixed bottom navigation bar for small screens. 3–5 items; the active one is in the brand
- * colour and carries `aria-current="page"`. Height is `--tabbar-height` (49px + `--safe-bottom`);
+ * colour, bolder and on an indicator pill, and carries `aria-current="page"`. Opaque unless
+ * `translucent`. Height is `--tabbar-height` (49px + `--safe-bottom`);
  * render a {@link TabBarSpacer} (or pad by that variable) so content is not covered.
  * Press feedback is `:active`; nothing depends on hover.
  */
-export declare function TabBar({ items, value, onValueChange, hideFrom, className, 'aria-label': ariaLabel, }: TabBarProps): import("react").JSX.Element;
+export declare function TabBar({ items, value, onValueChange, hideFrom, translucent, className, 'aria-label': ariaLabel, }: TabBarProps): import("react").JSX.Element;
 /** Reserves the bar's height in the flow, hidden at the same breakpoint as the bar. */
 export declare function TabBarSpacer({ hideFrom }: {
     hideFrom?: TabBarBreakpoint;

package/dist/atoms/TabBar/TabBar.js

@@ -8,12 +8,13 @@ function badgeText(badge) {
 }
 /**
  * A fixed bottom navigation bar for small screens. 3–5 items; the active one is in the brand
- * colour and carries `aria-current="page"`. Height is `--tabbar-height` (49px + `--safe-bottom`);
+ * colour, bolder and on an indicator pill, and carries `aria-current="page"`. Opaque unless
+ * `translucent`. Height is `--tabbar-height` (49px + `--safe-bottom`);
  * render a {@link TabBarSpacer} (or pad by that variable) so content is not covered.
  * Press feedback is `:active`; nothing depends on hover.
  */
-export function TabBar({ items, value, onValueChange, hideFrom = 'md', className, 'aria-label': ariaLabel, }) {
-    return (_jsx("nav", { className: ['ui-tabbar', className].filter(Boolean).join(' '), "data-hide-from": hideFrom, "aria-label": ariaLabel, children: items.map((item) => {
+export function TabBar({ items, value, onValueChange, hideFrom = 'md', translucent = false, className, 'aria-label': ariaLabel, }) {
+    return (_jsx("nav", { className: ['ui-tabbar', className].filter(Boolean).join(' '), "data-hide-from": hideFrom, "data-material": translucent ? 'translucent' : 'opaque', "aria-label": ariaLabel, children: items.map((item) => {
             const active = item.value === value;
             const text = badgeText(item.badge);
             const children = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "ui-tabbar__icon", "aria-hidden": "true", children: [active && item.activeIcon ? item.activeIcon : item.icon, text !== null && (_jsx("span", { className: "ui-tabbar__badge", "data-dot": text === '' ? 'true' : undefined, children: text }))] }), _jsx("span", { className: "ui-tabbar__label", children: item.label })] }));

package/dist/organisms/Accordion/Accordion.d.ts

@@ -0,0 +1,34 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export interface AccordionProps {
+    /** `multiple` lets any number be open; `single` closes the others when one opens. */
+    type?: 'multiple' | 'single';
+    /** The open items. Controlled when given, with `onValueChange`. */
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /** Keep every item's content mounted while closed. Each item can override it. */
+    keepMounted?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * A stack of collapsible sections, each a native `<details>`/`<summary>`: the summary is the
+ * button, so keyboard (Enter/Space), focus and the expanded state reach assistive technology
+ * without any ARIA of our own. Open state lives in React, so `value` can be controlled.
+ * Content mounts only while open unless `keepMounted` is set.
+ */
+export declare function Accordion({ type, value, defaultValue, onValueChange, keepMounted, className, children, }: AccordionProps): import("react").JSX.Element;
+export interface AccordionItemProps extends Omit<ComponentPropsWithoutRef<'details'>, 'open' | 'onToggle'> {
+    value: string;
+    /** Overrides the Accordion's `keepMounted` for this item. */
+    keepMounted?: boolean;
+}
+export declare function AccordionItem({ value, keepMounted, className, children, ...rest }: AccordionItemProps): import("react").JSX.Element;
+export interface AccordionTriggerProps extends ComponentPropsWithoutRef<'summary'> {
+    /** Hide the chevron, e.g. when the trigger draws its own. */
+    hideChevron?: boolean;
+}
+/** The row that opens and closes the item. Takes any content: a logo, a name, badges, meta. */
+export declare function AccordionTrigger({ className, children, onClick, hideChevron, ...rest }: AccordionTriggerProps): import("react").JSX.Element;
+export type AccordionContentProps = ComponentPropsWithoutRef<'div'>;
+export declare function AccordionContent({ className, ...rest }: AccordionContentProps): import("react").JSX.Element | null;

package/dist/organisms/Accordion/Accordion.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+import { createContext, useCallback, useContext, useState, } from 'react';
+import { cn } from '../../utils/index.js';
+const AccordionContext = createContext(null);
+const ItemContext = createContext(null);
+function useAccordion() {
+    const ctx = useContext(AccordionContext);
+    if (!ctx)
+        throw new Error('AccordionItem must be used inside an Accordion');
+    return ctx;
+}
+function useItem() {
+    const ctx = useContext(ItemContext);
+    if (!ctx)
+        throw new Error('AccordionTrigger and AccordionContent must be inside an AccordionItem');
+    return ctx;
+}
+/**
+ * A stack of collapsible sections, each a native `<details>`/`<summary>`: the summary is the
+ * button, so keyboard (Enter/Space), focus and the expanded state reach assistive technology
+ * without any ARIA of our own. Open state lives in React, so `value` can be controlled.
+ * Content mounts only while open unless `keepMounted` is set.
+ */
+export function Accordion({ type = 'multiple', value, defaultValue, onValueChange, keepMounted = false, className, children, }) {
+    const [inner, setInner] = useState(defaultValue ?? []);
+    const open = value ?? inner;
+    const toggle = useCallback((item) => {
+        const next = open.includes(item)
+            ? open.filter((v) => v !== item)
+            : type === 'single'
+                ? [item]
+                : [...open, item];
+        if (value === undefined)
+            setInner(next);
+        onValueChange?.(next);
+    }, [open, type, value, onValueChange]);
+    const isOpen = useCallback((item) => open.includes(item), [open]);
+    return (_jsx(AccordionContext.Provider, { value: { isOpen, toggle, keepMounted }, children: _jsx("div", { className: cn('ui-accordion', className), children: children }) }));
+}
+export function AccordionItem({ value, keepMounted, className, children, ...rest }) {
+    const acc = useAccordion();
+    const open = acc.isOpen(value);
+    return (_jsx(ItemContext.Provider, { value: { value, open, keepMounted: keepMounted ?? acc.keepMounted }, children: _jsx("details", { ...rest, open: open, className: cn('ui-accordion__item', className), children: children }) }));
+}
+/** The row that opens and closes the item. Takes any content: a logo, a name, badges, meta. */
+export function AccordionTrigger({ className, children, onClick, hideChevron = false, ...rest }) {
+    const acc = useAccordion();
+    const item = useItem();
+    const handleClick = (e) => {
+        onClick?.(e);
+        // The browser would flip `open` itself; React owns it instead so `value` stays the truth.
+        e.preventDefault();
+        acc.toggle(item.value);
+    };
+    return (_jsxs("summary", { ...rest, onClick: handleClick, className: cn('ui-accordion__trigger', className), children: [children, hideChevron ? null : (_jsx("span", { "aria-hidden": "true", className: "ui-accordion__chevron", children: _jsx(ChevronDownIcon, {}) }))] }));
+}
+export function AccordionContent({ className, ...rest }) {
+    const item = useItem();
+    if (!item.open && !item.keepMounted)
+        return null;
+    return _jsx("div", { ...rest, className: cn('ui-accordion__content', className) });
+}

package/dist/organisms/Accordion/index.d.ts

@@ -0,0 +1 @@
+export * from './Accordion.js';

package/dist/organisms/Accordion/index.js

@@ -0,0 +1 @@
+export * from './Accordion.js';

package/dist/organisms/index.d.ts

@@ -1,3 +1,4 @@
+export * from './Accordion/index.js';
 export * from './AppShell/index.js';
 export * from './AuthForms/index.js';
 export * from './BulkActionBar/index.js';

package/dist/organisms/index.js

@@ -1,3 +1,4 @@
+export * from './Accordion/index.js';
 export * from './AppShell/index.js';
 export * from './AuthForms/index.js';
 export * from './BulkActionBar/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "A React + TypeScript component library built on Radix Themes: atoms, a Tailwind token bridge and theming.",
   "private": false,
   "type": "module",

package/tokens.css

@@ -796,18 +796,32 @@
 :root { --tabbar-height: calc(49px + var(--safe-bottom, 0px)); }
 .ui-tabbar { position: fixed; inset: auto 0 0 0; z-index: 30; display: flex; box-sizing: border-box;
   height: var(--tabbar-height); padding: 0 var(--safe-right, 0px) var(--safe-bottom, 0px) var(--safe-left, 0px);
-  background-color: var(--material-bar); -webkit-backdrop-filter: var(--material-bar-filter); backdrop-filter: var(--material-bar-filter);
+  background-color: var(--canvas-grouped, var(--color-panel-solid, #fff));
   box-shadow: inset 0 0.5px 0 var(--color-hairline); }
+/* Opaque by default: gray-11 on the canvas is AA whatever scrolls underneath. `translucent` brings
+   the material back; 80% canvas over saturated content leaves gray-11 at 3.3:1 and accent-11 at
+   2.5:1 in light, so the labels step up to 12 there (≥ 6:1 over any backdrop). Numbers in
+   `test/TabBar-contrast.test.tsx`. */
+.ui-tabbar[data-material="translucent"] { background-color: var(--material-bar);
+  -webkit-backdrop-filter: var(--material-bar-filter); backdrop-filter: var(--material-bar-filter); }
+.ui-tabbar[data-material="translucent"] .ui-tabbar__item { color: var(--gray-12); }
+.ui-tabbar[data-material="translucent"] .ui-tabbar__item[data-active="true"] { color: var(--accent-12); }
 .ui-tabbar-spacer { height: var(--tabbar-height); flex: none; }
 .ui-tabbar__cell { flex: 1 1 0; min-width: 0; display: flex; }
 .ui-tabbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
   min-width: 44px; padding: 0; border: 0; background: none; font: inherit; color: var(--gray-11); text-decoration: none;
   cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
 .ui-tabbar__item[data-active="true"] { color: var(--accent-11); }
+/* Not by colour alone: the active item is bolder and its icon sits on an indicator pill. The icon
+   keeps the brand step; the 10px label takes 12, since accent-11 on gray-3 is under 4.5:1 for
+   eleven of the accents in light. */
+.ui-tabbar__item[data-active="true"] .ui-tabbar__label { font-weight: 700; color: var(--accent-12); }
+.ui-tabbar__item[data-active="true"] .ui-tabbar__icon::before { content: ''; position: absolute; inset: -2px -12px; z-index: -1;
+  border-radius: 999px; background: var(--accent-a4); }
 .ui-tabbar__item { border-radius: 8px; transition: transform var(--press-duration) ease-out, background-color var(--press-duration) ease-out; }
 .ui-tabbar__item:active { background: var(--gray-a3); transform: scale(var(--press-scale)); }
 .ui-tabbar__item:focus-visible { outline: 2px solid var(--focus-8); outline-offset: -2px; border-radius: 8px; }
-.ui-tabbar__icon { position: relative; display: inline-flex; font-size: 24px; line-height: 1; }
+.ui-tabbar__icon { position: relative; isolation: isolate; display: inline-flex; font-size: 24px; line-height: 1; }
 .ui-tabbar__label { font-size: 10px; line-height: 12px; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ui-tabbar__badge { position: absolute; top: -4px; left: calc(100% - 8px); min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
   border-radius: 8px; background: var(--red-9); color: white; font-size: 11px; line-height: 16px; font-weight: 600; text-align: center; }
@@ -1415,3 +1429,26 @@
 .rt-TextAreaRoot:has(> textarea[aria-invalid="true"]),
 .rt-SelectTrigger[aria-invalid="true"],
 .ui-date-input.rt-Button[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--red-8); }
+
+/* Accordion: native <details>, its marker replaced by a chevron that turns when open. */
+.ui-accordion { display: flex; flex-direction: column; gap: 8px; }
+.ui-accordion__item {
+  border-radius: var(--radius-3, 8px);
+  border: 1px solid var(--color-hairline);
+  background: var(--color-panel-solid);
+  color: var(--color-ink, inherit);
+}
+.ui-accordion__trigger {
+  display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 4px;
+  padding: 16px; cursor: pointer; list-style: none; border-radius: inherit;
+}
+.ui-accordion__trigger::-webkit-details-marker { display: none; }
+.ui-accordion__trigger::marker { content: ""; }
+.ui-accordion__trigger:focus-visible { outline: 2px solid var(--focus-8, var(--accent-8)); outline-offset: 2px; }
+.ui-accordion__chevron { display: inline-flex; margin-inline-start: auto; transition: transform 150ms ease; }
+.ui-accordion__item[open] > .ui-accordion__trigger .ui-accordion__chevron { transform: rotate(180deg); }
+.ui-accordion__content { border-top: 1px solid var(--color-hairline); padding: 16px; }
+@media (prefers-reduced-motion: reduce) {
+  .ui-accordion__chevron { transition: none; }
+  .ui-accordion__item[open] > .ui-accordion__trigger .ui-accordion__chevron { transform: none; }
+}