lapikit 0.0.0-insiders.e94247e → 0.0.0-insiders.eb9b51b

package/dist/components/spacer/spacer.svelte

@@ -5,8 +5,3 @@
 </script>
 
 <svelte:element this={is} {...rest} class={['kit-spacer', rest.class]}> </svelte:element>
-
-<style>.kit-spacer {
-	flex-grow: 1;
-}
-</style>

package/dist/components/spacer/types.d.ts

@@ -1,4 +1,4 @@
-import type { Base } from '../../internal/types.js';
+import type { Base } from '../../internal/types/index.js';
 export interface SpacerProps extends Base {
     is?: 'div';
 }

package/dist/components/textfield/textfield.css

@@ -1,10 +1,3 @@
-/* root */
-.kit-textfield {
-	--textfield-color: var(--on, var(--kit-on-container));
-	--textfield-background: var(--base, var(--kit-container));
-	--textfield-radius: var(--shape, var(--kit-radius-md));
-}
-
 .kit-textfield {
 	flex: 1 1 auto;
 	font-size: 1rem;
@@ -18,16 +11,16 @@
 
 /* variant */
 .kit-textfield[breakpoint]kit-textfield--variant-filled .kit-field {
-	--textfield-border-color: var(--textfield-background);
-	background-color: var(--textfield-background);
-	border-radius: var(--textfield-radius);
-	color: var(--textfield-color);
+	--textfield-border-color: var(--textfield-background, var(--kit-background-grouped-primary));
+	background-color: var(--textfield-background, var(--kit-background-grouped-primary));
+	border-radius: var(--textfield-shape, var(--system-shape-md));
+	color: var(--textfield-color, var(--kit-label-primary));
 }
 
 .kit-textfield[breakpoint]kit-textfield--variant-outline .kit-field {
 	--textfield-border-color: var(--textfield-color);
 	background-color: var(--textfield-background);
-	border-radius: var(--textfield-radius);
+	border-radius: var(--textfield-shape);
 	color: var(--textfield-color);
 }
 
@@ -37,7 +30,7 @@
 	border-top: 1px solid var(--textfield-border-color);
 	border-right: 1px solid var(--textfield-border-color);
 	border-left: 1px solid var(--textfield-border-color);
-	border-radius: var(--textfield-radius);
+	border-radius: var(--textfield-shape);
 }
 
 .kit-textfield[breakpoint]kit-textfield--variant-text .kit-field {
@@ -75,7 +68,7 @@
 }
 
 .kit-textfield--error .kit-textfield-outline {
-	border: 1px solid var(--kit-error);
+	border: 1px solid var(--kit-accent-destructive);
 }
 
 .kit-textfield-outline {
@@ -155,15 +148,15 @@
 	display: grid;
 	grid-template-areas: 'prepend-inner field clear append-inner';
 	grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
-	font-size: calc(var(--prism-spacing) * var(--textfield-multiplier-font-size));
+	font-size: calc(var(--system-spacing) * var(--textfield-multiplier-font-size));
 	max-width: 100%;
 	contain: layout;
 	flex: 1 0;
 	grid-area: control;
 	position: relative;
-	padding: calc(var(--prism-spacing) * var(--textfield-multiplier-x))
-		calc(var(--prism-spacing) * var(--textfield-multiplier-y));
-	gap: calc(var(--prism-spacing) * var(--textfield-multiplier-gap));
+	padding: calc(var(--system-spacing) * var(--textfield-multiplier-x))
+		calc(var(--system-spacing) * var(--textfield-multiplier-y));
+	gap: calc(var(--system-spacing) * var(--textfield-multiplier-gap));
 }
 
 .kit-textfield-control .kit-field .kit-field--field {
@@ -222,13 +215,13 @@
 	min-width: 1px;
 	position: relative;
 	display: grid;
-	gap: calc(var(--prism-spacing) * var(--textfield-multiplier-gap));
+	gap: calc(var(--system-spacing) * var(--textfield-multiplier-gap));
 	grid-template-areas: 'message-prepend message message-append ';
 	grid-template-columns: max-content minmax(0, 1fr) max-content;
 }
 
 .kit-message.kit-message--message-error {
-	color: var(--kit-error);
+	color: var(--kit-accent-destructive);
 }
 
 .kit-message .kit-message--message {
@@ -291,15 +284,15 @@
 /*density */
 .kit-textfield[breakpoint]kit-textfield--density-default {
 	--textfield-spacing-x: 0;
-	--textfield-spacing-y: calc(var(--prism-spacing) * var(--textfield-multiplier-y));
+	--textfield-spacing-y: calc(var(--system-spacing) * var(--textfield-multiplier-y));
 }
 
 .kit-textfield[breakpoint]kit-textfield--density-compact {
 	--textfield-spacing-x: calc(0 - 0.5rem);
-	--textfield-spacing-y: calc(var(--prism-spacing) * var(--textfield-multiplier-y) - 0.5rem);
+	--textfield-spacing-y: calc(var(--system-spacing) * var(--textfield-multiplier-y) - 0.5rem);
 }
 
 .kit-textfield[breakpoint]kit-textfield--density-comfortable {
 	--textfield-spacing-x: calc(0 + 0.5rem);
-	--textfield-spacing-y: calc(var(--prism-spacing) * var(--textfield-multiplier-y) + 0.5rem);
+	--textfield-spacing-y: calc(var(--system-spacing) * var(--textfield-multiplier-y) + 0.5rem);
 }

package/dist/components/textfield/textfield.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/index.js';
+	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
 	import type { TextfieldProps } from './types.js';
 
 	//external
@@ -106,9 +106,9 @@
 		type === 'number' && hideSpinButtons && 'kit-textfield--hide-spin-buttons',
 		rest.class
 	]}
