@affinda/wc 0.1.0 → 0.2.0

package/dist/types/types.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Shared prop-union types used across multiple @affinda/wc components.
+ *
+ * Before adding a new union here: check whether the value list is truly
+ * shared across components, or whether it's specific to one. Component-
+ * local unions (e.g. a 2-value `direction` prop) should stay local; only
+ * lift types here when they're duplicated verbatim in 2+ places, or when
+ * a semantic concept (theme, spacing scale) deserves a single source of
+ * truth.
+ */
+/**
+ * Brand theme token. Drives background colour and theme-dependent child
+ * styling (typography colour, button tokens, etc.) via a `theme-{name}`
+ * class on the rendered wrapper.
+ *
+ * Canonical values: `'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory'`.
+ *
+ * Consumers: af-section, af-theme-override, af-feature-card,
+ * af-illustrated-card, af-card, af-client-carousel, af-navbar,
+ * af-in-page-banner, af-split-section.
+ */
+export type Theme = 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
+/**
+ * Gap spacing token. Maps to `--space-{n}` CSS custom properties (space
+ * scale: 1=4px, 2=8px, 3=12px, 4=16px, 5=20px, 6=24px, 8=32px).
+ *
+ * Canonical values: `'1' | '2' | '3' | '4' | '5' | '6' | '8'`.
+ *
+ * Consumers: af-stack, af-grid, af-inline, af-divider (as part of its
+ * `spacing` prop). Note: af-button-group uses `gap: string` (free-form
+ * CSS length) and intentionally opts out of the token ladder.
+ */
+export type Gap = '1' | '2' | '3' | '4' | '5' | '6' | '8';
+/**
+ * Section padding variant. Drives top/bottom padding via `padding-{name}`
+ * classes on the rendered wrapper.
+ *
+ * Canonical values: `'none' | 'tight' | 'default' | 'loose'`.
+ *
+ * Consumers: af-section, af-split-section.
+ */
+export type Padding = 'none' | 'tight' | 'default' | 'loose';
+/**
+ * Typography heading size. Controls ONLY the visual scale of a heading
+ * lockup; the semantic level (h1-h6) is determined by the slotted tag
+ * the consumer passes in. See af-typography-lockup for the full
+ * semantic-vs-visual convention.
+ *
+ * Canonical values: `1 | 2 | 3 | 4 | 5 | 'card'`.
+ *
+ * - `1`-`5` map to the type ladder (1 largest, 5 smallest).
+ * - `'card'` is a named card-title scale (22/20px) that sits between
+ *   `4` and `5`, used for card titles in dense grids.
+ *
+ * Consumers: af-typography-lockup.
+ */
+export type HeadingSize = 1 | 2 | 3 | 4 | 5 | 'card';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affinda/wc",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs.js",
@@ -14,7 +14,7 @@
   ],
   "dependencies": {
     "@stencil/core": "^4.9.1",
-    "@affinda/css": "^0.0.14",
+    "@affinda/css": "^0.0.15",
     "@affinda/icons": "^0.0.6",
     "@affinda/illustrations": "^0.0.8",
     "@affinda/tokens": "^0.1.0"

package/dist/affinda/p-083fc528.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as e,H as f}from"./p-MwnBSqEY.js";const a=".sc-af-footer-column-h{display:block}.footer-column.sc-af-footer-column{display:flex;flex-direction:column;gap:16px}.footer-column__heading.sc-af-footer-column{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0;text-transform:none}.footer-column__list.sc-af-footer-column{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.footer-column__list.sc-af-footer-column-s>li,.footer-column__list .sc-af-footer-column-s>li{margin:0}";const c=class{constructor(e){o(this,e);this.heading=""}render(){return e(f,{key:"aff327dcb95b40e2835062053b7e59ee38d1e251"},e("div",{key:"1f08aa09e7ffc52dda5603f5b3a1bb8ab8b42426",class:"footer-column"},this.heading&&e("h5",{key:"ef2532c50e755acb21f786edfbc23ade0097e385",class:"footer-column__heading"},this.heading),e("ul",{key:"c96d5cda9bef99805eb17af7689a294adf80e33b",class:"footer-column__list"},e("slot",{key:"5efdffcd7fc885e71a9460bc21a2d40bf486c14d"}))))}};c.style=a;export{c as af_footer_column};
-//# sourceMappingURL=p-083fc528.entry.js.map

