@grantcodes/ui 2.12.1 → 2.15.5

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,8 @@
 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";
+import "../container/container.js";
 
 export class GrantCodesTestimonials extends LitElement {
 	static styles = [testimonialsStyles];
@@ -43,7 +44,7 @@ export class GrantCodesTestimonials extends LitElement {
 		const items = this._items;
 		return html`
 			<section class="testimonials">
-				<div class="testimonials__container">
+				<grantcodes-container>
 					${
 						this.title
 							? html`<h2 class="testimonials__title">${this.title}</h2>`
@@ -63,34 +64,20 @@ 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>
 							`,
 						)}
 					</ul>
-				</div>
+				</grantcodes-container>
 			</section>
 		`;
 	}

package/src/components/testimonials/testimonials.css

@@ -9,27 +9,20 @@
 }
 
 .testimonials {
-	padding-block: var(--g-theme-spacing-3xl);
-	padding-inline: var(--g-theme-spacing-md);
-}
-
-.testimonials__container {
-	max-width: 1200px;
-	margin: 0 auto;
+	padding-block: var(--g-spacing-3xl);
 }
 
 .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 +31,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 +42,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 */

package/src/components/tooltip/tooltip.css

@@ -15,8 +15,8 @@
 }
 
 .tooltip__slot {
-	padding: var(--g-theme-spacing-sm);
-	margin: calc(-1 * var(--g-theme-spacing-sm));
+	padding: var(--g-spacing-sm);
+	margin: calc(-1 * var(--g-spacing-sm));
 	/* Anchor name will be set via JavaScript to include unique ID */
 }
 
@@ -27,12 +27,12 @@
 	max-width: 100%;
 	min-width: 6rem;
 	z-index: 100;
-	border-radius: var(--g-theme-border-radius-md);
+	border-radius: var(--g-border-radius-md);
 	padding: 0.6em 1em;
-	font-size: var(--g-typography-font-size-14);
+	font-size: var(--g-typography-font-size-xs);
 	line-height: 1;
-	color: var(--g-theme-color-primary-900);
-	background-color: var(--g-theme-color-primary-100);
+	color: var(--g-color-primary-900);
+	background-color: var(--g-color-primary-100);
 	box-shadow:
 		0 1px 3px rgba(0, 0, 0, 0.12),
 		0 1px 2px rgba(0, 0, 0, 0.24);

package/src/css/colors.stories.js

@@ -27,28 +27,28 @@ class ColorPalette extends LitElement {
 		:host {
 			display: block;
 			padding: 2rem;
-			background: var(--g-theme-color-background-default, #fff);
-			color: var(--g-theme-color-content-default, #333);
+			background: var(--g-color-background-default, #fff);
+			color: var(--g-color-content-default, #333);
 		}
 
 		.banner {
 			margin-bottom: 2rem;
 			padding: 1rem;
-			background: var(--g-theme-color-background-subtle, #f5f5f5);
+			background: var(--g-color-background-subtle, #f5f5f5);
 			border-radius: 0.5rem;
-			border: 1px solid var(--g-theme-color-border-default, #ccc);
+			border: 1px solid var(--g-color-border-default, #ccc);
 		}
 
 		.theme-title {
 			margin: 0;
 			font-weight: 600;
-			color: var(--g-theme-color-content-default, #333);
+			color: var(--g-color-content-default, #333);
 			font-size: 1rem;
 		}
 
 		.theme-hint {
 			margin: 0.5rem 0 0 0;
-			color: var(--g-theme-color-content-subtle, #666);
+			color: var(--g-color-content-subtle, #666);
 			font-size: 0.875rem;
 		}
 	`;

package/src/css/elements/a.css

@@ -1,5 +1,5 @@
 :where(a) {
-	color: var(--g-theme-link-color-content-default);
+	color: var(--g-link-color-content-default);
 	text-decoration: underline;
 	transition:
 		color 0.2s,
@@ -7,19 +7,19 @@
 }
 
 :where(a:visited) {
-	color: var(--g-theme-link-color-content-visited);
+	color: var(--g-link-color-content-visited);
 	opacity: 0.6;
 }
 
 :where(a:hover),
 :where(a:focus-visible) {
 	opacity: 1;
-	color: var(--g-theme-link-color-content-hover);
+	color: var(--g-link-color-content-hover);
 	text-decoration: underline wavy;
 }
 
 :where(a:active) {
-	color: var(--g-theme-link-color-content-active);
+	color: var(--g-link-color-content-active);
 }
 
 /* External links - special styling for links opening in new windows */

package/src/css/elements/forms/input.css

