@grantcodes/ui 2.9.2 → 2.10.1

package/src/components/footer/footer-column.css

@@ -1,46 +1,46 @@
-  :host {
-    display: block;
-  }
+:host {
+	display: block;
+}
 
-  .footer-column {
-    display: flex;
-    flex-direction: column;
-    gap: var(--g-spacing-12);
-  }
+.footer-column {
+	display: flex;
+	flex-direction: column;
+	gap: var(--g-spacing-12);
+}
 
-  ::slotted(h3) {
-    font-size: var(--g-typography-font-size-16);
-    color: var(--g-theme-color-content-default);
-    margin: 0 0 var(--g-theme-spacing-sm) 0;
-    font-weight: var(--g-typography-font-weight-600);
-  }
+::slotted(h3) {
+	font-size: var(--g-typography-font-size-16);
+	color: var(--g-theme-color-content-default);
+	margin: 0 0 var(--g-theme-spacing-sm) 0;
+	font-weight: var(--g-typography-font-weight-600);
+}
 
-  ::slotted(ul) {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--g-theme-spacing-sm);
-  }
+::slotted(ul) {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	gap: var(--g-theme-spacing-sm);
+}
 
-  ::slotted(li) {
-    margin: 0;
-  }
+::slotted(li) {
+	margin: 0;
+}
 
-  ::slotted(a) {
-    color: var(--g-theme-color-content-subtle);
-    text-decoration: none;
-    transition: color 0.2s ease;
-  }
+::slotted(a) {
+	color: var(--g-theme-color-content-subtle);
+	text-decoration: none;
+	transition: color 0.2s ease;
+}
 
-  ::slotted(a:hover) {
-    color: var(--g-theme-color-content-default);
-    text-decoration: underline;
-  }
+::slotted(a:hover) {
+	color: var(--g-theme-color-content-default);
+	text-decoration: underline;
+}
 
-  ::slotted(p) {
-    margin: 0;
-    color: var(--g-theme-color-content-subtle);
-    font: var(--g-typography-body-sm);
-  }
+::slotted(p) {
+	margin: 0;
+	color: var(--g-theme-color-content-subtle);
+	font: var(--g-typography-body-sm);
+}

package/src/components/footer/footer.css

@@ -1,85 +1,84 @@
-	*,
-	*::before,
-	*::after {
-		box-sizing: border-box;
-	}
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
 
-	:host {
-		display: block;
-		container-type: inline-size;
-		container-name: footer;
-	}
+:host {
+	display: block;
+	container-type: inline-size;
+	container-name: footer;
+}
 
