@rei/cedar 13.5.3 → 14.0.0-beta.0

package/dist/src/components/switch/styles/CdrSwitch.module.scss.mjs

@@ -1,13 +1,13 @@
-const c = {
-  "cdr-switch": "cdr-switch_13-5-3",
-  "cdr-switch__button": "cdr-switch__button_13-5-3",
-  "cdr-switch__button-icon": "cdr-switch__button-icon_13-5-3",
-  "cdr-switch__handle": "cdr-switch__handle_13-5-3",
-  "cdr-switch__label": "cdr-switch__label_13-5-3",
-  "cdr-switch--full-width": "cdr-switch--full-width_13-5-3",
-  "cdr-switch--large": "cdr-switch--large_13-5-3",
-  "cdr-switch--medium": "cdr-switch--medium_13-5-3"
+const t = {
+  "cdr-switch": "cdr-switch_14-0-0-beta-0",
+  "cdr-switch__button": "cdr-switch__button_14-0-0-beta-0",
+  "cdr-switch__button-icon": "cdr-switch__button-icon_14-0-0-beta-0",
+  "cdr-switch__handle": "cdr-switch__handle_14-0-0-beta-0",
+  "cdr-switch__label": "cdr-switch__label_14-0-0-beta-0",
+  "cdr-switch--full-width": "cdr-switch--full-width_14-0-0-beta-0",
+  "cdr-switch--large": "cdr-switch--large_14-0-0-beta-0",
+  "cdr-switch--medium": "cdr-switch--medium_14-0-0-beta-0"
 };
 export {
-  c as default
+  t as default
 };

package/dist/src/components/table/CdrTable.vue.mjs

@@ -1,75 +1,9 @@
-import { defineComponent as u, computed as l, useCssModule as f, openBlock as m, createElementBlock as p, normalizeClass as C, createElementVNode as c, mergeProps as $, renderSlot as b } from "vue";
-import h from "../../utils/mapClasses.mjs";
-import { buildBooleanClass as v } from "../../utils/buildClass.mjs";
-import y from "../../utils/propValidator.mjs";
-import B from "./styles/CdrTable.module.scss.mjs";
-import z from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const W = u({
-  name: "CdrTable",
-  props: {
-    /** Sets row colors to alternate between darker and lighter backgrounds.
-     * Striping will not apply when `border` is true
-     */
-    striped: {
-      type: Boolean,
-      default: !1
-    },
-    /** Adds borders between rows. Will disable `striped` if both are true */
-    border: {
-      type: Boolean,
-      default: !0
-    },
-    /** Sets the width to 100%. Also accepts space separated strings for breakpoints that it should be full width: { '@xs' | '@sm' | '@md' | '@lg' } */
-    fullWidth: {
-      type: [Boolean, String],
-      default: !0
-    },
-    /** Makes the table scroll horizontally when it would overflow its container */
-    responsive: {
-      type: Boolean,
-      default: !0
-    },
-    /** Adds a darker background on row hover */
-    hover: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Sets the table size (cell padding); values can target responsive breakpoints. Example `small@lg`.
-     * @demoSelectMultiple false
-     * @values small, medium, large
-    */
-    size: {
-      type: String,
-      default: "medium",
-      validator: (e) => y(e, ["small", "medium", "large"])
-    }
-  },
-  setup(e) {
-    const s = "cdr-table", t = l(() => e.size && `${s}--${e.size}`), o = l(() => e.striped && `${s}--striped`), r = l(() => e.hover && `${s}--hover`), a = l(() => e.border && !e.striped && `${s}--border`), d = l(() => e.fullWidth && v(s, e.fullWidth, "full-width")), i = l(() => e.responsive && `${s}--responsive`), n = f();
-    return {
-      mapClasses: h,
-      baseClass: s,
-      sizeClass: t,
-      stripedClass: o,
-      hoverClass: r,
-      borderClass: a,
-      fullWidthClass: d,
-      wrapperClass: i,
-      style: n
-    };
-  }
-});
-function g(e, s, t, o, r, a) {
-  return m(), p("div", {
-    class: C(e.style[e.wrapperClass])
-  }, [c("table", $(e.$attrs, {
-    class: e.mapClasses(e.style, e.baseClass, e.sizeClass, e.stripedClass, e.hoverClass, e.borderClass, e.fullWidthClass)
-  }), [b(e.$slots, "default")], 16)], 2);
-}
-const w = {
-  $style: B
-}, N = /* @__PURE__ */ z(W, [["render", g], ["__cssModules", w]]);
+import s from "./CdrTable.vue2.mjs";
+import o from "./styles/CdrTable.module.scss.mjs";
+import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const r = {
+  $style: o
+}, f = /* @__PURE__ */ t(s, [["__cssModules", r]]);
 export {
-  N as default
+  f as default
 };

package/dist/src/components/table/CdrTable.vue2.mjs

@@ -0,0 +1,58 @@
+import { defineComponent as f, useCssModule as c, computed as l, openBlock as v, createElementBlock as C, normalizeClass as b, unref as o, createElementVNode as h, mergeProps as B, renderSlot as $ } from "vue";
+import y from "../../utils/mapClasses.mjs";
+import { buildBooleanClass as z } from "../../utils/buildClass.mjs";
+import g from "../../utils/propValidator.mjs";
+const s = "cdr-table", E = /* @__PURE__ */ f({
+  name: "CdrTable",
+  __name: "CdrTable",
+  props: {
+    /** Sets row colors to alternate between darker and lighter backgrounds.
+     * Striping will not apply when `border` is true
+     */
+    striped: {
+      type: Boolean,
+      default: !1
+    },
+    /** Adds borders between rows. Will disable `striped` if both are true */
+    border: {
+      type: Boolean,
+      default: !0
+    },
+    /** Sets the width to 100%. Also accepts space separated strings for breakpoints that it should be full width: { '@xs' | '@sm' | '@md' | '@lg' } */
+    fullWidth: {
+      type: [Boolean, String],
+      default: !0
+    },
+    /** Makes the table scroll horizontally when it would overflow its container */
+    responsive: {
+      type: Boolean,
+      default: !0
+    },
+    /** Adds a darker background on row hover */
+    hover: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Sets the table size (cell padding); values can target responsive breakpoints. Example `small@lg`.
+     * @demoSelectMultiple false
+     * @values small, medium, large
+    */
+    size: {
+      type: String,
+      default: "medium",
+      validator: (t) => g(t, ["small", "medium", "large"])
+    }
+  },
+  setup(t) {
+    const e = t, r = c(), d = l(() => e.size ? `${s}--${e.size}` : ""), n = l(() => e.striped ? `${s}--striped` : ""), i = l(() => e.hover ? `${s}--hover` : ""), p = l(() => e.border && !e.striped ? `${s}--border` : ""), u = l(() => e.fullWidth ? z(s, e.fullWidth, "full-width") : ""), m = l(() => e.responsive ? `${s}--responsive` : "");
+    return (a, W) => (v(), C("div", {
+      class: b(o(r)[m.value])
+    }, [h("table", B(a.$attrs, {
+      class: o(y)(o(r), s, d.value, n.value, i.value, p.value, u.value)
+    }), [$(a.$slots, "default")], 16)], 2));
+  }
+});
+export {
+  E as default
+};

package/dist/src/components/table/styles/CdrTable.module.scss.mjs

@@ -1,18 +1,18 @@
-const l = {
-  "cdr-table": "cdr-table_13-5-3",
-  "cdr-table--small": "cdr-table--small_13-5-3",
-  "cdr-table--medium": "cdr-table--medium_13-5-3",
-  "cdr-table--large": "cdr-table--large_13-5-3",
-  "cdr-table--striped": "cdr-table--striped_13-5-3",
-  "cdr-table--border": "cdr-table--border_13-5-3",
-  "cdr-table--full-width": "cdr-table--full-width_13-5-3",
-  "cdr-table--responsive": "cdr-table--responsive_13-5-3",
-  "cdr-table--hover": "cdr-table--hover_13-5-3",
-  "cdr-table--full-width@xs": "cdr-table--full-width@xs_13-5-3",
-  "cdr-table--full-width@sm": "cdr-table--full-width@sm_13-5-3",
-  "cdr-table--full-width@md": "cdr-table--full-width@md_13-5-3",
-  "cdr-table--full-width@lg": "cdr-table--full-width@lg_13-5-3"
+const e = {
+  "cdr-table": "cdr-table_14-0-0-beta-0",
+  "cdr-table--small": "cdr-table--small_14-0-0-beta-0",
+  "cdr-table--medium": "cdr-table--medium_14-0-0-beta-0",
+  "cdr-table--large": "cdr-table--large_14-0-0-beta-0",
+  "cdr-table--striped": "cdr-table--striped_14-0-0-beta-0",
+  "cdr-table--border": "cdr-table--border_14-0-0-beta-0",
+  "cdr-table--full-width": "cdr-table--full-width_14-0-0-beta-0",
+  "cdr-table--responsive": "cdr-table--responsive_14-0-0-beta-0",
+  "cdr-table--hover": "cdr-table--hover_14-0-0-beta-0",
+  "cdr-table--full-width@xs": "cdr-table--full-width@xs_14-0-0-beta-0",
+  "cdr-table--full-width@sm": "cdr-table--full-width@sm_14-0-0-beta-0",
+  "cdr-table--full-width@md": "cdr-table--full-width@md_14-0-0-beta-0",
+  "cdr-table--full-width@lg": "cdr-table--full-width@lg_14-0-0-beta-0"
 };
 export {
-  l as default
+  e as default
 };

package/dist/src/components/tabs/CdrTabPanel.vue.mjs

@@ -1,49 +1,9 @@
-import { defineComponent as r, inject as d, computed as i, useCssModule as c, watch as m, withDirectives as p, openBlock as b, createElementBlock as u, normalizeClass as f, renderSlot as h, vShow as v } from "vue";
-import { kebabCase as y } from "lodash-es";
-import $ from "./styles/CdrTabPanel.module.scss.mjs";
-import C from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const _ = r({
-  name: "CdrTabPanel",
-  props: {
-    /** Sets reference identifier for tab content. This property is required and is necessary for accessibility. Must be unique for each tabPanel, and cannot be the same as the `aria-labelledby` property. */
-    id: String,
-    /** Sets tab display name. Required and must be unique for each tab. If `id` is not provided, this value will be used as the reference identifier. */
-    name: String,
-    /** Sets reference identifier for tab header. This property is required and is necessary for accessibility. Must be unique for each tabPanel, and cannot be the same as the `id` property. */
-    ariaLabelledby: String
-  },
-  emits: {
-    /**
-     * Emits when active tab is changed
-     * @params state, panelId
-     */
-    "tab-change": null
-  },
-  setup(e, s) {
-    const a = d("selectedTabName"), t = i(() => e.name === (a == null ? void 0 : a.value)), n = i(() => `${y(e.name)}-panel`), o = c();
-    return m(t, (l) => {
-      s.emit("tab-change", l, n.value);
-    }), {
-      selectedTabName: a,
-      isActive: t,
-      panelId: n,
-      style: o
-    };
-  }
-}), g = ["aria-hidden", "id", "aria-labelledby"];
-function S(e, s, a, t, n, o) {
-  return p((b(), u("section", {
-    tabindex: "0",
-    "aria-hidden": !e.isActive,
-    role: "tabpanel",
-    class: f(e.style["cdr-tab-panel"]),
-    id: e.panelId,
-    "aria-labelledby": e.name
-  }, [h(e.$slots, "default")], 10, g)), [[v, e.isActive]]);
-}
-const k = {
-  $style: $
-}, I = /* @__PURE__ */ C(_, [["render", S], ["__cssModules", k]]);
+import s from "./CdrTabPanel.vue2.mjs";
+import o from "./styles/CdrTabPanel.module.scss.mjs";
+import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const r = {
+  $style: o
+}, f = /* @__PURE__ */ t(s, [["__cssModules", r]]);
 export {
-  I as default
+  f as default
 };

package/dist/src/components/tabs/CdrTabPanel.vue2.mjs

@@ -0,0 +1,40 @@
+import { defineComponent as c, useCssModule as d, inject as m, ref as u, computed as r, watch as b, withDirectives as p, openBlock as f, createElementBlock as h, normalizeClass as v, unref as C, renderSlot as g, vShow as y } from "vue";
+import S from "../../utils/kebabCase.mjs";
+import { selectedTabKey as _ } from "./symbols.mjs";
+const k = ["aria-hidden", "id", "aria-labelledby"], T = /* @__PURE__ */ c({
+  name: "CdrTabPanel",
+  __name: "CdrTabPanel",
+  props: {
+    /** Sets reference identifier for tab content. This property is required and is necessary for accessibility. Must be unique for each tabPanel, and cannot be the same as the `aria-labelledby` property. */
+    id: String,
+    /** Sets tab display name. Required and must be unique for each tab. If `id` is not provided, this value will be used as the reference identifier. */
+    name: String,
+    /** Sets reference identifier for tab header. This property is required and is necessary for accessibility. Must be unique for each tabPanel, and cannot be the same as the `id` property. */
+    ariaLabelledby: String
+  },
+  emits: {
+    /**
+     * Emits when active tab is changed
+     * @params state, panelId
+     */
+    "tab-change": null
+  },
+  setup(l, {
+    emit: o
+  }) {
+    const e = l, s = d(), a = m(_, u(null)), n = r(() => e.name === (a == null ? void 0 : a.value)), i = r(() => e.name ? `${S(e.name)}-panel` : void 0);
+    return b(n, (t) => {
+      o("tab-change", t, i.value);
+    }), (t, w) => p((f(), h("section", {
+      tabindex: "0",
+      "aria-hidden": !n.value,
+      role: "tabpanel",
+      class: v(C(s)["cdr-tab-panel"]),
+      id: i.value,
+      "aria-labelledby": l.name
+    }, [g(t.$slots, "default")], 10, k)), [[y, n.value]]);
+  }
+});
+export {
+  T as default
+};

package/dist/src/components/tabs/CdrTabs.vue.mjs

@@ -1,188 +1,9 @@
-import { defineComponent as V, ref as r, provide as j, computed as h, onMounted as q, useCssModule as G, openBlock as L, createElementBlock as N, normalizeClass as c, normalizeStyle as C, createElementVNode as b, Fragment as J, renderList as Q, withModifiers as Y, withKeys as W, toDisplayString as Z, renderSlot as x, nextTick as ee } from "vue";
-import { debounce as A } from "lodash-es";
-import { CdrColorBackgroundPrimary as te, CdrSpaceHalfX as ae, CdrSpaceOneX as le } from "../../../node_modules/@rei/cdr-tokens/dist/js/cdr-tokens.mjs";
-import se from "../../utils/mapClasses.mjs";
-import { modifyClassName as B } from "../../utils/buildClass.mjs";
-import re from "./styles/CdrTabs.module.scss.mjs";
-import ne from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const ie = V({
-  name: "CdrTabs",
-  props: {
-    /**
-     * Sets height of the tabs container element.
-     * Passing a `px` value will render tabs with a static height,
-     * passing `auto` will render tabs with variable height based on content size.
-     */
-    height: {
-      type: String,
-      default: "240px"
-    },
-    /** Sets the index of the tab that should be active on initial page load. Note that this property is zero-indexed. */
-    activeTab: {
-      type: Number,
-      default: 0
-    },
-    /**
-     * Modifies the style variants for this component
-     * @values centered, compact, full-width, no-border
-     */
-    modifier: String,
-    /**
-     * Use `small` to reduce spacing around the tabs for a denser visual design
-     * @demoSelectMultiple true
-     * @values small
-    */
-    size: String,
-    /**
-     * Sets the background color of the tab.
-     * For CdrTabs that are rendered on non-primary backgrounds.
-     * Pass the background-color into the component to ensure that the scrolling gradients render correctly.
-     */
-    backgroundColor: {
-      type: String,
-      default: te
-    }
-  },
-  setup(e, d) {
-    var R;
-    const T = (R = d.slots.default()[0].children) != null && R.length ? d.slots.default()[0].children : d.slots.default(), z = "cdr-tabs", p = r(T.map((a) => ({
-      name: a.props.name,
-      disabled: a.props.disabled,
-      id: a.props["aria-labelledby"]
-    }))), m = r(null), l = r(null), n = r(!1), s = r(0), o = r([]), v = r(null), S = r(null), k = r(!1), w = r(!1), i = r(0), f = r(0);
-    j("selectedTabName", m);
-    const X = h(() => e.modifier && B("cdr-tabs", e.modifier)), O = h(() => e.size && B("cdr-tabs", e.size)), P = h(() => ({
-      transform: `translateX(${i.value}px)`,
-      width: `${f.value}px`
-    })), F = h(() => ({
-      background: `linear-gradient(to left, rgba(255, 255, 255, 0), ${e.backgroundColor})`
-    })), _ = h(() => ({
-      background: `linear-gradient(to right, rgba(255, 255, 255, 0),
-        ${e.backgroundColor})`
-    })), H = (a, t) => l.value === a && !t.disabled, y = () => {
-      let a = 0;
-      if (S.value && (a = S.value.offsetWidth), n.value = s.value > a, n.value) {
-        const t = v.value.scrollLeft;
-        k.value = t > 1, w.value = t + 1 < s.value - a;
-      } else
-        k.value = !1, w.value = !1;
-    }, E = () => {
-      let a = [];
-      v.value && (a = Array.from(v.value.children));
-      let t = 0;
-      return a.forEach((u, $) => {
-        $ > 0 && (t += e.size === "small" ? Number(ae) : Number(le)), t += u.offsetWidth || 0;
-      }), t;
-    }, g = () => {
-      if (o.value.length > 0) {
-        const t = o.value[l.value].getBoundingClientRect(), u = v.value.getBoundingClientRect(), $ = t.x - u.x;
-        i.value = $ - v.value.scrollLeft, f.value = t.width, i.value + f.value >= u.width ? (f.value = Math.max(0, u.width - i.value), i.value = Math.min(i.value, u.width)) : i.value < 0 && (f.value = Math.max(0, f.value + i.value), i.value = 0);
-      }
-    }, I = async (a) => {
-      const t = o.value[a];
-      m.value = p.value[a].name, l.value = a, await ee(), t.focus(), g();
-    }, K = () => {
-      if (l.value === o.value.length - 1)
-        return;
-      let t = l.value + 1;
-      o.value[t].disabled && (t += 1), t <= o.value.length - 1 && I(t);
-    }, D = () => {
-      if (l.value <= 0)
-        return;
-      let t = l.value - 1;
-      o.value[t].disabled && (t -= 1), t >= 0 && I(t);
-    }, M = () => {
-      o.value.forEach((a, t) => {
-        !a.disabled && l.value === null && (l.value = t, m.value = p.value[t].name);
-      });
-    };
-    q(() => {
-      M(), s.value = E(), y(), setTimeout(() => {
-        g();
-      }, 250), window.addEventListener("resize", A(() => {
-        s.value = E(), y(), g();
-      }, 250)), v.value.addEventListener("scroll", A(() => {
-        y(), g();
-      }, 50));
-    });
-    const U = G();
-    return {
-      slottedTabs: T,
-      baseClass: z,
-      tabs: p,
-      selectedTabName: m,
-      selectedIndex: l,
-      headerOverflow: n,
-      headerWidth: s,
-      tabElements: o,
-      tablist: v,
-      containerEl: S,
-      overflowLeft: k,
-      overflowRight: w,
-      underlineOffsetX: i,
-      underlineWidth: f,
-      mapClasses: se,
-      modifierClass: X,
-      sizeClass: O,
-      underlineStyle: P,
-      gradientLeftStyle: F,
-      gradientRightStyle: _,
-      checkIfActive: H,
-      calculateOverflow: y,
-      getHeaderWidth: E,
-      updateUnderline: g,
-      selectTabNext: K,
-      selectTabPrev: D,
-      selectTab: I,
-      setInitialTabStates: M,
-      style: U
-    };
-  }
-}), oe = ["id", "disabled", "aria-selected", "tabIndex", "onClick"];
-function de(e, d, T, z, p, m) {
-  return L(), N("div", {
-    class: c(e.mapClasses(e.style, e.baseClass, e.modifierClass, e.sizeClass)),
-    ref: "containerEl",
-    style: C({
-      height: e.height
-    })
-  }, [b("div", {
-    class: c(e.style["cdr-tabs__gradient-container"])
-  }, [b("div", {
-    class: c(e.mapClasses(e.style, "cdr-tabs__gradient", "cdr-tabs__gradient--left", e.overflowLeft ? "cdr-tabs__gradient--active" : "")),
-    style: C(e.gradientLeftStyle)
-  }, null, 6), b("ul", {
-    class: c(e.style["cdr-tabs__header-container"]),
-    role: "tablist",
-    ref: "tablist"
-  }, [(L(!0), N(J, null, Q(e.tabs, (l, n) => (L(), N("li", {
-    key: `${l.name}-${n}`,
-    role: "presentation",
-    class: c(e.style["cdr-tabs__header"])
-  }, [b("button", {
-    ref_for: !0,
-    ref: (s) => {
-      e.tabElements[n] = s;
-    },
-    id: l.id,
-    disabled: l.disabled,
-    "aria-selected": e.checkIfActive(n, l),
-    tabIndex: e.checkIfActive(n, l) ? 0 : -1,
-    class: c(e.mapClasses(e.style, e.checkIfActive(n, l) ? "cdr-tabs__header-item-active" : "", "cdr-tabs__header-item", l.disabled ? "cdr-tabs__header-item--disabled" : "")),
-    role: "tab",
-    onClick: Y((s) => e.selectTab(n), ["prevent"]),
-    onKeyup: [d[0] || (d[0] = W((...s) => e.selectTabNext && e.selectTabNext(...s), ["right"])), d[1] || (d[1] = W((...s) => e.selectTabPrev && e.selectTabPrev(...s), ["left"]))]
-  }, Z(l.name), 43, oe)], 2))), 128))], 2), b("div", {
-    class: c(e.mapClasses(e.style, "cdr-tabs__gradient", "cdr-tabs__gradient--right", e.overflowRight ? "cdr-tabs__gradient--active" : "")),
-    style: C(e.gradientRightStyle)
-  }, null, 6), b("div", {
-    class: c(e.style["cdr-tabs__underline"]),
-    style: C(e.underlineStyle)
-  }, null, 6)], 2), x(e.$slots, "default")], 6);
-}
-const ue = {
-  $style: re
-}, pe = /* @__PURE__ */ ne(ie, [["render", de], ["__cssModules", ue]]);
+import s from "./CdrTabs.vue2.mjs";
+import o from "./styles/CdrTabs.module.scss.mjs";
+import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const r = {
+  $style: o
+}, f = /* @__PURE__ */ t(s, [["__cssModules", r]]);
 export {
-  pe as default
+  f as default
 };

package/dist/src/components/tabs/CdrTabs.vue2.mjs

@@ -0,0 +1,157 @@
+import { defineComponent as q, useCssModule as G, useSlots as J, computed as m, ref as i, provide as Q, onMounted as Y, openBlock as $, createElementBlock as N, normalizeClass as f, unref as s, normalizeStyle as C, createElementVNode as g, Fragment as Z, renderList as ee, withModifiers as te, withKeys as X, toDisplayString as ae, renderSlot as le, nextTick as re } from "vue";
+import { debounce as K } from "../../utils/debounce.mjs";
+import { CdrColorBackgroundPrimary as se, CdrSpaceHalfX as ne, CdrSpaceOneX as ie } from "../../../node_modules/@rei/cdr-tokens/dist/rei-dot-com/js/cdr-tokens.mjs";
+import T from "../../utils/mapClasses.mjs";
+import { modifyClassName as O } from "../../utils/buildClass.mjs";
+import { selectedTabKey as de } from "./symbols.mjs";
+const oe = ["id", "disabled", "aria-selected", "tabIndex", "onClick", "onKeyup"], ue = "cdr-tabs", ge = /* @__PURE__ */ q({
+  name: "CdrTabs",
+  __name: "CdrTabs",
+  props: {
+    /**
+     * Sets height of the tabs container element.
+     * Passing a `px` value will render tabs with a static height,
+     * passing `auto` will render tabs with variable height based on content size.
+     */
+    height: {
+      type: String,
+      default: "240px"
+    },
+    /** Sets the index of the tab that should be active on initial page load. Note that this property is zero-indexed. */
+    activeTab: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Modifies the style variants for this component
+     * @values centered, compact, full-width, no-border
+     */
+    modifier: String,
+    /**
+     * Use `small` to reduce spacing around the tabs for a denser visual design
+     * @demoSelectMultiple true
+     * @values small
+    */
+    size: String,
+    /**
+     * Sets the background color of the tab.
+     * For CdrTabs that are rendered on non-primary backgrounds.
+     * Pass the background-color into the component to ensure that the scrolling gradients render correctly.
+     */
+    backgroundColor: {
+      type: String,
+      default: se
+    }
+  },
+  setup(W) {
+    const b = W, c = G(), d = J(), M = m(() => {
+      var e, t, a, l, r, y;
+      return (a = (t = (e = d.default) == null ? void 0 : e.call(d)[0]) == null ? void 0 : t.children) != null && a.length ? (r = (l = d.default) == null ? void 0 : l.call(d)[0]) == null ? void 0 : r.children : (y = d.default) == null ? void 0 : y.call(d);
+    }), x = m(() => M.value ? M.value.map((e) => ({
+      name: e.props.name,
+      disabled: e.props.disabled,
+      id: e.props["aria-labelledby"]
+    })) : []), k = i(null), n = i(null), R = i(!1), p = i(0), o = i([]), v = i(null), S = i(null), w = i(!1), E = i(!1), u = i(0), h = i(0);
+    Q(de, k);
+    const F = m(() => b.modifier ? O("cdr-tabs", b.modifier) : ""), A = m(() => b.size ? O("cdr-tabs", b.size) : ""), H = m(() => ({
+      transform: `translateX(${u.value}px)`,
+      width: `${h.value}px`
+    })), P = m(() => ({
+      background: `linear-gradient(to left, rgba(255, 255, 255, 0), ${b.backgroundColor})`
+    })), D = m(() => ({
+      background: `linear-gradient(to right, rgba(255, 255, 255, 0),
+    ${b.backgroundColor})`
+    })), I = (e, t) => n.value === e && !t.disabled, L = () => {
+      var t;
+      let e = 0;
+      if (S.value && (e = S.value.offsetWidth), R.value = p.value > e, R.value) {
+        const a = ((t = v.value) == null ? void 0 : t.scrollLeft) ?? 0;
+        w.value = a > 1, E.value = a + 1 < p.value - e;
+      } else
+        w.value = !1, E.value = !1;
+    }, B = () => {
+      let e = [];
+      v.value && (e = Array.from(v.value.children));
+      let t = 0;
+      return e.forEach((a, l) => {
+        l > 0 && (t += b.size === "small" ? Number(ne) : Number(ie)), t += a.offsetWidth || 0;
+      }), t;
+    }, _ = () => {
+      var e, t;
+      if (o.value.length > 0 && n.value) {
+        const l = o.value[n.value].getBoundingClientRect(), r = (e = v.value) == null ? void 0 : e.getBoundingClientRect(), y = r ? l.x - r.x : 0;
+        u.value = v.value ? y - ((t = v.value) == null ? void 0 : t.scrollLeft) : 0, h.value = l.width, r && u.value + h.value >= r.width ? (h.value = Math.max(0, r.width - u.value), u.value = Math.min(u.value, r.width)) : u.value < 0 && (h.value = Math.max(0, h.value + u.value), u.value = 0);
+      }
+    }, z = async (e) => {
+      const t = o.value[e];
+      k.value = x.value[e].name, n.value = e, await re(), t.focus(), _();
+    }, U = () => {
+      if (n.value === o.value.length - 1)
+        return;
+      let t = n.value + 1;
+      o.value[t].disabled && (t += 1), t <= o.value.length - 1 && z(t);
+    }, V = () => {
+      if (n.value && n.value <= 0)
+        return;
+      let t = n.value - 1;
+      o.value[t].disabled && (t -= 1), t >= 0 && z(t);
+    }, j = () => {
+      o.value.forEach((e, t) => {
+        !e.disabled && n.value === null && (n.value = t, k.value = x.value[t].name);
+      });
+    };
+    return Y(() => {
+      var e;
+      j(), p.value = B(), L(), setTimeout(() => {
+        _();
+      }, 250), window.addEventListener("resize", K(() => {
+        p.value = B(), L(), _();
+      }, 250)), (e = v.value) == null || e.addEventListener("scroll", K(() => {
+        L(), _();
+      }, 50));
+    }), (e, t) => ($(), N("div", {
+      class: f(s(T)(s(c), ue, F.value, A.value)),
+      ref_key: "containerEl",
+      ref: S,
+      style: C({
+        height: W.height
+      })
+    }, [g("div", {
+      class: f(s(c)["cdr-tabs__gradient-container"])
+    }, [g("div", {
+      class: f(s(T)(s(c), "cdr-tabs__gradient", "cdr-tabs__gradient--left", w.value ? "cdr-tabs__gradient--active" : "")),
+      style: C(P.value)
+    }, null, 6), g("ul", {
+      class: f(s(c)["cdr-tabs__header-container"]),
+      role: "tablist",
+      ref_key: "tablist",
+      ref: v
+    }, [($(!0), N(Z, null, ee(x.value, (a, l) => ($(), N("li", {
+      key: `${a.name}-${l}`,
+      role: "presentation",
+      class: f(s(c)["cdr-tabs__header"])
+    }, [g("button", {
+      ref_for: !0,
+      ref: (r) => {
+        o.value[l] = r;
+      },
+      id: a.id,
+      disabled: a.disabled,
+      "aria-selected": I(l, a),
+      tabIndex: I(l, a) ? 0 : -1,
+      class: f(s(T)(s(c), I(l, a) ? "cdr-tabs__header-item-active" : "", "cdr-tabs__header-item", a.disabled ? "cdr-tabs__header-item--disabled" : "")),
+      role: "tab",
+      onClick: te((r) => z(l), ["prevent"]),
+      onKeyup: [X(U, ["right"]), X(V, ["left"])]
+    }, ae(a.name), 43, oe)], 2))), 128))], 2), g("div", {
+      class: f(s(T)(s(c), "cdr-tabs__gradient", "cdr-tabs__gradient--right", E.value ? "cdr-tabs__gradient--active" : "")),
+      style: C(D.value)
+    }, null, 6), g("div", {
+      class: f(s(c)["cdr-tabs__underline"]),
+      style: C(H.value)
+    }, null, 6)], 2), le(e.$slots, "default")], 6));
+  }
+});
+export {
+  ge as default
+};

package/dist/src/components/tabs/styles/CdrTabPanel.module.scss.mjs

@@ -1,9 +1,9 @@
 const t = {
-  "cdr-tab-panel": "cdr-tab-panel_13-5-3",
-  "cdr-tab-panel-enter-left": "cdr-tab-panel-enter-left_13-5-3",
-  "cdr-tab-panel-enter-right": "cdr-tab-panel-enter-right_13-5-3",
-  "cdr-tab-panel-exit-left": "cdr-tab-panel-exit-left_13-5-3",
-  "cdr-tab-panel-exit-right": "cdr-tab-panel-exit-right_13-5-3"
+  "cdr-tab-panel": "cdr-tab-panel_14-0-0-beta-0",
+  "cdr-tab-panel-enter-left": "cdr-tab-panel-enter-left_14-0-0-beta-0",
+  "cdr-tab-panel-enter-right": "cdr-tab-panel-enter-right_14-0-0-beta-0",
+  "cdr-tab-panel-exit-left": "cdr-tab-panel-exit-left_14-0-0-beta-0",
+  "cdr-tab-panel-exit-right": "cdr-tab-panel-exit-right_14-0-0-beta-0"
 };
 export {
   t as default