@a-type/ui 6.0.52 → 6.0.53

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

@@ -0,0 +1,96 @@
+@keyframes peekClose {
+	from {
+		height: calc(var(--collapsible-height) + 80px);
+		max-height: none;
+	}
+	to {
+		height: min(var(--peek-height, 120px), var(--collapsible-height));
+		max-height: var(--peek-height, 120px);
+	}
+}
+
+@keyframes peekOpen {
+	from {
+		height: min(var(--peek-height, 120px), var(--collapsible-height));
+	}
+	to {
+		height: calc(var(--collapsible-height) + 80px);
+	}
+}
+
+.root {
+	position: relative;
+	overflow: clip;
+
+	&[data-state='closed'] {
+		max-height: var(--peek-height, 120px);
+	}
+
+	&[data-has-interacted='true'] {
+		animation-timing-function: var(--m-easing);
+		animation-fill-mode: forwards;
+
+		&[data-state='closed'] {
+			animation-name: peekClose;
+			animation-duration: var(--m-duration);
+		}
+		&[data-state='open'] {
+			animation-name: peekOpen;
+			animation-duration: var(--m-duration-long);
+		}
+	}
+}
+
+.trigger {
+	position: absolute;
+	bottom: 0;
+	z-index: 1;
+	height: 80px;
+	width: 100%;
+	cursor: pointer;
+	@apply --mx-borderColor(var(--mx-fg-ref));
+	border-width: 0px;
+	border-bottom-width: var(--m-lineWidth-sm);
+
+	background: linear-gradient(to bottom, transparent 0%, var(--mx-bg-ref) 100%);
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		background: linear-gradient(
+			to bottom,
+			transparent 0%,
+			var(--m-color-main-wash) 100%
+		);
+		border-color: var(--m-color-main);
+	}
+
+	&::after {
+		content: '- tap to expand -';
+		position: absolute;
+		inset: 0;
+		top: auto;
+		height: 80px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: end;
+		padding: var(--m-space-sm);
+		font-size: var(--m-prose-ambient-size);
+		line-height: var(--m-prose-ambient-lineHeight);
+		font-weight: var(--m-prose-ambient-weight);
+		@apply --mx-fg(var(--m-color-neutral-heavy));
+	}
+	&[data-state='open'] {
+		&::after {
+			content: '- tap to collapse -';
+		}
+	}
+
+	@starting-style {
+		opacity: 0;
+	}
+	opacity: 1;
+	transition: opacity var(--m-duration) var(--m-easing);
+}

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

@@ -0,0 +1,24 @@
+.close {
+	position: absolute;
+	right: var(--m-space-sm);
+	top: var(--m-space-sm);
+}
+
+.popup {
+	padding: var(--m-space-md);
+}
+
+.title {
+	font-weight: 500;
+	margin: 0;
+	margin-block-end: var(--m-space-sm);
+	font-size: var(--m-prose-secondary-size);
+	line-height: var(--m-prose-secondary-lineHeight);
+}
+
+.description {
+	margin: 0;
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+}

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

