@grantcodes/ui 2.15.6 → 2.16.0

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

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

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

@@ -1,6 +1,6 @@
-import { GrantCodesLogoCloud } from "./logo-cloud.component.js";
+import { GrantCodesLogoCloud } from './logo-cloud.component.js';
 
-export * from "./logo-cloud.component.js";
+export * from './logo-cloud.component.js';
 export default GrantCodesLogoCloud;
 
-customElements.define("grantcodes-logo-cloud", GrantCodesLogoCloud);
+customElements.define('grantcodes-logo-cloud', GrantCodesLogoCloud);

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 { createComponent } from '@lit/react';
+import React from 'react';
+import { GrantCodesLogoCloud } from './logo-cloud.js';
 
 export const LogoCloud = createComponent({
-	tagName: "grantcodes-logo-cloud",
-	elementClass: GrantCodesLogoCloud,
-	react: React,
+  tagName: 'grantcodes-logo-cloud',
+  elementClass: GrantCodesLogoCloud,
+  react: React,
 });

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

@@ -1,107 +1,107 @@
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-import "./logo-cloud.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import './logo-cloud.js';
 
-const { events, args, argTypes } = getStorybookHelpers("grantcodes-logo-cloud");
+const { events, args, argTypes } = getStorybookHelpers('grantcodes-logo-cloud');
 
 const meta = {
-	title: "Blocks/LogoCloud",
-	component: "grantcodes-logo-cloud",
-	args,
-	argTypes,
-	parameters: {
-		actions: {
-			handles: events,
-		},
-		layout: "fullscreen",
-	},
+  title: 'Blocks/LogoCloud',
+  component: 'grantcodes-logo-cloud',
+  args,
+  argTypes,
+  parameters: {
+    actions: {
+      handles: events,
+    },
+    layout: 'fullscreen',
+  },
 };
 
 export default meta;
 
 const sampleLogos = JSON.stringify([
-	{
-		name: "Acme Corp",
-		src: "https://placehold.co/120x40?text=Acme",
-		alt: "Acme Corp logo",
-	},
-	{
-		name: "Globex",
-		src: "https://placehold.co/120x40?text=Globex",
-		alt: "Globex logo",
-	},
-	{
-		name: "Initech",
-		src: "https://placehold.co/120x40?text=Initech",
-		alt: "Initech logo",
-	},
-	{
-		name: "Umbrella",
-		src: "https://placehold.co/120x40?text=Umbrella",
-		alt: "Umbrella Corp logo",
-	},
-	{
-		name: "Hooli",
-		src: "https://placehold.co/120x40?text=Hooli",
-		alt: "Hooli logo",
-	},
+  {
+    name: 'Acme Corp',
+    src: 'https://placehold.co/120x40?text=Acme',
+    alt: 'Acme Corp logo',
+  },
+  {
+    name: 'Globex',
+    src: 'https://placehold.co/120x40?text=Globex',
+    alt: 'Globex logo',
+  },
+  {
+    name: 'Initech',
+    src: 'https://placehold.co/120x40?text=Initech',
+    alt: 'Initech logo',
+  },
+  {
+    name: 'Umbrella',
+    src: 'https://placehold.co/120x40?text=Umbrella',
+    alt: 'Umbrella Corp logo',
+  },
+  {
+    name: 'Hooli',
+    src: 'https://placehold.co/120x40?text=Hooli',
+    alt: 'Hooli logo',
+  },
 ]);
 
 /**
  * Logo cloud with a label and linked logos.
  */
 export const Default = {
-	args: {
-		title: "Trusted by teams at",
-		logos: JSON.stringify([
-			{
-				name: "Acme Corp",
-				src: "https://placehold.co/120x40?text=Acme",
-				alt: "Acme Corp logo",
-				href: "https://example.com",
-			},
-			{
-				name: "Globex",
-				src: "https://placehold.co/120x40?text=Globex",
-				alt: "Globex logo",
-				href: "https://example.com",
-			},
-			{
-				name: "Initech",
-				src: "https://placehold.co/120x40?text=Initech",
-				alt: "Initech logo",
-				href: "https://example.com",
-			},
-			{
-				name: "Umbrella",
-				src: "https://placehold.co/120x40?text=Umbrella",
-				alt: "Umbrella Corp logo",
-				href: "https://example.com",
-			},
-			{
-				name: "Hooli",
-				src: "https://placehold.co/120x40?text=Hooli",
-				alt: "Hooli logo",
-				href: "https://example.com",
-			},
-		]),
-	},
+  args: {
+    title: 'Trusted by teams at',
+    logos: JSON.stringify([
+      {
+        name: 'Acme Corp',
+        src: 'https://placehold.co/120x40?text=Acme',
+        alt: 'Acme Corp logo',
+        href: 'https://example.com',
+      },
+      {
+        name: 'Globex',
+        src: 'https://placehold.co/120x40?text=Globex',
+        alt: 'Globex logo',
+        href: 'https://example.com',
+      },
+      {
+        name: 'Initech',
+        src: 'https://placehold.co/120x40?text=Initech',
+        alt: 'Initech logo',
+        href: 'https://example.com',
+      },
+      {
+        name: 'Umbrella',
+        src: 'https://placehold.co/120x40?text=Umbrella',
+        alt: 'Umbrella Corp logo',
+        href: 'https://example.com',
+      },
+      {
+        name: 'Hooli',
+        src: 'https://placehold.co/120x40?text=Hooli',
+        alt: 'Hooli logo',
+        href: 'https://example.com',
+      },
+    ]),
+  },
 };
 
 /**
  * Logo cloud without a title heading.
  */
 export const NoTitle = {
-	args: {
-		logos: sampleLogos,
-	},
+  args: {
+    logos: sampleLogos,
+  },
 };
 
 /**
  * Logo cloud with unlinked logos — read-only brand display.
  */
 export const Unlinked = {
-	args: {
-		title: "Built with",
-		logos: sampleLogos,
-	},
+  args: {
+    title: 'Built with',
+    logos: sampleLogos,
+  },
 };

