@placeholderco/placeholder-ui 1.0.3 → 1.0.6

package/dist/form/Switch.svelte

@@ -1,148 +1,148 @@
-<script lang="ts">
-    // Sourced from https://svelte.dev/playground/d65a4e9f0ae74d1eb1b08d13e428af32?version=5.36.16, and updated from there
-	import FormGroup from './FormGroup.svelte';
-
-	interface Props {
-		label: string;
-		required?: boolean;
-		checked: boolean;
-		disabled?: boolean;
-		description?: string;
-        containerClass?: string;
-        switchClass?: string;
-        onchange?: (value: boolean) => void;
-        showError?: boolean;
-	}
-
-	let { label, required = false, checked = $bindable(), disabled = false, containerClass, switchClass, onchange, showError }: Props = $props();
-
-    function handleClick(event: Event){
-        const target = event.target as HTMLElement
-
-        const state = target.getAttribute('aria-checked')
-
-        checked = !(state === 'true')
-        onchange?.(checked);
-    }
-</script>
-
-<div class="switch-container {containerClass}">
-	<FormGroup {required} {label}>
-			<div class="s s--slider {switchClass} {required ? 'required' : ''}
-		{showError ? 'error' : ''}
-        {disabled ? 'disabled' : ''}">
-				<button
-					role="switch"
-					aria-checked={checked}
-					onclick={handleClick}
-                    aria-labelledby="form-{label}"
-                    class="{disabled ? 'disabled' : ''}"
-                    {disabled}
-				>
-				</button>
-			</div>
-			<span class="slider"></span>
-	</FormGroup>
-</div>
-
-
-<style>
-    :root .switch-container {
-		--switch-accent-color: var(--pui-color-primary);
-		--switch-track-color: var(--pui-border-disabled);
-	}
-
-    :global(.dark) .switch-container {
-        --switch-accent-color: var(--pui-color-primary);
-        --switch-track-color: var(--pui-color-gray-600);
-    }
-
-	.disabled button {
-		cursor: not-allowed;
-	}
-
-
-    /* Inner Design Option */
-    .s--inner button {
-        padding: var(--pui-spacing-2);
-        background-color: var(--pui-color-white);
-        border: 1px solid var(--switch-track-color);
-    }
-
-    .s--inner button:focus {
-        outline: var(--pui-color-primary) solid 1px;
-    }
-
-    /* Slider Design Option */
-
-    .s--slider {
-        display: flex;
-        align-items: center;
-    }
-
-    .s--slider button {
-        width: 3em;
-        height: 1.6em;
-        position: relative;
-        margin: 0 0 0 var(--pui-spacing-2);
-        background: var(--switch-track-color);
-        border: none;
-    }
-
-    .s--slider button::before {
-        content: '';
-        position: absolute;
-        width: 1.3em;
-        height: 1.3em;
-        background: var(--pui-color-white);
-        top: 0.13em;
-        right: 1.5em;
-        transition: transform var(--pui-transition-slow) var(--pui-ease-in-out);
-    }
-
-    .s--slider button[aria-checked='true']{
-        background-color: var(--pui-color-primary);
-    }
-
-    .s--slider button[aria-checked='true']::before{
-        transform: translateX(1.3em);
-        transition: transform var(--pui-transition-slow) var(--pui-ease-in-out);
-    }
-
-    .s--slider button:focus {
-        outline: 1px solid var(--pui-color-primary);
-        outline-offset: var(--pui-focus-ring-offset);
-    }
-
-    /* Multi Design Option */
-
-    /* Based on suggestions from Sara Soueidan https://www.sarasoueidan.com/blog/toggle-switch-design/
-    and this example from Scott O'hara https://codepen.io/scottohara/pen/zLZwNv */
-
-    .s--multi .group-container {
-        border: none;
-        padding: 0;
-        white-space: nowrap;
-    }
-
-
-    /* gravy */
-
-    /* Inner Design Option */
-
-    .s--inner button:focus {
-        outline-offset: var(--pui-focus-ring-offset);
-        border-radius: var(--pui-radius-sm);
-    }
-
-    /* Slider Design Option */
-    .s--slider button {
-        border-radius: var(--pui-radius-3xl);
-    }
-
-    .s--slider button::before {
-        border-radius: var(--pui-radius-full);
-    }
-
-
+<script lang="ts">
+    // Sourced from https://svelte.dev/playground/d65a4e9f0ae74d1eb1b08d13e428af32?version=5.36.16, and updated from there
+	import FormGroup from './FormGroup.svelte';
+
+	interface Props {
+		label: string;
+		required?: boolean;
+		checked: boolean;
+		disabled?: boolean;
+		description?: string;
+        containerClass?: string;
+        switchClass?: string;
+        onchange?: (value: boolean) => void;
+        showError?: boolean;
+	}
+
+	let { label, required = false, checked = $bindable(), disabled = false, containerClass, switchClass, onchange, showError }: Props = $props();
+
+    function handleClick(event: Event){
+        const target = event.target as HTMLElement
+
+        const state = target.getAttribute('aria-checked')
+
+        checked = !(state === 'true')
+        onchange?.(checked);
+    }
+</script>
+
+<div class="switch-container {containerClass}">
+	<FormGroup {required} {label}>
+			<div class="s s--slider {switchClass} {required ? 'required' : ''}
+		{showError ? 'error' : ''}
+        {disabled ? 'disabled' : ''}">
+				<button
+					role="switch"
+					aria-checked={checked}
+					onclick={handleClick}
+                    aria-labelledby="form-{label}"
+                    class="{disabled ? 'disabled' : ''}"
+                    {disabled}
+				>
+				</button>
+			</div>
+			<span class="slider"></span>
+	</FormGroup>
+</div>
+
+
+<style>
+    :root .switch-container {
+		--switch-accent-color: var(--pui-color-primary);
+		--switch-track-color: var(--pui-border-disabled);
+	}
+
+    :global(.dark) .switch-container {
+        --switch-accent-color: var(--pui-color-primary);
+        --switch-track-color: var(--pui-color-gray-600);
+    }
+
+	.disabled button {
+		cursor: not-allowed;
+	}
+
+
+    /* Inner Design Option */
+    .s--inner button {
+        padding: var(--pui-spacing-2);
+        background-color: var(--pui-color-white);
+        border: 1px solid var(--switch-track-color);
+    }
+
+    .s--inner button:focus {
+        outline: var(--pui-color-primary) solid 1px;
+    }
+
+    /* Slider Design Option */
+
+    .s--slider {
+        display: flex;
+        align-items: center;
+    }
+
+    .s--slider button {
+        width: 3em;
+        height: 1.6em;
+        position: relative;
+        margin: 0 0 0 var(--pui-spacing-2);
+        background: var(--switch-track-color);
+        border: none;
+    }
+
+    .s--slider button::before {
+        content: '';
+        position: absolute;
+        width: 1.3em;
+        height: 1.3em;
+        background: var(--pui-color-white);
+        top: 0.13em;
+        right: 1.5em;
+        transition: transform var(--pui-transition-slow) var(--pui-ease-in-out);
+    }
+
+    .s--slider button[aria-checked='true']{
+        background-color: var(--pui-color-primary);
+    }
+
+    .s--slider button[aria-checked='true']::before{
+        transform: translateX(1.3em);
+        transition: transform var(--pui-transition-slow) var(--pui-ease-in-out);
+    }
+
+    .s--slider button:focus {
+        outline: 1px solid var(--pui-color-primary);
+        outline-offset: var(--pui-focus-ring-offset);
+    }
+
+    /* Multi Design Option */
+
+    /* Based on suggestions from Sara Soueidan https://www.sarasoueidan.com/blog/toggle-switch-design/
+    and this example from Scott O'hara https://codepen.io/scottohara/pen/zLZwNv */
+
+    .s--multi .group-container {
+        border: none;
+        padding: 0;
+        white-space: nowrap;
+    }
+
+
+    /* gravy */
+
+    /* Inner Design Option */
+
+    .s--inner button:focus {
+        outline-offset: var(--pui-focus-ring-offset);
+        border-radius: var(--pui-radius-sm);
+    }
+
+    /* Slider Design Option */
+    .s--slider button {
+        border-radius: var(--pui-radius-3xl);
+    }
+
+    .s--slider button::before {
+        border-radius: var(--pui-radius-full);
+    }
+
+
 </style>

