@hkdigital/lib-core 0.5.88 → 0.5.91

package/dist/ui/CHANGES-COMPONENT-PROPS.md

@@ -0,0 +1,121 @@
+# UI Component Changes
+
+## Property Name Changes (2026-01)
+
+### Background
+Skeleton.dev has updated their component API standards, and we follow
+skeleton standards for consistency across the ecosystem.
+
+### Changes
+
+#### `classes` → `class`
+All UI components now accept `class` instead of `classes` for CSS
+class names.
+
+#### `base` → removed
+The `base` property has been deprecated. Use `class` instead.
+
+#### `bg` → removed
+The `bg` property has been deprecated. Use `class` instead.
+
+### Migration Guide
+
+**Before:**
+```svelte
+<SteezeIcon
+  base="icon-base"
+  classes="text-primary-500"
+  src={icon}
+/>
+
+<GameBox
+  base="box-base"
+  bg="bg-surface-100"
+  classes="rounded-md"
+/>
+```
+
+**After:**
+```svelte
+<SteezeIcon
+  class="icon-base text-primary-500"
+  src={icon}
+/>
+
+<GameBox
+  class="box-base bg-surface-100 rounded-md"
+/>
+```
+
+### Implementation Pattern
+
+All components follow this exact pattern for backward compatibility:
+
+**JSDoc Type:**
+```javascript
+/**
+ * @type {{
+ *   class?: string,
+ *   base?: string,  // Deprecated: use 'class' instead
+ *   bg?: string,  // Deprecated: use 'class' instead (if applicable)
+ *   classes?: string,  // Deprecated: use 'class' instead
+ *   // ... other props
+ * }}
+ */
+```
+
+**Props Destructuring:**
+```javascript
+const {
+  class: className,
+  base,  // Deprecated: kept for backward compatibility
+  bg,  // Deprecated: kept for backward compatibility (if applicable)
+  classes,  // Deprecated: kept for backward compatibility
+  // ... other props
+} = $props();
+```
+
+**Class Attribute Usage:**
+```svelte
+<!-- With bg prop -->
+<div class="{base ?? ''} {bg ?? ''} {className ?? classes ?? ''}"></div>
+
+<!-- Without bg prop -->
+<div class="{base ?? ''} {className ?? classes ?? ''}"></div>
+```
+
+**Priority Order:**
+1. `base` - applied first if provided
+2. `bg` - applied second if provided and component supports it
+3. `className` - from new `class` prop, applied if `classes` not provided
+4. `classes` - deprecated fallback, applied if `className` not provided
+
+### Backward Compatibility
+
+During the transition period, components accept both old and new
+property names:
+
+- `class` - new standard (recommended)
+- `classes` - deprecated, still works
+- `base` - deprecated, still works
+- `bg` - deprecated, still works (GameBox only)
+
+All properties will be merged if provided together, allowing gradual
+migration without breaking existing code.
+
+### Timeline
+
+- **Now**: Both old and new properties supported
+- **Future**: `base`, `bg`, and `classes` will be removed in a future
+  major version
+
+### Affected Components
+
+- `SteezeIcon.svelte`
+- `GameBox.svelte`
+- `ImageBox.svelte`
+- `Presenter.svelte`
+- `GridLayers.svelte`
+- `Panel.svelte`
+- `Button.svelte`
+- More components will be updated following this pattern

package/dist/ui/components/game-box/GameBox.svelte