-	.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 {
+	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 {
-		padding-block: var(--g-theme-spacing-2xl) var(--g-theme-spacing-xl);
-		padding-inline: var(--g-theme-spacing-md);
-		max-inline-size: 1400px;
-		margin-inline: auto;
-	}
+.footer__container {
+	padding-block: var(--g-theme-spacing-2xl) var(--g-theme-spacing-xl);
+	padding-inline: var(--g-theme-spacing-md);
+	max-inline-size: 1400px;
+	margin-inline: auto;
+}
 
+.footer__columns {
+	display: grid;
+	grid-template-columns: repeat(var(--footer-columns, 3), 1fr);
+	gap: var(--g-theme-spacing-xl);
+}
+
+/* Responsive grid using container queries */
+@container footer (max-width: 768px) {
 	.footer__columns {
-		display: grid;
-		grid-template-columns: repeat(var(--footer-columns, 3), 1fr);
-		gap: var(--g-theme-spacing-xl);
+		grid-template-columns: repeat(2, 1fr);
 	}
+}
 
-	/* Responsive grid using container queries */
-	@container footer (max-width: 768px) {
-		.footer__columns {
-			grid-template-columns: repeat(2, 1fr);
-		}
+@container footer (max-width: 480px) {
+	.footer__columns {
+		grid-template-columns: 1fr;
 	}
+}
 
-	@container footer (max-width: 480px) {
-		.footer__columns {
-			grid-template-columns: 1fr;
-		}
-	}
+/* Bottom section (copyright, social links, etc.) */
+.footer__bottom {
+	margin-block-start: var(--g-theme-spacing-xl);
+	padding-block-start: var(--g-theme-spacing-xl);
+	border-block-start: 1px solid var(--g-theme-color-border-default);
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	align-items: center;
+	gap: var(--g-theme-spacing-md);
+}
 
-	/* Bottom section (copyright, social links, etc.) */
+@container footer (max-width: 640px) {
 	.footer__bottom {
-		margin-block-start: var(--g-theme-spacing-xl);
-		padding-block-start: var(--g-theme-spacing-xl);
-		border-block-start: 1px solid var(--g-theme-color-border-default);
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-		align-items: center;
-		gap: var(--g-theme-spacing-md);
+		flex-direction: column;
+		text-align: center;
 	}
+}
 
+/* Slotted content styling */
+::slotted(*) {
+	font: var(--g-typography-font-body-sm);
+	color: var(--g-theme-color-content-subtle);
+}
 
-	@container footer (max-width: 640px) {
-		.footer__bottom {
-			flex-direction: column;
-			text-align: center;
-		}
-	}
-
-	/* Slotted content styling */
-	::slotted(*) {
-		font: var(--g-typography-font-body-sm);
-		color: var(--g-theme-color-content-subtle);
-	}
+::slotted(p) {
+	margin: 0;
+	line-height: 1.5;
+}
 
-	::slotted(p) {
-		margin: 0;
-		line-height: 1.5;
-	}
+::slotted(a) {
+	color: var(--g-theme-color-content-subtle);
+	text-decoration: none;
+	transition: color 0.2s ease;
+}
 
-	::slotted(a) {
-		color: var(--g-theme-color-content-subtle);
-		text-decoration: none;
-		transition: color 0.2s ease;
-	}
-
-	::slotted(a:hover) {
-		color: var(--g-theme-color-content-default);
-		text-decoration: underline;
-	}
+::slotted(a:hover) {
+	color: var(--g-theme-color-content-default);
+	text-decoration: underline;
+}

package/src/components/footer/footer.react.js

@@ -1,15 +1,15 @@
-import React from "react"
-import { createComponent } from "@lit/react"
-import { GrantCodesFooter, GrantCodesFooterColumn } from "./footer.js"
+import React from "react";
+import { createComponent } from "@lit/react";
+import { GrantCodesFooter, GrantCodesFooterColumn } from "./footer.js";
 
 export const Footer = createComponent({
 	tagName: "grantcodes-footer",
 	elementClass: GrantCodesFooter,
 	react: React,
-})
+});
 
 export const FooterColumn = createComponent({
 	tagName: "grantcodes-footer-column",
 	elementClass: GrantCodesFooterColumn,
 	react: React,
-})
+});

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

@@ -1,47 +1,47 @@
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
 
-  .form-field {
-    display: flex;
-    flex-direction: column;
-    gap: var(--g-theme-spacing-xs);
-    padding: 0;
-    margin: 0;
-    border: none;
-  }
+.form-field {
+	display: flex;
+	flex-direction: column;
+	gap: var(--g-theme-spacing-xs);
+	padding: 0;
+	margin: 0;
+	border: none;
+}
 
-  .form-field label,
-  .form-field slot {
-    display: flex;
-    flex-direction: column;
-    gap: inherit;
-  }
+.form-field label,
+.form-field slot {
+	display: flex;
+	flex-direction: column;
+	gap: inherit;
+}
 
-  .form-field--inline label {
-    flex-direction: row-reverse;
-    align-items: center;
-    justify-content: flex-end;
-  }
+.form-field--inline label {
+	flex-direction: row-reverse;
+	align-items: center;
+	justify-content: flex-end;
+}
 
-  .form-field__label {
-    margin: 0;
-    padding: 0;
+.form-field__label {
+	margin: 0;
+	padding: 0;
 
-    &:where(legend) {
-      margin-bottom: var(--g-theme-spacing-xs);
-    }
-  }
+	&:where(legend) {
+		margin-bottom: var(--g-theme-spacing-xs);
+	}
+}
 
-  .form-field__help {
-    font-size: var(--g-theme-typography-body-sm-font-size);
-    opacity: 0.7;
-  }
+.form-field__help {
+	font-size: var(--g-theme-typography-body-sm-font-size);
+	opacity: 0.7;
+}
 
-  .form-field__error {
-    margin: 0;
-    font-size: var(--g-theme-typography-body-sm-font-size);
-    color: var(--g-color-utility-red-700);
-  }
+.form-field__error {
+	margin: 0;
+	font-size: var(--g-theme-typography-body-sm-font-size);
+	color: var(--g-color-utility-red-700);
+}

package/src/components/form-field/form-field.react.js

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

package/src/components/gallery/gallery-image.react.js

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

package/src/components/gallery/gallery.css

@@ -1,56 +1,56 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 .gallery {
-  display: block;
+	display: block;
 }
 
 .gallery__slot {
-  display: grid;
-  grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
-  width: 100%;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--gallery-gap, 0);
+	display: grid;
+	grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
+	width: 100%;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: var(--gallery-gap, 0);
 }
 
 .gallery__slot > * {
-  display: block;
-  width: 100%;
+	display: block;
+	width: 100%;
 }
 
 .gallery--has-lightbox > * {
-  cursor: pointer;
+	cursor: pointer;
 }
 
 .gallery__image {
-  position: relative;
-  width: 100%;
-  display: block;
-  flex-direction: column;
-  margin: 0;
+	position: relative;
+	width: 100%;
+	display: block;
+	flex-direction: column;
+	margin: 0;
 }
 
 .gallery__image img {
-  display: block;
-  width: 100%;
-  height: auto;
-  object-fit: cover;
-  object-position: center;
+	display: block;
+	width: 100%;
+	height: auto;
+	object-fit: cover;
+	object-position: center;
 }
 
 .gallery__image__caption {
-  position: absolute;
-  inset: 0;
-  inset-block-start: auto;
-  background-color: rgba(0, 0, 0, 0.4);
-  padding-inline: 0.5em;
-  padding-block: 0.3em;
-  line-height: 1.2;
-  color: white;
+	position: absolute;
+	inset: 0;
+	inset-block-start: auto;
+	background-color: rgba(0, 0, 0, 0.4);
+	padding-inline: 0.5em;
+	padding-block: 0.3em;
+	line-height: 1.2;
+	color: white;
 }
 
 /* =============================================
@@ -62,16 +62,16 @@
    wins on equal specificity. Uses custom properties so filmstrip mode can
    override them via inheritance from the parent gallery element. */
 :host .gallery__image img {
-  aspect-ratio: var(--_gallery-img-aspect-ratio, 1);
-  block-size: var(--_gallery-img-block-size, auto);
-  width: var(--_gallery-img-width, 100%);
-  height: var(--_gallery-img-height, auto);
-  max-inline-size: var(--_gallery-img-max-inline-size, unset);
+	aspect-ratio: var(--_gallery-img-aspect-ratio, 1);
+	block-size: var(--_gallery-img-block-size, auto);
+	width: var(--_gallery-img-width, 100%);
+	height: var(--_gallery-img-height, auto);
+	max-inline-size: var(--_gallery-img-max-inline-size, unset);
 }
 
 :host .gallery__image {
-  block-size: var(--_gallery-image-block-size, auto);
-  width: var(--_gallery-image-width, 100%);
+	block-size: var(--_gallery-image-block-size, auto);
+	width: var(--_gallery-image-width, 100%);
 }
 
 /* =============================================
@@ -83,59 +83,59 @@
    without requiring JS attribute propagation, making the filmstrip work
    correctly with SSR-rendered content. */
 :host([variant="filmstrip"]) {
-  --_gallery-image-block-size: 100%;
-  --_gallery-image-width: fit-content;
-  --_gallery-img-aspect-ratio: auto;
-  --_gallery-img-block-size: 100%;
-  --_gallery-img-width: auto;
-  --_gallery-img-height: 100%;
-  --_gallery-img-max-inline-size: none;
+	--_gallery-image-block-size: 100%;
+	--_gallery-image-width: fit-content;
+	--_gallery-img-aspect-ratio: auto;
+	--_gallery-img-block-size: 100%;
+	--_gallery-img-width: auto;
+	--_gallery-img-height: 100%;
+	--_gallery-img-max-inline-size: none;
 }
 
 :host([variant="filmstrip"]) .gallery {
-  overflow: hidden;
+	overflow: hidden;
 }
 
 :host([variant="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;
+	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([variant="filmstrip"]) .gallery__slot::-webkit-scrollbar {
-  display: none;
+	display: none;
 }
 
 :host([variant="filmstrip"]) .gallery__slot::slotted(*) {
-  flex: 0 0 auto;
-  block-size: 100%;
-  scroll-snap-align: start;
+	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([variant="filmstrip"]) .gallery__slot::slotted(*) {
-      animation: filmstrip-reveal linear both;
-      animation-timeline: view(inline);
-      animation-range: entry 0% entry 60%;
-    }
-  }
+	@media (prefers-reduced-motion: no-preference) {
+		:host([variant="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;
-  }
+	from {
+		opacity: 0.3;
+		scale: 0.92;
+	}
+	to {
+		opacity: 1;
+		scale: 1;
+	}
 }

package/src/components/gallery/gallery.react.js

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

package/src/components/gallery/gallery.test.js

@@ -68,7 +68,11 @@ describe("Gallery Component", () => {
 
 		it("should have variant property default to 'default'", async () => {
 			element = await fixture("grantcodes-gallery");
-			assert.strictEqual(element.variant, "default", "variant should default to 'default'");
+			assert.strictEqual(
+				element.variant,
+				"default",
+				"variant should default to 'default'",
+			);
 		});
 
 		it("should reflect variant attribute when property is set", async () => {