@ulu/frontend-vue 0.1.3-beta.1 → 0.1.3-beta.10

package/dist/types/components/collapsible/UluModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluModal.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/collapsible/UluModal.vue"],"names":[],"mappings":";IA4YM;;OAEG;;IAEH;;;;OAIG;;;;;IAKH;;OAEG;;;;;IAKH;;;OAGG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;IAKH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;IAlGH;;OAEG;;IAEH;;;;OAIG;;;;;IAKH;;OAEG;;;;;IAKH;;;OAGG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;IAKH;;OAEG"}
+{"version":3,"file":"UluModal.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/collapsible/UluModal.vue"],"names":[],"mappings":";IA2YM;;OAEG;;IAEH;;;;OAIG;;;;;IAKH;;OAEG;;;;;IAKH;;;OAGG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;IAKH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;IAlGH;;OAEG;;IAEH;;;;OAIG;;;;;IAKH;;OAEG;;;;;IAKH;;;OAGG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;IAKH;;OAEG"}

package/dist/types/components/elements/UluList.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluList.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/elements/UluList.vue"],"names":[],"mappings":"wBA0OqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;;;;;2OAErC;;;;;;;AAjJD;;;;;;;;;;;EA8CG"}
+{"version":3,"file":"UluList.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/elements/UluList.vue"],"names":[],"mappings":"wBAyOqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;;;;;2OAErC;;;;;;;AAjJD;;;;;;;;;;;EA8CG"}

package/dist/types/components/elements/UluRule.vue.d.ts

@@ -0,0 +1,19 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof props>;
+    large: boolean;
+    semantic: boolean;
+    short: boolean;
+    light: boolean;
+    margin?: string | undefined;
+    modifiers?: string | unknown[] | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+declare const props: {
+    readonly large: boolean;
+    readonly semantic: boolean;
+    readonly short: boolean;
+    readonly light: boolean;
+    readonly margin?: string | undefined;
+    readonly modifiers?: string | unknown[] | undefined;
+};
+//# sourceMappingURL=UluRule.vue.d.ts.map

package/dist/types/components/elements/UluRule.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluRule.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/elements/UluRule.vue"],"names":[],"mappings":";YAgJmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;;;AA3FtC;;;;;;;EAyBG"}

package/dist/types/components/forms/UluFormRadio.vue.d.ts

