@dialpad/dialtone-vue 3.220.0-next.4 → 3.220.0

package/dist/lib/tab/tab-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-group.js","names":[],"sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-tab-group\"\n    :class=\"['d-tab-neux', { 'd-tab-neux--vertical': orientation === 'vertical' }]\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n    <div\n      ref=\"tabs\"\n      :class=\"[\n        'd-tablist',\n        TAB_LIST_SIZE_MODIFIERS[String(size)],\n        TAB_ORIENTATION_MODIFIERS[orientation],\n        orientation !== 'vertical' && TAB_SPREAD_MODIFIERS[spread],\n        {\n          [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n          [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n        },\n        resolvedTabsClass,\n      ]\"\n      v-bind=\"tabListChildProps\"\n      role=\"tablist\"\n      :aria-label=\"label\"\n      :aria-orientation=\"orientation\"\n      @keydown.left=\"tabLeft\"\n      @keydown.right=\"tabRight\"\n      @keydown.up=\"tabUp\"\n      @keydown.down=\"tabDown\"\n      @keydown.enter=\"selectTab\"\n      @keydown.space=\"selectTab\"\n      @click=\"selectTab\"\n      @keydown.home.prevent=\"onHomeButton\"\n      @keydown.end.prevent=\"onEndButton\"\n    >\n      <!-- @slot Slot for Tabs -->\n      <slot name=\"tabs\" />\n    </div>\n    <!-- @slot Default slot for Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport {\n  TAB_LIST_SIZES,\n  TAB_LIST_KIND_MODIFIERS,\n  TAB_LIST_IMPORTANCE_MODIFIERS,\n  TAB_LIST_SIZE_MODIFIERS,\n  TAB_ORIENTATIONS,\n  TAB_ORIENTATION_MODIFIERS,\n  TAB_ACTIVATION_MODES,\n  TAB_GROUP_KINDS,\n  TAB_SPREADS,\n  TAB_SPREAD_MODIFIERS,\n} from './tabs_constants';\nimport { ref } from 'vue';\nimport { useIndicatorAnimation } from '@/common/composables/useIndicatorAnimation';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setFocus: this.setFocus,\n    };\n  },\n\n  props: {\n    /**\n     * Identifies the tab group\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The id of the selected tab panel which should be displayed\n     */\n    selected: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * If true, disables the tab group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies inverted styles to the tab group\n     * @deprecated Use v-dt-mode directive instead.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies borderless styles to the tab group\n     * @values true, false\n     */\n    borderless: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls how tabs distribute available space within the tab list.\n     * @values none, grow, equal\n     */\n    spread: {\n      type: String,\n      default: 'none',\n      validator (value) {\n        return TAB_SPREADS.includes(value);\n      },\n    },\n\n    /**\n     * The orientation of the tab list\n     * @values horizontal, vertical\n     */\n    orientation: {\n      type: String,\n      default: 'horizontal',\n      validator (value) {\n        return TAB_ORIENTATIONS.includes(value);\n      },\n    },\n\n    /**\n     * If provided, applies size styles to the tab group\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator (size) {\n        return TAB_LIST_SIZES.includes(String(size));\n      },\n    },\n\n    /**\n     * Pass through classes, used to customize the tab list\n     */\n    tabsClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes, used to customize the tab list\n     * @deprecated Use tabsClass\n     */\n    tabListClass: {\n      type: [String, Array, Object],\n      default: undefined,\n    },\n\n    /**\n     * Pass through props, used to customize the tab list\n     */\n    tabListChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * The visual style kind applied to tabs within this group.\n     * Maps to specific DtButton kind/importance combinations for selected/unselected states.\n     * @values default, muted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator (value) {\n        return TAB_GROUP_KINDS.includes(value);\n      },\n    },\n\n    /**\n     * If true, the selected tab renders with outlined importance instead of clear.\n     * @values true, false\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls whether tabs are selected on focus (auto) or on click/keypress (manual)\n     * @values auto, manual\n     */\n    activationMode: {\n      type: String,\n      default: 'manual',\n      validator (value) {\n        return TAB_ACTIVATION_MODES.includes(value);\n      },\n    },\n\n    /**\n     * If true, the selection indicator animates between tabs on click.\n     * @values true, false\n     */\n    showIndicatorTransition: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Change tab event with the arguments: selected id of the current tab and disabled value\n     *\n     * @event change\n     * @type {Object}\n     */\n    'change',\n\n    /**\n     * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n     *\n     * @event before-change\n     * @type {Event}\n     */\n    'before-change',\n  ],\n\n  setup () {\n    const tabs = ref(null);\n    const indicator = useIndicatorAnimation(\n      tabs, '--tab-indicator-duration', '--tab-indicator-easing',\n    );\n    return { tabs, indicator };\n  },\n\n  data () {\n    return {\n      provideObj: {\n        selected: '', // the currently displayed tab id\n        disabled: false, // disable group\n        size: 300,\n        kind: 'default',\n        outlined: false,\n        orientation: 'horizontal',\n        spread: 'none',\n        focusedTabId: null, // tracks last-focused tab for roving tabindex\n      },\n\n      tabItems: [],\n      TAB_LIST_SIZE_MODIFIERS,\n      TAB_LIST_KIND_MODIFIERS,\n      TAB_LIST_IMPORTANCE_MODIFIERS,\n      TAB_ORIENTATION_MODIFIERS,\n      TAB_SPREAD_MODIFIERS,\n    };\n  },\n\n  computed: {\n    resolvedTabsClass () {\n      return this.tabListClass ?? this.tabsClass;\n    },\n  },\n\n  watch: {\n    disabled: {\n      immediate: true,\n      handler () {\n        this.provideObj.disabled = this.disabled;\n      },\n    },\n\n    selected: {\n      immediate: true,\n      handler (newVal, oldVal) {\n        this.provideObj.selected = this.selected;\n        if (newVal !== oldVal) {\n          this.provideObj.focusedTabId = null;\n        }\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.provideObj.size = this.size;\n      },\n    },\n\n    kind: {\n      immediate: true,\n      handler () {\n        this.provideObj.kind = this.kind;\n      },\n    },\n\n    outlined: {\n      immediate: true,\n      handler () {\n        this.provideObj.outlined = this.outlined;\n      },\n    },\n\n    orientation: {\n      immediate: true,\n      handler () {\n        this.provideObj.orientation = this.orientation;\n      },\n    },\n\n    spread: {\n      immediate: true,\n      handler () {\n        this.provideObj.spread = this.spread;\n      },\n    },\n  },\n\n  mounted () {\n    this.updateSelected();\n  },\n\n  updated () {\n    this.updateSelected();\n  },\n\n  methods: {\n    updateSelected () {\n      /**\n       * Prevent override tab selected by default\n       */\n      if (!this.provideObj.selected) {\n        this.provideObj.selected = this.selected;\n      }\n      this.tabItems = this.getTabChildren();\n\n      // Clear stale focusedTabId if the focused tab was removed\n      if (this.provideObj.focusedTabId && !this.tabItems.some(t => t.tabId === this.provideObj.focusedTabId)) {\n        this.provideObj.focusedTabId = null;\n      }\n    },\n\n    setFocus (focusId) {\n      if (this.provideObj.focusedTabId !== focusId) {\n        this.provideObj.focusedTabId = focusId;\n      }\n    },\n\n    getTabChildren () {\n      const tabs = Array.from(this.$refs.tabs.querySelectorAll('[role=\"tab\"]'));\n      return tabs\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n            isSelected: el.getAttribute('aria-selected') === 'true',\n            isDisabled: el.getAttribute('aria-disabled') === 'true',\n          });\n        });\n    },\n\n    onChange () {\n      this.$emit('change', { ...this.provideObj });\n    },\n\n    tabLeft () {\n      if (this.orientation !== 'horizontal') return;\n      this.navigatePrevious();\n    },\n\n    tabRight () {\n      if (this.orientation !== 'horizontal') return;\n      this.navigateNext();\n    },\n\n    tabUp (event) {\n      if (this.orientation !== 'vertical') return;\n      event.preventDefault();\n      this.navigatePrevious();\n    },\n\n    tabDown (event) {\n      if (this.orientation !== 'vertical') return;\n      event.preventDefault();\n      this.navigateNext();\n    },\n\n    navigatePrevious () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const nextIndex = this.findNextTab(index, -1);\n      this.selectFocusOnTab(nextIndex);\n    },\n\n    navigateNext () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const nextIndex = this.findNextTab(index, 1);\n      this.selectFocusOnTab(nextIndex);\n    },\n\n    findNextTab (fromIndex, direction) {\n      const len = this.tabItems.length;\n      return (fromIndex + direction + len) % len;\n    },\n\n    transitionIndicator (panelId, newContext) {\n      if (!newContext || !this.showIndicatorTransition) {\n        this.provideObj.selected = panelId;\n        return;\n      }\n\n      const old = this.indicator.snapshot('[aria-selected=\"true\"]');\n\n      this.provideObj.selected = panelId;\n      if (!old) return;\n\n      this.$nextTick(() => {\n        let hideProps = { backgroundColor: 'transparent' };\n        let indicatorExtra = {};\n        let pseudoElement = '::after';\n\n        if (this.outlined) {\n          hideProps = { borderColor: 'transparent', backgroundColor: 'transparent' };\n          indicatorExtra = { boxShadow: `inset 0 0 0 ${old.style.borderWidth} ${old.style.borderColor}` };\n          pseudoElement = '::before';\n        } else if (this.kind === 'muted') {\n          indicatorExtra = { backgroundColor: old.style.backgroundColor };\n          pseudoElement = '::before';\n        }\n\n        this.indicator.animate({\n          oldRect: old.rect,\n          newEl: newContext,\n          orientation: this.orientation,\n          hideProps,\n          indicatorExtra,\n          pseudoElement,\n        });\n      });\n    },\n\n    selectFocusOnTab (index) {\n      const { context, panelId, isDisabled } = this.tabItems[index];\n      context.focus();\n      if (this.activationMode === 'auto' && !isDisabled) {\n        this.indicator.cancel();\n        this.provideObj.selected = panelId;\n        this.onChange();\n      }\n    },\n\n    selectTab (event) {\n      const tabEl = event.target.closest('[role=\"tab\"]');\n      const index = tabEl\n        ? this.tabItems.findIndex(t => t.context === tabEl)\n        : this.getFocusedTabIndex();\n\n      if (index === -1) return;\n      if (this.tabItems[index]?.isDisabled) return;\n      if (this.provideObj.selected === this.tabItems[index]?.panelId) return;\n\n      this.$emit('before-change', event);\n      if (event.defaultPrevented) return;\n\n      // Prevent keyboard defaults (Space scroll, Enter form submit)\n      // after confirming the tab change will proceed\n      event.preventDefault();\n\n      this.selectTabByIndex(index);\n      this.onChange();\n    },\n\n    selectTabByIndex (index) {\n      const { context, panelId } = this.tabItems[index];\n      this.transitionIndicator(panelId, context);\n      context.focus();\n    },\n\n    getFocusedTabIndex () {\n      const focusedId = this.provideObj.focusedTabId;\n      const index = this.tabItems.findIndex((context) =>\n        focusedId ? context.tabId === focusedId : context.isSelected,\n      );\n\n      return index === -1 ? 0 : index;\n    },\n\n    onHomeButton () {\n      if (this.tabItems.length) this.selectFocusOnTab(0);\n    },\n\n    onEndButton () {\n      if (this.tabItems.length) this.selectFocusOnTab(this.tabItems.length - 1);\n    },\n\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"tab-group.js","names":[],"sources":["../../../components/tab/tab_group.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-tab-group\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->\n    <div\n      ref=\"tabs\"\n      :class=\"[\n        'd-tablist',\n        TAB_LIST_SIZE_MODIFIERS[size],\n        {\n          [TAB_LIST_KIND_MODIFIERS.inverted]: inverted,\n          [TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: borderless,\n        },\n        tabListClass,\n      ]\"\n      v-bind=\"tabListChildProps\"\n      role=\"tablist\"\n      :aria-label=\"label\"\n      @keyup.left=\"tabLeft\"\n      @keyup.right=\"tabRight\"\n      @keyup.enter=\"selectTab\"\n      @keyup.space=\"selectTab\"\n      @click=\"selectTab\"\n      @keydown.home=\"onHomeButton\"\n      @keydown.end=\"onEndButton\"\n    >\n      <!-- @slot Slot for Tabs -->\n      <slot name=\"tabs\" />\n    </div>\n    <!-- @slot Default slot for Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport {\n  TAB_LIST_SIZES,\n  TAB_LIST_KIND_MODIFIERS,\n  TAB_LIST_IMPORTANCE_MODIFIERS,\n  TAB_LIST_SIZE_MODIFIERS,\n} from './tabs_constants';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTabGroup',\n\n  provide () {\n    return {\n      groupContext: this.provideObj,\n      setFocus: this.setFocus,\n    };\n  },\n\n  props: {\n    /**\n     * Identifies the tab group\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The id of the selected tab panel which should be displayed\n     */\n    selected: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * If true, disables the tab group\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies inverted styles to the tab group\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, applies borderless styles to the tab group\n     * @values true, false\n     */\n    borderless: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If provided, applies size styles to the tab group\n     * @values default, sm\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validate (size) {\n        return TAB_LIST_SIZES.includes(size);\n      },\n    },\n\n    /**\n     * Pass through classes, used to customize the tab list\n     */\n    tabListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through props, used to customize the tab list\n     */\n    tabListChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Change tab event with the arguments: selected id of the current tab and disabled value\n     *\n     * @event change\n     * @type {Object}\n     */\n    'change',\n\n    /**\n     * Before change tab event with the event argument, useful to perform validations and prevent changing tabs if neccessary.\n     *\n     * @event before-change\n     * @type {Event}\n     */\n    'before-change',\n  ],\n\n  data () {\n    return {\n      provideObj: {\n        selected: '', // the currently displayed tab id\n        disabled: false, // disable group\n      },\n\n      focusId: null,\n      tabs: [],\n      TAB_LIST_SIZE_MODIFIERS,\n      TAB_LIST_KIND_MODIFIERS,\n      TAB_LIST_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  watch: {\n    disabled: {\n      immediate: true,\n      handler () {\n        this.provideObj.disabled = this.disabled;\n      },\n    },\n\n    selected: {\n      immediate: true,\n      handler () {\n        this.provideObj.selected = this.selected;\n      },\n    },\n  },\n\n  mounted () {\n    this.updateSelected();\n  },\n\n  updated () {\n    this.updateSelected();\n  },\n\n  methods: {\n    updateSelected () {\n      /**\n       * Prevent override tab selected by default\n       */\n      if (!this.provideObj.selected) {\n        this.provideObj.selected = this.selected;\n      }\n      this.tabs = this.getTabChildren();\n    },\n\n    setFocus (focusId) {\n      this.focusId = focusId;\n    },\n\n    getTabChildren () {\n      const tabs = Array.from(this.$refs.tabs.querySelectorAll('.d-tab'));\n      return tabs\n        .map(el => {\n          return ({\n            context: el,\n            panelId: el.getAttribute('aria-controls')?.replace('dt-panel-', ''),\n            tabId: el.getAttribute('id')?.replace('dt-tab-', ''),\n            isSelected: el.getAttribute('aria-selected') === 'true',\n          });\n        });\n    },\n\n    onChange () {\n      this.$emit('change', { ...this.provideObj });\n    },\n\n    tabLeft () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index - 1 < 0 ? this.tabs.length - 1 : index - 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    tabRight () {\n      const index = this.getFocusedTabIndex();\n      if (index === -1) return;\n\n      const indexElement = index + 1 > this.tabs.length - 1 ? 0 : index + 1;\n      this.selectFocusOnTab(indexElement);\n    },\n\n    selectFocusOnTab (index) {\n      const { context } = this.tabs[index];\n      context.focus();\n    },\n\n    selectTab (event) {\n      if (this.isSameTabClicked()) return;\n\n      this.$emit('before-change', event);\n      if (event.defaultPrevented) return;\n\n      const index = this.getFocusedTabIndex();\n\n      this.selectTabByIndex(index);\n      this.onChange();\n    },\n\n    selectTabByIndex (index) {\n      const { context, panelId } = this.tabs[index];\n      this.provideObj.selected = panelId;\n      context.focus();\n    },\n\n    getFocusedTabIndex () {\n      // Hot fix https://github.com/dialpad/dialtone/pull/849\n      // The main issue is that this.tabs is not being updated at the time this is being triggered.\n\n      const index = this.tabs.findIndex((context) =>\n        this.focusId ? context.tabId === `${this.focusId}` : context.isSelected,\n      );\n\n      return index === -1 ? 0 : index;\n    },\n\n    onHomeButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[0]?.context?.focus();\n    },\n\n    onEndButton () {\n      if (this.tabs.length === 0) return;\n      this.tabs[this.tabs.length - 1]?.context?.focus();\n    },\n\n    isSameTabClicked () {\n      const tab = this.tabs[this.getFocusedTabIndex()];\n      return this.provideObj.selected === tab.panelId;\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/tab/tab.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../button/button.cjs`);let n=require(`vue`);var r={compatConfig:{MODE:3},name:`DtTab`,components:{DtButton:t.default},inject:[`groupContext`,`setFocus`],inheritAttrs:!1,props:{id:{type:String,required:!0},panelId:{type:String,required:!0},label:{type:String,default:``},selected:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabClass:{type:[String,Array,Object],default:``},labelClass:{type:[String,Array,Object],default:``},leadingClass:{type:[String,Array,Object],default:``},trailingClass:{type:[String,Array,Object],default:``}},emits:[`focus`,`click`],computed:{tabListeners(){return{click:e=>{this.$emit(`click`,e)},focus:e=>{this.setFocus(this.id),this.$emit(`focus`,e)}}},isDisabled(){return this.groupContext.disabled||this.disabled},buttonSize(){let e=this.groupContext.size;return e===`default`?void 0:e},isSelected(){return this.groupContext.selected===this.panelId},isFocusTarget(){let e=this.groupContext.focusedTabId;return e?e===this.id:this.isSelected},buttonKind(){return this.groupContext.outlined?this.groupContext.kind===`muted`?`muted`:`default`:this.groupContext.kind===`muted`?`muted`:this.isSelected?`default`:`muted`},buttonImportance(){return this.groupContext.outlined&&this.isSelected?`outlined`:`clear`},buttonActive(){return this.groupContext.outlined?!1:this.groupContext.kind===`muted`?this.isSelected:!1}},mounted(){this.selected&&(this.groupContext.selected=this.panelId)},beforeUnmount(){this.groupContext.focusedTabId===this.id&&this.setFocus(null)},methods:{}};function i(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`dt-button`);return(0,n.openBlock)(),(0,n.createBlock)(s,(0,n.mergeProps)({id:`dt-tab-${r.id}`,class:[`d-tablist__item`,r.tabClass,{"d-tablist__item--vertical":o.groupContext.orientation===`vertical`},{"d-btn--disabled":o.isDisabled},{"d-tab--is-selected":!o.groupContext.outlined&&o.groupContext.kind!==`muted`&&o.isSelected}],importance:o.buttonImportance,kind:o.buttonKind,active:o.buttonActive,size:o.buttonSize,role:`tab`,"aria-selected":`${o.isSelected}`,"aria-controls":`dt-panel-${r.panelId}`,"aria-label":r.label,"aria-disabled":o.isDisabled?`true`:void 0,"label-class":r.labelClass,"leading-class":r.leadingClass,"trailing-class":r.trailingClass,"data-qa":`dt-tab`,tabindex:o.isFocusTarget?`0`:`-1`},e.$attrs,(0,n.toHandlers)(o.tabListeners)),(0,n.createSlots)({default:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`default`)]),_:2},[e.$slots.startIcon?{name:`startIcon`,fn:(0,n.withCtx)(({iconSize:t})=>[(0,n.renderSlot)(e.$slots,`startIcon`,{iconSize:t})]),key:`0`}:e.$slots.icon?{name:`startIcon`,fn:(0,n.withCtx)(({iconSize:t})=>[(0,n.renderSlot)(e.$slots,`icon`,{iconSize:t})]),key:`1`}:void 0,e.$slots.endIcon?{name:`endIcon`,fn:(0,n.withCtx)(({iconSize:t})=>[(0,n.renderSlot)(e.$slots,`endIcon`,{iconSize:t})]),key:`2`}:void 0,e.$slots.leading?{name:`leading`,fn:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`leading`)]),key:`3`}:void 0,e.$slots.trailing?{name:`trailing`,fn:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`trailing`)]),key:`4`}:void 0]),1040,[`id`,`class`,`importance`,`kind`,`active`,`size`,`aria-selected`,`aria-controls`,`aria-label`,`aria-disabled`,`label-class`,`leading-class`,`trailing-class`,`tabindex`])}var a=e.t(r,[[`render`,i]]);exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../button/button.cjs`),n=require(`./tabs-constants.cjs`);let r=require(`vue`);var i={compatConfig:{MODE:3},name:`DtTab`,components:{DtButton:t.default},inject:[`groupContext`,`setFocus`],inheritAttrs:!1,props:{id:{type:String,required:!0},panelId:{type:String,required:!0},label:{type:String,default:``},selected:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabClass:{type:[String,Array,Object],default:``}},emits:[`focus`,`click`],data(){return{TAB_IMPORTANCE_MODIFIERS:n.TAB_IMPORTANCE_MODIFIERS}},computed:{tabListeners(){return{click:e=>{this.$emit(`click`,e)},focus:e=>{this.setFocus(this.id),this.$emit(`focus`,e)}}},isSelected(){return this.groupContext.selected===this.panelId}},mounted(){this.selected&&(this.groupContext.selected=this.panelId)}};function a(e,t,n,i,a,o){let s=(0,r.resolveComponent)(`dt-button`);return(0,r.openBlock)(),(0,r.createBlock)(s,(0,r.mergeProps)({id:`dt-tab-${n.id}`,class:[`d-tab`,{[a.TAB_IMPORTANCE_MODIFIERS.selected]:o.isSelected},n.tabClass],role:`tab`,"aria-selected":`${o.isSelected}`,"aria-controls":`dt-panel-${n.panelId}`,"aria-label":n.label,"data-qa":`dt-tab`,tabindex:o.isSelected?`0`:`-1`,disabled:o.groupContext.disabled||n.disabled},e.$attrs,(0,r.toHandlers)(o.tabListeners)),{default:(0,r.withCtx)(()=>[(0,r.renderSlot)(e.$slots,`default`)]),_:3},16,[`id`,`class`,`aria-selected`,`aria-controls`,`aria-label`,`tabindex`,`disabled`])}var o=e.t(i,[[`render`,a]]);exports.default=o;
 //# sourceMappingURL=tab.cjs.map

