@getflip/swirl-components-react 0.100.0 → 0.100.2

package/dist/{swirl-tooltip.entry.13db260f.js → swirl-tooltip.entry.9f7152c3.js}

@@ -1,4 +1,4 @@
-import { r as n, h as i, H as r } from "./index.28538bde.js";
+import { r as n, h as i, H as r } from "./index.41029675.js";
 import { c as l, a as p, o as h, s as d, f as c } from "./floating-ui.dom.esm-ac7cc24e.79b318e4.js";
 import "react";
 import "react-dom";

package/dist/{swirl-tree-navigation-item.entry.142b4471.js → swirl-tree-navigation-item.entry.3a4bd919.js}

@@ -1,4 +1,4 @@
-import { r as a, h as i, H as s, g as r } from "./index.28538bde.js";
+import { r as a, h as i, H as s, g as r } from "./index.41029675.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-video-thumbnail.entry.d1bbf444.js → swirl-video-thumbnail.entry.719cbe28.js}

@@ -1,4 +1,4 @@
-import { r as t, h as n, H as e } from "./index.28538bde.js";
+import { r as t, h as n, H as e } from "./index.41029675.js";
 import "react";
 import "react-dom";
 const a = `:host {

package/dist/{swirl-visually-hidden.entry.80ea023e.js → swirl-visually-hidden.entry.714d1d8d.js}

@@ -1,4 +1,4 @@
-import { r as s, h as i, H as l } from "./index.28538bde.js";
+import { r as s, h as i, H as l } from "./index.41029675.js";
 import "react";
 import "react-dom";
 const t = ":host{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}", o = class {

package/dist/{wc-datepicker.entry.32395b78.js → wc-datepicker.entry.6da08f21.js}

@@ -1,18 +1,18 @@
-import { r as R, c as S, h as n, H, g as E } from "./index.28538bde.js";
+import { r as R, c as S, h as n, H, g as E } from "./index.41029675.js";
 import "react";
 import "react-dom";
-function T(e, t) {
+function F(e, t) {
   const a = new Date(e);
   return a.setDate(a.getDate() + t), a;
 }
 function V(e, t, a) {
-  const s = [], i = b(e), d = i.getDay() === 0 ? 7 : i.getDay(), l = F(e), D = l.getDay() === 0 ? 7 : l.getDay(), g = a === 1 ? 7 : a - 1, f = [], v = [];
+  const s = [], i = b(e), d = i.getDay() === 0 ? 7 : i.getDay(), l = T(e), g = l.getDay() === 0 ? 7 : l.getDay(), D = a === 1 ? 7 : a - 1, f = [], v = [];
   if (t) {
     let p = (7 - a + d) % 7, m = y(i);
     for (; p > 0; )
       f.push(m), m = y(m), p -= 1;
     f.reverse();
-    let w = (7 - D + g) % 7, c = C(l);
+    let w = (7 - g + D) % 7, c = C(l);
     for (; w > 0; )
       v.push(c), c = C(c), w -= 1;
   }
@@ -22,13 +22,13 @@ function V(e, t, a) {
   return [...f, ...s, ...v];
 }
 function b(e) {
-  return u(new Date(`${P(e)}-${String(O(e)).padStart(2, "0")}-01`));
+  return u(new Date(`${String(P(e)).padStart(4, "0")}-${String(O(e)).padStart(2, "0")}-01`));
 }
 function h(e) {
   if (e instanceof Date)
     return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
 }
-function F(e) {
+function T(e) {
   const t = b(e);
   return t.setMonth(t.getMonth() + 1), t.setDate(t.getDate() - 1), t;
 }
@@ -44,7 +44,7 @@ function K(e) {
   });
 }
 function C(e) {
-  return T(e, 1);
+  return F(e, 1);
 }
 function N(e) {
   const t = new Date(e);
@@ -55,7 +55,7 @@ function B(e) {
   return t.setFullYear(t.getFullYear() + 1), t;
 }
 function y(e) {
-  return A(e, 1);
+  return L(e, 1);
 }
 function Y(e) {
   const t = new Date(e);
@@ -94,7 +94,7 @@ function u(e) {
   const t = new Date(e);
   return t.setMinutes(t.getMinutes() + t.getTimezoneOffset()), t;
 }
-function A(e, t) {
+function L(e, t) {
   const a = new Date(e);
   return a.setDate(a.getDate() - t), a;
 }
@@ -136,10 +136,13 @@ const z = ".visually-hidden.sc-wc-datepicker{position:absolute;overflow:hidden;w
       const a = +t.target.value - 1, s = new Date(this.currentDate);
       s.setMonth(a), this.updateCurrentDate(s);
     }, this.onYearSelect = (t) => {
-      const a = +t.target.value, s = new Date(this.currentDate);
-      s.setFullYear(a), this.updateCurrentDate(s);
+      let a = +t.target.value;
+      const s = t.target;
+      isNaN(a) ? (a = new Date().getFullYear(), s.value = String(a)) : a < 0 ? (a = 0, s.value = String(a)) : a > 9999 && (a = 9999, s.value = String(a));
+      const i = new Date(this.currentDate);
+      i.setFullYear(a), this.updateCurrentDate(i);
     }, this.onKeyDown = (t) => {
-      this.disabled || (t.code === "ArrowLeft" ? (t.preventDefault(), this.updateCurrentDate(y(this.currentDate), !0)) : t.code === "ArrowRight" ? (t.preventDefault(), this.updateCurrentDate(C(this.currentDate), !0)) : t.code === "ArrowUp" ? (t.preventDefault(), this.updateCurrentDate(A(this.currentDate, 7), !0)) : t.code === "ArrowDown" ? (t.preventDefault(), this.updateCurrentDate(T(this.currentDate, 7), !0)) : t.code === "PageUp" ? (t.preventDefault(), t.shiftKey ? this.updateCurrentDate(x(this.currentDate), !0) : this.updateCurrentDate(Y(this.currentDate), !0)) : t.code === "PageDown" ? (t.preventDefault(), t.shiftKey ? this.updateCurrentDate(B(this.currentDate), !0) : this.updateCurrentDate(N(this.currentDate), !0)) : t.code === "Home" ? (t.preventDefault(), this.updateCurrentDate(b(this.currentDate), !0)) : t.code === "End" ? (t.preventDefault(), this.updateCurrentDate(F(this.currentDate), !0)) : (t.code === "Space" || t.code === "Enter") && (t.preventDefault(), this.onSelectDate(this.currentDate)));
+      this.disabled || (t.code === "ArrowLeft" ? (t.preventDefault(), this.updateCurrentDate(y(this.currentDate), !0)) : t.code === "ArrowRight" ? (t.preventDefault(), this.updateCurrentDate(C(this.currentDate), !0)) : t.code === "ArrowUp" ? (t.preventDefault(), this.updateCurrentDate(L(this.currentDate, 7), !0)) : t.code === "ArrowDown" ? (t.preventDefault(), this.updateCurrentDate(F(this.currentDate, 7), !0)) : t.code === "PageUp" ? (t.preventDefault(), t.shiftKey ? this.updateCurrentDate(x(this.currentDate), !0) : this.updateCurrentDate(Y(this.currentDate), !0)) : t.code === "PageDown" ? (t.preventDefault(), t.shiftKey ? this.updateCurrentDate(B(this.currentDate), !0) : this.updateCurrentDate(N(this.currentDate), !0)) : t.code === "Home" ? (t.preventDefault(), this.updateCurrentDate(b(this.currentDate), !0)) : t.code === "End" ? (t.preventDefault(), this.updateCurrentDate(T(this.currentDate), !0)) : (t.code === "Space" || t.code === "Enter") && (t.preventDefault(), this.onSelectDate(this.currentDate)));
     }, this.onMouseEnter = (t) => {
       if (this.disabled)
         return;
@@ -198,6 +201,8 @@ const z = ".visually-hidden.sc-wc-datepicker{position:absolute;overflow:hidden;w
   }
   updateCurrentDate(e, t) {
     const a = e.getMonth(), s = e.getFullYear();
+    if (s > 9999 || s < 0)
+      return;
     (a !== this.currentDate.getMonth() || s !== this.currentDate.getFullYear()) && (this.changeMonth.emit({ month: O(e), year: P(e) }), t && (this.moveFocusAfterMonthChanged = !0)), this.currentDate = e, t && this.focusDate(this.currentDate);
   }
   onSelectDate(e) {
@@ -222,17 +227,17 @@ const z = ".visually-hidden.sc-wc-datepicker{position:absolute;overflow:hidden;w
     return n(H, null, n("div", { "aria-disabled": String(this.disabled), "aria-label": this.labels.picker, class: {
       [this.getClassName()]: !0,
       [`${this.getClassName()}--disabled`]: this.disabled
-    }, role: "group" }, n("div", { class: this.getClassName("header") }, n("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && n("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName("previous-year-button"), disabled: this.disabled, innerHTML: this.previousYearButtonContent || void 0, onClick: this.previousYear, type: "button" }, n("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, n("polyline", { points: "11 17 6 12 11 7" }), n("polyline", { points: "18 17 13 12 18 7" }))), this.showMonthStepper && n("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName("previous-month-button"), disabled: this.disabled, innerHTML: this.previousMonthButtonContent || void 0, onClick: this.previousMonth, type: "button" }, n("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, n("polyline", { points: "15 18 9 12 15 6" }))), n("span", { class: this.getClassName("current-month") }, n("select", { "aria-label": this.labels.monthSelect, class: this.getClassName("month-select"), disabled: this.disabled, name: "month", onChange: this.onMonthSelect }, K(this.locale).map((t, a) => n("option", { key: t, selected: this.currentDate.getMonth() === a, value: a + 1 }, t))), n("input", { "aria-label": this.labels.yearSelect, class: this.getClassName("year-select"), disabled: this.disabled, max: 9999, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && n("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName("next-month-button"), disabled: this.disabled, innerHTML: this.nextMonthButtonContent || void 0, onClick: this.nextMonth, type: "button" }, n("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, n("polyline", { points: "9 18 15 12 9 6" }))), this.showYearStepper && n("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName("next-year-button"), disabled: this.disabled, innerHTML: this.nextYearButtonContent || void 0, onClick: this.nextYear, type: "button" }, n("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, n("polyline", { points: "13 17 18 12 13 7" }), n("polyline", { points: "6 17 11 12 6 7" })))), n("div", { class: this.getClassName("body") }, n("table", { class: this.getClassName("calendar"), onKeyDown: this.onKeyDown, role: "grid" }, n("thead", { class: this.getClassName("calendar-header") }, n("tr", { class: this.getClassName("weekday-row") }, this.weekdays.map((t) => n("th", { abbr: t[1], class: this.getClassName("weekday"), key: t[0], scope: "col" }, n("span", null, t[0]))))), n("tbody", null, this.getCalendarRows().map((t) => {
+    }, role: "group" }, n("div", { class: this.getClassName("header") }, n("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && n("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName("previous-year-button"), disabled: this.disabled, innerHTML: this.previousYearButtonContent || void 0, onClick: this.previousYear, type: "button" }, n("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, n("polyline", { points: "11 17 6 12 11 7" }), n("polyline", { points: "18 17 13 12 18 7" }))), this.showMonthStepper && n("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName("previous-month-button"), disabled: this.disabled, innerHTML: this.previousMonthButtonContent || void 0, onClick: this.previousMonth, type: "button" }, n("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, n("polyline", { points: "15 18 9 12 15 6" }))), n("span", { class: this.getClassName("current-month") }, n("select", { "aria-label": this.labels.monthSelect, class: this.getClassName("month-select"), disabled: this.disabled, name: "month", onChange: this.onMonthSelect }, K(this.locale).map((t, a) => n("option", { key: t, selected: this.currentDate.getMonth() === a, value: a + 1 }, t))), n("input", { "aria-label": this.labels.yearSelect, class: this.getClassName("year-select"), disabled: this.disabled, max: 9999, maxLength: 4, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && n("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName("next-month-button"), disabled: this.disabled, innerHTML: this.nextMonthButtonContent || void 0, onClick: this.nextMonth, type: "button" }, n("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, n("polyline", { points: "9 18 15 12 9 6" }))), this.showYearStepper && n("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName("next-year-button"), disabled: this.disabled, innerHTML: this.nextYearButtonContent || void 0, onClick: this.nextYear, type: "button" }, n("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, n("polyline", { points: "13 17 18 12 13 7" }), n("polyline", { points: "6 17 11 12 6 7" })))), n("div", { class: this.getClassName("body") }, n("table", { class: this.getClassName("calendar"), onKeyDown: this.onKeyDown, role: "grid" }, n("thead", { class: this.getClassName("calendar-header") }, n("tr", { class: this.getClassName("weekday-row") }, this.weekdays.map((t) => n("th", { abbr: t[1], class: this.getClassName("weekday"), key: t[0], scope: "col" }, n("span", null, t[0]))))), n("tbody", null, this.getCalendarRows().map((t) => {
       const a = `row-${t[0].getMonth()}-${t[0].getDate()}`;
       return n("tr", { class: this.getClassName("calendar-row"), key: a }, t.map((s) => {
-        var i, d, l, D, g;
+        var i, d, l, g, D;
         const f = o(s, this.currentDate), v = s.getMonth() !== this.currentDate.getMonth(), r = Array.isArray(this.value) ? o(s, this.value[0]) || o(s, this.value[1]) : o(s, this.value), M = this.isRangeValue ? U(s, {
           from: (i = this.value) === null || i === void 0 ? void 0 : i[0],
           to: ((d = this.value) === null || d === void 0 ? void 0 : d[1]) || this.hoveredDate || this.currentDate
         }) : !1, p = Boolean((l = this.value) === null || l === void 0 ? void 0 : l[0]) ? [
-          (D = this.value) === null || D === void 0 ? void 0 : D[0],
-          ((g = this.value) === null || g === void 0 ? void 0 : g[1]) || this.hoveredDate
-        ].sort((_, I) => _ - I) : [], m = this.range && o(p[0], s), k = this.range && o(p[1], s), w = o(s, new Date()), c = this.disableDate(s), L = `cell-${s.getMonth()}-${s.getDate()}`, $ = {
+          (g = this.value) === null || g === void 0 ? void 0 : g[0],
+          ((D = this.value) === null || D === void 0 ? void 0 : D[1]) || this.hoveredDate
+        ].sort((_, I) => _ - I) : [], m = this.range && o(p[0], s), k = this.range && o(p[1], s), w = o(s, new Date()), c = this.disableDate(s), A = `cell-${s.getMonth()}-${s.getDate()}`, $ = {
           [this.getClassName("date")]: !0,
           [this.getClassName("date--current")]: f,
           [this.getClassName("date--disabled")]: c,
@@ -243,7 +248,7 @@ const z = ".visually-hidden.sc-wc-datepicker{position:absolute;overflow:hidden;w
           [this.getClassName("date--start")]: m,
           [this.getClassName("date--end")]: k
         }, W = r ? "strong" : w ? "em" : "span";
-        return n("td", { "aria-disabled": String(c), "aria-selected": r ? "true" : void 0, class: $, "data-date": h(s), key: L, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: o(s, this.currentDate) && !this.disabled ? 0 : -1 }, n(W, { "aria-hidden": "true" }, s.getDate()), n("span", { class: "visually-hidden" }, Intl.DateTimeFormat(this.locale, {
+        return n("td", { "aria-disabled": String(c), "aria-selected": r ? "true" : void 0, class: $, "data-date": h(s), key: A, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: o(s, this.currentDate) && !this.disabled ? 0 : -1 }, n(W, { "aria-hidden": "true" }, s.getDate()), n("span", { class: "visually-hidden" }, Intl.DateTimeFormat(this.locale, {
           day: "numeric",
           month: "long"
         }).format(s)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-components-react",
-  "version": "0.100.0",
+  "version": "0.100.2",
   "type": "module",
   "files": [
     "dist"
@@ -18,7 +18,7 @@
     "build": "tsc && vite build"
   },
   "dependencies": {
-    "@getflip/swirl-components": "^0.100.0",
+    "@getflip/swirl-components": "^0.100.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/dist/swirl-accordion-item.entry.c559c0c0.js

@@ -1,38 +0,0 @@
-import { r as a, c as n, h as i, H as d, g as s } from "./index.28538bde.js";
-import { c as r } from "./index-d280dafb.186cdb0e.js";
-import { v as o } from "./v4-fa4bb814.196482d9.js";
-import "react";
-import "react-dom";
-const c = ":host{display:block}:host *{box-sizing:border-box}:host(:last-child) .accordion-item{border-bottom:0.0625rem solid var(--s-border-default)}.accordion-item{display:grid;align-content:start;border-top:0.0625rem solid var(--s-border-default);transition:grid-template-rows 0.15s;grid-template-rows:auto 0fr;will-change:grid-template-rows}@media (prefers-reduced-motion){.accordion-item{transition:none}}.accordion-item--expanded{grid-template-rows:auto 1fr}.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);animation:accordion-overflow 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-8)}}.accordion-item__heading{margin:0;padding:0;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__heading{font-size:var(--s-font-size-sm)}}.accordion-item__toggle{display:flex;width:100%;padding:0;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-default);font:inherit;line-height:var(--s-line-height-lg);text-align:start;cursor:pointer;gap:var(--s-space-16)}.accordion-item__toggle:hover{background-color:var(--s-surface-hovered)}.accordion-item__toggle:active{background-color:var(--s-surface-pressed)}.accordion-item__toggle:disabled{color:var(--s-text-disabled);background-color:var(--s-surface-default);cursor:default}.accordion-item__toggle:disabled .text{color:var(--s-text-disabled)}.accordion-item__toggle:focus:not(:focus-visible){outline:none}.accordion-item__toggle:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__toggle{line-height:var(--s-line-height-sm)}}.accordion-item__toggle-text{flex-grow:1}.accordion-item__icon{display:inline-flex;padding-right:var(--s-space-8);flex-shrink:0}.accordion-item__content{overflow:hidden;padding-top:0;padding-bottom:0;transition:padding-top 0.15s, padding-bottom 0.15s;animation:accordion-display 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.accordion-item__content{transition:none}}@keyframes accordion-overflow{from{overflow:hidden}to{overflow:visible}}@keyframes accordion-display{from{display:block}to{display:none}}", l = class {
-  constructor(e) {
-    a(this, e), this.expansionChange = n(this, "expansionChange", 7), this.headingId = `${o()}-heading`, this.onHeadingClick = () => {
-      this.toggle();
-    }, this.description = void 0, this.disabled = void 0, this.heading = void 0, this.headingLevel = 2, this.initiallyOpen = void 0, this.itemId = o(), this.expanded = !1;
-  }
-  componentWillLoad() {
-    if (this.accordion = this.el.closest("swirl-accordion"), this.expanded = this.initiallyOpen && !this.disabled || !1, !Boolean(this.accordion))
-      throw new Error("[Swirl] swirl-accordion-item must be a child of a swirl-accordion.");
-  }
-  async collapse() {
-    !this.expanded || this.disabled || (this.expanded = !1, this.expansionChange.emit(this.expanded));
-  }
-  async expand() {
-    this.expanded || this.disabled || (this.expanded = !0, this.expansionChange.emit(this.expanded));
-  }
-  async toggle() {
-    this.expanded ? this.collapse() : this.expand();
-  }
-  render() {
-    const e = `h${this.headingLevel}`, t = r("accordion-item", {
-      "accordion-item--expanded": this.expanded
-    });
-    return i(d, null, i("div", { class: t }, i(e, { class: "accordion-item__heading" }, i("button", { "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, i("span", { class: "accordion-item__toggle-text" }, this.heading, this.description && i("swirl-text", { as: "span", color: "subdued", size: "sm" }, this.description)), i("span", { class: "accordion-item__icon" }, !this.expanded && i("swirl-icon", { glyph: "chevron-right", size: 20 }), this.expanded && i("swirl-icon", { glyph: "expand-more", size: 20 })))), i("div", { "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, i("slot", null))));
-  }
-  get el() {
-    return s(this);
-  }
-};
-l.style = c;
-export {
-  l as swirl_accordion_item
-};