@six-group/ui-library 0.0.0-insider.c8fa9a3 → 0.0.0-insider.cc02aea

package/dist/esm/six-button_2.entry.js

@@ -0,0 +1,181 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-JoG9I7EO.js';
+import { h as hasSlot } from './slot-j3oIB5oT.js';
+import { s as submitForm } from './form-B1bClJZ6.js';
+
+const sixButtonCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block;width:auto;cursor:pointer}.button{display:inline-flex;align-items:stretch;justify-content:center;width:100%;border-style:solid;border-width:var(--six-border-width);border-radius:0;font-family:var(--six-font-family);font-weight:var(--six-font-weight-semibold);text-decoration:none;user-select:none;white-space:nowrap;vertical-align:middle;padding:0;transition:var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:inherit}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button.button--disabled{pointer-events:none}.button ::slotted(six-icon){pointer-events:none;flex:0 0 auto;display:flex;align-items:center}.button-wrapper--disabled{cursor:not-allowed}.button__prefix,.button__suffix{flex:0 0 auto;display:flex;align-items:center}.button:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.button.button--secondary{background-color:var(--six-color-white);border-color:var(--six-color-web-rock-900);color:var(--six-color-web-rock-900)}.button.button--secondary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--secondary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-100)}.button.button--secondary:active:not(.button--disabled){background-color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-900);border-width:1px}.button.button--primary{background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.button.button--primary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--primary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-800);border-color:var(--six-color-web-rock-800)}.button.button--primary:active:not(.button--disabled){background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);opacity:70%}.button.button--link{background-color:transparent;border-color:transparent;color:var(--six-color-action-500)}.button.button--link.button--disabled{color:var(--six-color-web-rock-400)}.button.button--link:hover:not(.button--disabled){color:var(--six-color-action-600)}.button.button--link:active:not(.button--disabled){color:var(--six-color-action-light-to-be-defined)}.button.button--danger{background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);color:var(--six-color-white)}.button.button--danger.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--danger:hover:not(.button--disabled){background-color:var(--six-color-danger-900);border-color:var(--six-color-danger-900)}.button.button--danger:active:not(.button--disabled){background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);opacity:70%}.button.button--warning{background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.button.button--warning.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--warning:hover:not(.button--disabled){background-color:var(--six-color-warning-800);border-color:var(--six-color-warning-800)}.button.button--warning:active:not(.button--disabled){background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);opacity:70%}.button.button--success{background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.button.button--success.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--success:hover:not(.button--disabled){background-color:var(--six-color-success-600);border-color:var(--six-color-success-600)}.button.button--success:active:not(.button--disabled){background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);opacity:70%}.button.button--action{background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);color:var(--six-color-white)}.button.button--action.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--action:hover:not(.button--disabled){background-color:var(--six-color-action-600);border-color:var(--six-color-action-600)}.button.button--action:active:not(.button--disabled){background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);opacity:70%}.button.button--action-outline{border-color:var(--six-color-action-500);background-color:var(--six-color-white);color:var(--six-color-action-500)}.button.button--action-outline.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--action-outline:hover:not(.button--disabled){background-color:var(--six-color-web-rock-100)}.button.button--action-outline:active:not(.button--disabled){border-color:var(--six-color-action-500);opacity:70%}.button--small{font-size:var(--six-button-font-size-small);height:var(--six-height-small);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2)}.button--medium{font-size:var(--six-button-font-size-medium);height:var(--six-height-medium);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2)}.button--large{font-size:var(--six-button-font-size-large);height:var(--six-height-large);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2)}.button--pill.button--small{border-radius:var(--six-height-small)}.button--pill.button--medium{border-radius:var(--six-height-medium)}.button--pill.button--large{border-radius:var(--six-height-large)}.button--circle{padding-left:0;padding-right:0;font-size:revert}.button--circle.button--small{width:var(--six-height-small);border-radius:50%}.button--circle.button--medium{width:var(--six-height-medium);border-radius:50%}.button--circle.button--large{width:var(--six-height-large);border-radius:50%}.button--circle .button__prefix,.button--circle .button__suffix,.button--circle .button__caret{display:none}.button--circle .button__prefix svg,.button--circle .button__suffix svg,.button--circle .button__caret svg{color:var(--six-color-web-rock-900)}.button--caret .button__suffix{display:none}.button--caret .button__caret{display:flex;align-items:center}.button--caret .button__caret svg{color:var(--six-color-web-rock-900);width:1em;height:1em}.button--primary .button__caret svg,.button--action .button__caret svg,.button--danger .button__caret svg{color:var(--six-color-white)}.button--loading{position:relative;cursor:wait}.button--loading .button__prefix,.button--loading .button__label,.button--loading .button__suffix,.button--loading .button__caret{visibility:hidden}.button--loading six-spinner{--indicator-color:currentColor;position:absolute;height:1em;width:1em;top:calc(50% - 0.5em);left:calc(50% - 0.5em)}.button ::slotted(six-badge){position:absolute;top:0;right:0;transform:translateY(-50%) translateX(50%);pointer-events:none}.button--has-label.button--small .button__label{padding:0 var(--six-spacing-small)}.button--has-label.button--medium .button__label{padding:0 var(--six-spacing-medium)}.button--has-label.button--large .button__label{padding:0 var(--six-spacing-large)}.button--has-prefix.button--small{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--small .button__label{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--medium{padding-left:var(--six-spacing-small)}.button--has-prefix.button--medium .button__label{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large .button__label{padding-left:var(--six-spacing-small)}.button--has-suffix.button--small,.button--caret.button--small{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--small .button__label,.button--caret.button--small .button__label{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--medium,.button--caret.button--medium{padding-right:var(--six-spacing-small)}.button--has-suffix.button--medium .button__label,.button--caret.button--medium .button__label{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large,.button--caret.button--large{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large .button__label,.button--caret.button--large .button__label{padding-right:var(--six-spacing-small)}";
+
+const SixButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sixBlur = createEvent(this, "six-button-blur");
+        this.sixFocus = createEvent(this, "six-button-focus");
+        this.hasFocus = false;
+        this.hasLabel = false;
+        this.hasPrefix = false;
+        this.hasSuffix = false;
+        /** The button's type. */
+        this.type = 'primary';
+        /** The button's size. */
+        this.size = 'medium';
+        /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */
+        this.caret = false;
+        /** Set to true to disable the button. */
+        this.disabled = false;
+        /** Set to true to draw the button in a loading state. */
+        this.loading = false;
+        /** Set to true to draw a pill-style button with rounded edges. */
+        this.pill = false;
+        /** Set to true to draw a circle button. */
+        this.circle = false;
+        /** Indicates if activating the button should submit the form. Ignored when `href` is set. */
+        this.submit = false;
+        /** Indicates if activating the button should reset the form. */
+        this.reset = false;
+        /** An optional name for the button. Ignored when `href` is set. */
+        this.name = '';
+        /** An optional value for the button. Ignored when `href` is set. */
+        this.value = '';
+        this.handleSlotChange = () => {
+            this.hasLabel = hasSlot(this.host);
+            this.hasPrefix = hasSlot(this.host, 'prefix');
+            this.hasSuffix = hasSlot(this.host, 'suffix');
+            // set the correct icon size for suffix and prefix icons
+            const prefixIcon = this.host.querySelector('[slot="prefix"]');
+            const suffixIcon = this.host.querySelector('[slot="suffix"]');
+            if ((prefixIcon === null || prefixIcon === void 0 ? void 0 : prefixIcon.tagName.toLowerCase()) === 'six-icon') {
+                prefixIcon.setAttribute('size', this.mapSizeToIconSize(this.size));
+            }
+            if ((suffixIcon === null || suffixIcon === void 0 ? void 0 : suffixIcon.tagName.toLowerCase()) === 'six-icon') {
+                suffixIcon.setAttribute('size', this.mapSizeToIconSize(this.size));
+            }
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+            this.sixBlur.emit();
+        };
+        this.handleFocus = () => {
+            this.hasFocus = true;
+            this.sixFocus.emit();
+        };
+        this.handleClick = (event) => {
+            if (this.disabled || this.loading) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            if (this.submit) {
+                event.preventDefault();
+                submitForm(this.host);
+            }
+        };
+    }
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
+    /** Sets focus on the button. */
+    async setFocus(options) {
+        var _a;
+        (_a = this.nativeButton) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
+    /** Removes focus from the button. */
+    async removeFocus() {
+        var _a;
+        (_a = this.nativeButton) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    mapSizeToIconSize(buttonSize) {
+        const sizeMap = {
+            small: 'xSmall',
+            medium: 'small',
+            large: 'medium',
+        };
+        return sizeMap[buttonSize] || 'small'; // Default to small
+    }
+    render() {
+        const isLink = this.href != null;
+        const isButton = !isLink;
+        const Button = isLink ? 'a' : 'button';
+        return (h("div", { key: 'c8cdb43580af7e80984c0cbf86f269b2726ef7c0', onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, h(Button, { key: '8daeb79358745e4cb021870fdb21ba83db9d6861', ref: (el) => (this.nativeButton = el), part: "base", class: {
+                button: true,
+                // Types
+                'button--secondary': this.type === 'secondary',
+                'button--primary': this.type === 'primary',
+                'button--link': this.type === 'link',
+                'button--success': this.type === 'success',
+                'button--warning': this.type === 'warning',
+                'button--danger': this.type === 'danger',
+                'button--action': this.type === 'action',
+                'button--action-outline': this.type === 'action-outline',
+                // Sizes
+                'button--small': this.size === 'small',
+                'button--medium': this.size === 'medium',
+                'button--large': this.size === 'large',
+                // Modifiers
+                'button--caret': this.caret,
+                'button--circle': this.circle,
+                'button--disabled': this.disabled,
+                'button--focused': this.hasFocus,
+                'button--loading': this.loading,
+                'button--pill': this.pill,
+                'button--has-label': this.hasLabel,
+                'button--has-prefix': this.hasPrefix,
+                'button--has-suffix': this.hasSuffix,
+            }, disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined, name: isButton ? this.name : undefined, value: isButton ? this.value : undefined, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, "data-testid": "button" }, h("span", { key: '703ca93447400bc9ec12ea9bf1ba36abd324e1cc', part: "prefix", class: "button__prefix" }, h("slot", { key: '0a2c7a1148878d455b7d1b6785729c62eda396d6', onSlotchange: this.handleSlotChange, name: "prefix" })), h("span", { key: '74e8386afffae9cba1a72ce52a4ee75da72abdcd', part: "label", class: "button__label" }, h("slot", { key: 'ce6e54dfc9e280efa178f009e556669ccf6f45b6', onSlotchange: this.handleSlotChange })), h("span", { key: '42b0f3b72007f57caa2a7a745f628a395c999f9a', part: "suffix", class: "button__suffix" }, h("slot", { key: '4741a3a3eeffb36182eb93005afca98522983ef1', onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (h("span", { key: '3c5a5e7e2b0ed436d6576888eed7999eb50395c3', part: "caret", class: "button__caret" }, h("svg", { key: '82a715a604bd7ed1ab8242cd3994d67dfeba9e1d', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '5c870552f2138305088348ed5e3e3b787a5b598c', points: "6 9 12 15 18 9" })))), this.loading && h("six-spinner", { key: '4267336c2eb4b8bd71567d1a7ec4ee3f32362c2f' }))));
+    }
+    get host() { return getElement(this); }
+};
+SixButton.style = sixButtonCss;
+
+const sixSpinnerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--stroke-width:2px;display:inline-flex;font-size:40px}.spinner{display:inline-block;width:1em;height:1em;border-radius:50%;border:solid var(--stroke-width) var(--track-color);border-top-color:var(--indicator-color);border-right-color:var(--indicator-color);animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.six-spinner{display:inline-block;width:1em;height:1em;line-height:0}.six-spinner__container svg{display:block}.six-spinner path{stroke-dashoffset:70px;stroke-dasharray:70, 444;-webkit-animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite}.six-spinner polygon{stroke-dasharray:310;stroke-dashoffset:310;animation:big-polygon-draw 2s ease-in-out infinite;-webkit-animation:big-polygon-draw 2s ease-in-out infinite}.six-spinner polygon:nth-child(2),.six-spinner polygon:nth-child(3){stroke-dasharray:110;stroke-dashoffset:110;animation:small-polygon-draw 2s ease-in-out infinite;-webkit-animation:small-polygon-draw 2s ease-in-out infinite}@keyframes big-polygon-draw{0%,100%{stroke-dashoffset:310}50%{stroke-dashoffset:140}}@-webkit-keyframes big-polygon-draw{0%,100%{stroke-dashoffset:310}50%{stroke-dashoffset:140}}@keyframes small-polygon-draw{0%,100%{stroke-dashoffset:110}50%{stroke-dashoffset:50}}@-webkit-keyframes small-polygon-draw{0%,100%{stroke-dashoffset:110}50%{stroke-dashoffset:50}}@-webkit-keyframes six-spinner{to{stroke-dashoffset:-444}}@keyframes six-spinner{to{stroke-dashoffset:-444}}";
+
+const SixSpinner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Renders a container with a given SVG content.
+     */
+    renderWrapper(content) {
+        return (h("span", { class: "six-spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { class: "six-spinner__container" }, content)));
+    }
+    /**
+     * Renders the SIX logo spinner.
+     */
+    renderSIXLogo() {
+        const sixLogo = (h("svg", { viewBox: "0 0 40 40", part: "svg" }, h("path", { fill: "none", stroke: "#de3919", "stroke-width": "5", "stroke-linecap": "round", d: "M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42" })));
+        return this.renderWrapper(sixLogo);
+    }
+    /**
+     * Renders the BME logo spinner.
+     */
+    renderBMELogo() {
+        const bmeLogo = (h("svg", { viewBox: "0 0 45 55", part: "svg" }, h("polygon", { fill: "none", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", points: "4.42 51.96 17.02 31.473 2 31.473 2 22.486 17.02 22.486 4.42 2 15.404 2 30.289 26.98 14.763 51.96 4.42 51.96" }), h("polygon", { fill: "none", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", points: "42 51.96 31.655 51.96 24.598 40.498 29.831 32.073 42 51.96" }), h("polygon", { fill: "none", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", points: "24.518 12.719 31.014 2 42 2 29.831 21.637 24.518 12.719" })));
+        return this.renderWrapper(bmeLogo);
+    }
+    /**
+     * Renders a simple spinner.
+     */
+    renderSimpleSpinner() {
+        return h("span", { part: "base", class: "spinner", "aria-busy": "true", "aria-live": "polite" });
+    }
+    render() {
+        // Check the deprecated `six` property first
+        if (this.six) {
+            console.warn('The "six" prop is deprecated. Use "logo=\'six\'" instead.');
+            return this.renderSIXLogo();
+        }
+        switch (this.logo) {
+            case 'six':
+                return this.renderSIXLogo();
+            case 'bme':
+                return this.renderBMELogo();
+            default:
+                return this.renderSimpleSpinner();
+        }
+    }
+};
+SixSpinner.style = sixSpinnerCss;
+
+export { SixButton as six_button, SixSpinner as six_spinner };
+//# sourceMappingURL=six-button.six-spinner.entry.js.map
+
+//# sourceMappingURL=six-button_2.entry.js.map

package/dist/esm/six-button_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-button.six-spinner.entry.js","mappings":"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","names":[],"sources":["src/components/six-button/six-button.scss?tag=six-button&encapsulation=shadow","src/components/six-button/six-button.tsx","src/components/six-spinner/six-spinner.scss?tag=six-spinner&encapsulation=shadow","src/components/six-spinner/six-spinner.tsx"],"sourcesContent":["@import '../../../src/global/component';\n\n:host {\n  display: inline-block;\n  width: auto;\n  cursor: pointer;\n}\n\n.button {\n  display: inline-flex;\n  align-items: stretch;\n  justify-content: center;\n  width: 100%;\n  border-style: solid;\n  border-width: var(--six-border-width);\n  border-radius: 0;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-font-weight-semibold);\n  text-decoration: none;\n  user-select: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  padding: 0;\n  transition:\n    var(--six-transition-fast) background-color,\n    var(--six-transition-fast) color,\n    var(--six-transition-fast) border,\n    var(--six-transition-fast) box-shadow;\n  cursor: inherit;\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &.button--disabled {\n    pointer-events: none;\n  }\n\n  ::slotted(six-icon) {\n    // Clicks on icons shouldn't prevent the button from gaining focus\n    pointer-events: none;\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n}\n\n.button-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.button__prefix,\n.button__suffix {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Standard buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button {\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\n  }\n\n  &.button--secondary {\n    background-color: var(--six-color-white);\n    border-color: var(--six-color-web-rock-900);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-100);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-300);\n      border-color: var(--six-color-web-rock-900);\n      border-width: 1px;\n    }\n  }\n\n  &.button--primary {\n    background-color: var(--six-color-web-rock-900);\n    border-color: var(--six-color-web-rock-900);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-800);\n      border-color: var(--six-color-web-rock-800);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-900);\n      border-color: var(--six-color-web-rock-900);\n      opacity: 70%;\n    }\n  }\n\n  &.button--link {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--six-color-action-500);\n\n    &.button--disabled {\n      color: var(--six-color-web-rock-400);\n    }\n\n    &:hover:not(.button--disabled) {\n      color: var(--six-color-action-600);\n    }\n\n    &:active:not(.button--disabled) {\n      color: var(--six-color-action-light-to-be-defined);\n    }\n  }\n\n  &.button--danger {\n    background-color: var(--six-color-danger-800);\n    border-color: var(--six-color-danger-800);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-danger-900);\n      border-color: var(--six-color-danger-900);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-danger-800);\n      border-color: var(--six-color-danger-800);\n      opacity: 70%;\n    }\n  }\n\n  &.button--warning {\n    background-color: var(--six-color-warning-700);\n    border-color: var(--six-color-warning-700);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-warning-800);\n      border-color: var(--six-color-warning-800);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-warning-700);\n      border-color: var(--six-color-warning-700);\n      opacity: 70%;\n    }\n  }\n\n  &.button--success {\n    background-color: var(--six-color-success-500);\n    border-color: var(--six-color-success-500);\n    color: var(--six-color-web-rock-900);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-success-600);\n      border-color: var(--six-color-success-600);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-success-500);\n      border-color: var(--six-color-success-500);\n      opacity: 70%;\n    }\n  }\n\n  &.button--action {\n    background-color: var(--six-color-action-500);\n    border-color: var(--six-color-action-500);\n    color: var(--six-color-white);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-action-600);\n      border-color: var(--six-color-action-600);\n    }\n\n    &:active:not(.button--disabled) {\n      background-color: var(--six-color-action-500);\n      border-color: var(--six-color-action-500);\n      opacity: 70%;\n    }\n  }\n\n  &.button--action-outline {\n    border-color: var(--six-color-action-500);\n    background-color: var(--six-color-white);\n    color: var(--six-color-action-500);\n\n    &.button--disabled {\n      background-color: var(--six-color-web-rock-400);\n      border-color: var(--six-color-web-rock-400);\n      color: var(--six-color-web-rock-700);\n    }\n\n    &:hover:not(.button--disabled) {\n      background-color: var(--six-color-web-rock-100);\n    }\n\n    &:active:not(.button--disabled) {\n      border-color: var(--six-color-action-500);\n      opacity: 70%;\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--small {\n  font-size: var(--six-button-font-size-small);\n  height: var(--six-height-small);\n  line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n}\n\n.button--medium {\n  font-size: var(--six-button-font-size-medium);\n  height: var(--six-height-medium);\n  line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n}\n\n.button--large {\n  font-size: var(--six-button-font-size-large);\n  height: var(--six-height-large);\n  line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--pill {\n  &.button--small {\n    border-radius: var(--six-height-small);\n  }\n\n  &.button--medium {\n    border-radius: var(--six-height-medium);\n  }\n\n  &.button--large {\n    border-radius: var(--six-height-large);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Circle modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--circle {\n  padding-left: 0;\n  padding-right: 0;\n  font-size: revert;\n\n  &.button--small {\n    width: var(--six-height-small);\n    border-radius: 50%;\n  }\n\n  &.button--medium {\n    width: var(--six-height-medium);\n    border-radius: 50%;\n  }\n\n  &.button--large {\n    width: var(--six-height-large);\n    border-radius: 50%;\n  }\n\n  .button__prefix,\n  .button__suffix,\n  .button__caret {\n    display: none;\n\n    svg {\n      color: var(--six-color-web-rock-900);\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Caret modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--caret {\n  .button__suffix {\n    display: none;\n  }\n\n  .button__caret {\n    display: flex;\n    align-items: center;\n\n    svg {\n      color: var(--six-color-web-rock-900);\n      width: 1em;\n      height: 1em;\n    }\n  }\n}\n\n.button--primary,\n.button--action,\n.button--danger {\n  .button__caret {\n    svg {\n      color: var(--six-color-white);\n    }\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Loading modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--loading {\n  position: relative;\n  cursor: wait;\n\n  .button__prefix,\n  .button__label,\n  .button__suffix,\n  .button__caret {\n    visibility: hidden;\n  }\n\n  six-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Badges\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button ::slotted(six-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translateY(-50%) translateX(50%);\n  pointer-events: none;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Button spacing\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--has-label {\n  &.button--small .button__label {\n    padding: 0 var(--six-spacing-small);\n  }\n\n  &.button--medium .button__label {\n    padding: 0 var(--six-spacing-medium);\n  }\n\n  &.button--large .button__label {\n    padding: 0 var(--six-spacing-large);\n  }\n}\n\n.button--has-prefix {\n  &.button--small {\n    padding-left: var(--six-spacing-x-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-x-small);\n    }\n  }\n\n  &.button--medium {\n    padding-left: var(--six-spacing-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-small);\n    }\n  }\n\n  &.button--large {\n    padding-left: var(--six-spacing-small);\n\n    .button__label {\n      padding-left: var(--six-spacing-small);\n    }\n  }\n}\n\n.button--has-suffix,\n.button--caret {\n  &.button--small {\n    padding-right: var(--six-spacing-x-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-x-small);\n    }\n  }\n\n  &.button--medium {\n    padding-right: var(--six-spacing-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-small);\n    }\n  }\n\n  &.button--large {\n    padding-right: var(--six-spacing-small);\n\n    .button__label {\n      padding-right: var(--six-spacing-small);\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { submitForm } from '../../utils/form';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The button's label.\n * @slot prefix - Used to prepend an icon or similar element to the button.\n * @slot suffix - Used to append an icon or similar element to the button.\n *\n * @part base - The component's base wrapper.\n * @part prefix - The prefix container.\n * @part label - The button's label.\n * @part suffix - The suffix container.\n * @part caret - The button's caret.\n */\n\n@Component({\n  tag: 'six-button',\n  styleUrl: 'six-button.scss',\n  shadow: true,\n})\nexport class SixButton {\n  private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n\n  @Element() host!: HTMLSixButtonElement;\n\n  @State() hasFocus = false;\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n\n  /** The button's type. */\n  @Prop({ reflect: true }) type:\n    | 'secondary'\n    | 'primary'\n    | 'link'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'action'\n    | 'action-outline' = 'primary';\n\n  /** The button's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */\n  @Prop() caret = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Set to true to draw the button in a loading state. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Set to true to draw a pill-style button with rounded edges. */\n  @Prop({ reflect: true }) pill = false;\n\n  /** Set to true to draw a circle button. */\n  @Prop({ reflect: true }) circle = false;\n\n  /** Indicates if activating the button should submit the form. Ignored when `href` is set. */\n  @Prop({ reflect: true }) submit = false;\n\n  /** Indicates if activating the button should reset the form. */\n  @Prop({ reflect: true }) reset = false;\n\n  /** An optional name for the button. Ignored when `href` is set. */\n  @Prop() name = '';\n\n  /** An optional value for the button. Ignored when `href` is set. */\n  @Prop() value = '';\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @Prop() href?: string;\n\n  /** Tells the browser where to open the link. Only used when `href` is set. */\n  @Prop() target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */\n  @Prop() download?: string;\n\n  /** Emitted when the button loses focus. */\n  @Event({ eventName: 'six-button-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the button gains focus. */\n  @Event({ eventName: 'six-button-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeButton?.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.nativeButton?.blur();\n  }\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlot(this.host);\n    this.hasPrefix = hasSlot(this.host, 'prefix');\n    this.hasSuffix = hasSlot(this.host, 'suffix');\n\n    // set the correct icon size for suffix and prefix icons\n    const prefixIcon = this.host.querySelector('[slot=\"prefix\"]');\n    const suffixIcon = this.host.querySelector('[slot=\"suffix\"]');\n\n    if (prefixIcon?.tagName.toLowerCase() === 'six-icon') {\n      prefixIcon.setAttribute('size', this.mapSizeToIconSize(this.size));\n    }\n\n    if (suffixIcon?.tagName.toLowerCase() === 'six-icon') {\n      suffixIcon.setAttribute('size', this.mapSizeToIconSize(this.size));\n    }\n  };\n\n  private mapSizeToIconSize(buttonSize: 'small' | 'medium' | 'large'): string {\n    const sizeMap = {\n      small: 'xSmall',\n      medium: 'small',\n      large: 'medium',\n    };\n    return sizeMap[buttonSize] || 'small'; // Default to small\n  }\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    if (this.submit) {\n      event.preventDefault();\n      submitForm(this.host);\n    }\n  };\n\n  render() {\n    const isLink = this.href != null;\n    const isButton = !isLink;\n    const Button = isLink ? 'a' : 'button';\n\n    return (\n      <div onClick={this.handleClick} class={{ 'button-wrapper--disabled': this.disabled }}>\n        <Button\n          ref={(el) => (this.nativeButton = el)}\n          part=\"base\"\n          class={{\n            button: true,\n\n            // Types\n            'button--secondary': this.type === 'secondary',\n            'button--primary': this.type === 'primary',\n            'button--link': this.type === 'link',\n            'button--success': this.type === 'success',\n            'button--warning': this.type === 'warning',\n            'button--danger': this.type === 'danger',\n            'button--action': this.type === 'action',\n            'button--action-outline': this.type === 'action-outline',\n\n            // Sizes\n            'button--small': this.size === 'small',\n            'button--medium': this.size === 'medium',\n            'button--large': this.size === 'large',\n\n            // Modifiers\n            'button--caret': this.caret,\n            'button--circle': this.circle,\n            'button--disabled': this.disabled,\n            'button--focused': this.hasFocus,\n            'button--loading': this.loading,\n            'button--pill': this.pill,\n            'button--has-label': this.hasLabel,\n            'button--has-prefix': this.hasPrefix,\n            'button--has-suffix': this.hasSuffix,\n          }}\n          disabled={isButton ? this.disabled : undefined}\n          tabindex={this.disabled ? '-1' : undefined}\n          type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined}\n          name={isButton ? this.name : undefined}\n          value={isButton ? this.value : undefined}\n          href={isLink ? this.href : undefined}\n          target={isLink && this.target != null ? this.target : undefined}\n          download={isLink && this.download != null ? this.download : undefined}\n          rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          data-testid=\"button\"\n        >\n          <span part=\"prefix\" class=\"button__prefix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"prefix\" />\n          </span>\n          <span part=\"label\" class=\"button__label\">\n            <slot onSlotchange={this.handleSlotChange} />\n          </span>\n          <span part=\"suffix\" class=\"button__suffix\">\n            <slot onSlotchange={this.handleSlotChange} name=\"suffix\" />\n          </span>\n          {this.caret && (\n            <span part=\"caret\" class=\"button__caret\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"6 9 12 15 18 9\" />\n              </svg>\n            </span>\n          )}\n\n          {this.loading && <six-spinner />}\n        </Button>\n      </div>\n    );\n  }\n}\n","@import 'src/global/component';\n\n/**\n * @prop --track-color: The color of the spinner's track.\n * @prop --indicator-color: The color of the spinner's indicator.\n * @prop --stroke-width: The width of the indicator.\n */\n:host {\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n  --stroke-width: 2px;\n\n  display: inline-flex;\n  font-size: 40px;\n}\n\n.spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border-radius: 50%;\n  border: solid var(--stroke-width) var(--track-color);\n  border-top-color: var(--indicator-color);\n  border-right-color: var(--indicator-color);\n  animation: 1s linear infinite spin;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.six-spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  line-height: 0;\n\n  &__container svg {\n    display: block;\n  }\n\n  path {\n    stroke-dashoffset: 70px;\n    stroke-dasharray: 70, 444;\n    -webkit-animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n    animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n  }\n\n  polygon {\n    stroke-dasharray: 310;\n    stroke-dashoffset: 310;\n    animation: big-polygon-draw 2s ease-in-out infinite;\n    -webkit-animation: big-polygon-draw 2s ease-in-out infinite;\n  }\n\n  polygon:nth-child(2),\n  polygon:nth-child(3) {\n    stroke-dasharray: 110;\n    stroke-dashoffset: 110;\n    animation: small-polygon-draw 2s ease-in-out infinite;\n    -webkit-animation: small-polygon-draw 2s ease-in-out infinite;\n  }\n\n  @keyframes big-polygon-draw {\n    0%,\n    100% {\n      stroke-dashoffset: 310;\n    }\n    50% {\n      stroke-dashoffset: 140;\n    }\n  }\n\n  @-webkit-keyframes big-polygon-draw {\n    0%,\n    100% {\n      stroke-dashoffset: 310;\n    }\n    50% {\n      stroke-dashoffset: 140;\n    }\n  }\n\n  @keyframes small-polygon-draw {\n    0%,\n    100% {\n      stroke-dashoffset: 110;\n    }\n    50% {\n      stroke-dashoffset: 50;\n    }\n  }\n\n  @-webkit-keyframes small-polygon-draw {\n    0%,\n    100% {\n      stroke-dashoffset: 110;\n    }\n    50% {\n      stroke-dashoffset: 50;\n    }\n  }\n\n  @-webkit-keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n\n  @keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n * @part svg - The spinner icon.\n */\n@Component({\n  tag: 'six-spinner',\n  styleUrl: 'six-spinner.scss',\n  shadow: true,\n})\nexport class SixSpinner {\n  /** Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner. */\n  @Prop() logo?: 'six' | 'bme';\n  /**\n   * **@deprecated** Use `logo=\"six\"` instead.\n   *\n   * If set to true, the spinner displays the SIX logo.\n   */\n  @Prop() six?: boolean;\n\n  /**\n   * Renders a container with a given SVG content.\n   */\n  private renderWrapper(content: SVGElement) {\n    return (\n      <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"six-spinner__container\">{content}</div>\n      </span>\n    );\n  }\n\n  /**\n   * Renders the SIX logo spinner.\n   */\n  private renderSIXLogo() {\n    const sixLogo = (\n      <svg viewBox=\"0 0 40 40\" part=\"svg\">\n        <path\n          fill=\"none\"\n          stroke=\"#de3919\"\n          stroke-width=\"5\"\n          stroke-linecap=\"round\"\n          d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\"\n        ></path>\n      </svg>\n    );\n    return this.renderWrapper(sixLogo);\n  }\n\n  /**\n   * Renders the BME logo spinner.\n   */\n  private renderBMELogo() {\n    const bmeLogo = (\n      <svg viewBox=\"0 0 45 55\" part=\"svg\">\n        <polygon\n          fill=\"none\"\n          stroke=\"black\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          points=\"4.42 51.96 17.02 31.473 2 31.473 2 22.486 17.02 22.486 4.42 2 15.404 2 30.289 26.98 14.763 51.96 4.42 51.96\"\n        />\n        <polygon\n          fill=\"none\"\n          stroke=\"black\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          points=\"42 51.96 31.655 51.96 24.598 40.498 29.831 32.073 42 51.96\"\n        />\n        <polygon\n          fill=\"none\"\n          stroke=\"black\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          points=\"24.518 12.719 31.014 2 42 2 29.831 21.637 24.518 12.719\"\n        />\n      </svg>\n    );\n    return this.renderWrapper(bmeLogo);\n  }\n\n  /**\n   * Renders a simple spinner.\n   */\n  private renderSimpleSpinner() {\n    return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n  }\n\n  render() {\n    // Check the deprecated `six` property first\n    if (this.six) {\n      console.warn('The \"six\" prop is deprecated. Use \"logo=\\'six\\'\" instead.');\n      return this.renderSIXLogo();\n    }\n\n    switch (this.logo) {\n      case 'six':\n        return this.renderSIXLogo();\n      case 'bme':\n        return this.renderBMELogo();\n      default:\n        return this.renderSimpleSpinner();\n    }\n  }\n}\n"],"version":3}

package/dist/esm/six-card.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-D0Go1Zjj.js';
+import { r as registerInstance, h, H as Host } from './index-JoG9I7EO.js';
 
 const sixCardCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block;box-shadow:var(--six-shadow-medium);border:1px solid var(--six-color-web-rock-100);padding:var(--six-spacing-medium)}";
 
@@ -7,7 +7,7 @@ const SixCard = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'd2459e12a9f8274f095a3d09a077c59a7f091dea' }, h("slot", { key: '1619a201af796250d6808a0974047644e7fb6a69' })));
+        return (h(Host, { key: '9a56f190ccdf8545c4503284ae32a23220e1af37' }, h("slot", { key: 'db6e7fe7d83c4e41747ad39a85bf108ce581ae87' })));
     }
 };
 SixCard.style = sixCardCss;

package/dist/esm/six-checkbox_2.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-D0Go1Zjj.js';
-import { F as FormControl } from './form-control-D_uS8E6o.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-JoG9I7EO.js';
+import { F as FormControl } from './form-control-DI6V1ZhR.js';
 import { h as hasSlot, a as getTextContent } from './slot-j3oIB5oT.js';
 import { E as EventListeners } from './event-listeners-C4h4qpGl.js';
 
@@ -113,14 +113,14 @@ const SixCheckbox = class {
         this.hasErrorSlot = hasSlot(this.host, 'error-text');
     }
     render() {
-        return (h(FormControl, { key: 'fb33e858f751205c8df374f3bcca37cec9f8203b', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, hasErrorTextSlot: this.hasErrorSlot, errorText: this.errorText, errorTextCount: this.errorTextCount, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { key: '35bfda441fe651af25cb45d75d003919c7869ae2', part: "base", class: {
+        return (h(FormControl, { key: '1ed8885c3a37d420684480a982a38944ca869a1a', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, hasErrorTextSlot: this.hasErrorSlot, errorText: this.errorText, errorTextCount: this.errorTextCount, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { key: '36a5a7bcfdd28499e70fcd432a38fc89cb48ce64', part: "base", class: {
                 checkbox: true,
                 'checkbox--checked': this.checked,
                 'checkbox--disabled': this.disabled,
                 'checkbox--focused': this.hasFocus,
                 'checkbox--invalid': this.invalid,
                 'checkbox--indeterminate': this.indeterminate,
-            }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown }, h("span", { key: '92d31ea45a0f1f45230def64e15bd0e81c4de140', part: "control", class: "checkbox__control" }, this.checked && (h("span", { key: '49501ea788463f4d39c5500349ace013c21d31c2', part: "checked-icon", class: "checkbox__icon" }, h("svg", { key: '8ae0e9bfe850b13a205722a5e17e90b21ad35f26', viewBox: "0 0 16 16" }, h("g", { key: '463b4761b130e5e9377efb7e26f57218ce5249ad', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { key: '147d4348146dcace57835e436453bc834763c464', stroke: "currentColor", "stroke-width": "2" }, h("g", { key: '6596f4cd75b94d8ff3bef19698acc56a6eab847a', transform: "translate(3.428571, 3.428571)" }, h("path", { key: '453cfb8ae9d6d4e45f1b569e06ba79ac2a0d2b9c', d: "M0,5.71428571 L3.42857143,9.14285714" }), h("path", { key: 'b650801a5ae8fde8886b9e1fb4257eca704beabd', d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (h("span", { key: 'ab31b1999eae88b74c5bdeb1bbc1007b0459f8a8', part: "indeterminate-icon", class: "checkbox__icon" }, h("svg", { key: '8d5cf52fc16243531056ba760d9c770decd593e3', viewBox: "0 0 16 16" }, h("g", { key: 'fb8ee93f8ec5abc82f8d982cc2ad59c4ae77fb91', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { key: '825161dbc71cfc395061b3ef485352762c8780c5', stroke: "currentColor", "stroke-width": "2" }, h("g", { key: 'c5541fd6e2d69a376278cd617447a8b9bfe6a0d6', transform: "translate(2.285714, 6.857143)" }, h("path", { key: '6c1f488d0572c2773b8497cd6214dcfdc64164ef', d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), h("input", { key: '2e8ac6e459e47708116702585a5155ee4385d021', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: '817dae0dcffedf7de011d0fa68ce3a1ca45bbd3a', part: "text", id: this.textId, class: "checkbox__text" }, h("slot", { key: 'e0f9b77cf11c592efd6b312888491a3b5e84bb32' })))));
+            }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown }, h("span", { key: '837373ab4ae9a6f90852f4d9176ac6e844d31579', part: "control", class: "checkbox__control" }, this.checked && (h("span", { key: 'f7d9c7ba567ee2d28913714cfb8fdb972e0b9f25', part: "checked-icon", class: "checkbox__icon" }, h("svg", { key: '2193316f61d53f3302e14a43b587b07778ae590e', viewBox: "0 0 16 16" }, h("g", { key: '36990bcb579ade7b26a26d6b93a8dd4f8226781e', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { key: '712be85f8623db8f143ef64f9c44b6433a530eab', stroke: "currentColor", "stroke-width": "2" }, h("g", { key: 'e716ffab7308468ccc86b294d0052428a2ca0602', transform: "translate(3.428571, 3.428571)" }, h("path", { key: 'a2ca8e37d8ff88bf94adfc7af850c447b9a4e9b4', d: "M0,5.71428571 L3.42857143,9.14285714" }), h("path", { key: '82f92da775cb1e49281eaee37792e326c5b41a60', d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (h("span", { key: 'b852b9c3dc0d083d9ba3b9f24c2f8f93f42bfe9b', part: "indeterminate-icon", class: "checkbox__icon" }, h("svg", { key: '2f888c93c3a69846ef8d96858f9064c7da02f37d', viewBox: "0 0 16 16" }, h("g", { key: '33828186ba162b59f88d3528453e497c59ea5211', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { key: 'a71f0a3498aa7cab1e9be14f07558813b8f4b287', stroke: "currentColor", "stroke-width": "2" }, h("g", { key: '2ff1a113d888f14358845323cccae4b9d8bbd1e0', transform: "translate(2.285714, 6.857143)" }, h("path", { key: '737d8c10e532a2037e20997d5f41cc99fa84dc03', d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), h("input", { key: '0fef28fe71ba5263a33eadda6a63329b3d2bec1f', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: 'db92ca95a892368e88b2aecfeff53a54eb5cc683', part: "text", id: this.textId, class: "checkbox__text" }, h("slot", { key: 'c2f6c9778b16dc344ad342254ef9ff2b624334f1' })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -187,13 +187,13 @@ const SixMenuItem = class {
         this.hasFocus = false;
     }
     render() {
-        return (h("div", { key: '1272ddcb536f11b8362d2d6050e7e022f2c57601', ref: (el) => (this.menuItem = el), part: "base", class: {
+        return (h("div", { key: '068b0e516f28354bf1e0e6171fd5a57c42e6805d', ref: (el) => (this.menuItem = el), part: "base", class: {
                 'menu-item': true,
                 'menu-item--checked': this.checked,
                 'menu-item--disabled': this.disabled,
                 'menu-item--focused': this.hasFocus,
                 'menu-item--active': this.active,
-            }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.checkType === 'checkbox' && (h("span", { key: '433f8c7ea79197d6881f02d5daad580cdc45ad75', class: "menu-item__checkbox" }, h("six-checkbox", { key: 'a2bb3ef76de46374e058f814723ae2e601d9d12e', "onSix-checkbox-change": this.handleCheckboxChange, disabled: this.disabled, checked: this.checked }))), h("span", { key: '7e068c6cca0e53ecac63a461945d13b3a157e9e6', part: "prefix", class: "menu-item__prefix" }, h("slot", { key: '4a8b59e044ec0d20fa96a4f2c8dabcc697e24641', name: "prefix" })), h("span", { key: '9d33d8597e12e94d6b4da75480bf034053124e34', part: "label", class: "menu-item__label" }, h("slot", { key: 'eb1f6a5ac3dd253c3844b7b2f1abd8eab5d8e2f7', ref: (el) => (this.defaultSlot = el) })), h("span", { key: 'dafb3d36a73291eb05e3bb53744204400f0cde66', part: "suffix", class: "menu-item__suffix" }, h("slot", { key: 'b544b01d90f3a5ab49a99ca39b4abc622fed87c1', name: "suffix" })), this.checkType === 'check' && (h("span", { key: 'f7dc2836cbd13a851db43967f9e1f4334937f19e', part: "checked-icon", class: "menu-item__check" }, h("six-icon", { key: 'db186867ab833a1064f091d592f4c39675a9aeeb', size: "small", "aria-hidden": "true" }, "check")))));
+            }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.checkType === 'checkbox' && (h("span", { key: '2a4a44cc50eab0f85553779829f194ce2940a8b4', class: "menu-item__checkbox" }, h("six-checkbox", { key: '60db41a831898917a66c5b36a66569ca511d4087', "onSix-checkbox-change": this.handleCheckboxChange, disabled: this.disabled, checked: this.checked }))), h("span", { key: '11ef1aedb06a67538e1a8ffa7ced64f27f554725', part: "prefix", class: "menu-item__prefix" }, h("slot", { key: '698842d190731f589a9d031893c13bb8ee2dc8f4', name: "prefix" })), h("span", { key: '20fda9cdc6b3aef51b7231edda1d6fb48f03dbeb', part: "label", class: "menu-item__label" }, h("slot", { key: 'b564482ff277a47e5f50554755649a7d8e7ebe47', ref: (el) => (this.defaultSlot = el) })), h("span", { key: '437c77e718827d816786159675dec3439ac1c1e4', part: "suffix", class: "menu-item__suffix" }, h("slot", { key: '533be0933a9d597641bc1496c7375b9b36db98bb', name: "suffix" })), this.checkType === 'check' && (h("span", { key: '43b77ffd3510aa1603bc9278c31684c1ecfc711f', part: "checked-icon", class: "menu-item__check" }, h("six-icon", { key: 'a7569cb3d856bac8767c634cb5862c900ce69e45', size: "small", "aria-hidden": "true" }, "check")))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/six-date.entry.js

@@ -1,6 +1,5 @@
-import { h, r as registerInstance, c as createEvent, g as getElement } from './index-D0Go1Zjj.js';
+import { h, r as registerInstance, c as createEvent, g as getElement } from './index-JoG9I7EO.js';
 import { E as EventListeners } from './event-listeners-C4h4qpGl.js';
-import { D as DEFAULT_DEBOUNCE_FAST, d as debounce } from './execution-control-ltzGzaAu.js';
 import { h as hasSlot } from './slot-j3oIB5oT.js';
 import { P as Popover } from './popover-kHci8ddv.js';
 
@@ -22163,7 +22162,7 @@ var dateFnsExports = /*@__PURE__*/ requireDateFns();
  */
 function fromFormattedString(dateString, dateFormat) {
     const date = dateFnsExports.parse(dateString, dateFormat, new Date());
-    if (dateFnsExports.isValid(date) && dateFnsExports.format(date, dateFormat) === dateString) {
+    if (dateFnsExports.isValid(date)) {
         return fromDate(date);
     }
     return undefined;
@@ -22213,6 +22212,38 @@ function toPointerDate(isoDate) {
         day: parseInt(isoDate.slice(8), 10),
     };
 }
+function nextPointerDate(selectionMode, pointerDate) {
+    if (selectionMode === 'day') {
+        if (pointerDate.month === 12) {
+            return { year: pointerDate.year + 1, month: 1, day: 1 };
+        }
+        else {
+            return { year: pointerDate.year, month: pointerDate.month + 1, day: 1 };
+        }
+    }
+    else if (selectionMode === 'month') {
+        return Object.assign(Object.assign({}, pointerDate), { year: pointerDate.year + 1 });
+    }
+    else if (selectionMode === 'year') {
+        return Object.assign(Object.assign({}, pointerDate), { year: pointerDate.year + 25 });
+    }
+    return pointerDate;
+}
+function previousPointerDate(selectionMode, pointerDate) {
+    switch (selectionMode) {
+        case 'day':
+            if (pointerDate.month === 1) {
+                return { year: pointerDate.year - 1, month: 12, day: 1 };
+            }
+            else {
+                return { year: pointerDate.year, month: pointerDate.month - 1, day: 1 };
+            }
+        case 'month':
+            return Object.assign(Object.assign({}, pointerDate), { year: pointerDate.year - 1 });
+        case 'year':
+            return Object.assign(Object.assign({}, pointerDate), { year: pointerDate.year - 25 });
+    }
+}
 function todayAsPointerDate() {
     const today = new Date();
     return {
@@ -22469,6 +22500,11 @@ const SixDate = class {
          */
         this.value = '';
         /** Defines the format pattern for displaying dates and how dates can be entered via keyboard.
+         *
+         * The parser accepts flexible input that doesn't strictly match the format pattern.
+         * Input with missing leading zeros or incomplete years will be automatically normalized.
+         * For example, with the pattern "dd.MM.yyyy": "1.1.2025" becomes "01.01.2025" and
+         * "1.1.225" becomes "01.01.0225".
          *
          * Defaults to "dd.MM.yyyy".
          *
@@ -22491,48 +22527,16 @@ const SixDate = class {
         this.errorText = '';
         /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
         this.invalid = false;
-        /**
-         * Set the amount of time, in milliseconds, to wait to trigger the `six-change` event after each keystroke.
-         */
-        this.debounce = DEFAULT_DEBOUNCE_FAST;
         /** The input's name attribute. */
         this.name = '';
         /** Set to true to add a clear button when the input is populated. */
         this.clearable = false;
         this.panelHideInProgress = false;
         this.handlePreviousClick = () => {
-            switch (this.selectionMode) {
-                case 'day':
-                    if (this.pointerDate.month === 0) {
-                        this.pointerDate = { year: this.pointerDate.year - 1, month: 11, day: 1 };
-                    }
-                    else {
-                        this.pointerDate = { year: this.pointerDate.year, month: this.pointerDate.month - 1, day: 1 };
-                    }
-                    break;
-                case 'month':
-                    this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year - 1 });
-                    break;
-                case 'year':
-                    this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year - NUMBER_OF_YEARS_SHOWN });
-                    break;
-            }
+            this.pointerDate = previousPointerDate(this.selectionMode, this.pointerDate);
         };
         this.handleNextClick = () => {
-            if (this.selectionMode === 'day') {
-                if (this.pointerDate.month === 11) {
-                    this.pointerDate = { year: this.pointerDate.year + 1, month: 0, day: 1 };
-                }
-                else {
-                    this.pointerDate = { year: this.pointerDate.year, month: this.pointerDate.month + 1, day: 1 };
-                }
-            }
-            else if (this.selectionMode === 'month') {
-                this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year + 1 });
-            }
-            else if (this.selectionMode === 'year') {
-                this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year + NUMBER_OF_YEARS_SHOWN });
-            }
+            this.pointerDate = nextPointerDate(this.selectionMode, this.pointerDate);
         };
         this.handleDocumentMouseDown = (event) => {
             const baseElement = this.getSixInputBaseElement();
@@ -22545,12 +22549,6 @@ const SixDate = class {
                 this.sixBlur.emit();
             }
         };
-        this.handleClearClick = () => {
-            this.hide();
-            this.value = '';
-            this.pointerDate = todayAsPointerDate();
-            this.sixChange.emit(this.value);
-        };
         this.handleDayClick = (date) => {
             var _a;
             this.value = date;
@@ -22583,14 +22581,18 @@ const SixDate = class {
             }
             this.sixChange.emit(this.value);
         };
-        this.handleOnBlur = () => {
+        this.handleInputBlur = () => {
             var _a;
             if (((_a = this.popoverHelper) === null || _a === void 0 ? void 0 : _a.isVisible) === false) {
-                if (this.inputElement) {
-                    this.inputElement.value = this.value === '' ? '' : formatDate(this.value, this.dateFormat);
-                }
+                this.updateInputElementValue();
             }
         };
+        this.handleInputClearClick = () => {
+            this.hide();
+            this.value = '';
+            this.pointerDate = todayAsPointerDate();
+            this.sixChange.emit(this.value);
+        };
         this.handleInputKeyDown = (event) => {
             if (event.key === 'Tab') {
                 this.hide();
@@ -22616,6 +22618,7 @@ const SixDate = class {
         if (warning != null) {
             console.warn(warning);
         }
+        this.updateInputElementValue();
     }
     getSixInputBaseElement() {
         var _a, _b;
@@ -22632,9 +22635,7 @@ const SixDate = class {
         var _a, _b;
         if (((_a = this.popoverHelper) === null || _a === void 0 ? void 0 : _a.isVisible) === false)
             return;
-        if (this.inputElement) {
-            this.inputElement.value = this.value === '' ? '' : formatDate(this.value, this.dateFormat);
-        }
+        this.updateInputElementValue();
         this.selectionMode = 'day';
         this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);
         this.panelHideInProgress = true;
@@ -22657,6 +22658,11 @@ const SixDate = class {
             },
         });
     }
+    updateInputElementValue() {
+        if (this.inputElement && document.activeElement !== this.host) {
+            this.inputElement.value = this.value === '' ? '' : formatDate(this.value, this.dateFormat);
+        }
+    }
     connectedCallback() {
         this.initPopover();
         this.updateValueAndPointerDate();
@@ -22664,6 +22670,7 @@ const SixDate = class {
         this.eventListeners.forward('six-blur', 'blur', this.host);
     }
     componentDidLoad() {
+        this.updateInputElementValue();
         this.initPopover();
     }
     disconnectedCallback() {
@@ -22673,7 +22680,7 @@ const SixDate = class {
         this.popoverHelper = undefined;
     }
     render() {
-        return (h("div", { key: '7df1efadccea9e30f96be4edeeae124649fb119e', class: "container" }, h("six-input", { key: 'e76e46d4eade078d2395e39a112426824f6e6ed9', value: this.value === '' ? '' : formatDate(this.value, this.dateFormat), ref: (el) => (this.inputElement = el), placeholder: this.placeholder == null ? this.dateFormat : this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, helpText: this.helpText, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onKeyDown: this.handleInputKeyDown, onInput: debounce(this.handleInputChange, this.debounce), onBlur: this.handleOnBlur, "onSix-input-clear": this.handleClearClick, size: this.size, clearable: this.clearable, "aria-describedby": "date-format" }, h("six-icon", { key: '96e71e847d2696297b13f3fbf332faaa3a05b626', slot: "prefix", size: this.size === 'large' ? 'medium' : this.size }, "today"), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null, hasSlot(this.host, 'help-text') ? (h("span", { slot: "help-text" }, h("slot", { name: "help-text" }))) : null), h("span", { key: 'f065385a9f382c847713aeb0162a7429c1303f66', id: "date-format", class: "sr-only" }, translateFormatHelp(this.language, this.dateFormat)), h("div", { key: 'd0ed8f5babfda44168d349a1340ac4e5f7993e23', ref: (el) => (this.positioner = el), class: "positioner" }, h("div", { key: '27250b4ed9b8fbeacf4104380a3f75b1b395d26c', class: "panel", ref: (el) => (this.panel = el) }, h("header", { key: '5d70aeb04a68fa320cd51d5219bd9d8499bc8099', class: "panel__header" }, h("six-icon-button", { key: '7eb4a255ecb028e2d3f254b3ffc0886995698af7', tabindex: "-1", class: "previous", onClick: this.handlePreviousClick, name: "arrow_back_ios" }), this.selectionMode === 'day' && (h("div", { key: '42e9e6ffbb7ded041cc766a4ecafd9350b1beec1', class: "selector", onClick: () => (this.selectionMode = 'month') }, translateMonth(this.pointerDate.month, this.language), h("six-icon", { key: '72ab31ef4d76739a955253ce718705c171aeffc4' }, "arrow_drop_down"))), this.selectionMode !== 'year' && (h("div", { key: '760255898924358aa99856d211c218aa3ab3bf92', class: "selector", onClick: () => (this.selectionMode = 'year') }, this.pointerDate.year, h("six-icon", { key: 'dbd9d1f346c56e2df6162edaa53a458afe9883db' }, "arrow_drop_down"))), this.selectionMode === 'year' && (h("div", { key: 'd04218a353e377b276388708c86694bca2c97228', class: "selector" }, this.pointerDate.year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2), " \u2013", ' ', this.pointerDate.year + Math.floor(NUMBER_OF_YEARS_SHOWN / 2))), h("six-icon-button", { key: '5a924541cc2f89a2bb76113757c00211c86b3adf', tabindex: "-1", class: "next", onClick: this.handleNextClick, name: "arrow_forward_ios" })), this.selectionMode === 'day' && (h(DaySelection, { key: 'd1e853fd6fcd9d8c74b4d5f8072f998ba081a8c4', language: this.language, calendarGrid: createCalendarGrid({
+        return (h("div", { key: '915708e6b3815709fbf93546453a1527f0e2f4b2', class: "container" }, h("six-input", { key: '7beac04f73a37fba611860890c02a79d5a065fb6', ref: (el) => (this.inputElement = el), placeholder: this.placeholder == null ? this.dateFormat : this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, helpText: this.helpText, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onKeyDown: this.handleInputKeyDown, onInput: this.handleInputChange, onBlur: this.handleInputBlur, "onSix-input-clear": this.handleInputClearClick, size: this.size, clearable: this.clearable, "aria-describedby": "date-format" }, h("six-icon", { key: '88f5d61c8d6af1627be1b9ed5ddf534669cbbedd', slot: "prefix", size: this.size === 'large' ? 'medium' : this.size }, "today"), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null, hasSlot(this.host, 'help-text') ? (h("span", { slot: "help-text" }, h("slot", { name: "help-text" }))) : null), h("span", { key: '36f359e7ed900e6102444dcbf7e7c22b1aac042d', id: "date-format", class: "sr-only" }, translateFormatHelp(this.language, this.dateFormat)), h("div", { key: '560443132d2dbe1f0f2c147c2d0538eb33c7b76a', ref: (el) => (this.positioner = el), class: "positioner" }, h("div", { key: '800d71554bf415d0e39d40696271791785004e7f', class: "panel", ref: (el) => (this.panel = el) }, h("header", { key: '71baa85fece27f99982e5cb06e15c5d89d81f7a1', class: "panel__header" }, h("six-icon-button", { key: '43274a816945112492cb030012f4ecd0f1c6f5f3', tabindex: "-1", class: "previous", onClick: this.handlePreviousClick, name: "arrow_back_ios" }), this.selectionMode === 'day' && (h("div", { key: '2f391850b72291bfb7249bccf2ccf4aea6387340', class: "selector", onClick: () => (this.selectionMode = 'month') }, translateMonth(this.pointerDate.month, this.language), h("six-icon", { key: '95ea49cd1ccbeec9019491799cefb4d31b846f87' }, "arrow_drop_down"))), this.selectionMode !== 'year' && (h("div", { key: '7d65185d34d64361b8addfac6e3a5eb130fcf6b7', class: "selector", onClick: () => (this.selectionMode = 'year') }, this.pointerDate.year, h("six-icon", { key: 'ab5c06e07a09f945e845902588096ce4f906b5bf' }, "arrow_drop_down"))), this.selectionMode === 'year' && (h("div", { key: '9871ad7e39d18fdd5629b0f9d1caf935952d4ca5', class: "selector" }, this.pointerDate.year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2), " \u2013", ' ', this.pointerDate.year + Math.floor(NUMBER_OF_YEARS_SHOWN / 2))), h("six-icon-button", { key: '20bafd71902a85f3db3c3b54628555b0f86e50aa', tabindex: "-1", class: "next", onClick: this.handleNextClick, name: "arrow_forward_ios" })), this.selectionMode === 'day' && (h(DaySelection, { key: '38e23637ec958abf9615adba7900f4ea6b15f27c', language: this.language, calendarGrid: createCalendarGrid({
                 year: this.pointerDate.year,
                 month: this.pointerDate.month,
                 selected: this.value || undefined,
@@ -22681,7 +22688,7 @@ const SixDate = class {
                 maxDate: this.max,
                 dateFormat: this.dateFormat,
                 allowedDates: this.allowedDates,
-            }), dayClicked: this.handleDayClick })), this.selectionMode === 'month' && (h(MonthSelection, { key: '9804ad6d7222024095e7c2d83357506c61d68cfa', language: this.language, selected: this.value, monthClicked: this.handleMonthClicked })), this.selectionMode === 'year' && (h(YearSelection, { key: 'd6f67dacd54f4ca384f7a4a328c4a87b0d95878a', selected: this.value, pointerYear: this.pointerDate.year, yearCount: NUMBER_OF_YEARS_SHOWN, yearClicked: this.handleYearClicked }))))));
+            }), dayClicked: this.handleDayClick })), this.selectionMode === 'month' && (h(MonthSelection, { key: '10ec980d8a5fc1bf6480a96ee5df66abb9b347cb', language: this.language, selected: this.value, monthClicked: this.handleMonthClicked })), this.selectionMode === 'year' && (h(YearSelection, { key: 'ba791467977c55f80781a20774c5e32951641877', selected: this.value, pointerYear: this.pointerDate.year, yearCount: NUMBER_OF_YEARS_SHOWN, yearClicked: this.handleYearClicked }))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {