@affinda/wc 0.6.2 → 0.7.0

package/dist/cjs/af-social-link.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afSocialLinkCss = ".sc-af-social-link-h{display:inline-block}.social-link.sc-af-social-link{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(198, 213, 209, 0.3);border-radius:50%;color:var(--colour-tints-mistGreen-200, #C6D5D1);transition:all 0.2s ease}.social-link.sc-af-social-link:hover{background-color:rgba(198, 213, 209, 0.1);border-color:rgba(198, 213, 209, 0.5)}";
+const afSocialLinkCss = () => `.sc-af-social-link-h{display:inline-block}.social-link.sc-af-social-link{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(198, 213, 209, 0.3);border-radius:50%;color:var(--colour-tints-mistGreen-200, #C6D5D1);transition:all 0.2s ease}.social-link.sc-af-social-link:hover{background-color:rgba(198, 213, 209, 0.1);border-color:rgba(198, 213, 209, 0.5)}`;
 
 const AfSocialLink = class {
     constructor(hostRef) {
@@ -17,7 +17,7 @@ const AfSocialLink = class {
     renderIcon() {
         switch (this.icon) {
             case 'linkedin':
-                return (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, index.h("path", { d: "M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" }), index.h("rect", { x: "2", y: "9", width: "4", height: "12" }), index.h("circle", { cx: "4", cy: "4", r: "2" })));
+                return (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { d: "M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" }), index.h("path", { d: "M8 11v5" }), index.h("path", { d: "M8 8v.01" }), index.h("path", { d: "M12 16v-5" }), index.h("path", { d: "M16 16v-3a2 2 0 0 0-4 0" })));
             case 'youtube':
                 return (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, index.h("path", { d: "M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" }), index.h("polygon", { points: "9.75,15.02 15.5,11.75 9.75,8.48", fill: "currentColor", stroke: "none" })));
             case 'github':
@@ -31,10 +31,9 @@ const AfSocialLink = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'ae4db8c4baeea96b707faf5581c5e5970019fad6' }, index.h("a", { key: '53e90930c51f30fa0ec74773234b06e3c2e06d6c', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
+        return (index.h(index.Host, { key: 'b532d73d6dd2bc382840371b9173ef244a121b10' }, index.h("a", { key: 'cde26e6cb747868b244631bb238e2e96e60e175a', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
     }
 };
-AfSocialLink.style = afSocialLinkCss;
+AfSocialLink.style = afSocialLinkCss();
 
 exports.af_social_link = AfSocialLink;
-//# sourceMappingURL=af-social-link.entry.cjs.js.map

package/dist/cjs/af-spacer.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afSpacerCss = ":host{display:block;box-sizing:border-box;flex-shrink:0}:host([hidden]){display:none}";
+const afSpacerCss = () => `:host{display:block;box-sizing:border-box;flex-shrink:0}:host([hidden]){display:none}`;
 
 const AfSpacer = class {
     constructor(hostRef) {
@@ -36,10 +36,9 @@ const AfSpacer = class {
                 style.height = sizeValue;
             }
         }
-        return index.h(index.Host, { key: '0ffa6692a18f469b5fe09385e268b1a43f5fdbe9', style: style, "aria-hidden": "true" });
+        return index.h(index.Host, { key: 'bee20a0371e996d61da088d4beaf284aedda994b', style: style, "aria-hidden": "true" });
     }
 };
-AfSpacer.style = afSpacerCss;
+AfSpacer.style = afSpacerCss();
 
 exports.af_spacer = AfSpacer;
-//# sourceMappingURL=af-spacer.entry.cjs.js.map

package/dist/cjs/af-split-section.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afSplitSectionCss = ".sc-af-split-section-h{display:block;width:100%}.split-section.sc-af-split-section{position:relative;width:100%}.padding-none.sc-af-split-section{padding:0}.padding-tight.sc-af-split-section{padding:48px 0}.padding-default.sc-af-split-section{padding:96px 0}.padding-loose.sc-af-split-section{padding:120px 0 96px}@media (max-width: 768px){.padding-tight.sc-af-split-section{padding:32px 0}.padding-default.sc-af-split-section{padding:64px 0}.padding-loose.sc-af-split-section{padding:80px 0 64px}}";
+const afSplitSectionCss = () => `.sc-af-split-section-h{display:block;width:100%}.split-section.sc-af-split-section{position:relative;width:100%}.padding-none.sc-af-split-section{padding:0}.padding-tight.sc-af-split-section{padding:48px 0}.padding-default.sc-af-split-section{padding:96px 0}.padding-loose.sc-af-split-section{padding:120px 0 96px}@media (max-width: 768px){.padding-tight.sc-af-split-section{padding:32px 0}.padding-default.sc-af-split-section{padding:64px 0}.padding-loose.sc-af-split-section{padding:80px 0 64px}}`;
 
 // Map theme names to CSS color values
 const themeColors = {
@@ -25,17 +25,16 @@ const AfSplitSection = class {
         this.container = true;
     }
     render() {
-        const content = index.h("slot", { key: '25574554f5f24e11488e1b94842229b7b87b3ffe' });
+        const content = index.h("slot", { key: '38c2f43d75bcf0a4b06626ad6618d2bc3ea2afaf' });
         // Create the split background using CSS gradient
         const topColor = themeColors[this.topTheme];
         const bottomColor = themeColors[this.bottomTheme];
         const backgroundStyle = {
             background: `linear-gradient(to bottom, ${topColor} 0%, ${topColor} 50%, ${bottomColor} 50%, ${bottomColor} 100%)`
         };
-        return (index.h(index.Host, { key: '5745d7d5c8b238a4959a53f820498bf348b1c668' }, index.h("div", { key: 'a2b8760b663800015b120c2ad82b004bced9882f', class: `split-section padding-${this.padding} top-theme-${this.topTheme}`, style: backgroundStyle }, this.container ? (index.h("af-container", null, content)) : content)));
+        return (index.h(index.Host, { key: '563840e7c887275f03c4aa414bd39cc936059a5f' }, index.h("div", { key: 'da940ce33cf7480007761aa631674e80cb4c3651', class: `split-section padding-${this.padding} top-theme-${this.topTheme}`, style: backgroundStyle }, this.container ? (index.h("af-container", null, content)) : content)));
     }
 };
-AfSplitSection.style = afSplitSectionCss;
+AfSplitSection.style = afSplitSectionCss();
 
 exports.af_split_section = AfSplitSection;
-//# sourceMappingURL=af-split-section.entry.cjs.js.map

package/dist/cjs/af-stack.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afStackCss = ":host{display:flex;box-sizing:border-box}:host([hidden]){display:none}";
+const afStackCss = () => `:host{display:flex;box-sizing:border-box}:host([hidden]){display:none}`;
 
 const AfStack = class {
     constructor(hostRef) {
@@ -55,10 +55,9 @@ const AfStack = class {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (index.h(index.Host, { key: 'bf6f8a0e7454bbdf4a55a5723a32b40bef78805b', style: style }, index.h("slot", { key: '54e82fd4bc6ca19d8b29ed424a2c7d54a8784a22' })));
+        return (index.h(index.Host, { key: 'db52d2f3bdaf6041270d6db9ca469fa8881defef', style: style }, index.h("slot", { key: 'bfb81ed114d802a1260762561dedc82b03dfcb9f' })));
     }
 };
-AfStack.style = afStackCss;
+AfStack.style = afStackCss();
 
 exports.af_stack = AfStack;
-//# sourceMappingURL=af-stack.entry.cjs.js.map

package/dist/cjs/af-stat.cjs.entry.js

@@ -1,18 +1,19 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afStatCss = ":host{display:block;flex:1 1 0;min-width:0;border-left:2px solid var(--af-background-border-active, var(--colour-brand-soft-clay, #b09670));padding-left:var(--space-4, 16px)}.stat{display:flex;flex-direction:column;gap:var(--space-2, 8px);min-height:76px;justify-content:center}.stat__value{--af-typography-heading-primary:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));letter-spacing:-0.88px;white-space:nowrap;font-variant-numeric:lining-nums proportional-nums;font-feature-settings:'ss01', 'kern'}";
+const afStatCss = () => `:host{display:block;flex:1 1 0;min-width:0}.stat{display:flex;flex-direction:column;gap:var(--space-2, 8px)}.stat--accent{border-left:2px solid var(--af-background-border-active, var(--colour-brand-soft-clay, #b09670));padding-left:var(--space-4, 16px);min-height:76px;justify-content:center}.stat__value{--af-typography-heading-primary:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));letter-spacing:-0.88px;white-space:nowrap;font-variant-numeric:lining-nums proportional-nums;font-feature-settings:'ss01', 'kern'}`;
 
 const AfStat = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** Whether to show the left accent border. */
+        this.accentBorder = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'db2aa04e087c7313db9dde512368413ea6428d38' }, index.h("div", { key: '72f0578398f5d82dcd27bf7e4102f9801f1067b3', class: "stat" }, index.h("af-heading", { key: '1accbab198a0923be4af5b5b6c0e7e5ca82c36b5', level: "2", class: "stat__value" }, this.value), index.h("af-text", { key: '533ea04317fb66451e7d130369b25080e37cff41', variant: "medium", class: "stat__label" }, this.label))));
+        return (index.h(index.Host, { key: '966cbca3aea7ebe93422d39e2bc40a69523dd274' }, index.h("div", { key: 'ec8518eca6608875480d8a39b701fa961d5319b4', class: { stat: true, 'stat--accent': this.accentBorder } }, index.h("af-heading", { key: '5e92bee48993111f60db03b0de7f01597af0729e', level: "2", class: "stat__value" }, this.value), index.h("af-text", { key: '60f3a82018cd7c39616eac77f3de85957b20ebfd', variant: "medium", class: "stat__label" }, this.label))));
     }
 };
