@tmorrow/cre8-wc 2.1.0 → 2.2.0

package/package.json

@@ -1,27 +1,33 @@
 {
   "name": "@tmorrow/cre8-wc",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "cre8 Web Components is a library of presentational UI web components to be consumed by # web applications.",
   "license": "BSD-3-Clause",
   "scripts": {
     "start": "pnpm run build:custom-elements.json && pnpm run storybook",
     "compile-styles": "npx tsx scripts/convert-scss-to-ts.ts",
     "build": "rm -rf lib && pnpm run compile-styles && pnpm build:cdn && vite build && tsc && cp .storybook/custom-elements.json custom-elements.json && pnpm run build:react && pnpm run build:mcp-manifest && pnpm run build:react-manifest",
+    "prepack": "node a2ui/check-layer-parity.mjs",
+    "prepublishOnly": "node a2ui/check-layer-parity.mjs",
     "build:mcp-manifest": "npx web-component-analyzer analyze \"components/**/*.ts\" --format json --outFile /tmp/wca-raw.json && npx tsx scripts/generate-mcp-manifest.ts",
     "build:react-manifest": "npx tsx scripts/generate-react-manifest.ts",
     "build:cdn": "rm -rf cdn && vite build --config vite.config.cdn.ts",
     "build:react": "rm -rf react-wrappers/components react-wrappers/dist react-wrappers/index.ts && npx tsx scripts/generate-react-wrappers.ts && cd react-wrappers && npx tsc",
-    "build:a2ui": "pnpm run build:a2ui:catalog && pnpm run build:a2ui:compile",
+    "build:a2ui": "pnpm run build:a2ui:catalog && pnpm run build:a2ui:kg && pnpm run build:a2ui:compile",
     "build:a2ui:catalog": "node a2ui/generate-catalog.mjs",
+    "build:a2ui:kg": "node a2ui/generate-catalog-kg.mjs",
     "build:a2ui:compile": "tsc --module esnext --moduleResolution bundler --target es2022 --lib es2022,dom,dom.iterable --strict --skipLibCheck --declaration --outDir a2ui a2ui/types.ts a2ui/registry.ts a2ui/renderer.ts a2ui/index.ts a2ui/stream/types.ts a2ui/stream/pointer.ts a2ui/stream/model.ts a2ui/stream/renderer.ts a2ui/stream/diff.ts a2ui/stream/index.ts",
     "a2ui:demo": "python3 -m http.server 8765",
     "storybook:react": "pnpm run build:react && cd react-wrappers && npx storybook dev -p 9009",
     "build-storybook:react": "pnpm run build:react && cd react-wrappers && npx storybook build -o dist-storybook",
-    "build:all": "pnpm run build:cdn && pnpm run build",
+    "build:all": "pnpm run build",
     "build:watch": "vite build --watch",
     "build:custom-elements.json": "npx @custom-elements-manifest/analyzer analyze --litelement --globs \"components/*/*.ts\" --outdir .storybook",
-    "test": "jest --verbose",
-    "test:jenkins": "jest --coverage=false --ci --runInBand --silent --bail",
+    "test": "vitest run --project=unit",
+    "test:watch": "vitest --project=unit",
+    "test:storybook": "vitest run --project=storybook",
+    "test:all": "vitest run",
+    "test:jenkins": "vitest run --project=unit --coverage=false --bail=1",
     "storybook-docs": "storybook dev --docs",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "del-cli dist && storybook build -o dist",
@@ -138,6 +144,7 @@
     "@storybook/addon-docs": "10.5.4",
     "@storybook/addon-mcp": "^0.5.0",
     "@storybook/addon-themes": "10.5.4",
+    "@storybook/addon-vitest": "10.5.4",
     "@storybook/builder-vite": "10.5.4",
     "@storybook/react": "10.5.4",
     "@storybook/react-vite": "10.5.4",
@@ -145,31 +152,28 @@
     "@storybook/web-components-vite": "10.5.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^30.0.0",
     "@types/jest-axe": "^3.5.9",
     "@types/resize-observer-browser": "^0.1.11",
     "@types/sanitize-html": "^2.16.0",
     "@typescript-eslint/eslint-plugin": "^8.46.3",
     "@typescript-eslint/parser": "^8.46.3",
     "@vitejs/plugin-react": "^5.2.0",
+    "@vitest/browser-playwright": "4.1.8",
+    "@vitest/coverage-v8": "^4.1.10",
     "@wc-toolkit/storybook-helpers": "^10.5.1",
-    "babel-jest": "^30.2.0",
     "clone": "^2.1.2",
     "css-parse": "2.0.0",
     "del-cli": "^7.0.0",
     "dotenv": "^17.2.3",
     "element-internals-polyfill": "^3.0.2",
     "glob": "^11.0.3",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^30.2.0",
     "jest-axe": "^10.0.0",
-    "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^30.2.0",
     "js-yaml": "^4.1.0",
     "jsdom": "^27.1.0",
     "lint-staged": "^16.2.6",
     "loader-utils": "^3.3.1",
     "marked": "^17.0.0",
+    "playwright": "^1.62.1",
     "plop": "^4.0.4",
     "postcss": "^8.5.6",
     "react": "^19.2.0",
@@ -180,12 +184,13 @@
     "storybook": "10.5.4",
     "style-dictionary": "^5.1.1",
     "style-loader": "^4.0.0",
-    "ts-jest": "^29.4.5",
     "ts-lit-plugin": "^2.0.2",
     "ts-node": "^10.9.2",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "vite": "^7.2.2"
+    "vite": "^7.2.2",
+    "vitest": "^4.1.8",
+    "vitest-canvas-mock": "^1.1.4"
   },
   "lint-staged": {
     "*.ts": "eslint --cache --fix"

package/react-manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.0",
+  "version": "2.1.1",
   "library": "@tmorrow/cre8-react",
   "componentPrefix": "Cre8",
   "description": "React wrappers for cre8 Web Components (@tmorrow/cre8-wc)",
@@ -1955,6 +1955,44 @@
       },
       "examples": []
     },
