@ulu/frontend-vue 0.2.0-beta.2 → 0.2.0-beta.4

package/dist/components/systems/skeleton/UluShowSkeleton.vue.js

@@ -0,0 +1,20 @@
+import { renderSlot as n, createBlock as r, openBlock as t } from "vue";
+import l from "./UluSkeletonText.vue.js";
+const m = {
+  __name: "UluShowSkeleton",
+  props: {
+    /**
+     * If true will show whatever is passed to slot, else skeleton text
+     */
+    when: Boolean
+  },
+  setup(e) {
+    return (o, a) => e.when ? (t(), r(l, {
+      key: 1,
+      inline: ""
+    })) : n(o.$slots, "default", { key: 0 });
+  }
+};
+export {
+  m as default
+};

package/dist/components/systems/skeleton/UluSkeletonContent.vue.d.ts

@@ -0,0 +1,8 @@
+declare const _default: import('vue').DefineComponent<{}, {
+    lines: number;
+    $props: {
+        readonly lines?: number | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=UluSkeletonContent.vue.d.ts.map

package/dist/components/systems/skeleton/UluSkeletonContent.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluSkeletonContent.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/skeleton/UluSkeletonContent.vue"],"names":[],"mappings":"AAcA;"}

package/dist/components/systems/skeleton/UluSkeletonContent.vue.js

@@ -0,0 +1,43 @@
+import { computed as f, createElementBlock as r, openBlock as l, Fragment as a, renderList as u, normalizeStyle as w, normalizeClass as y } from "vue";
+import { randomInt as m } from "@ulu/utils/random.js";
+import { arrayCreate as _ } from "@ulu/utils/array.js";
+const C = {
+  __name: "UluSkeletonContent",
+  props: {
+    /**
+     * Amount of lines to generate
+     */
+    lines: {
+      type: Number,
+      default: 6
+    }
+  },
+  setup(c) {
+    const d = c, p = f(() => _(d.lines, () => {
+      const o = m(70, 100);
+      let n = 0;
+      const s = () => {
+        const e = o - n, i = m(15, e);
+        return n += i, i;
+      }, t = [];
+      for (; n < o - 15; )
+        t.push(s());
+      const k = () => t.reduce((e, i) => e + i, 0);
+      for (; k() >= o && t.pop(); )
+        ;
+      return t.map((e) => ({ width: e, alt: Math.random() < 0.5 }));
+    }));
+    return (h, o) => (l(), r("div", null, [
+      (l(!0), r(a, null, u(p.value, (n, s) => (l(), r("div", { key: s }, [
+        (l(!0), r(a, null, u(n, (t) => (l(), r("span", {
+          key: t,
+          class: y(["skeleton skeleton--text skeleton--inline", { "skeleton--background-alt": t.alt }]),
+          style: w({ width: `${t.width}%` })
+        }, null, 6))), 128))
+      ]))), 128))
+    ]));
+  }
+};
+export {
+  C as default
+};

package/dist/components/systems/skeleton/UluSkeletonMedia.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=UluSkeletonMedia.vue.d.ts.map

package/dist/components/systems/skeleton/UluSkeletonMedia.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluSkeletonMedia.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/skeleton/UluSkeletonMedia.vue"],"names":[],"mappings":"AAKA;"}

package/dist/components/systems/skeleton/UluSkeletonMedia.vue.js

@@ -0,0 +1,13 @@
+import { createElementBlock as e, openBlock as o, createVNode as t } from "vue";
+import c from "../../elements/UluIcon.vue.js";
+const n = { class: "skeleton skeleton-block--media" }, l = {
+  __name: "UluSkeletonMedia",
+  setup(a) {
+    return (r, s) => (o(), e("div", n, [
+      t(c, { icon: "type:image" })
+    ]));
+  }
+};
+export {
+  l as default
+};

package/dist/components/systems/skeleton/UluSkeletonText.vue.d.ts

@@ -0,0 +1,12 @@
+declare const _default: import('vue').DefineComponent<{}, {
+    alt: boolean;
+    inline: boolean;
+    width?: string | undefined;
+    $props: {
+        readonly alt?: boolean | undefined;
+        readonly inline?: boolean | undefined;
+        readonly width?: string | undefined;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLSpanElement>;
+export default _default;
+//# sourceMappingURL=UluSkeletonText.vue.d.ts.map

package/dist/components/systems/skeleton/UluSkeletonText.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluSkeletonText.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/skeleton/UluSkeletonText.vue"],"names":[],"mappings":"AAUA;"}

package/dist/components/systems/skeleton/UluSkeletonText.vue.js

@@ -0,0 +1,30 @@
+import { createElementBlock as t, openBlock as n, normalizeClass as l } from "vue";
+const s = {
+  __name: "UluSkeletonText",
+  props: {
+    /**
+     * Inline modifier
+     */
+    inline: Boolean,
+    /**
+     * Use alternate background color
+     */
+    alt: Boolean,
+    /**
+     * Optional size (width) - should correspond with width setup in scss component
+     */
+    width: String
+  },
+  setup(e) {
+    return (o, a) => (n(), t("span", {
+      class: l(["skeleton skeleton--text", {
+        "skeleton--inline": e.inline,
+        "skeleton--background-alt": e.alt,
+        [`skeleton--width-${e.width}`]: e.width
+      }])
+    }, null, 2));
+  }
+};
+export {
+  s as default
+};

package/dist/{types/components → components}/systems/slider/UluImageSlideShow.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     images: ArrayConstructor;
     selectButton: BooleanConstructor;
 }>, {}, {}, {}, {
@@ -12,13 +12,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         slide: any;
         nav: any;
     }): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     images: ArrayConstructor;
     selectButton: BooleanConstructor;
 }>> & Readonly<{}>, {
     selectButton: boolean;
 }, {}, {
-    UluSlideShow: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    UluSlideShow: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
         slideFocusable: BooleanConstructor;
         focusOptions: {
             type: ObjectConstructor;
@@ -74,7 +74,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         createObserver(): void;
         observeSlides(): void;
         destroyObserver(): void;
-    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "slide-change"[], "slide-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "slide-change"[], "slide-change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
         slideFocusable: BooleanConstructor;
         focusOptions: {
             type: ObjectConstructor;
@@ -116,15 +116,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         scrollBehaviorControl: string;
         initialActive: number;
     }, {}, {
-        UluIcon: import("vue").DefineComponent<{}, {
-            $props: Partial<{
-                readonly spaced: boolean;
-                readonly icon?: string | boolean | Record<string, any> | unknown[] | undefined;
-            }>;
+        UluIcon: import('vue').DefineComponent<{}, {
             spaced: boolean;
             icon?: string | boolean | Record<string, any> | unknown[] | undefined;
-        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-    }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+            $props: {
+                readonly spaced?: boolean | undefined;
+                readonly icon?: string | boolean | Record<string, any> | unknown[] | undefined;
+            };
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=UluImageSlideShow.vue.d.ts.map

package/dist/components/systems/slider/UluImageSlideShow.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluImageSlideShow.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/slider/UluImageSlideShow.vue"],"names":[],"mappings":"AA2BA;;;;;IA4FM;;;;;OAKG"}

package/dist/components/systems/slider/UluImageSlideShow.vue.js

@@ -0,0 +1,73 @@
+import _ from "./UluSlideShow.vue.js";
+import { resolveComponent as h, createBlock as u, openBlock as g, withCtx as a, createElementVNode as r, createCommentVNode as p, createTextVNode as S } from "vue";
+import w from "../../../_virtual/_plugin-vue_export-helper.js";
+const B = {
+  name: "ImageSlideShow",
+  components: {
+    UluSlideShow: _
+  },
+  props: {
+    images: Array,
+    selectButton: Boolean
+  },
+  watch: {
+    images() {
+      console.log("watch image from outer");
+    }
+  },
+  methods: {
+    /**
+     * Test to see if the active slide's nav button (thumbnail) is in view
+     * if not, scroll the nav to ensure it is visible. This function will take 
+     * into account which side of the overflow nav the item is hidden in and will 
+     * scroll either to fit it to the flush end (if overflow to the right) or flush start
+     */
+    slideChange({ slide: m, nav: o }) {
+      const { active: s, navElement: n } = m;
+      if (!n) return;
+      const { offsetWidth: d, scrollLeft: t } = o, { offsetLeft: l, offsetWidth: c } = n, e = t + d, f = l + c;
+      let i = null;
+      console.log("left/right", t, e), s && n && (f > e ? i = t + (f - e) : l < t && (i = l), i !== null && o.scrollTo({ left: i, top: 0, behavior: "smooth" }));
+    }
+  }
+}, v = ["src", "alt"], C = { class: "slideshow__image-actions" }, x = ["src", "alt"];
+function U(m, o, s, n, d, t) {
+  const l = h("AppButton"), c = h("UluSlideShow");
+  return g(), u(c, {
+    class: "slideshow--images",
+    items: s.images,
+    onSlideChange: t.slideChange
+  }, {
+    slide: a(({ item: e }) => [
+      r("img", {
+        src: e.src,
+        alt: e.alt
+      }, null, 8, v),
+      r("div", C, [
+        s.selectButton ? (g(), u(l, {
+          key: 0,
+          class: "type-small",
+          icon: "plus",
+          small: "",
+          iconBefore: ""
+        }, {
+          default: a(() => [...o[0] || (o[0] = [
+            S(" Select ", -1)
+          ])]),
+          _: 1
+        })) : p("", !0)
+      ])
+    ]),
+    nav: a(({ index: e }) => [
+      r("img", {
+        src: s.images[e].src,
+        alt: `View image ${e}`
+      }, null, 8, x)
+    ]),
+    _: 1
+  }, 8, ["items", "onSlideChange"]);
+}
+const A = /* @__PURE__ */ w(B, [["render", U]]);
+export {
+  A as default
+};

package/dist/{types/components → components}/systems/slider/UluSlideShow.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     /**
      * Should slides be focusable by tab key
      */
@@ -119,7 +119,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
      * Remove observer and it's internal DOM references (GC)
      */
     destroyObserver(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "slide-change"[], "slide-change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "slide-change"[], "slide-change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     /**
      * Should slides be focusable by tab key
      */
@@ -192,14 +192,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     scrollBehaviorControl: string;
     initialActive: number;
 }, {}, {
-    UluIcon: import("vue").DefineComponent<{}, {
-        $props: Partial<{
-            readonly spaced: boolean;
-            readonly icon?: string | boolean | Record<string, any> | unknown[] | undefined;
-        }>;
+    UluIcon: import('vue').DefineComponent<{}, {
         spaced: boolean;
         icon?: string | boolean | Record<string, any> | unknown[] | undefined;
-    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        $props: {
+            readonly spaced?: boolean | undefined;
+            readonly icon?: string | boolean | Record<string, any> | unknown[] | undefined;
+        };
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=UluSlideShow.vue.d.ts.map

package/dist/components/systems/slider/UluSlideShow.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluSlideShow.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/slider/UluSlideShow.vue"],"names":[],"mappings":"AAiGA;;IAyVM;;OAEG;;IAEH;;OAEG;;;;;;;;IAQH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;;;;IAKH;;OAEG;;;;;;;;IAQH;;OAEG;;;;;IAKH;;;;;OAKG;;;;;;;;IA2BH;;OAEG;;;;;;IAQH;;OAEG;;IAIH;;OAEG;;;;;;IAKH;;OAEG;;IAgBH;;OAEG;;IAIH;;;OAGG;;IAcH;;OAEG;;IAKH;;OAEG;;IAKH;;OAEG;;IAsBH;;OAEG;;IAUH;;OAEG;;;IA1MH;;OAEG;;IAEH;;OAEG;;;;;;;;IAQH;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;;;;IAKH;;OAEG;;;;;IAKH;;OAEG;;;;;;;;IAQH;;OAEG;;;;;IAKH;;;;;OAKG"}

package/dist/components/systems/slider/UluSlideShow.vue.js

@@ -0,0 +1,292 @@
+import p from "../../elements/UluIcon.vue.js";
+import { resolveComponent as S, createElementBlock as a, openBlock as d, createElementVNode as r, createCommentVNode as w, Fragment as v, renderList as f, normalizeClass as _, renderSlot as m, createVNode as b, toDisplayString as g } from "vue";
+import k from "../../../_virtual/_plugin-vue_export-helper.js";
+const y = {
+  name: "SlideShow",
+  emits: ["slide-change"],
+  components: {
+    UluIcon: p
+  },
+  props: {
+    /**
+     * Should slides be focusable by tab key
+     */
+    slideFocusable: Boolean,
+    /**
+     * Setting for element.focus() when navigating to() a specific slide
+     */
+    focusOptions: {
+      type: Object,
+      default: () => ({
+        preventScroll: !0,
+        focusVisible: !1
+      })
+    },
+    /**
+     * Array of slide items (data)
+     * - Use slot (#slide) to template
+     */
+    items: Array,
+    /**
+     * Slideshow without a nav
+     */
+    noNav: Boolean,
+    /**
+     * Allow user to change the scroll behavior when a slide is navigated to()
+     */
+    scrollBehaviorNav: {
+      type: String,
+      default: "instant"
+    },
+    /**
+     * Allow user to change the scroll behavior when a slide is navigated via next/prev
+     */
+    scrollBehaviorControl: {
+      type: String,
+      default: "smooth"
+    },
+    /**
+     * Observe 
+     */
+    observerOptions: {
+      type: Object,
+      default: () => ({
+        threshhold: 0,
+        rootMargin: "-50% 0px"
+      })
+    },
+    /**
+     * The intial slide index to use for active slide (zero based)
+     */
+    initialActive: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Allow user to control scroll amount (element.scrollTo) for prev/next controls
+     * - For future scroll implementations (like ulu scroll-slider for cards, etc)
+     * - Function is passed (direction, DomRefs)
+     * - Number is passed directly
+     */
+    scrollAmount: [Number, Function]
+  },
+  data() {
+    return {
+      slides: this.createSlides()
+    };
+  },
+  computed: {
+    canScrollRight() {
+      const { slides: e } = this;
+      return !e[e.length - 1].active;
+    },
+    canScrollLeft() {
+      const { slides: e } = this;
+      return !e[0].active;
+    }
+  },
+  watch: {
+    "items.length"() {
+      this.slides = this.createSlides(), this.$nextTick(() => {
+        this.observeSlides();
+      });
+    }
+  },
+  methods: {
+    /**
+     * Creates the internal array of slides based on user's passed items
+     */
+    createSlides() {
+      return this.items.map((e) => ({
+        element: null,
+        active: !1,
+        item: e
+      }));
+    },
+    /**
+     * Find the corresponding slide data by slide element
+     */
+    getSlideByElement(e) {
+      return this.slides.find(({ element: t }) => e === t);
+    },
+    /**
+     * Provides scroll measurements
+     */
+    getScrollData() {
+      const { scrollLeft: e, offsetWidth: t, scrollWidth: s } = this.$refs.track;
+      return { scrollLeft: e, offsetWidth: t, scrollWidth: s };
+    },
+    /**
+     * Determines the amount to scroll the track
+     */
+    resolveAmount(e) {
+      const t = e === "next", { scrollAmount: s } = this, { scrollLeft: n, offsetWidth: l } = this.getScrollData();
+      return typeof s == "function" ? s(e, this.$refs) : typeof s == "number" ? t ? n + s : n - s : t ? n + l : n - l;
+    },
+    /**
+     * Scroll the track to a specified point 
+     */
+    scrollTo(e, t) {
+      this.$refs.track.scrollTo({ left: e, top: 0, behavior: t });
+    },
+    /**
+     * Scroll to specific index
+     * @param {Number} index Slide index
+     */
+    to(e) {
+      const t = this.slides[e], { track: s } = this.$refs;
+      if (t) {
+        let n = t.element.offsetLeft;
+        const l = () => {
+          t.element.focus(this.focusOptions), s.removeEventListener("scrollend", l);
+        };
+        s.addEventListener("scrollend", l), this.scrollTo(n, this.scrollBehaviorNav);
+      }
+    },
+    /**
+     * Goto to next slide
+     */
+    next() {
+      const e = this.resolveAmount("next");
+      this.scrollTo(e, this.scrollBehaviorControl);
+    },
+    /**
+     * Goto to previous slide
+     */
+    previous() {
+      const e = this.resolveAmount("previous");
+      this.scrollTo(e, this.scrollBehaviorControl);
+    },
+    /**
+     * Sets up a new observer to watch the slides visibility (within track)
+     */
+    createObserver() {
+      const { observerOptions: e } = this, { track: t, nav: s } = this.$refs, n = (l) => {
+        l.forEach((i) => {
+          this.$nextTick(() => {
+            const h = this.getSlideByElement(i.target);
+            h.active = i.isIntersecting, this.$emit("slide-change", { slide: h, track: t, nav: s });
+          });
+        });
+      };
+      this.observer = new IntersectionObserver(n, {
+        root: t,
+        ...e
+      });
+    },
+    /**
+     * Add all slide elements as targets in observer
+     */
+    observeSlides() {
+      const { observer: e, slides: t } = this;
+      e.disconnect(), t.forEach(({ element: s }) => {
+        s && e.observe(s);
+      });
+    },
+    /**
+     * Remove observer and it's internal DOM references (GC)
+     */
+    destroyObserver() {
+      this.observer.disconnect(), this.observer = null;
+    }
+  },
+  mounted() {
+    this.createObserver(), this.observeSlides();
+  },
+  beforeUnmount() {
+    this.destroyObserver();
+  }
+}, x = { class: "slideshow" }, O = {
+  class: "slideshow__control-context",
+  ref: "context"
+}, B = {
+  class: "slideshow__track-crop",
+  ref: "crop"
+}, C = {
+  class: "slideshow__track",
+  ref: "track"
+}, N = ["tabindex"], E = { class: "slideshow__controls" }, L = { class: "slideshow__controls-item slideshow__controls-item--previous" }, A = ["disabled"], T = { class: "slideshow__controls-item slideshow__controls-item--next" }, I = ["disabled"], U = {
+  key: 0,
+  class: "slideshow__nav",
+  ref: "nav"
+}, $ = ["onClick"], F = { class: "hidden-visually" };
+function V(e, t, s, n, l, i) {
+  const h = S("UluIcon");
+  return d(), a("div", x, [
+    r("div", O, [
+      r("div", B, [
+        r("ul", C, [
+          (d(!0), a(v, null, f(l.slides, (o, c) => (d(), a("li", {
+            class: _(["slideshow__slide", { "is-active": o.active }]),
+            key: c,
+            tabindex: s.slideFocusable ? "0" : "-1",
+            ref_for: !0,
+            ref: (u) => {
+              o.element = u;
+            }
+          }, [
+            m(e.$slots, "slide", {
+              item: o.item,
+              index: c
+            })
+          ], 10, N))), 128))
+        ], 512)
+      ], 512),
+      r("ul", E, [
+        r("li", L, [
+          r("button", {
+            class: "slideshow__control-button slideshow__control-button--previous",
+            "aria-label": "Scroll Right",
+            onClick: t[0] || (t[0] = (...o) => i.previous && i.previous(...o)),
+            disabled: !i.canScrollLeft
+          }, [
+            b(h, {
+              class: "slideshow__control-icon",
+              icon: "type:previous"
+            })
+          ], 8, A)
+        ]),
+        r("li", T, [
+          r("button", {
+            class: "slideshow__control-button slideshow__control-button--next",
+            "aria-label": "Scroll Left",
+            onClick: t[1] || (t[1] = (...o) => i.next && i.next(...o)),
+            disabled: !i.canScrollRight
+          }, [
+            b(h, {
+              class: "slideshow__control-icon",
+              icon: "type:next"
+            })
+          ], 8, I)
+        ])
+      ])
+    ], 512),
+    s.noNav ? w("", !0) : (d(), a("ul", U, [
+      (d(!0), a(v, null, f(l.slides, (o, c) => (d(), a("li", {
+        class: _(["slideshow__nav-item", { "is-active": o.active }]),
+        ref_for: !0,
+        ref: (u) => {
+          o.navElement = u;
+        },
+        key: c
+      }, [
+        r("button", {
+          class: _(["slideshow__nav-button", { "is-active": o.active }]),
+          onClick: (u) => i.to(c)
+        }, [
+          m(e.$slots, "nav", {
+            item: o.item,
+            index: c,
+            active: o.active
+          }, () => [
+            r("span", F, "Item " + g(c + 1), 1)
+          ])
+        ], 10, $)
+      ], 2))), 128))
+    ], 512))
+  ]);
+}
+const j = /* @__PURE__ */ k(y, [["render", V]]);
+export {
+  j as default
+};

package/dist/components/systems/slider/UluSlideShowSlide.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /**
+     * Provided by grandparent, not user
+     */
+    active: BooleanConstructor;
+    someClassTest: StringConstructor;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /**
+     * Provided by grandparent, not user
+     */
+    active: BooleanConstructor;
+    someClassTest: StringConstructor;
+}>> & Readonly<{}>, {
+    active: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=UluSlideShowSlide.vue.d.ts.map

package/dist/components/systems/slider/UluSlideShowSlide.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluSlideShowSlide.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/slider/UluSlideShowSlide.vue"],"names":[],"mappings":"AASA;;IA6BM;;OAEG;;;;IAFH;;OAEG"}

package/dist/components/systems/slider/UluSlideShowSlide.vue.js

@@ -0,0 +1,26 @@
+import { createElementBlock as s, openBlock as t, normalizeClass as l, renderSlot as i } from "vue";
+import n from "../../../_virtual/_plugin-vue_export-helper.js";
+const r = {
+  name: "SlideShowSlide",
+  props: {
+    /**
+     * Provided by grandparent, not user
+     */
+    active: Boolean,
+    someClassTest: String
+  },
+  mounted() {
+    console.log("slide mounted");
+  }
+};
+function a(e, c, o, d, m, p) {
+  return t(), s("li", {
+    class: l(["slideshow__slide", { "is-active": o.active }])
+  }, [
+    i(e.$slots, "default")
+  ], 2);
+}
+const u = /* @__PURE__ */ n(r, [["render", a]]);
+export {
+  u as default
+};