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

package/dist/lib/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","names":[],"sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <teleport\n    :disabled=\"!appendTo\"\n    :to=\"appendTo\"\n  >\n    <dt-lazy-show\n      ref=\"modalRoot\"\n      transition=\"d-zoom\"\n      :show=\"show\"\n      :class=\"[\n        'd-modal',\n        MODAL_KIND_MODIFIERS[kind],\n        MODAL_SIZE_MODIFIERS[size],\n        modalClass,\n      ]\"\n      data-qa=\"dt-modal\"\n      :aria-hidden=\"open\"\n      v-on=\"modalListeners\"\n    >\n      <div\n        v-if=\"show && (hasSlotContent($slots.banner) || bannerTitle)\"\n        data-qa=\"dt-modal-banner\"\n        :class=\"[\n          'd-modal__banner',\n          bannerClass,\n          bannerKindClass,\n        ]\"\n      >\n        <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n        <slot name=\"banner\">\n          {{ bannerTitle }}\n        </slot>\n      </div>\n      <transition\n        appear\n        name=\"d-modal__dialog\"\n      >\n        <div\n          v-show=\"show\"\n          :class=\"[\n            'd-modal__dialog',\n            { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n            dialogClass,\n          ]\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-describedby=\"describedById\"\n          :aria-labelledby=\"labelledById\"\n        >\n          <div\n            v-if=\"hasSlotContent($slots.header)\"\n            :id=\"labelledById\"\n            class=\"d-modal__header\"\n            data-qa=\"dt-modal-title\"\n          >\n            <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n            <slot name=\"header\" />\n          </div>\n          <h2\n            v-else\n            :id=\"labelledById\"\n            class=\"d-modal__header\"\n            data-qa=\"dt-modal-title\"\n          >\n            {{ title }}\n          </h2>\n          <div\n            v-if=\"hasSlotContent($slots.default)\"\n            :class=\"[\n              'd-modal__content',\n              contentClass,\n            ]\"\n            data-qa=\"dt-modal-copy\"\n          >\n            <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n            <slot />\n          </div>\n          <p\n            v-else\n            :class=\"[\n              'd-modal__content',\n              contentClass,\n            ]\"\n            data-qa=\"dt-modal-copy\"\n          >\n            {{ copy }}\n          </p>\n          <footer\n            v-if=\"hasFooterSlot\"\n            class=\"d-modal__footer\"\n          >\n            <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n            <slot name=\"footer\" />\n          </footer>\n          <sr-only-close-button\n            v-if=\"hideClose\"\n            @close=\"close\"\n          />\n          <dt-button\n            v-else\n            class=\"d-modal__close\"\n            data-qa=\"dt-modal-close-button\"\n            size=\"md\"\n            kind=\"muted\"\n            importance=\"clear\"\n            :aria-label=\"closeButtonTitle\"\n            :title=\"closeButtonTitle\"\n            @click=\"close\"\n          >\n            <template #icon=\"{ iconSize }\">\n              <dt-icon-close\n                :size=\"iconSize\"\n              />\n            </template>\n          </dt-button>\n        </div>\n      </transition>\n    </dt-lazy-show>\n  </teleport>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { returnFirstEl, getUniqueString, hasSlotContent, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES, HTML_ELEMENT_TYPE } from '@/common/constants';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIconClose,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: [String, HTML_ELEMENT_TYPE],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n\n    /**\n     * A CSS selector string for the element to portal the modal to. If not provided, the modal will be rendered in its default location.\n     */\n    appendTo: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        mousedown: event => {\n          // Track whether the drag originated on the backdrop so that a drag\n          // starting inside the dialog and ending outside doesn't close the modal.\n          this._mousedownOnBackdrop = (event.target === event.currentTarget);\n        },\n\n        click: event => {\n          // Handle backdrop clicks for closing modal.\n          // Require mousedown to have also started on the backdrop — prevents\n          // text-selection drags that end outside from dismissing the modal.\n          if (this.closeOnClick && event.target === event.currentTarget && this._mousedownOnBackdrop) {\n            this.close();\n          }\n\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': async () => {\n          this.$emit('update:show', true);\n          await this.setFocusAfterTransition();\n        },\n\n        focusin: event => {\n          // Ensure focus stays within modal\n          const modalEl = this.$refs.modalRoot?.$el || this.$el;\n          if (this.show && modalEl && !modalEl.contains(event.target)) {\n            event.preventDefault();\n            this.focusFirstElement(modalEl);\n          }\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  watch: {\n    show: {\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n          const modalEl = this.$refs.modalRoot?.$el || this.$el;\n          disableRootScrolling(returnFirstEl(modalEl).getRootNode().host);\n          document.addEventListener('keydown', this._trapFocusGlobalBound);\n        } else {\n          const modalEl = this.$refs.modalRoot?.$el || this.$el;\n          enableRootScrolling(returnFirstEl(modalEl).getRootNode().host);\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n          document.removeEventListener('keydown', this._trapFocusGlobalBound);\n        }\n      },\n    },\n  },\n\n  created () {\n    this._trapFocusGlobalBound = (e) => this._trapFocusGlobal(e);\n    this._mousedownOnBackdrop = false;\n  },\n\n  mounted () {\n    if (this.show) {\n      document.addEventListener('keydown', this._trapFocusGlobalBound);\n    }\n  },\n\n  beforeUnmount () {\n    document.removeEventListener('keydown', this._trapFocusGlobalBound);\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    async setFocusAfterTransition () {\n      const modalEl = this.$refs.modalRoot?.$el || this.$el;\n      if (this.initialFocusElement === 'first') {\n        await this.focusFirstElement(modalEl);\n      } else if (this.initialFocusElement.startsWith('#')) {\n        await this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        const modalEl = this.$refs.modalRoot?.$el || this.$el;\n        this.focusTrappedTabPress(e, modalEl);\n      }\n    },\n\n    _trapFocusGlobal (e) {\n      if (!this.show || e.code !== EVENT_KEYNAMES.tab) return;\n      const modalEl = this.$refs.modalRoot?.$el || this.$el;\n      if (modalEl && !modalEl.contains(document.activeElement)) {\n        e.preventDefault();\n        this.focusFirstElement(modalEl);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"modal.js","names":[],"sources":["../../../components/Modal/Modal.vue"],"sourcesContent":["<template>\n  <teleport\n    :disabled=\"!appendTo && !autoTeleportTarget\"\n    :to=\"appendTo || autoTeleportTarget\"\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <dialog\n      ref=\"dialogEl\"\n      v-dt-focustrap=\"{ active: open, initialFocus: false, restoreFocus: false }\"\n      :class=\"[\n        'd-modal',\n        MODAL_KIND_MODIFIERS[kind],\n        MODAL_SIZE_MODIFIERS[size],\n        { 'd-modal--transparent-backdrop': transparentBackdrop },\n        modalClass,\n      ]\"\n      data-qa=\"dt-modal\"\n      :aria-describedby=\"describedById || undefined\"\n      :aria-labelledby=\"labelledById\"\n      v-bind=\"modeAttrs\"\n      @cancel.prevent=\"close\"\n      @click=\"onBackdropClick\"\n      @keydown=\"onKeydown\"\n    >\n      <div\n        v-if=\"open && (hasSlotContent($slots.banner) || bannerHeaderText)\"\n        data-qa=\"dt-modal-banner\"\n        :class=\"[\n          'd-modal__banner',\n          bannerClass,\n          bannerKindClass,\n        ]\"\n      >\n        <!-- @slot Slot for the banner, defaults to bannerHeaderText prop -->\n        <slot name=\"banner\">\n          {{ bannerHeaderText }}\n        </slot>\n      </div>\n      <transition\n        :appear=\"open\"\n        name=\"d-modal__dialog\"\n        @after-enter=\"onAfterEnter\"\n        @after-leave=\"onAfterLeave\"\n      >\n        <div\n          v-show=\"open\"\n          :class=\"[\n            'd-modal__dialog',\n            { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n            dialogClass,\n          ]\"\n        >\n          <div\n            v-if=\"hasSlotContent($slots.header)\"\n            :id=\"labelledById\"\n            :class=\"['d-modal__header', headerClass]\"\n            data-qa=\"dt-modal-title\"\n          >\n            <!-- @slot Slot for dialog header section, taking the place of any \"headerText\" text prop -->\n            <slot name=\"header\" />\n          </div>\n          <dt-text\n            v-else\n            :id=\"labelledById\"\n            kind=\"headline\"\n            :size=\"600\"\n            strength=\"medium\"\n            density=\"100\"\n            text-box-trim=\"start\"\n            as=\"h2\"\n            :class=\"['d-modal__header', headerClass]\"\n            data-qa=\"dt-modal-title\"\n          >\n            {{ headerText }}\n          </dt-text>\n          <div\n            v-if=\"hasSlotContent($slots.default)\"\n            :class=\"[\n              'd-modal__content',\n              contentClass,\n            ]\"\n            data-qa=\"dt-modal-copy\"\n          >\n            <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n            <slot />\n          </div>\n          <p\n            v-else\n            :class=\"[\n              'd-modal__content',\n              contentClass,\n            ]\"\n            data-qa=\"dt-modal-copy\"\n          >\n            {{ copy }}\n          </p>\n          <footer\n            v-if=\"hasFooterSlot\"\n            :class=\"['d-modal__footer', footerClass]\"\n          >\n            <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n            <slot name=\"footer\" />\n          </footer>\n          <sr-only-close-button\n            v-if=\"!showClose\"\n            @close=\"close\"\n          />\n          <dt-button\n            v-else\n            class=\"d-modal__close\"\n            data-qa=\"dt-modal-close-button\"\n            :size=\"300\"\n            kind=\"muted\"\n            importance=\"clear\"\n            :aria-label=\"closeButtonTitle\"\n            :title=\"closeButtonTitle\"\n            @click=\"close\"\n          >\n            <template #icon=\"{ iconSize }\">\n              <dt-icon-close\n                :size=\"iconSize\"\n              />\n            </template>\n          </dt-button>\n        </div>\n      </transition>\n    </dialog>\n  </teleport>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/Button';\nimport { DtText } from '@/components/Text';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport ModeMixin from '@/common/mixins/mode';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './ModalConstants';\nimport { getUniqueString, hasSlotContent, returnFirstEl, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { HTML_ELEMENT_TYPE } from '@/common/constants';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/Notice';\nimport { DialtoneLocalization } from '@/localization';\n\nconst focusableSelector = 'button:not(:disabled),[href],input:not(:disabled),select:not(:disabled),' +\n  'textarea:not(:disabled),details,[tabindex]:not([tabindex=\"-1\"]):not(:disabled):not([aria-disabled=\"true\"])';\n\n/**\n * Modals focus the user's attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  name: 'DtModal',\n\n  components: {\n    DtButton,\n    DtText,\n    DtIconClose,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [ModeMixin],\n\n  props: {\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    open: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Header text to display in the modal header.\n     */\n    headerText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Header text to display in the modal banner.\n     */\n    bannerHeaderText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The theme of the modal.\n     * @values default, critical\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, critical, info, positive, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validator (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the header element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    headerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the footer element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    footerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Shows the close button on the modal\n     * @values true, false\n     */\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: [String, HTML_ELEMENT_TYPE],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n\n    /**\n     * A CSS selector string for the element to portal the modal to. If not provided, the modal will be rendered in its default location.\n     */\n    appendTo: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * When true, the surrounding backdrop is rendered fully transparent\n     * instead of the default dimming overlay. The dialog box itself\n     * remains opaque. Useful when the underlying UI should remain visible.\n     * @values true, false\n     */\n    transparentBackdrop: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:open\n     * @type {Boolean}\n     */\n    'update:open',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n      autoTeleportTarget: null,\n    };\n  },\n\n  computed: {\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  watch: {\n    open (isShowing) {\n      this.syncDialogState(isShowing);\n    },\n  },\n\n  mounted () {\n    if (!this.appendTo) {\n      const root = this.$el?.getRootNode();\n      if (root instanceof ShadowRoot) {\n        this.autoTeleportTarget = root;\n        // Defer syncDialogState so the teleport renders inside the shadow root first.\n        if (this.open) this.$nextTick(() => { if (this.open) this.syncDialogState(true); });\n        return;\n      }\n    }\n    if (this.open) {\n      this.syncDialogState(true);\n    }\n  },\n\n  beforeUnmount () {\n    const dialogEl = this.$refs.dialogEl;\n    if (dialogEl?.open) {\n      dialogEl.close();\n      enableRootScrolling(this.getScrollRoot());\n    }\n    this.previousActiveElement = null;\n  },\n\n  methods: {\n    getScrollRoot () {\n      return returnFirstEl(this.$refs.dialogEl)?.getRootNode()?.host;\n    },\n\n    syncDialogState (isShowing) {\n      const dialogEl = this.$refs.dialogEl;\n      if (!dialogEl) return;\n\n      if (isShowing) {\n        this.previousActiveElement = document.activeElement;\n        if (!dialogEl.open) {\n          dialogEl.showModal();\n        }\n        disableRootScrolling(this.getScrollRoot());\n      } else if (dialogEl.open) {\n        // Leave transition plays via v-show on inner content.\n        // close() is called in onAfterLeave when transition completes.\n        enableRootScrolling(this.getScrollRoot());\n      }\n    },\n\n    close () {\n      this.$emit('update:open', false);\n    },\n\n    onBackdropClick (event) {\n      if (this.closeOnClick && event.target === event.currentTarget) {\n        this.close();\n      }\n      this.$emit('click', event);\n    },\n\n    onKeydown (event) {\n      this.$emit('keydown', event);\n    },\n\n    async onAfterEnter () {\n      this.$emit('update:open', true);\n      await this.setFocusAfterTransition();\n    },\n\n    onAfterLeave () {\n      const dialogEl = this.$refs.dialogEl;\n      if (dialogEl?.open) {\n        dialogEl.close();\n      }\n      this.previousActiveElement?.focus();\n      this.previousActiveElement = null;\n    },\n\n    focusFirstTabbable (container) {\n      const focusable = [...container.querySelectorAll(focusableSelector)];\n      if (!focusable.length) return;\n      let target = focusable[0];\n      // If first focusable is an unchecked radio, prefer the checked radio in the same group.\n      if (target.matches('[type=\"radio\"]:not(:checked)')) {\n        target = focusable.find(el => el.checked && el.name === target.name) || target;\n      }\n      target.focus({ preventScroll: true });\n    },\n\n    async setFocusAfterTransition () {\n      const dialogEl = this.$refs.dialogEl;\n      if (!dialogEl) return;\n\n      await this.$nextTick();\n\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstTabbable(dialogEl);\n      } else if (typeof this.initialFocusElement === 'string' && this.initialFocusElement.startsWith('#')) {\n        const el = dialogEl.querySelector(this.initialFocusElement);\n        if (el) {\n          el.focus();\n        } else {\n          // eslint-disable-next-line no-console\n          console.warn('Could not find the element specified in dt-modal prop \"initialFocusElement\". ' +\n            'Defaulting to focusing the first element.');\n          this.focusFirstTabbable(dialogEl);\n        }\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/mode-directive/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./mode.cjs`);exports.DtModeDirective=e.DtModeDirective;

