@six-group/ui-library 0.0.0-insider.573d2eb → 0.0.0-insider.582a2ec

package/dist/components/six-breadcrumbs-item.js

@@ -0,0 +1,58 @@
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
+import { d as defineCustomElement$3 } from './p-BLoBZxyR.js';
+import { d as defineCustomElement$2 } from './p-BTKXuKvc.js';
+
+const sixBreadcrumbsItemCss = ":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{--last-item-color:var(--six-color-web-rock-700);--separator-color:var(--six-color-web-rock-700)}:host::part(label){padding:unset}:host::part(base){display:flex;align-items:center}:host::part(separator){align-items:center;user-select:none;-webkit-user-select:none}:host six-button::part(label){padding-left:var(--six-spacing-xx-small);padding-right:var(--six-spacing-xx-small)}:host([read-only]) six-button::part(base){color:var(--last-item-color)}.breadcrumb-item-readonly{cursor:default}.breadcrumb-item__separator{display:flex;align-items:center;color:var(--separator-color)}:host(:last-of-type) .breadcrumb-item__separator{display:none}";
+
+const SixBreadcrumbsItem$1 = /*@__PURE__*/ proxyCustomElement(class SixBreadcrumbsItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** The breadcrumbs item size. */
+        this.size = 'medium';
+        /** Set to true to readonly the breadcrumb item. */
+        this.readonly = false;
+    }
+    render() {
+        return (h("div", { key: 'c513737271cbfcd6755fa7b1effc526ec450bf04', part: "base" }, h("six-button", { key: '9f7fa7a98c83bcd536e864c486e696623a337aba', part: "button", type: "link", class: { 'breadcrumb-item-readonly': this.readonly }, href: this.readonly ? undefined : this.href, tabindex: this.readonly ? -1 : undefined, target: this.target, size: this.size }, h("slot", { key: '21702eca3e7529a8e6e2e63d640a079b9da3eef9', name: "prefix", slot: "prefix" }), h("slot", { key: 'eaeaac8681abaf25e4959615c0d7acbed2f51813' }), h("slot", { key: 'b7bf9a20d59cee15010f585e17fb3cdf1979573b', name: "suffix", slot: "suffix" })), h("span", { key: '0c4189811fa524e18bf0c0f94c7f6490c11018d9', part: "separator", class: "breadcrumb-item__separator", "aria-hidden": "true" }, h("slot", { key: '03ca6b113b73f75fbaeec04b0ec3d3224536c77b', name: "separator" }))));
+    }
+    get host() { return this; }
+    static get style() { return sixBreadcrumbsItemCss; }
+}, [1, "six-breadcrumbs-item", {
+        "href": [1],
+        "target": [1],
+        "size": [513],
+        "readonly": [516, "read-only"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-breadcrumbs-item", "six-button", "six-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-breadcrumbs-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixBreadcrumbsItem$1);
+            }
+            break;
+        case "six-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "six-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const SixBreadcrumbsItem = SixBreadcrumbsItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixBreadcrumbsItem, defineCustomElement };
+//# sourceMappingURL=six-breadcrumbs-item.js.map
+
+//# sourceMappingURL=six-breadcrumbs-item.js.map

package/dist/components/six-breadcrumbs-item.js.map

