@a-type/ui 6.0.51 → 6.0.53

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

@@ -0,0 +1,183 @@
+.root {
+	position: relative;
+	height: max-content;
+	display: flex;
+	flex-direction: column;
+	overflow: clip;
+
+	@apply --mx-shadow(var(--m-shadow-sm));
+	border-width: var(--m-lineWidth-sm);
+	border-radius: var(--m-surface-radius);
+
+	font-size: var(--m-prose-secondary-size);
+	line-height: var(--m-prose-secondary-lineHeight);
+	font-weight: var(--m-prose-secondary-weight);
+
+	padding: 0;
+
+	&[data-emphasis='ambient'] {
+		@apply --mx-surface-ambient;
+		padding: 0;
+		@apply --mx-bg(--fn-color-heavier(var(--m-surface-ambient-bg), 0.2));
+		@apply --mx-borderColor-faded(50%);
+	}
+	&[data-emphasis='secondary'] {
+		@apply --mx-surface-secondary;
+		padding: 0;
+		@apply --mx-borderColor-faded(50%);
+	}
+	&[data-emphasis='primary'] {
+		@apply --mx-surface-primary;
+		padding: 0;
+		@apply --mx-borderColor-faded(50%);
+	}
+}
+
+.main {
+	position: relative;
+	z-index: 1;
+	min-height: --fn-literal(40px);
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	align-items: start;
+	gap: var(--m-space-xs);
+
+	text-align: start;
+	font-size: var(--m-prose-ambient-size);
+	line-height: var(--m-prose-ambient-lineHeight);
+	font-weight: var(--m-prose-ambient-weight);
+
+	padding: var(--m-space-md);
+	padding-bottom: var(--m-space-xs);
+	gap: var(--m-space-sm);
+
+	transition: all var(--m-duration) var(--m-easing);
+
+	@apply --mx-shadow;
+	/* Purposefully don't use mixin, allow children to inherit from card root */
+	background-color: transparent;
+
+	border-top-left-radius: inherit;
+	border-top-right-radius: inherit;
+	border-width: 0;
+
+	&[data-interactive] {
+		cursor: pointer;
+
+		&:hover,
+		&:focus-visible,
+		&[data-focus-visible] {
+			@apply --mx-fg(var(--m-color-neutral-ink));
+			background-color: --fn-color-faded(var(--m-color-neutral-ink), 10%);
+		}
+
+		&:focus {
+			outline: none;
+		}
+		&:focus-visible,
+		&[data-focus-visible] {
+			@apply --mx-ring(inset 0 0 0 2px var(--m-color-neutral-ink));
+		}
+
+		&:disabled,
+		&[data-disabled] {
+			cursor: default;
+		}
+	}
+}
+
+.title {
+	z-index: 1;
+	padding: var(--m-space-xs) var(--m-space-md);
+
+	@apply --mx-prose-primary;
+
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: clip;
+	max-width: 100%;
+	display: block;
+	border-radius: var(--m-radius-md);
+
+	@apply --mx-bg(inherit);
+}
+
+.content {
+	z-index: 1;
+	display: flex;
+	flex-direction: row;
+	gap: var(--m-space-sm);
+	align-items: center;
+	border-radius: var(--m-radius-sm);
+
+	padding: var(--m-space-sm) var(--m-space-md);
+
+	font-size: var(--m-prose-ambient-size);
+	line-height: 1;
+	font-weight: var(--m-prose-ambient-weight);
+
+	@apply --mx-bg(inherit);
+	@apply --mx-bg-faded(70%);
+
+	&[data-unstyled] {
+		background-color: unset;
+		padding: 0;
+		border-width: 0;
+	}
+}
+
+.image {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	top: 0;
+	z-index: 0;
+	height: 100%;
+	width: 100%;
+
+	background-size: cover;
+	background-position: center;
+	object-fit: cover;
+}
+
+.footer {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	flex-direction: row;
+	flex-shrink: 0;
+	padding: var(--m-space-md);
+}
+
+.actions {
+	display: flex;
+	flex-direction: row;
+	gap: var(--m-space-sm);
+	align-items: center;
+
+	margin: auto auto auto --fn-literal(0px);
+	padding: 0;
+
+	@apply --mx-bg(--fn-color-faded(var(--m-surface-ambient-bg), 50%));
+	/* @apply --mx-borderColor(var(--m-surface-ambient-borderColor));
+	border-width: var(--m-lineWidth-sm); */
+	border-radius: var(--m-action-radius);
+}
+
+.menu {
+	margin: auto;
+	margin-right: 0;
+	padding: 0;
+
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+
+	gap: var(--m-space-xs);
+
+	@apply --mx-bg(--fn-color-faded(var(--m-surface-ambient-bg), 50%));
+	@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
+	border-width: var(--m-lineWidth-sm);
+	border-radius: var(--m-action-radius);
+}

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

