@mohasinac/appkit 2.7.23 → 2.7.25

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

@@ -1,7 +1,7 @@
-/* RoleBadge — thin wrapper over Badge with role-specific color mapping */
-/* No additional styles needed — delegates entirely to Badge component */
-/* File exists to satisfy style contract requirement */
-
-.appkit-role-badge {
-  /* Inherits all styling from Badge variant */
-}
+/* RoleBadge — thin wrapper over Badge with role-specific color mapping */
+/* No additional styles needed — delegates entirely to Badge component */
+/* File exists to satisfy style contract requirement */
+
+.appkit-role-badge {
+  /* Inherits all styling from Badge variant */
+}

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

@@ -1,164 +1,164 @@
-.appkit-section-tabs {
-  position: sticky;
-  top: var(--header-height, 0px);
-  z-index: var(--appkit-z-raised);
-  background: var(--appkit-color-surface);
-  border-bottom: 1px solid var(--appkit-color-border);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
-}
-
-.dark .appkit-section-tabs {
-  background: var(--appkit-color-bg);
-  border-bottom-color: var(--appkit-color-border);
-}
-
-.appkit-section-tabs--admin {
-  background-image: linear-gradient(to right, rgba(250, 245, 255, 0.75), transparent, rgba(238, 242, 255, 0.45));
-}
-
-.appkit-section-tabs--user {
-  background-image: linear-gradient(to right, rgba(238, 242, 255, 0.75), transparent, rgba(240, 253, 250, 0.45));
-}
-
-.dark .appkit-section-tabs--admin {
-  background-image: linear-gradient(to right, rgba(88, 28, 135, 0.2), transparent, rgba(49, 46, 129, 0.12));
-}
-
-.dark .appkit-section-tabs--user {
-  background-image: linear-gradient(to right, rgba(30, 58, 138, 0.2), transparent, rgba(19, 78, 74, 0.12));
-}
-
-.appkit-section-tabs__container {
-  width: min(80rem, 100%);
-  margin: 0 auto;
-}
-
-.appkit-section-tabs__scroll {
-  overflow-x: auto;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  touch-action: pan-x;
-  padding-bottom: 0.125rem;
-}
-
-.appkit-section-tabs__scroll::-webkit-scrollbar {
-  display: none;
-}
-
-.appkit-section-tabs__scroll--padded {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-@media (min-width: 768px) {
-  .appkit-section-tabs__scroll--padded {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-}
-
-.appkit-section-tabs__track {
-  display: flex;
-  min-width: max-content;
-}
-
-@media (min-width: 1024px) {
-  .appkit-section-tabs__track--full {
-    min-width: 0;
-    width: 100%;
-  }
-}
-
-.appkit-section-tabs__tab {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.375rem;
-  flex: 1;
-  min-width: fit-content;
-  flex-shrink: 0;
-  white-space: nowrap;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border: 1px solid transparent;
-  border-radius: 9999px;
-  padding: 0.625rem 1rem;
-  transition: all 0.2s ease;
-}
-
-@media (min-width: 640px) {
-  .appkit-section-tabs__tab {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-  }
-}
-
-.appkit-section-tabs__tab:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.55);
-}
-
-.dark .appkit-section-tabs__tab:focus-visible {
-  box-shadow: 0 0 0 2px rgba(240, 99, 185, 0.6);
-}
-
-.appkit-section-tabs__tab--active {
-  border-color: rgba(80, 156, 2, 0.35);
-  background: var(--appkit-color-secondary-600);
-  color: var(--appkit-color-text-on-primary);
-  box-shadow: 0 10px 24px -12px rgba(34, 197, 94, 0.7);
-}
-
-.dark .appkit-section-tabs__tab--active {
-  border-color: rgba(233, 30, 140, 0.4);
-  background: var(--appkit-color-primary);
-  color: var(--appkit-color-text-on-primary);
-  box-shadow: 0 10px 24px -12px rgba(236, 72, 153, 0.9);
-}
-
-.appkit-section-tabs__tab--inactive {
-  border-color: rgba(80, 156, 2, 0.2);
-  background: rgba(80, 156, 2, 0.1);
-  color: var(--appkit-color-secondary-600);
-}
-
-.appkit-section-tabs__tab--inactive:hover {
-  background: rgba(80, 156, 2, 0.18);
-}
-
-.dark .appkit-section-tabs__tab--inactive {
-  border-color: var(--appkit-color-border);
-  background: rgba(30, 41, 59, 0.8);
-  color: var(--appkit-color-primary-300);
-}
-
-.dark .appkit-section-tabs__tab--inactive:hover {
-  background: rgba(51, 65, 85, 0.9);
-  color: var(--appkit-color-primary-100);
-}
-
-.appkit-section-tabs__icon {
-  flex-shrink: 0;
-}
-
-.appkit-section-tabs__count {
-  flex-shrink: 0;
-  font-size: 0.75rem;
-  padding: 0.125rem 0.375rem;
-  border-radius: 9999px;
-}
-
-.appkit-section-tabs__count--active {
-  background: rgba(255, 255, 255, 0.2);
-  color: var(--appkit-color-text-on-primary);
-}
-
-.appkit-section-tabs__count--inactive {
-  background: var(--appkit-color-zinc-100);
-  color: var(--appkit-color-zinc-500);
-}
-
-.dark .appkit-section-tabs__count--inactive {
-  background: var(--appkit-color-slate-700);
-  color: var(--appkit-color-slate-300);
-}
+.appkit-section-tabs {
+  position: sticky;
+  top: var(--header-height, 0px);
+  z-index: var(--appkit-z-raised);
+  background: var(--appkit-color-surface);
+  border-bottom: 1px solid var(--appkit-color-border);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+.dark .appkit-section-tabs {
+  background: var(--appkit-color-bg);
+  border-bottom-color: var(--appkit-color-border);
+}
+
+.appkit-section-tabs--admin {
+  background-image: linear-gradient(to right, rgba(250, 245, 255, 0.75), transparent, rgba(238, 242, 255, 0.45));
+}
+
+.appkit-section-tabs--user {
+  background-image: linear-gradient(to right, rgba(238, 242, 255, 0.75), transparent, rgba(240, 253, 250, 0.45));
+}
+
+.dark .appkit-section-tabs--admin {
+  background-image: linear-gradient(to right, rgba(88, 28, 135, 0.2), transparent, rgba(49, 46, 129, 0.12));
+}
+
+.dark .appkit-section-tabs--user {
+  background-image: linear-gradient(to right, rgba(30, 58, 138, 0.2), transparent, rgba(19, 78, 74, 0.12));
+}
+
+.appkit-section-tabs__container {
+  width: min(80rem, 100%);
+  margin: 0 auto;
+}
+
+.appkit-section-tabs__scroll {
+  overflow-x: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  touch-action: pan-x;
+  padding-bottom: 0.125rem;
+}
+
+.appkit-section-tabs__scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.appkit-section-tabs__scroll--padded {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+@media (min-width: 768px) {
+  .appkit-section-tabs__scroll--padded {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+.appkit-section-tabs__track {
+  display: flex;
+  min-width: max-content;
+}
+
+@media (min-width: 1024px) {
+  .appkit-section-tabs__track--full {
+    min-width: 0;
+    width: 100%;
+  }
+}
+
+.appkit-section-tabs__tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  flex: 1;
+  min-width: fit-content;
+  flex-shrink: 0;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: 1px solid transparent;
+  border-radius: 9999px;
+  padding: 0.625rem 1rem;
+  transition: all 0.2s ease;
+}
+
+@media (min-width: 640px) {
+  .appkit-section-tabs__tab {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+}
+
+.appkit-section-tabs__tab:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.55);
+}
+
+.dark .appkit-section-tabs__tab:focus-visible {
+  box-shadow: 0 0 0 2px rgba(240, 99, 185, 0.6);
+}
+
+.appkit-section-tabs__tab--active {
+  border-color: rgba(80, 156, 2, 0.35);
+  background: var(--appkit-color-secondary-600);
+  color: var(--appkit-color-text-on-primary);
+  box-shadow: 0 10px 24px -12px rgba(34, 197, 94, 0.7);
+}
+
+.dark .appkit-section-tabs__tab--active {
+  border-color: rgba(233, 30, 140, 0.4);
+  background: var(--appkit-color-primary);
+  color: var(--appkit-color-text-on-primary);
+  box-shadow: 0 10px 24px -12px rgba(236, 72, 153, 0.9);
+}
+
+.appkit-section-tabs__tab--inactive {
+  border-color: rgba(80, 156, 2, 0.2);
+  background: rgba(80, 156, 2, 0.1);
+  color: var(--appkit-color-secondary-600);
+}
+
+.appkit-section-tabs__tab--inactive:hover {
+  background: rgba(80, 156, 2, 0.18);
+}
+
+.dark .appkit-section-tabs__tab--inactive {
+  border-color: var(--appkit-color-border);
+  background: rgba(30, 41, 59, 0.8);
+  color: var(--appkit-color-primary-300);
+}
+
+.dark .appkit-section-tabs__tab--inactive:hover {
+  background: rgba(51, 65, 85, 0.9);
+  color: var(--appkit-color-primary-100);
+}
+
+.appkit-section-tabs__icon {
+  flex-shrink: 0;
+}
+
+.appkit-section-tabs__count {
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 9999px;
+}
+
+.appkit-section-tabs__count--active {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--appkit-color-text-on-primary);
+}
+
+.appkit-section-tabs__count--inactive {
+  background: var(--appkit-color-zinc-100);
+  color: var(--appkit-color-zinc-500);
+}
+
+.dark .appkit-section-tabs__count--inactive {
+  background: var(--appkit-color-slate-700);
+  color: var(--appkit-color-slate-300);
+}

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

@@ -1,14 +1,14 @@
-/* Semantic — HTML5 landmark wrappers (Section, Article, Main, Aside, Nav, etc.) */
-/* Pure passthroughs — no default styles. Exists for style contract compliance. */
-/* Consumer themes may add base landmark styles via these hooks. */
-
-.appkit-section {}
-.appkit-article {}
-.appkit-main {}
-.appkit-aside {}
-.appkit-nav {}
-.appkit-header {}
-.appkit-footer {}
-.appkit-ul {}
-.appkit-ol {}
-.appkit-li {}
+/* Semantic — HTML5 landmark wrappers (Section, Article, Main, Aside, Nav, etc.) */
+/* Pure passthroughs — no default styles. Exists for style contract compliance. */
+/* Consumer themes may add base landmark styles via these hooks. */
+
+.appkit-section {}
+.appkit-article {}
+.appkit-main {}
+.appkit-aside {}
+.appkit-nav {}
+.appkit-header {}
+.appkit-footer {}
+.appkit-ul {}
+.appkit-ol {}
+.appkit-li {}

package/dist/ui/components/SiteLogo.js

@@ -11,8 +11,8 @@ export function SiteLogo({ className = "h-7", title = "LetItRip.in", variant = "
     if (src) {
         return (
         // eslint-disable-next-line @next/next/no-img-element
-        _jsx("img", { src: src, alt: title, className: `block w-auto object-contain ${className}` }));
+        _jsx("img", { src: src, alt: title, "data-testid": "site-logo", className: `block w-auto object-contain ${className}` }));
     }
     const fill = variant === "gradient" ? `url(#${GRADIENT_ID})` : "currentColor";
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 214 56", role: "img", "aria-label": title, className: `block w-auto ${className}`, children: [_jsx("title", { children: title }), variant === "gradient" && (_jsx("defs", { children: _jsxs("linearGradient", { id: GRADIENT_ID, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", style: { stopColor: "var(--appkit-color-primary-700, #1343de)" } }), _jsx("stop", { offset: "55%", style: { stopColor: "var(--appkit-color-cobalt, #3570fc)" } }), _jsx("stop", { offset: "100%", style: { stopColor: "var(--appkit-color-secondary-400, #84e122)" } })] }) })), _jsx("text", { x: "0", y: "44", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "800", fontSize: "44", letterSpacing: "-1.5", fill: fill, children: "LetItRip" }), _jsx("rect", { x: "169", y: "5", width: "43", height: "21", rx: "10.5", fill: fill, opacity: "0.12" }), _jsx("text", { x: "174", y: "21", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "700", fontSize: "15", letterSpacing: "0.2", fill: fill, children: ".in" })] }));
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 214 56", role: "img", "aria-label": title, "data-testid": "site-logo", className: `block w-auto ${className}`, children: [_jsx("title", { children: title }), variant === "gradient" && (_jsx("defs", { children: _jsxs("linearGradient", { id: GRADIENT_ID, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", style: { stopColor: "var(--appkit-color-primary-700, #1343de)" } }), _jsx("stop", { offset: "55%", style: { stopColor: "var(--appkit-color-cobalt, #3570fc)" } }), _jsx("stop", { offset: "100%", style: { stopColor: "var(--appkit-color-secondary-400, #84e122)" } })] }) })), _jsx("text", { x: "0", y: "44", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "800", fontSize: "44", letterSpacing: "-1.5", fill: fill, children: "LetItRip" }), _jsx("rect", { x: "169", y: "5", width: "43", height: "21", rx: "10.5", fill: fill, opacity: "0.12" }), _jsx("text", { x: "174", y: "21", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "700", fontSize: "15", letterSpacing: "0.2", fill: fill, children: ".in" })] }));
 }

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

