@rededor/cura 1.6.1-alpha.9 → 1.7.0

package/dist/components/cura-select2.js.map

@@ -1 +1 @@
-{"file":"cura-select2.js","mappings":"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","names":[],"sources":["src/components/forms/cura-select/cura-select.scss?tag=cura-select&encapsulation=shadow","src/components/forms/cura-select/cura-select.tsx"],"sourcesContent":["@import '../../../scss/mixins/forms.scss';\n\n:host {\n  display: block;\n  position: relative;\n  font-family: var(--font-family);\n}\n\n.wrapper {\n  width: 100%;\n  user-select: none;\n  text-align: left !important;\n\n  @include cura-label();\n  @include helper-text();\n\n  @include cura-input-field() {\n    .up-down-icon {\n      order: 3;\n      padding-right: 6px;\n      cursor: pointer;\n      pointer-events: all;\n    }\n\n    .up-down-button {\n      background-color: transparent;\n      border: none;\n    }\n\n    input {\n      padding: 0px 12px 0px 8px;\n      cursor: pointer;\n    }\n\n    &.open {\n      border-radius: 4px 4px 0 0 !important;\n    }\n  }\n\n  @include cura-input-transparent();\n\n  @include cura-forms-hover();\n  @include cura-forms-focused();\n\n  @include cura-forms-success();\n  @include cura-forms-error();\n\n  @include cura-forms-small() {\n    &.label {\n      .menu {\n        top: 53px;\n      }\n    }\n    .menu {\n      top: 33px;\n    }\n  }\n\n  @include cura-forms-medium() {\n    &.label {\n      .menu {\n        top: 61px;\n      }\n    }\n    .menu {\n      top: 40px;\n    }\n  }\n\n  @include cura-forms-large() {\n    &.label {\n      .menu {\n        top: 69px;\n      }\n    }\n    .menu {\n      top: 47px;\n    }\n  }\n\n  @include cura-forms-disabled();\n}\n\n.required {\n  color: red;\n}\n\n.menu {\n  position: absolute;\n  left: 0;\n  right: -1px;\n  background: #fff;\n  border: 2px solid var(--neutral-light);\n  border-radius: 4px;\n  z-index: 1000;\n  max-height: 285px;\n  overflow: hidden;\n  border-top: transparent;\n  align-items: center;\n\n  scrollbar-color: var(--neutral-medium) var(--neutral-black-20);\n  overflow-y: auto;\n  box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n\n  &.open {\n    border-radius: 0 !important;\n    padding: 12px;\n  }\n}\n","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  @Prop() iconName?: string;\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   * The search will be sensitive to accents.\n   * Default: true\n   */\n  @Prop({ reflect: true }) caseSensitive: boolean = true;\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  @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    this.searchTermInput.emit(newText);\n\n    if (!this.isOpen || !this.searchBehavior) {\n      return;\n    }\n\n    const removeAccents = (str: string) => {\n      return str.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '');\n    };\n\n    let searchTerm = newText;\n    if (!this.caseSensitive) {\n      searchTerm = removeAccents(searchTerm).toLocaleLowerCase();\n    }\n\n    this.options.forEach(option => {\n      let optionValue = option.textContent || '';\n      if (!this.caseSensitive) {\n        optionValue = removeAccents(optionValue?.toLowerCase());\n      }\n      const isVisible = optionValue.includes(searchTerm);\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   * Event emitted when an option is searched.\n   */\n  @Event() searchTermInput: 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    this.addOutsideClickListener();\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    this.removeOutsideClickListener();\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',\n      'neutral-purewhite',\n      'neutral-white',\n      'neutral-black',\n      'neutral-medium',\n      'neutral-light',\n      'neutral-base',\n      'neutral-dark',\n      'success-dark',\n      'success-darker',\n      'success-lighter',\n      'error-lighter',\n      'error-dark',\n      'error-darker',\n      'error-base',\n      '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  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' && !this.iconName) return null;\n    const icon = { default: this.iconName, success: 'checkCircle', error: 'alertCircle' }[this.status];\n    return <cura-icon class=\"feedback-icon\" name={icon} iconset=\"default\" size={this.size === 'large' ? 20 : 16} color={this.getColor('icon')} style={this.styles} />;\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  handleClickOutside = (event: MouseEvent) => {\n    const clickedOutside = !this.host.contains(event.target as Node);\n    if (clickedOutside) {\n      this.isOpen = false;\n    }\n  };\n\n  private addOutsideClickListener() {\n    document.addEventListener('click', this.handleClickOutside);\n  }\n\n  private removeOutsideClickListener() {\n    document.removeEventListener('click', this.handleClickOutside);\n  }\n\n  render() {\n    return (\n      <Host style={this.styles}\n        role=\"combobox\"\n        aria-label={this.label}\n        aria-required={String(this.required)}\n        aria-disabled={String(this.disabled)}\n        aria-invalid={String(this.status === 'error')}>\n        <div class={this.getClasses()} onMouseEnter={() => (this.isHovered = true)} onMouseLeave={() => (this.isHovered = false)} onClick={this.handleClick}>\n          {this.label && (\n            <cura-label class=\"label\" weight=\"bold\" size={this.size === 'large' ? 'small' : 'xsmall'} color={this.getColor('label')}>\n              {this.label} {this.required && <span class=\"required\">* </span>}\n            </cura-label>\n          )}\n\n          <div\n            class={{\n              'cura-input-field': true,\n              'open': this.isOpen,\n            }}\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            <button class=\"up-down-button\">\n              <cura-icon name={this.isOpen ? 'up' : 'down'} class=\"up-down-icon\" color={this.disabled ? 'neutral-dark' : 'primary-base'} size={16} iconset=\"default\" />\n            </button>\n          </div>\n          <cura-label class=\"helper-text\" size=\"xsmall\" color={this.getColor('text')} weight={this.mode === 'transparent' ? 'bold' : 'regular'}>\n            <slot></slot>\n          </cura-label>\n          {this.isOpen && (\n            <div\n              class={{\n                menu: true,\n                open: this.isOpen,\n              }}\n            >\n              <slot name=\"option\"></slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-select2.js","mappings":"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","names":[],"sources":["src/components/forms/cura-select/cura-select.scss?tag=cura-select&encapsulation=shadow","src/components/forms/cura-select/cura-select.tsx"],"sourcesContent":["@import '../../../scss/mixins/forms.scss';\n\n:host {\n  display: block;\n  position: relative;\n  font-family: var(--font-family);\n}\n\n.wrapper {\n  width: 100%;\n  user-select: none;\n  text-align: left !important;\n\n  @include cura-label();\n  @include helper-text();\n\n  @include cura-input-field() {\n    .up-down-icon {\n      order: 3;\n      padding-right: 6px;\n      cursor: pointer;\n      pointer-events: all;\n    }\n\n    .up-down-button {\n      background-color: transparent;\n      border: none;\n    }\n\n    input {\n      padding: 0px 12px 0px 8px;\n      cursor: pointer;\n    }\n\n    &.open {\n      border-radius: 4px 4px 0 0 !important;\n    }\n  }\n\n  @include cura-input-transparent();\n\n  @include cura-forms-hover();\n  @include cura-forms-focused();\n\n  @include cura-forms-success();\n  @include cura-forms-error();\n\n  @include cura-forms-small() {\n    &.label {\n      .menu {\n        top: 53px;\n      }\n    }\n    .menu {\n      top: 33px;\n    }\n  }\n\n  @include cura-forms-medium() {\n    &.label {\n      .menu {\n        top: 61px;\n      }\n    }\n    .menu {\n      top: 40px;\n    }\n  }\n\n  @include cura-forms-large() {\n    &.label {\n      .menu {\n        top: 69px;\n      }\n    }\n    .menu {\n      top: 47px;\n    }\n  }\n\n  @include cura-forms-disabled();\n}\n\n.required {\n  color: red;\n}\n\n.menu {\n  position: absolute;\n  left: 0;\n  right: -1px;\n  background: #fff;\n  border: 2px solid var(--neutral-light);\n  border-radius: 4px;\n  z-index: 1000;\n  max-height: var(--max-height);\n  overflow: hidden;\n  border-top: transparent;\n  align-items: center;\n\n  scrollbar-color: var(--neutral-medium) var(--neutral-black-20);\n  overflow-y: auto;\n  box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n\n  &.open {\n    border-radius: 0 !important;\n    padding: 12px;\n  }\n}\n","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  @Prop() iconName?: string;\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   * The search will be sensitive to accents.\n   * Default: true\n   */\n  @Prop({ reflect: true }) caseSensitive: boolean = true;\n\n   /**\n    * CSS max-height property for dropdown item.\n    * Can also be used by css property --max-height.\n    * Default: 285px\n    */\n   @Prop({ reflect: true }) maxHeight: string = '285px';\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  @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    this.searchTermInput.emit(newText);\n\n    if (!this.isOpen || !this.searchBehavior) {\n      return;\n    }\n\n    const removeAccents = (str: string) => {\n      return str.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '');\n    };\n\n    let searchTerm = newText;\n    if (!this.caseSensitive) {\n      searchTerm = removeAccents(searchTerm).toLocaleLowerCase();\n    }\n\n    this.options.forEach(option => {\n      let optionValue = option.textContent || '';\n      if (!this.caseSensitive) {\n        optionValue = removeAccents(optionValue?.toLowerCase());\n      }\n      const isVisible = optionValue.includes(searchTerm);\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   * Event emitted when an option is searched.\n   */\n  @Event() searchTermInput: 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    this.addOutsideClickListener();\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    this.removeOutsideClickListener();\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',\n      'neutral-purewhite',\n      'neutral-white',\n      'neutral-black',\n      'neutral-medium',\n      'neutral-light',\n      'neutral-base',\n      'neutral-dark',\n      'success-dark',\n      'success-darker',\n      'success-lighter',\n      'error-lighter',\n      'error-dark',\n      'error-darker',\n      'error-base',\n      '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  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' && !this.iconName) return null;\n    const icon = { default: this.iconName, success: 'checkCircle', error: 'alertCircle' }[this.status];\n    return <cura-icon class=\"feedback-icon\" name={icon} iconset=\"default\" size={this.size === 'large' ? 20 : 16} color={this.getColor('icon')} style={this.styles} />;\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  handleClickOutside = (event: MouseEvent) => {\n    const clickedOutside = !this.host.contains(event.target as Node);\n    if (clickedOutside) {\n      this.isOpen = false;\n    }\n  };\n\n  private addOutsideClickListener() {\n    document.addEventListener('click', this.handleClickOutside);\n  }\n\n  private removeOutsideClickListener() {\n    document.removeEventListener('click', this.handleClickOutside);\n  }\n\n  render() {\n    return (\n      <Host style={this.styles}\n        role=\"combobox\"\n        aria-label={this.label}\n        aria-required={String(this.required)}\n        aria-disabled={String(this.disabled)}\n        aria-invalid={String(this.status === 'error')}>\n        <div class={this.getClasses()} onMouseEnter={() => (this.isHovered = true)} onMouseLeave={() => (this.isHovered = false)} onClick={this.handleClick}>\n          {this.label && (\n            <cura-label class=\"label\" weight=\"bold\" size={this.size === 'large' ? 'small' : 'xsmall'} color={this.getColor('label')}>\n              {this.label} {this.required && <span class=\"required\">* </span>}\n            </cura-label>\n          )}\n\n          <div\n            class={{\n              'cura-input-field': true,\n              'open': this.isOpen,\n            }}\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            <button class=\"up-down-button\">\n              <cura-icon name={this.isOpen ? 'up' : 'down'} class=\"up-down-icon\" color={this.disabled ? 'neutral-dark' : 'primary-base'} size={16} iconset=\"default\" />\n            </button>\n          </div>\n          <cura-label class=\"helper-text\" size=\"xsmall\" color={this.getColor('text')} weight={this.mode === 'transparent' ? 'bold' : 'regular'}>\n            <slot></slot>\n          </cura-label>\n          {this.isOpen && (\n            <div\n              class={{\n                menu: true,\n                open: this.isOpen,\n              }}\n              style={{ '--max-height': this.maxHeight }}\n            >\n              <slot name=\"option\"></slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-tabs-button.d.ts

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

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

@@ -0,0 +1,150 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { l as labelSizes } from './cura-tabs.definitions.js';
+import { d as defineCustomElement$4 } from './cura-badge-counter2.js';
+import { d as defineCustomElement$3 } from './cura-icon2.js';
+import { d as defineCustomElement$2 } from './cura-label2.js';
+
+const curaTabsButtonCss = ":host button,:host a{outline:none;box-shadow:none;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:transparent;box-sizing:border-box;border:none;display:flex;align-items:center;justify-content:center;min-width:120px;width:fit-content;border:2px solid var(--border-color);border-radius:4px}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button:not(.selected),:host a:not(.selected){border:2px solid var(--border-color)}:host button:not(.disabled,.selected):hover,:host a:not(.disabled,.selected):hover{background-color:var(--background-color-hover)}:host button:not(.disabled,.selected):hover.dark,:host a:not(.disabled,.selected):hover.dark{border-color:var(--neutral-purewhite)}:host button.small,:host a.small{padding:calc(var(--cura-spacing-base) * 2px) calc(var(--cura-spacing-base) * 2px)}:host button.medium,:host a.medium{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px)}:host button.large,:host a.large{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 4px)}:host button:focus,:host a:focus{border-color:var(--primary-light)}:host button cura-icon,:host a cura-icon{margin-right:calc(var(--cura-spacing-base) * 2px)}:host button cura-badge-counter,:host a cura-badge-counter{margin-left:calc(var(--cura-spacing-base) * 2px)}:host button.selected,:host a.selected{cursor:pointer;background-color:var(--background-color-selected)}:host button.selected.disabled,:host a.selected.disabled{border-color:transparent;background-color:var(--background-disabled-selected)}:host button.disabled,:host a.disabled{cursor:not-allowed}:host button.disabled:not(.selected),:host a.disabled:not(.selected){border-color:var(--neutral-dark)}";
+const CuraTabsButtonStyle0 = curaTabsButtonCss;
+
+const CuraTabs = /*@__PURE__*/ proxyCustomElement(class CuraTabs extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.tabSelect = createEvent(this, "tabSelect", 7);
+        this.name = undefined;
+        this.iconName = undefined;
+        this.counter = 1;
+        this.selected = false;
+        this.disabled = false;
+        this.size = 'large';
+        this.colorMode = 'light';
+        this.hovered = false;
+        this.styles = {};
+    }
+    setColors() {
+        const colors = [
+            { name: '--background-color-selected', theme: this.colorMode === 'light' ? 'primary-base' : 'primary-light' },
+            { name: '--background-color-hover', theme: this.colorMode === 'light' ? 'primary-light' : null },
+            {
+                name: '--background-disabled-selected',
+                theme: this.colorMode === 'light' ? 'neutral-white' : 'neutral-black',
+            },
+            {
+                name: '--border-color',
+                theme: this.colorMode === 'light' ? 'primary-base' : 'primary-light',
+            },
+        ];
+        colors.forEach(c => {
+            if (c.theme)
+                this.styles[c.name] = window.CuraAPI.theme.colors.getColor(c.theme);
+        });
+        this.styles = Object.assign({}, this.styles);
+    }
+    computeContentColor() {
+        if (this.disabled)
+            return 'neutral-dark';
+        if (this.colorMode === 'dark') {
+            if (this.hovered && !this.selected) {
+                return 'neutral-purewhite';
+            }
+            return this.selected ? 'neutral-black' : 'primary-lighter';
+        }
+        return this.selected ? 'neutral-purewhite' : 'primary-dark';
+    }
+    getIcon() {
+        if (!this.iconName)
+            return '';
+        const iconSize = this.size === 'large' ? 20 : 16;
+        const iconColor = this.computeContentColor();
+        return h("cura-icon", { name: this.iconName, size: iconSize, color: iconColor });
+    }
+    getClasses() {
+        return {
+            [this.size]: true,
+            [this.colorMode]: true,
+            selected: this.selected,
+            disabled: this.disabled,
+        };
+    }
+    getCounter() {
+        return h("cura-badge-counter", { number: this.counter, color: "primary", disabled: this.disabled, class: "badge-number" });
+    }
+    connectedCallback() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--primary-dark': window.CuraAPI.theme.colors.getColor('primary-dark'), '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'), '--neutral-dark': window.CuraAPI.theme.colors.getColor('neutral-dark'), '--base-spacing': window.CuraAPI.theme.spacing.getSpacing() });
+        this.setColors();
+    }
+    handleMouseEnter() {
+        if (this.disabled)
+            return;
+        this.hovered = true;
+    }
+    handleMouseLeave() {
+        this.hovered = false;
+    }
+    handleClick(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            return;
+        }
+        this.selected = !this.selected;
+        this.tabSelect.emit({ name: this.name });
+    }
+    render() {
+        const labelSize = labelSizes[this.size] || labelSizes['default'];
+        const labelColor = this.computeContentColor();
+        return (h(Host, { key: '9410b9c68061ffb5d838fe6ab2f409be9b90c6ac', role: "button", "aria-pressed": this.selected, "aria-disabled": this.disabled }, h("button", { key: '1ac26d9b41e072f1ec3668d66fee83679640c54f', class: this.getClasses(), style: this.styles, onClick: e => this.handleClick(e), disabled: this.disabled, onMouseEnter: this.handleMouseEnter.bind(this), onMouseLeave: this.handleMouseLeave.bind(this) }, this.getIcon(), h("cura-label", { key: 'ff854d36883b062d699388e71e6315f76f008f79', size: labelSize, color: labelColor, lineHeight: "0", marginBlock: "0" }, h("slot", { key: '6ab5c0cdea38f9094bb382943fe25c3967a681ab' })), this.counter > 0 && this.getCounter())));
+    }
+    static get watchers() { return {
+        "colorMode": ["setColors"]
+    }; }
+    static get style() { return CuraTabsButtonStyle0; }
+}, [1, "cura-tabs-button", {
+        "name": [513],
+        "iconName": [513, "icon-name"],
+        "counter": [1538],
+        "selected": [1540],
+        "disabled": [1540],
+        "size": [513],
+        "colorMode": [1537, "color-mode"],
+        "hovered": [32],
+        "styles": [32]
+    }, undefined, {
+        "colorMode": ["setColors"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-tabs-button", "cura-badge-counter", "cura-icon", "cura-label"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-tabs-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraTabs);
+            }
+            break;
+        case "cura-badge-counter":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "cura-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "cura-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const CuraTabsButton = CuraTabs;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraTabsButton, defineCustomElement };
+
+//# sourceMappingURL=cura-tabs-button.js.map

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

@@ -0,0 +1 @@
+{"file":"cura-tabs-button.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,m8DAAm8D,CAAC;AAC99D,6BAAe,iBAAiB;;MCOnB,QAAQ;;;;;;;;uBAGwC,CAAC;wBACA,KAAK;wBACL,KAAK;oBACH,OAAO;yBACC,OAAO;uBAE1D,KAAK;sBACkB,EAAE;;IAK5C,SAAS;QACP,MAAM,MAAM,GAAG;YACb,EAAE,IAAI,EAAE,6BAA6B,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,cAAc,GAAG,eAAe,EAAE;YAC7G,EAAE,IAAI,EAAE,0BAA0B,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,eAAe,GAAG,IAAI,EAAE;YAChG;gBACE,IAAI,EAAE,gCAAgC;gBACtC,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,eAAe,GAAG,eAAe;aACtE;YACD;gBACE,IAAI,EAAE,gBAAgB;gBACtB,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,cAAc,GAAG,eAAe;aACrE;SACF,CAAC;QAEF,MAAM,CAAC,OAAO,CAAC,CAAC;YACd,IAAI,CAAC,CAAC,KAAK;gBAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;SAClF,CAAC,CAAC;QAEH,IAAI,CAAC,MAAM,qBAAQ,IAAI,CAAC,MAAM,CAAE,CAAC;KAClC;IAED,mBAAmB;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO,cAAc,CAAC;QAEzC,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,EAAE;YAC7B,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClC,OAAO,mBAAmB,CAAC;aAC5B;YACD,OAAO,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,iBAAiB,CAAC;SAC5D;QAED,OAAO,IAAI,CAAC,QAAQ,GAAG,mBAAmB,GAAG,cAAc,CAAC;KAC7D;IAED,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,EAAE,CAAC;QAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,EAAE,CAAC;QACjD,MAAM,SAAS,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAE7C,OAAO,iBAAW,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,GAAc,CAAC;KACvF;IAED,UAAU;QACR,OAAO;YACL,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;YACjB,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;KACH;IAED,UAAU;QACR,OAAO,0BAAoB,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,cAAc,GAAsB,CAAC;KACtI;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,EACtE,qBAAqB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC,EAChF,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,EACtE,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,GAC5D,CAAC;QAEF,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;IAED,gBAAgB;QACd,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;IAED,WAAW,CAAC,CAAQ;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KAC1C;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,SAAS,CAAC,CAAC;QACjE,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAE9C,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,kBAAe,IAAI,CAAC,QAAQ,mBAAiB,IAAI,CAAC,QAAQ,IAC3E,+DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC9C,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAE7C,IAAI,CAAC,OAAO,EAAE,EACf,mEAAY,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAC,GAAG,EAAC,WAAW,EAAC,GAAG,IAC5E,8DAAa,CACF,EACZ,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAC/B,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tabs/cura-tabs-button/cura-tabs-button.scss?tag=cura-tabs-button&encapsulation=shadow","src/components/tabs/cura-tabs-button/cura-tabs-button.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n@import '../../../scss/mixins/buttons.scss';\n\n$button-sizes: (\n  small: $spacing-mini $spacing-mini,\n  medium: $spacing-xxxs $spacing-xxxs,\n  large: $spacing-xxxs $spacing-xxs,\n);\n\n:host {\n  button,\n  a {\n    @include button-element() {\n      background-color: transparent;\n      box-sizing: border-box;\n      border: none;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      min-width: 120px;\n      width: fit-content;\n\n      border: 2px solid var(--border-color);\n      border-radius: 4px;\n\n      &:not(.selected) {\n        border: 2px solid var(--border-color);\n      }\n\n      &:not(.disabled, .selected):hover {\n        background-color: var(--background-color-hover);\n\n        &.dark {\n          border-color: var(--neutral-purewhite);\n        }\n      }\n\n      @each $size, $padding in $button-sizes {\n        &.#{$size} {\n          padding: $padding;\n        }\n      }\n\n      &:focus {\n        border-color: var(--primary-light);\n      }\n\n      cura-icon {\n        margin-right: #{$spacing-mini};\n      }\n\n      cura-badge-counter {\n        margin-left: #{$spacing-mini};\n      }\n\n      @include button-selected() {\n        background-color: var(--background-color-selected);\n\n        &.disabled {\n          border-color: transparent;\n          background-color: var(--background-disabled-selected);\n        }\n      }\n\n      &.disabled {\n        &:not(.selected) {\n          border-color: var(--neutral-dark);\n        }\n\n        cursor: not-allowed;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { labelSizes } from '../cura-tabs.definitions';\n\n@Component({\n  tag: 'cura-tabs-button',\n  styleUrl: 'cura-tabs-button.scss',\n  shadow: true,\n})\nexport class CuraTabs {\n  @Prop({ reflect: true }) name: string;\n  @Prop({ reflect: true }) iconName: string;\n  @Prop({ reflect: true, mutable: true }) counter?: number = 1;\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n  @Prop({ reflect: true, mutable: true }) colorMode: 'dark' | 'light' = 'light';\n\n  @State() hovered = false;\n  @State() styles: Record<string, string> = {};\n\n  @Event() tabSelect: EventEmitter<{ name: string }>;\n\n  @Watch('colorMode')\n  setColors() {\n    const colors = [\n      { name: '--background-color-selected', theme: this.colorMode === 'light' ? 'primary-base' : 'primary-light' },\n      { name: '--background-color-hover', theme: this.colorMode === 'light' ? 'primary-light' : null },\n      {\n        name: '--background-disabled-selected',\n        theme: this.colorMode === 'light' ? 'neutral-white' : 'neutral-black',\n      },\n      {\n        name: '--border-color',\n        theme: this.colorMode === 'light' ? 'primary-base' : 'primary-light',\n      },\n    ];\n\n    colors.forEach(c => {\n      if (c.theme) this.styles[c.name] = window.CuraAPI.theme.colors.getColor(c.theme);\n    });\n\n    this.styles = { ...this.styles };\n  }\n\n  computeContentColor(): string {\n    if (this.disabled) return 'neutral-dark';\n\n    if (this.colorMode === 'dark') {\n      if (this.hovered && !this.selected) {\n        return 'neutral-purewhite';\n      }\n      return this.selected ? 'neutral-black' : 'primary-lighter';\n    }\n\n    return this.selected ? 'neutral-purewhite' : 'primary-dark';\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'large' ? 20 : 16;\n    const iconColor = this.computeContentColor();\n\n    return <cura-icon name={this.iconName} size={iconSize} color={iconColor}></cura-icon>;\n  }\n\n  getClasses() {\n    return {\n      [this.size]: true,\n      [this.colorMode]: true,\n      selected: this.selected,\n      disabled: this.disabled,\n    };\n  }\n\n  getCounter() {\n    return <cura-badge-counter number={this.counter} color=\"primary\" disabled={this.disabled} class=\"badge-number\"></cura-badge-counter>;\n  }\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--primary-dark': window.CuraAPI.theme.colors.getColor('primary-dark'),\n      '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'),\n      '--neutral-dark': window.CuraAPI.theme.colors.getColor('neutral-dark'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n\n    this.setColors();\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    this.selected = !this.selected;\n    this.tabSelect.emit({ name: this.name });\n  }\n\n  render() {\n    const labelSize = labelSizes[this.size] || labelSizes['default'];\n    const labelColor = this.computeContentColor();\n\n    return (\n      <Host role=\"button\" aria-pressed={this.selected} aria-disabled={this.disabled}>\n        <button\n          class={this.getClasses()}\n          style={this.styles}\n          onClick={e => this.handleClick(e)}\n          disabled={this.disabled}\n          onMouseEnter={this.handleMouseEnter.bind(this)}\n          onMouseLeave={this.handleMouseLeave.bind(this)}\n        >\n          {this.getIcon()}\n          <cura-label size={labelSize} color={labelColor} lineHeight=\"0\" marginBlock=\"0\">\n            <slot></slot>\n          </cura-label>\n          {this.counter > 0 && this.getCounter()}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-tabs-group.d.ts

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

package/dist/components/cura-tabs-group.js

@@ -0,0 +1,64 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const curaTabsGroupCss = ":host{display:flex;gap:var(--gap)}:host(.border-bottom){position:relative}:host(.border-bottom)::after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--border-color);z-index:0}::slotted(cura-tabs),::slotted(cura-tabs-transparent){position:relative;z-index:1}";
+const CuraTabsGroupStyle0 = curaTabsGroupCss;
+
+const CuraTabsGroup$1 = /*@__PURE__*/ proxyCustomElement(class CuraTabsGroup extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.tabChange = createEvent(this, "tabChange", 7);
+        this.gap = 0;
+        this.borderBottom = true;
+        this.colorMode = 'light';
+        this.styles = {};
+    }
+    handleTabSelect(ev) {
+        this.updateSelectedTab(ev.detail.name);
+    }
+    updateSelectedTab(value) {
+        const tabs = this.host.querySelectorAll('cura-tabs, cura-tabs-transparent, cura-tabs-button');
+        tabs.forEach((tab) => {
+            tab.selected = tab.name === value;
+        });
+    }
+    getClasses() {
+        return {
+            'border-bottom': this.borderBottom,
+        };
+    }
+    connectedCallback() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--border-color': window.CuraAPI.theme.colors.getColor(this.colorMode === 'light' ? 'neutral-base' : 'primary-base'), '--gap': `${this.gap}px` });
+    }
+    render() {
+        return (h(Host, { key: 'fb6a6ae52fd5bdfb8c3978a75f26be87479ccafa', role: "tablist", style: this.styles, class: this.getClasses() }, h("slot", { key: 'afca97b27c8359f8236331257e4db41f1332e071' })));
+    }
+    get host() { return this; }
+    static get style() { return CuraTabsGroupStyle0; }
+}, [1, "cura-tabs-group", {
+        "gap": [514],
+        "borderBottom": [1540, "border-bottom"],
+        "colorMode": [1537, "color-mode"],
+        "styles": [32]
+    }, [[0, "tabSelect", "handleTabSelect"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-tabs-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-tabs-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraTabsGroup$1);
+            }
+            break;
+    } });
+}
+
+const CuraTabsGroup = CuraTabsGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraTabsGroup, defineCustomElement };
+
+//# sourceMappingURL=cura-tabs-group.js.map

