@grantcodes/ui 2.5.1 → 2.7.0

package/src/components/app-bar/nav-link.css

@@ -0,0 +1,58 @@
+  *,
+	*::before,
+	*::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: inline-flex;
+  }
+
+  .nav-link {
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--g-theme-border-radius-md);
+    background-color: transparent;
+    transition: background-color 0.15s ease;
+  }
+
+  .nav-link:hover {
+    background-color: color-mix(in srgb, var(--g-theme-color-content-default) 8%, transparent);
+  }
+
+  /*
+   * Override light-DOM :where(a) base styles for slotted links.
+   * ::slotted() has lower cascade priority than outer-tree normal rules,
+   * so !important is needed for properties that the base layer also sets
+   * (color, text-decoration, opacity). This is a legitimate encapsulation
+   * use-case — nav links must look like ghost buttons regardless of what
+   * global link styles exist in the light DOM.
+   */
+  ::slotted(a),
+  ::slotted(a:visited),
+  ::slotted(a:hover),
+  ::slotted(a:active),
+  ::slotted(a:focus-visible) {
+    display: inline-flex;
+    align-items: center;
+    color: var(--g-theme-color-content-default) !important;
+    text-decoration: none !important;
+    opacity: 1 !important;
+    padding-block: var(--g-theme-spacing-xs, 0.25rem);
+    padding-inline: var(--g-theme-spacing-sm);
+    font-family: var(--g-theme-typography-label-font-family);
+    font-weight: var(--g-theme-typography-label-font-weight);
+    white-space: nowrap;
+  }
+
+  ::slotted(a:focus-visible) {
+    outline: var(--g-theme-focus-ring-width-default) solid var(--g-theme-focus-ring-color-default);
+    outline-offset: var(--g-theme-focus-ring-offset-default);
+    border-radius: var(--g-theme-border-radius-md);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nav-link {
+      transition: none;
+    }
+  }

package/src/components/app-bar/nav-link.js

@@ -0,0 +1,6 @@
+import { GrantCodesNavLink } from "./nav-link.component.js";
+
+export * from "./nav-link.component.js";
+export default GrantCodesNavLink;
+
+customElements.define("grantcodes-nav-link", GrantCodesNavLink);

package/src/components/app-bar/nav-link.react.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { createComponent } from "@lit/react"
+import { GrantCodesNavLink } from "./nav-link.js"
+
+export const NavLink = createComponent({
+	tagName: "grantcodes-nav-link",
+	elementClass: GrantCodesNavLink,
+	react: React,
+})

package/src/components/code-preview/code-preview.css