@@ -7,10 +7,10 @@ declare const __VLS_component: import("vue").DefineComponent<{}, {
     $emit: typeof __VLS_emit;
     $props: Partial<typeof __VLS_props>;
     required: boolean;
-    value?: string | undefined;
+    value?: string | number | undefined;
     name?: string | undefined;
     label?: string | undefined;
-    modelValue?: string | undefined;
+    modelValue?: string | number | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
     default?: ((props: {}) => any) | undefined;
@@ -18,9 +18,9 @@ type __VLS_Slots = {
 declare const __VLS_emit: (event: "update:modelValue", ...args: any[]) => void;
 declare const __VLS_props: {
     readonly required: boolean;
-    readonly value?: string | undefined;
+    readonly value?: string | number | undefined;
     readonly name?: string | undefined;
     readonly label?: string | undefined;
-    readonly modelValue?: string | undefined;
+    readonly modelValue?: string | number | undefined;
 };
 //# sourceMappingURL=UluFormRadio.vue.d.ts.map

package/dist/types/components/index.d.ts

@@ -1,4 +1,5 @@
 export { default as UluAccordion } from "./collapsible/UluAccordion.vue";
+export { default as UluAccordionGroup } from "./collapsible/UluAccordionGroup.vue";
 export { default as UluCollapsible } from "./collapsible/UluCollapsible.vue";
 export { default as UluDropdown } from "./collapsible/UluDropdown.vue";
 export { default as UluModal } from "./collapsible/UluModal.vue";
@@ -20,6 +21,7 @@ export { default as UluExternalLink } from "./elements/UluExternalLink.vue";
 export { default as UluIcon } from "./elements/UluIcon.vue";
 export { default as UluList } from "./elements/UluList.vue";
 export { default as UluMain } from "./elements/UluMain.vue";
+export { default as UluRule } from "./elements/UluRule.vue";
 export { default as UluSpokeSpinner } from "./elements/UluSpokeSpinner.vue";
 export { default as UluTag } from "./elements/UluTag.vue";
 export { default as UluSelectableMenu } from "./forms/UluSelectableMenu.vue";
@@ -29,9 +31,19 @@ export { default as UluFormMessage } from "./forms/UluFormMessage.vue";
 export { default as UluFormSelect } from "./forms/UluFormSelect.vue";
 export { default as UluFormText } from "./forms/UluFormText.vue";
 export { default as UluSearchForm } from "./forms/UluSearchForm.vue";
+export { default as UluForm } from "./forms/UluForm.vue";
+export { default as UluFormActions } from "./forms/UluFormActions.vue";
+export { default as UluFormCheckbox } from "./forms/UluFormCheckbox.vue";
+export { default as UluFormFieldset } from "./forms/UluFormFieldset.vue";
+export { default as UluFormItem } from "./forms/UluFormItem.vue";
+export { default as UluFormItemsInline } from "./forms/UluFormItemsInline.vue";
+export { default as UluFormRadio } from "./forms/UluFormRadio.vue";
+export { default as UluFormRequiredChar } from "./forms/UluFormRequiredChar.vue";
+export { default as UluFormTextarea } from "./forms/UluFormTextarea.vue";
 export { default as UluAdaptiveLayout } from "./layout/UluAdaptiveLayout.vue";
 export { default as UluDataGrid } from "./layout/UluDataGrid.vue";
 export { default as UluTitleRail } from "./layout/UluTitleRail.vue";
+export { default as UluWhenBreakpoint } from "./layout/UluWhenBreakpoint.vue";
 export { default as UluBreadcrumb } from "./navigation/UluBreadcrumb.vue";
 export { default as UluMenu } from "./navigation/UluMenu.vue";
 export { default as UluMenuStack } from "./navigation/UluMenuStack.vue";

package/dist/types/components/systems/facets/UluFacetsFilterSelects.vue.d.ts

@@ -1,11 +1,30 @@
-declare const _default: import("vue").DefineComponent<{}, {
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
     $emit: typeof emit;
     $props: Partial<typeof props>;
+    classes: Record<string, any>;
     facets: unknown[];
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;
+type __VLS_Slots = {
+    label?: ((props: {}) => any) | undefined;
+} & {
+    optionAll?: ((props: {
+        group: unknown;
+    }) => any) | undefined;
+} & {
+    option?: ((props: {
+        group: unknown;
+        option: any;
+        index: number;
+    }) => any) | undefined;
+};
 declare const emit: (event: "facet-change", ...args: any[]) => void;
 declare const props: {
+    readonly classes: Record<string, any>;
     readonly facets: unknown[];
 };
 //# sourceMappingURL=UluFacetsFilterSelects.vue.d.ts.map

package/dist/types/components/systems/facets/UluFacetsFilterSelects.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluFacetsFilterSelects.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/facets/UluFacetsFilterSelects.vue"],"names":[],"mappings":";WA+KkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,KAAK,CAAC;;;;AA9FxC,oEAA2C;AAP3C;;EAKG"}
+{"version":3,"file":"UluFacetsFilterSelects.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/facets/UluFacetsFilterSelects.vue"],"names":[],"mappings":"wBAqPqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AATzB;WAIkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,KAAK,CAAC;;;2OAGrC;;;;;;;;;;;;;;AA5HH,oEAA2C;AApB3C;;;EAeG"}

package/dist/types/components/systems/facets/UluFacetsSearch.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluFacetsSearch.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/facets/UluFacetsSearch.vue"],"names":[],"mappings":";WAgIkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;AAlEtC,yEAAgD;AAZhD;;;;EAUG"}
+{"version":3,"file":"UluFacetsSearch.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/facets/UluFacetsSearch.vue"],"names":[],"mappings":";WAmIkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;AArEtC,yEAAgD;AAZhD;;;;EAUG"}

package/dist/types/components/systems/scroll-anchors/UluScrollAnchorsNavAnimated.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluScrollAnchorsNavAnimated.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsNavAnimated.vue"],"names":[],"mappings":";IAqIM;;OAEG;;;;;;;;;;;;;;;;;IAFH;;OAEG"}
+{"version":3,"file":"UluScrollAnchorsNavAnimated.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsNavAnimated.vue"],"names":[],"mappings":";IAwIM;;OAEG;;;;;;;;;;;;;;;;;IAFH;;OAEG"}

package/dist/types/plugins/popovers/defaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../lib/plugins/popovers/defaults.js"],"names":[],"mappings":";gBAGY,MAAM;;;;;;;;;iBAuDN,MAAM"}
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../lib/plugins/popovers/defaults.js"],"names":[],"mappings":";gBAGY,MAAM;;;;;;;;;iBA8CN,MAAM"}

