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

package/dist/lib/badge/badge.js

@@ -1,7 +1,7 @@
 import { hasSlotContent as e } from "../../common/utils/index.js";
 import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { ICON_SIZE_MODIFIERS as n } from "../icon/icon-constants.js";
-import { BADGE_DECORATION_MODIFIERS as r, BADGE_KIND_MODIFIERS as i, BADGE_TYPE_MODIFIERS as a } from "./badge-constants.js";
+import { BADGE_DECORATION_MODIFIERS as n, BADGE_KIND_MODIFIERS as r, BADGE_TYPE_MODIFIERS as i } from "./badge-constants.js";
+import { ICON_SIZE_MODIFIERS as a } from "../icon/icon-constants.js";
 import { createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, normalizeClass as u, openBlock as d, renderSlot as f, toDisplayString as p } from "vue";
 //#region components/badge/badge.vue
 var m = {
@@ -11,7 +11,7 @@ var m = {
 		iconSize: {
 			type: String,
 			default: "200",
-			validator: (e) => Object.keys(n).includes(e)
+			validator: (e) => Object.keys(a).includes(e)
 		},
 		text: {
 			type: String,
@@ -20,17 +20,17 @@ var m = {
 		kind: {
 			type: String,
 			default: "label",
-			validator: (e) => Object.keys(i).includes(e)
+			validator: (e) => Object.keys(r).includes(e)
 		},
 		type: {
 			type: String,
 			default: "default",
-			validator: (e) => Object.keys(a).includes(e)
+			validator: (e) => Object.keys(i).includes(e)
 		},
 		decoration: {
 			type: String,
 			default: void 0,
-			validator: (e) => Object.keys(r).includes(e)
+			validator: (e) => Object.keys(n).includes(e)
 		},
 		labelClass: {
 			type: [
@@ -51,17 +51,17 @@ var m = {
 	},
 	data() {
 		return {
-			BADGE_TYPE_MODIFIERS: a,
-			BADGE_KIND_MODIFIERS: i,
-			BADGE_DECORATION_MODIFIERS: r
+			BADGE_TYPE_MODIFIERS: i,
+			BADGE_KIND_MODIFIERS: r,
+			BADGE_DECORATION_MODIFIERS: n
 		};
 	},
 	computed: {
 		hasLeftIcon() {
-			return e(this.$slots.leftIcon);
+			return e(this.$slots.startIcon) || e(this.$slots.leftIcon);
 		},
 		hasRightIcon() {
-			return e(this.$slots.rightIcon);
+			return e(this.$slots.endIcon) || e(this.$slots.rightIcon);
 		},
 		hasIcons() {
 			return this.hasLeftIcon || this.hasRightIcon;
@@ -78,7 +78,7 @@ var m = {
 			this.type === "ai" && this.kind === "count" && console.error("DtBadge error: type: 'ai' with kind: 'count' is an invalid combination."), this.type !== "bulletin" && this.subtle && console.error("DtBadge error: subtle can only be used with type 'bulletin'");
 		},
 		validateDecorationPropCombination() {
-			this.decoration && ((this.kind !== "label" || this.type !== "default") && console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'."), this.hasIcons && console.error("DtBadge error: decoration prop cannot be used with leftIcon or rightIcon."));
+			this.decoration && ((this.kind !== "label" || this.type !== "default") && console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'."), this.hasIcons && console.error("DtBadge error: decoration prop cannot be used with startIcon or endIcon."));
 		}
 	}
 }, h = {
@@ -104,9 +104,21 @@ function v(e, t, n, r, i, a) {
 		"data-qa": "dt-badge"
 	}, [
 		n.decoration ? (d(), s("span", h)) : o("", !0),
-		a.hasLeftIcon ? (d(), s("span", g, [f(e.$slots, "leftIcon", { iconSize: n.iconSize })])) : o("", !0),
+		a.hasLeftIcon ? (d(), s("span", g, [e.$slots.startIcon ? f(e.$slots, "startIcon", {
+			key: 0,
+			iconSize: n.iconSize
+		}) : f(e.$slots, "leftIcon", {
+			key: 1,
+			iconSize: n.iconSize
+		})])) : o("", !0),
 		c("span", { class: u(["d-badge__label", n.labelClass]) }, [f(e.$slots, "default", {}, () => [l(p(n.text), 1)])], 2),
-		a.hasRightIcon ? (d(), s("span", _, [f(e.$slots, "rightIcon", { iconSize: n.iconSize })])) : o("", !0)
+		a.hasRightIcon ? (d(), s("span", _, [e.$slots.endIcon ? f(e.$slots, "endIcon", {
+			key: 0,
+			iconSize: n.iconSize
+		}) : f(e.$slots, "rightIcon", {
+			key: 1,
+			iconSize: n.iconSize
+		})])) : o("", !0)
 	], 2);
 }
 var y = /* @__PURE__ */ t(m, [["render", v]]);

package/dist/lib/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../../../components/badge/badge.vue"],"sourcesContent":["<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"hasLeftIcon\"\n      class=\"d-badge__icon-left\"\n    >\n      <!-- @slot Slot for left icon, icon-size slot prop defaults to '200' -->\n      <slot\n        name=\"leftIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"hasRightIcon\"\n      class=\"d-badge__icon-right\"\n    >\n      <!-- @slot Slot for right icon, icon-size slot prop defaults to '200' -->\n      <slot\n        name=\"rightIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBadge',\n\n  props: {\n    /**\n     * The size of the left and right icons.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '200',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, success, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no left and right icons\n     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  computed: {\n    hasLeftIcon () {\n      return hasSlotContent(this.$slots.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.rightIcon);\n    },\n\n    hasIcons () {\n      return this.hasLeftIcon || this.hasRightIcon;\n    },\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons) {\n        console.error('DtBadge error: decoration prop cannot be used with leftIcon or rightIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;AAuDA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,OAAO;EAKL,UAAU;GACR,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAoB,CAAC,SAAS,EAAE;GAC/D;EAKD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAK;GACtE;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAK;GACtE;EASD,YAAY;GACV,MAAM;GACN,SAAS,KAAA;GACT,YAAY,MAAS,OAAO,KAAK,EAA2B,CAAC,SAAS,EAAK;GAC5E;EAKD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO;GACL;GACA;GACA;GACD;;CAGH,UAAU;EACR,cAAe;AACb,UAAO,EAAe,KAAK,OAAO,SAAS;;EAG7C,eAAgB;AACd,UAAO,EAAe,KAAK,OAAO,UAAU;;EAG9C,WAAY;AACV,UAAO,KAAK,eAAe,KAAK;;EAEnC;CAED,UAAW;AACT,OAAK,eAAe;;CAGtB,SAAS;EACP,gBAAiB;AAEf,GADA,KAAK,6BAA6B,EAClC,KAAK,mCAAmC;;EAG1C,8BAA+B;AAI7B,GAHI,KAAK,SAAS,QAAQ,KAAK,SAAS,WACtC,QAAQ,MAAM,0EAA8E,EAE1F,KAAK,SAAS,cAAc,KAAK,UACnC,QAAQ,MAAM,8DAAgE;;EAIlF,oCAAqC;AAC9B,QAAK,gBAEN,KAAK,SAAS,WAAW,KAAK,SAAS,cACzC,QAAQ,MAAM,0FAA8F,EAG1G,KAAK,YACP,QAAQ,MAAM,4EAA4E;;EAG/F;CACF;;CAhLK,OAAM;;;CAIN,OAAM;;;CAgBN,OAAM;;;aAjCV,EAyCO,QAAA;EAxCJ,OAAK,EAAA;;GAA2B,EAAA,qBAAqB,EAAA;GAAa,EAAA,qBAAqB,EAAA;GAAa,EAAA,2BAA2B,EAAA;wBAAwC,EAAA,QAAM;0BAAiC,EAAA,UAAQ;;EAQvN,WAAQ;;EAGA,EAAA,cAAA,GAAA,EADR,EAGE,QAHF,EAGE,IAAA,EAAA,IAAA,GAAA;EAEM,EAAA,eAAA,GAAA,EADR,EASO,QATP,GASO,CAJL,EAGE,EAAA,QAAA,YAAA,EADC,UAAW,EAAA,UAAQ,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;EAGxB,EAKO,QAAA,EALA,OAAK,EAAA,CAAA,kBAAqB,EAAA,WAAU,CAAA,EAAA,EAAA,CAEzC,EAEO,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,KAAI,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA;EAIH,EAAA,gBAAA,GAAA,EADR,EASO,QATP,GASO,CAJL,EAGE,EAAA,QAAA,aAAA,EADC,UAAW,EAAA,UAAQ,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"badge.js","names":[],"sources":["../../../components/badge/badge.vue"],"sourcesContent":["<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"hasLeftIcon\"\n      class=\"d-badge__icon-left\"\n    >\n      <!-- @slot Slot for start icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.startIcon\"\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use startIcon -->\n      <slot\n        v-else\n        name=\"leftIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"hasRightIcon\"\n      class=\"d-badge__icon-right\"\n    >\n      <!-- @slot Slot for end icon, icon-size slot prop defaults to '200' -->\n      <slot\n        v-if=\"$slots.endIcon\"\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n      <!-- @slot @deprecated Use endIcon -->\n      <slot\n        v-else\n        name=\"rightIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBadge',\n\n  props: {\n    /**\n     * The size of the left and right icons.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '200',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, positive, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no left and right icons\n     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  computed: {\n    hasLeftIcon () {\n      return hasSlotContent(this.$slots.startIcon) || hasSlotContent(this.$slots.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.endIcon) || hasSlotContent(this.$slots.rightIcon);\n    },\n\n    hasIcons () {\n      return this.hasLeftIcon || this.hasRightIcon;\n    },\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons) {\n        console.error('DtBadge error: decoration prop cannot be used with startIcon or endIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;AAqEA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,OAAO;EAKL,UAAU;GACR,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAoB,CAAC,SAAS,EAAE;GAC/D;EAKD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAK;GACtE;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAK;GACtE;EASD,YAAY;GACV,MAAM;GACN,SAAS,KAAA;GACT,YAAY,MAAS,OAAO,KAAK,EAA2B,CAAC,SAAS,EAAK;GAC5E;EAKD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO;GACL;GACA;GACA;GACD;;CAGH,UAAU;EACR,cAAe;AACb,UAAO,EAAe,KAAK,OAAO,UAAS,IAAK,EAAe,KAAK,OAAO,SAAS;;EAGtF,eAAgB;AACd,UAAO,EAAe,KAAK,OAAO,QAAO,IAAK,EAAe,KAAK,OAAO,UAAU;;EAGrF,WAAY;AACV,UAAO,KAAK,eAAe,KAAK;;EAEnC;CAED,UAAW;AACT,OAAK,eAAe;;CAGtB,SAAS;EACP,gBAAiB;AAEf,GADA,KAAK,6BAA6B,EAClC,KAAK,mCAAmC;;EAG1C,8BAA+B;AAI7B,GAHI,KAAK,SAAS,QAAQ,KAAK,SAAS,WACtC,QAAQ,MAAM,0EAA8E,EAE1F,KAAK,SAAS,cAAc,KAAK,UACnC,QAAQ,MAAM,8DAAgE;;EAIlF,oCAAqC;AAC9B,QAAK,gBAEN,KAAK,SAAS,WAAW,KAAK,SAAS,cACzC,QAAQ,MAAM,0FAA8F,EAG1G,KAAK,YACP,QAAQ,MAAM,2EAA2E;;EAG9F;CACF;;CA9LK,OAAM;;;CAIN,OAAM;;;CAuBN,OAAM;;;aAxCV,EAuDO,QAAA;EAtDJ,OAAK,EAAA;;GAA2B,EAAA,qBAAqB,EAAA;GAAa,EAAA,qBAAqB,EAAA;GAAa,EAAA,2BAA2B,EAAA;wBAAwC,EAAA,QAAM;0BAAiC,EAAA,UAAQ;;EAQvN,WAAQ;;EAGA,EAAA,cAAA,GAAA,EADR,EAGE,QAHF,EAGE,IAAA,EAAA,IAAA,GAAA;EAEM,EAAA,eAAA,GAAA,EADR,EAgBO,QAhBP,GAgBO,CAVG,EAAA,OAAO,YADf,EAIE,EAAA,QAAA,aAAA;;GADC,UAAW,EAAA;OAGd,EAIE,EAAA,QAAA,YAAA;;GADC,UAAW,EAAA;;EAGhB,EAKO,QAAA,EALA,OAAK,EAAA,CAAA,kBAAqB,EAAA,WAAU,CAAA,EAAA,EAAA,CAEzC,EAEO,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,KAAI,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA;EAIH,EAAA,gBAAA,GAAA,EADR,EAgBO,QAhBP,GAgBO,CAVG,EAAA,OAAO,UADf,EAIE,EAAA,QAAA,WAAA;;GADC,UAAW,EAAA;OAGd,EAIE,EAAA,QAAA,aAAA;;GADC,UAAW,EAAA"}

package/dist/lib/banner/banner.cjs

@@ -1,3 +1,3 @@
-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(`../../common/mixins/modal.cjs`),r=require(`../notice/notice-constants.cjs`),i=require(`../notice/notice-icon.cjs`),a=require(`../notice/notice-content.cjs`),o=require(`../notice/notice-action.cjs`);let s=require(`vue`);var c={compatConfig:{MODE:3},name:`DtBanner`,components:{DtNoticeIcon:i.default,DtNoticeContent:a.default,DtNoticeAction:o.default},mixins:[n.default],props:{titleId:{type:String,default(){return e.default.getUniqueString()}},contentId:{type:String,default(){return e.default.getUniqueString()}},title:{type:String,default:``},important:{type:Boolean,default:!1},pinned:{type:Boolean,default:!1},kind:{type:String,default:`base`,validate(e){return r.NOTICE_KINDS.includes(e)}},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1},dialogClass:{type:String,default:``},backgroundImage:{type:String,default:``},backgroundSize:{type:String,default:`cover`}},emits:[`close`],computed:{role(){return this.important?`alertdialog`:`status`},bannerClass(){return[`d-banner`,{error:`d-banner--error`,info:`d-banner--info`,success:`d-banner--success`,warning:`d-banner--warning`,base:`d-banner--base`}[this.kind],{"d-banner--important":this.important,"d-banner--pinned":this.pinned}]},bannerBackgroundImage(){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)}}},l=[`role`,`aria-labelledby`,`aria-describedby`];function u(e,t,n,r,i,a){let o=(0,s.resolveComponent)(`dt-notice-icon`),c=(0,s.resolveComponent)(`dt-notice-content`),u=(0,s.resolveComponent)(`dt-notice-action`);return(0,s.openBlock)(),(0,s.createElementBlock)(`aside`,{class:(0,s.normalizeClass)(a.bannerClass),style:(0,s.normalizeStyle)(a.bannerBackgroundImage),onKeydown:t[1]||(t[1]=(0,s.withKeys)((...e)=>a.trapFocus&&a.trapFocus(...e),[`tab`]))},[(0,s.createElementVNode)(`div`,{class:(0,s.normalizeClass)([`d-banner__dialog`,n.dialogClass]),role:a.role,"aria-labelledby":n.titleId,"aria-describedby":n.contentId},[n.hideIcon?(0,s.createCommentVNode)(``,!0):((0,s.openBlock)(),(0,s.createBlock)(o,{key:0,kind:n.kind},{default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`icon`)]),_:3},8,[`kind`])),(0,s.createVNode)(c,{"title-id":n.titleId,"content-id":n.contentId,title:n.title},{titleOverride:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`titleOverride`)]),default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`default`)]),_:3},8,[`title-id`,`content-id`,`title`]),(0,s.createVNode)(u,{"hide-action":n.hideAction,"hide-close":n.hideClose,onClose:t[0]||(t[0]=t=>e.$emit(`close`))},{default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`action`)]),_:3},8,[`hide-action`,`hide-close`])],10,l)],38)}var d=t.t(c,[[`render`,u]]);exports.default=d;
+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(`../../common/mixins/modal.cjs`),r=require(`../notice/notice-constants.cjs`),i=require(`../notice/notice-icon.cjs`),a=require(`../notice/notice-content.cjs`),o=require(`../notice/notice-action.cjs`);let s=require(`vue`);var c={compatConfig:{MODE:3},name:`DtBanner`,components:{DtNoticeIcon:i.default,DtNoticeContent:a.default,DtNoticeAction:o.default},mixins:[n.default],props:{titleId:{type:String,default(){return e.default.getUniqueString()}},contentId:{type:String,default(){return e.default.getUniqueString()}},title:{type:String,default:``},important:{type:Boolean,default:!1},pinned:{type:Boolean,default:!1},kind:{type:String,default:`base`,validator(e){return r.NOTICE_KINDS.includes(e)}},showClose:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!0},showAction:{type:Boolean,default:!0},dialogClass:{type:String,default:``},backgroundImage:{type:String,default:``},backgroundSize:{type:String,default:`cover`}},emits:[`close`],computed:{role(){return this.important?`alertdialog`:`status`},bannerClass(){return[`d-banner`,{critical:`d-banner--critical`,info:`d-banner--info`,positive:`d-banner--positive`,warning:`d-banner--warning`,base:`d-banner--base`}[this.kind],{"d-banner--important":this.important,"d-banner--pinned":this.pinned}]},bannerBackgroundImage(){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)}}},l=[`role`,`aria-labelledby`,`aria-describedby`];function u(e,t,n,r,i,a){let o=(0,s.resolveComponent)(`dt-notice-icon`),c=(0,s.resolveComponent)(`dt-notice-content`),u=(0,s.resolveComponent)(`dt-notice-action`);return(0,s.openBlock)(),(0,s.createElementBlock)(`aside`,{class:(0,s.normalizeClass)(a.bannerClass),style:(0,s.normalizeStyle)(a.bannerBackgroundImage),onKeydown:t[1]||(t[1]=(0,s.withKeys)((...e)=>a.trapFocus&&a.trapFocus(...e),[`tab`]))},[(0,s.createElementVNode)(`div`,{class:(0,s.normalizeClass)([`d-banner__dialog`,n.dialogClass]),role:a.role,"aria-labelledby":n.titleId,"aria-describedby":n.contentId},[n.showIcon?((0,s.openBlock)(),(0,s.createBlock)(o,{key:0,kind:n.kind,class:(0,s.normalizeClass)({"d-notice__icon--has-title":n.title||e.$slots.title})},{default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`icon`)]),_:3},8,[`kind`,`class`])):(0,s.createCommentVNode)(``,!0),(0,s.createVNode)(c,{"title-id":n.titleId,"content-id":n.contentId,title:n.title},{title:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`title`)]),default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`default`)]),_:3},8,[`title-id`,`content-id`,`title`]),(0,s.createVNode)(u,{"show-action":n.showAction,"show-close":n.showClose,onClose:t[0]||(t[0]=t=>e.$emit(`close`))},{default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`action`)]),_:3},8,[`show-action`,`show-close`])],10,l)],38)}var d=t.t(c,[[`render`,u]]);exports.default=d;
 //# sourceMappingURL=banner.cjs.map

