@grantcodes/ui 2.12.1 → 2.15.2

package/src/pages/blog-post.stories.js

@@ -5,7 +5,7 @@ import "../components/button/button.js";
 import "../components/breadcrumb/breadcrumb.js";
 import "../components/container/container.js";
 import "../components/badge/badge.js";
-import "../components/avatar/avatar.js";
+import "../components/person/person.js";
 import "../components/card/card.js";
 import "../components/cta/cta.js";
 import "../components/footer/footer.js";
@@ -80,7 +80,7 @@ const footerContent = html`
 /**
  * A full blog post page. Demonstrates a reading-focused layout using the
  * container component for column width control, breadcrumb for navigation
- * context, badge for category tagging, avatar for the author byline, and
+ * context, badge for category tagging, person for the author byline, and
  * cards for related posts at the bottom.
  */
 export const Default = {
@@ -108,14 +108,14 @@ export const Default = {
     <!-- Article header -->
     <grantcodes-container>
       <div style="max-inline-size: 48rem; margin-inline: auto;">
-        <grantcodes-breadcrumb style="margin-block: var(--g-theme-spacing-lg);">
+        <grantcodes-breadcrumb style="margin-block: var(--g-spacing-lg);">
           <grantcodes-breadcrumb-item href="/">Home</grantcodes-breadcrumb-item>
           <grantcodes-breadcrumb-item href="/blog">Blog</grantcodes-breadcrumb-item>
           <grantcodes-breadcrumb-item current>Shipping faster with async-first teams</grantcodes-breadcrumb-item>
         </grantcodes-breadcrumb>
 
         <div
-          style="display: flex; flex-direction: column; gap: var(--g-theme-spacing-md);"
+          style="display: flex; flex-direction: column; gap: var(--g-spacing-md);"
         >
           <grantcodes-badge variant="primary">Engineering</grantcodes-badge>
 
@@ -123,31 +123,24 @@ export const Default = {
             Shipping faster with async-first teams
           </h1>
 
-          <p style="var(--g-theme-typography-body-lg);">
+          <p style="var(--g-typography-body-lg);">
             How we restructured communication to remove the hidden cost of
             synchronous coordination — and what we shipped as a result.
           </p>
 
           <div
-            style="display: flex; align-items: center; gap: var(--g-theme-spacing-sm); padding-block: var(--g-theme-spacing-md); border-block: 1px solid var(--g-theme-color-border-default);"
+            style="display: flex; align-items: center; gap: var(--g-spacing-sm); padding-block: var(--g-spacing-md); border-block: 1px solid var(--g-color-border-default);"
           >
-            <grantcodes-avatar
-              src="https://i.pravatar.cc/80?img=12"
+            <grantcodes-person
               name="Sam Torres"
+              avatar="https://i.pravatar.cc/80?img=12"
               size="small"
-            ></grantcodes-avatar>
-            <div>
-              <p
-                style="margin: 0; font-weight: var(--g-typography-font-weight-600); color: var(--g-theme-color-content-default); font-size: var(--g-theme-typography-label-font-size);"
-              >
-                Sam Torres
-              </p>
-              <p
-                style="margin: 0; color: var(--g-theme-color-content-subtle); font-size: var(--g-theme-typography-meta-font-size);"
-              >
-                March 12, 2025 · 8 min read
-              </p>
-            </div>
+            ></grantcodes-person>
+            <span
+              style="color: var(--g-color-content-subtle); font-size: var(--g-typography-font-size-xs);"
+            >
+              March 12, 2025 · 8 min read
+            </span>
           </div>
         </div>
       </div>
@@ -158,14 +151,14 @@ export const Default = {
       <img
         src="https://placehold.co/1200x500?text=Featured+Image"
         alt="An abstract illustration of async communication flows"
-        style="display: block; width: 100%; height: auto; border-radius: var(--g-theme-border-radius-md);"
+        style="display: block; width: 100%; height: auto; border-radius: var(--g-border-radius-md);"
       />
     </grantcodes-container>
 
     <!-- Article body -->
     <grantcodes-container
       align="prose"
-      style="padding-block-end: var(--g-theme-spacing-2xl);"
+      style="padding-block-end: var(--g-spacing-2xl);"
     >
       <article>
         <p>
@@ -249,33 +242,27 @@ export const Default = {
         </p>
 
         <div
-          style="margin-block-start: var(--g-theme-spacing-xl); padding: var(--g-theme-spacing-md); background: var(--g-theme-color-background-subtle); border-radius: var(--g-theme-border-radius-md); display: flex; align-items: center; gap: var(--g-theme-spacing-md);"
+          style="margin-block-start: var(--g-spacing-xl); padding: var(--g-spacing-md); background: var(--g-color-background-subtle); border-radius: var(--g-border-radius-md);"
         >
-          <grantcodes-avatar
-            src="https://i.pravatar.cc/80?img=12"
+          <grantcodes-person
             name="Sam Torres"
+            avatar="https://i.pravatar.cc/80?img=12"
             size="medium"
-          ></grantcodes-avatar>
-          <div>
-            <p
-              style="margin: 0; font-weight: var(--g-typography-font-weight-600); color: var(--g-theme-color-content-default);"
+          >
+            <span slot="description"
+              >CTO at Flowbase. Writes about engineering culture, distributed
+              teams, and systems thinking.</span
             >
-              Sam Torres
-            </p>
-            <p style="font: var(--g-theme-typography-meta);">
-              CTO at Flowbase. Writes about engineering culture, distributed
-              teams, and systems thinking.
-            </p>
-          </div>
+          </grantcodes-person>
         </div>
       </article>
     </grantcodes-container>
 
     <!-- Related posts -->
-    <div style="padding-block: var(--g-theme-spacing-2xl);">
+    <div style="padding-block: var(--g-spacing-2xl);">
       <grantcodes-container>
         <h2>More from the blog</h2>
-        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--g-theme-spacing-lg);">
+        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--g-spacing-lg);">
           ${relatedPosts.map(
 						(post) => html`
               <grantcodes-card>
