@grantcodes/ui 2.10.0 → 2.10.1

package/src/components/avatar/avatar.css

@@ -1,38 +1,36 @@
-
 /* Inlined component-base mixin */
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 :host {
-  display: block;
+	display: block;
 }
 
 .avatar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--g-theme-spacing-2xl);
-  block-size: var(--g-theme-spacing-2xl);
-  border-radius: 50%;
-  overflow: hidden;
-  background-color: var(--g-theme-color-primary-200);
-  color: var(--g-theme-color-primary-900);
-  text-align: center;
-  font-size: var(--g-theme-typography-h6-font-size);
-  font-weight: var(--g-theme-typography-label-default-font-weight);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	inline-size: var(--g-theme-spacing-2xl);
+	block-size: var(--g-theme-spacing-2xl);
+	border-radius: 50%;
+	overflow: hidden;
+	background-color: var(--g-theme-color-primary-200);
+	color: var(--g-theme-color-primary-900);
+	text-align: center;
+	font-size: var(--g-theme-typography-h6-font-size);
+	font-weight: var(--g-theme-typography-label-default-font-weight);
 }
 
 .avatar__image {
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: cover;
-  object-position: center;
+	inline-size: 100%;
+	block-size: 100%;
+	object-fit: cover;
+	object-position: center;
 }
 
 .avatar__fallback {
-  line-height: 1;
+	line-height: 1;
 }
-

package/src/components/avatar/avatar.react.js

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

package/src/components/badge/badge.css

@@ -1,83 +1,83 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 :host {
-  display: inline-flex;
+	display: inline-flex;
 }
 
 .badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--g-theme-spacing-xs);
-  padding-inline: 0.625em;
-  padding-block: 0.375em;
-  border-radius: var(--g-theme-border-radius-md, 0.375rem);
-  font: var(--g-theme-typography-meta);
-  line-height: 1;
-  white-space: nowrap;
-  border-width: 1px;
-  border-style: solid;
-  transition: all 0.2s ease;
+	display: inline-flex;
+	align-items: center;
+	gap: var(--g-theme-spacing-xs);
+	padding-inline: 0.625em;
+	padding-block: 0.375em;
+	border-radius: var(--g-theme-border-radius-md, 0.375rem);
+	font: var(--g-theme-typography-meta);
+	line-height: 1;
+	white-space: nowrap;
+	border-width: 1px;
+	border-style: solid;
+	transition: all 0.2s ease;
 }
 
 /* Soft style variants */
 .badge--primary {
-  background-color: var(--g-theme-color-primary-200);
-  color: var(--g-theme-color-primary-600);
-  border-color: transparent;
+	background-color: var(--g-theme-color-primary-200);
+	color: var(--g-theme-color-primary-600);
+	border-color: transparent;
 }
 
 .badge--success {
-  background-color: color-mix(
-    in srgb,
-    var(--g-color-utility-green-500) 15%,
-    transparent
-  );
-  color: var(--g-color-utility-green-700);
-  border-color: transparent;
+	background-color: color-mix(
+		in srgb,
+		var(--g-color-utility-green-500) 15%,
+		transparent
+	);
+	color: var(--g-color-utility-green-700);
+	border-color: transparent;
 }
 
 .badge--warning {
-  background-color: color-mix(
-    in srgb,
-    var(--g-color-utility-yellow-500) 15%,
-    transparent
-  );
-  color: var(--g-color-utility-yellow-700);
-  border-color: transparent;
+	background-color: color-mix(
+		in srgb,
+		var(--g-color-utility-yellow-500) 15%,
+		transparent
+	);
+	color: var(--g-color-utility-yellow-700);
+	border-color: transparent;
 }
 
 .badge--error {
-  background-color: color-mix(
-    in srgb,
-    var(--g-color-utility-red-500) 15%,
-    transparent
-  );
-  color: var(--g-color-utility-red-700);
-  border-color: transparent;
+	background-color: color-mix(
+		in srgb,
+		var(--g-color-utility-red-500) 15%,
+		transparent
+	);
+	color: var(--g-color-utility-red-700);
+	border-color: transparent;
 }
 
 .badge--info {
-  background-color: color-mix(
-    in srgb,
-    var(--g-color-utility-blue-500) 15%,
-    transparent
-  );
-  color: var(--g-color-utility-blue-700);
-  border-color: transparent;
+	background-color: color-mix(
+		in srgb,
+		var(--g-color-utility-blue-500) 15%,
+		transparent
+	);
+	color: var(--g-color-utility-blue-700);
+	border-color: transparent;
 }
 
 .badge--neutral {
-  background-color: var(--g-theme-color-background-subtle);
-  color: var(--g-theme-color-content-default);
-  border-color: transparent;
+	background-color: var(--g-theme-color-background-subtle);
+	color: var(--g-theme-color-content-default);
+	border-color: transparent;
 }
 
 .badge__content {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25em;
+	display: inline-flex;
+	align-items: center;
+	gap: 0.25em;
 }

