@a-type/ui 6.0.52 → 6.0.53

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

@@ -0,0 +1,25 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: start;
+	width: 100%;
+	anchor-name: --page-content;
+	flex: 1;
+
+	gap: var(--m-space-md);
+
+	padding: var(--m-space-md);
+	@media (min-width: 768px) {
+		padding: var(--m-space-lg);
+	}
+
+	margin-inline: auto;
+	max-width: 100%;
+	min-width: 0;
+
+	container-type: inline-size;
+	container-name: --page-content;
+
+	grid-area: content;
+}

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

@@ -0,0 +1,11 @@
+.root {
+	position: sticky;
+	top: 0;
+	z-index: var(--z-nav);
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: var(--m-space-sm);
+	@apply --mx-bg(inherit);
+}

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

@@ -0,0 +1,31 @@
+.root {
+	grid-area: nav;
+	position: sticky;
+	bottom: 0;
+	z-index: var(--z-nav);
+
+	padding-block-end: calc(0.25rem + env(safe-area-inset-bottom, 0px));
+
+	@apply --mx-bg(inherit);
+
+	&::before {
+		position: absolute;
+		content: '';
+		top: 0;
+		left: var(--m-space-md);
+		right: var(--m-space-md);
+		height: 1px;
+		@apply --mx-bg(var(--m-color-neutral-heavy));
+		@media (min-width: 768px) {
+			display: none;
+		}
+	}
+
+	@media (min-width: 768px) {
+		bottom: auto;
+		left: auto;
+		right: auto;
+		top: var(--m-space-lg);
+		height: auto;
+	}
+}

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

@@ -0,0 +1,46 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--m-space-sm);
+
+	padding: var(--m-space-sm);
+
+	position: fixed;
+	position-anchor: --page-content;
+	left: anchor(left);
+	right: anchor(right);
+	top: auto;
+	bottom: --fn-literal(var(--nav-height, env(safe-area-inset-bottom, 0px)));
+
+	@media (min-width: 768px) {
+		bottom: var(--m-space-md);
+		align-items: center;
+		transition: bottom var(--m-duration) var(--m-easing);
+	}
+
+	&[data-disable-portal='true'] {
+		z-index: var(--z-now-playing);
+	}
+
+	&[data-keep-above-keyboard='true'] {
+		@media (max-width: 767px) {
+			top: auto;
+			&[data-virtual-keyboard-behavior='overlay'] {
+				bottom: max(
+					var(--mock-virtual-keyboard-height, env(keyboard-inset-height, 0px)),
+					var(--nav-height, env(safe-area-inset-bottom, 0px))
+				);
+			}
+			&[data-virtual-keyboard-behavior='displace'] {
+				bottom: max(
+					var(
+						--mock-virtual-keyboard-height,
+						var(--viewport-bottom-offset, 0px)
+					),
+					var(--nav-height, env(safe-area-inset-bottom, 0px))
+				);
+			}
+		}
+	}
+}

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

@@ -0,0 +1,29 @@
+.root {
+	align-items: stretch;
+	justify-content: center;
+	min-height: 100dvh;
+	flex-shrink: 1;
+	flex-grow: 1;
+	flex-basis: auto;
+	height: max-content;
+
+	display: flex;
+	flex-direction: column;
+
+	@apply --mx-bg(var(--m-color-main-paper));
+
+	@media (min-width: 768px) {
+		display: grid;
+		grid-template-areas: 'gutter1 nav content gutter2';
+		grid-template-columns: 1fr auto 20fr 1fr;
+		grid-template-rows: auto;
+		height: auto;
+		min-height: auto;
+		align-items: start;
+		flex-basis: 0;
+	}
+
+	@media (min-width: 1024px) {
+		grid-template-columns: 1fr auto min(800px, 70vw) 1fr;
+	}
+}

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

@@ -0,0 +1,19 @@
+.root {
+	max-width: 80vw;
+	width: 100%;
+	padding: var(--m-space-md);
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	border-radius: var(--m-radius-lg);
+	@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
+
+	@media (min-width: 768px) {
+		min-width: 0;
+	}
+}
+
+.grid {
+	display: grid;
+	gap: var(--m-space-md);
+	align-items: start;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}

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

