@dialpad/dialtone-vue 4.3.1 → 4.4.0

package/dist/components/FilterPill/FilterPill.vue.d.ts

@@ -5220,6 +5220,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: StringConstructor;
             default: string;
         };
+        wrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         gap: {
             type: (ObjectConstructor | StringConstructor)[];
             default: string;
@@ -5258,6 +5262,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: StringConstructor;
             default: string;
         };
+        wrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         gap: {
             type: (ObjectConstructor | StringConstructor)[];
             default: string;
@@ -5273,6 +5281,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             validator: (justify: unknown) => boolean;
         };
     }>> & Readonly<{}>, {
+        wrap: boolean;
         direction: string | Record<string, any>;
         as: string;
         gap: string | Record<string, any>;

package/dist/components/RichTextEditor/Extensions/Channels/ChannelComponent.vue.d.ts

@@ -240,6 +240,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: StringConstructor;
             default: string;
         };
+        wrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         gap: {
             type: (ObjectConstructor | StringConstructor)[];
             default: string;
@@ -278,6 +282,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: StringConstructor;
             default: string;
         };
+        wrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         gap: {
             type: (ObjectConstructor | StringConstructor)[];
             default: string;
@@ -293,6 +301,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             validator: (justify: unknown) => boolean;
         };
     }>> & Readonly<{}>, {
+        wrap: boolean;
         direction: string | Record<string, any>;
         as: string;
         gap: string | Record<string, any>;

package/dist/components/RichTextEditor/Extensions/Channels/ChannelSuggestion.vue.d.ts

@@ -21,6 +21,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: StringConstructor;
             default: string;
         };
+        wrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         gap: {
             type: (ObjectConstructor | StringConstructor)[];
             default: string;
@@ -59,6 +63,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: StringConstructor;
             default: string;
         };
+        wrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         gap: {
             type: (ObjectConstructor | StringConstructor)[];
             default: string;
@@ -74,6 +82,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             validator: (justify: unknown) => boolean;
         };
     }>> & Readonly<{}>, {
+        wrap: boolean;
         direction: string | Record<string, any>;
         as: string;
         gap: string | Record<string, any>;

package/dist/components/RichTextEditor/Extensions/Channels/ChannelSuggestion.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChannelSuggestion.vue.d.ts","sourceRoot":"","sources":["../../../../../components/RichTextEditor/Extensions/Channels/ChannelSuggestion.vue"],"names":[],"mappings":"AAgBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAyEA,GAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAAF,GAAE"}
+{"version":3,"file":"ChannelSuggestion.vue.d.ts","sourceRoot":"","sources":["../../../../../components/RichTextEditor/Extensions/Channels/ChannelSuggestion.vue"],"names":[],"mappings":"AAgBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAyEA,GAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAAF,GAAE"}

package/dist/components/RichTextEditor/Extensions/Emoji/EmojiSuggestion.vue.d.ts

@@ -894,6 +894,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: StringConstructor;
             default: string;
         };
+        wrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         gap: {
             type: (ObjectConstructor | StringConstructor)[];
             default: string;
@@ -932,6 +936,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: StringConstructor;
             default: string;
         };
+        wrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         gap: {
             type: (ObjectConstructor | StringConstructor)[];
             default: string;
@@ -947,6 +955,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             validator: (justify: unknown) => boolean;
         };
     }>> & Readonly<{}>, {
+        wrap: boolean;
         direction: string | Record<string, any>;
         as: string;
         gap: string | Record<string, any>;

package/dist/components/RichTextEditor/Extensions/Mentions/MentionSuggestion.vue.d.ts

@@ -346,6 +346,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: StringConstructor;
             default: string;
         };
+        wrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         gap: {
             type: (ObjectConstructor | StringConstructor)[];
             default: string;
@@ -384,6 +388,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: StringConstructor;
             default: string;
         };
+        wrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         gap: {
             type: (ObjectConstructor | StringConstructor)[];
             default: string;
@@ -399,6 +407,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             validator: (justify: unknown) => boolean;
         };
     }>> & Readonly<{}>, {
+        wrap: boolean;
         direction: string | Record<string, any>;
         as: string;
         gap: string | Record<string, any>;

package/dist/components/SegmentedControl/SegmentedControl.vue.d.ts

@@ -42,6 +42,10 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
             type: StringConstructor;
             default: string;
         };
+        wrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         gap: {
             type: (ObjectConstructor | StringConstructor)[];
             default: string;
@@ -71,6 +75,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
         defaultJustify(): string | null;
         stackResponsive(): any[];
     }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        wrap: boolean;
         direction: string | Record<string, any>;
         as: string;
         gap: string | Record<string, any>;
@@ -92,6 +97,10 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
             type: StringConstructor;
             default: string;
         };
