npm - @affinda/wc - Versions diffs - 0.0.27 → 0.0.28 - Mend

@affinda/wc 0.0.27 → 0.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (401) hide show

package/dist/components/{p-C8y3mc7N.js → p-DqgLTGE0.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
 const afTabBarCss = ":host{display:block;width:100%}.tab-bar{display:flex;flex-wrap:nowrap;align-items:stretch;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--af-scrollbar-thumb, #8a7049) var(--af-scrollbar-track, #d1ddda)}.tab-bar::-webkit-scrollbar{height:4px}.tab-bar::-webkit-scrollbar-track{background:var(--af-scrollbar-track, #d1ddda);border-radius:2px}.tab-bar::-webkit-scrollbar-thumb{background:var(--af-scrollbar-thumb, #8a7049);border-radius:2px}.tab-bar::-webkit-scrollbar-thumb:hover{background:var(--af-scrollbar-thumb-hover, #8d785a)}.tab-bar.shape-square{gap:0;border-bottom:1px solid var(--af-background-border-subtle, #e8eeed)}.tab-bar.shape-pill{gap:0;padding:var(--space-2, 8px);background-color:var(--af-background-level-1, #e8eeed);border-radius:var(--radius-pill, 999px)}.tab-bar.breakpoint-mobile{}.tab-bar.breakpoint-mobile.shape-square{}.tab-bar.breakpoint-mobile.shape-pill{padding:var(--space-1, 4px)}.tab-bar.breakpoint-desktop{}.tab-bar.breakpoint-desktop.shape-square{}.tab-bar.breakpoint-desktop.shape-pill{padding:var(--space-2, 8px)}";
@@ -103,6 +103,6 @@ function defineCustomElement() {
 }
 export { AfTabBar as A, defineCustomElement as d };
-//# sourceMappingURL=p-C8y3mc7N.js.map
+//# sourceMappingURL=p-DqgLTGE0.js.map
-//# sourceMappingURL=p-C8y3mc7N.js.map
+//# sourceMappingURL=p-DqgLTGE0.js.map

package/dist/components/{p-C8y3mc7N.js.map → p-DqgLTGE0.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~C8y3mc7N~~.js","mappings":";;AAAA,MAAM,WAAW,GAAG,qkCAAqkC;;MCyB5kC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQE;;;;AAIG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAgB,QAAQ;AAEtD;;;;AAIG;AACsB,QAAA,IAAU,CAAA,UAAA,GAAqB,SAAS;AA6ElE;IA3EC,gBAAgB,GAAA;QACd,IAAI,CAAC,cAAc,EAAE;;IAGvB,kBAAkB,GAAA;QAChB,IAAI,CAAC,cAAc,EAAE;;AAGvB;;AAEG;IACK,cAAc,GAAA;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC;AAC/C,QAAA,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;YACnB,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;YACrC,GAAG,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,CAAC;AACtD,SAAC,CAAC;;AAGJ;;AAEG;AAEH,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAkB;QAC5F,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,KAAK,QAAQ,CAAC,aAAa,IAAI,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC;QAE3G,IAAI,YAAY,KAAK,EAAE;YAAE;QAEzB,IAAI,QAAQ,GAAG,YAAY;AAE3B,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,YAAY,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBAChE;AACF,YAAA,KAAK,YAAY;gBACf,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,YAAY,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC;gBAChE;AACF,YAAA,KAAK,MAAM;gBACT,KAAK,CAAC,cAAc,EAAE;gBACtB,QAAQ,GAAG,CAAC;gBACZ;AACF,YAAA,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBAC1B;AACF,YAAA;gBACE;;;AAIJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAChC,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC;QAC5D,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,KAAK,EAAE;;;IAIlB,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AAC7B,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;SACxC;AAED,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tab-bar/af-tab-bar.css?tag=af-tab-bar&encapsulation=shadow","src/components/af-tab-bar/af-tab-bar.tsx"],"sourcesContent":["/* TabBar component styles /\n:host {\n display: block;\n width: 100%;\n}\n\n.tab-bar {\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n scrollbar-color: var(--af-scrollbar-thumb, #8a7049) var(--af-scrollbar-track, #d1ddda);\n}\n\n/ Custom scrollbar for WebKit browsers /\n.tab-bar::-webkit-scrollbar {\n height: 4px;\n}\n\n.tab-bar::-webkit-scrollbar-track {\n background: var(--af-scrollbar-track, #d1ddda);\n border-radius: 2px;\n}\n\n.tab-bar::-webkit-scrollbar-thumb {\n background: var(--af-scrollbar-thumb, #8a7049);\n border-radius: 2px;\n}\n\n.tab-bar::-webkit-scrollbar-thumb:hover {\n background: var(--af-scrollbar-thumb-hover, #8d785a);\n}\n\n/ ==========================================================================\n SHAPE: SQUARE\n ========================================================================== /\n\n.tab-bar.shape-square {\n gap: 0;\n border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n}\n\n/ ==========================================================================\n SHAPE: PILL\n ========================================================================== /\n\n.tab-bar.shape-pill {\n gap: 0;\n padding: var(--space-2, 8px);\n background-color: var(--af-background-level-1, #e8eeed);\n border-radius: var(--radius-pill, 999px);\n}\n\n/ ==========================================================================\n BREAKPOINT: MOBILE\n ========================================================================== /\n\n.tab-bar.breakpoint-mobile {\n / Mobile uses compact spacing /\n}\n\n.tab-bar.breakpoint-mobile.shape-square {\n / Tabs handle their own padding in mobile /\n}\n\n.tab-bar.breakpoint-mobile.shape-pill {\n padding: var(--space-1, 4px);\n}\n\n/ ==========================================================================\n BREAKPOINT: DESKTOP\n ========================================================================== /\n\n.tab-bar.breakpoint-desktop {\n / Desktop uses more generous spacing /\n}\n\n.tab-bar.breakpoint-desktop.shape-square {\n / Tabs handle their own padding in desktop mode /\n}\n\n.tab-bar.breakpoint-desktop.shape-pill {\n padding: var(--space-2, 8px);\n}\n\n","import { Component, h, Prop, Host, Element, Listen } from '@stencil/core';\n\nexport type TabBarShape = 'square' \| 'pill';\nexport type TabBarBreakpoint = 'mobile' \| 'desktop';\n\n/\n TabBar component that contains and manages a group of tabs.\n * Provides horizontal layout, keyboard navigation, and consistent styling.\n * \n * @slot - Tab elements (af-tab)\n * \n * @example\n * ```html\n * <af-tab-bar shape=\"square\" breakpoint=\"desktop\">\n * <af-tab label=\"Overview\" active value=\"overview\"></af-tab>\n * <af-tab label=\"Details\" value=\"details\"></af-tab>\n * <af-tab label=\"Settings\" value=\"settings\"></af-tab>\n * </af-tab-bar>\n * ```\n /\n@Component({\n tag: 'af-tab-bar',\n styleUrl: 'af-tab-bar.css',\n shadow: true\n})\nexport class AfTabBar {\n @Element() el!: HTMLElement;\n\n /\n Visual shape variant for all tabs\n * - `square` - Rectangular tabs with bottom border indicator\n * - `pill` - Rounded pill tabs with background for active state\n /\n @Prop({ reflect: true }) shape: TabBarShape = 'square';\n\n /\n Responsive breakpoint mode\n * - `mobile` - Compact layout with smaller padding\n * - `desktop` - Larger layout with more generous spacing\n /\n @Prop({ reflect: true }) breakpoint: TabBarBreakpoint = 'desktop';\n\n componentDidLoad() {\n this.syncChildProps();\n }\n\n componentDidUpdate() {\n this.syncChildProps();\n }\n\n /\n Sync shape and breakpoint props to child af-tab elements\n /\n private syncChildProps() {\n const tabs = this.el.querySelectorAll('af-tab');\n tabs.forEach((tab) => {\n tab.setAttribute('shape', this.shape);\n tab.setAttribute('data-breakpoint', this.breakpoint);\n });\n }\n\n /\n Handle keyboard navigation between tabs\n */\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n const tabs = Array.from(this.el.querySelectorAll('af-tab:not([disabled])')) as HTMLElement[];\n const currentIndex = tabs.findIndex(tab => tab === document.activeElement \|\| tab.shadowRoot?.activeElement);\n \n if (currentIndex === -1) return;\n\n let newIndex = currentIndex;\n\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n break;\n case 'ArrowRight':\n event.preventDefault();\n newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n break;\n case 'Home':\n event.preventDefault();\n newIndex = 0;\n break;\n case 'End':\n event.preventDefault();\n newIndex = tabs.length - 1;\n break;\n default:\n return;\n }\n\n // Focus the button inside the shadow DOM of the tab\n const targetTab = tabs[newIndex];\n const button = targetTab.shadowRoot?.querySelector('button');\n if (button) {\n button.focus();\n }\n }\n\n render() {\n const containerClasses = {\n 'tab-bar': true,\n [`shape-${this.shape}`]: true,\n [`breakpoint-${this.breakpoint}`]: true,\n };\n\n return (\n <Host role=\"tablist\">\n <div class={containerClasses}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
1	+ {"file":"p-DqgLTGE0.js","mappings":";;AAAA,MAAM,WAAW,GAAG,qkCAAqkC;;MCyB5kC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQE;;;;AAIG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAgB,QAAQ;AAEtD;;;;AAIG;AACsB,QAAA,IAAU,CAAA,UAAA,GAAqB,SAAS;AA6ElE;IA3EC,gBAAgB,GAAA;QACd,IAAI,CAAC,cAAc,EAAE;;IAGvB,kBAAkB,GAAA;QAChB,IAAI,CAAC,cAAc,EAAE;;AAGvB;;AAEG;IACK,cAAc,GAAA;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC;AAC/C,QAAA,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;YACnB,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;YACrC,GAAG,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,CAAC;AACtD,SAAC,CAAC;;AAGJ;;AAEG;AAEH,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAkB;QAC5F,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,KAAK,QAAQ,CAAC,aAAa,IAAI,GAAG,CAAC,UAAU,EAAE,aAAa,CAAC;QAE3G,IAAI,YAAY,KAAK,EAAE;YAAE;QAEzB,IAAI,QAAQ,GAAG,YAAY;AAE3B,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,YAAY,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBAChE;AACF,YAAA,KAAK,YAAY;gBACf,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,YAAY,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC;gBAChE;AACF,YAAA,KAAK,MAAM;gBACT,KAAK,CAAC,cAAc,EAAE;gBACtB,QAAQ,GAAG,CAAC;gBACZ;AACF,YAAA,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;gBAC1B;AACF,YAAA;gBACE;;;AAIJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAChC,MAAM,MAAM,GAAG,SAAS,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC;QAC5D,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,KAAK,EAAE;;;IAIlB,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AAC7B,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;SACxC;AAED,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tab-bar/af-tab-bar.css?tag=af-tab-bar&encapsulation=shadow","src/components/af-tab-bar/af-tab-bar.tsx"],"sourcesContent":["/* TabBar component styles /\n:host {\n display: block;\n width: 100%;\n}\n\n.tab-bar {\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n scrollbar-color: var(--af-scrollbar-thumb, #8a7049) var(--af-scrollbar-track, #d1ddda);\n}\n\n/ Custom scrollbar for WebKit browsers /\n.tab-bar::-webkit-scrollbar {\n height: 4px;\n}\n\n.tab-bar::-webkit-scrollbar-track {\n background: var(--af-scrollbar-track, #d1ddda);\n border-radius: 2px;\n}\n\n.tab-bar::-webkit-scrollbar-thumb {\n background: var(--af-scrollbar-thumb, #8a7049);\n border-radius: 2px;\n}\n\n.tab-bar::-webkit-scrollbar-thumb:hover {\n background: var(--af-scrollbar-thumb-hover, #8d785a);\n}\n\n/ ==========================================================================\n SHAPE: SQUARE\n ========================================================================== /\n\n.tab-bar.shape-square {\n gap: 0;\n border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n}\n\n/ ==========================================================================\n SHAPE: PILL\n ========================================================================== /\n\n.tab-bar.shape-pill {\n gap: 0;\n padding: var(--space-2, 8px);\n background-color: var(--af-background-level-1, #e8eeed);\n border-radius: var(--radius-pill, 999px);\n}\n\n/ ==========================================================================\n BREAKPOINT: MOBILE\n ========================================================================== /\n\n.tab-bar.breakpoint-mobile {\n / Mobile uses compact spacing /\n}\n\n.tab-bar.breakpoint-mobile.shape-square {\n / Tabs handle their own padding in mobile /\n}\n\n.tab-bar.breakpoint-mobile.shape-pill {\n padding: var(--space-1, 4px);\n}\n\n/ ==========================================================================\n BREAKPOINT: DESKTOP\n ========================================================================== /\n\n.tab-bar.breakpoint-desktop {\n / Desktop uses more generous spacing /\n}\n\n.tab-bar.breakpoint-desktop.shape-square {\n / Tabs handle their own padding in desktop mode /\n}\n\n.tab-bar.breakpoint-desktop.shape-pill {\n padding: var(--space-2, 8px);\n}\n\n","import { Component, h, Prop, Host, Element, Listen } from '@stencil/core';\n\nexport type TabBarShape = 'square' \| 'pill';\nexport type TabBarBreakpoint = 'mobile' \| 'desktop';\n\n/\n TabBar component that contains and manages a group of tabs.\n * Provides horizontal layout, keyboard navigation, and consistent styling.\n * \n * @slot - Tab elements (af-tab)\n * \n * @example\n * ```html\n * <af-tab-bar shape=\"square\" breakpoint=\"desktop\">\n * <af-tab label=\"Overview\" active value=\"overview\"></af-tab>\n * <af-tab label=\"Details\" value=\"details\"></af-tab>\n * <af-tab label=\"Settings\" value=\"settings\"></af-tab>\n * </af-tab-bar>\n * ```\n /\n@Component({\n tag: 'af-tab-bar',\n styleUrl: 'af-tab-bar.css',\n shadow: true\n})\nexport class AfTabBar {\n @Element() el!: HTMLElement;\n\n /\n Visual shape variant for all tabs\n * - `square` - Rectangular tabs with bottom border indicator\n * - `pill` - Rounded pill tabs with background for active state\n /\n @Prop({ reflect: true }) shape: TabBarShape = 'square';\n\n /\n Responsive breakpoint mode\n * - `mobile` - Compact layout with smaller padding\n * - `desktop` - Larger layout with more generous spacing\n /\n @Prop({ reflect: true }) breakpoint: TabBarBreakpoint = 'desktop';\n\n componentDidLoad() {\n this.syncChildProps();\n }\n\n componentDidUpdate() {\n this.syncChildProps();\n }\n\n /\n Sync shape and breakpoint props to child af-tab elements\n /\n private syncChildProps() {\n const tabs = this.el.querySelectorAll('af-tab');\n tabs.forEach((tab) => {\n tab.setAttribute('shape', this.shape);\n tab.setAttribute('data-breakpoint', this.breakpoint);\n });\n }\n\n /\n Handle keyboard navigation between tabs\n */\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n const tabs = Array.from(this.el.querySelectorAll('af-tab:not([disabled])')) as HTMLElement[];\n const currentIndex = tabs.findIndex(tab => tab === document.activeElement \|\| tab.shadowRoot?.activeElement);\n \n if (currentIndex === -1) return;\n\n let newIndex = currentIndex;\n\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n break;\n case 'ArrowRight':\n event.preventDefault();\n newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n break;\n case 'Home':\n event.preventDefault();\n newIndex = 0;\n break;\n case 'End':\n event.preventDefault();\n newIndex = tabs.length - 1;\n break;\n default:\n return;\n }\n\n // Focus the button inside the shadow DOM of the tab\n const targetTab = tabs[newIndex];\n const button = targetTab.shadowRoot?.querySelector('button');\n if (button) {\n button.focus();\n }\n }\n\n render() {\n const containerClasses = {\n 'tab-bar': true,\n [`shape-${this.shape}`]: true,\n [`breakpoint-${this.breakpoint}`]: true,\n };\n\n return (\n <Host role=\"tablist\">\n <div class={containerClasses}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}

package/dist/components/{p-jTq4gh1Q.js → p-DwhGQrZK.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
 const afProgressLineCss = ".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}";
@@ -47,6 +47,6 @@ function defineCustomElement() {
 }
 export { AfProgressLine as A, defineCustomElement as d };
-//# sourceMappingURL=p-jTq4gh1Q.js.map
+//# sourceMappingURL=p-DwhGQrZK.js.map
-//# sourceMappingURL=p-jTq4gh1Q.js.map
+//# sourceMappingURL=p-DwhGQrZK.js.map

package/dist/components/{p-jTq4gh1Q.js.map → p-DwhGQrZK.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~jTq4gh1Q~~.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0mBAA0mB;;MCcvnB,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAN3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,CAAC;AAE5B;;;AAGG;AACK,QAAA,IAAW,CAAA,WAAA,GAAiB,YAAY;AA4BjD;IA1BC,MAAM,GAAA;;AAEJ,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC/D,QAAA,MAAM,eAAe,GAAG,eAAe,GAAG,GAAG;QAE7C,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;AACrB,gBAAA,CAAC,kBAAkB,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AAC7C,aAAA,EACD,IAAI,EAAC,aAAa,EAAA,eAAA,EACH,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,EAC3B,eAAA,EAAA,CAAC,mBACD,GAAG,EAAA,EAElB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAG,CAAA,EACzC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,eAAe,CAAG,CAAA,CAAA,EAAE,GACvC,CACE,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-progress-line/af-progress-line.css?tag=af-progress-line&encapsulation=scoped","src/components/af-progress-line/af-progress-line.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* ==========================================================================\n Progress Line Base Styles\n ========================================================================== /\n\n.progress-line {\n position: relative;\n overflow: hidden;\n}\n\n.progress-line--horizontal {\n height: 3px;\n width: 100%;\n}\n\n/ ==========================================================================\n Background Track\n ========================================================================== /\n\n.progress-line__background {\n position: absolute;\n inset: 0;\n background: var(--af-background-border-default, var(--colour-background-border-default, #d1ddda));\n height: 1px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n/ ==========================================================================\n Active Progress\n ========================================================================== /\n\n.progress-line__active {\n position: relative;\n height: 100%;\n min-width: 1px;\n background: var(--af-background-border-active, var(--colour-background-border-active, #8a7049));\n transition: width 0.15s ease-out;\n}\n\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/\n Progress Line atom component for displaying scroll or completion progress.\n * \n * Shows a horizontal bar with a filled portion indicating progress.\n * Used primarily for carousel scroll indicators.\n /\n@Component({\n tag: 'af-progress-line',\n styleUrl: 'af-progress-line.css',\n shadow: false,\n scoped: true,\n})\nexport class AfProgressLine {\n /\n Progress value from 0 to 1 (0 = 0%, 1 = 100%).\n /\n @Prop() progress: number = 0;\n\n /\n Orientation of the progress line.\n * Currently only horizontal is supported.\n /\n @Prop() orientation: 'horizontal' = 'horizontal';\n\n render() {\n // Clamp progress between 0 and 1\n const clampedProgress = Math.max(0, Math.min(1, this.progress));\n const progressPercent = clampedProgress 100;\n\n return (\n <Host>\n <div\n class={{\n 'progress-line': true,\n [`progress-line--${this.orientation}`]: true,\n }}\n role=\"progressbar\"\n aria-valuenow={Math.round(progressPercent)}\n aria-valuemin={0}\n aria-valuemax={100}\n >\n <div class=\"progress-line__background\" />\n <div\n class=\"progress-line__active\"\n style={{ width: `${progressPercent}%` }}\n />\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
1	+ {"file":"p-DwhGQrZK.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0mBAA0mB;;MCcvnB,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAN3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,CAAC;AAE5B;;;AAGG;AACK,QAAA,IAAW,CAAA,WAAA,GAAiB,YAAY;AA4BjD;IA1BC,MAAM,GAAA;;AAEJ,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC/D,QAAA,MAAM,eAAe,GAAG,eAAe,GAAG,GAAG;QAE7C,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;AACrB,gBAAA,CAAC,kBAAkB,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AAC7C,aAAA,EACD,IAAI,EAAC,aAAa,EAAA,eAAA,EACH,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,EAC3B,eAAA,EAAA,CAAC,mBACD,GAAG,EAAA,EAElB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAG,CAAA,EACzC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,eAAe,CAAG,CAAA,CAAA,EAAE,GACvC,CACE,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-progress-line/af-progress-line.css?tag=af-progress-line&encapsulation=scoped","src/components/af-progress-line/af-progress-line.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* ==========================================================================\n Progress Line Base Styles\n ========================================================================== /\n\n.progress-line {\n position: relative;\n overflow: hidden;\n}\n\n.progress-line--horizontal {\n height: 3px;\n width: 100%;\n}\n\n/ ==========================================================================\n Background Track\n ========================================================================== /\n\n.progress-line__background {\n position: absolute;\n inset: 0;\n background: var(--af-background-border-default, var(--colour-background-border-default, #d1ddda));\n height: 1px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n/ ==========================================================================\n Active Progress\n ========================================================================== /\n\n.progress-line__active {\n position: relative;\n height: 100%;\n min-width: 1px;\n background: var(--af-background-border-active, var(--colour-background-border-active, #8a7049));\n transition: width 0.15s ease-out;\n}\n\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/\n Progress Line atom component for displaying scroll or completion progress.\n * \n * Shows a horizontal bar with a filled portion indicating progress.\n * Used primarily for carousel scroll indicators.\n /\n@Component({\n tag: 'af-progress-line',\n styleUrl: 'af-progress-line.css',\n shadow: false,\n scoped: true,\n})\nexport class AfProgressLine {\n /\n Progress value from 0 to 1 (0 = 0%, 1 = 100%).\n /\n @Prop() progress: number = 0;\n\n /\n Orientation of the progress line.\n * Currently only horizontal is supported.\n /\n @Prop() orientation: 'horizontal' = 'horizontal';\n\n render() {\n // Clamp progress between 0 and 1\n const clampedProgress = Math.max(0, Math.min(1, this.progress));\n const progressPercent = clampedProgress 100;\n\n return (\n <Host>\n <div\n class={{\n 'progress-line': true,\n [`progress-line--${this.orientation}`]: true,\n }}\n role=\"progressbar\"\n aria-valuenow={Math.round(progressPercent)}\n aria-valuemin={0}\n aria-valuemax={100}\n >\n <div class=\"progress-line__background\" />\n <div\n class=\"progress-line__active\"\n style={{ width: `${progressPercent}%` }}\n />\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}

package/dist/components/{p-DREa7k5l.js → p-Dxa6cHAb.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BBpihWJI.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CqQyDZ-4.js';
 const afCheckboxCss = ":host{display:inline-block}.checkbox{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;line-height:20px;color:var(--af-form-control-label, var(--colour-brand-inkwell, #14343b));user-select:none}.checkbox.disabled{cursor:not-allowed;opacity:0.5}.input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.control{position:relative;display:block;flex-shrink:0;width:20px;height:20px;border-radius:var(--radii-checkbox, 4px);border:none;box-shadow:inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8));background:var(--af-form-control-bg, var(--colour-brand-white, #ffffff));transition:all 0.15s ease;box-sizing:border-box}.control.checked{background:var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));box-shadow:none}.control.disabled{background:var(--af-form-control-bg-disabled, var(--colour-mistgreen-200, #e8ebeb));box-shadow:inset 0 0 0 1px var(--af-form-control-stroke-disabled, var(--colour-mistgreen-500, #d0d6d8))}.control.checked.disabled{background:var(--af-form-control-bg-checked-disabled, var(--colour-inkwell-350, #708380));box-shadow:none}.checkbox:not(.disabled):hover .control:not(.checked){box-shadow:inset 0 0 0 1px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.input:focus-visible+.control{outline:none;box-shadow:inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8)),\n    0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.input:focus-visible+.control.checked{box-shadow:0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:16px;height:16px;color:var(--af-form-control-icon, var(--colour-brand-white, #ffffff))}.label{display:flex;align-items:center;min-height:24px}.label:empty{display:none}";
@@ -76,6 +76,6 @@ function defineCustomElement() {
 }
 export { AfCheckbox as A, defineCustomElement as d };
-//# sourceMappingURL=p-DREa7k5l.js.map
+//# sourceMappingURL=p-Dxa6cHAb.js.map
-//# sourceMappingURL=p-DREa7k5l.js.map
+//# sourceMappingURL=p-Dxa6cHAb.js.map

package/dist/components/{p-DREa7k5l.js.map → p-Dxa6cHAb.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~DREa7k5l~~.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-checkbox/af-checkbox.css?tag=af-checkbox&encapsulation=shadow","src/components/af-checkbox/af-checkbox.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.checkbox {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n cursor: pointer;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n line-height: 20px;\n color: var(--af-form-control-label, var(--colour-brand-inkwell, #14343b));\n user-select: none;\n}\n\n.checkbox.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* Hidden native input /\n.input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n/ Custom checkbox control /\n.control {\n position: relative;\n display: block;\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n border-radius: var(--radii-checkbox, 4px);\n / Use inset box-shadow instead of border to prevent layout shift /\n border: none;\n box-shadow: inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8));\n background: var(--af-form-control-bg, var(--colour-brand-white, #ffffff));\n transition: all 0.15s ease;\n box-sizing: border-box;\n}\n\n/ Checked/indeterminate state /\n.control.checked {\n background: var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));\n box-shadow: none;\n}\n\n/ Disabled state /\n.control.disabled {\n background: var(--af-form-control-bg-disabled, var(--colour-mistgreen-200, #e8ebeb));\n box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-disabled, var(--colour-mistgreen-500, #d0d6d8));\n}\n\n.control.checked.disabled {\n background: var(--af-form-control-bg-checked-disabled, var(--colour-inkwell-350, #708380));\n box-shadow: none;\n}\n\n/ Hover state /\n.checkbox:not(.disabled):hover .control:not(.checked) {\n box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/ Focus state /\n.input:focus-visible + .control {\n outline: none;\n box-shadow: \n inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8)),\n 0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n 0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n.input:focus-visible + .control.checked {\n box-shadow: \n 0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n 0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/ Icon styling - absolutely positioned to prevent layout shift /\n.icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 16px;\n height: 16px;\n color: var(--af-form-control-icon, var(--colour-brand-white, #ffffff));\n}\n\n/ Label styling /\n.label {\n display: flex;\n align-items: center;\n min-height: 24px;\n}\n\n/ Empty label - hide if no content /\n.label:empty {\n display: none;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/\n Checkbox component for selecting multiple options.\n * Supports checked, unchecked, and indeterminate states.\n * \n * @slot - Checkbox label text\n /\n@Component({\n tag: 'af-checkbox',\n styleUrl: 'af-checkbox.css',\n shadow: true\n})\nexport class AfCheckbox {\n /\n Whether the checkbox is checked\n /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /\n Whether the checkbox is in an indeterminate state\n /\n @Prop({ reflect: true }) indeterminate: boolean = false;\n\n /\n Whether the checkbox is disabled\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n The name of the checkbox for form submission\n /\n @Prop() name?: string;\n\n /\n The value of the checkbox for form submission\n /\n @Prop() value?: string;\n\n /\n Emitted when the checkbox checked state changes\n */\n @Event() afChange!: EventEmitter<{ checked: boolean }>;\n\n private inputEl?: HTMLInputElement;\n\n private handleChange = () => {\n if (this.disabled) return;\n this.checked = !this.checked;\n this.afChange.emit({ checked: this.checked });\n };\n\n componentDidLoad() {\n if (this.inputEl) {\n this.inputEl.indeterminate = this.indeterminate;\n }\n }\n\n componentDidUpdate() {\n if (this.inputEl) {\n this.inputEl.indeterminate = this.indeterminate;\n }\n }\n\n render() {\n const checkboxClasses = {\n 'checkbox': true,\n 'checked': this.checked,\n 'indeterminate': this.indeterminate,\n 'disabled': this.disabled\n };\n\n const controlClasses = {\n 'control': true,\n 'checked': this.checked \|\| this.indeterminate,\n 'disabled': this.disabled\n };\n\n return (\n <Host>\n <label class={checkboxClasses}>\n <input\n type=\"checkbox\"\n class=\"input\"\n ref={(el) => this.inputEl = el ?? undefined}\n checked={this.checked}\n disabled={this.disabled}\n name={this.name}\n value={this.value}\n onChange={this.handleChange}\n />\n <span class={controlClasses}>\n {this.checked && !this.indeterminate && (\n <svg class=\"icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path \n d=\"M13.5 4L6 11.5L2.5 8\" \n stroke=\"currentColor\" \n stroke-width=\"2\" \n stroke-linecap=\"round\" \n stroke-linejoin=\"round\"\n />\n </svg>\n )}\n {this.indeterminate && (\n <svg class=\"icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path \n d=\"M3 8H13\" \n stroke=\"currentColor\" \n stroke-width=\"2\" \n stroke-linecap=\"round\"\n />\n </svg>\n )}\n </span>\n <span class=\"label\">\n <slot></slot>\n </span>\n </label>\n </Host>\n );\n }\n}\n\n"],"version":3}
1	+ {"file":"p-Dxa6cHAb.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-checkbox/af-checkbox.css?tag=af-checkbox&encapsulation=shadow","src/components/af-checkbox/af-checkbox.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.checkbox {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n cursor: pointer;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-size: 14px;\n line-height: 20px;\n color: var(--af-form-control-label, var(--colour-brand-inkwell, #14343b));\n user-select: none;\n}\n\n.checkbox.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n/* Hidden native input /\n.input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n/ Custom checkbox control /\n.control {\n position: relative;\n display: block;\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n border-radius: var(--radii-checkbox, 4px);\n / Use inset box-shadow instead of border to prevent layout shift /\n border: none;\n box-shadow: inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8));\n background: var(--af-form-control-bg, var(--colour-brand-white, #ffffff));\n transition: all 0.15s ease;\n box-sizing: border-box;\n}\n\n/ Checked/indeterminate state /\n.control.checked {\n background: var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));\n box-shadow: none;\n}\n\n/ Disabled state /\n.control.disabled {\n background: var(--af-form-control-bg-disabled, var(--colour-mistgreen-200, #e8ebeb));\n box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-disabled, var(--colour-mistgreen-500, #d0d6d8));\n}\n\n.control.checked.disabled {\n background: var(--af-form-control-bg-checked-disabled, var(--colour-inkwell-350, #708380));\n box-shadow: none;\n}\n\n/ Hover state /\n.checkbox:not(.disabled):hover .control:not(.checked) {\n box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/ Focus state /\n.input:focus-visible + .control {\n outline: none;\n box-shadow: \n inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8)),\n 0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n 0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n.input:focus-visible + .control.checked {\n box-shadow: \n 0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n 0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/ Icon styling - absolutely positioned to prevent layout shift /\n.icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 16px;\n height: 16px;\n color: var(--af-form-control-icon, var(--colour-brand-white, #ffffff));\n}\n\n/ Label styling /\n.label {\n display: flex;\n align-items: center;\n min-height: 24px;\n}\n\n/ Empty label - hide if no content /\n.label:empty {\n display: none;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/\n Checkbox component for selecting multiple options.\n * Supports checked, unchecked, and indeterminate states.\n * \n * @slot - Checkbox label text\n /\n@Component({\n tag: 'af-checkbox',\n styleUrl: 'af-checkbox.css',\n shadow: true\n})\nexport class AfCheckbox {\n /\n Whether the checkbox is checked\n /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /\n Whether the checkbox is in an indeterminate state\n /\n @Prop({ reflect: true }) indeterminate: boolean = false;\n\n /\n Whether the checkbox is disabled\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n The name of the checkbox for form submission\n /\n @Prop() name?: string;\n\n /\n The value of the checkbox for form submission\n /\n @Prop() value?: string;\n\n /\n Emitted when the checkbox checked state changes\n */\n @Event() afChange!: EventEmitter<{ checked: boolean }>;\n\n private inputEl?: HTMLInputElement;\n\n private handleChange = () => {\n if (this.disabled) return;\n this.checked = !this.checked;\n this.afChange.emit({ checked: this.checked });\n };\n\n componentDidLoad() {\n if (this.inputEl) {\n this.inputEl.indeterminate = this.indeterminate;\n }\n }\n\n componentDidUpdate() {\n if (this.inputEl) {\n this.inputEl.indeterminate = this.indeterminate;\n }\n }\n\n render() {\n const checkboxClasses = {\n 'checkbox': true,\n 'checked': this.checked,\n 'indeterminate': this.indeterminate,\n 'disabled': this.disabled\n };\n\n const controlClasses = {\n 'control': true,\n 'checked': this.checked \|\| this.indeterminate,\n 'disabled': this.disabled\n };\n\n return (\n <Host>\n <label class={checkboxClasses}>\n <input\n type=\"checkbox\"\n class=\"input\"\n ref={(el) => this.inputEl = el ?? undefined}\n checked={this.checked}\n disabled={this.disabled}\n name={this.name}\n value={this.value}\n onChange={this.handleChange}\n />\n <span class={controlClasses}>\n {this.checked && !this.indeterminate && (\n <svg class=\"icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path \n d=\"M13.5 4L6 11.5L2.5 8\" \n stroke=\"currentColor\" \n stroke-width=\"2\" \n stroke-linecap=\"round\" \n stroke-linejoin=\"round\"\n />\n </svg>\n )}\n {this.indeterminate && (\n <svg class=\"icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path \n d=\"M3 8H13\" \n stroke=\"currentColor\" \n stroke-width=\"2\" \n stroke-linecap=\"round\"\n />\n </svg>\n )}\n </span>\n <span class=\"label\">\n <slot></slot>\n </span>\n </label>\n </Host>\n );\n }\n}\n\n"],"version":3}

package/dist/components/{p-D-Xf1-qQ.js → p-Dz4dEIxw.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-BBpihWJI.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CqQyDZ-4.js';
 const afTextareaCss = ":host{display:block;width:100%}.textarea-wrapper{display:flex;flex-direction:column;gap:var(--sds-size-space-200, 8px);width:100%}.label-row{display:flex;align-items:center;gap:12px}.label{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:16px;line-height:24px;color:var(--af-input-label, var(--af-typography-body-dark, #14343b));cursor:default}.required{color:var(--af-input-error, var(--colour-error, #be292a));margin-left:2px}.info-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0}.info-icon svg{width:20px;height:20px}.info-icon:hover{opacity:0.7}.info-icon:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.description{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-description, var(--af-typography-body-default, #2b484f));margin:0}.textarea-container{display:flex;background:var(--af-input-bg, #ffffff);border:1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));border-radius:var(--radii-input, 8px);transition:all 0.15s ease;box-sizing:border-box;overflow:hidden}.textarea-container.hovered{background:var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));border-color:var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1))}.textarea-container.focused{background:var(--af-input-bg, #ffffff);border-color:var(--af-input-border-active, var(--af-typography-body-dark, #14343b));box-shadow:0 0 0 4px var(--af-background-base, #ffffff), \n    0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b))}.textarea-container.error{border-color:var(--af-input-border-error, var(--colour-error, #be292a))}.textarea-container.disabled{background:var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));border-color:var(--af-input-border, var(--af-background-border-default, #d1ddda));cursor:not-allowed}.textarea{flex:1;min-width:0;min-height:108px;padding:12px 16px;border:none;background:transparent;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-text, var(--af-typography-body-dark, #14343b));outline:none;resize:vertical}.textarea::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));opacity:1}.textarea:disabled{cursor:not-allowed;color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));resize:none}.textarea:disabled::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.error-row{display:flex;align-items:center;gap:12px}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-error, var(--colour-error, #be292a))}.error-icon svg{width:20px;height:20px}.error-text{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-error, var(--colour-error, #be292a))}";
@@ -122,6 +122,6 @@ function defineCustomElement() {
 }
 export { AfTextarea as A, defineCustomElement as d };
-//# sourceMappingURL=p-D-Xf1-qQ.js.map
+//# sourceMappingURL=p-Dz4dEIxw.js.map
-//# sourceMappingURL=p-D-Xf1-qQ.js.map
+//# sourceMappingURL=p-Dz4dEIxw.js.map

package/dist/components/{p-D-Xf1-qQ.js.map → p-Dz4dEIxw.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-D-Xf1-qQ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-textarea/af-textarea.css?tag=af-textarea&encapsulation=shadow","src/components/af-textarea/af-textarea.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* Wrapper /\n.textarea-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--sds-size-space-200, 8px);\n width: 100%;\n}\n\n/ Label row /\n.label-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.label {\n flex: 1;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-book, 500);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-label, var(--af-typography-body-dark, #14343b));\n cursor: default;\n}\n\n.required {\n color: var(--af-input-error, var(--colour-error, #be292a));\n margin-left: 2px;\n}\n\n/ Info icon button /\n.info-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: var(--af-input-icon, var(--af-background-icon-default, #14343b));\n flex-shrink: 0;\n}\n\n.info-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.info-icon:hover {\n opacity: 0.7;\n}\n\n.info-icon:focus-visible {\n outline: 2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n outline-offset: 2px;\n border-radius: 4px;\n}\n\n/ Description /\n.description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-description, var(--af-typography-body-default, #2b484f));\n margin: 0;\n}\n\n/ Textarea container /\n.textarea-container {\n display: flex;\n background: var(--af-input-bg, #ffffff);\n border: 1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));\n border-radius: var(--radii-input, 8px);\n transition: all 0.15s ease;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n/ Hover state /\n.textarea-container.hovered {\n background: var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));\n border-color: var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1));\n}\n\n/ Focus state /\n.textarea-container.focused {\n background: var(--af-input-bg, #ffffff);\n border-color: var(--af-input-border-active, var(--af-typography-body-dark, #14343b));\n box-shadow: \n 0 0 0 4px var(--af-background-base, #ffffff), \n 0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n}\n\n/ Error state /\n.textarea-container.error {\n border-color: var(--af-input-border-error, var(--colour-error, #be292a));\n}\n\n/ Disabled state /\n.textarea-container.disabled {\n background: var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));\n border-color: var(--af-input-border, var(--af-background-border-default, #d1ddda));\n cursor: not-allowed;\n}\n\n/ Native textarea /\n.textarea {\n flex: 1;\n min-width: 0;\n min-height: 108px;\n padding: 12px 16px;\n border: none;\n background: transparent;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-text, var(--af-typography-body-dark, #14343b));\n outline: none;\n resize: vertical;\n}\n\n.textarea::placeholder {\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n opacity: 1;\n}\n\n.textarea:disabled {\n cursor: not-allowed;\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n resize: none;\n}\n\n.textarea:disabled::placeholder {\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n}\n\n/ Error row /\n.error-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.error-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n color: var(--af-input-error, var(--colour-error, #be292a));\n}\n\n.error-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.error-text {\n flex: 1;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-error, var(--colour-error, #be292a));\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, State } from '@stencil/core';\n\n/\n Textarea component for multi-line text input with label, description, and error states.\n * \n * @slot label-end - Content to display at the end of the label (e.g., info icon)\n /\n@Component({\n tag: 'af-textarea',\n styleUrl: 'af-textarea.css',\n shadow: true\n})\nexport class AfTextarea {\n /\n The label text for the textarea\n /\n @Prop() label?: string;\n\n /\n Description text displayed below the label\n /\n @Prop() description?: string;\n\n /\n Placeholder text for the textarea\n /\n @Prop() placeholder?: string;\n\n /\n The current value of the textarea\n /\n @Prop({ mutable: true }) value: string = '';\n\n /\n The name of the textarea for form submission\n /\n @Prop() name?: string;\n\n /\n Whether the textarea is disabled\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Whether the textarea is required\n /\n @Prop() required: boolean = false;\n\n /\n Whether the textarea is read-only\n /\n @Prop() readonly: boolean = false;\n\n /\n Error message to display (also sets error state)\n /\n @Prop() error?: string;\n\n /\n Whether to show the info icon next to the label\n /\n @Prop() showInfoIcon: boolean = false;\n\n /\n Number of visible rows (height)\n /\n @Prop() rows: number = 4;\n\n /\n Maximum length of input value\n /\n @Prop() maxlength?: number;\n\n /\n Minimum length of input value\n /\n @Prop() minlength?: number;\n\n /\n Whether the textarea is resizable\n /\n @Prop() resize: 'none' \| 'vertical' \| 'horizontal' \| 'both' = 'vertical';\n\n /\n Emitted when the textarea value changes\n /\n @Event() afInput!: EventEmitter<{ value: string }>;\n\n /\n Emitted when the textarea loses focus\n /\n @Event() afBlur!: EventEmitter<void>;\n\n /\n Emitted when the textarea gains focus\n /\n @Event() afFocus!: EventEmitter<void>;\n\n /\n Emitted when the info icon is clicked\n /\n @Event() afInfoClick!: EventEmitter<void>;\n\n @State() private isFocused: boolean = false;\n @State() private isHovered: boolean = false;\n\n private textareaEl?: HTMLTextAreaElement;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLTextAreaElement;\n this.value = target.value;\n this.afInput.emit({ value: this.value });\n };\n\n private handleFocus = () => {\n this.isFocused = true;\n this.afFocus.emit();\n };\n\n private handleBlur = () => {\n this.isFocused = false;\n this.afBlur.emit();\n };\n\n private handleMouseEnter = () => {\n this.isHovered = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovered = false;\n };\n\n private handleInfoClick = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n this.afInfoClick.emit();\n };\n\n render() {\n const hasError = !!this.error;\n const hasValue = !!(this.value && this.value.length > 0);\n\n const wrapperClasses = {\n 'textarea-wrapper': true,\n 'disabled': this.disabled,\n 'error': hasError,\n 'focused': this.isFocused,\n 'hovered': this.isHovered && !this.disabled && !this.isFocused,\n 'populated': hasValue\n };\n\n const textareaContainerClasses = {\n 'textarea-container': true,\n 'disabled': this.disabled,\n 'error': hasError,\n 'focused': this.isFocused,\n 'hovered': this.isHovered && !this.disabled && !this.isFocused\n };\n\n return (\n <Host>\n <div class={wrapperClasses}>\n {/ Label /}\n {this.label && (\n <div class=\"label-row\">\n <label class=\"label\" htmlFor=\"textarea\">\n {this.label}\n {this.required && <span class=\"required\"></span>}\n </label>\n {this.showInfoIcon && (\n <button \n type=\"button\" \n class=\"info-icon\" \n onClick={this.handleInfoClick}\n aria-label=\"More information\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n )}\n <slot name=\"label-end\"></slot>\n </div>\n )}\n\n {/* Description /}\n {this.description && (\n <p class=\"description\">{this.description}</p>\n )}\n\n {/ Textarea container /}\n <div \n class={textareaContainerClasses}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n {/ Native textarea /}\n <textarea\n ref={(el) => this.textareaEl = el ?? undefined}\n id=\"textarea\"\n class=\"textarea\"\n name={this.name}\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n readonly={this.readonly}\n rows={this.rows}\n maxlength={this.maxlength}\n minlength={this.minlength}\n style={{ resize: this.resize }}\n aria-invalid={hasError ? 'true' : undefined}\n aria-describedby={hasError ? 'error-message' : this.description ? 'description' : undefined}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n\n {/ Error message */}\n {hasError && (\n <div class=\"error-row\" id=\"error-message\">\n <span class=\"error-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"error-text\">{this.error}</span>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
1	+ {"file":"p-Dz4dEIxw.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-textarea/af-textarea.css?tag=af-textarea&encapsulation=shadow","src/components/af-textarea/af-textarea.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* Wrapper /\n.textarea-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--sds-size-space-200, 8px);\n width: 100%;\n}\n\n/ Label row /\n.label-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.label {\n flex: 1;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-book, 500);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-label, var(--af-typography-body-dark, #14343b));\n cursor: default;\n}\n\n.required {\n color: var(--af-input-error, var(--colour-error, #be292a));\n margin-left: 2px;\n}\n\n/ Info icon button /\n.info-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: var(--af-input-icon, var(--af-background-icon-default, #14343b));\n flex-shrink: 0;\n}\n\n.info-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.info-icon:hover {\n opacity: 0.7;\n}\n\n.info-icon:focus-visible {\n outline: 2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n outline-offset: 2px;\n border-radius: 4px;\n}\n\n/ Description /\n.description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-description, var(--af-typography-body-default, #2b484f));\n margin: 0;\n}\n\n/ Textarea container /\n.textarea-container {\n display: flex;\n background: var(--af-input-bg, #ffffff);\n border: 1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));\n border-radius: var(--radii-input, 8px);\n transition: all 0.15s ease;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n/ Hover state /\n.textarea-container.hovered {\n background: var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));\n border-color: var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1));\n}\n\n/ Focus state /\n.textarea-container.focused {\n background: var(--af-input-bg, #ffffff);\n border-color: var(--af-input-border-active, var(--af-typography-body-dark, #14343b));\n box-shadow: \n 0 0 0 4px var(--af-background-base, #ffffff), \n 0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n}\n\n/ Error state /\n.textarea-container.error {\n border-color: var(--af-input-border-error, var(--colour-error, #be292a));\n}\n\n/ Disabled state /\n.textarea-container.disabled {\n background: var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));\n border-color: var(--af-input-border, var(--af-background-border-default, #d1ddda));\n cursor: not-allowed;\n}\n\n/ Native textarea /\n.textarea {\n flex: 1;\n min-width: 0;\n min-height: 108px;\n padding: 12px 16px;\n border: none;\n background: transparent;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-text, var(--af-typography-body-dark, #14343b));\n outline: none;\n resize: vertical;\n}\n\n.textarea::placeholder {\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n opacity: 1;\n}\n\n.textarea:disabled {\n cursor: not-allowed;\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n resize: none;\n}\n\n.textarea:disabled::placeholder {\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n}\n\n/ Error row /\n.error-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.error-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n color: var(--af-input-error, var(--colour-error, #be292a));\n}\n\n.error-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.error-text {\n flex: 1;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-error, var(--colour-error, #be292a));\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, State } from '@stencil/core';\n\n/\n Textarea component for multi-line text input with label, description, and error states.\n * \n * @slot label-end - Content to display at the end of the label (e.g., info icon)\n /\n@Component({\n tag: 'af-textarea',\n styleUrl: 'af-textarea.css',\n shadow: true\n})\nexport class AfTextarea {\n /\n The label text for the textarea\n /\n @Prop() label?: string;\n\n /\n Description text displayed below the label\n /\n @Prop() description?: string;\n\n /\n Placeholder text for the textarea\n /\n @Prop() placeholder?: string;\n\n /\n The current value of the textarea\n /\n @Prop({ mutable: true }) value: string = '';\n\n /\n The name of the textarea for form submission\n /\n @Prop() name?: string;\n\n /\n Whether the textarea is disabled\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Whether the textarea is required\n /\n @Prop() required: boolean = false;\n\n /\n Whether the textarea is read-only\n /\n @Prop() readonly: boolean = false;\n\n /\n Error message to display (also sets error state)\n /\n @Prop() error?: string;\n\n /\n Whether to show the info icon next to the label\n /\n @Prop() showInfoIcon: boolean = false;\n\n /\n Number of visible rows (height)\n /\n @Prop() rows: number = 4;\n\n /\n Maximum length of input value\n /\n @Prop() maxlength?: number;\n\n /\n Minimum length of input value\n /\n @Prop() minlength?: number;\n\n /\n Whether the textarea is resizable\n /\n @Prop() resize: 'none' \| 'vertical' \| 'horizontal' \| 'both' = 'vertical';\n\n /\n Emitted when the textarea value changes\n /\n @Event() afInput!: EventEmitter<{ value: string }>;\n\n /\n Emitted when the textarea loses focus\n /\n @Event() afBlur!: EventEmitter<void>;\n\n /\n Emitted when the textarea gains focus\n /\n @Event() afFocus!: EventEmitter<void>;\n\n /\n Emitted when the info icon is clicked\n /\n @Event() afInfoClick!: EventEmitter<void>;\n\n @State() private isFocused: boolean = false;\n @State() private isHovered: boolean = false;\n\n private textareaEl?: HTMLTextAreaElement;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLTextAreaElement;\n this.value = target.value;\n this.afInput.emit({ value: this.value });\n };\n\n private handleFocus = () => {\n this.isFocused = true;\n this.afFocus.emit();\n };\n\n private handleBlur = () => {\n this.isFocused = false;\n this.afBlur.emit();\n };\n\n private handleMouseEnter = () => {\n this.isHovered = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovered = false;\n };\n\n private handleInfoClick = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n this.afInfoClick.emit();\n };\n\n render() {\n const hasError = !!this.error;\n const hasValue = !!(this.value && this.value.length > 0);\n\n const wrapperClasses = {\n 'textarea-wrapper': true,\n 'disabled': this.disabled,\n 'error': hasError,\n 'focused': this.isFocused,\n 'hovered': this.isHovered && !this.disabled && !this.isFocused,\n 'populated': hasValue\n };\n\n const textareaContainerClasses = {\n 'textarea-container': true,\n 'disabled': this.disabled,\n 'error': hasError,\n 'focused': this.isFocused,\n 'hovered': this.isHovered && !this.disabled && !this.isFocused\n };\n\n return (\n <Host>\n <div class={wrapperClasses}>\n {/ Label /}\n {this.label && (\n <div class=\"label-row\">\n <label class=\"label\" htmlFor=\"textarea\">\n {this.label}\n {this.required && <span class=\"required\"></span>}\n </label>\n {this.showInfoIcon && (\n <button \n type=\"button\" \n class=\"info-icon\" \n onClick={this.handleInfoClick}\n aria-label=\"More information\"\n >\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n )}\n <slot name=\"label-end\"></slot>\n </div>\n )}\n\n {/* Description /}\n {this.description && (\n <p class=\"description\">{this.description}</p>\n )}\n\n {/ Textarea container /}\n <div \n class={textareaContainerClasses}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n {/ Native textarea /}\n <textarea\n ref={(el) => this.textareaEl = el ?? undefined}\n id=\"textarea\"\n class=\"textarea\"\n name={this.name}\n value={this.value}\n placeholder={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n readonly={this.readonly}\n rows={this.rows}\n maxlength={this.maxlength}\n minlength={this.minlength}\n style={{ resize: this.resize }}\n aria-invalid={hasError ? 'true' : undefined}\n aria-describedby={hasError ? 'error-message' : this.description ? 'description' : undefined}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n\n {/ Error message */}\n {hasError && (\n <div class=\"error-row\" id=\"error-message\">\n <span class=\"error-icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"error-text\">{this.error}</span>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}

package/dist/components/{p-287-nef9.js → p-N0xV1Erp.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
 const afTypographyLockupCss = ":host{display:block}.lockup{display:flex;flex-direction:column}.breakpoint-desktop.heading-1.lockup{gap:var(--space-6, 24px)}.breakpoint-mobile.heading-1.lockup{gap:var(--space-5, 20px)}.breakpoint-desktop.heading-2.lockup,.breakpoint-desktop.heading-3.lockup{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-2.lockup{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-3.lockup,.breakpoint-desktop.heading-4.lockup,.breakpoint-desktop.heading-5.lockup{gap:var(--space-3, 12px)}.breakpoint-mobile.heading-4.lockup,.breakpoint-mobile.heading-5.lockup{gap:var(--space-2, 8px)}.text-left{align-items:flex-start}.text-center{align-items:center}.text-right{align-items:flex-end}.text-justify{align-items:stretch}.align-left{text-align:left;--af-text-align:left}.align-center{text-align:center;--af-text-align:center}.align-right{text-align:right;--af-text-align:right}.align-justify{text-align:justify;--af-text-align:justify}.copy{display:flex;flex-direction:column;width:100%;max-width:840px}.breakpoint-desktop.heading-1 .copy{gap:var(--space-6, 24px)}.breakpoint-mobile.heading-1 .copy{gap:var(--space-5, 20px)}.breakpoint-desktop.heading-2 .copy,.breakpoint-desktop.heading-3 .copy{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-2 .copy{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-3 .copy,.breakpoint-desktop.heading-4 .copy,.breakpoint-desktop.heading-5 .copy{gap:var(--space-3, 12px)}.breakpoint-mobile.heading-4 .copy,.breakpoint-mobile.heading-5 .copy{gap:var(--space-2, 8px)}.heading{display:flex;flex-direction:column;font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);color:var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));line-height:var(--line-height-heading-tight, 1);letter-spacing:var(--letter-spacing-heading, -0.02em);white-space:normal}.breakpoint-desktop.heading-1 .heading{font-size:var(--font-size-heading-1-desktop, 56px)}.breakpoint-desktop.heading-2 .heading{font-size:var(--font-size-heading-2-desktop, 44px)}.breakpoint-desktop.heading-3 .heading{font-size:var(--font-size-heading-3-desktop, 34px)}.breakpoint-desktop.heading-4 .heading{font-size:var(--font-size-heading-4-desktop, 24px);line-height:var(--line-height-heading-relaxed, 1.2)}.breakpoint-desktop.heading-5 .heading{font-size:var(--font-size-heading-5-desktop, 20px);line-height:var(--line-height-heading-relaxed, 1.2)}.breakpoint-mobile.heading-1 .heading{font-size:var(--font-size-heading-1-mobile, 38px)}.breakpoint-mobile.heading-2 .heading{font-size:var(--font-size-heading-2-mobile, 32px)}.breakpoint-mobile.heading-3 .heading{font-size:var(--font-size-heading-3-mobile, 25px)}.breakpoint-mobile.heading-4 .heading{font-size:var(--font-size-heading-4-mobile, 20px);line-height:var(--line-height-heading-normal, 1.1)}.breakpoint-mobile.heading-5 .heading{font-size:var(--font-size-heading-5-mobile, 18px);line-height:var(--line-height-heading-normal, 1.1)}.description{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:var(--font-size-body-large, 18px);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-body-large, 26px);color:var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));white-space:normal}.heading.heading-color-primary{color:var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B))}.heading.heading-color-secondary{color:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670))}.description.description-color-default{color:var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F))}.description.description-color-secondary{color:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670))}.breakpoint-mobile.heading-3 .description,.breakpoint-desktop.heading-4 .description,.breakpoint-mobile.heading-4 .description,.breakpoint-desktop.heading-5 .description,.breakpoint-mobile.heading-5 .description{font-size:var(--font-size-body-medium, 16px);line-height:var(--line-height-body-medium, 24px)}.description:empty{display:none}.buttons{display:flex;flex-direction:row;gap:var(--space-3, 12px)}.buttons:empty{display:none}.layout-horizontal .buttons{align-items:center}.text-left.layout-horizontal{flex-direction:row;align-items:center;gap:var(--space-4, 16px)}.text-left.layout-horizontal .copy{flex:1 0 0;max-width:950px}.text-left.layout-horizontal.heading-3 .copy,.text-left.layout-horizontal.heading-4 .copy{max-width:840px}.text-left.layout-horizontal .buttons{flex-shrink:0}.layout-vertical .buttons{align-items:flex-start}.buttons.align-left{justify-content:flex-start}.buttons.align-center{justify-content:center}.buttons.align-right{justify-content:flex-end}.buttons.align-justify{justify-content:space-between}.breakpoint-mobile .buttons{flex-direction:column;align-items:stretch}.breakpoint-mobile .buttons.align-center{align-items:center}.breakpoint-mobile .buttons.align-right{align-items:flex-end}.breakpoint-mobile .buttons.align-left{align-items:flex-start}.text-center .copy{max-width:840px}::slotted(*){margin:0}";
@@ -146,6 +146,6 @@ function defineCustomElement() {
 }
 export { AfTypographyLockup as A, defineCustomElement as d };
-//# sourceMappingURL=p-287-nef9.js.map
+//# sourceMappingURL=p-N0xV1Erp.js.map
-//# sourceMappingURL=p-287-nef9.js.map
+//# sourceMappingURL=p-N0xV1Erp.js.map

package/dist/components/{p-287-nef9.js.map → p-N0xV1Erp.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-287-nef9.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-typography-lockup/af-typography-lockup.css?tag=af-typography-lockup&encapsulation=shadow","src/components/af-typography-lockup/af-typography-lockup.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.lockup {\n display: flex;\n flex-direction: column;\n}\n\n/* Lockup gap variations (between copy and buttons) - matches copy internal gap /\n/ Heading 1 desktop: 24px gap /\n.breakpoint-desktop.heading-1.lockup {\n gap: var(--space-6, 24px);\n}\n\n/ Heading 1 mobile: 20px gap /\n.breakpoint-mobile.heading-1.lockup {\n gap: var(--space-5, 20px);\n}\n\n/ Heading 2, 3 desktop: 16px gap /\n.breakpoint-desktop.heading-2.lockup,\n.breakpoint-desktop.heading-3.lockup {\n gap: var(--space-4, 16px);\n}\n\n/ Heading 2 mobile: 16px gap /\n.breakpoint-mobile.heading-2.lockup {\n gap: var(--space-4, 16px);\n}\n\n/ Heading 3 mobile, 4 desktop, 5 desktop: 12px gap /\n.breakpoint-mobile.heading-3.lockup,\n.breakpoint-desktop.heading-4.lockup,\n.breakpoint-desktop.heading-5.lockup {\n gap: var(--space-3, 12px);\n}\n\n/ Heading 4 mobile, 5 mobile: 8px gap /\n.breakpoint-mobile.heading-4.lockup,\n.breakpoint-mobile.heading-5.lockup {\n gap: var(--space-2, 8px);\n}\n\n/ Container alignment (affects flexbox positioning) /\n.text-left {\n align-items: flex-start;\n}\n\n.text-center {\n align-items: center;\n}\n\n.text-right {\n align-items: flex-end;\n}\n\n.text-justify {\n align-items: stretch;\n}\n\n/ Individual text alignment classes /\n.align-left {\n text-align: left;\n --af-text-align: left;\n}\n\n.align-center {\n text-align: center;\n --af-text-align: center;\n}\n\n.align-right {\n text-align: right;\n --af-text-align: right;\n}\n\n.align-justify {\n text-align: justify;\n --af-text-align: justify;\n}\n\n/ Copy section - base styles /\n.copy {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 840px;\n}\n\n/ Copy gap variations based on heading size and breakpoint /\n/ Heading 1 desktop: 24px gap /\n.breakpoint-desktop.heading-1 .copy {\n gap: var(--space-6, 24px);\n}\n\n/ Heading 1 mobile: 20px gap /\n.breakpoint-mobile.heading-1 .copy {\n gap: var(--space-5, 20px);\n}\n\n/ Heading 2, 3 desktop: 16px gap /\n.breakpoint-desktop.heading-2 .copy,\n.breakpoint-desktop.heading-3 .copy {\n gap: var(--space-4, 16px);\n}\n\n/ Heading 2 mobile: 16px gap /\n.breakpoint-mobile.heading-2 .copy {\n gap: var(--space-4, 16px);\n}\n\n/ Heading 3 mobile, 4 desktop, 5 desktop: 12px gap /\n.breakpoint-mobile.heading-3 .copy,\n.breakpoint-desktop.heading-4 .copy,\n.breakpoint-desktop.heading-5 .copy {\n gap: var(--space-3, 12px);\n}\n\n/ Heading 4 mobile, 5 mobile: 8px gap /\n.breakpoint-mobile.heading-4 .copy,\n.breakpoint-mobile.heading-5 .copy {\n gap: var(--space-2, 8px);\n}\n\n/ Heading styles - font-weight 400 (regular) matches Webflow's NeuSans usage.\n * display: flex collapses any whitespace-only text nodes that Astro (and\n * other templating engines) leave between the slotted heading and the\n * following named-slot siblings — those stray text nodes get projected into\n * the default slot and, without flex layout, each one occupies a full line\n * of the heading's line-height (user-visible \"extra line break\" after the\n * heading). /\n.heading {\n display: flex;\n flex-direction: column;\n font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));\n line-height: var(--line-height-heading-tight, 1);\n letter-spacing: var(--letter-spacing-heading, -0.02em);\n white-space: normal;\n}\n\n/ Desktop heading sizes /\n.breakpoint-desktop.heading-1 .heading {\n font-size: var(--font-size-heading-1-desktop, 56px);\n}\n\n.breakpoint-desktop.heading-2 .heading {\n font-size: var(--font-size-heading-2-desktop, 44px);\n}\n\n.breakpoint-desktop.heading-3 .heading {\n font-size: var(--font-size-heading-3-desktop, 34px);\n}\n\n.breakpoint-desktop.heading-4 .heading {\n font-size: var(--font-size-heading-4-desktop, 24px);\n line-height: var(--line-height-heading-relaxed, 1.2);\n}\n\n.breakpoint-desktop.heading-5 .heading {\n font-size: var(--font-size-heading-5-desktop, 20px);\n line-height: var(--line-height-heading-relaxed, 1.2);\n}\n\n/ Mobile heading sizes /\n.breakpoint-mobile.heading-1 .heading {\n font-size: var(--font-size-heading-1-mobile, 38px);\n}\n\n.breakpoint-mobile.heading-2 .heading {\n font-size: var(--font-size-heading-2-mobile, 32px);\n}\n\n.breakpoint-mobile.heading-3 .heading {\n font-size: var(--font-size-heading-3-mobile, 25px);\n}\n\n.breakpoint-mobile.heading-4 .heading {\n font-size: var(--font-size-heading-4-mobile, 20px);\n line-height: var(--line-height-heading-normal, 1.1);\n}\n\n.breakpoint-mobile.heading-5 .heading {\n font-size: var(--font-size-heading-5-mobile, 18px);\n line-height: var(--line-height-heading-normal, 1.1);\n}\n\n/ Description/body text - default (body/large) /\n.description {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-size: var(--font-size-body-large, 18px);\n font-weight: var(--font-weight-regular, 400);\n line-height: var(--line-height-body-large, 26px);\n color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));\n white-space: normal;\n}\n\n/ Heading colour variants — matches Webflow's h1.primary / h1.secondary pattern /\n.heading.heading-color-primary {\n color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));\n}\n\n.heading.heading-color-secondary {\n color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670));\n}\n\n/ Description colour variants /\n.description.description-color-default {\n color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));\n}\n\n.description.description-color-secondary {\n color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670));\n}\n\n/ Description text size variations - smaller for heading 3 mobile, 4, and 5 /\n.breakpoint-mobile.heading-3 .description,\n.breakpoint-desktop.heading-4 .description,\n.breakpoint-mobile.heading-4 .description,\n.breakpoint-desktop.heading-5 .description,\n.breakpoint-mobile.heading-5 .description {\n font-size: var(--font-size-body-medium, 16px);\n line-height: var(--line-height-body-medium, 24px);\n}\n\n.description:empty {\n display: none;\n}\n\n/ Buttons section /\n.buttons {\n display: flex;\n flex-direction: row;\n gap: var(--space-3, 12px);\n}\n\n.buttons:empty {\n display: none;\n}\n\n/ Button layout - horizontal (inline with copy) /\n.layout-horizontal .buttons {\n align-items: center;\n}\n\n.text-left.layout-horizontal {\n flex-direction: row;\n align-items: center;\n gap: var(--space-4, 16px);\n}\n\n.text-left.layout-horizontal .copy {\n flex: 1 0 0;\n max-width: 950px;\n}\n\n/ Heading 3, 4 horizontal: different max-width /\n.text-left.layout-horizontal.heading-3 .copy,\n.text-left.layout-horizontal.heading-4 .copy {\n max-width: 840px;\n}\n\n.text-left.layout-horizontal .buttons {\n flex-shrink: 0;\n}\n\n/ Button layout - vertical (stacked below copy) /\n.layout-vertical .buttons {\n align-items: flex-start;\n}\n\n/ Button position alignment /\n.buttons.align-left {\n justify-content: flex-start;\n}\n\n.buttons.align-center {\n justify-content: center;\n}\n\n.buttons.align-right {\n justify-content: flex-end;\n}\n\n.buttons.align-justify {\n justify-content: space-between;\n}\n\n/ Mobile button stacking - buttons stack vertically on mobile /\n.breakpoint-mobile .buttons {\n flex-direction: column;\n align-items: stretch;\n}\n\n.breakpoint-mobile .buttons.align-center {\n align-items: center;\n}\n\n.breakpoint-mobile .buttons.align-right {\n align-items: flex-end;\n}\n\n.breakpoint-mobile .buttons.align-left {\n align-items: flex-start;\n}\n\n/ Max width constraints for centered layouts /\n.text-center .copy {\n max-width: 840px;\n}\n\n/ Slot content styling /\n::slotted() {\n margin: 0;\n}\n","import { Component, Element, h, Prop, State, Host } from '@stencil/core';\n\ntype TextAlign = 'left' \| 'center' \| 'right' \| 'justify';\n\n/*\n Marketing-style composition of heading + description + buttons with\n * consistent spacing and alignment driven by the `headingSize` prop.\n \n Semantic vs visual: `headingSize` controls ONLY the visual scale\n * (the lockup sets font-size via a `heading-{1..5}` class). The semantic\n * level (h1-h6) is whatever the consumer slots in as default content.\n * Keep them aligned by convention so assistive tech and search engines\n * see the right hierarchy:\n \n headingSize=1 ↔ <h1> (or <h2> on non-top-of-page sections)\n * headingSize=2 ↔ <h2>\n * headingSize=3 ↔ <h3>\n * headingSize=4 ↔ <h4>\n * headingSize=5 ↔ <h5>\n \n When a design asks for a visually small H1 or a visually large H3,\n * pass the two independently — just do it deliberately, not by\n * accident. A console warning fires in dev mode if the slotted tag is\n * more than one level away from the prop.\n /\n@Component({\n tag: 'af-typography-lockup',\n styleUrl: 'af-typography-lockup.css',\n shadow: true\n})\nexport class AfTypographyLockup {\n @Element() el!: HTMLElement;\n\n /\n The heading size (1-5, where 1 is largest). Controls visual scale\n * only — pair with a matching <h1>-<h5> slotted element for correct\n * document outline (see component docblock).\n /\n @Prop() headingSize: 1 \| 2 \| 3 \| 4 \| 5 = 2;\n\n /\n The breakpoint for responsive typography\n /\n @Prop() breakpoint: 'desktop' \| 'mobile' = 'desktop';\n\n /\n Text alignment for the entire lockup (heading and description).\n * Can be overridden individually with headingAlignment and descriptionAlignment.\n /\n @Prop() textAlignment: TextAlign = 'left';\n\n /\n Heading text alignment. Falls back to textAlignment if not specified.\n /\n @Prop() headingAlignment?: TextAlign;\n\n /\n Description text alignment. Falls back to textAlignment if not specified.\n /\n @Prop() descriptionAlignment?: TextAlign;\n\n /\n Button layout direction (horizontal or vertical stacking)\n /\n @Prop() buttonLayout: 'horizontal' \| 'vertical' = 'vertical';\n\n /\n Buttons position alignment. Falls back to textAlignment if not specified.\n /\n @Prop() buttonsAlignment?: TextAlign;\n\n /\n Maximum width for the copy section (in pixels)\n /\n @Prop() maxWidth?: number;\n\n /\n Heading colour variant. Matches the Webflow pattern of `h1.primary` vs\n * `h1.secondary`, where \"secondary\" renders in the theme's accent/heading-\n * secondary colour (soft-clay on most themes).\n * - `primary` (default) - uses `--af-typography-heading-primary`\n * - `secondary` - uses `--af-typography-heading-secondary`\n /\n @Prop() headingColor: 'primary' \| 'secondary' = 'primary';\n\n /\n Description colour variant. Same pattern as `headingColor`; useful for\n * hero-style lockups where the description is rendered in the accent colour.\n * - `default` (default) - uses `--af-typography-body-default`\n * - `secondary` - uses `--af-typography-heading-secondary`\n /\n @Prop() descriptionColor: 'default' \| 'secondary' = 'default';\n\n /\n Whether the consumer passed anything into the description / buttons\n * slots. The CSS `:empty` selector can't help here — the `<slot>`\n * element itself counts as a child, so the wrapper divs would always\n * render as empty-but-visible lines of gap. Tracked on mount and on\n * any `slotchange` so wrappers collapse cleanly when there's nothing\n * to show.\n */\n @State() hasDescription: boolean = false;\n @State() hasButtons: boolean = false;\n\n private descriptionSlot?: HTMLSlotElement;\n private buttonsSlot?: HTMLSlotElement;\n\n componentDidLoad() {\n this.syncSlotState();\n this.descriptionSlot?.addEventListener('slotchange', this.syncSlotState);\n this.buttonsSlot?.addEventListener('slotchange', this.syncSlotState);\n // Dev-time check that the slotted semantic tag (h1-h6) is within one\n // level of the visual headingSize. Pairs with the class-level docblock;\n // silent in production unless the author explicitly turned on dev mode\n // via `window.__AF_STRICT_HEADINGS__`.\n if (typeof window === 'undefined') return;\n const strict = (window as unknown as { __AF_STRICT_HEADINGS__?: boolean })\n .__AF_STRICT_HEADINGS__;\n if (!strict) return;\n const heading = Array.from(this.el.children).find(\n (child) => !(child as HTMLElement).hasAttribute('slot') && /^h[1-6]$/i.test(child.tagName),\n );\n if (!heading) return;\n const slottedLevel = Number(heading.tagName.slice(1));\n const expected = this.headingSize;\n if (Math.abs(slottedLevel - expected) > 1) {\n // eslint-disable-next-line no-console\n console.warn(\n `[af-typography-lockup] heading-size=${expected} paired with <${heading.tagName.toLowerCase()}>; ` +\n `expected an <h${expected}> for document outline. Pass deliberately or align the two.`,\n );\n }\n }\n\n disconnectedCallback() {\n this.descriptionSlot?.removeEventListener('slotchange', this.syncSlotState);\n this.buttonsSlot?.removeEventListener('slotchange', this.syncSlotState);\n }\n\n private syncSlotState = () => {\n this.hasDescription = (this.descriptionSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n this.hasButtons = (this.buttonsSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n };\n\n render() {\n const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;\n const effectiveDescriptionAlignment = this.descriptionAlignment ?? this.textAlignment;\n const effectiveButtonsAlignment = this.buttonsAlignment ?? this.textAlignment;\n\n const containerClasses = {\n 'lockup': true,\n [`text-${this.textAlignment}`]: true,\n [`layout-${this.buttonLayout}`]: true,\n [`heading-${this.headingSize}`]: true,\n [`breakpoint-${this.breakpoint}`]: true\n };\n\n const headingClasses = {\n 'heading': true,\n [`align-${effectiveHeadingAlignment}`]: true,\n [`heading-color-${this.headingColor}`]: true\n };\n\n const descriptionClasses = {\n 'description': true,\n [`align-${effectiveDescriptionAlignment}`]: true,\n [`description-color-${this.descriptionColor}`]: true\n };\n\n const buttonsClasses = {\n 'buttons': true,\n [`align-${effectiveButtonsAlignment}`]: true\n };\n\n const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n return (\n <Host>\n <div class={containerClasses}>\n <div class=\"copy\" style={copyStyle}>\n <div class={headingClasses} part=\"heading\">\n <slot></slot>\n </div>\n <div class={descriptionClasses} part=\"body\" hidden={!this.hasDescription}>\n <slot name=\"description\" ref={(el) => (this.descriptionSlot = el as HTMLSlotElement)}></slot>\n </div>\n </div>\n <div class={buttonsClasses} part=\"buttons\" hidden={!this.hasButtons}>\n <slot name=\"buttons\" ref={(el) => (this.buttonsSlot = el as HTMLSlotElement)}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-N0xV1Erp.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-typography-lockup/af-typography-lockup.css?tag=af-typography-lockup&encapsulation=shadow","src/components/af-typography-lockup/af-typography-lockup.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.lockup {\n display: flex;\n flex-direction: column;\n}\n\n/* Lockup gap variations (between copy and buttons) - matches copy internal gap /\n/ Heading 1 desktop: 24px gap /\n.breakpoint-desktop.heading-1.lockup {\n gap: var(--space-6, 24px);\n}\n\n/ Heading 1 mobile: 20px gap /\n.breakpoint-mobile.heading-1.lockup {\n gap: var(--space-5, 20px);\n}\n\n/ Heading 2, 3 desktop: 16px gap /\n.breakpoint-desktop.heading-2.lockup,\n.breakpoint-desktop.heading-3.lockup {\n gap: var(--space-4, 16px);\n}\n\n/ Heading 2 mobile: 16px gap /\n.breakpoint-mobile.heading-2.lockup {\n gap: var(--space-4, 16px);\n}\n\n/ Heading 3 mobile, 4 desktop, 5 desktop: 12px gap /\n.breakpoint-mobile.heading-3.lockup,\n.breakpoint-desktop.heading-4.lockup,\n.breakpoint-desktop.heading-5.lockup {\n gap: var(--space-3, 12px);\n}\n\n/ Heading 4 mobile, 5 mobile: 8px gap /\n.breakpoint-mobile.heading-4.lockup,\n.breakpoint-mobile.heading-5.lockup {\n gap: var(--space-2, 8px);\n}\n\n/ Container alignment (affects flexbox positioning) /\n.text-left {\n align-items: flex-start;\n}\n\n.text-center {\n align-items: center;\n}\n\n.text-right {\n align-items: flex-end;\n}\n\n.text-justify {\n align-items: stretch;\n}\n\n/ Individual text alignment classes /\n.align-left {\n text-align: left;\n --af-text-align: left;\n}\n\n.align-center {\n text-align: center;\n --af-text-align: center;\n}\n\n.align-right {\n text-align: right;\n --af-text-align: right;\n}\n\n.align-justify {\n text-align: justify;\n --af-text-align: justify;\n}\n\n/ Copy section - base styles /\n.copy {\n display: flex;\n flex-direction: column;\n width: 100%;\n max-width: 840px;\n}\n\n/ Copy gap variations based on heading size and breakpoint /\n/ Heading 1 desktop: 24px gap /\n.breakpoint-desktop.heading-1 .copy {\n gap: var(--space-6, 24px);\n}\n\n/ Heading 1 mobile: 20px gap /\n.breakpoint-mobile.heading-1 .copy {\n gap: var(--space-5, 20px);\n}\n\n/ Heading 2, 3 desktop: 16px gap /\n.breakpoint-desktop.heading-2 .copy,\n.breakpoint-desktop.heading-3 .copy {\n gap: var(--space-4, 16px);\n}\n\n/ Heading 2 mobile: 16px gap /\n.breakpoint-mobile.heading-2 .copy {\n gap: var(--space-4, 16px);\n}\n\n/ Heading 3 mobile, 4 desktop, 5 desktop: 12px gap /\n.breakpoint-mobile.heading-3 .copy,\n.breakpoint-desktop.heading-4 .copy,\n.breakpoint-desktop.heading-5 .copy {\n gap: var(--space-3, 12px);\n}\n\n/ Heading 4 mobile, 5 mobile: 8px gap /\n.breakpoint-mobile.heading-4 .copy,\n.breakpoint-mobile.heading-5 .copy {\n gap: var(--space-2, 8px);\n}\n\n/ Heading styles - font-weight 400 (regular) matches Webflow's NeuSans usage.\n * display: flex collapses any whitespace-only text nodes that Astro (and\n * other templating engines) leave between the slotted heading and the\n * following named-slot siblings — those stray text nodes get projected into\n * the default slot and, without flex layout, each one occupies a full line\n * of the heading's line-height (user-visible \"extra line break\" after the\n * heading). /\n.heading {\n display: flex;\n flex-direction: column;\n font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));\n line-height: var(--line-height-heading-tight, 1);\n letter-spacing: var(--letter-spacing-heading, -0.02em);\n white-space: normal;\n}\n\n/ Desktop heading sizes /\n.breakpoint-desktop.heading-1 .heading {\n font-size: var(--font-size-heading-1-desktop, 56px);\n}\n\n.breakpoint-desktop.heading-2 .heading {\n font-size: var(--font-size-heading-2-desktop, 44px);\n}\n\n.breakpoint-desktop.heading-3 .heading {\n font-size: var(--font-size-heading-3-desktop, 34px);\n}\n\n.breakpoint-desktop.heading-4 .heading {\n font-size: var(--font-size-heading-4-desktop, 24px);\n line-height: var(--line-height-heading-relaxed, 1.2);\n}\n\n.breakpoint-desktop.heading-5 .heading {\n font-size: var(--font-size-heading-5-desktop, 20px);\n line-height: var(--line-height-heading-relaxed, 1.2);\n}\n\n/ Mobile heading sizes /\n.breakpoint-mobile.heading-1 .heading {\n font-size: var(--font-size-heading-1-mobile, 38px);\n}\n\n.breakpoint-mobile.heading-2 .heading {\n font-size: var(--font-size-heading-2-mobile, 32px);\n}\n\n.breakpoint-mobile.heading-3 .heading {\n font-size: var(--font-size-heading-3-mobile, 25px);\n}\n\n.breakpoint-mobile.heading-4 .heading {\n font-size: var(--font-size-heading-4-mobile, 20px);\n line-height: var(--line-height-heading-normal, 1.1);\n}\n\n.breakpoint-mobile.heading-5 .heading {\n font-size: var(--font-size-heading-5-mobile, 18px);\n line-height: var(--line-height-heading-normal, 1.1);\n}\n\n/ Description/body text - default (body/large) /\n.description {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-size: var(--font-size-body-large, 18px);\n font-weight: var(--font-weight-regular, 400);\n line-height: var(--line-height-body-large, 26px);\n color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));\n white-space: normal;\n}\n\n/ Heading colour variants — matches Webflow's h1.primary / h1.secondary pattern /\n.heading.heading-color-primary {\n color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));\n}\n\n.heading.heading-color-secondary {\n color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670));\n}\n\n/ Description colour variants /\n.description.description-color-default {\n color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));\n}\n\n.description.description-color-secondary {\n color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670));\n}\n\n/ Description text size variations - smaller for heading 3 mobile, 4, and 5 /\n.breakpoint-mobile.heading-3 .description,\n.breakpoint-desktop.heading-4 .description,\n.breakpoint-mobile.heading-4 .description,\n.breakpoint-desktop.heading-5 .description,\n.breakpoint-mobile.heading-5 .description {\n font-size: var(--font-size-body-medium, 16px);\n line-height: var(--line-height-body-medium, 24px);\n}\n\n.description:empty {\n display: none;\n}\n\n/ Buttons section /\n.buttons {\n display: flex;\n flex-direction: row;\n gap: var(--space-3, 12px);\n}\n\n.buttons:empty {\n display: none;\n}\n\n/ Button layout - horizontal (inline with copy) /\n.layout-horizontal .buttons {\n align-items: center;\n}\n\n.text-left.layout-horizontal {\n flex-direction: row;\n align-items: center;\n gap: var(--space-4, 16px);\n}\n\n.text-left.layout-horizontal .copy {\n flex: 1 0 0;\n max-width: 950px;\n}\n\n/ Heading 3, 4 horizontal: different max-width /\n.text-left.layout-horizontal.heading-3 .copy,\n.text-left.layout-horizontal.heading-4 .copy {\n max-width: 840px;\n}\n\n.text-left.layout-horizontal .buttons {\n flex-shrink: 0;\n}\n\n/ Button layout - vertical (stacked below copy) /\n.layout-vertical .buttons {\n align-items: flex-start;\n}\n\n/ Button position alignment /\n.buttons.align-left {\n justify-content: flex-start;\n}\n\n.buttons.align-center {\n justify-content: center;\n}\n\n.buttons.align-right {\n justify-content: flex-end;\n}\n\n.buttons.align-justify {\n justify-content: space-between;\n}\n\n/ Mobile button stacking - buttons stack vertically on mobile /\n.breakpoint-mobile .buttons {\n flex-direction: column;\n align-items: stretch;\n}\n\n.breakpoint-mobile .buttons.align-center {\n align-items: center;\n}\n\n.breakpoint-mobile .buttons.align-right {\n align-items: flex-end;\n}\n\n.breakpoint-mobile .buttons.align-left {\n align-items: flex-start;\n}\n\n/ Max width constraints for centered layouts /\n.text-center .copy {\n max-width: 840px;\n}\n\n/ Slot content styling /\n::slotted() {\n margin: 0;\n}\n","import { Component, Element, h, Prop, State, Host } from '@stencil/core';\n\ntype TextAlign = 'left' \| 'center' \| 'right' \| 'justify';\n\n/*\n Marketing-style composition of heading + description + buttons with\n * consistent spacing and alignment driven by the `headingSize` prop.\n \n Semantic vs visual: `headingSize` controls ONLY the visual scale\n * (the lockup sets font-size via a `heading-{1..5}` class). The semantic\n * level (h1-h6) is whatever the consumer slots in as default content.\n * Keep them aligned by convention so assistive tech and search engines\n * see the right hierarchy:\n \n headingSize=1 ↔ <h1> (or <h2> on non-top-of-page sections)\n * headingSize=2 ↔ <h2>\n * headingSize=3 ↔ <h3>\n * headingSize=4 ↔ <h4>\n * headingSize=5 ↔ <h5>\n \n When a design asks for a visually small H1 or a visually large H3,\n * pass the two independently — just do it deliberately, not by\n * accident. A console warning fires in dev mode if the slotted tag is\n * more than one level away from the prop.\n /\n@Component({\n tag: 'af-typography-lockup',\n styleUrl: 'af-typography-lockup.css',\n shadow: true\n})\nexport class AfTypographyLockup {\n @Element() el!: HTMLElement;\n\n /\n The heading size (1-5, where 1 is largest). Controls visual scale\n * only — pair with a matching <h1>-<h5> slotted element for correct\n * document outline (see component docblock).\n /\n @Prop() headingSize: 1 \| 2 \| 3 \| 4 \| 5 = 2;\n\n /\n The breakpoint for responsive typography\n /\n @Prop() breakpoint: 'desktop' \| 'mobile' = 'desktop';\n\n /\n Text alignment for the entire lockup (heading and description).\n * Can be overridden individually with headingAlignment and descriptionAlignment.\n /\n @Prop() textAlignment: TextAlign = 'left';\n\n /\n Heading text alignment. Falls back to textAlignment if not specified.\n /\n @Prop() headingAlignment?: TextAlign;\n\n /\n Description text alignment. Falls back to textAlignment if not specified.\n /\n @Prop() descriptionAlignment?: TextAlign;\n\n /\n Button layout direction (horizontal or vertical stacking)\n /\n @Prop() buttonLayout: 'horizontal' \| 'vertical' = 'vertical';\n\n /\n Buttons position alignment. Falls back to textAlignment if not specified.\n /\n @Prop() buttonsAlignment?: TextAlign;\n\n /\n Maximum width for the copy section (in pixels)\n /\n @Prop() maxWidth?: number;\n\n /\n Heading colour variant. Matches the Webflow pattern of `h1.primary` vs\n * `h1.secondary`, where \"secondary\" renders in the theme's accent/heading-\n * secondary colour (soft-clay on most themes).\n * - `primary` (default) - uses `--af-typography-heading-primary`\n * - `secondary` - uses `--af-typography-heading-secondary`\n /\n @Prop() headingColor: 'primary' \| 'secondary' = 'primary';\n\n /\n Description colour variant. Same pattern as `headingColor`; useful for\n * hero-style lockups where the description is rendered in the accent colour.\n * - `default` (default) - uses `--af-typography-body-default`\n * - `secondary` - uses `--af-typography-heading-secondary`\n /\n @Prop() descriptionColor: 'default' \| 'secondary' = 'default';\n\n /\n Whether the consumer passed anything into the description / buttons\n * slots. The CSS `:empty` selector can't help here — the `<slot>`\n * element itself counts as a child, so the wrapper divs would always\n * render as empty-but-visible lines of gap. Tracked on mount and on\n * any `slotchange` so wrappers collapse cleanly when there's nothing\n * to show.\n */\n @State() hasDescription: boolean = false;\n @State() hasButtons: boolean = false;\n\n private descriptionSlot?: HTMLSlotElement;\n private buttonsSlot?: HTMLSlotElement;\n\n componentDidLoad() {\n this.syncSlotState();\n this.descriptionSlot?.addEventListener('slotchange', this.syncSlotState);\n this.buttonsSlot?.addEventListener('slotchange', this.syncSlotState);\n // Dev-time check that the slotted semantic tag (h1-h6) is within one\n // level of the visual headingSize. Pairs with the class-level docblock;\n // silent in production unless the author explicitly turned on dev mode\n // via `window.__AF_STRICT_HEADINGS__`.\n if (typeof window === 'undefined') return;\n const strict = (window as unknown as { __AF_STRICT_HEADINGS__?: boolean })\n .__AF_STRICT_HEADINGS__;\n if (!strict) return;\n const heading = Array.from(this.el.children).find(\n (child) => !(child as HTMLElement).hasAttribute('slot') && /^h[1-6]$/i.test(child.tagName),\n );\n if (!heading) return;\n const slottedLevel = Number(heading.tagName.slice(1));\n const expected = this.headingSize;\n if (Math.abs(slottedLevel - expected) > 1) {\n // eslint-disable-next-line no-console\n console.warn(\n `[af-typography-lockup] heading-size=${expected} paired with <${heading.tagName.toLowerCase()}>; ` +\n `expected an <h${expected}> for document outline. Pass deliberately or align the two.`,\n );\n }\n }\n\n disconnectedCallback() {\n this.descriptionSlot?.removeEventListener('slotchange', this.syncSlotState);\n this.buttonsSlot?.removeEventListener('slotchange', this.syncSlotState);\n }\n\n private syncSlotState = () => {\n this.hasDescription = (this.descriptionSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n this.hasButtons = (this.buttonsSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n };\n\n render() {\n const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;\n const effectiveDescriptionAlignment = this.descriptionAlignment ?? this.textAlignment;\n const effectiveButtonsAlignment = this.buttonsAlignment ?? this.textAlignment;\n\n const containerClasses = {\n 'lockup': true,\n [`text-${this.textAlignment}`]: true,\n [`layout-${this.buttonLayout}`]: true,\n [`heading-${this.headingSize}`]: true,\n [`breakpoint-${this.breakpoint}`]: true\n };\n\n const headingClasses = {\n 'heading': true,\n [`align-${effectiveHeadingAlignment}`]: true,\n [`heading-color-${this.headingColor}`]: true\n };\n\n const descriptionClasses = {\n 'description': true,\n [`align-${effectiveDescriptionAlignment}`]: true,\n [`description-color-${this.descriptionColor}`]: true\n };\n\n const buttonsClasses = {\n 'buttons': true,\n [`align-${effectiveButtonsAlignment}`]: true\n };\n\n const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n return (\n <Host>\n <div class={containerClasses}>\n <div class=\"copy\" style={copyStyle}>\n <div class={headingClasses} part=\"heading\">\n <slot></slot>\n </div>\n <div class={descriptionClasses} part=\"body\" hidden={!this.hasDescription}>\n <slot name=\"description\" ref={(el) => (this.descriptionSlot = el as HTMLSlotElement)}></slot>\n </div>\n </div>\n <div class={buttonsClasses} part=\"buttons\" hidden={!this.hasButtons}>\n <slot name=\"buttons\" ref={(el) => (this.buttonsSlot = el as HTMLSlotElement)}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-noO3IF9V.js → p-TfjpcU9q.js} RENAMED Viewed

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.js';
-import { d as defineCustomElement$2 } from './p-BxwCXPuv.js';
-import { d as defineCustomElement$1 } from './p-287-nef9.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
+import { d as defineCustomElement$2 } from './p-BO4blShf.js';
+import { d as defineCustomElement$1 } from './p-N0xV1Erp.js';
 const afIllustratedCardCss = ".sc-af-illustrated-card-h{display:flex;flex-direction:column;width:100%;--af-card-padding:0;--af-card-gap:0}.illustrated-card.sc-af-illustrated-card{min-height:400px}.illustrated-card__content.sc-af-illustrated-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;z-index:1}.illustrated-card--breakpoint-desktop.illustrated-card--size-default.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:40px 32px 12px 32px}.illustrated-card--breakpoint-desktop.illustrated-card--size-large.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:40px 40px 0 40px}.illustrated-card--breakpoint-mobile.sc-af-illustrated-card .illustrated-card__content.sc-af-illustrated-card{padding:32px 24px 12px 24px}.illustrated-card__illustration-area.sc-af-illustrated-card{position:relative;width:100%;flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}.illustrated-card--breakpoint-desktop.sc-af-illustrated-card .illustrated-card__illustration-area.sc-af-illustrated-card{min-height:160px}.illustrated-card--breakpoint-mobile.sc-af-illustrated-card .illustrated-card__illustration-area.sc-af-illustrated-card{min-height:192px}.illustrated-card__illustration-placeholder.sc-af-illustrated-card{width:100%;height:100%;min-height:120px;display:flex;align-items:center;justify-content:center}.illustrated-card__illustration-area.sc-af-illustrated-card-s>img,.illustrated-card__illustration-area .sc-af-illustrated-card-s>img,.illustrated-card__illustration-area.sc-af-illustrated-card img.sc-af-illustrated-card{max-width:100%;max-height:200px;height:auto;object-fit:contain}.illustrated-card.sc-af-illustrated-card af-typography-lockup.sc-af-illustrated-card{--colour-typography-heading-primary:var(--af-typography-heading-primary);--colour-typography-body-default:var(--af-typography-body-default)}";
@@ -63,6 +63,6 @@ function defineCustomElement() {
 }
 export { AfIllustratedCard as A, defineCustomElement as d };
-//# sourceMappingURL=p-noO3IF9V.js.map
+//# sourceMappingURL=p-TfjpcU9q.js.map
-//# sourceMappingURL=p-noO3IF9V.js.map
+//# sourceMappingURL=p-TfjpcU9q.js.map

package/dist/components/{p-noO3IF9V.js.map → p-TfjpcU9q.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~noO3IF9V~~.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,m4DAAm4D;;MCqBn5D,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 /\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}\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}
1	+ {"file":"p-TfjpcU9q.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,m4DAAm4D;;MCqBn5D,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 /\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}\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-BJmoxr_I.js → p-XrKBGe-M.js} RENAMED Viewed

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.js';
-import { d as defineCustomElement$2 } from './p-BxwCXPuv.js';
-import { d as defineCustomElement$1 } from './p-287-nef9.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
+import { d as defineCustomElement$2 } from './p-BO4blShf.js';
+import { d as defineCustomElement$1 } from './p-N0xV1Erp.js';
 const afFeatureCardCss = ".sc-af-feature-card-h{display:block;--af-card-padding:0;--af-card-gap:0}[card-size=\"default\"].sc-af-feature-card-h{width:544px}[card-size=\"large\"].sc-af-feature-card-h{width:777px}[card-size=\"flexible\"].sc-af-feature-card-h{display:flex;width:100%;height:100%}.feature-card.sc-af-feature-card{overflow:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box;border-radius:var(--border-radius-card-level-1, 32px);width:100%;height:100%;isolation:isolate}.feature-card--layout-full-bleed.sc-af-feature-card{background:var(--background-base, var(--colour-brand-inkwell, #14343b))}[card-size=\"default\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card,[card-size=\"large\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{height:660px}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{min-height:480px}.feature-card__background.sc-af-feature-card{position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:0}.feature-card__background-image.sc-af-feature-card{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0}.feature-card__overlay.sc-af-feature-card{position:absolute;bottom:0;left:0;right:0;border-radius:0;backdrop-filter:blur(2px);background:linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);z-index:1;padding:124px 32px 32px 32px;--af-typography-heading-primary:var(--typography-heading-secondary, #ffffff);--af-typography-heading-secondary:var(--typography-heading-secondary, #ffffff);--af-typography-body-default:var(--typography-body-dark, #ffffff);--colour-typography-heading-primary:var(--typography-heading-secondary, #ffffff);--colour-typography-heading-secondary:var(--typography-heading-secondary, #ffffff);--colour-typography-body-default:var(--typography-body-dark, #ffffff)}.feature-card--layout-standard.sc-af-feature-card{background:var(--background-level-1, var(--colour-mistgreen-200, #e8eeed))}.feature-card--layout-standard.sc-af-feature-card af-card.sc-af-feature-card{--border-radius-card-level-1:0}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-standard.sc-af-feature-card{min-height:400px}.feature-card__content.sc-af-feature-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;z-index:1;padding:40px 32px 12px 32px;flex:1 1 auto}[card-size=\"large\"].sc-af-feature-card-h .feature-card__content.sc-af-feature-card{padding:40px 40px 0 40px}.feature-card__image-area.sc-af-feature-card{position:relative;width:100%;height:160px;flex-shrink:0;overflow:hidden;border-radius:0}.feature-card__image.sc-af-feature-card{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:0}.feature-card.sc-af-feature-card af-typography-lockup.sc-af-feature-card{--colour-typography-heading-primary:var(--af-typography-heading-primary, var(--typography-heading-primary, #14343b));--colour-typography-body-default:var(--af-typography-body-default, var(--typography-body-default, #2b484f))}@media (max-width: 768px){.feature-card.sc-af-feature-card{border-radius:var(--border-radius-card-level-1, 24px)}[card-size=\"default\"].sc-af-feature-card-h,[card-size=\"large\"].sc-af-feature-card-h{width:335px}[card-size=\"default\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card,[card-size=\"large\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{height:442px}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-standard.sc-af-feature-card{min-height:340px}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{min-height:380px}.feature-card__overlay.sc-af-feature-card{padding:80px 24px 28px 24px}.feature-card__content.sc-af-feature-card{padding:32px 24px 12px 24px}.feature-card__image-area.sc-af-feature-card{height:192px}}";
@@ -89,6 +89,6 @@ function defineCustomElement() {
 }
 export { AfFeatureCard as A, defineCustomElement as d };
-//# sourceMappingURL=p-BJmoxr_I.js.map
+//# sourceMappingURL=p-XrKBGe-M.js.map
-//# sourceMappingURL=p-BJmoxr_I.js.map
+//# sourceMappingURL=p-XrKBGe-M.js.map

package/dist/components/{p-BJmoxr_I.js.map → p-XrKBGe-M.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-BJmoxr_I.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}
1	+ {"file":"p-XrKBGe-M.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}

package/dist/components/{p-BFLKhcjQ.js → p-aAVeavhK.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-BBpihWJI.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
 /**
  * Auto-generated inline SVG icon data
@@ -367,6 +367,6 @@ function defineCustomElement() {
 }
 export { AfIcon as A, defineCustomElement as d };
-//# sourceMappingURL=p-BFLKhcjQ.js.map
+//# sourceMappingURL=p-aAVeavhK.js.map
-//# sourceMappingURL=p-BFLKhcjQ.js.map
+//# sourceMappingURL=p-aAVeavhK.js.map