@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/button/button.component.js

@@ -1,103 +1,101 @@
-import { html, LitElement } from "lit";
-import focusRingStyles from "../../lib/styles/focus-ring.css" with {
-	type: "css",
-};
-import buttonStyles from "./button.css" with { type: "css" };
+import { html, LitElement } from 'lit';
+import focusRingStyles from '../../lib/styles/focus-ring.css' with { type: 'css' };
+import buttonStyles from './button.css' with { type: 'css' };
 
 export class GrantCodesButton 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 = [focusRingStyles, buttonStyles];
-
-	static formAssociated = true;
-
-	static properties = {
-		href: { type: String },
-		type: { type: String },
-		name: { type: String },
-		value: { type: String },
-		disabled: { type: Boolean, reflect: true },
-		form: { type: String, reflect: true },
-	};
-
-	constructor() {
-		super();
-
-		this.href = "";
-		this.type = "button";
-		this.name = "";
-		this.value = "";
-		// Do NOT set form="" — an empty form attribute overrides ancestor form association
-		this._fieldsetDisabled = false;
-
-		// Attach ElementInternals for form participation.
-		// try/catch because happy-dom (DOM-shim test env) may not support attachInternals()
-		try {
-			this.internals = this.attachInternals();
-		} catch (e) {
-			this.internals = null;
-		}
-		this.disabled = false;
-	}
-
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		if (this.internals) {
-			if (changedProperties.has("name") || changedProperties.has("value")) {
-				this.internals.setFormValue(this.name ? this.value : null);
-			}
-		}
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-		this.addEventListener("click", this._handleFormClick);
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener("click", this._handleFormClick);
-	}
-
-	_handleFormClick(e) {
-		// href mode renders a link — do not intercept form actions
-		if (this.href) return;
-		// Only handle form actions when we have internals and are inside a form
-		if (!this.internals || !this.internals.form || this.disabled) return;
-
-		const t = this.type.toLowerCase();
-		if (t === "submit") {
-			this.internals.form.requestSubmit();
-		} else if (t === "reset") {
-			this.internals.form.reset();
-		}
-		// type === "button" or any other value: no form action (default no-op)
-	}
-
-	formDisabledCallback(disabled) {
-		this._fieldsetDisabled = disabled;
-		this.requestUpdate();
-	}
-
-	formResetCallback() {
-		// Called by the browser when the associated form is reset.
-		// Reset the value to an empty string (default state).
-		// If a future version tracks an initial value, restore it here.
-		this.value = "";
-	}
-
-	// The render() method is called any time reactive properties change.
-	// Return HTML in a string template literal tagged with the `html`
-	// tag function to describe the component's internal DOM.
-	// Expressions can set attribute values, property values, event handlers,
-	// and child nodes/text.
-	/** @returns {import('lit').TemplateResult} */
-	render() {
-		const isLink = !!this.href;
-
-		if (isLink) {
-			return html`
+  // 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 = [focusRingStyles, buttonStyles];
+
+  static formAssociated = true;
+
+  static properties = {
+    href: { type: String },
+    type: { type: String },
+    name: { type: String },
+    value: { type: String },
+    disabled: { type: Boolean, reflect: true },
+    form: { type: String, reflect: true },
+  };
+
+  constructor() {
+    super();
+
+    this.href = '';
+    this.type = 'button';
+    this.name = '';
+    this.value = '';
+    // Do NOT set form="" — an empty form attribute overrides ancestor form association
+    this._fieldsetDisabled = false;
+
+    // Attach ElementInternals for form participation.
+    // try/catch because happy-dom (DOM-shim test env) may not support attachInternals()
+    try {
+      this.internals = this.attachInternals();
+    } catch (e) {
+      this.internals = null;
+    }
+    this.disabled = false;
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (this.internals) {
+      if (changedProperties.has('name') || changedProperties.has('value')) {
+        this.internals.setFormValue(this.name ? this.value : null);
+      }
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this._handleFormClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this._handleFormClick);
+  }
+
+  _handleFormClick(e) {
+    // href mode renders a link — do not intercept form actions
+    if (this.href) return;
+    // Only handle form actions when we have internals and are inside a form
+    if (!this.internals || !this.internals.form || this.disabled) return;
+
+    const t = this.type.toLowerCase();
+    if (t === 'submit') {
+      this.internals.form.requestSubmit();
+    } else if (t === 'reset') {
+      this.internals.form.reset();
+    }
+    // type === "button" or any other value: no form action (default no-op)
+  }
+
+  formDisabledCallback(disabled) {
+    this._fieldsetDisabled = disabled;
+    this.requestUpdate();
+  }
+
+  formResetCallback() {
+    // Called by the browser when the associated form is reset.
+    // Reset the value to an empty string (default state).
+    // If a future version tracks an initial value, restore it here.
+    this.value = '';
+  }
+
+  // The render() method is called any time reactive properties change.
+  // Return HTML in a string template literal tagged with the `html`
+  // tag function to describe the component's internal DOM.
+  // Expressions can set attribute values, property values, event handlers,
+  // and child nodes/text.
+  /** @returns {import('lit').TemplateResult} */
+  render() {
+    const isLink = !!this.href;
+
+    if (isLink) {
+      return html`
 				<a
 					class="button focus-ring"
 					href=${this.href}
@@ -106,18 +104,18 @@ export class GrantCodesButton extends LitElement {
 					<span><slot></slot></span>
 				</a>
 			`;
-		}
+    }
 
-		return html`
+    return html`
 			<button
 				class="button focus-ring"
 				type="button"
-				name=${this.name ?? ""}
-				value=${this.value ?? ""}
+				name=${this.name ?? ''}
+				value=${this.value ?? ''}
 				?disabled=${this.disabled || this._fieldsetDisabled}
 			>
 				<span><slot></slot></span>
 			</button>
 		`;
-	}
+  }
 }

