@hkdigital/lib-sveltekit 0.2.20 → 0.2.21

package/dist/components/inputs/text-input/TextInput.svelte___

@@ -1,83 +1,83 @@
-<script>
-	/**
-	 * @type {{
-	 *   classes?: string,
-	 *   fieldClasses?: string,
-	 *   legendClasses?: string,
-	 *   legendTitle?: string,
-	 *   error?: boolean,
-	 *   type?: string,
-	 *   placeholder: string,
-	 *   required: boolean,
-	 *   snippetWarning?: import('svelte').Snippet,
-	 * } & { [attr: string]: any }}
-	 */
-	let {
-		// Style
-		classes,
-		fieldClasses,
-		legendClasses,
-
-		// Functionality
-		name,
-		disabled,
-		required,
-
-		// initialValue
-		// value
-		// readonly
-		// pattern
-		// minlength
-		// maxlength
-
-		// Text placeholders
-		legendTitle,
-		placeholder,
-
-		type,
-		snippetWarning,
-
-		// Attributes
-		...attrs
-	} = $props();
-</script>
-
-{#snippet defaultWarning()}
-	<svg
-		width="17"
-		height="16"
-		viewBox="0 0 17 16"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
-			d="M6.36747 1.28014C7.3152 -0.426712 9.68492 -0.426712 10.6318 1.28014L16.6669 12.1596C17.6138 13.8664 16.429 16 14.5343 16H2.46497C0.570331 16 -0.613713 13.8664 0.333194 12.1596L6.36665 1.28014H6.36747ZM8.50006 5.75805C8.66328 5.75805 8.81981 5.82549 8.93522 5.94553C9.05063 6.06556 9.11547 6.22837 9.11547 6.39812V9.59846C9.11547 9.76822 9.05063 9.93102 8.93522 10.0511C8.81981 10.1711 8.66328 10.2385 8.50006 10.2385C8.33684 10.2385 8.18031 10.1711 8.0649 10.0511C7.94949 9.93102 7.88465 9.76822 7.88465 9.59846V6.39812C7.88465 6.22837 7.94949 6.06556 8.0649 5.94553C8.18031 5.82549 8.33684 5.75805 8.50006 5.75805ZM8.50006 12.7988C8.66328 12.7988 8.81981 12.7314 8.93522 12.6113C9.05063 12.4913 9.11547 12.3285 9.11547 12.1587C9.11547 11.989 9.05063 11.8262 8.93522 11.7061C8.81981 11.5861 8.66328 11.5187 8.50006 11.5187C8.33684 11.5187 8.18031 11.5861 8.0649 11.7061C7.94949 11.8262 7.88465 11.989 7.88465 12.1587C7.88465 12.3285 7.94949 12.4913 8.0649 12.6113C8.18031 12.7314 8.33684 12.7988 8.50006 12.7988Z"
-			fill="#F8705E"
-		/>
-	</svg>
-{/snippet}
-
-<fieldset
-	data-input="text-input"
-	class="flex w-full items-center rounded {fieldClasses}"
->
-	<legend class="px-2 {legendClasses}" class:error>{legendTitle}</legend>
-	<input
-		class="w-full border-none bg-transparent {classes}"
-		{type}
-		{placeholder}
-		{name}
-		{required}
-		{...attrs}
-	/>
-	{#if error}
-		{#if snippetWarning}
-			{@render snippetWarning()}
-		{:else}
-			{@render defaultWarning()}
-		{/if}
-		<!-- <img src={warningSymbol} class="mb-2 mr-8" alt="Warning" /> -->
-	{/if}
-</fieldset>
+<script>
+	/**
+	 * @type {{
+	 *   classes?: string,
+	 *   fieldClasses?: string,
+	 *   legendClasses?: string,
+	 *   legendTitle?: string,
+	 *   error?: boolean,
+	 *   type?: string,
+	 *   placeholder: string,
+	 *   required: boolean,
+	 *   snippetWarning?: import('svelte').Snippet,
+	 * } & { [attr: string]: any }}
+	 */
+	let {
+		// Style
+		classes,
+		fieldClasses,
+		legendClasses,
+
+		// Functionality
+		name,
+		disabled,
+		required,
+
+		// initialValue
+		// value
+		// readonly
+		// pattern
+		// minlength
+		// maxlength
+
+		// Text placeholders
+		legendTitle,
+		placeholder,
+
+		type,
+		snippetWarning,
+
+		// Attributes
+		...attrs
+	} = $props();
+</script>
+
+{#snippet defaultWarning()}
+	<svg
+		width="17"
+		height="16"
+		viewBox="0 0 17 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M6.36747 1.28014C7.3152 -0.426712 9.68492 -0.426712 10.6318 1.28014L16.6669 12.1596C17.6138 13.8664 16.429 16 14.5343 16H2.46497C0.570331 16 -0.613713 13.8664 0.333194 12.1596L6.36665 1.28014H6.36747ZM8.50006 5.75805C8.66328 5.75805 8.81981 5.82549 8.93522 5.94553C9.05063 6.06556 9.11547 6.22837 9.11547 6.39812V9.59846C9.11547 9.76822 9.05063 9.93102 8.93522 10.0511C8.81981 10.1711 8.66328 10.2385 8.50006 10.2385C8.33684 10.2385 8.18031 10.1711 8.0649 10.0511C7.94949 9.93102 7.88465 9.76822 7.88465 9.59846V6.39812C7.88465 6.22837 7.94949 6.06556 8.0649 5.94553C8.18031 5.82549 8.33684 5.75805 8.50006 5.75805ZM8.50006 12.7988C8.66328 12.7988 8.81981 12.7314 8.93522 12.6113C9.05063 12.4913 9.11547 12.3285 9.11547 12.1587C9.11547 11.989 9.05063 11.8262 8.93522 11.7061C8.81981 11.5861 8.66328 11.5187 8.50006 11.5187C8.33684 11.5187 8.18031 11.5861 8.0649 11.7061C7.94949 11.8262 7.88465 11.989 7.88465 12.1587C7.88465 12.3285 7.94949 12.4913 8.0649 12.6113C8.18031 12.7314 8.33684 12.7988 8.50006 12.7988Z"
+			fill="#F8705E"
+		/>
+	</svg>
+{/snippet}
+
+<fieldset
+	data-input="text-input"
+	class="flex w-full items-center rounded {fieldClasses}"
+>
+	<legend class="px-2 {legendClasses}" class:error>{legendTitle}</legend>
+	<input
+		class="w-full border-none bg-transparent {classes}"
+		{type}
+		{placeholder}
+		{name}
+		{required}
+		{...attrs}
+	/>
+	{#if error}
+		{#if snippetWarning}
+			{@render snippetWarning()}
+		{:else}
+			{@render defaultWarning()}
+		{/if}
+		<!-- <img src={warningSymbol} class="mb-2 mr-8" alt="Warning" /> -->
+	{/if}
+</fieldset>

package/dist/components/inputs/text-input/assets/IconInvalid.svelte

@@ -1,14 +1,14 @@
-<svg
-  width="17"
-  height="16"
-  viewBox="0 0 17 16"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M6.36747 1.28014C7.3152 -0.426712 9.68492 -0.426712 10.6318 1.28014L16.6669 12.1596C17.6138 13.8664 16.429 16 14.5343 16H2.46497C0.570331 16 -0.613713 13.8664 0.333194 12.1596L6.36665 1.28014H6.36747ZM8.50006 5.75805C8.66328 5.75805 8.81981 5.82549 8.93522 5.94553C9.05063 6.06556 9.11547 6.22837 9.11547 6.39812V9.59846C9.11547 9.76822 9.05063 9.93102 8.93522 10.0511C8.81981 10.1711 8.66328 10.2385 8.50006 10.2385C8.33684 10.2385 8.18031 10.1711 8.0649 10.0511C7.94949 9.93102 7.88465 9.76822 7.88465 9.59846V6.39812C7.88465 6.22837 7.94949 6.06556 8.0649 5.94553C8.18031 5.82549 8.33684 5.75805 8.50006 5.75805ZM8.50006 12.7988C8.66328 12.7988 8.81981 12.7314 8.93522 12.6113C9.05063 12.4913 9.11547 12.3285 9.11547 12.1587C9.11547 11.989 9.05063 11.8262 8.93522 11.7061C8.81981 11.5861 8.66328 11.5187 8.50006 11.5187C8.33684 11.5187 8.18031 11.5861 8.0649 11.7061C7.94949 11.8262 7.88465 11.989 7.88465 12.1587C7.88465 12.3285 7.94949 12.4913 8.0649 12.6113C8.18031 12.7314 8.33684 12.7988 8.50006 12.7988Z"
-    fill="currentColor"
-  />
-</svg>
+<svg
+  width="17"
+  height="16"
+  viewBox="0 0 17 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M6.36747 1.28014C7.3152 -0.426712 9.68492 -0.426712 10.6318 1.28014L16.6669 12.1596C17.6138 13.8664 16.429 16 14.5343 16H2.46497C0.570331 16 -0.613713 13.8664 0.333194 12.1596L6.36665 1.28014H6.36747ZM8.50006 5.75805C8.66328 5.75805 8.81981 5.82549 8.93522 5.94553C9.05063 6.06556 9.11547 6.22837 9.11547 6.39812V9.59846C9.11547 9.76822 9.05063 9.93102 8.93522 10.0511C8.81981 10.1711 8.66328 10.2385 8.50006 10.2385C8.33684 10.2385 8.18031 10.1711 8.0649 10.0511C7.94949 9.93102 7.88465 9.76822 7.88465 9.59846V6.39812C7.88465 6.22837 7.94949 6.06556 8.0649 5.94553C8.18031 5.82549 8.33684 5.75805 8.50006 5.75805ZM8.50006 12.7988C8.66328 12.7988 8.81981 12.7314 8.93522 12.6113C9.05063 12.4913 9.11547 12.3285 9.11547 12.1587C9.11547 11.989 9.05063 11.8262 8.93522 11.7061C8.81981 11.5861 8.66328 11.5187 8.50006 11.5187C8.33684 11.5187 8.18031 11.5861 8.0649 11.7061C7.94949 11.8262 7.88465 11.989 7.88465 12.1587C7.88465 12.3285 7.94949 12.4913 8.0649 12.6113C8.18031 12.7314 8.33684 12.7988 8.50006 12.7988Z"
+    fill="currentColor"
+  />
+</svg>

package/dist/components/inputs/text-input/assets/IconValid.svelte

@@ -1,12 +1,12 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  fill="currentColor"
-  class="size-6"
->
-  <path
-    fill-rule="evenodd"
-    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
-    clip-rule="evenodd"
-  />
-</svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  class="size-6"
+>
+  <path
+    fill-rule="evenodd"
+    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
+    clip-rule="evenodd"
+  />
+</svg>

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

@@ -1,63 +1,63 @@
-<script>
-  /**
-   * GridLayers Component
-   *
-   * Creates a single-cell grid where all children occupy the same space,
-   * enabling layered layouts with natural height behavior.
-   *
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   padding?: string,
-   *   margin?: string,
-   *   classes?: string,
-   *   style?: string,
-   *   overflow?: string,
-   *   children: import('svelte').Snippet,
-   *   [attr: string]: any
-   * }}
-   */
-  const {
-    // Container styles
-    base = '',
-    bg = '',
-    padding = '',
-    margin = '',
-    classes = '',
-    style = '',
-    overflow = '',
-
-    // Content
-    children,
-
-    // Attributes
-    ...attrs
-  } = $props();
-
-  // Build the inline style
-  let containerStyle = $derived.by(() => {
-    const styles = ['grid-template: 1fr / 1fr;'];
-
-    if (style) {
-      styles.push(style);
-    }
-
-    return styles.join(' ');
-  });
-</script>
-
-<div
-  data-component="grid-layers"
-  class="grid {base} {bg} {classes} {margin} {padding} {overflow}"
-  style={containerStyle}
-  {...attrs}
->
-  {@render children()}
-</div>
-
-<style>
-  /* All direct children occupy the same grid area */
-  div > :global(*) {
-    grid-area: 1 / 1;
-  }
-</style>
+<script>
+  /**
+   * GridLayers Component
+   *
+   * Creates a single-cell grid where all children occupy the same space,
+   * enabling layered layouts with natural height behavior.
+   *
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   padding?: string,
+   *   margin?: string,
+   *   classes?: string,
+   *   style?: string,
+   *   overflow?: string,
+   *   children: import('svelte').Snippet,
+   *   [attr: string]: any
+   * }}
+   */
+  const {
+    // Container styles
+    base = '',
+    bg = '',
+    padding = '',
+    margin = '',
+    classes = '',
+    style = '',
+    overflow = '',
+
+    // Content
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+
+  // Build the inline style
+  let containerStyle = $derived.by(() => {
+    const styles = ['grid-template: 1fr / 1fr;'];
+
+    if (style) {
+      styles.push(style);
+    }
+
+    return styles.join(' ');
+  });
+</script>
+
+<div
+  data-component="grid-layers"
+  class="grid {base} {bg} {classes} {margin} {padding} {overflow}"
+  style={containerStyle}
+  {...attrs}
+>
+  {@render children()}
+</div>
+
+<style>
+  /* All direct children occupy the same grid area */
+  div > :global(*) {
+    grid-area: 1 / 1;
+  }
+</style>

package/dist/components/layout/grid-layers/util.js

@@ -1,74 +1,74 @@
-// lib/components/layout/gridLayers.utils.js
-
-/**
- * Sets up a ResizeObserver on the target layer
- * 
- * @param {HTMLElement|null} targetLayer - The layer element to observe
- * @param {Function} onHeightChange - Callback when height changes
- * @returns {ResizeObserver|null} - The created observer or null
- */
-export function setupLayerObserver(targetLayer, onHeightChange) {
-  if (!targetLayer || !window.ResizeObserver) return null;
-
-  // Create new observer
-  const observer = new ResizeObserver(entries => {
-    for (const entry of entries) {
-      if (entry.target === targetLayer) {
-        // Get the computed style to access margin values
-        const computedStyle = window.getComputedStyle(targetLayer);
-        const marginTop = parseInt(computedStyle.marginTop, 10);
-        const marginBottom = parseInt(computedStyle.marginBottom, 10);
-
-        // Calculate height including border box and margins
-        let elementHeight = 0;
-
-        if (entry.borderBoxSize) {
-          const borderBoxSize = Array.isArray(entry.borderBoxSize)
-            ? entry.borderBoxSize[0]
-            : entry.borderBoxSize;
-          elementHeight = borderBoxSize.blockSize;
-        } else {
-          // Fallback to getBoundingClientRect
-          const rect = targetLayer.getBoundingClientRect();
-          elementHeight = rect.height;
-        }
-
-        // Add margins to the height
-        const totalHeight = elementHeight + marginTop + marginBottom;
-        onHeightChange(totalHeight);
-      }
-    }
-  });
-
-  // Start observing
-  observer.observe(targetLayer);
-  return observer;
-}
-
-/**
- * Measures the height of the specified layer, including margins
- * 
- * @param {HTMLElement|null} container - The container to search in
- * @param {string} layerId - The data-layer attribute value to find
- * @returns {{ element: HTMLElement|null, height: number }} The element and its height
- */
-export function measureTargetLayer(container, layerId) {
-  if (!layerId || !container) return { element: null, height: 0 };
-
-  const layerElement = container.querySelector(`[data-layer="${layerId}"]`);
-  
-  if (!layerElement) return { element: null, height: 0 };
-  
-  // Get the computed style to access margin values
-  const computedStyle = window.getComputedStyle(layerElement);
-  const marginTop = parseInt(computedStyle.marginTop, 10);
-  const marginBottom = parseInt(computedStyle.marginBottom, 10);
-  
-  // Get the element's border box height
-  const rect = layerElement.getBoundingClientRect();
-  
-  // Calculate total height including margins
-  const height = rect.height > 0 ? rect.height + marginTop + marginBottom : 0;
-  
-  return { element: layerElement, height };
-}
+// lib/components/layout/gridLayers.utils.js
+
+/**
+ * Sets up a ResizeObserver on the target layer
+ * 
+ * @param {HTMLElement|null} targetLayer - The layer element to observe
+ * @param {Function} onHeightChange - Callback when height changes
+ * @returns {ResizeObserver|null} - The created observer or null
+ */
+export function setupLayerObserver(targetLayer, onHeightChange) {
+  if (!targetLayer || !window.ResizeObserver) return null;
+
+  // Create new observer
+  const observer = new ResizeObserver(entries => {
+    for (const entry of entries) {
+      if (entry.target === targetLayer) {
+        // Get the computed style to access margin values
+        const computedStyle = window.getComputedStyle(targetLayer);
+        const marginTop = parseInt(computedStyle.marginTop, 10);
+        const marginBottom = parseInt(computedStyle.marginBottom, 10);
+
+        // Calculate height including border box and margins
+        let elementHeight = 0;
+
+        if (entry.borderBoxSize) {
+          const borderBoxSize = Array.isArray(entry.borderBoxSize)
+            ? entry.borderBoxSize[0]
+            : entry.borderBoxSize;
+          elementHeight = borderBoxSize.blockSize;
+        } else {
+          // Fallback to getBoundingClientRect
+          const rect = targetLayer.getBoundingClientRect();
+          elementHeight = rect.height;
+        }
+
+        // Add margins to the height
+        const totalHeight = elementHeight + marginTop + marginBottom;
+        onHeightChange(totalHeight);
+      }
+    }
+  });
+
+  // Start observing
+  observer.observe(targetLayer);
+  return observer;
+}
+
+/**
+ * Measures the height of the specified layer, including margins
+ * 
+ * @param {HTMLElement|null} container - The container to search in
+ * @param {string} layerId - The data-layer attribute value to find
+ * @returns {{ element: HTMLElement|null, height: number }} The element and its height
+ */
+export function measureTargetLayer(container, layerId) {
+  if (!layerId || !container) return { element: null, height: 0 };
+
+  const layerElement = container.querySelector(`[data-layer="${layerId}"]`);
+  
+  if (!layerElement) return { element: null, height: 0 };
+  
+  // Get the computed style to access margin values
+  const computedStyle = window.getComputedStyle(layerElement);
+  const marginTop = parseInt(computedStyle.marginTop, 10);
+  const marginBottom = parseInt(computedStyle.marginBottom, 10);
+  
+  // Get the element's border box height
+  const rect = layerElement.getBoundingClientRect();
+  
+  // Calculate total height including margins
+  const height = rect.height > 0 ? rect.height + marginTop + marginBottom : 0;
+  
+  return { element: layerElement, height };
+}

package/dist/components/layout/index.js

@@ -1 +1 @@
-export { default as GridLayers } from './grid-layers/GridLayers.svelte';
+export { default as GridLayers } from './grid-layers/GridLayers.svelte';

package/dist/components/panels/index.js

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

package/dist/components/panels/panel/Panel.svelte

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

package/dist/components/rows/index.js

@@ -1,3 +1,3 @@
-export { default as PanelGridRow } from './panel-grid-row/PanelGridRow.svelte';
-
-export { default as PanelRow2 } from './panel-row-2/PanelRow2.svelte';
+export { default as PanelGridRow } from './panel-grid-row/PanelGridRow.svelte';
+
+export { default as PanelRow2 } from './panel-row-2/PanelRow2.svelte';