-AfStat.style = afStatCss;
+AfStat.style = afStatCss();
 
 exports.af_stat = AfStat;
-//# sourceMappingURL=af-stat.entry.cjs.js.map

package/dist/cjs/af-stats-row.cjs.entry.js

@@ -1,18 +1,17 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afStatsRowCss = ".sc-af-stats-row-h{display:block;width:100%}.stats-row.sc-af-stats-row{display:flex;flex-wrap:wrap;gap:var(--space-6, 24px);align-items:stretch}.stats-row.sc-af-stats-row af-stat.sc-af-stats-row{flex:1 1 calc(50% - var(--space-6, 24px));min-width:0}@media (min-width: 768px){.stats-row.sc-af-stats-row af-stat.sc-af-stats-row{flex:1 1 0}}@media (max-width: 480px){.stats-row.sc-af-stats-row af-stat.sc-af-stats-row{flex:1 1 100%}}";
+const afStatsRowCss = () => `.sc-af-stats-row-h{display:block;width:100%}.stats-row.sc-af-stats-row{display:grid;grid-template-columns:repeat(2, 1fr);gap:40px}@media (max-width: 767px){.stats-row.sc-af-stats-row{grid-template-columns:repeat(2, 1fr);gap:24px}}`;
 
 const AfStatsRow = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '49538a82264992333834fdc12ec64522cf4242fe' }, index.h("div", { key: '9d567f97bc5f2707fad9e40b8d3ce0c4658db73b', class: "stats-row" }, index.h("slot", { key: 'f48aac6723185f8f10804355da4731f03285d9db' }))));
+        return (index.h(index.Host, { key: 'a1639a4d77e13a9645c16767bc20fbcaae7b7ee9' }, index.h("div", { key: '5fc777c0d818c07893a5ec4a61efb003273b7894', class: "stats-row" }, index.h("slot", { key: '96688883a1db1679c1bf9bdf1618b4f35695b63f' }))));
     }
 };
-AfStatsRow.style = afStatsRowCss;
+AfStatsRow.style = afStatsRowCss();
 
 exports.af_stats_row = AfStatsRow;
-//# sourceMappingURL=af-stats-row.entry.cjs.js.map

