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

package/dist/lib/checkbox/checkbox.js

@@ -1,15 +1,45 @@
-import { InputMixin as m, CheckableMixin as p, GroupableMixin as b, MessagesMixin as k } from "../../common/mixins/input.js";
-import { addClassStyleAttrs as f, removeClassStyleAttrs as C } from "../../common/utils/index.js";
-import { CHECKBOX_INPUT_VALIDATION_CLASSES as g } from "./checkbox-constants.js";
-import { resolveComponent as v, openBlock as l, createElementBlock as o, mergeProps as i, createElementVNode as n, normalizeClass as V, toHandlers as M, renderSlot as d, createTextVNode as c, toDisplayString as h, createCommentVNode as r, createVNode as y } from "vue";
-import { _ as S } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import $ from "../validation-messages/validation-messages.js";
-const A = {
+import { InputMixin as g, CheckableMixin as k, GroupableMixin as C, MessagesMixin as v } from "../../common/mixins/input.js";
+import { addClassStyleAttrs as S, removeClassStyleAttrs as V } from "../../common/utils/index.js";
+import { CHECKBOX_INPUT_VALIDATION_CLASSES as y } from "./checkbox-constants.js";
+import { resolveComponent as d, openBlock as l, createElementBlock as u, mergeProps as i, createElementVNode as n, normalizeClass as M, toHandlers as D, createBlock as c, withCtx as h, renderSlot as m, createTextVNode as b, toDisplayString as p, createCommentVNode as o, createVNode as I } from "vue";
+import { _ as E } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import L from "../text/text.js";
+import T from "../validation-messages/validation-messages.js";
+import { TEXT_STRENGTH_MODIFIERS as _, TEXT_SIZE_MODIFIERS as A } from "../text/text-constants.js";
+const N = {
   compatConfig: { MODE: 3 },
   name: "DtCheckbox",
-  components: { DtValidationMessages: $ },
-  mixins: [m, p, b, k],
+  components: { DtValidationMessages: T, DtText: L },
+  mixins: [g, k, C, v],
   inheritAttrs: !1,
+  props: {
+    /**
+     * Determines visibility of checkbox label.
+     * @values true, false
+     */
+    labelVisible: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Overrides the label text size.
+     * @values 100, 200, 300, 400
+     */
+    labelSize: {
+      type: [String, Number],
+      default: null,
+      validator: (e) => A.label.includes(String(e))
+    },
+    /**
+     * Overrides the label font weight.
+     * @values bold, semibold, medium, normal
+     */
+    labelStrength: {
+      type: String,
+      default: null,
+      validator: (e) => Object.keys(_).includes(e)
+    }
+  },
   emits: [
     /**
      * Native input event
@@ -41,16 +71,22 @@ const A = {
     "focusout"
   ],
   computed: {
+    resolvedLabelSize() {
+      return this.labelSize ?? 300;
+    },
     inputValidationClass() {
-      return g[this.internalValidationState];
+      return y[this.internalValidationState];
     },
     checkboxGroupValueChecked() {
-      var e, a;
-      return ((a = (e = this.groupContext) == null ? void 0 : e.selectedValues) == null ? void 0 : a.includes(this.value)) ?? !1;
+      var e, t;
+      return ((t = (e = this.groupContext) == null ? void 0 : e.selectedValues) == null ? void 0 : t.includes(this.value)) ?? !1;
     },
-    hasLabel() {
+    hasLabelContent() {
       return !!(this.$slots.default || this.label);
     },
+    hasLabel() {
+      return this.labelVisible && this.hasLabelContent;
+    },
     hasMessages() {
       return this.formattedMessages.length && this.showMessages;
     },
@@ -81,65 +117,83 @@ const A = {
     this.runValidations();
   },
   methods: {
-    removeClassStyleAttrs: C,
-    addClassStyleAttrs: f,
+    removeClassStyleAttrs: V,
+    addClassStyleAttrs: S,
     emitValue(e) {
-      let { value: a, checked: t } = e;
-      this.internalIndeterminate && (t = !1, this.internalIndeterminate = !1, e.checked = !1), this.setGroupValue(a, t), this.$emit("input", t), this.$emit("update:modelValue", t);
+      let { value: t, checked: s } = e;
+      this.internalIndeterminate && (s = !1, this.internalIndeterminate = !1, e.checked = !1), this.setGroupValue(t, s), this.$emit("input", s), this.$emit("update:modelValue", s);
     },
     runValidations() {
-      this.validateInputLabels(this.hasLabel, this.$attrs["aria-label"]);
+      !this.hasLabelContent && !this.$attrs["aria-label"] && console.warn(
+        '[Dialtone] A label is required for accessibility. Provide a label prop and use label-visible="false" to hide it visually.'
+      );
     }
   }
-}, D = { class: "d-checkbox__input" }, I = ["checked", "name", "value", "disabled", ".indeterminate"], L = {
+}, z = { class: "d-checkbox__input" }, w = ["checked", "name", "value", "disabled", "aria-label", ".indeterminate"], $ = {
   key: 0,
   class: "d-checkbox__messages",
   "data-qa": "checkbox-description-messages"
 };
-function N(e, a, t, w, E, s) {
-  const u = v("dt-validation-messages");
-  return l(), o("div", i({ class: e.rootClass }, s.addClassStyleAttrs(e.$attrs)), [
+function G(e, t, s, O, P, a) {
+  const r = d("dt-text"), f = d("dt-validation-messages");
+  return l(), u("div", i({ class: e.rootClass }, a.addClassStyleAttrs(e.$attrs)), [
     n("label", {
-      class: V(["d-checkbox-group", { "d-checkbox-group--disabled": e.internalDisabled }])
+      class: M(["d-checkbox-group", { "d-checkbox-group--disabled": e.internalDisabled }])
     }, [
-      n("div", D, [
+      n("div", z, [
         n("input", i({
           type: "checkbox",
           checked: e.internalChecked,
           name: e.internalName,
           value: e.value,
           disabled: e.internalDisabled,
-          class: ["d-checkbox", s.inputValidationClass, e.inputClass]
-        }, s.removeClassStyleAttrs(e.$attrs), { ".indeterminate": e.internalIndeterminate }, M(s.inputListeners, !0)), null, 48, I)
+          class: ["d-checkbox", a.inputValidationClass, e.inputClass],
+          "aria-label": !s.labelVisible && e.label ? e.label : void 0
+        }, a.removeClassStyleAttrs(e.$attrs), { ".indeterminate": e.internalIndeterminate }, D(a.inputListeners, !0)), null, 48, w)
       ]),
-      s.hasLabel ? (l(), o("div", i({
+      a.hasLabel ? (l(), c(r, i({
         key: 0,
+        as: "div",
+        kind: "label",
+        size: a.resolvedLabelSize,
+        strength: s.labelStrength ?? "normal",
+        tone: e.internalDisabled ? "disabled" : "primary",
         class: [e.labelClass, "d-checkbox__copy d-checkbox__label"]
-      }, e.labelChildProps, { "data-qa": "checkbox-label" }), [
-        d(e.$slots, "default", {}, () => [
-          c(h(e.label), 1)
-        ])
-      ], 16)) : r("", !0)
+      }, e.labelChildProps, { "data-qa": "checkbox-label" }), {
+        default: h(() => [
+          m(e.$slots, "default", {}, () => [
+            b(p(e.label), 1)
+          ])
+        ]),
+        _: 3
+      }, 16, ["size", "strength", "tone", "class"])) : o("", !0)
     ], 2),
-    e.$slots.description || e.description || s.hasMessages ? (l(), o("div", L, [
-      e.$slots.description || e.description ? (l(), o("div", i({
+    e.$slots.description || e.description || a.hasMessages ? (l(), u("div", $, [
+      e.$slots.description || e.description ? (l(), c(r, i({
         key: 0,
+        kind: "body",
+        size: 200,
+        tone: "tertiary",
+        as: "div",
         class: ["d-description", e.descriptionClass]
-      }, e.descriptionChildProps, { "data-qa": "checkbox-description" }), [
-        d(e.$slots, "description", {}, () => [
-          c(h(e.description), 1)
-        ])
-      ], 16)) : r("", !0),
-      y(u, i({
+      }, e.descriptionChildProps, { "data-qa": "checkbox-description" }), {
+        default: h(() => [
+          m(e.$slots, "description", {}, () => [
+            b(p(e.description), 1)
+          ])
+        ]),
+        _: 3
+      }, 16, ["class"])) : o("", !0),
+      I(f, i({
         "validation-messages": e.formattedMessages,
         "show-messages": e.showMessages,
         class: e.messagesClass
       }, e.messagesChildProps, { "data-qa": "dt-checkbox-validation-messages" }), null, 16, ["validation-messages", "show-messages", "class"])
-    ])) : r("", !0)
+    ])) : o("", !0)
   ], 16);
 }
-const T = /* @__PURE__ */ S(A, [["render", N]]);
+const K = /* @__PURE__ */ E(N, [["render", G]]);
 export {
-  T as default
+  K as default
 };
 //# sourceMappingURL=checkbox.js.map

package/dist/lib/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../components/checkbox/checkbox.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"rootClass\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <label :class=\"['d-checkbox-group', { 'd-checkbox-group--disabled': internalDisabled }]\">\n      <div class=\"d-checkbox__input\">\n        <input\n          type=\"checkbox\"\n          :checked=\"internalChecked\"\n          :name=\"internalName\"\n          :value=\"value\"\n          :disabled=\"internalDisabled\"\n          :class=\"['d-checkbox', inputValidationClass, inputClass]\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          :indeterminate.prop=\"internalIndeterminate\"\n          v-on=\"inputListeners\"\n        >\n      </div>\n      <div\n        v-if=\"hasLabel\"\n        :class=\"[labelClass, 'd-checkbox__copy d-checkbox__label']\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"checkbox-label\"\n      >\n        <!-- @slot slot for Checkbox Label -->\n        <slot>{{ label }}</slot>\n      </div>\n    </label>\n    <div\n      v-if=\"$slots.description || description || hasMessages\"\n      class=\"d-checkbox__messages\"\n      data-qa=\"checkbox-description-messages\"\n    >\n      <div\n        v-if=\"$slots.description || description\"\n        :class=\"['d-description', descriptionClass]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"checkbox-description\"\n      >\n        <!-- @slot slot for Checkbox Description -->\n        <slot name=\"description\">\n          {{ description }}\n        </slot>\n      </div>\n      <dt-validation-messages\n        :validation-messages=\"formattedMessages\"\n        :show-messages=\"showMessages\"\n        :class=\"messagesClass\"\n        v-bind=\"messagesChildProps\"\n        data-qa=\"dt-checkbox-validation-messages\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\n// Imports\nimport {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n} from '@/common/mixins/input';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { CHECKBOX_INPUT_VALIDATION_CLASSES } from './checkbox_constants';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * Checkboxes are control elements that allow the user to make a selection.They are typically used in a\n * Checkbox Group which allows the user to make one or more selections from a list of options.\n * @see https://dialtone.dialpad.com/components/checkbox.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCheckbox',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n  inheritAttrs: false,\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Boolean}\n     */\n    'input',\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event update:modelValue\n     * @type {Boolean}\n     */\n    'update:modelValue',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  computed: {\n    inputValidationClass () {\n      return CHECKBOX_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n    },\n\n    checkboxGroupValueChecked () {\n      return this.groupContext?.selectedValues?.includes(this.value) ?? false;\n    },\n\n    hasLabel () {\n      return !!(this.$slots.default || this.label);\n    },\n\n    hasMessages () {\n      return this.formattedMessages.length && this.showMessages;\n    },\n\n    inputListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through\n         * onto the input element which will result in the handler being called twice\n         * (once on the input element and once by the emitted input event by the change listener).\n        */\n        input: () => {},\n        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\n        change: event => this.emitValue(event.target),\n      };\n    },\n  },\n\n  watch: {\n    checkboxGroupValueChecked: {\n      immediate: true,\n      handler (newCheckboxGroupValueChecked) {\n        if (this.hasGroup) {\n          // update internal value when the checkbox group value changes\n          this.internalChecked = newCheckboxGroupValueChecked;\n        }\n      },\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n\n    emitValue (target) {\n      let { value, checked } = target;\n      // Expected: Indeterminate -> unchecked. We need to manually set DOM property `checked` to false\n      // and update this.internalIndeterminate.\n      if (this.internalIndeterminate) {\n        checked = false;\n        this.internalIndeterminate = false;\n        target.checked = false;\n      }\n      // update provided value if injected\n      this.setGroupValue(value, checked);\n\n      // emit the state of the checkbox\n      this.$emit('input', checked);\n      this.$emit('update:modelValue', checked);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasLabel, this.$attrs['aria-label']);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin","CHECKBOX_INPUT_VALIDATION_CLASSES","_b","_a","event","newCheckboxGroupValueChecked","removeClassStyleAttrs","addClassStyleAttrs","target","value","checked","_hoisted_1","_createElementBlock","_mergeProps","_ctx","$options","_createElementVNode","_toHandlers","_hoisted_2","_openBlock","_renderSlot","_hoisted_3","_createVNode","_component_dt_validation_messages"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../../components/checkbox/checkbox.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"rootClass\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <label :class=\"['d-checkbox-group', { 'd-checkbox-group--disabled': internalDisabled }]\">\n      <div class=\"d-checkbox__input\">\n        <input\n          type=\"checkbox\"\n          :checked=\"internalChecked\"\n          :name=\"internalName\"\n          :value=\"value\"\n          :disabled=\"internalDisabled\"\n          :class=\"['d-checkbox', inputValidationClass, inputClass]\"\n          :aria-label=\"!labelVisible && label ? label : undefined\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          :indeterminate.prop=\"internalIndeterminate\"\n          v-on=\"inputListeners\"\n        >\n      </div>\n      <dt-text\n        v-if=\"hasLabel\"\n        as=\"div\"\n        kind=\"label\"\n        :size=\"resolvedLabelSize\"\n        :strength=\"labelStrength ?? 'normal'\"\n        :tone=\"internalDisabled ? 'disabled' : 'primary'\"\n        :class=\"[labelClass, 'd-checkbox__copy d-checkbox__label']\"\n        v-bind=\"labelChildProps\"\n        data-qa=\"checkbox-label\"\n      >\n        <!-- @slot slot for Checkbox Label -->\n        <slot>{{ label }}</slot>\n      </dt-text>\n    </label>\n    <div\n      v-if=\"$slots.description || description || hasMessages\"\n      class=\"d-checkbox__messages\"\n      data-qa=\"checkbox-description-messages\"\n    >\n      <dt-text\n        v-if=\"$slots.description || description\"\n        kind=\"body\"\n        :size=\"200\"\n        tone=\"tertiary\"\n        as=\"div\"\n        :class=\"['d-description', descriptionClass]\"\n        v-bind=\"descriptionChildProps\"\n        data-qa=\"checkbox-description\"\n      >\n        <!-- @slot slot for Checkbox Description -->\n        <slot name=\"description\">\n          {{ description }}\n        </slot>\n      </dt-text>\n      <dt-validation-messages\n        :validation-messages=\"formattedMessages\"\n        :show-messages=\"showMessages\"\n        :class=\"messagesClass\"\n        v-bind=\"messagesChildProps\"\n        data-qa=\"dt-checkbox-validation-messages\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\n// Imports\nimport {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n} from '@/common/mixins/input';\nimport { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { CHECKBOX_INPUT_VALIDATION_CLASSES } from './checkbox_constants';\nimport { DtValidationMessages } from '../validation_messages';\nimport { DtText, TEXT_SIZE_MODIFIERS, TEXT_STRENGTH_MODIFIERS } from '@/components/text';\n\n/**\n * Checkboxes are control elements that allow the user to make a selection.They are typically used in a\n * Checkbox Group which allows the user to make one or more selections from a list of options.\n * @see https://dialtone.dialpad.com/components/checkbox.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCheckbox',\n\n  components: { DtValidationMessages, DtText },\n\n  mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines visibility of checkbox label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Overrides the label text size.\n     * @values 100, 200, 300, 400\n     */\n    labelSize: {\n      type: [String, Number],\n      default: null,\n      validator: (s) => TEXT_SIZE_MODIFIERS.label.includes(String(s)),\n    },\n\n    /**\n     * Overrides the label font weight.\n     * @values bold, semibold, medium, normal\n     */\n    labelStrength: {\n      type: String,\n      default: null,\n      validator: (s) => Object.keys(TEXT_STRENGTH_MODIFIERS).includes(s),\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Boolean}\n     */\n    'input',\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event update:modelValue\n     * @type {Boolean}\n     */\n    'update:modelValue',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  computed: {\n    resolvedLabelSize () {\n      return this.labelSize ?? 300;\n    },\n\n    inputValidationClass () {\n      return CHECKBOX_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n    },\n\n    checkboxGroupValueChecked () {\n      return this.groupContext?.selectedValues?.includes(this.value) ?? false;\n    },\n\n    hasLabelContent () {\n      return !!(this.$slots.default || this.label);\n    },\n\n    hasLabel () {\n      return this.labelVisible && this.hasLabelContent;\n    },\n\n    hasMessages () {\n      return this.formattedMessages.length && this.showMessages;\n    },\n\n    inputListeners () {\n      return {\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through\n         * onto the input element which will result in the handler being called twice\n         * (once on the input element and once by the emitted input event by the change listener).\n        */\n        input: () => {},\n        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\n        change: event => this.emitValue(event.target),\n      };\n    },\n  },\n\n  watch: {\n    checkboxGroupValueChecked: {\n      immediate: true,\n      handler (newCheckboxGroupValueChecked) {\n        if (this.hasGroup) {\n          // update internal value when the checkbox group value changes\n          this.internalChecked = newCheckboxGroupValueChecked;\n        }\n      },\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n\n    emitValue (target) {\n      let { value, checked } = target;\n      // Expected: Indeterminate -> unchecked. We need to manually set DOM property `checked` to false\n      // and update this.internalIndeterminate.\n      if (this.internalIndeterminate) {\n        checked = false;\n        this.internalIndeterminate = false;\n        target.checked = false;\n      }\n      // update provided value if injected\n      this.setGroupValue(value, checked);\n\n      // emit the state of the checkbox\n      this.$emit('input', checked);\n      this.$emit('update:modelValue', checked);\n    },\n\n    runValidations () {\n      if (!this.hasLabelContent && !this.$attrs['aria-label']) {\n        console.warn(\n          '[Dialtone] A label is required for accessibility. Provide a label prop and use label-visible=\"false\" to hide it visually.',\n        );\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","DtText","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin","s","TEXT_SIZE_MODIFIERS","TEXT_STRENGTH_MODIFIERS","CHECKBOX_INPUT_VALIDATION_CLASSES","_b","_a","event","newCheckboxGroupValueChecked","removeClassStyleAttrs","addClassStyleAttrs","target","value","checked","_hoisted_1","_createElementBlock","_mergeProps","_ctx","$options","_createElementVNode","$props","_toHandlers","_hoisted_2","_openBlock","_createBlock","_component_dt_text","_renderSlot","_hoisted_3","_createVNode","_component_dt_validation_messages"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _={xs:"d-chip__label--xs",sm:"d-chip__label--sm",md:""},s={xs:"d-chip__close--xs",sm:"d-chip__close--sm",md:""},I={xs:"200",sm:"200",md:"200"},e={CHIP_SIZE_MODIFIERS:_,CHIP_CLOSE_BUTTON_SIZE_MODIFIERS:s,CHIP_ICON_SIZES:I};exports.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS=s;exports.CHIP_ICON_SIZES=I;exports.CHIP_SIZE_MODIFIERS=_;exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _={100:"d-chip__label--xs",200:"d-chip__label--sm",300:"",xs:"d-chip__label--xs",sm:"d-chip__label--sm",md:""},s={100:"d-chip__close--xs",200:"d-chip__close--sm",300:"",xs:"d-chip__close--xs",sm:"d-chip__close--sm",md:""},I={100:"200",200:"200",300:"200",xs:"200",sm:"200",md:"200"},e={CHIP_SIZE_MODIFIERS:_,CHIP_CLOSE_BUTTON_SIZE_MODIFIERS:s,CHIP_ICON_SIZES:I};exports.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS=s;exports.CHIP_ICON_SIZES=I;exports.CHIP_SIZE_MODIFIERS=_;exports.default=e;
 //# sourceMappingURL=chip-constants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"chip-constants.cjs","sources":["../../../components/chip/chip_constants.js"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n"],"names":["CHIP_SIZE_MODIFIERS","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","CHIP_ICON_SIZES","chip_constants"],"mappings":"4GAAY,MAACA,EAAsB,CACjC,GAAI,oBACJ,GAAI,oBACJ,GAAI,EACN,EAEaC,EAAmC,CAC9C,GAAI,oBACJ,GAAI,oBACJ,GAAI,EACN,EAEaC,EAAkB,CAC7B,GAAI,MACJ,GAAI,MACJ,GAAI,KACN,EAEAC,EAAe,CACb,oBAAAH,EACA,iCAAAC,EACA,gBAAAC,CACF"}
+{"version":3,"file":"chip-constants.cjs","sources":["../../../components/chip/chip_constants.js"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-chip__label--xs',\n  200: 'd-chip__label--sm',\n  300: '',\n  // T-shirt aliases (deprecated)\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-chip__close--xs',\n  200: 'd-chip__close--sm',\n  300: '',\n  // T-shirt aliases (deprecated)\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  // Numeric (preferred)\n  100: '200',\n  200: '200',\n  300: '200',\n  // T-shirt aliases (deprecated)\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n"],"names":["CHIP_SIZE_MODIFIERS","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","CHIP_ICON_SIZES","chip_constants"],"mappings":"4GAAY,MAACA,EAAsB,CAEjC,IAAK,oBACL,IAAK,oBACL,IAAK,GAEL,GAAI,oBACJ,GAAI,oBACJ,GAAI,EACN,EAEaC,EAAmC,CAE9C,IAAK,oBACL,IAAK,oBACL,IAAK,GAEL,GAAI,oBACJ,GAAI,oBACJ,GAAI,EACN,EAEaC,EAAkB,CAE7B,IAAK,MACL,IAAK,MACL,IAAK,MAEL,GAAI,MACJ,GAAI,MACJ,GAAI,KACN,EAEAC,EAAe,CACb,oBAAAH,EACA,iCAAAC,EACA,gBAAAC,CACF"}

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

@@ -1,16 +1,31 @@
 const s = {
+  // Numeric (preferred)
+  100: "d-chip__label--xs",
+  200: "d-chip__label--sm",
+  300: "",
+  // T-shirt aliases (deprecated)
   xs: "d-chip__label--xs",
   sm: "d-chip__label--sm",
   md: ""
 }, _ = {
+  // Numeric (preferred)
+  100: "d-chip__close--xs",
+  200: "d-chip__close--sm",
+  300: "",
+  // T-shirt aliases (deprecated)
   xs: "d-chip__close--xs",
   sm: "d-chip__close--sm",
   md: ""
 }, c = {
+  // Numeric (preferred)
+  100: "200",
+  200: "200",
+  300: "200",
+  // T-shirt aliases (deprecated)
   xs: "200",
   sm: "200",
   md: "200"
-}, I = {
+}, l = {
   CHIP_SIZE_MODIFIERS: s,
   CHIP_CLOSE_BUTTON_SIZE_MODIFIERS: _,
   CHIP_ICON_SIZES: c
@@ -19,6 +34,6 @@ export {
   _ as CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,
   c as CHIP_ICON_SIZES,
   s as CHIP_SIZE_MODIFIERS,
-  I as default
+  l as default
 };
 //# sourceMappingURL=chip-constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"chip-constants.js","sources":["../../../components/chip/chip_constants.js"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n"],"names":["CHIP_SIZE_MODIFIERS","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","CHIP_ICON_SIZES","chip_constants"],"mappings":"AAAY,MAACA,IAAsB;AAAA,EACjC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAmC;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAkB;AAAA,EAC7B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEAC,IAAe;AAAA,EACb,qBAAAH;AAAA,EACA,kCAAAC;AAAA,EACA,iBAAAC;AACF;"}
+{"version":3,"file":"chip-constants.js","sources":["../../../components/chip/chip_constants.js"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-chip__label--xs',\n  200: 'd-chip__label--sm',\n  300: '',\n  // T-shirt aliases (deprecated)\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-chip__close--xs',\n  200: 'd-chip__close--sm',\n  300: '',\n  // T-shirt aliases (deprecated)\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  // Numeric (preferred)\n  100: '200',\n  200: '200',\n  300: '200',\n  // T-shirt aliases (deprecated)\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n"],"names":["CHIP_SIZE_MODIFIERS","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","CHIP_ICON_SIZES","chip_constants"],"mappings":"AAAY,MAACA,IAAsB;AAAA;AAAA,EAEjC,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA;AAAA,EAEL,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAmC;AAAA;AAAA,EAE9C,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA;AAAA,EAEL,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAkB;AAAA;AAAA,EAE7B,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA;AAAA,EAEL,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEAC,IAAe;AAAA,EACb,qBAAAH;AAAA,EACA,kCAAAC;AAAA,EACA,iBAAAC;AACF;"}

package/dist/lib/chip/chip.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@dialpad/dialtone-icons/vue3"),n=require("./chip-constants.cjs"),o=require("../../common/utils/index.cjs"),u=require("../../localization/index.cjs"),e=require("vue"),h=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),_=require("../button/button.cjs"),b={compatConfig:{MODE:3},name:"DtChip",components:{DtButton:_.default,DtIconClose:r.DtIconClose},props:{disabled:{type:Boolean,default:!1},hideClose:{type:Boolean,default:!1},size:{type:String,default:"md",validator:t=>Object.keys(n.CHIP_SIZE_MODIFIERS).includes(t)},interactive:{type:Boolean,default:!0},id:{type:String,default:function(){return o.getUniqueString()}},ariaLabel:{type:String,default:""},contentClass:{type:[String,Array,Object],default:""},labelClass:{type:[String,Array,Object],default:""}},emits:["click","close","keyup","keydown"],data(){return{isActive:!1,hasSlotContent:o.hasSlotContent,i18n:new u.DialtoneLocalization}},computed:{chipListeners(){return{click:t=>{this.interactive&&this.$emit("click",t)},keydown:t=>{var a;((a=t.code)==null?void 0:a.toLowerCase())==="delete"?this.onClose():this.$emit("keydown",t)},keyup:t=>{this.$emit("keyup",t)}}},closeButtonIconSize(){return n.CHIP_ICON_SIZES[this.size]},closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},methods:{chipClasses(){return[this.$attrs["grouped-chip"]?"d-chip":"d-chip__label",n.CHIP_SIZE_MODIFIERS[this.size],this.labelClass,this.disabled&&"d-chip--disabled"]},chipCloseButtonClasses(){return["d-chip__close",n.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],this.disabled&&"d-chip__close--disabled"]},onClose(){this.hideClose||this.$emit("close")}}},C={class:"d-chip"},p={key:0,class:"d-chip__icon","data-qa":"dt-chip-icon"},m={key:1,"data-qa":"dt-chip-avatar"},S=["id"];function k(t,a,i,f,s,l){const c=e.resolveComponent("dt-icon-close"),d=e.resolveComponent("dt-button");return e.openBlock(),e.createElementBlock("span",C,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.interactive?"button":"span"),e.mergeProps({id:i.id,"aria-label":i.ariaLabel,"aria-labelledby":i.ariaLabel?void 0:`${i.id}-content`,"aria-disabled":i.disabled,class:l.chipClasses(),type:i.interactive&&"button","data-qa":"dt-chip",tabindex:i.disabled?-1:null},e.toHandlers(l.chipListeners)),{default:e.withCtx(()=>[s.hasSlotContent(t.$slots.icon)?(e.openBlock(),e.createElementBlock("span",p,[e.renderSlot(t.$slots,"icon")])):s.hasSlotContent(t.$slots.avatar)?(e.openBlock(),e.createElementBlock("span",m,[e.renderSlot(t.$slots,"avatar")])):e.createCommentVNode("",!0),s.hasSlotContent(t.$slots.default)?(e.openBlock(),e.createElementBlock("span",{key:2,id:`${i.id}-content`,class:e.normalizeClass(["d-chip__text",i.contentClass]),"data-qa":"dt-chip-label"},[e.renderSlot(t.$slots,"default")],10,S)):e.createCommentVNode("",!0)]),_:3},16,["id","aria-label","aria-labelledby","aria-disabled","class","type","tabindex"])),i.hideClose?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(d,{key:0,class:e.normalizeClass(l.chipCloseButtonClasses()),"data-qa":"dt-chip-close","aria-label":l.closeButtonTitle,"aria-disabled":i.disabled,title:l.closeButtonTitle,tabindex:i.disabled?-1:null,onClick:a[0]||(a[0]=B=>t.$emit("close"))},{icon:e.withCtx(()=>[e.createVNode(c,{size:l.closeButtonIconSize},null,8,["size"])]),_:1},8,["class","aria-label","aria-disabled","title","tabindex"]))])}const y=h._(b,[["render",k]]);exports.default=y;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@dialpad/dialtone-icons/vue"),n=require("./chip-constants.cjs"),o=require("../../common/utils/index.cjs"),u=require("../../localization/index.cjs"),e=require("vue"),h=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),_=require("../button/button.cjs"),b={compatConfig:{MODE:3},name:"DtChip",components:{DtButton:_.default,DtIconClose:r.DtIconClose},props:{disabled:{type:Boolean,default:!1},hideClose:{type:Boolean,default:!1},size:{type:[String,Number],default:300,validator:t=>Object.keys(n.CHIP_SIZE_MODIFIERS).includes(String(t))},interactive:{type:Boolean,default:!0},id:{type:String,default:function(){return o.getUniqueString()}},ariaLabel:{type:String,default:""},contentClass:{type:[String,Array,Object],default:""},labelClass:{type:[String,Array,Object],default:""}},emits:["click","close","keyup","keydown"],data(){return{isActive:!1,hasSlotContent:o.hasSlotContent,i18n:new u.DialtoneLocalization}},computed:{chipListeners(){return{click:t=>{this.interactive&&this.$emit("click",t)},keydown:t=>{var a;((a=t.code)==null?void 0:a.toLowerCase())==="delete"?this.onClose():this.$emit("keydown",t)},keyup:t=>{this.$emit("keyup",t)}}},closeButtonIconSize(){return n.CHIP_ICON_SIZES[String(this.size)]},closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},methods:{chipClasses(){return[this.$attrs["grouped-chip"]?"d-chip":"d-chip__label",n.CHIP_SIZE_MODIFIERS[String(this.size)],this.labelClass,this.disabled&&"d-chip--disabled"]},chipCloseButtonClasses(){return["d-chip__close",n.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[String(this.size)],this.disabled&&"d-chip__close--disabled"]},onClose(){this.hideClose||this.$emit("close")}}},C={class:"d-chip"},p={key:0,class:"d-chip__icon","data-qa":"dt-chip-icon"},m={key:1,"data-qa":"dt-chip-avatar"},S=["id"];function k(t,a,i,f,s,l){const c=e.resolveComponent("dt-icon-close"),d=e.resolveComponent("dt-button");return e.openBlock(),e.createElementBlock("span",C,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.interactive?"button":"span"),e.mergeProps({id:i.id,"aria-label":i.ariaLabel,"aria-labelledby":i.ariaLabel?void 0:`${i.id}-content`,"aria-disabled":i.disabled,class:l.chipClasses(),type:i.interactive&&"button","data-qa":"dt-chip",tabindex:i.disabled?-1:null},e.toHandlers(l.chipListeners)),{default:e.withCtx(()=>[s.hasSlotContent(t.$slots.icon)?(e.openBlock(),e.createElementBlock("span",p,[e.renderSlot(t.$slots,"icon")])):s.hasSlotContent(t.$slots.avatar)?(e.openBlock(),e.createElementBlock("span",m,[e.renderSlot(t.$slots,"avatar")])):e.createCommentVNode("",!0),s.hasSlotContent(t.$slots.default)?(e.openBlock(),e.createElementBlock("span",{key:2,id:`${i.id}-content`,class:e.normalizeClass(["d-chip__text",i.contentClass]),"data-qa":"dt-chip-label"},[e.renderSlot(t.$slots,"default")],10,S)):e.createCommentVNode("",!0)]),_:3},16,["id","aria-label","aria-labelledby","aria-disabled","class","type","tabindex"])),i.hideClose?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(d,{key:0,class:e.normalizeClass(l.chipCloseButtonClasses()),"data-qa":"dt-chip-close","aria-label":l.closeButtonTitle,"aria-disabled":i.disabled,title:l.closeButtonTitle,tabindex:i.disabled?-1:null,onClick:a[0]||(a[0]=B=>t.$emit("close"))},{startIcon:e.withCtx(()=>[e.createVNode(c,{size:l.closeButtonIconSize},null,8,["size"])]),_:1},8,["class","aria-label","aria-disabled","title","tabindex"]))])}const y=h._(b,[["render",k]]);exports.default=y;
 //# sourceMappingURL=chip.cjs.map

package/dist/lib/chip/chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chip.cjs","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-disabled=\"disabled\"\n      :class=\"chipClasses()\"\n      :type=\"interactive && 'button'\"\n      data-qa=\"dt-chip\"\n      :tabindex=\"disabled ? -1 : null\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        class=\"d-chip__icon\"\n        data-qa=\"dt-chip-icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"hasSlotContent($slots.avatar)\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"hasSlotContent($slots.default)\"\n        :id=\"`${id}-content`\"\n        :class=\"['d-chip__text', contentClass]\"\n        data-qa=\"dt-chip-label\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonTitle\"\n      :aria-disabled=\"disabled\"\n      :title=\"closeButtonTitle\"\n      :tabindex=\"disabled ? -1 : null\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    /**\n     * Whether the chip is disabled\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values xs, sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n\n    /**\n     * Native chip key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keydown: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keydown', event);\n          }\n        },\n\n        keyup: event => {\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[this.size];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[this.size],\n        this.labelClass,\n        this.disabled && 'd-chip--disabled',\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n        this.disabled && 'd-chip__close--disabled',\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconClose","s","CHIP_SIZE_MODIFIERS","getUniqueString","hasSlotContent","DialtoneLocalization","event","_a","CHIP_ICON_SIZES","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","_hoisted_1","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","$data","_ctx","_hoisted_2","_renderSlot","_hoisted_3","_component_dt_button","_createVNode","_component_dt_icon_close"],"mappings":"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"}
+{"version":3,"file":"chip.cjs","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-disabled=\"disabled\"\n      :class=\"chipClasses()\"\n      :type=\"interactive && 'button'\"\n      data-qa=\"dt-chip\"\n      :tabindex=\"disabled ? -1 : null\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        class=\"d-chip__icon\"\n        data-qa=\"dt-chip-icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"hasSlotContent($slots.avatar)\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"hasSlotContent($slots.default)\"\n        :id=\"`${id}-content`\"\n        :class=\"['d-chip__text', contentClass]\"\n        data-qa=\"dt-chip-label\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonTitle\"\n      :aria-disabled=\"disabled\"\n      :title=\"closeButtonTitle\"\n      :tabindex=\"disabled ? -1 : null\"\n      @click=\"$emit('close')\"\n    >\n      <template #startIcon>\n        <dt-icon-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    /**\n     * Whether the chip is disabled\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values 100, 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(String(s)),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n\n    /**\n     * Native chip key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keydown: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keydown', event);\n          }\n        },\n\n        keyup: event => {\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[String(this.size)];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[String(this.size)],\n        this.labelClass,\n        this.disabled && 'd-chip--disabled',\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[String(this.size)],\n        this.disabled && 'd-chip__close--disabled',\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconClose","s","CHIP_SIZE_MODIFIERS","getUniqueString","hasSlotContent","DialtoneLocalization","event","_a","CHIP_ICON_SIZES","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","_hoisted_1","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","$data","_ctx","_hoisted_2","_renderSlot","_hoisted_3","_component_dt_button","_createVNode","_component_dt_icon_close"],"mappings":"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"}

