@hkdigital/lib-sveltekit 0.1.14 → 0.1.16

package/dist/components/buttons/button-icon-steeze/SteezeIconButton.svelte

@@ -6,8 +6,8 @@
   /**
    * @type {{
    *   src: import('../../icons/typedef.js').IconSource,
-   *   size?: string,
-   *   subset?: string,
+   *   iconSize?: string,
+   *   theme?: string,
    *   [key: string]: any
    * }}
    */
@@ -15,7 +15,7 @@
     // Icon
     src,
     iconSize,
-    subset,
+    theme,
 
     // Snippets
     children,
@@ -26,5 +26,5 @@
 </script>
 
 <Button type="icon-steeze" {...attrs}>
-  <SteezeIcon {src} size={iconSize} {subset} />
+  <SteezeIcon {src} size={iconSize} {theme} />
 </Button>

package/dist/components/buttons/button-icon-steeze/SteezeIconButton.svelte.d.ts

@@ -4,13 +4,13 @@ type SteezeIconButton = {
     $set?(props: Partial<{
         [key: string]: any;
         src: IconSource;
-        size?: string;
-        subset?: string;
+        iconSize?: string;
+        theme?: string;
     }>): void;
 };
 declare const SteezeIconButton: import("svelte").Component<{
     [key: string]: any;
     src: import("../../icons/typedef.js").IconSource;
-    size?: string;
-    subset?: string;
+    iconSize?: string;
+    theme?: string;
 }, {}, "">;

package/dist/components/icons/SteezeIcon.svelte

@@ -20,12 +20,12 @@
    * ----------
    * src - icon component
    * size - width and height of the icon as percentage (..%) or in pixels
-   * subset - name of the icon subset (e.g. 'solid' or 'outline')
+   * theme - name of the icon theme (e.g. 'solid' or 'outline')
    *
    * @type {{
    *   src: import('./typedef.js').IconSource,
    *   size?: string,
-   *   subset?: string,
+   *   theme?: string,
    *   base?: string,
    *   classes?: string
    * } & { [attr: string]: any }}
@@ -40,7 +40,7 @@
 
     // Functional
     src,
-    subset = 'default', // icon subset 'default'|'solid'|'outline'...
+    theme = 'default', // icon theme 'default'|'solid'|'outline'...
 
     // States
     // ...
@@ -53,7 +53,7 @@
   let icon = $state();
 
   $effect(() => {
-    icon = src?.[subset] ?? src?.['default'] ?? Object.values(src)?.[0];
+    icon = src?.[theme] ?? src?.['default'] ?? Object.values(src)?.[0];
   });
 
   // if (size !== '100%') {

package/dist/components/icons/SteezeIcon.svelte.d.ts

@@ -4,7 +4,7 @@ type SteezeIcon = {
     $set?(props: Partial<{
         src: IconSource;
         size?: string;
-        subset?: string;
+        theme?: string;
         base?: string;
         classes?: string;
     } & {
@@ -14,7 +14,7 @@ type SteezeIcon = {
 declare const SteezeIcon: import("svelte").Component<{
     src: import("./typedef.js").IconSource;
     size?: string;
-    subset?: string;
+    theme?: string;
     base?: string;
     classes?: string;
 } & {

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.14",
+	"version": "0.1.16",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"

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;
-    }
-  }
-}