@dialpad/dialtone-vue 2.202.0-next.1 → 2.203.0

package/dist/lib/filter-pill/filter-pill.js

@@ -1,245 +0,0 @@
-import { DtIconChevronDown as o, DtIconClose as n } from "@dialpad/dialtone-icons/vue2";
-import { DialtoneLocalization as s } from "../../localization/index.js";
-import { n as p } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import c from "../button/button.js";
-import d from "../popover/popover.js";
-import u from "../checkbox/checkbox.js";
-import f from "../checkbox-group/checkbox-group.js";
-import { BUTTON_SIZE_MODIFIERS as m } from "../button/button-constants.js";
-import { POPOVER_PADDING_CLASSES as v, POPOVER_APPEND_TO_VALUES as _ } from "../popover/popover-constants.js";
-const h = {
-  name: "DtFilterPill",
-  components: {
-    DtCheckboxGroup: f,
-    DtCheckbox: u,
-    DtPopover: d,
-    DtButton: c,
-    DtIconClose: n,
-    DtIconChevronDown: o
-  },
-  inheritAttrs: !1,
-  props: {
-    /**
-     * Array of filters to display in the popover,
-     * should be an array of objects with `name` and `active` properties
-     */
-    value: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * Text shown in tooltip when you hover the alpha button,
-     * required if no content is passed to default slot
-     */
-    alphaTooltipText: {
-      type: String,
-      default: ""
-    },
-    /**
-     * HTML disabled attribute
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Toggles the clear button visibility
-     * @values true, false
-     */
-    hideClear: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Label of the button
-     */
-    label: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Text shown in tooltip when you hover the omega button,
-     * required as it is an icon only button
-     */
-    omegaTooltipText: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Sets the element to which the
-     * <a class="d-link" href="https://dialtone.dialpad.com/components/popover.html#vue-api" target="_blank">popover component</a>
-     *  is going to append to
-     * @values body, parent, root, HTMLElement
-     */
-    popoverAppendTo: {
-      type: [HTMLElement, String],
-      default: "body",
-      validator: (e) => _.includes(e) || e instanceof HTMLElement
-    },
-    /**
-     * If the dropdown does not fit in the direction described by "popoverPlacement",
-     * it will attempt to change it's direction to the "popoverFallbackPlacements".
-     *
-     * @values top, top-start, top-end,
-     * right, right-start, right-end,
-     * left, left-start, left-end,
-     * bottom, bottom-start, bottom-end,
-     * auto, auto-start, auto-end
-     * */
-    popoverFallbackPlacements: {
-      type: Array,
-      default: () => ["auto"]
-    },
-    /**
-     * Determines maximum height for the popover before overflow.
-     * Possible units rem|px|em
-     */
-    popoverMaxHeight: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Determines maximum width for the popover before overflow.
-     * Possible units rem|px|%|em
-     */
-    popoverMaxWidth: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Padding size class for the popover content.
-     * @values none, small, medium, large
-     */
-    popoverPadding: {
-      type: String,
-      default: "large",
-      validator: (e) => Object.keys(v).some((t) => t === e)
-    },
-    /**
-     * The direction the popover displays relative to the anchor.
-     * <a class="d-link" href="https://atomiks.github.io/tippyjs/v6/all-props/#placement" target="_blank">Tippy.js docs</a>
-     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end
-     */
-    popoverPlacement: {
-      type: String,
-      default: "bottom-start"
-    },
-    /**
-     * The size of the button.
-     * @values xs, sm, md, lg, xl
-     */
-    size: {
-      type: String,
-      default: "sm",
-      validator: (e) => Object.keys(m).includes(e)
-    }
-  },
-  emits: [
-    /**
-     * Emitted when clicking the clear button
-     *
-     * @event clear
-     * @type {Boolean | Array}
-     */
-    "clear",
-    /**
-     * Emitted when popover is shown or hidden
-     *
-     * @event opened
-     * @type {Boolean | Array}
-     */
-    "open",
-    /**
-     * Emitted when the active filters change
-     * @type {Array}
-     */
-    "update:value"
-  ],
-  data() {
-    return {
-      isOpen: !1,
-      i18n: new s(),
-      filters: this.value
-    };
-  },
-  computed: {
-    buttonKind() {
-      return this.isActive ? "default" : "muted";
-    },
-    clearButtonAriaLabel() {
-      return this.omegaTooltipText || this.i18n.$t("DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL");
-    },
-    clearButtonTitle() {
-      if (!this.omegaTooltipText)
-        return this.clearButtonAriaLabel;
-    },
-    activeFilters() {
-      return this.filters.filter((e) => e.active).map((e) => e.name);
-    },
-    activeFilterList() {
-      return this.activeFilters.length <= 2 ? this.activeFilters.join(", ") : this.activeFilters.slice(0, 2).join(", ") + ", + " + (this.activeFilters.length - 2);
-    },
-    isActive() {
-      return this.activeFilterList.length > 0;
-    },
-    hasClear() {
-      return !this.hideClear && this.activeFilterList.length > 0;
-    }
-  },
-  watch: {
-    isOpen(e) {
-      this.$emit("open", e);
-    },
-    filters(e) {
-      this.$emit("update:value", e);
-    }
-  },
-  methods: {
-    clearFilter(e) {
-      this.filters = this.filters.map((t) => (delete t.active, t)), this.$emit("clear", e);
-    },
-    updateFilters(e, t) {
-      this.filters = this.filters.map((i) => i.name !== e.name ? i : { ...i, active: t });
-    }
-  }
-};
-var b = function() {
-  var t = this, i = t._self._c;
-  return i("div", { staticClass: "d-filter-pill", attrs: { "data-qa": "dt-filter-pill" } }, [i("dt-popover", { attrs: { "append-to": t.popoverAppendTo, "fallback-placements": t.popoverFallbackPlacements, "max-height": t.popoverMaxHeight, "max-width": t.popoverMaxWidth, modal: !1, padding: t.popoverPadding, placement: t.popoverPlacement }, scopedSlots: t._u([{ key: "anchor", fn: function({ attrs: l }) {
-    return [i("dt-button", t._b({ directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: t.alphaTooltipText, expression: "alphaTooltipText" }], class: [
-      "d-filter-pill__primary",
-      {
-        "d-filter-pill--selected": t.isActive,
-        "d-filter-pill__primary--has-clear": t.hasClear
-      }
-    ], attrs: { active: t.isActive, disabled: t.disabled, kind: t.buttonKind, size: t.size, "data-qa": "dt-filter-pill__button", "icon-position": "right", importance: "outlined" }, on: { click: function(a) {
-      t.isOpen = !0;
-    } }, scopedSlots: t._u([{ key: "icon", fn: function({ iconSize: a }) {
-      return [i("dt-icon-chevron-down", { staticClass: "d-filter-pill__icon", attrs: { size: a, "data-qa": "dt-filter-pill__icon" } })];
-    } }], null, !0) }, "dt-button", l, !1), [i("span", { staticClass: "d-filter-pill__label" }, [t._t("default", function() {
-      return [i("span", { staticClass: "d-filter-pill__label-alpha", domProps: { textContent: t._s(t.label) } }), t.activeFilterList ? i("span", { staticClass: "d-filter-pill__label-omega", domProps: { textContent: t._s(t.activeFilterList) } }) : t._e()];
-    })], 2)])];
-  } }, { key: "content", fn: function({ close: l }) {
-    return [t._t("content", function() {
-      return [t.value.length ? i("dt-checkbox-group", { attrs: { "selected-values": t.activeFilters, "aria-label": t.label, name: "contact-centers" } }, t._l(t.filters, function(a) {
-        return i("dt-checkbox", { key: a.name, attrs: { label: a.name, value: a.name }, on: { input: (r) => t.updateFilters(a, r) } });
-      }), 1) : t._e()];
-    }, { close: l })];
-  } }], null, !0), model: { value: t.isOpen, callback: function(l) {
-    t.isOpen = l;
-  }, expression: "isOpen" } }), t.hasClear ? i("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: t.omegaTooltipText, expression: "omegaTooltipText" }], class: [
-    "d-filter-pill__clear",
-    { "d-filter-pill__clear--selected": t.isActive }
-  ], attrs: { active: t.isActive, "aria-label": t.clearButtonAriaLabel, disabled: t.disabled, kind: t.buttonKind, size: t.size, title: t.clearButtonTitle, "data-qa": "dt-filter-pill__clear-button", importance: "outlined" }, on: { click: t.clearFilter }, scopedSlots: t._u([{ key: "icon", fn: function({ iconSize: l }) {
-    return [i("dt-icon-close", { attrs: { size: l } })];
-  } }], null, !1, 2924703597) }) : t._e()], 1);
-}, g = [], T = /* @__PURE__ */ p(
-  h,
-  b,
-  g
-);
-const O = T.exports;
-export {
-  O as default
-};
-//# sourceMappingURL=filter-pill.js.map

