@dialpad/dialtone-vue 3.222.0-next.2 → 3.222.0

package/dist/lib/focustrap-directive/focustrap.js

@@ -1,96 +0,0 @@
-import { getFirstFocusCandidate as e, getTabbableElements as t } from "./focustrap-utils.js";
-import { FOCUSTRAP_DEFAULTS as n, FOCUSTRAP_STATE_KEY as r } from "./focustrap-constants.js";
-//#region directives/focustrap_directive/focustrap.js
-var i = {
-	name: "dt-focustrap-directive",
-	install(e) {
-		e.directive("dt-focustrap", {
-			mounted(e, t) {
-				let n = a(t.value);
-				e[r] = o(), n.active && s(e, n);
-			},
-			updated(e, t) {
-				let n = a(t.oldValue), i = a(t.value);
-				e[r] && (!n.active && i.active ? s(e, i) : n.active && !i.active && c(e));
-			},
-			unmounted(e) {
-				e[r]?.active && c(e), l(e), delete e[r];
-			}
-		});
-	}
-};
-function a(e) {
-	return e == null || e === !0 ? {
-		...n,
-		active: !0
-	} : e === !1 ? {
-		...n,
-		active: !1
-	} : typeof e == "object" ? {
-		...n,
-		...e
-	} : {
-		...n,
-		active: !!e
-	};
-}
-function o() {
-	return {
-		active: !1,
-		onKeydown: null,
-		previousActiveElement: null,
-		restoreFocus: !0,
-		addedTabindex: !1
-	};
-}
-function s(e, t) {
-	let n = e[r];
-	!n || n.active || (n.active = !0, n.restoreFocus = t.restoreFocus, n.previousActiveElement = document.activeElement, n.onKeydown = (t) => p(t, e), e.addEventListener("keydown", n.onKeydown), f(e, t));
-}
-function c(e) {
-	let t = e[r];
-	if (!(!t || !t.active)) {
-		if (t.active = !1, l(e), t.restoreFocus && t.previousActiveElement) try {
-			t.previousActiveElement.focus({ preventScroll: !0 });
-		} catch {}
-		t.previousActiveElement = null;
-	}
-}
-function l(e) {
-	let t = e[r];
-	t && (t.onKeydown && (e.removeEventListener("keydown", t.onKeydown), t.onKeydown = null), t.addedTabindex && (e.removeAttribute("tabindex"), t.addedTabindex = !1));
-}
-function u(n, r) {
-	return r === "auto" || r == null ? e(t(n, { includeNegativeTabIndex: !0 })) : typeof r == "string" ? n.querySelector(r) : r instanceof HTMLElement ? r : null;
-}
-function d(e, t) {
-	if (t) {
-		t.focus({ preventScroll: !0 });
-		return;
-	}
-	if (!e.hasAttribute("tabindex")) {
-		e.setAttribute("tabindex", "-1");
-		let t = e[r];
-		t && (t.addedTabindex = !0);
-	}
-	e.focus({ preventScroll: !0 });
-}
-function f(e, t) {
-	t.initialFocus !== !1 && Promise.resolve().then(() => {
-		e[r]?.active && d(e, u(e, t.initialFocus));
-	});
-}
-function p(e, n) {
-	if (e.key !== "Tab") return;
-	let r = t(n);
-	if (!r.length) {
-		e.preventDefault();
-		return;
-	}
-	let i = r[0], a = r[r.length - 1];
-	e.shiftKey ? document.activeElement === i && (a.focus({ preventScroll: !0 }), e.preventDefault()) : document.activeElement === a && (i.focus({ preventScroll: !0 }), e.preventDefault());
-}
-//#endregion
-export { i as DtFocustrapDirective, i as default };
-
-//# sourceMappingURL=focustrap.js.map

package/dist/lib/focustrap-directive/focustrap.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"focustrap.js","names":[],"sources":["../../../directives/focustrap_directive/focustrap.js"],"sourcesContent":["import { getTabbableElements, getFirstFocusCandidate } from './focustrap_utils.js';\nimport { FOCUSTRAP_DEFAULTS, FOCUSTRAP_STATE_KEY } from './focustrap_constants.js';\n\n/**\n * v-dt-focustrap directive — trap Tab/Shift+Tab within a container element.\n *\n * Manages initial focus, Tab boundary wrapping, and focus restoration.\n * Does NOT handle Escape or click-outside — that's the component's responsibility.\n *\n * @example\n * // Boolean binding — activate when truthy\n * <div role=\"dialog\" v-dt-focustrap=\"isOpen\" aria-label=\"Settings\">\n *\n * // Object binding — full configuration\n * <div role=\"dialog\" v-dt-focustrap=\"{ active: isOpen, initialFocus: '#name-input' }\">\n *\n * // Always active (no binding value)\n * <div role=\"alertdialog\" v-dt-focustrap aria-label=\"Confirm\">\n *\n * @see https://dialtone.dialpad.com/vue/next/?path=/docs/directives-focustrap--docs\n */\nexport const DtFocustrapDirective = {\n  name: 'dt-focustrap-directive',\n\n  install (app) {\n    app.directive('dt-focustrap', {\n      mounted (el, binding) {\n        const config = resolveConfig(binding.value);\n        el[FOCUSTRAP_STATE_KEY] = createState();\n\n        if (config.active) {\n          activate(el, config);\n        }\n      },\n\n      updated (el, binding) {\n        const prev = resolveConfig(binding.oldValue);\n        const next = resolveConfig(binding.value);\n        const state = el[FOCUSTRAP_STATE_KEY];\n\n        if (!state) return;\n\n        if (!prev.active && next.active) {\n          activate(el, next);\n        } else if (prev.active && !next.active) {\n          deactivate(el);\n        }\n      },\n\n      unmounted (el) {\n        const state = el[FOCUSTRAP_STATE_KEY];\n        if (state?.active) {\n          deactivate(el);\n        }\n        cleanup(el);\n        delete el[FOCUSTRAP_STATE_KEY];\n      },\n    });\n  },\n};\n\n// ── Config resolution ───────────────────────────────────────\n\nfunction resolveConfig (value) {\n  if (value == null || value === true) {\n    return { ...FOCUSTRAP_DEFAULTS, active: true };\n  }\n  if (value === false) {\n    return { ...FOCUSTRAP_DEFAULTS, active: false };\n  }\n  if (typeof value === 'object') {\n    return { ...FOCUSTRAP_DEFAULTS, ...value };\n  }\n  return { ...FOCUSTRAP_DEFAULTS, active: Boolean(value) };\n}\n\n// ── State management ────────────────────────────────────────\n\nfunction createState () {\n  return {\n    active: false,\n    onKeydown: null,\n    previousActiveElement: null,\n    restoreFocus: true,\n    addedTabindex: false,\n  };\n}\n\n// ── Activate / Deactivate ───────────────────────────────────\n\nfunction activate (el, config) {\n  const state = el[FOCUSTRAP_STATE_KEY];\n  if (!state || state.active) return;\n\n  state.active = true;\n  state.restoreFocus = config.restoreFocus;\n  state.previousActiveElement = document.activeElement;\n\n  // Bind Tab keydown handler\n  state.onKeydown = (event) => handleKeydown(event, el);\n  el.addEventListener('keydown', state.onKeydown);\n\n  // Set initial focus\n  setInitialFocus(el, config);\n}\n\nfunction deactivate (el) {\n  const state = el[FOCUSTRAP_STATE_KEY];\n  if (!state || !state.active) return;\n\n  state.active = false;\n  cleanup(el);\n\n  // Restore focus using the config captured at activation time\n  if (state.restoreFocus && state.previousActiveElement) {\n    try {\n      state.previousActiveElement.focus({ preventScroll: true });\n    } catch {\n      // Element no longer in DOM or not focusable\n    }\n  }\n  state.previousActiveElement = null;\n}\n\nfunction cleanup (el) {\n  const state = el[FOCUSTRAP_STATE_KEY];\n  if (!state) return;\n  if (state.onKeydown) {\n    el.removeEventListener('keydown', state.onKeydown);\n    state.onKeydown = null;\n  }\n  if (state.addedTabindex) {\n    el.removeAttribute('tabindex');\n    state.addedTabindex = false;\n  }\n}\n\n// ── Initial focus ───────────────────────────────────────────\n\nfunction resolveInitialFocusTarget (el, initialFocus) {\n  if (initialFocus === 'auto' || initialFocus == null) {\n    const elements = getTabbableElements(el, { includeNegativeTabIndex: true });\n    return getFirstFocusCandidate(elements);\n  }\n  if (typeof initialFocus === 'string') return el.querySelector(initialFocus);\n  if (initialFocus instanceof HTMLElement) return initialFocus;\n  return null;\n}\n\nfunction focusOrFallback (el, target) {\n  if (target) {\n    target.focus({ preventScroll: true });\n    return;\n  }\n  if (!el.hasAttribute('tabindex')) {\n    el.setAttribute('tabindex', '-1');\n    const state = el[FOCUSTRAP_STATE_KEY];\n    if (state) state.addedTabindex = true;\n  }\n  el.focus({ preventScroll: true });\n}\n\nfunction setInitialFocus (el, config) {\n  if (config.initialFocus === false) return;\n\n  // Delay to next microtask to avoid breaking transitions and unwanted scrolling\n  Promise.resolve().then(() => {\n    const state = el[FOCUSTRAP_STATE_KEY];\n    if (!state?.active) return;\n    focusOrFallback(el, resolveInitialFocusTarget(el, config.initialFocus));\n  });\n}\n\n// ── Tab trapping ────────────────────────────────────────────\n\nfunction handleKeydown (event, el) {\n  if (event.key !== 'Tab') return;\n\n  const elements = getTabbableElements(el);\n\n  if (!elements.length) {\n    event.preventDefault();\n    return;\n  }\n\n  // Tab boundaries use DOM order (elements[0] / elements[last]),\n  // NOT getFirstFocusCandidate() — the radio-preference logic is for\n  // initial focus only, not for Tab wrapping.\n  const first = elements[0];\n  const last = elements[elements.length - 1];\n\n  if (event.shiftKey) {\n    if (document.activeElement === first) {\n      last.focus({ preventScroll: true });\n      event.preventDefault();\n    }\n  } else {\n    if (document.activeElement === last) {\n      first.focus({ preventScroll: true });\n      event.preventDefault();\n    }\n  }\n}\n\nexport default DtFocustrapDirective;\n"],"mappings":";;;AAqBA,IAAa,IAAuB;CAClC,MAAM;CAEN,QAAS,GAAK;AACZ,IAAI,UAAU,gBAAgB;GAC5B,QAAS,GAAI,GAAS;IACpB,IAAM,IAAS,EAAc,EAAQ,MAAM;AAG3C,IAFA,EAAG,KAAuB,GAAa,EAEnC,EAAO,UACT,EAAS,GAAI,EAAO;;GAIxB,QAAS,GAAI,GAAS;IACpB,IAAM,IAAO,EAAc,EAAQ,SAAS,EACtC,IAAO,EAAc,EAAQ,MAAM;AAC3B,MAAG,OAIb,CAAC,EAAK,UAAU,EAAK,SACvB,EAAS,GAAI,EAAK,GACT,EAAK,UAAU,CAAC,EAAK,UAC9B,EAAW,EAAG;;GAIlB,UAAW,GAAI;AAMb,IALc,EAAG,IACN,UACT,EAAW,EAAG,EAEhB,EAAQ,EAAG,EACX,OAAO,EAAG;;GAEb,CAAC;;CAEL;AAID,SAAS,EAAe,GAAO;AAU7B,QATI,KAAS,QAAQ,MAAU,KACtB;EAAE,GAAG;EAAoB,QAAQ;EAAM,GAE5C,MAAU,KACL;EAAE,GAAG;EAAoB,QAAQ;EAAO,GAE7C,OAAO,KAAU,WACZ;EAAE,GAAG;EAAoB,GAAG;EAAO,GAErC;EAAE,GAAG;EAAoB,QAAQ,EAAQ;EAAQ;;AAK1D,SAAS,IAAe;AACtB,QAAO;EACL,QAAQ;EACR,WAAW;EACX,uBAAuB;EACvB,cAAc;EACd,eAAe;EAChB;;AAKH,SAAS,EAAU,GAAI,GAAQ;CAC7B,IAAM,IAAQ,EAAG;AACb,EAAC,KAAS,EAAM,WAEpB,EAAM,SAAS,IACf,EAAM,eAAe,EAAO,cAC5B,EAAM,wBAAwB,SAAS,eAGvC,EAAM,aAAa,MAAU,EAAc,GAAO,EAAG,EACrD,EAAG,iBAAiB,WAAW,EAAM,UAAU,EAG/C,EAAgB,GAAI,EAAO;;AAG7B,SAAS,EAAY,GAAI;CACvB,IAAM,IAAQ,EAAG;AACb,QAAC,KAAS,CAAC,EAAM,SAMrB;MAJA,EAAM,SAAS,IACf,EAAQ,EAAG,EAGP,EAAM,gBAAgB,EAAM,sBAC9B,KAAI;AACF,KAAM,sBAAsB,MAAM,EAAE,eAAe,IAAM,CAAC;UACpD;AAIV,IAAM,wBAAwB;;;AAGhC,SAAS,EAAS,GAAI;CACpB,IAAM,IAAQ,EAAG;AACZ,OACD,EAAM,cACR,EAAG,oBAAoB,WAAW,EAAM,UAAU,EAClD,EAAM,YAAY,OAEhB,EAAM,kBACR,EAAG,gBAAgB,WAAW,EAC9B,EAAM,gBAAgB;;AAM1B,SAAS,EAA2B,GAAI,GAAc;AAOpD,QANI,MAAiB,UAAU,KAAgB,OAEtC,EADU,EAAoB,GAAI,EAAE,yBAAyB,IAAM,CAAC,CACpC,GAErC,OAAO,KAAiB,WAAiB,EAAG,cAAc,EAAa,GACvE,aAAwB,cAAoB,IACzC;;AAGT,SAAS,EAAiB,GAAI,GAAQ;AACpC,KAAI,GAAQ;AACV,IAAO,MAAM,EAAE,eAAe,IAAM,CAAC;AACrC;;AAEF,KAAI,CAAC,EAAG,aAAa,WAAW,EAAE;AAChC,IAAG,aAAa,YAAY,KAAK;EACjC,IAAM,IAAQ,EAAG;AACjB,EAAI,MAAO,EAAM,gBAAgB;;AAEnC,GAAG,MAAM,EAAE,eAAe,IAAM,CAAC;;AAGnC,SAAS,EAAiB,GAAI,GAAQ;AAChC,GAAO,iBAAiB,MAG5B,QAAQ,SAAS,CAAC,WAAW;AACb,IAAG,IACL,UACZ,EAAgB,GAAI,EAA0B,GAAI,EAAO,aAAa,CAAC;GACvE;;AAKJ,SAAS,EAAe,GAAO,GAAI;AACjC,KAAI,EAAM,QAAQ,MAAO;CAEzB,IAAM,IAAW,EAAoB,EAAG;AAExC,KAAI,CAAC,EAAS,QAAQ;AACpB,IAAM,gBAAgB;AACtB;;CAMF,IAAM,IAAQ,EAAS,IACjB,IAAO,EAAS,EAAS,SAAS;AAExC,CAAI,EAAM,WACJ,SAAS,kBAAkB,MAC7B,EAAK,MAAM,EAAE,eAAe,IAAM,CAAC,EACnC,EAAM,gBAAgB,IAGpB,SAAS,kBAAkB,MAC7B,EAAM,MAAM,EAAE,eAAe,IAAM,CAAC,EACpC,EAAM,gBAAgB"}

