lapikit 0.0.0-insiders.e85eaa9 → 0.0.0-insiders.e94247e

package/dist/components/appbar/appbar.svelte

@@ -38,3 +38,48 @@
 		{@render children?.()}
 	</div>
 </svelte:element>
+
+<style>/* root default*/
+.kit-appbar {
+	--appbar-color: var(--on, var(--kit-on-surface));
+	--appbar-background: var(--base, var(--kit-surface));
+	--appbar-radius: var(--shape, 0);
+	--appbar-padding-wrapper: var(--prism-spacing) * 4;
+}
+.kit-appbar {
+	display: flex;
+	align-items: center;
+	border-style: solid;
+	border-width: 1px;
+	border-radius: var(--appbar-radius);
+	color: var(--appbar-color);
+	background-color: var(--appbar-background);
+	border-color: var(--appbar-background);
+	/* transition:
+		color 0.5s,
+		border-color 0.5s,
+		background-color 0.5s; */
+}
+/* wrapper */
+.kit-appbar .kit-appbar--wrapper {
+	display: flex;
+	align-items: center;
+	flex-direction: row;
+	height: calc(100% - (var(--appbar-padding-wrapper) * 2));
+	width: calc(100% - (var(--appbar-padding-wrapper) * 2));
+	margin: 0 auto;
+}
+/* density */
+.kit-appbar[breakpoint]kit-appbar--density-default {
+	height: 4rem;
+	padding-inline: calc(var(--prism-spacing) * 1.5);
+}
+.kit-appbar[breakpoint]kit-appbar--density-compact {
+	height: 3.5rem;
+	padding-inline: calc(var(--prism-spacing) * 0.75);
+}
+.kit-appbar[breakpoint]kit-appbar--density-comfortable {
+	height: 4.5rem;
+	padding-inline: calc(var(--prism-spacing) * 2.25);
+}
+</style>

package/dist/components/aspect-ratio/aspect-ratio.svelte

@@ -24,8 +24,27 @@
 	{@render children?.()}
 </div>
 
