npm - @dialpad/dialtone-vue - Versions diffs - 3.222.2 → 3.223.0-next.1 - Mend

@dialpad/dialtone-vue 3.222.2 → 3.223.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2057) hide show

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

	@@ -1 +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 >\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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"}
1	+ {"version":3,"file":"tab-group.js","names":[],"sources":["../../../components/Tab/TabGroup.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 './TabsConstants';\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 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":";;;;;AA6DA,IAAK,IAAU;CACb,MAAM;CAEN,UAAW;AACT,SAAO;GACL,cAAc,KAAK;GACnB,UAAU,KAAK;GAChB;;CAGH,OAAO;EAIL,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAOD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACT,UAAW,GAAO;AAChB,WAAO,EAAY,SAAS,EAAM;;GAErC;EAMD,aAAa;GACX,MAAM;GACN,SAAS;GACT,UAAW,GAAO;AAChB,WAAO,EAAiB,SAAS,EAAM;;GAE1C;EAMD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,UAAW,GAAM;AACf,WAAO,EAAe,SAAS,OAAO,EAAK,CAAC;;GAE/C;EAKD,WAAW;GACT,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,cAAc;GACZ,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS,KAAA;GACV;EAKD,mBAAmB;GACjB,MAAM;GACN,gBAAgB,EAAE;GACnB;EAOD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,UAAW,GAAO;AAChB,WAAO,EAAgB,SAAS,EAAM;;GAEzC;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,gBAAgB;GACd,MAAM;GACN,SAAS;GACT,UAAW,GAAO;AAChB,WAAO,EAAqB,SAAS,EAAM;;GAE9C;EAMD,yBAAyB;GACvB,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO,CAOL,UAQA,gBACD;CAED,QAAS;EACP,IAAM,IAAO,EAAI,KAAK;AAItB,SAAO;GAAE;GAAM,WAHG,EAChB,GAAM,4BAA4B,yBACnC;GACyB;;CAG5B,OAAQ;AACN,SAAO;GACL,YAAY;IACV,UAAU;IACV,UAAU;IACV,MAAM;IACN,MAAM;IACN,UAAU;IACV,aAAa;IACb,QAAQ;IACR,cAAc;IACf;GAED,UAAU,EAAE;GACZ;GACA;GACA;GACA;GACA;GACD;;CAGH,UAAU,EACR,oBAAqB;AACnB,SAAO,KAAK,gBAAgB,KAAK;IAEpC;CAED,OAAO;EACL,UAAU;GACR,WAAW;GACX,UAAW;AACT,SAAK,WAAW,WAAW,KAAK;;GAEnC;EAED,UAAU;GACR,WAAW;GACX,QAAS,GAAQ,GAAQ;AAEvB,IADA,KAAK,WAAW,WAAW,KAAK,UAC5B,MAAW,MACb,KAAK,WAAW,eAAe;;GAGpC;EAED,MAAM;GACJ,WAAW;GACX,UAAW;AACT,SAAK,WAAW,OAAO,KAAK;;GAE/B;EAED,MAAM;GACJ,WAAW;GACX,UAAW;AACT,SAAK,WAAW,OAAO,KAAK;;GAE/B;EAED,UAAU;GACR,WAAW;GACX,UAAW;AACT,SAAK,WAAW,WAAW,KAAK;;GAEnC;EAED,aAAa;GACX,WAAW;GACX,UAAW;AACT,SAAK,WAAW,cAAc,KAAK;;GAEtC;EAED,QAAQ;GACN,WAAW;GACX,UAAW;AACT,SAAK,WAAW,SAAS,KAAK;;GAEjC;EACF;CAED,UAAW;AACT,OAAK,gBAAgB;;CAGvB,UAAW;AACT,OAAK,gBAAgB;;CAGvB,SAAS;EACP,iBAAkB;AAUhB,GANK,KAAK,WAAW,aACnB,KAAK,WAAW,WAAW,KAAK,WAElC,KAAK,WAAW,KAAK,gBAAgB,EAGjC,KAAK,WAAW,gBAAgB,CAAC,KAAK,SAAS,MAAK,MAAK,EAAE,UAAU,KAAK,WAAW,aAAa,KACpG,KAAK,WAAW,eAAe;;EAInC,SAAU,GAAS;AACjB,GAAI,KAAK,WAAW,iBAAiB,MACnC,KAAK,WAAW,eAAe;;EAInC,iBAAkB;AAEhB,UADa,MAAM,KAAK,KAAK,MAAM,KAAK,iBAAiB,iBAAe,CAAC,CAEtE,KAAI,OACK;IACN,SAAS;IACT,SAAS,EAAG,aAAa,gBAAgB,EAAE,QAAQ,aAAa,GAAG;IACnE,OAAO,EAAG,aAAa,KAAK,EAAE,QAAQ,WAAW,GAAG;IACpD,YAAY,EAAG,aAAa,gBAAe,KAAM;IACjD,YAAY,EAAG,aAAa,gBAAe,KAAM;IAClD,EACD;;EAGN,WAAY;AACV,QAAK,MAAM,UAAU,EAAE,GAAG,KAAK,YAAY,CAAC;;EAG9C,UAAW;AACL,QAAK,gBAAgB,gBACzB,KAAK,kBAAkB;;EAGzB,WAAY;AACN,QAAK,gBAAgB,gBACzB,KAAK,cAAc;;EAGrB,MAAO,GAAO;AACR,QAAK,gBAAgB,eACzB,EAAM,gBAAgB,EACtB,KAAK,kBAAkB;;EAGzB,QAAS,GAAO;AACV,QAAK,gBAAgB,eACzB,EAAM,gBAAgB,EACtB,KAAK,cAAc;;EAGrB,mBAAoB;GAClB,IAAM,IAAQ,KAAK,oBAAoB;AACvC,OAAI,MAAU,GAAI;GAElB,IAAM,IAAY,KAAK,YAAY,GAAO,GAAG;AAC7C,QAAK,iBAAiB,EAAU;;EAGlC,eAAgB;GACd,IAAM,IAAQ,KAAK,oBAAoB;AACvC,OAAI,MAAU,GAAI;GAElB,IAAM,IAAY,KAAK,YAAY,GAAO,EAAE;AAC5C,QAAK,iBAAiB,EAAU;;EAGlC,YAAa,GAAW,GAAW;GACjC,IAAM,IAAM,KAAK,SAAS;AAC1B,WAAQ,IAAY,IAAY,KAAO;;EAGzC,oBAAqB,GAAS,GAAY;AACxC,OAAI,CAAC,KAAc,CAAC,KAAK,yBAAyB;AAChD,SAAK,WAAW,WAAW;AAC3B;;GAGF,IAAM,IAAM,KAAK,UAAU,SAAS,2BAAyB;AAE7D,QAAK,WAAW,WAAW,GACtB,KAEL,KAAK,gBAAgB;IACnB,IAAI,IAAY,EAAE,iBAAiB,eAAe,EAC9C,IAAiB,EAAE,EACnB,IAAgB;AAWpB,IATI,KAAK,YACP,IAAY;KAAE,aAAa;KAAe,iBAAiB;KAAe,EAC1E,IAAiB,EAAE,WAAW,eAAe,EAAI,MAAM,YAAW,GAAI,EAAI,MAAM,eAAe,EAC/F,IAAgB,cACP,KAAK,SAAS,YACvB,IAAiB,EAAE,iBAAiB,EAAI,MAAM,iBAAiB,EAC/D,IAAgB,aAGlB,KAAK,UAAU,QAAQ;KACrB,SAAS,EAAI;KACb,OAAO;KACP,aAAa,KAAK;KAClB;KACA;KACA;KACD,CAAC;KACF;;EAGJ,iBAAkB,GAAO;GACvB,IAAM,EAAE,YAAS,YAAS,kBAAe,KAAK,SAAS;AAEvD,GADA,EAAQ,OAAO,EACX,KAAK,mBAAmB,UAAU,CAAC,MACrC,KAAK,UAAU,QAAQ,EACvB,KAAK,WAAW,WAAW,GAC3B,KAAK,UAAU;;EAInB,UAAW,GAAO;GAChB,IAAM,IAAQ,EAAM,OAAO,QAAQ,iBAAe,EAC5C,IAAQ,IACV,KAAK,SAAS,WAAU,MAAK,EAAE,YAAY,EAAK,GAChD,KAAK,oBAAoB;AAEzB,SAAU,OACV,KAAK,SAAS,IAAQ,cACtB,KAAK,WAAW,aAAa,KAAK,SAAS,IAAQ,YAEvD,KAAK,MAAM,iBAAiB,EAAM,EAC9B,GAAM,qBAIV,EAAM,gBAAgB,EAEtB,KAAK,iBAAiB,EAAM,EAC5B,KAAK,UAAU;;EAGjB,iBAAkB,GAAO;GACvB,IAAM,EAAE,YAAS,eAAY,KAAK,SAAS;AAE3C,GADA,KAAK,oBAAoB,GAAS,EAAQ,EAC1C,EAAQ,OAAO;;EAGjB,qBAAsB;GACpB,IAAM,IAAY,KAAK,WAAW,cAC5B,IAAQ,KAAK,SAAS,WAAW,MACrC,IAAY,EAAQ,UAAU,IAAY,EAAQ,WACnD;AAED,UAAO,MAAU,KAAK,IAAI;;EAG5B,eAAgB;AACd,GAAI,KAAK,SAAS,UAAQ,KAAK,iBAAiB,EAAE;;EAGpD,cAAe;AACb,GAAI,KAAK,SAAS,UAAQ,KAAK,iBAAiB,KAAK,SAAS,SAAS,EAAE;;EAG5E;CACF;;aA9fC,EAqCM,OAAA;EApCJ,WAAQ;EACP,OAAK,EAAA,CAAA,cAAA,EAAA,wBAA2C,EAAA,gBAAW,YAAA,CAAA,CAAA;KAG5D,EA6BM,OA7BN,EA6BM;EA5BJ,KAAI;EACH,OAAK;;GAAiC,EAAA,wBAAwB,OAAO,EAAA,KAAI;GAAY,EAAA,0BAA0B,EAAA;GAAsB,EAAA,gBAAW,cAAmB,EAAA,qBAAqB,EAAA;;KAA8B,EAAA,wBAAwB,WAAW,EAAA;KAAqB,EAAA,8BAA8B,aAAa,EAAA;;GAA+B,EAAA;;IAWjV,EAAA,mBAAiB;EACzB,MAAK;EACJ,cAAY,EAAA;EACZ,oBAAkB,EAAA;EAClB,WAAO;+BAAO,EAAA,WAAA,EAAA,QAAA,GAAA,EAAO,EAAA,CAAA,OAAA,CAAA;+BACN,EAAA,YAAA,EAAA,SAAA,GAAA,EAAQ,EAAA,CAAA,QAAA,CAAA;+BACX,EAAA,SAAA,EAAA,MAAA,GAAA,EAAK,EAAA,CAAA,KAAA,CAAA;+BACH,EAAA,WAAA,EAAA,QAAA,GAAA,EAAO,EAAA,CAAA,OAAA,CAAA;+BACN,EAAA,aAAA,EAAA,UAAA,GAAA,EAAS,EAAA,CAAA,QAAA,CAAA;+BACT,EAAA,aAAA,EAAA,UAAA,GAAA,EAAS,EAAA,CAAA,QAAA,CAAA;iCAEF,EAAA,gBAAA,EAAA,aAAA,GAAA,EAAY,EAAA,CAAA,UAAA,CAAA,EAAA,CAAA,OAAA,CAAA;iCACb,EAAA,eAAA,EAAA,YAAA,GAAA,EAAW,EAAA,CAAA,UAAA,CAAA,EAAA,CAAA,MAAA,CAAA;;EAFhC,SAAK,EAAA,OAAA,EAAA,MAAA,GAAA,MAAE,EAAA,aAAA,EAAA,UAAA,GAAA,EAAS;MAKjB,EAAoB,EAAA,QAAA,OAAA,CAAA,EAAA,IAAA,EAAA,EAGtB,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}

package/dist/lib/tab/tab-panel.cjs CHANGED Viewed

@@ -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(`../../common/mixins/modal.cjs`);let r=require(`vue`);var i={compatConfig:{MODE:3},name:`DtTabPanel`,mixins:[n.default],inject:[`groupContext`],props:{id:{type:String,required:!0},tabId:{type:String,required:!0},hidden:{type:Boolean,default:!1},tabPanelClass:{type:[String,Array,Object],default:``}},data(){return{isFirstElementFocusable:!1}},computed:{hidePanel(){return this.groupContext.selected!==this.id||this.hidden}},async mounted(){let t=await this.getFirstFocusableElement(e.returnFirstEl(this.$el));t?this.isFirstElementFocusable=this.isFirstElementOfPanel(t):this.isFirstElementFocusable=!1},methods:{isFirstElementOfPanel(t){let n=t,r=!0;for(;n;){if(n.previousElementSibling!==null){r=!1;break}n=n.parentNode===e.returnFirstEl(this.$el)?null:n.parentNode}return r}}},a=[`id`,`tabindex`,`aria-labelledby`,`aria-hidden`];function o(e,t,n,i,o,s){return(0,r.withDirectives)(((0,r.openBlock)(),(0,r.createElementBlock)(`div`,{id:`dt-panel-${n.id}`,role:`tabpanel`,tabindex:o.isFirstElementFocusable?-1:0,"aria-labelledby":`dt-tab-${n.tabId}`,"aria-hidden":`${s.hidePanel}`,class:(0,r.normalizeClass)(n.tabPanelClass),"data-qa":`dt-tab-panel`},[(0,r.renderSlot)(e.$slots,`default`)],10,a)),[[r.vShow,!s.hidePanel]])}var s=t.t(i,[[`render`,o]]);exports.default=s;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../common/mixins/modal.cjs`);let r=require(`vue`);var i={name:`DtTabPanel`,mixins:[n.default],inject:[`groupContext`],props:{id:{type:String,required:!0},tabId:{type:String,required:!0},hidden:{type:Boolean,default:!1},tabPanelClass:{type:[String,Array,Object],default:``}},data(){return{isFirstElementFocusable:!1}},computed:{hidePanel(){return this.groupContext.selected!==this.id||this.hidden}},async mounted(){let t=await this.getFirstFocusableElement(e.returnFirstEl(this.$el));t?this.isFirstElementFocusable=this.isFirstElementOfPanel(t):this.isFirstElementFocusable=!1},methods:{isFirstElementOfPanel(t){let n=t,r=!0;for(;n;){if(n.previousElementSibling!==null){r=!1;break}n=n.parentNode===e.returnFirstEl(this.$el)?null:n.parentNode}return r}}},a=[`id`,`tabindex`,`aria-labelledby`,`aria-hidden`];function o(e,t,n,i,o,s){return(0,r.withDirectives)(((0,r.openBlock)(),(0,r.createElementBlock)(`div`,{id:`dt-panel-${n.id}`,role:`tabpanel`,tabindex:o.isFirstElementFocusable?-1:0,"aria-labelledby":`dt-tab-${n.tabId}`,"aria-hidden":`${s.hidePanel}`,class:(0,r.normalizeClass)(n.tabPanelClass),"data-qa":`dt-tab-panel`},[(0,r.renderSlot)(e.$slots,`default`)],10,a)),[[r.vShow,!s.hidePanel]])}var s=t.t(i,[[`render`,o]]);exports.default=s;
 //# sourceMappingURL=tab-panel.cjs.map

package/dist/lib/tab/tab-panel.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab-panel.cjs","names":[],"sources":["../../../components/~~tab~~/~~tab_panel~~.vue"],"sourcesContent":["<template>\n <div\n v-show=\"!hidePanel\"\n :id=\"`dt-panel-${id}`\"\n role=\"tabpanel\"\n :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n :aria-labelledby=\"`dt-tab-${tabId}`\"\n :aria-hidden=\"`${hidePanel}`\"\n :class=\"tabPanelClass\"\n data-qa=\"dt-tab-panel\"\n >\n <!-- @slot Default slot for Tab Panel -->\n <slot />\n </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { returnFirstEl } from '@/common/utils';\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: 'DtTabPanel',\n\n mixins: [Modal],\n\n inject: ['groupContext'],\n\n props: {\n /\n Id of the panel\n /\n id: {\n type: String,\n required: true,\n },\n\n /\n Id of the associated tab\n /\n tabId: {\n type: String,\n required: true,\n },\n\n /\n If true, hides the tab content\n * @values true, false\n /\n hidden: {\n type: Boolean,\n default: false,\n },\n\n /\n Used to customize the tab element\n */\n tabPanelClass: {\n type: [String, Array, Object],\n default: '',\n },\n },\n\n data () {\n return {\n isFirstElementFocusable: false,\n };\n },\n\n computed: {\n hidePanel () {\n return this.groupContext.selected !== this.id \|\| this.hidden;\n },\n },\n\n async mounted () {\n const firstFocusableElement = await this.getFirstFocusableElement(returnFirstEl(this.$el));\n\n if (!firstFocusableElement) {\n this.isFirstElementFocusable = false;\n } else {\n // If the first focusable element isn't the first element in the panel,\n // then we need to set the panel tabindex to 0.\n // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n }\n },\n\n methods: {\n isFirstElementOfPanel (element) {\n let current = element;\n let isFirstElement = true;\n\n while (current) {\n if (current.previousElementSibling !== null) {\n isFirstElement = false;\n break;\n }\n current = current.parentNode !== returnFirstEl(this.$el) ? current.parentNode : null;\n }\n\n return isFirstElement;\n },\n },\n};\n</script>\n"],"mappings":"6SAwBA,IAAK,EAAU,CACb,~~aAAc,CAAE,~~KAAM,~~EAAG,CACzB,KAAM,~~aAEN,OAAQ,CAAC,EAAA,QAAM,CAEf,OAAQ,CAAC,eAAe,CAExB,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,GACX,CAKD,MAAO,CACL,KAAM,OACN,SAAU,GACX,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAKD,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,wBAAyB,GAC1B,EAGH,SAAU,CACR,WAAa,CACX,OAAO,KAAK,aAAa,WAAa,KAAK,IAAM,KAAK,QAEzD,CAED,MAAM,SAAW,CACf,IAAM,EAAwB,MAAM,KAAK,yBAAyB,EAAA,cAAc,KAAK,IAAI,CAAC,CAErF,EAMH,KAAK,wBAA0B,KAAK,sBAAsB,EAAsB,CALhF,KAAK,wBAA0B,IASnC,QAAS,CACP,sBAAuB,EAAS,CAC9B,IAAI,EAAU,EACV,EAAiB,GAErB,KAAO,GAAS,CACd,GAAI,EAAQ,yBAA2B,KAAM,CAC3C,EAAiB,GACjB,MAEF,EAAU,EAAQ,aAAe,EAAA,cAAc,KAAK,IAAG,CAAyB,KAArB,EAAQ,WAGrE,OAAO,GAEV,CACF,~~oJA/FO~~,MAAA,CAVH,GAAE,YAAc,EAAA,KACjB,KAAK,WACJ,SAAU,EAAA,wBAAuB,GAAA,EACjC,kBAAe,UAAY,EAAA,QAC3B,cAAW,GAAK,EAAA,YAChB,OAAA,EAAA,EAAA,gBAAO,EAAA,cAAa,CACrB,UAAQ,kCAGA,EAAA,OAAA,UAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA,CAAA,EAAA,MAAA,CAVC,EAAA,UAAS,CAAA,CAAA"}
1	+ {"version":3,"file":"tab-panel.cjs","names":[],"sources":["../../../components/Tab/TabPanel.vue"],"sourcesContent":["<template>\n <div\n v-show=\"!hidePanel\"\n :id=\"`dt-panel-${id}`\"\n role=\"tabpanel\"\n :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n :aria-labelledby=\"`dt-tab-${tabId}`\"\n :aria-hidden=\"`${hidePanel}`\"\n :class=\"tabPanelClass\"\n data-qa=\"dt-tab-panel\"\n >\n <!-- @slot Default slot for Tab Panel -->\n <slot />\n </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { returnFirstEl } from '@/common/utils';\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 name: 'DtTabPanel',\n\n mixins: [Modal],\n\n inject: ['groupContext'],\n\n props: {\n /\n Id of the panel\n /\n id: {\n type: String,\n required: true,\n },\n\n /\n Id of the associated tab\n /\n tabId: {\n type: String,\n required: true,\n },\n\n /\n If true, hides the tab content\n * @values true, false\n /\n hidden: {\n type: Boolean,\n default: false,\n },\n\n /\n Used to customize the tab element\n */\n tabPanelClass: {\n type: [String, Array, Object],\n default: '',\n },\n },\n\n data () {\n return {\n isFirstElementFocusable: false,\n };\n },\n\n computed: {\n hidePanel () {\n return this.groupContext.selected !== this.id \|\| this.hidden;\n },\n },\n\n async mounted () {\n const firstFocusableElement = await this.getFirstFocusableElement(returnFirstEl(this.$el));\n\n if (!firstFocusableElement) {\n this.isFirstElementFocusable = false;\n } else {\n // If the first focusable element isn't the first element in the panel,\n // then we need to set the panel tabindex to 0.\n // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n }\n },\n\n methods: {\n isFirstElementOfPanel (element) {\n let current = element;\n let isFirstElement = true;\n\n while (current) {\n if (current.previousElementSibling !== null) {\n isFirstElement = false;\n break;\n }\n current = current.parentNode !== returnFirstEl(this.$el) ? current.parentNode : null;\n }\n\n return isFirstElement;\n },\n },\n};\n</script>\n"],"mappings":"6SAwBA,IAAK,EAAU,CACb,KAAM,aAEN,OAAQ,CAAC,EAAA,QAAM,CAEf,OAAQ,CAAC,eAAe,CAExB,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,GACX,CAKD,MAAO,CACL,KAAM,OACN,SAAU,GACX,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAKD,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,wBAAyB,GAC1B,EAGH,SAAU,CACR,WAAa,CACX,OAAO,KAAK,aAAa,WAAa,KAAK,IAAM,KAAK,QAEzD,CAED,MAAM,SAAW,CACf,IAAM,EAAwB,MAAM,KAAK,yBAAyB,EAAA,cAAc,KAAK,IAAI,CAAC,CAErF,EAMH,KAAK,wBAA0B,KAAK,sBAAsB,EAAsB,CALhF,KAAK,wBAA0B,IASnC,QAAS,CACP,sBAAuB,EAAS,CAC9B,IAAI,EAAU,EACV,EAAiB,GAErB,KAAO,GAAS,CACd,GAAI,EAAQ,yBAA2B,KAAM,CAC3C,EAAiB,GACjB,MAEF,EAAU,EAAQ,aAAe,EAAA,cAAc,KAAK,IAAG,CAAyB,KAArB,EAAQ,WAGrE,OAAO,GAEV,CACF,oJA9FO,MAAA,CAVH,GAAE,YAAc,EAAA,KACjB,KAAK,WACJ,SAAU,EAAA,wBAAuB,GAAA,EACjC,kBAAe,UAAY,EAAA,QAC3B,cAAW,GAAK,EAAA,YAChB,OAAA,EAAA,EAAA,gBAAO,EAAA,cAAa,CACrB,UAAQ,kCAGA,EAAA,OAAA,UAAA,CAAA,CAAA,GAAA,EAAA,EAAA,CAAA,CAAA,EAAA,MAAA,CAVC,EAAA,UAAS,CAAA,CAAA"}

package/dist/lib/tab/tab-panel.js CHANGED Viewed

@@ -2,9 +2,8 @@ import { returnFirstEl as e } from "../../common/utils/index.js";
 import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import n from "../../common/mixins/modal.js";
 import { createElementBlock as r, normalizeClass as i, openBlock as a, renderSlot as o, vShow as s, withDirectives as c } from "vue";
-//#region components/tab/tab_panel.vue
+//#region components/Tab/TabPanel.vue
 var l = {
-	compatConfig: { MODE: 3 },
 	name: "DtTabPanel",
 	mixins: [n],
 	inject: ["groupContext"],

package/dist/lib/tab/tab-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab-panel.js","names":[],"sources":["../../../components/~~tab~~/~~tab_panel~~.vue"],"sourcesContent":["<template>\n <div\n v-show=\"!hidePanel\"\n :id=\"`dt-panel-${id}`\"\n role=\"tabpanel\"\n :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n :aria-labelledby=\"`dt-tab-${tabId}`\"\n :aria-hidden=\"`${hidePanel}`\"\n :class=\"tabPanelClass\"\n data-qa=\"dt-tab-panel\"\n >\n <!-- @slot Default slot for Tab Panel -->\n <slot />\n </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { returnFirstEl } from '@/common/utils';\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: 'DtTabPanel',\n\n mixins: [Modal],\n\n inject: ['groupContext'],\n\n props: {\n /\n Id of the panel\n /\n id: {\n type: String,\n required: true,\n },\n\n /\n Id of the associated tab\n /\n tabId: {\n type: String,\n required: true,\n },\n\n /\n If true, hides the tab content\n * @values true, false\n /\n hidden: {\n type: Boolean,\n default: false,\n },\n\n /\n Used to customize the tab element\n */\n tabPanelClass: {\n type: [String, Array, Object],\n default: '',\n },\n },\n\n data () {\n return {\n isFirstElementFocusable: false,\n };\n },\n\n computed: {\n hidePanel () {\n return this.groupContext.selected !== this.id \|\| this.hidden;\n },\n },\n\n async mounted () {\n const firstFocusableElement = await this.getFirstFocusableElement(returnFirstEl(this.$el));\n\n if (!firstFocusableElement) {\n this.isFirstElementFocusable = false;\n } else {\n // If the first focusable element isn't the first element in the panel,\n // then we need to set the panel tabindex to 0.\n // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n }\n },\n\n methods: {\n isFirstElementOfPanel (element) {\n let current = element;\n let isFirstElement = true;\n\n while (current) {\n if (current.previousElementSibling !== null) {\n isFirstElement = false;\n break;\n }\n current = current.parentNode !== returnFirstEl(this.$el) ? current.parentNode : null;\n }\n\n return isFirstElement;\n },\n },\n};\n</script>\n"],"mappings":";;;;;AAwBA,IAAK,IAAU;CACb,~~cAAc,EAAE,~~MAAM~~,GAAG~~;~~CACzB,MAAM;~~CAEN,QAAQ,CAAC,EAAM;CAEf,QAAQ,CAAC,eAAe;CAExB,OAAO;EAIL,IAAI;GACF,MAAM;GACN,UAAU;GACX;EAKD,OAAO;GACL,MAAM;GACN,UAAU;GACX;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,eAAe;GACb,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,yBAAyB,IAC1B;;CAGH,UAAU,EACR,YAAa;AACX,SAAO,KAAK,aAAa,aAAa,KAAK,MAAM,KAAK;IAEzD;CAED,MAAM,UAAW;EACf,IAAM,IAAwB,MAAM,KAAK,yBAAyB,EAAc,KAAK,IAAI,CAAC;AAE1F,EAAK,IAMH,KAAK,0BAA0B,KAAK,sBAAsB,EAAsB,GALhF,KAAK,0BAA0B;;CASnC,SAAS,EACP,sBAAuB,GAAS;EAC9B,IAAI,IAAU,GACV,IAAiB;AAErB,SAAO,IAAS;AACd,OAAI,EAAQ,2BAA2B,MAAM;AAC3C,QAAiB;AACjB;;AAEF,OAAU,EAAQ,eAAe,EAAc,KAAK,IAAG,GAAyB,OAArB,EAAQ;;AAGrE,SAAO;IAEV;CACF;;;;;;;~~gBA3GC~~,EAYM,OAAA;EAVH,IAAE,YAAc,EAAA;EACjB,MAAK;EACJ,UAAU,EAAA,0BAAuB,KAAA;EACjC,mBAAe,UAAY,EAAA;EAC3B,eAAW,GAAK,EAAA;EAChB,OAAK,EAAE,EAAA,cAAa;EACrB,WAAQ;KAGR,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,IAAA,EAAA,GAAA,CAAA,CAAA,GAAA,CAVC,EAAA,UAAS,CAAA,CAAA"}
1	+ {"version":3,"file":"tab-panel.js","names":[],"sources":["../../../components/Tab/TabPanel.vue"],"sourcesContent":["<template>\n <div\n v-show=\"!hidePanel\"\n :id=\"`dt-panel-${id}`\"\n role=\"tabpanel\"\n :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n :aria-labelledby=\"`dt-tab-${tabId}`\"\n :aria-hidden=\"`${hidePanel}`\"\n :class=\"tabPanelClass\"\n data-qa=\"dt-tab-panel\"\n >\n <!-- @slot Default slot for Tab Panel -->\n <slot />\n </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { returnFirstEl } from '@/common/utils';\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 name: 'DtTabPanel',\n\n mixins: [Modal],\n\n inject: ['groupContext'],\n\n props: {\n /\n Id of the panel\n /\n id: {\n type: String,\n required: true,\n },\n\n /\n Id of the associated tab\n /\n tabId: {\n type: String,\n required: true,\n },\n\n /\n If true, hides the tab content\n * @values true, false\n /\n hidden: {\n type: Boolean,\n default: false,\n },\n\n /\n Used to customize the tab element\n */\n tabPanelClass: {\n type: [String, Array, Object],\n default: '',\n },\n },\n\n data () {\n return {\n isFirstElementFocusable: false,\n };\n },\n\n computed: {\n hidePanel () {\n return this.groupContext.selected !== this.id \|\| this.hidden;\n },\n },\n\n async mounted () {\n const firstFocusableElement = await this.getFirstFocusableElement(returnFirstEl(this.$el));\n\n if (!firstFocusableElement) {\n this.isFirstElementFocusable = false;\n } else {\n // If the first focusable element isn't the first element in the panel,\n // then we need to set the panel tabindex to 0.\n // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n }\n },\n\n methods: {\n isFirstElementOfPanel (element) {\n let current = element;\n let isFirstElement = true;\n\n while (current) {\n if (current.previousElementSibling !== null) {\n isFirstElement = false;\n break;\n }\n current = current.parentNode !== returnFirstEl(this.$el) ? current.parentNode : null;\n }\n\n return isFirstElement;\n },\n },\n};\n</script>\n"],"mappings":";;;;;AAwBA,IAAK,IAAU;CACb,MAAM;CAEN,QAAQ,CAAC,EAAM;CAEf,QAAQ,CAAC,eAAe;CAExB,OAAO;EAIL,IAAI;GACF,MAAM;GACN,UAAU;GACX;EAKD,OAAO;GACL,MAAM;GACN,UAAU;GACX;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,eAAe;GACb,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,yBAAyB,IAC1B;;CAGH,UAAU,EACR,YAAa;AACX,SAAO,KAAK,aAAa,aAAa,KAAK,MAAM,KAAK;IAEzD;CAED,MAAM,UAAW;EACf,IAAM,IAAwB,MAAM,KAAK,yBAAyB,EAAc,KAAK,IAAI,CAAC;AAE1F,EAAK,IAMH,KAAK,0BAA0B,KAAK,sBAAsB,EAAsB,GALhF,KAAK,0BAA0B;;CASnC,SAAS,EACP,sBAAuB,GAAS;EAC9B,IAAI,IAAU,GACV,IAAiB;AAErB,SAAO,IAAS;AACd,OAAI,EAAQ,2BAA2B,MAAM;AAC3C,QAAiB;AACjB;;AAEF,OAAU,EAAQ,eAAe,EAAc,KAAK,IAAG,GAAyB,OAArB,EAAQ;;AAGrE,SAAO;IAEV;CACF;;;;;;;gBA1GC,EAYM,OAAA;EAVH,IAAE,YAAc,EAAA;EACjB,MAAK;EACJ,UAAU,EAAA,0BAAuB,KAAA;EACjC,mBAAe,UAAY,EAAA;EAC3B,eAAW,GAAK,EAAA;EAChB,OAAK,EAAE,EAAA,cAAa;EACrB,WAAQ;KAGR,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,IAAA,EAAA,GAAA,CAAA,CAAA,GAAA,CAVC,EAAA,UAAS,CAAA,CAAA"}

package/dist/lib/tab/tab.cjs CHANGED Viewed

@@ -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`),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;
+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={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;
 //# sourceMappingURL=tab.cjs.map

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

	@@ -1 +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-~~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"}
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 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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"}

package/dist/lib/tab/tab.js CHANGED Viewed

@@ -1,10 +1,8 @@
 import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import t from "../button/button.js";
-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
+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";
+//#region components/Tab/Tab.vue
 var u = {
-	compatConfig: { MODE: 3 },
 	name: "DtTab",
 	components: { DtButton: t },
 	inject: ["groupContext", "setFocus"],
@@ -37,12 +35,33 @@ 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 {
@@ -54,41 +73,106 @@ 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, n, u, d, f) {
-	let p = s("dt-button");
-	return a(), r(p, i({
-		id: `dt-tab-${n.id}`,
+function d(e, t, u, d, f, p) {
+	let m = s("dt-button");
+	return a(), n(m, i({
+		id: `dt-tab-${u.id}`,
 		class: [
-			"d-tab",
-			{ [d.TAB_IMPORTANCE_MODIFIERS.selected]: f.isSelected },
-			n.tabClass
+			"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 }
 		],
+		importance: p.buttonImportance,
+		kind: p.buttonKind,
+		active: p.buttonActive,
+		size: p.buttonSize,
 		role: "tab",
-		"aria-selected": `${f.isSelected}`,
-		"aria-controls": `dt-panel-${n.panelId}`,
-		"aria-label": n.label,
+		"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,
 		"data-qa": "dt-tab",
-		tabindex: f.isSelected ? "0" : "-1",
-		disabled: f.groupContext.disabled || n.disabled
-	}, e.$attrs, c(f.tabListeners)), {
+		tabindex: p.isFocusTarget ? "0" : "-1"
+	}, e.$attrs, c(p.tabListeners)), r({
 		default: l(() => [o(e.$slots, "default")]),
-		_: 3
-	}, 16, [
+		_: 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, [
 		"id",
 		"class",
+		"importance",
+		"kind",
+		"active",
+		"size",
 		"aria-selected",
 		"aria-controls",
 		"aria-label",
-		"tabindex",
-		"disabled"
+		"aria-disabled",
+		"label-class",
+		"leading-class",
+		"trailing-class",
+		"tabindex"
 	]);
 }
 var f = /* @__PURE__ */ e(u, [["render", d]]);

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

	@@ -1 +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-~~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"}
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 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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"}

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

@@ -1,2 +1,2 @@
-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;
+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;
 //# sourceMappingURL=tabs-constants.cjs.map

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

	@@ -1 +1 @@
1	- {"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~~"}
1	+ {"version":3,"file":"tabs-constants.cjs","names":[],"sources":["../../../components/Tab/TabsConstants.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"}

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

@@ -1,6 +1,37 @@
-//#region components/tab/tabs_constants.js
-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" };
+//#region components/Tab/TabsConstants.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"
+};
 //#endregion
-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 };
+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 };
 //# sourceMappingURL=tabs-constants.js.map

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

	@@ -1 +1 @@
1	- {"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~~"}
1	+ {"version":3,"file":"tabs-constants.js","names":[],"sources":["../../../components/Tab/TabsConstants.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"}

package/dist/lib/text/index.cjs ADDED Viewed

@@ -0,0 +1 @@

+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./text-constants.cjs`),t=require(`./text.cjs`);exports.DtText=t.default,exports.TEXT_ALIGN_MODIFIERS=e.TEXT_ALIGN_MODIFIERS,exports.TEXT_BOX_TRIM_MODIFIERS=e.TEXT_BOX_TRIM_MODIFIERS,exports.TEXT_DENSITY_MODIFIERS=e.TEXT_DENSITY_MODIFIERS,exports.TEXT_HEADLINE_ONLY_SIZES=e.TEXT_HEADLINE_ONLY_SIZES,exports.TEXT_KIND_MODIFIERS=e.TEXT_KIND_MODIFIERS,exports.TEXT_LINE_CLAMP_CLASS=e.TEXT_LINE_CLAMP_CLASS,exports.TEXT_NUMERIC_CLASS=e.TEXT_NUMERIC_CLASS,exports.TEXT_SIZE_MODIFIERS=e.TEXT_SIZE_MODIFIERS,exports.TEXT_STRENGTH_MODIFIERS=e.TEXT_STRENGTH_MODIFIERS,exports.TEXT_TONE_MODIFIERS=e.TEXT_TONE_MODIFIERS,exports.TEXT_TRUNCATE_CLASS=e.TEXT_TRUNCATE_CLASS,exports.TEXT_WRAP_MODIFIERS=e.TEXT_WRAP_MODIFIERS;

package/dist/lib/text/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+import { TEXT_ALIGN_MODIFIERS as e, TEXT_BOX_TRIM_MODIFIERS as t, TEXT_DENSITY_MODIFIERS as n, TEXT_HEADLINE_ONLY_SIZES as r, TEXT_KIND_MODIFIERS as i, TEXT_LINE_CLAMP_CLASS as a, TEXT_NUMERIC_CLASS as o, TEXT_SIZE_MODIFIERS as s, TEXT_STRENGTH_MODIFIERS as c, TEXT_TONE_MODIFIERS as l, TEXT_TRUNCATE_CLASS as u, TEXT_WRAP_MODIFIERS as d } from "./text-constants.js";
+import f from "./text.js";
+export { f as DtText, e as TEXT_ALIGN_MODIFIERS, t as TEXT_BOX_TRIM_MODIFIERS, n as TEXT_DENSITY_MODIFIERS, r as TEXT_HEADLINE_ONLY_SIZES, i as TEXT_KIND_MODIFIERS, a as TEXT_LINE_CLAMP_CLASS, o as TEXT_NUMERIC_CLASS, s as TEXT_SIZE_MODIFIERS, c as TEXT_STRENGTH_MODIFIERS, l as TEXT_TONE_MODIFIERS, u as TEXT_TRUNCATE_CLASS, d as TEXT_WRAP_MODIFIERS };

package/dist/lib/text/text-constants.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={headline:`d-text-headline`,body:`d-text-body`,label:`d-text-label`,code:`d-text-code`},t={headline:[`700`,`600`,`500`,`400`,`300`,`200`,`100`,`3xl`,`2xl`,`xl`,`lg`,`md`,`sm`,`xs`],body:[`400`,`300`,`200`,`100`,`lg`,`md`,`sm`,`xs`],label:[`400`,`300`,`200`,`100`,`lg`,`md`,`sm`,`xs`],code:[`400`,`300`,`200`,`100`,`lg`,`md`,`sm`,`xs`]},n=[`700`,`600`,`500`,`3xl`,`2xl`,`xl`],r={100:`xs`,200:`sm`,300:`md`,400:`lg`,500:`xl`,600:`2xl`,700:`3xl`},i={primary:`d-text--tone-primary`,secondary:`d-text--tone-secondary`,tertiary:`d-text--tone-tertiary`,muted:`d-text--tone-muted`,disabled:`d-text--tone-disabled`,placeholder:`d-text--tone-placeholder`,critical:`d-text--tone-critical`,"critical-strong":`d-text--tone-critical-strong`,positive:`d-text--tone-positive`,"positive-strong":`d-text--tone-positive-strong`,warning:`d-text--tone-warning`,info:`d-text--tone-info`,"info-strong":`d-text--tone-info-strong`,"neutral-black":`d-text--tone-neutral-black`,"neutral-white":`d-text--tone-neutral-white`},a={start:`d-text--align-start`,center:`d-text--align-center`,end:`d-text--align-end`,justify:`d-text--align-justify`},o=`d-text--numeric`,s=`d-truncate`,c=`d-text--clamp`,l={wrap:`d-text--wrap-wrap`,nowrap:`d-text--wrap-nowrap`,balance:`d-text--wrap-balance`,pretty:`d-text--wrap-pretty`},u={start:`d-text--trim-start`,end:`d-text--trim-end`,both:`d-text--trim-both`},d={bold:`d-text--fw-bold`,semibold:`d-text--fw-semibold`,medium:`d-text--fw-medium`,normal:`d-text--fw-normal`},f={100:`d-text--lh-100`,200:`d-text--lh-200`,300:`d-text--lh-300`,400:`d-text--lh-400`,500:`d-text--lh-500`,600:`d-text--lh-600`},p={TEXT_KIND_MODIFIERS:e,TEXT_SIZE_MODIFIERS:t,TEXT_HEADLINE_ONLY_SIZES:n,TEXT_TONE_MODIFIERS:i,TEXT_ALIGN_MODIFIERS:a,TEXT_NUMERIC_CLASS:o,TEXT_TRUNCATE_CLASS:s,TEXT_LINE_CLAMP_CLASS:c,TEXT_WRAP_MODIFIERS:l,TEXT_BOX_TRIM_MODIFIERS:u,TEXT_STRENGTH_MODIFIERS:d,TEXT_DENSITY_MODIFIERS:f};exports.TEXT_ALIGN_MODIFIERS=a,exports.TEXT_BOX_TRIM_MODIFIERS=u,exports.TEXT_DENSITY_MODIFIERS=f,exports.TEXT_HEADLINE_ONLY_SIZES=n,exports.TEXT_KIND_MODIFIERS=e,exports.TEXT_LINE_CLAMP_CLASS=c,exports.TEXT_NUMERIC_CLASS=o,exports.TEXT_SIZE_MAP=r,exports.TEXT_SIZE_MODIFIERS=t,exports.TEXT_STRENGTH_MODIFIERS=d,exports.TEXT_TONE_MODIFIERS=i,exports.TEXT_TRUNCATE_CLASS=s,exports.TEXT_WRAP_MODIFIERS=l,exports.default=p;
2	+ //# sourceMappingURL=text-constants.cjs.map

package/dist/lib/text/text-constants.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"text-constants.cjs","names":[],"sources":["../../../components/Text/TextConstants.js"],"sourcesContent":["export const TEXT_KIND_MODIFIERS = {\n headline: 'd-text-headline',\n body: 'd-text-body',\n label: 'd-text-label',\n code: 'd-text-code',\n};\n\nexport const TEXT_SIZE_MODIFIERS = {\n headline: ['700', '600', '500', '400', '300', '200', '100', '3xl', '2xl', 'xl', 'lg', 'md', 'sm', 'xs'],\n body: ['400', '300', '200', '100', 'lg', 'md', 'sm', 'xs'],\n label: ['400', '300', '200', '100', 'lg', 'md', 'sm', 'xs'],\n code: ['400', '300', '200', '100', 'lg', 'md', 'sm', 'xs'],\n};\n\n// Sizes that are only valid for headline kind - using these with other kinds throws an error\nexport const TEXT_HEADLINE_ONLY_SIZES = ['700', '600', '500', '3xl', '2xl', 'xl'];\n\n// Numeric → t-shirt CSS class suffix mapping\nexport const TEXT_SIZE_MAP = {\n 100: 'xs',\n 200: 'sm',\n 300: 'md',\n 400: 'lg',\n 500: 'xl',\n 600: '2xl',\n 700: '3xl',\n};\n\nexport const TEXT_TONE_MODIFIERS = {\n 'primary': 'd-text--tone-primary',\n 'secondary': 'd-text--tone-secondary',\n 'tertiary': 'd-text--tone-tertiary',\n 'muted': 'd-text--tone-muted',\n 'disabled': 'd-text--tone-disabled',\n 'placeholder': 'd-text--tone-placeholder',\n 'critical': 'd-text--tone-critical',\n 'critical-strong': 'd-text--tone-critical-strong',\n 'positive': 'd-text--tone-positive',\n 'positive-strong': 'd-text--tone-positive-strong',\n 'warning': 'd-text--tone-warning',\n 'info': 'd-text--tone-info',\n 'info-strong': 'd-text--tone-info-strong',\n 'neutral-black': 'd-text--tone-neutral-black',\n 'neutral-white': 'd-text--tone-neutral-white',\n};\n\nexport const TEXT_ALIGN_MODIFIERS = {\n start: 'd-text--align-start',\n center: 'd-text--align-center',\n end: 'd-text--align-end',\n justify: 'd-text--align-justify',\n};\n\nexport const TEXT_NUMERIC_CLASS = 'd-text--numeric';\nexport const TEXT_TRUNCATE_CLASS = 'd-truncate';\nexport const TEXT_LINE_CLAMP_CLASS = 'd-text--clamp';\n\nexport const TEXT_WRAP_MODIFIERS = {\n wrap: 'd-text--wrap-wrap',\n nowrap: 'd-text--wrap-nowrap',\n balance: 'd-text--wrap-balance',\n pretty: 'd-text--wrap-pretty',\n};\n\nexport const TEXT_BOX_TRIM_MODIFIERS = {\n start: 'd-text--trim-start',\n end: 'd-text--trim-end',\n both: 'd-text--trim-both',\n};\n\nexport const TEXT_STRENGTH_MODIFIERS = {\n bold: 'd-text--fw-bold',\n semibold: 'd-text--fw-semibold',\n medium: 'd-text--fw-medium',\n normal: 'd-text--fw-normal',\n};\n\nexport const TEXT_DENSITY_MODIFIERS = {\n 100: 'd-text--lh-100',\n 200: 'd-text--lh-200',\n 300: 'd-text--lh-300',\n 400: 'd-text--lh-400',\n 500: 'd-text--lh-500',\n 600: 'd-text--lh-600',\n};\n\nexport default {\n TEXT_KIND_MODIFIERS,\n TEXT_SIZE_MODIFIERS,\n TEXT_HEADLINE_ONLY_SIZES,\n TEXT_TONE_MODIFIERS,\n TEXT_ALIGN_MODIFIERS,\n TEXT_NUMERIC_CLASS,\n TEXT_TRUNCATE_CLASS,\n TEXT_LINE_CLAMP_CLASS,\n TEXT_WRAP_MODIFIERS,\n TEXT_BOX_TRIM_MODIFIERS,\n TEXT_STRENGTH_MODIFIERS,\n TEXT_DENSITY_MODIFIERS,\n};\n"],"mappings":"+FAAA,IAAa,EAAsB,CACjC,SAAU,kBACV,KAAM,cACN,MAAO,eACP,KAAM,cACP,CAEY,EAAsB,CACjC,SAAU,CAAC,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,MAAO,KAAM,KAAM,KAAM,KAAM,KAAK,CACvG,KAAM,CAAC,MAAO,MAAO,MAAO,MAAO,KAAM,KAAM,KAAM,KAAK,CAC1D,MAAO,CAAC,MAAO,MAAO,MAAO,MAAO,KAAM,KAAM,KAAM,KAAK,CAC3D,KAAM,CAAC,MAAO,MAAO,MAAO,MAAO,KAAM,KAAM,KAAM,KAAK,CAC3D,CAGY,EAA2B,CAAC,MAAO,MAAO,MAAO,MAAO,MAAO,KAAK,CAGpE,EAAgB,CAC3B,IAAK,KACL,IAAK,KACL,IAAK,KACL,IAAK,KACL,IAAK,KACL,IAAK,MACL,IAAK,MACN,CAEY,EAAsB,CACjC,QAAW,uBACX,UAAa,yBACb,SAAY,wBACZ,MAAS,qBACT,SAAY,wBACZ,YAAe,2BACf,SAAY,wBACZ,kBAAmB,+BACnB,SAAY,wBACZ,kBAAmB,+BACnB,QAAW,uBACX,KAAQ,oBACR,cAAe,2BACf,gBAAiB,6BACjB,gBAAiB,6BAClB,CAEY,EAAuB,CAClC,MAAO,sBACP,OAAQ,uBACR,IAAK,oBACL,QAAS,wBACV,CAEY,EAAqB,kBACrB,EAAsB,aACtB,EAAwB,gBAExB,EAAsB,CACjC,KAAM,oBACN,OAAQ,sBACR,QAAS,uBACT,OAAQ,sBACT,CAEY,EAA0B,CACrC,MAAO,qBACP,IAAK,mBACL,KAAM,oBACP,CAEY,EAA0B,CACrC,KAAM,kBACN,SAAU,sBACV,OAAQ,oBACR,OAAQ,oBACT,CAEY,EAAyB,CACpC,IAAK,iBACL,IAAK,iBACL,IAAK,iBACL,IAAK,iBACL,IAAK,iBACL,IAAK,iBACN,CAED,EAAe,CACb,sBACA,sBACA,2BACA,sBACA,uBACA,qBACA,sBACA,wBACA,sBACA,0BACA,0BACA,yBACD"}