package/dist/lib/focustrap-directive/index.cjs

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

package/dist/lib/focustrap-directive/index.js

@@ -1,2 +0,0 @@
-import { DtFocustrapDirective as e } from "./focustrap.js";
-export { e as DtFocustrapDirective };

package/dist/lib/kitchen-sink/kitchen-sink-view.cjs

@@ -1,2 +0,0 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../text/text.cjs`),n=require(`../link/link.cjs`),r=require(`../stack/stack.cjs`);let i=require(`vue`),a=require(`@dialpad/dialtone-icons/vue`);var o={key:0,class:`d-d-flex d-ai-center d-jc-center d-h164`},s={__name:`KitchenSinkView`,props:{title:{type:String,required:!0},itemLabel:{type:String,required:!0},iframeUrl:{type:String,required:!0},loaders:{type:Object,required:!0}},setup(e){let s=e,c=(0,i.ref)([]),l=(0,i.ref)(!0);function u(e){return e.toLowerCase().replace(/[\s/_]+/g,`-`)}function d(e){document.getElementById(`ks-${e}`)?.scrollIntoView({behavior:`smooth`})}function f(e){return(0,i.markRaw)((0,i.defineComponent)({name:`ErrorBoundary-${e}`,setup(t,{slots:n}){let r=(0,i.ref)(null);return(0,i.onErrorCaptured)(e=>(r.value=e.message||String(e),!1)),()=>r.value?(0,i.h)(`div`,{class:`d-fc-critical d-fs-200 d-p-100 d-px-150 d-bgc-critical d-bar-300`},`Failed to render ${e}: ${r.value}`):n.default?.()}}))}function p(e,t,n){let r=[];for(let[a,o]of Object.entries(e)){if(a===`default`||!o?.render||typeof o.render!=`function`)continue;let e={...t.args,...o.args};try{let s=o.render(e,{argTypes:t.argTypes||{}});r.push({name:a,component:(0,i.markRaw)(s),errorBoundary:f(`${n} / ${a}`)})}catch(e){console.error(`Kitchen Sink: Failed to initialize ${n}/${a}:`,e)}}return r}return(0,i.onMounted)(async()=>{let e=await Promise.allSettled(Object.values(s.loaders).map(async e=>e())),t=[];for(let n of e){if(n.status!==`fulfilled`)continue;let e=n.value,r=e.default;if(!r?.title)continue;let i=r.title.split(`/`).pop(),a=u(i),o=u(r.title),s=p(e,r,i);s.length!==0&&t.push({id:a,name:i,storyId:o,variants:s})}c.value=t.sort((e,t)=>e.name.localeCompare(t.name)),l.value=!1}),(s,u)=>{let f=(0,i.resolveDirective)(`dt-scrollbar`);return(0,i.openBlock)(),(0,i.createElementBlock)(`div`,null,[l.value?((0,i.openBlock)(),(0,i.createElementBlock)(`div`,o,[(0,i.createVNode)((0,i.unref)(t.default),{tone:`muted`},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)(` Loading `+(0,i.toDisplayString)(e.itemLabel)+`... `,1)]),_:1})])):((0,i.openBlock)(),(0,i.createElementBlock)(i.Fragment,{key:1},[(0,i.createVNode)((0,i.unref)(r.default),{class:`d-p-400 d-py-200 d-pbe-100 d-bgc-secondary d-bb d-ps-sticky d-t-0 d-zi-base1 d-mbs-n125 d-mx-n125 d-bs-card`,gap:`100`},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(r.default),{class:`d-px-100`,gap:`100`,direction:`row`,justify:`between`,align:`baseline`},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(t.default),{as:`h1`,kind:`headline`,size:700},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(e.title),1)]),_:1}),(0,i.createVNode)((0,i.unref)(t.default),{kind:`body`,size:200},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(n.default),{href:e.iframeUrl,target:`_blank`,rel:`noopener noreferrer`},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(r.default),{gap:`50`,direction:`row`},{default:(0,i.withCtx)(()=>[u[0]||(u[0]=(0,i.createTextVNode)(` Open in new window `,-1)),(0,i.createVNode)((0,i.unref)(a.DtIconExternalLink),{size:`200`})]),_:1})]),_:1},8,[`href`])]),_:1})]),_:1}),(0,i.withDirectives)(((0,i.openBlock)(),(0,i.createElementBlock)(`div`,null,[(0,i.createVNode)((0,i.unref)(r.default),{direction:`row`,gap:`100`,class:`d-pbe-100 d-px-100`},{default:(0,i.withCtx)(()=>[((0,i.openBlock)(!0),(0,i.createElementBlock)(i.Fragment,null,(0,i.renderList)(c.value,e=>((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(n.default),{key:e.id,href:`#ks-${e.id}`,onClick:(0,i.withModifiers)(t=>d(e.id),[`prevent`])},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(t.default),{kind:`body`,size:200,class:`d-ws-nowrap`},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(e.name),1)]),_:2},1024)]),_:2},1032,[`href`,`onClick`]))),128))]),_:1})])),[[f]])]),_:1}),(0,i.createVNode)((0,i.unref)(r.default),{class:`d-px-400`},{default:(0,i.withCtx)(()=>[((0,i.openBlock)(!0),(0,i.createElementBlock)(i.Fragment,null,(0,i.renderList)(c.value,e=>((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(r.default),{id:`ks-${e.id}`,key:e.id,as:`section`,gap:`200`,class:`d-py-400 kitchen-sink__section`},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(r.default),{gap:`100`,direction:`row`,justify:`between`,align:`baseline`},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(t.default),{as:`h2`,kind:`headline`,size:600},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(e.name),1)]),_:2},1024),(0,i.createVNode)((0,i.unref)(n.default),{href:`/?path=/story/${e.storyId}--default`},{default:(0,i.withCtx)(()=>[...u[1]||(u[1]=[(0,i.createTextVNode)(` View Story `,-1)])]),_:1},8,[`href`])]),_:2},1024),((0,i.openBlock)(!0),(0,i.createElementBlock)(i.Fragment,null,(0,i.renderList)(e.variants,e=>((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(r.default),{key:e.name,class:`d-ba d-bc-subtle d-p-200`,gap:`100`},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(t.default),{size:100,tone:`muted`,kind:`code`},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(e.name),1)]),_:2},1024),(0,i.createElementVNode)(`div`,null,[((0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(e.errorBoundary),null,{default:(0,i.withCtx)(()=>[((0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(e.component)))]),_:2},1024))])]),_:2},1024))),128))]),_:2},1032,[`id`]))),128))]),_:1})],64))])}}},c=e.t(s,[[`__scopeId`,`data-v-e54b06bf`]]);exports.default=c;
-//# sourceMappingURL=kitchen-sink-view.cjs.map

