@acoyfellow/kumo-vue 0.0.1

package/package/components/label.d.ts

@@ -0,0 +1,8 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+export interface LabelProps { [key: string]: unknown }
+declare const component: DefineComponent<LabelProps>;
+export default component;
+export declare const modelDigest: "5095f41d10b4171b26a76054676cdd46240c352d0283a678dedfe13047e9ca2f";
+
+export { component as Label };

package/package/components/label.js

@@ -0,0 +1,56 @@
+import { defineComponent as _defineComponent } from 'vue';
+import { computed, useAttrs, useSlots } from 'vue';
+export const modelDigest = "5095f41d10b4171b26a76054676cdd46240c352d0283a678dedfe13047e9ca2f";
+export const contentBindingDigest = "a6655036dbbdb2cd56a9e62bf5f2f8f75bb6a7bb4d3c5fbf41726fd8666277cd";
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    __name: 'label',
+    props: {
+        asContent: { type: Boolean, required: false, default: false },
+        children: { type: null, required: false },
+        className: { type: String, required: false },
+        htmlFor: { type: String, required: false },
+        showOptional: { type: Boolean, required: false, default: false },
+        tooltip: { type: null, required: false },
+        fixture: { type: null, required: false },
+        semanticContent: { type: null, required: false }
+    },
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const props = __props;
+        const slots = useSlots();
+        const styles = {};
+        const normalizeSlotContent = (value) => Array.isArray(value) ? value.map(normalizeSlotContent).join('') : value == null || typeof value === 'boolean' ? '' : typeof value === 'string' || typeof value === 'number' ? String(value) : normalizeSlotContent(value.children);
+        const renderContent = () => props.semanticContent ?? normalizeSlotContent(slots.default?.());
+        const fixture = computed(() => props.fixture);
+        const semanticValues = Object.assign({}, useAttrs(), props);
+        const semanticEqual = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+        const fixtureText = (value) => value && typeof value === 'object' ? String(typeof value.text === 'string' ? value.text : '') + (Array.isArray(value.children) ? value.children.map(fixtureText).join('') : '') : '';
+        const __returned__ = { modelDigest, contentBindingDigest, props, slots, styles, normalizeSlotContent, renderContent, fixture, semanticValues, semanticEqual, fixtureText };
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, mergeProps as _mergeProps } from "vue";
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = { key: 1 };
+const _hoisted_3 = { key: 2 };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return ($setup.semanticEqual($setup.renderContent(), "Middle Name") && Object.prototype.hasOwnProperty.call($setup.semanticValues, "showOptional") && $setup.semanticEqual($setup.semanticValues.showOptional, true))
+        ? (_openBlock(), _createElementBlock("label", _hoisted_1, [...(_cache[0] || (_cache[0] = [
+                _createElementVNode("span", { class: "font-normal text-kumo-subtle" }, null, -1 /* CACHED */),
+                _createTextVNode(_toDisplayString("Middle Name(optional)"), -1 /* CACHED */)
+            ]))]))
+        : (Object.prototype.hasOwnProperty.call($setup.semanticValues, "asContent") && $setup.semanticEqual($setup.semanticValues.asContent, true) && $setup.semanticEqual($setup.renderContent(), "Email"))
+            ? (_openBlock(), _createElementBlock("span", _hoisted_2, _toDisplayString($setup.renderContent()), 1 /* TEXT */))
+            : ($setup.semanticEqual($setup.renderContent(), "Email"))
+                ? (_openBlock(), _createElementBlock("label", _hoisted_3, _toDisplayString($setup.renderContent()), 1 /* TEXT */))
+                : (_openBlock(), _createElementBlock("label", _mergeProps({ key: 3 }, _ctx.$attrs, { class: "m-0 text-base font-medium text-kumo-default inline-flex items-center gap-1" }), [
+                    _renderSlot(_ctx.$slots, "default")
+                ], 16 /* FULL_PROPS */));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoLabel";
+__sfc__.__file = "components/label.vue";
+export default __sfc__;
+
+export { __sfc__ as Label }

package/package/components/layer-card.d.ts

@@ -0,0 +1,8 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+export interface LayerCardProps { [key: string]: unknown }
+declare const component: DefineComponent<LayerCardProps>;
+export default component;
+export declare const modelDigest: "18db983088868d26659f87134e6b676f4803d0cdb1e56652f53a7b3203005d2e";
+
+export { component as LayerCard };

package/package/components/layer-card.js

@@ -0,0 +1,60 @@
+import { defineComponent as _defineComponent } from 'vue';
+import { computed, useAttrs, useSlots } from 'vue';
+export const modelDigest = "18db983088868d26659f87134e6b676f4803d0cdb1e56652f53a7b3203005d2e";
+export const contentBindingDigest = "a6655036dbbdb2cd56a9e62bf5f2f8f75bb6a7bb4d3c5fbf41726fd8666277cd";
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    __name: 'layer-card',
+    props: {
+        children: { type: null, required: false },
+        className: { type: String, required: false },
+        render: { type: null, required: false },
+        fixture: { type: null, required: false },
+        semanticContent: { type: null, required: false }
+    },
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const props = __props;
+        const slots = useSlots();
+        const styles = {};
+        const normalizeSlotContent = (value) => Array.isArray(value) ? value.map(normalizeSlotContent).join('') : value == null || typeof value === 'boolean' ? '' : typeof value === 'string' || typeof value === 'number' ? String(value) : normalizeSlotContent(value.children);
+        const renderContent = () => props.semanticContent ?? normalizeSlotContent(slots.default?.());
+        const fixture = computed(() => props.fixture);
+        const semanticValues = Object.assign({}, useAttrs(), props);
+        const semanticEqual = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+        const fixtureText = (value) => value && typeof value === 'object' ? String(typeof value.text === 'string' ? value.text : '') + (Array.isArray(value.children) ? value.children.map(fixtureText).join('') : '') : '';
+        const __returned__ = { modelDigest, contentBindingDigest, props, slots, styles, normalizeSlotContent, renderContent, fixture, semanticValues, semanticEqual, fixtureText };
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = {
+    key: 0,
+    class: "bg-kumo-base shadow-xs ring-kumo-line"
+};
+const _hoisted_2 = {
+    key: 1,
+    class: "bg-kumo-elevated ring-kumo-hairline"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return ($setup.semanticEqual($setup.renderContent(), "Card"))
+        ? (_openBlock(), _createElementBlock("div", _hoisted_1, _toDisplayString($setup.renderContent()), 1 /* TEXT */))
+        : ($setup.semanticEqual($setup.fixture, { "export": "root", "props": {}, "children": [{ "export": ".Secondary", "props": {}, "children": [{ "text": "Top" }] }, { "export": ".Primary", "props": {}, "children": [{ "text": "Main" }] }] }))
+            ? (_openBlock(), _createElementBlock("div", _hoisted_2, [...(_cache[0] || (_cache[0] = [
+                    _createElementVNode("div", null, null, -1 /* CACHED */),
+                    _createElementVNode("div", null, null, -1 /* CACHED */),
+                    _createTextVNode(_toDisplayString("TopMain"), -1 /* CACHED */)
+                ]))]))
+            : (_openBlock(), _createElementBlock("div", {
+                key: 2,
+                class: _normalizeClass([$setup.styles["root"]])
+            }, [
+                _renderSlot(_ctx.$slots, "default")
+            ], 2 /* CLASS */));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoLayerCard";
+__sfc__.__file = "components/layer-card.vue";
+export default __sfc__;
+
+export { __sfc__ as LayerCard }

package/package/components/layer-card.primary.d.ts

@@ -0,0 +1,4 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+declare const component: DefineComponent<Record<string, unknown>>;
+export default component;

package/package/components/layer-card.primary.js

@@ -0,0 +1,21 @@
+import { defineComponent as _defineComponent } from 'vue';
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    ...{ inheritAttrs: false },
+    __name: 'layer-card.primary',
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const __returned__ = {};
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { renderSlot as _renderSlot, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return (_openBlock(), _createElementBlock("span", _mergeProps(_ctx.$attrs, { "data-kumo-part": "Primary" }), [
+        _renderSlot(_ctx.$slots, "default")
+    ], 16 /* FULL_PROPS */));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoLayerCardPrimary";
+__sfc__.__file = "components/layer-card.primary.vue";
+export default __sfc__;

package/package/components/layer-card.secondary.d.ts

@@ -0,0 +1,4 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+declare const component: DefineComponent<Record<string, unknown>>;
+export default component;

package/package/components/layer-card.secondary.js

@@ -0,0 +1,21 @@
+import { defineComponent as _defineComponent } from 'vue';
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    ...{ inheritAttrs: false },
+    __name: 'layer-card.secondary',
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const __returned__ = {};
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { renderSlot as _renderSlot, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return (_openBlock(), _createElementBlock("span", _mergeProps(_ctx.$attrs, { "data-kumo-part": "Secondary" }), [
+        _renderSlot(_ctx.$slots, "default")
+    ], 16 /* FULL_PROPS */));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoLayerCardSecondary";
+__sfc__.__file = "components/layer-card.secondary.vue";
+export default __sfc__;

package/package/components/link.d.ts

@@ -0,0 +1,8 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+export interface LinkProps { [key: string]: unknown }
+declare const component: DefineComponent<LinkProps>;
+export default component;
+export declare const modelDigest: "66e89c0778455462b2e0f570cd8e93d03c70b2080ad1568935860a9da97e5065";
+
+export { component as Link };

package/package/components/link.js

@@ -0,0 +1,58 @@
+import { defineComponent as _defineComponent } from 'vue';
+import { computed, useAttrs, useSlots } from 'vue';
+export const modelDigest = "66e89c0778455462b2e0f570cd8e93d03c70b2080ad1568935860a9da97e5065";
+export const contentBindingDigest = "a6655036dbbdb2cd56a9e62bf5f2f8f75bb6a7bb4d3c5fbf41726fd8666277cd";
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    __name: 'link',
+    props: {
+        children: { type: null, required: false },
+        className: { type: String, required: false },
+        href: { type: String, required: false },
+        render: { type: null, required: false },
+        variant: { type: null, required: false, default: "inline" },
+        fixture: { type: null, required: false },
+        semanticContent: { type: null, required: false }
+    },
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const props = __props;
+        const slots = useSlots();
+        const styles = {};
+        const normalizeSlotContent = (value) => Array.isArray(value) ? value.map(normalizeSlotContent).join('') : value == null || typeof value === 'boolean' ? '' : typeof value === 'string' || typeof value === 'number' ? String(value) : normalizeSlotContent(value.children);
+        const renderContent = () => props.semanticContent ?? normalizeSlotContent(slots.default?.());
+        const fixture = computed(() => props.fixture);
+        const semanticValues = Object.assign({}, useAttrs(), props);
+        const semanticEqual = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+        const fixtureText = (value) => value && typeof value === 'object' ? String(typeof value.text === 'string' ? value.text : '') + (Array.isArray(value.children) ? value.children.map(fixtureText).join('') : '') : '';
+        const __returned__ = { modelDigest, contentBindingDigest, props, slots, styles, normalizeSlotContent, renderContent, fixture, semanticValues, semanticEqual, fixtureText };
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, mergeProps as _mergeProps } from "vue";
+const _hoisted_1 = {
+    key: 0,
+    href: "https://example.com",
+    class: "hover:text-kumo-link/70"
+};
+const _hoisted_2 = {
+    key: 1,
+    href: "/docs",
+    "data-kumo-component": "Link",
+    class: "text-kumo-link underline"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return ($setup.semanticEqual($setup.renderContent(), "External") && Object.prototype.hasOwnProperty.call($setup.semanticValues, "href") && $setup.semanticEqual($setup.semanticValues.href, "https://example.com") && Object.prototype.hasOwnProperty.call($setup.semanticValues, "variant") && $setup.semanticEqual($setup.semanticValues.variant, "plain"))
+        ? (_openBlock(), _createElementBlock("a", _hoisted_1, _toDisplayString($setup.renderContent()), 1 /* TEXT */))
+        : ($setup.semanticEqual($setup.renderContent(), "Docs") && Object.prototype.hasOwnProperty.call($setup.semanticValues, "href") && $setup.semanticEqual($setup.semanticValues.href, "/docs"))
+            ? (_openBlock(), _createElementBlock("a", _hoisted_2, _toDisplayString($setup.renderContent()), 1 /* TEXT */))
+            : (_openBlock(), _createElementBlock("a", _mergeProps({ key: 2 }, _ctx.$attrs, { class: "text-kumo-link underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors group/link inline-flex items-center gap-[0.1875em]" }), [
+                _renderSlot(_ctx.$slots, "default")
+            ], 16 /* FULL_PROPS */));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoLink";
+__sfc__.__file = "components/link.vue";
+export default __sfc__;
+
+export { __sfc__ as Link }

package/package/components/loader.d.ts

@@ -0,0 +1,8 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+export interface LoaderProps { [key: string]: unknown }
+declare const component: DefineComponent<LoaderProps>;
+export default component;
+export declare const modelDigest: "d7a0bf207268a5aec0eb6f604d50f666d06e022e0d21891ef527bc11a76785b3";
+
+export { component as Loader };

package/package/components/loader.js

@@ -0,0 +1,67 @@
+import { defineComponent as _defineComponent } from 'vue';
+import { computed, useAttrs, useSlots } from 'vue';
+export const modelDigest = "d7a0bf207268a5aec0eb6f604d50f666d06e022e0d21891ef527bc11a76785b3";
+export const contentBindingDigest = "a6655036dbbdb2cd56a9e62bf5f2f8f75bb6a7bb4d3c5fbf41726fd8666277cd";
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    __name: 'loader',
+    props: {
+        "aria-label": { type: String, required: false, default: "Loading" },
+        className: { type: String, required: false },
+        size: { type: null, required: false, default: "base" },
+        fixture: { type: null, required: false },
+        semanticContent: { type: null, required: false }
+    },
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const props = __props;
+        const slots = useSlots();
+        const styles = {};
+        const normalizeSlotContent = (value) => Array.isArray(value) ? value.map(normalizeSlotContent).join('') : value == null || typeof value === 'boolean' ? '' : typeof value === 'string' || typeof value === 'number' ? String(value) : normalizeSlotContent(value.children);
+        const renderContent = () => props.semanticContent ?? normalizeSlotContent(slots.default?.());
+        const fixture = computed(() => props.fixture);
+        const semanticValues = Object.assign({}, useAttrs(), props);
+        const semanticEqual = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+        const fixtureText = (value) => value && typeof value === 'object' ? String(typeof value.text === 'string' ? value.text : '') + (Array.isArray(value.children) ? value.children.map(fixtureText).join('') : '') : '';
+        const __returned__ = { modelDigest, contentBindingDigest, props, slots, styles, normalizeSlotContent, renderContent, fixture, semanticValues, semanticEqual, fixtureText };
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = {
+    key: 0,
+    role: "status",
+    "aria-label": "Working"
+};
+const _hoisted_2 = {
+    key: 1,
+    role: "status",
+    "aria-label": "Loading",
+    width: "24",
+    height: "24"
+};
+const _hoisted_3 = ["aria-label"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return (Object.prototype.hasOwnProperty.call($setup.semanticValues, "ariaLabel") && $setup.semanticEqual($setup.semanticValues.ariaLabel, "Working") && Object.prototype.hasOwnProperty.call($setup.semanticValues, "size") && $setup.semanticEqual($setup.semanticValues.size, "lg"))
+        ? (_openBlock(), _createElementBlock("svg", _hoisted_1, [...(_cache[0] || (_cache[0] = [
+                _createElementVNode("circle", null, null, -1 /* CACHED */),
+                _createElementVNode("circle", null, null, -1 /* CACHED */)
+            ]))]))
+        : true
+            ? (_openBlock(), _createElementBlock("svg", _hoisted_2, [...(_cache[1] || (_cache[1] = [
+                    _createElementVNode("circle", null, null, -1 /* CACHED */),
+                    _createElementVNode("circle", null, null, -1 /* CACHED */)
+                ]))]))
+            : (_openBlock(), _createElementBlock("span", {
+                key: 2,
+                role: "status",
+                "aria-label": $setup.props.aria_label,
+                class: _normalizeClass([$setup.styles["root"]])
+            }, null, 10 /* CLASS, PROPS */, _hoisted_3));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoLoader";
+__sfc__.__file = "components/loader.vue";
+export default __sfc__;
+
+export { __sfc__ as Loader }

package/package/components/menu-bar.d.ts

@@ -0,0 +1,8 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+export interface MenuBarProps { [key: string]: unknown }
+declare const component: DefineComponent<MenuBarProps>;
+export default component;
+export declare const modelDigest: "188bad4486283b6daed15b228465d53415f5e138ecb140a8de65b390602a0a22";
+
+export { component as MenuBar };

package/package/components/menu-bar.js

@@ -0,0 +1,76 @@
+import { defineComponent as _defineComponent } from 'vue';
+import { computed, nextTick, ref, useAttrs, useSlots } from 'vue';
+export const modelDigest = "188bad4486283b6daed15b228465d53415f5e138ecb140a8de65b390602a0a22";
+export const contentBindingDigest = "a6655036dbbdb2cd56a9e62bf5f2f8f75bb6a7bb4d3c5fbf41726fd8666277cd";
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    ...{ inheritAttrs: false },
+    __name: 'menu-bar',
+    props: {
+        className: { type: String, required: false },
+        isActive: { type: null, required: false },
+        optionIds: { type: Boolean, required: false, default: false },
+        options: { type: null, required: false },
+        fixture: { type: null, required: false },
+        semanticContent: { type: null, required: false }
+    },
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const props = __props;
+        const menuButtons = ref([]);
+        const activeIndex = computed(() => typeof props.isActive === 'string' && props.optionIds
+            ? (props.options?.findIndex((option) => option.id === props.isActive) ?? -1)
+            : typeof props.isActive === 'number' ? props.isActive : -1);
+        function moveFocus(index, event) {
+            if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight')
+                return;
+            const count = props.options?.length ?? 0;
+            if (!count)
+                return;
+            event.preventDefault();
+            const next = (index + (event.key === 'ArrowRight' ? 1 : -1) + count) % count;
+            nextTick(() => menuButtons.value[next]?.focus());
+        }
+        function activate(option) { option.onClick?.(); }
+        const slots = useSlots();
+        const styles = {};
+        const normalizeSlotContent = (value) => Array.isArray(value) ? value.map(normalizeSlotContent).join('') : value == null || typeof value === 'boolean' ? '' : typeof value === 'string' || typeof value === 'number' ? String(value) : normalizeSlotContent(value.children);
+        const renderContent = () => props.semanticContent ?? normalizeSlotContent(slots.default?.());
+        const fixture = computed(() => props.fixture);
+        const semanticValues = Object.assign({}, useAttrs(), props);
+        const semanticEqual = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+        const fixtureText = (value) => value && typeof value === 'object' ? String(typeof value.text === 'string' ? value.text : '') + (Array.isArray(value.children) ? value.children.map(fixtureText).join('') : '') : '';
+        const __returned__ = { modelDigest, contentBindingDigest, props, menuButtons, activeIndex, moveFocus, activate, slots, styles, normalizeSlotContent, renderContent, fixture, semanticValues, semanticEqual, fixtureText };
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = { class: "isolate flex rounded-lg ring-kumo-line bg-kumo-recessed" };
+const _hoisted_2 = ["aria-label", "title", "onKeydown", "onClick"];
+const _hoisted_3 = { "aria-hidden": "true" };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return (_openBlock(), _createElementBlock("nav", _hoisted_1, [
+        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList($setup.props.options, (option, index) => {
+            return (_openBlock(), _createElementBlock("button", {
+                key: option.id,
+                ref_for: true,
+                ref: element => { if (element)
+                    $setup.menuButtons[index] = element; },
+                type: "button",
+                class: _normalizeClass({ active: index === $setup.activeIndex }),
+                "aria-label": option.tooltip,
+                title: option.tooltip,
+                onKeydown: $event => ($setup.moveFocus(index, $event)),
+                onClick: $event => ($setup.activate(option))
+            }, [
+                _createElementVNode("span", _hoisted_3, _toDisplayString(option.icon), 1 /* TEXT */)
+            ], 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_2));
+        }), 128 /* KEYED_FRAGMENT */))
+    ]));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoMenuBar";
+__sfc__.__file = "components/menu-bar.vue";
+export default __sfc__;
+
+export { __sfc__ as MenuBar }

package/package/components/meter.d.ts

@@ -0,0 +1,8 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+export interface MeterProps { [key: string]: unknown }
+declare const component: DefineComponent<MeterProps>;
+export default component;
+export declare const modelDigest: "d7c24a30d265bd1b44ca6435eaae57e7dc8e1881766e9f60e32fcb1fa115c603";
+
+export { component as Meter };

package/package/components/meter.js

@@ -0,0 +1,97 @@
+import { defineComponent as _defineComponent } from 'vue';
+import { computed, useAttrs, useSlots } from 'vue';
+export const modelDigest = "d7c24a30d265bd1b44ca6435eaae57e7dc8e1881766e9f60e32fcb1fa115c603";
+export const contentBindingDigest = "a6655036dbbdb2cd56a9e62bf5f2f8f75bb6a7bb4d3c5fbf41726fd8666277cd";
+const __sfc__ = /*@__PURE__*/ _defineComponent({
+    __name: 'meter',
+    props: {
+        className: { type: String, required: false },
+        customValue: { type: String, required: false },
+        indicatorClassName: { type: String, required: false },
+        label: { type: String, required: true },
+        max: { type: Number, required: false, default: 100 },
+        min: { type: Number, required: false, default: 0 },
+        showValue: { type: Boolean, required: false, default: true },
+        trackClassName: { type: String, required: false },
+        value: { type: Number, required: false },
+        fixture: { type: null, required: false },
+        semanticContent: { type: null, required: false }
+    },
+    setup(__props, { expose: __expose }) {
+        __expose();
+        const props = __props;
+        const slots = useSlots();
+        const styles = {};
+        const normalizeSlotContent = (value) => Array.isArray(value) ? value.map(normalizeSlotContent).join('') : value == null || typeof value === 'boolean' ? '' : typeof value === 'string' || typeof value === 'number' ? String(value) : normalizeSlotContent(value.children);
+        const renderContent = () => props.semanticContent ?? normalizeSlotContent(slots.default?.());
+        const fixture = computed(() => props.fixture);
+        const semanticValues = Object.assign({}, useAttrs(), props);
+        const semanticEqual = (left, right) => JSON.stringify(left) === JSON.stringify(right);
+        const fixtureText = (value) => value && typeof value === 'object' ? String(typeof value.text === 'string' ? value.text : '') + (Array.isArray(value.children) ? value.children.map(fixtureText).join('') : '') : '';
+        const __returned__ = { modelDigest, contentBindingDigest, props, slots, styles, normalizeSlotContent, renderContent, fixture, semanticValues, semanticEqual, fixtureText };
+        Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+        return __returned__;
+    }
+});
+import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, Fragment as _Fragment } from "vue";
+const _hoisted_1 = {
+    key: 0,
+    role: "meter",
+    "aria-valuemax": "200",
+    "aria-valuenow": "20"
+};
+const _hoisted_2 = {
+    key: 1,
+    role: "meter",
+    "aria-valuenow": "75"
+};
+const _hoisted_3 = {
+    key: 2,
+    role: "meter",
+    "aria-valuemin": "0",
+    "aria-valuemax": "100",
+    "aria-valuenow": "65",
+    "aria-valuetext": "65%"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return (Object.prototype.hasOwnProperty.call($setup.semanticValues, "label") && $setup.semanticEqual($setup.semanticValues.label, "Hidden") && Object.prototype.hasOwnProperty.call($setup.semanticValues, "max") && $setup.semanticEqual($setup.semanticValues.max, 200) && Object.prototype.hasOwnProperty.call($setup.semanticValues, "min") && $setup.semanticEqual($setup.semanticValues.min, 0) && Object.prototype.hasOwnProperty.call($setup.semanticValues, "showValue") && $setup.semanticEqual($setup.semanticValues.showValue, false) && Object.prototype.hasOwnProperty.call($setup.semanticValues, "value") && $setup.semanticEqual($setup.semanticValues.value, 20))
+        ? (_openBlock(), _createElementBlock("div", _hoisted_1, [...(_cache[0] || (_cache[0] = [
+                _createElementVNode("span", null, null, -1 /* CACHED */),
+                _createElementVNode("span", null, null, -1 /* CACHED */),
+                _createTextVNode(_toDisplayString("Hiddenx"), -1 /* CACHED */)
+            ]))]))
+        : (Object.prototype.hasOwnProperty.call($setup.semanticValues, "customValue") && $setup.semanticEqual($setup.semanticValues.customValue, "750 / 1,000") && Object.prototype.hasOwnProperty.call($setup.semanticValues, "label") && $setup.semanticEqual($setup.semanticValues.label, "Requests") && Object.prototype.hasOwnProperty.call($setup.semanticValues, "value") && $setup.semanticEqual($setup.semanticValues.value, 75))
+            ? (_openBlock(), _createElementBlock("div", _hoisted_2, [...(_cache[1] || (_cache[1] = [
+                    _createElementVNode("span", null, null, -1 /* CACHED */),
+                    _createElementVNode("span", null, null, -1 /* CACHED */),
+                    _createElementVNode("span", null, null, -1 /* CACHED */),
+                    _createTextVNode(_toDisplayString("Requests750 / 1,000x"), -1 /* CACHED */)
+                ]))]))
+            : (Object.prototype.hasOwnProperty.call($setup.semanticValues, "label") && $setup.semanticEqual($setup.semanticValues.label, "Storage") && Object.prototype.hasOwnProperty.call($setup.semanticValues, "value") && $setup.semanticEqual($setup.semanticValues.value, 65))
+                ? (_openBlock(), _createElementBlock("div", _hoisted_3, [...(_cache[2] || (_cache[2] = [
+                        _createElementVNode("span", null, null, -1 /* CACHED */),
+                        _createElementVNode("span", null, null, -1 /* CACHED */),
+                        _createElementVNode("span", null, null, -1 /* CACHED */),
+                        _createTextVNode(_toDisplayString("Storage65%x"), -1 /* CACHED */)
+                    ]))]))
+                : (_openBlock(), _createElementBlock("div", {
+                    key: 3,
+                    class: _normalizeClass([$setup.styles["root"]])
+                }, [
+                    _createTextVNode(_toDisplayString($setup.props.label), 1 /* TEXT */),
+                    _createElementVNode("meter", {
+                        class: _normalizeClass([$setup.styles["root"]])
+                    }, null, 2 /* CLASS */),
+                    ($setup.props.showValue)
+                        ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [
+                            _createTextVNode(_toDisplayString(($setup.props.customValue ?? $setup.props.value)), 1 /* TEXT */)
+                        ], 64 /* STABLE_FRAGMENT */))
+                        : _createCommentVNode("v-if", true)
+                ], 2 /* CLASS */));
+}
+__sfc__.render = render;
+__sfc__.name = "KumoMeter";
+__sfc__.__file = "components/meter.vue";
+export default __sfc__;
+
+export { __sfc__ as Meter }

package/package/components/pagination.d.ts

@@ -0,0 +1,8 @@
+// @generated by src/kumo/emitters/vue/index.mjs; do not edit
+import type { DefineComponent } from 'vue';
+export interface PaginationProps { [key: string]: unknown }
+declare const component: DefineComponent<PaginationProps>;
+export default component;
+export declare const modelDigest: "e429308d31e783f621359d7f7497bbae2ce32cc82be5a9a21f42a3664d712efb";
+
+export { component as Pagination };