@hkdigital/lib-sveltekit 0.0.98 → 0.1.0

package/dist/components/image/EnhancedImage.svelte__

@@ -0,0 +1,162 @@
+<script>
+  import { onMount } from 'svelte';
+
+  /**
+   * @example
+   * import { EnhancedImage }
+   *   from '$lib/components/EnhancedImage/index.js';
+   *
+   * <EnhancedImage
+   *   classes="aspect-video max-h-svh w-full border-8 border-pink-500"
+   *   src={NeonLightsOff}
+   *   onload={() => {
+   *     console.log('loaded');
+   *   }}
+   * />
+   */
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   classes?: string,
+   *   overflow?: string,
+   *   aspect?: string,
+   *   fit?: string,
+   *   position?: string,
+   *   src: string | import('$lib/typedef/image.js').Picture,
+   *   alt?: string,
+   *   onload?: ( e: (Event|{ type: string, target: HTMLImageElement }) ) => void,
+   *   onerror?: ( e: (Event|{ type: string, target: HTMLImageElement }) ) => void,
+   *   loading?: string
+   * } & { [attr: string]: * }}
+   */
+  let {
+    // Style
+    base,
+    bg,
+    classes,
+
+    overflow = 'overflow-clip',
+    aspect,
+
+    fit = 'contain',
+    position = 'left top',
+
+    src,
+    alt = '',
+    onload,
+    onerror,
+    loading,
+
+    // Attributes
+    ...attrs
+  } = $props();
+
+  // let show = $state(false);
+
+  /** @type {HTMLDivElement|undefined} */
+  let imgBoxElem = $state();
+
+  /** @type {HTMLImageElement|undefined} */
+  let imgElem = $state();
+
+  /** @type {string | import('$lib/typedef/image.js').Picture} */
+  let src_;
+
+  $effect(() => {
+    if (src_ && src !== src_) {
+      throw new Error('Property [src] change is not supported');
+    }
+  });
+
+  let aspectStyle = $state('');
+
+  // > Event names
+  const LOAD = 'load';
+  const ERROR = 'error';
+
+  // > onMount
+
+  onMount(() => {
+    // show = true;
+
+    imgElem = imgBoxElem?.getElementsByTagName('img')[0];
+
+    if (!imgElem) {
+      throw new Error('Missing IMG element');
+    }
+
+    // > Auto set box aspect to same as image aspect if not set
+
+    if (!aspect) {
+      aspectStyle = `${imgElem.width / imgElem.height}`;
+    } else {
+      aspectStyle = '';
+    }
+
+    // > Register image onload and onerror handlers
+
+    /** @type {( e: Event ) => void} */
+    let onloadFn;
+
+    if (onload) {
+      if (imgElem?.complete) {
+        onload({ type: LOAD, target: imgElem });
+      } else {
+        onloadFn = onload;
+        imgElem?.addEventListener(LOAD, onloadFn);
+      }
+    }
+
+    /** @type {( e: Event ) => void} */
+    let onerrorFn;
+
+    if (onerror) {
+      onerrorFn = onerror;
+      imgElem?.addEventListener(ERROR, onerrorFn);
+    }
+
+    return () => {
+      if (onloadFn) {
+        imgElem?.removeEventListener(LOAD, onloadFn);
+      }
+
+      if (onerrorFn) {
+        imgElem?.removeEventListener(ERROR, onerrorFn);
+      }
+    };
+  });
+</script>
+
+<div
+  data-hk-enhanced-image
+  bind:this={imgBoxElem}
+  class="{base} {bg} {aspect} {overflow} {classes}"
+  style:--fit={fit}
+  style:--pos={position}
+  style:aspect-ratio={aspectStyle}
+  {...attrs}
+>
+  <enhanced:img {src} {alt} />
+</div>
+
+<style>
+  [data-hk-enhanced-image],
+  :global([data-hk-enhanced-image] picture),
+  :global([data-hk-enhanced-image] img) {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  :global([data-hk-enhanced-image] picture),
+  :global([data-hk-enhanced-image] img) {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  :global([data-hk-enhanced-image] img) {
+    object-fit: var(--fit);
+    object-position: var(--pos);
+  }
+</style>

package/dist/components/image/ImageBox.svelte__

@@ -0,0 +1,242 @@
+<script>
+	import { onMount } from 'svelte';
+
+	import { ImageLoader } from '$lib/classes/svelte/image/index.js';
+
+	import { toSingleImageMeta } from '$lib/util/image/index.js';
+
+	/**
+	 * @example
+	 * import { ImageBox } from '/path/to/ImageBox/index.js';
+	 *
+	 * // @note 'as=metadata' is set by the preset
+	 * import NeonLightsOff from '$lib/img/NeonLightsOff.jpg?preset=gradient';
+	 *
+	 * <!-- Example that fits in an outer-box -->
+	 *
+	 * <div class="outer-box">
+	 *   <ImageBox image={ArmyGreen} fit="contain" position="center center" />
+	 * </div>
+	 *
+	 * <!-- Examples that has have width, height or aspect set -->
+	 *
+	 * <ImageBox
+	 *   image={ArmyGreen}
+	 *   fit="contain"
+	 *   position="center center"
+	 *   width="w-[200px]"
+	 *   height="h-[200px]"
+	 *   classes="border-8 border-green-500"
+	 * />
+	 *
+	 * <ImageBox
+	 *   image={ArmyGreen}
+	 *   fit="contain"
+	 *   position="center center"
+	 *   width="w-[200px]"
+	 *   aspect="aspect-square"
+	 *   classes="border-8 border-green-500"
+	 * />
+	 *
+	 * <ImageBox
+	 *   image={ArmyGreen}
+	 *   fit="contain"
+	 *   position="center center"
+	 *   height="h-[200px]"
+	 *   aspect="aspect-square"
+	 *   classes="border-8 border-green-500"
+	 * />
+	 *
+	 * <!-- Or hack it using !important -->
+	 *
+	 * <ImageBox
+	 *   image={ArmyGreen}
+	 *   fit="contain"
+	 *   position="center center"
+	 *   classes="!w-[200px] !h-[200px] border-8 border-green-500"
+	 * />
+	 */
+
+	/**
+	 * @typedef {import('./typedef.js').ObjectFit} ObjectFit
+	 * @typedef {import('./typedef.js').ObjectPosition} ObjectPosition
+	 *
+	 * @typedef {import('$lib/classes/svelte/network-loader/typedef.js').LoadingProgress} LoadingProgress
+	 *
+	 * @typedef {import('$lib/config/typedef.js').ImageMeta} ImageMeta
+	 *
+	 * @typedef {Object} Props
+	 * @property {string} [base] - Base styling class
+	 * @property {string} [bg] - Background styling class
+	 * @property {string} [classes] - Additional CSS classes
+	 * @property {string} [width] - Width of the image container
+	 * @property {string} [height] - Height of the image container
+	 * @property {string} [aspect] - Aspect ratio of the image container
+	 * @property {string} [overflow] - Overflow behavior
+	 * @property {ObjectFit} [fit] - Object-fit property
+	 * @property {ObjectPosition} [position] - Object-position property
+	 *
+	 * @property {ImageMeta|ImageMeta[]} [imageMeta]
+	 *   Image metadata, TODO: array of image metadata for responsive image
+	 *
+	 * @property {ImageLoader} [imageLoader]
+	 *   Image loader
+	 *
+	 * @property {string} [alt] - Alternative text for the image
+	 * @property {() => LoadingProgress} [onProgress] - Progress callback function
+	 * @property {*} [attr] - Additional arbitrary attributes
+	 */
+
+	/** @type {Props} */
+	let {
+		// Style
+		base,
+		bg,
+		classes,
+		width,
+		height,
+		aspect,
+		overflow = 'overflow-clip',
+
+		// Fitting and positioning of image in its container
+		fit = 'contain',
+		position = 'left top',
+
+		// Single image or responsive image meta data
+		imageMeta,
+
+		imageLoader,
+
+		alt = '',
+
+		// Attributes
+		...attrs
+	} = $props();
+
+	if (!imageMeta) {
+		throw new Error('Missing [imageMeta]');
+	}
+
+	// let show = $state(false);
+
+	/** @type {HTMLImageElement|undefined} */
+	let imgElem = $state();
+
+	let aspectStyle = $state('');
+
+	// > Loading
+
+	let metaWidth = $state(0);
+	let metaHeight = $state(0);
+
+	let imageMeta_ = $state();
+
+	$effect(() => {
+		//
+		// Is imageMeta is a list of responsive options: pick one
+		//
+		if (imageMeta) {
+			imageMeta_ = toSingleImageMeta(imageMeta);
+		}
+	});
+
+	$effect(() => {
+		//
+		// Set meta width and height
+		//
+		if (imageMeta_) {
+			if (imageMeta_.width) {
+				metaWidth = imageMeta_.width;
+			}
+
+			if (imageMeta_.height) {
+				metaHeight = imageMeta_.height;
+			}
+		}
+	});
+
+	/** @type {ImageLoader|undefined} */
+	let imageLoader_ = $state();
+
+	$effect(() => {
+		//
+		// User supplied imageLoader instead of imageMeta
+		//
+		if (!imageMeta && imageLoader && !imageLoader_) {
+			imageLoader_ = imageLoader;
+			imageMeta_ = imageLoader.imageMeta;
+		}
+	});
+
+	/** @type {string|null} */
+	let objectUrl = $state(null);
+
+	$effect(() => {
+		//
+		// Create image loader
+		//
+		if (imageMeta_ && !imageLoader_) {
+			imageLoader_ = new ImageLoader({ imageMeta: imageMeta_ });
+		}
+	});
+
+	$effect(() => {
+		//
+		// Start loading if imageLoader_ is in state 'initial'
+		//
+		// TODO: implement lazy flag
+		//
+		if (imageLoader_?.initial) {
+			imageLoader_.load();
+		}
+	});
+
+	$effect(() => {
+		//
+		// Get objectUrl when the image has finished loading
+		//
+		if (imageLoader_.loaded) {
+			// @ts-ignore
+			objectUrl = imageLoader_.getObjectURL();
+		}
+
+		return () => {
+			if (objectUrl) {
+				URL.revokeObjectURL(objectUrl);
+				objectUrl = null;
+			}
+		};
+	});
+</script>
+
+<div
+	data-image="box"
+	class="{base} {bg} {aspect} {overflow} {width} {height} {classes}"
+	style:--fit={fit}
+	style:--pos={position}
+	style:aspect-ratio={aspectStyle}
+	style:width={width || (height && aspect) ? undefined : '100%'}
+	style:height={height || (width && aspect) ? undefined : '100%'}
+	{...attrs}
+>
+	{#if objectUrl && metaWidth && metaHeight}
+		<img src={objectUrl} {alt} width={metaWidth} height={metaHeight} />
+	{/if}
+</div>
+
+<style>
+	[data-image='box'] {
+		max-width: 100%;
+		max-height: 100%;
+	}
+
+	img {
+		display: block;
+		width: 100%;
+		height: 100%;
+		max-width: 100%;
+		max-height: 100%;
+		object-fit: var(--fit);
+		object-position: var(--pos);
+	}
+</style>

package/dist/components/image/ImageBox.svelte___

@@ -0,0 +1,241 @@
+<script>
+	import { onMount } from 'svelte';
+	import { ImageLoader } from '$lib/classes/svelte/image/index.js';
+	import { ImageVariantsLoader } from '$lib/classes/svelte/image/index.js';
+	import { toSingleImageMeta } from '$lib/util/image/index.js';
+
+	/**
+	 * @type {{
+	 *   base?: string,
+	 *   bg?: string,
+	 *   classes?: string,
+	 *   width?: string,
+	 *   height?: string,
+	 *   aspect?: string,
+	 *   overflow?: string,
+	 *   fit?: 'contain' | 'cover' | 'fill',
+	 *   position?: string,
+	 *   imageMeta: import('$lib/config/typedef.js').ImageMeta | import('$lib/config/typedef.js').ImageMeta[],
+	 *   imageLoader?: import('$lib/classes/svelte/image/index.js').ImageLoader,
+	 *   alt?: string,
+	 *   onProgress?: () => import('$lib/classes/svelte/network-loader/typedef.js').LoadingProgress,
+	 *   debug?: boolean,
+	 *   [attr: string]: any
+	 * }}
+	 */
+	let {
+		// Style
+		base,
+		bg,
+		classes,
+		width,
+		height,
+		aspect,
+		overflow = 'overflow-clip',
+
+		// Fitting and positioning of image in its container
+		fit = 'contain',
+		position = 'left top',
+
+		// Single image or responsive image meta data
+		imageMeta,
+		imageLoader,
+
+		// Accessibility
+		alt = '',
+
+		// Development
+		debug = false,
+
+		// Additional attributes
+		...attrs
+	} = $props();
+
+	if (!imageMeta) {
+		throw new Error('Missing [imageMeta]');
+	}
+
+	/** @type {HTMLDivElement|undefined} */
+	let containerElem = $state();
+
+	/** @type {HTMLImageElement|undefined} */
+	let imgElem = $state();
+
+	let aspectStyle = $state('');
+
+	// > Loading
+	let metaWidth = $state(0);
+	let metaHeight = $state(0);
+
+	let imageMeta_ = $state();
+	let variantsLoader = $state();
+	let variantObjectUrl = $state(null);
+	let objectUrl = $state(null);
+
+	$effect(() => {
+		//
+		// Is imageMeta is a list of responsive options:
+		// => setup variants loader
+		//
+		if (Array.isArray(imageMeta) && !imageLoader && !variantsLoader) {
+			// $inspect(imageMeta, 'Creating variantsLoader');
+
+			variantsLoader = new ImageVariantsLoader(imageMeta, {
+				devicePixelRatio: window.devicePixelRatio
+			});
+		}
+		//
+		// Single image meta (only if not using variants)
+		//
+		else if (imageMeta && !variantsLoader) {
+			// Only run if there is no variantsLoader
+
+			//$inspect(imageMeta, 'Using single imageMeta');
+
+			imageMeta_ = toSingleImageMeta(imageMeta);
+		}
+	});
+
+	$effect(() => {
+		//
+		// Set meta width and height for single image
+		//
+		if (imageMeta_) {
+			if (imageMeta_.width) {
+				metaWidth = imageMeta_.width;
+			}
+
+			if (imageMeta_.height) {
+				metaHeight = imageMeta_.height;
+			}
+		}
+	});
+
+	/** @type {ImageLoader|undefined} */
+	let imageLoader_ = $state();
+
+	$effect(() => {
+		//
+		// User supplied imageLoader instead of imageMeta
+		//
+		if (!imageMeta && imageLoader && !imageLoader_) {
+			imageLoader_ = imageLoader;
+			imageMeta_ = imageLoader.imageMeta;
+		}
+	});
+
+	$effect(() => {
+		//
+		// Create image loader for single image
+		//
+		if (imageMeta_ && !imageLoader_) {
+			imageLoader_ = new ImageLoader({ imageMeta: imageMeta_ });
+		}
+	});
+
+	$effect(() => {
+		//
+		// Start loading if imageLoader_ is in state 'initial'
+		//
+		if (imageLoader_?.initial) {
+			imageLoader_.load();
+		}
+	});
+
+	$effect(() => {
+		//
+		// Get objectUrl when the single image has finished loading
+		//
+		if (imageLoader_?.loaded) {
+			objectUrl = imageLoader_.getObjectURL();
+		}
+
+		return () => {
+			if (objectUrl) {
+				URL.revokeObjectURL(objectUrl);
+				objectUrl = null;
+			}
+		};
+	});
+
+	$effect(() => {
+		//
+		// Setup resize observer for variants loading
+		//
+		if (!containerElem || !variantsLoader) return;
+
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const { width, height } = entry.contentRect;
+
+				variantsLoader.updateOptimalImageMeta({
+					containerWidth: width,
+					containerHeight: height,
+					fit
+				});
+			}
+		});
+
+		resizeObserver.observe(containerElem);
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	});
+
+	$effect(() => {
+		//
+		// Get variantObjectUrl when a variant has finished loading
+		//
+		if (variantsLoader?.loaded) {
+			variantObjectUrl = variantsLoader.getObjectURL();
+		}
+
+		return () => {
+			if (variantObjectUrl) {
+				URL.revokeObjectURL(variantObjectUrl);
+				variantObjectUrl = null;
+			}
+		};
+	});
+</script>
+
+<div
+	data-image="box"
+	bind:this={containerElem}
+	class="{base} {bg} {aspect} {overflow} {width} {height} {classes}"
+	style:--fit={fit}
+	style:--pos={position}
+	style:aspect-ratio={aspectStyle}
+	style:width={width || (height && aspect) ? undefined : '100%'}
+	style:height={height || (width && aspect) ? undefined : '100%'}
+	{...attrs}
+>
+	{#if variantsLoader?.loaded && variantObjectUrl}
+		<img
+			src={variantObjectUrl}
+			{alt}
+			width={variantsLoader.variant.width}
+			height={variantsLoader.variant.height}
+		/>
+	{:else if objectUrl && metaWidth && metaHeight}
+		<img src={objectUrl} {alt} width={metaWidth} height={metaHeight} />
+	{/if}
+</div>
+
+<style>
+	[data-image='box'] {
+		max-width: 100%;
+		max-height: 100%;
+	}
+
+	img {
+		display: block;
+		width: 100%;
+		height: 100%;
+		max-width: 100%;
+		max-height: 100%;
+		object-fit: var(--fit);
+		object-position: var(--pos);
+	}
+</style>

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

@@ -1,5 +1,4 @@
 export { default as ImageBox } from "./ImageBox.svelte";
-export { default as ResponsiveImage } from "./ResponsiveImage.svelte";
 declare const _default: {};
 export default _default;
 export type ImageMeta = import("../../config/typedef.js").ImageMeta;

package/dist/components/image/index.js

@@ -1,6 +1,5 @@
 /** @typedef {import('../../config/typedef.js').ImageMeta} ImageMeta */
 
 export { default as ImageBox } from './ImageBox.svelte';
-export { default as ResponsiveImage } from './ResponsiveImage.svelte';
 
 export default {};

package/dist/components/inputs/text-input/TestTextInput.svelte__

@@ -0,0 +1,102 @@
+<script>
+  /**
+   * @type {{
+   *   base?: string,
+   *   error?: string,
+   *   classes?: string,
+   *   fieldClasses?: string,
+   *   fieldError?: string,
+   *   legendBase?: string,
+   *   legendClasses?: string,
+   *   legendError?: string,
+   *   value?: string,
+   *   type?: 'text' | 'url' | 'email' | 'number',
+   *   pattern?: string,
+   *   required?: boolean,
+   *   title?: string,
+   *   valid?: boolean,
+   *   pristine?: boolean,
+   *   validate?: (value: string) => string | undefined,
+   * } & { [attr: string]: * }}
+   */
+  let {
+    base = '',
+    error = '',
+    classes = '',
+
+    fieldClasses,
+    fieldError,
+
+    legendBase = 'ml-16p px-8p',
+    legendClasses,
+    legendError,
+
+    value = $bindable(''),
+    type = 'text',
+    pattern,
+    required = false,
+
+    title = '',
+
+    valid = $bindable(true),
+    pristine = $bindable(true),
+
+    validate,
+
+    ...attrs
+  } = $props();
+
+  let inputRef = $state();
+  let validationMessage = $state('');
+  let initialValue = $state('');
+
+  $effect(() => {
+    if (!inputRef) return;
+    initialValue = value;
+    validateInput(inputRef, value);
+  });
+
+  function validateInput(input, currentValue) {
+    input.setCustomValidity('');
+    const isBuiltInValid = input.checkValidity();
+
+    if (isBuiltInValid && validate) {
+      const customError = validate(currentValue);
+      input.setCustomValidity(customError || '');
+    }
+
+    pristine = currentValue === initialValue;
+    valid = input.validity.valid;
+    validationMessage = input.validationMessage;
+  }
+
+  function handleInput(event) {
+    validateInput(event.target, event.target.value);
+  }
+</script>
+
+<fieldset
+  data-inputs="text-input"
+  class="flex w-full items-center rounded {fieldClasses}"
+>
+  <legend class="{legendBase} {legendClasses}">{title}</legend>
+
+  <input
+    bind:this={inputRef}
+    {type}
+    {pattern}
+    {required}
+    {value}
+    class="w-full border-none bg-transparent {base} {classes}"
+    aria-invalid={!valid}
+    aria-errormessage={!valid ? 'validation-message' : undefined}
+    oninput={handleInput}
+    {...attrs}
+  />
+
+  {#if !valid}
+    <small id="validation-message" class="text-error" role="alert">
+      {validationMessage}
+    </small>
+  {/if}
+</fieldset>

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

@@ -15,7 +15,7 @@
     INVALID,
     REQUIRED,
     DISABLED
-  } from '../../../constants/css-states/index.js';
+  } from '../../../constants/state-labels/input-states.js';
 
   /**
    * @type {{
@@ -136,7 +136,7 @@
     //
     // Return CSS classes that indicate the component's state
     //
-    // @see $lib/constants/css-states
+    // @see $lib/constants/state-labels
     //
     const outArr = [];
 

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

@@ -0,0 +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]: * }}
+	 */
+	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/config/tailwind.extend.d.ts

