@affinda/wc 0.4.0 → 0.4.2

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

package/dist/components/{p-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

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

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

package/dist/components/{p-Bi6_eN-1.js → p-DnDXrxJ7.js}

@@ -30,7 +30,7 @@ const AfFieldset = /*@__PURE__*/ proxyCustomElement(class AfFieldset extends H {
             'items': true,
             [`orientation-${this.orientation}`]: true
         };
-        return (h(Host, { key: '907af09a079116df5906d3ee63454c6d788e98f9' }, h("fieldset", { key: '30396861eb6e071b740edcfcbe79b08a8f94ccac', class: fieldsetClasses, disabled: this.disabled }, this.legend && (h("legend", { key: 'c4e3f1936945e5cdaa9d7a735970fd06926fe2e5', class: "legend" }, this.legend)), h("div", { key: 'a3a2446d6f061bab988ef2dcbe1721d650fb4823', class: itemsClasses }, h("slot", { key: '1aec6fa9ab398e634c0b3eec3d5287a206609bfe' })))));
+        return (h(Host, { key: '367a58328f883d5df31989021ad7dba14ed3ab6c' }, h("fieldset", { key: 'f43a04b8808db04886a0997b42593af2445b185d', class: fieldsetClasses, disabled: this.disabled }, this.legend && (h("legend", { key: 'fc08d5e1464ffeb00005fda04169ceb2654a00b8', class: "legend" }, this.legend)), h("div", { key: '815f2dc77dc417791e1a3d736e1b0ce91250a325', class: itemsClasses }, h("slot", { key: 'd080ec923b57a3ae95cc868be6bf42b57df08e7a' })))));
     }
     static get style() { return afFieldsetCss; }
 }, [257, "af-fieldset", {
@@ -53,6 +53,6 @@ function defineCustomElement() {
 }
 
 export { AfFieldset as A, defineCustomElement as d };
-//# sourceMappingURL=p-Bi6_eN-1.js.map
+//# sourceMappingURL=p-DnDXrxJ7.js.map
 
-//# sourceMappingURL=p-Bi6_eN-1.js.map
+//# sourceMappingURL=p-DnDXrxJ7.js.map

package/dist/components/{p-Bi6_eN-1.js.map → p-DnDXrxJ7.js.map}

@@ -1 +1 @@
-{"file":"p-Bi6_eN-1.js","mappings":";;AAAA,MAAM,aAAa,GAAG,40BAA40B;;MCar1B,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAWE;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AAE3D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA2BnD;IAzBC,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG;AACtB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;YACzC,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG;SACtC;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACtD,IAAI,CAAC,MAAM,KACV,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAE,EAAA,IAAI,CAAC,MAAM,CAAU,CAC9C,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACG,CACN;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-fieldset/af-fieldset.css?tag=af-fieldset&encapsulation=shadow","src/components/af-fieldset/af-fieldset.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.fieldset {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0;\n  margin: 0;\n  min-inline-size: 0;\n}\n\n.fieldset.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Legend/heading styling - uses heading 5 style */\n.legend {\n  display: block;\n  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: var(--font-size-heading-5-desktop, 20px);\n  line-height: var(--line-height-heading-relaxed, 1.2);\n  letter-spacing: var(--letter-spacing-heading, -0.02em);\n  /* Inherit color from theme context via CSS custom property */\n  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n  padding: 0;\n  margin: 0 0 12px 0;\n  width: 100%;\n}\n\n/* Items container */\n.items {\n  display: flex;\n}\n\n/* Vertical layout */\n.items.orientation-vertical {\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n}\n\n/* Horizontal layout */\n.items.orientation-horizontal {\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 28px;\n  align-items: center;\n}\n\n/* Slotted content styling */\n::slotted(*) {\n  flex-shrink: 0;\n}\n\n/* Full width items in vertical layout */\n.items.orientation-vertical ::slotted(*) {\n  width: 100%;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * Fieldset component for grouping related form controls.\n * Supports vertical and horizontal layouts with an optional legend/heading.\n * \n * @slot - Form controls (checkboxes, radios, etc.)\n */\n@Component({\n  tag: 'af-fieldset',\n  styleUrl: 'af-fieldset.css',\n  shadow: true\n})\nexport class AfFieldset {\n  /**\n   * The legend/heading text for the fieldset\n   */\n  @Prop() legend?: string;\n\n  /**\n   * The layout orientation of the fieldset items\n   * - `vertical` - Items stack vertically (default)\n   * - `horizontal` - Items are laid out horizontally\n   */\n  @Prop() orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Whether the fieldset is disabled (disables all child controls)\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  render() {\n    const fieldsetClasses = {\n      'fieldset': true,\n      [`orientation-${this.orientation}`]: true,\n      'disabled': this.disabled\n    };\n\n    const itemsClasses = {\n      'items': true,\n      [`orientation-${this.orientation}`]: true\n    };\n\n    return (\n      <Host>\n        <fieldset class={fieldsetClasses} disabled={this.disabled}>\n          {this.legend && (\n            <legend class=\"legend\">{this.legend}</legend>\n          )}\n          <div class={itemsClasses}>\n            <slot></slot>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"p-DnDXrxJ7.js","mappings":";;AAAA,MAAM,aAAa,GAAG,40BAA40B;;MCar1B,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAWE;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AAE3D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA2BnD;IAzBC,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG;AACtB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;YACzC,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,CAAC,eAAe,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG;SACtC;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACtD,IAAI,CAAC,MAAM,KACV,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAE,EAAA,IAAI,CAAC,MAAM,CAAU,CAC9C,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACG,CACN;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-fieldset/af-fieldset.css?tag=af-fieldset&encapsulation=shadow","src/components/af-fieldset/af-fieldset.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.fieldset {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0;\n  margin: 0;\n  min-inline-size: 0;\n}\n\n.fieldset.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Legend/heading styling - uses heading 5 style */\n.legend {\n  display: block;\n  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: var(--font-size-heading-5-desktop, 20px);\n  line-height: var(--line-height-heading-relaxed, 1.2);\n  letter-spacing: var(--letter-spacing-heading, -0.02em);\n  /* Inherit color from theme context via CSS custom property */\n  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n  padding: 0;\n  margin: 0 0 12px 0;\n  width: 100%;\n}\n\n/* Items container */\n.items {\n  display: flex;\n}\n\n/* Vertical layout */\n.items.orientation-vertical {\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n}\n\n/* Horizontal layout */\n.items.orientation-horizontal {\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 28px;\n  align-items: center;\n}\n\n/* Slotted content styling */\n::slotted(*) {\n  flex-shrink: 0;\n}\n\n/* Full width items in vertical layout */\n.items.orientation-vertical ::slotted(*) {\n  width: 100%;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * Fieldset component for grouping related form controls.\n * Supports vertical and horizontal layouts with an optional legend/heading.\n * \n * @slot - Form controls (checkboxes, radios, etc.)\n */\n@Component({\n  tag: 'af-fieldset',\n  styleUrl: 'af-fieldset.css',\n  shadow: true\n})\nexport class AfFieldset {\n  /**\n   * The legend/heading text for the fieldset\n   */\n  @Prop() legend?: string;\n\n  /**\n   * The layout orientation of the fieldset items\n   * - `vertical` - Items stack vertically (default)\n   * - `horizontal` - Items are laid out horizontally\n   */\n  @Prop() orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Whether the fieldset is disabled (disables all child controls)\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  render() {\n    const fieldsetClasses = {\n      'fieldset': true,\n      [`orientation-${this.orientation}`]: true,\n      'disabled': this.disabled\n    };\n\n    const itemsClasses = {\n      'items': true,\n      [`orientation-${this.orientation}`]: true\n    };\n\n    return (\n      <Host>\n        <fieldset class={fieldsetClasses} disabled={this.disabled}>\n          {this.legend && (\n            <legend class=\"legend\">{this.legend}</legend>\n          )}\n          <div class={itemsClasses}>\n            <slot></slot>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/{p-PKWusChD.js → p-DobkLkti.js}

@@ -97,7 +97,7 @@ const AfInput = /*@__PURE__*/ proxyCustomElement(class AfInput extends H {
             'focused': this.isFocused,
             'hovered': this.isHovered && !this.disabled && !this.isFocused
         };
-        return (h(Host, { key: '9a522c670151a1516a44adee5dbde584fb3c14c9' }, h("div", { key: 'a8c11791541fc36ea5a031bee264dbb8c7ac70b5', class: wrapperClasses }, this.label && (h("div", { key: '3b39ad4f6a95993a3dbd15705700ee3be8ee486e', class: "label-row" }, h("label", { key: 'dedb511f764b297bb9369371e87232c5e9df844c', class: "label", htmlFor: "input" }, this.label, this.required && h("span", { key: 'fa84af21fde73e3f6039a0f424e4732ae6864d01', class: "required" }, "*")), this.showInfoIcon && (h("button", { key: '168782ec2bfedc885e116b6a35f6c4754ca4e365', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, h("svg", { key: '63dbaa4cf9cad54d265cc825d55d8a1c61730daa', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0b8282a44bbcab40475cba2414c823cd95aed951', 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: '73738a35aac3f342da51e35603dc4a6904e8dcd9', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'f1e6842fe546be8cf91c09cb8cf689d81bf37c17', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: '1834dcd2859cf2109a4c2a7da7ac51350c0aa9af', name: "label-end" }))), this.description && (h("p", { key: '9395611a3534716fe12084c50316a39574c3f776', class: "description" }, this.description)), h("div", { key: '3001d7d3978cf3fc77b67218ea2e65c50776279d', class: inputContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.showSearchIcon && (h("span", { key: 'ba8cbed367435a826b527c8d90e9ae3a3c7c71f3', class: "search-icon" }, h("svg", { key: 'f1b270e8150cf316f245aef92d487bdc713d064c', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'b9af43201dc60c25de4432ed9375f285aed47ec9', d: "M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'ab3781c2490f2be9eb30efabd6337733ffd5c3c2', d: "M21 21L16.65 16.65", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("input", { key: '9906b9e2d156ba550d06ab81216b229b3d419e55', ref: (el) => this.inputEl = el ?? undefined, id: "input", class: "input", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, autocomplete: this.autocomplete, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.clearable && hasValue && !this.disabled && !this.readonly && (h("button", { key: 'd111e6b281155b4e2c5f246e6cc64beabe76964c', type: "button", class: "clear-button", onClick: this.handleClear, "aria-label": "Clear input" }, h("svg", { key: '7407dd87396fb727fe4a59f2064d388415217940', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0ba0ff91cd2bfd858d70d09aa3d095a9451c3e2b', d: "M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'e4d5d312ccaa5eb15ee96c472b578267fa47372b', d: "M6 6L18 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), hasError && (h("div", { key: '8405822d377b18ae21d35be6bd31a6ac825f4c00', class: "error-row", id: "error-message" }, h("span", { key: '95470e89406d542f6d1b9c8ec82801be59a93cf0', class: "error-icon" }, h("svg", { key: '6cb6f912402c5430de050ef9de49f09ed090a7f6', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '167db09d25a30fd1722f392b6b2581e270550e45', 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: '09c07b746d9fe73c0738a430699d3275566e6eec', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '1c3bc5389ee09827dce8253c850f39f86702abce', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: 'e310d4184654e7e8d4cad099c4dd8c247e674ba0', class: "error-text" }, this.error))))));
+        return (h(Host, { key: '5bf8980e12ad5fc3b8b84df3acc749bddf61042d' }, h("div", { key: 'd0266eca85871397ed73381ca3d36f3dc2dd79ce', class: wrapperClasses }, this.label && (h("div", { key: 'f9fc2fe3f52a1f9be1404943d91489357ea941dc', class: "label-row" }, h("label", { key: '76283a7f0c9be127aa8c9115fcbc26b2d67d51cc', class: "label", htmlFor: "input" }, this.label, this.required && h("span", { key: '6b0de23e857abfdd25d6eefaa6ff22f22fa813dd', class: "required" }, "*")), this.showInfoIcon && (h("button", { key: '7c5f7a47a8357301f3fe28d6078bdec3ec1160c3', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, h("svg", { key: '655c9448589937c2047a58962f78ab1872e0da84', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5066c29389ac8f9e1e27771f43a98f75f9b03634', 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: '1993da070066d33575618267d6af5b13b641143b', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'dd99ac12d4a23b98c98fca1df34916968276fc0e', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: 'b406de5a455af79a69497c6a641b5c41347ee1ab', name: "label-end" }))), this.description && (h("p", { key: '0dcebb186df7055efb168f96ad4199e2f614a87c', class: "description" }, this.description)), h("div", { key: '754b8a3e67d5807d7d484d475d31913dee8004f4', class: inputContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.showSearchIcon && (h("span", { key: '5757962a3479a6cd1f12bd1da183919af69ad9f4', class: "search-icon" }, h("svg", { key: '4106175e5b41e4c978b38eda6db36799a6a6f762', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1d54b9a8c682c9049e97b28143f0dcd90e068dee', d: "M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'd3ed0187abde8c14eae462612c918e10cb46916d', d: "M21 21L16.65 16.65", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("input", { key: 'fb7a551d44282686732b78865bab8720c5e08830', ref: (el) => this.inputEl = el ?? undefined, id: "input", class: "input", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, autocomplete: this.autocomplete, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.clearable && hasValue && !this.disabled && !this.readonly && (h("button", { key: '6ad41a3ee4ffdbeefa11e45754a22143b33405e5', type: "button", class: "clear-button", onClick: this.handleClear, "aria-label": "Clear input" }, h("svg", { key: '129f73660030e81ff17071fae51bb34af23eca57', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '78d4c71521ac7daced7023c5bcfb2bfccf593fab', d: "M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '4eb85452029e8347dd648dcc849fa000b41b7fea', d: "M6 6L18 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), hasError && (h("div", { key: 'cc3b6083e88bb99ec17edffbf95ec89e2bb27e97', class: "error-row", id: "error-message" }, h("span", { key: 'fe264a854aaebe481a6913275859ca57b1d61d0d', class: "error-icon" }, h("svg", { key: '1159f77b184d1888c5c5ebe6138070c66abb66e6', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '59975a202086127c2548843e842d33895d6ba1ff', 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: '11c79f296c1dce73beebd67eeefe3d71b17ee191', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '9f146c96a38b14afb1919cf480224ee520ac16b0', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: '2d326d0d72727dca4c4839fb5279323e556fbe04', class: "error-text" }, this.error))))));
     }
     static get style() { return afInputCss; }
 }, [257, "af-input", {
@@ -136,6 +136,6 @@ function defineCustomElement() {
 }
 
 export { AfInput as A, defineCustomElement as d };
-//# sourceMappingURL=p-PKWusChD.js.map
+//# sourceMappingURL=p-DobkLkti.js.map
 
-//# sourceMappingURL=p-PKWusChD.js.map
+//# sourceMappingURL=p-DobkLkti.js.map