package/src/components/map/index.js

@@ -1 +1 @@
-export * from "./map.js";
+export * from './map.js';

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

@@ -1,118 +1,114 @@
-import { LitElement, html, nothing } from "lit";
-import mapStyles from "./map.css" with { type: "css" };
+import { html, LitElement, 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];
+  static styles = [mapStyles];
 
-	static properties = {
-		/**
-		 * Latitude coordinate.
-		 * @type {string}
-		 */
-		lat: { type: String },
-		/**
-		 * Longitude coordinate.
-		 * @type {string}
-		 */
-		lng: { type: String },
-		/**
-		 * Map zoom level (1-18).
-		 * @type {number}
-		 */
-		zoom: { type: Number },
-		/**
-		 * Accessible label for the map iframe.
-		 * @type {string}
-		 */
-		label: { type: String },
-		/**
-		 * URL for a "Get directions" link below the map.
-		 * @type {string}
-		 */
-		"directions-url": { type: String, attribute: "directions-url" },
-		/**
-		 * Height of the map. Accepts any CSS length value.
-		 * @type {string}
-		 */
-		height: { type: String },
-	};
+  static properties = {
+    /**
+     * Latitude coordinate.
+     * @type {string}
+     */
+    lat: { type: String },
+    /**
+     * Longitude coordinate.
+     * @type {string}
+     */
+    lng: { type: String },
+    /**
+     * Map zoom level (1-18).
+     * @type {number}
+     */
+    zoom: { type: Number },
+    /**
+     * Accessible label for the map iframe.
+     * @type {string}
+     */
+    label: { type: String },
+    /**
+     * URL for a "Get directions" link below the map.
+     * @type {string}
+     */
+    'directions-url': { type: String, attribute: 'directions-url' },
+    /**
+     * Height of the map. Accepts any CSS length value.
+     * @type {string}
+     */
+    height: { type: String },
+  };
 
-	constructor() {
-		super();
-		this.lat = "";
-		this.lng = "";
-		this.zoom = 14;
-		this.label = "Map";
-		this["directions-url"] = "";
-		this.height = "";
-		this._darkQuery = null;
-		this._onSchemeChange = () => this._updateFilter();
-		if (typeof window !== "undefined") {
-			this._darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
-		}
-	}
+  constructor() {
+    super();
+    this.lat = '';
+    this.lng = '';
+    this.zoom = 14;
+    this.label = 'Map';
+    this['directions-url'] = '';
+    this.height = '';
+    this._darkQuery = null;
+    this._onSchemeChange = () => this._updateFilter();
+    if (typeof window !== 'undefined') {
+      this._darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    }
+  }
 
-	connectedCallback() {
-		super.connectedCallback();
-		if (typeof window === "undefined") return;
-		this._observer = new MutationObserver(() => this._updateFilter());
-		this._observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: ["class"],
-		});
-		this._darkQuery?.addEventListener("change", this._onSchemeChange);
-		this._updateFilter();
-	}
+  connectedCallback() {
+    super.connectedCallback();
+    if (typeof window === 'undefined') return;
+    this._observer = new MutationObserver(() => this._updateFilter());
+    this._observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+    this._darkQuery?.addEventListener('change', this._onSchemeChange);
+    this._updateFilter();
+  }
 
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._observer?.disconnect();
-		this._darkQuery?.removeEventListener("change", this._onSchemeChange);
-	}
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._observer?.disconnect();
+    this._darkQuery?.removeEventListener('change', this._onSchemeChange);
+  }
 
