@dialpad/dialtone-vue 3.223.0-next.2 → 3.223.0-next.4

package/dist/lib/text/text.js

@@ -1,17 +1,17 @@
 import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { TEXT_ALIGN_MODIFIERS as t, TEXT_BOX_TRIM_MODIFIERS as n, TEXT_DENSITY_MODIFIERS as r, TEXT_HEADLINE_ONLY_SIZES as i, TEXT_KIND_MODIFIERS as a, TEXT_LINE_CLAMP_CLASS as o, TEXT_NUMERIC_CLASS as s, TEXT_SIZE_MAP as c, TEXT_SIZE_MODIFIERS as l, TEXT_STRENGTH_MODIFIERS as u, TEXT_TONE_MODIFIERS as d, TEXT_TRUNCATE_CLASS as f, TEXT_WRAP_MODIFIERS as p } from "./text-constants.js";
-import { createBlock as m, normalizeClass as h, normalizeStyle as g, openBlock as _, renderSlot as v, resolveDynamicComponent as y, withCtx as b } from "vue";
+import { TEXT_ALIGN_MODIFIERS as t, TEXT_BOX_TRIM_MODIFIERS as n, TEXT_DENSITY_MODIFIERS as r, TEXT_FAMILY_MODIFIERS as i, TEXT_FONT_SIZE_MODIFIERS as a, TEXT_HEADLINE_ONLY_SIZES as o, TEXT_ITALIC_CLASS as s, TEXT_KIND_MODIFIERS as c, TEXT_LINE_CLAMP_CLASS as l, TEXT_NUMERIC_CLASS as u, TEXT_SIZE_MAP as d, TEXT_SIZE_MODIFIERS as f, TEXT_STRENGTH_MODIFIERS as p, TEXT_TONE_MODIFIERS as m, TEXT_TRUNCATE_CLASS as h, TEXT_VARIANT_MODIFIERS as g, TEXT_WRAP_MODIFIERS as _ } from "./text-constants.js";
+import { createBlock as v, normalizeClass as y, normalizeStyle as b, openBlock as x, renderSlot as S, resolveDynamicComponent as C, withCtx as w } from "vue";
 //#region components/Text/Text.vue