package/dist/components/cura-tabs-group.js.map

@@ -0,0 +1 @@
+{"file":"cura-tabs-group.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,sSAAsS,CAAC;AAChU,4BAAe,gBAAgB;;MCMlBA,eAAa;;;;;;mBACe,CAAC;4BACwB,IAAI;yBACE,OAAO;sBAEnC,EAAE;;IAO5C,eAAe,CAAC,EAAiC;QAC/C,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;KACxC;IAED,iBAAiB,CAAC,KAAa;QAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,oDAAoD,CAAC,CAAC;QAE9F,IAAI,CAAC,OAAO,CAAC,CAAC,GAAwB;YACpC,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,IAAI,KAAK,KAAK,CAAC;SACnC,CAAC,CAAC;KACJ;IAED,UAAU;QACR,OAAO;YACL,eAAe,EAAE,IAAI,CAAC,YAAY;SACnC,CAAC;KACH;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,cAAc,GAAG,cAAc,CAAC,EACpH,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI,GACzB,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAC/D,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraTabsGroup"],"sources":["src/components/tabs/cura-tabs-group/cura-tabs-group.scss?tag=cura-tabs-group&encapsulation=shadow","src/components/tabs/cura-tabs-group/cura-tabs-group.tsx"],"sourcesContent":[":host {\n  display: flex;\n  gap: var(--gap);\n}\n\n:host(.border-bottom) {\n  position: relative;\n}\n\n:host(.border-bottom)::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: var(--border-color);\n  z-index: 0;\n}\n\n::slotted(cura-tabs),\n::slotted(cura-tabs-transparent) {\n  position: relative;\n  z-index: 1;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-tabs-group',\n  styleUrl: 'cura-tabs-group.scss',\n  shadow: true,\n})\nexport class CuraTabsGroup {\n  @Prop({ reflect: true }) gap: number = 0;\n  @Prop({ reflect: true, mutable: true }) borderBottom: boolean = true;\n  @Prop({ reflect: true, mutable: true }) colorMode: 'dark' | 'light' = 'light';\n\n  @State() styles: Record<string, string> = {};\n\n  @Element() host: HTMLElement;\n\n  @Event() tabChange: EventEmitter<string>;\n\n  @Listen('tabSelect')\n  handleTabSelect(ev: CustomEvent<{ name: string }>) {\n    this.updateSelectedTab(ev.detail.name);\n  }\n\n  updateSelectedTab(value: string) {\n    const tabs = this.host.querySelectorAll('cura-tabs, cura-tabs-transparent, cura-tabs-button');\n\n    tabs.forEach((tab: HTMLCuraTabsElement) => {\n      tab.selected = tab.name === value;\n    });\n  }\n\n  getClasses() {\n    return {\n      'border-bottom': this.borderBottom,\n    };\n  }\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--border-color': window.CuraAPI.theme.colors.getColor(this.colorMode === 'light' ? 'neutral-base' : 'primary-base'),\n      '--gap': `${this.gap}px`,\n    };\n  }\n\n  render() {\n    return (\n      <Host role=\"tablist\" style={this.styles} class={this.getClasses()}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-tabs-transparent.d.ts

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

package/dist/components/cura-tabs-transparent.js

@@ -0,0 +1,143 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { l as labelSizes } from './cura-tabs.definitions.js';
+import { d as defineCustomElement$3 } from './cura-icon2.js';
+import { d as defineCustomElement$2 } from './cura-label2.js';
+
+const curaTabsTransparentCss = ":host button,:host a{outline:none;box-shadow:none;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:transparent;box-sizing:border-box;border:none;min-width:120px;width:fit-content;display:flex;align-items:center;justify-content:center}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button.border-bottom,:host a.border-bottom{border-bottom:1px solid var(--border-bottom-color)}:host button.small,:host a.small{padding:calc(var(--cura-spacing-base) * 2px) calc(var(--cura-spacing-base) * 2px)}:host button.medium,:host a.medium{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 3px)}:host button.large,:host a.large{padding:calc(var(--cura-spacing-base) * 3px) calc(var(--cura-spacing-base) * 4px)}:host button:not(.selected),:host a:not(.selected){border-color:var(--border-color)}:host button:focus,:host a:focus{border-color:var(--primary-light)}:host button:not(.disabled,.selected):hover,:host a:not(.disabled,.selected):hover{background-color:var(--background-color-hover)}:host button:not(.disabled,.selected):hover.dark,:host a:not(.disabled,.selected):hover.dark{border-color:var(--neutral-purewhite)}:host button cura-icon,:host a cura-icon{margin-right:calc(var(--cura-spacing-base) * 2px)}:host button.selected,:host a.selected{cursor:pointer}:host button.selected:not(.disabled),:host a.selected:not(.disabled){border-bottom:1px solid var(--border-bottom-color-selected)}:host button.disabled,:host a.disabled{cursor:not-allowed}";
+const CuraTabsTransparentStyle0 = curaTabsTransparentCss;
+
+const CuraTabsTransparent$1 = /*@__PURE__*/ proxyCustomElement(class CuraTabsTransparent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.tabSelect = createEvent(this, "tabSelect", 7);
+        this.name = undefined;
+        this.iconName = undefined;
+        this.selected = false;
+        this.disabled = false;
+        this.borderBottom = true;
+        this.size = 'large';
+        this.colorMode = 'light';
+        this.hovered = false;
+        this.styles = {};
+    }
+    setColors() {
+        const colors = [
+            {
+                name: '--border-bottom-color',
+                theme: this.colorMode === 'light' ? 'neutral-base' : 'primary',
+            },
+            {
+                name: '--border-bottom-color-selected',
+                theme: this.colorMode === 'light' ? 'primary-dark' : 'primary-lighter',
+            },
+        ];
+        colors.forEach(c => {
+            if (c.theme)
+                this.styles[c.name] = window.CuraAPI.theme.colors.getColor(c.theme);
+        });
+        this.styles = Object.assign({}, this.styles);
+    }
+    computeContentColor() {
+        if (this.disabled)
+            return 'neutral-dark';
+        if (this.colorMode === 'dark') {
+            if (this.hovered && !this.selected) {
+                return 'neutral-purewhite';
+            }
+            return this.selected ? 'primary-lighter' : 'neutral-purewhite';
+        }
+        if (this.hovered && !this.selected) {
+            return 'primary-dark';
+        }
+        return this.selected ? 'primary-base' : 'neutral-black';
+    }
+    getIcon() {
+        if (!this.iconName)
+            return '';
+        const iconSize = this.size === 'large' ? 20 : 16;
+        const iconColor = this.computeContentColor();
+        return h("cura-icon", { name: this.iconName, size: iconSize, color: iconColor });
+    }
+    getClasses() {
+        return {
+            [this.size]: true,
+            [this.colorMode]: true,
+            'selected': this.selected,
+            'disabled': this.disabled,
+            'border-bottom': this.borderBottom,
+        };
+    }
+    connectedCallback() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--primary-dark': window.CuraAPI.theme.colors.getColor('primary-dark'), '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'), '--base-spacing': window.CuraAPI.theme.spacing.getSpacing() });
+        this.setColors();
+    }
+    handleMouseEnter() {
+        if (this.disabled)
+            return;
+        this.hovered = true;
+    }
+    handleMouseLeave() {
+        this.hovered = false;
+    }
+    handleClick(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            return;
+        }
+        this.selected = !this.selected;
+        this.tabSelect.emit({ name: this.name });
+    }
+    render() {
+        const labelSize = labelSizes[this.size] || labelSizes['default'];
+        const labelColor = this.computeContentColor();
+        return (h(Host, { key: 'd3c9e277a079381def09397dc922d697aa99d70a', role: "button", "aria-pressed": this.selected, "aria-disabled": this.disabled }, h("button", { key: 'ab4cac9782f48c367c4ada4e303f9422971dc38e', class: this.getClasses(), style: this.styles, onClick: e => this.handleClick(e), disabled: this.disabled, onMouseEnter: this.handleMouseEnter.bind(this), onMouseLeave: this.handleMouseLeave.bind(this) }, this.getIcon(), h("cura-label", { key: 'c6567bdf7b80efc3380a8a93bf52de966e1caa7d', size: labelSize, color: labelColor, lineHeight: "0", marginBlock: "0" }, h("slot", { key: '93c392107790a2c0e3499e5b7bd742219203a980' })))));
+    }
+    static get watchers() { return {
+        "colorMode": ["setColors"]
+    }; }
+    static get style() { return CuraTabsTransparentStyle0; }
+}, [1, "cura-tabs-transparent", {
+        "name": [513],
+        "iconName": [513, "icon-name"],
+        "selected": [1540],
+        "disabled": [1540],
+        "borderBottom": [1540, "border-bottom"],
+        "size": [513],
+        "colorMode": [1537, "color-mode"],
+        "hovered": [32],
+        "styles": [32]
+    }, undefined, {
+        "colorMode": ["setColors"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-tabs-transparent", "cura-icon", "cura-label"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-tabs-transparent":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraTabsTransparent$1);
+            }
+            break;
+        case "cura-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "cura-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const CuraTabsTransparent = CuraTabsTransparent$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraTabsTransparent, defineCustomElement };
+
+//# sourceMappingURL=cura-tabs-transparent.js.map