@@ -0,0 +1,74 @@
+@keyframes checkbox-fade {
+	from {
+		background-color: var(--mx-bg-ref);
+		opacity: 1;
+	}
+	to {
+		background-color: transparent;
+		opacity: 0.9;
+		border-color: transparent;
+		box-shadow: none;
+	}
+}
+
+.root {
+	position: relative;
+	display: block;
+	flex-shrink: 0;
+
+	--size: 28px;
+	height: var(--size);
+	width: var(--size);
+
+	cursor: pointer;
+
+	transition: var(--m-duration) var(--m-easing);
+
+	@apply --mx-shadow;
+	@apply --mx-bg(var(--m-control-bg));
+	@apply --mx-borderColor(var(--m-control-borderColor));
+	border-radius: var(--m-control-radius);
+	border-width: var(--m-lineWidth-md);
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		--mx-ring-value: --fn-focus-ring();
+	}
+
+	&:hover:not(:disabled) {
+		@apply --mx-bg-lighter(2);
+		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 2px);
+	}
+
+	&:active:not(:disabled) {
+		@apply --mx-bg-heavier(1);
+		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 2px);
+	}
+
+	&:disabled {
+		box-shadow: none;
+		@apply --mx-bg(transparent);
+		@apply --mx-borderColor(var(--m-color-neutral-light));
+	}
+
+	&[data-checked] {
+		@apply --mx-bg(var(--m-color-main));
+		@apply --mx-borderColor(var(--m-color-main-ink));
+
+		&[data-checked-mode='faded'] {
+			animation-name: checkbox-fade;
+			animation-duration: 5s;
+			animation-fill-mode: forwards;
+		}
+	}
+}
+
+.indicator {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	color: var(--m-color-main-ink);
+}

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

@@ -0,0 +1,32 @@
+.root {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--m-space-md);
+	white-space: nowrap;
+
+	@apply --mx-bg(var(--m-color-neutral-paper));
+	@apply --mx-fg(contrast-color(var(--mx-bg-ref)));
+	@apply --mx-borderColor(var(--m-color-main-heavy));
+
+	border-width: var(--m-lineWidth-sm);
+	border-radius: var(--m-action-radius);
+
+	font-size: var(--m-prose-ambient-size);
+	line-height: normal;
+	font-weight: var(--m-prose-ambient-weight);
+	font-family: var(--m-prose-ambient-font);
+
+	&& {
+		padding: var(--m-space-sm) var(--m-space-md);
+	}
+
+	&[data-emphasis='primary'] {
+		@apply --mx-bg(var(--m-color-main-wash));
+		@apply --mx-borderColor(var(--m-color-main-heavy));
+	}
+	&[data-emphasis='ambient'] {
+		@apply --mx-bg(transparent);
+		@apply --mx-borderColor(transparent);
+		@apply --mx-fg(var(--m-color-neutral-ink));
+	}
+}

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

@@ -0,0 +1,36 @@
+.root {
+	overflow: clip;
+	transition: all var(--m-duration) var(--m-easing);
+
+	&[data-horizontal],
+	&[data-both] {
+		width: var(--collapsible-panel-width);
+	}
+	&[data-vertical],
+	&[data-both] {
+		height: var(--collapsible-panel-height);
+	}
+
+	&[data-starting-style],
+	&[data-ending-style] {
+		&[data-vertical],
+		&[data-both] {
+			height: 0;
+		}
+		&[data-horizontal],
+		&[data-both] {
+			width: 0;
+		}
+	}
+
+	&[data-hidden]:not([hidden='until-found']) {
+		display: none;
+	}
+}
+
+.icon {
+	transition: transform var(--m-duration) var(--m-easing);
+	[data-panel-open] & {
+		transform: rotate(180deg);
+	}
+}

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

