@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/progress-meter/progress-meter.js

@@ -1,30 +1,49 @@
-import { css as p, html as l } from "lit";
-import { property as s } from "lit/decorators.js";
-import { nanoid as g } from "nanoid";
-import { Cre8Element as m } from "../cre8-element.js";
-const h = p`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-content-brand);width:100%;height:var(--cre8-progress-meter-height, 0.5rem);background:var(--cre8-color-bg-transparent);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);border-color:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-round)}.cre8-c-progress-meter--knockout .cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-content-brand-knockout);border-color:var(--cre8-color-border-default)}.cre8-c-progress-meter--error .cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-bg-error-strong)}.cre8-c-progress-meter--warning .cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-bg-warning-strong)}.cre8-c-progress-meter--success .cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-bg-success-strong)}.cre8-c-progress-meter--indeterminate .cre8-c-progress-meter__progress{--cre8-progress-meter-background: repeating-linear-gradient(-45deg, #009bdf, #009bdf 10px, #00628e 10px, #00628e 20px)}.cre8-c-progress-meter__sr-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}progress{color:var(--cre8-progress-meter-background);appearance:none}progress::-moz-progress-bar{background:var(--cre8-progress-meter-background);border-radius:var(--cre8-border-radius-round)}progress::-webkit-progress-bar{background:var(--cre8-color-bg-subtle);border-radius:var(--cre8-border-radius-round)}progress::-webkit-progress-value{background:var(--cre8-progress-meter-background);border-radius:var(--cre8-border-radius-round)}.cre8-c-progress-meter__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}`;
-var u = Object.defineProperty, t = (r, a, d, f) => {
-  for (var o = void 0, i = r.length - 1, n; i >= 0; i--)
-    (n = r[i]) && (o = n(a, d, o) || o);
-  return o && u(a, d, o), o;
-}, b = /* @__PURE__ */ ((r) => (r[r.error = 0] = "error", r[r.warning = 1] = "warning", r[r.success = 2] = "success", r[r.undefined = 3] = "undefined", r))(b || {});
-const c = class c extends m {
-  constructor() {
-    super(...arguments), this.max = 100;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.fieldId = this.fieldId || g();
-  }
-  render() {
-    const a = this.componentClassNames("cre8-c-progress-meter", {
-      "cre8-c-progress-meter--error": this.status === "error",
-      "cre8-c-progress-meter--warning": this.status === "warning",
-      "cre8-c-progress-meter--success": this.status === "success",
-      "cre8-c-progress-meter--knockout": this.knockout
-    });
-    return l`<div class="${a}">
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { nanoid } from 'nanoid';
+import { Cre8Element } from '../cre8-element';
+import styles from './progress-meter.styles.js';
+export var status;
+(function (status) {
+    status[status["error"] = 0] = "error";
+    status[status["warning"] = 1] = "warning";
+    status[status["success"] = 2] = "success";
+    status[status["undefined"] = 3] = "undefined";
+})(status || (status = {}));
+/**
+ * A progress meter provides feedback that the system is working and gives
+ * the user an indication of how much time they will wait.
+ * This indicator should be used when the system response time is longer and determinable.
+ */
+export class Cre8ProgressMeter extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /*
+         * The max number for the progress bar (defaulted to 100 to match percentages)
+         * @attr {number}
+         */
+        this.max = 100;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.fieldId = this.fieldId || nanoid();
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-progress-meter', {
+            'cre8-c-progress-meter--error': this.status === 'error',
+            'cre8-c-progress-meter--warning': this.status === 'warning',
+            'cre8-c-progress-meter--success': this.status === 'success',
+            'cre8-c-progress-meter--knockout': this.knockout,
+        });
+        return html `<div class="${componentClassNames}">
       <label class="cre8-c-progress-meter__label" for="${this.fieldId}">${this.label}</label>
-      <span class="cre8-c-progress-meter__sr-only">${Math.round(this.value / this.max * 100)}%</span>
+      <span class="cre8-c-progress-meter__sr-only">${Math.round((this.value / this.max) * 100)}%</span>
       <progress
         class="cre8-c-progress-meter__progress"
         aria-hidden="true"
@@ -33,36 +52,34 @@ const c = class c extends m {
         max="${this.max}"
         value="${this.value}"
       >
-        ${Math.round(this.value / this.max * 100)}%
+        ${Math.round((this.value / this.max) * 100)}%
       </progress>
     </div>`;
-  }
-};
-c.styles = [h];
-let e = c;
-t([
-  s()
-], e.prototype, "status");
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "knockout");
-t([
-  s()
-], e.prototype, "max");
-t([
-  s()
-], e.prototype, "value");
-t([
-  s()
-], e.prototype, "fieldId");
-t([
-  s()
-], e.prototype, "name");
-t([
-  s()
-], e.prototype, "label");
-customElements.get("cre8-progress-meter") === void 0 && customElements.define("cre8-progress-meter", e);
-export {
-  e as Cre8ProgressMeter,
-  b as status
-};
+    }
+}
+Cre8ProgressMeter.styles = [styles];
+__decorate([
+    property()
+], Cre8ProgressMeter.prototype, "status", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8ProgressMeter.prototype, "knockout", void 0);
+__decorate([
+    property()
+], Cre8ProgressMeter.prototype, "max", void 0);
+__decorate([
+    property()
+], Cre8ProgressMeter.prototype, "value", void 0);
+__decorate([
+    property()
+], Cre8ProgressMeter.prototype, "fieldId", void 0);
+__decorate([
+    property()
+], Cre8ProgressMeter.prototype, "name", void 0);
+__decorate([
+    property()
+], Cre8ProgressMeter.prototype, "label", void 0);
+if (customElements.get('cre8-progress-meter') === undefined) {
+    customElements.define('cre8-progress-meter', Cre8ProgressMeter);
+}
+//# sourceMappingURL=progress-meter.js.map

package/lib/components/progress-meter/progress-meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-meter.js","sourceRoot":"","sources":["../../../components/progress-meter/progress-meter.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAGhD,MAAM,CAAN,IAAY,MAEV;AAFF,WAAY,MAAM;IAChB,qCAAO,CAAA;IAAE,yCAAS,CAAA;IAAE,yCAAS,CAAA;IAAE,6CAAS,CAAA;AACzC,CAAC,EAFU,MAAM,KAAN,MAAM,QAEhB;AAEF;;;;GAIG;AACH,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IAAlD;;QAsBE;;;WAGG;QAEC,QAAG,GAAW,GAAG,CAAC;IA2DxB,CAAC;IA5BC,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;IAC5C,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,uBAAuB,EAAE;YAC1E,8BAA8B,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;YACvD,gCAAgC,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAC3D,gCAAgC,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAC3D,iCAAiC,EAAE,IAAI,CAAC,QAAQ;SACnD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA,eAAe,mBAAmB;yDACM,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,KAAK;qDAC/B,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;;;;aAIjF,IAAI,CAAC,OAAO;eACV,IAAI,CAAC,IAAI;eACT,IAAI,CAAC,GAAG;iBACN,IAAI,CAAC,KAAK;;UAEjB,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;;WAExC,CAAC;IACV,CAAC;;AApFQ,wBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAYvB;IADH,QAAQ,EAAE;iDACkC;AAOzC;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACpB;AAOnB;IADH,QAAQ,EAAE;8CACW;AAQlB;IADH,QAAQ,EAAE;gDACO;AAOd;IADH,QAAQ,EAAE;kDACU;AAOjB;IADH,QAAQ,EAAE;+CACO;AAOd;IADH,QAAQ,EAAE;gDACO;AAgCpB,IAAI,cAAc,CAAC,GAAG,CAAC,qBAAqB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC1D,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAC;AACpE,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './progress-meter.styles.js';\n\n\nexport enum status {\n  'error', 'warning', 'success', undefined\n }\n\n/**\n * A progress meter provides feedback that the system is working and gives\n * the user an indication of how much time they will wait.\n * This indicator should be used when the system response time is longer and determinable.\n */\nexport class Cre8ProgressMeter extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Progress Status\n   * - **Default** renders a meter with default status fill\n   * - **Error** renders a meter with an error status fill\n   * - **Warning** renders a meter with a warning status\n   * - **Success** renders a meter with a success status fill\n   *\n   * @attr {status}\n   */\n  @property()\n      status?: 'error' | 'warning' | 'success';\n\n  /*\n   * Determines if the progress meter is displayed on a dark background (uses knockout colors for contrast)\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      knockout?: boolean;\n\n  /*\n   * The max number for the progress bar (defaulted to 100 to match percentages)\n   * @attr {number}\n   */\n  @property()\n      max: number = 100;\n\n  /*\n   * The the percentage of the bar that is filled in (defaulted to match percentages)\n   * I.E a value of 50 with a 100 max would result in half the meter being filled\n   * @attr {number}\n   */\n  @property()\n      value: number;\n\n  /**\n   * Progress Meter FieldId\n   * @attr {string}\n   */\n  @property()\n      fieldId?: string;\n\n  /**\n   * Progress Meter name\n   * @attr {string}\n   */\n  @property()\n      name?: string;\n\n  /**\n   * Progress Meter label\n   * @attr {string}\n   */\n  @property()\n      label: string;\n\n  connectedCallback() {\n      super.connectedCallback();\n      this.fieldId = this.fieldId || nanoid();\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-progress-meter', {\n          'cre8-c-progress-meter--error': this.status === 'error',\n          'cre8-c-progress-meter--warning': this.status === 'warning',\n          'cre8-c-progress-meter--success': this.status === 'success',\n          'cre8-c-progress-meter--knockout': this.knockout,\n      });\n\n      return html`<div class=\"${componentClassNames}\">\n      <label class=\"cre8-c-progress-meter__label\" for=\"${this.fieldId}\">${this.label}</label>\n      <span class=\"cre8-c-progress-meter__sr-only\">${Math.round((this.value / this.max) * 100)}%</span>\n      <progress\n        class=\"cre8-c-progress-meter__progress\"\n        aria-hidden=\"true\"\n        id=${this.fieldId}\n        name=${this.name}\n        max=\"${this.max}\"\n        value=\"${this.value}\"\n      >\n        ${Math.round((this.value / this.max) * 100)}%\n      </progress>\n    </div>`;\n  }\n}\n\nif (customElements.get('cre8-progress-meter') === undefined) {\n    customElements.define('cre8-progress-meter', Cre8ProgressMeter);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-progress-meter': Cre8ProgressMeter;\n  }\n}\n"]}

package/lib/components/progress-meter/progress-meter.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-content-brand);width:100%;height:var(--cre8-progress-meter-height, 0.5rem);background:var(--cre8-color-bg-transparent);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);border-color:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-round)}.cre8-c-progress-meter--knockout .cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-content-brand-knockout);border-color:var(--cre8-color-border-default)}.cre8-c-progress-meter--error .cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-bg-error-strong)}.cre8-c-progress-meter--warning .cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-bg-warning-strong)}.cre8-c-progress-meter--success .cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-bg-success-strong)}.cre8-c-progress-meter--indeterminate .cre8-c-progress-meter__progress{--cre8-progress-meter-background: repeating-linear-gradient(-45deg, #009bdf, #009bdf 10px, #00628e 10px, #00628e 20px)}.cre8-c-progress-meter__sr-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}progress{color:var(--cre8-progress-meter-background);appearance:none}progress::-moz-progress-bar{background:var(--cre8-progress-meter-background);border-radius:var(--cre8-border-radius-round)}progress::-webkit-progress-bar{background:var(--cre8-color-bg-subtle);border-radius:var(--cre8-border-radius-round)}progress::-webkit-progress-value{background:var(--cre8-progress-meter-background);border-radius:var(--cre8-border-radius-round)}.cre8-c-progress-meter__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}`;
+export default styles;
+//# sourceMappingURL=progress-meter.styles.js.map

package/lib/components/progress-meter/progress-meter.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-meter.styles.js","sourceRoot":"","sources":["../../../components/progress-meter/progress-meter.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,8mHAA8mH,CAAC;AACjoH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-content-brand);width:100%;height:var(--cre8-progress-meter-height, 0.5rem);background:var(--cre8-color-bg-transparent);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);border-color:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-round)}.cre8-c-progress-meter--knockout .cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-content-brand-knockout);border-color:var(--cre8-color-border-default)}.cre8-c-progress-meter--error .cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-bg-error-strong)}.cre8-c-progress-meter--warning .cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-bg-warning-strong)}.cre8-c-progress-meter--success .cre8-c-progress-meter__progress{--cre8-progress-meter-background: var(--cre8-color-bg-success-strong)}.cre8-c-progress-meter--indeterminate .cre8-c-progress-meter__progress{--cre8-progress-meter-background: repeating-linear-gradient(-45deg, #009bdf, #009bdf 10px, #00628e 10px, #00628e 20px)}.cre8-c-progress-meter__sr-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}progress{color:var(--cre8-progress-meter-background);appearance:none}progress::-moz-progress-bar{background:var(--cre8-progress-meter-background);border-radius:var(--cre8-border-radius-round)}progress::-webkit-progress-bar{background:var(--cre8-color-bg-subtle);border-radius:var(--cre8-border-radius-round)}progress::-webkit-progress-value{background:var(--cre8-progress-meter-background);border-radius:var(--cre8-border-radius-round)}.cre8-c-progress-meter__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}`;\nexport default styles;\n"]}

package/lib/components/progress-steps/progress-steps.js

@@ -0,0 +1,19 @@
+import { css } from 'lit';
+const styles = css `@import '/design-tokens/core/scss/theming/component';
+
+::slotted(*) {
+  flex: 1;
+}
+
+.cre8-c-progress-steps {
+  display: flex;
+  flex-direction: row;
+  margin: var(--cre8-spacing-24);
+
+  @media (max-width: component.$cre8-breakpoint-md) {
+    flex-direction: column;
+  }
+}
+`;
+export default styles;
+//# sourceMappingURL=progress-steps.js.map

package/lib/components/progress-steps/progress-steps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-steps.js","sourceRoot":"","sources":["../../../components/progress-steps/progress-steps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;CAejB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`@import '/design-tokens/core/scss/theming/component';\n\n::slotted(*) {\n  flex: 1;\n}\n\n.cre8-c-progress-steps {\n  display: flex;\n  flex-direction: row;\n  margin: var(--cre8-spacing-24);\n\n  @media (max-width: component.$cre8-breakpoint-md) {\n    flex-direction: column;\n  }\n}\n`;\nexport default styles;\n"]}

package/lib/components/progress-steps/progress-steps.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}::slotted(*){flex:1}.cre8-c-progress-steps{display:flex;flex-direction:row;margin:var(--cre8-spacing-24)}@media(max-width: 768px){.cre8-c-progress-steps{flex-direction:column}}`;
+export default styles;
+//# sourceMappingURL=progress-steps.styles.js.map

package/lib/components/progress-steps/progress-steps.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-steps.styles.js","sourceRoot":"","sources":["../../../components/progress-steps/progress-steps.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,07DAA07D,CAAC;AAC78D,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}::slotted(*){flex:1}.cre8-c-progress-steps{display:flex;flex-direction:row;margin:var(--cre8-spacing-24)}@media(max-width: 768px){.cre8-c-progress-steps{flex-direction:column}}`;\nexport default styles;\n"]}

package/lib/components/progress-steps-item/progress-steps-item.js

@@ -1,23 +1,36 @@
-import { css as p, html as d } from "lit";
-import { property as i } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const g = p`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host(:first-child)::part(left-divider),:host(:last-child)::part(right-divider){visibility:hidden}.cre8-c-progress-steps-item--complete{--divider-color-left: var(--cre8-color-border-brand);--divider-color-right: var(--cre8-color-border-brand);--icon-color: var(--cre8-color-content-brand);--name-color: var(--cre8-color-content-brand)}.cre8-c-progress-steps-item--current{--divider-color-left: var(--cre8-color-border-brand);--divider-color-right: var(--cre8-color-border-strong);--icon-color: var(--cre8-color-content-brand);--name-color: var(--cre8-color-content-brand)}.cre8-c-progress-steps-item--error{--divider-color-left: var(--cre8-color-border-brand);--divider-color-right: var(--cre8-color-border-strong);--icon-color: var(--cre8-color-content-error-icon);--name-color: var(--cre8-color-content-error)}.cre8-c-progress-steps-item--incomplete{--divider-color-left: var(--cre8-color-border-strong);--divider-color-right: var(--cre8-color-border-strong);--icon-color: var(--cre8-color-content-subtle);--name-color: var(--cre8-color-content-subtle)}.cre8-c-progress-steps-item--warning{--divider-color-left: var(--cre8-color-border-brand);--divider-color-right: var(--cre8-color-border-strong);--icon-color: var(--cre8-color-content-warning-icon);--name-color: var(--cre8-color-content-default)}.cre8-c-progress-steps-item{font-family:var(--cre8-typography-title-small-mobile-font-family);font-size:var(--cre8-typography-title-small-mobile-font-size);font-weight:var(--cre8-typography-title-small-mobile-font-weight);line-height:var(--cre8-typography-title-small-mobile-line-height);text-decoration:var(--cre8-typography-title-small-mobile-text-decoration);text-transform:var(--cre8-typography-title-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-progress-steps-item{font-family:var(--cre8-typography-title-small-font-family);font-size:var(--cre8-typography-title-small-font-size);font-weight:var(--cre8-typography-title-small-font-weight);line-height:var(--cre8-typography-title-small-line-height);text-decoration:var(--cre8-typography-title-small-text-decoration);text-transform:var(--cre8-typography-title-small-text-transform)}}.cre8-c-progress-steps-item{text-align:center}.cre8-c-progress-steps-item__top-container{align-items:center;display:flex;padding-bottom:var(--cre8-spacing-8)}.cre8-c-progress-steps-item__svg{color:var(--icon-color);height:1.25rem;margin-left:var(--cre8-spacing-8);margin-right:var(--cre8-spacing-8);width:1.25rem}.cre8-c-progress-steps-item__svg svg{height:1.25rem;width:1.25rem}.cre8-c-progress-steps-item__message{font-family:var(--cre8-typography-body-small-font-family);font-size:var(--cre8-typography-body-small-font-size);font-weight:var(--cre8-typography-body-small-font-weight);line-height:var(--cre8-typography-body-small-line-height);text-decoration:var(--cre8-typography-body-small-text-decoration);text-transform:var(--cre8-typography-body-small-text-transform);padding-left:var(--cre8-spacing-16);padding-right:var(--cre8-spacing-16)}.cre8-c-progress-steps-item__name{font-family:var(--cre8-typography-title-small-mobile-font-family);font-size:var(--cre8-typography-title-small-mobile-font-size);font-weight:var(--cre8-typography-title-small-mobile-font-weight);line-height:var(--cre8-typography-title-small-mobile-line-height);text-decoration:var(--cre8-typography-title-small-mobile-text-decoration);text-transform:var(--cre8-typography-title-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-progress-steps-item__name{font-family:var(--cre8-typography-title-small-font-family);font-size:var(--cre8-typography-title-small-font-size);font-weight:var(--cre8-typography-title-small-font-weight);line-height:var(--cre8-typography-title-small-line-height);text-decoration:var(--cre8-typography-title-small-text-decoration);text-transform:var(--cre8-typography-title-small-text-transform)}}.cre8-c-progress-steps-item__name{color:var(--name-color);padding-left:var(--cre8-spacing-16);padding-right:var(--cre8-spacing-16)}.cre8-c-progress-steps-item__divider--left,.cre8-c-progress-steps-item__divider--right{height:0.125rem;width:100%}.cre8-c-progress-steps-item__divider--left{background-color:var(--divider-color-left)}.cre8-c-progress-steps-item__divider--right{background-color:var(--divider-color-right)}`;
-var h = Object.defineProperty, o = (c, t, l, v) => {
-  for (var r = void 0, s = c.length - 1, n; s >= 0; s--)
-    (n = c[s]) && (r = n(t, l, r) || r);
-  return r && h(t, l, r), r;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const a = class a extends m {
-  render() {
-    const t = this.componentClassNames("cre8-c-progress-steps-item", {
-      "cre8-c-progress-steps-item--complete": this.state === "complete",
-      "cre8-c-progress-steps-item--current": this.state === "current",
-      "cre8-c-progress-steps-item--error": this.state === "error",
-      "cre8-c-progress-steps-item--incomplete": this.state === "incomplete",
-      "cre8-c-progress-steps-item--warning": this.state === "warning"
-    });
-    return d`
-        <div class='${t}'>
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './progress-steps-item.styles.js';
+/**
+ * The Progress Steps Item component is used to display a single step in a multi-step process.
+ * It should be used as a child component of `cre8-progress-steps`.
+ * These Components serve a contextual purpose and don't provide any functionality.
+ *
+ * @property {string} message - Optional message to display under the step name.
+ * @property {string} name - The name of the step.
+ * @property {string} state - The state of the step: 'incomplete', 'current', 'complete', 'error', 'warning';
+ * @property {string} svg - An SVG string to use as the step icon.
+ *
+ * @slot - The component content
+ */
+export class Cre8ProgressStepsItem extends Cre8Element {
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-progress-steps-item', {
+            'cre8-c-progress-steps-item--complete': this.state === 'complete',
+            'cre8-c-progress-steps-item--current': this.state === 'current',
+            'cre8-c-progress-steps-item--error': this.state === 'error',
+            'cre8-c-progress-steps-item--incomplete': this.state === 'incomplete',
+            'cre8-c-progress-steps-item--warning': this.state === 'warning',
+        });
+        return html `
+        <div class='${componentClassNames}'>
             <div class='cre8-c-progress-steps-item__top-container'>
               <div class='cre8-c-progress-steps-item__divider--left' part='left-divider'></div>
               <span class='cre8-c-progress-steps-item__svg'>
@@ -29,24 +42,23 @@ const a = class a extends m {
             <div class='cre8-c-progress-steps-item__message'>${this.message}</div>
         </div>
         `;
-  }
-};
-a.styles = [g];
-let e = a;
-o([
-  i()
-], e.prototype, "message");
-o([
-  i()
-], e.prototype, "name");
-o([
-  i()
-], e.prototype, "state");
-o([
-  i()
-], e.prototype, "svg");
-customElements.get("cre8-progress-steps-item") === void 0 && customElements.define("cre8-progress-steps-item", e);
-export {
-  e as Cre8ProgressStepsItem,
-  e as default
-};
+    }
+}
+Cre8ProgressStepsItem.styles = [styles];
+__decorate([
+    property()
+], Cre8ProgressStepsItem.prototype, "message", void 0);
+__decorate([
+    property()
+], Cre8ProgressStepsItem.prototype, "name", void 0);
+__decorate([
+    property()
+], Cre8ProgressStepsItem.prototype, "state", void 0);
+__decorate([
+    property()
+], Cre8ProgressStepsItem.prototype, "svg", void 0);
+if (customElements.get('cre8-progress-steps-item') === undefined) {
+    customElements.define('cre8-progress-steps-item', Cre8ProgressStepsItem);
+}
+export default Cre8ProgressStepsItem;
+//# sourceMappingURL=progress-steps-item.js.map

package/lib/components/progress-steps-item/progress-steps-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-steps-item.js","sourceRoot":"","sources":["../../../components/progress-steps-item/progress-steps-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,iCAAiC,CAAC;AAErD;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,qBAAsB,SAAQ,WAAW;IA+BlD,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,4BAA4B,EAAE;YAC/E,sCAAsC,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;YACjE,qCAAqC,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YAC/D,mCAAmC,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;YAC3D,wCAAwC,EAAE,IAAI,CAAC,KAAK,KAAK,YAAY;YACrE,qCAAqC,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;SAClE,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;sBACG,mBAAmB;;;;kCAIP,IAAI,CAAC,GAAG;;;;4DAIkB,IAAI,CAAC,IAAI;+DACN,IAAI,CAAC,OAAO;;SAElE,CAAC;IACN,CAAC;;AApDM,4BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOrB;IADH,QAAQ,EAAE;sDACU;AAOjB;IADH,QAAQ,EAAE;mDACM;AAOb;IADH,QAAQ,EAAE;oDAC4D;AAOnE;IADH,QAAQ,EAAE;kDACK;AA2BpB,IAAI,cAAc,CAAC,GAAG,CAAC,0BAA0B,CAAC,KAAK,SAAS,EAAE,CAAC;IAC/D,cAAc,CAAC,MAAM,CAAC,0BAA0B,EAAE,qBAAqB,CAAC,CAAC;AAC7E,CAAC;AAID,eAAe,qBAAqB,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './progress-steps-item.styles.js';\n\n/**\n * The Progress Steps Item component is used to display a single step in a multi-step process.\n * It should be used as a child component of `cre8-progress-steps`.\n * These Components serve a contextual purpose and don't provide any functionality.\n *\n * @property {string} message - Optional message to display under the step name.\n * @property {string} name - The name of the step.\n * @property {string} state - The state of the step: 'incomplete', 'current', 'complete', 'error', 'warning';\n * @property {string} svg - An SVG string to use as the step icon.\n *\n * @slot - The component content\n */\nexport class Cre8ProgressStepsItem extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Optional message to display under the step name.\n     * @type {string}\n     */\n    @property()\n        message?: string;\n\n    /**\n     * The name of the step.\n     * @type {string}\n     */\n    @property()\n        name: string;\n\n    /**\n     * The state of the step: 'complete', 'current', 'error',' incomplete', 'warning';\n     * @type {string}\n     */\n    @property()\n        state: 'complete' | 'current' | 'error' | 'incomplete' | 'warning';\n\n    /**\n     * An SVG string to use as the step icon.\n     * @type {string}\n     */\n    @property()\n        svg: string;\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-progress-steps-item', {\n            'cre8-c-progress-steps-item--complete': this.state === 'complete',\n            'cre8-c-progress-steps-item--current': this.state === 'current',\n            'cre8-c-progress-steps-item--error': this.state === 'error',\n            'cre8-c-progress-steps-item--incomplete': this.state === 'incomplete',\n            'cre8-c-progress-steps-item--warning': this.state === 'warning',\n        });\n\n        return html`\n        <div class='${componentClassNames}'>\n            <div class='cre8-c-progress-steps-item__top-container'>\n              <div class='cre8-c-progress-steps-item__divider--left' part='left-divider'></div>\n              <span class='cre8-c-progress-steps-item__svg'>\n                <cre8-icon svg='${this.svg}' aria-hidden='true'></cre8-icon>\n              </span>\n              <div class='cre8-c-progress-steps-item__divider--right' part='right-divider'></div>\n            </div>\n            <div class='cre8-c-progress-steps-item__name'>${this.name}</div>\n            <div class='cre8-c-progress-steps-item__message'>${this.message}</div>\n        </div>\n        `;\n    }\n}\n\nif (customElements.get('cre8-progress-steps-item') === undefined) {\n    customElements.define('cre8-progress-steps-item', Cre8ProgressStepsItem);\n}\n\ndeclare global { interface HTMLElementTagNameMap { 'cre8-progress-steps-item': Cre8ProgressStepsItem; } }\n\nexport default Cre8ProgressStepsItem;\n"]}

package/lib/components/progress-steps-item/progress-steps-item.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host(:first-child)::part(left-divider),:host(:last-child)::part(right-divider){visibility:hidden}.cre8-c-progress-steps-item--complete{--divider-color-left: var(--cre8-color-border-brand);--divider-color-right: var(--cre8-color-border-brand);--icon-color: var(--cre8-color-content-brand);--name-color: var(--cre8-color-content-brand)}.cre8-c-progress-steps-item--current{--divider-color-left: var(--cre8-color-border-brand);--divider-color-right: var(--cre8-color-border-strong);--icon-color: var(--cre8-color-content-brand);--name-color: var(--cre8-color-content-brand)}.cre8-c-progress-steps-item--error{--divider-color-left: var(--cre8-color-border-brand);--divider-color-right: var(--cre8-color-border-strong);--icon-color: var(--cre8-color-content-error-icon);--name-color: var(--cre8-color-content-error)}.cre8-c-progress-steps-item--incomplete{--divider-color-left: var(--cre8-color-border-strong);--divider-color-right: var(--cre8-color-border-strong);--icon-color: var(--cre8-color-content-subtle);--name-color: var(--cre8-color-content-subtle)}.cre8-c-progress-steps-item--warning{--divider-color-left: var(--cre8-color-border-brand);--divider-color-right: var(--cre8-color-border-strong);--icon-color: var(--cre8-color-content-warning-icon);--name-color: var(--cre8-color-content-default)}.cre8-c-progress-steps-item{font-family:var(--cre8-typography-title-small-mobile-font-family);font-size:var(--cre8-typography-title-small-mobile-font-size);font-weight:var(--cre8-typography-title-small-mobile-font-weight);line-height:var(--cre8-typography-title-small-mobile-line-height);text-decoration:var(--cre8-typography-title-small-mobile-text-decoration);text-transform:var(--cre8-typography-title-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-progress-steps-item{font-family:var(--cre8-typography-title-small-font-family);font-size:var(--cre8-typography-title-small-font-size);font-weight:var(--cre8-typography-title-small-font-weight);line-height:var(--cre8-typography-title-small-line-height);text-decoration:var(--cre8-typography-title-small-text-decoration);text-transform:var(--cre8-typography-title-small-text-transform)}}.cre8-c-progress-steps-item{text-align:center}.cre8-c-progress-steps-item__top-container{align-items:center;display:flex;padding-bottom:var(--cre8-spacing-8)}.cre8-c-progress-steps-item__svg{color:var(--icon-color);height:1.25rem;margin-left:var(--cre8-spacing-8);margin-right:var(--cre8-spacing-8);width:1.25rem}.cre8-c-progress-steps-item__svg svg{height:1.25rem;width:1.25rem}.cre8-c-progress-steps-item__message{font-family:var(--cre8-typography-body-small-font-family);font-size:var(--cre8-typography-body-small-font-size);font-weight:var(--cre8-typography-body-small-font-weight);line-height:var(--cre8-typography-body-small-line-height);text-decoration:var(--cre8-typography-body-small-text-decoration);text-transform:var(--cre8-typography-body-small-text-transform);padding-left:var(--cre8-spacing-16);padding-right:var(--cre8-spacing-16)}.cre8-c-progress-steps-item__name{font-family:var(--cre8-typography-title-small-mobile-font-family);font-size:var(--cre8-typography-title-small-mobile-font-size);font-weight:var(--cre8-typography-title-small-mobile-font-weight);line-height:var(--cre8-typography-title-small-mobile-line-height);text-decoration:var(--cre8-typography-title-small-mobile-text-decoration);text-transform:var(--cre8-typography-title-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-progress-steps-item__name{font-family:var(--cre8-typography-title-small-font-family);font-size:var(--cre8-typography-title-small-font-size);font-weight:var(--cre8-typography-title-small-font-weight);line-height:var(--cre8-typography-title-small-line-height);text-decoration:var(--cre8-typography-title-small-text-decoration);text-transform:var(--cre8-typography-title-small-text-transform)}}.cre8-c-progress-steps-item__name{color:var(--name-color);padding-left:var(--cre8-spacing-16);padding-right:var(--cre8-spacing-16)}.cre8-c-progress-steps-item__divider--left,.cre8-c-progress-steps-item__divider--right{height:0.125rem;width:100%}.cre8-c-progress-steps-item__divider--left{background-color:var(--divider-color-left)}.cre8-c-progress-steps-item__divider--right{background-color:var(--divider-color-right)}`;
+export default styles;
+//# sourceMappingURL=progress-steps-item.styles.js.map

package/lib/components/progress-steps-item/progress-steps-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-steps-item.styles.js","sourceRoot":"","sources":["../../../components/progress-steps-item/progress-steps-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,u9LAAu9L,CAAC;AAC1+L,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host(:first-child)::part(left-divider),:host(:last-child)::part(right-divider){visibility:hidden}.cre8-c-progress-steps-item--complete{--divider-color-left: var(--cre8-color-border-brand);--divider-color-right: var(--cre8-color-border-brand);--icon-color: var(--cre8-color-content-brand);--name-color: var(--cre8-color-content-brand)}.cre8-c-progress-steps-item--current{--divider-color-left: var(--cre8-color-border-brand);--divider-color-right: var(--cre8-color-border-strong);--icon-color: var(--cre8-color-content-brand);--name-color: var(--cre8-color-content-brand)}.cre8-c-progress-steps-item--error{--divider-color-left: var(--cre8-color-border-brand);--divider-color-right: var(--cre8-color-border-strong);--icon-color: var(--cre8-color-content-error-icon);--name-color: var(--cre8-color-content-error)}.cre8-c-progress-steps-item--incomplete{--divider-color-left: var(--cre8-color-border-strong);--divider-color-right: var(--cre8-color-border-strong);--icon-color: var(--cre8-color-content-subtle);--name-color: var(--cre8-color-content-subtle)}.cre8-c-progress-steps-item--warning{--divider-color-left: var(--cre8-color-border-brand);--divider-color-right: var(--cre8-color-border-strong);--icon-color: var(--cre8-color-content-warning-icon);--name-color: var(--cre8-color-content-default)}.cre8-c-progress-steps-item{font-family:var(--cre8-typography-title-small-mobile-font-family);font-size:var(--cre8-typography-title-small-mobile-font-size);font-weight:var(--cre8-typography-title-small-mobile-font-weight);line-height:var(--cre8-typography-title-small-mobile-line-height);text-decoration:var(--cre8-typography-title-small-mobile-text-decoration);text-transform:var(--cre8-typography-title-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-progress-steps-item{font-family:var(--cre8-typography-title-small-font-family);font-size:var(--cre8-typography-title-small-font-size);font-weight:var(--cre8-typography-title-small-font-weight);line-height:var(--cre8-typography-title-small-line-height);text-decoration:var(--cre8-typography-title-small-text-decoration);text-transform:var(--cre8-typography-title-small-text-transform)}}.cre8-c-progress-steps-item{text-align:center}.cre8-c-progress-steps-item__top-container{align-items:center;display:flex;padding-bottom:var(--cre8-spacing-8)}.cre8-c-progress-steps-item__svg{color:var(--icon-color);height:1.25rem;margin-left:var(--cre8-spacing-8);margin-right:var(--cre8-spacing-8);width:1.25rem}.cre8-c-progress-steps-item__svg svg{height:1.25rem;width:1.25rem}.cre8-c-progress-steps-item__message{font-family:var(--cre8-typography-body-small-font-family);font-size:var(--cre8-typography-body-small-font-size);font-weight:var(--cre8-typography-body-small-font-weight);line-height:var(--cre8-typography-body-small-line-height);text-decoration:var(--cre8-typography-body-small-text-decoration);text-transform:var(--cre8-typography-body-small-text-transform);padding-left:var(--cre8-spacing-16);padding-right:var(--cre8-spacing-16)}.cre8-c-progress-steps-item__name{font-family:var(--cre8-typography-title-small-mobile-font-family);font-size:var(--cre8-typography-title-small-mobile-font-size);font-weight:var(--cre8-typography-title-small-mobile-font-weight);line-height:var(--cre8-typography-title-small-mobile-line-height);text-decoration:var(--cre8-typography-title-small-mobile-text-decoration);text-transform:var(--cre8-typography-title-small-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-progress-steps-item__name{font-family:var(--cre8-typography-title-small-font-family);font-size:var(--cre8-typography-title-small-font-size);font-weight:var(--cre8-typography-title-small-font-weight);line-height:var(--cre8-typography-title-small-line-height);text-decoration:var(--cre8-typography-title-small-text-decoration);text-transform:var(--cre8-typography-title-small-text-transform)}}.cre8-c-progress-steps-item__name{color:var(--name-color);padding-left:var(--cre8-spacing-16);padding-right:var(--cre8-spacing-16)}.cre8-c-progress-steps-item__divider--left,.cre8-c-progress-steps-item__divider--right{height:0.125rem;width:100%}.cre8-c-progress-steps-item__divider--left{background-color:var(--divider-color-left)}.cre8-c-progress-steps-item__divider--right{background-color:var(--divider-color-right)}`;\nexport default styles;\n"]}

package/lib/components/radio-field/radio-field.js

@@ -1,63 +1,73 @@
-import { css as f, html as c } from "lit";
-import { ifDefined as l } from "lit-html/directives/if-defined.js";
-import { property as t } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-import "../field-note/field-note.js";
-const h = f`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:flex}.cre8-c-radio-field{border:none;padding:0;margin:0}.cre8-c-radio-field__legend{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);margin-bottom:0.5rem}.cre8-c-radio-field__list{display:flex;flex-direction:column;margin:0;padding:0}`;
-var y = Object.defineProperty, r = (d, a, n, g) => {
-  for (var i = void 0, s = d.length - 1, p; s >= 0; s--)
-    (p = d[s]) && (i = p(a, n, i) || i);
-  return i && y(a, n, i), i;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const o = class o extends m {
-  render() {
-    const a = this.componentClassNames("cre8-c-radio-field", {});
-    return c`
-      <fieldset class="${a}" aria-describedby="${l(this.ariaDescribedBy)}">
+import { html, } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import '../field-note/field-note';
+import styles from './radio-field.styles.js';
+/**
+ * Radio Field is the parent container for `radio-field-item`.
+ * It is required to allow for grouping numerous radio fields that need additional context (in the form of `<legend>`).
+ * It also provides accessibility roles, aria attributes and field note messaging on the group.
+ *
+ * See [radio-field-item](?path=/story/cre8-components-radio-field-item--default) for more guidance on its usage.
+ *
+ * @slot - The component content, which should be a set of `radio-field-item`s
+ */
+export class Cre8RadioField extends Cre8Element {
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-radio-field', {});
+        return html `
+      <fieldset class="${componentClassNames}" aria-describedby="${ifDefined(this.ariaDescribedBy)}">
         <legend class="cre8-c-radio-field__legend">${this.label}</legend>
         <div class="cre8-c-radio-field__body">
           <ul class="cre8-c-radio-field__list" role="list">
             <slot></slot>
           </ul>
         </div>
-        ${this.fieldNote ? c`<cre8-field-note
+        ${this.fieldNote
+            ? html `<cre8-field-note
           ?inverted=${this.fieldNoteKnockout}
-          id=${l(this.ariaDescribedBy)}
-          iconName=${l(this.fieldNoteIconName)}
+          id=${ifDefined(this.ariaDescribedBy)}
+          iconName=${ifDefined(this.fieldNoteIconName)}
           ?isSuccess=${this.isSuccess}
           ?isError=${this.isError}
         >
           ${this.fieldNote}
-        </cre8-field-note>` : ""}
+        </cre8-field-note>` : ''}
       </fieldset>
     `;
-  }
-};
-o.styles = [h];
-let e = o;
-r([
-  t()
-], e.prototype, "fieldNote");
-r([
-  t()
-], e.prototype, "ariaDescribedBy");
-r([
-  t()
-], e.prototype, "fieldNoteIconName");
-r([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "fieldNoteKnockout");
-r([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "isSuccess");
-r([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "isError");
-r([
-  t()
-], e.prototype, "label");
-customElements.get("cre8-radio-field") === void 0 && customElements.define("cre8-radio-field", e);
-export {
-  e as Cre8RadioField,
-  e as default
-};
+    }
+}
+Cre8RadioField.styles = [styles];
+__decorate([
+    property()
+], Cre8RadioField.prototype, "fieldNote", void 0);
+__decorate([
+    property()
+], Cre8RadioField.prototype, "ariaDescribedBy", void 0);
+__decorate([
+    property()
+], Cre8RadioField.prototype, "fieldNoteIconName", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8RadioField.prototype, "fieldNoteKnockout", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8RadioField.prototype, "isSuccess", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8RadioField.prototype, "isError", void 0);
+__decorate([
+    property()
+], Cre8RadioField.prototype, "label", void 0);
+if (customElements.get('cre8-radio-field') === undefined) {
+    customElements.define('cre8-radio-field', Cre8RadioField);
+}
+export default Cre8RadioField;
+//# sourceMappingURL=radio-field.js.map

package/lib/components/radio-field/radio-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-field.js","sourceRoot":"","sources":["../../../components/radio-field/radio-field.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,0BAA0B,CAAC;AAClC,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C;;;;;;;;GAQG;AAEH,MAAM,OAAO,cAAe,SAAQ,WAAW;IAmD7C,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAE/E,OAAO,IAAI,CAAA;yBACQ,mBAAmB,uBAAuB,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;qDAC7C,IAAI,CAAC,KAAK;;;;;;UAMrD,IAAI,CAAC,SAAS;YAChB,CAAC,CAAC,IAAI,CAAA;sBACQ,IAAI,CAAC,iBAAiB;eAC7B,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;qBACzB,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC;uBAC/B,IAAI,CAAC,SAAS;qBAChB,IAAI,CAAC,OAAO;;YAErB,IAAI,CAAC,SAAS;2BACC,CAAC,CAAC,CAAC,EAAE;;KAE3B,CAAC;IACJ,CAAC;;AAzEQ,qBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOvB;IADH,QAAQ,EAAE;iDACY;AAOnB;IADH,QAAQ,EAAE;uDACkB;AAOzB;IADH,QAAQ,EAAE;yDACoB;AAO3B;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACX;AAO5B;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACnB;AAOpB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACrB;AAMlB;IADH,QAAQ,EAAE;6CACQ;AA4BrB,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACvD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAC9D,CAAC;AAQD,eAAe,cAAc,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../field-note/field-note';\nimport styles from './radio-field.styles.js';\n\n/**\n * Radio Field is the parent container for `radio-field-item`.\n * It is required to allow for grouping numerous radio fields that need additional context (in the form of `<legend>`).\n * It also provides accessibility roles, aria attributes and field note messaging on the group.\n *\n * See [radio-field-item](?path=/story/cre8-components-radio-field-item--default) for more guidance on its usage.\n *\n * @slot - The component content, which should be a set of `radio-field-item`s\n */\n\nexport class Cre8RadioField extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Radio Field Note\n   * @attr {string}\n   */\n  @property()\n      fieldNote?: string;\n\n  /**\n   * Radio container fieldnote aria describe by\n   * @attr {string}\n   */\n  @property()\n      ariaDescribedBy?: string;\n\n  /**\n   * Radio container fieldnote icon name\n   * @attr {string}\n   */\n  @property()\n      fieldNoteIconName?: string;\n\n  /**\n   * Radio container fieldnote knockout\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      fieldNoteKnockout?: boolean;\n\n  /**\n   * Radio container fieldnote isSuccess\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isSuccess?: boolean;\n\n  /**\n   * Radio container fieldnote isError\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isError?: boolean;\n\n  /**\n   * Radio field legend label\n   */\n  @property()\n      label?: string;\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-radio-field', {});\n\n      return html`\n      <fieldset class=\"${componentClassNames}\" aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\">\n        <legend class=\"cre8-c-radio-field__legend\">${this.label}</legend>\n        <div class=\"cre8-c-radio-field__body\">\n          <ul class=\"cre8-c-radio-field__list\" role=\"list\">\n            <slot></slot>\n          </ul>\n        </div>\n        ${this.fieldNote\n        ? html`<cre8-field-note\n          ?inverted=${this.fieldNoteKnockout}\n          id=${ifDefined(this.ariaDescribedBy)}\n          iconName=${ifDefined(this.fieldNoteIconName)}\n          ?isSuccess=${this.isSuccess}\n          ?isError=${this.isError}\n        >\n          ${this.fieldNote}\n        </cre8-field-note>` : ''}\n      </fieldset>\n    `;\n  }\n}\n\nif (customElements.get('cre8-radio-field') === undefined) {\n    customElements.define('cre8-radio-field', Cre8RadioField);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-radio-field': Cre8RadioField;\n  }\n}\n\nexport default Cre8RadioField;\n"]}

package/lib/components/radio-field/radio-field.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:flex}.cre8-c-radio-field{border:none;padding:0;margin:0}.cre8-c-radio-field__legend{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);margin-bottom:0.5rem}.cre8-c-radio-field__list{display:flex;flex-direction:column;margin:0;padding:0}`;
+export default styles;
+//# sourceMappingURL=radio-field.styles.js.map

package/lib/components/radio-field/radio-field.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-field.styles.js","sourceRoot":"","sources":["../../../components/radio-field/radio-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,6zEAA6zE,CAAC;AACh1E,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:flex}.cre8-c-radio-field{border:none;padding:0;margin:0}.cre8-c-radio-field__legend{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);margin-bottom:0.5rem}.cre8-c-radio-field__list{display:flex;flex-direction:column;margin:0;padding:0}`;\nexport default styles;\n"]}