@grantcodes/ui 2.9.2 → 2.10.1

package/src/components/sidebar/sidebar.css

@@ -1,180 +1,180 @@
-  *,
-	*::before,
-	*::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    display: contents;
-  }
-
-  .sidebar {
-    position: relative;
-    inline-size: var(--sidebar-width, 280px);
-    block-size: 100%;
-    background-color: var(--g-theme-color-background-default);
-    border-inline-end: 1px solid var(--g-theme-color-border-default);
-    overflow-y: auto;
-    transition: inline-size 0.3s ease;
-    flex-shrink: 0;
-  }
-
-  .sidebar--right {
-    border-inline-end: none;
-    border-inline-start: 1px solid var(--g-theme-color-border-default);
-  }
-
-  .sidebar--collapsed {
-    inline-size: 60px;
-  }
-
-  .sidebar--collapsed .sidebar__content {
-    padding-inline: var(--g-theme-spacing-sm);
-  }
-
-  .sidebar--collapsed
-    .sidebar__content
-    > *:not(.sidebar__toggle):not(.sidebar__mobile-toggle) {
-    display: none;
-  }
-
-  .sidebar--collapsed .sidebar__toggle {
-    inset-inline-end: 50%;
-    transform: translateX(50%);
-  }
-
-  /* Mobile Toggle Button */
-  .sidebar__mobile-toggle {
-    all: unset;
-    display: none;
-    position: fixed;
-    inset-block-start: var(--g-theme-spacing-md);
-    inset-inline-start: var(--g-theme-spacing-md);
-    z-index: 1001;
-    inline-size: 2.5rem;
-    block-size: 2.5rem;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--g-theme-color-background-default);
-    border: 1px solid var(--g-theme-color-border-default);
-    border-radius: var(--g-theme-border-radius-md);
-    cursor: pointer;
-    font-size: var(--g-theme-typography-h5-font-size);
-    transition: all 0.2s ease;
-  }
-
-  .sidebar__mobile-toggle:hover {
-    background-color: var(--g-theme-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;
-    }
-  }
-
-  /* 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;
-  }
-
-  @media (max-width: 768px) {
-    .sidebar__overlay {
-      display: block;
-    }
-  }
-
-  @keyframes overlay-fade-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  /* Collapse Toggle */
-  .sidebar__toggle {
-    all: unset;
-    position: absolute;
-    inset-block-start: var(--g-theme-spacing-md);
-    inset-inline-end: var(--g-theme-spacing-sm);
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--g-theme-color-background-default);
-    border: 1px solid var(--g-theme-color-border-default);
-    border-radius: var(--g-theme-border-radius-md);
-    cursor: pointer;
-    font-size: var(--g-typography-font-size-14);
-    transition: all 0.2s ease;
-    z-index: 10;
-  }
-
-  .sidebar__toggle:hover {
-    background-color: var(--g-theme-color-background-subtle-hover);
-  }
-
-  .sidebar--right .sidebar__toggle {
-    inset-inline-end: auto;
-    inset-inline-start: var(--g-theme-spacing-sm);
-  }
-
-  .sidebar--right.sidebar--collapsed .sidebar__toggle {
-    inset-inline-start: 50%;
-    inset-inline-end: auto;
-    transform: translateX(-50%);
-  }
-
-  @media (max-width: 768px) {
-    .sidebar__toggle {
-      display: none;
-    }
-  }
-
-  /* Content */
-  .sidebar__content {
-    padding-block: var(--g-theme-spacing-md);
-    padding-inline: var(--g-theme-spacing-md);
-  }
-
-  /* View transitions */
-  @media (prefers-reduced-motion: no-preference) {
-    @supports (view-transition-name: auto) {
-      .sidebar {
-        view-transition-name: sidebar;
-      }
-    }
-  }
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+:host {
+	display: contents;
+}
+
+.sidebar {
+	position: relative;
+	inline-size: var(--sidebar-width, 280px);
+	block-size: 100%;
+	background-color: var(--g-theme-color-background-default);
+	border-inline-end: 1px solid var(--g-theme-color-border-default);
+	overflow-y: auto;
+	transition: inline-size 0.3s ease;
+	flex-shrink: 0;
+}
+
+.sidebar--right {
+	border-inline-end: none;
+	border-inline-start: 1px solid var(--g-theme-color-border-default);
+}
+
+.sidebar--collapsed {
+	inline-size: 60px;
+}
+
+.sidebar--collapsed .sidebar__content {
+	padding-inline: var(--g-theme-spacing-sm);
+}
+
+.sidebar--collapsed
+	.sidebar__content
+	> *:not(.sidebar__toggle):not(.sidebar__mobile-toggle) {
+	display: none;
+}
+
+.sidebar--collapsed .sidebar__toggle {
+	inset-inline-end: 50%;
+	transform: translateX(50%);
+}
+
+/* Mobile Toggle Button */
+.sidebar__mobile-toggle {
+	all: unset;
+	display: none;
+	position: fixed;
+	inset-block-start: var(--g-theme-spacing-md);
+	inset-inline-start: var(--g-theme-spacing-md);
+	z-index: 1001;
+	inline-size: 2.5rem;
+	block-size: 2.5rem;
+	align-items: center;
+	justify-content: center;
+	background-color: var(--g-theme-color-background-default);
+	border: 1px solid var(--g-theme-color-border-default);
+	border-radius: var(--g-theme-border-radius-md);
+	cursor: pointer;
+	font-size: var(--g-theme-typography-h5-font-size);
+	transition: all 0.2s ease;
+}
+
+.sidebar__mobile-toggle:hover {
+	background-color: var(--g-theme-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;
+	}
+}
+
+/* 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;
+}
+
+@media (max-width: 768px) {
+	.sidebar__overlay {
+		display: block;
+	}
+}
+
+@keyframes overlay-fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+/* Collapse Toggle */
+.sidebar__toggle {
+	all: unset;
+	position: absolute;
+	inset-block-start: var(--g-theme-spacing-md);
+	inset-inline-end: var(--g-theme-spacing-sm);
+	inline-size: 1.5rem;
+	block-size: 1.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: var(--g-theme-color-background-default);
+	border: 1px solid var(--g-theme-color-border-default);
+	border-radius: var(--g-theme-border-radius-md);
+	cursor: pointer;
+	font-size: var(--g-typography-font-size-14);
+	transition: all 0.2s ease;
+	z-index: 10;
+}
+
+.sidebar__toggle:hover {
+	background-color: var(--g-theme-color-background-subtle-hover);
+}
+
+.sidebar--right .sidebar__toggle {
+	inset-inline-end: auto;
+	inset-inline-start: var(--g-theme-spacing-sm);
+}
+
+.sidebar--right.sidebar--collapsed .sidebar__toggle {
+	inset-inline-start: 50%;
+	inset-inline-end: auto;
+	transform: translateX(-50%);
+}
+
+@media (max-width: 768px) {
+	.sidebar__toggle {
+		display: none;
+	}
+}
+
+/* Content */
+.sidebar__content {
+	padding-block: var(--g-theme-spacing-md);
+	padding-inline: var(--g-theme-spacing-md);
+}
+
+/* View transitions */
+@media (prefers-reduced-motion: no-preference) {
+	@supports (view-transition-name: auto) {
+		.sidebar {
+			view-transition-name: sidebar;
+		}
+	}
+}

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

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

