ab-nextjs-core 0.1.4 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/README.md +2 -2
  3. package/ab-app-layout/index.tsx +2 -2
  4. package/ab-aside-layout/index.tsx +2 -2
  5. package/ab-main-layout/index.tsx +2 -2
  6. package/ab-screen-layout/index.tsx +2 -2
  7. package/package.json +1 -1
  8. package/server/ab-app-layout/index.tsx +2 -2
  9. package/server/ab-aside-layout/index.tsx +2 -2
  10. package/server/ab-main-layout/index.tsx +2 -2
  11. package/server/ab-screen-layout/index.tsx +2 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,10 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file.
4
4
 
5
+ ### 0.1.5 (2026-10-05)
6
+
7
+ * **Landmarks:** header / footer wrappers set `data-ab-part="header"` / `data-ab-part="footer"`
8
+
5
9
  ### 0.1.4 (2026-10-05)
6
10
 
7
11
  * **Semantics:** layout wrappers use landmark tags — `<header>` / `<footer>` (was `<div>`); `<main>` and `<aside>` unchanged; sidebar / bottom bar stay the consumer's `<nav>` (`AbSidebar` / `AbNavbar` in components)
package/README.md CHANGED
@@ -56,8 +56,8 @@ Optional: wrap client `AbAsideLayout` with `AbPageProvider` / `useAbPage` for as
56
56
  |:--------------|:---------|:---------------|
57
57
  | `AbMainLayout` | `<main>` | `main` |
58
58
  | `AbAsideLayout` | `<aside>` | `aside` |
59
- | Header wrapper | `<header>` | — |
60
- | Footer wrapper | `<footer>` | — |
59
+ | Header wrapper | `<header>` | `header` |
60
+ | Footer wrapper | `<footer>` | `footer` |
61
61
  | Sidebar / bottom bar (via components) | `<nav>` (`AbSidebar` / `AbNavbar`) | `sidebar` (sidebar) |
62
62
 
63
63
  The client aside opens with the `.slideFromRight` class from `ab-nextjs-animations` (import `ab-nextjs-animations/slide-from-right/styles.css`).
