@grantcodes/ui 2.15.6 → 2.16.0

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

@@ -1,117 +1,113 @@
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-import "./feature-list.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import './feature-list.js';
 
-const { events, args, argTypes } = getStorybookHelpers(
-	"grantcodes-feature-list",
-);
+const { events, args, argTypes } = getStorybookHelpers('grantcodes-feature-list');
 
 const meta = {
-	title: "Blocks/FeatureList",
-	component: "grantcodes-feature-list",
-	args,
-	argTypes,
-	parameters: {
-		actions: {
-			handles: events,
-		},
-		layout: "fullscreen",
-	},
+  title: 'Blocks/FeatureList',
+  component: 'grantcodes-feature-list',
+  args,
+  argTypes,
+  parameters: {
+    actions: {
+      handles: events,
+    },
+    layout: 'fullscreen',
+  },
 };
 
 export default meta;
 
 const sampleItems = JSON.stringify([
-	{
-		title: "Fast by default",
-		description: "Zero-runtime CSS with design tokens baked in at build time.",
-		icon: "⚡",
-	},
-	{
-		title: "Accessible",
-		description:
-			"WAI-ARIA compliant components with keyboard navigation support.",
-		icon: "♿",
-	},
-	{
-		title: "Themeable",
-		description: "Switch between themes without touching component code.",
-		icon: "🎨",
-	},
-	{
-		title: "Framework-agnostic",
-		description: "Standard web components that work anywhere.",
-		icon: "🔌",
-	},
-	{
-		title: "Tree-shakeable",
-		description: "Import only the components you use.",
-		icon: "🌲",
-	},
-	{
-		title: "Well documented",
-		description: "Storybook stories and JSDoc for every component.",
-		icon: "📚",
-	},
+  {
+    title: 'Fast by default',
+    description: 'Zero-runtime CSS with design tokens baked in at build time.',
+    icon: '⚡',
+  },
+  {
+    title: 'Accessible',
+    description: 'WAI-ARIA compliant components with keyboard navigation support.',
+    icon: '♿',
+  },
+  {
+    title: 'Themeable',
+    description: 'Switch between themes without touching component code.',
+    icon: '🎨',
+  },
+  {
+    title: 'Framework-agnostic',
+    description: 'Standard web components that work anywhere.',
+    icon: '🔌',
+  },
+  {
+    title: 'Tree-shakeable',
+    description: 'Import only the components you use.',
+    icon: '🌲',
+  },
+  {
+    title: 'Well documented',
+    description: 'Storybook stories and JSDoc for every component.',
+    icon: '📚',
+  },
 ]);
 
 /**
  * Default 3-column feature grid with heading and subtitle.
  */
 export const Default = {
-	args: {
-		title: "Everything you need",
-		subtitle: "Built for developers who care about quality.",
-		items: sampleItems,
-		columns: 3,
-	},
+  args: {
+    title: 'Everything you need',
+    subtitle: 'Built for developers who care about quality.',
+    items: sampleItems,
+    columns: 3,
+  },
 };
 
 /**
  * Two-column layout — useful for simpler feature sets.
  */
 export const TwoColumn = {
-	args: {
-		title: "Key features",
-		items: JSON.stringify([
-			{
-				title: "Design tokens",
-				description:
-					"Consistent spacing, colour, and typography across your entire UI.",
-				icon: "🎯",
-			},
-			{
-				title: "Lit-powered",
-				description: "Lightweight reactive web components built with Lit.",
-				icon: "🔥",
-			},
-		]),
-		columns: 2,
-	},
+  args: {
+    title: 'Key features',
+    items: JSON.stringify([
+      {
+        title: 'Design tokens',
+        description: 'Consistent spacing, colour, and typography across your entire UI.',
+        icon: '🎯',
+      },
+      {
+        title: 'Lit-powered',
+        description: 'Lightweight reactive web components built with Lit.',
+        icon: '🔥',
+      },
+    ]),
+    columns: 2,
+  },
 };
 
 /**
  * Features with links on each item.
  */
 export const WithLinks = {
-	args: {
-		title: "Explore components",
-		items: JSON.stringify([
-			{
-				title: "Button",
-				description: "Primary, secondary, ghost variants.",
-				href: "/button",
-			},
-			{
-				title: "Card",
-				description: "Flexible content containers.",
-				href: "/card",
-			},
-			{
-				title: "Dialog",
-				description: "Accessible modal dialogs.",
-				href: "/dialog",
-			},
-		]),
-		columns: 3,
-	},
+  args: {
+    title: 'Explore components',
+    items: JSON.stringify([
+      {
+        title: 'Button',
+        description: 'Primary, secondary, ghost variants.',
+        href: '/button',
+      },
+      {
+        title: 'Card',
+        description: 'Flexible content containers.',
+        href: '/card',
+      },
+      {
+        title: 'Dialog',
+        description: 'Accessible modal dialogs.',
+        href: '/dialog',
+      },
+    ]),
+    columns: 3,
+  },
 };

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

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

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

