ab-nextjs-components 0.1.6 → 0.1.8

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 0.1.8 — 2026-10-05
+
+- **Chrome styles:** dialog, toast, logo (`span.app-logo`), spinner, and empty-state doodle CSS + SVG assets now ship here via `@import "ab-nextjs-components/styles.css"` (import after `ab-nextjs-theme/styles.css`)
+- **AbLogo:** comments corrected — mask fallback `--app-logo-url` is owned by this package’s chrome CSS, not the theme
+
+## 0.1.7 — 2026-10-05
+
+- **AbNavbar:** root `<nav>` sets `data-ab-part="bottomBar"` (client + server)
+
 ## 0.1.6 — 2026-10-05
 
 - **AbSidebar:** renders `<nav data-ab-part="sidebar">` (was `<aside>`) so aside dialogs/menus never hit the sidebar

package/README.md

@@ -37,6 +37,19 @@
 
 
 
+
+### Component chrome styles
+
+Dialog, toast, logo (`span.app-logo`), spinner, and empty-state doodle CSS (plus their SVG assets) live in this package:
+
+```css
+@import "ab-nextjs-theme/styles.css"; /* tokens */
+@import "ab-nextjs-components/styles.css"; /* chrome */
+```
+
+Shipped assets: `assets/logos/ab-logo.svg`, `assets/spinners/3-dots-scale.svg`, `assets/spinners/12-dots-scale-rotate.svg`.
+
+
 ## Tooling (Phase 1)
 
 - Next.js **16.3.4** / React **19** hard peers

package/ab-logo/index.tsx

@@ -73,7 +73,7 @@ const AbLogo = ({
     );
   }
 