package/dist/lib/kitchen-sink/kitchen-sink-view.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"kitchen-sink-view.cjs","names":[],"sources":["../../../components/KitchenSink/KitchenSinkView.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class, vue/no-bare-strings-in-template -->\n<template>\n  <div>\n    <div\n      v-if=\"loading\"\n      class=\"d-d-flex d-ai-center d-jc-center d-h164\"\n    >\n      <dt-text\n        tone=\"muted\"\n      >\n        Loading {{ itemLabel }}...\n      </dt-text>\n    </div>\n    <template v-else>\n      <dt-stack\n        class=\"\n          d-p-400\n          d-py-200\n          d-pbe-100\n          d-bgc-secondary\n          d-bb\n          d-ps-sticky\n          d-t-0\n          d-zi-base1\n          d-mbs-n125\n          d-mx-n125\n          d-bs-card\n        \"\n        gap=\"100\"\n      >\n        <dt-stack\n          class=\"d-px-100\"\n          gap=\"100\"\n          direction=\"row\"\n          justify=\"between\"\n          align=\"baseline\"\n        >\n          <dt-text\n            as=\"h1\"\n            kind=\"headline\"\n            :size=\"700\"\n          >\n            {{ title }}\n          </dt-text>\n          <dt-text\n            kind=\"body\"\n            :size=\"200\"\n          >\n            <dt-link\n              :href=\"iframeUrl\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              <dt-stack\n                gap=\"50\"\n                direction=\"row\"\n              >\n                Open in new window\n                <dt-icon-external-link size=\"200\" />\n              </dt-stack>\n            </dt-link>\n          </dt-text>\n        </dt-stack>\n        <div\n          v-dt-scrollbar\n        >\n          <dt-stack\n            direction=\"row\"\n            gap=\"100\"\n            class=\"d-pbe-100 d-px-100\"\n          >\n            <dt-link\n              v-for=\"section in sections\"\n              :key=\"section.id\"\n              :href=\"`#ks-${section.id}`\"\n              @click.prevent=\"scrollTo(section.id)\"\n            >\n              <dt-text\n                kind=\"body\"\n                :size=\"200\"\n                class=\"d-ws-nowrap\"\n              >\n                {{ section.name }}\n              </dt-text>\n            </dt-link>\n          </dt-stack>\n        </div>\n      </dt-stack>\n      <dt-stack class=\"d-px-400\">\n        <dt-stack\n          v-for=\"section in sections\"\n          :id=\"`ks-${section.id}`\"\n          :key=\"section.id\"\n          as=\"section\"\n          gap=\"200\"\n          class=\"d-py-400 kitchen-sink__section\"\n        >\n          <dt-stack\n            gap=\"100\"\n            direction=\"row\"\n            justify=\"between\"\n            align=\"baseline\"\n          >\n            <dt-text\n              as=\"h2\"\n              kind=\"headline\"\n              :size=\"600\"\n            >\n              {{ section.name }}\n            </dt-text>\n            <dt-link\n              :href=\"`/?path=/story/${section.storyId}--default`\"\n            >\n              View Story\n            </dt-link>\n          </dt-stack>\n          <dt-stack\n            v-for=\"variant in section.variants\"\n            :key=\"variant.name\"\n            class=\"d-ba d-bc-subtle d-p-200\"\n            gap=\"100\"\n          >\n            <dt-text\n              :size=\"100\"\n              tone=\"muted\"\n              kind=\"code\"\n            >\n              {{ variant.name }}\n            </dt-text>\n            <div>\n              <component :is=\"variant.errorBoundary\">\n                <component :is=\"variant.component\" />\n              </component>\n            </div>\n          </dt-stack>\n        </dt-stack>\n      </dt-stack>\n    </template>\n  </div>\n</template>\n\n<script setup>\nimport { ref, h, onErrorCaptured, onMounted, defineComponent, markRaw } from 'vue';\nimport { DtLink } from '@/components/Link';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { DtIconExternalLink } from '@dialpad/dialtone-icons/vue';\n\nconst props = defineProps({\n  title: {\n    type: String,\n    required: true,\n  },\n  itemLabel: {\n    type: String,\n    required: true,\n  },\n  iframeUrl: {\n    type: String,\n    required: true,\n  },\n  loaders: {\n    type: Object,\n    required: true,\n  },\n});\n\nconst sections = ref([]);\nconst loading = ref(true);\n\nfunction sanitizeId (str) {\n  return str.toLowerCase().replace(/[\\s/_]+/g, '-');\n}\n\nfunction scrollTo (id) {\n  document.getElementById(`ks-${id}`)?.scrollIntoView({ behavior: 'smooth' });\n}\n\nfunction createErrorBoundary (name) {\n  return markRaw(defineComponent({\n    name: `ErrorBoundary-${name}`,\n    setup (_, { slots }) {\n      const error = ref(null);\n      onErrorCaptured((err) => {\n        error.value = err.message || String(err);\n        return false;\n      });\n      return () => {\n        if (error.value) {\n          return h('div', {\n            class: 'd-fc-critical d-fs-200 d-p-100 d-px-150 d-bgc-critical d-bar-300',\n          }, `Failed to render ${name}: ${error.value}`);\n        }\n        return slots.default?.();\n      };\n    },\n  }));\n}\n\nfunction extractVariants (module, meta, name) {\n  const variants = [];\n\n  for (const [exportName, exportValue] of Object.entries(module)) {\n    if (exportName === 'default') continue;\n    if (!exportValue?.render || typeof exportValue.render !== 'function') continue;\n\n    const mergedArgs = { ...meta.args, ...exportValue.args };\n\n    try {\n      const componentOptions = exportValue.render(mergedArgs, {\n        argTypes: meta.argTypes || {},\n      });\n      variants.push({\n        name: exportName,\n        component: markRaw(componentOptions),\n        errorBoundary: createErrorBoundary(`${name} / ${exportName}`),\n      });\n    } catch (e) {\n      console.error(`Kitchen Sink: Failed to initialize ${name}/${exportName}:`, e);\n    }\n  }\n\n  return variants;\n}\n\nonMounted(async () => {\n  const results = await Promise.allSettled(\n    Object.values(props.loaders).map(async (loader) => loader()),\n  );\n\n  const loaded = [];\n\n  for (const result of results) {\n    if (result.status !== 'fulfilled') continue;\n\n    const module = result.value;\n    const meta = module.default;\n    if (!meta?.title) continue;\n\n    const name = meta.title.split('/').pop();\n    const id = sanitizeId(name);\n    const storyId = sanitizeId(meta.title);\n    const variants = extractVariants(module, meta, name);\n\n    if (variants.length === 0) continue;\n\n    loaded.push({ id, name, storyId, variants });\n  }\n\n  sections.value = loaded.sort((a, b) => a.name.localeCompare(b.name));\n  loading.value = false;\n});\n</script>\n\n<style scoped>\n.kitchen-sink__section {\n  scroll-margin-block-start: var(--dt-layout-150);\n}\n[outline] {\n  outline: 2px solid orangered;\n}\n</style>\n"],"mappings":"klBAoJA,IAAM,EAAQ,EAmBR,GAAA,EAAA,EAAA,KAAe,EAAE,CAAC,CAClB,GAAA,EAAA,EAAA,KAAc,GAAK,CAEzB,SAAS,EAAY,EAAK,CACxB,OAAO,EAAI,aAAa,CAAC,QAAQ,WAAY,IAAI,CAGnD,SAAS,EAAU,EAAI,CACrB,SAAS,eAAe,MAAM,IAAK,EAAE,eAAe,CAAE,SAAU,SAAU,CAAC,CAG7E,SAAS,EAAqB,EAAM,CAClC,OAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAA+B,CAC7B,KAAM,iBAAiB,IACvB,MAAO,EAAG,CAAE,SAAS,CACnB,IAAM,GAAA,EAAA,EAAA,KAAY,KAAK,CAKvB,OAJA,EAAA,EAAA,iBAAiB,IACf,EAAM,MAAQ,EAAI,SAAW,OAAO,EAAI,CACjC,IACP,KAEI,EAAM,OACR,EAAA,EAAA,GAAS,MAAO,CACd,MAAO,mEACR,CAAE,oBAAoB,EAAK,IAAI,EAAM,QAAQ,CAEzC,EAAM,WAAW,EAG7B,CAAC,CAAC,CAGL,SAAS,EAAiB,EAAQ,EAAM,EAAM,CAC5C,IAAM,EAAW,EAAE,CAEnB,IAAK,GAAM,CAAC,EAAY,KAAgB,OAAO,QAAQ,EAAO,CAAE,CAE9D,GADI,IAAe,WACf,CAAC,GAAa,QAAU,OAAO,EAAY,QAAW,WAAY,SAEtE,IAAM,EAAa,CAAE,GAAG,EAAK,KAAM,GAAG,EAAY,KAAM,CAExD,GAAI,CACF,IAAM,EAAmB,EAAY,OAAO,EAAY,CACtD,SAAU,EAAK,UAAY,EAAE,CAC9B,CAAC,CACF,EAAS,KAAK,CACZ,KAAM,EACN,WAAA,EAAA,EAAA,SAAmB,EAAiB,CACpC,cAAe,EAAoB,GAAG,EAAK,KAAK,IAAa,CAC9D,CAAC,OACK,EAAG,CACV,QAAQ,MAAM,sCAAsC,EAAK,GAAG,EAAW,GAAI,EAAE,EAIjF,OAAO,SAGT,EAAA,EAAA,WAAU,SAAY,CACpB,IAAM,EAAU,MAAM,QAAQ,WAC5B,OAAO,OAAO,EAAM,QAAQ,CAAC,IAAI,KAAO,IAAW,GAAQ,CAAC,CAC7D,CAEK,EAAS,EAAE,CAEjB,IAAK,IAAM,KAAU,EAAS,CAC5B,GAAI,EAAO,SAAW,YAAa,SAEnC,IAAM,EAAS,EAAO,MAChB,EAAO,EAAO,QACpB,GAAI,CAAC,GAAM,MAAO,SAElB,IAAM,EAAO,EAAK,MAAM,MAAM,IAAI,CAAC,KAAK,CAClC,EAAK,EAAW,EAAK,CACrB,EAAU,EAAW,EAAK,MAAM,CAChC,EAAW,EAAgB,EAAQ,EAAM,EAAK,CAEhD,EAAS,SAAW,GAExB,EAAO,KAAK,CAAE,KAAI,OAAM,UAAS,WAAU,CAAC,CAG9C,EAAS,MAAQ,EAAO,MAAM,EAAG,IAAM,EAAE,KAAK,cAAc,EAAE,KAAK,CAAC,CACpE,EAAQ,MAAQ,IAChB,uGAjHM,MAAA,KAAA,CAtII,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQF,MATN,EASM,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OADM,EAAA,QAAA,CAAA,CAHR,KAAK,QAAO,CAAA,2BAEJ,EAAA,EAAA,EAAA,iBADT,aAAA,EAAA,EAAA,iBACY,EAAA,UAAS,CAAG,OACzB,EAAA,CAAA,CAAA,sDA8HS,EAAA,SAAA,CAAA,IAAA,EAAA,CAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAlDE,EAAA,QAAA,CAAA,CAxET,MAAM,8GAaN,IAAI,kCAkCO,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CA/BT,MAAM,WACN,IAAI,MACJ,UAAU,MACV,QAAQ,UACR,MAAM,uCAQI,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CALR,GAAG,KACH,KAAK,WACJ,KAAM,gCAEI,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAR,EAAA,MAAK,CAAA,EAAA,CAAA,CAAA,qCAmBA,EAAA,QAAA,CAAA,CAhBR,KAAK,OACJ,KAAM,gCAcG,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CAXP,KAAM,EAAA,UACP,OAAO,SACP,IAAI,kDAQO,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CALT,IAAI,KACJ,UAAU,kCAGV,CAAA,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,iBAFD,uBAEC,GAAA,GAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAoC,EAAA,mBAAA,CAAA,CAAb,KAAK,MAAK,CAAA,CAAA,CAAA,2GA4BnC,MAAA,KAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OADO,EAAA,QAAA,CAAA,CAlBT,UAAU,MACV,IAAI,MACJ,MAAM,iDAGuB,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBAYnB,EAAA,SAAA,MAAA,EAAA,EAAA,YAZU,EAAA,MAAX,oDAYC,EAAA,QAAA,CAAA,CAXP,IAAK,EAAQ,GACb,KAAI,OAAS,EAAQ,KACrB,SAAA,EAAA,EAAA,eAAK,GAAU,EAAS,EAAQ,GAAE,CAAA,CAAA,UAAA,CAAA,6BAQzB,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CALR,KAAK,OACJ,KAAM,IACP,MAAM,0CAEY,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAf,EAAQ,KAAI,CAAA,EAAA,CAAA,CAAA,4GAsDd,EAAA,QAAA,CAAA,CAhDD,MAAM,WAAU,CAAA,2BAEK,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBA6ClB,EAAA,SAAA,MAAA,EAAA,EAAA,YA7CS,EAAA,MAAX,oDA6CE,EAAA,QAAA,CAAA,CA5CR,GAAE,MAAQ,EAAQ,KAClB,IAAK,EAAQ,GACd,GAAG,UACH,IAAI,MACJ,MAAM,6DAoBK,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CAjBT,IAAI,MACJ,UAAU,MACV,QAAQ,UACR,MAAM,uCAQI,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CALR,GAAG,KACH,KAAK,WACJ,KAAM,gCAEW,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAf,EAAQ,KAAI,CAAA,EAAA,CAAA,CAAA,0CAMP,EAAA,QAAA,CAAA,CAHP,KAAI,iBAAmB,EAAQ,QAAO,WAAA,CAAA,2BAGzC,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA,EAAA,EAAA,EAAA,iBAFC,eAED,GAAA,CAAA,EAAA,CAAA,6EAoBS,EAAA,SAAA,MAAA,EAAA,EAAA,YAjBS,EAAQ,SAAnB,oDAiBE,EAAA,QAAA,CAAA,CAhBR,IAAK,EAAQ,KACd,MAAM,2BACN,IAAI,kCAQM,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CALP,KAAM,IACP,KAAK,QACL,KAAK,mCAEa,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAf,EAAQ,KAAI,CAAA,EAAA,CAAA,CAAA,qCAMX,MAAA,KAAA,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBAHY,EAAQ,cAAa,CAAA,KAAA,2BACE,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBAArB,EAAQ,UAAS,CAAA,EAAA,CAAA"}

