ab-nextjs-components 0.1.5 → 0.1.7

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 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
+- **AbMenu:** sets `data-id={id}` (keeps `id`) and `data-id` / `menu-item` on items so `useAbMenu` can open it; cancel is `li[role=close-menu]`
+- **AbLogo:** ships `ab-logo/ab-logo.svg` and defaults `src` to an inlined data URI of that asset; mask types without `src`/`mask` defer to `ab-nextjs-theme` `--app-logo-url`
+
 ## 0.1.5 — 2026-10-03
 
 - Publish to npm automatically from GitHub Actions with Trusted Publishing (OIDC + provenance, no NPM_TOKEN)

package/README.md

@@ -44,6 +44,15 @@
 - Package ships as TypeScript (`type: module`) with a `supportedComponents` catalog
 - Phase 2 Adapt complete; Phase 4 + Skip-override (Phase 5 components) complete (local)
 
+
+
+### Sidebar, menu & logo (0.1.6)
+
+* `<AbSidebar>` is a **`<nav data-ab-part="sidebar">`** (not `<aside>`). Pair with `ab-nextjs-core@^0.1.4` + `ab-nextjs-hooks@^0.1.4` so aside dialogs target `aside.AbAsideLayout`.
+* `<AbMenu id>` also sets **`data-id`**, so `useAbMenu` can find it.
+* `<AbLogo>` defaults to the Ab logo **shipped in this package** (data URI / `ab-logo/ab-logo.svg`). Pass `src` to override.
+
+
 ## Getting Started
 
 ### Installation

package/ab-logo/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/ab-logo/index.tsx