+    {
+      "name": "Cre8Form",
+      "tagName": "cre8-form",
+      "category": "Forms",
+      "description": "The form component groups form-associated Cre8 controls, aggregates their\nvalidation on submit, and orchestrates submit and reset.\n\n# How to Use\n1. Place any Cre8 form controls inside `cre8-form`. They may be nested inside\n   layout components such as `cre8-grid` or `cre8-layout`.\n2. Add a `cre8-button` with `type=\"submit\"` to submit the form.\n3. Listen for `form-submit` to receive the collected `FormData`.\n\nNote: this component renders to light DOM. A form-associated control's form\nowner is the nearest `<form>` in its own node tree, so a shadow-DOM `<form>`\nwould own nothing and `new FormData(form)` would come back empty.",
+      "props": {
+        "novalidate": {
+          "type": "boolean",
+          "description": "Skips aggregate validation on submit."
+        },
+        "disabled": {
+          "type": "boolean",
+          "description": "Disables every control in the form, for example while submitting."
+        },
+        "controls": {
+          "type": "Cre8FormElement[]",
+          "description": "Every form-associated Cre8 control owned by this form, in document order.\nReaches through layout components because slotting does not move nodes\nout of the light-DOM tree."
+        },
+        "values": {
+          "type": "Record<string, FormDataEntryValue | FormDataEntryValue[]>",
+          "description": "The form's current values, derived from FormData."
+        },
+        "children": {
+          "type": "React.ReactNode",
+          "description": "Slotted content."
+        },
+        "onFormSubmit": {
+          "type": "(event: CustomEvent) => void"
+        },
+        "onFormReset": {
+          "type": "(event: CustomEvent) => void"
+        },
+        "onFormInvalid": {
+          "type": "(event: CustomEvent) => void"
+        }
+      },
+      "examples": []
+    },
     {
       "name": "Cre8MultiSelect",
       "tagName": "cre8-multi-select",
@@ -3693,7 +3731,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@tmorrow/cre8-wc": "^2.1.0",
+    "@tmorrow/cre8-wc": "^2.1.1",
     "react": ">=18",
     "react-dom": ">=18"
   }

package/dist/assets/cre8-element-B35i4Lyg.js

@@ -1 +0,0 @@
-import{k as p,u as f,j as m,b as d}from"./iframe-BNJP6ovU.js";import{g as h}from"./_commonjsHelpers-DaWZu8wl.js";const y={attribute:!0,type:String,converter:f,reflect:!1,hasChanged:p},v=(o=y,r,s)=>{const{kind:a,metadata:i}=s;let t=globalThis.litPropertyMetadata.get(i);if(t===void 0&&globalThis.litPropertyMetadata.set(i,t=new Map),a==="setter"&&((o=Object.create(o)).wrapped=!0),t.set(s.name,o),a==="accessor"){const{name:e}=s;return{set(n){const c=r.get.call(this);r.set.call(this,n),this.requestUpdate(e,c,o,!0,n)},init(n){return n!==void 0&&this.C(e,void 0,o,n),n}}}if(a==="setter"){const{name:e}=s;return function(n){const c=this[e];r.call(this,n),this.requestUpdate(e,c,o,!0,n)}}throw Error("Unsupported decorator location: "+a)};function g(o){return(r,s)=>typeof s=="object"?v(o,r,s):((a,i,t)=>{const e=i.hasOwnProperty(t);return i.constructor.createProperty(t,a),e?Object.getOwnPropertyDescriptor(i,t):void 0})(o,r,s)}var u={exports:{}},l;function b(){return l||(l=1,(function(o){(function(){var r={}.hasOwnProperty;function s(){for(var t="",e=0;e<arguments.length;e++){var n=arguments[e];n&&(t=i(t,a(n)))}return t}function a(t){if(typeof t=="string"||typeof t=="number")return t;if(typeof t!="object")return"";if(Array.isArray(t))return s.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var e="";for(var n in t)r.call(t,n)&&t[n]&&(e=i(e,n));return e}function i(t,e){return e?t?t+" "+e:t+e:t}o.exports?(s.default=s,o.exports=s):window.classNames=s})()})(u)),u.exports}var E=b();const x=h(E);class j extends m{componentClassNames(r,s={}){return x(r,s)}slotEmpty(r){return!this.querySelector(`[slot="${r}"]`)}slotNotEmpty(r){return this.slotEmpty(r)?null:!this.slotEmpty(r)}dispatch({e:r,eventName:s,detailObj:a={},optionsObj:i={}}){const t={bubbles:!0,composed:!0,...i,detail:{...r&&{originalEvent:r},...a}},e=new CustomEvent(s,t);return this.dispatchEvent(e),e}render(){return d`<slot></slot>`}}export{j as C,x as c,g as n};

package/dist/assets/cre8-form-element-Cfc5VeYV.js

