@hkdigital/lib-sveltekit 0.1.15 → 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/dist/components/panels/index.d.ts

@@ -1 +1 @@
-export { default as PlainPanel } from "./plain-panel/PlainPanel.svelte";
+export { default as Panel } from "./panel/Panel.svelte";

package/dist/components/panels/index.js

@@ -1 +1 @@
-export { default as PlainPanel } from './plain-panel/PlainPanel.svelte';
+export { default as Panel } from './panel/Panel.svelte';

package/dist/components/panels/{plain-panel/PlainPanel.svelte → panel/Panel.svelte}

@@ -9,8 +9,9 @@
    * @type {{
    *   base?: string,
    *   bg?: string,
-   *   width?: string,
-   *   classes?: string
+   *   classes?: string,
+   *   width?: 'sm' | 'md' | 'lg',
+   *   variant?: string,
    *   children?: import('svelte').Snippet,
    * } & { [attr: string]: any }}
    */
@@ -18,9 +19,12 @@
     // Style
     base,
     bg,
-    width,
     classes,
 
+    width = 'md',
+    variant = 'light',
+
+    // Snippets
     children,
 
     // Attributes
@@ -28,6 +32,12 @@
   } = $props();
 </script>
 
-<div data-panel="plain-panel" class="{base} {bg} {width} {classes}" {...attrs}>
+<div
+  data-component="panel"
+  data-width={width}
+  data-variant={variant}
+  class="{base} {bg} {classes}"
+  {...attrs}
+>
   {@render children()}
 </div>

package/dist/components/panels/{plain-panel/PlainPanel.svelte.d.ts → panel/Panel.svelte.d.ts}

@@ -1,21 +1,23 @@
-export default PlainPanel;
-type PlainPanel = {
+export default Panel;
+type Panel = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
         base?: string;
         bg?: string;
-        width?: string;
         classes?: string;
+        width?: "sm" | "md" | "lg";
+        variant?: string;
         children?: Snippet<[]>;
     } & {
         [attr: string]: any;
     }>): void;
 };
