Improve typings and export interfaces

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rei/cedar",
-  "version": "14.0.1",
+  "version": "14.0.2",
   "description": "REI Cedar Component Library",
   "homepage": "https://rei.github.io/rei-cedar/",
   "license": "MIT",
@@ -67,7 +67,7 @@
     "autoprefixer": "^10.2.5",
     "c8": "^7.11.0",
     "chalk": "^4.1.0",
-    "chromedriver": "^115.0.0",
+    "chromedriver": "^116.0.0",
     "concat": "^1.0.3",
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",

rollupOptions.mjs

@@ -17,7 +17,7 @@ export default {
       exclude: ['node_modules/**'],
       babelHelpers: 'bundled',
       babelrc: false,
-      extensions: ['.js', '.mjs', '.vue'],
+      extensions: ['.js', '.ts', '.mjs', '.vue'],
       targets: browserTargets,
       presets: [
         [

src/components/accordion/CdrAccordion.vue

@@ -5,7 +5,7 @@ import {
 import IconCaretDown from '../icon/comps/caret-down.vue';
 import { modifyClassName } from '../../utils/buildClass';
 import mapClasses from '../../utils/mapClasses';
-import { unwrappedKey } from './symbols';
+import { unwrappedKey } from '../../types/symbols'; 
 
 /** Vertically-stacked list that allows users to expand and collapse additional content */
 

src/components/accordion/CdrAccordionGroup.vue

@@ -5,7 +5,7 @@ import {
 import { debounce } from '../../utils/debounce';
 import propValidator from '../../utils/propValidator';
 import getCurrentBreakpoint from '../../mixins/breakpoints';
-import { unwrappedKey } from './symbols';
+import { unwrappedKey } from '../../types/symbols'; 
 
 defineOptions({
   name: 'CdrAccordionGroup',

src/components/accordion/__tests__/CdrAccordion.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount, mount } from '../../../../test/vue-jest-style-workaround.js';
 import CdrAccordion from '../CdrAccordion.vue';
-import { unwrappedKey } from '../symbols';
+import { unwrappedKey } from '../../../types/symbols';
 
 const baseComponentPattern = {
   propsData: {

src/components/accordion/styles/CdrAccordion.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 //@import url('@rei/cedar/dist/style/cdr-icon.css');
 @import '../../icon/styles/CdrIcon.module.scss';
 //@import url('@rei/cedar/dist/style/cdr-accordion-group.css');

src/components/accordion/styles/CdrAccordionGroup.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 
 .cdr-accordion-group {
   display: block;

src/components/banner/styles/CdrBanner.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrBanner.vars.scss';
 
 .cdr-banner {

src/components/breadcrumb/CdrBreadcrumb.vue

@@ -1,30 +1,15 @@
 <script setup lang="ts">
 import {
-  useCssModule, computed, ref, watch, nextTick,
+  useCssModule, computed, ref, watch, nextTick, type PropType
 } from 'vue';
-import type { PropType } from 'vue';
+import { breadcrumbItem } from '../../types/interfaces';
 import uid from '../../utils/uid';
 
 /** Navigation used to reveal a page's location within the site hierarchy */
 defineOptions({
   name: 'CdrBreadcrumb',
 });
 
-/**
- * Breadcrumb data object
- * 
- * @interface breadcrumbItem
- * @url {string} The url for the breadcrumb link
- * @name {string} The display name for breadcrumb link
- * @id {string} Optional id
- */
-interface breadcrumbItem {
-  item: {
-    url: string,
-    name: string,
-    id?: string,
-  }
-}
 const props = defineProps({
    /**
      * Sets the array of a breadcrumb object containing a 'url' and 'name' property.

src/components/breadcrumb/styles/CdrBreadcrumb.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrBreadcrumb.vars.scss';
 
 .cdr-breadcrumb {

src/components/button/styles/CdrButton.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrButton.vars.scss';
 .cdr-button {
   @include cdr-button-base-mixin;

src/components/caption/styles/CdrCaption.module.scss

@@ -9,7 +9,7 @@
 
     :Base - CdrCaption
 ========================================================================== */
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrCaption.vars.scss';
 .cdr-caption {
   @include cdr-caption-container-mixin;

src/components/card/styles/CdrCard.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrCard.vars.scss';
 .cdr-card {
   @include cdr-card-base-mixin;

src/components/checkbox/styles/CdrCheckbox.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrCheckbox.vars.scss';
 //@import url('@rei/cedar/dist/style/cdr-label-wrapper.css');
 @import '../../labelWrapper/styles/CdrLabelWrapper.module.scss';

src/components/chip/styles/CdrChip.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrChip.vars.scss';
 
 .cdr-chip {

src/components/chip/styles/CdrChipGroup.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrChipGroup.vars.scss';
 
 .cdr-chip-group {

src/components/container/styles/CdrContainer.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 
 .cdr-container {
   @include cdr-text-default;

src/components/formError/styles/CdrFormError.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrFormError.vars.scss';
 
 .cdr-form-error {

src/components/formGroup/styles/CdrFormGroup.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrFormGroup.vars.scss';
 //@import '~@rei/cedar/dist/style/cdr-form-error.css';
 @import '../../formError/styles/CdrFormError.module.scss';

src/components/grid/styles/CdrGrid.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrGrid.vars.scss';
 
 .cdr-grid {

src/components/icon/styles/CdrIcon.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 
 .cdr-icon {
   display: inline-block;

src/components/image/styles/CdrImg.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 
 .cdr-image {
   max-width: 100%;

src/components/input/styles/CdrInput.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrInput.vars.scss';
 @import '../../labelStandalone/styles/CdrLabelStandalone.module.scss';
 @import '../../formError/styles/CdrFormError.module.scss';
@@ -14,7 +14,7 @@
     margin-left: -4px;
     &::before {
       content: '';
-      //ITEM_DOC: Background color of the cdr-button label
+      //ITEM_DOC: Background color of the cdr-button label
       background-color: var(--cdr-input-label-background-color, var(--cdr-color-border-input-default, #{$cdr-color-border-input-default}));
       position: absolute;
       left: -1px;
@@ -29,12 +29,12 @@
   &:active,
   &:focus,
   &:focus-within {
-    //ITEM_DOC: Background color of the cdr-input label in hover, active, focus, and focus-within states
+    //ITEM_DOC: Background color of the cdr-input label in hover, active, focus, and focus-within states
     background-color: var(--cdr-input-label-background-interaction, var(--cdr-color-background-input-default-active, #{$cdr-color-background-input-default-active}));
-    //ITEM_DOC: Box-shadow color of the cdr-input label in hover, active, focus, and focus-within states
+    //ITEM_DOC: Box-shadow color of the cdr-input label in hover, active, focus, and focus-within states
     box-shadow: inset 0 0 0 2px var(--cdr-input-label-box-shadow-interaction, var(--cdr-color-border-input-default-focus, #{$cdr-color-border-input-default-focus}));
     outline: none;
-    //ITEM_DOC: Fill color of the cdr-input label in hover, active, focus, and focus-within states
+    //ITEM_DOC: Fill color of the cdr-input label in hover, active, focus, and focus-within states
     fill: var(--cdr-input-label-fill-interaction, var(--cdr-color-text-primary, #{$cdr-color-text-primary}));
     svg {
       box-shadow: none;
@@ -64,7 +64,7 @@
 
   &--focus {
     svg {
-      //ITEM_DOC: Fill color of the cdr-input SVG when the parent is focused
+      //ITEM_DOC: Fill color of the cdr-input SVG when the parent is focused
       fill: var(--cdr-input-svg-fill-focus, var(--cdr-color-text-primary, #{$cdr-color-text-primary})) !important;
     }
   }
@@ -175,6 +175,6 @@
    .cdr-input-wrap {
     position: relative;
     flex-grow: 1;
-    //ITEM_DOC: Fill color of the cdr-input wrapper
+    //ITEM_DOC: Fill color of the cdr-input wrapper
     fill: var(--cdr-input-wrap-fill, var(--cdr-color-icon-default, #{$cdr-color-icon-default}));
   }  

src/components/labelStandalone/styles/CdrLabelStandalone.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrLabelStandalone.vars.scss';
 
 .cdr-label-standalone {

src/components/labelWrapper/styles/CdrLabelWrapper.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrLabelWrapper.vars.scss';
 
 .cdr-label-wrapper {

src/components/link/styles/CdrLink.module.scss

@@ -9,7 +9,7 @@
       :Style variants
         :Standalone
 ========================================================================== */
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrLink.vars.scss';
 .cdr-link {
   @include cdr-link-base-mixin;

src/components/list/styles/CdrList.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrList.vars.scss';
 
 .cdr-list {

src/components/modal/styles/CdrModal.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 
 $modal-animation-duration: 150ms;
 

src/components/pagination/CdrPagination.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import {
-  useCssModule, computed, ref, watch, nextTick, onMounted,
+  useCssModule, computed, ref, watch, nextTick, onMounted, type PropType
 } from 'vue';
-import type { PropType } from 'vue';
+import { paginationItem } from '../../types/interfaces';
 import mapClasses from '../../utils/mapClasses';
 import propValidator from '../../utils/propValidator';
 import IconCaretLeft from '../icon/comps/caret-left.vue';
@@ -15,11 +15,6 @@ defineOptions({
   name: 'CdrPagination'
 });
 
-interface paginationItem {
-  page: number,
-  url: string,
-  ellip?: boolean
-}
 const props = defineProps({
   /**
    * Define a custom slug for the generated pagination item IDs. Slug is randomly generated if no ID provided.

src/components/pagination/styles/CdrPagination.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import '../../icon/styles/CdrIcon.module.scss';
 @import '../../select/styles/CdrSelect.module.scss';
 

src/components/popover/styles/CdrPopover.module.scss

@@ -4,7 +4,7 @@
 @import '../../popup/styles/CdrPopup.module.scss';
 @import '../../button/styles/CdrButton.module.scss';
 @import '../../icon/styles/CdrIcon.module.scss';
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 
 .cdr-popover{
   &--position {

src/components/popup/styles/CdrPopup.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrPopup.vars.scss';
 
 .cdr-popup {

src/components/quote/styles/CdrQuote.module.scss

@@ -1,6 +1,6 @@
 //@import url('@rei/cedar/dist/style/cdr-text.css');
 @import '../../text/styles/CdrText.module.scss';
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrQuote.vars.scss';
 
 /* ==========================================================================

src/components/radio/styles/CdrRadio.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 @import './vars/CdrRadio.vars.scss';
 //@import url('@rei/cedar/dist/style/cdr-label-wrapper.css');
 @import '../../labelWrapper/styles/CdrLabelWrapper.module.scss';

src/components/rating/styles/CdrRating.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/settings/index.scss';
+@import '../../../styles/settings/_index.scss';
 
 $rating-color: #2b6692;
 $empty-star: '\2606';