package/dist/lib/tab/tab.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab.cjs","names":[],"sources":["../../../components/tab/tab.vue"],"sourcesContent":["<template>\n  <dt-button\n    :id=\"`dt-tab-${id}`\"\n    :class=\"[\n      'd-tablist__item',\n      tabClass,\n      { 'd-tablist__item--vertical': groupContext.orientation === 'vertical' },\n      { 'd-btn--disabled': isDisabled },\n      { 'd-tab--is-selected': !groupContext.outlined && groupContext.kind !== 'muted' && isSelected },\n    ]\"\n    :importance=\"buttonImportance\"\n    :kind=\"buttonKind\"\n    :active=\"buttonActive\"\n    :size=\"buttonSize\"\n    role=\"tab\"\n    :aria-selected=\"`${isSelected}`\"\n    :aria-controls=\"`dt-panel-${panelId}`\"\n    :aria-label=\"label\"\n    :aria-disabled=\"isDisabled ? 'true' : undefined\"\n    :label-class=\"labelClass\"\n    :leading-class=\"leadingClass\"\n    :trailing-class=\"trailingClass\"\n    data-qa=\"dt-tab\"\n    :tabindex=\"isFocusTarget ? '0' : '-1'\"\n    v-bind=\"$attrs\"\n    v-on=\"tabListeners\"\n  >\n    <!-- @slot Icon displayed at the start (left in LTR) of the tab -->\n    <template\n      v-if=\"$slots.startIcon\"\n      #startIcon=\"{ iconSize }\"\n    >\n      <slot\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </template>\n    <!-- @slot @deprecated Use startIcon -->\n    <template\n      v-else-if=\"$slots.icon\"\n      #startIcon=\"{ iconSize }\"\n    >\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </template>\n    <!-- @slot Icon displayed at the end (right in LTR) of the tab -->\n    <template\n      v-if=\"$slots.endIcon\"\n      #endIcon=\"{ iconSize }\"\n    >\n      <slot\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </template>\n    <template\n      v-if=\"$slots.leading\"\n      #leading\n    >\n      <slot name=\"leading\" />\n    </template>\n    <template\n      v-if=\"$slots.trailing\"\n      #trailing\n    >\n      <slot name=\"trailing\" />\n    </template>\n    <!-- @slot default slot, defaults contains dt-button -->\n    <slot />\n  </dt-button>\n</template>\n\n<script>\nimport { DtButton } from '../button';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTab',\n  components: {\n    DtButton,\n  },\n\n  inject: ['groupContext', 'setFocus'],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the tab\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated content panel\n     */\n    panelId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Describes the tab\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls the state of the tab\n     * @values true, false\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, disables the tab\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the leading container\n     */\n    leadingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the trailing container\n     */\n    trailingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    tabListeners () {\n      return {\n        click: event => {\n          this.$emit('click', event);\n        },\n\n        focus: event => {\n          this.setFocus(this.id);\n          this.$emit('focus', event);\n        },\n      };\n    },\n\n    isDisabled () {\n      return this.groupContext.disabled || this.disabled;\n    },\n\n    buttonSize () {\n      const size = this.groupContext.size;\n      return size === 'default' ? undefined : size;\n    },\n\n    isSelected () {\n      return this.groupContext.selected === this.panelId;\n    },\n\n    isFocusTarget () {\n      const focusedId = this.groupContext.focusedTabId;\n      return focusedId ? focusedId === this.id : this.isSelected;\n    },\n\n    buttonKind () {\n      if (this.groupContext.outlined) {\n        return this.groupContext.kind === 'muted' ? 'muted' : 'default';\n      }\n      if (this.groupContext.kind === 'muted') {\n        return 'muted';\n      }\n      return this.isSelected ? 'default' : 'muted';\n    },\n\n    buttonImportance () {\n      if (this.groupContext.outlined && this.isSelected) {\n        return 'outlined';\n      }\n      return 'clear';\n    },\n\n    buttonActive () {\n      if (this.groupContext.outlined) {\n        return false;\n      }\n      if (this.groupContext.kind === 'muted') {\n        return this.isSelected;\n      }\n      return false;\n    },\n  },\n\n  mounted () {\n    if (this.selected) {\n      this.groupContext.selected = this.panelId;\n    }\n  },\n\n  beforeUnmount () {\n    if (this.groupContext.focusedTabId === this.id) {\n      this.setFocus(null);\n    }\n  },\n\n  methods: {\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"tab.cjs","names":[],"sources":["../../../components/tab/tab.vue"],"sourcesContent":["<template>\n  <dt-button\n    :id=\"`dt-tab-${id}`\"\n    :class=\"[\n      'd-tab',\n      {\n        [TAB_IMPORTANCE_MODIFIERS.selected]: isSelected,\n      },\n      tabClass,\n    ]\"\n    role=\"tab\"\n    :aria-selected=\"`${isSelected}`\"\n    :aria-controls=\"`dt-panel-${panelId}`\"\n    :aria-label=\"label\"\n    data-qa=\"dt-tab\"\n    :tabindex=\"isSelected ? '0' : '-1'\"\n    :disabled=\"groupContext.disabled || disabled\"\n    v-bind=\"$attrs\"\n    v-on=\"tabListeners\"\n  >\n    <!-- @slot default slot, defaults contains dt-button -->\n    <slot />\n  </dt-button>\n</template>\n\n<script>\nimport { TAB_IMPORTANCE_MODIFIERS } from './tabs_constants';\nimport { DtButton } from '../button';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTab',\n  components: {\n    DtButton,\n  },\n\n  inject: ['groupContext', 'setFocus'],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the tab\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated content panel\n     */\n    panelId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Describes the tab\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls the state of the tab\n     * @values true, false\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, disables the tab\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      TAB_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  computed: {\n    tabListeners () {\n      return {\n        click: event => {\n          this.$emit('click', event);\n        },\n\n        focus: event => {\n          this.setFocus(this.id);\n          this.$emit('focus', event);\n        },\n      };\n    },\n\n    isSelected () {\n      return this.groupContext.selected === this.panelId;\n    },\n  },\n\n  mounted () {\n    if (this.selected) {\n      this.groupContext.selected = this.panelId;\n    }\n  },\n};\n</script>\n"],"mappings":"4RAiCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,QACN,WAAY,CACV,SAAA,EAAA,QACD,CAED,OAAQ,CAAC,eAAgB,WAAW,CAEpC,aAAc,GAEd,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,GACX,CAKD,QAAS,CACP,KAAM,OACN,SAAU,GACX,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CACF,CAED,MAAO,CAOL,QAQA,QACD,CAED,MAAQ,CACN,MAAO,CACL,yBAAA,EAAA,yBACD,EAGH,SAAU,CACR,cAAgB,CACd,MAAO,CACL,MAAO,GAAS,CACd,KAAK,MAAM,QAAS,EAAM,EAG5B,MAAO,GAAS,CACd,KAAK,SAAS,KAAK,GAAG,CACtB,KAAK,MAAM,QAAS,EAAM,EAE7B,EAGH,YAAc,CACZ,OAAO,KAAK,aAAa,WAAa,KAAK,SAE9C,CAED,SAAW,CACL,KAAK,WACP,KAAK,aAAa,SAAW,KAAK,UAGvC,6GA1Ha,GAAA,EAAA,EAAA,YAAA,CApBT,GAAE,UAAY,EAAA,KACd,MAAK,WAAoC,EAAA,yBAAyB,UAAW,EAAA,WAAA,CAA2B,EAAA,UAOzG,KAAK,MACJ,gBAAa,GAAK,EAAA,aAClB,gBAAa,YAAc,EAAA,UAC3B,aAAY,EAAA,MACb,UAAQ,SACP,SAAU,EAAA,WAAU,IAAA,KACpB,SAAU,EAAA,aAAa,UAAY,EAAA,UAC5B,EAAA,QAAA,EAAA,EAAA,YACW,EAAb,aAAY,CAAA,CAAA,2BAGV,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA"}

