@rei/cedar 15.2.0 → 15.3.0

package/dist/utils/mapClasses.mjs

@@ -0,0 +1,10 @@
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/esnext.iterator.reduce.js";
+function n(r, ...i) {
+  return i.reduce((t, o) => t.concat((o || "").split(" ")), []).map((t) => r[t]).filter((t) => t).join(" ");
+}
+export {
+  n as default
+};

package/dist/utils/mediaObject.mjs

@@ -0,0 +1,69 @@
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.reduce.js";
+import { breakpoints as h } from "./other.mjs";
+const f = {
+  left: "'media content'",
+  right: "'content media'",
+  bottom: "'content' 'media'",
+  top: "'media' 'content'"
+}, e = (o) => o, a = (o) => [1, o], p = (o) => [o, 1], w = {
+  right: {
+    columns: a,
+    rows: e
+  },
+  left: {
+    columns: p,
+    rows: e
+  },
+  top: {
+    columns: e,
+    rows: p
+  },
+  bottom: {
+    columns: e,
+    rows: a
+  }
+}, d = (o, n) => {
+  if (!o)
+    return "auto";
+  let c;
+  return typeof o == "string" ? c = n(o) : c = h.reduce((s, u) => {
+    const r = o[u];
+    return s[u] = n(r), s;
+  }, {}), c;
+}, y = (o, n) => o ? typeof o == "string" ? o : o[n] : "auto", B = (o, n, c) => {
+  const s = {}, u = {};
+  if (typeof o == "string") {
+    const r = w[o];
+    s.rows = d(c, r.rows), s.columns = d(n, r.columns), u["--cdr-media-object-media-position"] = f[o];
+  } else {
+    const r = {
+      xs: "auto",
+      sm: "auto",
+      md: "auto",
+      lg: "auto"
+    }, m = {
+      xs: "auto",
+      sm: "auto",
+      md: "auto",
+      lg: "auto"
+    }, i = (t, l) => {
+      const g = w[l], x = y(c, t);
+      r[t] = g.rows(x);
+      const S = y(n, t);
+      m[t] = g.columns(S);
+    };
+    h.forEach((t) => {
+      const l = o[t];
+      i(t, l), i(t, l), u[`--cdr-media-object-media-position-${t}`] = f[l];
+    }), s.rows = r, s.columns = m;
+  }
+  return {
+    props: s,
+    inlineStyles: u
+  };
+};
+export {
+  B as getLayoutStyling
+};

package/dist/utils/other.mjs

@@ -0,0 +1,25 @@
+import "core-js/modules/esnext.iterator.map.js";
+import * as r from "@rei/cdr-tokens";
+const l = (e) => String(e[0]).toUpperCase() + String(e).slice(1), p = ["xs", "sm", "md", "lg"], n = {
+  ...["zero", "sixteenth-x", "eighth-x", "three-sixteenth-x", "quarter-x", "three-eighth-x", "half-x", "three-quarter-x", "one-x", "one-and-a-half-x", "two-x", "three-x", "four-x"].reduce((e, a) => {
+    const c = `CdrSpace${a.split("-").map(l).join("")}`, s = `${r[c]}px`;
+    return e[a] = s, e;
+  }, {}),
+  "scale-0": "var(--cdr-space-scale-0)",
+  "scale-1": "var(--cdr-space-scale-1)",
+  "scale-2": "var(--cdr-space-scale-2)",
+  "scale-3": "var(--cdr-space-scale-3)",
+  "scale-4": "var(--cdr-space-scale-4)",
+  "scale-5": "var(--cdr-space-scale-5)",
+  "scale-6": "var(--cdr-space-scale-6)",
+  "scale-7": "var(--cdr-space-scale-7)",
+  "scale-8": "var(--cdr-space-scale-8)",
+  "scale-0--1": "var(--cdr-space-scale-0--1)",
+  "scale-3--4": "var(--cdr-space-scale-3--4)",
+  "scale-3--5": "var(--cdr-space-scale-3--5)"
+};
+export {
+  p as breakpoints,
+  l as capitalize,
+  n as spacing
+};

