@dialpad/dialtone-vue 3.220.0-next.5 → 3.220.0

package/dist/lib/progress-circle/progress-circle.js

@@ -0,0 +1,135 @@
+import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { PROGRESS_CIRCLE_KINDS as t, PROGRESS_CIRCLE_SIZES as n } from "./progress-circle-constants.js";
+import { createCommentVNode as r, createElementBlock as i, createElementVNode as a, normalizeClass as o, normalizeStyle as s, openBlock as c } from "vue";
+//#region components/progress_circle/progress_circle.vue
+var l = {
+	compatConfig: { MODE: 3 },
+	name: "DtProgressCircle",
+	props: {
+		ariaLabel: {
+			type: String,
+			required: !0
+		},
+		progress: {
+			type: Number,
+			default: 0,
+			validator: (e) => e >= 0 && e <= 100
+		},
+		size: {
+			type: String,
+			default: "500",
+			validator: (e) => Object.keys(n).includes(e)
+		},
+		kind: {
+			type: String,
+			default: "default",
+			validator: (e) => Object.keys(t).includes(e)
+		}
+	},
+	data() {
+		return {
+			strokeWidth: 3.25,
+			uid: Math.random().toString(36).substring(2, 9)
+		};
+	},
+	computed: {
+		isAi() {
+			return this.kind === "ai";
+		},
+		aiGradientId() {
+			return `progress-circle-ai-gradient-${this.uid}`;
+		},
+		fillStrokeStyle() {
+			return this.isAi ? { stroke: `url(#${this.aiGradientId})` } : {};
+		},
+		sizeClass() {
+			return n[this.size];
+		},
+		kindClass() {
+			return t[this.kind];
+		},
+		circleRadius() {
+			return 12 - this.strokeWidth / 2;
+		},
+		circleCircumference() {
+			return 2 * Math.PI * this.circleRadius;
+		},
+		circlePath() {
+			let e = this.circleRadius, t = 12 - e;
+			return `M 12 ${t} A ${e} ${e} 0 0 1 12 ${12 + e} A ${e} ${e} 0 0 1 12 ${t} Z`;
+		},
+		cssVars() {
+			let e = this.circleCircumference, t = e * (this.progress > 0 && this.progress < 5 ? 5 : this.progress) / 100, n = this.strokeWidth, r = n / 2, i = this.progress > 0 && this.progress < 100, a = i ? n : 0;
+			return {
+				"--stroke-dasharray": !i && this.progress >= 100 ? "none" : e,
+				"--fill-dashoffset": e - Math.max(0, t - a),
+				"--fill-rotate": `${i ? r / e * 360 : 0}deg`,
+				"--track-dasharray": !i && this.progress <= 0 ? "none" : `${Math.max(0, e - t - a)} ${e}`,
+				"--track-dashoffset": -(t + (i ? r : 0))
+			};
+		}
+	}
+}, u = ["aria-label", "aria-valuenow"], d = { key: 0 }, f = ["id"], p = ["d", "stroke-width"], m = ["d", "stroke-width"];
+function h(e, t, n, l, h, g) {
+	return c(), i("div", {
+		class: o(["d-progress-circle", [g.sizeClass, g.kindClass]]),
+		role: "progressbar",
+		"aria-label": n.ariaLabel,
+		tabindex: "-1",
+		"aria-valuenow": n.progress,
+		"aria-valuemin": "0",
+		"aria-valuemax": "100",
+		"data-qa": "dt-progress-circle"
+	}, [(c(), i("svg", {
+		class: "d-progress-circle__bar",
+		style: s(g.cssVars),
+		viewBox: "0 0 24 24"
+	}, [
+		g.isAi ? (c(), i("defs", d, [a("linearGradient", {
+			id: g.aiGradientId,
+			x1: "0%",
+			y1: "0%",
+			x2: "100%",
+			y2: "100%"
+		}, [...t[0] || (t[0] = [
+			a("stop", {
+				offset: "0%",
+				"stop-color": "var(--dt-color-brand-gold)"
+			}, null, -1),
+			a("stop", {
+				offset: "33%",
+				"stop-color": "var(--dt-color-brand-red)"
+			}, null, -1),
+			a("stop", {
+				offset: "66%",
+				"stop-color": "var(--dt-color-brand-magenta)"
+			}, null, -1),
+			a("stop", {
+				offset: "100%",
+				"stop-color": "var(--dt-color-brand-purple)"
+			}, null, -1)
+		])], 8, f)])) : r("", !0),
+		n.progress <= 95 ? (c(), i("path", {
+			key: 1,
+			d: g.circlePath,
+			class: "d-progress-circle__shape d-progress-circle__shape--track",
+			fill: "none",
+			"stroke-width": h.strokeWidth,
+			"stroke-linecap": "round"
+		}, null, 8, p)) : r("", !0),
+		n.progress > 0 ? (c(), i("path", {
+			key: 2,
+			d: g.circlePath,
+			class: "d-progress-circle__shape d-progress-circle__shape--fill",
+			fill: "none",
+			"stroke-width": h.strokeWidth,
+			"stroke-linecap": "round",
+			style: s(g.fillStrokeStyle)
+		}, null, 12, m)) : r("", !0)
+	], 4))], 10, u);
+}
+var g = /* @__PURE__ */ e(l, [["render", h]]);
+//#endregion
+export { g as default };
+
+//# sourceMappingURL=progress-circle.js.map