package/dist/lib/filter-pill/filter-pill.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"filter-pill.js","sources":["../../../components/filter_pill/filter_pill.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-filter-pill\"\n    data-qa=\"dt-filter-pill\"\n  >\n    <dt-popover\n      v-model=\"isOpen\"\n      :append-to=\"popoverAppendTo\"\n      :fallback-placements=\"popoverFallbackPlacements\"\n      :max-height=\"popoverMaxHeight\"\n      :max-width=\"popoverMaxWidth\"\n      :modal=\"false\"\n      :padding=\"popoverPadding\"\n      :placement=\"popoverPlacement\"\n    >\n      <template #anchor=\"{ attrs }\">\n        <dt-button\n          v-dt-tooltip=\"alphaTooltipText\"\n          v-bind=\"attrs\"\n          :active=\"isActive\"\n          :class=\"[\n            'd-filter-pill__primary',\n            {\n              'd-filter-pill--selected': isActive,\n              'd-filter-pill__primary--has-clear': hasClear,\n            },\n          ]\"\n          :disabled=\"disabled\"\n          :kind=\"buttonKind\"\n          :size=\"size\"\n          data-qa=\"dt-filter-pill__button\"\n          icon-position=\"right\"\n          importance=\"outlined\"\n          @click=\"isOpen = true\"\n        >\n          <span class=\"d-filter-pill__label\">\n            <!-- @slot Allows you to override the label behavior -->\n            <slot>\n              <span\n                class=\"d-filter-pill__label-alpha\"\n                v-text=\"label\"\n              />\n              <span\n                v-if=\"activeFilterList\"\n                class=\"d-filter-pill__label-omega\"\n                v-text=\"activeFilterList\"\n              />\n            </slot>\n          </span>\n          <template #icon=\"{ iconSize }\">\n            <dt-icon-chevron-down\n              :size=\"iconSize\"\n              class=\"d-filter-pill__icon\"\n              data-qa=\"dt-filter-pill__icon\"\n            />\n          </template>\n        </dt-button>\n      </template>\n      <template #content=\"{ close }\">\n        <!-- @slot Allows you to override the popover content, only use this if you need custom behavior -->\n        <slot\n          :close=\"close\"\n          name=\"content\"\n        >\n          <dt-checkbox-group\n            v-if=\"value.length\"\n            :selected-values=\"activeFilters\"\n            :aria-label=\"label\"\n            name=\"contact-centers\"\n          >\n            <dt-checkbox\n              v-for=\"filter in filters\"\n              :key=\"filter.name\"\n              :label=\"filter.name\"\n              :value=\"filter.name\"\n              @input=\"$event => updateFilters(filter, $event)\"\n            />\n          </dt-checkbox-group>\n        </slot>\n      </template>\n    </dt-popover>\n    <dt-button\n      v-if=\"hasClear\"\n      v-dt-tooltip=\"omegaTooltipText\"\n      :active=\"isActive\"\n      :aria-label=\"clearButtonAriaLabel\"\n      :class=\"[\n        'd-filter-pill__clear',\n        { 'd-filter-pill__clear--selected': isActive },\n      ]\"\n      :disabled=\"disabled\"\n      :kind=\"buttonKind\"\n      :size=\"size\"\n      :title=\"clearButtonTitle\"\n      data-qa=\"dt-filter-pill__clear-button\"\n      importance=\"outlined\"\n      @click=\"clearFilter\"\n    >\n      <template #icon=\"{ iconSize }\">\n        <dt-icon-close :size=\"iconSize\" />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES } from '@/components/popover';\nimport { BUTTON_SIZE_MODIFIERS, DtButton } from '@/components/button';\nimport { DtIconChevronDown, DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DialtoneLocalization } from '@/localization';\nimport { DtCheckbox } from '@/components/checkbox';\nimport { DtCheckboxGroup } from '@/components/checkbox_group';\n\nexport default {\n  name: 'DtFilterPill',\n\n  components: {\n    DtCheckboxGroup,\n    DtCheckbox,\n    DtPopover,\n    DtButton,\n    DtIconClose,\n    DtIconChevronDown,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Array of filters to display in the popover,\n     * should be an array of objects with `name` and `active` properties\n     */\n    value: {\n      type: Array,\n      default: () => [],\n    },\n\n    /**\n     * Text shown in tooltip when you hover the alpha button,\n     * required if no content is passed to default slot\n     */\n    alphaTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * HTML disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Toggles the clear button visibility\n     * @values true, false\n     */\n    hideClear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Label of the button\n     */\n    label: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the omega button,\n     * required as it is an icon only button\n     */\n    omegaTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/popover.html#vue-api\" target=\"_blank\">popover component</a>\n     *  is going to append to\n     * @values body, parent, root, HTMLElement\n     */\n    popoverAppendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n          (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * If the dropdown does not fit in the direction described by \"popoverPlacement\",\n     * it will attempt to change it's direction to the \"popoverFallbackPlacements\".\n     *\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     * */\n    popoverFallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    popoverMaxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    popoverMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n    popoverPadding: {\n      type: String,\n      default: 'large',\n      validator: (padding) => {\n        return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * <a class=\"d-link\" href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\" target=\"_blank\">Tippy.js docs</a>\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    popoverPlacement: {\n      type: String,\n      default: 'bottom-start',\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'sm',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when clicking the clear button\n     *\n     * @event clear\n     * @type {Boolean | Array}\n     */\n    'clear',\n\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'open',\n\n    /**\n     * Emitted when the active filters change\n     * @type {Array}\n     */\n    'update:value',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n      filters: this.value,\n    };\n  },\n\n  computed: {\n    buttonKind () {\n      return this.isActive ? 'default': 'muted';\n    },\n\n    clearButtonAriaLabel () {\n      return this.omegaTooltipText || this.i18n.$t('DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL');\n    },\n\n    clearButtonTitle () {\n      if (this.omegaTooltipText) return;\n\n      return this.clearButtonAriaLabel\n    },\n\n    activeFilters () {\n      return this.filters.filter(filter => filter.active).map(filter => filter.name);\n    },\n\n    activeFilterList () {\n      if (this.activeFilters.length <= 2) {\n        return this.activeFilters.join(', ');\n      }\n\n      return this.activeFilters.slice(0, 2).join(', ') + ', + ' + (this.activeFilters.length - 2);\n    },\n\n    isActive () {\n      return this.activeFilterList.length > 0;\n    },\n\n    hasClear () {\n      return !this.hideClear && this.activeFilterList.length > 0;\n    },\n  },\n\n  watch: {\n    isOpen (isOpen) {\n      this.$emit('open', isOpen);\n    },\n\n    filters (filters) {\n      this.$emit('update:value', filters);\n    },\n  },\n\n  methods: {\n    clearFilter ($event) {\n      this.filters = this.filters.map(filter => {\n        delete filter.active\n        return filter;\n      });\n      this.$emit('clear', $event)\n    },\n\n    updateFilters (filter, isActive) {\n      this.filters = this.filters.map(f => {\n        if (f.name !== filter.name) return f;\n\n        return {...f, active: isActive};\n      })\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtCheckboxGroup","DtCheckbox","DtPopover","DtButton","DtIconClose","DtIconChevronDown","appendTo","POPOVER_APPEND_TO_VALUES","padding","POPOVER_PADDING_CLASSES","item","s","BUTTON_SIZE_MODIFIERS","DialtoneLocalization","filter","isOpen","filters","$event","isActive","f"],"mappings":"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"}

