@dialpad/dialtone-vue 3.221.1 → 3.222.0-next.2

package/dist/lib/stack/stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.js","names":[],"sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    data-qa=\"dt-stack\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      defaultAlign,\n      defaultJustify,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from './stack_constants';\nimport { directionValidator, gapValidator, alignValidator, justifyValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass, getDefaultAlignClass, getDefaultJustifyClass } from './utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overridden\n     * using the `align` and `justify` props.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n\n    /**\n     * The align property controls the alignment of items along the cross axis.\n     * The align can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default align with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * If not specified, alignment uses CSS defaults: stretch for column direction,\n     * center for row/row-reverse directions (set by CSS).\n     * Valid values are 'start', 'center', 'end', 'stretch', 'baseline'.\n     */\n    align: {\n      type: [String, Object],\n      validator: (align) => alignValidator(align),\n    },\n\n    /**\n     * The justify property controls the justification of items along the main axis.\n     * The justify can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default justify with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are 'start', 'center', 'end', 'space-around', 'space-between', 'space-evenly'.\n     */\n    justify: {\n      type: [String, Object],\n      default: 'start',\n      validator: (justify) => justifyValidator(justify),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n      DT_STACK_ALIGN,\n      DT_STACK_JUSTIFY,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    defaultAlign () {\n      return getDefaultAlignClass(this.align);\n    },\n\n    defaultJustify () {\n      return getDefaultJustifyClass(this.justify);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap, this.align, this.justify);\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;AAuBA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,OAAO;EASL,WAAW;GACT,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,YAAY,MAAc,EAAmB,EAAU;GACxD;EAKD,IAAI;GACF,MAAM;GACN,SAAS;GACV;EAUD,KAAK;GACH,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,YAAY,MAAQ,EAAa,EAAI;GACtC;EAYD,OAAO;GACL,MAAM,CAAC,QAAQ,OAAO;GACtB,YAAY,MAAU,EAAe,EAAM;GAC5C;EAUD,SAAS;GACP,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,YAAY,MAAY,EAAiB,EAAQ;GAClD;EACF;CAED,OAAQ;AACN,SAAO;GACL;GACA;GACA;GACA;GACA;GACD;;CAGH,UAAU;EACR,aAAc;AACZ,UAAO,EAAmB,KAAK,IAAI;;EAGrC,mBAAoB;AAClB,UAAO,EAAyB,KAAK,UAAU;;EAGjD,eAAgB;AACd,UAAO,EAAqB,KAAK,MAAM;;EAGzC,iBAAkB;AAChB,UAAO,EAAuB,KAAK,QAAQ;;EAG7C,kBAAmB;AACjB,UAAO,EAAqB,KAAK,WAAW,KAAK,KAAK,KAAK,OAAO,KAAK,QAAQ;;EAElF;CACF;;aA5HC,EAcY,EAbL,EAAA,GAAE,EAAA;EACP,WAAQ;EACP,OAAK,EAAA;;GAA2B,EAAA;GAAwB,EAAA;GAAkB,EAAA;GAAoB,EAAA;GAAsB,EAAA;;;mBAU7G,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"stack.js","names":[],"sources":["../../../components/Stack/Stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    data-qa=\"dt-stack\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      defaultAlign,\n      defaultJustify,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from './StackConstants';\nimport { directionValidator, gapValidator, alignValidator, justifyValidator } from './Validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass, getDefaultAlignClass, getDefaultJustifyClass } from './Utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overridden\n     * using the `align` and `justify` props.\n     *\n     * @values column, row, row-reverse, column-reverse\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * @values 0, 50, 100, 200, 300, 350, 400, 450, 500, 525, 550, 600, 650, 700\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n\n    /**\n     * The align property controls the alignment of items along the cross axis.\n     * The align can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default align with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * If not specified, alignment uses CSS defaults: stretch for column direction,\n     * center for row/row-reverse directions (set by CSS).\n     * @values start, center, end, stretch, baseline\n     */\n    align: {\n      type: [String, Object],\n      validator: (align) => alignValidator(align),\n    },\n\n    /**\n     * The justify property controls the justification of items along the main axis.\n     * The justify can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default justify with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * @values start, center, end, space-around, space-between, space-evenly\n     */\n    justify: {\n      type: [String, Object],\n      default: 'start',\n      validator: (justify) => justifyValidator(justify),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n      DT_STACK_ALIGN,\n      DT_STACK_JUSTIFY,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    defaultAlign () {\n      return getDefaultAlignClass(this.align);\n    },\n\n    defaultJustify () {\n      return getDefaultJustifyClass(this.justify);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap, this.align, this.justify);\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;AAuBA,IAAK,IAAU;CACb,MAAM;CAEN,OAAO;EAWL,WAAW;GACT,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,YAAY,MAAc,EAAmB,EAAU;GACxD;EAKD,IAAI;GACF,MAAM;GACN,SAAS;GACV;EAUD,KAAK;GACH,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,YAAY,MAAQ,EAAa,EAAI;GACtC;EAYD,OAAO;GACL,MAAM,CAAC,QAAQ,OAAO;GACtB,YAAY,MAAU,EAAe,EAAM;GAC5C;EAUD,SAAS;GACP,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,YAAY,MAAY,EAAiB,EAAQ;GAClD;EACF;CAED,OAAQ;AACN,SAAO;GACL;GACA;GACA;GACA;GACA;GACD;;CAGH,UAAU;EACR,aAAc;AACZ,UAAO,EAAmB,KAAK,IAAI;;EAGrC,mBAAoB;AAClB,UAAO,EAAyB,KAAK,UAAU;;EAGjD,eAAgB;AACd,UAAO,EAAqB,KAAK,MAAM;;EAGzC,iBAAkB;AAChB,UAAO,EAAuB,KAAK,QAAQ;;EAG7C,kBAAmB;AACjB,UAAO,EAAqB,KAAK,WAAW,KAAK,KAAK,KAAK,OAAO,KAAK,QAAQ;;EAElF;CACF;;aA7HC,EAcY,EAbL,EAAA,GAAE,EAAA;EACP,WAAQ;EACP,OAAK,EAAA;;GAA2B,EAAA;GAAwB,EAAA;GAAkB,EAAA;GAAoB,EAAA;GAAsB,EAAA;;;mBAU7G,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/lib/stack/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","names":["DT_STACK_DIRECTION","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_GAP","DT_STACK_ALIGN","DT_STACK_JUSTIFY"],"sources":["../../../components/stack/utils.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\n/**\n * Generic helper to extract default value from string or object props\n * @param {string|Object} value - The prop value\n * @returns {string|null} The default value or null\n */\nfunction _getDefaultValue (value) {\n  if (typeof value === 'string') return value;\n  if (typeof value === 'object' && value !== null) return value.default;\n  return null;\n}\n\nfunction _getValidDirection (direction) {\n  if (typeof direction === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (typeof direction === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\n/**\n * Generic helper to generate responsive classes for any prop\n * @param {Object} propValue - The prop value object with breakpoint keys\n * @param {string} propName - The name of the prop (e.g., 'gap', 'align')\n * @param {Array|Object} validValues - Valid values (array or object for direction)\n * @param {string} classPrefix - CSS class prefix (default: 'd-stack')\n * @returns {Array} Array of CSS class names\n */\nfunction _getResponsiveClasses (propValue, propName, validValues, classPrefix = 'd-stack') {\n  if (typeof propValue !== 'object' || propValue === null) return [];\n\n  return DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n    const value = propValue[breakpoint];\n    if (!value) return null;\n\n    // Handle both array (gap, align, justify) and object (direction) validValues\n    const isValid = Array.isArray(validValues)\n      ? validValues.includes(value)\n      : value in validValues;\n\n    // For direction, we don't need the prop name in the class\n    const className = propName === ''\n      ? `${classPrefix}--${breakpoint}-${value}`\n      : `${classPrefix}--${breakpoint}-${propName}-${value}`;\n\n    return isValid ? className : null;\n  });\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResponsiveDirectionClasses (direction) {\n  return _getResponsiveClasses(direction, '', DT_STACK_DIRECTION);\n}\n\nfunction getResponsiveGapClasses (gap) {\n  return _getResponsiveClasses(gap, 'gap', DT_STACK_GAP);\n}\n\nfunction getResponsiveAlignClasses (align) {\n  return _getResponsiveClasses(align, 'align', DT_STACK_ALIGN);\n}\n\nfunction getResponsiveJustifyClasses (justify) {\n  if (typeof justify !== 'object' || justify === null) return [];\n\n  return DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n    const value = justify[breakpoint];\n    if (!value) return null;\n\n    const isValid = DT_STACK_JUSTIFY.includes(value);\n    const normalizedValue = _normalizeJustifyForClass(value);\n\n    return isValid ? `d-stack--${breakpoint}-justify-${normalizedValue}` : null;\n  });\n}\n\nexport function getResponsiveClasses (direction, gap, align, justify) {\n  return [\n    ...getResponsiveDirectionClasses(direction),\n    ...getResponsiveGapClasses(gap),\n    ...getResponsiveAlignClasses(align),\n    ...getResponsiveJustifyClasses(justify),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getDefaultValue(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n\nexport function getDefaultAlignClass (align) {\n  const validAlign = _getDefaultValue(align);\n  return DT_STACK_ALIGN.includes(validAlign) ? `d-stack--align-${validAlign}` : null;\n}\n\n/**\n * Normalizes justify value to CSS class suffix.\n * Maps CSS-aligned values (space-around, space-between, space-evenly) to shorthand\n * (around, between, evenly) for CSS class generation.\n * @param {string} value - The justify value\n * @returns {string} The normalized value for CSS class\n */\nfunction _normalizeJustifyForClass (value) {\n  const normalizeMap = {\n    'space-around': 'around',\n    'space-between': 'between',\n    'space-evenly': 'evenly',\n  };\n  return normalizeMap[value] || value;\n}\n\nexport function getDefaultJustifyClass (justify) {\n  const validJustify = _getDefaultValue(justify);\n  const normalizedJustify = _normalizeJustifyForClass(validJustify);\n  return DT_STACK_JUSTIFY.includes(validJustify) ? `d-stack--justify-${normalizedJustify}` : null;\n}"],"mappings":"4GAEA,SAAS,EAAqB,EAAW,CACvC,OAAO,IAAcA,EAAAA,mBAAmB,QAQ1C,SAAS,EAAkB,EAAO,CAGhC,OAFI,OAAO,GAAU,SAAiB,EAClC,OAAO,GAAU,UAAY,EAAuB,EAAM,QACvD,KAGT,SAAS,EAAoB,EAAW,CACtC,GAAI,OAAO,GAAc,SACvB,OAAQ,EAAoB,EAAU,CAAmC,KAAhCA,EAAAA,mBAAmB,MACnD,OAAO,GAAc,SAAU,CACxC,GAAM,CAAE,QAAS,GAAiB,EAElC,OAAQ,EAAoB,EAAa,CAAsC,KAAnCA,EAAAA,mBAAmB,QACxD,OAAO,KAWlB,SAAS,EAAuB,EAAW,EAAU,EAAa,EAAc,UAAW,CAGzF,OAFI,OAAO,GAAc,WAAY,EAA2B,EAAE,CAE3DC,EAAAA,gCAAgC,IAAK,GAAe,CACzD,IAAM,EAAQ,EAAU,GACxB,GAAI,CAAC,EAAO,OAAO,KAGnB,IAAM,EAAU,MAAM,QAAQ,EAAY,CACtC,EAAY,SAAS,EAAM,CAC3B,KAAS,EAGP,EAAY,IAAa,GAC3B,GAAG,EAAY,IAAI,EAAW,GAAG,IACjC,GAAG,EAAY,IAAI,EAAW,GAAG,EAAS,GAAG,IAEjD,OAAO,EAAU,EAAY,MAC7B,CAGJ,SAAgB,EAA0B,EAAW,CACnD,OAAO,EAAmB,EAAU,CAChC,YAAYD,EAAAA,mBAAmB,EAAmB,EAAU,IAC5D,KAGN,SAAS,EAA+B,EAAW,CACjD,OAAO,EAAsB,EAAW,GAAIA,EAAAA,mBAAmB,CAGjE,SAAS,EAAyB,EAAK,CACrC,OAAO,EAAsB,EAAK,MAAOE,EAAAA,aAAa,CAGxD,SAAS,EAA2B,EAAO,CACzC,OAAO,EAAsB,EAAO,QAASC,EAAAA,eAAe,CAG9D,SAAS,EAA6B,EAAS,CAG7C,OAFI,OAAO,GAAY,WAAY,EAAyB,EAAE,CAEvDF,EAAAA,gCAAgC,IAAK,GAAe,CACzD,IAAM,EAAQ,EAAQ,GACtB,GAAI,CAAC,EAAO,OAAO,KAEnB,IAAM,EAAUG,EAAAA,iBAAiB,SAAS,EAAM,CAC1C,EAAkB,EAA0B,EAAM,CAExD,OAAO,EAAU,YAAY,EAAW,WAAW,IAAoB,MACvE,CAGJ,SAAgB,EAAsB,EAAW,EAAK,EAAO,EAAS,CACpE,MAAO,CACL,GAAG,EAA8B,EAAU,CAC3C,GAAG,EAAwB,EAAI,CAC/B,GAAG,EAA0B,EAAM,CACnC,GAAG,EAA4B,EAAQ,CACxC,CAGH,SAAgB,EAAoB,EAAK,CACvC,IAAM,EAAW,EAAiB,EAAI,CACtC,OAAOF,EAAAA,aAAa,SAAS,EAAS,CAAG,gBAAgB,IAAa,KAGxE,SAAgB,EAAsB,EAAO,CAC3C,IAAM,EAAa,EAAiB,EAAM,CAC1C,OAAOC,EAAAA,eAAe,SAAS,EAAW,CAAG,kBAAkB,IAAe,KAUhF,SAAS,EAA2B,EAAO,CAMzC,MALqB,CACnB,eAAgB,SAChB,gBAAiB,UACjB,eAAgB,SACjB,CACmB,IAAU,EAGhC,SAAgB,EAAwB,EAAS,CAC/C,IAAM,EAAe,EAAiB,EAAQ,CACxC,EAAoB,EAA0B,EAAa,CACjE,OAAOC,EAAAA,iBAAiB,SAAS,EAAa,CAAG,oBAAoB,IAAsB"}
+{"version":3,"file":"utils.cjs","names":["DT_STACK_DIRECTION","DT_STACK_RESPONSIVE_BREAKPOINTS","DT_STACK_GAP","DT_STACK_ALIGN","DT_STACK_JUSTIFY"],"sources":["../../../components/Stack/Utils.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from '@/components/Stack/StackConstants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\n/**\n * Generic helper to extract default value from string or object props\n * @param {string|Object} value - The prop value\n * @returns {string|null} The default value or null\n */\nfunction _getDefaultValue (value) {\n  if (typeof value === 'string') return value;\n  if (typeof value === 'object' && value !== null) return value.default;\n  return null;\n}\n\nfunction _getValidDirection (direction) {\n  if (typeof direction === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (typeof direction === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\n/**\n * Generic helper to generate responsive classes for any prop\n * @param {Object} propValue - The prop value object with breakpoint keys\n * @param {string} propName - The name of the prop (e.g., 'gap', 'align')\n * @param {Array|Object} validValues - Valid values (array or object for direction)\n * @param {string} classPrefix - CSS class prefix (default: 'd-stack')\n * @returns {Array} Array of CSS class names\n */\nfunction _getResponsiveClasses (propValue, propName, validValues, classPrefix = 'd-stack') {\n  if (typeof propValue !== 'object' || propValue === null) return [];\n\n  return DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n    const value = propValue[breakpoint];\n    if (!value) return null;\n\n    // Handle both array (gap, align, justify) and object (direction) validValues\n    const isValid = Array.isArray(validValues)\n      ? validValues.includes(value)\n      : value in validValues;\n\n    // For direction, we don't need the prop name in the class\n    const className = propName === ''\n      ? `${classPrefix}--${breakpoint}-${value}`\n      : `${classPrefix}--${breakpoint}-${propName}-${value}`;\n\n    return isValid ? className : null;\n  });\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResponsiveDirectionClasses (direction) {\n  return _getResponsiveClasses(direction, '', DT_STACK_DIRECTION);\n}\n\nfunction getResponsiveGapClasses (gap) {\n  return _getResponsiveClasses(gap, 'gap', DT_STACK_GAP);\n}\n\nfunction getResponsiveAlignClasses (align) {\n  return _getResponsiveClasses(align, 'align', DT_STACK_ALIGN);\n}\n\nfunction getResponsiveJustifyClasses (justify) {\n  if (typeof justify !== 'object' || justify === null) return [];\n\n  return DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n    const value = justify[breakpoint];\n    if (!value) return null;\n\n    const isValid = DT_STACK_JUSTIFY.includes(value);\n    const normalizedValue = _normalizeJustifyForClass(value);\n\n    return isValid ? `d-stack--${breakpoint}-justify-${normalizedValue}` : null;\n  });\n}\n\nexport function getResponsiveClasses (direction, gap, align, justify) {\n  return [\n    ...getResponsiveDirectionClasses(direction),\n    ...getResponsiveGapClasses(gap),\n    ...getResponsiveAlignClasses(align),\n    ...getResponsiveJustifyClasses(justify),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getDefaultValue(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n\nexport function getDefaultAlignClass (align) {\n  const validAlign = _getDefaultValue(align);\n  return DT_STACK_ALIGN.includes(validAlign) ? `d-stack--align-${validAlign}` : null;\n}\n\n/**\n * Normalizes justify value to CSS class suffix.\n * Maps CSS-aligned values (space-around, space-between, space-evenly) to shorthand\n * (around, between, evenly) for CSS class generation.\n * @param {string} value - The justify value\n * @returns {string} The normalized value for CSS class\n */\nfunction _normalizeJustifyForClass (value) {\n  const normalizeMap = {\n    'space-around': 'around',\n    'space-between': 'between',\n    'space-evenly': 'evenly',\n  };\n  return normalizeMap[value] || value;\n}\n\nexport function getDefaultJustifyClass (justify) {\n  const validJustify = _getDefaultValue(justify);\n  const normalizedJustify = _normalizeJustifyForClass(validJustify);\n  return DT_STACK_JUSTIFY.includes(validJustify) ? `d-stack--justify-${normalizedJustify}` : null;\n}"],"mappings":"4GAEA,SAAS,EAAqB,EAAW,CACvC,OAAO,IAAcA,EAAAA,mBAAmB,QAQ1C,SAAS,EAAkB,EAAO,CAGhC,OAFI,OAAO,GAAU,SAAiB,EAClC,OAAO,GAAU,UAAY,EAAuB,EAAM,QACvD,KAGT,SAAS,EAAoB,EAAW,CACtC,GAAI,OAAO,GAAc,SACvB,OAAQ,EAAoB,EAAU,CAAmC,KAAhCA,EAAAA,mBAAmB,MACnD,OAAO,GAAc,SAAU,CACxC,GAAM,CAAE,QAAS,GAAiB,EAElC,OAAQ,EAAoB,EAAa,CAAsC,KAAnCA,EAAAA,mBAAmB,QACxD,OAAO,KAWlB,SAAS,EAAuB,EAAW,EAAU,EAAa,EAAc,UAAW,CAGzF,OAFI,OAAO,GAAc,WAAY,EAA2B,EAAE,CAE3DC,EAAAA,gCAAgC,IAAK,GAAe,CACzD,IAAM,EAAQ,EAAU,GACxB,GAAI,CAAC,EAAO,OAAO,KAGnB,IAAM,EAAU,MAAM,QAAQ,EAAY,CACtC,EAAY,SAAS,EAAM,CAC3B,KAAS,EAGP,EAAY,IAAa,GAC3B,GAAG,EAAY,IAAI,EAAW,GAAG,IACjC,GAAG,EAAY,IAAI,EAAW,GAAG,EAAS,GAAG,IAEjD,OAAO,EAAU,EAAY,MAC7B,CAGJ,SAAgB,EAA0B,EAAW,CACnD,OAAO,EAAmB,EAAU,CAChC,YAAYD,EAAAA,mBAAmB,EAAmB,EAAU,IAC5D,KAGN,SAAS,EAA+B,EAAW,CACjD,OAAO,EAAsB,EAAW,GAAIA,EAAAA,mBAAmB,CAGjE,SAAS,EAAyB,EAAK,CACrC,OAAO,EAAsB,EAAK,MAAOE,EAAAA,aAAa,CAGxD,SAAS,EAA2B,EAAO,CACzC,OAAO,EAAsB,EAAO,QAASC,EAAAA,eAAe,CAG9D,SAAS,EAA6B,EAAS,CAG7C,OAFI,OAAO,GAAY,WAAY,EAAyB,EAAE,CAEvDF,EAAAA,gCAAgC,IAAK,GAAe,CACzD,IAAM,EAAQ,EAAQ,GACtB,GAAI,CAAC,EAAO,OAAO,KAEnB,IAAM,EAAUG,EAAAA,iBAAiB,SAAS,EAAM,CAC1C,EAAkB,EAA0B,EAAM,CAExD,OAAO,EAAU,YAAY,EAAW,WAAW,IAAoB,MACvE,CAGJ,SAAgB,EAAsB,EAAW,EAAK,EAAO,EAAS,CACpE,MAAO,CACL,GAAG,EAA8B,EAAU,CAC3C,GAAG,EAAwB,EAAI,CAC/B,GAAG,EAA0B,EAAM,CACnC,GAAG,EAA4B,EAAQ,CACxC,CAGH,SAAgB,EAAoB,EAAK,CACvC,IAAM,EAAW,EAAiB,EAAI,CACtC,OAAOF,EAAAA,aAAa,SAAS,EAAS,CAAG,gBAAgB,IAAa,KAGxE,SAAgB,EAAsB,EAAO,CAC3C,IAAM,EAAa,EAAiB,EAAM,CAC1C,OAAOC,EAAAA,eAAe,SAAS,EAAW,CAAG,kBAAkB,IAAe,KAUhF,SAAS,EAA2B,EAAO,CAMzC,MALqB,CACnB,eAAgB,SAChB,gBAAiB,UACjB,eAAgB,SACjB,CACmB,IAAU,EAGhC,SAAgB,EAAwB,EAAS,CAC/C,IAAM,EAAe,EAAiB,EAAQ,CACxC,EAAoB,EAA0B,EAAa,CACjE,OAAOC,EAAAA,iBAAiB,SAAS,EAAa,CAAG,oBAAoB,IAAsB"}

