@mohasinac/appkit 4.58.0 → 4.60.0

package/dist/ui/components/Input.js

@@ -24,7 +24,28 @@ export const Input = React.forwardRef(function Input({ label, error, helperText,
         .filter(Boolean)
         .join(" ");
     if (bare) {
-        return (_jsx("input", { ...props, ref: ref, id: inputId, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: inputClassName }));
+        /*
+         * 🛑 `bare` DROPPED THE LABEL, and four call sites pass one.
+         *
+         * This branch exists to render an `<input>` with no wrapper markup —
+         * `/admin/site`'s native colour pickers need the element bare so the
+         * swatch fills its box. But it also ignored `label` entirely, so
+         * `<Input type="color" label="Overlay color" bare />` rendered an input
+         * with NO accessible name while the call site plainly declared one.
+         * A prop accepted and silently discarded (Root Cause #51's shape), and
+         * it lands on exactly the page the audit measured.
+         *
+         * `aria-label` rather than a `<label>` element: adding a label here
+         * would reintroduce the wrapper this branch exists to avoid. Only when
+         * the label is a STRING — a ReactNode cannot become an attribute, and
+         * stringifying one would produce "[object Object]" as the field's
+         * accessible name, which is worse than none.
+         *
+         * A caller's own `aria-label` wins, so this fills a gap and never
+         * overrides an explicit choice.
+         */
+        const bareAriaLabel = props["aria-label"] ?? (typeof label === "string" ? label : undefined);
+        return (_jsx("input", { ...props, ref: ref, id: inputId, disabled: disabled, "aria-label": bareAriaLabel, "aria-invalid": error ? "true" : undefined, className: inputClassName }));
     }
     const adornment = rightIcon ??
         (success && !error ? (_jsx("svg", { className: CLS_INPUT_SUCCESS_ICON, viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M16.704 5.29a1 1 0 010 1.42l-7.2 7.2a1 1 0 01-1.415 0l-3.2-3.2a1 1 0 111.414-1.42l2.493 2.494 6.493-6.494a1 1 0 011.415 0z", clipRule: "evenodd" }) })) : null);

package/dist/ui/components/Input.style.css

@@ -1,10 +1,33 @@
+/*
+ * ── Geometry: aligned to `.appkit-select__trigger`, not invented ───────────
+ *
+ * This measured 34px tall with a 6px radius, against a select trigger
+ * 40px tall with an 8px radius sitting in the same `<FormGroup>` — so a text
+ * field and a dropdown on one row of one form were visibly different
+ * controls. 34px with 14px text is also a desktop-density target on a touch
+ * device.
+ *
+ * `--appkit-size-input-md` is 40px and already existed; the select already
+ * used it, and so do `Button`, `ActionRow` and `Tabs`. `Input` and
+ * `Textarea` were the two that did not. So this is not a new number — it is
+ * the four controls that already agreed being joined by the two that did
+ * not, which is why it carries no judgement call about what "40" should be.
+ *
+ * Radius follows the same rule: `--appkit-radius-lg` (8px) is what the
+ * select already renders, and 8px is inside the 8–12px range the audit
+ * named. Reaching for 10px would have invented a third radius to sit beside
+ * two existing ones.
+ */
 .appkit-input {
   width: 100%;
+  min-height: var(--appkit-size-input-md);
   border: 1px solid var(--appkit-color-border);
-  border-radius: 0.375rem;
-  background: var(--appkit-color-surface);
+  border-radius: var(--appkit-radius-lg);
+  /* The token named for this control, which it did not read: the light fill
+   * was `surface` and the dark fill a hardcoded `rgba(30, 41, 59, 0.7)`. */
+  background: var(--appkit-color-surface-input);
   color: var(--appkit-color-text);
-  padding: 0.375rem 0.625rem;
+  padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
   line-height: 1.4;
   transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
@@ -20,16 +43,16 @@
 
 .appkit-input:focus-visible {
   outline: none;
-  border-color: var(--appkit-color-secondary);
-  box-shadow: 0 0 0 3px rgba(101, 196, 8, 0.25), inset 0 0 0 1px rgba(101, 196, 8, 0.15);
-}
-
-.dark .appkit-input {
-  border-color: var(--appkit-color-border);
-  background: rgba(30, 41, 59, 0.7);
-  color: var(--appkit-color-text);
+  border-color: var(--appkit-color-focus-ring);
+  box-shadow: var(--appkit-focus-ring);
 }
 
+/*
+ * The `.dark .appkit-input` block that stood here is gone: it set
+ * `border-color` and `color` to the SAME tokens the base rule already uses,
+ * and a hardcoded background that is now `--appkit-color-surface-input`.
+ * Three declarations, nothing to say.
+ */
 .dark .appkit-input::placeholder {
   color: var(--appkit-color-text-muted);
 }
@@ -38,29 +61,22 @@
   border-color: var(--appkit-color-slate-500);
 }
 
-.dark .appkit-input:focus-visible {
-  border-color: var(--appkit-color-primary);
-  box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.25), inset 0 0 0 1px rgba(233, 30, 140, 0.15);
-}
-
 /* Error variant */
 .appkit-input--error {
   border-color: var(--appkit-color-error);
-  background: rgba(254, 202, 202, 0.06);
+  background: color-mix(in srgb, var(--appkit-color-error) 6%, var(--appkit-color-surface-input));
 }
 
 .appkit-input--error:focus-visible {
   border-color: var(--appkit-color-error);
-  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.25), inset 0 0 0 1px rgba(248, 113, 113, 0.15);
+  box-shadow: var(--appkit-focus-ring-error);
 }
 
 /* Disabled state */
+/* `--appkit-color-bg` inverts with the theme, so the `.dark` override that
+ * pinned this to `rgba(30, 41, 59, 0.4)` was saying the same thing twice. */
 .appkit-input:disabled {
   opacity: 0.55;
   cursor: not-allowed;
   background: var(--appkit-color-bg);
 }
-
-.dark .appkit-input:disabled {
-  background: rgba(30, 41, 59, 0.4);
-}

package/dist/ui/components/ListingFilterDrawer.js

@@ -5,7 +5,7 @@ import { Button } from "./Button.js";
 import { Span } from "./Typography.js";
 import { sectionBackgroundStyle } from "./Semantic.js";
 import { useHandMode } from "../../_internal/client/hand-mode/index.js";
-const CLS_CLEAR_BTN = "text-xs text-[var(--appkit-color-text-muted)] hover:text-error text-[var(--appkit-color-text-muted)] transition-colors min-h-0 h-auto p-0";
+const CLS_CLEAR_BTN = "text-xs hover:text-error text-[var(--appkit-color-text-muted)] transition-colors min-h-0 h-auto p-0";
 export function ListingFilterDrawer({ open, onClose, onApply, onClear, activeCount, children, background, }) {
     const { hand } = useHandMode();
     if (!open)

package/dist/ui/components/ListingToolbar.js

@@ -23,7 +23,7 @@ const DEFAULT_LABELS = {
 };
 const VIEW_BTN_BASE = "p-1.5 sm:p-2 transition-colors";
 const VIEW_BTN_ACTIVE = "bg-[var(--appkit-color-primary)] text-white";
-const VIEW_BTN_INACTIVE = "text-[var(--appkit-color-text-muted)] hover:bg-surface-hover text-[var(--appkit-color-text-muted)]";
+const VIEW_BTN_INACTIVE = "hover:bg-surface-hover text-[var(--appkit-color-text-muted)]";
 export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue = "", searchPlaceholder = "Search…", onSearchChange, onSearchCommit, onSearchKeyDown, sortValue, sortOptions, onSortChange, view = "grid", onViewChange, hideViewToggle = false, showTableView = false, onResetAll, hasActiveState = false, bulkMode = false, bulkSelectedCount = 0, bulkTotalCount = 0, onBulkSelectAll, onBulkClear, toggles, extra, labels, className = "", dismissible = true, toolbarId, collapseLabel = "Toolbar", }) {
     const l = { ...DEFAULT_LABELS, ...labels };
     const pathname = usePathname();

package/dist/ui/components/Radio.style.css

@@ -213,7 +213,7 @@
 }
 .appkit-radio-item__input:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.3), 0 0 0 4px var(--appkit-color-surface);
+  box-shadow: var(--appkit-focus-ring-halo);
 }
 .appkit-radio-item__input:not(:disabled):hover {
   border-color: var(--appkit-color-secondary);

package/dist/ui/components/Repeater.d.ts

@@ -0,0 +1,53 @@
+/**
+ * A minimal add/remove repeater for a list of editable rows.
+ *
+ * ── Why this moved here ─────────────────────────────────────────────────────
+ *
+ * It lived inside `AdminCategoryEditorView` with a note on it:
+ *
+ *     Deliberately NOT a new appkit primitive: three local shapes with three
+ *     different row renderers is not yet the Rule of Three on a *component* —
+ *     it is one container used three times with a render prop. Promote it
+ *     when a fourth caller appears outside this file.
+ *
+ * That was right, and the brand editor is the fourth caller. Promoted on the
+ * condition its own author set, rather than copied — a second repeater would
+ * be the shape the Duplication Framework exists to stop, and the three
+ * existing call sites keep working unchanged because the API did not move.
+ *
+ * ── The row identity question ───────────────────────────────────────────────
+ *
+ * 🛑 `key={i}` IS THE INDEX, AND THAT IS A REAL LIMITATION, not an oversight.
+ * These rows have no stable id — they are literal form values a human is
+ * typing, created blank and filled in — so there is nothing else to key on.
+ * The consequence is that REMOVING a row remounts every row below it, which
+ * loses focus and any uncommitted IME composition in those inputs.
+ *
+ * It is tolerable here because the lists are short (`max` is 8 or fewer at
+ * every call site) and removal is rare compared to typing. It would not be
+ * tolerable on a long or reorderable list; if one appears, give the rows an
+ * id at creation and key on that instead of reaching for this.
+ */
+import React from "react";
+export interface RepeaterProps<T> {
+    rows: T[];
+    onChange: (next: T[]) => void;
+    /** Builds an empty row. Called on every "add". */
+    blank: () => T;
+    addLabel: string;
+    /**
+     * Renders one row's fields. `set` patches THAT row only — callers never
+     * splice the array themselves, which is what keeps the immutable update in
+     * one place instead of at every call site.
+     */
+    renderRow: (row: T, set: (patch: Partial<T>) => void) => React.ReactNode;
+    /**
+     * Hard cap. Required rather than optional: every one of these lists renders
+     * somewhere with a layout budget — category highlights sit above the FAQs
+     * on a public page — and "unbounded by default" is how a form becomes a way
+     * to break the page it feeds.
+     */
+    max: number;
+}
+export declare function Repeater<T>({ rows, onChange, blank, addLabel, renderRow, max, }: RepeaterProps<T>): React.JSX.Element;
+export default Repeater;

package/dist/ui/components/Repeater.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Div, Stack, Text } from "../index.js";
+export function Repeater({ rows, onChange, blank, addLabel, renderRow, max, }) {
+    return (_jsxs(Stack, { gap: "sm", children: [rows.map((row, i) => (_jsx(Div, { rounded: "lg", border: "default", padding: "sm", children: _jsxs(Stack, { gap: "xs", children: [renderRow(row, (patch) => onChange(rows.map((r, j) => (j === i ? { ...r, ...patch } : r)))), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => onChange(rows.filter((_, j) => j !== i)), children: "Remove" })] }) }, i))), rows.length < max ? (_jsx(Button, { variant: "secondary", size: "sm", onClick: () => onChange([...rows, blank()]), children: addLabel })) : (_jsxs(Text, { size: "xs", color: "muted", children: ["Maximum of ", max, " reached."] }))] }));
+}
+export default Repeater;