package/dist/cjs/af-stepper-step.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afStepperStepCss = ".sc-af-stepper-step-h{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;min-width:0;padding:0 16px;position:relative;z-index:1}.stepper-step__badge.sc-af-stepper-step{width:48px;height:48px;border-radius:50%;border:1px solid var(--colour-brand-inkwell, #14343b);background:var(--colour-background-white, #ffffff);display:inline-flex;align-items:center;justify-content:center;font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:500;font-size:20px;color:var(--colour-brand-inkwell, #14343b);margin-bottom:24px;flex-shrink:0}.stepper-step__content.sc-af-stepper-step{display:flex;flex-direction:column;gap:12px;max-width:320px}.stepper-step__heading.sc-af-stepper-step{font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:24px;line-height:1.2;letter-spacing:-0.02em;color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b))}.stepper-step__body.sc-af-stepper-step{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:16px;line-height:1.5;color:var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b))}.sc-af-stepper-step-h :where(h1,h2.sc-af-stepper-step,h3.sc-af-stepper-step,h4.sc-af-stepper-step,h5.sc-af-stepper-step,h6).sc-af-stepper-step,.sc-af-stepper-step-h .sc-af-stepper-step:where(p){font:inherit;color:inherit;margin:0}.stepper--vertical.sc-af-stepper-step-h,.stepper--vertical .sc-af-stepper-step-h{flex-direction:row;align-items:flex-start;text-align:left;gap:24px;padding:0}.stepper--vertical.sc-af-stepper-step-h .stepper-step__badge.sc-af-stepper-step,.stepper--vertical .sc-af-stepper-step-h .stepper-step__badge.sc-af-stepper-step{margin-bottom:0}@media (max-width: 767px){.sc-af-stepper-step-h{flex-direction:row;align-items:flex-start;text-align:left;gap:24px;padding:0}.stepper-step__badge.sc-af-stepper-step{margin-bottom:0}}";
+const afStepperStepCss = () => `.sc-af-stepper-step-h{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;min-width:0;padding:0 16px;position:relative;z-index:1}.stepper-step__badge.sc-af-stepper-step{width:48px;height:48px;border-radius:50%;border:1px solid var(--colour-brand-inkwell, #14343b);background:var(--colour-background-white, #ffffff);display:inline-flex;align-items:center;justify-content:center;font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:500;font-size:20px;color:var(--colour-brand-inkwell, #14343b);margin-bottom:24px;flex-shrink:0}.stepper-step__content.sc-af-stepper-step{display:flex;flex-direction:column;gap:12px;max-width:320px}.stepper-step__heading.sc-af-stepper-step{font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:24px;line-height:1.2;letter-spacing:-0.02em;color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b))}.stepper-step__body.sc-af-stepper-step{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:16px;line-height:1.5;color:var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b))}.sc-af-stepper-step-h :where(h1,h2.sc-af-stepper-step,h3.sc-af-stepper-step,h4.sc-af-stepper-step,h5.sc-af-stepper-step,h6).sc-af-stepper-step,.sc-af-stepper-step-h .sc-af-stepper-step:where(p){font:inherit;color:inherit;margin:0}.stepper--vertical.sc-af-stepper-step-h,.stepper--vertical .sc-af-stepper-step-h{flex-direction:row;align-items:flex-start;text-align:left;gap:24px;padding:0}.stepper--vertical.sc-af-stepper-step-h .stepper-step__badge.sc-af-stepper-step,.stepper--vertical .sc-af-stepper-step-h .stepper-step__badge.sc-af-stepper-step{margin-bottom:0}@media (max-width: 767px){.sc-af-stepper-step-h{flex-direction:row;align-items:flex-start;text-align:left;gap:24px;padding:0}.stepper-step__badge.sc-af-stepper-step{margin-bottom:0}}`;
 
 const AfStepperStep = class {
     constructor(hostRef) {
@@ -14,10 +14,9 @@ const AfStepperStep = class {
         this.index = 1;
     }
     render() {
-        return (index.h(index.Host, { key: 'd7c49caaec94513a798ff851f8975b2df55848ce' }, index.h("span", { key: 'd8f9d57de5434a961c217b57ac220f8930d17f6f', class: "stepper-step__badge" }, this.index), index.h("div", { key: '62204e81ed7bfd36d342da448ea0ea8852e16854', class: "stepper-step__content" }, index.h("div", { key: '40edc0e5973fabcfa781195e64fa0446d6be0e0c', class: "stepper-step__heading" }, index.h("slot", { key: '090302f455303956e2b6185a2e30d41d13b489e0', name: "heading" })), index.h("div", { key: '5fd26c30a269068568e95007f84dda0912a4bde4', class: "stepper-step__body" }, index.h("slot", { key: '5f3f4178f54edbbf05be6cd3df74a30bc2e18f96', name: "body" })))));
+        return (index.h(index.Host, { key: 'd74176fcffb5a54232c343e75ae72bb060df62f1' }, index.h("span", { key: 'e59ae590afe947d96e5813c1a7c5d2dad0504c57', class: "stepper-step__badge" }, this.index), index.h("div", { key: '4334fbc2c7f48475e499b1bcf4950dae7ef02a4f', class: "stepper-step__content" }, index.h("div", { key: '03accfc68453cfc05def2c45806df42ae9ee1a1d', class: "stepper-step__heading" }, index.h("slot", { key: '7b62fd0c8f4e9ee690952e63f5079c6442509ab2', name: "heading" })), index.h("div", { key: 'ce945437c372b3863a7f32e6c64b3921be684ca6', class: "stepper-step__body" }, index.h("slot", { key: '47264cf842c3a98e0c190dc36430840d24c9e639', name: "body" })))));
     }
 };
-AfStepperStep.style = afStepperStepCss;
+AfStepperStep.style = afStepperStepCss();
 
 exports.af_stepper_step = AfStepperStep;
-//# sourceMappingURL=af-stepper-step.entry.cjs.js.map

package/dist/cjs/af-stepper.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afStepperCss = ".sc-af-stepper-h{display:flex;width:100%;position:relative;max-width:1120px;margin:0 auto;align-items:flex-start;justify-content:space-between;gap:24px}.stepper--vertical.sc-af-stepper-h{flex-direction:column;max-width:680px;gap:40px}.stepper--horizontal.sc-af-stepper .stepper__connector.sc-af-stepper{position:absolute;top:23px;left:8%;right:8%;height:2px;background:var(--colour-brand-inkwell, #14343b);opacity:0.25;z-index:0}.stepper--vertical.sc-af-stepper .stepper__connector.sc-af-stepper{position:absolute;top:24px;bottom:24px;left:23px;width:2px;background:var(--colour-brand-inkwell, #14343b);opacity:0.25;z-index:0}@media (max-width: 767px){.stepper--horizontal.sc-af-stepper{flex-direction:column;gap:32px}.stepper--horizontal.sc-af-stepper .stepper__connector.sc-af-stepper{top:24px;bottom:24px;left:23px;right:auto;width:2px;height:auto}}";
+const afStepperCss = () => `.sc-af-stepper-h{display:flex;width:100%;position:relative;max-width:1120px;margin:0 auto;align-items:flex-start;justify-content:space-between;gap:24px}.stepper--vertical.sc-af-stepper-h{flex-direction:column;max-width:680px;gap:40px}.stepper--horizontal.sc-af-stepper .stepper__connector.sc-af-stepper{position:absolute;top:23px;left:8%;right:8%;height:2px;background:var(--colour-brand-inkwell, #14343b);opacity:0.25;z-index:0}.stepper--vertical.sc-af-stepper .stepper__connector.sc-af-stepper{position:absolute;top:24px;bottom:24px;left:23px;width:2px;background:var(--colour-brand-inkwell, #14343b);opacity:0.25;z-index:0}@media (max-width: 767px){.stepper--horizontal.sc-af-stepper{flex-direction:column;gap:32px}.stepper--horizontal.sc-af-stepper .stepper__connector.sc-af-stepper{top:24px;bottom:24px;left:23px;right:auto;width:2px;height:auto}}`;
 
 const AfStepper = class {
     constructor(hostRef) {
@@ -24,11 +24,10 @@ const AfStepper = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'a8aeeb5a9274e24d0e3b4daf84f5ba4f30ce47d3', class: `stepper stepper--${this.orientation}` }, index.h("div", { key: 'aa2263b4a10e144c376b6afad896f83d9c642a88', class: "stepper__connector", "aria-hidden": "true" }), index.h("slot", { key: '6ff6d3ce84bd8c06599ef5e8e9244d210e16578a' })));
+        return (index.h(index.Host, { key: '148a796e0537c96f435989eb7ec9d57e726d6a14', class: `stepper stepper--${this.orientation}` }, index.h("div", { key: 'cb0732de33b4adb7c6f319299b89fe4930a9bb5b', class: "stepper__connector", "aria-hidden": "true" }), index.h("slot", { key: '1056fd57918f571d55bf149569b0e88c33102a2f' })));
     }
     get el() { return index.getElement(this); }
 };