@@ -26,9 +26,10 @@
 
   /**
    * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
+   *   class?: string,
+   *   base?: string,  // Deprecated: use 'class' instead
+   *   bg?: string,  // Deprecated: use 'class' instead
+   *   classes?: string,  // Deprecated: use 'class' instead
    *   style?: string,
    *   aspectOnLandscape?: number,
    *   aspectOnPortrait?: number,
@@ -57,9 +58,10 @@
    */
   const {
     // > Style
-    base = '',
-    bg = '',
-    classes = '',
+    class: className,
+    base,  // Deprecated: kept for backward compatibility
+    bg,  // Deprecated: kept for backward compatibility
+    classes,  // Deprecated: kept for backward compatibility
     style = '',
 
     // > Functional properties
@@ -468,8 +470,9 @@
     <div
       data-component="game-box"
       data-orientation={isLandscape ? 'landscape' : 'portrait'}
-      class="{base} {bg} {classes}"
+      class="{base ?? ''} {bg ?? ''} {className ?? classes ?? ''}"
       class:isMobile
+      style:position="relative"
       style:width="{gameWidth}px"
       style:height="{gameHeight}px"
       style:--game-width={gameWidth}

package/dist/ui/components/game-box/GameBox.svelte.d.ts

@@ -3,6 +3,7 @@ type GameBox = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
         [attr: string]: any;
+        class?: string | undefined;
         base?: string | undefined;
         bg?: string | undefined;
         classes?: string | undefined;
@@ -51,6 +52,7 @@ type GameBox = {
 };
 declare const GameBox: import("svelte").Component<{
     [attr: string]: any;
+    class?: string;
     base?: string;
     bg?: string;
     classes?: string;

package/dist/ui/components/game-box/ScaledContainer.svelte

@@ -1,6 +1,12 @@
 <script>
+  // import { onMount } from 'svelte';
+
   import { enableContainerScaling } from '../../../design/index.js';
 
+  // onMount( () => {
+  //   console.debug('[ScaledContainer] mounted');
+  // } );
+
   /**
    * Wrapper component that applies container scaling to its children
    *
@@ -41,13 +47,13 @@
       !width ||
       !height ||
       !design ||
-      !clamping ||
-      hidden
+      !clamping
+      // || hidden
     ) {
       return;
     }
 
-    // console.debug(`Enable scaling [${width},${height}]`);
+    console.debug(`Enable scaling [${width},${height}]`);
 
     return enableContainerScaling({
       container,
@@ -62,16 +68,17 @@
   <div
     data-component="scaled-container"
     bind:this={container}
-    class:hidden
+    style:position="absolute"
+    style:top="0"
+    style:left="0"
     style:width="{width}px"
     style:height="{height}px"
+    style:visibility={hidden ? "hidden" : "visible"}
   >
     {@render snippet(snippetParams)}
   </div>
 {/if}
 
 <style>
-  .hidden {
-    visibility: hidden;
-  }
+  /* Positioning and visibility handled via inline styles */
 </style>

package/dist/ui/components/grid-layers/GridLayers.svelte

@@ -6,11 +6,12 @@
    * enabling layered layouts with natural height behavior.
    *
    * @type {{
-   *   base?: string,
-   *   bg?: string,
+   *   class?: string,
+   *   base?: string,  // Deprecated: use 'class' instead
+   *   bg?: string,  // Deprecated: use 'class' instead
    *   padding?: string,
    *   margin?: string,
-   *   classes?: string,
+   *   classes?: string,  // Deprecated: use 'class' instead
    *   style?: string,
    *   overflow?: string,
    *   children: import('svelte').Snippet,
@@ -19,11 +20,12 @@
    */
   const {
     // Container styles
-    base = '',
-    bg = '',
+    class: className,
+    base,  // Deprecated: kept for backward compatibility
+    bg,  // Deprecated: kept for backward compatibility
     padding = '',
     margin = '',
-    classes = '',
+    classes,  // Deprecated: kept for backward compatibility
     style = '',
     overflow = '',
 
@@ -48,7 +50,7 @@
 
 <div
   data-component="grid-layers"
-  class="grid {base} {bg} {classes} {margin} {padding} {overflow}"
+  class="grid {base ?? ''} {bg ?? ''} {className ?? classes ?? ''} {margin} {padding} {overflow}"
   style={containerStyle}
   {...attrs}
 >

package/dist/ui/components/grid-layers/GridLayers.svelte.d.ts

@@ -3,6 +3,7 @@ type GridLayers = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
         [attr: string]: any;
+        class?: string | undefined;
         base?: string | undefined;
         bg?: string | undefined;
         padding?: string | undefined;
@@ -15,6 +16,7 @@ type GridLayers = {
 };
 declare const GridLayers: import("svelte").Component<{
     [attr: string]: any;
+    class?: string;
     base?: string;
     bg?: string;
     padding?: string;

package/dist/ui/components/image-box/ImageBox.svelte

@@ -4,9 +4,10 @@
 
 	/**
 	 * @type {{
-	 *   base?: string,
-	 *   bg?: string,
-	 *   classes?: string,
+	 *   class?: string,
+	 *   base?: string,  // Deprecated: use 'class' instead
+	 *   bg?: string,  // Deprecated: use 'class' instead
+	 *   classes?: string,  // Deprecated: use 'class' instead
 	 *   width?: string,
 	 *   height?: string,
 	 *   aspect?: string,
@@ -23,9 +24,10 @@
 	 */
 	let {
 		// Style
-		base,
-		bg,
-		classes,
+		class: className,
+		base,  // Deprecated: kept for backward compatibility
+		bg,  // Deprecated: kept for backward compatibility
+		classes,  // Deprecated: kept for backward compatibility
 		width,
 		height,
 		aspect,
@@ -172,7 +174,7 @@
 <div
 	data-component="image-box"
 	bind:this={containerElem}
-	class="{base} {bg} {aspect} {overflow} {width} {height} {classes}"
+	class="{base ?? ''} {bg ?? ''} {aspect} {overflow} {width} {height} {className ?? classes ?? ''}"
 	style:--fit={fit}
 	style:--pos={position}
 	style:width={width || (height && aspect) ? undefined : '100%'}

package/dist/ui/components/image-box/ImageBox.svelte.d.ts

@@ -3,6 +3,7 @@ type ImageBox = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
         [attr: string]: any;
+        class?: string | undefined;
         base?: string | undefined;
         bg?: string | undefined;
         classes?: string | undefined;
@@ -21,6 +22,7 @@ type ImageBox = {
 };
 declare const ImageBox: import("svelte").Component<{
     [attr: string]: any;
+    class?: string;
     base?: string;
     bg?: string;
     classes?: string;

package/dist/ui/components/presenter/Presenter.svelte

@@ -16,7 +16,8 @@
 
   /**
    * @type {{
-   *   classes?: string,
+   *   class?: string,
+   *   classes?: string,  // Deprecated: use 'class' instead
    *   slides?: import("./typedef.js").Slide[],
    *   presenterRef?: import('./Presenter.state.svelte.js').PresenterRef,
    *   layoutSnippet: import('svelte').Snippet<[Slide|null, Layer]>,
@@ -25,7 +26,8 @@
    */
   let {
     // > Style
-    classes,
+    class: className,
+    classes,  // Deprecated: kept for backward compatibility
 
     // > Functional
     slides,
@@ -109,7 +111,7 @@
   });
 </script>
 
-<GridLayers data-feature="presenter" {classes}>
+<GridLayers data-feature="presenter" class={className ?? classes ?? ''}>
   <div
     data-layer="layer1"
     style:z-index={presenter.layerA.z}

package/dist/ui/components/presenter/Presenter.svelte.d.ts

@@ -2,6 +2,7 @@ export default Presenter;
 type Presenter = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
+        class?: string | undefined;
         classes?: string | undefined;
         slides?: Slide[] | undefined;
         presenterRef?: PresenterRef | undefined;
@@ -10,6 +11,7 @@ type Presenter = {
     }>): void;
 };
 declare const Presenter: import("svelte").Component<{
+    class?: string;
     classes?: string;
     slides?: import("./typedef.js").Slide[];
     presenterRef?: import("./Presenter.state.svelte.js").PresenterRef;

package/dist/ui/primitives/buttons/button/Button.svelte

@@ -3,9 +3,10 @@
 
   /**
    * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
+   *   class?: string,
+   *   base?: string,  // Deprecated: use 'class' instead
+   *   bg?: string,  // Deprecated: use 'class' instead
+   *   classes?: string,  // Deprecated: use 'class' instead
    *   type?: string,
    *   role?: 'primary' | 'secondary' | 'tertiary' | 'custom',
    *   size?: 'sm' | 'md' | 'lg',
@@ -25,9 +26,10 @@
    */
   const {
     // Style
-    base,
-    bg,
-    classes,
+    class: className,
+    base,  // Deprecated: kept for backward compatibility
+    bg,  // Deprecated: kept for backward compatibility
+    classes,  // Deprecated: kept for backward compatibility
 
     type = '',
     role = 'primary',
@@ -66,7 +68,7 @@
   data-variant={variant}
   data-mode={mode}
   type={buttonType}
-  class="{base} {bg} {classes} {stateClasses}"
+  class="{base ?? ''} {bg ?? ''} {className ?? classes ?? ''} {stateClasses}"
   disabled={disabled || loading}
   aria-busy={loading}
   aria-pressed={selected}

package/dist/ui/primitives/buttons/button/Button.svelte.d.ts

@@ -3,6 +3,7 @@ type Button = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
         [key: string]: any;
+        class?: string | undefined;
         base?: string | undefined;
         bg?: string | undefined;
         classes?: string | undefined;
@@ -24,6 +25,7 @@ type Button = {
 };
 declare const Button: import("svelte").Component<{
     [key: string]: any;
+    class?: string;
     base?: string;
     bg?: string;
     classes?: string;

package/dist/ui/primitives/icons/SteezeIcon.svelte

@@ -23,8 +23,9 @@
    * theme - name of the icon theme (e.g. 'solid' or 'outline')
    *
    * @type {{
-   *   base?: string,
-   *   classes?: string
+   *   class?: string,
+   *   base?: string,  // Deprecated: use 'class' instead
+   *   classes?: string,  // Deprecated: use 'class' instead
    *   size?: string,
    *   variant?: string,
    *   src: import('./typedef.js').IconSource,
@@ -33,8 +34,9 @@
    */
   let {
     // Style
-    base,
-    classes,
+    class: className,
+    base,  // Deprecated: kept for backward compatibility
+    classes,  // Deprecated: kept for backward compatibility
 
     size = 'md',
     variant = '',
@@ -72,7 +74,7 @@
     data-variant={variant}
     {...icon.a}
     xmlns="http://www.w3.org/2000/svg"
-    class="{base} {classes}"
+    class="{base ?? ''} {className ?? classes ?? ''}"
     {...attrs}
   >
     {#each icon.path ?? [] as a}

package/dist/ui/primitives/icons/SteezeIcon.svelte.d.ts

@@ -2,6 +2,7 @@ export default SteezeIcon;
 type SteezeIcon = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
+        class?: string | undefined;
         base?: string | undefined;
         classes?: string | undefined;
         size?: string | undefined;
@@ -13,6 +14,7 @@ type SteezeIcon = {
     }>): void;
 };
 declare const SteezeIcon: import("svelte").Component<{
+    class?: string;
     base?: string;
     classes?: string;
     size?: string;

package/dist/ui/primitives/panels/panel/Panel.svelte

@@ -7,9 +7,10 @@
 
   /**
    * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
+   *   class?: string,
+   *   base?: string,  // Deprecated: use 'class' instead
+   *   bg?: string,  // Deprecated: use 'class' instead
+   *   classes?: string,  // Deprecated: use 'class' instead
    *   width?: 'sm' | 'md' | 'lg',
    *   variant?: string,
    *   children?: import('svelte').Snippet,
@@ -17,9 +18,10 @@
    */
   const {
     // Style
-    base,
-    bg,
-    classes,
+    class: className,
+    base,  // Deprecated: kept for backward compatibility
+    bg,  // Deprecated: kept for backward compatibility
+    classes,  // Deprecated: kept for backward compatibility
 
     width = 'md',
     variant = 'light',
@@ -36,7 +38,7 @@
   data-component="panel"
   data-width={width}
   data-variant={variant}
-  class="{base} {bg} {classes}"
+  class="{base ?? ''} {bg ?? ''} {className ?? classes ?? ''}"
   {...attrs}
 >
   {@render children()}

package/dist/ui/primitives/panels/panel/Panel.svelte.d.ts

@@ -2,6 +2,7 @@ export default Panel;
 type Panel = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
+        class?: string | undefined;
         base?: string | undefined;
         bg?: string | undefined;
         classes?: string | undefined;
@@ -13,6 +14,7 @@ type Panel = {
     }>): void;
 };
 declare const Panel: import("svelte").Component<{
+    class?: string;
     base?: string;
     bg?: string;
     classes?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-core",
-	"version": "0.5.88",
+	"version": "0.5.91",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"

package/dist/state/classes/subscribers-count/index.d.ts

@@ -1 +0,0 @@
-export { default as SubScribersCount } from "./SubscribersCount.js";

package/dist/state/classes/subscribers-count/index.js

@@ -1 +0,0 @@
-export { default as SubScribersCount } from './SubscribersCount.js';