@a-type/ui 6.0.55 → 6.0.56

package/dist/colors.module.css

@@ -1,4 +1,4 @@
-.bgWash {
+@layer components {.bgWash {
 	@apply --mx-bg(var(--m-color-main-wash));
 }
 .bgLight {
@@ -57,3 +57,4 @@
 .bgBetweenMidHeavy {
 	@apply --mx-bg(--fn-color-between(var(--m-color-main), var(--m-color-main-heavy)));
 }
+}

package/dist/components/actions/ActionBar.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	position: relative;
 	height: max-content;
 	width: 100%;
@@ -32,3 +32,4 @@
 		flex-wrap: wrap;
 	}
 }
+}

package/dist/components/actions/ActionButton.module.css

@@ -1,6 +1,7 @@
-.button {
+@layer components {.button {
 	font-weight: normal;
 }
 .collapse {
 	padding: var(--m-space-sm);
 }
+}

package/dist/components/avatar/Avatar.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	position: relative;
 	aspect-ratio: 1/1;
 	width: --fn-literal(var(--avatar-size, 24px));
@@ -33,3 +33,4 @@
 .fallback {
 	font-size: --fn-literal(calc(0.5px * var(--avatar-size, 24px)));
 }
+}

package/dist/components/box/Box.module.css

@@ -1,4 +1,4 @@
-@layer box {
+@layer components {@layer box {
 	.root {
 		display: flex;
 		position: relative;
@@ -289,3 +289,4 @@
 	inherits: false;
 	initial-value:;
 }
+}

package/dist/components/button/Button.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	user-select: none;
 	appearance: none;
 	cursor: pointer;
@@ -146,3 +146,4 @@
 		display: none;
 	}
 }
+}

package/dist/components/camera/Camera.module.css

@@ -1,4 +1,4 @@
-.fullscreen {
+@layer components {.fullscreen {
 	position: fixed;
 	inset: 0;
 	z-index: 1000;
@@ -63,3 +63,4 @@
 	top: var(--m-space-xs);
 	right: var(--m-space-xs);
 }
+}

package/dist/components/card/Card.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	position: relative;
 	height: max-content;
 	display: flex;
@@ -181,3 +181,4 @@
 	border-width: var(--m-lineWidth-sm);
 	border-radius: var(--m-action-radius);
 }
+}

package/dist/components/checkbox/Checkbox.module.css

@@ -1,4 +1,4 @@
-@keyframes checkbox-fade {
+@layer components {@keyframes checkbox-fade {
 	from {
 		background-color: var(--mx-bg-ref);
 		opacity: 1;
@@ -72,3 +72,4 @@
 	transform: translate(-50%, -50%);
 	color: var(--m-color-main-ink);
 }
+}

package/dist/components/chip/Chip.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	display: inline-flex;
 	align-items: center;
 	gap: var(--m-space-md);
@@ -30,3 +30,4 @@
 		@apply --mx-fg(var(--m-color-neutral-ink));
 	}
 }
+}

package/dist/components/collapsible/Collapsible.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	overflow: clip;
 	transition: all var(--m-duration) var(--m-easing);
 
@@ -34,3 +34,4 @@
 		transform: rotate(180deg);
 	}
 }
+}

package/dist/components/combobox/Combobox.module.css

@@ -1,4 +1,4 @@
-.backdrop {
+@layer components {.backdrop {
 	position: fixed;
 	inset: 0;
 }
@@ -168,3 +168,4 @@
 	@apply --mx-fg(var(--m-color-neutral-heavy));
 	padding: var(--m-space-md);
 }
+}

package/dist/components/datePicker/Calendar.module.css

@@ -1,4 +1,4 @@
-.monthRow {
+@layer components {.monthRow {
 	width: 100%;
 	display: flex;
 	flex-direction: row;
@@ -165,3 +165,4 @@
 		border-radius: var(--m-radius-sm);
 	}
 }
+}

package/dist/components/datePicker/datePicker.module.css

@@ -1,7 +1,8 @@
-.root {
+@layer components {.root {
 	width: --fn-literal(calc(var(--day-size, 32px) * 7));
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 }
+}

package/dist/components/datePicker/dateRangePicker.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	display: flex;
 	justify-content: center;
 }
@@ -36,3 +36,4 @@
 		display: grid;
 	}
 }
+}

package/dist/components/dialog/Dialog.module.css

@@ -1,4 +1,4 @@
-.overlay {
+@layer components {.overlay {
 	position: fixed;
 	inset: 0;
 	@apply --mx-shadow;
@@ -186,3 +186,4 @@
 	gap: var(--m-space-sm);
 	border-radius: var(--m-surface-radius);
 }
+}

package/dist/components/divider/Divider.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	position: relative;
 	height: --fn-literal(1px);
 	width: 100%;
@@ -8,3 +8,4 @@
 		margin-block: var(--m-space-md);
 	}
 }