@@ -40,7 +40,7 @@ export type AbLogoType = 'contained' | 'outlined' | 'hollow' | 'naked';
 export interface AbLogoProps {
   type?: AbLogoType;
   className?: string;
-  /** Optional image src (contained). Defaults to ab-nextjs-icons Ab logo. */
+  /** Optional image src (contained). Defaults to the Ab logo shipped in this package (data URI). */
   src?: string;
   /** Optional CSS mask value for outlined/hollow/naked. */
   mask?: string;
@@ -48,7 +48,8 @@ export interface AbLogoProps {
   size?: number | string;
 }
 
-const DEFAULT_SRC = '/ab-nextjs-icons/logos/ab-logo.svg';
+/** Inlined Ab logo shipped with this package (also at `ab-logo/ab-logo.svg`). */
+const DEFAULT_SRC = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xml%3Aspace%3D%22preserve%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23A67C52%22%20d%3D%22m1.8%2020.5%209.3-17v17zM22.2%207.7l-9.3-4.2v17l9.3-4.2-4.7-4.3z%22/%3E%3Cpath%20d%3D%22m12.9%2020.5%209.3-4.2-9.3-8.6z%22%20opacity%3D%22.1%22/%3E%3C/svg%3E';
 
 const AbLogo = ({
   type = 'naked',
@@ -72,7 +73,9 @@ const AbLogo = ({
     );
   }
 
-  const maskValue = mask ?? `url('${DEFAULT_SRC}') no-repeat 50% 50%`;
+  // With no `mask`/`src`, leave the mask to `ab-nextjs-theme` (`--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 (
     <span
       className={clsx('AbLogo', 'app-logo', styles.abLogo, className)}
@@ -81,10 +84,9 @@ const AbLogo = ({
       aria-label={alt}
       style={{
         ...(dim ? { width: dim, height: dim } : {}),
-        WebkitMask: maskValue,
-        mask: maskValue,
-        WebkitMaskSize: 'cover',
-        maskSize: 'cover',
+        ...(maskValue
+          ? { WebkitMask: maskValue, mask: maskValue, WebkitMaskSize: 'cover', maskSize: 'cover' }
+          : {}),
       }}
     />
   );

package/ab-menu/index.tsx

@@ -60,6 +60,7 @@ const AbMenu = forwardRef<HTMLMenuElement, AbMenuProps>(function AbMenu(
     <menu
       ref={ref}
       id={id}
+      data-id={id}
       hidden={hidden}
       data-active={isActive ? 'true' : 'false'}
       className={clsx('AbMenu', styles.abMenu, isActive && styles.isActive, className)}
@@ -85,7 +86,7 @@ const AbMenu = forwardRef<HTMLMenuElement, AbMenuProps>(function AbMenu(
           );
           if (item.href && !item.disabled) {
             return (
-              <li key={item.id} className={itemClass} data-action={item.action}>
+              <li key={item.id} className={clsx('menu-item', itemClass)} data-id={item.id} data-action={item.action}>
                 <Link href={item.href} className={styles.abMenuLink} onClick={item.onClick}>
                   {body}
                 </Link>
@@ -93,7 +94,7 @@ const AbMenu = forwardRef<HTMLMenuElement, AbMenuProps>(function AbMenu(
             );
           }
           return (
-            <li key={item.id} className={itemClass} data-action={item.action}>
+            <li key={item.id} className={clsx('menu-item', itemClass)} data-id={item.id} data-action={item.action}>
               <button
                 type="button"
                 className={styles.abMenuButton}
@@ -105,12 +106,14 @@ const AbMenu = forwardRef<HTMLMenuElement, AbMenuProps>(function AbMenu(
             </li>
           );
         })}
+        {isCancelable ? (
+          <li role="close-menu" className={styles.abMenuCancelItem}>
+            <button type="button" className={styles.abMenuCancel} onClick={onCancel}>
+              {cancelLabel}
+            </button>
+          </li>
+        ) : null}
       </ul>
-      {isCancelable ? (
-        <button type="button" className={styles.abMenuCancel} onClick={onCancel}>
-          {cancelLabel}
-        </button>
-      ) : null}
     </menu>
   );
 });

package/ab-menu/styles.module.css

@@ -97,3 +97,8 @@
   font-weight: 600;
   cursor: pointer;
 }
+
+.abMenuCancelItem {
+  list-style: none;
+  width: 100%;
+}

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/ab-sidebar/index.tsx

@@ -44,7 +44,7 @@ const AbSidebar = ({
 }: AbSidebarProps): ReactElement => {
   const pathname = usePathname() ?? '';
   return (
-    <aside data-type={type} className={clsx('AbSidebar', styles.abSidebar, className)} aria-label="Sidebar">
+    <nav data-type={type} data-ab-part="sidebar" className={clsx('AbSidebar', styles.abSidebar, className)} aria-label="Sidebar">
       <Link href={brandHref} className={styles.abSidebarBrand}>
         <span className="material-symbols-rounded" aria-hidden>apps</span>
         <span>{brandLabel}</span>
@@ -64,7 +64,7 @@ const AbSidebar = ({
           );
         })}
       </ul>
-    </aside>
+    </nav>
   );
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ab-nextjs-components",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "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",
@@ -101,7 +101,8 @@
     "ab-product-item",
     "ab-switch-back",
     "ab-demo-box",
-    "ab-demo-code"
+    "ab-demo-code",
+    "ab-logo/ab-logo.svg"
   ],
   "exports": {
     ".": {

package/server/ab-logo/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/server/ab-logo/index.tsx

@@ -39,7 +39,7 @@ export type AbLogoType = 'contained' | 'outlined' | 'hollow' | 'naked';
 export interface AbLogoProps {
   type?: AbLogoType;
   className?: string;
-  /** Optional image src (contained). Defaults to ab-nextjs-icons Ab logo. */
+  /** Optional image src (contained). Defaults to the Ab logo shipped in this package (data URI). */
   src?: string;
   /** Optional CSS mask value for outlined/hollow/naked. */
   mask?: string;
@@ -47,7 +47,8 @@ export interface AbLogoProps {
   size?: number | string;
 }
 
-const DEFAULT_SRC = '/ab-nextjs-icons/logos/ab-logo.svg';
+/** Inlined Ab logo shipped with this package (also at `ab-logo/ab-logo.svg`). */
+const DEFAULT_SRC = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xml%3Aspace%3D%22preserve%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23A67C52%22%20d%3D%22m1.8%2020.5%209.3-17v17zM22.2%207.7l-9.3-4.2v17l9.3-4.2-4.7-4.3z%22/%3E%3Cpath%20d%3D%22m12.9%2020.5%209.3-4.2-9.3-8.6z%22%20opacity%3D%22.1%22/%3E%3C/svg%3E';
 
 const AbLogo = ({
   type = 'naked',
@@ -71,7 +72,9 @@ const AbLogo = ({
     );
   }
 
-  const maskValue = mask ?? `url('${DEFAULT_SRC}') no-repeat 50% 50%`;
+  // With no `mask`/`src`, leave the mask to `ab-nextjs-theme` (`--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 (
     <span
       className={clsx('AbLogo', 'app-logo', styles.abLogo, className)}
@@ -80,10 +83,9 @@ const AbLogo = ({
       aria-label={alt}
       style={{
         ...(dim ? { width: dim, height: dim } : {}),
-        WebkitMask: maskValue,
-        mask: maskValue,
-        WebkitMaskSize: 'cover',
-        maskSize: 'cover',
+        ...(maskValue
+          ? { WebkitMask: maskValue, mask: maskValue, WebkitMaskSize: 'cover', maskSize: 'cover' }
+          : {}),
       }}
     />
   );

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/server/ab-sidebar/index.tsx

@@ -40,7 +40,7 @@ const AbSidebar = ({
   brandLabel = 'abElements',
 }: AbSidebarProps): ReactElement => {
   return (
-    <aside data-type={type} className={clsx('AbSidebar', styles.abSidebar, className)} aria-label="Sidebar">
+    <nav data-type={type} data-ab-part="sidebar" className={clsx('AbSidebar', styles.abSidebar, className)} aria-label="Sidebar">
       <Link href={brandHref} className={styles.abSidebarBrand}>
         <span className="material-symbols-rounded" aria-hidden>apps</span>
         <span>{brandLabel}</span>
@@ -60,7 +60,7 @@ const AbSidebar = ({
           );
         })}
       </ul>
-    </aside>
+    </nav>
   );
 };