@mohasinac/appkit 3.4.8 → 3.5.0

package/dist/tokens/index.js

@@ -228,8 +228,6 @@ export const LAYOUT = {
     firstChild: "mt-0 pt-0",
     /** Kill bottom margin from last element in a zone */
     lastChild: "mb-0 pb-0",
-    /** Combined bottom-nav bar (hidden on lg+, iPhone safe-area aware) */
-    bottomNav: "fixed bottom-0 inset-x-0 z-50 flex justify-around items-center h-16 bg-[var(--appkit-color-surface)] border-t border-[var(--appkit-color-border-subtle)] lg:hidden pb-[env(safe-area-inset-bottom)]",
     /** Main content bottom padding to clear the bottom nav on mobile */
     mainPadBottomNav: "pb-20 lg:pb-0",
     /** Standard card heights for consistency */

package/dist/tokens/tokens.css

@@ -588,16 +588,26 @@
   --appkit-z-overlay:        45;
   --appkit-z-navbar:         40;
   --appkit-z-bottom-nav:     40;
+  --appkit-z-title-bar:      42;
   --appkit-z-sidebar:        50;
-  --appkit-z-title-bar:      50;
   --appkit-z-modal:          60;
+  /* Transient option menus (Dropdown, Select) — must render above an open
+     Modal/Drawer/SideModal/SideDrawer (60) since they're commonly triggered
+     from inside one (e.g. a form Select field inside a Drawer), but they're
+     non-blocking so sit below toast/tooltip/confirm. */
+  --appkit-z-popover:        65;
   --appkit-z-toast:          70;
   --appkit-z-tooltip:        80;
+  /* Confirm dialogs / row-action menus — must always win regardless of what
+     they were opened from (a QuickFormDrawer panel, a FormShell dialog,
+     etc. — the highest of those is 65). Set above tooltip so it's the
+     unconditional top of the interactive-overlay stack. */
+  --appkit-z-confirm:        90;
 
   /* Layout dimensions */
   --appkit-navbar-height:     2.5rem;  /* h-10 = 40px (mobile), h-12 = 48px (md) */
   --appkit-sidebar-width:     20rem;   /* w-80 = 320px */
-  --appkit-bottom-nav-height: 3.5rem;  /* h-14 = 56px */
+  --appkit-bottom-nav-height: 4rem;    /* h-16 = 64px */
   --appkit-title-bar-height:  3rem;    /* h-12 = 48px */
 }
 

package/dist/ui/DataTable.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState, useMemo } from "react";
 const CLS_CHECKBOX = "rounded border-zinc-300";
 import { Button } from "./components/Button";
+import { Checkbox } from "./components/Checkbox";
 import { Spinner } from "./components/Spinner";
 import { Pagination } from "./components/Pagination";
 import { Span, Text } from "./components/Typography";
