lapikit 0.2.4 → 0.2.6

package/dist/components/app/app.svelte

@@ -4,6 +4,8 @@
 	import { useTheme } from '../../actions/use-theme.js';
 	import { modalOpen, setOpenModal } from '../../stores/components.js';
 
+	import { viewport } from '../../stores/viewport.js';
+
 	let {
 		children,
 		themes,
@@ -29,6 +31,21 @@
 				useTheme(colorScheme);
 			}
 		}
+
+		// Met à jour le store viewport à l'init et sur resize
+		function updateViewport() {
+			viewport.set({
+				innerWidth: window.innerWidth,
+				outerWidth: window.outerWidth,
+				innerHeight: window.innerHeight,
+				outerHeight: window.outerHeight
+			});
+		}
+		updateViewport();
+		window.addEventListener('resize', updateViewport);
+		return () => {
+			window.removeEventListener('resize', updateViewport);
+		};
 	});
 </script>
 

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

@@ -9,11 +9,26 @@
 	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/components/toolbar/toolbar.css

@@ -11,9 +11,6 @@
 }
 
 /* density */
-.kit-toolbar[breakpoint]kit-toolbar--density-default {
-	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(--system-spacing) * 1.5);
@@ -24,10 +21,6 @@
 	padding: calc(var(--system-spacing) * 1.5) 0;
 }
 
-.kit-toolbar[breakpoint]kit-toolbar--density-compact {
-	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(--system-spacing) * 0.75);
@@ -38,10 +31,6 @@
 	padding: calc(var(--system-spacing) * 0.75) 0;
 }
 
-.kit-toolbar[breakpoint]kit-toolbar--density-comfortable {
-	border-radius: calc(var(--system-spacing) * 3.5);
-}
-
 .kit-toolbar[breakpoint]kit-toolbar--density-comfortable:not(
 		[class*='toolbar--orientation-vertical']
 	) {

package/dist/stores/index.d.ts

@@ -2,3 +2,4 @@ export * from './breakpoints.js';
 export * from './devices.js';
 export * from './themes.js';
 export * from './components.js';
+export * from './viewport.js';

package/dist/stores/index.js

@@ -2,3 +2,4 @@ export * from './breakpoints.js';
 export * from './devices.js';
 export * from './themes.js';
 export * from './components.js';
+export * from './viewport.js';

package/dist/stores/viewport.d.ts

@@ -0,0 +1,7 @@
+export type Viewport = {
+    innerWidth: number;
+    outerWidth: number;
+    innerHeight: number;
+    outerHeight: number;
+};
+export declare const viewport: import("svelte/store").Writable<Viewport>;

package/dist/stores/viewport.js

@@ -0,0 +1,7 @@
+import { writable } from 'svelte/store';
+export const viewport = writable({
+    innerWidth: 0,
+    outerWidth: 0,
+    innerHeight: 0,
+    outerHeight: 0
+});

package/package.json

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