package/dist/lib/filter-pill/index.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./filter-pill.cjs");exports.DtFilterPill=l.default;
-//# sourceMappingURL=index.cjs.map

package/dist/lib/filter-pill/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/lib/filter-pill/index.js

@@ -1,5 +0,0 @@
-import { default as e } from "./filter-pill.js";
-export {
-  e as DtFilterPill
-};
-//# sourceMappingURL=index.js.map

package/dist/lib/filter-pill/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./mode-island.cjs"),d=require("./mode-island-constants.cjs");exports.DtModeIsland=e.default;exports.DT_MODE_ISLAND_TYPES=d.DT_MODE_ISLAND_TYPES;
-//# sourceMappingURL=index.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -1,7 +0,0 @@
-import { default as r } from "./mode-island.js";
-import { DT_MODE_ISLAND_TYPES as D } from "./mode-island-constants.js";
-export {
-  D as DT_MODE_ISLAND_TYPES,
-  r as DtModeIsland
-};
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

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

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const 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

@@ -1 +0,0 @@
-{"version":3,"file":"mode-island-constants.cjs","sources":["../../../components/mode_island/mode_island_constants.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};"],"names":["DT_MODE_ISLAND_TYPES","mode_island_constants"],"mappings":"4GAAY,MAACA,EAAuB,CAClC,SAAU,WACV,MAAO,QACP,KAAM,MACR,EAEAC,EAAe,CACb,qBAAAD,CACF"}

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