package/dist/lib/banner/banner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"banner.cjs","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":"mdAwDA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,WAEN,WAAY,CACV,aAAA,EAAA,QACA,gBAAA,EAAA,QACA,eAAA,EAAA,QACD,CAED,OAAQ,CAAC,EAAA,QAAM,CAEf,MAAO,CAKL,QAAS,CACP,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,QAAM,iBAAiB,EAC5C,CAMD,UAAW,CACT,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,QAAM,iBAAiB,EAC5C,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAQD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,OACT,SAAU,EAAM,CACd,OAAO,EAAA,aAAa,SAAS,EAAK,EAErC,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,QACN,QAAS,GACV,CAKD,YAAa,CACX,KAAM,OACN,QAAS,GACV,CAKD,gBAAiB,CACf,KAAM,OACN,QAAS,GACV,CAQD,eAAgB,CACd,KAAM,OACN,QAAS,QACV,CACF,CAED,MAAO,CAML,QACD,CAED,SAAU,CACR,MAAQ,CACN,OAAO,KAAK,UAAY,cAAgB,UAG1C,aAAe,CASb,MAAO,CACL,WATkB,CAClB,MAAO,kBACP,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACP,CAIa,KAAK,MACjB,CACE,sBAAuB,KAAK,UAC5B,mBAAoB,KAAK,OAC1B,CACF,EAGH,uBAAyB,CAGvB,OAFI,KAAK,kBAAoB,GAAW,KAEjC,yBAAyB,KAAK,gBAAgB;iCAC1B,KAAK,eAAe,IAElD,CAED,SAAW,CACL,KAAK,WACP,KAAK,mBAAmB,EAI5B,QAAS,CACP,UAAW,EAAG,CACR,KAAK,WACP,KAAK,qBAAqB,EAAE,EAGjC,CACF,oQAjMS,QAAA,CAxCL,OAAA,EAAA,EAAA,gBAAO,EAAA,YAAW,CAClB,OAAA,EAAA,EAAA,gBAAO,EAAA,sBAAqB,CAC5B,UAAO,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,GAAA,IAAM,EAAA,WAAA,EAAA,UAAA,GAAA,EAAS,CAAA,CAAA,MAAA,CAAA,6BAqCjB,MAAA,CAlCJ,OAAA,EAAA,EAAA,gBAAK,CAAC,mBACE,EAAA,YAAW,CAAA,CAClB,KAAM,EAAA,KACN,kBAAiB,EAAA,QACjB,mBAAkB,EAAA,YAGV,EAAA,2CAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAKQ,EAAA,OAJd,KAAM,EAAA,iCAGa,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,OAAA,CAAA,CAAA,qCAcF,EAAA,CAXjB,WAAU,EAAA,QACV,aAAY,EAAA,UACZ,MAAO,EAAA,QAEG,eAAA,EAAA,EAAA,aAGoB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,gBAAA,CAAA,CAAA,2BAGvB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA,6DASS,EAAA,CANhB,cAAa,EAAA,WACb,aAAY,EAAA,UACZ,QAAK,EAAA,KAAA,EAAA,GAAA,GAAE,EAAA,MAAK,QAAA,8BAGS,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"banner.cjs","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=\"showIcon\"\n        :kind=\"kind\"\n        :class=\"{ 'd-notice__icon--has-title': title || $slots.title }\"\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 #title>\n          <!-- @slot Slot for the title -->\n          <slot name=\"title\" />\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        @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, 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  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        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  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":"mdAwDA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,WAEN,WAAY,CACV,aAAA,EAAA,QACA,gBAAA,EAAA,QACA,eAAA,EAAA,QACD,CAED,OAAQ,CAAC,EAAA,QAAM,CAEf,MAAO,CAKL,QAAS,CACP,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,QAAM,iBAAiB,EAC5C,CAMD,UAAW,CACT,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,QAAM,iBAAiB,EAC5C,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAQD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,OACT,UAAW,EAAM,CACf,OAAO,EAAA,aAAa,SAAS,EAAK,EAErC,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,QACN,QAAS,GACV,CAKD,YAAa,CACX,KAAM,OACN,QAAS,GACV,CAKD,gBAAiB,CACf,KAAM,OACN,QAAS,GACV,CAQD,eAAgB,CACd,KAAM,OACN,QAAS,QACV,CACF,CAED,MAAO,CAML,QACD,CAED,SAAU,CACR,MAAQ,CACN,OAAO,KAAK,UAAY,cAAgB,UAG1C,aAAe,CASb,MAAO,CACL,WATkB,CAClB,SAAU,qBACV,KAAM,iBACN,SAAU,qBACV,QAAS,oBACT,KAAM,iBACP,CAIa,KAAK,MACjB,CACE,sBAAuB,KAAK,UAC5B,mBAAoB,KAAK,OAC1B,CACF,EAGH,uBAAyB,CAGvB,OAFI,KAAK,kBAAoB,GAAW,KAEjC,yBAAyB,KAAK,gBAAgB;iCAC1B,KAAK,eAAe,IAElD,CAED,SAAW,CACL,KAAK,WACP,KAAK,mBAAmB,EAI5B,QAAS,CACP,UAAW,EAAG,CACR,KAAK,WACP,KAAK,qBAAqB,EAAE,EAGjC,CACF,oQAjMS,QAAA,CAxCL,OAAA,EAAA,EAAA,gBAAO,EAAA,YAAW,CAClB,OAAA,EAAA,EAAA,gBAAO,EAAA,sBAAqB,CAC5B,UAAO,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,GAAA,IAAM,EAAA,WAAA,EAAA,UAAA,GAAA,EAAS,CAAA,CAAA,MAAA,CAAA,6BAqCjB,MAAA,CAlCJ,OAAA,EAAA,EAAA,gBAAK,CAAC,mBACE,EAAA,YAAW,CAAA,CAClB,KAAM,EAAA,KACN,kBAAiB,EAAA,QACjB,mBAAkB,EAAA,YAGX,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAMS,EAAA,OALd,KAAM,EAAA,KACN,OAAA,EAAA,EAAA,gBAAK,CAAA,4BAAiC,EAAA,OAAS,EAAA,OAAO,MAAK,CAAA,6BAGxC,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,OAAA,CAAA,CAAA,6EAaF,EAAA,CAVjB,WAAU,EAAA,QACV,aAAY,EAAA,UACZ,MAAO,EAAA,QAEG,OAAA,EAAA,EAAA,aAEY,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,QAAA,CAAA,CAAA,2BAGf,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA,6DASS,EAAA,CANhB,cAAa,EAAA,WACb,aAAY,EAAA,UACZ,QAAK,EAAA,KAAA,EAAA,GAAA,GAAE,EAAA,MAAK,QAAA,8BAGS,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,SAAA,CAAA,CAAA"}