-declare const PlainPanel: import("svelte").Component<{
+declare const Panel: import("svelte").Component<{
     base?: string;
     bg?: string;
-    width?: string;
     classes?: string;
+    width?: "sm" | "md" | "lg";
+    variant?: string;
     children?: import("svelte").Snippet;
 } & {
     [attr: string]: any;

package/dist/design/design-config.js

@@ -40,19 +40,19 @@ export const TEXT_HEADING_SIZES = {
 };
 
 export const TEXT_UI_SIZES = {
-  sm: { size: 14, lineHeight: 1.1 },
-  md: { size: 16, lineHeight: 1.1 },
-  lg: { size: 18, lineHeight: 1.1 }
+  sm: { size: 14, lineHeight: 1 },
+  md: { size: 16, lineHeight: 1 },
+  lg: { size: 18, lineHeight: 1 }
 };
 
 /* == Border radius == */
 
 export const RADIUS_SIZES = {
   none: '0px',
-  xs: { size: 1 },
-  sm: { size: 2 },
-  md: { size: 4 },
-  lg: { size: 8 },
+  xs: { size: 5 },
+  sm: { size: 10 },
+  md: { size: 25 },
+  lg: { size: 35 },
   full: '9999px'
 };
 

package/dist/themes/hkdev/components/buttons/button.css

@@ -1,10 +1,10 @@
 @define-mixin component-button {
-  [data-component="button"] {
+  [data-component='button'] {
     /* ---- Core Button Variables ---- */
 
     /* Size variables */
-    --btn-min-width: calc( 150px * var(--scale-ui) );
-    --btn-min-height: calc( 40px * var(--scale-ui) );
+    --btn-min-width: calc(150px * var(--scale-ui));
+    --btn-min-height: calc(40px * var(--scale-ui));
 
     /* ---- Primary Button Variables ---- */
     --btn-primary-bg: var(--color-primary-500);
@@ -48,7 +48,8 @@
     align-items: center;
     cursor: pointer;
     position: relative;
-    transition-property: background-color, color, border-color, transform, box-shadow;
+    transition-property:
+      background-color, color, border-color, transform, box-shadow;
     transition-duration: var(--btn-transition-duration);
   }
 
@@ -66,7 +67,7 @@
   }*/
 
   /* Role-based styling for primary buttons */
-  [data-component="button"][data-role="primary"] {
+  [data-component='button'][data-role='primary'] {
     @apply border-width-normal;
     border-color: rgb(var(--btn-primary-border));
     background-color: rgb(var(--btn-primary-bg));
@@ -90,7 +91,7 @@
   }
 
   /* Role-based styling for secondary buttons */
-  [data-component="button"][data-role="secondary"] {
+  [data-component='button'][data-role='secondary'] {
     @apply border-width-normal;
     border-color: rgb(var(--btn-secondary-border));
     color: rgb(var(--btn-secondary-text));
@@ -113,23 +114,27 @@
     }
   }
 
-  /* State-based styling */
-  [data-component="button"].state-active {
-    transform: var(--btn-active-transform);
-    box-shadow: var(--btn-active-shadow);
-  }
+  /* State-based styling for primary and secondary buttons */
 
-  [data-component="button"].state-error {
-    border-color: rgb(var(--btn-error-border));
-  }
+  [data-component='button'][data-role='primary'],
+  [data-component='button'][data-role='secondary'] {
+    &.state-active {
+      transform: var(--btn-active-transform);
+      box-shadow: var(--btn-active-shadow);
+    }
 
-  [data-component="button"].state-loading {
-    opacity: var(--btn-loading-opacity);
-    cursor: wait;
+    &.state-error {
+      border-color: rgb(var(--btn-error-border));
+    }
+
+    &.state-loading {
+      opacity: var(--btn-loading-opacity);
+      cursor: wait;
+    }
   }
 
   /* Disabled state */
-  [data-component="button"]:disabled {
+  [data-component='button']:disabled {
     cursor: not-allowed;
     opacity: var(--btn-disabled-opacity);
     pointer-events: none;

package/dist/themes/hkdev/components/panels/panel.css

@@ -0,0 +1,27 @@
+@define-mixin component-panel {
+  [data-component='panel'] {
+    @apply py-30up px-40up;
+    @apply rounded-md;
+
+    &[data-variant='light'] {
+      @apply bg-surface-50;
+    }
+
+    &[data-variant='dark'] {
+      @apply bg-surface-950;
+    }
+
+    /* Size variants */
+    &[data-width='sm'] {
+      width: calc(400px * var(--scale-ui));
+    }
+
+    &[data-width='md'] {
+      width: calc(600px * var(--scale-ui));
+    }
+
+    &[data-width='lg'] {
+      width: calc(800px * var(--scale-ui));
+    }
+  }
+}

package/dist/themes/hkdev/components.css

@@ -1,8 +1,5 @@
 /* Import component styles */
 
-/* Panels */
-/*@import "./components/panels/plain-panel.css";*/
-
 /* Rows */
 /*@import "./components/rows/panel-grid-row.css";*/
 /*@import "./components/rows/panel-row-2.css";*/
@@ -17,24 +14,18 @@
 /* Icons */
 @import './components/icons/icon-steeze.css';
 
+/* Panels */
+@import './components/panels/panel.css';
+
 /* Inputs */
 @import './components/inputs/text-input.css';
 
 /* ... */
-/*@import "./components/select-level.css";*/
 @import './components/blocks/text-block.css';
 
-/* Not used */
-/*@import "./components/hk-tab-icon.css";*/
-/*@import "./components/avatar-layer.css";*/
-
 /* Wrap component styles in theme selector */
 
 [data-theme='hkdev'] {
-  /* Panels */
-  /*  @mixin panels-plain-panel;*/
-  /*  @mixin panels-speech-bubble;*/
-
   /* Rows */
   /*  @mixin rows-panel-grid-row;*/
   /*  @mixin rows-panel-row-2;*/
@@ -47,13 +38,10 @@
 
   @mixin component-icon-steeze;
 
+  @mixin component-panel;
+
   @mixin text_block;
 
   /* Inputs */
   @mixin inputs-text-input;
-
-  /* ... */
-  /*  @mixin hk_tab_icon;*/
-  /*  @mixin avatar_layer;*/
-  /*  @mixin select_level;*/
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.15",
+	"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>

package/dist/themes/hkdev/components/panels/plain-panel.css

@@ -1,44 +0,0 @@
-/*@import "../../global/on-colors.css";*/
-
-@define-mixin panels-plain-panel {
-  [data-panel='plain-panel'] {
-    @mixin on_surface_light;
-    @apply bg-primary-50;
-
-    @apply p-40p rounded-md;
-
-    max-width: 50vw;
-    /*    max-width: 27vw;*/
-    /* width: 26vw; */
-
-    & picture {
-      display: block;
-      max-width: 100%;
-      @apply pr-80p;
-      /* border: solid 1px red; */
-    }
-
-    & > .h1 {
-      @apply text-32p mb-20p;
-    }
-
-    & > .p {
-      @apply text-24p mb-10p;
-
-      & + picture {
-        @apply mt-40p;
-      }
-    }
-
-    & button {
-      /* @apply min-w-180p; */
-    }
-
-    & .cc_cols-stretch {
-      @apply grid auto-cols-fr grid-flow-col;
-      @apply justify-stretch;
-
-      border: solid 8px red;
-    }
-  }
-}

package/dist/themes/hkdev/components/panels/speech-bubble.css

@@ -1,46 +0,0 @@
-@import '../../global/on-colors.css';
-
-@define-mixin panels-speech-bubble {
-  [data-panel='speech-bubble'] {
-    @mixin on_surface_light;
-    @apply bg-primary-50;
-
-    @apply pt-20p pb-20p pr-40p pl-40p rounded-tl-lg rounded-tr-lg rounded-bl-lg;
-
-    /* max-width: 26vw;*/
-    /* width: 26vw; */
-
-    &.small {
-      max-width: 16vw;
-    }
-
-    & picture {
-      display: block;
-      max-width: 100%;
-      @apply pr-80p;
-      /* border: solid 1px red; */
-    }
-
-    & [data-section='title'] {
-      & .h1 {
-        @apply text-32p pt-8p pb-8p;
-      }
-    }
-
-    & [data-section='text'] {
-      & .p {
-        @apply text-20p pb-10p;
-
-        /*& + picture {
-          @apply mt-40p;
-        }*/
-      }
-    }
-
-    /* Footer */
-
-    & [data-row][data-section='footer'] {
-      @apply pt-10p;
-    }
-  }
-}