package/dist/types/plugins/popovers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../lib/plugins/popovers/index.js"],"names":[],"mappings":"AAiDA;;;;GAIG;AACH,qCAHW,MAAM,gBACN,MAAM,QAuIhB;AArLD;;GAEG;AACH,kCAAmC,mBAAmB,CAAC;AAEvD;;GAEG;AACH,gCAAiC,iBAAiB,CAAC;AAEnD;;GAEG;AACH,yBAA0B,oBAAoB,CAAC;;;AAcxC,gDAJI,GAAC,mBACD,MAAM,GACJ,MAAM,GAAC,IAAI,CAgBvB;2BA3C0B,iBAAiB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../lib/plugins/popovers/index.js"],"names":[],"mappings":"AAiDA;;;;GAIG;AACH,qCAHW,MAAM,gBACN,MAAM,QAgJhB;AA9LD;;GAEG;AACH,kCAAmC,mBAAmB,CAAC;AAEvD;;GAEG;AACH,gCAAiC,iBAAiB,CAAC;AAEnD;;GAEG;AACH,yBAA0B,oBAAoB,CAAC;;;AAcxC,gDAJI,GAAC,mBACD,MAAM,GACJ,MAAM,GAAC,IAAI,CAgBvB;2BA3C0B,iBAAiB"}

package/lib/components/collapsible/UluModal.vue

@@ -1,7 +1,7 @@
 
 <template>
   <Teleport 
-    :to="teleport === false ? null : teleport" 
+    :to="teleport === false ? null : teleport"  
     :disabled="teleport === false"
   >
     <dialog
@@ -216,14 +216,14 @@
       // Define the internal modifiers object as a computed property (so it can react to changes)
       const internalModifiers = computed(() => ({
         [props.position]: props.position, 
-        "resize": props.allowResize,
-        "no-resize": !props.allowResize,
-        "no-header": !hasHeader.value,
-        "body-fills": props.bodyFills,
-        "no-backdrop": props.noBackdrop,
-        "no-min-height": props.noMinHeight,
-        "non-modal": props.nonModal,
-        "resizer-active": resizerEnabled.value,
+        "resize" : props.allowResize,
+        "no-resize" : !props.allowResize,
+        "no-header" : !hasHeader.value,
+        "body-fills" : props.bodyFills,
+        "no-backdrop" : props.noBackdrop,
+        "no-min-height" : props.noMinHeight,
+        "non-modal" : props.nonModal,
+        "resizer-active" : resizerEnabled.value,
       }));
 
       const { resolvedModifiers } = useModifiers({ 
@@ -363,7 +363,6 @@
       }
     },
     mounted() {
-      ++modalCount;
       if (this.preventScroll) {
         this.setupPreventScroll();
       }

package/lib/components/elements/UluList.vue

@@ -13,7 +13,7 @@
     :style="{ 
       listStyleType: listStyleType
     }"
-    :reversed="reversed"
+    :reversed="isOrdered ? reversed : null"
     :start="start"
   >
     <li 
@@ -79,7 +79,6 @@
     listStyleType: String,
   });
 
-  const listElement = computed(() => {
-    return props.ordered || props.forceOrdered ? "ol" : "ul";
-  });
+  const isOrdered = computed(() => props.ordered || props.forceOrdered);
+  const listElement = computed(() => isOrdered.value ? "ol" : "ul");
 </script>

package/lib/components/elements/UluRule.vue

@@ -0,0 +1,49 @@
+<template>
+  <hr v-if="semantic" class="rule" :class="resolvedModifiers">
+  <div v-else class="rule" :class="resolvedModifiers"></div>
+</template>
+
+<script setup>
+  import { computed } from "vue";
+  import { useModifiers } from "../../composables/useModifiers.js";
+
+  const props = defineProps({
+    /**
+     * Whether to use the actual <hr> vs superficial <div></div> for rule element
+     */
+    semantic: Boolean,
+    /**
+     * Use short modifier
+     */
+    short: Boolean,
+    /**
+     * Optional margin (keyword from your rule margins config in frontend)
+     */
+    margin: String,
+    /**
+     * Add light modifier (if set, usually exists, this is for convenience, use modifiers prop if you have custom naming)
+     */
+    light: Boolean,
+    /**
+     * Add large modifier (if set, usually exists, this is for convenience, use modifiers prop if you have custom naming)
+     */
+    large: Boolean,
+    /**
+     * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
+     */
+    modifiers: [String, Array]
+  });
+
+  const internalModifiers = computed(() => ({
+    "short" : props.short,
+    "light" : props.light,
+    "large" : props.large,
+    [`margin-${ props.margin }`] : props.margin
+  }));
+
+  const { resolvedModifiers } = useModifiers({ 
+    props, 
+    baseClass: "rule",
+    internal: internalModifiers 
+  });
+</script>

