@grantcodes/ui 2.12.1 → 2.15.2

package/src/components/pricing/pricing.css

@@ -9,8 +9,8 @@
 }
 
 .pricing {
-	padding-block: var(--g-theme-spacing-3xl);
-	padding-inline: var(--g-theme-spacing-md);
+	padding-block: var(--g-spacing-3xl);
+	padding-inline: var(--g-spacing-md);
 }
 
 .pricing__container {
@@ -19,25 +19,24 @@
 }
 
 .pricing__title {
-	margin: 0 0 var(--g-theme-spacing-sm);
-	font-size: var(--g-theme-typography-h4-font-size);
-	font-weight: var(--g-theme-typography-h4-font-weight);
+	margin: 0 0 var(--g-spacing-sm);
+	font: var(--g-typography-h3-font);
 	text-align: center;
-	color: var(--g-theme-color-content-default);
+	color: var(--g-color-content-default);
 }
 
 .pricing__subtitle {
-	margin: 0 auto var(--g-theme-spacing-2xl);
-	font-size: var(--g-theme-typography-body-lg-font-size);
+	margin: 0 auto var(--g-spacing-2xl);
+	font: var(--g-typography-body-lg-font);
 	text-align: center;
-	color: var(--g-theme-color-content-subtle);
+	color: var(--g-color-content-subtle);
 	max-width: 55ch;
 }
 
 .pricing__grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-	gap: var(--g-theme-spacing-lg);
+	gap: var(--g-spacing-lg);
 	align-items: start;
 	padding: 0;
 	margin: 0;
@@ -47,58 +46,57 @@
 .pricing__tier {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-lg);
