@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/toast/toast.css

@@ -1,197 +1,199 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
-	pointer-events: none;
+  display: block;
+  pointer-events: none;
 }
 
 /* Toast Container */
 .toast-container {
-	position: fixed;
-	z-index: 9999;
-	display: flex;
-	flex-direction: column;
-	gap: var(--g-spacing-sm);
-	padding: var(--g-spacing-md);
-	pointer-events: none;
-	max-inline-size: 100vw;
-	max-block-size: 100vh;
-	overflow: hidden;
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-sm);
+  padding: var(--g-spacing-md);
+  pointer-events: none;
+  max-inline-size: 100vw;
+  max-block-size: 100vh;
+  overflow: hidden;
 }
 
 /* Container positions */
 .toast-container--top-left {
-	inset-block-start: 0;
-	inset-inline-start: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 
 .toast-container--top-center {
-	inset-block-start: 0;
-	inset-inline-start: 50%;
-	transform: translateX(-50%);
+  inset-block-start: 0;
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
 }
 
 .toast-container--top-right {
-	inset-block-start: 0;
-	inset-inline-end: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
 }
 
 .toast-container--bottom-left {
-	inset-block-end: 0;
-	inset-inline-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
 }
 
 .toast-container--bottom-center {
-	inset-block-end: 0;
-	inset-inline-start: 50%;
-	transform: translateX(-50%);
+  inset-block-end: 0;
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
 }
 
 .toast-container--bottom-right {
-	inset-block-end: 0;
-	inset-inline-end: 0;
+  inset-block-end: 0;
+  inset-inline-end: 0;
 }
 
 /* Toast */
 .toast {
-	display: flex;
-	align-items: flex-start;
-	gap: var(--g-spacing-sm);
-	min-inline-size: 300px;
-	max-inline-size: 500px;
-	padding-block: var(--g-spacing-md);
-	padding-inline: var(--g-spacing-md);
-	border-radius: var(--g-border-radius-md);
-	background-color: var(--g-color-background-default);
-	border-inline-start-width: 4px;
-	border-inline-start-style: solid;
-	pointer-events: auto;
-	opacity: 0;
-	transform: translateY(-1rem);
-	transition:
-		opacity 0.3s ease,
-		transform 0.3s ease;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--g-spacing-sm);
+  min-inline-size: 300px;
+  max-inline-size: 500px;
+  padding-block: var(--g-spacing-md);
+  padding-inline: var(--g-spacing-md);
+  border-radius: var(--g-border-radius-md);
+  background-color: var(--g-color-background-default);
+  border-inline-start-width: 4px;
+  border-inline-start-style: solid;
+  pointer-events: auto;
+  opacity: 0;
+  transform: translateY(-1rem);
+  view-transition-name: var(--toast-vt-name, none);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :host(:not([data-view-transition])) .toast {
+    transition:
+      opacity 0.3s ease,
+      transform 0.3s ease;
+  }
 }
 
 .toast--visible {
-	opacity: 1;
-	transform: translateY(0);
+  opacity: 1;
+  transform: translateY(0);
 }
 
 /* Variant colors */
 .toast--info {
-	border-inline-start-color: var(--g-color-background-utility-info);
+  border-inline-start-color: var(--g-color-background-utility-info);
 }
 
 .toast--success {
-	border-inline-start-color: var(--g-color-background-utility-success);
+  border-inline-start-color: var(--g-color-background-utility-success);
 }
 
 .toast--warning {
-	border-inline-start-color: var(--g-color-background-utility-warning);
+  border-inline-start-color: var(--g-color-background-utility-warning);
 }
 
 .toast--error {
-	border-inline-start-color: var(--g-color-background-utility-error);
+  border-inline-start-color: var(--g-color-background-utility-error);
 }
 
 /* Toast icon */
 .toast__icon {
-	flex-shrink: 0;
-	inline-size: 1.5rem;
-	block-size: 1.5rem;
+  flex-shrink: 0;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
 }
 
 .toast--info .toast__icon {
-	color: var(--g-color-background-utility-info);
+  color: var(--g-color-background-utility-info);
 }
 
 .toast--success .toast__icon {
-	color: var(--g-color-background-utility-success);
+  color: var(--g-color-background-utility-success);
 }
 
 .toast--warning .toast__icon {
-	color: var(--g-color-background-utility-warning);
+  color: var(--g-color-background-utility-warning);
 }
 
 .toast--error .toast__icon {
-	color: var(--g-color-background-utility-error);
+  color: var(--g-color-background-utility-error);
 }
 
 /* Toast content */
 .toast__content {
-	flex: 1;
-	min-inline-size: 0;
+  flex: 1;
+  min-inline-size: 0;
 }
 
 .toast__title {
-	font: var(--g-typography-h6-font);
-	margin-block-end: 0.25rem;
-	color: var(--g-color-content-default);
+  font: var(--g-typography-h6-font);
+  margin-block-end: 0.25rem;
+  color: var(--g-color-content-default);
 }
 
 .toast__message {
-	font: var(--g-typography-body-sm-font);
-	color: var(--g-color-content-subtle);
-	line-height: 1.5;
+  font: var(--g-typography-body-sm-font);
+  color: var(--g-color-content-subtle);
+  line-height: 1.5;
 }
 
 /* Close button */
 .toast__close {
-	all: unset;
-	flex-shrink: 0;
-	inline-size: 1.5rem;
-	block-size: 1.5rem;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: var(--g-border-radius-md);
-	color: var(--g-color-content-subtle);
-	cursor: pointer;
-	transition: all 0.2s ease;
-	margin-inline-start: 0.5rem;
+  all: unset;
+  flex-shrink: 0;
+  /* Touch target; the negative margins keep the original 2rem layout footprint. */
+  inline-size: var(--g-size-touch-target);
+  block-size: var(--g-size-touch-target);
+  margin-block: calc(-1 * (var(--g-spacing-sm) + var(--g-spacing-2xs)));
+  margin-inline-start: calc(-1 * var(--g-spacing-2xs));
+  margin-inline-end: calc(-1 * (var(--g-spacing-sm) + var(--g-spacing-2xs)));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--g-border-radius-md);
+  color: var(--g-color-content-subtle);
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
 }
 
 .toast__close:hover {
-	color: var(--g-color-content-default);
-	background-color: var(--g-color-background-subtle-hover);
+  color: var(--g-color-content-default);
+  background-color: var(--g-color-background-subtle-hover);
 }
 
 /* Bottom position toasts slide up instead of down */
 .toast--bottom-left,
 .toast--bottom-center,
 .toast--bottom-right {
-	transform: translateY(1rem);
+  transform: translateY(1rem);
 }
 
 .toast--bottom-left.toast--visible,
 .toast--bottom-center.toast--visible,
 .toast--bottom-right.toast--visible {
-	transform: translateY(0);
+  transform: translateY(0);
 }
 
 /* Responsive */
 @media (max-width: 640px) {
-	.toast-container {
-		inset-inline: 0;
-		transform: none;
-	}
-
-	.toast {
-		min-inline-size: auto;
-		inline-size: 100%;
-	}
-}
-
-/* View transitions */
-@media (prefers-reduced-motion: no-preference) {
-	@supports (view-transition-name: auto) {
-		.toast {
-			view-transition-name: toast;
-		}
-	}
+  .toast-container {
+    inset-inline: 0;
+    transform: none;
+  }
+
+  .toast {
+    min-inline-size: auto;
+    inline-size: 100%;
+  }
 }