-  // With no `mask`/`src`, leave the mask to `ab-nextjs-theme` (`--app-logo-url` / `.app-logo`).
+  // With no `mask`/`src`, leave the mask to `ab-nextjs-components` chrome (`--app-logo-url` / `.app-logo`).
   // When `mask` or `src` is set, apply it inline (src becomes a CSS mask url).
   const maskValue = mask ?? (src ? `url('${src}') no-repeat 50% 50%` : undefined);
   return (

package/ab-navbar/index.tsx

@@ -40,7 +40,7 @@ const AbNavbar = ({
 }: AbNavbarProps): ReactElement => {
   const pathname = usePathname() ?? '';
   return (
-    <nav data-type={type} className={clsx('AbNavbar', styles.abNavbar, className)} aria-label="Primary">
+    <nav data-type={type} data-ab-part="bottomBar" className={clsx('AbNavbar', styles.abNavbar, className)} aria-label="Primary">
       <ul className={styles.abNavbarList}>
         {links.map((link) => {
           const active = page ? page === link.value : pathname === link.href || pathname.startsWith(`${link.href}/`);

package/assets/logos/ab-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 24 24"><path fill="#A67C52" d="m1.8 20.5 9.3-17v17zM22.2 7.7l-9.3-4.2v17l9.3-4.2-4.7-4.3z"/><path d="m12.9 20.5 9.3-4.2-9.3-8.6z" opacity=".1"/></svg>

package/assets/spinners/12-dots-scale-rotate.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><style>@keyframes spinner_grm3{0%,50%{animation-timing-function:cubic-bezier(.27,.42,.37,.99);r:1px}25%{animation-timing-function:cubic-bezier(.53,0,.61,.73);r:2px}}@keyframes spinner_T3O6{0%{transform:rotate(360deg)}}.spinner_EUy1{animation:spinner_grm3 1.2s infinite}.spinner_f6oS{animation-delay:.1s}.spinner_g3nX{animation-delay:.2s}.spinner_nvEs{animation-delay:.3s}.spinner_MaNM{animation-delay:.4s}.spinner_4nle{animation-delay:.5s}.spinner_ZETM{animation-delay:.6s}.spinner_HXuO{animation-delay:.7s}.spinner_YaQo{animation-delay:.8s}.spinner_GOx1{animation-delay:.9s}.spinner_4vv9{animation-delay:1s}.spinner_NTs9{animation-delay:1.1s}.spinner_auJJ{transform-origin:center;animation:spinner_T3O6 6s linear infinite}</style><g class="spinner_auJJ"><circle cx="12" cy="3" r="1" class="spinner_EUy1"/><circle cx="16.5" cy="4.21" r="1" class="spinner_EUy1 spinner_f6oS"/><circle cx="7.5" cy="4.21" r="1" class="spinner_EUy1 spinner_NTs9"/><circle cx="19.79" cy="7.5" r="1" class="spinner_EUy1 spinner_g3nX"/><circle cx="4.21" cy="7.5" r="1" class="spinner_EUy1 spinner_4vv9"/><circle cx="21" cy="12" r="1" class="spinner_EUy1 spinner_nvEs"/><circle cx="3" cy="12" r="1" class="spinner_EUy1 spinner_GOx1"/><circle cx="19.79" cy="16.5" r="1" class="spinner_EUy1 spinner_MaNM"/><circle cx="4.21" cy="16.5" r="1" class="spinner_EUy1 spinner_YaQo"/><circle cx="16.5" cy="19.79" r="1" class="spinner_EUy1 spinner_4nle"/><circle cx="7.5" cy="19.79" r="1" class="spinner_EUy1 spinner_HXuO"/><circle cx="12" cy="21" r="1" class="spinner_EUy1 spinner_ZETM"/></g></svg>

package/assets/spinners/3-dots-scale.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><style>@keyframes spinner_xe7Q{93.75%{r:3px}46.875%{r:.2px}}.spinner_b2T7{animation:spinner_xe7Q .8s linear infinite}.spinner_YRVV{animation-delay:-.65s}.spinner_c9oY{animation-delay:-.5s}</style><circle cx="4" cy="12" r="3" class="spinner_b2T7"/><circle cx="12" cy="12" r="3" class="spinner_b2T7 spinner_YRVV"/><circle cx="20" cy="12" r="3" class="spinner_b2T7 spinner_c9oY"/></svg>

package/assets/spinners/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) Utkarsh Verma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/css/chrome-mq.css

@@ -0,0 +1,121 @@
+/*
+ * ab-nextjs-components — chrome styles moved out of ab-nextjs-theme
+ * Copyright (c) 2026 Abraham Ukachi. MIT.
+ */
+
+@media (width >= 460px) {
+  [data-content] > .container[data-empty="true"] .doodle {
+    width: var(--empty-doodle-size-bigger, 256px);
+    height: var(--empty-doodle-size-bigger, 256px);
+  }
+  /* Toasts */
+  #toasts {
+    padding: 3rem;
+  }
+
+
+  /* Toast Emojis */
+  .toast-emoji {
+    width: var(--toast-emoji-size, 32px);
+    height: var(--toast-emoji-size, 32px);
+  }
+
+  .toast-emoji:not([data-emoji-hidden], .success) {
+    transform: scale(1.2);
+  }
+}
+
+@media (width >= 768px) {
+  /* Toast */
+  #toasts .toast {
+    padding: 1rem 1.5rem;
+    border-radius: 48px;
+    font-size: 1.25rem;
+  }
+
+  #toasts .toast-emoji:not([data-emoji-hidden], .success) {
+    transform: scale(1.5);
+  }
+  #dialog, .dialog {
+    max-width: var(--dialog-max-width, 480px);
+  }
+}
+
+@media (width >= 768px) and (width <= 1024px) {
+  /* Dialog */
+  .dialog {
+    text-align: left;
+  }
+
+  /* Divider of Dialog */
+  .dialog span.divider {
+    display: none;
+  }
+
+  /* Dialog Title */
+  .dialog-title {
+    font-size: 26px;
+    line-height: 32px;
+  }
+
+  /* Dialog Message */
+  .dialog-message, .dialog-msg {
+    font-size: 20px;
+    line-height: 32px;
+    margin: 12px 0;
+  }
+
+  /* Dialog Buttons */
+  .dialog-buttons {
+    flex-direction: row;
+  }
+}
+
+@media (width >= 1024px) and (width <= 2560px) {
+  /* Dialogs */
+  #dialogs, .Dialogs {
+    padding: var(--dialogs-container-padding, 24px 48px);
+  }
+
+  /* Dialog */
+  .dialog {
+    padding: 12px 24px;
+    text-align: left;
+  }
+
+  /* Divider of Dialog */
+  .dialog span.divider {
+    display: none;
+  }
+
+  /* Dialog Title */
+  .dialog-title {
+    font-size: 26px;
+    line-height: 32px;
+  }
+
+  /* Dialog Message */
+  .dialog-message, .dialog-msg {
+    font-size: 20px;
+    line-height: 26px;
+    margin: 12px 0;
+  }
+
+  /* Dialog Buttons */
+  .dialog-buttons {
+    flex-direction: row;
+  }
+
+
+  /* Toasts */
+  #toasts {
+    padding: 5rem;
+  }
+
+  /* Toast Emojis */
+  .toast-emoji {
+    width: var(--toast-emoji-size, 42px);
+    height: var(--toast-emoji-size, 42px);
+  }
+}
+