package/ab-app-layout/index.tsx CHANGED
@@ -75,7 +75,7 @@ const AbAppLayout = ({
75
75
  data-page-name={pageName}
76
76
  data-orientation={orientation ?? ''}
77
77
  >
78
- <header className={clsx(['HeaderWrapper', styles.abAppLayout__headerWrapper])}>
78
+ <header className={clsx(['HeaderWrapper', styles.abAppLayout__headerWrapper])} data-ab-part="header">
79
79
  {header}
80
80
  </header>
81
81
  <div className={clsx(['ContentWrapper', styles.abAppLayout__contentWrapper])}>
@@ -83,7 +83,7 @@ const AbAppLayout = ({
83
83
  {content ?? children}
84
84
  {navBar}
85
85
  </div>
86
- <footer className={clsx(['FooterWrapper', styles.abAppLayout__footerWrapper])}>
86
+ <footer className={clsx(['FooterWrapper', styles.abAppLayout__footerWrapper])} data-ab-part="footer">
87
87
  {footer}
88
88
  </footer>
89
89
  <div id="backdrop" className={clsx(['Backdrop', styles.abAppLayout__backdrop])} hidden />
package/ab-aside-layout/index.tsx CHANGED
@@ -145,7 +145,7 @@ const AbAsideLayout = ({
145
145
  data-opened={isAsideOpen}
146
146
  data-open-on-mobile={isAsideOpenOnMobile}
147
147
  >
148
- <header className={clsx(['HeaderWrapper', styles.abAsideLayout__headerWrapper])}>
148
+ <header className={clsx(['HeaderWrapper', styles.abAsideLayout__headerWrapper])} data-ab-part="header">
149
149
  {header}
150
150
  </header>
151
151
 
@@ -159,7 +159,7 @@ const AbAsideLayout = ({
159
159
  {content ?? children}
160
160
  </div>
161
161
 
162
- <footer className={clsx(['FooterWrapper', styles.abAsideLayout__footerWrapper])}>
162
+ <footer className={clsx(['FooterWrapper', styles.abAsideLayout__footerWrapper])} data-ab-part="footer">
163
163
  {footer}
164
164
  </footer>
165
165
 
package/ab-main-layout/index.tsx CHANGED
@@ -78,7 +78,7 @@ const AbMainLayout = ({
78
78
  data-ab-part="main"
79
79
  data-screen-name={screenName}
80
80
  >
81
- <header className={clsx(['HeaderWrapper', styles.abMainLayout__headerWrapper])}>
81
+ <header className={clsx(['HeaderWrapper', styles.abMainLayout__headerWrapper])} data-ab-part="header">
82
82
  {header}
83
83
  </header>
84
84
  <div
@@ -91,7 +91,7 @@ const AbMainLayout = ({
91
91
  >
92
92
  {content ?? children}
93
93
  </div>
94
- <footer className={clsx(['FooterWrapper', styles.abMainLayout__footerWrapper])}>
94
+ <footer className={clsx(['FooterWrapper', styles.abMainLayout__footerWrapper])} data-ab-part="footer">
95
95
  {footer}
96
96
  </footer>
97
97
  <div className={clsx(['Backdrop', styles.abMainLayout__backdrop])} hidden />
package/ab-screen-layout/index.tsx CHANGED
@@ -71,13 +71,13 @@ const AbScreenLayout = ({
71
71
  data-screen-name={screenName}
72
72
  data-orientation={orientation ?? ''}
73
73
  >
74
- <header className={clsx(['HeaderWrapper', styles.abScreenLayout__headerWrapper])}>
74
+ <header className={clsx(['HeaderWrapper', styles.abScreenLayout__headerWrapper])} data-ab-part="header">
75
75
  {header}
76
76
  </header>
77
77
  <div className={clsx(['ContentWrapper', styles.abScreenLayout__contentWrapper])}>
78
78
  {content ?? children}
79
79
  </div>
80
- <footer className={clsx(['FooterWrapper', styles.abScreenLayout__footerWrapper])}>
80
+ <footer className={clsx(['FooterWrapper', styles.abScreenLayout__footerWrapper])} data-ab-part="footer">
81
81
  {footer}
82
82
  </footer>
83
83
  <div id="backdrop" className={clsx(['Backdrop', styles.abScreenLayout__backdrop])} hidden />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ab-nextjs-core",
3
- "version": "0.1.4",
3
+ "version": "0.1.5",
4
4
  "description": "\ud83c\udf31 A lightweight collection of server & client React components as core abElements (i.e. ab-app-layout, ab-screen-layout, ...) created by Abraham Ukachi, and optimized for Next.js applications \ud83d\ude0e.",
5
5
  "type": "module",
6
6
  "main": "index.ts",
package/server/ab-app-layout/index.tsx CHANGED
@@ -76,7 +76,7 @@ const AbAppLayout = ({
76
76
  data-page-name={pageName}
77
77
  data-orientation={orientation ?? ''}
78
78
  >
79
- <header className={clsx(['HeaderWrapper', styles.abAppLayout__headerWrapper])}>
79
+ <header className={clsx(['HeaderWrapper', styles.abAppLayout__headerWrapper])} data-ab-part="header">
80
80
  {header}
81
81
  </header>
82
82
 
@@ -86,7 +86,7 @@ const AbAppLayout = ({
86
86
  {navBar}
87
87
  </div>
88
88
 
89
- <footer className={clsx(['FooterWrapper', styles.abAppLayout__footerWrapper])}>
89
+ <footer className={clsx(['FooterWrapper', styles.abAppLayout__footerWrapper])} data-ab-part="footer">
90
90
  {footer}
91
91
  </footer>
92
92
 
package/server/ab-aside-layout/index.tsx CHANGED
@@ -73,7 +73,7 @@ const AbAsideLayout = ({
73
73
  data-page-name={pageName}
74
74
  data-ab-part="aside"
75
75
  >
76
- <header className={clsx(['HeaderWrapper', styles.abAsideLayout__headerWrapper])}>
76
+ <header className={clsx(['HeaderWrapper', styles.abAsideLayout__headerWrapper])} data-ab-part="header">
77
77
  {header}
78
78
  </header>
79
79
 
@@ -87,7 +87,7 @@ const AbAsideLayout = ({
87
87
  {content ?? children}
88
88
  </div>
89
89
 
90
- <footer className={clsx(['FooterWrapper', styles.abAsideLayout__footerWrapper])}>
90
+ <footer className={clsx(['FooterWrapper', styles.abAsideLayout__footerWrapper])} data-ab-part="footer">
91
91
  {footer}
92
92
  </footer>
93
93
 
package/server/ab-main-layout/index.tsx CHANGED
@@ -78,7 +78,7 @@ const AbMainLayout = ({
78
78
  data-ab-part="main"
79
79
  data-screen-name={screenName}
80
80
  >
81
- <header className={clsx(['HeaderWrapper', styles.abMainLayout__headerWrapper])}>
81
+ <header className={clsx(['HeaderWrapper', styles.abMainLayout__headerWrapper])} data-ab-part="header">
82
82
  {header}
83
83
  </header>
84
84
 
@@ -93,7 +93,7 @@ const AbMainLayout = ({
93
93
  {content ?? children}
94
94
  </div>
95
95
 
96
- <footer className={clsx(['FooterWrapper', styles.abMainLayout__footerWrapper])}>
96
+ <footer className={clsx(['FooterWrapper', styles.abMainLayout__footerWrapper])} data-ab-part="footer">
97
97
  {footer}
98
98
  </footer>
99
99
 
package/server/ab-screen-layout/index.tsx CHANGED
@@ -72,7 +72,7 @@ const AbScreenLayout = ({
72
72
  data-screen-name={screenName}
73
73
  data-orientation={orientation ?? ''}
74
74
  >
75
- <header className={clsx(['HeaderWrapper', styles.abScreenLayout__headerWrapper])}>
75
+ <header className={clsx(['HeaderWrapper', styles.abScreenLayout__headerWrapper])} data-ab-part="header">
76
76
  {header}
77
77
  </header>
78
78
 
@@ -80,7 +80,7 @@ const AbScreenLayout = ({
80
80
  {content ?? children}
81
81
  </div>
82
82
 
83
- <footer className={clsx(['FooterWrapper', styles.abScreenLayout__footerWrapper])}>
83
+ <footer className={clsx(['FooterWrapper', styles.abScreenLayout__footerWrapper])} data-ab-part="footer">
84
84
  {footer}
85
85
  </footer>
86
86