@vcsh/kern-vue-kit/kern-vue-kit.js

Dieses Repository enthält die VUE-Implementation des KERN Design-Systems.

import { defineComponent, computed, createElementBlock, openBlock, mergeProps, renderSlot, createElementVNode, createVNode, withCtx, createTextVNode, toDisplayString, watchEffect, createCommentVNode, createBlock, normalizeClass, mergeModels, useModel, ref, watch, Fragment, renderList, withModifiers, withDirectives, vModelRadio, vModelDynamic, vModelText, vModelSelect } from "vue";
const _sfc_main$C = /* @__PURE__ */ defineComponent({
  __name: "KernBody",
  props: {
    size: { default: "medium" },
    bold: { type: Boolean, default: false }
  },
  setup(__props) {
    const props = __props;
    const sizeClass = computed(() => {
      return props.size !== "medium" ? `kern-body--${props.size}` : "";
    });
    const boldClass = computed(() => {
      return props.bold ? "kern-body--bold" : "";
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("p", mergeProps({
        class: `kern-body ${sizeClass.value} ${boldClass.value}`
      }, _ctx.$attrs), [
        renderSlot(_ctx.$slots, "default")
      ], 16);
    };
  }
});
const _sfc_main$B = /* @__PURE__ */ defineComponent({
  __name: "KernTitle",
  props: {
    size: { default: "medium" }
  },
  setup(__props) {
    const props = __props;
    const sizeClass = computed(() => {
      return props.size !== "medium" ? `kern-title--${props.size}` : "kern-title";
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("p", mergeProps({ class: sizeClass.value }, _ctx.$attrs), [
        renderSlot(_ctx.$slots, "default")
      ], 16);
    };
  }
});
const _hoisted_1$m = ["open"];
const _hoisted_2$i = { class: "kern-accordion__header" };
const _hoisted_3$c = { class: "kern-accordion__body" };
const _sfc_main$A = /* @__PURE__ */ defineComponent({
  __name: "KernAccordion",
  props: {
    label: { default: "" },
    open: { type: Boolean, default: false }
  },
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("details", mergeProps({
        class: "kern-accordion",
        open: __props.open
      }, _ctx.$attrs), [
        createElementVNode("summary", _hoisted_2$i, [
          createVNode(_sfc_main$B, null, {
            default: withCtx(() => [
              createTextVNode(toDisplayString(__props.label), 1)
            ]),
            _: 1
          })
        ]),
        createElementVNode("section", _hoisted_3$c, [
          createVNode(_sfc_main$C, null, {
            default: withCtx(() => [
              renderSlot(_ctx.$slots, "default")
            ]),
            _: 3
          })
        ])
      ], 16, _hoisted_1$m);
    };
  }
});
const _sfc_main$z = {
  name: "KernAccordionGroup"
};
const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1$l = { class: "kern-accordion-group" };
function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", _hoisted_1$l, [
    renderSlot(_ctx.$slots, "default")
  ]);
}
const KernAccordionGroup = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["render", _sfc_render$7]]);
const _sfc_main$y = /* @__PURE__ */ defineComponent({
  __name: "KernIcon",
  props: {
    icon: {},
    size: { default: "medium" }
  },
  setup(__props) {
    const allowedIcons = [
      "home",
      "arrow-up",
      "arrow-down",
      "arrow-forward",
      "arrow-back",
      "info",
      "success",
      "calendar-today",
      "warning",
      "danger",
      "open-in-new",
      "download",
      "logout",
      "checklist",
      "mail",
      "edit",
      "sign-language",
      "easy-language",
      "autorenew",
      "add",
      "close",
      "delete",
      "search",
      "question-mark",
      "more-vert",
      "content-copy",
      "visibility",
      "visibility-off",
      "check",
      "drive-folder-upload",
      "chevron-left",
      "chevron-right",
      "keyboard-double-arrow-left",
      "keyboard-double-arrow-right",
      "brightness-medium",
      "light-mode",
      "dark-mode",
      "help"
    ];
    const allowedIconSet = new Set(allowedIcons);
    const props = __props;
    const safeIcon = computed(() => allowedIconSet.has(props.icon) ? props.icon : "help");
    const iconClass = computed(() => `kern-icon--${safeIcon.value}`);
    const sizeClass = computed(() => `kern-icon--${props.size}`);
    watchEffect(() => {
      if (!allowedIconSet.has(props.icon)) {
        console.warn(`[KernIcon] Invalid icon "${props.icon}". Falling back to "help". Allowed icons: ${[...allowedIconSet].join(", ")}`);
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("span", mergeProps({
        class: `kern-icon ${iconClass.value} ${sizeClass.value}`,
        "aria-hidden": "true"
      }, _ctx.$attrs), null, 16);
    };
  }
});
const _hoisted_1$k = { class: "kern-alert__header" };
const _hoisted_2$h = {
  key: 0,
  class: "kern-alert__body"
};
const _sfc_main$x = /* @__PURE__ */ defineComponent({
  __name: "KernAlert",
  props: {
    text: { default: "" },
    variant: { default: "info" }
  },
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", mergeProps({
        class: `kern-alert kern-alert--${__props.variant}`,
        role: "alert"
      }, _ctx.$attrs), [
        createElementVNode("div", _hoisted_1$k, [
          createVNode(_sfc_main$y, { icon: __props.variant }, null, 8, ["icon"]),
          createVNode(_sfc_main$B, null, {
            default: withCtx(() => [
              createTextVNode(toDisplayString(__props.text), 1)
            ]),
            _: 1
          })
        ]),
        _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_2$h, [
          createVNode(_sfc_main$C, null, {
            default: withCtx(() => [
              renderSlot(_ctx.$slots, "default")
            ]),
            _: 3
          })
        ])) : createCommentVNode("", true)
      ], 16);
    };
  }
});
const _hoisted_1$j = { class: "kern-label kern-label--small" };
const _sfc_main$w = /* @__PURE__ */ defineComponent({
  __name: "KernBadge",
  props: {
    text: { default: "" },
    variant: { default: "info" },
    icon: {}
  },
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("span", mergeProps({
        class: "kern-badge kern-badge--" + __props.variant
      }, _ctx.$attrs), [
        __props.icon ? (openBlock(), createBlock(_sfc_main$y, {
          key: 0,
          icon: __props.icon,
          "aria-hidden": "true"
        }, null, 8, ["icon"])) : createCommentVNode("", true),
        createElementVNode("span", _hoisted_1$j, toDisplayString(__props.text), 1)
      ], 16);
    };
  }
});
const _hoisted_1$i = ["disabled"];
const _sfc_main$v = /* @__PURE__ */ defineComponent({
  __name: "KernButton",
  props: {
    label: { default: "" },
    variant: { default: "primary" },
    icon: { default: "" },
    iconOnly: { type: Boolean, default: false },
    iconPosition: { default: "left" },
    iconSize: { default: "small" },
    block: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false }
  },
  setup(__props) {
    const props = __props;
    const iconOnlyClass = computed(() => {
      return props.iconOnly ? "kern-sr-only" : "";
    });
    const variantClass = computed(() => {
      return `kern-btn kern-btn--${props.variant}`;
    });
    const blockClass = computed(() => {
      return props.block ? "kern-btn--block" : "";
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("button", mergeProps({
        class: `${variantClass.value} ${blockClass.value}`,
        disabled: __props.disabled
      }, _ctx.$attrs), [
        __props.icon && __props.iconPosition === "left" ? (openBlock(), createBlock(_sfc_main$y, {
          key: 0,
          icon: __props.icon,
          size: __props.iconSize,
          "aria-hidden": "true"
        }, null, 8, ["icon", "size"])) : createCommentVNode("", true),
        createElementVNode("span", {
          class: normalizeClass(`kern-label ${iconOnlyClass.value}`)
        }, toDisplayString(__props.label), 3),
        __props.icon && __props.iconPosition === "right" ? (openBlock(), createBlock(_sfc_main$y, {
          key: 1,
          icon: __props.icon,
          size: __props.iconSize,
          "aria-hidden": "true"
        }, null, 8, ["icon", "size"])) : createCommentVNode("", true)
      ], 16, _hoisted_1$i);
    };
  }
});
const _sfc_main$u = /* @__PURE__ */ defineComponent({
  __name: "KernPreline",
  props: {
    size: { default: "default" }
  },
  setup(__props) {
    const props = __props;
    const sizeClass = computed(() => {
      if (props.size === "default") return "";
      return `kern-preline--${props.size}`;
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("p", mergeProps({
        class: ["kern-preline", sizeClass.value]
      }, _ctx.$attrs), [
        renderSlot(_ctx.$slots, "default")
      ], 16);
    };
  }
});
const _sfc_main$t = /* @__PURE__ */ defineComponent({
  __name: "KernSubline",
  props: {
    size: { default: "default" }
  },
  setup(__props) {
    const props = __props;
    const sizeClass = computed(() => {
      if (props.size === "default") return "";
      return `kern-subline--${props.size}`;
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("p", mergeProps({
        class: ["kern-subline", sizeClass.value]
      }, _ctx.$attrs), [
        renderSlot(_ctx.$slots, "default")
      ], 16);
    };
  }
});
const _hoisted_1$h = {
  key: 0,
  class: "kern-card__media"
};
const _hoisted_2$g = { class: "kern-card__container" };
const _hoisted_3$b = { class: "kern-card__header" };
const _hoisted_4$8 = {
  key: 0,
  href: "#",
  class: "kern-link--stretched"
};
const _hoisted_5$6 = { key: 1 };
const _hoisted_6$2 = {
  key: 0,
  class: "kern-card__body"
};
const _hoisted_7$1 = {
  key: 1,
  class: "kern-card__footer"
};
const _sfc_main$s = /* @__PURE__ */ defineComponent({
  __name: "KernCard",
  props: {
    preline: { default: "" },
    title: { default: "" },
    subline: { default: "" },
    hug: { type: Boolean, default: false },
    active: { type: Boolean, default: false },
    size: { default: void 0 }
  },
  setup(__props) {
    const props = __props;
    const cardClasses = computed(() => [
      "kern-card",
      {
        "kern-card--hug": props.hug,
        "kern-card--active": props.active,
        "kern-link--stretched": props.active,
        "kern-card--small": props.size === "small",
        "kern-card--large": props.size === "large"
      }
    ]);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("article", mergeProps({ class: cardClasses.value }, _ctx.$attrs), [
        _ctx.$slots.content ? (openBlock(), createElementBlock("div", _hoisted_1$h, [
          renderSlot(_ctx.$slots, "content")
        ])) : createCommentVNode("", true),
        createElementVNode("div", _hoisted_2$g, [
          createElementVNode("header", _hoisted_3$b, [
            __props.preline ? (openBlock(), createBlock(_sfc_main$u, { key: 0 }, {
              default: withCtx(() => [
                createTextVNode(toDisplayString(__props.preline), 1)
              ]),
              _: 1
            })) : createCommentVNode("", true),
            __props.title ? (openBlock(), createBlock(_sfc_main$B, {
              key: 1,
              class: "kern-title"
            }, {
              default: withCtx(() => [
                __props.active ? (openBlock(), createElementBlock("a", _hoisted_4$8, toDisplayString(__props.title), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$6, toDisplayString(__props.title), 1))
              ]),
              _: 1
            })) : createCommentVNode("", true),
            __props.subline ? (openBlock(), createBlock(_sfc_main$t, {
              key: 2,
              class: "kern-subtitle"
            }, {
              default: withCtx(() => [
                createTextVNode(toDisplayString(__props.subline), 1)
              ]),
              _: 1
            })) : createCommentVNode("", true)
          ]),
          _ctx.$slots.body || _ctx.$slots.default ? (openBlock(), createElementBlock("section", _hoisted_6$2, [
            !_ctx.$slots.default ? renderSlot(_ctx.$slots, "body", { key: 0 }) : createCommentVNode("", true),
            !_ctx.$slots.body ? renderSlot(_ctx.$slots, "default", { key: 1 }) : createCommentVNode("", true)
          ])) : createCommentVNode("", true),
          _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_7$1, [
            renderSlot(_ctx.$slots, "footer")
          ])) : createCommentVNode("", true)
        ])
      ], 16);
    };
  }
});
const __default__ = {
  name: "KernError"
};
const _sfc_main$r = /* @__PURE__ */ defineComponent({
  ...__default__,
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("p", mergeProps({
        id: "kern-error",
        class: "kern-error",
        role: "alert"
      }, _ctx.$attrs), [
        createVNode(_sfc_main$y, {
          icon: "danger",
          "aria-hidden": "true"
        }),
        createVNode(_sfc_main$C, null, {
          default: withCtx(() => [
            renderSlot(_ctx.$slots, "default")
          ]),
          _: 3
        })
      ], 16);
    };
  }
});
const _hoisted_1$g = {
  key: 0,
  class: "kern-label"
};
const _hoisted_2$f = {
  key: 0,
  class: "kern-label__optional"
};
const _hoisted_3$a = {
  key: 1,
  class: "kern-hint"
};
const _sfc_main$q = /* @__PURE__ */ defineComponent({
  __name: "KernFieldset",
  props: {
    label: { default: "" },
    error: { default: "" },
    horizontal: { type: Boolean, default: false },
    optional: { type: Boolean, default: false },
    hint: { default: "" },
    optionalText: {}
  },
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("fieldset", mergeProps({
        class: "kern-fieldset " + (__props.error ? "kern-fieldset--error" : "")
      }, _ctx.$attrs), [
        __props.label ? (openBlock(), createElementBlock("legend", _hoisted_1$g, [
          createTextVNode(toDisplayString(__props.label) + " ", 1),
          __props.optional ? (openBlock(), createElementBlock("span", _hoisted_2$f, "- " + toDisplayString(__props.optionalText ?? "Optional"), 1)) : createCommentVNode("", true)
        ])) : createCommentVNode("", true),
        __props.hint ? (openBlock(), createElementBlock("div", _hoisted_3$a, toDisplayString(__props.hint), 1)) : createCommentVNode("", true),
        createElementVNode("div", {
          class: normalizeClass("kern-fieldset__body " + (__props.horizontal ? "kern-fieldset__body--horizontal" : ""))
        }, [
          renderSlot(_ctx.$slots, "default")
        ], 2),
        __props.error ? (openBlock(), createBlock(_sfc_main$r, { key: 2 }, {
          default: withCtx(() => [
            createTextVNode(toDisplayString(__props.error), 1)
          ]),
          _: 1
        })) : createCommentVNode("", true)
      ], 16);
    };
  }
});
const _hoisted_1$f = { class: "kern-form-input" };
const _hoisted_2$e = ["for"];
const _hoisted_3$9 = ["id", "disabled", "value", "readonly"];
const _hoisted_4$7 = { class: "kern-form-input" };
const _hoisted_5$5 = ["for"];
const _hoisted_6$1 = ["id", "disabled", "value", "readonly"];
const _hoisted_7 = { class: "kern-form-input" };
const _hoisted_8 = ["for"];
const _hoisted_9 = ["id", "disabled", "value", "readonly"];
const _sfc_main$p = /* @__PURE__ */ defineComponent({
  __name: "KernDateInput",
  props: /* @__PURE__ */ mergeModels({
    id: {},
    label: {},
    disabled: { type: Boolean },
    readonly: { type: Boolean },
    error: {},
    hint: {},
    optional: { type: Boolean },
    optionalText: {}
  }, {
    "modelValue": {},
    "modelModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(["blur", "focus"], ["update:modelValue"]),
  setup(__props, { emit: __emit }) {
    const props = __props;
    const modelValue = useModel(__props, "modelValue");
    const emit = __emit;
    const dayValue = ref("");
    const monthValue = ref("");
    const yearValue = ref("");
    const inputErrorClass = computed(() => {
      return props.error ? "kern-form-input__input--error" : "";
    });
    watch(modelValue, (newValue) => {
      if (newValue) {
        dayValue.value = newValue.getDate().toString().padStart(2, "0");
        monthValue.value = (newValue.getMonth() + 1).toString().padStart(2, "0");
        yearValue.value = newValue.getFullYear().toString();
      } else {
        dayValue.value = "";
        monthValue.value = "";
        yearValue.value = "";
      }
    }, { immediate: true });
    const constructDate = () => {
      const day = parseInt(dayValue.value);
      const month = parseInt(monthValue.value);
      const year = parseInt(yearValue.value);
      if (!day || !month || !year) {
        return null;
      }
      if (day < 1 || day > 31 || month < 1 || month > 12 || year < 1900 || year > 2100) {
        return null;
      }
      const date = new Date(year, month - 1, day);
      if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
        return null;
      }
      return date;
    };
    const updateModelValue = () => {
      const date = constructDate();
      modelValue.value = date;
    };
    const handleBlur = (event) => {
      emit("blur", event);
    };
    const handleFocus = (event) => {
      emit("focus", event);
    };
    const handleDayChange = (event) => {
      const target = event.target;
      let value = target.value.replace(/\D/g, "");
      if (value.length > 2) {
        value = value.slice(0, 2);
      }
      const day = parseInt(value);
      if (day > 31) {
        value = "31";
      }
      dayValue.value = value;
      updateModelValue();
    };
    const handleMonthChange = (event) => {
      const target = event.target;
      let value = target.value.replace(/\D/g, "");
      if (value.length > 2) {
        value = value.slice(0, 2);
      }
      const month = parseInt(value);
      if (month > 12) {
        value = "12";
      }
      monthValue.value = value;
      updateModelValue();
    };
    const handleYearChange = (event) => {
      const target = event.target;
      let value = target.value.replace(/\D/g, "");
      if (value.length > 4) {
        value = value.slice(0, 4);
      }
      yearValue.value = value;
      updateModelValue();
    };
    return (_ctx, _cache) => {
      return openBlock(), createBlock(_sfc_main$q, mergeProps({
        label: __props.label,
        error: __props.error,
        optional: __props.optional,
        optionalText: __props.optionalText,
        horizontal: true,
        hint: __props.hint
      }, _ctx.$attrs), {
        default: withCtx(() => [
          createElementVNode("div", _hoisted_1$f, [
            createElementVNode("label", {
              class: "kern-label",
              for: __props.id + "day"
            }, "Tag", 8, _hoisted_2$e),
            createElementVNode("input", {
              id: __props.id + "day",
              class: normalizeClass(`kern-form-input__input kern-form-input__input--width-2 ${inputErrorClass.value}`),
              type: "text",
              inputmode: "numeric",
              disabled: __props.disabled,
              value: dayValue.value,
              maxlength: "2",
              readonly: __props.readonly,
              onBlur: handleBlur,
              onFocus: handleFocus,
              onInput: handleDayChange
            }, null, 42, _hoisted_3$9)
          ]),
          createElementVNode("div", _hoisted_4$7, [
            createElementVNode("label", {
              class: "kern-label",
              for: __props.id + "month"
            }, "Monat", 8, _hoisted_5$5),
            createElementVNode("input", {
              id: __props.id + "month",
              class: normalizeClass(`kern-form-input__input kern-form-input__input--width-2 ${inputErrorClass.value}`),
              type: "text",
              inputmode: "numeric",
              disabled: __props.disabled,
              value: monthValue.value,
              maxlength: "2",
              readonly: __props.readonly,
              onBlur: handleBlur,
              onFocus: handleFocus,
              onInput: handleMonthChange
            }, null, 42, _hoisted_6$1)
          ]),
          createElementVNode("div", _hoisted_7, [
            createElementVNode("label", {
              class: "kern-label",
              for: __props.id + "year"
            }, "Jahr", 8, _hoisted_8),
            createElementVNode("input", {
              id: __props.id + "year",
              class: normalizeClass(`kern-form-input__input kern-form-input__input--width-4 ${inputErrorClass.value}`),
              type: "text",
              inputmode: "numeric",
              disabled: __props.disabled,
              value: yearValue.value,
              maxlength: "4",
              readonly: __props.readonly,
              onBlur: handleBlur,
              onFocus: handleFocus,
              onInput: handleYearChange
            }, null, 42, _hoisted_9)
          ])
        ]),
        _: 1
      }, 16, ["label", "error", "optional", "optionalText", "hint"]);
    };
  }
});
const _hoisted_1$e = { class: "kern-description-list-item__key" };
const _hoisted_2$d = { class: "kern-description-list-item__value" };
const _hoisted_3$8 = ["innerHTML"];
const _sfc_main$o = /* @__PURE__ */ defineComponent({
  __name: "KernDescriptionList",
  props: {
    items: { default: () => [] },
    column: { type: Boolean, default: false }
  },
  setup(__props) {
    const props = __props;
    const dlClass = computed(() => [
      "kern-description-list",
      { "kern-description-list--col": props.column }
    ]);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("dl", mergeProps({ class: dlClass.value }, _ctx.$attrs), [
        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
          return openBlock(), createElementBlock("div", {
            key: item.key,
            class: "kern-description-list-item"
          }, [
            createElementVNode("dt", _hoisted_1$e, toDisplayString(item.key), 1),
            createElementVNode("dd", _hoisted_2$d, [
              createElementVNode("div", {
                innerHTML: item.value
              }, null, 8, _hoisted_3$8)
            ])
          ]);
        }), 128))
      ], 16);
    };
  }
});
const _hoisted_1$d = ["id", "aria-labelledby"];
const _hoisted_2$c = { class: "kern-dialog__header" };
const _hoisted_3$7 = { class: "kern-title kern-title--large" };
const _hoisted_4$6 = { class: "kern-dialog__body" };
const _hoisted_5$4 = {
  key: 0,
  class: "kern-dialog__footer"
};
const _sfc_main$n = /* @__PURE__ */ defineComponent({
  __name: "KernDialog",
  props: {
    id: {
      required: true,
      type: String
    },
    title: {
      type: String,
      default: ""
    },
    confirmText: {
      type: String
    },
    cancelText: {
      type: String
    },
    disableConfirm: {
      type: Boolean,
      default: false
    },
    disableCancel: {
      type: Boolean,
      default: false
    }
  },
  emits: ["confirm", "close"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const hasFooter = computed(() => {
      return props.cancelText !== void 0 || props.confirmText !== void 0;
    });
    const showDialog = () => {
      if (document) {
        const dialog = document.querySelector(`#${props.id}`);
        if (dialog) {
          dialog.showModal();
        }
      }
    };
    const closeDialog = () => {
      if (document) {
        const dialog = document.querySelector(`#${props.id}`);
        if (dialog) {
          dialog.close();
          emit("close");
        }
      }
    };
    const handleConfirm = () => {
      emit("confirm");
    };
    __expose({ showDialog, closeDialog });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("dialog", mergeProps({
        id: __props.id,
        class: "kern-dialog",
        "aria-modal": "true",
        "aria-labelledby": __props.id + "_heading"
      }, _ctx.$attrs), [
        createElementVNode("form", {
          onSubmit: _cache[0] || (_cache[0] = withModifiers(() => {
          }, ["prevent"]))
        }, [
          createElementVNode("header", _hoisted_2$c, [
            createElementVNode("h2", _hoisted_3$7, toDisplayString(__props.title), 1),
            createVNode(_sfc_main$v, {
              variant: "tertiary",
              icon: "close",
              "icon-size": "large",
              "icon-only": "",
              onClick: closeDialog
            })
          ]),
          createElementVNode("section", _hoisted_4$6, [
            createVNode(_sfc_main$C, null, {
              default: withCtx(() => [
                renderSlot(_ctx.$slots, "default")
              ]),
              _: 3
            })
          ]),
          hasFooter.value ? (openBlock(), createElementBlock("footer", _hoisted_5$4, [
            __props.cancelText ? (openBlock(), createBlock(_sfc_main$v, {
              key: 0,
              disabled: __props.disableCancel,
              variant: "secondary",
              label: __props.cancelText,
              onClick: closeDialog
            }, null, 8, ["disabled", "label"])) : createCommentVNode("", true),
            __props.confirmText ? (openBlock(), createBlock(_sfc_main$v, {
              key: 1,
              disabled: __props.disableConfirm,
              variant: "primary",
              label: __props.confirmText,
              type: "submit",
              onClick: handleConfirm
            }, null, 8, ["disabled", "label"])) : createCommentVNode("", true)
          ])) : createCommentVNode("", true)
        ], 32)
      ], 16, _hoisted_1$d);
    };
  }
});
const _sfc_main$m = {
  name: "KernDivider"
};
function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("hr", mergeProps({
    class: "kern-divider",
    "aria-hidden": "true"
  }, _ctx.$attrs), null, 16);
}
const KernDivider = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$6]]);
const _sfc_main$l = {
  name: "KernLoader"
};
function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", mergeProps({
    class: "kern-loader kern-loader--visible",
    role: "status"
  }, _ctx.$attrs), [..._cache[0] || (_cache[0] = [
    createElementVNode("span", { class: "kern-sr-only" }, null, -1)
  ])], 16);
}
const KernLoader = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$5]]);
const _hoisted_1$c = ["for"];
const _hoisted_2$b = ["id", "value", "max"];
const _hoisted_3$6 = ["for"];
const _sfc_main$k = /* @__PURE__ */ defineComponent({
  __name: "KernProgress",
  props: {
    id: {},
    label: { default: "" },
    labelPosition: { default: "top" },
    value: { default: 0 },
    max: { default: 100 }
  },
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", mergeProps({ class: "kern-progress" }, _ctx.$attrs), [
        __props.labelPosition !== "bottom" && __props.label ? (openBlock(), createElementBlock("label", {
          key: 0,
          class: "kern-label",
          for: __props.id
        }, toDisplayString(__props.label), 9, _hoisted_1$c)) : createCommentVNode("", true),
        createElementVNode("progress", {
          id: __props.id,
          value: __props.value,
          max: __props.max
        }, null, 8, _hoisted_2$b),
        __props.labelPosition === "bottom" && __props.label ? (openBlock(), createElementBlock("label", {
          key: 1,
          class: "kern-label",
          for: __props.id
        }, toDisplayString(__props.label), 9, _hoisted_3$6)) : createCommentVNode("", true)
      ], 16);
    };
  }
});
const _sfc_main$j = {
  name: "KernSummaryGroup",
  props: {
    title: {
      default: "",
      type: String
    }
  }
};
const _hoisted_1$b = {
  key: 0,
  class: "kern-summary-group__header"
};
const _hoisted_2$a = { class: "kern-heading-medium" };
function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", mergeProps({ class: "kern-summary-group" }, _ctx.$attrs), [
    $props.title ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
      createElementVNode("h2", _hoisted_2$a, toDisplayString($props.title), 1)
    ])) : createCommentVNode("", true),
    renderSlot(_ctx.$slots, "default")
  ], 16);
}
const KernSummaryGroup = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$4]]);
const _sfc_main$i = {
  name: "KernSummary",
  props: {
    titleNumber: {
      type: String
    },
    title: {
      type: String
    }
  }
};
const _hoisted_1$a = {
  key: 0,
  class: "kern-summary__header"
};
const _hoisted_2$9 = {
  key: 0,
  class: "kern-number"
};
const _hoisted_3$5 = {
  key: 1,
  class: "kern-title kern-title--small"
};
const _hoisted_4$5 = {
  key: 1,
  class: "kern-summary__body"
};
const _hoisted_5$3 = {
  key: 0,
  class: "kern-summary__actions"
};
function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", mergeProps({ class: "kern-summary" }, _ctx.$attrs), [
    $props.titleNumber || $props.title ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
      $props.titleNumber ? (openBlock(), createElementBlock("span", _hoisted_2$9, toDisplayString($props.titleNumber), 1)) : createCommentVNode("", true),
      $props.title ? (openBlock(), createElementBlock("h3", _hoisted_3$5, toDisplayString($props.title), 1)) : createCommentVNode("", true)
    ])) : createCommentVNode("", true),
    _ctx.$slots.body || _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
      renderSlot(_ctx.$slots, "body"),
      _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_5$3, [
        renderSlot(_ctx.$slots, "actions")
      ])) : createCommentVNode("", true)
    ])) : createCommentVNode("", true)
  ], 16);
}
const KernSummary = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$3]]);
const _sfc_main$h = {
  name: "KernTaskListGroup"
};
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", mergeProps({ class: "kern-task-list-group" }, _ctx.$attrs), [
    renderSlot(_ctx.$slots, "default")
  ], 16);
}
const KernTaskListGroup = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$2]]);
const _sfc_main$g = /* @__PURE__ */ defineComponent({
  __name: "KernHeading",
  props: {
    size: { default: "x-large" }
  },
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(Fragment, null, [
        __props.size === "display" ? (openBlock(), createElementBlock("h1", mergeProps({
          key: 0,
          class: "kern-heading-display"
        }, _ctx.$attrs), [
          renderSlot(_ctx.$slots, "default")
        ], 16)) : createCommentVNode("", true),
        __props.size === "x-large" ? (openBlock(), createElementBlock("h2", mergeProps({
          key: 1,
          class: "kern-heading-x-large"
        }, _ctx.$attrs), [
          renderSlot(_ctx.$slots, "default")
        ], 16)) : createCommentVNode("", true),
        __props.size === "large" ? (openBlock(), createElementBlock("h3", mergeProps({
          key: 2,
          class: "kern-heading-large"
        }, _ctx.$attrs), [
          renderSlot(_ctx.$slots, "default")
        ], 16)) : createCommentVNode("", true),
        __props.size === "medium" ? (openBlock(), createElementBlock("h4", mergeProps({
          key: 3,
          class: "kern-heading-medium"
        }, _ctx.$attrs), [
          renderSlot(_ctx.$slots, "default")
        ], 16)) : createCommentVNode("", true),
        __props.size === "small" ? (openBlock(), createElementBlock("h5", mergeProps({
          key: 4,
          class: "kern-heading-small"
        }, _ctx.$attrs), [
          renderSlot(_ctx.$slots, "default")
        ], 16)) : createCommentVNode("", true)
      ], 64);
    };
  }
});
const _hoisted_1$9 = { class: "kern-task-list__header" };
const _hoisted_2$8 = { class: "kern-task-list__list" };
const _sfc_main$f = /* @__PURE__ */ defineComponent({
  __name: "KernTaskList",
  props: {
    title: { default: "" }
  },
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", mergeProps({ class: "kern-task-list" }, _ctx.$attrs), [
        createElementVNode("div", _hoisted_1$9, [
          createVNode(_sfc_main$g, { size: "medium" }, {
            default: withCtx(() => [
              createTextVNode(toDisplayString(__props.title), 1)
            ]),
            _: 1
          })
        ]),
        createElementVNode("ul", _hoisted_2$8, [
          renderSlot(_ctx.$slots, "default")
        ])
      ], 16);
    };
  }
});
const _sfc_main$e = {
  name: "KernNumber"
};
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", mergeProps({ class: "kern-number" }, _ctx.$attrs), [
    renderSlot(_ctx.$slots, "default")
  ], 16);
}
const KernNumber = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$1]]);
const _hoisted_1$8 = { class: "kern-task-list__title" };
const _hoisted_2$7 = {
  key: 0,
  class: "kern-task-list__status"
};
const _sfc_main$d = /* @__PURE__ */ defineComponent({
  __name: "KernTaskListItem",
  props: {
    number: {}
  },
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("li", mergeProps({ class: "kern-task-list__item" }, _ctx.$attrs), [
        __props.number ? (openBlock(), createBlock(KernNumber, { key: 0 }, {
          default: withCtx(() => [
            createTextVNode(toDisplayString(__props.number), 1)
          ]),
          _: 1
        })) : createCommentVNode("", true),
        createElementVNode("div", _hoisted_1$8, [
          renderSlot(_ctx.$slots, "title"),
          _ctx.$slots.status ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
            renderSlot(_ctx.$slots, "status")
          ])) : createCommentVNode("", true)
        ])
      ], 16);
    };
  }
});
const _hoisted_1$7 = { class: "kern-table kern-table--striped" };
const _hoisted_2$6 = { class: "kern-title" };
const _hoisted_3$4 = { class: "kern-table__head" };
const _hoisted_4$4 = { class: "kern-table__row" };
const _hoisted_5$2 = { class: "kern-table__body" };
const _sfc_main$c = /* @__PURE__ */ defineComponent({
  __name: "KernTable",
  props: {
    title: {},
    columns: {},
    rows: {}
  },
  setup(__props) {
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", mergeProps({ class: "kern-table-responsive" }, _ctx.$attrs), [
        createElementVNode("table", _hoisted_1$7, [
          createElementVNode("caption", _hoisted_2$6, toDisplayString(__props.title), 1),
          createElementVNode("thead", _hoisted_3$4, [
            createElementVNode("tr", _hoisted_4$4, [
              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column, index) => {
                return openBlock(), createElementBlock("th", {
                  key: index,
                  scope: "col",
                  class: normalizeClass(["kern-table__header", column.numeric ? "kern-table__header--numeric" : ""])
                }, toDisplayString(column.label), 3);
              }), 128))
            ])
          ]),
          createElementVNode("tbody", _hoisted_5$2, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.rows, (row, rowIndex) => {
              return openBlock(), createElementBlock("tr", {
                key: rowIndex,
                class: "kern-table__row"
              }, [
                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column, colIndex) => {
                  return openBlock(), createElementBlock("td", {
                    key: colIndex,
                    class: normalizeClass(["kern-table__cell", column.numeric ? "kern-table__cell--numeric" : ""])
                  }, [
                    column.field === "actions" ? renderSlot(_ctx.$slots, "actions", {
                      key: 0,
                      row
                    }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                      createTextVNode(toDisplayString(row[column.field]), 1)
                    ], 64))
                  ], 2);
                }), 128))
              ]);
            }), 128))
          ])
        ])
      ], 16);
    };
  }
});
const _hoisted_1$6 = ["id", "checked", "disabled", "name"];
const _hoisted_2$5 = ["for"];
const _sfc_main$b = /* @__PURE__ */ defineComponent({
  __name: "KernCheckbox",
  props: /* @__PURE__ */ mergeModels({
    label: { default: "" },
    id: {},
    error: { default: "" },
    disabled: { type: Boolean, default: false },
    name: {}
  }, {
    "modelValue": { type: Boolean, ...{
      default: false
    } },
    "modelModifiers": {}
  }),
  emits: ["update:modelValue"],
  setup(__props) {
    const props = __props;
    const model = useModel(__props, "modelValue");
    const formCheckClass = computed(
      () => "kern-form-check" + (props.error ? " kern-form-check--error" : "")
    );
    const checkboxClass = computed(
      () => "kern-form-check__checkbox" + (props.error ? " kern-form-check__checkbox--error" : "")
    );
    const onChange = (event) => {
      var _a;
      model.value = (_a = event.target) == null ? void 0 : _a.checked;
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(formCheckClass.value)
      }, [
        createElementVNode("input", mergeProps({
          id: __props.id,
          class: checkboxClass.value,
          type: "checkbox",
          checked: model.value,
          disabled: __props.disabled,
          name: __props.name
        }, _ctx.$attrs, { onChange }), null, 16, _hoisted_1$6),
        createElementVNode("label", {
          class: "kern-label",
          for: __props.id
        }, toDisplayString(__props.label), 9, _hoisted_2$5),
        __props.error ? (openBlock(), createBlock(_sfc_main$r, { key: 0 }, {
          default: withCtx(() => [
            createTextVNode(toDisplayString(__props.error), 1)
          ]),
          _: 1
        })) : createCommentVNode("", true)
      ], 2);
    };
  }
});
const _hoisted_1$5 = ["id", "disabled", "name", "value"];
const _hoisted_2$4 = ["for"];
const _sfc_main$a = /* @__PURE__ */ defineComponent({
  __name: "KernRadio",
  props: /* @__PURE__ */ mergeModels({
    id: {},
    label: {},
    name: {},
    value: {},
    disabled: { type: Boolean },
    error: {}
  }, {
    "modelValue": {},
    "modelModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(["update:value"], ["update:modelValue"]),
  setup(__props, { emit: __emit }) {
    const props = __props;
    const modelValue = useModel(__props, "modelValue");
    const divErrorClass = computed(() => {
      return props.error ? "kern-form-check--error" : "";
    });
    const inputErrorClass = computed(() => {
      return props.error ? "kern-form-check__radio--error" : "";
    });
    const emit = __emit;
    const onClick = (event) => {
      var _a;
      emit("update:value", (_a = event.target) == null ? void 0 : _a.checked);
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(`kern-form-check ${divErrorClass.value}`)
      }, [
        withDirectives(createElementVNode("input", mergeProps({
          id: __props.id,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
          class: `kern-form-check__radio ${inputErrorClass.value}`,
          type: "radio",
          disabled: __props.disabled,
          name: __props.name,
          value: __props.value
        }, _ctx.$attrs, { onClick }), null, 16, _hoisted_1$5), [
          [vModelRadio, modelValue.value]
        ]),
        createElementVNode("label", {
          class: "kern-label",
          for: __props.id
        }, toDisplayString(__props.label), 9, _hoisted_2$4),
        __props.error ? (openBlock(), createBlock(_sfc_main$r, { key: 0 }, {
          default: withCtx(() => [
            createTextVNode(toDisplayString(__props.error), 1)
          ]),
          _: 1
        })) : createCommentVNode("", true)
      ], 2);
    };
  }
});
const _hoisted_1$4 = ["for"];
const _hoisted_2$3 = {
  key: 0,
  class: "kern-label__optional"
};
const _hoisted_3$3 = {
  key: 0,
  class: "kern-hint"
};
const _hoisted_4$3 = ["id", "type", "disabled", "readonly", "inputmode", "pattern"];
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
  __name: "KernInput",
  props: /* @__PURE__ */ mergeModels({
    id: {},
    label: {},
    type: {},
    disabled: { type: Boolean },
    error: {},
    hint: {},
    readonly: { type: Boolean },
    optional: { type: Boolean },
    optionalText: {},
    inputmode: {},
    pattern: {}
  }, {
    "modelValue": {},
    "modelModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(["blur", "focus"], ["update:modelValue"]),
  setup(__props, { emit: __emit }) {
    const props = __props;
    const modelValue = useModel(__props, "modelValue");
    const emit = __emit;
    const divErrorClass = computed(() => {
      return props.error ? "kern-form-input--error" : "";
    });
    const inputErrorClass = computed(() => {
      return props.error ? "kern-form-input__input--error" : "";
    });
    const handleBlur = (event) => {
      emit("blur", event);
    };
    const handleFocus = (event) => {
      emit("focus", event);
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(`kern-form-input ${divErrorClass.value}`)
      }, [
        createElementVNode("label", {
          class: "kern-label",
          for: __props.id
        }, [
          createTextVNode(toDisplayString(__props.label) + " ", 1),
          __props.optional ? (openBlock(), createElementBlock("span", _hoisted_2$3, " - " + toDisplayString(__props.optionalText ?? "Optional"), 1)) : createCommentVNode("", true)
        ], 8, _hoisted_1$4),
        __props.hint ? (openBlock(), createElementBlock("div", _hoisted_3$3, toDisplayString(__props.hint), 1)) : createCommentVNode("", true),
        withDirectives(createElementVNode("input", mergeProps({
          id: __props.id,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
          class: `kern-form-input__input ${inputErrorClass.value}`,
          type: __props.type,
          disabled: __props.disabled,
          readonly: __props.readonly,
          inputmode: __props.inputmode,
          pattern: __props.pattern
        }, _ctx.$attrs, {
          onBlur: handleBlur,
          onFocus: handleFocus
        }), null, 16, _hoisted_4$3), [
          [vModelDynamic, modelValue.value]
        ]),
        __props.error ? (openBlock(), createBlock(_sfc_main$r, { key: 1 }, {
          default: withCtx(() => [
            createTextVNode(toDisplayString(__props.error), 1)
          ]),
          _: 1
        })) : createCommentVNode("", true)
      ], 2);
    };
  }
});
const _hoisted_1$3 = ["for"];
const _hoisted_2$2 = {
  key: 0,
  class: "kern-label__optional"
};
const _hoisted_3$2 = {
  key: 0,
  class: "kern-hint"
};
const _hoisted_4$2 = ["id", "disabled"];
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
  __name: "KernTextarea",
  props: /* @__PURE__ */ mergeModels({
    id: {},
    label: {},
    type: {},
    disabled: { type: Boolean },
    error: {},
    hint: {},
    optional: { type: Boolean },
    optionalText: {}
  }, {
    "modelValue": {},
    "modelModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(["blur", "focus"], ["update:modelValue"]),
  setup(__props, { emit: __emit }) {
    const props = __props;
    const modelValue = useModel(__props, "modelValue");
    const emit = __emit;
    const divErrorClass = computed(() => {
      return props.error ? "kern-form-input--error" : "";
    });
    const inputErrorClass = computed(() => {
      return props.error ? "kern-form-input__input--error" : "";
    });
    const handleBlur = (event) => {
      emit("blur", event);
    };
    const handleFocus = (event) => {
      emit("focus", event);
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(`kern-form-input ${divErrorClass.value}`)
      }, [
        createElementVNode("label", {
          class: "kern-label",
          for: __props.id
        }, [
          createTextVNode(toDisplayString(__props.label) + " ", 1),
          __props.optional ? (openBlock(), createElementBlock("span", _hoisted_2$2, " - " + toDisplayString(__props.optionalText ?? "Optional"), 1)) : createCommentVNode("", true)
        ], 8, _hoisted_1$3),
        _ctx.$slots.hint ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
          renderSlot(_ctx.$slots, "hint")
        ])) : createCommentVNode("", true),
        withDirectives(createElementVNode("textarea", mergeProps({
          id: __props.id,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
          class: `kern-form-input__input ${inputErrorClass.value}`,
          disabled: __props.disabled
        }, _ctx.$attrs, {
          onBlur: handleBlur,
          onFocus: handleFocus
        }), null, 16, _hoisted_4$2), [
          [vModelText, modelValue.value]
        ]),
        __props.error ? (openBlock(), createBlock(_sfc_main$r, { key: 1 }, {
          default: withCtx(() => [
            createTextVNode(toDisplayString(__props.error), 1)
          ]),
          _: 1
        })) : createCommentVNode("", true)
      ], 2);
    };
  }
});
const _hoisted_1$2 = ["for"];
const _hoisted_2$1 = {
  key: 0,
  class: "kern-label__optional"
};
const _hoisted_3$1 = {
  key: 0,
  class: "kern-hint"
};
const _hoisted_4$1 = { class: "kern-form-input__select-wrapper" };
const _hoisted_5$1 = ["id", "disabled"];
const _hoisted_6 = ["value"];
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
  __name: "KernSelect",
  props: /* @__PURE__ */ mergeModels({
    id: {},
    label: {},
    type: {},
    disabled: { type: Boolean },
    error: {},
    hint: {},
    options: {},
    optional: { type: Boolean },
    optionalText: {}
  }, {
    "modelValue": {},
    "modelModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(["blur", "focus"], ["update:modelValue"]),
  setup(__props, { emit: __emit }) {
    const props = __props;
    const modelValue = useModel(__props, "modelValue");
    const divErrorClass = computed(() => {
      return props.error ? "kern-form-input--error" : "";
    });
    const inputErrorClass = computed(() => {
      return props.error ? "kern-form-input__select--error" : "";
    });
    const emit = __emit;
    const handleBlur = (event) => {
      emit("blur", event);
    };
    const handleFocus = (event) => {
      emit("focus", event);
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(`kern-form-input ${divErrorClass.value}`)
      }, [
        createElementVNode("label", {
          class: "kern-label",
          for: __props.id
        }, [
          createTextVNode(toDisplayString(__props.label) + " ", 1),
          __props.optional ? (openBlock(), createElementBlock("span", _hoisted_2$1, "- " + toDisplayString(__props.optionalText ?? "Optional"), 1)) : createCommentVNode("", true)
        ], 8, _hoisted_1$2),
        _ctx.$slots.hint ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
          renderSlot(_ctx.$slots, "hint")
        ])) : createCommentVNode("", true),
        createElementVNode("div", _hoisted_4$1, [
          withDirectives(createElementVNode("select", mergeProps({
            id: __props.id,
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
            class: `kern-form-input__select ${inputErrorClass.value}`,
            name: "select5",
            "aria-describedby": "select-hint5 kern-input-error",
            disabled: __props.disabled
          }, _ctx.$attrs, {
            onBlur: handleBlur,
            onFocus: handleFocus
          }), [
            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
              return openBlock(), createElementBlock("option", {
                key: option.label,
                value: option.value
              }, toDisplayString(option.label), 9, _hoisted_6);
            }), 128))
          ], 16, _hoisted_5$1), [
            [vModelSelect, modelValue.value]
          ])
        ]),
        __props.error ? (openBlock(), createBlock(_sfc_main$r, { key: 1 }, {
          default: withCtx(() => [
            createTextVNode(toDisplayString(__props.error), 1)
          ]),
          _: 1
        })) : createCommentVNode("", true)
      ], 2);
    };
  }
});
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
  __name: "KernLabel",
  props: {
    size: { default: "medium" }
  },
  setup(__props) {
    const props = __props;
    const sizeClass = computed(() => {
      return props.size !== "medium" ? `kern-label--${props.size}` : "kern-label";
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock