@grantcodes/ui 2.1.1 → 2.2.0

package/src/components/feature-list/feature-list.component.js

@@ -1,7 +1,7 @@
 import { LitElement, html } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import * as icons from "lucide-static";
-import { featureListStyles } from "./feature-list.styles.js";
+import featureListStyles from "./feature-list.css" with { type: "css" };
 import "../icon/icon.js";
 
 export class GrantCodesFeatureList extends LitElement {

package/src/components/feature-list/{feature-list.styles.js → feature-list.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const featureListStyles = css`
   :host {
     display: block;
   }
@@ -79,4 +76,3 @@ export const featureListStyles = css`
   .feature-list__item-desc {
     color: var(--g-theme-color-content-secondary);
   }
-`;

package/src/components/footer/footer-column.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { footerColumnStyles } from "./footer-column.styles.js";
+import footerColumnStyles from "./footer-column.css" with { type: "css" };
 
 export class GrantCodesFooterColumn extends LitElement {
 	static styles = [footerColumnStyles];

package/src/components/footer/{footer-column.styles.js → footer-column.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const footerColumnStyles = css`
   :host {
     display: block;
   }
@@ -47,4 +44,3 @@ export const footerColumnStyles = css`
     color: var(--g-theme-color-content-secondary);
     font: var(--g-typography-body-sm);
   }
-`;

package/src/components/footer/footer.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { footerStyles } from "./footer.styles.js";
+import footerStyles from "./footer.css" with { type: "css" };
 
 export class GrantCodesFooter extends LitElement {
 	static styles = [footerStyles];

package/src/components/footer/{footer.styles.js → footer.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const footerStyles = css`
 	*,
 	*::before,
 	*::after {
@@ -87,4 +84,3 @@ export const footerStyles = css`
 		color: var(--g-theme-color-content-default);
 		text-decoration: underline;
 	}
-`;

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

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { formFieldStyles } from "./form-field.styles.js";
-import { cx } from "../../lib/classnames.js";
+import formFieldStyles from "./form-field.css" with { type: "css" };
+import { classMap } from "lit/directives/class-map.js";
 import { generateId } from "../../lib/generate-id.js";
 
 export class GrantCodesFormField extends LitElement {
@@ -129,34 +129,24 @@ export class GrantCodesFormField extends LitElement {
     `;
 	}
 
-	/**
-	 * Template for a group of form components
-	 *
-	 * @param   {string}  className  html class attribute
-	 *
-	 * @return  {}             [return description]
-	 */
-	groupTemplate(className) {
-		return html`
-      <fieldset class="${className}">
-        <legend class="form-field__label">${this.label}</legend>
-        <slot></slot>
-        ${this.errorTemplate()}
-      </fieldset>
-    `;
-	}
-
 	render() {
-		const elementClass = cx("form-field", {
+		const classes = classMap({
+			"form-field": true,
 			"form-field--inline": this.inlineInput,
 		});
 
 		if (this.groupInput) {
-			return this.groupTemplate(elementClass);
+			return html`
+      <fieldset class=${classes}>
+        <legend class="form-field__label">${this.label}</legend>
+        <slot></slot>
+        ${this.errorTemplate()}
+      </fieldset>
+    `;
 		}
 
 		return html`
-      <div class="${elementClass}">
+      <div class=${classes}>
         <label>
           <span class="form-field__label" @click=${this.handleLabelClick}
             >${this.label}</span

package/src/components/form-field/{form-field.styles.js → form-field.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const formFieldStyles = css`
   .form-field {
     display: flex;
     flex-direction: column;
@@ -42,4 +39,3 @@ export const formFieldStyles = css`
     font-size: var(--g-theme-typography-body-sm-font-size);
     color: var(--g-color-utility-red-700);
   }
-`;

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

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { galleryStyles } from "./gallery.styles.js";
+import galleryStyles from "./gallery.css" with { type: "css" };
 
 export class GrantCodesGalleryImage extends LitElement {
 	static styles = [galleryStyles];

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

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { galleryStyles } from "./gallery.styles.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

package/src/components/gallery/{gallery.styles.js → gallery.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const galleryStyles = css`
 
 .gallery {
   display: block;
@@ -53,4 +50,3 @@ export const galleryStyles = css`
   color: white;
 }
 
-`;

package/src/components/hero/hero.component.js

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { heroStyles } from "./hero.styles.js";
+import heroStyles from "./hero.css" with { type: "css" };
 import "../button/button.js";
 
 export class GrantCodesHero extends LitElement {

package/src/components/hero/{hero.styles.js → hero.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const heroStyles = css`
 	:host {
 		display: block;
 	}
@@ -43,4 +40,3 @@ export const heroStyles = css`
 		min-height: 70vh;
 		padding: var(--g-theme-spacing-3xl) var(--g-theme-spacing-md);
 	}
-`;

package/src/components/icon/icon.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { iconStyles } from "./icon.styles.js";
+import iconStyles from "./icon.css" with { type: "css" };
 
 export class GrantCodesIcon extends LitElement {
 	// Styles are scoped to this element: they won't conflict with styles

package/src/components/icon/{icon.styles.js → icon.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const iconStyles = css`
   :host {
     display: block;
   }
@@ -27,4 +24,3 @@ export const iconStyles = css`
   .icon ::slotted(svg:not([stoke])) {
     stroke: currentColor;
   }
-`;

package/src/components/loading/loading.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { loadingStyles } from "./loading.styles.js";
+import loadingStyles from "./loading.css" with { type: "css" };
 
 export class GrantCodesLoading extends LitElement {
 	// Styles are scoped to this element: they won't conflict with styles

package/src/components/loading/{loading.styles.js → loading.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const loadingStyles = css`
 
 :host {
   --height: 0.5rem;
@@ -40,4 +37,3 @@ export const loadingStyles = css`
   }
 }
 
-`;

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

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { logoCloudStyles } from "./logo-cloud.styles.js";
+import logoCloudStyles from "./logo-cloud.css" with { type: "css" };
 
 export class GrantCodesLogoCloud extends LitElement {
 	static styles = [logoCloudStyles];

package/src/components/logo-cloud/{logo-cloud.styles.js → logo-cloud.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const logoCloudStyles = css`
   :host {
     display: block;
   }
@@ -65,4 +62,3 @@ export const logoCloudStyles = css`
   .logo-cloud__item:not(:has(.logo-cloud__link)) .logo-cloud__logo {
     filter: none;
   }
-`;

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

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { mediaTextStyles } from "./media-text.styles.js";
+import mediaTextStyles from "./media-text.css" with { type: "css" };
 import "../button/button.js";
 
 export class GrantCodesMediaText extends LitElement {

package/src/components/media-text/{media-text.styles.js → media-text.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const mediaTextStyles = css`
   :host {
     display: block;
   }
@@ -63,4 +60,3 @@ export const mediaTextStyles = css`
     font: var(--g-theme-typography-body-lg);
     color: var(--g-theme-color-content-secondary);
   }
-`;

package/src/components/newsletter/newsletter.component.js

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { newsletterStyles } from "./newsletter.styles.js";
+import newsletterStyles from "./newsletter.css" with { type: "css" };
 import "../button/button.js";
 
 export class GrantCodesNewsletter extends LitElement {

package/src/components/newsletter/{newsletter.styles.js → newsletter.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const newsletterStyles = css`
   :host {
     display: block;
   }
@@ -86,4 +83,3 @@ export const newsletterStyles = css`
       flex-direction: column;
     }
   }
-`;

package/src/components/notice/notice.component.js

@@ -1,8 +1,8 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { cx } from "../../lib/classnames.js";
-import { noticeStyles } from "./notice.styles.js";
+import { classMap } from "lit/directives/class-map.js";
+import noticeStyles from "./notice.css" with { type: "css" };
 import { GrantCodesIcon } from "../icon/icon.component.js";
 import { AlertCircle, Info, CheckCircle2, XCircle, X } from "../../icons.js";
 
@@ -60,9 +60,13 @@ export class GrantCodesNotice extends LitElement {
 
 	render() {
 		const icon = ICONS[this.variant];
+		const classes = classMap({
+			notice: true,
+			[`notice--${this.variant}`]: true,
+		});
 
 		return html`
-			<aside class="${cx("notice", `notice--${this.variant}`)}">
+			<aside class=${classes}>
 				<grantcodes-icon class="notice__icon">${unsafeHTML(icon)}</grantcodes-icon>
 
 				<div class="notice__content">

package/src/components/notice/{notice.styles.js → notice.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const noticeStyles = css`
 
 .notice {
   display: flex;
@@ -69,4 +66,3 @@ export const noticeStyles = css`
   margin: 0;
 }
 
-`;

package/src/components/pagination/pagination.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { paginationStyles } from "./pagination.styles.js";
+import paginationStyles from "./pagination.css" with { type: "css" };
 import { GrantCodesButton } from "../button/button.component.js";
 import "../button/button.js";
 

package/src/components/pagination/{pagination.styles.js → pagination.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const paginationStyles = css`
 
 .pagination {
   display: flex;
@@ -16,4 +13,3 @@ export const paginationStyles = css`
   margin-inline-end: auto;
 }
 
-`;

package/src/components/pricing/pricing.component.js

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { pricingStyles } from "./pricing.styles.js";
+import pricingStyles from "./pricing.css" with { type: "css" };
 import "../button/button.js";
 
 export class GrantCodesPricing extends LitElement {

package/src/components/pricing/{pricing.styles.js → pricing.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const pricingStyles = css`
   :host {
     display: block;
   }
@@ -132,4 +129,3 @@ export const pricingStyles = css`
   .pricing__cta grantcodes-button {
     width: 100%;
   }
-`;

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

@@ -1,10 +1,11 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { cx } from "../../lib/classnames.js";
-import { sidebarStyles } from "./sidebar.styles.js";
+import { classMap } from "lit/directives/class-map.js";
+import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import sidebarStyles from "./sidebar.css" with { type: "css" };
 
 export class GrantCodesSidebar extends LitElement {
-	static styles = [sidebarStyles];
+	static styles = [focusRingStyles, sidebarStyles];
 
 	static properties = {
 		position: { type: String },
@@ -104,7 +105,8 @@ export class GrantCodesSidebar extends LitElement {
 	}
 
 	render() {
-		const sidebarClass = cx("sidebar", {
+		const sidebarClasses = classMap({
+			sidebar: true,
 			"sidebar--collapsed": this.collapsed,
 			[`sidebar--${this.position}`]: true,
 			"sidebar--drawer-open": this._drawerOpen,
@@ -137,7 +139,7 @@ export class GrantCodesSidebar extends LitElement {
 
 			<!-- Sidebar -->
 			<aside
-				class="${sidebarClass}"
+				class=${sidebarClasses}
 				style="--sidebar-width: ${this.width}"
 			>
 				<!-- Collapse Toggle (Desktop) -->

package/src/components/sidebar/{sidebar.styles.js → sidebar.css}

@@ -1,9 +1,3 @@
-import { css } from "lit";
-import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
-
-export const sidebarStyles = css`
-  ${focusRingStyles}
-
   *,
 	*::before,
 	*::after {
@@ -184,4 +178,3 @@ export const sidebarStyles = css`
       }
     }
   }
-`;

package/src/components/stats/stats.component.js

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { statsStyles } from "./stats.styles.js";
+import statsStyles from "./stats.css" with { type: "css" };
 
 export class GrantCodesStats extends LitElement {
 	static styles = [statsStyles];

package/src/components/stats/{stats.styles.js → stats.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const statsStyles = css`
   :host {
     display: block;
   }
@@ -63,4 +60,3 @@ export const statsStyles = css`
     font-size: var(--g-theme-typography-body-sm-font-size);
     color: var(--g-theme-color-content-secondary);
   }
-`;

package/src/components/tabs/internal/tabs-button.component.js

@@ -2,7 +2,8 @@ import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { GrantCodesTabsItem } from "./tabs-item.component.js";
-import { tabsStyles } from "../tabs.styles.js";
+import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import tabsStyles from "../tabs.css" with { type: "css" };
 
 export class GrantCodesTabsButton extends GrantCodesTabsItem {
 	static shadowRootOptions = {
@@ -10,7 +11,7 @@ export class GrantCodesTabsButton extends GrantCodesTabsItem {
 		delegatesFocus: true,
 	};
 
-	static styles = [tabsStyles];
+	static styles = [focusRingStyles, tabsStyles];
 
 	render() {
 		console.log("GrantCodesTabsButton", this, {

package/src/components/tabs/tab.component.js

@@ -1,9 +1,10 @@
 import { GrantCodesTabsItem } from "./internal/tabs-item.component.js";
 import { html } from "lit/static-html.js";
-import { tabsStyles } from "./tabs.styles.js";
+import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import tabsStyles from "./tabs.css" with { type: "css" };
 
 export class GrantCodesTab extends GrantCodesTabsItem {
-	static styles = [tabsStyles];
+	static styles = [focusRingStyles, tabsStyles];
 
 	render() {
 		return html`

package/src/components/tabs/tabs.component.js

@@ -1,7 +1,8 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { tabsStyles } from "./tabs.styles.js";
+import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import tabsStyles from "./tabs.css" with { type: "css" };
 import { GrantCodesTab } from "./tab.component.js";
 import { GrantCodesTabsButton } from "./internal/tabs-button.component.js";
 import "./internal/tabs-button.js";
@@ -11,7 +12,7 @@ export class GrantCodesTabs 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 = [tabsStyles];
+	static styles = [focusRingStyles, tabsStyles];
 
 	static properties = {
 		label: { type: String },

package/src/components/tabs/{tabs.styles.js → tabs.css}

@@ -1,9 +1,3 @@
-import { css } from "lit";
-import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
-
-export const tabsStyles = css`
-  ${focusRingStyles}
-
   *,
 	*::before,
 	*::after {
@@ -95,4 +89,3 @@ export const tabsStyles = css`
   .tabs__panel.is-active {
     display: block;
   }
-`;

package/src/components/testimonials/testimonials.component.js

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { testimonialsStyles } from "./testimonials.styles.js";
+import testimonialsStyles from "./testimonials.css" with { type: "css" };
 import "../card/card.js";
 import "../avatar/avatar.js";
 

package/src/components/testimonials/{testimonials.styles.js → testimonials.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const testimonialsStyles = css`
   :host {
     display: block;
   }
@@ -79,4 +76,3 @@ export const testimonialsStyles = css`
     font-size: var(--g-theme-typography-body-sm-font-size);
     color: var(--g-theme-color-content-secondary);
   }
-`;

package/src/components/toast/toast.component.js

@@ -1,8 +1,9 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { cx } from "../../lib/classnames.js";
-import { toastStyles } from "./toast.styles.js";
+import { classMap } from "lit/directives/class-map.js";
+import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import toastStyles from "./toast.css" with { type: "css" };
 import { GrantCodesIcon } from "../icon/icon.component.js";
 import { AlertCircle, Info, CheckCircle2, XCircle, X } from "../../icons.js";
 
@@ -15,7 +16,7 @@ const ICONS = {
 
 export class GrantCodesToast extends LitElement {
 	static dependencies = { "grancodes-icon": GrantCodesIcon };
-	static styles = [toastStyles];
+	static styles = [focusRingStyles, toastStyles];
 
 	static properties = {
 		variant: { type: String },
@@ -128,14 +129,15 @@ export class GrantCodesToast extends LitElement {
 
 	render() {
 		const icon = ICONS[this.variant];
-		const toastClass = cx("toast", {
+		const classes = classMap({
+			toast: true,
 			[`toast--${this.variant}`]: true,
 			[`toast--${this.position}`]: true,
 			"toast--visible": this._visible,
 		});
 
 		return html`
-			<div class="${toastClass}" role="status" aria-live="polite">
+			<div class=${classes} role="status" aria-live="polite">
 				<grantcodes-icon class="toast__icon">${unsafeHTML(icon)}</grantcodes-icon>
 
 				<div class="toast__content">
@@ -155,7 +157,7 @@ export class GrantCodesToast extends LitElement {
  * Toast container for managing multiple toasts
  */
 export class GrantCodesToastContainer extends LitElement {
-	static styles = [toastStyles];
+	static styles = [focusRingStyles, toastStyles];
 
 	static properties = {
 		position: { type: String },
@@ -172,12 +174,13 @@ export class GrantCodesToastContainer extends LitElement {
 	}
 
 	render() {
-		const containerClass = cx("toast-container", {
+		const classes = classMap({
+			"toast-container": true,
 			[`toast-container--${this.position}`]: true,
 		});
 
 		return html`
-			<div class="${containerClass}">
+			<div class=${classes}>
 				<slot></slot>
 			</div>
 		`;

package/src/components/toast/{toast.styles.js → toast.css}

@@ -1,9 +1,3 @@
-import { css } from "lit";
-import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
-
-export const toastStyles = css`
-  ${focusRingStyles}
-
   *,
 	*::before,
 	*::after {
@@ -202,4 +196,3 @@ export const toastStyles = css`
       }
     }
   }
-`;

package/src/components/tooltip/tooltip.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import { tooltipStyles } from "./tooltip.styles.js";
+import tooltipStyles from "./tooltip.css" with { type: "css" };
 import { generateId } from "../../lib/generate-id.js";
 
 export class GrantCodesTooltip extends LitElement {

package/src/components/tooltip/{tooltip.styles.js → tooltip.css}

@@ -1,6 +1,3 @@
-import { css } from "lit";
-
-export const tooltipStyles = css`
 
 :host,
 .tooltip,
@@ -44,12 +41,11 @@ export const tooltipStyles = css`
   
   /* Try anchor positioning first (modern browsers) */
   position-anchor: var(--tooltip-anchor, none);
-  inset-area: block-end;
   position-area: block-end;
   margin-block-start: 0.5rem;
   
   /* Fallback for browsers without anchor positioning support */
-  @supports not (inset-area: block-end) {
+  @supports not (position-area: block-end) {
     /* Traditional positioning as fallback */
     position: absolute;
     top: 100%;
@@ -75,4 +71,3 @@ export const tooltipStyles = css`
   }
 }
 
-`;