package/dist/lib/progress-circle/progress-circle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-circle.js","names":[],"sources":["../../../components/progress_circle/progress_circle.vue"],"sourcesContent":["<script>\n/**\n * Circular SVG progress indicator for determinate upload or processing progress.\n * @see https://dialtone.dialpad.com/components/progress-circle.html\n */\nimport { PROGRESS_CIRCLE_SIZES, PROGRESS_CIRCLE_KINDS } from './progress_circle_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtProgressCircle',\n  props: {\n    /** Accessible label read by screen readers. */\n    ariaLabel: { type: String, required: true },\n    /** Current progress value (0–100). */\n    progress: {\n      type: Number,\n      default: 0,\n      validator: (v) => v >= 0 && v <= 100,\n    },\n\n    /**\n     * The size of the progress indicator, aligning to Dialtone icon sizes.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(PROGRESS_CIRCLE_SIZES).includes(s),\n    },\n\n    /**\n     * The color variant of the progress indicator.\n     * @values default, brand, critical, positive, warning, info, ai\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(PROGRESS_CIRCLE_KINDS).includes(k),\n    },\n  },\n\n  data () {\n    return {\n      strokeWidth: 3.25,\n      uid: Math.random().toString(36).substring(2, 9),\n    };\n  },\n\n  computed: {\n    // SVG stroke doesn't support CSS gradients, so the \"ai\" kind uses an inline\n    // SVG <linearGradient> referenced via url(#id) instead of a CSS variable.\n    isAi () {\n      return this.kind === 'ai';\n    },\n\n    // Unique per-instance to avoid collisions when multiple progress circles coexist.\n    aiGradientId () {\n      return `progress-circle-ai-gradient-${this.uid}`;\n    },\n\n    fillStrokeStyle () {\n      return this.isAi ? { stroke: `url(#${this.aiGradientId})` } : {};\n    },\n\n    sizeClass () {\n      return PROGRESS_CIRCLE_SIZES[this.size];\n    },\n\n    kindClass () {\n      return PROGRESS_CIRCLE_KINDS[this.kind];\n    },\n\n    circleRadius () {\n      return 12 - (this.strokeWidth / 2);\n    },\n\n    circleCircumference () {\n      return 2 * Math.PI * this.circleRadius;\n    },\n\n    // Draws a full circle as two arcs so getTotalLength() returns the circumference.\n    circlePath () {\n      const r = this.circleRadius;\n      const top = 12 - r;\n      const bottom = 12 + r;\n      return `M 12 ${top} A ${r} ${r} 0 0 1 12 ${bottom} A ${r} ${r} 0 0 1 12 ${top} Z`;\n    },\n\n    // stroke-dasharray/offset control how much of the circle is visually \"filled\".\n    cssVars () {\n      const C = this.circleCircumference;\n      const MIN_VISUAL_PROGRESS = 5;\n      const visualProgress = (this.progress > 0 && this.progress < MIN_VISUAL_PROGRESS)\n        ? MIN_VISUAL_PROGRESS\n        : this.progress;\n      const fillLength = C * visualProgress / 100;\n      const sw = this.strokeWidth;\n      const capArc = sw / 2;\n\n      // When both arcs are visible, round linecaps extend capArc past each endpoint.\n      // Shorten each arc by capArc at both ends (total sw per arc) so the caps meet\n      // exactly at each junction without overlapping. Rotate the fill forward by\n      // capArc so its start cap lands at 12 o'clock.\n      const both = this.progress > 0 && this.progress < 100;\n      const adj = both ? sw : 0;\n\n      return {\n        // Full-circle arcs use 'none' to avoid round-cap overlap at the path seam.\n        '--stroke-dasharray': (!both && this.progress >= 100) ? 'none' : C,\n        '--fill-dashoffset': C - Math.max(0, fillLength - adj),\n        '--fill-rotate': `${both ? (capArc / C * 360) : 0}deg`,\n        '--track-dasharray': (!both && this.progress <= 0) ? 'none' : `${Math.max(0, C - fillLength - adj)} ${C}`,\n        '--track-dashoffset': -(fillLength + (both ? capArc : 0)),\n      };\n    },\n  },\n\n};\n</script>\n\n<template>\n  <div\n    class=\"d-progress-circle\"\n    :class=\"[sizeClass, kindClass]\"\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    tabindex=\"-1\"\n    :aria-valuenow=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    data-qa=\"dt-progress-circle\"\n  >\n    <svg\n      class=\"d-progress-circle__bar\"\n      :style=\"cssVars\"\n      viewBox=\"0 0 24 24\"\n    >\n      <defs v-if=\"isAi\">\n        <linearGradient\n          :id=\"aiGradientId\"\n          x1=\"0%\"\n          y1=\"0%\"\n          x2=\"100%\"\n          y2=\"100%\"\n        >\n          <!-- This emulates the AI gradient, for which each color isn't directly mappable to a CSS variable -->\n          <stop\n            offset=\"0%\"\n            stop-color=\"var(--dt-color-brand-gold)\"\n          />\n          <stop\n            offset=\"33%\"\n            stop-color=\"var(--dt-color-brand-red)\"\n          />\n          <stop\n            offset=\"66%\"\n            stop-color=\"var(--dt-color-brand-magenta)\"\n          />\n          <stop\n            offset=\"100%\"\n            stop-color=\"var(--dt-color-brand-purple)\"\n          />\n        </linearGradient>\n      </defs>\n      <path\n        v-if=\"progress <= 95\"\n        :d=\"circlePath\"\n        class=\"d-progress-circle__shape d-progress-circle__shape--track\"\n        fill=\"none\"\n        :stroke-width=\"strokeWidth\"\n        stroke-linecap=\"round\"\n      />\n      <path\n        v-if=\"progress > 0\"\n        :d=\"circlePath\"\n        class=\"d-progress-circle__shape d-progress-circle__shape--fill\"\n        fill=\"none\"\n        :stroke-width=\"strokeWidth\"\n        stroke-linecap=\"round\"\n        :style=\"fillStrokeStyle\"\n      />\n    </svg>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/lib/radio/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./radioconstants.cjs`),t=require(`./radio.cjs`);exports.DtRadio=t.default,exports.RADIO_INPUT_VALIDATION_CLASSES=e.RADIO_INPUT_VALIDATION_CLASSES;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./radio-constants.cjs`),t=require(`./radio.cjs`);exports.DtRadio=t.default,exports.RADIO_INPUT_VALIDATION_CLASSES=e.RADIO_INPUT_VALIDATION_CLASSES;

package/dist/lib/radio/index.js

@@ -1,3 +1,3 @@
-import { RADIO_INPUT_VALIDATION_CLASSES as e } from "./radioconstants.js";
+import { RADIO_INPUT_VALIDATION_CLASSES as e } from "./radio-constants.js";
 import t from "./radio.js";
 export { t as DtRadio, e as RADIO_INPUT_VALIDATION_CLASSES };

package/dist/lib/radio/radio-constants.cjs

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={warning:`d-radio--warning`,error:`d-radio--error`,success:`d-radio--success`},t={RADIO_INPUT_VALIDATION_CLASSES:e};exports.RADIO_INPUT_VALIDATION_CLASSES=e,exports.default=t;
+//# sourceMappingURL=radio-constants.cjs.map

package/dist/lib/radio/radio-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-constants.cjs","names":[],"sources":["../../../components/radio/radio_constants.js"],"sourcesContent":["export const RADIO_INPUT_VALIDATION_CLASSES = {\n  warning: 'd-radio--warning',\n  error: 'd-radio--error',\n  success: 'd-radio--success',\n};\n\nexport default {\n  RADIO_INPUT_VALIDATION_CLASSES,\n};\n"],"mappings":"+FAAA,IAAa,EAAiC,CAC5C,QAAS,mBACT,MAAO,iBACP,QAAS,mBACV,CAED,EAAe,CACb,iCACD"}

package/dist/lib/radio/radio-constants.js

@@ -0,0 +1,10 @@
+//#region components/radio/radio_constants.js
+var e = {
+	warning: "d-radio--warning",
+	error: "d-radio--error",
+	success: "d-radio--success"
+}, t = { RADIO_INPUT_VALIDATION_CLASSES: e };
+//#endregion
+export { e as RADIO_INPUT_VALIDATION_CLASSES, t as default };
+
+//# sourceMappingURL=radio-constants.js.map

package/dist/lib/radio/radio-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-constants.js","names":[],"sources":["../../../components/radio/radio_constants.js"],"sourcesContent":["export const RADIO_INPUT_VALIDATION_CLASSES = {\n  warning: 'd-radio--warning',\n  error: 'd-radio--error',\n  success: 'd-radio--success',\n};\n\nexport default {\n  RADIO_INPUT_VALIDATION_CLASSES,\n};\n"],"mappings":";AAAA,IAAa,IAAiC;CAC5C,SAAS;CACT,OAAO;CACP,SAAS;CACV,EAED,IAAe,EACb,mCACD"}

package/dist/lib/radio/radio.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../common/mixins/input.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../validationmessages/validationmessages.cjs`),i=require(`../text/textconstants.cjs`),a=require(`../text/text.cjs`),o=require(`./radioconstants.cjs`);let s=require(`vue`);var c={compatConfig:{MODE:3},name:`DtRadio`,components:{DtValidationMessages:r.default,DtText:a.default},mixins:[t.InputMixin,t.CheckableMixin,t.GroupableMixin,t.MessagesMixin],inheritAttrs:!1,props:{value:{type:[String,Number],default:``},showLabel:{type:Boolean,default:!0},labelSize:{type:[String,Number],default:null,validator:e=>i.TEXT_SIZE_MODIFIERS.label.includes(String(e))},labelStrength:{type:String,default:null,validator:e=>Object.keys(i.TEXT_STRENGTH_MODIFIERS).includes(e)}},emits:[`update:modelValue`,`focus`,`focusin`,`focusout`],data(){return{hasSlotContent:e.hasSlotContent}},computed:{hasLabelContent(){return!!(this.$slots.default||this.label)},hasLabel(){return this.showLabel&&this.hasLabelContent},resolvedLabelSize(){return this.labelSize??300},inputValidationClass(){return o.RADIO_INPUT_VALIDATION_CLASSES[this.internalValidationState]},radioGroupValue(){return this.groupContext?.selectedValue},inputListeners(){return{input:()=>{},focusin:e=>this.$emit(`focusin`,e),focusout:e=>this.$emit(`focusout`,e),change:e=>this.emitValue(e.target.value)}},hasMessages(){return this.formattedMessages.length&&this.showMessages}},watch:{radioGroupValue:{immediate:!0,handler(e){this.hasGroup&&(this.internalChecked=e===this.value)}}},mounted(){this.runValidations()},methods:{removeClassStyleAttrs:e.removeClassStyleAttrs,runValidations(){!this.hasLabelContent&&!this.$attrs[`aria-label`]&&console.info(`[Dialtone] A label is required for accessibility. Provide a label prop and use show-label="false" to hide it visually.`)},emitValue(e){e!==this.radioGroupValue&&(this.setGroupValue(e),this.$emit(`update:modelValue`,e))}}},l={class:`d-radio__input`},u=[`checked`,`name`,`value`,`disabled`,`aria-label`],d={key:0,class:`d-radio__messages`,"data-qa":`radio-description-messages`};function f(e,t,n,r,i,a){let o=(0,s.resolveComponent)(`dt-text`),c=(0,s.resolveComponent)(`dt-validation-messages`);return(0,s.openBlock)(),(0,s.createElementBlock)(`div`,{class:(0,s.normalizeClass)(e.$attrs.class),style:(0,s.normalizeStyle)(e.$attrs.style)},[(0,s.createElementVNode)(`label`,{class:(0,s.normalizeClass)([`d-radio-group`,{"d-radio-group--disabled":e.internalDisabled}])},[(0,s.createElementVNode)(`div`,l,[(0,s.createElementVNode)(`input`,(0,s.mergeProps)({checked:e.internalChecked,name:e.internalName,value:n.value,disabled:e.internalDisabled,type:`radio`,class:[`d-radio`,a.inputValidationClass,e.inputClass],"aria-label":!n.showLabel&&e.label?e.label:void 0},a.removeClassStyleAttrs(e.$attrs),(0,s.toHandlers)(a.inputListeners,!0)),null,16,u)]),a.hasLabel?((0,s.openBlock)(),(0,s.createBlock)(o,(0,s.mergeProps)({key:0,as:`div`,kind:`label`,size:a.resolvedLabelSize,strength:n.labelStrength??`normal`,tone:e.internalDisabled?`disabled`:`primary`,class:[e.labelClass,`d-radio__copy d-radio__label`]},e.labelChildProps,{"data-qa":`radio-label`}),{default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`default`,{},()=>[(0,s.createTextVNode)((0,s.toDisplayString)(e.label),1)])]),_:3},16,[`size`,`strength`,`tone`,`class`])):(0,s.createCommentVNode)(``,!0)],2),e.$slots.description||e.description||a.hasMessages?((0,s.openBlock)(),(0,s.createElementBlock)(`div`,d,[e.$slots.description||e.description?((0,s.openBlock)(),(0,s.createBlock)(o,(0,s.mergeProps)({key:0,kind:`body`,size:200,tone:`tertiary`,as:`div`,class:[`d-description`,e.descriptionClass]},e.descriptionChildProps,{"data-qa":`radio-description`}),{default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`description`,{},()=>[(0,s.createTextVNode)((0,s.toDisplayString)(e.description),1)])]),_:3},16,[`class`])):(0,s.createCommentVNode)(``,!0),(0,s.createVNode)(c,(0,s.mergeProps)({"validation-messages":e.formattedMessages,"show-messages":e.showMessages,class:e.messagesClass},e.messagesChildProps,{"data-qa":`dt-radio-validation-messages`}),null,16,[`validation-messages`,`show-messages`,`class`])])):(0,s.createCommentVNode)(``,!0)],6)}var p=n.t(c,[[`render`,f]]);exports.default=p;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../common/mixins/input.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../validation-messages/validation-messages.cjs`),i=require(`./radio-constants.cjs`);let a=require(`vue`);var o={compatConfig:{MODE:3},name:`DtRadio`,components:{DtValidationMessages:r.default},mixins:[t.InputMixin,t.CheckableMixin,t.GroupableMixin,t.MessagesMixin],inheritAttrs:!1,props:{value:{type:[String,Number],default:``}},emits:[`input`,`update:modelValue`,`focus`,`focusin`,`focusout`],data(){return{hasSlotContent:e.hasSlotContent}},computed:{inputValidationClass(){return i.RADIO_INPUT_VALIDATION_CLASSES[this.internalValidationState]},radioGroupValue(){return this.groupContext?.selectedValue},inputListeners(){return{input:()=>{},focusin:e=>this.$emit(`focusin`,e),focusout:e=>this.$emit(`focusout`,e),change:e=>this.emitValue(e.target.value)}},hasMessages(){return this.formattedMessages.length&&this.showMessages}},watch:{radioGroupValue:{immediate:!0,handler(e){this.hasGroup&&(this.internalChecked=e===this.value)}}},methods:{removeClassStyleAttrs:e.removeClassStyleAttrs,addClassStyleAttrs:e.addClassStyleAttrs,emitValue(e){e!==this.radioGroupValue&&(this.setGroupValue(e),this.$emit(`input`,e),this.$emit(`update:modelValue`,e))}}},s={class:`d-radio__input`},c=[`checked`,`name`,`value`,`disabled`],l={key:0,class:`d-radio__messages`,"data-qa":`radio-description-messages`};function u(e,t,n,r,i,o){let u=(0,a.resolveComponent)(`dt-validation-messages`);return(0,a.openBlock)(),(0,a.createElementBlock)(`div`,(0,a.mergeProps)({class:e.rootClass},o.addClassStyleAttrs(e.$attrs)),[(0,a.createElementVNode)(`label`,{class:(0,a.normalizeClass)([`d-radio-group`,{"d-radio-group--disabled":e.internalDisabled}])},[(0,a.createElementVNode)(`div`,s,[(0,a.createElementVNode)(`input`,(0,a.mergeProps)({checked:e.internalChecked,name:e.internalName,value:n.value,disabled:e.internalDisabled,type:`radio`,class:[`d-radio`,o.inputValidationClass,e.inputClass]},o.removeClassStyleAttrs(e.$attrs),(0,a.toHandlers)(o.inputListeners,!0)),null,16,c)]),(0,a.createElementVNode)(`div`,(0,a.mergeProps)({class:[e.labelClass,`d-radio__copy d-radio__label`]},e.labelChildProps,{"data-qa":`radio-label`}),[(0,a.renderSlot)(e.$slots,`default`,{},()=>[(0,a.createTextVNode)((0,a.toDisplayString)(e.label),1)])],16)],2),e.$slots.description||e.description||o.hasMessages?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,l,[e.$slots.description||e.description?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,(0,a.mergeProps)({key:0,class:[`d-description`,e.descriptionClass]},e.descriptionChildProps,{"data-qa":`radio-description`}),[(0,a.renderSlot)(e.$slots,`description`,{},()=>[(0,a.createTextVNode)((0,a.toDisplayString)(e.description),1)])],16)):(0,a.createCommentVNode)(``,!0),(0,a.createVNode)(u,(0,a.mergeProps)({"validation-messages":e.formattedMessages,"show-messages":e.showMessages,class:e.messagesClass},e.messagesChildProps,{"data-qa":`dt-radio-validation-messages`}),null,16,[`validation-messages`,`show-messages`,`class`])])):(0,a.createCommentVNode)(``,!0)],16)}var d=n.t(o,[[`render`,u]]);exports.default=d;
 //# sourceMappingURL=radio.cjs.map

package/dist/lib/radio/radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio.cjs","names":[],"sources":["../../../components/Radio/Radio.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"$attrs.class\"\n    :style=\"$attrs.style\"\n  >\n    <label :class=\"['d-radio-group', { 'd-radio-group--disabled': internalDisabled }]\">\n      <div class=\"d-radio__input\">\n        <input\n          :checked=\"internalChecked\"\n          :name=\"internalName\"\n          :value=\"value\"\n          :disabled=\"internalDisabled\"\n          type=\"radio\"\n          :class=\"['d-radio', inputValidationClass, inputClass]\"\n          :aria-label=\"!showLabel && label ? label : undefined\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"inputListeners\"\n        >\n      </div>\n      <dt-text\n        v-if=\"hasLabel\"\n        as=\"div\"\n        kind=\"label\"\n        :size=\"resolvedLabelSize\"\n        :strength=\"labelStrength ?? 'normal'\"\n        :tone=\"internalDisabled ? 'disabled' : 'primary'\"\n        :class=\"[labelClass, 'd-radio__copy d-radio__label']\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"radio-label\"\n      >\n        <!-- @slot slot for Radio Label -->\n        <slot>{{ label }}</slot>\n      </dt-text>\n    </label>\n    <div\n      v-if=\"$slots.description || description || hasMessages\"\n      class=\"d-radio__messages\"\n      data-qa=\"radio-description-messages\"\n    >\n      <dt-text\n        v-if=\"$slots.description || description\"\n        kind=\"body\"\n        :size=\"200\"\n        tone=\"tertiary\"\n        as=\"div\"\n        :class=\"['d-description', descriptionClass]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"radio-description\"\n      >\n        <!-- @slot slot for Radio Description -->\n        <slot name=\"description\">\n          {{ description }}\n        </slot>\n      </dt-text>\n      <dt-validation-messages\n        :validation-messages=\"formattedMessages\"\n        :show-messages=\"showMessages\"\n        :class=\"messagesClass\"\n        v-bind=\"messagesChildProps\"\n        data-qa=\"dt-radio-validation-messages\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n} from '@/common/mixins/input';\nimport { RADIO_INPUT_VALIDATION_CLASSES } from './RadioConstants';\nimport { DtValidationMessages } from '../ValidationMessages';\nimport { DtText, TEXT_SIZE_MODIFIERS, TEXT_STRENGTH_MODIFIERS } from '@/components/Text';\nimport { hasSlotContent, removeClassStyleAttrs } from '@/common/utils';\n\n/**\n * Radios are control elements that allow the user to make a single selection.\n * They are typically used in a Radio Group which allows the user to make a selection from a list of options.\n * @see https://dialtone.dialpad.com/components/radio.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRadio',\n\n  components: { DtValidationMessages, DtText },\n\n  mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * A provided value for the radio\n     */\n    value: {\n      type: [String, Number],\n      default: '',\n    },\n\n    /**\n     * Determines visibility of radio label.\n     * @values true, false\n     */\n    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Overrides the label text size.\n     * @values 100, 200, 300, 400\n     */\n    labelSize: {\n      type: [String, Number],\n      default: null,\n      validator: (s) => TEXT_SIZE_MODIFIERS.label.includes(String(s)),\n    },\n\n    /**\n     * Overrides the label font weight.\n     * @values bold, semibold, medium, normal\n     */\n    labelStrength: {\n      type: String,\n      default: null,\n      validator: (s) => Object.keys(TEXT_STRENGTH_MODIFIERS).includes(s),\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event update:modelValue\n     * @type {String | Number}\n     */\n    'update:modelValue',\n\n    /**\n     * Native input focus event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @property {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @property {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    hasLabelContent () {\n      return !!(this.$slots.default || this.label);\n    },\n\n    hasLabel () {\n      return this.showLabel && this.hasLabelContent;\n    },\n\n    resolvedLabelSize () {\n      return this.labelSize ?? 300;\n    },\n\n    inputValidationClass () {\n      return RADIO_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n    },\n\n    radioGroupValue () {\n      return this.groupContext?.selectedValue;\n    },\n\n    inputListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the handler being called twice\n         * (once on the input element and once by the emitted input event by the change listener).\n        */\n        input: () => {},\n        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\n        change: event => this.emitValue(event.target.value),\n      };\n    },\n\n    hasMessages () {\n      return this.formattedMessages.length && this.showMessages;\n    },\n  },\n\n  watch: {\n    radioGroupValue: {\n      immediate: true,\n      handler (newRadioGroupValue) {\n        if (this.hasGroup) {\n          // update internal value when the radio group value changes\n          this.internalChecked = newRadioGroupValue === this.value;\n        }\n      },\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n\n    runValidations () {\n      if (!this.hasLabelContent && !this.$attrs['aria-label']) {\n        console.info(\n          '[Dialtone] A label is required for accessibility. Provide a label prop and use show-label=\"false\" to hide it visually.',\n        );\n      }\n    },\n\n    emitValue (value) {\n      if (value !== this.radioGroupValue) {\n        // update provided value if injected\n        this.setGroupValue(value);\n        this.$emit('update:modelValue', value);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"radio.cjs","names":[],"sources":["../../../components/radio/radio.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"rootClass\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <label :class=\"['d-radio-group', { 'd-radio-group--disabled': internalDisabled }]\">\n      <div class=\"d-radio__input\">\n        <input\n          :checked=\"internalChecked\"\n          :name=\"internalName\"\n          :value=\"value\"\n          :disabled=\"internalDisabled\"\n          type=\"radio\"\n          :class=\"['d-radio', inputValidationClass, inputClass]\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"inputListeners\"\n        >\n      </div>\n      <div\n        :class=\"[labelClass, 'd-radio__copy d-radio__label']\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"radio-label\"\n      >\n        <!-- @slot slot for Radio Label -->\n        <slot>{{ label }}</slot>\n      </div>\n    </label>\n    <div\n      v-if=\"$slots.description || description || hasMessages\"\n      class=\"d-radio__messages\"\n      data-qa=\"radio-description-messages\"\n    >\n      <div\n        v-if=\"$slots.description || description\"\n        :class=\"['d-description', descriptionClass]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"radio-description\"\n      >\n        <!-- @slot slot for Radio Description -->\n        <slot name=\"description\">\n          {{ description }}\n        </slot>\n      </div>\n      <dt-validation-messages\n        :validation-messages=\"formattedMessages\"\n        :show-messages=\"showMessages\"\n        :class=\"messagesClass\"\n        v-bind=\"messagesChildProps\"\n        data-qa=\"dt-radio-validation-messages\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n} from '@/common/mixins/input';\nimport { RADIO_INPUT_VALIDATION_CLASSES } from './radio_constants';\nimport { DtValidationMessages } from '../validation_messages';\nimport { hasSlotContent, removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\n\n/**\n * Radios are control elements that allow the user to make a single selection.\n * They are typically used in a Radio Group which allows the user to make a selection from a list of options.\n * @see https://dialtone.dialpad.com/components/radio.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRadio',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * A provided value for the radio\n     */\n    value: {\n      type: [String, Number],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'update:modelValue',\n\n    /**\n     * Native input focus event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @property {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @property {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputValidationClass () {\n      return RADIO_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n    },\n\n    radioGroupValue () {\n      return this.groupContext?.selectedValue;\n    },\n\n    inputListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the handler being called twice\n         * (once on the input element and once by the emitted input event by the change listener).\n        */\n        input: () => {},\n        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\n        change: event => this.emitValue(event.target.value),\n      };\n    },\n\n    hasMessages () {\n      return this.formattedMessages.length && this.showMessages;\n    },\n  },\n\n  watch: {\n    radioGroupValue: {\n      immediate: true,\n      handler (newRadioGroupValue) {\n        if (this.hasGroup) {\n          // update internal value when the radio group value changes\n          this.internalChecked = newRadioGroupValue === this.value;\n        }\n      },\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n    emitValue (value) {\n      if (value !== this.radioGroupValue) {\n        // update provided value if injected\n        this.setGroupValue(value);\n        this.$emit('input', value);\n        this.$emit('update:modelValue', value);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/radio/radio.js

@@ -1,67 +1,38 @@
-import { hasSlotContent as e, removeClassStyleAttrs as t } from "../../common/utils/index.js";
-import { CheckableMixin as n, GroupableMixin as r, InputMixin as i, MessagesMixin as a } from "../../common/mixins/input.js";
-import { t as o } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import s from "../validationmessages/validationmessages.js";
-import { TEXT_SIZE_MODIFIERS as c, TEXT_STRENGTH_MODIFIERS as l } from "../text/textconstants.js";
-import u from "../text/text.js";
-import { RADIO_INPUT_VALIDATION_CLASSES as d } from "./radioconstants.js";
-import { createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, mergeProps as v, normalizeClass as y, normalizeStyle as b, openBlock as x, renderSlot as S, resolveComponent as C, toDisplayString as w, toHandlers as T, withCtx as E } from "vue";
-//#region components/Radio/Radio.vue
-var D = {
+import { addClassStyleAttrs as e, hasSlotContent as t, removeClassStyleAttrs as n } from "../../common/utils/index.js";
+import { CheckableMixin as r, GroupableMixin as i, InputMixin as a, MessagesMixin as o } from "../../common/mixins/input.js";
+import { t as s } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import c from "../validation-messages/validation-messages.js";
+import { RADIO_INPUT_VALIDATION_CLASSES as l } from "./radio-constants.js";
+import { createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, mergeProps as h, normalizeClass as g, openBlock as _, renderSlot as v, resolveComponent as y, toDisplayString as b, toHandlers as x } from "vue";
+//#region components/radio/radio.vue
+var S = {
 	compatConfig: { MODE: 3 },
 	name: "DtRadio",
-	components: {
-		DtValidationMessages: s,
-		DtText: u
-	},
+	components: { DtValidationMessages: c },
 	mixins: [
-		i,
-		n,
+		a,
 		r,
-		a
+		i,
+		o
 	],
 	inheritAttrs: !1,
-	props: {
-		value: {
-			type: [String, Number],
-			default: ""
-		},
-		showLabel: {
-			type: Boolean,
-			default: !0
-		},
-		labelSize: {
-			type: [String, Number],
-			default: null,
-			validator: (e) => c.label.includes(String(e))
-		},
-		labelStrength: {
-			type: String,
-			default: null,
-			validator: (e) => Object.keys(l).includes(e)
-		}
-	},
+	props: { value: {
+		type: [String, Number],
+		default: ""
+	} },
 	emits: [
+		"input",
 		"update:modelValue",
 		"focus",
 		"focusin",
 		"focusout"
 	],
 	data() {
-		return { hasSlotContent: e };
+		return { hasSlotContent: t };
 	},
 	computed: {
-		hasLabelContent() {
-			return !!(this.$slots.default || this.label);
-		},
-		hasLabel() {
-			return this.showLabel && this.hasLabelContent;
-		},
-		resolvedLabelSize() {
-			return this.labelSize ?? 300;
-		},
 		inputValidationClass() {
-			return d[this.internalValidationState];
+			return l[this.internalValidationState];
 		},
 		radioGroupValue() {
 			return this.groupContext?.selectedValue;
@@ -84,35 +55,26 @@ var D = {
 			this.hasGroup && (this.internalChecked = e === this.value);
 		}
 	} },
-	mounted() {
-		this.runValidations();
-	},
 	methods: {
-		removeClassStyleAttrs: t,
-		runValidations() {
-			!this.hasLabelContent && !this.$attrs["aria-label"] && console.info("[Dialtone] A label is required for accessibility. Provide a label prop and use show-label=\"false\" to hide it visually.");
-		},
+		removeClassStyleAttrs: n,
+		addClassStyleAttrs: e,
 		emitValue(e) {
-			e !== this.radioGroupValue && (this.setGroupValue(e), this.$emit("update:modelValue", e));
+			e !== this.radioGroupValue && (this.setGroupValue(e), this.$emit("input", e), this.$emit("update:modelValue", e));
 		}
 	}
-}, O = { class: "d-radio__input" }, k = [
+}, C = { class: "d-radio__input" }, w = [
 	"checked",
 	"name",
 	"value",
-	"disabled",
-	"aria-label"
-], A = {
+	"disabled"
+], T = {
 	key: 0,
 	class: "d-radio__messages",
 	"data-qa": "radio-description-messages"
 };
-function j(e, t, n, r, i, a) {
-	let o = C("dt-text"), s = C("dt-validation-messages");
-	return x(), m("div", {
-		class: y(e.$attrs.class),
-		style: b(e.$attrs.style)
-	}, [h("label", { class: y(["d-radio-group", { "d-radio-group--disabled": e.internalDisabled }]) }, [h("div", O, [h("input", v({
+function E(e, t, n, r, i, a) {
+	let o = y("dt-validation-messages");
+	return _(), d("div", h({ class: e.rootClass }, a.addClassStyleAttrs(e.$attrs)), [f("label", { class: g(["d-radio-group", { "d-radio-group--disabled": e.internalDisabled }]) }, [f("div", C, [f("input", h({
 		checked: e.internalChecked,
 		name: e.internalName,
 		value: n.value,
@@ -122,35 +84,11 @@ function j(e, t, n, r, i, a) {
 			"d-radio",
 			a.inputValidationClass,
 			e.inputClass
-		],
-		"aria-label": !n.showLabel && e.label ? e.label : void 0
-	}, a.removeClassStyleAttrs(e.$attrs), T(a.inputListeners, !0)), null, 16, k)]), a.hasLabel ? (x(), f(o, v({
-		key: 0,
-		as: "div",
-		kind: "label",
-		size: a.resolvedLabelSize,
-		strength: n.labelStrength ?? "normal",
-		tone: e.internalDisabled ? "disabled" : "primary",
-		class: [e.labelClass, "d-radio__copy d-radio__label"]
-	}, e.labelChildProps, { "data-qa": "radio-label" }), {
-		default: E(() => [S(e.$slots, "default", {}, () => [g(w(e.label), 1)])]),
-		_: 3
-	}, 16, [
-		"size",
-		"strength",
-		"tone",
-		"class"
-	])) : p("", !0)], 2), e.$slots.description || e.description || a.hasMessages ? (x(), m("div", A, [e.$slots.description || e.description ? (x(), f(o, v({
+		]
+	}, a.removeClassStyleAttrs(e.$attrs), x(a.inputListeners, !0)), null, 16, w)]), f("div", h({ class: [e.labelClass, "d-radio__copy d-radio__label"] }, e.labelChildProps, { "data-qa": "radio-label" }), [v(e.$slots, "default", {}, () => [p(b(e.label), 1)])], 16)], 2), e.$slots.description || e.description || a.hasMessages ? (_(), d("div", T, [e.$slots.description || e.description ? (_(), d("div", h({
 		key: 0,
-		kind: "body",
-		size: 200,
-		tone: "tertiary",
-		as: "div",
 		class: ["d-description", e.descriptionClass]
-	}, e.descriptionChildProps, { "data-qa": "radio-description" }), {
-		default: E(() => [S(e.$slots, "description", {}, () => [g(w(e.description), 1)])]),
-		_: 3
-	}, 16, ["class"])) : p("", !0), _(s, v({
+	}, e.descriptionChildProps, { "data-qa": "radio-description" }), [v(e.$slots, "description", {}, () => [p(b(e.description), 1)])], 16)) : u("", !0), m(o, h({
 		"validation-messages": e.formattedMessages,
 		"show-messages": e.showMessages,
 		class: e.messagesClass
@@ -158,10 +96,10 @@ function j(e, t, n, r, i, a) {
 		"validation-messages",
 		"show-messages",
 		"class"
-	])])) : p("", !0)], 6);
+	])])) : u("", !0)], 16);
 }
-var M = /* @__PURE__ */ o(D, [["render", j]]);
+var D = /* @__PURE__ */ s(S, [["render", E]]);
 //#endregion
-export { M as default };
+export { D as default };
 
 //# sourceMappingURL=radio.js.map

package/dist/lib/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":[],"sources":["../../../components/Radio/Radio.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"$attrs.class\"\n    :style=\"$attrs.style\"\n  >\n    <label :class=\"['d-radio-group', { 'd-radio-group--disabled': internalDisabled }]\">\n      <div class=\"d-radio__input\">\n        <input\n          :checked=\"internalChecked\"\n          :name=\"internalName\"\n          :value=\"value\"\n          :disabled=\"internalDisabled\"\n          type=\"radio\"\n          :class=\"['d-radio', inputValidationClass, inputClass]\"\n          :aria-label=\"!showLabel && label ? label : undefined\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"inputListeners\"\n        >\n      </div>\n      <dt-text\n        v-if=\"hasLabel\"\n        as=\"div\"\n        kind=\"label\"\n        :size=\"resolvedLabelSize\"\n        :strength=\"labelStrength ?? 'normal'\"\n        :tone=\"internalDisabled ? 'disabled' : 'primary'\"\n        :class=\"[labelClass, 'd-radio__copy d-radio__label']\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"radio-label\"\n      >\n        <!-- @slot slot for Radio Label -->\n        <slot>{{ label }}</slot>\n      </dt-text>\n    </label>\n    <div\n      v-if=\"$slots.description || description || hasMessages\"\n      class=\"d-radio__messages\"\n      data-qa=\"radio-description-messages\"\n    >\n      <dt-text\n        v-if=\"$slots.description || description\"\n        kind=\"body\"\n        :size=\"200\"\n        tone=\"tertiary\"\n        as=\"div\"\n        :class=\"['d-description', descriptionClass]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"radio-description\"\n      >\n        <!-- @slot slot for Radio Description -->\n        <slot name=\"description\">\n          {{ description }}\n        </slot>\n      </dt-text>\n      <dt-validation-messages\n        :validation-messages=\"formattedMessages\"\n        :show-messages=\"showMessages\"\n        :class=\"messagesClass\"\n        v-bind=\"messagesChildProps\"\n        data-qa=\"dt-radio-validation-messages\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n} from '@/common/mixins/input';\nimport { RADIO_INPUT_VALIDATION_CLASSES } from './RadioConstants';\nimport { DtValidationMessages } from '../ValidationMessages';\nimport { DtText, TEXT_SIZE_MODIFIERS, TEXT_STRENGTH_MODIFIERS } from '@/components/Text';\nimport { hasSlotContent, removeClassStyleAttrs } from '@/common/utils';\n\n/**\n * Radios are control elements that allow the user to make a single selection.\n * They are typically used in a Radio Group which allows the user to make a selection from a list of options.\n * @see https://dialtone.dialpad.com/components/radio.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRadio',\n\n  components: { DtValidationMessages, DtText },\n\n  mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * A provided value for the radio\n     */\n    value: {\n      type: [String, Number],\n      default: '',\n    },\n\n    /**\n     * Determines visibility of radio label.\n     * @values true, false\n     */\n    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Overrides the label text size.\n     * @values 100, 200, 300, 400\n     */\n    labelSize: {\n      type: [String, Number],\n      default: null,\n      validator: (s) => TEXT_SIZE_MODIFIERS.label.includes(String(s)),\n    },\n\n    /**\n     * Overrides the label font weight.\n     * @values bold, semibold, medium, normal\n     */\n    labelStrength: {\n      type: String,\n      default: null,\n      validator: (s) => Object.keys(TEXT_STRENGTH_MODIFIERS).includes(s),\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event update:modelValue\n     * @type {String | Number}\n     */\n    'update:modelValue',\n\n    /**\n     * Native input focus event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @property {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @property {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    hasLabelContent () {\n      return !!(this.$slots.default || this.label);\n    },\n\n    hasLabel () {\n      return this.showLabel && this.hasLabelContent;\n    },\n\n    resolvedLabelSize () {\n      return this.labelSize ?? 300;\n    },\n\n    inputValidationClass () {\n      return RADIO_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n    },\n\n    radioGroupValue () {\n      return this.groupContext?.selectedValue;\n    },\n\n    inputListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the handler being called twice\n         * (once on the input element and once by the emitted input event by the change listener).\n        */\n        input: () => {},\n        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\n        change: event => this.emitValue(event.target.value),\n      };\n    },\n\n    hasMessages () {\n      return this.formattedMessages.length && this.showMessages;\n    },\n  },\n\n  watch: {\n    radioGroupValue: {\n      immediate: true,\n      handler (newRadioGroupValue) {\n        if (this.hasGroup) {\n          // update internal value when the radio group value changes\n          this.internalChecked = newRadioGroupValue === this.value;\n        }\n      },\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n\n    runValidations () {\n      if (!this.hasLabelContent && !this.$attrs['aria-label']) {\n        console.info(\n          '[Dialtone] A label is required for accessibility. Provide a label prop and use show-label=\"false\" to hide it visually.',\n        );\n      }\n    },\n\n    emitValue (value) {\n      if (value !== this.radioGroupValue) {\n        // update provided value if injected\n        this.setGroupValue(value);\n        this.$emit('update:modelValue', value);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"radio.js","names":[],"sources":["../../../components/radio/radio.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"rootClass\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <label :class=\"['d-radio-group', { 'd-radio-group--disabled': internalDisabled }]\">\n      <div class=\"d-radio__input\">\n        <input\n          :checked=\"internalChecked\"\n          :name=\"internalName\"\n          :value=\"value\"\n          :disabled=\"internalDisabled\"\n          type=\"radio\"\n          :class=\"['d-radio', inputValidationClass, inputClass]\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"inputListeners\"\n        >\n      </div>\n      <div\n        :class=\"[labelClass, 'd-radio__copy d-radio__label']\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"radio-label\"\n      >\n        <!-- @slot slot for Radio Label -->\n        <slot>{{ label }}</slot>\n      </div>\n    </label>\n    <div\n      v-if=\"$slots.description || description || hasMessages\"\n      class=\"d-radio__messages\"\n      data-qa=\"radio-description-messages\"\n    >\n      <div\n        v-if=\"$slots.description || description\"\n        :class=\"['d-description', descriptionClass]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"radio-description\"\n      >\n        <!-- @slot slot for Radio Description -->\n        <slot name=\"description\">\n          {{ description }}\n        </slot>\n      </div>\n      <dt-validation-messages\n        :validation-messages=\"formattedMessages\"\n        :show-messages=\"showMessages\"\n        :class=\"messagesClass\"\n        v-bind=\"messagesChildProps\"\n        data-qa=\"dt-radio-validation-messages\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n} from '@/common/mixins/input';\nimport { RADIO_INPUT_VALIDATION_CLASSES } from './radio_constants';\nimport { DtValidationMessages } from '../validation_messages';\nimport { hasSlotContent, removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\n\n/**\n * Radios are control elements that allow the user to make a single selection.\n * They are typically used in a Radio Group which allows the user to make a selection from a list of options.\n * @see https://dialtone.dialpad.com/components/radio.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRadio',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * A provided value for the radio\n     */\n    value: {\n      type: [String, Number],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'update:modelValue',\n\n    /**\n     * Native input focus event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @property {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @property {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputValidationClass () {\n      return RADIO_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n    },\n\n    radioGroupValue () {\n      return this.groupContext?.selectedValue;\n    },\n\n    inputListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through onto the input\n         * element which will result in the handler being called twice\n         * (once on the input element and once by the emitted input event by the change listener).\n        */\n        input: () => {},\n        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\n        change: event => this.emitValue(event.target.value),\n      };\n    },\n\n    hasMessages () {\n      return this.formattedMessages.length && this.showMessages;\n    },\n  },\n\n  watch: {\n    radioGroupValue: {\n      immediate: true,\n      handler (newRadioGroupValue) {\n        if (this.hasGroup) {\n          // update internal value when the radio group value changes\n          this.internalChecked = newRadioGroupValue === this.value;\n        }\n      },\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n    emitValue (value) {\n      if (value !== this.radioGroupValue) {\n        // update provided value if injected\n        this.setGroupValue(value);\n        this.$emit('input', value);\n        this.$emit('update:modelValue', value);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;AAsEA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY,EAAE,sBAAA,GAAsB;CAEpC,QAAQ;EAAC;EAAY;EAAgB;EAAgB;EAAc;CAEnE,cAAc;CAEd,OAAO,EAIL,OAAO;EACL,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV,EACF;CAED,OAAO;EAOL;EAOA;EAQA;EAQA;EAQA;EACD;CAED,OAAQ;AACN,SAAO,EACL,mBACD;;CAGH,UAAU;EACR,uBAAwB;AACtB,UAAO,EAA+B,KAAK;;EAG7C,kBAAmB;AACjB,UAAO,KAAK,cAAc;;EAG5B,iBAAkB;AAChB,UAAO;IAML,aAAa;IACb,UAAS,MAAS,KAAK,MAAM,WAAW,EAAM;IAC9C,WAAU,MAAS,KAAK,MAAM,YAAY,EAAM;IAChD,SAAQ,MAAS,KAAK,UAAU,EAAM,OAAO,MAAM;IACpD;;EAGH,cAAe;AACb,UAAO,KAAK,kBAAkB,UAAU,KAAK;;EAEhD;CAED,OAAO,EACL,iBAAiB;EACf,WAAW;EACX,QAAS,GAAoB;AAC3B,GAAI,KAAK,aAEP,KAAK,kBAAkB,MAAuB,KAAK;;EAGxD,EACF;CAED,SAAS;EACP;EACA;EACA,UAAW,GAAO;AAChB,GAAI,MAAU,KAAK,oBAEjB,KAAK,cAAc,EAAM,EACzB,KAAK,MAAM,SAAS,EAAM,EAC1B,KAAK,MAAM,qBAAqB,EAAM;;EAG3C;CACF,QAvLU,OAAM,kBAAgB;;;;;;;CAuB3B,OAAM;CACN,WAAQ;;;;aA7BZ,EAkDM,OAlDN,EAkDM,EAjDH,OAAO,EAAA,WAAS,EACT,EAAA,mBAAmB,EAAA,OAAM,CAAA,EAAA,CAEjC,EAqBQ,SAAA,EArBA,OAAK,EAAA,CAAA,iBAAA,EAAA,2BAAiD,EAAA,kBAAgB,CAAA,CAAA,EAAA,EAAA,CAC5E,EAWM,OAXN,GAWM,CAVJ,EASC,SATD,EASC;EARE,SAAS,EAAA;EACT,MAAM,EAAA;EACN,OAAO,EAAA;EACP,UAAU,EAAA;EACX,MAAK;EACJ,OAAK;GAAA;GAAc,EAAA;GAAsB,EAAA;GAAU;IAC5C,EAAA,sBAAsB,EAAA,OAAM,EACpC,EAAqB,EAAf,gBAAc,GAAA,CAAA,EAAA,MAAA,IAAA,EAAA,CAAA,CAAA,EAGxB,EAOM,OAPN,EAOM,EANH,OAAK,CAAG,EAAA,YAAU,+BAAA,EAAA,EACX,EAAA,iBAAe,EACvB,WAAQ,eAAa,CAAA,EAAA,CAGrB,EAAwB,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EAAf,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,EAAA,EAIV,EAAA,OAAO,eAAe,EAAA,eAAe,EAAA,eAAA,GAAA,EAD7C,EAuBM,OAvBN,GAuBM,CAjBI,EAAA,OAAO,eAAe,EAAA,eAAA,GAAA,EAD9B,EAUM,OAVN,EAUM;;EARH,OAAK,CAAA,iBAAoB,EAAA,iBAAgB;IAClC,EAAA,uBAAqB,EAC7B,WAAQ,qBAAmB,CAAA,EAAA,CAG3B,EAEO,EAAA,QAAA,eAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,YAAW,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,GAAA,IAAA,EAAA,IAAA,GAAA,EAGlB,EAME,GANF,EAME;EALC,uBAAqB,EAAA;EACrB,iBAAe,EAAA;EACf,OAAO,EAAA;IACA,EAAA,oBAAkB,EAC1B,WAAQ,gCAA8B,CAAA,EAAA,MAAA,IAAA;EAAA;EAAA;EAAA;EAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA"}

package/dist/lib/radio-group/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./radio-group.cjs`);exports.DtRadioGroup=e.default;

package/dist/lib/radio-group/index.js

@@ -0,0 +1,2 @@
+import e from "./radio-group.js";
+export { e as DtRadioGroup };

package/dist/lib/radio-group/radio-group.cjs

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={compatConfig:{MODE:3},name:`DtRadioGroup`,extends:require(`../input-group/input-group.cjs`).default,props:{modelValue:{type:[String,Number],default:``},dataQaGroup:{type:String,default:`radio-group`},dataQaGroupLegend:{type:String,default:`radio-group-legend`},dataQaGroupMessages:{type:String,default:`radio-group-messages`}},emits:[`input`,`update:modelValue`],data(){return{internalValue:this.modelValue}},watch:{modelValue(e){this.internalValue=e},internalValue:{immediate:!0,handler(e){this.provideObj.selectedValue=e}}},methods:{setGroupValue(e){this.$emit(`input`,e),this.$emit(`update:modelValue`,e)},getMessageKey(e,t){return`radio-group-message-${e}-${t}-${this.id}`}}};exports.default=e;
+//# sourceMappingURL=radio-group.cjs.map

package/dist/lib/radio-group/radio-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.cjs","names":[],"sources":["../../../components/radio_group/radio_group.vue"],"sourcesContent":["<script>\nimport { DtInputGroup } from '../input_group';\n\n/**\n * Radio Groups are control elements that allow the user to make a single selection from a list of options.\n * @see https://dialtone.dialpad.com/components/radio_group.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRadioGroup',\n\n  extends: DtInputGroup,\n\n  props: {\n    /**\n     * A provided value for the radio group\n     * @model value\n     */\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n\n    /**\n     * A data qa tag for the radio group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'radio-group',\n    },\n\n    /**\n     * A data qa tag for the radio group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'radio-group-legend',\n    },\n\n    /**\n     * A data qa tag for the radio group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'radio-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    return {\n      internalValue: this.modelValue,\n    };\n  },\n\n  watch: {\n    modelValue (newValue) {\n      this.internalValue = newValue;\n    },\n\n    /*\n    * watching value to support 2 way binding for slotted radios.\n    * need this to pass value to slotted checkboxes if modified outside\n    * radio group.\n    */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.selectedValue = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted radios.\n     * slotted radios will change this value and need to emit new value up.\n     */\n    setGroupValue (newValue) {\n      this.$emit('input', newValue);\n      this.$emit('update:modelValue', newValue);\n    },\n\n    getMessageKey (type, index) {\n      return `radio-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"mappings":"+FAOA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,eAEN,kDAAS,QAET,MAAO,CAKL,WAAY,CACV,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,GACV,CAKD,YAAa,CACX,KAAM,OACN,QAAS,cACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,qBACV,CAKD,oBAAqB,CACnB,KAAM,OACN,QAAS,uBACV,CACF,CAED,MAAO,CAOL,QAOA,oBACD,CAED,MAAQ,CACN,MAAO,CACL,cAAe,KAAK,WACrB,EAGH,MAAO,CACL,WAAY,EAAU,CACpB,KAAK,cAAgB,GAQvB,cAAe,CACb,UAAW,GACX,QAAS,EAAkB,CACzB,KAAK,WAAW,cAAgB,GAEnC,CACF,CAED,QAAS,CAKP,cAAe,EAAU,CACvB,KAAK,MAAM,QAAS,EAAS,CAC7B,KAAK,MAAM,oBAAqB,EAAS,EAG3C,cAAe,EAAM,EAAO,CAC1B,MAAO,uBAAuB,EAAK,GAAG,EAAM,GAAG,KAAK,MAEvD,CACF"}

package/dist/lib/radio-group/radio-group.js

@@ -0,0 +1,52 @@
+import e from "../input-group/input-group.js";
+//#region components/radio_group/radio_group.vue
+var t = {
+	compatConfig: { MODE: 3 },
+	name: "DtRadioGroup",
+	extends: e,
+	props: {
+		modelValue: {
+			type: [String, Number],
+			default: ""
+		},
+		dataQaGroup: {
+			type: String,
+			default: "radio-group"
+		},
+		dataQaGroupLegend: {
+			type: String,
+			default: "radio-group-legend"
+		},
+		dataQaGroupMessages: {
+			type: String,
+			default: "radio-group-messages"
+		}
+	},
+	emits: ["input", "update:modelValue"],
+	data() {
+		return { internalValue: this.modelValue };
+	},
+	watch: {
+		modelValue(e) {
+			this.internalValue = e;
+		},
+		internalValue: {
+			immediate: !0,
+			handler(e) {
+				this.provideObj.selectedValue = e;
+			}
+		}
+	},
+	methods: {
+		setGroupValue(e) {
+			this.$emit("input", e), this.$emit("update:modelValue", e);
+		},
+		getMessageKey(e, t) {
+			return `radio-group-message-${e}-${t}-${this.id}`;
+		}
+	}
+};
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=radio-group.js.map

package/dist/lib/radio-group/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","names":[],"sources":["../../../components/radio_group/radio_group.vue"],"sourcesContent":["<script>\nimport { DtInputGroup } from '../input_group';\n\n/**\n * Radio Groups are control elements that allow the user to make a single selection from a list of options.\n * @see https://dialtone.dialpad.com/components/radio_group.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRadioGroup',\n\n  extends: DtInputGroup,\n\n  props: {\n    /**\n     * A provided value for the radio group\n     * @model value\n     */\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n\n    /**\n     * A data qa tag for the radio group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'radio-group',\n    },\n\n    /**\n     * A data qa tag for the radio group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'radio-group-legend',\n    },\n\n    /**\n     * A data qa tag for the radio group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'radio-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'input',\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String | Number}\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    return {\n      internalValue: this.modelValue,\n    };\n  },\n\n  watch: {\n    modelValue (newValue) {\n      this.internalValue = newValue;\n    },\n\n    /*\n    * watching value to support 2 way binding for slotted radios.\n    * need this to pass value to slotted checkboxes if modified outside\n    * radio group.\n    */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.selectedValue = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted radios.\n     * slotted radios will change this value and need to emit new value up.\n     */\n    setGroupValue (newValue) {\n      this.$emit('input', newValue);\n      this.$emit('update:modelValue', newValue);\n    },\n\n    getMessageKey (type, index) {\n      return `radio-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"mappings":";;AAOA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,SAAS;CAET,OAAO;EAKL,YAAY;GACV,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACV;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAKD,qBAAqB;GACnB,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO,CAOL,SAOA,oBACD;CAED,OAAQ;AACN,SAAO,EACL,eAAe,KAAK,YACrB;;CAGH,OAAO;EACL,WAAY,GAAU;AACpB,QAAK,gBAAgB;;EAQvB,eAAe;GACb,WAAW;GACX,QAAS,GAAkB;AACzB,SAAK,WAAW,gBAAgB;;GAEnC;EACF;CAED,SAAS;EAKP,cAAe,GAAU;AAEvB,GADA,KAAK,MAAM,SAAS,EAAS,EAC7B,KAAK,MAAM,qBAAqB,EAAS;;EAG3C,cAAe,GAAM,GAAO;AAC1B,UAAO,uBAAuB,EAAK,GAAG,EAAM,GAAG,KAAK;;EAEvD;CACF"}

package/dist/lib/radio-group/radios-decorator.cjs

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../radio/radio.cjs`);require(`../radio/index.cjs`);let n=require(`vue`);var r={compatConfig:{MODE:3},name:`RadiosDecorator`,components:{DtRadio:t.default},created(){this.options=[{label:`Apple`,value:`apple`},{label:`Banana`,value:`banana`},{label:`Other`,value:`other`}]}};function i(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`dt-radio`);return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,null,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(e.options,e=>((0,n.openBlock)(),(0,n.createBlock)(s,{key:e.value,value:e.value},{default:(0,n.withCtx)(()=>[(0,n.createElementVNode)(`span`,null,(0,n.toDisplayString)(e.label),1)]),_:2},1032,[`value`]))),128))])}var a=e.t(r,[[`render`,i]]);exports.default=a;
+//# sourceMappingURL=radios-decorator.cjs.map

package/dist/lib/radio-group/radios-decorator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radios-decorator.cjs","names":[],"sources":["../../../components/radio_group/radios_decorator.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-radio\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      :value=\"option.value\"\n    >\n      <span>{{ option.label }}</span>\n    </dt-radio>\n  </div>\n</template>\n\n<script>\nimport { DtRadio } from '../radio';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'RadiosDecorator',\n  components: { DtRadio },\n  created () {\n    this.options = [\n      { label: 'Apple', value: 'apple' },\n      { label: 'Banana', value: 'banana' },\n      { label: 'Other', value: 'other' },\n    ];\n  },\n};\n</script>\n"],"mappings":"sRAeA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,kBACN,WAAY,CAAE,QAAA,EAAA,QAAS,CACvB,SAAW,CACT,KAAK,QAAU,CACb,CAAE,MAAO,QAAS,MAAO,QAAS,CAClC,CAAE,MAAO,SAAU,MAAO,SAAU,CACpC,CAAE,MAAO,QAAS,MAAO,QAAS,CACnC,EAEJ,mHAjBO,MAAA,KAAA,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBADO,EAAA,SAAA,MAAA,EAAA,EAAA,YALQ,EAAA,QAAV,wCAKE,EAAA,CAJR,IAAK,EAAO,MACZ,MAAO,EAAO,kCAEgB,EAAA,EAAA,EAAA,oBAAA,OAAA,MAAA,EAAA,EAAA,iBAAtB,EAAO,MAAK,CAAA,EAAA,CAAA,CAAA"}