@@ -1 +0,0 @@
-import{C as f,n as h}from"./cre8-element-B35i4Lyg.js";let b=class extends Event{constructor(t,s,i,e){super("context-request",{bubbles:!0,composed:!0}),this.context=t,this.contextTarget=s,this.callback=i,this.subscribe=e??!1}};class v{get value(){return this.o}set value(t){this.setValue(t)}setValue(t,s=!1){const i=s||!Object.is(t,this.o);this.o=t,i&&this.updateObservers()}constructor(t){this.subscriptions=new Map,this.updateObservers=()=>{for(const[s,{disposer:i}]of this.subscriptions)s(this.o,i)},t!==void 0&&(this.value=t)}addCallback(t,s,i){if(!i)return void t(this.value);this.subscriptions.has(t)||this.subscriptions.set(t,{disposer:()=>{this.subscriptions.delete(t)},consumerHost:s});const{disposer:e}=this.subscriptions.get(t);t(this.value,e)}clearCallbacks(){this.subscriptions.clear()}}let x=class extends Event{constructor(t,s){super("context-provider",{bubbles:!0,composed:!0}),this.context=t,this.contextTarget=s}};class d extends v{constructor(t,s,i){super(s.context!==void 0?s.initialValue:i),this.onContextRequest=e=>{if(e.context!==this.context)return;const a=e.contextTarget??e.composedPath()[0];a!==this.host&&(e.stopPropagation(),this.addCallback(e.callback,a,e.subscribe))},this.onProviderRequest=e=>{if(e.context!==this.context||(e.contextTarget??e.composedPath()[0])===this.host)return;const a=new Set;for(const[r,{consumerHost:l}]of this.subscriptions)a.has(r)||(a.add(r),l.dispatchEvent(new b(this.context,l,r,!0)));e.stopPropagation()},this.host=t,s.context!==void 0?this.context=s.context:this.context=s,this.attachListeners(),this.host.addController?.(this)}attachListeners(){this.host.addEventListener("context-request",this.onContextRequest),this.host.addEventListener("context-provider",this.onProviderRequest)}hostConnected(){this.host.dispatchEvent(new x(this.context,this.host))}}function p({context:n}){return(t,s)=>{const i=new WeakMap;if(typeof s=="object")return{get(){return t.get.call(this)},set(e){return i.get(this).setValue(e),t.set.call(this,e)},init(e){return i.set(this,new d(this,{context:n,initialValue:e})),e}};{t.constructor.addInitializer((r=>{i.set(r,new d(r,{context:n}))}));const e=Object.getOwnPropertyDescriptor(t,s);let a;if(e===void 0){const r=new WeakMap;a={get(){return r.get(this)},set(l){i.get(this).setValue(l),r.set(this,l)},configurable:!0,enumerable:!0}}else{const r=e.set;a={...e,set(l){i.get(this).setValue(l),r?.call(this,l)}}}return void Object.defineProperty(t,s,a)}}}const m=Symbol("cre8-form-internals"),y=Symbol("cre8-form-state");var V=Object.defineProperty,_=Object.getOwnPropertyDescriptor,u=(n,t,s,i)=>{for(var e=i>1?void 0:i?_(t,s):t,a=n.length-1,r;a>=0;a--)(r=n[a])&&(e=(i?r(t,s,e):r(e))||e);return i&&e&&V(t,s,e),e};const c=class c extends f{constructor(){super(),this.internalValue="",this.defaultValue="",this._formState={value:"",disabled:!1,required:!1,isError:!1,isSuccess:!1},this._internals=this.attachInternals()}get value(){return this.internalValue}set value(t){const s=this.value;this.internalValue=t,this.type!=="checkbox"&&this.type!=="radio"&&this._internals?.setFormValue(t),this.updateField(),this.updateFormState(),this.requestUpdate("value",s)}updateFormState(){this._formState={value:this.internalValue,disabled:this.disabled??!1,required:this.required??!1,isError:this.isError??!1,isSuccess:this.isSuccess??!1,name:this.name}}updateField(){this.field&&this.internalValue!==void 0&&(this.field.value=this.internalValue??"")}firstUpdated(){this.type!=="checkbox"&&this.type!=="radio"&&(this.defaultValue=this.value||this.getAttribute("value")||""),this.updateField(),this.updateFormState()}updated(t){super.updated(t),(t.has("disabled")||t.has("required")||t.has("isError")||t.has("isSuccess")||t.has("name"))&&this.updateFormState()}formResetCallback(){this.value=this.defaultValue,this.updateField()}formDisabledCallback(t){this.disabled=t}formStateRestoreCallback(t,s){typeof t=="string"&&(this.value=t)}get form(){return this._internals?.form??null}get validationMessage(){return this._internals?.validationMessage??""}get validity(){return this._internals?.validity}get willValidate(){return this._internals?.willValidate??!1}reportValidity(){return this._internals?.reportValidity()??!0}checkValidity(){return this._internals?.checkValidity()??!0}setCustomValidity(t){this._internals&&this.field&&(t?this._internals.setValidity({customError:!0},t,this.field):this._internals.setValidity({}))}};c.formAssociated=!0;let o=c;u([p({context:m})],o.prototype,"_internals",2);u([p({context:y})],o.prototype,"_formState",2);u([h()],o.prototype,"name",2);u([h({type:Boolean,reflect:!0})],o.prototype,"disabled",2);u([h({type:Boolean,reflect:!0})],o.prototype,"required",2);u([h({type:Boolean,reflect:!0})],o.prototype,"isError",2);u([h({type:Boolean,reflect:!0})],o.prototype,"isSuccess",2);u([h()],o.prototype,"value",1);export{o as C,m as f,b as s};

package/dist/assets/dropdown-item.stories-Iaw_UrEP.js

@@ -1,26 +0,0 @@
-import{b as o}from"./iframe-BNJP6ovU.js";import"./dropdown-BEP5x3CW.js";import"./preload-helper-PPVm8Dsz.js";import"./cre8-element-B35i4Lyg.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./state-DkQhleoO.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";const u={title:"In Development/Dropdown Item",component:"cre8-dropdown-item",parameters:{status:{type:"inProgress"},actions:{handles:["dropdown-item-selected"]},docs:{story:{height:"300px"}}}},p=({buttonText:e,dropdownContent:n,maxHeight:r,dropdownWithLink:d})=>o`
-  <cre8-dropdown
-    buttonText=${e}
-    maxHeight=${r}
-    dropdownWithLink=${d}
-  >
-    ${n}
-  </cre8-dropdown>
-`,t=p.bind({});t.args={buttonText:"Select",dropdownContent:o`
-  <cre8-dropdown-item>Item 1</cre8-dropdown-item>
-  <cre8-dropdown-item>Item 2 Item with longer text than default</cre8-dropdown-item>
-  <cre8-dropdown-item>Item 3</cre8-dropdown-item>
-  `};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`({
-  buttonText,
-  dropdownContent,
-  maxHeight,
-  dropdownWithLink
-}) => html\`
-  <cre8-dropdown
-    buttonText=\${buttonText}
-    maxHeight=\${maxHeight}
-    dropdownWithLink=\${dropdownWithLink}
-  >
-    \${dropdownContent}
-  </cre8-dropdown>
-\``,...t.parameters?.docs?.source}}};const x=["Default"];export{t as Default,x as __namedExportsOrder,u as default};