package/src/components/badge/badge.react.js

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

package/src/components/breadcrumb/breadcrumb.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 breadcrumbStyles from "./breadcrumb.css" with { type: "css" };
 
 export class GrantCodesBreadcrumb extends LitElement {

package/src/components/breadcrumb/breadcrumb.css

@@ -1,85 +1,85 @@
-  *,
-	*::before,
-	*::after {
-    box-sizing: border-box;
-  }
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
 
-  :host {
-    display: block;
-  }
+:host {
+	display: block;
+}
 
-  .breadcrumb {
-    display: block;
-  }
+.breadcrumb {
+	display: block;
+}
 
-  .breadcrumb__list {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--g-theme-spacing-sm);
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
+.breadcrumb__list {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--g-theme-spacing-sm);
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
 
-  .breadcrumb__item {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--g-theme-spacing-sm);
-    font-size: var(--g-typography-font-size-14);
-    color: var(--g-theme-color-primary-700);
-  }
+.breadcrumb__item {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--g-theme-spacing-sm);
+	font-size: var(--g-typography-font-size-14);
+	color: var(--g-theme-color-primary-700);
+}
 
-  /* Separator using ::after pseudo-element; driven by parent via data-has-separator */
-  :host([data-has-separator]) .breadcrumb__item::after {
-    content: var(--component-breadcrumb-separator, "/");
-    display: inline-block;
-    color: var(--g-theme-color-primary-400);
-    font-weight: var(--g-typography-font-weight-400);
-    user-select: none;
-    pointer-events: none;
-  }
+/* Separator using ::after pseudo-element; driven by parent via data-has-separator */
+:host([data-has-separator]) .breadcrumb__item::after {
+	content: var(--component-breadcrumb-separator, "/");
+	display: inline-block;
+	color: var(--g-theme-color-primary-400);
+	font-weight: var(--g-typography-font-weight-400);
+	user-select: none;
+	pointer-events: none;
+}
 
-  /* Current page styling */
-  .breadcrumb__item[data-current] {
-    font-weight: var(--g-typography-font-weight-600);
-    color: var(--color-base-primary-900);
-  }
+/* Current page styling */
+.breadcrumb__item[data-current] {
+	font-weight: var(--g-typography-font-weight-600);
+	color: var(--color-base-primary-900);
+}
 
-  .breadcrumb__item[data-current]::after {
-    display: none;
-  }
+.breadcrumb__item[data-current]::after {
+	display: none;
+}
 
-  .breadcrumb__link {
-    color: var(--g-theme-color-primary-600);
-    text-decoration: none;
-    transition: color 0.2s ease;
-    border-radius: var(--g-theme-border-radius-md, 0.25rem);
-    padding-inline: 0.25em;
-    padding-block: 0.125em;
-    margin-inline: -0.25em;
-    margin-block: -0.125em;
-  }
+.breadcrumb__link {
+	color: var(--g-theme-color-primary-600);
+	text-decoration: none;
+	transition: color 0.2s ease;
+	border-radius: var(--g-theme-border-radius-md, 0.25rem);
+	padding-inline: 0.25em;
+	padding-block: 0.125em;
+	margin-inline: -0.25em;
+	margin-block: -0.125em;
+}
 