package/dist/components/cura-tabs-transparent.js.map

@@ -0,0 +1 @@
+{"file":"cura-tabs-transparent.js","mappings":"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","names":["CuraTabsTransparent"],"sources":["src/components/tabs/cura-tabs-transparent/cura-tabs-transparent.scss?tag=cura-tabs-transparent&encapsulation=shadow","src/components/tabs/cura-tabs-transparent/cura-tabs-transparent.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n@import '../../../scss/mixins/buttons.scss';\n\n$button-sizes: (\n  small: $spacing-mini $spacing-mini,\n  medium: $spacing-xxxs $spacing-xxxs,\n  large: $spacing-xxxs $spacing-xxs,\n);\n\n:host {\n  button,\n  a {\n    @include button-element() {\n      background-color: transparent;\n      box-sizing: border-box;\n      border: none;\n\n      min-width: 120px;\n      width: fit-content;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      &.border-bottom {\n        border-bottom: 1px solid var(--border-bottom-color);\n      }\n\n      @each $size, $padding in $button-sizes {\n        &.#{$size} {\n          padding: $padding;\n        }\n      }\n\n      &:not(.selected) {\n        border-color: var(--border-color);\n      }\n\n      &:focus {\n        border-color: var(--primary-light);\n      }\n\n      &:not(.disabled, .selected):hover {\n        background-color: var(--background-color-hover);\n\n        &.dark {\n          border-color: var(--neutral-purewhite);\n        }\n      }\n\n      cura-icon {\n        margin-right: #{$spacing-mini};\n      }\n\n      @include button-selected() {\n        &:not(.disabled) {\n          border-bottom: 1px solid var(--border-bottom-color-selected);\n        }\n      }\n\n      &.disabled {\n        cursor: not-allowed;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { labelSizes } from '../cura-tabs.definitions';\n\n@Component({\n  tag: 'cura-tabs-transparent',\n  styleUrl: 'cura-tabs-transparent.scss',\n  shadow: true,\n})\nexport class CuraTabsTransparent {\n  @Prop({ reflect: true }) name: string;\n  @Prop({ reflect: true }) iconName: string;\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n  @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n  @Prop({ reflect: true, mutable: true }) borderBottom: boolean = true;\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'large';\n  @Prop({ reflect: true, mutable: true }) colorMode: 'dark' | 'light' = 'light';\n\n  @State() hovered = false;\n  @State() styles: Record<string, string> = {};\n\n  @Event() tabSelect: EventEmitter<{ name: string }>;\n\n  @Watch('colorMode')\n  setColors() {\n    const colors = [\n      {\n        name: '--border-bottom-color',\n        theme: this.colorMode === 'light' ? 'neutral-base' : 'primary',\n      },\n      {\n        name: '--border-bottom-color-selected',\n        theme: this.colorMode === 'light' ? 'primary-dark' : 'primary-lighter',\n      },\n    ];\n\n    colors.forEach(c => {\n      if (c.theme) this.styles[c.name] = window.CuraAPI.theme.colors.getColor(c.theme);\n    });\n\n    this.styles = { ...this.styles };\n  }\n\n  computeContentColor(): string {\n    if (this.disabled) return 'neutral-dark';\n\n    if (this.colorMode === 'dark') {\n      if (this.hovered && !this.selected) {\n        return 'neutral-purewhite';\n      }\n      return this.selected ? 'primary-lighter' : 'neutral-purewhite';\n    }\n\n    if (this.hovered && !this.selected) {\n      return 'primary-dark';\n    }\n\n    return this.selected ? 'primary-base' : 'neutral-black';\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'large' ? 20 : 16;\n    const iconColor = this.computeContentColor();\n\n    return <cura-icon name={this.iconName} size={iconSize} color={iconColor}></cura-icon>;\n  }\n\n  getClasses() {\n    return {\n      [this.size]: true,\n      [this.colorMode]: true,\n      'selected': this.selected,\n      'disabled': this.disabled,\n      'border-bottom': this.borderBottom,\n    };\n  }\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--primary-dark': window.CuraAPI.theme.colors.getColor('primary-dark'),\n      '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n\n    this.setColors();\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    this.selected = !this.selected;\n    this.tabSelect.emit({ name: this.name });\n  }\n\n  render() {\n    const labelSize = labelSizes[this.size] || labelSizes['default'];\n    const labelColor = this.computeContentColor();\n\n    return (\n      <Host role=\"button\" aria-pressed={this.selected} aria-disabled={this.disabled}>\n        <button\n          class={this.getClasses()}\n          style={this.styles}\n          onClick={e => this.handleClick(e)}\n          disabled={this.disabled}\n          onMouseEnter={this.handleMouseEnter.bind(this)}\n          onMouseLeave={this.handleMouseLeave.bind(this)}\n        >\n          {this.getIcon()}\n          <cura-label size={labelSize} color={labelColor} lineHeight=\"0\" marginBlock=\"0\">\n            <slot></slot>\n          </cura-label>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-tabs.d.ts

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

package/dist/components/cura-tabs.definitions.js

@@ -0,0 +1,10 @@
+const labelSizes = {
+    small: 'xsmall',
+    medium: 'small',
+    large: 'medium',
+    default: 'medium',
+};
+
+export { labelSizes as l };
+
+//# sourceMappingURL=cura-tabs.definitions.js.map

package/dist/components/cura-tabs.definitions.js.map

@@ -0,0 +1 @@
+{"file":"cura-tabs.definitions.js","mappings":"MAAa,UAAU,GAAG;IACxB,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,OAAO;IACf,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,QAAQ;;;;;","names":[],"sources":["src/components/tabs/cura-tabs.definitions.tsx"],"sourcesContent":["export const labelSizes = {\n  small: 'xsmall',\n  medium: 'small',\n  large: 'medium',\n  default: 'medium',\n};\n"],"version":3}