package/dist/lib/kitchen-sink/kitchen-sink-view.js

@@ -1,205 +0,0 @@
-import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import t from "../text/text.js";
-import n from "../link/link.js";
-import r from "../stack/stack.js";
-import { Fragment as i, createBlock as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, h as d, markRaw as f, onErrorCaptured as p, onMounted as m, openBlock as h, ref as g, renderList as _, resolveDirective as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, withCtx as S, withDirectives as C, withModifiers as w } from "vue";
-import { DtIconExternalLink as T } from "@dialpad/dialtone-icons/vue";
-//#region components/KitchenSink/KitchenSinkView.vue
-var E = {
-	key: 0,
-	class: "d-d-flex d-ai-center d-jc-center d-h164"
-}, D = /* @__PURE__ */ e({
-	__name: "KitchenSinkView",
-	props: {
-		title: {
-			type: String,
-			required: !0
-		},
-		itemLabel: {
-			type: String,
-			required: !0
-		},
-		iframeUrl: {
-			type: String,
-			required: !0
-		},
-		loaders: {
-			type: Object,
-			required: !0
-		}
-	},
-	setup(e) {
-		let D = e, O = g([]), k = g(!0);
-		function A(e) {
-			return e.toLowerCase().replace(/[\s/_]+/g, "-");
-		}
-		function j(e) {
-			document.getElementById(`ks-${e}`)?.scrollIntoView({ behavior: "smooth" });
-		}
-		function M(e) {
-			return f(u({
-				name: `ErrorBoundary-${e}`,
-				setup(t, { slots: n }) {
-					let r = g(null);
-					return p((e) => (r.value = e.message || String(e), !1)), () => r.value ? d("div", { class: "d-fc-critical d-fs-200 d-p-100 d-px-150 d-bgc-critical d-bar-300" }, `Failed to render ${e}: ${r.value}`) : n.default?.();
-				}
-			}));
-		}
-		function N(e, t, n) {
-			let r = [];
-			for (let [i, a] of Object.entries(e)) {
-				if (i === "default" || !a?.render || typeof a.render != "function") continue;
-				let e = {
-					...t.args,
-					...a.args
-				};
-				try {
-					let o = a.render(e, { argTypes: t.argTypes || {} });
-					r.push({
-						name: i,
-						component: f(o),
-						errorBoundary: M(`${n} / ${i}`)
-					});
-				} catch (e) {
-					console.error(`Kitchen Sink: Failed to initialize ${n}/${i}:`, e);
-				}
-			}
-			return r;
-		}
-		return m(async () => {
-			let e = await Promise.allSettled(Object.values(D.loaders).map(async (e) => e())), t = [];
-			for (let n of e) {
-				if (n.status !== "fulfilled") continue;
-				let e = n.value, r = e.default;
-				if (!r?.title) continue;
-				let i = r.title.split("/").pop(), a = A(i), o = A(r.title), s = N(e, r, i);
-				s.length !== 0 && t.push({
-					id: a,
-					name: i,
-					storyId: o,
-					variants: s
-				});
-			}
-			O.value = t.sort((e, t) => e.name.localeCompare(t.name)), k.value = !1;
-		}), (u, d) => {
-			let f = v("dt-scrollbar");
-			return h(), o("div", null, [k.value ? (h(), o("div", E, [l(x(t), { tone: "muted" }, {
-				default: S(() => [c(" Loading " + b(e.itemLabel) + "... ", 1)]),
-				_: 1
-			})])) : (h(), o(i, { key: 1 }, [l(x(r), {
-				class: "d-p-400 d-py-200 d-pbe-100 d-bgc-secondary d-bb d-ps-sticky d-t-0 d-zi-base1 d-mbs-n125 d-mx-n125 d-bs-card",
-				gap: "100"
-			}, {
-				default: S(() => [l(x(r), {
-					class: "d-px-100",
-					gap: "100",
-					direction: "row",
-					justify: "between",
-					align: "baseline"
-				}, {
-					default: S(() => [l(x(t), {
-						as: "h1",
-						kind: "headline",
-						size: 700
-					}, {
-						default: S(() => [c(b(e.title), 1)]),
-						_: 1
-					}), l(x(t), {
-						kind: "body",
-						size: 200
-					}, {
-						default: S(() => [l(x(n), {
-							href: e.iframeUrl,
-							target: "_blank",
-							rel: "noopener noreferrer"
-						}, {
-							default: S(() => [l(x(r), {
-								gap: "50",
-								direction: "row"
-							}, {
-								default: S(() => [d[0] || (d[0] = c(" Open in new window ", -1)), l(x(T), { size: "200" })]),
-								_: 1
-							})]),
-							_: 1
-						}, 8, ["href"])]),
-						_: 1
-					})]),
-					_: 1
-				}), C((h(), o("div", null, [l(x(r), {
-					direction: "row",
-					gap: "100",
-					class: "d-pbe-100 d-px-100"
-				}, {
-					default: S(() => [(h(!0), o(i, null, _(O.value, (e) => (h(), a(x(n), {
-						key: e.id,
-						href: `#ks-${e.id}`,
-						onClick: w((t) => j(e.id), ["prevent"])
-					}, {
-						default: S(() => [l(x(t), {
-							kind: "body",
-							size: 200,
-							class: "d-ws-nowrap"
-						}, {
-							default: S(() => [c(b(e.name), 1)]),
-							_: 2
-						}, 1024)]),
-						_: 2
-					}, 1032, ["href", "onClick"]))), 128))]),
-					_: 1
-				})])), [[f]])]),
-				_: 1
-			}), l(x(r), { class: "d-px-400" }, {
-				default: S(() => [(h(!0), o(i, null, _(O.value, (e) => (h(), a(x(r), {
-					id: `ks-${e.id}`,
-					key: e.id,
-					as: "section",
-					gap: "200",
-					class: "d-py-400 kitchen-sink__section"
-				}, {
-					default: S(() => [l(x(r), {
-						gap: "100",
-						direction: "row",
-						justify: "between",
-						align: "baseline"
-					}, {
-						default: S(() => [l(x(t), {
-							as: "h2",
-							kind: "headline",
-							size: 600
-						}, {
-							default: S(() => [c(b(e.name), 1)]),
-							_: 2
-						}, 1024), l(x(n), { href: `/?path=/story/${e.storyId}--default` }, {
-							default: S(() => [...d[1] || (d[1] = [c(" View Story ", -1)])]),
-							_: 1
-						}, 8, ["href"])]),
-						_: 2
-					}, 1024), (h(!0), o(i, null, _(e.variants, (e) => (h(), a(x(r), {
-						key: e.name,
-						class: "d-ba d-bc-subtle d-p-200",
-						gap: "100"
-					}, {
-						default: S(() => [l(x(t), {
-							size: 100,
-							tone: "muted",
-							kind: "code"
-						}, {
-							default: S(() => [c(b(e.name), 1)]),
-							_: 2
-						}, 1024), s("div", null, [(h(), a(y(e.errorBoundary), null, {
-							default: S(() => [(h(), a(y(e.component)))]),
-							_: 2
-						}, 1024))])]),
-						_: 2
-					}, 1024))), 128))]),
-					_: 2
-				}, 1032, ["id"]))), 128))]),
-				_: 1
-			})], 64))]);
-		};
-	}
-}, [["__scopeId", "data-v-e54b06bf"]]);
-//#endregion
-export { D as default };
-
-//# sourceMappingURL=kitchen-sink-view.js.map