package/dist/affinda/p-0e469ad2.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,H as c}from"./p-MwnBSqEY.js";const i=".sc-af-icon-text-h{display:block}.icon-text.sc-af-icon-text{display:flex;width:100%}.icon-text--vertical.sc-af-icon-text{flex-direction:column;gap:24px;align-items:flex-start}.icon-text--horizontal.sc-af-icon-text{flex-direction:row;gap:20px;align-items:flex-start}.icon-text__icon.sc-af-icon-text{flex-shrink:0}.icon-text__lockup.sc-af-icon-text{flex:1;min-width:0}@media (max-width: 768px){.icon-text--vertical.sc-af-icon-text{gap:20px}.icon-text--horizontal.sc-af-icon-text{gap:16px}}";const a=class{constructor(e){t(this,e);this.headingSize=4;this.orientation="vertical";this.iconSize="default"}render(){const t={"icon-text":true,[`icon-text--${this.orientation}`]:true};return e(c,{key:"5ee5ddd91804507b0e4029adeee9eebb687448d9"},e("div",{key:"5c00e4451c12aeaf924c2d9dff3ad85cb5555813",class:t},e("af-icon-box",{key:"d375fa1087651f86fd778744c276bd92e387b297",icon:this.icon,size:this.iconSize,class:"icon-text__icon"}),e("af-typography-lockup",{key:"2be428ff1b3210972248ef741086d96eb6829cb9",headingSize:this.headingSize,textAlignment:"left",buttonAlignment:"vertical",class:"icon-text__lockup"},e("slot",{key:"0da48d34ee2d1ab77c2aac80daffdbce4b2774b1"}),e("span",{key:"140db3a089b16211db54b67b786a90795dbe3d8a",slot:"description"},e("slot",{key:"37d6b87dc348b95c5178e9a04e902f04664a0feb",name:"description"})),e("span",{key:"10031a47ef045d9ad95cb1bb90289fa1d599bc35",slot:"buttons"},e("slot",{key:"decf43947df87a58f42d10ba5025e9c6e1149ca2",name:"buttons"})))))}};a.style=i;export{a as af_icon_text};
-//# sourceMappingURL=p-0e469ad2.entry.js.map

package/dist/affinda/p-41643147.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as t,H as e}from"./p-MwnBSqEY.js";const c=".sc-af-contact-item-h{display:block}.contact-item.sc-af-contact-item{display:flex;flex-direction:column;gap:4px}.contact-item__label.sc-af-contact-item{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0}.contact-item__value.sc-af-contact-item{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:400;color:rgba(198, 213, 209, 0.7);margin:0}";const s=class{constructor(t){a(this,t);this.label="";this.value=""}render(){return t(e,{key:"1a52a5ea61e7ef04f3b86e8338ed6984a57101a2"},t("div",{key:"9c69396e916f489d572f045e78daf990a72e0d24",class:"contact-item"},this.label&&t("h5",{key:"7575301c7a83aa2034aaaf9b9bdb2a0bd5e072bb",class:"contact-item__label"},this.label),this.value&&t("p",{key:"5cbca2b4420b2184fb08ac7f1edb22bce50b9c4c",class:"contact-item__value"},this.value),t("slot",{key:"45624be318ed9146a9ec0f2b81af110f8cb82ff6"})))}};s.style=c;export{s as af_contact_item};
-//# sourceMappingURL=p-41643147.entry.js.map

