@rei/cedar 13.5.0-alpha.1 → 13.5.0

package/dist/src/components/select/CdrSelect.vue.mjs

@@ -1,5 +1,5 @@
 import "core-js/modules/es.array.push.js";
-import { defineComponent as L, computed as o, useCssModule as j, resolveComponent as h, openBlock as a, createBlock as S, createSlots as F, withCtx as n, createElementVNode as q, normalizeClass as u, createElementBlock as m, renderSlot as i, createCommentVNode as g, withDirectives as H, mergeProps as R, toDisplayString as I, Fragment as U, renderList as T, vModelSelect as G, createVNode as J } from "vue";
+import { defineComponent as L, computed as o, useCssModule as j, resolveComponent as h, openBlock as a, createBlock as S, createSlots as F, withCtx as n, createElementVNode as I, normalizeClass as u, createElementBlock as m, renderSlot as i, createCommentVNode as g, withDirectives as H, mergeProps as R, toDisplayString as q, Fragment as U, renderList as T, vModelSelect as G, createVNode as J } from "vue";
 import K from "../icon/comps/caret-down.vue.mjs";
 import Q from "../labelStandalone/CdrLabelStandalone.vue.mjs";
 import W from "../formError/CdrFormError.vue.mjs";
@@ -19,21 +19,23 @@ const re = L({
   inheritAttrs: !1,
   props: {
     /**
-     * `id` for the select that is mapped to the label `for` attribute. If one is not provided, it will be generated.
+     * Custom ID that is mapped to the label ‘for’ attribute. If this value is not set, it will be auto-generated.
     */
     id: {
       type: String
     },
     /**
-     * Label text. This is required for a11y even if hiding the label with `hideLabel`.
+     * Sets the text value for the select label.
+     * Required for accessibility compliance. Use ‘hideLabel’ to
+     * visually hide the label but keep it available to screenreaders.
     */
     label: {
       type: String,
       required: !0
     },
     /**
-     * Removes the label element but sets the select `aria-label` to `label` text for a11y.
-    */
+     * Visually hides the label element, but leaves it available to screen readers for accessibility compliance.
+     */
     hideLabel: {
       type: Boolean,
       default: !1
@@ -43,36 +45,60 @@ const re = L({
     */
     prompt: String,
     /**
-     * Build options programatically with data. Array of objects [{ text: String, value: String}] to give greater control. Array of strings ['String'] for simpler setup (value and text will be the same).
+     * Build options programmatically with data.
+     * Provide an array of objects [{ text: String, value: String}] for greater control
+     * or provide an array of strings ['String'] for simpler setup (value and text will be the same).
     */
     options: {
       type: Array
     },
-    // Set which background type the select renders on
+    /**
+     * Sets the background color the radio button is rendered on
+     * @values primary, secondary
+     */
     background: Y,
+    /**
+     * Sets the component's size; values can target responsive breakpoints. Example `small@lg`
+     * @demoSelectMultiple false
+     * @values small, medium, large
+    */
     size: X,
-    // Set error styling
+    /** Sets the select to an error state, displays the `error` slot if one is present. */
     error: {
       type: [Boolean, String],
       default: !1
     },
     /**
-    * Override the error message role, default is `status`.
+    * Sets the `role` attribute for the embedded error state messaging.
     */
     errorRole: {
       type: String,
-      required: !1
+      default: "status"
     },
+    /** @ignore */
     modelValue: {
       type: [String, Number, Boolean, Object, Array, Symbol, Function]
     },
+    /** Disables the input and sets appropriate styling */
     disabled: Boolean,
+    /** Sets aria-required on the input field and displays an asterisk next to the select label */
     required: Boolean,
+    /** Displays '(optional)' text next to the select label. */
     optional: Boolean,
+    /** Turns CdrSelect into a multi-select element. */
     multiple: Boolean,
+    /** Sets the height of the CdrSelect when using the multiple option.
+     * This number corresponds to the number of select options that will be visible without scrolling.
+     */
     multipleSize: Number
   },
-  emits: ["update:modelValue"],
+  emits: {
+    /**
+     * Event emitted by v-model on the radio's <input> element
+     * @param modelValue
+     */
+    "update:modelValue": null
+  },
   customOptions: {},
   setup(e, r) {
     const p = "cdr-select", $ = r.slots["helper-text"], k = r.slots.info, v = r.slots["info-action"], d = r.slots["pre-icon"], c = e.id ? e.id : _(), f = o(() => e.multiple && "cdr-select--multiple"), l = o(() => !e.modelValue && "cdr-select__prompt"), z = o(() => d && "cdr-select--preicon"), B = o(() => e.error && "cdr-select--error"), V = o(() => `cdr-select--${e.background}`), M = o(() => e.size && `${p}--${e.size}`), w = o(() => e.disabled && "cdr-select__caret--disabled"), A = o(() => {
@@ -134,12 +160,12 @@ function se(e, r, p, $, k, v) {
     optional: e.optional,
     disabled: e.disabled
   }, F({
-    default: n(() => [q("div", {
+    default: n(() => [I("div", {
       class: u(e.style["cdr-select-wrap"])
     }, [e.hasPreIcon ? (a(), m("span", {
       key: 0,
       class: u(e.style["cdr-select__pre-icon"])
-    }, [i(e.$slots, "pre-icon")], 2)) : g("", !0), H(q("select", R({
+    }, [i(e.$slots, "pre-icon")], 2)) : g("", !0), H(I("select", R({
       id: e.uniqueId,
       class: e.mapClasses(e.style, e.baseClass, e.sizeClass, e.promptClass, e.multipleClass, e.backgroundClass, e.errorClass, e.preIconClass),
       multiple: e.multiple,
@@ -157,10 +183,10 @@ function se(e, r, p, $, k, v) {
       class: u(e.style["cdr-select__prompt"]),
       value: "",
       disabled: ""
-    }, I(e.prompt), 3)) : g("", !0), (a(!0), m(U, null, T(e.computedOpts, (l) => (a(), m("option", {
+    }, q(e.prompt), 3)) : g("", !0), (a(!0), m(U, null, T(e.computedOpts, (l) => (a(), m("option", {
       key: l.text,
       value: l.value
-    }, I(l.text), 9, le))), 128)), i(e.$slots, "default")], 16, oe), [[G, e.selectModel]]), J(d, {
+    }, q(l.text), 9, le))), 128)), i(e.$slots, "default")], 16, oe), [[G, e.selectModel]]), J(d, {
       class: u(e.mapClasses(e.style, "cdr-select__caret", e.caretDisabledClass))
     }, null, 8, ["class"])], 2)]),
     _: 2

package/dist/src/components/select/styles/CdrSelect.module.scss.mjs

@@ -1,46 +1,46 @@
 const l = {
-  "cdr-icon": "cdr-icon_13-5-0-alpha-1",
-  "cdr-icon--small": "cdr-icon--small_13-5-0-alpha-1",
-  "cdr-icon--large": "cdr-icon--large_13-5-0-alpha-1",
-  "cdr-icon--small@xs": "cdr-icon--small@xs_13-5-0-alpha-1",
-  "cdr-icon--large@xs": "cdr-icon--large@xs_13-5-0-alpha-1",
-  "cdr-icon--small@sm": "cdr-icon--small@sm_13-5-0-alpha-1",
-  "cdr-icon--large@sm": "cdr-icon--large@sm_13-5-0-alpha-1",
-  "cdr-icon--small@md": "cdr-icon--small@md_13-5-0-alpha-1",
-  "cdr-icon--large@md": "cdr-icon--large@md_13-5-0-alpha-1",
-  "cdr-icon--small@lg": "cdr-icon--small@lg_13-5-0-alpha-1",
-  "cdr-icon--large@lg": "cdr-icon--large@lg_13-5-0-alpha-1",
-  "cdr-icon--inherit-color": "cdr-icon--inherit-color_13-5-0-alpha-1",
-  "cdr-label-standalone": "cdr-label-standalone_13-5-0-alpha-1",
-  "cdr-label-standalone__label-wrapper": "cdr-label-standalone__label-wrapper_13-5-0-alpha-1",
-  "cdr-label-standalone__label": "cdr-label-standalone__label_13-5-0-alpha-1",
-  "cdr-label-standalone__label--sr-only": "cdr-label-standalone__label--sr-only_13-5-0-alpha-1",
-  "cdr-label-standalone__label--disabled": "cdr-label-standalone__label--disabled_13-5-0-alpha-1",
-  "cdr-label-standalone__optional": "cdr-label-standalone__optional_13-5-0-alpha-1",
-  "cdr-label-standalone__helper": "cdr-label-standalone__helper_13-5-0-alpha-1",
-  "cdr-label-standalone__info": "cdr-label-standalone__info_13-5-0-alpha-1",
-  "cdr-label-standalone__post-content": "cdr-label-standalone__post-content_13-5-0-alpha-1",
-  "cdr-label-standalone__info-action": "cdr-label-standalone__info-action_13-5-0-alpha-1",
-  "cdr-label-standalone__input-wrap": "cdr-label-standalone__input-wrap_13-5-0-alpha-1",
-  "cdr-label-standalone__input-spacing": "cdr-label-standalone__input-spacing_13-5-0-alpha-1",
-  "cdr-form-error": "cdr-form-error_13-5-0-alpha-1",
-  "cdr-form-error__icon": "cdr-form-error__icon_13-5-0-alpha-1",
-  "cdr-select": "cdr-select_13-5-0-alpha-1",
-  "cdr-select--primary": "cdr-select--primary_13-5-0-alpha-1",
-  "cdr-select--secondary": "cdr-select--secondary_13-5-0-alpha-1",
-  "cdr-select--error": "cdr-select--error_13-5-0-alpha-1",
-  "cdr-select--preicon": "cdr-select--preicon_13-5-0-alpha-1",
-  "cdr-select__prompt": "cdr-select__prompt_13-5-0-alpha-1",
-  "cdr-select__caret": "cdr-select__caret_13-5-0-alpha-1",
-  "cdr-select__caret--disabled": "cdr-select__caret--disabled_13-5-0-alpha-1",
-  "cdr-select__pre-icon": "cdr-select__pre-icon_13-5-0-alpha-1",
-  "cdr-select--multiple": "cdr-select--multiple_13-5-0-alpha-1",
-  "cdr-select--large@xs": "cdr-select--large@xs_13-5-0-alpha-1",
-  "cdr-select--large": "cdr-select--large_13-5-0-alpha-1",
-  "cdr-select--large@sm": "cdr-select--large@sm_13-5-0-alpha-1",
-  "cdr-select--large@md": "cdr-select--large@md_13-5-0-alpha-1",
-  "cdr-select--large@lg": "cdr-select--large@lg_13-5-0-alpha-1",
-  "cdr-select-wrap": "cdr-select-wrap_13-5-0-alpha-1"
+  "cdr-icon": "cdr-icon_13-5-0",
+  "cdr-icon--small": "cdr-icon--small_13-5-0",
+  "cdr-icon--large": "cdr-icon--large_13-5-0",
+  "cdr-icon--small@xs": "cdr-icon--small@xs_13-5-0",
+  "cdr-icon--large@xs": "cdr-icon--large@xs_13-5-0",
+  "cdr-icon--small@sm": "cdr-icon--small@sm_13-5-0",
+  "cdr-icon--large@sm": "cdr-icon--large@sm_13-5-0",
+  "cdr-icon--small@md": "cdr-icon--small@md_13-5-0",
+  "cdr-icon--large@md": "cdr-icon--large@md_13-5-0",
+  "cdr-icon--small@lg": "cdr-icon--small@lg_13-5-0",
+  "cdr-icon--large@lg": "cdr-icon--large@lg_13-5-0",
+  "cdr-icon--inherit-color": "cdr-icon--inherit-color_13-5-0",
+  "cdr-label-standalone": "cdr-label-standalone_13-5-0",
+  "cdr-label-standalone__label-wrapper": "cdr-label-standalone__label-wrapper_13-5-0",
+  "cdr-label-standalone__label": "cdr-label-standalone__label_13-5-0",
+  "cdr-label-standalone__label--sr-only": "cdr-label-standalone__label--sr-only_13-5-0",
+  "cdr-label-standalone__label--disabled": "cdr-label-standalone__label--disabled_13-5-0",
+  "cdr-label-standalone__optional": "cdr-label-standalone__optional_13-5-0",
+  "cdr-label-standalone__helper": "cdr-label-standalone__helper_13-5-0",
+  "cdr-label-standalone__info": "cdr-label-standalone__info_13-5-0",
+  "cdr-label-standalone__post-content": "cdr-label-standalone__post-content_13-5-0",
+  "cdr-label-standalone__info-action": "cdr-label-standalone__info-action_13-5-0",
+  "cdr-label-standalone__input-wrap": "cdr-label-standalone__input-wrap_13-5-0",
+  "cdr-label-standalone__input-spacing": "cdr-label-standalone__input-spacing_13-5-0",
+  "cdr-form-error": "cdr-form-error_13-5-0",
+  "cdr-form-error__icon": "cdr-form-error__icon_13-5-0",
+  "cdr-select": "cdr-select_13-5-0",
+  "cdr-select--primary": "cdr-select--primary_13-5-0",
+  "cdr-select--secondary": "cdr-select--secondary_13-5-0",
+  "cdr-select--error": "cdr-select--error_13-5-0",
+  "cdr-select--preicon": "cdr-select--preicon_13-5-0",
+  "cdr-select__prompt": "cdr-select__prompt_13-5-0",
+  "cdr-select__caret": "cdr-select__caret_13-5-0",
+  "cdr-select__caret--disabled": "cdr-select__caret--disabled_13-5-0",
+  "cdr-select__pre-icon": "cdr-select__pre-icon_13-5-0",
+  "cdr-select--multiple": "cdr-select--multiple_13-5-0",
+  "cdr-select--large@xs": "cdr-select--large@xs_13-5-0",
+  "cdr-select--large": "cdr-select--large_13-5-0",
+  "cdr-select--large@sm": "cdr-select--large@sm_13-5-0",
+  "cdr-select--large@md": "cdr-select--large@md_13-5-0",
+  "cdr-select--large@lg": "cdr-select--large@lg_13-5-0",
+  "cdr-select-wrap": "cdr-select-wrap_13-5-0"
 };
 export {
   l as default

package/dist/src/components/skeleton/CdrSkeleton.vue.mjs

@@ -4,6 +4,12 @@ import m from "../../../_virtual/_plugin-vue_export-helper.mjs";
 const u = t({
   name: "CdrSkeleton",
   props: {
+    /**
+     * Toggle animation on/off.
+     * When `true`, animated gradient will be used while loading.
+     * When `false` a static background color will be used.
+     * Automatically disabled if `prefers-reduced-motion` is set by user.
+     */
     motion: {
       type: Boolean,
       default: !0

package/dist/src/components/skeleton/CdrSkeletonBone.vue.mjs

@@ -6,6 +6,11 @@ import C from "../../../_virtual/_plugin-vue_export-helper.mjs";
 const y = a({
   name: "CdrSkeletonBone",
   props: {
+    /**
+     * Sets the type of content placeholder
+     * @demoSelectMultiple false
+     * @values default, heading, line, rectangle, square
+    */
     type: {
       type: String,
       required: !1,

package/dist/src/components/skeleton/styles/CdrSkeleton.module.scss.mjs

@@ -1,5 +1,5 @@
 const e = {
-  "cdr-skeleton": "cdr-skeleton_13-5-0-alpha-1"
+  "cdr-skeleton": "cdr-skeleton_13-5-0"
 };
 export {
   e as default

package/dist/src/components/skeleton/styles/CdrSkeletonBone.module.scss.mjs

@@ -1,11 +1,11 @@
-const e = "shimmer_13-5-0-alpha-1", n = {
-  "cdr-skeleton-bone": "cdr-skeleton-bone_13-5-0-alpha-1",
-  "cdr-skeleton-bone__shimmer": "cdr-skeleton-bone__shimmer_13-5-0-alpha-1",
+const e = "shimmer_13-5-0", n = {
+  "cdr-skeleton-bone": "cdr-skeleton-bone_13-5-0",
+  "cdr-skeleton-bone__shimmer": "cdr-skeleton-bone__shimmer_13-5-0",
   shimmer: e,
-  "cdr-skeleton-bone--line": "cdr-skeleton-bone--line_13-5-0-alpha-1",
-  "cdr-skeleton-bone--heading": "cdr-skeleton-bone--heading_13-5-0-alpha-1",
-  "cdr-skeleton-bone--rectangle": "cdr-skeleton-bone--rectangle_13-5-0-alpha-1",
-  "cdr-skeleton-bone--square": "cdr-skeleton-bone--square_13-5-0-alpha-1"
+  "cdr-skeleton-bone--line": "cdr-skeleton-bone--line_13-5-0",
+  "cdr-skeleton-bone--heading": "cdr-skeleton-bone--heading_13-5-0",
+  "cdr-skeleton-bone--rectangle": "cdr-skeleton-bone--rectangle_13-5-0",
+  "cdr-skeleton-bone--square": "cdr-skeleton-bone--square_13-5-0"
 };
 export {
   n as default,

package/dist/src/components/switch/CdrSwitch.vue.mjs

@@ -14,24 +14,44 @@ const B = h({
     IconXSm: $
   },
   props: {
+    /**
+     * Sets a custom ID for the switch. If this value is not set, it will be auto-generated.
+    */
     id: {
       type: String
     },
+    /**
+     * Sets the size of the switch
+     * @demoSelectMultiple false
+     * @values medium, large
+    */
     size: {
       type: String,
       default: "medium",
       validator: (e) => b(e, ["medium", "large"])
     },
+    /**
+     * Sets the label and switch to expand to the full width of its container with `space-between`
+     */
     fullWidth: {
       type: Boolean,
       default: !1
     },
+    /**
+     * @demoIgnore true
+    */
     modelValue: {
       type: Boolean,
       required: !0
     }
   },
-  emits: ["update:modelValue"],
+  emits: {
+    /**
+     * Event emitted by v-model on switch
+     * @param modelValue
+     */
+    "update:modelValue": null
+  },
   setup(e, l) {
     const d = p(), a = e.id ? e.id : S(), c = (r) => {
       l.emit("update:modelValue", !r);

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

@@ -1,12 +1,12 @@
 const c = {
-  "cdr-switch": "cdr-switch_13-5-0-alpha-1",
-  "cdr-switch__button": "cdr-switch__button_13-5-0-alpha-1",
-  "cdr-switch__button-icon": "cdr-switch__button-icon_13-5-0-alpha-1",
-  "cdr-switch__handle": "cdr-switch__handle_13-5-0-alpha-1",
-  "cdr-switch__label": "cdr-switch__label_13-5-0-alpha-1",
-  "cdr-switch--full-width": "cdr-switch--full-width_13-5-0-alpha-1",
-  "cdr-switch--large": "cdr-switch--large_13-5-0-alpha-1",
-  "cdr-switch--medium": "cdr-switch--medium_13-5-0-alpha-1"
+  "cdr-switch": "cdr-switch_13-5-0",
+  "cdr-switch__button": "cdr-switch__button_13-5-0",
+  "cdr-switch__button-icon": "cdr-switch__button-icon_13-5-0",
+  "cdr-switch__handle": "cdr-switch__handle_13-5-0",
+  "cdr-switch__label": "cdr-switch__label_13-5-0",
+  "cdr-switch--full-width": "cdr-switch--full-width_13-5-0",
+  "cdr-switch--large": "cdr-switch--large_13-5-0",
+  "cdr-switch--medium": "cdr-switch--medium_13-5-0"
 };
 export {
   c as default

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

@@ -7,26 +7,38 @@ 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",

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

@@ -1,17 +1,17 @@
 const l = {
-  "cdr-table": "cdr-table_13-5-0-alpha-1",
-  "cdr-table--small": "cdr-table--small_13-5-0-alpha-1",
-  "cdr-table--medium": "cdr-table--medium_13-5-0-alpha-1",
-  "cdr-table--large": "cdr-table--large_13-5-0-alpha-1",
-  "cdr-table--striped": "cdr-table--striped_13-5-0-alpha-1",
-  "cdr-table--border": "cdr-table--border_13-5-0-alpha-1",
-  "cdr-table--full-width": "cdr-table--full-width_13-5-0-alpha-1",
-  "cdr-table--responsive": "cdr-table--responsive_13-5-0-alpha-1",
-  "cdr-table--hover": "cdr-table--hover_13-5-0-alpha-1",
-  "cdr-table--full-width@xs": "cdr-table--full-width@xs_13-5-0-alpha-1",
-  "cdr-table--full-width@sm": "cdr-table--full-width@sm_13-5-0-alpha-1",
-  "cdr-table--full-width@md": "cdr-table--full-width@md_13-5-0-alpha-1",
-  "cdr-table--full-width@lg": "cdr-table--full-width@lg_13-5-0-alpha-1"
+  "cdr-table": "cdr-table_13-5-0",
+  "cdr-table--small": "cdr-table--small_13-5-0",
+  "cdr-table--medium": "cdr-table--medium_13-5-0",
+  "cdr-table--large": "cdr-table--large_13-5-0",
+  "cdr-table--striped": "cdr-table--striped_13-5-0",
+  "cdr-table--border": "cdr-table--border_13-5-0",
+  "cdr-table--full-width": "cdr-table--full-width_13-5-0",
+  "cdr-table--responsive": "cdr-table--responsive_13-5-0",
+  "cdr-table--hover": "cdr-table--hover_13-5-0",
+  "cdr-table--full-width@xs": "cdr-table--full-width@xs_13-5-0",
+  "cdr-table--full-width@sm": "cdr-table--full-width@sm_13-5-0",
+  "cdr-table--full-width@md": "cdr-table--full-width@md_13-5-0",
+  "cdr-table--full-width@lg": "cdr-table--full-width@lg_13-5-0"
 };
 export {
   l as default

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

@@ -1,15 +1,26 @@
-import { defineComponent as r, inject as c, computed as i, useCssModule as d, watch as m, withDirectives as p, openBlock as u, createElementBlock as b, normalizeClass as f, renderSlot as h, vShow as v } from "vue";
-import { kebabCase as $ } from "lodash-es";
-import y from "./styles/CdrTabPanel.module.scss.mjs";
+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: {
-    name: String
+    /** 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
   },
-  emits: ["tab-change"],
   setup(e, s) {
-    const a = c("selectedTabName"), t = i(() => e.name === (a == null ? void 0 : a.value)), n = i(() => `${$(e.name)}-panel`), o = d();
+    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);
     }), {
@@ -20,8 +31,8 @@ const _ = r({
     };
   }
 }), g = ["aria-hidden", "id", "aria-labelledby"];
-function k(e, s, a, t, n, o) {
-  return p((u(), b("section", {
+function S(e, s, a, t, n, o) {
+  return p((b(), u("section", {
     tabindex: "0",
     "aria-hidden": !e.isActive,
     role: "tabpanel",
@@ -30,9 +41,9 @@ function k(e, s, a, t, n, o) {
     "aria-labelledby": e.name
   }, [h(e.$slots, "default")], 10, g)), [[v, e.isActive]]);
 }
-const w = {
-  $style: y
-}, I = /* @__PURE__ */ C(_, [["render", k], ["__cssModules", w]]);
+const k = {
+  $style: $
+}, I = /* @__PURE__ */ C(_, [["render", S], ["__cssModules", k]]);
 export {
   I as default
 };

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

@@ -8,16 +8,36 @@ 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

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

@@ -1,10 +1,10 @@
-const a = {
-  "cdr-tab-panel": "cdr-tab-panel_13-5-0-alpha-1",
-  "cdr-tab-panel-enter-left": "cdr-tab-panel-enter-left_13-5-0-alpha-1",
-  "cdr-tab-panel-enter-right": "cdr-tab-panel-enter-right_13-5-0-alpha-1",
-  "cdr-tab-panel-exit-left": "cdr-tab-panel-exit-left_13-5-0-alpha-1",
-  "cdr-tab-panel-exit-right": "cdr-tab-panel-exit-right_13-5-0-alpha-1"
+const t = {
+  "cdr-tab-panel": "cdr-tab-panel_13-5-0",
+  "cdr-tab-panel-enter-left": "cdr-tab-panel-enter-left_13-5-0",
+  "cdr-tab-panel-enter-right": "cdr-tab-panel-enter-right_13-5-0",
+  "cdr-tab-panel-exit-left": "cdr-tab-panel-exit-left_13-5-0",
+  "cdr-tab-panel-exit-right": "cdr-tab-panel-exit-right_13-5-0"
 };
 export {
-  a as default
+  t as default
 };

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

@@ -1,33 +1,33 @@
-const a = {
-  "cdr-tab-panel": "cdr-tab-panel_13-5-0-alpha-1",
-  "cdr-tab-panel-enter-left": "cdr-tab-panel-enter-left_13-5-0-alpha-1",
-  "cdr-tab-panel-enter-right": "cdr-tab-panel-enter-right_13-5-0-alpha-1",
-  "cdr-tab-panel-exit-left": "cdr-tab-panel-exit-left_13-5-0-alpha-1",
-  "cdr-tab-panel-exit-right": "cdr-tab-panel-exit-right_13-5-0-alpha-1",
-  "cdr-tabs": "cdr-tabs_13-5-0-alpha-1",
-  "cdr-tabs__header-container": "cdr-tabs__header-container_13-5-0-alpha-1",
-  "cdr-tabs__header": "cdr-tabs__header_13-5-0-alpha-1",
-  "cdr-tabs__header-item": "cdr-tabs__header-item_13-5-0-alpha-1",
-  "cdr-tabs__header-item-active": "cdr-tabs__header-item-active_13-5-0-alpha-1",
-  "cdr-tabs__header-item--disabled": "cdr-tabs__header-item--disabled_13-5-0-alpha-1",
-  "cdr-tabs__gradient-container": "cdr-tabs__gradient-container_13-5-0-alpha-1",
-  "cdr-tabs__gradient": "cdr-tabs__gradient_13-5-0-alpha-1",
-  "cdr-tabs__gradient--left": "cdr-tabs__gradient--left_13-5-0-alpha-1",
-  "cdr-tabs__gradient--right": "cdr-tabs__gradient--right_13-5-0-alpha-1",
-  "cdr-tabs__gradient--active": "cdr-tabs__gradient--active_13-5-0-alpha-1",
-  "cdr-tabs__underline": "cdr-tabs__underline_13-5-0-alpha-1",
-  "cdr-tabs__content-container": "cdr-tabs__content-container_13-5-0-alpha-1",
-  "fade-enter-active": "fade-enter-active_13-5-0-alpha-1",
-  "fade-leave-active": "fade-leave-active_13-5-0-alpha-1",
-  "fade-enter": "fade-enter_13-5-0-alpha-1",
-  "fade-leave-to": "fade-leave-to_13-5-0-alpha-1",
-  "cdr-tabs--compact": "cdr-tabs--compact_13-5-0-alpha-1",
-  "cdr-tabs__header-item-label": "cdr-tabs__header-item-label_13-5-0-alpha-1",
-  "cdr-tabs--small": "cdr-tabs--small_13-5-0-alpha-1",
-  "cdr-tabs--no-border": "cdr-tabs--no-border_13-5-0-alpha-1",
-  "cdr-tabs--full-width": "cdr-tabs--full-width_13-5-0-alpha-1",
-  "cdr-tabs--centered": "cdr-tabs--centered_13-5-0-alpha-1"
+const e = {
+  "cdr-tab-panel": "cdr-tab-panel_13-5-0",
+  "cdr-tab-panel-enter-left": "cdr-tab-panel-enter-left_13-5-0",
+  "cdr-tab-panel-enter-right": "cdr-tab-panel-enter-right_13-5-0",
+  "cdr-tab-panel-exit-left": "cdr-tab-panel-exit-left_13-5-0",
+  "cdr-tab-panel-exit-right": "cdr-tab-panel-exit-right_13-5-0",
+  "cdr-tabs": "cdr-tabs_13-5-0",
+  "cdr-tabs__header-container": "cdr-tabs__header-container_13-5-0",
+  "cdr-tabs__header": "cdr-tabs__header_13-5-0",
+  "cdr-tabs__header-item": "cdr-tabs__header-item_13-5-0",
+  "cdr-tabs__header-item-active": "cdr-tabs__header-item-active_13-5-0",
+  "cdr-tabs__header-item--disabled": "cdr-tabs__header-item--disabled_13-5-0",
+  "cdr-tabs__gradient-container": "cdr-tabs__gradient-container_13-5-0",
+  "cdr-tabs__gradient": "cdr-tabs__gradient_13-5-0",
+  "cdr-tabs__gradient--left": "cdr-tabs__gradient--left_13-5-0",
+  "cdr-tabs__gradient--right": "cdr-tabs__gradient--right_13-5-0",
+  "cdr-tabs__gradient--active": "cdr-tabs__gradient--active_13-5-0",
+  "cdr-tabs__underline": "cdr-tabs__underline_13-5-0",
+  "cdr-tabs__content-container": "cdr-tabs__content-container_13-5-0",
+  "fade-enter-active": "fade-enter-active_13-5-0",
+  "fade-leave-active": "fade-leave-active_13-5-0",
+  "fade-enter": "fade-enter_13-5-0",
+  "fade-leave-to": "fade-leave-to_13-5-0",
+  "cdr-tabs--compact": "cdr-tabs--compact_13-5-0",
+  "cdr-tabs__header-item-label": "cdr-tabs__header-item-label_13-5-0",
+  "cdr-tabs--small": "cdr-tabs--small_13-5-0",
+  "cdr-tabs--no-border": "cdr-tabs--no-border_13-5-0",
+  "cdr-tabs--full-width": "cdr-tabs--full-width_13-5-0",
+  "cdr-tabs--centered": "cdr-tabs--centered_13-5-0"
 };
 export {
-  a as default
+  e as default
 };