@skf-design-system/ui-components 1.0.2-beta.26 → 1.0.2-beta.28

package/dist/components/datepicker/datepicker.component.d.ts

@@ -46,6 +46,8 @@ export declare class SkfDatepicker extends FormBase {
     /** If defined, adds name to the input-element */
     name?: string;
     placeholder: string;
+    /** Placeholder for the end date input in range mode */
+    placeholderEnd: string;
     range: boolean;
     /** If true, makes the element not mutable, meaning the user can not edit the control */
     readonly?: boolean;
@@ -101,6 +103,8 @@ export declare class SkfDatepicker extends FormBase {
     _handleValueChange(): void;
     private _handleDateSelected;
     /** @internal */
+    private _handleDatepickerClose;
+    /** @internal */
     _handleKeyboardEvents: (e: KeyboardEvent) => void;
     /** @internal */
     private _handleFocus;

package/dist/components/datepicker/datepicker.component.js

@@ -1,8 +1,8 @@
-var P = (o) => {
-  throw TypeError(o);
+var P = (l) => {
+  throw TypeError(l);
 };
-var S = (o, l, e) => l.has(o) || P("Cannot " + e);
-var k = (o, l, e) => (S(o, l, "read from private field"), e ? e.call(o) : l.get(o)), E = (o, l, e) => l.has(o) ? P("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(o) : l.set(o, e), C = (o, l, e, t) => (S(o, l, "write to private field"), t ? t.call(o, e) : l.set(o, e), e);
+var S = (l, d, e) => d.has(l) || P("Cannot " + e);
+var k = (l, d, e) => (S(l, d, "read from private field"), e ? e.call(l) : d.get(l)), E = (l, d, e) => d.has(l) ? P("Cannot add the same private member more than once") : d instanceof WeakSet ? d.add(l) : d.set(l, e), C = (l, d, e, t) => (S(l, d, "write to private field"), t ? t.call(l, e) : d.set(l, e), e);
 import "../icon/icon.js";
 import { computePosition as T, flip as B, offset as x } from "@floating-ui/dom";
 import { FormBase as R } from "../../internal/components/formBase.js";
@@ -15,30 +15,32 @@ import { Temporal as I } from "@js-temporal/polyfill";
 import { componentStyles as q } from "../../styles/component.styles.js";
 import { LocalizeController as U } from "../../utilities/localize.js";
 import { nothing as f, html as b } from "lit";
-import { property as d, state as D, query as $, queryAssignedNodes as N } from "lit/decorators.js";
+import { property as o, state as D, query as $, queryAssignedNodes as N } from "lit/decorators.js";
 import { ifDefined as u } from "lit/directives/if-defined.js";
 import { live as O } from "lit/directives/live.js";
 import "./datepicker-popup.js";
 import { dateFormatter as v, is as m, isPopoverOpen as Y, debounce as z } from "./datepicker.helpers.js";
 import { styles as W } from "./datepicker.styles.js";
-var H = Object.defineProperty, K = Object.getOwnPropertyDescriptor, r = (o, l, e, t) => {
-  for (var i = t > 1 ? void 0 : t ? K(l, e) : l, h = o.length - 1, p; h >= 0; h--)
-    (p = o[h]) && (i = (t ? p(l, e, i) : p(i)) || i);
-  return t && i && H(l, e, i), i;
+var H = Object.defineProperty, K = Object.getOwnPropertyDescriptor, r = (l, d, e, t) => {
+  for (var i = t > 1 ? void 0 : t ? K(d, e) : d, h = l.length - 1, p; h >= 0; h--)
+    (p = l[h]) && (i = (t ? p(d, e, i) : p(i)) || i);
+  return t && i && H(d, e, i), i;
 }, g;
 const w = class w extends R {
   constructor() {
     super();
     E(this, g);
-    C(this, g, new U(this)), this.popoverController = new A(this), this.id = "skf-datepicker-input", this.lang = "en", this.placeholder = "YYYY-MM-DD", this.range = !1, this.size = "md", this.validateOn = "change", this.invalid = !1, this.selectedRangeDates = { start: null, end: null }, this.showClearbutton = !1, this.abortController = new AbortController(), this.abortSignal = this.abortController.signal, this._handleSelectedDate = () => {
+    C(this, g, new U(this)), this.popoverController = new A(this), this.id = "skf-datepicker-input", this.lang = "en", this.placeholder = "YYYY-MM-DD", this.placeholderEnd = "", this.range = !1, this.size = "md", this.validateOn = "change", this.invalid = !1, this.selectedRangeDates = { start: null, end: null }, this.showClearbutton = !1, this.abortController = new AbortController(), this.abortSignal = this.abortController.signal, this._handleSelectedDate = () => {
       this.pristine = !1, this._internals.setFormValue(this.value ?? ""), this.validateInput();
     }, this._handleDateSelected = (e) => {
       if (this.range && "start" in e.detail.date && "end" in e.detail.date) {
         const t = e.detail.date.start, i = e.detail.date.end;
-        this.value = `${v(t)},${v(i)}`, this.selectedRangeDates = { start: t, end: i };
-      } else !this.range && e.detail.date instanceof Date && (this.value = v(e.detail.date), this._animatePopover({ el: this.$popover, show: !1 }).then(() => {
+        this.value = `${v(t)},${v(i)}`, this.selectedRangeDates = { start: t, end: i }, t && i && this._handleDatepickerClose();
+      } else !this.range && e.detail.date instanceof Date && (this.value = v(e.detail.date), this._handleDatepickerClose());
+    }, this._handleDatepickerClose = () => {
+      this._animatePopover({ el: this.$popover, show: !1 }).then(() => {
         this.$popover.hidePopover();
-      }));
+      });
     }, this._handleKeyboardEvents = (e) => {
       const t = e.target.closest("input");
       if (t) {
@@ -47,7 +49,7 @@ const w = class w extends R {
           t.value = p.join("");
         }
         if (t.name.endsWith("-end") && (e.key === "Backspace" && t.value.length === 0 || t.selectionStart === 0 && e.key === "ArrowLeft") && (e.preventDefault(), this.$input.focus()), e.key === "Tab" && !e.shiftKey && t.name.endsWith("-end") && (e.preventDefault(), this.$popover.childNodes[1].shadowRoot?.querySelector("skf-datepicker-calendar")?.shadowRoot?.querySelector("button")?.focus()), (t.value.length === 4 || t.value.length === 7) && /[[0-9]/.test(e.key) && (t.value = `${t.value}-${e.key}`, e.preventDefault()), e.key === "Escape")
-          if (t.blur(), this.$popover.hidePopover(), this.range) {
+          if (e.stopPropagation(), t.blur(), this.$popover.hidePopover(), this.range) {
             const i = this.$input.value, h = this.$input_range_end.value;
             if (!m(i, h).date()) return;
             this.$datepickerPopup.selectedDateRange = {
@@ -323,7 +325,7 @@ const w = class w extends R {
 										inputmode=${u(this.inputMode)}
 										maxlength="10"
 										name=${(this.name ?? "calendar") + "-end"}
-										placeholder=${u(this.placeholder)}
+										placeholder=${this.placeholderEnd || this.placeholder}
 										type="text"
 									/>
 								` : f}
@@ -370,61 +372,64 @@ const w = class w extends R {
 g = new WeakMap(), w.styles = [q, W];
 let s = w;
 r([
-  d({ attribute: "custom-invalid", reflect: !0 })
+  o({ attribute: "custom-invalid", reflect: !0 })
 ], s.prototype, "customInvalid", 1);
 r([
-  d({ type: String })
+  o({ type: String })
 ], s.prototype, "id", 2);
 r([
-  d()
+  o()
 ], s.prototype, "label", 2);
 r([
-  d({ type: String })
+  o({ type: String })
 ], s.prototype, "lang", 2);
 r([
-  d({ type: Boolean, attribute: "hide-label" })
+  o({ type: Boolean, attribute: "hide-label" })
 ], s.prototype, "hideLabel", 2);
 r([
-  d()
+  o()
 ], s.prototype, "hint", 2);
 r([
-  d({ attribute: "invalid-dates" })
+  o({ attribute: "invalid-dates" })
 ], s.prototype, "invalidDates", 2);
 r([
-  d({ reflect: !0 })
+  o({ reflect: !0 })
 ], s.prototype, "name", 2);
 r([
-  d()
+  o()
 ], s.prototype, "placeholder", 2);
 r([
-  d({ type: Boolean })
+  o({ attribute: "placeholder-end" })
+], s.prototype, "placeholderEnd", 2);
+r([
+  o({ type: Boolean })
 ], s.prototype, "range", 2);
 r([
-  d({ type: Boolean })
+  o({ type: Boolean })
 ], s.prototype, "readonly", 2);
 r([
-  d({ attribute: "selectable-from" })
+  o({ attribute: "selectable-from" })
 ], s.prototype, "selectableFrom", 2);
 r([
-  d({ attribute: "selectable-to" })
+  o({ attribute: "selectable-to" })
 ], s.prototype, "selectableTo", 2);
 r([
-  d({ reflect: !0 })
+  o({ reflect: !0 })
 ], s.prototype, "severity", 2);
 r([
-  d({ reflect: !0 })
+  o({ reflect: !0 })
 ], s.prototype, "size", 2);
 r([
-  d({ type: String, attribute: "validate-on" })
+  o({ type: String, attribute: "validate-on" })
 ], s.prototype, "validateOn", 2);
 r([
-  d()
+  o()
 ], s.prototype, "value", 2);
 r([
   D()
 ], s.prototype, "_init_date", 2);
 r([
-  d({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], s.prototype, "invalid", 2);
 r([
   D()

package/dist/components/select/select.controllers.js

@@ -35,7 +35,7 @@ class p {
           e.preventDefault(), this._selectFocusedOption(e.target);
           break;
         case "Escape":
-          e.preventDefault(), this.host && (this.host._expanded = !1), setTimeout(() => {
+          e.stopPropagation(), e.preventDefault(), this.host && (this.host._expanded = !1), setTimeout(() => {
             this.host.focus();
           });
           break;

package/dist/components/textarea/textarea.component.d.ts

@@ -74,8 +74,11 @@ export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
     private $input?;
     firstUpdated(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** @internal */
     _invalidChanged(): void;
+    /** @internal */
     _hintChanged(): void;
+    /** @internal */
     _valueChanged(): void;
     /** @internal */
     _resetValue: (event: Event) => void;

package/dist/components/tooltip/tooltip.component.js

@@ -12,13 +12,13 @@ const e = class e extends t {
     s.addEventListener(
       "blur",
       () => {
-        this.close("blur");
+        this.close();
       },
       { signal: this._signal }
     ), s.addEventListener("focus", this.open, { signal: this._signal }), s.addEventListener("mouseenter", this.open, { signal: this._signal }), s.addEventListener(
       "mouseleave",
       () => {
-        this.close("mouseleave");
+        this.close();
       },
       { signal: this._signal }
     );

package/dist/custom-elements.json

@@ -2181,6 +2181,16 @@
               "default": "'YYYY-MM-DD'",
               "attribute": "placeholder"
             },
+            {
+              "kind": "field",
+              "name": "placeholderEnd",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder for the end date input in range mode",
+              "attribute": "placeholder-end"
+            },
             {
               "kind": "field",
               "name": "range",
@@ -2409,6 +2419,15 @@
               "default": "'YYYY-MM-DD'",
               "fieldName": "placeholder"
             },
+            {
+              "name": "placeholder-end",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder for the end date input in range mode",
+              "fieldName": "placeholderEnd"
+            },
             {
               "name": "range",
               "type": {
@@ -7627,27 +7646,6 @@
               "default": "''",
               "description": "The current value of the text area",
               "attribute": "value"
-            },
-            {
-              "kind": "method",
-              "name": "_invalidChanged",
-              "type": {
-                "text": "_invalidChanged() => void"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_hintChanged",
-              "type": {
-                "text": "_hintChanged() => void"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_valueChanged",
-              "type": {
-                "text": "_valueChanged() => void"
-              }
             }
           ],
           "events": [

package/dist/internal/base-classes/popover/popover.base.d.ts

@@ -53,7 +53,7 @@ export declare class SkfPopoverBase extends SkfElement {
     reposition: () => Promise<void>;
     handleEscapeKey: (e: KeyboardEvent) => void;
     open: (e: Event) => void;
-    close: (reason?: string) => void;
+    close: () => void;
     /** @internal eventlisteners here should implement abort signal */
     addEventListeners($element: HTMLElement | Element): void;
     /** @internal */

package/dist/internal/base-classes/popover/popover.base.js

@@ -8,18 +8,18 @@ import { nothing as P, html as m } from "lit";
 import { property as u, state as c, query as S } from "lit/decorators.js";
 import { classMap as A } from "lit/directives/class-map.js";
 import { styles as L } from "./popover.styles.js";
-var x = Object.defineProperty, F = Object.getOwnPropertyDescriptor, r = (g, t, s, o) => {
-  for (var e = o > 1 ? void 0 : o ? F(t, s) : t, n = g.length - 1, a; n >= 0; n--)
-    (a = g[n]) && (e = (o ? a(t, s, e) : a(e)) || e);
-  return o && e && x(t, s, e), e;
-}, h;
-const i = (h = class extends C {
+var x = Object.defineProperty, F = Object.getOwnPropertyDescriptor, i = (g, t, r, o) => {
+  for (var e = o > 1 ? void 0 : o ? F(t, r) : t, n = g.length - 1, a; n >= 0; n--)
+    (a = g[n]) && (e = (o ? a(t, r, e) : a(e)) || e);
+  return o && e && x(t, r, e), e;
+}, l;
+const s = (l = class extends C {
   constructor() {
     super(...arguments), this._skipClosingThisTick = !1, this._abortCtrl = new AbortController(), this._signal = this._abortCtrl.signal, this.$popover = this, this.placement = "top", this.variant = "popup", this.isOpen = !1, this.offset = 0, this.arrow = !1, this.triggerEvent = "mouseenter", this.popoverController = new E(this), this._toggleOpen = (t) => {
       this.isOpen = t ?? !this.isOpen;
     }, this._handleToggle = (t) => {
-      const s = t.newState === "open";
-      this.isOpen = s, this.emit(s ? "skf-opened" : "skf-closed");
+      const r = t.newState === "open";
+      this.isOpen = r, this.emit(r ? "skf-opened" : "skf-closed");
     }, this.handleToggleOpen = async () => {
       this.$anchor && (this.isOpen ? (this.$popover.togglePopover(!0), this.$popover.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 250, fill: "forwards" })) : (await this.$popover.animate([{ opacity: 0 }], { duration: 150, fill: "forwards" }).finished, this.$popover && this.$popover.togglePopover(this.isOpen)));
     }, this.handleAnchorChange = async () => {
@@ -31,16 +31,16 @@ const i = (h = class extends C {
       if (!this.$anchor) return;
       const t = [y(), $(this.offset)];
       this.arrow && t.push(O({ element: this.$arrow }));
-      const { x: s, y: o, middlewareData: e } = await _(this.$anchor, this.$popover, {
+      const { x: r, y: o, middlewareData: e } = await _(this.$anchor, this.$popover, {
         placement: this.placement,
         middleware: t,
         strategy: "fixed"
       });
       if (Object.assign(this.$popover.style, {
-        left: `${String(s)}px`,
+        left: `${String(r)}px`,
         top: `${String(o)}px`
       }), this.arrow) {
-        const n = this.placement.split("-")[0], a = { top: "bottom", right: "left", bottom: "top", left: "right" }[n] ?? "", p = e.flip?.index, d = e.arrow?.x, l = e.arrow?.y, v = typeof d == "number" ? `${String(d)}px` : "", b = typeof l == "number" ? `${String(l)}px` : "", w = {
+        const n = this.placement.split("-")[0], a = { top: "bottom", right: "left", bottom: "top", left: "right" }[n] ?? "", p = e.flip?.index, d = e.arrow?.x, h = e.arrow?.y, v = typeof d == "number" ? `${String(d)}px` : "", b = typeof h == "number" ? `${String(h)}px` : "", w = {
           bottom: 45,
           right: 135,
           top: 225,
@@ -59,8 +59,8 @@ const i = (h = class extends C {
       t.stopPropagation(), this.tagName === "SKF-TOOLTIP" && this.isOpen && this.close();
       const o = this.tagName === "SKF-MENU" ? void 0 : !0;
       this._toggleOpen(o), this._abortCtrl = new AbortController(), this._signal = this._abortCtrl.signal, document.addEventListener("keydown", this.handleEscapeKey, { signal: this._signal }), this.tagName === "SKF-TOOLTIP" && this.$anchor?.setAttribute("aria-describedby", this.id);
-    }, this.close = (t = "") => {
-      console.log("Popover closing", t), this._toggleOpen(!1), this._abortCtrl.abort(), this.tagName === "SKF-TOOLTIP" && this.$anchor?.removeAttribute("aria-describedby");
+    }, this.close = () => {
+      this._toggleOpen(!1), this._abortCtrl.abort(), this.tagName === "SKF-TOOLTIP" && this.$anchor?.removeAttribute("aria-describedby");
     };
   }
   connectedCallback() {
@@ -78,25 +78,23 @@ const i = (h = class extends C {
       "focusout",
       (o) => {
         const e = this.contains(o.relatedTarget);
-        t && e || this._skipClosingThisTick || this.close("anchor focus out");
+        t && e || this._skipClosingThisTick || this.close();
       },
       { signal: this._signal }
     ), this.addEventListener(
       "focusout",
       (o) => {
         const e = this.contains(o.relatedTarget);
-        t && e || this.close("popover focusout");
+        t && e || this.contains(o.target) || this.close();
       },
       { signal: this._signal }
     ), this._skfPopoverOutsideClickListener ??= (o) => {
-      this.isOpen && this.$anchor && !this.contains(o.target) && !this.$anchor.contains(o.target) ? this.close("outside click") : (this._skipClosingThisTick = !0, setTimeout(() => {
+      this.isOpen && this.$anchor && !this.contains(o.target) && !this.$anchor.contains(o.target) ? this.close() : (this._skipClosingThisTick = !0, setTimeout(() => {
         this._skipClosingThisTick = !1;
       }, 0));
     }, document.addEventListener("mousedown", this._skfPopoverOutsideClickListener, {
       signal: this._signal
-    });
-    const s = window.top && window.self !== window.top;
-    console.log("contains frames", s), s && window.top && !this._skipClosingThisTick && window.top.addEventListener("mousedown", this._skfPopoverOutsideClickListener, {
+    }), window.top && window.self !== window.top && window.top && !this._skipClosingThisTick && window.top.addEventListener("mousedown", this._skfPopoverOutsideClickListener, {
       signal: this._signal
     }), this.$popover.id = await T(this.$anchor.id), ["popup", "menu"].includes(this.variant) && (this.$anchor.setAttribute("aria-haspopup", "true"), this.setAttribute("aria-labelledby", this.$anchor.id)), ["menu"].includes(this.variant) && this.$anchor.setAttribute("aria-controls", this.$popover.id), ["popup"].includes(this.variant) && t && (this.role = "dialog"), ["tooltip"].includes(this.variant) && this.$anchor.addEventListener("focusin", this.open, { signal: this._signal });
   }
@@ -110,7 +108,7 @@ const i = (h = class extends C {
   }
   render() {
     return ["popup", "menu"].includes(this.variant) && this.$anchor?.setAttribute("aria-expanded", this.isOpen ? "true" : "false"), m`
-			<div class=${A({ popover: !0, ...h.classMap })} id="root">
+			<div class=${A({ popover: !0, ...l.classMap })} id="root">
 				<slot></slot>
 				${this.arrow ? m`<div id="arrow"></div>` : P}
 			</div>
@@ -129,52 +127,52 @@ const i = (h = class extends C {
     function e(n, a) {
       const p = Array.from(
         n.querySelectorAll(a.join(", "))
-      ), d = Array.from(n.querySelectorAll("*")).map((l) => l.shadowRoot).filter((l) => l !== null);
-      for (const l of d)
+      ), d = Array.from(n.querySelectorAll("*")).map((h) => h.shadowRoot).filter((h) => h !== null);
+      for (const h of d)
         p.push(
-          ...e(l, a)
+          ...e(h, a)
         );
       return p;
     }
   }
-}, h.styles = [k, L], h.classMap = {}, h);
-r([
+}, l.styles = [k, L], l.classMap = {}, l);
+i([
   u()
-], i.prototype, "placement", 2);
-r([
+], s.prototype, "placement", 2);
+i([
   u()
-], i.prototype, "variant", 2);
-r([
+], s.prototype, "variant", 2);
+i([
   u()
-], i.prototype, "anchor", 2);
-r([
+], s.prototype, "anchor", 2);
+i([
   c()
-], i.prototype, "isOpen", 2);
-r([
+], s.prototype, "isOpen", 2);
+i([
   c()
-], i.prototype, "offset", 2);
-r([
+], s.prototype, "offset", 2);
+i([
   c()
-], i.prototype, "$anchor", 2);
-r([
+], s.prototype, "$anchor", 2);
+i([
   c()
-], i.prototype, "arrow", 2);
-r([
+], s.prototype, "arrow", 2);
+i([
   c()
-], i.prototype, "triggerEvent", 2);
-r([
+], s.prototype, "triggerEvent", 2);
+i([
   S("#arrow")
-], i.prototype, "$arrow", 2);
-r([
+], s.prototype, "$arrow", 2);
+i([
   f("isOpen", { afterUpdate: !0 })
-], i.prototype, "handleToggleOpen", 2);
-r([
+], s.prototype, "handleToggleOpen", 2);
+i([
   f("$anchor")
-], i.prototype, "handleAnchorEl", 1);
-r([
+], s.prototype, "handleAnchorEl", 1);
+i([
   f("anchor")
-], i.prototype, "handleAnchorChange", 2);
-let z = i;
+], s.prototype, "handleAnchorChange", 2);
+let W = s;
 export {
-  z as SkfPopoverBase
+  W as SkfPopoverBase
 };

package/dist/types/jsx/custom-element-jsx.d.ts

@@ -481,6 +481,10 @@ export type SkfDatepickerProps = {
   "name"?: SkfDatepicker['name'];
   /**  */
   "placeholder"?: SkfDatepicker['placeholder'];
+  /** Placeholder for the end date input in range mode */
+  "placeholder-end"?: SkfDatepicker['placeholderEnd'];
+  /** Placeholder for the end date input in range mode */
+  "placeholderEnd"?: SkfDatepicker['placeholderEnd'];
   /**  */
   "range"?: SkfDatepicker['range'];
   /** If true, makes the element not mutable, meaning the user can not edit the control */
@@ -1590,6 +1594,7 @@ export type SkfTooltipProps = {
  * - `invalid-dates`/`invalidDates`: A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. 
  * - `name`: If defined, adds name to the input-element 
  * - `placeholder`: undefined 
+ * - `placeholder-end`/`placeholderEnd`: Placeholder for the end date input in range mode 
  * - `range`: undefined 
  * - `readonly`: If true, makes the element not mutable, meaning the user can not edit the control 
  * - `selectable-from`/`selectableFrom`: Earliest selectable date. (yyyy-mm-dd format) 
@@ -2491,14 +2496,6 @@ export type SkfTooltipProps = {
  * Areas where markup can be added to the component.
  * 
  * - `(default)`: The textareas label. Alternatively, you can use the `label` attribute.
- * 
- * ## Methods
- * 
- * Methods that can be called to access component functionality.
- * 
- * - `_invalidChanged() => void`: undefined
- * - `_hintChanged() => void`: undefined
- * - `_valueChanged() => void`: undefined
   */
     "skf-textarea": Partial<SkfTextAreaProps & BaseProps<SkfTextArea> & BaseEvents>;
 

package/dist/types/vue/index.d.ts

@@ -243,6 +243,8 @@ type SkfDatepickerProps = {
   name?: SkfDatepicker["name"];
   /**  */
   placeholder?: SkfDatepicker["placeholder"];
+  /** Placeholder for the end date input in range mode */
+  "placeholder-end"?: SkfDatepicker["placeholderEnd"];
   /**  */
   range?: SkfDatepicker["range"];
   /** If true, makes the element not mutable, meaning the user can not edit the control */

package/dist/vscode.html-custom-data.json

@@ -403,6 +403,11 @@
           "values": []
         },
         { "name": "placeholder", "values": [] },
+        {
+          "name": "placeholder-end",
+          "description": "Placeholder for the end date input in range mode",
+          "values": []
+        },
         { "name": "range", "values": [] },
         {
           "name": "readonly",

package/dist/web-types.json

@@ -863,6 +863,11 @@
               "name": "placeholder",
               "value": { "type": "string", "default": "'YYYY-MM-DD'" }
             },
+            {
+              "name": "placeholder-end",
+              "description": "Placeholder for the end date input in range mode",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "range",
               "value": { "type": "boolean", "default": "false" }
@@ -972,6 +977,11 @@
                 "type": "string | undefined"
               },
               { "name": "placeholder", "type": "string" },
+              {
+                "name": "placeholderEnd",
+                "description": "Placeholder for the end date input in range mode",
+                "type": "string"
+              },
               { "name": "range", "type": "boolean" },
               {
                 "name": "readonly",

package/package.json

@@ -35,7 +35,7 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.2-beta.26",
+  "version": "1.0.2-beta.28",
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
     "@js-temporal/polyfill": "^0.5.1",