package/dist/lib/tab/tab.js

@@ -1,6 +1,7 @@
 import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import t from "../button/button.js";
-import { createBlock as n, createSlots as r, mergeProps as i, openBlock as a, renderSlot as o, resolveComponent as s, toHandlers as c, withCtx as l } from "vue";
+import { TAB_IMPORTANCE_MODIFIERS as n } from "./tabs-constants.js";
+import { createBlock as r, mergeProps as i, openBlock as a, renderSlot as o, resolveComponent as s, toHandlers as c, withCtx as l } from "vue";
 //#region components/tab/tab.vue
 var u = {
 	compatConfig: { MODE: 3 },
@@ -36,33 +37,12 @@ var u = {
 				Object
 			],
 			default: ""
-		},
-		labelClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		leadingClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		trailingClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
 		}
 	},
 	emits: ["focus", "click"],
+	data() {
+		return { TAB_IMPORTANCE_MODIFIERS: n };
+	},
 	computed: {
 		tabListeners() {
 			return {
@@ -74,106 +54,41 @@ var u = {
 				}
 			};
 		},
-		isDisabled() {
-			return this.groupContext.disabled || this.disabled;
-		},
-		buttonSize() {
-			let e = this.groupContext.size;
-			return e === "default" ? void 0 : e;
-		},
 		isSelected() {
 			return this.groupContext.selected === this.panelId;
-		},
-		isFocusTarget() {
-			let e = this.groupContext.focusedTabId;
-			return e ? e === this.id : this.isSelected;
-		},
-		buttonKind() {
-			return this.groupContext.outlined ? this.groupContext.kind === "muted" ? "muted" : "default" : this.groupContext.kind === "muted" ? "muted" : this.isSelected ? "default" : "muted";
-		},
-		buttonImportance() {
-			return this.groupContext.outlined && this.isSelected ? "outlined" : "clear";
-		},
-		buttonActive() {
-			return this.groupContext.outlined ? !1 : this.groupContext.kind === "muted" ? this.isSelected : !1;
 		}
 	},
 	mounted() {
 		this.selected && (this.groupContext.selected = this.panelId);
-	},
-	beforeUnmount() {
-		this.groupContext.focusedTabId === this.id && this.setFocus(null);
-	},
-	methods: {}
+	}
 };