@@ -122,7 +123,7 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
                 mobileCardRender &&
                 renderCardGrid(activeViewMode), activeViewMode === "table" && mobileCardRender && (_jsx(Div, { className: "appkit-data-table__mobile-cards", children: paginatedData.map((item) => (_jsx(SelectableCard, { id: keyExtractor(item), selectable: selectable, selected: selectedIds.includes(keyExtractor(item)), onToggle: (id, checked) => onSelectionChange?.(checked
                         ? [...selectedIds, id]
-                        : selectedIds.filter((s) => s !== id)), children: mobileCardRender(item) }, keyExtractor(item)))) })), activeViewMode === "table" && (_jsx(Div, { className: "appkit-data-table__wrapper", children: _jsx(Div, { className: `appkit-data-table__scroll ${stickyHeader ? "appkit-data-table__scroll--sticky" : ""}`, children: _jsxs("table", { className: "appkit-data-table__table", children: [_jsx("thead", { className: `appkit-data-table__thead ${stickyHeader ? "appkit-data-table__thead--sticky" : ""}`, children: _jsxs("tr", { children: [selectable && (_jsx("th", { scope: "col", className: "px-4 py-3 w-8", children: _jsx("input", { type: "checkbox", className: CLS_CHECKBOX, "aria-label": "Select all on page", checked: paginatedData.length > 0 &&
+                        : selectedIds.filter((s) => s !== id)), children: mobileCardRender(item) }, keyExtractor(item)))) })), activeViewMode === "table" && (_jsx(Div, { className: "appkit-data-table__wrapper", children: _jsx(Div, { className: `appkit-data-table__scroll ${stickyHeader ? "appkit-data-table__scroll--sticky" : ""}`, children: _jsxs("table", { className: "appkit-data-table__table", children: [_jsx("thead", { className: `appkit-data-table__thead ${stickyHeader ? "appkit-data-table__thead--sticky" : ""}`, children: _jsxs("tr", { children: [selectable && (_jsx("th", { scope: "col", className: "px-4 py-3 w-8", children: _jsx(Checkbox, { bare: true, className: CLS_CHECKBOX, "aria-label": "Select all on page", checked: paginatedData.length > 0 &&
                                                     paginatedData.every((item) => selectedIds.includes(keyExtractor(item))), onChange: (e) => {
                                                     const pageIds = paginatedData.map(keyExtractor);
                                                     onSelectionChange?.(e.target.checked
@@ -140,7 +141,7 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
                                             ? "appkit-data-table__row--striped"
                                             : "",
                                         onRowClick ? "appkit-data-table__row--clickable" : "",
-                                    ].join(" "), onClick: () => onRowClick?.(item), children: [selectable && (_jsx("td", { className: "px-4 py-4 w-8", onClick: (e) => e.stopPropagation(), children: _jsx("input", { type: "checkbox", className: CLS_CHECKBOX, "aria-label": "Select row", checked: selectedIds.includes(keyExtractor(item)), onChange: (e) => handleRowSelectionChange(item, e.target.checked) }) })), columns.map((col) => (_jsx("td", { className: "appkit-data-table__td", children: col.render
+                                    ].join(" "), onClick: () => onRowClick?.(item), children: [selectable && (_jsx("td", { className: "px-4 py-4 w-8", onClick: (e) => e.stopPropagation(), children: _jsx(Checkbox, { bare: true, className: CLS_CHECKBOX, "aria-label": "Select row", checked: selectedIds.includes(keyExtractor(item)), onChange: (e) => handleRowSelectionChange(item, e.target.checked) }) })), columns.map((col) => (_jsx("td", { className: "appkit-data-table__td", children: col.render
                                                 ? col.render(item)
                                                 : (item[col.key] ?? "-") }, col.key))), actions && (_jsx("td", { className: "appkit-data-table__td appkit-data-table__td--actions", onClick: (e) => e.stopPropagation(), children: actions(item) }))] }, keyExtractor(item)))) })] }) }) })), !externalPagination && totalPages > 1 && (_jsx(Div, { className: "appkit-data-table__pagination", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: setCurrentPage, maxVisible: resolvedPag.maxVisible, showFirstLast: resolvedPag.showFirstLast, showPrevNext: resolvedPag.showPrevNext, size: resolvedPag.size }) }))] }));
 }
@@ -150,7 +151,7 @@ function SelectableCard({ id, selectable, selected, onToggle, children, listMode
     return (_jsxs(Div, { className: "relative group h-full", children: [_jsx(Div, { className: [
                     "absolute z-10",
                     listMode ? "left-2 top-1/2 -translate-y-1/2" : "top-2 left-2",
-                ].join(" "), onClick: (e) => e.stopPropagation(), children: _jsx(Row, { className: "w-6 h-6", surface: "default", align: "center", justify: "center", rounded: "md", shadow: "md", children: _jsxs(Row, { className: "relative", align: "center", justify: "center", children: [_jsx("input", { type: "checkbox", className: [
+                ].join(" "), onClick: (e) => e.stopPropagation(), children: _jsx(Row, { className: "w-6 h-6", surface: "default", align: "center", justify: "center", rounded: "md", shadow: "md", children: _jsxs(Row, { className: "relative", align: "center", justify: "center", children: [_jsx(Checkbox, { bare: true, className: [
                                     "w-4 h-4 rounded cursor-pointer transition-all appearance-none",
                                     selected
                                         ? "border-2 border-primary bg-primary"

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

@@ -31,6 +31,7 @@ type ButtonTextColor = "default" | "muted" | "faint" | "primary";
 type ButtonBorder = "none" | "default" | "subtle" | "strong";
 type ButtonPaddingY = "none" | "xs" | "y-xs-tall" | "sm" | "y-sm-tall" | "md" | "lg";
 type ButtonWeight = "normal" | "medium" | "semibold" | "bold";
+type ButtonJustify = "center" | "start" | "end" | "between";
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: keyof typeof UI_BUTTON.variants;
     size?: keyof typeof UI_BUTTON.sizes;
@@ -54,6 +55,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     rounded?: ButtonRounded;
     /** Box shadow override — replaces raw `className="shadow-*"` tokens. */
     shadow?: ShadowKey;
+    /** Main-axis content distribution — for full-width buttons with spread content (e.g. label + chevron). Defaults to the button's own centered layout. */
+    justify?: ButtonJustify;
     /** Render as the child element (e.g. next/link) with button styling applied */
     asChild?: boolean;
     /**
@@ -63,5 +66,5 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      */
     action?: ActionDef;
 }
-export declare function Button({ variant, size, className, isLoading, disabled, children, gap, textSize, paddingX, paddingY, weight, textColor, border, rounded, shadow, asChild, action, ...props }: ButtonProps): React.JSX.Element;
+export declare function Button({ variant, size, className, isLoading, disabled, children, gap, textSize, paddingX, paddingY, weight, textColor, border, rounded, shadow, justify, asChild, action, ...props }: ButtonProps): React.JSX.Element;
 export {};

package/dist/ui/components/Button.js

@@ -65,7 +65,7 @@ const BUTTON_ROUNDED_MAP = {
     full: "rounded-full",
 };
 const BUTTON_PADDING_X_MAP = {
-    none: "",
+    none: "px-0",
     xs: "px-2",
     sm: "px-3",
     md: "px-4",
@@ -85,7 +85,7 @@ const BUTTON_BORDER_MAP = {
     strong: "border border-[var(--appkit-color-border)]",
 };
 const BUTTON_PADDING_Y_MAP = {
-    none: "",
+    none: "py-0",
     xs: "py-1",
     "y-xs-tall": "py-2.5",
     sm: "py-2",
@@ -99,6 +99,12 @@ const BUTTON_WEIGHT_MAP = {
     semibold: "font-semibold",
     bold: "font-bold",
 };
+const BUTTON_JUSTIFY_MAP = {
+    center: "justify-center",
+    start: "justify-start",
+    end: "justify-end",
+    between: "justify-between",
+};
 // Map ActionKind → Button variant (caller can override via explicit variant prop)
 const ACTION_KIND_VARIANT = {
     primary: "primary",
@@ -108,13 +114,13 @@ const ACTION_KIND_VARIANT = {
     link: "ghost",
     chip: "outline",
 };
-export function Button({ variant, size = "md", className = "", isLoading = false, disabled, children, gap, textSize, paddingX, paddingY, weight, textColor, border, rounded, shadow, asChild = false, action, ...props }) {
+export function Button({ variant, size = "md", className = "", isLoading = false, disabled, children, gap, textSize, paddingX, paddingY, weight, textColor, border, rounded, shadow, justify, asChild = false, action, ...props }) {
     const [confirmOpen, setConfirmOpen] = useState(false);
     // Resolve defaults from action registry
     const resolvedVariant = variant ?? (action ? (ACTION_KIND_VARIANT[action.kind] ?? "primary") : "primary");
     const resolvedChildren = children ?? (action ? action.label : undefined);
     const resolvedAriaLabel = props["aria-label"] ?? (action ? (action.ariaLabel ?? action.label) : undefined);
-    const classes = twMerge(UI_BUTTON.base, UI_BUTTON.variants[resolvedVariant], UI_BUTTON.sizes[size], gap ? BUTTON_GAP_MAP[gap] : "", textSize ? BUTTON_TEXT_SIZE_MAP[textSize] : "", paddingX ? BUTTON_PADDING_X_MAP[paddingX] : "", paddingY ? BUTTON_PADDING_Y_MAP[paddingY] : "", weight ? BUTTON_WEIGHT_MAP[weight] : "", textColor ? BUTTON_TEXT_COLOR_MAP[textColor] : "", border ? BUTTON_BORDER_MAP[border] : "", rounded ? BUTTON_ROUNDED_MAP[rounded] : "", shadow ? SHADOW_MAP[shadow] : "", className);
+    const classes = twMerge(UI_BUTTON.base, UI_BUTTON.variants[resolvedVariant], UI_BUTTON.sizes[size], gap ? BUTTON_GAP_MAP[gap] : "", textSize ? BUTTON_TEXT_SIZE_MAP[textSize] : "", paddingX ? BUTTON_PADDING_X_MAP[paddingX] : "", paddingY ? BUTTON_PADDING_Y_MAP[paddingY] : "", weight ? BUTTON_WEIGHT_MAP[weight] : "", textColor ? BUTTON_TEXT_COLOR_MAP[textColor] : "", border ? BUTTON_BORDER_MAP[border] : "", rounded ? BUTTON_ROUNDED_MAP[rounded] : "", shadow ? SHADOW_MAP[shadow] : "", justify ? BUTTON_JUSTIFY_MAP[justify] : "", className);
     const userOnClick = props.onClick;
     const toast = useToastSafe();
     // Wrap the user's onClick so async rejections never escape silently. Errors
@@ -175,7 +181,7 @@ export function Button({ variant, size = "md", className = "", isLoading = false
         ? (ACTION_KIND_VARIANT[confirmDef.confirmKind] ?? "primary")
         : "primary";
     return (_jsxs(_Fragment, { children: [_jsxs("button", { className: classes, disabled: disabled || isLoading, "aria-busy": isLoading || undefined, ...props, "aria-label": resolvedAriaLabel, onClick: handleClick, children: [isLoading && (_jsx(Loader2, { className: "appkit-button__spinner", "aria-hidden": "true" })), isLoading ? (_jsx("span", { className: "appkit-button__content appkit-button__content--loading", children: resolvedChildren })) : (_jsx("span", { className: "appkit-button__content", children: resolvedChildren }))] }), confirmOpen && confirmDef && typeof document !== "undefined" && createPortal(_jsx("div", { role: "dialog", "aria-modal": "true", "aria-labelledby": "appkit-action-confirm-title", style: {
-                    position: "fixed", inset: 0, zIndex: "var(--appkit-z-modal, 1000)",
+                    position: "fixed", inset: 0, zIndex: "var(--appkit-z-confirm, 1000)",
                     display: "flex", alignItems: "center", justifyContent: "center",
                     background: "rgba(0,0,0,0.45)", backdropFilter: "blur(2px)",
                 }, onClick: (e) => { if (e.target === e.currentTarget)

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

@@ -4,5 +4,13 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     suffix?: React.ReactNode;
     error?: React.ReactNode;
     indeterminate?: boolean;
+    /** Override the native input type — for a checkbox-shaped control driven by radio semantics (e.g. a poll option list toggling between multi/single-select). Defaults to `"checkbox"`. */
+    type?: "checkbox" | "radio";
+    /**
+     * Render just the native input with no Label/box/icon chrome — for
+     * call sites that already own their own custom option-card markup
+     * (border, padding, hover state) and just need the underlying control.
+     */
+    bare?: boolean;
 }
-export declare function Checkbox({ label, suffix, error, indeterminate, className, checked, disabled, id, ...props }: CheckboxProps): React.JSX.Element;
+export declare function Checkbox({ label, suffix, error, indeterminate, type, bare, className, checked, disabled, id, ...props }: CheckboxProps): React.JSX.Element;

package/dist/ui/components/Checkbox.js

@@ -14,7 +14,7 @@ const UI_CHECKBOX = {
     text: "appkit-checkbox__text",
     error: "appkit-checkbox__error",
 };
-export function Checkbox({ label, suffix, error, indeterminate = false, className = "", checked, disabled, id, ...props }) {
+export function Checkbox({ label, suffix, error, indeterminate = false, type = "checkbox", bare = false, className = "", checked, disabled, id, ...props }) {
     const generatedId = React.useId();
     const inputId = id ?? generatedId;
     const inputRef = React.useRef(null);
@@ -23,12 +23,15 @@ export function Checkbox({ label, suffix, error, indeterminate = false, classNam
             inputRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
+    if (bare) {
+        return (_jsx("input", { ...props, ref: inputRef, id: inputId, type: type, checked: checked, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: className }));
+    }
     return (_jsxs("div", { className: UI_CHECKBOX.base, "data-section": "checkbox-div-467", children: [_jsxs(Label, { htmlFor: inputId, className: [
                     UI_CHECKBOX.label,
                     disabled ? UI_CHECKBOX.labelDisabled : "",
                 ]
                     .filter(Boolean)
-                    .join(" "), children: [_jsxs("span", { className: UI_CHECKBOX.boxWrap, children: [_jsx("input", { ...props, ref: inputRef, id: inputId, type: "checkbox", checked: checked, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: [
+                    .join(" "), children: [_jsxs("span", { className: UI_CHECKBOX.boxWrap, children: [_jsx("input", { ...props, ref: inputRef, id: inputId, type: type, checked: checked, disabled: disabled, "aria-invalid": error ? "true" : undefined, className: [
                                     UI_CHECKBOX.input,
                                     error ? UI_CHECKBOX.inputError : "",
                                     className,

package/dist/ui/components/ClaimCouponButton.js

@@ -22,11 +22,12 @@ import { Button } from "./Button";
 import { LoginRequiredModal } from "./LoginRequiredModal";
 import { useSession } from "../../react/contexts/SessionContext";
 import { useToast } from "./Toast";
+import { ACCOUNT_ENDPOINTS } from "../../constants/api-endpoints";
 async function postClaim(couponCode, source) {
     if (typeof fetch === "undefined")
         return false;
     try {
-        const res = await fetch("/api/user/coupons/claim", {
+        const res = await fetch(ACCOUNT_ENDPOINTS.COUPONS_CLAIM, {
             method: "POST",
             headers: { "Content-Type": "application/json" },
             credentials: "include",

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

@@ -3,7 +3,7 @@
 .appkit-confirm-modal__backdrop {
   position: fixed;
   inset: 0;
-  z-index: var(--appkit-z-sidebar);
+  z-index: var(--appkit-z-confirm);
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -1,7 +1,7 @@
 .appkit-drawer {
   position: fixed;
   inset: 0;
-  z-index: var(--appkit-z-sidebar);
+  z-index: var(--appkit-z-modal);
 }
 
 .appkit-drawer--open {
@@ -150,12 +150,24 @@
   flex: 1;
   overflow-y: auto;
   padding: 1rem 1.25rem;
+  /* Reserve room to scroll the last inline element fully above the bottom
+     nav — same fix as SideDrawer's __content, same root cause. */
+  padding-bottom: calc(1rem + var(--bottom-nav-height, 0px));
+}
+
+@media (min-width: 1024px) {
+  .appkit-drawer__body { padding-bottom: 1rem; }
 }
 
 .appkit-drawer__footer {
   flex-shrink: 0;
   border-top: 1px solid var(--appkit-color-border-subtle);
   padding: 1rem 1.25rem;
+  padding-bottom: calc(1rem + var(--bottom-nav-height, 0px));
+}
+
+@media (min-width: 1024px) {
+  .appkit-drawer__footer { padding-bottom: 1rem; }
 }
 
 .dark .appkit-drawer__footer {

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

@@ -7,7 +7,7 @@
 
 .appkit-dropdown__menu {
   position: absolute;
-  z-index: var(--appkit-z-sidebar);
+  z-index: var(--appkit-z-popover);
   margin-top: 0.5rem;
   min-width: 180px;
   border-radius: 0.5rem;
@@ -45,7 +45,7 @@
 .appkit-dropdown__composed-menu {
   position: absolute;
   right: 0;
-  z-index: var(--appkit-z-sidebar);
+  z-index: var(--appkit-z-popover);
   margin-top: 0.25rem;
   min-width: 160px;
   border-radius: 0.5rem;

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { type SectionBackgroundConfig } from "./Semantic";
 export interface FilterDrawerProps {
     children: React.ReactNode;
     title?: string;
@@ -16,5 +17,7 @@ export interface FilterDrawerProps {
     side?: "left" | "right" | "bottom";
     /** Width for left/right drawers. Default: "md" (responsive: full-width on mobile, 24rem on desktop). */
     size?: "sm" | "md" | "lg" | "full";
+    /** Optional color/gradient/image background for the drawer body — same shape as <Section background={…}>. */
+    background?: SectionBackgroundConfig;
 }
-export declare function FilterDrawer({ children, title, open, onOpen, onClose, onApply, onReset, activeCount, pendingCount, triggerLabel, triggerClassName, hideTrigger, side, size, }: FilterDrawerProps): React.JSX.Element;
+export declare function FilterDrawer({ children, title, open, onOpen, onClose, onApply, onReset, activeCount, pendingCount, triggerLabel, triggerClassName, hideTrigger, side, size, background, }: FilterDrawerProps): React.JSX.Element;

package/dist/ui/components/FilterDrawer.js

@@ -4,7 +4,8 @@ import React from "react";
 import { Button } from "./Button";
 import { Drawer } from "./Drawer";
 import { Span } from "./Typography";
-export function FilterDrawer({ children, title = "Filters", open, onOpen, onClose, onApply, onReset, activeCount = 0, pendingCount, triggerLabel = "Filters", triggerClassName = "", hideTrigger = false, side = "right", size = "md", }) {
+import { sectionBackgroundStyle } from "./Semantic";
+export function FilterDrawer({ children, title = "Filters", open, onOpen, onClose, onApply, onReset, activeCount = 0, pendingCount, triggerLabel = "Filters", triggerClassName = "", hideTrigger = false, side = "right", size = "md", background, }) {
     const [internalOpen, setInternalOpen] = React.useState(false);
     const isControlled = open !== undefined;
     const isOpen = isControlled ? open : internalOpen;
@@ -35,5 +36,10 @@ export function FilterDrawer({ children, title = "Filters", open, onOpen, onClos
                     .filter(Boolean)
                     .join(" "), "aria-label": triggerLabel, children: [_jsx(Span, { children: triggerLabel }), activeCount > 0 ? (_jsx(Span, { className: "appkit-filter-drawer__badge", children: activeCount })) : null] })) : null, _jsx(Drawer, { isOpen: isOpen, onClose: handleClose, title: title, side: side, size: size, className: "appkit-drawer__panel--filter", footer: _jsxs("div", { className: "appkit-filter-drawer__footer", "data-section": "filterdrawer-div-494", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: onReset, children: "Reset all" }), _jsx(Button, { type: "button", variant: "primary", onClick: handleApply, children: pendingCount != null && pendingCount > 0
                                 ? `Apply (${pendingCount})`
-                                : "Apply" })] }), children: _jsx("div", { className: "appkit-filter-drawer__body", "data-section": "filterdrawer-div-495", children: children }) })] }));
+                                : "Apply" })] }), children: _jsxs("div", { className: [
+                        "appkit-filter-drawer__body",
+                        background?.value ? "relative overflow-hidden" : "",
+                    ]
+                        .filter(Boolean)
+                        .join(" "), "data-section": "filterdrawer-div-495", children: [background?.value && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, className: "absolute inset-0 -z-10", style: sectionBackgroundStyle(background) }), background.overlay?.enabled && (_jsx(Span, { "aria-hidden": true, className: "absolute inset-0 -z-10", style: { backgroundColor: background.overlay.color, opacity: background.overlay.opacity } }))] })), children] }) })] }));
 }

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

@@ -25,7 +25,7 @@ export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement
     gap?: GapToken;
 }
 export type GapToken = "none" | "xs" | "sm" | "md" | "lg" | "xl";
-export declare function Form({ children, spacing, schema, align, gap, surface, padding, rounded, border, shadow, className, ...props }: FormProps): React.JSX.Element;
+export declare function Form({ children, spacing, schema, align, gap, surface, padding, paddingX, paddingY, rounded, border, shadow, overflow, className, ...props }: FormProps): React.JSX.Element;
 export interface FormGroupProps {
     children: React.ReactNode;
     columns?: 1 | 2 | 3 | 4;

package/dist/ui/components/Form.js

@@ -43,7 +43,7 @@ const FORM_ALIGN_MAP = {
     end: "items-end",
     stretch: "items-stretch",
 };
-export function Form({ children, spacing, schema, align, gap, surface, padding, rounded, border, shadow, className = "", ...props }) {
+export function Form({ children, spacing, schema, align, gap, surface, padding, paddingX, paddingY, rounded, border, shadow, overflow, className = "", ...props }) {
     const helpers = useFormShellState(schema);
     const content = typeof children === "function"
         ? children(helpers)
@@ -53,7 +53,7 @@ export function Form({ children, spacing, schema, align, gap, surface, padding,
                 spacing ? FORM_SPACING_MAP[spacing] : "",
                 align ? FORM_ALIGN_MAP[align] : "",
                 gap ? GAP_MAP[gap] : "",
-                buildSurfaceClasses({ surface, padding, rounded, border, shadow }),
+                buildSurfaceClasses({ surface, padding, paddingX, paddingY, rounded, border, shadow, overflow }),
                 className,
             ].filter(Boolean).join(" "), ...props, children: content }) }));
 }

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

@@ -2,7 +2,7 @@
 
 .appkit-form-action-bar {
   position: sticky;
-  bottom: 0;
+  bottom: var(--bottom-nav-height, 0px);
   z-index: var(--appkit-z-raised);
   display: flex;
   align-items: center;
@@ -12,6 +12,11 @@
   background: var(--appkit-color-surface);
   backdrop-filter: blur(8px);
   padding: 0.75rem 1rem;
+  /* Safety net for iOS Safari, which doesn't shrink a 100vh/100dvh ancestor
+     when the on-screen keyboard opens — pads the bar's real bottom edge so
+     it never renders underneath the keyboard even if the ancestor didn't
+     resize. Desktop's `top` flip below resets this via its own shorthand. */
+  padding-bottom: calc(0.75rem + var(--keyboard-inset-height, 0px));
 }
 
 /* Desktop: flip to sticky top, below the fixed header */

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { type RoundedKey } from "./surface-tokens";
 declare const SIZES: {
     readonly sm: "appkit-icon-button--sm";
     readonly md: "appkit-icon-button--md";
@@ -9,6 +10,8 @@ declare const VARIANTS: {
     readonly outline: "appkit-icon-button--outline";
     readonly primary: "appkit-icon-button--primary";
     readonly danger: "appkit-icon-button--danger";
+    /** Theme-independent white-on-translucent-black — for controls floating over a fixed-dark surface (lightbox, video player). */
+    readonly scrim: "appkit-icon-button--scrim";
 };
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Required — text alternative for screen readers. Also shown as tooltip. */
@@ -17,6 +20,8 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     icon?: React.ReactNode;
     size?: keyof typeof SIZES;
     variant?: keyof typeof VARIANTS;
+    /** Border radius — replaces consumer `rounded-*` className. */
+    rounded?: RoundedKey;
 }
 /**
  * Icon-only button. `aria-label` is required — will throw in development if omitted.
@@ -28,5 +33,5 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
  * </Tooltip>
  * ```
  */
-export declare function IconButton({ size, variant, className, icon, children, ...props }: IconButtonProps): React.JSX.Element;
+export declare function IconButton({ size, variant, rounded, className, icon, children, ...props }: IconButtonProps): React.JSX.Element;
 export {};

package/dist/ui/components/IconButton.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { twMerge } from "tailwind-merge";
+import { ROUNDED_MAP } from "./surface-tokens";
 const BASE = "appkit-icon-button";
 const SIZES = {
     sm: "appkit-icon-button--sm",
@@ -11,6 +12,8 @@ const VARIANTS = {
     outline: "appkit-icon-button--outline",
     primary: "appkit-icon-button--primary",
     danger: "appkit-icon-button--danger",
+    /** Theme-independent white-on-translucent-black — for controls floating over a fixed-dark surface (lightbox, video player). */
+    scrim: "appkit-icon-button--scrim",
 };
 /**
  * Icon-only button. `aria-label` is required — will throw in development if omitted.
@@ -22,10 +25,10 @@ const VARIANTS = {
  * </Tooltip>
  * ```
  */
-export function IconButton({ size = "md", variant = "ghost", className = "", icon, children, ...props }) {
+export function IconButton({ size = "md", variant = "ghost", rounded, className = "", icon, children, ...props }) {
     if (process.env.NODE_ENV !== "production" && !props["aria-label"]) {
         throw new Error('[IconButton] Missing required "aria-label" prop. ' +
             'Add aria-label="..." to the button or wrap with <Tooltip label="...">.');
     }
-    return (_jsx("button", { type: "button", className: twMerge(BASE, SIZES[size], VARIANTS[variant], className), ...props, children: icon ?? children }));
+    return (_jsx("button", { type: "button", className: twMerge(BASE, SIZES[size], VARIANTS[variant], rounded ? ROUNDED_MAP[rounded] : "", className), ...props, children: icon ?? children }));
 }

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

@@ -101,3 +101,14 @@
 .dark .appkit-icon-button--danger:hover:not(:disabled) {
   background: rgba(127, 29, 29, 0.35);
 }
+
+/* Theme-independent: for controls floating over a fixed-dark surface (lightbox,
+   video player, fullscreen overlay) that stays near-black regardless of site theme. */
+.appkit-icon-button--scrim {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+
+.appkit-icon-button--scrim:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.2);
+}

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

@@ -94,12 +94,14 @@
 }
 
 .appkit-image-gallery__counter {
+  /* audit-bottom-offset-ok: positioned relative to the gallery's own bounding box, not the viewport/bottom-nav */
   bottom: 0.5rem;
   right: 0.5rem;
 }
 
 @media (min-width: 768px) {
   .appkit-image-gallery__counter {
+    /* audit-bottom-offset-ok: positioned relative to the gallery's own bounding box, not the viewport/bottom-nav */
     bottom: 1rem;
     right: 1rem;
   }

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

@@ -48,6 +48,7 @@
 
 .appkit-lightbox__zoom-hint {
   position: absolute;
+  /* audit-bottom-offset-ok: absolutely positioned within the fullscreen lightbox overlay, not the viewport/bottom-nav */
   bottom: 1rem;
   right: 1rem;
   color: rgba(255, 255, 255, 0.4);

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { type SectionBackgroundConfig } from "./Semantic";
 export interface ListingFilterDrawerProps {
     open: boolean;
     onClose: () => void;
@@ -6,5 +7,7 @@ export interface ListingFilterDrawerProps {
     onClear: () => void;
     activeCount: number;
     children: React.ReactNode;
+    /** Optional color/gradient/image background for the drawer panel — same shape as <Section background={…}>. */
+    background?: SectionBackgroundConfig;
 }
-export declare function ListingFilterDrawer({ open, onClose, onApply, onClear, activeCount, children, }: ListingFilterDrawerProps): React.JSX.Element | null;
+export declare function ListingFilterDrawer({ open, onClose, onApply, onClear, activeCount, children, background, }: ListingFilterDrawerProps): React.JSX.Element | null;

package/dist/ui/components/ListingFilterDrawer.js

@@ -1,11 +1,12 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
 import { Button } from "./Button";
 import { Span } from "./Typography";
+import { sectionBackgroundStyle } from "./Semantic";
 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";
-export function ListingFilterDrawer({ open, onClose, onApply, onClear, activeCount, children, }) {
+export function ListingFilterDrawer({ open, onClose, onApply, onClear, activeCount, children, background, }) {
     if (!open)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: onClose }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-[var(--appkit-color-surface)] shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-[var(--appkit-color-border)] px-4 py-3.5", children: [_jsx(Span, { size: "base", weight: "semibold", className: "text-[var(--appkit-color-text)]", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeCount > 0 && (_jsx(Button, { variant: "ghost", type: "button", onClick: onClear, className: CLS_CLEAR_BTN, children: "Clear all" })), _jsx(Button, { variant: "ghost", type: "button", onClick: onClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)] transition-colors min-h-0 h-auto", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: children }), _jsx("div", { className: "border-t border-[var(--appkit-color-border)] px-4 py-3.5", children: _jsxs(Button, { type: "button", onClick: onApply, className: "w-full", children: ["Apply Filters", activeCount > 0 ? ` (${activeCount})` : ""] }) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: onClose }), _jsxs("div", { className: `fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-[var(--appkit-color-surface)] shadow-2xl${background?.value ? " relative overflow-hidden" : ""}`, children: [background?.value && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, className: "absolute inset-0 -z-10", style: sectionBackgroundStyle(background) }), background.overlay?.enabled && (_jsx(Span, { "aria-hidden": true, className: "absolute inset-0 -z-10", style: { backgroundColor: background.overlay.color, opacity: background.overlay.opacity } }))] })), _jsxs("div", { className: "flex items-center justify-between border-b border-[var(--appkit-color-border)] px-4 py-3.5", children: [_jsx(Span, { size: "base", weight: "semibold", className: "text-[var(--appkit-color-text)]", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeCount > 0 && (_jsx(Button, { variant: "ghost", type: "button", onClick: onClear, className: CLS_CLEAR_BTN, children: "Clear all" })), _jsx(Button, { variant: "ghost", type: "button", onClick: onClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)] transition-colors min-h-0 h-auto", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: children }), _jsx("div", { className: "border-t border-[var(--appkit-color-border)] px-4 py-3.5", children: _jsxs(Button, { type: "button", onClick: onApply, className: "w-full", children: ["Apply Filters", activeCount > 0 ? ` (${activeCount})` : ""] }) })] })] }));
 }

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

@@ -407,8 +407,8 @@
 }
 
 .appkit-listing-layout__mobile-pagination--dashboard { bottom: 0; }
-.appkit-listing-layout__mobile-pagination--default   { bottom: 3.5rem; }
-.appkit-listing-layout__mobile-pagination--bulk      { bottom: 7rem; }
+.appkit-listing-layout__mobile-pagination--default   { bottom: var(--bottom-nav-height, 4rem); }
+.appkit-listing-layout__mobile-pagination--bulk      { bottom: calc(var(--bottom-nav-height, 4rem) + 3.5rem); }
 
 /* -- Mobile filter overlay --------------------------- */
 

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

@@ -1,7 +1,7 @@
 .appkit-modal {
   position: fixed;
   inset: 0;
-  z-index: var(--appkit-z-sidebar);
+  z-index: var(--appkit-z-modal);
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -22,5 +22,9 @@ export interface PaginationProps {
     disabled?: boolean;
     size?: "sm" | "md" | "lg";
     className?: string;
+    /** Current page size — required to render the selector (paired with `onPageSizeChange`). */
+    pageSize?: number;
+    /** Called with the newly picked page size. Rendering the selector requires both this and `pageSize`. */
+    onPageSizeChange?: (size: number) => void;
 }
-export declare function Pagination({ currentPage, totalPages, onPageChange, paginationConfig, maxVisible: maxVisibleProp, showFirstLast: showFirstLastProp, showPrevNext: showPrevNextProp, disabled, size: sizeProp, className, }: PaginationProps): React.JSX.Element;
+export declare function Pagination({ currentPage, totalPages, onPageChange, paginationConfig, maxVisible: maxVisibleProp, showFirstLast: showFirstLastProp, showPrevNext: showPrevNextProp, disabled, size: sizeProp, className, pageSize, onPageSizeChange, }: PaginationProps): React.JSX.Element;

package/dist/ui/components/Pagination.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DEFAULT_PAGINATION_CONFIG } from "../../contracts";
+import { Select } from "./Select";
 function getPageNumbers(currentPage, totalPages, maxVisible) {
     if (totalPages <= maxVisible) {
         return Array.from({ length: totalPages }, (_, i) => i + 1);
@@ -31,12 +32,13 @@ const SIZE_CLASSES = {
     md: "appkit-pagination--md",
     lg: "appkit-pagination--lg",
 };
-export function Pagination({ currentPage, totalPages, onPageChange, paginationConfig, maxVisible: maxVisibleProp, showFirstLast: showFirstLastProp, showPrevNext: showPrevNextProp, disabled = false, size: sizeProp, className = "", }) {
+export function Pagination({ currentPage, totalPages, onPageChange, paginationConfig, maxVisible: maxVisibleProp, showFirstLast: showFirstLastProp, showPrevNext: showPrevNextProp, disabled = false, size: sizeProp, className = "", pageSize, onPageSizeChange, }) {
     const resolved = { ...DEFAULT_PAGINATION_CONFIG, ...paginationConfig };
     const maxVisible = maxVisibleProp ?? resolved.maxVisible;
     const showFirstLast = showFirstLastProp ?? resolved.showFirstLast;
     const showPrevNext = showPrevNextProp ?? resolved.showPrevNext;
     const size = sizeProp ?? resolved.size;
+    const showPageSizeSelector = resolved.showPageSizeSelector && pageSize != null && !!onPageSizeChange;
     const handle = (page) => {
         if (disabled || page < 1 || page > totalPages || page === currentPage)
             return;
@@ -51,5 +53,5 @@ export function Pagination({ currentPage, totalPages, onPageChange, paginationCo
         return `${base} appkit-pagination__button--default`;
     };
     const pages = getPageNumbers(currentPage, totalPages, maxVisible);
-    return (_jsxs("nav", { className: `appkit-pagination ${className}`, "aria-label": "Pagination", children: [showFirstLast && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === 1), onClick: () => handle(1), disabled: disabled || currentPage === 1, "aria-label": "First page", children: "\u00AB" })), showPrevNext && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === 1), onClick: () => handle(currentPage - 1), disabled: disabled || currentPage === 1, "aria-label": "Previous page", children: "\u2039" })), pages.map((page, i) => page === "..." ? (_jsx("span", { className: `appkit-pagination__ellipsis ${SIZE_CLASSES[size]}`, "aria-hidden": "true", children: "\u2026" }, `ellipsis-${i}`)) : (_jsx("button", { type: "button", className: btnClass(page === currentPage, disabled && page !== currentPage), onClick: () => handle(page), disabled: disabled, "aria-label": `Page ${page}`, "aria-current": page === currentPage ? "page" : undefined, children: page }, page))), showPrevNext && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === totalPages), onClick: () => handle(currentPage + 1), disabled: disabled || currentPage === totalPages, "aria-label": "Next page", children: "\u203A" })), showFirstLast && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === totalPages), onClick: () => handle(totalPages), disabled: disabled || currentPage === totalPages, "aria-label": "Last page", children: "\u00BB" }))] }));
+    return (_jsxs("nav", { className: `appkit-pagination ${className}`, "aria-label": "Pagination", children: [showFirstLast && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === 1), onClick: () => handle(1), disabled: disabled || currentPage === 1, "aria-label": "First page", children: "\u00AB" })), showPrevNext && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === 1), onClick: () => handle(currentPage - 1), disabled: disabled || currentPage === 1, "aria-label": "Previous page", children: "\u2039" })), pages.map((page, i) => page === "..." ? (_jsx("span", { className: `appkit-pagination__ellipsis ${SIZE_CLASSES[size]}`, "aria-hidden": "true", children: "\u2026" }, `ellipsis-${i}`)) : (_jsx("button", { type: "button", className: btnClass(page === currentPage, disabled && page !== currentPage), onClick: () => handle(page), disabled: disabled, "aria-label": `Page ${page}`, "aria-current": page === currentPage ? "page" : undefined, children: page }, page))), showPrevNext && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === totalPages), onClick: () => handle(currentPage + 1), disabled: disabled || currentPage === totalPages, "aria-label": "Next page", children: "\u203A" })), showFirstLast && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === totalPages), onClick: () => handle(totalPages), disabled: disabled || currentPage === totalPages, "aria-label": "Last page", children: "\u00BB" })), showPageSizeSelector && (_jsx(Select, { "aria-label": "Rows per page", value: String(pageSize), onValueChange: (next) => onPageSizeChange(Number(next)), options: resolved.pageSizeOptions.map((n) => ({ label: `${n} / page`, value: String(n) })), disabled: disabled, className: "appkit-pagination__page-size" }))] }));
 }

package/dist/ui/components/RowActionMenu.js

@@ -40,7 +40,7 @@ export function RowActionMenu({ actions, align = "right", }) {
     const dropdown = open && pos && mounted
         ? createPortal(_jsx("div", { ref: dropdownRef, role: "menu", className: "appkit-row-action-menu__dropdown", style: {
                 position: "fixed",
-                zIndex: "var(--appkit-z-modal)",
+                zIndex: "var(--appkit-z-confirm)",
                 top: pos.top,
                 ...(pos.right !== undefined ? { right: pos.right } : { left: pos.left }),
             }, onClick: (e) => e.stopPropagation(), children: actions.map((action, idx) => (_jsxs("div", { children: [action.separator && idx > 0 ? (_jsx("div", { className: "appkit-row-action-menu__separator" })) : null, _jsxs(Button, { type: "button", role: "menuitem", variant: "ghost", disabled: action.disabled, onClick: () => {

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

@@ -12,7 +12,7 @@
 
 .appkit-row-action-menu__dropdown {
   position: absolute;
-  z-index: var(--appkit-z-sidebar);
+  z-index: var(--appkit-z-confirm);
   margin-top: 0.25rem;
   min-width: 160px;
   border-radius: 0.75rem;