@grantcodes/ui 2.10.0 → 2.10.1

package/src/components/card/card.css

@@ -1,150 +1,150 @@
-  /* Inlined component-base mixin */
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    display: block;
-    flex-grow: 1;
-    /* Enable container queries for responsive card layouts */
-    container-type: inline-size;
-    container-name: card;
-  }
-
-  .card {
-    display: flex;
-    inline-size: 100%;
-    min-block-size: 100%;
-    flex-direction: column;
-    justify-content: flex-start;
-    overflow: hidden;
-    background: var(--g-theme-color-background-default);
-    border-style: solid;
-    border-width: var(--g-theme-border-width-sm);
-    border-color: var(--g-theme-color-border-default);
-    border-radius: var(--g-theme-border-radius-md);
-    box-shadow: var(--g-theme-box-shadow-md);
-    transition:
-      box-shadow 0.2s ease,
-      transform 0.2s ease,
-      border-color 0.2s ease,
-      background-color 0.2s ease;
-  }
-
-  /* Image support - images in header or content will be styled appropriately */
-  .card__header img,
-  .card__content img {
-    display: block;
-    inline-size: 100%;
-    block-size: auto;
-    border-radius: inherit;
-  }
-
-  .card__header {
-    padding-inline: var(--g-theme-spacing-md);
-    padding-block: var(--g-spacing-12);
-    border-block-end: 1px solid var(--g-theme-color-border-default);
-  }
-
-  .card__header:not([data-has-content]) {
-    display: none;
-  }
-
-  .card__header ::slotted(*) {
-    margin: 0;
-    font: var(--g-typography-h5-font);
-  }
-
-  .card__content {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    gap: var(--g-theme-spacing-md);
-    padding-block: var(--g-theme-spacing-md);
-    padding-inline: var(--g-theme-spacing-md);
-  }
-
-  .card__content:has(::slotted(:empty)) {
-    display: none;
-  }
-
-  .card__content > * {
-    margin: 0;
-  }
-
-  .card__footer {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--g-theme-spacing-sm);
-    padding-inline: var(--g-theme-spacing-md);
-    padding-block: var(--g-spacing-12);
-    border-block-start: 1px solid var(--g-theme-color-border-default);
-    background: var(--g-theme-color-background-default);
-  }
-
-  .card__footer:not([data-has-content]) {
-    display: none;
-  }
-
-  .card__footer ::slotted(grantcodes-button-group) {
-    width: 100%;
-    justify-content: flex-end;
-  }
-
-  .card__meta {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: var(--g-theme-spacing-md);
-    margin: 0;
-    padding-inline: var(--g-theme-spacing-md);
-    padding-block: 1em;
-    font-size: var(--g-theme-typography-meta-sm-font-size);
-    /* Use color-mix() for modern color manipulation */
-    background-color: color-mix(
-      in srgb,
-      var(--g-theme-color-background-default) 90%,
-      var(--g-theme-color-primary-500) 10%
-    );
-    color: var(--g-theme-color-content-default);
-  }
-
-  .card__meta__item {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: nowrap;
-    gap: 0.3em;
-  }
-
-  .card__meta__item dt,
-  .card__meta__item dd {
-    display: block;
-    margin: 0;
-    padding: 0;
-  }
-
-  .card__meta__item dt::after {
-    content: ":";
-  }
-
-  :host(.is-clickable) .card {
-    cursor: pointer;
-  }
-
-  :host(.is-clickable:hover) .card {
-    transform: translateY(-2px);
-    box-shadow: var(--g-theme-box-shadow-lg);
-    border-color: var(--g-theme-color-border-default);
-  }
-
-  :host(.is-clickable:active) .card {
-    transform: translateY(-1px);
-    border-color: var(--g-theme-color-border-active);
-  }
+/* Inlined component-base mixin */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+:host {
+	display: block;
+	flex-grow: 1;
+	/* Enable container queries for responsive card layouts */
+	container-type: inline-size;
+	container-name: card;
+}
+
+.card {
+	display: flex;
+	inline-size: 100%;
+	min-block-size: 100%;
+	flex-direction: column;
+	justify-content: flex-start;
+	overflow: hidden;
+	background: var(--g-theme-color-background-default);
+	border-style: solid;
+	border-width: var(--g-theme-border-width-sm);
+	border-color: var(--g-theme-color-border-default);
+	border-radius: var(--g-theme-border-radius-md);
+	box-shadow: var(--g-theme-box-shadow-md);
+	transition:
+		box-shadow 0.2s ease,
+		transform 0.2s ease,
+		border-color 0.2s ease,
+		background-color 0.2s ease;
+}
+
+/* Image support - images in header or content will be styled appropriately */
+.card__header img,
+.card__content img {
+	display: block;
+	inline-size: 100%;
+	block-size: auto;
+	border-radius: inherit;
+}
+
+.card__header {
+	padding-inline: var(--g-theme-spacing-md);
+	padding-block: var(--g-spacing-12);
+	border-block-end: 1px solid var(--g-theme-color-border-default);
+}
+
+.card__header:not([data-has-content]) {
+	display: none;
+}
+
+.card__header ::slotted(*) {
+	margin: 0;
+	font: var(--g-typography-h5-font);
+}
+
+.card__content {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	gap: var(--g-theme-spacing-md);
+	padding-block: var(--g-theme-spacing-md);
+	padding-inline: var(--g-theme-spacing-md);
+}
+
+.card__content:has(::slotted(:empty)) {
+	display: none;
+}
+
+.card__content > * {
+	margin: 0;
+}
+
+.card__footer {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	align-items: center;
+	gap: var(--g-theme-spacing-sm);
+	padding-inline: var(--g-theme-spacing-md);
+	padding-block: var(--g-spacing-12);
+	border-block-start: 1px solid var(--g-theme-color-border-default);
+	background: var(--g-theme-color-background-default);
+}
+
+.card__footer:not([data-has-content]) {
+	display: none;
+}
+
+.card__footer ::slotted(grantcodes-button-group) {
+	width: 100%;
+	justify-content: flex-end;
+}
+
+.card__meta {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: var(--g-theme-spacing-md);
+	margin: 0;
+	padding-inline: var(--g-theme-spacing-md);
+	padding-block: 1em;
+	font-size: var(--g-theme-typography-meta-sm-font-size);
+	/* Use color-mix() for modern color manipulation */
+	background-color: color-mix(
+		in srgb,
+		var(--g-theme-color-background-default) 90%,
+		var(--g-theme-color-primary-500) 10%
+	);
+	color: var(--g-theme-color-content-default);
+}
+
+.card__meta__item {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	flex-wrap: nowrap;
+	gap: 0.3em;
+}
+
+.card__meta__item dt,
+.card__meta__item dd {
+	display: block;
+	margin: 0;
+	padding: 0;
+}
+
+.card__meta__item dt::after {
+	content: ":";
+}
+
+:host(.is-clickable) .card {
+	cursor: pointer;
+}
+
+:host(.is-clickable:hover) .card {
+	transform: translateY(-2px);
+	box-shadow: var(--g-theme-box-shadow-lg);
+	border-color: var(--g-theme-color-border-default);
+}
+
+:host(.is-clickable:active) .card {
+	transform: translateY(-1px);
+	border-color: var(--g-theme-color-border-active);
+}