package/dist/lib/stack/utils.js

@@ -1,5 +1,5 @@
 import { DT_STACK_ALIGN as e, DT_STACK_DIRECTION as t, DT_STACK_GAP as n, DT_STACK_JUSTIFY as r, DT_STACK_RESPONSIVE_BREAKPOINTS as i } from "./stack-constants.js";
-//#region components/stack/utils.js
+//#region components/Stack/Utils.js
 function a(e) {
 	return e === t.default;
 }

package/dist/lib/stack/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../components/stack/utils.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\n/**\n * Generic helper to extract default value from string or object props\n * @param {string|Object} value - The prop value\n * @returns {string|null} The default value or null\n */\nfunction _getDefaultValue (value) {\n  if (typeof value === 'string') return value;\n  if (typeof value === 'object' && value !== null) return value.default;\n  return null;\n}\n\nfunction _getValidDirection (direction) {\n  if (typeof direction === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (typeof direction === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\n/**\n * Generic helper to generate responsive classes for any prop\n * @param {Object} propValue - The prop value object with breakpoint keys\n * @param {string} propName - The name of the prop (e.g., 'gap', 'align')\n * @param {Array|Object} validValues - Valid values (array or object for direction)\n * @param {string} classPrefix - CSS class prefix (default: 'd-stack')\n * @returns {Array} Array of CSS class names\n */\nfunction _getResponsiveClasses (propValue, propName, validValues, classPrefix = 'd-stack') {\n  if (typeof propValue !== 'object' || propValue === null) return [];\n\n  return DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n    const value = propValue[breakpoint];\n    if (!value) return null;\n\n    // Handle both array (gap, align, justify) and object (direction) validValues\n    const isValid = Array.isArray(validValues)\n      ? validValues.includes(value)\n      : value in validValues;\n\n    // For direction, we don't need the prop name in the class\n    const className = propName === ''\n      ? `${classPrefix}--${breakpoint}-${value}`\n      : `${classPrefix}--${breakpoint}-${propName}-${value}`;\n\n    return isValid ? className : null;\n  });\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResponsiveDirectionClasses (direction) {\n  return _getResponsiveClasses(direction, '', DT_STACK_DIRECTION);\n}\n\nfunction getResponsiveGapClasses (gap) {\n  return _getResponsiveClasses(gap, 'gap', DT_STACK_GAP);\n}\n\nfunction getResponsiveAlignClasses (align) {\n  return _getResponsiveClasses(align, 'align', DT_STACK_ALIGN);\n}\n\nfunction getResponsiveJustifyClasses (justify) {\n  if (typeof justify !== 'object' || justify === null) return [];\n\n  return DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n    const value = justify[breakpoint];\n    if (!value) return null;\n\n    const isValid = DT_STACK_JUSTIFY.includes(value);\n    const normalizedValue = _normalizeJustifyForClass(value);\n\n    return isValid ? `d-stack--${breakpoint}-justify-${normalizedValue}` : null;\n  });\n}\n\nexport function getResponsiveClasses (direction, gap, align, justify) {\n  return [\n    ...getResponsiveDirectionClasses(direction),\n    ...getResponsiveGapClasses(gap),\n    ...getResponsiveAlignClasses(align),\n    ...getResponsiveJustifyClasses(justify),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getDefaultValue(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n\nexport function getDefaultAlignClass (align) {\n  const validAlign = _getDefaultValue(align);\n  return DT_STACK_ALIGN.includes(validAlign) ? `d-stack--align-${validAlign}` : null;\n}\n\n/**\n * Normalizes justify value to CSS class suffix.\n * Maps CSS-aligned values (space-around, space-between, space-evenly) to shorthand\n * (around, between, evenly) for CSS class generation.\n * @param {string} value - The justify value\n * @returns {string} The normalized value for CSS class\n */\nfunction _normalizeJustifyForClass (value) {\n  const normalizeMap = {\n    'space-around': 'around',\n    'space-between': 'between',\n    'space-evenly': 'evenly',\n  };\n  return normalizeMap[value] || value;\n}\n\nexport function getDefaultJustifyClass (justify) {\n  const validJustify = _getDefaultValue(justify);\n  const normalizedJustify = _normalizeJustifyForClass(validJustify);\n  return DT_STACK_JUSTIFY.includes(validJustify) ? `d-stack--justify-${normalizedJustify}` : null;\n}"],"mappings":";;AAEA,SAAS,EAAqB,GAAW;AACvC,QAAO,MAAc,EAAmB;;AAQ1C,SAAS,EAAkB,GAAO;AAGhC,QAFI,OAAO,KAAU,WAAiB,IAClC,OAAO,KAAU,YAAY,IAAuB,EAAM,UACvD;;AAGT,SAAS,EAAoB,GAAW;AACtC,KAAI,OAAO,KAAc,SACvB,QAAQ,EAAoB,EAAU,GAAmC,OAAhC,EAAmB;KACnD,OAAO,KAAc,UAAU;EACxC,IAAM,EAAE,SAAS,MAAiB;AAElC,SAAQ,EAAoB,EAAa,GAAsC,OAAnC,EAAmB;OACxD,QAAO;;AAWlB,SAAS,EAAuB,GAAW,GAAU,GAAa,IAAc,WAAW;AAGzF,QAFI,OAAO,KAAc,aAAY,IAA2B,EAAE,GAE3D,EAAgC,KAAK,MAAe;EACzD,IAAM,IAAQ,EAAU;AACxB,MAAI,CAAC,EAAO,QAAO;EAGnB,IAAM,IAAU,MAAM,QAAQ,EAAY,GACtC,EAAY,SAAS,EAAM,GAC3B,KAAS,GAGP,IAAY,MAAa,KAC3B,GAAG,EAAY,IAAI,EAAW,GAAG,MACjC,GAAG,EAAY,IAAI,EAAW,GAAG,EAAS,GAAG;AAEjD,SAAO,IAAU,IAAY;GAC7B;;AAGJ,SAAgB,EAA0B,GAAW;AACnD,QAAO,EAAmB,EAAU,GAChC,YAAY,EAAmB,EAAmB,EAAU,MAC5D;;AAGN,SAAS,EAA+B,GAAW;AACjD,QAAO,EAAsB,GAAW,IAAI,EAAmB;;AAGjE,SAAS,EAAyB,GAAK;AACrC,QAAO,EAAsB,GAAK,OAAO,EAAa;;AAGxD,SAAS,EAA2B,GAAO;AACzC,QAAO,EAAsB,GAAO,SAAS,EAAe;;AAG9D,SAAS,EAA6B,GAAS;AAG7C,QAFI,OAAO,KAAY,aAAY,IAAyB,EAAE,GAEvD,EAAgC,KAAK,MAAe;EACzD,IAAM,IAAQ,EAAQ;AACtB,MAAI,CAAC,EAAO,QAAO;EAEnB,IAAM,IAAU,EAAiB,SAAS,EAAM,EAC1C,IAAkB,EAA0B,EAAM;AAExD,SAAO,IAAU,YAAY,EAAW,WAAW,MAAoB;GACvE;;AAGJ,SAAgB,EAAsB,GAAW,GAAK,GAAO,GAAS;AACpE,QAAO;EACL,GAAG,EAA8B,EAAU;EAC3C,GAAG,EAAwB,EAAI;EAC/B,GAAG,EAA0B,EAAM;EACnC,GAAG,EAA4B,EAAQ;EACxC;;AAGH,SAAgB,EAAoB,GAAK;CACvC,IAAM,IAAW,EAAiB,EAAI;AACtC,QAAO,EAAa,SAAS,EAAS,GAAG,gBAAgB,MAAa;;AAGxE,SAAgB,EAAsB,GAAO;CAC3C,IAAM,IAAa,EAAiB,EAAM;AAC1C,QAAO,EAAe,SAAS,EAAW,GAAG,kBAAkB,MAAe;;AAUhF,SAAS,EAA2B,GAAO;AAMzC,QALqB;EACnB,gBAAgB;EAChB,iBAAiB;EACjB,gBAAgB;EACjB,CACmB,MAAU;;AAGhC,SAAgB,EAAwB,GAAS;CAC/C,IAAM,IAAe,EAAiB,EAAQ,EACxC,IAAoB,EAA0B,EAAa;AACjE,QAAO,EAAiB,SAAS,EAAa,GAAG,oBAAoB,MAAsB"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../components/Stack/Utils.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from '@/components/Stack/StackConstants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\n/**\n * Generic helper to extract default value from string or object props\n * @param {string|Object} value - The prop value\n * @returns {string|null} The default value or null\n */\nfunction _getDefaultValue (value) {\n  if (typeof value === 'string') return value;\n  if (typeof value === 'object' && value !== null) return value.default;\n  return null;\n}\n\nfunction _getValidDirection (direction) {\n  if (typeof direction === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (typeof direction === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\n/**\n * Generic helper to generate responsive classes for any prop\n * @param {Object} propValue - The prop value object with breakpoint keys\n * @param {string} propName - The name of the prop (e.g., 'gap', 'align')\n * @param {Array|Object} validValues - Valid values (array or object for direction)\n * @param {string} classPrefix - CSS class prefix (default: 'd-stack')\n * @returns {Array} Array of CSS class names\n */\nfunction _getResponsiveClasses (propValue, propName, validValues, classPrefix = 'd-stack') {\n  if (typeof propValue !== 'object' || propValue === null) return [];\n\n  return DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n    const value = propValue[breakpoint];\n    if (!value) return null;\n\n    // Handle both array (gap, align, justify) and object (direction) validValues\n    const isValid = Array.isArray(validValues)\n      ? validValues.includes(value)\n      : value in validValues;\n\n    // For direction, we don't need the prop name in the class\n    const className = propName === ''\n      ? `${classPrefix}--${breakpoint}-${value}`\n      : `${classPrefix}--${breakpoint}-${propName}-${value}`;\n\n    return isValid ? className : null;\n  });\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nfunction getResponsiveDirectionClasses (direction) {\n  return _getResponsiveClasses(direction, '', DT_STACK_DIRECTION);\n}\n\nfunction getResponsiveGapClasses (gap) {\n  return _getResponsiveClasses(gap, 'gap', DT_STACK_GAP);\n}\n\nfunction getResponsiveAlignClasses (align) {\n  return _getResponsiveClasses(align, 'align', DT_STACK_ALIGN);\n}\n\nfunction getResponsiveJustifyClasses (justify) {\n  if (typeof justify !== 'object' || justify === null) return [];\n\n  return DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n    const value = justify[breakpoint];\n    if (!value) return null;\n\n    const isValid = DT_STACK_JUSTIFY.includes(value);\n    const normalizedValue = _normalizeJustifyForClass(value);\n\n    return isValid ? `d-stack--${breakpoint}-justify-${normalizedValue}` : null;\n  });\n}\n\nexport function getResponsiveClasses (direction, gap, align, justify) {\n  return [\n    ...getResponsiveDirectionClasses(direction),\n    ...getResponsiveGapClasses(gap),\n    ...getResponsiveAlignClasses(align),\n    ...getResponsiveJustifyClasses(justify),\n  ];\n}\n\nexport function getDefaultGapClass (gap) {\n  const validGap = _getDefaultValue(gap);\n  return DT_STACK_GAP.includes(validGap) ? `d-stack--gap-${validGap}` : null;\n}\n\nexport function getDefaultAlignClass (align) {\n  const validAlign = _getDefaultValue(align);\n  return DT_STACK_ALIGN.includes(validAlign) ? `d-stack--align-${validAlign}` : null;\n}\n\n/**\n * Normalizes justify value to CSS class suffix.\n * Maps CSS-aligned values (space-around, space-between, space-evenly) to shorthand\n * (around, between, evenly) for CSS class generation.\n * @param {string} value - The justify value\n * @returns {string} The normalized value for CSS class\n */\nfunction _normalizeJustifyForClass (value) {\n  const normalizeMap = {\n    'space-around': 'around',\n    'space-between': 'between',\n    'space-evenly': 'evenly',\n  };\n  return normalizeMap[value] || value;\n}\n\nexport function getDefaultJustifyClass (justify) {\n  const validJustify = _getDefaultValue(justify);\n  const normalizedJustify = _normalizeJustifyForClass(validJustify);\n  return DT_STACK_JUSTIFY.includes(validJustify) ? `d-stack--justify-${normalizedJustify}` : null;\n}"],"mappings":";;AAEA,SAAS,EAAqB,GAAW;AACvC,QAAO,MAAc,EAAmB;;AAQ1C,SAAS,EAAkB,GAAO;AAGhC,QAFI,OAAO,KAAU,WAAiB,IAClC,OAAO,KAAU,YAAY,IAAuB,EAAM,UACvD;;AAGT,SAAS,EAAoB,GAAW;AACtC,KAAI,OAAO,KAAc,SACvB,QAAQ,EAAoB,EAAU,GAAmC,OAAhC,EAAmB;KACnD,OAAO,KAAc,UAAU;EACxC,IAAM,EAAE,SAAS,MAAiB;AAElC,SAAQ,EAAoB,EAAa,GAAsC,OAAnC,EAAmB;OACxD,QAAO;;AAWlB,SAAS,EAAuB,GAAW,GAAU,GAAa,IAAc,WAAW;AAGzF,QAFI,OAAO,KAAc,aAAY,IAA2B,EAAE,GAE3D,EAAgC,KAAK,MAAe;EACzD,IAAM,IAAQ,EAAU;AACxB,MAAI,CAAC,EAAO,QAAO;EAGnB,IAAM,IAAU,MAAM,QAAQ,EAAY,GACtC,EAAY,SAAS,EAAM,GAC3B,KAAS,GAGP,IAAY,MAAa,KAC3B,GAAG,EAAY,IAAI,EAAW,GAAG,MACjC,GAAG,EAAY,IAAI,EAAW,GAAG,EAAS,GAAG;AAEjD,SAAO,IAAU,IAAY;GAC7B;;AAGJ,SAAgB,EAA0B,GAAW;AACnD,QAAO,EAAmB,EAAU,GAChC,YAAY,EAAmB,EAAmB,EAAU,MAC5D;;AAGN,SAAS,EAA+B,GAAW;AACjD,QAAO,EAAsB,GAAW,IAAI,EAAmB;;AAGjE,SAAS,EAAyB,GAAK;AACrC,QAAO,EAAsB,GAAK,OAAO,EAAa;;AAGxD,SAAS,EAA2B,GAAO;AACzC,QAAO,EAAsB,GAAO,SAAS,EAAe;;AAG9D,SAAS,EAA6B,GAAS;AAG7C,QAFI,OAAO,KAAY,aAAY,IAAyB,EAAE,GAEvD,EAAgC,KAAK,MAAe;EACzD,IAAM,IAAQ,EAAQ;AACtB,MAAI,CAAC,EAAO,QAAO;EAEnB,IAAM,IAAU,EAAiB,SAAS,EAAM,EAC1C,IAAkB,EAA0B,EAAM;AAExD,SAAO,IAAU,YAAY,EAAW,WAAW,MAAoB;GACvE;;AAGJ,SAAgB,EAAsB,GAAW,GAAK,GAAO,GAAS;AACpE,QAAO;EACL,GAAG,EAA8B,EAAU;EAC3C,GAAG,EAAwB,EAAI;EAC/B,GAAG,EAA0B,EAAM;EACnC,GAAG,EAA4B,EAAQ;EACxC;;AAGH,SAAgB,EAAoB,GAAK;CACvC,IAAM,IAAW,EAAiB,EAAI;AACtC,QAAO,EAAa,SAAS,EAAS,GAAG,gBAAgB,MAAa;;AAGxE,SAAgB,EAAsB,GAAO;CAC3C,IAAM,IAAa,EAAiB,EAAM;AAC1C,QAAO,EAAe,SAAS,EAAW,GAAG,kBAAkB,MAAe;;AAUhF,SAAS,EAA2B,GAAO;AAMzC,QALqB;EACnB,gBAAgB;EAChB,iBAAiB;EACjB,gBAAgB;EACjB,CACmB,MAAU;;AAGhC,SAAgB,EAAwB,GAAS;CAC/C,IAAM,IAAe,EAAiB,EAAQ,EACxC,IAAoB,EAA0B,EAAa;AACjE,QAAO,EAAiB,SAAS,EAAa,GAAG,oBAAoB,MAAsB"}

package/dist/lib/stack/validators.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"validators.cjs","names":["DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_ALIGN","DT_STACK_JUSTIFY"],"sources":["../../../components/stack/validators.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from '@/components/stack/stack_constants';\n\nexport function directionValidator (direction) {\n  if (typeof direction === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (typeof direction === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  }\n  return false;\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n  return false;\n}\n\nexport function alignValidator (align) {\n  if (align === undefined) return true;\n  if (typeof align === 'string') {\n    return DT_STACK_ALIGN.includes(align);\n  }\n  if (typeof align === 'object') {\n    const { default: defaultStyle } = align;\n\n    return DT_STACK_ALIGN.includes(defaultStyle);\n  }\n  return false;\n}\n\nexport function justifyValidator (justify) {\n  if (typeof justify === 'string') {\n    return DT_STACK_JUSTIFY.includes(justify);\n  }\n  if (typeof justify === 'object') {\n    const { default: defaultStyle } = justify;\n\n    return DT_STACK_JUSTIFY.includes(defaultStyle);\n  }\n  return false;\n}"],"mappings":"4GAEA,SAAgB,EAAoB,EAAW,CAC7C,GAAI,OAAO,GAAc,SACvB,OAAO,OAAO,KAAKA,EAAAA,mBAAmB,CAAC,SAAS,EAAU,IACjD,OAAO,GAAc,SAAU,CACxC,GAAM,CAAE,QAAS,GAAiB,EAElC,OAAO,OAAO,KAAKA,EAAAA,mBAAmB,CAAC,SAAS,EAAa,CAE/D,MAAO,GAGT,SAAgB,EAAc,EAAK,CACjC,GAAI,OAAO,GAAQ,SACjB,OAAOC,EAAAA,aAAa,SAAS,EAAI,CAEnC,GAAI,OAAO,GAAQ,SAAU,CAC3B,GAAM,CAAE,QAAS,GAAiB,EAElC,OAAOA,EAAAA,aAAa,SAAS,EAAa,CAE5C,MAAO,GAGT,SAAgB,EAAgB,EAAO,CACrC,GAAI,IAAU,IAAA,GAAW,MAAO,GAChC,GAAI,OAAO,GAAU,SACnB,OAAOC,EAAAA,eAAe,SAAS,EAAM,CAEvC,GAAI,OAAO,GAAU,SAAU,CAC7B,GAAM,CAAE,QAAS,GAAiB,EAElC,OAAOA,EAAAA,eAAe,SAAS,EAAa,CAE9C,MAAO,GAGT,SAAgB,EAAkB,EAAS,CACzC,GAAI,OAAO,GAAY,SACrB,OAAOC,EAAAA,iBAAiB,SAAS,EAAQ,CAE3C,GAAI,OAAO,GAAY,SAAU,CAC/B,GAAM,CAAE,QAAS,GAAiB,EAElC,OAAOA,EAAAA,iBAAiB,SAAS,EAAa,CAEhD,MAAO"}
+{"version":3,"file":"validators.cjs","names":["DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_ALIGN","DT_STACK_JUSTIFY"],"sources":["../../../components/Stack/Validators.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from '@/components/Stack/StackConstants';\n\nexport function directionValidator (direction) {\n  if (typeof direction === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (typeof direction === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  }\n  return false;\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n  return false;\n}\n\nexport function alignValidator (align) {\n  if (align === undefined) return true;\n  if (typeof align === 'string') {\n    return DT_STACK_ALIGN.includes(align);\n  }\n  if (typeof align === 'object') {\n    const { default: defaultStyle } = align;\n\n    return DT_STACK_ALIGN.includes(defaultStyle);\n  }\n  return false;\n}\n\nexport function justifyValidator (justify) {\n  if (typeof justify === 'string') {\n    return DT_STACK_JUSTIFY.includes(justify);\n  }\n  if (typeof justify === 'object') {\n    const { default: defaultStyle } = justify;\n\n    return DT_STACK_JUSTIFY.includes(defaultStyle);\n  }\n  return false;\n}"],"mappings":"4GAEA,SAAgB,EAAoB,EAAW,CAC7C,GAAI,OAAO,GAAc,SACvB,OAAO,OAAO,KAAKA,EAAAA,mBAAmB,CAAC,SAAS,EAAU,IACjD,OAAO,GAAc,SAAU,CACxC,GAAM,CAAE,QAAS,GAAiB,EAElC,OAAO,OAAO,KAAKA,EAAAA,mBAAmB,CAAC,SAAS,EAAa,CAE/D,MAAO,GAGT,SAAgB,EAAc,EAAK,CACjC,GAAI,OAAO,GAAQ,SACjB,OAAOC,EAAAA,aAAa,SAAS,EAAI,CAEnC,GAAI,OAAO,GAAQ,SAAU,CAC3B,GAAM,CAAE,QAAS,GAAiB,EAElC,OAAOA,EAAAA,aAAa,SAAS,EAAa,CAE5C,MAAO,GAGT,SAAgB,EAAgB,EAAO,CACrC,GAAI,IAAU,IAAA,GAAW,MAAO,GAChC,GAAI,OAAO,GAAU,SACnB,OAAOC,EAAAA,eAAe,SAAS,EAAM,CAEvC,GAAI,OAAO,GAAU,SAAU,CAC7B,GAAM,CAAE,QAAS,GAAiB,EAElC,OAAOA,EAAAA,eAAe,SAAS,EAAa,CAE9C,MAAO,GAGT,SAAgB,EAAkB,EAAS,CACzC,GAAI,OAAO,GAAY,SACrB,OAAOC,EAAAA,iBAAiB,SAAS,EAAQ,CAE3C,GAAI,OAAO,GAAY,SAAU,CAC/B,GAAM,CAAE,QAAS,GAAiB,EAElC,OAAOA,EAAAA,iBAAiB,SAAS,EAAa,CAEhD,MAAO"}

package/dist/lib/stack/validators.js

@@ -1,5 +1,5 @@
 import { DT_STACK_ALIGN as e, DT_STACK_DIRECTION as t, DT_STACK_GAP as n, DT_STACK_JUSTIFY as r } from "./stack-constants.js";
-//#region components/stack/validators.js
+//#region components/Stack/Validators.js
 function i(e) {
 	if (typeof e == "string") return Object.keys(t).includes(e);
 	if (typeof e == "object") {

package/dist/lib/stack/validators.js.map

@@ -1 +1 @@
-{"version":3,"file":"validators.js","names":[],"sources":["../../../components/stack/validators.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from '@/components/stack/stack_constants';\n\nexport function directionValidator (direction) {\n  if (typeof direction === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (typeof direction === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  }\n  return false;\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n  return false;\n}\n\nexport function alignValidator (align) {\n  if (align === undefined) return true;\n  if (typeof align === 'string') {\n    return DT_STACK_ALIGN.includes(align);\n  }\n  if (typeof align === 'object') {\n    const { default: defaultStyle } = align;\n\n    return DT_STACK_ALIGN.includes(defaultStyle);\n  }\n  return false;\n}\n\nexport function justifyValidator (justify) {\n  if (typeof justify === 'string') {\n    return DT_STACK_JUSTIFY.includes(justify);\n  }\n  if (typeof justify === 'object') {\n    const { default: defaultStyle } = justify;\n\n    return DT_STACK_JUSTIFY.includes(defaultStyle);\n  }\n  return false;\n}"],"mappings":";;AAEA,SAAgB,EAAoB,GAAW;AAC7C,KAAI,OAAO,KAAc,SACvB,QAAO,OAAO,KAAK,EAAmB,CAAC,SAAS,EAAU;KACjD,OAAO,KAAc,UAAU;EACxC,IAAM,EAAE,SAAS,MAAiB;AAElC,SAAO,OAAO,KAAK,EAAmB,CAAC,SAAS,EAAa;;AAE/D,QAAO;;AAGT,SAAgB,EAAc,GAAK;AACjC,KAAI,OAAO,KAAQ,SACjB,QAAO,EAAa,SAAS,EAAI;AAEnC,KAAI,OAAO,KAAQ,UAAU;EAC3B,IAAM,EAAE,SAAS,MAAiB;AAElC,SAAO,EAAa,SAAS,EAAa;;AAE5C,QAAO;;AAGT,SAAgB,EAAgB,GAAO;AACrC,KAAI,MAAU,KAAA,EAAW,QAAO;AAChC,KAAI,OAAO,KAAU,SACnB,QAAO,EAAe,SAAS,EAAM;AAEvC,KAAI,OAAO,KAAU,UAAU;EAC7B,IAAM,EAAE,SAAS,MAAiB;AAElC,SAAO,EAAe,SAAS,EAAa;;AAE9C,QAAO;;AAGT,SAAgB,EAAkB,GAAS;AACzC,KAAI,OAAO,KAAY,SACrB,QAAO,EAAiB,SAAS,EAAQ;AAE3C,KAAI,OAAO,KAAY,UAAU;EAC/B,IAAM,EAAE,SAAS,MAAiB;AAElC,SAAO,EAAiB,SAAS,EAAa;;AAEhD,QAAO"}
+{"version":3,"file":"validators.js","names":[],"sources":["../../../components/Stack/Validators.js"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from '@/components/Stack/StackConstants';\n\nexport function directionValidator (direction) {\n  if (typeof direction === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (typeof direction === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  }\n  return false;\n}\n\nexport function gapValidator (gap) {\n  if (typeof gap === 'string') {\n    return DT_STACK_GAP.includes(gap);\n  }\n  if (typeof gap === 'object') {\n    const { default: defaultStyle } = gap;\n\n    return DT_STACK_GAP.includes(defaultStyle);\n  }\n  return false;\n}\n\nexport function alignValidator (align) {\n  if (align === undefined) return true;\n  if (typeof align === 'string') {\n    return DT_STACK_ALIGN.includes(align);\n  }\n  if (typeof align === 'object') {\n    const { default: defaultStyle } = align;\n\n    return DT_STACK_ALIGN.includes(defaultStyle);\n  }\n  return false;\n}\n\nexport function justifyValidator (justify) {\n  if (typeof justify === 'string') {\n    return DT_STACK_JUSTIFY.includes(justify);\n  }\n  if (typeof justify === 'object') {\n    const { default: defaultStyle } = justify;\n\n    return DT_STACK_JUSTIFY.includes(defaultStyle);\n  }\n  return false;\n}"],"mappings":";;AAEA,SAAgB,EAAoB,GAAW;AAC7C,KAAI,OAAO,KAAc,SACvB,QAAO,OAAO,KAAK,EAAmB,CAAC,SAAS,EAAU;KACjD,OAAO,KAAc,UAAU;EACxC,IAAM,EAAE,SAAS,MAAiB;AAElC,SAAO,OAAO,KAAK,EAAmB,CAAC,SAAS,EAAa;;AAE/D,QAAO;;AAGT,SAAgB,EAAc,GAAK;AACjC,KAAI,OAAO,KAAQ,SACjB,QAAO,EAAa,SAAS,EAAI;AAEnC,KAAI,OAAO,KAAQ,UAAU;EAC3B,IAAM,EAAE,SAAS,MAAiB;AAElC,SAAO,EAAa,SAAS,EAAa;;AAE5C,QAAO;;AAGT,SAAgB,EAAgB,GAAO;AACrC,KAAI,MAAU,KAAA,EAAW,QAAO;AAChC,KAAI,OAAO,KAAU,SACnB,QAAO,EAAe,SAAS,EAAM;AAEvC,KAAI,OAAO,KAAU,UAAU;EAC7B,IAAM,EAAE,SAAS,MAAiB;AAElC,SAAO,EAAe,SAAS,EAAa;;AAE9C,QAAO;;AAGT,SAAgB,EAAkB,GAAS;AACzC,KAAI,OAAO,KAAY,SACrB,QAAO,EAAiB,SAAS,EAAQ;AAE3C,KAAI,OAAO,KAAY,UAAU;EAC/B,IAAM,EAAE,SAAS,MAAiB;AAElC,SAAO,EAAiB,SAAS,EAAa;;AAEhD,QAAO"}

package/dist/lib/tab/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./tabs-constants.cjs`),t=require(`./tab-group.cjs`),n=require(`./tab.cjs`),r=require(`./tab-panel.cjs`);exports.DtTab=n.default,exports.DtTabGroup=t.default,exports.DtTabPanel=r.default,exports.TAB_IMPORTANCE_MODIFIERS=e.TAB_IMPORTANCE_MODIFIERS,exports.TAB_LIST_IMPORTANCE_MODIFIERS=e.TAB_LIST_IMPORTANCE_MODIFIERS,exports.TAB_LIST_KIND_MODIFIERS=e.TAB_LIST_KIND_MODIFIERS,exports.TAB_LIST_SIZES=e.TAB_LIST_SIZES;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./tabs-constants.cjs`),t=require(`./tab-group.cjs`),n=require(`./tab.cjs`),r=require(`./tab-panel.cjs`);exports.DtTab=n.default,exports.DtTabGroup=t.default,exports.DtTabPanel=r.default,exports.TAB_ACTIVATION_MODES=e.TAB_ACTIVATION_MODES,exports.TAB_GROUP_KINDS=e.TAB_GROUP_KINDS,exports.TAB_LIST_IMPORTANCE_MODIFIERS=e.TAB_LIST_IMPORTANCE_MODIFIERS,exports.TAB_LIST_KIND_MODIFIERS=e.TAB_LIST_KIND_MODIFIERS,exports.TAB_LIST_SIZES=e.TAB_LIST_SIZES,exports.TAB_LIST_SIZE_MODIFIERS=e.TAB_LIST_SIZE_MODIFIERS,exports.TAB_SPREADS=e.TAB_SPREADS;

package/dist/lib/tab/index.js

@@ -1,5 +1,5 @@
-import { TAB_IMPORTANCE_MODIFIERS as e, TAB_LIST_IMPORTANCE_MODIFIERS as t, TAB_LIST_KIND_MODIFIERS as n, TAB_LIST_SIZES as r } from "./tabs-constants.js";
-import i from "./tab-group.js";
-import a from "./tab.js";
-import o from "./tab-panel.js";
-export { a as DtTab, i as DtTabGroup, o as DtTabPanel, e as TAB_IMPORTANCE_MODIFIERS, t as TAB_LIST_IMPORTANCE_MODIFIERS, n as TAB_LIST_KIND_MODIFIERS, r as TAB_LIST_SIZES };
+import { TAB_ACTIVATION_MODES as e, TAB_GROUP_KINDS as t, TAB_LIST_IMPORTANCE_MODIFIERS as n, TAB_LIST_KIND_MODIFIERS as r, TAB_LIST_SIZES as i, TAB_LIST_SIZE_MODIFIERS as a, TAB_SPREADS as o } from "./tabs-constants.js";
+import s from "./tab-group.js";
+import c from "./tab.js";
+import l from "./tab-panel.js";
+export { c as DtTab, s as DtTabGroup, l as DtTabPanel, e as TAB_ACTIVATION_MODES, t as TAB_GROUP_KINDS, n as TAB_LIST_IMPORTANCE_MODIFIERS, r as TAB_LIST_KIND_MODIFIERS, i as TAB_LIST_SIZES, a as TAB_LIST_SIZE_MODIFIERS, o as TAB_SPREADS };

package/dist/lib/tab/tab-group.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(`./tabs-constants.cjs`);let n=require(`vue`);var r={compatConfig:{MODE:3},name:`DtTabGroup`,provide(){return{groupContext:this.provideObj,setFocus:this.setFocus}},props:{label:{type:String,default:``},selected:{type:String,default:``},disabled:{type:Boolean,default:!1},inverted:{type:Boolean,default:!1},borderless:{type:Boolean,default:!1},size:{type:String,default:`default`,validate(e){return t.TAB_LIST_SIZES.includes(e)}},tabListClass:{type:[String,Array,Object],default:``},tabListChildProps:{type:Object,default:()=>({})}},emits:[`change`,`before-change`],data(){return{provideObj:{selected:``,disabled:!1},focusId:null,tabs:[],TAB_LIST_SIZE_MODIFIERS:t.TAB_LIST_SIZE_MODIFIERS,TAB_LIST_KIND_MODIFIERS:t.TAB_LIST_KIND_MODIFIERS,TAB_LIST_IMPORTANCE_MODIFIERS:t.TAB_LIST_IMPORTANCE_MODIFIERS}},watch:{disabled:{immediate:!0,handler(){this.provideObj.disabled=this.disabled}},selected:{immediate:!0,handler(){this.provideObj.selected=this.selected}}},mounted(){this.updateSelected()},updated(){this.updateSelected()},methods:{updateSelected(){this.provideObj.selected||(this.provideObj.selected=this.selected),this.tabs=this.getTabChildren()},setFocus(e){this.focusId=e},getTabChildren(){return Array.from(this.$refs.tabs.querySelectorAll(`.d-tab`)).map(e=>({context:e,panelId:e.getAttribute(`aria-controls`)?.replace(`dt-panel-`,``),tabId:e.getAttribute(`id`)?.replace(`dt-tab-`,``),isSelected:e.getAttribute(`aria-selected`)===`true`}))},onChange(){this.$emit(`change`,{...this.provideObj})},tabLeft(){let e=this.getFocusedTabIndex();if(e===-1)return;let t=e-1<0?this.tabs.length-1:e-1;this.selectFocusOnTab(t)},tabRight(){let e=this.getFocusedTabIndex();if(e===-1)return;let t=e+1>this.tabs.length-1?0:e+1;this.selectFocusOnTab(t)},selectFocusOnTab(e){let{context:t}=this.tabs[e];t.focus()},selectTab(e){if(this.isSameTabClicked()||(this.$emit(`before-change`,e),e.defaultPrevented))return;let t=this.getFocusedTabIndex();this.selectTabByIndex(t),this.onChange()},selectTabByIndex(e){let{context:t,panelId:n}=this.tabs[e];this.provideObj.selected=n,t.focus()},getFocusedTabIndex(){let e=this.tabs.findIndex(e=>this.focusId?e.tabId===`${this.focusId}`:e.isSelected);return e===-1?0:e},onHomeButton(){this.tabs.length!==0&&this.tabs[0]?.context?.focus()},onEndButton(){this.tabs.length!==0&&this.tabs[this.tabs.length-1]?.context?.focus()},isSameTabClicked(){let e=this.tabs[this.getFocusedTabIndex()];return this.provideObj.selected===e.panelId}}},i={"data-qa":`dt-tab-group`},a=[`aria-label`];function o(e,t,r,o,s,c){return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,i,[(0,n.createElementVNode)(`div`,(0,n.mergeProps)({ref:`tabs`,class:[`d-tablist`,s.TAB_LIST_SIZE_MODIFIERS[r.size],{[s.TAB_LIST_KIND_MODIFIERS.inverted]:r.inverted,[s.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]:r.borderless},r.tabListClass]},r.tabListChildProps,{role:`tablist`,"aria-label":r.label,onKeyup:[t[0]||(t[0]=(0,n.withKeys)((...e)=>c.tabLeft&&c.tabLeft(...e),[`left`])),t[1]||(t[1]=(0,n.withKeys)((...e)=>c.tabRight&&c.tabRight(...e),[`right`])),t[2]||(t[2]=(0,n.withKeys)((...e)=>c.selectTab&&c.selectTab(...e),[`enter`])),t[3]||(t[3]=(0,n.withKeys)((...e)=>c.selectTab&&c.selectTab(...e),[`space`]))],onClick:t[4]||(t[4]=(...e)=>c.selectTab&&c.selectTab(...e)),onKeydown:[t[5]||(t[5]=(0,n.withKeys)((...e)=>c.onHomeButton&&c.onHomeButton(...e),[`home`])),t[6]||(t[6]=(0,n.withKeys)((...e)=>c.onEndButton&&c.onEndButton(...e),[`end`]))]}),[(0,n.renderSlot)(e.$slots,`tabs`)],16,a),(0,n.renderSlot)(e.$slots,`default`)])}var s=e.t(r,[[`render`,o]]);exports.default=s;
+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(`./tabs-constants.cjs`),n=require(`../../common/composables/use-indicator-animation.cjs`);let r=require(`vue`);var i={name:`DtTabGroup`,provide(){return{groupContext:this.provideObj,setFocus:this.setFocus}},props:{label:{type:String,default:``},selected:{type:String,default:``},disabled:{type:Boolean,default:!1},inverted:{type:Boolean,default:!1},borderless:{type:Boolean,default:!1},spread:{type:String,default:`none`,validator(e){return t.TAB_SPREADS.includes(e)}},orientation:{type:String,default:`horizontal`,validator(e){return t.TAB_ORIENTATIONS.includes(e)}},size:{type:[String,Number],default:300,validator(e){return t.TAB_LIST_SIZES.includes(String(e))}},tabsClass:{type:[String,Array,Object],default:``},tabListClass:{type:[String,Array,Object],default:void 0},tabListChildProps:{type:Object,default:()=>({})},kind:{type:String,default:`default`,validator(e){return t.TAB_GROUP_KINDS.includes(e)}},outlined:{type:Boolean,default:!1},activationMode:{type:String,default:`manual`,validator(e){return t.TAB_ACTIVATION_MODES.includes(e)}},showIndicatorTransition:{type:Boolean,default:!0}},emits:[`change`,`before-change`],setup(){let e=(0,r.ref)(null);return{tabs:e,indicator:n.useIndicatorAnimation(e,`--tab-indicator-duration`,`--tab-indicator-easing`)}},data(){return{provideObj:{selected:``,disabled:!1,size:300,kind:`default`,outlined:!1,orientation:`horizontal`,spread:`none`,focusedTabId:null},tabItems:[],TAB_LIST_SIZE_MODIFIERS:t.TAB_LIST_SIZE_MODIFIERS,TAB_LIST_KIND_MODIFIERS:t.TAB_LIST_KIND_MODIFIERS,TAB_LIST_IMPORTANCE_MODIFIERS:t.TAB_LIST_IMPORTANCE_MODIFIERS,TAB_ORIENTATION_MODIFIERS:t.TAB_ORIENTATION_MODIFIERS,TAB_SPREAD_MODIFIERS:t.TAB_SPREAD_MODIFIERS}},computed:{resolvedTabsClass(){return this.tabListClass??this.tabsClass}},watch:{disabled:{immediate:!0,handler(){this.provideObj.disabled=this.disabled}},selected:{immediate:!0,handler(e,t){this.provideObj.selected=this.selected,e!==t&&(this.provideObj.focusedTabId=null)}},size:{immediate:!0,handler(){this.provideObj.size=this.size}},kind:{immediate:!0,handler(){this.provideObj.kind=this.kind}},outlined:{immediate:!0,handler(){this.provideObj.outlined=this.outlined}},orientation:{immediate:!0,handler(){this.provideObj.orientation=this.orientation}},spread:{immediate:!0,handler(){this.provideObj.spread=this.spread}}},mounted(){this.updateSelected()},updated(){this.updateSelected()},methods:{updateSelected(){this.provideObj.selected||(this.provideObj.selected=this.selected),this.tabItems=this.getTabChildren(),this.provideObj.focusedTabId&&!this.tabItems.some(e=>e.tabId===this.provideObj.focusedTabId)&&(this.provideObj.focusedTabId=null)},setFocus(e){this.provideObj.focusedTabId!==e&&(this.provideObj.focusedTabId=e)},getTabChildren(){return Array.from(this.$refs.tabs.querySelectorAll(`[role="tab"]`)).map(e=>({context:e,panelId:e.getAttribute(`aria-controls`)?.replace(`dt-panel-`,``),tabId:e.getAttribute(`id`)?.replace(`dt-tab-`,``),isSelected:e.getAttribute(`aria-selected`)===`true`,isDisabled:e.getAttribute(`aria-disabled`)===`true`}))},onChange(){this.$emit(`change`,{...this.provideObj})},tabLeft(){this.orientation===`horizontal`&&this.navigatePrevious()},tabRight(){this.orientation===`horizontal`&&this.navigateNext()},tabUp(e){this.orientation===`vertical`&&(e.preventDefault(),this.navigatePrevious())},tabDown(e){this.orientation===`vertical`&&(e.preventDefault(),this.navigateNext())},navigatePrevious(){let e=this.getFocusedTabIndex();if(e===-1)return;let t=this.findNextTab(e,-1);this.selectFocusOnTab(t)},navigateNext(){let e=this.getFocusedTabIndex();if(e===-1)return;let t=this.findNextTab(e,1);this.selectFocusOnTab(t)},findNextTab(e,t){let n=this.tabItems.length;return(e+t+n)%n},transitionIndicator(e,t){if(!t||!this.showIndicatorTransition){this.provideObj.selected=e;return}let n=this.indicator.snapshot(`[aria-selected="true"]`);this.provideObj.selected=e,n&&this.$nextTick(()=>{let e={backgroundColor:`transparent`},r={},i=`::after`;this.outlined?(e={borderColor:`transparent`,backgroundColor:`transparent`},r={boxShadow:`inset 0 0 0 ${n.style.borderWidth} ${n.style.borderColor}`},i=`::before`):this.kind===`muted`&&(r={backgroundColor:n.style.backgroundColor},i=`::before`),this.indicator.animate({oldRect:n.rect,newEl:t,orientation:this.orientation,hideProps:e,indicatorExtra:r,pseudoElement:i})})},selectFocusOnTab(e){let{context:t,panelId:n,isDisabled:r}=this.tabItems[e];t.focus(),this.activationMode===`auto`&&!r&&(this.indicator.cancel(),this.provideObj.selected=n,this.onChange())},selectTab(e){let t=e.target.closest(`[role="tab"]`),n=t?this.tabItems.findIndex(e=>e.context===t):this.getFocusedTabIndex();n!==-1&&(this.tabItems[n]?.isDisabled||this.provideObj.selected!==this.tabItems[n]?.panelId&&(this.$emit(`before-change`,e),!e.defaultPrevented&&(e.preventDefault(),this.selectTabByIndex(n),this.onChange())))},selectTabByIndex(e){let{context:t,panelId:n}=this.tabItems[e];this.transitionIndicator(n,t),t.focus()},getFocusedTabIndex(){let e=this.provideObj.focusedTabId,t=this.tabItems.findIndex(t=>e?t.tabId===e:t.isSelected);return t===-1?0:t},onHomeButton(){this.tabItems.length&&this.selectFocusOnTab(0)},onEndButton(){this.tabItems.length&&this.selectFocusOnTab(this.tabItems.length-1)}}},a=[`aria-label`,`aria-orientation`];function o(e,t,n,i,o,s){return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,{"data-qa":`dt-tab-group`,class:(0,r.normalizeClass)([`d-tab-neux`,{"d-tab-neux--vertical":n.orientation===`vertical`}])},[(0,r.createElementVNode)(`div`,(0,r.mergeProps)({ref:`tabs`,class:[`d-tablist`,o.TAB_LIST_SIZE_MODIFIERS[String(n.size)],o.TAB_ORIENTATION_MODIFIERS[n.orientation],n.orientation!==`vertical`&&o.TAB_SPREAD_MODIFIERS[n.spread],{[o.TAB_LIST_KIND_MODIFIERS.inverted]:n.inverted,[o.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]:n.borderless},s.resolvedTabsClass]},n.tabListChildProps,{role:`tablist`,"aria-label":n.label,"aria-orientation":n.orientation,onKeydown:[t[0]||(t[0]=(0,r.withKeys)((...e)=>s.tabLeft&&s.tabLeft(...e),[`left`])),t[1]||(t[1]=(0,r.withKeys)((...e)=>s.tabRight&&s.tabRight(...e),[`right`])),t[2]||(t[2]=(0,r.withKeys)((...e)=>s.tabUp&&s.tabUp(...e),[`up`])),t[3]||(t[3]=(0,r.withKeys)((...e)=>s.tabDown&&s.tabDown(...e),[`down`])),t[4]||(t[4]=(0,r.withKeys)((...e)=>s.selectTab&&s.selectTab(...e),[`enter`])),t[5]||(t[5]=(0,r.withKeys)((...e)=>s.selectTab&&s.selectTab(...e),[`space`])),t[7]||(t[7]=(0,r.withKeys)((0,r.withModifiers)((...e)=>s.onHomeButton&&s.onHomeButton(...e),[`prevent`]),[`home`])),t[8]||(t[8]=(0,r.withKeys)((0,r.withModifiers)((...e)=>s.onEndButton&&s.onEndButton(...e),[`prevent`]),[`end`]))],onClick:t[6]||(t[6]=(...e)=>s.selectTab&&s.selectTab(...e))}),[(0,r.renderSlot)(e.$slots,`tabs`)],16,a),(0,r.renderSlot)(e.$slots,`default`)],2)}var s=e.t(i,[[`render`,o]]);exports.default=s;
 //# sourceMappingURL=tab-group.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab-group.cjs","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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"}
+{"version":3,"file":"tab-group.cjs","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":"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"}

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

@@ -1,9 +1,9 @@
 import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { TAB_LIST_IMPORTANCE_MODIFIERS as t, TAB_LIST_KIND_MODIFIERS as n, TAB_LIST_SIZES as r, TAB_LIST_SIZE_MODIFIERS as i } from "./tabs-constants.js";
-import { createElementBlock as a, createElementVNode as o, mergeProps as s, openBlock as c, renderSlot as l, withKeys as u } from "vue";
-//#region components/tab/tab_group.vue
-var d = {
-	compatConfig: { MODE: 3 },
+import { TAB_ACTIVATION_MODES as t, TAB_GROUP_KINDS as n, TAB_LIST_IMPORTANCE_MODIFIERS as r, TAB_LIST_KIND_MODIFIERS as i, TAB_LIST_SIZES as a, TAB_LIST_SIZE_MODIFIERS as o, TAB_ORIENTATIONS as s, TAB_ORIENTATION_MODIFIERS as c, TAB_SPREADS as l, TAB_SPREAD_MODIFIERS as u } from "./tabs-constants.js";
+import { useIndicatorAnimation as d } from "../../common/composables/use-indicator-animation.js";
+import { createElementBlock as f, createElementVNode as p, mergeProps as m, normalizeClass as h, openBlock as g, ref as _, renderSlot as v, withKeys as y, withModifiers as b } from "vue";
+//#region components/Tab/TabGroup.vue
+var x = {
 	name: "DtTabGroup",
 	provide() {
 		return {
@@ -32,14 +32,28 @@ var d = {
 			type: Boolean,
 			default: !1
 		},
-		size: {
+		spread: {
 			type: String,
-			default: "default",
-			validate(e) {
-				return r.includes(e);
+			default: "none",
+			validator(e) {
+				return l.includes(e);
 			}
 		},
-		tabListClass: {
+		orientation: {
+			type: String,
+			default: "horizontal",
+			validator(e) {
+				return s.includes(e);
+			}
+		},
+		size: {
+			type: [String, Number],
+			default: 300,
+			validator(e) {
+				return a.includes(String(e));
+			}
+		},
+		tabsClass: {
 			type: [
 				String,
 				Array,
@@ -47,25 +61,72 @@ var d = {
 			],
 			default: ""
 		},
+		tabListClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: void 0
+		},
 		tabListChildProps: {
 			type: Object,
 			default: () => ({})
+		},
+		kind: {
+			type: String,
+			default: "default",
+			validator(e) {
+				return n.includes(e);
+			}
+		},
+		outlined: {
+			type: Boolean,
+			default: !1
+		},
+		activationMode: {
+			type: String,
+			default: "manual",
+			validator(e) {
+				return t.includes(e);
+			}
+		},
+		showIndicatorTransition: {
+			type: Boolean,
+			default: !0
 		}
 	},
 	emits: ["change", "before-change"],
+	setup() {
+		let e = _(null);
+		return {
+			tabs: e,
+			indicator: d(e, "--tab-indicator-duration", "--tab-indicator-easing")
+		};
+	},
 	data() {
 		return {
 			provideObj: {
 				selected: "",
-				disabled: !1
+				disabled: !1,
+				size: 300,
+				kind: "default",
+				outlined: !1,
+				orientation: "horizontal",
+				spread: "none",
+				focusedTabId: null
 			},
-			focusId: null,
-			tabs: [],
-			TAB_LIST_SIZE_MODIFIERS: i,
-			TAB_LIST_KIND_MODIFIERS: n,
-			TAB_LIST_IMPORTANCE_MODIFIERS: t
+			tabItems: [],
+			TAB_LIST_SIZE_MODIFIERS: o,
+			TAB_LIST_KIND_MODIFIERS: i,
+			TAB_LIST_IMPORTANCE_MODIFIERS: r,
+			TAB_ORIENTATION_MODIFIERS: c,
+			TAB_SPREAD_MODIFIERS: u
 		};
 	},
+	computed: { resolvedTabsClass() {
+		return this.tabListClass ?? this.tabsClass;
+	} },
 	watch: {
 		disabled: {
 			immediate: !0,
@@ -74,9 +135,39 @@ var d = {
 			}
 		},
 		selected: {
+			immediate: !0,
+			handler(e, t) {
+				this.provideObj.selected = this.selected, e !== t && (this.provideObj.focusedTabId = null);
+			}
+		},
+		size: {
+			immediate: !0,
+			handler() {
+				this.provideObj.size = this.size;
+			}
+		},
+		kind: {
+			immediate: !0,
+			handler() {
+				this.provideObj.kind = this.kind;
+			}
+		},
+		outlined: {
+			immediate: !0,
+			handler() {
+				this.provideObj.outlined = this.outlined;
+			}
+		},
+		orientation: {
+			immediate: !0,
+			handler() {
+				this.provideObj.orientation = this.orientation;
+			}
+		},
+		spread: {
 			immediate: !0,
 			handler() {
-				this.provideObj.selected = this.selected;
+				this.provideObj.spread = this.spread;
 			}
 		}
 	},
@@ -88,90 +179,132 @@ var d = {
 	},
 	methods: {
 		updateSelected() {
-			this.provideObj.selected || (this.provideObj.selected = this.selected), this.tabs = this.getTabChildren();
+			this.provideObj.selected || (this.provideObj.selected = this.selected), this.tabItems = this.getTabChildren(), this.provideObj.focusedTabId && !this.tabItems.some((e) => e.tabId === this.provideObj.focusedTabId) && (this.provideObj.focusedTabId = null);
 		},
 		setFocus(e) {
-			this.focusId = e;
+			this.provideObj.focusedTabId !== e && (this.provideObj.focusedTabId = e);
 		},
 		getTabChildren() {
-			return Array.from(this.$refs.tabs.querySelectorAll(".d-tab")).map((e) => ({
+			return Array.from(this.$refs.tabs.querySelectorAll("[role=\"tab\"]")).map((e) => ({
 				context: e,
 				panelId: e.getAttribute("aria-controls")?.replace("dt-panel-", ""),
 				tabId: e.getAttribute("id")?.replace("dt-tab-", ""),
-				isSelected: e.getAttribute("aria-selected") === "true"
+				isSelected: e.getAttribute("aria-selected") === "true",
+				isDisabled: e.getAttribute("aria-disabled") === "true"
 			}));
 		},
 		onChange() {
 			this.$emit("change", { ...this.provideObj });
 		},
 		tabLeft() {
+			this.orientation === "horizontal" && this.navigatePrevious();
+		},
+		tabRight() {
+			this.orientation === "horizontal" && this.navigateNext();
+		},
+		tabUp(e) {
+			this.orientation === "vertical" && (e.preventDefault(), this.navigatePrevious());
+		},
+		tabDown(e) {
+			this.orientation === "vertical" && (e.preventDefault(), this.navigateNext());
+		},
+		navigatePrevious() {
 			let e = this.getFocusedTabIndex();
 			if (e === -1) return;
-			let t = e - 1 < 0 ? this.tabs.length - 1 : e - 1;
+			let t = this.findNextTab(e, -1);
 			this.selectFocusOnTab(t);
 		},
-		tabRight() {
+		navigateNext() {
 			let e = this.getFocusedTabIndex();
 			if (e === -1) return;
-			let t = e + 1 > this.tabs.length - 1 ? 0 : e + 1;
+			let t = this.findNextTab(e, 1);
 			this.selectFocusOnTab(t);
 		},
+		findNextTab(e, t) {
+			let n = this.tabItems.length;
+			return (e + t + n) % n;
+		},
+		transitionIndicator(e, t) {
+			if (!t || !this.showIndicatorTransition) {
+				this.provideObj.selected = e;
+				return;
+			}
+			let n = this.indicator.snapshot("[aria-selected=\"true\"]");
+			this.provideObj.selected = e, n && this.$nextTick(() => {
+				let e = { backgroundColor: "transparent" }, r = {}, i = "::after";
+				this.outlined ? (e = {
+					borderColor: "transparent",
+					backgroundColor: "transparent"
+				}, r = { boxShadow: `inset 0 0 0 ${n.style.borderWidth} ${n.style.borderColor}` }, i = "::before") : this.kind === "muted" && (r = { backgroundColor: n.style.backgroundColor }, i = "::before"), this.indicator.animate({
+					oldRect: n.rect,
+					newEl: t,
+					orientation: this.orientation,
+					hideProps: e,
+					indicatorExtra: r,
+					pseudoElement: i
+				});
+			});
+		},
 		selectFocusOnTab(e) {
-			let { context: t } = this.tabs[e];
-			t.focus();
+			let { context: t, panelId: n, isDisabled: r } = this.tabItems[e];
+			t.focus(), this.activationMode === "auto" && !r && (this.indicator.cancel(), this.provideObj.selected = n, this.onChange());
 		},
 		selectTab(e) {
-			if (this.isSameTabClicked() || (this.$emit("before-change", e), e.defaultPrevented)) return;
-			let t = this.getFocusedTabIndex();
-			this.selectTabByIndex(t), this.onChange();
+			let t = e.target.closest("[role=\"tab\"]"), n = t ? this.tabItems.findIndex((e) => e.context === t) : this.getFocusedTabIndex();
+			n !== -1 && (this.tabItems[n]?.isDisabled || this.provideObj.selected !== this.tabItems[n]?.panelId && (this.$emit("before-change", e), !e.defaultPrevented && (e.preventDefault(), this.selectTabByIndex(n), this.onChange())));
 		},
 		selectTabByIndex(e) {
-			let { context: t, panelId: n } = this.tabs[e];
-			this.provideObj.selected = n, t.focus();
+			let { context: t, panelId: n } = this.tabItems[e];
+			this.transitionIndicator(n, t), t.focus();
 		},
 		getFocusedTabIndex() {
-			let e = this.tabs.findIndex((e) => this.focusId ? e.tabId === `${this.focusId}` : e.isSelected);
-			return e === -1 ? 0 : e;
+			let e = this.provideObj.focusedTabId, t = this.tabItems.findIndex((t) => e ? t.tabId === e : t.isSelected);
+			return t === -1 ? 0 : t;
 		},
 		onHomeButton() {
-			this.tabs.length !== 0 && this.tabs[0]?.context?.focus();
+			this.tabItems.length && this.selectFocusOnTab(0);
 		},
 		onEndButton() {
-			this.tabs.length !== 0 && this.tabs[this.tabs.length - 1]?.context?.focus();
-		},
-		isSameTabClicked() {
-			let e = this.tabs[this.getFocusedTabIndex()];
-			return this.provideObj.selected === e.panelId;
+			this.tabItems.length && this.selectFocusOnTab(this.tabItems.length - 1);
 		}
 	}
-}, f = { "data-qa": "dt-tab-group" }, p = ["aria-label"];
-function m(e, t, n, r, i, d) {
-	return c(), a("div", f, [o("div", s({
+}, S = ["aria-label", "aria-orientation"];
+function C(e, t, n, r, i, a) {
+	return g(), f("div", {
+		"data-qa": "dt-tab-group",
+		class: h(["d-tab-neux", { "d-tab-neux--vertical": n.orientation === "vertical" }])
+	}, [p("div", m({
 		ref: "tabs",
 		class: [
 			"d-tablist",
-			i.TAB_LIST_SIZE_MODIFIERS[n.size],
+			i.TAB_LIST_SIZE_MODIFIERS[String(n.size)],
+			i.TAB_ORIENTATION_MODIFIERS[n.orientation],
+			n.orientation !== "vertical" && i.TAB_SPREAD_MODIFIERS[n.spread],
 			{
 				[i.TAB_LIST_KIND_MODIFIERS.inverted]: n.inverted,
 				[i.TAB_LIST_IMPORTANCE_MODIFIERS.borderless]: n.borderless
 			},
-			n.tabListClass
+			a.resolvedTabsClass
 		]
 	}, n.tabListChildProps, {
 		role: "tablist",
 		"aria-label": n.label,
-		onKeyup: [
-			t[0] || (t[0] = u((...e) => d.tabLeft && d.tabLeft(...e), ["left"])),
-			t[1] || (t[1] = u((...e) => d.tabRight && d.tabRight(...e), ["right"])),
-			t[2] || (t[2] = u((...e) => d.selectTab && d.selectTab(...e), ["enter"])),
-			t[3] || (t[3] = u((...e) => d.selectTab && d.selectTab(...e), ["space"]))
+		"aria-orientation": n.orientation,
+		onKeydown: [
+			t[0] || (t[0] = y((...e) => a.tabLeft && a.tabLeft(...e), ["left"])),
+			t[1] || (t[1] = y((...e) => a.tabRight && a.tabRight(...e), ["right"])),
+			t[2] || (t[2] = y((...e) => a.tabUp && a.tabUp(...e), ["up"])),
+			t[3] || (t[3] = y((...e) => a.tabDown && a.tabDown(...e), ["down"])),
+			t[4] || (t[4] = y((...e) => a.selectTab && a.selectTab(...e), ["enter"])),
+			t[5] || (t[5] = y((...e) => a.selectTab && a.selectTab(...e), ["space"])),
+			t[7] || (t[7] = y(b((...e) => a.onHomeButton && a.onHomeButton(...e), ["prevent"]), ["home"])),
+			t[8] || (t[8] = y(b((...e) => a.onEndButton && a.onEndButton(...e), ["prevent"]), ["end"]))
 		],
-		onClick: t[4] || (t[4] = (...e) => d.selectTab && d.selectTab(...e)),
-		onKeydown: [t[5] || (t[5] = u((...e) => d.onHomeButton && d.onHomeButton(...e), ["home"])), t[6] || (t[6] = u((...e) => d.onEndButton && d.onEndButton(...e), ["end"]))]
-	}), [l(e.$slots, "tabs")], 16, p), l(e.$slots, "default")]);
+		onClick: t[6] || (t[6] = (...e) => a.selectTab && a.selectTab(...e))
+	}), [v(e.$slots, "tabs")], 16, S), v(e.$slots, "default")], 2);
 }
-var h = /* @__PURE__ */ e(d, [["render", m]]);
+var w = /* @__PURE__ */ e(x, [["render", C]]);
 //#endregion
-export { h as default };
+export { w as default };
 
 //# sourceMappingURL=tab-group.js.map