package/dist/assets/example-drug-card.stories-Bp5JIeE_.js

@@ -1,10 +0,0 @@
-import{a as e,b as a}from"./iframe-BNJP6ovU.js";import"./preload-helper-PPVm8Dsz.js";e`
-@import 'design-tokens/core/scss/theming/component';
-
-//  #EXAMPLE-DRUG-CARD
-
- .drug-info {
-    margin-top: 16px;
-    margin-bottom: 16px;
- }
-`;const m={title:"Examples/Example Drug Card",component:"example-drug-card",parameters:{status:{type:"inProgress"}}},r=s=>a`<example-drug-card></example-drug-card>`;r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:"args => html`<example-drug-card></example-drug-card>`",...r.parameters?.docs?.source}}};const p=["Default"];export{r as Default,p as __namedExportsOrder,m as default};

package/dist/assets/form-example.stories-9IDC0AgX.js

@@ -1,49 +0,0 @@
-import{a as c,b as l}from"./iframe-BNJP6ovU.js";import{w as r}from"./decorator-iVSD-Llo.js";import"./preload-helper-PPVm8Dsz.js";import"./chunk-EUVGDK4H-rHCQfRxh.js";c`
-
-
-
-/**
- * 1)
- */
-@import 'design-tokens/core/scss/theming/component' ;
-`;const n={title:"Examples/Form Example",component:"form-example",parameters:{actions:{handles:["submit"]},status:{type:"inProgress"}},decorators:[r]},a={},e=i=>l`
-  <iframe name="dummyframe" id="dummyframe" style="display:none" }></iframe>
-  <form id="form-example" action="#" target="dummyframe">
-    <cre8-field class="cre8-u-display-block cre8-u-margin-bottom-lg" name="name" label="Enter your name"></cre8-field>
-    <cre8-field class="cre8-u-display-block cre8-u-margin-bottom-lg" name="textfield2" value="Council of Ricks" label="cre8 team"></cre8-field>
-    <cre8-checkbox-field class="cre8-u-display-block cre8-u-margin-bottom-lg" label="Checkbox field">
-      <cre8-checkbox-field-item name="checkbox-example" value="1" label="Checkbox field item 1"></cre8-checkbox-field-item>
-      <cre8-checkbox-field-item name="checkbox-example" value="2" label="Checkbox field item 2" checked></cre8-checkbox-field-item>
-      <cre8-checkbox-field-item name="checkbox-example" value="3" label="Checkbox field item 3"></cre8-checkbox-field-item>
-    </cre8-checkbox-field>
-    <cre8-radio-field class="cre8-u-display-block cre8-u-margin-bottom-lg" label="radio-field">
-      <cre8-radio-field-item name="radio-example" label="On" value="on"></cre8-radio-field-item>
-      <cre8-radio-field-item name="radio-example" label="Off" value="off"></cre8-radio-field-item>
-    </cre8-radio-field>
-    <cre8-select class="cre8-u-display-block cre8-u-margin-bottom-lg" .items=${a} name="select" fieldNote="This is a field note."></cre8-select>
-    <cre8-button-group>
-      <cre8-button text="Submit" type="submit"></cre8-button>
-      <cre8-button text="Reset" type="reset"></cre8-button>
-    </cre8-button-group>
-  </form>
-`;e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`args => html\`
-  <iframe name="dummyframe" id="dummyframe" style="display:none" }></iframe>
-  <form id="form-example" action="#" target="dummyframe">
-    <cre8-field class="cre8-u-display-block cre8-u-margin-bottom-lg" name="name" label="Enter your name"></cre8-field>
-    <cre8-field class="cre8-u-display-block cre8-u-margin-bottom-lg" name="textfield2" value="Council of Ricks" label="cre8 team"></cre8-field>
-    <cre8-checkbox-field class="cre8-u-display-block cre8-u-margin-bottom-lg" label="Checkbox field">
-      <cre8-checkbox-field-item name="checkbox-example" value="1" label="Checkbox field item 1"></cre8-checkbox-field-item>
-      <cre8-checkbox-field-item name="checkbox-example" value="2" label="Checkbox field item 2" checked></cre8-checkbox-field-item>
-      <cre8-checkbox-field-item name="checkbox-example" value="3" label="Checkbox field item 3"></cre8-checkbox-field-item>
-    </cre8-checkbox-field>
-    <cre8-radio-field class="cre8-u-display-block cre8-u-margin-bottom-lg" label="radio-field">
-      <cre8-radio-field-item name="radio-example" label="On" value="on"></cre8-radio-field-item>
-      <cre8-radio-field-item name="radio-example" label="Off" value="off"></cre8-radio-field-item>
-    </cre8-radio-field>
-    <cre8-select class="cre8-u-display-block cre8-u-margin-bottom-lg" .items=\${items} name="select" fieldNote="This is a field note."></cre8-select>
-    <cre8-button-group>
-      <cre8-button text="Submit" type="submit"></cre8-button>
-      <cre8-button text="Reset" type="reset"></cre8-button>
-    </cre8-button-group>
-  </form>
-\``,...e.parameters?.docs?.source}}};const s=["Default"];export{e as Default,s as __namedExportsOrder,n as default};

