@rei/cedar 16.3.1 → 17.0.0-alpha.0

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

@@ -0,0 +1,70 @@
+import { Component } from 'vue';
+import { Space, Flow, StructureOption, QueryType } from '../../types/componentOptions';
+/**
+ * Generic key-value pair object allowing any property types
+ */
+export interface NameValuePair {
+    [key: string]: any;
+}
+/**
+ * Properties for foundational layout container using CSS Grid.
+ * Provides responsive grid configuration with flow, columns, rows, and gap options.
+ */
+export interface Layout {
+    /**
+     * Determines if the layout is in horizontal or vertical mode.
+     * @demoSelectMultiple false
+     * @values container, media
+     */
+    queryType?: QueryType;
+    /**
+     * Specifies the auto-placement behavior. This is translated to `grid-auto-flow`.
+     * @demoSelectMultiple false
+     * @values row, column
+     */
+    flow?: Flow;
+    /**
+     * Specifies how auto-generated tracks will be created. This is translated to either `grid-auto-columns` or `grid-auto-rows`, depending on flow.
+     */
+    flowValue?: string;
+    /**
+     * Determines the number of columns at various breakpoints
+     */
+    columns?: StructureOption;
+    /**
+     * Determines the number of rows at various breakpoints
+     */
+    rows?: StructureOption;
+    /**
+     * Specifies a gap based on the token options within Cedar.
+     * @demoSelectMultiple false
+     * @values zero, one-x, two-x, scale-4, scale-3--5
+     */
+    gap?: Space;
+    /**
+     * Specifies a row gap based on the token options within Cedar.
+     * @demoSelectMultiple false
+     * @values zero, one-x, two-x, scale-4, scale-3--5
+     */
+    rowGap?: Space;
+    /**
+     * Specifies a column gap based on the token options within Cedar.
+     * @demoSelectMultiple false
+     * @values zero, one-x, two-x, scale-4, scale-3--5
+     */
+    columnGap?: Space;
+    /**
+     * The component or HTML tag to render at the root level. Note: The component "CdrSurface" has special treatment and may be used in quotes.
+     */
+    as?: Component | string;
+    /** Additional properties allowed */
+    [key: string]: any;
+}
+/**
+ * CdrLayout component properties
+ * Foundational layout container using CSS Grid with responsive configuration
+ */
+export type CdrLayoutProps = Layout;
+export declare const cdrLayoutQueryTypeOptions: readonly ["container", "media"];
+export declare const cdrLayoutFlowOptions: readonly ["row", "column"];
+export declare const cdrLayoutGapOptions: readonly ["zero", "one-x", "two-x", "scale-4", "scale-3--5"];

package/dist/components/link/CdrLink.vue.d.ts

