@dialpad/dialtone-vue 3.222.2 → 3.223.0-next.1

package/dist/common/composables/use-indicator-animation.js

@@ -0,0 +1,78 @@
+import { onBeforeUnmount as e, onMounted as t, unref as n } from "vue";
+//#region common/composables/useIndicatorAnimation.js
+function r(r, i, a) {
+	let o = {
+		indicator: null,
+		hideNative: null
+	}, s = 200, c = "ease", l = !1;
+	t(() => {
+		let e = typeof r == "function" ? r() : n(r), t = e?.$el || e;
+		if (!t) return;
+		let o = getComputedStyle(t);
+		s = parseInt(o.getPropertyValue(i), 10) || 200, c = o.getPropertyValue(a).trim() || "ease";
+		let u = typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		l = typeof t.animate == "function" && !u;
+	}), e(() => {
+		f();
+	});
+	function u(e) {
+		if (!l) return null;
+		let t = typeof r == "function" ? r() : n(r), i = (t?.$el || t)?.querySelector(e);
+		if (!i) return null;
+		let a = getComputedStyle(i);
+		return {
+			rect: i.getBoundingClientRect(),
+			style: {
+				borderColor: a.borderColor,
+				borderWidth: a.borderWidth,
+				backgroundColor: a.backgroundColor
+			},
+			el: i
+		};
+	}
+	function d({ oldRect: e, newEl: t, orientation: n, hideProps: r, indicatorExtra: i = {}, pseudoElement: a }) {
+		if (!l) return;
+		f();
+		let u = t.getBoundingClientRect(), d = n === "vertical", p = d ? u.width : u.height;
+		if (Math.abs(d ? e.left - u.left : e.top - u.top) > p / 2) return;
+		let m = d ? e.top + e.height / 2 - (u.top + u.height / 2) : e.left + e.width / 2 - (u.left + u.width / 2);
+		if (m === 0) return;
+		let h = d ? `0 ${m}px` : `${m}px 0`, g = d ? `1 ${e.height / u.height}` : `${e.width / u.width} 1`, _ = {
+			duration: s,
+			easing: c
+		};
+		o.hideNative = t.animate([r, r], {
+			..._,
+			fill: "forwards"
+		}), o.indicator = t.animate([{
+			translate: h,
+			scale: g,
+			...i
+		}, {
+			translate: "0 0",
+			scale: "1 1",
+			...i
+		}], {
+			..._,
+			pseudoElement: a
+		}), o.indicator.onfinish = () => {
+			o.hideNative?.cancel();
+		};
+	}
+	function f() {
+		o.indicator && (o.indicator.onfinish = null, o.indicator.cancel()), o.hideNative && (o.hideNative.onfinish = null, o.hideNative.cancel());
+	}
+	function p() {
+		return l;
+	}
+	return {
+		animate: d,
+		cancel: f,
+		canAnimate: p,
+		snapshot: u
+	};
+}
+//#endregion
+export { r as useIndicatorAnimation };
+
+//# sourceMappingURL=use-indicator-animation.js.map

