@morscherlab/mld-sdk 0.7.2 → 0.7.4

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

@@ -12,6 +12,7 @@ interface Props {
     min?: number;
     max?: number;
     step?: number;
+    ariaDescribedby?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string | number | null) => any;

package/dist/components/BaseInput.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, normalizeClass } from "vue";
-const _hoisted_1 = ["type", "value", "placeholder", "disabled", "readonly", "autocomplete", "autofocus", "min", "max", "step"];
+const _hoisted_1 = ["type", "value", "placeholder", "disabled", "readonly", "autocomplete", "autofocus", "min", "max", "step", "aria-invalid", "aria-describedby"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "BaseInput",
   props: {
@@ -14,7 +14,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     autofocus: { type: Boolean },
     min: {},
     max: {},
-    step: {}
+    step: {},
+    ariaDescribedby: {}
   },
   emits: ["update:modelValue", "focus", "blur", "keydown"],
   setup(__props, { emit: __emit }) {
@@ -37,6 +38,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         min: __props.min,
         max: __props.max,
         step: __props.step,
+        "aria-invalid": __props.error || void 0,
+        "aria-describedby": __props.ariaDescribedby || void 0,
         class: normalizeClass([
           "mld-input",
           `mld-input--${__props.size}`,

package/dist/components/BaseInput.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.vue.js","sources":["../../src/components/BaseInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { InputType } from '../types'\n\ninterface Props {\n  modelValue?: string | number\n  type?: InputType\n  placeholder?: string\n  disabled?: boolean\n  readonly?: boolean\n  error?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  autocomplete?: string\n  autofocus?: boolean\n  min?: number\n  max?: number\n  step?: number\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  type: 'text',\n  disabled: false,\n  readonly: false,\n  error: false,\n  size: 'md',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | number | null]\n  focus: [event: FocusEvent]\n  blur: [event: FocusEvent]\n  keydown: [event: KeyboardEvent]\n}>()\n\nfunction handleInput(event: Event) {\n  const target = event.target as HTMLInputElement\n  const value = props.type === 'number'\n    ? (target.value === '' ? null : Number(target.value))\n    : target.value\n  emit('update:modelValue', value as string | number)\n}\n</script>\n\n<template>\n  <input\n    :type=\"type\"\n    :value=\"modelValue\"\n    :placeholder=\"placeholder\"\n    :disabled=\"disabled\"\n    :readonly=\"readonly\"\n    :autocomplete=\"autocomplete\"\n    :autofocus=\"autofocus\"\n    :min=\"min\"\n    :max=\"max\"\n    :step=\"step\"\n    :class=\"[\n      'mld-input',\n      `mld-input--${size}`,\n      error ? 'mld-input--error' : '',\n      disabled ? 'mld-input--disabled' : '',\n    ]\"\n    @input=\"handleInput\"\n    @focus=\"emit('focus', $event)\"\n    @blur=\"emit('blur', $event)\"\n    @keydown=\"emit('keydown', $event)\"\n  />\n</template>\n\n<style>\n@import '../styles/components/input.css';\n</style>\n"],"names":["_createElementBlock","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkBA,UAAM,QAAQ;AAQd,UAAM,OAAO;AAOb,aAAS,YAAY,OAAc;AACjC,YAAM,SAAS,MAAM;AACrB,YAAM,QAAQ,MAAM,SAAS,WACxB,OAAO,UAAU,KAAK,OAAO,OAAO,OAAO,KAAK,IACjD,OAAO;AACX,WAAK,qBAAqB,KAAwB;AAAA,IACpD;;0BAIEA,mBAqBE,SAAA;AAAA,QApBC,MAAM,QAAA;AAAA,QACN,OAAO,QAAA;AAAA,QACP,aAAa,QAAA;AAAA,QACb,UAAU,QAAA;AAAA,QACV,UAAU,QAAA;AAAA,QACV,cAAc,QAAA;AAAA,QACd,WAAW,QAAA;AAAA,QACX,KAAK,QAAA;AAAA,QACL,KAAK,QAAA;AAAA,QACL,MAAM,QAAA;AAAA,QACN,OAAKC,eAAA;AAAA;wBAA2C,QAAA,IAAI;AAAA,UAAU,QAAA,QAAK,qBAAA;AAAA,UAAkC,QAAA,WAAQ,wBAAA;AAAA,QAAA;QAM7G,SAAO;AAAA,QACP,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAI,SAAU,MAAM;AAAA,QAC3B,QAAI,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAI,QAAS,MAAM;AAAA,QACzB,WAAO,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAI,WAAY,MAAM;AAAA,MAAA;;;;"}
+{"version":3,"file":"BaseInput.vue.js","sources":["../../src/components/BaseInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { InputType } from '../types'\n\ninterface Props {\n  modelValue?: string | number\n  type?: InputType\n  placeholder?: string\n  disabled?: boolean\n  readonly?: boolean\n  error?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  autocomplete?: string\n  autofocus?: boolean\n  min?: number\n  max?: number\n  step?: number\n  ariaDescribedby?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  type: 'text',\n  disabled: false,\n  readonly: false,\n  error: false,\n  size: 'md',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | number | null]\n  focus: [event: FocusEvent]\n  blur: [event: FocusEvent]\n  keydown: [event: KeyboardEvent]\n}>()\n\nfunction handleInput(event: Event) {\n  const target = event.target as HTMLInputElement\n  const value = props.type === 'number'\n    ? (target.value === '' ? null : Number(target.value))\n    : target.value\n  emit('update:modelValue', value as string | number)\n}\n</script>\n\n<template>\n  <input\n    :type=\"type\"\n    :value=\"modelValue\"\n    :placeholder=\"placeholder\"\n    :disabled=\"disabled\"\n    :readonly=\"readonly\"\n    :autocomplete=\"autocomplete\"\n    :autofocus=\"autofocus\"\n    :min=\"min\"\n    :max=\"max\"\n    :step=\"step\"\n    :aria-invalid=\"error || undefined\"\n    :aria-describedby=\"ariaDescribedby || undefined\"\n    :class=\"[\n      'mld-input',\n      `mld-input--${size}`,\n      error ? 'mld-input--error' : '',\n      disabled ? 'mld-input--disabled' : '',\n    ]\"\n    @input=\"handleInput\"\n    @focus=\"emit('focus', $event)\"\n    @blur=\"emit('blur', $event)\"\n    @keydown=\"emit('keydown', $event)\"\n  />\n</template>\n\n<style>\n@import '../styles/components/input.css';\n</style>\n"],"names":["_createElementBlock","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBA,UAAM,QAAQ;AAQd,UAAM,OAAO;AAOb,aAAS,YAAY,OAAc;AACjC,YAAM,SAAS,MAAM;AACrB,YAAM,QAAQ,MAAM,SAAS,WACxB,OAAO,UAAU,KAAK,OAAO,OAAO,OAAO,KAAK,IACjD,OAAO;AACX,WAAK,qBAAqB,KAAwB;AAAA,IACpD;;0BAIEA,mBAuBE,SAAA;AAAA,QAtBC,MAAM,QAAA;AAAA,QACN,OAAO,QAAA;AAAA,QACP,aAAa,QAAA;AAAA,QACb,UAAU,QAAA;AAAA,QACV,UAAU,QAAA;AAAA,QACV,cAAc,QAAA;AAAA,QACd,WAAW,QAAA;AAAA,QACX,KAAK,QAAA;AAAA,QACL,KAAK,QAAA;AAAA,QACL,MAAM,QAAA;AAAA,QACN,gBAAc,QAAA,SAAS;AAAA,QACvB,oBAAkB,QAAA,mBAAmB;AAAA,QACrC,OAAKC,eAAA;AAAA;wBAA2C,QAAA,IAAI;AAAA,UAAU,QAAA,QAAK,qBAAA;AAAA,UAAkC,QAAA,WAAQ,wBAAA;AAAA,QAAA;QAM7G,SAAO;AAAA,QACP,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAI,SAAU,MAAM;AAAA,QAC3B,QAAI,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAI,QAAS,MAAM;AAAA,QACzB,WAAO,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAI,WAAY,MAAM;AAAA,MAAA;;;;"}

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

@@ -13,7 +13,9 @@ declare function __VLS_template(): {
         default?(_: {}): any;
         footer?(_: {}): any;
     };
-    refs: {};
+    refs: {
+        containerRef: HTMLDivElement;
+    };
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -28,7 +30,9 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     closable: boolean;
     closeOnOverlay: boolean;
     closeOnEscape: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    containerRef: HTMLDivElement;
+}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/BaseModal.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, watch, onMounted, onUnmounted, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, renderSlot } from "vue";
+import { defineComponent, ref, watch, nextTick, onMounted, onUnmounted, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, renderSlot } from "vue";
 const _hoisted_1 = {
   key: 0,
   class: "mld-modal__header"
@@ -26,6 +26,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const containerRef = ref(null);
+    let previouslyFocused = null;
+    const FOCUSABLE_SELECTOR = [
+      "a[href]",
+      "button:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ].join(", ");
+    function getFocusableElements() {
+      if (!containerRef.value) return [];
+      return Array.from(containerRef.value.querySelectorAll(FOCUSABLE_SELECTOR));
+    }
+    function handleKeydown(event) {
+      if (event.key === "Escape" && props.closeOnEscape && props.modelValue) {
+        close();
+        return;
+      }
+      if (event.key !== "Tab" || !containerRef.value) return;
+      const focusable = getFocusableElements();
+      if (focusable.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
     function close() {
       if (props.closable) {
         emit("update:modelValue", false);
@@ -37,23 +72,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         close();
       }
     }
-    function handleEscape(event) {
-      if (props.closeOnEscape && event.key === "Escape" && props.modelValue) {
-        close();
-      }
-    }
-    watch(() => props.modelValue, (isOpen) => {
+    watch(() => props.modelValue, async (isOpen) => {
+      var _a;
       if (isOpen) {
+        previouslyFocused = document.activeElement;
         document.body.style.overflow = "hidden";
+        await nextTick();
+        const focusable = getFocusableElements();
+        if (focusable.length > 0) {
+          focusable[0].focus();
+        } else {
+          (_a = containerRef.value) == null ? void 0 : _a.focus();
+        }
       } else {
         document.body.style.overflow = "";
+        previouslyFocused == null ? void 0 : previouslyFocused.focus();
+        previouslyFocused = null;
       }
     });
     onMounted(() => {
-      document.addEventListener("keydown", handleEscape);
+      document.addEventListener("keydown", handleKeydown);
     });
     onUnmounted(() => {
-      document.removeEventListener("keydown", handleEscape);
+      document.removeEventListener("keydown", handleKeydown);
       document.body.style.overflow = "";
     });
     return (_ctx, _cache) => {
@@ -67,12 +108,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, [
               _cache[1] || (_cache[1] = createElementVNode("div", { class: "mld-modal__overlay" }, null, -1)),
               createElementVNode("div", {
+                ref_key: "containerRef",
+                ref: containerRef,
                 class: normalizeClass([
                   "mld-modal__container",
                   `mld-modal__container--${__props.size}`
                 ]),
                 role: "dialog",
-                "aria-modal": "true"
+                "aria-modal": "true",
+                tabindex: "-1"
               }, [
                 __props.title || __props.closable ? (openBlock(), createElementBlock("div", _hoisted_1, [
                   __props.title ? (openBlock(), createElementBlock("h3", _hoisted_2, toDisplayString(__props.title), 1)) : createCommentVNode("", true),

package/dist/components/BaseModal.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseModal.vue.js","sources":["../../src/components/BaseModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { watch, onMounted, onUnmounted } from 'vue'\nimport type { ModalSize } from '../types'\n\ninterface Props {\n  modelValue: boolean\n  title?: string\n  size?: ModalSize\n  closable?: boolean\n  closeOnOverlay?: boolean\n  closeOnEscape?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  size: 'md',\n  closable: true,\n  closeOnOverlay: true,\n  closeOnEscape: true,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n  close: []\n}>()\n\nfunction close() {\n  if (props.closable) {\n    emit('update:modelValue', false)\n    emit('close')\n  }\n}\n\nfunction handleOverlayClick(event: MouseEvent) {\n  if (props.closeOnOverlay && event.target === event.currentTarget) {\n    close()\n  }\n}\n\nfunction handleEscape(event: KeyboardEvent) {\n  if (props.closeOnEscape && event.key === 'Escape' && props.modelValue) {\n    close()\n  }\n}\n\nwatch(() => props.modelValue, (isOpen) => {\n  if (isOpen) {\n    document.body.style.overflow = 'hidden'\n  } else {\n    document.body.style.overflow = ''\n  }\n})\n\nonMounted(() => {\n  document.addEventListener('keydown', handleEscape)\n})\n\nonUnmounted(() => {\n  document.removeEventListener('keydown', handleEscape)\n  document.body.style.overflow = ''\n})\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"modal\">\n      <div\n        v-if=\"modelValue\"\n        class=\"mld-modal\"\n        @click=\"handleOverlayClick\"\n      >\n        <!-- Overlay -->\n        <div class=\"mld-modal__overlay\" />\n\n        <!-- Modal -->\n        <div\n          :class=\"[\n            'mld-modal__container',\n            `mld-modal__container--${size}`,\n          ]\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <!-- Header -->\n          <div v-if=\"title || closable\" class=\"mld-modal__header\">\n            <h3 v-if=\"title\" class=\"mld-modal__title\">\n              {{ title }}\n            </h3>\n            <button\n              v-if=\"closable\"\n              type=\"button\"\n              class=\"mld-modal__close\"\n              aria-label=\"Close modal\"\n              @click=\"close\"\n            >\n              <svg class=\"mld-modal__close-icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                <path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" />\n              </svg>\n            </button>\n          </div>\n\n          <!-- Body -->\n          <div class=\"mld-modal__body\">\n            <slot />\n          </div>\n\n          <!-- Footer -->\n          <div v-if=\"$slots.footer\" class=\"mld-modal__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n@import '../styles/components/modal.css';\n</style>\n"],"names":["_createBlock","_Teleport","_createVNode","_Transition","_createElementBlock","_createElementVNode","_normalizeClass","_openBlock","_toDisplayString","_renderSlot","$slots"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,UAAM,QAAQ;AAOd,UAAM,OAAO;AAKb,aAAS,QAAQ;AACf,UAAI,MAAM,UAAU;AAClB,aAAK,qBAAqB,KAAK;AAC/B,aAAK,OAAO;AAAA,MACd;AAAA,IACF;AAEA,aAAS,mBAAmB,OAAmB;AAC7C,UAAI,MAAM,kBAAkB,MAAM,WAAW,MAAM,eAAe;AAChE,cAAA;AAAA,MACF;AAAA,IACF;AAEA,aAAS,aAAa,OAAsB;AAC1C,UAAI,MAAM,iBAAiB,MAAM,QAAQ,YAAY,MAAM,YAAY;AACrE,cAAA;AAAA,MACF;AAAA,IACF;AAEA,UAAM,MAAM,MAAM,YAAY,CAAC,WAAW;AACxC,UAAI,QAAQ;AACV,iBAAS,KAAK,MAAM,WAAW;AAAA,MACjC,OAAO;AACL,iBAAS,KAAK,MAAM,WAAW;AAAA,MACjC;AAAA,IACF,CAAC;AAED,cAAU,MAAM;AACd,eAAS,iBAAiB,WAAW,YAAY;AAAA,IACnD,CAAC;AAED,gBAAY,MAAM;AAChB,eAAS,oBAAoB,WAAW,YAAY;AACpD,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC,CAAC;;0BAICA,YAiDWC,UAAA,EAjDD,IAAG,UAAM;AAAA,QACjBC,YA+CaC,YAAA,EA/CD,MAAK,WAAO;AAAA,2BACtB,MA6CM;AAAA,YA5CE,QAAA,2BADRC,mBA6CM,OAAA;AAAA;cA3CJ,OAAM;AAAA,cACL,SAAO;AAAA,YAAA;wCAGRC,mBAAkC,OAAA,EAA7B,OAAM,qBAAA,GAAoB,MAAA,EAAA;AAAA,cAG/BA,mBAmCM,OAAA;AAAA,gBAlCH,OAAKC,eAAA;AAAA;2CAA6E,QAAA,IAAI;AAAA,gBAAA;gBAIvF,MAAK;AAAA,gBACL,cAAW;AAAA,cAAA;gBAGA,QAAA,SAAS,QAAA,YAApBC,aAAAH,mBAeM,OAfN,YAeM;AAAA,kBAdM,QAAA,sBAAVA,mBAEK,MAFL,YAEKI,gBADA,QAAA,KAAK,GAAA,CAAA;kBAGF,QAAA,yBADRJ,mBAUS,UAAA;AAAA;oBARP,MAAK;AAAA,oBACL,OAAM;AAAA,oBACN,cAAW;AAAA,oBACV,SAAO;AAAA,kBAAA;oBAERC,mBAEM,OAAA;AAAA,sBAFD,OAAM;AAAA,sBAAwB,MAAK;AAAA,sBAAO,QAAO;AAAA,sBAAe,gBAAa;AAAA,sBAAI,kBAAe;AAAA,sBAAQ,mBAAgB;AAAA,sBAAQ,SAAQ;AAAA,oBAAA;sBAC3IA,mBAAuB,QAAA,EAAjB,GAAE,cAAY;AAAA,sBAAGA,mBAAuB,QAAA,EAAjB,GAAE,cAAY;AAAA,oBAAA;;;gBAMjDA,mBAEM,OAFN,YAEM;AAAA,kBADJI,WAAQ,KAAA,QAAA,SAAA;AAAA,gBAAA;gBAICC,KAAAA,OAAO,UAAlBH,aAAAH,mBAEM,OAFN,YAEM;AAAA,kBADJK,WAAsB,KAAA,QAAA,QAAA;AAAA,gBAAA;;;;;;;;;;"}
+{"version":3,"file":"BaseModal.vue.js","sources":["../../src/components/BaseModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'\nimport type { ModalSize } from '../types'\n\ninterface Props {\n  modelValue: boolean\n  title?: string\n  size?: ModalSize\n  closable?: boolean\n  closeOnOverlay?: boolean\n  closeOnEscape?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  size: 'md',\n  closable: true,\n  closeOnOverlay: true,\n  closeOnEscape: true,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n  close: []\n}>()\n\nconst containerRef = ref<HTMLElement | null>(null)\nlet previouslyFocused: HTMLElement | null = null\n\nconst FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(', ')\n\nfunction getFocusableElements(): HTMLElement[] {\n  if (!containerRef.value) return []\n  return Array.from(containerRef.value.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && props.closeOnEscape && props.modelValue) {\n    close()\n    return\n  }\n\n  if (event.key !== 'Tab' || !containerRef.value) return\n\n  const focusable = getFocusableElements()\n  if (focusable.length === 0) {\n    event.preventDefault()\n    return\n  }\n\n  const first = focusable[0]\n  const last = focusable[focusable.length - 1]\n\n  if (event.shiftKey && document.activeElement === first) {\n    event.preventDefault()\n    last.focus()\n  } else if (!event.shiftKey && document.activeElement === last) {\n    event.preventDefault()\n    first.focus()\n  }\n}\n\nfunction close() {\n  if (props.closable) {\n    emit('update:modelValue', false)\n    emit('close')\n  }\n}\n\nfunction handleOverlayClick(event: MouseEvent) {\n  if (props.closeOnOverlay && event.target === event.currentTarget) {\n    close()\n  }\n}\n\nwatch(() => props.modelValue, async (isOpen) => {\n  if (isOpen) {\n    previouslyFocused = document.activeElement as HTMLElement | null\n    document.body.style.overflow = 'hidden'\n    await nextTick()\n    const focusable = getFocusableElements()\n    if (focusable.length > 0) {\n      focusable[0].focus()\n    } else {\n      containerRef.value?.focus()\n    }\n  } else {\n    document.body.style.overflow = ''\n    previouslyFocused?.focus()\n    previouslyFocused = null\n  }\n})\n\nonMounted(() => {\n  document.addEventListener('keydown', handleKeydown)\n})\n\nonUnmounted(() => {\n  document.removeEventListener('keydown', handleKeydown)\n  document.body.style.overflow = ''\n})\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <Transition name=\"modal\">\n      <div\n        v-if=\"modelValue\"\n        class=\"mld-modal\"\n        @click=\"handleOverlayClick\"\n      >\n        <!-- Overlay -->\n        <div class=\"mld-modal__overlay\" />\n\n        <!-- Modal -->\n        <div\n          ref=\"containerRef\"\n          :class=\"[\n            'mld-modal__container',\n            `mld-modal__container--${size}`,\n          ]\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          tabindex=\"-1\"\n        >\n          <!-- Header -->\n          <div v-if=\"title || closable\" class=\"mld-modal__header\">\n            <h3 v-if=\"title\" class=\"mld-modal__title\">\n              {{ title }}\n            </h3>\n            <button\n              v-if=\"closable\"\n              type=\"button\"\n              class=\"mld-modal__close\"\n              aria-label=\"Close modal\"\n              @click=\"close\"\n            >\n              <svg class=\"mld-modal__close-icon\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n                <path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" />\n              </svg>\n            </button>\n          </div>\n\n          <!-- Body -->\n          <div class=\"mld-modal__body\">\n            <slot />\n          </div>\n\n          <!-- Footer -->\n          <div v-if=\"$slots.footer\" class=\"mld-modal__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style>\n@import '../styles/components/modal.css';\n</style>\n"],"names":["_createBlock","_Teleport","_createVNode","_Transition","_createElementBlock","_createElementVNode","_normalizeClass","_openBlock","_toDisplayString","_renderSlot","$slots"],"mappings":"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"}

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

@@ -6,6 +6,7 @@ interface Props {
     disabled?: boolean;
     error?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    ariaDescribedby?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => any;

package/dist/components/BaseSelect.vue.js

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, Fragment, renderList } from "vue";
 const _hoisted_1 = { class: "mld-select" };
-const _hoisted_2 = ["value", "disabled"];
+const _hoisted_2 = ["value", "disabled", "aria-invalid", "aria-describedby"];
 const _hoisted_3 = {
   key: 0,
   value: "",
@@ -15,7 +15,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     placeholder: {},
     disabled: { type: Boolean, default: false },
     error: { type: Boolean, default: false },
-    size: { default: "md" }
+    size: { default: "md" },
+    ariaDescribedby: {}
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -31,6 +32,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createElementVNode("select", {
           value: __props.modelValue,
           disabled: __props.disabled,
+          "aria-invalid": __props.error || void 0,
+          "aria-describedby": __props.ariaDescribedby || void 0,
           class: normalizeClass([
             "mld-select__control",
             `mld-select__control--${__props.size}`,

package/dist/components/BaseSelect.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSelect.vue.js","sources":["../../src/components/BaseSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SelectOption } from '../types'\n\ninterface Props {\n  modelValue?: string | number\n  options: SelectOption<string | number>[]\n  placeholder?: string\n  disabled?: boolean\n  error?: boolean\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  disabled: false,\n  error: false,\n  size: 'md',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | number]\n}>()\n\nfunction handleChange(event: Event) {\n  const target = event.target as HTMLSelectElement\n  const value = typeof props.modelValue === 'number'\n    ? Number(target.value)\n    : target.value\n  emit('update:modelValue', value)\n}\n</script>\n\n<template>\n  <div class=\"mld-select\">\n    <select\n      :value=\"modelValue\"\n      :disabled=\"disabled\"\n      :class=\"[\n        'mld-select__control',\n        `mld-select__control--${size}`,\n        error ? 'mld-select__control--error' : '',\n        disabled ? 'mld-select__control--disabled' : '',\n      ]\"\n      @change=\"handleChange\"\n    >\n      <option v-if=\"placeholder\" value=\"\" disabled>\n        {{ placeholder }}\n      </option>\n      <option\n        v-for=\"option in options\"\n        :key=\"String(option.value)\"\n        :value=\"option.value\"\n        :disabled=\"option.disabled\"\n      >\n        {{ option.label }}\n      </option>\n    </select>\n    <div class=\"mld-select__icon\">\n      <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </div>\n  </div>\n</template>\n\n<style>\n@import '../styles/components/select.css';\n</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_toDisplayString","_Fragment","_renderList"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYA,UAAM,QAAQ;AAMd,UAAM,OAAO;AAIb,aAAS,aAAa,OAAc;AAClC,YAAM,SAAS,MAAM;AACrB,YAAM,QAAQ,OAAO,MAAM,eAAe,WACtC,OAAO,OAAO,KAAK,IACnB,OAAO;AACX,WAAK,qBAAqB,KAAK;AAAA,IACjC;;AAIE,aAAAA,UAAA,GAAAC,mBA6BM,OA7BN,YA6BM;AAAA,QA5BJC,mBAsBS,UAAA;AAAA,UArBN,OAAO,QAAA;AAAA,UACP,UAAU,QAAA;AAAA,UACV,OAAKC,eAAA;AAAA;oCAAmE,QAAA,IAAI;AAAA,YAAY,QAAA,QAAK,+BAAA;AAAA,YAA8C,QAAA,WAAQ,kCAAA;AAAA,UAAA;UAMnJ,UAAQ;AAAA,QAAA;UAEK,QAAA,4BAAdF,mBAES,UAFT,YAESG,gBADJ,QAAA,WAAW,GAAA,CAAA;4BAEhBH,mBAOSI,UAAA,MAAAC,WANU,QAAA,SAAO,CAAjB,WAAM;gCADfL,mBAOS,UAAA;AAAA,cALN,KAAK,OAAO,OAAO,KAAK;AAAA,cACxB,OAAO,OAAO;AAAA,cACd,UAAU,OAAO;AAAA,YAAA,GAEfG,gBAAA,OAAO,KAAK,GAAA,GAAA,UAAA;AAAA;;kCAGnBF,mBAIM,OAAA,EAJD,OAAM,sBAAkB;AAAA,UAC3BA,mBAEM,OAAA;AAAA,YAFD,MAAK;AAAA,YAAO,QAAO;AAAA,YAAe,gBAAa;AAAA,YAAI,kBAAe;AAAA,YAAQ,mBAAgB;AAAA,YAAQ,SAAQ;AAAA,UAAA;YAC7GA,mBAAyB,QAAA,EAAnB,GAAE,gBAAc;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"BaseSelect.vue.js","sources":["../../src/components/BaseSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SelectOption } from '../types'\n\ninterface Props {\n  modelValue?: string | number\n  options: SelectOption<string | number>[]\n  placeholder?: string\n  disabled?: boolean\n  error?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  ariaDescribedby?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  disabled: false,\n  error: false,\n  size: 'md',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string | number]\n}>()\n\nfunction handleChange(event: Event) {\n  const target = event.target as HTMLSelectElement\n  const value = typeof props.modelValue === 'number'\n    ? Number(target.value)\n    : target.value\n  emit('update:modelValue', value)\n}\n</script>\n\n<template>\n  <div class=\"mld-select\">\n    <select\n      :value=\"modelValue\"\n      :disabled=\"disabled\"\n      :aria-invalid=\"error || undefined\"\n      :aria-describedby=\"ariaDescribedby || undefined\"\n      :class=\"[\n        'mld-select__control',\n        `mld-select__control--${size}`,\n        error ? 'mld-select__control--error' : '',\n        disabled ? 'mld-select__control--disabled' : '',\n      ]\"\n      @change=\"handleChange\"\n    >\n      <option v-if=\"placeholder\" value=\"\" disabled>\n        {{ placeholder }}\n      </option>\n      <option\n        v-for=\"option in options\"\n        :key=\"String(option.value)\"\n        :value=\"option.value\"\n        :disabled=\"option.disabled\"\n      >\n        {{ option.label }}\n      </option>\n    </select>\n    <div class=\"mld-select__icon\">\n      <svg fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\">\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </div>\n  </div>\n</template>\n\n<style>\n@import '../styles/components/select.css';\n</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_normalizeClass","_toDisplayString","_Fragment","_renderList"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaA,UAAM,QAAQ;AAMd,UAAM,OAAO;AAIb,aAAS,aAAa,OAAc;AAClC,YAAM,SAAS,MAAM;AACrB,YAAM,QAAQ,OAAO,MAAM,eAAe,WACtC,OAAO,OAAO,KAAK,IACnB,OAAO;AACX,WAAK,qBAAqB,KAAK;AAAA,IACjC;;AAIE,aAAAA,UAAA,GAAAC,mBA+BM,OA/BN,YA+BM;AAAA,QA9BJC,mBAwBS,UAAA;AAAA,UAvBN,OAAO,QAAA;AAAA,UACP,UAAU,QAAA;AAAA,UACV,gBAAc,QAAA,SAAS;AAAA,UACvB,oBAAkB,QAAA,mBAAmB;AAAA,UACrC,OAAKC,eAAA;AAAA;oCAAmE,QAAA,IAAI;AAAA,YAAY,QAAA,QAAK,+BAAA;AAAA,YAA8C,QAAA,WAAQ,kCAAA;AAAA,UAAA;UAMnJ,UAAQ;AAAA,QAAA;UAEK,QAAA,4BAAdF,mBAES,UAFT,YAESG,gBADJ,QAAA,WAAW,GAAA,CAAA;4BAEhBH,mBAOSI,UAAA,MAAAC,WANU,QAAA,SAAO,CAAjB,WAAM;gCADfL,mBAOS,UAAA;AAAA,cALN,KAAK,OAAO,OAAO,KAAK;AAAA,cACxB,OAAO,OAAO;AAAA,cACd,UAAU,OAAO;AAAA,YAAA,GAEfG,gBAAA,OAAO,KAAK,GAAA,GAAA,UAAA;AAAA;;kCAGnBF,mBAIM,OAAA,EAJD,OAAM,sBAAkB;AAAA,UAC3BA,mBAEM,OAAA;AAAA,YAFD,MAAK;AAAA,YAAO,QAAO;AAAA,YAAe,gBAAa;AAAA,YAAI,kBAAe;AAAA,YAAQ,mBAAgB;AAAA,YAAQ,SAAQ;AAAA,UAAA;YAC7GA,mBAAyB,QAAA,EAAnB,GAAE,gBAAc;AAAA,UAAA;;;;;;"}

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

@@ -8,6 +8,7 @@ interface Props {
     rows?: number;
     resize?: 'none' | 'vertical' | 'horizontal' | 'both';
     maxlength?: number;
+    ariaDescribedby?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;

package/dist/components/BaseTextarea.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, normalizeClass } from "vue";
-const _hoisted_1 = ["value", "placeholder", "disabled", "readonly", "rows", "maxlength"];
+const _hoisted_1 = ["value", "placeholder", "disabled", "readonly", "rows", "maxlength", "aria-invalid", "aria-describedby"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "BaseTextarea",
   props: {
@@ -11,7 +11,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     size: { default: "md" },
     rows: { default: 3 },
     resize: { default: "vertical" },
-    maxlength: {}
+    maxlength: {},
+    ariaDescribedby: {}
   },
   emits: ["update:modelValue", "focus", "blur"],
   setup(__props, { emit: __emit }) {
@@ -29,6 +30,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         readonly: props.readonly,
         rows: props.rows,
         maxlength: props.maxlength,
+        "aria-invalid": props.error || void 0,
+        "aria-describedby": props.ariaDescribedby || void 0,
         class: normalizeClass([
           "mld-textarea",
           `mld-textarea--${props.size}`,

package/dist/components/BaseTextarea.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTextarea.vue.js","sources":["../../src/components/BaseTextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\ninterface Props {\n  modelValue?: string\n  placeholder?: string\n  disabled?: boolean\n  readonly?: boolean\n  error?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  rows?: number\n  resize?: 'none' | 'vertical' | 'horizontal' | 'both'\n  maxlength?: number\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  disabled: false,\n  readonly: false,\n  error: false,\n  size: 'md',\n  rows: 3,\n  resize: 'vertical',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  focus: [event: FocusEvent]\n  blur: [event: FocusEvent]\n}>()\n\nfunction handleInput(event: Event) {\n  const target = event.target as HTMLTextAreaElement\n  emit('update:modelValue', target.value)\n}\n</script>\n\n<template>\n  <textarea\n    :value=\"props.modelValue\"\n    :placeholder=\"props.placeholder\"\n    :disabled=\"props.disabled\"\n    :readonly=\"props.readonly\"\n    :rows=\"props.rows\"\n    :maxlength=\"props.maxlength\"\n    :class=\"[\n      'mld-textarea',\n      `mld-textarea--${props.size}`,\n      `mld-textarea--resize-${props.resize}`,\n      props.error ? 'mld-textarea--error' : '',\n      props.disabled ? 'mld-textarea--disabled' : '',\n    ]\"\n    @input=\"handleInput\"\n    @focus=\"emit('focus', $event)\"\n    @blur=\"emit('blur', $event)\"\n  />\n</template>\n\n<style>\n@import '../styles/components/textarea.css';\n</style>\n"],"names":["_createElementBlock","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;;AAaA,UAAM,QAAQ;AASd,UAAM,OAAO;AAMb,aAAS,YAAY,OAAc;AACjC,YAAM,SAAS,MAAM;AACrB,WAAK,qBAAqB,OAAO,KAAK;AAAA,IACxC;;0BAIEA,mBAiBE,YAAA;AAAA,QAhBC,OAAO,MAAM;AAAA,QACb,aAAa,MAAM;AAAA,QACnB,UAAU,MAAM;AAAA,QAChB,UAAU,MAAM;AAAA,QAChB,MAAM,MAAM;AAAA,QACZ,WAAW,MAAM;AAAA,QACjB,OAAKC,eAAA;AAAA;UAAiD,iBAAA,MAAM,IAAI;AAAA,UAAkC,wBAAA,MAAM,MAAM;AAAA,UAAU,MAAM,QAAK,wBAAA;AAAA,UAAqC,MAAM,WAAQ,2BAAA;AAAA,QAAA;QAOtL,SAAO;AAAA,QACP,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAI,SAAU,MAAM;AAAA,QAC3B,QAAI,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAI,QAAS,MAAM;AAAA,MAAA;;;;"}
+{"version":3,"file":"BaseTextarea.vue.js","sources":["../../src/components/BaseTextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\ninterface Props {\n  modelValue?: string\n  placeholder?: string\n  disabled?: boolean\n  readonly?: boolean\n  error?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  rows?: number\n  resize?: 'none' | 'vertical' | 'horizontal' | 'both'\n  maxlength?: number\n  ariaDescribedby?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  disabled: false,\n  readonly: false,\n  error: false,\n  size: 'md',\n  rows: 3,\n  resize: 'vertical',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  focus: [event: FocusEvent]\n  blur: [event: FocusEvent]\n}>()\n\nfunction handleInput(event: Event) {\n  const target = event.target as HTMLTextAreaElement\n  emit('update:modelValue', target.value)\n}\n</script>\n\n<template>\n  <textarea\n    :value=\"props.modelValue\"\n    :placeholder=\"props.placeholder\"\n    :disabled=\"props.disabled\"\n    :readonly=\"props.readonly\"\n    :rows=\"props.rows\"\n    :maxlength=\"props.maxlength\"\n    :aria-invalid=\"props.error || undefined\"\n    :aria-describedby=\"props.ariaDescribedby || undefined\"\n    :class=\"[\n      'mld-textarea',\n      `mld-textarea--${props.size}`,\n      `mld-textarea--resize-${props.resize}`,\n      props.error ? 'mld-textarea--error' : '',\n      props.disabled ? 'mld-textarea--disabled' : '',\n    ]\"\n    @input=\"handleInput\"\n    @focus=\"emit('focus', $event)\"\n    @blur=\"emit('blur', $event)\"\n  />\n</template>\n\n<style>\n@import '../styles/components/textarea.css';\n</style>\n"],"names":["_createElementBlock","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;;;;AAcA,UAAM,QAAQ;AASd,UAAM,OAAO;AAMb,aAAS,YAAY,OAAc;AACjC,YAAM,SAAS,MAAM;AACrB,WAAK,qBAAqB,OAAO,KAAK;AAAA,IACxC;;0BAIEA,mBAmBE,YAAA;AAAA,QAlBC,OAAO,MAAM;AAAA,QACb,aAAa,MAAM;AAAA,QACnB,UAAU,MAAM;AAAA,QAChB,UAAU,MAAM;AAAA,QAChB,MAAM,MAAM;AAAA,QACZ,WAAW,MAAM;AAAA,QACjB,gBAAc,MAAM,SAAS;AAAA,QAC7B,oBAAkB,MAAM,mBAAmB;AAAA,QAC3C,OAAKC,eAAA;AAAA;UAAiD,iBAAA,MAAM,IAAI;AAAA,UAAkC,wBAAA,MAAM,MAAM;AAAA,UAAU,MAAM,QAAK,wBAAA;AAAA,UAAqC,MAAM,WAAQ,2BAAA;AAAA,QAAA;QAOtL,SAAO;AAAA,QACP,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAI,SAAU,MAAM;AAAA,QAC3B,QAAI,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAI,QAAS,MAAM;AAAA,MAAA;;;;"}

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

@@ -0,0 +1,8 @@
+interface Props {
+    code: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: "sm" | "md" | "lg";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/dist/components/ExperimentCodeBadge.vue.js

@@ -0,0 +1,19 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, toDisplayString } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ExperimentCodeBadge",
+  props: {
+    code: {},
+    size: { default: "md" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(["mld-exp-code", `mld-exp-code--${__props.size}`])
+      }, toDisplayString(__props.code), 3);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=ExperimentCodeBadge.vue.js.map

package/dist/components/ExperimentCodeBadge.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExperimentCodeBadge.vue.js","sources":["../../src/components/ExperimentCodeBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\ninterface Props {\n  code: string\n  size?: 'sm' | 'md' | 'lg'\n}\n\nwithDefaults(defineProps<Props>(), {\n  size: 'md',\n})\n</script>\n\n<template>\n  <span :class=\"['mld-exp-code', `mld-exp-code--${size}`]\">\n    {{ code }}\n  </span>\n</template>\n\n<style>\n@import '../styles/components/experiment-code-badge.css';\n</style>\n"],"names":["_createElementBlock"],"mappings":";;;;;;;;;0BAYEA,mBAEO,QAAA;AAAA,QAFA,wDAAyC,QAAA,IAAI,EAAA,CAAA;AAAA,MAAA,mBAC/C,QAAA,IAAI,GAAA,CAAA;AAAA;;;"}

package/dist/components/ExperimentCodeBadge.vue3.js

@@ -0,0 +1,6 @@
+import _sfc_main from "./ExperimentCodeBadge.vue.js";
+/* empty css                         */
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=ExperimentCodeBadge.vue3.js.map

package/dist/components/ExperimentCodeBadge.vue3.js.map

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

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

@@ -0,0 +1,29 @@
+import { TreeNode, DataFrameColumn, SummaryData } from '../types';
+interface Props {
+    treeData: TreeNode[];
+    tableData?: Record<string, unknown>[];
+    tableColumns?: DataFrameColumn[] | undefined;
+    summaryData?: SummaryData | null;
+    defaultView?: 'summary' | 'tree' | 'table';
+    title?: string;
+    pluginName?: string;
+    pluginRoutePrefix?: string;
+    experimentId?: number;
+    loading?: boolean;
+    downloadJsonUrl?: string;
+    downloadCsvUrl?: string;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "open-plugin": () => any;
+    "download-json": () => any;
+    "download-csv": () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onOpen-plugin"?: (() => any) | undefined;
+    "onDownload-json"?: (() => any) | undefined;
+    "onDownload-csv"?: (() => any) | undefined;
+}>, {
+    loading: boolean;
+    title: string;
+    defaultView: "summary" | "tree" | "table";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;