-var x = "300", S = [
+var T = "300", E = [
 	"h1",
 	"h2",
 	"h3",
 	"h4",
 	"h5",
 	"h6"
-], C = !1, w = () => {
-	C = !1;
-}, T = {
+], D = !1, O = () => {
+	D = !1;
+}, k = {
 	name: "DtText",
 	props: {
 		as: {
@@ -21,16 +21,30 @@ var x = "300", S = [
 		kind: {
 			type: String,
 			default: null,
-			validator: (e) => e === null || Object.prototype.hasOwnProperty.call(a, e)
+			validator: (e) => e === null || Object.prototype.hasOwnProperty.call(c, e)
+		},
+		variant: {
+			type: String,
+			default: null,
+			validator: (e) => e === null || Object.prototype.hasOwnProperty.call(g, e)
 		},
 		size: {
 			type: [String, Number],
 			default: null
 		},
+		family: {
+			type: String,
+			default: null,
+			validator: (e) => e === null || Object.prototype.hasOwnProperty.call(i, e)
+		},
+		italic: {
+			type: Boolean,
+			default: !1
+		},
 		tone: {
 			type: String,
 			default: null,
-			validator: (e) => e === null || Object.prototype.hasOwnProperty.call(d, e)
+			validator: (e) => e === null || Object.prototype.hasOwnProperty.call(m, e)
 		},
 		align: {
 			type: String,
@@ -53,7 +67,7 @@ var x = "300", S = [
 		wrap: {
 			type: String,
 			default: null,
-			validator: (e) => e === null || Object.prototype.hasOwnProperty.call(p, e)
+			validator: (e) => e === null || Object.prototype.hasOwnProperty.call(_, e)
 		},
 		textBoxTrim: {
 			type: String,
@@ -63,7 +77,7 @@ var x = "300", S = [
 		strength: {
 			type: String,
 			default: null,
-			validator: (e) => e === null || Object.prototype.hasOwnProperty.call(u, e)
+			validator: (e) => e === null || Object.prototype.hasOwnProperty.call(p, e)
 		},
 		density: {
 			type: [String, Number],
@@ -75,39 +89,57 @@ var x = "300", S = [
 		textClasses() {
 			let e = ["d-text"], t = this.getVariantClass();
 			t && e.push(t);
-			let n = this.getAlignClass();
+			let n = this.getFontSizeClass();
 			n && e.push(n);
-			let r = this.getToneClass();
-			r && e.push(r), this.truncate && e.push(f), this.numeric && e.push(s), this.maxLines && e.push(o);
-			let i = this.getWrapClass();
+			let r = this.getFamilyClass();
+			r && e.push(r), this.italic && e.push(s);
+			let i = this.getAlignClass();
 			i && e.push(i);
-			let a = this.getTextBoxTrimClass();
-			a && e.push(a);
-			let c = this.getStrengthClass();
+			let a = this.getToneClass();
+			a && e.push(a), this.truncate && e.push(h), this.numeric && e.push(u), this.maxLines && e.push(l);
+			let o = this.getWrapClass();
+			o && e.push(o);
+			let c = this.getTextBoxTrimClass();
 			c && e.push(c);
-			let l = this.getDensityClass();
-			return l && e.push(l), e;
+			let d = this.getStrengthClass();
+			d && e.push(d);
+			let f = this.getDensityClass();
+			return f && e.push(f), e;
 		},
 		textStyles() {
 			if (this.maxLines) return { "--dt-text-line-clamp": this.maxLines };
 		}
 	},
 	mounted() {
-		!C && this.kind === "headline" && !S.includes(this.as) && (console.info("[DtText] kind=\"headline\" is used without a semantic heading element. Consider using as=\"h1|h2|h3|h4|h5|h6\" for better accessibility."), C = !0);
+		!D && this.usesHeadlineVisualStyle() && !E.includes(this.as) && (console.info("[DtText] A headline text style is used without a semantic heading element. Consider using as=\"h1|h2|h3|h4|h5|h6\" for better accessibility."), D = !0);
 	},
 	methods: {
+		usesHeadlineVisualStyle() {
+			return this.variant ? this.variant.startsWith("headline-") : this.kind === "headline";
+		},
+		usesLegacyKindSize() {
+			return !!(this.kind && !this.variant);
+		},
 		getVariantClass() {
-			if (!this.kind) return this.size && console.warn("[DtText] size prop has no effect without kind. Set kind=\"headline|body|label|code\"."), null;
-			if (!Object.prototype.hasOwnProperty.call(a, this.kind)) return console.warn(`[DtText] Unsupported kind "${this.kind}".`), null;
-			let e = l[this.kind] || [], t = (this.size == null ? null : String(this.size)) || x, n = t;
+			if (this.variant) return this.getModifierClass(this.variant, g, "variant");
+			if (!this.kind) return null;
+			if (!Object.prototype.hasOwnProperty.call(c, this.kind)) return console.warn(`[DtText] Unsupported kind "${this.kind}".`), null;
+			let e = f[this.kind] || [], t = (this.size == null ? null : String(this.size)) || T, n = t;
 			if (!e.includes(t)) {
-				if (i.includes(t)) throw Error(`[DtText] size="${t}" is only valid for kind="headline". Cannot use with kind="${this.kind}".`);
-				let r = e.includes(x) ? x : e[0];
+				if (o.includes(t)) throw Error(`[DtText] size="${t}" is only valid for kind="headline". Cannot use with kind="${this.kind}".`);
+				let r = e.includes(T) ? T : e[0];
 				r && (n = r), console.warn(`[DtText] size="${t}" is not valid for kind="${this.kind}". Using "${n}" instead.`);
 			}
 			if (!n) return null;
-			let r = c[n] || n;
-			return `${a[this.kind]}--${r}`;
+			let r = d[n] || n;
+			return `${c[this.kind]}--${r}`;
+		},
+		getFontSizeClass() {
+			if (this.size === null || this.size === void 0) return null;
+			if (!this.variant && !this.kind) return console.warn("[DtText] size must be paired with variant or legacy kind. Prefer variant for typography composition; use size only as a variant override."), null;
+			if (this.usesLegacyKindSize()) return null;
+			let e = String(this.size);
+			return a[e] || (console.warn(`[DtText] Unsupported size "${e}". Use a numeric font-size token.`), null);
 		},
 		getModifierClass(e, t, n) {
 			return e == null ? null : t[e] || (console.warn(`[DtText] Unsupported ${n} "${e}".`), null);
@@ -116,34 +148,37 @@ var x = "300", S = [
 			return this.getModifierClass(this.align, t, "align");
 		},
 		getToneClass() {
-			return this.getModifierClass(this.tone, d, "tone");
+			return this.getModifierClass(this.tone, m, "tone");
 		},
 		getWrapClass() {
-			return this.getModifierClass(this.wrap, p, "wrap");
+			return this.getModifierClass(this.wrap, _, "wrap");
 		},
 		getTextBoxTrimClass() {
 			return this.getModifierClass(this.textBoxTrim, n, "textBoxTrim");
 		},
 		getStrengthClass() {
-			return this.getModifierClass(this.strength, u, "strength");
+			return this.getModifierClass(this.strength, p, "strength");
 		},
 		getDensityClass() {
 			return this.getModifierClass(this.density, r, "density");
+		},
+		getFamilyClass() {
+			return this.getModifierClass(this.family, i, "family");
 		}
 	}
 };
-function E(e, t, n, r, i, a) {
-	return _(), m(y(n.as), {
+function A(e, t, n, r, i, a) {
+	return x(), v(C(n.as), {
 		"data-qa": "dt-text",
-		class: h(a.textClasses),
-		style: g(a.textStyles)
+		class: y(a.textClasses),
+		style: b(a.textStyles)
 	}, {
-		default: b(() => [v(e.$slots, "default")]),
+		default: w(() => [S(e.$slots, "default")]),
 		_: 3
 	}, 8, ["class", "style"]);
 }
-var D = /* @__PURE__ */ e(T, [["render", E]]);
+var j = /* @__PURE__ */ e(k, [["render", A]]);
 //#endregion
-export { D as default, w as resetHeadlineSemanticInfoFlag };
+export { j as default, O as resetHeadlineSemanticInfoFlag };
 
 //# sourceMappingURL=text.js.map

package/dist/lib/text/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","names":[],"sources":["../../../components/Text/Text.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    data-qa=\"dt-text\"\n    :class=\"textClasses\"\n    :style=\"textStyles\"\n  >\n    <!-- @slot Default slot for text content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport {\n  TEXT_KIND_MODIFIERS,\n  TEXT_SIZE_MODIFIERS,\n  TEXT_SIZE_MAP,\n  TEXT_HEADLINE_ONLY_SIZES,\n  TEXT_ALIGN_MODIFIERS,\n  TEXT_TONE_MODIFIERS,\n  TEXT_NUMERIC_CLASS,\n  TEXT_TRUNCATE_CLASS,\n  TEXT_LINE_CLAMP_CLASS,\n  TEXT_WRAP_MODIFIERS,\n  TEXT_BOX_TRIM_MODIFIERS,\n  TEXT_STRENGTH_MODIFIERS,\n  TEXT_DENSITY_MODIFIERS,\n} from './TextConstants';\n\nconst DEFAULT_SIZE = '300';\nconst SEMANTIC_HEADING_ELEMENTS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n\n// Module-level flag to emit info only once per session\nlet hasEmittedHeadlineSemanticInfo = false;\n\n// Exported for testing purposes only\nexport const resetHeadlineSemanticInfoFlag = () => {\n  hasEmittedHeadlineSemanticInfo = false;\n};\n\n/**\n * Dialtone text primitive that applies typography tokens based on semantic props.\n * @see https://dialtone.dialpad.com/components/text.html\n */\nexport default {\n  name: 'DtText',\n\n  props: {\n    /**\n     * HTML tag or component used for rendering.\n     * @values span, p, h1, h2, h3, h4, h5, h6, label, div, component\n     */\n    as: {\n      type: String,\n      default: 'span',\n    },\n\n    /**\n     * Typography kind mapping to headline/body/label/code token sets.\n     * @values headline, body, label, code\n     */\n    kind: {\n      type: String,\n      default: null,\n      validator: (value) => {\n        return value === null || Object.prototype.hasOwnProperty.call(TEXT_KIND_MODIFIERS, value);\n      },\n    },\n\n    /**\n     * Size variant within the selected `kind`. Falls back to `md`/300 if unsupported.\n     * Headline supports all sizes; body/label/code support 100-400.\n     * @values 100, 200, 300, 400, 500, 600, 700\n     */\n    size: {\n      type: [String, Number],\n      default: null,\n    },\n\n    /**\n     * Semantic foreground color.\n     * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n     */\n    tone: {\n      type: String,\n      default: null,\n      validator: (value) => {\n        return value === null || Object.prototype.hasOwnProperty.call(TEXT_TONE_MODIFIERS, value);\n      },\n    },\n\n    /**\n     * Logical text alignment. Requires block/inline-block context.\n     * @values start, center, end, justify\n     */\n    align: {\n      type: String,\n      default: null,\n      validator: (value) => {\n        return value === null || Object.prototype.hasOwnProperty.call(TEXT_ALIGN_MODIFIERS, value);\n      },\n    },\n\n    /**\n     * Enables single-line truncation (i.e. ellipsis) when true; requires block/inline-block context.\n     */\n    truncate: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Applies multi-line truncation (i.e. clamp) when greater than zero; requires block/inline-block context.\n     */\n    maxLines: {\n      type: Number,\n      default: null,\n      validator: (value) => {\n        return value === null || (Number.isInteger(value) && value > 0);\n      },\n    },\n\n    /**\n     * Renders numeric content with tabular figures.\n     */\n    numeric: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls text wrapping behavior.\n     * @values wrap, nowrap, balance, pretty\n     */\n    wrap: {\n      type: String,\n      default: null,\n      validator: (value) => {\n        return value === null || Object.prototype.hasOwnProperty.call(TEXT_WRAP_MODIFIERS, value);\n      },\n    },\n\n    /**\n     * Controls text-box-trim (leading space above/below text). Useful for tight component layouts.\n     * @values start, end, both\n     */\n    textBoxTrim: {\n      type: String,\n      default: null,\n      validator: (value) => {\n        return value === null || Object.prototype.hasOwnProperty.call(TEXT_BOX_TRIM_MODIFIERS, value);\n      },\n    },\n\n    /**\n     * Overrides font-weight. Applies to any kind/size combination.\n     * @values bold, semibold, medium, normal\n     */\n    strength: {\n      type: String,\n      default: null,\n      validator: (value) => {\n        return value === null || Object.prototype.hasOwnProperty.call(TEXT_STRENGTH_MODIFIERS, value);\n      },\n    },\n\n    /**\n     * Overrides line-height. Applies to any kind/size combination.\n     * @values 100, 200, 300, 400, 500, 600\n     */\n    density: {\n      type: [String, Number],\n      default: null,\n      validator: (value) => {\n        return value === null || Object.prototype.hasOwnProperty.call(TEXT_DENSITY_MODIFIERS, value);\n      },\n    },\n  },\n\n  computed: {\n    textClasses () {\n      const classes = ['d-text'];\n      const variantClass = this.getVariantClass();\n      if (variantClass) {\n        classes.push(variantClass);\n      }\n\n      const alignClass = this.getAlignClass();\n      if (alignClass) {\n        classes.push(alignClass);\n      }\n\n      const toneClass = this.getToneClass();\n      if (toneClass) {\n        classes.push(toneClass);\n      }\n\n      if (this.truncate) {\n        classes.push(TEXT_TRUNCATE_CLASS);\n      }\n\n      if (this.numeric) {\n        classes.push(TEXT_NUMERIC_CLASS);\n      }\n\n      if (this.maxLines) {\n        classes.push(TEXT_LINE_CLAMP_CLASS);\n      }\n\n      const wrapClass = this.getWrapClass();\n      if (wrapClass) {\n        classes.push(wrapClass);\n      }\n\n      const textBoxTrimClass = this.getTextBoxTrimClass();\n      if (textBoxTrimClass) {\n        classes.push(textBoxTrimClass);\n      }\n\n      const strengthClass = this.getStrengthClass();\n      if (strengthClass) {\n        classes.push(strengthClass);\n      }\n\n      const densityClass = this.getDensityClass();\n      if (densityClass) {\n        classes.push(densityClass);\n      }\n\n      return classes;\n    },\n\n    textStyles () {\n      if (!this.maxLines) {\n        return undefined;\n      }\n\n      return {\n        '--dt-text-line-clamp': this.maxLines,\n      };\n    },\n  },\n\n  mounted () {\n    // Emit info once per session when headline is used without semantic heading element\n    if (\n      !hasEmittedHeadlineSemanticInfo &&\n      this.kind === 'headline' &&\n      !SEMANTIC_HEADING_ELEMENTS.includes(this.as)\n    ) {\n\n      console.info(\n        '[DtText] kind=\"headline\" is used without a semantic heading element. ' +\n        'Consider using as=\"h1|h2|h3|h4|h5|h6\" for better accessibility.',\n      );\n      hasEmittedHeadlineSemanticInfo = true;\n    }\n  },\n\n  methods: {\n    getVariantClass () {\n      if (!this.kind) {\n        if (this.size) {\n          console.warn('[DtText] size prop has no effect without kind. Set kind=\"headline|body|label|code\".');\n        }\n        return null;\n      }\n\n      if (!Object.prototype.hasOwnProperty.call(TEXT_KIND_MODIFIERS, this.kind)) {\n        console.warn(`[DtText] Unsupported kind \"${this.kind}\".`);\n        return null;\n      }\n\n      const allowedSizes = TEXT_SIZE_MODIFIERS[this.kind] || [];\n      const rawSize = this.size != null ? String(this.size) : null;\n      const requestedSize = rawSize || DEFAULT_SIZE;\n      let resolvedSize = requestedSize;\n\n      if (!allowedSizes.includes(requestedSize)) {\n        // Headline-only sizes (3xl, 2xl, xl, 500, 600, 700) throw an error when used with incompatible kinds\n        if (TEXT_HEADLINE_ONLY_SIZES.includes(requestedSize)) {\n          throw new Error(\n            `[DtText] size=\"${requestedSize}\" is only valid for kind=\"headline\". ` +\n            `Cannot use with kind=\"${this.kind}\".`,\n          );\n        }\n\n        // Universal sizes fall back gracefully with a warning\n        const fallbackSize = allowedSizes.includes(DEFAULT_SIZE) ? DEFAULT_SIZE : allowedSizes[0];\n        if (fallbackSize) {\n          resolvedSize = fallbackSize;\n        }\n        console.warn(`[DtText] size=\"${requestedSize}\" is not valid for kind=\"${this.kind}\". Using \"${resolvedSize}\" instead.`);\n      }\n\n      if (!resolvedSize) {\n        return null;\n      }\n\n      // Map numeric sizes to t-shirt CSS class suffix\n      const cssSuffix = TEXT_SIZE_MAP[resolvedSize] || resolvedSize;\n      return `${TEXT_KIND_MODIFIERS[this.kind]}--${cssSuffix}`;\n    },\n\n    getModifierClass (value, modifiers, propName) {\n      if (value === null || value === undefined) {\n        return null;\n      }\n\n      const className = modifiers[value];\n      if (!className) {\n        console.warn(`[DtText] Unsupported ${propName} \"${value}\".`);\n        return null;\n      }\n\n      return className;\n    },\n\n    getAlignClass () {\n      return this.getModifierClass(this.align, TEXT_ALIGN_MODIFIERS, 'align');\n    },\n\n    getToneClass () {\n      return this.getModifierClass(this.tone, TEXT_TONE_MODIFIERS, 'tone');\n    },\n\n    getWrapClass () {\n      return this.getModifierClass(this.wrap, TEXT_WRAP_MODIFIERS, 'wrap');\n    },\n\n    getTextBoxTrimClass () {\n      return this.getModifierClass(this.textBoxTrim, TEXT_BOX_TRIM_MODIFIERS, 'textBoxTrim');\n    },\n\n    getStrengthClass () {\n      return this.getModifierClass(this.strength, TEXT_STRENGTH_MODIFIERS, 'strength');\n    },\n\n    getDensityClass () {\n      return this.getModifierClass(this.density, TEXT_DENSITY_MODIFIERS, 'density');\n    },\n  },\n};\n</script>\n"],"mappings":";;;;AA6BA,IAAM,IAAe,OACf,IAA4B;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;CAAK,EAGlE,IAAiC,IAGxB,UAAsC;AACjD,KAAiC;GAO9B,IAAU;CACb,MAAM;CAEN,OAAO;EAKL,IAAI;GACF,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MACH,MAAU,QAAQ,OAAO,UAAU,eAAe,KAAK,GAAqB,EAAM;GAE5F;EAOD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MACH,MAAU,QAAQ,OAAO,UAAU,eAAe,KAAK,GAAqB,EAAM;GAE5F;EAMD,OAAO;GACL,MAAM;GACN,SAAS;GACT,YAAY,MACH,MAAU,QAAQ,OAAO,UAAU,eAAe,KAAK,GAAsB,EAAM;GAE7F;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACT,YAAY,MACH,MAAU,QAAS,OAAO,UAAU,EAAK,IAAK,IAAQ;GAEhE;EAKD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MACH,MAAU,QAAQ,OAAO,UAAU,eAAe,KAAK,GAAqB,EAAM;GAE5F;EAMD,aAAa;GACX,MAAM;GACN,SAAS;GACT,YAAY,MACH,MAAU,QAAQ,OAAO,UAAU,eAAe,KAAK,GAAyB,EAAM;GAEhG;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACT,YAAY,MACH,MAAU,QAAQ,OAAO,UAAU,eAAe,KAAK,GAAyB,EAAM;GAEhG;EAMD,SAAS;GACP,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,YAAY,MACH,MAAU,QAAQ,OAAO,UAAU,eAAe,KAAK,GAAwB,EAAM;GAE/F;EACF;CAED,UAAU;EACR,cAAe;GACb,IAAM,IAAU,CAAC,SAAS,EACpB,IAAe,KAAK,iBAAiB;AAC3C,GAAI,KACF,EAAQ,KAAK,EAAa;GAG5B,IAAM,IAAa,KAAK,eAAe;AACvC,GAAI,KACF,EAAQ,KAAK,EAAW;GAG1B,IAAM,IAAY,KAAK,cAAc;AAarC,GAZI,KACF,EAAQ,KAAK,EAAU,EAGrB,KAAK,YACP,EAAQ,KAAK,EAAoB,EAG/B,KAAK,WACP,EAAQ,KAAK,EAAmB,EAG9B,KAAK,YACP,EAAQ,KAAK,EAAsB;GAGrC,IAAM,IAAY,KAAK,cAAc;AACrC,GAAI,KACF,EAAQ,KAAK,EAAU;GAGzB,IAAM,IAAmB,KAAK,qBAAqB;AACnD,GAAI,KACF,EAAQ,KAAK,EAAiB;GAGhC,IAAM,IAAgB,KAAK,kBAAkB;AAC7C,GAAI,KACF,EAAQ,KAAK,EAAc;GAG7B,IAAM,IAAe,KAAK,iBAAiB;AAK3C,UAJI,KACF,EAAQ,KAAK,EAAa,EAGrB;;EAGT,aAAc;AACP,YAAK,SAIV,QAAO,EACL,wBAAwB,KAAK,UAC9B;;EAEJ;CAED,UAAW;AAET,EACE,CAAC,KACD,KAAK,SAAS,cACd,CAAC,EAA0B,SAAS,KAAK,GAAE,KAG3C,QAAQ,KACN,2IAED,EACD,IAAiC;;CAIrC,SAAS;EACP,kBAAmB;AACjB,OAAI,CAAC,KAAK,KAIR,QAHI,KAAK,QACP,QAAQ,KAAK,wFAAsF,EAE9F;AAGT,OAAI,CAAC,OAAO,UAAU,eAAe,KAAK,GAAqB,KAAK,KAAK,CAEvE,QADA,QAAQ,KAAK,8BAA8B,KAAK,KAAK,IAAI,EAClD;GAGT,IAAM,IAAe,EAAoB,KAAK,SAAS,EAAE,EAEnD,KADU,KAAK,QAAQ,OAA2B,OAApB,OAAO,KAAK,KAAI,KACnB,GAC7B,IAAe;AAEnB,OAAI,CAAC,EAAa,SAAS,EAAc,EAAE;AAEzC,QAAI,EAAyB,SAAS,EAAc,CAClD,OAAU,MACR,kBAAkB,EAAc,6DACP,KAAK,KAAK,IACpC;IAIH,IAAM,IAAe,EAAa,SAAS,EAAY,GAAI,IAAe,EAAa;AAIvF,IAHI,MACF,IAAe,IAEjB,QAAQ,KAAK,kBAAkB,EAAc,2BAA2B,KAAK,KAAK,YAAY,EAAa,YAAY;;AAGzH,OAAI,CAAC,EACH,QAAO;GAIT,IAAM,IAAY,EAAc,MAAiB;AACjD,UAAO,GAAG,EAAoB,KAAK,MAAM,IAAI;;EAG/C,iBAAkB,GAAO,GAAW,GAAU;AAW5C,UAVI,KAAU,OACL,OAGS,EAAU,OAE1B,QAAQ,KAAK,wBAAwB,EAAQ,IAAK,EAAM,IAAI,EACrD;;EAMX,gBAAiB;AACf,UAAO,KAAK,iBAAiB,KAAK,OAAO,GAAsB,QAAQ;;EAGzE,eAAgB;AACd,UAAO,KAAK,iBAAiB,KAAK,MAAM,GAAqB,OAAO;;EAGtE,eAAgB;AACd,UAAO,KAAK,iBAAiB,KAAK,MAAM,GAAqB,OAAO;;EAGtE,sBAAuB;AACrB,UAAO,KAAK,iBAAiB,KAAK,aAAa,GAAyB,cAAc;;EAGxF,mBAAoB;AAClB,UAAO,KAAK,iBAAiB,KAAK,UAAU,GAAyB,WAAW;;EAGlF,kBAAmB;AACjB,UAAO,KAAK,iBAAiB,KAAK,SAAS,GAAwB,UAAU;;EAEhF;CACF;;aArVC,EAQY,EAPL,EAAA,GAAE,EAAA;EACP,WAAQ;EACP,OAAK,EAAE,EAAA,YAAW;EAClB,OAAK,EAAE,EAAA,WAAU;;mBAGV,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"text.js","names":[],"sources":["../../../components/Text/Text.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    data-qa=\"dt-text\"\n    :class=\"textClasses\"\n    :style=\"textStyles\"\n  >\n    <!-- @slot Default slot for text content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport {\n  TEXT_KIND_MODIFIERS,\n  TEXT_VARIANT_MODIFIERS,\n  TEXT_SIZE_MODIFIERS,\n  TEXT_SIZE_MAP,\n  TEXT_HEADLINE_ONLY_SIZES,\n  TEXT_FONT_SIZE_MODIFIERS,\n  TEXT_FAMILY_MODIFIERS,\n  TEXT_ITALIC_CLASS,\n  TEXT_ALIGN_MODIFIERS,\n  TEXT_TONE_MODIFIERS,\n  TEXT_NUMERIC_CLASS,\n  TEXT_TRUNCATE_CLASS,\n  TEXT_LINE_CLAMP_CLASS,\n  TEXT_WRAP_MODIFIERS,\n  TEXT_BOX_TRIM_MODIFIERS,\n  TEXT_STRENGTH_MODIFIERS,\n  TEXT_DENSITY_MODIFIERS,\n} from './TextConstants';\n\nconst DEFAULT_SIZE = '300';\nconst SEMANTIC_HEADING_ELEMENTS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n\n// Module-level flag to emit info only once per session\nlet hasEmittedHeadlineSemanticInfo = false;\n\n// Exported for testing purposes only\nexport const resetHeadlineSemanticInfoFlag = () => {\n  hasEmittedHeadlineSemanticInfo = false;\n};\n\n/**\n * Dialtone text primitive that applies typography tokens based on semantic props.\n * @see https://dialtone.dialpad.com/components/text.html\n */\nexport default {\n  name: 'DtText',\n\n  props: {\n    /**\n     * HTML tag or component used for rendering.\n     * @values span, p, h1, h2, h3, h4, h5, h6, label, div, component\n     */\n    as: {\n      type: String,\n      default: 'span',\n    },\n\n    /**\n     * Typography kind mapping to headline/body/label/code token sets.\n     * @values headline, body, label, code\n     * @deprecated Use variant instead\n     */\n    kind: {\n      type: String,\n      default: null,\n      validator: (value) => {\n        return (\n          value === null ||\n          Object.prototype.hasOwnProperty.call(TEXT_KIND_MODIFIERS, value)\n        );\n      },\n    },\n\n    /**\n     * Typography variant mapping to a complete token-backed composition.\n     * @values headline-3xl, headline-2xl, headline-xl, headline-lg, headline-md, headline-sm, headline-xs, body-lg, body-md, body-sm, body-xs, label-lg, label-md, label-sm, label-xs, code-lg, code-md, code-sm, code-xs\n     */\n    variant: {\n      type: String,\n      default: null,\n      validator: (value) => {\n        return (\n          value === null ||\n          Object.prototype.hasOwnProperty.call(TEXT_VARIANT_MODIFIERS, value)\n        );\n      },\n    },\n\n    /**\n     * Raw font-size token. Must be paired with `variant` for overrides or legacy `kind` for composition size.\n     * @values 50, 75, 100, 125, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800\n     */\n    size: {\n      type: [String, Number],\n      default: null,\n    },\n\n    /**\n     * Overrides font-family. By default, no font-family class is emitted and text inherits naturally.\n     * @values inherit, custom, sans, mono, expressive\n     */\n    family: {\n      type: String,\n      default: null,\n      validator: (value) => {\n        return (\n          value === null ||\n          Object.prototype.hasOwnProperty.call(TEXT_FAMILY_MODIFIERS, value)\n        );\n      },\n    },\n\n    /**\n     * Applies italic font style when true.\n     */\n    italic: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Semantic foreground color.\n     * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n     */\n    tone: {\n      type: String,\n      default: null,\n      validator: (value) => {\n        return (\n          value === null ||\n          Object.prototype.hasOwnProperty.call(TEXT_TONE_MODIFIERS, value)\n        );\n      },\n    },\n\n    /**\n     * Logical text alignment. Requires block/inline-block context.\n     * @values start, center, end, justify\n     */\n    align: {\n      type: String,\n      default: null,\n      validator: (value) => {\n        return (\n          value === null ||\n          Object.prototype.hasOwnProperty.call(TEXT_ALIGN_MODIFIERS, value)\n        );\n      },\n    },\n\n    /**\n     * Enables single-line truncation (i.e. ellipsis) when true; requires block/inline-block context.\n     */\n    truncate: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Applies multi-line truncation (i.e. clamp) when greater than zero; requires block/inline-block context.\n     */\n    maxLines: {\n      type: Number,\n      default: null,\n      validator: (value) => {\n        return value === null || (Number.isInteger(value) && value > 0);\n      },\n    },\n\n    /**\n     * Renders numeric content with tabular figures.\n     */\n    numeric: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls text wrapping behavior.\n     * @values wrap, nowrap, balance, pretty\n     */\n    wrap: {\n      type: String,\n      default: null,\n      validator: (value) => {\n        return (\n          value === null ||\n          Object.prototype.hasOwnProperty.call(TEXT_WRAP_MODIFIERS, value)\n        );\n      },\n    },\n\n    /**\n     * Controls text-box-trim (leading space above/below text). Useful for tight component layouts.\n     * @values start, end, both\n     */\n    textBoxTrim: {\n      type: String,\n      default: null,\n      validator: (value) => {\n        return (\n          value === null ||\n          Object.prototype.hasOwnProperty.call(TEXT_BOX_TRIM_MODIFIERS, value)\n        );\n      },\n    },\n\n    /**\n     * Overrides font-weight. Applies to any kind/size combination.\n     * @values bold, semibold, medium, normal\n     */\n    strength: {\n      type: String,\n      default: null,\n      validator: (value) => {\n        return (\n          value === null ||\n          Object.prototype.hasOwnProperty.call(TEXT_STRENGTH_MODIFIERS, value)\n        );\n      },\n    },\n\n    /**\n     * Overrides line-height. Applies to any kind/size combination.\n     * @values 100, 200, 300, 400, 500, 600\n     */\n    density: {\n      type: [String, Number],\n      default: null,\n      validator: (value) => {\n        return (\n          value === null ||\n          Object.prototype.hasOwnProperty.call(TEXT_DENSITY_MODIFIERS, value)\n        );\n      },\n    },\n  },\n\n  computed: {\n    textClasses() {\n      const classes = ['d-text'];\n      const variantClass = this.getVariantClass();\n      if (variantClass) {\n        classes.push(variantClass);\n      }\n\n      const fontSizeClass = this.getFontSizeClass();\n      if (fontSizeClass) {\n        classes.push(fontSizeClass);\n      }\n\n      const familyClass = this.getFamilyClass();\n      if (familyClass) {\n        classes.push(familyClass);\n      }\n\n      if (this.italic) {\n        classes.push(TEXT_ITALIC_CLASS);\n      }\n\n      const alignClass = this.getAlignClass();\n      if (alignClass) {\n        classes.push(alignClass);\n      }\n\n      const toneClass = this.getToneClass();\n      if (toneClass) {\n        classes.push(toneClass);\n      }\n\n      if (this.truncate) {\n        classes.push(TEXT_TRUNCATE_CLASS);\n      }\n\n      if (this.numeric) {\n        classes.push(TEXT_NUMERIC_CLASS);\n      }\n\n      if (this.maxLines) {\n        classes.push(TEXT_LINE_CLAMP_CLASS);\n      }\n\n      const wrapClass = this.getWrapClass();\n      if (wrapClass) {\n        classes.push(wrapClass);\n      }\n\n      const textBoxTrimClass = this.getTextBoxTrimClass();\n      if (textBoxTrimClass) {\n        classes.push(textBoxTrimClass);\n      }\n\n      const strengthClass = this.getStrengthClass();\n      if (strengthClass) {\n        classes.push(strengthClass);\n      }\n\n      const densityClass = this.getDensityClass();\n      if (densityClass) {\n        classes.push(densityClass);\n      }\n\n      return classes;\n    },\n\n    textStyles() {\n      if (!this.maxLines) {\n        return undefined;\n      }\n\n      return {\n        '--dt-text-line-clamp': this.maxLines,\n      };\n    },\n  },\n\n  mounted() {\n    // Emit info once per session when headline is used without semantic heading element\n    if (\n      !hasEmittedHeadlineSemanticInfo &&\n      this.usesHeadlineVisualStyle() &&\n      !SEMANTIC_HEADING_ELEMENTS.includes(this.as)\n    ) {\n      console.info(\n        '[DtText] A headline text style is used without a semantic heading element. ' +\n          'Consider using as=\"h1|h2|h3|h4|h5|h6\" for better accessibility.',\n      );\n      hasEmittedHeadlineSemanticInfo = true;\n    }\n  },\n\n  methods: {\n    usesHeadlineVisualStyle() {\n      if (this.variant) {\n        return this.variant.startsWith('headline-');\n      }\n\n      return this.kind === 'headline';\n    },\n\n    usesLegacyKindSize() {\n      return Boolean(this.kind && !this.variant);\n    },\n\n    getVariantClass() {\n      if (this.variant) {\n        return this.getModifierClass(\n          this.variant,\n          TEXT_VARIANT_MODIFIERS,\n          'variant',\n        );\n      }\n\n      if (!this.kind) {\n        return null;\n      }\n\n      if (\n        !Object.prototype.hasOwnProperty.call(TEXT_KIND_MODIFIERS, this.kind)\n      ) {\n        console.warn(`[DtText] Unsupported kind \"${this.kind}\".`);\n        return null;\n      }\n\n      const allowedSizes = TEXT_SIZE_MODIFIERS[this.kind] || [];\n      const rawSize = this.size != null ? String(this.size) : null;\n      const requestedSize = rawSize || DEFAULT_SIZE;\n      let resolvedSize = requestedSize;\n\n      if (!allowedSizes.includes(requestedSize)) {\n        // Headline-only sizes (3xl, 2xl, xl, 500, 600, 700) throw an error when used with incompatible kinds\n        if (TEXT_HEADLINE_ONLY_SIZES.includes(requestedSize)) {\n          throw new Error(\n            `[DtText] size=\"${requestedSize}\" is only valid for kind=\"headline\". ` +\n              `Cannot use with kind=\"${this.kind}\".`,\n          );\n        }\n\n        // Universal sizes fall back gracefully with a warning\n        const fallbackSize = allowedSizes.includes(DEFAULT_SIZE)\n          ? DEFAULT_SIZE\n          : allowedSizes[0];\n        if (fallbackSize) {\n          resolvedSize = fallbackSize;\n        }\n        console.warn(\n          `[DtText] size=\"${requestedSize}\" is not valid for kind=\"${this.kind}\". Using \"${resolvedSize}\" instead.`,\n        );\n      }\n\n      if (!resolvedSize) {\n        return null;\n      }\n\n      // Map numeric sizes to t-shirt CSS class suffix\n      const cssSuffix = TEXT_SIZE_MAP[resolvedSize] || resolvedSize;\n      return `${TEXT_KIND_MODIFIERS[this.kind]}--${cssSuffix}`;\n    },\n\n    getFontSizeClass() {\n      if (this.size === null || this.size === undefined) {\n        return null;\n      }\n\n      if (!this.variant && !this.kind) {\n        console.warn(\n          '[DtText] size must be paired with variant or legacy kind. ' +\n            'Prefer variant for typography composition; use size only as a variant override.',\n        );\n        return null;\n      }\n\n      if (this.usesLegacyKindSize()) {\n        return null;\n      }\n\n      const size = String(this.size);\n      const className = TEXT_FONT_SIZE_MODIFIERS[size];\n      if (className) {\n        return className;\n      }\n\n      console.warn(\n        `[DtText] Unsupported size \"${size}\". Use a numeric font-size token.`,\n      );\n      return null;\n    },\n\n    getModifierClass(value, modifiers, propName) {\n      if (value === null || value === undefined) {\n        return null;\n      }\n\n      const className = modifiers[value];\n      if (!className) {\n        console.warn(`[DtText] Unsupported ${propName} \"${value}\".`);\n        return null;\n      }\n\n      return className;\n    },\n\n    getAlignClass() {\n      return this.getModifierClass(this.align, TEXT_ALIGN_MODIFIERS, 'align');\n    },\n\n    getToneClass() {\n      return this.getModifierClass(this.tone, TEXT_TONE_MODIFIERS, 'tone');\n    },\n\n    getWrapClass() {\n      return this.getModifierClass(this.wrap, TEXT_WRAP_MODIFIERS, 'wrap');\n    },\n\n    getTextBoxTrimClass() {\n      return this.getModifierClass(\n        this.textBoxTrim,\n        TEXT_BOX_TRIM_MODIFIERS,\n        'textBoxTrim',\n      );\n    },\n\n    getStrengthClass() {\n      return this.getModifierClass(\n        this.strength,\n        TEXT_STRENGTH_MODIFIERS,\n        'strength',\n      );\n    },\n\n    getDensityClass() {\n      return this.getModifierClass(\n        this.density,\n        TEXT_DENSITY_MODIFIERS,\n        'density',\n      );\n    },\n\n    getFamilyClass() {\n      return this.getModifierClass(\n        this.family,\n        TEXT_FAMILY_MODIFIERS,\n        'family',\n      );\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/text-list/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./text-list-constants.cjs`),t=require(`../../TextList-Dd-ROFiI.cjs`),n=require(`../../TextListItem-DIlrCkaM.cjs`);exports.DT_TEXT_LIST_DEFAULT_TYPE=e.DT_TEXT_LIST_DEFAULT_TYPE,exports.DT_TEXT_LIST_GAP=e.DT_TEXT_LIST_GAP,exports.DT_TEXT_LIST_MARKERS=e.DT_TEXT_LIST_MARKERS,exports.DT_TEXT_LIST_MARKER_TONES=e.DT_TEXT_LIST_MARKER_TONES,exports.DT_TEXT_LIST_ORDERED_MARKERS=e.DT_TEXT_LIST_ORDERED_MARKERS,exports.DT_TEXT_LIST_TYPES=e.DT_TEXT_LIST_TYPES,exports.DT_TEXT_LIST_UNORDERED_MARKERS=e.DT_TEXT_LIST_UNORDERED_MARKERS,exports.DtTextList=t.t,exports.DtTextListItem=n.t;

package/dist/lib/text-list/index.js

@@ -0,0 +1,4 @@
+import { DT_TEXT_LIST_DEFAULT_TYPE as e, DT_TEXT_LIST_GAP as t, DT_TEXT_LIST_MARKERS as n, DT_TEXT_LIST_MARKER_TONES as r, DT_TEXT_LIST_ORDERED_MARKERS as i, DT_TEXT_LIST_TYPES as a, DT_TEXT_LIST_UNORDERED_MARKERS as o } from "./text-list-constants.js";
+import { t as s } from "../../TextList-B6XFfQfD.js";
+import { t as c } from "../../TextListItem-ImUi_FWh.js";
+export { e as DT_TEXT_LIST_DEFAULT_TYPE, t as DT_TEXT_LIST_GAP, n as DT_TEXT_LIST_MARKERS, r as DT_TEXT_LIST_MARKER_TONES, i as DT_TEXT_LIST_ORDERED_MARKERS, a as DT_TEXT_LIST_TYPES, o as DT_TEXT_LIST_UNORDERED_MARKERS, s as DtTextList, c as DtTextListItem };

package/dist/lib/text-list/text-list-constants.cjs

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../text/text-constants.cjs`),t=require(`../stack/stack-constants.cjs`);var n=`unordered`,r=t.DT_STACK_GAP.filter(e=>Number(e)<=400),i=Symbol(`DtTextListContext`),a=[`unordered`,`ordered`],o=[`disc`,`circle`,`square`],s=[`decimal`,`lower-alpha`,`upper-alpha`,`lower-roman`,`upper-roman`],c=[...o,...s,`none`],l=Object.keys(e.TEXT_TONE_MODIFIERS),u={DT_TEXT_LIST_DEFAULT_TYPE:n,DT_TEXT_LIST_GAP:r,DT_TEXT_LIST_CONTEXT:i,DT_TEXT_LIST_TYPES:a,DT_TEXT_LIST_UNORDERED_MARKERS:o,DT_TEXT_LIST_ORDERED_MARKERS:s,DT_TEXT_LIST_MARKERS:c,DT_TEXT_LIST_MARKER_TONES:l};exports.DT_TEXT_LIST_CONTEXT=i,exports.DT_TEXT_LIST_DEFAULT_TYPE=n,exports.DT_TEXT_LIST_GAP=r,exports.DT_TEXT_LIST_MARKERS=c,exports.DT_TEXT_LIST_MARKER_TONES=l,exports.DT_TEXT_LIST_ORDERED_MARKERS=s,exports.DT_TEXT_LIST_TYPES=a,exports.DT_TEXT_LIST_UNORDERED_MARKERS=o,exports.default=u;
+//# sourceMappingURL=text-list-constants.cjs.map

package/dist/lib/text-list/text-list-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-list-constants.cjs","names":["DT_STACK_GAP","TEXT_TONE_MODIFIERS"],"sources":["../../../components/TextList/TextListConstants.js"],"sourcesContent":["import { TEXT_TONE_MODIFIERS } from '@/components/Text/TextConstants';\nimport { DT_STACK_GAP } from '@/components/Stack/StackConstants';\n\nexport const DT_TEXT_LIST_DEFAULT_TYPE = 'unordered';\nexport const DT_TEXT_LIST_GAP = DT_STACK_GAP.filter(gap => Number(gap) <= 400);\n\nexport const DT_TEXT_LIST_CONTEXT = Symbol('DtTextListContext');\n\nexport const DT_TEXT_LIST_TYPES = ['unordered', 'ordered'];\n\nexport const DT_TEXT_LIST_UNORDERED_MARKERS = ['disc', 'circle', 'square'];\nexport const DT_TEXT_LIST_ORDERED_MARKERS = ['decimal', 'lower-alpha', 'upper-alpha', 'lower-roman', 'upper-roman'];\nexport const DT_TEXT_LIST_MARKERS = [\n  ...DT_TEXT_LIST_UNORDERED_MARKERS,\n  ...DT_TEXT_LIST_ORDERED_MARKERS,\n  'none',\n];\n\nexport const DT_TEXT_LIST_MARKER_TONES = Object.keys(TEXT_TONE_MODIFIERS);\n\nexport default {\n  DT_TEXT_LIST_DEFAULT_TYPE,\n  DT_TEXT_LIST_GAP,\n  DT_TEXT_LIST_CONTEXT,\n  DT_TEXT_LIST_TYPES,\n  DT_TEXT_LIST_UNORDERED_MARKERS,\n  DT_TEXT_LIST_ORDERED_MARKERS,\n  DT_TEXT_LIST_MARKERS,\n  DT_TEXT_LIST_MARKER_TONES,\n};\n"],"mappings":"uLAGA,IAAa,EAA4B,YAC5B,EAAmBA,EAAAA,aAAa,OAAO,GAAO,OAAO,EAAI,EAAI,IAAI,CAEjE,EAAuB,OAAO,oBAAoB,CAElD,EAAqB,CAAC,YAAa,UAAU,CAE7C,EAAiC,CAAC,OAAQ,SAAU,SAAS,CAC7D,EAA+B,CAAC,UAAW,cAAe,cAAe,cAAe,cAAc,CACtG,EAAuB,CAClC,GAAG,EACH,GAAG,EACH,OACD,CAEY,EAA4B,OAAO,KAAKC,EAAAA,oBAAoB,CAEzE,EAAe,CACb,4BACA,mBACA,uBACA,qBACA,iCACA,+BACA,uBACA,4BACD"}

package/dist/lib/text-list/text-list-constants.js

@@ -0,0 +1,31 @@
+import { TEXT_TONE_MODIFIERS as e } from "../text/text-constants.js";
+import { DT_STACK_GAP as t } from "../stack/stack-constants.js";
+//#region components/TextList/TextListConstants.js
+var n = "unordered", r = t.filter((e) => Number(e) <= 400), i = Symbol("DtTextListContext"), a = ["unordered", "ordered"], o = [
+	"disc",
+	"circle",
+	"square"
+], s = [
+	"decimal",
+	"lower-alpha",
+	"upper-alpha",
+	"lower-roman",
+	"upper-roman"
+], c = [
+	...o,
+	...s,
+	"none"
+], l = Object.keys(e), u = {
+	DT_TEXT_LIST_DEFAULT_TYPE: n,
+	DT_TEXT_LIST_GAP: r,
+	DT_TEXT_LIST_CONTEXT: i,
+	DT_TEXT_LIST_TYPES: a,
+	DT_TEXT_LIST_UNORDERED_MARKERS: o,
+	DT_TEXT_LIST_ORDERED_MARKERS: s,
+	DT_TEXT_LIST_MARKERS: c,
+	DT_TEXT_LIST_MARKER_TONES: l
+};
+//#endregion
+export { i as DT_TEXT_LIST_CONTEXT, n as DT_TEXT_LIST_DEFAULT_TYPE, r as DT_TEXT_LIST_GAP, c as DT_TEXT_LIST_MARKERS, l as DT_TEXT_LIST_MARKER_TONES, s as DT_TEXT_LIST_ORDERED_MARKERS, a as DT_TEXT_LIST_TYPES, o as DT_TEXT_LIST_UNORDERED_MARKERS, u as default };
+
+//# sourceMappingURL=text-list-constants.js.map

package/dist/lib/text-list/text-list-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-list-constants.js","names":[],"sources":["../../../components/TextList/TextListConstants.js"],"sourcesContent":["import { TEXT_TONE_MODIFIERS } from '@/components/Text/TextConstants';\nimport { DT_STACK_GAP } from '@/components/Stack/StackConstants';\n\nexport const DT_TEXT_LIST_DEFAULT_TYPE = 'unordered';\nexport const DT_TEXT_LIST_GAP = DT_STACK_GAP.filter(gap => Number(gap) <= 400);\n\nexport const DT_TEXT_LIST_CONTEXT = Symbol('DtTextListContext');\n\nexport const DT_TEXT_LIST_TYPES = ['unordered', 'ordered'];\n\nexport const DT_TEXT_LIST_UNORDERED_MARKERS = ['disc', 'circle', 'square'];\nexport const DT_TEXT_LIST_ORDERED_MARKERS = ['decimal', 'lower-alpha', 'upper-alpha', 'lower-roman', 'upper-roman'];\nexport const DT_TEXT_LIST_MARKERS = [\n  ...DT_TEXT_LIST_UNORDERED_MARKERS,\n  ...DT_TEXT_LIST_ORDERED_MARKERS,\n  'none',\n];\n\nexport const DT_TEXT_LIST_MARKER_TONES = Object.keys(TEXT_TONE_MODIFIERS);\n\nexport default {\n  DT_TEXT_LIST_DEFAULT_TYPE,\n  DT_TEXT_LIST_GAP,\n  DT_TEXT_LIST_CONTEXT,\n  DT_TEXT_LIST_TYPES,\n  DT_TEXT_LIST_UNORDERED_MARKERS,\n  DT_TEXT_LIST_ORDERED_MARKERS,\n  DT_TEXT_LIST_MARKERS,\n  DT_TEXT_LIST_MARKER_TONES,\n};\n"],"mappings":";;;AAGA,IAAa,IAA4B,aAC5B,IAAmB,EAAa,QAAO,MAAO,OAAO,EAAI,IAAI,IAAI,EAEjE,IAAuB,OAAO,oBAAoB,EAElD,IAAqB,CAAC,aAAa,UAAU,EAE7C,IAAiC;CAAC;CAAQ;CAAU;CAAS,EAC7D,IAA+B;CAAC;CAAW;CAAe;CAAe;CAAe;CAAc,EACtG,IAAuB;CAClC,GAAG;CACH,GAAG;CACH;CACD,EAEY,IAA4B,OAAO,KAAK,EAAoB,EAEzE,IAAe;CACb;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

package/dist/lib/text-list/text-list-item.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../TextListItem-DIlrCkaM.cjs`);exports.default=e.t;

package/dist/lib/text-list/text-list-item.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../TextListItem-ImUi_FWh.js";
+export { e as default };

package/dist/lib/text-list/text-list.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../TextList-Dd-ROFiI.cjs`);exports.default=e.t;

package/dist/lib/text-list/text-list.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../TextList-B6XFfQfD.js";
+export { e as default };

package/dist/lib/text-list/validators.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./text-list-constants.cjs`);function t(e){return t=>t==null||e.includes(String(t))}var n=t=>e.DT_TEXT_LIST_TYPES.includes(String(t)),r=t(e.DT_TEXT_LIST_MARKERS),i=t(e.DT_TEXT_LIST_MARKER_TONES),a=t(e.DT_TEXT_LIST_GAP);exports.textListGapValidator=a,exports.textListMarkerToneValidator=i,exports.textListMarkerValidator=r,exports.textListTypeValidator=n;
+//# sourceMappingURL=validators.cjs.map

package/dist/lib/text-list/validators.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.cjs","names":["DT_TEXT_LIST_TYPES","DT_TEXT_LIST_MARKERS","DT_TEXT_LIST_MARKER_TONES","DT_TEXT_LIST_GAP"],"sources":["../../../components/TextList/Validators.js"],"sourcesContent":["import {\n  DT_TEXT_LIST_TYPES,\n  DT_TEXT_LIST_MARKERS,\n  DT_TEXT_LIST_MARKER_TONES,\n  DT_TEXT_LIST_GAP,\n} from './TextListConstants';\n\nfunction optionalListValidator (list) {\n  return value => value == null || list.includes(String(value));\n}\n\nexport const textListTypeValidator = value => DT_TEXT_LIST_TYPES.includes(String(value));\nexport const textListMarkerValidator = optionalListValidator(DT_TEXT_LIST_MARKERS);\nexport const textListMarkerToneValidator = optionalListValidator(DT_TEXT_LIST_MARKER_TONES);\nexport const textListGapValidator = optionalListValidator(DT_TEXT_LIST_GAP);\n"],"mappings":"gHAOA,SAAS,EAAuB,EAAM,CACpC,MAAO,IAAS,GAAS,MAAQ,EAAK,SAAS,OAAO,EAAM,CAAC,CAG/D,IAAa,EAAwB,GAASA,EAAAA,mBAAmB,SAAS,OAAO,EAAM,CAAC,CAC3E,EAA0B,EAAsBC,EAAAA,qBAAqB,CACrE,EAA8B,EAAsBC,EAAAA,0BAA0B,CAC9E,EAAuB,EAAsBC,EAAAA,iBAAiB"}

package/dist/lib/text-list/validators.js

@@ -0,0 +1,10 @@
+import { DT_TEXT_LIST_GAP as e, DT_TEXT_LIST_MARKERS as t, DT_TEXT_LIST_MARKER_TONES as n, DT_TEXT_LIST_TYPES as r } from "./text-list-constants.js";
+//#region components/TextList/Validators.js
+function i(e) {
+	return (t) => t == null || e.includes(String(t));
+}
+var a = (e) => r.includes(String(e)), o = i(t), s = i(n), c = i(e);
+//#endregion
+export { c as textListGapValidator, s as textListMarkerToneValidator, o as textListMarkerValidator, a as textListTypeValidator };
+
+//# sourceMappingURL=validators.js.map

package/dist/lib/text-list/validators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.js","names":[],"sources":["../../../components/TextList/Validators.js"],"sourcesContent":["import {\n  DT_TEXT_LIST_TYPES,\n  DT_TEXT_LIST_MARKERS,\n  DT_TEXT_LIST_MARKER_TONES,\n  DT_TEXT_LIST_GAP,\n} from './TextListConstants';\n\nfunction optionalListValidator (list) {\n  return value => value == null || list.includes(String(value));\n}\n\nexport const textListTypeValidator = value => DT_TEXT_LIST_TYPES.includes(String(value));\nexport const textListMarkerValidator = optionalListValidator(DT_TEXT_LIST_MARKERS);\nexport const textListMarkerToneValidator = optionalListValidator(DT_TEXT_LIST_MARKER_TONES);\nexport const textListGapValidator = optionalListValidator(DT_TEXT_LIST_GAP);\n"],"mappings":";;AAOA,SAAS,EAAuB,GAAM;AACpC,SAAO,MAAS,KAAS,QAAQ,EAAK,SAAS,OAAO,EAAM,CAAC;;AAG/D,IAAa,KAAwB,MAAS,EAAmB,SAAS,OAAO,EAAM,CAAC,EAC3E,IAA0B,EAAsB,EAAqB,EACrE,IAA8B,EAAsB,EAA0B,EAC9E,IAAuB,EAAsB,EAAiB"}

package/dist/lib/toast/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./toast-constants.cjs`),t=require(`../../Toast-DX-REYXG.cjs`);exports.DtToast=t.t,exports.TOAST_MIN_DURATION=e.TOAST_MIN_DURATION,exports.TOAST_ROLES=e.TOAST_ROLES;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./toast-constants.cjs`),t=require(`../../Toast-D8ARDEgT.cjs`);exports.DtToast=t.t,exports.TOAST_MIN_DURATION=e.TOAST_MIN_DURATION,exports.TOAST_ROLES=e.TOAST_ROLES;

package/dist/lib/toast/index.js

@@ -1,3 +1,3 @@
 import { TOAST_MIN_DURATION as e, TOAST_ROLES as t } from "./toast-constants.js";
-import { t as n } from "../../Toast-CHbVmbBg.js";
+import { t as n } from "../../Toast-BIHkIpZP.js";
 export { n as DtToast, e as TOAST_MIN_DURATION, t as TOAST_ROLES };

package/dist/lib/toast/toast.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../Toast-DX-REYXG.cjs`);exports.default=e.t;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../Toast-D8ARDEgT.cjs`);exports.default=e.t;

package/dist/lib/toast/toast.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../Toast-CHbVmbBg.js";
+import { t as e } from "../../Toast-BIHkIpZP.js";
 export { e as default };

package/dist/lib/toggle/toggle.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(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`./toggle-constants.cjs`);let r=require(`vue`);var i={name:`DtToggle`,inheritAttrs:!1,props:{id:{type:String,default(){return e.getUniqueString()}},disabled:{type:Boolean,default:!1},modelValue:{type:[Boolean,String],default:!1,validator:e=>n.TOGGLE_CHECKED_VALUES.includes(e)},toggleOnClick:{type:Boolean,default:!0},size:{type:[String,Number],default:300,validator:e=>Object.keys(n.TOGGLE_SIZE_MODIFIERS).includes(String(e))},showLabel:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!0},labelClass:{type:[String,Array,Object],default:``},labelChildProps:{type:Object,default:()=>({})}},emits:[`update:modelValue`],data(){return{internalChecked:this.modelValue,hasSlotContent:e.hasSlotContent}},computed:{inputListeners(){return{...e.removeClassStyleAttrs(this.$attrs),onClick:()=>this.toggleCheckedValue()}},isIndeterminate(){return this.internalChecked===`mixed`},toggleRole(){return this.isIndeterminate?`checkbox`:`switch`},toggleClasses(){return[`d-toggle`,n.TOGGLE_SIZE_MODIFIERS[String(this.size)],{"d-toggle--checked":this.internalChecked===!0,"d-toggle--disabled":this.disabled,"d-toggle--indeterminate":this.isIndeterminate}]}},watch:{modelValue(e){this.internalChecked=e}},mounted(){this.runValidations()},methods:{toggleCheckedValue(){this.$emit(`update:modelValue`,!this.internalChecked),this.toggleOnClick&&(this.internalChecked=!this.internalChecked)},hasSlotLabel(){return!!this.$slots.default},runValidations(){!(this.showLabel&&this.hasSlotLabel())&&!this.$attrs[`aria-label`]&&console.info(`[Dialtone] A label is required for accessibility. Provide a label and use show-label="false" to hide it visually.`)}}},a=[`for`],o=[`id`,`role`,`aria-checked`,`disabled`,`aria-disabled`],s={key:0,class:`d-toggle__inner`};function c(e,t,n,i,c,l){return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,{class:(0,r.normalizeClass)([`d-toggle-wrapper`,e.$attrs.class]),style:(0,r.normalizeStyle)(e.$attrs.style)},[n.showLabel&&c.hasSlotContent(e.$slots.default)?((0,r.openBlock)(),(0,r.createElementBlock)(`label`,(0,r.mergeProps)({key:0,class:n.labelClass,for:n.id},n.labelChildProps,{"data-qa":`toggle-label`}),[(0,r.renderSlot)(e.$slots,`default`)],16,a)):(0,r.createCommentVNode)(``,!0),(0,r.createElementVNode)(`button`,(0,r.mergeProps)({id:n.id,role:l.toggleRole,type:`button`,"aria-checked":c.internalChecked.toString(),disabled:n.disabled,"aria-disabled":n.disabled.toString(),class:l.toggleClasses},l.inputListeners),[n.showIcon?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,s)):(0,r.createCommentVNode)(``,!0)],16,o)],6)}var l=t.t(i,[[`render`,c]]);exports.default=l;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`./toggle-constants.cjs`);let i=require(`vue`);var a={name:`DtToggle`,inheritAttrs:!1,props:{id:{type:String,default(){return t.getUniqueString()}},disabled:{type:Boolean,default:!1},modelValue:{type:[Boolean,String],default:!1,validator:e=>r.TOGGLE_CHECKED_VALUES.includes(e)},toggleOnClick:{type:Boolean,default:!0},size:{type:[String,Number],default:300,validator:e.ordinalSizeValidator(r.TOGGLE_SIZE_MODIFIERS)},showLabel:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!0},labelClass:{type:[String,Array,Object],default:``},labelChildProps:{type:Object,default:()=>({})}},emits:[`update:modelValue`],data(){return{internalChecked:this.modelValue,hasSlotContent:t.hasSlotContent}},computed:{inputListeners(){return{...t.removeClassStyleAttrs(this.$attrs),onClick:()=>this.toggleCheckedValue()}},isIndeterminate(){return this.internalChecked===`mixed`},toggleRole(){return this.isIndeterminate?`checkbox`:`switch`},toggleClasses(){return[`d-toggle`,r.TOGGLE_SIZE_MODIFIERS[String(this.size)],{"d-toggle--checked":this.internalChecked===!0,"d-toggle--disabled":this.disabled,"d-toggle--indeterminate":this.isIndeterminate}]}},watch:{modelValue(e){this.internalChecked=e}},mounted(){this.runValidations()},methods:{toggleCheckedValue(){this.$emit(`update:modelValue`,!this.internalChecked),this.toggleOnClick&&(this.internalChecked=!this.internalChecked)},hasSlotLabel(){return!!this.$slots.default},runValidations(){!(this.showLabel&&this.hasSlotLabel())&&!this.$attrs[`aria-label`]&&console.info(`[Dialtone] A label is required for accessibility. Provide a label and use show-label="false" to hide it visually.`)}}},o=[`for`],s=[`id`,`role`,`aria-checked`,`disabled`,`aria-disabled`],c={key:0,class:`d-toggle__inner`};function l(e,t,n,r,a,l){return(0,i.openBlock)(),(0,i.createElementBlock)(`div`,{class:(0,i.normalizeClass)([`d-toggle-wrapper`,e.$attrs.class]),style:(0,i.normalizeStyle)(e.$attrs.style)},[n.showLabel&&a.hasSlotContent(e.$slots.default)?((0,i.openBlock)(),(0,i.createElementBlock)(`label`,(0,i.mergeProps)({key:0,class:n.labelClass,for:n.id},n.labelChildProps,{"data-qa":`toggle-label`}),[(0,i.renderSlot)(e.$slots,`default`)],16,o)):(0,i.createCommentVNode)(``,!0),(0,i.createElementVNode)(`button`,(0,i.mergeProps)({id:n.id,role:l.toggleRole,type:`button`,"aria-checked":a.internalChecked.toString(),disabled:n.disabled,"aria-disabled":n.disabled.toString(),class:l.toggleClasses},l.inputListeners),[n.showIcon?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,c)):(0,i.createCommentVNode)(``,!0)],16,s)],6)}var u=n.t(a,[[`render`,l]]);exports.default=u;
 //# sourceMappingURL=toggle.cjs.map

