@dialpad/dialtone-vue 3.218.3 → 3.219.0-next.2

package/dist/lib/keyboard-shortcut/keyboard-shortcut.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span class=\"d-keyboard-shortcut--sr-only\">\n      {{ screenReaderText || generatedScreenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`icon-${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else-if=\"item.trim()\"\n        :key=\"`text-${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconOption,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n  '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n  '{cmd}': 'Command',\n  '{opt}': 'Option',\n  '{win}': 'Windows',\n  '{arrow-right}': 'Right Arrow',\n  '{arrow-left}': 'Left Arrow',\n  '{arrow-up}': 'Up Arrow',\n  '{arrow-down}': 'Down Arrow',\n  '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n  'ctrl': 'Control',\n  'alt': 'Alt',\n  'esc': 'Escape',\n  'del': 'Delete',\n  'ins': 'Insert',\n  'pgup': 'Page Up',\n  'pgdn': 'Page Down',\n  'num': 'Number',\n  'caps': 'Caps Lock',\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconOption,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Optional text to override the auto-generated accessible text for assistive technology.\n     * If not provided, accessible text will be automatically generated from the shortcut.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n\n    // Generates accessible text for the keyboard shortcut\n    generatedScreenReaderText () {\n      return this.formattedShortcutSplit\n        .map(item => {\n          const trimmedItem = item.trim();\n\n          // Convert icon aliases to readable text\n          if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n            return ICON_ALIAS_TO_TEXT[trimmedItem];\n          }\n\n          // Convert key abbreviations to full names (case-insensitive)\n          const lowerItem = trimmedItem.toLowerCase();\n          if (KEY_ABBREVIATIONS[lowerItem]) {\n            return KEY_ABBREVIATIONS[lowerItem];\n          }\n\n          // Return the key as-is if it's not an alias or abbreviation\n          return trimmedItem;\n        })\n        .filter(item => item) // Remove empty strings\n        .join(' ');\n    },\n  },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconOption","ICON_ALIAS_TO_TEXT","KEY_ABBREVIATIONS","_sfc_main","DtIconPlus","result","key","iconAliasString","regex","item","trimmedItem","lowerItem","_hoisted_1","_createElementBlock","_normalizeClass","$props","_createElementVNode","_toDisplayString","$options","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":"uOAmDMA,EAAyB,CAC7B,QAASC,EAAAA,iBACT,gBAAiBC,EAAAA,iBACjB,eAAgBC,EAAAA,gBAChB,aAAcC,EAAAA,cACd,eAAgBC,EAAAA,gBAChB,QAASC,EAAAA,cACT,QAASC,EAAAA,YACX,EAGMC,EAAqB,CACzB,QAAS,UACT,QAAS,SACT,QAAS,UACT,gBAAiB,cACjB,eAAgB,aAChB,aAAc,WACd,eAAgB,aAChB,SAAU,MACZ,EAGMC,EAAoB,CACxB,KAAQ,UACR,IAAO,MACP,IAAO,SACP,IAAO,SACP,IAAO,SACP,KAAQ,UACR,KAAQ,YACR,IAAO,SACP,KAAQ,WACV,EAMKC,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,qBAEN,WAAY,CACV,iBAAAT,EAAAA,iBACA,iBAAAC,EAAAA,iBACA,gBAAAC,EAAAA,8BACAC,EAAAA,cACA,gBAAAC,EAAAA,8BACAC,EAAAA,2BACAC,EAAAA,wBACAI,EAAAA,YAGF,MAAO,CAKL,SAAU,CACR,KAAM,QACN,QAAS,IAOX,SAAU,CACR,KAAM,OACN,SAAU,IAOZ,iBAAkB,CAChB,KAAM,OACN,QAAS,OAIb,MAAQ,CACN,MAAO,CACL,UAAW,OAEf,EAEA,SAAU,CACR,OAAS,CACP,MAAO,CACL,GAAGX,EACH,SAAUW,EAAAA,WAEd,EAEA,uBAAyB,CACvB,OAAO,KAAK,SAAS,QAAQ,KAAK,UAAW,QAAQ,CACvD,EAEA,mBAAqB,CACnB,OAAO,OAAO,KAAKX,CAAsB,EAAE,OAAO,CAACY,EAAQC,IAClDD,EAAO,QAAQ,IAAI,OAAO,IAAMC,EAAM,IAAK,IAAI,EAAGb,EAAuBa,CAAG,CAAC,EACnF,KAAK,qBAAqB,CAC/B,EAGA,wBAA0B,CACxB,MAAMC,EAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG,EAOlDC,EAAQ,IAAI,OAAO,IAAID,CAAe,IAAK,IAAI,EACrD,OAAO,KAAK,kBAAkB,MAAMC,CAAK,EAAE,OAAO,OAAO,CAC3D,EAGA,2BAA6B,CAC3B,OAAO,KAAK,uBACT,IAAIC,GAAQ,CACX,MAAMC,EAAcD,EAAK,KAAI,EAG7B,GAAIR,EAAmBS,CAAW,EAChC,OAAOT,EAAmBS,CAAW,EAIvC,MAAMC,EAAYD,EAAY,YAAW,EACzC,OAAIR,EAAkBS,CAAS,EACtBT,EAAkBS,CAAS,EAI7BD,CACT,CAAC,EACA,OAAOD,GAAQA,CAAI,EACnB,KAAK,GAAG,CACb,EAEJ,EA3LUG,EAAA,CAAA,MAAM,8BAA8B,+DAN5CC,EAAAA,mBAkCM,MAAA,CAjCH,MAAKC,EAAAA,eAAA,wDAA0EC,EAAA,QAAQ,MAKxFC,qBAEO,OAFPJ,EAEOK,kBADFF,EAAA,kBAAoBG,EAAA,yBAAyB,EAAA,CAAA,GAElDC,EAAAA,UAAA,EAAA,EAAAN,EAAAA,mBAwBWO,WAAA,KAAAC,EAAAA,WAvBWH,EAAA,uBAAsB,CAAlCT,EAAM,yDAINS,EAAA,MAAMT,CAAI,iBAFlBa,EAAAA,YAUEC,EAAAA,wBATKL,EAAA,MAAMT,CAAI,CAAA,EAAA,CAEd,IAAG,QAAU,CAAC,IAAIA,CAAI,GACvB,KAAK,MACL,cAAY,OACX,MAAKK,EAAAA,eAAA,oEAA8FC,EAAA,QAAQ,wBAMjGN,EAAK,KAAI,iBADtBI,EAAAA,mBASE,OAAA,CAPC,IAAG,QAAU,CAAC,IAAIJ,CAAI,GACvB,cAAY,OACX,MAAKK,EAAAA,eAAA,oEAA8FC,EAAA,QAAQ,IAI5G,UAAQN"}
+{"version":3,"file":"keyboard-shortcut.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span class=\"d-keyboard-shortcut--sr-only\">\n      {{ screenReaderText || generatedScreenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`icon-${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <dt-text\n        v-else-if=\"item.trim()\"\n        :key=\"`text-${i}-${item}`\"\n        kind=\"body\"\n        :size=\"200\"\n        numeric\n        :density=\"400\"\n        :tone=\"inverted ? 'secondary-inverted' : 'tertiary'\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n      >\n        <!-- eslint-disable-next-line vue/no-v-html -->\n        <span v-html=\"item\" />\n      </dt-text>\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconOption,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue';\nimport { DtText } from '@/components/text';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n  '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n  '{cmd}': 'Command',\n  '{opt}': 'Option',\n  '{win}': 'Windows',\n  '{arrow-right}': 'Right Arrow',\n  '{arrow-left}': 'Left Arrow',\n  '{arrow-up}': 'Up Arrow',\n  '{arrow-down}': 'Down Arrow',\n  '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n  'ctrl': 'Control',\n  'alt': 'Alt',\n  'esc': 'Escape',\n  'del': 'Delete',\n  'ins': 'Insert',\n  'pgup': 'Page Up',\n  'pgdn': 'Page Down',\n  'num': 'Number',\n  'caps': 'Caps Lock',\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconOption,\n    DtIconPlus,\n    DtText,\n  },\n\n  props: {\n    /**\n     * @deprecated Use v-dt-mode instead.\n     * If true, applies inverted styles.\n     * @values true, false\n     * @deprecated Use v-dt-mode directive instead.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Optional text to override the auto-generated accessible text for assistive technology.\n     * If not provided, accessible text will be automatically generated from the shortcut.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n\n    // Generates accessible text for the keyboard shortcut\n    generatedScreenReaderText () {\n      return this.formattedShortcutSplit\n        .map(item => {\n          const trimmedItem = item.trim();\n\n          // Convert icon aliases to readable text\n          if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n            return ICON_ALIAS_TO_TEXT[trimmedItem];\n          }\n\n          // Convert key abbreviations to full names (case-insensitive)\n          const lowerItem = trimmedItem.toLowerCase();\n          if (KEY_ABBREVIATIONS[lowerItem]) {\n            return KEY_ABBREVIATIONS[lowerItem];\n          }\n\n          // Return the key as-is if it's not an alias or abbreviation\n          return trimmedItem;\n        })\n        .filter(item => item) // Remove empty strings\n        .join(' ');\n    },\n  },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconOption","ICON_ALIAS_TO_TEXT","KEY_ABBREVIATIONS","_sfc_main","DtIconPlus","DtText","result","key","iconAliasString","regex","item","trimmedItem","lowerItem","_hoisted_1","_createElementBlock","_normalizeClass","$props","_createElementVNode","_toDisplayString","$options","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_component_dt_text","_hoisted_2"],"mappings":"oQA0DMA,EAAyB,CAC7B,QAASC,EAAAA,iBACT,gBAAiBC,EAAAA,iBACjB,eAAgBC,EAAAA,gBAChB,aAAcC,EAAAA,cACd,eAAgBC,EAAAA,gBAChB,QAASC,EAAAA,cACT,QAASC,EAAAA,YACX,EAGMC,EAAqB,CACzB,QAAS,UACT,QAAS,SACT,QAAS,UACT,gBAAiB,cACjB,eAAgB,aAChB,aAAc,WACd,eAAgB,aAChB,SAAU,MACZ,EAGMC,EAAoB,CACxB,KAAQ,UACR,IAAO,MACP,IAAO,SACP,IAAO,SACP,IAAO,SACP,KAAQ,UACR,KAAQ,YACR,IAAO,SACP,KAAQ,WACV,EAMKC,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,qBAEN,WAAY,CACV,iBAAAT,EAAAA,iBACA,iBAAAC,EAAAA,iBACA,gBAAAC,EAAAA,8BACAC,EAAAA,cACA,gBAAAC,EAAAA,8BACAC,EAAAA,2BACAC,EAAAA,wBACAI,EAAAA,WACA,OAAAC,EAAAA,SAGF,MAAO,CAOL,SAAU,CACR,KAAM,QACN,QAAS,IAOX,SAAU,CACR,KAAM,OACN,SAAU,IAOZ,iBAAkB,CAChB,KAAM,OACN,QAAS,OAIb,MAAQ,CACN,MAAO,CACL,UAAW,OAEf,EAEA,SAAU,CACR,OAAS,CACP,MAAO,CACL,GAAGZ,EACH,SAAUW,EAAAA,WAEd,EAEA,uBAAyB,CACvB,OAAO,KAAK,SAAS,QAAQ,KAAK,UAAW,QAAQ,CACvD,EAEA,mBAAqB,CACnB,OAAO,OAAO,KAAKX,CAAsB,EAAE,OAAO,CAACa,EAAQC,IAClDD,EAAO,QAAQ,IAAI,OAAO,IAAMC,EAAM,IAAK,IAAI,EAAGd,EAAuBc,CAAG,CAAC,EACnF,KAAK,qBAAqB,CAC/B,EAGA,wBAA0B,CACxB,MAAMC,EAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG,EAOlDC,EAAQ,IAAI,OAAO,IAAID,CAAe,IAAK,IAAI,EACrD,OAAO,KAAK,kBAAkB,MAAMC,CAAK,EAAE,OAAO,OAAO,CAC3D,EAGA,2BAA6B,CAC3B,OAAO,KAAK,uBACT,IAAIC,GAAQ,CACX,MAAMC,EAAcD,EAAK,KAAI,EAG7B,GAAIT,EAAmBU,CAAW,EAChC,OAAOV,EAAmBU,CAAW,EAIvC,MAAMC,EAAYD,EAAY,YAAW,EACzC,OAAIT,EAAkBU,CAAS,EACtBV,EAAkBU,CAAS,EAI7BD,CACT,CAAC,EACA,OAAOD,GAAQA,CAAI,EACnB,KAAK,GAAG,CACb,EAEJ,EAtMUG,EAAA,CAAA,MAAM,8BAA8B,qGAN5CC,EAAAA,mBAyCM,MAAA,CAxCH,MAAKC,EAAAA,eAAA,wDAA0EC,EAAA,QAAQ,MAKxFC,qBAEO,OAFPJ,EAEOK,kBADFF,EAAA,kBAAoBG,EAAA,yBAAyB,EAAA,CAAA,GAElDC,EAAAA,UAAA,EAAA,EAAAN,EAAAA,mBA+BWO,WAAA,KAAAC,EAAAA,WA9BWH,EAAA,uBAAsB,CAAlCT,EAAM,yDAINS,EAAA,MAAMT,CAAI,iBAFlBa,EAAAA,YAUEC,EAAAA,wBATKL,EAAA,MAAMT,CAAI,CAAA,EAAA,CAEd,IAAG,QAAU,CAAC,IAAIA,CAAI,GACvB,KAAK,MACL,cAAY,OACX,MAAKK,EAAAA,eAAA,oEAA8FC,EAAA,QAAQ,wBAMjGN,EAAK,KAAI,iBADtBa,EAAAA,YAgBUE,EAAA,CAdP,IAAG,QAAU,CAAC,IAAIf,CAAI,GACvB,KAAK,OACJ,KAAM,IACP,QAAA,GACC,QAAS,IACT,KAAMM,EAAA,SAAQ,qBAAA,WACf,cAAY,OACX,MAAKD,EAAAA,eAAA,oEAA8FC,EAAA,QAAQ,wBAM5G,IAAsB,CAAtBC,EAAAA,mBAAsB,OAAA,CAAhB,UAAQP,CAAI,EAAA,KAAA,EAAAgB,CAAA"}