package/css/dialog.css

@@ -0,0 +1,248 @@
+/*
+ * ab-nextjs-components — chrome styles moved out of ab-nextjs-theme
+ * Copyright (c) 2026 Abraham Ukachi. MIT.
+ */
+
+/* Dialogs */
+#dialogs, .Dialogs {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 101;
+  pointer-events: none;
+  box-sizing: border-box;
+  padding: var(--dialogs-padding, 24px);
+}
+
+
+/* Dialog */
+#dialog, .dialog {
+  width: 100%;
+  position: relative;
+  user-select: none;
+  pointer-events: auto;
+  background: var(--dialog-color-background, var(--background-color));
+  color: var(--dialog-color-on-background, var(--on-background-color));
+  box-sizing: border-box;
+  padding: var(--dialog-padding, 8px 16px);
+  border-radius: var(--dialog-border-radius, 12px);
+
+  /* opacity: 0; */
+  text-align: center;
+  max-width: 512px;
+
+  --fade-in-animation-delay: var(--dialog-animation-delay, 200ms);
+}
+
+/* Dialog Title */
+.dialog-title {
+  margin: 16px 0;
+}
+
+/* Dialog Message */
+.dialog-message, .dialog-msg {
+  opacity: var(--opacity-text-inactive);
+}
+
+/* Dialog Buttons */
+.dialog-buttons {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* Each Dialog Button */
+a.dialog-button, a[role="button"].dialog-button {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 8px 0;
+  background: var(--dialog-button-background-color, inherit);
+  color: var(--dialog-button-text-color, inherit);
+  font-size: 20px;
+  line-height: 50px;
+  letter-spacing: 1px;
+  font-weight: bold;
+  text-align: center;
+  align-items: center;
+}
+
+/* Dialog Button with default attribute */
+a.dialog-button[data-default], a[role="button"][data-default].dialog-button {
+  color: var(--dialog-button-color-default, var(--primary-color));
+}
+
+/* Hover on Dialog Button */
+a.dialog-button:hover, a[role="button"].dialog-button:hover {
+  background: var(--dialog-button-color-hover, var(--surface-variant-color));
+}
+
+a.dialog-button:focus, a[role="button"].dialog-button:focus {
+  outline: 3px solid;
+  outline-color: var(--tertiary-color);
+}
+
+
+/* dialog-list */
+ul.dialog-list {
+  width: var(--dialog-list-width, 100%);
+  height: var(--dialog-list-height, auto);
+  max-height: var(--dialog-list-max-height, 300px);
+  overflow: hidden auto;
+  margin: var(--dialog-list-margin, 2rem 0);
+}
+
+
+/* dialog-list-item */
+li.dialog-list-item {
+  position: relative;
+  box-sizing: border-box;
+  width: var(--dialog-list-item-width, 100%);
+  height: var(--dialog-list-item-height, auto);
+  padding: var(--dialog-list-item-padding, 0.75rem 1rem);
+  transform: scale(1);
+  transform-origin: left;
+  opacity: var(--opacity-dialog-list-item, 0.68);
+  user-select: none;
+  transition: all 0.2s ease-in-out;
+}
+
+li.dialog-list-item:hover {
+  opacity: var(--opacity-dialog-list-item-hover, 1);
+}
+
+
+li.dialog-list-item[data-shrinks]:active {
+  transform: scale(0.9);
+} 
+
+
+li.dialog-list-item .checkbox,
+li.dialog-list-item .radio {
+  width: var(--dialog-list-item-checkbox-size, 20px);
+  height: var(--dialog-list-item-checkbox-size, 20px);
+  outline: 2px solid var(--dialog-list-item-checkbox-outline-color, var(--outline-color));
+  margin-right: 1.25rem;
+  outline-offset: 3px;
+}
+
+li.dialog-list-item .checkbox {
+  border-radius: 10%;
+}
+
+li.dialog-list-item .radio {
+  border-radius: 50%;
+}
+
+
+/* [data-selected="true"] dialog list item */
+li.dialog-list-item[data-selected="true"] {
+  font-weight: bold; 
+  opacity: var(--opacity-dialog-list-item-selected, 1);
+}
+
+
+li.dialog-list-item[data-selected="true"] .checkbox,
+li.dialog-list-item[data-selected="true"] .radio {
+  outline-color: var(--dialog-list-item-checkbox-selected-border-color, var(--primary-color));
+  background: var(--dialog-list-item-checkbox-selected-background-color, var(--primary-color));
+}
+
+/* TODO: dialog-list-item-link */
+
+
+
+
+
+
+
+
+
+/* Dialogs */
+#dialogs, .Dialogs {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 101;
+  pointer-events: none;
+  box-sizing: border-box;
+  padding: var(--dialogs-padding, 24px);
+}
+
+/* Dialog */
+#dialog, .dialog {
+  width: var(--dialog-width, 80%);
+  position: absolute;
+  user-select: none;
+  pointer-events: auto;
+  background: var(--dialog-color-background, var(--background-color));
+  color: var(--dialog-color-on-background, var(--on-background-color));
+  box-sizing: border-box;
+  padding: var(--dialog-padding, 8px 16px);
+  border-radius: var(--dialog-border-radius, 12px);
+
+  /* opacity: 0; */
+  text-align: center;
+  max-width: var(--dialog-max-width, 320px);
+  
+  --fade-in-animation-delay: var(--dialog-animation-delay, 200ms);
+}
+
+/* Dialog Title */
+.dialog-title {
+  margin: 16px 0;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 30px;
+  letter-spacing: 0.8px;
+  word-spacing: normal;
+}
+
+/* Dialog Message */
+.dialog-message, .dialog-msg {
+  opacity: var(--opacity-text-inactive);
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.20px;
+  word-spacing: 1.5px;
+}
+
+/* Dialog Buttons */
+.dialog-buttons {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* Each Dialog Button */
+a.dialog-button, a[role="button"].dialog-button {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 8px 0;
+  background: var(--dialog-button-background-color, inherit);
+  color: var(--dialog-button-text-color, inherit);
+  font-size: 20px;
+  line-height: 50px;
+  letter-spacing: 1px;
+  font-weight: bold;
+  text-align: center;
+  align-items: center;
+}
+
+/* Dialog Button with default attribute */
+a.dialog-button[data-default], a[role="button"][data-default].dialog-button {
+  color: var(--dialog-button-color-default, var(--primary-color));
+}
+
+/* Hover on Dialog Button */
+a.dialog-button:hover, a[role="button"].dialog-button:hover {
+  background: var(--dialog-button-color-hover, var(--surface-variant-color));
+}
+
+a.dialog-button:focus, a[role="button"].dialog-button:focus {
+  outline: 3px solid;
+  outline-color: var(--tertiary-color);
+}
+
+/* === End of Dialog Styles === */

package/css/doodle.css

@@ -0,0 +1,41 @@
+/*
+ * ab-nextjs-components — chrome styles moved out of ab-nextjs-theme
+ * Copyright (c) 2026 Abraham Ukachi. MIT.
+ */
+
+[data-content] > .container[data-empty="true"] .doodle {
+  width: var(--empty-doodle-size, 200px);
+  height: var(--empty-doodle-size, 200px);
+  background-color: inherit;
+  margin-top: -48px;
+  background-image: var(--empty-doodle-image, none); /* NOTE: no doodle is shipped; set `--empty-doodle-image` in your app */
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
+
+[data-content] > .container[data-empty="true"] .doodle[data-mask] {
+  background-image: none;
+  background-color: var(--empty-doodle-color, var(--on-background-color));
+  opacity: var(--empty-doodle-opacity, var(--opacity-md-icon-inactive));
+  mask-image: var(--empty-doodle-image, none);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: cover;
+
+}
+
+
+[data-content] > .container[data-empty="true"] .ddd {
+  width: var(--ddd-size, 200px);
+  height: var(--ddd-size, 200px);
+  background-color: inherit;
+  background-image: var(--ddd-image-url, none); /* NOTE: no 3D image is shipped; set `--ddd-image-url` in your app */
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+
+
+

package/css/logo.css

@@ -0,0 +1,52 @@
+/*
+ * ab-nextjs-components — chrome styles moved out of ab-nextjs-theme
+ * Copyright (c) 2026 Abraham Ukachi. MIT.
+ */
+
+/* App Logo of any ASIDE */
+aside > span.app-logo {
+  --app-logo-color: var(--outline-color);
+
+  opacity: var(--opacity-md-icon-disabled);
+
+  --app-logo-size: 50%;
+}
+
+
+
+/* App Logo | SPAN */
+span.app-logo {
+  display: block;
+  position: relative;
+  width: var(--app-logo-size, 32px);
+  height: var(--app-logo-size, 32px);
+  max-width: var(--app-logo-size-max, 512px);
+  max-height: var(--app-logo-size-max, 512px);
+  background-color: var(--app-logo-color, var(--on-background-color));
+  opacity: var(--app-logo-opacity, inherit);
+  mask: var(--app-logo-url, url('../assets/logos/ab-logo.svg')) no-repeat 50% 50%;
+  mask-size: cover;
+}
+
+/* Outlined App Logo | SPAN
+ * NOTE: no outlined logo is shipped; set `--app-logo-outline-url` in your app (falls back to the filled logo) */
+span[data-type="outlined"].app-logo {
+  mask: var(--app-logo-outline-url, var(--app-logo-url, url('../assets/logos/ab-logo.svg'))) no-repeat 50% 50%;
+}
+
+
+/* App Logo in an Nav Link */
+a.nav-link span.app-logo {
+  --app-logo-size: var(--side-bar-logo-size, 48px);
+  --app-logo-color: var(--side-bar-logo-color, var(--primary-color));
+  --app-logo-opacity: inherit;
+}
+
+
+
+/* App Logo in an active Nav Link */
+a.nav-link[data-active="true"] span.app-logo {
+  background-color: var(--app-logo-color-active, var(--primary-color));
+  opacity: inherit;
+}
+

package/css/spinner.css

@@ -0,0 +1,28 @@
+/*
+ * ab-nextjs-components — chrome styles moved out of ab-nextjs-theme
+ * Copyright (c) 2026 Abraham Ukachi. MIT.
+ */
+
+/* ==== SPINNERS ==== */
+
+span.spinner {
+  display: block;
+  position: relative;
+  width: var(--spinner-size, 48px);
+  height: var(--spinner-size, 48px);
+  background-color: var(--spinner-color, var(--on-background-color));
+  opacity: var(--spinner-opacity, inherit);
+  mask: var(--spinner-url, url("../assets/spinners/3-dots-scale.svg")) no-repeat 50% 50%;
+  mask-size: cover;
+}
+
+span.spinner.dots-3 {
+  --spinner-url: url("../assets/spinners/3-dots-scale.svg");
+}
+
+span.spinner.dots-12 {
+  --spinner-url: url("../assets/spinners/12-dots-scale-rotate.svg");
+}
+
+
+/* === END of SPINNERS === */

package/css/toast.css

@@ -0,0 +1,70 @@
+/*
+ * ab-nextjs-components — chrome styles moved out of ab-nextjs-theme
+ * Copyright (c) 2026 Abraham Ukachi. MIT.
+ */
+
+/* === Toasts Styles === */
+
+/* All Toasts */
+#toasts,
+main > .Toasts,
+aside > .Toasts {
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end; /* b4: end */
+  pointer-events: none;
+  padding: 3rem 1rem;
+  box-sizing: border-box;
+
+  --fade-in-animation-duration: 700ms;
+}
+
+
+/* Toast */
+.toast {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--on-background-color);
+  color: var(--background-color);
+  padding: 0.5rem 1.25rem;
+  border-radius: 32px;
+  box-sizing: border-box;
+  font-size: 1rem;
+  margin: 0 auto;
+  opacity: var(--opacity-md-active);
+}
+
+
+/* Toast Emojis */
+.toast-emoji {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  background-color: transparent;
+  margin-right: 0.25rem;
+}
+
+.toast-emoji:not([data-emoji-hidden]) {
+  background-image: var(--toast-emoji-image);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+}
+
+
+/* Success - Toast Emoji
+ * NOTE: no image is shipped; set `--toast-emoji-success-image` in your app (e.g. a GIF from your `public/` folder) */
+.toast-emoji.success,
+.toast-emoji.st {
+  --toast-emoji-image: var(--toast-emoji-success-image, none);
+}
+
+
+/* ==== End of Toasts Styles === */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ab-nextjs-components",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "\ud83d\ude80 A lightweight collection of server & client React components created by Abraham Ukachi, and optimized for Next.js applications \ud83d\ude0e.",
   "type": "module",
   "main": "index.ts",
@@ -16,8 +16,9 @@
   "scripts": {
     "lint": "eslint . --fix",
     "test": "vitest run",
-    "check:publish": "node scripts/check-publish-deps.mjs",
-    "prepublishOnly": "node scripts/check-publish-deps.mjs"
+    "check:publish": "node scripts/check-publish-deps.mjs && node scripts/check-css-assets.mjs",
+    "prepublishOnly": "node scripts/check-publish-deps.mjs && node scripts/check-css-assets.mjs",
+    "check:css-assets": "node scripts/check-css-assets.mjs"
   },
   "keywords": [
     "react",
@@ -102,7 +103,10 @@
     "ab-switch-back",
     "ab-demo-box",
     "ab-demo-code",
-    "ab-logo/ab-logo.svg"
+    "ab-logo/ab-logo.svg",
+    "styles.css",
+    "css",
+    "assets"
   ],
   "exports": {
     ".": {
@@ -163,7 +167,10 @@
     "./server/ab-text": "./server/ab-text/index.tsx",
     "./server/ab-test-hello": "./server/ab-test-hello/index.tsx",
     "./server/ab-key-feature": "./server/ab-key-feature/index.tsx",
-    "./server/ab-switch-back": "./server/ab-switch-back/index.tsx"
+    "./server/ab-switch-back": "./server/ab-switch-back/index.tsx",
+    "./styles.css": "./styles.css",
+    "./css/*": "./css/*",
+    "./assets/*": "./assets/*"
   },
   "peerDependenciesMeta": {
     "ab-nextjs-theme": {

package/server/ab-logo/index.tsx

@@ -72,7 +72,7 @@ const AbLogo = ({
     );
   }
 
-  // With no `mask`/`src`, leave the mask to `ab-nextjs-theme` (`--app-logo-url` / `.app-logo`).
+  // With no `mask`/`src`, leave the mask to `ab-nextjs-components` chrome (`--app-logo-url` / `.app-logo`).
   // When `mask` or `src` is set, apply it inline (src becomes a CSS mask url).
   const maskValue = mask ?? (src ? `url('${src}') no-repeat 50% 50%` : undefined);
   return (

package/server/ab-navbar/index.tsx

@@ -36,7 +36,7 @@ const AbNavbar = ({
   links = [],
 }: AbNavbarProps): ReactElement => {
   return (
-    <nav data-type={type} className={clsx('AbNavbar', styles.abNavbar, className)} aria-label="Primary">
+    <nav data-type={type} data-ab-part="bottomBar" className={clsx('AbNavbar', styles.abNavbar, className)} aria-label="Primary">
       <ul className={styles.abNavbarList}>
         {links.map((link) => {
           const active = page === link.value;

package/styles.css

@@ -0,0 +1,14 @@
+/*
+ * ab-nextjs-components — component chrome (dialog, toast, logo, spinner, doodle)
+ *
+ * Import after ab-nextjs-theme/styles.css:
+ *   @import "ab-nextjs-theme/styles.css";
+ *   @import "ab-nextjs-components/styles.css";
+ */
+
+@import "./css/dialog.css";
+@import "./css/toast.css";
+@import "./css/logo.css";
+@import "./css/spinner.css";
+@import "./css/doodle.css";
+@import "./css/chrome-mq.css";