@@ -0,0 +1,170 @@
+.backdrop {
+	position: fixed;
+	inset: 0;
+}
+
+.empty:not(:empty) {
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	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);
+}
+
+.group {
+	display: flex;
+	flex-direction: column;
+	overflow: clip;
+	padding: var(--m-space-md);
+	gap: var(--m-space-xs);
+}
+
+.groupItem {
+	@apply --mx-ring;
+	&[data-highlighted] {
+		@apply --mx-ring(--fn-ring(var(--m-color-main-mid), 2px));
+	}
+}
+
+.groupItemList {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: var(--m-space-xs);
+}
+
+.groupLabel {
+	text-transform: uppercase;
+	width: 100%;
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	padding-inline: 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);
+}
+
+.icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	transition: transform var(--m-duration) var(--m-easing);
+
+	&[data-open] {
+		transform: rotate(180deg);
+	}
+}
+
+.chips {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--m-space-xs);
+	padding-inline-start: var(--m-space-md);
+}
+
+.chipsList {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: var(--m-space-xs);
+	padding-inline: var(--m-space-sm);
+	margin-inline-start: calc(-1 * var(--m-space-md));
+
+	&:empty {
+		display: none;
+	}
+}
+
+.chipInput {
+	min-width: 3ch;
+	flex-grow: 1;
+	padding-inline-start: 0px;
+}
+
+.chipInputWrapper {
+	max-width: 100%;
+	min-width: 12ch;
+	display: flex;
+	flex-direction: row;
+	flex-grow: 1;
+	align-items: center;
+	gap: var(--m-space-xs);
+}
+
+.chip {
+	margin-block: auto;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding-inline: var(--m-space-sm);
+	gap: var(--m-space-xs);
+}
+
+.chipRemove {
+	min-height: 0;
+	min-width: 0;
+	padding: 0;
+	line-height: 1;
+	margin-block: calc(-1 * var(--m-space-xs));
+	margin-inline-end: calc(-1 * var(--m-space-sm));
+}
+
+.item[data-selected] {
+	@apply --mx-fg(var(--m-color-main-ink));
+	@apply --mx-bg-heavier(1);
+}
+
+.itemIndicator {
+	margin-inline-start: auto;
+	height: --fn-literal(10px);
+	width: --fn-literal(10px);
+	stroke-width: var(--m-lineWidth-lg);
+}
+
+.list {
+	display: flex;
+	flex-direction: column;
+	outline: none;
+	overscroll-behavior: contain;
+	overflow-y: auto;
+	overflow-x: clip;
+
+	&:empty {
+		padding: 0;
+	}
+}
+
+.popup {
+	width: var(--anchor-width);
+	display: flex;
+	flex-direction: column;
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	gap: var(--m-space-xs);
+}
+
+.multiValue {
+	max-width: 100%;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: var(--m-space-xs);
+}
+
+.clearAndCaret {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	margin-right: calc(-1 * var(--m-control-padding-inline));
+}
+
+.details {
+	@apply --mx-prose-ambient;
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	padding: var(--m-space-md);
+}

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

