@grantcodes/ui 2.6.0 → 2.8.0

package/src/components/accordion/accordion.css

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     display: block;
   }
@@ -9,51 +15,53 @@
   }
 
   .accordion__item {
-    border: 1px solid var(--g-theme-color-border-default);
+    border: 1px solid var(--g-theme-color-border-subtle, var(--g-theme-color-border-default));
     border-radius: var(--g-theme-border-radius-md, 0.5rem);
-    height: 3.5rem;
-    transition: height 0.25s;
-  }
-
-  .accordion__item[open] {
-    height: auto;
-    overflow: clip;
   }
 
   .accordion__summary {
     padding: var(--g-theme-spacing-md);
     cursor: pointer;
     background: var(--g-theme-color-background-subtle);
-    border: var(--g-theme-border-width-md) solid
-      var(--g-theme-color-border-subtle);
-    border-radius: var(--g-theme-border-radius-md);
     font-weight: var(--g-typography-font-weight-500);
     list-style: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: var(--g-theme-spacing-md);
+    border-radius: var(--g-theme-border-radius-md, 0.5rem);
     transition-property: background-color, outline-width, outline-color;
   }
 
   .accordion__summary:hover {
-    background: var(--g-theme-color-background-subtle-hover);
+    background: var(--g-theme-color-background-subtle-hover, var(--g-theme-color-background-subtle));
   }
 
   .accordion__summary::-webkit-details-marker {
     display: none;
   }
 
-  .accordion__summary::after {
-    content: "+";
-    font: var(--g-theme-typography-h5);
-    line-height: 1;
+  .accordion__chevron {
+    display: block;
+    inline-size: 1em;
+    block-size: 1em;
+    flex-shrink: 0;
+    transition: transform 0.25s ease;
+    color: var(--g-theme-color-content-secondary, currentColor);
   }
 
-  .accordion__item[open] .accordion__summary::after {
-    content: "-";
+  .accordion__item[open] .accordion__chevron {
+    transform: rotateX(180deg);
   }
 
   .accordion__content {
     padding: var(--g-theme-spacing-md);
     background: var(--g-theme-color-background-default);
+    border-radius: 0 0 var(--g-theme-border-radius-md, 0.5rem) var(--g-theme-border-radius-md, 0.5rem);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .accordion__chevron {
+      transition: none;
+    }
   }

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-image.component.js

@@ -12,6 +12,7 @@ export class GrantCodesGalleryImage extends LitElement {
 		alt: { type: String },
 		caption: { type: String },
 		thumbnail: { type: String },
+		filmstrip: { type: Boolean, reflect: true },
 	};
 
 	constructor() {
@@ -23,6 +24,7 @@ export class GrantCodesGalleryImage extends LitElement {
 		this.alt = "";
 		this.caption = "";
 		this.thumbnail = "";
+		this.filmstrip = false;
 	}
 
 	captionTemplate() {

package/src/components/gallery/gallery.component.js

@@ -3,17 +3,46 @@ import { html } from "lit/static-html.js";
 import galleryStyles from "./gallery.css" with { type: "css" };
 
 export class GrantCodesGallery extends LitElement {
-	// Styles are scoped to this element: they won't conflict with styles
-	// on the main page or in other components. Styling API can be exposed
-	// via CSS custom properties.
 	static styles = [galleryStyles];
 
+	static properties = {
+		filmstrip: { type: Boolean, reflect: true },
+	};
+
 	/** @type {any[]} */
 	images = [];
 
-	// Define reactive properties--updating a reactive property causes
-	// the component to update.
-	// @property() label = 'Button Label'
+	constructor() {
+		super();
+		this.filmstrip = false;
+	}
+
+	firstUpdated() {
+		const slot = this.renderRoot.querySelector(".gallery__slot");
+		if (slot) {
+			slot.addEventListener("slotchange", () => this._updateChildren());
+			this._updateChildren();
+		}
+	}
+
+	updated(changedProperties) {
+		if (changedProperties.has("filmstrip")) {
+			this._updateChildren();
+		}
+	}
+
+	_updateChildren() {
+		const slot = this.renderRoot.querySelector(".gallery__slot");
+		if (!slot) return;
+		const assigned = slot.assignedElements({ flatten: true });
+		for (const el of assigned) {
+			if (this.filmstrip) {
+				el.setAttribute("filmstrip", "");
+			} else {
+				el.removeAttribute("filmstrip");
+			}
+		}
+	}
 
 	render() {
 		return html`

package/src/components/gallery/gallery.css

@@ -1,3 +1,8 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 .gallery {
   display: block;
@@ -50,3 +55,71 @@
   color: white;
 }
 
+/* =============================================
+   FILMSTRIP VARIANT
+   ============================================= */
+
+/* Gallery container in filmstrip mode */
+:host([filmstrip]) .gallery {
+  overflow: hidden;
+}
+
+:host([filmstrip]) .gallery__slot {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  block-size: var(--filmstrip-height, 240px);
+  gap: var(--gallery-gap, 4px);
+  scroll-snap-type: x mandatory;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+
+:host([filmstrip]) .gallery__slot::-webkit-scrollbar {
+  display: none;
+}
+
+:host([filmstrip]) .gallery__slot::slotted(*) {
+  flex: 0 0 auto;
+  block-size: 100%;
+  scroll-snap-align: start;
+}
+
+/* Scroll-driven reveal animation */
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    :host([filmstrip]) .gallery__slot::slotted(*) {
+      animation: filmstrip-reveal linear both;
+      animation-timeline: view(inline);
+      animation-range: entry 0% entry 60%;
+    }
+  }
+}
+
+@keyframes filmstrip-reveal {
+  from {
+    opacity: 0.3;
+    scale: 0.92;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+/* Gallery-image host in filmstrip mode */
+:host([filmstrip]) .gallery__image {
+  block-size: 100%;
+  width: fit-content;
+}
+
+:host([filmstrip]) .gallery__image img {
+  block-size: 100%;
+  width: auto;
+  aspect-ratio: unset;
+  max-inline-size: none;
+  object-fit: cover;
+  object-position: center;
+}
+

package/src/components/gallery/gallery.stories.js

@@ -58,3 +58,45 @@ const meta = {
 export default meta;
 
 export const Gallery = {};
+
+const filmstripImages = [
+	{ w: 400, h: 240 },
+	{ w: 160, h: 240 },
+	{ w: 360, h: 240 },
+	{ w: 180, h: 240 },
+	{ w: 420, h: 240 },
+	{ w: 160, h: 240 },
+	{ w: 380, h: 240 },
+	{ w: 200, h: 240 },
+	{ w: 440, h: 240 },
+	{ w: 160, h: 240 },
+	{ w: 350, h: 240 },
+	{ w: 170, h: 240 },
+];
+
+export const Filmstrip = {
+	args: {
+		filmstrip: true,
+	},
+	render: (args) =>
+		template(
+			args,
+			html`${filmstripImages.map(
+				({ w, h }, i) =>
+					html`<grantcodes-gallery-image
+						src="https://picsum.photos/seed/${i + 10}/${w}/${h}"
+						alt="Photo ${i + 1}"
+						width="${w}"
+						height="${h}"
+					></grantcodes-gallery-image>`,
+			)}`,
+		),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Filmstrip variant: images in a scrollable horizontal row at uniform height. Uses scroll-snap and scroll-driven animations.",
+			},
+		},
+	},
+};