package/dist/utils/propValidator.mjs

@@ -0,0 +1,12 @@
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.every.js";
+import "core-js/modules/esnext.iterator.some.js";
+function f(s, p, u = !0, t = null) {
+  return s.split(" ").every((r) => {
+    const n = p.some((e) => u ? r === e || r === `${e}@xs` || r === `${e}@sm` || r === `${e}@md` || r === `${e}@lg` : r === e);
+    return n || (t ? t(`Invalid prop value: ${r}`) : console.error(`Invalid prop value: ${r}`)), n;
+  });
+}
+export {
+  f as default
+};

package/dist/utils/surface.mjs

@@ -0,0 +1,51 @@
+import "core-js/modules/es.array.push.js";
+const u = (o, t) => {
+  const e = [t];
+  if (o.modifier && e.push(`${t}--modifier-${o.modifier}`), o.background) {
+    const d = `${t}--background-${o.background}`;
+    e.push(d);
+  }
+  if (o.withBorder) {
+    const d = `${t}--border-color-${o.borderColor || "primary"}`;
+    e.push(d);
+    const i = `${t}--border-width-${o.borderWidth || "sixteenth-x"}`;
+    e.push(i);
+    const n = `${t}--border-style-${o.borderStyle || "solid"}`;
+    e.push(n), e.push(`${t}--border`);
+  }
+  if (o.radius) {
+    const d = `${t}--radius-${o.radius}`;
+    e.push(d);
+  }
+  if (o.shadow) {
+    const d = `${t}--shadow-${o.shadow}`;
+    e.push(d);
+  }
+  return {
+    classes: e
+  };
+}, h = (o, t) => {
+  const {
+    classes: e
+  } = u(o, t), {
+    checked: d,
+    loading: i,
+    disabled: n,
+    ...c
+  } = o, r = {
+    ...c
+  };
+  return r.type = "button", r["aria-checked"] = !!d, n && (r.disabled = n), i && (r["data-loading"] = i), delete r.layout, delete r.modifier, delete r.tag, {
+    classes: e,
+    ...r
+  };
+}, s = (o = {}) => ({
+  flow: "column",
+  gap: "three-eighth-x",
+  ...o
+});
+export {
+  s as getDefaultLayout,
+  u as getSurfaceProps,
+  h as getSurfaceSelectionProps
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rei/cedar",
-  "version": "15.2.0",
+  "version": "15.3.0",
   "description": "REI Cedar Component Library",
   "homepage": "https://rei.github.io/rei-cedar/",
   "license": "MIT",
@@ -13,12 +13,12 @@
   },
   "author": "REI Software Engineering",
   "main": "./dist/cedar.umd.js",