-	padding: var(--g-theme-spacing-xl);
-	border: 1px solid var(--g-theme-color-border-default);
-	border-radius: var(--g-theme-border-radius-md, 0.5rem);
-	background: var(--g-theme-color-background-default);
+	gap: var(--g-spacing-lg);
+	padding: var(--g-spacing-xl);
+	border: 1px solid var(--g-color-border-default);
+	border-radius: var(--g-border-radius-md, 0.5rem);
+	background: var(--g-color-background-default);
 }
 
 .pricing__tier--highlighted {
-	border-color: var(--g-theme-color-border-primary, #7c3aed);
-	background: var(--g-theme-color-background-subtle);
-	box-shadow: var(--g-theme-shadow-lg);
+	border-color: var(--g-color-border-primary);
+	background: var(--g-color-background-subtle);
+	box-shadow: var(--g-box-shadow-lg);
 }
 
 .pricing__tier-header {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 }
 
 .pricing__tier-name {
 	margin: 0;
-	font-size: var(--g-theme-typography-body-lg-font-size);
-	font-weight: var(--g-theme-typography-label-lg-font-weight);
-	color: var(--g-theme-color-content-default);
+	font: var(--g-typography-body-lg-font);
+	color: var(--g-color-content-default);
 }
 
 .pricing__price-wrap {
 	display: flex;
 	align-items: baseline;
-	gap: var(--g-theme-spacing-xs);
+	gap: var(--g-spacing-xs);
 }
 
 .pricing__price {
 	font: var(--g-typography-h2-font);
-	color: var(--g-theme-color-content-default);
+	color: var(--g-color-content-default);
 }
 
 .pricing__period {
-	font-size: var(--g-theme-typography-body-default-font-size);
-	color: var(--g-theme-color-content-subtle);
+	font-size: var(--g-typography-body-default-font-size);
+	color: var(--g-color-content-subtle);
 }
 
 .pricing__tier-desc {
 	margin: 0;
-	font: var(--g-theme-typography-body-sm);
-	color: var(--g-theme-color-content-subtle);
+	font: var(--g-typography-body-sm);
+	color: var(--g-color-content-subtle);
 }
 
 .pricing__features {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 	padding: 0;
 	margin: 0;
 	list-style: none;
@@ -108,24 +106,24 @@
 .pricing__feature {
 	display: flex;
 	align-items: center;
-	gap: var(--g-theme-spacing-sm);
-	font-size: var(--g-theme-typography-body-default-font-size);
-	color: var(--g-theme-color-content-default);
+	gap: var(--g-spacing-sm);
+	font-size: var(--g-typography-body-default-font-size);
+	color: var(--g-color-content-default);
 }
 
 .pricing__feature--excluded {
-	color: var(--g-theme-color-content-subtle);
+	color: var(--g-color-content-subtle);
 	text-decoration: line-through;
 }
 
 .pricing__feature-icon {
-	font: var(--g-theme-typography-body-sm);
-	color: var(--g-theme-color-content-primary, #7c3aed);
+	font: var(--g-typography-body-sm);
+	color: var(--g-color-content-primary);
 	flex-shrink: 0;
 }
 
 .pricing__feature--excluded .pricing__feature-icon {
-	color: var(--g-theme-color-content-subtle);
+	color: var(--g-color-content-subtle);
 }
 
 .pricing__cta {

package/src/components/sidebar/sidebar.css

@@ -12,8 +12,8 @@
 	position: relative;
 	inline-size: var(--sidebar-width, 280px);
 	block-size: 100%;
-	background-color: var(--g-theme-color-background-default);
-	border-inline-end: 1px solid var(--g-theme-color-border-default);
+	background-color: var(--g-color-background-default);
+	border-inline-end: 1px solid var(--g-color-border-default);
 	overflow-y: auto;
 	transition: inline-size 0.3s ease;
 	flex-shrink: 0;
@@ -21,7 +21,7 @@
 
 .sidebar--right {
 	border-inline-end: none;
-	border-inline-start: 1px solid var(--g-theme-color-border-default);
+	border-inline-start: 1px solid var(--g-color-border-default);
 }
 
 .sidebar--collapsed {
@@ -29,7 +29,7 @@
 }
 
 .sidebar--collapsed .sidebar__content {
-	padding-inline: var(--g-theme-spacing-sm);
+	padding-inline: var(--g-spacing-sm);
 }
 
 .sidebar--collapsed
@@ -48,23 +48,23 @@
 	all: unset;
 	display: none;
 	position: fixed;
-	inset-block-start: var(--g-theme-spacing-md);
-	inset-inline-start: var(--g-theme-spacing-md);
+	inset-block-start: var(--g-spacing-md);
+	inset-inline-start: var(--g-spacing-md);
 	z-index: 1001;
 	inline-size: 2.5rem;
 	block-size: 2.5rem;
 	align-items: center;
 	justify-content: center;
-	background-color: var(--g-theme-color-background-default);
-	border: 1px solid var(--g-theme-color-border-default);
-	border-radius: var(--g-theme-border-radius-md);
+	background-color: var(--g-color-background-default);
+	border: 1px solid var(--g-color-border-default);
+	border-radius: var(--g-border-radius-md);
 	cursor: pointer;
-	font-size: var(--g-theme-typography-h5-font-size);
+	font-size: var(--g-typography-h5-font-size);
 	transition: all 0.2s ease;
 }
 
 .sidebar__mobile-toggle:hover {
-	background-color: var(--g-theme-color-background-subtle-hover);
+	background-color: var(--g-color-background-subtle-hover);
 }
 
 /* Show mobile toggle on small screens */
@@ -127,29 +127,29 @@
 .sidebar__toggle {
 	all: unset;
 	position: absolute;
-	inset-block-start: var(--g-theme-spacing-md);
-	inset-inline-end: var(--g-theme-spacing-sm);
+	inset-block-start: var(--g-spacing-md);
+	inset-inline-end: var(--g-spacing-sm);
 	inline-size: 1.5rem;
 	block-size: 1.5rem;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background-color: var(--g-theme-color-background-default);
-	border: 1px solid var(--g-theme-color-border-default);
-	border-radius: var(--g-theme-border-radius-md);
+	background-color: var(--g-color-background-default);
+	border: 1px solid var(--g-color-border-default);
+	border-radius: var(--g-border-radius-md);
 	cursor: pointer;
-	font-size: var(--g-typography-font-size-14);
+	font-size: var(--g-typography-body-sm-font-size);
 	transition: all 0.2s ease;
 	z-index: 10;
 }
 
 .sidebar__toggle:hover {
-	background-color: var(--g-theme-color-background-subtle-hover);
+	background-color: var(--g-color-background-subtle-hover);
 }
 
 .sidebar--right .sidebar__toggle {
 	inset-inline-end: auto;
-	inset-inline-start: var(--g-theme-spacing-sm);
+	inset-inline-start: var(--g-spacing-sm);
 }
 
 .sidebar--right.sidebar--collapsed .sidebar__toggle {
@@ -166,8 +166,8 @@
 
 /* Content */
 .sidebar__content {
-	padding-block: var(--g-theme-spacing-md);
-	padding-inline: var(--g-theme-spacing-md);
+	padding-block: var(--g-spacing-md);
+	padding-inline: var(--g-spacing-md);
 }
 
 /* View transitions */

package/src/components/stats/stats.css

@@ -9,9 +9,9 @@
 }
 
 .stats {
-	padding-block: var(--g-theme-spacing-3xl);
-	padding-inline: var(--g-theme-spacing-md);
-	background: var(--g-theme-color-background-subtle);
+	padding-block: var(--g-spacing-3xl);
+	padding-inline: var(--g-spacing-md);
+	background: var(--g-color-background-subtle);
 }
 
 .stats__container {
@@ -20,17 +20,16 @@
 }
 
 .stats__title {
-	margin: 0 0 var(--g-theme-spacing-xl);
-	font-size: var(--g-theme-typography-h4-font-size);
-	font-weight: var(--g-theme-typography-h4-font-weight);
+	margin: 0 0 var(--g-spacing-xl);
+	font: var(--g-typography-h3-font);
 	text-align: center;
-	color: var(--g-theme-color-content-default);
+	color: var(--g-color-content-default);
 }
 
 .stats__grid {
 	display: grid;
 	grid-template-columns: repeat(var(--columns, 4), 1fr);
-	gap: var(--g-theme-spacing-xl);
+	gap: var(--g-spacing-xl);
 	padding: 0;
 	margin: 0;
 	list-style: none;
@@ -46,23 +45,22 @@
 .stats__item {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-xs);
+	gap: var(--g-spacing-xs);
 }
 
 .stats__value {
-	font: var(--g-theme-typography-h2);
+	font: var(--g-typography-h2);
 	white-space: nowrap;
 	line-height: 1;
-	color: var(--g-theme-color-content-primary, #7c3aed);
+	color: var(--g-color-content-primary, #7c3aed);
 }
 
 .stats__label {
-	font-size: var(--g-theme-typography-label-default-font-size);
-	font-weight: var(--g-theme-typography-label-default-font-weight);
-	color: var(--g-theme-color-content-default);
+    font: var(--g-typography-h5-font);
+	color: var(--g-color-content-default);
 }
 
 .stats__context {
-	font-size: var(--g-theme-typography-body-sm-font-size);
-	color: var(--g-theme-color-content-subtle);
+	font: var(--g-typography-body-sm-font);
+	color: var(--g-color-content-subtle);
 }

package/src/components/tabs/internal/tabs-item.component.js

@@ -1,6 +1,11 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
 
+/**
+ * Internal shared base class for tabs primitives.
+ * @internal
+ * @tag grantcodes-tabs-item
+ */
 export class GrantCodesTabsItem extends LitElement {
 	static properties = {
 		active: { type: Boolean },

package/src/components/tabs/tabs.component.js

@@ -31,10 +31,10 @@ export class GrantCodesTabs extends LitElement {
 		}
 	}
 
-	/** @type {GrantCodesTab[]} */
+	/** @type {import("./tab.component.js").GrantCodesTab[]} */
 	tabs = [];
 
-	/** @type {GrantCodesTabsButton[]} */
+	/** @type {import("./internal/tabs-button.component.js").GrantCodesTabsButton[]} */
 	tabButtons = [];
 
 	get activeTab() {
@@ -130,3 +130,5 @@ export class GrantCodesTabs extends LitElement {
 		`;
 	}
 }
+
+export { GrantCodesTab, GrantCodesTabsButton };

package/src/components/tabs/tabs.css

@@ -22,8 +22,8 @@
 	width: fit-content;
 	min-width: 100%;
 	background-image: linear-gradient(
-		var(--g-theme-color-border-default, var(--g-theme-color-primary-100)),
-		var(--g-theme-color-border-default, var(--g-theme-color-primary-100))
+		var(--g-color-border-default, var(--g-color-primary-100)),
+		var(--g-color-border-default, var(--g-color-primary-100))
 	);
 	background-size: auto var(--border-width);
 	background-position: bottom;
@@ -33,13 +33,13 @@
 .tabs__tab {
 	padding: 0.6em 1.2em;
 	line-height: 1;
-	font-size: var(--g-theme-typography-body-default-font-size);
+	font-size: var(--g-typography-body-default-font-size);
 	border: none;
 	border-block-start: var(--border-width) solid transparent;
 	border-block-end: var(--border-width) solid
-		var(--g-theme-color-border-default, var(--g-theme-color-primary-100));
+		var(--g-color-border-default, var(--g-color-primary-100));
 	background-color: transparent;
-	color: var(--g-theme-color-content-default);
+	color: var(--g-color-content-default);
 	opacity: 0.7;
 	white-space: nowrap;
 	cursor: pointer;
@@ -51,7 +51,7 @@
 
 @media (min-width: 40em) {
 	.tabs__tab {
-		padding-inline: var(--g-theme-spacing-md);
+		padding-inline: var(--g-spacing-md);
 	}
 }
 
@@ -59,28 +59,28 @@
 .tabs__tab:focus-visible {
 	opacity: 1;
 	border-block-end-color: var(
-		--g-theme-color-border-default,
-		var(--g-theme-color-primary-200)
+		--g-color-border-default,
+		var(--g-color-primary-200)
 	);
 }
 
 .tabs__tab.is-active {
 	border-block-end-color: var(
-		--g-theme-color-border-primary,
-		var(--g-theme-color-primary-500)
+		--g-color-border-primary,
+		var(--g-color-primary-500)
 	);
-	background-color: var(--g-theme-color-background-subtle);
-	color: var(--g-theme-color-content-default);
+	background-color: var(--g-color-background-subtle);
+	color: var(--g-color-content-default);
 	z-index: 1;
 	position: relative;
 	opacity: 1;
 }
 
 .tabs__panel {
-	margin-block-start: var(--g-theme-spacing-md);
+	margin-block-start: var(--g-spacing-md);
 	outline-color: var(
-		--g-theme-color-border-primary,
-		var(--g-theme-color-primary-500)
+		--g-color-border-primary,
+		var(--g-color-primary-500)
 	);
 	outline-offset: 1rem;
 	display: none;

package/src/components/testimonials/testimonials.component.js

@@ -1,7 +1,7 @@
 import { LitElement, html } from "lit";
 import testimonialsStyles from "./testimonials.css" with { type: "css" };
 import "../card/card.js";
-import "../avatar/avatar.js";
+import "../person/person.js";
 
 export class GrantCodesTestimonials extends LitElement {
 	static styles = [testimonialsStyles];
@@ -63,27 +63,13 @@ export class GrantCodesTestimonials extends LitElement {
 											</p>
 										</blockquote>
 										<footer class="testimonials__attribution" slot="footer">
-											${
-												item.avatar
-													? html`<grantcodes-avatar
-														src=${item.avatar}
-														name=${item.name}
-														size="small"
-													></grantcodes-avatar>`
-													: null
-											}
-											<div class="testimonials__meta">
-												<cite class="testimonials__name">${item.name}</cite>
-												${
-													item.role || item.company
-														? html`<span class="testimonials__role">
-															${[item.role, item.company]
-																.filter(Boolean)
-																.join(", ")}
-														</span>`
-														: null
-												}
-											</div>
+											<grantcodes-person
+												name=${item.name ?? ""}
+												role=${item.role ?? ""}
+												company=${item.company ?? ""}
+												avatar=${item.avatar ?? ""}
+												size="small"
+											></grantcodes-person>
 										</footer>
 									</grantcodes-card>
 								</li>

package/src/components/testimonials/testimonials.css

@@ -9,8 +9,8 @@
 }
 
 .testimonials {
-	padding-block: var(--g-theme-spacing-3xl);
-	padding-inline: var(--g-theme-spacing-md);
+	padding-block: var(--g-spacing-3xl);
+	padding-inline: var(--g-spacing-md);
 }
 
 .testimonials__container {
@@ -19,17 +19,16 @@
 }
 
 .testimonials__title {
-	margin: 0 0 var(--g-theme-spacing-2xl);
-	font-size: var(--g-theme-typography-h4-font-size);
-	font-weight: var(--g-theme-typography-h4-font-weight);
+	margin: 0 0 var(--g-spacing-2xl);
+	font: var(--g-typography-h3-font);
 	text-align: center;
-	color: var(--g-theme-color-content-default);
+	color: var(--g-color-content-default);
 }
 
 .testimonials__grid--cards {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-	gap: var(--g-theme-spacing-lg);
+	gap: var(--g-spacing-lg);
 	padding: 0;
 	margin: 0;
 	list-style: none;
@@ -38,7 +37,7 @@
 .testimonials__grid--list {
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-xl);
+	gap: var(--g-spacing-xl);
 	max-width: 65ch;
 	margin: 0 auto;
 	padding: 0;
@@ -49,36 +48,18 @@
 	margin: 0;
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-lg);
+	gap: var(--g-spacing-lg);
 	height: 100%;
 }
 
 .testimonials__text {
 	margin: 0;
-	font: var(--g-theme-typography-body-default);
-	color: var(--g-theme-color-content-default);
+	font: var(--g-typography-body-default);
+	font-style: italic;
+	color: var(--g-color-content-default);
 	flex: 1;
 }
 
 .testimonials__attribution {
-	display: flex;
-	align-items: center;
-	gap: var(--g-theme-spacing-sm);
-}
-
-.testimonials__meta {
-	display: flex;
-	flex-direction: column;
-	gap: var(--g-theme-spacing-xs);
-}
-
-.testimonials__name {
-	font: var(--g-theme-typography-label-default);
-	font-style: normal;
-	color: var(--g-theme-color-content-default);
-}
-
-.testimonials__role {
-	font-size: var(--g-theme-typography-body-sm-font-size);
-	color: var(--g-theme-color-content-subtle);
+	margin-top: auto;
 }

package/src/components/toast/toast.css

@@ -15,8 +15,8 @@
 	z-index: 9999;
 	display: flex;
 	flex-direction: column;
-	gap: var(--g-theme-spacing-sm);
-	padding: var(--g-theme-spacing-md);
+	gap: var(--g-spacing-sm);
+	padding: var(--g-spacing-md);
 	pointer-events: none;
 	max-inline-size: 100vw;
 	max-block-size: 100vh;
@@ -60,13 +60,13 @@
 .toast {
 	display: flex;
 	align-items: flex-start;
-	gap: var(--g-theme-spacing-sm);
+	gap: var(--g-spacing-sm);
 	min-inline-size: 300px;
 	max-inline-size: 500px;
-	padding-block: var(--g-theme-spacing-md);
-	padding-inline: var(--g-theme-spacing-md);
-	border-radius: var(--g-theme-border-radius-md);
-	background-color: var(--g-theme-color-background-default);
+	padding-block: var(--g-spacing-md);
+	padding-inline: var(--g-spacing-md);
+	border-radius: var(--g-border-radius-md);
+	background-color: var(--g-color-background-default);
 	border-inline-start-width: 4px;
 	border-inline-start-style: solid;
 	pointer-events: auto;
@@ -84,19 +84,19 @@
 
 /* Variant colors */
 .toast--info {
-	border-inline-start-color: var(--g-theme-color-background-utility-info);
+	border-inline-start-color: var(--g-color-background-utility-info);
 }
 
 .toast--success {
-	border-inline-start-color: var(--g-theme-color-background-utility-success);
+	border-inline-start-color: var(--g-color-background-utility-success);
 }
 
 .toast--warning {
-	border-inline-start-color: var(--g-theme-color-background-utility-warning);
+	border-inline-start-color: var(--g-color-background-utility-warning);
 }
 
 .toast--error {
-	border-inline-start-color: var(--g-theme-color-background-utility-error);
+	border-inline-start-color: var(--g-color-background-utility-error);
 }
 
 /* Toast icon */
@@ -107,19 +107,19 @@
 }
 
 .toast--info .toast__icon {
-	color: var(--g-theme-color-background-utility-info);
+	color: var(--g-color-background-utility-info);
 }
 
 .toast--success .toast__icon {
-	color: var(--g-theme-color-background-utility-success);
+	color: var(--g-color-background-utility-success);
 }
 
 .toast--warning .toast__icon {
-	color: var(--g-theme-color-background-utility-warning);
+	color: var(--g-color-background-utility-warning);
 }
 
 .toast--error .toast__icon {
-	color: var(--g-theme-color-background-utility-error);
+	color: var(--g-color-background-utility-error);
 }
 
 /* Toast content */
@@ -129,15 +129,14 @@
 }
 
 .toast__title {
-	font-weight: var(--g-typography-font-weight-600);
-	font-size: var(--g-typography-font-size-16);
+	font: var(--g-typography-h6-font);
 	margin-block-end: 0.25rem;
-	color: var(--g-theme-color-content-default);
+	color: var(--g-color-content-default);
 }
 
 .toast__message {
-	font-size: var(--g-typography-font-size-14);
-	color: var(--g-theme-color-content-subtle);
+	font: var(--g-typography-body-sm-font);
+	color: var(--g-color-content-subtle);
 	line-height: 1.5;
 }
 
@@ -150,16 +149,16 @@
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	border-radius: var(--g-theme-border-radius-md);
-	color: var(--g-theme-color-content-subtle);
+	border-radius: var(--g-border-radius-md);
+	color: var(--g-color-content-subtle);
 	cursor: pointer;
 	transition: all 0.2s ease;
 	margin-inline-start: 0.5rem;
 }
 
 .toast__close:hover {
-	color: var(--g-theme-color-content-default);
-	background-color: var(--g-theme-color-background-subtle-hover);
+	color: var(--g-color-content-default);
+	background-color: var(--g-color-background-subtle-hover);
 }
 
 /* Bottom position toasts slide up instead of down */