@@ -284,10 +271,10 @@ export const Default = {
                   style="display: flex; align-items: center; justify-content: space-between;"
                 >
                   <grantcodes-badge variant="neutral">${post.category}</grantcodes-badge>
-                  <span style="font: var(--g-theme-typography-meta);">${post.date}</span>
+                  <span style="font: var(--g-typography-body-sm-font);">${post.date}</span>
                 </div>
                 <div
-                  style="display: flex; flex-direction: column; gap: var(--g-theme-spacing-sm); flex: 1;"
+                  style="display: flex; flex-direction: column; gap: var(--g-spacing-sm); flex: 1;"
                 >
                   <h3
                     style="font: var(--g-typography-h6-font);"
@@ -304,17 +291,13 @@ export const Default = {
                 </div>
                 <div
                   slot="footer"
-                  style="display: flex; align-items: center; gap: var(--g-theme-spacing-sm);"
+                  style="display: flex; align-items: center; gap: var(--g-spacing-sm);"
                 >
-                  <grantcodes-avatar
-                    src="${post.author.avatar}"
+                  <grantcodes-person
                     name="${post.author.name}"
+                    avatar="${post.author.avatar}"
                     size="small"
-                  ></grantcodes-avatar>
-                  <span
-                    style="font: var(--g-theme-typography-meta);"
-                    >${post.author.name}</span
-                  >
+                  ></grantcodes-person>
                 </div>
               </grantcodes-card>
             `,
@@ -330,7 +313,7 @@ export const Default = {
       <div slot="bottom">
         <p>&copy; 2025 Flowbase, Inc. All rights reserved.</p>
       </div>
-      <div slot="bottom" style="display: flex; gap: var(--g-theme-spacing-md);">
+      <div slot="bottom" style="display: flex; gap: var(--g-spacing-md);">
         <a href="/privacy">Privacy</a>
         <a href="/terms">Terms</a>
       </div>

package/src/pages/saas-landing.stories.js

@@ -1,5 +1,6 @@
 import { html } from "lit";
 import "../components/app-bar/app-bar.js";
+import "../components/app-bar/nav-link.js";
 import "../components/button/button.js";
 import "../components/hero/hero.js";
 import "../components/logo-cloud/logo-cloud.js";
@@ -20,10 +21,10 @@ const meta = {
 export default meta;
 
 const navLinks = html`
-	<a href="/">Home</a>
-	<a href="/features">Features</a>
-	<a href="/pricing">Pricing</a>
-	<a href="/about">About</a>
+	<grantcodes-nav-link><a href="/">Home</a></grantcodes-nav-link>
+	<grantcodes-nav-link><a href="/features">Features</a></grantcodes-nav-link>
+	<grantcodes-nav-link><a href="/pricing">Pricing</a></grantcodes-nav-link>
+	<grantcodes-nav-link><a href="/about">About</a></grantcodes-nav-link>
 `;
 
 const footerContent = html`
@@ -252,7 +253,7 @@ export const Default = {
 				{
 					name: "Team",
 					price: "$49",
-					period: "/ month",
+					period: "month",
 					description: "For growing teams that need to move fast.",
 					features: [
 						{ text: "Up to 20 team members", included: true },
@@ -268,7 +269,7 @@ export const Default = {
 				{
 					name: "Enterprise",
 					price: "$149",
-					period: "/ month",
+					period: "month",
 					description: "For large teams with advanced security needs.",
 					features: [
 						{ text: "Unlimited team members", included: true },
@@ -297,7 +298,7 @@ export const Default = {
 			<div slot="bottom">
 				<p>&copy; 2025 Flowbase, Inc. All rights reserved.</p>
 			</div>
-			<div slot="bottom" style="display: flex; gap: var(--g-theme-spacing-md);">
+			<div slot="bottom" style="display: flex; gap: var(--g-spacing-md);">
 				<a href="/privacy">Privacy</a>
 				<a href="/terms">Terms</a>
 				<a href="/security">Security</a>

package/src/react.js

@@ -34,6 +34,7 @@ export { MediaText } from "./components/media-text/media-text.react.js";
 export { Newsletter } from "./components/newsletter/newsletter.react.js";
 export { Notice } from "./components/notice/notice.react.js";
 export { Pagination } from "./components/pagination/pagination.react.js";
+export { Person } from "./components/person/person.react.js";
 export { Pricing } from "./components/pricing/pricing.react.js";
 export { Sidebar } from "./components/sidebar/sidebar.react.js";
 export { Stats } from "./components/stats/stats.react.js";