@@ -1,12 +0,0 @@
-const t = {
-  INVERTED: "inverted",
-  LIGHT: "light",
-  DARK: "dark"
-}, n = {
-  DT_MODE_ISLAND_TYPES: t
-};
-export {
-  t as DT_MODE_ISLAND_TYPES,
-  n as default
-};
-//# sourceMappingURL=mode-island-constants.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"mode-island-constants.js","sources":["../../../components/mode_island/mode_island_constants.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};"],"names":["DT_MODE_ISLAND_TYPES","mode_island_constants"],"mappings":"AAAY,MAACA,IAAuB;AAAA,EAClC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AACR,GAEAC,IAAe;AAAA,EACb,sBAAAD;AACF;"}

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

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./mode-island-constants.cjs"),a=require("./validators.cjs"),r=require("./utils.cjs"),i=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),l={name:"DtModeIsland",provide(){return{dtModeIslandMode:()=>this.computedMode}},inject:{parentModeIslandMode:{from:"dtModeIslandMode",default:null}},inheritAttrs:!1,props:{as:{type:String,default:"div"},mode:{type:String,default:s.DT_MODE_ISLAND_TYPES.INVERTED,validator:a.modeValidator}},data(){return{currentContrast:r.getRootContrast(),contrastObserver:null,modeObserver:null,elementRef:null,calculatedMode:null}},computed:{isInverted(){return this.mode===s.DT_MODE_ISLAND_TYPES.INVERTED},invertedAttribute(){return this.isInverted?"":null},computedMode(){return this.mode===s.DT_MODE_ISLAND_TYPES.LIGHT||this.mode===s.DT_MODE_ISLAND_TYPES.DARK?this.mode:this.mode===s.DT_MODE_ISLAND_TYPES.INVERTED&&this.calculatedMode?this.calculatedMode:this.calculateInvertedMode()}},beforeCreate(){if(this.$attrs&&this.$attrs["data-dt-brand"])throw new 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.isInverted&&(this.calculatedMode=this.calculateInvertedMode(),this.setupModeObserver()),this.currentContrast=r.getRootContrast()},beforeDestroy(){this.contrastObserver&&(this.contrastObserver.disconnect(),this.contrastObserver=null),this.modeObserver&&(this.modeObserver.disconnect(),this.modeObserver=null)},methods:{calculateInvertedMode(){if(this.parentModeIslandMode){const t=typeof this.parentModeIslandMode=="function"?this.parentModeIslandMode():this.parentModeIslandMode;return r.getOppositeMode(t)}if(this.elementRef){const t=r.findParentMode(this.elementRef);return r.getOppositeMode(t)}return r.getOppositeMode(r.getRootMode())},setupContrastObserver(){this.contrastObserver=new MutationObserver(t=>{for(const e of t)e.type==="attributes"&&e.attributeName==="data-dt-contrast"&&(this.currentContrast=r.getRootContrast())}),this.contrastObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-dt-contrast"]})},setupModeObserver(){var o;const t={attributes:!0,attributeFilter:["data-dt-mode"],subtree:!1};this.modeObserver=new MutationObserver(n=>{for(const d of n)d.type==="attributes"&&d.attributeName==="data-dt-mode"&&(this.calculatedMode=this.calculateInvertedMode())}),this.modeObserver.observe(document.documentElement,t);let e=(o=this.elementRef)==null?void 0:o.parentElement;for(;e;)e.hasAttribute("data-dt-mode")&&this.modeObserver.observe(e,t),e=e.parentElement}}};var u=function(){var e=this,o=e._self._c;return o(e.as,e._b({tag:"component",staticClass:"d-mode-island",attrs:{"data-dt-mode":e.computedMode,"data-mode-island-inverted":e.invertedAttribute,"data-dt-contrast":e.currentContrast}},"component",e.$attrs,!1),[e._t("default")],2)},c=[],m=i.n(l,u,c);const h=m.exports;exports.default=h;
-//# sourceMappingURL=mode-island.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"mode-island.cjs","sources":["../../../components/mode_island/mode_island.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    class=\"d-mode-island\"\n    v-bind=\"$attrs\"\n    :data-dt-mode=\"computedMode\"\n    :data-mode-island-inverted=\"invertedAttribute\"\n    :data-dt-contrast=\"currentContrast\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_MODE_ISLAND_TYPES } from './mode_island_constants';\nimport { modeValidator } from './validators';\nimport {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\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  inheritAttrs: false,\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      contrastObserver: 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 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 contrast value\n    this.currentContrast = getRootContrast();\n  },\n\n  beforeDestroy () {\n    // Cleanup observers\n    if (this.contrastObserver) {\n      this.contrastObserver.disconnect();\n      this.contrastObserver = 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    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"],"names":["_sfc_main","DT_MODE_ISLAND_TYPES","modeValidator","getRootContrast","parentMode","getOppositeMode","findParentMode","getRootMode","mutationsList","mutation","config","parent","_a"],"mappings":"0QAwBAA,EAAA,CACA,KAAA,eAEA,SAAA,CACA,MAAA,CACA,iBAAA,IAAA,KAAA,YACA,CACA,EAEA,OAAA,CACA,qBAAA,CACA,KAAA,mBACA,QAAA,IACA,CACA,EAEA,aAAA,GAEA,MAAA,CAMA,GAAA,CACA,KAAA,OACA,QAAA,KACA,EAUA,KAAA,CACA,KAAA,OACA,QAAAC,EAAAA,qBAAA,SACA,UAAAC,EAAAA,aACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,gBAAAC,EAAAA,gBAAA,EACA,iBAAA,KACA,aAAA,KACA,WAAA,KACA,eAAA,IACA,CACA,EAEA,SAAA,CACA,YAAA,CACA,OAAA,KAAA,OAAAF,EAAAA,qBAAA,QACA,EAEA,mBAAA,CACA,OAAA,KAAA,WAAA,GAAA,IACA,EAEA,cAAA,CAEA,OAAA,KAAA,OAAAA,uBAAA,OAAA,KAAA,OAAAA,EAAAA,qBAAA,KACA,KAAA,KAIA,KAAA,OAAAA,EAAAA,qBAAA,UAAA,KAAA,eACA,KAAA,eAIA,KAAA,sBAAA,CACA,CACA,EAEA,cAAA,CAEA,GAAA,KAAA,QAAA,KAAA,OAAA,eAAA,EACA,MAAA,IAAA,MAAA,wHAAA,CAEA,EAEA,SAAA,CAEA,KAAA,WAAA,KAAA,IAGA,KAAA,sBAAA,EAGA,KAAA,aAEA,KAAA,eAAA,KAAA,sBAAA,EACA,KAAA,kBAAA,GAIA,KAAA,gBAAAE,kBAAA,CACA,EAEA,eAAA,CAEA,KAAA,mBACA,KAAA,iBAAA,WAAA,EACA,KAAA,iBAAA,MAEA,KAAA,eACA,KAAA,aAAA,WAAA,EACA,KAAA,aAAA,KAEA,EAEA,QAAA,CACA,uBAAA,CAEA,GAAA,KAAA,qBAAA,CACA,MAAAC,EAAA,OAAA,KAAA,sBAAA,WACA,KAAA,qBAAA,EACA,KAAA,qBACA,OAAAC,EAAAA,gBAAAD,CAAA,CACA,CAGA,GAAA,KAAA,WAAA,CACA,MAAAA,EAAAE,EAAAA,eAAA,KAAA,UAAA,EACA,OAAAD,EAAAA,gBAAAD,CAAA,CACA,CAGA,OAAAC,EAAAA,gBAAAE,EAAAA,aAAA,CACA,EAEA,uBAAA,CACA,KAAA,iBAAA,IAAA,iBAAAC,GAAA,CACA,UAAAC,KAAAD,EACAC,EAAA,OAAA,cAAAA,EAAA,gBAAA,qBACA,KAAA,gBAAAN,kBAAA,EAGA,CAAA,EAEA,KAAA,iBAAA,QAAA,SAAA,gBAAA,CACA,WAAA,GACA,gBAAA,CAAA,kBAAA,CACA,CAAA,CACA,EAEA,mBAAA,OACA,MAAAO,EAAA,CACA,WAAA,GACA,gBAAA,CAAA,cAAA,EACA,QAAA,EACA,EAEA,KAAA,aAAA,IAAA,iBAAAF,GAAA,CACA,UAAAC,KAAAD,EACAC,EAAA,OAAA,cAAAA,EAAA,gBAAA,iBAEA,KAAA,eAAA,KAAA,sBAAA,EAGA,CAAA,EAGA,KAAA,aAAA,QAAA,SAAA,gBAAAC,CAAA,EAGA,IAAAC,GAAAC,EAAA,KAAA,aAAA,YAAAA,EAAA,cACA,KAAAD,GACAA,EAAA,aAAA,cAAA,GACA,KAAA,aAAA,QAAAA,EAAAD,CAAA,EAEAC,EAAAA,EAAA,aAEA,CACA,CACA"}

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

