@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/pricing/pricing.stories.js

@@ -1,123 +1,123 @@
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-import "./pricing.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import './pricing.js';
 
-const { events, args, argTypes } = getStorybookHelpers("grantcodes-pricing");
+const { events, args, argTypes } = getStorybookHelpers('grantcodes-pricing');
 
 const meta = {
-	title: "Blocks/Pricing",
-	component: "grantcodes-pricing",
-	args,
-	argTypes,
-	parameters: {
-		actions: {
-			handles: events,
-		},
-		layout: "fullscreen",
-	},
+  title: 'Blocks/Pricing',
+  component: 'grantcodes-pricing',
+  args,
+  argTypes,
+  parameters: {
+    actions: {
+      handles: events,
+    },
+    layout: 'fullscreen',
+  },
 };
 
 export default meta;
 
 const tiers = JSON.stringify([
-	{
-		name: "Starter",
-		price: "$0",
-		period: "month",
-		description: "Perfect for side projects and open source.",
-		features: [
-			{ text: "5 projects", included: true },
-			{ text: "Community support", included: true },
-			{ text: "Basic analytics", included: true },
-			{ text: "Custom domain", included: false },
-			{ text: "Priority support", included: false },
-		],
-		cta: { label: "Get started free", href: "/signup" },
-		highlighted: false,
-	},
-	{
-		name: "Pro",
-		price: "$19",
-		period: "month",
-		description: "Everything you need for a growing team.",
-		features: [
-			{ text: "Unlimited projects", included: true },
-			{ text: "Priority support", included: true },
-			{ text: "Advanced analytics", included: true },
-			{ text: "Custom domain", included: true },
-			{ text: "SLA guarantee", included: false },
-		],
-		cta: { label: "Start free trial", href: "/signup?plan=pro" },
-		highlighted: true,
-	},
-	{
-		name: "Enterprise",
-		price: "$99",
-		period: "month",
-		description: "Dedicated support and compliance features.",
-		features: [
-			{ text: "Unlimited projects", included: true },
-			{ text: "Dedicated support", included: true },
-			{ text: "Advanced analytics", included: true },
-			{ text: "Custom domain", included: true },
-			{ text: "SLA guarantee", included: true },
-		],
-		cta: { label: "Contact sales", href: "/contact" },
-		highlighted: false,
-	},
+  {
+    name: 'Starter',
+    price: '$0',
+    period: 'month',
+    description: 'Perfect for side projects and open source.',
+    features: [
+      { text: '5 projects', included: true },
+      { text: 'Community support', included: true },
+      { text: 'Basic analytics', included: true },
+      { text: 'Custom domain', included: false },
+      { text: 'Priority support', included: false },
+    ],
+    cta: { label: 'Get started free', href: '/signup' },
+    highlighted: false,
+  },
+  {
+    name: 'Pro',
+    price: '$19',
+    period: 'month',
+    description: 'Everything you need for a growing team.',
+    features: [
+      { text: 'Unlimited projects', included: true },
+      { text: 'Priority support', included: true },
+      { text: 'Advanced analytics', included: true },
+      { text: 'Custom domain', included: true },
+      { text: 'SLA guarantee', included: false },
+    ],
+    cta: { label: 'Start free trial', href: '/signup?plan=pro' },
+    highlighted: true,
+  },
+  {
+    name: 'Enterprise',
+    price: '$99',
+    period: 'month',
+    description: 'Dedicated support and compliance features.',
+    features: [
+      { text: 'Unlimited projects', included: true },
+      { text: 'Dedicated support', included: true },
+      { text: 'Advanced analytics', included: true },
+      { text: 'Custom domain', included: true },
+      { text: 'SLA guarantee', included: true },
+    ],
+    cta: { label: 'Contact sales', href: '/contact' },
+    highlighted: false,
+  },
 ]);
 
 /**
  * Three-tier pricing with one highlighted plan.
  */
 export const Default = {
-	args: {
-		title: "Simple, transparent pricing",
-		subtitle: "No hidden fees. Cancel any time.",
-		tiers,
-	},
+  args: {
+    title: 'Simple, transparent pricing',
+    subtitle: 'No hidden fees. Cancel any time.',
+    tiers,
+  },
 };
 
 /**
  * Pricing without the section heading.
  */
 export const NoHeading = {
-	args: {
-		tiers,
-	},
+  args: {
+    tiers,
+  },
 };
 
 /**
  * Two-tier pricing — free vs paid.
  */
 export const TwoTiers = {
-	args: {
-		title: "Choose a plan",
-		tiers: JSON.stringify([
-			{
-				name: "Free",
-				price: "$0",
-				description: "Get started at no cost.",
-				features: [
-					{ text: "3 projects", included: true },
-					{ text: "Community support", included: true },
-					{ text: "Custom domain", included: false },
-				],
-				cta: { label: "Sign up free", href: "/signup" },
-				highlighted: false,
-			},
-			{
-				name: "Paid",
-				price: "$9",
-				period: "month",
-				description: "Unlock the full platform.",
-				features: [
-					{ text: "Unlimited projects", included: true },
-					{ text: "Email support", included: true },
-					{ text: "Custom domain", included: true },
-				],
-				cta: { label: "Upgrade", href: "/upgrade" },
-				highlighted: true,
-			},
-		]),
-	},
+  args: {
+    title: 'Choose a plan',
+    tiers: JSON.stringify([
+      {
+        name: 'Free',
+        price: '$0',
+        description: 'Get started at no cost.',
+        features: [
+          { text: '3 projects', included: true },
+          { text: 'Community support', included: true },
+          { text: 'Custom domain', included: false },
+        ],
+        cta: { label: 'Sign up free', href: '/signup' },
+        highlighted: false,
+      },
+      {
+        name: 'Paid',
+        price: '$9',
+        period: 'month',
+        description: 'Unlock the full platform.',
+        features: [
+          { text: 'Unlimited projects', included: true },
+          { text: 'Email support', included: true },
+          { text: 'Custom domain', included: true },
+        ],
+        cta: { label: 'Upgrade', href: '/upgrade' },
+        highlighted: true,
+      },
+    ]),
+  },
 };