@@ -1,15 +1,15 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
-import footerColumnStyles from "./footer-column.css" with { type: "css" };
+import { LitElement } from 'lit';
+import { html } from 'lit/static-html.js';
+import footerColumnStyles from './footer-column.css' with { type: 'css' };
 
 export class GrantCodesFooterColumn extends LitElement {
-	static styles = [footerColumnStyles];
+  static styles = [footerColumnStyles];
 
-	render() {
-		return html`
+  render() {
+    return html`
 			<div class="footer-column">
 				<slot></slot>
 			</div>
 		`;
-	}
+  }
 }

package/src/components/footer/footer-column.css

@@ -1,45 +1,45 @@
 :host {
-	display: block;
+  display: block;
 }
 
 .footer-column {
-	display: flex;
-	flex-direction: column;
-	gap: var(--g-spacing-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-sm);
 }
 
 ::slotted(h3) {
-	font: var(--g-typography-h6-font);
-	color: var(--g-color-content-default);
-	margin: 0 0 var(--g-spacing-sm) 0;
+  font: var(--g-typography-h6-font);
+  color: var(--g-color-content-default);
+  margin: 0 0 var(--g-spacing-sm) 0;
 }
 
 ::slotted(ul) {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	display: flex;
-	flex-direction: column;
-	gap: var(--g-spacing-sm);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-sm);
 }
 
 ::slotted(li) {
-	margin: 0;
+  margin: 0;
 }
 
 ::slotted(a) {
-	color: var(--g-color-content-subtle);
-	text-decoration: none;
-	transition: color 0.2s ease;
+  color: var(--g-color-content-subtle);
+  text-decoration: none;
+  transition: color 0.2s ease;
 }
 
 ::slotted(a:hover) {
-	color: var(--g-color-content-default);
-	text-decoration: underline;
+  color: var(--g-color-content-default);
+  text-decoration: underline;
 }
 
 ::slotted(p) {
-	margin: 0;
-	color: var(--g-color-content-subtle);
-	font: var(--g-typography-body-sm-font);
+  margin: 0;
+  color: var(--g-color-content-subtle);
+  font: var(--g-typography-body-sm-font);
 }

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

@@ -1,27 +1,27 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
-import footerStyles from "./footer.css" with { type: "css" };
-import "../container/container.js";
+import { LitElement } from 'lit';
+import { html } from 'lit/static-html.js';
+import footerStyles from './footer.css' with { type: 'css' };
+import '../container/container.js';
 
 export class GrantCodesFooter extends LitElement {
-	static styles = [footerStyles];
+  static styles = [footerStyles];
 
-	static properties = {
-		columns: { type: Number },
-	};
+  static properties = {
+    columns: { type: Number },
+  };
 
-	constructor() {
-		super();
+  constructor() {
+    super();
 
-		/**
-		 * Number of columns in the footer
-		 * @type {number}
-		 */
-		this.columns = 3;
-	}
+    /**
+     * Number of columns in the footer
+     * @type {number}
+     */
+    this.columns = 3;
+  }
 
-	render() {
-		return html`
+  render() {
+    return html`
 			<footer class="footer">
 				<grantcodes-container align="wide">
 					<div class="footer__columns" style="--footer-columns: ${this.columns}">
@@ -35,5 +35,5 @@ export class GrantCodesFooter extends LitElement {
 				</grantcodes-container>
 			</footer>
 		`;
-	}
+  }
 }

package/src/components/footer/footer.css

