@a-type/ui 6.0.50 → 6.0.51

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

@@ -1,201 +0,0 @@
-.toaster {
-	pointer-events: none;
-	overflow: clip;
-}
-
-.toast {
-	--gap: var(--m-space-sm);
-	--peek: var(--m-space-sm);
-	--scale: calc(max(0, 1 - var(--toast-index) * 0.1));
-	--height: var(--toast-frontmost-height, var(--toast-height));
-	--shrink: calc(1 - var(--scale));
-	--offset-y: calc(
-		var(--toast-offset-y) + calc(var(--toast-index) * var(--gap)) +
-			var(--toast-swipe-movement-y)
-	);
-
-	/* basic positioning */
-	position: fixed;
-	left: auto;
-	top: var(--m-space-xs);
-	z-index: calc(100000 - var(--toast-index));
-	margin-right: 0;
-	width: 100%;
-	transform-origin: top;
-	/* all toasts copy height of frontmost */
-	height: var(--height);
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: var(--m-space-xs);
-
-	/* styling happens in content element */
-
-	/* misc */
-	pointer-events: none;
-	user-select: none;
-
-	/* animation and interaction */
-	transform: translateX(var(--toast-swipe-movement-x))
-		translateY(
-			calc(var(--toast-swipe-movement-y) + var(--toast-index) * var(--peek)) +
-				(var(--shrink) * var(--height))
-		)
-		scale(var(--scale));
-	transition:
-		transform var(--m-duration) var(--m-easing),
-		opacity var(--m-duration) var(--m-easing),
-		height var(--m-duration-short) var(--m-easing);
-
-	&::after {
-		position: absolute;
-		content: '';
-		left: 0;
-		top: 100%;
-		height: --fn-literal(calc(var(--gap) + 1px));
-		width: 100%;
-	}
-
-	&[data-limited] {
-		opacity: 0;
-	}
-	&[data-expanded] {
-		height: var(--toast-height);
-		transform: translateX(var(--toast-swipe-movement-x))
-			translateY(var(--offset-y)) scale(1);
-	}
-
-	&[data-starting-style] {
-		transform: translateY(-150%);
-	}
-	&[data-ending-style] {
-		opacity: 0;
-
-		&[data-swipe-direction='up'] {
-			transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));
-		}
-		&[data-swipe-direction='down'] {
-			transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));
-		}
-		&[data-swipe-direction='left'] {
-			transform: translateX(calc(var(--toast-swipe-movement-x) - 150%))
-				translateY(var(--offset-y));
-		}
-		&[data-swipe-direction='right'] {
-			transform: translateX(calc(var(--toast-swipe-movement-x) + 150%))
-				translateY(var(--offset-y));
-		}
-	}
-
-	&:focus {
-		outline: none;
-	}
-	&:focus-visible {
-		box-shadow: --fn-focus-ring();
-	}
-}
-
-.toastContent {
-	max-width: 400px;
-	pointer-events: auto;
-	display: flex;
-	flex-direction: column;
-	gap: var(--m-space-sm);
-
-	&[data-behind]:not([data-expanded]) {
-		pointer-events: none;
-	}
-}
-
-.toastMain {
-	position: relative;
-	display: flex;
-	flex-direction: row;
-
-	@apply --mx-shadow(var(--m-shadow-md));
-	@apply --mx-surface-secondary;
-
-	padding-inline-start: var(--m-space-md);
-	padding-inline-end: var(--m-space-sm);
-	padding-block: var(--m-space-sm);
-	gap: var(--m-space-sm);
-
-	[data-behind]:not([data-expanded]) & {
-		max-height: var(--height);
-		@apply --mx-bg-heavier(2);
-	}
-}
-
-.toastMainBody {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: var(--m-space-xs);
-	@apply --mx-fg(inherit);
-
-	transition: opacity var(--m-duration) var(--m-easing);
-
-	/* Hide content when not in front */
-	[data-behind]:not([data-expanded]) & {
-		opacity: 0;
-	}
-
-	[data-expanded] & {
-		opacity: 1;
-	}
-}
-
-.toastMainBodyContent {
-	display: flex;
-	flex-direction: column;
-	gap: var(--m-space-xs);
-	@apply --mx-fg(inherit);
-}
-
-.toastTitle {
-	@apply --mx-fg(inherit);
-	@apply --mx-prose-secondary;
-	font-weight: var(--m-text-weight-bold);
-	margin: 0;
-}
-
-.toastDescriptionRow {
-	display: flex;
-	gap: var(--m-space-sm);
-}
-
-.icon {
-	position: relative;
-	top: --fn-literal(4px);
-}
-
-.toastDescription {
-	margin: 0;
-	@apply --mx-fg(inherit);
-	@apply --mx-prose-ambient;
-}
-
-.toastClose {
-	margin-block-end: auto;
-
-	[data-behind]:not([data-expanded]) & {
-		visibility: hidden;
-	}
-}
-
-.toastActions {
-	margin-inline-start: auto;
-	display: flex;
-	align-items: center;
-	gap: var(--m-space-xs);
-
-	font-size: var(--m-prose-ambient-size);
-	line-height: var(--m-prose-ambient-lineHeight);
-	font-weight: var(--m-prose-ambient-weight);
-
-	transition: opacity var(--m-duration) var(--m-easing);
-
-	[data-behind]:not([data-expanded]) & {
-		opacity: 0;
-	}
-}

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