+}

package/dist/components/dropdownMenu/DropdownMenu.module.css

@@ -1,3 +1,4 @@
-.content {
+@layer components {.content {
 	min-width: 220px;
 }
+}

package/dist/components/editableText/EditableText.module.css

@@ -1,4 +1,4 @@
-.input {
+@layer components {.input {
 	& input {
 		font-size: inherit;
 	}
@@ -42,3 +42,4 @@
 	font-size: 1rem;
 	@apply --mx-stroke(var(--m-color-main-heavy));
 }
+}

package/dist/components/emojiPicker/EmojiPicker.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	height: --fn-literal(368px);
 	width: fit-content;
 	display: flex;
@@ -82,3 +82,4 @@
 .skinToneSelector {
 	margin-right: auto;
 }
+}

package/dist/components/forms/EmojiField.module.css

@@ -1,4 +1,4 @@
-.triggerIcon {
+@layer components {.triggerIcon {
 	height: 20px;
 	width: 20px;
 	display: flex;
@@ -6,3 +6,4 @@
 	justify-content: center;
 	font-size: 20px;
 }
+}

package/dist/components/forms/Field.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	display: grid;
 	grid-template-areas: 'label' 'control' 'description';
 	justify-content: start;
@@ -60,3 +60,4 @@
 	margin-top: var(--m-space-sm);
 	margin-left: calc(var(--m-global-shape-roundness) * var(--m-space-md));
 }
+}

package/dist/components/forms/Form.module.css

@@ -1,6 +1,7 @@
-.form {
+@layer components {.form {
 	display: flex;
 	align-items: start;
 	flex-direction: column;
 	gap: var(--m-space-lg);
 }
+}

package/dist/components/forms/NumberStepperField.module.css

@@ -1,5 +1,6 @@
-.root {
+@layer components {.root {
 	display: flex;
 	flex-direction: column;
 	gap: var(--m-space-xs);
 }
+}

package/dist/components/forms/TextField.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
@@ -9,3 +9,4 @@
 .input {
 	width: 100%;
 }
+}

package/dist/components/horizontalList/HorizontalList.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	width: 100%;
 	max-height: 300px;
 	display: flex;
@@ -48,3 +48,4 @@
 		transform: rotate(180deg);
 	}
 }
+}

package/dist/components/icon/Icon.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	fill: none;
 	flex-shrink: 0;
 
@@ -18,3 +18,4 @@
 	width: var(--size);
 	height: var(--size);
 }
+}

package/dist/components/imageUploader/ImageUploader.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	position: relative;
 	border-radius: var(--m-surface-radius);
 }
@@ -65,3 +65,4 @@
 		@apply --mx-bg-heavier(2);
 	}
 }
+}

package/dist/components/img/Img.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	&[data-full='width'],
 	&[data-full='true'] {
 		width: 100%;
@@ -40,3 +40,4 @@
 		object-position: center;
 	}
 }
+}

package/dist/components/input/Input.module.css

@@ -1,4 +1,4 @@
-.input {
+@layer components {.input {
 	display: flex;
 	flex-grow: 1;
 	user-select: auto;
@@ -98,3 +98,4 @@
 		margin-right: calc(-1 * var(--m-control-padding-inline));
 	}
 }
+}

package/dist/components/layouts/PageContent.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	display: flex;
 	flex-direction: column;
 	align-items: stretch;
@@ -23,3 +23,4 @@
 
 	grid-area: content;
 }
+}

package/dist/components/layouts/PageFixedArea.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	position: sticky;
 	top: 0;
 	z-index: var(--z-nav);
@@ -9,3 +9,4 @@
 	gap: var(--m-space-sm);
 	@apply --mx-bg(inherit);
 }
+}

package/dist/components/layouts/PageNav.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	grid-area: nav;
 	position: sticky;
 	bottom: 0;
@@ -29,3 +29,4 @@
 		height: auto;
 	}
 }
+}

package/dist/components/layouts/PageNowPlaying.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -44,3 +44,4 @@
 		}
 	}
 }
+}

package/dist/components/layouts/PageRoot.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	align-items: stretch;
 	justify-content: center;
 	min-height: 100dvh;
@@ -27,3 +27,4 @@
 		grid-template-columns: 1fr auto min(800px, 70vw) 1fr;
 	}
 }
+}

package/dist/components/layouts/PageSection.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	max-width: 80vw;
 	width: 100%;
 	padding: var(--m-space-md);
@@ -17,3 +17,4 @@
 	align-items: start;
 	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 }
+}

package/dist/components/lightbox/Lightbox.module.css