package/dist/ui/components/RichTextEditor.d.ts

@@ -6,5 +6,24 @@ export interface RichTextEditorProps {
     className?: string;
     minHeightClassName?: string;
     placeholder?: string;
+    /**
+     * The `id` of the element labelling this editor.
+     *
+     * 🛑 `aria-labelledby`, NOT `htmlFor` ON THE LABEL — and that is a hard
+     * constraint rather than a preference. `htmlFor` only associates with a
+     * LABELABLE element (`input`, `select`, `textarea`, `button`, `output`,
+     * `meter`, `progress`), and this editor is a `contenteditable` div, which is
+     * none of them. A `<Label htmlFor>` pointing here associates with nothing:
+     * the label is visibly present, the editor has no accessible name, and an
+     * accessibility pass reports an unlabelled field while a human sees a
+     * perfectly labelled one.
+     *
+     * This prop did not exist, so EVERY rich-text field in the app was
+     * unlabelled — `CategoryForm` rendered a bare `<Label>` with no `htmlFor` at
+     * all, which is the honest version of the same gap.
+     */
+    ariaLabelledBy?: string;
+    /** Use when there is no visible label to point at. */
+    ariaLabel?: string;
 }
-export declare function RichTextEditor({ value, onChange, disabled, className, minHeightClassName, placeholder, }: RichTextEditorProps): React.JSX.Element;
+export declare function RichTextEditor({ value, onChange, disabled, className, minHeightClassName, placeholder, ariaLabelledBy, ariaLabel, }: RichTextEditorProps): React.JSX.Element;