package/dist/assets/icon-description-BBSwDykJ.js

@@ -1,45 +0,0 @@
-import{a as i}from"./iframe-BNJP6ovU.js";i`@import 'design-tokens/core/scss/theming/component';
-
-/**
- * 1)
- */
-.c-icon-description {
-  display: flex;
-  gap: size(1);
-}
-
-.c-icon-description--sm {
-  @include cre8-typography-label-small;
-}
-
-.c-icon-description--light {
-  @include cre8-typography-body-default;
-}
-
-.c-icon-description--align-end {
-  justify-content: flex-end;
-}
-
-.c-icon-description--valign-center {
-  align-items: center;
-}
-
-.c-icon-description__header {
-  .c-icon-description--sm & {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    min-width: 2rem;
-  }
-}
-
-::slotted(cre8-icon-legacy) {
-  --cre8-icon-height: #{size(6)};
-  --cre8-icon-width: #{size(6)};
-
-  .c-icon-description--sm & {
-    --cre8-icon-height: #{size(2)};
-    --cre8-icon-width: #{size(2)};
-  }
-}
-`;

package/dist/assets/icon-description.stories-Cg6ekOme.js

@@ -1,3 +0,0 @@
-import{b as o}from"./iframe-BNJP6ovU.js";import{s}from"./spread-CnPic3C2.js";import"./icon-description-BBSwDykJ.js";import"./preload-helper-PPVm8Dsz.js";const a={title:"Examples/Icon Description",component:"icon-description",parameters:{status:{type:"inProgress"}}},e=r=>o` <icon-description ${s(r)} verticalAlign="center" size="sm">
-  <cre8-icon-legacy name="order-status" slot="header"></cre8-icon-legacy>Enrolled in auto refill
-</icon-description>`;e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:'args => html` <icon-description ${spread(args)} verticalAlign="center" size="sm">\n  <cre8-icon-legacy name="order-status" slot="header"></cre8-icon-legacy>Enrolled in auto refill\n</icon-description>`',...e.parameters?.docs?.source}}};const l=["Default"];export{e as Default,l as __namedExportsOrder,a as default};

package/dist/assets/if-defined-Bxnzk64Q.js

@@ -1 +0,0 @@
-import{A as r}from"./iframe-BNJP6ovU.js";const m=o=>o??r;export{m as o};

package/dist/assets/medication-card.stories-Wc-hA0-s.js

