@getflip/swirl-components-react 0.496.0 → 0.498.0

package/dist/swirl-card.entry.673f0cbe.js

@@ -0,0 +1,50 @@
+import { r as d, c as n, h as e, H as c, g as l } from "./index.ac02d33c.js";
+import { c as h } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const u = () => ':host{display:contents}:host *{box-sizing:border-box}.card{position:relative;display:flex;overflow:hidden;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--swirl-card-background-default);font:inherit;text-decoration:none;flex-direction:column;transition:background-color 0.2s}.card:not(.card--has-image) .card__image{overflow:hidden;height:0}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{--swirl-avatar-background-color:var(--s-surface-raised-hovered);background-color:var(--swirl-card-background-hovered)}a.card:active,button.card:active,.card--interactive:active{--swirl-avatar-background-color:var(--s-surface-raised-pressed);background-color:var(--swirl-card-background-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.card--is--borderless{border:0}.card--elevated.card--elevation-level-1{box-shadow:var(--s-shadow-level-1)}.card--elevated.card--elevation-level-2{box-shadow:var(--s-shadow-level-2)}.card--elevated.card--elevation-level-3{box-shadow:var(--s-shadow-level-3)}.card--flashing{background-color:var(--swirl-card-background-pressed)}.card--flashing.card--intent-default-subdued{background-color:var(--s-surface-raised-pressed)}.card--flashing.card--intent-highlight{background-color:var(--s-surface-highlight-pressed)}.card--highlighted{border-width:0.1875rem;border-color:var(--s-border-highlight)}.card--justify-content-start .card__body{justify-content:flex-start}.card--justify-content-center .card__body{justify-content:center}.card--justify-content-end .card__body{justify-content:flex-end}.card--intent-critical-subdued{background-color:var(--s-surface-critical-subdued)}.card--intent-default-subdued{background-color:var(--s-surface-raised-default)}.card--intent-info-subdued{background-color:var(--s-surface-info-subdued)}.card--intent-success-subdued{background-color:var(--s-surface-success-subdued)}.card--intent-warning-subdued{background-color:var(--s-surface-warning-subdued)}.card--intent-highlight{color:var(--s-text-on-surface-highlight);background-color:var(--s-surface-highlight-default)}.card--translucent{background-color:transparent}.card--translucent:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));border-radius:inherit}.card--has-floating-controls:focus-within .card__floating-controls,.card--has-floating-controls:hover .card__floating-controls{pointer-events:auto;opacity:1}.content-section{padding:0 var(--s-space-16)}.card__image{overflow:hidden;min-height:0}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__floating-controls{position:absolute;z-index:1;top:0;right:0;padding:var(--s-space-12);transition:opacity 0.2s;pointer-events:none;opacity:0}.card__body{display:flex;min-height:0;padding:var(--s-space-12) var(--s-space-16) var(--s-space-16);flex-grow:1;flex-direction:column;gap:var(--s-space-16)}.card__content{min-height:100%}@media print{.card{overflow:visible;height:auto;min-height:-webkit-fit-content;min-height:-moz-fit-content;min-height:fit-content}.card__body{min-height:auto;flex-grow:0}.card__content{min-height:auto}}', g = ["xs", "sm", "base", "l", "xl"], f = class {
+  constructor(a) {
+    d(this, a), this.componentLoad = n(this, "componentLoad", 7), this.as = "div", this.borderRadius = "base", this.elevationLevel = 3, this.intent = "default", this.justifyContent = "start", this.flashing = !1;
+  }
+  async flash(a = 5e3) {
+    Boolean(this.flashingTimeout) && (clearTimeout(this.flashingTimeout), this.flashingTimeout = void 0), this.flashing = !0, this.flashingTimeout = setTimeout(() => {
+      this.flashing = !1;
+    }, a);
+  }
+  componentDidLoad() {
+    this.componentLoad.emit();
+  }
+  render() {
+    const a = Boolean(this.href) ? "a" : this.as, t = Boolean(this.el.querySelector('[slot="floating-controls"]')), r = Boolean(this.el.querySelector('[slot="image"]')), i = {
+      ...this.customBackgroundColor ? { "--swirl-card-background-default": this.customBackgroundColor } : {},
+      backdropFilter: this.customBackdropFilter,
+      borderRadius: g.includes(this.borderRadius) ? `var(--s-border-radius-${this.borderRadius})` : this.borderRadius,
+      height: this.height,
+      minHeight: this.minHeight,
+      overflow: this.overflow
+    }, s = {
+      padding: Boolean(this.padding) ? `var(--s-space-${this.padding})` : void 0,
+      paddingBlockEnd: Boolean(this.paddingBlockEnd) ? `var(--s-space-${this.paddingBlockEnd})` : void 0,
+      paddingBlockStart: Boolean(this.paddingBlockStart) ? `var(--s-space-${this.paddingBlockStart})` : void 0,
+      paddingInlineEnd: Boolean(this.paddingInlineEnd) ? `var(--s-space-${this.paddingInlineEnd})` : void 0,
+      paddingInlineStart: Boolean(this.paddingInlineStart) ? `var(--s-space-${this.paddingInlineStart})` : void 0
+    }, o = h("card", `card--elevation-level-${this.elevationLevel}`, `card--intent-${this.intent}`, `card--justify-content-${this.justifyContent}`, {
+      "card--elevated": this.elevated,
+      "card--flashing": this.flashing,
+      "card--has-floating-controls": t,
+      "card--has-image": r,
+      "card--highlighted": this.highlighted,
+      "card--interactive": this.interactive || this.href,
+      "card--translucent": this.translucent,
+      "card--is--borderless": this.isBorderless
+    });
+    return e(c, { key: "5d3e28cd329ea9312db055ec26603471b2769b5f", styles: { height: this.height } }, e(a, { key: "1a0a88412a4c09d94dc26216a0d1508d2c7e1e9c", "aria-current": this.swirlAriaCurrent, "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: o, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank" ? "noreferrer" : void 0, style: i, target: this.linkTarget }, e("div", { key: "19531ee30d16e58045cf88cb2a2c131840361832", class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, e("slot", { key: "1ceb9d2bdad0fcd627f6d9729d12cedac0439083", name: "image" })), e("div", { key: "5c4da7197a80d912a12358e324a1be859ee0db7d", class: "card__floating-controls" }, e("slot", { key: "8fbaada621865c95bfddbc9c54e18721afbbe969", name: "floating-controls" })), e("div", { key: "dd5daf282b659d12c10de972420eb07cc5c58f81", class: "card__body", style: s }, e("div", { key: "964a2d0f76da2ef99e73223c5682c196235b89c1", class: "card__content" }, e("slot", { key: "eaf859000c7414ba1780d7c3dda62675570ab204", name: "content" })))));
+  }
+  get el() {
+    return l(this);
+  }
+};
+f.style = u();
+export {
+  f as swirl_card
+};

package/dist/swirl-carousel-slide.entry.55db9953.js

@@ -0,0 +1,23 @@
+import { r as i, h as e, H as t } from "./index.ac02d33c.js";
+import { c as a } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const o = () => ":host{display:block;min-width:0}:host(.carousel-slide--has-min-height) ::slotted(*){height:100%}:host *{box-sizing:border-box}:host ::slotted(*){width:100%;min-height:100%}", l = class {
+  constructor(s) {
+    i(this, s), this.width = "15.5rem";
+  }
+  render() {
+    const s = a("carousel-slide", {
+      "carousel-slide--has-min-height": Boolean(this.minHeight)
+    });
+    return e(t, { key: "3dee76aae503080b212ab304b1b2d4bc11c3fc0c", "aria-roledescription": "slide", "aria-label": this.label, class: s, role: "group", style: {
+      aspectRatio: this.aspectRatio,
+      flexBasis: this.width,
+      minHeight: this.minHeight
+    }, tabIndex: 0 }, e("slot", { key: "18395f1c057a4b8adfea8f96599fccdaeade58ab" }));
+  }
+};
+l.style = o();
+export {
+  l as swirl_carousel_slide
+};

package/dist/swirl-carousel.entry.c3e51d51.js

@@ -0,0 +1,91 @@
+import { r as a, c as n, h as l, H as r, g as d } from "./index.ac02d33c.js";
+import { c } from "./index-orsBiyT_.fc4357c3.js";
+import { d as h } from "./utils-CCck-DTo.e4e43b6a.js";
+import "react";
+import "react-dom";
+const u = () => ':host{--swirl-carousel-spacing:var(--s-space-16);--swirl-carousel-fade-color:var(--s-background-default);position:relative;display:block;overflow:hidden;width:100%}:host(:hover) .carousel__previous-slide-button,:host(:hover) .carousel__next-slide-button{pointer-events:auto}:host *{box-sizing:border-box}.carousel{position:relative;overflow:hidden;width:100%}.carousel:before,.carousel:after{position:absolute;z-index:1;top:0;width:var(--s-space-32);height:100%;content:"";transition:opacity 0.2s;pointer-events:none;opacity:0}.carousel:before{left:0;background:linear-gradient(       90deg,       var(--swirl-carousel-fade-color) 0%,       transparent 100%     )}.carousel:after{right:0;background:linear-gradient(       270deg,       var(--swirl-carousel-fade-color) 0%,       transparent 100%     )}.carousel--fade:before,.carousel--fade:after{opacity:1}.carousel--is-at-start:before,.carousel--is-at-end:after{opacity:0}.carousel__slides{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;width:100%;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}.carousel__slides::-webkit-scrollbar{display:none}.carousel__slides ::slotted(*:not(:first-of-type)){margin-left:var(--swirl-carousel-spacing)}.carousel__slides ::slotted(*){flex-grow:0;flex-shrink:0;scroll-snap-align:start}.carousel__previous-slide-button,.carousel__next-slide-button{position:absolute;z-index:2;top:50%;transform:translateY(-50%) scale(0.72);pointer-events:none}.carousel__previous-slide-button{left:var(--s-space-4)}.carousel__next-slide-button{right:var(--s-space-4)}', f = class {
+  constructor(t) {
+    a(this, t), this.activeSlidesChange = n(this, "activeSlidesChange", 7), this.nextSlideButtonLabel = "Next slide", this.previousSlideButtonLabel = "Previous slide", this.fade = !1, this.fadeColor = "default", this.loopAround = !1, this.padding = "16", this.spacing = "16", this.activeSlides = [], this.carouselFadeColorMap = {
+      default: "var(--s-background-default)",
+      "on-surface-overlay": "var(--s-surface-overlay-default)"
+    }, this.updateActiveSlideReferences = h(() => {
+      const e = this.getActiveSlides();
+      e.some((i, o) => this.activeSlides[o] !== i) && (this.activeSlides = e, this.activeSlidesChange.emit(this.activeSlides));
+    }, 100), this.onPreviousSlideButtonClick = () => {
+      this.previousSlide();
+    }, this.onNextSlideButtonClick = () => {
+      this.nextSlide();
+    }, this.onSlotChange = () => {
+      this.activeSlides.length && this.scrollToElement(this.activeSlides[0]), this.checkScrollStatus(), this.checkScrollPosition();
+    }, this.onScroll = () => {
+      this.updateActiveSlideReferences(), this.checkScrollPosition();
+    };
+  }
+  onWindowResize() {
+    this.checkScrollStatus(), this.checkScrollPosition();
+  }
+  componentDidLoad() {
+    queueMicrotask(() => {
+      !this.el.isConnected || (this.checkScrollStatus(), this.checkScrollPosition());
+    });
+  }
+  async scrollToSlide(t) {
+    const s = this.getSlides().find((i) => i.id === t);
+    !Boolean(s) || this.scrollToElement(s);
+  }
+  scrollToElement(t) {
+    var e;
+    this.slidesContainer && t && ((e = this.slidesContainer) == null || e.scroll({
+      left: t.offsetLeft,
+      behavior: "smooth"
+    }));
+  }
+  previousSlide() {
+    const t = this.getSlides(), e = this.getActiveSlides(), s = e[0].previousElementSibling || (this.loopAround ? t[t.length - 1] : e[0]);
+    this.scrollToElement(s);
+  }
+  nextSlide() {
+    const t = this.getSlides(), e = this.getActiveSlides(), i = !Boolean(e[e.length - 1].nextElementSibling) && this.loopAround ? t[0] : e[0].nextElementSibling;
+    this.scrollToElement(i);
+  }
+  getSlides() {
+    return Array.from(this.el.querySelectorAll("swirl-carousel-slide"));
+  }
+  getActiveSlides() {
+    return this.getSlides().filter((e) => this.checkInView(e));
+  }
+  checkScrollStatus() {
+    this.isScrollable = this.slidesContainer.scrollWidth > this.slidesContainer.offsetWidth;
+  }
+  checkScrollPosition() {
+    const t = this.getSlides(), e = this.getActiveSlides(), s = e[0] === t[0], i = e[e.length - 1] === t[t.length - 1];
+    s !== this.isAtStart && (this.isAtStart = s), i !== this.isAtEnd && (this.isAtEnd = i);
+  }
+  checkInView(t) {
+    let e = this.slidesContainer.scrollLeft, s = e + this.slidesContainer.clientWidth, i = t.offsetLeft, o = i + t.clientWidth;
+    return i >= e && o <= s;
+  }
+  render() {
+    this.el.style.setProperty("--swirl-carousel-spacing", `${this.spacing}px`), this.el.style.setProperty("--swirl-carousel-fade-color", this.carouselFadeColorMap[this.fadeColor]);
+    const t = {
+      padding: Boolean(this.padding) ? `var(--s-space-${this.padding})` : void 0,
+      paddingBlockEnd: Boolean(this.paddingBlockEnd) ? `var(--s-space-${this.paddingBlockEnd})` : void 0,
+      paddingBlockStart: Boolean(this.paddingBlockStart) ? `var(--s-space-${this.paddingBlockStart})` : void 0,
+      paddingInlineEnd: Boolean(this.paddingInlineEnd) ? `var(--s-space-${this.paddingInlineEnd})` : void 0,
+      paddingInlineStart: Boolean(this.paddingInlineStart) ? `var(--s-space-${this.paddingInlineStart})` : void 0,
+      scrollPadding: Boolean(this.paddingInlineStart) ? `var(--s-space-${this.paddingInlineStart})` : Boolean(this.padding) ? `var(--s-space-${this.padding})` : void 0
+    }, e = c("carousel", {
+      "carousel--fade": this.fade,
+      "carousel--is-at-start": this.isAtStart,
+      "carousel--is-at-end": this.isAtEnd
+    });
+    return l(r, { key: "840096feefd373763dd50a841d3774fb3d466b99", "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, l("div", { key: "535cf444029aa486567192b5cf8d72b52df569f4", class: e }, this.isScrollable && !this.isAtStart && l("swirl-button", { key: "4608b5385dc0b8ee293213a9d849632f2c32e53b", class: "carousel__previous-slide-button", hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: !0, variant: "translucent" }), this.isScrollable && !this.isAtEnd && l("swirl-button", { key: "e8d73e19115dcd30b0fc2b416183e72ff82bdc22", class: "carousel__next-slide-button", hideLabel: !0, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: !0, variant: "translucent" }), l("div", { key: "64c2b7b2a9cfb305591e8bbe44bff581b5651564", "aria-live": "polite", class: "carousel__slides", style: t, onScroll: this.onScroll, ref: (s) => this.slidesContainer = s }, l("slot", { key: "417793d107b7c1f49561138d00fcbaa4a3d87c45", onSlotchange: this.onSlotChange }))));
+  }
+  get el() {
+    return d(this);
+  }
+};
+f.style = u();
+export {
+  f as swirl_carousel
+};

package/dist/swirl-checkbox.entry.1b6fec34.js

@@ -0,0 +1,28 @@
+import { r as b, c as d, h as c, H as t } from "./index.ac02d33c.js";
+import { c as l } from "./index-orsBiyT_.fc4357c3.js";
+import "react";
+import "react-dom";
+const n = () => '.sc-swirl-checkbox-h{display:inline-flex}.sc-swirl-checkbox-h *.sc-swirl-checkbox{box-sizing:border-box}.checkbox.sc-swirl-checkbox{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer;flex-grow:1}.checkbox.sc-swirl-checkbox:focus-within .checkbox__box.sc-swirl-checkbox{box-shadow:0 0 0 0.0625rem var(--s-background-default),       0 0 0 0.1875rem var(--s-focus-default)}.checkbox--variant-card.sc-swirl-checkbox{width:100%;padding:var(--s-space-16);border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface)}.checkbox--variant-card.sc-swirl-checkbox:focus-within{box-shadow:0 0 0 0.125rem var(--s-background-default),       0 0 0 0.25rem var(--s-focus-default)}.checkbox--variant-card.sc-swirl-checkbox:focus-within .checkbox__box.sc-swirl-checkbox{box-shadow:none}.checkbox--variant-card.sc-swirl-checkbox:hover:not(.checkbox--disabled){background-color:var(--s-state-hovered)}.checkbox--variant-card.sc-swirl-checkbox:active:not(.checkbox--disabled){background-color:var(--s-state-pressed)}.checkbox--variant-card.checkbox--checked.sc-swirl-checkbox:not(.checkbox--disabled){border-color:var(--s-border-highlight)}.checkbox--variant-card.checkbox--invalid.sc-swirl-checkbox:not(.checkbox--disabled){border-color:var(--s-border-critical)}.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.checkbox--invalid.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--invalid.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-critical)}.checkbox--invalid.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-critical)}.checkbox--disabled.sc-swirl-checkbox{cursor:default}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:transparent}.checkbox--disabled.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__label.sc-swirl-checkbox,.checkbox--disabled.sc-swirl-checkbox .checkbox__description.sc-swirl-checkbox{color:var(--s-text-disabled)}.checkbox--label-weight-regular.sc-swirl-checkbox .checkbox__label.sc-swirl-checkbox{font-weight:var(--s-font-weight-regular)}.checkbox__control.sc-swirl-checkbox{position:relative;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__control.sc-swirl-checkbox{width:1.375rem;height:1.375rem}}.checkbox__box.sc-swirl-checkbox{position:relative;z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.checkbox__icon.sc-swirl-checkbox{display:inline-flex;width:1.0625rem;height:1.0625rem}.checkbox__icon.sc-swirl-checkbox>*.sc-swirl-checkbox::part(icon),.checkbox__icon.sc-swirl-checkbox>*.sc-swirl-checkbox [part~="icon"]{width:1.0625rem;height:1.0625rem}.checkbox__indeterminate-icon.sc-swirl-checkbox{position:relative;width:100%;height:100%}.checkbox__indeterminate-icon.sc-swirl-checkbox:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:"";transform:translate3d(-50%, -50%, 0)}.checkbox__label-container.sc-swirl-checkbox{display:inline-flex;margin-left:var(--s-space-8);align-items:flex-start;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__label-container.sc-swirl-checkbox{padding-top:var(--s-space-2)}}.checkbox__label.sc-swirl-checkbox{font-weight:var(--s-font-weight-medium)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__label.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.checkbox__description.sc-swirl-checkbox{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__description.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}', x = class {
+  constructor(e) {
+    b(this, e), this.valueChange = d(this, "valueChange", 7), this.checked = !1, this.disabled = !1, this.labelWeight = "medium", this.variant = "default", this.onChange = () => {
+      this.checked = !(this.checked === !0 || this.checked === "true"), this.valueChange.emit(this.checked);
+    };
+  }
+  getAriaCheckedLabel(e, i) {
+    return e ? "true" : i ? "false" : "mixed";
+  }
+  render() {
+    const e = this.checked === !1 || this.checked === "false", i = this.checked === !0 || this.checked === "true", o = this.checked === "indeterminate", s = Boolean(this.label) || Boolean(this.description), r = this.getAriaCheckedLabel(i, e), h = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, a = l("checkbox", `checkbox--label-weight-${this.labelWeight}`, `checkbox--variant-${this.variant}`, {
+      "checkbox--checked": i,
+      "checkbox--disabled": this.disabled,
+      "checkbox--indeterminate": o,
+      "checkbox--invalid": this.invalid,
+      "checkbox--unchecked": e
+    });
+    return c(t, { key: "9594d167dd79813f182cc7adf684966be8e8fe57", style: { width: this.variant === "card" ? "100%" : void 0 } }, c("label", { key: "d26e11bdc87328b21e109f191e0d6e0905490b7f", class: a, htmlFor: this.inputId }, c("span", { key: "3a856c000cdcc555d535393267cac270518247d6", class: "checkbox__control" }, c("swirl-visually-hidden", { key: "de6884b6b8fd2a64e69dc6f0b10367baa2b4becc" }, c("input", { key: "25b14da328f1dee60de559d2ef5df4c4d7a166ef", "aria-checked": r, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": h, "aria-label": this.swirlAriaLabel, checked: i, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: o, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), c("span", { key: "f94ce6f89d7c3720c7d18aa932d3f0ca04abd962", "aria-hidden": "true", class: "checkbox__box" }, c("span", { key: "d74a5926836db3d63b390696a4901f53e457b9a9", class: "checkbox__icon" }, i && c("swirl-icon-check-strong", { key: "c986d82eca02a1026f0b95d3a04241a6d8038b13" }), o && c("span", { key: "45fc5c9fdaf8945747a3b1e365c7983c43e10f9c", class: "checkbox__indeterminate-icon" })))), s && c("span", { key: "60461a591a4249ceabe91e1f97ec82038a5a8c2a", class: "checkbox__label-container" }, this.label && c("span", { key: "04ff9af0785c912b256096745f822226f3d20e82", class: "checkbox__label" }, this.label), this.description && c("span", { key: "d9171656da199aaecb0294d63d1dd910fcfa9eef", class: "checkbox__description" }, this.description))));
+  }
+};
+x.style = n();
+export {
+  x as swirl_checkbox
+};

package/dist/swirl-chip.entry.e951fcce.js

@@ -0,0 +1,52 @@
+import { r as h, c as e, h as i, H as p, g as n } from "./index.ac02d33c.js";
+import { c as o } from "./index-orsBiyT_.fc4357c3.js";
+import { D as l } from "./media-query.service-CCYT6DU8.f0931fdc.js";
+import "react";
+import "react-dom";
+import "./utils-CCck-DTo.e4e43b6a.js";
+const d = () => '.sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h *.sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2.25rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:transparent;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--size-s.sc-swirl-chip{height:2rem}.chip--size-s.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:hover{background-color:var(--s-state-hovered)}.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:active{background-color:var(--s-state-pressed)}.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:active .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical.sc-swirl-chip{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-critical)}.chip--border-radius-sm.sc-swirl-chip{border-radius:var(--s-border-radius-sm)}.chip--intent-success.sc-swirl-chip{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-success)}.chip--intent-highlight.sc-swirl-chip{border-color:var(--s-border-highlight);color:var(--s-text-highlight)}.chip--intent-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--variant-outline.chip--pressed.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default);border-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip .chip__icon.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-text-on-action-primary)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover,.chip--variant-translucent.chip--pressed.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active,.chip--variant-translucent.chip--pressed.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover,.chip--variant-translucent.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active,.chip--variant-translucent.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-translucent.sc-swirl-chip{background:var(--s-translucent-medium-default);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.chip--variant-translucent.chip--interactive.sc-swirl-chip:hover{background:var(--s-translucent-medium-hovered)}.chip--variant-translucent.chip--interactive.sc-swirl-chip:active{background:var(--s-translucent-medium-pressed)}.chip--variant-plain.sc-swirl-chip{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover{background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive.sc-swirl-chip:active{background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12)}.chip--variant-plain.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{position:relative;top:0;right:auto}.chip--variant-plain.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:0;padding-left:0}.chip--variant-plain.sc-swirl-chip .chip__icon.sc-swirl-chip,.chip--variant-plain.sc-swirl-chip .chip__avatar.sc-swirl-chip{margin-left:0}.chip--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.chip--has-progress.sc-swirl-chip:not(.chip--size-s)+.chip__remove-button.sc-swirl-chip{top:0.0625rem}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon.sc-swirl-chip{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__trailing-icon.sc-swirl-chip{display:inline-flex;flex-shrink:0;margin-left:var(--s-space-8)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator.sc-swirl-chip{width:100%}.chip__remove-button.sc-swirl-chip{position:absolute;top:0.1875rem;right:var(--s-space-4);display:inline-flex;width:1.875rem;height:1.875rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-state-hovered)}.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-state-pressed)}', v = class {
+  constructor(c) {
+    h(this, c), this.chipClick = e(this, "chipClick", 7), this.removeChip = e(this, "remove", 7), this.borderRadius = "pill", this.iconColor = "default", this.intent = "default", this.interactive = !1, this.progressBarLabel = "Loading progress", this.removeButtonLabel = "Remove", this.size = "m", this.variant = "outline", this.mediaQueryUnsubscribe = () => {
+    };
+  }
+  componentDidLoad() {
+    this.mediaQueryUnsubscribe = l.subscribe((c) => {
+      this.isDesktop = c, this.forceIconProps();
+    });
+  }
+  componentDidRender() {
+    this.forceIconProps();
+  }
+  disconnectedCallback() {
+    this.mediaQueryUnsubscribe();
+  }
+  forceIconProps() {
+    if (!Boolean(this.iconEl) && !Boolean(this.trailingIconEl))
+      return;
+    const c = this.size === "s" ? "16" : this.isDesktop ? "20" : "24";
+    if (this.iconEl) {
+      const r = this.iconEl.children[0];
+      r == null || r.setAttribute("size", c);
+    }
+    if (this.trailingIconEl) {
+      const r = this.trailingIconEl.children[0];
+      r == null || r.setAttribute("size", c);
+    }
+  }
+  render() {
+    const c = this.interactive || this.pressed !== void 0 ? "button" : "span", r = Boolean(this.el.querySelector('[slot="avatar"]')), a = !r && Boolean(this.icon), t = o("chip", `chip--border-radius-${this.borderRadius}`, `chip--icon-color-${this.iconColor}`, `chip--intent-${this.intent}`, `chip--size-${this.size}`, `chip--variant-${this.variant}`, {
+      "chip--pressed": this.pressed,
+      "chip--has-progress": this.progress !== void 0,
+      "chip--interactive": this.interactive || this.pressed !== void 0,
+      "chip--removable": this.removable
+    });
+    return i(p, { key: "556b0ebe143aae953feb22d5fffb385da98331b2" }, i(c, { key: "d6f2d8fdfe06e7197632a1276046f9982d88a033", "aria-pressed": this.pressed !== void 0 ? String(this.pressed) : void 0, class: t, onClick: this.chipClick.emit, type: this.interactive ? "button" : void 0 }, i("span", { key: "fd8aac7bfc2435a277df0be543d4c219483e5bec", class: "chip__inner" }, r && i("span", { key: "bf9c36ecbbb30672cb804bece5b67613a38c7602", class: "chip__avatar" }, i("slot", { key: "828c82e1f0d291ef766e8dd539737555d94f5d86", name: "avatar" })), a && i("span", { key: "5d82eee4688b3250b19f10a9c5efedda7f03e187", class: "chip__icon", innerHTML: this.icon, ref: (s) => this.iconEl = s }), i("span", { key: "e4e65bd102603bd86031687ce843f0556431158b", class: "chip__label" }, this.label), this.trailingIcon && i("span", { key: "ae819833c08132dbf18f6a1cf26b980030f229d1", class: "chip__trailing-icon", innerHTML: this.trailingIcon, ref: (s) => this.trailingIconEl = s })), this.progress !== void 0 && i("span", { key: "371d5d577137fe5f58653b6f2bf5afe6f2c75a29", class: "chip__progress-indicator" }, i("swirl-progress-indicator", { key: "8024a8596c0f3e2ddb983184cf69a3226dd139f5", label: this.progressBarLabel, value: this.progress }))), this.removable && i("button", { key: "be2e97f005c28e54e52d618734bbc783b495c479", "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, i("swirl-icon-close", { key: "9c59678ddc6aa518e7bc8d2618783cd7e7ee0057", size: 20 })));
+  }
+  get el() {
+    return n(this);
+  }
+};
+v.style = d();
+export {
+  v as swirl_chip
+};

package/dist/swirl-color-input.entry.c91404b0.js

@@ -0,0 +1,272 @@
+import { r as L, c as g, h as l, H as B } from "./index.ac02d33c.js";
+import { c as T } from "./index-orsBiyT_.fc4357c3.js";
+import { v as z } from "./v4-DD3477fe.2624487e.js";
+import "react";
+import "react-dom";
+const d = (e, t = 0, o = 1) => e > o ? o : e < t ? t : e, i = (e, t = 0, o = Math.pow(10, t)) => Math.round(o * e) / o, F = (e) => O(v(e)), v = (e) => (e[0] === "#" && (e = e.substring(1)), e.length < 6 ? {
+  r: parseInt(e[0] + e[0], 16),
+  g: parseInt(e[1] + e[1], 16),
+  b: parseInt(e[2] + e[2], 16),
+  a: e.length === 4 ? i(parseInt(e[3] + e[3], 16) / 255, 2) : 1
+} : {
+  r: parseInt(e.substring(0, 2), 16),
+  g: parseInt(e.substring(2, 4), 16),
+  b: parseInt(e.substring(4, 6), 16),
+  a: e.length === 8 ? i(parseInt(e.substring(6, 8), 16) / 255, 2) : 1
+}), A = (e) => D(q(e)), P = ({ h: e, s: t, v: o, a: s }) => {
+  const r = (200 - t) * o / 100;
+  return {
+    h: i(e),
+    s: i(r > 0 && r < 200 ? t * o / 100 / (r <= 100 ? r : 200 - r) * 100 : 0),
+    l: i(r / 2),
+    a: i(s, 2)
+  };
+}, w = (e) => {
+  const { h: t, s: o, l: s } = P(e);
+  return `hsl(${t}, ${o}%, ${s}%)`;
+}, q = ({ h: e, s: t, v: o, a: s }) => {
+  e = e / 360 * 6, t = t / 100, o = o / 100;
+  const r = Math.floor(e), n = o * (1 - t), a = o * (1 - (e - r) * t), p = o * (1 - (1 - e + r) * t), b = r % 6;
+  return {
+    r: i([o, a, n, n, p, o][b] * 255),
+    g: i([p, o, o, a, n, n][b] * 255),
+    b: i([n, n, p, o, o, a][b] * 255),
+    a: i(s, 2)
+  };
+}, u = (e) => {
+  const t = e.toString(16);
+  return t.length < 2 ? "0" + t : t;
+}, D = ({ r: e, g: t, b: o, a: s }) => {
+  const r = s < 1 ? u(i(s * 255)) : "";
+  return "#" + u(e) + u(t) + u(o) + r;
+}, O = ({ r: e, g: t, b: o, a: s }) => {
+  const r = Math.max(e, t, o), n = r - Math.min(e, t, o), a = n ? r === e ? (t - o) / n : r === t ? 2 + (o - e) / n : 4 + (e - t) / n : 0;
+  return {
+    h: i(60 * (a < 0 ? a + 6 : a)),
+    s: i(r ? n / r * 100 : 0),
+    v: i(r / 255 * 100),
+    a: s
+  };
+}, I = (e, t) => {
+  if (e === t)
+    return !0;
+  for (const o in e)
+    if (e[o] !== t[o])
+      return !1;
+  return !0;
+}, N = (e, t) => e.toLowerCase() === t.toLowerCase() ? !0 : I(v(e), v(t)), y = {}, M = (e) => {
+  let t = y[e];
+  return t || (t = document.createElement("template"), t.innerHTML = e, y[e] = t), t;
+}, x = (e, t, o) => {
+  e.dispatchEvent(new CustomEvent(t, {
+    bubbles: !0,
+    detail: o
+  }));
+};
+let c = !1;
+const k = (e) => "touches" in e, R = (e) => c && !k(e) ? !1 : (c || (c = k(e)), !0), C = (e, t) => {
+  const o = k(t) ? t.touches[0] : t, s = e.el.getBoundingClientRect();
+  x(e.el, "move", e.getMove({
+    x: d((o.pageX - (s.left + window.pageXOffset)) / s.width),
+    y: d((o.pageY - (s.top + window.pageYOffset)) / s.height)
+  }));
+}, V = (e, t) => {
+  const o = t.keyCode;
+  o > 40 || e.xy && o < 37 || o < 33 || (t.preventDefault(), x(e.el, "move", e.getMove({
+    x: o === 39 ? 0.01 : o === 37 ? -0.01 : o === 34 ? 0.05 : o === 33 ? -0.05 : o === 35 ? 1 : o === 36 ? -1 : 0,
+    y: o === 40 ? 0.01 : o === 38 ? -0.01 : 0
+  }, !0)));
+};
+class _ {
+  constructor(t, o, s, r) {
+    const n = M(`<div role="slider" tabindex="0" part="${o}" ${s}><div part="${o}-pointer"></div></div>`);
+    t.appendChild(n.content.cloneNode(!0));
+    const a = t.querySelector(`[part=${o}]`);
+    a.addEventListener("mousedown", this), a.addEventListener("touchstart", this), a.addEventListener("keydown", this), this.el = a, this.xy = r, this.nodes = [a.firstChild, a];
+  }
+  set dragging(t) {
+    const o = t ? document.addEventListener : document.removeEventListener;
+    o(c ? "touchmove" : "mousemove", this), o(c ? "touchend" : "mouseup", this);
+  }
+  handleEvent(t) {
+    switch (t.type) {
+      case "mousedown":
+      case "touchstart":
+        if (t.preventDefault(), !R(t) || !c && t.button != 0)
+          return;
+        this.el.focus(), C(this, t), this.dragging = !0;
+        break;
+      case "mousemove":
+      case "touchmove":
+        t.preventDefault(), C(this, t);
+        break;
+      case "mouseup":
+      case "touchend":
+        this.dragging = !1;
+        break;
+      case "keydown":
+        V(this, t);
+        break;
+    }
+  }
+  style(t) {
+    t.forEach((o, s) => {
+      for (const r in o)
+        this.nodes[s].style.setProperty(r, o[r]);
+    });
+  }
+}
+class j extends _ {
+  constructor(t) {
+    super(t, "hue", 'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"', !1);
+  }
+  update({ h: t }) {
+    this.h = t, this.style([
+      {
+        left: `${t / 360 * 100}%`,
+        color: w({ h: t, s: 100, v: 100, a: 1 })
+      }
+    ]), this.el.setAttribute("aria-valuenow", `${i(t)}`);
+  }
+  getMove(t, o) {
+    return { h: o ? d(this.h + t.x * 360, 0, 360) : 360 * t.x };
+  }
+}
+class X extends _ {
+  constructor(t) {
+    super(t, "saturation", 'aria-label="Color"', !0);
+  }
+  update(t) {
+    this.hsva = t, this.style([
+      {
+        top: `${100 - t.v}%`,
+        left: `${t.s}%`,
+        color: w(t)
+      },
+      {
+        "background-color": w({ h: t.h, s: 100, v: 100, a: 1 })
+      }
+    ]), this.el.setAttribute("aria-valuetext", `Saturation ${i(t.s)}%, Brightness ${i(t.v)}%`);
+  }
+  getMove(t, o) {
+    return {
+      s: o ? d(this.hsva.s + t.x * 100, 0, 100) : t.x * 100,
+      v: o ? d(this.hsva.v - t.y * 100, 0, 100) : Math.round(100 - t.y * 100)
+    };
+  }
+}
+var Y = ':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}', G = "[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}", J = "[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}";
+const h = Symbol("same"), f = Symbol("color"), $ = Symbol("hsva"), m = Symbol("update"), E = Symbol("parts"), H = Symbol("css"), S = Symbol("sliders");
+class K extends HTMLElement {
+  static get observedAttributes() {
+    return ["color"];
+  }
+  get [H]() {
+    return [Y, G, J];
+  }
+  get [S]() {
+    return [X, j];
+  }
+  get color() {
+    return this[f];
+  }
+  set color(t) {
+    if (!this[h](t)) {
+      const o = this.colorModel.toHsva(t);
+      this[m](o), this[f] = t;
+    }
+  }
+  constructor() {
+    super();
+    const t = M(`<style>${this[H].join("")}</style>`), o = this.attachShadow({ mode: "open" });
+    o.appendChild(t.content.cloneNode(!0)), o.addEventListener("move", this), this[E] = this[S].map((s) => new s(o));
+  }
+  connectedCallback() {
+    if (this.hasOwnProperty("color")) {
+      const t = this.color;
+      delete this.color, this.color = t;
+    } else
+      this.color || (this.color = this.colorModel.defaultColor);
+  }
+  attributeChangedCallback(t, o, s) {
+    const r = this.colorModel.fromAttr(s);
+    this[h](r) || (this.color = r);
+  }
+  handleEvent(t) {
+    const o = this[$], s = { ...o, ...t.detail };
+    this[m](s);
+    let r;
+    !I(s, o) && !this[h](r = this.colorModel.fromHsva(s)) && (this[f] = r, x(this, "color-changed", { value: r }));
+  }
+  [h](t) {
+    return this.color && this.colorModel.equal(t, this.color);
+  }
+  [m](t) {
+    this[$] = t, this[E].forEach((o) => o.update(t));
+  }
+}
+const Q = {
+  defaultColor: "#000",
+  toHsva: F,
+  fromHsva: ({ h: e, s: t, v: o }) => A({ h: e, s: t, v: o, a: 1 }),
+  equal: N,
+  fromAttr: (e) => e
+};
+class U extends K {
+  get colorModel() {
+    return Q;
+  }
+}
+class W extends U {
+}
+customElements.define("hex-color-picker", W);
+const Z = () => ".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-input-h *.sc-swirl-color-input{box-sizing:border-box}.color-input.sc-swirl-color-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.color-input--inline.sc-swirl-color-input .color-input__preview-button.sc-swirl-color-input{width:1.5rem;height:1.5rem;margin-top:-0.125rem;margin-right:-0.25rem;margin-bottom:-0.125rem}.color-input__input.sc-swirl-color-input{display:inline-flex;width:100%;margin:0;padding:0;flex-grow:1;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.color-input__input.sc-swirl-color-input:focus{outline:none}.color-input__input.sc-swirl-color-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.color-input__input.sc-swirl-color-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.color-input__preview-button.sc-swirl-color-input{width:2.75rem;height:2.75rem;margin-top:-1.25rem;flex-shrink:0;border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-s);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}", tt = class {
+  constructor(e) {
+    L(this, e), this.inputBlur = g(this, "inputBlur", 7), this.inputFocus = g(this, "inputFocus", 7), this.valueChange = g(this, "valueChange", 7), this.pickerButtonLabel = "Open color picker", this.pickerLabel = "Color picker", this.pickerId = `color-picker-${z()}`, this.onPickerChange = (t) => {
+      this.value = t.detail.value;
+    }, this.onChange = (t) => {
+      const o = t.target;
+      this.value = o.value;
+    }, this.onBlur = (t) => {
+      this.inputBlur.emit(t);
+    }, this.onFocus = (t) => {
+      this.inputFocus.emit(t), this.handleAutoSelect(t);
+    }, this.onInput = (t) => {
+      this.onChange(t);
+    };
+  }
+  componentDidLoad() {
+    this.autoFocus && setTimeout(() => {
+      this.inputEl.focus();
+    }), this.picker.addEventListener("color-changed", this.onPickerChange);
+  }
+  disconnectedCallback() {
+    var e;
+    (e = this.picker) == null || e.removeEventListener("color-changed", this.onPickerChange);
+  }
+  watchValue(e, t) {
+    e !== t && this.valueChange.emit(e);
+  }
+  handleAutoSelect(e) {
+    !this.autoSelect || e.target.select();
+  }
+  render() {
+    const e = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, t = T("color-input", {
+      "color-input--inline": this.inline
+    });
+    return l(B, { key: "8faa0ba1fdf6d55cd5e9ff8d1cb42738d586a0eb" }, l("div", { key: "fbc9200a7318669ace362f25510124ced61b418b", class: t }, l("input", { key: "7837f8b509251caf79d46a6341cb0e43772a246b", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": e, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (o) => this.inputEl = o, required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), l("swirl-popover-trigger", { key: "256e94f88ee8b0ce91d3c22bd5236ab7aa2be07e", swirlPopover: this.pickerId }, l("button", { key: "1b0b3b76331731d3c1af0d73ccb6dde06326184b", disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+      backgroundColor: this.disabled ? "var(--s-border-subdued)" : this.value
+    }, type: "button" })), l("swirl-popover", { key: "d93b43a8b6d680d7d52743dde653a8333d67d514", animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, l("swirl-box", { key: "3189ed30ad815e64b265e1f3c3b4464e5799b7ca", centerInline: !0, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, l("hex-color-picker", { key: "e2cd1e63d998d906b824c5d0c8e4a6eaedfe23f3", color: this.value, ref: (o) => this.picker = o })))));
+  }
+  static get watchers() {
+    return {
+      value: [{
+        watchValue: 0
+      }]
+    };
+  }
+};
+tt.style = Z();
+export {
+  tt as swirl_color_input
+};

package/dist/swirl-columns.entry.25ef4c16.js

@@ -0,0 +1,18 @@
+import { r as o, h as s, H as r } from "./index.ac02d33c.js";
+import "react";
+import "react-dom";
+const t = () => ":host{display:block}:host *{box-sizing:border-box}.columns{display:grid;width:100%}", a = class {
+  constructor(e) {
+    o(this, e), this.columns = "repeat(3, minmax(0, 1fr))";
+  }
+  render() {
+    return s(r, { key: "58dca0f53eb7169ebed52d040da35e407e939fba" }, s("div", { key: "2c0cb89f1f7029da7265531cfa38d2e49b76dd30", class: "columns", style: {
+      gridTemplateColumns: this.columns,
+      gap: `var(--s-space-${this.spacing})`
+    } }, s("slot", { key: "3c2f0ed4c1d8a60e9e9079fe17986bbdf79468f9" })));
+  }
+};
+a.style = t();
+export {
+  a as swirl_columns
+};