package/dist/ui/components/RichTextEditor.js

@@ -53,7 +53,7 @@ function sanitizeRichTextHtml(html) {
     sanitizeChildren(template.content);
     return template.innerHTML;
 }
-export function RichTextEditor({ value, onChange, disabled = false, className = "", minHeightClassName = "min-h-[180px]", placeholder = "Write formatted content...", }) {
+export function RichTextEditor({ value, onChange, disabled = false, className = "", minHeightClassName = "min-h-[180px]", placeholder = "Write formatted content...", ariaLabelledBy, ariaLabel, }) {
     const editorRef = useRef(null);
     const emitChange = () => {
         if (!editorRef.current)
@@ -120,5 +120,26 @@ export function RichTextEditor({ value, onChange, disabled = false, className =
             editor.innerHTML = safeValue;
         }
     }, [value]);
-    return (_jsxs("div", { className: `appkit-rich-text-editor rounded-lg border border-zinc-200 bg-[var(--appkit-color-surface)] border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${className}`, "data-section": "richtexteditor-div-582", children: [_jsx("div", { className: "appkit-rich-text-editor__toolbar flex flex-wrap gap-1 border-b p-2 border-[var(--appkit-color-border)]", "data-section": "richtexteditor-div-583", children: toolbarActions.map((action) => (_jsx("button", { type: "button", title: action.title, onClick: action.run, disabled: disabled, className: "appkit-rich-text-editor__btn rounded px-2 py-1 text-xs font-medium transition hover:bg-surface-hover disabled:cursor-not-allowed disabled:opacity-50 text-[var(--appkit-color-text-muted)]", children: action.label }, action.title))) }), _jsx("div", { ref: editorRef, role: "textbox", "aria-label": "Rich text editor", contentEditable: !disabled, suppressContentEditableWarning: true, "data-placeholder": placeholder, onInput: emitChange, onBlur: emitChange, className: `prose max-w-none p-3 focus:outline-none ${minHeightClassName} ${disabled ? "cursor-not-allowed opacity-70" : ""}` })] }));
+    return (_jsxs("div", { className: `appkit-rich-text-editor rounded-lg border border-zinc-200 bg-[var(--appkit-color-surface)] border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${className}`, "data-section": "richtexteditor-div-582", children: [_jsx("div", { className: "appkit-rich-text-editor__toolbar flex flex-wrap gap-1 border-b p-2 border-[var(--appkit-color-border)]", "data-section": "richtexteditor-div-583", children: toolbarActions.map((action) => (_jsx("button", { type: "button", title: action.title, onClick: action.run, disabled: disabled, className: "appkit-rich-text-editor__btn rounded px-2 py-1 text-xs font-medium transition hover:bg-surface-hover disabled:cursor-not-allowed disabled:opacity-50 text-[var(--appkit-color-text-muted)]", children: action.label }, action.title))) }), _jsx("div", { ref: editorRef, 
+                /*
+                 * 🛑 `role` and `aria-label` USED TO BE DECLARED HERE TOO, hardcoded
+                 * to "Rich text editor" — and when the labelling props were added
+                 * below, that made two of each on one element (`TS17001: JSX elements
+                 * cannot have multiple attributes with the same name`). Removed here
+                 * rather than there, because the hardcoded name was the weaker of the
+                 * two: every rich-text field in the app announced itself as "Rich
+                 * text editor", which says what the WIDGET is and never which FIELD
+                 * it is — on the category editor that is the one describing the
+                 * category, and the user could not tell.
+                 */
+                contentEditable: !disabled, suppressContentEditableWarning: true, 
+                /*
+                 * 🛑 `role="textbox"` AND `aria-multiline` ARE REQUIRED FOR THE NAME TO
+                 * BE ANNOUNCED. A bare `contenteditable` div has no role, and
+                 * `aria-labelledby` on a roleless generic element is not reliably
+                 * exposed — the name attaches to something the user is never told is
+                 * editable. The role is what makes it a form control to assistive
+                 * technology, and only then does the label mean anything.
+                 */
+                role: "textbox", "aria-multiline": "true", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabelledBy ? undefined : ariaLabel, "aria-disabled": disabled || undefined, "data-placeholder": placeholder, onInput: emitChange, onBlur: emitChange, className: `prose max-w-none p-3 focus:outline-none ${minHeightClassName} ${disabled ? "cursor-not-allowed opacity-70" : ""}` })] }));
 }

package/dist/ui/components/Select.style.css

@@ -17,21 +17,15 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-radius: 0.5rem;
+  border-radius: var(--appkit-radius-lg);
   border: 1px solid var(--appkit-color-border);
-  background: var(--appkit-color-surface);
+  background: var(--appkit-color-surface-input);
   color: var(--appkit-color-text);
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
   transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
 }
 