@@ -0,0 +1,104 @@
+.trigger {
+	cursor: pointer;
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		@apply --mx-shadow;
+		--mx-ring-value: --fn-focus-ring();
+		border-radius: var(--m-action-radius);
+	}
+}
+
+.title {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+.close {
+	position: absolute;
+	right: var(--m-space-md);
+	top: var(--m-space-md);
+}
+
+.overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 1000;
+	backdrop-filter: blur(4px);
+	transition: opacity 0.2s ease;
+
+	@apply --mx-bg(var(--m-color-neutral-ink));
+	@apply --mx-bg-faded(50%);
+
+	&[data-state='closed'] {
+		opacity: 0;
+	}
+}
+
+.contentRoot {
+	position: fixed;
+	left: 50%;
+	top: 50%;
+	z-index: 1001;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	height: 100%;
+	max-height: 85vh;
+	width: 90vw;
+	max-width: 100%;
+
+	padding: var(--m-space-lg);
+	border: none;
+	background: none;
+	pointer-events: none;
+
+	transform: translate(-50%, -50%);
+	transition:
+		opacity 0.2s ease,
+		transform 0.2s ease;
+
+	&[data-state='closed'] {
+		opacity: 0;
+		transform: translate(-50%, -45%) scale(0.95);
+	}
+}
+
+.contentInner {
+	max-height: 100%;
+	max-width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	pointer-events: none;
+
+	& > * {
+		pointer-events: auto;
+	}
+}
+
+.pointerEventsAuto {
+	pointer-events: auto;
+}
+
+.image {
+	object-fit: contain;
+	max-height: 100%;
+	max-width: 100%;
+	min-height: 80px;
+	min-width: 80px;
+}

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

@@ -0,0 +1,31 @@
+.ol,
+.ul {
+	list-style-position: inside;
+	margin: 0;
+	padding: 0;
+	padding-inline-start: var(--m-space-lg);
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-space-sm);
+
+	& > li {
+		margin-left: var(--m-space-sm);
+	}
+
+	&[data-unstyled] {
+		list-style: none;
+		gap: 0;
+		padding-inline-start: 0;
+		& > li {
+			margin-left: 0;
+		}
+	}
+}
+
+.ol {
+	list-style: decimal;
+}
+
+.ul {
+	list-style: disc;
+}

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

@@ -0,0 +1,32 @@
+.root {
+	position: relative;
+	height: 100%;
+	width: 100%;
+	overflow: clip;
+}
+
+.inner {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+	overflow: visible;
+	transition: transform var(--m-duration-long) var(--m-easing);
+}
+
+.item {
+	height: 100%;
+	width: 100%;
+	min-width: 0;
+	flex-shrink: 0;
+	object-fit: cover;
+
+	& img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+}

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