package/dist/lib/kitchen-sink/kitchen-sink-view.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kitchen-sink-view.js","names":[],"sources":["../../../components/KitchenSink/KitchenSinkView.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class, vue/no-bare-strings-in-template -->\n<template>\n  <div>\n    <div\n      v-if=\"loading\"\n      class=\"d-d-flex d-ai-center d-jc-center d-h164\"\n    >\n      <dt-text\n        tone=\"muted\"\n      >\n        Loading {{ itemLabel }}...\n      </dt-text>\n    </div>\n    <template v-else>\n      <dt-stack\n        class=\"\n          d-p-400\n          d-py-200\n          d-pbe-100\n          d-bgc-secondary\n          d-bb\n          d-ps-sticky\n          d-t-0\n          d-zi-base1\n          d-mbs-n125\n          d-mx-n125\n          d-bs-card\n        \"\n        gap=\"100\"\n      >\n        <dt-stack\n          class=\"d-px-100\"\n          gap=\"100\"\n          direction=\"row\"\n          justify=\"between\"\n          align=\"baseline\"\n        >\n          <dt-text\n            as=\"h1\"\n            kind=\"headline\"\n            :size=\"700\"\n          >\n            {{ title }}\n          </dt-text>\n          <dt-text\n            kind=\"body\"\n            :size=\"200\"\n          >\n            <dt-link\n              :href=\"iframeUrl\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              <dt-stack\n                gap=\"50\"\n                direction=\"row\"\n              >\n                Open in new window\n                <dt-icon-external-link size=\"200\" />\n              </dt-stack>\n            </dt-link>\n          </dt-text>\n        </dt-stack>\n        <div\n          v-dt-scrollbar\n        >\n          <dt-stack\n            direction=\"row\"\n            gap=\"100\"\n            class=\"d-pbe-100 d-px-100\"\n          >\n            <dt-link\n              v-for=\"section in sections\"\n              :key=\"section.id\"\n              :href=\"`#ks-${section.id}`\"\n              @click.prevent=\"scrollTo(section.id)\"\n            >\n              <dt-text\n                kind=\"body\"\n                :size=\"200\"\n                class=\"d-ws-nowrap\"\n              >\n                {{ section.name }}\n              </dt-text>\n            </dt-link>\n          </dt-stack>\n        </div>\n      </dt-stack>\n      <dt-stack class=\"d-px-400\">\n        <dt-stack\n          v-for=\"section in sections\"\n          :id=\"`ks-${section.id}`\"\n          :key=\"section.id\"\n          as=\"section\"\n          gap=\"200\"\n          class=\"d-py-400 kitchen-sink__section\"\n        >\n          <dt-stack\n            gap=\"100\"\n            direction=\"row\"\n            justify=\"between\"\n            align=\"baseline\"\n          >\n            <dt-text\n              as=\"h2\"\n              kind=\"headline\"\n              :size=\"600\"\n            >\n              {{ section.name }}\n            </dt-text>\n            <dt-link\n              :href=\"`/?path=/story/${section.storyId}--default`\"\n            >\n              View Story\n            </dt-link>\n          </dt-stack>\n          <dt-stack\n            v-for=\"variant in section.variants\"\n            :key=\"variant.name\"\n            class=\"d-ba d-bc-subtle d-p-200\"\n            gap=\"100\"\n          >\n            <dt-text\n              :size=\"100\"\n              tone=\"muted\"\n              kind=\"code\"\n            >\n              {{ variant.name }}\n            </dt-text>\n            <div>\n              <component :is=\"variant.errorBoundary\">\n                <component :is=\"variant.component\" />\n              </component>\n            </div>\n          </dt-stack>\n        </dt-stack>\n      </dt-stack>\n    </template>\n  </div>\n</template>\n\n<script setup>\nimport { ref, h, onErrorCaptured, onMounted, defineComponent, markRaw } from 'vue';\nimport { DtLink } from '@/components/Link';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { DtIconExternalLink } from '@dialpad/dialtone-icons/vue';\n\nconst props = defineProps({\n  title: {\n    type: String,\n    required: true,\n  },\n  itemLabel: {\n    type: String,\n    required: true,\n  },\n  iframeUrl: {\n    type: String,\n    required: true,\n  },\n  loaders: {\n    type: Object,\n    required: true,\n  },\n});\n\nconst sections = ref([]);\nconst loading = ref(true);\n\nfunction sanitizeId (str) {\n  return str.toLowerCase().replace(/[\\s/_]+/g, '-');\n}\n\nfunction scrollTo (id) {\n  document.getElementById(`ks-${id}`)?.scrollIntoView({ behavior: 'smooth' });\n}\n\nfunction createErrorBoundary (name) {\n  return markRaw(defineComponent({\n    name: `ErrorBoundary-${name}`,\n    setup (_, { slots }) {\n      const error = ref(null);\n      onErrorCaptured((err) => {\n        error.value = err.message || String(err);\n        return false;\n      });\n      return () => {\n        if (error.value) {\n          return h('div', {\n            class: 'd-fc-critical d-fs-200 d-p-100 d-px-150 d-bgc-critical d-bar-300',\n          }, `Failed to render ${name}: ${error.value}`);\n        }\n        return slots.default?.();\n      };\n    },\n  }));\n}\n\nfunction extractVariants (module, meta, name) {\n  const variants = [];\n\n  for (const [exportName, exportValue] of Object.entries(module)) {\n    if (exportName === 'default') continue;\n    if (!exportValue?.render || typeof exportValue.render !== 'function') continue;\n\n    const mergedArgs = { ...meta.args, ...exportValue.args };\n\n    try {\n      const componentOptions = exportValue.render(mergedArgs, {\n        argTypes: meta.argTypes || {},\n      });\n      variants.push({\n        name: exportName,\n        component: markRaw(componentOptions),\n        errorBoundary: createErrorBoundary(`${name} / ${exportName}`),\n      });\n    } catch (e) {\n      console.error(`Kitchen Sink: Failed to initialize ${name}/${exportName}:`, e);\n    }\n  }\n\n  return variants;\n}\n\nonMounted(async () => {\n  const results = await Promise.allSettled(\n    Object.values(props.loaders).map(async (loader) => loader()),\n  );\n\n  const loaded = [];\n\n  for (const result of results) {\n    if (result.status !== 'fulfilled') continue;\n\n    const module = result.value;\n    const meta = module.default;\n    if (!meta?.title) continue;\n\n    const name = meta.title.split('/').pop();\n    const id = sanitizeId(name);\n    const storyId = sanitizeId(meta.title);\n    const variants = extractVariants(module, meta, name);\n\n    if (variants.length === 0) continue;\n\n    loaded.push({ id, name, storyId, variants });\n  }\n\n  sections.value = loaded.sort((a, b) => a.name.localeCompare(b.name));\n  loading.value = false;\n});\n</script>\n\n<style scoped>\n.kitchen-sink__section {\n  scroll-margin-block-start: var(--dt-layout-150);\n}\n[outline] {\n  outline: 2px solid orangered;\n}\n</style>\n"],"mappings":"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"}