package/src/components/toast/toast.js

@@ -1,14 +1,11 @@
-import {
-	GrantCodesToast,
-	GrantCodesToastContainer,
-} from "./toast.component.js";
+import { GrantCodesToast, GrantCodesToastContainer } from './toast.component.js';
 
-export * from "./toast.component.js";
+export * from './toast.component.js';
 export default GrantCodesToast;
 
-if (!customElements.get("grantcodes-toast")) {
-	customElements.define("grantcodes-toast", GrantCodesToast);
+if (!customElements.get('grantcodes-toast')) {
+  customElements.define('grantcodes-toast', GrantCodesToast);
 }
-if (!customElements.get("grantcodes-toast-container")) {
-	customElements.define("grantcodes-toast-container", GrantCodesToastContainer);
+if (!customElements.get('grantcodes-toast-container')) {
+  customElements.define('grantcodes-toast-container', GrantCodesToastContainer);
 }

package/src/components/toast/toast.react.js

@@ -1,18 +1,18 @@
-import React from "react";
-import { createComponent } from "@lit/react";
-import { GrantCodesToast, GrantCodesToastContainer } from "./toast.js";
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { GrantCodesToast, GrantCodesToastContainer } from './toast.js';
 
 export const Toast = createComponent({
-	tagName: "grantcodes-toast",
-	elementClass: GrantCodesToast,
-	react: React,
-	events: {
-		onDismiss: "dismiss",
-	},
+  tagName: 'grantcodes-toast',
+  elementClass: GrantCodesToast,
+  react: React,
+  events: {
+    onDismiss: 'dismiss',
+  },
 });
 
 export const ToastContainer = createComponent({
-	tagName: "grantcodes-toast-container",
-	elementClass: GrantCodesToastContainer,
-	react: React,
+  tagName: 'grantcodes-toast-container',
+  elementClass: GrantCodesToastContainer,
+  react: React,
 });

package/src/components/toast/toast.stories.js

@@ -1,9 +1,50 @@
-import { html } from "lit";
-import "./toast.js";
+import { html } from 'lit';
+import './toast.js';
 
 const meta = {
-	title: "Components/Toast",
-	component: "grantcodes-toast",
+  title: 'Components/Toast',
+  component: 'grantcodes-toast',
+  args: {
+    variant: 'info',
+    title: 'Information',
+    text: 'This is an informational toast message.',
+    duration: 5000,
+    position: 'top-right',
+    dismissible: true,
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['info', 'success', 'warning', 'error'],
+    },
+    position: {
+      control: 'select',
+      options: [
+        'top-left',
+        'top-center',
+        'top-right',
+        'bottom-left',
+        'bottom-center',
+        'bottom-right',
+      ],
+    },
+    title: { control: 'text' },
+    text: { control: 'text' },
+    duration: { control: 'number' },
+    dismissible: { control: 'boolean' },
+  },
+  render: (args) => html`
+		<grantcodes-toast-container position=${args.position}>
+			<grantcodes-toast
+				variant=${args.variant}
+				title=${args.title}
+				duration=${args.duration}
+				.dismissible=${args.dismissible}
+			>
+				${args.text}
+			</grantcodes-toast>
+		</grantcodes-toast-container>
+	`,
 };
 
 export default meta;
@@ -11,21 +52,13 @@ export default meta;
 /**
  * Basic toast notification that auto-dismisses after 5 seconds
  */
-export const Toast = {
-	render: () => html`
-		<grantcodes-toast-container position="top-right">
-			<grantcodes-toast variant="info" title="Information">
-				This is an informational toast message.
-			</grantcodes-toast>
-		</grantcodes-toast-container>
-	`,
-};
+export const Toast = {};
 
 /**
  * All toast variants
  */
 export const AllVariants = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-toast-container position="top-right">
 			<grantcodes-toast variant="info" title="Info" duration="0">
 				This is an info toast message.
@@ -47,7 +80,7 @@ export const AllVariants = {
  * Toast without title
  */
 export const WithoutTitle = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-toast-container position="top-right">
 			<grantcodes-toast variant="success" duration="0">
 				This toast has no title, just the message content.
@@ -60,20 +93,19 @@ export const WithoutTitle = {
  * Non-dismissible toast (no close button)
  */
 export const NonDismissible = {
-	render: () => html`
-		<grantcodes-toast-container position="top-right">
-			<grantcodes-toast variant="info" title="Loading" ?dismissible=${false} duration="0">
-				Please wait while we process your request...
-			</grantcodes-toast>
-		</grantcodes-toast-container>
-	`,
+  args: {
+    dismissible: false,
+    duration: 0,
+    title: 'Loading',
+    text: 'Please wait while we process your request...',
+  },
 };
 
 /**
  * Different positions for toast container
  */
 export const Positions = {
-	render: () => html`
+  render: () => html`
 		<div style="position: relative; height: 400px; border: 1px solid #ccc;">
 			<grantcodes-toast-container position="top-left">
 				<grantcodes-toast variant="info" title="Top Left" duration="0">
@@ -118,7 +150,7 @@ export const Positions = {
  * Stacked toasts showing multiple notifications
  */
 export const Stacked = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-toast-container position="top-right">
 			<grantcodes-toast variant="info" title="First notification" duration="0">
 				This is the first toast message.
@@ -137,34 +169,28 @@ export const Stacked = {
  * Interactive demo with button to trigger toasts
  */
 export const Interactive = {
-	render: () => html`
+  render: () => html`
 		<div>
 			<button
 				@click=${() => {
-					const container = document.querySelector(
-						"grantcodes-toast-container",
-					);
-					if (!container) {
-						const newContainer = document.createElement(
-							"grantcodes-toast-container",
-						);
-						newContainer.position = "top-right";
-						document.body.appendChild(newContainer);
-					}
-
-					const toast = document.createElement("grantcodes-toast");
-					toast.variant = "success";
-					toast.title = "Toast Created!";
-					toast.textContent = "This toast was created dynamically.";
-					toast.duration = 3000;
-
-					const finalContainer =
-						document.querySelector("grantcodes-toast-container") ||
-						document.body.appendChild(
-							document.createElement("grantcodes-toast-container"),
-						);
-					finalContainer.appendChild(toast);
-				}}
+          const container = document.querySelector('grantcodes-toast-container');
+          if (!container) {
+            const newContainer = document.createElement('grantcodes-toast-container');
+            newContainer.position = 'top-right';
+            document.body.appendChild(newContainer);
+          }
+
+          const toast = document.createElement('grantcodes-toast');
+          toast.variant = 'success';
+          toast.title = 'Toast Created!';
+          toast.textContent = 'This toast was created dynamically.';
+          toast.duration = 3000;
+
+          const finalContainer =
+            document.querySelector('grantcodes-toast-container') ||
+            document.body.appendChild(document.createElement('grantcodes-toast-container'));
+          finalContainer.appendChild(toast);
+        }}
 			>
 				Show Toast
 			</button>