package/dist/affinda/p-49521f2e.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as i,H as a,a as s}from"./p-MwnBSqEY.js";const r=":host{display:block;width:100%}.accordion-item{width:100%}.trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0;background:transparent;border:none;border-bottom:1px solid var(--af-background-border-subtle, #e8eeed);cursor:pointer;font:inherit;text-align:left;color:var(--af-typography-body-dark, #14343b);transition:background-color 0.2s ease}.trigger:hover:not(:disabled){background-color:var(--af-background-base-hover, rgba(20, 52, 59, 0.02))}.trigger:focus-visible{outline:2px solid var(--af-background-border-active, #8a7049);outline-offset:-2px}.trigger:disabled{cursor:not-allowed;opacity:0.5}.trigger-content{flex:1;min-width:0}.chevron{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-typography-body-dark, #14343b);transition:transform 0.3s ease}.chevron.is-open{transform:rotate(180deg)}.content-wrapper{overflow:hidden;transition:max-height 0.3s ease}.content{padding:0}:host(.is-disabled) .trigger{cursor:not-allowed;opacity:0.5}:host(.is-disabled) .trigger:hover{background-color:transparent}:host(.is-open) .trigger{border-bottom-color:transparent}";const o=class{constructor(i){e(this,i);this.accordionToggle=t(this,"af-accordion-toggle");this.open=false;this.disabled=false;this.contentHeight=0;this.handleTriggerClick=()=>{if(!this.disabled){this.toggle()}}}handleOpenChange(e){if(e){this.measureContent()}}componentDidLoad(){if(this.open){this.measureContent()}this.resizeObserver=new ResizeObserver((()=>{if(this.open&&this.contentRef){this.contentHeight=this.contentRef.scrollHeight}}));if(this.contentRef){this.resizeObserver.observe(this.contentRef)}}disconnectedCallback(){if(this.resizeObserver){this.resizeObserver.disconnect()}}async toggle(){if(!this.disabled){this.open=!this.open;this.accordionToggle.emit({itemId:this.itemId,open:this.open})}}measureContent(){requestAnimationFrame((()=>{if(this.contentRef){this.contentHeight=this.contentRef.scrollHeight}}))}render(){const e={maxHeight:this.open?`${this.contentHeight}px`:"0px"};return i(a,{key:"f09a5fe4d1ca9e14d674c5cb255c391355fba0b9",class:{"is-open":this.open,"is-disabled":this.disabled}},i("div",{key:"2e53d4c8599acd81e7a624ac130add7ea7be3c86",class:"accordion-item"},i("button",{key:"c3b97ff90a37ac7f582b2ba086db0faa21328dc2",class:"trigger",onClick:this.handleTriggerClick,"aria-expanded":this.open?"true":"false","aria-controls":`content-${this.itemId}`,disabled:this.disabled,type:"button"},i("div",{key:"48446eb132a44680630f46c1bd65921a440f688a",class:"trigger-content"},i("slot",{key:"a47fdf5a659602a340091544587be928c226a89b",name:"trigger"})),i("div",{key:"1c938183404f982ebcfe3ba0661f57e4ecf2c006",class:{chevron:true,"is-open":this.open}},i("svg",{key:"20d3ef9eb98b0cbb2f0af2165cc911fb3ec93bd5",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor"},i("path",{key:"7477c118131ce91b79d1c9f74174c9431ee60dca",d:"M6 9l6 6 6-6","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})))),i("div",{key:"676a89763218ddbd6daddb174a4eebecfffb6a94",id:`content-${this.itemId}`,class:"content-wrapper",style:e,"aria-hidden":!this.open?"true":"false"},i("div",{key:"fb0f8760497cf998daa0f1cd5c52c6349fb125e4",class:"content",ref:e=>this.contentRef=e},i("slot",{key:"300f0b749dbaf06bb44ad9b176f3d9f64c52db6e"})))))}get el(){return s(this)}static get watchers(){return{open:["handleOpenChange"]}}};o.style=r;export{o as af_accordion_item};
-//# sourceMappingURL=p-49521f2e.entry.js.map

