@rei/cedar 16.3.0 → 17.0.0-alpha.0

package/dist/components/filmstrip/CdrFilmstripEngine.vue.mjs

@@ -1,9 +1,6 @@
-import s from "./CdrFilmstripEngine.vue2.mjs";
-import o from "./styles/CdrFilmstrip.module.scss.mjs";
-import t from "../../_virtual/_plugin-vue_export-helper.mjs";
-const r = {
-  $style: o
-}, c = /* @__PURE__ */ t(s, [["__cssModules", r]]);
-export {
-  c as default
-};
+import e from "../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./CdrFilmstripEngine.vue_vue_type_script_setup_true_lang.mjs";
+import n from "./styles/CdrFilmstrip.module.scss_vue_type_style_index_0_src_true_lang.module.scss.mjs";
+var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
+//#endregion
+export { r as default };

package/dist/components/filmstrip/CdrFilmstripEngine.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,155 @@
+import e from "../../utils/mapClasses.mjs";
+import t from "../button/CdrButton.vue.mjs";
+import n from "../icon/comps/caret-left.vue.mjs";
+import r from "../icon/comps/caret-right.vue.mjs";
+import i from "../surfaceScroll/CdrSurfaceScroll.vue.mjs";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as ee, createVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, normalizeStyle as m, onMounted as h, onUnmounted as g, openBlock as _, ref as v, renderList as y, renderSlot as b, resolveDynamicComponent as te, unref as x, useAttrs as S, useCssModule as C, withCtx as w, withKeys as T, withModifiers as ne } from "vue";
+import { useDebounceFn as E, useElementHover as D, useResizeObserver as O } from "@vueuse/core";
+//#region src/components/filmstrip/CdrFilmstripEngine.vue?vue&type=script&setup=true&lang.ts
+var k = ["id", "data-ui"], re = ["id", "data-ui"], A = "cdr-filmstrip", j = /* @__PURE__ */ d({
+	name: "CdrFilmstripEngine",
+	__name: "CdrFilmstripEngine",
+	props: {
+		id: { default: "" },
+		description: { default: "" },
+		dataUi: { default: A },
+		isShowingArrows: {
+			type: Boolean,
+			default: !0
+		},
+		frames: { default: () => [] },
+		framesToShow: { default: 5 },
+		framesToScroll: { default: 4 },
+		framesGap: { default: 0 },
+		frameExtra: { default: .25 },
+		focusSelector: { default: ":first-child" },
+		viewportTabindex: { default: "-1" }
+	},
+	emits: [
+		"arrowClick",
+		"scrollNavigate",
+		"ariaMessage"
+	],
+	setup(d, { emit: j }) {
+		let M = C(), N = d, P = S().class || "", F = j, I = v(""), L = v(null), R = v(null), z = o(() => L.value?.viewportRef), B = v(null), V = v(0), H = v(0), U = v(0), W = D(R), G = v(!1), K = o(() => {
+			let e = N.framesToShow * N.framesGap;
+			return (V.value - e) / (N.framesToShow + N.frameExtra);
+		}), q = o(() => ({
+			"--frames-gap": N.framesGap,
+			"--frame-width": K.value,
+			"--frame-extra": N.frameExtra
+		})), J = o(() => {
+			let t = H.value === 0, i = H.value >= N.frames.length - N.framesToShow;
+			return ["left", "right"].map((a) => {
+				let o = a === "left" ? !t : !i;
+				return {
+					direction: a,
+					icon: a === "left" ? n : r,
+					attributes: {
+						"data-ui": `${A}__arrow--${a}`,
+						class: [
+							e(M, `${A}__arrow`, `${A}__arrow--${a}`, o ? "" : `${A}__arrow--disabled`),
+							P ? `${P}__arrow` : null,
+							P ? `${P}__arrow--${a}` : null,
+							o ? "" : P && `${A}__arrow--disabled`
+						].filter(Boolean).join(" "),
+						"aria-label": `${a === "right" ? "Next" : "Previous"} Frame`,
+						"aria-controls": `${N.id}-frames`,
+						tabindex: 0,
+						size: "large",
+						disabled: !o
+					}
+				};
+			});
+		}), Y = (e) => K.value * e + N.framesGap * e, ie = (e) => {
+			let t = Y(e), n = z.value?.viewportElement?.scrollLeft ?? 0;
+			z.value?.viewportElement?.scrollBy({
+				left: t - n,
+				behavior: "smooth"
+			});
+		}, X = (e, t) => {
+			F("arrowClick", {
+				event: e,
+				direction: t
+			});
+			let n = t === "left" ? -N.framesToScroll : N.framesToScroll, r = H.value + n;
+			H.value = Math.max(0, Math.min(r, N.frames.length - 1)), G.value = !0, ie(H.value);
+		}, Z = E(() => {
+			let e = N.frames.length, t = Math.max(1, H.value + 1), n = Math.min(e, t + N.framesToShow - 1);
+			I.value = N.framesToShow === 1 ? `Now showing frame ${t} of ${e}` : `Now showing frames ${t} through ${n} of ${e}`, F("ariaMessage", I.value);
+		}, 300), ae = (e) => {
+			let t = e.currentTarget;
+			if (!t || !e.relatedTarget || !t.contains(e.relatedTarget)) {
+				let e = N.frames.length, t = Math.max(1, H.value + 1), n = Math.min(e, t + N.framesToShow - 1);
+				N.framesToShow === 1 ? I.value = `Showing frame ${t} of ${e}. Use left and right arrow keys to navigate.` : I.value = `Showing frames ${t} through ${n} of ${e}. Use left and right arrow keys to navigate.`, F("ariaMessage", I.value);
+			}
+		};
+		function Q(e, t) {
+			if (e.preventDefault(), G.value = !0, t === "left" ? U.value = U.value <= 0 ? N.frames.length - 1 : U.value - 1 : U.value = U.value >= N.frames.length - 1 ? 0 : U.value + 1, B.value) {
+				let e = B.value[U.value].querySelector(N.focusSelector);
+				e && e.focus();
+			}
+		}
+		let $ = E((e) => {
+			let t = e.target.scrollLeft, n = N.frames.map((e, t) => Y(t)), r = n.findIndex((e) => Math.abs(e - t) === Math.min(...n.map((e) => Math.abs(e - t))));
+			r !== H.value && (H.value = r, Z()), G.value || F("scrollNavigate", {
+				event: e,
+				index: H.value
+			}), G.value = !1;
+		}, 100), { stop: oe } = O(R, (e) => {
+			e.forEach((e) => {
+				V.value = e.contentRect.width;
+			});
+		});
+		return h(() => {
+			let e = z.value?.viewportElement;
+			e && e.addEventListener("scroll", $), V.value = R.value?.offsetWidth ?? 0;
+		}), g(() => {
+			let e = z.value?.viewportElement;
+			e && e.removeEventListener("scroll", $), oe();
+		}), (n, r) => (_(), l("div", {
+			id: d.id,
+			ref_key: "containerRef",
+			ref: R,
+			"data-ui": d.dataUi,
+			style: m(q.value),
+			class: p(x(M)[A]),
+			onFocusin: ae
+		}, [u(i, {
+			ref_key: "surfaceScrollRef",
+			ref: L,
+			"viewport-props": {
+				"aria-label": d.description || `${d.frames.length} items`,
+				tabindex: d.viewportTabindex
+			},
+			"scrollbar-props": { orientation: "horizontal" }
+		}, {
+			default: w(() => [ee("ul", {
+				id: `${d.id}-frames`,
+				class: p([x(e)(x(M), `${A}__frames`), x(P) && `${x(P)}__frames`]),
+				"data-ui": `${A}__frames`
+			}, [(_(!0), l(a, null, y(d.frames, (t, i) => (_(), l("li", {
+				key: t.key,
+				ref_for: !0,
+				ref_key: "framesItemsRef",
+				ref: B,
+				class: p([x(e)(x(M), `${A}__frame`), x(P) ? `${x(P)}__frame` : null]),
+				onKeydown: [r[0] ||= T((e) => Q(e, "right"), ["right"]), r[1] ||= T((e) => Q(e, "left"), ["left"])]
+			}, [b(n.$slots, "frame", f({ index: i }, { ref_for: !0 }, t.props, { tabindex: i === U.value ? "0" : "-1" }))], 34))), 128))], 10, re)]),
+			_: 3
+		}, 8, ["viewport-props"]), (_(!0), l(a, null, y(J.value, ({ direction: e, attributes: r, icon: i }) => b(n.$slots, "arrow", f({ ref_for: !0 }, {
+			attributes: r,
+			direction: e,
+			icon: i
+		}, { onClick: (t) => X(t, e) }), () => [x(W) && N.isShowingArrows ? (_(), s(t, f({
+			key: e,
+			"icon-only": !0,
+			"with-background": !0
+		}, { ref_for: !0 }, r, { onClick: ne((t) => X(t, e), ["prevent"]) }), {
+			icon: w(() => [(_(), s(te(i)))]),
+			_: 2
+		}, 1040, ["onClick"])) : c("", !0)])), 256))], 46, k));
+	}
+});
+//#endregion
+export { j as default };