package/src/components/sidebar/index.js

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

package/src/components/sidebar/sidebar.component.js

@@ -1,143 +1,170 @@
-import { html, LitElement } from "lit";
-import { classMap } from "lit/directives/class-map.js";
-import focusRingStyles from "../../lib/styles/focus-ring.css" with {
-	type: "css",
-};
-import sidebarStyles from "./sidebar.css" with { type: "css" };
+import { html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { generateId } from '../../lib/generate-id.js';
+import focusRingStyles from '../../lib/styles/focus-ring.css' with { type: 'css' };
+import { startViewTransition } from '../../lib/view-transition.js';
+import sidebarStyles from './sidebar.css' with { type: 'css' };
 
 export class GrantCodesSidebar extends LitElement {
-	static styles = [focusRingStyles, sidebarStyles];
-
-	static properties = {
-		position: { type: String },
-		collapsed: { type: Boolean, reflect: true },
-		collapsible: { type: Boolean },
-		width: { type: String },
-		_drawerOpen: { type: Boolean, state: true },
-	};
-
-	constructor() {
-		super();
-
-		/**
-		 * Position of the sidebar
-		 * @type {'left' | 'right'}
-		 */
-		this.position = "left";
-
-		/**
-		 * Whether the sidebar is collapsed on desktop
-		 * @type {boolean}
-		 */
-		this.collapsed = false;
-
-		/**
-		 * Whether the sidebar can be collapsed
-		 * @type {boolean}
-		 */
-		this.collapsible = true;
-
-		/**
-		 * Custom width of the sidebar
-		 * @type {string}
-		 */
-		this.width = "280px";
-
-		/**
-		 * Whether mobile drawer is open
-		 * @type {boolean}
-		 */
-		this._drawerOpen = false;
-
-		this._handleDocumentClick = this._handleDocumentClick.bind(this);
-		this._handleEscape = this._handleEscape.bind(this);
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-		if (typeof document === "undefined") return;
-		document.addEventListener("click", this._handleDocumentClick);
-		document.addEventListener("keydown", this._handleEscape);
-	}
-
-	disconnectedCallback() {
-		document.removeEventListener("click", this._handleDocumentClick);
-		document.removeEventListener("keydown", this._handleEscape);
-		super.disconnectedCallback();
-	}
-
-	_handleDocumentClick(e) {
-		// Close mobile drawer if clicking outside
-		if (this._drawerOpen) {
-			const path = e.composedPath();
-			if (!path.includes(this)) {
-				this._drawerOpen = false;
-			}
-		}
-	}
-
-	_handleEscape(e) {
-		if (e.key === "Escape" && this._drawerOpen) {
-			this._drawerOpen = false;
-		}
-	}
-
-	_toggleCollapsed() {
-		if (!this.collapsible) return;
-
-		this.collapsed = !this.collapsed;
-		this.dispatchEvent(
-			new CustomEvent("toggle", {
-				detail: { collapsed: this.collapsed },
-				bubbles: true,
-				composed: true,
-			}),
-		);
-	}
-
-	_toggleDrawer() {
-		this._drawerOpen = !this._drawerOpen;
-		this.dispatchEvent(
-			new CustomEvent("drawer-toggle", {
-				detail: { open: this._drawerOpen },
-				bubbles: true,
-				composed: true,
-			}),
-		);
-	}
-
-	render() {
-		const sidebarClasses = classMap({
-			sidebar: true,
-			"sidebar--collapsed": this.collapsed,
-			[`sidebar--${this.position}`]: true,
-			"sidebar--drawer-open": this._drawerOpen,
-		});
-
-		return html`
+  static styles = [focusRingStyles, sidebarStyles];
+
+  static properties = {
+    position: { type: String },
+    collapsed: { type: Boolean, reflect: true },
+    collapsible: { type: Boolean },
+    width: { type: String },
+    _drawerOpen: { type: Boolean, state: true },
+  };
+
+  constructor() {
+    super();
+
+    /**
+     * Position of the sidebar
+     * @type {'left' | 'right'}
+     */
+    this.position = 'left';
+
+    /**
+     * Whether the sidebar is collapsed on desktop
+     * @type {boolean}
+     */
+    this.collapsed = false;
+
+    /**
+     * Whether the sidebar can be collapsed
+     * @type {boolean}
+     */
+    this.collapsible = true;
+
+    /**
+     * Custom width of the sidebar
+     * @type {string}
+     */
+    this.width = '280px';
+
+    /**
+     * Whether mobile drawer is open
+     * @type {boolean}
+     */
+    this._drawerOpen = false;
+
+    // Per-instance, so two sidebars cannot abort each other's view transition.
+    this._viewTransitionName = generateId('sidebar-vt');
+    this._pendingState = {};
+    this._transitionScheduled = false;
+
+    this._handleDocumentClick = this._handleDocumentClick.bind(this);
+    this._handleEscape = this._handleEscape.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.style.setProperty('--sidebar-vt-name', this._viewTransitionName);
+    if (typeof document === 'undefined') return;
+    document.addEventListener('click', this._handleDocumentClick);
+    document.addEventListener('keydown', this._handleEscape);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('click', this._handleDocumentClick);
+    document.removeEventListener('keydown', this._handleEscape);
+    super.disconnectedCallback();
+  }
+
+  _handleDocumentClick(e) {
+    // Close mobile drawer if clicking outside
+    if (this._pendingState._drawerOpen ?? this._drawerOpen) {
+      const path = e.composedPath();
+      if (!path.includes(this)) {
+        this._closeDrawer();
+      }
+    }
+  }
+
+  _handleEscape(e) {
+    if (e.key === 'Escape' && (this._pendingState._drawerOpen ?? this._drawerOpen)) {
+      this._closeDrawer();
+    }
+  }
+
+  _scheduleTransition() {
+    if (this._transitionScheduled) return;
+    this._transitionScheduled = true;
+    startViewTransition(() => {
+      const pending = this._pendingState;
+      this._pendingState = {};
+      this._transitionScheduled = false;
+      if ('collapsed' in pending) this.collapsed = pending.collapsed;
+      if ('_drawerOpen' in pending) this._drawerOpen = pending._drawerOpen;
+      return this.updateComplete;
+    });
+  }
+
+  _closeDrawer() {
+    if (!(this._pendingState._drawerOpen ?? this._drawerOpen)) return;
+    this._pendingState._drawerOpen = false;
+    this._scheduleTransition();
+  }
+
+  _toggleCollapsed() {
+    if (!this.collapsible) return;
+
+    const collapsed = !(this._pendingState.collapsed ?? this.collapsed);
+    this._pendingState.collapsed = collapsed;
+    this._scheduleTransition();
+    this.dispatchEvent(
+      new CustomEvent('toggle', {
+        detail: { collapsed },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  _toggleDrawer() {
+    const open = !(this._pendingState._drawerOpen ?? this._drawerOpen);
+    this._pendingState._drawerOpen = open;
+    this._scheduleTransition();
+    this.dispatchEvent(
+      new CustomEvent('drawer-toggle', {
+        detail: { open },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render() {
+    const sidebarClasses = classMap({
+      sidebar: true,
+      'sidebar--collapsed': this.collapsed,
+      [`sidebar--${this.position}`]: true,
+      'sidebar--drawer-open': this._drawerOpen,
+    });
+
+    return html`
 			<!-- Mobile Toggle Button -->
 			<button
 				type="button"
 				class="sidebar__mobile-toggle focus-ring"
 				@click=${this._toggleDrawer}
-				aria-label="${this._drawerOpen ? "Close sidebar" : "Open sidebar"}"
+				aria-label="${this._drawerOpen ? 'Close sidebar' : 'Open sidebar'}"
 			>
 				☰
 			</button>
 
 			<!-- Overlay for mobile -->
 			${
-				this._drawerOpen
-					? html`
+        this._drawerOpen
+          ? html`
 					<div
 						class="sidebar__overlay"
-						@click=${() => {
-							this._drawerOpen = false;
-						}}
+						@click=${this._closeDrawer}
 					></div>
 				`
-					: ""
-			}
+          : ''
+      }
 
 			<!-- Sidebar -->
 			<aside
@@ -146,20 +173,20 @@ export class GrantCodesSidebar extends LitElement {
 			>
 				<!-- Collapse Toggle (Desktop) -->
 				${
-					this.collapsible
-						? html`
+          this.collapsible
+            ? html`
 						<button
 							type="button"
 							class="sidebar__toggle focus-ring"
 							@click=${this._toggleCollapsed}
-							aria-label="${this.collapsed ? "Expand sidebar" : "Collapse sidebar"}"
+							aria-label="${this.collapsed ? 'Expand sidebar' : 'Collapse sidebar'}"
 							aria-expanded="${!this.collapsed}"
 						>
-							${this.position === "left" ? (this.collapsed ? "→" : "←") : this.collapsed ? "←" : "→"}
+							${this.position === 'left' ? (this.collapsed ? '→' : '←') : this.collapsed ? '←' : '→'}
 						</button>
 					`
-						: ""
-				}
+            : ''
+        }
 
 				<!-- Content -->
 				<div class="sidebar__content">
@@ -167,5 +194,5 @@ export class GrantCodesSidebar extends LitElement {
 				</div>
 			</aside>
 		`;
-	}
+  }
 }