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

package/dist/lib/prose/prose.js

@@ -1,42 +1,43 @@
-import { PROSE_ALLOWED_ATTRIBUTES as e, PROSE_DENSITY_MODIFIERS as t, PROSE_DISALLOWED_ELEMENTS as n, PROSE_SIZE_MODIFIERS as r, _PROSE_ALLOWED_ATTRIBUTE_PREFIXES as i, _PROSE_URL_ATTRIBUTES as a, _isSafeProseUrl as o } from "./prose-constants.js";
-import { computed as s, createElementBlock as c, normalizeClass as l, onMounted as u, onUpdated as d, openBlock as f, ref as p, renderSlot as m } from "vue";
+import { ordinalSizeValidator as e } from "../../common/validators/index.js";
+import { PROSE_ALLOWED_ATTRIBUTES as t, PROSE_DENSITY_MODIFIERS as n, PROSE_DISALLOWED_ELEMENTS as r, PROSE_SIZE_MODIFIERS as i, _PROSE_ALLOWED_ATTRIBUTE_PREFIXES as a, _PROSE_URL_ATTRIBUTES as o, _isSafeProseUrl as s } from "./prose-constants.js";
+import { computed as c, createElementBlock as l, normalizeClass as u, onMounted as d, onUpdated as f, openBlock as p, ref as m, renderSlot as h } from "vue";
 //#region components/Prose/Prose.vue