package/dist/lib/mode-directive/index.cjs

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

package/dist/lib/mode-directive/index.js

@@ -1,2 +0,0 @@
-import { DtModeDirective as e } from "./mode.js";
-export { e as DtModeDirective };

package/dist/lib/mode-directive/mode.cjs

@@ -1,2 +0,0 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../mode_constants-CzYJW9ua.cjs`),t=require(`../mode-island/utils.cjs`);var n=e.n,r={inverted:`invert`},i={name:`dt-mode-directive`,install(e){let i=new WeakMap;e.directive(`dt-mode`,{mounted(e,t){if(t.value===!1)return;let n=o(e,a(t.arg));i.set(e,n)},updated(e,t){let n=i.get(e),r=t.value!==t.oldValue,l=a(t.arg),u=l!==n?.arg;if(!r&&!u||(c(n),s(e),i.delete(e),t.value===!1))return;let d=o(e,l);i.set(e,d)},unmounted(e){c(i.get(e)),s(e),i.delete(e)}});function a(e){return e?n.includes(e)?e:r[e]?(console.warn(`[DtModeDirective] Invalid mode "${e}". Did you mean "${r[e]}"? Falling back to "${r[e]}".`),r[e]):(console.warn(`[DtModeDirective] Invalid mode "${e}". Valid modes: ${n.join(`, `)}. Falling back to "invert".`),`invert`):`invert`}function o(e,n){let r={arg:n,contrastObserver:null,materialObserver:null,modeObserver:null};if(e.setAttribute(`data-dt-contrast`,t.getRootContrast()),r.contrastObserver=new MutationObserver(()=>{e.setAttribute(`data-dt-contrast`,t.getRootContrast())}),r.contrastObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-dt-contrast`]}),e.setAttribute(`data-dt-material`,t.getRootMaterial()),r.materialObserver=new MutationObserver(()=>{e.setAttribute(`data-dt-material`,t.getRootMaterial())}),r.materialObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-dt-material`]}),n===`light`||n===`dark`)e.setAttribute(`data-dt-mode`,n);else{let n=t.findParentMode(e);e.setAttribute(`data-dt-mode`,t.getOppositeMode(n));let i={attributes:!0,attributeFilter:[`data-dt-mode`],subtree:!1};r.modeObserver=new MutationObserver(()=>{let n=t.findParentMode(e);e.setAttribute(`data-dt-mode`,t.getOppositeMode(n))}),r.modeObserver.observe(document.documentElement,i);let a=e.parentElement;for(;a&&a!==document.documentElement;)r.modeObserver.observe(a,i),a=a.parentElement}return r}function s(e){e.removeAttribute(`data-dt-mode`),e.removeAttribute(`data-dt-contrast`),e.removeAttribute(`data-dt-material`)}function c(e){e&&(e.contrastObserver&&(e.contrastObserver.disconnect(),e.contrastObserver=null),e.materialObserver&&(e.materialObserver.disconnect(),e.materialObserver=null),e.modeObserver&&(e.modeObserver.disconnect(),e.modeObserver=null))}}};exports.DtModeDirective=i,exports.default=i;
-//# sourceMappingURL=mode.cjs.map

package/dist/lib/mode-directive/mode.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"mode.cjs","names":["CONTENT_MODE_VALUES","getRootContrast","getRootMaterial","findParentMode","getOppositeMode"],"sources":["../../../directives/mode_directive/mode.js"],"sourcesContent":["import {\n  getOppositeMode,\n  getRootContrast,\n  getRootMaterial,\n  findParentMode,\n} from '@/components/ModeIsland/Utils';\nimport { CONTENT_MODE_VALUES } from '@/common/mode_constants';\n\nconst VALID_MODES = CONTENT_MODE_VALUES;\n\nconst SUGGESTIONS = {\n  inverted: 'invert',\n};\n\n/**\n * v-dt-mode directive — applies a color mode (light, dark, or invert) to an element.\n *\n * Sets `data-dt-mode`, `data-dt-contrast`, and `data-dt-material` attributes so\n * descendant token-based styles (`d-fc-primary`, `d-bgc-secondary`, etc.) resolve\n * to the correct palette under the active contrast and material.\n *\n * @example\n * // Explicit modes\n * <section v-dt-mode:dark>Dark content</section>\n * <section v-dt-mode:light>Light content</section>\n *\n * // Invert nearest parent mode (default when no arg)\n * <section v-dt-mode>Inverted content</section>\n * <section v-dt-mode:invert>Same as above</section>\n *\n * // Dynamic arg\n * <section v-dt-mode:[reactiveMode]>Reactive mode</section>\n *\n * // Disable with false value\n * <section v-dt-mode:dark=\"false\">No mode applied</section>\n */\nexport const DtModeDirective = {\n  name: 'dt-mode-directive',\n  install (app) {\n    const instances = new WeakMap();\n\n    app.directive('dt-mode', {\n      mounted (el, binding) {\n        if (binding.value === false) return;\n        const mode = resolveArg(binding.arg);\n        const state = applyMode(el, mode);\n        instances.set(el, state);\n      },\n\n      updated (el, binding) {\n        const prev = instances.get(el);\n        const valueChanged = binding.value !== binding.oldValue;\n        const resolvedArg = resolveArg(binding.arg);\n        const argChanged = resolvedArg !== prev?.arg;\n        if (!valueChanged && !argChanged) return;\n\n        cleanup(prev);\n        removeAttributes(el);\n        instances.delete(el);\n\n        if (binding.value === false) return;\n\n        const state = applyMode(el, resolvedArg);\n        instances.set(el, state);\n      },\n\n      unmounted (el) {\n        cleanup(instances.get(el));\n        removeAttributes(el);\n        instances.delete(el);\n      },\n    });\n\n    function resolveArg (arg) {\n      if (!arg) return 'invert';\n      if (VALID_MODES.includes(arg)) return arg;\n      if (SUGGESTIONS[arg]) {\n        console.warn(\n          `[DtModeDirective] Invalid mode \"${arg}\". Did you mean \"${SUGGESTIONS[arg]}\"? Falling back to \"${SUGGESTIONS[arg]}\".`,\n        );\n        return SUGGESTIONS[arg];\n      }\n      console.warn(\n        `[DtModeDirective] Invalid mode \"${arg}\". Valid modes: ${VALID_MODES.join(', ')}. Falling back to \"invert\".`,\n      );\n      return 'invert';\n    }\n\n    function applyMode (el, mode) {\n      const state = {\n        arg: mode,\n        contrastObserver: null,\n        materialObserver: null,\n        modeObserver: null,\n      };\n\n      // Set contrast from root\n      el.setAttribute('data-dt-contrast', getRootContrast());\n\n      // Watch for contrast changes on root\n      state.contrastObserver = new MutationObserver(() => {\n        el.setAttribute('data-dt-contrast', getRootContrast());\n      });\n      state.contrastObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-contrast'],\n      });\n\n      // Set material from root\n      el.setAttribute('data-dt-material', getRootMaterial());\n\n      // Watch for material changes on root\n      state.materialObserver = new MutationObserver(() => {\n        el.setAttribute('data-dt-material', getRootMaterial());\n      });\n      state.materialObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-material'],\n      });\n\n      if (mode === 'light' || mode === 'dark') {\n        el.setAttribute('data-dt-mode', mode);\n      } else {\n        // invert mode\n        const parentMode = findParentMode(el);\n        el.setAttribute('data-dt-mode', getOppositeMode(parentMode));\n\n        // Watch for mode changes on root and ancestors\n        const config = {\n          attributes: true,\n          attributeFilter: ['data-dt-mode'],\n          subtree: false,\n        };\n\n        state.modeObserver = new MutationObserver(() => {\n          const currentParentMode = findParentMode(el);\n          el.setAttribute('data-dt-mode', getOppositeMode(currentParentMode));\n        });\n\n        // Observe root element\n        state.modeObserver.observe(document.documentElement, config);\n\n        // Observe all ancestor elements for data-dt-mode changes.\n        // This includes ancestors that don't yet have the attribute,\n        // because a sibling directive may set it after this one mounts\n        // (Vue 3 fires child mounted before parent mounted).\n        let parent = el.parentElement;\n        while (parent && parent !== document.documentElement) {\n          state.modeObserver.observe(parent, config);\n          parent = parent.parentElement;\n        }\n      }\n\n      return state;\n    }\n\n    function removeAttributes (el) {\n      el.removeAttribute('data-dt-mode');\n      el.removeAttribute('data-dt-contrast');\n      el.removeAttribute('data-dt-material');\n    }\n\n    function cleanup (state) {\n      if (!state) return;\n      if (state.contrastObserver) {\n        state.contrastObserver.disconnect();\n        state.contrastObserver = null;\n      }\n      if (state.materialObserver) {\n        state.materialObserver.disconnect();\n        state.materialObserver = null;\n      }\n      if (state.modeObserver) {\n        state.modeObserver.disconnect();\n        state.modeObserver = null;\n      }\n    }\n  },\n};\n\nexport default DtModeDirective;\n"],"mappings":"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"}

package/dist/lib/mode-directive/mode.js

@@ -1,73 +0,0 @@
-import { n as e } from "../../mode_constants-tb7TL85q.js";
-import { findParentMode as t, getOppositeMode as n, getRootContrast as r, getRootMaterial as i } from "../mode-island/utils.js";
-//#region directives/mode_directive/mode.js
-var a = e, o = { inverted: "invert" }, s = {
-	name: "dt-mode-directive",
-	install(e) {
-		let s = /* @__PURE__ */ new WeakMap();
-		e.directive("dt-mode", {
-			mounted(e, t) {
-				if (t.value === !1) return;
-				let n = l(e, c(t.arg));
-				s.set(e, n);
-			},
-			updated(e, t) {
-				let n = s.get(e), r = t.value !== t.oldValue, i = c(t.arg), a = i !== n?.arg;
-				if (!r && !a || (d(n), u(e), s.delete(e), t.value === !1)) return;
-				let o = l(e, i);
-				s.set(e, o);
-			},
-			unmounted(e) {
-				d(s.get(e)), u(e), s.delete(e);
-			}
-		});
-		function c(e) {
-			return e ? a.includes(e) ? e : o[e] ? (console.warn(`[DtModeDirective] Invalid mode "${e}". Did you mean "${o[e]}"? Falling back to "${o[e]}".`), o[e]) : (console.warn(`[DtModeDirective] Invalid mode "${e}". Valid modes: ${a.join(", ")}. Falling back to "invert".`), "invert") : "invert";
-		}
-		function l(e, a) {
-			let o = {
-				arg: a,
-				contrastObserver: null,
-				materialObserver: null,
-				modeObserver: null
-			};
-			if (e.setAttribute("data-dt-contrast", r()), o.contrastObserver = new MutationObserver(() => {
-				e.setAttribute("data-dt-contrast", r());
-			}), o.contrastObserver.observe(document.documentElement, {
-				attributes: !0,
-				attributeFilter: ["data-dt-contrast"]
-			}), e.setAttribute("data-dt-material", i()), o.materialObserver = new MutationObserver(() => {
-				e.setAttribute("data-dt-material", i());
-			}), o.materialObserver.observe(document.documentElement, {
-				attributes: !0,
-				attributeFilter: ["data-dt-material"]
-			}), a === "light" || a === "dark") e.setAttribute("data-dt-mode", a);
-			else {
-				let r = t(e);
-				e.setAttribute("data-dt-mode", n(r));
-				let i = {
-					attributes: !0,
-					attributeFilter: ["data-dt-mode"],
-					subtree: !1
-				};
-				o.modeObserver = new MutationObserver(() => {
-					let r = t(e);
-					e.setAttribute("data-dt-mode", n(r));
-				}), o.modeObserver.observe(document.documentElement, i);
-				let a = e.parentElement;
-				for (; a && a !== document.documentElement;) o.modeObserver.observe(a, i), a = a.parentElement;
-			}
-			return o;
-		}
-		function u(e) {
-			e.removeAttribute("data-dt-mode"), e.removeAttribute("data-dt-contrast"), e.removeAttribute("data-dt-material");
-		}
-		function d(e) {
-			e && (e.contrastObserver && (e.contrastObserver.disconnect(), e.contrastObserver = null), e.materialObserver && (e.materialObserver.disconnect(), e.materialObserver = null), e.modeObserver && (e.modeObserver.disconnect(), e.modeObserver = null));
-		}
-	}
-};
-//#endregion
-export { s as DtModeDirective, s as default };
-
-//# sourceMappingURL=mode.js.map

package/dist/lib/mode-directive/mode.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mode.js","names":[],"sources":["../../../directives/mode_directive/mode.js"],"sourcesContent":["import {\n  getOppositeMode,\n  getRootContrast,\n  getRootMaterial,\n  findParentMode,\n} from '@/components/ModeIsland/Utils';\nimport { CONTENT_MODE_VALUES } from '@/common/mode_constants';\n\nconst VALID_MODES = CONTENT_MODE_VALUES;\n\nconst SUGGESTIONS = {\n  inverted: 'invert',\n};\n\n/**\n * v-dt-mode directive — applies a color mode (light, dark, or invert) to an element.\n *\n * Sets `data-dt-mode`, `data-dt-contrast`, and `data-dt-material` attributes so\n * descendant token-based styles (`d-fc-primary`, `d-bgc-secondary`, etc.) resolve\n * to the correct palette under the active contrast and material.\n *\n * @example\n * // Explicit modes\n * <section v-dt-mode:dark>Dark content</section>\n * <section v-dt-mode:light>Light content</section>\n *\n * // Invert nearest parent mode (default when no arg)\n * <section v-dt-mode>Inverted content</section>\n * <section v-dt-mode:invert>Same as above</section>\n *\n * // Dynamic arg\n * <section v-dt-mode:[reactiveMode]>Reactive mode</section>\n *\n * // Disable with false value\n * <section v-dt-mode:dark=\"false\">No mode applied</section>\n */\nexport const DtModeDirective = {\n  name: 'dt-mode-directive',\n  install (app) {\n    const instances = new WeakMap();\n\n    app.directive('dt-mode', {\n      mounted (el, binding) {\n        if (binding.value === false) return;\n        const mode = resolveArg(binding.arg);\n        const state = applyMode(el, mode);\n        instances.set(el, state);\n      },\n\n      updated (el, binding) {\n        const prev = instances.get(el);\n        const valueChanged = binding.value !== binding.oldValue;\n        const resolvedArg = resolveArg(binding.arg);\n        const argChanged = resolvedArg !== prev?.arg;\n        if (!valueChanged && !argChanged) return;\n\n        cleanup(prev);\n        removeAttributes(el);\n        instances.delete(el);\n\n        if (binding.value === false) return;\n\n        const state = applyMode(el, resolvedArg);\n        instances.set(el, state);\n      },\n\n      unmounted (el) {\n        cleanup(instances.get(el));\n        removeAttributes(el);\n        instances.delete(el);\n      },\n    });\n\n    function resolveArg (arg) {\n      if (!arg) return 'invert';\n      if (VALID_MODES.includes(arg)) return arg;\n      if (SUGGESTIONS[arg]) {\n        console.warn(\n          `[DtModeDirective] Invalid mode \"${arg}\". Did you mean \"${SUGGESTIONS[arg]}\"? Falling back to \"${SUGGESTIONS[arg]}\".`,\n        );\n        return SUGGESTIONS[arg];\n      }\n      console.warn(\n        `[DtModeDirective] Invalid mode \"${arg}\". Valid modes: ${VALID_MODES.join(', ')}. Falling back to \"invert\".`,\n      );\n      return 'invert';\n    }\n\n    function applyMode (el, mode) {\n      const state = {\n        arg: mode,\n        contrastObserver: null,\n        materialObserver: null,\n        modeObserver: null,\n      };\n\n      // Set contrast from root\n      el.setAttribute('data-dt-contrast', getRootContrast());\n\n      // Watch for contrast changes on root\n      state.contrastObserver = new MutationObserver(() => {\n        el.setAttribute('data-dt-contrast', getRootContrast());\n      });\n      state.contrastObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-contrast'],\n      });\n\n      // Set material from root\n      el.setAttribute('data-dt-material', getRootMaterial());\n\n      // Watch for material changes on root\n      state.materialObserver = new MutationObserver(() => {\n        el.setAttribute('data-dt-material', getRootMaterial());\n      });\n      state.materialObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-material'],\n      });\n\n      if (mode === 'light' || mode === 'dark') {\n        el.setAttribute('data-dt-mode', mode);\n      } else {\n        // invert mode\n        const parentMode = findParentMode(el);\n        el.setAttribute('data-dt-mode', getOppositeMode(parentMode));\n\n        // Watch for mode changes on root and ancestors\n        const config = {\n          attributes: true,\n          attributeFilter: ['data-dt-mode'],\n          subtree: false,\n        };\n\n        state.modeObserver = new MutationObserver(() => {\n          const currentParentMode = findParentMode(el);\n          el.setAttribute('data-dt-mode', getOppositeMode(currentParentMode));\n        });\n\n        // Observe root element\n        state.modeObserver.observe(document.documentElement, config);\n\n        // Observe all ancestor elements for data-dt-mode changes.\n        // This includes ancestors that don't yet have the attribute,\n        // because a sibling directive may set it after this one mounts\n        // (Vue 3 fires child mounted before parent mounted).\n        let parent = el.parentElement;\n        while (parent && parent !== document.documentElement) {\n          state.modeObserver.observe(parent, config);\n          parent = parent.parentElement;\n        }\n      }\n\n      return state;\n    }\n\n    function removeAttributes (el) {\n      el.removeAttribute('data-dt-mode');\n      el.removeAttribute('data-dt-contrast');\n      el.removeAttribute('data-dt-material');\n    }\n\n    function cleanup (state) {\n      if (!state) return;\n      if (state.contrastObserver) {\n        state.contrastObserver.disconnect();\n        state.contrastObserver = null;\n      }\n      if (state.materialObserver) {\n        state.materialObserver.disconnect();\n        state.materialObserver = null;\n      }\n      if (state.modeObserver) {\n        state.modeObserver.disconnect();\n        state.modeObserver = null;\n      }\n    }\n  },\n};\n\nexport default DtModeDirective;\n"],"mappings":"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"}

package/dist/lib/mode-island/index.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./mode-island-constants.cjs`),t=require(`./mode-island.cjs`);exports.DT_MODE_ISLAND_TYPES=e.DT_MODE_ISLAND_TYPES,exports.DtModeIsland=t.default;

package/dist/lib/mode-island/index.js

@@ -1,3 +0,0 @@
-import { DT_MODE_ISLAND_TYPES as e } from "./mode-island-constants.js";
-import t from "./mode-island.js";
-export { e as DT_MODE_ISLAND_TYPES, t as DtModeIsland };

package/dist/lib/mode-island/mode-island-constants.cjs

@@ -1,2 +0,0 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={INVERTED:`inverted`,LIGHT:`light`,DARK:`dark`},t={DT_MODE_ISLAND_TYPES:e};exports.DT_MODE_ISLAND_TYPES=e,exports.default=t;
-//# sourceMappingURL=mode-island-constants.cjs.map

package/dist/lib/mode-island/mode-island-constants.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"mode-island-constants.cjs","names":[],"sources":["../../../components/ModeIsland/ModeIslandConstants.js"],"sourcesContent":["export const DT_MODE_ISLAND_TYPES = {\n  INVERTED: 'inverted',\n  LIGHT: 'light',\n  DARK: 'dark',\n};\n\nexport default {\n  DT_MODE_ISLAND_TYPES,\n};"],"mappings":"+FAAA,IAAa,EAAuB,CAClC,SAAU,WACV,MAAO,QACP,KAAM,OACP,CAED,EAAe,CACb,uBACD"}

package/dist/lib/mode-island/mode-island-constants.js

@@ -1,10 +0,0 @@
-//#region components/ModeIsland/ModeIslandConstants.js
-var e = {
-	INVERTED: "inverted",
-	LIGHT: "light",
-	DARK: "dark"
-}, t = { DT_MODE_ISLAND_TYPES: e };
-//#endregion
-export { e as DT_MODE_ISLAND_TYPES, t as default };
-
-//# sourceMappingURL=mode-island-constants.js.map

package/dist/lib/mode-island/mode-island-constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mode-island-constants.js","names":[],"sources":["../../../components/ModeIsland/ModeIslandConstants.js"],"sourcesContent":["export const DT_MODE_ISLAND_TYPES = {\n  INVERTED: 'inverted',\n  LIGHT: 'light',\n  DARK: 'dark',\n};\n\nexport default {\n  DT_MODE_ISLAND_TYPES,\n};"],"mappings":";AAAA,IAAa,IAAuB;CAClC,UAAU;CACV,OAAO;CACP,MAAM;CACP,EAED,IAAe,EACb,yBACD"}

package/dist/lib/mode-island/mode-island.cjs

@@ -1,2 +0,0 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./utils.cjs`),n=require(`./mode-island-constants.cjs`),r=require(`./validators.cjs`);let i=require(`vue`);var a={name:`DtModeIsland`,provide(){return{dtModeIslandMode:()=>this.computedMode}},inject:{parentModeIslandMode:{from:`dtModeIslandMode`,default:null}},props:{as:{type:String,default:`div`},mode:{type:String,default:n.DT_MODE_ISLAND_TYPES.INVERTED,validator:r.modeValidator}},data(){return{currentContrast:t.getRootContrast(),currentMaterial:t.getRootMaterial(),contrastObserver:null,materialObserver:null,modeObserver:null,elementRef:null,calculatedMode:null}},computed:{isInverted(){return this.mode===n.DT_MODE_ISLAND_TYPES.INVERTED},invertedAttribute(){return this.isInverted?``:null},computedMode(){return this.mode===n.DT_MODE_ISLAND_TYPES.LIGHT||this.mode===n.DT_MODE_ISLAND_TYPES.DARK?this.mode:this.mode===n.DT_MODE_ISLAND_TYPES.INVERTED&&this.calculatedMode?this.calculatedMode:this.calculateInvertedMode()}},beforeCreate(){if(this.$attrs&&this.$attrs[`data-dt-brand`])throw Error(`[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.`)},mounted(){this.elementRef=this.$el,this.setupContrastObserver(),this.setupMaterialObserver(),this.isInverted&&(this.calculatedMode=this.calculateInvertedMode(),this.setupModeObserver()),this.currentContrast=t.getRootContrast(),this.currentMaterial=t.getRootMaterial()},beforeUnmount(){this.contrastObserver&&(this.contrastObserver.disconnect(),this.contrastObserver=null),this.materialObserver&&(this.materialObserver.disconnect(),this.materialObserver=null),this.modeObserver&&(this.modeObserver.disconnect(),this.modeObserver=null)},methods:{calculateInvertedMode(){return this.parentModeIslandMode?t.getOppositeMode(typeof this.parentModeIslandMode==`function`?this.parentModeIslandMode():this.parentModeIslandMode):this.elementRef?t.getOppositeMode(t.findParentMode(this.elementRef)):t.getOppositeMode(t.getRootMode())},setupContrastObserver(){this.contrastObserver=new MutationObserver(e=>{for(let n of e)n.type===`attributes`&&n.attributeName===`data-dt-contrast`&&(this.currentContrast=t.getRootContrast())}),this.contrastObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-dt-contrast`]})},setupMaterialObserver(){this.materialObserver=new MutationObserver(e=>{for(let n of e)n.type===`attributes`&&n.attributeName===`data-dt-material`&&(this.currentMaterial=t.getRootMaterial())}),this.materialObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-dt-material`]})},setupModeObserver(){let e={attributes:!0,attributeFilter:[`data-dt-mode`],subtree:!1};this.modeObserver=new MutationObserver(e=>{for(let t of e)t.type===`attributes`&&t.attributeName===`data-dt-mode`&&(this.calculatedMode=this.calculateInvertedMode())}),this.modeObserver.observe(document.documentElement,e);let t=this.elementRef?.parentElement;for(;t;)t.hasAttribute(`data-dt-mode`)&&this.modeObserver.observe(t,e),t=t.parentElement}}};function o(e,t,n,r,a,o){return(0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(n.as),{class:`d-mode-island`,"data-dt-mode":o.computedMode,"data-mode-island-inverted":o.invertedAttribute,"data-dt-contrast":a.currentContrast,"data-dt-material":a.currentMaterial},{default:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`default`)]),_:3},8,[`data-dt-mode`,`data-mode-island-inverted`,`data-dt-contrast`,`data-dt-material`])}var s=e.t(a,[[`render`,o]]);exports.default=s;
-//# sourceMappingURL=mode-island.cjs.map