@@ -0,0 +1 @@
+{"file":"six-breadcrumbs-item.js","mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,22BAA22B;;MCsB53BA,oBAAkB,iBAAAC,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;AAL/B,IAAA,WAAA,GAAA;;;;;AAe2B,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;;AAGrB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAwB3E;IAtBC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,MAAM,EAAA,EACd,CACE,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,EACpD,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,EAC3C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,SAAS,EACxC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,EAEf,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAG,CAAA,EACpC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACR,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAG,CACzB,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,iBAAa,MAAM,EAAA,EAC1E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,WAAW,GAAG,CACpB,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixBreadcrumbsItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-breadcrumbs-item/six-breadcrumbs-item.scss?tag=six-breadcrumbs-item&encapsulation=shadow","src/components/six-breadcrumbs-item/six-breadcrumbs-item.tsx"],"sourcesContent":["@import '../../../src/global/component';\n\n/**\n* @prop --separator-color: The color of the separator\n* @prop --last-item-color: The color of the last breadcrumbs item\n*/\n:host {\n  --last-item-color: var(--six-color-web-rock-700);\n  --separator-color: var(--six-color-web-rock-700);\n\n  &::part(label) {\n    padding: unset;\n  }\n\n  &::part(base) {\n    display: flex;\n    align-items: center;\n  }\n\n  &::part(separator) {\n    align-items: center;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  six-button::part(label) {\n    padding-left: var(--six-spacing-xx-small);\n    padding-right: var(--six-spacing-xx-small);\n  }\n}\n\n:host([read-only]) {\n  six-button::part(base) {\n    color: var(--last-item-color);\n  }\n}\n\n.breadcrumb-item-readonly {\n  cursor: default;\n}\n\n.breadcrumb-item__separator {\n  display: flex;\n  align-items: center;\n  color: var(--separator-color);\n}\n\n:host(:last-of-type) .breadcrumb-item__separator {\n  display: none;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * Breadcrumb items are used inside breadcrumbs to represent different links.\n *\n * @since 5.0\n * @status beta\n *\n * @slot - The breadcrumb item’s label.\n * @slot prefix - An optional prefix, usually an icon or icon button.\n * @slot suffix - An optional suffix, usually an icon or icon button.\n * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on six-breadcrumbs instead.\n *\n * @part base - The component's base wrapper.\n * @part button - The button that renders the item\n * @part separator - The separator\n */\n@Component({\n  tag: 'six-breadcrumbs-item',\n  styleUrl: 'six-breadcrumbs-item.scss',\n  shadow: true,\n})\nexport class SixBreadcrumbsItem {\n  @Element() host!: HTMLSixBreadcrumbsItemElement;\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  /** The breadcrumbs item size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Set to true to readonly the breadcrumb item. */\n  @Prop({ attribute: 'read-only', reflect: true }) readonly: boolean = false;\n\n  render() {\n    return (\n      <div part=\"base\">\n        <six-button\n          part=\"button\"\n          type=\"link\"\n          class={{ 'breadcrumb-item-readonly': this.readonly }}\n          href={this.readonly ? undefined : this.href}\n          tabindex={this.readonly ? -1 : undefined}\n          target={this.target}\n          size={this.size}\n        >\n          <slot name=\"prefix\" slot=\"prefix\" />\n          <slot />\n          <slot name=\"suffix\" slot=\"suffix\" />\n        </six-button>\n        <span part=\"separator\" class=\"breadcrumb-item__separator\" aria-hidden=\"true\">\n          <slot name=\"separator\" />\n        </span>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-breadcrumbs.d.ts

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

package/dist/components/six-breadcrumbs.js

@@ -0,0 +1,97 @@
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
+import { d as defineCustomElement$2 } from './p-C84iXIFp.js';
+
+const sixBreadcrumbsCss = ":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:block}:host nav{display:flex;align-items:center;flex-wrap:wrap}";
+
+const SixBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class SixBreadcrumbs extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Defines an icon as a separator without having to place a slot **/
+        this.separatorIcon = '';
+        this.updateBreadcrumbItems = () => {
+            const items = [...this.host.querySelectorAll('six-breadcrumbs-item')];
+            items.forEach((item, index) => {
+                // Append separators to each item if they don't already have one
+                const separator = item.querySelector('[slot="separator"]');
+                if (separator === null) {
+                    // No separator exists, add one
+                    item.append(this.createSeparatorElement());
+                }
+                else if (separator.hasAttribute('data-default')) {
+                    // A default separator exists, replace it
+                    separator.replaceWith(this.createSeparatorElement());
+                }
+                // The last breadcrumb item is the "current page"
+                if (index === items.length - 1) {
+                    item.setAttribute('aria-current', 'page');
+                }
+                else {
+                    item.removeAttribute('aria-current');
+                }
+            });
+        };
+    }
+    createSeparatorElement() {
+        // Find a custom separator by checking direct children only
+        const customSeparator = this.getCustomSeparator();
+        console.log(customSeparator);
+        if (customSeparator) {
+            const clone = customSeparator.cloneNode(true);
+            clone.removeAttribute('id');
+            clone.setAttribute('data-default', '');
+            clone.slot = 'separator';
+            return clone;
+        }
+        // Create default separator element
+        const span = document.createElement('span');
+        span.innerText = '/';
+        span.slot = 'separator';
+        span.setAttribute('data-default', '');
+        return span;
+    }
+    getCustomSeparator() {
+        var _a;
+        if (Boolean((_a = this.separatorIcon) === null || _a === void 0 ? void 0 : _a.length)) {
+            const sixIcon = document.createElement('six-icon');
+            sixIcon.innerText = this.separatorIcon;
+            sixIcon.setAttribute('size', 'small');
+            return sixIcon;
+        }
+        return Array.from(this.host.children).find((child) => child.getAttribute('slot') === 'separator');
+    }
+    render() {
+        return (h("host", { key: '71fcac983222825168006e795d3c7f8f887f2f66' }, h("nav", { key: '76473724c4e4ca45650a5defcc9a4c8352311345', part: "base" }, h("slot", { key: '6ec1262745d1b9507e6d612d3cf3a22c5e6859cd', onSlotchange: this.updateBreadcrumbItems }))));
+    }
+    get host() { return this; }
+    static get style() { return sixBreadcrumbsCss; }
+}, [1, "six-breadcrumbs", {
+        "separatorIcon": [513, "separator-icon"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-breadcrumbs", "six-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-breadcrumbs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixBreadcrumbs$1);
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const SixBreadcrumbs = SixBreadcrumbs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixBreadcrumbs, defineCustomElement };
+//# sourceMappingURL=six-breadcrumbs.js.map
+
+//# sourceMappingURL=six-breadcrumbs.js.map

package/dist/components/six-breadcrumbs.js.map

@@ -0,0 +1 @@
+{"file":"six-breadcrumbs.js","mappings":"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","names":["SixBreadcrumbs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-breadcrumbs/six-breadcrumbs.scss?tag=six-breadcrumbs&encapsulation=shadow","src/components/six-breadcrumbs/six-breadcrumbs.tsx"],"sourcesContent":["@import '../../../src/global/component';\n\n:host {\n  display: block;\n  nav {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n  }\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\n\n/**\n * Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.\n *\n * @since 5.0\n * @status beta\n *\n * @slot - One or more breadcrumb items to display.\n * @slot separator - The separator to use between breadcrumb items. Works best with six-icon.\n *\n * @part base - The component's base wrapper.\n */\n@Component({\n  tag: 'six-breadcrumbs',\n  styleUrl: 'six-breadcrumbs.scss',\n  shadow: true,\n})\nexport class SixBreadcrumbs {\n  @Element() host!: HTMLSixBreadcrumbsElement;\n\n  /** Defines an icon as a separator without having to place a slot **/\n  @Prop({ attribute: 'separator-icon', reflect: true }) separatorIcon: string = '';\n\n  private updateBreadcrumbItems = () => {\n    const items = [...this.host.querySelectorAll('six-breadcrumbs-item')] as HTMLSixBreadcrumbsItemElement[];\n\n    items.forEach((item, index) => {\n      // Append separators to each item if they don't already have one\n      const separator = item.querySelector('[slot=\"separator\"]');\n      if (separator === null) {\n        // No separator exists, add one\n        item.append(this.createSeparatorElement());\n      } else if (separator.hasAttribute('data-default')) {\n        // A default separator exists, replace it\n        separator.replaceWith(this.createSeparatorElement());\n      }\n\n      // The last breadcrumb item is the \"current page\"\n      if (index === items.length - 1) {\n        item.setAttribute('aria-current', 'page');\n      } else {\n        item.removeAttribute('aria-current');\n      }\n    });\n  };\n\n  private createSeparatorElement(): HTMLElement {\n    // Find a custom separator by checking direct children only\n    const customSeparator = this.getCustomSeparator();\n    console.log(customSeparator);\n    if (customSeparator) {\n      const clone = customSeparator.cloneNode(true) as HTMLElement;\n      clone.removeAttribute('id');\n      clone.setAttribute('data-default', '');\n      clone.slot = 'separator';\n      return clone;\n    }\n\n    // Create default separator element\n    const span = document.createElement('span');\n    span.innerText = '/';\n    span.slot = 'separator';\n    span.setAttribute('data-default', '');\n    return span;\n  }\n\n  private getCustomSeparator() {\n    if (Boolean(this.separatorIcon?.length)) {\n      const sixIcon = document.createElement('six-icon');\n      sixIcon.innerText = this.separatorIcon;\n      sixIcon.setAttribute('size', 'small');\n      return sixIcon;\n    }\n    return Array.from(this.host.children).find((child) => child.getAttribute('slot') === 'separator');\n  }\n\n  render() {\n    return (\n      <host>\n        <nav part=\"base\">\n          <slot onSlotchange={this.updateBreadcrumbItems} />\n        </nav>\n      </host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-button.js

@@ -1,4 +1,4 @@
-import { S as SixButton$1, d as defineCustomElement$1 } from './p-BUN8hFmL.js';
+import { S as SixButton$1, d as defineCustomElement$1 } from './p-BLoBZxyR.js';
 
 const SixButton = SixButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/six-card.js

@@ -9,7 +9,7 @@ const SixCard$1 = /*@__PURE__*/ proxyCustomElement(class SixCard extends H {
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '8ba5461ffe1740e8f2b7061701cf8f06e24adc25' }, h("slot", { key: '95fde97191f2c89fe76643450e6e9eb4dcbe9fa2' })));
+        return (h(Host, { key: '9a56f190ccdf8545c4503284ae32a23220e1af37' }, h("slot", { key: 'db6e7fe7d83c4e41747ad39a85bf108ce581ae87' })));
     }
     static get style() { return sixCardCss; }
 }, [1, "six-card"]);

package/dist/components/six-checkbox.js

@@ -1,4 +1,4 @@
-import { S as SixCheckbox$1, d as defineCustomElement$1 } from './p-Cfyrva2T.js';
+import { S as SixCheckbox$1, d as defineCustomElement$1 } from './p-BKl-wAjt.js';
 
 const SixCheckbox = SixCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/six-date.js

@@ -2,10 +2,10 @@ import { h, p as proxyCustomElement, H, c as createEvent } from './p-D512q9rn.js
 import { E as EventListeners } from './p-C4h4qpGl.js';
 import { h as hasSlot } from './p-j3oIB5oT.js';
 import { P as Popover } from './p-kHci8ddv.js';
-import { d as defineCustomElement$5 } from './p-CWKq6Dyt.js';
-import { d as defineCustomElement$4 } from './p-BSHZAiyG.js';
-import { d as defineCustomElement$3 } from './p-Cosz73fX.js';
-import { d as defineCustomElement$2 } from './p-DsGIkEDB.js';
+import { d as defineCustomElement$5 } from './p-BLocui1Z.js';
+import { d as defineCustomElement$4 } from './p-C84iXIFp.js';
+import { d as defineCustomElement$3 } from './p-CSfxA66i.js';
+import { d as defineCustomElement$2 } from './p-C-TgkYhI.js';
 
 var dateFns = {};
 