package/dist/form/TextArea.svelte

@@ -1,148 +1,148 @@
-<script lang="ts">
-	import FormGroup from './FormGroup.svelte';
-	
-	interface Props {
-		label?: string;
-		inputId?: string;
-		placeholder?: string;
-		required?: boolean;
-		autofocus?: boolean;
-		noAutocomplete?: boolean;
-		groupClass?: string;
-		textboxElement?: HTMLElement;
-		class?: string;
-		containerClass?: string;
-		disabled?: boolean;
-		value?: string;
-		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
-		tooltipText?: string;
-		onblur?: (e: FocusEvent) => void;
-		onfocus?: (e: FocusEvent) => void;
-		onchange?: (e: FocusEvent) => void;
-		oninput?: (e: FocusEvent) => void;
-		onkeydown?: (e: FocusEvent) => void;
-		onkeypress?: (e: FocusEvent) => void;
-		onkeyup?: (e: FocusEvent) => void;
-	}
-
-	let {
-		label = '',
-		inputId = undefined,
-		placeholder = undefined,
-		required = false,
-		autofocus = false,
-		noAutocomplete = false,
-		class: classes = '',
-		containerClass = '',
-		groupClass = '',
-		textboxElement: textboxElement = undefined,
-		disabled = false,
-		value = $bindable(''),
-		tooltipLocation = 'top',
-		tooltipText = undefined,
-		onblur = undefined,
-		onfocus = undefined,
-		onchange = undefined,
-		oninput = undefined,
-		onkeydown = undefined,
-		onkeypress = undefined,
-		onkeyup = undefined,
-	}: Props = $props();
-
-	let showRequiredRing = $state(false);
-	const id = $derived(inputId ?? `input-${label.replaceAll(' ', '')}`);
-</script>
-
-<div class="textarea-container {containerClass}">
-	<FormGroup {label} {required} {id} class={groupClass} {tooltipLocation} {tooltipText}>
-		<!-- svelte-ignore a11y_autofocus -->
-		<textarea
-			class="
-            {showRequiredRing && '!border-required'}
-            {classes}"
-			{id}
-			{placeholder}
-			{disabled}
-			{autofocus}
-			{required}
-			autocomplete={!noAutocomplete ? 'on' : 'off'}
-			bind:value
-			bind:this={textboxElement}
-			{onblur}
-			{onfocus}
-			onchange={() => onchange?.(new FocusEvent('change'))}
-			oninput={() => oninput?.(new FocusEvent('input'))}
-			onkeydown={() => onkeydown?.(new FocusEvent('keydown'))}
-			onkeypress={() => onkeypress?.(new FocusEvent('keypress'))}
-			onkeyup={() => onkeyup?.(new FocusEvent('keyup'))}
-		></textarea>
-	</FormGroup>
-</div>
-
-<style>
-	textarea {
-		display: block;
-		width: 100%;
-		min-height: calc(2.25rem + 2px);
-		padding: var(--pui-spacing-2);
-		font-size: var(--pui-font-size-md);
-		font-weight: var(--pui-font-weight-normal);
-		line-height: var(--pui-line-height-normal);
-		color: var(--pui-input-text);
-		background-color: var(--pui-input-bg);
-		background-image: none;
-		border: 1px solid var(--pui-input-border);
-		border-radius: var(--pui-radius-md);
-		appearance: none;
-		transition: border-color var(--pui-transition-fast) var(--pui-ease-in-out);
-		resize: vertical;
-
-		&::placeholder {
-			color: var(--pui-text-placeholder);
-			opacity: 1;
-		}
-
-		&:focus {
-			border-color: var(--pui-color-primary);
-			outline: 0;
-			box-shadow: none;
-		}
-
-		&:disabled {
-			background-color: var(--pui-bg-disabled);
-			opacity: 1;
-			cursor: not-allowed;
-		}
-	}
-
-	:global(.dark) textarea {
-		background-color: var(--pui-input-bg);
-		color: var(--pui-input-text);
-		border-color: var(--pui-input-border);
-
-		&::placeholder {
-			color: var(--pui-text-placeholder);
-		}
-
-		&:focus {
-			border-color: var(--pui-color-secondary);
-		}
-
-		&:disabled {
-			background-color: var(--pui-bg-disabled);
-			color: var(--pui-input-text);
-		}
-	}
-
-	/* Fix for resize handle in dark mode */
-	:global(.dark) textarea::-webkit-resizer {
-		background-color: var(--pui-color-gray-700);
-		border-color: var(--pui-border-default);
-	}
-
-	.loader {
-		position: absolute;
-		right: var(--pui-spacing-2);
-		top: var(--pui-spacing-2);
-	}
-</style>
+<script lang="ts">
+	import FormGroup from './FormGroup.svelte';
+	
+	interface Props {
+		label?: string;
+		inputId?: string;
+		placeholder?: string;
+		required?: boolean;
+		autofocus?: boolean;
+		noAutocomplete?: boolean;
+		groupClass?: string;
+		textboxElement?: HTMLElement;
+		class?: string;
+		containerClass?: string;
+		disabled?: boolean;
+		value?: string;
+		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+		tooltipText?: string;
+		onblur?: (e: FocusEvent) => void;
+		onfocus?: (e: FocusEvent) => void;
+		onchange?: (e: FocusEvent) => void;
+		oninput?: (e: FocusEvent) => void;
+		onkeydown?: (e: FocusEvent) => void;
+		onkeypress?: (e: FocusEvent) => void;
+		onkeyup?: (e: FocusEvent) => void;
+	}
+
+	let {
+		label = '',
+		inputId = undefined,
+		placeholder = undefined,
+		required = false,
+		autofocus = false,
+		noAutocomplete = false,
+		class: classes = '',
+		containerClass = '',
+		groupClass = '',
+		textboxElement: textboxElement = undefined,
+		disabled = false,
+		value = $bindable(''),
+		tooltipLocation = 'top',
+		tooltipText = undefined,
+		onblur = undefined,
+		onfocus = undefined,
+		onchange = undefined,
+		oninput = undefined,
+		onkeydown = undefined,
+		onkeypress = undefined,
+		onkeyup = undefined,
+	}: Props = $props();
+
+	let showRequiredRing = $state(false);
+	const id = $derived(inputId ?? `input-${label.replaceAll(' ', '')}`);
+</script>
+
+<div class="textarea-container {containerClass}">
+	<FormGroup {label} {required} {id} class={groupClass} {tooltipLocation} {tooltipText}>
+		<!-- svelte-ignore a11y_autofocus -->
+		<textarea
+			class="
+            {showRequiredRing && '!border-required'}
+            {classes}"
+			{id}
+			{placeholder}
+			{disabled}
+			{autofocus}
+			{required}
+			autocomplete={!noAutocomplete ? 'on' : 'off'}
+			bind:value
+			bind:this={textboxElement}
+			{onblur}
+			{onfocus}
+			onchange={() => onchange?.(new FocusEvent('change'))}
+			oninput={() => oninput?.(new FocusEvent('input'))}
+			onkeydown={() => onkeydown?.(new FocusEvent('keydown'))}
+			onkeypress={() => onkeypress?.(new FocusEvent('keypress'))}
+			onkeyup={() => onkeyup?.(new FocusEvent('keyup'))}
+		></textarea>
+	</FormGroup>
+</div>
+
+<style>
+	textarea {
+		display: block;
+		width: 100%;
+		min-height: calc(2.25rem + 2px);
+		padding: var(--pui-spacing-2);
+		font-size: var(--pui-font-size-md);
+		font-weight: var(--pui-font-weight-normal);
+		line-height: var(--pui-line-height-normal);
+		color: var(--pui-input-text);
+		background-color: var(--pui-input-bg);
+		background-image: none;
+		border: 1px solid var(--pui-input-border);
+		border-radius: var(--pui-radius-md);
+		appearance: none;
+		transition: border-color var(--pui-transition-fast) var(--pui-ease-in-out);
+		resize: vertical;
+
+		&::placeholder {
+			color: var(--pui-text-placeholder);
+			opacity: 1;
+		}
+
+		&:focus {
+			border-color: var(--pui-color-primary);
+			outline: 0;
+			box-shadow: none;
+		}
+
+		&:disabled {
+			background-color: var(--pui-bg-disabled);
+			opacity: 1;
+			cursor: not-allowed;
+		}
+	}
+
+	:global(.dark) textarea {
+		background-color: var(--pui-input-bg);
+		color: var(--pui-input-text);
+		border-color: var(--pui-input-border);
+
+		&::placeholder {
+			color: var(--pui-text-placeholder);
+		}
+
+		&:focus {
+			border-color: var(--pui-color-secondary);
+		}
+
+		&:disabled {
+			background-color: var(--pui-bg-disabled);
+			color: var(--pui-input-text);
+		}
+	}
+
+	/* Fix for resize handle in dark mode */
+	:global(.dark) textarea::-webkit-resizer {
+		background-color: var(--pui-color-gray-700);
+		border-color: var(--pui-border-default);
+	}
+
+	.loader {
+		position: absolute;
+		right: var(--pui-spacing-2);
+		top: var(--pui-spacing-2);
+	}
+</style>