package/src/components/stats/stats.css

@@ -1,68 +1,68 @@
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
 
-  :host {
-    display: block;
-  }
+:host {
+	display: block;
+}
 
-  .stats {
-    padding-block: var(--g-theme-spacing-3xl);
-    padding-inline: var(--g-theme-spacing-md);
-    background: var(--g-theme-color-background-subtle);
-  }
+.stats {
+	padding-block: var(--g-theme-spacing-3xl);
+	padding-inline: var(--g-theme-spacing-md);
+	background: var(--g-theme-color-background-subtle);
+}
 
-  .stats__container {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
+.stats__container {
+	max-width: 1200px;
+	margin: 0 auto;
+}
 
-  .stats__title {
-    margin: 0 0 var(--g-theme-spacing-xl);
-    font-size: var(--g-theme-typography-h4-font-size);
-    font-weight: var(--g-theme-typography-h4-font-weight);
-    text-align: center;
-    color: var(--g-theme-color-content-default);
-  }
+.stats__title {
+	margin: 0 0 var(--g-theme-spacing-xl);
+	font-size: var(--g-theme-typography-h4-font-size);
+	font-weight: var(--g-theme-typography-h4-font-weight);
+	text-align: center;
+	color: var(--g-theme-color-content-default);
+}
 
-  .stats__grid {
-    display: grid;
-    grid-template-columns: repeat(var(--columns, 4), 1fr);
-    gap: var(--g-theme-spacing-xl);
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    text-align: center;
-  }
+.stats__grid {
+	display: grid;
+	grid-template-columns: repeat(var(--columns, 4), 1fr);
+	gap: var(--g-theme-spacing-xl);
+	padding: 0;
+	margin: 0;
+	list-style: none;
+	text-align: center;
+}
 
-  @media (max-width: 640px) {
-    .stats__grid {
-      grid-template-columns: repeat(2, 1fr);
-    }
-  }
+@media (max-width: 640px) {
+	.stats__grid {
+		grid-template-columns: repeat(2, 1fr);
+	}
+}
 
-  .stats__item {
-    display: flex;
-    flex-direction: column;
-    gap: var(--g-theme-spacing-xs);
-  }
+.stats__item {
+	display: flex;
+	flex-direction: column;
+	gap: var(--g-theme-spacing-xs);
+}
 
-  .stats__value {
-    font: var(--g-typography-h1-font);
-    white-space: nowrap;
-    line-height: 1;
-    color: var(--g-theme-color-content-primary, #7c3aed);
-  }
+.stats__value {
+	font: var(--g-theme-typography-h2);
+	white-space: nowrap;
+	line-height: 1;
+	color: var(--g-theme-color-content-primary, #7c3aed);
+}
 
-  .stats__label {
-    font-size: var(--g-theme-typography-label-default-font-size);
-    font-weight: var(--g-theme-typography-label-default-font-weight);
-    color: var(--g-theme-color-content-default);
-  }
+.stats__label {
+	font-size: var(--g-theme-typography-label-default-font-size);
+	font-weight: var(--g-theme-typography-label-default-font-weight);
+	color: var(--g-theme-color-content-default);
+}
 
-  .stats__context {
-    font-size: var(--g-theme-typography-body-sm-font-size);
-    color: var(--g-theme-color-content-subtle);
-  }
+.stats__context {
+	font-size: var(--g-theme-typography-body-sm-font-size);
+	color: var(--g-theme-color-content-subtle);
+}

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 React from "react";
+import { createComponent } from "@lit/react";
+import { GrantCodesStats } from "./stats.js";
 
 export const Stats = createComponent({
 	tagName: "grantcodes-stats",
 	elementClass: GrantCodesStats,
 	react: React,
-})
+});

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

@@ -2,7 +2,9 @@ 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 focusRingStyles from "../../../lib/styles/focus-ring.css" with {
+	type: "css",
+};
 import tabsStyles from "../tabs.css" with { type: "css" };
 
 export class GrantCodesTabsButton extends GrantCodesTabsItem {

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 React from "react";
+import { createComponent } from "@lit/react";
+import { GrantCodesTabsButton } from "./tabs-button.js";
 
 export const TabsButton = createComponent({
 	tagName: "grantcodes-tabs-button",
 	elementClass: GrantCodesTabsButton,
 	react: React,
-})
+});

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

@@ -1,6 +1,8 @@
 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 focusRingStyles from "../../lib/styles/focus-ring.css" with {
+	type: "css",
+};
 import tabsStyles from "./tabs.css" with { type: "css" };
 
 export class GrantCodesTab extends GrantCodesTabsItem {

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 React from "react";
+import { createComponent } from "@lit/react";
+import { GrantCodesTab } from "./tab.js";
 
 export const Tab = createComponent({
 	tagName: "grantcodes-tab",
 	elementClass: GrantCodesTab,
 	react: React,
-})
+});

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

@@ -1,6 +1,8 @@
 import { html, LitElement } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
-import focusRingStyles from "../../lib/styles/focus-ring.css" with { type: "css" };
+import focusRingStyles from "../../lib/styles/focus-ring.css" with {
+	type: "css",
+};
 import tabsStyles from "./tabs.css" with { type: "css" };
 import { GrantCodesTab } from "./tab.component.js";
 import { GrantCodesTabsButton } from "./internal/tabs-button.component.js";