@rededor/cura 0.5.4 → 1.0.0-alpha.0

package/dist/esm/cura-select_2.entry.js

@@ -0,0 +1,320 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6c443d5.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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selected = createEvent(this, "selected", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        /**
+         * 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 getElement(this); }
+};
+CuraSelect.style = CuraSelectStyle0;
+
+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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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 getElement(this); }
+    static get watchers() { return {
+        "size": ["getSize"]
+    }; }
+};
+CuraSelectOption.style = CuraSelectOptionStyle0;
+
+export { CuraSelect as cura_select, CuraSelectOption as cura_select_option };
+
+//# sourceMappingURL=cura-select_2.entry.js.map

package/dist/esm/cura-select_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"cura-select.cura-select-option.entry.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","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":["@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",":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/esm/cura-switch.entry.js

@@ -1,85 +1,120 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-81f1a268.js';
-import { f as formsSizes } from './cura-forms.definitions-0f774253.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-b6c443d5.js';
+import { f as formsSizes } from './cura-forms.definitions-2f963167.js';
 
-const curaSwitchCss = "@charset \"UTF-8\";:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-box-sizing:border-box;box-sizing:border-box}.container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:var(--gap)}.position.container{-ms-flex-direction:row;flex-direction:row}.position .label{text-align:right}.position .message{text-align:right}.control{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.track{background:var(--neutral-base-black-40);border-radius:16px;-webkit-transition:background-color 0.3s;transition:background-color 0.3s;-ms-flex-align:start;align-items:flex-start;-ms-flex-negative:0;flex-shrink:0;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size-track);height:var(--size)}.thumb{background-color:var(--neutral-white-purewhite);border:2px solid var(--neutral-medium);border-radius:50%;position:absolute;-webkit-transition:outline 0.3s, -webkit-transform 0.3s;transition:outline 0.3s, -webkit-transform 0.3s;transition:transform 0.3s, outline 0.3s;transition:transform 0.3s, outline 0.3s, -webkit-transform 0.3s;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--size);height:var(--size)}.checked .thumb{border-color:var(--color-dark-light);background:var(--color-lighter);-webkit-transform:translateX(var(--size));transform:translateX(var(--size))}.checked .thumb:hover{background:var(--neutral-white-purewhite) !important}.checked .track{background:var(--color-base-lighter-50)}.disabled .track{background:var(--primary-base-neutral-black-20)}.disabled .thumb{background:var(--neutral-lighter) !important;border-color:var(--primary-dark-neutral-base);cursor:not-allowed}.disabled.checked .track{background:var(--primary-base-neutral-black-20)}.disabled .thumb:hover{background:var(--neutral-lighter) !important;border-color:var(--primary-dark-neutral-base) !important}:not(.disabled):not(.checked) .thumb:hover{border-color:var(--color-dark-light);background:var(--color-lighter)}:not(.disabled) .thumb:focus{border-color:var(--info-base) !important;z-index:1}";
+const curaSwitchCss = "@charset \"UTF-8\";:host{display:block;width:fit-content;box-sizing:border-box}.container{display:flex;align-items:center;flex-direction:row-reverse;gap:var(--gap);text-align:left}.position{flex-direction:row}.label,.message{text-align:left}.control{width:fit-content}.track{background:var(--neutral-dark-base);border-radius:16px;transition:background-color 0.3s;align-items:flex-start;flex-shrink:0;box-sizing:border-box;width:var(--size-track);height:var(--size);position:relative}.thumb{background:var(--neutral-purewhite);border:2px solid var(--neutral-darker-medium);border-radius:50%;position:absolute;transition:transform 0.3s, outline 0.3s;display:inline-block;cursor:pointer;user-select:none;box-sizing:border-box;width:var(--size);height:var(--size);top:50%;transform:translateY(-50%)}.checked .thumb{border-color:var(--color-dark);box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));background:var(--neutral-purewhite);transform:translateX(var(--size)) translateY(-50%)}.checked .thumb:hover{background:var(--neutral-pale) !important;border-color:var(--neutral-darker-medium) !important}.checked .thumb:active{border-color:var(--color-dark);background:var(--neutral-pale)}.checked .track{background:var(--color-base-light)}.disabled .track{background:var(--neutral-black-neutral-pale)}.disabled .thumb{background:var(--neutral-black-neutral-base) !important;border-color:var(--neutral-black-neutral-pale) !important;cursor:not-allowed}.disabled.checked .track{background:var(--neutral-black-neutral-pale)}.container.disabled .thumb:focus{outline:none !important;border-color:var(--neutral-black-neutral-pale) !important}:not(.disabled):not(.checked) .thumb:hover{border-color:var(--color-dark);background:var(--neutral-pale)}:not(.disabled):not(.checked) .thumb:active{border-color:var(--color-dark);background:var(--neutral-pale)}:not(.disabled) .thumb:focus{outline:2px solid var(--info-base) !important;border:2px solid var(--neutral-darker-medium);z-index:1}:not(.disabled) .checked .thumb:focus{outline:2px solid var(--info-base) !important;border-color:var(--color-dark)}";
+const CuraSwitchStyle0 = curaSwitchCss;
 
 const CuraSwitch = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.onchange = createEvent(this, "onchange", 7);
-    this.sizes = {
-      "large": { size: 64 },
-      "medium": { size: 48 },
-      "small": { size: 40 },
-    };
-    this.isDarkbackground = () => this.background === 'dark';
-    this.toggleSwitch = () => {
-      if (this.disabled)
-        return null;
-      this.checked = !this.checked;
-      this.onchange.emit({ checked: this.checked });
-    };
-    this.checked = false;
-    this.disabled = false;
-    this.label = '';
-    this.ontabindex = 0;
-    this.position = 'left';
-    this.size = 'medium';
-    this.background = 'light';
-    this.color = 'accent';
-    this.styles = {};
-  }
-  sizeHandler() {
-    this.styles = Object.assign(Object.assign({}, this.styles), { '--size-track': `${this.sizes[this.size].size}px`, '--size': `${formsSizes[this.size].size}px`, '--gap': `${formsSizes[this.size].gap}px` });
-  }
-  setColors() {
-    const colors = [
-      { name: '--info-base', background: 'info-base' },
-      { name: '--neutral-medium', background: 'neutral-medium' },
-      { name: '--color-lighter', background: `${this.color}-lighter` },
-      { name: '--color-base-lighter-50', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'lighter'}`, opacity: 0.5 },
-      { name: '--color-base-light', background: `${this.color}-${this.isDarkbackground() ? 'base' : 'light'}` },
-      { name: '--color-dark-light', background: `${this.color}-${this.isDarkbackground() ? 'dark' : 'light'}` },
-      { name: '--primary-lighter-neutral-dark', background: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark' },
-      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
-      { name: '--neutral-white-purewhite', background: `neutral-${this.isDarkbackground() ? 'white' : 'purewhite'}` },
-      { name: '--primary-base-neutral-black-20', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-black'}`, opacity: 0.2 },
-      { name: '--neutral-base-black-40', background: `neutral-${this.isDarkbackground() ? 'base' : 'black'}`, opacity: 0.4 },
-      { name: '--primary-dark-neutral-base', background: `${this.isDarkbackground() ? 'primary-dark' : 'neutral-base'}` },
-      { name: '--neutral-lighter', background: `${this.isDarkbackground() ? 'primary-base' : 'neutral-lighter'}` },
-    ];
-    colors.forEach(color => {
-      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color === null || color === void 0 ? void 0 : color.opacity);
-    });
-    this.styles = Object.assign({}, this.styles);
-  }
-  connectedCallback() {
-    this.sizeHandler();
-    this.setColors();
-  }
-  assignColor(colorDark, colorLight) {
-    if (this.disabled)
-      return this.isDarkbackground() ? 'primary-base' : 'neutral-medium';
-    return this.isDarkbackground() ? colorDark : colorLight;
-  }
-  getClasses() {
-    const classes = {};
-    classes['container'] = true;
-    classes['checked'] = this.checked;
-    classes['disabled'] = this.disabled;
-    classes['position'] = this.position === 'right';
-    return classes;
-  }
-  render() {
-    return (h(Host, null, h("div", { class: this.getClasses(), style: this.styles }, h("div", { class: "info" }, h("cura-label", { class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", null))), h("div", { onClick: this.toggleSwitch, class: "control" }, h("div", { class: `track ${this.size.toLowerCase()}` }, h("div", { class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
-  }
-  static get watchers() { return {
-    "size": ["sizeHandler"],
-    "color": ["setColors"],
-    "background": ["setColors"]
-  }; }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onchange = createEvent(this, "onchange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.sizes = {
+            large: { size: 64 },
+            medium: { size: 48 },
+            small: { size: 40 },
+        };
+        this.isDarkbackground = () => this.background === 'dark';
+        this.toggleSwitch = () => {
+            if (this.disabled)
+                return null;
+            this.checked = !this.checked;
+            this.internals.setFormValue(this.checked.toString());
+            this.onchange.emit({ checked: this.checked });
+        };
+        this.checked = false;
+        this.disabled = false;
+        this.label = '';
+        this.ontabindex = 0;
+        this.position = 'left';
+        this.size = 'medium';
+        this.background = 'light';
+        this.color = 'accent';
+        this.styles = {};
+    }
+    sizeHandler() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--size-track': `${this.sizes[this.size].size}px`, '--size': `${formsSizes[this.size].size}px`, '--gap': `${formsSizes[this.size].gap}px` });
+    }
+    setColors() {
+        const colors = [
+            { name: '--info-base', background: 'info-base' },
+            { name: '--neutral-black-shadow', background: 'neutral-black', opacity: 0.16 },
+            { name: '--neutral-purewhite', background: 'neutral-purewhite' },
+            { name: '--neutral-medium', background: 'neutral-medium' },
+            { name: '--neutral-pale', background: 'neutral-pale' },
+            { name: '--neutral-dark-base', background: `neutral-${this.isDarkbackground() ? 'dark' : 'base'}` },
+            { name: '--neutral-darker-medium', background: `neutral-${this.isDarkbackground() ? 'darker' : 'medium'}` },
+            { name: '--neutral-black-neutral-pale', background: `${this.isDarkbackground() ? 'neutral-black' : 'neutral-pale'}` },
+            { name: '--neutral-black-neutral-base', background: `${this.isDarkbackground() ? 'neutral-dark' : 'neutral-base'}` },
+            { name: '--color-base-light', background: `${this.color}-light` },
+            { name: '--color-dark', background: `${this.color}-dark` },
+        ];
+        colors.forEach(color => {
+            this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background, color === null || color === void 0 ? void 0 : color.opacity);
+        });
+        this.styles = Object.assign({}, this.styles);
+    }
+    connectedCallback() {
+        this.sizeHandler();
+        this.setColors();
+    }
+    /**
+     * Callback for form association.
+     */
+    formAssociatedCallback(form) {
+        form.ariaLabel = this.label;
+    }
+    /**
+     * Callback to restore the switch state from the form.
+     */
+    formStateRestoreCallback(state) {
+        this.checked = state.value === 'true';
+        this.internals.setFormValue(this.checked.toString());
+    }
+    /**
+     * Callback to reset the switch state when the form is reset.
+     */
+    formResetCallback() {
+        this.checked = false;
+        this.internals.setValidity({});
+        this.internals.setFormValue(this.checked.toString());
+    }
+    /**
+     * Callback to update the switch's disabled state when the form's disabled state changes.
+     */
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    assignColor(colorDark, colorLight) {
+        if (this.disabled)
+            return this.isDarkbackground() ? 'neutral-dark' : 'neutral-dark';
+        return this.isDarkbackground() ? colorDark : colorLight;
+    }
+    getClasses() {
+        const classes = {};
+        classes['container'] = true;
+        classes['checked'] = this.checked;
+        classes['disabled'] = this.disabled;
+        classes['position'] = this.position === 'right';
+        return classes;
+    }
+    render() {
+        return (h(Host, { key: 'e0040434db080b1ccdb12a1389ca028f5c02f66a' }, h("div", { key: '6008f7aef47e0519e965c2be573dc1eacc001b6c', class: this.getClasses(), style: this.styles }, h("div", { key: 'a954404dce1c7eafd79cb3236e8761a3dc29f86e', class: "info" }, h("cura-label", { key: '6ff5cc1f26abad0f173c4e1330aaae43357b7737', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: 'b82e4cb25ef94481642e1d5a2180eb4e12b8eff8', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '243e906253614d9ce837e0c598b259ad7c87afb4' }))), h("div", { key: '36d0165722a6fae98ca829a5a2e89edef3694ff2', onClick: this.toggleSwitch, class: "control" }, h("div", { key: 'f9c0c7cbc84b655e37e7e8df1c2293c1260445ca', class: `track ${this.size.toLowerCase()}` }, h("div", { key: 'e5ca4006ad41a6cbf8d62ca612b52ef26fb7255f', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "size": ["sizeHandler"],
+        "color": ["setColors"],
+        "background": ["setColors"]
+    }; }
 };
-CuraSwitch.style = curaSwitchCss;
+CuraSwitch.style = CuraSwitchStyle0;
 
 export { CuraSwitch as cura_switch };