@grantcodes/ui 2.10.0 → 2.10.1

package/src/components/dialog/dialog.css

@@ -1,75 +1,74 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 .dialog {
-  width: 100%;
-  padding: 0;
-  max-width: 1200px;
-  background: var(--g-theme-color-background-default);
-  border-style: solid;
-  border-width: var(--g-theme-border-width-sm);
-  border-color: var(--g-theme-color-border-default);
-  border-radius: var(--g-theme-border-radius-md);
-  overflow: hidden;
+	width: 100%;
+	padding: 0;
+	max-width: 1200px;
+	background: var(--g-theme-color-background-default);
+	border-style: solid;
+	border-width: var(--g-theme-border-width-sm);
+	border-color: var(--g-theme-color-border-default);
+	border-radius: var(--g-theme-border-radius-md);
+	overflow: hidden;
 }
 
 .dialog::backdrop {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(6px);
+	position: fixed;
+	inset: 0;
+	background-color: rgba(0, 0, 0, 0.4);
+	backdrop-filter: blur(6px);
 }
 
 .dialog__dismiss {
-  display: block;
-  position: absolute;
-  border: none;
-  line-height: 1;
-  font-size: var(--g-theme-typography-h4-font-size);
-  cursor: pointer;
-  background: transparent;
-  inset-block-start: var(--g-theme-spacing-md);
-  inset-inline-end: var(--g-theme-spacing-md);
-  margin-block-start: -0.25rem;
-  margin-inline-end: -0.25rem;
-  border-radius: 50%;
-  width: 2rem;
-  height: 2rem;
-  padding: var(--g-theme-spacing-xs);
-  justify-content: center;
-  align-items: center;
+	display: block;
+	position: absolute;
+	border: none;
+	line-height: 1;
+	font-size: var(--g-theme-typography-h4-font-size);
+	cursor: pointer;
+	background: transparent;
+	inset-block-start: var(--g-theme-spacing-md);
+	inset-inline-end: var(--g-theme-spacing-md);
+	margin-block-start: -0.25rem;
+	margin-inline-end: -0.25rem;
+	border-radius: 50%;
+	width: 2rem;
+	height: 2rem;
+	padding: var(--g-theme-spacing-xs);
+	justify-content: center;
+	align-items: center;
 }
 
 .dialog__content {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  gap: var(--g-theme-spacing-md);
-  padding: var(--g-theme-spacing-md);
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	gap: var(--g-theme-spacing-md);
+	padding: var(--g-theme-spacing-md);
 }
 
 .dialog__header,
 .dialog__footer {
-  &:empty,
-  &:has(slot:empty) {
-    display: none;
-  }
+	&:empty,
+	&:has(slot:empty) {
+		display: none;
+	}
 }
 
 .dialog__header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--g-theme-spacing-md);
-  border-bottom: var(--g-theme-border-width-sm) solid
-    var(--g-theme-color-border-default);
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	padding: var(--g-theme-spacing-md);
+	border-bottom: var(--g-theme-border-width-sm) solid
+		var(--g-theme-color-border-default);
 }
 
 .dialog__footer ::slotted(grantcodes-button-group) {
-  --g-theme-border-radius-md: 0;
+	--g-theme-border-radius-md: 0;
 }
-

package/src/components/dialog/dialog.react.js

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

package/src/components/dropdown/dropdown.css

