@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/sidebar/sidebar.css

@@ -1,180 +1,183 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: contents;
+  display: contents;
 }
 
 .sidebar {
-	position: relative;
-	inline-size: var(--sidebar-width, 280px);
-	block-size: 100%;
-	background-color: var(--g-color-background-default);
-	border-inline-end: 1px solid var(--g-color-border-default);
-	overflow-y: auto;
-	transition: inline-size 0.3s ease;
-	flex-shrink: 0;
+  position: relative;
+  inline-size: var(--sidebar-width, 280px);
+  block-size: 100%;
+  background-color: var(--g-color-background-default);
+  border-inline-end: 1px solid var(--g-color-border-default);
+  overflow-y: auto;
+  view-transition-name: var(--sidebar-vt-name, none);
+  /* Fallback for browsers without view transitions, which drive the collapse instead. */
+  @supports not (view-transition-name: none) {
+    @media (prefers-reduced-motion: no-preference) {
+      transition: inline-size 0.3s ease;
+    }
+  }
+  flex-shrink: 0;
 }
 
 .sidebar--right {
-	border-inline-end: none;
-	border-inline-start: 1px solid var(--g-color-border-default);
+  border-inline-end: none;
+  border-inline-start: 1px solid var(--g-color-border-default);
 }
 
 .sidebar--collapsed {
-	inline-size: 60px;
+  inline-size: 60px;
 }
 
 .sidebar--collapsed .sidebar__content {
-	padding-inline: var(--g-spacing-sm);
+  padding-inline: var(--g-spacing-sm);
 }
 