-function d(e, t, u, d, f, p) {
-	let m = s("dt-button");
-	return a(), n(m, i({
-		id: `dt-tab-${u.id}`,
+function d(e, t, n, u, d, f) {
+	let p = s("dt-button");
+	return a(), r(p, i({
+		id: `dt-tab-${n.id}`,
 		class: [
-			"d-tablist__item",
-			u.tabClass,
-			{ "d-tablist__item--vertical": p.groupContext.orientation === "vertical" },
-			{ "d-btn--disabled": p.isDisabled },
-			{ "d-tab--is-selected": !p.groupContext.outlined && p.groupContext.kind !== "muted" && p.isSelected }
+			"d-tab",
+			{ [d.TAB_IMPORTANCE_MODIFIERS.selected]: f.isSelected },
+			n.tabClass
 		],
-		importance: p.buttonImportance,
-		kind: p.buttonKind,
-		active: p.buttonActive,
-		size: p.buttonSize,
 		role: "tab",
-		"aria-selected": `${p.isSelected}`,
-		"aria-controls": `dt-panel-${u.panelId}`,
-		"aria-label": u.label,
-		"aria-disabled": p.isDisabled ? "true" : void 0,
-		"label-class": u.labelClass,
-		"leading-class": u.leadingClass,
-		"trailing-class": u.trailingClass,
+		"aria-selected": `${f.isSelected}`,
+		"aria-controls": `dt-panel-${n.panelId}`,
+		"aria-label": n.label,
 		"data-qa": "dt-tab",
-		tabindex: p.isFocusTarget ? "0" : "-1"
-	}, e.$attrs, c(p.tabListeners)), r({
+		tabindex: f.isSelected ? "0" : "-1",
+		disabled: f.groupContext.disabled || n.disabled
+	}, e.$attrs, c(f.tabListeners)), {
 		default: l(() => [o(e.$slots, "default")]),
-		_: 2
-	}, [
-		e.$slots.startIcon ? {
-			name: "startIcon",
-			fn: l(({ iconSize: t }) => [o(e.$slots, "startIcon", { iconSize: t })]),
-			key: "0"
-		} : e.$slots.icon ? {
-			name: "startIcon",
-			fn: l(({ iconSize: t }) => [o(e.$slots, "icon", { iconSize: t })]),
-			key: "1"
-		} : void 0,
-		e.$slots.endIcon ? {
-			name: "endIcon",
-			fn: l(({ iconSize: t }) => [o(e.$slots, "endIcon", { iconSize: t })]),
-			key: "2"
-		} : void 0,
-		e.$slots.leading ? {
-			name: "leading",
-			fn: l(() => [o(e.$slots, "leading")]),
-			key: "3"
-		} : void 0,
-		e.$slots.trailing ? {
-			name: "trailing",
-			fn: l(() => [o(e.$slots, "trailing")]),
-			key: "4"
-		} : void 0
-	]), 1040, [
+		_: 3
+	}, 16, [
 		"id",
 		"class",
-		"importance",
-		"kind",
-		"active",
-		"size",
 		"aria-selected",
 		"aria-controls",
 		"aria-label",
-		"aria-disabled",
-		"label-class",
-		"leading-class",
-		"trailing-class",
-		"tabindex"
+		"tabindex",
+		"disabled"
 	]);
 }
 var f = /* @__PURE__ */ e(u, [["render", d]]);

package/dist/lib/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","names":[],"sources":["../../../components/tab/tab.vue"],"sourcesContent":["<template>\n  <dt-button\n    :id=\"`dt-tab-${id}`\"\n    :class=\"[\n      'd-tablist__item',\n      tabClass,\n      { 'd-tablist__item--vertical': groupContext.orientation === 'vertical' },\n      { 'd-btn--disabled': isDisabled },\n      { 'd-tab--is-selected': !groupContext.outlined && groupContext.kind !== 'muted' && isSelected },\n    ]\"\n    :importance=\"buttonImportance\"\n    :kind=\"buttonKind\"\n    :active=\"buttonActive\"\n    :size=\"buttonSize\"\n    role=\"tab\"\n    :aria-selected=\"`${isSelected}`\"\n    :aria-controls=\"`dt-panel-${panelId}`\"\n    :aria-label=\"label\"\n    :aria-disabled=\"isDisabled ? 'true' : undefined\"\n    :label-class=\"labelClass\"\n    :leading-class=\"leadingClass\"\n    :trailing-class=\"trailingClass\"\n    data-qa=\"dt-tab\"\n    :tabindex=\"isFocusTarget ? '0' : '-1'\"\n    v-bind=\"$attrs\"\n    v-on=\"tabListeners\"\n  >\n    <!-- @slot Icon displayed at the start (left in LTR) of the tab -->\n    <template\n      v-if=\"$slots.startIcon\"\n      #startIcon=\"{ iconSize }\"\n    >\n      <slot\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </template>\n    <!-- @slot @deprecated Use startIcon -->\n    <template\n      v-else-if=\"$slots.icon\"\n      #startIcon=\"{ iconSize }\"\n    >\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </template>\n    <!-- @slot Icon displayed at the end (right in LTR) of the tab -->\n    <template\n      v-if=\"$slots.endIcon\"\n      #endIcon=\"{ iconSize }\"\n    >\n      <slot\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </template>\n    <template\n      v-if=\"$slots.leading\"\n      #leading\n    >\n      <slot name=\"leading\" />\n    </template>\n    <template\n      v-if=\"$slots.trailing\"\n      #trailing\n    >\n      <slot name=\"trailing\" />\n    </template>\n    <!-- @slot default slot, defaults contains dt-button -->\n    <slot />\n  </dt-button>\n</template>\n\n<script>\nimport { DtButton } from '../button';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTab',\n  components: {\n    DtButton,\n  },\n\n  inject: ['groupContext', 'setFocus'],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the tab\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated content panel\n     */\n    panelId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Describes the tab\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls the state of the tab\n     * @values true, false\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, disables the tab\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the leading container\n     */\n    leadingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the trailing container\n     */\n    trailingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    tabListeners () {\n      return {\n        click: event => {\n          this.$emit('click', event);\n        },\n\n        focus: event => {\n          this.setFocus(this.id);\n          this.$emit('focus', event);\n        },\n      };\n    },\n\n    isDisabled () {\n      return this.groupContext.disabled || this.disabled;\n    },\n\n    buttonSize () {\n      const size = this.groupContext.size;\n      return size === 'default' ? undefined : size;\n    },\n\n    isSelected () {\n      return this.groupContext.selected === this.panelId;\n    },\n\n    isFocusTarget () {\n      const focusedId = this.groupContext.focusedTabId;\n      return focusedId ? focusedId === this.id : this.isSelected;\n    },\n\n    buttonKind () {\n      if (this.groupContext.outlined) {\n        return this.groupContext.kind === 'muted' ? 'muted' : 'default';\n      }\n      if (this.groupContext.kind === 'muted') {\n        return 'muted';\n      }\n      return this.isSelected ? 'default' : 'muted';\n    },\n\n    buttonImportance () {\n      if (this.groupContext.outlined && this.isSelected) {\n        return 'outlined';\n      }\n      return 'clear';\n    },\n\n    buttonActive () {\n      if (this.groupContext.outlined) {\n        return false;\n      }\n      if (this.groupContext.kind === 'muted') {\n        return this.isSelected;\n      }\n      return false;\n    },\n  },\n\n  mounted () {\n    if (this.selected) {\n      this.groupContext.selected = this.panelId;\n    }\n  },\n\n  beforeUnmount () {\n    if (this.groupContext.focusedTabId === this.id) {\n      this.setFocus(null);\n    }\n  },\n\n  methods: {\n  },\n};\n</script>\n"],"mappings":";;;;AAiFA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CACN,YAAY,EACV,UAAA,GACD;CAED,QAAQ,CAAC,gBAAgB,WAAW;CAEpC,cAAc;CAEd,OAAO;EAIL,IAAI;GACF,MAAM;GACN,UAAU;GACX;EAKD,SAAS;GACP,MAAM;GACN,UAAU;GACX;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,eAAe;GACb,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EACF;CAED,OAAO,CAOL,SAQA,QACD;CAED,UAAU;EACR,eAAgB;AACd,UAAO;IACL,QAAO,MAAS;AACd,UAAK,MAAM,SAAS,EAAM;;IAG5B,QAAO,MAAS;AAEd,KADA,KAAK,SAAS,KAAK,GAAG,EACtB,KAAK,MAAM,SAAS,EAAM;;IAE7B;;EAGH,aAAc;AACZ,UAAO,KAAK,aAAa,YAAY,KAAK;;EAG5C,aAAc;GACZ,IAAM,IAAO,KAAK,aAAa;AAC/B,UAAO,MAAS,YAAY,KAAA,IAAY;;EAG1C,aAAc;AACZ,UAAO,KAAK,aAAa,aAAa,KAAK;;EAG7C,gBAAiB;GACf,IAAM,IAAY,KAAK,aAAa;AACpC,UAAO,IAAY,MAAc,KAAK,KAAK,KAAK;;EAGlD,aAAc;AAOZ,UANI,KAAK,aAAa,WACb,KAAK,aAAa,SAAS,UAAU,UAAU,YAEpD,KAAK,aAAa,SAAS,UACtB,UAEF,KAAK,aAAa,YAAY;;EAGvC,mBAAoB;AAIlB,UAHI,KAAK,aAAa,YAAY,KAAK,aAC9B,aAEF;;EAGT,eAAgB;AAOd,UANI,KAAK,aAAa,WACb,KAEL,KAAK,aAAa,SAAS,UACtB,KAAK,aAEP;;EAEV;CAED,UAAW;AACT,EAAI,KAAK,aACP,KAAK,aAAa,WAAW,KAAK;;CAItC,gBAAiB;AACf,EAAI,KAAK,aAAa,iBAAiB,KAAK,MAC1C,KAAK,SAAS,KAAK;;CAIvB,SAAS,EACR;CACF;;;aAnQC,EAsEY,GAtEZ,EAsEY;EArET,IAAE,UAAY,EAAA;EACd,OAAK;;GAAmC,EAAA;kCAA+C,EAAA,aAAa,gBAAW,YAAA;wBAA8C,EAAA,YAAU;4BAAmC,EAAA,aAAa,YAAY,EAAA,aAAa,SAAI,WAAgB,EAAA,YAAU;;EAO9Q,YAAY,EAAA;EACZ,MAAM,EAAA;EACN,QAAQ,EAAA;EACR,MAAM,EAAA;EACP,MAAK;EACJ,iBAAa,GAAK,EAAA;EAClB,iBAAa,YAAc,EAAA;EAC3B,cAAY,EAAA;EACZ,iBAAe,EAAA,aAAU,SAAY,KAAA;EACrC,eAAa,EAAA;EACb,iBAAe,EAAA;EACf,kBAAgB,EAAA;EACjB,WAAQ;EACP,UAAU,EAAA,gBAAa,MAAA;IAChB,EAAA,QACR,EAAmB,EAAb,aAAY,CAAA,EAAA,EAAA;mBA6CV,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA;;;EAzCA,EAAA,OAAO,YAAA;SACZ;UAKC,EALY,kBAAQ,CAEtB,EAGE,EAAA,QAAA,aAAA,EADY,aAAQ,CAAA,CAAA,CAAA;;MAKX,EAAA,OAAO,OAAA;SACjB;UAKC,EALY,kBAAQ,CAEtB,EAGE,EAAA,QAAA,QAAA,EADY,aAAQ,CAAA,CAAA,CAAA;;;EAKhB,EAAA,OAAO,UAAA;SACZ;UAKC,EALU,kBAAQ,CAEpB,EAGE,EAAA,QAAA,WAAA,EADY,aAAQ,CAAA,CAAA,CAAA;;;EAIhB,EAAA,OAAO,UAAA;SACZ;eAEsB,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA;;;EAGjB,EAAA,OAAO,WAAA;SACZ;eAEuB,CAAxB,EAAwB,EAAA,QAAA,WAAA,CAAA,CAAA"}
+{"version":3,"file":"tab.js","names":[],"sources":["../../../components/tab/tab.vue"],"sourcesContent":["<template>\n  <dt-button\n    :id=\"`dt-tab-${id}`\"\n    :class=\"[\n      'd-tab',\n      {\n        [TAB_IMPORTANCE_MODIFIERS.selected]: isSelected,\n      },\n      tabClass,\n    ]\"\n    role=\"tab\"\n    :aria-selected=\"`${isSelected}`\"\n    :aria-controls=\"`dt-panel-${panelId}`\"\n    :aria-label=\"label\"\n    data-qa=\"dt-tab\"\n    :tabindex=\"isSelected ? '0' : '-1'\"\n    :disabled=\"groupContext.disabled || disabled\"\n    v-bind=\"$attrs\"\n    v-on=\"tabListeners\"\n  >\n    <!-- @slot default slot, defaults contains dt-button -->\n    <slot />\n  </dt-button>\n</template>\n\n<script>\nimport { TAB_IMPORTANCE_MODIFIERS } from './tabs_constants';\nimport { DtButton } from '../button';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtTab',\n  components: {\n    DtButton,\n  },\n\n  inject: ['groupContext', 'setFocus'],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the tab\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated content panel\n     */\n    panelId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Describes the tab\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls the state of the tab\n     * @values true, false\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If true, disables the tab\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      TAB_IMPORTANCE_MODIFIERS,\n    };\n  },\n\n  computed: {\n    tabListeners () {\n      return {\n        click: event => {\n          this.$emit('click', event);\n        },\n\n        focus: event => {\n          this.setFocus(this.id);\n          this.$emit('focus', event);\n        },\n      };\n    },\n\n    isSelected () {\n      return this.groupContext.selected === this.panelId;\n    },\n  },\n\n  mounted () {\n    if (this.selected) {\n      this.groupContext.selected = this.panelId;\n    }\n  },\n};\n</script>\n"],"mappings":";;;;;AAiCA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CACN,YAAY,EACV,UAAA,GACD;CAED,QAAQ,CAAC,gBAAgB,WAAW;CAEpC,cAAc;CAEd,OAAO;EAIL,IAAI;GACF,MAAM;GACN,UAAU;GACX;EAKD,SAAS;GACP,MAAM;GACN,UAAU;GACX;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EACF;CAED,OAAO,CAOL,SAQA,QACD;CAED,OAAQ;AACN,SAAO,EACL,6BACD;;CAGH,UAAU;EACR,eAAgB;AACd,UAAO;IACL,QAAO,MAAS;AACd,UAAK,MAAM,SAAS,EAAM;;IAG5B,QAAO,MAAS;AAEd,KADA,KAAK,SAAS,KAAK,GAAG,EACtB,KAAK,MAAM,SAAS,EAAM;;IAE7B;;EAGH,aAAc;AACZ,UAAO,KAAK,aAAa,aAAa,KAAK;;EAE9C;CAED,UAAW;AACT,EAAI,KAAK,aACP,KAAK,aAAa,WAAW,KAAK;;CAGvC;;;aA/IC,EAqBY,GArBZ,EAqBY;EApBT,IAAE,UAAY,EAAA;EACd,OAAK;;MAAoC,EAAA,yBAAyB,WAAW,EAAA,YAAA;GAA2B,EAAA;;EAOzG,MAAK;EACJ,iBAAa,GAAK,EAAA;EAClB,iBAAa,YAAc,EAAA;EAC3B,cAAY,EAAA;EACb,WAAQ;EACP,UAAU,EAAA,aAAU,MAAA;EACpB,UAAU,EAAA,aAAa,YAAY,EAAA;IAC5B,EAAA,QACR,EAAmB,EAAb,aAAY,CAAA,EAAA;mBAGV,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/lib/tab/tabs-constants.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[`100`,`200`,`300`,`400`,`500`,`default`,`xs`,`sm`,`md`,`lg`,`xl`],t={100:`d-tablist--xs`,200:`d-tablist--sm`,300:``,400:`d-tablist--lg`,500:`d-tablist--xl`,xs:`d-tablist--xs`,sm:`d-tablist--sm`,md:``,lg:`d-tablist--lg`,xl:`d-tablist--xl`,default:``},n={inverted:`d-tablist--inverted`},r={borderless:`d-tablist--no-border`},i=[`horizontal`,`vertical`],a={vertical:`d-tablist--vertical`},o=[`auto`,`manual`],s=[`default`,`muted`],c=[`none`,`grow`,`equal`],l={grow:`d-tablist--spread-grow`,equal:`d-tablist--spread-equal`};exports.TAB_ACTIVATION_MODES=o,exports.TAB_GROUP_KINDS=s,exports.TAB_LIST_IMPORTANCE_MODIFIERS=r,exports.TAB_LIST_KIND_MODIFIERS=n,exports.TAB_LIST_SIZES=e,exports.TAB_LIST_SIZE_MODIFIERS=t,exports.TAB_ORIENTATIONS=i,exports.TAB_ORIENTATION_MODIFIERS=a,exports.TAB_SPREADS=c,exports.TAB_SPREAD_MODIFIERS=l;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=[`default`,`sm`],t={sm:`d-tablist--sm`},n={inverted:`d-tablist--inverted`},r={borderless:`d-tablist--no-border`},i={selected:`d-tab--selected`};exports.TAB_IMPORTANCE_MODIFIERS=i,exports.TAB_LIST_IMPORTANCE_MODIFIERS=r,exports.TAB_LIST_KIND_MODIFIERS=n,exports.TAB_LIST_SIZES=e,exports.TAB_LIST_SIZE_MODIFIERS=t;
 //# sourceMappingURL=tabs-constants.cjs.map

package/dist/lib/tab/tabs-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-constants.cjs","names":[],"sources":["../../../components/tab/tabs_constants.js"],"sourcesContent":["export const TAB_LIST_SIZES = ['100', '200', '300', '400', '500', 'default', 'xs', 'sm', 'md', 'lg', 'xl'];\n\nexport const TAB_LIST_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-tablist--xs',\n  200: 'd-tablist--sm',\n  300: '',\n  400: 'd-tablist--lg',\n  500: 'd-tablist--xl',\n  // T-shirt aliases (deprecated)\n  xs: 'd-tablist--xs',\n  sm: 'd-tablist--sm',\n  md: '',\n  lg: 'd-tablist--lg',\n  xl: 'd-tablist--xl',\n  // Legacy alias\n  default: '',\n};\n\nexport const TAB_LIST_KIND_MODIFIERS = {\n  inverted: 'd-tablist--inverted',\n};\n\nexport const TAB_LIST_IMPORTANCE_MODIFIERS = {\n  borderless: 'd-tablist--no-border',\n};\n\nexport const TAB_ORIENTATIONS = ['horizontal', 'vertical'];\n\nexport const TAB_ORIENTATION_MODIFIERS = {\n  vertical: 'd-tablist--vertical',\n};\n\nexport const TAB_ACTIVATION_MODES = ['auto', 'manual'];\n\nexport const TAB_GROUP_KINDS = ['default', 'muted'];\n\nexport const TAB_SPREADS = ['none', 'grow', 'equal'];\n\nexport const TAB_SPREAD_MODIFIERS = {\n  grow: 'd-tablist--spread-grow',\n  equal: 'd-tablist--spread-equal',\n};\n"],"mappings":"mEAAA,IAAa,EAAiB,CAAC,MAAO,MAAO,MAAO,MAAO,MAAO,UAAW,KAAM,KAAM,KAAM,KAAM,KAAK,CAE7F,EAA0B,CAErC,IAAK,gBACL,IAAK,gBACL,IAAK,GACL,IAAK,gBACL,IAAK,gBAEL,GAAI,gBACJ,GAAI,gBACJ,GAAI,GACJ,GAAI,gBACJ,GAAI,gBAEJ,QAAS,GACV,CAEY,EAA0B,CACrC,SAAU,sBACX,CAEY,EAAgC,CAC3C,WAAY,uBACb,CAEY,EAAmB,CAAC,aAAc,WAAW,CAE7C,EAA4B,CACvC,SAAU,sBACX,CAEY,EAAuB,CAAC,OAAQ,SAAS,CAEzC,EAAkB,CAAC,UAAW,QAAQ,CAEtC,EAAc,CAAC,OAAQ,OAAQ,QAAQ,CAEvC,EAAuB,CAClC,KAAM,yBACN,MAAO,0BACR"}
+{"version":3,"file":"tabs-constants.cjs","names":[],"sources":["../../../components/tab/tabs_constants.js"],"sourcesContent":["export const TAB_LIST_SIZES = ['default', 'sm'];\n\nexport const TAB_LIST_SIZE_MODIFIERS = {\n  sm: 'd-tablist--sm',\n};\n\nexport const TAB_LIST_KIND_MODIFIERS = {\n  inverted: 'd-tablist--inverted',\n};\n\nexport const TAB_LIST_IMPORTANCE_MODIFIERS = {\n  borderless: 'd-tablist--no-border',\n};\n\nexport const TAB_IMPORTANCE_MODIFIERS = {\n  selected: 'd-tab--selected',\n};\n"],"mappings":"mEAAA,IAAa,EAAiB,CAAC,UAAW,KAAK,CAElC,EAA0B,CACrC,GAAI,gBACL,CAEY,EAA0B,CACrC,SAAU,sBACX,CAEY,EAAgC,CAC3C,WAAY,uBACb,CAEY,EAA2B,CACtC,SAAU,kBACX"}

package/dist/lib/tab/tabs-constants.js

@@ -1,37 +1,6 @@
 //#region components/tab/tabs_constants.js
-var e = [
-	"100",
-	"200",
-	"300",
-	"400",
-	"500",
-	"default",
-	"xs",
-	"sm",
-	"md",
-	"lg",
-	"xl"
-], t = {
-	100: "d-tablist--xs",
-	200: "d-tablist--sm",
-	300: "",
-	400: "d-tablist--lg",
-	500: "d-tablist--xl",
-	xs: "d-tablist--xs",
-	sm: "d-tablist--sm",
-	md: "",
-	lg: "d-tablist--lg",
-	xl: "d-tablist--xl",
-	default: ""
-}, n = { inverted: "d-tablist--inverted" }, r = { borderless: "d-tablist--no-border" }, i = ["horizontal", "vertical"], a = { vertical: "d-tablist--vertical" }, o = ["auto", "manual"], s = ["default", "muted"], c = [
-	"none",
-	"grow",
-	"equal"
-], l = {
-	grow: "d-tablist--spread-grow",
-	equal: "d-tablist--spread-equal"
-};
+var e = ["default", "sm"], t = { sm: "d-tablist--sm" }, n = { inverted: "d-tablist--inverted" }, r = { borderless: "d-tablist--no-border" }, i = { selected: "d-tab--selected" };
 //#endregion
-export { o as TAB_ACTIVATION_MODES, s as TAB_GROUP_KINDS, r as TAB_LIST_IMPORTANCE_MODIFIERS, n as TAB_LIST_KIND_MODIFIERS, e as TAB_LIST_SIZES, t as TAB_LIST_SIZE_MODIFIERS, i as TAB_ORIENTATIONS, a as TAB_ORIENTATION_MODIFIERS, c as TAB_SPREADS, l as TAB_SPREAD_MODIFIERS };
+export { i as TAB_IMPORTANCE_MODIFIERS, r as TAB_LIST_IMPORTANCE_MODIFIERS, n as TAB_LIST_KIND_MODIFIERS, e as TAB_LIST_SIZES, t as TAB_LIST_SIZE_MODIFIERS };
 
 //# sourceMappingURL=tabs-constants.js.map

package/dist/lib/tab/tabs-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-constants.js","names":[],"sources":["../../../components/tab/tabs_constants.js"],"sourcesContent":["export const TAB_LIST_SIZES = ['100', '200', '300', '400', '500', 'default', 'xs', 'sm', 'md', 'lg', 'xl'];\n\nexport const TAB_LIST_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-tablist--xs',\n  200: 'd-tablist--sm',\n  300: '',\n  400: 'd-tablist--lg',\n  500: 'd-tablist--xl',\n  // T-shirt aliases (deprecated)\n  xs: 'd-tablist--xs',\n  sm: 'd-tablist--sm',\n  md: '',\n  lg: 'd-tablist--lg',\n  xl: 'd-tablist--xl',\n  // Legacy alias\n  default: '',\n};\n\nexport const TAB_LIST_KIND_MODIFIERS = {\n  inverted: 'd-tablist--inverted',\n};\n\nexport const TAB_LIST_IMPORTANCE_MODIFIERS = {\n  borderless: 'd-tablist--no-border',\n};\n\nexport const TAB_ORIENTATIONS = ['horizontal', 'vertical'];\n\nexport const TAB_ORIENTATION_MODIFIERS = {\n  vertical: 'd-tablist--vertical',\n};\n\nexport const TAB_ACTIVATION_MODES = ['auto', 'manual'];\n\nexport const TAB_GROUP_KINDS = ['default', 'muted'];\n\nexport const TAB_SPREADS = ['none', 'grow', 'equal'];\n\nexport const TAB_SPREAD_MODIFIERS = {\n  grow: 'd-tablist--spread-grow',\n  equal: 'd-tablist--spread-equal',\n};\n"],"mappings":";AAAA,IAAa,IAAiB;CAAC;CAAO;CAAO;CAAO;CAAO;CAAO;CAAW;CAAM;CAAM;CAAM;CAAM;CAAK,EAE7F,IAA0B;CAErC,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CAEJ,SAAS;CACV,EAEY,IAA0B,EACrC,UAAU,uBACX,EAEY,IAAgC,EAC3C,YAAY,wBACb,EAEY,IAAmB,CAAC,cAAc,WAAW,EAE7C,IAA4B,EACvC,UAAU,uBACX,EAEY,IAAuB,CAAC,QAAQ,SAAS,EAEzC,IAAkB,CAAC,WAAW,QAAQ,EAEtC,IAAc;CAAC;CAAQ;CAAQ;CAAQ,EAEvC,IAAuB;CAClC,MAAM;CACN,OAAO;CACR"}
+{"version":3,"file":"tabs-constants.js","names":[],"sources":["../../../components/tab/tabs_constants.js"],"sourcesContent":["export const TAB_LIST_SIZES = ['default', 'sm'];\n\nexport const TAB_LIST_SIZE_MODIFIERS = {\n  sm: 'd-tablist--sm',\n};\n\nexport const TAB_LIST_KIND_MODIFIERS = {\n  inverted: 'd-tablist--inverted',\n};\n\nexport const TAB_LIST_IMPORTANCE_MODIFIERS = {\n  borderless: 'd-tablist--no-border',\n};\n\nexport const TAB_IMPORTANCE_MODIFIERS = {\n  selected: 'd-tab--selected',\n};\n"],"mappings":";AAAA,IAAa,IAAiB,CAAC,WAAW,KAAK,EAElC,IAA0B,EACrC,IAAI,iBACL,EAEY,IAA0B,EACrC,UAAU,uBACX,EAEY,IAAgC,EAC3C,YAAY,wBACb,EAEY,IAA2B,EACtC,UAAU,mBACX"}

package/dist/lib/toast/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./toast-constants.cjs`),t=require(`../../toast-BuNWsrhy.cjs`);exports.DtToast=t.t,exports.TOAST_MIN_DURATION=e.TOAST_MIN_DURATION,exports.TOAST_ROLES=e.TOAST_ROLES;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./toast-constants.cjs`),t=require(`../../toast-d8_zmgkL.cjs`);exports.DtToast=t.t,exports.TOAST_MIN_DURATION=e.TOAST_MIN_DURATION,exports.TOAST_ROLES=e.TOAST_ROLES;

package/dist/lib/toast/index.js

@@ -1,3 +1,3 @@
 import { TOAST_MIN_DURATION as e, TOAST_ROLES as t } from "./toast-constants.js";
-import { t as n } from "../../toast-DqbTiHVx.js";
+import { t as n } from "../../toast-DvPN-bCi.js";
 export { n as DtToast, e as TOAST_MIN_DURATION, t as TOAST_ROLES };

package/dist/lib/toast/toast.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../toast-BuNWsrhy.cjs`);exports.default=e.t;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../toast-d8_zmgkL.cjs`);exports.default=e.t;

