@affinda/wc 0.0.17 → 0.0.18

package/dist/collection/components/af-navbar/af-navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-navbar.js","sourceRoot":"","sources":["../../../src/components/af-navbar/af-navbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, h, Host, Prop, Element, Listen } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n * Includes mobile hamburger menu and support for mega-menu dropdowns.\n * \n * The logo slot can be used to provide a custom logo. If no logo is provided,\n * the default Affinda logo will be displayed.\n */\n@Component({\n  tag: 'af-navbar',\n  styleUrl: 'af-navbar.css',\n  shadow: true\n})\nexport class AfNavbar {\n  @Element() el!: HTMLElement;\n\n  @State() mobileMenuOpen: boolean = false;\n  \n  /** The currently open dropdown identifier (null if none open) */\n  @State() activeDropdown: string | null = null;\n\n  /** Whether to show the default Affinda logo when no logo slot content is provided */\n  @Prop() showDefaultLogo: boolean = true;\n\n  /** Theme for the spacer background - should match the section below the navbar */\n  @Prop() theme?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay';\n\n  private toggleMobileMenu = () => {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\n    // Close any open dropdown when toggling mobile menu\n    this.activeDropdown = null;\n  };\n\n  /**\n   * Opens a dropdown by its identifier\n   */\n  private openDropdown = (dropdownId: string) => {\n    this.activeDropdown = dropdownId;\n  };\n\n  /**\n   * Closes the currently open dropdown\n   */\n  private closeDropdown = () => {\n    this.activeDropdown = null;\n  };\n\n  /**\n   * Toggles a dropdown by its identifier\n   */\n  private toggleDropdown = (dropdownId: string) => {\n    if (this.activeDropdown === dropdownId) {\n      this.activeDropdown = null;\n    } else {\n      this.activeDropdown = dropdownId;\n    }\n  };\n\n  /**\n   * Handle clicks outside the navbar to close dropdowns\n   */\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.el)) {\n      this.closeDropdown();\n    }\n  }\n\n  /**\n   * Handle escape key to close dropdowns\n   */\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.closeDropdown();\n    }\n  }\n\n  render() {\n    const hasDropdown = this.activeDropdown !== null;\n\n    return (\n      <Host class={{ 'has-dropdown-open': hasDropdown }}>\n        {/* Spacer element to prevent content from being hidden behind sticky navbar */}\n        <div class={`navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}`}></div>\n        \n        <nav class=\"navbar-container\">\n          <div class=\"navbar\">\n            {/* Left section: Logo + Nav Links */}\n            <div class=\"navbar-left\">\n              <div class=\"logo\">\n                <slot name=\"logo\">\n                  {/* Default Affinda logo if no slot content provided */}\n                  {this.showDefaultLogo && <af-logo></af-logo>}\n                </slot>\n              </div>\n              \n              {/* Hamburger menu button - mobile only */}\n              <button \n                class=\"mobile-menu-toggle\"\n                onClick={this.toggleMobileMenu}\n                aria-label=\"Toggle navigation menu\"\n                aria-expanded={this.mobileMenuOpen ? 'true' : 'false'}\n              >\n                {this.mobileMenuOpen ? (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M18 6L6 18M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                ) : (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M3 12h18M3 6h18M3 18h18\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                )}\n              </button>\n              \n              <div class={`nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n                <slot name=\"start\"></slot>\n              </div>\n            </div>\n\n            {/* Right section: Actions + Button */}\n            <div class={`navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n              <div class=\"nav-actions\">\n                <slot name=\"end\"></slot>\n              </div>\n              <div class=\"nav-button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {/* Dropdown panel container */}\n          <div class={`dropdown-container ${hasDropdown ? 'is-open' : ''}`}>\n            <div class=\"dropdown-panel\">\n              <slot name=\"dropdown-solutions\"></slot>\n              <slot name=\"dropdown-pricing\"></slot>\n              <slot name=\"dropdown-resources\"></slot>\n              <slot name=\"dropdown\"></slot>\n            </div>\n          </div>\n        </nav>\n\n        {/* Mobile menu dropdown slots */}\n        {this.mobileMenuOpen && (\n          <div class=\"mobile-dropdowns\">\n            <slot name=\"mobile-menu\"></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-navbar.js","sourceRoot":"","sources":["../../../src/components/af-navbar/af-navbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, h, Host, Prop, Element, Listen } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n * Includes mobile hamburger menu and support for mega-menu dropdowns.\n * \n * The logo slot can be used to provide a custom logo. If no logo is provided,\n * the default Affinda logo will be displayed.\n * \n * **Slots:**\n * - `logo` - Logo area (defaults to Affinda logo if empty)\n * - `start` - Primary navigation links (left side, desktop)\n * - `end` - Secondary/utility links (right side)\n * - `button` - Call-to-action button\n * - `dropdown-solutions` - Mega-menu for Solutions dropdown\n * - `dropdown-pricing` - Mega-menu for Pricing dropdown  \n * - `dropdown-resources` - Mega-menu for Resources dropdown\n * - `dropdown` - Generic dropdown slot\n * - `mobile-menu` - Mobile menu content (use af-nav-accordion for accordion menus)\n * - `mobile-button` - CTA button for mobile menu (appears at top)\n */\n@Component({\n  tag: 'af-navbar',\n  styleUrl: 'af-navbar.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfNavbar {\n  @Element() el!: HTMLElement;\n\n  @State() mobileMenuOpen: boolean = false;\n  \n  /** The currently open dropdown identifier (null if none open) */\n  @State() activeDropdown: string | null = null;\n\n  /** Whether to show the default Affinda logo when no logo slot content is provided */\n  @Prop() showDefaultLogo: boolean = true;\n\n  /** Theme for the spacer background - should match the section below the navbar */\n  @Prop() theme?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay';\n\n  /** Force mobile layout regardless of viewport size (useful for testing/stories) */\n  @Prop({ reflect: true }) forceMobile: boolean = false;\n\n  private toggleMobileMenu = () => {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\n    // Close any open dropdown when toggling mobile menu\n    this.activeDropdown = null;\n  };\n\n  /**\n   * Opens a dropdown by its identifier\n   */\n  private openDropdown = (dropdownId: string) => {\n    this.activeDropdown = dropdownId;\n  };\n\n  /**\n   * Closes the currently open dropdown\n   */\n  private closeDropdown = () => {\n    this.activeDropdown = null;\n  };\n\n  /**\n   * Toggles a dropdown by its identifier\n   */\n  private toggleDropdown = (dropdownId: string) => {\n    if (this.activeDropdown === dropdownId) {\n      this.activeDropdown = null;\n    } else {\n      this.activeDropdown = dropdownId;\n    }\n  };\n\n  /**\n   * Handle clicks outside the navbar to close dropdowns\n   */\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.el)) {\n      this.closeDropdown();\n    }\n  }\n\n  /**\n   * Handle escape key to close dropdowns\n   */\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.closeDropdown();\n    }\n  }\n\n  render() {\n    const hasDropdown = this.activeDropdown !== null;\n\n    return (\n      <Host class={{ 'has-dropdown-open': hasDropdown }}>\n        {/* Spacer element to prevent content from being hidden behind sticky navbar */}\n        <div class={`navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}`}></div>\n        \n        <nav class=\"navbar-container\">\n          <div class=\"navbar theme-white\">\n            {/* Left section: Logo + Nav Links */}\n            <div class=\"navbar-left\">\n              <div class=\"logo\">\n                <slot name=\"logo\">\n                  {/* Default Affinda logo if no slot content provided */}\n                  {this.showDefaultLogo && <af-logo></af-logo>}\n                </slot>\n              </div>\n              \n              {/* Hamburger menu button - mobile only */}\n              <button \n                class=\"mobile-menu-toggle\"\n                onClick={this.toggleMobileMenu}\n                aria-label=\"Toggle navigation menu\"\n                aria-expanded={this.mobileMenuOpen ? 'true' : 'false'}\n              >\n                {this.mobileMenuOpen ? (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M18 6L6 18M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                ) : (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M3 12h18M3 6h18M3 18h18\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                )}\n              </button>\n              \n              <div class={`nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n                <slot name=\"start\"></slot>\n              </div>\n            </div>\n\n            {/* Right section: Actions + Button */}\n            <div class={`navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n              <div class=\"nav-actions\">\n                <slot name=\"end\"></slot>\n              </div>\n              <div class=\"nav-button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {/* Dropdown panel container */}\n          <div class={`dropdown-container ${hasDropdown ? 'is-open' : ''}`}>\n            <div class=\"dropdown-panel theme-white\">\n              <slot name=\"dropdown-solutions\"></slot>\n              <slot name=\"dropdown-pricing\"></slot>\n              <slot name=\"dropdown-resources\"></slot>\n              <slot name=\"dropdown\"></slot>\n            </div>\n          </div>\n        </nav>\n\n        {/* Mobile menu panel */}\n        <div class={`mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}`}>\n          {/* Mobile CTA button at top */}\n          <div class=\"mobile-button-container\">\n            <slot name=\"mobile-button\">\n              <slot name=\"button\"></slot>\n            </slot>\n          </div>\n          \n          {/* Mobile navigation content */}\n          <div class=\"mobile-menu-content\">\n            <slot name=\"mobile-menu\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-number-badge/af-number-badge.js

@@ -34,7 +34,7 @@ export class AfNumberBadge {
             height: `${this.size}px`,
             fontSize: `${fontSize}px`,
         };
-        return (h(Host, { key: '8b3d22147d452da450899cb2853957d601d321cb', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: 'de26b2d9ad6139ecb2ebe764020577f9887ececf', class: {
+        return (h(Host, { key: 'f8c10410f86461a7c91c7a4ec581df66378a0064', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: 'd84893da541132b58c86575aeec8975b3d583e92', class: {
                 'badge': true,
                 [`variant-${this.variant}`]: true,
             }, style: badgeStyle }, this.number)));

package/dist/collection/components/af-progress-line/af-progress-line.js

@@ -21,10 +21,10 @@ export class AfProgressLine {
         // Clamp progress between 0 and 1
         const clampedProgress = Math.max(0, Math.min(1, this.progress));
         const progressPercent = clampedProgress * 100;
-        return (h(Host, { key: '0b5f1dccd9d5d3d80a68dbecd7c78e9c7ba1e9eb' }, h("div", { key: '70083ced351eeed528c93787c47299af86edf693', class: {
+        return (h(Host, { key: '62410fb52d8010a3544e4aff10587e656162eb50' }, h("div", { key: '35ecb7c0c89d305456aa07a1db34fa0cf41e9181', class: {
                 'progress-line': true,
                 [`progress-line--${this.orientation}`]: true,
-            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: '6a37704b7183543b589a872c44413fafc6a643dc', class: "progress-line__background" }), h("div", { key: 'ff7cee0f9e117e3ea346d195126c635d86efc5da', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
+            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: 'd5c61725e5797df2d16555b2035aa58477622b07', class: "progress-line__background" }), h("div", { key: '983d07564432e4f6699dd820a304fd10935e952d', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
     }
     static get is() { return "af-progress-line"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-radio/af-radio.css

@@ -10,7 +10,7 @@
   font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
   font-size: 14px;
   line-height: 20px;
-  color: var(--buttons-ghost-text, var(--colour-brand-inkwell, #14343b));
+  color: var(--af-form-control-label, var(--colour-brand-inkwell, #14343b));
   user-select: none;
 }
 
@@ -34,53 +34,71 @@
 
 /* Custom radio control */
 .control {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  position: relative;
   flex-shrink: 0;
   width: 20px;
   height: 20px;
   border-radius: var(--radii-radio, 9999px);
-  border: 1px solid var(--forms-control-stroke, #d0d6d8);
-  background: var(--forms-control-bg-default, #ffffff);
+  /* Use inset box-shadow instead of border to prevent layout shift */
+  border: none;
+  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8));
+  background: var(--af-form-control-bg, var(--colour-brand-white, #ffffff));
   transition: all 0.15s ease;
   box-sizing: border-box;
 }
 
 /* Checked state */
 .control.checked {
-  background: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));
-  border-color: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));
+  background: var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));
+  box-shadow: none;
 }
 
 /* Disabled state */
 .control.disabled {
-  background: var(--forms-control-bg-default-disabled, #e8ebeb);
-  border-color: var(--forms-control-stroke-disabled, #d0d6d8);
+  background: var(--af-form-control-bg-disabled, var(--colour-mistgreen-200, #e8ebeb));
+  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-disabled, var(--colour-mistgreen-500, #d0d6d8));
 }
 
 .control.checked.disabled {
-  background: var(--forms-control-bg-active-disabled, #708380);
-  border-color: var(--forms-control-bg-active-disabled, #708380);
+  background: var(--af-form-control-bg-checked-disabled, var(--colour-inkwell-350, #708380));
+  box-shadow: none;
 }
 
 /* Hover state */
-.radio:not(.disabled):hover .control {
-  border-color: var(--forms-control-stroke-hover, var(--colour-brand-inkwell, #14343b));
+.radio:not(.disabled):hover .control:not(.checked) {
+  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));
 }
 
 /* Focus state */
 .input:focus-visible + .control {
-  box-shadow: 0 0 0 4px var(--background-base, #ffffff), 0 0 0 5px var(--buttons-secondary-stroke, #14343b);
   outline: none;
+  box-shadow: 
+    inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8)),
+    0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), 
+    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));
+}
+
+.input:focus-visible + .control.checked {
+  box-shadow: 
+    0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), 
+    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));
 }
 
-/* Inner dot */
+/* Inner dot - always present, visibility controlled by opacity */
 .dot {
+  position: absolute;
+  inset: 0;
+  margin: auto;
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: #ffffff;
+  background: var(--af-form-control-icon, var(--colour-brand-white, #ffffff));
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.control.checked .dot {
+  opacity: 1;
 }
 
 /* Label styling */
@@ -94,4 +112,3 @@
 .label:empty {
   display: none;
 }
-

package/dist/collection/components/af-radio/af-radio.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 /**
  * Radio component for selecting a single option from a group.
+ * Radios with the same `name` prop are mutually exclusive.
  *
  * @slot - Radio label text
  */
@@ -14,17 +15,25 @@ export class AfRadio {
          * Whether the radio is disabled
          */
         this.disabled = false;
-        this.handleChange = () => {
+        this.handleClick = () => {
             if (this.disabled || this.checked)
                 return;
+            // Uncheck other radios with the same name
+            if (this.name) {
+                const siblings = document.querySelectorAll(`af-radio[name="${this.name}"]`);
+                siblings.forEach((radio) => {
+                    if (radio !== this.el && radio.checked) {
+                        radio.checked = false;
+                    }
+                });
+            }
             this.checked = true;
-            this.afChange.emit({ checked: this.checked, value: this.value });
+            this.afChange.emit({ checked: this.checked, value: this.value, name: this.name });
         };
     }
     render() {
         const radioClasses = {
             'radio': true,
-            'checked': this.checked,
             'disabled': this.disabled
         };
         const controlClasses = {
@@ -32,7 +41,7 @@ export class AfRadio {
             'checked': this.checked,
             'disabled': this.disabled
         };
-        return (h(Host, { key: '6adcdfda7127638527a30f9289f9cd240ec1e11d' }, h("label", { key: '9366569dd10eeeca7f3c3a616b0f523efd3208ec', class: radioClasses }, h("input", { key: '4b63b4285d65e42fc04c9f1f2e02e82abcf71018', type: "radio", class: "input", checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), h("span", { key: '2e9fa65ff49c95948e6ac3e791f31a8f51f4b0ba', class: controlClasses }, this.checked && (h("span", { key: 'efda09c196af4b1a33bba4da56d3036ee8545905', class: "dot" }))), h("span", { key: 'faf8a3d424418f987d9561d9d903068ce865a494', class: "label" }, h("slot", { key: '9b7d84b6eab1f908708bca461cd49eda3737435b' })))));
+        return (h(Host, { key: 'f01068a7c7d1ddb47dbb5e55575098c6646218cc' }, h("label", { key: '2e57f31f11985a0b93d1b36318b3e51443b9b8a1', class: radioClasses, onClick: this.handleClick }, h("input", { key: 'eee5a87c24e16d7446ddc93a27f278a7be7043b8', type: "radio", class: "input", checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, tabindex: this.disabled ? -1 : 0 }), h("span", { key: '0c0dd903fcdb3d81e5cca01d17173f48049f19fe', class: controlClasses }, h("span", { key: '7c56dc92603d06dcb55fc1d44e2821c6c785cec0', class: "dot" })), h("span", { key: 'af9dc16e499f10707ebb078263fc865085083759', class: "label" }, h("slot", { key: 'c19a5db6ddd72b93f2abb46c569a58e4203506b2' })))));
     }
     static get is() { return "af-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -104,7 +113,7 @@ export class AfRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name"
             },
             "value": {
@@ -140,11 +149,12 @@ export class AfRadio {
                     "text": "Emitted when the radio checked state changes"
                 },
                 "complexType": {
-                    "original": "{ checked: boolean; value?: string }",
-                    "resolved": "{ checked: boolean; value?: string | undefined; }",
+                    "original": "{ checked: boolean; value?: string; name?: string }",
+                    "resolved": "{ checked: boolean; value?: string | undefined; name?: string | undefined; }",
                     "references": {}
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=af-radio.js.map

package/dist/collection/components/af-radio/af-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-radio.js","sourceRoot":"","sources":["../../../src/components/af-radio/af-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;;;GAIG;AAMH,MAAM,OAAO,OAAO;IALpB;QAME;;WAEG;QACqC,YAAO,GAAY,KAAK,CAAC;QAEjE;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAiB3C,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;gBAAE,OAAO;YAC1C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACnE,CAAC,CAAC;KAuCH;IArCC,MAAM;QACJ,MAAM,YAAY,GAAG;YACnB,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAE,YAAY;gBACxB,8DACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,GAC3B;gBACF,6DAAM,KAAK,EAAE,cAAc,IACxB,IAAI,CAAC,OAAO,IAAI,CACf,6DAAM,KAAK,EAAC,KAAK,GAAQ,CAC1B,CACI;gBACP,6DAAM,KAAK,EAAC,OAAO;oBACjB,8DAAa,CACR,CACD,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Radio component for selecting a single option from a group.\n * \n * @slot - Radio label text\n */\n@Component({\n  tag: 'af-radio',\n  styleUrl: 'af-radio.css',\n  shadow: true\n})\nexport class AfRadio {\n  /**\n   * Whether the radio is checked\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * Whether the radio is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the radio for form submission (radios with same name are grouped)\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the radio for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the radio checked state changes\n   */\n  @Event() afChange!: EventEmitter<{ checked: boolean; value?: string }>;\n\n  private handleChange = () => {\n    if (this.disabled || this.checked) return;\n    this.checked = true;\n    this.afChange.emit({ checked: this.checked, value: this.value });\n  };\n\n  render() {\n    const radioClasses = {\n      'radio': true,\n      'checked': this.checked,\n      'disabled': this.disabled\n    };\n\n    const controlClasses = {\n      'control': true,\n      'checked': this.checked,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={radioClasses}>\n          <input\n            type=\"radio\"\n            class=\"input\"\n            checked={this.checked}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            onChange={this.handleChange}\n          />\n          <span class={controlClasses}>\n            {this.checked && (\n              <span class=\"dot\"></span>\n            )}\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"af-radio.js","sourceRoot":"","sources":["../../../src/components/af-radio/af-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAEvF;;;;;GAKG;AAMH,MAAM,OAAO,OAAO;IALpB;QAQE;;WAEG;QACqC,YAAO,GAAY,KAAK,CAAC;QAEjE;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAiB3C,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;gBAAE,OAAO;YAE1C,0CAA0C;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,MAAM,QAAQ,GAAG,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;gBAC5E,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;oBACzB,IAAI,KAAK,KAAK,IAAI,CAAC,EAAE,IAAK,KAAa,CAAC,OAAO,EAAE,CAAC;wBAC/C,KAAa,CAAC,OAAO,GAAG,KAAK,CAAC;oBACjC,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;YAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACpF,CAAC,CAAC;KAoCH;IAlCC,MAAM;QACJ,MAAM,YAAY,GAAG;YACnB,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW;gBACnD,8DACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAChC;gBACF,6DAAM,KAAK,EAAE,cAAc;oBACzB,6DAAM,KAAK,EAAC,KAAK,GAAQ,CACpB;gBACP,6DAAM,KAAK,EAAC,OAAO;oBACjB,8DAAa,CACR,CACD,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter, Element } from '@stencil/core';\n\n/**\n * Radio component for selecting a single option from a group.\n * Radios with the same `name` prop are mutually exclusive.\n * \n * @slot - Radio label text\n */\n@Component({\n  tag: 'af-radio',\n  styleUrl: 'af-radio.css',\n  shadow: true\n})\nexport class AfRadio {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Whether the radio is checked\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * Whether the radio is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the radio for form submission (radios with same name are grouped)\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The value of the radio for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the radio checked state changes\n   */\n  @Event() afChange!: EventEmitter<{ checked: boolean; value?: string; name?: string }>;\n\n  private handleClick = () => {\n    if (this.disabled || this.checked) return;\n    \n    // Uncheck other radios with the same name\n    if (this.name) {\n      const siblings = document.querySelectorAll(`af-radio[name=\"${this.name}\"]`);\n      siblings.forEach((radio) => {\n        if (radio !== this.el && (radio as any).checked) {\n          (radio as any).checked = false;\n        }\n      });\n    }\n    \n    this.checked = true;\n    this.afChange.emit({ checked: this.checked, value: this.value, name: this.name });\n  };\n\n  render() {\n    const radioClasses = {\n      'radio': true,\n      'disabled': this.disabled\n    };\n\n    const controlClasses = {\n      'control': true,\n      'checked': this.checked,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={radioClasses} onClick={this.handleClick}>\n          <input\n            type=\"radio\"\n            class=\"input\"\n            checked={this.checked}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            tabindex={this.disabled ? -1 : 0}\n          />\n          <span class={controlClasses}>\n            <span class=\"dot\"></span>\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-section/af-section.css

@@ -16,6 +16,10 @@
 }
 
 /* Padding variants */
+.padding-none {
+  padding: 0;
+}
+
 .padding-tight {
   padding: 48px 0;
 }
@@ -73,6 +77,33 @@
   --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);
+  
+  /* Input tokens */
+  --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);
+  
+  /* Form control tokens (checkbox, radio, switch) */
+  --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);
 }
 
 /* ==========================================================================
@@ -120,6 +151,33 @@
   --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);
+  
+  /* Input tokens */
+  --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);
+  
+  /* Form control tokens (checkbox, radio, switch) */
+  --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);
 }
 
 /* ==========================================================================
@@ -167,6 +225,33 @@
   --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);
+  
+  /* Input tokens */
+  --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);
+  
+  /* Form control tokens (checkbox, radio, switch) */
+  --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);
 }
 
 /* ==========================================================================
@@ -214,6 +299,33 @@
   --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);
+  
+  /* Input tokens */
+  --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);
+  
+  /* Form control tokens (checkbox, radio, switch) */
+  --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);
 }
 
 /* ==========================================================================
@@ -261,6 +373,33 @@
   --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);
+  
+  /* Input tokens */
+  --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);
+  
+  /* Form control tokens (checkbox, radio, switch) */
+  --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);
 }
 
 /* Mobile adjustments */

package/dist/collection/components/af-section/af-section.js

@@ -13,8 +13,8 @@ export class AfSection {
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: 'bd82dbdc2f1a42d75ad23aace4155b46d813dace' });
-        return (h(Host, { key: '6a81a4ed99312b5ecaee80d6ceac79cd5bf58b8c' }, h("div", { key: '44002052c7a2cbbe7e60bd3bcafb9794a79ba11a', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
+        const content = h("slot", { key: 'd08857f705f1719acd32eef6eb4e4262f2154a60' });
+        return (h(Host, { key: 'b7b0793c5ed8011582774bfb30758ef1883731a0' }, h("div", { key: 'fe61281c91d794df34b64a48d7142ad8cd70a204', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
     }
     static get is() { return "af-section"; }
     static get encapsulation() { return "scoped"; }
@@ -34,8 +34,8 @@ export class AfSection {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'tight' | 'default' | 'loose'",
-                    "resolved": "\"default\" | \"loose\" | \"tight\"",
+                    "original": "'none' | 'tight' | 'default' | 'loose'",
+                    "resolved": "\"default\" | \"loose\" | \"none\" | \"tight\"",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/af-section/af-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-section.js","sourceRoot":"","sources":["../../../src/components/af-section/af-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAOH,MAAM,OAAO,SAAS;IANtB;QAOE,sBAAsB;QACd,YAAO,GAAkC,SAAS,CAAC;QAE3D,2EAA2E;QACnE,UAAK,GAAqE,OAAO,CAAC;QAE1F,6CAA6C;QACrC,cAAS,GAAY,IAAI,CAAC;KAenC;IAbC,MAAM;QACJ,MAAM,OAAO,GAAG,8DAAa,CAAC;QAE9B,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,IAC9D,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,wBAAe,OAAO,CAAgB,CACvC,CAAC,CAAC,CAAC,OAAO,CACP,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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: '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"]}
+{"version":3,"file":"af-section.js","sourceRoot":"","sources":["../../../src/components/af-section/af-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAOH,MAAM,OAAO,SAAS;IANtB;QAOE,sBAAsB;QACd,YAAO,GAA2C,SAAS,CAAC;QAEpE,2EAA2E;QACnE,UAAK,GAAqE,OAAO,CAAC;QAE1F,6CAA6C;QACrC,cAAS,GAAY,IAAI,CAAC;KAenC;IAbC,MAAM;QACJ,MAAM,OAAO,GAAG,8DAAa,CAAC;QAE9B,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,IAC9D,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,wBAAe,OAAO,CAAgB,CACvC,CAAC,CAAC,CAAC,OAAO,CACP,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/af-show/af-show.css

@@ -0,0 +1,78 @@
+:host {
+  display: contents;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+/* Show above breakpoints (hidden below) */
+/* sm: 375px */
+:host(.show-above-sm) {
+  display: none;
+}
+@media (min-width: 375px) {
+  :host(.show-above-sm) {
+    display: contents;
+  }
+}
+
+/* md: 768px */
+:host(.show-above-md) {
+  display: none;
+}
+@media (min-width: 768px) {
+  :host(.show-above-md) {
+    display: contents;
+  }
+}
+
+/* lg: 1024px */
+:host(.show-above-lg) {
+  display: none;
+}
+@media (min-width: 1024px) {
+  :host(.show-above-lg) {
+    display: contents;
+  }
+}
+
+/* xl: 1440px */
+:host(.show-above-xl) {
+  display: none;
+}
+@media (min-width: 1440px) {
+  :host(.show-above-xl) {
+    display: contents;
+  }
+}
+
+/* Show below breakpoints (hidden at or above) */
+/* sm: 375px */
+@media (min-width: 375px) {
+  :host(.show-below-sm) {
+    display: none;
+  }
+}
+
+/* md: 768px */
+@media (min-width: 768px) {
+  :host(.show-below-md) {
+    display: none;
+  }
+}
+
+/* lg: 1024px */
+@media (min-width: 1024px) {
+  :host(.show-below-lg) {
+    display: none;
+  }
+}
+
+/* xl: 1440px */
+@media (min-width: 1440px) {
+  :host(.show-below-xl) {
+    display: none;
+  }
+}
+

package/dist/collection/components/af-show/af-show.js

@@ -0,0 +1,88 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Show component for responsive visibility control.
+ * Show or hide content based on viewport breakpoints.
+ *
+ * Breakpoints (from tokens):
+ * - sm: 375px
+ * - md: 768px
+ * - lg: 1024px
+ * - xl: 1440px
+ *
+ * @slot - Content to show/hide
+ */
+export class AfShow {
+    render() {
+        const classes = {
+            'show': true,
+            [`show-above-${this.above}`]: !!this.above,
+            [`show-below-${this.below}`]: !!this.below,
+        };
+        return (h(Host, { key: '5a0c140b0fedd180f13574de1db5ac4fe1652e08', class: classes }, h("slot", { key: '8d0dbb6fde0e28ffb98cd1721f7ad1b917451826' })));
+    }
+    static get is() { return "af-show"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-show.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-show.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "above": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Breakpoint",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | undefined",
+                    "references": {
+                        "Breakpoint": {
+                            "location": "global",
+                            "id": "global::Breakpoint"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show content only when viewport is at or above this breakpoint.\nContent is hidden below this breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "above"
+            },
+            "below": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Breakpoint",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | undefined",
+                    "references": {
+                        "Breakpoint": {
+                            "location": "global",
+                            "id": "global::Breakpoint"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show content only when viewport is below this breakpoint.\nContent is hidden at or above this breakpoint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "below"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-show.js.map