@@ -0,0 +1,27 @@
+import { CdrLinkProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** Readable text of the link */
+        default(props: Record<string, never>): any;
+    }> & {
+        /** Readable text of the link */
+        default(props: Record<string, never>): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<CdrLinkProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CdrLinkProps> & Readonly<{}>, {
+    tag: import('./types').CdrLinkTag;
+    inheritColor: boolean;
+    href: string;
+    modifier: import('../../lib').LinkModifier;
+}, {}, {}, {}, 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/link/CdrLink.vue.mjs

@@ -1,9 +1,6 @@
-import s from "./CdrLink.vue2.mjs";
-import o from "./styles/CdrLink.module.scss.mjs";
-import t from "../../_virtual/_plugin-vue_export-helper.mjs";
-const r = {
-  $style: o
-}, f = /* @__PURE__ */ t(s, [["__cssModules", r]]);
-export {
-  f as default
-};
+import e from "../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./CdrLink.vue_vue_type_script_setup_true_lang.mjs";
+import n from "./styles/CdrLink.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/link/CdrLink.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,44 @@
+import { computed as e, createBlock as t, defineComponent as n, mergeProps as r, openBlock as i, renderSlot as a, resolveDynamicComponent as o, unref as s, useAttrs as c, useCssModule as l, withCtx as u } from "vue";
+//#region src/components/link/CdrLink.vue?vue&type=script&setup=true&lang.ts
+var d = /* @__PURE__ */ n({
+	name: "CdrLink",
+	__name: "CdrLink",
+	props: {
+		tag: { default: "a" },
+		href: { default: "#" },
+		inheritColor: {
+			type: Boolean,
+			default: !1
+		},
+		modifier: { default: "" },
+		target: {},
+		rel: {}
+	},
+	setup(n) {
+		let d = n, f = l(), p = c(), m = f["cdr-link"], h = e(() => d.tag === "a" ? d.href : void 0), g = e(() => d.target === "_blank" ? d.rel || "noopener noreferrer" : d.rel), _ = e(() => {
+			let { class: e, ...t } = p;
+			return t;
+		}), v = (e) => e ? e.split(" ").map((e) => e.trim()).filter(Boolean).map((e) => f[`cdr-link--${e}`]).filter(Boolean) : [];
+		return (e, n) => (i(), t(o(d.tag), r({
+			class: [
+				s(m),
+				...v(d.modifier),
+				d.inheritColor && s(f)["cdr-link--inherit-color"],
+				...s(p).class ? [s(p).class] : []
+			],
+			href: h.value,
+			rel: g.value,
+			target: d.target
+		}, _.value), {
+			default: u(() => [a(e.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"class",
+			"href",
+			"rel",
+			"target"
+		]));
+	}
+});
+//#endregion
+export { d as default };

package/dist/components/link/styles/CdrLink.module.scss_vue_type_style_index_0_src_true_lang.module.scss.mjs

@@ -0,0 +1,9 @@
+//#region src/components/link/styles/CdrLink.module.scss?vue&type=style&index=0&src=true&lang.module.scss
+var e = {
+	"cdr-link": "cdr-link_17-0-0-alpha-0",
+	"cdr-link--standalone": "cdr-link--standalone_17-0-0-alpha-0",
+	"cdr-link--inherit-color": "cdr-link--inherit-color_17-0-0-alpha-0",
+	"cdr-link--neutral": "cdr-link--neutral_17-0-0-alpha-0"
+};
+//#endregion
+export { e as default };

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

@@ -0,0 +1,23 @@
+import { LinkModifier, LinkTag as SharedLinkTag } from '../../types/componentOptions';
+/**
+ * Valid HTML tag types for CdrLink component
+ */
+export type CdrLinkTag = SharedLinkTag;
+/**
+ * CdrLink component properties
+ * Links can be rendered as anchors or buttons with various styling options
+ */
+export type CdrLinkProps = {
+    /** Sets valid HTML element tag */
+    tag?: CdrLinkTag;
+    /** Sets value for anchors href property. Requires tag prop value to be `a`. */
+    href?: string;
+    /** Sets color and fill */
+    inheritColor?: boolean;
+    /** Modifies the style variant for this component. */
+    modifier?: LinkModifier;
+    /** @ignore */
+    target?: string;
+    /** @ignore */
+    rel?: string;
+};

package/dist/components/list/CdrList.vue.d.ts

@@ -0,0 +1,22 @@
+import { CdrListProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default(props: Record<string, never>): any;
+    }> & {
+        default(props: Record<string, never>): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<CdrListProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CdrListProps> & Readonly<{}>, {
+    tag: import('../../lib').ListTag;
+}, {}, {}, {}, 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/list/CdrList.vue.mjs

@@ -1,9 +1,6 @@
-import s from "./CdrList.vue2.mjs";
-import o from "./styles/CdrList.module.scss.mjs";
-import t from "../../_virtual/_plugin-vue_export-helper.mjs";
-const r = {
-  $style: o
-}, f = /* @__PURE__ */ t(s, [["__cssModules", r]]);
-export {
-  f as default
-};
+import e from "../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./CdrList.vue_vue_type_script_setup_true_lang.mjs";
+import n from "./styles/CdrList.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/list/CdrList.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,19 @@
+import { computed as e, createBlock as t, defineComponent as n, normalizeClass as r, openBlock as i, renderSlot as a, resolveDynamicComponent as o, unref as s, useCssModule as c, withCtx as l } from "vue";
+//#region src/components/list/CdrList.vue?vue&type=script&setup=true&lang.ts
+var u = "cdr-list", d = /* @__PURE__ */ n({
+	name: "CdrList",
+	__name: "CdrList",
+	props: {
+		tag: { default: "ul" },
+		modifier: {}
+	},
+	setup(n) {
+		let d = n, f = c(), p = e(() => d.modifier ? d.modifier.split(" ").map((e) => f[`${u}--${e}`]) : "");
+		return (e, c) => (i(), t(o(n.tag), { class: r([s(f)[u], p.value]) }, {
+			default: l(() => [a(e.$slots, "default")]),
+			_: 3
+		}, 8, ["class"]));
+	}
+});
+//#endregion
+export { d as default };

package/dist/components/list/styles/CdrList.module.scss_vue_type_style_index_0_src_true_lang.module.scss.mjs

@@ -0,0 +1,10 @@
+//#region src/components/list/styles/CdrList.module.scss?vue&type=style&index=0&src=true&lang.module.scss
+var e = {
+	"cdr-list": "cdr-list_17-0-0-alpha-0",
+	"cdr-list--compact": "cdr-list--compact_17-0-0-alpha-0",
+	"cdr-list--ordered": "cdr-list--ordered_17-0-0-alpha-0",
+	"cdr-list--unordered": "cdr-list--unordered_17-0-0-alpha-0",
+	"cdr-list--inline": "cdr-list--inline_17-0-0-alpha-0"
+};
+//#endregion
+export { e as default };

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

@@ -0,0 +1,10 @@
+import { ListTag } from '../../types/componentOptions';
+/**
+ * CdrList component properties
+ */
+export type CdrListProps = {
+    /** Sets list type and HTML element as "unordered" or "ordered" */
+    tag?: ListTag;
+    /** Modifies the style variant for this component */
+    modifier?: string;
+};

package/dist/components/mediaObject/CdrMediaObject.vue.d.ts

@@ -0,0 +1,64 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** Where the media should be placed. Should be a single node. */
+        media(props: Record<string, never>): any;
+        /** Where all content should be placed. Can be multiple nodes. */
+        content(props: Record<string, never>): any;
+    }> & {
+        /** Where the media should be placed. Should be a single node. */
+        media(props: Record<string, never>): any;
+        /** Where all content should be placed. Can be multiple nodes. */
+        content(props: Record<string, never>): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<import('./types').MediaObject>, {
+    align: string;
+    mediaPosition: string;
+    mediaWidth: string;
+    mediaHeight: string;
+    mediaCover: boolean;
+    overlay: boolean;
+    overlayRowAlign: string;
+    overlayColumnAlign: string;
+    contentPadding: string;
+    queryType: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<import('./types').MediaObject>, {
+    align: string;
+    mediaPosition: string;
+    mediaWidth: string;
+    mediaHeight: string;
+    mediaCover: boolean;
+    overlay: boolean;
+    overlayRowAlign: string;
+    overlayColumnAlign: string;
+    contentPadding: string;
+    queryType: string;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/mediaObject/CdrMediaObject.vue.mjs

@@ -1,9 +1,6 @@
-import s from "./CdrMediaObject.vue2.mjs";
-import o from "./styles/CdrMediaObject.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 "./CdrMediaObject.vue_vue_type_script_setup_true_lang.mjs";
+import n from "./styles/CdrMediaObject.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/mediaObject/CdrMediaObject.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,65 @@
+import e from "../../utils/mapClasses.mjs";
+import { modifyClassName as t } from "../../utils/buildClass.mjs";
+import { breakpoints as n, spacing as r } from "../../utils/styleTokens.mjs";
+import i from "../layout/CdrLayout.vue.mjs";
+import { getLayoutStyling as a } from "../../utils/mediaObject.mjs";
+import { computed as o, createBlock as s, createElementVNode as c, defineComponent as l, guardReactiveProps as u, normalizeProps as d, openBlock as f, renderSlot as p, useCssModule as m, withCtx as h } from "vue";
+//#region src/components/mediaObject/CdrMediaObject.vue?vue&type=script&setup=true&lang.ts
+var g = /* @__PURE__ */ l({
+	name: "CdrMediaObject",
+	__name: "CdrMediaObject",
+	props: {
+		queryType: { default: "media" },
+		flow: {},
+		flowValue: {},
+		columns: {},
+		rows: {},
+		gap: {},
+		rowGap: {},
+		columnGap: {},
+		as: {},
+		align: { default: "start" },
+		mediaPosition: { default: "left" },
+		mediaWidth: { default: "1fr" },
+		mediaHeight: { default: "auto" },
+		mediaCover: {
+			type: Boolean,
+			default: !1
+		},
+		overlay: {
+			type: Boolean,
+			default: !1
+		},
+		overlayRowAlign: { default: "start" },
+		overlayColumnAlign: { default: "start" },
+		contentPadding: { default: "zero" }
+	},
+	setup(l) {
+		let g = l, _ = m(), v = o(() => {
+			let i = "cdr-media-object", o = [i], s = {}, { align: c, mediaPosition: l, mediaWidth: u, mediaHeight: d, mediaCover: f, overlay: p, overlayRowAlign: m, overlayColumnAlign: h, contentPadding: v, ...y } = g, b = { ...y };
+			if (v !== "zero" && (typeof v == "string" ? s["--cdr-media-object-content-padding"] = r[v] : (o.push(t(i, "content-padding-mq")), n.forEach((e) => {
+				s[`--cdr-media-object-content-padding-${e}`] = r[v[e]];
+			}))), p) o.push(t(i, "overlay")), Object.assign(b, {
+				rows: "auto",
+				columns: "auto"
+			}), s["--cdr-media-object-row-align"] = m, s["--cdr-media-object-column-align"] = h, d === "auto" ? b.rows = "56cqw" : b.rows = d;
+			else {
+				let e = a(l, u, d);
+				Object.assign(s, e.inlineStyles), Object.assign(b, e.props), typeof l != "string" && o.push(t(i, "media-position-mq")), typeof c == "string" ? s["--cdr-media-object-align"] = c : (o.push(t(i, "align-mq")), n.forEach((e) => {
+					s[`--cdr-media-object-align-${e}`] = c[e];
+				})), f && o.push(t(i, "cover"));
+			}
+			return {
+				...b,
+				class: e(_, ...o) || void 0,
+				style: s
+			};
+		});
+		return (e, t) => (f(), s(i, d(u(v.value)), {
+			default: h(() => [c("div", null, [p(e.$slots, "media")]), c("div", null, [p(e.$slots, "content")])]),
+			_: 3
+		}, 16));
+	}
+});
+//#endregion
+export { g as default };

package/dist/components/mediaObject/styles/CdrMediaObject.module.scss_vue_type_style_index_0_src_true_lang.module.scss.mjs

@@ -0,0 +1,11 @@
+//#region src/components/mediaObject/styles/CdrMediaObject.module.scss?vue&type=style&index=0&src=true&lang.module.scss
+var e = {
+	"cdr-media-object": "cdr-media-object_17-0-0-alpha-0",
+	"cdr-media-object--align-mq": "cdr-media-object--align-mq_17-0-0-alpha-0",
+	"cdr-media-object--media-position-mq": "cdr-media-object--media-position-mq_17-0-0-alpha-0",
+	"cdr-media-object--content-padding-mq": "cdr-media-object--content-padding-mq_17-0-0-alpha-0",
+	"cdr-media-object--cover": "cdr-media-object--cover_17-0-0-alpha-0",
+	"cdr-media-object--overlay": "cdr-media-object--overlay_17-0-0-alpha-0"
+};
+//#endregion
+export { e as default };

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

@@ -0,0 +1,111 @@
+import { Component } from 'vue';
+import { Space, SpaceOption, Flow, StructureOption, QueryType, Position, Alignment, AlignmentValue, MediaMeasurement } from '../../types/componentOptions';
+/**
+ * Generic key-value pair object allowing any property types
+ */
+export interface NameValuePair {
+    [key: string]: any;
+}
+/**
+ * HtmlAttributes data object for allowing any HTML attribute
+ */
+export interface HtmlAttributes {
+    [key: string]: any;
+}
+/**
+ * Properties for MediaObject component layout configuration.
+ * Extends Layout with media-specific positioning and sizing options.
+ */
+export interface MediaObject {
+    /**
+     * @ignore
+     */
+    queryType?: QueryType;
+    /**
+     * Specifies the auto-placement behavior. This is translated to `grid-auto-flow`.
+     */
+    flow?: Flow;
+    /**
+     * Specifies how auto-generated tracks will be created.
+     */
+    flowValue?: string;
+    /**
+     * Determines the number of columns at various breakpoints
+     */
+    columns?: StructureOption;
+    /**
+     * Determines the number of rows at various breakpoints
+     */
+    rows?: StructureOption;
+    /**
+     * Specifies a gap based on the token options within Cedar.
+     */
+    gap?: Space;
+    /**
+     * Specifies a row gap based on the token options within Cedar.
+     */
+    rowGap?: Space;
+    /**
+     * Specifies a column gap based on the token options within Cedar.
+     */
+    columnGap?: Space;
+    /**
+     * The component or HTML tag to render at the root level.
+     */
+    as?: Component | string;
+    /**
+     * The alignment of the media and content along the x or y axis, depending on the layout. This can be an object with values for each Cedar breakpoint (xs, sm, md, lg).
+     * @values start, center, end
+     */
+    align?: Alignment;
+    /**
+     * The position of the media, in relation to the content. This can be an object with values for each Cedar breakpoint (xs, sm, md, lg).
+     * @demoSelectMultiple false
+     * @values top, right, bottom, left
+     */
+    mediaPosition?: Position;
+    /**
+     * The width of the column that media is placed within. This can be any CSS value. This can be an object with values for each Cedar breakpoint (xs, sm, md, lg).
+     * @values 1fr, auto, 25%, 50%, 75%, 200px, 50cqh
+     */
+    mediaWidth?: MediaMeasurement;
+    /**
+     * The height of the column that media is placed within. This can be any CSS value. This can be an object with values for each Cedar breakpoint (xs, sm, md, lg).
+     * @values 1fr, auto, 25%, 50%, 75%, 200px, 50cqw
+     */
+    mediaHeight?: MediaMeasurement;
+    /**
+     * This property forces media to take up the full height and width of the media container and positions media to be absolute. Images and videos will still need to be configured with object-fit and object-position.
+     */
+    mediaCover?: boolean;
+    /**
+     * Determines if content will overlay the media. A default media height is set, but it is suggested to apply your own using as value such as container width units (cqw) or rem.
+     */
+    overlay?: boolean;
+    /**
+     * The alignment of the content along the x axis.
+     * @values start, center, end
+     */
+    overlayRowAlign?: AlignmentValue;
+    /**
+     * The alignment of the content along the y axis.
+     * @values start, center, end
+     */
+    overlayColumnAlign?: AlignmentValue;
+    /**
+     * The spacing token to use for padding around the content. This can be an object with values for each Cedar breakpoint (xs, sm, md, lg).
+     * @demoSelectMultiple false
+     * @values zero, one-x, two-x
+     */
+    contentPadding?: SpaceOption;
+    /** Additional properties allowed */
+    [key: string]: any;
+}
+/**
+ * CdrMediaObject component properties
+ * Component that pairs images or videos with related text in a consistent way
+ */
+export type CdrMediaObjectProps = MediaObject;
+export declare const cdrMediaObjectAlignmentOptions: readonly ["start", "center", "end"];
+export declare const cdrMediaObjectPositionOptions: readonly ["top", "right", "bottom", "left"];
+export declare const cdrMediaObjectContentPaddingOptions: readonly ["zero", "one-x", "two-x"];

package/dist/components/modal/CdrModal.vue.d.ts

@@ -0,0 +1,52 @@
+import { CdrModalProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** Use to override the entire CdrModal content container.
+                You must provide an explicit way to close the modal
+                to meet UX and accessibility standards */
+        modal(props: Record<string, never>): any;
+        /** Use to override the default title */
+        title(props: Record<string, never>): any;
+        default(props: Record<string, never>): any;
+    }> & {
+        /** Use to override the entire CdrModal content container.
+                You must provide an explicit way to close the modal
+                to meet UX and accessibility standards */
+        modal(props: Record<string, never>): any;
+        /** Use to override the default title */
+        title(props: Record<string, never>): any;
+        default(props: Record<string, never>): any;
+    };
+    refs: {
+        wrapperEl: HTMLDivElement;
+        modalEl: HTMLDivElement;
+        headerEl: HTMLDivElement;
+        contentEl: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<CdrModalProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    closed: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<CdrModalProps> & Readonly<{
+    onClosed?: ((...args: any[]) => any) | undefined;
+}>, {
+    id: string | null;
+    role: import('../../lib').ModalRole;
+    showTitle: boolean;
+    ariaDescribedby: string | null;
+    animationDuration: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    wrapperEl: HTMLDivElement;
+    modalEl: HTMLDivElement;
+    headerEl: HTMLDivElement;
+    contentEl: HTMLDivElement;
+}, 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/modal/CdrModal.vue.mjs

@@ -1,9 +1,6 @@
-import o from "./CdrModal.vue2.mjs";
-import s from "./styles/CdrModal.module.scss.mjs";
-import t from "../../_virtual/_plugin-vue_export-helper.mjs";
-const r = {
-  $style: s
-}, f = /* @__PURE__ */ t(o, [["__cssModules", r]]);
-export {
-  f as default
-};
+import e from "../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./CdrModal.vue_vue_type_script_setup_true_lang.mjs";
+import n from "./styles/CdrModal.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 };