@@ -1,124 +0,0 @@
-import { DT_MODE_ISLAND_TYPES as r } from "./mode-island-constants.js";
-import { modeValidator as i } from "./validators.js";
-import { getRootContrast as s, getOppositeMode as d, findParentMode as l, getRootMode as u } from "./utils.js";
-import { n as c } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-const m = {
-  name: "DtModeIsland",
-  provide() {
-    return {
-      dtModeIslandMode: () => this.computedMode
-    };
-  },
-  inject: {
-    parentModeIslandMode: {
-      from: "dtModeIslandMode",
-      default: null
-    }
-  },
-  inheritAttrs: !1,
-  props: {
-    /**
-     * Set this prop to render the mode island as a specific HTML element.
-     * @type {String}
-     * @values div, section, nav, article, aside, header, footer, main
-     */
-    as: {
-      type: String,
-      default: "div"
-    },
-    /**
-     * The mode to apply to the island.
-     * - 'inverted': Opposite of parent or root mode
-     * - 'light': Always light mode
-     * - 'dark': Always dark mode
-     * @type {String}
-     * @values inverted, light, dark
-     */
-    mode: {
-      type: String,
-      default: r.INVERTED,
-      validator: i
-    }
-  },
-  data() {
-    return {
-      currentContrast: s(),
-      contrastObserver: null,
-      modeObserver: null,
-      elementRef: null,
-      calculatedMode: null
-      // Store calculated mode as reactive data
-    };
-  },
-  computed: {
-    isInverted() {
-      return this.mode === r.INVERTED;
-    },
-    invertedAttribute() {
-      return this.isInverted ? "" : null;
-    },
-    computedMode() {
-      return this.mode === r.LIGHT || this.mode === r.DARK ? this.mode : this.mode === r.INVERTED && this.calculatedMode ? this.calculatedMode : this.calculateInvertedMode();
-    }
-  },
-  beforeCreate() {
-    if (this.$attrs && this.$attrs["data-dt-brand"])
-      throw new 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.isInverted && (this.calculatedMode = this.calculateInvertedMode(), this.setupModeObserver()), this.currentContrast = s();
-  },
-  beforeDestroy() {
-    this.contrastObserver && (this.contrastObserver.disconnect(), this.contrastObserver = null), this.modeObserver && (this.modeObserver.disconnect(), this.modeObserver = null);
-  },
-  methods: {
-    calculateInvertedMode() {
-      if (this.parentModeIslandMode) {
-        const e = typeof this.parentModeIslandMode == "function" ? this.parentModeIslandMode() : this.parentModeIslandMode;
-        return d(e);
-      }
-      if (this.elementRef) {
-        const e = l(this.elementRef);
-        return d(e);
-      }
-      return d(u());
-    },
-    setupContrastObserver() {
-      this.contrastObserver = new MutationObserver((e) => {
-        for (const t of e)
-          t.type === "attributes" && t.attributeName === "data-dt-contrast" && (this.currentContrast = s());
-      }), this.contrastObserver.observe(document.documentElement, {
-        attributes: !0,
-        attributeFilter: ["data-dt-contrast"]
-      });
-    },
-    setupModeObserver() {
-      var o;
-      const e = {
-        attributes: !0,
-        attributeFilter: ["data-dt-mode"],
-        subtree: !1
-      };
-      this.modeObserver = new MutationObserver((a) => {
-        for (const n of a)
-          n.type === "attributes" && n.attributeName === "data-dt-mode" && (this.calculatedMode = this.calculateInvertedMode());
-      }), this.modeObserver.observe(document.documentElement, e);
-      let t = (o = this.elementRef) == null ? void 0 : o.parentElement;
-      for (; t; )
-        t.hasAttribute("data-dt-mode") && this.modeObserver.observe(t, e), t = t.parentElement;
-    }
-  }
-};
-var h = function() {
-  var t = this, o = t._self._c;
-  return o(t.as, t._b({ tag: "component", staticClass: "d-mode-island", attrs: { "data-dt-mode": t.computedMode, "data-mode-island-inverted": t.invertedAttribute, "data-dt-contrast": t.currentContrast } }, "component", t.$attrs, !1), [t._t("default")], 2);
-}, f = [], b = /* @__PURE__ */ c(
-  m,
-  h,
-  f
-);
-const O = b.exports;
-export {
-  O as default
-};
-//# sourceMappingURL=mode-island.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"mode-island.js","sources":["../../../components/mode_island/mode_island.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    class=\"d-mode-island\"\n    v-bind=\"$attrs\"\n    :data-dt-mode=\"computedMode\"\n    :data-mode-island-inverted=\"invertedAttribute\"\n    :data-dt-contrast=\"currentContrast\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_MODE_ISLAND_TYPES } from './mode_island_constants';\nimport { modeValidator } from './validators';\nimport {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\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  inheritAttrs: false,\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      contrastObserver: 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 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 contrast value\n    this.currentContrast = getRootContrast();\n  },\n\n  beforeDestroy () {\n    // Cleanup observers\n    if (this.contrastObserver) {\n      this.contrastObserver.disconnect();\n      this.contrastObserver = 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    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"],"names":["_sfc_main","DT_MODE_ISLAND_TYPES","modeValidator","getRootContrast","parentMode","getOppositeMode","findParentMode","getRootMode","mutationsList","mutation","config","parent","_a"],"mappings":";;;;AAwBA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,UAAA;AACA,WAAA;AAAA,MACA,kBAAA,MAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AAAA,IACA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAC,EAAA;AAAA,MACA,WAAAC;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,iBAAAC,EAAA;AAAA,MACA,kBAAA;AAAA,MACA,cAAA;AAAA,MACA,YAAA;AAAA,MACA,gBAAA;AAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,SAAAF,EAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,KAAA,aAAA,KAAA;AAAA,IACA;AAAA,IAEA,eAAA;AAEA,aAAA,KAAA,SAAAA,EAAA,SAAA,KAAA,SAAAA,EAAA,OACA,KAAA,OAIA,KAAA,SAAAA,EAAA,YAAA,KAAA,iBACA,KAAA,iBAIA,KAAA,sBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,eAAA;AAEA,QAAA,KAAA,UAAA,KAAA,OAAA,eAAA;AACA,YAAA,IAAA,MAAA,wHAAA;AAAA,EAEA;AAAA,EAEA,UAAA;AAEA,SAAA,aAAA,KAAA,KAGA,KAAA,sBAAA,GAGA,KAAA,eAEA,KAAA,iBAAA,KAAA,sBAAA,GACA,KAAA,kBAAA,IAIA,KAAA,kBAAAE,EAAA;AAAA,EACA;AAAA,EAEA,gBAAA;AAEA,IAAA,KAAA,qBACA,KAAA,iBAAA,WAAA,GACA,KAAA,mBAAA,OAEA,KAAA,iBACA,KAAA,aAAA,WAAA,GACA,KAAA,eAAA;AAAA,EAEA;AAAA,EAEA,SAAA;AAAA,IACA,wBAAA;AAEA,UAAA,KAAA,sBAAA;AACA,cAAAC,IAAA,OAAA,KAAA,wBAAA,aACA,KAAA,qBAAA,IACA,KAAA;AACA,eAAAC,EAAAD,CAAA;AAAA,MACA;AAGA,UAAA,KAAA,YAAA;AACA,cAAAA,IAAAE,EAAA,KAAA,UAAA;AACA,eAAAD,EAAAD,CAAA;AAAA,MACA;AAGA,aAAAC,EAAAE,GAAA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,WAAA,mBAAA,IAAA,iBAAA,CAAAC,MAAA;AACA,mBAAAC,KAAAD;AACA,UAAAC,EAAA,SAAA,gBAAAA,EAAA,kBAAA,uBACA,KAAA,kBAAAN,EAAA;AAAA,MAGA,CAAA,GAEA,KAAA,iBAAA,QAAA,SAAA,iBAAA;AAAA,QACA,YAAA;AAAA,QACA,iBAAA,CAAA,kBAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,oBAAA;;AACA,YAAAO,IAAA;AAAA,QACA,YAAA;AAAA,QACA,iBAAA,CAAA,cAAA;AAAA,QACA,SAAA;AAAA,MACA;AAEA,WAAA,eAAA,IAAA,iBAAA,CAAAF,MAAA;AACA,mBAAAC,KAAAD;AACA,UAAAC,EAAA,SAAA,gBAAAA,EAAA,kBAAA,mBAEA,KAAA,iBAAA,KAAA,sBAAA;AAAA,MAGA,CAAA,GAGA,KAAA,aAAA,QAAA,SAAA,iBAAAC,CAAA;AAGA,UAAAC,KAAAC,IAAA,KAAA,eAAA,gBAAAA,EAAA;AACA,aAAAD;AACA,QAAAA,EAAA,aAAA,cAAA,KACA,KAAA,aAAA,QAAAA,GAAAD,CAAA,GAEAC,IAAAA,EAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;"}

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

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});function n(t){return t==="light"?"dark":"light"}function o(){return document.documentElement.getAttribute("data-dt-mode")||"light"}function r(){return document.documentElement.getAttribute("data-dt-contrast")||"default"}function d(t){let e=t==null?void 0:t.parentElement;for(;e&&e!==document.documentElement;){if(e.hasAttribute("data-dt-mode"))return e.getAttribute("data-dt-mode");e=e.parentElement}return o()}const u={getOppositeMode:n,getRootMode:o,getRootContrast:r,findParentMode:d};exports.default=u;exports.findParentMode=d;exports.getOppositeMode=n;exports.getRootContrast=r;exports.getRootMode=o;
-//# sourceMappingURL=utils.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"utils.cjs","sources":["../../../components/mode_island/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 {string} The root mode or 'light' as default\n */\nexport function getRootMode () {\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 {string} The root contrast or 'default' as default\n */\nexport function getRootContrast () {\n  const rootContrast = document.documentElement.getAttribute('data-dt-contrast');\n  return rootContrast || 'default';\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  findParentMode,\n};"],"names":["getOppositeMode","currentMode","getRootMode","getRootContrast","findParentMode","el","parent","utils"],"mappings":"4GAKO,SAASA,EAAiBC,EAAa,CAC5C,OAAOA,IAAgB,QAAU,OAAS,OAC5C,CAMO,SAASC,GAAe,CAE7B,OADiB,SAAS,gBAAgB,aAAa,cAAc,GAClD,OACrB,CAMO,SAASC,GAAmB,CAEjC,OADqB,SAAS,gBAAgB,aAAa,kBAAkB,GACtD,SACzB,CAOO,SAASC,EAAgBC,EAAI,CAClC,IAAIC,EAASD,GAAA,YAAAA,EAAI,cACjB,KAAOC,GAAUA,IAAW,SAAS,iBAAiB,CACpD,GAAIA,EAAO,aAAa,cAAc,EACpC,OAAOA,EAAO,aAAa,cAAc,EAE3CA,EAASA,EAAO,aAClB,CACA,OAAOJ,EAAW,CACpB,CAEA,MAAAK,EAAe,CACb,gBAAAP,EACA,YAAAE,EACA,gBAAAC,EACA,eAAAC,CACF"}

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

@@ -1,32 +0,0 @@
-function n(t) {
-  return t === "light" ? "dark" : "light";
-}
-function o() {
-  return document.documentElement.getAttribute("data-dt-mode") || "light";
-}
-function r() {
-  return document.documentElement.getAttribute("data-dt-contrast") || "default";
-}
-function d(t) {
-  let e = t == null ? void 0 : t.parentElement;
-  for (; e && e !== document.documentElement; ) {
-    if (e.hasAttribute("data-dt-mode"))
-      return e.getAttribute("data-dt-mode");
-    e = e.parentElement;
-  }
-  return o();
-}
-const u = {
-  getOppositeMode: n,
-  getRootMode: o,
-  getRootContrast: r,
-  findParentMode: d
-};
-export {
-  u as default,
-  d as findParentMode,
-  n as getOppositeMode,
-  r as getRootContrast,
-  o as getRootMode
-};
-//# sourceMappingURL=utils.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sources":["../../../components/mode_island/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 {string} The root mode or 'light' as default\n */\nexport function getRootMode () {\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 {string} The root contrast or 'default' as default\n */\nexport function getRootContrast () {\n  const rootContrast = document.documentElement.getAttribute('data-dt-contrast');\n  return rootContrast || 'default';\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  findParentMode,\n};"],"names":["getOppositeMode","currentMode","getRootMode","getRootContrast","findParentMode","el","parent","utils"],"mappings":"AAKO,SAASA,EAAiBC,GAAa;AAC5C,SAAOA,MAAgB,UAAU,SAAS;AAC5C;AAMO,SAASC,IAAe;AAE7B,SADiB,SAAS,gBAAgB,aAAa,cAAc,KAClD;AACrB;AAMO,SAASC,IAAmB;AAEjC,SADqB,SAAS,gBAAgB,aAAa,kBAAkB,KACtD;AACzB;AAOO,SAASC,EAAgBC,GAAI;AAClC,MAAIC,IAASD,KAAA,gBAAAA,EAAI;AACjB,SAAOC,KAAUA,MAAW,SAAS,mBAAiB;AACpD,QAAIA,EAAO,aAAa,cAAc;AACpC,aAAOA,EAAO,aAAa,cAAc;AAE3C,IAAAA,IAASA,EAAO;AAAA,EAClB;AACA,SAAOJ,EAAW;AACpB;AAEA,MAAAK,IAAe;AAAA,EACb,iBAAAP;AAAA,EACA,aAAAE;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AACF;"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"validators.cjs","sources":["../../../components/mode_island/validators.js"],"sourcesContent":["import { DT_MODE_ISLAND_TYPES } from './mode_island_constants';\n\nexport function modeValidator (mode) {\n  return Object.values(DT_MODE_ISLAND_TYPES).includes(mode);\n}\n\nexport default {\n  modeValidator,\n};"],"names":["modeValidator","mode","DT_MODE_ISLAND_TYPES","validators"],"mappings":"2JAEO,SAASA,EAAeC,EAAM,CACnC,OAAO,OAAO,OAAOC,EAAAA,oBAAoB,EAAE,SAASD,CAAI,CAC1D,CAEA,MAAAE,EAAe,CACb,cAAAH,CACF"}

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

@@ -1,12 +0,0 @@
-import { DT_MODE_ISLAND_TYPES as o } from "./mode-island-constants.js";
-function a(t) {
-  return Object.values(o).includes(t);
-}
-const r = {
-  modeValidator: a
-};
-export {
-  r as default,
-  a as modeValidator
-};
-//# sourceMappingURL=validators.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"validators.js","sources":["../../../components/mode_island/validators.js"],"sourcesContent":["import { DT_MODE_ISLAND_TYPES } from './mode_island_constants';\n\nexport function modeValidator (mode) {\n  return Object.values(DT_MODE_ISLAND_TYPES).includes(mode);\n}\n\nexport default {\n  modeValidator,\n};"],"names":["modeValidator","mode","DT_MODE_ISLAND_TYPES","validators"],"mappings":";AAEO,SAASA,EAAeC,GAAM;AACnC,SAAO,OAAO,OAAOC,CAAoB,EAAE,SAASD,CAAI;AAC1D;AAEA,MAAAE,IAAe;AAAA,EACb,eAAAH;AACF;"}