@@ -1,165 +0,0 @@
-import{a as t,b as r}from"./iframe-BNJP6ovU.js";import"./button-CgaWukz0.js";import"./grid-C5CKMXNe.js";import"./heading-Dbka33DK.js";import"./icon-ChfRWXWy.js";import"./text-link-B3m3KEqY.js";import"./text-passage-xQVosjOr.js";import{s as n}from"./spread-CnPic3C2.js";import"./icon-description-BBSwDykJ.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-Bxnzk64Q.js";import"./cre8-element-B35i4Lyg.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Cfc5VeYV.js";import"./loading-spinner-C52KNq6y.js";t`@import 'design-tokens/core/scss/theming/component';
-
-/**
- * 1)
- */
-
-div.c-medication-card__header {
-  display: flex;
-  align-items: center;
-  padding: size(2);
-}
-
-.c-medication-card__icon {
-  --cre8-icon-height: #{size(3)};
-  --cre8-icon-width: #{size(3)};
-  --cre8-icon-fill: var(--cre8-color-content-subtle);
-  margin-right: size(2);
-}
-
-.c-medication-card__heading-after {
-  @include cre8-typography-body-default;
-  margin-left: auto;
-
-  ::slotted(div) {
-    display: flex;
-    gap: size(1);
-    align-items: center;
-  }
-}
-.c-medication-card__footer {
-  @include cre8-typography-body-default;
-  padding: size(1) size(2);
-  border-top: var(--cre8-theme-border-width) var(--cre8-border-style-default) var(--cre8-color-border-default);
-}
-`;const x={title:"Examples/Medication Card",component:"medication-card",parameters:{status:{type:"inProgress"}}},e=i=>r`<medication-card ${n(i)}>
-  <cre8-heading slot="heading" headingTagName="h2" variant="title-default">atorvastatin</cre8-heading>
-  <div slot="headingAfter">
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="25" viewBox="0 0 16 25" fill="none">
-      <path
-        d="M13.5694 5.87747C13.2776 5.87747 13.041 6.12621 13.041 6.433V22.5427C13.041 23.4732 12.8297 23.6871 11.9077 23.6871H4.59773C3.67837 23.6871 3.46703 23.4732 3.46703 22.5427V21.1928H9.85496C10.1468 21.1928 10.3833 20.9441 10.3833 20.6373V8.99389C10.3833 8.6871 10.1468 8.43839 9.85496 8.43839H3.46438V6.43578C3.46438 6.12898 3.22783 5.88027 2.93602 5.88027C2.64421 5.88027 2.40765 6.12898 2.40765 6.43578V22.5455C2.40765 24.087 3.1051 24.8036 4.60037 24.8036H11.9103C13.4082 24.8036 14.103 24.087 14.103 22.5455V6.43578C14.1037 6.287 14.0476 6.14414 13.9473 6.0392C13.847 5.93426 13.7109 5.87601 13.5694 5.87747Z"
-        fill="#009BDF"
-      />
-      <path
-        d="M15.4716 0H1.06053C0.768722 0 0.532166 0.248709 0.532166 0.555508V4.3274C0.532166 4.6342 0.768722 4.88291 1.06053 4.88291H15.4716C15.7634 4.88291 16 4.6342 16 4.3274V0.555508C16 0.248709 15.7634 0 15.4716 0ZM14.9433 3.7719H1.59153V1.11657H14.9433V3.7719Z"
-        fill="#009BDF"
-      />
-    </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="25" viewBox="0 0 16 25" fill="none">
-      <path
-        d="M13.5694 5.87747C13.2776 5.87747 13.041 6.12621 13.041 6.433V22.5427C13.041 23.4732 12.8297 23.6871 11.9077 23.6871H4.59773C3.67837 23.6871 3.46703 23.4732 3.46703 22.5427V21.1928H9.85496C10.1468 21.1928 10.3833 20.9441 10.3833 20.6373V8.99389C10.3833 8.6871 10.1468 8.43839 9.85496 8.43839H3.46438V6.43578C3.46438 6.12898 3.22783 5.88027 2.93602 5.88027C2.64421 5.88027 2.40765 6.12898 2.40765 6.43578V22.5455C2.40765 24.087 3.1051 24.8036 4.60037 24.8036H11.9103C13.4082 24.8036 14.103 24.087 14.103 22.5455V6.43578C14.1037 6.287 14.0476 6.14414 13.9473 6.0392C13.847 5.93426 13.7109 5.87601 13.5694 5.87747Z"
-        fill="#009BDF"
-      />
-      <path
-        d="M15.4716 0H1.06053C0.768722 0 0.532166 0.248709 0.532166 0.555508V4.3274C0.532166 4.6342 0.768722 4.88291 1.06053 4.88291H15.4716C15.7634 4.88291 16 4.6342 16 4.3274V0.555508C16 0.248709 15.7634 0 15.4716 0ZM14.9433 3.7719H1.59153V1.11657H14.9433V3.7719Z"
-        fill="#009BDF"
-      />
-    </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="25" viewBox="0 0 16 25" fill="none">
-      <path
-        d="M13.5694 5.87747C13.2776 5.87747 13.041 6.12621 13.041 6.433V22.5427C13.041 23.4732 12.8297 23.6871 11.9077 23.6871H4.59773C3.67837 23.6871 3.46703 23.4732 3.46703 22.5427V21.1928H9.85496C10.1468 21.1928 10.3833 20.9441 10.3833 20.6373V8.99389C10.3833 8.6871 10.1468 8.43839 9.85496 8.43839H3.46438V6.43578C3.46438 6.12898 3.22783 5.88027 2.93602 5.88027C2.64421 5.88027 2.40765 6.12898 2.40765 6.43578V22.5455C2.40765 24.087 3.1051 24.8036 4.60037 24.8036H11.9103C13.4082 24.8036 14.103 24.087 14.103 22.5455V6.43578C14.1037 6.287 14.0476 6.14414 13.9473 6.0392C13.847 5.93426 13.7109 5.87601 13.5694 5.87747Z"
-        fill="#009BDF"
-      />
-      <path
-        d="M15.4716 0H1.06053C0.768722 0 0.532166 0.248709 0.532166 0.555508V4.3274C0.532166 4.6342 0.768722 4.88291 1.06053 4.88291H15.4716C15.7634 4.88291 16 4.6342 16 4.3274V0.555508C16 0.248709 15.7634 0 15.4716 0ZM14.9433 3.7719H1.59153V1.11657H14.9433V3.7719Z"
-        fill="#009BDF"
-      />
-    </svg>
-    3 refills left
-  </div>
-  <cre8-grid variant="1-3up">
-    <cre8-grid-item>
-      <cre8-text-passage> 40 mg </cre8-text-passage>
-      <cre8-text-passage> Dr Hayden Park <a href="#">Update doctor</a> </cre8-text-passage>
-      <cre8-text-passage> Rx# 8974065213 <a href="#">Prescription details</a> </cre8-text-passage>
-    </cre8-grid-item>
-    <cre8-grid-item>
-      <icon-description verticalAlign="center" size="sm"><cre8-icon-legacy name="people" slot="header"></cre8-icon-legacy>Chris</icon-description>
-      <icon-description verticalAlign="center" size="sm">
-        <cre8-icon-legacy name="pharmacy" style="--cre8-icon-height: 2rem; --cre8-icon-width: 2rem;" slot="header"></cre8-icon-legacy> Pharmacy
-        Pharmacy
-      </icon-description>
-    </cre8-grid-item>
-    <cre8-grid-item style="text-align: right">
-      <icon-description weight="light" class="cre8-u-display-block cre8-u-margin-bottom-sm" align="end" verticalAlign="center" size="sm">
-        <cre8-icon-legacy name="order-status" slot="header"></cre8-icon-legacy>Enrolled in auto refill
-      </icon-description>
-      <cre8-button
-        class="cre8-u-display-block cre8-u-margin-bottom-sm"
-        text="Manage Auto Refill"
-        iconPosition="after"
-        iconName="keyboard-arrow-down"
-      ></cre8-button>
-      <cre8-text-link>Archive Medication</cre8-text-link>
-    </cre8-grid-item>
-  </cre8-grid>
-  <div slot="footer" style="display: flex; align-items: center;  gap: 1rem">
-    <cre8-text-passage><strong>Next order:</strong> Processing Estimated delivery by: Aug 16,2022</cre8-text-passage>
-    <cre8-button text="Order details" variant="link" size="sm" iconPosition="after" iconName="keyboard-arrow-down"></cre8-button>
-  </div>
-</medication-card>`;e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`args => html\`<medication-card \${spread(args)}>
-  <cre8-heading slot="heading" headingTagName="h2" variant="title-default">atorvastatin</cre8-heading>
-  <div slot="headingAfter">
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="25" viewBox="0 0 16 25" fill="none">
-      <path
-        d="M13.5694 5.87747C13.2776 5.87747 13.041 6.12621 13.041 6.433V22.5427C13.041 23.4732 12.8297 23.6871 11.9077 23.6871H4.59773C3.67837 23.6871 3.46703 23.4732 3.46703 22.5427V21.1928H9.85496C10.1468 21.1928 10.3833 20.9441 10.3833 20.6373V8.99389C10.3833 8.6871 10.1468 8.43839 9.85496 8.43839H3.46438V6.43578C3.46438 6.12898 3.22783 5.88027 2.93602 5.88027C2.64421 5.88027 2.40765 6.12898 2.40765 6.43578V22.5455C2.40765 24.087 3.1051 24.8036 4.60037 24.8036H11.9103C13.4082 24.8036 14.103 24.087 14.103 22.5455V6.43578C14.1037 6.287 14.0476 6.14414 13.9473 6.0392C13.847 5.93426 13.7109 5.87601 13.5694 5.87747Z"
-        fill="#009BDF"
-      />
-      <path
-        d="M15.4716 0H1.06053C0.768722 0 0.532166 0.248709 0.532166 0.555508V4.3274C0.532166 4.6342 0.768722 4.88291 1.06053 4.88291H15.4716C15.7634 4.88291 16 4.6342 16 4.3274V0.555508C16 0.248709 15.7634 0 15.4716 0ZM14.9433 3.7719H1.59153V1.11657H14.9433V3.7719Z"
-        fill="#009BDF"
-      />
-    </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="25" viewBox="0 0 16 25" fill="none">
-      <path
-        d="M13.5694 5.87747C13.2776 5.87747 13.041 6.12621 13.041 6.433V22.5427C13.041 23.4732 12.8297 23.6871 11.9077 23.6871H4.59773C3.67837 23.6871 3.46703 23.4732 3.46703 22.5427V21.1928H9.85496C10.1468 21.1928 10.3833 20.9441 10.3833 20.6373V8.99389C10.3833 8.6871 10.1468 8.43839 9.85496 8.43839H3.46438V6.43578C3.46438 6.12898 3.22783 5.88027 2.93602 5.88027C2.64421 5.88027 2.40765 6.12898 2.40765 6.43578V22.5455C2.40765 24.087 3.1051 24.8036 4.60037 24.8036H11.9103C13.4082 24.8036 14.103 24.087 14.103 22.5455V6.43578C14.1037 6.287 14.0476 6.14414 13.9473 6.0392C13.847 5.93426 13.7109 5.87601 13.5694 5.87747Z"
-        fill="#009BDF"
-      />
-      <path
-        d="M15.4716 0H1.06053C0.768722 0 0.532166 0.248709 0.532166 0.555508V4.3274C0.532166 4.6342 0.768722 4.88291 1.06053 4.88291H15.4716C15.7634 4.88291 16 4.6342 16 4.3274V0.555508C16 0.248709 15.7634 0 15.4716 0ZM14.9433 3.7719H1.59153V1.11657H14.9433V3.7719Z"
-        fill="#009BDF"
-      />
-    </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="25" viewBox="0 0 16 25" fill="none">
-      <path
-        d="M13.5694 5.87747C13.2776 5.87747 13.041 6.12621 13.041 6.433V22.5427C13.041 23.4732 12.8297 23.6871 11.9077 23.6871H4.59773C3.67837 23.6871 3.46703 23.4732 3.46703 22.5427V21.1928H9.85496C10.1468 21.1928 10.3833 20.9441 10.3833 20.6373V8.99389C10.3833 8.6871 10.1468 8.43839 9.85496 8.43839H3.46438V6.43578C3.46438 6.12898 3.22783 5.88027 2.93602 5.88027C2.64421 5.88027 2.40765 6.12898 2.40765 6.43578V22.5455C2.40765 24.087 3.1051 24.8036 4.60037 24.8036H11.9103C13.4082 24.8036 14.103 24.087 14.103 22.5455V6.43578C14.1037 6.287 14.0476 6.14414 13.9473 6.0392C13.847 5.93426 13.7109 5.87601 13.5694 5.87747Z"
-        fill="#009BDF"
-      />
-      <path
-        d="M15.4716 0H1.06053C0.768722 0 0.532166 0.248709 0.532166 0.555508V4.3274C0.532166 4.6342 0.768722 4.88291 1.06053 4.88291H15.4716C15.7634 4.88291 16 4.6342 16 4.3274V0.555508C16 0.248709 15.7634 0 15.4716 0ZM14.9433 3.7719H1.59153V1.11657H14.9433V3.7719Z"
-        fill="#009BDF"
-      />
-    </svg>
-    3 refills left
-  </div>
-  <cre8-grid variant="1-3up">
-    <cre8-grid-item>
-      <cre8-text-passage> 40 mg </cre8-text-passage>
-      <cre8-text-passage> Dr Hayden Park <a href="#">Update doctor</a> </cre8-text-passage>
-      <cre8-text-passage> Rx# 8974065213 <a href="#">Prescription details</a> </cre8-text-passage>
-    </cre8-grid-item>
-    <cre8-grid-item>
-      <icon-description verticalAlign="center" size="sm"><cre8-icon-legacy name="people" slot="header"></cre8-icon-legacy>Chris</icon-description>
-      <icon-description verticalAlign="center" size="sm">
-        <cre8-icon-legacy name="pharmacy" style="--cre8-icon-height: 2rem; --cre8-icon-width: 2rem;" slot="header"></cre8-icon-legacy> Pharmacy
-        Pharmacy
-      </icon-description>
-    </cre8-grid-item>
-    <cre8-grid-item style="text-align: right">
-      <icon-description weight="light" class="cre8-u-display-block cre8-u-margin-bottom-sm" align="end" verticalAlign="center" size="sm">
-        <cre8-icon-legacy name="order-status" slot="header"></cre8-icon-legacy>Enrolled in auto refill
-      </icon-description>
-      <cre8-button
-        class="cre8-u-display-block cre8-u-margin-bottom-sm"
-        text="Manage Auto Refill"
-        iconPosition="after"
-        iconName="keyboard-arrow-down"
-      ></cre8-button>
-      <cre8-text-link>Archive Medication</cre8-text-link>
-    </cre8-grid-item>
-  </cre8-grid>
-  <div slot="footer" style="display: flex; align-items: center;  gap: 1rem">
-    <cre8-text-passage><strong>Next order:</strong> Processing Estimated delivery by: Aug 16,2022</cre8-text-passage>
-    <cre8-button text="Order details" variant="link" size="sm" iconPosition="after" iconName="keyboard-arrow-down"></cre8-button>
-  </div>
-</medication-card>\``,...e.parameters?.docs?.source}}};const u=["Default"];export{e as Default,u as __namedExportsOrder,x as default};