@@ -0,0 +1,167 @@
+.monthRow {
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.monthLabel {
+	min-width: 0;
+	align-self: center;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	text-align: center;
+	font-size: var(--m-prose-ambient-size);
+	font-weight: bold;
+}
+
+.monthButton {
+	align-self: center;
+}
+
+.calendarGridRoot {
+	display: grid;
+	grid-template-columns: repeat(7, var(--day-size, 32px));
+	grid-auto-rows: var(--day-size, 32px);
+	overflow: hidden;
+	padding: var(--m-space-sm);
+	border-radius: var(--m-radius-sm);
+}
+
+.dayLabel {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: var(--m-prose-ambient-size);
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+}
+
+.calendarDay {
+	position: relative;
+	margin-bottom: --fn-literal(-1px);
+	margin-right: --fn-literal(-1px);
+
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	@apply --mx-bg(var(--m-color-neutral-paper));
+	@apply --mx-borderColor(transparent);
+
+	display: flex;
+	cursor: pointer;
+	align-items: center;
+	justify-content: center;
+	transition: all var(--m-duration) var(--m-easing);
+
+	@apply --mx-shadow;
+	--mx-shadow-value: var(--m-shadow-sm);
+
+	&[data-highlighted] {
+		z-index: 1;
+		outline: none;
+		--mx-ring-value: --fn-ring(var(--m-color-main-heavy), 2px);
+	}
+
+	&[data-selected] {
+		z-index: 2;
+		@apply --mx-bg(var(--m-color-main));
+		border-radius: var(--m-radius-sm);
+	}
+
+	&[data-in-range] {
+		z-index: 1;
+		border-radius: 0;
+		@apply --mx-bg(var(--m-color-main-light));
+		--mx-shadow-value: 0 0 0 0 transparent;
+	}
+
+	&[data-disabled='true'] {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	/* Today indicator dot */
+	&[data-today]::before {
+		content: '';
+		position: absolute;
+		left: --fn-literal(1px);
+		top: --fn-literal(1px);
+		width: --fn-literal(6px);
+		height: --fn-literal(6px);
+		background-color: var(--m-color-palette-attention);
+		border-radius: var(--m-radius-lg);
+		border: 1px solid var(--m-color-neutral-ink);
+	}
+
+	/* Calendar grid edge borders */
+	&[data-top-edge] {
+		border-top-color: var(--m-color-neutral);
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+	&[data-bottom-edge] {
+		border-bottom-color: var(--m-color-neutral);
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+	&[data-first-column] {
+		border-left-color: var(--m-color-neutral);
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+	&[data-last-column] {
+		border-right-color: var(--m-color-neutral);
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+	&[data-day-first] {
+		border-left-color: var(--m-color-neutral);
+		border-top-left-radius: var(--m-radius-sm);
+	}
+	&[data-day-last] {
+		border-right-color: var(--m-color-neutral);
+		border-bottom-right-radius: var(--m-radius-sm);
+		border-top-right-radius: 0;
+	}
+	&[data-first-column][data-bottom-edge] {
+		border-bottom-left-radius: var(--m-radius-sm);
+	}
+	&[data-last-column][data-bottom-edge] {
+		border-bottom-right-radius: var(--m-radius-sm);
+	}
+	&[data-first-column][data-top-edge] {
+		border-top-left-radius: var(--m-radius-sm);
+	}
+	&[data-last-column][data-top-edge] {
+		border-top-right-radius: var(--m-radius-sm);
+	}
+
+	&[data-range-end] {
+		z-index: 1;
+		@apply --mx-bg(var(--m-color-main));
+		border-radius: 0 var(--m-radius-sm) var(--m-radius-sm) 0;
+		--mx-shadow-value: 0 0 0 0 transparent;
+	}
+
+	&[data-range-start] {
+		z-index: 1;
+		@apply --mx-bg(var(--m-color-main));
+		/* tl tr br bl */
+		border-radius: var(--m-radius-sm) 0 0 var(--m-radius-sm);
+	}
+
+	&[data-different-month] {
+		visibility: hidden;
+	}
+
+	&:hover {
+		z-index: 100;
+		outline: none;
+		--mx-ring-value: --fn-ring(var(--m-color-main-heavy), 2px);
+	}
+
+	&:active {
+		@apply --mx-bg(var(--m-color-main-light));
+		border-radius: var(--m-radius-sm);
+	}
+}

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

@@ -0,0 +1,7 @@
+.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

@@ -0,0 +1,38 @@
+.root {
+	display: flex;
+	justify-content: center;
+}
+
+.rangeLayout {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	grid-template-areas:
+		'prevMonth leftMonth nextMonth'
+		'leftGrid leftGrid leftGrid';
+	grid-template-rows: auto 1fr;
+	gap: var(--m-space-sm);
+
+	@media (min-width: 640px) {
+		grid-template-columns: auto 1fr 1fr auto;
+		grid-template-areas:
+			'prevMonth leftMonth rightMonth nextMonth'
+			'leftGrid leftGrid rightGrid rightGrid';
+	}
+}
+
+/* Elements only visible at sm+ breakpoint */
+.smOnly {
+	display: none;
+
+	@media (min-width: 640px) {
+		display: block;
+	}
+}
+
+.smOnlyGrid {
+	display: none;
+
+	@media (min-width: 640px) {
+		display: grid;
+	}
+}