-.sidebar--collapsed
-	.sidebar__content
-	> *:not(.sidebar__toggle):not(.sidebar__mobile-toggle) {
-	display: none;
+.sidebar--collapsed .sidebar__content > *:not(.sidebar__toggle):not(.sidebar__mobile-toggle) {
+  display: none;
 }
 
 .sidebar--collapsed .sidebar__toggle {
-	inset-inline-end: 50%;
-	transform: translateX(50%);
+  inset-inline-end: 50%;
+  transform: translateX(50%);
 }
 
 /* Mobile Toggle Button */
 .sidebar__mobile-toggle {
-	all: unset;
-	display: none;
-	position: fixed;
-	inset-block-start: var(--g-spacing-md);
-	inset-inline-start: var(--g-spacing-md);
-	z-index: 1001;
-	inline-size: 2.5rem;
-	block-size: 2.5rem;
-	align-items: center;
-	justify-content: center;
-	background-color: var(--g-color-background-default);
-	border: 1px solid var(--g-color-border-default);
-	border-radius: var(--g-border-radius-md);
-	cursor: pointer;
-	font-size: var(--g-typography-h5-font-size);
-	transition: all 0.2s ease;
+  all: unset;
+  display: none;
+  position: fixed;
+  inset-block-start: var(--g-spacing-md);
+  inset-inline-start: var(--g-spacing-md);
+  z-index: 1001;
+  inline-size: var(--g-size-touch-target);
+  block-size: var(--g-size-touch-target);
+  align-items: center;
+  justify-content: center;
+  background-color: var(--g-color-background-default);
+  border: 1px solid var(--g-color-border-default);
+  border-radius: var(--g-border-radius-md);
+  cursor: pointer;
+  font-size: var(--g-typography-h5-font-size);
+  transition: background-color 0.2s ease;
 }
 
 .sidebar__mobile-toggle:hover {
-	background-color: var(--g-color-background-subtle-hover);
+  background-color: var(--g-color-background-subtle-hover);
 }
 
 /* Show mobile toggle on small screens */
 @media (max-width: 768px) {
-	.sidebar__mobile-toggle {
-		display: flex;
-	}
-
-	.sidebar {
-		position: fixed;
-		inset-block-start: 0;
-		inset-block-end: 0;
-		inset-inline-start: -100%;
-		z-index: 1000;
-		transition: inset-inline-start 0.3s ease;
-	}
-
-	.sidebar--right {
-		inset-inline-start: auto;
-		inset-inline-end: -100%;
-		transition: inset-inline-end 0.3s ease;
-	}
-
-	.sidebar--drawer-open {
-		inset-inline-start: 0;
-	}
-
-	.sidebar--right.sidebar--drawer-open {
-		inset-inline-end: 0;
-		inset-inline-start: auto;
-	}
+  .sidebar__mobile-toggle {
+    display: flex;
+  }
+
+  .sidebar {
+    position: fixed;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: -100%;
+    z-index: 1000;
+    @supports not (view-transition-name: none) {
+      @media (prefers-reduced-motion: no-preference) {
+        transition: inset-inline-start 0.3s ease;
+      }
+    }
+  }
+
+  .sidebar--right {
+    inset-inline-start: auto;
+    inset-inline-end: -100%;
+    @supports not (view-transition-name: none) {
+      @media (prefers-reduced-motion: no-preference) {
+        transition: inset-inline-end 0.3s ease;
+      }
+    }
+  }
+
+  .sidebar--drawer-open {
+    inset-inline-start: 0;
+  }
+
+  .sidebar--right.sidebar--drawer-open {
+    inset-inline-end: 0;
+    inset-inline-start: auto;
+  }
 }
 
 /* Overlay */
 .sidebar__overlay {
-	display: none;
-	position: fixed;
-	inset: 0;
-	background-color: rgba(0, 0, 0, 0.5);
-	z-index: 999;
-	animation: overlay-fade-in 0.2s ease-out;
+  display: none;
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  animation: overlay-fade-in 0.2s ease-out;
 }
 
 @media (max-width: 768px) {
-	.sidebar__overlay {
-		display: block;
-	}
+  .sidebar__overlay {
+    display: block;
+  }
 }
 
 @keyframes overlay-fade-in {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* Collapse Toggle */
 .sidebar__toggle {
-	all: unset;
-	position: absolute;
-	inset-block-start: var(--g-spacing-md);
-	inset-inline-end: var(--g-spacing-sm);
-	inline-size: 1.5rem;
-	block-size: 1.5rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background-color: var(--g-color-background-default);
-	border: 1px solid var(--g-color-border-default);
-	border-radius: var(--g-border-radius-md);
-	cursor: pointer;
-	font-size: var(--g-typography-body-sm-font-size);
-	transition: all 0.2s ease;
-	z-index: 10;
+  all: unset;
+  position: absolute;
+  inset-block-start: var(--g-spacing-md);
+  inset-inline-end: var(--g-spacing-sm);
+  inline-size: var(--g-size-touch-target);
+  block-size: var(--g-size-touch-target);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--g-color-background-default);
+  border: 1px solid var(--g-color-border-default);
+  border-radius: var(--g-border-radius-md);
+  cursor: pointer;
+  font-size: var(--g-typography-body-sm-font-size);
+  transition: background-color 0.2s ease;
+  z-index: 10;
 }
 
 .sidebar__toggle:hover {
-	background-color: var(--g-color-background-subtle-hover);
+  background-color: var(--g-color-background-subtle-hover);
 }
 
 .sidebar--right .sidebar__toggle {
-	inset-inline-end: auto;
-	inset-inline-start: var(--g-spacing-sm);
+  inset-inline-end: auto;
+  inset-inline-start: var(--g-spacing-sm);
 }
 
 .sidebar--right.sidebar--collapsed .sidebar__toggle {
-	inset-inline-start: 50%;
-	inset-inline-end: auto;
-	transform: translateX(-50%);
+  inset-inline-start: 50%;
+  inset-inline-end: auto;
+  transform: translateX(-50%);
 }
 
 @media (max-width: 768px) {
-	.sidebar__toggle {
-		display: none;
-	}
+  .sidebar__toggle {
+    display: none;
+  }
 }
 
 /* Content */
 .sidebar__content {
-	padding-block: var(--g-spacing-md);
-	padding-inline: var(--g-spacing-md);
-}
-
-/* View transitions */
-@media (prefers-reduced-motion: no-preference) {
-	@supports (view-transition-name: auto) {
-		.sidebar {
-			view-transition-name: sidebar;
-		}
-	}
+  padding-block: var(--g-spacing-md);
+  padding-inline: var(--g-spacing-md);
 }

package/src/components/sidebar/sidebar.js

@@ -1,8 +1,8 @@
-import { GrantCodesSidebar } from "./sidebar.component.js";
+import { GrantCodesSidebar } from './sidebar.component.js';
 
-export * from "./sidebar.component.js";
+export * from './sidebar.component.js';
 export default GrantCodesSidebar;
 
-if (!customElements.get("grantcodes-sidebar")) {
-	customElements.define("grantcodes-sidebar", GrantCodesSidebar);
+if (!customElements.get('grantcodes-sidebar')) {
+  customElements.define('grantcodes-sidebar', GrantCodesSidebar);
 }

package/src/components/sidebar/sidebar.react.js

@@ -1,13 +1,13 @@
-import React from "react";
-import { createComponent } from "@lit/react";
-import { GrantCodesSidebar } from "./sidebar.js";
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { GrantCodesSidebar } from './sidebar.js';
 
 export const Sidebar = createComponent({
-	tagName: "grantcodes-sidebar",
-	elementClass: GrantCodesSidebar,
-	react: React,
-	events: {
-		onToggle: "toggle",
-		onDrawerToggle: "drawer-toggle",
-	},
+  tagName: 'grantcodes-sidebar',
+  elementClass: GrantCodesSidebar,
+  react: React,
+  events: {
+    onToggle: 'toggle',
+    onDrawerToggle: 'drawer-toggle',
+  },
 });

package/src/components/sidebar/sidebar.stories.js

@@ -1,9 +1,9 @@
-import { html } from "lit";
-import "./sidebar.js";
+import { html } from 'lit';
+import './sidebar.js';
 
 const meta = {
-	title: "Components/Sidebar",
-	component: "grantcodes-sidebar",
+  title: 'Components/Sidebar',
+  component: 'grantcodes-sidebar',
 };
 
 export default meta;
@@ -12,7 +12,7 @@ export default meta;
  * Basic sidebar with navigation
  */
 export const Sidebar = {
-	render: () => html`
+  render: () => html`
 		<div style="display: flex; height: 500px; border: 1px solid #ccc;">
 			<grantcodes-sidebar>
 				<h3 style="margin-top: 0;">Navigation</h3>
@@ -37,7 +37,7 @@ export const Sidebar = {
  * Right-positioned sidebar
  */
 export const RightSidebar = {
-	render: () => html`
+  render: () => html`
 		<div style="display: flex; height: 500px; border: 1px solid #ccc;">
 			<div style="flex: 1; padding: 2rem;">
 				<h1>Main Content</h1>
@@ -57,7 +57,7 @@ export const RightSidebar = {
  * Collapsible sidebar that can be expanded/collapsed
  */
 export const Collapsible = {
-	render: () => html`
+  render: () => html`
 		<div style="display: flex; height: 500px; border: 1px solid #ccc;">
 			<grantcodes-sidebar collapsible>
 				<h3 style="margin-top: 0;">Menu</h3>
@@ -82,7 +82,7 @@ export const Collapsible = {
  * Initially collapsed sidebar
  */
 export const InitiallyCollapsed = {
-	render: () => html`
+  render: () => html`
 		<div style="display: flex; height: 500px; border: 1px solid #ccc;">
 			<grantcodes-sidebar collapsed>
 				<nav>
@@ -106,7 +106,7 @@ export const InitiallyCollapsed = {
  * Custom width sidebar
  */
 export const CustomWidth = {
-	render: () => html`
+  render: () => html`
 		<div style="display: flex; height: 500px; border: 1px solid #ccc;">
 			<grantcodes-sidebar width="350px">
 				<h3 style="margin-top: 0;">Wide Sidebar</h3>
@@ -125,7 +125,7 @@ export const CustomWidth = {
  * Mobile-responsive demo - shows drawer behavior on small screens
  */
 export const MobileResponsive = {
-	render: () => html`
+  render: () => html`
 		<div style="max-width: 600px; border: 1px solid #ccc;">
 			<div style="display: flex; min-height: 400px;">
 				<grantcodes-sidebar>