package/dist/lib/keyboard-shortcut/keyboard-shortcut.js

@@ -1,15 +1,16 @@
-import { DtIconPlus as u, DtIconOption as h, DtIconCommand as w, DtIconArrowDown as _, DtIconArrowUp as f, DtIconArrowLeft as S, DtIconArrowRight as g, DtIconLayoutGrid as y } from "@dialpad/dialtone-icons/vue3";
-import { openBlock as n, createElementBlock as c, normalizeClass as s, createElementVNode as D, toDisplayString as I, Fragment as l, renderList as A, createBlock as k, resolveDynamicComponent as b, createCommentVNode as C } from "vue";
-import { _ as T } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { DtIconPlus as u, DtIconOption as w, DtIconCommand as f, DtIconArrowDown as S, DtIconArrowUp as y, DtIconArrowLeft as g, DtIconArrowRight as D, DtIconLayoutGrid as I } from "@dialpad/dialtone-icons/vue";
+import { resolveComponent as A, openBlock as n, createElementBlock as c, normalizeClass as s, createElementVNode as l, toDisplayString as x, Fragment as p, renderList as b, createBlock as m, resolveDynamicComponent as C, withCtx as T, createCommentVNode as v } from "vue";
+import { _ as E } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import L from "../text/text.js";
 const i = {
-  "{win}": y,
-  "{arrow-right}": g,
-  "{arrow-left}": S,
-  "{arrow-up}": f,
-  "{arrow-down}": _,
-  "{cmd}": w,
-  "{opt}": h
-}, p = {
+  "{win}": I,
+  "{arrow-right}": D,
+  "{arrow-left}": g,
+  "{arrow-up}": y,
+  "{arrow-down}": S,
+  "{cmd}": f,
+  "{opt}": w
+}, h = {
   "{cmd}": "Command",
   "{opt}": "Option",
   "{win}": "Windows",
@@ -18,7 +19,7 @@ const i = {
   "{arrow-up}": "Up Arrow",
   "{arrow-down}": "Down Arrow",
   "{plus}": "plus"
-}, m = {
+}, _ = {
   ctrl: "Control",
   alt: "Alt",
   esc: "Escape",
@@ -28,23 +29,26 @@ const i = {
   pgdn: "Page Down",
   num: "Number",
   caps: "Caps Lock"
-}, x = {
+}, O = {
   compatConfig: { MODE: 3 },
   name: "DtKeyboardShortcut",
   components: {
-    DtIconLayoutGrid: y,
-    DtIconArrowRight: g,
-    DtIconArrowLeft: S,
-    DtIconArrowUp: f,
-    DtIconArrowDown: _,
-    DtIconCommand: w,
-    DtIconOption: h,
-    DtIconPlus: u
+    DtIconLayoutGrid: I,
+    DtIconArrowRight: D,
+    DtIconArrowLeft: g,
+    DtIconArrowUp: y,
+    DtIconArrowDown: S,
+    DtIconCommand: f,
+    DtIconOption: w,
+    DtIconPlus: u,
+    DtText: L
   },
   props: {
     /**
+     * @deprecated Use v-dt-mode instead.
      * If true, applies inverted styles.
      * @values true, false
+     * @deprecated Use v-dt-mode directive instead.
      */
     inverted: {
       type: Boolean,
@@ -83,56 +87,66 @@ const i = {
       return this.shortcut.replace(this.separator, "{plus}");
     },
     formattedShortcut() {
-      return Object.keys(i).reduce((r, t) => r.replace(new RegExp("{" + t + "}", "gi"), i[t]), this.shortcutWithSeparator);
+      return Object.keys(i).reduce((e, t) => e.replace(new RegExp("{" + t + "}", "gi"), i[t]), this.shortcutWithSeparator);
     },
     // Splits any icon based aliases into their own array items.
     formattedShortcutSplit() {
-      const r = Object.keys(this.icons).join("|"), t = new RegExp(`(${r})`, "gi");
+      const e = Object.keys(this.icons).join("|"), t = new RegExp(`(${e})`, "gi");
       return this.formattedShortcut.split(t).filter(Boolean);
     },
     // Generates accessible text for the keyboard shortcut
     generatedScreenReaderText() {
-      return this.formattedShortcutSplit.map((r) => {
-        const t = r.trim();
-        if (p[t])
-          return p[t];
-        const e = t.toLowerCase();
-        return m[e] ? m[e] : t;
-      }).filter((r) => r).join(" ");
+      return this.formattedShortcutSplit.map((e) => {
+        const t = e.trim();
+        if (h[t])
+          return h[t];
+        const r = t.toLowerCase();
+        return _[r] ? _[r] : t;
+      }).filter((e) => e).join(" ");
     }
   }
-}, E = { class: "d-keyboard-shortcut--sr-only" }, L = ["innerHTML"];
-function O(r, t, e, R, v, a) {
+}, R = { class: "d-keyboard-shortcut--sr-only" }, B = ["innerHTML"];
+function N(e, t, r, j, U, a) {
+  const k = A("dt-text");
   return n(), c("kbd", {
     class: s([
       "d-keyboard-shortcut",
-      { "d-keyboard-shortcut--inverted": e.inverted }
+      { "d-keyboard-shortcut--inverted": r.inverted }
     ])
   }, [
-    D("span", E, I(e.screenReaderText || a.generatedScreenReaderText), 1),
-    (n(!0), c(l, null, A(a.formattedShortcutSplit, (o, d) => (n(), c(l, null, [
-      a.icons[o] ? (n(), k(b(a.icons[o]), {
+    l("span", R, x(r.screenReaderText || a.generatedScreenReaderText), 1),
+    (n(!0), c(p, null, b(a.formattedShortcutSplit, (o, d) => (n(), c(p, null, [
+      a.icons[o] ? (n(), m(C(a.icons[o]), {
         key: `icon-${d}-${o}`,
         size: "100",
         "aria-hidden": "true",
         class: s([
           "d-keyboard-shortcut__icon",
-          { "d-keyboard-shortcut__icon--inverted": e.inverted }
+          { "d-keyboard-shortcut__icon--inverted": r.inverted }
         ])
-      }, null, 8, ["class"])) : o.trim() ? (n(), c("span", {
+      }, null, 8, ["class"])) : o.trim() ? (n(), m(k, {
         key: `text-${d}-${o}`,
+        kind: "body",
+        size: 200,
+        numeric: "",
+        density: 400,
+        tone: r.inverted ? "secondary-inverted" : "tertiary",
         "aria-hidden": "true",
         class: s([
           "d-keyboard-shortcut__item",
-          { "d-keyboard-shortcut__item--inverted": e.inverted }
+          { "d-keyboard-shortcut__item--inverted": r.inverted }
+        ])
+      }, {
+        default: T(() => [
+          l("span", { innerHTML: o }, null, 8, B)
         ]),
-        innerHTML: o
-      }, null, 10, L)) : C("", !0)
+        _: 2
+      }, 1032, ["tone", "class"])) : v("", !0)
     ], 64))), 256))
   ], 2);
 }
-const U = /* @__PURE__ */ T(x, [["render", O]]);
+const P = /* @__PURE__ */ E(O, [["render", N]]);
 export {
-  U as default
+  P as default
 };
 //# sourceMappingURL=keyboard-shortcut.js.map

package/dist/lib/keyboard-shortcut/keyboard-shortcut.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span class=\"d-keyboard-shortcut--sr-only\">\n      {{ screenReaderText || generatedScreenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`icon-${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else-if=\"item.trim()\"\n        :key=\"`text-${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconOption,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n  '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n  '{cmd}': 'Command',\n  '{opt}': 'Option',\n  '{win}': 'Windows',\n  '{arrow-right}': 'Right Arrow',\n  '{arrow-left}': 'Left Arrow',\n  '{arrow-up}': 'Up Arrow',\n  '{arrow-down}': 'Down Arrow',\n  '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n  'ctrl': 'Control',\n  'alt': 'Alt',\n  'esc': 'Escape',\n  'del': 'Delete',\n  'ins': 'Insert',\n  'pgup': 'Page Up',\n  'pgdn': 'Page Down',\n  'num': 'Number',\n  'caps': 'Caps Lock',\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconOption,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Optional text to override the auto-generated accessible text for assistive technology.\n     * If not provided, accessible text will be automatically generated from the shortcut.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n\n    // Generates accessible text for the keyboard shortcut\n    generatedScreenReaderText () {\n      return this.formattedShortcutSplit\n        .map(item => {\n          const trimmedItem = item.trim();\n\n          // Convert icon aliases to readable text\n          if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n            return ICON_ALIAS_TO_TEXT[trimmedItem];\n          }\n\n          // Convert key abbreviations to full names (case-insensitive)\n          const lowerItem = trimmedItem.toLowerCase();\n          if (KEY_ABBREVIATIONS[lowerItem]) {\n            return KEY_ABBREVIATIONS[lowerItem];\n          }\n\n          // Return the key as-is if it's not an alias or abbreviation\n          return trimmedItem;\n        })\n        .filter(item => item) // Remove empty strings\n        .join(' ');\n    },\n  },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconOption","ICON_ALIAS_TO_TEXT","KEY_ABBREVIATIONS","_sfc_main","DtIconPlus","result","key","iconAliasString","regex","item","trimmedItem","lowerItem","_hoisted_1","_createElementBlock","_normalizeClass","$props","_createElementVNode","_toDisplayString","$options","_openBlock","_Fragment","_renderList","i","_createBlock","_resolveDynamicComponent"],"mappings":"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"}
+{"version":3,"file":"keyboard-shortcut.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span class=\"d-keyboard-shortcut--sr-only\">\n      {{ screenReaderText || generatedScreenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`icon-${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <dt-text\n        v-else-if=\"item.trim()\"\n        :key=\"`text-${i}-${item}`\"\n        kind=\"body\"\n        :size=\"200\"\n        numeric\n        :density=\"400\"\n        :tone=\"inverted ? 'secondary-inverted' : 'tertiary'\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n      >\n        <!-- eslint-disable-next-line vue/no-v-html -->\n        <span v-html=\"item\" />\n      </dt-text>\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconOption,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue';\nimport { DtText } from '@/components/text';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n  '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n  '{cmd}': 'Command',\n  '{opt}': 'Option',\n  '{win}': 'Windows',\n  '{arrow-right}': 'Right Arrow',\n  '{arrow-left}': 'Left Arrow',\n  '{arrow-up}': 'Up Arrow',\n  '{arrow-down}': 'Down Arrow',\n  '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n  'ctrl': 'Control',\n  'alt': 'Alt',\n  'esc': 'Escape',\n  'del': 'Delete',\n  'ins': 'Insert',\n  'pgup': 'Page Up',\n  'pgdn': 'Page Down',\n  'num': 'Number',\n  'caps': 'Caps Lock',\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconOption,\n    DtIconPlus,\n    DtText,\n  },\n\n  props: {\n    /**\n     * @deprecated Use v-dt-mode instead.\n     * If true, applies inverted styles.\n     * @values true, false\n     * @deprecated Use v-dt-mode directive instead.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Optional text to override the auto-generated accessible text for assistive technology.\n     * If not provided, accessible text will be automatically generated from the shortcut.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n\n    // Generates accessible text for the keyboard shortcut\n    generatedScreenReaderText () {\n      return this.formattedShortcutSplit\n        .map(item => {\n          const trimmedItem = item.trim();\n\n          // Convert icon aliases to readable text\n          if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n            return ICON_ALIAS_TO_TEXT[trimmedItem];\n          }\n\n          // Convert key abbreviations to full names (case-insensitive)\n          const lowerItem = trimmedItem.toLowerCase();\n          if (KEY_ABBREVIATIONS[lowerItem]) {\n            return KEY_ABBREVIATIONS[lowerItem];\n          }\n\n          // Return the key as-is if it's not an alias or abbreviation\n          return trimmedItem;\n        })\n        .filter(item => item) // Remove empty strings\n        .join(' ');\n    },\n  },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconOption","ICON_ALIAS_TO_TEXT","KEY_ABBREVIATIONS","_sfc_main","DtIconPlus","DtText","result","key","iconAliasString","regex","item","trimmedItem","lowerItem","_hoisted_1","_createElementBlock","_normalizeClass","$props","_createElementVNode","_toDisplayString","$options","_openBlock","_Fragment","_renderList","i","_createBlock","_resolveDynamicComponent","_component_dt_text","_hoisted_2"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"kitchen-sink-view.cjs","sources":["../../../components/kitchen_sink/kitchen_sink_view.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-bar4',\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"],"names":["props","__props","sections","ref","loading","sanitizeId","str","scrollTo","id","_a","createErrorBoundary","name","markRaw","defineComponent","_","slots","error","onErrorCaptured","err","h","extractVariants","module","meta","variants","exportName","exportValue","mergedArgs","componentOptions","e","onMounted","results","loader","loaded","result","storyId","a","b","_createElementBlock","_openBlock","_hoisted_1","_createVNode","_unref","DtText","_toDisplayString","_Fragment","DtStack","DtLink","DtIconExternalLink","_renderList","section","_createBlock","_withModifiers","$event","_createTextVNode","_cache","variant","_createElementVNode","_resolveDynamicComponent"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"kitchen-sink-view.js","sources":["../../../components/kitchen_sink/kitchen_sink_view.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-bar4',\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"],"names":["props","__props","sections","ref","loading","sanitizeId","str","scrollTo","id","_a","createErrorBoundary","name","markRaw","defineComponent","_","slots","error","onErrorCaptured","err","h","extractVariants","module","meta","variants","exportName","exportValue","mergedArgs","componentOptions","e","onMounted","results","loader","loaded","result","storyId","a","b","_createElementBlock","_openBlock","_hoisted_1","_createVNode","_unref","DtText","_toDisplayString","_Fragment","DtStack","DtLink","DtIconExternalLink","_renderList","section","_createBlock","_withModifiers","$event","_createTextVNode","_cache","variant","_createElementVNode","_resolveDynamicComponent"],"mappings":"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"}

package/dist/lib/link/link.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),n=require("./link-constants.cjs"),i=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),o={compatConfig:{MODE:3},name:"DtLink",props:{kind:{type:String,default:"",validator(t){return n.LINK_VARIANTS.includes(t)}},inverted:{type:Boolean,default:!1},href:{type:String,default:null},to:{type:[String,Object],default:null},replace:{type:Boolean,default:!1}},data(){return{LINK_KIND_MODIFIERS:n.LINK_KIND_MODIFIERS}},computed:{computedTag(){return this.to?e.resolveComponent("RouterLink"):"a"},computedAttrs(){return this.to?{to:this.to,replace:this.replace}:{href:this.href||"javascript:void(0)"}}},methods:{getLinkClasses(){return["d-link",n.getLinkKindModifier(this.kind,this.inverted)]}}};function a(t,s,u,d,c,r){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.computedTag),e.mergeProps({class:r.getLinkClasses(),"data-qa":"dt-link"},r.computedAttrs),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16,["class"])}const l=i._(o,[["render",a]]);exports.default=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),n=require("./link-constants.cjs"),i=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),l={compatConfig:{MODE:3},name:"DtLink",props:{kind:{type:String,default:"",validator(t){return n.LINK_VARIANTS.includes(t)}},inverted:{type:Boolean,default:!1},href:{type:String,default:null},to:{type:[String,Object],default:null},replace:{type:Boolean,default:!1},underline:{type:Boolean,default:!0}},data(){return{LINK_KIND_MODIFIERS:n.LINK_KIND_MODIFIERS}},computed:{computedTag(){return this.to?e.resolveComponent("RouterLink"):"a"},computedAttrs(){return this.to?{to:this.to,replace:this.replace}:{href:this.href||"javascript:void(0)"}}},methods:{getLinkClasses(){return["d-link",n.getLinkKindModifier(this.kind,this.inverted),{"d-link--no-underline":!this.underline}]}}};function o(t,s,u,d,c,r){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.computedTag),e.mergeProps({class:r.getLinkClasses(),"data-qa":"dt-link"},r.computedAttrs),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16,["class"])}const a=i._(l,[["render",o]]);exports.default=a;
 //# sourceMappingURL=link.cjs.map