package/dist/lib/toggle/toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.cjs","names":[],"sources":["../../../components/Toggle/Toggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['d-toggle-wrapper', $attrs.class]\"\n    :style=\"$attrs.style\"\n  >\n    <label\n      v-if=\"showLabel && hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { getUniqueString, hasSlotContent, removeClassStyleAttrs } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/Toggle/ToggleConstants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @values true, false, 'mixed'\n     */\n    modelValue: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(String(s)),\n    },\n\n    /**\n     * Determines visibility of toggle label.\n     * @values true, false\n     */\n    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\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 {Boolean}\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.modelValue,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...removeClassStyleAttrs(this.$attrs),\n        onClick: () => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[String(this.size)],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    modelValue (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('update:modelValue', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      const hasVisibleLabel = this.showLabel && this.hasSlotLabel();\n      if (!hasVisibleLabel && !this.$attrs['aria-label']) {\n        console.info(\n          '[Dialtone] A label is required for accessibility. Provide a label and use show-label=\"false\" to hide it visually.',\n        );\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"sSAyCA,IAAK,EAAU,CAEb,KAAM,WAEN,aAAc,GAEd,MAAO,CAKL,GAAI,CACF,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,iBAAiB,EACtC,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,CAAC,QAAS,OAAO,CACvB,QAAS,GACT,UAAY,GAAM,EAAA,sBAAsB,SAAS,EAAE,CACpD,CAOD,cAAe,CACb,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAY,GAAM,OAAO,KAAK,EAAA,sBAAsB,CAAC,SAAS,OAAO,EAAE,CAAC,CACzE,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,gBAAiB,CACf,KAAM,OACN,aAAgB,EAAE,EACnB,CACF,CAED,MAAO,CAOL,oBACD,CAED,MAAQ,CACN,MAAO,CACL,gBAAiB,KAAK,WACtB,eAAA,EAAA,eACD,EAGH,SAAU,CACR,gBAAkB,CAChB,MAAO,CACL,GAAG,EAAA,sBAAsB,KAAK,OAAO,CACrC,YAAe,KAAK,oBAAoB,CACzC,EAGH,iBAAmB,CACjB,OAAO,KAAK,kBAAoB,SAGlC,YAAc,CACZ,OAAO,KAAK,gBAAkB,WAAa,UAG7C,eAAiB,CACf,MAAO,CACL,WACA,EAAA,sBAAsB,OAAO,KAAK,KAAK,EACvC,CACE,oBAAqB,KAAK,kBAAoB,GAC9C,qBAAsB,KAAK,SAC3B,0BAA2B,KAAK,gBACjC,CACF,EAEJ,CAED,MAAO,CACL,WAAY,EAAY,CACtB,KAAK,gBAAkB,GAE1B,CAED,SAAW,CACT,KAAK,gBAAgB,EAGvB,QAAS,CACP,oBAAsB,CACpB,KAAK,MAAM,oBAAqB,CAAC,KAAK,gBAAgB,CAElD,KAAK,gBACP,KAAK,gBAAkB,CAAC,KAAK,kBAIjC,cAAgB,CACd,MAAO,CAAC,CAAE,KAAK,OAAO,SAGxB,gBAAkB,CAEZ,EADoB,KAAK,WAAa,KAAK,cAAc,GACrC,CAAC,KAAK,OAAO,eACnC,QAAQ,KACN,oHACD,EAGN,CACF,8EAtLO,MAAM,4FAGN,MAAA,CA5BH,OAAA,EAAA,EAAA,gBAAK,CAAA,mBAAuB,EAAA,OAAO,MAAK,CAAA,CACxC,OAAA,EAAA,EAAA,gBAAO,EAAA,OAAO,MAAK,GAGZ,EAAA,WAAa,EAAA,eAAe,EAAA,OAAO,QAAO,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQ1C,SAAA,EAAA,EAAA,YAAA,OAPL,MAAO,EAAA,WACP,IAAK,EAAA,IACE,EAAA,gBAAe,CACvB,UAAQ,eAAc,CAAA,CAAA,EAAA,EAAA,EAAA,YAGd,EAAA,OAAA,UAAA,CAAA,CAAA,GAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,EAAA,EAAA,EAAA,oBAgBD,UAAA,EAAA,EAAA,YAAA,CAbN,GAAI,EAAA,GACJ,KAAM,EAAA,WACP,KAAK,SACJ,eAAc,EAAA,gBAAgB,UAAQ,CACtC,SAAU,EAAA,SACV,gBAAe,EAAA,SAAS,UAAQ,CAChC,MAAO,EAAA,eACA,EAAA,eAAc,CAAA,CAGd,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEN,OAHF,EAGE,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,GAAA,EAAA,CAAA,CAAA,EAAA"}
+{"version":3,"file":"toggle.cjs","names":[],"sources":["../../../components/Toggle/Toggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['d-toggle-wrapper', $attrs.class]\"\n    :style=\"$attrs.style\"\n  >\n    <label\n      v-if=\"showLabel && hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { getUniqueString, hasSlotContent, removeClassStyleAttrs } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/Toggle/ToggleConstants';\nimport { ordinalSizeValidator } from '@/common/validators';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @values true, false, 'mixed'\n     */\n    modelValue: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: ordinalSizeValidator(TOGGLE_SIZE_MODIFIERS),\n    },\n\n    /**\n     * Determines visibility of toggle label.\n     * @values true, false\n     */\n    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\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 {Boolean}\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.modelValue,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...removeClassStyleAttrs(this.$attrs),\n        onClick: () => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[String(this.size)],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    modelValue (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('update:modelValue', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      const hasVisibleLabel = this.showLabel && this.hasSlotLabel();\n      if (!hasVisibleLabel && !this.$attrs['aria-label']) {\n        console.info(\n          '[Dialtone] A label is required for accessibility. Provide a label and use show-label=\"false\" to hide it visually.',\n        );\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"qVA0CA,IAAK,EAAU,CAEb,KAAM,WAEN,aAAc,GAEd,MAAO,CAKL,GAAI,CACF,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,iBAAiB,EACtC,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,CAAC,QAAS,OAAO,CACvB,QAAS,GACT,UAAY,GAAM,EAAA,sBAAsB,SAAS,EAAE,CACpD,CAOD,cAAe,CACb,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAW,EAAA,qBAAqB,EAAA,sBAAsB,CACvD,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,gBAAiB,CACf,KAAM,OACN,aAAgB,EAAE,EACnB,CACF,CAED,MAAO,CAOL,oBACD,CAED,MAAQ,CACN,MAAO,CACL,gBAAiB,KAAK,WACtB,eAAA,EAAA,eACD,EAGH,SAAU,CACR,gBAAkB,CAChB,MAAO,CACL,GAAG,EAAA,sBAAsB,KAAK,OAAO,CACrC,YAAe,KAAK,oBAAoB,CACzC,EAGH,iBAAmB,CACjB,OAAO,KAAK,kBAAoB,SAGlC,YAAc,CACZ,OAAO,KAAK,gBAAkB,WAAa,UAG7C,eAAiB,CACf,MAAO,CACL,WACA,EAAA,sBAAsB,OAAO,KAAK,KAAK,EACvC,CACE,oBAAqB,KAAK,kBAAoB,GAC9C,qBAAsB,KAAK,SAC3B,0BAA2B,KAAK,gBACjC,CACF,EAEJ,CAED,MAAO,CACL,WAAY,EAAY,CACtB,KAAK,gBAAkB,GAE1B,CAED,SAAW,CACT,KAAK,gBAAgB,EAGvB,QAAS,CACP,oBAAsB,CACpB,KAAK,MAAM,oBAAqB,CAAC,KAAK,gBAAgB,CAElD,KAAK,gBACP,KAAK,gBAAkB,CAAC,KAAK,kBAIjC,cAAgB,CACd,MAAO,CAAC,CAAE,KAAK,OAAO,SAGxB,gBAAkB,CAEZ,EADoB,KAAK,WAAa,KAAK,cAAc,GACrC,CAAC,KAAK,OAAO,eACnC,QAAQ,KACN,oHACD,EAGN,CACF,8EAvLO,MAAM,4FAGN,MAAA,CA5BH,OAAA,EAAA,EAAA,gBAAK,CAAA,mBAAuB,EAAA,OAAO,MAAK,CAAA,CACxC,OAAA,EAAA,EAAA,gBAAO,EAAA,OAAO,MAAK,GAGZ,EAAA,WAAa,EAAA,eAAe,EAAA,OAAO,QAAO,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQ1C,SAAA,EAAA,EAAA,YAAA,OAPL,MAAO,EAAA,WACP,IAAK,EAAA,IACE,EAAA,gBAAe,CACvB,UAAQ,eAAc,CAAA,CAAA,EAAA,EAAA,EAAA,YAGd,EAAA,OAAA,UAAA,CAAA,CAAA,GAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,EAAA,EAAA,EAAA,oBAgBD,UAAA,EAAA,EAAA,YAAA,CAbN,GAAI,EAAA,GACJ,KAAM,EAAA,WACP,KAAK,SACJ,eAAc,EAAA,gBAAgB,UAAQ,CACtC,SAAU,EAAA,SACV,gBAAe,EAAA,SAAS,UAAQ,CAChC,MAAO,EAAA,eACA,EAAA,eAAc,CAAA,CAGd,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEN,OAHF,EAGE,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,GAAA,EAAA,CAAA,CAAA,EAAA"}

package/dist/lib/toggle/toggle.js

@@ -1,16 +1,17 @@
-import { getUniqueString as e, hasSlotContent as t, removeClassStyleAttrs as n } from "../../common/utils/index.js";
-import { t as r } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { TOGGLE_CHECKED_VALUES as i, TOGGLE_SIZE_MODIFIERS as a } from "./toggle-constants.js";
-import { createCommentVNode as o, createElementBlock as s, createElementVNode as c, mergeProps as l, normalizeClass as u, normalizeStyle as d, openBlock as f, renderSlot as p } from "vue";
+import { ordinalSizeValidator as e } from "../../common/validators/index.js";
+import { getUniqueString as t, hasSlotContent as n, removeClassStyleAttrs as r } from "../../common/utils/index.js";
+import { t as i } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { TOGGLE_CHECKED_VALUES as a, TOGGLE_SIZE_MODIFIERS as o } from "./toggle-constants.js";
+import { createCommentVNode as s, createElementBlock as c, createElementVNode as l, mergeProps as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderSlot as m } from "vue";
 //#region components/Toggle/Toggle.vue
-var m = {
+var h = {
 	name: "DtToggle",
 	inheritAttrs: !1,
 	props: {
 		id: {
 			type: String,
 			default() {
-				return e();
+				return t();
 			}
 		},
 		disabled: {
@@ -20,7 +21,7 @@ var m = {
 		modelValue: {
 			type: [Boolean, String],
 			default: !1,
-			validator: (e) => i.includes(e)
+			validator: (e) => a.includes(e)
 		},
 		toggleOnClick: {
 			type: Boolean,
@@ -29,7 +30,7 @@ var m = {
 		size: {
 			type: [String, Number],
 			default: 300,
-			validator: (e) => Object.keys(a).includes(String(e))
+			validator: e(o)
 		},
 		showLabel: {
 			type: Boolean,
@@ -56,13 +57,13 @@ var m = {
 	data() {
 		return {
 			internalChecked: this.modelValue,
-			hasSlotContent: t
+			hasSlotContent: n
 		};
 	},
 	computed: {
 		inputListeners() {
 			return {
-				...n(this.$attrs),
+				...r(this.$attrs),
 				onClick: () => this.toggleCheckedValue()
 			};
 		},
@@ -75,7 +76,7 @@ var m = {
 		toggleClasses() {
 			return [
 				"d-toggle",
-				a[String(this.size)],
+				o[String(this.size)],
 				{
 					"d-toggle--checked": this.internalChecked === !0,
 					"d-toggle--disabled": this.disabled,
@@ -101,25 +102,25 @@ var m = {
 			!(this.showLabel && this.hasSlotLabel()) && !this.$attrs["aria-label"] && console.info("[Dialtone] A label is required for accessibility. Provide a label and use show-label=\"false\" to hide it visually.");
 		}
 	}
-}, h = ["for"], g = [
+}, g = ["for"], _ = [
 	"id",
 	"role",
 	"aria-checked",
 	"disabled",
 	"aria-disabled"
-], _ = {
+], v = {
 	key: 0,
 	class: "d-toggle__inner"
 };
-function v(e, t, n, r, i, a) {
-	return f(), s("div", {
-		class: u(["d-toggle-wrapper", e.$attrs.class]),
-		style: d(e.$attrs.style)
-	}, [n.showLabel && i.hasSlotContent(e.$slots.default) ? (f(), s("label", l({
+function y(e, t, n, r, i, a) {
+	return p(), c("div", {
+		class: d(["d-toggle-wrapper", e.$attrs.class]),
+		style: f(e.$attrs.style)
+	}, [n.showLabel && i.hasSlotContent(e.$slots.default) ? (p(), c("label", u({
 		key: 0,
 		class: n.labelClass,
 		for: n.id
-	}, n.labelChildProps, { "data-qa": "toggle-label" }), [p(e.$slots, "default")], 16, h)) : o("", !0), c("button", l({
+	}, n.labelChildProps, { "data-qa": "toggle-label" }), [m(e.$slots, "default")], 16, g)) : s("", !0), l("button", u({
 		id: n.id,
 		role: a.toggleRole,
 		type: "button",
@@ -127,10 +128,10 @@ function v(e, t, n, r, i, a) {
 		disabled: n.disabled,
 		"aria-disabled": n.disabled.toString(),
 		class: a.toggleClasses
-	}, a.inputListeners), [n.showIcon ? (f(), s("span", _)) : o("", !0)], 16, g)], 6);
+	}, a.inputListeners), [n.showIcon ? (p(), c("span", v)) : s("", !0)], 16, _)], 6);
 }
-var y = /* @__PURE__ */ r(m, [["render", v]]);
+var b = /* @__PURE__ */ i(h, [["render", y]]);
 //#endregion
-export { y as default };
+export { b as default };
 
 //# sourceMappingURL=toggle.js.map

package/dist/lib/toggle/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","names":[],"sources":["../../../components/Toggle/Toggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['d-toggle-wrapper', $attrs.class]\"\n    :style=\"$attrs.style\"\n  >\n    <label\n      v-if=\"showLabel && hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { getUniqueString, hasSlotContent, removeClassStyleAttrs } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/Toggle/ToggleConstants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @values true, false, 'mixed'\n     */\n    modelValue: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(String(s)),\n    },\n\n    /**\n     * Determines visibility of toggle label.\n     * @values true, false\n     */\n    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\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 {Boolean}\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.modelValue,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...removeClassStyleAttrs(this.$attrs),\n        onClick: () => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[String(this.size)],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    modelValue (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('update:modelValue', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      const hasVisibleLabel = this.showLabel && this.hasSlotLabel();\n      if (!hasVisibleLabel && !this.$attrs['aria-label']) {\n        console.info(\n          '[Dialtone] A label is required for accessibility. Provide a label and use show-label=\"false\" to hide it visually.',\n        );\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;AAyCA,IAAK,IAAU;CAEb,MAAM;CAEN,cAAc;CAEd,OAAO;EAKL,IAAI;GACF,MAAM;GACN,UAAW;AAAE,WAAO,GAAiB;;GACtC;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM,CAAC,SAAS,OAAO;GACvB,SAAS;GACT,YAAY,MAAM,EAAsB,SAAS,EAAE;GACpD;EAOD,eAAe;GACb,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAsB,CAAC,SAAS,OAAO,EAAE,CAAC;GACzE;EAMD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,iBAAiB;GACf,MAAM;GACN,gBAAgB,EAAE;GACnB;EACF;CAED,OAAO,CAOL,oBACD;CAED,OAAQ;AACN,SAAO;GACL,iBAAiB,KAAK;GACtB;GACD;;CAGH,UAAU;EACR,iBAAkB;AAChB,UAAO;IACL,GAAG,EAAsB,KAAK,OAAO;IACrC,eAAe,KAAK,oBAAoB;IACzC;;EAGH,kBAAmB;AACjB,UAAO,KAAK,oBAAoB;;EAGlC,aAAc;AACZ,UAAO,KAAK,kBAAkB,aAAa;;EAG7C,gBAAiB;AACf,UAAO;IACL;IACA,EAAsB,OAAO,KAAK,KAAK;IACvC;KACE,qBAAqB,KAAK,oBAAoB;KAC9C,sBAAsB,KAAK;KAC3B,2BAA2B,KAAK;KACjC;IACF;;EAEJ;CAED,OAAO,EACL,WAAY,GAAY;AACtB,OAAK,kBAAkB;IAE1B;CAED,UAAW;AACT,OAAK,gBAAgB;;CAGvB,SAAS;EACP,qBAAsB;AAGpB,GAFA,KAAK,MAAM,qBAAqB,CAAC,KAAK,gBAAgB,EAElD,KAAK,kBACP,KAAK,kBAAkB,CAAC,KAAK;;EAIjC,eAAgB;AACd,UAAO,CAAC,CAAE,KAAK,OAAO;;EAGxB,iBAAkB;AAEhB,GAAI,EADoB,KAAK,aAAa,KAAK,cAAc,KACrC,CAAC,KAAK,OAAO,iBACnC,QAAQ,KACN,sHACD;;EAGN;CACF;;;;;;;;CAtLO,OAAM;;;aA1BZ,EA6BM,OAAA;EA5BH,OAAK,EAAA,CAAA,oBAAuB,EAAA,OAAO,MAAK,CAAA;EACxC,OAAK,EAAE,EAAA,OAAO,MAAK;KAGZ,EAAA,aAAa,EAAA,eAAe,EAAA,OAAO,QAAO,IAAA,GAAA,EADlD,EASQ,SATR,EASQ;;EAPL,OAAO,EAAA;EACP,KAAK,EAAA;IACE,EAAA,iBAAe,EACvB,WAAQ,gBAAc,CAAA,EAAA,CAGtB,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAEV,EAcS,UAdT,EAcS;EAbN,IAAI,EAAA;EACJ,MAAM,EAAA;EACP,MAAK;EACJ,gBAAc,EAAA,gBAAgB,UAAQ;EACtC,UAAU,EAAA;EACV,iBAAe,EAAA,SAAS,UAAQ;EAChC,OAAO,EAAA;IACA,EAAA,eAAc,EAAA,CAGd,EAAA,YAAA,GAAA,EADR,EAGE,QAHF,EAGE,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"toggle.js","names":[],"sources":["../../../components/Toggle/Toggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['d-toggle-wrapper', $attrs.class]\"\n    :style=\"$attrs.style\"\n  >\n    <label\n      v-if=\"showLabel && hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { getUniqueString, hasSlotContent, removeClassStyleAttrs } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/Toggle/ToggleConstants';\nimport { ordinalSizeValidator } from '@/common/validators';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @values true, false, 'mixed'\n     */\n    modelValue: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: ordinalSizeValidator(TOGGLE_SIZE_MODIFIERS),\n    },\n\n    /**\n     * Determines visibility of toggle label.\n     * @values true, false\n     */\n    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\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 {Boolean}\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.modelValue,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...removeClassStyleAttrs(this.$attrs),\n        onClick: () => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[String(this.size)],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    modelValue (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('update:modelValue', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      const hasVisibleLabel = this.showLabel && this.hasSlotLabel();\n      if (!hasVisibleLabel && !this.$attrs['aria-label']) {\n        console.info(\n          '[Dialtone] A label is required for accessibility. Provide a label and use show-label=\"false\" to hide it visually.',\n        );\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;AA0CA,IAAK,IAAU;CAEb,MAAM;CAEN,cAAc;CAEd,OAAO;EAKL,IAAI;GACF,MAAM;GACN,UAAW;AAAE,WAAO,GAAiB;;GACtC;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM,CAAC,SAAS,OAAO;GACvB,SAAS;GACT,YAAY,MAAM,EAAsB,SAAS,EAAE;GACpD;EAOD,eAAe;GACb,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,WAAW,EAAqB,EAAsB;GACvD;EAMD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,iBAAiB;GACf,MAAM;GACN,gBAAgB,EAAE;GACnB;EACF;CAED,OAAO,CAOL,oBACD;CAED,OAAQ;AACN,SAAO;GACL,iBAAiB,KAAK;GACtB;GACD;;CAGH,UAAU;EACR,iBAAkB;AAChB,UAAO;IACL,GAAG,EAAsB,KAAK,OAAO;IACrC,eAAe,KAAK,oBAAoB;IACzC;;EAGH,kBAAmB;AACjB,UAAO,KAAK,oBAAoB;;EAGlC,aAAc;AACZ,UAAO,KAAK,kBAAkB,aAAa;;EAG7C,gBAAiB;AACf,UAAO;IACL;IACA,EAAsB,OAAO,KAAK,KAAK;IACvC;KACE,qBAAqB,KAAK,oBAAoB;KAC9C,sBAAsB,KAAK;KAC3B,2BAA2B,KAAK;KACjC;IACF;;EAEJ;CAED,OAAO,EACL,WAAY,GAAY;AACtB,OAAK,kBAAkB;IAE1B;CAED,UAAW;AACT,OAAK,gBAAgB;;CAGvB,SAAS;EACP,qBAAsB;AAGpB,GAFA,KAAK,MAAM,qBAAqB,CAAC,KAAK,gBAAgB,EAElD,KAAK,kBACP,KAAK,kBAAkB,CAAC,KAAK;;EAIjC,eAAgB;AACd,UAAO,CAAC,CAAE,KAAK,OAAO;;EAGxB,iBAAkB;AAEhB,GAAI,EADoB,KAAK,aAAa,KAAK,cAAc,KACrC,CAAC,KAAK,OAAO,iBACnC,QAAQ,KACN,sHACD;;EAGN;CACF;;;;;;;;CAvLO,OAAM;;;aA1BZ,EA6BM,OAAA;EA5BH,OAAK,EAAA,CAAA,oBAAuB,EAAA,OAAO,MAAK,CAAA;EACxC,OAAK,EAAE,EAAA,OAAO,MAAK;KAGZ,EAAA,aAAa,EAAA,eAAe,EAAA,OAAO,QAAO,IAAA,GAAA,EADlD,EASQ,SATR,EASQ;;EAPL,OAAO,EAAA;EACP,KAAK,EAAA;IACE,EAAA,iBAAe,EACvB,WAAQ,gBAAc,CAAA,EAAA,CAGtB,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAEV,EAcS,UAdT,EAcS;EAbN,IAAI,EAAA;EACJ,MAAM,EAAA;EACP,MAAK;EACJ,gBAAc,EAAA,gBAAgB,UAAQ;EACtC,UAAU,EAAA;EACV,iBAAe,EAAA,SAAS,UAAQ;EAChC,OAAO,EAAA;IACA,EAAA,eAAc,EAAA,CAGd,EAAA,YAAA,GAAA,EADR,EAGE,QAHF,EAGE,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,EAAA"}