package/dist/assets/medication-form.stories-DfFOCDaU.js

@@ -1,57 +0,0 @@
-import{a as i,b as t}from"./iframe-BNJP6ovU.js";import"./button-CgaWukz0.js";import"./field-BpUYyRW1.js";import{s as o}from"./spread-CnPic3C2.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-Bxnzk64Q.js";import"./cre8-element-B35i4Lyg.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Cfc5VeYV.js";import"./icon-ChfRWXWy.js";import"./loading-spinner-C52KNq6y.js";import"./index.browser-BY9c7rfI.js";import"./field-note-fccBckVl.js";i`@import 'design-tokens/core/scss/theming/component' ;
-
-/**
- * 1)
- */
-.c-medication-form {
-  display: flex;
-  flex-wrap: wrap;
-  margin: size(-1.5);
-  flex-direction: column;
-
-  @media all and (min-width: component.$cre8-breakpoint-md) {
-    flex-direction: row;
-    width: 100%;
-  }
-}
-
-/**
-  * Slotted grid item within 1-2-4up Grid
-  */
-::slotted(*) {
-  width: 100%;
-  padding: size(1.5);
-
-  @media all and (min-width: component.$cre8-breakpoint-md) {
-    width: 50%;
-  }
-
-  @media all and (min-width: component.$cre8-breakpoint-xl) {
-    flex: 1;
-  }
-}
-
-::slotted(:first-child) {
-  @media all and (min-width: component.$cre8-breakpoint-lg) {
-    flex: auto;
-    width: 20%;
-  }
-}
-
-::slotted(:last-child) {
-  @media all and (min-width: component.$cre8-breakpoint-md) {
-    position: relative;
-    top: size(6.25);
-  }
-}
-`;const y={title:"Examples/Medication Form",component:"medication-form",parameters:{status:{type:"inProgress"}}},e=r=>t`<medication-form ${o(r)}>
-  <cre8-field label="Enter medication name of Rx number" placeholder="ex. Lipitor or Rx number"></cre8-field>
-  <cre8-field label="Filter by member" placeholder="All"></cre8-field>
-  <cre8-field label="Filter by pharmacy type" placeholder="All"></cre8-field>
-  <cre8-button text="Clear All" variant="bare" ?disabled=${!0}></cre8-button>
-</medication-form>`;e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`args => html\`<medication-form \${spread(args)}>
-  <cre8-field label="Enter medication name of Rx number" placeholder="ex. Lipitor or Rx number"></cre8-field>
-  <cre8-field label="Filter by member" placeholder="All"></cre8-field>
-  <cre8-field label="Filter by pharmacy type" placeholder="All"></cre8-field>
-  <cre8-button text="Clear All" variant="bare" ?disabled=\${true}></cre8-button>
-</medication-form>\``,...e.parameters?.docs?.source}}};const $=["Default"];export{e as Default,$ as __namedExportsOrder,y as default};