package/src/components/button/button.css

@@ -2,149 +2,145 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 /* Color variants */
 :host {
-    --_button-base: var(--g-button-color-background);
-    --_button-border: var(--g-button-color-border);
+  --_button-base: var(--g-button-color-background);
+  --_button-border: var(--g-button-color-border);
 }
 :host([color="secondary"]) {
-    --_button-base: var(--g-button-secondary-color-background);
-    --_button-border: var(--g-button-secondary-color-border);
+  --_button-base: var(--g-button-secondary-color-background);
+  --_button-border: var(--g-button-secondary-color-border);
 }
 :host([color="neutral"]) {
-    --_button-base: var(--g-button-neutral-color-background);
-    --_button-border: var(--g-button-neutral-color-border);
+  --_button-base: var(--g-button-neutral-color-background);
+  --_button-border: var(--g-button-neutral-color-border);
 }
 :host([color="danger"]) {
-    --_button-base: var(--g-button-danger-color-background);
-    --_button-border: var(--g-button-danger-color-border);
+  --_button-base: var(--g-button-danger-color-background);
+  --_button-border: var(--g-button-danger-color-border);
 }
 
 /* Style variants */
 :host {
-    /* biome-ignore lint/correctness/noUnknownFunction: contrast-color is new */
-	--_button-color: contrast-color(var(--_button-base));
-	--_button-background: var(--_button-base);
+  /* biome-ignore lint/correctness/noUnknownFunction: contrast-color is new */
+  --_button-color: contrast-color(var(--_button-base));
+  --_button-background: var(--_button-base);
 }
 
 :host([variant="outline"]) {
-	--_button-color: var(--_button-base);
-	--_button-background: transparent;
-	--_button-background-hover: rgb(from var(--_button-base) r g b / 0.2);
-	--_button-background-active: rgb(from var(--_button-base) r g b / 0.25);
+  --_button-color: var(--_button-base);
+  --_button-background: transparent;
+  --_button-background-hover: rgb(from var(--_button-base) r g b / 0.2);
+  --_button-background-active: rgb(from var(--_button-base) r g b / 0.25);
 }
 :host([variant="ghost"]) {
-	--_button-color: var(--_button-base);
-	--_button-background: transparent;
-	--_button-border: transparent;
-	--_button-border-hover: transparent;
-	--_button-border-active: transparent;
-	--_button-background-hover: rgb(from var(--_button-base) r g b / 0.2);
-	--_button-background-active: rgb(from var(--_button-base) r g b / 0.25);
+  --_button-color: var(--_button-base);
+  --_button-background: transparent;
+  --_button-border: transparent;
+  --_button-border-hover: transparent;
+  --_button-border-active: transparent;
+  --_button-background-hover: rgb(from var(--_button-base) r g b / 0.2);
+  --_button-background-active: rgb(from var(--_button-base) r g b / 0.25);
 }
 
 :host {
-    --_button-action-tint: var(--_button-color);
-	--_button-border-radius-start: var(--g-border-radius-md);
-	--_button-border-radius-end: var(--g-border-radius-md);
-	--_button-background-hover: color-mix(
-		in oklab,
-		var(--_button-background),
-		var(--_button-action-tint) 10%
-	);
-	--_button-border-hover: color-mix(
-		in oklab,
-		var(--_button-border),
-		var(--_button-action-tint) 10%
-	);
-	--_button-color-hover: color-mix(
-		in oklab,
-		var(--_button-color),
-		var(--_button-action-tint) 10%
-	);
-	--_button-background-active: color-mix(
-		in oklab,
-		var(--_button-background-hover),
-		var(--_button-action-tint) 10%
-	);
-	--_button-border-active: color-mix(
-		in oklab,
-		var(--_button-border-hover),
-		var(--_button-action-tint) 10%
-	);
-	--_button-color-active: color-mix(
-		in oklab,
-		var(--_button-color-hover),
-		var(--_button-action-tint) 10%
-	);
+  --_button-action-tint: var(--_button-color);
+  --_button-border-radius-start: var(--g-border-radius-md);
+  --_button-border-radius-end: var(--g-border-radius-md);
+  --_button-background-hover: color-mix(
+    in oklab,
+    var(--_button-background),
+    var(--_button-action-tint) 10%
+  );
+  --_button-border-hover: color-mix(
+    in oklab,
+    var(--_button-border),
+    var(--_button-action-tint) 10%
+  );
+  --_button-color-hover: color-mix(in oklab, var(--_button-color), var(--_button-action-tint) 10%);
+  --_button-background-active: color-mix(
+    in oklab,
+    var(--_button-background-hover),
+    var(--_button-action-tint) 10%
+  );
+  --_button-border-active: color-mix(
+    in oklab,
+    var(--_button-border-hover),
+    var(--_button-action-tint) 10%
+  );
+  --_button-color-active: color-mix(
+    in oklab,
+    var(--_button-color-hover),
+    var(--_button-action-tint) 10%
+  );
 }
 
 .button {
-	display: inline-flex;
-	flex-direction: row;
-	align-items: center;
-	gap: var(--g-spacing-sm);
-	background: var(--_button-background);
-	color: var(--_button-color);
-	border-width: var(--g-border-width-md);
-	border-style: solid;
-	border-color: var(--_button-border);
-	border-start-start-radius: var(--_button-border-radius-start);
-	border-start-end-radius: var(--_button-border-radius-end);
-	border-end-start-radius: var(--_button-border-radius-start);
-	border-end-end-radius: var(--_button-border-radius-end);
-	font: var(--g-typography-body-sm-font);
-	text-decoration: none;
-	text-align: center;
-	transition-property: color, border-color, background-color, outline;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--g-spacing-sm);
+  background: var(--_button-background);
+  color: var(--_button-color);
+  border-width: var(--g-border-width-md);
+  border-style: solid;
+  border-color: var(--_button-border);
+  border-start-start-radius: var(--_button-border-radius-start);
+  border-start-end-radius: var(--_button-border-radius-end);
+  border-end-start-radius: var(--_button-border-radius-start);
+  border-end-end-radius: var(--_button-border-radius-end);
+  font: var(--g-typography-body-sm-font);
+  text-decoration: none;
+  text-align: center;
+  transition-property: color, border-color, background-color, outline;
 }
 
 .button:hover,
 .button:focus-visible {
-	color: var(--_button-color-hover);
-	background: var(--_button-background-hover);
-	border-color: var(--_button-border-hover);
-	cursor: pointer;
-	text-decoration: none;
+  color: var(--_button-color-hover);
+  background: var(--_button-background-hover);
+  border-color: var(--_button-border-hover);
+  cursor: pointer;
+  text-decoration: none;
 }
 
 .button:active {
-	color: var(--_button-color-active);
-	background: var(--_button-background-active);
-	border-color: var(--_button-border-active);
+  color: var(--_button-color-active);
+  background: var(--_button-background-active);
+  border-color: var(--_button-border-active);
 }
 
 .button:active {
-	transform: translateY(1px);
+  transform: translateY(1px);
 }
 
 .button[disabled] {
-	cursor: not-allowed;
-	filter: grayscale(70%);
-	opacity: 0.8;
+  cursor: not-allowed;
+  filter: grayscale(70%);
+  opacity: 0.8;
 }
 
 /* Size variants */
 :host .button {
-   	padding-block: var(--g-spacing-sm);
-	padding-inline: var(--g-spacing-md);
-	font-size: var(--g-typography-font-size-sm)
+  padding-block: var(--g-spacing-sm);
+  padding-inline: var(--g-spacing-md);
+  font-size: var(--g-typography-font-size-sm);
 }
 
 :host([size="sm"]) .button {
-    padding-block: var(--g-spacing-xs);
-	padding-inline: var(--g-spacing-sm);
-	font-size: var(--g-typography-font-size-xs)
+  padding-block: var(--g-spacing-xs);
+  padding-inline: var(--g-spacing-sm);
+  font-size: var(--g-typography-font-size-xs);
 }
 
 :host([size="lg"]) .button {
-	padding-inline: var(--g-spacing-lg);
-	font-size: var(--g-typography-font-size-md);
+  padding-inline: var(--g-spacing-lg);
+  font-size: var(--g-typography-font-size-md);
 }