package/dist/lib/banner/banner.js

@@ -44,21 +44,21 @@ var y = {
 		kind: {
 			type: String,
 			default: "base",
-			validate(e) {
+			validator(e) {
 				return r.includes(e);
 			}
 		},
-		hideClose: {
+		showClose: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
-		hideIcon: {
+		showIcon: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
-		hideAction: {
+		showAction: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
 		dialogClass: {
 			type: String,
@@ -82,9 +82,9 @@ var y = {
 			return [
 				"d-banner",
 				{
-					error: "d-banner--error",
+					critical: "d-banner--critical",
 					info: "d-banner--info",
-					success: "d-banner--success",
+					positive: "d-banner--positive",
 					warning: "d-banner--warning",
 					base: "d-banner--base"
 				}[this.kind],
@@ -122,19 +122,20 @@ function x(e, t, n, r, i, a) {
 		"aria-labelledby": n.titleId,
 		"aria-describedby": n.contentId
 	}, [
-		n.hideIcon ? c("", !0) : (m(), s(o, {
+		n.showIcon ? (m(), s(o, {
 			key: 0,
-			kind: n.kind
+			kind: n.kind,
+			class: f({ "d-notice__icon--has-title": n.title || e.$slots.title })
 		}, {
 			default: _(() => [h(e.$slots, "icon")]),
 			_: 3
-		}, 8, ["kind"])),
+		}, 8, ["kind", "class"])) : c("", !0),
 		d(y, {
 			"title-id": n.titleId,
 			"content-id": n.contentId,
 			title: n.title
 		}, {
-			titleOverride: _(() => [h(e.$slots, "titleOverride")]),
+			title: _(() => [h(e.$slots, "title")]),
 			default: _(() => [h(e.$slots, "default")]),
 			_: 3
 		}, 8, [
@@ -143,13 +144,13 @@ function x(e, t, n, r, i, a) {
 			"title"
 		]),
 		d(x, {
-			"hide-action": n.hideAction,
-			"hide-close": n.hideClose,
+			"show-action": n.showAction,
+			"show-close": n.showClose,
 			onClose: t[0] || (t[0] = (t) => e.$emit("close"))
 		}, {
 			default: _(() => [h(e.$slots, "action")]),
 			_: 3
-		}, 8, ["hide-action", "hide-close"])
+		}, 8, ["show-action", "show-close"])
 	], 10, b)], 38);
 }
 var S = /* @__PURE__ */ t(y, [["render", x]]);

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

@@ -1 +1 @@
-{"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"}
+{"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=\"showIcon\"\n        :kind=\"kind\"\n        :class=\"{ 'd-notice__icon--has-title': title || $slots.title }\"\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 #title>\n          <!-- @slot Slot for the title -->\n          <slot name=\"title\" />\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        @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, 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  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        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  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,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;EACF;CAED,OAAO,CAML,QACD;CAED,UAAU;EACR,OAAQ;AACN,UAAO,KAAK,YAAY,gBAAgB;;EAG1C,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;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;;EAGX,EAAA,YAAA,GAAA,EADR,EAOiB,GAAA;;GALd,MAAM,EAAA;GACN,OAAK,EAAA,EAAA,6BAAiC,EAAA,SAAS,EAAA,OAAO,OAAK,CAAA;;oBAGxC,CAApB,EAAoB,EAAA,QAAA,OAAA,CAAA,CAAA;;;EAEtB,EAWoB,GAAA;GAVjB,YAAU,EAAA;GACV,cAAY,EAAA;GACZ,OAAO,EAAA;;GAEG,OAAK,QAEO,CAArB,EAAqB,EAAA,QAAA,QAAA,CAAA,CAAA;oBAGf,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/box/box-constants.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[`div`,`span`,`section`,`article`,`aside`,`main`,`header`,`footer`,`nav`,`ul`,`ol`,`li`,`fieldset`,`form`,`figure`],t=[`0`,`1`,`25`,`50`,`75`,`100`,`125`,`150`,`175`,`200`,`250`,`300`,`350`,`400`,`450`,`500`,`525`,`550`,`600`,`650`,`700`,`750`,`800`],n=`primary.secondary.moderate.bold.strong.contrast.backdrop.brand.info.positive.warning.critical.brand-subtle.brand-strong.info-subtle.info-strong.positive-subtle.positive-strong.warning-subtle.warning-strong.critical-subtle.critical-strong.primary-opaque.secondary-opaque.moderate-opaque.bold-opaque.strong-opaque.contrast-opaque.brand-opaque.brand-subtle-opaque.info-opaque.info-subtle-opaque.positive-opaque.positive-subtle-opaque.warning-opaque.warning-subtle-opaque.critical-opaque.critical-subtle-opaque`.split(`.`),r=[`transparent`,`subtle`,`default`,`moderate`,`bold`,`accent`,`focus`,`brand`,`positive`,`warning`,`critical`,`brand-subtle`,`brand-strong`,`positive-subtle`,`positive-strong`,`warning-subtle`,`warning-strong`,`critical-subtle`,`critical-strong`],i=[`0`,`50`,`100`,`150`,`200`,`300`,`400`],a=[`0`,`100`,`200`,`300`,`350`,`400`,`450`,`500`,`600`,`pill`,`circle`],o=[`small`,`medium`,`large`,`extra-large`,`card`],s=`0.25.50.75.100.200.300.400.500.600.700.800.900.1000.1100.1200.1300.1400.1500.1600.10-percent.20-percent.25-percent.30-percent.33-percent.40-percent.50-percent.60-percent.66-percent.70-percent.75-percent.80-percent.90-percent.95-percent.100-percent`.split(`.`),c=[`hidden`,`scroll`,`auto`,`clip`,`visible`],l=[`leave`,`scroll`,`move`,`never`];exports.DT_BOX_AS_VALUES=e,exports.DT_BOX_BORDER_COLOR_VALUES=r,exports.DT_BOX_BORDER_RADIUS_VALUES=a,exports.DT_BOX_BORDER_WIDTH_VALUES=i,exports.DT_BOX_LAYOUT_VALUES=s,exports.DT_BOX_OVERFLOW_VALUES=c,exports.DT_BOX_SCROLLBAR_VALUES=l,exports.DT_BOX_SHADOW_VALUES=o,exports.DT_BOX_SPACING_VALUES=t,exports.DT_BOX_SURFACE_VALUES=n;
+//# sourceMappingURL=box-constants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box-constants.cjs","names":[],"sources":["../../../components/box/box_constants.js"],"sourcesContent":["/**\n * Valid `as` elements for the box component.\n * @type {string[]}\n */\nexport const DT_BOX_AS_VALUES = ['div', 'span', 'section', 'article', 'aside', 'main', 'header', 'footer', 'nav', 'ul', 'ol', 'li', 'fieldset', 'form', 'figure'];\n\n/**\n * Spacing token scale (shared across all padding props).\n * @type {string[]}\n */\nexport const DT_BOX_SPACING_VALUES = ['0', '1', '25', '50', '75', '100', '125', '150', '175', '200', '250', '300', '350', '400', '450', '500', '525', '550', '600', '650', '700', '750', '800'];\n\n/**\n * Surface color values (neutral + semantic + subtle/strong + opaque).\n * @type {string[]}\n */\nexport const DT_BOX_SURFACE_VALUES = [\n  'primary', 'secondary', 'moderate', 'bold', 'strong', 'contrast', 'backdrop',\n  'brand', 'info', 'positive', 'warning', 'critical',\n  'brand-subtle', 'brand-strong', 'info-subtle', 'info-strong',\n  'positive-subtle', 'positive-strong', 'warning-subtle', 'warning-strong',\n  'critical-subtle', 'critical-strong',\n  'primary-opaque', 'secondary-opaque', 'moderate-opaque', 'bold-opaque',\n  'strong-opaque', 'contrast-opaque',\n  'brand-opaque', 'brand-subtle-opaque', 'info-opaque', 'info-subtle-opaque',\n  'positive-opaque', 'positive-subtle-opaque', 'warning-opaque', 'warning-subtle-opaque',\n  'critical-opaque', 'critical-subtle-opaque',\n];\n\n/**\n * Border color values (neutral + semantic + variants).\n * @type {string[]}\n */\nexport const DT_BOX_BORDER_COLOR_VALUES = [\n  'transparent', 'subtle', 'default', 'moderate', 'bold', 'accent', 'focus',\n  'brand', 'positive', 'warning', 'critical',\n  'brand-subtle', 'brand-strong', 'positive-subtle', 'positive-strong',\n  'warning-subtle', 'warning-strong', 'critical-subtle', 'critical-strong',\n];\n\n/**\n * Border width values (maps to --dt-size-border-* tokens).\n * @type {string[]}\n */\nexport const DT_BOX_BORDER_WIDTH_VALUES = ['0', '50', '100', '150', '200', '300', '400'];\n\n/**\n * Border radius values (maps to --dt-size-radius-* tokens).\n * @type {string[]}\n */\nexport const DT_BOX_BORDER_RADIUS_VALUES = ['0', '100', '200', '300', '350', '400', '450', '500', '600', 'pill', 'circle'];\n\n/**\n * Shadow values (maps to --dt-shadow-* tokens).\n * @type {string[]}\n */\nexport const DT_BOX_SHADOW_VALUES = ['small', 'medium', 'large', 'extra-large', 'card'];\n\n/**\n * Layout token scale (for sizing props: inlineSize, blockSize, min/max variants).\n * @type {string[]}\n */\nexport const DT_BOX_LAYOUT_VALUES = [\n  '0', '25', '50', '75', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000', '1100', '1200', '1300', '1400', '1500', '1600',\n  '10-percent', '20-percent', '25-percent', '30-percent', '33-percent', '40-percent', '50-percent',\n  '60-percent', '66-percent', '70-percent', '75-percent', '80-percent', '90-percent', '95-percent', '100-percent',\n];\n\n/**\n * Overflow values.\n * @type {string[]}\n */\nexport const DT_BOX_OVERFLOW_VALUES = ['hidden', 'scroll', 'auto', 'clip', 'visible'];\n\n/**\n * Scrollbar autoHide mode values (maps to OverlayScrollbars autoHide option).\n * @type {string[]}\n */\nexport const DT_BOX_SCROLLBAR_VALUES = ['leave', 'scroll', 'move', 'never'];\n"],"mappings":"mEAIA,IAAa,EAAmB,CAAC,MAAO,OAAQ,UAAW,UAAW,QAAS,OAAQ,SAAU,SAAU,MAAO,KAAM,KAAM,KAAM,WAAY,OAAQ,SAAS,CAMpJ,EAAwB,CAAC,IAAK,IAAK,KAAM,KAAM,KAAM,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAM,CAMlL,EAAwB,ugBAWpC,CAMY,EAA6B,CACxC,cAAe,SAAU,UAAW,WAAY,OAAQ,SAAU,QAClE,QAAS,WAAY,UAAW,WAChC,eAAgB,eAAgB,kBAAmB,kBACnD,iBAAkB,iBAAkB,kBAAmB,kBACxD,CAMY,EAA6B,CAAC,IAAK,KAAM,MAAO,MAAO,MAAO,MAAO,MAAM,CAM3E,EAA8B,CAAC,IAAK,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,OAAQ,SAAS,CAM7G,EAAuB,CAAC,QAAS,SAAU,QAAS,cAAe,OAAO,CAM1E,EAAuB,oQAInC,CAMY,EAAyB,CAAC,SAAU,SAAU,OAAQ,OAAQ,UAAU,CAMxE,EAA0B,CAAC,QAAS,SAAU,OAAQ,QAAQ"}

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

@@ -0,0 +1,103 @@
+//#region components/box/box_constants.js
+var e = [
+	"div",
+	"span",
+	"section",
+	"article",
+	"aside",
+	"main",
+	"header",
+	"footer",
+	"nav",
+	"ul",
+	"ol",
+	"li",
+	"fieldset",
+	"form",
+	"figure"
+], t = [
+	"0",
+	"1",
+	"25",
+	"50",
+	"75",
+	"100",
+	"125",
+	"150",
+	"175",
+	"200",
+	"250",
+	"300",
+	"350",
+	"400",
+	"450",
+	"500",
+	"525",
+	"550",
+	"600",
+	"650",
+	"700",
+	"750",
+	"800"
+], n = /* @__PURE__ */ "primary.secondary.moderate.bold.strong.contrast.backdrop.brand.info.positive.warning.critical.brand-subtle.brand-strong.info-subtle.info-strong.positive-subtle.positive-strong.warning-subtle.warning-strong.critical-subtle.critical-strong.primary-opaque.secondary-opaque.moderate-opaque.bold-opaque.strong-opaque.contrast-opaque.brand-opaque.brand-subtle-opaque.info-opaque.info-subtle-opaque.positive-opaque.positive-subtle-opaque.warning-opaque.warning-subtle-opaque.critical-opaque.critical-subtle-opaque".split("."), r = [
+	"transparent",
+	"subtle",
+	"default",
+	"moderate",
+	"bold",
+	"accent",
+	"focus",
+	"brand",
+	"positive",
+	"warning",
+	"critical",
+	"brand-subtle",
+	"brand-strong",
+	"positive-subtle",
+	"positive-strong",
+	"warning-subtle",
+	"warning-strong",
+	"critical-subtle",
+	"critical-strong"
+], i = [
+	"0",
+	"50",
+	"100",
+	"150",
+	"200",
+	"300",
+	"400"
+], a = [
+	"0",
+	"100",
+	"200",
+	"300",
+	"350",
+	"400",
+	"450",
+	"500",
+	"600",
+	"pill",
+	"circle"
+], o = [
+	"small",
+	"medium",
+	"large",
+	"extra-large",
+	"card"
+], s = /* @__PURE__ */ "0.25.50.75.100.200.300.400.500.600.700.800.900.1000.1100.1200.1300.1400.1500.1600.10-percent.20-percent.25-percent.30-percent.33-percent.40-percent.50-percent.60-percent.66-percent.70-percent.75-percent.80-percent.90-percent.95-percent.100-percent".split("."), c = [
+	"hidden",
+	"scroll",
+	"auto",
+	"clip",
+	"visible"
+], l = [
+	"leave",
+	"scroll",
+	"move",
+	"never"
+];
+//#endregion
+export { e as DT_BOX_AS_VALUES, r as DT_BOX_BORDER_COLOR_VALUES, a as DT_BOX_BORDER_RADIUS_VALUES, i as DT_BOX_BORDER_WIDTH_VALUES, s as DT_BOX_LAYOUT_VALUES, c as DT_BOX_OVERFLOW_VALUES, l as DT_BOX_SCROLLBAR_VALUES, o as DT_BOX_SHADOW_VALUES, t as DT_BOX_SPACING_VALUES, n as DT_BOX_SURFACE_VALUES };
+
+//# sourceMappingURL=box-constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box-constants.js","names":[],"sources":["../../../components/box/box_constants.js"],"sourcesContent":["/**\n * Valid `as` elements for the box component.\n * @type {string[]}\n */\nexport const DT_BOX_AS_VALUES = ['div', 'span', 'section', 'article', 'aside', 'main', 'header', 'footer', 'nav', 'ul', 'ol', 'li', 'fieldset', 'form', 'figure'];\n\n/**\n * Spacing token scale (shared across all padding props).\n * @type {string[]}\n */\nexport const DT_BOX_SPACING_VALUES = ['0', '1', '25', '50', '75', '100', '125', '150', '175', '200', '250', '300', '350', '400', '450', '500', '525', '550', '600', '650', '700', '750', '800'];\n\n/**\n * Surface color values (neutral + semantic + subtle/strong + opaque).\n * @type {string[]}\n */\nexport const DT_BOX_SURFACE_VALUES = [\n  'primary', 'secondary', 'moderate', 'bold', 'strong', 'contrast', 'backdrop',\n  'brand', 'info', 'positive', 'warning', 'critical',\n  'brand-subtle', 'brand-strong', 'info-subtle', 'info-strong',\n  'positive-subtle', 'positive-strong', 'warning-subtle', 'warning-strong',\n  'critical-subtle', 'critical-strong',\n  'primary-opaque', 'secondary-opaque', 'moderate-opaque', 'bold-opaque',\n  'strong-opaque', 'contrast-opaque',\n  'brand-opaque', 'brand-subtle-opaque', 'info-opaque', 'info-subtle-opaque',\n  'positive-opaque', 'positive-subtle-opaque', 'warning-opaque', 'warning-subtle-opaque',\n  'critical-opaque', 'critical-subtle-opaque',\n];\n\n/**\n * Border color values (neutral + semantic + variants).\n * @type {string[]}\n */\nexport const DT_BOX_BORDER_COLOR_VALUES = [\n  'transparent', 'subtle', 'default', 'moderate', 'bold', 'accent', 'focus',\n  'brand', 'positive', 'warning', 'critical',\n  'brand-subtle', 'brand-strong', 'positive-subtle', 'positive-strong',\n  'warning-subtle', 'warning-strong', 'critical-subtle', 'critical-strong',\n];\n\n/**\n * Border width values (maps to --dt-size-border-* tokens).\n * @type {string[]}\n */\nexport const DT_BOX_BORDER_WIDTH_VALUES = ['0', '50', '100', '150', '200', '300', '400'];\n\n/**\n * Border radius values (maps to --dt-size-radius-* tokens).\n * @type {string[]}\n */\nexport const DT_BOX_BORDER_RADIUS_VALUES = ['0', '100', '200', '300', '350', '400', '450', '500', '600', 'pill', 'circle'];\n\n/**\n * Shadow values (maps to --dt-shadow-* tokens).\n * @type {string[]}\n */\nexport const DT_BOX_SHADOW_VALUES = ['small', 'medium', 'large', 'extra-large', 'card'];\n\n/**\n * Layout token scale (for sizing props: inlineSize, blockSize, min/max variants).\n * @type {string[]}\n */\nexport const DT_BOX_LAYOUT_VALUES = [\n  '0', '25', '50', '75', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000', '1100', '1200', '1300', '1400', '1500', '1600',\n  '10-percent', '20-percent', '25-percent', '30-percent', '33-percent', '40-percent', '50-percent',\n  '60-percent', '66-percent', '70-percent', '75-percent', '80-percent', '90-percent', '95-percent', '100-percent',\n];\n\n/**\n * Overflow values.\n * @type {string[]}\n */\nexport const DT_BOX_OVERFLOW_VALUES = ['hidden', 'scroll', 'auto', 'clip', 'visible'];\n\n/**\n * Scrollbar autoHide mode values (maps to OverlayScrollbars autoHide option).\n * @type {string[]}\n */\nexport const DT_BOX_SCROLLBAR_VALUES = ['leave', 'scroll', 'move', 'never'];\n"],"mappings":";AAIA,IAAa,IAAmB;CAAC;CAAO;CAAQ;CAAW;CAAW;CAAS;CAAQ;CAAU;CAAU;CAAO;CAAM;CAAM;CAAM;CAAY;CAAQ;CAAS,EAMpJ,IAAwB;CAAC;CAAK;CAAK;CAAM;CAAM;CAAM;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAM,EAMlL,IAAwB,uhBAWpC,EAMY,IAA6B;CACxC;CAAe;CAAU;CAAW;CAAY;CAAQ;CAAU;CAClE;CAAS;CAAY;CAAW;CAChC;CAAgB;CAAgB;CAAmB;CACnD;CAAkB;CAAkB;CAAmB;CACxD,EAMY,IAA6B;CAAC;CAAK;CAAM;CAAO;CAAO;CAAO;CAAO;CAAM,EAM3E,IAA8B;CAAC;CAAK;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAQ;CAAS,EAM7G,IAAuB;CAAC;CAAS;CAAU;CAAS;CAAe;CAAO,EAM1E,IAAuB,oRAInC,EAMY,IAAyB;CAAC;CAAU;CAAU;CAAQ;CAAQ;CAAU,EAMxE,IAA0B;CAAC;CAAS;CAAU;CAAQ;CAAQ"}

package/dist/lib/box/box.cjs

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`./validators.cjs`);let t=require(`vue`);var n={"data-qa":`dt-box-scrollbar-content`,class:`d-box__scrollbar-content`},r=Object.assign({name:`DtBox`},{__name:`box`,props:{as:{type:String,default:`div`,validator:e.asValidator},scrollbar:{type:[String,Boolean],default:void 0,validator:e.scrollbarValidator},surface:{type:String,default:void 0,validator:e.surfaceValidator},borderColor:{type:String,default:`default`,validator:e.borderColorValidator},borderRadius:{type:String,default:void 0,validator:e.borderRadiusValidator},borderWidth:{type:String,default:void 0,validator:e.borderWidthValidator},borderWidthBlock:{type:String,default:void 0,validator:e.borderWidthValidator},borderWidthBlockEnd:{type:String,default:void 0,validator:e.borderWidthValidator},borderWidthBlockStart:{type:String,default:void 0,validator:e.borderWidthValidator},borderWidthInline:{type:String,default:void 0,validator:e.borderWidthValidator},borderWidthInlineEnd:{type:String,default:void 0,validator:e.borderWidthValidator},borderWidthInlineStart:{type:String,default:void 0,validator:e.borderWidthValidator},padding:{type:String,default:void 0,validator:e.spacingValidator},paddingBlock:{type:String,default:void 0,validator:e.spacingValidator},paddingBlockEnd:{type:String,default:void 0,validator:e.spacingValidator},paddingBlockStart:{type:String,default:void 0,validator:e.spacingValidator},paddingInline:{type:String,default:void 0,validator:e.spacingValidator},paddingInlineEnd:{type:String,default:void 0,validator:e.spacingValidator},paddingInlineStart:{type:String,default:void 0,validator:e.spacingValidator},blockSize:{type:String,default:void 0,validator:e.layoutValidator},inlineSize:{type:String,default:void 0,validator:e.layoutValidator},maxBlockSize:{type:String,default:void 0,validator:e.layoutValidator},minBlockSize:{type:String,default:void 0,validator:e.layoutValidator},maxInlineSize:{type:String,default:void 0,validator:e.layoutValidator},minInlineSize:{type:String,default:void 0,validator:e.layoutValidator},shadow:{type:String,default:void 0,validator:e.shadowValidator},overflow:{type:String,default:void 0,validator:e.overflowValidator}},setup(e){let r=e,i=[`ul`,`ol`,`span`,`fieldset`],a=(0,t.computed)(()=>r.scrollbar===!0?`leave`:r.scrollbar??void 0);(0,t.onMounted)(()=>{r.scrollbar&&i.includes(r.as)&&console.warn(`[DtBox] scrollbar prop inserts a <div> wrapper which breaks semantic child structure for <${r.as}>. Consider applying scrollbar on a parent DtBox container instead.`)});function o(e,t){return t?`${e}-${t}`:!1}function s(e){return[o(`d-box--p`,e.padding),o(`d-box--pi`,e.paddingInline),o(`d-box--pis`,e.paddingInlineStart),o(`d-box--pie`,e.paddingInlineEnd),o(`d-box--pbl`,e.paddingBlock),o(`d-box--pbs`,e.paddingBlockStart),o(`d-box--pbe`,e.paddingBlockEnd)]}function c(e){return[o(`d-box--surface`,e.surface),o(`d-box--bc`,e.borderColor),o(`d-box--bw`,e.borderWidth),o(`d-box--bwi`,e.borderWidthInline),o(`d-box--bwis`,e.borderWidthInlineStart),o(`d-box--bwie`,e.borderWidthInlineEnd),o(`d-box--bwbl`,e.borderWidthBlock),o(`d-box--bwbs`,e.borderWidthBlockStart),o(`d-box--bwbe`,e.borderWidthBlockEnd),o(`d-box--br`,e.borderRadius),o(`d-box--shadow`,e.shadow),o(`d-box--of`,e.overflow)]}function l(e){return[o(`d-box--is`,e.inlineSize),o(`d-box--bls`,e.blockSize),o(`d-box--min-is`,e.minInlineSize),o(`d-box--max-is`,e.maxInlineSize),o(`d-box--min-bls`,e.minBlockSize),o(`d-box--max-bls`,e.maxBlockSize)]}let u=(0,t.computed)(()=>[`d-box`,...s(r),...c(r),...l(r)]);return(r,i)=>{let o=(0,t.resolveDirective)(`dt-scrollbar`);return e.scrollbar?(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.as),{key:0,"data-qa":`dt-box`,class:(0,t.normalizeClass)(u.value)},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`div`,n,[(0,t.renderSlot)(r.$slots,`default`)])]),_:3},8,[`class`])),[[o,void 0,a.value]]):((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(e.as),{key:1,"data-qa":`dt-box`,class:(0,t.normalizeClass)(u.value)},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(r.$slots,`default`)]),_:3},8,[`class`]))}}});exports.default=r;
+//# sourceMappingURL=box.cjs.map