@@ -1,3 +1,8 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 .code-preview > pre {
   display: block;

package/src/components/container/container.css

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   .container {
     display: flex;
     flex-direction: column;

package/src/components/countdown/countdown.component.js

@@ -0,0 +1,180 @@
+import { LitElement, html, nothing } from "lit";
+import countdownStyles from "./countdown.css" with { type: "css" };
+
+export class GrantCodesCountdown extends LitElement {
+	static styles = [countdownStyles];
+
+	static properties = {
+		/**
+		 * ISO 8601 datetime string for the countdown target.
+		 * @type {string}
+		 */
+		target: { type: String },
+		/**
+		 * Label for the days unit.
+		 * @type {string}
+		 */
+		"days-label": { type: String, attribute: "days-label" },
+		/**
+		 * Label for the hours unit.
+		 * @type {string}
+		 */
+		"hours-label": { type: String, attribute: "hours-label" },
+		/**
+		 * Label for the minutes unit.
+		 * @type {string}
+		 */
+		"minutes-label": { type: String, attribute: "minutes-label" },
+		/**
+		 * Label for the seconds unit (only shown when show-seconds is true).
+		 * @type {string}
+		 */
+		"seconds-label": { type: String, attribute: "seconds-label" },
+		/**
+		 * Message displayed when the target date has passed.
+		 * @type {string}
+		 */
+		"past-message": { type: String, attribute: "past-message" },
+		/**
+		 * Whether to show a seconds unit.
+		 * @type {boolean}
+		 */
+		"show-seconds": { type: Boolean, attribute: "show-seconds" },
+
+		/** @internal */
+		_days: { state: true },
+		/** @internal */
+		_hours: { state: true },
+		/** @internal */
+		_minutes: { state: true },
+		/** @internal */
+		_seconds: { state: true },
+		/** @internal */
+		_past: { state: true },
+	};
+
+	constructor() {
+		super();
+		this.target = "";
+		this["days-label"] = "days";
+		this["hours-label"] = "hours";
+		this["minutes-label"] = "minutes";
+		this["seconds-label"] = "seconds";
+		this["past-message"] = "The event has started!";
+		this["show-seconds"] = false;
+
+		this._days = "---";
+		this._hours = "--";
+		this._minutes = "--";
+		this._seconds = "--";
+		this._past = false;
+		this._intervalId = null;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this._tick();
+		this._startInterval();
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._stopInterval();
+	}
+
+	updated(changed) {
+		if (changed.has("target") || changed.has("show-seconds")) {
+			this._stopInterval();
+			this._tick();
+			this._startInterval();
+		}
+		this._animateChangedValues(changed);
+	}
+
+	_startInterval() {
+		const interval = this["show-seconds"] ? 1000 : 60_000;
+		this._intervalId = setInterval(() => this._tick(), interval);
+	}
+
+	_stopInterval() {
+		if (this._intervalId !== null) {
+			clearInterval(this._intervalId);
+			this._intervalId = null;
+		}
+	}
+
+	_tick() {
+		if (!this.target) return;
+
+		const targetDate = new Date(this.target);
+		const now = new Date();
+		const diff = targetDate - now;
+
+		if (diff <= 0) {
+			this._past = true;
+			this._stopInterval();
+			return;
+		}
+
+		this._past = false;
+		const totalSeconds = Math.floor(diff / 1000);
+		const totalMinutes = Math.floor(totalSeconds / 60);
+		const totalHours = Math.floor(totalMinutes / 60);
+
+		const pad = (n) => String(n).padStart(2, "0");
+
+		this._days = Math.floor(totalHours / 24);
+		this._hours = pad(totalHours % 24);
+		this._minutes = pad(totalMinutes % 60);
+		this._seconds = pad(totalSeconds % 60);
+	}
+
+	/** Re-trigger the flip animation on value elements that changed. */
+	_animateChangedValues(changed) {
+		const keys = ["_days", "_hours", "_minutes", "_seconds"];
+		for (const key of keys) {
+			if (!changed.has(key)) continue;
+			const el = this.shadowRoot?.querySelector(
+				`[data-unit="${key.slice(1)}"]`,
+			);
+			if (!el) continue;
+			el.classList.remove("countdown__value--flip");
+			// Force reflow so re-adding the class restarts the animation
+			void el.offsetWidth;
+			el.classList.add("countdown__value--flip");
+		}
+	}
+
+	render() {
+		if (!this.target) return nothing;
+
+		if (this._past) {
+			return html`<div class="countdown__past">${this["past-message"]}</div>`;
+		}
+
+		return html`
+			<div class="countdown" role="timer" aria-label="Countdown">
+				<div class="countdown__unit">
+					<span class="countdown__value" data-unit="days">${this._days}</span>
+					<span class="countdown__label">${this["days-label"]}</span>
+				</div>
+				<div class="countdown__unit">
+					<span class="countdown__value" data-unit="hours">${this._hours}</span>
+					<span class="countdown__label">${this["hours-label"]}</span>
+				</div>
+				<div class="countdown__unit">
+					<span class="countdown__value" data-unit="minutes">${this._minutes}</span>
+					<span class="countdown__label">${this["minutes-label"]}</span>
+				</div>
+				${this["show-seconds"]
+					? html`
+						<div class="countdown__unit">
+							<span class="countdown__value" data-unit="seconds">${this._seconds}</span>
+							<span class="countdown__label">${this["seconds-label"]}</span>
+						</div>
+					`
+					: nothing}
+			</div>
+		`;
+	}
+}

package/src/components/countdown/countdown.css

@@ -0,0 +1,62 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+:host {
+	display: block;
+}
+
+.countdown {
+	display: flex;
+	justify-content: center;
+	gap: var(--g-theme-spacing-lg, 2rem);
+	padding: var(--g-theme-spacing-lg, 2rem) var(--g-theme-spacing-md, 1rem);
+	text-align: center;
+}
+
+.countdown__unit {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--g-theme-spacing-xs, 0.25rem);
+}
+
+.countdown__value {
+	font-size: var(--g-theme-typography-h1-font-size, 6.25rem);
+	font-weight: var(--g-theme-typography-h1-font-weight, 900);
+	line-height: var(--g-theme-typography-h1-line-height, 1.1);
+	color: var(--g-theme-color-content-default);
+	font-variant-numeric: tabular-nums;
+}
+
+.countdown__value--flip {
+	animation: countdown-flip 0.35s ease-out;
+}
+
+.countdown__label {
+	font-size: var(--g-theme-typography-body-sm-font-size, 0.875rem);
+	color: var(--g-theme-color-content-secondary);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+}
+
+.countdown__past {
+	font-size: var(--g-theme-typography-h2-font-size, 3rem);
+	font-weight: var(--g-theme-typography-h2-font-weight, 900);
+	color: var(--g-theme-color-content-default);
+	text-align: center;
+	padding: var(--g-theme-spacing-lg, 2rem) var(--g-theme-spacing-md, 1rem);
+}
+
+@keyframes countdown-flip {
+	0% {
+		opacity: 0;
+		transform: translateY(0.25em);
+	}
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}

package/src/components/countdown/countdown.js

@@ -0,0 +1,6 @@
+import { GrantCodesCountdown } from "./countdown.component.js";
+
+export * from "./countdown.component.js";
+export default GrantCodesCountdown;
+
+customElements.define("grantcodes-countdown", GrantCodesCountdown);

package/src/components/countdown/countdown.react.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { GrantCodesCountdown } from "./countdown.js";
+
+export const Countdown = createComponent({
+	tagName: "grantcodes-countdown",
+	elementClass: GrantCodesCountdown,
+	react: React,
+});

package/src/components/countdown/countdown.stories.js

@@ -0,0 +1,65 @@
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import "./countdown.js";
+
+const { events, args, argTypes } =
+	getStorybookHelpers("grantcodes-countdown");
+
+const meta = {
+	title: "Components/Countdown",
+	component: "grantcodes-countdown",
+	args,
+	argTypes,
+	parameters: {
+		actions: {
+			handles: events,
+		},
+	},
+};
+
+export default meta;
+
+/**
+ * Default countdown to a future date.
+ */
+export const Default = {
+	args: {
+		target: new Date(Date.now() + 90 * 24 * 60 * 60 * 1000).toISOString(),
+		"days-label": "days",
+		"hours-label": "hours",
+		"minutes-label": "minutes",
+	},
+};
+
+/**
+ * Countdown with seconds visible.
+ */
+export const WithSeconds = {
+	args: {
+		target: new Date(Date.now() + 2 * 60 * 60 * 1000).toISOString(),
+		"show-seconds": true,
+	},
+};
+
+/**
+ * Countdown with custom Spanish labels.
+ */
+export const SpanishLabels = {
+	args: {
+		target: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString(),
+		"days-label": "días",
+		"hours-label": "horas",
+		"minutes-label": "minutos",
+		"seconds-label": "segundos",
+		"past-message": "¡El evento ha comenzado!",
+	},
+};
+
+/**
+ * Countdown that has already passed — shows the past message.
+ */
+export const PastEvent = {
+	args: {
+		target: "2020-01-01T00:00:00Z",
+		"past-message": "This event has already happened!",
+	},
+};

package/src/components/countdown/index.js

@@ -0,0 +1 @@
+export * from "./countdown.js";

package/src/components/cta/cta.css

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     display: block;
   }