package/dist/lib/toast/toast.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../toast-DqbTiHVx.js";
+import { t as e } from "../../toast-DvPN-bCi.js";
 export { e as default };

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

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={200:`d-toggle--small`,300:``,sm:`d-toggle--small`,md:``},t=[!1,!0,`mixed`],n={TOGGLE_SIZE_MODIFIERS:e,TOGGLE_CHECKED_VALUES:t};exports.TOGGLE_CHECKED_VALUES=t,exports.TOGGLE_SIZE_MODIFIERS=e,exports.default=n;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={sm:`d-toggle--small`,md:``},t=[!1,!0,`mixed`],n={TOGGLE_SIZE_MODIFIERS:e,TOGGLE_CHECKED_VALUES:t};exports.TOGGLE_CHECKED_VALUES=t,exports.TOGGLE_SIZE_MODIFIERS=e,exports.default=n;
 //# sourceMappingURL=toggle-constants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-constants.cjs","names":[],"sources":["../../../components/toggle/toggle_constants.js"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  200: 'd-toggle--small',\n  300: '',\n  // T-shirt aliases (deprecated)\n  sm: 'd-toggle--small',\n  md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n  TOGGLE_SIZE_MODIFIERS,\n  TOGGLE_CHECKED_VALUES,\n};\n"],"mappings":"+FAAA,IAAa,EAAwB,CAEnC,IAAK,kBACL,IAAK,GAEL,GAAI,kBACJ,GAAI,GACL,CAEY,EAAwB,CAAC,GAAO,GAAM,QAAQ,CAE3D,EAAe,CACb,wBACA,wBACD"}
