@dialpad/dialtone-vue 3.209.0 → 3.210.0-next.2

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/vue3";
+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-p8 d-px12 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-p32 d-py16 d-pb8 d-bgc-secondary d-bb d-ps-sticky d-t0 d-zi-base1 d-mtn10 d-mxn10 d-bs-card",
+            gap: "400"
+          }, {
+            default: n(() => [
+              a(r(u), {
+                class: "d-px8",
+                gap: "400",
+                direction: "row",
+                justify: "between",
+                align: "baseline"
+              }, {
+                default: n(() => [
+                  a(r(p), {
+                    as: "h1",
+                    kind: "headline",
+                    size: "3xl"
+                  }, {
+                    default: n(() => [
+                      f(y(k.title), 1)
+                    ]),
+                    _: 1
+                  }),
+                  a(r(p), {
+                    kind: "body",
+                    size: "sm"
+                  }, {
+                    default: n(() => [
+                      a(r(x), {
+                        href: k.iframeUrl,
+                        target: "_blank",
+                        rel: "noopener noreferrer"
+                      }, {
+                        default: n(() => [
+                          a(r(u), {
+                            gap: "300",
+                            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: "400",
+                  class: "d-pb8 d-px8"
+                }, {
+                  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: "sm",
+                          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-px32" }, {
+            default: n(() => [
+              (d(!0), c(g, null, w(b.value, (t) => (d(), _(r(u), {
+                id: `ks-${t.id}`,
+                key: t.id,
+                as: "section",
+                gap: "500",
+                class: "d-py32 kitchen-sink__section"
+              }, {
+                default: n(() => [
+                  a(r(u), {
+                    gap: "400",
+                    direction: "row",
+                    justify: "between",
+                    align: "baseline"
+                  }, {
+                    default: n(() => [
+                      a(r(p), {
+                        as: "h2",
+                        kind: "headline",
+                        size: "2xl"
+                      }, {
+                        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-p16",
+                    gap: "400"
+                  }, {
+                    default: n(() => [
+                      a(r(p), {
+                        size: "xs",
+                        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-a77c21eb"]]);
+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-p32\n          d-py16\n          d-pb8\n          d-bgc-secondary\n          d-bb\n          d-ps-sticky\n          d-t0\n          d-zi-base1\n          d-mtn10\n          d-mxn10\n          d-bs-card\n        \"\n        gap=\"400\"\n      >\n        <dt-stack\n          class=\"d-px8\"\n          gap=\"400\"\n          direction=\"row\"\n          justify=\"between\"\n          align=\"baseline\"\n        >\n          <dt-text\n            as=\"h1\"\n            kind=\"headline\"\n            size=\"3xl\"\n          >\n            {{ title }}\n          </dt-text>\n          <dt-text\n            kind=\"body\"\n            size=\"sm\"\n          >\n            <dt-link\n              :href=\"iframeUrl\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              <dt-stack\n                gap=\"300\"\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=\"400\"\n            class=\"d-pb8 d-px8\"\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=\"sm\"\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-px32\">\n        <dt-stack\n          v-for=\"section in sections\"\n          :id=\"`ks-${section.id}`\"\n          :key=\"section.id\"\n          as=\"section\"\n          gap=\"500\"\n          class=\"d-py32 kitchen-sink__section\"\n        >\n          <dt-stack\n            gap=\"400\"\n            direction=\"row\"\n            justify=\"between\"\n            align=\"baseline\"\n          >\n            <dt-text\n              as=\"h2\"\n              kind=\"headline\"\n              size=\"2xl\"\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-p16\"\n            gap=\"400\"\n          >\n            <dt-text\n              size=\"xs\"\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/vue3';\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-p8 d-px12 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-size-750);\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     */\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,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,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,+CAzHEC,cAQYC,EAAAA,wBAPLC,EAAA,WAAW,EADlBC,aAQY,CANT,MAAOD,EAAA,eAAc,EACtB,UAAQ,WACAA,EAAA,aAAa,EAAA,mBAGrB,IAAQ,CAARE,aAAQC,EAAA,OAAA,SAAA"}

package/dist/lib/link/link.js

@@ -1,5 +1,5 @@
-import { resolveComponent as r, openBlock as n, createBlock as o, resolveDynamicComponent as a, mergeProps as i, withCtx as s, renderSlot as l } from "vue";
-import { getLinkKindModifier as d, LINK_KIND_MODIFIERS as p, LINK_VARIANTS as u } from "./link-constants.js";
+import { resolveComponent as r, openBlock as n, createBlock as o, resolveDynamicComponent as a, mergeProps as i, withCtx as l, renderSlot as s } from "vue";
+import { getLinkKindModifier as d, LINK_KIND_MODIFIERS as u, LINK_VARIANTS as p } from "./link-constants.js";
 import { _ as c } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const f = {
   compatConfig: { MODE: 3 },
@@ -12,8 +12,8 @@ const f = {
     kind: {
       type: String,
       default: "",
-      validator(t) {
-        return u.includes(t);
+      validator(e) {
+        return p.includes(e);
       }
     },
     /**
@@ -49,11 +49,19 @@ const f = {
     replace: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Determines whether the link should display an underline.
+     * @values true, false
+     */
+    underline: {
+      type: Boolean,
+      default: !0
     }
   },
   data() {
     return {
-      LINK_KIND_MODIFIERS: p
+      LINK_KIND_MODIFIERS: u
     };
   },
   computed: {
@@ -73,18 +81,19 @@ const f = {
     getLinkClasses() {
       return [
         "d-link",
-        d(this.kind, this.inverted)
+        d(this.kind, this.inverted),
+        { "d-link--no-underline": !this.underline }
       ];
     }
   }
 };
-function m(t, h, k, _, g, e) {
-  return n(), o(a(e.computedTag), i({
-    class: e.getLinkClasses(),
+function m(e, h, k, _, g, t) {
+  return n(), o(a(t.computedTag), i({
+    class: t.getLinkClasses(),
     "data-qa": "dt-link"
-  }, e.computedAttrs), {
-    default: s(() => [
-      l(t.$slots, "default")
+  }, t.computedAttrs), {
+    default: l(() => [
+      s(e.$slots, "default")
     ]),
     _: 3
   }, 16, ["class"]);

package/dist/lib/link/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","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":";;;AAqBA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAWC,GAAM;AACf,eAAOC,EAAc,SAASD,CAAI;AAAA,MACpC;AAAA;;;;;;IAQF,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;IAQX,IAAI;AAAA,MACF,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;;;;;;IAQX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,qBAAAE;AAAA;EAEJ;AAAA,EAEA,UAAU;AAAA,IACR,cAAe;AACb,aAAI,KAAK,KACAC,EAAiB,YAAY,IAE/B;AAAA,IACT;AAAA,IAEA,gBAAiB;AACf,aAAI,KAAK,KACA;AAAA,QACL,IAAI,KAAK;AAAA,QACT,SAAS,KAAK;AAAA,UAGX;AAAA,QACL,MAAM,KAAK,QAAQ;AAAA;IAEvB;AAAA;EAGF,SAAS;AAAA,IACP,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACAC,EAAoB,KAAK,MAAM,KAAK,QAAQ;AAAA;IAEhD;AAAA;AAEJ;;cA/GEC,EAQYC,EAPLC,EAAA,WAAW,GADlBC,EAQY;AAAA,IANT,OAAOD,EAAA,eAAc;AAAA,IACtB,WAAQ;AAAA,KACAA,EAAA,aAAa,GAAA;AAAA,eAGrB,MAAQ;AAAA,MAARE,EAAQC,EAAA,QAAA,SAAA;AAAA;;;;;"}
+{"version":3,"file":"link.js","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     * 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":";;;AAqBA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAWC,GAAM;AACf,eAAOC,EAAc,SAASD,CAAI;AAAA,MACpC;AAAA;;;;;;IAQF,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;IAQX,IAAI;AAAA,MACF,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;;;;;;IAQX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,qBAAAE;AAAA;EAEJ;AAAA,EAEA,UAAU;AAAA,IACR,cAAe;AACb,aAAI,KAAK,KACAC,EAAiB,YAAY,IAE/B;AAAA,IACT;AAAA,IAEA,gBAAiB;AACf,aAAI,KAAK,KACA;AAAA,QACL,IAAI,KAAK;AAAA,QACT,SAAS,KAAK;AAAA,UAGX;AAAA,QACL,MAAM,KAAK,QAAQ;AAAA;IAEvB;AAAA;EAGF,SAAS;AAAA,IACP,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACAC,EAAoB,KAAK,MAAM,KAAK,QAAQ;AAAA,QAC5C,EAAE,wBAAwB,CAAC,KAAK;;IAEpC;AAAA;AAEJ;;cAzHEC,EAQYC,EAPLC,EAAA,WAAW,GADlBC,EAQY;AAAA,IANT,OAAOD,EAAA,eAAc;AAAA,IACtB,WAAQ;AAAA,KACAA,EAAA,aAAa,GAAA;AAAA,eAGrB,MAAQ;AAAA,MAARE,EAAQC,EAAA,QAAA,SAAA;AAAA;;;;;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./list-item-constants.cjs"),r=require("../../common/utils/index.cjs"),d=require("@dialpad/dialtone-icons/vue3"),t=require("vue"),u=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),c=require("../item-layout/item-layout.cjs"),m=["listitem","menuitem","option"],_={compatConfig:{MODE:3},name:"DtListItem",components:{DtItemLayout:c.default,DtIconCheck:d.DtIconCheck},inject:{highlightId:{default:null}},props:{id:{type:String,default(){return r.default.getUniqueString()}},role:{type:String,default:"listitem",validator:e=>m.includes(e)},elementType:{type:String,default:"li"},type:{type:String,default:s.LIST_ITEM_TYPES.DEFAULT,validator:e=>Object.values(s.LIST_ITEM_TYPES).includes(e)},navigationType:{type:String,default:s.LIST_ITEM_NAVIGATION_TYPES.NONE,validator:e=>Object.values(s.LIST_ITEM_NAVIGATION_TYPES).includes(e)},selected:{type:Boolean,default:!1},wrapperClass:{type:[String,Object,Array],default:""}},emits:["keydown","mousemove","mouseleave"],data(){return{injected:!1,mouseHighlighted:!1}},computed:{isDefaultType(){return this.type===s.LIST_ITEM_TYPES.DEFAULT},listItemListeners(){return{keydown:e=>{["enter","space"].includes(e.code.toLowerCase())&&this.onClick(e),this.$emit("keydown",e)},mousemove:e=>{this.onMouseHover(e),this.$emit("mousemove",e)},mouseleave:e=>{this.onMouseLeave(e),this.$emit("mouseleave",e)}}},isHighlighted(){return this.isHoverable?this.highlightId&&this.highlightId()?this.id===this.highlightId():this.mouseHighlighted:!1},isFocusable(){return this.navigationType===s.LIST_ITEM_NAVIGATION_TYPES.TAB},isHoverable(){return this.navigationType!==s.LIST_ITEM_NAVIGATION_TYPES.NONE}},methods:{onClick(e){this.$emit("click",e)},onMouseHover(){this.mouseHighlighted=!0},onMouseLeave(){this.mouseHighlighted=!1}}};function h(e,T,l,I,f,i){const a=t.resolveComponent("dt-icon-check"),n=t.resolveComponent("dt-item-layout");return t.openBlock(),t.createBlock(t.resolveDynamicComponent(l.elementType),t.mergeProps({id:l.id,class:["d-list-item",{"d-list-item--focusable":i.isFocusable,"d-list-item--highlighted":i.isHighlighted,"d-list-item--static":!i.isHoverable}],tabindex:i.isFocusable?0:-1,role:l.role,"aria-selected":l.role==="listitem"?void 0:i.isHighlighted},t.toHandlers(i.listItemListeners)),{default:t.withCtx(()=>[i.isDefaultType?(t.openBlock(),t.createBlock(n,{key:0,unstyled:"",class:t.normalizeClass(["d-list-item__wrapper",l.wrapperClass]),"left-class":"d-list-item__left","content-class":"d-list-item__content","title-class":"d-list-item__title","subtitle-class":"d-list-item__subtitle","bottom-class":"d-list-item__bottom","right-class":"d-list-item__right","selected-class":"d-list-item__selected","data-qa":"dt-list-item-wrapper"},t.createSlots({_:2},[t.renderList(e.$slots,(y,o)=>({name:o,fn:t.withCtx(()=>[t.renderSlot(e.$slots,o)])})),l.selected?{name:"selected",fn:t.withCtx(()=>[t.createVNode(a,{size:"400"})]),key:"0"}:void 0]),1032,["class"])):t.renderSlot(e.$slots,"default",{key:1})]),_:3},16,["id","class","tabindex","role","aria-selected"])}const g=u._(_,[["render",h]]);exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./list-item-constants.cjs"),r=require("../../common/utils/index.cjs"),d=require("@dialpad/dialtone-icons/vue3"),t=require("vue"),c=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),u=require("../item-layout/item-layout.cjs"),m=["listitem","menuitem","option"],_={compatConfig:{MODE:3},name:"DtListItem",components:{DtItemLayout:u.default,DtIconCheck:d.DtIconCheck},inject:{highlightId:{default:null}},props:{id:{type:String,default(){return r.default.getUniqueString()}},role:{type:String,default:"listitem",validator:e=>m.includes(e)},elementType:{type:String,default:"li"},type:{type:String,default:s.LIST_ITEM_TYPES.DEFAULT,validator:e=>Object.values(s.LIST_ITEM_TYPES).includes(e)},navigationType:{type:String,default:s.LIST_ITEM_NAVIGATION_TYPES.NONE,validator:e=>Object.values(s.LIST_ITEM_NAVIGATION_TYPES).includes(e)},selected:{type:Boolean,default:!1},wrapperClass:{type:[String,Object,Array],default:""}},emits:["click","keydown","mousemove","mouseleave"],data(){return{injected:!1,mouseHighlighted:!1}},computed:{isDefaultType(){return this.type===s.LIST_ITEM_TYPES.DEFAULT},listItemListeners(){return{click:e=>{this.onClick(e)},keydown:e=>{["enter","space"].includes(e.code.toLowerCase())&&this.onClick(e),this.$emit("keydown",e)},mousemove:e=>{this.onMouseHover(e),this.$emit("mousemove",e)},mouseleave:e=>{this.onMouseLeave(e),this.$emit("mouseleave",e)}}},isHighlighted(){return this.isHoverable?this.highlightId&&this.highlightId()?this.id===this.highlightId():this.mouseHighlighted:!1},isFocusable(){return this.navigationType===s.LIST_ITEM_NAVIGATION_TYPES.TAB},isHoverable(){return this.navigationType!==s.LIST_ITEM_NAVIGATION_TYPES.NONE}},methods:{onClick(e){this.$emit("click",e)},onMouseHover(){this.mouseHighlighted=!0},onMouseLeave(){this.mouseHighlighted=!1}}};function h(e,T,l,I,f,i){const n=t.resolveComponent("dt-icon-check"),a=t.resolveComponent("dt-item-layout");return t.openBlock(),t.createBlock(t.resolveDynamicComponent(l.elementType),t.mergeProps({id:l.id,class:["d-list-item",{"d-list-item--focusable":i.isFocusable,"d-list-item--highlighted":i.isHighlighted,"d-list-item--static":!i.isHoverable}],tabindex:i.isFocusable?0:-1,role:l.role,"aria-selected":l.role==="listitem"?void 0:i.isHighlighted},t.toHandlers(i.listItemListeners)),{default:t.withCtx(()=>[i.isDefaultType?(t.openBlock(),t.createBlock(a,{key:0,unstyled:"",class:t.normalizeClass(["d-list-item__wrapper",l.wrapperClass]),"start-class":"d-list-item__left","content-class":"d-list-item__content","title-class":"d-list-item__title","subtitle-class":"d-list-item__subtitle","block-end-class":"d-list-item__bottom","end-class":"d-list-item__right","selected-class":"d-list-item__selected","data-qa":"dt-list-item-wrapper"},t.createSlots({_:2},[t.renderList(e.$slots,(y,o)=>({name:o,fn:t.withCtx(()=>[t.renderSlot(e.$slots,o)])})),l.selected?{name:"selected",fn:t.withCtx(()=>[t.createVNode(n,{size:"400"})]),key:"0"}:void 0]),1032,["class"])):t.renderSlot(e.$slots,"default",{key:1})]),_:3},16,["id","class","tabindex","role","aria-selected"])}const g=c._(_,[["render",h]]);exports.default=g;
 //# sourceMappingURL=list-item.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"list-item.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"[\n      'd-list-item',\n      {\n        'd-list-item--focusable': isFocusable,\n        'd-list-item--highlighted': isHighlighted,\n        'd-list-item--static': !isHoverable,\n      }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <dt-item-layout\n      v-if=\"isDefaultType\"\n      unstyled\n      :class=\"['d-list-item__wrapper', wrapperClass]\"\n      left-class=\"d-list-item__left\"\n      content-class=\"d-list-item__content\"\n      title-class=\"d-list-item__title\"\n      subtitle-class=\"d-list-item__subtitle\"\n      bottom-class=\"d-list-item__bottom\"\n      right-class=\"d-list-item__right\"\n      selected-class=\"d-list-item__selected\"\n      data-qa=\"dt-list-item-wrapper\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check size=\"400\" />\n      </template>\n    </dt-item-layout>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional Classes to apply to the wrapper element,\n     * note: it only applies on \"default\" type\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    wrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    isDefaultType () {\n      return this.type === LIST_ITEM_TYPES.DEFAULT;\n    },\n\n    listItemListeners () {\n      return {\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      // disabled as we do not want to override native click\n      // eslint-disable-next-line vue/require-explicit-emits\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n"],"names":["ROLES","_sfc_main","DtItemLayout","DtIconCheck","utils","role","LIST_ITEM_TYPES","t","LIST_ITEM_NAVIGATION_TYPES","event","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_component_dt_item_layout","_ctx","_","slotName","_renderSlot","_createVNode","_component_dt_icon_check"],"mappings":"oWAyDMA,EAAQ,CAAC,WAAY,WAAY,QAAQ,EAM1CC,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,aAEN,WAAY,cACVC,EAAAA,oBACAC,EAAAA,aAMF,OAAQ,CACN,YAAa,CAAE,QAAS,IAAG,GAG7B,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAW,CAAE,OAAOC,EAAAA,QAAM,gBAAe,CAAI,GAM/C,KAAM,CACJ,KAAM,OACN,QAAS,WACT,UAAYC,GAAUL,EAAO,SAASK,CAAI,GAM5C,YAAa,CACX,KAAM,OACN,QAAS,MAOX,KAAM,CACJ,KAAM,OACN,QAASC,EAAAA,gBAAgB,QACzB,UAAYC,GAAM,OAAO,OAAOD,iBAAe,EAAE,SAASC,CAAC,GAU7D,eAAgB,CACd,KAAM,OACN,QAASC,EAAAA,2BAA2B,KACpC,UAAYD,GAAM,OAAO,OAAOC,4BAA0B,EAAE,SAASD,CAAC,GAMxE,SAAU,CACR,KAAM,QACN,QAAS,IASX,aAAc,CACZ,KAAM,CAAC,OAAQ,OAAQ,KAAK,EAC5B,QAAS,KAIb,MAAO,CAOL,UAQA,YAQA,cAGF,MAAQ,CACN,MAAO,CACL,SAAU,GACV,iBAAkB,GAEtB,EAEA,SAAU,CACR,eAAiB,CACf,OAAO,KAAK,OAASD,EAAAA,gBAAgB,OACvC,EAEA,mBAAqB,CACnB,MAAO,CACL,QAASG,GAAS,CACZ,CAAC,QAAS,OAAO,EAAE,SAASA,EAAM,KAAK,YAAW,CAAE,GACtD,KAAK,QAAQA,CAAK,EAEpB,KAAK,MAAM,UAAWA,CAAK,CAC7B,EAEA,UAAWA,GAAS,CAClB,KAAK,aAAaA,CAAK,EACvB,KAAK,MAAM,YAAaA,CAAK,CAC/B,EAEA,WAAYA,GAAS,CACnB,KAAK,aAAaA,CAAK,EACvB,KAAK,MAAM,aAAcA,CAAK,CAChC,EAEJ,EAMA,eAAiB,CACf,OAAI,KAAK,YACA,KAAK,aAAe,KAAK,YAAW,EAAK,KAAK,KAAO,KAAK,YAAW,EAAK,KAAK,iBAEjF,EACT,EAEA,aAAe,CAEb,OAAO,KAAK,iBAAmBD,EAAAA,2BAA2B,GAC5D,EAKA,aAAe,CACb,OAAO,KAAK,iBAAmBA,EAAAA,2BAA2B,IAC5D,GAGF,QAAS,CACP,QAAS,EAAG,CAGV,KAAK,MAAM,QAAS,CAAC,CACvB,EAEA,cAAgB,CACd,KAAK,iBAAmB,EAC1B,EAEA,cAAgB,CACd,KAAK,iBAAmB,EAC1B,EAEJ,kIArPEE,cA4CYC,EAAAA,wBA3CLC,EAAA,WAAW,EADlBC,aA4CY,CA1CT,GAAID,EAAA,GACJ,MAAK,yCAAmEE,EAAA,uCAAiDA,EAAA,qCAA+CA,EAAA,cAOxK,SAAUA,EAAA,YAAW,EAAA,GACrB,KAAMF,EAAA,KACN,gBAAeA,EAAA,OAAI,WAAkB,OAAYE,EAAA,aAClD,EAAAC,aAAwBD,EAAlB,iBAAiB,CAAA,EAAA,mBAEvB,IA0BiB,CAzBTA,EAAA,6BADRJ,EAAAA,YA0BiBM,EAAA,OAxBf,SAAA,GACC,+CAAgCJ,EAAA,YAAY,CAAA,EAC7C,aAAW,oBACX,gBAAc,uBACd,cAAY,qBACZ,iBAAe,wBACf,eAAa,sBACb,cAAY,qBACZ,iBAAe,wBACf,UAAQ,0DAGkBK,EAAA,OAAM,CAAtBC,EAAGC,WACVA,eAGD,IAAyB,CAAzBC,aAAyBH,SAAZE,CAAQ,OAGfP,EAAA,eACL,wBAED,IAA4B,CAA5BS,EAAAA,YAA4BC,EAAA,CAAb,KAAK,KAAK,CAAA,uCAI7BF,EAAAA,WAAeH,EAAA,OAAA,UAAA,CAAA,IAAA,CAAA,CAAA"}
+{"version":3,"file":"list-item.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"[\n      'd-list-item',\n      {\n        'd-list-item--focusable': isFocusable,\n        'd-list-item--highlighted': isHighlighted,\n        'd-list-item--static': !isHoverable,\n      }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <dt-item-layout\n      v-if=\"isDefaultType\"\n      unstyled\n      :class=\"['d-list-item__wrapper', wrapperClass]\"\n      start-class=\"d-list-item__left\"\n      content-class=\"d-list-item__content\"\n      title-class=\"d-list-item__title\"\n      subtitle-class=\"d-list-item__subtitle\"\n      block-end-class=\"d-list-item__bottom\"\n      end-class=\"d-list-item__right\"\n      selected-class=\"d-list-item__selected\"\n      data-qa=\"dt-list-item-wrapper\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check size=\"400\" />\n      </template>\n    </dt-item-layout>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional Classes to apply to the wrapper element,\n     * note: it only applies on \"default\" type\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    wrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    isDefaultType () {\n      return this.type === LIST_ITEM_TYPES.DEFAULT;\n    },\n\n    listItemListeners () {\n      return {\n        click: event => {\n          this.onClick(event);\n        },\n\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      // disabled as we do not want to override native click\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n"],"names":["ROLES","_sfc_main","DtItemLayout","DtIconCheck","utils","role","LIST_ITEM_TYPES","t","LIST_ITEM_NAVIGATION_TYPES","event","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_component_dt_item_layout","_ctx","_","slotName","_renderSlot","_createVNode","_component_dt_icon_check"],"mappings":"oWAyDMA,EAAQ,CAAC,WAAY,WAAY,QAAQ,EAM1CC,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,aAEN,WAAY,cACVC,EAAAA,oBACAC,EAAAA,aAMF,OAAQ,CACN,YAAa,CAAE,QAAS,IAAG,GAG7B,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAW,CAAE,OAAOC,EAAAA,QAAM,gBAAe,CAAI,GAM/C,KAAM,CACJ,KAAM,OACN,QAAS,WACT,UAAYC,GAAUL,EAAO,SAASK,CAAI,GAM5C,YAAa,CACX,KAAM,OACN,QAAS,MAOX,KAAM,CACJ,KAAM,OACN,QAASC,EAAAA,gBAAgB,QACzB,UAAYC,GAAM,OAAO,OAAOD,iBAAe,EAAE,SAASC,CAAC,GAU7D,eAAgB,CACd,KAAM,OACN,QAASC,EAAAA,2BAA2B,KACpC,UAAYD,GAAM,OAAO,OAAOC,4BAA0B,EAAE,SAASD,CAAC,GAMxE,SAAU,CACR,KAAM,QACN,QAAS,IASX,aAAc,CACZ,KAAM,CAAC,OAAQ,OAAQ,KAAK,EAC5B,QAAS,KAIb,MAAO,CAOL,QAQA,UAQA,YAQA,cAGF,MAAQ,CACN,MAAO,CACL,SAAU,GACV,iBAAkB,GAEtB,EAEA,SAAU,CACR,eAAiB,CACf,OAAO,KAAK,OAASD,EAAAA,gBAAgB,OACvC,EAEA,mBAAqB,CACnB,MAAO,CACL,MAAOG,GAAS,CACd,KAAK,QAAQA,CAAK,CACpB,EAEA,QAASA,GAAS,CACZ,CAAC,QAAS,OAAO,EAAE,SAASA,EAAM,KAAK,YAAW,CAAE,GACtD,KAAK,QAAQA,CAAK,EAEpB,KAAK,MAAM,UAAWA,CAAK,CAC7B,EAEA,UAAWA,GAAS,CAClB,KAAK,aAAaA,CAAK,EACvB,KAAK,MAAM,YAAaA,CAAK,CAC/B,EAEA,WAAYA,GAAS,CACnB,KAAK,aAAaA,CAAK,EACvB,KAAK,MAAM,aAAcA,CAAK,CAChC,EAEJ,EAMA,eAAiB,CACf,OAAI,KAAK,YACA,KAAK,aAAe,KAAK,YAAW,EAAK,KAAK,KAAO,KAAK,YAAW,EAAK,KAAK,iBAEjF,EACT,EAEA,aAAe,CAEb,OAAO,KAAK,iBAAmBD,EAAAA,2BAA2B,GAC5D,EAKA,aAAe,CACb,OAAO,KAAK,iBAAmBA,EAAAA,2BAA2B,IAC5D,GAGF,QAAS,CACP,QAAS,EAAG,CAEV,KAAK,MAAM,QAAS,CAAC,CACvB,EAEA,cAAgB,CACd,KAAK,iBAAmB,EAC1B,EAEA,cAAgB,CACd,KAAK,iBAAmB,EAC1B,EAEJ,kIAhQEE,cA4CYC,EAAAA,wBA3CLC,EAAA,WAAW,EADlBC,aA4CY,CA1CT,GAAID,EAAA,GACJ,MAAK,yCAAmEE,EAAA,uCAAiDA,EAAA,qCAA+CA,EAAA,cAOxK,SAAUA,EAAA,YAAW,EAAA,GACrB,KAAMF,EAAA,KACN,gBAAeA,EAAA,OAAI,WAAkB,OAAYE,EAAA,aAClD,EAAAC,aAAwBD,EAAlB,iBAAiB,CAAA,EAAA,mBAEvB,IA0BiB,CAzBTA,EAAA,6BADRJ,EAAAA,YA0BiBM,EAAA,OAxBf,SAAA,GACC,+CAAgCJ,EAAA,YAAY,CAAA,EAC7C,cAAY,oBACZ,gBAAc,uBACd,cAAY,qBACZ,iBAAe,wBACf,kBAAgB,sBAChB,YAAU,qBACV,iBAAe,wBACf,UAAQ,0DAGkBK,EAAA,OAAM,CAAtBC,EAAGC,WACVA,eAGD,IAAyB,CAAzBC,aAAyBH,SAAZE,CAAQ,OAGfP,EAAA,eACL,wBAED,IAA4B,CAA5BS,EAAAA,YAA4BC,EAAA,CAAb,KAAK,KAAK,CAAA,uCAI7BF,EAAAA,WAAeH,EAAA,OAAA,UAAA,CAAA,IAAA,CAAA,CAAA"}

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

@@ -1,14 +1,14 @@
 import { LIST_ITEM_NAVIGATION_TYPES as s, LIST_ITEM_TYPES as l } from "./list-item-constants.js";
 import h from "../../common/utils/index.js";
 import { DtIconCheck as g } from "@dialpad/dialtone-icons/vue3";
-import { resolveComponent as r, openBlock as n, createBlock as d, resolveDynamicComponent as f, mergeProps as _, toHandlers as p, withCtx as a, normalizeClass as y, createSlots as v, renderList as T, renderSlot as m, createVNode as b } from "vue";
-import { _ as I } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import k from "../item-layout/item-layout.js";
+import { resolveComponent as n, openBlock as r, createBlock as d, resolveDynamicComponent as _, mergeProps as f, toHandlers as p, withCtx as a, normalizeClass as y, createSlots as v, renderList as k, renderSlot as c, createVNode as T } from "vue";
+import { _ as b } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import I from "../item-layout/item-layout.js";
 const L = ["listitem", "menuitem", "option"], S = {
   compatConfig: { MODE: 3 },
   name: "DtListItem",
   components: {
-    DtItemLayout: k,
+    DtItemLayout: I,
     DtIconCheck: g
   },
   /**
@@ -82,6 +82,13 @@ const L = ["listitem", "menuitem", "option"], S = {
     }
   },
   emits: [
+    /**
+     * Native click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click",
     /**
      * Key down event
      *
@@ -116,6 +123,9 @@ const L = ["listitem", "menuitem", "option"], S = {
     },
     listItemListeners() {
       return {
+        click: (e) => {
+          this.onClick(e);
+        },
         keydown: (e) => {
           ["enter", "space"].includes(e.code.toLowerCase()) && this.onClick(e), this.$emit("keydown", e);
         },
@@ -157,8 +167,8 @@ const L = ["listitem", "menuitem", "option"], S = {
   }
 };
 function H(e, C, i, D, E, t) {
-  const c = r("dt-icon-check"), u = r("dt-item-layout");
-  return n(), d(f(i.elementType), _({
+  const m = n("dt-icon-check"), u = n("dt-item-layout");
+  return r(), d(_(i.elementType), f({
     id: i.id,
     class: [
       "d-list-item",
@@ -173,38 +183,38 @@ function H(e, C, i, D, E, t) {
     "aria-selected": i.role === "listitem" ? void 0 : t.isHighlighted
   }, p(t.listItemListeners)), {
     default: a(() => [
-      t.isDefaultType ? (n(), d(u, {
+      t.isDefaultType ? (r(), d(u, {
         key: 0,
         unstyled: "",
         class: y(["d-list-item__wrapper", i.wrapperClass]),
-        "left-class": "d-list-item__left",
+        "start-class": "d-list-item__left",
         "content-class": "d-list-item__content",
         "title-class": "d-list-item__title",
         "subtitle-class": "d-list-item__subtitle",
-        "bottom-class": "d-list-item__bottom",
-        "right-class": "d-list-item__right",
+        "block-end-class": "d-list-item__bottom",
+        "end-class": "d-list-item__right",
         "selected-class": "d-list-item__selected",
         "data-qa": "dt-list-item-wrapper"
       }, v({ _: 2 }, [
-        T(e.$slots, (w, o) => ({
+        k(e.$slots, (w, o) => ({
           name: o,
           fn: a(() => [
-            m(e.$slots, o)
+            c(e.$slots, o)
           ])
         })),
         i.selected ? {
           name: "selected",
           fn: a(() => [
-            b(c, { size: "400" })
+            T(m, { size: "400" })
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["class"])) : m(e.$slots, "default", { key: 1 })
+      ]), 1032, ["class"])) : c(e.$slots, "default", { key: 1 })
     ]),
     _: 3
   }, 16, ["id", "class", "tabindex", "role", "aria-selected"]);
 }
-const B = /* @__PURE__ */ I(S, [["render", H]]);
+const B = /* @__PURE__ */ b(S, [["render", H]]);
 export {
   B as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"[\n      'd-list-item',\n      {\n        'd-list-item--focusable': isFocusable,\n        'd-list-item--highlighted': isHighlighted,\n        'd-list-item--static': !isHoverable,\n      }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <dt-item-layout\n      v-if=\"isDefaultType\"\n      unstyled\n      :class=\"['d-list-item__wrapper', wrapperClass]\"\n      left-class=\"d-list-item__left\"\n      content-class=\"d-list-item__content\"\n      title-class=\"d-list-item__title\"\n      subtitle-class=\"d-list-item__subtitle\"\n      bottom-class=\"d-list-item__bottom\"\n      right-class=\"d-list-item__right\"\n      selected-class=\"d-list-item__selected\"\n      data-qa=\"dt-list-item-wrapper\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check size=\"400\" />\n      </template>\n    </dt-item-layout>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional Classes to apply to the wrapper element,\n     * note: it only applies on \"default\" type\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    wrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    isDefaultType () {\n      return this.type === LIST_ITEM_TYPES.DEFAULT;\n    },\n\n    listItemListeners () {\n      return {\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      // disabled as we do not want to override native click\n      // eslint-disable-next-line vue/require-explicit-emits\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n"],"names":["ROLES","_sfc_main","DtItemLayout","DtIconCheck","utils","role","LIST_ITEM_TYPES","t","LIST_ITEM_NAVIGATION_TYPES","event","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_component_dt_item_layout","_ctx","_","slotName","_renderSlot","_createVNode","_component_dt_icon_check"],"mappings":"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"}
+{"version":3,"file":"list-item.js","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"[\n      'd-list-item',\n      {\n        'd-list-item--focusable': isFocusable,\n        'd-list-item--highlighted': isHighlighted,\n        'd-list-item--static': !isHoverable,\n      }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <dt-item-layout\n      v-if=\"isDefaultType\"\n      unstyled\n      :class=\"['d-list-item__wrapper', wrapperClass]\"\n      start-class=\"d-list-item__left\"\n      content-class=\"d-list-item__content\"\n      title-class=\"d-list-item__title\"\n      subtitle-class=\"d-list-item__subtitle\"\n      block-end-class=\"d-list-item__bottom\"\n      end-class=\"d-list-item__right\"\n      selected-class=\"d-list-item__selected\"\n      data-qa=\"dt-list-item-wrapper\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check size=\"400\" />\n      </template>\n    </dt-item-layout>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional Classes to apply to the wrapper element,\n     * note: it only applies on \"default\" type\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    wrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    isDefaultType () {\n      return this.type === LIST_ITEM_TYPES.DEFAULT;\n    },\n\n    listItemListeners () {\n      return {\n        click: event => {\n          this.onClick(event);\n        },\n\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      // disabled as we do not want to override native click\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n"],"names":["ROLES","_sfc_main","DtItemLayout","DtIconCheck","utils","role","LIST_ITEM_TYPES","t","LIST_ITEM_NAVIGATION_TYPES","event","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_component_dt_item_layout","_ctx","_","slotName","_renderSlot","_createVNode","_component_dt_icon_check"],"mappings":"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"}