@@ -1,78 +1,78 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
-	container-type: inline-size;
-	container-name: footer;
+  display: block;
+  container-type: inline-size;
+  container-name: footer;
 }
 
 .footer {
-	margin-block-start: auto;
-	padding-block: var(--g-spacing-2xl) var(--g-spacing-xl);
-	border-block-start: 1px solid var(--g-color-border-subtle);
-	background-color: var(--g-color-background-subtle);
+  margin-block-start: auto;
+  padding-block: var(--g-spacing-2xl) var(--g-spacing-xl);
+  border-block-start: 1px solid var(--g-color-border-subtle);
+  background-color: var(--g-color-background-subtle);
 }
 
 .footer__columns {
-	display: grid;
-	grid-template-columns: repeat(var(--footer-columns, 3), 1fr);
-	gap: var(--g-spacing-xl);
+  display: grid;
+  grid-template-columns: repeat(var(--footer-columns, 3), 1fr);
+  gap: var(--g-spacing-xl);
 }
 
 /* Responsive grid using container queries */
 @container footer (max-width: 768px) {
-	.footer__columns {
-		grid-template-columns: repeat(2, 1fr);
-	}
+  .footer__columns {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
 @container footer (max-width: 480px) {
-	.footer__columns {
-		grid-template-columns: 1fr;
-	}
+  .footer__columns {
+    grid-template-columns: 1fr;
+  }
 }
 
 /* Bottom section (copyright, social links, etc.) */
 .footer__bottom {
-	margin-block-start: var(--g-spacing-xl);
-	padding-block-start: var(--g-spacing-xl);
-	border-block-start: 1px solid var(--g-color-border-default);
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	align-items: center;
-	gap: var(--g-spacing-md);
+  margin-block-start: var(--g-spacing-xl);
+  padding-block-start: var(--g-spacing-xl);
+  border-block-start: 1px solid var(--g-color-border-default);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--g-spacing-md);
 }
 
 @container footer (max-width: 640px) {
-	.footer__bottom {
-		flex-direction: column;
-		text-align: center;
-	}
+  .footer__bottom {
+    flex-direction: column;
+    text-align: center;
+  }
 }
 
 /* Slotted content styling */
 ::slotted(*) {
-	font: var(--g-typography-body-sm-font);
-	color: var(--g-color-content-subtle);
+  font: var(--g-typography-body-sm-font);
+  color: var(--g-color-content-subtle);
 }
 
 ::slotted(p) {
-	margin: 0;
-	line-height: 1.5;
+  margin: 0;
+  line-height: 1.5;
 }
 
 ::slotted(a) {
-	color: var(--g-color-content-subtle);
-	text-decoration: none;
-	transition: color 0.2s ease;
+  color: var(--g-color-content-subtle);
+  text-decoration: none;
+  transition: color 0.2s ease;
 }
 
 ::slotted(a:hover) {
-	color: var(--g-color-content-default);
-	text-decoration: underline;
+  color: var(--g-color-content-default);
+  text-decoration: underline;
 }

package/src/components/footer/footer.js

@@ -1,13 +1,13 @@
-import { GrantCodesFooter } from "./footer.component.js";
-import { GrantCodesFooterColumn } from "./footer-column.component.js";
+import { GrantCodesFooter } from './footer.component.js';
+import { GrantCodesFooterColumn } from './footer-column.component.js';
 
-export * from "./footer.component.js";
-export * from "./footer-column.component.js";
+export * from './footer.component.js';
+export * from './footer-column.component.js';
 export default GrantCodesFooter;
 
-if (!customElements.get("grantcodes-footer")) {
-	customElements.define("grantcodes-footer", GrantCodesFooter);
+if (!customElements.get('grantcodes-footer')) {
+  customElements.define('grantcodes-footer', GrantCodesFooter);
 }
-if (!customElements.get("grantcodes-footer-column")) {
-	customElements.define("grantcodes-footer-column", GrantCodesFooterColumn);
+if (!customElements.get('grantcodes-footer-column')) {
+  customElements.define('grantcodes-footer-column', GrantCodesFooterColumn);
 }

package/src/components/footer/footer.react.js

@@ -1,15 +1,15 @@
-import React from "react";
-import { createComponent } from "@lit/react";
-import { GrantCodesFooter, GrantCodesFooterColumn } from "./footer.js";
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { GrantCodesFooter, GrantCodesFooterColumn } from './footer.js';
 
 export const Footer = createComponent({
-	tagName: "grantcodes-footer",
-	elementClass: GrantCodesFooter,
-	react: React,
+  tagName: 'grantcodes-footer',
+  elementClass: GrantCodesFooter,
+  react: React,
 });
 
 export const FooterColumn = createComponent({
-	tagName: "grantcodes-footer-column",
-	elementClass: GrantCodesFooterColumn,
-	react: React,
+  tagName: 'grantcodes-footer-column',
+  elementClass: GrantCodesFooterColumn,
+  react: React,
 });

package/src/components/footer/footer.stories.js

@@ -1,9 +1,9 @@
-import { html } from "lit";
-import "./footer.js";
+import { html } from 'lit';
+import './footer.js';
 
 const meta = {
-	title: "Components/Footer",
-	component: "grantcodes-footer",
+  title: 'Components/Footer',
+  component: 'grantcodes-footer',
 };
 
 export default meta;
@@ -44,7 +44,7 @@ const columns = html`
  * Basic footer with three columns
  */
 export const Footer = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-footer>
 			${columns}
 
@@ -59,7 +59,7 @@ export const Footer = {
  * Footer with four columns
  */
 export const FourColumns = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-footer columns="4">
 			${columns}
 
@@ -79,7 +79,7 @@ export const FourColumns = {
  * Footer with social links in bottom section
  */
 export const WithSocialLinks = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-footer>
 			${columns}
 
@@ -105,7 +105,7 @@ export const WithSocialLinks = {
  * Simple footer with minimal content
  */
 export const Minimal = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-footer columns="1">
 			<grantcodes-footer-column>
 				<p style="text-align: center;">&copy; 2024 MyCompany. All rights reserved.</p>
@@ -123,7 +123,7 @@ export const Minimal = {
  * Footer with rich content including description
  */
 export const WithDescription = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-footer>
 			<grantcodes-footer-column>
 				<h3>MyCompany</h3>