package/dist/lib/box/box.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.cjs","names":[],"sources":["../../../components/box/box.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <component\n    :is=\"as\"\n    v-if=\"scrollbar\"\n    v-dt-scrollbar:[scrollbarMode]\n    data-qa=\"dt-box\"\n    :class=\"boxClasses\"\n  >\n    <div\n      data-qa=\"dt-box-scrollbar-content\"\n      class=\"d-box__scrollbar-content\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot />\n    </div>\n  </component>\n  <component\n    :is=\"as\"\n    v-else\n    data-qa=\"dt-box\"\n    :class=\"boxClasses\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script setup>\nimport { computed, onMounted } from 'vue';\nimport {\n  asValidator,\n  spacingValidator,\n  surfaceValidator,\n  borderColorValidator,\n  borderWidthValidator,\n  borderRadiusValidator,\n  shadowValidator,\n  layoutValidator,\n  overflowValidator,\n  scrollbarValidator,\n} from './validators.js';\n\ndefineOptions({\n  name: 'DtBox',\n});\n\nconst props = defineProps({\n  /**\n   * HTML element to render as.\n   * @values div, span, section, article, aside, main, header, footer, nav, ul, ol, li, fieldset, form, figure\n   */\n  as: { type: String, default: 'div', validator: asValidator },\n\n  /**\n   * Custom scrollbar via OverlayScrollbars. When set, an inner viewport\n   * wrapper (.d-box__scrollbar-content) is inserted automatically.\n   * @values leave, scroll, move, never\n   */\n  scrollbar: { type: [String, Boolean], default: undefined, validator: scrollbarValidator },\n\n  /**\n   * Background surface color. Maps to --dt-color-surface-* tokens.\n   * @values primary, primary-opaque, secondary, secondary-opaque, moderate, moderate-opaque, bold, bold-opaque, strong, strong-opaque, contrast, contrast-opaque, brand, brand-opaque, brand-subtle, brand-subtle-opaque, brand-strong, info, info-opaque, info-subtle, info-subtle-opaque, info-strong, positive, positive-opaque, positive-subtle, positive-subtle-opaque, positive-strong, warning, warning-opaque, warning-subtle, warning-subtle-opaque, warning-strong, critical, critical-opaque, critical-subtle, critical-subtle-opaque, critical-strong, backdrop\n   */\n  surface: { type: String, default: undefined, validator: surfaceValidator },\n\n  /**\n   * Border color. Maps to --dt-color-border-* tokens.\n   * Defaults to 'default'. Visible when any border-width prop is set.\n   * @values transparent, subtle, default, moderate, bold, positive, positive-subtle, positive-strong, warning, warning-subtle, warning-strong, critical, critical-subtle, critical-strong, focus, brand, brand-subtle, brand-strong\n   */\n  borderColor: { type: String, default: 'default', validator: borderColorValidator },\n\n  /**\n   * Border radius. Maps to --dt-size-radius-* tokens.\n   * @values 0, 100, 200, 300, 350, 400, 450, 500, 600, pill, circle\n   */\n  borderRadius: { type: String, default: undefined, validator: borderRadiusValidator },\n\n  /**\n   * Border width on all sides. Maps to --dt-size-border-* tokens.\n   * @values 0, 50, 100, 150, 200, 300, 400\n   */\n  borderWidth: { type: String, default: undefined, validator: borderWidthValidator },\n\n  /**\n   * Border width on the block axis (top/bottom in horizontal writing mode).\n   * Overrides `borderWidth` for block sides.\n   * @values 0, 50, 100, 150, 200, 300, 400\n   */\n  borderWidthBlock: { type: String, default: undefined, validator: borderWidthValidator },\n\n  /**\n   * Border width on the block-end side.\n   * Overrides `borderWidthBlock` and `borderWidth` for block-end.\n   * @values 0, 50, 100, 150, 200, 300, 400\n   */\n  borderWidthBlockEnd: { type: String, default: undefined, validator: borderWidthValidator },\n\n  /**\n   * Border width on the block-start side.\n   * Overrides `borderWidthBlock` and `borderWidth` for block-start.\n   * @values 0, 50, 100, 150, 200, 300, 400\n   */\n  borderWidthBlockStart: { type: String, default: undefined, validator: borderWidthValidator },\n\n  /**\n   * Border width on the inline axis (left/right in LTR).\n   * Overrides `borderWidth` for inline sides.\n   * @values 0, 50, 100, 150, 200, 300, 400\n   */\n  borderWidthInline: { type: String, default: undefined, validator: borderWidthValidator },\n\n  /**\n   * Border width on the inline-end side.\n   * Overrides `borderWidthInline` and `borderWidth` for inline-end.\n   * @values 0, 50, 100, 150, 200, 300, 400\n   */\n  borderWidthInlineEnd: { type: String, default: undefined, validator: borderWidthValidator },\n\n  /**\n   * Border width on the inline-start side.\n   * Overrides `borderWidthInline` and `borderWidth` for inline-start.\n   * @values 0, 50, 100, 150, 200, 300, 400\n   */\n  borderWidthInlineStart: { type: String, default: undefined, validator: borderWidthValidator },\n\n  /**\n   * Padding on all sides. Accepts spacing token scale values.\n   * @values 0, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 525, 550, 600, 650, 700, 750, 800\n   */\n  padding: { type: String, default: undefined, validator: spacingValidator },\n\n  /**\n   * Padding on the block axis (top/bottom in horizontal writing mode).\n   * Overrides `padding` for the block axis.\n   * @values 0, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 525, 550, 600, 650, 700, 750, 800\n   */\n  paddingBlock: { type: String, default: undefined, validator: spacingValidator },\n\n  /**\n   * Padding on the block-end side.\n   * Overrides `paddingBlock` and `padding` for block-end.\n   * @values 0, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 525, 550, 600, 650, 700, 750, 800\n   */\n  paddingBlockEnd: { type: String, default: undefined, validator: spacingValidator },\n\n  /**\n   * Padding on the block-start side.\n   * Overrides `paddingBlock` and `padding` for block-start.\n   * @values 0, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 525, 550, 600, 650, 700, 750, 800\n   */\n  paddingBlockStart: { type: String, default: undefined, validator: spacingValidator },\n\n  /**\n   * Padding on the inline axis (left/right in LTR).\n   * Overrides `padding` for the inline axis.\n   * @values 0, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 525, 550, 600, 650, 700, 750, 800\n   */\n  paddingInline: { type: String, default: undefined, validator: spacingValidator },\n\n  /**\n   * Padding on the inline-end side.\n   * Overrides `paddingInline` and `padding` for inline-end.\n   * @values 0, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 525, 550, 600, 650, 700, 750, 800\n   */\n  paddingInlineEnd: { type: String, default: undefined, validator: spacingValidator },\n\n  /**\n   * Padding on the inline-start side.\n   * Overrides `paddingInline` and `padding` for inline-start.\n   * @values 0, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 525, 550, 600, 650, 700, 750, 800\n   */\n  paddingInlineStart: { type: String, default: undefined, validator: spacingValidator },\n\n  /**\n   * Block size (height in horizontal writing mode). Maps to --dt-layout-* tokens.\n   * @values 0, 25, 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 10-percent, 20-percent, 25-percent, 30-percent, 33-percent, 40-percent, 50-percent, 60-percent, 66-percent, 70-percent, 75-percent, 80-percent, 90-percent, 95-percent, 100-percent\n   */\n  blockSize: { type: String, default: undefined, validator: layoutValidator },\n\n  /**\n   * Inline size (width in horizontal writing mode). Maps to --dt-layout-* tokens.\n   * @values 0, 25, 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 10-percent, 20-percent, 25-percent, 30-percent, 33-percent, 40-percent, 50-percent, 60-percent, 66-percent, 70-percent, 75-percent, 80-percent, 90-percent, 95-percent, 100-percent\n   */\n  inlineSize: { type: String, default: undefined, validator: layoutValidator },\n\n  /**\n   * Maximum block size. Maps to --dt-layout-* tokens.\n   * @values 0, 25, 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 10-percent, 20-percent, 25-percent, 30-percent, 33-percent, 40-percent, 50-percent, 60-percent, 66-percent, 70-percent, 75-percent, 80-percent, 90-percent, 95-percent, 100-percent\n   */\n  maxBlockSize: { type: String, default: undefined, validator: layoutValidator },\n\n  /**\n   * Minimum block size. Maps to --dt-layout-* tokens.\n   * @values 0, 25, 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 10-percent, 20-percent, 25-percent, 30-percent, 33-percent, 40-percent, 50-percent, 60-percent, 66-percent, 70-percent, 75-percent, 80-percent, 90-percent, 95-percent, 100-percent\n   */\n  minBlockSize: { type: String, default: undefined, validator: layoutValidator },\n\n  /**\n   * Maximum inline size. Maps to --dt-layout-* tokens.\n   * @values 0, 25, 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 10-percent, 20-percent, 25-percent, 30-percent, 33-percent, 40-percent, 50-percent, 60-percent, 66-percent, 70-percent, 75-percent, 80-percent, 90-percent, 95-percent, 100-percent\n   */\n  maxInlineSize: { type: String, default: undefined, validator: layoutValidator },\n\n  /**\n   * Minimum inline size. Maps to --dt-layout-* tokens.\n   * @values 0, 25, 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 10-percent, 20-percent, 25-percent, 30-percent, 33-percent, 40-percent, 50-percent, 60-percent, 66-percent, 70-percent, 75-percent, 80-percent, 90-percent, 95-percent, 100-percent\n   */\n  minInlineSize: { type: String, default: undefined, validator: layoutValidator },\n\n  /**\n   * Box shadow. Maps to --dt-shadow-* tokens.\n   * @values small, medium, large, extra-large, card\n   */\n  shadow: { type: String, default: undefined, validator: shadowValidator },\n\n  /**\n   * Overflow behavior.\n   * @values hidden, scroll, auto, clip, visible\n   */\n  overflow: { type: String, default: undefined, validator: overflowValidator },\n});\n\nconst SCROLLBAR_INCOMPATIBLE_ELEMENTS = ['ul', 'ol', 'span', 'fieldset'];\n\nconst scrollbarMode = computed(() => {\n  if (props.scrollbar === true) return 'leave';\n  return props.scrollbar ?? undefined;\n});\n\nonMounted(() => {\n  if (props.scrollbar && SCROLLBAR_INCOMPATIBLE_ELEMENTS.includes(props.as)) {\n    console.warn(\n      `[DtBox] scrollbar prop inserts a <div> wrapper which breaks semantic child structure ` +\n      `for <${props.as}>. Consider applying scrollbar on a parent DtBox container instead.`,\n    );\n  }\n});\n\nfunction modifierClass (prefix, value) {\n  return value ? `${prefix}-${value}` : false;\n}\n\nfunction paddingClasses (p) {\n  return [\n    modifierClass('d-box--p', p.padding),\n    modifierClass('d-box--pi', p.paddingInline),\n    modifierClass('d-box--pis', p.paddingInlineStart),\n    modifierClass('d-box--pie', p.paddingInlineEnd),\n    modifierClass('d-box--pbl', p.paddingBlock),\n    modifierClass('d-box--pbs', p.paddingBlockStart),\n    modifierClass('d-box--pbe', p.paddingBlockEnd),\n  ];\n}\n\nfunction visualClasses (p) {\n  return [\n    modifierClass('d-box--surface', p.surface),\n    modifierClass('d-box--bc', p.borderColor),\n    modifierClass('d-box--bw', p.borderWidth),\n    modifierClass('d-box--bwi', p.borderWidthInline),\n    modifierClass('d-box--bwis', p.borderWidthInlineStart),\n    modifierClass('d-box--bwie', p.borderWidthInlineEnd),\n    modifierClass('d-box--bwbl', p.borderWidthBlock),\n    modifierClass('d-box--bwbs', p.borderWidthBlockStart),\n    modifierClass('d-box--bwbe', p.borderWidthBlockEnd),\n    modifierClass('d-box--br', p.borderRadius),\n    modifierClass('d-box--shadow', p.shadow),\n    modifierClass('d-box--of', p.overflow),\n  ];\n}\n\nfunction sizingClasses (p) {\n  return [\n    modifierClass('d-box--is', p.inlineSize),\n    modifierClass('d-box--bls', p.blockSize),\n    modifierClass('d-box--min-is', p.minInlineSize),\n    modifierClass('d-box--max-is', p.maxInlineSize),\n    modifierClass('d-box--min-bls', p.minBlockSize),\n    modifierClass('d-box--max-bls', p.maxBlockSize),\n  ];\n}\n\nconst boxClasses = computed(() => [\n  'd-box',\n  ...paddingClasses(props),\n  ...visualClasses(props),\n  ...sizingClasses(props),\n]);\n</script>\n"],"mappings":"qwEA+CA,IAAM,EAAQ,EAkLR,EAAkC,CAAC,KAAM,KAAM,OAAQ,WAAW,CAElE,GAAA,EAAA,EAAA,cACA,EAAM,YAAc,GAAa,QAC9B,EAAM,WAAa,IAAA,GAC1B,EAEF,EAAA,EAAA,eAAgB,CACV,EAAM,WAAa,EAAgC,SAAS,EAAM,GAAG,EACvE,QAAQ,KACN,6FACQ,EAAM,GAAG,qEAClB,EAEH,CAEF,SAAS,EAAe,EAAQ,EAAO,CACrC,OAAO,EAAQ,GAAG,EAAO,GAAG,IAAU,GAGxC,SAAS,EAAgB,EAAG,CAC1B,MAAO,CACL,EAAc,WAAY,EAAE,QAAQ,CACpC,EAAc,YAAa,EAAE,cAAc,CAC3C,EAAc,aAAc,EAAE,mBAAmB,CACjD,EAAc,aAAc,EAAE,iBAAiB,CAC/C,EAAc,aAAc,EAAE,aAAa,CAC3C,EAAc,aAAc,EAAE,kBAAkB,CAChD,EAAc,aAAc,EAAE,gBAAgB,CAC/C,CAGH,SAAS,EAAe,EAAG,CACzB,MAAO,CACL,EAAc,iBAAkB,EAAE,QAAQ,CAC1C,EAAc,YAAa,EAAE,YAAY,CACzC,EAAc,YAAa,EAAE,YAAY,CACzC,EAAc,aAAc,EAAE,kBAAkB,CAChD,EAAc,cAAe,EAAE,uBAAuB,CACtD,EAAc,cAAe,EAAE,qBAAqB,CACpD,EAAc,cAAe,EAAE,iBAAiB,CAChD,EAAc,cAAe,EAAE,sBAAsB,CACrD,EAAc,cAAe,EAAE,oBAAoB,CACnD,EAAc,YAAa,EAAE,aAAa,CAC1C,EAAc,gBAAiB,EAAE,OAAO,CACxC,EAAc,YAAa,EAAE,SAAS,CACvC,CAGH,SAAS,EAAe,EAAG,CACzB,MAAO,CACL,EAAc,YAAa,EAAE,WAAW,CACxC,EAAc,aAAc,EAAE,UAAU,CACxC,EAAc,gBAAiB,EAAE,cAAc,CAC/C,EAAc,gBAAiB,EAAE,cAAc,CAC/C,EAAc,iBAAkB,EAAE,aAAa,CAC/C,EAAc,iBAAkB,EAAE,aAAa,CAChD,CAGH,IAAM,GAAA,EAAA,EAAA,cAA4B,CAChC,QACA,GAAG,EAAe,EAAM,CACxB,GAAG,EAAc,EAAM,CACvB,GAAG,EAAc,EAAM,CACxB,CAAC,mEA9RQ,EAAA,WAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBADD,EAAA,GAAE,CAAA,OAGP,UAAQ,SACP,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAU,6BAQZ,EAAA,EAAA,EAAA,oBAAA,MANN,EAMM,EAAA,EAAA,EAAA,YADI,EAAA,OAAA,UAAA,CAAA,CAAA,CAAA,CAAA,+BATK,EAAA,MAAe,CAAA,CAAA,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBAazB,EAAA,GAAE,CAAA,OAEP,UAAQ,SACP,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAU,6BAGV,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA"}