-  .breadcrumb__link:hover {
-    color: var(--g-theme-color-primary-700);
-    text-decoration: underline;
-  }
+.breadcrumb__link:hover {
+	color: var(--g-theme-color-primary-700);
+	text-decoration: underline;
+}
 
-  .breadcrumb__text {
-    display: inline-block;
-  }
+.breadcrumb__text {
+	display: inline-block;
+}
 
-  /* Responsive: Show only last few items on small screens */
-  @media (max-width: 640px) {
-    .breadcrumb__item:not(:last-child):not(:nth-last-child(2)) {
-      display: none;
-    }
+/* Responsive: Show only last few items on small screens */
+@media (max-width: 640px) {
+	.breadcrumb__item:not(:last-child):not(:nth-last-child(2)) {
+		display: none;
+	}
 
-    .breadcrumb__item:nth-last-child(2)::before {
-      content: "...";
-      display: inline-block;
-      margin-inline-end: 0.5rem;
-      color: var(--g-theme-color-primary-400);
-    }
-  }
+	.breadcrumb__item:nth-last-child(2)::before {
+		content: "...";
+		display: inline-block;
+		margin-inline-end: 0.5rem;
+		color: var(--g-theme-color-primary-400);
+	}
+}

package/src/components/breadcrumb/breadcrumb.react.js

@@ -1,15 +1,18 @@
-import React from "react"
-import { createComponent } from "@lit/react"
-import { GrantCodesBreadcrumb, GrantCodesBreadcrumbItem } from "./breadcrumb.js"
+import React from "react";
+import { createComponent } from "@lit/react";
+import {
+	GrantCodesBreadcrumb,
+	GrantCodesBreadcrumbItem,
+} from "./breadcrumb.js";
 
 export const Breadcrumb = createComponent({
 	tagName: "grantcodes-breadcrumb",
 	elementClass: GrantCodesBreadcrumb,
 	react: React,
-})
+});
 
 export const BreadcrumbItem = createComponent({
 	tagName: "grantcodes-breadcrumb-item",
 	elementClass: GrantCodesBreadcrumbItem,
 	react: React,
-})
+});

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

@@ -1,5 +1,7 @@
 import { html, LitElement } from "lit";
-import focusRingStyles from "../../lib/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/button/button.css

@@ -2,61 +2,61 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 :host {
-  display: block;
-  --button-border-radius-start: var(--g-theme-border-radius-md);
-  --button-border-radius-end: var(--g-theme-border-radius-md);
+	display: block;
+	--button-border-radius-start: var(--g-theme-border-radius-md);
+	--button-border-radius-end: var(--g-theme-border-radius-md);
 }
 
 .button {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--g-theme-spacing-sm);