@@ -1,15 +1,15 @@
 :where(input, textarea, select) {
 	display: block;
-	accent-color: var(--g-theme-form-input-accent-color-default);
-	border-radius: var(--g-theme-border-radius-md);
-	border-width: var(--g-theme-border-width-md);
+	accent-color: var(--g-form-input-accent-color-default);
+	border-radius: var(--g-border-radius-md);
+	border-width: var(--g-border-width-md);
 	border-style: solid;
-	border-color: var(--g-theme-form-color-border-default);
-	background: var(--g-theme-form-color-background-default);
-	color: var(--g-theme-form-color-content-default);
+	border-color: var(--g-form-color-border-default);
+	background: var(--g-form-color-background-default);
+	color: var(--g-form-color-content-default);
 	padding: 0.5em 1em;
 	transition-property: color, background-color, border-color, outline;
-	font-size: var(--g-theme-typography-body-font-size);
+	font-size: var(--g-typography-body-font-size);
 }
 
 :where(input, textarea, select):not(textarea) {
@@ -17,19 +17,19 @@
 }
 
 :where(input, textarea, select):hover {
-	border-color: var(--g-theme-form-color-border-hover);
-	color: var(--g-theme-form-color-content-hover);
-	background: var(--g-theme-form-color-background-hover);
+	border-color: var(--g-form-color-border-hover);
+	color: var(--g-form-color-content-hover);
+	background: var(--g-form-color-background-hover);
 }
 
 :where(input, textarea, select):focus {
-	border-color: var(--g-theme-form-color-border-focus);
-	color: var(--g-theme-form-color-content-focus);
-	background: var(--g-theme-form-color-background-focus);
+	border-color: var(--g-form-color-border-focus);
+	color: var(--g-form-color-content-focus);
+	background: var(--g-form-color-background-focus);
 }
 
 :where(input, textarea, select):focus:invalid {
-	border-color: var(--g-theme-form-color-border-error);
+	border-color: var(--g-form-color-border-error);
 }
 
 :where(input, textarea, select)[readonly] {
@@ -38,9 +38,9 @@
 }
 
 :where(input, textarea, select):disabled {
-	border-color: var(--g-theme-form-color-border-disabled);
-	background: var(--g-theme-form-color-background-disabled);
-	color: var(--g-theme-form-color-content-disabled);
+	border-color: var(--g-form-color-border-disabled);
+	background: var(--g-form-color-background-disabled);
+	color: var(--g-form-color-content-disabled);
 	cursor: not-allowed;
 	opacity: 0.6;
 	filter: grayscale(100%) brightness(80%);
@@ -48,9 +48,9 @@
 
 :where(input, textarea, select):disabled:hover,
 :where(input, textarea, select):disabled:focus-visible {
-	border-color: var(--g-theme-form-color-border-disabled);
-	background: var(--g-theme-form-color-background-disabled);
-	color: var(--g-theme-form-color-content-disabled);
+	border-color: var(--g-form-color-border-disabled);
+	background: var(--g-form-color-background-disabled);
+	color: var(--g-form-color-content-disabled);
 }
 
 :where(input, textarea, select):where(textarea) {
@@ -85,8 +85,8 @@
 }
 
 :where(input, textarea, select):where(option):checked {
-	background: var(--g-theme-color-background-primary);
-	color: var(--g-theme-color-content-primary-knockout);
+	background: var(--g-color-background-primary);
+	color: var(--g-color-content-primary-knockout);
 }
 
 :where(input, textarea, select):where([type="checkbox"]),
@@ -101,7 +101,7 @@
 }
 
 :where(input, textarea, select):where([type="checkbox"]) {
-	border-radius: calc(var(--g-theme-border-radius-md) / 2);
+	border-radius: calc(var(--g-border-radius-md) / 2);
 }
 
 :where(input, textarea, select):where([type="checkbox"])::after {
@@ -121,12 +121,12 @@
 }
 
 :where(input, textarea, select):where([type="checkbox"]):checked {
-	border-color: var(--g-theme-color-border-primary);
-	background-color: var(--g-theme-color-border-primary);
+	border-color: var(--g-color-border-primary);
+	background-color: var(--g-color-border-primary);
 }
 
 :where(input, textarea, select):where([type="checkbox"]):checked::after {
-	color: var(--g-theme-color-border-default);
+	color: var(--g-color-border-default);
 }
 
 :where(input, textarea, select):where([type="radio"]) {
@@ -147,5 +147,5 @@
 }
 
 :where(input, textarea, select):where([type="radio"]):checked::after {
-	background-color: var(--g-theme-color-border-primary);
+	background-color: var(--g-color-border-primary);
 }

package/src/css/elements/forms/label.css

@@ -1,5 +1,5 @@
 label {
 	color: inherit;
-	font-size: var(--g-theme-typography-label-font-size);
+	font: var(--g-typography-body-sm-font);
 	cursor: pointer;
 }

package/src/css/elements/media/image.css

@@ -1,3 +1,4 @@
 img {
 	block-size: auto;
+	background-color: var(--g-color-background-subtle);
 }

package/src/css/layers.stories.js

@@ -29,7 +29,7 @@ export const LayerOverrideDemo = {
 		<style>
 			/* This override is unlayered, so it beats all layers */
 			.layer-demo-override {
-				color: var(--g-theme-color-content-brand, rebeccapurple);
+				color: var(--g-color-content-brand, rebeccapurple);
 				font-weight: bold;
 			}
 		</style>
@@ -72,8 +72,8 @@ export const AllLayers = {
 			}
 			.layer-card {
 				padding: 1rem;
-				border: 1px solid var(--g-theme-color-border-default, #ccc);
-				border-radius: var(--g-theme-border-radius-md, 0.5rem);
+				border: 1px solid var(--g-color-border-default, #ccc);
+				border-radius: var(--g-border-radius-md, 0.5rem);
 			}
 			.layer-card h4 {
 				margin-top: 0;

package/src/css/reset.css

@@ -227,8 +227,8 @@ pre {
 :root {
 	color-scheme: light dark;
 	--grantcodes-ui-theme: "none";
-	background-color: var(--g-theme-color-background-default);
-	color: var(--g-theme-color-content-default);
+	background-color: var(--g-color-background-default);
+	color: var(--g-color-content-default);
 	fill: currentColor;
 }
 
@@ -250,7 +250,7 @@ pre {
 }
 
 ::selection {
-	background-color: var(--g-theme-color-background-primary);
+	background-color: var(--g-color-background-primary);
 }
 
 /* Default backdrop styles */

package/src/css/themes/todomap.css

@@ -3,5 +3,5 @@
 @import "@grantcodes/style-dictionary/assets/fonts/quicksand";
 
 html.todomap {
-	font-family: var(--g-theme-typography-font-family-body);
+	font-family: var(--g-typography-font-family-body);
 }