-  "module": "./dist/src/lib.mjs",
+  "module": "./dist/lib.mjs",
   "types": "./dist/lib.d.ts",
   "exports": {
     ".": {
       "types": "./dist/lib.d.ts",
-      "import": "./dist/src/lib.mjs",
+      "import": "./dist/lib.mjs",
       "require": "./dist/cedar.umd.js"
     },
     "./dist/": "./dist/"
@@ -40,25 +40,31 @@
     "build:copycss": "node build/copy-css.js",
     "build:umd": "vite build --config vite.umd.config.ts",
     "build:variables": "node build/component-variables-transfer.js",
-    "preview": "vite preview",
+    "pages": "vite build --config vite.pages.config.mts",
+    "preview": "vite preview --config vite.pages.config.mts",
     "unit": "vitest run",
     "watch": "vitest",
     "coverage": "vitest run --coverage",
-    "e2e": "nightwatch --config test/e2e/nightwatch.conf.js",
-    "test": "npm-run-all unit e2e",
+    "test:playwright": "playwright test",
+    "test": "npm-run-all unit test:playwright",
     "clean": "rm -rf dist",
-    "lint": "npm-run-all lint:js lint:styles lint:types",
+    "lint": "npm-run-all --continue-on-error lint:js lint:styles lint:types lint:report",
     "lint:js": "eslint src --ext .js,.vue,.ts,.mjs",
     "lint:styles": "stylelint src/**/*.scss",
+    "lint:styles:fix": "stylelint 'src/**/*.scss' --fix",
+    "lint:styles:report": "stylelint src/**/*.scss --custom-formatter=./stylelint-report-formatter.js",
     "lint:types": "vue-tsc --noEmit",
+    "lint:report": "node lint-report-generator.mjs",
+    "lint:full": "npm-run-all lint lint:report",
     "prepush": "npm-run-all lint unit",
     "create": "node generator.js",
     "prerelease": "npm-publish-prerelease"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.10.1",
     "@babel/preset-env": "^7.18.2",
     "@emotion/is-prop-valid": "^1.2.1",
-    "@rei/cdr-tokens": "^12.3.0",
+    "@playwright/test": "^1.49.0",
     "@rei/cedar-icons": "^2.6.1",
     "@rollup/plugin-babel": "^6.0.3",
     "@types/tabbable": "^3.1.2",
@@ -70,7 +76,6 @@
     "autoprefixer": "^10.2.5",
     "c8": "^7.11.0",
     "chalk": "^4.1.0",
-    "chromedriver": "127",
     "concat": "^1.0.3",
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
@@ -89,28 +94,27 @@
     "jsdom-global": "^3.0.2",
     "klaw-sync": "^6.0.0",
     "lodash-es": "^4.17.21",
-    "nightwatch": "^3.2.1",
     "npm-publish-prerelease": "^1.0.2",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.31",
     "postcss-calc": "^8.0.0",
     "postcss-pxtorem": "^6.0.0",
-    "postcss-scss": "^4.0.0",
-    "puppeteer": "22.15.0",
+    "postcss-scss": "^4.0.9",
     "sass": "^1.32.11",
     "sinon": "^11.1.0",
-    "stylelint": "^16.1.0",
-    "stylelint-config-recommended-scss": "^14.0.0",
-    "stylelint-scss": "^6.0.0",
+    "stylelint": "^16.10.0",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-scss": "^6.8.1",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.6",
+    "typescript": "5.6.3",
     "vite": "^5.0.1",
     "vite-plugin-dts": "^3.3.1",
     "vitest": "^1.1.1",
     "vue-docgen-cli": "^4.79.0",
     "vue-eslint-parser": "^9.3.0",
     "vue-router": "^4.0.10",
-    "vue-tsc": "^2.0.29"
+    "vue-tsc": "2.1.10"
   },
   "engines": {
     "node": ">= 20.0.0",
@@ -127,6 +131,7 @@
     }
   },
   "dependencies": {
+    "@rei/cdr-tokens": "^12.5.2",
     "tabbable": "^4.0.0"
   },
   "peerDependencies": {

package/dist/node_modules/@rei/cdr-tokens/dist/rei-dot-com/js/cdr-tokens.mjs

@@ -1,13 +0,0 @@
-const o = "#ffffff", r = "2", d = "4", n = "9999", t = "8", c = "16", s = "32", a = "768", C = "992", e = "1232";
-export {
-  e as CdrBreakpointLg,
-  C as CdrBreakpointMd,
-  a as CdrBreakpointSm,
-  o as CdrColorBackgroundPrimary,
-  n as CdrRadiusRound,
-  r as CdrRadiusSoft,
-  d as CdrRadiusSofter,
-  t as CdrSpaceHalfX,
-  c as CdrSpaceOneX,
-  s as CdrSpaceTwoX
-};

package/dist/src/components/abstract/CdrAbstract.vue.mjs

@@ -1,9 +0,0 @@
-import s from "./CdrAbstract.vue2.mjs";
-import o from "./styles/CdrAbstract.module.scss.mjs";
-import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const r = {
-  $style: o
-}, f = /* @__PURE__ */ t(s, [["__cssModules", r]]);
-export {
-  f as default
-};

package/dist/src/components/abstract/styles/CdrAbstract.module.scss.mjs

@@ -1,6 +0,0 @@
-const t = {
-  "cdr-abstract": "cdr-abstract_15-2-0"
-};
-export {
-  t as default
-};

package/dist/src/components/accordion/CdrAccordion.vue.mjs

@@ -1,9 +0,0 @@
-import o from "./CdrAccordion.vue2.mjs";
-import s from "./styles/CdrAccordion.module.scss.mjs";
-import r from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const t = {
-  $style: s
-}, f = /* @__PURE__ */ r(o, [["__cssModules", t]]);
-export {
-  f as default
-};

package/dist/src/components/accordion/CdrAccordionGroup.vue.mjs

@@ -1,9 +0,0 @@
-import o from "./CdrAccordionGroup.vue2.mjs";
-import s from "./styles/CdrAccordionGroup.module.scss.mjs";
-import r from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const t = {
-  $style: s
-}, f = /* @__PURE__ */ r(o, [["__cssModules", t]]);
-export {
-  f as default
-};

package/dist/src/components/accordion/styles/CdrAccordion.module.scss.mjs

@@ -1,34 +0,0 @@
-const c = {
-  "cdr-icon": "cdr-icon_15-2-0",
-  "cdr-icon--small": "cdr-icon--small_15-2-0",
-  "cdr-icon--large": "cdr-icon--large_15-2-0",
-  "cdr-icon--small@xs": "cdr-icon--small@xs_15-2-0",
-  "cdr-icon--large@xs": "cdr-icon--large@xs_15-2-0",
-  "cdr-icon--small@sm": "cdr-icon--small@sm_15-2-0",
-  "cdr-icon--large@sm": "cdr-icon--large@sm_15-2-0",
-  "cdr-icon--small@md": "cdr-icon--small@md_15-2-0",
-  "cdr-icon--large@md": "cdr-icon--large@md_15-2-0",
-  "cdr-icon--small@lg": "cdr-icon--small@lg_15-2-0",
-  "cdr-icon--large@lg": "cdr-icon--large@lg_15-2-0",
-  "cdr-icon--inherit-color": "cdr-icon--inherit-color_15-2-0",
-  "cdr-accordion-group": "cdr-accordion-group_15-2-0",
-  "cdr-accordion": "cdr-accordion_15-2-0",
-  "cdr-accordion__button": "cdr-accordion__button_15-2-0",
-  "cdr-accordion__label": "cdr-accordion__label_15-2-0",
-  "cdr-accordion__header": "cdr-accordion__header_15-2-0",
-  "cdr-accordion__header--unwrapped": "cdr-accordion__header--unwrapped_15-2-0",
-  "cdr-accordion__icon": "cdr-accordion__icon_15-2-0",
-  "cdr-accordion--open": "cdr-accordion--open_15-2-0",
-  "cdr-accordion__content-container": "cdr-accordion__content-container_15-2-0",
-  "cdr-tabs--open": "cdr-tabs--open_15-2-0",
-  "cdr-accordion__content": "cdr-accordion__content_15-2-0",
-  "cdr-accordion--closed": "cdr-accordion--closed_15-2-0",
-  "cdr-accordion--unwrap": "cdr-accordion--unwrap_15-2-0",
-  "cdr-accordion--border-aligned": "cdr-accordion--border-aligned_15-2-0",
-  "cdr-accordion--no-spacing": "cdr-accordion--no-spacing_15-2-0",
-  "cdr-accordion--compact": "cdr-accordion--compact_15-2-0",
-  "cdr-accordion--focused": "cdr-accordion--focused_15-2-0"
-};
-export {
-  c as default
-};

package/dist/src/components/accordion/styles/CdrAccordionGroup.module.scss.mjs

@@ -1,7 +0,0 @@
-const c = {
-  "cdr-accordion-group": "cdr-accordion-group_15-2-0",
-  "cdr-accordion": "cdr-accordion_15-2-0"
-};
-export {
-  c as default
-};

package/dist/src/components/banner/CdrBanner.vue.mjs

@@ -1,9 +0,0 @@
-import s from "./CdrBanner.vue2.mjs";
-import o from "./styles/CdrBanner.module.scss.mjs";
-import r from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const t = {
-  $style: o
-}, f = /* @__PURE__ */ r(s, [["__cssModules", t]]);
-export {
-  f as default
-};

package/dist/src/components/banner/styles/CdrBanner.module.scss.mjs

@@ -1,19 +0,0 @@
-const n = {
-  "cdr-banner": "cdr-banner_15-2-0",
-  "cdr-banner__wrapper--prominence": "cdr-banner__wrapper--prominence_15-2-0",
-  "cdr-banner__main": "cdr-banner__main_15-2-0",
-  "cdr-banner__icon-left": "cdr-banner__icon-left_15-2-0",
-  "cdr-banner__message": "cdr-banner__message_15-2-0",
-  "cdr-banner__message-body": "cdr-banner__message-body_15-2-0",
-  "cdr-banner__icon-right": "cdr-banner__icon-right_15-2-0",
-  "cdr-banner__info-action": "cdr-banner__info-action_15-2-0",
-  "cdr-banner--default": "cdr-banner--default_15-2-0",
-  "cdr-banner__wrapper": "cdr-banner__wrapper_15-2-0",
-  "cdr-banner--info": "cdr-banner--info_15-2-0",
-  "cdr-banner--warning": "cdr-banner--warning_15-2-0",
-  "cdr-banner--success": "cdr-banner--success_15-2-0",
-  "cdr-banner--error": "cdr-banner--error_15-2-0"
-};
-export {
-  n as default
-};

package/dist/src/components/breadcrumb/CdrBreadcrumb.vue.mjs

@@ -1,9 +0,0 @@
-import s from "./CdrBreadcrumb.vue2.mjs";
-import o from "./styles/CdrBreadcrumb.module.scss.mjs";
-import r from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const t = {
-  $style: o
-}, f = /* @__PURE__ */ r(s, [["__cssModules", t]]);
-export {
-  f as default
-};

package/dist/src/components/breadcrumb/styles/CdrBreadcrumb.module.scss.mjs

@@ -1,12 +0,0 @@
-const r = {
-  "cdr-breadcrumb": "cdr-breadcrumb_15-2-0",
-  "cdr-breadcrumb__list": "cdr-breadcrumb__list_15-2-0",
-  "cdr-breadcrumb__item": "cdr-breadcrumb__item_15-2-0",
-  "cdr-breadcrumb__link": "cdr-breadcrumb__link_15-2-0",
-  "cdr-breadcrumb__delimiter": "cdr-breadcrumb__delimiter_15-2-0",
-  "cdr-breadcrumb__ellipses": "cdr-breadcrumb__ellipses_15-2-0",
-  "cdr-breadcrumb__ellipses-icon": "cdr-breadcrumb__ellipses-icon_15-2-0"
-};
-export {
-  r as default
-};

package/dist/src/components/button/CdrButton.vue.mjs

@@ -1,9 +0,0 @@
-import o from "./CdrButton.vue2.mjs";
-import s from "./styles/CdrButton.module.scss.mjs";
-import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const r = {
-  $style: s
-}, f = /* @__PURE__ */ t(o, [["__cssModules", r]]);
-export {
-  f as default
-};

package/dist/src/components/button/styles/CdrButton.module.scss.mjs

@@ -1,36 +0,0 @@
-const t = {
-  "cdr-button": "cdr-button_15-2-0",
-  "cdr-button--has-icon-left": "cdr-button--has-icon-left_15-2-0",
-  "cdr-button--has-icon-right": "cdr-button--has-icon-right_15-2-0",
-  "cdr-button--primary": "cdr-button--primary_15-2-0",
-  "cdr-button--secondary": "cdr-button--secondary_15-2-0",
-  "cdr-button--dark": "cdr-button--dark_15-2-0",
-  "cdr-button--sale": "cdr-button--sale_15-2-0",
-  "cdr-button--link": "cdr-button--link_15-2-0",
-  "cdr-button--large": "cdr-button--large_15-2-0",
-  "cdr-button--medium": "cdr-button--medium_15-2-0",
-  "cdr-button--small": "cdr-button--small_15-2-0",
-  "cdr-button--icon-only": "cdr-button--icon-only_15-2-0",
-  "cdr-button--icon-only-large": "cdr-button--icon-only-large_15-2-0",
-  "cdr-button--with-background": "cdr-button--with-background_15-2-0",
-  "cdr-button--full-width": "cdr-button--full-width_15-2-0",
-  "cdr-button--small@xs": "cdr-button--small@xs_15-2-0",
-  "cdr-button--medium@xs": "cdr-button--medium@xs_15-2-0",
-  "cdr-button--large@xs": "cdr-button--large@xs_15-2-0",
-  "cdr-button--full-width@xs": "cdr-button--full-width@xs_15-2-0",
-  "cdr-button--small@sm": "cdr-button--small@sm_15-2-0",
-  "cdr-button--medium@sm": "cdr-button--medium@sm_15-2-0",
-  "cdr-button--large@sm": "cdr-button--large@sm_15-2-0",
-  "cdr-button--full-width@sm": "cdr-button--full-width@sm_15-2-0",
-  "cdr-button--small@md": "cdr-button--small@md_15-2-0",
-  "cdr-button--medium@md": "cdr-button--medium@md_15-2-0",
-  "cdr-button--large@md": "cdr-button--large@md_15-2-0",
-  "cdr-button--full-width@md": "cdr-button--full-width@md_15-2-0",
-  "cdr-button--small@lg": "cdr-button--small@lg_15-2-0",
-  "cdr-button--medium@lg": "cdr-button--medium@lg_15-2-0",
-  "cdr-button--large@lg": "cdr-button--large@lg_15-2-0",
-  "cdr-button--full-width@lg": "cdr-button--full-width@lg_15-2-0"
-};
-export {
-  t as default
-};

package/dist/src/components/caption/CdrCaption.vue.mjs

@@ -1,9 +0,0 @@
-import o from "./CdrCaption.vue2.mjs";
-import s from "./styles/CdrCaption.module.scss.mjs";
-import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const r = {
-  $style: s
-}, f = /* @__PURE__ */ t(o, [["__cssModules", r]]);
-export {
-  f as default
-};

package/dist/src/components/caption/styles/CdrCaption.module.scss.mjs

@@ -1,7 +0,0 @@
-const c = {
-  "cdr-caption": "cdr-caption_15-2-0",
-  "cdr-caption__summary": "cdr-caption__summary_15-2-0"
-};
-export {
-  c as default
-};

package/dist/src/components/card/CdrCard.vue.mjs

@@ -1,9 +0,0 @@
-import s from "./CdrCard.vue2.mjs";
-import o from "./styles/CdrCard.module.scss.mjs";
-import r from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const t = {
-  $style: o
-}, f = /* @__PURE__ */ r(s, [["__cssModules", t]]);
-export {
-  f as default
-};

package/dist/src/components/card/styles/CdrCard.module.scss.mjs

@@ -1,6 +0,0 @@
-const c = {
-  "cdr-card": "cdr-card_15-2-0"
-};
-export {
-  c as default
-};

package/dist/src/components/checkbox/CdrCheckbox.vue.mjs

@@ -1,9 +0,0 @@
-import o from "./CdrCheckbox.vue2.mjs";
-import s from "./styles/CdrCheckbox.module.scss.mjs";
-import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const r = {
-  $style: s
-}, f = /* @__PURE__ */ t(o, [["__cssModules", r]]);
-export {
-  f as default
-};