-.dark .appkit-select__trigger {
-  border-color: var(--appkit-color-border);
-  background: rgba(30, 41, 59, 0.7);
-  color: var(--appkit-color-text);
-}
-
 .appkit-select__trigger--enabled:hover:not(:focus-visible) {
   border-color: var(--appkit-color-zinc-400);
 }
@@ -42,24 +36,19 @@
 
 .appkit-select__trigger--default:focus-visible {
   outline: none;
-  border-color: var(--appkit-color-secondary);
-  box-shadow: 0 0 0 3px rgba(101, 196, 8, 0.25), inset 0 0 0 1px rgba(101, 196, 8, 0.15);
-}
-
-.dark .appkit-select__trigger--default:focus-visible {
-  border-color: var(--appkit-color-primary);
-  box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.25), inset 0 0 0 1px rgba(233, 30, 140, 0.15);
+  border-color: var(--appkit-color-focus-ring);
+  box-shadow: var(--appkit-focus-ring);
 }
 
 .appkit-select__trigger--error {
   border-color: var(--appkit-color-error);
-  background: rgba(254, 202, 202, 0.06);
+  background: color-mix(in srgb, var(--appkit-color-error) 6%, var(--appkit-color-surface-input));
 }
 
 .appkit-select__trigger--error:focus-visible {
   outline: none;
   border-color: var(--appkit-color-error);
-  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.25), inset 0 0 0 1px rgba(248, 113, 113, 0.15);
+  box-shadow: var(--appkit-focus-ring-error);
 }
 
 .appkit-select__trigger--disabled {
@@ -68,9 +57,6 @@
   background: var(--appkit-color-bg);
 }
 