@@ -1,55 +0,0 @@
-.root {
-	width: fit-content;
-	display: inline-flex;
-	gap: var(--m-space-sm);
-	border-radius: var(--m-radius-lg);
-
-	@apply --mx-bg(--fn-color-faded(var(--m-color-main-light), 20%));
-}
-
-.item {
-	display: flex;
-	cursor: pointer;
-	align-items: center;
-	justify-content: center;
-	white-space: nowrap;
-	transition: all var(--m-duration) var(--m-easing);
-
-	@apply --mx-fg(var(--m-color-neutral-ink));
-
-	padding: var(--m-action-padding);
-
-	@apply --mx-borderColor(transparent);
-	border-radius: var(--m-radius-lg);
-
-	&[data-pressed] {
-		@apply --mx-shadow;
-		--mx-shadow-value: var(--m-shadow-sm);
-		@apply --mx-bg(var(--m-color-main));
-		@apply --mx-borderColor(var(--m-color-neutral-ink));
-	}
-
-	&:not([data-pressed]) {
-		@apply --mx-bg(--fn-color-faded(var(--m-color-neutral), 30%));
-	}
-
-	&:hover:not([data-pressed]) {
-		@apply --mx-bg-lighter(2);
-		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 2px);
-		@apply --mx-borderColor(--fn-color-faded(var(--m-color-main-ink), 20%));
-	}
-
-	&:active:not([data-pressed]) {
-		@apply --mx-bg-lighter(1);
-		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 4px);
-		@apply --mx-borderColor(--fn-color-faded(var(--m-color-main-ink), 30%));
-	}
-
-	&:focus {
-		outline: none;
-	}
-
-	&:focus-visible {
-		--mx-ring-value: --fn-focus-ring();
-	}
-}

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

@@ -1,72 +0,0 @@
-.popup {
-	position: relative;
-	display: flex;
-	user-select: none;
-
-	padding: var(--m-surface-padding);
-	border-radius: var(--m-surface-radius);
-
-	font-size: var(--m-prose-ambient-size);
-
-	transition:
-		opacity 0.2s ease,
-		transform 0.2s ease;
-
-	transform-origin: var(--transform-origin);
-
-	@apply --mx-shadow;
-	--mx-shadow-value: var(--m-shadow-sm);
-
-	&[data-color='contrast'] {
-		@apply --mx-fg(var(--m-color-neutral-paper));
-		@apply --mx-bg(var(--m-color-neutral-ink));
-	}
-
-	&[data-color='white'],
-	&[data-color='neutral'] {
-		@apply --mx-fg(var(--m-color-neutral-ink));
-		@apply --mx-bg(var(--m-color-neutral-paper));
-		@apply --mx-borderColor(var(--m-color-neutral));
-		border-style: solid;
-		border-width: var(--m-lineWidth-sm);
-	}
-
-	&[data-color='attention'] {
-		@apply --mx-bg(var(--m-color-main-heavy));
-		@apply --mx-fg(var(--m-color-neutral-paper));
-	}
-
-	opacity: 0;
-	transform: scale(0.95);
-	&[data-open] {
-		opacity: 1;
-		transform: scale(1);
-	}
-
-	&[data-instant] {
-		transition: none;
-	}
-
-	--y: 0px;
-	--x: 0px;
-	transform: translate(var(--x), var(--y));
-
-	&[data-starting-style] {
-		opacity: 0;
-		&[data-side='bottom'] {
-			--y: 4px;
-		}
-		&[data-side='top'] {
-			--y: -4px;
-		}
-		&[data-side='left'] {
-			--x: -4px;
-		}
-		&[data-side='right'] {
-			--x: 4px;
-		}
-	}
-	&[data-ending-style] {
-		opacity: 0;
-	}
-}

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