@@ -1,124 +1,126 @@
-	*,
-	*::before,
-	*::after {
-		box-sizing: border-box;
-	}
-
-	:host,
-	.dropdown {
-		display: inline-block;
-	}
-
-	.dropdown__trigger {
-		display: inline-block;
-		cursor: pointer;
-	}
-
-	.dropdown__menu {
-		display: none;
-		position: fixed;
-		anchor-name: --dropdown-trigger;
-		z-index: 1000;
-		min-inline-size: 12rem;
-		margin-block: var(--g-theme-spacing-xs);
-		padding-block: var(--g-theme-spacing-sm);
-		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);
-		animation: dropdown-fade-in 0.15s ease-out;
-	}
-
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+:host,
+.dropdown {
+	display: inline-block;
+}
+
+.dropdown__trigger {
+	display: inline-block;
+	cursor: pointer;
+}
+
+.dropdown__menu {
+	display: none;
+	position: fixed;
+	anchor-name: --dropdown-trigger;
+	z-index: 1000;
+	min-inline-size: 12rem;
+	margin-block: var(--g-theme-spacing-xs);
+	padding-block: var(--g-theme-spacing-sm);
+	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);
+	animation: dropdown-fade-in 0.15s ease-out;
+}
+
+.dropdown__menu--open {
+	display: block;
+}
+
+/* Position using anchor positioning when available */
+@supports (anchor-name: --dropdown-trigger) {
 	.dropdown__menu--open {
-		display: block;
-	}
-
-	/* Position using anchor positioning when available */
-	@supports (anchor-name: --dropdown-trigger) {
-		.dropdown__menu--open {
-			position-area: bottom span-right;
-			position-try: block-end, block-start span-inline-start;
-		}
-	}
-
-	.dropdown__menu ::slotted(*) {
-		display: flex;
-		flex-direction: column;
-	}
-
-	/* Dropdown item */
-	.dropdown-item {
-		display: flex;
-		width: 100%;
-		align-items: center;
-		gap: var(--g-theme-spacing-sm);
-		padding-block: var(--g-theme-spacing-sm);
-		padding-inline: var(--g-theme-spacing-md);
-		font-size: var(--g-typography-font-size-16);
-		color: var(--g-theme-color-content-default);
-		cursor: pointer;
-		transition: background-color 0.15s ease;
-		user-select: none;
-	}
-
-	.dropdown-item:hover {
-		background-color: var(--g-theme-color-background-subtle-hover);
-	}
-
-	.dropdown-item:focus {
-		outline: none;
-		background-color: var(--g-theme-color-background-subtle-hover);
-	}
-
-	.dropdown-item:active {
-		background-color: var(--g-theme-color-background-subtle);
-	}
-
-	.dropdown-item--disabled {
-		color: var(--g-theme-color-content-disabled);
-		cursor: not-allowed;
-		opacity: 0.6;
-	}
-
-	.dropdown-item--disabled:hover,
-	.dropdown-item--disabled:focus,
-	.dropdown-item--disabled:active {
-		background-color: transparent;
-	}
-
-	/* Animation */
-	@keyframes dropdown-fade-in {
-		from {
-			opacity: 0;
-			transform: translateY(-0.5rem);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	/* For top placement, reverse animation */
-	.dropdown__menu--top-start,
-	.dropdown__menu--top-end {
-		animation: dropdown-fade-in-top 0.15s ease-out;
-	}
-
-	@keyframes dropdown-fade-in-top {
-		from {
-			opacity: 0;
-			transform: translateY(0.5rem);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	/* View transitions support */
-	@media (prefers-reduced-motion: no-preference) {
-		@supports (view-transition-name: auto) {
-			.dropdown__menu {
-				view-transition-name: dropdown-menu;
-			}
+		position-area: bottom span-right;
+		position-try:
+			block-end,
+			block-start span-inline-start;
+	}
+}
+
+.dropdown__menu ::slotted(*) {
+	display: flex;
+	flex-direction: column;
+}
+
+/* Dropdown item */
+.dropdown-item {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	gap: var(--g-theme-spacing-sm);
+	padding-block: var(--g-theme-spacing-sm);
+	padding-inline: var(--g-theme-spacing-md);
+	font-size: var(--g-typography-font-size-16);
+	color: var(--g-theme-color-content-default);
+	cursor: pointer;
+	transition: background-color 0.15s ease;
+	user-select: none;
+}
+
+.dropdown-item:hover {
+	background-color: var(--g-theme-color-background-subtle-hover);
+}
+
+.dropdown-item:focus {
+	outline: none;
+	background-color: var(--g-theme-color-background-subtle-hover);
+}
+
+.dropdown-item:active {
+	background-color: var(--g-theme-color-background-subtle);
+}
+
+.dropdown-item--disabled {
+	color: var(--g-theme-color-content-disabled);
+	cursor: not-allowed;
+	opacity: 0.6;
+}
+
+.dropdown-item--disabled:hover,
+.dropdown-item--disabled:focus,
+.dropdown-item--disabled:active {
+	background-color: transparent;
+}
+
+/* Animation */
+@keyframes dropdown-fade-in {
+	from {
+		opacity: 0;
+		transform: translateY(-0.5rem);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+/* For top placement, reverse animation */
+.dropdown__menu--top-start,
+.dropdown__menu--top-end {
+	animation: dropdown-fade-in-top 0.15s ease-out;
+}
+
+@keyframes dropdown-fade-in-top {
+	from {
+		opacity: 0;
+		transform: translateY(0.5rem);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+/* View transitions support */
+@media (prefers-reduced-motion: no-preference) {
+	@supports (view-transition-name: auto) {
+		.dropdown__menu {
+			view-transition-name: dropdown-menu;
 		}
 	}
+}

package/src/components/dropdown/dropdown.react.js

@@ -1,6 +1,6 @@
-import React from "react"
-import { createComponent } from "@lit/react"
-import { GrantCodesDropdown, GrantCodesDropdownItem } from "./dropdown.js"
+import React from "react";
+import { createComponent } from "@lit/react";
+import { GrantCodesDropdown, GrantCodesDropdownItem } from "./dropdown.js";
 
 export const Dropdown = createComponent({
 	tagName: "grantcodes-dropdown",
@@ -9,7 +9,7 @@ export const Dropdown = createComponent({
 	events: {
 		onToggle: "toggle",
 	},
-})
+});
 
 export const DropdownItem = createComponent({
 	tagName: "grantcodes-dropdown-item",
@@ -18,4 +18,4 @@ export const DropdownItem = createComponent({
 	events: {
 		onSelect: "select",
 	},
-})
+});

package/src/components/dropzone/dropzone.css

@@ -15,7 +15,8 @@
 	align-items: center;
 	justify-content: center;
 	padding: var(--g-theme-spacing-xl);
-	border: max(var(--g-theme-border-width-md), 0.2rem) dashed var(--g-theme-color-border-default);
+	border: max(var(--g-theme-border-width-md), 0.2rem) dashed
+		var(--g-theme-color-border-default);
 	border-radius: var(--g-theme-border-radius-md);
 	background-color: var(--g-theme-color-background-subtle);
 }
@@ -28,14 +29,15 @@
 }
 
 .dropzone--fullscreen::after {
-	content: '';
+	content: "";
 	display: flex;
 	position: fixed;
 	inset: var(--g-theme-spacing-xl);
 	justify-content: center;
 	align-items: center;
 	padding: var(--g-theme-spacing-xl);
-	border: max(calc(var(--g-theme-border-width-md) * 2), 0.4rem) dashed var(--g-theme-color-border-default);
+	border: max(calc(var(--g-theme-border-width-md) * 2), 0.4rem) dashed
+		var(--g-theme-color-border-default);
 	border-radius: calc(var(--g-theme-border-radius-md) * 2);
 	z-index: 11;
 	font-weight: var(--g-typography-font-weight-700);

package/src/components/dropzone/dropzone.react.js

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

package/src/components/feature-list/feature-list.css

@@ -1,84 +1,84 @@
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
 
-  :host {
-    display: block;
-  }
+:host {
+	display: block;
+}
 
-  .feature-list {
-    padding-block: var(--g-theme-spacing-3xl);
-    padding-inline: var(--g-theme-spacing-md);
-  }
+.feature-list {
+	padding-block: var(--g-theme-spacing-3xl);
+	padding-inline: var(--g-theme-spacing-md);
+}
 
-  .feature-list__container {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
+.feature-list__container {
+	max-width: 1200px;
+	margin: 0 auto;
+}
 
-  .feature-list__title {
-    margin: 0 0 var(--g-theme-spacing-sm);
-    font: var(--g-typography-h4-font);
-    text-align: center;
-    color: var(--g-theme-color-content-default);
-  }
+.feature-list__title {
+	margin: 0 0 var(--g-theme-spacing-sm);
+	font: var(--g-typography-h4-font);
+	text-align: center;
+	color: var(--g-theme-color-content-default);
+}
 
-  .feature-list__subtitle {
-    margin: 0 auto var(--g-theme-spacing-2xl);
-    font-size: var(--g-theme-typography-body-lg-font-size);
-    text-align: center;
-    color: var(--g-theme-color-content-subtle);
-    max-width: 55ch;
-  }
+.feature-list__subtitle {
+	margin: 0 auto var(--g-theme-spacing-2xl);
+	font-size: var(--g-theme-typography-body-lg-font-size);
+	text-align: center;
+	color: var(--g-theme-color-content-subtle);
+	max-width: 55ch;
+}
 
-  .feature-list__grid {
-    display: grid;
-    grid-template-columns: repeat(var(--columns, 3), 1fr);
-    gap: var(--g-theme-spacing-xl);
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
+.feature-list__grid {
+	display: grid;
+	grid-template-columns: repeat(var(--columns, 3), 1fr);
+	gap: var(--g-theme-spacing-xl);
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}
 
-  @media (max-width: 768px) {
-    .feature-list__grid {
-      grid-template-columns: 1fr;
-    }
-  }
+@media (max-width: 768px) {
+	.feature-list__grid {
+		grid-template-columns: 1fr;
+	}
+}
 
-  @media (min-width: 769px) and (max-width: 1024px) {
-    .feature-list__grid {
-      grid-template-columns: repeat(min(var(--columns, 3), 2), 1fr);
-    }
-  }
+@media (min-width: 769px) and (max-width: 1024px) {
+	.feature-list__grid {
+		grid-template-columns: repeat(min(var(--columns, 3), 2), 1fr);
+	}
+}
 
-  .feature-list__link,
-  .feature-list__content {
-    display: block;
-    text-decoration: none;
-    color: inherit;
-  }
+.feature-list__link,
+.feature-list__content {
+	display: block;
+	text-decoration: none;
+	color: inherit;
+}
 
-  .feature-list__link:hover .feature-list__item-title {
-    color: var(--g-theme-color-content-primary, #7c3aed);
-  }
+.feature-list__link:hover .feature-list__item-title {
+	color: var(--g-theme-color-content-primary, #7c3aed);
+}
 
-  .feature-list__icon {
-    display: block;
-    padding: var(--g-theme-spacing-md);
-    border-radius: 50%;
-    inline-size: fit-content;
-    margin-block-end: var(--g-theme-spacing-md);
-    color: var(--g-theme-color-content-primary, currentColor);
-    background-color: var(--g-theme-color-background-primary);
-  }
+.feature-list__icon {
+	display: block;
+	padding: var(--g-theme-spacing-md);
+	border-radius: 50%;
+	inline-size: fit-content;
+	margin-block-end: var(--g-theme-spacing-md);
+	color: var(--g-theme-color-content-primary, currentColor);
+	background-color: var(--g-theme-color-background-primary);
+}
 
-  .feature-list__item-title {
-    font: var(--g-typography-h5-font);
-  }
+.feature-list__item-title {
+	font: var(--g-typography-h5-font);
+}
 
-  .feature-list__item-desc {
-    color: var(--g-theme-color-content-subtle);
-  }
+.feature-list__item-desc {
+	color: var(--g-theme-color-content-subtle);
+}

package/src/components/feature-list/feature-list.react.js

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