@grantcodes/ui 2.10.0 → 2.10.2

package/src/components/media-text/media-text.react.js

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

package/src/components/newsletter/newsletter.css

@@ -1,91 +1,91 @@
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
 
-  :host {
-    display: block;
-  }
+:host {
+	display: block;
+}
 
-  .newsletter {
-    padding-block: var(--g-theme-spacing-3xl);
-    padding-inline: var(--g-theme-spacing-md);
-    background: var(--g-theme-color-background-primary-knockout, #7c3aed);
-    text-align: center;
-  }
+.newsletter {
+	padding-block: var(--g-theme-spacing-3xl);
+	padding-inline: var(--g-theme-spacing-md);
+	background: var(--g-theme-color-background-primary-knockout, #7c3aed);
+	text-align: center;
+}
 
-  .newsletter__container {
-    max-width: 55ch;
-    margin: 0 auto;
-  }
+.newsletter__container {
+	max-width: 55ch;
+	margin: 0 auto;
+}
 
-  .newsletter__title {
-    margin: 0 0 var(--g-theme-spacing-sm);
-    font: var(--g-typography-h4-font);
-    color: var(--g-theme-color-content-primary-knockout, #ffffff);
-  }
+.newsletter__title {
+	margin: 0 0 var(--g-theme-spacing-sm);
+	font: var(--g-typography-h4-font);
+	color: var(--g-theme-color-content-primary-knockout, #ffffff);
+}
 
-  .newsletter__text {
-    margin: 0 0 var(--g-theme-spacing-xl);
-    font: var(--g-theme-typography-body-lg);
-    color: var(--g-theme-color-content-primary-knockout, #ffffff);
-    opacity: 0.9;
-  }
+.newsletter__text {
+	margin: 0 0 var(--g-theme-spacing-xl);
+	font: var(--g-theme-typography-body-lg);
+	color: var(--g-theme-color-content-primary-knockout, #ffffff);
+	opacity: 0.9;
+}
 
-  .newsletter__form {
-    width: 100%;
-  }
+.newsletter__form {
+	width: 100%;
+}
 
-  .newsletter__label {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
+.newsletter__label {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
 
-  .newsletter__field {
-    display: flex;
-    flex-direction: column;
-    gap: var(--g-theme-spacing-sm);
-  }
+.newsletter__field {
+	display: flex;
+	flex-direction: column;
+	gap: var(--g-theme-spacing-sm);
+}
 
-  .newsletter__input-wrap {
-    display: flex;
-    gap: var(--g-theme-spacing-sm);
-  }
+.newsletter__input-wrap {
+	display: flex;
+	gap: var(--g-theme-spacing-sm);
+}
 
-  .newsletter__input {
-    flex: 1;
-    min-width: 0;
-    padding-block: var(--g-theme-spacing-sm);
-    padding-inline: var(--g-theme-spacing-md);
-    font-size: var(--g-theme-typography-body-default-font-size);
-    border: 2px solid transparent;
-    border-radius: var(--g-theme-border-radius-md, 0.5rem);
-    background: var(--g-theme-color-background-default);
-    color: var(--g-theme-color-content-default);
-    outline: none;
-  }
+.newsletter__input {
+	flex: 1;
+	min-width: 0;
+	padding-block: var(--g-theme-spacing-sm);
+	padding-inline: var(--g-theme-spacing-md);
+	font-size: var(--g-theme-typography-body-default-font-size);
+	border: 2px solid transparent;
+	border-radius: var(--g-theme-border-radius-md, 0.5rem);
+	background: var(--g-theme-color-background-default);
+	color: var(--g-theme-color-content-default);
+	outline: none;
+}
 
-  .newsletter__input:focus {
-    border-color: var(--g-theme-color-border-default);
-  }
+.newsletter__input:focus {
+	border-color: var(--g-theme-color-border-default);
+}
 
-  .newsletter__disclaimer {
-    margin: var(--g-theme-spacing-md) 0 0;
-    font: var(--g-theme-typography-body-sm);
-    color: var(--g-theme-color-content-primary-knockout, #ffffff);
-    opacity: 0.75;
-  }
+.newsletter__disclaimer {
+	margin: var(--g-theme-spacing-md) 0 0;
+	font: var(--g-theme-typography-body-sm);
+	color: var(--g-theme-color-content-primary-knockout, #ffffff);
+	opacity: 0.75;
+}
 
-  @media (max-width: 480px) {
-    .newsletter__input-wrap {
-      flex-direction: column;
-    }
-  }
+@media (max-width: 480px) {
+	.newsletter__input-wrap {
+		flex-direction: column;
+	}
+}

package/src/components/newsletter/newsletter.react.js

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

package/src/components/notice/notice.css

@@ -1,73 +1,73 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 .notice {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: var(--g-theme-spacing-md);
-  padding: var(--g-theme-spacing-md);
-  border-radius: var(--g-theme-border-radius-sm, 0.25rem);
-  view-transition-name: notice;
-  transition: opacity 0.5s;
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	gap: var(--g-theme-spacing-md);
+	padding: var(--g-theme-spacing-md);
+	border-radius: var(--g-theme-border-radius-sm, 0.25rem);
+	view-transition-name: notice;
+	transition: opacity 0.5s;
 }
 
 .notice--info {
-  color: var(--g-color-utility-blue-900);
-  background-color: var(--g-color-utility-blue-100);
+	color: var(--g-color-utility-blue-900);
+	background-color: var(--g-color-utility-blue-100);
 }
 
 .notice--success {
-  color: var(--g-color-utility-green-900);
-  background-color: var(--g-color-utility-green-100);
+	color: var(--g-color-utility-green-900);
+	background-color: var(--g-color-utility-green-100);
 }
 
 .notice--warning {
-  color: var(--g-color-utility-yellow-900);
-  background-color: var(--g-color-utility-yellow-100);
+	color: var(--g-color-utility-yellow-900);
+	background-color: var(--g-color-utility-yellow-100);
 }
 
 .notice--error {
-  color: var(--g-color-utility-red-900);
-  background-color: var(--g-color-utility-red-100);
+	color: var(--g-color-utility-red-900);
+	background-color: var(--g-color-utility-red-100);
 }
 
 .notice__title {
-  font-size: var(--g-theme-typography-body-default-font-size);
-  margin: 0;
+	font-size: var(--g-theme-typography-body-default-font-size);
+	margin: 0;
 }
 
 .notice__icon {
-  font-size: calc(var(--g-theme-typography-body-default-line-height) * 1em);
+	font-size: calc(var(--g-theme-typography-body-default-line-height) * 1em);
 }
 
 .notice__content {
-  flex-grow: 1;
+	flex-grow: 1;
 }
 
 .notice__close {
-  background: none;
-  color: inherit;
-  opacity: 0.5;
-  transition: 0.2s;
-  font-size: calc(var(--g-theme-typography-body-default-line-height) * 1em);
-  line-height: 1;
-  padding: var(--g-theme-spacing-sm);
-  margin: calc(-1 * var(--g-theme-spacing-sm)) calc(-1 * var(--g-theme-spacing-sm)) 0 0;
-  border: 0;
+	background: none;
+	color: inherit;
+	opacity: 0.5;
+	transition: 0.2s;
+	font-size: calc(var(--g-theme-typography-body-default-line-height) * 1em);
+	line-height: 1;
+	padding: var(--g-theme-spacing-sm);
+	margin: calc(-1 * var(--g-theme-spacing-sm))
+		calc(-1 * var(--g-theme-spacing-sm)) 0 0;
+	border: 0;
 
-  &:hover,
-  &:focus-visible {
-    background: none;
-    color: inherit;
-    opacity: 1;
-  }
+	&:hover,
+	&:focus-visible {
+		background: none;
+		color: inherit;
+		opacity: 1;
+	}
 }
 
 .notice p {
-  margin: 0;
+	margin: 0;
 }
-

package/src/components/notice/notice.react.js

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

package/src/components/pagination/pagination.css

@@ -1,20 +1,19 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 .pagination {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
 }
 
 .pagination__next {
-  margin-inline-start: auto;
+	margin-inline-start: auto;
 }
 
 .pagination__previous {
-  margin-inline-end: auto;
+	margin-inline-end: auto;
 }
-

package/src/components/pagination/pagination.react.js

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

package/src/components/pricing/pricing.css

@@ -1,137 +1,137 @@
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    display: block;
-  }
-
-  .pricing {
-    padding-block: var(--g-theme-spacing-3xl);
-    padding-inline: var(--g-theme-spacing-md);
-  }
-
-  .pricing__container {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  .pricing__title {
-    margin: 0 0 var(--g-theme-spacing-sm);
-    font-size: var(--g-theme-typography-h4-font-size);
-    font-weight: var(--g-theme-typography-h4-font-weight);
-    text-align: center;
-    color: var(--g-theme-color-content-default);
-  }
-
-  .pricing__subtitle {
-    margin: 0 auto var(--g-theme-spacing-2xl);
-    font-size: var(--g-theme-typography-body-lg-font-size);
-    text-align: center;
-    color: var(--g-theme-color-content-subtle);
-    max-width: 55ch;
-  }
-
-  .pricing__grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-    gap: var(--g-theme-spacing-lg);
-    align-items: start;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-
-  .pricing__tier {
-    display: flex;
-    flex-direction: column;
-    gap: var(--g-theme-spacing-lg);
-    padding: var(--g-theme-spacing-xl);
-    border: 1px solid var(--g-theme-color-border-default);
-    border-radius: var(--g-theme-border-radius-md, 0.5rem);
-    background: var(--g-theme-color-background-default);
-  }
-
-  .pricing__tier--highlighted {
-    border-color: var(--g-theme-color-border-primary, #7c3aed);
-    background: var(--g-theme-color-background-subtle);
-    box-shadow: var(--g-theme-shadow-lg);
-  }
-
-  .pricing__tier-header {
-    display: flex;
-    flex-direction: column;
-    gap: var(--g-theme-spacing-sm);
-  }
-
-  .pricing__tier-name {
-    margin: 0;
-    font-size: var(--g-theme-typography-body-lg-font-size);
-    font-weight: var(--g-theme-typography-label-lg-font-weight);
-    color: var(--g-theme-color-content-default);
-  }
-
-  .pricing__price-wrap {
-    display: flex;
-    align-items: baseline;
-    gap: var(--g-theme-spacing-xs);
-  }
-
-  .pricing__price {
-    font: var(--g-typography-h2-font);
-    color: var(--g-theme-color-content-default);
-  }
-
-  .pricing__period {
-    font-size: var(--g-theme-typography-body-default-font-size);
-    color: var(--g-theme-color-content-subtle);
-  }
-
-  .pricing__tier-desc {
-    margin: 0;
-    font: var(--g-theme-typography-body-sm);
-    color: var(--g-theme-color-content-subtle);
-  }
-
-  .pricing__features {
-    display: flex;
-    flex-direction: column;
-    gap: var(--g-theme-spacing-sm);
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    flex: 1;
-  }
-
-  .pricing__feature {
-    display: flex;
-    align-items: center;
-    gap: var(--g-theme-spacing-sm);
-    font-size: var(--g-theme-typography-body-default-font-size);
-    color: var(--g-theme-color-content-default);
-  }
-
-  .pricing__feature--excluded {
-    color: var(--g-theme-color-content-subtle);
-    text-decoration: line-through;
-  }
-
-  .pricing__feature-icon {
-    font: var(--g-theme-typography-body-sm);
-    color: var(--g-theme-color-content-primary, #7c3aed);
-    flex-shrink: 0;
-  }
-
-  .pricing__feature--excluded .pricing__feature-icon {
-    color: var(--g-theme-color-content-subtle);
-  }
-
-  .pricing__cta {
-    margin-top: auto;
-  }
-
-  .pricing__cta grantcodes-button {
-    width: 100%;
-  }
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+:host {
+	display: block;
+}
+
+.pricing {
+	padding-block: var(--g-theme-spacing-3xl);
+	padding-inline: var(--g-theme-spacing-md);
+}
+
+.pricing__container {
+	max-width: 1200px;
+	margin: 0 auto;
+}
+
+.pricing__title {
+	margin: 0 0 var(--g-theme-spacing-sm);
+	font-size: var(--g-theme-typography-h4-font-size);
+	font-weight: var(--g-theme-typography-h4-font-weight);
+	text-align: center;
+	color: var(--g-theme-color-content-default);
+}
+
+.pricing__subtitle {
+	margin: 0 auto var(--g-theme-spacing-2xl);
+	font-size: var(--g-theme-typography-body-lg-font-size);
+	text-align: center;
+	color: var(--g-theme-color-content-subtle);
+	max-width: 55ch;
+}
+
+.pricing__grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+	gap: var(--g-theme-spacing-lg);
+	align-items: start;
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}
+
+.pricing__tier {
+	display: flex;
+	flex-direction: column;
+	gap: var(--g-theme-spacing-lg);
+	padding: var(--g-theme-spacing-xl);
+	border: 1px solid var(--g-theme-color-border-default);
+	border-radius: var(--g-theme-border-radius-md, 0.5rem);
+	background: var(--g-theme-color-background-default);
+}
+
+.pricing__tier--highlighted {
+	border-color: var(--g-theme-color-border-primary, #7c3aed);
+	background: var(--g-theme-color-background-subtle);
+	box-shadow: var(--g-theme-shadow-lg);
+}
+
+.pricing__tier-header {
+	display: flex;
+	flex-direction: column;
+	gap: var(--g-theme-spacing-sm);
+}
+
+.pricing__tier-name {
+	margin: 0;
+	font-size: var(--g-theme-typography-body-lg-font-size);
+	font-weight: var(--g-theme-typography-label-lg-font-weight);
+	color: var(--g-theme-color-content-default);
+}
+
+.pricing__price-wrap {
+	display: flex;
+	align-items: baseline;
+	gap: var(--g-theme-spacing-xs);
+}
+
+.pricing__price {
+	font: var(--g-typography-h2-font);
+	color: var(--g-theme-color-content-default);
+}
+
+.pricing__period {
+	font-size: var(--g-theme-typography-body-default-font-size);
+	color: var(--g-theme-color-content-subtle);
+}
+
+.pricing__tier-desc {
+	margin: 0;
+	font: var(--g-theme-typography-body-sm);
+	color: var(--g-theme-color-content-subtle);
+}
+
+.pricing__features {
+	display: flex;
+	flex-direction: column;
+	gap: var(--g-theme-spacing-sm);
+	padding: 0;
+	margin: 0;
+	list-style: none;
+	flex: 1;
+}
+
+.pricing__feature {
+	display: flex;
+	align-items: center;
+	gap: var(--g-theme-spacing-sm);
+	font-size: var(--g-theme-typography-body-default-font-size);
+	color: var(--g-theme-color-content-default);
+}
+
+.pricing__feature--excluded {
+	color: var(--g-theme-color-content-subtle);
+	text-decoration: line-through;
+}
+
+.pricing__feature-icon {
+	font: var(--g-theme-typography-body-sm);
+	color: var(--g-theme-color-content-primary, #7c3aed);
+	flex-shrink: 0;
+}
+
+.pricing__feature--excluded .pricing__feature-icon {
+	color: var(--g-theme-color-content-subtle);
+}
+
+.pricing__cta {
+	margin-top: auto;
+}
+
+.pricing__cta grantcodes-button {
+	width: 100%;
+}

package/src/components/pricing/pricing.react.js

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

package/src/components/sidebar/sidebar.component.js

@@ -1,6 +1,8 @@
 import { html, LitElement } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import focusRingStyles from "../../lib/styles/focus-ring.css" with { type: "css" };
+import focusRingStyles from "../../lib/styles/focus-ring.css" with {
+	type: "css",
+};
 import sidebarStyles from "./sidebar.css" with { type: "css" };
 
 export class GrantCodesSidebar extends LitElement {