@functionalcms/svelte-components 4.0.3 → 4.1.0

package/dist/components/form/Button.svelte

@@ -1,115 +1,115 @@
-<script lang="ts">
-	import { cn } from '../../utils.js';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		children: Snippet;
-		css: string;
-		style: string;
-		type?: 'submit' | 'reset' | 'button' | 'link';
-		href: string;
-		mode?: string;
-		size?: string;
-		isPrimary: boolean;
-		isBordered?: boolean;
-		isCapsule?: boolean;
-		isGrouped?: boolean;
-		isBlock?: boolean;
-		isLink?: boolean;
-		isBlank?: boolean;
-		isDisabled?: boolean;
-		role?: string;
-		isCircle?: boolean;
-		isRounded?: boolean;
-		isSkinned?: boolean;
-		ariaSelected?: boolean;
-		ariaControls?: string;
-		tabIndex?: number;
-		onclick?: () => void;
-		onkeydown?: (e: KeyboardEvent) => void;
-	}
-
-	let {
-		children,
-		css = '',
-		style = '',
-		href = '',
-		mode = undefined,
-		size = undefined,
-		type = 'button',
-		isPrimary = false,
-		isBordered = false,
-		isCapsule = false,
-		isGrouped = false,
-		isBlock = false,
-		isLink = false,
-		isBlank = false,
-		isDisabled = false,
-		role = undefined,
-		isCircle = false,
-		isRounded = false,
-		isSkinned = true,
-		ariaSelected = undefined,
-		ariaControls = undefined,
-		tabIndex = 0,
-		onclick = undefined,
-		onkeydown = undefined,
-		...restProps
-	}: Partial<Props> = $props();
-
-	let klasses = $derived(
-		cn(
-			isSkinned ? 'btn' : 'btn-base',
-			mode ? `btn-${mode}` : '',
-			size ? `btn-${size}` : '',
-			isBordered ? 'btn-bordered' : '',
-			isCapsule ? 'btn-capsule ' : '',
-			isGrouped ? 'btn-grouped' : '',
-			isBlock ? 'btn-block' : '',
-			isCircle ? 'btn-circle' : '',
-			isRounded ? 'btn-rounded' : '',
-			isDisabled ? 'disabled' : '',
-			isBlank ? 'btn-blank' : '',
-			isLink ? 'btn-link' : '',
-			css ? `${css}` : ''
-		)
-	);
-</script>
-
-{#if type == 'link'}
-	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-	<a
-		class={klasses}
-		{href}
-		{style}
-		{role}
-		aria-selected={ariaSelected}
-		aria-controls={ariaControls}
-		tabindex={tabIndex}
-		{onclick}
-		{onkeydown}
-		{...restProps}
-	>
-		{@render children?.()}
-	</a>
-{:else}
-	<button
-		{type}
-		class={klasses}
-		{style}
-		{role}
-		aria-selected={ariaSelected}
-		aria-controls={ariaControls}
-		tabindex={tabIndex}
-		disabled={isDisabled}
-		{onclick}
-		{onkeydown}
-		{...restProps}
-	>
-		{@render children?.()}
-	</button>
-{/if}
-
+<script lang="ts">
+	import { cn } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		css: string;
+		style: string;
+		type?: 'submit' | 'reset' | 'button' | 'link';
+		href: string;
+		mode?: string;
+		size?: string;
+		isPrimary: boolean;
+		isBordered?: boolean;
+		isCapsule?: boolean;
+		isGrouped?: boolean;
+		isBlock?: boolean;
+		isLink?: boolean;
+		isBlank?: boolean;
+		isDisabled?: boolean;
+		role?: string;
+		isCircle?: boolean;
+		isRounded?: boolean;
+		isSkinned?: boolean;
+		ariaSelected?: boolean;
+		ariaControls?: string;
+		tabIndex?: number;
+		onclick?: () => void;
+		onkeydown?: (e: KeyboardEvent) => void;
+	}
+
+	let {
+		children,
+		css = '',
+		style = '',
+		href = '',
+		mode = undefined,
+		size = undefined,
+		type = 'button',
+		isPrimary = false,
+		isBordered = false,
+		isCapsule = false,
+		isGrouped = false,
+		isBlock = false,
+		isLink = false,
+		isBlank = false,
+		isDisabled = false,
+		role = undefined,
+		isCircle = false,
+		isRounded = false,
+		isSkinned = true,
+		ariaSelected = undefined,
+		ariaControls = undefined,
+		tabIndex = 0,
+		onclick = undefined,
+		onkeydown = undefined,
+		...restProps
+	}: Partial<Props> = $props();
+
+	let klasses = $derived(
+		cn(
+			isSkinned ? 'btn' : 'btn-base',
+			mode ? `btn-${mode}` : '',
+			size ? `btn-${size}` : '',
+			isBordered ? 'btn-bordered' : '',
+			isCapsule ? 'btn-capsule ' : '',
+			isGrouped ? 'btn-grouped' : '',
+			isBlock ? 'btn-block' : '',
+			isCircle ? 'btn-circle' : '',
+			isRounded ? 'btn-rounded' : '',
+			isDisabled ? 'disabled' : '',
+			isBlank ? 'btn-blank' : '',
+			isLink ? 'btn-link' : '',
+			css ? `${css}` : ''
+		)
+	);
+</script>
+
+{#if type == 'link'}
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<a
+		class={klasses}
+		{href}
+		{style}
+		{role}
+		aria-selected={ariaSelected}
+		aria-controls={ariaControls}
+		tabindex={tabIndex}
+		{onclick}
+		{onkeydown}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		{type}
+		class={klasses}
+		{style}
+		{role}
+		aria-selected={ariaSelected}
+		aria-controls={ariaControls}
+		tabindex={tabIndex}
+		disabled={isDisabled}
+		{onclick}
+		{onkeydown}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
+
 <style>.btn-base {
   display: inline-flex;
   align-items: center;
@@ -381,4 +381,4 @@ on the side padding. As such, these have a good bit less then regular buttons. *
 
 .btn-link:hover {
   cursor: pointer;
-}</style>
+}</style>

package/dist/components/form/ChoiceInput.svelte

@@ -0,0 +1,375 @@
+<script lang="ts">
+	import { cn } from '../../utils.js';
+	import type { ChoiceInputOption, ChoiceInputSize, ChoiceInputType, HtmlParts } from './utils.js';
+
+	interface Props {
+		isSkinned: boolean;
+		isFieldset: boolean;
+		isInline: boolean;
+		isDisabled: boolean;
+		isInvalid: boolean;
+		options: ChoiceInputOption[];
+		disabledOptions: string[];
+		checkedOptions: string[];
+		type: ChoiceInputType;
+		legendLabel: string;
+		size: ChoiceInputSize;
+		checked: string[];
+	}
+
+	let {
+		id = '',
+		name = '',
+		isSkinned = true,
+		isFieldset = true,
+		isInline = false,
+		isDisabled = undefined,
+		isInvalid = false,
+		options = [],
+		disabledOptions = [],
+		checkedOptions = [],
+		// If isFieldset falsy this will be screenreader only. If legendLabel is not passed
+		// in, it will fallback to the type prop or string choice input. Some content must be
+		// within the <legenc>CONTENT</legend> element to meet accessibility requirements
+		type = 'checkbox',
+		legendLabel = type || 'choice input',
+		size = '',
+		// Provides bind:checked capabilities that consumer can use
+		checked = [],
+        ...restProps
+	}: Partial<Props & HtmlParts> = $props();
+
+	let labelClasses = $derived(
+		cn(
+			type ? `${type}-label-wrap` : '',
+			isInline ? `${type}-label-wrap-inline` : '',
+			isDisabled ? 'disabled' : ''
+		)
+	);
+
+	let labelSpanClasses = $derived(
+		cn(
+			type ? `${type}-label` : '',
+			isInvalid ? 'choice-input-error' : '',
+			size ? `${type}-label-${size}` : ''
+		)
+	);
+
+	// If consumer sets is skinned to false we don't style the legend
+	let skin = $derived(isSkinned ? `${type}-legend` : '');
+
+	let labelCopyClasses = $derived(
+		cn(
+			// Will also need to work in the small
+			// and large sizes here for the text copy
+			type ? `${type}-label-copy` : '',
+			size ? `${type}-label-copy-${size}` : '',
+			isInvalid ? 'choice-input-error' : ''
+		)
+	);
+
+	let legendClasses = $derived(
+		cn(
+			skin,
+			// .screenreader-only is expected to be globally available via common.min.css
+			isFieldset === false ? 'screenreader-only' : ''
+		)
+	);
+
+	let fieldsetClasses = $derived(
+		cn(
+			isSkinned ? `${type}-group` : '',
+			isSkinned && size === 'large' ? `${type}-group-${size}` : '',
+			isFieldset === false ? `${type}-group-hidden` : ''
+		)
+	);
+
+	let inputClasses = $derived(cn(type ? `${type}` : '', size ? `${type}-${size}` : ''));
+
+	let onChange = (e: any) => {
+		// This allows the consumer to use bind:checked={checkedValues} idiom.
+		// We cannot use the bind:group idiom as we're using dynamic type above,
+		// So, essentially, we're manually implementing two-way binding here ;-)
+		checked = Array.from(document.getElementsByName(e.target.name))
+			.filter((el) => (el as HTMLInputElement).checked)
+			.map((el) => (el as HTMLInputElement).value);
+	};
+</script>
+
+<fieldset class={fieldsetClasses}>
+	<legend class={legendClasses}>{legendLabel}</legend>
+	{#each options as { name, value, label }, index}
+		<label
+			class={labelClasses}
+			class:disabled={isDisabled || disabledOptions.includes(value) || undefined}
+		>
+			<input
+				class={inputClasses}
+				id="{id}-{name}-{index}"
+				{type}
+				{name}
+				{value}
+				disabled={isDisabled || disabledOptions.includes(value)}
+				checked={checkedOptions.includes(value)}
+				onchange={onChange}
+				{...restProps}
+			/>
+			<span class={labelSpanClasses} aria-hidden="true"></span>
+			<span class={labelCopyClasses}>{label}</span>
+		</label>
+	{/each}
+</fieldset>
+
+<style>
+	/**
+     * These radio and checkbox customizations are an amalgamation of various resources I've
+     * found on the internets; from Heydon Pickering's radio article (and his Inclusive Components
+     * book), to Sara Soueidan, Scott O'Hara, MDO, and Adrian Roselli's research on the matter
+     * of inclusive hiding and custom radio/checkbox inputs.
+     */
+	.checkbox-group,
+	.radio-group {
+		--width-28: calc(7 * var(--fluid-4)); /* 1.75rem/28px */
+
+		border: 1px solid var(--agnostic-checkbox-border-color, var(--agnostic-gray-light));
+		padding: var(--fluid-24);
+		padding-top: var(--fluid-14);
+		border-radius: var(--fluid-8);
+	}
+
+	.checkbox-group-large,
+	.radio-group-large {
+		padding: var(--width-28);
+		padding-top: var(--fluid-16);
+	}
+
+	.checkbox-legend,
+	.radio-legend {
+		padding: var(--fluid-2) var(--fluid-14);
+		border-radius: var(--fluid-2);
+	}
+
+	/* Hiding technique from https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
+     */
+	.checkbox,
+	.radio {
+		position: absolute;
+		width: var(--fluid-14);
+		height: var(--fluid-14);
+		opacity: 0%;
+	}
+
+	.checkbox-small,
+	.radio-small {
+		width: var(--fluid-12);
+		height: var(--fluid-12);
+	}
+
+	.checkbox-large,
+	.radio-large {
+		width: var(--fluid-16);
+		height: var(--fluid-16);
+	}
+
+	.checkbox-label-wrap,
+	.radio-label-wrap {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.checkbox-label-wrap-inline,
+	.radio-label-wrap-inline {
+		display: inline-flex;
+	}
+
+	.checkbox-label-wrap-inline:not(:last-child),
+	.radio-label-wrap-inline:not(:last-child) {
+		margin-inline-end: var(--fluid-8);
+	}
+
+	/* These are not actual <label> elements but the <span> label copy elements */
+	.checkbox-label-copy,
+	.radio-label-copy,
+	.checkbox-label,
+	.radio-label {
+		display: inline-flex;
+		position: relative;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.checkbox-label-copy-small,
+	.radio-label-copy-small {
+		font-size: var(--agnostic-small); /* 0.875rem */
+	}
+
+	.checkbox-label-copy-large,
+	.radio-label-copy-large {
+		font-size: calc(var(--agnostic-body) + 2px); /* 1rem + 2px (~18px) */
+	}
+
+	/* The checkmark itself */
+	.checkbox-label::after {
+		content: '';
+		position: absolute;
+		left: var(--fluid-6);
+		top: 1px;
+		width: var(--fluid-6);
+		height: var(--fluid-12);
+		border: solid var(--agnostic-light);
+		border-width: 0 var(--fluid-2) var(--fluid-2) 0;
+		transform-origin: center center;
+		transform: rotate(40deg) scale(0);
+		transition-property: border, background-color, transform;
+		transition-duration: var(--agnostic-timing-fast);
+		transition-timing-function: ease-in-out;
+	}
+
+	.checkbox-label::before,
+	.radio-label::before {
+		content: '';
+		display: inline-block;
+		margin-inline-end: var(--agnostic-checkbox-spacing-end, 0.75rem);
+		transition: var(--agnostic-timing-fast) ease-out all;
+	}
+
+	/* Since we build up the radio size outwardly, it's naturally larger then the checkboxes
+     so we add a multiplyer to even those out initially */
+	.checkbox-label::before {
+		border: 2px solid var(--agnostic-checkbox-border-color, var(--agnostic-gray-light));
+		width: var(--fluid-16);
+		height: var(--fluid-16);
+		transition: box-shadow var(--agnostic-timing-fast) ease-out;
+	}
+
+	.radio-label::before {
+		width: var(--fluid-14);
+		height: var(--fluid-14);
+		vertical-align: calc(-1 * var(--fluid-2));
+		border-radius: 50%;
+		border: var(--fluid-2) solid var(--agnostic-checkbox-light, var(--agnostic-light));
+		box-shadow: 0 0 0 var(--fluid-2)
+			var(--agnostic-checkbox-border-color, var(--agnostic-gray-light));
+		transition: box-shadow var(--agnostic-timing-fast) ease-out;
+	}
+
+	@media (prefers-reduced-motion), (update: slow) {
+		.checkbox-label::after,
+		.checkbox-label::before,
+		.radio-label::before {
+			transition-duration: 0.001ms !important;
+		}
+	}
+
+	.checkbox-label-small::after {
+		left: calc(1.25 * var(--fluid-4));
+		top: 0;
+	}
+
+	.checkbox-label-small::before {
+		width: var(--fluid-14);
+		height: var(--fluid-14);
+	}
+
+	.radio-label-small::before {
+		width: var(--fluid-12);
+		height: var(--fluid-12);
+	}
+
+	.checkbox-label-large::after {
+		left: calc(1.75 * var(--fluid-4));
+	}
+
+	.checkbox-label-large::before {
+		width: var(--fluid-18);
+		height: var(--fluid-18);
+	}
+
+	.radio-label-large::before {
+		width: var(--fluid-16);
+		height: var(--fluid-16);
+	}
+
+	/* the checked style using the :checked pseudo class */
+	.radio:checked + .radio-label::before {
+		background: var(--agnostic-checkbox-fill-color, #08a880);
+		box-shadow: 0 0 0 var(--fluid-2)
+			var(--agnostic-checkbox-border-color, var(--agnostic-gray-light));
+	}
+
+	.radio:focus + .radio-label::before {
+		/* stylelint-disable-next-line max-line-length */
+		box-shadow:
+			0 0 0 var(--fluid-2) var(--agnostic-checkbox-border-color, var(--agnostic-gray-light)),
+			0 0 0 calc(1.5 * var(--fluid-2)) var(--agnostic-light),
+			0 0 0 calc(2.25 * var(--fluid-2)) var(--agnostic-focus-ring-color);
+	}
+
+	.checkbox:focus + .checkbox-label::before {
+		box-shadow: 0 0 0 var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-color);
+
+		/* Needed for High Contrast mode */
+		/* stylelint-disable-next-line max-line-length */
+		outline: var(--agnostic-focus-ring-outline-width) var(--agnostic-focus-ring-outline-style)
+			var(--agnostic-focus-ring-outline-color);
+	}
+
+	.checkbox:checked + .checkbox-label::after {
+		transform: rotate(40deg) scale(1);
+	}
+
+	.checkbox:checked + .checkbox-label::before {
+		background: var(--agnostic-checkbox-fill-color, #08a880);
+		border: 2px solid var(--agnostic-checkbox-fill-color, #08a880);
+	}
+
+	/**
+      * Consumer styles <legend> themselves, and can opt to use the .screenreader-only from
+      * utilities.css if they're design requires it.
+      */
+	.checkbox-group-hidden,
+	.radio-group-hidden {
+		border: 0;
+		margin-block-start: 0;
+		margin-inline-start: 0;
+		margin-inline-end: 0;
+		margin-block-end: 0;
+		padding-block-start: 0;
+		padding-inline-start: 0;
+		padding-inline-end: 0;
+		padding-block-end: 0;
+	}
+
+	/* Targets both the label container and the span label that is used
+    to style the custom radio / checkbox. Note it does NOT target the input
+    itself. */
+	.checkbox[disabled] ~ .checkbox-label-copy,
+	.radio[disabled] ~ .radio-label-copy,
+	.checkbox-label-wrap[class='disabled'],
+	.radio-label-wrap[class='disabled'],
+	.checkbox-label-wrap-inline[class='disabled'],
+	.radio-label-wrap-inline[class='disabled'] {
+		color: var(--agnostic-input-disabled-color, var(--agnostic-disabled-color)) !important;
+		appearance: none !important;
+		box-shadow: none !important;
+		cursor: not-allowed !important;
+		opacity: 80% !important;
+	}
+
+	.choice-input-error {
+		color: var(--agnostic-input-error-color, var(--agnostic-error));
+	}
+
+	@media screen and (-ms-high-contrast: active) {
+		/* High contrast mode outline hacks */
+		.checkbox-label-wrap[class='disabled'],
+		.radio-label-wrap[class='disabled'],
+		.checkbox-label-wrap-inline[class='disabled'],
+		.radio-label-wrap-inline[class='disabled'] {
+			outline: 2px solid transparent;
+			outline-offset: -2px;
+		}
+	}
+</style>

package/dist/components/form/ChoiceInput.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { ChoiceInputOption, ChoiceInputSize, ChoiceInputType, HtmlParts } from './utils.js';
+declare const ChoiceInput: import("svelte").Component<Partial<{
+    isSkinned: boolean;
+    isFieldset: boolean;
+    isInline: boolean;
+    isDisabled: boolean;
+    isInvalid: boolean;
+    options: ChoiceInputOption[];
+    disabledOptions: string[];
+    checkedOptions: string[];
+    type: ChoiceInputType;
+    legendLabel: string;
+    size: ChoiceInputSize;
+    checked: string[];
+} & HtmlParts>, {}, "">;
+type ChoiceInput = ReturnType<typeof ChoiceInput>;
+export default ChoiceInput;

package/dist/components/form/Input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { cn } from '../../utils.js';
 	import type { Snippet } from 'svelte';
-	import type { LabelSize, Type } from './Input.js';
+	import type { LabelSize, Type } from './utils.ts';
 
 	interface Props{
 		label: string;

package/dist/components/form/Input.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { LabelSize, Type } from './Input.js';
+import type { LabelSize, Type } from './utils.ts';
 declare const Input: import("svelte").Component<Partial<{
     label: string;
     labelSize: LabelSize;

package/dist/components/form/utils.d.ts

@@ -0,0 +1,14 @@
+export type Type = 'text' | 'textarea' | 'email' | 'search' | 'password' | 'tel' | 'number' | 'url' | 'month' | 'time' | 'week' | 'date' | 'datetime-local' | 'color';
+export type LabelSize = 'small' | 'large' | '';
+export interface HtmlParts {
+    id: string;
+    name: string;
+    css: string;
+}
+export type ChoiceInputOption = {
+    name: string;
+    value: string;
+    label: string;
+};
+export type ChoiceInputType = "checkbox" | "radio";
+export type ChoiceInputSize = "small" | "large" | "";

package/dist/components/utils.d.ts

@@ -0,0 +1,3 @@
+export interface Component {
+    css: string;
+}

package/dist/components/utils.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -21,5 +21,6 @@ export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte
 export { default as Button } from './components/form/Button.svelte';
 export { default as Input } from './components/form/Input.svelte';
 export { default as Switch } from './components/form/Switch.svelte';
+export { default as ChoiceInput } from './components/form/ChoiceInput.svelte';
 export { default as Markdown } from './components/content/Markdown.svelte';
 export { type BlogPost, listAllPosts, importPost } from './components/blog/blog.js';

package/dist/index.js

@@ -38,6 +38,7 @@ export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte
 export { default as Button } from './components/form/Button.svelte';
 export { default as Input } from './components/form/Input.svelte';
 export { default as Switch } from './components/form/Switch.svelte';
+export { default as ChoiceInput } from './components/form/ChoiceInput.svelte';
 /*
  * Content
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.0.3",
+	"version": "4.1.0",
 	"watch": {
 		"build": {
 			"patterns": [

package/dist/components/form/Input.d.ts

@@ -1,2 +0,0 @@
-export type Type = 'text' | 'textarea' | 'email' | 'search' | 'password' | 'tel' | 'number' | 'url' | 'month' | 'time' | 'week' | 'date' | 'datetime-local' | 'color';
-export type LabelSize = 'small' | 'large' | '';