-<style>
-	.kit-aspect-ratio {
+<style>.kit-aspect-ratio {
+	display: flex;
+	flex: 1 0 auto;
+	max-height: 100%;
+	max-width: 100%;
+	overflow: hidden;
+	position: relative;
+}
+
+.kit-aspect-ratio--inline {
+	display: inline-flex;
+	flex: 0 0 auto;
+}
+
+.kit-aspect-ratio--sizer {
+	flex: 1 0 0px;
+	transition: padding-bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	pointer-events: none;
+}
+
+.kit-aspect-ratio {
 		display: flex;
 		flex: 1 0 auto;
 		max-height: 100%;
@@ -34,12 +53,12 @@
 		position: relative;
 	}
 
-	.kit-aspect-ratio--inline {
+.kit-aspect-ratio--inline {
 		display: inline-flex;
 		flex: 0 0 auto;
 	}
 
-	.kit-aspect-ratio--sizer {
+.kit-aspect-ratio--sizer {
 		flex: 1 0 0px;
 		transition: padding-bottom 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 		pointer-events: none;

package/dist/components/avatar/avatar.svelte

@@ -44,3 +44,117 @@
 		{@render children?.()}
 	{/if}
 </svelte:element>
+
+<style>.kit-avatar {
+	--avatar-color: var(--on, var(--kit-on-container));
+	--avatar-background: var(--base, var(--kit-container));
+	--avatar-radius: var(--shape, var(--kit-radius-full));
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	white-space: nowrap;
+	padding-top: var(--avatar-spacing-x);
+	padding-bottom: var(--avatar-spacing-x);
+	padding-right: var(--avatar-spacing-y);
+	padding-left: var(--avatar-spacing-y);
+
+	border-width: 1px;
+	border-style: solid;
+	border-radius: var(--avatar-radius);
+
+	/* theme */
+	color: var(--avatar-color);
+	background-color: var(--avatar-background);
+	border-color: var(--avatar-background);
+}
+
+.kit-avatar.kit-avatar--image {
+	position: relative;
+	overflow: hidden;
+}
+
+.kit-avatar.kit-avatar--image img {
+	position: relative;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+/* size */
+
+.kit-avatar[breakpoint]kit-avatar--size-xs {
+	--avatar-height: 1.75rem;
+	--avatar-multiplier-y: 2;
+	font-size: 0.75rem;
+}
+
+.kit-avatar[breakpoint]kit-avatar--size-sm {
+	--avatar-height: 2rem;
+	--avatar-multiplier-y: 3;
+	font-size: 0.875rem;
+}
+
+.kit-avatar[breakpoint]kit-avatar--size-md {
+	--avatar-height: 2.25rem;
+	--avatar-multiplier-y: 4;
+	font-size: 0.875rem;
+}
+
+.kit-avatar[breakpoint]kit-avatar--size-lg {
+	--avatar-height: 2.5rem;
+	--avatar-multiplier-y: 5;
+	font-size: 1rem;
+}
+
+.kit-avatar[breakpoint]kit-avatar--size-xl {
+	--avatar-height: 2.75rem;
+	--avatar-multiplier-y: 6;
+	font-size: 1.125rem;
+}
+
+/* density */
+
+.kit-avatar[breakpoint]kit-avatar--density-default {
+	height: calc(var(--avatar-height));
+	width: calc(var(--avatar-height));
+	--avatar-spacing-x: 0;
+	--avatar-spacing-y: 0;
+}
+
+.kit-avatar[breakpoint]kit-avatar--density-compact {
+	height: calc(var(--avatar-height) - 0.25rem);
+	width: calc(var(--avatar-height) - 0.25rem);
+	--avatar-spacing-x: 0;
+	--avatar-spacing-y: 0;
+}
+
+.kit-avatar[breakpoint]kit-avatar--density-comfortable {
+	height: calc(var(--avatar-height) + 0.25rem);
+	width: calc(var(--avatar-height) + 0.25rem);
+	--avatar-spacing-x: 0;
+	--avatar-spacing-y: 0;
+}
+
+/* variant */
+
+.kit-avatar[breakpoint]kit-avatar--variant-outline {
+	--avatar-color: var(--base, var(--kit-container));
+	background-color: transparent;
+	border: 1px solid currentColor;
+}
+
+.kit-avatar[breakpoint]kit-avatar--variant-text {
+	--avatar-color: var(--base, var(--kit-container));
+	background-color: transparent;
+	border-color: transparent;
+}
+
+.kit-avatar[breakpoint]kit-avatar--variant-dash {
+	--avatar-color: var(--base, var(--kit-container));
+	background-color: transparent;
+	border: 1px dashed currentColor;
+}
+</style>

package/dist/components/button/button.css

@@ -29,8 +29,8 @@
 	align-items: center;
 	justify-content: center;
 	white-space: nowrap;
-	gap: calc(var(--kit-spacing) * var(--button-multiplier-gap));
-	font-size: calc(var(--kit-spacing) * var(--button-multiplier-font-size));
+	gap: calc(var(--prism-spacing) * var(--button-multiplier-gap));
+	font-size: calc(var(--prism-spacing) * var(--button-multiplier-font-size));
 }
 
 .kit-button::after {
@@ -106,37 +106,37 @@
 
 /* density */
 .kit-button:not(.kit-button--icon)[breakpoint]kit-button--density-default {
-	height: calc(var(--kit-spacing) * var(--button-multiplier-x));
+	height: calc(var(--prism-spacing) * var(--button-multiplier-x));
 	--button-spacing-x: 0;
-	--button-spacing-y: calc(var(--kit-spacing) * var(--button-multiplier-y));
+	--button-spacing-y: calc(var(--prism-spacing) * var(--button-multiplier-y));
 }
 .kit-button.kit-button--icon[breakpoint]kit-button--density-default {
-	height: calc(var(--kit-spacing) * var(--button-multiplier-x));
-	width: calc(var(--kit-spacing) * var(--button-multiplier-x));
+	height: calc(var(--prism-spacing) * var(--button-multiplier-x));
+	width: calc(var(--prism-spacing) * var(--button-multiplier-x));
 	--button-spacing-x: 0;
 	--button-spacing-y: 0;
 }
 
 .kit-button:not(.kit-button--icon)[breakpoint]kit-button--density-compact {
-	height: calc(var(--kit-spacing) * var(--button-multiplier-x) - 0.25rem);
+	height: calc(var(--prism-spacing) * var(--button-multiplier-x) - 0.25rem);
 	--button-spacing-x: 0;
-	--button-spacing-y: calc(var(--kit-spacing) * var(--button-multiplier-y) - 0.25rem);
+	--button-spacing-y: calc(var(--prism-spacing) * var(--button-multiplier-y) - 0.25rem);
 }
 .kit-button.kit-button--icon[breakpoint]kit-button--density-compact {
-	height: calc(var(--kit-spacing) * var(--button-multiplier-x) - 0.25rem);
-	width: calc(var(--kit-spacing) * var(--button-multiplier-x) - 0.25rem);
+	height: calc(var(--prism-spacing) * var(--button-multiplier-x) - 0.25rem);
+	width: calc(var(--prism-spacing) * var(--button-multiplier-x) - 0.25rem);
 	--button-spacing-x: 0;
 	--button-spacing-y: 0;
 }
 
 .kit-button:not(.kit-button--icon)[breakpoint]kit-button--density-comfortable {
-	height: calc(var(--kit-spacing) * var(--button-multiplier-x) + 0.25rem);
+	height: calc(var(--prism-spacing) * var(--button-multiplier-x) + 0.25rem);
 	--button-spacing-x: 0;
-	--button-spacing-y: calc(var(--kit-spacing) * var(--button-multiplier-y) + 0.25rem);
+	--button-spacing-y: calc(var(--prism-spacing) * var(--button-multiplier-y) + 0.25rem);
 }
 .kit-button.kit-button--icon[breakpoint]kit-button--density-comfortable {
-	height: calc(var(--kit-spacing) * var(--button-multiplier-x) + 0.25rem);
-	width: calc(var(--kit-spacing) * var(--button-multiplier-x) + 0.25rem);
+	height: calc(var(--prism-spacing) * var(--button-multiplier-x) + 0.25rem);
+	width: calc(var(--prism-spacing) * var(--button-multiplier-x) + 0.25rem);
 	--button-spacing-x: 0;
 	--button-spacing-y: 0;
 }

package/dist/components/button/button.svelte

@@ -100,3 +100,233 @@
 		</div>
 	{/if}
 </svelte:element>
+
+<style>/* root */
+.kit-button {
+	--button-color: var(--on, var(--kit-on-container));
+	--button-background: var(--base, var(--kit-container));
+	--button-radius: var(--shape, var(--kit-radius-md));
+}
+.kit-button {
+	position: relative;
+	cursor: pointer;
+	border: none;
+	outline: none;
+	padding-top: var(--button-spacing-x);
+	padding-bottom: var(--button-spacing-x);
+	padding-right: var(--button-spacing-y);
+	padding-left: var(--button-spacing-y);
+	border-radius: var(--button-radius);
+	color: var(--button-color);
+	font-weight: 500;
+	text-decoration: none;
+}
+.kit-button,
+.kit-button .kit-button-content,
+.kit-button .kit-button-append,
+.kit-button .kit-button-prepend,
+.kit-button .kit-button-loading {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	white-space: nowrap;
+	gap: calc(var(--prism-spacing) * var(--button-multiplier-gap));
+	font-size: calc(var(--prism-spacing) * var(--button-multiplier-font-size));
+}
+.kit-button::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	background-color: currentColor;
+	opacity: 0;
+	transition: opacity 150ms ease;
+	pointer-events: none;
+	border-radius: inherit;
+}
+.kit-button:hover::after {
+	opacity: 0.08;
+}
+.kit-button:active::after {
+	opacity: 0.12;
+}
+.kit-button:focus-visible::after {
+	opacity: 0.12;
+}
+/* size */
+.kit-button[breakpoint]kit-button--size-xs {
+	--button-multiplier-x: 12;
+	--button-multiplier-y: 2;
+	--button-multiplier-gap: 2;
+	--button-multiplier-font-size: 6;
+}
+.kit-button[breakpoint]kit-button--size-xs .kit-icon[class*='kit-icon--size-md'] {
+	--icon-multiplier-parent-size: 7;
+}
+.kit-button[breakpoint]kit-button--size-sm {
+	--button-multiplier-x: 16;
+	--button-multiplier-y: 3;
+	--button-multiplier-gap: 4;
+	--button-multiplier-font-size: 7;
+}
+.kit-button[breakpoint]kit-button--size-sm .kit-icon[class*='kit-icon--size-md'] {
+	--icon-multiplier-parent-size: 8;
+}
+.kit-button[breakpoint]kit-button--size-md {
+	--button-multiplier-x: 20;
+	--button-multiplier-y: 4;
+	--button-multiplier-gap: 4;
+	--button-multiplier-font-size: 8;
+}
+.kit-button[breakpoint]kit-button--size-md .kit-icon[class*='kit-icon--size-md'] {
+	--icon-multiplier-parent-size: 9;
+}
+.kit-button[breakpoint]kit-button--size-lg {
+	--button-multiplier-x: 24;
+	--button-multiplier-y: 5;
+	--button-multiplier-gap: 4;
+	--button-multiplier-font-size: 9;
+}
+.kit-button[breakpoint]kit-button--size-lg .kit-icon[class*='kit-icon--size-md'] {
+	--icon-multiplier-parent-size: 10;
+}
+.kit-button[breakpoint]kit-button--size-xl {
+	--button-multiplier-x: 28;
+	--button-multiplier-y: 6;
+	--button-multiplier-gap: 5;
+	--button-multiplier-font-size: 10;
+}
+.kit-button[breakpoint]kit-button--size-xl .kit-icon[class*='kit-icon--size-md'] {
+	--icon-multiplier-parent-size: 11;
+}
+/* density */
+.kit-button:not(.kit-button--icon)[breakpoint]kit-button--density-default {
+	height: calc(var(--prism-spacing) * var(--button-multiplier-x));
+	--button-spacing-x: 0;
+	--button-spacing-y: calc(var(--prism-spacing) * var(--button-multiplier-y));
+}
+.kit-button.kit-button--icon[breakpoint]kit-button--density-default {
+	height: calc(var(--prism-spacing) * var(--button-multiplier-x));
+	width: calc(var(--prism-spacing) * var(--button-multiplier-x));
+	--button-spacing-x: 0;
+	--button-spacing-y: 0;
+}
+.kit-button:not(.kit-button--icon)[breakpoint]kit-button--density-compact {
+	height: calc(var(--prism-spacing) * var(--button-multiplier-x) - 0.25rem);
+	--button-spacing-x: 0;
+	--button-spacing-y: calc(var(--prism-spacing) * var(--button-multiplier-y) - 0.25rem);
+}
+.kit-button.kit-button--icon[breakpoint]kit-button--density-compact {
+	height: calc(var(--prism-spacing) * var(--button-multiplier-x) - 0.25rem);
+	width: calc(var(--prism-spacing) * var(--button-multiplier-x) - 0.25rem);
+	--button-spacing-x: 0;
+	--button-spacing-y: 0;
+}
+.kit-button:not(.kit-button--icon)[breakpoint]kit-button--density-comfortable {
+	height: calc(var(--prism-spacing) * var(--button-multiplier-x) + 0.25rem);
+	--button-spacing-x: 0;
+	--button-spacing-y: calc(var(--prism-spacing) * var(--button-multiplier-y) + 0.25rem);
+}
+.kit-button.kit-button--icon[breakpoint]kit-button--density-comfortable {
+	height: calc(var(--prism-spacing) * var(--button-multiplier-x) + 0.25rem);
+	width: calc(var(--prism-spacing) * var(--button-multiplier-x) + 0.25rem);
+	--button-spacing-x: 0;
+	--button-spacing-y: 0;
+}
+/* variant */
+.kit-button[breakpoint]kit-button--variant-filled {
+	background-color: var(--button-background);
+}
+.kit-button[breakpoint]kit-button--variant-outline {
+	--button-color: var(--on, var(--kit-on-container));
+	background-color: var(--button-background);
+}
+.kit-button[breakpoint]kit-button--variant-outline::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	border: 1px solid currentColor;
+	pointer-events: none;
+	border-radius: inherit;
+}
+.kit-button[breakpoint]kit-button--variant-text {
+	--button-color: var(--base, var(--kit-on-container));
+	background-color: transparent;
+	border: none;
+}
+/* state */
+.kit-button.kit-button--info[class*='button--variant-filled'] {
+	--on: var(--kit-on-info);
+	--base: var(--kit-info);
+}
+.kit-button.kit-button--info[class*='button--variant-']:not([class*='variant-filled']) {
+	--base: var(--kit-info);
+}
+.kit-button.kit-button--success[class*='button--variant-filled'] {
+	--on: var(--kit-on-success);
+	--base: var(--kit-success);
+}
+.kit-button.kit-button--success[class*='button--variant-']:not([class*='variant-filled']) {
+	--base: var(--kit-success);
+}
+.kit-button.kit-button--warning[class*='button--variant-filled'] {
+	--on: var(--kit-on-warning);
+	--base: var(--kit-warning);
+}
+.kit-button.kit-button--warning[class*='button--variant-']:not([class*='variant-filled']) {
+	--base: var(--kit-warning);
+}
+.kit-button.kit-button--error[class*='button--variant-filled'] {
+	--on: var(--kit-on-error);
+	--base: var(--kit-error);
+}
+.kit-button.kit-button--error[class*='button--variant-']:not([class*='variant-filled']) {
+	--base: var(--kit-error);
+}
+/* events */
+.kit-button[class*='button--variant-filled']:active,
+.kit-button.kit-button--active[class*='button--variant-filled'] {
+	background-color: color-mix(in oklab, var(--button-background) 90%, var(--kit-scrim));
+}
+.kit-button.kit-button--active[class*='button--variant-']:not([class*='variant-filled']):active,
+.kit-button.kit-button--active[class*='button--variant-']:not([class*='variant-filled']) {
+	background-color: color-mix(in oklab, currentColor 15%, transparent);
+}
+/* icon */
+.kit-button i::before,
+.kit-button .kit-icon {
+	--base-parent: var(--button-color);
+}
+/* disabled */
+.kit-button.kit-button--disabled,
+.kit-button[disabled],
+.kit-button.kit-button--loading {
+	pointer-events: none;
+	user-select: none;
+	cursor: default;
+}
+.kit-button[class*='button--variant-filled'].kit-button--disabled {
+	color: color-mix(in oklab, var(--button-color) 40%, transparent) !important;
+	background-color: color-mix(in oklab, var(--button-background) 70%, transparent) !important;
+}
+.kit-button[class*='button--variant-filled'].kit-button--disabled i:before {
+	color: color-mix(in oklab, var(--button-color) 40%, transparent) !important;
+}
+.kit-button[class*='button--variant-']:not([class*='variant-filled']).kit-button--disabled,
+.kit-button[class*='button--variant-']:not([class*='variant-filled']).kit-button--disabled
+	i::before {
+	color: color-mix(in oklab, var(--button-background) 40%, transparent) !important;
+}
+/* loading */
+.kit-button.kit-button--loading > .kit-button-content,
+.kit-button.kit-button--loading > .kit-button-append,
+.kit-button.kit-button--loading > .kit-button-prepend {
+	visibility: hidden;
+}
+.kit-button.kit-button--loading > .kit-button-loading {
+	position: absolute;
+	min-width: fit-content;
+}
+.kit-button.kit-button--loading > .kit-button-loading .kit-icon-load {
+	animation: icon-rotate 1s ease-out infinite;
+}
+</style>

package/dist/components/card/card.css

@@ -50,16 +50,16 @@
 
 /* density */
 .kit-card[breakpoint]kit-card--density-default {
-	--card-spacing-x: calc(var(--kit-spacing) * 2);
-	--card-spacing-y: calc(var(--kit-spacing) * 2);
+	--card-spacing-x: calc(var(--prism-spacing) * 2);
+	--card-spacing-y: calc(var(--prism-spacing) * 2);
 }
 .kit-card[breakpoint]kit-card--density-compact {
 	--card-spacing-x: 0;
 	--card-spacing-y: 0;
 }
 .kit-card[breakpoint]kit-card--density-comfortable {
-	--card-spacing-x: calc(var(--kit-spacing) * 4);
-	--card-spacing-y: calc(var(--kit-spacing) * 4);
+	--card-spacing-x: calc(var(--prism-spacing) * 4);
+	--card-spacing-y: calc(var(--prism-spacing) * 4);
 }
 
 /* variant */

package/dist/components/card/card.svelte

@@ -61,3 +61,111 @@
 >
 	{@render children?.()}
 </svelte:element>
+
+<style>/* root */
+.kit-card {
+	--card-color: var(--on, var(--kit-on-surface));
+	--card-background: var(--base, var(--kit-surface));
+	--card-radius: var(--shape, var(--kit-radius-md));
+}
+.kit-card {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	text-align: start;
+	overflow: hidden;
+	/* transition:
+		color 0.5s,
+		background-color 0.5s; */
+	padding-top: var(--card-spacing-x);
+	padding-bottom: var(--card-spacing-x);
+	padding-right: var(--card-spacing-y);
+	padding-left: var(--card-spacing-y);
+	border-radius: var(--card-radius);
+	font-weight: 500;
+	color: var(--card-color);
+	text-decoration: none;
+}
+.kit-card.kit-card--clickable {
+	cursor: pointer;
+}
+.kit-card.kit-card--clickable::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	background-color: currentColor;
+	opacity: 0;
+	transition: opacity 150ms ease;
+	pointer-events: none;
+	border-radius: inherit;
+}
+.kit-card.kit-card--clickable:hover::after {
+	opacity: 0.08;
+}
+.kit-card.kit-card--clickable:active::after {
+	opacity: 0.12;
+}
+.kit-card.kit-card--clickable:focus-visible::after {
+	opacity: 0.12;
+}
+/* density */
+.kit-card[breakpoint]kit-card--density-default {
+	--card-spacing-x: calc(var(--prism-spacing) * 2);
+	--card-spacing-y: calc(var(--prism-spacing) * 2);
+}
+.kit-card[breakpoint]kit-card--density-compact {
+	--card-spacing-x: 0;
+	--card-spacing-y: 0;
+}
+.kit-card[breakpoint]kit-card--density-comfortable {
+	--card-spacing-x: calc(var(--prism-spacing) * 4);
+	--card-spacing-y: calc(var(--prism-spacing) * 4);
+}
+/* variant */
+.kit-card[breakpoint]kit-card--variant-filled {
+	background-color: var(--card-background);
+}
+.kit-card[breakpoint]kit-card--variant-outline {
+	--card-color: var(--base, var(--kit-on-surface));
+	background-color: transparent;
+}
+.kit-card[breakpoint]kit-card--variant-outline::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	border: 1px solid currentColor;
+	pointer-events: none;
+	border-radius: inherit;
+}
+.kit-card[breakpoint]kit-card--variant-text {
+	--card-color: var(--base, var(--kit-on-surface));
+	background-color: transparent;
+	border: none;
+}
+/* events */
+.kit-card[class*='card--variant-filled'].kit-card--clickable:active,
+.kit-card.kit-card--active[class*='card--variant-filled'].kit-card--clickable {
+	background-color: color-mix(in oklab, var(--card-background) 90%, var(--kit-scrim));
+}
+.kit-card.kit-card--active[class*='card--variant-']:not(
+		[class*='variant-filled']
+	).kit-card--clickable:active,
+.kit-card.kit-card--active[class*='card--variant-']:not(
+		[class*='variant-filled']
+	).kit-card--clickable {
+	background-color: color-mix(in oklab, currentColor 15%, transparent);
+}
+/* disabled */
+.kit-card.kit-card--disabled,
+.kit-card[disabled],
+.kit-card:disabled {
+	pointer-events: none;
+	user-select: none;
+	opacity: 0.6;
+}
+.kit-card.kit-card--disabled > *,
+.kit-card[disabled] > *,
+.kit-card:disabled > * {
+	opacity: 0.6;
+}
+</style>