@affinda/wc 0.0.17 → 0.0.18

package/dist/affinda/af-input.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-input.entry.esm.js","sources":["src/components/af-input/af-input.css?tag=af-input&encapsulation=shadow","src/components/af-input/af-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* Wrapper */\n.input-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(--forms-fields-label, var(--colour-brand-inkwell, #14343b));\n  cursor: default;\n}\n\n.required {\n  color: var(--forms-fields-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(--forms-fields-label, var(--colour-brand-inkwell, #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(--buttons-secondary-stroke, #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(--forms-fields-description, var(--colour-inkwell-400, #2b484f));\n  margin: 0;\n}\n\n/* Input container */\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--forms-fields-bg-default, #ffffff);\n  border: 1px solid var(--forms-fields-stroke-default, #d0d6d8);\n  border-radius: var(--radii-input, 8px);\n  transition: all 0.15s ease;\n  min-height: 48px;\n  box-sizing: border-box;\n}\n\n/* Hover state */\n.input-container.hovered {\n  background: var(--forms-fields-bg-hover, #f3f5f5);\n}\n\n/* Focus state */\n.input-container.focused {\n  background: var(--forms-fields-bg-default, #ffffff);\n  border-color: var(--forms-fields-stroke-active, var(--colour-brand-inkwell, #14343b));\n  box-shadow: \n    0 0 0 4px var(--background-base, #ffffff), \n    0 0 0 5px var(--buttons-secondary-stroke, #14343b);\n}\n\n/* Error state */\n.input-container.error {\n  border-color: var(--forms-fields-stroke-error, #be292a);\n}\n\n/* Disabled state */\n.input-container.disabled {\n  background: var(--forms-fields-bg-disabled, #e8ebeb);\n  border-color: var(--forms-fields-stroke-default, #d0d6d8);\n  cursor: not-allowed;\n}\n\n/* Search icon */\n.search-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(--forms-fields-label, var(--colour-brand-inkwell, #14343b));\n}\n\n.search-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.disabled .search-icon {\n  opacity: 0.5;\n}\n\n/* Native input */\n.input {\n  flex: 1;\n  min-width: 0;\n  padding: 0;\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(--forms-fields-input, var(--colour-brand-inkwell, #14343b));\n  outline: none;\n}\n\n.input::placeholder {\n  color: var(--forms-fields-placeholder, #60767b);\n  opacity: 1;\n}\n\n.input:disabled {\n  cursor: not-allowed;\n  color: var(--forms-fields-placeholder, #60767b);\n}\n\n.input:disabled::placeholder {\n  color: var(--forms-fields-placeholder, #60767b);\n}\n\n/* Hide native browser styling for search inputs */\n.input[type=\"search\"]::-webkit-search-decoration,\n.input[type=\"search\"]::-webkit-search-cancel-button,\n.input[type=\"search\"]::-webkit-search-results-button,\n.input[type=\"search\"]::-webkit-search-results-decoration {\n  display: none;\n}\n\n/* Hide number input spinners */\n.input[type=\"number\"]::-webkit-inner-spin-button,\n.input[type=\"number\"]::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.input[type=\"number\"] {\n  -moz-appearance: textfield;\n}\n\n/* Clear button */\n.clear-button {\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(--forms-fields-label, var(--colour-brand-inkwell, #14343b));\n  flex-shrink: 0;\n  opacity: 0.6;\n  transition: opacity 0.15s ease;\n}\n\n.clear-button svg {\n  width: 16px;\n  height: 16px;\n}\n\n.clear-button:hover {\n  opacity: 1;\n}\n\n.clear-button:focus-visible {\n  outline: 2px solid var(--buttons-secondary-stroke, #14343b);\n  outline-offset: 2px;\n  border-radius: 4px;\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(--forms-fields-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(--forms-fields-error, #be292a);\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, State } from '@stencil/core';\n\n/**\n * Input field component with label, description, and error states.\n * Supports various input types and validation 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-input',\n  styleUrl: 'af-input.css',\n  shadow: true\n})\nexport class AfInput {\n  /**\n   * The label text for the input field\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 input\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The current value of the input\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * The input type (text, email, password, number, tel, url, search)\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' = 'text';\n\n  /**\n   * The name of the input for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether the input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether the input 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   * Whether to show a search icon in the input\n   */\n  @Prop() showSearchIcon: boolean = false;\n\n  /**\n   * Whether to show a clear button when input has value\n   */\n  @Prop() clearable: boolean = false;\n\n  /**\n   * Autocomplete attribute for the input\n   */\n  @Prop() autocomplete?: string;\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   * Pattern for input validation (regex)\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Emitted when the input value changes\n   */\n  @Event() afInput!: EventEmitter<{ value: string }>;\n\n  /**\n   * Emitted when the input loses focus\n   */\n  @Event() afBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input gains focus\n   */\n  @Event() afFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the clear button is clicked\n   */\n  @Event() afClear!: 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 inputEl?: HTMLInputElement;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\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 handleClear = () => {\n    this.value = '';\n    this.afClear.emit();\n    this.afInput.emit({ value: '' });\n    this.inputEl?.focus();\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      'input-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 inputContainerClasses = {\n      'input-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=\"input\">\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          {/* Input container */}\n          <div \n            class={inputContainerClasses}\n            onMouseEnter={this.handleMouseEnter}\n            onMouseLeave={this.handleMouseLeave}\n          >\n            {/* Search icon */}\n            {this.showSearchIcon && (\n              <span class=\"search-icon\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path 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\"/>\n                  <path d=\"M21 21L16.65 16.65\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n            )}\n\n            {/* Native input */}\n            <input\n              ref={(el) => this.inputEl = el ?? undefined}\n              id=\"input\"\n              class=\"input\"\n              type={this.type}\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              autocomplete={this.autocomplete}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              pattern={this.pattern}\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\n            {/* Clear button */}\n            {this.clearable && hasValue && !this.disabled && !this.readonly && (\n              <button \n                type=\"button\" \n                class=\"clear-button\" \n                onClick={this.handleClear}\n                aria-label=\"Clear input\"\n              >\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  <path d=\"M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\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"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,wgIAAwgI;;MCa9gI,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;;AAqBE;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE3C;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAwE,MAAM;AAO1F;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOjC;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAErC;;AAEG;AACK,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAEvC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AA+CjB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAC1B,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAInC,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;AACzB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAC1C,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,SAAC;AAEO,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACxB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;AACpB,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACvB,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACxB,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,KAAK,GAAG,EAAE;AACf,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;YACnB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;AAChC,YAAA,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE;AACvB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAiB,KAAI;YAC9C,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACzB,SAAC;AAgIF;IA9HC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;AAC7B,QAAA,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;AAExD,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,eAAe,EAAE,IAAI;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,YAAA,OAAO,EAAE,QAAQ;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,YAAA,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS;AAC9D,YAAA,WAAW,EAAE;SACd;AAED,QAAA,MAAM,qBAAqB,GAAG;AAC5B,YAAA,iBAAiB,EAAE,IAAI;YACvB,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,YAAA,OAAO,EAAE,QAAQ;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,YAAA,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC;SACtD;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EAEvB,IAAI,CAAC,KAAK,KACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAA,EACjC,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,QAAS,CAC3C,EACP,IAAI,CAAC,YAAY,KAChB,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,IAAI,CAAC,eAAe,gBAClB,kBAAkB,EAAA,EAE7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,mHAAmH,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EACrN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,WAAW,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EAC7G,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,aAAa,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAiB,iBAAA,EAAA,OAAO,EAAE,CAAA,CAC3G,CACC,CACV,EACD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,WAAW,EAAA,CAAQ,CAC1B,CACP,EAGA,IAAI,CAAC,WAAW,KACf,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,WAAW,CAAK,CAC9C,EAGD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,qBAAqB,EAC5B,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAGlC,IAAI,CAAC,cAAc,KAClB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACvB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,mHAAmH,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EACrN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,oBAAoB,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAiB,iBAAA,EAAA,OAAO,EAAE,CAAA,CAClH,CACD,CACR,EAGD,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,IAAI,SAAS,EAC3C,EAAE,EAAC,OAAO,EACV,KAAK,EAAC,OAAO,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,cAAA,EACP,QAAQ,GAAG,MAAM,GAAG,SAAS,EACzB,kBAAA,EAAA,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,EAC3F,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,CAAA,EAGD,IAAI,CAAC,SAAS,IAAI,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC7D,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,IAAI,CAAC,WAAW,gBACd,aAAa,EAAA,EAExB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,YAAY,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EAC9G,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,YAAY,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAiB,iBAAA,EAAA,OAAO,GAAE,CAC1G,CACC,CACV,CACG,EAGL,QAAQ,KACP,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAC,EAAE,EAAC,eAAe,EAAA,EACvC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACtB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,mHAAmH,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EACrN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,WAAW,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EAC7G,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,aAAa,EAAC,MAAM,EAAC,cAAc,EAAc,cAAA,EAAA,KAAK,oBAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAA,CAAE,CAC3G,CACD,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CACxC,CACP,CACG,CACD;;;;;;;"}
+{"version":3,"file":"af-input.entry.esm.js","sources":["src/components/af-input/af-input.css?tag=af-input&encapsulation=shadow","src/components/af-input/af-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* Wrapper */\n.input-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/* Input container */\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 16px;\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  min-height: 48px;\n  box-sizing: border-box;\n}\n\n/* Hover state */\n.input-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.input-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.input-container.error {\n  border-color: var(--af-input-border-error, var(--colour-error, #be292a));\n}\n\n/* Disabled state */\n.input-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/* Search icon */\n.search-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-icon, var(--af-background-icon-default, #14343b));\n}\n\n.search-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n.disabled .search-icon {\n  opacity: 0.5;\n}\n\n/* Native input */\n.input {\n  flex: 1;\n  min-width: 0;\n  padding: 0;\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}\n\n.input::placeholder {\n  color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n  opacity: 1;\n}\n\n.input:disabled {\n  cursor: not-allowed;\n  color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n}\n\n.input:disabled::placeholder {\n  color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n}\n\n/* Hide native browser styling for search inputs */\n.input[type=\"search\"]::-webkit-search-decoration,\n.input[type=\"search\"]::-webkit-search-cancel-button,\n.input[type=\"search\"]::-webkit-search-results-button,\n.input[type=\"search\"]::-webkit-search-results-decoration {\n  display: none;\n}\n\n/* Hide number input spinners */\n.input[type=\"number\"]::-webkit-inner-spin-button,\n.input[type=\"number\"]::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.input[type=\"number\"] {\n  -moz-appearance: textfield;\n}\n\n/* Clear button */\n.clear-button {\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  opacity: 0.6;\n  transition: opacity 0.15s ease;\n}\n\n.clear-button svg {\n  width: 16px;\n  height: 16px;\n}\n\n.clear-button:hover {\n  opacity: 1;\n}\n\n.clear-button: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/* 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","import { Component, h, Prop, Host, Event, EventEmitter, State } from '@stencil/core';\n\n/**\n * Input field component with label, description, and error states.\n * Supports various input types and validation 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-input',\n  styleUrl: 'af-input.css',\n  shadow: true\n})\nexport class AfInput {\n  /**\n   * The label text for the input field\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 input\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The current value of the input\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * The input type (text, email, password, number, tel, url, search)\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' = 'text';\n\n  /**\n   * The name of the input for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether the input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether the input 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   * Whether to show a search icon in the input\n   */\n  @Prop() showSearchIcon: boolean = false;\n\n  /**\n   * Whether to show a clear button when input has value\n   */\n  @Prop() clearable: boolean = false;\n\n  /**\n   * Autocomplete attribute for the input\n   */\n  @Prop() autocomplete?: string;\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   * Pattern for input validation (regex)\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Emitted when the input value changes\n   */\n  @Event() afInput!: EventEmitter<{ value: string }>;\n\n  /**\n   * Emitted when the input loses focus\n   */\n  @Event() afBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input gains focus\n   */\n  @Event() afFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the clear button is clicked\n   */\n  @Event() afClear!: 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 inputEl?: HTMLInputElement;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\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 handleClear = () => {\n    this.value = '';\n    this.afClear.emit();\n    this.afInput.emit({ value: '' });\n    this.inputEl?.focus();\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      'input-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 inputContainerClasses = {\n      'input-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=\"input\">\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          {/* Input container */}\n          <div \n            class={inputContainerClasses}\n            onMouseEnter={this.handleMouseEnter}\n            onMouseLeave={this.handleMouseLeave}\n          >\n            {/* Search icon */}\n            {this.showSearchIcon && (\n              <span class=\"search-icon\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path 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\"/>\n                  <path d=\"M21 21L16.65 16.65\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n            )}\n\n            {/* Native input */}\n            <input\n              ref={(el) => this.inputEl = el ?? undefined}\n              id=\"input\"\n              class=\"input\"\n              type={this.type}\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              autocomplete={this.autocomplete}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              pattern={this.pattern}\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\n            {/* Clear button */}\n            {this.clearable && hasValue && !this.disabled && !this.readonly && (\n              <button \n                type=\"button\" \n                class=\"clear-button\" \n                onClick={this.handleClear}\n                aria-label=\"Clear input\"\n              >\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  <path d=\"M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\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"],"names":[],"mappings":"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"}

package/dist/affinda/af-nav-accordion-item.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-nav-accordion-item.entry.esm.js","sources":["src/components/af-nav-accordion-item/af-nav-accordion-item.css?tag=af-nav-accordion-item&encapsulation=scoped","src/components/af-nav-accordion-item/af-nav-accordion-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.nav-accordion-item {\n  width: 100%;\n}\n\n/* Trigger button/link - clickable header */\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  width: 100%;\n  padding: 20px 12px;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));\n  cursor: pointer;\n  font: inherit;\n  text-align: left;\n  text-decoration: none;\n  color: inherit;\n  box-sizing: border-box;\n}\n\na.trigger {\n  color: inherit;\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: rgba(20, 52, 59, 0.02);\n}\n\n.trigger:focus-visible {\n  outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));\n  outline-offset: -2px;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Trigger content */\n.trigger-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  min-height: 24px;\n}\n\n/* Label styling - matches NavItem primary-01 mobile */\n.label {\n  font-family: var(--typography-primaryfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-weight: var(--typography-headingweight, 500);\n  font-size: 20px;\n  line-height: 1.1;\n  letter-spacing: -0.4px;\n  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));\n}\n\n/* Chevron indicator */\n.chevron,\n.chevron-button {\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-nav-item-primary, var(--af-typography-body-dark, #14343b));\n  transition: transform 0.3s ease;\n}\n\n.chevron-button {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n}\n\n.chevron-button:hover {\n  opacity: 0.7;\n}\n\n.chevron.is-open {\n  transform: rotate(180deg);\n}\n\n/* Content wrapper - handles animation */\n.content-wrapper {\n  overflow: hidden;\n  transition: max-height 0.3s ease;\n}\n\n.content {\n  padding: 0;\n  background: var(--af-background-base, white);\n}\n\n/* Disabled state */\n:host(.is-disabled) .trigger {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n:host(.is-disabled) .trigger:hover {\n  background-color: transparent;\n}\n\n/* Open state styling */\n:host(.is-open) .trigger {\n  border-bottom-color: transparent;\n}\n\n/* Mobile breakpoint styling */\n:host(.breakpoint-mobile) .trigger {\n  padding: 20px 12px;\n}\n\n:host(.breakpoint-mobile) .label {\n  font-size: 20px;\n  line-height: 1.1;\n  letter-spacing: -0.4px;\n}\n\n/* Desktop breakpoint styling */\n:host(.breakpoint-desktop) .trigger {\n  padding: 12px;\n}\n\n:host(.breakpoint-desktop) .label {\n  font-size: 16px;\n  line-height: 20px;\n  letter-spacing: 0;\n}\n\n/* Nested content uses different padding */\n:host(.breakpoint-mobile) .content {\n  padding-left: 0;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Watch, Method } from '@stencil/core';\n\n/**\n * Navigation accordion item with NavItem-styled trigger.\n * Combines navigation item styling with accordion collapse behavior.\n * \n * @slot trigger - Custom trigger content (optional - uses label if not provided)\n * @slot - The collapsible content (typically NavMenuNest or NavMenu components)\n */\n@Component({\n  tag: 'af-nav-accordion-item',\n  styleUrl: 'af-nav-accordion-item.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfNavAccordionItem {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Unique identifier for this accordion item\n   */\n  @Prop({ reflect: true }) itemId!: string;\n\n  /**\n   * Label text for the navigation item trigger\n   */\n  @Prop() label?: string;\n\n  /**\n   * Whether this item is currently expanded\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n  /**\n   * Whether this item is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Optional href - if provided, clicking navigates instead of expanding\n   * (chevron area would still toggle expansion if both behaviors needed)\n   */\n  @Prop() href?: string;\n\n  /**\n   * Breakpoint for styling\n   */\n  @Prop({ reflect: true }) breakpoint: 'desktop' | 'mobile' = 'mobile';\n\n  /**\n   * Emitted when the accordion item is toggled\n   */\n  @Event({ eventName: 'af-nav-accordion-item-toggle' }) navAccordionItemToggle!: EventEmitter<{ itemId: string; open: boolean }>;\n\n  @State() contentHeight: number = 0;\n  @State() hasTriggerSlot: boolean = false;\n\n  private contentRef?: HTMLElement;\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean) {\n    if (newValue) {\n      this.measureContent();\n    }\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      this.measureContent();\n    }\n  }\n\n  /**\n   * Programmatically toggle the accordion item\n   */\n  @Method()\n  async toggle() {\n    if (!this.disabled && !this.href) {\n      this.open = !this.open;\n      this.navAccordionItemToggle.emit({ itemId: this.itemId, open: this.open });\n    }\n  }\n\n  private measureContent() {\n    if (this.contentRef) {\n      this.contentHeight = this.contentRef.scrollHeight;\n    }\n  }\n\n  private handleTriggerClick = (event: MouseEvent) => {\n    // If it's a link, let it navigate (unless they clicked the chevron specifically)\n    if (this.href) {\n      return;\n    }\n    event.preventDefault();\n    this.toggle();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if ((event.key === 'Enter' || event.key === ' ') && !this.href) {\n      event.preventDefault();\n      this.toggle();\n    }\n  };\n\n  private handleSlotChange = (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    this.hasTriggerSlot = slot.assignedNodes().length > 0;\n  };\n\n  render() {\n    const contentStyle = {\n      maxHeight: this.open ? `${this.contentHeight}px` : '0px'\n    };\n\n    const hasDropdownContent = true; // Assume content is always present for accordion items\n\n    return (\n      <Host \n        class={{ \n          'is-open': this.open, \n          'is-disabled': this.disabled,\n          [`breakpoint-${this.breakpoint}`]: true\n        }}\n      >\n        <div class=\"nav-accordion-item\">\n          {/* Trigger */}\n          {this.href ? (\n            <a\n              href={this.href}\n              class=\"trigger\"\n              aria-expanded={this.open ? 'true' : 'false'}\n              aria-controls={`content-${this.itemId}`}\n            >\n              <div class=\"trigger-content\">\n                <slot name=\"trigger\" onSlotchange={this.handleSlotChange}>\n                  <span class=\"label\">{this.label}</span>\n                </slot>\n              </div>\n              {hasDropdownContent && (\n                <button \n                  class=\"chevron-button\"\n                  onClick={(e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }}\n                  aria-label={this.open ? 'Collapse' : 'Expand'}\n                  type=\"button\"\n                >\n                  <div class={{ 'chevron': true, 'is-open': this.open }}>\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                      <path d=\"M6 9l6 6 6-6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                  </div>\n                </button>\n              )}\n            </a>\n          ) : (\n            <button\n              class=\"trigger\"\n              onClick={this.handleTriggerClick}\n              onKeyDown={this.handleKeyDown}\n              aria-expanded={this.open ? 'true' : 'false'}\n              aria-controls={`content-${this.itemId}`}\n              disabled={this.disabled}\n              type=\"button\"\n            >\n              <div class=\"trigger-content\">\n                <slot name=\"trigger\" onSlotchange={this.handleSlotChange}>\n                  <span class=\"label\">{this.label}</span>\n                </slot>\n              </div>\n              <div class={{ 'chevron': true, 'is-open': this.open }}>\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                  <path d=\"M6 9l6 6 6-6\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </div>\n            </button>\n          )}\n\n          {/* Collapsible content */}\n          <div\n            id={`content-${this.itemId}`}\n            class=\"content-wrapper\"\n            style={contentStyle}\n            aria-hidden={!this.open ? 'true' : 'false'}\n          >\n            <div class=\"content\" ref={(el) => (this.contentRef = el)}>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":"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"}

package/dist/affinda/af-nav-accordion.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-nav-accordion.entry.esm.js","sources":["src/components/af-nav-accordion/af-nav-accordion.css?tag=af-nav-accordion&encapsulation=scoped","src/components/af-nav-accordion/af-nav-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.nav-accordion {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Mobile breakpoint styling */\n:host(.breakpoint-mobile) .nav-accordion {\n  /* Mobile-specific styles */\n}\n\n/* Desktop breakpoint styling */\n:host(.breakpoint-desktop) .nav-accordion {\n  /* Desktop-specific styles if needed */\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter, Element, State, Listen } from '@stencil/core';\n\n/**\n * Navigation-styled accordion for mobile menu patterns.\n * A wrapper around af-accordion with navigation-specific styling.\n * \n * @slot - Place af-nav-accordion-item components here\n */\n@Component({\n  tag: 'af-nav-accordion',\n  styleUrl: 'af-nav-accordion.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfNavAccordion {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Behavior mode for the accordion.\n   * - `independent`: Multiple items can be open simultaneously\n   * - `exclusive`: Only one item can be open at a time (typical for mobile nav)\n   */\n  @Prop() mode: 'independent' | 'exclusive' = 'exclusive';\n\n  /**\n   * Breakpoint for styling\n   * - `desktop`: Desktop-specific styles\n   * - `mobile`: Mobile-specific styles (default for nav menus)\n   */\n  @Prop({ reflect: true }) breakpoint: 'desktop' | 'mobile' = 'mobile';\n\n  /**\n   * Currently open item ID(s)\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n  /**\n   * Emitted when the open state of items changes\n   */\n  @Event({ eventName: 'af-nav-accordion-change' }) navAccordionChange!: EventEmitter<{ value: string | string[] | null }>;\n\n  @State() internalValue: string[] = [];\n\n  componentWillLoad() {\n    this.internalValue = this.normalizeValue(this.value);\n  }\n\n  /**\n   * Listen for toggle events from child items\n   */\n  @Listen('af-nav-accordion-item-toggle')\n  handleItemToggle(event: CustomEvent<{ itemId: string; open: boolean }>) {\n    event.stopPropagation();\n    const { itemId, open } = event.detail;\n\n    let newValue: string[];\n\n    if (this.mode === 'exclusive') {\n      newValue = open ? [itemId] : [];\n    } else {\n      if (open) {\n        newValue = [...this.internalValue, itemId];\n      } else {\n        newValue = this.internalValue.filter(id => id !== itemId);\n      }\n    }\n\n    this.internalValue = newValue;\n    this.syncItems();\n\n    const emitValue = this.mode === 'exclusive' \n      ? (newValue.length > 0 ? newValue[0] : null)\n      : newValue;\n    this.navAccordionChange.emit({ value: emitValue });\n  }\n\n  private normalizeValue(value: string | string[] | undefined): string[] {\n    if (value === undefined || value === null) {\n      return [];\n    }\n    if (Array.isArray(value)) {\n      return this.mode === 'exclusive' ? value.slice(0, 1) : value;\n    }\n    return [value];\n  }\n\n  private syncItems() {\n    const items = this.el.querySelectorAll('af-nav-accordion-item');\n    items.forEach((element) => {\n      const item = element as HTMLElement & { itemId?: string; open?: boolean };\n      if (item.itemId) {\n        item.open = this.internalValue.includes(item.itemId);\n      }\n    });\n  }\n\n  componentDidLoad() {\n    this.syncItems();\n  }\n\n  render() {\n    return (\n      <Host class={{ [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true }}>\n        <div class=\"nav-accordion\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,mIAAmI;;MCchJ,cAAc,GAAA,MAAA;AAN3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AASE;;;;AAIG;AACK,QAAA,IAAI,CAAA,IAAA,GAAgC,WAAW;AAEvD;;;;AAIG;AACsB,QAAA,IAAU,CAAA,UAAA,GAAyB,QAAQ;AAY3D,QAAA,IAAa,CAAA,aAAA,GAAa,EAAE;AAoEtC;IAlEC,iBAAiB,GAAA;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;;AAGtD;;AAEG;AAEH,IAAA,gBAAgB,CAAC,KAAqD,EAAA;QACpE,KAAK,CAAC,eAAe,EAAE;QACvB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM;AAErC,QAAA,IAAI,QAAkB;AAEtB,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,EAAE;AAC7B,YAAA,QAAQ,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,GAAG,EAAE;;aAC1B;YACL,IAAI,IAAI,EAAE;gBACR,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC;;iBACrC;AACL,gBAAA,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,MAAM,CAAC;;;AAI7D,QAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;QAC7B,IAAI,CAAC,SAAS,EAAE;AAEhB,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK;AAC9B,eAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI;cACzC,QAAQ;QACZ,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;;AAG5C,IAAA,cAAc,CAAC,KAAoC,EAAA;QACzD,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE;AACzC,YAAA,OAAO,EAAE;;AAEX,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACxB,OAAO,IAAI,CAAC,IAAI,KAAK,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK;;QAE9D,OAAO,CAAC,KAAK,CAAC;;IAGR,SAAS,GAAA;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,uBAAuB,CAAC;AAC/D,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,KAAI;YACxB,MAAM,IAAI,GAAG,OAA4D;AACzE,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACf,gBAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC;;AAExD,SAAC,CAAC;;IAGJ,gBAAgB,GAAA;QACd,IAAI,CAAC,SAAS,EAAE;;IAGlB,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,CAAC,CAAc,WAAA,EAAA,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI,EAAE,CAAC,CAAQ,KAAA,EAAA,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,EAAE,EAAA,EACnF,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,CACD;;;;;;;;"}

package/dist/affinda/af-nav-card.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-nav-card.entry.esm.js","sources":["src/components/af-nav-card/af-nav-card.css?tag=af-nav-card&encapsulation=shadow","src/components/af-nav-card/af-nav-card.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.card-link {\n  text-decoration: none;\n  color: inherit;\n  display: block;\n}\n\n/* Card container */\n.nav-card {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 290px;\n  height: 360px;\n  min-height: 360px;\n  border-radius: var(--radii-image, 16px);\n  overflow: hidden;\n  justify-content: flex-end;\n  transition: transform 0.2s ease;\n}\n\n.nav-card.is-hovered {\n  transform: scale(1.02);\n}\n\n/* Image container */\n.image-container {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.card-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n/* Gradient overlay */\n.overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);\n  padding: 80px 24px 24px 24px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n/* Heading */\n.heading {\n  margin: 0;\n  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: 24px;\n  line-height: 1.2;\n  letter-spacing: -0.48px;\n  color: #ffffff;\n  width: 100%;\n}\n\n.nav-card.is-hovered .heading {\n  text-decoration: underline;\n}\n","import { Component, h, Prop, Host, State } from '@stencil/core';\n\n/**\n * A navigation card component for featured article content in mega-menu dropdowns.\n * Displays an image with a gradient overlay and headline text.\n * \n * **Usage:**\n * - Place in the `sidebar` slot of NavMenuNest\n * - Provide imageSrc, heading, and href props\n * \n * **Hover behavior:**\n * - Slight scale effect (1.02)\n * - Headline underline\n */\n@Component({\n  tag: 'af-nav-card',\n  styleUrl: 'af-nav-card.css',\n  shadow: true\n})\nexport class AfNavCard {\n  /**\n   * The headline text displayed over the image\n   */\n  @Prop() heading?: string;\n\n  /**\n   * URL to navigate to when clicked\n   */\n  @Prop() href?: string;\n\n  /**\n   * Image source URL for the background\n   */\n  @Prop() imageSrc?: string;\n\n  /**\n   * Alternative text for the image\n   */\n  @Prop() imageAlt: string = '';\n\n  @State() isHovered: boolean = false;\n\n  private handleMouseEnter = () => {\n    this.isHovered = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovered = false;\n  };\n\n  render() {\n    const classes = {\n      'nav-card': true,\n      'is-hovered': this.isHovered\n    };\n\n    const content = (\n      <div\n        class={classes}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <div class=\"image-container\">\n          {this.imageSrc && (\n            <img src={this.imageSrc} alt={this.imageAlt} class=\"card-image\" />\n          )}\n        </div>\n        <div class=\"overlay\">\n          {this.heading && (\n            <h3 class=\"heading\">{this.heading}</h3>\n          )}\n        </div>\n      </div>\n    );\n\n    if (this.href) {\n      return (\n        <Host>\n          <a href={this.href} class=\"card-link\">\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return <Host>{content}</Host>;\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,47BAA47B;;MCmBp8B,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAqBE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAEpB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAE3B,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACvB,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACxB,SAAC;AAuCF;IArCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,UAAU,EAAE,IAAI;YAChB,YAAY,EAAE,IAAI,CAAC;SACpB;QAED,MAAM,OAAO,IACX,WACE,KAAK,EAAE,OAAO,EACd,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAEnC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EACzB,EAAA,IAAI,CAAC,QAAQ,KACZ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,EAAG,CAAA,CACnE,CACG,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,OAAO,KACX,CAAI,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAM,CACxC,CACG,CACF,CACP;AAED,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,WAAW,EAClC,EAAA,OAAO,CACN,CACC;;QAIX,OAAO,CAAC,CAAA,IAAI,EAAE,IAAA,EAAA,OAAO,CAAQ;;;;;;;"}
+{"version":3,"file":"af-nav-card.entry.esm.js","sources":["src/components/af-nav-card/af-nav-card.css?tag=af-nav-card&encapsulation=scoped","src/components/af-nav-card/af-nav-card.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.card-link {\n  text-decoration: none;\n  color: inherit;\n  display: block;\n}\n\n/* Card container */\n.nav-card {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 290px;\n  height: 360px;\n  min-height: 360px;\n  border-radius: var(--radii-image, 16px);\n  overflow: hidden;\n  justify-content: flex-end;\n  transition: transform 0.2s ease;\n}\n\n.nav-card.is-hovered {\n  transform: scale(1.02);\n}\n\n/* Image container */\n.image-container {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.card-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n/* Gradient overlay */\n.overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);\n  padding: 80px 24px 24px 24px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n/* Heading */\n.heading {\n  margin: 0;\n  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: 24px;\n  line-height: 1.2;\n  letter-spacing: -0.48px;\n  color: #ffffff;\n  width: 100%;\n}\n\n.nav-card.is-hovered .heading {\n  text-decoration: underline;\n}\n","import { Component, h, Prop, Host, State } from '@stencil/core';\n\n/**\n * A navigation card component for featured article content in mega-menu dropdowns.\n * Displays an image with a gradient overlay and headline text.\n * \n * **Usage:**\n * - Place in the `sidebar` slot of NavMenuNest\n * - Provide imageSrc, heading, and href props\n * \n * **Hover behavior:**\n * - Slight scale effect (1.02)\n * - Headline underline\n */\n@Component({\n  tag: 'af-nav-card',\n  styleUrl: 'af-nav-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfNavCard {\n  /**\n   * The headline text displayed over the image\n   */\n  @Prop() heading?: string;\n\n  /**\n   * URL to navigate to when clicked\n   */\n  @Prop() href?: string;\n\n  /**\n   * Image source URL for the background\n   */\n  @Prop() imageSrc?: string;\n\n  /**\n   * Alternative text for the image\n   */\n  @Prop() imageAlt: string = '';\n\n  @State() isHovered: boolean = false;\n\n  private handleMouseEnter = () => {\n    this.isHovered = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovered = false;\n  };\n\n  render() {\n    const classes = {\n      'nav-card': true,\n      'is-hovered': this.isHovered\n    };\n\n    const content = (\n      <div\n        class={classes}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <div class=\"image-container\">\n          {this.imageSrc && (\n            <img src={this.imageSrc} alt={this.imageAlt} class=\"card-image\" />\n          )}\n        </div>\n        <div class=\"overlay\">\n          {this.heading && (\n            <h3 class=\"heading\">{this.heading}</h3>\n          )}\n        </div>\n      </div>\n    );\n\n    if (this.href) {\n      return (\n        <Host>\n          <a href={this.href} class=\"card-link\">\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return <Host>{content}</Host>;\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,+kCAA+kC;;MCoBvlC,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAsBE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAEpB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAE3B,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACvB,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACxB,SAAC;AAuCF;IArCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,UAAU,EAAE,IAAI;YAChB,YAAY,EAAE,IAAI,CAAC;SACpB;QAED,MAAM,OAAO,IACX,WACE,KAAK,EAAE,OAAO,EACd,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAEnC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EACzB,EAAA,IAAI,CAAC,QAAQ,KACZ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,YAAY,EAAG,CAAA,CACnE,CACG,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,OAAO,KACX,CAAI,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAM,CACxC,CACG,CACF,CACP;AAED,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,WAAW,EAClC,EAAA,OAAO,CACN,CACC;;QAIX,OAAO,CAAC,CAAA,IAAI,EAAE,IAAA,EAAA,OAAO,CAAQ;;;;;;;"}

package/dist/affinda/af-nav-menu-nest.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-nav-menu-nest.entry.esm.js","sources":["src/components/af-nav-menu-nest/af-nav-menu-nest.css?tag=af-nav-menu-nest&encapsulation=shadow","src/components/af-nav-menu-nest/af-nav-menu-nest.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.nav-menu-nest {\n  display: inline-flex;\n  background: var(--colour-background-base, #ffffff);\n  border-radius: 32px;\n}\n\n/* Desktop layout */\n.nav-menu-nest.breakpoint-desktop {\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.nav-menu-nest.breakpoint-desktop .menu-columns {\n  display: flex;\n  flex-direction: row;\n  gap: 32px;\n  padding: 24px 0 32px 40px;\n}\n\n.nav-menu-nest.breakpoint-desktop .menu-sidebar {\n  display: flex;\n  flex-direction: column;\n  padding: 24px 40px 32px 32px;\n}\n\n/* Slotted content in sidebar - match column spacing */\n.nav-menu-nest.breakpoint-desktop .menu-sidebar ::slotted(af-nav-menu) {\n  padding-top: 16px;\n}\n\n.nav-menu-nest.breakpoint-desktop .menu-sidebar ::slotted(af-nav-card) {\n  margin-top: 16px;\n}\n\n/* Slotted NavMenu in columns - add border and spacing */\n.nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu) {\n  border-right: 1px solid var(--colour-background-border-subtle, #e8eeed);\n  padding-right: 32px;\n  padding-top: 16px;\n}\n\n/* Last NavMenu in columns - no border by default */\n.nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu:last-of-type) {\n  border-right: none;\n  padding-right: 0;\n}\n\n/* When showSidebarBorder is true, last column gets heavier border */\n:host([show-sidebar-border]) .nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu:last-of-type) {\n  border-right: 1px solid var(--colour-background-border-heavy, #c6d5d1);\n  padding-right: 32px;\n}\n\n/* Mobile layout */\n.nav-menu-nest.breakpoint-mobile {\n  flex-direction: column;\n  border-radius: 0;\n}\n\n.nav-menu-nest.breakpoint-mobile .menu-columns {\n  display: flex;\n  flex-direction: column;\n}\n\n.nav-menu-nest.breakpoint-mobile .menu-sidebar {\n  display: flex;\n  flex-direction: column;\n  padding: 32px 12px;\n  border-top: 1px solid var(--colour-background-border-subtle, #e8eeed);\n}\n\n.nav-menu-nest.breakpoint-mobile .menu-columns ::slotted(af-nav-menu) {\n  border-right: none;\n  border-bottom: 1px solid var(--colour-background-border-subtle, #e8eeed);\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A mega-menu dropdown panel component.\n * Acts as a container for NavMenu columns and optionally a sidebar.\n * Used as the dropdown content for navbar items.\n * \n * **Slots:**\n * - default: Place NavMenu components here - they will be displayed as columns\n * - sidebar: Optional sidebar content (NavMenu, NavCard, or any content)\n * \n * **Example:**\n * ```html\n * <af-nav-menu-nest type=\"solutions\" breakpoint=\"desktop\">\n *   <af-nav-menu heading=\"Industries\">...</af-nav-menu>\n *   <af-nav-menu heading=\"Use Cases\">...</af-nav-menu>\n *   <af-nav-menu heading=\"Documents\">...</af-nav-menu>\n *   <af-nav-menu slot=\"sidebar\" heading=\"Resume Parser\">...</af-nav-menu>\n * </af-nav-menu-nest>\n * ```\n */\n@Component({\n  tag: 'af-nav-menu-nest',\n  styleUrl: 'af-nav-menu-nest.css',\n  shadow: true\n})\nexport class AfNavMenuNest {\n  /**\n   * The type/variant of the mega-menu\n   * - 'solutions': Multi-column layout (3 columns + sidebar)\n   * - 'solutions-alt': Alternative solutions layout\n   * - 'resources': Multi-column layout with optional featured card\n   * - 'pricing': Simpler layout without sidebar\n   */\n  @Prop() type: 'solutions' | 'solutions-alt' | 'resources' | 'pricing' = 'solutions';\n\n  /**\n   * Breakpoint variant for responsive styling\n   * - 'desktop': Horizontal multi-column layout\n   * - 'mobile': Vertical stacked layout\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Whether to show the heavier border on the last column (before sidebar).\n   * Set to `true` when sidebar has content, `false` when no sidebar.\n   * When `false`, the last column has no border.\n   */\n  @Prop({ reflect: true }) showSidebarBorder: boolean = true;\n\n  render() {\n    const classes = {\n      'nav-menu-nest': true,\n      [`type-${this.type}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"menu-columns\">\n            <slot></slot>\n          </div>\n          <div class=\"menu-sidebar\">\n            <slot name=\"sidebar\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,kjDAAkjD;;MC0B9jD,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;;AAMG;AACK,QAAA,IAAI,CAAA,IAAA,GAA4D,WAAW;AAEnF;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;;;AAIG;AACsB,QAAA,IAAiB,CAAA,iBAAA,GAAY,IAAI;AAsB3D;IApBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC3B,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;AAED,QAAA,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,cAAc,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACD;;;;;;;"}
+{"version":3,"file":"af-nav-menu-nest.entry.esm.js","sources":["src/components/af-nav-menu-nest/af-nav-menu-nest.css?tag=af-nav-menu-nest&encapsulation=scoped","src/components/af-nav-menu-nest/af-nav-menu-nest.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.nav-menu-nest {\n  display: inline-flex;\n  background: var(--af-background-base, #ffffff);\n  border-radius: 32px;\n}\n\n/* Desktop layout */\n.nav-menu-nest.breakpoint-desktop {\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.nav-menu-nest.breakpoint-desktop .menu-columns {\n  display: flex;\n  flex-direction: row;\n  gap: 32px;\n  padding: 24px 0 32px 40px;\n}\n\n.nav-menu-nest.breakpoint-desktop .menu-sidebar {\n  display: flex;\n  flex-direction: column;\n  padding: 24px 40px 32px 32px;\n}\n\n/* Slotted content in sidebar - match column spacing */\n.nav-menu-nest.breakpoint-desktop .menu-sidebar ::slotted(af-nav-menu) {\n  padding-top: 16px;\n}\n\n.nav-menu-nest.breakpoint-desktop .menu-sidebar ::slotted(af-nav-card) {\n  margin-top: 16px;\n}\n\n/* Slotted NavMenu in columns - add border and spacing */\n.nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu) {\n  border-right: 1px solid var(--af-background-border-subtle, #e8eeed);\n  padding-right: 32px;\n  padding-top: 16px;\n}\n\n/* Last NavMenu in columns - no border by default */\n.nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu:last-of-type) {\n  border-right: none;\n  padding-right: 0;\n}\n\n/* When showSidebarBorder is true, last column gets heavier border */\n:host([show-sidebar-border]) .nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu:last-of-type) {\n  border-right: 1px solid var(--af-background-border-heavy, #c6d5d1);\n  padding-right: 32px;\n}\n\n/* Mobile layout */\n.nav-menu-nest.breakpoint-mobile {\n  flex-direction: column;\n  border-radius: 0;\n}\n\n.nav-menu-nest.breakpoint-mobile .menu-columns {\n  display: flex;\n  flex-direction: column;\n}\n\n.nav-menu-nest.breakpoint-mobile .menu-sidebar {\n  display: flex;\n  flex-direction: column;\n  padding: 32px 12px;\n  border-top: 1px solid var(--af-background-border-subtle, #e8eeed);\n}\n\n.nav-menu-nest.breakpoint-mobile .menu-columns ::slotted(af-nav-menu) {\n  border-right: none;\n  border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A mega-menu dropdown panel component.\n * Acts as a container for NavMenu columns and optionally a sidebar.\n * Used as the dropdown content for navbar items.\n * \n * **Slots:**\n * - default: Place NavMenu components here - they will be displayed as columns\n * - sidebar: Optional sidebar content (NavMenu, NavCard, or any content)\n * \n * **Example:**\n * ```html\n * <af-nav-menu-nest type=\"solutions\" breakpoint=\"desktop\">\n *   <af-nav-menu heading=\"Industries\">...</af-nav-menu>\n *   <af-nav-menu heading=\"Use Cases\">...</af-nav-menu>\n *   <af-nav-menu heading=\"Documents\">...</af-nav-menu>\n *   <af-nav-menu slot=\"sidebar\" heading=\"Resume Parser\">...</af-nav-menu>\n * </af-nav-menu-nest>\n * ```\n */\n@Component({\n  tag: 'af-nav-menu-nest',\n  styleUrl: 'af-nav-menu-nest.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfNavMenuNest {\n  /**\n   * The type/variant of the mega-menu\n   * - 'solutions': Multi-column layout (3 columns + sidebar)\n   * - 'solutions-alt': Alternative solutions layout\n   * - 'resources': Multi-column layout with optional featured card\n   * - 'pricing': Simpler layout without sidebar\n   */\n  @Prop() type: 'solutions' | 'solutions-alt' | 'resources' | 'pricing' = 'solutions';\n\n  /**\n   * Breakpoint variant for responsive styling\n   * - 'desktop': Horizontal multi-column layout\n   * - 'mobile': Vertical stacked layout\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Whether to show the heavier border on the last column (before sidebar).\n   * Set to `true` when sidebar has content, `false` when no sidebar.\n   * When `false`, the last column has no border.\n   */\n  @Prop({ reflect: true }) showSidebarBorder: boolean = true;\n\n  render() {\n    const classes = {\n      'nav-menu-nest': true,\n      'theme-white': true,\n      [`type-${this.type}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"menu-columns\">\n            <slot></slot>\n          </div>\n          <div class=\"menu-sidebar\">\n            <slot name=\"sidebar\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,2gFAA2gF;;MC2BvhF,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;;;;AAMG;AACK,QAAA,IAAI,CAAA,IAAA,GAA4D,WAAW;AAEnF;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;;;AAIG;AACsB,QAAA,IAAiB,CAAA,iBAAA,GAAY,IAAI;AAuB3D;IArBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC3B,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;AAED,QAAA,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,cAAc,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACD;;;;;;;"}

package/dist/affinda/af-nav-menu.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-nav-menu.entry.esm.js","sources":["src/components/af-nav-menu/af-nav-menu.css?tag=af-nav-menu&encapsulation=shadow","src/components/af-nav-menu/af-nav-menu.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.nav-menu {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  align-items: flex-start;\n  min-height: 1px;\n  min-width: 1px;\n}\n\n/* Desktop styles */\n.nav-menu.breakpoint-desktop {\n  padding: 0;\n  flex: 1 0 0;\n  align-self: stretch;\n}\n\n/* Border is now controlled by parent NavMenuNest via ::slotted()\n   Use showBorder prop only when NavMenu is used standalone */\n.nav-menu.breakpoint-desktop.has-border {\n  border-right: 1px solid var(--colour-background-border-subtle, #e8eeed);\n  padding-right: 32px;\n  padding-top: 16px;\n}\n\n/* Mobile styles */\n.nav-menu.breakpoint-mobile {\n  padding: 32px 12px;\n  width: 100%;\n  border-bottom: 1px solid var(--colour-background-border-subtle, #e8eeed);\n}\n\n/* Menu header */\n.menu-header {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n  width: 100%;\n}\n\n.menu-heading {\n  margin: 0;\n  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: 20px;\n  line-height: 1.2;\n  letter-spacing: -0.4px;\n  color: var(--colour-typography-heading-secondary, #8a7049);\n  flex: 1 0 0;\n  min-height: 1px;\n  min-width: 1px;\n}\n\n/* Mobile heading adjustments */\n.nav-menu.breakpoint-mobile .menu-heading {\n  line-height: 1.1;\n}\n\n/* Menu items container */\n.menu-items {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n}\n\n/* Mobile items with left padding */\n.nav-menu.breakpoint-mobile .menu-items {\n  padding-left: 24px;\n}\n\n/* Slot styling for nav-items */\n::slotted(af-nav-item) {\n  width: 100%;\n}\n\n/* Card style variant - adds background and rounded corners */\n.nav-menu.card-style {\n  background: var(--colour-background-level-1, #e8eeed);\n  border-radius: var(--radii-card-level-1, 32px);\n  padding: 40px;\n}\n\n.nav-menu.card-style.breakpoint-desktop {\n  flex: 1 0 0;\n  align-self: stretch;\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A grouped navigation menu component with a heading.\n * Used in mega-menu dropdowns to group related navigation items.\n */\n@Component({\n  tag: 'af-nav-menu',\n  styleUrl: 'af-nav-menu.css',\n  shadow: true\n})\nexport class AfNavMenu {\n  /**\n   * The heading text displayed above the navigation items\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Breakpoint variant for responsive styling\n   * - 'desktop': Desktop-specific styles (right border, horizontal padding)\n   * - 'mobile': Mobile-specific styles (bottom border, vertical layout)\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Whether to show the right border separator.\n   * When used inside NavMenuNest, borders are controlled by the parent.\n   * Set to true only when using NavMenu standalone.\n   */\n  @Prop() showBorder: boolean = false;\n\n  /**\n   * Whether to display as a card with background color and rounded corners.\n   * Used for highlighted sidebar menus (e.g., solutions-alt variant).\n   */\n  @Prop({ reflect: true }) cardStyle: boolean = false;\n\n  render() {\n    const classes = {\n      'nav-menu': true,\n      [`breakpoint-${this.breakpoint}`]: true,\n      'has-border': this.showBorder,\n      'card-style': this.cardStyle\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <div class=\"menu-header\">\n              <h3 class=\"menu-heading\">{this.heading}</h3>\n            </div>\n          )}\n          <div class=\"menu-items\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,wvCAAwvC;;MCWhwC,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAWE;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAEnC;;;AAGG;AACsB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAyBpD;IAvBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;YACvC,YAAY,EAAE,IAAI,CAAC,UAAU;YAC7B,YAAY,EAAE,IAAI,CAAC;SACpB;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EAChB,IAAI,CAAC,OAAO,KACX,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,OAAO,CAAM,CACxC,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;"}
+{"version":3,"file":"af-nav-menu.entry.esm.js","sources":["src/components/af-nav-menu/af-nav-menu.css?tag=af-nav-menu&encapsulation=scoped","src/components/af-nav-menu/af-nav-menu.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.nav-menu {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  align-items: flex-start;\n  min-height: 1px;\n  min-width: 1px;\n}\n\n/* Desktop styles */\n.nav-menu.breakpoint-desktop {\n  padding: 0;\n  flex: 1 0 0;\n  align-self: stretch;\n}\n\n/* Border is now controlled by parent NavMenuNest via ::slotted()\n   Use showBorder prop only when NavMenu is used standalone */\n.nav-menu.breakpoint-desktop.has-border {\n  border-right: 1px solid var(--af-background-border-subtle, #e8eeed);\n  padding-right: 32px;\n  padding-top: 16px;\n}\n\n/* Mobile styles */\n.nav-menu.breakpoint-mobile {\n  padding: 32px 12px;\n  width: 100%;\n  border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);\n}\n\n/* Menu header */\n.menu-header {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n  width: 100%;\n}\n\n.menu-heading {\n  margin: 0;\n  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  font-size: 20px;\n  line-height: 1.2;\n  letter-spacing: -0.4px;\n  color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n  flex: 1 0 0;\n  min-height: 1px;\n  min-width: 1px;\n}\n\n/* Mobile heading adjustments */\n.nav-menu.breakpoint-mobile .menu-heading {\n  line-height: 1.1;\n}\n\n/* Menu items container */\n.menu-items {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n}\n\n/* Mobile items with left padding */\n.nav-menu.breakpoint-mobile .menu-items {\n  padding-left: 24px;\n}\n\n/* Slot styling for nav-items */\n::slotted(af-nav-item) {\n  width: 100%;\n}\n\n/* Card style variant - adds background and rounded corners */\n.nav-menu.card-style {\n  background: var(--af-background-level-1, #e8eeed);\n  border-radius: var(--radii-card-level-1, 32px);\n  padding: 40px;\n}\n\n.nav-menu.card-style.breakpoint-desktop {\n  flex: 1 0 0;\n  align-self: stretch;\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A grouped navigation menu component with a heading.\n * Used in mega-menu dropdowns to group related navigation items.\n */\n@Component({\n  tag: 'af-nav-menu',\n  styleUrl: 'af-nav-menu.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfNavMenu {\n  /**\n   * The heading text displayed above the navigation items\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Breakpoint variant for responsive styling\n   * - 'desktop': Desktop-specific styles (right border, horizontal padding)\n   * - 'mobile': Mobile-specific styles (bottom border, vertical layout)\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Whether to show the right border separator.\n   * When used inside NavMenuNest, borders are controlled by the parent.\n   * Set to true only when using NavMenu standalone.\n   */\n  @Prop() showBorder: boolean = false;\n\n  /**\n   * Whether to display as a card with background color and rounded corners.\n   * Used for highlighted sidebar menus (e.g., solutions-alt variant).\n   */\n  @Prop({ reflect: true }) cardStyle: boolean = false;\n\n  render() {\n    const classes = {\n      'nav-menu': true,\n      [`breakpoint-${this.breakpoint}`]: true,\n      'has-border': this.showBorder,\n      'card-style': this.cardStyle\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <div class=\"menu-header\">\n              <h3 class=\"menu-heading\">{this.heading}</h3>\n            </div>\n          )}\n          <div class=\"menu-items\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,69CAA69C;;MCYr+C,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYE;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;;;AAIG;AACK,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAEnC;;;AAGG;AACsB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAyBpD;IAvBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;YACvC,YAAY,EAAE,IAAI,CAAC,UAAU;YAC7B,YAAY,EAAE,IAAI,CAAC;SACpB;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EAChB,IAAI,CAAC,OAAO,KACX,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,OAAO,CAAM,CACxC,CACP,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;"}

package/dist/affinda/af-radio.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-radio.entry.esm.js","sources":["src/components/af-radio/af-radio.css?tag=af-radio&encapsulation=shadow","src/components/af-radio/af-radio.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.radio {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--buttons-ghost-text, var(--colour-brand-inkwell, #14343b));\n  user-select: none;\n}\n\n.radio.disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Hidden native input */\n.input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Custom radio control */\n.control {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--radii-radio, 9999px);\n  border: 1px solid var(--forms-control-stroke, #d0d6d8);\n  background: var(--forms-control-bg-default, #ffffff);\n  transition: all 0.15s ease;\n  box-sizing: border-box;\n}\n\n/* Checked state */\n.control.checked {\n  background: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));\n  border-color: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Disabled state */\n.control.disabled {\n  background: var(--forms-control-bg-default-disabled, #e8ebeb);\n  border-color: var(--forms-control-stroke-disabled, #d0d6d8);\n}\n\n.control.checked.disabled {\n  background: var(--forms-control-bg-active-disabled, #708380);\n  border-color: var(--forms-control-bg-active-disabled, #708380);\n}\n\n/* Hover state */\n.radio:not(.disabled):hover .control {\n  border-color: var(--forms-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Focus state */\n.input:focus-visible + .control {\n  box-shadow: 0 0 0 4px var(--background-base, #ffffff), 0 0 0 5px var(--buttons-secondary-stroke, #14343b);\n  outline: none;\n}\n\n/* Inner dot */\n.dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #ffffff;\n}\n\n/* Label styling */\n.label {\n  display: flex;\n  align-items: center;\n  min-height: 24px;\n}\n\n/* Empty label - hide if no content */\n.label:empty {\n  display: none;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Radio component for selecting a single option from a group.\n * \n * @slot - Radio label text\n */\n@Component({\n  tag: 'af-radio',\n  styleUrl: 'af-radio.css',\n  shadow: true\n})\nexport class AfRadio {\n  /**\n   * Whether the radio is checked\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * Whether the radio is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the radio for form submission (radios with same name are grouped)\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the radio for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the radio checked state changes\n   */\n  @Event() afChange!: EventEmitter<{ checked: boolean; value?: string }>;\n\n  private handleChange = () => {\n    if (this.disabled || this.checked) return;\n    this.checked = true;\n    this.afChange.emit({ checked: this.checked, value: this.value });\n  };\n\n  render() {\n    const radioClasses = {\n      'radio': true,\n      'checked': this.checked,\n      'disabled': this.disabled\n    };\n\n    const controlClasses = {\n      'control': true,\n      'checked': this.checked,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={radioClasses}>\n          <input\n            type=\"radio\"\n            class=\"input\"\n            checked={this.checked}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            onChange={this.handleChange}\n          />\n          <span class={controlClasses}>\n            {this.checked && (\n              <span class=\"dot\"></span>\n            )}\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,umDAAumD;;MCY7mD,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAME;;AAEG;AACqC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEhE;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiB1C,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAC1B,YAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;gBAAE;AACnC,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAClE,SAAC;AAuCF;IArCC,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACxB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,cAAc,EAAA,EACxB,IAAI,CAAC,OAAO,KACX,6DAAM,KAAK,EAAC,KAAK,EAAA,CAAQ,CAC1B,CACI,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACD,CACH;;;;;;;"}
+{"version":3,"file":"af-radio.entry.esm.js","sources":["src/components/af-radio/af-radio.css?tag=af-radio&encapsulation=shadow","src/components/af-radio/af-radio.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.radio {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--af-form-control-label, var(--colour-brand-inkwell, #14343b));\n  user-select: none;\n}\n\n.radio.disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Hidden native input */\n.input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Custom radio control */\n.control {\n  position: relative;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--radii-radio, 9999px);\n  /* Use inset box-shadow instead of border to prevent layout shift */\n  border: none;\n  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8));\n  background: var(--af-form-control-bg, var(--colour-brand-white, #ffffff));\n  transition: all 0.15s ease;\n  box-sizing: border-box;\n}\n\n/* Checked state */\n.control.checked {\n  background: var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));\n  box-shadow: none;\n}\n\n/* Disabled state */\n.control.disabled {\n  background: var(--af-form-control-bg-disabled, var(--colour-mistgreen-200, #e8ebeb));\n  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-disabled, var(--colour-mistgreen-500, #d0d6d8));\n}\n\n.control.checked.disabled {\n  background: var(--af-form-control-bg-checked-disabled, var(--colour-inkwell-350, #708380));\n  box-shadow: none;\n}\n\n/* Hover state */\n.radio:not(.disabled):hover .control:not(.checked) {\n  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Focus state */\n.input:focus-visible + .control {\n  outline: none;\n  box-shadow: \n    inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8)),\n    0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n.input:focus-visible + .control.checked {\n  box-shadow: \n    0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Inner dot - always present, visibility controlled by opacity */\n.dot {\n  position: absolute;\n  inset: 0;\n  margin: auto;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--af-form-control-icon, var(--colour-brand-white, #ffffff));\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.control.checked .dot {\n  opacity: 1;\n}\n\n/* Label styling */\n.label {\n  display: flex;\n  align-items: center;\n  min-height: 24px;\n}\n\n/* Empty label - hide if no content */\n.label:empty {\n  display: none;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter, Element } from '@stencil/core';\n\n/**\n * Radio component for selecting a single option from a group.\n * Radios with the same `name` prop are mutually exclusive.\n * \n * @slot - Radio label text\n */\n@Component({\n  tag: 'af-radio',\n  styleUrl: 'af-radio.css',\n  shadow: true\n})\nexport class AfRadio {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Whether the radio is checked\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * Whether the radio is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the radio for form submission (radios with same name are grouped)\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The value of the radio for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the radio checked state changes\n   */\n  @Event() afChange!: EventEmitter<{ checked: boolean; value?: string; name?: string }>;\n\n  private handleClick = () => {\n    if (this.disabled || this.checked) return;\n    \n    // Uncheck other radios with the same name\n    if (this.name) {\n      const siblings = document.querySelectorAll(`af-radio[name=\"${this.name}\"]`);\n      siblings.forEach((radio) => {\n        if (radio !== this.el && (radio as any).checked) {\n          (radio as any).checked = false;\n        }\n      });\n    }\n    \n    this.checked = true;\n    this.afChange.emit({ checked: this.checked, value: this.value, name: this.name });\n  };\n\n  render() {\n    const radioClasses = {\n      'radio': true,\n      'disabled': this.disabled\n    };\n\n    const controlClasses = {\n      'control': true,\n      'checked': this.checked,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={radioClasses} onClick={this.handleClick}>\n          <input\n            type=\"radio\"\n            class=\"input\"\n            checked={this.checked}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            tabindex={this.disabled ? -1 : 0}\n          />\n          <span class={controlClasses}>\n            <span class=\"dot\"></span>\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,2rEAA2rE;;MCajsE,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQE;;AAEG;AACqC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEhE;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiB1C,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;gBAAE;;AAGnC,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,gBAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAkB,eAAA,EAAA,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA,CAAC;AAC3E,gBAAA,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;oBACzB,IAAI,KAAK,KAAK,IAAI,CAAC,EAAE,IAAK,KAAa,CAAC,OAAO,EAAE;AAC9C,wBAAA,KAAa,CAAC,OAAO,GAAG,KAAK;;AAElC,iBAAC,CAAC;;AAGJ,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;YACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;AACnF,SAAC;AAoCF;IAlCC,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EACnD,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAA,CAAQ,CACpB,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACD,CACH;;;;;;;;"}

package/dist/affinda/af-section.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-section.entry.esm.js","sources":["src/components/af-section/af-section.css?tag=af-section&encapsulation=scoped","src/components/af-section/af-section.tsx"],"sourcesContent":["/**\n * Section Component Styles\n * \n * Provides themed containers with proper spacing.\n * Theme classes set CSS custom properties that child components consume.\n */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.section {\n  width: 100%;\n  position: relative;\n}\n\n/* Padding variants */\n.padding-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-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);\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-tertiary-text: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-stroke: var(--colour-brand-ice, #A6FFFB);\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-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);\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-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-stroke: 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-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #b09670);\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n  .padding-tight {\n    padding: 32px 0;\n  }\n  \n  .padding-default {\n    padding: 64px 0;\n  }\n  \n  .padding-loose {\n    padding: 80px 0 64px;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds.\n * Sets theme context for all child components via CSS custom properties.\n */\n@Component({\n  tag: 'af-section',\n  styleUrl: 'af-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfSection {\n  /** Padding variant */\n  @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n  \n  /** Theme - sets background color and provides theme context to children */\n  @Prop() theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory' = 'white';\n  \n  /** Whether to include a Container wrapper */\n  @Prop() container: boolean = true;\n\n  render() {\n    const content = <slot></slot>;\n    \n    return (\n      <Host>\n        <div class={`section padding-${this.padding} theme-${this.theme}`}>\n          {this.container ? (\n            <af-container>{content}</af-container>\n          ) : content}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,2qTAA2qT;;MCYnrT,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAkC,SAAS;;AAGlD,QAAA,IAAK,CAAA,KAAA,GAAqE,OAAO;;AAGjF,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;;;;;;;"}
+{"version":3,"file":"af-section.entry.esm.js","sources":["src/components/af-section/af-section.css?tag=af-section&encapsulation=scoped","src/components/af-section/af-section.tsx"],"sourcesContent":["/**\n * Section Component Styles\n * \n * Provides themed containers with proper spacing.\n * Theme classes set CSS custom properties that child components consume.\n */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.section {\n  width: 100%;\n  position: relative;\n}\n\n/* Padding variants */\n.padding-none {\n  padding: 0;\n}\n\n.padding-tight {\n  padding: 48px 0;\n}\n\n.padding-default {\n  padding: 96px 0;\n}\n\n.padding-loose {\n  padding: 120px 0 96px;\n}\n\n/* ==========================================================================\n   WHITE THEME\n   ========================================================================== */\n\n.theme-white {\n  background-color: var(--colour-brand-white, #FFFFFF);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-brand-white, #FFFFFF);\n  --af-background-base-hover: var(--colour-mistgreen-100, #f4f7f6);\n  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n  --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n  --af-background-level-1-hover: var(--colour-mistgreen-300, #dde6e3);\n  --af-background-border-subtle: var(--colour-mistgreen-200, #e8eeed);\n  --af-background-border-default: var(--colour-mistgreen-400, #d1ddda);\n  --af-background-border-heavy: var(--colour-mistgreen-500, #c6d5d1);\n  --af-background-border-active: var(--colour-softclay-800, #8a7049);\n  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-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-tertiary-text: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-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-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-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-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-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-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-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@media (max-width: 768px) {\n  .padding-tight {\n    padding: 32px 0;\n  }\n  \n  .padding-default {\n    padding: 64px 0;\n  }\n  \n  .padding-loose {\n    padding: 80px 0 64px;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds.\n * Sets theme context for all child components via CSS custom properties.\n */\n@Component({\n  tag: 'af-section',\n  styleUrl: 'af-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfSection {\n  /** Padding variant */\n  @Prop() padding: 'none' | 'tight' | 'default' | 'loose' = 'default';\n  \n  /** Theme - sets background color and provides theme context to children */\n  @Prop() theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory' = 'white';\n  \n  /** Whether to include a Container wrapper */\n  @Prop() container: boolean = true;\n\n  render() {\n    const content = <slot></slot>;\n    \n    return (\n      <Host>\n        <div class={`section padding-${this.padding} theme-${this.theme}`}>\n          {this.container ? (\n            <af-container>{content}</af-container>\n          ) : content}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,iogBAAiogB;;MCYzogB,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAA2C,SAAS;;AAG3D,QAAA,IAAK,CAAA,KAAA,GAAqE,OAAO;;AAGjF,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAelC;IAbC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,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;;;;;;;"}

package/dist/affinda/af-show.entry.esm.js.map

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

package/dist/affinda/af-spacer.entry.esm.js.map

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

package/dist/affinda/af-split-section.entry.esm.js.map

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

package/dist/affinda/af-stack.entry.esm.js.map

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

package/dist/affinda/af-switch.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-switch.entry.esm.js","sources":["src/components/af-switch/af-switch.css?tag=af-switch&encapsulation=shadow","src/components/af-switch/af-switch.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.switch {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--buttons-ghost-text, var(--colour-brand-inkwell, #14343b));\n  user-select: none;\n}\n\n.switch.disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Hidden native input */\n.input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Switch track */\n.track {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: 52px;\n  height: 30px;\n  border-radius: var(--radii-switch, 9999px);\n  background: var(--forms-control-bg-default-disabled, #e8ebeb);\n  transition: background 0.2s ease;\n  box-sizing: border-box;\n}\n\n/* Track active state */\n.track.active {\n  background: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Track disabled state */\n.track.disabled {\n  background: var(--forms-control-bg-default-disabled, #e8ebeb);\n}\n\n/* Hover state */\n.switch:not(.disabled):hover .track:not(.active) {\n  background: #d0d6d8;\n}\n\n/* Focus state */\n.input:focus-visible + .track {\n  box-shadow: 0 0 0 4px var(--background-base, #ffffff), 0 0 0 5px var(--buttons-secondary-stroke, #14343b);\n  outline: none;\n}\n\n/* Switch knob */\n.knob {\n  position: absolute;\n  width: 26px;\n  height: 26px;\n  border-radius: 50%;\n  background: #ffffff;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n  transition: transform 0.2s ease, background 0.2s ease;\n  transform: translateX(2px);\n}\n\n/* Knob active position */\n.knob.active {\n  transform: translateX(24px);\n}\n\n/* Knob disabled state */\n.knob.disabled {\n  background: var(--forms-control-stroke-disabled, #a1aeb1);\n  box-shadow: none;\n}\n\n/* Label styling */\n.label {\n  display: flex;\n  align-items: center;\n  min-height: 24px;\n}\n\n/* Empty label - hide if no content */\n.label:empty {\n  display: none;\n}\n\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Switch component for toggling between on and off states.\n * \n * @slot - Switch label text\n */\n@Component({\n  tag: 'af-switch',\n  styleUrl: 'af-switch.css',\n  shadow: true\n})\nexport class AfSwitch {\n  /**\n   * Whether the switch is active (on)\n   */\n  @Prop({ mutable: true, reflect: true }) active: boolean = false;\n\n  /**\n   * Whether the switch is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the switch for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the switch for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the switch state changes\n   */\n  @Event() afChange!: EventEmitter<{ active: boolean }>;\n\n  private handleChange = () => {\n    if (this.disabled) return;\n    this.active = !this.active;\n    this.afChange.emit({ active: this.active });\n  };\n\n  render() {\n    const switchClasses = {\n      'switch': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    const trackClasses = {\n      'track': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    const knobClasses = {\n      'knob': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={switchClasses}>\n          <input\n            type=\"checkbox\"\n            role=\"switch\"\n            class=\"input\"\n            checked={this.active}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            onChange={this.handleChange}\n          />\n          <span class={trackClasses}>\n            <span class={knobClasses}></span>\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,2+CAA2+C;;MCYl/C,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAME;;AAEG;AACqC,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAE/D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiB1C,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC1B,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAC7C,SAAC;AA4CF;IA1CC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,EAAA,EACzB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,WAAW,EAAA,CAAS,CAC5B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACD,CACH;;;;;;;"}
+{"version":3,"file":"af-switch.entry.esm.js","sources":["src/components/af-switch/af-switch.css?tag=af-switch&encapsulation=shadow","src/components/af-switch/af-switch.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.switch {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--af-form-control-label, var(--af-typography-body-dark, #14343b));\n  user-select: none;\n}\n\n.switch.disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Hidden native input */\n.input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Switch track */\n.track {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  width: 52px;\n  height: 30px;\n  border-radius: var(--radii-switch, 9999px);\n  background: var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed));\n  transition: background 0.2s ease;\n  box-sizing: border-box;\n}\n\n/* Track active state */\n.track.active {\n  background: var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Track disabled state */\n.track.disabled {\n  background: var(--af-form-control-bg-disabled, var(--af-background-level-1, #e8eeed));\n}\n\n/* Track active + disabled state */\n.track.active.disabled {\n  background: var(--af-form-control-bg-checked-disabled, #708380);\n}\n\n/* Hover state */\n.switch:not(.disabled):hover .track:not(.active) {\n  background: var(--af-form-control-stroke, var(--af-background-level-1-hover, #dde6e3));\n}\n\n/* Focus state */\n.input:focus-visible + .track {\n  box-shadow: 0 0 0 4px var(--af-background-base, #ffffff), 0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n  outline: none;\n}\n\n/* Switch knob */\n.knob {\n  position: absolute;\n  width: 26px;\n  height: 26px;\n  border-radius: 50%;\n  background: var(--af-form-control-bg, var(--colour-brand-white, #ffffff));\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n  transition: transform 0.2s ease, background 0.2s ease;\n  transform: translateX(2px);\n}\n\n/* Knob active position */\n.knob.active {\n  transform: translateX(24px);\n  /* When active, knob should contrast with the checked track */\n  background: var(--af-form-control-icon, var(--colour-brand-white, #ffffff));\n}\n\n/* Knob disabled state */\n.knob.disabled {\n  background: var(--af-form-control-stroke-disabled, var(--colour-inkwell-200, #a1aeb1));\n  box-shadow: none;\n}\n\n/* Label styling */\n.label {\n  display: flex;\n  align-items: center;\n  min-height: 24px;\n}\n\n/* Empty label - hide if no content */\n.label:empty {\n  display: none;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Switch component for toggling between on and off states.\n * \n * @slot - Switch label text\n */\n@Component({\n  tag: 'af-switch',\n  styleUrl: 'af-switch.css',\n  shadow: true\n})\nexport class AfSwitch {\n  /**\n   * Whether the switch is active (on)\n   */\n  @Prop({ mutable: true, reflect: true }) active: boolean = false;\n\n  /**\n   * Whether the switch is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the switch for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the switch for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the switch state changes\n   */\n  @Event() afChange!: EventEmitter<{ active: boolean }>;\n\n  private handleChange = () => {\n    if (this.disabled) return;\n    this.active = !this.active;\n    this.afChange.emit({ active: this.active });\n  };\n\n  render() {\n    const switchClasses = {\n      'switch': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    const trackClasses = {\n      'track': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    const knobClasses = {\n      'knob': true,\n      'active': this.active,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={switchClasses}>\n          <input\n            type=\"checkbox\"\n            role=\"switch\"\n            class=\"input\"\n            checked={this.active}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            onChange={this.handleChange}\n          />\n          <span class={trackClasses}>\n            <span class={knobClasses}></span>\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,+3DAA+3D;;MCYt4D,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAME;;AAEG;AACqC,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAE/D;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiB1C,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC1B,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAC7C,SAAC;AA4CF;IA1CC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI,CAAC,MAAM;YACrB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,EAAA,EACzB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,WAAW,EAAA,CAAS,CAC5B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACD,CACH;;;;;;;"}

package/dist/affinda/af-textarea.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-textarea.entry.esm.js","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(--forms-fields-label, var(--colour-brand-inkwell, #14343b));\n  cursor: default;\n}\n\n.required {\n  color: var(--forms-fields-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(--forms-fields-label, var(--colour-brand-inkwell, #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(--buttons-secondary-stroke, #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(--forms-fields-description, var(--colour-inkwell-400, #2b484f));\n  margin: 0;\n}\n\n/* Textarea container */\n.textarea-container {\n  display: flex;\n  background: var(--forms-fields-bg-default, #ffffff);\n  border: 1px solid var(--forms-fields-stroke-default, #d0d6d8);\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(--forms-fields-bg-hover, #f3f5f5);\n}\n\n/* Focus state */\n.textarea-container.focused {\n  background: var(--forms-fields-bg-default, #ffffff);\n  border-color: var(--forms-fields-stroke-active, var(--colour-brand-inkwell, #14343b));\n  box-shadow: \n    0 0 0 4px var(--background-base, #ffffff), \n    0 0 0 5px var(--buttons-secondary-stroke, #14343b);\n}\n\n/* Error state */\n.textarea-container.error {\n  border-color: var(--forms-fields-stroke-error, #be292a);\n}\n\n/* Disabled state */\n.textarea-container.disabled {\n  background: var(--forms-fields-bg-disabled, #e8ebeb);\n  border-color: var(--forms-fields-stroke-default, #d0d6d8);\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(--forms-fields-input, var(--colour-brand-inkwell, #14343b));\n  outline: none;\n  resize: vertical;\n}\n\n.textarea::placeholder {\n  color: var(--forms-fields-placeholder, #60767b);\n  opacity: 1;\n}\n\n.textarea:disabled {\n  cursor: not-allowed;\n  color: var(--forms-fields-placeholder, #60767b);\n  resize: none;\n}\n\n.textarea:disabled::placeholder {\n  color: var(--forms-fields-placeholder, #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(--forms-fields-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(--forms-fields-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"],"names":[],"mappings":"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"}
+{"version":3,"file":"af-textarea.entry.esm.js","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"],"names":[],"mappings":"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"}