+{"version":3,"file":"toggle-constants.cjs","names":[],"sources":["../../../components/toggle/toggle_constants.js"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n  sm: 'd-toggle--small',\n  md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n  TOGGLE_SIZE_MODIFIERS,\n  TOGGLE_CHECKED_VALUES,\n};\n"],"mappings":"+FAAA,IAAa,EAAwB,CACnC,GAAI,kBACJ,GAAI,GACL,CAEY,EAAwB,CAAC,GAAO,GAAM,QAAQ,CAE3D,EAAe,CACb,wBACA,wBACD"}

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

@@ -1,7 +1,5 @@
 //#region components/toggle/toggle_constants.js
 var e = {
-	200: "d-toggle--small",
-	300: "",
 	sm: "d-toggle--small",
 	md: ""
 }, t = [

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-constants.js","names":[],"sources":["../../../components/toggle/toggle_constants.js"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  200: 'd-toggle--small',\n  300: '',\n  // T-shirt aliases (deprecated)\n  sm: 'd-toggle--small',\n  md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n  TOGGLE_SIZE_MODIFIERS,\n  TOGGLE_CHECKED_VALUES,\n};\n"],"mappings":";AAAA,IAAa,IAAwB;CAEnC,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACL,EAEY,IAAwB;CAAC;CAAO;CAAM;CAAQ,EAE3D,IAAe;CACb;CACA;CACD"}
+{"version":3,"file":"toggle-constants.js","names":[],"sources":["../../../components/toggle/toggle_constants.js"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n  sm: 'd-toggle--small',\n  md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n  TOGGLE_SIZE_MODIFIERS,\n  TOGGLE_CHECKED_VALUES,\n};\n"],"mappings":";AAAA,IAAa,IAAwB;CACnC,IAAI;CACJ,IAAI;CACL,EAEY,IAAwB;CAAC;CAAO;CAAM;CAAQ,EAE3D,IAAe;CACb;CACA;CACD"}

package/dist/lib/toggle/toggle.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`./toggle-constants.cjs`);let r=require(`vue`);var i={compatConfig:{MODE:3},name:`DtToggle`,inheritAttrs:!1,props:{id:{type:String,default(){return e.getUniqueString()}},disabled:{type:Boolean,default:!1},modelValue:{type:[Boolean,String],default:!1,validator:e=>n.TOGGLE_CHECKED_VALUES.includes(e)},toggleOnClick:{type:Boolean,default:!0},size:{type:[String,Number],default:300,validator:e=>Object.keys(n.TOGGLE_SIZE_MODIFIERS).includes(String(e))},showLabel:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!0},labelClass:{type:[String,Array,Object],default:``},labelChildProps:{type:Object,default:()=>({})}},emits:[`update:modelValue`],data(){return{internalChecked:this.modelValue,hasSlotContent:e.hasSlotContent}},computed:{inputListeners(){return{...e.removeClassStyleAttrs(this.$attrs),onClick:()=>this.toggleCheckedValue()}},isIndeterminate(){return this.internalChecked===`mixed`},toggleRole(){return this.isIndeterminate?`checkbox`:`switch`},toggleClasses(){return[`d-toggle`,n.TOGGLE_SIZE_MODIFIERS[String(this.size)],{"d-toggle--checked":this.internalChecked===!0,"d-toggle--disabled":this.disabled,"d-toggle--indeterminate":this.isIndeterminate}]}},watch:{modelValue(e){this.internalChecked=e}},mounted(){this.runValidations()},methods:{toggleCheckedValue(){this.$emit(`update:modelValue`,!this.internalChecked),this.toggleOnClick&&(this.internalChecked=!this.internalChecked)},hasSlotLabel(){return!!this.$slots.default},runValidations(){!(this.showLabel&&this.hasSlotLabel())&&!this.$attrs[`aria-label`]&&console.info(`[Dialtone] A label is required for accessibility. Provide a label and use show-label="false" to hide it visually.`)}}},a=[`for`],o=[`id`,`role`,`aria-checked`,`disabled`,`aria-disabled`],s={key:0,class:`d-toggle__inner`};function c(e,t,n,i,c,l){return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,{class:(0,r.normalizeClass)([`d-toggle-wrapper`,e.$attrs.class]),style:(0,r.normalizeStyle)(e.$attrs.style)},[n.showLabel&&c.hasSlotContent(e.$slots.default)?((0,r.openBlock)(),(0,r.createElementBlock)(`label`,(0,r.mergeProps)({key:0,class:n.labelClass,for:n.id},n.labelChildProps,{"data-qa":`toggle-label`}),[(0,r.renderSlot)(e.$slots,`default`)],16,a)):(0,r.createCommentVNode)(``,!0),(0,r.createElementVNode)(`button`,(0,r.mergeProps)({id:n.id,role:l.toggleRole,type:`button`,"aria-checked":c.internalChecked.toString(),disabled:n.disabled,"aria-disabled":n.disabled.toString(),class:l.toggleClasses},l.inputListeners),[n.showIcon?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,s)):(0,r.createCommentVNode)(``,!0)],16,o)],6)}var l=t.t(i,[[`render`,c]]);exports.default=l;
+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(`./toggle-constants.cjs`);let r=require(`vue`);var i={compatConfig:{MODE:3},name:`DtToggle`,inheritAttrs:!1,props:{id:{type:String,default(){return e.getUniqueString()}},disabled:{type:Boolean,default:!1},modelValue:{type:[Boolean,String],default:!1,validator:e=>n.TOGGLE_CHECKED_VALUES.includes(e)},toggleOnClick:{type:Boolean,default:!0},size:{type:String,default:`md`,validator:e=>Object.keys(n.TOGGLE_SIZE_MODIFIERS).includes(e)},showIcon:{type:Boolean,default:!0},labelClass:{type:[String,Array,Object],default:``},wrapperClass:{type:[String,Array,Object],default:void 0},labelChildProps:{type:Object,default:()=>({})}},emits:[`change`,`update:modelValue`],data(){return{internalChecked:this.modelValue,hasSlotContent:e.hasSlotContent}},computed:{inputListeners(){return{...e.removeClassStyleAttrs(this.$attrs),onClick:()=>this.toggleCheckedValue()}},isIndeterminate(){return this.internalChecked===`mixed`},toggleRole(){return this.isIndeterminate?`checkbox`:`switch`},toggleClasses(){return[`d-toggle`,n.TOGGLE_SIZE_MODIFIERS[this.size],{"d-toggle--checked":this.internalChecked===!0,"d-toggle--disabled":this.disabled,"d-toggle--indeterminate":this.isIndeterminate}]}},watch:{modelValue(e){this.internalChecked=e}},mounted(){this.runValidations()},methods:{addClassStyleAttrs:e.addClassStyleAttrs,toggleCheckedValue(){this.$emit(`update:modelValue`,!this.internalChecked),this.$emit(`change`,!this.internalChecked),this.toggleOnClick&&(this.internalChecked=!this.internalChecked)},hasSlotLabel(){return!!this.$slots.default},runValidations(){this.validateInputLabels(this.hasSlotLabel(),this.$attrs[`aria-label`])},validateInputLabels(e,t){!e&&!t&&(0,r.warn)(`You must provide an aria-label when there is no label passed`,this)}}},a=[`for`],o=[`id`,`role`,`aria-checked`,`disabled`,`aria-disabled`],s={key:0,class:`d-toggle__inner`};function c(e,t,n,i,c,l){return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,(0,r.mergeProps)({class:[`d-toggle-wrapper`,n.wrapperClass]},l.addClassStyleAttrs(e.$attrs)),[c.hasSlotContent(e.$slots.default)?((0,r.openBlock)(),(0,r.createElementBlock)(`label`,(0,r.mergeProps)({key:0,class:n.labelClass,for:n.id},n.labelChildProps,{"data-qa":`toggle-label`}),[(0,r.renderSlot)(e.$slots,`default`)],16,a)):(0,r.createCommentVNode)(``,!0),(0,r.createElementVNode)(`button`,(0,r.mergeProps)({id:n.id,role:l.toggleRole,type:`button`,"aria-checked":c.internalChecked.toString(),disabled:n.disabled,"aria-disabled":n.disabled.toString(),class:l.toggleClasses},l.inputListeners),[n.showIcon?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,s)):(0,r.createCommentVNode)(``,!0)],16,o)],16)}var l=t.t(i,[[`render`,c]]);exports.default=l;
 //# sourceMappingURL=toggle.cjs.map

