@rededor/cura 1.0.0 → 1.2.0-alpha.0

package/dist/collection/components/forms/cura-select/cura-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-select.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-select/cura-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h, Event, EventEmitter, AttachInternals, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-select',\n  styleUrl: 'cura-select.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class CuraSelect {\n  /**\n   * The label text for the select component.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) label: string = '';\n\n  /**\n   * Placeholder text for the input field.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) placeholder: string = '';\n\n  /**\n   * Current value of the select component.\n   * Reflects as an attribute in the DOM and is mutable.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Display mode of the select component.\n   * Can be 'default' or 'transparent'.\n   */\n  @Prop({ reflect: true }) mode: 'default' | 'transparent' = 'default';\n\n  /**\n   * Size of the select component.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Status of the select component.\n   * Can be 'success', 'error', or 'default'.\n   */\n  @Prop({ reflect: true, mutable: true }) status: 'success' | 'error' | 'default' = 'default';\n\n  /**\n   * Whether the select component is disabled.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether the select component is required.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Internal state: Whether the input is hovered.\n   * Default: false\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Internal state: Whether the input is focused.\n   * Default: false\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Internal state: Whether the dropdown menu is open.\n   * Default: false\n   */\n  @State() isOpen: boolean = false;\n\n  /**\n   * Internal state: Collection of options for the select component.\n   */\n  @State() options: NodeListOf<HTMLCuraSelectOptionElement>;\n\n\n  @State() activeIndex = -1\n\n  @Watch('activeIndex')\n  updateOptionHighlights(newActiveINdex: number) {\n    this.options.forEach((option, index) => (option as any).active = index === newActiveINdex);\n  }\n\n  @State() textInput = ''\n\n  @Watch('textInput')\n  /**\n   * Filters the options based on the current input value.\n   */\n  filterOptions(newText) {\n    if (!this.isOpen) {\n      return\n    }\n    \n    this.options.forEach(option => {\n      const optionValue = option.textContent?.toLowerCase() || '';\n      const isVisible = optionValue.includes(newText.toLocaleLowerCase())\n      option.style.display = isVisible ? 'block' : 'none';\n    });\n  }\n\n  /**\n   * Reference to the host element of the component.\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Event emitted when an option is selected.\n   */\n  @Event() selected: EventEmitter;\n\n  /**\n   * MutationObserver to watch changes in the component.\n   */\n  mutationObserver: MutationObserver;\n\n  /**\n   * Styles to be applied to the component.\n   */\n  styles = {};\n\n  /**\n   * Theme object containing font and color information.\n   */\n  theme = window.CuraAPI.theme;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n * Callback for form association.\n */\n  formAssociatedCallback(form: { ariaLabel: string; }) {\n    form.ariaLabel = this.label;\n  }\n\n  /**\n * Callback to restore the switch state from the form.\n */\n  formStateRestoreCallback(state: { value: string }) {\n    this.textInput = state.value;\n    this.updateSelectedOption();\n  }\n\n  /**\n * Callback to reset the switch state when the form is reset.\n */\n  formResetCallback() {\n    this.textInput = '';\n    this.clearSelectedAttributes()\n    this.internals.setFormValue('');\n    this.internals.setValidity({});\n  }\n\n  /**\n  * Callback to update the switch's disabled state when the form's disabled state changes.\n  */\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  /**\n   * Lifecycle method called before the component is rendered.\n   * Initializes the options for the select component.\n   */\n  componentWillLoad() {\n    this.initializeOptions();\n  }\n  /**\n   * Lifecycle method called after the component is rendered.\n   * Initializes select-related functionality.\n   */\n  componentDidLoad() {\n    this.setupMutationObserver();\n  }\n  /**\n   * Lifecycle method called when the component is connected to the DOM.\n   * Applies styles based on the theme.\n   */\n  connectedCallback() {\n    this.applyStyles();\n  }\n  /**\n   * Lifecycle method called when the component is disconnected from the DOM.\n   * Disconnects the MutationObserver if it exists.\n   */\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  initializeOptions() {\n    this.options = this.host.querySelectorAll<HTMLCuraSelectOptionElement>('cura-select-option');\n    this.options.forEach(option => {\n      option.setAttribute('size', this.size);\n\n      const isSelected = this.value === option.value\n      option.setAttribute('selected', JSON.stringify(isSelected));\n\n      if (isSelected) {\n        this.value = option.value\n        this.internals.setFormValue(option.value)\n      }\n    });\n\n    this.textInput = Array.from(this.options).find(option => option.value === this.value)?.textContent || this.textInput\n  }\n  /**\n   * Applies styles to the component based on the theme.\n   */\n  applyStyles() {\n    const { fonts, colors } = this.theme;\n    const fontWeights = fonts.getWeights();\n\n    this.styles = {\n      ...this.styles,\n      '--font-weight-medium': fontWeights.medium,\n      '--font-weight-bold': fontWeights.bold,\n      '--font-weight-regular': fontWeights.regular,\n      '--font-color': fonts.getColor(),\n      '--font-family': fonts.getFamily(),\n      '--font-size': fonts.getSize(),\n    };\n\n    const colorKeys = [\n      'primary-base', 'neutral-purewhite', 'neutral-white', 'neutral-black', 'neutral-medium', 'neutral-light',\n      'neutral-base', 'neutral-dark', 'success-dark', 'success-darker', 'success-lighter',\n      'error-lighter', 'error-dark', 'error-darker', 'error-base', 'info-base'\n    ];\n\n    colorKeys.forEach(key => {\n      this.styles[`--${key}`] = colors.getColor(key);\n    });\n  }\n  /**\n   * Sets up a MutationObserver to watch for changes in the component.\n   */\n  setupMutationObserver() {\n    this.mutationObserver = new MutationObserver(this.handleMutations);\n    this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });\n  }\n  /**\n   * Handles mutations observed by the MutationObserver.\n   * Updates the selected option or filters options based on the mutation type.\n   */\n  handleMutations = (mutations: MutationRecord[]) => {\n    mutations.forEach(mutation => {\n      if (mutation.type === 'attributes') {\n        if (mutation.attributeName === 'selected') this.updateSelectedOption();\n      }\n    });\n  };\n  /**\n   * Handles the selection of an option.\n   */\n  onOptiselected = (event: Event) => {\n    const selectedOption = event.target as HTMLElement;\n    this.clearSelectedAttributes();\n    selectedOption.setAttribute('selected', 'true');\n  };\n\n  @Watch('value') \n  handleValueChange(newValue: string) {\n    this.clearSelectedAttributes(); \n\n    const selectedOption = this.host.querySelector(`cura-select-option[value=\"${newValue}\"]`); \n\n    if(!selectedOption) {\n      return\n    }\n\n    selectedOption.setAttribute('selected', 'true');\n  }\n\n  updateSelectedOption() {\n    const selectedOptionElement = this.host.querySelector<HTMLCuraSelectOptionElement>('cura-select-option[selected]');\n\n    if (!selectedOptionElement) {\n      return\n    }\n\n    this.value = selectedOptionElement.value\n    this.internals.setFormValue(this.value)\n\n    if (this.textInput !== selectedOptionElement.textContent) {\n      this.textInput = selectedOptionElement.textContent ;\n      this.isOpen = false;\n      this.selected.emit(selectedOptionElement.value);\n    }\n  }\n\n  /**\n   * Clears the 'selected' attribute from all options.\n   */\n  clearSelectedAttributes() {\n    this.options.forEach(option => option.removeAttribute('selected'));\n  }\n\n  handleKeyNavigation = (event: KeyboardEvent) => {\n    const { code: keyCode } = event\n    \n    if (!this.isOpen && keyCode === 'ArrowDown') {\n      this.isOpen = true\n      this.activeIndex = 0\n\n      return\n    }\n\n    if (keyCode === 'ArrowDown') {\n      event.preventDefault();\n      this.updateActiveIndex(1);\n    }\n\n    if (keyCode === 'ArrowUp') {\n      event.preventDefault();\n      this.updateActiveIndex(-1);\n    }\n\n    if (keyCode === 'Enter' || keyCode === 'Space') {\n      this.options[this.activeIndex]?.click();\n    }\n\n    if (keyCode === 'Escape') {\n      this.isOpen = false\n    }\n  }\n\n  updateActiveIndex(direction: number) {\n    if (this.options.length === 0) return;\n    this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;\n  }\n\n  handleInputChange = (e: Event) => {\n    this.textInput = (e.target as HTMLInputElement).value;\n    this.isOpen = this.textInput.length > 0;\n    this.internals.setFormValue(this.textInput);\n  };\n\n\n  getClasses() {\n    return {\n      wrapper: true,\n      label: !!this.label,\n      disabled: this.disabled,\n      transparent: this.mode === 'transparent',\n      [this.size.toLowerCase()]: true,\n      [this.status.toLowerCase()]: true,\n    };\n  }\n\n  /**\n   * Determines the color based on the item type and component state.\n   */\n  getColor(item: 'label' | 'text' | 'icon') {\n    if (this.disabled) return 'neutral-medium';\n\n    const isStatusDefault = this.status === 'default';\n    const isHoveredOrFocused = this.isFocused || this.isHovered;\n\n    if (item === 'label') {\n      if (!isStatusDefault || isHoveredOrFocused) return 'neutral-black';\n      return 'neutral-dark';\n    }\n\n    if (isHoveredOrFocused && isStatusDefault) return 'neutral-black';\n    if (this.status === 'success') return 'success-dark';\n    if (this.status === 'error') return 'error-dark';\n\n    return 'neutral-dark';\n  }\n\n  /**\n   * Renders the icon based on the component's status.\n   */\n  renderIcon() {\n    if (this.status === 'default') return null;\n    const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];\n    return (\n      <cura-icon\n        class='feedback-icon'\n        name={icon}\n        iconset='default'\n        size={this.size === 'large' ? 20 : 16}\n        color={this.getColor('icon')}\n        style={this.styles}\n      />\n    );\n  }\n\n  handleClick = (event: MouseEvent) => {\n    if (this.disabled) return event.preventDefault();\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'CURA-SELECT-OPTION') return this.onOptiselected(event);\n    this.isOpen = !this.isOpen;\n  };\n\n\n  render() {\n    return (\n      <Host style={this.styles}>\n        <div\n          class={this.getClasses()}\n          onMouseEnter={() => (this.isHovered = true)}\n          onMouseLeave={() => (this.isHovered = false)}\n          onClick={this.handleClick}\n        >\n          {this.label && (\n            <cura-label\n              class='label'\n              weight='bold'\n              size={this.size === 'large' ? 'small' : 'xsmall'}\n              color={this.getColor('label')}\n            >\n              {this.label} {this.required && <span class='required'>* </span>}\n            </cura-label>\n          )}\n\n          <div class={{\n            'cura-input-field': true,\n            'open': this.isOpen\n          }}>\n            {this.renderIcon()}\n            <input\n              type=\"text\"\n              autocomplete='off'\n              onFocus={() => (this.isFocused = true)}\n              onBlur={() => (this.isFocused = false)}\n              onKeyDown={this.handleKeyNavigation}\n              aria-required={String(this.required)}\n              aria-disabled={String(this.disabled)}\n              aria-invalid={String(this.status === 'error')}\n              onInput={this.handleInputChange}\n              style={this.styles}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              required={this.required}\n              value={this.textInput}\n            />\n            <cura-icon\n              name={this.isOpen ? 'up' : 'down'}\n              class=\"up-down-icon\"\n              color={this.disabled ? 'neutral-dark' : 'primary-base'}\n              size={16}\n              iconset='default'\n            />\n          </div>\n          <cura-label\n            class=\"helper-text\"\n            size='xsmall'\n            color={this.getColor('text')}\n            weight={this.mode === 'transparent' ? 'bold' : 'regular'} >\n            <slot></slot>\n          </cura-label>\n          {this.isOpen && (\n            <div class={{\n              'menu': true,\n              'open': this.isOpen\n            }}>\n              <slot name='option'></slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cura-select.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-select/cura-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h, Event, EventEmitter, AttachInternals, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-select',\n  styleUrl: 'cura-select.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class CuraSelect {\n  /**\n   * The label text for the select component.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) label: string = '';\n\n  /**\n   * Placeholder text for the input field.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) placeholder: string = '';\n\n  /**\n   * Current value of the select component.\n   * Reflects as an attribute in the DOM and is mutable.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Display mode of the select component.\n   * Can be 'default' or 'transparent'.\n   */\n  @Prop({ reflect: true }) mode: 'default' | 'transparent' = 'default';\n\n  /**\n   * Size of the select component.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Status of the select component.\n   * Can be 'success', 'error', or 'default'.\n   */\n  @Prop({ reflect: true, mutable: true }) status: 'success' | 'error' | 'default' = 'default';\n\n  /**\n   * Whether the select component is disabled.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether the select component is required.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Enable / Disable search at options by term.\n   * Default: false\n   */\n  @Prop({ reflect: true}) searchBehavior: boolean = false;\n\n  /**\n   * Internal state: Whether the input is hovered.\n   * Default: false\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Internal state: Whether the input is focused.\n   * Default: false\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Internal state: Whether the dropdown menu is open.\n   * Default: false\n   */\n  @State() isOpen: boolean = false;\n\n  /**\n   * Internal state: Collection of options for the select component.\n   */\n  @State() options: NodeListOf<HTMLCuraSelectOptionElement>;\n\n\n  @State() activeIndex = -1\n\n  @Watch('activeIndex')\n  updateOptionHighlights(newActiveINdex: number) {\n    this.options.forEach((option, index) => (option as any).active = index === newActiveINdex);\n  }\n\n  @State() textInput = ''\n\n  @Watch('textInput')\n  /**\n   * Filters the options based on the current input value.\n   */\n  filterOptions(newText) {\n    if (!this.isOpen || !this.searchBehavior) {\n      return\n    }\n\n    this.options.forEach(option => {\n      const optionValue = option.textContent?.toLowerCase() || '';\n      const isVisible = optionValue.includes(newText.toLocaleLowerCase())\n      option.style.display = isVisible ? 'block' : 'none';\n    });\n  }\n\n  /**\n   * Reference to the host element of the component.\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Event emitted when an option is selected.\n   */\n  @Event() selected: EventEmitter;\n\n  /**\n   * MutationObserver to watch changes in the component.\n   */\n  mutationObserver: MutationObserver;\n\n  /**\n   * Styles to be applied to the component.\n   */\n  styles = {};\n\n  /**\n   * Theme object containing font and color information.\n   */\n  theme = window.CuraAPI.theme;\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n * Callback for form association.\n */\n  formAssociatedCallback(form: { ariaLabel: string; }) {\n    form.ariaLabel = this.label;\n  }\n\n  /**\n * Callback to restore the switch state from the form.\n */\n  formStateRestoreCallback(state: { value: string }) {\n    this.textInput = state.value;\n    this.updateSelectedOption();\n  }\n\n  /**\n * Callback to reset the switch state when the form is reset.\n */\n  formResetCallback() {\n    this.textInput = '';\n    this.clearSelectedAttributes()\n    this.internals.setFormValue('');\n    this.internals.setValidity({});\n  }\n\n  /**\n  * Callback to update the switch's disabled state when the form's disabled state changes.\n  */\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  /**\n   * Lifecycle method called before the component is rendered.\n   * Initializes the options for the select component.\n   */\n  componentWillLoad() {\n    this.initializeOptions();\n  }\n  /**\n   * Lifecycle method called after the component is rendered.\n   * Initializes select-related functionality.\n   */\n  componentDidLoad() {\n    this.setupMutationObserver();\n  }\n  /**\n   * Lifecycle method called when the component is connected to the DOM.\n   * Applies styles based on the theme.\n   */\n  connectedCallback() {\n    this.applyStyles();\n  }\n  /**\n   * Lifecycle method called when the component is disconnected from the DOM.\n   * Disconnects the MutationObserver if it exists.\n   */\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  initializeOptions() {\n    this.options = this.host.querySelectorAll<HTMLCuraSelectOptionElement>('cura-select-option');\n    this.options.forEach(option => {\n      option.setAttribute('size', this.size);\n\n      const isSelected = this.value === option.value\n      option.setAttribute('selected', JSON.stringify(isSelected));\n\n      if (isSelected) {\n        this.value = option.value\n        this.internals.setFormValue(option.value)\n      }\n    });\n\n    this.textInput = Array.from(this.options).find(option => option.value === this.value)?.textContent || this.textInput\n  }\n  /**\n   * Applies styles to the component based on the theme.\n   */\n  applyStyles() {\n    const { fonts, colors } = this.theme;\n    const fontWeights = fonts.getWeights();\n\n    this.styles = {\n      ...this.styles,\n      '--font-weight-medium': fontWeights.medium,\n      '--font-weight-bold': fontWeights.bold,\n      '--font-weight-regular': fontWeights.regular,\n      '--font-color': fonts.getColor(),\n      '--font-family': fonts.getFamily(),\n      '--font-size': fonts.getSize(),\n    };\n\n    const colorKeys = [\n      'primary-base', 'neutral-purewhite', 'neutral-white', 'neutral-black', 'neutral-medium', 'neutral-light',\n      'neutral-base', 'neutral-dark', 'success-dark', 'success-darker', 'success-lighter',\n      'error-lighter', 'error-dark', 'error-darker', 'error-base', 'info-base'\n    ];\n\n    colorKeys.forEach(key => {\n      this.styles[`--${key}`] = colors.getColor(key);\n    });\n  }\n  /**\n   * Sets up a MutationObserver to watch for changes in the component.\n   */\n  setupMutationObserver() {\n    this.mutationObserver = new MutationObserver(this.handleMutations);\n    this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });\n  }\n  /**\n   * Handles mutations observed by the MutationObserver.\n   * Updates the selected option or filters options based on the mutation type.\n   */\n  handleMutations = (mutations: MutationRecord[]) => {\n    mutations.forEach(mutation => {\n      if (mutation.type === 'attributes') {\n        if (mutation.attributeName === 'selected') this.updateSelectedOption();\n      }\n    });\n  };\n  /**\n   * Handles the selection of an option.\n   */\n  onOptiselected = (event: Event) => {\n    const selectedOption = event.target as HTMLElement;\n    this.clearSelectedAttributes();\n    selectedOption.setAttribute('selected', 'true');\n  };\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    this.clearSelectedAttributes();\n\n    const selectedOption = this.host.querySelector(`cura-select-option[value=\"${newValue}\"]`);\n\n    if(!selectedOption) {\n      return\n    }\n\n    selectedOption.setAttribute('selected', 'true');\n  }\n\n  updateSelectedOption() {\n    const selectedOptionElement = this.host.querySelector<HTMLCuraSelectOptionElement>('cura-select-option[selected]');\n\n    if (!selectedOptionElement) {\n      return\n    }\n\n    this.value = selectedOptionElement.value\n    this.internals.setFormValue(this.value)\n\n    if (this.textInput !== selectedOptionElement.textContent) {\n      this.textInput = selectedOptionElement.textContent ;\n      this.isOpen = false;\n      this.selected.emit(selectedOptionElement.value);\n    }\n  }\n\n  /**\n   * Clears the 'selected' attribute from all options.\n   */\n  clearSelectedAttributes() {\n    this.options.forEach(option => option.removeAttribute('selected'));\n  }\n\n  handleKeyNavigation = (event: KeyboardEvent) => {\n    const { code: keyCode } = event\n\n    if (!this.isOpen && keyCode === 'ArrowDown') {\n      this.isOpen = true\n      this.activeIndex = 0\n\n      return\n    }\n\n    if (keyCode === 'ArrowDown') {\n      event.preventDefault();\n      this.updateActiveIndex(1);\n    }\n\n    if (keyCode === 'ArrowUp') {\n      event.preventDefault();\n      this.updateActiveIndex(-1);\n    }\n\n    if (keyCode === 'Enter' || keyCode === 'Space') {\n      this.options[this.activeIndex]?.click();\n    }\n\n    if (keyCode === 'Escape') {\n      this.isOpen = false\n    }\n  }\n\n  updateActiveIndex(direction: number) {\n    if (this.options.length === 0) return;\n    this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;\n  }\n\n  handleInputChange = (e: Event) => {\n    this.textInput = (e.target as HTMLInputElement).value;\n    this.isOpen = this.textInput.length > 0;\n    this.internals.setFormValue(this.textInput);\n  };\n\n\n  getClasses() {\n    return {\n      wrapper: true,\n      label: !!this.label,\n      disabled: this.disabled,\n      transparent: this.mode === 'transparent',\n      [this.size.toLowerCase()]: true,\n      [this.status.toLowerCase()]: true,\n    };\n  }\n\n  /**\n   * Determines the color based on the item type and component state.\n   */\n  getColor(item: 'label' | 'text' | 'icon') {\n    if (this.disabled) return 'neutral-medium';\n\n    const isStatusDefault = this.status === 'default';\n    const isHoveredOrFocused = this.isFocused || this.isHovered;\n\n    if (item === 'label') {\n      if (!isStatusDefault || isHoveredOrFocused) return 'neutral-black';\n      return 'neutral-dark';\n    }\n\n    if (isHoveredOrFocused && isStatusDefault) return 'neutral-black';\n    if (this.status === 'success') return 'success-dark';\n    if (this.status === 'error') return 'error-dark';\n\n    return 'neutral-dark';\n  }\n\n  /**\n   * Renders the icon based on the component's status.\n   */\n  renderIcon() {\n    if (this.status === 'default') return null;\n    const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];\n    return (\n      <cura-icon\n        class='feedback-icon'\n        name={icon}\n        iconset='default'\n        size={this.size === 'large' ? 20 : 16}\n        color={this.getColor('icon')}\n        style={this.styles}\n      />\n    );\n  }\n\n  handleClick = (event: MouseEvent) => {\n    if (this.disabled) return event.preventDefault();\n    const target = event.target as HTMLElement;\n\n    if (target.tagName === 'CURA-SELECT-OPTION') return this.onOptiselected(event);\n    this.isOpen = !this.isOpen;\n  };\n\n\n  render() {\n    return (\n      <Host style={this.styles}>\n        <div\n          class={this.getClasses()}\n          onMouseEnter={() => (this.isHovered = true)}\n          onMouseLeave={() => (this.isHovered = false)}\n          onClick={this.handleClick}\n        >\n          {this.label && (\n            <cura-label\n              class='label'\n              weight='bold'\n              size={this.size === 'large' ? 'small' : 'xsmall'}\n              color={this.getColor('label')}\n            >\n              {this.label} {this.required && <span class='required'>* </span>}\n            </cura-label>\n          )}\n\n          <div class={{\n            'cura-input-field': true,\n            'open': this.isOpen\n          }}>\n            {this.renderIcon()}\n            <input\n              type=\"text\"\n              autocomplete='off'\n              onFocus={() => (this.isFocused = true)}\n              onBlur={() => (this.isFocused = false)}\n              onKeyDown={this.handleKeyNavigation}\n              aria-required={String(this.required)}\n              aria-disabled={String(this.disabled)}\n              aria-invalid={String(this.status === 'error')}\n              onInput={this.handleInputChange}\n              style={this.styles}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              required={this.required}\n              value={this.textInput}\n              readonly={this.searchBehavior ? null : true}\n            />\n            <cura-icon\n              name={this.isOpen ? 'up' : 'down'}\n              class=\"up-down-icon\"\n              color={this.disabled ? 'neutral-dark' : 'primary-base'}\n              size={16}\n              iconset='default'\n            />\n          </div>\n          <cura-label\n            class=\"helper-text\"\n            size='xsmall'\n            color={this.getColor('text')}\n            weight={this.mode === 'transparent' ? 'bold' : 'regular'} >\n            <slot></slot>\n          </cura-label>\n          {this.isOpen && (\n            <div class={{\n              'menu': true,\n              'open': this.isOpen\n            }}>\n              <slot name='option'></slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/forms/cura-select/cura-select.stories.js

@@ -9,7 +9,8 @@ const renderCuraSelect = (args) => {
   size="${args.size}"` : ''}${args.status ? `
   status="${args.status}"` : ''}${args.disabled ? `
   disabled` : ''}${args.required ? `
-  required` : ''}>
+  required` : ''}${args.searchBehavior ? `
+  search-behavior="${args.searchBehavior}"` : ''}>
   ${args.helperText}
   ${optionsMarkup}
 </cura-select>`;
@@ -96,6 +97,14 @@ export default {
                 defaultValue: { summary: 'false' },
             },
         },
+        searchBehavior: {
+            control: 'boolean',
+            description: 'Habilita o modo de digitação e busca nas opções a partir do termo.',
+            table: {
+                category: 'states',
+                defaultValue: { summary: 'false' },
+            }
+        },
         helperText: {
             name: 'content',
             control: 'text',
@@ -138,6 +147,7 @@ export const CuraSelect = {
         status: 'default',
         disabled: false,
         required: false,
+        searchBehavior: false,
         helperText: 'Texto de ajuda'
     },
 };

package/dist/collection/components/forms/cura-select/cura-select.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-select.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-select/cura-select.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["const renderCuraSelect = (args) => {\n  const optionsMarkup = args.options.map(option =>\n    `<cura-select-option value=\"${option.value}\">${option.label}</cura-select-option>`\n  ).join('');\n\n  const block = `<cura-select${args.label ? `\n  label=\"${args.label}\"` : ''}${args.placeholder ? `\n  placeholder=\"${args.placeholder}\"` : ''}${args.defaultValue ? `\n  default-value=\"${args.defaultValue}\"` : ''}${args.value ? `\n  value=\"${args.value}\"` : ''}${args.mode ? `\n  mode=\"${args.mode}\"` : ''}${args.size ? `\n  size=\"${args.size}\"` : ''}${args.status ? `\n  status=\"${args.status}\"` : ''}${args.disabled ? `\n  disabled` : ''}${args.required ? `\n  required` : ''}>\n  ${args.helperText}\n  ${optionsMarkup}\n</cura-select>`;\n\n  return `<div style=\"height: 200px; padding: 20px;\">${block}</div>`;\n};\n\n\n\nexport default {\n  title: 'Componentes/Forms/Select',\n  component: 'cura-select',\n  tags: ['autodocs'],\n  render: (args) => renderCuraSelect(args),\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto do rótulo para o componente select.',\n      table: {\n        category: 'Propriedades',\n        defaultValue: { summary: '' },\n      },\n    },\n    placeholder: {\n      control: 'text',\n      description: 'Texto de espaço reservado para o campo de entrada.',\n      table: {\n        category: 'Propriedades',\n        defaultValue: { summary: '' },\n      },\n    },\n    defaultValue: {\n      control: 'text',\n      description: 'Valor padrão para o componente select.',\n      table: {\n        category: 'Propriedades',\n        defaultValue: { summary: '' },\n      },\n    },\n    value: {\n      control: 'text',\n      description: 'Valor atual do componente select. Ao inicar a busca o mesmo se refere ao option relacionado',\n      table: {\n        category: 'Propriedades',\n        defaultValue: { summary: '' },\n      },\n    },\n    mode: {\n      control: { type: 'inline-radio' },\n      options: ['default', 'transparent'],\n      description: \"Modo de exibição do componente select. Pode ser 'default' ou 'transparent'.\",\n      table: {\n        category: 'Propriedades',\n        defaultValue: { summary: 'default' },\n      },\n    },\n    size: {\n      control: { type: 'inline-radio' },\n      options: ['small', 'medium', 'large'],\n      description: \"Tamanho do componente select. Pode ser 'small', 'medium' ou 'large'.\",\n      table: {\n        category: 'Propriedades',\n        defaultValue: { summary: 'medium' },\n      },\n    },\n    status: {\n      control: { type: 'inline-radio' },\n      options: ['default', 'success', 'error'],\n      description: \"Status do componente select. Pode ser 'success', 'error' ou 'default'.\",\n      table: {\n        category: 'Propriedades',\n        defaultValue: { summary: 'default' },\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Indica se o componente select está desabilitado.',\n      table: {\n        category: 'states',\n        defaultValue: { summary: 'false' },\n      },\n    },\n    required: {\n      control: 'boolean',\n      description: 'Indica se o componente select é obrigatório.',\n      table: {\n        category: 'states',\n        defaultValue: { summary: 'false' },\n      },\n    },\n    helperText: {\n      name: 'content',\n      control: 'text',\n      description: 'Define o texto de ajuda do input, renderizado dentro do slot num elemento <cura-label>. Aceita tags HTML.',\n      table: {\n        category: 'Slots',\n        defaultValue: { summary: '' },\n      },\n    },\n    onselect: {\n      description: 'Emite um evento via Listener quando um valor é selecionado. { value: string , selected: boolean }',\n      table: {\n        category: 'Evento',\n        defaultValue: { summary: '' },\n      },\n    },\n    options: {\n      control: 'array',\n      description: 'Lista de opções definido pela aplicação para cura-select-option.',\n      table: {\n        category: 'aplication',\n        defaultValue: { summary: '[]' },\n      },\n    },\n  },\n};\n\nexport const CuraSelect = {\n  args: {\n    options: [\n      { value: '1', label: 'Opção 1' },\n      { value: '2', label: 'Escolha 2' },\n      { value: '3', label: 'Exemplo 3' },\n    ],\n    label: 'Escolha uma opção',\n    placeholder: 'Selecione...',\n    defaultValue: '',\n    value: '',\n    mode: 'default',\n    size: 'medium',\n    status: 'default',\n    disabled: false,\n    required: false,\n    helperText: 'Texto de ajuda'\n  },\n};\n"]}
+{"version":3,"file":"cura-select.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-select/cura-select.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["const renderCuraSelect = (args) => {\n  const optionsMarkup = args.options.map(option =>\n    `<cura-select-option value=\"${option.value}\">${option.label}</cura-select-option>`\n  ).join('');\n\n  const block = `<cura-select${args.label ? `\n  label=\"${args.label}\"` : ''}${args.placeholder ? `\n  placeholder=\"${args.placeholder}\"` : ''}${args.defaultValue ? `\n  default-value=\"${args.defaultValue}\"` : ''}${args.value ? `\n  value=\"${args.value}\"` : ''}${args.mode ? `\n  mode=\"${args.mode}\"` : ''}${args.size ? `\n  size=\"${args.size}\"` : ''}${args.status ? `\n  status=\"${args.status}\"` : ''}${args.disabled ? `\n  disabled` : ''}${args.required ? `\n  required` : ''}${args.searchBehavior ? `\n  search-behavior=\"${args.searchBehavior}\"` : ''}>\n  ${args.helperText}\n  ${optionsMarkup}\n</cura-select>`;\n\n  return `<div style=\"height: 200px; padding: 20px;\">${block}</div>`;\n};\n\n\n\nexport default {\n  title: 'Componentes/Forms/Select',\n  component: 'cura-select',\n  tags: ['autodocs'],\n  render: (args) => renderCuraSelect(args),\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Texto do rótulo para o componente select.',\n      table: {\n        category: 'Propriedades',\n        defaultValue: { summary: '' },\n      },\n    },\n    placeholder: {\n      control: 'text',\n      description: 'Texto de espaço reservado para o campo de entrada.',\n      table: {\n        category: 'Propriedades',\n        defaultValue: { summary: '' },\n      },\n    },\n    defaultValue: {\n      control: 'text',\n      description: 'Valor padrão para o componente select.',\n      table: {\n        category: 'Propriedades',\n        defaultValue: { summary: '' },\n      },\n    },\n    value: {\n      control: 'text',\n      description: 'Valor atual do componente select. Ao inicar a busca o mesmo se refere ao option relacionado',\n      table: {\n        category: 'Propriedades',\n        defaultValue: { summary: '' },\n      },\n    },\n    mode: {\n      control: { type: 'inline-radio' },\n      options: ['default', 'transparent'],\n      description: \"Modo de exibição do componente select. Pode ser 'default' ou 'transparent'.\",\n      table: {\n        category: 'Propriedades',\n        defaultValue: { summary: 'default' },\n      },\n    },\n    size: {\n      control: { type: 'inline-radio' },\n      options: ['small', 'medium', 'large'],\n      description: \"Tamanho do componente select. Pode ser 'small', 'medium' ou 'large'.\",\n      table: {\n        category: 'Propriedades',\n        defaultValue: { summary: 'medium' },\n      },\n    },\n    status: {\n      control: { type: 'inline-radio' },\n      options: ['default', 'success', 'error'],\n      description: \"Status do componente select. Pode ser 'success', 'error' ou 'default'.\",\n      table: {\n        category: 'Propriedades',\n        defaultValue: { summary: 'default' },\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Indica se o componente select está desabilitado.',\n      table: {\n        category: 'states',\n        defaultValue: { summary: 'false' },\n      },\n    },\n    required: {\n      control: 'boolean',\n      description: 'Indica se o componente select é obrigatório.',\n      table: {\n        category: 'states',\n        defaultValue: { summary: 'false' },\n      },\n    },\n    searchBehavior: {\n      control: 'boolean',\n      description: 'Habilita o modo de digitação e busca nas opções a partir do termo.',\n      table: {\n        category: 'states',\n        defaultValue: { summary: 'false' },\n      }\n    },\n    helperText: {\n      name: 'content',\n      control: 'text',\n      description: 'Define o texto de ajuda do input, renderizado dentro do slot num elemento <cura-label>. Aceita tags HTML.',\n      table: {\n        category: 'Slots',\n        defaultValue: { summary: '' },\n      },\n    },\n    onselect: {\n      description: 'Emite um evento via Listener quando um valor é selecionado. { value: string , selected: boolean }',\n      table: {\n        category: 'Evento',\n        defaultValue: { summary: '' },\n      },\n    },\n    options: {\n      control: 'array',\n      description: 'Lista de opções definido pela aplicação para cura-select-option.',\n      table: {\n        category: 'aplication',\n        defaultValue: { summary: '[]' },\n      },\n    },\n  },\n};\n\nexport const CuraSelect = {\n  args: {\n    options: [\n      { value: '1', label: 'Opção 1' },\n      { value: '2', label: 'Escolha 2' },\n      { value: '3', label: 'Exemplo 3' },\n    ],\n    label: 'Escolha uma opção',\n    placeholder: 'Selecione...',\n    defaultValue: '',\n    value: '',\n    mode: 'default',\n    size: 'medium',\n    status: 'default',\n    disabled: false,\n    required: false,\n    searchBehavior: false,\n    helperText: 'Texto de ajuda'\n  },\n};\n"]}