package/dist/components/filmstrip/interfaces.d.ts

@@ -0,0 +1,151 @@
+import { Component, Ref } from 'vue';
+/**
+ * @template Props
+ * @typedef {object} CdrFilmstripFrame
+ * @property {string} key - The unique key for the frame.
+ * @property {Props} props - Props or data associated with the frame.
+ */
+export interface CdrFilmstripFrame<Props = Record<string, unknown>> {
+    key: string;
+    props: Props;
+}
+/**
+ * @typedef {object} CdrFilmstripEngine
+ * @property {string} [id] - Unique ID for targeting or testing.
+ * @property {string} [description] - ARIA description for screen readers.
+ * @property {string} [dataUi] - Data attribute for analytics or test hooks.
+ * @property {boolean} [isShowingArrows] - Whether navigation arrows should be visible.
+ * @property {CdrFilmstripFrame[]} [frames] - Array of filmstrip frames.
+ * @property {number} [framesToShow] - Frames visible at once.
+ * @property {number} [framesToScroll] - Frames to scroll on arrow click.
+ * @property {number} [framesGap] - Pixel gap between frames.
+ * @property {number} [frameExtra] - Extra width factor for layout tuning.
+ * @property {string} [focusSelector] - Selector for initial focusable frame.
+ * @property {string} [viewportTabindex] - Tabindex value for scroll viewport.
+ */
+export interface CdrFilmstripEngine {
+    id?: string;
+    description?: string;
+    dataUi?: string;
+    isShowingArrows?: boolean;
+    frames?: CdrFilmstripFrame[];
+    framesToShow?: number;
+    framesToScroll?: number;
+    framesGap?: number;
+    frameExtra?: number;
+    focusSelector?: string;
+    viewportTabindex?: string;
+}
+/**
+ * @template T
+ * @typedef {object} CdrFilmstrip
+ * @property {CdrFilmstripAdapter<T>} adapter - Adapter function to build a filmstrip config.
+ * @property {T} model - Model data passed into the adapter.
+ */
+export interface CdrFilmstrip<T> {
+    adapter: CdrFilmstripAdapter<T>;
+    model: T;
+}
+/**
+ * @template T
+ * @typedef {object} CdrFilmstripConfig
+ * @property {Component} component - Component used to render each frame.
+ * @property {CdrFilmstripFrame<T>[]} frames - Array of frame definitions.
+ * @property {string} filmstripId - Unique ID for the filmstrip instance.
+ * @property {string} description - Textual description for screen readers.
+ * @property {Record<string, unknown>} [dataAttributes] - Optional HTML data attributes.
+ * @property {number} [framesGap] - Pixel gap between frames.
+ * @property {number} [framesToShow] - Count of visible frames.
+ * @property {boolean} [useDefaultResizeStrategy] - Whether to auto-resize based on container.
+ * @property {string} [focusSelector] - CSS selector for focus management.
+ */
+export interface CdrFilmstripConfig<T = Record<string, unknown>> {
+    component: Component;
+    frames: CdrFilmstripFrame<T>[];
+    filmstripId: string;
+    description: string;
+    dataAttributes?: Record<string, unknown>;
+    framesGap?: number;
+    framesToShow?: number;
+    useDefaultResizeStrategy?: boolean;
+    focusSelector?: string;
+}
+/**
+ * @template T
+ * @typedef {object} CdrFilmstripArrowClickPayload
+ * @property {'left'|'right'} direction - Direction of navigation.
+ * @property {Event} event - The click event.
+ * @property {T} [model] - Optional model reference.
+ */
+export interface CdrFilmstripArrowClickPayload<T = Record<string, unknown>> {
+    direction: 'left' | 'right';
+    event: Event;
+    model?: T;
+}
+/**
+ * @template T
+ * @typedef {object} CdrFilmstripScrollPayload
+ * @property {number} index - Index of the frame scrolled into view.
+ * @property {Event} event - The scroll event.
+ * @property {T} [model] - Optional model reference.
+ */
+export interface CdrFilmstripScrollPayload<T = Record<string, unknown>> {
+    index: number;
+    event: Event;
+    model?: T;
+}
+/**
+ * @template T
+ * @typedef {object} CdrFilmstripResizePayload
+ * @property {Ref<number>} framesToShow - Updated visible frames.
+ * @property {Ref<number>} framesToScroll - Updated scroll delta.
+ * @property {T} [model] - Optional model reference.
+ */
+export interface CdrFilmstripResizePayload<T = Record<string, unknown>> {
+    framesToShow: Ref<number>;
+    framesToScroll: Ref<number>;
+    model?: T;
+}
+/**
+ * @typedef {object} CdrFilmstripArrow
+ * @property {'left'|'right'} direction - Direction the arrow points.
+ * @property {Component} icon - Icon component.
+ * @property {object} attributes - DOM attributes for the arrow.
+ * @property {string} attributes.data-ui
+ * @property {string} attributes.class
+ * @property {string} attributes.aria-label
+ * @property {string} attributes.aria-controls
+ * @property {number} attributes.tabindex
+ * @property {string} attributes.size
+ * @property {boolean} attributes.disabled
+ */
+export interface CdrFilmstripArrow {
+    direction: 'left' | 'right';
+    icon: Component;
+    attributes: {
+        'data-ui': string;
+        class: string;
+        'aria-label': string;
+        'aria-controls': string;
+        tabindex: number;
+        size: string;
+        disabled: boolean;
+    };
+}
+/**
+ * @typedef {function} CdrFilmstripEventEmitter
+ * @param {string} event - Name of the event.
+ * @param {unknown} [payload] - Optional data.
+ */
+export interface CdrFilmstripEventEmitter {
+    (event: string, payload?: unknown): void;
+}
+/**
+ * @template T
+ * @typedef {function} CdrFilmstripAdapter
+ * @param {T} modelData - Raw model input.
+ * @returns {CdrFilmstripConfig<T>} Filmstrip configuration.
+ */
+export interface CdrFilmstripAdapter<T> {
+    (modelData: unknown): CdrFilmstripConfig<T>;
+}