@@ -47,3 +47,10 @@ export const borderWidth: {
     '2p': string;
     '4p': string;
 };
+export const strokeWidth: {
+    '1p': string;
+    '2p': string;
+    '4p': string;
+    '6p': string;
+    '8p': string;
+};

package/dist/config/tailwind.extend.js

@@ -54,3 +54,11 @@ export const borderWidth = {
   '2p': '0.125rem',
   '4p': '0.250rem'
 };
+
+export const strokeWidth = {
+  '1p': '0.0625rem',
+  '2p': '0.125rem',
+  '4p': '0.250rem',
+  '6p': '0.375rem',
+  '8p': '0.5rem'
+};

package/dist/constants/index.js

@@ -1,3 +1,3 @@
 export * as regexp from './regexp/index.js';
 export * as time from './time.js';
-//export * as cssStates from './css-states/index.js';
+//export * as stateLabels from './state-labels/index.js';

package/dist/constants/state-labels/submit-states.d.ts

@@ -0,0 +1,4 @@
+export const IDLE: "idle";
+export const SUBMITTING: "submitting";
+export const SUBMIT_OK: "submit-ok";
+export const SUBMIT_FAILED: "submit-failed";

package/dist/constants/state-labels/submit-states.js

@@ -0,0 +1,4 @@
+export const IDLE = 'idle';
+export const SUBMITTING = 'submitting';
+export const SUBMIT_OK = 'submit-ok';
+export const SUBMIT_FAILED = 'submit-failed';

