lapikit 0.2.5 → 0.2.7

package/dist/components/app/app.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { BROWSER } from 'esm-env';
+	const BROWSER = typeof window !== 'undefined';
 	import type { Snippet } from 'svelte';
 	import { useTheme } from '../../actions/use-theme.js';
 	import { modalOpen, setOpenModal } from '../../stores/components.js';

package/dist/components/card/card.css

@@ -58,7 +58,7 @@
 }
 
 .kit-card[breakpoint]kit-card--variant-outline {
-	--card-color: var(--base, var(--kit-label-primary));
+	--card-color: var(--card-background, var(--kit-label-primary));
 	background-color: transparent;
 }
 .kit-card[breakpoint]kit-card--variant-outline::before {
@@ -71,7 +71,7 @@
 }
 
 .kit-card[breakpoint]kit-card--variant-text {
-	--card-color: var(--base, var(--kit-label-primary));
+	--card-color: var(--card-background, var(--kit-label-primary));
 	background-color: transparent;
 	border: none;
 }

package/dist/components/card/card.svelte

@@ -20,6 +20,8 @@
 		color,
 		background,
 		noRipple,
+		width,
+		height,
 		...rest
 	}: CardProps = $props();
 
@@ -58,6 +60,8 @@
 	style:--card-background={assets.color(background)}
 	style:--card-color={assets.color(color)}
 	style:--card-shape={assets.shape(rounded)}
+	style:width
+	style:height
 >
 	{@render children?.()}
 </svelte:element>

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

@@ -14,5 +14,7 @@ export interface CardProps extends Component {
     rounded?: string;
     color?: string;
     background?: string;
+    width?: string | number;
+    height?: string | number;
 }
 export {};

package/dist/components/icon/icon.css

@@ -9,11 +9,11 @@
 }
 
 .kit-icon:before {
-	color: var(--icon-color, currentColor);
+	color: var(--icon-color-state, var(--icon-color, currentColor)) !important;
 }
 
 .kit-icon svg {
-	color: var(--icon-color, currentColor);
+	color: var(--icon-color-state, var(--icon-color, currentColor)) !important;
 }
 
 .kit-icon svg,
@@ -49,16 +49,16 @@
 
 /* state */
 .kit-icon.kit-icon--info {
-	--base: var(--kit-accent-info);
+	--icon-color-state: var(--kit-accent-info);
 }
 .kit-icon.kit-icon--success {
-	--base: var(--kit-accent-successs);
+	--icon-color-state: var(--kit-accent-success);
 }
 .kit-icon.kit-icon--warning {
-	--base: var(--kit-accent-warning);
+	--icon-color-state: var(--kit-accent-warning);
 }
 .kit-icon.kit-icon--error {
-	--base: var(--kit-accent-destructive);
+	--icon-color-state: var(--kit-accent-destructive);
 }
 
 /* disabled */

package/dist/components/separator/separator.css

@@ -5,15 +5,30 @@
 	max-height: 0px;
 	opacity: var(--separator-opacity, 0.12);
 	transition: inherit;
-	border-color: var(--separator-color, var(--kit-state-shadow));
+	border-color: var(--separator-color, var(--kit-label-primary));
 	border-style: solid;
 }
 
+.kit-separator--inset:not(.kit-separator--orientation-vertical) {
+	max-width: calc(100% - 4.5rem);
+	margin-inline-start: 4.5rem;
+}
+
+.kit-separator--inset.kit-separator--orientation-vertical {
+	margin-bottom: 0.5rem;
+	margin-top: 0.5rem;
+	max-height: calc(100% - 1rem);
+}
+
 .kit-separator:not(.kit-separator--orientation-vertical) {
+	width: 100%;
+}
+
+.kit-separator[breakpoint]kit-separator--orientation-horizontal {
 	border-width: var(--separator-top-width, thin) 0 0 0;
 }
 
-.kit-separator--orientation-vertical {
+.kit-separator[breakpoint]kit-separator--orientation-vertical {
 	align-self: stretch;
 	border-width: 0 thin 0 0;
 	display: inline-flex;
@@ -25,18 +40,3 @@
 	width: 0px;
 	border-width: 0 var(--separator-right-width, thin) 0 0;
 }
-
-.kit-separator--inset:not(.kit-separator--orientation-vertical) {
-	max-width: calc(100% - 4.5rem);
-	margin-inline-start: 4.5rem;
-}
-
-.kit-separator--inset.kit-separator--orientation-vertical {
-	margin-bottom: 0.5rem;
-	margin-top: 0.5rem;
-	max-height: calc(100% - 1rem);
-}
-
-.kit-separator:not(.kit-separator--orientation-vertical) {
-	width: 100%;
-}

package/dist/components/separator/separator.svelte

@@ -28,7 +28,7 @@
 		orientation && assets.className('separator', 'orientation', orientation),
 		rest.class
 	]}
-	aria-orientation={orientation}
+	aria-orientation={typeof orientation === 'string' ? orientation : undefined}
 	role="separator"
 	style:--separator-color={assets.color(color)}
 	style:--separator-opacity={opacity}

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

@@ -1,4 +1,5 @@
 import type { Base } from '../../internal/types/index.js';
+type Orientation = 'horizontal' | 'vertical';
 export interface SeparatorProps extends Base {
     is?: 'div' | 'hr';
     light?: boolean;
@@ -7,5 +8,8 @@ export interface SeparatorProps extends Base {
     thickness?: string;
     opacity?: string | number;
     color?: string;
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: Orientation | {
+        [key: string]: Orientation;
+    };
 }
+export {};

package/dist/internal/helpers/scroll.js

@@ -1,6 +1,5 @@
-import { BROWSER } from 'esm-env';
 export function disabledScroll(state) {
-    if (BROWSER) {
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
         document.body.style.overflow = state ? 'hidden' : '';
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.2.5",
+	"version": "0.2.7",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"