-var h = /* @__PURE__ */ Object.assign({ name: "DtProse" }, {
+var g = /* @__PURE__ */ Object.assign({ name: "DtProse" }, {
 	__name: "Prose",
 	props: {
 		size: {
 			type: [String, Number],
 			default: 300,
-			validator: (e) => Object.keys(r).includes(String(e))
+			validator: e(i)
 		},
 		density: {
 			type: [String, Number],
 			default: 200,
-			validator: (e) => Object.keys(t).includes(String(e))
+			validator: (e) => Object.keys(n).includes(String(e))
 		}
 	},
-	setup(h) {
-		let g = h, _ = s(() => [
+	setup(e) {
+		let g = e, _ = c(() => [
 			"d-prose",
-			r[String(g.size)],
-			t[String(g.density)]
-		].filter(Boolean)), v = p(null);
+			i[String(g.size)],
+			n[String(g.density)]
+		].filter(Boolean)), v = m(null);
 		function y(e) {
 			return e.includes("-");
 		}
 		function b(e, t) {
-			return n.includes(t) ? !(t === "input" && e.getAttribute("type") === "checkbox" && e.parentElement?.tagName.toLowerCase() === "li") : !1;
+			return r.includes(t) ? !(t === "input" && e.getAttribute("type") === "checkbox" && e.parentElement?.tagName.toLowerCase() === "li") : !1;
 		}
-		function x(t, n) {
-			let r = e._global || [], s = e[n] || [], c = [...r, ...s], l = [];
-			for (let e of t.attributes) {
-				if (a.includes(e.name) && !o(e.value)) {
-					l.push(e.name);
+		function x(e, n) {
+			let r = t._global || [], i = t[n] || [], c = [...r, ...i], l = [];
+			for (let t of e.attributes) {
+				if (o.includes(t.name) && !s(t.value)) {
+					l.push(t.name);
 					continue;
 				}
-				c.includes(e.name) || i.some((t) => e.name.startsWith(t)) || l.push(e.name);
+				c.includes(t.name) || a.some((e) => t.name.startsWith(e)) || l.push(t.name);
 			}
-			for (let e of l) t.removeAttribute(e);
+			for (let t of l) e.removeAttribute(t);
 		}
 		function S() {
 			if (!v.value) return;
@@ -54,15 +55,15 @@ var h = /* @__PURE__ */ Object.assign({ name: "DtProse" }, {
 				y(n) ? console.error(`DtProse: Custom element <${n}> is not allowed inside prose content. Only plain HTML elements are permitted.`) : b(t, n) && console.error(`DtProse: <${n}> is not allowed inside prose content. Form elements and interactive controls should not be used in prose blocks.`), t = e.nextNode();
 			}
 		}
-		return u(S), d(S), process.env.NODE_ENV !== "production" && (u(C), d(C)), (e, t) => (f(), c("div", {
+		return d(S), f(S), process.env.NODE_ENV !== "production" && (d(C), f(C)), (e, t) => (p(), l("div", {
 			ref_key: "proseRef",
 			ref: v,
-			class: l(_.value),
+			class: u(_.value),
 			"data-qa": "dt-prose"
-		}, [m(e.$slots, "default")], 2));
+		}, [h(e.$slots, "default")], 2));
 	}
 });
 //#endregion
-export { h as default };
+export { g as default };
 
 //# sourceMappingURL=prose.js.map

package/dist/lib/prose/prose.js.map

@@ -1 +1 @@
-{"version":3,"file":"prose.js","names":[],"sources":["../../../components/Prose/Prose.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <div\n    ref=\"proseRef\"\n    :class=\"proseClasses\"\n    data-qa=\"dt-prose\"\n  >\n    <!-- @slot Default slot for raw HTML content -->\n    <slot />\n  </div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'DtProse' });\n\nimport { computed, ref, onMounted, onUpdated } from 'vue';\nimport {\n  PROSE_DISALLOWED_ELEMENTS,\n  PROSE_ALLOWED_ATTRIBUTES,\n  _PROSE_ALLOWED_ATTRIBUTE_PREFIXES,\n  _PROSE_URL_ATTRIBUTES,\n  PROSE_SIZE_MODIFIERS,\n  PROSE_DENSITY_MODIFIERS,\n  _isSafeProseUrl,\n} from './ProseConstants.js';\n\nconst props = defineProps({\n  /**\n   * The size of the prose typography scale.\n   * @values 100, 200, 300\n   */\n  size: {\n    type: [String, Number],\n    default: 300,\n    validator: (s) => Object.keys(PROSE_SIZE_MODIFIERS).includes(String(s)),\n  },\n\n  /**\n   * The density (line-height) of prose content.\n   * @values 100, 200, 300\n   */\n  density: {\n    type: [String, Number],\n    default: 200,\n    validator: (s) => Object.keys(PROSE_DENSITY_MODIFIERS).includes(String(s)),\n  },\n});\n\nconst proseClasses = computed(() => [\n  'd-prose',\n  PROSE_SIZE_MODIFIERS[String(props.size)],\n  PROSE_DENSITY_MODIFIERS[String(props.density)],\n].filter(Boolean));\n\nconst proseRef = ref(null);\n\nfunction isCustomElement (tagName) {\n  return tagName.includes('-');\n}\n\nfunction isDisallowedElement (node, tagName) {\n  if (!PROSE_DISALLOWED_ELEMENTS.includes(tagName)) return false;\n\n  // Exception: <input type=\"checkbox\"> inside <li> (task list pattern)\n  return !(\n    tagName === 'input' &&\n    node.getAttribute('type') === 'checkbox' &&\n    node.parentElement?.tagName.toLowerCase() === 'li'\n  );\n}\n\nfunction stripDisallowedAttributes (node, tagName) {\n  const allowedGlobal = PROSE_ALLOWED_ATTRIBUTES._global || [];\n  const allowedForTag = PROSE_ALLOWED_ATTRIBUTES[tagName] || [];\n  const allowed = [...allowedGlobal, ...allowedForTag];\n\n  const attrsToRemove = [];\n  for (const attr of node.attributes) {\n    if (_PROSE_URL_ATTRIBUTES.includes(attr.name) && !_isSafeProseUrl(attr.value)) {\n      attrsToRemove.push(attr.name);\n      continue;\n    }\n    if (allowed.includes(attr.name)) continue;\n    if (_PROSE_ALLOWED_ATTRIBUTE_PREFIXES.some(prefix => attr.name.startsWith(prefix))) continue;\n    attrsToRemove.push(attr.name);\n  }\n  for (const attrName of attrsToRemove) {\n    node.removeAttribute(attrName);\n  }\n}\n\nfunction sanitizeContent () {\n  if (!proseRef.value) return;\n\n  const walker = document.createTreeWalker(\n    proseRef.value,\n    NodeFilter.SHOW_ELEMENT,\n  );\n\n  let node = walker.nextNode();\n  while (node) {\n    const tagName = node.tagName.toLowerCase();\n    stripDisallowedAttributes(node, tagName);\n\n    node = walker.nextNode();\n  }\n}\n\nfunction validateContent () {\n  if (!proseRef.value) return;\n\n  const walker = document.createTreeWalker(\n    proseRef.value,\n    NodeFilter.SHOW_ELEMENT,\n  );\n\n  let node = walker.nextNode();\n  while (node) {\n    const tagName = node.tagName.toLowerCase();\n\n    if (isCustomElement(tagName)) {\n      console.error(\n        `DtProse: Custom element <${tagName}> is not allowed inside prose content. ` +\n        'Only plain HTML elements are permitted.',\n      );\n    } else if (isDisallowedElement(node, tagName)) {\n      console.error(\n        `DtProse: <${tagName}> is not allowed inside prose content. ` +\n        'Form elements and interactive controls should not be used in prose blocks.',\n      );\n    }\n\n    node = walker.nextNode();\n  }\n}\n\nonMounted(sanitizeContent);\nonUpdated(sanitizeContent);\n\nif (process.env.NODE_ENV !== 'production') {\n  onMounted(validateContent);\n  onUpdated(validateContent);\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;EA0BA,IAAM,IAAQ,GAsBR,IAAe,QAAe;GAClC;GACA,EAAqB,OAAO,EAAM,KAAK;GACvC,EAAwB,OAAO,EAAM,QAAQ;GAC9C,CAAC,OAAO,QAAQ,CAAC,EAEZ,IAAW,EAAI,KAAK;EAE1B,SAAS,EAAiB,GAAS;AACjC,UAAO,EAAQ,SAAS,IAAI;;EAG9B,SAAS,EAAqB,GAAM,GAAS;AAI3C,UAHK,EAA0B,SAAS,EAAQ,GAGzC,EACL,MAAY,WACZ,EAAK,aAAa,OAAO,KAAK,cAC9B,EAAK,eAAe,QAAQ,aAAa,KAAK,QANS;;EAU3D,SAAS,EAA2B,GAAM,GAAS;GACjD,IAAM,IAAgB,EAAyB,WAAW,EAAE,EACtD,IAAgB,EAAyB,MAAY,EAAE,EACvD,IAAU,CAAC,GAAG,GAAe,GAAG,EAAc,EAE9C,IAAgB,EAAE;AACxB,QAAK,IAAM,KAAQ,EAAK,YAAY;AAClC,QAAI,EAAsB,SAAS,EAAK,KAAK,IAAI,CAAC,EAAgB,EAAK,MAAM,EAAE;AAC7E,OAAc,KAAK,EAAK,KAAK;AAC7B;;AAEE,MAAQ,SAAS,EAAK,KAAK,IAC3B,EAAkC,MAAK,MAAU,EAAK,KAAK,WAAW,EAAO,CAAC,IAClF,EAAc,KAAK,EAAK,KAAK;;AAE/B,QAAK,IAAM,KAAY,EACrB,GAAK,gBAAgB,EAAS;;EAIlC,SAAS,IAAmB;AAC1B,OAAI,CAAC,EAAS,MAAO;GAErB,IAAM,IAAS,SAAS,iBACtB,EAAS,OACT,WAAW,aACZ,EAEG,IAAO,EAAO,UAAU;AAC5B,UAAO,IAAM;IACX,IAAM,IAAU,EAAK,QAAQ,aAAa;AAG1C,IAFA,EAA0B,GAAM,EAAQ,EAExC,IAAO,EAAO,UAAU;;;EAI5B,SAAS,IAAmB;AAC1B,OAAI,CAAC,EAAS,MAAO;GAErB,IAAM,IAAS,SAAS,iBACtB,EAAS,OACT,WAAW,aACZ,EAEG,IAAO,EAAO,UAAU;AAC5B,UAAO,IAAM;IACX,IAAM,IAAU,EAAK,QAAQ,aAAa;AAc1C,IAZI,EAAgB,EAAQ,GAC1B,QAAQ,MACN,4BAA4B,EAAQ,gFAErC,GACQ,EAAoB,GAAM,EAAQ,IAC3C,QAAQ,MACN,aAAa,EAAQ,mHAEtB,EAGH,IAAO,EAAO,UAAU;;;SAI5B,EAAU,EAAgB,EAC1B,EAAU,EAAgB,EAE1B,QAAA,IAAA,aAA6B,iBAC3B,EAAU,EAAgB,EAC1B,EAAU,EAAgB,mBA3I1B,EAOM,OAAA;YANA;GAAJ,KAAI;GACH,OAAK,EAAE,EAAA,MAAY;GACpB,WAAQ;MAGR,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"prose.js","names":[],"sources":["../../../components/Prose/Prose.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <div\n    ref=\"proseRef\"\n    :class=\"proseClasses\"\n    data-qa=\"dt-prose\"\n  >\n    <!-- @slot Default slot for raw HTML content -->\n    <slot />\n  </div>\n</template>\n\n<script setup>\ndefineOptions({ name: 'DtProse' });\n\nimport { computed, ref, onMounted, onUpdated } from 'vue';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport {\n  PROSE_DISALLOWED_ELEMENTS,\n  PROSE_ALLOWED_ATTRIBUTES,\n  _PROSE_ALLOWED_ATTRIBUTE_PREFIXES,\n  _PROSE_URL_ATTRIBUTES,\n  PROSE_SIZE_MODIFIERS,\n  PROSE_DENSITY_MODIFIERS,\n  _isSafeProseUrl,\n} from './ProseConstants.js';\n\nconst props = defineProps({\n  /**\n   * The size of the prose typography scale.\n   * @values 100, 200, 300\n   */\n  size: {\n    type: [String, Number],\n    default: 300,\n    validator: ordinalSizeValidator(PROSE_SIZE_MODIFIERS),\n  },\n\n  /**\n   * The density (line-height) of prose content.\n   * @values 100, 200, 300\n   */\n  density: {\n    type: [String, Number],\n    default: 200,\n    validator: (s) => Object.keys(PROSE_DENSITY_MODIFIERS).includes(String(s)),\n  },\n});\n\nconst proseClasses = computed(() => [\n  'd-prose',\n  PROSE_SIZE_MODIFIERS[String(props.size)],\n  PROSE_DENSITY_MODIFIERS[String(props.density)],\n].filter(Boolean));\n\nconst proseRef = ref(null);\n\nfunction isCustomElement (tagName) {\n  return tagName.includes('-');\n}\n\nfunction isDisallowedElement (node, tagName) {\n  if (!PROSE_DISALLOWED_ELEMENTS.includes(tagName)) return false;\n\n  // Exception: <input type=\"checkbox\"> inside <li> (task list pattern)\n  return !(\n    tagName === 'input' &&\n    node.getAttribute('type') === 'checkbox' &&\n    node.parentElement?.tagName.toLowerCase() === 'li'\n  );\n}\n\nfunction stripDisallowedAttributes (node, tagName) {\n  const allowedGlobal = PROSE_ALLOWED_ATTRIBUTES._global || [];\n  const allowedForTag = PROSE_ALLOWED_ATTRIBUTES[tagName] || [];\n  const allowed = [...allowedGlobal, ...allowedForTag];\n\n  const attrsToRemove = [];\n  for (const attr of node.attributes) {\n    if (_PROSE_URL_ATTRIBUTES.includes(attr.name) && !_isSafeProseUrl(attr.value)) {\n      attrsToRemove.push(attr.name);\n      continue;\n    }\n    if (allowed.includes(attr.name)) continue;\n    if (_PROSE_ALLOWED_ATTRIBUTE_PREFIXES.some(prefix => attr.name.startsWith(prefix))) continue;\n    attrsToRemove.push(attr.name);\n  }\n  for (const attrName of attrsToRemove) {\n    node.removeAttribute(attrName);\n  }\n}\n\nfunction sanitizeContent () {\n  if (!proseRef.value) return;\n\n  const walker = document.createTreeWalker(\n    proseRef.value,\n    NodeFilter.SHOW_ELEMENT,\n  );\n\n  let node = walker.nextNode();\n  while (node) {\n    const tagName = node.tagName.toLowerCase();\n    stripDisallowedAttributes(node, tagName);\n\n    node = walker.nextNode();\n  }\n}\n\nfunction validateContent () {\n  if (!proseRef.value) return;\n\n  const walker = document.createTreeWalker(\n    proseRef.value,\n    NodeFilter.SHOW_ELEMENT,\n  );\n\n  let node = walker.nextNode();\n  while (node) {\n    const tagName = node.tagName.toLowerCase();\n\n    if (isCustomElement(tagName)) {\n      console.error(\n        `DtProse: Custom element <${tagName}> is not allowed inside prose content. ` +\n        'Only plain HTML elements are permitted.',\n      );\n    } else if (isDisallowedElement(node, tagName)) {\n      console.error(\n        `DtProse: <${tagName}> is not allowed inside prose content. ` +\n        'Form elements and interactive controls should not be used in prose blocks.',\n      );\n    }\n\n    node = walker.nextNode();\n  }\n}\n\nonMounted(sanitizeContent);\nonUpdated(sanitizeContent);\n\nif (process.env.NODE_ENV !== 'production') {\n  onMounted(validateContent);\n  onUpdated(validateContent);\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EA2BA,IAAM,IAAQ,GAsBR,IAAe,QAAe;GAClC;GACA,EAAqB,OAAO,EAAM,KAAK;GACvC,EAAwB,OAAO,EAAM,QAAQ;GAC9C,CAAC,OAAO,QAAQ,CAAC,EAEZ,IAAW,EAAI,KAAK;EAE1B,SAAS,EAAiB,GAAS;AACjC,UAAO,EAAQ,SAAS,IAAI;;EAG9B,SAAS,EAAqB,GAAM,GAAS;AAI3C,UAHK,EAA0B,SAAS,EAAQ,GAGzC,EACL,MAAY,WACZ,EAAK,aAAa,OAAO,KAAK,cAC9B,EAAK,eAAe,QAAQ,aAAa,KAAK,QANS;;EAU3D,SAAS,EAA2B,GAAM,GAAS;GACjD,IAAM,IAAgB,EAAyB,WAAW,EAAE,EACtD,IAAgB,EAAyB,MAAY,EAAE,EACvD,IAAU,CAAC,GAAG,GAAe,GAAG,EAAc,EAE9C,IAAgB,EAAE;AACxB,QAAK,IAAM,KAAQ,EAAK,YAAY;AAClC,QAAI,EAAsB,SAAS,EAAK,KAAK,IAAI,CAAC,EAAgB,EAAK,MAAM,EAAE;AAC7E,OAAc,KAAK,EAAK,KAAK;AAC7B;;AAEE,MAAQ,SAAS,EAAK,KAAK,IAC3B,EAAkC,MAAK,MAAU,EAAK,KAAK,WAAW,EAAO,CAAC,IAClF,EAAc,KAAK,EAAK,KAAK;;AAE/B,QAAK,IAAM,KAAY,EACrB,GAAK,gBAAgB,EAAS;;EAIlC,SAAS,IAAmB;AAC1B,OAAI,CAAC,EAAS,MAAO;GAErB,IAAM,IAAS,SAAS,iBACtB,EAAS,OACT,WAAW,aACZ,EAEG,IAAO,EAAO,UAAU;AAC5B,UAAO,IAAM;IACX,IAAM,IAAU,EAAK,QAAQ,aAAa;AAG1C,IAFA,EAA0B,GAAM,EAAQ,EAExC,IAAO,EAAO,UAAU;;;EAI5B,SAAS,IAAmB;AAC1B,OAAI,CAAC,EAAS,MAAO;GAErB,IAAM,IAAS,SAAS,iBACtB,EAAS,OACT,WAAW,aACZ,EAEG,IAAO,EAAO,UAAU;AAC5B,UAAO,IAAM;IACX,IAAM,IAAU,EAAK,QAAQ,aAAa;AAc1C,IAZI,EAAgB,EAAQ,GAC1B,QAAQ,MACN,4BAA4B,EAAQ,gFAErC,GACQ,EAAoB,GAAM,EAAQ,IAC3C,QAAQ,MACN,aAAa,EAAQ,mHAEtB,EAGH,IAAO,EAAO,UAAU;;;SAI5B,EAAU,EAAgB,EAC1B,EAAU,EAAgB,EAE1B,QAAA,IAAA,aAA6B,iBAC3B,EAAU,EAAgB,EAC1B,EAAU,EAAgB,mBA5I1B,EAOM,OAAA;YANA;GAAJ,KAAI;GACH,OAAK,EAAE,EAAA,MAAY;GACpB,WAAQ;MAGR,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}

package/dist/lib/rich-text-editor/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../../RichTextEditor-BX-5tCOx.cjs`),t=require(`./rich-text-editor-constants.cjs`);exports.DtRichTextEditor=e.t,exports.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES=t.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,exports.RICH_TEXT_EDITOR_OUTPUT_FORMATS=t.RICH_TEXT_EDITOR_OUTPUT_FORMATS;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../../RichTextEditor-B9NGgB03.cjs`),t=require(`./rich-text-editor-constants.cjs`);exports.DtRichTextEditor=e.t,exports.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES=t.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,exports.RICH_TEXT_EDITOR_OUTPUT_FORMATS=t.RICH_TEXT_EDITOR_OUTPUT_FORMATS;

package/dist/lib/rich-text-editor/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../../RichTextEditor-D8Kas5A3.js";
+import { t as e } from "../../RichTextEditor-DxbZSRop.js";
 import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as t, RICH_TEXT_EDITOR_OUTPUT_FORMATS as n } from "./rich-text-editor-constants.js";
 export { e as DtRichTextEditor, t as RICH_TEXT_EDITOR_AUTOFOCUS_TYPES, n as RICH_TEXT_EDITOR_OUTPUT_FORMATS };

package/dist/lib/rich-text-editor/markdown-renderer.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../MarkdownRenderer-C3MZDB2I.js";
+import { t as e } from "../../MarkdownRenderer-NSSny0ID.js";
 export { e as renderEditorToMarkdown };

package/dist/lib/rich-text-editor/rich-text-editor.cjs

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

package/dist/lib/rich-text-editor/rich-text-editor.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../RichTextEditor-D8Kas5A3.js";
+import { t as e } from "../../RichTextEditor-DxbZSRop.js";
 export { e as default };

package/dist/lib/segmented-control/segmented-control.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(`../stack/stack.cjs`),n=require(`../../common/composables/use-indicator-animation.cjs`),r=require(`./segmented-control-constants.cjs`);let i=require(`vue`);var a=Object.assign({name:`DtSegmentedControl`},{__name:`SegmentedControl`,props:{id:{type:String,default(){return e.getUniqueString()}},modelValue:{type:String,required:!0},ariaLabel:{type:String,default:void 0},orientation:{type:String,default:r.SEGMENTED_CONTROL_ORIENTATION_DEFAULT,validator:e=>r.SEGMENTED_CONTROL_ORIENTATIONS.includes(e)},size:{type:[String,Number],default:200,validator:e=>r.SEGMENTED_CONTROL_SIZES.includes(String(e))},activationMode:{type:String,default:r.SEGMENTED_CONTROL_ACTIVATION_MODE_DEFAULT,validator:e=>r.SEGMENTED_CONTROL_ACTIVATION_MODES.includes(e)},disabled:{type:Boolean,default:!1},showDivider:{type:Boolean,default:!0},borderless:{type:Boolean,default:!1},spread:{type:String,default:r.SEGMENTED_CONTROL_SPREAD_DEFAULT,validator:e=>r.SEGMENTED_CONTROL_SPREADS.includes(e)},labelClass:{type:[String,Array,Object],default:``},showIndicatorTransition:{type:Boolean,default:!0}},emits:[`update:modelValue`,`change`,`before-change`],setup(e,{emit:a}){let o=e,s=a,c=(0,i.ref)(null),l=(0,i.ref)(null),u=(0,i.computed)(()=>o.orientation===`vertical`?`column`:`row`),d=(0,i.computed)(()=>[`d-segmented-control`,r.SEGMENTED_CONTROL_SIZE_MODIFIERS[String(o.size)],o.showDivider?null:`d-segmented-control--hide-divider`,o.borderless?`d-segmented-control--borderless`:null,o.orientation===`vertical`?`d-segmented-control--vertical`:null,o.spread===`evenly`&&o.orientation===`horizontal`?`d-segmented-control--spread-evenly`:null]),f=(0,i.reactive)({selected:o.modelValue,disabled:o.disabled,size:o.size,labelClass:o.labelClass});(0,i.watchEffect)(()=>{f.selected=o.modelValue,f.disabled=o.disabled,f.size=o.size,f.labelClass=o.labelClass}),(0,i.provide)(r.SEGMENTED_CONTROL_CONTEXT_KEY,f),(0,i.provide)(r.SEGMENTED_CONTROL_SELECT_KEY,_),(0,i.provide)(r.SEGMENTED_CONTROL_FOCUS_KEY,g);function p(){let e=h();if(!e.length||e.some(e=>e.getAttribute(`tabindex`)===`0`))return;let t=e.find(e=>!b(e));t&&t.setAttribute(`tabindex`,`0`)}let m=n.useIndicatorAnimation(c,`--segmented-indicator-duration`,`--segmented-indicator-easing`);(0,i.onMounted)(p),(0,i.watch)(()=>[o.modelValue,o.disabled],p,{flush:`post`});function h(){let e=c.value?.$el||c.value;return e?Array.from(e.querySelectorAll(r.SEGMENTED_CONTROL_ITEM_SELECTOR)):[]}function g(e){l.value=e}async function _(e,{animate:t=!0}={}){if(o.disabled||e===o.modelValue)return;let n=new Event(`before-change`,{cancelable:!0});if(s(`before-change`,n),n.defaultPrevented)return;m.cancel();let a=t&&o.showIndicatorTransition?m.snapshot(`[aria-checked="true"]`):null;if(s(`update:modelValue`,e),s(`change`,e),!a)return;await(0,i.nextTick)();let l=(c.value?.$el||c.value)?.querySelector(`[${r.SEGMENTED_CONTROL_DATA_VALUE_ATTR}="${CSS.escape(e)}"]`);l&&m.animate({oldRect:a.rect,newEl:l,orientation:o.orientation,hideProps:{backgroundColor:`transparent`},indicatorExtra:{backgroundColor:`var(--button-color-background)`},pseudoElement:`::after`})}function v(e,t){if(t){let n=t.target.closest(r.SEGMENTED_CONTROL_ITEM_SELECTOR);if(n){let t=e.indexOf(n);if(t!==-1)return t}}let n=e.findIndex(e=>{let t=e.getAttribute(r.SEGMENTED_CONTROL_DATA_VALUE_ATTR);return l.value?t===l.value:e.getAttribute(`aria-checked`)===`true`});return n===-1?0:n}function y(e){b(e)||_(e.getAttribute(r.SEGMENTED_CONTROL_DATA_VALUE_ATTR))}function b(e){return e.getAttribute(`aria-disabled`)===`true`}function x(e,t,n){let r=e.length;for(let i=1;i<=r;i++){let a=(t+i*n+r)%r;if(!b(e[a]))return a}return t}function S(e,t,n){let r=o.orientation===`horizontal`,i=r?`ArrowRight`:`ArrowDown`,a=r?`ArrowLeft`:`ArrowUp`;switch(e){case i:return x(n,t,1);case a:return x(n,t,-1);case`Home`:return x(n,n.length-1,1);case`End`:return x(n,0,-1);default:return-1}}function C(e){let t=h();if(!t.length)return;let n=v(t,e);if(e.key===`Enter`||e.key===` `){y(t[n]),e.preventDefault(),e.stopPropagation();return}let i=S(e.key,n,t);if(i!==-1&&(e.preventDefault(),e.stopPropagation(),t[i].focus(),o.activationMode===`auto`)){m.cancel();let e=t[i].getAttribute(r.SEGMENTED_CONTROL_DATA_VALUE_ATTR);b(t[i])||_(e,{animate:!1})}}return(n,r)=>((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(t.default),{id:e.id,ref_key:`container`,ref:c,align:`stretch`,class:(0,i.normalizeClass)(d.value),direction:u.value,role:`radiogroup`,"aria-label":e.ariaLabel,"aria-orientation":e.orientation,"data-qa":`dt-segmented-control`,onKeydown:C},{default:(0,i.withCtx)(()=>[(0,i.renderSlot)(n.$slots,`default`)]),_:3},8,[`id`,`class`,`direction`,`aria-label`,`aria-orientation`]))}});exports.default=a;
+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(`../stack/stack.cjs`),r=require(`../../common/composables/use-indicator-animation.cjs`),i=require(`./segmented-control-constants.cjs`);let a=require(`vue`);var o=Object.assign({name:`DtSegmentedControl`},{__name:`SegmentedControl`,props:{id:{type:String,default(){return t.getUniqueString()}},modelValue:{type:String,required:!0},ariaLabel:{type:String,default:void 0},orientation:{type:String,default:i.SEGMENTED_CONTROL_ORIENTATION_DEFAULT,validator:e=>i.SEGMENTED_CONTROL_ORIENTATIONS.includes(e)},size:{type:[String,Number],default:200,validator:e.ordinalSizeValidator(i.SEGMENTED_CONTROL_SIZES)},activationMode:{type:String,default:i.SEGMENTED_CONTROL_ACTIVATION_MODE_DEFAULT,validator:e=>i.SEGMENTED_CONTROL_ACTIVATION_MODES.includes(e)},disabled:{type:Boolean,default:!1},showDivider:{type:Boolean,default:!0},borderless:{type:Boolean,default:!1},spread:{type:String,default:i.SEGMENTED_CONTROL_SPREAD_DEFAULT,validator:e=>i.SEGMENTED_CONTROL_SPREADS.includes(e)},labelClass:{type:[String,Array,Object],default:``},showIndicatorTransition:{type:Boolean,default:!0}},emits:[`update:modelValue`,`change`,`before-change`],setup(e,{emit:t}){let o=e,s=t,c=(0,a.ref)(null),l=(0,a.ref)(null),u=(0,a.computed)(()=>o.orientation===`vertical`?`column`:`row`),d=(0,a.computed)(()=>[`d-segmented-control`,i.SEGMENTED_CONTROL_SIZE_MODIFIERS[String(o.size)],o.showDivider?null:`d-segmented-control--hide-divider`,o.borderless?`d-segmented-control--borderless`:null,o.orientation===`vertical`?`d-segmented-control--vertical`:null,o.spread===`evenly`&&o.orientation===`horizontal`?`d-segmented-control--spread-evenly`:null]),f=(0,a.reactive)({selected:o.modelValue,disabled:o.disabled,size:o.size,labelClass:o.labelClass});(0,a.watchEffect)(()=>{f.selected=o.modelValue,f.disabled=o.disabled,f.size=o.size,f.labelClass=o.labelClass}),(0,a.provide)(i.SEGMENTED_CONTROL_CONTEXT_KEY,f),(0,a.provide)(i.SEGMENTED_CONTROL_SELECT_KEY,_),(0,a.provide)(i.SEGMENTED_CONTROL_FOCUS_KEY,g);function p(){let e=h();if(!e.length||e.some(e=>e.getAttribute(`tabindex`)===`0`))return;let t=e.find(e=>!b(e));t&&t.setAttribute(`tabindex`,`0`)}let m=r.useIndicatorAnimation(c,`--segmented-indicator-duration`,`--segmented-indicator-easing`);(0,a.onMounted)(p),(0,a.watch)(()=>[o.modelValue,o.disabled],p,{flush:`post`});function h(){let e=c.value?.$el||c.value;return e?Array.from(e.querySelectorAll(i.SEGMENTED_CONTROL_ITEM_SELECTOR)):[]}function g(e){l.value=e}async function _(e,{animate:t=!0}={}){if(o.disabled||e===o.modelValue)return;let n=new Event(`before-change`,{cancelable:!0});if(s(`before-change`,n),n.defaultPrevented)return;m.cancel();let r=t&&o.showIndicatorTransition?m.snapshot(`[aria-checked="true"]`):null;if(s(`update:modelValue`,e),s(`change`,e),!r)return;await(0,a.nextTick)();let l=(c.value?.$el||c.value)?.querySelector(`[${i.SEGMENTED_CONTROL_DATA_VALUE_ATTR}="${CSS.escape(e)}"]`);l&&m.animate({oldRect:r.rect,newEl:l,orientation:o.orientation,hideProps:{backgroundColor:`transparent`},indicatorExtra:{backgroundColor:`var(--button-color-background)`},pseudoElement:`::after`})}function v(e,t){if(t){let n=t.target.closest(i.SEGMENTED_CONTROL_ITEM_SELECTOR);if(n){let t=e.indexOf(n);if(t!==-1)return t}}let n=e.findIndex(e=>{let t=e.getAttribute(i.SEGMENTED_CONTROL_DATA_VALUE_ATTR);return l.value?t===l.value:e.getAttribute(`aria-checked`)===`true`});return n===-1?0:n}function y(e){b(e)||_(e.getAttribute(i.SEGMENTED_CONTROL_DATA_VALUE_ATTR))}function b(e){return e.getAttribute(`aria-disabled`)===`true`}function x(e,t,n){let r=e.length;for(let i=1;i<=r;i++){let a=(t+i*n+r)%r;if(!b(e[a]))return a}return t}function S(e,t,n){let r=o.orientation===`horizontal`,i=r?`ArrowRight`:`ArrowDown`,a=r?`ArrowLeft`:`ArrowUp`;switch(e){case i:return x(n,t,1);case a:return x(n,t,-1);case`Home`:return x(n,n.length-1,1);case`End`:return x(n,0,-1);default:return-1}}function C(e){let t=h();if(!t.length)return;let n=v(t,e);if(e.key===`Enter`||e.key===` `){y(t[n]),e.preventDefault(),e.stopPropagation();return}let r=S(e.key,n,t);if(r!==-1&&(e.preventDefault(),e.stopPropagation(),t[r].focus(),o.activationMode===`auto`)){m.cancel();let e=t[r].getAttribute(i.SEGMENTED_CONTROL_DATA_VALUE_ATTR);b(t[r])||_(e,{animate:!1})}}return(t,r)=>((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(n.default),{id:e.id,ref_key:`container`,ref:c,align:`stretch`,class:(0,a.normalizeClass)(d.value),direction:u.value,role:`radiogroup`,"aria-label":e.ariaLabel,"aria-orientation":e.orientation,"data-qa":`dt-segmented-control`,onKeydown:C},{default:(0,a.withCtx)(()=>[(0,a.renderSlot)(t.$slots,`default`)]),_:3},8,[`id`,`class`,`direction`,`aria-label`,`aria-orientation`]))}});exports.default=o;
 //# sourceMappingURL=segmented-control.cjs.map

package/dist/lib/segmented-control/segmented-control.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.cjs","names":[],"sources":["../../../components/SegmentedControl/SegmentedControl.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :id=\"id\"\n    ref=\"container\"\n    align=\"stretch\"\n    :class=\"containerClasses\"\n    :direction=\"stackDirection\"\n    role=\"radiogroup\"\n    :aria-label=\"ariaLabel\"\n    :aria-orientation=\"orientation\"\n    data-qa=\"dt-segmented-control\"\n    @keydown=\"handleKeyDown\"\n  >\n    <!-- @slot DtSegmentedControlItem children -->\n    <slot />\n  </dt-stack>\n</template>\n\n<script setup>\nimport { ref, computed, reactive, watchEffect, watch, provide, onMounted, nextTick } from 'vue';\nimport { getUniqueString } from '@/common/utils';\nimport { DtStack } from '@/components/Stack';\nimport { useIndicatorAnimation } from '@/common/composables/useIndicatorAnimation';\nimport {\n  SEGMENTED_CONTROL_SIZES,\n  SEGMENTED_CONTROL_SIZE_DEFAULT,\n  SEGMENTED_CONTROL_SIZE_MODIFIERS,\n  SEGMENTED_CONTROL_ORIENTATIONS,\n  SEGMENTED_CONTROL_ORIENTATION_DEFAULT,\n  SEGMENTED_CONTROL_ACTIVATION_MODES,\n  SEGMENTED_CONTROL_ACTIVATION_MODE_DEFAULT,\n  SEGMENTED_CONTROL_SPREADS,\n  SEGMENTED_CONTROL_SPREAD_DEFAULT,\n  SEGMENTED_CONTROL_CONTEXT_KEY,\n  SEGMENTED_CONTROL_SELECT_KEY,\n  SEGMENTED_CONTROL_FOCUS_KEY,\n  SEGMENTED_CONTROL_ITEM_SELECTOR,\n  SEGMENTED_CONTROL_DATA_VALUE_ATTR,\n} from './SegmentedControlConstants.js';\n\ndefineOptions({ name: 'DtSegmentedControl' });\n\nconst props = defineProps({\n  /**\n   * Element ID for the radiogroup container.\n   * Auto-generated if not provided.\n   */\n  id: {\n    type: String,\n    default () { return getUniqueString(); },\n  },\n\n  /**\n   * The currently selected value (v-model).\n   */\n  modelValue: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * Accessible label for the radiogroup.\n   */\n  ariaLabel: {\n    type: String,\n    default: undefined,\n  },\n\n  /**\n   * Orientation of the segmented control.\n   * Maps to DtStack direction: horizontal -> row, vertical -> column.\n   * @values horizontal, vertical\n   */\n  orientation: {\n    type: String,\n    default: SEGMENTED_CONTROL_ORIENTATION_DEFAULT,\n    validator: (v) => SEGMENTED_CONTROL_ORIENTATIONS.includes(v),\n  },\n\n  /**\n   * DtButton size for all items. Inherited by children via provide.\n   * @values 100, 200, 300, 400, 500\n   */\n  size: {\n    type: [String, Number],\n    default: SEGMENTED_CONTROL_SIZE_DEFAULT,\n    validator: (v) => SEGMENTED_CONTROL_SIZES.includes(String(v)),\n  },\n\n  /**\n   * Controls whether items are selected on focus (auto) or on click/Space/Enter (manual).\n   * @values auto, manual\n   */\n  activationMode: {\n    type: String,\n    default: SEGMENTED_CONTROL_ACTIVATION_MODE_DEFAULT,\n    validator: (v) => SEGMENTED_CONTROL_ACTIVATION_MODES.includes(v),\n  },\n\n  /**\n   * Disables all items in the group.\n   * Per-item disabled is set via the disabled prop on DtSegmentedControlItem.\n   */\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n   * Shows the dividers between items.\n   */\n  showDivider: {\n    type: Boolean,\n    default: true,\n  },\n\n  /**\n   * Removes the border and padding from the container.\n   */\n  borderless: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n   * Controls how items distribute space.\n   * 'grow' (default): items size to their content.\n   * 'evenly': items share space equally.\n   * @values grow, evenly\n   */\n  spread: {\n    type: String,\n    default: SEGMENTED_CONTROL_SPREAD_DEFAULT,\n    validator: (v) => SEGMENTED_CONTROL_SPREADS.includes(v),\n  },\n\n  /**\n   * Default label class for all items. Items can override with their own labelClass prop.\n   */\n  labelClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n   * If true, the selection indicator animates between items on click.\n   * @values true, false\n   */\n  showIndicatorTransition: {\n    type: Boolean,\n    default: true,\n  },\n});\n\nconst emit = defineEmits([\n  /**\n   * v-model event. Emitted when the selected value changes.\n   * @event update:modelValue\n   * @type {String}\n   */\n  'update:modelValue',\n\n  /**\n   * Emitted when the user selects an item (click, Enter, Space, or arrow in auto mode).\n   * Not emitted for programmatic modelValue changes.\n   * @event change\n   * @type {String}\n   */\n  'change',\n\n  /**\n   * Emitted before a selection change. Call event.preventDefault() to cancel the change.\n   * @event before-change\n   * @type {Event}\n   */\n  'before-change',\n]);\n\nconst container = ref(null);\nconst focusedValue = ref(null);\n\nconst stackDirection = computed(() => props.orientation === 'vertical' ? 'column' : 'row');\n\nconst containerClasses = computed(() => [\n  'd-segmented-control',\n  SEGMENTED_CONTROL_SIZE_MODIFIERS[String(props.size)],\n  !props.showDivider ? 'd-segmented-control--hide-divider' : null,\n  props.borderless ? 'd-segmented-control--borderless' : null,\n  props.orientation === 'vertical' ? 'd-segmented-control--vertical' : null,\n  props.spread === 'evenly' && props.orientation === 'horizontal'\n    ? 'd-segmented-control--spread-evenly'\n    : null,\n]);\n\n// Reactive context provided to children\nconst groupContext = reactive({\n  selected: props.modelValue,\n  disabled: props.disabled,\n  size: props.size,\n  labelClass: props.labelClass,\n});\n\nwatchEffect(() => {\n  groupContext.selected = props.modelValue;\n  groupContext.disabled = props.disabled;\n  groupContext.size = props.size;\n  groupContext.labelClass = props.labelClass;\n});\n\nprovide(SEGMENTED_CONTROL_CONTEXT_KEY, groupContext);\nprovide(SEGMENTED_CONTROL_SELECT_KEY, selectValue);\nprovide(SEGMENTED_CONTROL_FOCUS_KEY, setFocus);\n\n// Ensures at least one enabled item is tabbable (WAI-ARIA radiogroup requirement).\n// Items set tabindex based on isSelected && !isDisabled. If the selected item is disabled\n// or modelValue doesn't match any item, no item has tabindex=\"0\". This fallback sets\n// tabindex=\"0\" on the first enabled item so keyboard users can reach the control.\nfunction ensureTabbable () {\n  const items = getItems();\n  if (!items.length) return;\n  const hasTabbable = items.some(el => el.getAttribute('tabindex') === '0');\n  if (hasTabbable) return;\n  const firstEnabled = items.find(el => !isItemDisabled(el));\n  if (firstEnabled) firstEnabled.setAttribute('tabindex', '0');\n}\n\nconst indicator = useIndicatorAnimation(\n  container, '--segmented-indicator-duration', '--segmented-indicator-easing',\n);\n\nonMounted(ensureTabbable);\n\nwatch(() => [props.modelValue, props.disabled], ensureTabbable, { flush: 'post' });\n\nfunction getItems () {\n  const el = container.value?.$el || container.value;\n  return el ? Array.from(el.querySelectorAll(SEGMENTED_CONTROL_ITEM_SELECTOR)) : [];\n}\n\nfunction setFocus (value) {\n  focusedValue.value = value;\n}\n\nasync function selectValue (value, { animate: shouldAnimate = true } = {}) {\n  if (props.disabled) return;\n  if (value === props.modelValue) return;\n  const beforeChangeEvent = new Event('before-change', { cancelable: true });\n  emit('before-change', beforeChangeEvent);\n  if (beforeChangeEvent.defaultPrevented) return;\n\n  indicator.cancel();\n  const shouldTransition = shouldAnimate && props.showIndicatorTransition;\n  const old = shouldTransition ? indicator.snapshot('[aria-checked=\"true\"]') : null;\n\n  emit('update:modelValue', value);\n  emit('change', value);\n\n  if (!old) return;\n\n  await nextTick();\n  const newEl = (container.value?.$el || container.value)\n    ?.querySelector(`[${SEGMENTED_CONTROL_DATA_VALUE_ATTR}=\"${CSS.escape(value)}\"]`);\n  if (!newEl) return;\n\n  indicator.animate({\n    oldRect: old.rect,\n    newEl,\n    orientation: props.orientation,\n    hideProps: { backgroundColor: 'transparent' },\n    indicatorExtra: { backgroundColor: 'var(--button-color-background)' },\n    pseudoElement: '::after',\n  });\n}\n\nfunction getFocusedIndex (items, event) {\n  // First check event.target — the element that actually has focus\n  if (event) {\n    const target = event.target.closest(SEGMENTED_CONTROL_ITEM_SELECTOR);\n    if (target) {\n      const targetIdx = items.indexOf(target);\n      if (targetIdx !== -1) return targetIdx;\n    }\n  }\n  // Fall back to tracked focusedValue, then aria-checked\n  const idx = items.findIndex(el => {\n    const value = el.getAttribute(SEGMENTED_CONTROL_DATA_VALUE_ATTR);\n    return focusedValue.value ? value === focusedValue.value : el.getAttribute('aria-checked') === 'true';\n  });\n  return idx === -1 ? 0 : idx;\n}\n\nfunction activateItem (item) {\n  if (isItemDisabled(item)) return;\n  selectValue(item.getAttribute(SEGMENTED_CONTROL_DATA_VALUE_ATTR));\n}\n\nfunction isItemDisabled (item) {\n  return item.getAttribute('aria-disabled') === 'true';\n}\n\nfunction findNextEnabled (items, fromIndex, direction) {\n  const len = items.length;\n  for (let i = 1; i <= len; i++) {\n    const index = (fromIndex + i * direction + len) % len;\n    if (!isItemDisabled(items[index])) return index;\n  }\n  return fromIndex;\n}\n\nfunction getNavigationIndex (key, currentIndex, items) {\n  const isHorizontal = props.orientation === 'horizontal';\n  const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n  const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n  switch (key) {\n    case nextKey: return findNextEnabled(items, currentIndex, 1);\n    case prevKey: return findNextEnabled(items, currentIndex, -1);\n    case 'Home': return findNextEnabled(items, items.length - 1, 1);\n    case 'End': return findNextEnabled(items, 0, -1);\n    default: return -1;\n  }\n}\n\nfunction handleKeyDown (event) {\n  const items = getItems();\n  if (!items.length) return;\n\n  const focusedIndex = getFocusedIndex(items, event);\n\n  if (event.key === 'Enter' || event.key === ' ') {\n    activateItem(items[focusedIndex]);\n    event.preventDefault();\n    event.stopPropagation();\n    return;\n  }\n\n  const newIndex = getNavigationIndex(event.key, focusedIndex, items);\n  if (newIndex === -1) return;\n\n  event.preventDefault();\n  event.stopPropagation();\n  items[newIndex].focus();\n\n  if (props.activationMode === 'auto') {\n    indicator.cancel();\n    const value = items[newIndex].getAttribute(SEGMENTED_CONTROL_DATA_VALUE_ATTR);\n    if (!isItemDisabled(items[newIndex])) {\n      selectValue(value, { animate: false });\n    }\n  }\n}\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"segmented-control.cjs","names":[],"sources":["../../../components/SegmentedControl/SegmentedControl.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :id=\"id\"\n    ref=\"container\"\n    align=\"stretch\"\n    :class=\"containerClasses\"\n    :direction=\"stackDirection\"\n    role=\"radiogroup\"\n    :aria-label=\"ariaLabel\"\n    :aria-orientation=\"orientation\"\n    data-qa=\"dt-segmented-control\"\n    @keydown=\"handleKeyDown\"\n  >\n    <!-- @slot DtSegmentedControlItem children -->\n    <slot />\n  </dt-stack>\n</template>\n\n<script setup>\nimport { ref, computed, reactive, watchEffect, watch, provide, onMounted, nextTick } from 'vue';\nimport { getUniqueString } from '@/common/utils';\nimport { DtStack } from '@/components/Stack';\nimport { useIndicatorAnimation } from '@/common/composables/useIndicatorAnimation';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport {\n  SEGMENTED_CONTROL_SIZES,\n  SEGMENTED_CONTROL_SIZE_DEFAULT,\n  SEGMENTED_CONTROL_SIZE_MODIFIERS,\n  SEGMENTED_CONTROL_ORIENTATIONS,\n  SEGMENTED_CONTROL_ORIENTATION_DEFAULT,\n  SEGMENTED_CONTROL_ACTIVATION_MODES,\n  SEGMENTED_CONTROL_ACTIVATION_MODE_DEFAULT,\n  SEGMENTED_CONTROL_SPREADS,\n  SEGMENTED_CONTROL_SPREAD_DEFAULT,\n  SEGMENTED_CONTROL_CONTEXT_KEY,\n  SEGMENTED_CONTROL_SELECT_KEY,\n  SEGMENTED_CONTROL_FOCUS_KEY,\n  SEGMENTED_CONTROL_ITEM_SELECTOR,\n  SEGMENTED_CONTROL_DATA_VALUE_ATTR,\n} from './SegmentedControlConstants.js';\n\ndefineOptions({ name: 'DtSegmentedControl' });\n\nconst props = defineProps({\n  /**\n   * Element ID for the radiogroup container.\n   * Auto-generated if not provided.\n   */\n  id: {\n    type: String,\n    default () { return getUniqueString(); },\n  },\n\n  /**\n   * The currently selected value (v-model).\n   */\n  modelValue: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * Accessible label for the radiogroup.\n   */\n  ariaLabel: {\n    type: String,\n    default: undefined,\n  },\n\n  /**\n   * Orientation of the segmented control.\n   * Maps to DtStack direction: horizontal -> row, vertical -> column.\n   * @values horizontal, vertical\n   */\n  orientation: {\n    type: String,\n    default: SEGMENTED_CONTROL_ORIENTATION_DEFAULT,\n    validator: (v) => SEGMENTED_CONTROL_ORIENTATIONS.includes(v),\n  },\n\n  /**\n   * DtButton size for all items. Inherited by children via provide.\n   * @values 100, 200, 300, 400, 500\n   */\n  size: {\n    type: [String, Number],\n    default: SEGMENTED_CONTROL_SIZE_DEFAULT,\n    validator: ordinalSizeValidator(SEGMENTED_CONTROL_SIZES),\n  },\n\n  /**\n   * Controls whether items are selected on focus (auto) or on click/Space/Enter (manual).\n   * @values auto, manual\n   */\n  activationMode: {\n    type: String,\n    default: SEGMENTED_CONTROL_ACTIVATION_MODE_DEFAULT,\n    validator: (v) => SEGMENTED_CONTROL_ACTIVATION_MODES.includes(v),\n  },\n\n  /**\n   * Disables all items in the group.\n   * Per-item disabled is set via the disabled prop on DtSegmentedControlItem.\n   */\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n   * Shows the dividers between items.\n   */\n  showDivider: {\n    type: Boolean,\n    default: true,\n  },\n\n  /**\n   * Removes the border and padding from the container.\n   */\n  borderless: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n   * Controls how items distribute space.\n   * 'grow' (default): items size to their content.\n   * 'evenly': items share space equally.\n   * @values grow, evenly\n   */\n  spread: {\n    type: String,\n    default: SEGMENTED_CONTROL_SPREAD_DEFAULT,\n    validator: (v) => SEGMENTED_CONTROL_SPREADS.includes(v),\n  },\n\n  /**\n   * Default label class for all items. Items can override with their own labelClass prop.\n   */\n  labelClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n   * If true, the selection indicator animates between items on click.\n   * @values true, false\n   */\n  showIndicatorTransition: {\n    type: Boolean,\n    default: true,\n  },\n});\n\nconst emit = defineEmits([\n  /**\n   * v-model event. Emitted when the selected value changes.\n   * @event update:modelValue\n   * @type {String}\n   */\n  'update:modelValue',\n\n  /**\n   * Emitted when the user selects an item (click, Enter, Space, or arrow in auto mode).\n   * Not emitted for programmatic modelValue changes.\n   * @event change\n   * @type {String}\n   */\n  'change',\n\n  /**\n   * Emitted before a selection change. Call event.preventDefault() to cancel the change.\n   * @event before-change\n   * @type {Event}\n   */\n  'before-change',\n]);\n\nconst container = ref(null);\nconst focusedValue = ref(null);\n\nconst stackDirection = computed(() => props.orientation === 'vertical' ? 'column' : 'row');\n\nconst containerClasses = computed(() => [\n  'd-segmented-control',\n  SEGMENTED_CONTROL_SIZE_MODIFIERS[String(props.size)],\n  !props.showDivider ? 'd-segmented-control--hide-divider' : null,\n  props.borderless ? 'd-segmented-control--borderless' : null,\n  props.orientation === 'vertical' ? 'd-segmented-control--vertical' : null,\n  props.spread === 'evenly' && props.orientation === 'horizontal'\n    ? 'd-segmented-control--spread-evenly'\n    : null,\n]);\n\n// Reactive context provided to children\nconst groupContext = reactive({\n  selected: props.modelValue,\n  disabled: props.disabled,\n  size: props.size,\n  labelClass: props.labelClass,\n});\n\nwatchEffect(() => {\n  groupContext.selected = props.modelValue;\n  groupContext.disabled = props.disabled;\n  groupContext.size = props.size;\n  groupContext.labelClass = props.labelClass;\n});\n\nprovide(SEGMENTED_CONTROL_CONTEXT_KEY, groupContext);\nprovide(SEGMENTED_CONTROL_SELECT_KEY, selectValue);\nprovide(SEGMENTED_CONTROL_FOCUS_KEY, setFocus);\n\n// Ensures at least one enabled item is tabbable (WAI-ARIA radiogroup requirement).\n// Items set tabindex based on isSelected && !isDisabled. If the selected item is disabled\n// or modelValue doesn't match any item, no item has tabindex=\"0\". This fallback sets\n// tabindex=\"0\" on the first enabled item so keyboard users can reach the control.\nfunction ensureTabbable () {\n  const items = getItems();\n  if (!items.length) return;\n  const hasTabbable = items.some(el => el.getAttribute('tabindex') === '0');\n  if (hasTabbable) return;\n  const firstEnabled = items.find(el => !isItemDisabled(el));\n  if (firstEnabled) firstEnabled.setAttribute('tabindex', '0');\n}\n\nconst indicator = useIndicatorAnimation(\n  container, '--segmented-indicator-duration', '--segmented-indicator-easing',\n);\n\nonMounted(ensureTabbable);\n\nwatch(() => [props.modelValue, props.disabled], ensureTabbable, { flush: 'post' });\n\nfunction getItems () {\n  const el = container.value?.$el || container.value;\n  return el ? Array.from(el.querySelectorAll(SEGMENTED_CONTROL_ITEM_SELECTOR)) : [];\n}\n\nfunction setFocus (value) {\n  focusedValue.value = value;\n}\n\nasync function selectValue (value, { animate: shouldAnimate = true } = {}) {\n  if (props.disabled) return;\n  if (value === props.modelValue) return;\n  const beforeChangeEvent = new Event('before-change', { cancelable: true });\n  emit('before-change', beforeChangeEvent);\n  if (beforeChangeEvent.defaultPrevented) return;\n\n  indicator.cancel();\n  const shouldTransition = shouldAnimate && props.showIndicatorTransition;\n  const old = shouldTransition ? indicator.snapshot('[aria-checked=\"true\"]') : null;\n\n  emit('update:modelValue', value);\n  emit('change', value);\n\n  if (!old) return;\n\n  await nextTick();\n  const newEl = (container.value?.$el || container.value)\n    ?.querySelector(`[${SEGMENTED_CONTROL_DATA_VALUE_ATTR}=\"${CSS.escape(value)}\"]`);\n  if (!newEl) return;\n\n  indicator.animate({\n    oldRect: old.rect,\n    newEl,\n    orientation: props.orientation,\n    hideProps: { backgroundColor: 'transparent' },\n    indicatorExtra: { backgroundColor: 'var(--button-color-background)' },\n    pseudoElement: '::after',\n  });\n}\n\nfunction getFocusedIndex (items, event) {\n  // First check event.target — the element that actually has focus\n  if (event) {\n    const target = event.target.closest(SEGMENTED_CONTROL_ITEM_SELECTOR);\n    if (target) {\n      const targetIdx = items.indexOf(target);\n      if (targetIdx !== -1) return targetIdx;\n    }\n  }\n  // Fall back to tracked focusedValue, then aria-checked\n  const idx = items.findIndex(el => {\n    const value = el.getAttribute(SEGMENTED_CONTROL_DATA_VALUE_ATTR);\n    return focusedValue.value ? value === focusedValue.value : el.getAttribute('aria-checked') === 'true';\n  });\n  return idx === -1 ? 0 : idx;\n}\n\nfunction activateItem (item) {\n  if (isItemDisabled(item)) return;\n  selectValue(item.getAttribute(SEGMENTED_CONTROL_DATA_VALUE_ATTR));\n}\n\nfunction isItemDisabled (item) {\n  return item.getAttribute('aria-disabled') === 'true';\n}\n\nfunction findNextEnabled (items, fromIndex, direction) {\n  const len = items.length;\n  for (let i = 1; i <= len; i++) {\n    const index = (fromIndex + i * direction + len) % len;\n    if (!isItemDisabled(items[index])) return index;\n  }\n  return fromIndex;\n}\n\nfunction getNavigationIndex (key, currentIndex, items) {\n  const isHorizontal = props.orientation === 'horizontal';\n  const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n  const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n  switch (key) {\n    case nextKey: return findNextEnabled(items, currentIndex, 1);\n    case prevKey: return findNextEnabled(items, currentIndex, -1);\n    case 'Home': return findNextEnabled(items, items.length - 1, 1);\n    case 'End': return findNextEnabled(items, 0, -1);\n    default: return -1;\n  }\n}\n\nfunction handleKeyDown (event) {\n  const items = getItems();\n  if (!items.length) return;\n\n  const focusedIndex = getFocusedIndex(items, event);\n\n  if (event.key === 'Enter' || event.key === ' ') {\n    activateItem(items[focusedIndex]);\n    event.preventDefault();\n    event.stopPropagation();\n    return;\n  }\n\n  const newIndex = getNavigationIndex(event.key, focusedIndex, items);\n  if (newIndex === -1) return;\n\n  event.preventDefault();\n  event.stopPropagation();\n  items[newIndex].focus();\n\n  if (props.activationMode === 'auto') {\n    indicator.cancel();\n    const value = items[newIndex].getAttribute(SEGMENTED_CONTROL_DATA_VALUE_ATTR);\n    if (!isItemDisabled(items[newIndex])) {\n      selectValue(value, { animate: false });\n    }\n  }\n}\n</script>\n"],"mappings":"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"}

package/dist/lib/segmented-control/segmented-control.js

@@ -1,16 +1,17 @@
-import { getUniqueString as e } from "../../common/utils/index.js";
-import t from "../stack/stack.js";
-import { useIndicatorAnimation as n } from "../../common/composables/use-indicator-animation.js";
-import { SEGMENTED_CONTROL_ACTIVATION_MODES as r, SEGMENTED_CONTROL_ACTIVATION_MODE_DEFAULT as i, SEGMENTED_CONTROL_CONTEXT_KEY as a, SEGMENTED_CONTROL_DATA_VALUE_ATTR as o, SEGMENTED_CONTROL_FOCUS_KEY as s, SEGMENTED_CONTROL_ITEM_SELECTOR as c, SEGMENTED_CONTROL_ORIENTATIONS as l, SEGMENTED_CONTROL_ORIENTATION_DEFAULT as u, SEGMENTED_CONTROL_SELECT_KEY as d, SEGMENTED_CONTROL_SIZES as f, SEGMENTED_CONTROL_SIZE_MODIFIERS as p, SEGMENTED_CONTROL_SPREADS as m, SEGMENTED_CONTROL_SPREAD_DEFAULT as h } from "./segmented-control-constants.js";
-import { computed as g, createBlock as _, nextTick as v, normalizeClass as y, onMounted as b, openBlock as x, provide as S, reactive as C, ref as w, renderSlot as T, unref as E, watch as D, watchEffect as O, withCtx as k } from "vue";
+import { ordinalSizeValidator as e } from "../../common/validators/index.js";
+import { getUniqueString as t } from "../../common/utils/index.js";
+import n from "../stack/stack.js";
+import { useIndicatorAnimation as r } from "../../common/composables/use-indicator-animation.js";
+import { SEGMENTED_CONTROL_ACTIVATION_MODES as i, SEGMENTED_CONTROL_ACTIVATION_MODE_DEFAULT as a, SEGMENTED_CONTROL_CONTEXT_KEY as o, SEGMENTED_CONTROL_DATA_VALUE_ATTR as s, SEGMENTED_CONTROL_FOCUS_KEY as c, SEGMENTED_CONTROL_ITEM_SELECTOR as l, SEGMENTED_CONTROL_ORIENTATIONS as u, SEGMENTED_CONTROL_ORIENTATION_DEFAULT as d, SEGMENTED_CONTROL_SELECT_KEY as f, SEGMENTED_CONTROL_SIZES as p, SEGMENTED_CONTROL_SIZE_MODIFIERS as m, SEGMENTED_CONTROL_SPREADS as h, SEGMENTED_CONTROL_SPREAD_DEFAULT as g } from "./segmented-control-constants.js";
+import { computed as _, createBlock as v, nextTick as y, normalizeClass as b, onMounted as x, openBlock as S, provide as C, reactive as w, ref as T, renderSlot as E, unref as D, watch as O, watchEffect as k, withCtx as A } from "vue";
 //#region components/SegmentedControl/SegmentedControl.vue
-var A = /* @__PURE__ */ Object.assign({ name: "DtSegmentedControl" }, {
+var j = /* @__PURE__ */ Object.assign({ name: "DtSegmentedControl" }, {
 	__name: "SegmentedControl",
 	props: {
 		id: {
 			type: String,
 			default() {
-				return e();
+				return t();
 			}
 		},
 		modelValue: {
@@ -23,18 +24,18 @@ var A = /* @__PURE__ */ Object.assign({ name: "DtSegmentedControl" }, {
 		},
 		orientation: {
 			type: String,
-			default: u,
-			validator: (e) => l.includes(e)
+			default: d,
+			validator: (e) => u.includes(e)
 		},
 		size: {
 			type: [String, Number],
 			default: 200,
-			validator: (e) => f.includes(String(e))
+			validator: e(p)
 		},
 		activationMode: {
 			type: String,
-			default: i,
-			validator: (e) => r.includes(e)
+			default: a,
+			validator: (e) => i.includes(e)
 		},
 		disabled: {
 			type: Boolean,
@@ -50,8 +51,8 @@ var A = /* @__PURE__ */ Object.assign({ name: "DtSegmentedControl" }, {
 		},
 		spread: {
 			type: String,
-			default: h,
-			validator: (e) => m.includes(e)
+			default: g,
+			validator: (e) => h.includes(e)
 		},
 		labelClass: {
 			type: [
@@ -71,50 +72,50 @@ var A = /* @__PURE__ */ Object.assign({ name: "DtSegmentedControl" }, {
 		"change",
 		"before-change"
 	],
-	setup(e, { emit: r }) {
-		let i = e, l = r, u = w(null), f = w(null), m = g(() => i.orientation === "vertical" ? "column" : "row"), h = g(() => [
+	setup(e, { emit: t }) {
+		let i = e, a = t, u = T(null), d = T(null), p = _(() => i.orientation === "vertical" ? "column" : "row"), h = _(() => [
 			"d-segmented-control",
-			p[String(i.size)],
+			m[String(i.size)],
 			i.showDivider ? null : "d-segmented-control--hide-divider",
 			i.borderless ? "d-segmented-control--borderless" : null,
 			i.orientation === "vertical" ? "d-segmented-control--vertical" : null,
 			i.spread === "evenly" && i.orientation === "horizontal" ? "d-segmented-control--spread-evenly" : null
-		]), A = C({
+		]), g = w({
 			selected: i.modelValue,
 			disabled: i.disabled,
 			size: i.size,
 			labelClass: i.labelClass
 		});
-		O(() => {
-			A.selected = i.modelValue, A.disabled = i.disabled, A.size = i.size, A.labelClass = i.labelClass;
-		}), S(a, A), S(d, F), S(s, P);
+		k(() => {
+			g.selected = i.modelValue, g.disabled = i.disabled, g.size = i.size, g.labelClass = i.labelClass;
+		}), C(o, g), C(f, F), C(c, P);
 		function j() {
 			let e = N();
 			if (!e.length || e.some((e) => e.getAttribute("tabindex") === "0")) return;
 			let t = e.find((e) => !R(e));
 			t && t.setAttribute("tabindex", "0");
 		}
-		let M = n(u, "--segmented-indicator-duration", "--segmented-indicator-easing");
-		b(j), D(() => [i.modelValue, i.disabled], j, { flush: "post" });
+		let M = r(u, "--segmented-indicator-duration", "--segmented-indicator-easing");
+		x(j), O(() => [i.modelValue, i.disabled], j, { flush: "post" });
 		function N() {
 			let e = u.value?.$el || u.value;
-			return e ? Array.from(e.querySelectorAll(c)) : [];
+			return e ? Array.from(e.querySelectorAll(l)) : [];
 		}
 		function P(e) {
-			f.value = e;
+			d.value = e;
 		}
 		async function F(e, { animate: t = !0 } = {}) {
 			if (i.disabled || e === i.modelValue) return;
 			let n = new Event("before-change", { cancelable: !0 });
-			if (l("before-change", n), n.defaultPrevented) return;
+			if (a("before-change", n), n.defaultPrevented) return;
 			M.cancel();
 			let r = t && i.showIndicatorTransition ? M.snapshot("[aria-checked=\"true\"]") : null;
-			if (l("update:modelValue", e), l("change", e), !r) return;
-			await v();
-			let a = (u.value?.$el || u.value)?.querySelector(`[${o}="${CSS.escape(e)}"]`);
-			a && M.animate({
+			if (a("update:modelValue", e), a("change", e), !r) return;
+			await y();
+			let o = (u.value?.$el || u.value)?.querySelector(`[${s}="${CSS.escape(e)}"]`);
+			o && M.animate({
 				oldRect: r.rect,
-				newEl: a,
+				newEl: o,
 				orientation: i.orientation,
 				hideProps: { backgroundColor: "transparent" },
 				indicatorExtra: { backgroundColor: "var(--button-color-background)" },
@@ -123,20 +124,20 @@ var A = /* @__PURE__ */ Object.assign({ name: "DtSegmentedControl" }, {
 		}
 		function I(e, t) {
 			if (t) {
-				let n = t.target.closest(c);
+				let n = t.target.closest(l);
 				if (n) {
 					let t = e.indexOf(n);
 					if (t !== -1) return t;
 				}
 			}
 			let n = e.findIndex((e) => {
-				let t = e.getAttribute(o);
-				return f.value ? t === f.value : e.getAttribute("aria-checked") === "true";
+				let t = e.getAttribute(s);
+				return d.value ? t === d.value : e.getAttribute("aria-checked") === "true";
 			});
 			return n === -1 ? 0 : n;
 		}
 		function L(e) {
-			R(e) || F(e.getAttribute(o));
+			R(e) || F(e.getAttribute(s));
 		}
 		function R(e) {
 			return e.getAttribute("aria-disabled") === "true";
@@ -170,24 +171,24 @@ var A = /* @__PURE__ */ Object.assign({ name: "DtSegmentedControl" }, {
 			let r = B(e.key, n, t);
 			if (r !== -1 && (e.preventDefault(), e.stopPropagation(), t[r].focus(), i.activationMode === "auto")) {
 				M.cancel();
-				let e = t[r].getAttribute(o);
+				let e = t[r].getAttribute(s);
 				R(t[r]) || F(e, { animate: !1 });
 			}
 		}
-		return (n, r) => (x(), _(E(t), {
+		return (t, r) => (S(), v(D(n), {
 			id: e.id,
 			ref_key: "container",
 			ref: u,
 			align: "stretch",
-			class: y(h.value),
-			direction: m.value,
+			class: b(h.value),
+			direction: p.value,
 			role: "radiogroup",
 			"aria-label": e.ariaLabel,
 			"aria-orientation": e.orientation,
 			"data-qa": "dt-segmented-control",
 			onKeydown: V
 		}, {
-			default: k(() => [T(n.$slots, "default")]),
+			default: A(() => [E(t.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"id",
@@ -199,6 +200,6 @@ var A = /* @__PURE__ */ Object.assign({ name: "DtSegmentedControl" }, {
 	}
 });
 //#endregion
-export { A as default };
+export { j as default };
 
 //# sourceMappingURL=segmented-control.js.map

package/dist/lib/segmented-control/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","names":[],"sources":["../../../components/SegmentedControl/SegmentedControl.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :id=\"id\"\n    ref=\"container\"\n    align=\"stretch\"\n    :class=\"containerClasses\"\n    :direction=\"stackDirection\"\n    role=\"radiogroup\"\n    :aria-label=\"ariaLabel\"\n    :aria-orientation=\"orientation\"\n    data-qa=\"dt-segmented-control\"\n    @keydown=\"handleKeyDown\"\n  >\n    <!-- @slot DtSegmentedControlItem children -->\n    <slot />\n  </dt-stack>\n</template>\n\n<script setup>\nimport { ref, computed, reactive, watchEffect, watch, provide, onMounted, nextTick } from 'vue';\nimport { getUniqueString } from '@/common/utils';\nimport { DtStack } from '@/components/Stack';\nimport { useIndicatorAnimation } from '@/common/composables/useIndicatorAnimation';\nimport {\n  SEGMENTED_CONTROL_SIZES,\n  SEGMENTED_CONTROL_SIZE_DEFAULT,\n  SEGMENTED_CONTROL_SIZE_MODIFIERS,\n  SEGMENTED_CONTROL_ORIENTATIONS,\n  SEGMENTED_CONTROL_ORIENTATION_DEFAULT,\n  SEGMENTED_CONTROL_ACTIVATION_MODES,\n  SEGMENTED_CONTROL_ACTIVATION_MODE_DEFAULT,\n  SEGMENTED_CONTROL_SPREADS,\n  SEGMENTED_CONTROL_SPREAD_DEFAULT,\n  SEGMENTED_CONTROL_CONTEXT_KEY,\n  SEGMENTED_CONTROL_SELECT_KEY,\n  SEGMENTED_CONTROL_FOCUS_KEY,\n  SEGMENTED_CONTROL_ITEM_SELECTOR,\n  SEGMENTED_CONTROL_DATA_VALUE_ATTR,\n} from './SegmentedControlConstants.js';\n\ndefineOptions({ name: 'DtSegmentedControl' });\n\nconst props = defineProps({\n  /**\n   * Element ID for the radiogroup container.\n   * Auto-generated if not provided.\n   */\n  id: {\n    type: String,\n    default () { return getUniqueString(); },\n  },\n\n  /**\n   * The currently selected value (v-model).\n   */\n  modelValue: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * Accessible label for the radiogroup.\n   */\n  ariaLabel: {\n    type: String,\n    default: undefined,\n  },\n\n  /**\n   * Orientation of the segmented control.\n   * Maps to DtStack direction: horizontal -> row, vertical -> column.\n   * @values horizontal, vertical\n   */\n  orientation: {\n    type: String,\n    default: SEGMENTED_CONTROL_ORIENTATION_DEFAULT,\n    validator: (v) => SEGMENTED_CONTROL_ORIENTATIONS.includes(v),\n  },\n\n  /**\n   * DtButton size for all items. Inherited by children via provide.\n   * @values 100, 200, 300, 400, 500\n   */\n  size: {\n    type: [String, Number],\n    default: SEGMENTED_CONTROL_SIZE_DEFAULT,\n    validator: (v) => SEGMENTED_CONTROL_SIZES.includes(String(v)),\n  },\n\n  /**\n   * Controls whether items are selected on focus (auto) or on click/Space/Enter (manual).\n   * @values auto, manual\n   */\n  activationMode: {\n    type: String,\n    default: SEGMENTED_CONTROL_ACTIVATION_MODE_DEFAULT,\n    validator: (v) => SEGMENTED_CONTROL_ACTIVATION_MODES.includes(v),\n  },\n\n  /**\n   * Disables all items in the group.\n   * Per-item disabled is set via the disabled prop on DtSegmentedControlItem.\n   */\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n   * Shows the dividers between items.\n   */\n  showDivider: {\n    type: Boolean,\n    default: true,\n  },\n\n  /**\n   * Removes the border and padding from the container.\n   */\n  borderless: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n   * Controls how items distribute space.\n   * 'grow' (default): items size to their content.\n   * 'evenly': items share space equally.\n   * @values grow, evenly\n   */\n  spread: {\n    type: String,\n    default: SEGMENTED_CONTROL_SPREAD_DEFAULT,\n    validator: (v) => SEGMENTED_CONTROL_SPREADS.includes(v),\n  },\n\n  /**\n   * Default label class for all items. Items can override with their own labelClass prop.\n   */\n  labelClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n   * If true, the selection indicator animates between items on click.\n   * @values true, false\n   */\n  showIndicatorTransition: {\n    type: Boolean,\n    default: true,\n  },\n});\n\nconst emit = defineEmits([\n  /**\n   * v-model event. Emitted when the selected value changes.\n   * @event update:modelValue\n   * @type {String}\n   */\n  'update:modelValue',\n\n  /**\n   * Emitted when the user selects an item (click, Enter, Space, or arrow in auto mode).\n   * Not emitted for programmatic modelValue changes.\n   * @event change\n   * @type {String}\n   */\n  'change',\n\n  /**\n   * Emitted before a selection change. Call event.preventDefault() to cancel the change.\n   * @event before-change\n   * @type {Event}\n   */\n  'before-change',\n]);\n\nconst container = ref(null);\nconst focusedValue = ref(null);\n\nconst stackDirection = computed(() => props.orientation === 'vertical' ? 'column' : 'row');\n\nconst containerClasses = computed(() => [\n  'd-segmented-control',\n  SEGMENTED_CONTROL_SIZE_MODIFIERS[String(props.size)],\n  !props.showDivider ? 'd-segmented-control--hide-divider' : null,\n  props.borderless ? 'd-segmented-control--borderless' : null,\n  props.orientation === 'vertical' ? 'd-segmented-control--vertical' : null,\n  props.spread === 'evenly' && props.orientation === 'horizontal'\n    ? 'd-segmented-control--spread-evenly'\n    : null,\n]);\n\n// Reactive context provided to children\nconst groupContext = reactive({\n  selected: props.modelValue,\n  disabled: props.disabled,\n  size: props.size,\n  labelClass: props.labelClass,\n});\n\nwatchEffect(() => {\n  groupContext.selected = props.modelValue;\n  groupContext.disabled = props.disabled;\n  groupContext.size = props.size;\n  groupContext.labelClass = props.labelClass;\n});\n\nprovide(SEGMENTED_CONTROL_CONTEXT_KEY, groupContext);\nprovide(SEGMENTED_CONTROL_SELECT_KEY, selectValue);\nprovide(SEGMENTED_CONTROL_FOCUS_KEY, setFocus);\n\n// Ensures at least one enabled item is tabbable (WAI-ARIA radiogroup requirement).\n// Items set tabindex based on isSelected && !isDisabled. If the selected item is disabled\n// or modelValue doesn't match any item, no item has tabindex=\"0\". This fallback sets\n// tabindex=\"0\" on the first enabled item so keyboard users can reach the control.\nfunction ensureTabbable () {\n  const items = getItems();\n  if (!items.length) return;\n  const hasTabbable = items.some(el => el.getAttribute('tabindex') === '0');\n  if (hasTabbable) return;\n  const firstEnabled = items.find(el => !isItemDisabled(el));\n  if (firstEnabled) firstEnabled.setAttribute('tabindex', '0');\n}\n\nconst indicator = useIndicatorAnimation(\n  container, '--segmented-indicator-duration', '--segmented-indicator-easing',\n);\n\nonMounted(ensureTabbable);\n\nwatch(() => [props.modelValue, props.disabled], ensureTabbable, { flush: 'post' });\n\nfunction getItems () {\n  const el = container.value?.$el || container.value;\n  return el ? Array.from(el.querySelectorAll(SEGMENTED_CONTROL_ITEM_SELECTOR)) : [];\n}\n\nfunction setFocus (value) {\n  focusedValue.value = value;\n}\n\nasync function selectValue (value, { animate: shouldAnimate = true } = {}) {\n  if (props.disabled) return;\n  if (value === props.modelValue) return;\n  const beforeChangeEvent = new Event('before-change', { cancelable: true });\n  emit('before-change', beforeChangeEvent);\n  if (beforeChangeEvent.defaultPrevented) return;\n\n  indicator.cancel();\n  const shouldTransition = shouldAnimate && props.showIndicatorTransition;\n  const old = shouldTransition ? indicator.snapshot('[aria-checked=\"true\"]') : null;\n\n  emit('update:modelValue', value);\n  emit('change', value);\n\n  if (!old) return;\n\n  await nextTick();\n  const newEl = (container.value?.$el || container.value)\n    ?.querySelector(`[${SEGMENTED_CONTROL_DATA_VALUE_ATTR}=\"${CSS.escape(value)}\"]`);\n  if (!newEl) return;\n\n  indicator.animate({\n    oldRect: old.rect,\n    newEl,\n    orientation: props.orientation,\n    hideProps: { backgroundColor: 'transparent' },\n    indicatorExtra: { backgroundColor: 'var(--button-color-background)' },\n    pseudoElement: '::after',\n  });\n}\n\nfunction getFocusedIndex (items, event) {\n  // First check event.target — the element that actually has focus\n  if (event) {\n    const target = event.target.closest(SEGMENTED_CONTROL_ITEM_SELECTOR);\n    if (target) {\n      const targetIdx = items.indexOf(target);\n      if (targetIdx !== -1) return targetIdx;\n    }\n  }\n  // Fall back to tracked focusedValue, then aria-checked\n  const idx = items.findIndex(el => {\n    const value = el.getAttribute(SEGMENTED_CONTROL_DATA_VALUE_ATTR);\n    return focusedValue.value ? value === focusedValue.value : el.getAttribute('aria-checked') === 'true';\n  });\n  return idx === -1 ? 0 : idx;\n}\n\nfunction activateItem (item) {\n  if (isItemDisabled(item)) return;\n  selectValue(item.getAttribute(SEGMENTED_CONTROL_DATA_VALUE_ATTR));\n}\n\nfunction isItemDisabled (item) {\n  return item.getAttribute('aria-disabled') === 'true';\n}\n\nfunction findNextEnabled (items, fromIndex, direction) {\n  const len = items.length;\n  for (let i = 1; i <= len; i++) {\n    const index = (fromIndex + i * direction + len) % len;\n    if (!isItemDisabled(items[index])) return index;\n  }\n  return fromIndex;\n}\n\nfunction getNavigationIndex (key, currentIndex, items) {\n  const isHorizontal = props.orientation === 'horizontal';\n  const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n  const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n  switch (key) {\n    case nextKey: return findNextEnabled(items, currentIndex, 1);\n    case prevKey: return findNextEnabled(items, currentIndex, -1);\n    case 'Home': return findNextEnabled(items, items.length - 1, 1);\n    case 'End': return findNextEnabled(items, 0, -1);\n    default: return -1;\n  }\n}\n\nfunction handleKeyDown (event) {\n  const items = getItems();\n  if (!items.length) return;\n\n  const focusedIndex = getFocusedIndex(items, event);\n\n  if (event.key === 'Enter' || event.key === ' ') {\n    activateItem(items[focusedIndex]);\n    event.preventDefault();\n    event.stopPropagation();\n    return;\n  }\n\n  const newIndex = getNavigationIndex(event.key, focusedIndex, items);\n  if (newIndex === -1) return;\n\n  event.preventDefault();\n  event.stopPropagation();\n  items[newIndex].focus();\n\n  if (props.activationMode === 'auto') {\n    indicator.cancel();\n    const value = items[newIndex].getAttribute(SEGMENTED_CONTROL_DATA_VALUE_ATTR);\n    if (!isItemDisabled(items[newIndex])) {\n      selectValue(value, { animate: false });\n    }\n  }\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,IAAM,IAAQ,GAgHR,IAAO,GAwBP,IAAY,EAAI,KAAK,EACrB,IAAe,EAAI,KAAK,EAExB,IAAiB,QAAe,EAAM,gBAAgB,aAAa,WAAW,MAAM,EAEpF,IAAmB,QAAe;GACtC;GACA,EAAiC,OAAO,EAAM,KAAK;GAClD,EAAM,cAAoD,OAAtC;GACrB,EAAM,aAAa,oCAAoC;GACvD,EAAM,gBAAgB,aAAa,kCAAkC;GACrE,EAAM,WAAW,YAAY,EAAM,gBAAgB,eAC/C,uCACA;GACL,CAAC,EAGI,IAAe,EAAS;GAC5B,UAAU,EAAM;GAChB,UAAU,EAAM;GAChB,MAAM,EAAM;GACZ,YAAY,EAAM;GACnB,CAAC;AAWF,EATA,QAAkB;AAIhB,GAHA,EAAa,WAAW,EAAM,YAC9B,EAAa,WAAW,EAAM,UAC9B,EAAa,OAAO,EAAM,MAC1B,EAAa,aAAa,EAAM;IAChC,EAEF,EAAQ,GAA+B,EAAa,EACpD,EAAQ,GAA8B,EAAY,EAClD,EAAQ,GAA6B,EAAS;EAM9C,SAAS,IAAkB;GACzB,IAAM,IAAQ,GAAU;AAGxB,OAFI,CAAC,EAAM,UACS,EAAM,MAAK,MAAM,EAAG,aAAa,WAAW,KAAK,IAAI,CACxD;GACjB,IAAM,IAAe,EAAM,MAAK,MAAM,CAAC,EAAe,EAAG,CAAC;AAC1D,GAAI,KAAc,EAAa,aAAa,YAAY,IAAI;;EAG9D,IAAM,IAAY,EAChB,GAAW,kCAAkC,+BAC9C;AAID,EAFA,EAAU,EAAe,EAEzB,QAAY,CAAC,EAAM,YAAY,EAAM,SAAS,EAAE,GAAgB,EAAE,OAAO,QAAQ,CAAC;EAElF,SAAS,IAAY;GACnB,IAAM,IAAK,EAAU,OAAO,OAAO,EAAU;AAC7C,UAAO,IAAK,MAAM,KAAK,EAAG,iBAAiB,EAAgC,CAAC,GAAG,EAAE;;EAGnF,SAAS,EAAU,GAAO;AACxB,KAAa,QAAQ;;EAGvB,eAAe,EAAa,GAAO,EAAE,SAAS,IAAgB,OAAS,EAAE,EAAE;AAEzE,OADI,EAAM,YACN,MAAU,EAAM,WAAY;GAChC,IAAM,IAAoB,IAAI,MAAM,iBAAiB,EAAE,YAAY,IAAM,CAAC;AAE1E,OADA,EAAK,iBAAiB,EAAkB,EACpC,EAAkB,iBAAkB;AAExC,KAAU,QAAQ;GAElB,IAAM,IADmB,KAAiB,EAAM,0BACjB,EAAU,SAAS,0BAAwB,GAAG;AAK7E,OAHA,EAAK,qBAAqB,EAAM,EAChC,EAAK,UAAU,EAAM,EAEjB,CAAC,EAAK;AAEV,SAAM,GAAU;GAChB,IAAM,KAAS,EAAU,OAAO,OAAO,EAAU,QAC7C,cAAc,IAAI,EAAkC,IAAI,IAAI,OAAO,EAAM,CAAC,IAAI;AAC7E,QAEL,EAAU,QAAQ;IAChB,SAAS,EAAI;IACb;IACA,aAAa,EAAM;IACnB,WAAW,EAAE,iBAAiB,eAAe;IAC7C,gBAAgB,EAAE,iBAAiB,kCAAkC;IACrE,eAAe;IAChB,CAAC;;EAGJ,SAAS,EAAiB,GAAO,GAAO;AAEtC,OAAI,GAAO;IACT,IAAM,IAAS,EAAM,OAAO,QAAQ,EAAgC;AACpE,QAAI,GAAQ;KACV,IAAM,IAAY,EAAM,QAAQ,EAAO;AACvC,SAAI,MAAc,GAAI,QAAO;;;GAIjC,IAAM,IAAM,EAAM,WAAU,MAAM;IAChC,IAAM,IAAQ,EAAG,aAAa,EAAkC;AAChE,WAAO,EAAa,QAAQ,MAAU,EAAa,QAAQ,EAAG,aAAa,eAAe,KAAK;KAC/F;AACF,UAAO,MAAQ,KAAK,IAAI;;EAG1B,SAAS,EAAc,GAAM;AACvB,KAAe,EAAK,IACxB,EAAY,EAAK,aAAa,EAAkC,CAAC;;EAGnE,SAAS,EAAgB,GAAM;AAC7B,UAAO,EAAK,aAAa,gBAAgB,KAAK;;EAGhD,SAAS,EAAiB,GAAO,GAAW,GAAW;GACrD,IAAM,IAAM,EAAM;AAClB,QAAK,IAAI,IAAI,GAAG,KAAK,GAAK,KAAK;IAC7B,IAAM,KAAS,IAAY,IAAI,IAAY,KAAO;AAClD,QAAI,CAAC,EAAe,EAAM,GAAO,CAAE,QAAO;;AAE5C,UAAO;;EAGT,SAAS,EAAoB,GAAK,GAAc,GAAO;GACrD,IAAM,IAAe,EAAM,gBAAgB,cACrC,IAAU,IAAe,eAAe,aACxC,IAAU,IAAe,cAAc;AAE7C,WAAQ,GAAR;IACE,KAAK,EAAS,QAAO,EAAgB,GAAO,GAAc,EAAE;IAC5D,KAAK,EAAS,QAAO,EAAgB,GAAO,GAAc,GAAG;IAC7D,KAAK,OAAQ,QAAO,EAAgB,GAAO,EAAM,SAAS,GAAG,EAAE;IAC/D,KAAK,MAAO,QAAO,EAAgB,GAAO,GAAG,GAAG;IAChD,QAAS,QAAO;;;EAIpB,SAAS,EAAe,GAAO;GAC7B,IAAM,IAAQ,GAAU;AACxB,OAAI,CAAC,EAAM,OAAQ;GAEnB,IAAM,IAAe,EAAgB,GAAO,EAAM;AAElD,OAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,KAAK;AAG9C,IAFA,EAAa,EAAM,GAAc,EACjC,EAAM,gBAAgB,EACtB,EAAM,iBAAiB;AACvB;;GAGF,IAAM,IAAW,EAAmB,EAAM,KAAK,GAAc,EAAM;AAC/D,aAAa,OAEjB,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,EAAM,GAAU,OAAO,EAEnB,EAAM,mBAAmB,SAAQ;AACnC,MAAU,QAAQ;IAClB,IAAM,IAAQ,EAAM,GAAU,aAAa,EAAkC;AAC7E,IAAK,EAAe,EAAM,GAAU,IAClC,EAAY,GAAO,EAAE,SAAS,IAAO,CAAC;;;yBA1V1C,EAcW,EAAA,EAAA,EAAA;GAbR,IAAI,EAAA;YACD;GAAJ,KAAI;GACJ,OAAM;GACL,OAAK,EAAE,EAAA,MAAgB;GACvB,WAAW,EAAA;GACZ,MAAK;GACJ,cAAY,EAAA;GACZ,oBAAkB,EAAA;GACnB,WAAQ;GACP,WAAS;;oBAGF,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"segmented-control.js","names":[],"sources":["../../../components/SegmentedControl/SegmentedControl.vue"],"sourcesContent":["<template>\n  <dt-stack\n    :id=\"id\"\n    ref=\"container\"\n    align=\"stretch\"\n    :class=\"containerClasses\"\n    :direction=\"stackDirection\"\n    role=\"radiogroup\"\n    :aria-label=\"ariaLabel\"\n    :aria-orientation=\"orientation\"\n    data-qa=\"dt-segmented-control\"\n    @keydown=\"handleKeyDown\"\n  >\n    <!-- @slot DtSegmentedControlItem children -->\n    <slot />\n  </dt-stack>\n</template>\n\n<script setup>\nimport { ref, computed, reactive, watchEffect, watch, provide, onMounted, nextTick } from 'vue';\nimport { getUniqueString } from '@/common/utils';\nimport { DtStack } from '@/components/Stack';\nimport { useIndicatorAnimation } from '@/common/composables/useIndicatorAnimation';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport {\n  SEGMENTED_CONTROL_SIZES,\n  SEGMENTED_CONTROL_SIZE_DEFAULT,\n  SEGMENTED_CONTROL_SIZE_MODIFIERS,\n  SEGMENTED_CONTROL_ORIENTATIONS,\n  SEGMENTED_CONTROL_ORIENTATION_DEFAULT,\n  SEGMENTED_CONTROL_ACTIVATION_MODES,\n  SEGMENTED_CONTROL_ACTIVATION_MODE_DEFAULT,\n  SEGMENTED_CONTROL_SPREADS,\n  SEGMENTED_CONTROL_SPREAD_DEFAULT,\n  SEGMENTED_CONTROL_CONTEXT_KEY,\n  SEGMENTED_CONTROL_SELECT_KEY,\n  SEGMENTED_CONTROL_FOCUS_KEY,\n  SEGMENTED_CONTROL_ITEM_SELECTOR,\n  SEGMENTED_CONTROL_DATA_VALUE_ATTR,\n} from './SegmentedControlConstants.js';\n\ndefineOptions({ name: 'DtSegmentedControl' });\n\nconst props = defineProps({\n  /**\n   * Element ID for the radiogroup container.\n   * Auto-generated if not provided.\n   */\n  id: {\n    type: String,\n    default () { return getUniqueString(); },\n  },\n\n  /**\n   * The currently selected value (v-model).\n   */\n  modelValue: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * Accessible label for the radiogroup.\n   */\n  ariaLabel: {\n    type: String,\n    default: undefined,\n  },\n\n  /**\n   * Orientation of the segmented control.\n   * Maps to DtStack direction: horizontal -> row, vertical -> column.\n   * @values horizontal, vertical\n   */\n  orientation: {\n    type: String,\n    default: SEGMENTED_CONTROL_ORIENTATION_DEFAULT,\n    validator: (v) => SEGMENTED_CONTROL_ORIENTATIONS.includes(v),\n  },\n\n  /**\n   * DtButton size for all items. Inherited by children via provide.\n   * @values 100, 200, 300, 400, 500\n   */\n  size: {\n    type: [String, Number],\n    default: SEGMENTED_CONTROL_SIZE_DEFAULT,\n    validator: ordinalSizeValidator(SEGMENTED_CONTROL_SIZES),\n  },\n\n  /**\n   * Controls whether items are selected on focus (auto) or on click/Space/Enter (manual).\n   * @values auto, manual\n   */\n  activationMode: {\n    type: String,\n    default: SEGMENTED_CONTROL_ACTIVATION_MODE_DEFAULT,\n    validator: (v) => SEGMENTED_CONTROL_ACTIVATION_MODES.includes(v),\n  },\n\n  /**\n   * Disables all items in the group.\n   * Per-item disabled is set via the disabled prop on DtSegmentedControlItem.\n   */\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n   * Shows the dividers between items.\n   */\n  showDivider: {\n    type: Boolean,\n    default: true,\n  },\n\n  /**\n   * Removes the border and padding from the container.\n   */\n  borderless: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n   * Controls how items distribute space.\n   * 'grow' (default): items size to their content.\n   * 'evenly': items share space equally.\n   * @values grow, evenly\n   */\n  spread: {\n    type: String,\n    default: SEGMENTED_CONTROL_SPREAD_DEFAULT,\n    validator: (v) => SEGMENTED_CONTROL_SPREADS.includes(v),\n  },\n\n  /**\n   * Default label class for all items. Items can override with their own labelClass prop.\n   */\n  labelClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n   * If true, the selection indicator animates between items on click.\n   * @values true, false\n   */\n  showIndicatorTransition: {\n    type: Boolean,\n    default: true,\n  },\n});\n\nconst emit = defineEmits([\n  /**\n   * v-model event. Emitted when the selected value changes.\n   * @event update:modelValue\n   * @type {String}\n   */\n  'update:modelValue',\n\n  /**\n   * Emitted when the user selects an item (click, Enter, Space, or arrow in auto mode).\n   * Not emitted for programmatic modelValue changes.\n   * @event change\n   * @type {String}\n   */\n  'change',\n\n  /**\n   * Emitted before a selection change. Call event.preventDefault() to cancel the change.\n   * @event before-change\n   * @type {Event}\n   */\n  'before-change',\n]);\n\nconst container = ref(null);\nconst focusedValue = ref(null);\n\nconst stackDirection = computed(() => props.orientation === 'vertical' ? 'column' : 'row');\n\nconst containerClasses = computed(() => [\n  'd-segmented-control',\n  SEGMENTED_CONTROL_SIZE_MODIFIERS[String(props.size)],\n  !props.showDivider ? 'd-segmented-control--hide-divider' : null,\n  props.borderless ? 'd-segmented-control--borderless' : null,\n  props.orientation === 'vertical' ? 'd-segmented-control--vertical' : null,\n  props.spread === 'evenly' && props.orientation === 'horizontal'\n    ? 'd-segmented-control--spread-evenly'\n    : null,\n]);\n\n// Reactive context provided to children\nconst groupContext = reactive({\n  selected: props.modelValue,\n  disabled: props.disabled,\n  size: props.size,\n  labelClass: props.labelClass,\n});\n\nwatchEffect(() => {\n  groupContext.selected = props.modelValue;\n  groupContext.disabled = props.disabled;\n  groupContext.size = props.size;\n  groupContext.labelClass = props.labelClass;\n});\n\nprovide(SEGMENTED_CONTROL_CONTEXT_KEY, groupContext);\nprovide(SEGMENTED_CONTROL_SELECT_KEY, selectValue);\nprovide(SEGMENTED_CONTROL_FOCUS_KEY, setFocus);\n\n// Ensures at least one enabled item is tabbable (WAI-ARIA radiogroup requirement).\n// Items set tabindex based on isSelected && !isDisabled. If the selected item is disabled\n// or modelValue doesn't match any item, no item has tabindex=\"0\". This fallback sets\n// tabindex=\"0\" on the first enabled item so keyboard users can reach the control.\nfunction ensureTabbable () {\n  const items = getItems();\n  if (!items.length) return;\n  const hasTabbable = items.some(el => el.getAttribute('tabindex') === '0');\n  if (hasTabbable) return;\n  const firstEnabled = items.find(el => !isItemDisabled(el));\n  if (firstEnabled) firstEnabled.setAttribute('tabindex', '0');\n}\n\nconst indicator = useIndicatorAnimation(\n  container, '--segmented-indicator-duration', '--segmented-indicator-easing',\n);\n\nonMounted(ensureTabbable);\n\nwatch(() => [props.modelValue, props.disabled], ensureTabbable, { flush: 'post' });\n\nfunction getItems () {\n  const el = container.value?.$el || container.value;\n  return el ? Array.from(el.querySelectorAll(SEGMENTED_CONTROL_ITEM_SELECTOR)) : [];\n}\n\nfunction setFocus (value) {\n  focusedValue.value = value;\n}\n\nasync function selectValue (value, { animate: shouldAnimate = true } = {}) {\n  if (props.disabled) return;\n  if (value === props.modelValue) return;\n  const beforeChangeEvent = new Event('before-change', { cancelable: true });\n  emit('before-change', beforeChangeEvent);\n  if (beforeChangeEvent.defaultPrevented) return;\n\n  indicator.cancel();\n  const shouldTransition = shouldAnimate && props.showIndicatorTransition;\n  const old = shouldTransition ? indicator.snapshot('[aria-checked=\"true\"]') : null;\n\n  emit('update:modelValue', value);\n  emit('change', value);\n\n  if (!old) return;\n\n  await nextTick();\n  const newEl = (container.value?.$el || container.value)\n    ?.querySelector(`[${SEGMENTED_CONTROL_DATA_VALUE_ATTR}=\"${CSS.escape(value)}\"]`);\n  if (!newEl) return;\n\n  indicator.animate({\n    oldRect: old.rect,\n    newEl,\n    orientation: props.orientation,\n    hideProps: { backgroundColor: 'transparent' },\n    indicatorExtra: { backgroundColor: 'var(--button-color-background)' },\n    pseudoElement: '::after',\n  });\n}\n\nfunction getFocusedIndex (items, event) {\n  // First check event.target — the element that actually has focus\n  if (event) {\n    const target = event.target.closest(SEGMENTED_CONTROL_ITEM_SELECTOR);\n    if (target) {\n      const targetIdx = items.indexOf(target);\n      if (targetIdx !== -1) return targetIdx;\n    }\n  }\n  // Fall back to tracked focusedValue, then aria-checked\n  const idx = items.findIndex(el => {\n    const value = el.getAttribute(SEGMENTED_CONTROL_DATA_VALUE_ATTR);\n    return focusedValue.value ? value === focusedValue.value : el.getAttribute('aria-checked') === 'true';\n  });\n  return idx === -1 ? 0 : idx;\n}\n\nfunction activateItem (item) {\n  if (isItemDisabled(item)) return;\n  selectValue(item.getAttribute(SEGMENTED_CONTROL_DATA_VALUE_ATTR));\n}\n\nfunction isItemDisabled (item) {\n  return item.getAttribute('aria-disabled') === 'true';\n}\n\nfunction findNextEnabled (items, fromIndex, direction) {\n  const len = items.length;\n  for (let i = 1; i <= len; i++) {\n    const index = (fromIndex + i * direction + len) % len;\n    if (!isItemDisabled(items[index])) return index;\n  }\n  return fromIndex;\n}\n\nfunction getNavigationIndex (key, currentIndex, items) {\n  const isHorizontal = props.orientation === 'horizontal';\n  const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n  const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n  switch (key) {\n    case nextKey: return findNextEnabled(items, currentIndex, 1);\n    case prevKey: return findNextEnabled(items, currentIndex, -1);\n    case 'Home': return findNextEnabled(items, items.length - 1, 1);\n    case 'End': return findNextEnabled(items, 0, -1);\n    default: return -1;\n  }\n}\n\nfunction handleKeyDown (event) {\n  const items = getItems();\n  if (!items.length) return;\n\n  const focusedIndex = getFocusedIndex(items, event);\n\n  if (event.key === 'Enter' || event.key === ' ') {\n    activateItem(items[focusedIndex]);\n    event.preventDefault();\n    event.stopPropagation();\n    return;\n  }\n\n  const newIndex = getNavigationIndex(event.key, focusedIndex, items);\n  if (newIndex === -1) return;\n\n  event.preventDefault();\n  event.stopPropagation();\n  items[newIndex].focus();\n\n  if (props.activationMode === 'auto') {\n    indicator.cancel();\n    const value = items[newIndex].getAttribute(SEGMENTED_CONTROL_DATA_VALUE_ATTR);\n    if (!isItemDisabled(items[newIndex])) {\n      selectValue(value, { animate: false });\n    }\n  }\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,IAAM,IAAQ,GAgHR,IAAO,GAwBP,IAAY,EAAI,KAAK,EACrB,IAAe,EAAI,KAAK,EAExB,IAAiB,QAAe,EAAM,gBAAgB,aAAa,WAAW,MAAM,EAEpF,IAAmB,QAAe;GACtC;GACA,EAAiC,OAAO,EAAM,KAAK;GAClD,EAAM,cAAoD,OAAtC;GACrB,EAAM,aAAa,oCAAoC;GACvD,EAAM,gBAAgB,aAAa,kCAAkC;GACrE,EAAM,WAAW,YAAY,EAAM,gBAAgB,eAC/C,uCACA;GACL,CAAC,EAGI,IAAe,EAAS;GAC5B,UAAU,EAAM;GAChB,UAAU,EAAM;GAChB,MAAM,EAAM;GACZ,YAAY,EAAM;GACnB,CAAC;AAWF,EATA,QAAkB;AAIhB,GAHA,EAAa,WAAW,EAAM,YAC9B,EAAa,WAAW,EAAM,UAC9B,EAAa,OAAO,EAAM,MAC1B,EAAa,aAAa,EAAM;IAChC,EAEF,EAAQ,GAA+B,EAAa,EACpD,EAAQ,GAA8B,EAAY,EAClD,EAAQ,GAA6B,EAAS;EAM9C,SAAS,IAAkB;GACzB,IAAM,IAAQ,GAAU;AAGxB,OAFI,CAAC,EAAM,UACS,EAAM,MAAK,MAAM,EAAG,aAAa,WAAW,KAAK,IAAI,CACxD;GACjB,IAAM,IAAe,EAAM,MAAK,MAAM,CAAC,EAAe,EAAG,CAAC;AAC1D,GAAI,KAAc,EAAa,aAAa,YAAY,IAAI;;EAG9D,IAAM,IAAY,EAChB,GAAW,kCAAkC,+BAC9C;AAID,EAFA,EAAU,EAAe,EAEzB,QAAY,CAAC,EAAM,YAAY,EAAM,SAAS,EAAE,GAAgB,EAAE,OAAO,QAAQ,CAAC;EAElF,SAAS,IAAY;GACnB,IAAM,IAAK,EAAU,OAAO,OAAO,EAAU;AAC7C,UAAO,IAAK,MAAM,KAAK,EAAG,iBAAiB,EAAgC,CAAC,GAAG,EAAE;;EAGnF,SAAS,EAAU,GAAO;AACxB,KAAa,QAAQ;;EAGvB,eAAe,EAAa,GAAO,EAAE,SAAS,IAAgB,OAAS,EAAE,EAAE;AAEzE,OADI,EAAM,YACN,MAAU,EAAM,WAAY;GAChC,IAAM,IAAoB,IAAI,MAAM,iBAAiB,EAAE,YAAY,IAAM,CAAC;AAE1E,OADA,EAAK,iBAAiB,EAAkB,EACpC,EAAkB,iBAAkB;AAExC,KAAU,QAAQ;GAElB,IAAM,IADmB,KAAiB,EAAM,0BACjB,EAAU,SAAS,0BAAwB,GAAG;AAK7E,OAHA,EAAK,qBAAqB,EAAM,EAChC,EAAK,UAAU,EAAM,EAEjB,CAAC,EAAK;AAEV,SAAM,GAAU;GAChB,IAAM,KAAS,EAAU,OAAO,OAAO,EAAU,QAC7C,cAAc,IAAI,EAAkC,IAAI,IAAI,OAAO,EAAM,CAAC,IAAI;AAC7E,QAEL,EAAU,QAAQ;IAChB,SAAS,EAAI;IACb;IACA,aAAa,EAAM;IACnB,WAAW,EAAE,iBAAiB,eAAe;IAC7C,gBAAgB,EAAE,iBAAiB,kCAAkC;IACrE,eAAe;IAChB,CAAC;;EAGJ,SAAS,EAAiB,GAAO,GAAO;AAEtC,OAAI,GAAO;IACT,IAAM,IAAS,EAAM,OAAO,QAAQ,EAAgC;AACpE,QAAI,GAAQ;KACV,IAAM,IAAY,EAAM,QAAQ,EAAO;AACvC,SAAI,MAAc,GAAI,QAAO;;;GAIjC,IAAM,IAAM,EAAM,WAAU,MAAM;IAChC,IAAM,IAAQ,EAAG,aAAa,EAAkC;AAChE,WAAO,EAAa,QAAQ,MAAU,EAAa,QAAQ,EAAG,aAAa,eAAe,KAAK;KAC/F;AACF,UAAO,MAAQ,KAAK,IAAI;;EAG1B,SAAS,EAAc,GAAM;AACvB,KAAe,EAAK,IACxB,EAAY,EAAK,aAAa,EAAkC,CAAC;;EAGnE,SAAS,EAAgB,GAAM;AAC7B,UAAO,EAAK,aAAa,gBAAgB,KAAK;;EAGhD,SAAS,EAAiB,GAAO,GAAW,GAAW;GACrD,IAAM,IAAM,EAAM;AAClB,QAAK,IAAI,IAAI,GAAG,KAAK,GAAK,KAAK;IAC7B,IAAM,KAAS,IAAY,IAAI,IAAY,KAAO;AAClD,QAAI,CAAC,EAAe,EAAM,GAAO,CAAE,QAAO;;AAE5C,UAAO;;EAGT,SAAS,EAAoB,GAAK,GAAc,GAAO;GACrD,IAAM,IAAe,EAAM,gBAAgB,cACrC,IAAU,IAAe,eAAe,aACxC,IAAU,IAAe,cAAc;AAE7C,WAAQ,GAAR;IACE,KAAK,EAAS,QAAO,EAAgB,GAAO,GAAc,EAAE;IAC5D,KAAK,EAAS,QAAO,EAAgB,GAAO,GAAc,GAAG;IAC7D,KAAK,OAAQ,QAAO,EAAgB,GAAO,EAAM,SAAS,GAAG,EAAE;IAC/D,KAAK,MAAO,QAAO,EAAgB,GAAO,GAAG,GAAG;IAChD,QAAS,QAAO;;;EAIpB,SAAS,EAAe,GAAO;GAC7B,IAAM,IAAQ,GAAU;AACxB,OAAI,CAAC,EAAM,OAAQ;GAEnB,IAAM,IAAe,EAAgB,GAAO,EAAM;AAElD,OAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,KAAK;AAG9C,IAFA,EAAa,EAAM,GAAc,EACjC,EAAM,gBAAgB,EACtB,EAAM,iBAAiB;AACvB;;GAGF,IAAM,IAAW,EAAmB,EAAM,KAAK,GAAc,EAAM;AAC/D,aAAa,OAEjB,EAAM,gBAAgB,EACtB,EAAM,iBAAiB,EACvB,EAAM,GAAU,OAAO,EAEnB,EAAM,mBAAmB,SAAQ;AACnC,MAAU,QAAQ;IAClB,IAAM,IAAQ,EAAM,GAAU,aAAa,EAAkC;AAC7E,IAAK,EAAe,EAAM,GAAU,IAClC,EAAY,GAAO,EAAE,SAAS,IAAO,CAAC;;;yBA3V1C,EAcW,EAAA,EAAA,EAAA;GAbR,IAAI,EAAA;YACD;GAAJ,KAAI;GACJ,OAAM;GACL,OAAK,EAAE,EAAA,MAAgB;GACvB,WAAW,EAAA;GACZ,MAAK;GACJ,cAAY,EAAA;GACZ,oBAAkB,EAAA;GACnB,WAAQ;GACP,WAAS;;oBAGF,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/lib/select-menu/select-menu.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../common/mixins/input.cjs`),r=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),i=require(`../validation-messages/validation-messages.cjs`),a=require(`../text/text-constants.cjs`),o=require(`../text/text.cjs`),s=require(`./select-menu-constants.cjs`),c=require(`./select-menu-validators.cjs`);let l=require(`vue`);var u={name:`DtSelectMenu`,components:{DtValidationMessages:i.default,DtText:o.default},mixins:[n.MessagesMixin],inheritAttrs:!1,props:{label:{type:String,default:``},showLabel:{type:Boolean,default:!0},description:{type:String,default:``},options:{type:Array,default:()=>[],validator:e=>c.optionsValidator(e)},size:{type:[String,Number],default:300,validator:e=>Object.keys(s.SELECT_SIZE_MODIFIERS).includes(String(e))},labelClass:{type:[String,Array,Object],default:``},descriptionClass:{type:[String,Array,Object],default:``},selectClass:{type:[String,Array,Object],default:``},optionClass:{type:[String,Array,Object],default:``},labelChildProps:{type:Object,default:()=>({})},descriptionChildProps:{type:Object,default:()=>({})},optionChildProps:{type:Object,default:()=>({})},disabled:{type:Boolean,default:!1},modelValue:{type:[String,Number],default:``},labelSize:{type:[String,Number],default:null,validator:e=>a.TEXT_SIZE_MODIFIERS.label.includes(String(e))},labelStrength:{type:String,default:null,validator:e=>Object.keys(a.TEXT_STRENGTH_MODIFIERS).includes(e)}},emits:[`update:modelValue`],data(){return{SELECT_SIZE_MODIFIERS:s.SELECT_SIZE_MODIFIERS,SELECT_STATE_MODIFIERS:s.SELECT_STATE_MODIFIERS,hasSlotContent:t.hasSlotContent,messagesId:t.getUniqueString()}},computed:{resolvedLabelSize(){if(this.labelSize!=null)return this.labelSize;let e=String(this.size);return e===`xl`||e===`500`?e===`500`?`400`:`lg`:this.size},resolvedDescriptionSize(){return{100:`xs`,200:`xs`,300:`sm`,400:`sm`,500:`md`,xs:`xs`,sm:`xs`,md:`sm`,lg:`sm`,xl:`md`}[String(this.size)]||`sm`},resolvedDescriptionDensity(){let e=String(this.size);return e===`xl`||e===`500`?`300`:void 0},selectListeners(){return{input:()=>{},change:e=>this.emitValue(e.target.value,e)}},state(){return t.getValidationState(this.formattedMessages)},ariaInvalid(){return this.state===e.VALIDATION_MESSAGE_TYPES.CRITICAL?`true`:void 0},ariaDescribedBy(){return this.showMessages&&this.formattedMessages.length>0?this.messagesId:void 0},selectKey(){return t.getUniqueString()},descriptionKey(){return`select-${this.selectKey}-description`},labelAriaDetails(){return this.$slots.description||this.description?this.descriptionKey:this.$attrs[`aria-details`]}},mounted(){this.validateOptionsPresence(),this.runValidations()},beforeUpdate(){this.validateOptionsPresence()},methods:{removeClassStyleAttrs:t.removeClassStyleAttrs,emitValue(e,t){this.$emit(`update:modelValue`,e,t)},getOptionKey(e){return`select-${this.selectKey}-option-${e}`},validateOptionsPresence(){this.options?.length<1&&!this.$slots.default&&(0,l.warn)(`Options are expected to be provided via prop or slot`,this)},runValidations(){!(this.$slots.label||this.label)&&!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.`)}}},d=[`aria-label`,`aria-invalid`,`aria-describedby`,`disabled`,`value`],f=[`value`];function p(e,t,n,r,i,a){let o=(0,l.resolveComponent)(`dt-text`),s=(0,l.resolveComponent)(`dt-validation-messages`);return(0,l.openBlock)(),(0,l.createElementBlock)(`div`,{class:(0,l.normalizeClass)(e.$attrs.class),style:(0,l.normalizeStyle)(e.$attrs.style)},[(0,l.createElementVNode)(`label`,null,[n.showLabel&&(i.hasSlotContent(e.$slots.label)||n.label)?((0,l.openBlock)(),(0,l.createBlock)(o,(0,l.mergeProps)({key:0,kind:`label`,size:a.resolvedLabelSize,strength:n.labelStrength,tone:`secondary`,as:`div`,"aria-details":a.labelAriaDetails,class:[`d-select__label-text`,n.labelClass]},n.labelChildProps,{"data-qa":`dt-select-label`}),{default:(0,l.withCtx)(()=>[(0,l.renderSlot)(e.$slots,`label`,{},()=>[(0,l.createTextVNode)((0,l.toDisplayString)(n.label),1)])]),_:3},16,[`size`,`strength`,`aria-details`,`class`])):(0,l.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.description)||n.description?((0,l.openBlock)(),(0,l.createBlock)(o,(0,l.mergeProps)({key:1,id:a.descriptionKey,kind:`body`,size:a.resolvedDescriptionSize,tone:`tertiary`,density:a.resolvedDescriptionDensity,as:`div`,class:[`d-description`,n.descriptionClass]},n.descriptionChildProps,{"data-qa":`dt-select-description`}),{default:(0,l.withCtx)(()=>[(0,l.renderSlot)(e.$slots,`description`,{},()=>[(0,l.createTextVNode)((0,l.toDisplayString)(n.description),1)])]),_:3},16,[`id`,`size`,`density`,`class`])):(0,l.createCommentVNode)(``,!0),(0,l.createElementVNode)(`div`,{class:(0,l.normalizeClass)([`d-select`,i.SELECT_SIZE_MODIFIERS[String(n.size)],n.selectClass,{"d-select--disabled":n.disabled}]),"data-qa":`dt-select-wrapper`},[(0,l.createElementVNode)(`select`,(0,l.mergeProps)({ref:`selectElement`,class:[`d-select__input`,i.SELECT_STATE_MODIFIERS[a.state]],"aria-label":!n.showLabel&&n.label?n.label:void 0,"aria-invalid":a.ariaInvalid,"aria-describedby":a.ariaDescribedBy},a.removeClassStyleAttrs(e.$attrs),{"data-qa":`dt-select`,disabled:n.disabled,value:n.modelValue},(0,l.toHandlers)(a.selectListeners,!0)),[(0,l.renderSlot)(e.$slots,`default`,{},()=>[((0,l.openBlock)(!0),(0,l.createElementBlock)(l.Fragment,null,(0,l.renderList)(n.options,e=>((0,l.openBlock)(),(0,l.createElementBlock)(`option`,(0,l.mergeProps)({key:a.getOptionKey(e.value),value:e.value,class:n.optionClass},{ref_for:!0},n.optionChildProps),(0,l.toDisplayString)(e.label),17,f))),128))])],16,d)],2)]),(0,l.createVNode)(s,(0,l.mergeProps)(e.messagesChildProps,{id:i.messagesId,"validation-messages":e.formattedMessages,"show-messages":e.showMessages,class:e.messagesClass,"data-qa":`dt-select-messages`}),null,16,[`id`,`validation-messages`,`show-messages`,`class`])],6)}var m=r.t(u,[[`render`,p]]);exports.default=m;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/validators/index.cjs`),n=require(`../../common/utils/index.cjs`),r=require(`../../common/mixins/input.cjs`),i=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),a=require(`../validation-messages/validation-messages.cjs`),o=require(`../text/text-constants.cjs`),s=require(`../text/text.cjs`),c=require(`./select-menu-constants.cjs`),l=require(`./select-menu-validators.cjs`);let u=require(`vue`);var d={name:`DtSelectMenu`,components:{DtValidationMessages:a.default,DtText:s.default},mixins:[r.MessagesMixin],inheritAttrs:!1,props:{label:{type:String,default:``},showLabel:{type:Boolean,default:!0},description:{type:String,default:``},options:{type:Array,default:()=>[],validator:e=>l.optionsValidator(e)},size:{type:[String,Number],default:300,validator:t.ordinalSizeValidator(c.SELECT_SIZE_MODIFIERS)},labelClass:{type:[String,Array,Object],default:``},descriptionClass:{type:[String,Array,Object],default:``},selectClass:{type:[String,Array,Object],default:``},optionClass:{type:[String,Array,Object],default:``},labelChildProps:{type:Object,default:()=>({})},descriptionChildProps:{type:Object,default:()=>({})},optionChildProps:{type:Object,default:()=>({})},disabled:{type:Boolean,default:!1},modelValue:{type:[String,Number],default:``},labelSize:{type:[String,Number],default:null,validator:e=>o.TEXT_SIZE_MODIFIERS.label.includes(String(e))},labelStrength:{type:String,default:null,validator:e=>Object.keys(o.TEXT_STRENGTH_MODIFIERS).includes(e)}},emits:[`update:modelValue`],data(){return{SELECT_SIZE_MODIFIERS:c.SELECT_SIZE_MODIFIERS,SELECT_STATE_MODIFIERS:c.SELECT_STATE_MODIFIERS,hasSlotContent:n.hasSlotContent,messagesId:n.getUniqueString()}},computed:{resolvedLabelSize(){if(this.labelSize!=null)return this.labelSize;let e=String(this.size);return e===`xl`||e===`500`?e===`500`?`400`:`lg`:this.size},resolvedDescriptionSize(){return{100:`xs`,200:`xs`,300:`sm`,400:`sm`,500:`md`,xs:`xs`,sm:`xs`,md:`sm`,lg:`sm`,xl:`md`}[String(this.size)]||`sm`},resolvedDescriptionDensity(){let e=String(this.size);return e===`xl`||e===`500`?`300`:void 0},selectListeners(){return{input:()=>{},change:e=>this.emitValue(e.target.value,e)}},state(){return n.getValidationState(this.formattedMessages)},ariaInvalid(){return this.state===e.VALIDATION_MESSAGE_TYPES.CRITICAL?`true`:void 0},ariaDescribedBy(){return this.showMessages&&this.formattedMessages.length>0?this.messagesId:void 0},selectKey(){return n.getUniqueString()},descriptionKey(){return`select-${this.selectKey}-description`},labelAriaDetails(){return this.$slots.description||this.description?this.descriptionKey:this.$attrs[`aria-details`]}},mounted(){this.validateOptionsPresence(),this.runValidations()},beforeUpdate(){this.validateOptionsPresence()},methods:{removeClassStyleAttrs:n.removeClassStyleAttrs,emitValue(e,t){this.$emit(`update:modelValue`,e,t)},getOptionKey(e){return`select-${this.selectKey}-option-${e}`},validateOptionsPresence(){this.options?.length<1&&!this.$slots.default&&(0,u.warn)(`Options are expected to be provided via prop or slot`,this)},runValidations(){!(this.$slots.label||this.label)&&!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.`)}}},f=[`aria-label`,`aria-invalid`,`aria-describedby`,`disabled`,`value`],p=[`value`];function m(e,t,n,r,i,a){let o=(0,u.resolveComponent)(`dt-text`),s=(0,u.resolveComponent)(`dt-validation-messages`);return(0,u.openBlock)(),(0,u.createElementBlock)(`div`,{class:(0,u.normalizeClass)(e.$attrs.class),style:(0,u.normalizeStyle)(e.$attrs.style)},[(0,u.createElementVNode)(`label`,null,[n.showLabel&&(i.hasSlotContent(e.$slots.label)||n.label)?((0,u.openBlock)(),(0,u.createBlock)(o,(0,u.mergeProps)({key:0,kind:`label`,size:a.resolvedLabelSize,strength:n.labelStrength,tone:`secondary`,as:`div`,"aria-details":a.labelAriaDetails,class:[`d-select__label-text`,n.labelClass]},n.labelChildProps,{"data-qa":`dt-select-label`}),{default:(0,u.withCtx)(()=>[(0,u.renderSlot)(e.$slots,`label`,{},()=>[(0,u.createTextVNode)((0,u.toDisplayString)(n.label),1)])]),_:3},16,[`size`,`strength`,`aria-details`,`class`])):(0,u.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.description)||n.description?((0,u.openBlock)(),(0,u.createBlock)(o,(0,u.mergeProps)({key:1,id:a.descriptionKey,kind:`body`,size:a.resolvedDescriptionSize,tone:`tertiary`,density:a.resolvedDescriptionDensity,as:`div`,class:[`d-description`,n.descriptionClass]},n.descriptionChildProps,{"data-qa":`dt-select-description`}),{default:(0,u.withCtx)(()=>[(0,u.renderSlot)(e.$slots,`description`,{},()=>[(0,u.createTextVNode)((0,u.toDisplayString)(n.description),1)])]),_:3},16,[`id`,`size`,`density`,`class`])):(0,u.createCommentVNode)(``,!0),(0,u.createElementVNode)(`div`,{class:(0,u.normalizeClass)([`d-select`,i.SELECT_SIZE_MODIFIERS[String(n.size)],n.selectClass,{"d-select--disabled":n.disabled}]),"data-qa":`dt-select-wrapper`},[(0,u.createElementVNode)(`select`,(0,u.mergeProps)({ref:`selectElement`,class:[`d-select__input`,i.SELECT_STATE_MODIFIERS[a.state]],"aria-label":!n.showLabel&&n.label?n.label:void 0,"aria-invalid":a.ariaInvalid,"aria-describedby":a.ariaDescribedBy},a.removeClassStyleAttrs(e.$attrs),{"data-qa":`dt-select`,disabled:n.disabled,value:n.modelValue},(0,u.toHandlers)(a.selectListeners,!0)),[(0,u.renderSlot)(e.$slots,`default`,{},()=>[((0,u.openBlock)(!0),(0,u.createElementBlock)(u.Fragment,null,(0,u.renderList)(n.options,e=>((0,u.openBlock)(),(0,u.createElementBlock)(`option`,(0,u.mergeProps)({key:a.getOptionKey(e.value),value:e.value,class:n.optionClass},{ref_for:!0},n.optionChildProps),(0,u.toDisplayString)(e.label),17,p))),128))])],16,f)],2)]),(0,u.createVNode)(s,(0,u.mergeProps)(e.messagesChildProps,{id:i.messagesId,"validation-messages":e.formattedMessages,"show-messages":e.showMessages,class:e.messagesClass,"data-qa":`dt-select-messages`}),null,16,[`id`,`validation-messages`,`show-messages`,`class`])],6)}var h=i.t(d,[[`render`,m]]);exports.default=h;
 //# sourceMappingURL=select-menu.cjs.map