@@ -22216,6 +22216,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 {
@@ -22507,38 +22539,10 @@ const SixDate$1 = /*@__PURE__*/ proxyCustomElement(class SixDate extends H {
         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();
@@ -22620,6 +22624,7 @@ const SixDate$1 = /*@__PURE__*/ proxyCustomElement(class SixDate extends H {
         if (warning != null) {
             console.warn(warning);
         }
+        this.updateInputElementValue();
     }
     getSixInputBaseElement() {
         var _a, _b;
@@ -22660,7 +22665,7 @@ const SixDate$1 = /*@__PURE__*/ proxyCustomElement(class SixDate extends H {
         });
     }
     updateInputElementValue() {
-        if (this.inputElement) {
+        if (this.inputElement && document.activeElement !== this.host) {
             this.inputElement.value = this.value === '' ? '' : formatDate(this.value, this.dateFormat);
         }
     }
@@ -22681,7 +22686,7 @@ const SixDate$1 = /*@__PURE__*/ proxyCustomElement(class SixDate extends H {
         this.popoverHelper = undefined;
     }
     render() {
-        return (h("div", { key: '2fccfb9c005bf6ac4906be3735c3b0fc61bfad8f', class: "container" }, h("six-input", { key: '453bf29f4aec7bc192d1bc5191c7f74a93f0ac48', 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: '93e4add573a5617e9f90e9e8060a9a3a6ec10b98', 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: '5fb919b6861ed8307de1105c881350d4094bbf52', id: "date-format", class: "sr-only" }, translateFormatHelp(this.language, this.dateFormat)), h("div", { key: 'ccddb6c5b5c49f77d31d2d0c75742cc0ffbda2ee', ref: (el) => (this.positioner = el), class: "positioner" }, h("div", { key: '3eec69b5bac555fd542cab3a967700403af68750', class: "panel", ref: (el) => (this.panel = el) }, h("header", { key: 'a16e0c72e430580b0f0c229476b7c45ea50e194a', class: "panel__header" }, h("six-icon-button", { key: 'bfc02505301c5264de2934f3f4f3fcea52cacf07', tabindex: "-1", class: "previous", onClick: this.handlePreviousClick, name: "arrow_back_ios" }), this.selectionMode === 'day' && (h("div", { key: '2f64e3cc6f2ee9326c953f81b1ea6a3f5ab13551', class: "selector", onClick: () => (this.selectionMode = 'month') }, translateMonth(this.pointerDate.month, this.language), h("six-icon", { key: '9372e403d994348716322f39d7e30971c3d37842' }, "arrow_drop_down"))), this.selectionMode !== 'year' && (h("div", { key: '16a3de3dd5207eeb91d341a02b93b11e707f3372', class: "selector", onClick: () => (this.selectionMode = 'year') }, this.pointerDate.year, h("six-icon", { key: '81024acff597b548875a7500cbb5aab7ba47952e' }, "arrow_drop_down"))), this.selectionMode === 'year' && (h("div", { key: 'f8615b0ca8ce732a18776e3677a997fd43d9fac4', 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: '0e689a5621ae8a62415c4a19efb64a983b720115', tabindex: "-1", class: "next", onClick: this.handleNextClick, name: "arrow_forward_ios" })), this.selectionMode === 'day' && (h(DaySelection, { key: '6fe9920a9449418460e069eefa96adda867c2eb3', 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,
@@ -22689,7 +22694,7 @@ const SixDate$1 = /*@__PURE__*/ proxyCustomElement(class SixDate extends H {
                 maxDate: this.max,
                 dateFormat: this.dateFormat,
                 allowedDates: this.allowedDates,
-            }), dayClicked: this.handleDayClick })), this.selectionMode === 'month' && (h(MonthSelection, { key: 'ad02bb9d8b6c96abf77ccd30585490b2236fbfd0', language: this.language, selected: this.value, monthClicked: this.handleMonthClicked })), this.selectionMode === 'year' && (h(YearSelection, { key: 'a14118d8b9ec16182522d1de6dc12d9026ef3aa3', 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 this; }
     static get watchers() { return {