@@ -1,34 +1,34 @@
-/* SkipToMain — accessibility skip-navigation link */
-
-.appkit-skip-to-main {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.appkit-skip-to-main:focus-visible {
-  position: fixed;
-  left: 1rem;
-  top: 1rem;
-  z-index: 100;
-  width: auto;
-  height: auto;
-  padding: 0.625rem 1rem;
-  margin: 0;
-  overflow: visible;
-  clip: auto;
-  white-space: normal;
-  border-radius: 0.5rem;
-  background: var(--appkit-color-secondary);
-  color: var(--appkit-color-text-on-primary);
-  font-size: 0.875rem;
-  font-weight: 600;
-  outline: none;
-  box-shadow: 0 0 0 2px var(--appkit-color-secondary), 0 0 0 4px var(--appkit-color-surface);
-}
+/* SkipToMain — accessibility skip-navigation link */
+
+.appkit-skip-to-main {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.appkit-skip-to-main:focus-visible {
+  position: fixed;
+  left: 1rem;
+  top: 1rem;
+  z-index: 100;
+  width: auto;
+  height: auto;
+  padding: 0.625rem 1rem;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+  border-radius: 0.5rem;
+  background: var(--appkit-color-secondary);
+  color: var(--appkit-color-text-on-primary);
+  font-size: 0.875rem;
+  font-weight: 600;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--appkit-color-secondary), 0 0 0 4px var(--appkit-color-surface);
+}

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

@@ -1,12 +1,12 @@
-.appkit-sort-dropdown {
-  align-items: center;
-}
-
-.appkit-sort-dropdown__label {
-  white-space: nowrap;
-}
-
-.appkit-sort-dropdown__select {
-  min-height: 2.25rem;
-  height: 2.25rem;
-}
+.appkit-sort-dropdown {
+  align-items: center;
+}
+
+.appkit-sort-dropdown__label {
+  white-space: nowrap;
+}
+
+.appkit-sort-dropdown__select {
+  min-height: 2.25rem;
+  height: 2.25rem;
+}

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

@@ -1,5 +1,5 @@
-/* StatusBadge inherits all styles from Badge.
-   This base class is a stable hook for consumer overrides. */
-.appkit-status-badge {
-  text-transform: none;
-}
+/* StatusBadge inherits all styles from Badge.
+   This base class is a stable hook for consumer overrides. */
+.appkit-status-badge {
+  text-transform: none;
+}

package/dist/ui/components/TablePagination.js

@@ -13,7 +13,7 @@ export function TablePagination({ currentPage, totalPages, pageSize, total, onPa
         perPage: labels?.perPage ?? "Per page",
     };
     if (compact) {
-        return (_jsx(Div, { role: "navigation", "aria-label": l.paginationLabel, className: [
+        return (_jsx(Div, { role: "navigation", "aria-label": l.paginationLabel, "data-testid": "pagination", className: [
                 "appkit-table-pagination appkit-table-pagination--compact",
                 className,
             ]
@@ -22,7 +22,7 @@ export function TablePagination({ currentPage, totalPages, pageSize, total, onPa
     }
     const from = total === 0 ? 0 : (currentPage - 1) * pageSize + 1;
     const to = Math.min(currentPage * pageSize, total);
-    return (_jsxs(Div, { role: "navigation", "aria-label": l.paginationLabel, className: ["appkit-table-pagination", className]
+    return (_jsxs(Div, { role: "navigation", "aria-label": l.paginationLabel, "data-testid": "pagination", className: ["appkit-table-pagination", className]
             .filter(Boolean)
             .join(" "), children: [_jsxs(Text, { size: "xs", variant: "none", className: "appkit-table-pagination__summary", children: [l.showing, " ", _jsxs(Span, { className: "appkit-table-pagination__summary-value", children: [from, "\u2013", to] }), " ", l.of, " ", _jsx(Span, { className: "appkit-table-pagination__summary-value", children: new Intl.NumberFormat().format(total) }), " ", l.results] }), _jsx(Div, { className: "appkit-table-pagination__controls", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange, disabled: isLoading }) }), onPageSizeChange && (_jsxs(Div, { className: "appkit-table-pagination__size", children: [_jsx("label", { htmlFor: "page-size-select", className: "appkit-table-pagination__size-label", children: l.perPage }), _jsx(Select, { id: "page-size-select", value: String(pageSize), onValueChange: (value) => onPageSizeChange(Number(value)), disabled: isLoading, "aria-label": l.perPage, className: "appkit-table-pagination__size-select", options: pageSizeOptions.map((s) => ({
                             value: String(s),

package/dist/ui/components/Toast.js

@@ -45,7 +45,7 @@ export function ToastProvider({ children, position = "top-right", }) {
             window.setTimeout(() => hideToast(id), duration);
         }
     }, [hideToast]);
-    return (_jsxs(ToastContext.Provider, { value: { showToast, hideToast }, children: [children, _jsx("div", { "aria-live": "polite", "aria-atomic": "true", className: [UI_TOAST.container, UI_TOAST.positions[position]]
+    return (_jsxs(ToastContext.Provider, { value: { showToast, hideToast }, children: [children, _jsx("div", { "aria-live": "polite", "aria-atomic": "true", "data-testid": "toast-container", className: [UI_TOAST.container, UI_TOAST.positions[position]]
                     .filter(Boolean)
                     .join(" "), "data-section": "toast-div-623", children: toasts.map((toast) => (_jsx(ToastRow, { toast: toast, onClose: hideToast }, toast.id))) })] }));
 }
@@ -56,5 +56,5 @@ function ToastRow({ toast, onClose, }) {
         warning: _jsx("span", { "aria-hidden": "true", children: "!" }),
         info: _jsx("span", { "aria-hidden": "true", children: "i" }),
     };
-    return (_jsxs("div", { role: "alert", className: [UI_TOAST.row, UI_TOAST.variants[toast.variant]].join(" "), "data-section": "toast-div-624", children: [_jsx("div", { className: UI_TOAST.icon, "data-section": "toast-div-625", children: iconMap[toast.variant] }), _jsx(Text, { as: "div", size: "sm", weight: "medium", className: "flex-1 pr-1", children: toast.message }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onClose(toast.id), className: "min-h-0 shrink-0 px-2 py-1", "aria-label": "Close notification", children: "\u00D7" })] }));
+    return (_jsxs("div", { role: "alert", "data-testid": "toast", className: [UI_TOAST.row, UI_TOAST.variants[toast.variant]].join(" "), "data-section": "toast-div-624", children: [_jsx("div", { className: UI_TOAST.icon, "data-section": "toast-div-625", children: iconMap[toast.variant] }), _jsx(Text, { as: "div", size: "sm", weight: "medium", className: "flex-1 pr-1", children: toast.message }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onClose(toast.id), className: "min-h-0 shrink-0 px-2 py-1", "aria-label": "Close notification", children: "\u00D7" })] }));
 }

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

@@ -1,33 +1,33 @@
-/* UnsavedChangesModal — confirmation dialog for unsaved navigation */
-
-.appkit-unsaved-modal__backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: var(--appkit-z-sidebar);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-}
-
-.appkit-unsaved-modal__card {
-  width: 100%;
-  max-width: 28rem;
-  padding: 1.5rem;
-}
-
-.appkit-unsaved-modal__title {
-  margin-bottom: 0.5rem;
-}
-
-.appkit-unsaved-modal__message {
-  margin-bottom: 1.5rem;
-}
-
-.appkit-unsaved-modal__actions {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-start;
-}
+/* UnsavedChangesModal — confirmation dialog for unsaved navigation */
+
+.appkit-unsaved-modal__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--appkit-z-sidebar);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+}
+
+.appkit-unsaved-modal__card {
+  width: 100%;
+  max-width: 28rem;
+  padding: 1.5rem;
+}
+
+.appkit-unsaved-modal__title {
+  margin-bottom: 0.5rem;
+}
+
+.appkit-unsaved-modal__message {
+  margin-bottom: 1.5rem;
+}
+
+.appkit-unsaved-modal__actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-start;
+}