@@ -1,74 +0,0 @@
-.typography {
-	@apply --mx-fg(inherit);
-
-	&[data-emphasis='primary'] {
-		font-size: var(--m-prose-primary-size);
-		line-height: var(--m-prose-primary-lineHeight);
-		font-weight: var(--m-prose-primary-weight);
-	}
-
-	&[data-emphasis='secondary'] {
-		font-size: var(--m-prose-secondary-size);
-		line-height: var(--m-prose-secondary-lineHeight);
-		font-weight: var(--m-prose-secondary-weight);
-	}
-
-	&[data-emphasis='ambient'] {
-		font-size: var(--m-prose-ambient-size);
-		line-height: var(--m-prose-ambient-lineHeight);
-		font-weight: var(--m-prose-ambient-weight);
-	}
-
-	&[data-italic] {
-		font-style: italic;
-	}
-	&[data-underline] {
-		text-decoration: underline;
-	}
-	&[data-strikethrough] {
-		text-decoration: line-through;
-	}
-	&[data-bold] {
-		font-weight: var(--m-text-weight-bold);
-	}
-	&[data-thin] {
-		font-weight: var(--m-text-weight-thin);
-	}
-	&[data-normal] {
-		font-weight: var(--m-text-weight-normal);
-	}
-	&[data-uppercase] {
-		text-transform: uppercase;
-	}
-	&[data-truncate] {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		max-width: 100%;
-	}
-	&[data-wrap] {
-		text-wrap: wrap;
-	}
-	&[data-dim] {
-		@apply --mx-fg-lighter(2.5);
-	}
-
-	&[data-color='neutral'] {
-		@apply --mx-fg(var(--m-color-neutral-ink));
-	}
-	&[data-color='main'] {
-		@apply --mx-fg(var(--m-color-main-heavy));
-	}
-	&[data-color='attention'] {
-		@apply --mx-fg(var(--m-color-palette-attention-heavy));
-	}
-	&[data-color='success'] {
-		@apply --mx-fg(var(--m-color-palette-success-heavy));
-	}
-}
-
-@layer components {
-	.removeMargin {
-		margin-block: 0;
-	}
-}

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

@@ -1,44 +0,0 @@
-.root {
-	min-height: 32px;
-	min-width: 32px;
-}
-
-.positioner {
-	contain: strict;
-	position: relative;
-	height: 100%;
-	width: 100%;
-	display: flex;
-	touch-action: none;
-	user-select: none;
-	overflow: clip;
-
-	&:focus {
-		outline: none;
-	}
-	&:focus-visible {
-		@apply --mx-shadow;
-		--mx-ring-value: --fn-ring(var(--m-color-main-ink), 1px);
-	}
-}
-
-.controlContent {
-	position: absolute;
-
-	&[data-position='top-left'] {
-		top: var(--m-space-sm);
-		left: var(--m-space-sm);
-	}
-	&[data-position='top-right'] {
-		top: var(--m-space-sm);
-		right: var(--m-space-sm);
-	}
-	&[data-position='bottom-left'] {
-		bottom: var(--m-space-sm);
-		left: var(--m-space-sm);
-	}
-	&[data-position='bottom-right'] {
-		bottom: var(--m-space-sm);
-		right: var(--m-space-sm);
-	}
-}

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

@@ -1,8 +0,0 @@
-.root {
-	position: absolute;
-	transform-origin: center;
-	touch-action: none;
-	user-select: none;
-	overflow: visible;
-	overscroll-behavior: none;
-}

package/dist/theme.stories.module.css

@@ -1,13 +0,0 @@
-.grid {
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	gap: var(--m-space-lg);
-	width: 100%;
-	min-width: 0;
-	flex: 1 0 auto;
-
-	& > * {
-		min-width: 0;
-		width: 100%;
-	}
-}