@affinda/wc 0.4.1 → 0.4.2

package/dist/components/{p-CTDelwMf.js.map → p-CUmn76Kf.js.map}

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

package/dist/components/{p-1ol-T8nk.js → p-CZdcAZe_.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-CiY0Twna.js';
-import { d as defineCustomElement$1 } from './p-Dga7rIrc.js';
+import { d as defineCustomElement$1 } from './p-CImZ9bq8.js';
 
 const afNavbarCss = ".sc-af-navbar-h{display:block;width:100%}.navbar-spacer.sc-af-navbar{height:100px}.navbar-spacer.theme-white.sc-af-navbar{background-color:var(--colour-brand-white, #FFFFFF)}.navbar-spacer.theme-inkwell.sc-af-navbar{background-color:var(--colour-brand-inkwell, #14343B)}.navbar-spacer.theme-mist-green.sc-af-navbar{background-color:var(--colour-brand-mist-green, #C6D5D1)}.navbar-spacer.theme-soft-clay.sc-af-navbar{background-color:var(--colour-softclay-400, #c0ab8d)}.navbar-container.sc-af-navbar{position:fixed;top:max(32px, env(safe-area-inset-top));left:0;right:0;z-index:10;padding:0 calc(80px + env(safe-area-inset-right)) 0 calc(80px + env(safe-area-inset-left));box-sizing:border-box}.navbar.sc-af-navbar{background:var(--colour-background-white, #ffffff);border-radius:9999px;display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 40px;box-sizing:border-box;flex-wrap:nowrap}.navbar-left.sc-af-navbar{display:flex;align-items:center;gap:32px;flex-shrink:0}.logo.sc-af-navbar{display:flex;align-items:center;flex-shrink:0}.mobile-menu-toggle.sc-af-navbar{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--colour-brand-inkwell, #14343b);margin-left:auto}.mobile-menu-toggle.sc-af-navbar svg.sc-af-navbar{display:block}.nav-links.sc-af-navbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.navbar-right.sc-af-navbar{display:flex;align-items:center;gap:20px}.nav-actions.sc-af-navbar{display:flex;align-items:center;gap:12px}.nav-button.sc-af-navbar{display:flex;align-items:center}.dropdown-container.sc-af-navbar{position:absolute;top:100px;left:0;right:0;padding:8px 80px 0;pointer-events:none;opacity:0;transform:translateY(-8px);transition:opacity 0.2s ease, transform 0.2s ease}.dropdown-container.is-open.sc-af-navbar{pointer-events:auto;opacity:1;transform:translateY(0)}.dropdown-panel.sc-af-navbar{background:var(--colour-background-base, #ffffff);border-radius:32px;overflow:hidden;box-shadow:var(--shadow-navbar, 0 4px 24px rgba(20, 52, 59, 0.12))}.dropdown-panel.sc-af-navbar:empty{display:none}.mobile-menu-panel.sc-af-navbar{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--colour-background-base, #ffffff);z-index:9;padding:max(100px, calc(100px + env(safe-area-inset-top)))\n    calc(16px + env(safe-area-inset-right))\n    max(24px, env(safe-area-inset-bottom))\n    calc(16px + env(safe-area-inset-left));overflow-y:auto;opacity:0;pointer-events:none;transition:opacity 0.2s ease}.mobile-menu-panel.is-open.sc-af-navbar{display:block;opacity:1;pointer-events:auto}.mobile-button-container.sc-af-navbar{margin-bottom:8px}.mobile-button-container.sc-af-navbar-s>*,.mobile-button-container .sc-af-navbar-s>*{width:100%}.mobile-menu-content.sc-af-navbar{display:flex;flex-direction:column;width:100%}.mobile-menu-content.sc-af-navbar-s>*,.mobile-menu-content .sc-af-navbar-s>*{flex:0 0 auto;width:100%}@media (max-width: 1099px){.nav-actions.sc-af-navbar{display:none}.navbar-right.sc-af-navbar{gap:0}}@media (max-width: 1024px){.navbar-spacer.sc-af-navbar{height:88px}.navbar-container.sc-af-navbar{top:max(24px, env(safe-area-inset-top));padding:0 calc(40px + env(safe-area-inset-right)) 0 calc(40px + env(safe-area-inset-left))}.navbar-left.sc-af-navbar{gap:24px}.nav-links.sc-af-navbar{gap:4px}.dropdown-container.sc-af-navbar{padding:0 40px}}@media (max-width: 991px){.navbar-spacer.sc-af-navbar{height:72px}.navbar-container.sc-af-navbar{top:max(16px, env(safe-area-inset-top));padding:0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));z-index:11}.navbar.sc-af-navbar{padding:8px 8px 8px 24px;flex-direction:row;border-radius:9999px;gap:0}.navbar-left.sc-af-navbar{width:auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;flex:1}.mobile-menu-toggle.sc-af-navbar{display:flex;padding:12px;margin-left:auto;border-radius:9999px;border:1px solid var(--colour-brand-inkwell, #14343b)}.mobile-menu-toggle.sc-af-navbar:hover{background:rgba(20, 52, 59, 0.05)}.nav-links.sc-af-navbar{display:none}.navbar-right.sc-af-navbar{display:none}.dropdown-container.sc-af-navbar{display:none}.mobile-menu-panel.sc-af-navbar{padding-top:max(88px, calc(88px + env(safe-area-inset-top)))}.mobile-button-container.sc-af-navbar{padding:0 12px;margin-bottom:8px}.mobile-button-container.sc-af-navbar-s>af-button,.mobile-button-container .sc-af-navbar-s>af-button,.mobile-button-container.sc-af-navbar-s>button,.mobile-button-container .sc-af-navbar-s>button{width:100%;display:flex;justify-content:center}}[force-mobile].sc-af-navbar-h .navbar-spacer.sc-af-navbar{height:72px}[force-mobile].sc-af-navbar-h .navbar-container.sc-af-navbar{top:max(16px, env(safe-area-inset-top));padding:0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));z-index:11}[force-mobile].sc-af-navbar-h .navbar.sc-af-navbar{padding:8px 8px 8px 24px;flex-direction:row;border-radius:9999px;gap:0}[force-mobile].sc-af-navbar-h .navbar-left.sc-af-navbar{width:auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;flex:1}[force-mobile].sc-af-navbar-h .mobile-menu-toggle.sc-af-navbar{display:flex;padding:12px;margin-left:auto;border-radius:9999px;border:1px solid var(--colour-brand-inkwell, #14343b)}[force-mobile].sc-af-navbar-h .mobile-menu-toggle.sc-af-navbar:hover{background:rgba(20, 52, 59, 0.05)}[force-mobile].sc-af-navbar-h .nav-links.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .navbar-right.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .nav-actions.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .dropdown-container.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .mobile-menu-panel.sc-af-navbar{padding-top:max(88px, calc(88px + env(safe-area-inset-top)))}[force-mobile].sc-af-navbar-h .mobile-menu-panel.is-open.sc-af-navbar{display:block;opacity:1;pointer-events:auto}[force-mobile].sc-af-navbar-h .mobile-button-container.sc-af-navbar{padding:0 12px;margin-bottom:8px}.sc-af-navbar-h[force-mobile] .mobile-button-container.sc-af-navbar-s>af-button,.mobile-button-container .sc-af-navbar-s>af-button,.sc-af-navbar-h[force-mobile] .mobile-button-container.sc-af-navbar-s>button,.mobile-button-container .sc-af-navbar-s>button{width:100%;display:flex;justify-content:center}[force-mobile].sc-af-navbar-h .mobile-menu-content.sc-af-navbar{display:flex;flex-direction:column}.sc-af-navbar-h[force-mobile] .mobile-menu-content.sc-af-navbar-s>*,.mobile-menu-content .sc-af-navbar-s>*{flex:0 0 auto;width:100%}";
 
@@ -160,7 +160,7 @@ const AfNavbar = /*@__PURE__*/ proxyCustomElement(class AfNavbar extends H {
     }
     render() {
         const hasDropdown = this.activeDropdown !== null;
-        return (h(Host, { key: '78bb68495b077735b93558eb2ff3c7a5368c95ba', class: { 'has-dropdown-open': hasDropdown } }, h("div", { key: 'd295d9865e936a9e10f2a552658265b5bfff2509', class: `navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}` }), h("nav", { key: '7a2f7ea2a7ac704d5a4854ed8bde9ec4186b7a48', class: "navbar-container" }, h("div", { key: '796c3fbcdc5b93ac2ea756f400900050a4e68904', class: "navbar theme-white" }, h("div", { key: '4f470bd5ca1c24f2de9a051c049ca0f3a6d343d7', class: "navbar-left" }, h("div", { key: '0ff19f610a2dfc60535ca601187214fd9184706c', class: "logo" }, h("slot", { key: 'b62680fa9641835e96c0975aa8b53289a4c331be', name: "logo" }, this.showDefaultLogo && h("af-logo", { key: '5acf4cce6d2b59ca3f08cb112aa53608ff92d3d7' }))), h("button", { key: '2fae1551b462c43388ef570620e2b6356d176724', class: "mobile-menu-toggle", onClick: this.toggleMobileMenu, "aria-label": "Toggle navigation menu", "aria-expanded": this.mobileMenuOpen ? 'true' : 'false' }, this.mobileMenuOpen ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M18 6L6 18M6 6l12 12", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M3 12h18M3 6h18M3 18h18", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '847fa6e696769da5ce2d166e4298bbf35acdffec', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: '79774a3987661ff611090741b8d0f598a5cbc1c1', name: "start" }))), h("div", { key: '18c965fe437fc54f293d5127af13d94d83e212d3', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: '664c29f5d0cd01b493ae8bf9b430be34fd135c5c', class: "nav-actions" }, h("slot", { key: 'c94f3e8b1092d4e6891a77a1714470be7fa265d8', name: "end" })), h("div", { key: '2f598ff355d1cf5662a7246434eeb02af034da7c', class: "nav-button" }, h("slot", { key: 'cda81abe6c63c56270926015cb389e4fe6735d22', name: "button" })))), h("div", { key: 'e551f820e91cca9ae401bd0f514e35b77af896d0', class: `dropdown-container ${hasDropdown ? 'is-open' : ''}` }, h("div", { key: '1253fb594e9db19bb9b79eb3f5d0e1788f728c3d', class: "dropdown-panel theme-white" }, h("slot", { key: 'b134d4150908a4d3bb7d77ba5d80246bbc709b35', name: "dropdowns" })))), h("div", { key: '40c2c6de6f661f89a9746ab55a5be2d68a9ad5a8', class: `mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}` }, h("div", { key: '41a56f4f9b05d819cf0e65f022e5be85d8481361', class: "mobile-button-container" }, h("slot", { key: 'f4b70499d11fb68c92855020b7d1efa97d3dce3a', name: "mobile-button" }, h("slot", { key: '653ca252d1a159891838cba8b9fc1c0bbb9cd348', name: "button" }))), h("div", { key: 'e1e85dd0bba34a4e335792ec2382a4fa94ae79c8', class: "mobile-menu-content" }, h("slot", { key: '1d9ca44862dc2bd2fc4bfcdf3384df0e8f26bc80', name: "mobile-menu" })))));
+        return (h(Host, { key: '78bb68495b077735b93558eb2ff3c7a5368c95ba', class: { 'has-dropdown-open': hasDropdown } }, h("div", { key: 'd295d9865e936a9e10f2a552658265b5bfff2509', class: `navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}` }), h("nav", { key: '7a2f7ea2a7ac704d5a4854ed8bde9ec4186b7a48', class: "navbar-container" }, h("div", { key: '796c3fbcdc5b93ac2ea756f400900050a4e68904', class: "navbar theme-white" }, h("div", { key: '4f470bd5ca1c24f2de9a051c049ca0f3a6d343d7', class: "navbar-left" }, h("div", { key: '0ff19f610a2dfc60535ca601187214fd9184706c', class: "logo" }, h("slot", { key: 'b62680fa9641835e96c0975aa8b53289a4c331be', name: "logo" }, this.showDefaultLogo && h("af-logo", { key: '5acf4cce6d2b59ca3f08cb112aa53608ff92d3d7' }))), h("button", { key: '2fae1551b462c43388ef570620e2b6356d176724', class: "mobile-menu-toggle", onClick: this.toggleMobileMenu, "aria-label": "Toggle navigation menu", "aria-expanded": this.mobileMenuOpen ? 'true' : 'false' }, this.mobileMenuOpen ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M18 6L6 18M6 6l12 12", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M3 12h18M3 6h18M3 18h18", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '847fa6e696769da5ce2d166e4298bbf35acdffec', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: '79774a3987661ff611090741b8d0f598a5cbc1c1', name: "start" }))), h("div", { key: '18c965fe437fc54f293d5127af13d94d83e212d3', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: '664c29f5d0cd01b493ae8bf9b430be34fd135c5c', class: "nav-actions" }, h("slot", { key: 'c94f3e8b1092d4e6891a77a1714470be7fa265d8', name: "end" })), h("div", { key: '2f598ff355d1cf5662a7246434eeb02af034da7c', class: "nav-button" }, h("slot", { key: 'cda81abe6c63c56270926015cb389e4fe6735d22', name: "button" })))), h("div", { key: 'e551f820e91cca9ae401bd0f514e35b77af896d0', class: `dropdown-container ${hasDropdown ? 'is-open' : ''}` }, h("div", { key: '1253fb594e9db19bb9b79eb3f5d0e1788f728c3d', class: "dropdown-panel theme-white" }, h("slot", { key: 'b134d4150908a4d3bb7d77ba5d80246bbc709b35', name: "dropdowns" })))), h("div", { key: '40c2c6de6f661f89a9746ab55a5be2d68a9ad5a8', class: `mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}` }, h("div", { key: '8be85b23f99f8556141c48bed691836de2afe129', class: "mobile-button-container" }, h("slot", { key: 'add78c754de721ca09d9295d628993c2708e5cb8', name: "mobile-button" })), h("div", { key: '8f3776c268349b30fbfab8952a640a2e293b6a2f', class: "mobile-menu-content" }, h("slot", { key: '6eb194b51d1b7545178edc762833c63bb73d5483', name: "mobile-menu" })))));
     }
     get el() { return this; }
     static get style() { return afNavbarCss; }