-.dark .appkit-select__trigger--disabled {
-  background: rgba(30, 41, 59, 0.4);
-}
 
 .appkit-select__trigger--enabled {
   cursor: pointer;
@@ -174,7 +160,7 @@
 }
 
 .dark .appkit-select__option--selected {
-  background: rgba(233, 30, 140, 0.15);
+  background: color-mix(in srgb, var(--appkit-color-primary) 15%, transparent);
   color: var(--appkit-color-primary-300);
 }
 

package/dist/ui/components/Semantic.js

@@ -287,7 +287,7 @@ const TR_BORDER_MAP = {
     none: "",
     default: "border-b border-[var(--appkit-color-border)]",
     subtle: "border-b border-[var(--appkit-color-border-subtle)]",
-    strong: "border-b border-[var(--appkit-color-border-strong)]",
+    strong: "border-b border-[var(--appkit-color-border)]",
 };
 const TR_SURFACE_MAP = {
     none: "",
@@ -304,6 +304,30 @@ export function Tr({ hover = false, border, surface, className = "", children, .
             className,
         ].filter(Boolean).join(" "), ...props, children: children }));
 }
+/**
+ * 🛑 A MAP, because `text-${align}` was a class Tailwind never saw.
+ *
+ * `Th` and `Td` both built their alignment as `align ? \`text-${align}\` : ""`.
+ * Tailwind's content scanner reads source as PLAIN TEXT, so an interpolated
+ * class is one it never generates — and these only worked because OTHER files
+ * happen to write `text-left`, `text-center` and `text-right` literally.
+ * Measured in `dist/tailwind-utilities.css`: all three present, so nothing is
+ * broken today.
+ *
+ * They worked BY ACCIDENT. Delete the last literal `text-right` anywhere in
+ * the codebase and every right-aligned table cell silently loses its
+ * alignment, with these two files looking untouched and correct. Root Cause
+ * #67 is this failure mode, and a fourth `CellAlign` value — `justify`, say —
+ * would be dead on arrival: `text-justify` is NOT in the compiled output.
+ *
+ * A `Record<CellAlign, string>` makes the literals visible to the scanner and
+ * makes a new union member a compile error rather than a silent no-op.
+ */
+const CELL_ALIGN_MAP = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+};
 const CELL_PADDING_MAP = {
     none: "",
     xs: "px-2 py-1",
@@ -370,7 +394,7 @@ const CELL_WEIGHT_MAP = {
 export function Th({ align, size, weight, padding, paddingX, paddingY, paddingSide, color, className = "", children, ...props }) {
     return (_jsx("th", { className: [
             "appkit-th",
-            align ? `text-${align}` : "",
+            align ? CELL_ALIGN_MAP[align] : "",
             size ? CELL_SIZE_MAP[size] : "",
             weight ? CELL_WEIGHT_MAP[weight] : "",
             padding ? CELL_PADDING_MAP[padding] : "",
@@ -384,7 +408,7 @@ export function Th({ align, size, weight, padding, paddingX, paddingY, paddingSi
 export function Td({ align, size, weight, padding, paddingX, paddingY, paddingSide, color, className = "", children, ...props }) {
     return (_jsx("td", { className: [
             "appkit-td",
-            align ? `text-${align}` : "",
+            align ? CELL_ALIGN_MAP[align] : "",
             size ? CELL_SIZE_MAP[size] : "",
             weight ? CELL_WEIGHT_MAP[weight] : "",
             padding ? CELL_PADDING_MAP[padding] : "",

package/dist/ui/components/TagInput.style.css

@@ -26,8 +26,8 @@
 }
 
 .appkit-tag-input__field:focus-within {
-  border-color: var(--appkit-color-secondary-600);
-  box-shadow: 0 0 0 2px rgba(80, 156, 2, 0.2);
+  border-color: var(--appkit-color-focus-ring);
+  box-shadow: var(--appkit-focus-ring-compact);
 }
 
 .appkit-tag-input__field--disabled {
@@ -40,7 +40,7 @@
   align-items: center;
   gap: 0.25rem;
   border-radius: 9999px;
-  background: rgba(80, 156, 2, 0.1);
+  background: color-mix(in srgb, var(--appkit-color-secondary) 10%, transparent);
   padding: 0.125rem 0.5rem;
   font-size: 0.75rem;
   font-weight: 500;
@@ -90,13 +90,8 @@
   background: var(--appkit-color-surface);
 }
 
-.dark .appkit-tag-input__field:focus-within {
-  border-color: var(--appkit-color-primary);
-  box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.2);
-}
-
 .dark .appkit-tag-input__tag {
-  background: rgba(233, 30, 140, 0.15);
+  background: color-mix(in srgb, var(--appkit-color-primary) 15%, transparent);
   color: var(--appkit-color-primary-300);
 }
 

package/dist/ui/components/Textarea.style.css

@@ -1,8 +1,8 @@
 .appkit-textarea {
   width: 100%;
   border: 1px solid var(--appkit-color-border);
-  border-radius: 0.375rem;
-  background: var(--appkit-color-surface);
+  border-radius: var(--appkit-radius-lg);
+  background: var(--appkit-color-surface-input);
   color: var(--appkit-color-text);
   padding: 0.5rem 0.625rem;
   font-size: 0.875rem;
@@ -22,8 +22,8 @@
 
 .appkit-textarea:focus-visible {
   outline: none;
-  border-color: var(--appkit-color-secondary);
-  box-shadow: 0 0 0 3px rgba(101, 196, 8, 0.25), inset 0 0 0 1px rgba(101, 196, 8, 0.15);
+  border-color: var(--appkit-color-focus-ring);
+  box-shadow: var(--appkit-focus-ring);
 }
 
 .appkit-textarea:disabled {
@@ -33,12 +33,6 @@
   resize: none;
 }
 
-.dark .appkit-textarea {
-  border-color: var(--appkit-color-border);
-  background: rgba(30, 41, 59, 0.7);
-  color: var(--appkit-color-text);
-}
-
 .dark .appkit-textarea::placeholder {
   color: var(--appkit-color-text-muted);
 }
@@ -47,11 +41,3 @@
   border-color: var(--appkit-color-slate-500);
 }
 
-.dark .appkit-textarea:focus-visible {
-  border-color: var(--appkit-color-primary);
-  box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.25), inset 0 0 0 1px rgba(233, 30, 140, 0.15);
-}
-
-.dark .appkit-textarea:disabled {
-  background: rgba(30, 41, 59, 0.4);
-}

package/dist/ui/components/Toggle.style.css

@@ -21,7 +21,7 @@
 
 .appkit-toggle__track:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.3), 0 0 0 4px var(--appkit-color-surface);
+  box-shadow: var(--appkit-focus-ring-halo);
 }
 
 .appkit-toggle__track--off {

package/dist/ui/components/Typography.d.ts

@@ -19,9 +19,9 @@ declare const TYPOGRAPHY: {
         readonly "3xl": "appkit-text--3xl";
         readonly "4xl": "appkit-text--4xl";
         readonly "5xl": "appkit-text--5xl";
-        readonly "6xl": "text-6xl";
-        readonly "7xl": "text-7xl";
-        readonly "8xl": "text-8xl";
+        readonly "6xl": "text-[length:var(--appkit-text-6xl)]";
+        readonly "7xl": "text-[length:var(--appkit-text-7xl)]";
+        readonly "8xl": "text-[length:var(--appkit-text-8xl)]";
     };
     readonly textWeight: {
         readonly light: "appkit-font--light";

package/dist/ui/components/Typography.js

@@ -21,9 +21,9 @@ const TYPOGRAPHY = {
         "3xl": "appkit-text--3xl",
         "4xl": "appkit-text--4xl",
         "5xl": "appkit-text--5xl",
-        "6xl": "text-6xl",
-        "7xl": "text-7xl",
-        "8xl": "text-8xl",
+        "6xl": "text-[length:var(--appkit-text-6xl)]",
+        "7xl": "text-[length:var(--appkit-text-7xl)]",
+        "8xl": "text-[length:var(--appkit-text-8xl)]",
     },
     textWeight: {
         light: "appkit-font--light",
@@ -103,9 +103,9 @@ const RESPONSIVE_TEXT_SIZE_CLASS = {
         "3xl": "sm:text-[length:var(--appkit-text-3xl)]",
         "4xl": "sm:text-[length:var(--appkit-text-4xl)]",
         "5xl": "sm:text-[length:var(--appkit-text-5xl)]",
-        "6xl": "sm:text-6xl",
-        "7xl": "sm:text-7xl",
-        "8xl": "sm:text-8xl",
+        "6xl": "sm:text-[length:var(--appkit-text-6xl)]",
+        "7xl": "sm:text-[length:var(--appkit-text-7xl)]",
+        "8xl": "sm:text-[length:var(--appkit-text-8xl)]",
     },
     "md:": {
         xs: "md:text-[length:var(--appkit-text-xs)]",
@@ -117,9 +117,9 @@ const RESPONSIVE_TEXT_SIZE_CLASS = {
         "3xl": "md:text-[length:var(--appkit-text-3xl)]",
         "4xl": "md:text-[length:var(--appkit-text-4xl)]",
         "5xl": "md:text-[length:var(--appkit-text-5xl)]",
-        "6xl": "md:text-6xl",
-        "7xl": "md:text-7xl",
-        "8xl": "md:text-8xl",
+        "6xl": "md:text-[length:var(--appkit-text-6xl)]",
+        "7xl": "md:text-[length:var(--appkit-text-7xl)]",
+        "8xl": "md:text-[length:var(--appkit-text-8xl)]",
     },
     "lg:": {
         xs: "lg:text-[length:var(--appkit-text-xs)]",
@@ -131,9 +131,9 @@ const RESPONSIVE_TEXT_SIZE_CLASS = {
         "3xl": "lg:text-[length:var(--appkit-text-3xl)]",
         "4xl": "lg:text-[length:var(--appkit-text-4xl)]",
         "5xl": "lg:text-[length:var(--appkit-text-5xl)]",
-        "6xl": "lg:text-6xl",
-        "7xl": "lg:text-7xl",
-        "8xl": "lg:text-8xl",
+        "6xl": "lg:text-[length:var(--appkit-text-6xl)]",
+        "7xl": "lg:text-[length:var(--appkit-text-7xl)]",
+        "8xl": "lg:text-[length:var(--appkit-text-8xl)]",
     },
     "xl:": {
         xs: "xl:text-[length:var(--appkit-text-xs)]",
@@ -145,9 +145,9 @@ const RESPONSIVE_TEXT_SIZE_CLASS = {
         "3xl": "xl:text-[length:var(--appkit-text-3xl)]",
         "4xl": "xl:text-[length:var(--appkit-text-4xl)]",
         "5xl": "xl:text-[length:var(--appkit-text-5xl)]",
-        "6xl": "xl:text-6xl",
-        "7xl": "xl:text-7xl",
-        "8xl": "xl:text-8xl",
+        "6xl": "xl:text-[length:var(--appkit-text-6xl)]",
+        "7xl": "xl:text-[length:var(--appkit-text-7xl)]",
+        "8xl": "xl:text-[length:var(--appkit-text-8xl)]",
     },
 };
 function responsiveSizeClass(prefix, size) {

package/dist/ui/components/ViewToggle.style.css

@@ -15,8 +15,8 @@
 
 .appkit-view-toggle__button--active {
   color: var(--appkit-color-secondary-600);
-  background: rgba(80, 156, 2, 0.08);
-  border-color: rgba(80, 156, 2, 0.3);
+  background: color-mix(in srgb, var(--appkit-color-secondary) 8%, transparent);
+  border-color: color-mix(in srgb, var(--appkit-color-secondary) 30%, transparent);
 }
 
 .appkit-view-toggle__button--inactive {
@@ -36,8 +36,8 @@
 
 .dark .appkit-view-toggle__button--active {
   color: var(--appkit-color-primary);
-  background: rgba(233, 30, 140, 0.14);
-  border-color: rgba(233, 30, 140, 0.35);
+  background: color-mix(in srgb, var(--appkit-color-primary) 14%, transparent);
+  border-color: color-mix(in srgb, var(--appkit-color-primary) 35%, transparent);
 }
 
 .dark .appkit-view-toggle__button--inactive {

package/dist/ui/forms/AddAnotherToggle.d.ts

@@ -0,0 +1,16 @@
+export interface AddAnotherToggleProps {
+    /** What is being created, for the label: "listing" → "Create & add another listing". */
+    noun?: string;
+    /** Hidden while editing an existing record — see the note below. */
+    isCreate?: boolean;
+}
+export declare function AddAnotherToggle({ noun, isCreate, }: AddAnotherToggleProps): import("react").JSX.Element | null;
+/**
+ * The submit button's label, given the toggle.
+ *
+ * 🛑 A SEPARATE HELPER BECAUSE THE LABEL MUST CHANGE. A button that says
+ * "Create listing" and then does not navigate has lied about what it did, and
+ * the user's next move is to press it again — which creates a duplicate. The
+ * label is the only thing telling them the destination changed.
+ */
+export declare function addAnotherSubmitLabel(base: string, addAnother: boolean): string;