@a-type/ui 6.0.55 → 6.0.57

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;
@@ -195,6 +195,10 @@
 			@apply --mx-bg-faded(80%);
 			@apply --mx-borderColor-faded(80%);
 		}
+		/* reduce specificity so surface styles override */
+		&:where([data-dim='true']) {
+			@apply --mx-fg(var(--m-color-neutral-ink));
+		}
 		&[data-dim='true'] {
 			@apply --mx-fg-lighter(2.5);
 		}
@@ -289,3 +293,4 @@
 	inherits: false;
 	initial-value:;
 }
+}

package/dist/components/box/Box.stories.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../button/Button.js';
 import { Checkbox } from '../checkbox/Checkbox.js';
+import { Icon } from '../icon/Icon.js';
 import { Progress } from '../progress/Progress.js';
 import { Slider } from '../slider/Slider.js';
 import { Switch } from '../switch/Switch.js';
@@ -85,7 +86,7 @@ export const Surfaces = {
 };
 export const DimComparison = {
     render(args) {
-        return (_jsxs(Box, { gap: true, children: [_jsx(Box, { surface: "ambient", dim: true, children: "Dimmed box" }), _jsx(Box, { surface: "ambient", children: _jsx(Text, { dim: true, children: "Dimmed text" }) })] }));
+        return (_jsxs(Box, { gap: true, children: [_jsxs(Box, { dim: true, children: ["Dimmed non-surface", _jsx(Text, { children: "Text" }), _jsx(Icon, { name: "placeholder" })] }), _jsxs(Box, { surface: "ambient", dim: true, children: ["Dimmed box", _jsx(Text, { children: "Text" }), _jsx(Icon, { name: "placeholder" })] }), _jsxs(Box, { surface: "primary", dim: true, children: ["Dimmed box", _jsx(Text, { children: "Text" }), _jsx(Icon, { name: "placeholder" })] }), _jsx(Box, { surface: "ambient", children: _jsx(Text, { dim: true, children: "Dimmed text" }) })] }));
     },
 };
 //# sourceMappingURL=Box.stories.js.map

package/dist/components/box/Box.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.stories.js","sourceRoot":"","sources":["../../../src/components/box/Box.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Box.stories.js","sourceRoot":"","sources":["../../../src/components/box/Box.stories.tsx"],"names":[],"mappings":"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"}

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'] {
@@ -49,7 +49,8 @@
 	&[data-wrap] {
 		text-wrap: wrap;
 	}
-	&[data-dim] {
+	&[data-dim],
+	:where([data-dim='true']) & {
 		@apply --mx-fg-lighter(2.5);
 	}
 
@@ -72,3 +73,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.57",
   "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",

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

@@ -195,6 +195,10 @@
 			@apply --mx-bg-faded(80%);
 			@apply --mx-borderColor-faded(80%);
 		}
+		/* reduce specificity so surface styles override */
+		&:where([data-dim='true']) {
+			@apply --mx-fg(var(--m-color-neutral-ink));
+		}
 		&[data-dim='true'] {
 			@apply --mx-fg-lighter(2.5);
 		}

package/src/components/box/Box.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from '../button/Button.js';
 import { Checkbox } from '../checkbox/Checkbox.js';
+import { Icon } from '../icon/Icon.js';
 import { Progress } from '../progress/Progress.js';
 import { Slider } from '../slider/Slider.js';
 import { Switch } from '../switch/Switch.js';
@@ -158,8 +159,20 @@ export const DimComparison: Story = {
 	render(args) {
 		return (
 			<Box gap>
+				<Box dim>
+					Dimmed non-surface
+					<Text>Text</Text>
+					<Icon name="placeholder" />
+				</Box>
 				<Box surface="ambient" dim>
 					Dimmed box
+					<Text>Text</Text>
+					<Icon name="placeholder" />
+				</Box>
+				<Box surface="primary" dim>
+					Dimmed box
+					<Text>Text</Text>
+					<Icon name="placeholder" />
 				</Box>
 				<Box surface="ambient">
 					<Text dim>Dimmed text</Text>

package/src/components/typography/typography.module.css

@@ -49,7 +49,8 @@
 	&[data-wrap] {
 		text-wrap: wrap;
 	}
-	&[data-dim] {
+	&[data-dim],
+	:where([data-dim='true']) & {
 		@apply --mx-fg-lighter(2.5);
 	}