@@ -0,0 +1,262 @@
+.popup {
+	box-sizing: border-box;
+
+	min-width: 120px;
+	max-width: var(--available-width, 95vw);
+	max-height: var(--available-height);
+
+	transition: all var(--m-duration) var(--m-easing);
+
+	@apply --mx-shadow(var(--m-shadow-lg));
+	@apply --mx-surface-ambient;
+	padding: 0;
+
+	transform-origin: var(--transform-origin);
+	will-change: transform;
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		@apply --mx-ring(--fn-ring(
+			--fn-color-faded(var(--m-color-main-ink), 50%),
+			2px
+		));
+	}
+
+	@media (forced-colors: active) {
+		border-color: var(--m-color-main-ink);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		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;
+	}
+}
+
+.itemList {
+	box-sizing: border-box;
+	max-height: min(var(--available-height, 100%), 95vh);
+	min-height: 0px;
+	overflow-x: clip;
+	overflow-y: auto;
+	scroll-padding-block: var(--m-space-md);
+	position: relative;
+	padding: var(--m-space-xs);
+
+	border-radius: inherit;
+}
+
+.item {
+	min-height: 30px;
+	position: relative;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	user-select: none;
+
+	padding: var(--m-action-padding);
+	padding-left: var(--m-space-lg);
+	gap: var(--m-space-sm);
+
+	text-align: left;
+	font-size: var(--m-prose-secondary-size);
+	font-weight: var(--m-prose-secondary-weight);
+	line-height: var(--m-prose-secondary-lineHeight);
+	font-family: var(--m-prose-secondary-font);
+
+	@apply --mx-fg(color-contrast(var(--mx-bg-ref)));
+
+	&[data-disabled],
+	&:disabled {
+		pointer-events: none;
+		@apply --mx-fg(var(--m-color-neutral-heavy));
+		@apply --mx-bg(var(--m-color-neutral-paper));
+	}
+
+	&:hover,
+	&[data-highlighted],
+	&[data-state='checked'],
+	&:focus-visible {
+		@apply --mx-bg(var(--m-color-neutral-light));
+	}
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		--mx-ring-value: --fn-focus-ring();
+	}
+
+	border-radius: var(--m-radius-xs);
+	&:first-child {
+		border-top-left-radius: calc(var(--m-surface-radius) - var(--m-space-xs));
+		border-top-right-radius: calc(var(--m-surface-radius) - var(--m-space-xs));
+	}
+	&:last-child {
+		border-bottom-left-radius: calc(
+			var(--m-surface-radius) - var(--m-space-xs)
+		);
+		border-bottom-right-radius: calc(
+			var(--m-surface-radius) - var(--m-space-xs)
+		);
+	}
+}
+
+.itemText {
+	flex: 1;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--m-space-sm);
+	scroll-padding-block: var(--m-space-md);
+}
+
+.itemIndicator {
+	margin-inline-start: auto;
+	height: 10px;
+	flex-shrink: 0;
+	flex-basis: 10px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	right: calc(-1 * var(--m-space-xs));
+}
+
+.itemRightSlot {
+	margin-inline-start: auto;
+	padding-inline-start: var(--m-space-sm);
+}
+
+.arrow {
+	--size: 18px;
+	@apply --mx-fill(var(--mx-bg-ref, var(--m-global-trueLightColor)));
+	@apply --mx-stroke(var(--mx-borderColor-ref, var(--mx-fg-ref, var(--m-global-trueHeavyColor))));
+	stroke-width: var(--m-lineWidth);
+	width: var(--size);
+	height: calc(var(--size) / 2);
+	position: relative;
+	--angle: 0deg;
+	--scale: 1;
+	transform: translate(0, 0) rotate(var(--angle, 0deg)) scale(var(--scale, 1));
+	transition: opacity var(--m-duration) var(--m-easing);
+
+	&[data-side='top'] {
+		--angle: 0deg;
+		bottom: calc(-1 * var(--size) / 2 + 1px);
+	}
+	&[data-side='bottom'] {
+		--angle: 180deg;
+		top: calc(-1 * var(--size) / 2 + 1px);
+	}
+	&[data-side='left'] {
+		--angle: 270deg;
+		right: calc(-1 * var(--size) * 0.75);
+	}
+	&[data-side='right'] {
+		--angle: 90deg;
+		left: calc(-1 * var(--size) * 0.75);
+	}
+
+	&[data-open] {
+		opacity: 1;
+		--scale: 1;
+	}
+	&[data-closed] {
+		opacity: 0;
+		--scale: 0.5;
+	}
+}
+
+.separator {
+	margin: var(--m-space-xs);
+	height: var(--m-lineWidth-sm);
+	@apply --mx-bg(var(--m-color-neutral));
+}
+
+.groupLabel {
+	user-select: none;
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	font-weight: var(--m-prose-ambient-weight);
+}
+
+.scrollArrow {
+	box-sizing: border-box;
+	z-index: 1;
+	height: 1rem;
+	left: var(--m-space-md);
+	right: var(--m-space-md);
+	cursor: default;
+	user-select: none;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-fg(var(--m-surface-ambient-fg));
+	border-radius: inherit;
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	font-weight: var(--m-prose-ambient-weight);
+
+	&::before {
+		position: absolute;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		content: '';
+	}
+
+	&[data-direction='up'] {
+		top: 0;
+		&[data-side='none'] {
+			&::before {
+				top: -100%;
+			}
+		}
+	}
+	&[data-direction='down'] {
+		bottom: 0;
+		&[data-side='none'] {
+			&::before {
+				bottom: -100%;
+			}
+		}
+	}
+}
+
+.trigger {
+	user-select: none;
+}
+
+.triggerIcon {
+	transition: transform var(--m-duration) var(--m-easing);
+	margin-inline-start: auto;
+	[data-open] > &,
+	[data-popup-open] > & {
+		transform: rotate(180deg);
+	}
+}

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

@@ -0,0 +1,54 @@
+.root {
+	width: 100%;
+
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	row-gap: var(--m-space-xs);
+	column-gap: var(--m-space-md);
+	align-items: center;
+	box-sizing: border-box;
+}
+
+.indicator {
+	width: 100%;
+	transition: transform var(--m-duration) var(--m-easing);
+	border-radius: var(--m-radius);
+	@apply --mx-bg(var(--m-color-main));
+
+	&[data-complete] {
+		@apply --mx-bg(var(--m-color-palette-success));
+	}
+}
+
+.track {
+	position: relative;
+	width: 100%;
+	height: --fn-literal(8px);
+	overflow: clip;
+	grid-column-start: 1;
+	grid-column-end: 3;
+	box-sizing: border-box;
+
+	border-radius: var(--m-radius-lg);
+	@apply --mx-bg(var(--m-color-neutral-paper));
+	@apply --mx-borderColor(var(--m-color-neutral-ink));
+}
+
+.label {
+	grid-column-start: 1;
+	grid-row-start: 1;
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	font-weight: var(--m-prose-ambient-weight);
+}
+
+.value {
+	grid-column-start: 2;
+	grid-row-start: 1;
+	justify-self: end;
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	font-weight: 500;
+}

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