@@ -1,4 +1,4 @@
-.trigger {
+@layer components {.trigger {
 	cursor: pointer;
 
 	&:focus {
@@ -102,3 +102,4 @@
 	min-height: 80px;
 	min-width: 80px;
 }
+}

package/dist/components/lists/lists.module.css

@@ -1,4 +1,4 @@
-.ol,
+@layer components {.ol,
 .ul {
 	list-style-position: inside;
 	margin: 0;
@@ -29,3 +29,4 @@
 .ul {
 	list-style: disc;
 }
+}

package/dist/components/marquee/marquee.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	position: relative;
 	height: 100%;
 	width: 100%;
@@ -30,3 +30,4 @@
 		object-fit: cover;
 	}
 }
+}

package/dist/components/navBar/NavBar.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	display: grid;
 	grid-auto-columns: 1fr;
 	grid-auto-flow: column;
@@ -141,3 +141,4 @@
 	@apply --mx-shadow;
 	--mx-shadow-value: var(--m-shadow-sm);
 }
+}

package/dist/components/note/Note.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	@apply --mx-shadow;
 
 	&:has(input:focus[data-focus-clicked]),
@@ -112,3 +112,4 @@
 	width: 100%;
 	padding: 0;
 }
+}

package/dist/components/numberStepper/NumberStepper.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	width: min-content;
 	display: flex;
 	flex-shrink: 0;
@@ -30,3 +30,4 @@
 	width: 80px;
 	text-align: center;
 }
+}

package/dist/components/particles/ParticleLayer.module.css

@@ -1,4 +1,4 @@
-.canvas {
+@layer components {.canvas {
 	pointer-events: none;
 	position: fixed;
 	inset: 0;
@@ -6,3 +6,4 @@
 	width: 100%;
 	height: 100%;
 }
+}

package/dist/components/peek/Peek.module.css

@@ -1,4 +1,4 @@
-@keyframes peekClose {
+@layer components {@keyframes peekClose {
 	from {
 		height: calc(var(--collapsible-height) + 80px);
 		max-height: none;
@@ -94,3 +94,4 @@
 	opacity: 1;
 	transition: opacity var(--m-duration) var(--m-easing);
 }
+}

package/dist/components/popover/Popover.module.css

@@ -1,4 +1,4 @@
-.close {
+@layer components {.close {
 	position: absolute;
 	right: var(--m-space-sm);
 	top: var(--m-space-sm);
@@ -22,3 +22,4 @@
 	line-height: var(--m-prose-ambient-lineHeight);
 	@apply --mx-fg(var(--m-color-neutral-heavy));
 }
+}

package/dist/components/primitives/menus.module.css

@@ -1,4 +1,4 @@
-.popup {
+@layer components {.popup {
 	box-sizing: border-box;
 
 	min-width: 120px;
@@ -260,3 +260,4 @@
 		transform: rotate(180deg);
 	}
 }
+}

package/dist/components/progress/Progress.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	width: 100%;
 
 	display: grid;
@@ -52,3 +52,4 @@
 	line-height: var(--m-prose-ambient-lineHeight);
 	font-weight: 500;
 }
+}

package/dist/components/pwaInstall/PwaInstall.module.css

@@ -1,4 +1,4 @@
-.dialogContent {
+@layer components {.dialogContent {
 	display: flex;
 	flex-direction: column;
 	gap: var(--m-space-xs);
@@ -21,3 +21,4 @@
 .appDescription {
 	margin-bottom: var(--m-space-sm);
 }
+}

package/dist/components/quickAction/QuickAction.module.css

@@ -1,4 +1,4 @@
-.trigger {
+@layer components {.trigger {
 	position: relative;
 	justify-content: center;
 	padding: var(--m-space-xs);
@@ -57,3 +57,4 @@
 		opacity: 0;
 	}
 }
+}

package/dist/components/richEditor/richEditor.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	@apply --mx-prose-secondary;
 	width: 100%;
 
@@ -100,3 +100,4 @@
 		border-width: 0;
 	}
 }
+}

package/dist/components/scrollArea/ScrollArea.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	box-sizing: border-box;
 	min-height: 0;
 	min-width: 0;
@@ -185,3 +185,4 @@
 .corner {
 	@apply --mx-bg(transparent);
 }
+}

package/dist/components/select/Select.module.css

@@ -1,4 +1,4 @@
-.trigger {
+@layer components {.trigger {
 	display: inline-flex;
 	font-weight: normal;
 	gap: var(--m-space-md);
@@ -44,3 +44,4 @@
 		min-width: calc(var(--anchor-width) + 2rem);
 	}
 }
+}

package/dist/components/skeletons/skeletons.module.css

