@grantcodes/ui 2.9.2 → 2.10.1

package/src/components/hero/hero.css

@@ -1,57 +1,61 @@
-	*,
-	*::before,
-	*::after {
-		box-sizing: border-box;
-	}
-
-	:host {
-		display: block;
-	}
-
-	.hero {
-		display: flex;
-		width: 100%;
-		justify-content: center;
-		align-items: center;
-		min-height: 50vh;
-		padding: var(--g-theme-spacing-2xl) var(--g-theme-spacing-md);
-		background: linear-gradient(135deg, var(--g-theme-color-background-primary-knockout), var(--g-color-primary-900));
-	}
-
-	.hero__container {
-		width: 100%;
-		max-width: 65ch;
-		gap: var(--g-theme-spacing-lg);
-	}
-
-	:host([center]) .hero {
-		text-align: center;
-	}
-
-	:host([center]) .hero__container {
-		margin-inline: auto;
-	}
-
-	.hero__title {
-		font: var(--g-typography-h1-font);
-		color: var(--g-theme-color-content-primary-knockout);
-	}
-
-	.hero__text {
-		font: var(--g-typography-body-lg);
-		color: var(--g-theme-color-content-primary-knockout);
-	}
-
-	:host([size="sm"]) .hero {
-		min-height: 30vh;
-		padding: var(--g-theme-spacing-xl) var(--g-theme-spacing-md);
-	}
-
-	:host([size="lg"]) .hero {
-		min-height: 70vh;
-		padding: var(--g-theme-spacing-3xl) var(--g-theme-spacing-md);
-	}
-
-	::slotted(*) {
-		color: var(--g-theme-color-content-primary-knockout, #ffffff);
-	}
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+:host {
+	display: block;
+}
+
+.hero {
+	display: flex;
+	width: 100%;
+	justify-content: center;
+	align-items: center;
+	min-height: 50vh;
+	padding: var(--g-theme-spacing-2xl) var(--g-theme-spacing-md);
+	background: linear-gradient(
+		135deg,
+		var(--g-theme-color-background-primary-knockout),
+		var(--g-color-primary-900)
+	);
+}
+
+.hero__container {
+	width: 100%;
+	max-width: 65ch;
+	gap: var(--g-theme-spacing-lg);
+}
+
+:host([center]) .hero {
+	text-align: center;
+}
+
+:host([center]) .hero__container {
+	margin-inline: auto;
+}
+
+.hero__title {
+	font: var(--g-typography-h1-font);
+	color: var(--g-theme-color-content-primary-knockout);
+}
+
+.hero__text {
+	font: var(--g-typography-body-lg);
+	color: var(--g-theme-color-content-primary-knockout);
+}
+
+:host([size="sm"]) .hero {
+	min-height: 30vh;
+	padding: var(--g-theme-spacing-xl) var(--g-theme-spacing-md);
+}
+
+:host([size="lg"]) .hero {
+	min-height: 70vh;
+	padding: var(--g-theme-spacing-3xl) var(--g-theme-spacing-md);
+}
+
+::slotted(*) {
+	color: var(--g-theme-color-content-primary-knockout, #ffffff);
+}

package/src/components/hero/hero.react.js

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

package/src/components/icon/icon.css

@@ -1,32 +1,32 @@
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
 
-  :host {
-    display: block;
-  }
+:host {
+	display: block;
+}
 
-  .icon {
-    display: block;
-    color: inherit;
-    width: 1em;
-    height: 1em;
-  }
+.icon {
+	display: block;
+	color: inherit;
+	width: 1em;
+	height: 1em;
+}
 
-  .icon ::slotted(svg) {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    object-position: center;
-  }
+.icon ::slotted(svg) {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+	object-position: center;
+}
 
-  .icon ::slotted(svg:not([fill])) {
-    fill: currentColor;
-  }
+.icon ::slotted(svg:not([fill])) {
+	fill: currentColor;
+}
 
-  .icon ::slotted(svg:not([stoke])) {
-    stroke: currentColor;
-  }
+.icon ::slotted(svg:not([stoke])) {
+	stroke: currentColor;
+}

package/src/components/icon/icon.react.js

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

package/src/components/loading/loading.css

@@ -1,44 +1,43 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 :host {
-  --height: 0.5rem;
-  --inner-width: 40%;
-  --starting-position: calc(0% - (var(--inner-width) * 2));
-  --ending-position: calc(100% + (var(--inner-width) * 2));
+	--height: 0.5rem;
+	--inner-width: 40%;
+	--starting-position: calc(0% - (var(--inner-width) * 2));
+	--ending-position: calc(100% + (var(--inner-width) * 2));
 }
 
 .loading {
-  display: block;
-  height: var(--height);
-  border-radius: calc(var(--height) / 2);
-  overflow: hidden;
-  padding-top: var(--height);
-  background-repeat: no-repeat;
-  background-color: var(--g-theme-color-primary-500);
-  background-image: linear-gradient(
-    to right,
-    transparent 0%,
-    var(--g-color-neutral-500) 10%,
-    var(--g-color-neutral-500) 90%,
-    transparent 100%
-  );
-  background-size: var(--inner-width) 100%;
-  background-position-x: var(--starting-position);
-  animation: loading 2s linear infinite;
-  /* This is probably a bad way of hiding the text */
-  font-size: 0;
+	display: block;
+	height: var(--height);
+	border-radius: calc(var(--height) / 2);
+	overflow: hidden;
+	padding-top: var(--height);
+	background-repeat: no-repeat;
+	background-color: var(--g-theme-color-primary-500);
+	background-image: linear-gradient(
+		to right,
+		transparent 0%,
+		var(--g-color-neutral-500) 10%,
+		var(--g-color-neutral-500) 90%,
+		transparent 100%
+	);
+	background-size: var(--inner-width) 100%;
+	background-position-x: var(--starting-position);
+	animation: loading 2s linear infinite;
+	/* This is probably a bad way of hiding the text */
+	font-size: 0;
 }
 
 @keyframes loading {
-  0% {
-    background-position-x: var(--starting-position);
-  }
-  100% {
-    background-position-x: var(--ending-position);
-  }
+	0% {
+		background-position-x: var(--starting-position);
+	}
+	100% {
+		background-position-x: var(--ending-position);
+	}
 }
-

package/src/components/loading/loading.react.js

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

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

@@ -1,70 +1,70 @@
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
 
-  :host {
-    display: block;
-  }
+:host {
+	display: block;
+}
 
-  .logo-cloud {
-    padding-block: var(--g-theme-spacing-2xl);
-    padding-inline: var(--g-theme-spacing-md);
-    border-top: 1px solid var(--g-theme-color-border-default);
-    border-bottom: 1px solid var(--g-theme-color-border-default);
-  }
+.logo-cloud {
+	padding-block: var(--g-theme-spacing-2xl);
+	padding-inline: var(--g-theme-spacing-md);
+	border-top: 1px solid var(--g-theme-color-border-default);
+	border-bottom: 1px solid var(--g-theme-color-border-default);
+}
 
-  .logo-cloud__container {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
+.logo-cloud__container {
+	max-width: 1200px;
+	margin: 0 auto;
+}
 
-  .logo-cloud__title {
-    margin: 0 0 var(--g-theme-spacing-xl);
-    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;
-    text-align: center;
-    color: var(--g-theme-color-content-subtle);
-  }
+.logo-cloud__title {
+	margin: 0 0 var(--g-theme-spacing-xl);
+	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;
+	text-align: center;
+	color: var(--g-theme-color-content-subtle);
+}
 
-  .logo-cloud__grid {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    gap: var(--g-theme-spacing-lg) var(--g-theme-spacing-2xl);
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
+.logo-cloud__grid {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: center;
+	gap: var(--g-theme-spacing-lg) var(--g-theme-spacing-2xl);
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}
 
-  .logo-cloud__link {
-    display: block;
-    opacity: 0.7;
-    transition: opacity 0.2s;
-  }
+.logo-cloud__link {
+	display: block;
+	opacity: 0.7;
+	transition: opacity 0.2s;
+}
 
-  .logo-cloud__link:hover {
-    opacity: 1;
-  }
+.logo-cloud__link:hover {
+	opacity: 1;
+}
 
-  .logo-cloud__logo {
-    display: block;
-    block-size: var(--g-theme-spacing-xl);
-    inline-size: auto;
-    max-inline-size: 140px;
-    object-fit: contain;
-    filter: grayscale(1);
-    transition: filter 0.2s;
-  }
+.logo-cloud__logo {
+	display: block;
+	block-size: var(--g-theme-spacing-xl);
+	inline-size: auto;
+	max-inline-size: 140px;
+	object-fit: contain;
+	filter: grayscale(1);
+	transition: filter 0.2s;
+}
 
-  .logo-cloud__link:hover .logo-cloud__logo {
-    filter: none;
-  }
+.logo-cloud__link:hover .logo-cloud__logo {
+	filter: none;
+}
 
-  .logo-cloud__item:not(:has(.logo-cloud__link)) .logo-cloud__logo {
-    filter: none;
-  }
+.logo-cloud__item:not(:has(.logo-cloud__link)) .logo-cloud__logo {
+	filter: none;
+}

package/src/components/logo-cloud/logo-cloud.react.js

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

package/src/components/map/map.component.js

@@ -1,7 +1,8 @@
 import { LitElement, html, nothing } from "lit";
 import mapStyles from "./map.css" with { type: "css" };
 
-const DARK_FILTER = "invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9)";
+const DARK_FILTER =
+	"invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9)";
 
 export class GrantCodesMap extends LitElement {
 	static styles = [mapStyles];
@@ -104,9 +105,7 @@ export class GrantCodesMap extends LitElement {
 			return nothing;
 		}
 
-		const heightStyle = this.height
-			? `--map-height: ${this.height}`
-			: "";
+		const heightStyle = this.height ? `--map-height: ${this.height}` : "";
 
 		return html`
 			<div class="map" style="${heightStyle}">

package/src/components/map/map.css

@@ -1,41 +1,41 @@
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
 
-  :host {
-    display: block;
-  }
+:host {
+	display: block;
+}
 
-  .map {
-    position: relative;
-    border: 1px solid var(--g-theme-color-border-default);
-    border-radius: var(--g-theme-border-radius-md, 0.5rem);
-    overflow: hidden;
-  }
+.map {
+	position: relative;
+	border: 1px solid var(--g-theme-color-border-default);
+	border-radius: var(--g-theme-border-radius-md, 0.5rem);
+	overflow: hidden;
+}
 
-  .map__iframe {
-    display: block;
-    vertical-align: top;
-    width: 100%;
-    height: var(--map-height, 21rem);
-    border: 0;
-    filter: var(--g-map-filter, none);
-  }
+.map__iframe {
+	display: block;
+	vertical-align: top;
+	width: 100%;
+	height: var(--map-height, 21rem);
+	border: 0;
+	filter: var(--g-map-filter, none);
+}
 
-  .map__directions {
-    display: block;
-    padding: var(--g-theme-spacing-sm) var(--g-theme-spacing-md);
-    font-size: var(--g-theme-typography-body-sm-font-size);
-    color: var(--g-theme-color-content-primary, #7c3aed);
-    text-decoration: none;
-    border-block-start: 1px solid var(--g-theme-color-border-default);
-    background: var(--g-theme-color-background-subtle);
-    transition: background-color 0.2s ease;
-  }
+.map__directions {
+	display: block;
+	padding: var(--g-theme-spacing-sm) var(--g-theme-spacing-md);
+	font-size: var(--g-theme-typography-body-sm-font-size);
+	color: var(--g-theme-color-content-primary, #7c3aed);
+	text-decoration: none;
+	border-block-start: 1px solid var(--g-theme-color-border-default);
+	background: var(--g-theme-color-background-subtle);
+	transition: background-color 0.2s ease;
+}
 
-  .map__directions:hover {
-    background: var(--g-theme-color-background-subtle-hover);
-    text-decoration: underline;
-  }
+.map__directions:hover {
+	background: var(--g-theme-color-background-subtle-hover);
+	text-decoration: underline;
+}

package/src/components/media-text/media-text.css

@@ -1,68 +1,68 @@
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
 
-  :host {
-    display: block;
-  }
+:host {
+	display: block;
+}
 
-  .media-text {
-    padding-block: var(--g-theme-spacing-3xl);
-    padding-inline: var(--g-theme-spacing-md);
-  }
+.media-text {
+	padding-block: var(--g-theme-spacing-3xl);
+	padding-inline: var(--g-theme-spacing-md);
+}
 
-  .media-text__container {
-    max-width: 1200px;
-    margin: 0 auto;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: var(--g-theme-spacing-3xl);
-    align-items: center;
-  }
+.media-text__container {
+	max-width: 1200px;
+	margin: 0 auto;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: var(--g-theme-spacing-3xl);
+	align-items: center;
+}
 
-  :host([reverse]) .media-text__container {
-    direction: rtl;
-  }
+:host([reverse]) .media-text__container {
+	direction: rtl;
+}
 
-  :host([reverse]) .media-text__content,
-  :host([reverse]) .media-text__media {
-    direction: ltr;
-  }
+:host([reverse]) .media-text__content,
+:host([reverse]) .media-text__media {
+	direction: ltr;
+}
 
-  @media (max-width: 768px) {
-    .media-text__container {
-      grid-template-columns: 1fr;
-      gap: var(--g-theme-spacing-xl);
-      direction: ltr;
-    }
-  }
+@media (max-width: 768px) {
+	.media-text__container {
+		grid-template-columns: 1fr;
+		gap: var(--g-theme-spacing-xl);
+		direction: ltr;
+	}
+}
 
-  .media-text__image,
-  .media-text__video {
-    inline-size: 100%;
-    block-size: auto;
-    display: block;
-    border-radius: var(--g-theme-border-radius-md, 0.5rem);
-    object-fit: cover;
-    aspect-ratio: 4 / 3;
-  }
+.media-text__image,
+.media-text__video {
+	inline-size: 100%;
+	block-size: auto;
+	display: block;
+	border-radius: var(--g-theme-border-radius-md, 0.5rem);
+	object-fit: cover;
+	aspect-ratio: 4 / 3;
+}
 
-  .media-text__content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--g-theme-spacing-lg);
-  }
+.media-text__content {
+	display: flex;
+	flex-direction: column;
+	gap: var(--g-theme-spacing-lg);
+}
 
-  .media-text__title {
-    margin: 0;
-    font: var(--g-typography-h4-font);
-    color: var(--g-theme-color-content-default);
-  }
+.media-text__title {
+	margin: 0;
+	font: var(--g-typography-h4-font);
+	color: var(--g-theme-color-content-default);
+}
 
-  .media-text__text {
-    margin: 0;
-    font: var(--g-theme-typography-body-lg);
-    color: var(--g-theme-color-content-subtle);
-  }
+.media-text__text {
+	margin: 0;
+	font: var(--g-theme-typography-body-lg);
+	color: var(--g-theme-color-content-subtle);
+}