-AfStepper.style = afStepperCss;
+AfStepper.style = afStepperCss();
 
 exports.af_stepper = AfStepper;
-//# sourceMappingURL=af-stepper.entry.cjs.js.map

package/dist/cjs/af-switch.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afSwitchCss = ":host{display:inline-block}.switch{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(--af-typography-body-dark, #14343b));user-select:none}.switch.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}.track{position:relative;display:flex;align-items:center;flex-shrink:0;width:52px;height:30px;border-radius:var(--radii-switch, 9999px);background:var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed));transition:background 0.2s ease;box-sizing:border-box}.track.active{background:var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b))}.track.disabled{background:var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed))}.track.active.disabled{background:var(--af-form-control-bg-checked-disabled, #708380)}.switch:not(.disabled):hover .track:not(.active){background:var(--af-form-control-stroke, var(--af-background-level-1-hover, #dde6e3))}.input:focus-visible+.track{box-shadow:0 0 0 4px var(--af-background-base, #ffffff), 0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));outline:none}.knob{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--af-form-control-bg, var(--colour-brand-white, #ffffff));box-shadow:0 2px 4px rgba(0, 0, 0, 0.15);transition:transform 0.2s ease, background 0.2s ease;transform:translateX(2px)}.knob.active{transform:translateX(24px);background:var(--af-form-control-icon, var(--colour-brand-white, #ffffff))}.knob.disabled{background:var(--af-form-control-stroke-disabled, var(--colour-inkwell-200, #a1aeb1));box-shadow:none}.label{display:flex;align-items:center;min-height:24px}.label:empty{display:none}";
+const afSwitchCss = () => `:host{display:inline-block}.switch{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(--af-typography-body-dark, #14343b));user-select:none}.switch.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}.track{position:relative;display:flex;align-items:center;flex-shrink:0;width:52px;height:30px;border-radius:var(--radii-switch, 9999px);background:var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed));transition:background 0.2s ease;box-sizing:border-box}.track.active{background:var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b))}.track.disabled{background:var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed))}.track.active.disabled{background:var(--af-form-control-bg-checked-disabled, #708380)}.switch:not(.disabled):hover .track:not(.active){background:var(--af-form-control-stroke, var(--af-background-level-1-hover, #dde6e3))}.input:focus-visible+.track{box-shadow:0 0 0 4px var(--af-background-base, #ffffff), 0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));outline:none}.knob{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--af-form-control-bg, var(--colour-brand-white, #ffffff));box-shadow:0 2px 4px rgba(0, 0, 0, 0.15);transition:transform 0.2s ease, background 0.2s ease;transform:translateX(2px)}.knob.active{transform:translateX(24px);background:var(--af-form-control-icon, var(--colour-brand-white, #ffffff))}.knob.disabled{background:var(--af-form-control-stroke-disabled, var(--colour-inkwell-200, #a1aeb1));box-shadow:none}.label{display:flex;align-items:center;min-height:24px}.label:empty{display:none}`;
 
 const AfSwitch = class {
     constructor(hostRef) {
@@ -42,7 +42,6 @@ const AfSwitch = class {
         return (index.h(index.Host, { key: '21c42503d55acd6e642e303fbb94ae46f061ae4a' }, index.h("label", { key: 'a01f3dc6b3bde4070afd1289115dd45c699baead', class: switchClasses }, index.h("input", { key: 'fc19c909701239fb40204eefa9b2754871db5e1b', type: "checkbox", role: "switch", class: "input", checked: this.active, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), index.h("span", { key: 'b09ab35a5157959712e11b1fe336e9d2b3ede0d7', class: trackClasses }, index.h("span", { key: '51681ef5a21b06777a2dcd3f29ccaadcb8f6a0c6', class: knobClasses })), index.h("span", { key: 'f17194f5988bce168aa499413ecbe05f7c238b05', class: "label" }, index.h("slot", { key: 'a659c4750a0ccb3413290a461de82e5714e498a4' })))));
     }
 };
-AfSwitch.style = afSwitchCss;
+AfSwitch.style = afSwitchCss();
 
 exports.af_switch = AfSwitch;
-//# sourceMappingURL=af-switch.entry.cjs.js.map

package/dist/cjs/af-tab-bar.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.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)}";
+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)}`;
 
 const AfTabBar = class {
     constructor(hostRef) {
@@ -82,7 +82,6 @@ const AfTabBar = class {
     }
     get el() { return index.getElement(this); }
 };
-AfTabBar.style = afTabBarCss;
+AfTabBar.style = afTabBarCss();
 
 exports.af_tab_bar = AfTabBar;
-//# sourceMappingURL=af-tab-bar.entry.cjs.js.map

package/dist/cjs/af-tab.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afTabCss = ":host{display:inline-flex;flex-shrink:0}.tab{display:inline-flex;align-items:center;justify-content:center;gap:0;border:none;background:transparent;cursor:pointer;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-book, 500);font-size:var(--font-size-label-button, 17px);line-height:var(--line-height-label-button, 20px);text-align:center;transition:color 0.15s ease,\n    background-color 0.15s ease,\n    border-color 0.15s ease,\n    box-shadow 0.15s ease}.tab:focus{outline:none}.tab:focus-visible{outline:none;box-shadow:0 0 0 4px var(--af-background-base, #ffffff),\n    0 0 0 5px var(--af-background-border-active, #8a7049)}.icon-slot,.number-slot{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-slot{width:24px;height:24px}.number-slot{width:24px;height:24px}.label{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 var(--space-3, 12px)}.tab.shape-square{padding:var(--space-3, 12px);border-radius:0;overflow:hidden;border-bottom:3px solid transparent}.tab.shape-square:not(.active):not(.disabled){color:var(--af-typography-body-default, #2b484f);border-bottom-color:var(--af-background-border-subtle, #e8eeed)}.tab.shape-square:not(.active):not(.disabled):hover{color:var(--af-typography-body-dark, #14343b);border-bottom-color:var(--af-background-border-default, #d1ddda)}.tab.shape-square.active{color:var(--af-typography-body-dark, #14343b);border-bottom-color:var(--af-background-border-active, #8a7049)}.tab.shape-square.disabled{color:var(--af-typography-body-subtle, #60767b);border-bottom-color:transparent;cursor:not-allowed;opacity:0.6}.tab.shape-square:not(.active):not(.disabled) .icon-slot{color:var(--af-typography-body-default, #2b484f)}.tab.shape-square:not(.active):not(.disabled):hover .icon-slot{color:var(--af-typography-body-dark, #14343b)}.tab.shape-square.active .icon-slot{color:var(--af-typography-body-dark, #14343b)}.tab.shape-pill{padding:var(--space-3, 12px) var(--space-4, 16px);border-radius:var(--radius-pill, 999px);overflow:hidden}.tab.shape-pill:not(.active):not(.disabled){color:var(--af-typography-body-default, #2b484f);background-color:transparent}.tab.shape-pill:not(.active):not(.disabled):hover{color:var(--af-typography-body-dark, #14343b);background-color:var(--af-background-level-1-hover, #dde6e3)}.tab.shape-pill.active{color:var(--af-typography-body-dark, #14343b);background-color:var(--af-background-base, #ffffff);box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.08)}.tab.shape-pill.disabled{color:var(--af-typography-body-subtle, #60767b);background-color:transparent;cursor:not-allowed;opacity:0.6}.tab.shape-pill:not(.active):not(.disabled) .icon-slot{color:var(--af-typography-body-default, #2b484f)}.tab.shape-pill:not(.active):not(.disabled):hover .icon-slot{color:var(--af-typography-body-dark, #14343b)}.tab.shape-pill.active .icon-slot{color:var(--af-typography-body-dark, #14343b)}:host([data-breakpoint=\"desktop\"]) .tab.shape-square{padding:var(--space-6, 24px) var(--space-5, 20px);border-bottom-width:4px}:host([data-breakpoint=\"desktop\"]) .tab.shape-pill{padding:var(--space-3, 12px) var(--space-4, 16px)}";
+const afTabCss = () => `:host{display:inline-flex;flex-shrink:0}.tab{display:inline-flex;align-items:center;justify-content:center;gap:0;border:none;background:transparent;cursor:pointer;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-book, 500);font-size:var(--font-size-label-button, 17px);line-height:var(--line-height-label-button, 20px);text-align:center;transition:color 0.15s ease,     background-color 0.15s ease,     border-color 0.15s ease,     box-shadow 0.15s ease}.tab:focus{outline:none}.tab:focus-visible{outline:none;box-shadow:0 0 0 4px var(--af-background-base, #ffffff),     0 0 0 5px var(--af-background-border-active, #8a7049)}.icon-slot,.number-slot{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-slot{width:24px;height:24px}.number-slot{width:24px;height:24px}.label{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 var(--space-3, 12px)}.tab.shape-square{padding:var(--space-3, 12px);border-radius:0;overflow:hidden;border-bottom:3px solid transparent}.tab.shape-square:not(.active):not(.disabled){color:var(--af-typography-body-default, #2b484f);border-bottom-color:var(--af-background-border-subtle, #e8eeed)}.tab.shape-square:not(.active):not(.disabled):hover{color:var(--af-typography-body-dark, #14343b);border-bottom-color:var(--af-background-border-default, #d1ddda)}.tab.shape-square.active{color:var(--af-typography-body-dark, #14343b);border-bottom-color:var(--af-background-border-active, #8a7049)}.tab.shape-square.disabled{color:var(--af-typography-body-subtle, #60767b);border-bottom-color:transparent;cursor:not-allowed;opacity:0.6}.tab.shape-square:not(.active):not(.disabled) .icon-slot{color:var(--af-typography-body-default, #2b484f)}.tab.shape-square:not(.active):not(.disabled):hover .icon-slot{color:var(--af-typography-body-dark, #14343b)}.tab.shape-square.active .icon-slot{color:var(--af-typography-body-dark, #14343b)}.tab.shape-pill{padding:var(--space-3, 12px) var(--space-4, 16px);border-radius:var(--radius-pill, 999px);overflow:hidden}.tab.shape-pill:not(.active):not(.disabled){color:var(--af-typography-body-default, #2b484f);background-color:transparent}.tab.shape-pill:not(.active):not(.disabled):hover{color:var(--af-typography-body-dark, #14343b);background-color:var(--af-background-level-1-hover, #dde6e3)}.tab.shape-pill.active{color:var(--af-typography-body-dark, #14343b);background-color:var(--af-background-base, #ffffff);box-shadow:0px 2px 8px 0px rgba(0, 0, 0, 0.08)}.tab.shape-pill.disabled{color:var(--af-typography-body-subtle, #60767b);background-color:transparent;cursor:not-allowed;opacity:0.6}.tab.shape-pill:not(.active):not(.disabled) .icon-slot{color:var(--af-typography-body-default, #2b484f)}.tab.shape-pill:not(.active):not(.disabled):hover .icon-slot{color:var(--af-typography-body-dark, #14343b)}.tab.shape-pill.active .icon-slot{color:var(--af-typography-body-dark, #14343b)}:host([data-breakpoint="desktop"]) .tab.shape-square{padding:var(--space-6, 24px) var(--space-5, 20px);border-bottom-width:4px}:host([data-breakpoint="desktop"]) .tab.shape-pill{padding:var(--space-3, 12px) var(--space-4, 16px)}`;
 
 const AfTab = class {
     constructor(hostRef) {
@@ -58,7 +58,6 @@ const AfTab = class {
         return (index.h(index.Host, { key: '9e477df87e7bd6442e9f755d3caaf99e4138c60e' }, index.h("button", { key: 'b7f4504a1be24fb9db831fbf6ca4da535b7eb200', class: tabClasses, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, disabled: this.disabled }, this.displayNumber && (index.h("span", { key: 'd3dbb0dda4a819304ef8a70b34379c6b7fd2d85f', class: "number-slot" }, index.h("slot", { key: '2a1b2881d7fcd689f3e4e5e4e06407084690966c', name: "number" }))), this.displayIcon && (index.h("span", { key: 'b07f1d3f8c723ec260cfa4900e51f7581d2f8024', class: "icon-slot" }, index.h("slot", { key: '6b80404c46e77ab06d3ca24a108fbea231420867', name: "icon" }))), index.h("span", { key: 'e657d5ffa4938fb85dd165e8679eff694cbb357e', class: "label" }, this.label))));
     }
 };
-AfTab.style = afTabCss;
+AfTab.style = afTabCss();
 
 exports.af_tab = AfTab;
-//# sourceMappingURL=af-tab.entry.cjs.js.map

package/dist/cjs/af-table.cjs.entry.js

@@ -0,0 +1,159 @@
+'use strict';
+
+var index = require('./index-BcMwIg4j.js');
+
+const afTableCss = () => `:host{display:block;width:100%}.table-wrapper{position:relative}.table-wrapper__viewport{display:flex}.table-wrapper__scroll{flex:1;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.table-wrapper__scroll::-webkit-scrollbar{display:none}.table-wrapper table{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:16px;line-height:24px;color:var(--af-typography-body-default, #2b484f);background-color:var(--af-background-base, #ffffff);border-radius:var(--radius-md, 12px)}.table-wrapper th{text-align:left;font-weight:var(--font-weight-semibold, 600);letter-spacing:var(--letter-spacing-heading, -0.02em);color:var(--af-table-header-text, var(--af-typography-heading-primary, #14343b));background-color:var(--af-table-header-bg, var(--af-background-contrast, #c6d5d1));padding:12px 16px;white-space:nowrap}.table-wrapper thead tr:first-child th:first-child{border-top-left-radius:var(--radius-md, 12px)}.table-wrapper thead tr:first-child th:last-child{border-top-right-radius:var(--radius-md, 12px)}.table-wrapper td{padding:12px 16px;vertical-align:top}.table-wrapper tbody tr:last-child td:first-child{border-bottom-left-radius:var(--radius-md, 12px)}.table-wrapper tbody tr:last-child td:last-child{border-bottom-right-radius:var(--radius-md, 12px)}.table-wrapper tr{transition:background-color var(--motion-duration-fast, 150ms) var(--motion-easing-standard)}.table-wrapper--bordered th,.table-wrapper--bordered td{border:1px solid var(--af-table-border, var(--af-background-border-default, #d1ddda))}.table-wrapper--bordered th+th,.table-wrapper--bordered td+td{border-left:none}.table-wrapper--bordered tbody tr+tr td{border-top:none}.table-wrapper--bordered thead+tbody tr:first-child td{border-top:none}.table-wrapper--striped tbody tr:nth-child(odd){background-color:var(--af-table-row-alt, var(--af-background-level-1, #f5f7f7))}.table-wrapper--striped tbody tr:nth-child(even){background-color:var(--af-background-base, #ffffff)}.table-wrapper--compact th,.table-wrapper--compact td{padding:8px 12px}.table-wrapper--compact table{font-size:14px;line-height:20px}.table-wrapper--sticky-header thead th{position:sticky;top:0;z-index:1}.table-wrapper__scrollbar{cursor:grab;touch-action:none;flex-shrink:0}.table-wrapper__scrollbar:active{cursor:grabbing}.table-wrapper__scrollbar:focus-visible{outline:2px solid var(--af-background-border-active, #8a7049);outline-offset:2px;border-radius:999px}.table-wrapper__scrollbar--h{margin-top:var(--space-3, 12px);padding:4px 0;display:flex;align-items:center}.table-wrapper__scrollbar-track--h{position:relative;width:100%;height:1px;background:var(--af-scrollbar-track, var(--af-background-border-default, #d1ddda))}.table-wrapper__scrollbar-thumb--h{position:absolute;top:-1px;height:3px;border-radius:999px;background:var(--af-scrollbar-thumb, var(--af-background-border-active, #8a7049));transition:left 0.1s ease-out}.table-wrapper__scrollbar--h:active .table-wrapper__scrollbar-thumb--h{transition:none}.table-wrapper__scrollbar--v{width:var(--space-4, 16px);margin-left:var(--space-3, 12px);display:flex;justify-content:center;padding:0 4px}.table-wrapper__scrollbar-track--v{position:relative;width:1px;height:100%;background:var(--af-scrollbar-track, var(--af-background-border-default, #d1ddda))}.table-wrapper__scrollbar-thumb--v{position:absolute;left:-1px;width:3px;border-radius:999px;background:var(--af-scrollbar-thumb, var(--af-background-border-active, #8a7049));transition:top 0.1s ease-out}.table-wrapper__scrollbar--v:active .table-wrapper__scrollbar-thumb--v{transition:none}@media (max-width: 768px){.table-wrapper__scroll{-webkit-overflow-scrolling:touch}.table-wrapper th,.table-wrapper td{padding:10px 12px;min-height:44px}.table-wrapper table{font-size:14px;line-height:20px}.table-wrapper__scrollbar--h{padding:8px 0}.table-wrapper__scrollbar--v{padding:0 8px}}.theme-inkwell .table-wrapper table{background-color:var(--af-background-base)}.theme-inkwell .table-wrapper td{color:var(--af-typography-body-default)}.theme-inkwell .table-wrapper--striped tbody tr:nth-child(odd){background-color:var(--af-table-row-alt)}.theme-inkwell .table-wrapper--bordered th,.theme-inkwell .table-wrapper--bordered td{border-color:var(--af-table-border, var(--af-background-border-default))}`;
+
+const AfTable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.draggingAxis = null;
+        /**
+         * Apply alternating row backgrounds for better readability.
+         */
+        this.striped = false;
+        /**
+         * Show cell borders.
+         */
+        this.bordered = true;
+        /**
+         * Use reduced padding for dense data tables.
+         */
+        this.compact = false;
+        /**
+         * Make the table header sticky when scrolling.
+         */
+        this.stickyHeader = false;
+        this.scrollState = {
+            horizontal: { progress: 0, thumbSize: 100, show: false },
+            vertical: { progress: 0, thumbSize: 100, show: false },
+        };
+        this.updateScrollState = () => {
+            if (!this.scrollEl)
+                return;
+            const { scrollWidth, clientWidth, scrollLeft, scrollHeight, clientHeight, scrollTop } = this.scrollEl;
+            const maxScrollX = scrollWidth - clientWidth;
+            const showHorizontal = scrollWidth > clientWidth;
+            const thumbWidthPct = showHorizontal ? (clientWidth / scrollWidth) * 100 : 100;
+            const progressX = maxScrollX > 0 ? scrollLeft / maxScrollX : 0;
+            const maxScrollY = scrollHeight - clientHeight;
+            const showVertical = scrollHeight > clientHeight;
+            const thumbHeightPct = showVertical ? (clientHeight / scrollHeight) * 100 : 100;
+            const progressY = maxScrollY > 0 ? scrollTop / maxScrollY : 0;
+            this.scrollState = {
+                horizontal: { progress: progressX, thumbSize: thumbWidthPct, show: showHorizontal },
+                vertical: { progress: progressY, thumbSize: thumbHeightPct, show: showVertical },
+            };
+        };
+        this.handleScroll = () => {
+            this.updateScrollState();
+        };
+        this.handleScrollbarPointerDown = (axis, event) => {
+            if (!this.scrollEl)
+                return;
+            event.preventDefault();
+            this.draggingAxis = axis;
+            event.currentTarget.setPointerCapture?.(event.pointerId);
+            this.scrollToPointerPosition(axis, event);
+        };
+        this.handleScrollbarPointerMove = (axis, event) => {
+            if (this.draggingAxis !== axis)
+                return;
+            event.preventDefault();
+            this.scrollToPointerPosition(axis, event);
+        };
+        this.handleScrollbarPointerUp = (event) => {
+            this.draggingAxis = null;
+            event.currentTarget.releasePointerCapture?.(event.pointerId);
+        };
+        this.scrollToPointerPosition = (axis, event) => {
+            if (!this.scrollEl)
+                return;
+            const track = event.currentTarget;
+            const rect = track.getBoundingClientRect();
+            if (axis === 'horizontal') {
+                const ratio = rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0;
+                const clampedRatio = Math.max(0, Math.min(1, ratio));
+                const maxScroll = this.scrollEl.scrollWidth - this.scrollEl.clientWidth;
+                this.scrollEl.scrollLeft = clampedRatio * maxScroll;
+            }
+            else {
+                const ratio = rect.height > 0 ? (event.clientY - rect.top) / rect.height : 0;
+                const clampedRatio = Math.max(0, Math.min(1, ratio));
+                const maxScroll = this.scrollEl.scrollHeight - this.scrollEl.clientHeight;
+                this.scrollEl.scrollTop = clampedRatio * maxScroll;
+            }
+        };
+    }
+    componentDidLoad() {
+        if (typeof requestAnimationFrame !== 'undefined') {
+            requestAnimationFrame(() => {
+                this.updateScrollState();
+            });
+        }
+        else {
+            this.updateScrollState();
+        }
+        if (typeof ResizeObserver !== 'undefined' && this.scrollEl) {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.updateScrollState();
+            });
+            this.resizeObserver.observe(this.scrollEl);
+            const table = this.scrollEl.querySelector('table');
+            if (table) {
+                this.resizeObserver.observe(table);
+            }
+        }
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', this.updateScrollState);
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = undefined;
+        }
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.updateScrollState);
+        }
+    }
+    getHorizontalThumbStyle() {
+        const { progress, thumbSize } = this.scrollState.horizontal;
+        const maxLeft = 100 - thumbSize;
+        return {
+            left: `${progress * maxLeft}%`,
+            width: `${thumbSize}%`,
+        };
+    }
+    getVerticalThumbStyle() {
+        const { progress, thumbSize } = this.scrollState.vertical;
+        const maxTop = 100 - thumbSize;
+        return {
+            top: `${progress * maxTop}%`,
+            height: `${thumbSize}%`,
+        };
+    }
+    render() {
+        const { horizontal, vertical } = this.scrollState;
+        const classes = {
+            'table-wrapper': true,
+            'table-wrapper--striped': this.striped,
+            'table-wrapper--bordered': this.bordered,
+            'table-wrapper--compact': this.compact,
+            'table-wrapper--sticky-header': this.stickyHeader,
+            'table-wrapper--has-v-scroll': vertical.show,
+            'table-wrapper--has-h-scroll': horizontal.show,
+        };
+        const scrollStyle = {};
+        if (this.maxHeight) {
+            scrollStyle.maxHeight = this.maxHeight;
+        }
+        else if (this.stickyHeader) {
+            scrollStyle.maxHeight = '400px';
+        }
+        return (index.h(index.Host, { key: '1b9df6f9bd73dacf6caa2293fd7c527b98fe0954' }, index.h("div", { key: '95d7aa4919d72218ba7c5c4b81713653a8f67eae', class: classes }, index.h("div", { key: '6c9f0456deb850692f6b5d7719d2ec95d5347f19', class: "table-wrapper__viewport" }, index.h("div", { key: '99f1d035c07164976616875fc346dafd5c894b1b', class: "table-wrapper__scroll", ref: (el) => (this.scrollEl = el), onScroll: this.handleScroll, style: scrollStyle }, index.h("slot", { key: '3a4d653febf955c5dfe720f573486e999552bb3b' })), vertical.show && (index.h("div", { key: '4935b4be60a49c5bdc94b5a9925d2f39e4ec87c3', class: "table-wrapper__scrollbar table-wrapper__scrollbar--v", role: "scrollbar", "aria-orientation": "vertical", "aria-label": "Vertical scroll", "aria-valuenow": Math.round(vertical.progress * 100), "aria-valuemin": 0, "aria-valuemax": 100, tabIndex: 0, onPointerDown: (e) => this.handleScrollbarPointerDown('vertical', e), onPointerMove: (e) => this.handleScrollbarPointerMove('vertical', e), onPointerUp: this.handleScrollbarPointerUp, onPointerCancel: this.handleScrollbarPointerUp }, index.h("div", { key: '837636ab6d9b71212a58253ac602174f5e2a8025', class: "table-wrapper__scrollbar-track table-wrapper__scrollbar-track--v" }, index.h("div", { key: '1530e0fdafc475bd46e4f91f700b21a17d59bde0', class: "table-wrapper__scrollbar-thumb table-wrapper__scrollbar-thumb--v", style: this.getVerticalThumbStyle() }))))), horizontal.show && (index.h("div", { key: '39527a5006e17f5f3d69442b1823e0c28be07507', class: "table-wrapper__scrollbar table-wrapper__scrollbar--h", role: "scrollbar", "aria-orientation": "horizontal", "aria-label": "Horizontal scroll", "aria-valuenow": Math.round(horizontal.progress * 100), "aria-valuemin": 0, "aria-valuemax": 100, tabIndex: 0, onPointerDown: (e) => this.handleScrollbarPointerDown('horizontal', e), onPointerMove: (e) => this.handleScrollbarPointerMove('horizontal', e), onPointerUp: this.handleScrollbarPointerUp, onPointerCancel: this.handleScrollbarPointerUp }, index.h("div", { key: '1a984fa28fe136b38991efd3ff3b2713625a498d', class: "table-wrapper__scrollbar-track table-wrapper__scrollbar-track--h" }, index.h("div", { key: '6b39a8b99d961bbc65e139f9660adef381757f4b', class: "table-wrapper__scrollbar-thumb table-wrapper__scrollbar-thumb--h", style: this.getHorizontalThumbStyle() })))))));
+    }
+};
+AfTable.style = afTableCss();
+
+exports.af_table = AfTable;