package/dist/lib/mode-island/mode-island.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"mode-island.cjs","names":[],"sources":["../../../components/ModeIsland/ModeIsland.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    class=\"d-mode-island\"\n    :data-dt-mode=\"computedMode\"\n    :data-mode-island-inverted=\"invertedAttribute\"\n    :data-dt-contrast=\"currentContrast\"\n    :data-dt-material=\"currentMaterial\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_MODE_ISLAND_TYPES } from './ModeIslandConstants';\nimport { modeValidator } from './Validators';\nimport {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\n  getRootMaterial,\n  findParentMode,\n} from './Utils';\n\nexport default {\n  name: 'DtModeIsland',\n\n  provide () {\n    return {\n      dtModeIslandMode: () => this.computedMode,\n    };\n  },\n\n  inject: {\n    parentModeIslandMode: {\n      from: 'dtModeIslandMode',\n      default: null,\n    },\n  },\n\n  props: {\n    /**\n     * Set this prop to render the mode island as a specific HTML element.\n     * @type {String}\n     * @values div, section, nav, article, aside, header, footer, main\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The mode to apply to the island.\n     * - 'inverted': Opposite of parent or root mode\n     * - 'light': Always light mode\n     * - 'dark': Always dark mode\n     * @type {String}\n     * @values inverted, light, dark\n     */\n    mode: {\n      type: String,\n      default: DT_MODE_ISLAND_TYPES.INVERTED,\n      validator: modeValidator,\n    },\n  },\n\n  data () {\n    return {\n      currentContrast: getRootContrast(),\n      currentMaterial: getRootMaterial(),\n      contrastObserver: null,\n      materialObserver: null,\n      modeObserver: null,\n      elementRef: null,\n      calculatedMode: null, // Store calculated mode as reactive data\n    };\n  },\n\n  computed: {\n    isInverted () {\n      return this.mode === DT_MODE_ISLAND_TYPES.INVERTED;\n    },\n\n    invertedAttribute () {\n      return this.isInverted ? '' : null;\n    },\n\n    computedMode () {\n      // If mode is explicitly light or dark, use it directly\n      if (this.mode === DT_MODE_ISLAND_TYPES.LIGHT || this.mode === DT_MODE_ISLAND_TYPES.DARK) {\n        return this.mode;\n      }\n\n      // If mode is inverted, use the calculated mode if available\n      if (this.mode === DT_MODE_ISLAND_TYPES.INVERTED && this.calculatedMode) {\n        return this.calculatedMode;\n      }\n\n      // Otherwise calculate it now\n      return this.calculateInvertedMode();\n    },\n  },\n\n  beforeCreate () {\n    // Throw error if data-dt-brand is manually set\n    if (this.$attrs && this.$attrs['data-dt-brand']) {\n      throw new Error('[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.');\n    }\n  },\n\n  mounted () {\n    // Store element reference\n    this.elementRef = this.$el;\n\n    // Setup MutationObserver to watch for contrast changes on root\n    this.setupContrastObserver();\n\n    // Setup MutationObserver to watch for material changes on root\n    this.setupMaterialObserver();\n\n    // Setup MutationObserver to watch for mode changes (only if inverted)\n    if (this.isInverted) {\n      // Initialize the calculated mode\n      this.calculatedMode = this.calculateInvertedMode();\n      this.setupModeObserver();\n    }\n\n    // Initial values\n    this.currentContrast = getRootContrast();\n    this.currentMaterial = getRootMaterial();\n  },\n\n  beforeUnmount () {\n    // Cleanup observers\n    if (this.contrastObserver) {\n      this.contrastObserver.disconnect();\n      this.contrastObserver = null;\n    }\n    if (this.materialObserver) {\n      this.materialObserver.disconnect();\n      this.materialObserver = null;\n    }\n    if (this.modeObserver) {\n      this.modeObserver.disconnect();\n      this.modeObserver = null;\n    }\n  },\n\n  methods: {\n    calculateInvertedMode () {\n      // First check if there's a parent mode island\n      if (this.parentModeIslandMode) {\n        const parentMode = typeof this.parentModeIslandMode === 'function'\n          ? this.parentModeIslandMode()\n          : this.parentModeIslandMode;\n        return getOppositeMode(parentMode);\n      }\n\n      // Otherwise, find the nearest parent with data-dt-mode\n      if (this.elementRef) {\n        const parentMode = findParentMode(this.elementRef);\n        return getOppositeMode(parentMode);\n      }\n\n      // Default fallback\n      return getOppositeMode(getRootMode());\n    },\n\n    setupContrastObserver () {\n      this.contrastObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-contrast') {\n            this.currentContrast = getRootContrast();\n          }\n        }\n      });\n\n      this.contrastObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-contrast'],\n      });\n    },\n\n    setupMaterialObserver () {\n      this.materialObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-material') {\n            this.currentMaterial = getRootMaterial();\n          }\n        }\n      });\n\n      this.materialObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-material'],\n      });\n    },\n\n    setupModeObserver () {\n      const config = {\n        attributes: true,\n        attributeFilter: ['data-dt-mode'],\n        subtree: false,\n      };\n\n      this.modeObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-mode') {\n            // Recalculate and update the reactive data property\n            this.calculatedMode = this.calculateInvertedMode();\n          }\n        }\n      });\n\n      // Observe root element\n      this.modeObserver.observe(document.documentElement, config);\n\n      // Also observe all parent elements with data-dt-mode\n      let parent = this.elementRef?.parentElement;\n      while (parent) {\n        if (parent.hasAttribute('data-dt-mode')) {\n          this.modeObserver.observe(parent, config);\n        }\n        parent = parent.parentElement;\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}