package/dist/collection/components/forms/cura-select-options/cura-select-option.js

@@ -33,7 +33,7 @@ export class CuraSelectOption {
         };
     }
     render() {
-        return (h(Host, { key: '5feb573684784f2cf70876ccc1bb673b853d69b4', slot: "option" }, h("div", { key: '03c65c64facc97c887c19f2226dfc5f1830004e1', class: this.getClasses(), style: this.styles }, h("cura-label", { key: '79f32d2bcc3ec42c8adb581fb8c4151920d55111', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: '0df731f7223fac86e58676597c052caadd1d2858' })), this.selected && h("cura-icon", { key: '28d4f9561a60bf9ecfeca44e4835b46ffee28ec1', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
+        return (h(Host, { key: '9c6496e905c81df28315112ab5f12ff114c127dd', slot: "option" }, h("div", { key: '4e8fc83e9fc9f8ac7ecbb17887ed98c6ebc86457', class: this.getClasses(), style: this.styles }, h("cura-label", { key: '818b5dae2fd6f2a907de9077e88999ae264df7e1', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: '1f295646eda004443b66005544ee514ce9e095d8' })), this.selected && h("cura-icon", { key: 'db126766232531ea18e28f10b77176e21268db1b', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
     }
     static get is() { return "cura-select-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-switch/cura-switch.js

@@ -92,7 +92,7 @@ export class CuraSwitch {
         return classes;
     }
     render() {
-        return (h(Host, { key: 'a18d2e4516e63c9dc080fabb97ded6cb145f096f' }, h("div", { key: 'e6cfb0bada406eef4b6dc400eae2cc8e15ff209b', class: this.getClasses(), style: this.styles }, h("div", { key: '520489765d61a4c96079cc51395c9a7038c1ec12', class: "info" }, h("cura-label", { key: '3b064a7794c262d62e4d8e04475ca20d87febc7b', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: 'b94ac8cf1fd1e3ba0dce269b677636f09bc97597', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '437f81a5bde1395d97c346928191c8ab0ce7219d' }))), h("div", { key: '3e36e82138a69c5f829f54ec82af0646fdea4fbb', onClick: this.toggleSwitch, class: "control" }, h("div", { key: '7068b0664ebb020037d63df565e5c835b7a4fa46', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '6ce66dfe5d06bdfdb625b38b0e0adb20df7db130', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
+        return (h(Host, { key: '6bbc037348270c69bfac13e7466c6fd19f4dc427' }, h("div", { key: '11ada01c69ff91815ba1b1f76a6e6b448e88a361', class: this.getClasses(), style: this.styles }, h("div", { key: '34992d3d6fbf3ca7782fa4502e297d508656c34c', class: "info" }, h("cura-label", { key: '0e6a178f1f74526962d588b1fad3024920bcf815', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: '33e7c6d7aaabd9007b0a41fb966b41b0fd947bc8', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '66dd525702f7d53c8167cfd2aa25552d1bd79837' }))), h("div", { key: 'a3828f2e511a7e23ad5d0e04319637e1aa256c96', onClick: this.toggleSwitch, class: "control" }, h("div", { key: 'afc664ab5563591ef201eee1ca0d33a48075ad04', class: `track ${this.size.toLowerCase()}` }, h("div", { key: 'e6b7f3b67e78421283426ce1c7679cbbf8f77f5e', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
     }
     static get is() { return "cura-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/loaders/cura-loader-bar/cura-loader-bar.js

@@ -16,7 +16,7 @@ export class CuraLoaderBar {
         this.setProgress();
     }
     render() {
-        return (h(Host, { key: 'e8c5cf2c47e5b8a1a3e0ea758df9a5183b94afbe' }, h("div", { key: '4375509425a0f7f8a86ded54c792f04d8b34d004', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: '2d78b8f09726918cb01ef2ba775cf061f8b1fbab', class: "progress-bar-fill" }))));
+        return (h(Host, { key: 'c98e1e2e370b5fadc87eb960d030324e36acd250' }, h("div", { key: '39dac6c361361e840305e15d6bf4ff09cfa3380e', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: 'b501bd4846993c62a246a5891b9650faaca89c32', class: "progress-bar-fill" }))));
     }
     setColor() {
         this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--color-base': window.CuraAPI.theme.colors.getColor(this.color) });

package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js

@@ -19,7 +19,7 @@ export class CuraLoaderCircle {
         };
     }
     render() {
-        return (h(Host, { key: '4c3a12d61a3b686438ece6752160337ca8cacf18', style: this.getStyles() }, h("svg", { key: 'bf8d817e7624419514e8f918ade94024c0d6bcb9', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '69885675868e25d75e9b0a461cb6563ba32a317a' }, h("circle", { key: 'a1b20469b5bb76d101cfbba683f99689b2a8b8ed', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: 'c74b6313eff3374f711ace4c638fa0e671325f12', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '5f5861e8cdf8f192cd3312c345b0c3f2afeeb0c2' }, h("linearGradient", { key: '98826d4d31d454e8d013349003bc89c3b82118bd', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'c0e582f71ef1a6870d0f77047198f58bf18987f6' }), h("stop", { key: '3f120a0b8e9c86388f084d34e4bda9f8c5893702', offset: "1" }))))));
+        return (h(Host, { key: '2697e72f8af894a6bea7092d3f56de4855788ea1', style: this.getStyles() }, h("svg", { key: 'ef5ae4cb6f02d80a79be4d066714e5d658d48a31', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '476fb5af3fdd8f4002de31ac2282dfe0c3e94a0f' }, h("circle", { key: '937db497c08019f64fb38974ace4262c6bc29ebb', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: 'ee611cdaa0b77ba3ef3c4ef61580e5e176b650cf', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '86fe212f1d47f69c403e82360464fe2e344947cd' }, h("linearGradient", { key: '73399f5eda1ca0fb206bf5322417431add8cfec6', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'bb9f60898d5b63dd7841e2cd94137280a553176b' }), h("stop", { key: '1e1dda3b14f7c5c5cfef85dd39a43eb71048171e', offset: "1" }))))));
     }
     static get is() { return "cura-loader-circle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/cura-display/cura-display.js

@@ -60,7 +60,7 @@ export class CuraDisplay {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: 'ffd8e58f9bf50038554591ec2b191e0488ae0500', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: 'b7f2ed980b7cedd3c9fbd60f14bf8785bb5c26cb', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     static get is() { return "cura-display"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/cura-heading/cura-heading.js

@@ -61,7 +61,7 @@ export class CuraHeading {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: '6e3a1f6786d9c1f9c0abb1b54ced47d2c6e8a90d', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: 'd16fc33c4b20770439fd4d48f4eb099564668b1e', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     static get is() { return "cura-heading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/cura-paragraph/cura-paragraph.css

@@ -97,7 +97,9 @@
 :host ::slotted(b), :host ::slotted(strong) {
   font-weight: var(--font-weight-bold);
 }
-:host ::slotted(a) {
+:host ::slotted(a),
+:host ::slotted(span a),
+:host ::slotted(a:-webkit-any-link), :host p a {
   font-weight: var(--font-weight-medium);
   color: var(--color-link);
   text-underline-offset: 10%;

package/dist/collection/components/text/cura-paragraph/cura-paragraph.js

@@ -45,7 +45,7 @@ export class CuraParagraph {
         };
     }
     render() {
-        return (h(Host, { key: '0942f1f6c23f0662a604f065ab7347546ed457cf', style: this.hostCSSProperties() }, h("p", { key: '3a16f232c2bd783695a2229eb3181463b28a95fa', style: this.styles, class: this.setsizeClass() }, h("slot", { key: 'c03154a42f5a30f8114ff86b8a62a3f1093d7c73' }))));
+        return (h(Host, { key: '88f0638f1da31a7410e90bfd9fabc5e47036fbb4', style: this.hostCSSProperties() }, h("p", { key: 'e6c76e6a066ed9ca9f843ceff95c07472fd32824', style: this.styles, class: this.setsizeClass() }, h("slot", { key: 'e6266e05137adb1efc9a2acabab323a507cca9a9' }))));
     }
     static get is() { return "cura-paragraph"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/stories/blocks/index.js

@@ -0,0 +1,85 @@
+import { useOf } from "@storybook/blocks";
+import { CuraHeading, CuraParagraph, CuraAlert } from "../../../../component-lib-react/dist/index.js";
+import { Source, Unstyled } from '@storybook/blocks';
+import Markdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+const MarkdownSbUnstyled = {
+  p(props) {
+    const {children} = props;
+    return <span>{children}</span>
+  }
+}
+
+
+export const Block = ({options}, key) => {
+  switch(options.type) {
+    case 'subtitle': {
+      return (
+        <Unstyled>
+          <CuraHeading size="small" level="2" weight="bold" key={key}>{options.content}</CuraHeading>
+        </Unstyled>
+      )
+    }
+    case 'text': {
+      return (
+        <Unstyled>
+          <CuraParagraph key={key}>
+            <Markdown rehypePlugins={[rehypeRaw]} components={MarkdownSbUnstyled}>{ options.content }</Markdown>
+          </CuraParagraph>
+        </Unstyled>
+      )
+    }
+    case 'alert': {
+      return (
+        <Unstyled>
+          <CuraAlert key={key} closeable="false" floating="false" label={options.title} type={options.mode} style={{maxWidth: "640px", marginBlock: "2rem"}}>
+            <Markdown rehypePlugins={[rehypeRaw]} components={MarkdownSbUnstyled}>{ options.content }</Markdown>
+          </CuraAlert>
+        </Unstyled>
+      )
+    }
+    case 'code': {
+      return (
+        <Source language={options.lang} code={options.content} key={key}/>
+      )
+    }
+    case 'list': {
+      const listItems = options.items.map((item, i) => {
+        return (
+          <li key={`${key}-${i}`}>
+             <Markdown rehypePlugins={[rehypeRaw]} components={MarkdownSbUnstyled}>{ item }</Markdown>
+          </li>
+        )
+      });
+      return options.listType === 'ol'
+        ? ( <ol key={key}>{ listItems }</ol> )
+        : ( <ul key={key}>{ listItems }</ul> );
+    }
+  }
+  console.log(options);
+}
+
+export const Sections = (docsJson) => {
+  const resolveOf = useOf(docsJson.sections || 'component', ['component']);
+  const sections = resolveOf.component;
+  return (
+    sections.map(section => {
+      return (
+        <section key={section.id} id={section.id}>
+          <Unstyled>
+            <CuraHeading size="large" weight="bold">{section.title}</CuraHeading>
+          </Unstyled>
+          {
+            section.blocks.map((block, i) => {
+              const key = `${section.id}${i}`;
+              return (
+                <Block options={block} key={key}/>
+              )
+            })
+          }
+        </section>
+      )
+    })
+  );
+}

package/dist/components/cura-alert.js

@@ -54,7 +54,7 @@ const CuraAlert$1 = /*@__PURE__*/ proxyCustomElement(class CuraAlert extends HTM
         return this.icon ? this.icon : iconMapping[this.type];
     }
     render() {
-        return (h(Host, { key: 'b7b63129f2d0c1d2f8b451a7f795befc9e085238' }, h("div", { key: 'b8450a11d65f0bbb3c9f688fccbb38efc7bf223c', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '9a5dc4295f7c40362a86f77fe805127590812f15', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '6bbe4799d3f73df0cda2e94da2d71cdc1bfc855a', class: "content" }, h("cura-label", { key: '8b761ec2804bb5633893af8ed91f5de268bbf029', class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label), h("cura-paragraph", { key: '4e7e7726758c26f1f397e8efc84d5eba1c88b428', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'f589c6fb9016b43b3557492a3ef1b4ede4a807a6' })), h("div", { key: 'b212e9255855b96d5c069dd7544675386f00b372', class: "actions" }, h("slot", { key: '174dfcc7dfc4ff3e29185843e010dddae75463f5', name: "actions" }))), this.closeable ?
+        return (h(Host, { key: 'c5398d59da323dee68eed1cb7c27841df0e12d14' }, h("div", { key: 'd9bb0ab7a2106e710a113513e6eeb1297b9bd205', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '54665c81a59cbca3686abc6f5e388da32e2211ed', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '466f9f4aed5096658de1e19521cefe2915b095af', class: "content" }, h("cura-label", { key: '6b3d9cd0352b5d5254305baa5a71a1b1782f637f', class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label), h("cura-paragraph", { key: '5dbad5e65d88b59a81b7df97154071a607d73900', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'cb75d38c35d34a7bee4e187c640a1269bad192b0' })), h("div", { key: 'a6930bb463601a2ba429b23fad61847e8dee01f3', class: "actions" }, h("slot", { key: '7f4fc8b08a870f578d0b241df00650ebf3db83e0', name: "actions" }))), this.closeable ?
             (h("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
             : '')));
     }

package/dist/components/cura-avatar.js

@@ -52,7 +52,7 @@ const CuraAvatar$1 = /*@__PURE__*/ proxyCustomElement(class CuraAvatar extends H
         this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
     }
     render() {
-        return (h(Host, { key: 'fc8fbe9cdcab86398c83a55d006badb870ee959a', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '6a107805cd770b98e74f7b0475c9896f59e51832', class: this.getClasses(), style: this.styles }, h("img", { key: '4bd7991bd32b0aa6f87d0725303960b0b4c3b0b9', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
+        return (h(Host, { key: '2760534555a0483e7e30c5f3009ec0cf68d0973b', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '3daf6dd066983dc63525c38b7da498147c0bf387', class: this.getClasses(), style: this.styles }, h("img", { key: 'a5f4de7983722fc3f750404fa985c312590b5e98', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/cura-badge-number.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuraBadgeNumber extends Components.CuraBadgeNumber, HTMLElement {}
+export const CuraBadgeNumber: {
+    prototype: CuraBadgeNumber;
+    new (): CuraBadgeNumber;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cura-badge-number.js

@@ -0,0 +1,8 @@
+import { C as CuraBadgeNumber$1, d as defineCustomElement$1 } from './cura-badge-number2.js';
+
+const CuraBadgeNumber = CuraBadgeNumber$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraBadgeNumber, defineCustomElement };
+
+//# sourceMappingURL=cura-badge-number.js.map

package/dist/components/cura-badge-number.js.map

@@ -0,0 +1 @@
+{"file":"cura-badge-number.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/cura-badge-number2.js

@@ -0,0 +1,49 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './cura-label2.js';
+
+const curaBadgeNumberCss = ":host .container{display:flex;width:20px;height:20px;min-width:16px;padding:4px;justify-content:center;align-items:center;gap:4px;border-radius:500px;background:var(--background-color)}";
+const CuraBadgeNumberStyle0 = curaBadgeNumberCss;
+
+const CuraBadgeNumber = /*@__PURE__*/ proxyCustomElement(class CuraBadgeNumber extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.styles = {};
+        this.theme = window.CuraAPI.theme;
+        this.number = undefined;
+        this.color = undefined;
+    }
+    connectedCallback() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--background-color': this.theme.colors.getColor(this.color) });
+    }
+    render() {
+        return (h(Host, { key: 'ba26c547e809b1a03edb15ddc562b760ddb002d3' }, h("div", { key: '46dac81c75727004adf3ace19afe8be87950bf4a', class: "container", style: this.styles }, h("cura-label", { key: 'a914d1a332c709c1e61269c2d0b7a82cf3a6e7fa' }, h("slot", { key: '17b996446d288b77126ea2c0ca23b0c77018dbe5' }, this.number)))));
+    }
+    static get style() { return CuraBadgeNumberStyle0; }
+}, [1, "cura-badge-number", {
+        "number": [514],
+        "color": [513]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-badge-number", "cura-label"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-badge-number":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraBadgeNumber);
+            }
+            break;
+        case "cura-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { CuraBadgeNumber as C, defineCustomElement as d };
+
+//# sourceMappingURL=cura-badge-number2.js.map

package/dist/components/cura-badge-number2.js.map

@@ -0,0 +1 @@
+{"file":"cura-badge-number2.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,2LAA2L,CAAC;AACvN,8BAAe,kBAAkB;;MCMpB,eAAe;;;;;QAI1B,WAAM,GAAG,EAAE,CAAC;QAEZ,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;;;;IAE7B,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAC7D,CAAA;KACF;IAGD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACvC,qEACE,+DAAO,IAAI,CAAC,MAAM,CAAQ,CACf,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/badges/cura-badge-number/cura-badge-number.scss?tag=cura-badge-number&encapsulation=shadow","src/components/badges/cura-badge-number/cura-badge-number.tsx"],"sourcesContent":["@import \"../../../scss/mixins/spacing.scss\";\n\n:host {\n  .container{\n    display: flex;\n    width: 20px;\n    height: 20px;\n    min-width: 16px;\n    padding: 4px;\n    justify-content: center;\n    align-items: center;\n    gap: 4px;\n    border-radius:  500px;\n    background: var(--background-color);\n  }\n}\n","import { Component, Host, Prop,  h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-number',\n  styleUrl: 'cura-badge-number.scss',\n  shadow: true,\n})\nexport class CuraBadgeNumber {\n\n  @Prop({ reflect: true }) number: number | null\n  @Prop({ reflect: true}) color: string \n  styles = {};\n\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--background-color': this.theme.colors.getColor(this.color),\n    }\n  }\n\n\n  render() {\n    return (\n      <Host>\n        <div class=\"container\" style={this.styles}>\n          <cura-label>\n            <slot>{this.number}</slot>\n          </cura-label>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-button-outline.js

@@ -98,7 +98,7 @@ const CuraButtonOutline$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonOut
     render() {
         const symbolColor = this.getSymbolColor();
         const labelSize = labelSizes[this.size] || labelSizes["default"];
-        return (h(Host, { key: '69e82dd1a26ea932f27f11ad5da295810ed3db1e' }, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '118%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '118%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
+        return (h(Host, { key: '3ce0297b4cfd44f8baffbcd78de14a02d15ba307' }, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/components/cura-button-outline.js.map

@@ -1 +1 @@
-{"file":"cura-button-outline.js","mappings":"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","names":["CuraButtonOutline"],"sources":["src/components/buttons/cura-button-outline/cura-button-outline.scss?tag=cura-button-outline&encapsulation=shadow","src/components/buttons/cura-button-outline/cura-button-outline.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button, a {\n    @include button-element() {\n      background-color: transparent;\n      box-sizing: border-box;\n      border: none;\n\n      &::before {\n        content: \"\";\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        box-sizing: border-box;\n        border: 2px solid var(--color-dark-neutral-purewhite);\n        border-radius: var(--border-radius);\n      }\n\n      &:not(.disabled):not(.isLoading):hover {\n       background-color: var(--color-lighter-color-darker);\n      }\n\n      &:not(.disabled):not(.inverted):not(.isLoading):active {\n       background-color: var(--color-light-color-darker);\n      }\n\n    };\n\n    @include button-sizes();\n\n    // Children Elements\n    @include button-container();\n    @include button-label();\n\n\n    @include button-icon();\n\n    // Disabled state\n    @include button-disabled() {\n     &::before {\n      border-color: var(--neutral-dark);\n     }\n    };\n\n    // FAB / Icon-only\n    @include button-icon-only-behavior();\n\n    // Loading State\n    @include button-loading();\n\n  }\n\n}\n","import { Component, Host, h, Prop, Watch, State, AttachInternals } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n  tag: 'cura-button-outline',\n  styleUrl: 'cura-button-outline.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class CuraButtonOutline {\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n   * Button type: button (default) | submit | reset\n   */\n  @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n  * Button size: small | medium | large (default)\n  */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n  * Disabled state. Boolean.\n  */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n  * Loading state. Boolean.\n  */\n  @Prop({ reflect: true }) isLoading = false;\n\n  /**\n  * Name of the icon to be used from iconset.\n  */\n  @Prop({ reflect: true }) iconName: string;\n  /**\n  * Custom iconset if needed.\n  */\n  @Prop({ reflect: true }) iconset = 'default';\n  /**\n  * Icon position: left (default) | right.\n  */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'left';\n  /**\n  * Set button to FAB/icon only.\n  */\n  @Prop({ reflect: true }) iconOnly = false;\n\n  /**\n  * Property href switch button to link.\n  */\n  @Prop({ reflect: true }) href: string;\n  /**\n  * Set target if link.\n  */\n  @Prop({ reflect: true }) target = \"_self\";\n  /**\n  * Color base from color scheme. Default: primary.\n  */\n  @Prop() color = 'primary';\n  /**\n  * Set the font background to dark or light.\n  */\n  @Prop() background: 'dark' | 'light' = 'light';\n\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop() fontColor: 'dark' | 'light' = 'dark';\n  /**\n  * Set text aligment for the button label.\n  * Vales: left (default) | center | right.\n  */\n  @Prop({ reflect: true }) textAlign: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Justify icons and label inside the button.\n   * Vales: false (default) | true.\n   */\n  @Prop({ reflect: true }) justify = false;\n\n  @State() styles = {};\n\n  @State() hovered = false;\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.styles['--text-align'] = this.textAlign;\n    this.setColors();\n  }\n\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size?.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['disabled'] = this.disabled;\n    classes['isLoading'] = this.isLoading;\n    classes['justify'] = this.justify;\n    return classes;\n  }\n\n  @Watch('background')\n  @Watch('color')\n  setColors() {\n    const colors = [\n      { name: '--color-dark-neutral-purewhite', thema: `${this.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite'}` },\n      { name: '--color-lighter-color-darker', thema: `${this.background === 'light' ? `${this.color}-lighter` : `${this.color}-darker`}` },\n      { name: '--color-light-color-darker', thema: `${this.background === 'light' ? `${this.color}-light` : `${this.color}-lighter`}` },\n      { name: '--neutral-dark', thema: 'neutral-dark' },\n    ]\n\n    colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema));\n    this.styles = { ...this.styles };\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'large' ? 20 : 16;\n\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></cura-icon>;\n  }\n\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  @Watch('fontColor')\n  @Watch('color')\n  getSymbolColor() {\n    if (this.disabled) return 'neutral-dark';\n    return this.fontColor === 'light' ? 'neutral-purewhite' : `${this.color}-darker`;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled || this.isLoading) {\n      e.preventDefault();\n      return;\n    }\n    if (!this.href) {\n      if (this.type === 'submit' && this.internals.form) this.internals.form.submit();\n      if (this.type === 'reset' && this.internals.form) this.internals.form.reset();\n    }\n  }\n\n  render() {\n    const symbolColor = this.getSymbolColor();\n    const labelSize = labelSizes[this.size] || labelSizes[\"default\"];\n    return (\n      <Host>\n        {this.href ? (\n          <a href={this.disabled ? '' : this.href}\n            target={this.target}\n            class={this.getClasses()}\n            style={this.styles}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label size={labelSize} lineHeight='118%' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </a>\n        ) : (\n          <button class={this.getClasses()}\n            style={this.styles}\n            disabled={this.disabled || null}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}\n            type={this.type}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label size={labelSize} lineHeight='118%' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-button-outline.js","mappings":"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","names":["CuraButtonOutline"],"sources":["src/components/buttons/cura-button-outline/cura-button-outline.scss?tag=cura-button-outline&encapsulation=shadow","src/components/buttons/cura-button-outline/cura-button-outline.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button, a {\n    @include button-element() {\n      background-color: transparent;\n      box-sizing: border-box;\n      border: none;\n\n      &::before {\n        content: \"\";\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        box-sizing: border-box;\n        border: 2px solid var(--color-dark-neutral-purewhite);\n        border-radius: var(--border-radius);\n      }\n\n      &:not(.disabled):not(.isLoading):hover {\n       background-color: var(--color-lighter-color-darker);\n      }\n\n      &:not(.disabled):not(.inverted):not(.isLoading):active {\n       background-color: var(--color-light-color-darker);\n      }\n\n    };\n\n    @include button-sizes();\n\n    // Children Elements\n    @include button-container();\n    @include button-label();\n\n\n    @include button-icon();\n\n    // Disabled state\n    @include button-disabled() {\n     &::before {\n      border-color: var(--neutral-dark);\n     }\n    };\n\n    // FAB / Icon-only\n    @include button-icon-only-behavior();\n\n    // Loading State\n    @include button-loading();\n\n  }\n\n}\n","import { Component, Host, h, Prop, Watch, State, AttachInternals } from '@stencil/core';\nimport { labelSizes } from '../cura-button.definitions';\n\n@Component({\n  tag: 'cura-button-outline',\n  styleUrl: 'cura-button-outline.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class CuraButtonOutline {\n\n  @AttachInternals() internals: ElementInternals;\n\n  /**\n   * Button type: button (default) | submit | reset\n   */\n  @Prop({ reflect: true }) type: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n  * Button size: small | medium | large (default)\n  */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n  * Disabled state. Boolean.\n  */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n  * Loading state. Boolean.\n  */\n  @Prop({ reflect: true }) isLoading = false;\n\n  /**\n  * Name of the icon to be used from iconset.\n  */\n  @Prop({ reflect: true }) iconName: string;\n  /**\n  * Custom iconset if needed.\n  */\n  @Prop({ reflect: true }) iconset = 'default';\n  /**\n  * Icon position: left (default) | right.\n  */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'left';\n  /**\n  * Set button to FAB/icon only.\n  */\n  @Prop({ reflect: true }) iconOnly = false;\n\n  /**\n  * Property href switch button to link.\n  */\n  @Prop({ reflect: true }) href: string;\n  /**\n  * Set target if link.\n  */\n  @Prop({ reflect: true }) target = \"_self\";\n  /**\n  * Color base from color scheme. Default: primary.\n  */\n  @Prop() color = 'primary';\n  /**\n  * Set the font background to dark or light.\n  */\n  @Prop() background: 'dark' | 'light' = 'light';\n\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop() fontColor: 'dark' | 'light' = 'dark';\n  /**\n  * Set text aligment for the button label.\n  * Vales: left (default) | center | right.\n  */\n  @Prop({ reflect: true }) textAlign: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Justify icons and label inside the button.\n   * Vales: false (default) | true.\n   */\n  @Prop({ reflect: true }) justify = false;\n\n  @State() styles = {};\n\n  @State() hovered = false;\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.styles['--text-align'] = this.textAlign;\n    this.setColors();\n  }\n\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size?.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['disabled'] = this.disabled;\n    classes['isLoading'] = this.isLoading;\n    classes['justify'] = this.justify;\n    return classes;\n  }\n\n  @Watch('background')\n  @Watch('color')\n  setColors() {\n    const colors = [\n      { name: '--color-dark-neutral-purewhite', thema: `${this.background === 'light' ? `${this.color}-dark` : 'neutral-purewhite'}` },\n      { name: '--color-lighter-color-darker', thema: `${this.background === 'light' ? `${this.color}-lighter` : `${this.color}-darker`}` },\n      { name: '--color-light-color-darker', thema: `${this.background === 'light' ? `${this.color}-light` : `${this.color}-lighter`}` },\n      { name: '--neutral-dark', thema: 'neutral-dark' },\n    ]\n\n    colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema));\n    this.styles = { ...this.styles };\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'large' ? 20 : 16;\n\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={this.getSymbolColor()}></cura-icon>;\n  }\n\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  @Watch('fontColor')\n  @Watch('color')\n  getSymbolColor() {\n    if (this.disabled) return 'neutral-dark';\n    return this.fontColor === 'light' ? 'neutral-purewhite' : `${this.color}-darker`;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled || this.isLoading) {\n      e.preventDefault();\n      return;\n    }\n    if (!this.href) {\n      if (this.type === 'submit' && this.internals.form) this.internals.form.submit();\n      if (this.type === 'reset' && this.internals.form) this.internals.form.reset();\n    }\n  }\n\n  render() {\n    const symbolColor = this.getSymbolColor();\n    const labelSize = labelSizes[this.size] || labelSizes[\"default\"];\n    return (\n      <Host>\n        {this.href ? (\n          <a href={this.disabled ? '' : this.href}\n            target={this.target}\n            class={this.getClasses()}\n            style={this.styles}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label size={labelSize} lineHeight='105%' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </a>\n        ) : (\n          <button class={this.getClasses()}\n            style={this.styles}\n            disabled={this.disabled || null}\n            onClick={(e) => this.handleClick(e)}\n            onMouseEnter={() => this.handleMouseEnter()}\n            onMouseLeave={() => this.handleMouseLeave()}\n            type={this.type}>\n            <span class=\"button-container\">\n              {this.getIcon()}\n              <cura-label size={labelSize} lineHeight='105%' color={symbolColor}><slot></slot></cura-label>\n            </span>\n            <cura-loader-circle size={this.size} color={symbolColor}></cura-loader-circle>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}