package/dist/affinda/p-56fe6e6e.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as r,H as s}from"./p-MwnBSqEY.js";const a=".sc-af-progress-line-h{display:block;width:100%}.progress-line.sc-af-progress-line{position:relative;overflow:hidden}.progress-line--horizontal.sc-af-progress-line{height:3px;width:100%}.progress-line__background.sc-af-progress-line{position:absolute;inset:0;background:var(--af-background-border-default, var(--colour-background-border-default, #d1ddda));height:1px;top:50%;transform:translateY(-50%)}.progress-line__active.sc-af-progress-line{position:relative;height:100%;min-width:1px;background:var(--af-background-border-active, var(--colour-background-border-active, #8a7049));transition:width 0.15s ease-out}";const o=class{constructor(r){e(this,r);this.progress=0;this.orientation="horizontal"}render(){const e=Math.max(0,Math.min(1,this.progress));const a=e*100;return r(s,{key:"e831de02f8d1263448cf0441085cee677230374e"},r("div",{key:"57eec77244c1f0c2a1a763d04b22751651069dbc",class:{"progress-line":true,[`progress-line--${this.orientation}`]:true},role:"progressbar","aria-valuenow":Math.round(a),"aria-valuemin":0,"aria-valuemax":100},r("div",{key:"9b3229746fef82f644953a189959c109104be511",class:"progress-line__background"}),r("div",{key:"0f5ec3a4a51b350b3b9cb26ea446167a40ce4ae4",class:"progress-line__active",style:{width:`${a}%`}})))}};o.style=a;export{o as af_progress_line};
-//# sourceMappingURL=p-56fe6e6e.entry.js.map

package/dist/affinda/p-a6eda8af.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as s,H as e,a as c}from"./p-MwnBSqEY.js";const a=".sc-af-accordion-h{display:block;width:100%}.accordion.sc-af-accordion{display:flex;flex-direction:column;width:100%}.sc-af-accordion-s>af-accordion-item{display:block}.sc-af-accordion-s>af-accordion-item:last-child{--accordion-item-border:transparent}";const n=class{constructor(s){i(this,s);this.accordionChange=t(this,"af-accordion-change");this.mode="independent";this.internalValue=[]}isControlled(){return this.value!==undefined}componentWillLoad(){const i=this.isControlled()?this.value:this.defaultValue;this.internalValue=this.normalizeValue(i)}handleValueChange(i){if(this.isControlled()){this.internalValue=this.normalizeValue(i);this.syncItems()}}componentDidLoad(){this.syncItems()}handleItemToggle(i){i.stopPropagation();const{itemId:t,open:s}=i.detail;let e;if(this.mode==="exclusive"){e=s?[t]:[]}else{if(s){e=[...this.internalValue,t]}else{e=this.internalValue.filter((i=>i!==t))}}if(!this.isControlled()){this.internalValue=e;this.syncItems()}const c=this.mode==="exclusive"?e.length>0?e[0]:null:e;this.accordionChange.emit({value:c})}normalizeValue(i){if(i===undefined||i===null){return[]}if(Array.isArray(i)){return this.mode==="exclusive"?i.slice(0,1):i}return[i]}syncItems(){const i=this.el.querySelectorAll("af-accordion-item");i.forEach((i=>{const t=i;if(t.itemId){t.open=this.internalValue.includes(t.itemId)}}))}render(){return s(e,{key:"e0060977dd938771a54e2941a962a58bf18b61dd",class:{[`mode-${this.mode}`]:true}},s("div",{key:"dacacd23dc6f116bb8c856161d1a956c0fc7d70d",class:"accordion"},s("slot",{key:"1dcc400fc416c79f0ac1cf48893de03c46e31741"})))}get el(){return c(this)}static get watchers(){return{value:["handleValueChange"]}}};n.style=a;export{n as af_accordion};
-//# sourceMappingURL=p-a6eda8af.entry.js.map

