@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/stats/stats.css

@@ -1,60 +1,60 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .stats {
-	padding-block: var(--g-spacing-3xl);
-	background: var(--g-color-background-subtle);
+  padding-block: var(--g-spacing-3xl);
+  background: var(--g-color-background-subtle);
 }
 
 .stats__title {
-	margin: 0 0 var(--g-spacing-xl);
-	font: var(--g-typography-h3-font);
-	text-align: center;
-	color: var(--g-color-content-default);
+  margin: 0 0 var(--g-spacing-xl);
+  font: var(--g-typography-h3-font);
+  text-align: center;
+  color: var(--g-color-content-default);
 }
 
 .stats__grid {
-	display: grid;
-	grid-template-columns: repeat(var(--columns, 4), 1fr);
-	gap: var(--g-spacing-xl);
-	padding: 0;
-	margin: 0;
-	list-style: none;
-	text-align: center;
+  display: grid;
+  grid-template-columns: repeat(var(--columns, 4), 1fr);
+  gap: var(--g-spacing-xl);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  text-align: center;
 }
 
 @media (max-width: 640px) {
-	.stats__grid {
-		grid-template-columns: repeat(2, 1fr);
-	}
+  .stats__grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 
 .stats__item {
-	display: flex;
-	flex-direction: column;
-	gap: var(--g-spacing-xs);
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-xs);
 }
 
 .stats__value {
-	font: var(--g-typography-h2);
-	white-space: nowrap;
-	line-height: 1;
-	color: var(--g-color-content-primary, #7c3aed);
+  font: var(--g-typography-h2);
+  white-space: nowrap;
+  line-height: 1;
+  color: var(--g-color-content-primary, #7c3aed);
 }
 
 .stats__label {
-    font: var(--g-typography-h5-font);
-	color: var(--g-color-content-default);
+  font: var(--g-typography-h5-font);
+  color: var(--g-color-content-default);
 }
 
 .stats__context {
-	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);
 }

package/src/components/stats/stats.js

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

package/src/components/stats/stats.react.js

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

package/src/components/stats/stats.stories.js

@@ -1,19 +1,19 @@
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-import "./stats.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import './stats.js';
 
-const { events, args, argTypes } = getStorybookHelpers("grantcodes-stats");
+const { events, args, argTypes } = getStorybookHelpers('grantcodes-stats');
 
 const meta = {
-	title: "Blocks/Stats",
-	component: "grantcodes-stats",
-	args,
-	argTypes,
-	parameters: {
-		actions: {
-			handles: events,
-		},
-		layout: "fullscreen",
-	},
+  title: 'Blocks/Stats',
+  component: 'grantcodes-stats',
+  args,
+  argTypes,
+  parameters: {
+    actions: {
+      handles: events,
+    },
+    layout: 'fullscreen',
+  },
 };
 
 export default meta;
@@ -22,43 +22,43 @@ export default meta;
  * Default stats block with 4 metrics.
  */
 export const Default = {
-	args: {
-		title: "By the numbers",
-		items: JSON.stringify([
-			{ value: "10k+", label: "Developers", context: "using our components" },
-			{ value: "99.9%", label: "Uptime", context: "in the last 12 months" },
-			{ value: "42ms", label: "Avg load time" },
-			{ value: "24/7", label: "Support" },
-		]),
-		columns: 4,
-	},
+  args: {
+    title: 'By the numbers',
+    items: JSON.stringify([
+      { value: '10k+', label: 'Developers', context: 'using our components' },
+      { value: '99.9%', label: 'Uptime', context: 'in the last 12 months' },
+      { value: '42ms', label: 'Avg load time' },
+      { value: '24/7', label: 'Support' },
+    ]),
+    columns: 4,
+  },
 };
 
 /**
  * Three stats — useful when you have fewer key metrics.
  */
 export const ThreeStats = {
-	args: {
-		items: JSON.stringify([
-			{ value: "500+", label: "Components" },
-			{ value: "15", label: "Themes" },
-			{ value: "0", label: "Dependencies" },
-		]),
-		columns: 3,
-	},
+  args: {
+    items: JSON.stringify([
+      { value: '500+', label: 'Components' },
+      { value: '15', label: 'Themes' },
+      { value: '0', label: 'Dependencies' },
+    ]),
+    columns: 3,
+  },
 };
 
 /**
  * Stats without a heading — embed directly into a page section.
  */
 export const NoHeading = {
-	args: {
-		items: JSON.stringify([
-			{ value: "$0", label: "Cost to start" },
-			{ value: "MIT", label: "License" },
-			{ value: "100%", label: "Open source" },
-			{ value: "∞", label: "Customisable" },
-		]),
-		columns: 4,
-	},
+  args: {
+    items: JSON.stringify([
+      { value: '$0', label: 'Cost to start' },
+      { value: 'MIT', label: 'License' },
+      { value: '100%', label: 'Open source' },
+      { value: '∞', label: 'Customisable' },
+    ]),
+    columns: 4,
+  },
 };

package/src/components/tabs/index.js

@@ -1,2 +1,2 @@
-export * from "./tabs.js";
-export * from "./tab.js";
+export * from './tab.js';
+export * from './tabs.js';

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

@@ -1,42 +1,31 @@
-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 focusRingStyles from "../../../lib/styles/focus-ring.css" with {
-	type: "css",
-};
-import tabsStyles from "../tabs.css" with { type: "css" };
+import { LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { html } from 'lit/static-html.js';
+import focusRingStyles from '../../../lib/styles/focus-ring.css' with { type: 'css' };
+import tabsStyles from '../tabs.css' with { type: 'css' };
+import { GrantCodesTabsItem } from './tabs-item.component.js';
 
 export class GrantCodesTabsButton extends GrantCodesTabsItem {
-	static shadowRootOptions = {
-		...LitElement.shadowRootOptions,
-		delegatesFocus: true,
-	};
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
 
-	static styles = [focusRingStyles, tabsStyles];
+  static styles = [focusRingStyles, tabsStyles];
 
-	render() {
-		console.log("GrantCodesTabsButton", this, {
-			active: this.active,
-			label: this.label,
-			index: this.index,
-			containerId: this.containerId,
-			buttonId: this.buttonId,
-			panelId: this.panelId,
-			content: this.content,
-		});
-		return html`
+  render() {
+    return html`
 			<button
 				id="${this.buttonId}"
 				type="button"
 				role="tab"
 				aria-selected=${this.active}
 				aria-controls="${this.panelId}"
-				tabindex=${ifDefined(this.active ? undefined : "-1")} 
-				class="tabs__tab focus-ring ${this.active ? "is-active" : ""}"
+				tabindex=${ifDefined(this.active ? undefined : '-1')}
+				class="tabs__tab focus-ring ${this.active ? 'is-active' : ''}"
 			>
 				<span>${this.label}</span>
 			</button>
 		`;
-	}
+  }
 }

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

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

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

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

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

@@ -1,5 +1,5 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
+import { LitElement } from 'lit';
+import { html } from 'lit/static-html.js';
 
 /**
  * Internal shared base class for tabs primitives.
@@ -7,38 +7,38 @@ import { html } from "lit/static-html.js";
  * @tag grantcodes-tabs-item
  */
 export class GrantCodesTabsItem extends LitElement {
-	static properties = {
-		active: { type: Boolean },
-		label: { type: String },
-		index: { type: Number },
-		containerId: { type: String },
-		buttonId: { type: String, reflect: true },
-		panelId: { type: String },
-		content: { type: String },
-	};
+  static properties = {
+    active: { type: Boolean },
+    label: { type: String },
+    index: { type: Number },
+    containerId: { type: String },
+    buttonId: { type: String, reflect: true },
+    panelId: { type: String },
+    content: { type: String },
+  };
 
-	constructor() {
-		super();
+  constructor() {
+    super();
 
-		this.active = false;
-		this.label = "";
-		this.index = -1;
-		this.containerId = "";
-	}
+    this.active = false;
+    this.label = '';
+    this.index = -1;
+    this.containerId = '';
+  }
 
-	get buttonId() {
-		return `${this.containerId}-button-${this.index.toString()}`;
-	}
+  get buttonId() {
+    return `${this.containerId}-button-${this.index.toString()}`;
+  }
 
-	get panelId() {
-		return `${this.containerId}-panel-${this.index.toString()}`;
-	}
+  get panelId() {
+    return `${this.containerId}-panel-${this.index.toString()}`;
+  }
 
-	get content() {
-		return this.label;
-	}
+  get content() {
+    return this.label;
+  }
 
-	render() {
-		return html``;
-	}
+  render() {
+    return html``;
+  }
 }

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

@@ -1,23 +1,21 @@
-import { GrantCodesTabsItem } from "./internal/tabs-item.component.js";
-import { html } from "lit/static-html.js";
-import focusRingStyles from "../../lib/styles/focus-ring.css" with {
-	type: "css",
-};
-import tabsStyles from "./tabs.css" with { type: "css" };
+import { html } from 'lit/static-html.js';
+import focusRingStyles from '../../lib/styles/focus-ring.css' with { type: 'css' };
+import { GrantCodesTabsItem } from './internal/tabs-item.component.js';
+import tabsStyles from './tabs.css' with { type: 'css' };
 
 export class GrantCodesTab extends GrantCodesTabsItem {
-	static styles = [focusRingStyles, tabsStyles];
+  static styles = [focusRingStyles, tabsStyles];
 
-	render() {
-		return html`
+  render() {
+    return html`
 			<div
 				id="${this.panelId}"
 				role="tabpanel"
 				aria-labelledby="${this.buttonId}"
-				class="tabs__panel ${this.active ? "is-active" : ""}"
+				class="tabs__panel ${this.active ? 'is-active' : ''}"
 			>
 				<slot></slot>
 			</div>
 		`;
-	}
+  }
 }

package/src/components/tabs/tab.js

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

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

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