@grantcodes/ui 2.5.1 → 2.7.0

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

@@ -0,0 +1,135 @@
+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)";
+
+export class GrantCodesMap extends LitElement {
+	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 },
+	};
+
+	constructor() {
+		super();
+		this.lat = "";
+		this.lng = "";
+		this.zoom = 14;
+		this.label = "Map";
+		this["directions-url"] = "";
+		this.height = "";
+		this._darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		this._onSchemeChange = () => this._updateFilter();
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		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);
+	}
+
+	_isDark() {
+		if (document.documentElement.classList.contains("dark")) return true;
+		if (document.documentElement.classList.contains("light")) return false;
+		return this._darkQuery.matches;
+	}
+
+	_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`;
+	}
+
+	/**
+	 * 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;
+		}
+
+		const heightStyle = this.height
+			? `--map-height: ${this.height}`
+			: "";
+
+		return html`
+			<div class="map" style="${heightStyle}">
+				<iframe
+					class="map__iframe"
+					src="${this._embedUrl}"
+					title="${this.label}"
+					loading="lazy"
+					referrerpolicy="no-referrer"
+					frameborder="0"
+					seamless
+				></iframe>
+				${
+					this["directions-url"]
+						? html`<a
+								class="map__directions"
+								href="${this["directions-url"]}"
+								target="_blank"
+								rel="noopener noreferrer"
+							>Get directions</a>`
+						: nothing
+				}
+			</div>
+		`;
+	}
+}

package/src/components/map/map.css

@@ -0,0 +1,41 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :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__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-brand, #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;
+  }

package/src/components/map/map.js

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

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

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

package/src/components/map/map.stories.js

@@ -0,0 +1,68 @@
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import "./map.js";
+
+const { events, args, argTypes } = getStorybookHelpers("grantcodes-map");
+
+const meta = {
+	title: "Components/Map",
+	component: "grantcodes-map",
+	args,
+	argTypes,
+	parameters: {
+		actions: {
+			handles: events,
+		},
+	},
+};
+
+export default meta;
+
+/**
+ * Default map showing a location in Granollers, Catalonia.
+ */
+export const Default = {
+	args: {
+		lat: "41.648747",
+		lng: "2.161975",
+		zoom: 14,
+		label: "Granollers, Catalonia",
+	},
+};
+
+/**
+ * Map with a directions link below.
+ */
+export const WithDirections = {
+	args: {
+		lat: "41.648747",
+		lng: "2.161975",
+		zoom: 14,
+		label: "Granollers, Catalonia",
+		"directions-url": "https://maps.google.com/?q=41.648747,2.161975",
+	},
+};
+
+/**
+ * Map with a custom height.
+ */
+export const CustomHeight = {
+	args: {
+		lat: "48.8566",
+		lng: "2.3522",
+		zoom: 12,
+		label: "Paris, France",
+		height: "600px",
+	},
+};
+
+/**
+ * Zoomed-out world view.
+ */
+export const ZoomedOut = {
+	args: {
+		lat: "0",
+		lng: "0",
+		zoom: 2,
+		label: "World map",
+	},
+};

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

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     display: block;
   }

package/src/components/newsletter/newsletter.css

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     display: block;
   }

package/src/components/notice/notice.css

@@ -1,3 +1,8 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 .notice {
   display: flex;

package/src/components/pagination/pagination.css

@@ -1,3 +1,8 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 .pagination {
   display: flex;

package/src/components/pricing/pricing.css

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     display: block;
   }

package/src/components/stats/stats.css

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     display: block;
   }

package/src/components/testimonials/testimonials.css

@@ -1,3 +1,9 @@
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   :host {
     display: block;
   }

package/src/components/tooltip/tooltip.css

@@ -1,3 +1,8 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 :host,
 .tooltip,

package/src/css/all.css

@@ -1,6 +1,8 @@
+/* Basically the same as base.css but with component styles included */
+
 @layer reset, base, utilities, components;
 
-@import "./base.css" layer(reset);
+@import "./reset.css" layer(reset);
 @import "./typography.css" layer(base);
 @import "./elements.css" layer(base);
 @import "./util/index.css" layer(utilities);

package/src/css/base.css

@@ -1,248 +1,7 @@
-/* CSS reset — inspired by sanitize.css (https://csstools.github.io/sanitize.css/)
-   Inlined to avoid broken relative node_modules paths when installed externally. */
+@layer reset, base, utilities;
 
-/* Box sizing and background */
-*,
-::before,
-::after {
-	box-sizing: border-box;
-	background-repeat: no-repeat;
-}
-
-::before,
-::after {
-	text-decoration: inherit;
-	vertical-align: inherit;
-}
-
-/* Root defaults */
-:where(:root) {
-	cursor: default;
-	line-height: 1.5;
-	overflow-wrap: break-word;
-	-moz-tab-size: 4;
-	tab-size: 4;
-	-webkit-tap-highlight-color: transparent;
-	-webkit-text-size-adjust: 100%;
-}
-
-html {
-    font: var(--g-theme-typography-body);
-}
-
-code,
-kbd,
-samp,
-pre {
-	font-family:
-		ui-monospace,
-		"Menlo",
-		"Consolas",
-		"Roboto Mono",
-		"Ubuntu Monospace",
-		"Noto Mono",
-		"Oxygen Mono",
-		"Liberation Mono",
-		monospace,
-		"Apple Color Emoji",
-		"Segoe UI Emoji",
-		"Segoe UI Symbol",
-		"Noto Color Emoji";
-}
-
-/* Sections */
-:where(body) {
-	margin: 0;
-}
-
-/* Grouping */
-:where(dl, ol, ul) :where(dl, ol, ul) {
-	margin: 0;
-}
-
-:where(hr) {
-	color: inherit;
-	height: 0;
-}
-
-:where(nav) :where(ol, ul) {
-	list-style-type: none;
-	padding: 0;
-}
-
-/* Prevent VoiceOver from ignoring list semantics in Safari */
-:where(nav li)::before {
-	content: "\200B";
-	float: left;
-}
-
-:where(pre) {
-	font-size: 1em;
-	overflow: auto;
-}
-
-/* Text-level semantics */
-:where(abbr[title]) {
-	text-decoration: underline dotted;
-}
-
-:where(b, strong) {
-	font-weight: bolder;
-}
-
-:where(code, kbd, samp) {
-	font-size: 1em;
-}
-
-:where(small) {
-	font-size: 80%;
-}
-
-/* Embedded content */
-:where(audio, canvas, iframe, img, svg, video) {
-	vertical-align: middle;
-}
-
-:where(iframe) {
-	border-style: none;
-}
-
-:where(svg:not([fill])) {
-	fill: currentColor;
-}
-
-/* Tabular data */
-:where(table) {
-	border-collapse: collapse;
-	border-color: inherit;
-	text-indent: 0;
-}
-
-/* Forms — baseline normalisation */
-:where(button, input, select) {
-	margin: 0;
-}
-
-:where(button, [type="button" i], [type="reset" i], [type="submit" i]) {
-	-webkit-appearance: button;
-}
-
-:where(fieldset) {
-	border: 1px solid #a0a0a0;
-}
-
-:where(progress) {
-	vertical-align: baseline;
-}
-
-:where(textarea) {
-	margin: 0;
-	resize: vertical;
-}
-
-:where([type="search" i]) {
-	-webkit-appearance: textfield;
-	outline-offset: -2px;
-}
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-	height: auto;
-}
-
-::-webkit-input-placeholder {
-	color: inherit;
-	opacity: 0.54;
-}
-
-::-webkit-search-decoration {
-	-webkit-appearance: none;
-}
-
-::-webkit-file-upload-button {
-	-webkit-appearance: button;
-	font: inherit;
-}
-
-/* Forms — typography and colour inheritance */
-:where(button, input, select, textarea) {
-	background-color: transparent;
-	border: 1px solid WindowFrame;
-	color: inherit;
-	font: inherit;
-	letter-spacing: inherit;
-	padding: 0.25em 0.375em;
-}
-
-:where([type="color" i], [type="range" i]) {
-	border-width: 0;
-	padding: 0;
-}
-
-/* Interactive */
-:where(details > summary:first-of-type) {
-	display: list-item;
-}
-
-/* Accessibility */
-:where([aria-busy="true" i]) {
-	cursor: progress;
-}
-
-:where([aria-controls]) {
-	cursor: pointer;
-}
-
-:where([aria-disabled="true" i], [disabled]) {
-	cursor: not-allowed;
-}
-
-:where([aria-hidden="false" i][hidden]) {
-	display: initial;
-}
-
-:where([aria-hidden="false" i][hidden]:not(:focus)) {
-	clip: rect(0, 0, 0, 0);
-	position: absolute;
-}
-
-/* Reduced motion — !important is required here to override any animation/transition regardless of specificity */
-@media (prefers-reduced-motion: reduce) {
-	*,
-	::before,
-	::after {
-		animation-delay: -1ms !important;
-		animation-duration: 1ms !important;
-		animation-iteration-count: 1 !important;
-		background-attachment: initial !important;
-		scroll-behavior: auto !important;
-		transition-delay: 0s !important;
-		transition-duration: 0s !important;
-	}
-}
-
-/* Design tokens are provided by @grantcodes/style-dictionary and applied to :root */
-:root {
-	color-scheme: light dark;
-	--grantcodes-ui-theme: "none";
-	background-color: var(--g-theme-color-background-default);
-	color: var(--g-theme-color-content-default);
-	fill: currentColor;
-}
-
-/* Allow transitioning auto */
-:root {
-	@supports (interpolate-size: allow-keywords) {
-		interpolate-size: allow-keywords;
-	}
-}
-
-::selection {
-	background-color: var(--g-theme-color-background-brand);
-}
-
-/* Default backdrop styles */
-::backdrop {
-	background-color: rgba(0, 0, 0, 0.4);
-	backdrop-filter: blur(6px);
-}
+@import "./reset.css" layer(reset);
+@import "./typography.css" layer(base);
+@import "./elements.css" layer(base);
+@import "./util/index.css" layer(utilities);
+@import "./helpers.css" layer(utilities);

package/src/css/elements/a.css

@@ -1,4 +1,4 @@
-a {
+:where(a) {
 	color: var(--g-theme-link-color-content-default);
 	text-decoration: underline;
 	transition:
@@ -6,25 +6,25 @@ a {
 		opacity 0.2s;
 }
 
-a:visited {
+:where(a:visited) {
 	color: var(--g-theme-link-color-content-visited);
 	opacity: 0.6;
 }
 
-a:hover,
-a:focus-visible {
+:where(a:hover),
+:where(a:focus-visible) {
 	opacity: 1;
 	color: var(--g-theme-link-color-content-hover);
 	text-decoration: underline wavy;
 }
 
-a:active {
+:where(a:active) {
 	color: var(--g-theme-link-color-content-active);
 }
 
 /* External links - special styling for links opening in new windows */
-a[target="_blank"]::after,
-a[rel~="external"]::after {
+:where(a[target="_blank"]::after),
+:where(a[rel~="external"]::after) {
 	content: "↗";
 	display: inline-block;
 	margin-inline-start: 0.25em;
@@ -38,7 +38,7 @@ a[rel~="external"]::after {
 /* biome-ignore lint/correctness/noUnknownPseudoClass: :external is a future CSS feature */
 @supports selector(:external) {
 	/* biome-ignore lint/correctness/noUnknownPseudoClass: :external is a future CSS feature */
-	a:external::after {
+	:where(a:external::after) {
 		content: "↗";
 		display: inline-block;
 		margin-inline-start: 0.25em;