package/src/components/card/card.react.js

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

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

@@ -1,19 +1,18 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 .code-preview > pre {
-  display: block;
-  font-family: var(--g-typography-font-family-system);
-  line-height: 1.2;
-  width: 100%;
-  overflow: auto;
-  border-radius: var(--g-theme-border-radius-md);
-  box-shadow: var(--g-theme-box-shadow-sm);
-  font-size: var(--g-typography-font-size-14);
-  font-weight: var(--g-typography-font-weight-400);
-  padding: var(--g-theme-spacing-md);
+	display: block;
+	font-family: var(--g-typography-font-family-system);
+	line-height: 1.2;
+	width: 100%;
+	overflow: auto;
+	border-radius: var(--g-theme-border-radius-md);
+	box-shadow: var(--g-theme-box-shadow-sm);
+	font-size: var(--g-typography-font-size-14);
+	font-weight: var(--g-typography-font-weight-400);
+	padding: var(--g-theme-spacing-md);
 }
-

package/src/components/code-preview/code-preview.react.js

@@ -1,9 +1,9 @@
-import React from "react"
-import { createComponent } from "@lit/react"
-import { GrantCodesCodePreview } from "./code-preview.js"
+import React from "react";
+import { createComponent } from "@lit/react";
+import { GrantCodesCodePreview } from "./code-preview.js";
 
 export const CodePreview = createComponent({
 	tagName: "grantcodes-code-preview",
 	elementClass: GrantCodesCodePreview,
 	react: React,
-})
+});

package/src/components/container/container.css

@@ -1,43 +1,43 @@
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
 
-  .container {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    inline-size: 1200px;
-    max-inline-size: 100%;
-    padding-inline: var(--g-theme-spacing-md);
-    margin-inline: auto;
-    background-color: inherit;
-  }
+.container {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: stretch;
+	inline-size: 1200px;
+	max-inline-size: 100%;
+	padding-inline: var(--g-theme-spacing-md);
+	margin-inline: auto;
+	background-color: inherit;
+}
 
-  .container--prose {
-    max-inline-size: 65ch;
-  }
+.container--prose {
+	max-inline-size: 65ch;
+}
 
-  .container--wide {
-    inline-size: 1400px;
-  }
+.container--wide {
+	inline-size: 1400px;
+}
 
-  .container--full {
-    inline-size: 100%;
-  }
+.container--full {
+	inline-size: 100%;
+}
 
