@dialpad/dialtone-vue 3.223.0-next.3 → 3.223.1

package/dist/lib/banner/banner.js

@@ -1,20 +1,23 @@
 import e from "../../common/utils/index.js";
 import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { NOTICE_KINDS as n } from "../notice/notice-constants.js";
-import r from "../notice/notice-icon.js";
-import i from "../notice/notice-content.js";
-import a from "../notice/notice-action.js";
-import { createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderSlot as m, resolveComponent as h, resolveDirective as g, withCtx as _, withDirectives as v } from "vue";
-//#region components/Banner/Banner.vue
+import n from "../../common/mixins/modal.js";
+import { NOTICE_KINDS as r } from "../notice/notice-constants.js";
+import i from "../notice/notice-icon.js";
+import a from "../notice/notice-content.js";
+import o from "../notice/notice-action.js";
+import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, normalizeClass as f, normalizeStyle as p, openBlock as m, renderSlot as h, resolveComponent as g, withCtx as _, withKeys as v } from "vue";
+//#region components/banner/banner.vue
 var y = {
+	compatConfig: { MODE: 3 },
 	name: "DtBanner",
 	components: {
-		DtNoticeIcon: r,
-		DtNoticeContent: i,
-		DtNoticeAction: a
+		DtNoticeIcon: i,
+		DtNoticeContent: a,
+		DtNoticeAction: o
 	},
+	mixins: [n],
 	props: {
-		headerId: {
+		titleId: {
 			type: String,
 			default() {
 				return e.getUniqueString();
@@ -26,9 +29,9 @@ var y = {
 				return e.getUniqueString();
 			}
 		},
-		headerText: {
+		title: {
 			type: String,
-			default: void 0
+			default: ""
 		},
 		important: {
 			type: Boolean,
@@ -41,21 +44,21 @@ var y = {
 		kind: {
 			type: String,
 			default: "base",
-			validator(e) {
-				return n.includes(e);
+			validate(e) {
+				return r.includes(e);
 			}
 		},
-		showClose: {
+		hideClose: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
-		showIcon: {
+		hideIcon: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
-		showAction: {
+		hideAction: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
 		dialogClass: {
 			type: String,
@@ -68,38 +71,6 @@ var y = {
 		backgroundSize: {
 			type: String,
 			default: "cover"
-		},
-		iconClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		headerClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		contentClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		actionClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
 		}
 	},
 	emits: ["close"],
@@ -107,16 +78,13 @@ var y = {
 		role() {
 			return this.important ? "alertdialog" : "status";
 		},
-		hasHeader() {
-			return !!this.headerText || !!this.$slots.header;
-		},
 		bannerClass() {
 			return [
 				"d-banner",
 				{
-					critical: "d-banner--critical",
+					error: "d-banner--error",
 					info: "d-banner--info",
-					positive: "d-banner--positive",
+					success: "d-banner--success",
 					warning: "d-banner--warning",
 					base: "d-banner--base"
 				}[this.kind],
@@ -130,75 +98,59 @@ var y = {
 			return this.backgroundImage === "" ? null : `background-image: url(${this.backgroundImage});
               background-size: ${this.backgroundSize};`;
 		}
-	}
+	},
+	mounted() {
+		this.important && this.focusFirstElement();
+	},
+	methods: { trapFocus(e) {
+		this.important && this.focusTrappedTabPress(e);
+	} }
 }, b = [
 	"role",
-	"aria-modal",
 	"aria-labelledby",
 	"aria-describedby"
 ];
 function x(e, t, n, r, i, a) {
-	let y = h("dt-notice-icon"), x = h("dt-notice-content"), S = h("dt-notice-action"), C = g("dt-focustrap");
-	return v((p(), c("aside", {
-		class: d(a.bannerClass),
-		style: f(a.bannerBackgroundImage),
-		"data-qa": "dt-banner"
-	}, [l("div", {
-		class: d(["d-banner__dialog", n.dialogClass]),
-		"data-qa": "dt-banner-dialog",
+	let o = g("dt-notice-icon"), y = g("dt-notice-content"), x = g("dt-notice-action");
+	return m(), l("aside", {
+		class: f(a.bannerClass),
+		style: p(a.bannerBackgroundImage),
+		onKeydown: t[1] || (t[1] = v((...e) => a.trapFocus && a.trapFocus(...e), ["tab"]))
+	}, [u("div", {
+		class: f(["d-banner__dialog", n.dialogClass]),
 		role: a.role,
-		"aria-modal": n.important || void 0,
-		"aria-labelledby": a.hasHeader ? n.headerId : void 0,
+		"aria-labelledby": n.titleId,
 		"aria-describedby": n.contentId
 	}, [
-		n.showIcon ? (p(), o(y, {
+		n.hideIcon ? c("", !0) : (m(), s(o, {
 			key: 0,
-			kind: n.kind,
-			"icon-class": n.iconClass,
-			class: d({ "d-notice__icon--has-title": n.headerText || e.$slots.header })
+			kind: n.kind
 		}, {
-			default: _(() => [m(e.$slots, "icon")]),
+			default: _(() => [h(e.$slots, "icon")]),
 			_: 3
-		}, 8, [
-			"kind",
-			"icon-class",
-			"class"
-		])) : s("", !0),
-		u(x, {
-			"header-id": n.headerId,
+		}, 8, ["kind"])),
+		d(y, {
+			"title-id": n.titleId,
 			"content-id": n.contentId,
-			"header-text": n.headerText,
-			"header-class": n.headerClass,
-			"content-class": n.contentClass
+			title: n.title
 		}, {
-			header: _(() => [m(e.$slots, "header")]),
-			default: _(() => [m(e.$slots, "default")]),
+			titleOverride: _(() => [h(e.$slots, "titleOverride")]),
+			default: _(() => [h(e.$slots, "default")]),
 			_: 3
 		}, 8, [
-			"header-id",
+			"title-id",
 			"content-id",
-			"header-text",
-			"header-class",
-			"content-class"
+			"title"
 		]),
-		u(S, {
-			"show-action": n.showAction,
-			"show-close": n.showClose,
-			"action-class": n.actionClass,
+		d(x, {
+			"hide-action": n.hideAction,
+			"hide-close": n.hideClose,
 			onClose: t[0] || (t[0] = (t) => e.$emit("close"))
 		}, {
-			default: _(() => [m(e.$slots, "action")]),
+			default: _(() => [h(e.$slots, "action")]),
 			_: 3
-		}, 8, [
-			"show-action",
-			"show-close",
-			"action-class"
-		])
-	], 10, b)], 6)), [[C, {
-		active: n.important,
-		initialFocus: "auto",
-		restoreFocus: !0
-	}]]);
+		}, 8, ["hide-action", "hide-close"])
+	], 10, b)], 38);
 }
 var S = /* @__PURE__ */ t(y, [["render", x]]);
 //#endregion

package/dist/lib/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","names":[],"sources":["../../../components/Banner/Banner.vue"],"sourcesContent":["<template>\n  <aside\n    v-dt-focustrap=\"{ active: important, initialFocus: 'auto', restoreFocus: true }\"\n    :class=\"bannerClass\"\n    :style=\"bannerBackgroundImage\"\n    data-qa=\"dt-banner\"\n  >\n    <div\n      class=\"d-banner__dialog\"\n      :class=\"dialogClass\"\n      data-qa=\"dt-banner-dialog\"\n      :role=\"role\"\n      :aria-modal=\"important || undefined\"\n      :aria-labelledby=\"hasHeader ? headerId : undefined\"\n      :aria-describedby=\"contentId\"\n    >\n      <dt-notice-icon\n        v-if=\"showIcon\"\n        :kind=\"kind\"\n        :icon-class=\"iconClass\"\n        :class=\"{ 'd-notice__icon--has-title': headerText || $slots.header }\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :header-id=\"headerId\"\n        :content-id=\"contentId\"\n        :header-text=\"headerText\"\n        :header-class=\"headerClass\"\n        :content-class=\"contentClass\"\n      >\n        <template #header>\n          <!-- @slot Slot for the header -->\n          <slot name=\"header\" />\n        </template>\n        <!-- @slot the main textual content of the banner -->\n        <slot />\n      </dt-notice-content>\n      <dt-notice-action\n        :show-action=\"showAction\"\n        :show-close=\"showClose\"\n        :action-class=\"actionClass\"\n        @close=\"$emit('close')\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/Notice';\nimport utils from '@/common/utils';\n\n/**\n * Banners are a type of notice, delivering system and engagement messaging.\n * These are highly intrusive notices and should be used sparingly and appropriately.\n * @see https://dialtone.dialpad.com/components/banner.html\n */\nexport default {\n  name: 'DtBanner',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  props: {\n    /**\n     * Sets an ID on the header element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the header.\n     */\n    headerId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Header text of the banner. This can be left blank to remove the header from the banner entirely.\n     */\n    headerText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alertdialog,\n     * and will modally trap keyboard focus within the banner while it is shown (via the\n     * v-dt-focustrap directive), restoring focus to the previously focused element on close.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Pins the banner to the top of the window and pushes all app content down.\n     * @values true, false\n     */\n    pinned: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, critical, info, positive, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Shows the close button in the banner\n     * @values true, false\n     */\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the icon in the banner\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the action in the banner\n     * @values true, false\n     */\n    showAction: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Inner dialog class\n     */\n    dialogClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Banner background image\n     */\n    backgroundImage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Background image size, follows the background-size CSS property values\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n     *   CSS background-sizes\n     * </a>\n     */\n    backgroundSize: {\n      type: String,\n      default: 'cover',\n    },\n\n    /**\n     * Additional class name for the icon wrapper element.\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the header wrapper element.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the action wrapper element.\n     */\n    actionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    role () {\n      return this.important ? 'alertdialog' : 'status';\n    },\n\n    hasHeader () {\n      return !!this.headerText || !!this.$slots.header;\n    },\n\n    bannerClass () {\n      const kindClasses = {\n        critical: 'd-banner--critical',\n        info: 'd-banner--info',\n        positive: 'd-banner--positive',\n        warning: 'd-banner--warning',\n        base: 'd-banner--base',\n      };\n\n      return [\n        'd-banner',\n        kindClasses[this.kind],\n        {\n          'd-banner--important': this.important,\n          'd-banner--pinned': this.pinned,\n        },\n      ];\n    },\n\n    bannerBackgroundImage () {\n      if (this.backgroundImage === '') return null;\n\n      return `background-image: url(${this.backgroundImage});\n              background-size: ${this.backgroundSize};`;\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;;AA6DA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY;EACV,cAAA;EACA,iBAAA;EACA,gBAAA;EACD;CAED,OAAO;EAKL,UAAU;GACR,MAAM;GACN,UAAW;AAAE,WAAO,EAAM,iBAAiB;;GAC5C;EAMD,WAAW;GACT,MAAM;GACN,UAAW;AAAE,WAAO,EAAM,iBAAiB;;GAC5C;EAKD,YAAY;GACV,MAAM;GACN,SAAS,KAAA;GACV;EASD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,UAAW,GAAM;AACf,WAAO,EAAa,SAAS,EAAK;;GAErC;EAMD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,iBAAiB;GACf,MAAM;GACN,SAAS;GACV;EAQD,gBAAgB;GACd,MAAM;GACN,SAAS;GACV;EAKD,WAAW;GACT,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,aAAa;GACX,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,aAAa;GACX,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EACF;CAED,OAAO,CAML,QACD;CAED,UAAU;EACR,OAAQ;AACN,UAAO,KAAK,YAAY,gBAAgB;;EAG1C,YAAa;AACX,UAAO,CAAC,CAAC,KAAK,cAAc,CAAC,CAAC,KAAK,OAAO;;EAG5C,cAAe;AASb,UAAO;IACL;IATkB;KAClB,UAAU;KACV,MAAM;KACN,UAAU;KACV,SAAS;KACT,MAAM;KACP,CAIa,KAAK;IACjB;KACE,uBAAuB,KAAK;KAC5B,oBAAoB,KAAK;KAC1B;IACF;;EAGH,wBAAyB;AAGvB,UAFI,KAAK,oBAAoB,KAAW,OAEjC,yBAAyB,KAAK,gBAAgB;iCAC1B,KAAK,eAAe;;EAElD;CACF;;;;;;;;gBApQC,EAgDQ,SAAA;EA9CL,OAAK,EAAE,EAAA,YAAW;EAClB,OAAK,EAAE,EAAA,sBAAqB;EAC7B,WAAQ;KAER,EAyCM,OAAA;EAxCJ,OAAK,EAAA,CAAC,oBACE,EAAA,YAAW,CAAA;EACnB,WAAQ;EACP,MAAM,EAAA;EACN,cAAY,EAAA,aAAa,KAAA;EACzB,mBAAiB,EAAA,YAAY,EAAA,WAAW,KAAA;EACxC,oBAAkB,EAAA;;EAGX,EAAA,YAAA,GAAA,EADR,EAQiB,GAAA;;GANd,MAAM,EAAA;GACN,cAAY,EAAA;GACZ,OAAK,EAAA,EAAA,6BAAiC,EAAA,cAAc,EAAA,OAAO,QAAM,CAAA;;oBAG9C,CAApB,EAAoB,EAAA,QAAA,OAAA,CAAA,CAAA;;;;;;;EAEtB,EAaoB,GAAA;GAZjB,aAAW,EAAA;GACX,cAAY,EAAA;GACZ,eAAa,EAAA;GACb,gBAAc,EAAA;GACd,iBAAe,EAAA;;GAEL,QAAM,QAEO,CAAtB,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA;oBAGhB,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA;;;;;;;;;EAEV,EAQmB,GAAA;GAPhB,eAAa,EAAA;GACb,cAAY,EAAA;GACZ,gBAAc,EAAA;GACd,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,QAAA;;oBAGS,CAAtB,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA;;;;;;;;UA5CA,EAAA;EAAS,cAAA;EAAA,cAAA;EAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"banner.js","names":[],"sources":["../../../components/banner/banner.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <aside\n    :class=\"bannerClass\"\n    :style=\"bannerBackgroundImage\"\n    @keydown.tab=\"trapFocus\"\n  >\n    <div\n      class=\"d-banner__dialog\"\n      :class=\"dialogClass\"\n      :role=\"role\"\n      :aria-labelledby=\"titleId\"\n      :aria-describedby=\"contentId\"\n    >\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n      >\n        <template #titleOverride>\n          <!-- eslint-disable-next-line max-len -->\n          <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the banner -->\n        <slot />\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        @close=\"$emit('close')\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\n\n/**\n * Banners are a type of notice, delivering system and engagement messaging.\n * These are highly intrusive notices and should be used sparingly and appropriately.\n * @see https://dialtone.dialpad.com/components/banner.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBanner',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alertdialog.\n     * and will modally trap the keyboard focus in the dialog as soon as it displays.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Pins the banner to the top of the window and pushes all app content down.\n     * @values true, false\n     */\n    pinned: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Inner dialog class\n     */\n    dialogClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Banner background image\n     */\n    backgroundImage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Background image size, follows the background-size CSS property values\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n     *   CSS background-sizes\n     * </a>\n     */\n    backgroundSize: {\n      type: String,\n      default: 'cover',\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    role () {\n      return this.important ? 'alertdialog' : 'status';\n    },\n\n    bannerClass () {\n      const kindClasses = {\n        error: 'd-banner--error',\n        info: 'd-banner--info',\n        success: 'd-banner--success',\n        warning: 'd-banner--warning',\n        base: 'd-banner--base',\n      };\n\n      return [\n        'd-banner',\n        kindClasses[this.kind],\n        {\n          'd-banner--important': this.important,\n          'd-banner--pinned': this.pinned,\n        },\n      ];\n    },\n\n    bannerBackgroundImage () {\n      if (this.backgroundImage === '') return null;\n\n      return `background-image: url(${this.backgroundImage});\n              background-size: ${this.backgroundSize};`;\n    },\n  },\n\n  mounted () {\n    if (this.important) {\n      this.focusFirstElement();\n    }\n  },\n\n  methods: {\n    trapFocus (e) {\n      if (this.important) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;;;AAwDA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV,cAAA;EACA,iBAAA;EACA,gBAAA;EACD;CAED,QAAQ,CAAC,EAAM;CAEf,OAAO;EAKL,SAAS;GACP,MAAM;GACN,UAAW;AAAE,WAAO,EAAM,iBAAiB;;GAC5C;EAMD,WAAW;GACT,MAAM;GACN,UAAW;AAAE,WAAO,EAAM,iBAAiB;;GAC5C;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAQD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,SAAU,GAAM;AACd,WAAO,EAAa,SAAS,EAAK;;GAErC;EAMD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,iBAAiB;GACf,MAAM;GACN,SAAS;GACV;EAQD,gBAAgB;GACd,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO,CAML,QACD;CAED,UAAU;EACR,OAAQ;AACN,UAAO,KAAK,YAAY,gBAAgB;;EAG1C,cAAe;AASb,UAAO;IACL;IATkB;KAClB,OAAO;KACP,MAAM;KACN,SAAS;KACT,SAAS;KACT,MAAM;KACP,CAIa,KAAK;IACjB;KACE,uBAAuB,KAAK;KAC5B,oBAAoB,KAAK;KAC1B;IACF;;EAGH,wBAAyB;AAGvB,UAFI,KAAK,oBAAoB,KAAW,OAEjC,yBAAyB,KAAK,gBAAgB;iCAC1B,KAAK,eAAe;;EAElD;CAED,UAAW;AACT,EAAI,KAAK,aACP,KAAK,mBAAmB;;CAI5B,SAAS,EACP,UAAW,GAAG;AACZ,EAAI,KAAK,aACP,KAAK,qBAAqB,EAAE;IAGjC;CACF;;;;;;;aA1OC,EAyCQ,SAAA;EAxCL,OAAK,EAAE,EAAA,YAAW;EAClB,OAAK,EAAE,EAAA,sBAAqB;EAC5B,WAAO,EAAA,OAAA,EAAA,KAAA,GAAA,GAAA,MAAM,EAAA,aAAA,EAAA,UAAA,GAAA,EAAS,EAAA,CAAA,MAAA,CAAA;KAEvB,EAmCM,OAAA;EAlCJ,OAAK,EAAA,CAAC,oBACE,EAAA,YAAW,CAAA;EAClB,MAAM,EAAA;EACN,mBAAiB,EAAA;EACjB,oBAAkB,EAAA;;EAGV,EAAA,wBAAA,GAAA,EADT,EAMiB,GAAA;;GAJd,MAAM,EAAA;;oBAGa,CAApB,EAAoB,EAAA,QAAA,OAAA,CAAA,CAAA;;;EAEtB,EAYoB,GAAA;GAXjB,YAAU,EAAA;GACV,cAAY,EAAA;GACZ,OAAO,EAAA;;GAEG,eAAa,QAGO,CAA7B,EAA6B,EAAA,QAAA,gBAAA,CAAA,CAAA;oBAGvB,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA;;;;;;;EAEV,EAOmB,GAAA;GANhB,eAAa,EAAA;GACb,cAAY,EAAA;GACZ,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,QAAA;;oBAGS,CAAtB,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/lib/breadcrumbs/breadcrumb-item.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../link/link-constants.cjs`),r=require(`../link/link.cjs`),i=require(`./breadcrumbs-constants.cjs`);let a=require(`vue`);var o={name:`DtBreadcrumbItem`,components:{DtLink:r.default},inheritAttrs:!1,props:{inverted:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},label:{type:String,default:``}},data(){return{BREADCRUMB_ITEM_SELECTED_MODIFIER:i.BREADCRUMB_ITEM_SELECTED_MODIFIER}},computed:{linkKind(){return this.inverted?``:n.MUTED},linkInverted(){return!!this.inverted},ariaCurrent(){return this.selected?`location`:void 0}},methods:{removeClassStyleAttrs:e.removeClassStyleAttrs}};function s(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-link`);return(0,a.openBlock)(),(0,a.createElementBlock)(`li`,{"data-qa":`dt-breadcrumb-item`,class:(0,a.normalizeClass)([`d-breadcrumbs__item`,{[i.BREADCRUMB_ITEM_SELECTED_MODIFIER]:n.selected},e.$attrs.class]),style:(0,a.normalizeStyle)(e.$attrs.style)},[(0,a.createVNode)(s,(0,a.mergeProps)({kind:o.linkKind,inverted:o.linkInverted,"aria-current":o.ariaCurrent,underline:!1,"data-qa":`breadcrumb-item`},o.removeClassStyleAttrs(e.$attrs),{class:[`d-breadcrumbs__link`]}),{default:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`default`,{},()=>[(0,a.createTextVNode)((0,a.toDisplayString)(n.label),1)])]),_:3},16,[`kind`,`inverted`,`aria-current`])],6)}var c=t.t(o,[[`render`,s]]);exports.default=c;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../link/link-constants.cjs`),r=require(`../link/link.cjs`),i=require(`./breadcrumbs-constants.cjs`);let a=require(`vue`);var o={name:`DtBreadcrumbItem`,components:{DtLink:r.default},inheritAttrs:!1,props:{inverted:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},label:{type:String,default:``},rootClass:{type:[String,Object,Array],default:``}},data(){return{BREADCRUMB_ITEM_SELECTED_MODIFIER:i.BREADCRUMB_ITEM_SELECTED_MODIFIER}},computed:{linkKind(){return this.inverted?``:n.MUTED},linkInverted(){return!!this.inverted},ariaCurrent(){return this.selected?`location`:void 0}},methods:{removeClassStyleAttrs:e.removeClassStyleAttrs,addClassStyleAttrs:e.addClassStyleAttrs}};function s(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-link`);return(0,a.openBlock)(),(0,a.createElementBlock)(`li`,(0,a.mergeProps)({"data-qa":`dt-breadcrumb-item`,class:[n.rootClass,`d-breadcrumbs__item`,{[i.BREADCRUMB_ITEM_SELECTED_MODIFIER]:n.selected}]},o.addClassStyleAttrs(e.$attrs)),[(0,a.createVNode)(s,(0,a.mergeProps)({kind:o.linkKind,inverted:o.linkInverted,"aria-current":o.ariaCurrent,"data-qa":`breadcrumb-item`},o.removeClassStyleAttrs(e.$attrs)),{default:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`default`,{},()=>[(0,a.createTextVNode)((0,a.toDisplayString)(n.label),1)])]),_:3},16,[`kind`,`inverted`,`aria-current`])],16)}var c=t.t(o,[[`render`,s]]);exports.default=c;
 //# sourceMappingURL=breadcrumb-item.cjs.map

package/dist/lib/breadcrumbs/breadcrumb-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.cjs","names":[],"sources":["../../../components/Breadcrumbs/BreadcrumbItem.vue"],"sourcesContent":["<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n      $attrs.class,\n    ]\"\n    :style=\"$attrs.style\"\n  >\n    <dt-link\n      :kind=\"linkKind\"\n      :inverted=\"linkInverted\"\n      :aria-current=\"ariaCurrent\"\n      :underline=\"false\"\n      data-qa=\"breadcrumb-item\"\n      v-bind=\"removeClassStyleAttrs($attrs)\"\n      :class=\"['d-breadcrumbs__link']\"\n    >\n      <!-- @slot default slot for breadcrumb item's label -->\n      <slot>\n        {{ label }}\n      </slot>\n    </dt-link>\n  </li>\n</template>\n\n<script>\nimport { BREADCRUMB_ITEM_SELECTED_MODIFIER } from './BreadcrumbsConstants';\nimport { removeClassStyleAttrs } from '@/common/utils';\nimport { DtLink, MUTED } from '@/components/Link';\n\nexport default {\n  name: 'DtBreadcrumbItem',\n\n  components: {\n    DtLink,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * @deprecated Use v-dt-mode instead.\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @deprecated Use v-dt-mode directive instead.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Applies selected styles to the breadcrumb\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Describes the breadcrumb. Overridden by default slot\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMB_ITEM_SELECTED_MODIFIER,\n\n    };\n  },\n\n  computed: {\n    linkKind () {\n      return this.inverted ? '' : MUTED;\n    },\n\n    linkInverted () {\n      return !!this.inverted;\n    },\n\n    ariaCurrent () {\n      return this.selected ? 'location' : undefined;\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n  },\n};\n</script>\n"],"mappings":"iXAgCA,IAAK,EAAU,CACb,KAAM,mBAEN,WAAY,CACV,OAAA,EAAA,QACD,CAED,aAAc,GAEd,MAAO,CAML,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,kCAAA,EAAA,kCAED,EAGH,SAAU,CACR,UAAY,CACV,OAAO,KAAK,SAAW,GAAK,EAAA,OAG9B,cAAgB,CACd,MAAO,CAAC,CAAC,KAAK,UAGhB,aAAe,CACb,OAAO,KAAK,SAAW,WAAa,IAAA,IAEvC,CAED,QAAS,CACP,sBAAA,EAAA,sBACD,CACF,kHArEM,KAAA,CAtBH,UAAQ,qBACP,OAAA,EAAA,EAAA,gBAAK,yBAA0C,EAAA,mCAAoC,EAAA,SAAQ,CAAU,EAAA,OAAO,QAK5G,OAAA,EAAA,EAAA,gBAAO,EAAA,OAAO,MAAK,qBAeV,GAAA,EAAA,EAAA,YAAA,CAZP,KAAM,EAAA,SACN,SAAU,EAAA,aACV,eAAc,EAAA,YACd,UAAW,GACZ,UAAQ,mBACA,EAAA,sBAAsB,EAAA,OAAM,CAAA,CACnC,MAAO,CAAA,sBAAuB,CAAA,CAAA,CAAA,2BAKxB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,EAAA,KAAA,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBADF,EAAA,MAAK,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"breadcrumb-item.cjs","names":[],"sources":["../../../components/breadcrumbs/breadcrumb_item.vue"],"sourcesContent":["<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      rootClass,\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <dt-link\n      :kind=\"linkKind\"\n      :inverted=\"linkInverted\"\n      :aria-current=\"ariaCurrent\"\n      data-qa=\"breadcrumb-item\"\n      v-bind=\"removeClassStyleAttrs($attrs)\"\n    >\n      <!-- @slot default slot for breadcrumb item's label -->\n      <slot>\n        {{ label }}\n      </slot>\n    </dt-link>\n  </li>\n</template>\n\n<script>\nimport { BREADCRUMB_ITEM_SELECTED_MODIFIER } from './breadcrumbs_constants';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { DtLink, MUTED } from '@/components/link';\n\nexport default {\n  name: 'DtBreadcrumbItem',\n\n  components: {\n    DtLink,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Applies selected styles to the breadcrumb\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Describes the breadcrumb. Overridden by default slot\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the root element.\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    rootClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMB_ITEM_SELECTED_MODIFIER,\n\n    };\n  },\n\n  computed: {\n    linkKind () {\n      return this.inverted ? '' : MUTED;\n    },\n\n    linkInverted () {\n      return !!this.inverted;\n    },\n\n    ariaCurrent () {\n      return this.selected ? 'location' : undefined;\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n  },\n};\n</script>\n"],"mappings":"iXA8BA,IAAK,EAAU,CACb,KAAM,mBAEN,WAAY,CACV,OAAA,EAAA,QACD,CAED,aAAc,GAEd,MAAO,CAIL,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAOD,UAAW,CACT,KAAM,CAAC,OAAQ,OAAQ,MAAM,CAC7B,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,kCAAA,EAAA,kCAED,EAGH,SAAU,CACR,UAAY,CACV,OAAO,KAAK,SAAW,GAAK,EAAA,OAG9B,cAAgB,CACd,MAAO,CAAC,CAAC,KAAK,UAGhB,aAAe,CACb,OAAO,KAAK,SAAW,WAAa,IAAA,IAEvC,CAED,QAAS,CACP,sBAAA,EAAA,sBACA,mBAAA,EAAA,mBACD,CACF,kHA9EM,MAAA,EAAA,EAAA,YAAA,CApBH,UAAQ,qBACP,MAAK,CAAU,EAAA,kCAAiD,EAAA,mCAAoC,EAAA,SAAQ,GAKrG,EAAA,mBAAmB,EAAA,OAAM,CAAA,CAAA,EAAA,EAAA,EAAA,aAavB,GAAA,EAAA,EAAA,YAAA,CAVP,KAAM,EAAA,SACN,SAAU,EAAA,aACV,eAAc,EAAA,YACf,UAAQ,mBACA,EAAA,sBAAsB,EAAA,OAAM,CAAA,CAAA,2BAK7B,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,EAAA,KAAA,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBADF,EAAA,MAAK,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/lib/breadcrumbs/breadcrumb-item.js

@@ -1,13 +1,13 @@
-import { removeClassStyleAttrs as e } from "../../common/utils/index.js";
-import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { MUTED as n } from "../link/link-constants.js";
-import r from "../link/link.js";
-import { BREADCRUMB_ITEM_SELECTED_MODIFIER as i } from "./breadcrumbs-constants.js";
-import { createElementBlock as a, createTextVNode as o, createVNode as s, mergeProps as c, normalizeClass as l, normalizeStyle as u, openBlock as d, renderSlot as f, resolveComponent as p, toDisplayString as m, withCtx as h } from "vue";
-//#region components/Breadcrumbs/BreadcrumbItem.vue
-var g = {
+import { addClassStyleAttrs as e, removeClassStyleAttrs as t } from "../../common/utils/index.js";
+import { t as n } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { MUTED as r } from "../link/link-constants.js";
+import i from "../link/link.js";
+import { BREADCRUMB_ITEM_SELECTED_MODIFIER as a } from "./breadcrumbs-constants.js";
+import { createElementBlock as o, createTextVNode as s, createVNode as c, mergeProps as l, openBlock as u, renderSlot as d, resolveComponent as f, toDisplayString as p, withCtx as m } from "vue";
+//#region components/breadcrumbs/breadcrumb_item.vue
+var h = {
 	name: "DtBreadcrumbItem",
-	components: { DtLink: r },
+	components: { DtLink: i },
 	inheritAttrs: !1,
 	props: {
 		inverted: {
@@ -21,14 +21,22 @@ var g = {
 		label: {
 			type: String,
 			default: ""
+		},
+		rootClass: {
+			type: [
+				String,
+				Object,
+				Array
+			],
+			default: ""
 		}
 	},
 	data() {
-		return { BREADCRUMB_ITEM_SELECTED_MODIFIER: i };
+		return { BREADCRUMB_ITEM_SELECTED_MODIFIER: a };
 	},
 	computed: {
 		linkKind() {
-			return this.inverted ? "" : n;
+			return this.inverted ? "" : r;
 		},
 		linkInverted() {
 			return !!this.inverted;
@@ -37,35 +45,36 @@ var g = {
 			return this.selected ? "location" : void 0;
 		}
 	},
-	methods: { removeClassStyleAttrs: e }
+	methods: {
+		removeClassStyleAttrs: t,
+		addClassStyleAttrs: e
+	}
 };
-function _(e, t, n, r, i, g) {
-	let _ = p("dt-link");
-	return d(), a("li", {
+function g(e, t, n, r, i, a) {
+	let h = f("dt-link");
+	return u(), o("li", l({
 		"data-qa": "dt-breadcrumb-item",
-		class: l([
+		class: [
+			n.rootClass,
 			"d-breadcrumbs__item",
-			{ [i.BREADCRUMB_ITEM_SELECTED_MODIFIER]: n.selected },
-			e.$attrs.class
-		]),
-		style: u(e.$attrs.style)
-	}, [s(_, c({
-		kind: g.linkKind,
-		inverted: g.linkInverted,
-		"aria-current": g.ariaCurrent,
-		underline: !1,
+			{ [i.BREADCRUMB_ITEM_SELECTED_MODIFIER]: n.selected }
+		]
+	}, a.addClassStyleAttrs(e.$attrs)), [c(h, l({
+		kind: a.linkKind,
+		inverted: a.linkInverted,
+		"aria-current": a.ariaCurrent,
 		"data-qa": "breadcrumb-item"
-	}, g.removeClassStyleAttrs(e.$attrs), { class: ["d-breadcrumbs__link"] }), {
-		default: h(() => [f(e.$slots, "default", {}, () => [o(m(n.label), 1)])]),
+	}, a.removeClassStyleAttrs(e.$attrs)), {
+		default: m(() => [d(e.$slots, "default", {}, () => [s(p(n.label), 1)])]),
 		_: 3
 	}, 16, [
 		"kind",
 		"inverted",
 		"aria-current"
-	])], 6);
+	])], 16);
 }
-var v = /* @__PURE__ */ t(g, [["render", _]]);
+var _ = /* @__PURE__ */ n(h, [["render", g]]);
 //#endregion
-export { v as default };
+export { _ as default };
 
 //# sourceMappingURL=breadcrumb-item.js.map

package/dist/lib/breadcrumbs/breadcrumb-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.js","names":[],"sources":["../../../components/Breadcrumbs/BreadcrumbItem.vue"],"sourcesContent":["<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n      $attrs.class,\n    ]\"\n    :style=\"$attrs.style\"\n  >\n    <dt-link\n      :kind=\"linkKind\"\n      :inverted=\"linkInverted\"\n      :aria-current=\"ariaCurrent\"\n      :underline=\"false\"\n      data-qa=\"breadcrumb-item\"\n      v-bind=\"removeClassStyleAttrs($attrs)\"\n      :class=\"['d-breadcrumbs__link']\"\n    >\n      <!-- @slot default slot for breadcrumb item's label -->\n      <slot>\n        {{ label }}\n      </slot>\n    </dt-link>\n  </li>\n</template>\n\n<script>\nimport { BREADCRUMB_ITEM_SELECTED_MODIFIER } from './BreadcrumbsConstants';\nimport { removeClassStyleAttrs } from '@/common/utils';\nimport { DtLink, MUTED } from '@/components/Link';\n\nexport default {\n  name: 'DtBreadcrumbItem',\n\n  components: {\n    DtLink,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * @deprecated Use v-dt-mode instead.\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @deprecated Use v-dt-mode directive instead.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Applies selected styles to the breadcrumb\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Describes the breadcrumb. Overridden by default slot\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMB_ITEM_SELECTED_MODIFIER,\n\n    };\n  },\n\n  computed: {\n    linkKind () {\n      return this.inverted ? '' : MUTED;\n    },\n\n    linkInverted () {\n      return !!this.inverted;\n    },\n\n    ariaCurrent () {\n      return this.selected ? 'location' : undefined;\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n  },\n};\n</script>\n"],"mappings":";;;;;;;AAgCA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY,EACV,QAAA,GACD;CAED,cAAc;CAEd,OAAO;EAML,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,sCAED;;CAGH,UAAU;EACR,WAAY;AACV,UAAO,KAAK,WAAW,KAAK;;EAG9B,eAAgB;AACd,UAAO,CAAC,CAAC,KAAK;;EAGhB,cAAe;AACb,UAAO,KAAK,WAAW,aAAa,KAAA;;EAEvC;CAED,SAAS,EACP,0BACD;CACF;;;aA5FC,EAuBK,MAAA;EAtBH,WAAQ;EACP,OAAK,EAAA;;MAA0C,EAAA,oCAAoC,EAAA,UAAQ;GAAU,EAAA,OAAO;;EAK5G,OAAK,EAAE,EAAA,OAAO,MAAK;KAEpB,EAaU,GAbV,EAaU;EAZP,MAAM,EAAA;EACN,UAAU,EAAA;EACV,gBAAc,EAAA;EACd,WAAW;EACZ,WAAQ;IACA,EAAA,sBAAsB,EAAA,OAAM,EAAA,EACnC,OAAO,CAAA,sBAAuB,EAAA,CAAA,EAAA;mBAKxB,CAFP,EAEO,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"breadcrumb-item.js","names":[],"sources":["../../../components/breadcrumbs/breadcrumb_item.vue"],"sourcesContent":["<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      rootClass,\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <dt-link\n      :kind=\"linkKind\"\n      :inverted=\"linkInverted\"\n      :aria-current=\"ariaCurrent\"\n      data-qa=\"breadcrumb-item\"\n      v-bind=\"removeClassStyleAttrs($attrs)\"\n    >\n      <!-- @slot default slot for breadcrumb item's label -->\n      <slot>\n        {{ label }}\n      </slot>\n    </dt-link>\n  </li>\n</template>\n\n<script>\nimport { BREADCRUMB_ITEM_SELECTED_MODIFIER } from './breadcrumbs_constants';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { DtLink, MUTED } from '@/components/link';\n\nexport default {\n  name: 'DtBreadcrumbItem',\n\n  components: {\n    DtLink,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Applies selected styles to the breadcrumb\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Describes the breadcrumb. Overridden by default slot\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the root element.\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    rootClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMB_ITEM_SELECTED_MODIFIER,\n\n    };\n  },\n\n  computed: {\n    linkKind () {\n      return this.inverted ? '' : MUTED;\n    },\n\n    linkInverted () {\n      return !!this.inverted;\n    },\n\n    ariaCurrent () {\n      return this.selected ? 'location' : undefined;\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n  },\n};\n</script>\n"],"mappings":";;;;;;;AA8BA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY,EACV,QAAA,GACD;CAED,cAAc;CAEd,OAAO;EAIL,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAOD,WAAW;GACT,MAAM;IAAC;IAAQ;IAAQ;IAAM;GAC7B,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,sCAED;;CAGH,UAAU;EACR,WAAY;AACV,UAAO,KAAK,WAAW,KAAK;;EAG9B,eAAgB;AACd,UAAO,CAAC,CAAC,KAAK;;EAGhB,cAAe;AACb,UAAO,KAAK,WAAW,aAAa,KAAA;;EAEvC;CAED,SAAS;EACP;EACA;EACD;CACF;;;aAnGC,EAqBK,MArBL,EAqBK;EApBH,WAAQ;EACP,OAAK;GAAU,EAAA;;MAAiD,EAAA,oCAAoC,EAAA,UAAQ;;IAKrG,EAAA,mBAAmB,EAAA,OAAM,CAAA,EAAA,CAEjC,EAWU,GAXV,EAWU;EAVP,MAAM,EAAA;EACN,UAAU,EAAA;EACV,gBAAc,EAAA;EACf,WAAQ;IACA,EAAA,sBAAsB,EAAA,OAAM,CAAA,EAAA;mBAK7B,CAFP,EAEO,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/lib/breadcrumbs/breadcrumbs-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs-constants.cjs","names":[],"sources":["../../../components/Breadcrumbs/BreadcrumbsConstants.js"],"sourcesContent":["export const BREADCRUMB_ITEM_SELECTED_MODIFIER = 'd-breadcrumbs__item--selected';\nexport const BREADCRUMBS_INVERTED_MODIFIER = 'd-breadcrumbs--inverted';\n"],"mappings":"mEAAA,IAAa,EAAoC,gCACpC,EAAgC"}
+{"version":3,"file":"breadcrumbs-constants.cjs","names":[],"sources":["../../../components/breadcrumbs/breadcrumbs_constants.js"],"sourcesContent":["export const BREADCRUMB_ITEM_SELECTED_MODIFIER = 'd-breadcrumbs__item--selected';\nexport const BREADCRUMBS_INVERTED_MODIFIER = 'd-breadcrumbs--inverted';\n"],"mappings":"mEAAA,IAAa,EAAoC,gCACpC,EAAgC"}

package/dist/lib/breadcrumbs/breadcrumbs-constants.js

@@ -1,4 +1,4 @@
-//#region components/Breadcrumbs/BreadcrumbsConstants.js
+//#region components/breadcrumbs/breadcrumbs_constants.js
 var e = "d-breadcrumbs__item--selected", t = "d-breadcrumbs--inverted";
 //#endregion
 export { t as BREADCRUMBS_INVERTED_MODIFIER, e as BREADCRUMB_ITEM_SELECTED_MODIFIER };

package/dist/lib/breadcrumbs/breadcrumbs-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs-constants.js","names":[],"sources":["../../../components/Breadcrumbs/BreadcrumbsConstants.js"],"sourcesContent":["export const BREADCRUMB_ITEM_SELECTED_MODIFIER = 'd-breadcrumbs__item--selected';\nexport const BREADCRUMBS_INVERTED_MODIFIER = 'd-breadcrumbs--inverted';\n"],"mappings":";AAAA,IAAa,IAAoC,iCACpC,IAAgC"}
+{"version":3,"file":"breadcrumbs-constants.js","names":[],"sources":["../../../components/breadcrumbs/breadcrumbs_constants.js"],"sourcesContent":["export const BREADCRUMB_ITEM_SELECTED_MODIFIER = 'd-breadcrumbs__item--selected';\nexport const BREADCRUMBS_INVERTED_MODIFIER = 'd-breadcrumbs--inverted';\n"],"mappings":";AAAA,IAAa,IAAoC,iCACpC,IAAgC"}

package/dist/lib/breadcrumbs/breadcrumbs.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../../localization/index.cjs`),n=require(`./breadcrumbs-constants.cjs`),r=require(`./breadcrumb-item.cjs`);let i=require(`vue`);var a={name:`DtBreadcrumbs`,components:{DtBreadcrumbItem:r.default},props:{breadcrumbs:{type:Array,default:()=>[],validator(e){return e.every(({href:e,label:t})=>e!==void 0&&t!==void 0)}},inverted:{type:Boolean,default:!1},listClass:{type:[String,Array,Object],default:``},ariaLabel:{type:String,default:``}},data(){return{BREADCRUMBS_INVERTED_MODIFIER:n.BREADCRUMBS_INVERTED_MODIFIER,i18n:new t.DialtoneLocalization}}},o=[`aria-label`];function s(e,t,n,r,a,s){let c=(0,i.resolveComponent)(`dt-breadcrumb-item`);return(0,i.openBlock)(),(0,i.createElementBlock)(`nav`,{"aria-label":n.ariaLabel||a.i18n.$t(`DIALTONE_BREADCRUMBS_ARIA_LABEL`),"data-qa":`dt-breadcrumbs`,class:(0,i.normalizeClass)([`d-breadcrumbs`,{[a.BREADCRUMBS_INVERTED_MODIFIER]:n.inverted}])},[(0,i.createElementVNode)(`ol`,{class:(0,i.normalizeClass)([`d-breadcrumbs__list`,n.listClass])},[(0,i.renderSlot)(e.$slots,`default`,{},()=>[((0,i.openBlock)(!0),(0,i.createElementBlock)(i.Fragment,null,(0,i.renderList)(n.breadcrumbs,(e,t)=>((0,i.openBlock)(),(0,i.createBlock)(c,(0,i.mergeProps)({key:`breadcrumbs-item-${t}-${e.href}`,inverted:n.inverted},{ref_for:!0},e),null,16,[`inverted`]))),128))])],2)],10,o)}var c=e.t(a,[[`render`,s]]);exports.default=c;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../localization/index.cjs`),r=require(`./breadcrumbs-constants.cjs`),i=require(`./breadcrumb-item.cjs`);let a=require(`vue`);var o={compatConfig:{MODE:3},name:`DtBreadcrumbs`,components:{DtBreadcrumbItem:i.default},props:{breadcrumbs:{type:Array,default:()=>[],validate(e){return e.every(({href:e,label:t})=>e!==void 0&&t!==void 0)}},inverted:{type:Boolean,default:!1},ariaLabel:{type:String,default:``}},data(){return{BREADCRUMBS_INVERTED_MODIFIER:r.BREADCRUMBS_INVERTED_MODIFIER,i18n:new n.DialtoneLocalization}},methods:{getBreadcrumbItemKey(t){return`breadcrumbs-item-${t}-${e.default.getUniqueString()}`}}},s=[`aria-label`];function c(e,t,n,r,i,o){let c=(0,a.resolveComponent)(`dt-breadcrumb-item`);return(0,a.openBlock)(),(0,a.createElementBlock)(`nav`,{"aria-label":n.ariaLabel||i.i18n.$t(`DIALTONE_BREADCRUMBS_ARIA_LABEL`),"data-qa":`dt-breadcrumbs`,class:(0,a.normalizeClass)([`d-breadcrumbs`,{[i.BREADCRUMBS_INVERTED_MODIFIER]:n.inverted}])},[(0,a.createElementVNode)(`ol`,null,[(0,a.renderSlot)(e.$slots,`default`,{},()=>[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(n.breadcrumbs,(e,t)=>((0,a.openBlock)(),(0,a.createBlock)(c,(0,a.mergeProps)({key:o.getBreadcrumbItemKey(t),inverted:n.inverted},{ref_for:!0},e),null,16,[`inverted`]))),128))])])],10,s)}var l=t.t(o,[[`render`,c]]);exports.default=l;
 //# sourceMappingURL=breadcrumbs.cjs.map

package/dist/lib/breadcrumbs/breadcrumbs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.cjs","names":[],"sources":["../../../components/Breadcrumbs/Breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel || i18n.$t('DIALTONE_BREADCRUMBS_ARIA_LABEL')\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol :class=\"['d-breadcrumbs__list', listClass]\">\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"`breadcrumbs-item-${index}-${item.href}`\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './BreadcrumbsConstants';\nimport DtBreadcrumbItem from './BreadcrumbItem.vue';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validator (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * @deprecated Use v-dt-mode instead.\n     * Passed through to link. If true, applies inverted styles to the link.\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     * Additional CSS class(es) applied to the list wrapper element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n};\n</script>\n"],"mappings":"8UAiCA,IAAK,EAAU,CACb,KAAM,gBAEN,WAAY,CACV,iBAAA,EAAA,QACD,CAED,MAAO,CAIL,YAAa,CACX,KAAM,MACN,YAAe,EAAE,CACjB,UAAW,EAAa,CACtB,OAAO,EAAY,OAAO,CAAE,OAAM,WACzB,IAAS,IAAA,IAAa,IAAU,IAAA,GACvC,EAEL,CAQD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,UAAW,CACT,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,UAAW,CACT,KAAM,OACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,8BAAA,EAAA,8BACA,KAAM,IAAI,EAAA,qBACX,EAEJ,8IApEO,MAAA,CAlBH,aAAY,EAAA,WAAa,EAAA,KAAK,GAAE,kCAAA,CACjC,UAAQ,iBACP,OAAA,EAAA,EAAA,gBAAK,CAAA,gBAAA,EAAoC,EAAA,+BAAgC,EAAA,SAAQ,CAAA,CAAA,4BAe7E,KAAA,CAVA,OAAA,EAAA,EAAA,gBAAK,CAAA,sBAA0B,EAAA,UAAS,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,YASpC,EAAA,OAAA,UAAA,EAAA,KAAA,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBADH,EAAA,SAAA,MAAA,EAAA,EAAA,YAJwB,EAAA,aAAhB,EAAM,yCAId,GAAA,EAAA,EAAA,YAAA,CAHC,IAAG,oBAAsB,EAAK,GAAI,EAAK,OACvC,SAAU,EAAA,uBACH,EAAI,CAAA,KAAA,GAAA,CAAA,WAAA,CAAA"}
+{"version":3,"file":"breadcrumbs.cjs","names":[],"sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel || i18n.$t('DIALTONE_BREADCRUMBS_ARIA_LABEL')\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"mappings":"wXAkCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,gBAEN,WAAY,CACV,iBAAA,EAAA,QACD,CAED,MAAO,CAIL,YAAa,CACX,KAAM,MACN,YAAe,EAAE,CACjB,SAAU,EAAa,CACrB,OAAO,EAAY,OAAO,CAAE,OAAM,WACzB,IAAS,IAAA,IAAa,IAAU,IAAA,GACvC,EAEL,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,UAAW,CACT,KAAM,OACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,8BAAA,EAAA,8BACA,KAAM,IAAI,EAAA,qBACX,EAGH,QAAS,CACP,qBAAsB,EAAO,CAC3B,MAAO,oBAAoB,EAAM,GAAG,EAAA,QAAM,iBAAiB,IAE9D,CACF,8IAlEO,MAAA,CAlBH,aAAY,EAAA,WAAa,EAAA,KAAK,GAAE,kCAAA,CACjC,UAAQ,iBACP,OAAA,EAAA,EAAA,gBAAK,CAAA,gBAAA,EAAoC,EAAA,+BAAgC,EAAA,SAAQ,CAAA,CAAA,4BAe7E,KAAA,KAAA,EAAA,EAAA,EAAA,YADI,EAAA,OAAA,UAAA,EAAA,KAAA,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBADH,EAAA,SAAA,MAAA,EAAA,EAAA,YAJwB,EAAA,aAAhB,EAAM,yCAId,GAAA,EAAA,EAAA,YAAA,CAHC,IAAK,EAAA,qBAAqB,EAAK,CAC/B,SAAU,EAAA,uBACH,EAAI,CAAA,KAAA,GAAA,CAAA,WAAA,CAAA"}

package/dist/lib/breadcrumbs/breadcrumbs.js

@@ -1,17 +1,19 @@
-import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { DialtoneLocalization as t } from "../../localization/index.js";
-import { BREADCRUMBS_INVERTED_MODIFIER as n } from "./breadcrumbs-constants.js";
-import r from "./breadcrumb-item.js";
-import { Fragment as i, createBlock as a, createElementBlock as o, createElementVNode as s, mergeProps as c, normalizeClass as l, openBlock as u, renderList as d, renderSlot as f, resolveComponent as p } from "vue";
-//#region components/Breadcrumbs/Breadcrumbs.vue
-var m = {
+import e from "../../common/utils/index.js";
+import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { DialtoneLocalization as n } from "../../localization/index.js";
+import { BREADCRUMBS_INVERTED_MODIFIER as r } from "./breadcrumbs-constants.js";
+import i from "./breadcrumb-item.js";
+import { Fragment as a, createBlock as o, createElementBlock as s, createElementVNode as c, mergeProps as l, normalizeClass as u, openBlock as d, renderList as f, renderSlot as p, resolveComponent as m } from "vue";
+//#region components/breadcrumbs/breadcrumbs.vue
+var h = {
+	compatConfig: { MODE: 3 },
 	name: "DtBreadcrumbs",
-	components: { DtBreadcrumbItem: r },
+	components: { DtBreadcrumbItem: i },
 	props: {
 		breadcrumbs: {
 			type: Array,
 			default: () => [],
-			validator(e) {
+			validate(e) {
 				return e.every(({ href: e, label: t }) => e !== void 0 && t !== void 0);
 			}
 		},
@@ -19,14 +21,6 @@ var m = {
 			type: Boolean,
 			default: !1
 		},
-		listClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
 		ariaLabel: {
 			type: String,
 			default: ""
@@ -34,24 +28,27 @@ var m = {
 	},
 	data() {
 		return {
-			BREADCRUMBS_INVERTED_MODIFIER: n,
-			i18n: new t()
+			BREADCRUMBS_INVERTED_MODIFIER: r,
+			i18n: new n()
 		};
-	}
-}, h = ["aria-label"];
-function g(e, t, n, r, m, g) {
-	let _ = p("dt-breadcrumb-item");
-	return u(), o("nav", {
-		"aria-label": n.ariaLabel || m.i18n.$t("DIALTONE_BREADCRUMBS_ARIA_LABEL"),
+	},
+	methods: { getBreadcrumbItemKey(t) {
+		return `breadcrumbs-item-${t}-${e.getUniqueString()}`;
+	} }
+}, g = ["aria-label"];
+function _(e, t, n, r, i, h) {
+	let _ = m("dt-breadcrumb-item");
+	return d(), s("nav", {
+		"aria-label": n.ariaLabel || i.i18n.$t("DIALTONE_BREADCRUMBS_ARIA_LABEL"),
 		"data-qa": "dt-breadcrumbs",
-		class: l(["d-breadcrumbs", { [m.BREADCRUMBS_INVERTED_MODIFIER]: n.inverted }])
-	}, [s("ol", { class: l(["d-breadcrumbs__list", n.listClass]) }, [f(e.$slots, "default", {}, () => [(u(!0), o(i, null, d(n.breadcrumbs, (e, t) => (u(), a(_, c({
-		key: `breadcrumbs-item-${t}-${e.href}`,
+		class: u(["d-breadcrumbs", { [i.BREADCRUMBS_INVERTED_MODIFIER]: n.inverted }])
+	}, [c("ol", null, [p(e.$slots, "default", {}, () => [(d(!0), s(a, null, f(n.breadcrumbs, (e, t) => (d(), o(_, l({
+		key: h.getBreadcrumbItemKey(t),
 		inverted: n.inverted
-	}, { ref_for: !0 }, e), null, 16, ["inverted"]))), 128))])], 2)], 10, h);
+	}, { ref_for: !0 }, e), null, 16, ["inverted"]))), 128))])])], 10, g);
 }
-var _ = /* @__PURE__ */ e(m, [["render", g]]);
+var v = /* @__PURE__ */ t(h, [["render", _]]);
 //#endregion
-export { _ as default };
+export { v as default };
 
 //# sourceMappingURL=breadcrumbs.js.map

package/dist/lib/breadcrumbs/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","names":[],"sources":["../../../components/Breadcrumbs/Breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel || i18n.$t('DIALTONE_BREADCRUMBS_ARIA_LABEL')\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol :class=\"['d-breadcrumbs__list', listClass]\">\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"`breadcrumbs-item-${index}-${item.href}`\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './BreadcrumbsConstants';\nimport DtBreadcrumbItem from './BreadcrumbItem.vue';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validator (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * @deprecated Use v-dt-mode instead.\n     * Passed through to link. If true, applies inverted styles to the link.\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     * Additional CSS class(es) applied to the list wrapper element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n};\n</script>\n"],"mappings":";;;;;;AAiCA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY,EACV,kBAAA,GACD;CAED,OAAO;EAIL,aAAa;GACX,MAAM;GACN,eAAe,EAAE;GACjB,UAAW,GAAa;AACtB,WAAO,EAAY,OAAO,EAAE,SAAM,eACzB,MAAS,KAAA,KAAa,MAAU,KAAA,EACvC;;GAEL;EAQD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,WAAW;GACT,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO;GACL;GACA,MAAM,IAAI,GAAsB;GACjC;;CAEJ;;;aAvFC,EAmBM,OAAA;EAlBH,cAAY,EAAA,aAAa,EAAA,KAAK,GAAE,kCAAA;EACjC,WAAQ;EACP,OAAK,EAAA,CAAA,iBAAA,GAAoC,EAAA,gCAAgC,EAAA,UAAQ,CAAA,CAAA;KAKlF,EAUK,MAAA,EAVA,OAAK,EAAA,CAAA,uBAA0B,EAAA,UAAS,CAAA,EAAA,EAAA,CAE3C,EAOO,EAAA,QAAA,WAAA,EAAA,QAAA,EAAA,EAAA,GAAA,EANL,EAKE,GAAA,MAAA,EAJwB,EAAA,cAAhB,GAAM,YADhB,EAKE,GALF,EAKE;EAHC,KAAG,oBAAsB,EAAK,GAAI,EAAK;EACvC,UAAU,EAAA;qBACH,EAAI,EAAA,MAAA,IAAA,CAAA,WAAA,CAAA"}
+{"version":3,"file":"breadcrumbs.js","names":[],"sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel || i18n.$t('DIALTONE_BREADCRUMBS_ARIA_LABEL')\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;AAkCA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY,EACV,kBAAA,GACD;CAED,OAAO;EAIL,aAAa;GACX,MAAM;GACN,eAAe,EAAE;GACjB,SAAU,GAAa;AACrB,WAAO,EAAY,OAAO,EAAE,SAAM,eACzB,MAAS,KAAA,KAAa,MAAU,KAAA,EACvC;;GAEL;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO;GACL;GACA,MAAM,IAAI,GAAsB;GACjC;;CAGH,SAAS,EACP,qBAAsB,GAAO;AAC3B,SAAO,oBAAoB,EAAM,GAAG,EAAM,iBAAiB;IAE9D;CACF;;;aArFC,EAmBM,OAAA;EAlBH,cAAY,EAAA,aAAa,EAAA,KAAK,GAAE,kCAAA;EACjC,WAAQ;EACP,OAAK,EAAA,CAAA,iBAAA,GAAoC,EAAA,gCAAgC,EAAA,UAAQ,CAAA,CAAA;KAKlF,EAUK,MAAA,MAAA,CARH,EAOO,EAAA,QAAA,WAAA,EAAA,QAAA,EAAA,EAAA,GAAA,EANL,EAKE,GAAA,MAAA,EAJwB,EAAA,cAAhB,GAAM,YADhB,EAKE,GALF,EAKE;EAHC,KAAK,EAAA,qBAAqB,EAAK;EAC/B,UAAU,EAAA;qBACH,EAAI,EAAA,MAAA,IAAA,CAAA,WAAA,CAAA"}

package/dist/lib/button/button-constants.cjs

@@ -1,4 +1,4 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=`d-btn--unstyled`,t={100:`d-btn--xs`,200:`d-btn--sm`,300:``,400:`d-btn--lg`,500:`d-btn--xl`,xs:`d-btn--xs`,sm:`d-btn--sm`,md:``,lg:`d-btn--lg`,xl:`d-btn--xl`},n={default:``,muted:`d-btn--muted`,critical:`d-btn--critical`,positive:`d-btn--positive`,inverted:`d-btn--inverted`,unstyled:`d-btn--unstyled`},r={clear:``,outlined:`d-btn--outlined`,primary:`d-btn--primary`},i=[`submit`,`reset`,`button`],a={start:`d-btn__icon--left`,end:`d-btn__icon--right`,blockStart:`d-btn__icon--top`,blockEnd:`d-btn__icon--bottom`,left:`d-btn__icon--left`,right:`d-btn__icon--right`,top:`d-btn__icon--top`,bottom:`d-btn__icon--bottom`},o=[{circle:!0,kind:`default`,importance:`primary`,message:c(!0,`default`,`primary`)},{circle:!0,kind:`critical`,importance:`outlined`,message:c(!0,`critical`,`outlined`)},{circle:!0,kind:`muted`,importance:`primary`,message:c(!0,`muted`,`primary`)},{circle:!1,kind:`muted`,importance:`primary`,message:c(!1,`muted`,`primary`)}],s={100:`200`,200:`200`,300:`300`,400:`400`,500:`500`,xs:`200`,sm:`200`,md:`300`,lg:`400`,xl:`500`};function c(e,t,n){return`You cannot have a ${e?`circle `:``}button \
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=`d-btn--unstyled`,t={xs:`d-btn--xs`,sm:`d-btn--sm`,md:``,lg:`d-btn--lg`,xl:`d-btn--xl`},n={default:``,muted:`d-btn--muted`,danger:`d-btn--danger`,positive:`d-btn--positive`,inverted:`d-btn--inverted`,unstyled:`d-btn--unstyled`},r={clear:``,outlined:`d-btn--outlined`,primary:`d-btn--primary`},i=[`submit`,`reset`,`button`],a={left:`d-btn__icon--left`,right:`d-btn__icon--right`,top:`d-btn__icon--top`,bottom:`d-btn__icon--bottom`},o=[{circle:!0,kind:`default`,importance:`primary`,message:c(!0,`default`,`primary`)},{circle:!0,kind:`danger`,importance:`outlined`,message:c(!0,`danger`,`outlined`)},{circle:!0,kind:`muted`,importance:`primary`,message:c(!0,`muted`,`primary`)},{circle:!1,kind:`muted`,importance:`primary`,message:c(!1,`muted`,`primary`)}],s={xs:`200`,sm:`200`,md:`300`,lg:`400`,xl:`500`};function c(e,t,n){return`You cannot have a ${e?`circle `:``}button \
 with kind: ${t} and importance: ${n} as it \
 does not exist in our design system. \
 See https://dialtone.dialpad.com/components/button.html for a \