package/dist/lib/toggle/toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.cjs","names":[],"sources":["../../../components/toggle/toggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['d-toggle-wrapper', $attrs.class]\"\n    :style=\"$attrs.style\"\n  >\n    <label\n      v-if=\"showLabel && hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { getUniqueString, hasSlotContent, removeClassStyleAttrs } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @values true, false, 'mixed'\n     */\n    modelValue: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(String(s)),\n    },\n\n    /**\n     * Determines visibility of toggle label.\n     * @values true, false\n     */\n    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\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  data () {\n    return {\n      internalChecked: this.modelValue,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...removeClassStyleAttrs(this.$attrs),\n        onClick: () => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[String(this.size)],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    modelValue (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('update:modelValue', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      const hasVisibleLabel = this.showLabel && this.hasSlotLabel();\n      if (!hasVisibleLabel && !this.$attrs['aria-label']) {\n        console.info(\n          '[Dialtone] A label is required for accessibility. Provide a label and use show-label=\"false\" to hide it visually.',\n        );\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"sSAyCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CAEzB,KAAM,WAEN,aAAc,GAEd,MAAO,CAKL,GAAI,CACF,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,iBAAiB,EACtC,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,CAAC,QAAS,OAAO,CACvB,QAAS,GACT,UAAY,GAAM,EAAA,sBAAsB,SAAS,EAAE,CACpD,CAOD,cAAe,CACb,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAY,GAAM,OAAO,KAAK,EAAA,sBAAsB,CAAC,SAAS,OAAO,EAAE,CAAC,CACzE,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,gBAAiB,CACf,KAAM,OACN,aAAgB,EAAE,EACnB,CACF,CAED,MAAO,CAOL,oBACD,CAED,MAAQ,CACN,MAAO,CACL,gBAAiB,KAAK,WACtB,eAAA,EAAA,eACD,EAGH,SAAU,CACR,gBAAkB,CAChB,MAAO,CACL,GAAG,EAAA,sBAAsB,KAAK,OAAO,CACrC,YAAe,KAAK,oBAAoB,CACzC,EAGH,iBAAmB,CACjB,OAAO,KAAK,kBAAoB,SAGlC,YAAc,CACZ,OAAO,KAAK,gBAAkB,WAAa,UAG7C,eAAiB,CACf,MAAO,CACL,WACA,EAAA,sBAAsB,OAAO,KAAK,KAAK,EACvC,CACE,oBAAqB,KAAK,kBAAoB,GAC9C,qBAAsB,KAAK,SAC3B,0BAA2B,KAAK,gBACjC,CACF,EAEJ,CAED,MAAO,CACL,WAAY,EAAY,CACtB,KAAK,gBAAkB,GAE1B,CAED,SAAW,CACT,KAAK,gBAAgB,EAGvB,QAAS,CACP,oBAAsB,CACpB,KAAK,MAAM,oBAAqB,CAAC,KAAK,gBAAgB,CAElD,KAAK,gBACP,KAAK,gBAAkB,CAAC,KAAK,kBAIjC,cAAgB,CACd,MAAO,CAAC,CAAE,KAAK,OAAO,SAGxB,gBAAkB,CAEZ,EADoB,KAAK,WAAa,KAAK,cAAc,GACrC,CAAC,KAAK,OAAO,eACnC,QAAQ,KACN,oHACD,EAGN,CACF,8EAvLO,MAAM,4FAGN,MAAA,CA5BH,OAAA,EAAA,EAAA,gBAAK,CAAA,mBAAuB,EAAA,OAAO,MAAK,CAAA,CACxC,OAAA,EAAA,EAAA,gBAAO,EAAA,OAAO,MAAK,GAGZ,EAAA,WAAa,EAAA,eAAe,EAAA,OAAO,QAAO,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQ1C,SAAA,EAAA,EAAA,YAAA,OAPL,MAAO,EAAA,WACP,IAAK,EAAA,IACE,EAAA,gBAAe,CACvB,UAAQ,eAAc,CAAA,CAAA,EAAA,EAAA,EAAA,YAGd,EAAA,OAAA,UAAA,CAAA,CAAA,GAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,EAAA,EAAA,EAAA,oBAgBD,UAAA,EAAA,EAAA,YAAA,CAbN,GAAI,EAAA,GACJ,KAAM,EAAA,WACP,KAAK,SACJ,eAAc,EAAA,gBAAgB,UAAQ,CACtC,SAAU,EAAA,SACV,gBAAe,EAAA,SAAS,UAAQ,CAChC,MAAO,EAAA,eACA,EAAA,eAAc,CAAA,CAGd,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEN,OAHF,EAGE,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,GAAA,EAAA,CAAA,CAAA,EAAA"}
+{"version":3,"file":"toggle.cjs","names":[],"sources":["../../../components/toggle/toggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['d-toggle-wrapper', wrapperClass]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <label\n      v-if=\"hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { getUniqueString, hasSlotContent, removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @model modelValue\n     * @values true, false, 'mixed'\n     */\n    modelValue: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional styling for the wrapper element\n     */\n    wrapperClass: {\n      type: [String, Array, Object],\n      default: undefined,\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Toggle change event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'change',\n\n    /**\n     * v-model event event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.modelValue,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...removeClassStyleAttrs(this.$attrs),\n        onClick: () => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[this.size],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    modelValue (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    addClassStyleAttrs,\n    toggleCheckedValue () {\n      this.$emit('update:modelValue', !this.internalChecked);\n      this.$emit('change', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasSlotLabel(), this.$attrs['aria-label']);\n    },\n\n    validateInputLabels (hasLabel, ariaLabel) {\n      if (!hasLabel && !ariaLabel) {\n        warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}