-	_isDark() {
-		if (typeof document === "undefined") return false;
-		if (document.documentElement.classList.contains("dark")) return true;
-		if (document.documentElement.classList.contains("light")) return false;
-		return this._darkQuery?.matches ?? false;
-	}
+  _isDark() {
+    if (typeof document === 'undefined') return false;
+    if (document.documentElement.classList.contains('dark')) return true;
+    if (document.documentElement.classList.contains('light')) return false;
+    return this._darkQuery?.matches ?? false;
+  }
 
-	_updateFilter() {
-		this.style.setProperty(
-			"--g-map-filter",
-			this._isDark() ? DARK_FILTER : "none",
-		);
-	}
+  _updateFilter() {
+    this.style.setProperty('--g-map-filter', this._isDark() ? DARK_FILTER : 'none');
+  }
 
-	get _embedUrl() {
-		if (!this.lat || !this.lng) return "";
-		const bbox = this._getBoundingBox(
-			Number.parseFloat(this.lat),
-			Number.parseFloat(this.lng),
-			this.zoom,
-		);
-		return `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&marker=${this.lat},${this.lng}&layers=mapnik`;
-	}
+  get _embedUrl() {
+    if (!this.lat || !this.lng) return '';
+    const bbox = this._getBoundingBox(
+      Number.parseFloat(this.lat),
+      Number.parseFloat(this.lng),
+      this.zoom,
+    );
+    return `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&marker=${this.lat},${this.lng}&layers=mapnik`;
+  }
 
-	/**
-	 * Calculate a bounding box around a point for the given zoom level.
-	 */
-	_getBoundingBox(lat, lng, zoom) {
-		const spread = 360 / 2 ** zoom;
-		return `${lng - spread},${lat - spread},${lng + spread},${lat + spread}`;
-	}
+  /**
+   * Calculate a bounding box around a point for the given zoom level.
+   */
+  _getBoundingBox(lat, lng, zoom) {
+    const spread = 360 / 2 ** zoom;
+    return `${lng - spread},${lat - spread},${lng + spread},${lat + spread}`;
+  }
 
-	render() {
-		if (!this.lat || !this.lng) {
-			return nothing;
-		}
+  render() {
+    if (!this.lat || !this.lng) {
+      return nothing;
+    }
 
-		const heightStyle = this.height ? `--map-height: ${this.height}` : "";
+    const heightStyle = this.height ? `--map-height: ${this.height}` : '';
 
-		return html`
+    return html`
 			<div class="map" style="${heightStyle}">
 				<iframe
 					class="map__iframe"
@@ -124,16 +120,16 @@ export class GrantCodesMap extends LitElement {
 					seamless
 				></iframe>
 				${
-					this["directions-url"]
-						? html`<a
+          this['directions-url']
+            ? html`<a
 								class="map__directions"
-								href="${this["directions-url"]}"
+								href="${this['directions-url']}"
 								target="_blank"
 								rel="noopener noreferrer"
 							>Get directions</a>`
-						: nothing
-				}
+            : nothing
+        }
 			</div>
 		`;
-	}
+  }
 }

package/src/components/map/map.css

@@ -1,41 +1,41 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .map {
-	position: relative;
-	border: 1px solid var(--g-color-border-default);
-	border-radius: var(--g-border-radius-md, 0.5rem);
-	overflow: hidden;
+  position: relative;
+  border: 1px solid var(--g-color-border-default);
+  border-radius: var(--g-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);
+  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-spacing-sm) var(--g-spacing-md);
-	font-size: var(--g-typography-body-sm-font-size);
-	color: var(--g-color-content-primary, #7c3aed);
-	text-decoration: none;
-	border-block-start: 1px solid var(--g-color-border-default);
-	background: var(--g-color-background-subtle);
-	transition: background-color 0.2s ease;
+  display: block;
+  padding: var(--g-spacing-sm) var(--g-spacing-md);
+  font-size: var(--g-typography-body-sm-font-size);
+  color: var(--g-color-content-primary, #7c3aed);
+  text-decoration: none;
+  border-block-start: 1px solid var(--g-color-border-default);
+  background: var(--g-color-background-subtle);
+  transition: background-color 0.2s ease;
 }
 
 .map__directions:hover {
-	background: var(--g-color-background-subtle-hover);
-	text-decoration: underline;
+  background: var(--g-color-background-subtle-hover);
+  text-decoration: underline;
 }

package/src/components/map/map.js

@@ -1,6 +1,6 @@
-import { GrantCodesMap } from "./map.component.js";
+import { GrantCodesMap } from './map.component.js';
 
-export * from "./map.component.js";
+export * from './map.component.js';
 export default GrantCodesMap;
 
-customElements.define("grantcodes-map", GrantCodesMap);
+customElements.define('grantcodes-map', GrantCodesMap);

package/src/components/map/map.react.js

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