@hkdigital/lib-sveltekit 0.1.16 → 0.1.17

package/dist/components/buttons/button/Button.svelte

@@ -7,7 +7,7 @@
    *   bg?: string,
    *   classes?: string,
    *   type?: string,
-   *   role?: 'primary' | 'secondary',
+   *   role?: 'primary' | 'secondary' | 'tertiary' | 'custom',
    *   size?: 'sm' | 'md' | 'lg',
    *   variant?: string,
    *   active?: boolean,

package/dist/components/buttons/button/Button.svelte.d.ts

@@ -7,7 +7,7 @@ type Button = {
         bg?: string;
         classes?: string;
         type?: string;
-        role?: "primary" | "secondary";
+        role?: "custom" | "primary" | "secondary" | "tertiary";
         size?: "sm" | "md" | "lg";
         variant?: string;
         active?: boolean;
@@ -26,7 +26,7 @@ declare const Button: import("svelte").Component<{
     bg?: string;
     classes?: string;
     type?: string;
-    role?: "primary" | "secondary";
+    role?: "primary" | "secondary" | "tertiary" | "custom";
     size?: "sm" | "md" | "lg";
     variant?: string;
     active?: boolean;

package/dist/components/layout/GridLayersLayout.svelte

@@ -0,0 +1,89 @@
+<script>
+	/**
+	 * Grid Layers component
+	 * This is a grid with only one cell. All direct children are
+	 * place in the same cell and form a visually stacked component.
+	 *
+	 * This can be used to place e.g. texts over an image. Place the
+	 * image in a layer and the text in another. The standard grid
+	 * content placement options can be used.
+	 *
+	 * Following component guidelines from Skeleton
+	 * @see https://next.skeleton.dev/docs/resources/contribute/components
+	 */
+
+	/**
+	 * @type {{
+	 *   base?: string,
+	 *   bg?: string,
+	 *   padding?: string,
+	 *   margin?: string,
+	 *   height?: string,
+	 *   classes?: string,
+	 *   style?: string,
+	 *   cellBase?: string,
+	 *   cellBg?: string,
+	 *   cellPadding?: string,
+	 *   cellMargin?: string,
+	 *   cellClasses?: string,
+	 *   cellStyle?: string,
+	 *   children: import('svelte').Snippet,
+	 *   cellAttrs?: { [attr: string]: * },
+	 *   [attr: string]: any
+	 * }}
+	 */
+	const {
+		// Style
+		base,
+		bg,
+		padding,
+		margin,
+		height,
+		classes,
+		style,
+		cellBase,
+		cellBg,
+		cellPadding,
+		cellMargin,
+		cellClasses,
+		cellStyle,
+
+		cellAttrs,
+
+		// Snippets
+		children,
+
+		// Attributes
+		...attrs
+	} = $props();
+</script>
+
+<div
+	data-component="grid-layers"
+	class="relative {base} {bg} {height} {classes} {margin} {padding}"
+	{style}
+	{...attrs}
+>
+	<div
+		data-section="layer"
+		class="absolute inset-0 grid {cellBase} {cellBg} {cellPadding} {cellMargin} {cellClasses}"
+		style={cellStyle}
+	>
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	/* All children of the layer share the same grid area
+	   but aren't absolutely positioned */
+	[data-section='layer'] {
+		grid-template-columns: 1fr;
+		grid-template-rows: 1fr;
+	}
+
+	[data-section='layer'] > :global(*) {
+		grid-column: 1;
+		grid-row: 1;
+		z-index: 0; /* Base z-index to allow explicit stacking order */
+	}
+</style>

package/dist/components/layout/{HkGridLayers.svelte.d.ts → GridLayersLayout.svelte.d.ts}

@@ -1,7 +1,8 @@
-export default HkGridLayers;
-type HkGridLayers = {
+export default GridLayersLayout;
+type GridLayersLayout = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
+        [attr: string]: any;
         base?: string;
         bg?: string;
         padding?: string;
@@ -9,20 +10,20 @@ type HkGridLayers = {
         height?: string;
         classes?: string;
         style?: string;
-        boxBase?: string;
-        boxBg?: string;
-        boxPadding?: string;
-        boxMargin?: string;
-        boxClasses?: string;
-        boxAttrs?: {
+        cellBase?: string;
+        cellBg?: string;
+        cellPadding?: string;
+        cellMargin?: string;
+        cellClasses?: string;
+        cellStyle?: string;
+        children: Snippet<[]>;
+        cellAttrs?: {
             [attr: string]: any;
         };
-        children: Snippet<[]>;
-    } & {
-        [attr: string]: any;
     }>): void;
 };
-declare const HkGridLayers: import("svelte").Component<{
+declare const GridLayersLayout: import("svelte").Component<{
+    [attr: string]: any;
     base?: string;
     bg?: string;
     padding?: string;
@@ -30,15 +31,14 @@ declare const HkGridLayers: import("svelte").Component<{
     height?: string;
     classes?: string;
     style?: string;
-    boxBase?: string;
-    boxBg?: string;
-    boxPadding?: string;
-    boxMargin?: string;
-    boxClasses?: string;
-    boxAttrs?: {
+    cellBase?: string;
+    cellBg?: string;
+    cellPadding?: string;
+    cellMargin?: string;
+    cellClasses?: string;
+    cellStyle?: string;
+    children: import("svelte").Snippet;
+    cellAttrs?: {
         [attr: string]: any;
     };
-    children: import("svelte").Snippet;
-} & {
-    [attr: string]: any;
 }, {}, "">;

package/dist/components/layout/index.d.ts

@@ -1,3 +1,3 @@
 export { default as HkAppLayout } from "./HkAppLayout.svelte";
-export { default as HkGridLayers } from "./HkGridLayers.svelte";
+export { default as GridLayersLayout } from "./GridLayersLayout.svelte";
 export { createOrGetState as createOrGetAppLayoutState, createState as createAppLayoutState, getState as getAppLayoutState } from "./HkAppLayout.state.svelte.js";

package/dist/components/layout/index.js

@@ -6,4 +6,4 @@ export {
 
 export { default as HkAppLayout } from './HkAppLayout.svelte';
 
-export { default as HkGridLayers } from './HkGridLayers.svelte';
+export { default as GridLayersLayout } from './GridLayersLayout.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.16",
+	"version": "0.1.17",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"

package/dist/components/layout/HkGridLayers.svelte

@@ -1,82 +0,0 @@
-<script>
-	/**
-	 * Grid Layers component
-	 * This is a grid with only one cell. All direct children are
-	 * place in the same cell and form a visually stacked component.
-	 *
-	 * This can be used to place e.g. texts over an image. Place the
-	 * image in a layer and the text in another. The standard grid
-	 * content placement options can be used.
-	 *
-	 * Following component guidelines from Skeleton
-	 * @see https://next.skeleton.dev/docs/resources/contribute/components
-	 */
-
-	/**
-	 * @type {{
-	 *   base?: string,
-	 *   bg?: string,
-	 *   padding?: string,
-	 *   margin?: string,
-	 *   height?: string,
-	 *   classes?: string,
-	 *   style?: string,
-	 *   boxBase?: string,
-	 *   boxBg?: string,
-	 *   boxPadding?: string,
-	 *   boxMargin?: string,
-	 *   boxClasses?: string,
-	 *   boxAttrs?: { [attr: string]: * },
-	 *   children: import('svelte').Snippet
-	 * } & { [attr: string]: any }}
-	 */
-	const {
-		// Style
-		base,
-		bg,
-		padding,
-		margin,
-		height = 'h-full',
-		classes,
-		style,
-		boxBase,
-		boxBg,
-		boxPadding,
-		boxMargin,
-		boxClasses,
-
-		// Snippets
-		children,
-
-		// Attributes
-		...attrs
-	} = $props();
-</script>
-
-<div
-	data-hk-grid-layers-box
-	class="{boxBase} {boxBg} {boxPadding} {boxMargin} {boxClasses}"
-	{...attrs}
->
-	<div
-		data-hk-grid-layers
-		class="grid grid-cols-1 grid-rows-1 {base} {bg} {height} {classes} {margin} {padding}"
-		{style}
-	>
-		{@render children()}
-	</div>
-</div>
-
-<style>
-	[data-hk-grid-layers] > :global(.area-above) {
-		grid-area: 1/1/2/2;
-	}
-
-	[data-hk-grid-layers] > :global(*) {
-		grid-area: 2/1/3/2;
-	}
-
-	[data-hk-grid-layers] > :global(.area-below) {
-		grid-area: 3/1/4/2;
-	}
-</style>