package/dist/components/filmstrip/styles/CdrFilmstrip.module.scss_vue_type_style_index_0_src_true_lang.module.scss.mjs

@@ -0,0 +1,12 @@
+//#region src/components/filmstrip/styles/CdrFilmstrip.module.scss?vue&type=style&index=0&src=true&lang.module.scss
+var e = {
+	"cdr-filmstrip": "cdr-filmstrip_17-0-0-alpha-0",
+	"cdr-filmstrip__frames": "cdr-filmstrip__frames_17-0-0-alpha-0",
+	"cdr-filmstrip__frame": "cdr-filmstrip__frame_17-0-0-alpha-0",
+	"cdr-filmstrip__arrow": "cdr-filmstrip__arrow_17-0-0-alpha-0",
+	"cdr-filmstrip__arrow--left": "cdr-filmstrip__arrow--left_17-0-0-alpha-0",
+	"cdr-filmstrip__arrow--right": "cdr-filmstrip__arrow--right_17-0-0-alpha-0",
+	"cdr-filmstrip__sr-only": "cdr-filmstrip__sr-only_17-0-0-alpha-0"
+};
+//#endregion
+export { e as default };

package/dist/components/formError/CdrFormError.vue.d.ts

@@ -0,0 +1,20 @@
+import { CdrFormErrorProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        error(props: Record<string, never>): any;
+    }> & {
+        error(props: Record<string, never>): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<CdrFormErrorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CdrFormErrorProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/formError/CdrFormError.vue.mjs

@@ -1,9 +1,6 @@
-import o from "./CdrFormError.vue2.mjs";
-import r from "./styles/CdrFormError.module.scss.mjs";
-import s from "../../_virtual/_plugin-vue_export-helper.mjs";
-const t = {
-  $style: r
-}, f = /* @__PURE__ */ s(o, [["__cssModules", t]]);
-export {
-  f as default
-};
+import e from "../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./CdrFormError.vue_vue_type_script_setup_true_lang.mjs";
+import n from "./styles/CdrFormError.module.scss_vue_type_style_index_0_src_true_lang.module.scss.mjs";
+var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
+//#endregion
+export { r as default };

package/dist/components/formError/CdrFormError.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,25 @@
+import e from "../icon/comps/error-stroke.vue.mjs";
+import { createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, createVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderSlot as l, toDisplayString as u, unref as d, useCssModule as f, vShow as p, withDirectives as m } from "vue";
+//#region src/components/formError/CdrFormError.vue?vue&type=script&setup=true&lang.ts
+var h = ["role"], g = { key: 0 }, _ = "cdr-form-error", v = "cdr-form-error__icon", y = "cdr-form-error--active", b = /* @__PURE__ */ o({
+	name: "CdrFormError",
+	__name: "CdrFormError",
+	props: {
+		error: { type: [Boolean, String] },
+		role: {}
+	},
+	setup(o) {
+		let b = f();
+		return (f, x) => (c(), n("div", { class: s([d(b)[_], o.error && d(b)[y]]) }, [m(r("span", { class: s(d(b)[v]) }, [a(e, {
+			size: "small",
+			"inherit-color": ""
+		})], 2), [[p, o.error]]), r("div", {
+			role: o.role || "status",
+			"aria-atomic": "true",
+			"aria-relevant": "all",
+			style: { display: "inline-block" }
+		}, [o.error ? (c(), n("div", g, [l(f.$slots, "error", {}, () => [i(u(o.error), 1)])])) : t("", !0)], 8, h)], 2));
+	}
+});
+//#endregion
+export { b as default };

package/dist/components/formError/styles/CdrFormError.module.scss_vue_type_style_index_0_src_true_lang.module.scss.mjs

@@ -0,0 +1,8 @@
+//#region src/components/formError/styles/CdrFormError.module.scss?vue&type=style&index=0&src=true&lang.module.scss
+var e = {
+	"cdr-form-error": "cdr-form-error_17-0-0-alpha-0",
+	"cdr-form-error__icon": "cdr-form-error__icon_17-0-0-alpha-0",
+	"cdr-form-error--active": "cdr-form-error--active_17-0-0-alpha-0"
+};
+//#endregion
+export { e as default };

package/dist/components/formError/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * CdrFormError component properties
+ */
+export type CdrFormErrorProps = {
+    /** Error message to display, can be boolean or string */
+    error?: boolean | string;
+    /** Sets the ARIA role attribute for the error message container */
+    role?: string;
+};

package/dist/components/formGroup/CdrFormGroup.vue.d.ts

@@ -0,0 +1,33 @@
+import { CdrFormGroupProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** Overrides CdrFormGroup label/legend. Should be a text element */
+        label(props: Record<string, never>): any;
+        /** CdrFormGroup content (form elements) */
+        default(props: Record<string, never>): any;
+        error(props: Record<string, never>): any;
+    }> & {
+        /** Overrides CdrFormGroup label/legend. Should be a text element */
+        label(props: Record<string, never>): any;
+        /** CdrFormGroup content (form elements) */
+        default(props: Record<string, never>): any;
+        error(props: Record<string, never>): any;
+    };
+    refs: {};
+    rootEl: HTMLFieldSetElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<CdrFormGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CdrFormGroupProps> & Readonly<{}>, {
+    error: boolean | string;
+    label: string;
+    required: boolean;
+    optional: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLFieldSetElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/formGroup/CdrFormGroup.vue.mjs

@@ -1,9 +1,6 @@
-import o from "./CdrFormGroup.vue2.mjs";
-import s from "./styles/CdrFormGroup.module.scss.mjs";
-import r from "../../_virtual/_plugin-vue_export-helper.mjs";
-const t = {
-  $style: s
-}, f = /* @__PURE__ */ r(o, [["__cssModules", t]]);
-export {
-  f as default
-};
+import e from "../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./CdrFormGroup.vue_vue_type_script_setup_true_lang.mjs";
+import n from "./styles/CdrFormGroup.module.scss_vue_type_style_index_0_src_true_lang.module.scss.mjs";
+var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
+//#endregion
+export { r as default };

package/dist/components/formGroup/CdrFormGroup.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,65 @@
+import e from "../../utils/mapClasses.mjs";
+import t from "../../utils/uid.mjs";
+import n from "../formError/CdrFormError.vue.mjs";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, normalizeClass as u, openBlock as d, renderSlot as f, toDisplayString as p, unref as m, useCssModule as h, withCtx as g } from "vue";
+//#region src/components/formGroup/CdrFormGroup.vue?vue&type=script&setup=true&lang.ts
+var _ = [
+	"disabled",
+	"aria-invalid",
+	"aria-errormessage",
+	"aria-describedby"
+], v = {
+	key: 0,
+	"aria-label": "required"
+}, y = "cdr-form-group", b = /* @__PURE__ */ l({
+	name: "CdrFormGroup",
+	__name: "CdrFormGroup",
+	props: {
+		id: {},
+		label: { default: "" },
+		error: {
+			type: [Boolean, String],
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		optional: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: { type: Boolean }
+	},
+	setup(l) {
+		let b = l, x = b.id ? b.id : t(), S = h(), C = r(() => b.error ? "cdr-form-group--error" : ""), w = r(() => b.disabled ? "cdr-form-group--disabled" : "");
+		return (t, r) => (d(), o("fieldset", {
+			class: u(m(e)(m(S), y, w.value)),
+			disabled: l.disabled,
+			"aria-invalid": !!l.error,
+			"aria-errormessage": l.error ? `${m(x)}-error` : void 0,
+			"aria-describedby": l.error ? `${m(x)}-error` : void 0
+		}, [
+			s("legend", null, [
+				f(t.$slots, "label", {}, () => [c(p(l.label), 1)]),
+				l.required ? (d(), o("span", v, " * ")) : a("", !0),
+				l.optional && !l.required ? (d(), o("span", {
+					key: 1,
+					class: u(m(S)["cdr-form-group__optional"])
+				}, " (optional) ", 2)) : a("", !0)
+			]),
+			s("div", { class: u(m(e)(m(S), "cdr-form-group__wrapper", C.value)) }, [f(t.$slots, "default")], 2),
+			l.error ? (d(), i(n, {
+				key: 0,
+				error: l.error,
+				id: `${m(x)}-error`,
+				"aria-live": "polite"
+			}, {
+				error: g(() => [f(t.$slots, "error")]),
+				_: 3
+			}, 8, ["error", "id"])) : a("", !0)
+		], 10, _));
+	}
+});
+//#endregion
+export { b as default };

package/dist/components/formGroup/styles/CdrFormGroup.module.scss_vue_type_style_index_0_src_true_lang.module.scss.mjs

@@ -0,0 +1,14 @@
+//#region src/components/formGroup/styles/CdrFormGroup.module.scss?vue&type=style&index=0&src=true&lang.module.scss
+var e = {
+	"cdr-form-error": "cdr-form-error_17-0-0-alpha-0",
+	"cdr-form-error__icon": "cdr-form-error__icon_17-0-0-alpha-0",
+	"cdr-form-error--active": "cdr-form-error--active_17-0-0-alpha-0",
+	"cdr-form-group": "cdr-form-group_17-0-0-alpha-0",
+	"cdr-form-group--error": "cdr-form-group--error_17-0-0-alpha-0",
+	"cdr-form-group--disabled": "cdr-form-group--disabled_17-0-0-alpha-0",
+	"cdr-form-group__optional": "cdr-form-group__optional_17-0-0-alpha-0",
+	"cdr-form-group__required": "cdr-form-group__required_17-0-0-alpha-0",
+	"cdr-form-group__wrapper": "cdr-form-group__wrapper_17-0-0-alpha-0"
+};
+//#endregion
+export { e as default };

package/dist/components/formGroup/types.d.ts

@@ -0,0 +1,17 @@
+/**
+ * CdrFormGroup component properties
+ */
+export type CdrFormGroupProps = {
+    /** Custom ID that is mapped to the form error */
+    id?: string;
+    /** Sets the label/legend for the form group */
+    label?: string;
+    /** Sets the form group to an error state */
+    error?: boolean | string;
+    /** Adds required label to the form group */
+    required?: boolean;
+    /** Adds optional label to the form group */
+    optional?: boolean;
+    /** Renders form group in a disabled state */
+    disabled?: boolean;
+};

package/dist/components/fulfillmentTile/CdrFulfillmentTile.vue.d.ts

@@ -0,0 +1,45 @@
+import { CdrFulfillmentTileProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** Icon to display on the left of the header. */
+        'icon-left'(props: Record<string, never>): any;
+        /** Header content that is still visible during loading. */
+        header(props: Record<string, never>): any;
+        /** Icon to display on the right of the header. */
+        'icon-right'(props: Record<string, never>): any;
+        /** Default font size is a step down. Placed just below the header. */
+        body(props: Record<string, never>): any;
+        /** Footer content will be at the bottom of the component. */
+        footer(props: Record<string, never>): any;
+    }> & {
+        /** Icon to display on the left of the header. */
+        'icon-left'(props: Record<string, never>): any;
+        /** Header content that is still visible during loading. */
+        header(props: Record<string, never>): any;
+        /** Icon to display on the right of the header. */
+        'icon-right'(props: Record<string, never>): any;
+        /** Default font size is a step down. Placed just below the header. */
+        body(props: Record<string, never>): any;
+        /** Footer content will be at the bottom of the component. */
+        footer(props: Record<string, never>): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<CdrFulfillmentTileProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CdrFulfillmentTileProps> & Readonly<{}>, {
+    tag: import('../../lib').Tag;
+    role: string;
+    borderColor: import('../../lib').BorderColor | import('../surface/types').StateConfig<import('../../lib').BorderColor>;
+    borderStyle: import('../../lib').BorderStyle | import('../surface/types').StateConfig<import('../../lib').BorderStyle>;
+    borderWidth: import('../../lib').SpaceFixed | import('../surface/types').StateConfig<import('../../lib').SpaceFixed>;
+    borderRadius: import('../../lib').Radius | import('../surface/types').StateConfig<import('../../lib').Radius>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/fulfillmentTile/CdrFulfillmentTile.vue.mjs

@@ -1,9 +1,6 @@
-import s from "./CdrFulfillmentTile.vue2.mjs";
-import o from "./styles/CdrFulfillmentTitle.module.scss.mjs";
-import t from "../../_virtual/_plugin-vue_export-helper.mjs";
-const e = {
-  $style: o
-}, f = /* @__PURE__ */ t(s, [["__cssModules", e]]);
-export {
-  f as default
-};
+import e from "../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./CdrFulfillmentTile.vue_vue_type_script_setup_true_lang.mjs";
+import n from "./styles/CdrFulfillmentTitle.module.scss_vue_type_style_index_0_src_true_lang.module.scss.mjs";
+var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
+//#endregion
+export { r as default };