package/src/components/dialog/dialog.css

@@ -1,3 +1,8 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 .dialog {
   width: 100%;

package/src/components/feature-list/feature-list.css

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     display: block;
   }

package/src/components/footer/footer.css

@@ -12,6 +12,8 @@
 
 	.footer {
 		margin-block-start: auto;
+		border-block-start: 1px solid var(--g-theme-color-border-subtle);
+		background-color: var(--g-theme-color-background-subtle);
 	}
 
 	.footer__container {
@@ -65,7 +67,7 @@
 
 	/* Slotted content styling */
 	::slotted(*) {
-		font-size: var(--g-typography-font-size-14);
+		font: var(--g-typography-font-body-sm);
 		color: var(--g-theme-color-content-secondary);
 	}
 

package/src/components/form-field/form-field.css

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   .form-field {
     display: flex;
     flex-direction: column;

package/src/components/gallery/gallery.css

@@ -1,3 +1,8 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 .gallery {
   display: block;

package/src/components/hero/hero.component.js

@@ -31,6 +31,11 @@ export class GrantCodesHero extends LitElement {
 		 * @type {'sm' | 'md' | 'lg'}
 		 */
 		size: { type: String, reflect: true },
+		/**
+		 * Whether to center-align text content.
+		 * @type {boolean}
+		 */
+		center: { type: Boolean, reflect: true },
 	};
 
 	constructor() {
@@ -40,6 +45,7 @@ export class GrantCodesHero extends LitElement {
 		this.button = "";
 		this.href = "";
 		this.size = "md";
+		this.center = false;
 	}
 
 	render() {
@@ -59,6 +65,7 @@ export class GrantCodesHero extends LitElement {
 							>`
 							: null
 					}
+					<slot></slot>
 				</div>
 			</section>
 		`;

package/src/components/hero/hero.css

@@ -1,3 +1,9 @@
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
 	:host {
 		display: block;
 	}
@@ -8,7 +14,6 @@
 		justify-content: center;
 		align-items: center;
 		min-height: 50vh;
-		text-align: center;
 		padding: var(--g-theme-spacing-2xl) var(--g-theme-spacing-md);
 		background: var(--g-theme-color-background-brand-knockout, #7c3aed);
 	}
@@ -19,6 +24,14 @@
 		gap: var(--g-theme-spacing-lg);
 	}
 
+	:host([center]) .hero {
+		text-align: center;
+	}
+
+	:host([center]) .hero__container {
+		margin-inline: auto;
+	}
+
 	.hero__title {
 		font: var(--g-theme-typography-h1);
 		font-size: clamp(2rem, 5vw, 4rem);
@@ -39,3 +52,7 @@
 		min-height: 70vh;
 		padding: var(--g-theme-spacing-3xl) var(--g-theme-spacing-md);
 	}
+
+	::slotted(*) {
+		color: var(--g-theme-color-content-brand-knockout, #ffffff);
+	}

package/src/components/hero/hero.stories.js

@@ -1,4 +1,5 @@
 import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import { html } from "lit";
 import "./hero.js";
 
 const { events, args, argTypes } = getStorybookHelpers("grantcodes-hero");
@@ -31,6 +32,35 @@ export const Default = {
 	},
 };
 
+/**
+ * Centered hero — explicitly center-aligns text content.
+ */
+export const Centered = {
+	args: {
+		title: "Build something great",
+		subtitle: "A personal web component library with a custom design system.",
+		button: "Get started",
+		href: "/docs",
+		size: "md",
+		center: true,
+	},
+};
+
+/**
+ * Hero with slotted content — custom HTML inside the hero.
+ */
+export const WithSlottedContent = {
+	render: () => html`
+		<grantcodes-hero
+			title="Event countdown"
+			subtitle="Something exciting is coming soon."
+			center
+		>
+			<p style="font-size: 1.5rem; margin-top: 1rem;">Custom slotted content here</p>
+		</grantcodes-hero>
+	`,
+};
+
 /**
  * Small hero — useful for inner page headers.
  */

package/src/components/icon/icon.css

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     display: block;
   }

package/src/components/loading/loading.css

@@ -1,3 +1,8 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 :host {
   --height: 0.5rem;

package/src/components/logo-cloud/logo-cloud.css

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     display: block;
   }

package/src/components/map/index.js

@@ -0,0 +1 @@
+export * from "./map.js";