@functionalcms/svelte-components 4.10.27 → 4.10.28

package/dist/components/form/ChoiceInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../../utils.js';
+	import { Orientation } from '../Styling.ts';
 	import type { ChoiceInputOption, ChoiceInputSize, ChoiceInputType, HtmlParts } from './utils.js';
 
 	interface Props {
@@ -15,6 +16,7 @@
 		label: string;
 		size: ChoiceInputSize;
 		checked: string[];
+		orientation: Orientation;
 	}
 
 	let {
@@ -36,6 +38,7 @@
 		size = '',
 		// Provides bind:checked capabilities that consumer can use
 		checked = $bindable([]),
+		orientation = Orientation.DynamicRow,
 		...restProps
 	}: Partial<Props & HtmlParts> = $props();
 
@@ -99,36 +102,38 @@
 <div class="w-100">
 	<fieldset class={fieldsetClasses}>
 		<legend class={legendClasses}>{label}</legend>
-		{#each options as { 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}
+		<div class="flex {orientation}">
+			{#each options as { 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}
+		</div>
 	</fieldset>
 </div>
 
 <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.
-     */
+ * 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 */
@@ -152,7 +157,7 @@
 	}
 
 	/* Hiding technique from https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
-     */
+ */
 	.checkbox,
 	.radio {
 		position: absolute;
@@ -238,7 +243,7 @@
 	}
 
 	/* 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 */
+ 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);
@@ -328,9 +333,9 @@
 	}
 
 	/**
-      * Consumer styles <legend> themselves, and can opt to use the .screenreader-only from
-      * utilities.css if they're design requires it.
-      */
+  * 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;
@@ -345,8 +350,8 @@
 	}
 
 	/* 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. */
+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'],
@@ -374,4 +379,40 @@
 			outline-offset: -2px;
 		}
 	}
+
+	
+	.field-help,
+	.field-help-large,
+	.field-help-small,
+	.field-error,
+	.field-error-large,
+	.field-error-small,
+	.label-skin,
+	.label,
+	.input-addon-container,
+	.input-small,
+	.input-large,
+	.input-skin,
+	.input-underlined,
+	.input-underlined-bg,
+	.input {
+		color: var(--font-color, var(--dark));
+		font-family: var(--font-family-body);
+		font-weight: var(--font-weight, 300);
+		font-size: var(--font-size, 1rem);
+		line-height: var(--line-height, var(--fluid-20, 1.25rem));
+		width: 100%;
+		max-width: 100%;
+	}
+	.label {
+		display: inline-block;
+
+		/* Provided --input-vertical-pad isn't overriden we'll get 20px
+      label w/a 6px margin then a 38px input = 64 which is on the 8pt grid */
+		margin-block-start: 0;
+		margin-inline-start: 0;
+		margin-inline-end: 0;
+		margin-block-end: var(--input-label-pad, 0.375rem);
+		vertical-align: initial;
+	}
 </style>

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

@@ -1,3 +1,4 @@
+import { Orientation } from '../Styling.ts';
 import type { ChoiceInputOption, ChoiceInputSize, ChoiceInputType, HtmlParts } from './utils.js';
 declare const ChoiceInput: import("svelte").Component<Partial<{
     isSkinned: boolean;
@@ -12,6 +13,7 @@ declare const ChoiceInput: import("svelte").Component<Partial<{
     label: string;
     size: ChoiceInputSize;
     checked: string[];
+    orientation: Orientation;
 } & HtmlParts>, {}, "checked">;
 type ChoiceInput = ReturnType<typeof ChoiceInput>;
 export default ChoiceInput;

package/package.json

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