@@ -191,6 +191,6 @@ function defineCustomElement() {
 }
 
 export { AfNavbar as A, defineCustomElement as d };
-//# sourceMappingURL=p-1ol-T8nk.js.map
+//# sourceMappingURL=p-CZdcAZe_.js.map
 
-//# sourceMappingURL=p-1ol-T8nk.js.map
+//# sourceMappingURL=p-CZdcAZe_.js.map

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

@@ -0,0 +1 @@
+{"file":"p-CZdcAZe_.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-navbar/af-navbar.css?tag=af-navbar&encapsulation=scoped","src/components/af-navbar/af-navbar.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* Spacer element that sits in normal document flow to prevent content overlap */\n.navbar-spacer {\n  height: 100px; /* Accounts for navbar height + top margin */\n}\n\n/* Theme variants for spacer background - matches section themes */\n.navbar-spacer.theme-white {\n  background-color: var(--colour-brand-white, #FFFFFF);\n}\n\n.navbar-spacer.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n}\n\n.navbar-spacer.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.navbar-spacer.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n}\n\n/* Sticky navbar that floats above the spacer */\n.navbar-container {\n  position: fixed;\n  /* Add safe-area-inset-top so the pill drops below the iOS notch / status bar\n     when the page uses viewport-fit=cover. Falls back to the original 32px. */\n  top: max(32px, env(safe-area-inset-top));\n  left: 0;\n  right: 0;\n  z-index: 10;\n  /* Horizontal padding honours safe-area-inset-left/right for landscape on\n     notched devices; the inset is added on top of the existing 80px gutter. */\n  padding: 0 calc(80px + env(safe-area-inset-right)) 0 calc(80px + env(safe-area-inset-left));\n  box-sizing: border-box;\n}\n\n.navbar {\n  background: var(--colour-background-white, #ffffff);\n  border-radius: 9999px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 8px 8px 40px;\n  box-sizing: border-box;\n  flex-wrap: nowrap; /* Prevent wrapping */\n}\n\n/* Left section */\n.navbar-left {\n  display: flex;\n  align-items: center;\n  gap: 32px;\n  flex-shrink: 0;\n}\n\n.logo {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* Mobile menu toggle button */\n.mobile-menu-toggle {\n  display: none;\n  background: none;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--colour-brand-inkwell, #14343b);\n  margin-left: auto;\n}\n\n.mobile-menu-toggle svg {\n  display: block;\n}\n\n.nav-links {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: nowrap;\n}\n\n/* Right section */\n.navbar-right {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.nav-actions {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.nav-button {\n  display: flex;\n  align-items: center;\n}\n\n/* Dropdown container. The container's top is raised 8px into what\n   was previously a blank gap between the nav pill and the panel, and\n   that 8px is absorbed as container top-padding — so the visible panel\n   stays put, but the hoverable region is now continuous between the\n   nav pill and the dropdown. Without this, the mouse crosses an\n   un-hovered strip on its way from trigger to panel and the navbar's\n   mouseleave handler fires a close. */\n.dropdown-container {\n  position: absolute;\n  top: 100px;\n  left: 0;\n  right: 0;\n  padding: 8px 80px 0;\n  pointer-events: none;\n  opacity: 0;\n  transform: translateY(-8px);\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.dropdown-container.is-open {\n  pointer-events: auto;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.dropdown-panel {\n  background: var(--colour-background-base, #ffffff);\n  border-radius: 32px;\n  overflow: hidden;\n  /* shadow-navbar replaces the hand-rolled `0 4px 24px rgba(20, 52, 59, 0.12)`;\n   * same value, now sourced from the token ladder so the marketing site can\n   * retire its matching bespoke rule. */\n  box-shadow: var(--shadow-navbar, 0 4px 24px rgba(20, 52, 59, 0.12));\n}\n\n/* Hide empty dropdown slots */\n.dropdown-panel:empty {\n  display: none;\n}\n\n/* Mobile menu panel - separate from navbar for proper positioning */\n.mobile-menu-panel {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--colour-background-base, #ffffff);\n  z-index: 9;\n  /* Full-viewport drawer: pad the top below the notch, the bottom above the\n     home indicator, and the sides away from landscape edge cutouts. */\n  padding:\n    max(100px, calc(100px + env(safe-area-inset-top)))\n    calc(16px + env(safe-area-inset-right))\n    max(24px, env(safe-area-inset-bottom))\n    calc(16px + env(safe-area-inset-left));\n  overflow-y: auto;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.2s ease;\n}\n\n.mobile-menu-panel.is-open {\n  display: block;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Mobile CTA button container */\n.mobile-button-container {\n  margin-bottom: 8px;\n}\n\n.mobile-button-container ::slotted(*) {\n  width: 100%;\n}\n\n/* Mobile menu content - flex column ensures items stack vertically */\n.mobile-menu-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Force slotted items to take full width for composability */\n.mobile-menu-content ::slotted(*) {\n  flex: 0 0 auto;\n  width: 100%;\n}\n\n/* \n * Breakpoint 1: Hide \"Talk to us\" and \"Log in\" (nav-actions) \n * This happens first as the viewport gets narrower\n * Matches affinda.com behavior at ~1100px\n */\n@media (max-width: 1099px) {\n  .nav-actions {\n    display: none;\n  }\n  \n  .navbar-right {\n    gap: 0;\n  }\n}\n\n/* Tablet adjustments */\n@media (max-width: 1024px) {\n  .navbar-spacer {\n    height: 88px;\n  }\n\n  .navbar-container {\n    top: max(24px, env(safe-area-inset-top));\n    padding: 0 calc(40px + env(safe-area-inset-right)) 0 calc(40px + env(safe-area-inset-left));\n  }\n\n  .navbar-left {\n    gap: 24px;\n  }\n\n  .nav-links {\n    gap: 4px;\n  }\n\n  .dropdown-container {\n    padding: 0 40px;\n  }\n}\n\n/* \n * Breakpoint 2: Switch to hamburger menu\n * Matches affinda.com behavior at 991px\n */\n@media (max-width: 991px) {\n  .navbar-spacer {\n    height: 72px;\n  }\n\n  .navbar-container {\n    top: max(16px, env(safe-area-inset-top));\n    padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));\n    z-index: 11; /* Above mobile menu panel */\n  }\n\n  .navbar {\n    padding: 8px 8px 8px 24px; /* Figma: 8px padding right, 24px left on mobile */\n    flex-direction: row;\n    border-radius: 9999px; /* Keep pill shape on mobile */\n    gap: 0;\n  }\n\n  .navbar-left {\n    width: auto;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n  }\n\n  /* Show hamburger button on mobile */\n  .mobile-menu-toggle {\n    display: flex;\n    padding: 12px;\n    margin-left: auto;\n    border-radius: 9999px;\n    border: 1px solid var(--colour-brand-inkwell, #14343b);\n  }\n\n  .mobile-menu-toggle:hover {\n    background: rgba(20, 52, 59, 0.05);\n  }\n\n  /* Hide nav links on mobile - they're in the mobile menu panel */\n  .nav-links {\n    display: none;\n  }\n\n  /* Hide right section on mobile - button is in mobile menu panel */\n  .navbar-right {\n    display: none;\n  }\n\n  /* Hide desktop dropdown on mobile */\n  .dropdown-container {\n    display: none;\n  }\n\n  /* Mobile menu panel adjustments */\n  .mobile-menu-panel {\n    padding-top: max(88px, calc(88px + env(safe-area-inset-top))); /* Accounts for navbar height + notch */\n  }\n\n  .mobile-button-container {\n    padding: 0 12px;\n    margin-bottom: 8px;\n  }\n\n  .mobile-button-container ::slotted(af-button),\n  .mobile-button-container ::slotted(button) {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n}\n\n/* ==========================================================================\n   Force Mobile Mode\n   Apply mobile styles regardless of viewport when force-mobile attribute is set\n   ========================================================================== */\n\n:host([force-mobile]) .navbar-spacer {\n  height: 72px;\n}\n\n:host([force-mobile]) .navbar-container {\n  top: max(16px, env(safe-area-inset-top));\n  padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));\n  z-index: 11;\n}\n\n:host([force-mobile]) .navbar {\n  padding: 8px 8px 8px 24px;\n  flex-direction: row;\n  border-radius: 9999px;\n  gap: 0;\n}\n\n:host([force-mobile]) .navbar-left {\n  width: auto;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 16px;\n  flex: 1;\n}\n\n:host([force-mobile]) .mobile-menu-toggle {\n  display: flex;\n  padding: 12px;\n  margin-left: auto;\n  border-radius: 9999px;\n  border: 1px solid var(--colour-brand-inkwell, #14343b);\n}\n\n:host([force-mobile]) .mobile-menu-toggle:hover {\n  background: rgba(20, 52, 59, 0.05);\n}\n\n:host([force-mobile]) .nav-links {\n  display: none;\n}\n\n:host([force-mobile]) .navbar-right {\n  display: none;\n}\n\n:host([force-mobile]) .nav-actions {\n  display: none;\n}\n\n:host([force-mobile]) .dropdown-container {\n  display: none;\n}\n\n:host([force-mobile]) .mobile-menu-panel {\n  padding-top: max(88px, calc(88px + env(safe-area-inset-top)));\n}\n\n:host([force-mobile]) .mobile-menu-panel.is-open {\n  display: block;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n:host([force-mobile]) .mobile-button-container {\n  padding: 0 12px;\n  margin-bottom: 8px;\n}\n\n:host([force-mobile]) .mobile-button-container ::slotted(af-button),\n:host([force-mobile]) .mobile-button-container ::slotted(button) {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n/* Force mobile: flex column ensures items stack vertically */\n:host([force-mobile]) .mobile-menu-content {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Force mobile: slotted items take full width for composability */\n:host([force-mobile]) .mobile-menu-content ::slotted(*) {\n  flex: 0 0 auto;\n  width: 100%;\n}\n","import { Component, State, h, Host, Prop, Element, Listen } from '@stencil/core';\nimport type { Theme } from '../../types';\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 * - `dropdowns` - One or more dropdown panels, each a `<div data-for=\"id\">`\n *   where `id` matches the `data-dropdown=\"id\"` attribute on the trigger.\n *   Clicking a trigger toggles the matching panel; only one is visible at\n *   a time.\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?: Theme;\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  /** Timer id used to debounce hover-driven closes. */\n  private closeTimer?: number;\n\n  /**\n   * The trigger element that opened the currently active dropdown. Tracked\n   * so an Esc keypress can close the dropdown and restore focus to the\n   * trigger, matching WAI-ARIA menu-button guidance.\n   */\n  private lastActiveTrigger?: HTMLElement;\n\n  /**\n   * Open the dropdown matching a `[data-dropdown]` trigger on click —\n   * acts as a toggle so keyboard/touch users can still dismiss it.\n   */\n  @Listen('click')\n  handleTriggerClick(event: MouseEvent) {\n    const target = event.target as HTMLElement | null;\n    const trigger = target?.closest?.('[data-dropdown]') as HTMLElement | null;\n    if (!trigger || !this.el.contains(trigger)) return;\n    const id = trigger.getAttribute('data-dropdown');\n    if (!id) return;\n    event.preventDefault();\n    event.stopPropagation();\n    this.cancelScheduledClose();\n    this.lastActiveTrigger = trigger;\n    this.toggleDropdown(id);\n  }\n\n  /**\n   * Open the dropdown matching a `[data-dropdown]` trigger on hover.\n   * Uses mouseover (which bubbles) and checks for the trigger ancestor.\n   */\n  @Listen('mouseover')\n  handleHover(event: MouseEvent) {\n    const target = event.target as HTMLElement | null;\n    const trigger = target?.closest?.('[data-dropdown]') as HTMLElement | null;\n    if (!trigger || !this.el.contains(trigger)) return;\n    const id = trigger.getAttribute('data-dropdown');\n    if (!id || this.activeDropdown === id) {\n      this.cancelScheduledClose();\n      return;\n    }\n    this.cancelScheduledClose();\n    this.lastActiveTrigger = trigger;\n    this.openDropdown(id);\n  }\n\n  /**\n   * When the pointer leaves the navbar entirely (including any open\n   * dropdown panel), schedule a close. Re-entering cancels it.\n   */\n  @Listen('mouseleave')\n  handleHostLeave() {\n    this.scheduleClose();\n  }\n\n  @Listen('mouseenter')\n  handleHostEnter() {\n    this.cancelScheduledClose();\n  }\n\n  private scheduleClose() {\n    // Short 100ms debounce so the mouse has time to cross any tiny\n    // dead-zone between the nav pill, the dropdown panel, and the\n    // items inside it without accidentally closing the panel. A\n    // re-entering mouseenter on the host cancels the pending close.\n    this.cancelScheduledClose();\n    this.closeTimer = window.setTimeout(() => {\n      this.closeDropdown();\n      this.closeTimer = undefined;\n    }, 100);\n  }\n\n  private cancelScheduledClose() {\n    if (this.closeTimer !== undefined) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = undefined;\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   * Keep the visibility of slotted dropdown panels, and the `data-active`\n   * flag on their triggers, in sync with the currently active dropdown.\n   * Each panel lives in the `dropdowns` slot and carries a `data-for`\n   * attribute that matches its trigger's id.\n   */\n  componentDidLoad() {\n    this.syncDropdownState();\n  }\n\n  componentDidUpdate() {\n    this.syncDropdownState();\n  }\n\n  private syncDropdownState() {\n    this.el.querySelectorAll<HTMLElement>('[data-for]').forEach((panel) => {\n      if (!this.el.contains(panel)) return;\n      panel.hidden = panel.getAttribute('data-for') !== this.activeDropdown;\n    });\n    this.el.querySelectorAll<HTMLElement>('[data-dropdown]').forEach((trigger) => {\n      if (!this.el.contains(trigger)) return;\n      const active = trigger.getAttribute('data-dropdown') === this.activeDropdown;\n      if (active) trigger.setAttribute('data-active', '');\n      else trigger.removeAttribute('data-active');\n      trigger.setAttribute('aria-expanded', active ? 'true' : 'false');\n    });\n  }\n\n  /**\n   * Handle escape key to close dropdowns. If a dropdown is open, restore\n   * focus to the trigger that opened it so keyboard users don't lose\n   * their place in the tab order.\n   */\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.activeDropdown !== null) {\n      const toFocus = this.lastActiveTrigger;\n      this.closeDropdown();\n      toFocus?.focus?.();\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=\"dropdowns\"></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              Note: only `name=\"mobile-button\"` here. We can't fall back\n              to `<slot name=\"button\">` because Stencil's scoped-mode slot\n              projection only matches a slot once per host — declaring the\n              same slot name in two template positions silently breaks\n              projection of the outer slot, leaving the desktop CTA\n              orphaned at the host root with no visual parent. Consumers\n              must explicitly slot a `mobile-button` (SiteHeader does). */}\n          <div class=\"mobile-button-container\">\n            <slot name=\"mobile-button\"></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"],"version":3}

