@grantcodes/ui 2.10.0 → 2.10.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.10.1](https://github.com/grantcodes/ui/compare/ui-v2.10.0...ui-v2.10.1) (2026-05-01)
+
+
+### Bug Fixes
+
+* **astro-blocks:** some block rendering issues ([54b61c5](https://github.com/grantcodes/ui/commit/54b61c5ee45d12f8990a7ad69f2f4374f261d4ed))
+
 ## [2.10.0](https://github.com/grantcodes/ui/compare/ui-v2.9.2...ui-v2.10.0) (2026-04-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantcodes/ui",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "description": "A personal component system built with Lit web components",
   "type": "module",
   "main": "src/main.js",

package/src/components/accordion/accordion.component.js

@@ -1,6 +1,8 @@
 import { LitElement } from "lit";
 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 accordionStyles from "./accordion.css" with { type: "css" };
 
 export class GrantCodesAccordion extends LitElement {

package/src/components/accordion/accordion.css

@@ -1,83 +1,88 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 :host {
-  display: block;
+	display: block;
 }
 
 .accordion {
-  display: flex;
-  flex-direction: column;
-  gap: var(--g-theme-spacing-sm);
+	display: flex;
+	flex-direction: column;
+	gap: var(--g-theme-spacing-sm);
 }
 
 .accordion__item {
-  border: 1px solid var(--g-theme-color-border-subtle, var(--g-theme-color-border-default));
-  border-radius: var(--g-theme-border-radius-md, 0.5rem);
+	border: 1px solid
+		var(--g-theme-color-border-subtle, var(--g-theme-color-border-default));
+	border-radius: var(--g-theme-border-radius-md, 0.5rem);
 }
 
 .accordion__item::details-content {
-  block-size: 0;
-  overflow: clip;
-  transition:
-    block-size 0.25s ease,
-    content-visibility 0.25s allow-discrete;
+	block-size: 0;
+	overflow: clip;
+	transition:
+		block-size 0.25s ease,
+		content-visibility 0.25s allow-discrete;
 }
 
 .accordion__item[open]::details-content {
-  block-size: auto;
+	block-size: auto;
 }
 
 .accordion__summary {
-  padding: var(--g-theme-spacing-md);
-  cursor: pointer;
-  background: var(--g-theme-color-background-subtle);
-  font-weight: var(--g-typography-font-weight-500);
-  list-style: none;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--g-theme-spacing-md);
-  border-radius: var(--g-theme-border-radius-md, 0.5rem);
-  transition-property: background-color, outline-width, outline-color;
+	padding: var(--g-theme-spacing-md);
+	cursor: pointer;
+	background: var(--g-theme-color-background-subtle);
+	font-weight: var(--g-typography-font-weight-500);
+	list-style: none;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: var(--g-theme-spacing-md);
+	border-radius: var(--g-theme-border-radius-md, 0.5rem);
+	transition-property: background-color, outline-width, outline-color;
 }
 
 .accordion__summary:hover {
-  background: var(--g-theme-color-background-subtle-hover, var(--g-theme-color-background-subtle));
+	background: var(
+		--g-theme-color-background-subtle-hover,
+		var(--g-theme-color-background-subtle)
+	);
 }
 
 .accordion__summary::-webkit-details-marker {
-  display: none;
+	display: none;
 }
 
 .accordion__chevron {
-  display: block;
-  inline-size: 1em;
-  block-size: 1em;
-  flex-shrink: 0;
-  transition: transform 0.25s ease;
-  color: var(--g-theme-color-content-subtle, currentColor);
+	display: block;
+	inline-size: 1em;
+	block-size: 1em;
+	flex-shrink: 0;
+	transition: transform 0.25s ease;
+	color: var(--g-theme-color-content-subtle, currentColor);
 }
 
 .accordion__item[open] .accordion__chevron {
-  transform: rotateX(180deg);
+	transform: rotateX(180deg);
 }
 
 .accordion__content {
-  padding: var(--g-theme-spacing-md);
-  background: var(--g-theme-color-background-default);
-  border-radius: 0 0 var(--g-theme-border-radius-md, 0.5rem) var(--g-theme-border-radius-md, 0.5rem);
+	padding: var(--g-theme-spacing-md);
+	background: var(--g-theme-color-background-default);
+	border-radius: 0 0 var(--g-theme-border-radius-md, 0.5rem)
+		var(--g-theme-border-radius-md, 0.5rem);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .accordion__chevron {
-    transition: none;
-  }
+	.accordion__chevron {
+		transition: none;
+	}
 
-  .accordion__item::details-content {
-    transition: none;
-  }
+	.accordion__item::details-content {
+		transition: none;
+	}
 }

package/src/components/accordion/accordion.react.js

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

package/src/components/app-bar/app-bar.component.js

@@ -1,7 +1,9 @@
 import { LitElement } from "lit";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import focusRingStyles from "../../lib/styles/focus-ring.css" with { type: "css" };
+import focusRingStyles from "../../lib/styles/focus-ring.css" with {
+	type: "css",
+};
 import appBarStyles from "./app-bar.css" with { type: "css" };
 
 export class GrantCodesAppBar extends LitElement {
@@ -38,15 +40,19 @@ export class GrantCodesAppBar extends LitElement {
 		 * Close mobile menu when the component crosses the desktop breakpoint.
 		 * Matches the 768px container query in app-bar.css.
 		 */
-		this._resizeObserver = typeof ResizeObserver !== "undefined"
-			? new ResizeObserver((entries) => {
-					for (const entry of entries) {
-						if (entry.contentBoxSize[0].inlineSize >= 768 && this._mobileMenuOpen) {
-							this._mobileMenuOpen = false;
+		this._resizeObserver =
+			typeof ResizeObserver !== "undefined"
+				? new ResizeObserver((entries) => {
+						for (const entry of entries) {
+							if (
+								entry.contentBoxSize[0].inlineSize >= 768 &&
+								this._mobileMenuOpen
+							) {
+								this._mobileMenuOpen = false;
+							}
 						}
-					}
-				})
-			: null;
+					})
+				: null;
 	}
 
 	connectedCallback() {