@rededor/cura 0.5.4 → 1.0.0-alpha.0

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

@@ -1 +1 @@
-{"file":"cura-radio.js","mappings":"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","names":["CuraRadio"],"sources":["./src/components/forms/cura-radio/cura-radio.scss?tag=cura-radio&encapsulation=shadow","./src/components/forms/cura-radio/cura-radio.tsx"],"sourcesContent":["\n\n:host {\n  display: block;\n  width: fit-content;\n  box-sizing: border-box;\n\n.container {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  gap: var(--gap);\n}\n\n.position {\n\n  &.container {\n    flex-direction: row;\n  }\n\n  .label-wrapper {\n    justify-content: end;\n  }\n\n  .message {\n    text-align: right;\n  }\n\n  .label {\n    order:1\n  }\n\n}\n\n.info {\n  display: flex;\n  flex-direction: column;\n}\n\n.label-wrapper {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  gap: 5px;\n}\n\n\n.control {\n  width: fit-content;\n  cursor: pointer;\n  position: relative;\n}\n\n\n.radio {\n  margin: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border-radius: 50%;\n  border: 2px solid var(--primary-base-neutral-medium);\n  background: var(--neutral-purewhite);\n  box-sizing: border-box;\n  transition: border-color 0.3s;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: var(--size);\n  height: var(--size);\n  flex: 0 0 var(--size);\n\n  &::after {\n    content: '';\n    background: var(--color-base-light);\n    border-radius: 50%;\n    opacity: 0;\n    transition: opacity 0.3s;\n    width: var(--size-after);\n    height: var(--size-after);\n  }\n\n  &:focus {\n    border-color: var(--info-base) !important;\n  }\n\n}\n\n\n/* Estado Success */\n.success .radio {\n  border-color: var(--success-base);\n  background: var(--success-lighter);\n\n  &:hover{\n  border-color: var(--success-base) !important;\n  }\n}\n\n.success.checked .radio {\n  border-color: var(--success-base);\n\n  &::after {\n    background: var(--success-base);\n  }\n\n  &:hover {\n    background: var(--success-lighter) !important;\n    border-color: var(--success-base)  !important;\n\n    &::after {\n      background: var(--success-base) !important;\n    }\n  }\n}\n\n\n/* Estado Error */\n.error .radio {\n  border-color: var(--error-base);\n  background: var(--error-lighter);\n\n  &:hover{\n    border-color: var(--error-base) !important;\n  }\n}\n\n.error.checked .radio {\n  border-color: var(--error-base);\n\n  &::after {\n    background: var(--error-base);\n  }\n\n  &:hover {\n    background: var(--error-lighter) !important;\n    border-color: var(--error-base)  !important;\n\n    &::after {\n      background: var(--error-base) !important;\n    }\n  }\n}\n\n\n/* Estado checked */\n.checked .radio::after {\n  opacity: 1;\n  background: var(--color-base);\n}\n\n.checked .radio {\n  border-color: var(--color-dark)  ;\n}\n\n.checked .radio:hover {\n  border-color: var(--color-light)  !important;\n}\n\n.checked .radio:hover::after {\n  background: var(--color-light);\n}\n\n/* Estado disabled */\n.disabled .radio {\n  background: var(--primary-base-neutral-white);\n  border-color: var(--primary-darker-neutral-base) ;\n  cursor: not-allowed;\n}\n\n.disabled .radio::after {\n  background: var(--neutral-lighter);\n}\n\n.disabled.checked .radio {\n  border-color: var(--primary-base-neutral-base)  !important;\n  background: var(--primary-darker-neutral-white) !important;\n}\n\n.disabled.checked .radio::after {\n  background: var(--primary-base-neutral-base) !important;\n}\n\n\n/* Estado hover para não disabled e não checked */\n:not(.disabled):not(.checked) .radio:hover {\n  border-color: var(--primary-base-neutral-dark);\n}\n\n\n}\n","import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n  tag: 'cura-radio',\n  styleUrl: 'cura-radio.scss',\n  shadow: true,\n})\nexport class CuraRadio {\n  /**\n   * Reflects the checked state of the radio button.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Status of the radio button.\n   * Can be 'error', 'success', or 'default'.\n  */\n  @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n  /**\n   * Reflects the disabled state of the radio button.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n * Reflects the required state of the radio button.\n */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * Text label associated with the radio button.\n   */\n  @Prop({ reflect: true }) label: string = '';\n  /**\n   * Specifies the tabindex of the radio button.\n   */\n  @Prop({ reflect: true }) ontabindex: number;\n  /**\n   * Position of the label relative to the radio button.\n   * Can be 'left' or 'right'.\n   */\n  @Prop({ reflect: true }) position: \"left\" | \"right\" = 'left';\n  /**\n   * Value associated with the radio button.\n   */\n  @Prop({ reflect: true }) value: string = '';\n  /**\n   * Name attribute of the radio button.\n   */\n  @Prop({ reflect: true }) name: string = '';\n  /**\n   * Background theme of the radio button.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n   * Size of the radio button.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * Color theme of the radio button.\n   */\n  @Prop() color = 'accent';\n\n  @State() styles = {}\n\n  @Element() host: HTMLElement;\n\n  @Event() onchange: EventEmitter<{ value: string, checked: boolean }>;\n\n  sizes = {\n    \"large\": { size: 20 },\n    \"medium\": { size: 14 },\n    \"small\": { size: 10 },\n  };\n\n\n  isDarkbackground = () => this.background === 'dark';\n\n\n  @Watch('size')\n  sizeHandler() {\n    this.styles = {\n      ...this.styles,\n      '--size-after': `${this.sizes[this.size].size}px`,\n      '--size': `${formsSizes[this.size].size}px`,\n      '--gap': `${formsSizes[this.size].gap}px`\n    };\n  }\n\n\n  @Watch('color')\n  @Watch('background')\n  setColors() {\n\n    const colors = [\n      { name: '--info-base', background: 'info-base' },\n      { name: '--color-light', background: `${this.color}-light` },\n      { name: '--color-base', background: `${this.color}-base` },\n      { name: '--color-dark', background: `${this.color}-dark` },\n      { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n      { name: '--success-lighter', background: 'success-lighter' },\n      { name: '--success-base', background: 'success-base' },\n      { name: '--error-lighter', background: 'error-lighter' },\n      { name: '--error-base', background: 'error-base' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n      { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n      { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },\n      { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },\n      { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--success-base-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },\n      { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\n    });\n    this.styles = { ...this.styles };\n\n  }\n\n  connectedCallback() {\n    this.sizeHandler()\n    this.setColors();\n  }\n\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.checked = !this.checked;\n    this.onchange.emit({ value: this.value, checked: this.checked });\n  };\n\n  getClasses() {\n    const classes = {};\n    classes['container'] = true;\n    classes['checked'] = this.checked;\n    classes['disabled'] = this.disabled;\n    classes['position'] = this.position === 'right';\n    classes[this.status] = true;\n\n    return classes;\n  }\n\n  @Watch('background')\n  assignColor(type: 'label' | 'message',) {\n    if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\n\n    const statusColors = {\n      success: {\n        label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',\n        message: this.isDarkbackground() ? 'success-base' : 'success-dark'\n      },\n      error: {\n        label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',\n        message: this.isDarkbackground() ? 'error-base' : 'error-dark'\n      },\n      default: {\n        label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',\n        message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'\n      }\n    };\n\n    return statusColors[this.status][type];\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"info\">\n            <div class=\"label-wrapper\">\n              <cura-label\n                class=\"label\"\n                size={this.size === 'large' ? 'medium' : 'xsmall'}\n                color={this.assignColor('label')}>\n                {this.label}\n              </cura-label>\n              {this.required && <cura-paragraph lineHeight='0%' marginBlock='0' color=\"error-base\" >* </cura-paragraph>}\n            </div>\n            <cura-label\n              color={this.assignColor('message')}\n              size=\"xsmall\"\n              class=\"message\">\n              <slot></slot>\n            </cura-label>\n          </div>\n          <input\n            type=\"radio\"\n            class={`radio ${this.size.toLocaleLowerCase()}`}\n            name={this.name}\n            value={this.value}\n            required={this.required}\n            tabIndex={this.ontabindex}\n            disabled={this.disabled}\n            checked={this.checked}\n            onClick={this.handleClick}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-radio.js","mappings":"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","names":["CuraRadio"],"sources":["src/components/forms/cura-radio/cura-radio.scss?tag=cura-radio&encapsulation=shadow","src/components/forms/cura-radio/cura-radio.tsx"],"sourcesContent":["\n\n:host {\n  display: block;\n  width: fit-content;\n  box-sizing: border-box;\n\n.container {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  gap: var(--gap);\n}\n\n.position {\n\n  &.container {\n    flex-direction: row;\n  }\n\n  .label-wrapper {\n    justify-content: end;\n  }\n\n  .message {\n    text-align: right;\n  }\n\n  .label {\n    order:1\n  }\n\n}\n\n.info {\n  display: flex;\n  flex-direction: column;\n}\n\n.label-wrapper {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  gap: 5px;\n}\n\n\n.control {\n  width: fit-content;\n  cursor: pointer;\n  position: relative;\n}\n\n\n.radio {\n  margin: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border-radius: 50%;\n  border: 2px solid var(--primary-base-neutral-medium);\n  background: var(--neutral-purewhite);\n  box-sizing: border-box;\n  transition: border-color 0.3s;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: var(--size);\n  height: var(--size);\n  flex: 0 0 var(--size);\n\n  &::after {\n    content: '';\n    background: var(--color-base-light);\n    border-radius: 50%;\n    opacity: 0;\n    transition: opacity 0.3s;\n    width: var(--size-after);\n    height: var(--size-after);\n  }\n\n  &:focus {\n    border-color: var(--info-base) !important;\n  }\n\n}\n\n\n/* Estado Success */\n.success .radio {\n  border-color: var(--success-base);\n  background: var(--success-lighter);\n\n  &:hover{\n  border-color: var(--success-base) !important;\n  }\n}\n\n.success.checked .radio {\n  border-color: var(--success-base);\n\n  &::after {\n    background: var(--success-base);\n  }\n\n  &:hover {\n    background: var(--success-lighter) !important;\n    border-color: var(--success-base)  !important;\n\n    &::after {\n      background: var(--success-base) !important;\n    }\n  }\n}\n\n\n/* Estado Error */\n.error .radio {\n  border-color: var(--error-base);\n  background: var(--error-lighter);\n\n  &:hover{\n    border-color: var(--error-base) !important;\n  }\n}\n\n.error.checked .radio {\n  border-color: var(--error-base);\n\n  &::after {\n    background: var(--error-base);\n  }\n\n  &:hover {\n    background: var(--error-lighter) !important;\n    border-color: var(--error-base)  !important;\n\n    &::after {\n      background: var(--error-base) !important;\n    }\n  }\n}\n\n\n/* Estado checked */\n.checked .radio::after {\n  opacity: 1;\n  background: var(--color-base);\n}\n\n.checked .radio {\n  border-color: var(--color-dark)  ;\n}\n\n.checked .radio:hover {\n  border-color: var(--color-light)  !important;\n}\n\n.checked .radio:hover::after {\n  background: var(--color-light);\n}\n\n/* Estado disabled */\n.disabled .radio {\n  background: var(--primary-base-neutral-white);\n  border-color: var(--primary-darker-neutral-base) ;\n  cursor: not-allowed;\n}\n\n.disabled .radio::after {\n  background: var(--neutral-lighter);\n}\n\n.disabled.checked .radio {\n  border-color: var(--primary-base-neutral-base)  !important;\n  background: var(--primary-darker-neutral-white) !important;\n}\n\n.disabled.checked .radio::after {\n  background: var(--primary-base-neutral-base) !important;\n}\n\n\n/* Estado hover para não disabled e não checked */\n:not(.disabled):not(.checked) .radio:hover {\n  border-color: var(--primary-base-neutral-dark);\n}\n\n\n}\n","import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n  tag: 'cura-radio',\n  styleUrl: 'cura-radio.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class CuraRadio {\n  /**\n   * Reflects the checked state of the radio button.\n   * Mutable property allowing state change.\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n  /**\n   * Status of the radio button.\n   * Can be 'error', 'success', or 'default'.\n  */\n  @Prop({ reflect: true, mutable: true }) status: 'error' | 'success' | 'default' = 'default';\n  /**\n   * Reflects the disabled state of the radio button.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n * Reflects the required state of the radio button.\n */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * Text label associated with the radio button.\n   */\n  @Prop({ reflect: true }) label: string = '';\n  /**\n   * Specifies the tabindex of the radio button.\n   */\n  @Prop({ reflect: true }) ontabindex: number;\n  /**\n   * Position of the label relative to the radio button.\n   * Can be 'left' or 'right'.\n   */\n  @Prop({ reflect: true }) position: \"left\" | \"right\" = 'left';\n  /**\n   * Value associated with the radio button.\n   */\n  @Prop({ reflect: true }) value: string = '';\n  /**\n   * Name attribute of the radio button.\n   */\n  @Prop({ reflect: true }) name: string = '';\n  /**\n   * Background theme of the radio button.\n   * Can be 'dark' or 'light'.\n   */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n   * Size of the radio button.\n   * Can be 'small', 'medium', or 'large'.\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n   * Color theme of the radio button.\n   */\n  @Prop() color = 'accent';\n\n  @State() styles = {}\n\n  @Element() host: HTMLElement;\n\n  @Event() onchange: EventEmitter<{ value: string, checked: boolean }>;\n\n  @AttachInternals() internals: ElementInternals;\n\n  sizes = {\n    \"large\": { size: 20 },\n    \"medium\": { size: 14 },\n    \"small\": { size: 10 },\n  };\n\n\n  isDarkbackground = () => this.background === 'dark';\n\n  @Watch('size')\n  sizeHandler() {\n    this.styles = {\n      ...this.styles,\n      '--size-after': `${this.sizes[this.size].size}px`,\n      '--size': `${formsSizes[this.size].size}px`,\n      '--gap': `${formsSizes[this.size].gap}px`\n    };\n  }\n\n\n  @Watch('color')\n  @Watch('background')\n  setColors() {\n\n    const colors = [\n      { name: '--info-base', background: 'info-base' },\n      { name: '--color-light', background: `${this.color}-light` },\n      { name: '--color-base', background: `${this.color}-base` },\n      { name: '--color-dark', background: `${this.color}-dark` },\n      { name: '--neutral-purewhite', background: 'neutral-purewhite' },\n      { name: '--success-lighter', background: 'success-lighter' },\n      { name: '--success-base', background: 'success-base' },\n      { name: '--error-lighter', background: 'error-lighter' },\n      { name: '--error-base', background: 'error-base' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },\n      { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },\n      { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },\n      { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },\n      { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },\n      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },\n      { name: '--success-base-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },\n      { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\n    });\n    this.styles = { ...this.styles };\n\n  }\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, checked: boolean }) {\n    this.value = state.value;\n    this.checked = state.checked;\n    this.internals.setFormValue(this.value);\n  }\n\n  /**\n * Callback to reset the switch state when the form is reset.\n */\n  formResetCallback() {\n    this.value = '';\n    this.checked = false;\n    this.internals.setValidity({});\n    this.internals.setFormValue(this.value);\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  connectedCallback() {\n    this.sizeHandler()\n    this.setColors();\n  }\n\n  handleClick = () => {\n    if (this.disabled) return;\n\n    this.checked = !this.checked;\n    this.internals.setFormValue(this.value);\n    this.onchange.emit({ value: this.value, checked: this.checked });\n  };\n\n  getClasses() {\n    const classes = {};\n    classes['container'] = true;\n    classes['checked'] = this.checked;\n    classes['disabled'] = this.disabled;\n    classes['position'] = this.position === 'right';\n    classes[this.status] = true;\n\n    return classes;\n  }\n\n  @Watch('background')\n  assignColor(type: 'label' | 'message',) {\n    if (this.disabled) return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';\n\n    const statusColors = {\n      success: {\n        label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',\n        message: this.isDarkbackground() ? 'success-base' : 'success-dark'\n      },\n      error: {\n        label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',\n        message: this.isDarkbackground() ? 'error-base' : 'error-dark'\n      },\n      default: {\n        label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',\n        message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'\n      }\n    };\n\n    return statusColors[this.status][type];\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"info\">\n            <div class=\"label-wrapper\">\n              <cura-label\n                class=\"label\"\n                size={this.size === 'large' ? 'medium' : 'xsmall'}\n                color={this.assignColor('label')}>\n                {this.label}\n              </cura-label>\n              {this.required && <cura-paragraph lineHeight='0%' marginBlock='0' color=\"error-base\" >* </cura-paragraph>}\n            </div>\n            <cura-label\n              color={this.assignColor('message')}\n              size=\"xsmall\"\n              class=\"message\">\n              <slot></slot>\n            </cura-label>\n          </div>\n          <input\n            type=\"radio\"\n            class={`radio ${this.size.toLocaleLowerCase()}`}\n            name={this.name}\n            value={this.value}\n            required={this.required}\n            tabIndex={this.ontabindex}\n            disabled={this.disabled}\n            checked={this.checked}\n            onClick={this.handleClick}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-select-option.d.ts

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

package/dist/components/cura-select-option.js

@@ -0,0 +1,8 @@
+import { C as CuraSelectOption$1, d as defineCustomElement$1 } from './cura-select-option2.js';
+
+const CuraSelectOption = CuraSelectOption$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraSelectOption, defineCustomElement };
+
+//# sourceMappingURL=cura-select-option.js.map

package/dist/components/cura-select-option.js.map

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

package/dist/components/cura-select-option2.js

@@ -0,0 +1,87 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './cura-icon2.js';
+import { d as defineCustomElement$1 } from './cura-label2.js';
+
+const curaSelectOptionCss = ":host{display:block}.item{display:flex;padding:12px 8px;cursor:pointer;justify-content:space-between;align-items:center;box-sizing:border-box;background:var(--neutral-purewhite)}.item.selected{background-color:var(--primary-lighter-50);border-bottom:1px solid var(--primary-light)}.item:hover:not(.selected){background:var(--neutral-white);box-shadow:0 2px 0 0 var(--neutral-light)}.item.active{background:var(--neutral-white) !important}.item.selected.active{background-color:var(--primary-lighter-50) !important;box-shadow:none}";
+const CuraSelectOptionStyle0 = curaSelectOptionCss;
+
+const CuraSelectOption = /*@__PURE__*/ proxyCustomElement(class CuraSelectOption extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.theme = window.CuraAPI.theme;
+        this.value = undefined;
+        this.selected = false;
+        this.active = false;
+        this.size = 'small';
+        this.styles = {};
+    }
+    connectedCallback() {
+        const colors = [
+            { name: '--primary-lighter-50', theme: 'primary-lighter', opacity: 0.5 },
+            { name: '--primary-light', theme: 'primary-light' },
+            { name: '--neutral-light', theme: 'neutral-light' },
+            { name: '--neutral-purewhite', theme: 'neutral-purewhite' },
+        ];
+        colors.forEach(color => this.styles = Object.assign(Object.assign({}, this.styles), { [color.name]: this.theme.colors.getColor(color.theme, color === null || color === void 0 ? void 0 : color.opacity) }));
+    }
+    getSize(element) {
+        const sizeMap = {
+            large: element === 'label' ? 'medium' : 20,
+            medium: element === 'label' ? 'small' : 16,
+            small: element === 'label' ? 'xsmall' : 'micro',
+        };
+        return sizeMap[this.size] || sizeMap['medium'];
+    }
+    getClasses() {
+        return {
+            'item': true,
+            'selected': this.selected,
+            'active': this.active
+        };
+    }
+    render() {
+        return (h(Host, { key: '9eb6b609efeb50130efd27c20bc7a42441687ce7', slot: "option" }, h("div", { key: 'f72ff1ec9f5b5a579152b09e7a02496be5ab944b', class: this.getClasses(), style: this.styles }, h("cura-label", { key: '0b45ade14ca8ad351a696ec6bad4349eadec38f1', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: '2015c43b9b1686fdef5f0369a91ce376327e5d7f' })), this.selected && h("cura-icon", { key: '9ee481f8ee3e586bd629559e90acf30976711059', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "size": ["getSize"]
+    }; }
+    static get style() { return CuraSelectOptionStyle0; }
+}, [1, "cura-select-option", {
+        "value": [513],
+        "selected": [516],
+        "active": [516],
+        "size": [1],
+        "styles": [32]
+    }, undefined, {
+        "size": ["getSize"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-select-option", "cura-icon", "cura-label"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-select-option":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraSelectOption);
+            }
+            break;
+        case "cura-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "cura-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { CuraSelectOption as C, defineCustomElement as d };
+
+//# sourceMappingURL=cura-select-option2.js.map

package/dist/components/cura-select-option2.js.map

@@ -0,0 +1 @@
+{"file":"cura-select-option2.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,ohBAAohB,CAAC;AACjjB,+BAAe,mBAAmB;;MCMrB,gBAAgB;;;;;QAQ3B,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;;wBANgB,KAAK;sBACP,KAAK;oBACQ,OAAO;sBAC7C,EAAE;;IAKpB,iBAAiB;QACf,MAAM,MAAM,GAAG;YACb,EAAE,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAE,GAAG,EAAE;YACxE,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,eAAe,EAAE;YACnD,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,eAAe,EAAE;YACnD,EAAE,IAAI,EAAE,qBAAqB,EAAE,KAAK,EAAE,mBAAmB,EAAE;SAC5D,CAAC;QAEF,MAAM,CAAC,OAAO,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,mCAAQ,IAAI,CAAC,MAAM,KAAE,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,GAAE,CAAC,CAAC;KAClI;IAGD,OAAO,CAAC,OAAe;QACrB,MAAM,OAAO,GAAG;YACd,KAAK,EAAE,OAAO,KAAK,OAAO,GAAG,QAAQ,GAAG,EAAE;YAC1C,MAAM,EAAE,OAAO,KAAK,OAAO,GAAG,OAAO,GAAG,EAAE;YAC1C,KAAK,EAAE,OAAO,KAAK,OAAO,GAAG,QAAQ,GAAG,OAAO;SAChD,CAAC;QAEF,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,CAAC;KAChD;IAED,UAAU;QACR,OAAO;YACL,MAAM,EAAE,IAAI;YACZ,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,QAAQ,EAAC,IAAI,CAAC,MAAM;SACrB,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,IACjB,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,mEAAY,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,cAAc,GAAG,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,kBAAe,GAAG,IACrH,8DAAa,CACF,EACZ,IAAI,CAAC,QAAQ,IAAI,kEAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,KAAK,EAAC,cAAc,GAAa,CACnG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/forms/cura-select-options/cura-select-option.scss?tag=cura-select-option&encapsulation=shadow","src/components/forms/cura-select-options/cura-select-option.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.item {\n  display: flex;\n  padding: 12px 8px;\n  cursor: pointer;\n  justify-content: space-between;\n  align-items: center;\n  box-sizing: border-box;\n  background: var(--neutral-purewhite);\n\n  &.selected {\n    background-color: var(--primary-lighter-50);\n    border-bottom: 1px solid var(--primary-light);\n  }\n\n  &:hover:not(.selected) {\n    background: var(--neutral-white);\n    box-shadow: 0 2px 0 0 var(--neutral-light);\n  }\n\n  &.active {\n    background: var(--neutral-white) !important;\n  }\n\n  &.selected.active {\n    background-color: var(--primary-lighter-50) !important;\n    box-shadow: none;\n  }\n}\n","import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-select-option',\n  styleUrl: 'cura-select-option.scss',\n  shadow: true,\n})\nexport class CuraSelectOption {\n  @Prop({ reflect: true }) value: string;\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop({ reflect: true }) active: boolean = false;\n  @Prop() size: 'xsmall' | 'small' | 'medium' | 'large' = 'small'\n  @State() styles = {};\n  @Element() host: HTMLElement;\n\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    const colors = [\n      { name: '--primary-lighter-50', theme: 'primary-lighter', opacity: 0.5 },\n      { name: '--primary-light', theme: 'primary-light' },\n      { name: '--neutral-light', theme: 'neutral-light' },\n      { name: '--neutral-purewhite', theme: 'neutral-purewhite' },\n    ];\n\n    colors.forEach(color => this.styles = { ...this.styles, [color.name]: this.theme.colors.getColor(color.theme, color?.opacity) });\n  }\n\n  @Watch('size')\n  getSize(element: string) {\n    const sizeMap = {\n      large: element === 'label' ? 'medium' : 20,\n      medium: element === 'label' ? 'small' : 16,\n      small: element === 'label' ? 'xsmall' : 'micro',\n    };\n\n    return sizeMap[this.size] || sizeMap['medium'];\n  }\n\n  getClasses() {\n    return {\n      'item': true,\n      'selected': this.selected,\n      'active':this.active\n    };\n  }\n\n  render() {\n    return (\n      <Host slot=\"option\">\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-label color={`${this.selected ? 'primary-base' : 'neutral-black'}`} size={this.getSize('label')} margin-block=\"0\">\n            <slot></slot>\n          </cura-label>\n          {this.selected && <cura-icon name='check' size={this.getSize('icon')} color=\"primary-base\"></cura-icon>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/cura-select.js

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

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

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

package/dist/components/cura-select2.js

@@ -0,0 +1,308 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './cura-icon2.js';
+import { d as defineCustomElement$1 } from './cura-label2.js';
+
+const curaSelectCss = ":host{display:block;position:relative;font-family:var(--font-family)}.wrapper{width:100%;user-select:none;text-align:left !important}.wrapper cura-label{margin-bottom:8px}.wrapper .helper-text{margin-top:8px;color:var(--neutral-dark)}.wrapper .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper .cura-input-field .feedback-icon{padding-left:12px}.wrapper .cura-input-field .up-down-icon{order:3;padding-right:12px;cursor:pointer;pointer-events:all}.wrapper .cura-input-field input{padding:0px 12px 0px 8px}.wrapper .cura-input-field.open{border-radius:4px 4px 0 0 !important}.wrapper.transparent{background-color:transparent;padding:0px;max-height:80px}.wrapper.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent !important;border:none !important;border-radius:0;height:27px}.wrapper.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.transparent .cura-input-field .feedback-icon{padding-left:12px}.wrapper.transparent .cura-input-field input{color:var(--neutral-black) !important;font-size:16px;font-weight:var(--font-weight-bold) !important;padding:0}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.wrapper.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.wrapper.transparent:focus-within .cura-input-field{border:none !important;background-color:transparent !important}.wrapper.transparent:focus-within .cura-input-field input{border:none !important;outline:none}.wrapper.transparent .helper-text{margin-top:0px}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper:focus-within .cura-input-field{border:2px solid var(--info-base) !important;background-color:var(--neutral-purewhite);outline:none}.wrapper:focus-within .cura-input-field input{color:var(--neutral-black) !important}.wrapper.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success .cura-input-field .feedback-icon{padding-left:12px}.wrapper.success .cura-input-field input{color:var(--success-darker) !important}.wrapper.success .cura-input-field input::placeholder{color:var(--success-darker) !important}.wrapper.success:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.wrapper.success:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field input{color:var(--error-darker) !important}.wrapper.error .cura-input-field input::placeholder{color:var(--error-darker) !important}.wrapper.error:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.wrapper.error:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.disabled .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.wrapper.disabled .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.disabled .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.disabled .cura-input-field .feedback-icon{padding-left:12px}.wrapper.disabled .cura-input-field input{color:var(--neutral-medium)}.wrapper.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.wrapper.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.small .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.wrapper.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.small.label .menu{top:53px}.wrapper.small .menu{top:33px}.wrapper.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.medium .cura-input-field .feedback-icon{padding-left:12px}.wrapper.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.wrapper.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.medium.label .menu{top:61px}.wrapper.medium .menu{top:40px}.wrapper.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.large .cura-input-field .feedback-icon{padding-left:12px}.wrapper.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.wrapper.large.label .menu{top:69px}.wrapper.large .menu{top:47px}.required{color:red}.menu{position:absolute;left:0;right:-1px;background:#fff;border:2px solid var(--neutral-light);border-radius:4px;z-index:1000;max-height:285px;overflow:hidden;border-top:transparent;align-items:center;scrollbar-color:var(--neutral-medium) var(--neutral-black-20);overflow-y:scroll;box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}.menu.open{border-radius:0 !important}";
+const CuraSelectStyle0 = curaSelectCss;
+
+const CuraSelect = /*@__PURE__*/ proxyCustomElement(class CuraSelect extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.selected = createEvent(this, "selected", 7);
+        this.internals = this.attachInternals();
+        /**
+         * Styles to be applied to the component.
+         */
+        this.styles = {};
+        /**
+         * Theme object containing font and color information.
+         */
+        this.theme = window.CuraAPI.theme;
+        /**
+         * Handles mutations observed by the MutationObserver.
+         * Updates the selected option or filters options based on the mutation type.
+         */
+        this.handleMutations = (mutations) => {
+            mutations.forEach(mutation => {
+                if (mutation.type === 'attributes') {
+                    if (mutation.attributeName === 'selected')
+                        this.updateSelectedOption();
+                    if (mutation.attributeName === 'value')
+                        this.filterOptions();
+                }
+            });
+        };
+        /**
+         * Handles the selection of an option.
+         */
+        this.onOptiselected = (event) => {
+            const selectedOption = event.target;
+            this.clearSelectedAttributes();
+            selectedOption.setAttribute('selected', 'true');
+        };
+        this.handleKeyDown = (event) => {
+            var _a;
+            if (!this.isOpen)
+                return;
+            const { key } = event;
+            if (key === 'ArrowDown') {
+                event.preventDefault();
+                this.updateActiveIndex(1);
+            }
+            if (key === 'ArrowUp') {
+                event.preventDefault();
+                this.updateActiveIndex(-1);
+            }
+            if (key === 'Enter') {
+                (_a = this.options[this.activeIndex]) === null || _a === void 0 ? void 0 : _a.click();
+            }
+        };
+        this.handleInputChange = (e) => {
+            this.value = e.target.value;
+            this.isOpen = !!this.value.length;
+            this.internals.setFormValue(this.value);
+        };
+        this.handleClick = (event) => {
+            if (this.disabled)
+                return event.preventDefault();
+            const target = event.target;
+            if (target.tagName === 'CURA-SELECT-OPTION')
+                return this.onOptiselected(event);
+            this.isOpen = !this.isOpen;
+        };
+        this.label = '';
+        this.placeholder = '';
+        this.value = '';
+        this.mode = 'default';
+        this.size = 'medium';
+        this.status = 'default';
+        this.disabled = false;
+        this.required = false;
+        this.isHovered = false;
+        this.isFocused = false;
+        this.isOpen = false;
+        this.options = undefined;
+        this.activeIndex = -1;
+    }
+    /**
+   * Callback for form association.
+   */
+    formAssociatedCallback(form) {
+        form.ariaLabel = this.label;
+    }
+    /**
+   * Callback to restore the switch state from the form.
+   */
+    formStateRestoreCallback(state) {
+        this.value = state.value;
+        this.updateSelectedOption();
+    }
+    /**
+   * Callback to reset the switch state when the form is reset.
+   */
+    formResetCallback() {
+        this.value = '';
+        this.clearSelectedAttributes();
+        this.internals.setFormValue(this.value);
+        this.internals.setValidity({});
+    }
+    /**
+    * Callback to update the switch's disabled state when the form's disabled state changes.
+    */
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    /**
+     * Lifecycle method called before the component is rendered.
+     * Initializes the options for the select component.
+     */
+    componentWillLoad() {
+        this.initializeOptions();
+    }
+    /**
+     * Lifecycle method called after the component is rendered.
+     * Initializes select-related functionality.
+     */
+    componentDidLoad() {
+        this.setupMutationObserver();
+    }
+    /**
+     * Lifecycle method called when the component is connected to the DOM.
+     * Applies styles based on the theme.
+     */
+    connectedCallback() {
+        this.applyStyles();
+    }
+    /**
+     * Lifecycle method called when the component is disconnected from the DOM.
+     * Disconnects the MutationObserver if it exists.
+     */
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    initializeOptions() {
+        this.options = this.host.querySelectorAll('cura-select-option');
+        this.options.forEach(option => {
+            option.setAttribute('size', this.size);
+            option.setAttribute('selected', 'false');
+        });
+    }
+    /**
+     * Applies styles to the component based on the theme.
+     */
+    applyStyles() {
+        const { fonts, colors } = this.theme;
+        const fontWeights = fonts.getWeights();
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--font-weight-medium': fontWeights.medium, '--font-weight-bold': fontWeights.bold, '--font-weight-regular': fontWeights.regular, '--font-color': fonts.getColor(), '--font-family': fonts.getFamily(), '--font-size': fonts.getSize() });
+        const colorKeys = [
+            'primary-base', 'neutral-purewhite', 'neutral-white', 'neutral-black', 'neutral-medium', 'neutral-light',
+            'neutral-base', 'neutral-dark', 'success-dark', 'success-darker', 'success-lighter',
+            'error-lighter', 'error-dark', 'error-darker', 'error-base', 'info-base'
+        ];
+        colorKeys.forEach(key => {
+            this.styles[`--${key}`] = colors.getColor(key);
+        });
+    }
+    /**
+     * Sets up a MutationObserver to watch for changes in the component.
+     */
+    setupMutationObserver() {
+        this.mutationObserver = new MutationObserver(this.handleMutations);
+        this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });
+    }
+    updateSelectedOption() {
+        const selectedOption = this.host.querySelector('cura-select-option[selected]');
+        if (selectedOption) {
+            const selectedValue = selectedOption.textContent;
+            if (this.value !== selectedValue) {
+                this.value = selectedValue;
+                this.isOpen = false;
+                this.internals.setFormValue(this.value);
+                this.selected.emit({ value: this.value, selected: true });
+            }
+        }
+    }
+    /**
+     * Clears the 'selected' attribute from all options.
+     */
+    clearSelectedAttributes() {
+        this.options.forEach(option => option.removeAttribute('selected'));
+    }
+    /**
+     * Filters the options based on the current input value.
+     */
+    filterOptions() {
+        const inputValue = this.value.toLowerCase();
+        this.options.forEach(option => {
+            var _a;
+            const optionValue = ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+            const isVisible = this.isOpen ? optionValue.includes(inputValue) : true;
+            option.style.display = isVisible ? 'block' : 'none';
+        });
+    }
+    updateActiveIndex(direction) {
+        if (this.options.length === 0)
+            return;
+        this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;
+        this.updateOptionHighlights();
+    }
+    updateOptionHighlights() {
+        this.options.forEach((option, index) => option.active = index === this.activeIndex);
+    }
+    getClasses() {
+        return {
+            wrapper: true,
+            label: !!this.label,
+            disabled: this.disabled,
+            transparent: this.mode === 'transparent',
+            [this.size.toLowerCase()]: true,
+            [this.status.toLowerCase()]: true,
+        };
+    }
+    /**
+     * Determines the color based on the item type and component state.
+     */
+    getColor(item) {
+        if (this.disabled)
+            return 'neutral-medium';
+        const isStatusDefault = this.status === 'default';
+        const isHoveredOrFocused = this.isFocused || this.isHovered;
+        if (item === 'label') {
+            if (!isStatusDefault || isHoveredOrFocused)
+                return 'neutral-black';
+            return 'neutral-dark';
+        }
+        if (isHoveredOrFocused && isStatusDefault)
+            return 'neutral-black';
+        if (this.status === 'success')
+            return 'success-dark';
+        if (this.status === 'error')
+            return 'error-dark';
+        return 'neutral-dark';
+    }
+    /**
+     * Renders the icon based on the component's status.
+     */
+    renderIcon() {
+        if (this.status === 'default')
+            return null;
+        const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];
+        return (h("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
+    }
+    render() {
+        return (h(Host, { key: '25024f752db0a0189ece93612e54a43b47668efd', style: this.styles }, h("div", { key: 'eae2f00129bb2d82fa1586ce7f6e2e4bb71b20de', class: this.getClasses(), tabIndex: 0, ref: (el) => (this.selectRef = el), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onKeyDown: this.handleKeyDown, onClick: this.handleClick }, this.label && (h("cura-label", { key: '0ac1eb8e18c97432a2c46e35dc04fce4d2dc640a', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '09e8e758d595c641afbb7729847bc6e123ecd869', class: 'required' }, "* "))), h("div", { key: '2248ebad1ab820689635db06db8725d39118b04b', class: {
+                'cura-input-field': true,
+                'open': this.isOpen
+            } }, this.renderIcon(), h("input", { key: 'ea3909b76182006256055be075a446a8cb2813af', tabIndex: 0, type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.value }), h("cura-icon", { key: '13a28271273b9a96e39cb62ca91e6769ea33ee43', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: 'fb1802d14cf6099e0ddf71f0623c1f0ffba6747c', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: '2c257fd28f5c560dd66fe9f73c2fb3c165174efa' })), this.isOpen && (h("div", { key: '36dbd0fa457f7d1ec9c771dafc7491a821267812', class: {
+                'menu': true,
+                'open': this.isOpen
+            } }, h("slot", { key: 'f8d751989092e50820cb7b71903eef743f672a6b', name: 'option' }))))));
+    }
+    static get formAssociated() { return true; }
+    get host() { return this; }
+    static get style() { return CuraSelectStyle0; }
+}, [65, "cura-select", {
+        "label": [513],
+        "placeholder": [513],
+        "value": [1537],
+        "mode": [513],
+        "size": [513],
+        "status": [1537],
+        "disabled": [516],
+        "required": [516],
+        "isHovered": [32],
+        "isFocused": [32],
+        "isOpen": [32],
+        "options": [32],
+        "activeIndex": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-select", "cura-icon", "cura-label"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-select":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraSelect);
+            }
+            break;
+        case "cura-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "cura-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { CuraSelect as C, defineCustomElement as d };
+
+//# sourceMappingURL=cura-select2.js.map

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

@@ -0,0 +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: 12px;\n      cursor: pointer;\n      pointer-events: all;\n    }\n\n    input {\n      padding: 0px 12px 0px 8px;\n    }\n\n    &.open {\n      border-radius: 4px 4px 0 0 !important;\n    }\n\n\n  }\n\n  @include cura-input-transparent();\n\n  @include cura-forms-hover();\n  @include cura-forms-focused();\n\n\n  @include cura-forms-success();\n  @include cura-forms-error();\n  @include cura-forms-disabled();\n\n  @include cura-forms-small() {\n    &.label {.menu {top: 53px;} }\n    .menu { top: 33px; }\n  }\n\n  @include cura-forms-medium() {\n    &.label {.menu { top: 61px;} }\n    .menu { top: 40px; }\n  }\n\n  @include cura-forms-large() {\n    &.label {.menu { top: 69px } }\n    .menu {top: 47px; }\n  }\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: scroll;\n  box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);\n\n  &.open {\n    border-radius: 0 !important;\n  }\n}\n\n","import { Component, Element, Host, Prop, State, h, Event, EventEmitter, AttachInternals } 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<HTMLElement>;\n\n\n  @State() activeIndex: number = -1\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   * Reference to the select component element.\n   */\n  selectRef: HTMLElement;\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.value = 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.value = '';\n    this.clearSelectedAttributes()\n    this.internals.setFormValue(this.value);\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('cura-select-option');\n    this.options.forEach(option => {\n      option.setAttribute('size', this.size);\n      option.setAttribute('selected', 'false');\n    });\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        if (mutation.attributeName === 'value') this.filterOptions();\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  updateSelectedOption() {\n    const selectedOption = this.host.querySelector('cura-select-option[selected]');\n\n    if (selectedOption) {\n      const selectedValue = selectedOption.textContent;\n      if (this.value !== selectedValue) {\n        this.value = selectedValue ;\n        this.isOpen = false;\n        this.internals.setFormValue(this.value);\n        this.selected.emit({ value: this.value, selected: true });\n      }\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  /**\n   * Filters the options based on the current input value.\n   */\n  filterOptions() {\n    const inputValue = this.value.toLowerCase();\n\n    this.options.forEach(option => {\n      const optionValue = option.textContent?.toLowerCase() || '';\n      const isVisible = this.isOpen ? optionValue.includes(inputValue) : true;\n      option.style.display = isVisible ? 'block' : 'none';\n    });\n  }\n\n  handleKeyDown = (event: KeyboardEvent) => {\n    if (!this.isOpen) return;\n    const { key } = event\n\n    if (key === 'ArrowDown') {\n      event.preventDefault();\n      this.updateActiveIndex(1);\n    }\n\n    if (key === 'ArrowUp') {\n      event.preventDefault();\n      this.updateActiveIndex(-1);\n    }\n\n    if (key === 'Enter') {\n      this.options[this.activeIndex]?.click();\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    this.updateOptionHighlights()\n  }\n\n  updateOptionHighlights() {\n    this.options.forEach((option, index) => (option as any).active = index === this.activeIndex);\n  }\n\n\n  handleInputChange = (e: Event) => {\n    this.value = (e.target as HTMLInputElement).value;\n    this.isOpen = !!this.value.length;\n    this.internals.setFormValue(this.value);\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          tabIndex={0}\n          ref={(el) => (this.selectRef = el as HTMLElement)}\n          onMouseEnter={() => (this.isHovered = true)}\n          onMouseLeave={() => (this.isHovered = false)}\n          onKeyDown={this.handleKeyDown}\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              tabIndex={0}\n              type=\"text\"\n              autocomplete='off'\n              onFocus={() => (this.isFocused = true)}\n              onBlur={() => (this.isFocused = false)}\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.value}\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}

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

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface CuraSwitch extends Components.CuraSwitch, HTMLElement {}
 export const CuraSwitch: {
-  prototype: CuraSwitch;
-  new (): CuraSwitch;
+    prototype: CuraSwitch;
+    new (): CuraSwitch;
 };
 /**
  * Used to define this component and all nested components recursively.