-  background: var(--g-theme-button-primary-color-background-default);
-  color: var(--g-theme-button-primary-color-content-default);
-  border-width: var(--g-theme-border-width-md);
-  border-style: solid;
-  border-color: var(--g-theme-button-primary-color-border-default);
-  padding-block: var(--g-theme-spacing-sm);
-  padding-inline: var(--g-theme-spacing-md);
-  border-start-start-radius: var(--button-border-radius-start);
-  border-start-end-radius: var(--button-border-radius-end);
-  border-end-start-radius: var(--button-border-radius-start);
-  border-end-end-radius: var(--button-border-radius-end);
-  font: var(--g-theme-typography-label-default);
-  font-family: var(--g-theme-typography-label-font-family);
-  text-decoration: none;
-  transition-property: color, border-color, background-color, outline;
+	display: inline-flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--g-theme-spacing-sm);
+	background: var(--g-theme-button-primary-color-background-default);
+	color: var(--g-theme-button-primary-color-content-default);
+	border-width: var(--g-theme-border-width-md);
+	border-style: solid;
+	border-color: var(--g-theme-button-primary-color-border-default);
+	padding-block: var(--g-theme-spacing-sm);
+	padding-inline: var(--g-theme-spacing-md);
+	border-start-start-radius: var(--button-border-radius-start);
+	border-start-end-radius: var(--button-border-radius-end);
+	border-end-start-radius: var(--button-border-radius-start);
+	border-end-end-radius: var(--button-border-radius-end);
+	font: var(--g-theme-typography-label-default);
+	font-family: var(--g-theme-typography-label-font-family);
+	text-decoration: none;
+	transition-property: color, border-color, background-color, outline;
 }
 
 .button:hover,
 .button:focus-visible {
-  color: var(--g-theme-button-primary-color-content-hover);
-  background: var(--g-theme-button-primary-color-background-hover);
-  border-color: var(--g-theme-button-primary-color-border-hover);
-  cursor: pointer;
-  text-decoration: none;
+	color: var(--g-theme-button-primary-color-content-hover);
+	background: var(--g-theme-button-primary-color-background-hover);
+	border-color: var(--g-theme-button-primary-color-border-hover);
+	cursor: pointer;
+	text-decoration: none;
 }
 
 .button:active {
-  color: var(--g-theme-button-primary-color-content-active);
-  background: var(--g-theme-button-primary-color-background-active);
-  border-color: var(--g-theme-button-primary-color-border-active);
+	color: var(--g-theme-button-primary-color-content-active);
+	background: var(--g-theme-button-primary-color-background-active);
+	border-color: var(--g-theme-button-primary-color-border-active);
 }
 
 .button:active {
-  transform: translateY(1px);
+	transform: translateY(1px);
 }
 
 .button[disabled] {
-  background: var(--g-theme-button-primary-color-background-disabled);
-  color: var(--g-theme-button-primary-color-content-disabled);
-  border-color: var(--g-theme-button-primary-color-border-disabled);
-  cursor: not-allowed;
-  filter: grayscale(70%);
-  opacity: 0.8;
+	background: var(--g-theme-button-primary-color-background-disabled);
+	color: var(--g-theme-button-primary-color-content-disabled);
+	border-color: var(--g-theme-button-primary-color-border-disabled);
+	cursor: not-allowed;
+	filter: grayscale(70%);
+	opacity: 0.8;
 }

package/src/components/button/button.react.js

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

package/src/components/button-group/button-group.css

@@ -1,39 +1,39 @@
-  /* Inlined component-base mixin */
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
+/* Inlined component-base mixin */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
 
-  :host {
-    display: block;
-  }
+:host {
+	display: block;
+}
 
-  .button-group {
-    display: inline-flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    background: var(--g-theme-color-background-default);
-    border-radius: var(--g-theme-border-radius-md);
-    min-width: fit-content;
-    max-width: 100%;
-    overflow: hidden;
-  }
+.button-group {
+	display: inline-flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	background: var(--g-theme-color-background-default);
+	border-radius: var(--g-theme-border-radius-md);
+	min-width: fit-content;
+	max-width: 100%;
+	overflow: hidden;
+}
 
-  .button-group ::slotted(grantcodes-button) {
-    --button-border-radius-start: 0;
-    --button-border-radius-end: 0;
-  }
+.button-group ::slotted(grantcodes-button) {
+	--button-border-radius-start: 0;
+	--button-border-radius-end: 0;
+}
 
-  .button-group ::slotted(grantcodes-button:first-child) {
-    --button-border-radius-start: var(--g-theme-border-radius-md);
-  }
+.button-group ::slotted(grantcodes-button:first-child) {
+	--button-border-radius-start: var(--g-theme-border-radius-md);
+}
 
-  .button-group ::slotted(grantcodes-button:last-child) {
-    --button-border-radius-end: var(--g-theme-border-radius-md);
-  }
+.button-group ::slotted(grantcodes-button:last-child) {
+	--button-border-radius-end: var(--g-theme-border-radius-md);
+}
 
-  .button-group ::slotted(grantcodes-button:focus-visible) {
-    position: relative;
-    z-index: 1;
-  }
+.button-group ::slotted(grantcodes-button:focus-visible) {
+	position: relative;
+	z-index: 1;
+}

package/src/components/button-group/button-group.react.js

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