package/dist/lib/mode-directive/index.js

@@ -0,0 +1,2 @@
+import { DtModeDirective as e } from "./mode.js";
+export { e as DtModeDirective };

package/dist/lib/mode-directive/mode.cjs

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../mode_constants-CzYJW9ua.cjs`),t=require(`../mode-island/utils.cjs`);var n=e.n,r={inverted:`invert`},i={name:`dt-mode-directive`,install(e){let i=new WeakMap;e.directive(`dt-mode`,{mounted(e,t){if(t.value===!1)return;let n=o(e,a(t.arg));i.set(e,n)},updated(e,t){let n=i.get(e),r=t.value!==t.oldValue,l=a(t.arg),u=l!==n?.arg;if(!r&&!u||(c(n),s(e),i.delete(e),t.value===!1))return;let d=o(e,l);i.set(e,d)},unmounted(e){c(i.get(e)),s(e),i.delete(e)}});function a(e){return e?n.includes(e)?e:r[e]?(console.warn(`[DtModeDirective] Invalid mode "${e}". Did you mean "${r[e]}"? Falling back to "${r[e]}".`),r[e]):(console.warn(`[DtModeDirective] Invalid mode "${e}". Valid modes: ${n.join(`, `)}. Falling back to "invert".`),`invert`):`invert`}function o(e,n){let r={arg:n,contrastObserver:null,materialObserver:null,modeObserver:null};if(e.setAttribute(`data-dt-contrast`,t.getRootContrast()),r.contrastObserver=new MutationObserver(()=>{e.setAttribute(`data-dt-contrast`,t.getRootContrast())}),r.contrastObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-dt-contrast`]}),e.setAttribute(`data-dt-material`,t.getRootMaterial()),r.materialObserver=new MutationObserver(()=>{e.setAttribute(`data-dt-material`,t.getRootMaterial())}),r.materialObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-dt-material`]}),n===`light`||n===`dark`)e.setAttribute(`data-dt-mode`,n);else{let n=t.findParentMode(e);e.setAttribute(`data-dt-mode`,t.getOppositeMode(n));let i={attributes:!0,attributeFilter:[`data-dt-mode`],subtree:!1};r.modeObserver=new MutationObserver(()=>{let n=t.findParentMode(e);e.setAttribute(`data-dt-mode`,t.getOppositeMode(n))}),r.modeObserver.observe(document.documentElement,i);let a=e.parentElement;for(;a&&a!==document.documentElement;)r.modeObserver.observe(a,i),a=a.parentElement}return r}function s(e){e.removeAttribute(`data-dt-mode`),e.removeAttribute(`data-dt-contrast`),e.removeAttribute(`data-dt-material`)}function c(e){e&&(e.contrastObserver&&(e.contrastObserver.disconnect(),e.contrastObserver=null),e.materialObserver&&(e.materialObserver.disconnect(),e.materialObserver=null),e.modeObserver&&(e.modeObserver.disconnect(),e.modeObserver=null))}}};exports.DtModeDirective=i,exports.default=i;
+//# sourceMappingURL=mode.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mode.cjs","names":["CONTENT_MODE_VALUES","getRootContrast","getRootMaterial","findParentMode","getOppositeMode"],"sources":["../../../directives/mode_directive/mode.js"],"sourcesContent":["import {\n  getOppositeMode,\n  getRootContrast,\n  getRootMaterial,\n  findParentMode,\n} from '@/components/ModeIsland/Utils';\nimport { CONTENT_MODE_VALUES } from '@/common/mode_constants';\n\nconst VALID_MODES = CONTENT_MODE_VALUES;\n\nconst SUGGESTIONS = {\n  inverted: 'invert',\n};\n\n/**\n * v-dt-mode directive — applies a color mode (light, dark, or invert) to an element.\n *\n * Sets `data-dt-mode`, `data-dt-contrast`, and `data-dt-material` attributes so\n * descendant token-based styles (`d-fc-primary`, `d-bgc-secondary`, etc.) resolve\n * to the correct palette under the active contrast and material.\n *\n * @example\n * // Explicit modes\n * <section v-dt-mode:dark>Dark content</section>\n * <section v-dt-mode:light>Light content</section>\n *\n * // Invert nearest parent mode (default when no arg)\n * <section v-dt-mode>Inverted content</section>\n * <section v-dt-mode:invert>Same as above</section>\n *\n * // Dynamic arg\n * <section v-dt-mode:[reactiveMode]>Reactive mode</section>\n *\n * // Disable with false value\n * <section v-dt-mode:dark=\"false\">No mode applied</section>\n */\nexport const DtModeDirective = {\n  name: 'dt-mode-directive',\n  install (app) {\n    const instances = new WeakMap();\n\n    app.directive('dt-mode', {\n      mounted (el, binding) {\n        if (binding.value === false) return;\n        const mode = resolveArg(binding.arg);\n        const state = applyMode(el, mode);\n        instances.set(el, state);\n      },\n\n      updated (el, binding) {\n        const prev = instances.get(el);\n        const valueChanged = binding.value !== binding.oldValue;\n        const resolvedArg = resolveArg(binding.arg);\n        const argChanged = resolvedArg !== prev?.arg;\n        if (!valueChanged && !argChanged) return;\n\n        cleanup(prev);\n        removeAttributes(el);\n        instances.delete(el);\n\n        if (binding.value === false) return;\n\n        const state = applyMode(el, resolvedArg);\n        instances.set(el, state);\n      },\n\n      unmounted (el) {\n        cleanup(instances.get(el));\n        removeAttributes(el);\n        instances.delete(el);\n      },\n    });\n\n    function resolveArg (arg) {\n      if (!arg) return 'invert';\n      if (VALID_MODES.includes(arg)) return arg;\n      if (SUGGESTIONS[arg]) {\n        console.warn(\n          `[DtModeDirective] Invalid mode \"${arg}\". Did you mean \"${SUGGESTIONS[arg]}\"? Falling back to \"${SUGGESTIONS[arg]}\".`,\n        );\n        return SUGGESTIONS[arg];\n      }\n      console.warn(\n        `[DtModeDirective] Invalid mode \"${arg}\". Valid modes: ${VALID_MODES.join(', ')}. Falling back to \"invert\".`,\n      );\n      return 'invert';\n    }\n\n    function applyMode (el, mode) {\n      const state = {\n        arg: mode,\n        contrastObserver: null,\n        materialObserver: null,\n        modeObserver: null,\n      };\n\n      // Set contrast from root\n      el.setAttribute('data-dt-contrast', getRootContrast());\n\n      // Watch for contrast changes on root\n      state.contrastObserver = new MutationObserver(() => {\n        el.setAttribute('data-dt-contrast', getRootContrast());\n      });\n      state.contrastObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-contrast'],\n      });\n\n      // Set material from root\n      el.setAttribute('data-dt-material', getRootMaterial());\n\n      // Watch for material changes on root\n      state.materialObserver = new MutationObserver(() => {\n        el.setAttribute('data-dt-material', getRootMaterial());\n      });\n      state.materialObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-material'],\n      });\n\n      if (mode === 'light' || mode === 'dark') {\n        el.setAttribute('data-dt-mode', mode);\n      } else {\n        // invert mode\n        const parentMode = findParentMode(el);\n        el.setAttribute('data-dt-mode', getOppositeMode(parentMode));\n\n        // Watch for mode changes on root and ancestors\n        const config = {\n          attributes: true,\n          attributeFilter: ['data-dt-mode'],\n          subtree: false,\n        };\n\n        state.modeObserver = new MutationObserver(() => {\n          const currentParentMode = findParentMode(el);\n          el.setAttribute('data-dt-mode', getOppositeMode(currentParentMode));\n        });\n\n        // Observe root element\n        state.modeObserver.observe(document.documentElement, config);\n\n        // Observe all ancestor elements for data-dt-mode changes.\n        // This includes ancestors that don't yet have the attribute,\n        // because a sibling directive may set it after this one mounts\n        // (Vue 3 fires child mounted before parent mounted).\n        let parent = el.parentElement;\n        while (parent && parent !== document.documentElement) {\n          state.modeObserver.observe(parent, config);\n          parent = parent.parentElement;\n        }\n      }\n\n      return state;\n    }\n\n    function removeAttributes (el) {\n      el.removeAttribute('data-dt-mode');\n      el.removeAttribute('data-dt-contrast');\n      el.removeAttribute('data-dt-material');\n    }\n\n    function cleanup (state) {\n      if (!state) return;\n      if (state.contrastObserver) {\n        state.contrastObserver.disconnect();\n        state.contrastObserver = null;\n      }\n      if (state.materialObserver) {\n        state.materialObserver.disconnect();\n        state.materialObserver = null;\n      }\n      if (state.modeObserver) {\n        state.modeObserver.disconnect();\n        state.modeObserver = null;\n      }\n    }\n  },\n};\n\nexport default DtModeDirective;\n"],"mappings":"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"}