@@ -0,0 +1,143 @@
+.root {
+	display: grid;
+	grid-auto-columns: 1fr;
+	grid-auto-flow: column;
+	height: auto;
+	justify-items: center;
+	overflow: clip;
+	border-radius: 0;
+	padding: var(--m-space-sm);
+	z-index: 50;
+	padding-bottom: calc(var(--m-space-sm) + env(safe-area-inset-bottom, 0px));
+
+	@media (min-width: 768px) {
+		height: min-content;
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		justify-content: start;
+		gap: var(--m-space-sm);
+		overflow-x: clip;
+		overflow-y: auto;
+		border-radius: 0;
+		padding-bottom: var(--m-space-xl);
+		box-shadow: none;
+		@apply --mx-bg(transparent);
+		border: none;
+	}
+}
+
+.item {
+	position: relative;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	cursor: pointer;
+	user-select: none;
+	align-items: center;
+	justify-content: center;
+	gap: var(--m-space-sm);
+	white-space: nowrap;
+	padding: var(--m-action-padding);
+	transition: all var(--m-duration) var(--m-easing);
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	@apply --mx-bg(transparent);
+	border-radius: var(--m-radius-sm);
+	border: none;
+	font-size: var(--m-prose-ambient-size);
+	line-height: 1;
+	font-weight: var(--m-prose-ambient-weight);
+	@apply --mx-shadow;
+
+	&:active {
+		@apply --mx-bg-heavier(1);
+	}
+
+	&:hover {
+		@apply --mx-bg(var(--m-action-light-bg));
+		@apply --mx-bg-faded(50%);
+	}
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		--mx-ring-value: --fn-focus-ring();
+	}
+
+	&[data-active='true'] {
+		@apply --mx-bg(var(--m-action-light-bg));
+		@apply --mx-fg(var(--m-action-light-fg));
+	}
+
+	@media (min-width: 768px) {
+		height: auto;
+		display: flex;
+		flex-direction: row-reverse;
+		justify-content: end;
+		align-items: center;
+		gap: var(--m-space-md);
+		padding: var(--m-action-padding);
+		overflow: visible;
+		font-size: var(--m-prose-secondary-size);
+		&:active {
+			@apply --mx-bg-heavier(1);
+		}
+	}
+}
+
+.itemIconWrapper {
+	position: relative;
+	display: flex;
+
+	& img,
+	& svg {
+		width: --fn-literal(15px);
+		height: --fn-literal(15px);
+	}
+
+	@media (min-width: 768px) {
+		@apply --mx-bg(var(--m-color-neutral-light));
+		@apply --mx-bg-faded(50%);
+		padding: var(--m-space-sm);
+		border-radius: var(--m-action-radius);
+
+		[data-active='true'] & {
+			@apply --mx-bg(inherit);
+		}
+	}
+}
+
+.itemText {
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	font-size: var(--m-prose-ambient-size);
+	line-height: 1;
+	font-weight: inherit;
+	display: inline-block;
+	overflow: clip;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.icon {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	@apply --mx-fg(inherit);
+
+	[data-active='true'] & {
+		@apply --mx-fill(var(--m-color-main));
+	}
+}
+
+.pip {
+	position: absolute;
+	top: var(--m-space-sm);
+	right: var(--m-space-sm);
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background-color: var(--m-color-main);
+	@apply --mx-shadow;
+	--mx-shadow-value: var(--m-shadow-sm);
+}

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

@@ -0,0 +1,114 @@
+.root {
+	@apply --mx-shadow;
+
+	&:has(input:focus[data-focus-clicked]),
+	&:has(textarea:focus[data-focus-clicked]) {
+		@apply --mx-bg(var(--m-color-main-light));
+		@apply --mx-bg-lighter(3);
+		--mx-ring-value: --fn-ring(var(--m-color-main-light), 4px);
+	}
+
+	&:has(input:focus-visible),
+	&:has(textarea:focus-visible) {
+		@apply --mx-bg(var(--m-color-main-light));
+		@apply --mx-bg-lighter(3);
+		--mx-ring-value: --fn-focus-ring();
+	}
+}
+
+.layout {
+	display: flex;
+	flex-direction: row;
+}
+
+.content {
+	position: relative;
+	flex: 1;
+	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);
+	font-style: italic;
+
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	@apply --mx-bg(var(--m-color-main-wash));
+	@apply --mx-bg-heavier(1);
+	@apply --mx-borderColor(var(--m-color-main-heavy));
+	border-right-width: 0;
+
+	& input,
+	& textarea {
+		padding: 0;
+		box-shadow: none;
+		background: transparent;
+		outline: none;
+		border: none;
+	}
+}
+
+.fold {
+	display: flex;
+	flex: 0 0 20px;
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: stretch;
+}
+
+.foldTop {
+	position: relative;
+	height: 20px;
+	width: 20px;
+	flex: 0 0 20px;
+
+	@apply --mx-borderColor(var(--m-color-main-heavy));
+	border-bottom-width: var(--m-lineWidth-md);
+	border-left-width: var(--m-lineWidth-md);
+	border-top-width: 0;
+	border-right-width: 0;
+}
+
+.topCorner {
+	box-sizing: content-box;
+	height: 0;
+	width: 0;
+	top: 0;
+	right: 0;
+	transform-origin: right bottom;
+
+	@apply --mx-borderColor(var(--m-color-main-wash));
+	@apply --mx-borderColor-heavier(1);
+	border-width: 9.5px;
+	border-style: solid;
+	border-color: transparent;
+	border-bottom-color: var(--mx-borderColor-ref);
+	border-left-color: var(--mx-borderColor-ref);
+}
+
+.diagonal {
+	position: absolute;
+	left: 9px;
+	top: -3px;
+	height: 27px;
+	width: 0.5px;
+	transform-origin: center center;
+	transform: rotate(-45deg);
+
+	@apply --mx-bg(var(--m-color-main-heavy));
+}
+
+.foldBottom {
+	flex: 1;
+	@apply --mx-borderColor(var(--m-color-main-heavy));
+	@apply --mx-bg(var(--m-color-main-wash));
+	@apply --mx-bg-heavier(1);
+	border-right-width: var(--m-lineWidth-md);
+	border-bottom-width: var(--m-lineWidth-md);
+	border-left-width: 0;
+	border-top-width: 0;
+}
+
+.input {
+	width: 100%;
+	padding: 0;
+}

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

@@ -0,0 +1,32 @@
+.root {
+	width: min-content;
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	overflow: clip;
+	@apply --mx-shadow;
+	--mx-shadow-value: var(--m-shadow-sm);
+
+	@apply --mx-bg(var(--m-control-bg));
+	@apply --mx-fg(var(--m-control-fg));
+	@apply --mx-borderColor(var(--m-control-borderColor));
+	border-radius: var(--m-control-radius);
+
+	&:disabled,
+	&[data-disabled='true'] {
+		--mx-shadow-value: 0 0 0 0 transparent;
+		@apply --mx-bg(transparent);
+		@apply --mx-borderColor-lighter(2);
+		@apply --mx-fg-lighter(2);
+	}
+
+	&[data-emphasis='primary'] {
+		@apply --mx-bg(var(--m-color-main-wash));
+		@apply --mx-fg(var(--m-color-main-ink));
+	}
+}
+
+.value {
+	width: 80px;
+	text-align: center;
+}

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

@@ -0,0 +1,8 @@
+.canvas {
+	pointer-events: none;
+	position: fixed;
+	inset: 0;
+	z-index: 999999;
+	width: 100%;
+	height: 100%;
+}