@grantcodes/ui 2.10.0 → 2.10.2

package/src/components/toast/toast.css

@@ -1,198 +1,198 @@
-  *,
-	*::before,
-	*::after {
-    box-sizing: border-box;
-  }
-
-  :host {
-    display: block;
-    pointer-events: none;
-  }
-
-  /* Toast Container */
-  .toast-container {
-    position: fixed;
-    z-index: 9999;
-    display: flex;
-    flex-direction: column;
-    gap: var(--g-theme-spacing-sm);
-    padding: var(--g-theme-spacing-md);
-    pointer-events: none;
-    max-inline-size: 100vw;
-    max-block-size: 100vh;
-    overflow: hidden;
-  }
-
-  /* Container positions */
-  .toast-container--top-left {
-    inset-block-start: 0;
-    inset-inline-start: 0;
-  }
-
-  .toast-container--top-center {
-    inset-block-start: 0;
-    inset-inline-start: 50%;
-    transform: translateX(-50%);
-  }
-
-  .toast-container--top-right {
-    inset-block-start: 0;
-    inset-inline-end: 0;
-  }
-
-  .toast-container--bottom-left {
-    inset-block-end: 0;
-    inset-inline-start: 0;
-  }
-
-  .toast-container--bottom-center {
-    inset-block-end: 0;
-    inset-inline-start: 50%;
-    transform: translateX(-50%);
-  }
-
-  .toast-container--bottom-right {
-    inset-block-end: 0;
-    inset-inline-end: 0;
-  }
-
-  /* Toast */
-  .toast {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--g-theme-spacing-sm);
-    min-inline-size: 300px;
-    max-inline-size: 500px;
-    padding-block: var(--g-theme-spacing-md);
-    padding-inline: var(--g-theme-spacing-md);
-    border-radius: var(--g-theme-border-radius-md);
-    background-color: var(--g-theme-color-background-default);
-    border-inline-start-width: 4px;
-    border-inline-start-style: solid;
-    pointer-events: auto;
-    opacity: 0;
-    transform: translateY(-1rem);
-    transition:
-      opacity 0.3s ease,
-      transform 0.3s ease;
-  }
-
-  .toast--visible {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  /* Variant colors */
-  .toast--info {
-    border-inline-start-color: var(--g-theme-color-background-utility-info);
-  }
-
-  .toast--success {
-    border-inline-start-color: var(--g-theme-color-background-utility-success);
-  }
-
-  .toast--warning {
-    border-inline-start-color: var(--g-theme-color-background-utility-warning);
-  }
-
-  .toast--error {
-    border-inline-start-color: var(--g-theme-color-background-utility-error);
-  }
-
-  /* Toast icon */
-  .toast__icon {
-    flex-shrink: 0;
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
-  }
-
-  .toast--info .toast__icon {
-    color: var(--g-theme-color-background-utility-info);
-  }
-
-  .toast--success .toast__icon {
-    color: var(--g-theme-color-background-utility-success);
-  }
-
-  .toast--warning .toast__icon {
-    color: var(--g-theme-color-background-utility-warning);
-  }
-
-  .toast--error .toast__icon {
-    color: var(--g-theme-color-background-utility-error);
-  }
-
-  /* Toast content */
-  .toast__content {
-    flex: 1;
-    min-inline-size: 0;
-  }
-
-  .toast__title {
-    font-weight: var(--g-typography-font-weight-600);
-    font-size: var(--g-typography-font-size-16);
-    margin-block-end: 0.25rem;
-    color: var(--g-theme-color-content-default);
-  }
-
-  .toast__message {
-    font-size: var(--g-typography-font-size-14);
-    color: var(--g-theme-color-content-subtle);
-    line-height: 1.5;
-  }
-
-  /* Close button */
-  .toast__close {
-    all: unset;
-    flex-shrink: 0;
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--g-theme-border-radius-md);
-    color: var(--g-theme-color-content-subtle);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    margin-inline-start: 0.5rem;
-  }
-
-  .toast__close:hover {
-    color: var(--g-theme-color-content-default);
-    background-color: var(--g-theme-color-background-subtle-hover);
-  }
-
-  /* Bottom position toasts slide up instead of down */
-  .toast--bottom-left,
-  .toast--bottom-center,
-  .toast--bottom-right {
-    transform: translateY(1rem);
-  }
-
-  .toast--bottom-left.toast--visible,
-  .toast--bottom-center.toast--visible,
-  .toast--bottom-right.toast--visible {
-    transform: translateY(0);
-  }
-
-  /* Responsive */
-  @media (max-width: 640px) {
-    .toast-container {
-      inset-inline: 0;
-      transform: none;
-    }
-
-    .toast {
-      min-inline-size: auto;
-      inline-size: 100%;
-    }
-  }
-
-  /* View transitions */
-  @media (prefers-reduced-motion: no-preference) {
-    @supports (view-transition-name: auto) {
-      .toast {
-        view-transition-name: toast;
-      }
-    }
-  }
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+:host {
+	display: block;
+	pointer-events: none;
+}
+
+/* Toast Container */
+.toast-container {
+	position: fixed;
+	z-index: 9999;
+	display: flex;
+	flex-direction: column;
+	gap: var(--g-theme-spacing-sm);
+	padding: var(--g-theme-spacing-md);
+	pointer-events: none;
+	max-inline-size: 100vw;
+	max-block-size: 100vh;
+	overflow: hidden;
+}
+
+/* Container positions */
+.toast-container--top-left {
+	inset-block-start: 0;
+	inset-inline-start: 0;
+}
+
+.toast-container--top-center {
+	inset-block-start: 0;
+	inset-inline-start: 50%;
+	transform: translateX(-50%);
+}
+
+.toast-container--top-right {
+	inset-block-start: 0;
+	inset-inline-end: 0;
+}
+
+.toast-container--bottom-left {
+	inset-block-end: 0;
+	inset-inline-start: 0;
+}
+
+.toast-container--bottom-center {
+	inset-block-end: 0;
+	inset-inline-start: 50%;
+	transform: translateX(-50%);
+}
+
+.toast-container--bottom-right {
+	inset-block-end: 0;
+	inset-inline-end: 0;
+}
+
+/* Toast */
+.toast {
+	display: flex;
+	align-items: flex-start;
+	gap: var(--g-theme-spacing-sm);
+	min-inline-size: 300px;
+	max-inline-size: 500px;
+	padding-block: var(--g-theme-spacing-md);
+	padding-inline: var(--g-theme-spacing-md);
+	border-radius: var(--g-theme-border-radius-md);
+	background-color: var(--g-theme-color-background-default);
+	border-inline-start-width: 4px;
+	border-inline-start-style: solid;
+	pointer-events: auto;
+	opacity: 0;
+	transform: translateY(-1rem);
+	transition:
+		opacity 0.3s ease,
+		transform 0.3s ease;
+}
+
+.toast--visible {
+	opacity: 1;
+	transform: translateY(0);
+}
+
+/* Variant colors */
+.toast--info {
+	border-inline-start-color: var(--g-theme-color-background-utility-info);
+}
+
+.toast--success {
+	border-inline-start-color: var(--g-theme-color-background-utility-success);
+}
+
+.toast--warning {
+	border-inline-start-color: var(--g-theme-color-background-utility-warning);
+}
+
+.toast--error {
+	border-inline-start-color: var(--g-theme-color-background-utility-error);
+}
+
+/* Toast icon */
+.toast__icon {
+	flex-shrink: 0;
+	inline-size: 1.5rem;
+	block-size: 1.5rem;
+}
+
+.toast--info .toast__icon {
+	color: var(--g-theme-color-background-utility-info);
+}
+
+.toast--success .toast__icon {
+	color: var(--g-theme-color-background-utility-success);
+}
+
+.toast--warning .toast__icon {
+	color: var(--g-theme-color-background-utility-warning);
+}
+
+.toast--error .toast__icon {
+	color: var(--g-theme-color-background-utility-error);
+}
+
+/* Toast content */
+.toast__content {
+	flex: 1;
+	min-inline-size: 0;
+}
+
+.toast__title {
+	font-weight: var(--g-typography-font-weight-600);
+	font-size: var(--g-typography-font-size-16);
+	margin-block-end: 0.25rem;
+	color: var(--g-theme-color-content-default);
+}
+
+.toast__message {
+	font-size: var(--g-typography-font-size-14);
+	color: var(--g-theme-color-content-subtle);
+	line-height: 1.5;
+}
+
+/* Close button */
+.toast__close {
+	all: unset;
+	flex-shrink: 0;
+	inline-size: 1.5rem;
+	block-size: 1.5rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--g-theme-border-radius-md);
+	color: var(--g-theme-color-content-subtle);
+	cursor: pointer;
+	transition: all 0.2s ease;
+	margin-inline-start: 0.5rem;
+}
+
+.toast__close:hover {
+	color: var(--g-theme-color-content-default);
+	background-color: var(--g-theme-color-background-subtle-hover);
+}
+
+/* Bottom position toasts slide up instead of down */
+.toast--bottom-left,
+.toast--bottom-center,
+.toast--bottom-right {
+	transform: translateY(1rem);
+}
+
+.toast--bottom-left.toast--visible,
+.toast--bottom-center.toast--visible,
+.toast--bottom-right.toast--visible {
+	transform: translateY(0);
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+	.toast-container {
+		inset-inline: 0;
+		transform: none;
+	}
+
+	.toast {
+		min-inline-size: auto;
+		inline-size: 100%;
+	}
+}
+
+/* View transitions */
+@media (prefers-reduced-motion: no-preference) {
+	@supports (view-transition-name: auto) {
+		.toast {
+			view-transition-name: toast;
+		}
+	}
+}

