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

@affinda/wc 0.0.25 → 0.0.27

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 (910) hide show

package/dist/cjs/af-section.cjs.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-C1ry3YPK.js');
+var index = require('./index-BKMHxS4K.js');
-const afSectionCss = () => `.sc-af-section-h{display:block;width:100%}.section.sc-af-section{width:100%;position:relative}.padding-none.sc-af-section{padding:0}.padding-tight.sc-af-section{padding:48px 0}.padding-default.sc-af-section{padding:96px 0}.padding-loose.sc-af-section{padding:120px 0 96px}.theme-white.sc-af-section{background-color:var(--colour-brand-white, #FFFFFF);--af-background-base:var(--colour-brand-white, #FFFFFF);--af-background-base-hover:var(--colour-mistgreen-100, #f4f7f6);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-mistgreen-200, #e8eeed);--af-background-level-1-hover:var(--colour-mistgreen-300, #dde6e3);--af-background-border-subtle:var(--colour-mistgreen-200, #e8eeed);--af-background-border-default:var(--colour-mistgreen-400, #d1ddda);--af-background-border-heavy:var(--colour-mistgreen-500, #c6d5d1);--af-background-border-active:var(--colour-softclay-800, #8a7049);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-text:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-icon:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-200, #e8ebeb);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-inkwell.sc-af-section{background-color:var(--colour-brand-inkwell, #14343B);--af-background-base:var(--colour-brand-inkwell, #14343b);--af-background-base-hover:var(--colour-inkwell-600, #102a2f);--af-background-contrast:var(--colour-inkwell-700, #102a2f);--af-background-level-1:var(--colour-inkwell-450, #203e45);--af-background-level-1-hover:var(--colour-inkwell-400, #2b484f);--af-background-border-subtle:var(--colour-inkwell-450, #203e45);--af-background-border-default:var(--colour-inkwell-400, #2b484f);--af-background-border-heavy:var(--colour-inkwell-700, #102a2f);--af-background-border-active:var(--colour-brand-ice, #a6fffb);--af-background-icon-default:var(--colour-brand-white, #ffffff);--af-background-icon-accent:var(--colour-brand-ice, #a6fffb);--af-typography-heading-primary:var(--colour-brand-mist-green, #c6d5d1);--af-typography-heading-secondary:var(--colour-brand-white, #ffffff);--af-typography-body-dark:var(--colour-brand-white, #ffffff);--af-typography-body-default:var(--colour-inkwell-100, #d0d6d8);--af-typography-body-subtle:var(--colour-inkwell-200, #a1aeb1);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-icon:var(--colour-brand-white, #ffffff);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(255, 255, 255, 0.08);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff);--af-button-tertiary-text:var(--colour-brand-white, #ffffff);--af-button-tertiary-icon:var(--colour-brand-white, #ffffff);--af-button-tertiary-stroke:var(--colour-brand-ice, #A6FFFB);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-inkwell-450, #203e45);--af-input-bg-hover:var(--colour-inkwell-400, #2b484f);--af-input-bg-disabled:var(--colour-inkwell-600, #102a2f);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--colour-brand-ice, #a6fffb);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--colour-brand-ice, #a6fffb);--af-form-control-bg:var(--colour-inkwell-450, #203e45);--af-form-control-bg-checked:var(--colour-brand-mist-green, #c6d5d1);--af-form-control-bg-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-bg-checked-disabled:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke:var(--colour-inkwell-350, #60767b);--af-form-control-stroke-hover:var(--colour-brand-white, #ffffff);--af-form-control-stroke-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-icon:var(--colour-brand-inkwell, #14343b);--af-form-control-label:var(--colour-brand-white, #ffffff)}.theme-mist-green.sc-af-section{background-color:var(--colour-brand-mist-green, #C6D5D1);--af-background-base:var(--colour-brand-mist-green, #c6d5d1);--af-background-base-hover:var(--colour-mistgreen-600, #b2c0bc);--af-background-contrast:var(--colour-brand-soft-clay, #b09670);--af-background-level-1:var(--colour-mistgreen-300, #dde6e3);--af-background-level-1-hover:var(--colour-mistgreen-400, #d1ddda);--af-background-border-subtle:var(--colour-mistgreen-600, #b2c0bc);--af-background-border-default:var(--colour-mistgreen-700, #9eaaa7);--af-background-border-heavy:var(--colour-mistgreen-700, #9eaaa7);--af-background-border-active:var(--colour-softclay-800, #8a7049);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-text:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-icon:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-300, #dde6e3);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-600, #b2c0bc);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-soft-clay.sc-af-section{background-color:var(--colour-softclay-400, #c0ab8d);--af-background-base:var(--colour-softclay-400, #c0ab8d);--af-background-base-hover:var(--colour-softclay-500, #b09670);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-softclay-500, #b09670);--af-background-level-1-hover:var(--colour-softclay-600, #9e8765);--af-background-border-subtle:var(--colour-softclay-600, #9e8765);--af-background-border-default:var(--colour-softclay-700, #8d785a);--af-background-border-heavy:var(--colour-brand-inkwell, #14343b);--af-background-border-active:var(--colour-brand-ice, #a6fffb);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-text:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-icon:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-stroke:var(--colour-brand-inkwell, #14343b);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-softclay-300, #d0c1a8);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-softclay-700, #8d785a);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-softclay-600, #9e8765);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-white-ivory.sc-af-section{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-background-base:var(--colour-brand-ivory-paper, #fff9ee);--af-background-base-hover:var(--colour-ivory-100, #fff5e0);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-ivory-200, #ffefcc);--af-background-level-1-hover:var(--colour-ivory-300, #ffe9b8);--af-background-border-subtle:var(--colour-ivory-200, #ffefcc);--af-background-border-default:var(--colour-ivory-400, #ffe3a3);--af-background-border-heavy:var(--colour-brand-soft-clay, #b09670);--af-background-border-active:var(--colour-brand-soft-clay, #b09670);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-text:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-icon:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-stroke:var(--colour-brand-soft-clay, #b09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-ivory-100, #fff5e0);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-ivory-200, #ffefcc);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-ivory-400, #ffe3a3);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-ivory-300, #ffe9b8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}@media (max-width: 768px){.padding-tight.sc-af-section{padding:32px 0}.padding-default.sc-af-section{padding:64px 0}.padding-loose.sc-af-section{padding:80px 0 64px}}`;
+const afSectionCss = ".sc-af-section-h{display:block;width:100%}.section.sc-af-section{width:100%;position:relative}.padding-none.sc-af-section{padding:0}.padding-tight.sc-af-section{padding:48px 0}.padding-default.sc-af-section{padding:96px 0}.padding-loose.sc-af-section{padding:120px 0 96px}.theme-white.sc-af-section{background-color:var(--colour-brand-white, #FFFFFF);--af-background-base:var(--colour-brand-white, #FFFFFF);--af-background-base-hover:var(--colour-mistgreen-100, #f4f7f6);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-mistgreen-200, #e8eeed);--af-background-level-1-hover:var(--colour-mistgreen-300, #dde6e3);--af-background-border-subtle:var(--colour-mistgreen-200, #e8eeed);--af-background-border-default:var(--colour-mistgreen-400, #d1ddda);--af-background-border-heavy:var(--colour-mistgreen-500, #c6d5d1);--af-background-border-active:var(--colour-softclay-800, #8a7049);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-200, #e8ebeb);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-inkwell.sc-af-section{background-color:var(--colour-brand-inkwell, #14343B);--af-background-base:var(--colour-brand-inkwell, #14343b);--af-background-base-hover:var(--colour-inkwell-600, #102a2f);--af-background-contrast:var(--colour-inkwell-700, #102a2f);--af-background-level-1:var(--colour-inkwell-450, #203e45);--af-background-level-1-hover:var(--colour-inkwell-400, #2b484f);--af-background-border-subtle:var(--colour-inkwell-450, #203e45);--af-background-border-default:var(--colour-inkwell-400, #2b484f);--af-background-border-heavy:var(--colour-inkwell-700, #102a2f);--af-background-border-active:var(--colour-brand-ice, #a6fffb);--af-background-icon-default:var(--colour-brand-white, #ffffff);--af-background-icon-accent:var(--colour-brand-ice, #a6fffb);--af-typography-heading-primary:var(--colour-brand-mist-green, #c6d5d1);--af-typography-heading-secondary:var(--colour-brand-white, #ffffff);--af-typography-body-dark:var(--colour-brand-white, #ffffff);--af-typography-body-default:var(--colour-inkwell-100, #d0d6d8);--af-typography-body-subtle:var(--colour-inkwell-200, #a1aeb1);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-icon:var(--colour-brand-white, #ffffff);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(255, 255, 255, 0.08);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff);--af-button-ghost-text:var(--colour-brand-white, #ffffff);--af-button-ghost-icon:var(--colour-brand-white, #ffffff);--af-button-ghost-stroke:var(--colour-brand-ice, #A6FFFB);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-inkwell-450, #203e45);--af-input-bg-hover:var(--colour-inkwell-400, #2b484f);--af-input-bg-disabled:var(--colour-inkwell-600, #102a2f);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--colour-brand-ice, #a6fffb);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--colour-brand-ice, #a6fffb);--af-form-control-bg:var(--colour-inkwell-450, #203e45);--af-form-control-bg-checked:var(--colour-brand-mist-green, #c6d5d1);--af-form-control-bg-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-bg-checked-disabled:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke:var(--colour-inkwell-350, #60767b);--af-form-control-stroke-hover:var(--colour-brand-white, #ffffff);--af-form-control-stroke-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-icon:var(--colour-brand-inkwell, #14343b);--af-form-control-label:var(--colour-brand-white, #ffffff)}.theme-mist-green.sc-af-section{background-color:var(--colour-brand-mist-green, #C6D5D1);--af-background-base:var(--colour-brand-mist-green, #c6d5d1);--af-background-base-hover:var(--colour-mistgreen-600, #b2c0bc);--af-background-contrast:var(--colour-brand-soft-clay, #b09670);--af-background-level-1:var(--colour-mistgreen-300, #dde6e3);--af-background-level-1-hover:var(--colour-mistgreen-400, #d1ddda);--af-background-border-subtle:var(--colour-mistgreen-600, #b2c0bc);--af-background-border-default:var(--colour-mistgreen-700, #9eaaa7);--af-background-border-heavy:var(--colour-mistgreen-700, #9eaaa7);--af-background-border-active:var(--colour-softclay-800, #8a7049);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-300, #dde6e3);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-600, #b2c0bc);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-soft-clay.sc-af-section{background-color:var(--colour-softclay-400, #c0ab8d);--af-background-base:var(--colour-softclay-400, #c0ab8d);--af-background-base-hover:var(--colour-softclay-500, #b09670);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-softclay-500, #b09670);--af-background-level-1-hover:var(--colour-softclay-600, #9e8765);--af-background-border-subtle:var(--colour-softclay-600, #9e8765);--af-background-border-default:var(--colour-softclay-700, #8d785a);--af-background-border-heavy:var(--colour-brand-inkwell, #14343b);--af-background-border-active:var(--colour-brand-ice, #a6fffb);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-inkwell, #14343b);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-softclay-300, #d0c1a8);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-softclay-700, #8d785a);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-softclay-600, #9e8765);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.theme-white-ivory.sc-af-section{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-background-base:var(--colour-brand-ivory-paper, #fff9ee);--af-background-base-hover:var(--colour-ivory-100, #fff5e0);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-ivory-200, #ffefcc);--af-background-level-1-hover:var(--colour-ivory-300, #ffe9b8);--af-background-border-subtle:var(--colour-ivory-200, #ffefcc);--af-background-border-default:var(--colour-ivory-400, #ffe3a3);--af-background-border-heavy:var(--colour-brand-soft-clay, #b09670);--af-background-border-active:var(--colour-brand-soft-clay, #b09670);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #b09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-ivory-100, #fff5e0);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-ivory-200, #ffefcc);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-ivory-400, #ffe3a3);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-ivory-300, #ffe9b8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}@media (max-width: 768px){.padding-tight.sc-af-section{padding:32px 0}.padding-default.sc-af-section{padding:64px 0}.padding-loose.sc-af-section{padding:80px 0 64px}}";
 const AfSection = class {
     constructor(hostRef) {
@@ -15,10 +15,11 @@ const AfSection = class {
         this.container = true;
     }
     render() {
-        const content = index.h("slot", { key: 'ae8f8342af2711fb23030adbd27d08ce89578ecb' });
-        return (index.h(index.Host, { key: 'bc6fba7cc81e35662dfb68621021136065b6e198' }, index.h("div", { key: '46d1700bb966cafb88a78ecc750d558b16942e79', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (index.h("af-container", null, content)) : content)));
+        const content = index.h("slot", { key: '9a5e38a56170b65a8bc88191fef5cfd0c7d37cda' });
+        return (index.h(index.Host, { key: '66fa1e6000cebdf1fa4ea850156ff54ec55f5952' }, index.h("div", { key: '883a3f086eab3b120afed962b2fff8986aaf0b25', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (index.h("af-container", null, content)) : content)));
     }
 };
-AfSection.style = afSectionCss();
+AfSection.style = afSectionCss;
 exports.af_section = AfSection;
+//# sourceMappingURL=af-section.entry.cjs.js.map

package/dist/cjs/af-section.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-section.entry.cjs.js","sources":["src/components/af-section/af-section.css?tag=af-section&encapsulation=scoped","src/components/af-section/af-section.tsx"],"sourcesContent":["/**\n * Section Component Styles\n * \n * Provides themed containers with proper spacing.\n * Theme classes set CSS custom properties that child components consume.\n */\n\n:host {\n display: block;\n width: 100%;\n}\n\n.section {\n width: 100%;\n position: relative;\n}\n\n/* Padding variants */\n.padding-none {\n padding: 0;\n}\n\n.padding-tight {\n padding: 48px 0;\n}\n\n.padding-default {\n padding: 96px 0;\n}\n\n.padding-loose {\n padding: 120px 0 96px;\n}\n\n/* ==========================================================================\n WHITE THEME\n ========================================================================== */\n\n.theme-white {\n background-color: var(--colour-brand-white, #FFFFFF);\n \n /* Background tokens */\n --af-background-base: var(--colour-brand-white, #FFFFFF);\n --af-background-base-hover: var(--colour-mistgreen-100, #f4f7f6);\n --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n --af-background-level-1-hover: var(--colour-mistgreen-300, #dde6e3);\n --af-background-border-subtle: var(--colour-mistgreen-200, #e8eeed);\n --af-background-border-default: var(--colour-mistgreen-400, #d1ddda);\n --af-background-border-heavy: var(--colour-mistgreen-500, #c6d5d1);\n --af-background-border-active: var(--colour-softclay-800, #8a7049);\n --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n \n /* Typography tokens */\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n \n /* Button - Primary */\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n \n /* Button - Secondary */\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-bg: transparent;\n --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n \n /* Button - Tertiary */\n --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);\n --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-ghost-stroke: var(--colour-brand-soft-clay, #B09670);\n \n /* Input tokens */\n --af-input-label: var(--af-typography-body-dark);\n --af-input-description: var(--af-typography-body-default);\n --af-input-text: var(--af-typography-body-dark);\n --af-input-placeholder: var(--af-typography-body-subtle);\n --af-input-icon: var(--af-background-icon-default);\n --af-input-bg: var(--colour-brand-white, #ffffff);\n --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n --af-input-bg-disabled: var(--af-background-level-1);\n --af-input-border: var(--af-background-border-default);\n --af-input-border-hover: var(--af-background-border-heavy);\n --af-input-border-active: var(--af-typography-body-dark);\n --af-input-border-error: var(--colour-error, #be292a);\n --af-input-error: var(--colour-error, #be292a);\n --af-input-focus-ring: var(--af-typography-body-dark);\n \n /* Form control tokens (checkbox, radio, switch) */\n --af-form-control-bg: var(--colour-brand-white, #ffffff);\n --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n --af-form-control-bg-disabled: var(--colour-mistgreen-200, #e8ebeb);\n --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n --af-form-control-stroke: var(--colour-mistgreen-500, #d0d6d8);\n --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n --af-form-control-stroke-disabled: var(--colour-mistgreen-500, #d0d6d8);\n --af-form-control-icon: var(--colour-brand-white, #ffffff);\n --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n INKWELL THEME (Dark)\n ========================================================================== */\n\n.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n \n /* Background tokens */\n --af-background-base: var(--colour-brand-inkwell, #14343b);\n --af-background-base-hover: var(--colour-inkwell-600, #102a2f);\n --af-background-contrast: var(--colour-inkwell-700, #102a2f);\n --af-background-level-1: var(--colour-inkwell-450, #203e45);\n --af-background-level-1-hover: var(--colour-inkwell-400, #2b484f);\n --af-background-border-subtle: var(--colour-inkwell-450, #203e45);\n --af-background-border-default: var(--colour-inkwell-400, #2b484f);\n --af-background-border-heavy: var(--colour-inkwell-700, #102a2f);\n --af-background-border-active: var(--colour-brand-ice, #a6fffb);\n --af-background-icon-default: var(--colour-brand-white, #ffffff);\n --af-background-icon-accent: var(--colour-brand-ice, #a6fffb);\n \n /* Typography tokens */\n --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n --af-typography-heading-secondary: var(--colour-brand-white, #ffffff);\n --af-typography-body-dark: var(--colour-brand-white, #ffffff);\n --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n --af-typography-body-subtle: var(--colour-inkwell-200, #a1aeb1);\n \n /* Button - Primary */\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n \n /* Button - Secondary */\n --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n --af-button-secondary-icon: var(--colour-brand-white, #ffffff);\n --af-button-secondary-bg: transparent;\n --af-button-secondary-bg-hover: rgba(255, 255, 255, 0.08);\n --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n \n /* Button - Tertiary */\n --af-button-ghost-text: var(--colour-brand-white, #ffffff);\n --af-button-ghost-icon: var(--colour-brand-white, #ffffff);\n --af-button-ghost-stroke: var(--colour-brand-ice, #A6FFFB);\n \n /* Input tokens */\n --af-input-label: var(--af-typography-body-dark);\n --af-input-description: var(--af-typography-body-default);\n --af-input-text: var(--af-typography-body-dark);\n --af-input-placeholder: var(--af-typography-body-subtle);\n --af-input-icon: var(--af-background-icon-default);\n --af-input-bg: var(--colour-inkwell-450, #203e45);\n --af-input-bg-hover: var(--colour-inkwell-400, #2b484f);\n --af-input-bg-disabled: var(--colour-inkwell-600, #102a2f);\n --af-input-border: var(--af-background-border-default);\n --af-input-border-hover: var(--af-background-border-heavy);\n --af-input-border-active: var(--colour-brand-ice, #a6fffb);\n --af-input-border-error: var(--colour-error, #be292a);\n --af-input-error: var(--colour-error, #be292a);\n --af-input-focus-ring: var(--colour-brand-ice, #a6fffb);\n \n /* Form control tokens (checkbox, radio, switch) */\n --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n --af-form-control-label: var(--colour-brand-white, #ffffff);\n}\n\n/* ==========================================================================\n MIST-GREEN THEME\n ========================================================================== */\n\n.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #C6D5D1);\n \n /* Background tokens */\n --af-background-base: var(--colour-brand-mist-green, #c6d5d1);\n --af-background-base-hover: var(--colour-mistgreen-600, #b2c0bc);\n --af-background-contrast: var(--colour-brand-soft-clay, #b09670);\n --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n --af-background-level-1-hover: var(--colour-mistgreen-400, #d1ddda);\n --af-background-border-subtle: var(--colour-mistgreen-600, #b2c0bc);\n --af-background-border-default: var(--colour-mistgreen-700, #9eaaa7);\n --af-background-border-heavy: var(--colour-mistgreen-700, #9eaaa7);\n --af-background-border-active: var(--colour-softclay-800, #8a7049);\n --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n \n /* Typography tokens */\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n \n /* Button - Primary */\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n \n /* Button - Secondary */\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-bg: transparent;\n --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n \n /* Button - Tertiary */\n --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);\n --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-ghost-stroke: var(--colour-brand-soft-clay, #B09670);\n \n /* Input tokens */\n --af-input-label: var(--af-typography-body-dark);\n --af-input-description: var(--af-typography-body-default);\n --af-input-text: var(--af-typography-body-dark);\n --af-input-placeholder: var(--af-typography-body-subtle);\n --af-input-icon: var(--af-background-icon-default);\n --af-input-bg: var(--colour-brand-white, #ffffff);\n --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n --af-input-bg-disabled: var(--af-background-level-1);\n --af-input-border: var(--af-background-border-default);\n --af-input-border-hover: var(--af-background-border-heavy);\n --af-input-border-active: var(--af-typography-body-dark);\n --af-input-border-error: var(--colour-error, #be292a);\n --af-input-error: var(--colour-error, #be292a);\n --af-input-focus-ring: var(--af-typography-body-dark);\n \n /* Form control tokens (checkbox, radio, switch) */\n --af-form-control-bg: var(--colour-brand-white, #ffffff);\n --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n --af-form-control-bg-disabled: var(--colour-mistgreen-300, #dde6e3);\n --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n --af-form-control-stroke: var(--colour-mistgreen-700, #9eaaa7);\n --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n --af-form-control-stroke-disabled: var(--colour-mistgreen-600, #b2c0bc);\n --af-form-control-icon: var(--colour-brand-white, #ffffff);\n --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n SOFT-CLAY THEME\n ========================================================================== */\n\n.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n \n /* Background tokens */\n --af-background-base: var(--colour-softclay-400, #c0ab8d);\n --af-background-base-hover: var(--colour-softclay-500, #b09670);\n --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n --af-background-level-1: var(--colour-softclay-500, #b09670);\n --af-background-level-1-hover: var(--colour-softclay-600, #9e8765);\n --af-background-border-subtle: var(--colour-softclay-600, #9e8765);\n --af-background-border-default: var(--colour-softclay-700, #8d785a);\n --af-background-border-heavy: var(--colour-brand-inkwell, #14343b);\n --af-background-border-active: var(--colour-brand-ice, #a6fffb);\n --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n --af-background-icon-accent: var(--colour-brand-ivory-paper, #fff9ee);\n \n /* Typography tokens */\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n \n /* Button - Primary */\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n \n /* Button - Secondary */\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-bg: transparent;\n --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n \n /* Button - Tertiary */\n --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);\n --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-ghost-stroke: var(--colour-brand-inkwell, #14343b);\n \n /* Input tokens */\n --af-input-label: var(--af-typography-body-dark);\n --af-input-description: var(--af-typography-body-default);\n --af-input-text: var(--af-typography-body-dark);\n --af-input-placeholder: var(--af-typography-body-subtle);\n --af-input-icon: var(--af-background-icon-default);\n --af-input-bg: var(--colour-brand-white, #ffffff);\n --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n --af-input-bg-disabled: var(--af-background-level-1);\n --af-input-border: var(--af-background-border-default);\n --af-input-border-hover: var(--af-background-border-heavy);\n --af-input-border-active: var(--af-typography-body-dark);\n --af-input-border-error: var(--colour-error, #be292a);\n --af-input-error: var(--colour-error, #be292a);\n --af-input-focus-ring: var(--af-typography-body-dark);\n \n /* Form control tokens (checkbox, radio, switch) */\n --af-form-control-bg: var(--colour-brand-white, #ffffff);\n --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n --af-form-control-bg-disabled: var(--colour-softclay-300, #d0c1a8);\n --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n --af-form-control-stroke: var(--colour-softclay-700, #8d785a);\n --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n --af-form-control-stroke-disabled: var(--colour-softclay-600, #9e8765);\n --af-form-control-icon: var(--colour-brand-white, #ffffff);\n --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n WHITE-IVORY THEME\n ========================================================================== */\n\n.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n \n /* Background tokens */\n --af-background-base: var(--colour-brand-ivory-paper, #fff9ee);\n --af-background-base-hover: var(--colour-ivory-100, #fff5e0);\n --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n --af-background-level-1-hover: var(--colour-ivory-300, #ffe9b8);\n --af-background-border-subtle: var(--colour-ivory-200, #ffefcc);\n --af-background-border-default: var(--colour-ivory-400, #ffe3a3);\n --af-background-border-heavy: var(--colour-brand-soft-clay, #b09670);\n --af-background-border-active: var(--colour-brand-soft-clay, #b09670);\n --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n \n /* Typography tokens */\n --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n \n /* Button - Primary */\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n \n /* Button - Secondary */\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-bg: transparent;\n --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n \n /* Button - Tertiary */\n --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);\n --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n --af-button-ghost-stroke: var(--colour-brand-soft-clay, #b09670);\n \n /* Input tokens */\n --af-input-label: var(--af-typography-body-dark);\n --af-input-description: var(--af-typography-body-default);\n --af-input-text: var(--af-typography-body-dark);\n --af-input-placeholder: var(--af-typography-body-subtle);\n --af-input-icon: var(--af-background-icon-default);\n --af-input-bg: var(--colour-brand-white, #ffffff);\n --af-input-bg-hover: var(--colour-ivory-100, #fff5e0);\n --af-input-bg-disabled: var(--af-background-level-1);\n --af-input-border: var(--af-background-border-default);\n --af-input-border-hover: var(--af-background-border-heavy);\n --af-input-border-active: var(--af-typography-body-dark);\n --af-input-border-error: var(--colour-error, #be292a);\n --af-input-error: var(--colour-error, #be292a);\n --af-input-focus-ring: var(--af-typography-body-dark);\n \n /* Form control tokens (checkbox, radio, switch) */\n --af-form-control-bg: var(--colour-brand-white, #ffffff);\n --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n --af-form-control-bg-disabled: var(--colour-ivory-200, #ffefcc);\n --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n --af-form-control-stroke: var(--colour-ivory-400, #ffe3a3);\n --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n --af-form-control-stroke-disabled: var(--colour-ivory-300, #ffe9b8);\n --af-form-control-icon: var(--colour-brand-white, #ffffff);\n --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/* Mobile adjustments */\n/* mobile-only */\n@media (max-width: 768px) {\n .padding-tight {\n padding: 32px 0;\n }\n \n .padding-default {\n padding: 64px 0;\n }\n \n .padding-loose {\n padding: 80px 0 64px;\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds.\n * Sets theme context for all child components via CSS custom properties.\n */\n@Component({\n tag: 'af-section',\n styleUrl: 'af-section.css',\n shadow: false,\n scoped: true,\n})\nexport class AfSection {\n /** Padding variant */\n @Prop() padding: 'none' | 'tight' | 'default' | 'loose' = 'default';\n \n /** Theme - sets background color and provides theme context to children */\n @Prop() theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory' = 'white';\n \n /** Whether to include a Container wrapper */\n @Prop() container: boolean = true;\n\n render() {\n const content = <slot></slot>;\n \n return (\n <Host>\n <div class={`section padding-${this.padding} theme-${this.theme}`}>\n {this.container ? (\n <af-container>{content}</af-container>\n ) : content}\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,olgBAAolgB;;MCY5lgB,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAA2C,SAAS;;AAG3D,QAAA,IAAK,CAAA,KAAA,GAAqE,OAAO;;AAGjF,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAelC;IAbC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAGA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa;QAE7B,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAmB,gBAAA,EAAA,IAAI,CAAC,OAAO,CAAU,OAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAC9D,IAAI,CAAC,SAAS,IACbA,OAAe,CAAA,cAAA,EAAA,IAAA,EAAA,OAAO,CAAgB,IACpC,OAAO,CACP,CACD;;;;;;;"}

package/dist/cjs/af-show.cjs.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-C1ry3YPK.js');
+var index = require('./index-BKMHxS4K.js');
-const afShowCss = () => `:host{display:contents}:host([hidden]){display:none !important}:host(.show-above-sm){display:none}@media (min-width: 480px){:host(.show-above-sm){display:contents}}:host(.show-above-md){display:none}@media (min-width: 768px){:host(.show-above-md){display:contents}}:host(.show-above-lg){display:none}@media (min-width: 1024px){:host(.show-above-lg){display:contents}}:host(.show-above-xl){display:none}@media (min-width: 1440px){:host(.show-above-xl){display:contents}}@media (min-width: 480px){:host(.show-below-sm){display:none}}@media (min-width: 768px){:host(.show-below-md){display:none}}@media (min-width: 1024px){:host(.show-below-lg){display:none}}@media (min-width: 1440px){:host(.show-below-xl){display:none}}`;
+const afShowCss = ":host{display:contents}:host([hidden]){display:none !important}:host(.show-above-sm){display:none}@media (min-width: 480px){:host(.show-above-sm){display:contents}}:host(.show-above-md){display:none}@media (min-width: 768px){:host(.show-above-md){display:contents}}:host(.show-above-lg){display:none}@media (min-width: 1024px){:host(.show-above-lg){display:contents}}:host(.show-above-xl){display:none}@media (min-width: 1440px){:host(.show-above-xl){display:contents}}@media (min-width: 480px){:host(.show-below-sm){display:none}}@media (min-width: 768px){:host(.show-below-md){display:none}}@media (min-width: 1024px){:host(.show-below-lg){display:none}}@media (min-width: 1440px){:host(.show-below-xl){display:none}}";
 const AfShow = class {
     constructor(hostRef) {
@@ -14,9 +14,10 @@ const AfShow = class {
             [`show-above-${this.above}`]: !!this.above,
             [`show-below-${this.below}`]: !!this.below,
         };
-        return (index.h(index.Host, { key: 'b88e3f6dedeb0a8cc4f69b3c9915a4fb0a115df7', class: classes }, index.h("slot", { key: '55f89874b70bbcc636e615556f11e99baeafad73' })));
+        return (index.h(index.Host, { key: '0e1fa54d81a3a30c5547bd08f83bf43bf357038f', class: classes }, index.h("slot", { key: '52af3932d49d463f0d807bb7654ecbff02f7db8e' })));
     }
 };
-AfShow.style = afShowCss();
+AfShow.style = afShowCss;
 exports.af_show = AfShow;
+//# sourceMappingURL=af-show.entry.cjs.js.map

package/dist/cjs/af-show.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-show.entry.cjs.js","sources":["src/components/af-show/af-show.css?tag=af-show&encapsulation=shadow","src/components/af-show/af-show.tsx"],"sourcesContent":[":host {\n display: contents;\n}\n\n:host([hidden]) {\n display: none !important;\n}\n\n/* Show above breakpoints (hidden below) */\n/* sm: 480px (small) */\n:host(.show-above-sm) {\n display: none;\n}\n@media (min-width: 480px) {\n :host(.show-above-sm) {\n display: contents;\n }\n}\n\n/* md: 768px */\n:host(.show-above-md) {\n display: none;\n}\n@media (min-width: 768px) {\n :host(.show-above-md) {\n display: contents;\n }\n}\n\n/* lg: 1024px */\n:host(.show-above-lg) {\n display: none;\n}\n@media (min-width: 1024px) {\n :host(.show-above-lg) {\n display: contents;\n }\n}\n\n/* xl: 1440px */\n:host(.show-above-xl) {\n display: none;\n}\n@media (min-width: 1440px) {\n :host(.show-above-xl) {\n display: contents;\n }\n}\n\n/* Show below breakpoints (hidden at or above) */\n/* sm: 480px (small) */\n@media (min-width: 480px) {\n :host(.show-below-sm) {\n display: none;\n }\n}\n\n/* md: 768px */\n@media (min-width: 768px) {\n :host(.show-below-md) {\n display: none;\n }\n}\n\n/* lg: 1024px */\n@media (min-width: 1024px) {\n :host(.show-below-lg) {\n display: none;\n }\n}\n\n/* xl: 1440px */\n@media (min-width: 1440px) {\n :host(.show-below-xl) {\n display: none;\n }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Breakpoint = 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Show component for responsive visibility control.\n * Show or hide content based on viewport breakpoints.\n *\n * Breakpoints (from tokens):\n * - sm: 375px\n * - md: 768px\n * - lg: 1024px\n * - xl: 1440px\n *\n * @slot - Content to show/hide\n */\n@Component({\n tag: 'af-show',\n styleUrl: 'af-show.css',\n shadow: true,\n})\nexport class AfShow {\n /**\n * Show content only when viewport is at or above this breakpoint.\n * Content is hidden below this breakpoint.\n */\n @Prop() above?: Breakpoint;\n\n /**\n * Show content only when viewport is below this breakpoint.\n * Content is hidden at or above this breakpoint.\n */\n @Prop() below?: Breakpoint;\n\n render() {\n const classes = {\n 'show': true,\n [`show-above-${this.above}`]: !!this.above,\n [`show-below-${this.below}`]: !!this.below,\n };\n\n return (\n <Host class={classes}>\n <slot></slot>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,itBAAitB;;MCqBttB,MAAM,GAAA,MAAA;;;;IAajB,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,MAAM,EAAE,IAAI;YACZ,CAAC,CAAA,WAAA,EAAc,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;YAC1C,CAAC,CAAA,WAAA,EAAc,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;SAC3C;QAED,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EAClBD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

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

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-C1ry3YPK.js');
+var index = require('./index-BKMHxS4K.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) {
@@ -31,9 +31,10 @@ const AfSocialLink = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'd8875f8b62e560cd11e71f6c6b2baf219aef96d2' }, index.h("a", { key: 'a6e5c064945372150306b6aeb294b13659b565f4', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
+        return (index.h(index.Host, { key: '9cd9c78a4b964d2a43f9d85ff528abb63eea31e2' }, index.h("a", { key: '2fc0c44720aa6f58229a5ad285269ab7b73c07cc', 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-social-link.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-social-link.entry.cjs.js","sources":["src/components/af-social-link/af-social-link.css?tag=af-social-link&encapsulation=scoped","src/components/af-social-link/af-social-link.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.social-link {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border: 1px solid rgba(198, 213, 209, 0.3);\n border-radius: 50%;\n color: var(--colour-tints-mistGreen-200, #C6D5D1);\n transition: all 0.2s ease;\n}\n\n.social-link:hover {\n background-color: rgba(198, 213, 209, 0.1);\n border-color: rgba(198, 213, 209, 0.5);\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Social media link component\n * Circular bordered icon link for social media profiles\n */\n@Component({\n tag: 'af-social-link',\n styleUrl: 'af-social-link.css',\n shadow: false,\n scoped: true,\n})\nexport class AfSocialLink {\n /** Link URL */\n @Prop() href: string = '#';\n\n /** Accessible label for the link */\n @Prop() label: string = '';\n\n /** Icon type: 'linkedin', 'youtube', 'github', 'twitter', 'facebook', or 'custom' */\n @Prop() icon: 'linkedin' | 'youtube' | 'github' | 'twitter' | 'facebook' | 'custom' = 'custom';\n\n private renderIcon() {\n switch (this.icon) {\n case 'linkedin':\n return (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <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\"/>\n <rect x=\"2\" y=\"9\" width=\"4\" height=\"12\"/>\n <circle cx=\"4\" cy=\"4\" r=\"2\"/>\n </svg>\n );\n case 'youtube':\n return (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <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\"/>\n <polygon points=\"9.75,15.02 15.5,11.75 9.75,8.48\" fill=\"currentColor\" stroke=\"none\"/>\n </svg>\n );\n case 'github':\n return (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path d=\"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22\"/>\n </svg>\n );\n case 'twitter':\n return (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path d=\"M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z\"/>\n </svg>\n );\n case 'facebook':\n return (\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"/>\n </svg>\n );\n default:\n return <slot name=\"icon\"></slot>;\n }\n }\n\n render() {\n return (\n <Host>\n <a \n href={this.href} \n target=\"_blank\" \n rel=\"noopener noreferrer\" \n class=\"social-link\" \n aria-label={this.label}\n >\n {this.renderIcon()}\n </a>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,oZAAoZ;;MCY/Z,YAAY,GAAA,MAAA;AANzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAI,CAAA,IAAA,GAAW,GAAG;;AAGlB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;;AAGlB,QAAA,IAAI,CAAA,IAAA,GAA0E,QAAQ;AAyD/F;IAvDS,UAAU,GAAA;AAChB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,UAAU;AACb,gBAAA,QACEA,iBAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,EAClGA,OAAM,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,gFAAgF,EAAE,CAAA,EAC1FA,OAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAE,CAAA,EACzCA,OAAA,CAAA,QAAA,EAAA,EAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAE,CAAA,CACzB;AAEV,YAAA,KAAK,SAAS;AACZ,gBAAA,QACEA,iBAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,EAClGA,OAAM,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,mQAAmQ,EAAE,CAAA,EAC7QA,OAAA,CAAA,SAAA,EAAA,EAAS,MAAM,EAAC,iCAAiC,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,MAAM,EAAE,CAAA,CACjF;AAEV,YAAA,KAAK,QAAQ;AACX,gBAAA,QACEA,iBAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,EAClGA,OAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,qSAAqS,EAAE,CAAA,CAC3S;AAEV,YAAA,KAAK,SAAS;AACZ,gBAAA,QACEA,iBAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,EAClGA,OAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,6KAA6K,EAAE,CAAA,CACnL;AAEV,YAAA,KAAK,UAAU;AACb,gBAAA,QACEA,iBAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,EAClGA,OAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,mEAAmE,EAAE,CAAA,CACzE;AAEV,YAAA;gBACE,OAAOA,OAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,MAAM,GAAQ;;;IAItC,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,KAAK,EAAC,aAAa,EAAA,YAAA,EACP,IAAI,CAAC,KAAK,EAAA,EAErB,IAAI,CAAC,UAAU,EAAE,CAChB,CACC;;;;;;;"}

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

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-C1ry3YPK.js');
+var index = require('./index-BKMHxS4K.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,9 +36,10 @@ const AfSpacer = class {
                 style.height = sizeValue;
             }
         }
-        return index.h(index.Host, { key: 'e3d8bff163b92ef7caf5802947556444ce2f1a48', style: style, "aria-hidden": "true" });
+        return index.h(index.Host, { key: '667181ea8f243b47e0a54fbfc5441b7551d69082', 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-spacer.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-spacer.entry.cjs.js","sources":["src/components/af-spacer/af-spacer.css?tag=af-spacer&encapsulation=shadow","src/components/af-spacer/af-spacer.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n flex-shrink: 0;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Size = '1' | '2' | '3' | '4' | '5' | '6' | '8';\n\n/**\n * Spacer component for adding fixed or flexible space between elements.\n * Use within flex or grid layouts.\n */\n@Component({\n tag: 'af-spacer',\n styleUrl: 'af-spacer.css',\n shadow: true,\n})\nexport class AfSpacer {\n /**\n * Fixed size using space tokens (1-8).\n * Maps to --space-1 through --space-8 (4px to 32px).\n * Ignored when `flex` is true.\n */\n @Prop() size?: Size;\n\n /**\n * When true, the spacer grows to fill available space (flex: 1).\n * Useful for pushing items apart in a flex container.\n */\n @Prop() flex: boolean = false;\n\n /**\n * Axis for the spacer sizing.\n * - 'horizontal': Width-based spacing\n * - 'vertical': Height-based spacing\n * - 'both': Both dimensions (square)\n *\n * Auto-detected based on parent flex direction when possible.\n */\n @Prop() axis: 'horizontal' | 'vertical' | 'both' = 'both';\n\n render() {\n const style: Record<string, string> = {};\n\n if (this.flex) {\n style.flex = '1';\n } else if (this.size) {\n const sizeValue = `var(--space-${this.size})`;\n\n if (this.axis === 'horizontal' || this.axis === 'both') {\n style.width = sizeValue;\n }\n if (this.axis === 'vertical' || this.axis === 'both') {\n style.height = sizeValue;\n }\n }\n\n return <Host style={style} aria-hidden=\"true\"></Host>;\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,uFAAuF;;MCa9F,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAaE;;;AAGG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAE7B;;;;;;;AAOG;AACK,QAAA,IAAI,CAAA,IAAA,GAAuC,MAAM;AAoB1D;IAlBC,MAAM,GAAA;QACJ,MAAM,KAAK,GAA2B,EAAE;AAExC,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,KAAK,CAAC,IAAI,GAAG,GAAG;;AACX,aAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACpB,YAAA,MAAM,SAAS,GAAG,CAAA,YAAA,EAAe,IAAI,CAAC,IAAI,GAAG;AAE7C,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACtD,gBAAA,KAAK,CAAC,KAAK,GAAG,SAAS;;AAEzB,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;AACpD,gBAAA,KAAK,CAAC,MAAM,GAAG,SAAS;;;AAI5B,QAAA,OAAOA,OAAA,CAACC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,KAAK,EAAA,aAAA,EAAc,MAAM,EAAA,CAAQ;;;;;;;"}

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

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-C1ry3YPK.js');
+var index = require('./index-BKMHxS4K.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,16 +25,17 @@ const AfSplitSection = class {
         this.container = true;
     }
     render() {
-        const content = index.h("slot", { key: 'bc307598c8f20de642f691d1bd02269cbd34738c' });
+        const content = index.h("slot", { key: 'de39e81b9bc88da7323663c248faf7a4faf20f7f' });
         // 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: 'd96957b3dc7f8daea9f3480269fde7116c587461' }, index.h("div", { key: 'f274ae8e50c5b1fa9f59b54a1bce3dbb5408a77b', 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: '4b140cb28dd9ec3dd2a5148737aada241dbbfb1d' }, index.h("div", { key: '7eeb358bbae0e98e403e39020482505248c3bb69', 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-split-section.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-split-section.entry.cjs.js","sources":["src/components/af-split-section/af-split-section.css?tag=af-split-section&encapsulation=scoped","src/components/af-split-section/af-split-section.tsx"],"sourcesContent":["/* Theme CSS custom properties are loaded globally from @affinda/css */\n\n:host {\n display: block;\n width: 100%;\n}\n\n.split-section {\n position: relative;\n width: 100%;\n /* Background is set via inline style with linear-gradient */\n}\n\n/* ==========================================================================\n Padding Variants\n ========================================================================== */\n\n.padding-none {\n padding: 0;\n}\n\n.padding-tight {\n padding: 48px 0;\n}\n\n.padding-default {\n padding: 96px 0;\n}\n\n.padding-loose {\n padding: 120px 0 96px;\n}\n\n/* ==========================================================================\n Mobile Adjustments\n ========================================================================== */\n\n/* mobile-only */\n@media (max-width: 768px) {\n .padding-tight {\n padding: 32px 0;\n }\n \n .padding-default {\n padding: 64px 0;\n }\n \n .padding-loose {\n padding: 80px 0 64px;\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Theme = 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';\n\n// Map theme names to CSS color values\nconst themeColors: Record<Theme, string> = {\n 'white': 'var(--colour-brand-white, #FFFFFF)',\n 'inkwell': 'var(--colour-brand-inkwell, #14343B)',\n 'mist-green': 'var(--colour-brand-mist-green, #C6D5D1)',\n 'soft-clay': 'var(--colour-softclay-400, #c0ab8d)',\n 'white-ivory': 'var(--colour-brand-ivory-paper, #fff9ee)',\n};\n\n/**\n * Split Section component for layouts with two-tone backgrounds.\n * Creates a vertical split with different themes for top and bottom halves.\n * Useful for content that visually spans across two themed areas.\n * \n * Uses a CSS linear-gradient for the split background effect.\n */\n@Component({\n tag: 'af-split-section',\n styleUrl: 'af-split-section.css',\n shadow: false,\n scoped: true,\n})\nexport class AfSplitSection {\n /** Theme for the top half of the section */\n @Prop() topTheme: Theme = 'mist-green';\n\n /** Theme for the bottom half of the section */\n @Prop() bottomTheme: Theme = 'white';\n\n /** Padding variant */\n @Prop() padding: 'none' | 'tight' | 'default' | 'loose' = 'default';\n\n /** Whether to include a Container wrapper */\n @Prop() container: boolean = true;\n\n render() {\n const content = <slot></slot>;\n \n // Create the split background using CSS gradient\n const topColor = themeColors[this.topTheme];\n const bottomColor = themeColors[this.bottomTheme];\n const backgroundStyle = {\n background: `linear-gradient(to bottom, ${topColor} 0%, ${topColor} 50%, ${bottomColor} 50%, ${bottomColor} 100%)`\n };\n\n return (\n <Host>\n <div\n class={`split-section padding-${this.padding} top-theme-${this.topTheme}`}\n style={backgroundStyle}\n >\n {this.container ? (\n <af-container>{content}</af-container>\n ) : content}\n </div>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,ofAAof;;ACI9gB;AACA,MAAM,WAAW,GAA0B;AACzC,IAAA,OAAO,EAAE,oCAAoC;AAC7C,IAAA,SAAS,EAAE,sCAAsC;AACjD,IAAA,YAAY,EAAE,yCAAyC;AACvD,IAAA,WAAW,EAAE,qCAAqC;AAClD,IAAA,aAAa,EAAE,0CAA0C;CAC1D;MAeY,cAAc,GAAA,MAAA;AAN3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAQ,CAAA,QAAA,GAAU,YAAY;;AAG9B,QAAA,IAAW,CAAA,WAAA,GAAU,OAAO;;AAG5B,QAAA,IAAO,CAAA,OAAA,GAA2C,SAAS;;AAG3D,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAyBlC;IAvBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAGA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa;;QAG7B,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC3C,MAAM,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC;AACjD,QAAA,MAAM,eAAe,GAAG;YACtB,UAAU,EAAE,8BAA8B,QAAQ,CAAA,KAAA,EAAQ,QAAQ,CAAS,MAAA,EAAA,WAAW,CAAS,MAAA,EAAA,WAAW,CAAQ,MAAA;SACnH;AAED,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAyB,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAc,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,EACzE,KAAK,EAAE,eAAe,EAErB,EAAA,IAAI,CAAC,SAAS,IACbA,8BAAe,OAAO,CAAgB,IACpC,OAAO,CACP,CACD;;;;;;;"}

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

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-C1ry3YPK.js');
+var index = require('./index-BKMHxS4K.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,9 +55,10 @@ const AfStack = class {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (index.h(index.Host, { key: '72e0cbdd57b5f300e1957549d225f72ae4cdc2d2', style: style }, index.h("slot", { key: '9f71bea28b78fa1fcb414e5f3e2b9f9e68d7962d' })));
+        return (index.h(index.Host, { key: '757fee5201ab0831e7dc51aa0f7dc2cad4279f95', style: style }, index.h("slot", { key: '06e94b64a308a3465e54d79e1a5ffb3758c6e626' })));
     }
 };
-AfStack.style = afStackCss();
+AfStack.style = afStackCss;
 exports.af_stack = AfStack;
+//# sourceMappingURL=af-stack.entry.cjs.js.map

package/dist/cjs/af-stack.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-stack.entry.cjs.js","sources":["src/components/af-stack/af-stack.css?tag=af-stack&encapsulation=shadow","src/components/af-stack/af-stack.tsx"],"sourcesContent":[":host {\n display: flex;\n box-sizing: border-box;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Gap = '1' | '2' | '3' | '4' | '5' | '6' | '8';\ntype Direction = 'vertical' | 'horizontal';\ntype Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\ntype Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n\n/**\n * Stack layout component for vertical or horizontal flex layouts with consistent gap spacing.\n * Uses design tokens for gap values.\n *\n * @slot - Content to stack\n */\n@Component({\n tag: 'af-stack',\n styleUrl: 'af-stack.css',\n shadow: true,\n})\nexport class AfStack {\n /**\n * Stack direction.\n * - 'vertical': Items stack top to bottom (flex-direction: column)\n * - 'horizontal': Items stack left to right (flex-direction: row)\n */\n @Prop() direction: Direction = 'vertical';\n\n /**\n * Gap between items using space tokens (1-8).\n * Maps to --space-1 through --space-8 (4px to 32px).\n */\n @Prop() gap: Gap = '4';\n\n /**\n * Align items on the cross axis.\n */\n @Prop() align: Align = 'stretch';\n\n /**\n * Justify content on the main axis.\n */\n @Prop() justify: Justify = 'start';\n\n /**\n * Whether items should wrap to the next line.\n */\n @Prop() wrap: boolean = false;\n\n render() {\n const alignMap: Record<Align, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n baseline: 'baseline',\n };\n\n const justifyMap: Record<Justify, string> = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n between: 'space-between',\n around: 'space-around',\n evenly: 'space-evenly',\n };\n\n const style = {\n display: 'flex',\n flexDirection: this.direction === 'vertical' ? 'column' : 'row',\n gap: `var(--space-${this.gap})`,\n alignItems: alignMap[this.align],\n justifyContent: justifyMap[this.justify],\n flexWrap: this.wrap ? 'wrap' : 'nowrap',\n } as Record<string, string>;\n\n return (\n <Host style={style}>\n <slot></slot>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,wEAAwE;;MCkB9E,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;AAIG;AACK,QAAA,IAAS,CAAA,SAAA,GAAc,UAAU;AAEzC;;;AAGG;AACK,QAAA,IAAG,CAAA,GAAA,GAAQ,GAAG;AAEtB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAU,SAAS;AAEhC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,OAAO;AAElC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAmC9B;IAjCC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAA0B;AACtC,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,QAAQ,EAAE,UAAU;SACrB;AAED,QAAA,MAAM,UAAU,GAA4B;AAC1C,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,eAAe;AACxB,YAAA,MAAM,EAAE,cAAc;AACtB,YAAA,MAAM,EAAE,cAAc;SACvB;AAED,QAAA,MAAM,KAAK,GAAG;AACZ,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU,GAAG,QAAQ,GAAG,KAAK;AAC/D,YAAA,GAAG,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,GAAG,CAAG,CAAA,CAAA;AAC/B,YAAA,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,YAAA,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;YACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ;SACd;QAE3B,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,KAAK,EAAA,EAChBD,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

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

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-C1ry3YPK.js');
+var index = require('./index-BKMHxS4K.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,9 +14,10 @@ const AfStepperStep = class {
         this.index = 1;
     }
     render() {
-        return (index.h(index.Host, { key: 'b91b1f537b806fcd529fa52e67399f6be16bca5d' }, index.h("span", { key: '9622f4f96632b3ba69144afd82a6787e32eb7c2c', class: "stepper-step__badge" }, this.index), index.h("div", { key: '315447d305191d0b74116a486454c9b4b5f6dd22', class: "stepper-step__content" }, index.h("div", { key: 'fc838c36ffa5ca04d798faabb1c1fa6fd446ee2a', class: "stepper-step__heading" }, index.h("slot", { key: '24199d97434f81e1d635cdb3a06a9946d27f969b', name: "heading" })), index.h("div", { key: 'ad23f7a9e6459a9ac9459202901d144df44c2f03', class: "stepper-step__body" }, index.h("slot", { key: '66a4b92593430b057479e15b2a0d47f5a10eb229', name: "body" })))));
+        return (index.h(index.Host, { key: '36a45ffc037fb0efd1352fb1aa8482205faada04' }, index.h("span", { key: '93a75d705f40f920b3480607dfe2ed9f4ba37e55', class: "stepper-step__badge" }, this.index), index.h("div", { key: '2eb52b18397349da4fd3a9322fb7f1af0a271b4c', class: "stepper-step__content" }, index.h("div", { key: 'cf0fff2d73189a63e675017b1d431d2edc03e0c6', class: "stepper-step__heading" }, index.h("slot", { key: '6649a32664e82bc04e6f53c05d92050ad9b828d6', name: "heading" })), index.h("div", { key: '8f66cf21ff1b3e1bb4e817e6e85b418c1bdffd24', class: "stepper-step__body" }, index.h("slot", { key: 'a38c1c2c19d5d821ca513f098cd1b4fe6d007a92', 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-step.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-stepper-step.entry.cjs.js","sources":["src/components/af-stepper-step/af-stepper-step.css?tag=af-stepper-step&encapsulation=scoped","src/components/af-stepper-step/af-stepper-step.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n flex: 1 1 0;\n min-width: 0;\n padding: 0 16px;\n position: relative;\n z-index: 1;\n}\n\n.stepper-step__badge {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n border: 1px solid var(--colour-brand-inkwell, #14343b);\n background: var(--colour-background-white, #ffffff);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n font-weight: 500;\n font-size: 20px;\n color: var(--colour-brand-inkwell, #14343b);\n margin-bottom: 24px;\n flex-shrink: 0;\n}\n\n.stepper-step__content {\n display: flex;\n flex-direction: column;\n gap: 12px;\n max-width: 320px;\n}\n\n.stepper-step__heading {\n font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 24px;\n line-height: 1.2;\n letter-spacing: -0.02em;\n color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n}\n\n.stepper-step__body {\n font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n font-size: 16px;\n line-height: 1.5;\n color: var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Normalize slotted heading/body tags */\n:host :where(h1, h2, h3, h4, h5, h6),\n:host :where(p) {\n font: inherit;\n color: inherit;\n margin: 0;\n}\n\n/* Vertical orientation — align left */\n:host-context(.stepper--vertical) {\n flex-direction: row;\n align-items: flex-start;\n text-align: left;\n gap: 24px;\n padding: 0;\n}\n\n:host-context(.stepper--vertical) .stepper-step__badge {\n margin-bottom: 0;\n}\n\n/* ≤ mobile */\n@media (max-width: 767px) {\n :host {\n flex-direction: row;\n align-items: flex-start;\n text-align: left;\n gap: 24px;\n padding: 0;\n }\n .stepper-step__badge {\n margin-bottom: 0;\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A single step within an af-stepper. Renders a numbered circular badge\n * followed by slotted heading + body content.\n *\n * The parent af-stepper auto-assigns the `index` attribute based on DOM\n * order, so consumers don't need to hand-number the steps.\n *\n * @slot heading - Step title (h3/h4 recommended).\n * @slot body - Step description paragraph(s).\n */\n@Component({\n tag: 'af-stepper-step',\n styleUrl: 'af-stepper-step.css',\n shadow: false,\n scoped: true,\n})\nexport class AfStepperStep {\n /**\n * Step number shown in the badge. Auto-assigned by the parent stepper if\n * not explicitly set.\n */\n @Prop({ reflect: true }) index: number = 1;\n\n render() {\n return (\n <Host>\n <span class=\"stepper-step__badge\">{this.index}</span>\n <div class=\"stepper-step__content\">\n <div class=\"stepper-step__heading\">\n <slot name=\"heading\"></slot>\n </div>\n <div class=\"stepper-step__body\">\n <slot name=\"body\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,u4DAAu4D;;MCkBn5D,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAiB3C;IAfC,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACrDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,CAAQ,CACrB,CACF,CACD;;;;;;;"}

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

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-C1ry3YPK.js');
+var index = require('./index-BKMHxS4K.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,10 +24,11 @@ const AfStepper = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'a9c2328058c0495bbec34d3a08deb0375e2f6dae', class: `stepper stepper--${this.orientation}` }, index.h("div", { key: '91fb9864b86a9c2b44e84db1356099ebf5d119f3', class: "stepper__connector", "aria-hidden": "true" }), index.h("slot", { key: '680bf938f006e4696882aa55f7ca6fa02bcf4db4' })));
+        return (index.h(index.Host, { key: '0ca79e9f0006bfbe3ab6e18cceaafd0257f4defb', class: `stepper stepper--${this.orientation}` }, index.h("div", { key: '8682fe5e58f7df3fb9866966fb6c04715203fd87', class: "stepper__connector", "aria-hidden": "true" }), index.h("slot", { key: 'ecdf79d87ee099666521dbb6f8e32375dd829fea' })));
     }
     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-stepper.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-stepper.entry.cjs.js","sources":["src/components/af-stepper/af-stepper.css?tag=af-stepper&encapsulation=scoped","src/components/af-stepper/af-stepper.tsx"],"sourcesContent":[":host {\n display: flex;\n width: 100%;\n position: relative;\n max-width: 1120px;\n margin: 0 auto;\n align-items: flex-start;\n justify-content: space-between;\n gap: 24px;\n}\n\n:host(.stepper--vertical) {\n flex-direction: column;\n max-width: 680px;\n gap: 40px;\n}\n\n/* Horizontal connector — thin line running across the row of badges. */\n.stepper--horizontal .stepper__connector {\n position: absolute;\n top: 23px; /* aligned to badge centre (badge height 48px / 2 = 24, minus 1px for line) */\n left: 8%;\n right: 8%;\n height: 2px;\n background: var(--colour-brand-inkwell, #14343b);\n opacity: 0.25;\n z-index: 0;\n}\n\n.stepper--vertical .stepper__connector {\n position: absolute;\n top: 24px;\n bottom: 24px;\n left: 23px;\n width: 2px;\n background: var(--colour-brand-inkwell, #14343b);\n opacity: 0.25;\n z-index: 0;\n}\n\n/* ≤ mobile */\n@media (max-width: 767px) {\n .stepper--horizontal {\n flex-direction: column;\n gap: 32px;\n }\n .stepper--horizontal .stepper__connector {\n top: 24px;\n bottom: 24px;\n left: 23px;\n right: auto;\n width: 2px;\n height: auto;\n }\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\n\n/**\n * Stepper composite for \"Sign up / Upload / See results\"-style marketing\n * flows. Renders children `af-stepper-step` elements in a horizontal row\n * (desktop) or vertical stack (mobile), with a connector line between badges.\n *\n * Matches Webflow's `.stepper` pattern — numbered circled badges, a spine\n * connector, and centered step text.\n *\n * @example\n * ```html\n * <af-stepper>\n * <af-stepper-step>\n * <h3 slot=\"heading\">Sign up for free</h3>\n * <p slot=\"body\">No sales calls, no credit cards.</p>\n * </af-stepper-step>\n * <af-stepper-step>...</af-stepper-step>\n * <af-stepper-step>...</af-stepper-step>\n * </af-stepper>\n * ```\n *\n * @slot - `af-stepper-step` elements.\n */\n@Component({\n tag: 'af-stepper',\n styleUrl: 'af-stepper.css',\n shadow: false,\n scoped: true,\n})\nexport class AfStepper {\n @Element() el!: HTMLElement;\n\n /** Layout orientation. Horizontal on desktop, auto-stacks on mobile. */\n @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n componentDidLoad() {\n this.assignIndices();\n }\n\n private assignIndices() {\n const steps = Array.from(this.el.querySelectorAll('af-stepper-step')) as any[];\n steps.forEach((step, i) => {\n // Set via property so Stencil reactively re-renders the badge.\n // Only overwrite when the consumer hasn't explicitly set one.\n if (step.index == null || step.index === 1) {\n step.index = i + 1;\n }\n });\n }\n\n render() {\n return (\n <Host class={`stepper stepper--${this.orientation}`}>\n <div class=\"stepper__connector\" aria-hidden=\"true\"></div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,s1BAAs1B;;MC8B91B,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAUU,QAAA,IAAW,CAAA,WAAA,GAA8B,YAAY;AAyB9D;IAvBC,gBAAgB,GAAA;QACd,IAAI,CAAC,aAAa,EAAE;;IAGd,aAAa,GAAA;AACnB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAU;QAC9E,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;;;AAGxB,YAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;AAC1C,gBAAA,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC;;AAEtB,SAAC,CAAC;;IAGJ,MAAM,GAAA;QACJ,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAoB,iBAAA,EAAA,IAAI,CAAC,WAAW,CAAE,CAAA,EAAA,EACjDD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,aAAA,EAAa,MAAM,EAAO,CAAA,EACzDA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;"}

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

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-C1ry3YPK.js');
+var index = require('./index-BKMHxS4K.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,6 +42,7 @@ const AfSwitch = class {
         return (index.h(index.Host, { key: '9d319d8029449a756153131636059690a9a68fa5' }, index.h("label", { key: '301299033334d52e22ed85572ae096290248b3a6', class: switchClasses }, index.h("input", { key: '2866ca995d02543294b95363b3dc2eb72df94d69', 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: '1ea8b8d63d7ba48d0d26419dd08d9463968560fe', class: trackClasses }, index.h("span", { key: '7f0888ef41bbf3d4ace36ef2c3ceadce7a531cc1', class: knobClasses })), index.h("span", { key: '7ba5088e7a6fe6e70bdb6dc0b91d2fb0912db5d5', class: "label" }, index.h("slot", { key: '2c55a31a722662c4bb8fef0eb771e72546e95e03' })))));
     }
 };
-AfSwitch.style = afSwitchCss();
+AfSwitch.style = afSwitchCss;
 exports.af_switch = AfSwitch;
+//# sourceMappingURL=af-switch.entry.cjs.js.map

package/dist/cjs/af-switch.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-switch.entry.cjs.js","sources":["src/components/af-switch/af-switch.css?tag=af-switch&encapsulation=shadow","src/components/af-switch/af-switch.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.switch {\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(--af-typography-body-dark, #14343b));\n user-select: none;\n}\n\n.switch.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/* Switch track */\n.track {\n position: relative;\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 52px;\n height: 30px;\n border-radius: var(--radii-switch, 9999px);\n background: var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed));\n transition: background 0.2s ease;\n box-sizing: border-box;\n}\n\n/* Track active state */\n.track.active {\n background: var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Track disabled state */\n.track.disabled {\n background: var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed));\n}\n\n/* Track active + disabled state */\n.track.active.disabled {\n background: var(--af-form-control-bg-checked-disabled, #708380);\n}\n\n/* Hover state */\n.switch:not(.disabled):hover .track:not(.active) {\n background: var(--af-form-control-stroke, var(--af-background-level-1-hover, #dde6e3));\n}\n\n/* Focus state */\n.input:focus-visible + .track {\n 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));\n outline: none;\n}\n\n/* Switch knob */\n.knob {\n position: absolute;\n width: 26px;\n height: 26px;\n border-radius: 50%;\n background: var(--af-form-control-bg, var(--colour-brand-white, #ffffff));\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n transition: transform 0.2s ease, background 0.2s ease;\n transform: translateX(2px);\n}\n\n/* Knob active position */\n.knob.active {\n transform: translateX(24px);\n /* When active, knob should contrast with the checked track */\n background: var(--af-form-control-icon, var(--colour-brand-white, #ffffff));\n}\n\n/* Knob disabled state */\n.knob.disabled {\n background: var(--af-form-control-stroke-disabled, var(--colour-inkwell-200, #a1aeb1));\n box-shadow: none;\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 * Switch component for toggling between on and off states.\n * \n * @slot - Switch label text\n */\n@Component({\n tag: 'af-switch',\n styleUrl: 'af-switch.css',\n shadow: true\n})\nexport class AfSwitch {\n /**\n * Whether the switch is active (on)\n */\n @Prop({ mutable: true, reflect: true }) active: boolean = false;\n\n /**\n * Whether the switch is disabled\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * The name of the switch for form submission\n */\n @Prop() name?: string;\n\n /**\n * The value of the switch for form submission\n */\n @Prop() value?: string;\n\n /**\n * Emitted when the switch state changes\n */\n @Event() afChange!: EventEmitter<{ active: boolean }>;\n\n private handleChange = () => {\n if (this.disabled) return;\n this.active = !this.active;\n this.afChange.emit({ active: this.active });\n };\n\n render() {\n const switchClasses = {\n 'switch': true,\n 'active': this.active,\n 'disabled': this.disabled\n };\n\n const trackClasses = {\n 'track': true,\n 'active': this.active,\n 'disabled': this.disabled\n };\n\n const knobClasses = {\n 'knob': true,\n 'active': this.active,\n 'disabled': this.disabled\n };\n\n return (\n <Host>\n <label class={switchClasses}>\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"input\"\n checked={this.active}\n disabled={this.disabled}\n name={this.name}\n value={this.value}\n onChange={this.handleChange}\n />\n <span class={trackClasses}>\n <span class={knobClasses}></span>\n </span>\n <span class=\"label\">\n <slot></slot>\n </span>\n </label>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,+3DAA+3D;;MCYt4D,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAME;;AAEG;AACqC,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAE/D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiB1C,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC1B,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAC7C,SAAC;AA4CF;IA1CC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,EAAA,EACzBA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,CAAA,EACFA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,WAAW,EAAA,CAAS,CAC5B,EACPA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACD,CACH;;;;;;;"}

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

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-C1ry3YPK.js');
+var index = require('./index-BKMHxS4K.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,6 +82,7 @@ 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-bar.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"af-tab-bar.entry.cjs.js","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,qkCAAqkC;;MCyB5kC,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,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,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClBD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1BA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;"}

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

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-C1ry3YPK.js');
+var index = require('./index-BKMHxS4K.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,     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 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 AfTab = class {
     constructor(hostRef) {
@@ -58,6 +58,7 @@ const AfTab = class {
         return (index.h(index.Host, { key: '1f07a8b192e123bb4d053ef6910f45431ba2915a' }, index.h("button", { key: '6e56a2ca19222220a77096948fee53a4a88ffd54', 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: 'df9f4233d6ce7dd8ca4f9e65dc139bb878af294d', class: "number-slot" }, index.h("slot", { key: 'e41b64a2c9252a9f267a71e629ef5e2fe95e154c', name: "number" }))), this.displayIcon && (index.h("span", { key: '9df655a8da71ea036c0717fa56f5fdcdb5973945', class: "icon-slot" }, index.h("slot", { key: '5e7dda8a613a9829a5e9dff107152d436f56902e', name: "icon" }))), index.h("span", { key: 'c516e04e5acc82910c7f94e31e326fdeb9de3fe7', class: "label" }, this.label))));
     }
 };
-AfTab.style = afTabCss();
+AfTab.style = afTabCss;
 exports.af_tab = AfTab;
+//# sourceMappingURL=af-tab.entry.cjs.js.map