@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/Switch.svelte

@@ -1,39 +1,76 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { generateShortUUID } from '../Helpers/Helpers.svelte.js';
-	import type { SwitchProps } from './SwitchProps.js';
-	let {
-		value = false,
-		id = generateShortUUID(),
-		label,
-		disabled,
-		isValid,
-		onchange
-	}: SwitchProps = $props();
-
-	let ref: HTMLInputElement | undefined = $state();
-</script>
-
-<button
-	class="text-label"
-	class:invalid={isValid === false}
-	type="button"
-	onclick={() => ref?.click()}
-	{disabled}
->
-	<span>{label}</span>
-
-	<input {id} name={id} {onchange} type="checkbox" {disabled} checked={value} bind:this={ref} />
-
-	<div class="switch">
-		<div class="switch-inner" class:on={value}>
-			<div class="track" class:on={value}></div>
-		</div>
-	</div>
-</button>
-
-<style>.text-label {
+<svelte:options runes />
+
+<script lang="ts">
+	import { generateWeakId } from '../Helpers/Helpers.svelte.js';
+	import type { SwitchProps } from './SwitchProps.js';
+
+	let {
+		value = $bindable(false),
+		id = generateWeakId(),
+		label,
+		disabled,
+		isValid,
+		onchange,
+	}: SwitchProps = $props();
+
+	let mirror: HTMLInputElement | undefined = $state();
+
+	const toggle = () => {
+		if (disabled) {
+			return;
+		}
+		const next = !value;
+		value = next;
+		if (mirror && onchange) {
+			mirror.checked = next;
+			mirror.dispatchEvent(new Event('change', { bubbles: true }));
+		}
+	};
+</script>
+
+<div class="switch-wrapper">
+	<button
+		{id}
+		class="text-label"
+		class:invalid={isValid === false}
+		type="button"
+		role="switch"
+		aria-checked={value}
+		aria-label={label}
+		onclick={toggle}
+		{disabled}
+	>
+		<span>{label}</span>
+
+		<div class="switch">
+			<div
+				class="switch-inner"
+				class:on={value}
+			>
+				<div
+					class="track"
+					class:on={value}
+				></div>
+			</div>
+		</div>
+	</button>
+
+	<input
+		name={id}
+		{onchange}
+		type="checkbox"
+		tabindex="-1"
+		aria-hidden="true"
+		checked={value}
+		bind:this={mirror}
+	/>
+</div>
+
+<style>.switch-wrapper {
+  display: contents;
+}
+
+.text-label {
   height: max(var(--input-height, 3rem), 2rem);
   width: var(--input-width, 100%);
   color: #3a4952;
@@ -58,10 +95,10 @@
   border-color: #aa1414;
   color: #aa1414;
 }
-.text-label.invalid:focus-within {
+.text-label.invalid:focus-visible {
   outline: solid 1px #aa1414;
 }
-.text-label:focus-within {
+.text-label:focus-visible {
   outline: solid 1px #259fc7;
 }
 .text-label span {
@@ -98,7 +135,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
   border-left: solid 1px #cbd4da;
-  width: 64px;
+  width: 4rem;
   height: 100%;
   background-color: #f4f7f9;
   display: flex;
@@ -107,11 +144,11 @@
   justify-content: center;
 }
 .switch .switch-inner {
-  transition: all ease-out 0.15s 0s;
+  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, translate 0.15s ease-out;
   border: solid 1px #cbd4da;
-  border-radius: 15px;
-  width: 40px;
-  height: 24px;
+  border-radius: 0.9375rem;
+  width: 2.5rem;
+  height: 1.5rem;
   background-color: white;
   display: flex;
   flex-flow: row nowrap;
@@ -123,11 +160,11 @@
   border-color: transparent;
 }
 .switch .switch-inner .track {
-  transition: all ease-out 0.15s 0s;
+  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, translate 0.15s ease-out;
   background-color: #adbbc5;
   border-radius: 50%;
-  width: 16px;
-  height: 16px;
+  width: 1rem;
+  height: 1rem;
   translate: -45% 0;
 }
 .switch .switch-inner .track.on {
@@ -137,4 +174,4 @@
 
 input {
   display: none;
-}</style>
+}</style>

package/dist/Components/Switch.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { SwitchProps } from './SwitchProps.js';
-declare const Switch: import("svelte").Component<SwitchProps, {}, "">;
+declare const Switch: import("svelte").Component<SwitchProps, {}, "value">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/Components/SwitchProps.d.ts

@@ -1,9 +1,55 @@
 import type { ChangeEventHandler } from 'svelte/elements';
 export interface SwitchProps {
+    /**
+     * Visible label rendered next to the toggle. Also doubles as the
+     * `aria-label` on the underlying `<button role="switch">` element so
+     * that screen-reader users hear the same string regardless of the
+     * visual presentation. Required for accessibility.
+     */
     label: string;
+    /**
+     * Bindable on/off state. Use `bind:value` to two-way bind the toggle
+     * from a parent. The component flips this value on click and reflects
+     * it through `aria-checked` so assistive technologies announce the
+     * current state.
+     *
+     * @default false
+     */
     value: boolean;
+    /**
+     * Called after the user toggles the switch and `value` has been
+     * flipped. Fires as a native `change` event on a hidden mirror
+     * checkbox so the prop shape stays compatible with existing
+     * `<input type="checkbox">` change handlers (i.e.
+     * `event.currentTarget.checked` matches the new `value`).
+     */
     onchange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * DOM id placed on the visible `<button role="switch">`. If omitted
+     * a stable per-instance id is generated lazily.
+     *
+     * Note: because the visible toggle is a `<button>`, an external
+     * `<label for={id}>` will not move focus or trigger a toggle when
+     * clicked - those behaviours are reserved for form controls.
+     * Pass the user-visible label through the `label` prop instead, or
+     * place the `Switch` next to a `<label>` whose `for` attribute is
+     * absent.
+     */
     id?: string;
+    /**
+     * When true the switch is non-interactive and styled as disabled.
+     * Reflected on the underlying `<button>` so keyboard focus skips
+     * it and pointer events are ignored.
+     */
     disabled?: boolean;
+    /**
+     * Optional validity flag. When `false`, the switch renders in the
+     * error palette. The prop is left as a plain boolean rather than
+     * `AsyncFlag<boolean>` because Switch does not surface async
+     * validation feedback on its own - it merely paints the error
+     * border when a parent has determined the value is invalid. If
+     * future workorders introduce async-validating switches, migrate
+     * this prop via `useAsyncFlag(() => isValid, true)`.
+     */
     isValid?: boolean;
 }

package/dist/Components/Table/Body/HeightData.d.ts

@@ -1,6 +1 @@
-import type { TableBodyProps } from './TableBodyProps.js';
-export interface HeightData<T extends object> {
-    index: number;
-    applyTo: Array<TableBodyProps<T>['side']>;
-    maxHeight: number;
-}
+export {};

package/dist/Components/Table/Body/HeightData.js

@@ -1 +1,9 @@
+// File scheduled for deletion. The HeightData envelope was the
+// per-row height-reconciliation glue between the three TableBody
+// panes (left / centre / right). The div+grid refactor collapses the
+// three panes into one grid container so the browser handles row
+// alignment natively; height reconciliation is no longer required.
+//
+// Kept as an empty module until the next housekeeping pass removes it
+// from the tree. No exports.
 export {};