package/dist/assets/request-prescription.stories-O4zqokfb.js

@@ -1,24 +0,0 @@
-import{a as r,b as t}from"./iframe-BNJP6ovU.js";import"./button-CgaWukz0.js";import"./text-passage-xQVosjOr.js";import"./preload-helper-PPVm8Dsz.js";import"./if-defined-Bxnzk64Q.js";import"./cre8-element-B35i4Lyg.js";import"./_commonjsHelpers-DaWZu8wl.js";import"./query-BpjciUlk.js";import"./base-DVmwUFg0.js";import"./cre8-form-element-Cfc5VeYV.js";import"./icon-ChfRWXWy.js";import"./loading-spinner-C52KNq6y.js";r`@import 'design-tokens/core/scss/theming/component' ;
-
-/**
- * 1)
- */
-.c-request-prescription {
-  @include cre8-typography-body-large();
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: size(5);
-  border: var(--cre8-theme-border-width) dashed var(--cre8-color-border-default);
-}
-
-.c-request-prescription__footer {
-  margin-top: size(2);
-}
-`;const x={title:"Examples/Request Prescription",component:"request-prescription",parameters:{status:{type:"inProgress"}}},e=o=>t` <request-prescription>
-  <cre8-text-passage>Have a new prescription or want to transfer one from another pharmacy?</cre8-text-passage>
-  <cre8-button slot="footer" text="Request an Rx" iconPosition="before" iconName="add" variant="primary"></cre8-button>
-</request-prescription>`;e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`args => html\` <request-prescription>
-  <cre8-text-passage>Have a new prescription or want to transfer one from another pharmacy?</cre8-text-passage>
-  <cre8-button slot="footer" text="Request an Rx" iconPosition="before" iconName="add" variant="primary"></cre8-button>
-</request-prescription>\``,...e.parameters?.docs?.source}}};const b=["Default"];export{e as Default,b as __namedExportsOrder,x as default};

package/dist/assets/state-DkQhleoO.js

@@ -1 +0,0 @@
-import{n as r}from"./cre8-element-B35i4Lyg.js";function n(t){return r({...t,state:!0,attribute:!1})}export{n as r};