package/dist/lib/link/link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"link.cjs","sources":["../../../components/link/link.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"computedTag\"\n    :class=\"getLinkClasses()\"\n    data-qa=\"dt-link\"\n    v-bind=\"computedAttrs\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { resolveComponent } from 'vue';\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/**\n * A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtLink',\n\n  props: {\n    /**\n     * Applies the link variant styles\n     * @values null, danger, warning, success, muted, mention\n     */\n    kind: {\n      type: String,\n      default: '',\n      validator (kind) {\n        return LINK_VARIANTS.includes(kind);\n      },\n    },\n\n    /**\n     * Determines whether the link should have inverted styling\n     * default is false.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * URL for anchor link navigation. Renders as a native <a> element.\n     */\n    href: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Vue Router destination. Renders as a <router-link>.\n     * Takes precedence over href when both are provided.\n     * @see https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to\n     */\n    to: {\n      type: [String, Object],\n      default: null,\n    },\n\n    /**\n     * When true, navigation replaces the current history entry instead of pushing.\n     * Only applies when `to` is provided.\n     * @values true, false\n     */\n    replace: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      LINK_KIND_MODIFIERS,\n    };\n  },\n\n  computed: {\n    computedTag () {\n      if (this.to) {\n        return resolveComponent('RouterLink');\n      }\n      return 'a';\n    },\n\n    computedAttrs () {\n      if (this.to) {\n        return {\n          to: this.to,\n          replace: this.replace,\n        };\n      }\n      return {\n        href: this.href || 'javascript:void(0)',\n      };\n    },\n  },\n\n  methods: {\n    getLinkClasses () {\n      return [\n        'd-link',\n        getLinkKindModifier(this.kind, this.inverted),\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","kind","LINK_VARIANTS","LINK_KIND_MODIFIERS","resolveComponent","getLinkKindModifier","_createBlock","_resolveDynamicComponent","$options","_mergeProps","_renderSlot","_ctx"],"mappings":"+NAqBKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,SAEN,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,GACT,UAAWC,EAAM,CACf,OAAOC,EAAAA,cAAc,SAASD,CAAI,CACpC,GAQF,SAAU,CACR,KAAM,QACN,QAAS,IAMX,KAAM,CACJ,KAAM,OACN,QAAS,MAQX,GAAI,CACF,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,MAQX,QAAS,CACP,KAAM,QACN,QAAS,KAIb,MAAQ,CACN,MAAO,CACL,oBAAAE,EAAAA,oBAEJ,EAEA,SAAU,CACR,aAAe,CACb,OAAI,KAAK,GACAC,EAAAA,iBAAiB,YAAY,EAE/B,GACT,EAEA,eAAiB,CACf,OAAI,KAAK,GACA,CACL,GAAI,KAAK,GACT,QAAS,KAAK,SAGX,CACL,KAAM,KAAK,MAAQ,qBAEvB,GAGF,QAAS,CACP,gBAAkB,CAChB,MAAO,CACL,SACAC,EAAAA,oBAAoB,KAAK,KAAM,KAAK,QAAQ,EAEhD,EAEJ,+CA/GEC,cAQYC,EAAAA,wBAPLC,EAAA,WAAW,EADlBC,aAQY,CANT,MAAOD,EAAA,eAAc,EACtB,UAAQ,WACAA,EAAA,aAAa,EAAA,mBAGrB,IAAQ,CAARE,aAAQC,EAAA,OAAA,SAAA"}
+{"version":3,"file":"link.cjs","sources":["../../../components/link/link.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"computedTag\"\n    :class=\"getLinkClasses()\"\n    data-qa=\"dt-link\"\n    v-bind=\"computedAttrs\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { resolveComponent } from 'vue';\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/**\n * A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtLink',\n\n  props: {\n    /**\n     * Applies the link variant styles\n     * @values null, danger, warning, success, muted, mention\n     */\n    kind: {\n      type: String,\n      default: '',\n      validator (kind) {\n        return LINK_VARIANTS.includes(kind);\n      },\n    },\n\n    /**\n     * Determines whether the link should have inverted styling\n     * default is false.\n     * @values true, false\n     * @deprecated Use v-dt-mode directive instead.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * URL for anchor link navigation. Renders as a native <a> element.\n     */\n    href: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Vue Router destination. Renders as a <router-link>.\n     * Takes precedence over href when both are provided.\n     * @see https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to\n     */\n    to: {\n      type: [String, Object],\n      default: null,\n    },\n\n    /**\n     * When true, navigation replaces the current history entry instead of pushing.\n     * Only applies when `to` is provided.\n     * @values true, false\n     */\n    replace: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the link should display an underline.\n     * @values true, false\n     */\n    underline: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      LINK_KIND_MODIFIERS,\n    };\n  },\n\n  computed: {\n    computedTag () {\n      if (this.to) {\n        return resolveComponent('RouterLink');\n      }\n      return 'a';\n    },\n\n    computedAttrs () {\n      if (this.to) {\n        return {\n          to: this.to,\n          replace: this.replace,\n        };\n      }\n      return {\n        href: this.href || 'javascript:void(0)',\n      };\n    },\n  },\n\n  methods: {\n    getLinkClasses () {\n      return [\n        'd-link',\n        getLinkKindModifier(this.kind, this.inverted),\n        { 'd-link--no-underline': !this.underline },\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","kind","LINK_VARIANTS","LINK_KIND_MODIFIERS","resolveComponent","getLinkKindModifier","_createBlock","_resolveDynamicComponent","$options","_mergeProps","_renderSlot","_ctx"],"mappings":"+NAqBKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,SAEN,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,GACT,UAAWC,EAAM,CACf,OAAOC,EAAAA,cAAc,SAASD,CAAI,CACpC,GASF,SAAU,CACR,KAAM,QACN,QAAS,IAMX,KAAM,CACJ,KAAM,OACN,QAAS,MAQX,GAAI,CACF,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,MAQX,QAAS,CACP,KAAM,QACN,QAAS,IAOX,UAAW,CACT,KAAM,QACN,QAAS,KAIb,MAAQ,CACN,MAAO,CACL,oBAAAE,EAAAA,oBAEJ,EAEA,SAAU,CACR,aAAe,CACb,OAAI,KAAK,GACAC,EAAAA,iBAAiB,YAAY,EAE/B,GACT,EAEA,eAAiB,CACf,OAAI,KAAK,GACA,CACL,GAAI,KAAK,GACT,QAAS,KAAK,SAGX,CACL,KAAM,KAAK,MAAQ,qBAEvB,GAGF,QAAS,CACP,gBAAkB,CAChB,MAAO,CACL,SACAC,EAAAA,oBAAoB,KAAK,KAAM,KAAK,QAAQ,EAC5C,CAAE,uBAAwB,CAAC,KAAK,WAEpC,EAEJ,+CA1HEC,cAQYC,EAAAA,wBAPLC,EAAA,WAAW,EADlBC,aAQY,CANT,MAAOD,EAAA,eAAc,EACtB,UAAQ,WACAA,EAAA,aAAa,EAAA,mBAGrB,IAAQ,CAARE,aAAQC,EAAA,OAAA,SAAA"}