orio-ui 1.19.0 → 1.20.0

package/README.md

@@ -8,7 +8,7 @@ A delightful, lightweight component library for Nuxt 3+ applications. Built with
 
 ## Features
 
-✨ **32 Components** - Beautiful, accessible components ready to use
+✨ **34 Components** - Beautiful, accessible components ready to use
 🎨 **Themeable** - 5 built-in accent themes with light/dark mode support
 🚀 **Auto-imported** - Works seamlessly with Nuxt's auto-import system
 📦 **Tree-shakeable** - Only bundle what you use
@@ -66,7 +66,7 @@ function handleClick() {
 
 ## What's Included
 
-### Components (32)
+### Components (34)
 
 #### Form Controls
 
@@ -187,7 +187,7 @@ npm run docs:dev
 orio-ui/
 ├── src/
 │   ├── runtime/
-│   │   ├── components/   # 32 Vue components
+│   │   ├── components/   # 34 Vue components
 │   │   ├── composables/  # 11 composables
 │   │   ├── assets/css/   # Theme CSS files
 │   │   └── utils/        # Icon registry

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "1.19.0",
+  "version": "1.20.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/Button.vue

@@ -11,7 +11,8 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   layout: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const { loading, disabled } = toRefs(props);
 const slots = useSlots();

package/dist/runtime/components/CheckBox.vue

@@ -9,12 +9,13 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   layout: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 </script>
 
 <template>
-  <orio-control-element v-bind="props" class="checkbox">
+  <orio-control-element v-bind="props" class="checkbox" fill>
     <label class="checkbox-label">
       <input
         v-model="modelValue"
@@ -47,6 +48,9 @@ const props = defineProps({
 .checkbox {
   --box-size: var(--control-icon-size, 1rem);
 }
+.checkbox .checkbox-label {
+  vertical-align: baseline;
+}
 .checkbox-label {
   position: relative;
   user-select: none;
@@ -60,7 +64,6 @@ const props = defineProps({
   position: absolute;
   inset: 0;
   width: var(--box-size);
-  height: 1rem;
   margin: 0;
   opacity: 0;
 }

package/dist/runtime/components/CheckboxGroup.vue

@@ -5,7 +5,8 @@ const props = defineProps({
   error: { type: [String, null], required: false, default: null },
   label: { type: String, required: false },
   layout: { type: String, required: false, default: "vertical" },
-  size: { type: String, required: false, default: "md" }
+  size: { type: String, required: false, default: "md" },
+  fill: { type: Boolean, required: false }
 });
 const modelValue = defineModel({ type: Array, ...{ default: () => [] } });
 function isChecked(value) {

package/dist/runtime/components/ControlElement.d.vue.ts

@@ -31,6 +31,10 @@ export interface ControlProps {
      * Size of the control and its inner elements
      */
     size?: ControlSize;
+    /**
+     * Whether element should fill the container
+     */
+    fill?: boolean;
 }
 declare var __VLS_7: {
     id: string;
@@ -45,6 +49,7 @@ declare const __VLS_base: import("vue").DefineComponent<ControlProps, {}, {}, {}
     id: string;
     layout: ControlLayout;
     size: ControlSize;
+    fill: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ControlElement.vue

@@ -9,7 +9,8 @@ const props = defineProps({
   id: { type: String, required: false, default: () => useId() },
   label: { type: String, required: false },
   layout: { type: String, required: false, default: "vertical" },
-  size: { type: String, required: false, default: "md" }
+  size: { type: String, required: false, default: "md" },
+  fill: { type: Boolean, required: false, default: false }
 });
 provideControlSize(toRef(props, "size"));
 const sizeStyle = computed(() => sizeTokens[props.size]);
@@ -18,7 +19,12 @@ const sizeStyle = computed(() => sizeTokens[props.size]);
 <template>
   <div
     class="control"
-    :class="[appearance, layout, `size-${size}`, { 'has-error': error, group }]"
+    :class="[
+  appearance,
+  layout,
+  `size-${size}`,
+  { 'has-error': error, group, fill }
+]"
     :style="sizeStyle"
     v-bind="{
   ...$attrs,
@@ -60,6 +66,12 @@ const sizeStyle = computed(() => sizeTokens[props.size]);
   color: var(--color-danger);
   font-size: var(--control-label-font-size);
 }
+.control.fill .slot-wrapper {
+  display: flex;
+}
+.control.fill .slot-wrapper > * {
+  flex: 1;
+}
 .control .slot-wrapper :deep(*) {
   font-size: var(--control-font-size);
 }

package/dist/runtime/components/ControlElement.vue.d.ts

@@ -31,6 +31,10 @@ export interface ControlProps {
      * Size of the control and its inner elements
      */
     size?: ControlSize;
+    /**
+     * Whether element should fill the container
+     */
+    fill?: boolean;
 }
 declare var __VLS_7: {
     id: string;
@@ -45,6 +49,7 @@ declare const __VLS_base: import("vue").DefineComponent<ControlProps, {}, {}, {}
     id: string;
     layout: ControlLayout;
     size: ControlSize;
+    fill: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Input.vue

@@ -6,7 +6,8 @@ const props = defineProps({
   group: { type: Boolean, required: false },
   id: { type: String, required: false },
   label: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const modelValue = defineModel({ type: String, ...{ default: "" } });
 </script>

package/dist/runtime/components/ListItem.d.vue.ts

@@ -0,0 +1,29 @@
+export interface ListItemProps {
+    selectable?: boolean;
+}
+type __VLS_Props = ListItemProps;
+type __VLS_ModelProps = {
+    "selected"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    start?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    end?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ListItem.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { useSlots } from "vue";
+const { selectable = false } = defineProps({
+  selectable: { type: Boolean, required: false }
+});
+const slots = useSlots();
+const selected = defineModel("selected", { type: Boolean });
+function toggle() {
+  if (!selectable) return;
+  selected.value = !selected.value;
+}
+function onKeydown(event) {
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    toggle();
+  }
+}
+</script>
+
+<template>
+  <li
+    class="list-item"
+    :class="{ selectable, selected }"
+    :tabindex="selectable ? 0 : void 0"
+    :role="selectable ? 'checkbox' : void 0"
+    :aria-checked="selectable ? selected : void 0"
+    @click="toggle"
+    @keydown="onKeydown"
+  >
+    <div v-if="!!slots.start || selectable" class="boundary">
+      <slot name="start">
+        <orio-check-box :model-value="selected" />
+      </slot>
+    </div>
+    <div class="content">
+      <slot />
+    </div>
+    <div v-if="!!slots.end" class="boundary">
+      <slot name="end" />
+    </div>
+  </li>
+</template>
+
+<style scoped>
+.list-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  user-select: none;
+}
+.list-item.selectable {
+  cursor: pointer;
+}
+.list-item {
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.list-item.selected {
+  background-color: var(--color-accent);
+  color: var(--color-accent-soft-darker);
+}
+.list-item:hover:not(.selected) {
+  background-color: var(--color-surface);
+}
+.list-item .content {
+  flex-grow: 1;
+}
+.list-item .boundary {
+  display: flex;
+}
+</style>

package/dist/runtime/components/ListItem.vue.d.ts

@@ -0,0 +1,29 @@
+export interface ListItemProps {
+    selectable?: boolean;
+}
+type __VLS_Props = ListItemProps;
+type __VLS_ModelProps = {
+    "selected"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    start?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    end?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/NavButton.vue

@@ -10,7 +10,8 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   layout: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const { disabled, active } = toRefs(props);
 const slots = useSlots();

package/dist/runtime/components/NumberInput/Horizontal.vue

@@ -12,7 +12,8 @@ defineProps({
   group: { type: Boolean, required: false },
   id: { type: String, required: false },
   label: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const modelValue = defineModel({ type: Number, ...{ default: 0 } });
 const { pressAndHold, stop } = usePressAndHold();

package/dist/runtime/components/NumberInput/Vertical.vue

@@ -12,7 +12,8 @@ defineProps({
   group: { type: Boolean, required: false },
   id: { type: String, required: false },
   label: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const modelValue = defineModel({ type: Number, ...{ default: 0 } });
 const { pressAndHold, stop } = usePressAndHold();

package/dist/runtime/components/NumberInput/index.vue

@@ -12,7 +12,8 @@ const props = defineProps({
   group: { type: Boolean, required: false },
   id: { type: String, required: false },
   label: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const { min, max, step, decimalPlaces } = toRefs(props);
 const modelValue = defineModel({ type: Number, ...{ default: 0 } });

package/dist/runtime/components/RadioButton.vue

@@ -11,7 +11,8 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   layout: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 </script>
 

package/dist/runtime/components/Selector.vue

@@ -14,7 +14,8 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   layout: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const { field, optionName, placeholder } = toRefs(props);
 const modelValue = defineModel({ type: null, ...{
@@ -151,15 +152,14 @@ const {
             role="listbox"
             :aria-multiselectable="multiple || void 0"
           >
-            <li
+            <orio-list-item
               v-for="(option, index) in options"
               :key="getOptionKey(option)"
+              :selectable="multiple"
+              :selected="isOptionSelected(option)"
               role="option"
               :aria-selected="isOptionSelected(option)"
-              :class="{
-  selected: isOptionSelected(option),
-  highlighted: index === highlightedIndex
-}"
+              :class="{ highlighted: index === highlightedIndex }"
               @click="toggleOption(option, toggle)"
               @mouseenter="highlightedIndex = index"
             >
@@ -172,7 +172,7 @@ const {
               >
                 {{ getOptionLabel(option) }}
               </slot>
-            </li>
+            </orio-list-item>
           </ul>
           <slot v-else name="no-options">
             <orio-empty-state title="No options found" size="small" />
@@ -232,19 +232,12 @@ const {
   padding: 0;
   margin: 0;
 }
-.selector-content ul li {
+.selector-content ul :deep(.list-item) {
   padding: var(--control-py) var(--control-px);
   cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-  color: var(--color-text);
-}
-.selector-content ul li:hover, .selector-content ul li.highlighted {
-  background-color: var(--color-surface); /* neutral lift */
 }
-.selector-content ul li.selected {
-  background-color: var(--color-accent);
-  color: var(--color-accent-soft-darker);
-  font-weight: 400;
+.selector-content ul :deep(.list-item).highlighted:not(.selected) {
+  background-color: var(--color-surface);
 }
 
 .trigger-content {

package/dist/runtime/components/SwitchButton.vue

@@ -7,7 +7,8 @@ const props = defineProps({
   id: { type: String, required: false },
   label: { type: String, required: false },
   layout: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 const modelValue = defineModel({ type: Boolean, ...{ required: false } });
 function toggle() {

package/dist/runtime/components/Tag.d.vue.ts

@@ -1,9 +1,10 @@
 export type TagStyle = "neutral" | "accent";
-interface Props {
+export interface TagProps {
     text: string;
+    id?: string;
     variant?: TagStyle;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<TagProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TagProps> & Readonly<{}>, {
     variant: TagStyle;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Tag.vue

@@ -1,6 +1,7 @@
 <script setup>
 defineProps({
   text: { type: String, required: true },
+  id: { type: String, required: false },
   variant: { type: String, required: false, default: "neutral" }
 });
 </script>

package/dist/runtime/components/Tag.vue.d.ts

@@ -1,9 +1,10 @@
 export type TagStyle = "neutral" | "accent";
-interface Props {
+export interface TagProps {
     text: string;
+    id?: string;
     variant?: TagStyle;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<TagProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TagProps> & Readonly<{}>, {
     variant: TagStyle;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/TaggableSelector.d.vue.ts

@@ -0,0 +1,16 @@
+import type { SelectProps } from "./Selector.vue.js";
+import type { TagProps } from "./Tag.vue.js";
+type __VLS_Props = SelectProps;
+type __VLS_ModelProps = {
+    modelValue?: TagProps[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: TagProps[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: TagProps[] | undefined) => any) | undefined;
+}>, {
+    optionName: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/TaggableSelector.vue

@@ -0,0 +1,35 @@
+<script setup>
+const props = defineProps({
+  options: { type: Array, required: true },
+  multiple: { type: Boolean, required: false },
+  field: { type: String, required: false },
+  optionName: { type: String, required: false, default: "text" },
+  placeholder: { type: String, required: false },
+  appearance: { type: String, required: false },
+  error: { type: [String, null], required: false },
+  group: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  layout: { type: String, required: false },
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
+});
+const modelValue = defineModel({ type: Array });
+</script>
+
+<template>
+  <orio-selector v-bind="props" v-model="modelValue" multiple>
+    <template #trigger-label>
+      <orio-tag
+        v-for="tag in modelValue"
+        :key="tag.id"
+        :text="tag.text"
+        :variant="tag.variant"
+      />
+    </template>
+  </orio-selector>
+</template>
+
+<style scoped>
+:deep(.trigger-content){display:flex;flex-wrap:wrap;gap:.5rem;text-align:left}
+</style>

package/dist/runtime/components/TaggableSelector.vue.d.ts

@@ -0,0 +1,16 @@
+import type { SelectProps } from "./Selector.vue.js";
+import type { TagProps } from "./Tag.vue.js";
+type __VLS_Props = SelectProps;
+type __VLS_ModelProps = {
+    modelValue?: TagProps[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: TagProps[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: TagProps[] | undefined) => any) | undefined;
+}>, {
+    optionName: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Textarea.vue

@@ -7,7 +7,8 @@ const props = defineProps({
   group: { type: Boolean, required: false },
   id: { type: String, required: false },
   label: { type: String, required: false },
-  size: { type: String, required: false }
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
 });
 </script>
 

package/dist/runtime/index.d.ts

@@ -14,6 +14,7 @@ export { default as SwitchButton } from "./components/SwitchButton.vue.js";
 export { default as DatePicker } from "./components/DatePicker.vue.js";
 export { default as DateRangePicker } from "./components/DateRangePicker.vue.js";
 export { default as Selector } from "./components/Selector.vue.js";
+export { default as TaggableSelector } from "./components/TaggableSelector.vue.js";
 export { default as Tag } from "./components/Tag.vue.js";
 export { default as Badge } from "./components/Badge.vue.js";
 export { default as Banner } from "./components/Banner.vue.js";
@@ -22,7 +23,7 @@ export { default as LoadingSpinner } from "./components/LoadingSpinner.vue.js";
 export { default as Modal } from "./components/Modal.vue.js";
 export { default as Popover } from "./components/Popover.vue.js";
 export { default as Tooltip } from "./components/Tooltip.vue.js";
-export { default as Upload } from "./components/Upload/index.vue.js";
+export { default as Upload } from "./components/upload/index.vue.js";
 export { default as EmptyState } from "./components/EmptyState.vue.js";
 export { default as DashedContainer } from "./components/DashedContainer.vue.js";
 export { default as ControlElement } from "./components/ControlElement.vue.js";
@@ -30,6 +31,7 @@ export { default as GalleryCarousel } from "./components/gallery/Carousel.vue.js
 export { default as ViewText } from "./components/view/Text.vue.js";
 export { default as ViewDates } from "./components/view/Dates.vue.js";
 export { default as ViewSeparator } from "./components/view/Separator.vue.js";
+export { default as ListItem } from "./components/ListItem.vue.js";
 export { useApi, type ApiOptions, type RequestBody, type RequestMethod, } from "./composables/useApi.js";
 export { useFuzzySearch } from "./composables/useFuzzySearch.js";
 export { useModal, type ModalProps, type OriginRect, } from "./composables/useModal.js";

package/dist/runtime/index.js

@@ -18,6 +18,7 @@ export { default as SwitchButton } from "./components/SwitchButton.vue";
 export { default as DatePicker } from "./components/DatePicker.vue";
 export { default as DateRangePicker } from "./components/DateRangePicker.vue";
 export { default as Selector } from "./components/Selector.vue";
+export { default as TaggableSelector } from "./components/TaggableSelector.vue";
 export { default as Tag } from "./components/Tag.vue";
 export { default as Badge } from "./components/Badge.vue";
 export { default as Banner } from "./components/Banner.vue";
@@ -26,7 +27,7 @@ export { default as LoadingSpinner } from "./components/LoadingSpinner.vue";
 export { default as Modal } from "./components/Modal.vue";
 export { default as Popover } from "./components/Popover.vue";
 export { default as Tooltip } from "./components/Tooltip.vue";
-export { default as Upload } from "./components/Upload/index.vue";
+export { default as Upload } from "./components/upload/index.vue";
 export { default as EmptyState } from "./components/EmptyState.vue";
 export { default as DashedContainer } from "./components/DashedContainer.vue";
 export { default as ControlElement } from "./components/ControlElement.vue";
@@ -34,6 +35,7 @@ export { default as GalleryCarousel } from "./components/gallery/Carousel.vue";
 export { default as ViewText } from "./components/view/Text.vue";
 export { default as ViewDates } from "./components/view/Dates.vue";
 export { default as ViewSeparator } from "./components/view/Separator.vue";
+export { default as ListItem } from "./components/ListItem.vue";
 export {
   useApi
 } from "./composables/useApi.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orio-ui",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
   "main": "./dist/module.mjs",