package/lib/components/forms/UluFormRadio.vue

@@ -27,11 +27,11 @@ defineProps({
   /**
    * The value of the selected radio button in the group (for v-model).
    */
-  modelValue: String,
+  modelValue: [String, Number],
   /**
    * The value of this radio button.
    */
-  value: String,
+  value: [String, Number],
   /**
    * The name of the radio button group.
    */

package/lib/components/index.js

@@ -4,6 +4,7 @@
  * - Used in main plugin and bundle exports
  */
 export { default as UluAccordion } from './collapsible/UluAccordion.vue';
+export { default as UluAccordionGroup } from './collapsible/UluAccordionGroup.vue';
 export { default as UluCollapsible } from './collapsible/UluCollapsible.vue';
 export { default as UluDropdown } from './collapsible/UluDropdown.vue';
 export { default as UluModal } from './collapsible/UluModal.vue';
@@ -25,6 +26,7 @@ export { default as UluExternalLink } from './elements/UluExternalLink.vue';
 export { default as UluIcon } from './elements/UluIcon.vue';
 export { default as UluList } from './elements/UluList.vue';
 export { default as UluMain } from './elements/UluMain.vue';
+export { default as UluRule } from './elements/UluRule.vue';
 export { default as UluSpokeSpinner } from './elements/UluSpokeSpinner.vue';
 export { default as UluTag } from './elements/UluTag.vue';
 export { default as UluSelectableMenu } from './forms/UluSelectableMenu.vue';
@@ -34,9 +36,19 @@ export { default as UluFormMessage } from './forms/UluFormMessage.vue';
 export { default as UluFormSelect } from './forms/UluFormSelect.vue';
 export { default as UluFormText } from './forms/UluFormText.vue';
 export { default as UluSearchForm } from './forms/UluSearchForm.vue';
+export { default as UluForm } from './forms/UluForm.vue';
+export { default as UluFormActions } from './forms/UluFormActions.vue';
+export { default as UluFormCheckbox } from './forms/UluFormCheckbox.vue';
+export { default as UluFormFieldset } from './forms/UluFormFieldset.vue';
+export { default as UluFormItem } from './forms/UluFormItem.vue';
+export { default as UluFormItemsInline } from './forms/UluFormItemsInline.vue';
+export { default as UluFormRadio } from './forms/UluFormRadio.vue';
+export { default as UluFormRequiredChar } from './forms/UluFormRequiredChar.vue';
+export { default as UluFormTextarea } from './forms/UluFormTextarea.vue';
 export { default as UluAdaptiveLayout } from './layout/UluAdaptiveLayout.vue';
 export { default as UluDataGrid } from './layout/UluDataGrid.vue';
 export { default as UluTitleRail } from './layout/UluTitleRail.vue';
+export { default as UluWhenBreakpoint } from './layout/UluWhenBreakpoint.vue';
 export { default as UluBreadcrumb } from './navigation/UluBreadcrumb.vue';
 export { default as UluMenu } from './navigation/UluMenu.vue';
 export { default as UluMenuStack } from './navigation/UluMenuStack.vue';

package/lib/components/systems/facets/UluFacetsFilterSelects.vue

@@ -1,26 +1,40 @@
 <template>
-  <div class="facets-dropdown-filters">
+  <div class="facets-dropdown-filters" :class="classes.container">
     <div
       class="facets-dropdown-filters__group"
+      :class="classes.group"
       v-for="group in facets"
       :key="group.uid"
     >
-      <label :for="`facet-dropdown-${group.uid}`" class="facets-dropdown-filters__label">
-        {{ group.name }}
+      <label 
+        :for="`facet-dropdown-${ group.uid }`" 
+        class="facets-dropdown-filters__label"
+        :class="classes.label"
+      >
+        <slot name="label">
+          {{ group.name }}
+        </slot>
       </label>
       <select
         :id="`facet-dropdown-${group.uid}`"
         class="facets-dropdown-filters__select"
+        :class="classes.select"
         @change="onFilterChange(group, $event)"
       >
-        <option value="">All {{ group.name }}s</option>
+        <option value="">
+          <slot name="optionAll" :group="group">
+            All {{ group.name }}s
+          </slot>
+        </option>
         <option
-          v-for="option in group.children"
+          v-for="(option, index) in group.children"
           :key="option.uid"
           :value="option.uid"
           :selected="option.selected"
         >
-          {{ option.label }}
+          <slot name="option" :group="group" :option="option" :index="index">
+            {{ option.label }}
+          </slot>
         </option>
       </select>
     </div>
@@ -29,12 +43,25 @@
 
 <script setup>
 const props = defineProps({
+  /**
+   * Facets Array
+   */
   facets: {
     type: Array,
     default: () => []
-  }
+  },
+  /**
+   * Optional classes bindings for all elements { container, group, label, select }
+   */
+  classes: {
+    type: Object,
+    default: () => ({})
+  },
 });
 
+console.log(props);
+
+
 const emit = defineEmits(['facet-change']);
 
 function onFilterChange(group, event) {

package/lib/components/systems/facets/UluFacetsSearch.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="facets-search">
-    <label :class="classes.searchLabel" :for="id">
+  <div class="facets-search" :class="classes.container">
+    <label :class="classes.label" :for="id">
       <strong>Search</strong>
     </label>
     <input 
       :id="id" 
-      :class="classes.searchInput" 
+      :class="classes.input" 
       v-model="localValue"
       type="text" 
       :placeholder="placeholder"

package/lib/components/systems/facets/UluFacetsSort.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="facets-sort" :class="classes.sortForm">
+  <div class="facets-sort" :class="classes.container">
     <label 
       :for="sortId" 
-      :class="classes.sortFormLabel"
+      :class="classes.label"
     >
       <slot>Sort:</slot>
     </label>
@@ -10,7 +10,7 @@
       :value="modelValue"
       @change="emit('update:modelValue', $event.target.value)"
       :id="sortId" 
-      :class="classes.sortFormSelect"
+      :class="classes.select"
     >
       <option v-for="(item, key) in sortTypes" :value="key" :key="key">
         {{ item.text }}

package/lib/components/systems/scroll-anchors/UluScrollAnchorsNavAnimated.vue

@@ -105,6 +105,9 @@ Changes:
   // User can override these styles
   // - Think this is better than props/etc 
   //   - Refactored from props to just plain css to be overridden
+  .scroll-anchors__nav {
+    position: relative;
+  }
   .scroll-anchors__rail {
     border-left: 3px solid rgb(220, 220, 220);
     padding-left: 1rem;

package/lib/plugins/popovers/defaults.js

@@ -9,16 +9,7 @@ export default {
      * @type {String}
      */
     directiveName: "ulu-tooltip",
-    /**
-     * The element that the tooltip should be rendered within
-     * - Default bottom of the body (on top of everything)
-     * - Doesn't need to be inline for accessibility since tooltips are just an enhancement
-     *   content displayed within them should be hidden for assistive devices, 
-     *   they are not visible to assistive devices
-     * @type {String}
-     */    
-    tooltipTeleportTo: "body",
-  },
+    },
   /**
    * Default Popover Options
    */
@@ -59,6 +50,15 @@ export default {
    * @type {Object}
    */
   tooltip: {
+    /**
+     * The element that the tooltip should be rendered within
+     * - Default bottom of the body if this is unset
+     * - Doesn't need to be inline for accessibility since tooltips are just an enhancement
+     *   content displayed within them should be hidden for assistive devices, 
+     *   they are not visible to assistive devices
+     * @type {String}
+     */    
+    teleportTo: null,
     /**
      * Optional class binding for tooltip element
      * @type {String|Object|Array}

package/lib/plugins/popovers/index.js

@@ -70,6 +70,15 @@ export default function install(app, userOptions = {}) {
     config: {},
   });
   const showTooltip = (triggerEl, configObj) => {
+    // If a teleport target isn't already specified in the config,
+    // try to find a parent dialog to teleport to automatically.
+    if (triggerEl && !configObj.teleportTo) {
+      const dialog = triggerEl.closest("dialog");
+      if (dialog) {
+        configObj.teleportTo = dialog;
+      }
+    }
+    
     // If a tooltip is already active for a different element, remove its attribute.
     if (tooltipState.trigger && tooltipState.trigger !== triggerEl) {
       if (tooltipState.trigger?.removeAttribute) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.3-beta.1",
+  "version": "0.1.3-beta.10",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [