@grantcodes/ui 2.9.1 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.10.0](https://github.com/grantcodes/ui/compare/ui-v2.9.2...ui-v2.10.0) (2026-04-23)
+
+
+### Features
+
+* **css:** add svh reset, scrollbar-gutter, and details animation ([f4403e6](https://github.com/grantcodes/ui/commit/f4403e618862b9b24aa6f9d7f3df0c51d5505a83))
+
+## [2.9.2](https://github.com/grantcodes/ui/compare/ui-v2.9.1...ui-v2.9.2) (2026-04-19)
+
+
+### Bug Fixes
+
+* **ui:** replace #styles/ subpath imports with relative paths for SSR/Vite compatibility ([1bb7490](https://github.com/grantcodes/ui/commit/1bb749028328bd573524c9c72f7c830098c23850)), closes [#53](https://github.com/grantcodes/ui/issues/53)
+
 ## [2.9.1](https://github.com/grantcodes/ui/compare/ui-v2.9.0...ui-v2.9.1) (2026-04-18)
 
 

package/package.json

@@ -1,15 +1,12 @@
 {
   "name": "@grantcodes/ui",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "description": "A personal component system built with Lit web components",
   "type": "module",
   "main": "src/main.js",
   "module": "src/main.js",
   "types": "src/types.d.ts",
   "author": "grantcodes",
-  "imports": {
-    "#styles/*": "./src/lib/styles/*"
-  },
   "exports": {
     ".": {
       "types": "./src/types.d.ts",

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

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import focusRingStyles from "#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,67 +1,83 @@
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
-  :host {
-    display: block;
-  }
+:host {
+  display: block;
+}
 
-  .accordion {
-    display: flex;
-    flex-direction: column;
-    gap: var(--g-theme-spacing-sm);
-  }
+.accordion {
+  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);
-  }
+.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);
+}
 
-  .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;
-  }
+.accordion__item::details-content {
+  block-size: 0;
+  overflow: clip;
+  transition:
+    block-size 0.25s ease,
+    content-visibility 0.25s allow-discrete;
+}
 
-  .accordion__summary:hover {
-    background: var(--g-theme-color-background-subtle-hover, var(--g-theme-color-background-subtle));
-  }
+.accordion__item[open]::details-content {
+  block-size: auto;
+}
 
-  .accordion__summary::-webkit-details-marker {
-    display: none;
-  }
+.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;
+}
 
-  .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);
-  }
+.accordion__summary:hover {
+  background: var(--g-theme-color-background-subtle-hover, var(--g-theme-color-background-subtle));
+}
 
-  .accordion__item[open] .accordion__chevron {
-    transform: rotateX(180deg);
-  }
+.accordion__summary::-webkit-details-marker {
+  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);
+}
 
-  .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);
+.accordion__item[open] .accordion__chevron {
+  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);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .accordion__chevron {
+    transition: none;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .accordion__chevron {
-      transition: none;
-    }
+  .accordion__item::details-content {
+    transition: none;
   }
+}

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

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import focusRingStyles from "#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 {

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

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import focusRingStyles from "../../lib/styles/focus-ring.css" with { type: "css" };
 import navLinkStyles from "./nav-link.css" with { type: "css" };
 
 export class GrantCodesNavLink extends LitElement {

package/src/components/breadcrumb/breadcrumb.component.js

@@ -1,6 +1,6 @@
 import { LitElement } from "lit";
 import { html } from "lit/static-html.js";
-import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import focusRingStyles from "../../lib/styles/focus-ring.css" with { type: "css" };
 import breadcrumbStyles from "./breadcrumb.css" with { type: "css" };
 
 export class GrantCodesBreadcrumb extends LitElement {

package/src/components/button/button.component.js

@@ -1,5 +1,5 @@
 import { html, LitElement } from "lit";
-import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import focusRingStyles from "../../lib/styles/focus-ring.css" with { type: "css" };
 import buttonStyles from "./button.css" with { type: "css" };
 
 export class GrantCodesButton extends LitElement {

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

@@ -1,6 +1,6 @@
 import { html, LitElement } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import focusRingStyles from "../../lib/styles/focus-ring.css" with { type: "css" };
 import sidebarStyles from "./sidebar.css" with { type: "css" };
 
 export class GrantCodesSidebar extends LitElement {

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

@@ -2,7 +2,7 @@ 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 "#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/tab.component.js

@@ -1,6 +1,6 @@
 import { GrantCodesTabsItem } from "./internal/tabs-item.component.js";
 import { html } from "lit/static-html.js";
-import focusRingStyles from "#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/tabs.component.js

@@ -1,6 +1,6 @@
 import { html, LitElement } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
-import focusRingStyles from "#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";

package/src/components/toast/toast.component.js

@@ -1,7 +1,7 @@
 import { html, LitElement } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { classMap } from "lit/directives/class-map.js";
-import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
+import focusRingStyles from "../../lib/styles/focus-ring.css" with { type: "css" };
 import toastStyles from "./toast.css" with { type: "css" };
 import { GrantCodesIcon } from "../icon/icon.component.js";
 import { AlertCircle, Info, CheckCircle2, XCircle, X } from "../../icons.js";

package/src/css/reset.css

@@ -5,252 +5,256 @@
 *,
 ::before,
 ::after {
-	box-sizing: border-box;
-	background-repeat: no-repeat;
+  box-sizing: border-box;
+  background-repeat: no-repeat;
 }
 
 ::before,
 ::after {
-	text-decoration: inherit;
-	vertical-align: inherit;
+  text-decoration: inherit;
+  vertical-align: inherit;
 }
 
 /* Root defaults */
 :where(:root) {
-	font: var(--g-typography-body-font);
-	cursor: default;
-	line-height: 1.5;
-	overflow-wrap: break-word;
-	-moz-tab-size: 4;
-	tab-size: 4;
-	-webkit-tap-highlight-color: transparent;
-	-webkit-text-size-adjust: 100%;
+  font: var(--g-typography-body-font);
+  cursor: default;
+  line-height: 1.5;
+  overflow-wrap: break-word;
+  scrollbar-gutter: stable;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-size-adjust: 100%;
 }
 
 :where(:root, body) {
-    padding: 0;
-   	margin: 0;
+  padding: 0;
+  margin: 0;
+}
+
+:where(body) {
+  min-block-size: 100svh;
 }
 
 code,
 kbd,
 samp,
 pre {
-	font-family:
-		ui-monospace,
-		"Menlo",
-		"Consolas",
-		"Roboto Mono",
-		"Ubuntu Monospace",
-		"Noto Mono",
-		"Oxygen Mono",
-		"Liberation Mono",
-		monospace,
-		"Apple Color Emoji",
-		"Segoe UI Emoji",
-		"Segoe UI Symbol",
-		"Noto Color Emoji";
+  font-family:
+    ui-monospace,
+    "Menlo",
+    "Consolas",
+    "Roboto Mono",
+    "Ubuntu Monospace",
+    "Noto Mono",
+    "Oxygen Mono",
+    "Liberation Mono",
+    monospace,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
 }
 
-
 /* Grouping */
 :where(dl, ol, ul) :where(dl, ol, ul) {
-	margin: 0;
+  margin: 0;
 }
 
 :where(hr) {
-	color: inherit;
-	height: 0;
+  color: inherit;
+  height: 0;
 }
 
 :where(nav) :where(ol, ul) {
-	list-style-type: none;
-	padding: 0;
+  list-style-type: none;
+  padding: 0;
 }
 
 /* Prevent VoiceOver from ignoring list semantics in Safari */
 :where(nav li)::before {
-	content: "\200B";
-	float: left;
+  content: "\200B";
+  float: left;
 }
 
 :where(pre) {
-	font-size: 1em;
-	overflow: auto;
+  font-size: 1em;
+  overflow: auto;
 }
 
 /* Text-level semantics */
 :where(abbr[title]) {
-	text-decoration: underline dotted;
+  text-decoration: underline dotted;
 }
 
 :where(b, strong) {
-	font-weight: bolder;
+  font-weight: bolder;
 }
 
 :where(code, kbd, samp) {
-	font-size: 1em;
+  font-size: 1em;
 }
 
 :where(small) {
-	font-size: 80%;
+  font-size: 80%;
 }
 
 /* Embedded content */
 :where(audio, canvas, iframe, img, svg, video) {
-	vertical-align: middle;
+  vertical-align: middle;
 }
 
 :where(iframe) {
-	border-style: none;
+  border-style: none;
 }
 
 :where(svg:not([fill])) {
-	fill: currentColor;
+  fill: currentColor;
 }
 
 /* Tabular data */
 :where(table) {
-	border-collapse: collapse;
-	border-color: inherit;
-	text-indent: 0;
+  border-collapse: collapse;
+  border-color: inherit;
+  text-indent: 0;
 }
 
 /* Forms — baseline normalisation */
 :where(button, input, select) {
-	margin: 0;
+  margin: 0;
 }
 
 :where(button, [type="button" i], [type="reset" i], [type="submit" i]) {
-	-webkit-appearance: button;
+  -webkit-appearance: button;
 }
 
 :where(fieldset) {
-	border: 1px solid #a0a0a0;
+  border: 1px solid #a0a0a0;
 }
 
 :where(progress) {
-	vertical-align: baseline;
+  vertical-align: baseline;
 }
 
 :where(textarea) {
-	margin: 0;
-	resize: vertical;
+  margin: 0;
+  resize: vertical;
 }
 
 :where([type="search" i]) {
-	-webkit-appearance: textfield;
-	outline-offset: -2px;
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
 }
 
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
-	height: auto;
+  height: auto;
 }
 
 ::-webkit-input-placeholder {
-	color: inherit;
-	opacity: 0.54;
+  color: inherit;
+  opacity: 0.54;
 }
 
 ::-webkit-search-decoration {
-	-webkit-appearance: none;
+  -webkit-appearance: none;
 }
 
 ::-webkit-file-upload-button {
-	-webkit-appearance: button;
-	font: inherit;
+  -webkit-appearance: button;
+  font: inherit;
 }
 
 /* Forms — typography and colour inheritance */
 :where(button, input, select, textarea) {
-	background-color: transparent;
-	border: 1px solid WindowFrame;
-	color: inherit;
-	font: inherit;
-	letter-spacing: inherit;
-	padding: 0.25em 0.375em;
+  background-color: transparent;
+  border: 1px solid WindowFrame;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  padding: 0.25em 0.375em;
 }
 
 :where([type="color" i], [type="range" i]) {
-	border-width: 0;
-	padding: 0;
+  border-width: 0;
+  padding: 0;
 }
 
 /* Interactive */
 :where(details > summary:first-of-type) {
-	display: list-item;
+  display: list-item;
 }
 
 /* Accessibility */
 :where([aria-busy="true" i]) {
-	cursor: progress;
+  cursor: progress;
 }
 
 :where([aria-controls]) {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 :where([aria-disabled="true" i], [disabled]) {
-	cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 :where([aria-hidden="false" i][hidden]) {
-	display: initial;
+  display: initial;
 }
 
 :where([aria-hidden="false" i][hidden]:not(:focus)) {
-	clip: rect(0, 0, 0, 0);
-	position: absolute;
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
 }
 
 /* Reduced motion — !important is required here to override any animation/transition regardless of specificity */
 @media (prefers-reduced-motion: reduce) {
-	*,
-	::before,
-	::after {
-		animation-delay: -1ms !important;
-		animation-duration: 1ms !important;
-		animation-iteration-count: 1 !important;
-		background-attachment: initial !important;
-		scroll-behavior: auto !important;
-		transition-delay: 0s !important;
-		transition-duration: 0s !important;
-	}
+  *,
+  ::before,
+  ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-delay: 0s !important;
+    transition-duration: 0s !important;
+  }
 }
 
 /* Design tokens are provided by @grantcodes/style-dictionary and applied to :root */
 :root {
-	color-scheme: light dark;
-	--grantcodes-ui-theme: "none";
-	background-color: var(--g-theme-color-background-default);
-	color: var(--g-theme-color-content-default);
-	fill: currentColor;
+  color-scheme: light dark;
+  --grantcodes-ui-theme: "none";
+  background-color: var(--g-theme-color-background-default);
+  color: var(--g-theme-color-content-default);
+  fill: currentColor;
 }
 
 /* Force dark mode on any element or subtree */
 .dark {
-	color-scheme: dark;
+  color-scheme: dark;
 }
 
 /* Force light mode on any element or subtree */
 .light {
-	color-scheme: light;
+  color-scheme: light;
 }
 
 /* Allow transitioning auto */
 :root {
-	@supports (interpolate-size: allow-keywords) {
-		interpolate-size: allow-keywords;
-	}
+  @supports (interpolate-size: allow-keywords) {
+    interpolate-size: allow-keywords;
+  }
 }
 
 ::selection {
-	background-color: var(--g-theme-color-background-primary);
+  background-color: var(--g-theme-color-background-primary);
 }
 
 /* Default backdrop styles */
 ::backdrop {
-	background-color: rgba(0, 0, 0, 0.4);
-	backdrop-filter: blur(6px);
+  background-color: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(6px);
 }