-  .container--viewport {
-    inset-inline-start: 50%;
-    position: relative;
-    inset-inline-end: 50%;
-    margin-inline-start: -50dvw;
-    margin-inline-end: -50dvw;
-    max-inline-size: 100dvw;
-    inline-size: 100dvw;
-  }
+.container--viewport {
+	inset-inline-start: 50%;
+	position: relative;
+	inset-inline-end: 50%;
+	margin-inline-start: -50dvw;
+	margin-inline-end: -50dvw;
+	max-inline-size: 100dvw;
+	inline-size: 100dvw;
+}
 
-  .container--nopad {
-    padding-inline: 0;
-  }
+.container--nopad {
+	padding-inline: 0;
+}

package/src/components/container/container.react.js

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

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

@@ -166,14 +166,16 @@ export class GrantCodesCountdown extends LitElement {
 					<span class="countdown__value" data-unit="minutes">${this._minutes}</span>
 					<span class="countdown__label">${this["minutes-label"]}</span>
 				</div>
-				${this["show-seconds"]
-					? html`
+				${
+					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}
+						: nothing
+				}
 			</div>
 		`;
 	}

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

@@ -1,8 +1,7 @@
 import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
 import "./countdown.js";
 
-const { events, args, argTypes } =
-	getStorybookHelpers("grantcodes-countdown");
+const { events, args, argTypes } = getStorybookHelpers("grantcodes-countdown");
 
 const meta = {
 	title: "Components/Countdown",

package/src/components/cta/cta.css

@@ -1,66 +1,66 @@
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
 
-  :host {
-    display: block;
-  }
+:host {
+	display: block;
+}
 
-  .cta {
-    padding-block: var(--g-theme-spacing-3xl);
-    padding-inline: var(--g-theme-spacing-md);
-    background: var(--g-theme-color-background-subtle);
-  }
+.cta {
+	padding-block: var(--g-theme-spacing-3xl);
+	padding-inline: var(--g-theme-spacing-md);
+	background: var(--g-theme-color-background-subtle);
+}
 
-  .cta__container {
-    max-width: 65ch;
-    margin: 0 auto;
-  }
+.cta__container {
+	max-width: 65ch;
+	margin: 0 auto;
+}
 
-  :host([align="center"]) .cta {
-    text-align: center;
-  }
+:host([align="center"]) .cta {
+	text-align: center;
+}
 
-  :host([align="center"]) .cta__actions {
-    justify-content: center;
-  }
+:host([align="center"]) .cta__actions {
+	justify-content: center;
+}
 
-  .cta__eyebrow {
-    margin: 0 0 var(--g-theme-spacing-sm);
-    font-size: var(--g-theme-typography-meta-default-font-size);
-    font-weight: var(--g-theme-typography-meta-default-font-weight);
-    letter-spacing: var(--g-theme-typography-meta-default-letter-spacing);
-    text-transform: uppercase;
-    color: var(--g-theme-color-content-primary, #7c3aed);
-  }
+.cta__eyebrow {
+	margin: 0 0 var(--g-theme-spacing-sm);
+	font-size: var(--g-theme-typography-meta-default-font-size);
+	font-weight: var(--g-theme-typography-meta-default-font-weight);
+	letter-spacing: var(--g-theme-typography-meta-default-letter-spacing);
+	text-transform: uppercase;
+	color: var(--g-theme-color-content-primary, #7c3aed);
+}
 
-  .cta__title {
-    margin: 0 0 var(--g-theme-spacing-md);
-    font: var(--g-typography-h2-font);
-    color: var(--g-theme-color-content-default);
-  }
+.cta__title {
+	margin: 0 0 var(--g-theme-spacing-md);
+	font: var(--g-typography-h2-font);
+	color: var(--g-theme-color-content-default);
+}
 
-  .cta__text {
-    margin: 0 0 var(--g-theme-spacing-xl);
-    font: var(--g-theme-typography-body-lg);
-    color: var(--g-theme-color-content-subtle);
-  }
+.cta__text {
+	margin: 0 0 var(--g-theme-spacing-xl);
+	font: var(--g-theme-typography-body-lg);
+	color: var(--g-theme-color-content-subtle);
+}
 
-  .cta__actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--g-theme-spacing-md);
-    align-items: center;
-  }
+.cta__actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--g-theme-spacing-md);
+	align-items: center;
+}
 
-  .cta__secondary-link {
-    font-size: var(--g-theme-typography-body-default-font-size);
-    font-weight: var(--g-typography-font-weight-500);
-    color: var(--g-theme-color-content-default);
-  }
+.cta__secondary-link {
+	font-size: var(--g-theme-typography-body-default-font-size);
+	font-weight: var(--g-typography-font-weight-500);
+	color: var(--g-theme-color-content-default);
+}
 
-  .cta__secondary-link:hover {
-    color: var(--g-theme-color-content-primary, #7c3aed);
-  }
+.cta__secondary-link:hover {
+	color: var(--g-theme-color-content-primary, #7c3aed);
+}

package/src/components/cta/cta.react.js

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