-	style:--base={assets.color(background)}
-	style:--on={assets.color(color)}
-	style:--shape={assets.shape(rounded)}
+	style:--textfield-background={assets.color(background)}
+	style:--textfield-color={assets.color(color)}
+	style:--textfield-shape={assets.shape(rounded)}
 >
 	{#if prepend}
 		<div class="kit-textfield-prepend">
@@ -191,273 +191,3 @@
 		</div>
 	</div>
 </div>
-
-<style>/* root */
-.kit-textfield {
-	--textfield-color: var(--on, var(--kit-on-container));
-	--textfield-background: var(--base, var(--kit-container));
-	--textfield-radius: var(--shape, var(--kit-radius-md));
-}
-.kit-textfield {
-	flex: 1 1 auto;
-	font-size: 1rem;
-	display: grid;
-	grid-template-areas:
-		'prepend control append'
-		'a messages b';
-	grid-template-columns: max-content minmax(0, 1fr) max-content;
-	grid-template-rows: 1fr auto;
-}
-/* variant */
-.kit-textfield[breakpoint]kit-textfield--variant-filled .kit-field {
-	--textfield-border-color: var(--textfield-background);
-	background-color: var(--textfield-background);
-	border-radius: var(--textfield-radius);
-	color: var(--textfield-color);
-}
-.kit-textfield[breakpoint]kit-textfield--variant-outline .kit-field {
-	--textfield-border-color: var(--textfield-color);
-	background-color: var(--textfield-background);
-	border-radius: var(--textfield-radius);
-	color: var(--textfield-color);
-}
-.kit-textfield[breakpoint]kit-textfield--variant-filled .kit-textfield-outline,
-.kit-textfield[breakpoint]kit-textfield--variant-outline .kit-textfield-outline {
-	border-bottom: 1px solid var(--textfield-border-color);
-	border-top: 1px solid var(--textfield-border-color);
-	border-right: 1px solid var(--textfield-border-color);
-	border-left: 1px solid var(--textfield-border-color);
-	border-radius: var(--textfield-radius);
-}
-.kit-textfield[breakpoint]kit-textfield--variant-text .kit-field {
-	--textfield-border-color: var(--textfield-color);
-	background-color: transparent;
-	border-radius: 0;
-	color: var(--textfield-color);
-}
-.kit-textfield[breakpoint]kit-textfield--variant-text .kit-textfield-outline {
-	border-bottom: 1px solid var(--textfield-border-color);
-	border-top: 0;
-	border-right: 0;
-	border-left: 0;
-	border-radius: 0;
-}
-.kit-textfield--hide-spin-buttons input[type='number'] {
-	-moz-appearance: textfield;
-	appearance: textfield;
-}
-.kit-textfield--hide-spin-buttons input[type='number']::-webkit-inner-spin-button,
-.kit-textfield--hide-spin-buttons input[type='number']::-webkit-outer-spin-button {
-	display: none;
-	-webkit-appearance: none;
-}
-.kit-textfield--disabled {
-	opacity: 0.5;
-	pointer-events: none;
-}
-.kit-textfield--readonly {
-	pointer-events: none;
-}
-.kit-textfield--error .kit-textfield-outline {
-	border: 1px solid var(--kit-error);
-}
-.kit-textfield-outline {
-	align-items: stretch;
-	contain: layout;
-	display: flex;
-	height: 100%;
-	left: 0;
-	pointer-events: none;
-	position: absolute;
-	right: 0;
-	width: 100%;
-}
-.kit-textfield .kit-textfield-prepend {
-	display: flex;
-	grid-area: prepend;
-	margin-inline-end: 16px;
-	align-items: center;
-	padding-top: 0;
-}
-.kit-textfield .kit-textfield-append {
-	display: flex;
-	grid-area: append;
-	margin-inline-start: 16px;
-	align-items: center;
-	padding-top: 0;
-}
-/* control */
-.kit-textfield-control {
-	display: flex;
-	grid-area: control;
-}
-.kit-textfield-control .kit-textfield-prepend-inner {
-	grid-area: prepend-inner;
-	display: flex;
-	align-items: center;
-	padding-top: 0;
-}
-.kit-textfield-control .kit-textfield-clearable {
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	padding-top: 0;
-	overflow: hidden;
-	margin-inline: 4px;
-	grid-area: clear;
-	opacity: 0;
-}
-.kit-textfield-clearable.kit-textfield-clearable--visible {
-	opacity: 1;
-}
-.kit-textfield-control .kit-textfield-append-inner {
-	grid-area: append-inner;
-	display: flex;
-	align-items: center;
-	padding-top: 0;
-}
-/* field prefix suffix */
-.kit-field .kit-field--field .kit-field--field-prefix,
-.kit-field .kit-field--field .kit-field--field-suffix {
-	align-items: center;
-	cursor: default;
-	display: flex;
-	transition: inherit;
-	white-space: nowrap;
-}
-/* field */
-.kit-textfield-control .kit-field {
-	display: grid;
-	grid-template-areas: 'prepend-inner field clear append-inner';
-	grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
-	font-size: calc(var(--prism-spacing) * var(--textfield-multiplier-font-size));
-	max-width: 100%;
-	contain: layout;
-	flex: 1 0;
-	grid-area: control;
-	position: relative;
-	padding: calc(var(--prism-spacing) * var(--textfield-multiplier-x))
-		calc(var(--prism-spacing) * var(--textfield-multiplier-y));
-	gap: calc(var(--prism-spacing) * var(--textfield-multiplier-gap));
-}
-.kit-textfield-control .kit-field .kit-field--field {
-	flex: 1 0;
-	grid-area: field;
-	position: relative;
-	align-items: flex-start;
-	display: flex;
-}
-.kit-field .kit-field--field input {
-	font: inherit;
-	border-radius: 0;
-	color: inherit;
-	flex: 1;
-	min-width: 0;
-	align-items: center;
-	color: inherit;
-	column-gap: 2px;
-	display: flex;
-	flex-wrap: wrap;
-	position: relative;
-	width: 100%;
-	row-gap: 8px;
-}
-.kit-field .kit-field--field input:focus,
-.kit-field .kit-field--field input:focus-visible,
-.kit-field .kit-field--field input:active {
-	outline: none;
-	box-shadow: none;
-}
-/* message */
-.kit-textfield-message {
-	padding-inline: var(--textfield-spacing-y);
-	align-items: flex-end;
-	display: flex;
-	font-size: 0.75rem;
-	grid-area: messages;
-	min-height: 22px;
-	padding-top: var(--textfield-spacing-x);
-	overflow: hidden;
-	justify-content: space-between;
-	opacity: 0;
-}
-.kit-textfield-message.kit-textfield-message--visible {
-	opacity: 1;
-}
-.kit-message {
-	flex: 1 1 auto;
-	font-size: 12px;
-	min-height: 14px;
-	min-width: 1px;
-	position: relative;
-	display: grid;
-	gap: calc(var(--prism-spacing) * var(--textfield-multiplier-gap));
-	grid-template-areas: 'message-prepend message message-append ';
-	grid-template-columns: max-content minmax(0, 1fr) max-content;
-}
-.kit-message.kit-message--message-error {
-	color: var(--kit-error);
-}
-.kit-message .kit-message--message {
-	line-height: 12px;
-	word-break: break-word;
-	overflow-wrap: break-word;
-	word-wrap: break-word;
-	hyphens: auto;
-	grid-area: message;
-}
-.kit-message .kit-message--prepend,
-.kit-message .kit-message--append {
-	line-height: 12px;
-}
-.kit-message .kit-message--prepend {
-	grid-area: message-prepend;
-}
-.kit-message .kit-message--append {
-	grid-area: message-append;
-}
-/* size */
-.kit-textfield[breakpoint]kit-textfield--size-xs {
-	--textfield-multiplier-x: 2;
-	--textfield-multiplier-y: 2;
-	--textfield-multiplier-gap: 1;
-	--textfield-multiplier-font-size: 6;
-}
-.kit-textfield[breakpoint]kit-textfield--size-sm {
-	--textfield-multiplier-x: 3;
-	--textfield-multiplier-y: 4;
-	--textfield-multiplier-gap: 2;
-	--textfield-multiplier-font-size: 7;
-}
-.kit-textfield[breakpoint]kit-textfield--size-md {
-	--textfield-multiplier-x: 4;
-	--textfield-multiplier-y: 6;
-	--textfield-multiplier-gap: 2;
-	--textfield-multiplier-font-size: 8;
-}
-.kit-textfield[breakpoint]kit-textfield--size-lg {
-	--textfield-multiplier-x: 5;
-	--textfield-multiplier-y: 6;
-	--textfield-multiplier-gap: 2;
-	--textfield-multiplier-font-size: 9;
-}
-.kit-textfield[breakpoint]kit-textfield--size-xl {
-	--textfield-multiplier-x: 6;
-	--textfield-multiplier-y: 8;
-	--textfield-multiplier-gap: 3;
-	--textfield-multiplier-font-size: 10;
-}
-/*density */
-.kit-textfield[breakpoint]kit-textfield--density-default {
-	--textfield-spacing-x: 0;
-	--textfield-spacing-y: calc(var(--prism-spacing) * var(--textfield-multiplier-y));
-}
-.kit-textfield[breakpoint]kit-textfield--density-compact {
-	--textfield-spacing-x: calc(0 - 0.5rem);
-	--textfield-spacing-y: calc(var(--prism-spacing) * var(--textfield-multiplier-y) - 0.5rem);
-}
-.kit-textfield[breakpoint]kit-textfield--density-comfortable {
-	--textfield-spacing-x: calc(0 + 0.5rem);
-	--textfield-spacing-y: calc(var(--prism-spacing) * var(--textfield-multiplier-y) + 0.5rem);
-}
-</style>

package/dist/components/textfield/types.d.ts

@@ -1,4 +1,4 @@
-import type { Component } from '../../internal/types.js';
+import type { Component } from '../../internal/types/index.js';
 import type { Snippet } from 'svelte';
 export interface TextfieldProps extends Component {
     ref?: HTMLElement | null;

package/dist/components/toolbar/toolbar.css

@@ -1,75 +1,63 @@
 .kit-toolbar {
-	--toolbar-color: var(--on, var(--kit-on-surface));
-	--toolbar-background: var(--base, var(--kit-surface));
-	--toolbar-radius: var(--shape, var(--kit-radius-md));
-
 	display: flex;
 	align-items: center;
-	/* min-width: max-content; */
 	border-style: solid;
-	/* transition:
-		color 0.5s,
-		border-color 0.5s,
-		background-color 0.5s; */
-
 	border-width: 1px;
 	border-style: solid;
-	border-radius: var(--toolbar-radius);
-
-	/* theme */
-	color: var(--toolbar-color);
-	background-color: var(--toolbar-background);
-	border-color: var(--toolbar-background);
+	border-radius: var(--toolbar-shape, var(--system-shape-md));
+	color: var(--toolbar-color, var(--kit-label-primary));
+	background-color: var(--toolbar-background, var(--kit-background-grouped-tertiary));
+	border-color: var(--toolbar-background, var(--kit-background-grouped-tertiary));
 }
 
 /* density */
 .kit-toolbar[breakpoint]kit-toolbar--density-default {
-	border-radius: calc(var(--prism-spacing) * 2.25);
+	border-radius: calc(var(--system-spacing) * 2.25);
 }
 .kit-toolbar[breakpoint]kit-toolbar--density-default:not([class*='toolbar--orientation-vertical']) {
 	height: 3rem;
-	padding-inline: calc(var(--prism-spacing) * 1.5);
+	padding-inline: calc(var(--system-spacing) * 1.5);
 }
 
 .kit-toolbar[breakpoint]kit-toolbar--density-default[class*='toolbar--orientation-vertical'] {
 	width: 3rem;
-	padding: calc(var(--prism-spacing) * 1.5) 0;
+	padding: calc(var(--system-spacing) * 1.5) 0;
 }
 
 .kit-toolbar[breakpoint]kit-toolbar--density-compact {
-	border-radius: calc(var(--prism-spacing) * 1.75);
+	border-radius: calc(var(--system-spacing) * 1.75);
 }
 
 .kit-toolbar[breakpoint]kit-toolbar--density-compact:not([class*='toolbar--orientation-vertical']) {
 	height: 2.625rem;
-	padding-inline: calc(var(--prism-spacing) * 0.75);
+	padding-inline: calc(var(--system-spacing) * 0.75);
 }
 
 .kit-toolbar[breakpoint]kit-toolbar--density-compact[class*='toolbar--orientation-vertical'] {
 	width: 2.625rem;
-	padding: calc(var(--prism-spacing) * 0.75) 0;
+	padding: calc(var(--system-spacing) * 0.75) 0;
 }
 
 .kit-toolbar[breakpoint]kit-toolbar--density-comfortable {
-	border-radius: calc(var(--prism-spacing) * 3.5);
+	border-radius: calc(var(--system-spacing) * 3.5);
 }
 
 .kit-toolbar[breakpoint]kit-toolbar--density-comfortable:not(
 		[class*='toolbar--orientation-vertical']
 	) {
 	height: 3.5rem;
-	padding-inline: calc(var(--prism-spacing) * 2.25);
+	padding-inline: calc(var(--system-spacing) * 2.25);
 }
 
 .kit-toolbar[breakpoint]kit-toolbar--density-comfortable[class*='toolbar--orientation-vertical'] {
 	width: 3.5rem;
-	padding: calc(var(--prism-spacing) * 2.25) 0;
+	padding: calc(var(--system-spacing) * 2.25) 0;
 }
 
 .kit-toolbar[breakpoint]kit-toolbar--variant-text,
 .kit-toolbar[breakpoint]kit-toolbar--variant-outline,
 .kit-toolbar[breakpoint]kit-toolbar--variant-dash {
-	--toolbar-color: var(--base, var(--kit-surface));
+	--toolbar-color: var(--base, var(--kit-background-grouped-primary));
 	background-color: transparent;
 }
 

package/dist/components/toolbar/toolbar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/index.js';
+	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
 	import type { ToolbarProps } from './types.js';
 
 	let {
@@ -37,146 +37,11 @@
 		location && assets.className('toolbar', 'location', location),
 		rest.class
 	]}
-	style:--base={assets.color(background)}
-	style:--on={assets.color(color)}
-	style:--shape={assets.shape(rounded)}
+	style:--toolbar-background={assets.color(background)}
+	style:--toolbar-color={assets.color(color)}
+	style:--toolbar-shape={assets.shape(rounded)}
 >
 	<div class={['kit-toolbar--wrapper', classContent]}>
 		{@render children?.()}
 	</div>
 </svelte:element>
-
-<style>.kit-toolbar {
-	--toolbar-color: var(--on, var(--kit-on-surface));
-	--toolbar-background: var(--base, var(--kit-surface));
-	--toolbar-radius: var(--shape, var(--kit-radius-md));
-
-	display: flex;
-	align-items: center;
-	/* min-width: max-content; */
-	border-style: solid;
-	/* transition:
-		color 0.5s,
-		border-color 0.5s,
-		background-color 0.5s; */
-
-	border-width: 1px;
-	border-style: solid;
-	border-radius: var(--toolbar-radius);
-
-	/* theme */
-	color: var(--toolbar-color);
-	background-color: var(--toolbar-background);
-	border-color: var(--toolbar-background);
-}
-
-/* density */
-
-.kit-toolbar[breakpoint]kit-toolbar--density-default {
-	border-radius: calc(var(--prism-spacing) * 2.25);
-}
-
-.kit-toolbar[breakpoint]kit-toolbar--density-default:not([class*='toolbar--orientation-vertical']) {
-	height: 3rem;
-	padding-inline: calc(var(--prism-spacing) * 1.5);
-}
-
-.kit-toolbar[breakpoint]kit-toolbar--density-default[class*='toolbar--orientation-vertical'] {
-	width: 3rem;
-	padding: calc(var(--prism-spacing) * 1.5) 0;
-}
-
-.kit-toolbar[breakpoint]kit-toolbar--density-compact {
-	border-radius: calc(var(--prism-spacing) * 1.75);
-}
-
-.kit-toolbar[breakpoint]kit-toolbar--density-compact:not([class*='toolbar--orientation-vertical']) {
-	height: 2.625rem;
-	padding-inline: calc(var(--prism-spacing) * 0.75);
-}
-
-.kit-toolbar[breakpoint]kit-toolbar--density-compact[class*='toolbar--orientation-vertical'] {
-	width: 2.625rem;
-	padding: calc(var(--prism-spacing) * 0.75) 0;
-}
-
-.kit-toolbar[breakpoint]kit-toolbar--density-comfortable {
-	border-radius: calc(var(--prism-spacing) * 3.5);
-}
-
-.kit-toolbar[breakpoint]kit-toolbar--density-comfortable:not(
-		[class*='toolbar--orientation-vertical']
-	) {
-	height: 3.5rem;
-	padding-inline: calc(var(--prism-spacing) * 2.25);
-}
-
-.kit-toolbar[breakpoint]kit-toolbar--density-comfortable[class*='toolbar--orientation-vertical'] {
-	width: 3.5rem;
-	padding: calc(var(--prism-spacing) * 2.25) 0;
-}
-
-.kit-toolbar[breakpoint]kit-toolbar--variant-text,
-.kit-toolbar[breakpoint]kit-toolbar--variant-outline,
-.kit-toolbar[breakpoint]kit-toolbar--variant-dash {
-	--toolbar-color: var(--base, var(--kit-surface));
-	background-color: transparent;
-}
-
-.kit-toolbar[breakpoint]kit-toolbar--variant-outline {
-	border-color: currentColor;
-}
-
-.kit-toolbar[breakpoint]kit-toolbar--variant-dash {
-	border-style: dashed;
-	border-color: currentColor;
-}
-
-.kit-toolbar[breakpoint]kit-toolbar--orientation-horizontal {
-	flex-direction: row;
-	width: 100%;
-}
-
-.kit-toolbar[breakpoint]kit-toolbar--orientation-vertical {
-	flex-direction: column;
-	min-height: fit-content;
-	width: fit-content;
-}
-
-/* wrapper */
-
-.kit-toolbar .kit-toolbar--wrapper {
-	display: flex;
-	align-items: center;
-	/* margin-left: auto;
-	margin-right: auto; */
-	flex-direction: row;
-	height: auto;
-	width: 100%;
-}
-
-.kit-toolbar[breakpoint]kit-toolbar--orientation-vertical .kit-toolbar--wrapper {
-	flex-direction: column;
-	height: 100%;
-}
-
-/* location */
-
-.kit-toolbar[breakpoint]kit-toolbar--location-top {
-	top: 0px;
-	z-index: 1004;
-	transform: translateY(0px);
-	position: fixed;
-	left: 0px;
-	width: calc(100% + 0px);
-}
-
-.kit-toolbar[breakpoint]kit-toolbar--location-bottom {
-	z-index: 1004;
-	transform: translateY(0px);
-	position: fixed;
-	left: 0px;
-	width: calc(100% + 0px);
-	bottom: 0px;
-}
-</style>

package/dist/components/toolbar/types.d.ts

@@ -1,4 +1,4 @@
-import type { Component } from '../../internal/types.js';
+import type { Component } from '../../internal/types/index.js';
 type Variant = 'outline' | 'text' | 'dash';
 type Density = 'compact' | 'comfortable' | 'default';
 type Orientation = 'horizontal' | 'vertical';