package/dist/affinda/p-ef5857cf.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as s,h as e,H as t,a as c}from"./p-MwnBSqEY.js";const a=".sc-af-nav-accordion-h{display:block;width:100%}.nav-accordion.sc-af-nav-accordion{display:flex;flex-direction:column;width:100%}";const n=class{constructor(e){i(this,e);this.navAccordionChange=s(this,"af-nav-accordion-change");this.mode="exclusive";this.breakpoint="mobile";this.internalValue=[]}componentWillLoad(){this.internalValue=this.normalizeValue(this.value)}handleItemToggle(i){i.stopPropagation();const{itemId:s,open:e}=i.detail;let t;if(this.mode==="exclusive"){t=e?[s]:[]}else{if(e){t=[...this.internalValue,s]}else{t=this.internalValue.filter((i=>i!==s))}}this.internalValue=t;this.syncItems();const c=this.mode==="exclusive"?t.length>0?t[0]:null:t;this.navAccordionChange.emit({value:c})}normalizeValue(i){if(i===undefined||i===null){return[]}if(Array.isArray(i)){return this.mode==="exclusive"?i.slice(0,1):i}return[i]}syncItems(){const i=this.el.querySelectorAll("af-nav-accordion-item");i.forEach((i=>{const s=i;if(s.itemId){s.open=this.internalValue.includes(s.itemId)}}))}componentDidLoad(){this.syncItems()}render(){return e(t,{key:"518288d29b17ac7ceb69ce24b37258dffefdd742",class:{[`breakpoint-${this.breakpoint}`]:true,[`mode-${this.mode}`]:true}},e("div",{key:"6a5e504a7114f3abbc064da71558342f9c45627d",class:"nav-accordion"},e("slot",{key:"88560460c84396a492d2bc035f2d96c7c30afa58"})))}get el(){return c(this)}};n.style=a;export{n as af_nav_accordion};
-//# sourceMappingURL=p-ef5857cf.entry.js.map

package/dist/components/p-C6-JATRR.js.map