package/dist/css/tw-prose.postcss__

@@ -0,0 +1,259 @@
+/* Base prose styles */
+.prose {
+  font-size: 1rem;
+  line-height: 1.75;
+  max-width: 65ch;
+}
+
+.prose > * + * {
+  margin-top: 1.25em;
+}
+
+/* Headings */
+.prose h1 {
+  font-size: 2.25em;
+  line-height: 1.1111111;
+  margin-top: 0;
+  margin-bottom: 0.8888889em;
+  font-weight: 800;
+}
+
+.prose h2 {
+  font-size: 1.5em;
+  line-height: 1.3333333;
+  margin-top: 2em;
+  margin-bottom: 1em;
+  font-weight: 700;
+}
+
+.prose h3 {
+  font-size: 1.25em;
+  line-height: 1.6;
+  margin-top: 1.6em;
+  margin-bottom: 0.6em;
+  font-weight: 600;
+}
+
+.prose h4 {
+  font-size: 1.125em;
+  line-height: 1.5;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+}
+
+/* Paragraphs */
+.prose p {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+/* Lists */
+.prose ul,
+.prose ol {
+  padding-left: 1.625em;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+.prose li {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose > ul > li p {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.prose > ul > li > *:first-child {
+  margin-top: 1.25em;
+}
+
+.prose > ul > li > *:last-child {
+  margin-bottom: 1.25em;
+}
+
+/* Nested lists */
+.prose ul ul, 
+.prose ul ol,
+.prose ol ul,
+.prose ol ol {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+/* Links */
+.prose a {
+  color: #111827;
+  text-decoration: underline;
+  font-weight: 500;
+}
+
+.prose a:hover {
+  text-decoration-thickness: 2px;
+}
+
+/* Code blocks */
+.prose code {
+  color: #111827;
+  font-weight: 600;
+  font-size: 0.875em;
+}
+
+.prose pre {
+  color: #e5e7eb;
+  background-color: #1f2937;
+  overflow-x: auto;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+  margin-top: 1.7142857em;
+  margin-bottom: 1.7142857em;
+  border-radius: 0.375rem;
+  padding: 0.8571429em 1.1428571em;
+}
+
+.prose pre code {
+  background-color: transparent;
+  border-radius: 0;
+  padding: 0;
+  font-weight: 400;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+
+/* Blockquotes */
+.prose blockquote {
+  font-weight: 500;
+  font-style: italic;
+  color: #111827;
+  border-left-width: 0.25rem;
+  border-left-color: #e5e7eb;
+  margin-top: 1.6em;
+  margin-bottom: 1.6em;
+  padding-left: 1em;
+}
+
+/* Tables */
+.prose table {
+  width: 100%;
+  table-layout: auto;
+  text-align: left;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+}
+
+.prose thead {
+  font-weight: 600;
+  border-bottom-width: 1px;
+  border-bottom-color: #d1d5db;
+}
+
+.prose thead th {
+  vertical-align: bottom;
+  padding-right: 0.5714286em;
+  padding-bottom: 0.5714286em;
+  padding-left: 0.5714286em;
+}
+
+.prose tbody tr {
+  border-bottom-width: 1px;
+  border-bottom-color: #e5e7eb;
+}
+
+.prose tbody td {
+  vertical-align: top;
+  padding: 0.5714286em;
+}
+
+/* Size variations */
+.prose-sm {
+  font-size: 0.875rem;
+  line-height: 1.7142857;
+}
+
+.prose-lg {
+  font-size: 1.125rem;
+  line-height: 1.7777778;
+}
+
+.prose-xl {
+  font-size: 1.25rem;
+  line-height: 1.8;
+}
+
+/* Dark mode */
+.prose-invert {
+  color: #d1d5db;
+}
+
+.prose-invert a {
+  color: #fff;
+}
+
+.prose-invert strong {
+  color: #fff;
+}
+
+.prose-invert code {
+  color: #fff;
+}
+
+.prose-invert thead {
+  border-bottom-color: #4b5563;
+}
+
+.prose-invert tbody tr {
+  border-bottom-color: #374151;
+}
+
+.prose-invert blockquote {
+  color: #9ca3af;
+  border-left-color: #4b5563;
+}
+
+/* Images */
+.prose img {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.prose figure > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.prose figure figcaption {
+  color: #6b7280;
+  font-size: 0.875em;
+  line-height: 1.4285714;
+  margin-top: 0.8571429em;
+}
+
+/* Custom elements */
+.prose hr {
+  border-color: #e5e7eb;
+  border-top-width: 1px;
+  margin-top: 3em;
+  margin-bottom: 3em;
+}
+
+.prose strong {
+  font-weight: 600;
+  color: #111827;
+}
+
+.prose em {
+  font-style: italic;
+}
+
+/* Focus styles */
+.prose a:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  text-decoration-thickness: 2px;
+}

package/dist/themes/hkdev/global/text.postcss__

@@ -0,0 +1,35 @@
+/**
+ * Tailwind defaults
+ *
+ * text-sm 14px;
+ * text-base 16px;
+ * text-lg 18px;
+ * text-xl 20px;
+ * text-2xl 24px;
+ * text-3xl 30px;
+ * text-4xl 36px;
+ * text-5xl 48px;
+ * text-6xl 60px;
+ * text-7xl 72px;
+ * text-8xl 96px;
+ * text-9xl 128px;
+ *
+ * @see https://tailwindcss.com/docs/font-size
+ */
+
+@define-mixin all_text {
+
+  a {
+    @apply text-sm font-bold underline;
+  }
+
+  p {
+    @apply text-xl;
+  }
+
+  h1 {
+    &.text-presenter-title {      
+      @apply text-5xl;
+    }
+  }
+}

package/dist/themes/hkdev/global/vars.postcss__

@@ -0,0 +1,7 @@
+
+@define-mixin all_vars {
+
+  /* --tab-bar-height: 72px;  
+  --tab-bar-selector-width: 132px;
+  --tab-bar-selector-height: var(--tab-bar-height, 72px); */
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.0.98",
+	"version": "0.1.0",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"
@@ -20,19 +20,19 @@
 	],
 	"scripts": {
 		"dev": "vite dev",
-		"build": "cross-env vite build && npm run package",
+		"build": "vite build && npm run package",
 		"preview": "vite preview",
-		"package": "cross-env svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "cross-env npm run package",
-		"publish:npm": "cross-env npm version patch && npm publish --access public && git push",
-		"check": "cross-env svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
-		"check:watch": "cross-env svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"publish:npm": "npm version patch && npm publish --access public && git push",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
 		"format": "prettier --write .",
-		"lint": "cross-env prettier --check . && eslint .",
+		"lint": "prettier --check . && eslint .",
 		"test:unit": "vitest",
-		"test": "cross-env npm run test:unit -- --run && npm run test:e2e",
+		"test": "npm run test:unit -- --run && npm run test:e2e",
 		"test:e2e": "playwright test",
-		"upgrade:all": "cross-env ncu -u && pnpm install"
+		"upgrade:all": "ncu -u && pnpm install"
 	},
 	"files": [
 		"dist",
@@ -73,7 +73,6 @@
 		"@tailwindcss/typography": "^0.5.16",
 		"@types/eslint": "^9.6.1",
 		"autoprefixer": "^10.4.20",
-		"cross-env": "^7.0.3",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^2.46.1",

package/dist/constants/css-states/index.d.ts

@@ -1 +0,0 @@
-export * from "./input-states.js";

package/dist/constants/css-states/index.js

@@ -1 +0,0 @@
-export * from './input-states.js';