@@ -0,0 +1,23 @@
+.dialogContent {
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-space-xs);
+}
+
+.dialogTitle {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--m-space-md);
+}
+
+.appIcon {
+	display: inline-block;
+	height: 1em;
+	width: 1em;
+	border-radius: var(--m-radius);
+}
+
+.appDescription {
+	margin-bottom: var(--m-space-sm);
+}

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

@@ -0,0 +1,59 @@
+.trigger {
+	position: relative;
+	justify-content: center;
+	padding: var(--m-space-xs);
+	border-radius: var(--m-action-radius);
+}
+
+.popup {
+	transition-property: all;
+	transition-duration: var(--m-duration);
+	transition-timing-function: var(--m-easing-loose);
+
+	position: fixed;
+	contain: layout;
+
+	@apply --mx-shadow(var(--m-shadow-lg));
+	@apply --mx-surface-ambient;
+	padding: 0;
+
+	clip-path: inset(-50px -50px -50px -50px);
+
+	bottom: anchor(bottom);
+	&[data-align='center'] {
+		justify-self: anchor-center;
+	}
+	&[data-align='start'] {
+		justify-self: anchor-start;
+	}
+	&[data-align='end'] {
+		justify-self: anchor-end;
+	}
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		&[data-align='center'] {
+			clip-path: inset(
+				calc(100% - var(--trigger-height, 0px))
+					calc((100% - var(--trigger-width, 0px)) / 2) 0
+					calc((100% - var(--trigger-width, 0px)) / 2) round 200px
+			);
+		}
+		&[data-align='start'] {
+			clip-path: inset(
+				calc(100% - var(--trigger-height, 0px))
+					calc(100% - var(--trigger-width, 0px)) 0 0 round 200px
+			);
+		}
+		&[data-align='end'] {
+			clip-path: inset(
+				calc(100% - var(--trigger-height, 0px)) 0 0
+					calc(100% - var(--trigger-width, 0px)) round 200px
+			);
+		}
+	}
+
+	&[data-ending-style] {
+		opacity: 0;
+	}
+}

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

@@ -0,0 +1,102 @@
+.root {
+	@apply --mx-prose-secondary;
+	width: 100%;
+
+	& .ProseMirror {
+		box-shadow: inset var(--m-shadow-sm);
+		@apply --mx-control;
+		@apply --mx-focus;
+	}
+
+	& h1,
+	& h2,
+	& h3,
+	& p {
+		margin-top: 0;
+	}
+
+	& h1 {
+		@apply --mx-prose-primary;
+		&:not(:first-child) {
+			margin-top: var(--m-space-xl);
+		}
+	}
+	& h2 {
+		@apply --mx-prose-secondary;
+		font-weight: var(--m-prose-primary-weight);
+		&:not(:first-child) {
+			margin-top: var(--m-space-lg);
+		}
+	}
+	& h3 {
+		@apply --mx-prose-ambient;
+		font-weight: var(--m-prose-primary-weight);
+		text-transform: uppercase;
+		&:not(:first-child) {
+			margin-top: var(--m-space-md);
+		}
+	}
+	& h4 {
+		@apply --mx-prose-ambient;
+		font-weight: var(--m-prose-primary-weight);
+		&:not(:first-child) {
+			margin-top: var(--m-space-md);
+		}
+	}
+	& p {
+		@apply --mx-prose-secondary;
+		margin-bottom: var(--m-space-md);
+	}
+	& a {
+		text-decoration: underline;
+		&:hover {
+			text-decoration: underline;
+		}
+		@apply --mx-focus;
+	}
+	& blockquote {
+		border-left: 4px solid var(--m-color-neutral-heavy);
+		padding-left: var(--m-space-md);
+		font-style: italic;
+		margin-block: var(--m-space-md);
+		margin-inline-start: var(--m-space-md);
+		padding-inline: var(--m-space-md);
+		@apply --mx-bg(var(--m-color-neutral-wash));
+	}
+	& ul {
+		list-style: disc;
+	}
+	& ol {
+		list-style: decimal;
+	}
+	& ul,
+	& ol {
+		padding-inline-start: var(--m-space-lg);
+		margin-block: var(--m-space-md);
+	}
+	& li {
+		margin-block-end: var(--m-space-xs);
+	}
+	& mark {
+		@apply --mx-bg(var(--m-color-main-wash));
+	}
+	& strong {
+		font-weight: var(--m-text-weight-bold);
+	}
+	& em {
+		font-style: italic;
+	}
+	& hr {
+		border: none;
+		border-top: var(--m-lineWidth) solid var(--m-color-neutral-heavy);
+		margin-block: var(--m-space-lg);
+	}
+}
+
+.readonly {
+	& .ProseMirror {
+		@apply --mx-bg(transparent);
+		box-shadow: none;
+		border-width: 0;
+	}
+}