package/src/components/toast/toast.react.js

@@ -1,6 +1,6 @@
-import React from "react"
-import { createComponent } from "@lit/react"
-import { GrantCodesToast, GrantCodesToastContainer } from "./toast.js"
+import React from "react";
+import { createComponent } from "@lit/react";
+import { GrantCodesToast, GrantCodesToastContainer } from "./toast.js";
 
 export const Toast = createComponent({
 	tagName: "grantcodes-toast",
@@ -9,10 +9,10 @@ export const Toast = createComponent({
 	events: {
 		onDismiss: "dismiss",
 	},
-})
+});
 
 export const ToastContainer = createComponent({
 	tagName: "grantcodes-toast-container",
 	elementClass: GrantCodesToastContainer,
 	react: React,
-})
+});

package/src/components/tooltip/tooltip.css

@@ -1,78 +1,79 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 :host,
 .tooltip,
 .tooltip__slot {
-  width: fit-content;
+	width: fit-content;
 }
 
 .tooltip {
-  position: relative;
+	position: relative;
 }
 
 .tooltip__slot {
-  padding: var(--g-theme-spacing-sm);
-  margin: calc(-1 * var(--g-theme-spacing-sm));
-  /* Anchor name will be set via JavaScript to include unique ID */
+	padding: var(--g-theme-spacing-sm);
+	margin: calc(-1 * var(--g-theme-spacing-sm));
+	/* Anchor name will be set via JavaScript to include unique ID */
 }
 
 .tooltip__content {
-  display: none;
-  width: fit-content;
-  margin: 0;
-  max-width: 100%;
-  min-width: 6rem;
-  z-index: 100;
-  border-radius: var(--g-theme-border-radius-md);
-  padding: 0.6em 1em;
-  font-size: var(--g-typography-font-size-14);
-  line-height: 1;
-  color: var(--g-theme-color-primary-900);
-  background-color: var(--g-theme-color-primary-100);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  user-select: none;
-  text-align: center;
-  opacity: 0;
-  transition: opacity 0.2s;
-  transition-behavior: allow-discrete;
-  
-  /* Modern CSS Anchor Positioning API */
-  /* This positions the tooltip relative to its anchor (the slot) */
-  position: absolute;
-  
-  /* Try anchor positioning first (modern browsers) */
-  position-anchor: var(--tooltip-anchor, none);
-  position-area: block-end;
-  margin-block-start: 0.5rem;
-  
-  /* Fallback for browsers without anchor positioning support */
-  @supports not (position-area: block-end) {
-    /* Traditional positioning as fallback */
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    margin-top: 0.5rem;
-  }
+	display: none;
+	width: fit-content;
+	margin: 0;
+	max-width: 100%;
+	min-width: 6rem;
+	z-index: 100;
+	border-radius: var(--g-theme-border-radius-md);
+	padding: 0.6em 1em;
+	font-size: var(--g-typography-font-size-14);
+	line-height: 1;
+	color: var(--g-theme-color-primary-900);
+	background-color: var(--g-theme-color-primary-100);
+	box-shadow:
+		0 1px 3px rgba(0, 0, 0, 0.12),
+		0 1px 2px rgba(0, 0, 0, 0.24);
+	user-select: none;
+	text-align: center;
+	opacity: 0;
+	transition: opacity 0.2s;
+	transition-behavior: allow-discrete;
+
+	/* Modern CSS Anchor Positioning API */
+	/* This positions the tooltip relative to its anchor (the slot) */
+	position: absolute;
+
+	/* Try anchor positioning first (modern browsers) */
+	position-anchor: var(--tooltip-anchor, none);
+	position-area: block-end;
+	margin-block-start: 0.5rem;
+
+	/* Fallback for browsers without anchor positioning support */
+	@supports not (position-area: block-end) {
+		/* Traditional positioning as fallback */
+		position: absolute;
+		top: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+		margin-top: 0.5rem;
+	}
 }
 
 .tooltip__slot:hover + .tooltip__content,
 .tooltip__slot:focus + .tooltip__content,
 .tooltip__slot:focus-within + .tooltip__content {
-  display: block;
-  opacity: 1;
+	display: block;
+	opacity: 1;
 }
 
 /* Optional: Position tooltip above when near bottom of viewport */
 @media (prefers-reduced-motion: no-preference) {
-  .tooltip__content {
-    @starting-style {
-      opacity: 0;
-    }
-  }
+	.tooltip__content {
+		@starting-style {
+			opacity: 0;
+		}
+	}
 }
-

package/src/components/tooltip/tooltip.react.js

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

package/src/css/elements/forms/input.css

@@ -28,7 +28,7 @@
 	background: var(--g-theme-form-color-background-focus);
 }
 
-:where(input, textarea, select):invalid:not(:active) {
+:where(input, textarea, select):focus:invalid {
 	border-color: var(--g-theme-form-color-border-error);
 }