package/dist/lib/chip/chip.js

@@ -1,9 +1,9 @@
-import { DtIconClose as C } from "@dialpad/dialtone-icons/vue3";
+import { DtIconClose as C } from "@dialpad/dialtone-icons/vue";
 import { CHIP_CLOSE_BUTTON_SIZE_MODIFIERS as p, CHIP_SIZE_MODIFIERS as c, CHIP_ICON_SIZES as f } from "./chip-constants.js";
 import { hasSlotContent as y, getUniqueString as S } from "../../common/utils/index.js";
 import { DialtoneLocalization as k } from "../../localization/index.js";
-import { resolveComponent as r, openBlock as a, createElementBlock as l, createBlock as u, resolveDynamicComponent as B, mergeProps as I, toHandlers as O, withCtx as h, renderSlot as o, createCommentVNode as d, normalizeClass as b, createVNode as v } from "vue";
-import { _ as g } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { resolveComponent as r, openBlock as a, createElementBlock as l, createBlock as u, resolveDynamicComponent as B, mergeProps as I, toHandlers as g, withCtx as h, renderSlot as o, createCommentVNode as d, normalizeClass as b, createVNode as O } from "vue";
+import { _ as v } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import z from "../button/button.js";
 const D = {
   compatConfig: { MODE: 3 },
@@ -31,12 +31,12 @@ const D = {
     },
     /**
      * The size of the chip.
-     * @values xs, sm, md
+     * @values 100, 200, 300
      */
     size: {
-      type: String,
-      default: "md",
-      validator: (e) => Object.keys(c).includes(e)
+      type: [String, Number],
+      default: 300,
+      validator: (e) => Object.keys(c).includes(String(e))
     },
     /**
      * The interactivity of the chip.
@@ -131,7 +131,7 @@ const D = {
       };
     },
     closeButtonIconSize() {
-      return f[this.size];
+      return f[String(this.size)];
     },
     closeButtonTitle() {
       return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
@@ -141,7 +141,7 @@ const D = {
     chipClasses() {
       return [
         this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label",
-        c[this.size],
+        c[String(this.size)],
         this.labelClass,
         this.disabled && "d-chip--disabled"
       ];
@@ -149,7 +149,7 @@ const D = {
     chipCloseButtonClasses() {
       return [
         "d-chip__close",
-        p[this.size],
+        p[String(this.size)],
         this.disabled && "d-chip__close--disabled"
       ];
     },
@@ -164,8 +164,8 @@ const D = {
 }, T = {
   key: 1,
   "data-qa": "dt-chip-avatar"
-}, q = ["id"];
-function w(e, s, t, N, n, i) {
+}, N = ["id"];
+function q(e, s, t, w, n, i) {
   const m = r("dt-icon-close"), _ = r("dt-button");
   return a(), l("span", E, [
     (a(), u(B(t.interactive ? "button" : "span"), I({
@@ -177,7 +177,7 @@ function w(e, s, t, N, n, i) {
       type: t.interactive && "button",
       "data-qa": "dt-chip",
       tabindex: t.disabled ? -1 : null
-    }, O(i.chipListeners)), {
+    }, g(i.chipListeners)), {
       default: h(() => [
         n.hasSlotContent(e.$slots.icon) ? (a(), l("span", L, [
           o(e.$slots, "icon")
@@ -191,7 +191,7 @@ function w(e, s, t, N, n, i) {
           "data-qa": "dt-chip-label"
         }, [
           o(e.$slots, "default")
-        ], 10, q)) : d("", !0)
+        ], 10, N)) : d("", !0)
       ]),
       _: 3
     }, 16, ["id", "aria-label", "aria-labelledby", "aria-disabled", "class", "type", "tabindex"])),
@@ -205,14 +205,14 @@ function w(e, s, t, N, n, i) {
       tabindex: t.disabled ? -1 : null,
       onClick: s[0] || (s[0] = (A) => e.$emit("close"))
     }, {
-      icon: h(() => [
-        v(m, { size: i.closeButtonIconSize }, null, 8, ["size"])
+      startIcon: h(() => [
+        O(m, { size: i.closeButtonIconSize }, null, 8, ["size"])
       ]),
       _: 1
     }, 8, ["class", "aria-label", "aria-disabled", "title", "tabindex"]))
   ]);
 }
-const F = /* @__PURE__ */ g(D, [["render", w]]);
+const F = /* @__PURE__ */ v(D, [["render", q]]);
 export {
   F as default
 };

package/dist/lib/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-disabled=\"disabled\"\n      :class=\"chipClasses()\"\n      :type=\"interactive && 'button'\"\n      data-qa=\"dt-chip\"\n      :tabindex=\"disabled ? -1 : null\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        class=\"d-chip__icon\"\n        data-qa=\"dt-chip-icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"hasSlotContent($slots.avatar)\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"hasSlotContent($slots.default)\"\n        :id=\"`${id}-content`\"\n        :class=\"['d-chip__text', contentClass]\"\n        data-qa=\"dt-chip-label\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonTitle\"\n      :aria-disabled=\"disabled\"\n      :title=\"closeButtonTitle\"\n      :tabindex=\"disabled ? -1 : null\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    /**\n     * Whether the chip is disabled\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values xs, sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n\n    /**\n     * Native chip key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keydown: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keydown', event);\n          }\n        },\n\n        keyup: event => {\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[this.size];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[this.size],\n        this.labelClass,\n        this.disabled && 'd-chip--disabled',\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n        this.disabled && 'd-chip__close--disabled',\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconClose","s","CHIP_SIZE_MODIFIERS","getUniqueString","hasSlotContent","DialtoneLocalization","event","_a","CHIP_ICON_SIZES","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","_hoisted_1","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","$data","_ctx","_hoisted_2","_renderSlot","_hoisted_3","_component_dt_button","_createVNode","_component_dt_icon_close"],"mappings":"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"}
+{"version":3,"file":"chip.js","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-disabled=\"disabled\"\n      :class=\"chipClasses()\"\n      :type=\"interactive && 'button'\"\n      data-qa=\"dt-chip\"\n      :tabindex=\"disabled ? -1 : null\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        class=\"d-chip__icon\"\n        data-qa=\"dt-chip-icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"hasSlotContent($slots.avatar)\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"hasSlotContent($slots.default)\"\n        :id=\"`${id}-content`\"\n        :class=\"['d-chip__text', contentClass]\"\n        data-qa=\"dt-chip-label\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonTitle\"\n      :aria-disabled=\"disabled\"\n      :title=\"closeButtonTitle\"\n      :tabindex=\"disabled ? -1 : null\"\n      @click=\"$emit('close')\"\n    >\n      <template #startIcon>\n        <dt-icon-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    /**\n     * Whether the chip is disabled\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values 100, 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(String(s)),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n\n    /**\n     * Native chip key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keydown: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keydown', event);\n          }\n        },\n\n        keyup: event => {\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[String(this.size)];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[String(this.size)],\n        this.labelClass,\n        this.disabled && 'd-chip--disabled',\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[String(this.size)],\n        this.disabled && 'd-chip__close--disabled',\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconClose","s","CHIP_SIZE_MODIFIERS","getUniqueString","hasSlotContent","DialtoneLocalization","event","_a","CHIP_ICON_SIZES","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","_hoisted_1","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","$data","_ctx","_hoisted_2","_renderSlot","_hoisted_3","_component_dt_button","_createVNode","_component_dt_icon_close"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=["100","200","300","400","xs","sm","md","lg"],O=200,C={100:"xs",200:"sm",300:"md",400:"lg"};exports.CODEBLOCK_SIZES=E;exports.CODEBLOCK_SIZE_DEFAULT=O;exports.CODEBLOCK_SIZE_MAP=C;
+//# sourceMappingURL=codeblock-constants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"codeblock-constants.cjs","sources":["../../../components/codeblock/codeblock_constants.js"],"sourcesContent":["export const CODEBLOCK_SIZES = ['100', '200', '300', '400', 'xs', 'sm', 'md', 'lg'];\nexport const CODEBLOCK_SIZE_DEFAULT = 200;\n\n// Numeric → CSS class suffix mapping (numeric values use the t-shirt class suffix)\nexport const CODEBLOCK_SIZE_MAP = {\n  100: 'xs',\n  200: 'sm',\n  300: 'md',\n  400: 'lg',\n};\n"],"names":["CODEBLOCK_SIZES","CODEBLOCK_SIZE_DEFAULT","CODEBLOCK_SIZE_MAP"],"mappings":"gFAAY,MAACA,EAAkB,CAAC,MAAO,MAAO,MAAO,MAAO,KAAM,KAAM,KAAM,IAAI,EACrEC,EAAyB,IAGzBC,EAAqB,CAChC,IAAK,KACL,IAAK,KACL,IAAK,KACL,IAAK,IACP"}

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

@@ -0,0 +1,12 @@
+const s = ["100", "200", "300", "400", "xs", "sm", "md", "lg"], E = 200, C = {
+  100: "xs",
+  200: "sm",
+  300: "md",
+  400: "lg"
+};
+export {
+  s as CODEBLOCK_SIZES,
+  E as CODEBLOCK_SIZE_DEFAULT,
+  C as CODEBLOCK_SIZE_MAP
+};
+//# sourceMappingURL=codeblock-constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"codeblock-constants.js","sources":["../../../components/codeblock/codeblock_constants.js"],"sourcesContent":["export const CODEBLOCK_SIZES = ['100', '200', '300', '400', 'xs', 'sm', 'md', 'lg'];\nexport const CODEBLOCK_SIZE_DEFAULT = 200;\n\n// Numeric → CSS class suffix mapping (numeric values use the t-shirt class suffix)\nexport const CODEBLOCK_SIZE_MAP = {\n  100: 'xs',\n  200: 'sm',\n  300: 'md',\n  400: 'lg',\n};\n"],"names":["CODEBLOCK_SIZES","CODEBLOCK_SIZE_DEFAULT","CODEBLOCK_SIZE_MAP"],"mappings":"AAAY,MAACA,IAAkB,CAAC,OAAO,OAAO,OAAO,OAAO,MAAM,MAAM,MAAM,IAAI,GACrEC,IAAyB,KAGzBC,IAAqB;AAAA,EAChC,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP;"}

package/dist/lib/codeblock/codeblock.cjs

@@ -1,3 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),n={compatConfig:{MODE:3},name:"DtCodeblock",props:{text:{type:String,required:!0}}},c={class:"d-codeblock"};function l(u,t,o,d,i,p){return e.openBlock(),e.createElementBlock("pre",null,[t[0]||(t[0]=e.createTextVNode("    ",-1)),e.createElementVNode("code",c,e.toDisplayString(o.text),1),t[1]||(t[1]=e.createTextVNode(`
-  `,-1))])}const s=r._(n,[["render",l]]);exports.default=s;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./codeblock-constants.cjs"),e=require("vue"),l=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),s={compatConfig:{MODE:3},name:"DtCodeblock",props:{text:{type:String,required:!0},bordered:{type:Boolean,default:!1},size:{type:[String,Number],default:200,validator:t=>r.CODEBLOCK_SIZES.includes(String(t))}},computed:{sizeClass(){return r.CODEBLOCK_SIZE_MAP[String(this.size)]||String(this.size)}}};function d(t,i,o,a,u,c){return e.openBlock(),e.createElementBlock("pre",{class:e.normalizeClass(["d-codeblock",{"d-codeblock--bordered":o.bordered}])},[e.createElementVNode("code",{class:e.normalizeClass(["d-codeblock__code",`d-codeblock__code--${c.sizeClass}`])},e.toDisplayString(o.text),3)],2)}const n=l._(s,[["render",d]]);exports.default=n;
 //# sourceMappingURL=codeblock.cjs.map

