ab-nextjs-components 0.1.8 → 0.1.10

package/server/ab-brand/index.tsx

@@ -5,9 +5,35 @@
 * ~~~~~~~~~~~~ 
 * Copyright (c) 2026 Abraham Ukachi. The abElements Project.
 *
+* 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.
+*
 * @project: ab-nextjs-components
 * @name: AbBrand - Server (port of lyd-brand)
 * @file: server/ab-brand/index.tsx
+* @type: TypeScript (React)
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 */
 
 
@@ -16,6 +42,8 @@ import Link from 'next/link';
 import Image from 'next/image';
 import clsx from 'clsx';
 import styles from './styles.module.css';
+import { AB_MOTION } from 'ab-nextjs-animations/motion'; // 🎬 transition class names (ab-nextjs-animations >= 0.2.4)
+import 'ab-nextjs-animations/motion/styles.css'; // 🎨 .ab-motion-*
 
 export interface AbBrandProps {
   className?: string;
@@ -70,7 +98,7 @@ const AbBrand = ({
       style={style}
     >
       <div className={styles.abBrandImageWrap}>
-        <Image className={styles.abBrandImage} src={image} alt={imageAlt ?? name} width={640} height={360} unoptimized />
+        <Image className={clsx(styles.abBrandImage, AB_MOTION.transform)} src={image} alt={imageAlt ?? name} width={640} height={360} unoptimized />
       </div>
       <div className={styles.abBrandMeta}>
         <Image className={styles.abBrandLogo} src={logo} alt={logoAlt ?? shortName} width={40} height={40} unoptimized />

package/server/ab-brand/styles.module.css

@@ -1,3 +1,42 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nextjs-components
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* 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.
+*
+* @project: ab-nextjs-components
+* @name: ab-brand - styles
+* @file: server/ab-brand/styles.module.css
+* @type: CSS Module
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+
 .abBrand {
   position: relative;
   display: flex;
@@ -28,7 +67,7 @@
   object-fit: cover;
   width: 100%;
   height: 100%;
-  transition: transform 0.35s ease;
+  --ab-motion-duration: 350ms; /* 🔍 zoom tween = .ab-motion-transform (ab-nextjs-animations) */
 }
 .abBrandLogo {
   width: 2.5rem;

package/server/ab-button/index.tsx

@@ -22,117 +22,133 @@
 * 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.
-
 *
 * @project: ab-nextjs-components
 * @name: AbButton - Server (no onClick; href→<a> or submit)
 * @file: server/ab-button/index.tsx
+* @type: Server component — G22 parity with the client twin
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 */
 
+// ⚛️ types
 import type { CSSProperties, ReactElement, ReactNode } from 'react';
+// 🧵 class joiner
 import clsx from 'clsx';
+// 🎨 styles (server copy)
 import styles from './styles.module.css';
+// 🧮 the SAME rules as the client twin
+import {
+  getAbButtonDisabledMode,
+  getAbButtonSrReason,
+  type AbButtonBadgeTone,
+  type AbButtonColor,
+  type AbButtonType,
+} from '../../ab-button/helpers';
 
-export type AbButtonType = 'contained' | 'outlined' | 'text';
-export type AbButtonColor = 'primary' | 'secondary' | 'tertiary' | 'white' | 'black';
+// 📦 shared types
+export type { AbButtonBadgeTone, AbButtonColor, AbButtonType, AbButtonDisabledMode } from '../../ab-button/helpers';
 
+// ⚙️ props (no onClick on the server)
 export interface AbButtonProps {
-  id?: string;
-  type?: AbButtonType;
-  htmlType?: 'button' | 'submit' | 'reset';
-  className?: string;
-  hidden?: boolean;
-  style?: CSSProperties;
-  rounded?: boolean;
-  raised?: boolean;
-  shrinks?: boolean;
-  expands?: boolean;
-  withIcon?: boolean;
-  disabled?: boolean;
-  iconPosition?: 'left' | 'right';
-  label: string;
-  icon?: string;
-  color?: AbButtonColor;
-  href?: string;
-  children?: ReactNode;
+  id?: string; // 🆔
+  type?: AbButtonType; // 🎨
+  htmlType?: 'button' | 'submit' | 'reset'; // 🧾
+  className?: string; // 🏷️
+  hidden?: boolean; // 🙈
+  style?: CSSProperties; // 🎨
+  rounded?: boolean; // 💊
+  raised?: boolean; // 🏔️
+  shrinks?: boolean; // 🤏
+  expands?: boolean; // 🔍
+  withIcon?: boolean; // 🔣
+  disabled?: boolean; // 🚫
+  iconPosition?: 'left' | 'right'; // ↔️
+  label: string; // 🏷️
+  icon?: string; // 🔣
+  color?: AbButtonColor; // 🎨
+  href?: string; // 🔗
+  children?: ReactNode; // 🧩
+  startIcon?: ReactNode; // 🖼️ G22
+  endIcon?: ReactNode; // 🖼️ G22
+  badge?: ReactNode; // 🏷️ G22
+  badgeTone?: AbButtonBadgeTone; // 🎨 G22
+  disabledReason?: string; // 💬 G22
+  focusableWhenDisabled?: boolean; // ⌨️ G22
 }
 
-/** Server AbButton — no onClick. Use href for links or htmlType for form submit. */
+/** 🖥️ Server AbButton: no onClick. Use href for links or htmlType for form submit. No-JS safe. */
 const AbButton = ({
-  id,
-  type = 'contained',
-  htmlType = 'button',
-  className,
-  hidden = false,
-  style,
-  rounded = true,
-  raised = false,
-  shrinks = false,
-  expands = false,
-  withIcon = false,
-  disabled = false,
-  iconPosition = 'left',
-  label,
-  icon,
-  color = 'primary',
-  href,
-  children,
+  id, type = 'contained', htmlType = 'button', className, hidden = false, style, rounded = true, raised = false,
+  shrinks = false, expands = false, withIcon = false, disabled = false, iconPosition = 'left', label, icon,
+  color = 'primary', href, children, startIcon, endIcon, badge, badgeTone = 'neutral', disabledReason, focusableWhenDisabled,
 }: AbButtonProps): ReactElement => {
-  const classNames = clsx(
-    'AbButton',
-    styles.abButton,
-    className,
-    rounded && styles.abButtonRounded,
-    disabled && styles.isDisabled,
-  );
+  // 🚦 shared disabled rules
+  const mode = getAbButtonDisabledMode({ disabled, badge, disabledReason, focusableWhenDisabled });
+  // 💬 hidden reason
+  const srReason = getAbButtonSrReason({ disabled, disabledReason });
 
+  // 🏷️ classes
+  const classNames = clsx('AbButton', styles.abButton, className, rounded && styles.abButtonRounded, mode === 'native' && styles.isDisabled);
+
+  // 🗂️ data attributes
   const dataAttrs = {
-    'data-type': type,
-    'data-raised': raised ? 'true' : 'false',
-    'data-shrinks': shrinks ? 'true' : 'false',
-    'data-expands': expands ? 'true' : 'false',
-    'data-rounded': rounded ? 'true' : 'false',
-    'data-iconpos': iconPosition,
-    'data-color': color,
+    'data-type': type, // 🎨
+    'data-raised': raised ? 'true' : 'false', // 🏔️
+    'data-shrinks': shrinks ? 'true' : 'false', // 🤏
+    'data-expands': expands ? 'true' : 'false', // 🔍
+    'data-rounded': rounded ? 'true' : 'false', // 💊
+    'data-iconpos': iconPosition, // ↔️
+    'data-color': color, // 🎨
+    'data-disabled-mode': mode, // 🚦
   } as const;
 
+  // 🔣 legacy icon (decorative)
+  const legacyIcon = withIcon && icon ? <span className={clsx('material-symbols-rounded', 'icon')} aria-hidden="true">{icon}</span> : null;
+
+  // 🧱 content (same order as the client twin)
   const content = (
     <>
-      {withIcon && iconPosition === 'left' && icon ? (
-        <span className={clsx('material-symbols-rounded', 'icon')}>{icon}</span>
-      ) : null}
+      {iconPosition === 'left' ? legacyIcon : null}
+      {startIcon ? <span className={styles.abButtonSlot} aria-hidden="true">{startIcon}</span> : null}
       <span>{children ?? label}</span>
-      {withIcon && iconPosition === 'right' && icon ? (
-        <span className={clsx('material-symbols-rounded', 'icon')}>{icon}</span>
+      {badge ? (
+        <>
+          <span className={styles.srOnly}>, </span>
+          <span className={styles.abButtonBadge} data-tone={badgeTone} data-ab-part="badge" aria-hidden={srReason ? true : undefined}>{badge}</span>
+        </>
       ) : null}
+      {srReason ? <span className={styles.srOnly}>, {srReason}</span> : null}
+      {endIcon ? <span className={styles.abButtonSlot} aria-hidden="true">{endIcon}</span> : null}
+      {iconPosition === 'right' ? legacyIcon : null}
     </>
   );
 
+  // 🔗 link mode
   if (href) {
-    return (
-      <a
-        id={id}
-        href={disabled ? undefined : href}
-        role="button"
-        className={classNames}
-        style={style}
-        hidden={hidden}
-        aria-disabled={disabled}
-        {...dataAttrs}
-      >
-        {content}
-      </a>
-    );
+    if (mode !== 'none') {
+      // 🚫 blocked link: no href, role=link, focusable only in aria mode
+      return <span id={id} role="link" aria-disabled="true" tabIndex={mode === 'aria' ? 0 : -1} className={classNames} style={style} hidden={hidden} {...dataAttrs}>{content}</span>;
+    }
+    // ✅ a link is a link (no role=button)
+    return <a id={id} href={href} className={classNames} style={style} hidden={hidden} {...dataAttrs}>{content}</a>;
   }
 
+  // 🔘 button: aria mode is type="button" so a disabled CTA can never submit, even without JS
   return (
     <button
-      id={id}
-      type={htmlType}
-      className={classNames}
-      style={style}
-      hidden={hidden}
-      disabled={disabled}
+      id={id} // 🆔
+      type={mode === 'aria' ? 'button' : htmlType} // 🧾
+      className={classNames} // 🏷️
+      style={style} // 🎨
+      hidden={hidden} // 🙈
+      disabled={mode === 'native'} // 🚫
+      aria-disabled={mode === 'aria' ? true : undefined} // 🚦
       {...dataAttrs}
     >
       {content}
@@ -140,5 +156,6 @@ const AbButton = ({
   );
 };
 
+// 📦 exports
 export default AbButton;
 export { AbButton };

package/server/ab-button/styles.module.css

@@ -2,7 +2,32 @@
 * @license MIT
 * ~~~~~~~~~~~~
 * ab-nextjs-components
-* Plain CSS modules — no Tailwind Tailwind apply (Turbopack-safe).
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2026 Abraham Ukachi. The abElements Project.
+*
+* 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.
+*
+* @project: ab-nextjs-components
+* @name: styles.module.css
+* @file: server/ab-button/styles.module.css
+* @type: CSS
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
 */
 
 /*
@@ -11,6 +36,7 @@
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 */
 
+
 .abButton {
   position: relative;
   display: inline-flex;
@@ -61,3 +87,55 @@
 
 .hidden { display: none !important; }
 .invisible { visibility: hidden; }
+
+/* ===== G22: start/end icons, badge, aria-disabled ===== */
+
+/* 🖼️ icon slots (any ReactNode, e.g. <AbIcon name="github" />) */
+.abButtonSlot {
+  display: inline-flex; /* 📐 align with label */
+  flex: none; /* 🚫 never squash */
+  width: 1.25em; /* 📏 icon box */
+  height: 1.25em; /* 📏 */
+  align-items: center; /* ↕️ */
+  justify-content: center; /* ↔️ */
+}
+
+/* 🏷️ "Coming soon" style badge inside the button */
+.abButtonBadge {
+  display: inline-flex; /* 📐 */
+  align-items: center; /* ↕️ */
+  padding: 0.125rem 0.5rem; /* 🧱 */
+  border-radius: 9999px; /* 💊 */
+  font-size: 0.75rem; /* 🔡 small */
+  font-weight: 600; /* 💪 */
+  line-height: 1.2; /* 📏 */
+  white-space: nowrap; /* 🚫 no wrap */
+  /* ⚪ neutral tone (default) */
+  color: var(--ab-color-on-surface-variant, currentColor);
+  background: var(--ab-color-surface-variant, rgb(0 0 0 / 0.06));
+}
+
+/* 🥉 accent tone: small text → the AA bronze text token (theme 0.3.1) */
+.abButtonBadge[data-tone="accent"] {
+  color: var(--ab-color-bronze-text, #8A6440); /* ♿ 5.02:1 on #fff8f3 */
+  background: color-mix(in srgb, var(--ab-color-bronze, #A67C52) 14%, transparent); /* 🎨 soft wash */
+}
+
+/* 🚦 aria-disabled: looks disabled, stays focusable (no pointer-events:none so tooltips/focus still work) */
+.abButton[aria-disabled="true"] {
+  cursor: not-allowed; /* 🚫 */
+  opacity: 0.6; /* 🌫️ */
+}
+
+/* 🙈 visually hidden, still announced */
+.srOnly {
+  position: absolute; /* 📌 */
+  width: 1px; /* 📏 */
+  height: 1px; /* 📏 */
+  padding: 0; /* 🧹 */
+  margin: -1px; /* 🧹 */
+  overflow: hidden; /* ✂️ */
+  clip: rect(0 0 0 0); /* ✂️ */
+  white-space: nowrap; /* 🚫 */
+  border: 0; /* 🧹 */
+}

package/server/ab-icon/index.tsx

@@ -22,40 +22,92 @@
 * 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.
-
 *
 * @project: ab-nextjs-components
-* @name: AbIcon - Server
+* @name: AbIcon - Server (G2)
 * @file: server/ab-icon/index.tsx
+* @type: Server component — any AbIcons name, zero client JS
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
+*/
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 */
 
-import type { ReactElement } from 'react';
+// ⚛️ types
+import type { CSSProperties, ReactElement } from 'react';
+// 🧵 classes
 import clsx from 'clsx';
+// 🗺️ full icon map: fine here, server components ship no JS to the browser
+import { getAbIconSvg } from 'ab-nextjs-icons/ab-icons';
+// 🧮 shared helpers (same rules as the client twin)
+import { getAbIconStroke, getRegisteredAbIcon, pickAbIconMarkup, toAbIconSize, type AbIconSvgData, type AbIconVariant, type AbIconWeight } from '../../ab-icon/helpers';
+// 🎨 styles (server copy)
 import styles from './styles.module.css';
 
+// ⚙️ props
 export interface AbIconProps {
-  name: string;
-  className?: string;
-  filled?: boolean;
-  size?: number | string;
-  title?: string;
+  name: string; // 🗂️ AbIcons name (snake_case); Material ligature fallback if unknown
+  variant?: AbIconVariant; // 🎚️ outlined (default) | filled
+  filled?: boolean; // 🕰️ legacy alias for variant="filled"
+  weight?: AbIconWeight | number; // 📏 100–700 (outlined), default 200
+  size?: number | string; // 📐 default 24px
+  label?: string; // ♿ NEW: accessible name; omitted = decorative (aria-hidden)
+  title?: string; // 💬 legacy tooltip + name
+  svg?: AbIconSvgData; // 🧾 NEW: explicit markup (tree-shaken per-icon import)
+  className?: string; // 🏷️
+  style?: CSSProperties; // 🎨
 }
 
-/** Material Symbols ligature icon (server / RSC). */
-const AbIcon = ({ name, className, filled = false, size, title }: AbIconProps): ReactElement => {
+/** 🔣 AbIcons SVG icon (server / RSC): `svg` prop → registry → full AbIcons map → Material ligature. */
+const AbIcon = ({ name, variant, filled = false, weight, size, label, title, svg, className, style }: AbIconProps): ReactElement => {
+  // 🎚️ variant for lookup
+  const want: AbIconVariant = variant ?? (filled ? 'filled' : 'outlined');
+  // 🔍 explicit → registered → whole map (weight is applied by CSS, so ask for the raw markup)
+  const markup = pickAbIconMarkup(svg ?? getRegisteredAbIcon(name), want) ?? getAbIconSvg(name, want);
+  // 🎚️ legacy `filled` → variant
+  const v: AbIconVariant = variant ?? (filled ? 'filled' : 'outlined');
+  // 🏷️ accessible name: `label` (new) or `title` (legacy)
+  const name_ = label ?? title;
+  // 🎨 size + weight as CSS variables (weight overrides SVG stroke-width via CSS)
+  const vars = { ...style, '--ab-icon-size': toAbIconSize(size), '--ab-icon-stroke': String(getAbIconStroke(weight)) } as CSSProperties;
+  // ♿ labelled = image, else decorative
+  const a11y = name_ ? { role: 'img' as const, 'aria-label': name_ } : { 'aria-hidden': true as const };
+
+  // ✅ AbIcons SVG
+  if (markup) {
+    return (
+      <span
+        className={clsx('AbIcon', styles.abIcon, className)} // 🏷️
+        style={vars} // 🎨
+        data-variant={v} // 🎚️
+        data-icon={name} // 🗂️
+        title={title} // 💬 legacy tooltip only
+        {...a11y} // ♿
+        // 🔒 trusted, package-generated static markup (never user input)
+        dangerouslySetInnerHTML={{ __html: markup }}
+      />
+    );
+  }
+
+  // 🕰️ fallback: Material Symbols ligature (pre-G2 behaviour) for names not in AbIcons
   return (
     <span
-      className={clsx('material-symbols-rounded', 'icon', styles.abIcon, className)}
-      style={size != null ? { fontSize: typeof size === 'number' ? `${size}px` : size } : undefined}
-      title={title}
-      aria-hidden={title ? undefined : true}
-      role={title ? 'img' : undefined}
-      data-filled={filled ? 'true' : 'false'}
+      className={clsx('material-symbols-rounded', 'icon', styles.abIconFont, className)} // 🏷️
+      style={{ ...style, fontSize: toAbIconSize(size) }} // 📏
+      data-filled={v === 'filled' ? 'true' : 'false'} // 🎚️
+      data-icon={name} // 🗂️
+      data-ab-icon-fallback="font" // 🔎 easy to audit
+      title={title} // 💬
+      {...a11y} // ♿
     >
       {name}
     </span>
   );
 };
 
+// 📦 exports
 export default AbIcon;
 export { AbIcon };

package/server/ab-icon/styles.module.css

@@ -4,7 +4,30 @@
 * ab-nextjs-components
 * ~~~~~~~~~~~~ 
 * Copyright (c) 2026 Abraham Ukachi. The abElements Project.
-* Plain CSS modules — no Tailwind Tailwind apply (Turbopack-safe).
+*
+* 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.
+*
+* @project: ab-nextjs-components
+* @name: AbIcon - Styles (G2)
+* @file: server/ab-icon/styles.module.css
+* @type: CSS module
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
 */
 
 /*
@@ -13,15 +36,36 @@
 * !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 */
 
+/* 🔣 SVG icon box */
 .abIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-  line-height: 1;
-  user-select: none;
+  display: inline-flex; /* 📐 */
+  flex: none; /* 🚫 squash */
+  width: var(--ab-icon-size, 24px); /* 📏 */
+  height: var(--ab-icon-size, 24px); /* 📏 */
+  line-height: 0; /* 🧹 no baseline gap */
+  color: inherit; /* 🎨 currentColor flows into the SVG */
 }
 
-.abIcon[data-filled='true'] {
-  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+/* 📐 the inline SVG fills the box */
+.abIcon > svg {
+  width: 100%; /* ↔️ */
+  height: 100%; /* ↕️ */
+}
+
+/* 📏 weight: CSS beats SVG presentation attributes, outlined only (filled stay solid) */
+.abIcon[data-variant='outlined'] > svg [stroke] {
+  stroke-width: var(--ab-icon-stroke, 1.25); /* ✏️ */
+}
+
+/* 🕰️ Material Symbols fallback (unchanged from pre-G2) */
+.abIconFont {
+  display: inline-flex; /* 📐 */
+  align-items: center; /* ↕️ */
+  justify-content: center; /* ↔️ */
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; /* 🔤 */
+  line-height: 1; /* 📏 */
+  user-select: none; /* 🚫 */
+}
+.abIconFont[data-filled='true'] {
+  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; /* ⬛ */
 }