@@ -1 +0,0 @@
-{"file":"p-C6-JATRR.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,w6DAAw6D;;MCqBx7D,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAN9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAwB,SAAS;AAwClD;IAtCC,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,CAAC,gCAAgC,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;AACzD,YAAA,CAAC,0BAA0B,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;SAClD;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxB,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAExB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAC,MAAM,EACpB,YAAY,EAAC,UAAU,EAAA,EAEvB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACpB,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAQ,CAAA,CACvB,CACc,CACnB,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qCAAqC,EAAA,EAC9C,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,CAAQ,CAC7B,CACE,CACN,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-illustrated-card/af-illustrated-card.css?tag=af-illustrated-card&encapsulation=scoped","src/components/af-illustrated-card/af-illustrated-card.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  \n  /* Override card atom defaults - illustrated card handles its own spacing */\n  --af-card-padding: 0;\n  --af-card-gap: 0;\n}\n\n/* ==========================================================================\n   Base Illustrated Card Styles\n   ========================================================================== */\n\n.illustrated-card {\n  min-height: 400px;\n}\n\n/* ==========================================================================\n   Content Area\n   ========================================================================== */\n\n.illustrated-card__content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Desktop default size spacing */\n.illustrated-card--breakpoint-desktop.illustrated-card--size-default .illustrated-card__content {\n  padding: 40px 32px 12px 32px;\n}\n\n/* Desktop large size spacing */\n.illustrated-card--breakpoint-desktop.illustrated-card--size-large .illustrated-card__content {\n  padding: 40px 40px 0 40px;\n}\n\n/* Mobile spacing */\n.illustrated-card--breakpoint-mobile .illustrated-card__content {\n  padding: 32px 24px 12px 24px;\n}\n\n/* ==========================================================================\n   Illustration Area\n   ========================================================================== */\n\n.illustrated-card__illustration-area {\n  position: relative;\n  width: 100%;\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  box-sizing: border-box;\n}\n\n/* Desktop illustration area height */\n.illustrated-card--breakpoint-desktop .illustrated-card__illustration-area {\n  min-height: 160px;\n}\n\n/* Mobile illustration area height */\n.illustrated-card--breakpoint-mobile .illustrated-card__illustration-area {\n  min-height: 192px;\n}\n\n/* Illustration placeholder for when using data attributes */\n.illustrated-card__illustration-placeholder {\n  width: 100%;\n  height: 100%;\n  min-height: 120px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Illustration image styling. The inner image gets the same corner radius\n * (radius-lg / 20px) as the outer af-card so art with a photographic edge\n * stays within the card's rounded frame. Consumers of af-illustrated-card\n * previously hand-rolled this value; it now comes from the token ladder. */\n.illustrated-card__illustration-area ::slotted(img),\n.illustrated-card__illustration-area img {\n  max-width: 100%;\n  max-height: 200px;\n  height: auto;\n  object-fit: contain;\n  border-radius: var(--radius-lg, 20px);\n}\n\n/* ==========================================================================\n   Typography Lockup Styling\n   ========================================================================== */\n\n/* Pass theme colors to typography lockup */\n.illustrated-card af-typography-lockup {\n  --colour-typography-heading-primary: var(--af-typography-heading-primary);\n  --colour-typography-body-default: var(--af-typography-body-default);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Illustrated Card molecule component that combines a card with an illustration.\n *\n * Uses a theme background with text at top, a button row in the middle, and\n * an illustration from @affinda/illustrations at the bottom.\n *\n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n *\n * @slot - Heading text content\n * @slot body - Description/body text content\n * @slot buttons - Action buttons (rendered below the description, above the illustration)\n * @slot illustration - Illustration image element\n */\n@Component({\n  tag: 'af-illustrated-card',\n  styleUrl: 'af-illustrated-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIllustratedCard {\n  /**\n   * Theme variant - sets background color and provides theme context.\n   * Defaults to 'mist-green'.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * Responsive breakpoint for typography sizing.\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Card size variant (applies to desktop only).\n   */\n  @Prop() cardSize: 'default' | 'large' = 'default';\n\n  render() {\n    const wrapperClasses = {\n      'illustrated-card': true,\n      [`illustrated-card--breakpoint-${this.breakpoint}`]: true,\n      [`illustrated-card--size-${this.cardSize}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          <af-card theme={this.theme}>\n            {/* Content area with typography lockup */}\n            <div class=\"illustrated-card__content\">\n              <af-typography-lockup\n                headingSize={3}\n                breakpoint={this.breakpoint}\n                textAlignment=\"left\"\n                buttonLayout=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n                <span slot=\"buttons\">\n                  <slot name=\"buttons\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n\n            {/* Illustration area at bottom */}\n            <div class=\"illustrated-card__illustration-area\">\n              <slot name=\"illustration\"></slot>\n            </div>\n          </af-card>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-CNzQtskW.js.map

@@ -1 +0,0 @@
-{"file":"p-CNzQtskW.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-feature-card/af-feature-card.css?tag=af-feature-card&encapsulation=scoped","src/components/af-feature-card/af-feature-card.tsx"],"sourcesContent":["/* ==========================================================================\n   Feature Card - Figma Specs\n   \n   Desktop Full-bleed: 544px × 660px, radius 32px\n   Desktop Standard default: 544px width, radius 32px\n   Desktop Standard large: 777px width, radius 32px\n   Mobile Full-bleed: 335px × 442px, radius 24px\n   Mobile Standard: 335px width, radius 24px\n   ========================================================================== */\n\n/* ==========================================================================\n   Host Element - Controls outer dimensions\n   ========================================================================== */\n\n:host {\n  display: block;\n  --af-card-padding: 0;\n  --af-card-gap: 0;\n}\n\n/* Fixed size hosts constrain to Figma dimensions */\n:host([card-size=\"default\"]) {\n  width: 544px;\n}\n\n:host([card-size=\"large\"]) {\n  width: 777px;\n}\n\n/* Flexible cards fill their container */\n:host([card-size=\"flexible\"]) {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n/* ==========================================================================\n   Base Feature Card Styles\n   ========================================================================== */\n\n.feature-card {\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-radius: var(--border-radius-card-level-1, 32px);\n  width: 100%;\n  height: 100%;\n  /* Ensure proper clipping of absolutely positioned children with border-radius */\n  isolation: isolate;\n}\n\n/* ==========================================================================\n   Full Bleed Layout Mode\n   Figma: 544px × 660px (desktop), 335px × 442px (mobile)\n   ========================================================================== */\n\n.feature-card--layout-full-bleed {\n  background: var(--background-base, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Full-bleed fixed sizes have explicit heights on host */\n:host([card-size=\"default\"]) .feature-card--layout-full-bleed,\n:host([card-size=\"large\"]) .feature-card--layout-full-bleed {\n  height: 660px;\n}\n\n/* Full-bleed flexible minimum height */\n:host([card-size=\"flexible\"]) .feature-card--layout-full-bleed {\n  min-height: 480px;\n}\n\n.feature-card__background {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  border-radius: 0;\n}\n\n.feature-card__background-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n  border-radius: 0;\n}\n\n/* Overlay gradient with text */\n.feature-card__overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  border-radius: 0;\n  backdrop-filter: blur(2px);\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n  z-index: 1;\n  /* Desktop: pt-124px px-32px pb-32px */\n  padding: 124px 32px 32px 32px;\n\n  /* White text on dark overlay */\n  --af-typography-heading-primary: var(--typography-heading-secondary, #ffffff);\n  --af-typography-heading-secondary: var(--typography-heading-secondary, #ffffff);\n  --af-typography-body-default: var(--typography-body-dark, #ffffff);\n  --colour-typography-heading-primary: var(--typography-heading-secondary, #ffffff);\n  --colour-typography-heading-secondary: var(--typography-heading-secondary, #ffffff);\n  --colour-typography-body-default: var(--typography-body-dark, #ffffff);\n}\n\n/* ==========================================================================\n   Standard Layout Mode\n   \n   Structure: .feature-card > af-card[stretch] > [content] + [image-area]\n   \n   When cardSize=\"flexible\", af-card receives stretch prop which enables\n   the flex chain. Content grows to fill space, image stays at bottom.\n   ========================================================================== */\n\n.feature-card--layout-standard {\n  background: var(--background-level-1, var(--colour-mistgreen-200, #e8eeed));\n}\n\n/* Remove border-radius from inner af-card - outer .feature-card handles rounding */\n.feature-card--layout-standard af-card {\n  --border-radius-card-level-1: 0;\n}\n\n/* Standard flexible minimum height */\n:host([card-size=\"flexible\"]) .feature-card--layout-standard {\n  min-height: 400px;\n}\n\n/* Content area - grows to push image to bottom (when af-card has stretch) */\n.feature-card__content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  z-index: 1;\n  /* Desktop default: pt-40px px-32px pb-12px */\n  padding: 40px 32px 12px 32px;\n  flex: 1 1 auto;\n}\n\n/* Large card content padding: pt-40px px-40px pb-0 */\n:host([card-size=\"large\"]) .feature-card__content {\n  padding: 40px 40px 0 40px;\n}\n\n/* ==========================================================================\n   Image Area (Standard Layout)\n   Figma: 160px height (desktop), 192px height (mobile)\n   ========================================================================== */\n\n.feature-card__image-area {\n  position: relative;\n  width: 100%;\n  height: 160px;\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: 0;\n}\n\n.feature-card__image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center top;\n  border-radius: 0;\n}\n\n/* ==========================================================================\n   Typography Lockup Styling\n   ========================================================================== */\n\n.feature-card af-typography-lockup {\n  --colour-typography-heading-primary: var(--af-typography-heading-primary, var(--typography-heading-primary, #14343b));\n  --colour-typography-body-default: var(--af-typography-body-default, var(--typography-body-default, #2b484f));\n}\n\n/* ==========================================================================\n   Mobile Responsive Styles (max-width: 768px)\n   \n   Figma:\n   - Full-bleed: 335px × 442px, radius 24px\n   - Standard: 335px width, radius 24px\n   ========================================================================== */\n\n/* mobile-only */\n@media (max-width: 768px) {\n  .feature-card {\n    border-radius: var(--border-radius-card-level-1, 24px);\n  }\n\n  /* Mobile fixed widths on host */\n  :host([card-size=\"default\"]),\n  :host([card-size=\"large\"]) {\n    width: 335px;\n  }\n\n  /* Mobile full-bleed height: 442px */\n  :host([card-size=\"default\"]) .feature-card--layout-full-bleed,\n  :host([card-size=\"large\"]) .feature-card--layout-full-bleed {\n    height: 442px;\n  }\n\n  /* Mobile flexible minimum heights */\n  :host([card-size=\"flexible\"]) .feature-card--layout-standard {\n    min-height: 340px;\n  }\n\n  :host([card-size=\"flexible\"]) .feature-card--layout-full-bleed {\n    min-height: 380px;\n  }\n\n  /* Mobile overlay padding: pt-80px px-24px pb-28px */\n  .feature-card__overlay {\n    padding: 80px 24px 28px 24px;\n  }\n\n  /* Mobile content padding: pt-32px px-24px pb-12px */\n  .feature-card__content {\n    padding: 32px 24px 12px 24px;\n  }\n\n  /* Mobile image area: 192px height */\n  .feature-card__image-area {\n    height: 192px;\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Feature Card molecule component that combines a card with an image.\n * \n * Two layout modes:\n * - `standard`: Theme background with text at top and image at bottom\n * - `full-bleed`: Image covers entire card with text overlay at bottom\n * \n * Responsive: Automatically adapts to mobile viewport (≤768px).\n * \n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n * \n * @slot - Heading text content\n * @slot body - Description/body text content\n */\n@Component({\n  tag: 'af-feature-card',\n  styleUrl: 'af-feature-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFeatureCard {\n  /**\n   * Theme variant - sets background color and provides theme context.\n   * Only applies to 'standard' layout mode. Defaults to 'mist-green'.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * Layout mode for the card.\n   * - 'standard': Theme background with text at top and image at bottom\n   * - 'full-bleed': Image covers entire card with text overlay at bottom\n   */\n  @Prop() layout: 'standard' | 'full-bleed' = 'standard';\n\n  /**\n   * Card size variant.\n   * - 'default': Fixed 544px × 420px\n   * - 'large': Fixed 777px × 480px  \n   * - 'flexible': Fills container (for grid layouts)\n   */\n  @Prop({ reflect: true }) cardSize: 'default' | 'large' | 'flexible' = 'default';\n\n  /**\n   * Heading size for typography lockup (1-5, where 1 is largest).\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 3;\n\n  /**\n   * Background/feature image URL.\n   */\n  @Prop() imageSrc?: string;\n\n  /**\n   * Image alt text for accessibility.\n   * Provide meaningful alt text for feature images.\n   * Only use empty string for purely decorative images.\n   */\n  @Prop() imageAlt: string = '';\n\n  render() {\n    const hasImage = !!this.imageSrc;\n    const isFullBleed = this.layout === 'full-bleed';\n\n    const wrapperClasses = {\n      'feature-card': true,\n      [`feature-card--layout-${this.layout}`]: true,\n      [`feature-card--size-${this.cardSize}`]: true,\n    };\n\n    // Full-bleed mode: image background with overlay\n    if (isFullBleed) {\n      return (\n        <Host>\n          <div class={wrapperClasses}>\n            {/* Background image */}\n            {hasImage && (\n              <div class=\"feature-card__background\">\n                <img\n                  src={this.imageSrc}\n                  alt={this.imageAlt}\n                  class=\"feature-card__background-image\"\n                />\n              </div>\n            )}\n\n            {/* Content overlay with gradient */}\n            <div class=\"feature-card__overlay\">\n              <af-typography-lockup\n                headingSize={this.headingSize}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    // Standard mode: theme card with image at bottom\n    const isFlexible = this.cardSize === 'flexible';\n    \n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          <af-card theme={this.theme} stretch={isFlexible}>\n            {/* Content area with typography lockup */}\n            <div class=\"feature-card__content\">\n              <af-typography-lockup\n                headingSize={this.headingSize}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n\n            {/* Image area at bottom */}\n            {hasImage && (\n              <div class=\"feature-card__image-area\">\n                <img\n                  src={this.imageSrc}\n                  alt={this.imageAlt}\n                  class=\"feature-card__image\"\n                />\n              </div>\n            )}\n          </af-card>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}