package/dist/lib/codeblock/codeblock.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"codeblock.cjs","sources":["../../../components/codeblock/codeblock.vue"],"sourcesContent":["<template>\n  <pre>\n    <code\n      class=\"d-codeblock\"\n    >{{ text }}</code>\n  </pre>\n</template>\n\n<script>\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCodeblock',\n\n  props: {\n    text: {\n      type: String,\n      required: true,\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","_hoisted_1","_createElementBlock","_createElementVNode","_toDisplayString","$props"],"mappings":"6LASKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,cAEN,MAAO,CACL,KAAM,CACJ,KAAM,OACN,SAAU,IAGhB,EAhBMC,EAAA,CAAA,MAAM,aAAa,+CAFvBC,qBAIM,MAAA,KAAA,+BAJD,OACH,EAAA,GAAAC,EAAAA,mBAEkB,OAFlBF,EAEkBG,EAAAA,gBAAdC,EAAA,IAAI,EAAA,CAAA,gCAAU;AAAA,IACpB,EAAA"}
+{"version":3,"file":"codeblock.cjs","sources":["../../../components/codeblock/codeblock.vue"],"sourcesContent":["<template>\n  <pre\n    class=\"d-codeblock\"\n    :class=\"{ 'd-codeblock--bordered': bordered }\"\n  ><code\n    class=\"d-codeblock__code\"\n    :class=\"`d-codeblock__code--${sizeClass}`\"\n  >{{ text }}</code></pre> <!-- this must be a single line -->\n</template>\n\n<script>\nimport { CODEBLOCK_SIZES, CODEBLOCK_SIZE_MAP } from './codeblock_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCodeblock',\n\n  props: {\n    /**\n     * The text to display in the codeblock.\n     */\n    text: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Whether to render as a styled container block.\n     */\n    bordered: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Font size of the code block.\n     * @values 100, 200, 300, 400\n     */\n    size: {\n      type: [String, Number],\n      default: 200,\n      validator: (val) => CODEBLOCK_SIZES.includes(String(val)),\n    },\n  },\n\n  computed: {\n    sizeClass () {\n      return CODEBLOCK_SIZE_MAP[String(this.size)] || String(this.size);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","val","CODEBLOCK_SIZES","CODEBLOCK_SIZE_MAP","_createElementBlock","_normalizeClass","$props","_createElementVNode","$options"],"mappings":"oOAaKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,cAEN,MAAO,CAIL,KAAM,CACJ,KAAM,OACN,SAAU,IAMZ,SAAU,CACR,KAAM,QACN,QAAS,IAOX,KAAM,CACJ,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,IACT,UAAYC,GAAQC,EAAAA,gBAAgB,SAAS,OAAOD,CAAG,CAAC,IAI5D,SAAU,CACR,WAAa,CACX,OAAOE,EAAAA,mBAAmB,OAAO,KAAK,IAAI,CAAC,GAAK,OAAO,KAAK,IAAI,CAClE,EAEJ,+CAjDEC,EAAAA,mBAMwB,MAAA,CALtB,MAAKC,EAAAA,eAAA,CAAC,cAAa,CAAA,wBACgBC,EAAA,SAAQ,CAAA,IAC5CC,EAAAA,mBAGiB,OAAA,CAFhB,MAAKF,EAAAA,eAAA,CAAC,oBAAmB,sBACKG,EAAA,SAAS,EAAA,CAAA,qBACrCF,EAAA,IAAI,EAAA,CAAA"}