package/dist/cjs/af-tag.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afTagCss = ":host{display:inline-flex;flex-shrink:0}.tag{display:inline-flex;align-items:center;overflow:hidden;border-radius:4px;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-book, 500);line-height:1;text-decoration:none;transition:background-color 0.15s ease, box-shadow 0.15s ease;cursor:default}a.tag{cursor:pointer}.tag.variant-default{background-color:var(--af-tag-bg, var(--colour-brand-soft-clay, #b09670));color:var(--af-tag-text, var(--colour-brand-inkwell, #14343b))}.tag.variant-default:hover{background-color:var(--af-tag-bg-hover, var(--colour-tints-soft-clay-400, #c0ab8d))}.tag.variant-inkwell{background-color:var(--colour-brand-inkwell, #14343b);color:var(--colour-brand-white, #ffffff)}.tag.variant-inkwell:hover{background-color:var(--colour-tints-inkwell-500, #1e4a48)}.tag.variant-white{background-color:var(--colour-brand-white, #ffffff);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-white:hover{background-color:var(--colour-tints-mist-green-100, #e1eee1)}.tag.variant-soft-clay{background-color:var(--colour-brand-soft-clay, #b09670);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-soft-clay:hover{background-color:var(--colour-tints-soft-clay-400, #c0ab8d)}.tag.variant-mist-green{background-color:var(--colour-brand-mist-green, #c6d5d1);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-mist-green:hover{background-color:var(--colour-tints-mist-green-200, #d2e8e3)}.tag.size-x-small{padding:6px 10px;font-size:var(--font-size-label-tag, 14px)}.tag.size-small{padding:8px 12px;font-size:var(--font-size-label-tag, 14px)}.tag.size-large{padding:12px 16px;font-size:var(--font-size-body-large, 18px)}.tag:focus{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}.tag:focus-visible{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}";
+const afTagCss = () => `:host{display:inline-flex;flex-shrink:0}.tag{display:inline-flex;align-items:center;overflow:hidden;border-radius:4px;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-book, 500);line-height:1;text-decoration:none;transition:background-color 0.15s ease, box-shadow 0.15s ease;cursor:default}a.tag{cursor:pointer}.tag.variant-default{background-color:var(--af-tag-bg, var(--colour-brand-soft-clay, #b09670));color:var(--af-tag-text, var(--colour-brand-inkwell, #14343b))}.tag.variant-default:hover{background-color:var(--af-tag-bg-hover, var(--colour-tints-soft-clay-400, #c0ab8d))}.tag.variant-inkwell{background-color:var(--colour-brand-inkwell, #14343b);color:var(--colour-brand-white, #ffffff)}.tag.variant-inkwell:hover{background-color:var(--colour-tints-inkwell-500, #1e4a48)}.tag.variant-white{background-color:var(--colour-brand-white, #ffffff);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-white:hover{background-color:var(--colour-tints-mist-green-100, #e1eee1)}.tag.variant-soft-clay{background-color:var(--colour-brand-soft-clay, #b09670);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-soft-clay:hover{background-color:var(--colour-tints-soft-clay-400, #c0ab8d)}.tag.variant-mist-green{background-color:var(--colour-brand-mist-green, #c6d5d1);color:var(--colour-brand-inkwell, #14343b)}.tag.variant-mist-green:hover{background-color:var(--colour-tints-mist-green-200, #d2e8e3)}.tag.size-x-small{padding:6px 10px;font-size:var(--font-size-label-tag, 14px)}.tag.size-small{padding:8px 12px;font-size:var(--font-size-label-tag, 14px)}.tag.size-large{padding:12px 16px;font-size:var(--font-size-body-large, 18px)}.tag:focus{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),     0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}.tag:focus-visible{outline:none;box-shadow:0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),     0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b))}`;
 
 const AfTag = class {
     constructor(hostRef) {
@@ -30,7 +30,6 @@ const AfTag = class {
             }, ...linkProps }, index.h("slot", { key: 'a259918d262801ee8f005374ee2517535bcbd6f8' }))));
     }
 };
-AfTag.style = afTagCss;
+AfTag.style = afTagCss();
 
 exports.af_tag = AfTag;
-//# sourceMappingURL=af-tag.entry.cjs.js.map