package/dist/lib/mode-directive/mode.js

@@ -0,0 +1,73 @@
+import { n as e } from "../../mode_constants-tb7TL85q.js";
+import { findParentMode as t, getOppositeMode as n, getRootContrast as r, getRootMaterial as i } from "../mode-island/utils.js";
+//#region directives/mode_directive/mode.js
+var a = e, o = { inverted: "invert" }, s = {
+	name: "dt-mode-directive",
+	install(e) {
+		let s = /* @__PURE__ */ new WeakMap();
+		e.directive("dt-mode", {
+			mounted(e, t) {
+				if (t.value === !1) return;
+				let n = l(e, c(t.arg));
+				s.set(e, n);
+			},
+			updated(e, t) {
+				let n = s.get(e), r = t.value !== t.oldValue, i = c(t.arg), a = i !== n?.arg;
+				if (!r && !a || (d(n), u(e), s.delete(e), t.value === !1)) return;
+				let o = l(e, i);
+				s.set(e, o);
+			},
+			unmounted(e) {
+				d(s.get(e)), u(e), s.delete(e);
+			}
+		});
+		function c(e) {
+			return e ? a.includes(e) ? e : o[e] ? (console.warn(`[DtModeDirective] Invalid mode "${e}". Did you mean "${o[e]}"? Falling back to "${o[e]}".`), o[e]) : (console.warn(`[DtModeDirective] Invalid mode "${e}". Valid modes: ${a.join(", ")}. Falling back to "invert".`), "invert") : "invert";
+		}
+		function l(e, a) {
+			let o = {
+				arg: a,
+				contrastObserver: null,
+				materialObserver: null,
+				modeObserver: null
+			};
+			if (e.setAttribute("data-dt-contrast", r()), o.contrastObserver = new MutationObserver(() => {
+				e.setAttribute("data-dt-contrast", r());
+			}), o.contrastObserver.observe(document.documentElement, {
+				attributes: !0,
+				attributeFilter: ["data-dt-contrast"]
+			}), e.setAttribute("data-dt-material", i()), o.materialObserver = new MutationObserver(() => {
+				e.setAttribute("data-dt-material", i());
+			}), o.materialObserver.observe(document.documentElement, {
+				attributes: !0,
+				attributeFilter: ["data-dt-material"]
+			}), a === "light" || a === "dark") e.setAttribute("data-dt-mode", a);
+			else {
+				let r = t(e);
+				e.setAttribute("data-dt-mode", n(r));
+				let i = {
+					attributes: !0,
+					attributeFilter: ["data-dt-mode"],
+					subtree: !1
+				};
+				o.modeObserver = new MutationObserver(() => {
+					let r = t(e);
+					e.setAttribute("data-dt-mode", n(r));
+				}), o.modeObserver.observe(document.documentElement, i);
+				let a = e.parentElement;
+				for (; a && a !== document.documentElement;) o.modeObserver.observe(a, i), a = a.parentElement;
+			}
+			return o;
+		}
+		function u(e) {
+			e.removeAttribute("data-dt-mode"), e.removeAttribute("data-dt-contrast"), e.removeAttribute("data-dt-material");
+		}
+		function d(e) {
+			e && (e.contrastObserver && (e.contrastObserver.disconnect(), e.contrastObserver = null), e.materialObserver && (e.materialObserver.disconnect(), e.materialObserver = null), e.modeObserver && (e.modeObserver.disconnect(), e.modeObserver = null));
+		}
+	}
+};
+//#endregion
+export { s as DtModeDirective, s as default };
+
+//# sourceMappingURL=mode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mode.js","names":[],"sources":["../../../directives/mode_directive/mode.js"],"sourcesContent":["import {\n  getOppositeMode,\n  getRootContrast,\n  getRootMaterial,\n  findParentMode,\n} from '@/components/ModeIsland/Utils';\nimport { CONTENT_MODE_VALUES } from '@/common/mode_constants';\n\nconst VALID_MODES = CONTENT_MODE_VALUES;\n\nconst SUGGESTIONS = {\n  inverted: 'invert',\n};\n\n/**\n * v-dt-mode directive — applies a color mode (light, dark, or invert) to an element.\n *\n * Sets `data-dt-mode`, `data-dt-contrast`, and `data-dt-material` attributes so\n * descendant token-based styles (`d-fc-primary`, `d-bgc-secondary`, etc.) resolve\n * to the correct palette under the active contrast and material.\n *\n * @example\n * // Explicit modes\n * <section v-dt-mode:dark>Dark content</section>\n * <section v-dt-mode:light>Light content</section>\n *\n * // Invert nearest parent mode (default when no arg)\n * <section v-dt-mode>Inverted content</section>\n * <section v-dt-mode:invert>Same as above</section>\n *\n * // Dynamic arg\n * <section v-dt-mode:[reactiveMode]>Reactive mode</section>\n *\n * // Disable with false value\n * <section v-dt-mode:dark=\"false\">No mode applied</section>\n */\nexport const DtModeDirective = {\n  name: 'dt-mode-directive',\n  install (app) {\n    const instances = new WeakMap();\n\n    app.directive('dt-mode', {\n      mounted (el, binding) {\n        if (binding.value === false) return;\n        const mode = resolveArg(binding.arg);\n        const state = applyMode(el, mode);\n        instances.set(el, state);\n      },\n\n      updated (el, binding) {\n        const prev = instances.get(el);\n        const valueChanged = binding.value !== binding.oldValue;\n        const resolvedArg = resolveArg(binding.arg);\n        const argChanged = resolvedArg !== prev?.arg;\n        if (!valueChanged && !argChanged) return;\n\n        cleanup(prev);\n        removeAttributes(el);\n        instances.delete(el);\n\n        if (binding.value === false) return;\n\n        const state = applyMode(el, resolvedArg);\n        instances.set(el, state);\n      },\n\n      unmounted (el) {\n        cleanup(instances.get(el));\n        removeAttributes(el);\n        instances.delete(el);\n      },\n    });\n\n    function resolveArg (arg) {\n      if (!arg) return 'invert';\n      if (VALID_MODES.includes(arg)) return arg;\n      if (SUGGESTIONS[arg]) {\n        console.warn(\n          `[DtModeDirective] Invalid mode \"${arg}\". Did you mean \"${SUGGESTIONS[arg]}\"? Falling back to \"${SUGGESTIONS[arg]}\".`,\n        );\n        return SUGGESTIONS[arg];\n      }\n      console.warn(\n        `[DtModeDirective] Invalid mode \"${arg}\". Valid modes: ${VALID_MODES.join(', ')}. Falling back to \"invert\".`,\n      );\n      return 'invert';\n    }\n\n    function applyMode (el, mode) {\n      const state = {\n        arg: mode,\n        contrastObserver: null,\n        materialObserver: null,\n        modeObserver: null,\n      };\n\n      // Set contrast from root\n      el.setAttribute('data-dt-contrast', getRootContrast());\n\n      // Watch for contrast changes on root\n      state.contrastObserver = new MutationObserver(() => {\n        el.setAttribute('data-dt-contrast', getRootContrast());\n      });\n      state.contrastObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-contrast'],\n      });\n\n      // Set material from root\n      el.setAttribute('data-dt-material', getRootMaterial());\n\n      // Watch for material changes on root\n      state.materialObserver = new MutationObserver(() => {\n        el.setAttribute('data-dt-material', getRootMaterial());\n      });\n      state.materialObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['data-dt-material'],\n      });\n\n      if (mode === 'light' || mode === 'dark') {\n        el.setAttribute('data-dt-mode', mode);\n      } else {\n        // invert mode\n        const parentMode = findParentMode(el);\n        el.setAttribute('data-dt-mode', getOppositeMode(parentMode));\n\n        // Watch for mode changes on root and ancestors\n        const config = {\n          attributes: true,\n          attributeFilter: ['data-dt-mode'],\n          subtree: false,\n        };\n\n        state.modeObserver = new MutationObserver(() => {\n          const currentParentMode = findParentMode(el);\n          el.setAttribute('data-dt-mode', getOppositeMode(currentParentMode));\n        });\n\n        // Observe root element\n        state.modeObserver.observe(document.documentElement, config);\n\n        // Observe all ancestor elements for data-dt-mode changes.\n        // This includes ancestors that don't yet have the attribute,\n        // because a sibling directive may set it after this one mounts\n        // (Vue 3 fires child mounted before parent mounted).\n        let parent = el.parentElement;\n        while (parent && parent !== document.documentElement) {\n          state.modeObserver.observe(parent, config);\n          parent = parent.parentElement;\n        }\n      }\n\n      return state;\n    }\n\n    function removeAttributes (el) {\n      el.removeAttribute('data-dt-mode');\n      el.removeAttribute('data-dt-contrast');\n      el.removeAttribute('data-dt-material');\n    }\n\n    function cleanup (state) {\n      if (!state) return;\n      if (state.contrastObserver) {\n        state.contrastObserver.disconnect();\n        state.contrastObserver = null;\n      }\n      if (state.materialObserver) {\n        state.materialObserver.disconnect();\n        state.materialObserver = null;\n      }\n      if (state.modeObserver) {\n        state.modeObserver.disconnect();\n        state.modeObserver = null;\n      }\n    }\n  },\n};\n\nexport default DtModeDirective;\n"],"mappings":"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"}

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./mode-island-constants.cjs`),t=require(`./mode-island.cjs`);exports.DT_MODE_ISLAND_TYPES=e.DT_MODE_ISLAND_TYPES,exports.DtModeIsland=t.default;

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

@@ -0,0 +1,3 @@
+import { DT_MODE_ISLAND_TYPES as e } from "./mode-island-constants.js";
+import t from "./mode-island.js";
+export { e as DT_MODE_ISLAND_TYPES, t as DtModeIsland };

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

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={INVERTED:`inverted`,LIGHT:`light`,DARK:`dark`},t={DT_MODE_ISLAND_TYPES:e};exports.DT_MODE_ISLAND_TYPES=e,exports.default=t;
+//# sourceMappingURL=mode-island-constants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mode-island-constants.cjs","names":[],"sources":["../../../components/ModeIsland/ModeIslandConstants.js"],"sourcesContent":["export const DT_MODE_ISLAND_TYPES = {\n  INVERTED: 'inverted',\n  LIGHT: 'light',\n  DARK: 'dark',\n};\n\nexport default {\n  DT_MODE_ISLAND_TYPES,\n};"],"mappings":"+FAAA,IAAa,EAAuB,CAClC,SAAU,WACV,MAAO,QACP,KAAM,OACP,CAED,EAAe,CACb,uBACD"}

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

@@ -0,0 +1,10 @@
+//#region components/ModeIsland/ModeIslandConstants.js
+var e = {
+	INVERTED: "inverted",
+	LIGHT: "light",
+	DARK: "dark"
+}, t = { DT_MODE_ISLAND_TYPES: e };
+//#endregion
+export { e as DT_MODE_ISLAND_TYPES, t as default };
+
+//# sourceMappingURL=mode-island-constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mode-island-constants.js","names":[],"sources":["../../../components/ModeIsland/ModeIslandConstants.js"],"sourcesContent":["export const DT_MODE_ISLAND_TYPES = {\n  INVERTED: 'inverted',\n  LIGHT: 'light',\n  DARK: 'dark',\n};\n\nexport default {\n  DT_MODE_ISLAND_TYPES,\n};"],"mappings":";AAAA,IAAa,IAAuB;CAClC,UAAU;CACV,OAAO;CACP,MAAM;CACP,EAED,IAAe,EACb,yBACD"}

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

@@ -0,0 +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(`./utils.cjs`),n=require(`./mode-island-constants.cjs`),r=require(`./validators.cjs`);let i=require(`vue`);var a={name:`DtModeIsland`,provide(){return{dtModeIslandMode:()=>this.computedMode}},inject:{parentModeIslandMode:{from:`dtModeIslandMode`,default:null}},props:{as:{type:String,default:`div`},mode:{type:String,default:n.DT_MODE_ISLAND_TYPES.INVERTED,validator:r.modeValidator}},data(){return{currentContrast:t.getRootContrast(),currentMaterial:t.getRootMaterial(),contrastObserver:null,materialObserver:null,modeObserver:null,elementRef:null,calculatedMode:null}},computed:{isInverted(){return this.mode===n.DT_MODE_ISLAND_TYPES.INVERTED},invertedAttribute(){return this.isInverted?``:null},computedMode(){return this.mode===n.DT_MODE_ISLAND_TYPES.LIGHT||this.mode===n.DT_MODE_ISLAND_TYPES.DARK?this.mode:this.mode===n.DT_MODE_ISLAND_TYPES.INVERTED&&this.calculatedMode?this.calculatedMode:this.calculateInvertedMode()}},beforeCreate(){if(this.$attrs&&this.$attrs[`data-dt-brand`])throw Error(`[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.`)},mounted(){this.elementRef=this.$el,this.setupContrastObserver(),this.setupMaterialObserver(),this.isInverted&&(this.calculatedMode=this.calculateInvertedMode(),this.setupModeObserver()),this.currentContrast=t.getRootContrast(),this.currentMaterial=t.getRootMaterial()},beforeUnmount(){this.contrastObserver&&(this.contrastObserver.disconnect(),this.contrastObserver=null),this.materialObserver&&(this.materialObserver.disconnect(),this.materialObserver=null),this.modeObserver&&(this.modeObserver.disconnect(),this.modeObserver=null)},methods:{calculateInvertedMode(){return this.parentModeIslandMode?t.getOppositeMode(typeof this.parentModeIslandMode==`function`?this.parentModeIslandMode():this.parentModeIslandMode):this.elementRef?t.getOppositeMode(t.findParentMode(this.elementRef)):t.getOppositeMode(t.getRootMode())},setupContrastObserver(){this.contrastObserver=new MutationObserver(e=>{for(let n of e)n.type===`attributes`&&n.attributeName===`data-dt-contrast`&&(this.currentContrast=t.getRootContrast())}),this.contrastObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-dt-contrast`]})},setupMaterialObserver(){this.materialObserver=new MutationObserver(e=>{for(let n of e)n.type===`attributes`&&n.attributeName===`data-dt-material`&&(this.currentMaterial=t.getRootMaterial())}),this.materialObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-dt-material`]})},setupModeObserver(){let e={attributes:!0,attributeFilter:[`data-dt-mode`],subtree:!1};this.modeObserver=new MutationObserver(e=>{for(let t of e)t.type===`attributes`&&t.attributeName===`data-dt-mode`&&(this.calculatedMode=this.calculateInvertedMode())}),this.modeObserver.observe(document.documentElement,e);let t=this.elementRef?.parentElement;for(;t;)t.hasAttribute(`data-dt-mode`)&&this.modeObserver.observe(t,e),t=t.parentElement}}};function o(e,t,n,r,a,o){return(0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(n.as),{class:`d-mode-island`,"data-dt-mode":o.computedMode,"data-mode-island-inverted":o.invertedAttribute,"data-dt-contrast":a.currentContrast,"data-dt-material":a.currentMaterial},{default:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`default`)]),_:3},8,[`data-dt-mode`,`data-mode-island-inverted`,`data-dt-contrast`,`data-dt-material`])}var s=e.t(a,[[`render`,o]]);exports.default=s;
+//# sourceMappingURL=mode-island.cjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,113 @@
+import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { findParentMode as t, getOppositeMode as n, getRootContrast as r, getRootMaterial as i, getRootMode as a } from "./utils.js";
+import { DT_MODE_ISLAND_TYPES as o } from "./mode-island-constants.js";
+import { modeValidator as s } from "./validators.js";
+import { createBlock as c, openBlock as l, renderSlot as u, resolveDynamicComponent as d, withCtx as f } from "vue";
+//#region components/ModeIsland/ModeIsland.vue
+var p = {
+	name: "DtModeIsland",
+	provide() {
+		return { dtModeIslandMode: () => this.computedMode };
+	},
+	inject: { parentModeIslandMode: {
+		from: "dtModeIslandMode",
+		default: null
+	} },
+	props: {
+		as: {
+			type: String,
+			default: "div"
+		},
+		mode: {
+			type: String,
+			default: o.INVERTED,
+			validator: s
+		}
+	},
+	data() {
+		return {
+			currentContrast: r(),
+			currentMaterial: i(),
+			contrastObserver: null,
+			materialObserver: null,
+			modeObserver: null,
+			elementRef: null,
+			calculatedMode: null
+		};
+	},
+	computed: {
+		isInverted() {
+			return this.mode === o.INVERTED;
+		},
+		invertedAttribute() {
+			return this.isInverted ? "" : null;
+		},
+		computedMode() {
+			return this.mode === o.LIGHT || this.mode === o.DARK ? this.mode : this.mode === o.INVERTED && this.calculatedMode ? this.calculatedMode : this.calculateInvertedMode();
+		}
+	},
+	beforeCreate() {
+		if (this.$attrs && this.$attrs["data-dt-brand"]) throw Error("[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.");
+	},
+	mounted() {
+		this.elementRef = this.$el, this.setupContrastObserver(), this.setupMaterialObserver(), this.isInverted && (this.calculatedMode = this.calculateInvertedMode(), this.setupModeObserver()), this.currentContrast = r(), this.currentMaterial = i();
+	},
+	beforeUnmount() {
+		this.contrastObserver && (this.contrastObserver.disconnect(), this.contrastObserver = null), this.materialObserver && (this.materialObserver.disconnect(), this.materialObserver = null), this.modeObserver && (this.modeObserver.disconnect(), this.modeObserver = null);
+	},
+	methods: {
+		calculateInvertedMode() {
+			return this.parentModeIslandMode ? n(typeof this.parentModeIslandMode == "function" ? this.parentModeIslandMode() : this.parentModeIslandMode) : this.elementRef ? n(t(this.elementRef)) : n(a());
+		},
+		setupContrastObserver() {
+			this.contrastObserver = new MutationObserver((e) => {
+				for (let t of e) t.type === "attributes" && t.attributeName === "data-dt-contrast" && (this.currentContrast = r());
+			}), this.contrastObserver.observe(document.documentElement, {
+				attributes: !0,
+				attributeFilter: ["data-dt-contrast"]
+			});
+		},
+		setupMaterialObserver() {
+			this.materialObserver = new MutationObserver((e) => {
+				for (let t of e) t.type === "attributes" && t.attributeName === "data-dt-material" && (this.currentMaterial = i());
+			}), this.materialObserver.observe(document.documentElement, {
+				attributes: !0,
+				attributeFilter: ["data-dt-material"]
+			});
+		},
+		setupModeObserver() {
+			let e = {
+				attributes: !0,
+				attributeFilter: ["data-dt-mode"],
+				subtree: !1
+			};
+			this.modeObserver = new MutationObserver((e) => {
+				for (let t of e) t.type === "attributes" && t.attributeName === "data-dt-mode" && (this.calculatedMode = this.calculateInvertedMode());
+			}), this.modeObserver.observe(document.documentElement, e);
+			let t = this.elementRef?.parentElement;
+			for (; t;) t.hasAttribute("data-dt-mode") && this.modeObserver.observe(t, e), t = t.parentElement;
+		}
+	}
+};
+function m(e, t, n, r, i, a) {
+	return l(), c(d(n.as), {
+		class: "d-mode-island",
+		"data-dt-mode": a.computedMode,
+		"data-mode-island-inverted": a.invertedAttribute,
+		"data-dt-contrast": i.currentContrast,
+		"data-dt-material": i.currentMaterial
+	}, {
+		default: f(() => [u(e.$slots, "default")]),
+		_: 3
+	}, 8, [
+		"data-dt-mode",
+		"data-mode-island-inverted",
+		"data-dt-contrast",
+		"data-dt-material"
+	]);
+}
+var h = /* @__PURE__ */ e(p, [["render", m]]);
+//#endregion
+export { h as default };
+
+//# sourceMappingURL=mode-island.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});function e(e){return e===`light`?`dark`:`light`}function t(){return typeof document>`u`?`light`:document.documentElement.getAttribute(`data-dt-mode`)||`light`}function n(){return typeof document>`u`?`default`:document.documentElement.getAttribute(`data-dt-contrast`)||`default`}function r(){return typeof document>`u`?`sandstone`:document.documentElement.getAttribute(`data-dt-material`)||`sandstone`}function i(e){let n=e?.parentElement;for(;n&&n!==document.documentElement;){if(n.hasAttribute(`data-dt-mode`))return n.getAttribute(`data-dt-mode`);n=n.parentElement}return t()}var a={getOppositeMode:e,getRootMode:t,getRootContrast:n,getRootMaterial:r,findParentMode:i};exports.default=a,exports.findParentMode=i,exports.getOppositeMode=e,exports.getRootContrast=n,exports.getRootMaterial=r,exports.getRootMode=t;
+//# sourceMappingURL=utils.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","names":[],"sources":["../../../components/ModeIsland/Utils.js"],"sourcesContent":["/**\n * Get the opposite mode (light <-> dark)\n * @param {string} currentMode - The current mode\n * @returns {string} The opposite mode\n */\nexport function getOppositeMode (currentMode) {\n  return currentMode === 'light' ? 'dark' : 'light';\n}\n\n/**\n * Get the mode from the root HTML element.\n * Returns the default during SSR, where no DOM exists.\n * @returns {string} The root mode or 'light' as default\n */\nexport function getRootMode () {\n  if (typeof document === 'undefined') return 'light';\n  const rootMode = document.documentElement.getAttribute('data-dt-mode');\n  return rootMode || 'light';\n}\n\n/**\n * Get the contrast from the root HTML element.\n * Returns the default during SSR, where no DOM exists.\n * @returns {string} The root contrast or 'default' as default\n */\nexport function getRootContrast () {\n  if (typeof document === 'undefined') return 'default';\n  const rootContrast = document.documentElement.getAttribute('data-dt-contrast');\n  return rootContrast || 'default';\n}\n\n/**\n * Get the material from the root HTML element.\n * Returns the default during SSR, where no DOM exists.\n * @returns {string} The root material or 'sandstone' as default\n */\nexport function getRootMaterial () {\n  if (typeof document === 'undefined') return 'sandstone';\n  const rootMaterial = document.documentElement.getAttribute('data-dt-material');\n  return rootMaterial || 'sandstone';\n}\n\n/**\n * Find the mode from the nearest parent element with data-dt-mode attribute\n * @param {HTMLElement} el - The starting element\n * @returns {string} The parent mode or root mode\n */\nexport function findParentMode (el) {\n  let parent = el?.parentElement;\n  while (parent && parent !== document.documentElement) {\n    if (parent.hasAttribute('data-dt-mode')) {\n      return parent.getAttribute('data-dt-mode');\n    }\n    parent = parent.parentElement;\n  }\n  return getRootMode();\n}\n\nexport default {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\n  getRootMaterial,\n  findParentMode,\n};\n"],"mappings":"+FAKA,SAAgB,EAAiB,EAAa,CAC5C,OAAO,IAAgB,QAAU,OAAS,QAQ5C,SAAgB,GAAe,CAG7B,OAFI,OAAO,SAAa,IAAoB,QAC3B,SAAS,gBAAgB,aAAa,eAAe,EACnD,QAQrB,SAAgB,GAAmB,CAGjC,OAFI,OAAO,SAAa,IAAoB,UACvB,SAAS,gBAAgB,aAAa,mBAAmB,EACvD,UAQzB,SAAgB,GAAmB,CAGjC,OAFI,OAAO,SAAa,IAAoB,YACvB,SAAS,gBAAgB,aAAa,mBAAmB,EACvD,YAQzB,SAAgB,EAAgB,EAAI,CAClC,IAAI,EAAS,GAAI,cACjB,KAAO,GAAU,IAAW,SAAS,iBAAiB,CACpD,GAAI,EAAO,aAAa,eAAe,CACrC,OAAO,EAAO,aAAa,eAAe,CAE5C,EAAS,EAAO,cAElB,OAAO,GAAa,CAGtB,IAAA,EAAe,CACb,kBACA,cACA,kBACA,kBACA,iBACD"}

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

@@ -0,0 +1,32 @@
+//#region components/ModeIsland/Utils.js
+function e(e) {
+	return e === "light" ? "dark" : "light";
+}
+function t() {
+	return typeof document > "u" ? "light" : document.documentElement.getAttribute("data-dt-mode") || "light";
+}
+function n() {
+	return typeof document > "u" ? "default" : document.documentElement.getAttribute("data-dt-contrast") || "default";
+}
+function r() {
+	return typeof document > "u" ? "sandstone" : document.documentElement.getAttribute("data-dt-material") || "sandstone";
+}
+function i(e) {
+	let n = e?.parentElement;
+	for (; n && n !== document.documentElement;) {
+		if (n.hasAttribute("data-dt-mode")) return n.getAttribute("data-dt-mode");
+		n = n.parentElement;
+	}
+	return t();
+}
+var a = {
+	getOppositeMode: e,
+	getRootMode: t,
+	getRootContrast: n,
+	getRootMaterial: r,
+	findParentMode: i
+};
+//#endregion
+export { a as default, i as findParentMode, e as getOppositeMode, n as getRootContrast, r as getRootMaterial, t as getRootMode };
+
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../../components/ModeIsland/Utils.js"],"sourcesContent":["/**\n * Get the opposite mode (light <-> dark)\n * @param {string} currentMode - The current mode\n * @returns {string} The opposite mode\n */\nexport function getOppositeMode (currentMode) {\n  return currentMode === 'light' ? 'dark' : 'light';\n}\n\n/**\n * Get the mode from the root HTML element.\n * Returns the default during SSR, where no DOM exists.\n * @returns {string} The root mode or 'light' as default\n */\nexport function getRootMode () {\n  if (typeof document === 'undefined') return 'light';\n  const rootMode = document.documentElement.getAttribute('data-dt-mode');\n  return rootMode || 'light';\n}\n\n/**\n * Get the contrast from the root HTML element.\n * Returns the default during SSR, where no DOM exists.\n * @returns {string} The root contrast or 'default' as default\n */\nexport function getRootContrast () {\n  if (typeof document === 'undefined') return 'default';\n  const rootContrast = document.documentElement.getAttribute('data-dt-contrast');\n  return rootContrast || 'default';\n}\n\n/**\n * Get the material from the root HTML element.\n * Returns the default during SSR, where no DOM exists.\n * @returns {string} The root material or 'sandstone' as default\n */\nexport function getRootMaterial () {\n  if (typeof document === 'undefined') return 'sandstone';\n  const rootMaterial = document.documentElement.getAttribute('data-dt-material');\n  return rootMaterial || 'sandstone';\n}\n\n/**\n * Find the mode from the nearest parent element with data-dt-mode attribute\n * @param {HTMLElement} el - The starting element\n * @returns {string} The parent mode or root mode\n */\nexport function findParentMode (el) {\n  let parent = el?.parentElement;\n  while (parent && parent !== document.documentElement) {\n    if (parent.hasAttribute('data-dt-mode')) {\n      return parent.getAttribute('data-dt-mode');\n    }\n    parent = parent.parentElement;\n  }\n  return getRootMode();\n}\n\nexport default {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\n  getRootMaterial,\n  findParentMode,\n};\n"],"mappings":";AAKA,SAAgB,EAAiB,GAAa;AAC5C,QAAO,MAAgB,UAAU,SAAS;;AAQ5C,SAAgB,IAAe;AAG7B,QAFI,OAAO,WAAa,MAAoB,UAC3B,SAAS,gBAAgB,aAAa,eAAe,IACnD;;AAQrB,SAAgB,IAAmB;AAGjC,QAFI,OAAO,WAAa,MAAoB,YACvB,SAAS,gBAAgB,aAAa,mBAAmB,IACvD;;AAQzB,SAAgB,IAAmB;AAGjC,QAFI,OAAO,WAAa,MAAoB,cACvB,SAAS,gBAAgB,aAAa,mBAAmB,IACvD;;AAQzB,SAAgB,EAAgB,GAAI;CAClC,IAAI,IAAS,GAAI;AACjB,QAAO,KAAU,MAAW,SAAS,kBAAiB;AACpD,MAAI,EAAO,aAAa,eAAe,CACrC,QAAO,EAAO,aAAa,eAAe;AAE5C,MAAS,EAAO;;AAElB,QAAO,GAAa;;AAGtB,IAAA,IAAe;CACb;CACA;CACA;CACA;CACA;CACD"}

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

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`./mode-island-constants.cjs`);function t(t){return Object.values(e.DT_MODE_ISLAND_TYPES).includes(t)}var n={modeValidator:t};exports.default=n,exports.modeValidator=t;
+//# sourceMappingURL=validators.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"validators.cjs","names":["DT_MODE_ISLAND_TYPES"],"sources":["../../../components/ModeIsland/Validators.js"],"sourcesContent":["import { DT_MODE_ISLAND_TYPES } from './ModeIslandConstants';\n\nexport function modeValidator (mode) {\n  return Object.values(DT_MODE_ISLAND_TYPES).includes(mode);\n}\n\nexport default {\n  modeValidator,\n};"],"mappings":"8IAEA,SAAgB,EAAe,EAAM,CACnC,OAAO,OAAO,OAAOA,EAAAA,qBAAqB,CAAC,SAAS,EAAK,CAG3D,IAAA,EAAe,CACb,gBACD"}

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

@@ -0,0 +1,10 @@
+import { DT_MODE_ISLAND_TYPES as e } from "./mode-island-constants.js";
+//#region components/ModeIsland/Validators.js
+function t(t) {
+	return Object.values(e).includes(t);
+}
+var n = { modeValidator: t };
+//#endregion
+export { n as default, t as modeValidator };
+
+//# sourceMappingURL=validators.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"validators.js","names":[],"sources":["../../../components/ModeIsland/Validators.js"],"sourcesContent":["import { DT_MODE_ISLAND_TYPES } from './ModeIslandConstants';\n\nexport function modeValidator (mode) {\n  return Object.values(DT_MODE_ISLAND_TYPES).includes(mode);\n}\n\nexport default {\n  modeValidator,\n};"],"mappings":";;AAEA,SAAgB,EAAe,GAAM;AACnC,QAAO,OAAO,OAAO,EAAqB,CAAC,SAAS,EAAK;;AAG3D,IAAA,IAAe,EACb,kBACD"}

package/dist/lib/motion-text/motion-text-constants.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=[`gradient-in`,`fade-in`,`slide-in`,`gradient-sweep`,`shimmer`,`none`],t=[`sm`,`md`,`lg`],n={sm:{characterDelay:20,wordDelay:30,duration:600},md:{characterDelay:30,wordDelay:50,duration:1e3},lg:{characterDelay:50,wordDelay:100,duration:1500}},r={MOTION_TEXT_ANIMATION_MODES:e,MOTION_TEXT_SPEEDS:t,MOTION_TEXT_TIMING_PRESETS:n};exports.MOTION_TEXT_ANIMATION_MODES=e,exports.MOTION_TEXT_SPEEDS=t,exports.MOTION_TEXT_TIMING_PRESETS=n,exports.default=r;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=[`gradient-in`,`fade-in`,`slide-in`,`gradient-sweep`,`shimmer`,`none`],t=[`100`,`200`,`300`,`400`,`500`],n={100:{characterDelay:10,wordDelay:15,duration:300},200:{characterDelay:20,wordDelay:30,duration:600},300:{characterDelay:30,wordDelay:50,duration:1e3},400:{characterDelay:50,wordDelay:100,duration:1500},500:{characterDelay:80,wordDelay:180,duration:2100}},r={MOTION_TEXT_ANIMATION_MODES:e,MOTION_TEXT_SPEEDS:t,MOTION_TEXT_TIMING_PRESETS:n};exports.MOTION_TEXT_ANIMATION_MODES=e,exports.MOTION_TEXT_SPEEDS=t,exports.MOTION_TEXT_TIMING_PRESETS=n,exports.default=r;
 //# sourceMappingURL=motion-text-constants.cjs.map

package/dist/lib/motion-text/motion-text-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"motion-text-constants.cjs","names":[],"sources":["../../../components/motion_text/motion_text_constants.js"],"sourcesContent":["// Animation mode options\nexport const MOTION_TEXT_ANIMATION_MODES = [\n  'gradient-in',\n  'fade-in',\n  'slide-in',\n  'gradient-sweep',\n  'shimmer',\n  'none',\n];\n\n// Speed options (t-shirt sizing)\nexport const MOTION_TEXT_SPEEDS = ['sm', 'md', 'lg'];\n\n// Timing presets based on speed\nexport const MOTION_TEXT_TIMING_PRESETS = {\n  sm: {\n    characterDelay: 20,\n    wordDelay: 30,\n    duration: 600,\n  },\n  md: {\n    characterDelay: 30,\n    wordDelay: 50,\n    duration: 1000,\n  },\n  lg: {\n    characterDelay: 50,\n    wordDelay: 100,\n    duration: 1500,\n  },\n};\n\nexport default {\n  MOTION_TEXT_ANIMATION_MODES,\n  MOTION_TEXT_SPEEDS,\n  MOTION_TEXT_TIMING_PRESETS,\n};\n"],"mappings":"+FACA,IAAa,EAA8B,CACzC,cACA,UACA,WACA,iBACA,UACA,OACD,CAGY,EAAqB,CAAC,KAAM,KAAM,KAAK,CAGvC,EAA6B,CACxC,GAAI,CACF,eAAgB,GAChB,UAAW,GACX,SAAU,IACX,CACD,GAAI,CACF,eAAgB,GAChB,UAAW,GACX,SAAU,IACX,CACD,GAAI,CACF,eAAgB,GAChB,UAAW,IACX,SAAU,KACX,CACF,CAED,EAAe,CACb,8BACA,qBACA,6BACD"}
+{"version":3,"file":"motion-text-constants.cjs","names":[],"sources":["../../../components/MotionText/MotionTextConstants.js"],"sourcesContent":["// Animation mode options\nexport const MOTION_TEXT_ANIMATION_MODES = [\n  'gradient-in',\n  'fade-in',\n  'slide-in',\n  'gradient-sweep',\n  'shimmer',\n  'none',\n];\n\n// Speed options\nexport const MOTION_TEXT_SPEEDS = ['100', '200', '300', '400', '500'];\n\n// Timing presets based on speed\nexport const MOTION_TEXT_TIMING_PRESETS = {\n  100: {\n    characterDelay: 10,\n    wordDelay: 15,\n    duration: 300,\n  },\n  200: {\n    characterDelay: 20,\n    wordDelay: 30,\n    duration: 600,\n  },\n  300: {\n    characterDelay: 30,\n    wordDelay: 50,\n    duration: 1000,\n  },\n  400: {\n    characterDelay: 50,\n    wordDelay: 100,\n    duration: 1500,\n  },\n  500: {\n    characterDelay: 80,\n    wordDelay: 180,\n    duration: 2100,\n  },\n};\n\nexport default {\n  MOTION_TEXT_ANIMATION_MODES,\n  MOTION_TEXT_SPEEDS,\n  MOTION_TEXT_TIMING_PRESETS,\n};\n"],"mappings":"+FACA,IAAa,EAA8B,CACzC,cACA,UACA,WACA,iBACA,UACA,OACD,CAGY,EAAqB,CAAC,MAAO,MAAO,MAAO,MAAO,MAAM,CAGxD,EAA6B,CACxC,IAAK,CACH,eAAgB,GAChB,UAAW,GACX,SAAU,IACX,CACD,IAAK,CACH,eAAgB,GAChB,UAAW,GACX,SAAU,IACX,CACD,IAAK,CACH,eAAgB,GAChB,UAAW,GACX,SAAU,IACX,CACD,IAAK,CACH,eAAgB,GAChB,UAAW,IACX,SAAU,KACX,CACD,IAAK,CACH,eAAgB,GAChB,UAAW,IACX,SAAU,KACX,CACF,CAED,EAAe,CACb,8BACA,qBACA,6BACD"}

package/dist/lib/motion-text/motion-text-constants.js

@@ -1,4 +1,4 @@
-//#region components/motion_text/motion_text_constants.js
+//#region components/MotionText/MotionTextConstants.js
 var e = [
 	"gradient-in",
 	"fade-in",
@@ -7,24 +7,36 @@ var e = [
 	"shimmer",
 	"none"
 ], t = [
-	"sm",
-	"md",
-	"lg"
+	"100",
+	"200",
+	"300",
+	"400",
+	"500"
 ], n = {
-	sm: {
+	100: {
+		characterDelay: 10,
+		wordDelay: 15,
+		duration: 300
+	},
+	200: {
 		characterDelay: 20,
 		wordDelay: 30,
 		duration: 600
 	},
-	md: {
+	300: {
 		characterDelay: 30,
 		wordDelay: 50,
 		duration: 1e3
 	},
-	lg: {
+	400: {
 		characterDelay: 50,
 		wordDelay: 100,
 		duration: 1500
+	},
+	500: {
+		characterDelay: 80,
+		wordDelay: 180,
+		duration: 2100
 	}
 }, r = {
 	MOTION_TEXT_ANIMATION_MODES: e,

package/dist/lib/motion-text/motion-text-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"motion-text-constants.js","names":[],"sources":["../../../components/motion_text/motion_text_constants.js"],"sourcesContent":["// Animation mode options\nexport const MOTION_TEXT_ANIMATION_MODES = [\n  'gradient-in',\n  'fade-in',\n  'slide-in',\n  'gradient-sweep',\n  'shimmer',\n  'none',\n];\n\n// Speed options (t-shirt sizing)\nexport const MOTION_TEXT_SPEEDS = ['sm', 'md', 'lg'];\n\n// Timing presets based on speed\nexport const MOTION_TEXT_TIMING_PRESETS = {\n  sm: {\n    characterDelay: 20,\n    wordDelay: 30,\n    duration: 600,\n  },\n  md: {\n    characterDelay: 30,\n    wordDelay: 50,\n    duration: 1000,\n  },\n  lg: {\n    characterDelay: 50,\n    wordDelay: 100,\n    duration: 1500,\n  },\n};\n\nexport default {\n  MOTION_TEXT_ANIMATION_MODES,\n  MOTION_TEXT_SPEEDS,\n  MOTION_TEXT_TIMING_PRESETS,\n};\n"],"mappings":";AACA,IAAa,IAA8B;CACzC;CACA;CACA;CACA;CACA;CACA;CACD,EAGY,IAAqB;CAAC;CAAM;CAAM;CAAK,EAGvC,IAA6B;CACxC,IAAI;EACF,gBAAgB;EAChB,WAAW;EACX,UAAU;EACX;CACD,IAAI;EACF,gBAAgB;EAChB,WAAW;EACX,UAAU;EACX;CACD,IAAI;EACF,gBAAgB;EAChB,WAAW;EACX,UAAU;EACX;CACF,EAED,IAAe;CACb;CACA;CACA;CACD"}
+{"version":3,"file":"motion-text-constants.js","names":[],"sources":["../../../components/MotionText/MotionTextConstants.js"],"sourcesContent":["// Animation mode options\nexport const MOTION_TEXT_ANIMATION_MODES = [\n  'gradient-in',\n  'fade-in',\n  'slide-in',\n  'gradient-sweep',\n  'shimmer',\n  'none',\n];\n\n// Speed options\nexport const MOTION_TEXT_SPEEDS = ['100', '200', '300', '400', '500'];\n\n// Timing presets based on speed\nexport const MOTION_TEXT_TIMING_PRESETS = {\n  100: {\n    characterDelay: 10,\n    wordDelay: 15,\n    duration: 300,\n  },\n  200: {\n    characterDelay: 20,\n    wordDelay: 30,\n    duration: 600,\n  },\n  300: {\n    characterDelay: 30,\n    wordDelay: 50,\n    duration: 1000,\n  },\n  400: {\n    characterDelay: 50,\n    wordDelay: 100,\n    duration: 1500,\n  },\n  500: {\n    characterDelay: 80,\n    wordDelay: 180,\n    duration: 2100,\n  },\n};\n\nexport default {\n  MOTION_TEXT_ANIMATION_MODES,\n  MOTION_TEXT_SPEEDS,\n  MOTION_TEXT_TIMING_PRESETS,\n};\n"],"mappings":";AACA,IAAa,IAA8B;CACzC;CACA;CACA;CACA;CACA;CACA;CACD,EAGY,IAAqB;CAAC;CAAO;CAAO;CAAO;CAAO;CAAM,EAGxD,IAA6B;CACxC,KAAK;EACH,gBAAgB;EAChB,WAAW;EACX,UAAU;EACX;CACD,KAAK;EACH,gBAAgB;EAChB,WAAW;EACX,UAAU;EACX;CACD,KAAK;EACH,gBAAgB;EAChB,WAAW;EACX,UAAU;EACX;CACD,KAAK;EACH,gBAAgB;EAChB,WAAW;EACX,UAAU;EACX;CACD,KAAK;EACH,gBAAgB;EAChB,WAAW;EACX,UAAU;EACX;CACF,EAED,IAAe;CACb;CACA;CACA;CACD"}