package/dist/components/{p-DBkfDqnN.js → p-C_y6F4SM.js}

@@ -86,7 +86,7 @@ const AfTextarea = /*@__PURE__*/ proxyCustomElement(class AfTextarea extends H {
             'focused': this.isFocused,
             'hovered': this.isHovered && !this.disabled && !this.isFocused
         };
-        return (h(Host, { key: '88a61db3d3d625cb33566b0696ac7b7b3ac8d936' }, h("div", { key: '8648dea230fc9736ae3d37b65dc34e6e60fef966', class: wrapperClasses }, this.label && (h("div", { key: 'bb1a4c3d441623d6e57780f486d9b84b96197510', class: "label-row" }, h("label", { key: 'ef2bf25f44797127f45fe6db632678bfacf1bd58', class: "label", htmlFor: "textarea" }, this.label, this.required && h("span", { key: '8b844499eb020f76c526cd6be88695568f094315', class: "required" }, "*")), this.showInfoIcon && (h("button", { key: '76bbd8a0feb29ae8480228d155b78833e400da34', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, h("svg", { key: 'e9216ef96b54a2f6c6bb01f1e2d46a4483d0f37e', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '6a5b3020e369ef4eb21dcb1147530db1223478af', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '9ddd81bdf497d5589552d09fc54ddccfd69ca8bf', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'f6c12cb8e526e37ce99fe7f8993d4c79bdaba1d8', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: 'bccc36e8dfc14969b1e1133a3f6dc63a088ea85d', name: "label-end" }))), this.description && (h("p", { key: '996377a9fa9efb3e18339d5b4fcaa8fc71b2ab6f', class: "description" }, this.description)), h("div", { key: '3fedeb84278c68211e15915630bae5331a07a138', class: textareaContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("textarea", { key: '1a9d3873af28103d77ffda96d33db77caee1d72b', ref: (el) => this.textareaEl = el ?? undefined, id: "textarea", class: "textarea", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, rows: this.rows, maxlength: this.maxlength, minlength: this.minlength, style: { resize: this.resize }, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), hasError && (h("div", { key: '483e536c546f7b75d887827d070ea39af9932f0f', class: "error-row", id: "error-message" }, h("span", { key: 'caafe8df9d66a1fe32809a32f273347d56deeba5', class: "error-icon" }, h("svg", { key: '0ae4361974775f89a2f9ba69867e02465adcdfc4', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '098c189b4551f4714f40e4ebbba886dfcc9806f6', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'bb29173d7d17694493242b1742944fbbadb480a8', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '48a2fb783e0604e24f0c19ba9086cea72bc93b25', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: '01ba2e635e379805f9505e1e7ac7c5dcdd0fa270', class: "error-text" }, this.error))))));
+        return (h(Host, { key: '84f322a374d364669942e9153c6ba42221af1059' }, h("div", { key: '4b5a62e919a479bcf741f2d1d9e39a7b0e1e49ac', class: wrapperClasses }, this.label && (h("div", { key: 'e73b88c28588b8f3e5b9823467e8c972fd671391', class: "label-row" }, h("label", { key: '01c16777469e037495997efc2cacc51778fcd9c7', class: "label", htmlFor: "textarea" }, this.label, this.required && h("span", { key: '6da50443dadd3a6eec5655b4ff2fa19affa38006', class: "required" }, "*")), this.showInfoIcon && (h("button", { key: 'c731c726f54946273a330c0173f09faeb9fe583b', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, h("svg", { key: '24a1ee4fb10ebd9a84a897cefef09ad7e7b63565', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3523e8495fc5ffa06d793318f55ba79043174931', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'd2caa0b33fccc6289f00fc22fc329df52d86a6ed', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'db8d8ee03abe2638265d192be6efb992a6041199', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: '8325f2fc490d8261a596398da7cc68d74ccfce11', name: "label-end" }))), this.description && (h("p", { key: '7db9b0e06615f5a13b7759cd81c23ee6ab124769', class: "description" }, this.description)), h("div", { key: '939c306f7a56735956e2ef4badeb4cfa39abf759', class: textareaContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("textarea", { key: '0dffd719ed83955990ae1935fb8d39ab92fd9b94', ref: (el) => this.textareaEl = el ?? undefined, id: "textarea", class: "textarea", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, rows: this.rows, maxlength: this.maxlength, minlength: this.minlength, style: { resize: this.resize }, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), hasError && (h("div", { key: '1f7f83da7518216eb63ff9cb685ffb92b3b37fb1', class: "error-row", id: "error-message" }, h("span", { key: 'a1af53a449805506ac0abddae3a236232a538bd9', class: "error-icon" }, h("svg", { key: 'b52e5c14a8986c502e1e0dce8a95c7d381c7a8e3', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'af8c97b747c960065f7461e84c893e644b66d9c5', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '145226126e4ba52c6234b3c454e43d87b495789c', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '7b94917ac5c96c6abbfc93826b07fa967b49506a', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: '9f097e0c43b1a6b19d0275fed8a216e901ce2d86', class: "error-text" }, this.error))))));
     }
     static get style() { return afTextareaCss; }
 }, [257, "af-textarea", {
@@ -122,6 +122,6 @@ function defineCustomElement() {
 }
 
 export { AfTextarea as A, defineCustomElement as d };
-//# sourceMappingURL=p-DBkfDqnN.js.map
+//# sourceMappingURL=p-C_y6F4SM.js.map
 
-//# sourceMappingURL=p-DBkfDqnN.js.map
+//# sourceMappingURL=p-C_y6F4SM.js.map

package/dist/components/{p-DBkfDqnN.js.map → p-C_y6F4SM.js.map}

@@ -1 +1 @@
-{"file":"p-DBkfDqnN.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-textarea/af-textarea.css?tag=af-textarea&encapsulation=shadow","src/components/af-textarea/af-textarea.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* Wrapper */\n.textarea-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sds-size-space-200, 8px);\n  width: 100%;\n}\n\n/* Label row */\n.label-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.label {\n  flex: 1;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: 16px;\n  line-height: 24px;\n  color: var(--af-input-label, var(--af-typography-body-dark, #14343b));\n  cursor: default;\n}\n\n.required {\n  color: var(--af-input-error, var(--colour-error, #be292a));\n  margin-left: 2px;\n}\n\n/* Info icon button */\n.info-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--af-input-icon, var(--af-background-icon-default, #14343b));\n  flex-shrink: 0;\n}\n\n.info-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.info-icon:hover {\n  opacity: 0.7;\n}\n\n.info-icon:focus-visible {\n  outline: 2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n/* Description */\n.description {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  font-size: 16px;\n  line-height: 24px;\n  color: var(--af-input-description, var(--af-typography-body-default, #2b484f));\n  margin: 0;\n}\n\n/* Textarea container */\n.textarea-container {\n  display: flex;\n  background: var(--af-input-bg, #ffffff);\n  border: 1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));\n  border-radius: var(--radii-input, 8px);\n  transition: all 0.15s ease;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n/* Hover state */\n.textarea-container.hovered {\n  background: var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));\n  border-color: var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1));\n}\n\n/* Focus state */\n.textarea-container.focused {\n  background: var(--af-input-bg, #ffffff);\n  border-color: var(--af-input-border-active, var(--af-typography-body-dark, #14343b));\n  box-shadow: \n    0 0 0 4px var(--af-background-base, #ffffff), \n    0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n}\n\n/* Error state */\n.textarea-container.error {\n  border-color: var(--af-input-border-error, var(--colour-error, #be292a));\n}\n\n/* Disabled state */\n.textarea-container.disabled {\n  background: var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));\n  border-color: var(--af-input-border, var(--af-background-border-default, #d1ddda));\n  cursor: not-allowed;\n}\n\n/* Native textarea */\n.textarea {\n  flex: 1;\n  min-width: 0;\n  min-height: 108px;\n  padding: 12px 16px;\n  border: none;\n  background: transparent;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  font-size: 16px;\n  line-height: 24px;\n  color: var(--af-input-text, var(--af-typography-body-dark, #14343b));\n  outline: none;\n  resize: vertical;\n}\n\n.textarea::placeholder {\n  color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n  opacity: 1;\n}\n\n.textarea:disabled {\n  cursor: not-allowed;\n  color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n  resize: none;\n}\n\n.textarea:disabled::placeholder {\n  color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n}\n\n/* Error row */\n.error-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.error-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  color: var(--af-input-error, var(--colour-error, #be292a));\n}\n\n.error-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.error-text {\n  flex: 1;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  font-size: 16px;\n  line-height: 24px;\n  color: var(--af-input-error, var(--colour-error, #be292a));\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, State } from '@stencil/core';\n\n/**\n * Textarea component for multi-line text input with label, description, and error states.\n * \n * @slot label-end - Content to display at the end of the label (e.g., info icon)\n */\n@Component({\n  tag: 'af-textarea',\n  styleUrl: 'af-textarea.css',\n  shadow: true\n})\nexport class AfTextarea {\n  /**\n   * The label text for the textarea\n   */\n  @Prop() label?: string;\n\n  /**\n   * Description text displayed below the label\n   */\n  @Prop() description?: string;\n\n  /**\n   * Placeholder text for the textarea\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The current value of the textarea\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * The name of the textarea for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the textarea is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether the textarea is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether the textarea is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Error message to display (also sets error state)\n   */\n  @Prop() error?: string;\n\n  /**\n   * Whether to show the info icon next to the label\n   */\n  @Prop() showInfoIcon: boolean = false;\n\n  /**\n   * Number of visible rows (height)\n   */\n  @Prop() rows: number = 4;\n\n  /**\n   * Maximum length of input value\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * Minimum length of input value\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * Whether the textarea is resizable\n   */\n  @Prop() resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical';\n\n  /**\n   * Emitted when the textarea value changes\n   */\n  @Event() afInput!: EventEmitter<{ value: string }>;\n\n  /**\n   * Emitted when the textarea loses focus\n   */\n  @Event() afBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the textarea gains focus\n   */\n  @Event() afFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the info icon is clicked\n   */\n  @Event() afInfoClick!: EventEmitter<void>;\n\n  @State() private isFocused: boolean = false;\n  @State() private isHovered: boolean = false;\n\n  private textareaEl?: HTMLTextAreaElement;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLTextAreaElement;\n    this.value = target.value;\n    this.afInput.emit({ value: this.value });\n  };\n\n  private handleFocus = () => {\n    this.isFocused = true;\n    this.afFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n    this.afBlur.emit();\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovered = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovered = false;\n  };\n\n  private handleInfoClick = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.afInfoClick.emit();\n  };\n\n  render() {\n    const hasError = !!this.error;\n    const hasValue = !!(this.value && this.value.length > 0);\n\n    const wrapperClasses = {\n      'textarea-wrapper': true,\n      'disabled': this.disabled,\n      'error': hasError,\n      'focused': this.isFocused,\n      'hovered': this.isHovered && !this.disabled && !this.isFocused,\n      'populated': hasValue\n    };\n\n    const textareaContainerClasses = {\n      'textarea-container': true,\n      'disabled': this.disabled,\n      'error': hasError,\n      'focused': this.isFocused,\n      'hovered': this.isHovered && !this.disabled && !this.isFocused\n    };\n\n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          {/* Label */}\n          {this.label && (\n            <div class=\"label-row\">\n              <label class=\"label\" htmlFor=\"textarea\">\n                {this.label}\n                {this.required && <span class=\"required\">*</span>}\n              </label>\n              {this.showInfoIcon && (\n                <button \n                  type=\"button\" \n                  class=\"info-icon\" \n                  onClick={this.handleInfoClick}\n                  aria-label=\"More information\"\n                >\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </button>\n              )}\n              <slot name=\"label-end\"></slot>\n            </div>\n          )}\n\n          {/* Description */}\n          {this.description && (\n            <p class=\"description\">{this.description}</p>\n          )}\n\n          {/* Textarea container */}\n          <div \n            class={textareaContainerClasses}\n            onMouseEnter={this.handleMouseEnter}\n            onMouseLeave={this.handleMouseLeave}\n          >\n            {/* Native textarea */}\n            <textarea\n              ref={(el) => this.textareaEl = el ?? undefined}\n              id=\"textarea\"\n              class=\"textarea\"\n              name={this.name}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              required={this.required}\n              readonly={this.readonly}\n              rows={this.rows}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              style={{ resize: this.resize }}\n              aria-invalid={hasError ? 'true' : undefined}\n              aria-describedby={hasError ? 'error-message' : this.description ? 'description' : undefined}\n              onInput={this.handleInput}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n            />\n          </div>\n\n          {/* Error message */}\n          {hasError && (\n            <div class=\"error-row\" id=\"error-message\">\n              <span class=\"error-icon\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"error-text\">{this.error}</span>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"p-C_y6F4SM.js","mappings":";;AAAA,MAAM,aAAa,GAAG,+zGAA+zG;;MCYx0G,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;;;AAqBE;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAO3C;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOjC;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAErC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,CAAC;AAYxB;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAgD,UAAU;AAsBvD,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAC1B,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAInC,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B;AAClD,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;AACzB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAC1C,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,SAAC;AAEO,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACxB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;AACpB,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACvB,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACxB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAiB,KAAI;YAC9C,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACzB,SAAC;AAsGF;IApGC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;AAC7B,QAAA,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;AAExD,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,kBAAkB,EAAE,IAAI;YACxB,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,YAAA,OAAO,EAAE,QAAQ;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,YAAA,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS;AAC9D,YAAA,WAAW,EAAE;SACd;AAED,QAAA,MAAM,wBAAwB,GAAG;AAC/B,YAAA,oBAAoB,EAAE,IAAI;YAC1B,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,YAAA,OAAO,EAAE,QAAQ;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,YAAA,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC;SACtD;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EAEvB,IAAI,CAAC,KAAK,KACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAA,EACpC,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,QAAS,CAC3C,EACP,IAAI,CAAC,YAAY,KAChB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,IAAI,CAAC,eAAe,gBAClB,kBAAkB,EAAA,EAE7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,mHAAmH,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EACrN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,WAAW,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EAC7G,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,aAAa,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAiB,iBAAA,EAAA,OAAO,EAAE,CAAA,CAC3G,CACC,CACV,EACD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,WAAW,EAAA,CAAQ,CAC1B,CACP,EAGA,IAAI,CAAC,WAAW,KACf,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,WAAW,CAAK,CAC9C,EAGD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,wBAAwB,EAC/B,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAGnC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,IAAI,SAAS,EAC9C,EAAE,EAAC,UAAU,EACb,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAChB,cAAA,EAAA,QAAQ,GAAG,MAAM,GAAG,SAAS,EAAA,kBAAA,EACzB,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,EAC3F,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,GACvB,CACE,EAGL,QAAQ,KACP,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAC,EAAE,EAAC,eAAe,EAAA,EACvC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACtB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,mHAAmH,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EACrN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,WAAW,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EAC7G,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,aAAa,EAAC,MAAM,EAAC,cAAc,EAAc,cAAA,EAAA,KAAK,oBAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAA,CAAE,CAC3G,CACD,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CACxC,CACP,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-textarea/af-textarea.css?tag=af-textarea&encapsulation=shadow","src/components/af-textarea/af-textarea.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* Wrapper */\n.textarea-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sds-size-space-200, 8px);\n  width: 100%;\n}\n\n/* Label row */\n.label-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.label {\n  flex: 1;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: 16px;\n  line-height: 24px;\n  color: var(--af-input-label, var(--af-typography-body-dark, #14343b));\n  cursor: default;\n}\n\n.required {\n  color: var(--af-input-error, var(--colour-error, #be292a));\n  margin-left: 2px;\n}\n\n/* Info icon button */\n.info-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--af-input-icon, var(--af-background-icon-default, #14343b));\n  flex-shrink: 0;\n}\n\n.info-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.info-icon:hover {\n  opacity: 0.7;\n}\n\n.info-icon:focus-visible {\n  outline: 2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n/* Description */\n.description {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  font-size: 16px;\n  line-height: 24px;\n  color: var(--af-input-description, var(--af-typography-body-default, #2b484f));\n  margin: 0;\n}\n\n/* Textarea container */\n.textarea-container {\n  display: flex;\n  background: var(--af-input-bg, #ffffff);\n  border: 1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));\n  border-radius: var(--radii-input, 8px);\n  transition: all 0.15s ease;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n/* Hover state */\n.textarea-container.hovered {\n  background: var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));\n  border-color: var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1));\n}\n\n/* Focus state */\n.textarea-container.focused {\n  background: var(--af-input-bg, #ffffff);\n  border-color: var(--af-input-border-active, var(--af-typography-body-dark, #14343b));\n  box-shadow: \n    0 0 0 4px var(--af-background-base, #ffffff), \n    0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n}\n\n/* Error state */\n.textarea-container.error {\n  border-color: var(--af-input-border-error, var(--colour-error, #be292a));\n}\n\n/* Disabled state */\n.textarea-container.disabled {\n  background: var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));\n  border-color: var(--af-input-border, var(--af-background-border-default, #d1ddda));\n  cursor: not-allowed;\n}\n\n/* Native textarea */\n.textarea {\n  flex: 1;\n  min-width: 0;\n  min-height: 108px;\n  padding: 12px 16px;\n  border: none;\n  background: transparent;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  font-size: 16px;\n  line-height: 24px;\n  color: var(--af-input-text, var(--af-typography-body-dark, #14343b));\n  outline: none;\n  resize: vertical;\n}\n\n.textarea::placeholder {\n  color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n  opacity: 1;\n}\n\n.textarea:disabled {\n  cursor: not-allowed;\n  color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n  resize: none;\n}\n\n.textarea:disabled::placeholder {\n  color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n}\n\n/* Error row */\n.error-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.error-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n  color: var(--af-input-error, var(--colour-error, #be292a));\n}\n\n.error-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.error-text {\n  flex: 1;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  font-size: 16px;\n  line-height: 24px;\n  color: var(--af-input-error, var(--colour-error, #be292a));\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, State } from '@stencil/core';\n\n/**\n * Textarea component for multi-line text input with label, description, and error states.\n * \n * @slot label-end - Content to display at the end of the label (e.g., info icon)\n */\n@Component({\n  tag: 'af-textarea',\n  styleUrl: 'af-textarea.css',\n  shadow: true\n})\nexport class AfTextarea {\n  /**\n   * The label text for the textarea\n   */\n  @Prop() label?: string;\n\n  /**\n   * Description text displayed below the label\n   */\n  @Prop() description?: string;\n\n  /**\n   * Placeholder text for the textarea\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The current value of the textarea\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * The name of the textarea for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the textarea is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether the textarea is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether the textarea is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Error message to display (also sets error state)\n   */\n  @Prop() error?: string;\n\n  /**\n   * Whether to show the info icon next to the label\n   */\n  @Prop() showInfoIcon: boolean = false;\n\n  /**\n   * Number of visible rows (height)\n   */\n  @Prop() rows: number = 4;\n\n  /**\n   * Maximum length of input value\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * Minimum length of input value\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * Whether the textarea is resizable\n   */\n  @Prop() resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical';\n\n  /**\n   * Emitted when the textarea value changes\n   */\n  @Event() afInput!: EventEmitter<{ value: string }>;\n\n  /**\n   * Emitted when the textarea loses focus\n   */\n  @Event() afBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the textarea gains focus\n   */\n  @Event() afFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the info icon is clicked\n   */\n  @Event() afInfoClick!: EventEmitter<void>;\n\n  @State() private isFocused: boolean = false;\n  @State() private isHovered: boolean = false;\n\n  private textareaEl?: HTMLTextAreaElement;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLTextAreaElement;\n    this.value = target.value;\n    this.afInput.emit({ value: this.value });\n  };\n\n  private handleFocus = () => {\n    this.isFocused = true;\n    this.afFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n    this.afBlur.emit();\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovered = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovered = false;\n  };\n\n  private handleInfoClick = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.afInfoClick.emit();\n  };\n\n  render() {\n    const hasError = !!this.error;\n    const hasValue = !!(this.value && this.value.length > 0);\n\n    const wrapperClasses = {\n      'textarea-wrapper': true,\n      'disabled': this.disabled,\n      'error': hasError,\n      'focused': this.isFocused,\n      'hovered': this.isHovered && !this.disabled && !this.isFocused,\n      'populated': hasValue\n    };\n\n    const textareaContainerClasses = {\n      'textarea-container': true,\n      'disabled': this.disabled,\n      'error': hasError,\n      'focused': this.isFocused,\n      'hovered': this.isHovered && !this.disabled && !this.isFocused\n    };\n\n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          {/* Label */}\n          {this.label && (\n            <div class=\"label-row\">\n              <label class=\"label\" htmlFor=\"textarea\">\n                {this.label}\n                {this.required && <span class=\"required\">*</span>}\n              </label>\n              {this.showInfoIcon && (\n                <button \n                  type=\"button\" \n                  class=\"info-icon\" \n                  onClick={this.handleInfoClick}\n                  aria-label=\"More information\"\n                >\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </button>\n              )}\n              <slot name=\"label-end\"></slot>\n            </div>\n          )}\n\n          {/* Description */}\n          {this.description && (\n            <p class=\"description\">{this.description}</p>\n          )}\n\n          {/* Textarea container */}\n          <div \n            class={textareaContainerClasses}\n            onMouseEnter={this.handleMouseEnter}\n            onMouseLeave={this.handleMouseLeave}\n          >\n            {/* Native textarea */}\n            <textarea\n              ref={(el) => this.textareaEl = el ?? undefined}\n              id=\"textarea\"\n              class=\"textarea\"\n              name={this.name}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              required={this.required}\n              readonly={this.readonly}\n              rows={this.rows}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              style={{ resize: this.resize }}\n              aria-invalid={hasError ? 'true' : undefined}\n              aria-describedby={hasError ? 'error-message' : this.description ? 'description' : undefined}\n              onInput={this.handleInput}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n            />\n          </div>\n\n          {/* Error message */}\n          {hasError && (\n            <div class=\"error-row\" id=\"error-message\">\n              <span class=\"error-icon\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"error-text\">{this.error}</span>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/{p-G-vNzZpq.js → p-CnbO_hx0.js}

@@ -34,7 +34,7 @@ const AfCard = /*@__PURE__*/ proxyCustomElement(class AfCard extends H {
             'card': true,
             [`theme-${this.theme}`]: true
         };
-        return (h(Host, { key: '04dac55d2132d2f5cd096fa63c454ba273e09042' }, h("div", { key: '8bccd727f37b90e4e0652dfe00929c8f4a454c92', class: classes }, h("div", { key: 'a797a78d16dc7a32a53113f4cd8a164baa8e919b', class: "card__content" }, h("slot", { key: '04f40c7c79299d7c6c27f3c7c44c64aab6f7ae03' })))));
+        return (h(Host, { key: '9de4782fbf4c3ad9ad39995ea75e30ee469398b8' }, h("div", { key: '66a94666a4763e287c93da7d64835f305b554a9a', class: classes }, h("div", { key: 'ece7dfdff8e29597ba295f25e88e39f649f16fc0', class: "card__content" }, h("slot", { key: 'e8d4eadcaf2599b3496c07dafe9c4685467624b8' })))));
     }
     static get style() { return afCardCss; }
 }, [262, "af-card", {
@@ -57,6 +57,6 @@ function defineCustomElement() {
 }
 
 export { AfCard as A, defineCustomElement as d };
-//# sourceMappingURL=p-G-vNzZpq.js.map
+//# sourceMappingURL=p-CnbO_hx0.js.map
 
-//# sourceMappingURL=p-G-vNzZpq.js.map
+//# sourceMappingURL=p-CnbO_hx0.js.map

package/dist/components/{p-G-vNzZpq.js.map → p-CnbO_hx0.js.map}

@@ -1 +1 @@
-{"file":"p-G-vNzZpq.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4vHAA4vH;;MCgBjwH,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,YAAY;AAEpC;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEjD;;;;;;AAMG;AACsB,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAkBtD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;SAC1B;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":["/* Theme CSS custom properties follow the global token structure from @affinda/tokens */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Stretch Mode\n   \n   When stretch attribute is present, the card fills its container height\n   and uses flexbox to distribute space between children. This enables\n   equal-height cards in grid/flex layouts.\n   ========================================================================== */\n\n:host([stretch]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n:host([stretch]) .card {\n  flex: 1 1 auto;\n}\n\n:host([stretch]) .card__content {\n  flex: 1 1 auto;\n}\n\n/* ==========================================================================\n   Base Card Styles\n   ========================================================================== */\n\n.card {\n  /* radius-lg (20px) is the Affinda card corner — replaces the bespoke\n   * `--border-radius-card-level-1` that previously shimmed in at 32px.\n   * Consumers can still override by setting `--af-card-radius` on the host. */\n  border-radius: var(--af-card-radius, var(--radius-lg, 20px));\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n\n/* ==========================================================================\n   Interactive Mode\n   Opt-in hover lift for cards that are the primary click target. Adds a\n   subtle translateY and shadow on hover; the card is raised, not tinted,\n   so the themed background stays intact.\n   ========================================================================== */\n\n:host([interactive]) .card {\n  transition:\n    transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n    box-shadow var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n  will-change: transform;\n}\n\n:host([interactive]:hover) .card,\n:host([interactive]:focus-within) .card {\n  transform: translateY(-2px);\n  box-shadow: var(--shadow-lift, 0 12px 32px -8px rgba(20, 52, 59, 0.18), 0 4px 10px -4px rgba(20, 52, 59, 0.08));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([interactive]) .card {\n    transition-duration: 0.01ms;\n  }\n  :host([interactive]:hover) .card,\n  :host([interactive]:focus-within) .card {\n    transform: none;\n  }\n}\n\n/* ==========================================================================\n   Theme Variants\n   \n   Background colors from Figma tokens:\n   - white: #ffffff (Colour/Brand/White)\n   - white-ivory: #fff9ee (Colour/Brand/Ivory-Paper)\n   - inkwell: #14343b (Colour/Brand/Inkwell)\n   - mist-green: #c6d5d1 (Colour/Brand/Mist-Green)\n   - soft-clay: #c0ab8d (Colour/Softclay/400)\n   ========================================================================== */\n\n/* WHITE THEME */\n.card.theme-white {\n  background-color: var(--colour-brand-white, #ffffff);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n}\n\n/* WHITE-IVORY THEME */\n.card.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n}\n\n/* INKWELL THEME (Dark) */\n.card.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  \n  /* Typography - light colors on dark background */\n  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n  --af-background-level-1: var(--colour-inkwell-450, #203e45);\n  \n  /* Button variants for dark theme */\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-text: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-icon: var(--colour-brand-white, #ffffff);\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/* MIST-GREEN THEME */\n.card.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n}\n\n/* SOFT-CLAY THEME */\n.card.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Typography */\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-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-softclay-500, #b09670);\n}\n\n/* ==========================================================================\n   Card Content\n   ========================================================================== */\n\n.card__content {\n  position: relative;\n  padding: var(--af-card-padding, 40px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--af-card-gap, 24px);\n  flex: 1;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Heading spacing within cards */\n.card__content ::slotted(af-heading) {\n  margin-bottom: 0;\n}\n\n/* Text line-height within cards */\n.card__content ::slotted(af-text) {\n  line-height: 1.44;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { Theme } from '../../types';\n\n/**\n * Card atom component - a themed container with consistent styling.\n * Provides theme context to children via CSS custom properties.\n * \n * This is a base building block used by molecule components like\n * af-feature-card and af-illustrated-card.\n */\n@Component({\n  tag: 'af-card',\n  styleUrl: 'af-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfCard {\n  /**\n   * Theme - sets background color and provides theme context to children.\n   * Defaults to 'mist-green' if not specified.\n   */\n  @Prop() theme?: Theme = 'mist-green';\n\n  /**\n   * When true, the card stretches to fill its container height.\n   * Use this when the card is in a flex/grid container and needs to\n   * participate in equal-height layouts. The card's content will use\n   * flexbox to distribute space between children.\n   */\n  @Prop({ reflect: true }) stretch: boolean = false;\n\n  /**\n   * When true, the card reacts to pointer hover with a subtle lift\n   * (translateY + shadow). Use for cards that are themselves the primary\n   * click target (e.g. wrapped in an `<a>` or using `onClick`). Purely\n   * cosmetic — does not change focus or click behaviour. Honours\n   * `prefers-reduced-motion: reduce`.\n   */\n  @Prop({ reflect: true }) interactive: boolean = false;\n\n  render() {\n    const classes = {\n      'card': true,\n      [`theme-${this.theme}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"card__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CnbO_hx0.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4vHAA4vH;;MCgBjwH,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,YAAY;AAEpC;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEjD;;;;;;AAMG;AACsB,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAkBtD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;SAC1B;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":["/* Theme CSS custom properties follow the global token structure from @affinda/tokens */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Stretch Mode\n   \n   When stretch attribute is present, the card fills its container height\n   and uses flexbox to distribute space between children. This enables\n   equal-height cards in grid/flex layouts.\n   ========================================================================== */\n\n:host([stretch]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n:host([stretch]) .card {\n  flex: 1 1 auto;\n}\n\n:host([stretch]) .card__content {\n  flex: 1 1 auto;\n}\n\n/* ==========================================================================\n   Base Card Styles\n   ========================================================================== */\n\n.card {\n  /* radius-lg (20px) is the Affinda card corner — replaces the bespoke\n   * `--border-radius-card-level-1` that previously shimmed in at 32px.\n   * Consumers can still override by setting `--af-card-radius` on the host. */\n  border-radius: var(--af-card-radius, var(--radius-lg, 20px));\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n\n/* ==========================================================================\n   Interactive Mode\n   Opt-in hover lift for cards that are the primary click target. Adds a\n   subtle translateY and shadow on hover; the card is raised, not tinted,\n   so the themed background stays intact.\n   ========================================================================== */\n\n:host([interactive]) .card {\n  transition:\n    transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),\n    box-shadow var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));\n  will-change: transform;\n}\n\n:host([interactive]:hover) .card,\n:host([interactive]:focus-within) .card {\n  transform: translateY(-2px);\n  box-shadow: var(--shadow-lift, 0 12px 32px -8px rgba(20, 52, 59, 0.18), 0 4px 10px -4px rgba(20, 52, 59, 0.08));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([interactive]) .card {\n    transition-duration: 0.01ms;\n  }\n  :host([interactive]:hover) .card,\n  :host([interactive]:focus-within) .card {\n    transform: none;\n  }\n}\n\n/* ==========================================================================\n   Theme Variants\n   \n   Background colors from Figma tokens:\n   - white: #ffffff (Colour/Brand/White)\n   - white-ivory: #fff9ee (Colour/Brand/Ivory-Paper)\n   - inkwell: #14343b (Colour/Brand/Inkwell)\n   - mist-green: #c6d5d1 (Colour/Brand/Mist-Green)\n   - soft-clay: #c0ab8d (Colour/Softclay/400)\n   ========================================================================== */\n\n/* WHITE THEME */\n.card.theme-white {\n  background-color: var(--colour-brand-white, #ffffff);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n}\n\n/* WHITE-IVORY THEME */\n.card.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n}\n\n/* INKWELL THEME (Dark) */\n.card.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  \n  /* Typography - light colors on dark background */\n  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n  --af-background-level-1: var(--colour-inkwell-450, #203e45);\n  \n  /* Button variants for dark theme */\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-text: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-icon: var(--colour-brand-white, #ffffff);\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/* MIST-GREEN THEME */\n.card.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n}\n\n/* SOFT-CLAY THEME */\n.card.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Typography */\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-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-softclay-500, #b09670);\n}\n\n/* ==========================================================================\n   Card Content\n   ========================================================================== */\n\n.card__content {\n  position: relative;\n  padding: var(--af-card-padding, 40px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--af-card-gap, 24px);\n  flex: 1;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Heading spacing within cards */\n.card__content ::slotted(af-heading) {\n  margin-bottom: 0;\n}\n\n/* Text line-height within cards */\n.card__content ::slotted(af-text) {\n  line-height: 1.44;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { Theme } from '../../types';\n\n/**\n * Card atom component - a themed container with consistent styling.\n * Provides theme context to children via CSS custom properties.\n * \n * This is a base building block used by molecule components like\n * af-feature-card and af-illustrated-card.\n */\n@Component({\n  tag: 'af-card',\n  styleUrl: 'af-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfCard {\n  /**\n   * Theme - sets background color and provides theme context to children.\n   * Defaults to 'mist-green' if not specified.\n   */\n  @Prop() theme?: Theme = 'mist-green';\n\n  /**\n   * When true, the card stretches to fill its container height.\n   * Use this when the card is in a flex/grid container and needs to\n   * participate in equal-height layouts. The card's content will use\n   * flexbox to distribute space between children.\n   */\n  @Prop({ reflect: true }) stretch: boolean = false;\n\n  /**\n   * When true, the card reacts to pointer hover with a subtle lift\n   * (translateY + shadow). Use for cards that are themselves the primary\n   * click target (e.g. wrapped in an `<a>` or using `onClick`). Purely\n   * cosmetic — does not change focus or click behaviour. Honours\n   * `prefers-reduced-motion: reduce`.\n   */\n  @Prop({ reflect: true }) interactive: boolean = false;\n\n  render() {\n    const classes = {\n      'card': true,\n      [`theme-${this.theme}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"card__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-C0enaaNi.js → p-DQF6qg3h.js}

@@ -80,7 +80,7 @@ const AfTabBar = /*@__PURE__*/ proxyCustomElement(class AfTabBar extends H {
             [`shape-${this.shape}`]: true,
             [`breakpoint-${this.breakpoint}`]: true,
         };
-        return (h(Host, { key: '79e200382e16ac4fde0bef958763373b01d24feb', role: "tablist" }, h("div", { key: '703f11c9ed35f8163feba14a6056435c420ccf49', class: containerClasses }, h("slot", { key: '959d4581b14fd720f00f2faaf5b9845d9faa367a' }))));
+        return (h(Host, { key: 'b1fa40c2156ac7271650aafd27d369c3a8224f44', role: "tablist" }, h("div", { key: 'e92eaef79f5df92cca1b2170218df2668afc031d', class: containerClasses }, h("slot", { key: '307aea867005fe40899b54d9fe1e31ecca0528e8' }))));
     }
     get el() { return this; }
     static get style() { return afTabBarCss; }
@@ -103,6 +103,6 @@ function defineCustomElement() {
 }
 
 export { AfTabBar as A, defineCustomElement as d };
-//# sourceMappingURL=p-C0enaaNi.js.map
+//# sourceMappingURL=p-DQF6qg3h.js.map
 
-//# sourceMappingURL=p-C0enaaNi.js.map
+//# sourceMappingURL=p-DQF6qg3h.js.map

package/dist/components/{p-C0enaaNi.js.map → p-DQF6qg3h.js.map}

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

package/dist/components/{p-sxltTNnO.js → p-DQFOagz0.js}

@@ -20,7 +20,7 @@ const AfImage = /*@__PURE__*/ proxyCustomElement(class AfImage extends H {
         this.shape = 'rounded';
     }
     render() {
-        return (h(Host, { key: '9e6de616aae4375e3b2e734edd095f392aa8ef1b' }, h("div", { key: '69d0eb9902766ff13f04d85c4737a5d322e63417', class: `image-container image-container--${this.shape}` }, h("img", { key: 'cddfe6dedc57a63318d7a970747cda8641c4f83b', src: this.src, alt: this.alt, class: "image" }), h("div", { key: '23e0a9195e06da984aee8da6edc273a6367a7852', class: "image-border", "aria-hidden": "true" }))));
+        return (h(Host, { key: 'a8954272f3c0defc0b9e33d5f3221c6e1083d927' }, h("div", { key: '2fd3bad5b46360cac57d069031ec2f69103f6542', class: `image-container image-container--${this.shape}` }, h("img", { key: '72a11cde6b65481320d8b6a1d65e85862d4a449e', src: this.src, alt: this.alt, class: "image" }), h("div", { key: '7727e1ac4179e96f8c8928de678136337bd82f44', class: "image-border", "aria-hidden": "true" }))));
     }
     static get style() { return afImageCss; }
 }, [258, "af-image", {
@@ -43,6 +43,6 @@ function defineCustomElement() {
 }
 
 export { AfImage as A, defineCustomElement as d };
-//# sourceMappingURL=p-sxltTNnO.js.map
+//# sourceMappingURL=p-DQFOagz0.js.map
 
-//# sourceMappingURL=p-sxltTNnO.js.map
+//# sourceMappingURL=p-DQFOagz0.js.map

package/dist/components/{p-sxltTNnO.js.map → p-DQFOagz0.js.map}

@@ -1 +1 @@
-{"file":"p-sxltTNnO.js","mappings":";;AAAA,MAAM,UAAU,GAAG,0vBAA0vB;;MCYhwB,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AANpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAiBE;;;;;;;;AAQG;AACK,QAAA,IAAK,CAAA,KAAA,GAA4D,SAAS;AAYnF;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,iCAAA,EAAoC,IAAI,CAAC,KAAK,CAAE,CAAA,EAAA,EAC1D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,OAAO,EAAG,CAAA,EACnD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,aAAA,EAAa,MAAM,EAAO,CAAA,CAC/C,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-image/af-image.css?tag=af-image&encapsulation=scoped","src/components/af-image/af-image.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.image-container {\n  position: relative;\n  overflow: hidden;\n}\n\n/* Shape variants — matches Webflow's rounded-edge image treatments */\n.image-container--rounded {\n  border-radius: var(--radius-md, 12px);\n}\n\n.image-container--rounded-left {\n  border-top-left-radius: var(--radius-md, 12px);\n  border-bottom-left-radius: var(--radius-md, 12px);\n}\n\n.image-container--rounded-right {\n  border-top-right-radius: var(--radius-md, 12px);\n  border-bottom-right-radius: var(--radius-md, 12px);\n}\n\n.image-container--square {\n  border-radius: 0;\n}\n\n.image {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n}\n\n/* Inset border overlay — inherits the host's border radius via parent clip */\n.image-border {\n  position: absolute;\n  inset: 0;\n  box-shadow: inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));\n  pointer-events: none;\n  border-radius: inherit;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A styled image container with rounded corners and a subtle inset border.\n * Provides consistent image styling across the design system.\n */\n@Component({\n  tag: 'af-image',\n  styleUrl: 'af-image.css',\n  shadow: false,\n  scoped: true\n})\nexport class AfImage {\n  /**\n   * The image source URL\n   */\n  @Prop() src!: string;\n\n  /**\n   * Alternative text for the image (required for accessibility)\n   */\n  @Prop() alt!: string;\n\n  /**\n   * Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*`\n   * patterns where only one edge is rounded so the image bleeds into a\n   * neighbouring section.\n   * - `rounded` (default) — symmetric rounded corners on all four sides.\n   * - `rounded-left` — rounded only on the left edge (top-left + bottom-left).\n   * - `rounded-right` — rounded only on the right edge.\n   * - `square` — no corner rounding.\n   */\n  @Prop() shape: 'rounded' | 'rounded-left' | 'rounded-right' | 'square' = 'rounded';\n\n  render() {\n    return (\n      <Host>\n        <div class={`image-container image-container--${this.shape}`}>\n          <img src={this.src} alt={this.alt} class=\"image\" />\n          <div class=\"image-border\" aria-hidden=\"true\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DQFOagz0.js","mappings":";;AAAA,MAAM,UAAU,GAAG,0vBAA0vB;;MCYhwB,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AANpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAiBE;;;;;;;;AAQG;AACK,QAAA,IAAK,CAAA,KAAA,GAA4D,SAAS;AAYnF;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,iCAAA,EAAoC,IAAI,CAAC,KAAK,CAAE,CAAA,EAAA,EAC1D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,OAAO,EAAG,CAAA,EACnD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,aAAA,EAAa,MAAM,EAAO,CAAA,CAC/C,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-image/af-image.css?tag=af-image&encapsulation=scoped","src/components/af-image/af-image.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.image-container {\n  position: relative;\n  overflow: hidden;\n}\n\n/* Shape variants — matches Webflow's rounded-edge image treatments */\n.image-container--rounded {\n  border-radius: var(--radius-md, 12px);\n}\n\n.image-container--rounded-left {\n  border-top-left-radius: var(--radius-md, 12px);\n  border-bottom-left-radius: var(--radius-md, 12px);\n}\n\n.image-container--rounded-right {\n  border-top-right-radius: var(--radius-md, 12px);\n  border-bottom-right-radius: var(--radius-md, 12px);\n}\n\n.image-container--square {\n  border-radius: 0;\n}\n\n.image {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n}\n\n/* Inset border overlay — inherits the host's border radius via parent clip */\n.image-border {\n  position: absolute;\n  inset: 0;\n  box-shadow: inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));\n  pointer-events: none;\n  border-radius: inherit;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A styled image container with rounded corners and a subtle inset border.\n * Provides consistent image styling across the design system.\n */\n@Component({\n  tag: 'af-image',\n  styleUrl: 'af-image.css',\n  shadow: false,\n  scoped: true\n})\nexport class AfImage {\n  /**\n   * The image source URL\n   */\n  @Prop() src!: string;\n\n  /**\n   * Alternative text for the image (required for accessibility)\n   */\n  @Prop() alt!: string;\n\n  /**\n   * Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*`\n   * patterns where only one edge is rounded so the image bleeds into a\n   * neighbouring section.\n   * - `rounded` (default) — symmetric rounded corners on all four sides.\n   * - `rounded-left` — rounded only on the left edge (top-left + bottom-left).\n   * - `rounded-right` — rounded only on the right edge.\n   * - `square` — no corner rounding.\n   */\n  @Prop() shape: 'rounded' | 'rounded-left' | 'rounded-right' | 'square' = 'rounded';\n\n  render() {\n    return (\n      <Host>\n        <div class={`image-container image-container--${this.shape}`}>\n          <img src={this.src} alt={this.alt} class=\"image\" />\n          <div class=\"image-border\" aria-hidden=\"true\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DjjPGV3a.js → p-DdH3uwBx.js}

@@ -17,8 +17,8 @@ const AfSection = /*@__PURE__*/ proxyCustomElement(class AfSection extends H {
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: '68d5433974bb7213d103836ed6f9b06a067fc52a' });
-        return (h(Host, { key: 'd4e9437832b34127a5ed32d8eb6a9d9b09b887e7' }, h("div", { key: '92d24d2430a57a5e592cccdfea3e85daff729bea', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
+        const content = h("slot", { key: '6c300093d45c3f5a029ef4ad367fb6796c392d56' });
+        return (h(Host, { key: '05da4bf23a6c5aba61b21d1536cf615cd0176cfb' }, h("div", { key: '3ec6bacbd5acef49183afa406efbe9301287a086', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
     }
     static get style() { return afSectionCss; }
 }, [262, "af-section", {
@@ -46,6 +46,6 @@ function defineCustomElement() {
 }
 
 export { AfSection as A, defineCustomElement as d };
-//# sourceMappingURL=p-DjjPGV3a.js.map
+//# sourceMappingURL=p-DdH3uwBx.js.map
 
-//# sourceMappingURL=p-DjjPGV3a.js.map
+//# sourceMappingURL=p-DdH3uwBx.js.map