+        wrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         gap: {
             type: (ObjectConstructor | StringConstructor)[];
             default: string;
@@ -121,6 +130,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
         defaultJustify(): string | null;
         stackResponsive(): any[];
     }, {}, {
+        wrap: boolean;
         direction: string | Record<string, any>;
         as: string;
         gap: string | Record<string, any>;
@@ -143,6 +153,10 @@ type __VLS_TemplateResult = {
                 type: StringConstructor;
                 default: string;
             };
+            wrap: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
             gap: {
                 type: (ObjectConstructor | StringConstructor)[];
                 default: string;
@@ -172,6 +186,7 @@ type __VLS_TemplateResult = {
             defaultJustify(): string | null;
             stackResponsive(): any[];
         }, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
+            wrap: boolean;
             direction: string | Record<string, any>;
             as: string;
             gap: string | Record<string, any>;
@@ -186,6 +201,10 @@ type __VLS_TemplateResult = {
                 type: StringConstructor;
                 default: string;
             };
+            wrap: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
             gap: {
                 type: (ObjectConstructor | StringConstructor)[];
                 default: string;
@@ -215,6 +234,7 @@ type __VLS_TemplateResult = {
             defaultJustify(): string | null;
             stackResponsive(): any[];
         }, {}, {
+            wrap: boolean;
             direction: string | Record<string, any>;
             as: string;
             gap: string | Record<string, any>;

package/dist/components/SegmentedControl/SegmentedControl.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.vue.d.ts","sourceRoot":"","sources":["../../../components/SegmentedControl/SegmentedControl.vue"],"names":[],"mappings":"AAiBA;wBA6wBqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAbjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAUG"}
+{"version":3,"file":"SegmentedControl.vue.d.ts","sourceRoot":"","sources":["../../../components/SegmentedControl/SegmentedControl.vue"],"names":[],"mappings":"AAiBA;wBA6wBqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAbjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAUG"}

package/dist/components/Stack/Stack.vue.d.ts

@@ -8,6 +8,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: string;
     };
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     gap: {
         type: (ObjectConstructor | StringConstructor)[];
         default: string;
@@ -46,6 +50,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: string;
     };
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     gap: {
         type: (ObjectConstructor | StringConstructor)[];
         default: string;
@@ -61,6 +69,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         validator: (justify: unknown) => boolean;
     };
 }>> & Readonly<{}>, {
+    wrap: boolean;
     direction: string | Record<string, any>;
     as: string;
     gap: string | Record<string, any>;

package/dist/components/Stack/Stack.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.vue.d.ts","sourceRoot":"","sources":["../../../components/Stack/Stack.vue"],"names":[],"mappings":"AAiBA;"}
+{"version":3,"file":"Stack.vue.d.ts","sourceRoot":"","sources":["../../../components/Stack/Stack.vue"],"names":[],"mappings":"AAkBA;"}

package/dist/lib/mode-island/mode-island.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"mode-island.cjs","names":[],"sources":["../../../components/ModeIsland/ModeIsland.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    class=\"d-mode-island\"\n    :data-dt-mode=\"computedMode\"\n    :data-mode-island-inverted=\"invertedAttribute\"\n    :data-dt-contrast=\"currentContrast\"\n    :data-dt-material=\"currentMaterial\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_MODE_ISLAND_TYPES } from './ModeIslandConstants';\nimport { modeValidator } from './Validators';\nimport {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\n  getRootMaterial,\n  findParentMode,\n} from './Utils';\n\nexport default {\n  name: 'DtModeIsland',\n\n  provide () {\n    return {\n      dtModeIslandMode: () => this.computedMode,\n    };\n  },\n\n  inject: {\n    parentModeIslandMode: {\n      from: 'dtModeIslandMode',\n      default: null,\n    },\n  },\n\n  props: {\n    /**\n     * Set this prop to render the mode island as a specific HTML element.\n     * @type {String}\n     * @values div, section, nav, article, aside, header, footer, main\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The mode to apply to the island.\n     * - 'inverted': Opposite of parent or root mode\n     * - 'light': Always light mode\n     * - 'dark': Always dark mode\n     * @type {String}\n     * @values inverted, light, dark\n     */\n    mode: {\n      type: String,\n      default: DT_MODE_ISLAND_TYPES.INVERTED,\n      validator: modeValidator,\n    },\n  },\n\n  data () {\n    return {\n      currentContrast: getRootContrast(),\n      currentMaterial: getRootMaterial(),\n      contrastObserver: null,\n      materialObserver: null,\n      modeObserver: null,\n      elementRef: null,\n      calculatedMode: null, // Store calculated mode as reactive data\n    };\n  },\n\n  computed: {\n    isInverted () {\n      return this.mode === DT_MODE_ISLAND_TYPES.INVERTED;\n    },\n\n    invertedAttribute () {\n      return this.isInverted ? '' : null;\n    },\n\n    computedMode () {\n      // If mode is explicitly light or dark, use it directly\n      if (this.mode === DT_MODE_ISLAND_TYPES.LIGHT || this.mode === DT_MODE_ISLAND_TYPES.DARK) {\n        return this.mode;\n      }\n\n      // If mode is inverted, use the calculated mode if available\n      if (this.mode === DT_MODE_ISLAND_TYPES.INVERTED && this.calculatedMode) {\n        return this.calculatedMode;\n      }\n\n      // Otherwise calculate it now\n      return this.calculateInvertedMode();\n    },\n  },\n\n  beforeCreate () {\n    // Throw error if data-dt-brand is manually set\n    if (this.$attrs && this.$attrs['data-dt-brand']) {\n      throw new Error('[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.');\n    }\n  },\n\n  mounted () {\n    // Store element reference\n    this.elementRef = this.$el;\n\n    // Setup MutationObserver to watch for contrast changes on root\n    this.setupContrastObserver();\n\n    // Setup MutationObserver to watch for material changes on root\n    this.setupMaterialObserver();\n\n    // Setup MutationObserver to watch for mode changes (only if inverted)\n    if (this.isInverted) {\n      // Initialize the calculated mode\n      this.calculatedMode = this.calculateInvertedMode();\n      this.setupModeObserver();\n    }\n\n    // Initial values\n    this.currentContrast = getRootContrast();\n    this.currentMaterial = getRootMaterial();\n  },\n\n  beforeUnmount () {\n    // Cleanup observers\n    if (this.contrastObserver) {\n      this.contrastObserver.disconnect();\n      this.contrastObserver = null;\n    }\n    if (this.materialObserver) {\n      this.materialObserver.disconnect();\n      this.materialObserver = null;\n    }\n    if (this.modeObserver) {\n      this.modeObserver.disconnect();\n      this.modeObserver = null;\n    }\n  },\n\n  methods: {\n    calculateInvertedMode () {\n      // First check if there's a parent mode island\n      if (this.parentModeIslandMode) {\n        const parentMode = typeof this.parentModeIslandMode === 'function'\n          ? this.parentModeIslandMode()\n          : this.parentModeIslandMode;\n        return getOppositeMode(parentMode);\n      }\n\n      // Otherwise, find the nearest parent with data-dt-mode\n      if (this.elementRef) {\n        const parentMode = findParentMode(this.elementRef);\n        return getOppositeMode(parentMode);\n      }\n\n      // Default fallback\n      return getOppositeMode(getRootMode());\n    },\n\n    setupContrastObserver () {\n      this.contrastObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-contrast') {\n            this.currentContrast = getRootContrast();\n          }\n        }\n      });\n\n      this.contrastObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-contrast'],\n      });\n    },\n\n    setupMaterialObserver () {\n      this.materialObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-material') {\n            this.currentMaterial = getRootMaterial();\n          }\n        }\n      });\n\n      this.materialObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-material'],\n      });\n    },\n\n    setupModeObserver () {\n      const config = {\n        attributes: true,\n        attributeFilter: ['data-dt-mode'],\n        subtree: false,\n      };\n\n      this.modeObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-mode') {\n            // Recalculate and update the reactive data property\n            this.calculatedMode = this.calculateInvertedMode();\n          }\n        }\n      });\n\n      // Observe root element\n      this.modeObserver.observe(document.documentElement, config);\n\n      // Also observe all parent elements with data-dt-mode\n      let parent = this.elementRef?.parentElement;\n      while (parent) {\n        if (parent.hasAttribute('data-dt-mode')) {\n          this.modeObserver.observe(parent, config);\n        }\n        parent = parent.parentElement;\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"mode-island.cjs","names":[],"sources":["../../../components/ModeIsland/ModeIsland.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    class=\"d-mode-island\"\n    :data-dt-mode=\"computedMode\"\n    :data-mode-island-inverted=\"invertedAttribute\"\n    :data-dt-contrast=\"currentContrast\"\n    :data-dt-material=\"currentMaterial\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_MODE_ISLAND_TYPES } from './ModeIslandConstants';\nimport { modeValidator } from './Validators';\nimport {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\n  getRootMaterial,\n  findParentMode,\n} from './Utils';\n\n/**\n * Prefer the v-dt-mode directive for local color-mode scoping.\n * DtModeIsland renders a container with the active mode's primary surface background.\n * Use it when that container and automatic surface are wanted together, or when\n * the current directive plugin cannot be installed. Its mode prop uses \"inverted\";\n * the directive uses \"invert\". See the usage guide for server-rendering considerations.\n * @see https://dialtone.dialpad.com/components/mode-island.html\n */\nexport default {\n  name: 'DtModeIsland',\n\n  provide () {\n    return {\n      dtModeIslandMode: () => this.computedMode,\n    };\n  },\n\n  inject: {\n    parentModeIslandMode: {\n      from: 'dtModeIslandMode',\n      default: null,\n    },\n  },\n\n  props: {\n    /**\n     * Set this prop to render the mode island as a specific HTML element.\n     * @type {String}\n     * @values div, section, nav, article, aside, header, footer, main\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The mode to apply to the island.\n     * - 'inverted': Opposite of parent or root mode\n     * - 'light': Always light mode\n     * - 'dark': Always dark mode\n     * @type {String}\n     * @values inverted, light, dark\n     */\n    mode: {\n      type: String,\n      default: DT_MODE_ISLAND_TYPES.INVERTED,\n      validator: modeValidator,\n    },\n  },\n\n  data () {\n    return {\n      currentContrast: getRootContrast(),\n      currentMaterial: getRootMaterial(),\n      contrastObserver: null,\n      materialObserver: null,\n      modeObserver: null,\n      elementRef: null,\n      calculatedMode: null, // Store calculated mode as reactive data\n    };\n  },\n\n  computed: {\n    isInverted () {\n      return this.mode === DT_MODE_ISLAND_TYPES.INVERTED;\n    },\n\n    invertedAttribute () {\n      return this.isInverted ? '' : null;\n    },\n\n    computedMode () {\n      // If mode is explicitly light or dark, use it directly\n      if (this.mode === DT_MODE_ISLAND_TYPES.LIGHT || this.mode === DT_MODE_ISLAND_TYPES.DARK) {\n        return this.mode;\n      }\n\n      // If mode is inverted, use the calculated mode if available\n      if (this.mode === DT_MODE_ISLAND_TYPES.INVERTED && this.calculatedMode) {\n        return this.calculatedMode;\n      }\n\n      // Otherwise calculate it now\n      return this.calculateInvertedMode();\n    },\n  },\n\n  beforeCreate () {\n    // Throw error if data-dt-brand is manually set\n    if (this.$attrs && this.$attrs['data-dt-brand']) {\n      throw new Error('[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.');\n    }\n  },\n\n  mounted () {\n    // Store element reference\n    this.elementRef = this.$el;\n\n    // Setup MutationObserver to watch for contrast changes on root\n    this.setupContrastObserver();\n\n    // Setup MutationObserver to watch for material changes on root\n    this.setupMaterialObserver();\n\n    // Setup MutationObserver to watch for mode changes (only if inverted)\n    if (this.isInverted) {\n      // Initialize the calculated mode\n      this.calculatedMode = this.calculateInvertedMode();\n      this.setupModeObserver();\n    }\n\n    // Initial values\n    this.currentContrast = getRootContrast();\n    this.currentMaterial = getRootMaterial();\n  },\n\n  beforeUnmount () {\n    // Cleanup observers\n    if (this.contrastObserver) {\n      this.contrastObserver.disconnect();\n      this.contrastObserver = null;\n    }\n    if (this.materialObserver) {\n      this.materialObserver.disconnect();\n      this.materialObserver = null;\n    }\n    if (this.modeObserver) {\n      this.modeObserver.disconnect();\n      this.modeObserver = null;\n    }\n  },\n\n  methods: {\n    calculateInvertedMode () {\n      // First check if there's a parent mode island\n      if (this.parentModeIslandMode) {\n        const parentMode = typeof this.parentModeIslandMode === 'function'\n          ? this.parentModeIslandMode()\n          : this.parentModeIslandMode;\n        return getOppositeMode(parentMode);\n      }\n\n      // Otherwise, find the nearest parent with data-dt-mode\n      if (this.elementRef) {\n        const parentMode = findParentMode(this.elementRef);\n        return getOppositeMode(parentMode);\n      }\n\n      // Default fallback\n      return getOppositeMode(getRootMode());\n    },\n\n    setupContrastObserver () {\n      this.contrastObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-contrast') {\n            this.currentContrast = getRootContrast();\n          }\n        }\n      });\n\n      this.contrastObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-contrast'],\n      });\n    },\n\n    setupMaterialObserver () {\n      this.materialObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-material') {\n            this.currentMaterial = getRootMaterial();\n          }\n        }\n      });\n\n      this.materialObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-material'],\n      });\n    },\n\n    setupModeObserver () {\n      const config = {\n        attributes: true,\n        attributeFilter: ['data-dt-mode'],\n        subtree: false,\n      };\n\n      this.modeObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-mode') {\n            // Recalculate and update the reactive data property\n            this.calculatedMode = this.calculateInvertedMode();\n          }\n        }\n      });\n\n      // Observe root element\n      this.modeObserver.observe(document.documentElement, config);\n\n      // Also observe all parent elements with data-dt-mode\n      let parent = this.elementRef?.parentElement;\n      while (parent) {\n        if (parent.hasAttribute('data-dt-mode')) {\n          this.modeObserver.observe(parent, config);\n        }\n        parent = parent.parentElement;\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/mode-island/mode-island.js.map

@@ -1 +1 @@
-{"version":3,"file":"mode-island.js","names":[],"sources":["../../../components/ModeIsland/ModeIsland.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    class=\"d-mode-island\"\n    :data-dt-mode=\"computedMode\"\n    :data-mode-island-inverted=\"invertedAttribute\"\n    :data-dt-contrast=\"currentContrast\"\n    :data-dt-material=\"currentMaterial\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_MODE_ISLAND_TYPES } from './ModeIslandConstants';\nimport { modeValidator } from './Validators';\nimport {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\n  getRootMaterial,\n  findParentMode,\n} from './Utils';\n\nexport default {\n  name: 'DtModeIsland',\n\n  provide () {\n    return {\n      dtModeIslandMode: () => this.computedMode,\n    };\n  },\n\n  inject: {\n    parentModeIslandMode: {\n      from: 'dtModeIslandMode',\n      default: null,\n    },\n  },\n\n  props: {\n    /**\n     * Set this prop to render the mode island as a specific HTML element.\n     * @type {String}\n     * @values div, section, nav, article, aside, header, footer, main\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The mode to apply to the island.\n     * - 'inverted': Opposite of parent or root mode\n     * - 'light': Always light mode\n     * - 'dark': Always dark mode\n     * @type {String}\n     * @values inverted, light, dark\n     */\n    mode: {\n      type: String,\n      default: DT_MODE_ISLAND_TYPES.INVERTED,\n      validator: modeValidator,\n    },\n  },\n\n  data () {\n    return {\n      currentContrast: getRootContrast(),\n      currentMaterial: getRootMaterial(),\n      contrastObserver: null,\n      materialObserver: null,\n      modeObserver: null,\n      elementRef: null,\n      calculatedMode: null, // Store calculated mode as reactive data\n    };\n  },\n\n  computed: {\n    isInverted () {\n      return this.mode === DT_MODE_ISLAND_TYPES.INVERTED;\n    },\n\n    invertedAttribute () {\n      return this.isInverted ? '' : null;\n    },\n\n    computedMode () {\n      // If mode is explicitly light or dark, use it directly\n      if (this.mode === DT_MODE_ISLAND_TYPES.LIGHT || this.mode === DT_MODE_ISLAND_TYPES.DARK) {\n        return this.mode;\n      }\n\n      // If mode is inverted, use the calculated mode if available\n      if (this.mode === DT_MODE_ISLAND_TYPES.INVERTED && this.calculatedMode) {\n        return this.calculatedMode;\n      }\n\n      // Otherwise calculate it now\n      return this.calculateInvertedMode();\n    },\n  },\n\n  beforeCreate () {\n    // Throw error if data-dt-brand is manually set\n    if (this.$attrs && this.$attrs['data-dt-brand']) {\n      throw new Error('[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.');\n    }\n  },\n\n  mounted () {\n    // Store element reference\n    this.elementRef = this.$el;\n\n    // Setup MutationObserver to watch for contrast changes on root\n    this.setupContrastObserver();\n\n    // Setup MutationObserver to watch for material changes on root\n    this.setupMaterialObserver();\n\n    // Setup MutationObserver to watch for mode changes (only if inverted)\n    if (this.isInverted) {\n      // Initialize the calculated mode\n      this.calculatedMode = this.calculateInvertedMode();\n      this.setupModeObserver();\n    }\n\n    // Initial values\n    this.currentContrast = getRootContrast();\n    this.currentMaterial = getRootMaterial();\n  },\n\n  beforeUnmount () {\n    // Cleanup observers\n    if (this.contrastObserver) {\n      this.contrastObserver.disconnect();\n      this.contrastObserver = null;\n    }\n    if (this.materialObserver) {\n      this.materialObserver.disconnect();\n      this.materialObserver = null;\n    }\n    if (this.modeObserver) {\n      this.modeObserver.disconnect();\n      this.modeObserver = null;\n    }\n  },\n\n  methods: {\n    calculateInvertedMode () {\n      // First check if there's a parent mode island\n      if (this.parentModeIslandMode) {\n        const parentMode = typeof this.parentModeIslandMode === 'function'\n          ? this.parentModeIslandMode()\n          : this.parentModeIslandMode;\n        return getOppositeMode(parentMode);\n      }\n\n      // Otherwise, find the nearest parent with data-dt-mode\n      if (this.elementRef) {\n        const parentMode = findParentMode(this.elementRef);\n        return getOppositeMode(parentMode);\n      }\n\n      // Default fallback\n      return getOppositeMode(getRootMode());\n    },\n\n    setupContrastObserver () {\n      this.contrastObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-contrast') {\n            this.currentContrast = getRootContrast();\n          }\n        }\n      });\n\n      this.contrastObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-contrast'],\n      });\n    },\n\n    setupMaterialObserver () {\n      this.materialObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-material') {\n            this.currentMaterial = getRootMaterial();\n          }\n        }\n      });\n\n      this.materialObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-material'],\n      });\n    },\n\n    setupModeObserver () {\n      const config = {\n        attributes: true,\n        attributeFilter: ['data-dt-mode'],\n        subtree: false,\n      };\n\n      this.modeObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-mode') {\n            // Recalculate and update the reactive data property\n            this.calculatedMode = this.calculateInvertedMode();\n          }\n        }\n      });\n\n      // Observe root element\n      this.modeObserver.observe(document.documentElement, config);\n\n      // Also observe all parent elements with data-dt-mode\n      let parent = this.elementRef?.parentElement;\n      while (parent) {\n        if (parent.hasAttribute('data-dt-mode')) {\n          this.modeObserver.observe(parent, config);\n        }\n        parent = parent.parentElement;\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"mode-island.js","names":[],"sources":["../../../components/ModeIsland/ModeIsland.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    class=\"d-mode-island\"\n    :data-dt-mode=\"computedMode\"\n    :data-mode-island-inverted=\"invertedAttribute\"\n    :data-dt-contrast=\"currentContrast\"\n    :data-dt-material=\"currentMaterial\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_MODE_ISLAND_TYPES } from './ModeIslandConstants';\nimport { modeValidator } from './Validators';\nimport {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\n  getRootMaterial,\n  findParentMode,\n} from './Utils';\n\n/**\n * Prefer the v-dt-mode directive for local color-mode scoping.\n * DtModeIsland renders a container with the active mode's primary surface background.\n * Use it when that container and automatic surface are wanted together, or when\n * the current directive plugin cannot be installed. Its mode prop uses \"inverted\";\n * the directive uses \"invert\". See the usage guide for server-rendering considerations.\n * @see https://dialtone.dialpad.com/components/mode-island.html\n */\nexport default {\n  name: 'DtModeIsland',\n\n  provide () {\n    return {\n      dtModeIslandMode: () => this.computedMode,\n    };\n  },\n\n  inject: {\n    parentModeIslandMode: {\n      from: 'dtModeIslandMode',\n      default: null,\n    },\n  },\n\n  props: {\n    /**\n     * Set this prop to render the mode island as a specific HTML element.\n     * @type {String}\n     * @values div, section, nav, article, aside, header, footer, main\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The mode to apply to the island.\n     * - 'inverted': Opposite of parent or root mode\n     * - 'light': Always light mode\n     * - 'dark': Always dark mode\n     * @type {String}\n     * @values inverted, light, dark\n     */\n    mode: {\n      type: String,\n      default: DT_MODE_ISLAND_TYPES.INVERTED,\n      validator: modeValidator,\n    },\n  },\n\n  data () {\n    return {\n      currentContrast: getRootContrast(),\n      currentMaterial: getRootMaterial(),\n      contrastObserver: null,\n      materialObserver: null,\n      modeObserver: null,\n      elementRef: null,\n      calculatedMode: null, // Store calculated mode as reactive data\n    };\n  },\n\n  computed: {\n    isInverted () {\n      return this.mode === DT_MODE_ISLAND_TYPES.INVERTED;\n    },\n\n    invertedAttribute () {\n      return this.isInverted ? '' : null;\n    },\n\n    computedMode () {\n      // If mode is explicitly light or dark, use it directly\n      if (this.mode === DT_MODE_ISLAND_TYPES.LIGHT || this.mode === DT_MODE_ISLAND_TYPES.DARK) {\n        return this.mode;\n      }\n\n      // If mode is inverted, use the calculated mode if available\n      if (this.mode === DT_MODE_ISLAND_TYPES.INVERTED && this.calculatedMode) {\n        return this.calculatedMode;\n      }\n\n      // Otherwise calculate it now\n      return this.calculateInvertedMode();\n    },\n  },\n\n  beforeCreate () {\n    // Throw error if data-dt-brand is manually set\n    if (this.$attrs && this.$attrs['data-dt-brand']) {\n      throw new Error('[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.');\n    }\n  },\n\n  mounted () {\n    // Store element reference\n    this.elementRef = this.$el;\n\n    // Setup MutationObserver to watch for contrast changes on root\n    this.setupContrastObserver();\n\n    // Setup MutationObserver to watch for material changes on root\n    this.setupMaterialObserver();\n\n    // Setup MutationObserver to watch for mode changes (only if inverted)\n    if (this.isInverted) {\n      // Initialize the calculated mode\n      this.calculatedMode = this.calculateInvertedMode();\n      this.setupModeObserver();\n    }\n\n    // Initial values\n    this.currentContrast = getRootContrast();\n    this.currentMaterial = getRootMaterial();\n  },\n\n  beforeUnmount () {\n    // Cleanup observers\n    if (this.contrastObserver) {\n      this.contrastObserver.disconnect();\n      this.contrastObserver = null;\n    }\n    if (this.materialObserver) {\n      this.materialObserver.disconnect();\n      this.materialObserver = null;\n    }\n    if (this.modeObserver) {\n      this.modeObserver.disconnect();\n      this.modeObserver = null;\n    }\n  },\n\n  methods: {\n    calculateInvertedMode () {\n      // First check if there's a parent mode island\n      if (this.parentModeIslandMode) {\n        const parentMode = typeof this.parentModeIslandMode === 'function'\n          ? this.parentModeIslandMode()\n          : this.parentModeIslandMode;\n        return getOppositeMode(parentMode);\n      }\n\n      // Otherwise, find the nearest parent with data-dt-mode\n      if (this.elementRef) {\n        const parentMode = findParentMode(this.elementRef);\n        return getOppositeMode(parentMode);\n      }\n\n      // Default fallback\n      return getOppositeMode(getRootMode());\n    },\n\n    setupContrastObserver () {\n      this.contrastObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-contrast') {\n            this.currentContrast = getRootContrast();\n          }\n        }\n      });\n\n      this.contrastObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-contrast'],\n      });\n    },\n\n    setupMaterialObserver () {\n      this.materialObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-material') {\n            this.currentMaterial = getRootMaterial();\n          }\n        }\n      });\n\n      this.materialObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-material'],\n      });\n    },\n\n    setupModeObserver () {\n      const config = {\n        attributes: true,\n        attributeFilter: ['data-dt-mode'],\n        subtree: false,\n      };\n\n      this.modeObserver = new MutationObserver((mutationsList) => {\n        for (const mutation of mutationsList) {\n          if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-mode') {\n            // Recalculate and update the reactive data property\n            this.calculatedMode = this.calculateInvertedMode();\n          }\n        }\n      });\n\n      // Observe root element\n      this.modeObserver.observe(document.documentElement, config);\n\n      // Also observe all parent elements with data-dt-mode\n      let parent = this.elementRef?.parentElement;\n      while (parent) {\n        if (parent.hasAttribute('data-dt-mode')) {\n          this.modeObserver.observe(parent, config);\n        }\n        parent = parent.parentElement;\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/stack/stack.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(`./stack-constants.cjs`),n=require(`./validators.cjs`),r=require(`./utils.cjs`);let i=require(`vue`);var a={name:`DtStack`,props:{direction:{type:[String,Object],default:`column`,validator:e=>n.directionValidator(e)},as:{type:String,default:`div`},gap:{type:[String,Object],default:`0`,validator:e=>n.gapValidator(e)},align:{type:[String,Object],validator:e=>n.alignValidator(e)},justify:{type:[String,Object],default:`start`,validator:e=>n.justifyValidator(e)}},data(){return{DT_STACK_DIRECTION:t.DT_STACK_DIRECTION,DT_STACK_GAP:t.DT_STACK_GAP,DT_STACK_RESPONSIVE_BREAKPOINTS:t.DT_STACK_RESPONSIVE_BREAKPOINTS,DT_STACK_ALIGN:t.DT_STACK_ALIGN,DT_STACK_JUSTIFY:t.DT_STACK_JUSTIFY}},computed:{defaultGap(){return r.getDefaultGapClass(this.gap)},defaultDirection(){return r.getDefaultDirectionClass(this.direction)},defaultAlign(){return r.getDefaultAlignClass(this.align)},defaultJustify(){return r.getDefaultJustifyClass(this.justify)},stackResponsive(){return r.getResponsiveClasses(this.direction,this.gap,this.align,this.justify)}}};function o(e,t,n,r,a,o){return(0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(n.as),{"data-qa":`dt-stack`,class:(0,i.normalizeClass)([`d-stack`,o.defaultDirection,o.defaultGap,o.defaultAlign,o.defaultJustify,o.stackResponsive])},{default:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`default`)]),_:3},8,[`class`])}var s=e.t(a,[[`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(`./stack-constants.cjs`),n=require(`./validators.cjs`),r=require(`./utils.cjs`);let i=require(`vue`);var a={name:`DtStack`,props:{direction:{type:[String,Object],default:`column`,validator:e=>n.directionValidator(e)},as:{type:String,default:`div`},wrap:{type:Boolean,default:!1},gap:{type:[String,Object],default:`0`,validator:e=>n.gapValidator(e)},align:{type:[String,Object],validator:e=>n.alignValidator(e)},justify:{type:[String,Object],default:`start`,validator:e=>n.justifyValidator(e)}},data(){return{DT_STACK_DIRECTION:t.DT_STACK_DIRECTION,DT_STACK_GAP:t.DT_STACK_GAP,DT_STACK_RESPONSIVE_BREAKPOINTS:t.DT_STACK_RESPONSIVE_BREAKPOINTS,DT_STACK_ALIGN:t.DT_STACK_ALIGN,DT_STACK_JUSTIFY:t.DT_STACK_JUSTIFY}},computed:{defaultGap(){return r.getDefaultGapClass(this.gap)},defaultDirection(){return r.getDefaultDirectionClass(this.direction)},defaultAlign(){return r.getDefaultAlignClass(this.align)},defaultJustify(){return r.getDefaultJustifyClass(this.justify)},stackResponsive(){return r.getResponsiveClasses(this.direction,this.gap,this.align,this.justify)}}};function o(e,t,n,r,a,o){return(0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(n.as),{"data-qa":`dt-stack`,class:(0,i.normalizeClass)([`d-stack`,{"d-stack--wrap":n.wrap},o.defaultDirection,o.defaultGap,o.defaultAlign,o.defaultJustify,o.stackResponsive])},{default:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`default`)]),_:3},8,[`class`])}var s=e.t(a,[[`render`,o]]);exports.default=s;
 //# sourceMappingURL=stack.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"stack.cjs","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, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 525, 550, 600, 650, 700, 750, 800\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     * The around, between, and evenly values are deprecated and will ideally be removed in the next major version.\n     * Please use space-around, space-between, and space-evenly instead.\n     * @values start, center, end, space-around, space-between, space-evenly, around, between, 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":"kTAuBA,IAAK,EAAU,CACb,KAAM,UAEN,MAAO,CAWL,UAAW,CACT,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,SACT,UAAY,GAAc,EAAA,mBAAmB,EAAU,CACxD,CAKD,GAAI,CACF,KAAM,OACN,QAAS,MACV,CAUD,IAAK,CACH,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAY,GAAQ,EAAA,aAAa,EAAI,CACtC,CAYD,MAAO,CACL,KAAM,CAAC,OAAQ,OAAO,CACtB,UAAY,GAAU,EAAA,eAAe,EAAM,CAC5C,CAYD,QAAS,CACP,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,QACT,UAAY,GAAY,EAAA,iBAAiB,EAAQ,CAClD,CACF,CAED,MAAQ,CACN,MAAO,CACL,mBAAA,EAAA,mBACA,aAAA,EAAA,aACA,gCAAA,EAAA,gCACA,eAAA,EAAA,eACA,iBAAA,EAAA,iBACD,EAGH,SAAU,CACR,YAAc,CACZ,OAAO,EAAA,mBAAmB,KAAK,IAAI,EAGrC,kBAAoB,CAClB,OAAO,EAAA,yBAAyB,KAAK,UAAU,EAGjD,cAAgB,CACd,OAAO,EAAA,qBAAqB,KAAK,MAAM,EAGzC,gBAAkB,CAChB,OAAO,EAAA,uBAAuB,KAAK,QAAQ,EAG7C,iBAAmB,CACjB,OAAO,EAAA,qBAAqB,KAAK,UAAW,KAAK,IAAK,KAAK,MAAO,KAAK,QAAQ,EAElF,CACF,iGA9HQ,EAAA,GAAE,CAAA,CACP,UAAQ,WACP,OAAA,EAAA,EAAA,gBAAK,WAA2B,EAAA,iBAAwB,EAAA,WAAkB,EAAA,aAAoB,EAAA,eAAsB,EAAA,8CAU7G,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"stack.cjs","names":[],"sources":["../../../components/Stack/Stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    data-qa=\"dt-stack\"\n    :class=\"[\n      'd-stack',\n      { 'd-stack--wrap': wrap },\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     * Allow items to wrap onto additional lines when they exceed the available space.\n     */\n    wrap: {\n      type: Boolean,\n      default: false,\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, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 525, 550, 600, 650, 700, 750, 800\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     * The around, between, and evenly values are deprecated and will ideally be removed in the next major version.\n     * Please use space-around, space-between, and space-evenly instead.\n     * @values start, center, end, space-around, space-between, space-evenly, around, between, 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":"kTAwBA,IAAK,EAAU,CACb,KAAM,UAEN,MAAO,CAWL,UAAW,CACT,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,SACT,UAAY,GAAc,EAAA,mBAAmB,EAAU,CACxD,CAKD,GAAI,CACF,KAAM,OACN,QAAS,MACV,CAKD,KAAM,CACJ,KAAM,QACN,QAAS,GACV,CAUD,IAAK,CACH,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAY,GAAQ,EAAA,aAAa,EAAI,CACtC,CAYD,MAAO,CACL,KAAM,CAAC,OAAQ,OAAO,CACtB,UAAY,GAAU,EAAA,eAAe,EAAM,CAC5C,CAYD,QAAS,CACP,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,QACT,UAAY,GAAY,EAAA,iBAAiB,EAAQ,CAClD,CACF,CAED,MAAQ,CACN,MAAO,CACL,mBAAA,EAAA,mBACA,aAAA,EAAA,aACA,gCAAA,EAAA,gCACA,eAAA,EAAA,eACA,iBAAA,EAAA,iBACD,EAGH,SAAU,CACR,YAAc,CACZ,OAAO,EAAA,mBAAmB,KAAK,IAAI,EAGrC,kBAAoB,CAClB,OAAO,EAAA,yBAAyB,KAAK,UAAU,EAGjD,cAAgB,CACd,OAAO,EAAA,qBAAqB,KAAK,MAAM,EAGzC,gBAAkB,CAChB,OAAO,EAAA,uBAAuB,KAAK,QAAQ,EAG7C,iBAAmB,CACjB,OAAO,EAAA,qBAAqB,KAAK,UAAW,KAAK,IAAK,KAAK,MAAO,KAAK,QAAQ,EAElF,CACF,iGAvIQ,EAAA,GAAE,CAAA,CACP,UAAQ,WACP,OAAA,EAAA,EAAA,gBAAK,4BAA8C,EAAA,KAAI,CAAU,EAAA,iBAAwB,EAAA,WAAkB,EAAA,aAAoB,EAAA,eAAsB,EAAA,8CAW9I,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA"}

package/dist/lib/stack/stack.js

@@ -16,6 +16,10 @@ var x = {
 			type: String,
 			default: "div"
 		},
+		wrap: {
+			type: Boolean,
+			default: !1
+		},
 		gap: {
 			type: [String, Object],
 			default: "0",
@@ -63,6 +67,7 @@ function S(e, t, n, r, i, a) {
 		"data-qa": "dt-stack",
 		class: g([
 			"d-stack",
+			{ "d-stack--wrap": n.wrap },
 			a.defaultDirection,
 			a.defaultGap,
 			a.defaultAlign,

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 './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, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 525, 550, 600, 650, 700, 750, 800\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     * The around, between, and evenly values are deprecated and will ideally be removed in the next major version.\n     * Please use space-around, space-between, and space-evenly instead.\n     * @values start, center, end, space-around, space-between, space-evenly, around, between, 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;EAYD,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;;aA/HC,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      { 'd-stack--wrap': wrap },\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     * Allow items to wrap onto additional lines when they exceed the available space.\n     */\n    wrap: {\n      type: Boolean,\n      default: false,\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, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 525, 550, 600, 650, 700, 750, 800\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     * The around, between, and evenly values are deprecated and will ideally be removed in the next major version.\n     * Please use space-around, space-between, and space-evenly instead.\n     * @values start, center, end, space-around, space-between, space-evenly, around, between, 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":";;;;;;AAwBA,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;EAKD,MAAM;GACJ,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;EAYD,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;;aAxIC,EAeY,EAdL,EAAA,GAAE,EAAA;EACP,WAAQ;EACP,OAAK,EAAA;;sBAA8C,EAAA,MAAI;GAAU,EAAA;GAAwB,EAAA;GAAkB,EAAA;GAAoB,EAAA;GAAsB,EAAA;;;mBAW9I,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/dialtone-vue",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "description": "Vue component library for Dialpad's design system Dialtone",
   "files": [
     "dist"
@@ -46,8 +46,8 @@
     "overlayscrollbars": "2.10.0",
     "regex-combined-emojis": "1.6.0",
     "tippy.js": "6.3.7",
-    "@dialpad/dialtone-emojis": "1.3.0",
-    "@dialpad/dialtone-icons": "5.2.0"
+    "@dialpad/dialtone-emojis": "1.3.1",
+    "@dialpad/dialtone-icons": "5.2.1"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "10.3.0",
@@ -61,12 +61,12 @@
     "react": "19.2.4",
     "storybook": "10.3.0",
     "vue": "^3.3.4",
-    "@dialpad/dialtone-css": "9.0.1",
+    "@dialpad/dialtone-css": "9.1.0",
     "@dialpad/generator-dialtone": "0.1.0"
   },
   "peerDependencies": {
     "vue": ">=3.2",
-    "@dialpad/dialtone-css": "^9.0.1"
+    "@dialpad/dialtone-css": "^9.1.0"
   },
   "bugs": {
     "email": "dialtone@dialpad.com"
@@ -87,11 +87,6 @@
       "email": "ignacio.ropolo@dialpad.com",
       "url": "https://github.com/iropolo"
     },
-    {
-      "name": "Nina Repetto",
-      "email": "nina.repetto@dialpad.com",
-      "url": "https://github.com/ninamarina"
-    },
     {
       "name": "Belu Montoya",
       "email": "belu.montoya@dialpad.com",