package/src/components/button/button.js

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

package/src/components/button/button.react.js

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

package/src/components/button/button.stories.js

@@ -1,20 +1,20 @@
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-import { html } from "lit/static-html.js";
-import "./button.js";
-const { events, args, argTypes, template } =
-	getStorybookHelpers("grantcodes-button");
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit/static-html.js';
+import './button.js';
+
+const { events, args, argTypes, template } = getStorybookHelpers('grantcodes-button');
 
 const meta = {
-	title: "Components/Button",
-	component: "grantcodes-button",
-	args,
-	argTypes,
-	render: (args) => template(args, html`Button label`),
-	parameters: {
-		actions: {
-			handles: events,
-		},
-	},
+  title: 'Components/Button',
+  component: 'grantcodes-button',
+  args,
+  argTypes,
+  render: (args) => template(args, html`Button label`),
+  parameters: {
+    actions: {
+      handles: events,
+    },
+  },
 };
 
 export default meta;
@@ -28,7 +28,7 @@ export const Button = {};
  * Different button styles
  */
 export const ButtonStyles = {
-	render: () => html`
+  render: () => html`
 		<div style="display: flex; gap: 1rem;">
   		<div>
         <h4>Default</h4>
@@ -66,9 +66,9 @@ export const ButtonStyles = {
  * The button will not respond to clicks when disabled.
  */
 export const Disabled = {
-	args: {
-		disabled: true,
-	},
+  args: {
+    disabled: true,
+  },
 };
 
 /**
@@ -76,10 +76,10 @@ export const Disabled = {
  * Useful for navigation actions that look like buttons.
  */
 export const AsLink = {
-	args: {
-		href: "https://example.com",
-	},
-	render: (args) => template(args, html`Link Button`),
+  args: {
+    href: 'https://example.com',
+  },
+  render: (args) => template(args, html`Link Button`),
 };
 
 /**
@@ -89,7 +89,7 @@ export const AsLink = {
  * - reset: Resets form fields
  */
 export const ButtonTypes = {
-	render: () => html`
+  render: () => html`
 		<div style="display: flex; gap: 1rem;">
 			<grantcodes-button type="button">Button</grantcodes-button>
 			<grantcodes-button type="submit">Submit</grantcodes-button>
@@ -102,7 +102,7 @@ export const ButtonTypes = {
  * Various button states for different contexts.
  */
 export const AllStates = {
-	render: () => html`
+  render: () => html`
 		<div style="display: flex; flex-direction: column; gap: 1rem; max-width: 300px;">
 			<grantcodes-button>Normal Button</grantcodes-button>
 			<grantcodes-button disabled>Disabled Button</grantcodes-button>