@@ -1,4 +1,4 @@
-@keyframes skeleton {
+@layer components {@keyframes skeleton {
 	0% {
 		background-position: 0% 50%;
 	}
@@ -31,3 +31,4 @@
 		transparent 100%
 	);
 }
+}

package/dist/components/slider/Slider.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	width: 100%;
 	box-sizing: border-box;
 }
@@ -95,3 +95,4 @@
 		opacity: 0.5;
 	}
 }
+}

package/dist/components/spinner/Spinner.module.css

@@ -1,4 +1,4 @@
-@keyframes spinner-rotate {
+@layer components {@keyframes spinner-rotate {
 	from {
 		transform: rotate(0deg);
 	}
@@ -52,3 +52,4 @@
 	justify-content: center;
 	gap: var(--m-space-md);
 }
+}

package/dist/components/splashScreen/SplashScreen.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	position: relative;
 	width: 100%;
 	height: 100%;
@@ -52,3 +52,4 @@
 		transform: scale(0.6);
 	}
 }
+}

package/dist/components/switch/Switch.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	all: unset;
 	position: relative;
 	height: --fn-literal(20px);
@@ -61,3 +61,4 @@
 		font-size: var(--m-prose-ambient-size);
 	}
 }
+}

package/dist/components/tabs/tabs.module.css

@@ -1,4 +1,4 @@
-.styledList {
+@layer components {.styledList {
 	position: relative;
 	display: flex;
 	flex-direction: row;
@@ -137,3 +137,4 @@
 
 	@apply --mx-fg(--fn-color-faded(var(--m-color-neutral-heavy), 50%));
 }
+}

package/dist/components/textArea/TextArea.module.css

@@ -1,4 +1,4 @@
-.input {
+@layer components {.input {
 	font-family: inherit;
 	overflow: clip;
 	@apply --mx-fg(inherit);
@@ -12,3 +12,4 @@
 .border {
 	padding-block-end: var(--m-space-sm);
 }
+}

package/dist/components/toasts/toasts.module.css

@@ -1,4 +1,4 @@
-.toaster {
+@layer components {.toaster {
 	pointer-events: none;
 	overflow: clip;
 }
@@ -199,3 +199,4 @@
 		opacity: 0;
 	}
 }
+}

package/dist/components/toggleGroup/toggleGroup.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	width: fit-content;
 	display: inline-flex;
 	gap: var(--m-space-sm);
@@ -53,3 +53,4 @@
 		--mx-ring-value: --fn-focus-ring();
 	}
 }
+}

package/dist/components/tooltip/Tooltip.module.css

@@ -1,4 +1,4 @@
-.popup {
+@layer components {.popup {
 	position: relative;
 	display: flex;
 	user-select: none;
@@ -70,3 +70,4 @@
 		opacity: 0;
 	}
 }
+}

package/dist/components/typography/typography.module.css

@@ -1,4 +1,4 @@
-.typography {
+@layer components {.typography {
 	@apply --mx-fg(inherit);
 
 	&[data-emphasis='primary'] {
@@ -72,3 +72,4 @@
 		margin-block: 0;
 	}
 }
+}

package/dist/components/viewport/Viewport.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	min-height: 32px;
 	min-width: 32px;
 }
@@ -42,3 +42,4 @@
 		right: var(--m-space-sm);
 	}
 }
+}

package/dist/components/viewport/ViewportContent.module.css

@@ -1,4 +1,4 @@
-.root {
+@layer components {.root {
 	position: absolute;
 	transform-origin: center;
 	touch-action: none;
@@ -6,3 +6,4 @@
 	overflow: visible;
 	overscroll-behavior: none;
 }
+}

package/dist/theme.stories.module.css

@@ -1,4 +1,4 @@
-.grid {
+@layer components {.grid {
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
 	gap: var(--m-space-lg);
@@ -11,3 +11,4 @@
 		width: 100%;
 	}
 }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "6.0.55",
+  "version": "6.0.56",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
@@ -83,6 +83,7 @@
     "husky": "^9.1.7",
     "jiti": "^2.6.1",
     "lint-staged": "^16.2.7",
+    "postcss": "^8.5.16",
     "postcss-assign-layer": "^0.4.0",
     "postcss-cli": "^11.0.1",
     "prettier": "^3.0.3",
@@ -104,7 +105,7 @@
   "scripts": {
     "build:transpile": "tsc --build tsconfig.json",
     "build:copy": "node --experimental-strip-types ./scripts/copy.ts",
-    "build:css": "postcss ./dist/**/*.css --replace --config scripts --verbose",
+    "build:css": "node --experimental-strip-types ./scripts/postcss.ts",
     "build": "pnpm run build:transpile && pnpm run build:copy && pnpm run build:css",
     "prepublish": "pnpm run build",
     "icons": "node ./scripts/generateIcons.js",