package/dist/common/composables/use-indicator-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-indicator-animation.js","names":[],"sources":["../../../common/composables/useIndicatorAnimation.js"],"sourcesContent":["import { onMounted, onBeforeUnmount, unref } from 'vue';\n\n/**\n * Composable for \"traveling indicator\" animations.\n * Uses FLIP technique + Web Animations API to slide a selection indicator\n * (pseudo-element) from the old selected element to the new one.\n *\n * @param {import('vue').Ref|Function} containerRef - template ref or getter for the container element\n * @param {string} durationVar - CSS variable name for duration (e.g. '--tab-indicator-duration')\n * @param {string} easingVar - CSS variable name for easing (e.g. '--tab-indicator-easing')\n */\nexport function useIndicatorAnimation (containerRef, durationVar, easingVar) {\n  const state = { indicator: null, hideNative: null };\n  let duration = 200;\n  let easing = 'ease';\n  let supported = false;\n\n  onMounted(() => {\n    const el = typeof containerRef === 'function' ? containerRef() : unref(containerRef);\n    const resolvedEl = el?.$el || el;\n    if (!resolvedEl) return;\n\n    // Cache config from CSS custom properties\n    const style = getComputedStyle(resolvedEl);\n    duration = parseInt(style.getPropertyValue(durationVar), 10) || 200;\n    easing = style.getPropertyValue(easingVar).trim() || 'ease';\n\n    // Feature detection: WAAPI + prefers-reduced-motion\n    const prefersReducedMotion = typeof window.matchMedia === 'function' &&\n      window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    supported = typeof resolvedEl.animate === 'function' && !prefersReducedMotion;\n  });\n\n  onBeforeUnmount(() => { cancel(); });\n\n  /**\n   * Capture a snapshot of an element's position and computed style.\n   * @param {string} selector - CSS selector to find the element within the container\n   * @returns {{ rect: DOMRect, style: CSSStyleDeclaration, el: HTMLElement }|null}\n   */\n  function snapshot (selector) {\n    if (!supported) return null;\n    const container = typeof containerRef === 'function' ? containerRef() : unref(containerRef);\n    const containerEl = container?.$el || container;\n    const el = containerEl?.querySelector(selector);\n    if (!el) return null;\n    const cs = getComputedStyle(el);\n    return {\n      rect: el.getBoundingClientRect(),\n      style: { borderColor: cs.borderColor, borderWidth: cs.borderWidth, backgroundColor: cs.backgroundColor },\n      el,\n    };\n  }\n\n  /**\n   * Animate an indicator from oldRect to newEl's current position.\n   * @param {object} options\n   * @param {DOMRect} options.oldRect - bounding rect of the previously selected element\n   * @param {HTMLElement} options.newEl - the newly selected element\n   * @param {string} options.orientation - 'horizontal' or 'vertical'\n   * @param {object} options.hideProps - properties to suppress on newEl during animation\n   * @param {object} [options.indicatorExtra] - additional CSS properties for the indicator pseudo\n   * @param {string} options.pseudoElement - '::before' or '::after'\n   */\n  function animate ({ oldRect, newEl, orientation, hideProps, indicatorExtra = {}, pseudoElement }) {\n    if (!supported) return;\n    cancel();\n\n    const newRect = newEl.getBoundingClientRect();\n    const isVertical = orientation === 'vertical';\n\n    // Skip if elements are on different rows/columns (e.g. wrapped tabs).\n    // Use half the element's cross-axis size as threshold — items on the same\n    // row/column may differ slightly due to sub-pixel rounding or varying widths.\n    const crossAxisSize = isVertical ? newRect.width : newRect.height;\n    const crossAxisDelta = isVertical\n      ? Math.abs(oldRect.left - newRect.left)\n      : Math.abs(oldRect.top - newRect.top);\n    if (crossAxisDelta > crossAxisSize / 2) return;\n\n    // Center-to-center delta so scale from center aligns both edges\n    const delta = isVertical\n      ? (oldRect.top + oldRect.height / 2) - (newRect.top + newRect.height / 2)\n      : (oldRect.left + oldRect.width / 2) - (newRect.left + newRect.width / 2);\n    if (delta === 0) return;\n\n    const from = isVertical ? `0 ${delta}px` : `${delta}px 0`;\n    const scale = isVertical\n      ? `1 ${oldRect.height / newRect.height}`\n      : `${oldRect.width / newRect.width} 1`;\n\n    const opts = { duration, easing };\n    state.hideNative = newEl.animate(\n      [hideProps, hideProps], { ...opts, fill: 'forwards' },\n    );\n    state.indicator = newEl.animate(\n      [{ translate: from, scale, ...indicatorExtra },\n        { translate: '0 0', scale: '1 1', ...indicatorExtra }],\n      { ...opts, pseudoElement },\n    );\n    state.indicator.onfinish = () => { state.hideNative?.cancel(); };\n  }\n\n  function cancel () {\n    if (state.indicator) {\n      state.indicator.onfinish = null;\n      state.indicator.cancel();\n    }\n    if (state.hideNative) {\n      state.hideNative.onfinish = null;\n      state.hideNative.cancel();\n    }\n  }\n\n  function canAnimate () {\n    return supported;\n  }\n\n  return { animate, cancel, canAnimate, snapshot };\n}\n"],"mappings":";;AAWA,SAAgB,EAAuB,GAAc,GAAa,GAAW;CAC3E,IAAM,IAAQ;EAAE,WAAW;EAAM,YAAY;EAAM,EAC/C,IAAW,KACX,IAAS,QACT,IAAY;AAkBhB,CAhBA,QAAgB;EACd,IAAM,IAAK,OAAO,KAAiB,aAAa,GAAc,GAAG,EAAM,EAAa,EAC9E,IAAa,GAAI,OAAO;AAC9B,MAAI,CAAC,EAAY;EAGjB,IAAM,IAAQ,iBAAiB,EAAW;AAE1C,EADA,IAAW,SAAS,EAAM,iBAAiB,EAAY,EAAE,GAAG,IAAI,KAChE,IAAS,EAAM,iBAAiB,EAAU,CAAC,MAAM,IAAI;EAGrD,IAAM,IAAuB,OAAO,OAAO,cAAe,cACxD,OAAO,WAAW,mCAAmC,CAAC;AACxD,MAAY,OAAO,EAAW,WAAY,cAAc,CAAC;GACzD,EAEF,QAAsB;AAAE,KAAQ;GAAI;CAOpC,SAAS,EAAU,GAAU;AAC3B,MAAI,CAAC,EAAW,QAAO;EACvB,IAAM,IAAY,OAAO,KAAiB,aAAa,GAAc,GAAG,EAAM,EAAa,EAErF,KADc,GAAW,OAAO,IACd,cAAc,EAAS;AAC/C,MAAI,CAAC,EAAI,QAAO;EAChB,IAAM,IAAK,iBAAiB,EAAG;AAC/B,SAAO;GACL,MAAM,EAAG,uBAAuB;GAChC,OAAO;IAAE,aAAa,EAAG;IAAa,aAAa,EAAG;IAAa,iBAAiB,EAAG;IAAiB;GACxG;GACD;;CAaH,SAAS,EAAS,EAAE,YAAS,UAAO,gBAAa,cAAW,oBAAiB,EAAE,EAAE,oBAAiB;AAChG,MAAI,CAAC,EAAW;AAChB,KAAQ;EAER,IAAM,IAAU,EAAM,uBAAuB,EACvC,IAAa,MAAgB,YAK7B,IAAgB,IAAa,EAAQ,QAAQ,EAAQ;AAI3D,MAFI,KAAK,IADc,IACV,EAAQ,OAAO,EAAQ,OACvB,EAAQ,MAAM,EAAQ,IAAI,GAClB,IAAgB,EAAG;EAGxC,IAAM,IAAQ,IACT,EAAQ,MAAM,EAAQ,SAAS,KAAM,EAAQ,MAAM,EAAQ,SAAS,KACpE,EAAQ,OAAO,EAAQ,QAAQ,KAAM,EAAQ,OAAO,EAAQ,QAAQ;AACzE,MAAI,MAAU,EAAG;EAEjB,IAAM,IAAO,IAAa,KAAK,EAAM,MAAM,GAAG,EAAM,OAC9C,IAAQ,IACV,KAAK,EAAQ,SAAS,EAAQ,WAC9B,GAAG,EAAQ,QAAQ,EAAQ,MAAM,KAE/B,IAAO;GAAE;GAAU;GAAQ;AASjC,EARA,EAAM,aAAa,EAAM,QACvB,CAAC,GAAW,EAAU,EAAE;GAAE,GAAG;GAAM,MAAM;GAAY,CACtD,EACD,EAAM,YAAY,EAAM,QACtB,CAAC;GAAE,WAAW;GAAM;GAAO,GAAG;GAAgB,EAC5C;GAAE,WAAW;GAAO,OAAO;GAAO,GAAG;GAAgB,CAAC,EACxD;GAAE,GAAG;GAAM;GAAe,CAC3B,EACD,EAAM,UAAU,iBAAiB;AAAE,KAAM,YAAY,QAAQ;;;CAG/D,SAAS,IAAU;AAKjB,EAJI,EAAM,cACR,EAAM,UAAU,WAAW,MAC3B,EAAM,UAAU,QAAQ,GAEtB,EAAM,eACR,EAAM,WAAW,WAAW,MAC5B,EAAM,WAAW,QAAQ;;CAI7B,SAAS,IAAc;AACrB,SAAO;;AAGT,QAAO;EAAE;EAAS;EAAQ;EAAY;EAAU"}

package/dist/common/composables/useIndicatorAnimation.d.ts

@@ -0,0 +1,18 @@
+export function useIndicatorAnimation(containerRef: import('vue').Ref | Function, durationVar: string, easingVar: string): {
+    animate: ({ oldRect, newEl, orientation, hideProps, indicatorExtra, pseudoElement }: {
+        oldRect: DOMRect;
+        newEl: HTMLElement;
+        orientation: string;
+        hideProps: object;
+        indicatorExtra?: object | undefined;
+        pseudoElement: string;
+    }) => void;
+    cancel: () => void;
+    canAnimate: () => boolean;
+    snapshot: (selector: string) => {
+        rect: DOMRect;
+        style: CSSStyleDeclaration;
+        el: HTMLElement;
+    } | null;
+};
+//# sourceMappingURL=useIndicatorAnimation.d.ts.map

package/dist/common/composables/useIndicatorAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIndicatorAnimation.d.ts","sourceRoot":"","sources":["../../../common/composables/useIndicatorAnimation.js"],"names":[],"mappings":"AAWA,oDAJW,OAAO,KAAK,EAAE,GAAG,WAAS,eAC1B,MAAM,aACN,MAAM;yFAgDZ;QAAyB,OAAO,EAAxB,OAAO;QACc,KAAK,EAA1B,WAAW;QACK,WAAW,EAA3B,MAAM;QACU,SAAS,EAAzB,MAAM;QACW,cAAc;QACf,aAAa,EAA7B,MAAM;KAChB;;;yBA1BU,MAAM,KACJ;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,mBAAmB,CAAC;QAAC,EAAE,EAAE,WAAW,CAAA;KAAE,GAAC,IAAI;EAiFjF"}

package/dist/common/constants/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=typeof HTMLElement<`u`?HTMLElement:Object,t={ERROR:`error`,WARNING:`warning`,SUCCESS:`success`},n={LARGE:`lg`,EXTRA_LARGE:`xl`},r={xs:``,sm:``,md:``,lg:`d-description--lg`,xl:`d-description--xl`},i={xs:`d-label--xs`,sm:`d-label--sm`,md:``,lg:`d-label--lg`,xl:`d-label--xl`},a={esc:`Esc`,escape:`Escape`,tab:`Tab`,enter:`Enter`,space:`Space`,spacebar:`Spacebar`,up:`Up`,arrowup:`ArrowUp`,left:`Left`,arrowleft:`ArrowLeft`,right:`Right`,arrowright:`ArrowRight`,down:`Down`,arrowdown:`ArrowDown`,home:`Home`,end:`End`},o=t.ERROR,s=`dt`,c={VALIDATION_MESSAGE_TYPES:t,DESCRIPTION_SIZE_TYPES:n,DEFAULT_VALIDATION_MESSAGE_TYPE:o,DEFAULT_PREFIX:`dt`};exports.DEFAULT_PREFIX=s,exports.DEFAULT_VALIDATION_MESSAGE_TYPE=o,exports.DESCRIPTION_SIZE_MODIFIERS=r,exports.DESCRIPTION_SIZE_TYPES=n,exports.EVENT_KEYNAMES=a,exports.HTML_ELEMENT_TYPE=e,exports.LABEL_SIZE_MODIFIERS=i,exports.VALIDATION_MESSAGE_TYPES=t,exports.default=c;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`./sizes.cjs`),t=require(`./layout.cjs`);var n=typeof HTMLElement<`u`?HTMLElement:Object,r={CRITICAL:`critical`,WARNING:`warning`,POSITIVE:`positive`,INFO:`info`},i={LARGE:`lg`,EXTRA_LARGE:`xl`},a={100:`d-description--xs`,200:`d-description--sm`,300:``,400:`d-description--lg`,500:`d-description--xl`,xs:`d-description--xs`,sm:`d-description--sm`,md:``,lg:`d-description--lg`,xl:`d-description--xl`},o={100:`d-label--xs`,200:`d-label--sm`,300:``,400:`d-label--lg`,500:`d-label--xl`,xs:`d-label--xs`,sm:`d-label--sm`,md:``,lg:`d-label--lg`,xl:`d-label--xl`},s={esc:`Esc`,escape:`Escape`,tab:`Tab`,enter:`Enter`,space:`Space`,spacebar:`Spacebar`,up:`Up`,arrowup:`ArrowUp`,left:`Left`,arrowleft:`ArrowLeft`,right:`Right`,arrowright:`ArrowRight`,down:`Down`,arrowdown:`ArrowDown`,home:`Home`,end:`End`},c=r.CRITICAL,l=`dt`,u={VALIDATION_MESSAGE_TYPES:r,DESCRIPTION_SIZE_TYPES:i,DEFAULT_VALIDATION_MESSAGE_TYPE:c,DEFAULT_PREFIX:`dt`};exports.COMPONENT_SIZES=e.COMPONENT_SIZES,exports.DEFAULT_PREFIX=l,exports.DEFAULT_VALIDATION_MESSAGE_TYPE=c,exports.DESCRIPTION_SIZE_MODIFIERS=a,exports.DESCRIPTION_SIZE_TYPES=i,exports.EVENT_KEYNAMES=s,exports.HTML_ELEMENT_TYPE=n,exports.LABEL_SIZE_MODIFIERS=o,exports.LAYOUT_PERCENT_VALUES=t.LAYOUT_PERCENT_VALUES,exports.LAYOUT_SIZE_VALUES=t.LAYOUT_SIZE_VALUES,exports.LAYOUT_VALUES=t.LAYOUT_VALUES,exports.TEXT_HEADLINE_SIZES=e.TEXT_HEADLINE_SIZES,exports.VALIDATION_MESSAGE_TYPES=r,exports.default=u;
 //# sourceMappingURL=index.cjs.map

package/dist/common/constants/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../../common/constants/index.js"],"sourcesContent":["/* TODO: Move and sort these in a constants directory\n\nExample:\n  constants/\n    forms.js\n    defaults.js\n    ...\n*/\n\n// `HTMLElement` is a browser-only global. Referencing it bare in a prop `type:`\n// dereferences it at module-load time, which throws in Node SSR environments.\n// Use this constant instead: it resolves to `HTMLElement` in the browser and\n// falls back to `Object` on the server (where prop typing is never checked).\nexport const HTML_ELEMENT_TYPE = typeof HTMLElement !== 'undefined' ? HTMLElement : Object;\n\n// Types of messages, also dictates what is the current state of the input.\nexport const VALIDATION_MESSAGE_TYPES = {\n  ERROR: 'error',\n  WARNING: 'warning',\n  SUCCESS: 'success',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_TYPES = {\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_MODIFIERS = {\n  xs: '',\n  sm: '',\n  md: '',\n  lg: 'd-description--lg',\n  xl: 'd-description--xl',\n};\n\n// Label size variants\nexport const LABEL_SIZE_MODIFIERS = {\n  xs: 'd-label--xs',\n  sm: 'd-label--sm',\n  md: '',\n  lg: 'd-label--lg',\n  xl: 'd-label--xl',\n};\n\nexport const EVENT_KEYNAMES = {\n  esc: 'Esc',\n  escape: 'Escape',\n  tab: 'Tab',\n  enter: 'Enter',\n  space: 'Space',\n  spacebar: 'Spacebar',\n  up: 'Up',\n  arrowup: 'ArrowUp',\n  left: 'Left',\n  arrowleft: 'ArrowLeft',\n  right: 'Right',\n  arrowright: 'ArrowRight',\n  down: 'Down',\n  arrowdown: 'ArrowDown',\n  home: 'Home',\n  end: 'End',\n};\n\n/*\n * Any string message or message object in the messages prop that do not specify\n * a 'type' attributes will default to 'DEFAULT_MESSAGE_TYPE'.\n */\nexport const DEFAULT_VALIDATION_MESSAGE_TYPE = VALIDATION_MESSAGE_TYPES.ERROR;\n\n// Default prefix used for ids\nexport const DEFAULT_PREFIX = 'dt';\n\nexport default {\n  VALIDATION_MESSAGE_TYPES,\n  DESCRIPTION_SIZE_TYPES,\n  DEFAULT_VALIDATION_MESSAGE_TYPE,\n  DEFAULT_PREFIX,\n};\n"],"mappings":"+FAaA,IAAa,EAAoB,OAAO,YAAgB,IAAc,YAAc,OAGvE,EAA2B,CACtC,MAAO,QACP,QAAS,UACT,QAAS,UACV,CAGY,EAAyB,CACpC,MAAO,KACP,YAAa,KACd,CAGY,EAA6B,CACxC,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,oBACJ,GAAI,oBACL,CAGY,EAAuB,CAClC,GAAI,cACJ,GAAI,cACJ,GAAI,GACJ,GAAI,cACJ,GAAI,cACL,CAEY,EAAiB,CAC5B,IAAK,MACL,OAAQ,SACR,IAAK,MACL,MAAO,QACP,MAAO,QACP,SAAU,WACV,GAAI,KACJ,QAAS,UACT,KAAM,OACN,UAAW,YACX,MAAO,QACP,WAAY,aACZ,KAAM,OACN,UAAW,YACX,KAAM,OACN,IAAK,MACN,CAMY,EAAkC,EAAyB,MAG3D,EAAiB,KAE9B,EAAe,CACb,2BACA,yBACA,kCACA,eAAA,KACD"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../common/constants/index.js"],"sourcesContent":["/* TODO: Move and sort these in a constants directory\n\nExample:\n  constants/\n    forms.js\n    defaults.js\n    ...\n*/\n\n// `HTMLElement` is a browser-only global. Referencing it bare in a prop `type:`\n// dereferences it at module-load time, which throws in Node SSR environments.\n// Use this constant instead: it resolves to `HTMLElement` in the browser and\n// falls back to `Object` on the server (where prop typing is never checked).\nexport const HTML_ELEMENT_TYPE = typeof HTMLElement !== 'undefined' ? HTMLElement : Object;\n\n// Types of messages, also dictates what is the current state of the input.\nexport const VALIDATION_MESSAGE_TYPES = {\n  CRITICAL: 'critical',\n  WARNING: 'warning',\n  POSITIVE: 'positive',\n  INFO: 'info',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_TYPES = {\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-description--xs',\n  200: 'd-description--sm',\n  300: '',\n  400: 'd-description--lg',\n  500: 'd-description--xl',\n  // T-shirt aliases (deprecated)\n  xs: 'd-description--xs',\n  sm: 'd-description--sm',\n  md: '',\n  lg: 'd-description--lg',\n  xl: 'd-description--xl',\n};\n\n// Label size variants\nexport const LABEL_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-label--xs',\n  200: 'd-label--sm',\n  300: '',\n  400: 'd-label--lg',\n  500: 'd-label--xl',\n  // T-shirt aliases (deprecated)\n  xs: 'd-label--xs',\n  sm: 'd-label--sm',\n  md: '',\n  lg: 'd-label--lg',\n  xl: 'd-label--xl',\n};\n\nexport const EVENT_KEYNAMES = {\n  esc: 'Esc',\n  escape: 'Escape',\n  tab: 'Tab',\n  enter: 'Enter',\n  space: 'Space',\n  spacebar: 'Spacebar',\n  up: 'Up',\n  arrowup: 'ArrowUp',\n  left: 'Left',\n  arrowleft: 'ArrowLeft',\n  right: 'Right',\n  arrowright: 'ArrowRight',\n  down: 'Down',\n  arrowdown: 'ArrowDown',\n  home: 'Home',\n  end: 'End',\n};\n\n/*\n * Any string message or message object in the messages prop that do not specify\n * a 'type' attributes will default to 'DEFAULT_MESSAGE_TYPE'.\n */\nexport const DEFAULT_VALIDATION_MESSAGE_TYPE = VALIDATION_MESSAGE_TYPES.CRITICAL;\n\n// Default prefix used for ids\nexport const DEFAULT_PREFIX = 'dt';\n\n// Component size scale\nexport { COMPONENT_SIZES, TEXT_HEADLINE_SIZES } from './sizes.js';\nexport { LAYOUT_SIZE_VALUES, LAYOUT_PERCENT_VALUES, LAYOUT_VALUES } from './layout.js';\n\nexport default {\n  VALIDATION_MESSAGE_TYPES,\n  DESCRIPTION_SIZE_TYPES,\n  DEFAULT_VALIDATION_MESSAGE_TYPE,\n  DEFAULT_PREFIX,\n};\n"],"mappings":"wJAaA,IAAa,EAAoB,OAAO,YAAgB,IAAc,YAAc,OAGvE,EAA2B,CACtC,SAAU,WACV,QAAS,UACT,SAAU,WACV,KAAM,OACP,CAGY,EAAyB,CACpC,MAAO,KACP,YAAa,KACd,CAGY,EAA6B,CAExC,IAAK,oBACL,IAAK,oBACL,IAAK,GACL,IAAK,oBACL,IAAK,oBAEL,GAAI,oBACJ,GAAI,oBACJ,GAAI,GACJ,GAAI,oBACJ,GAAI,oBACL,CAGY,EAAuB,CAElC,IAAK,cACL,IAAK,cACL,IAAK,GACL,IAAK,cACL,IAAK,cAEL,GAAI,cACJ,GAAI,cACJ,GAAI,GACJ,GAAI,cACJ,GAAI,cACL,CAEY,EAAiB,CAC5B,IAAK,MACL,OAAQ,SACR,IAAK,MACL,MAAO,QACP,MAAO,QACP,SAAU,WACV,GAAI,KACJ,QAAS,UACT,KAAM,OACN,UAAW,YACX,MAAO,QACP,WAAY,aACZ,KAAM,OACN,UAAW,YACX,KAAM,OACN,IAAK,MACN,CAMY,EAAkC,EAAyB,SAG3D,EAAiB,KAM9B,EAAe,CACb,2BACA,yBACA,kCACA,eAAA,KACD"}

package/dist/common/constants/index.d.ts

@@ -3,33 +3,39 @@ export const HTML_ELEMENT_TYPE: {
     prototype: HTMLElement;
 } | ObjectConstructor;
 export namespace VALIDATION_MESSAGE_TYPES {
-    let ERROR: string;
+    let CRITICAL: string;
     let WARNING: string;
-    let SUCCESS: string;
+    let POSITIVE: string;
+    let INFO: string;
 }
 export namespace DESCRIPTION_SIZE_TYPES {
     let LARGE: string;
     let EXTRA_LARGE: string;
 }
-export namespace DESCRIPTION_SIZE_MODIFIERS {
-    let xs: string;
-    let sm: string;
-    let md: string;
-    let lg: string;
-    let xl: string;
-}
-export namespace LABEL_SIZE_MODIFIERS {
-    let xs_1: string;
-    export { xs_1 as xs };
-    let sm_1: string;
-    export { sm_1 as sm };
-    let md_1: string;
-    export { md_1 as md };
-    let lg_1: string;
-    export { lg_1 as lg };
-    let xl_1: string;
-    export { xl_1 as xl };
-}
+export const DESCRIPTION_SIZE_MODIFIERS: {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export const LABEL_SIZE_MODIFIERS: {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
 export namespace EVENT_KEYNAMES {
     let esc: string;
     let escape: string;
@@ -57,4 +63,6 @@ declare namespace _default {
     export { DEFAULT_PREFIX };
 }
 export default _default;
+export { COMPONENT_SIZES, TEXT_HEADLINE_SIZES } from './sizes.js';
+export { LAYOUT_SIZE_VALUES, LAYOUT_PERCENT_VALUES, LAYOUT_VALUES } from './layout.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/common/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/constants/index.js"],"names":[],"mappings":"AAaA;;;sBAA2F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwD3F,qDAA8E;AAG9E,6BAA8B,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../common/constants/index.js"],"names":[],"mappings":"AAaA;;;sBAA2F;;;;;;;;;;;AAiB3F;;;;;;;;;;;EAaE;AAGF;;;;;;;;;;;EAaE;;;;;;;;;;;;;;;;;;;AAyBF,qDAAiF;AAGjF,6BAA8B,IAAI,CAAC"}

package/dist/common/constants/index.js

@@ -1,24 +1,37 @@
+import { COMPONENT_SIZES as e, TEXT_HEADLINE_SIZES as t } from "./sizes.js";
+import { LAYOUT_PERCENT_VALUES as n, LAYOUT_SIZE_VALUES as r, LAYOUT_VALUES as i } from "./layout.js";
 //#region common/constants/index.js
-var e = typeof HTMLElement < "u" ? HTMLElement : Object, t = {
-	ERROR: "error",
+var a = typeof HTMLElement < "u" ? HTMLElement : Object, o = {
+	CRITICAL: "critical",
 	WARNING: "warning",
-	SUCCESS: "success"
-}, n = {
+	POSITIVE: "positive",
+	INFO: "info"
+}, s = {
 	LARGE: "lg",
 	EXTRA_LARGE: "xl"
-}, r = {
-	xs: "",
-	sm: "",
+}, c = {
+	100: "d-description--xs",
+	200: "d-description--sm",
+	300: "",
+	400: "d-description--lg",
+	500: "d-description--xl",
+	xs: "d-description--xs",
+	sm: "d-description--sm",
 	md: "",
 	lg: "d-description--lg",
 	xl: "d-description--xl"
-}, i = {
+}, l = {
+	100: "d-label--xs",
+	200: "d-label--sm",
+	300: "",
+	400: "d-label--lg",
+	500: "d-label--xl",
 	xs: "d-label--xs",
 	sm: "d-label--sm",
 	md: "",
 	lg: "d-label--lg",
 	xl: "d-label--xl"
-}, a = {
+}, u = {
 	esc: "Esc",
 	escape: "Escape",
 	tab: "Tab",
@@ -35,13 +48,13 @@ var e = typeof HTMLElement < "u" ? HTMLElement : Object, t = {
 	arrowdown: "ArrowDown",
 	home: "Home",
 	end: "End"
-}, o = t.ERROR, s = "dt", c = {
-	VALIDATION_MESSAGE_TYPES: t,
-	DESCRIPTION_SIZE_TYPES: n,
-	DEFAULT_VALIDATION_MESSAGE_TYPE: o,
+}, d = o.CRITICAL, f = "dt", p = {
+	VALIDATION_MESSAGE_TYPES: o,
+	DESCRIPTION_SIZE_TYPES: s,
+	DEFAULT_VALIDATION_MESSAGE_TYPE: d,
 	DEFAULT_PREFIX: "dt"
 };
 //#endregion
-export { s as DEFAULT_PREFIX, o as DEFAULT_VALIDATION_MESSAGE_TYPE, r as DESCRIPTION_SIZE_MODIFIERS, n as DESCRIPTION_SIZE_TYPES, a as EVENT_KEYNAMES, e as HTML_ELEMENT_TYPE, i as LABEL_SIZE_MODIFIERS, t as VALIDATION_MESSAGE_TYPES, c as default };
+export { e as COMPONENT_SIZES, f as DEFAULT_PREFIX, d as DEFAULT_VALIDATION_MESSAGE_TYPE, c as DESCRIPTION_SIZE_MODIFIERS, s as DESCRIPTION_SIZE_TYPES, u as EVENT_KEYNAMES, a as HTML_ELEMENT_TYPE, l as LABEL_SIZE_MODIFIERS, n as LAYOUT_PERCENT_VALUES, r as LAYOUT_SIZE_VALUES, i as LAYOUT_VALUES, t as TEXT_HEADLINE_SIZES, o as VALIDATION_MESSAGE_TYPES, p as default };
 
 //# sourceMappingURL=index.js.map

package/dist/common/constants/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../common/constants/index.js"],"sourcesContent":["/* TODO: Move and sort these in a constants directory\n\nExample:\n  constants/\n    forms.js\n    defaults.js\n    ...\n*/\n\n// `HTMLElement` is a browser-only global. Referencing it bare in a prop `type:`\n// dereferences it at module-load time, which throws in Node SSR environments.\n// Use this constant instead: it resolves to `HTMLElement` in the browser and\n// falls back to `Object` on the server (where prop typing is never checked).\nexport const HTML_ELEMENT_TYPE = typeof HTMLElement !== 'undefined' ? HTMLElement : Object;\n\n// Types of messages, also dictates what is the current state of the input.\nexport const VALIDATION_MESSAGE_TYPES = {\n  ERROR: 'error',\n  WARNING: 'warning',\n  SUCCESS: 'success',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_TYPES = {\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_MODIFIERS = {\n  xs: '',\n  sm: '',\n  md: '',\n  lg: 'd-description--lg',\n  xl: 'd-description--xl',\n};\n\n// Label size variants\nexport const LABEL_SIZE_MODIFIERS = {\n  xs: 'd-label--xs',\n  sm: 'd-label--sm',\n  md: '',\n  lg: 'd-label--lg',\n  xl: 'd-label--xl',\n};\n\nexport const EVENT_KEYNAMES = {\n  esc: 'Esc',\n  escape: 'Escape',\n  tab: 'Tab',\n  enter: 'Enter',\n  space: 'Space',\n  spacebar: 'Spacebar',\n  up: 'Up',\n  arrowup: 'ArrowUp',\n  left: 'Left',\n  arrowleft: 'ArrowLeft',\n  right: 'Right',\n  arrowright: 'ArrowRight',\n  down: 'Down',\n  arrowdown: 'ArrowDown',\n  home: 'Home',\n  end: 'End',\n};\n\n/*\n * Any string message or message object in the messages prop that do not specify\n * a 'type' attributes will default to 'DEFAULT_MESSAGE_TYPE'.\n */\nexport const DEFAULT_VALIDATION_MESSAGE_TYPE = VALIDATION_MESSAGE_TYPES.ERROR;\n\n// Default prefix used for ids\nexport const DEFAULT_PREFIX = 'dt';\n\nexport default {\n  VALIDATION_MESSAGE_TYPES,\n  DESCRIPTION_SIZE_TYPES,\n  DEFAULT_VALIDATION_MESSAGE_TYPE,\n  DEFAULT_PREFIX,\n};\n"],"mappings":";AAaA,IAAa,IAAoB,OAAO,cAAgB,MAAc,cAAc,QAGvE,IAA2B;CACtC,OAAO;CACP,SAAS;CACT,SAAS;CACV,EAGY,IAAyB;CACpC,OAAO;CACP,aAAa;CACd,EAGY,IAA6B;CACxC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAGY,IAAuB;CAClC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAiB;CAC5B,KAAK;CACL,QAAQ;CACR,KAAK;CACL,OAAO;CACP,OAAO;CACP,UAAU;CACV,IAAI;CACJ,SAAS;CACT,MAAM;CACN,WAAW;CACX,OAAO;CACP,YAAY;CACZ,MAAM;CACN,WAAW;CACX,MAAM;CACN,KAAK;CACN,EAMY,IAAkC,EAAyB,OAG3D,IAAiB,MAE9B,IAAe;CACb;CACA;CACA;CACA,gBAAA;CACD"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../common/constants/index.js"],"sourcesContent":["/* TODO: Move and sort these in a constants directory\n\nExample:\n  constants/\n    forms.js\n    defaults.js\n    ...\n*/\n\n// `HTMLElement` is a browser-only global. Referencing it bare in a prop `type:`\n// dereferences it at module-load time, which throws in Node SSR environments.\n// Use this constant instead: it resolves to `HTMLElement` in the browser and\n// falls back to `Object` on the server (where prop typing is never checked).\nexport const HTML_ELEMENT_TYPE = typeof HTMLElement !== 'undefined' ? HTMLElement : Object;\n\n// Types of messages, also dictates what is the current state of the input.\nexport const VALIDATION_MESSAGE_TYPES = {\n  CRITICAL: 'critical',\n  WARNING: 'warning',\n  POSITIVE: 'positive',\n  INFO: 'info',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_TYPES = {\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\n// Description size variants\nexport const DESCRIPTION_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-description--xs',\n  200: 'd-description--sm',\n  300: '',\n  400: 'd-description--lg',\n  500: 'd-description--xl',\n  // T-shirt aliases (deprecated)\n  xs: 'd-description--xs',\n  sm: 'd-description--sm',\n  md: '',\n  lg: 'd-description--lg',\n  xl: 'd-description--xl',\n};\n\n// Label size variants\nexport const LABEL_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-label--xs',\n  200: 'd-label--sm',\n  300: '',\n  400: 'd-label--lg',\n  500: 'd-label--xl',\n  // T-shirt aliases (deprecated)\n  xs: 'd-label--xs',\n  sm: 'd-label--sm',\n  md: '',\n  lg: 'd-label--lg',\n  xl: 'd-label--xl',\n};\n\nexport const EVENT_KEYNAMES = {\n  esc: 'Esc',\n  escape: 'Escape',\n  tab: 'Tab',\n  enter: 'Enter',\n  space: 'Space',\n  spacebar: 'Spacebar',\n  up: 'Up',\n  arrowup: 'ArrowUp',\n  left: 'Left',\n  arrowleft: 'ArrowLeft',\n  right: 'Right',\n  arrowright: 'ArrowRight',\n  down: 'Down',\n  arrowdown: 'ArrowDown',\n  home: 'Home',\n  end: 'End',\n};\n\n/*\n * Any string message or message object in the messages prop that do not specify\n * a 'type' attributes will default to 'DEFAULT_MESSAGE_TYPE'.\n */\nexport const DEFAULT_VALIDATION_MESSAGE_TYPE = VALIDATION_MESSAGE_TYPES.CRITICAL;\n\n// Default prefix used for ids\nexport const DEFAULT_PREFIX = 'dt';\n\n// Component size scale\nexport { COMPONENT_SIZES, TEXT_HEADLINE_SIZES } from './sizes.js';\nexport { LAYOUT_SIZE_VALUES, LAYOUT_PERCENT_VALUES, LAYOUT_VALUES } from './layout.js';\n\nexport default {\n  VALIDATION_MESSAGE_TYPES,\n  DESCRIPTION_SIZE_TYPES,\n  DEFAULT_VALIDATION_MESSAGE_TYPE,\n  DEFAULT_PREFIX,\n};\n"],"mappings":";;;AAaA,IAAa,IAAoB,OAAO,cAAgB,MAAc,cAAc,QAGvE,IAA2B;CACtC,UAAU;CACV,SAAS;CACT,UAAU;CACV,MAAM;CACP,EAGY,IAAyB;CACpC,OAAO;CACP,aAAa;CACd,EAGY,IAA6B;CAExC,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAGY,IAAuB;CAElC,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAiB;CAC5B,KAAK;CACL,QAAQ;CACR,KAAK;CACL,OAAO;CACP,OAAO;CACP,UAAU;CACV,IAAI;CACJ,SAAS;CACT,MAAM;CACN,WAAW;CACX,OAAO;CACP,YAAY;CACZ,MAAM;CACN,WAAW;CACX,MAAM;CACN,KAAK;CACN,EAMY,IAAkC,EAAyB,UAG3D,IAAiB,MAM9B,IAAe;CACb;CACA;CACA;CACA,gBAAA;CACD"}

package/dist/common/constants/layout.cjs

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=`0.1px.2px.8px.25.20px.24px.50.75.100.125.150.175.200.250.300.350.400.450.500.550.600.650.700.750.800.850.900.950.1000.1050.1100.1150.1200.1250.1300.1350.1400.1450.1500.1550.1600`.split(`.`),t=[`10p`,`20p`,`25p`,`30p`,`33p`,`40p`,`50p`,`60p`,`66p`,`70p`,`75p`,`80p`,`90p`,`95p`,`100p`],n=[...e,...t],r={LAYOUT_SIZE_VALUES:e,LAYOUT_PERCENT_VALUES:t,LAYOUT_VALUES:n};exports.LAYOUT_PERCENT_VALUES=t,exports.LAYOUT_SIZE_VALUES=e,exports.LAYOUT_VALUES=n,exports.default=r;
+//# sourceMappingURL=layout.cjs.map

package/dist/common/constants/layout.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.cjs","names":[],"sources":["../../../common/constants/layout.js"],"sourcesContent":["/**\n * Layout sizing values accepted by Vue sizing props.\n * Includes 0, which resolves to raw CSS 0 rather than a --dt-layout-* token.\n * Remaining values must stay in sync with LAYOUT_STOPS in\n * packages/dialtone-css/postcss/constants.cjs.\n *\n * Non-zero bare integers are scale-indexed on the 64px layout base:\n * value_in_px = stop * 64 / 100.\n * '*px' values are literal off-scale pixel exceptions.\n * @type {string[]}\n */\nexport const LAYOUT_SIZE_VALUES = [\n  '0',\n  '1px', '2px', '8px', '25', '20px', '24px', '50', '75', '100', '125', '150',\n  '175', '200', '250', '300', '350', '400', '450', '500', '550', '600', '650',\n  '700', '750', '800', '850', '900', '950', '1000', '1050', '1100', '1150',\n  '1200', '1250', '1300', '1350', '1400', '1450', '1500', '1550', '1600',\n];\n\n/**\n * Percentage layout values accepted by DtBox layout props.\n * @type {string[]}\n */\nexport const LAYOUT_PERCENT_VALUES = [\n  '10p', '20p', '25p', '30p', '33p', '40p', '50p',\n  '60p', '66p', '70p', '75p', '80p', '90p', '95p', '100p',\n];\n\n/**\n * Layout token and percentage values accepted by DtBox layout props.\n * @type {string[]}\n */\nexport const LAYOUT_VALUES = [\n  ...LAYOUT_SIZE_VALUES,\n  ...LAYOUT_PERCENT_VALUES,\n];\n\nexport default {\n  LAYOUT_SIZE_VALUES,\n  LAYOUT_PERCENT_VALUES,\n  LAYOUT_VALUES,\n};\n"],"mappings":"+FAWA,IAAa,EAAqB,8LAMjC,CAMY,EAAwB,CACnC,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAC1C,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,OAClD,CAMY,EAAgB,CAC3B,GAAG,EACH,GAAG,EACJ,CAED,EAAe,CACb,qBACA,wBACA,gBACD"}

package/dist/common/constants/layout.d.ts

@@ -0,0 +1,10 @@
+export const LAYOUT_SIZE_VALUES: string[];
+export const LAYOUT_PERCENT_VALUES: string[];
+export const LAYOUT_VALUES: string[];
+declare namespace _default {
+    export { LAYOUT_SIZE_VALUES };
+    export { LAYOUT_PERCENT_VALUES };
+    export { LAYOUT_VALUES };
+}
+export default _default;
+//# sourceMappingURL=layout.d.ts.map

package/dist/common/constants/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../common/constants/layout.js"],"names":[],"mappings":"AAWA,iCAFU,MAAM,EAAE,CAQhB;AAMF,oCAFU,MAAM,EAAE,CAKhB;AAMF,4BAFU,MAAM,EAAE,CAKhB"}

package/dist/common/constants/layout.js

@@ -0,0 +1,26 @@
+//#region common/constants/layout.js
+var e = /* @__PURE__ */ "0.1px.2px.8px.25.20px.24px.50.75.100.125.150.175.200.250.300.350.400.450.500.550.600.650.700.750.800.850.900.950.1000.1050.1100.1150.1200.1250.1300.1350.1400.1450.1500.1550.1600".split("."), t = [
+	"10p",
+	"20p",
+	"25p",
+	"30p",
+	"33p",
+	"40p",
+	"50p",
+	"60p",
+	"66p",
+	"70p",
+	"75p",
+	"80p",
+	"90p",
+	"95p",
+	"100p"
+], n = [...e, ...t], r = {
+	LAYOUT_SIZE_VALUES: e,
+	LAYOUT_PERCENT_VALUES: t,
+	LAYOUT_VALUES: n
+};
+//#endregion
+export { t as LAYOUT_PERCENT_VALUES, e as LAYOUT_SIZE_VALUES, n as LAYOUT_VALUES, r as default };
+
+//# sourceMappingURL=layout.js.map

package/dist/common/constants/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","names":[],"sources":["../../../common/constants/layout.js"],"sourcesContent":["/**\n * Layout sizing values accepted by Vue sizing props.\n * Includes 0, which resolves to raw CSS 0 rather than a --dt-layout-* token.\n * Remaining values must stay in sync with LAYOUT_STOPS in\n * packages/dialtone-css/postcss/constants.cjs.\n *\n * Non-zero bare integers are scale-indexed on the 64px layout base:\n * value_in_px = stop * 64 / 100.\n * '*px' values are literal off-scale pixel exceptions.\n * @type {string[]}\n */\nexport const LAYOUT_SIZE_VALUES = [\n  '0',\n  '1px', '2px', '8px', '25', '20px', '24px', '50', '75', '100', '125', '150',\n  '175', '200', '250', '300', '350', '400', '450', '500', '550', '600', '650',\n  '700', '750', '800', '850', '900', '950', '1000', '1050', '1100', '1150',\n  '1200', '1250', '1300', '1350', '1400', '1450', '1500', '1550', '1600',\n];\n\n/**\n * Percentage layout values accepted by DtBox layout props.\n * @type {string[]}\n */\nexport const LAYOUT_PERCENT_VALUES = [\n  '10p', '20p', '25p', '30p', '33p', '40p', '50p',\n  '60p', '66p', '70p', '75p', '80p', '90p', '95p', '100p',\n];\n\n/**\n * Layout token and percentage values accepted by DtBox layout props.\n * @type {string[]}\n */\nexport const LAYOUT_VALUES = [\n  ...LAYOUT_SIZE_VALUES,\n  ...LAYOUT_PERCENT_VALUES,\n];\n\nexport default {\n  LAYOUT_SIZE_VALUES,\n  LAYOUT_PERCENT_VALUES,\n  LAYOUT_VALUES,\n};\n"],"mappings":";AAWA,IAAa,IAAqB,8MAMjC,EAMY,IAAwB;CACnC;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAC1C;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAClD,EAMY,IAAgB,CAC3B,GAAG,GACH,GAAG,EACJ,EAED,IAAe;CACb;CACA;CACA;CACD"}

package/dist/common/constants/sizes.cjs

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={100:`xs`,200:`sm`,300:`md`,400:`lg`,500:`xl`},t={...e,600:`2xl`,700:`3xl`},n={COMPONENT_SIZES:e,TEXT_HEADLINE_SIZES:t};exports.COMPONENT_SIZES=e,exports.TEXT_HEADLINE_SIZES=t,exports.default=n;
+//# sourceMappingURL=sizes.cjs.map

package/dist/common/constants/sizes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.cjs","names":[],"sources":["../../../common/constants/sizes.js"],"sourcesContent":["/**\n * Canonical numeric-to-t-shirt size mapping for component size props.\n *\n * Scale: 100-unit ordinal steps with 50-unit half-steps reserved for future sizes.\n * Convention matches Dialtone's existing token scales (dt-size-*, dt-icon-size-*, colors).\n *\n * @example\n *   <DtButton :size=\"200\" />   <!-- equivalent to size=\"sm\" -->\n *   <DtButton :size=\"250\" />   <!-- future \"smedium\" -->\n */\n\n// Numeric → t-shirt label mapping\nexport const COMPONENT_SIZES = {\n  100: 'xs',\n  200: 'sm',\n  300: 'md',\n  400: 'lg',\n  500: 'xl',\n};\n\n// Extended sizes for Text headline kind\nexport const TEXT_HEADLINE_SIZES = {\n  ...COMPONENT_SIZES,\n  600: '2xl',\n  700: '3xl',\n};\n\nexport default {\n  COMPONENT_SIZES,\n  TEXT_HEADLINE_SIZES,\n};\n"],"mappings":"+FAYA,IAAa,EAAkB,CAC7B,IAAK,KACL,IAAK,KACL,IAAK,KACL,IAAK,KACL,IAAK,KACN,CAGY,EAAsB,CACjC,GAAG,EACH,IAAK,MACL,IAAK,MACN,CAED,EAAe,CACb,kBACA,sBACD"}

package/dist/common/constants/sizes.d.ts

@@ -0,0 +1,22 @@
+export const COMPONENT_SIZES: {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+};
+export const TEXT_HEADLINE_SIZES: {
+    600: string;
+    700: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+};
+declare namespace _default {
+    export { COMPONENT_SIZES };
+    export { TEXT_HEADLINE_SIZES };
+}
+export default _default;
+//# sourceMappingURL=sizes.d.ts.map

package/dist/common/constants/sizes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.d.ts","sourceRoot":"","sources":["../../../common/constants/sizes.js"],"names":[],"mappings":"AAYA;;;;;;EAME;AAGF;;;;;;;;EAIE"}

package/dist/common/constants/sizes.js

@@ -0,0 +1,19 @@
+//#region common/constants/sizes.js
+var e = {
+	100: "xs",
+	200: "sm",
+	300: "md",
+	400: "lg",
+	500: "xl"
+}, t = {
+	...e,
+	600: "2xl",
+	700: "3xl"
+}, n = {
+	COMPONENT_SIZES: e,
+	TEXT_HEADLINE_SIZES: t
+};
+//#endregion
+export { e as COMPONENT_SIZES, t as TEXT_HEADLINE_SIZES, n as default };
+
+//# sourceMappingURL=sizes.js.map

package/dist/common/constants/sizes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizes.js","names":[],"sources":["../../../common/constants/sizes.js"],"sourcesContent":["/**\n * Canonical numeric-to-t-shirt size mapping for component size props.\n *\n * Scale: 100-unit ordinal steps with 50-unit half-steps reserved for future sizes.\n * Convention matches Dialtone's existing token scales (dt-size-*, dt-icon-size-*, colors).\n *\n * @example\n *   <DtButton :size=\"200\" />   <!-- equivalent to size=\"sm\" -->\n *   <DtButton :size=\"250\" />   <!-- future \"smedium\" -->\n */\n\n// Numeric → t-shirt label mapping\nexport const COMPONENT_SIZES = {\n  100: 'xs',\n  200: 'sm',\n  300: 'md',\n  400: 'lg',\n  500: 'xl',\n};\n\n// Extended sizes for Text headline kind\nexport const TEXT_HEADLINE_SIZES = {\n  ...COMPONENT_SIZES,\n  600: '2xl',\n  700: '3xl',\n};\n\nexport default {\n  COMPONENT_SIZES,\n  TEXT_HEADLINE_SIZES,\n};\n"],"mappings":";AAYA,IAAa,IAAkB;CAC7B,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACN,EAGY,IAAsB;CACjC,GAAG;CACH,KAAK;CACL,KAAK;CACN,EAED,IAAe;CACb;CACA;CACD"}

package/dist/common/mixins/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./dom.cjs`),t=require(`./input.cjs`),n=require(`./input-group.cjs`),r=require(`./keyboard-list-navigation.cjs`),i=require(`./modal.cjs`),a=require(`./skeleton.cjs`);exports.DtCheckableInputMixin=t.CheckableMixin,exports.DtDOMMixin=e.default,exports.DtGroupableInputMixin=t.GroupableMixin,exports.DtInputGroupMixin=n.InputGroupMixin,exports.DtInputMixin=t.InputMixin,exports.DtKeyboardListNavigationMixin=r.default,exports.DtModalMixin=i.default,exports.DtSkeletonMixin=a.default;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./dom.cjs`),t=require(`./input.cjs`),n=require(`./input-group.cjs`),r=require(`./keyboard-list-navigation.cjs`),i=require(`./modal.cjs`),a=require(`./skeleton.cjs`),o=require(`./mode.cjs`);exports.DtCheckableInputMixin=t.CheckableMixin,exports.DtDOMMixin=e.default,exports.DtGroupableInputMixin=t.GroupableMixin,exports.DtInputGroupMixin=n.InputGroupMixin,exports.DtInputMixin=t.InputMixin,exports.DtKeyboardListNavigationMixin=r.default,exports.DtModalMixin=i.default,exports.DtModeMixin=o.default,exports.DtSkeletonMixin=a.default;

package/dist/common/mixins/index.d.ts

@@ -3,5 +3,6 @@ export { InputGroupMixin as DtInputGroupMixin } from './input_group';
 export { default as DtKeyboardListNavigationMixin } from './keyboard_list_navigation';
 export { default as DtModalMixin } from './modal';
 export { default as DtSkeletonMixin } from './skeleton';
+export { default as DtModeMixin } from './mode';
 export { InputMixin as DtInputMixin, CheckableMixin as DtCheckableInputMixin, GroupableMixin as DtGroupableInputMixin } from './input';
 //# sourceMappingURL=index.d.ts.map

package/dist/common/mixins/index.js

@@ -4,4 +4,5 @@ import { InputGroupMixin as i } from "./input-group.js";
 import a from "./keyboard-list-navigation.js";
 import o from "./modal.js";
 import s from "./skeleton.js";
-export { t as DtCheckableInputMixin, e as DtDOMMixin, n as DtGroupableInputMixin, i as DtInputGroupMixin, r as DtInputMixin, a as DtKeyboardListNavigationMixin, o as DtModalMixin, s as DtSkeletonMixin };
+import c from "./mode.js";
+export { t as DtCheckableInputMixin, e as DtDOMMixin, n as DtGroupableInputMixin, i as DtInputGroupMixin, r as DtInputMixin, a as DtKeyboardListNavigationMixin, o as DtModalMixin, c as DtModeMixin, s as DtSkeletonMixin };

package/dist/common/mixins/input-group.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../validators/index.cjs`),t=require(`../utils/index.cjs`),n=require(`../../lib/validation-messages/validation-messages.cjs`);let r=require(`vue`);var i={components:{DtValidationMessages:n.default},provide(){return{groupContext:this.provideObj,setGroupValue:this.setGroupValue}},props:{id:{type:String,default(){return t.getUniqueString()}},value:{type:[String,Number,Boolean,Object],default:null},name:{type:String,required:!0},legend:{type:String,default:``},disabled:{type:Boolean,default:!1},messages:{type:Array,default:()=>[],validator:t=>e.validationMessageValidator(t)},showMessages:{type:Boolean,default:!0},legendClass:{type:[String,Array,Object],default:``},messagesClass:{type:[String,Array,Object],default:``},legendChildProps:{type:Object,default:()=>({})},messagesChildProps:{type:Object,default:()=>({})}},emits:[`input`],data(){let e=t.formatMessages(this.messages);return{provideObj:{name:this.name,disabled:this.disabled,validationState:t.getValidationState(e)}}},computed:{formattedMessages(){return t.formatMessages(this.messages)},validationState(){return t.getValidationState(this.formattedMessages)}},watch:{disabled(e){this.provideObj.disabled=e},validationState(e){this.provideObj.validationState=e}},methods:{setGroupValue(e){this.internalValue=e,this.$emit(`input`,e)}},mounted(){!this.legend&&!this.$slots.legend&&!this.$attrs[`aria-label`]&&(0,r.warn)(`It is expected that an aria-label is provided when there is no legend.`,this)}},a={InputGroupMixin:i};exports.InputGroupMixin=i,exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../validators/index.cjs`),t=require(`../utils/index.cjs`),n=require(`../../lib/validation-messages/validation-messages.cjs`);let r=require(`vue`);var i={components:{DtValidationMessages:n.default},provide(){return{groupContext:this.provideObj,setGroupValue:this.setGroupValue}},props:{id:{type:String,default(){return t.getUniqueString()}},value:{type:[String,Number,Boolean,Object],default:null},name:{type:String,required:!0},legend:{type:String,default:``},disabled:{type:Boolean,default:!1},messages:{type:Array,default:()=>[],validator:t=>e.validationMessageValidator(t)},showMessages:{type:Boolean,default:!0},legendClass:{type:[String,Array,Object],default:``},messagesClass:{type:[String,Array,Object],default:``},legendChildProps:{type:Object,default:()=>({})},messagesChildProps:{type:Object,default:()=>({})}},emits:[`update:modelValue`],data(){let e=t.formatMessages(this.messages);return{provideObj:{name:this.name,disabled:this.disabled,validationState:t.getValidationState(e)}}},computed:{formattedMessages(){return t.formatMessages(this.messages)},validationState(){return t.getValidationState(this.formattedMessages)}},watch:{disabled(e){this.provideObj.disabled=e},validationState(e){this.provideObj.validationState=e}},methods:{setGroupValue(e){this.internalValue=e,this.$emit(`update:modelValue`,e)}},mounted(){!this.legend&&!this.$slots.legend&&!this.$attrs[`aria-label`]&&(0,r.warn)(`It is expected that an aria-label is provided when there is no legend.`,this)}},a={InputGroupMixin:i};exports.InputGroupMixin=i,exports.default=a;
 //# sourceMappingURL=input-group.cjs.map

package/dist/common/mixins/input-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.cjs","names":["getUniqueString","validationMessageValidator","formatMessages","getValidationState"],"sources":["../../../common/mixins/input_group.js"],"sourcesContent":["import { warn } from 'vue';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  getUniqueString,\n  formatMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * This mixin provides a base provide obj and set of components, props, computed, watchers and data attributes that are\n * commonly used in our input group components.\n * @displayName Input Group Mixin\n */\nexport const InputGroupMixin = {\n  components: { DtValidationMessages },\n\n  // provide data to slotted components\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setGroupValue: this.setGroupValue,\n    };\n  },\n\n  props: {\n    /**\n     * The id of the input group\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * The value of the input group\n     */\n    value: {\n      type: [String, Number, Boolean, Object],\n      default: null,\n    },\n\n    /**\n     * The name of the input group\n     */\n    name: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The legend of the input group\n     */\n    legend: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disables the input group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation messages\n     */\n    messages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the legend element\n     */\n    legendClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the messages container\n     */\n    messagesClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the legend element\n     */\n    legendChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the messages container\n     */\n    messagesChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {KeyboardEvent}\n     */\n    'input',\n  ],\n\n  data () {\n    const formattedMessages = formatMessages(this.messages);\n\n    return {\n      // wrap values in object to make reactive\n      provideObj: {\n        name: this.name,\n        disabled: this.disabled,\n        validationState: getValidationState(formattedMessages),\n      },\n    };\n  },\n\n  computed: {\n    formattedMessages () {\n      return formatMessages(this.messages);\n    },\n\n    validationState () {\n      return getValidationState(this.formattedMessages);\n    },\n  },\n\n  watch: {\n    disabled (newDisabled) {\n      this.provideObj.disabled = newDisabled;\n    },\n\n    validationState (newValidationState) {\n      this.provideObj.validationState = newValidationState;\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted input components.\n     * slotted input components will change this value and need to emit new value up.\n     */\n    setGroupValue (newValue) {\n      this.internalValue = newValue;\n      this.$emit('input', newValue);\n    },\n  },\n\n  mounted () {\n    if (!this.legend && !this.$slots.legend && !this.$attrs['aria-label']) {\n      warn('It is expected that an aria-label is provided when there is no legend.', this);\n    }\n  },\n};\n\nexport default {\n  InputGroupMixin,\n};\n"],"mappings":"sSAcA,IAAa,EAAkB,CAC7B,WAAY,CAAE,qBAAA,EAAA,QAAsB,CAGpC,SAAW,CACT,MAAO,CACL,aAAc,KAAK,WACnB,cAAe,KAAK,cACrB,EAGH,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAW,CACT,OAAOA,EAAAA,iBAAiB,EAE3B,CAKD,MAAO,CACL,KAAM,CAAC,OAAQ,OAAQ,QAAS,OAAO,CACvC,QAAS,KACV,CAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CAKD,OAAQ,CACN,KAAM,OACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,MACN,YAAe,EAAE,CACjB,UAAW,GAAYC,EAAAA,2BAA2B,EAAS,CAC5D,CAMD,aAAc,CACZ,KAAM,QACN,QAAS,GACV,CAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,iBAAkB,CAChB,KAAM,OACN,aAAgB,EAAE,EACnB,CAKD,mBAAoB,CAClB,KAAM,OACN,aAAgB,EAAE,EACnB,CACF,CAED,MAAO,CAOL,QACD,CAED,MAAQ,CACN,IAAM,EAAoBC,EAAAA,eAAe,KAAK,SAAS,CAEvD,MAAO,CAEL,WAAY,CACV,KAAM,KAAK,KACX,SAAU,KAAK,SACf,gBAAiBC,EAAAA,mBAAmB,EAAkB,CACvD,CACF,EAGH,SAAU,CACR,mBAAqB,CACnB,OAAOD,EAAAA,eAAe,KAAK,SAAS,EAGtC,iBAAmB,CACjB,OAAOC,EAAAA,mBAAmB,KAAK,kBAAkB,EAEpD,CAED,MAAO,CACL,SAAU,EAAa,CACrB,KAAK,WAAW,SAAW,GAG7B,gBAAiB,EAAoB,CACnC,KAAK,WAAW,gBAAkB,GAErC,CAED,QAAS,CAKP,cAAe,EAAU,CACvB,KAAK,cAAgB,EACrB,KAAK,MAAM,QAAS,EAAS,EAEhC,CAED,SAAW,CACL,CAAC,KAAK,QAAU,CAAC,KAAK,OAAO,QAAU,CAAC,KAAK,OAAO,gBACtD,EAAA,EAAA,MAAK,yEAA0E,KAAK,EAGzF,CAED,EAAe,CACb,kBACD"}
+{"version":3,"file":"input-group.cjs","names":["getUniqueString","validationMessageValidator","formatMessages","getValidationState"],"sources":["../../../common/mixins/input_group.js"],"sourcesContent":["import { warn } from 'vue';\nimport { DtValidationMessages } from '@/components/ValidationMessages';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  getUniqueString,\n  formatMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * This mixin provides a base provide obj and set of components, props, computed, watchers and data attributes that are\n * commonly used in our input group components.\n * @displayName Input Group Mixin\n */\nexport const InputGroupMixin = {\n  components: { DtValidationMessages },\n\n  // provide data to slotted components\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setGroupValue: this.setGroupValue,\n    };\n  },\n\n  props: {\n    /**\n     * The id of the input group\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * The value of the input group\n     */\n    value: {\n      type: [String, Number, Boolean, Object],\n      default: null,\n    },\n\n    /**\n     * The name of the input group\n     */\n    name: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The legend of the input group\n     */\n    legend: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disables the input group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation messages\n     */\n    messages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the legend element\n     */\n    legendClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the messages container\n     */\n    messagesClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the legend element\n     */\n    legendChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the messages container\n     */\n    messagesChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event update:modelValue\n     * @type {String | Number | Boolean | Object}\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    const formattedMessages = formatMessages(this.messages);\n\n    return {\n      // wrap values in object to make reactive\n      provideObj: {\n        name: this.name,\n        disabled: this.disabled,\n        validationState: getValidationState(formattedMessages),\n      },\n    };\n  },\n\n  computed: {\n    formattedMessages () {\n      return formatMessages(this.messages);\n    },\n\n    validationState () {\n      return getValidationState(this.formattedMessages);\n    },\n  },\n\n  watch: {\n    disabled (newDisabled) {\n      this.provideObj.disabled = newDisabled;\n    },\n\n    validationState (newValidationState) {\n      this.provideObj.validationState = newValidationState;\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted input components.\n     * slotted input components will change this value and need to emit new value up.\n     */\n    setGroupValue (newValue) {\n      this.internalValue = newValue;\n      this.$emit('update:modelValue', newValue);\n    },\n  },\n\n  mounted () {\n    if (!this.legend && !this.$slots.legend && !this.$attrs['aria-label']) {\n      warn('It is expected that an aria-label is provided when there is no legend.', this);\n    }\n  },\n};\n\nexport default {\n  InputGroupMixin,\n};\n"],"mappings":"sSAcA,IAAa,EAAkB,CAC7B,WAAY,CAAE,qBAAA,EAAA,QAAsB,CAGpC,SAAW,CACT,MAAO,CACL,aAAc,KAAK,WACnB,cAAe,KAAK,cACrB,EAGH,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAW,CACT,OAAOA,EAAAA,iBAAiB,EAE3B,CAKD,MAAO,CACL,KAAM,CAAC,OAAQ,OAAQ,QAAS,OAAO,CACvC,QAAS,KACV,CAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CAKD,OAAQ,CACN,KAAM,OACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,MACN,YAAe,EAAE,CACjB,UAAW,GAAYC,EAAAA,2BAA2B,EAAS,CAC5D,CAMD,aAAc,CACZ,KAAM,QACN,QAAS,GACV,CAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,iBAAkB,CAChB,KAAM,OACN,aAAgB,EAAE,EACnB,CAKD,mBAAoB,CAClB,KAAM,OACN,aAAgB,EAAE,EACnB,CACF,CAED,MAAO,CAOL,oBACD,CAED,MAAQ,CACN,IAAM,EAAoBC,EAAAA,eAAe,KAAK,SAAS,CAEvD,MAAO,CAEL,WAAY,CACV,KAAM,KAAK,KACX,SAAU,KAAK,SACf,gBAAiBC,EAAAA,mBAAmB,EAAkB,CACvD,CACF,EAGH,SAAU,CACR,mBAAqB,CACnB,OAAOD,EAAAA,eAAe,KAAK,SAAS,EAGtC,iBAAmB,CACjB,OAAOC,EAAAA,mBAAmB,KAAK,kBAAkB,EAEpD,CAED,MAAO,CACL,SAAU,EAAa,CACrB,KAAK,WAAW,SAAW,GAG7B,gBAAiB,EAAoB,CACnC,KAAK,WAAW,gBAAkB,GAErC,CAED,QAAS,CAKP,cAAe,EAAU,CACvB,KAAK,cAAgB,EACrB,KAAK,MAAM,oBAAqB,EAAS,EAE5C,CAED,SAAW,CACL,CAAC,KAAK,QAAU,CAAC,KAAK,OAAO,QAAU,CAAC,KAAK,OAAO,gBACtD,EAAA,EAAA,MAAK,yEAA0E,KAAK,EAGzF,CAED,EAAe,CACb,kBACD"}

package/dist/common/mixins/input-group.js

@@ -73,7 +73,7 @@ var o = {
 			default: () => ({})
 		}
 	},
-	emits: ["input"],
+	emits: ["update:modelValue"],
 	data() {
 		let e = t(this.messages);
 		return { provideObj: {
@@ -99,7 +99,7 @@ var o = {
 		}
 	},
 	methods: { setGroupValue(e) {
-		this.internalValue = e, this.$emit("input", e);
+		this.internalValue = e, this.$emit("update:modelValue", e);
 	} },
 	mounted() {
 		!this.legend && !this.$slots.legend && !this.$attrs["aria-label"] && a("It is expected that an aria-label is provided when there is no legend.", this);

package/dist/common/mixins/input-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","names":[],"sources":["../../../common/mixins/input_group.js"],"sourcesContent":["import { warn } from 'vue';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  getUniqueString,\n  formatMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * This mixin provides a base provide obj and set of components, props, computed, watchers and data attributes that are\n * commonly used in our input group components.\n * @displayName Input Group Mixin\n */\nexport const InputGroupMixin = {\n  components: { DtValidationMessages },\n\n  // provide data to slotted components\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setGroupValue: this.setGroupValue,\n    };\n  },\n\n  props: {\n    /**\n     * The id of the input group\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * The value of the input group\n     */\n    value: {\n      type: [String, Number, Boolean, Object],\n      default: null,\n    },\n\n    /**\n     * The name of the input group\n     */\n    name: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The legend of the input group\n     */\n    legend: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disables the input group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation messages\n     */\n    messages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the legend element\n     */\n    legendClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the messages container\n     */\n    messagesClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the legend element\n     */\n    legendChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the messages container\n     */\n    messagesChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {KeyboardEvent}\n     */\n    'input',\n  ],\n\n  data () {\n    const formattedMessages = formatMessages(this.messages);\n\n    return {\n      // wrap values in object to make reactive\n      provideObj: {\n        name: this.name,\n        disabled: this.disabled,\n        validationState: getValidationState(formattedMessages),\n      },\n    };\n  },\n\n  computed: {\n    formattedMessages () {\n      return formatMessages(this.messages);\n    },\n\n    validationState () {\n      return getValidationState(this.formattedMessages);\n    },\n  },\n\n  watch: {\n    disabled (newDisabled) {\n      this.provideObj.disabled = newDisabled;\n    },\n\n    validationState (newValidationState) {\n      this.provideObj.validationState = newValidationState;\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted input components.\n     * slotted input components will change this value and need to emit new value up.\n     */\n    setGroupValue (newValue) {\n      this.internalValue = newValue;\n      this.$emit('input', newValue);\n    },\n  },\n\n  mounted () {\n    if (!this.legend && !this.$slots.legend && !this.$attrs['aria-label']) {\n      warn('It is expected that an aria-label is provided when there is no legend.', this);\n    }\n  },\n};\n\nexport default {\n  InputGroupMixin,\n};\n"],"mappings":";;;;;AAcA,IAAa,IAAkB;CAC7B,YAAY,EAAE,sBAAA,GAAsB;CAGpC,UAAW;AACT,SAAO;GACL,cAAc,KAAK;GACnB,eAAe,KAAK;GACrB;;CAGH,OAAO;EAIL,IAAI;GACF,MAAM;GACN,UAAW;AACT,WAAO,GAAiB;;GAE3B;EAKD,OAAO;GACL,MAAM;IAAC;IAAQ;IAAQ;IAAS;IAAO;GACvC,SAAS;GACV;EAKD,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EAKD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,eAAe,EAAE;GACjB,YAAW,MAAY,EAA2B,EAAS;GAC5D;EAMD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAKD,aAAa;GACX,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,eAAe;GACb,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,kBAAkB;GAChB,MAAM;GACN,gBAAgB,EAAE;GACnB;EAKD,oBAAoB;GAClB,MAAM;GACN,gBAAgB,EAAE;GACnB;EACF;CAED,OAAO,CAOL,QACD;CAED,OAAQ;EACN,IAAM,IAAoB,EAAe,KAAK,SAAS;AAEvD,SAAO,EAEL,YAAY;GACV,MAAM,KAAK;GACX,UAAU,KAAK;GACf,iBAAiB,EAAmB,EAAkB;GACvD,EACF;;CAGH,UAAU;EACR,oBAAqB;AACnB,UAAO,EAAe,KAAK,SAAS;;EAGtC,kBAAmB;AACjB,UAAO,EAAmB,KAAK,kBAAkB;;EAEpD;CAED,OAAO;EACL,SAAU,GAAa;AACrB,QAAK,WAAW,WAAW;;EAG7B,gBAAiB,GAAoB;AACnC,QAAK,WAAW,kBAAkB;;EAErC;CAED,SAAS,EAKP,cAAe,GAAU;AAEvB,EADA,KAAK,gBAAgB,GACrB,KAAK,MAAM,SAAS,EAAS;IAEhC;CAED,UAAW;AACT,EAAI,CAAC,KAAK,UAAU,CAAC,KAAK,OAAO,UAAU,CAAC,KAAK,OAAO,iBACtD,EAAK,0EAA0E,KAAK;;CAGzF,EAED,IAAe,EACb,oBACD"}
+{"version":3,"file":"input-group.js","names":[],"sources":["../../../common/mixins/input_group.js"],"sourcesContent":["import { warn } from 'vue';\nimport { DtValidationMessages } from '@/components/ValidationMessages';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  getUniqueString,\n  formatMessages,\n  getValidationState,\n} from '@/common/utils';\n\n/**\n * This mixin provides a base provide obj and set of components, props, computed, watchers and data attributes that are\n * commonly used in our input group components.\n * @displayName Input Group Mixin\n */\nexport const InputGroupMixin = {\n  components: { DtValidationMessages },\n\n  // provide data to slotted components\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setGroupValue: this.setGroupValue,\n    };\n  },\n\n  props: {\n    /**\n     * The id of the input group\n     */\n    id: {\n      type: String,\n      default () {\n        return getUniqueString();\n      },\n    },\n\n    /**\n     * The value of the input group\n     */\n    value: {\n      type: [String, Number, Boolean, Object],\n      default: null,\n    },\n\n    /**\n     * The name of the input group\n     */\n    name: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The legend of the input group\n     */\n    legend: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Disables the input group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation messages\n     */\n    messages: {\n      type: Array,\n      default: () => [],\n      validator: messages => validationMessageValidator(messages),\n    },\n\n    /**\n     * Show validation messages\n     * @values true, false\n     */\n    showMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the legend element\n     */\n    legendClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the messages container\n     */\n    messagesClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the legend element\n     */\n    legendChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * A set of props that are passed into the messages container\n     */\n    messagesChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event update:modelValue\n     * @type {String | Number | Boolean | Object}\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    const formattedMessages = formatMessages(this.messages);\n\n    return {\n      // wrap values in object to make reactive\n      provideObj: {\n        name: this.name,\n        disabled: this.disabled,\n        validationState: getValidationState(formattedMessages),\n      },\n    };\n  },\n\n  computed: {\n    formattedMessages () {\n      return formatMessages(this.messages);\n    },\n\n    validationState () {\n      return getValidationState(this.formattedMessages);\n    },\n  },\n\n  watch: {\n    disabled (newDisabled) {\n      this.provideObj.disabled = newDisabled;\n    },\n\n    validationState (newValidationState) {\n      this.provideObj.validationState = newValidationState;\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted input components.\n     * slotted input components will change this value and need to emit new value up.\n     */\n    setGroupValue (newValue) {\n      this.internalValue = newValue;\n      this.$emit('update:modelValue', newValue);\n    },\n  },\n\n  mounted () {\n    if (!this.legend && !this.$slots.legend && !this.$attrs['aria-label']) {\n      warn('It is expected that an aria-label is provided when there is no legend.', this);\n    }\n  },\n};\n\nexport default {\n  InputGroupMixin,\n};\n"],"mappings":";;;;;AAcA,IAAa,IAAkB;CAC7B,YAAY,EAAE,sBAAA,GAAsB;CAGpC,UAAW;AACT,SAAO;GACL,cAAc,KAAK;GACnB,eAAe,KAAK;GACrB;;CAGH,OAAO;EAIL,IAAI;GACF,MAAM;GACN,UAAW;AACT,WAAO,GAAiB;;GAE3B;EAKD,OAAO;GACL,MAAM;IAAC;IAAQ;IAAQ;IAAS;IAAO;GACvC,SAAS;GACV;EAKD,MAAM;GACJ,MAAM;GACN,UAAU;GACX;EAKD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,eAAe,EAAE;GACjB,YAAW,MAAY,EAA2B,EAAS;GAC5D;EAMD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAKD,aAAa;GACX,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,eAAe;GACb,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,kBAAkB;GAChB,MAAM;GACN,gBAAgB,EAAE;GACnB;EAKD,oBAAoB;GAClB,MAAM;GACN,gBAAgB,EAAE;GACnB;EACF;CAED,OAAO,CAOL,oBACD;CAED,OAAQ;EACN,IAAM,IAAoB,EAAe,KAAK,SAAS;AAEvD,SAAO,EAEL,YAAY;GACV,MAAM,KAAK;GACX,UAAU,KAAK;GACf,iBAAiB,EAAmB,EAAkB;GACvD,EACF;;CAGH,UAAU;EACR,oBAAqB;AACnB,UAAO,EAAe,KAAK,SAAS;;EAGtC,kBAAmB;AACjB,UAAO,EAAmB,KAAK,kBAAkB;;EAEpD;CAED,OAAO;EACL,SAAU,GAAa;AACrB,QAAK,WAAW,WAAW;;EAG7B,gBAAiB,GAAoB;AACnC,QAAK,WAAW,kBAAkB;;EAErC;CAED,SAAS,EAKP,cAAe,GAAU;AAEvB,EADA,KAAK,gBAAgB,GACrB,KAAK,MAAM,qBAAqB,EAAS;IAE5C;CAED,UAAW;AACT,EAAI,CAAC,KAAK,UAAU,CAAC,KAAK,OAAO,UAAU,CAAC,KAAK,OAAO,iBACtD,EAAK,0EAA0E,KAAK;;CAGzF,EAED,IAAe,EACb,oBACD"}

package/dist/common/mixins/input.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../constants/index.cjs`),t=require(`../validators/index.cjs`),n=require(`../utils/index.cjs`);let r=require(`vue`);var i={inheritAttrs:!1,props:{label:{type:String,default:``},name:{type:String,default:``},value:{type:[String,Number,Boolean,Object],default:null},description:{type:String,default:``},disabled:{type:Boolean,default:!1},validationState:{type:String,default:``,validator:t=>t?Object.values(e.VALIDATION_MESSAGE_TYPES).includes(t):!0},inputClass:{type:[String,Array,Object],default:``},labelClass:{type:[String,Array,Object],default:``},descriptionClass:{type:[String,Array,Object],default:``},labelChildProps:{type:Object,default:()=>({})},descriptionChildProps:{type:Object,default:()=>({})},rootClass:{type:[String,Object,Array],default:``}},data(){return{internalDisabled:this.disabled,internalValidationState:this.validationState}},watch:{disabled(e){this.internalDisabled=e},validationState(e){this.internalValidationState=e}},methods:{validateInputLabels(e,t){!e&&!t&&(0,r.warn)(`You must provide an aria-label when there is no label passed`,this)}}},a={props:{modelValue:{type:Boolean,default:!1},indeterminate:{type:Boolean,default:!1},value:{type:[String,Number,Boolean],default:null}},data(){return{internalChecked:this.modelValue,internalIndeterminate:this.indeterminate}},watch:{modelValue(e){this.internalChecked=e},indeterminate(e){this.internalIndeterminate=e}}},o={inject:{groupContext:{default:{}},setGroupValue:{default:()=>()=>{}}},data(){return{internalValue:this.value}},computed:{hasGroup(){return Object.prototype.hasOwnProperty.call(this.groupContext,`name`)},groupName(){return this.groupContext?.name??``},groupValue(){return this.groupContext?.value},groupDisabled(){return this.groupContext?.disabled??!1},groupValidationState(){return this.groupContext?.validationState??null},internalName(){return this.name||this.groupName}},watch:{value(e){this.internalValue=e},groupValue:{immediate:!0,handler(e){this.hasGroup&&(this.internalValue=e)}},groupDisabled:{immediate:!0,handler(e){this.hasGroup&&(this.internalDisabled=this.disabled||e)}},groupValidationState:{immediate:!0,handler(e){this.hasGroup&&(this.internalValidationState=e||this.validationState)}}},created(){let e=Object.prototype.hasOwnProperty.call(this.groupContext,`name`),t=this.groupContext?.name;this.name&&e&&t!==this.name&&(0,r.warn)(`Component is being used inside a Group. Did you mean to override the name prop value (${t}) with (${this.name})? It is recommended to only set name at the Group level.`,this)}},s={props:{messagesClass:{type:[String,Array,Object],default:``},messagesChildProps:{type:Object,default:()=>({})},showMessages:{type:Boolean,default:!0},messages:{type:Array,default:()=>[],validator:e=>t.validationMessageValidator(e)}},computed:{formattedMessages(){return n.formatMessages(this.messages)}}},c={InputMixin:i,CheckableMixin:a,GroupableMixin:o,MessagesMixin:s};exports.CheckableMixin=a,exports.GroupableMixin=o,exports.InputMixin=i,exports.MessagesMixin=s,exports.default=c;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../constants/index.cjs`),t=require(`../validators/index.cjs`),n=require(`../utils/index.cjs`);let r=require(`vue`);var i={inheritAttrs:!1,props:{label:{type:String,default:``},name:{type:String,default:``},value:{type:[String,Number,Boolean,Object],default:null},description:{type:String,default:``},disabled:{type:Boolean,default:!1},validationState:{type:String,default:``,validator:t=>t?Object.values(e.VALIDATION_MESSAGE_TYPES).includes(t):!0},inputClass:{type:[String,Array,Object],default:``},labelClass:{type:[String,Array,Object],default:``},descriptionClass:{type:[String,Array,Object],default:``},labelChildProps:{type:Object,default:()=>({})},descriptionChildProps:{type:Object,default:()=>({})}},data(){return{internalDisabled:this.disabled,internalValidationState:this.validationState}},watch:{disabled(e){this.internalDisabled=e},validationState(e){this.internalValidationState=e}},methods:{validateInputLabels(e,t){!e&&!t&&(0,r.warn)(`You must provide an aria-label when there is no label passed`,this)}}},a={props:{modelValue:{type:Boolean,default:!1},indeterminate:{type:Boolean,default:!1},value:{type:[String,Number,Boolean],default:null}},data(){return{internalChecked:this.modelValue,internalIndeterminate:this.indeterminate}},watch:{modelValue(e){this.internalChecked=e},indeterminate(e){this.internalIndeterminate=e}}},o={inject:{groupContext:{default:{}},setGroupValue:{default:()=>()=>{}}},data(){return{internalValue:this.value}},computed:{hasGroup(){return Object.prototype.hasOwnProperty.call(this.groupContext,`name`)},groupName(){return this.groupContext?.name??``},groupValue(){return this.groupContext?.value},groupDisabled(){return this.groupContext?.disabled??!1},groupValidationState(){return this.groupContext?.validationState??null},internalName(){return this.name||this.groupName}},watch:{value(e){this.internalValue=e},groupValue:{immediate:!0,handler(e){this.hasGroup&&(this.internalValue=e)}},groupDisabled:{immediate:!0,handler(e){this.hasGroup&&(this.internalDisabled=this.disabled||e)}},groupValidationState:{immediate:!0,handler(e){this.hasGroup&&(this.internalValidationState=e||this.validationState)}}},created(){let e=Object.prototype.hasOwnProperty.call(this.groupContext,`name`),t=this.groupContext?.name;this.name&&e&&t!==this.name&&(0,r.warn)(`Component is being used inside a Group. Did you mean to override the name prop value (${t}) with (${this.name})? It is recommended to only set name at the Group level.`,this)}},s={props:{messagesClass:{type:[String,Array,Object],default:``},messagesChildProps:{type:Object,default:()=>({})},showMessages:{type:Boolean,default:!0},messages:{type:Array,default:()=>[],validator:e=>t.validationMessageValidator(e)}},computed:{formattedMessages(){return n.formatMessages(this.messages)}}},c={InputMixin:i,CheckableMixin:a,GroupableMixin:o,MessagesMixin:s};exports.CheckableMixin=a,exports.GroupableMixin=o,exports.InputMixin=i,exports.MessagesMixin=s,exports.default=c;
 //# sourceMappingURL=input.cjs.map