@getflip/swirl-components-react 0.387.0 → 0.389.0

package/dist/swirl-carousel.entry.4c36b794.js

@@ -1,99 +0,0 @@
-import { r as a, c as n, h as l, H as r, g as d } from "./index.874ea0b7.js";
-import { c } from "./index-orsBiyT_.fc4357c3.js";
-import { d as h } from "./utils-DytJsmhr.20b14d35.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)}`, p = 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((s, o) => this.activeSlides[o] !== s) && (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 i = this.getSlides().find((s) => s.id === t);
-    !Boolean(i) || this.scrollToElement(i);
-  }
-  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(), i = e[0].previousElementSibling || (this.loopAround ? t[t.length - 1] : e[0]);
-    this.scrollToElement(i);
-  }
-  nextSlide() {
-    const t = this.getSlides(), e = this.getActiveSlides(), s = !Boolean(e[e.length - 1].nextElementSibling) && this.loopAround ? t[0] : e[0].nextElementSibling;
-    this.scrollToElement(s);
-  }
-  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(), i = e[0] === t[0], s = e[e.length - 1] === t[t.length - 1];
-    i !== this.isAtStart && (this.isAtStart = i), s !== this.isAtEnd && (this.isAtEnd = s);
-  }
-  checkInView(t) {
-    let e = this.slidesContainer.scrollLeft, i = e + this.slidesContainer.clientWidth, s = t.offsetLeft, o = s + t.clientWidth;
-    return s >= e && o <= i;
-  }
-  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: "c5903f0c46a1eaa6129e2a1b73abee0db5bcd9ed", "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, l("div", { key: "a1dfb1a45c399559d25df72add7723b231b5e6b8", class: e }, this.isScrollable && !this.isAtStart && l("swirl-button", { key: "f9e9dd3bb8162550accfcd6b653a3737355f93d4", 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: "floating" }), this.isScrollable && !this.isAtEnd && l("swirl-button", { key: "bc30a83c74273b4b5832338422a95d91e3e67321", 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: "floating" }), l("div", { key: "cb596e62b8517b2d6ff791032b41608c6a5b25be", "aria-live": "polite", class: "carousel__slides", style: t, onScroll: this.onScroll, ref: (i) => this.slidesContainer = i }, l("slot", { key: "0fab582bd3650e63d512e934d03183b3ae9b5901", onSlotchange: this.onSlotChange }))));
-  }
-  get el() {
-    return d(this);
-  }
-};
-p.style = u;
-export {
-  p as swirl_carousel
-};

package/dist/swirl-checkbox.entry.9ebfcac4.js

@@ -1,30 +0,0 @@
-import { r as b, c as l, h as c, H as t } from "./index.874ea0b7.js";
-import { c as d } 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-surface-hovered)}.checkbox--variant-card.sc-swirl-checkbox:active:not(.checkbox--disabled){background-color:var(--s-surface-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){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 = l(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 = d("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: "acf777ca7224f41f607bf84f193ecb05881f1fc1", style: { width: this.variant === "card" ? "100%" : void 0 } }, c("label", { key: "c3a3abc5f9e87d3665ad7c797d44a2acd34c8ee5", class: a, htmlFor: this.inputId }, c("span", { key: "5e49492e10519c0f2f4f6ed187b318bca8316dab", class: "checkbox__control" }, c("swirl-visually-hidden", { key: "06217d12dbc1ea25117e421d8e0e1cebd392f599" }, c("input", { key: "455840493b5e9b60aace6f4a0e2de7e5cece2e78", "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: "8b69f9ae79e957c52066cd80cf0da11fe5613ed2", "aria-hidden": "true", class: "checkbox__box" }, c("span", { key: "cca029718dd23f8c2e0637ce4f44c24b4fb0b289", class: "checkbox__icon" }, i && c("swirl-icon-check-strong", { key: "f3bab31db3d5ab5a6fdc78610abb42763f51154b" }), o && c("span", { key: "7002b8fffbb15b73d84fae98761196bbe6af3347", class: "checkbox__indeterminate-icon" })))), s && c("span", { key: "082ac434bc4dd0c98d983650aab5208a760063e7", class: "checkbox__label-container" }, this.label && c("span", { key: "62737cd8068a70eb10e722c2ff91ae4dc9917f7d", class: "checkbox__label" }, this.label), this.description && c("span", { key: "3e7f891b80511b9a4d811db31b594f2a0429d8b0", class: "checkbox__description" }, this.description))));
-  }
-};
-x.style = n;
-export {
-  x as swirl_checkbox
-};

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

@@ -1,42 +0,0 @@
-import { r as o, c as s, h as i, H as h, g as p } from "./index.874ea0b7.js";
-import { c as n } from "./index-orsBiyT_.fc4357c3.js";
-import { D as l } from "./media-query.service-CpP-qu5C.420e3a83.js";
-import "react";
-import "react-dom";
-import "./utils-DytJsmhr.20b14d35.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.5rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:var(--s-surface-overlay-default);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-surface-overlay-hovered)}.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-raised-default)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--interactive.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-overlay-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--variant-outline.chip--pressed.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:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.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{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-action-primary-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){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){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--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.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__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.3125rem;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:var(--s-surface-overlay-default);cursor:pointer}.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-overlay-hovered)}.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}", v = class {
-  constructor(r) {
-    o(this, r), this.chipClick = s(this, "chipClick", 7), this.removeChip = s(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((r) => {
-      this.forceIconProps(r);
-    });
-  }
-  disconnectedCallback() {
-    this.mediaQueryUnsubscribe();
-  }
-  forceIconProps(r) {
-    if (!Boolean(this.iconEl))
-      return;
-    const e = this.iconEl.children[0], c = this.size === "s" ? "16" : r ? "20" : "24";
-    e == null || e.setAttribute("size", c);
-  }
-  render() {
-    const r = this.interactive || this.pressed !== void 0 ? "button" : "span", e = Boolean(this.el.querySelector('[slot="avatar"]')), c = !e && Boolean(this.icon), a = n("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(h, { key: "b0e65c521dcde5335f3bcd7daaf7359ba5bbe3ec" }, i(r, { key: "a5198b26f19750bd4c8372acdc21e26f3ed8cfe1", "aria-pressed": this.pressed !== void 0 ? String(this.pressed) : void 0, class: a, onClick: this.chipClick.emit, type: this.interactive ? "button" : void 0 }, i("span", { key: "2ed93ce33faf8a1bdc4b07e4f866a10650ae8395", class: "chip__inner" }, e && i("span", { key: "ec44e6a99988aa14dcf330098de8593a1deeaed8", class: "chip__avatar" }, i("slot", { key: "880a8c96422c0f31cbf603676ffecef66c6bff21", name: "avatar" })), c && i("span", { key: "b5ba3f75080b5452fce8886c513eaa6abcd58009", class: "chip__icon", innerHTML: this.icon, ref: (t) => this.iconEl = t }), i("span", { key: "808fe136faee7570c2329a300fafba4e0efcbed8", class: "chip__label" }, this.label)), this.progress !== void 0 && i("span", { key: "50b4eb47a59290e9c21570e0b2d91a8aa7a97723", class: "chip__progress-indicator" }, i("swirl-progress-indicator", { key: "e0d54da0d2c6a325f6068740bba0c72b0837fb87", label: this.progressBarLabel, value: this.progress }))), this.removable && i("button", { key: "ec75adbbf28bf1df36d7532d832137f795973dab", "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, i("swirl-icon-close", { key: "85c241bc56caaf410421b102607f902f1c4b33ef", size: 20 })));
-  }
-  get el() {
-    return p(this);
-  }
-};
-v.style = d;
-export {
-  v as swirl_chip
-};

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

@@ -1,270 +0,0 @@
-import { r as L, c as f, h as l, H as B } from "./index.874ea0b7.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 u = (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)
-  };
-}, d = (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 ? d(i(s * 255)) : "";
-  return "#" + d(e) + d(t) + d(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: u((o.pageX - (s.left + window.pageXOffset)) / s.width),
-    y: u((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 ? u(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 ? u(this.hsva.s + t.x * 100, 0, 100) : t.x * 100,
-      v: o ? u(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"), g = 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[g];
-  }
-  set color(t) {
-    if (!this[h](t)) {
-      const o = this.colorModel.toHsva(t);
-      this[m](o), this[g] = 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[g] = 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 = f(this, "inputBlur", 7), this.inputFocus = f(this, "inputFocus", 7), this.valueChange = f(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: "11afff41dd4a7948c148a91b3f6aadf7b2fd3539" }, l("div", { key: "224d2f63d072ccb306df12c62505ab33a68e4504", class: t }, l("input", { key: "5ec5c0491274b558b3cbbf41ad0ef2f9da33041b", "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 }), l("swirl-popover-trigger", { key: "c9a1f1f4cfc8fd3fb22a815f57b261656b196418", swirlPopover: this.pickerId }, l("button", { key: "0c57bb61295e4a41b8e630f2c89e9ce8ba407f64", "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: "6b6529c04b552bbf06f29fd0aa2b17aa9b03b2b2", animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, l("swirl-box", { key: "8279834c7b7ba9e6d161bc2d0a21e4fc5e933ea4", centerInline: !0, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, l("hex-color-picker", { key: "0af2a6c8dda121892cccad7ea7c28953f905af49", color: this.value, ref: (o) => this.picker = o })))));
-  }
-  static get watchers() {
-    return {
-      value: ["watchValue"]
-    };
-  }
-};
-tt.style = Z;
-export {
-  tt as swirl_color_input
-};

package/dist/swirl-columns.entry.588d98a7.js

@@ -1,18 +0,0 @@
-import { r as o, h as s, H as r } from "./index.874ea0b7.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: "779371e7d28640a71aaad2d2de8d91b5b8d63e88" }, s("div", { key: "de846647d2b436277cd2765f9814796320af071d", class: "columns", style: {
-      gridTemplateColumns: this.columns,
-      gap: `var(--s-space-${this.spacing})`
-    } }, s("slot", { key: "ca510de4dae9c7055d2db6e02020cdfca95e58c6" })));
-  }
-};
-a.style = t;
-export {
-  a as swirl_columns
-};

package/dist/swirl-console-layout.entry.d0a3c23a.js

@@ -1,98 +0,0 @@
-import { r as c, c as l, h as e, H as d, g as b } from "./index.874ea0b7.js";
-import { c as h } from "./index-orsBiyT_.fc4357c3.js";
-import { d as p, i } from "./utils-DytJsmhr.20b14d35.js";
-import "react";
-import "react-dom";
-const u = `:host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem;--console-sidebar-width:18.5rem}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:"main"}@media (min-width: 768px){.console-layout{grid-template-columns:var(--console-sidebar-width) 1fr;grid-template-areas:"sidebar main"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:"content";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:"content"
-        "footer";grid-template-rows:1fr -webkit-min-content;grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr -webkit-min-content;grid-template-rows:auto 1fr min-content;grid-template-areas:"header"
-    "navigation"
-    "user"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow:hidden;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:"app-bar"
-    "content"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr -webkit-min-content;grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:"app-bar"
-    "content"
-    "footer"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;display:flex;min-width:0;padding:0 var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:0 2.5rem}}.console-layout__content-container{display:flex;flex-direction:column;align-items:center;height:100%;width:100%}.console-layout__integration{flex-grow:1;padding-bottom:var(--s-space-16)}@media (min-width: 768px){.console-layout__integration{padding-bottom:2.5rem}}.console-layout__integration{width:100%}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.console-layout__content-header{padding-top:2.5rem}}.console-layout__content-header{width:100%}.console-layout--has-custom-app-bar .console-layout__content-header{padding-top:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}.console-layout__footer{position:sticky;bottom:0;z-index:var(--s-z-20);display:flex;flex-shrink:0;min-width:0;border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:footer;width:100%;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__app-bar--custom{display:flex;min-width:0;align-items:center;padding:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default)}.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top) .console-layout__app-bar--custom{border-bottom-color:var(--s-border-default)}.console-layout:not(.console-layout--has-custom-app-bar) .console-layout__app-bar--custom{display:none}.console-layout:not(.console-layout--has-footer) .console-layout__footer{display:none}.console-layout--has-custom-app-bar .console-layout__app-bar:not(.console-layout__app-bar--custom){display:none}`, f = class {
-  constructor(o) {
-    c(this, o), this.backButtonClick = l(this, "backButtonClick", 7), this.helpButtonClick = l(this, "helpButtonClick", 7), this.backButonLabel = "Back", this.helpButonLabel = "Help", this.hideNavigationButtonLabel = "Hide main navigation", this.logoText = "Admin", this.navigationLabel = "Main", this.showNavigationButtonLabel = "Show main navigation", this.contentScrollState = {
-      scrollable: !1,
-      scrolledToTop: !1,
-      scrolledToBottom: !1
-    }, this.updateCustomAppBarStatus = () => {
-      this.hasCustomAppBar = Boolean(this.el.querySelector('[slot="app-bar"]'));
-    }, this.updateFooterStatus = () => {
-      this.hasFooter = Boolean(this.el.querySelector('[slot="footer"]'));
-    }, this.onMainScroll = p(() => {
-      this.updateContentScrollState();
-    }, 16), this.onBackButtonClick = (a) => {
-      this.backButtonClick.emit(a);
-    }, this.onHelpButtonClick = (a) => {
-      this.helpButtonClick.emit(a);
-    }, this.onMobileNavigationToggleClick = () => {
-      this.toggleSidebar();
-    }, this.onClick = (a) => {
-      var s;
-      const t = a.target, n = Boolean(t.closest(".console-layout__mobile-navigation-button")), r = ((s = t.closest("[slot]")) == null ? void 0 : s.slot) === "overlays";
-      !a.composedPath().includes(this.sidebarEl) && !n && !r && this.sidebarActive && this.deactivateSidebar();
-    }, this.onKeyDown = (a) => {
-      a.code === "Escape" && this.sidebarActive && this.deactivateSidebar();
-    };
-  }
-  componentDidLoad() {
-    queueMicrotask(() => {
-      i() ? this.deactivateSidebar() : this.activateSidebar(), this.updateContentScrollState(), this.updateCustomAppBarStatus(), this.updateFooterStatus();
-    });
-  }
-  updateContentScrollState() {
-    if (!this.contentEl)
-      return;
-    const o = {
-      scrollable: this.contentEl.scrollHeight > this.contentEl.clientHeight,
-      scrolledToTop: this.contentEl.scrollTop === 0,
-      scrolledToBottom: Math.round(this.contentEl.scrollTop + this.contentEl.clientHeight) >= this.contentEl.scrollHeight
-    };
-    Object.keys(o).some((a) => o[a] !== this.contentScrollState[a]) && (this.contentScrollState = o);
-  }
-  onWindowResize() {
-    const o = i();
-    !o && !this.sidebarActive ? this.activateSidebar() : o && this.deactivateSidebar();
-  }
-  async toggleSidebar() {
-    this.sidebarActive ? this.deactivateSidebar() : this.activateSidebar();
-  }
-  async showSidebar() {
-    this.sidebarActive || this.activateSidebar();
-  }
-  async hideSidebar() {
-    this.sidebarActive && this.deactivateSidebar();
-  }
-  activateSidebar() {
-    var o;
-    this.sidebarActive = !0, this.sidebarEl.removeAttribute("inert"), i() && ((o = this.el.querySelector("swirl-tree-navigation-item")) == null || o.focus());
-  }
-  deactivateSidebar() {
-    this.sidebarActive = !1, i() && this.sidebarEl.setAttribute("inert", "");
-  }
-  render() {
-    const o = Boolean(this.maxContentWidth) ? {
-      maxWidth: this.maxContentWidth,
-      justifySelf: "center",
-      width: "100%"
-    } : void 0;
-    this.updateCustomAppBarStatus(), this.updateFooterStatus();
-    const a = h("console-layout", {
-      "console-layout--sidebar-active": this.sidebarActive,
-      "console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton && !this.hasCustomAppBar,
-      "console-layout--has-footer": this.hasFooter,
-      "console-layout--has-custom-app-bar": this.hasCustomAppBar,
-      "console-layout--main-scrollable": this.contentScrollState.scrollable,
-      "console-layout--main-scrolled-to-top": this.contentScrollState.scrolledToTop,
-      "console-layout--main-scrolled-to-bottom": this.contentScrollState.scrolledToBottom
-    });
-    return e(d, { key: "e0982ef1c6673239076b6fb2e4109955f9140c6d" }, e("div", { key: "3a9d17422c619bfb4bbe042c2bc85300b7f94e04", class: a, onClick: this.onClick, onKeyDown: this.onKeyDown }, e("header", { key: "39807c1440bcee82e102368950d17a40047ed00e", "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (t) => this.sidebarEl = t }, e("div", { key: "f1c424be5583f77202f193b618fafc7dca5136a4", class: "console-layout__header" }, e("div", { key: "d6437c395526b5fa2035f336f1a113c293ddc569", class: "console-layout__logo" }, e("svg", { key: "610f516b9d2832490e7ad50a44288d0edf528f99", class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 16 26", width: "16", xmlns: "http://www.w3.org/2000/svg" }, e("path", { key: "e1c57d16932e450b94ccaa104040239a061f0126", d: "M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z", fill: "#145AF5" }), e("path", { key: "66f909682ccfd611bd51306b716199e66aad720c", d: "M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z", fill: "#145AF5" }), e("path", { key: "7290322fd33d8368d31bd8756aebcccb6f232cd1", d: "M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z", fill: "#80A8F4" }), e("path", { key: "c96ceba1401831d510f5c3d9cc1db56ea770a493", d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), e("swirl-text", { key: "a947fa87292668aec8e4c09b124934a761db5830", class: "console-layout__logo-text", weight: "medium" }, this.logoText))), e("nav", { key: "b23e35155922e38fab0c128684f369b425fde2fa", "aria-label": this.navigationLabel, class: "console-layout__navigation" }, e("slot", { key: "7e158bdb7f169d313eb433ee29841730ec234e3b", name: "navigation" })), e("div", { key: "d631c5d647fc86091ac0357d0849115bda794a7f", class: "console-layout__user" }, e("slot", { key: "1e3205d895e83cda1a31156a9c24d5f41902fca1", name: "user" }))), e("main", { key: "a4d77c27a16e3416e22abd559840b53923263f55", "aria-labelledby": Boolean(this.appName) ? "app-name" : void 0, class: "console-layout__main" }, e("header", { key: "a6f93541bbbe596fa15fb7582d40345ea1982e93", class: "console-layout__app-bar console-layout__app-bar--custom" }, e("slot", { key: "ec570123c2412699c95be7a140339c8a70125768", name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), e("header", { key: "60f3add9684a0acb0b8f9ab3c1921b6ad50b4185", class: "console-layout__app-bar" }, e("span", { key: "d82ce859d12bc45cc5cfa0b5bf28073f1172fc9b", class: "console-layout__mobile-navigation-button" }, e("swirl-button", { key: "64f7ce37f09a9927af3edcd770401ef0030b3299", swirlAriaExpanded: String(this.sidebarActive), hideLabel: !0, icon: this.sidebarActive ? "<swirl-icon-close></swirl-icon-close>" : "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive ? this.hideNavigationButtonLabel : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), e("div", { key: "71e7bcc36b5dd43fa94b18a648d376e759eb15a2", class: "console-layout__app-name" }, this.appName && e("swirl-heading", { key: "86b797e518d80dd3f82e2e0a1e84b62a0eeaa875", as: "h1", headingId: "app-name", level: 4, text: this.appName })), this.showHelpButton && e("swirl-button", { key: "afcb6141d50f5843e005d9dcc7f366dfd49dc697", class: "console-layout__help-button", hideLabel: !0, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick })), e("section", { key: "b01b9c1dab5ab7fff6d26ff4088ea95f5146be12", "aria-labelledby": "heading", class: "console-layout__content", onScroll: this.onMainScroll, ref: (t) => this.contentEl = t }, e("div", { key: "3e5ace98ae2149bde88e8199c2b637fea5711173", class: "console-layout__content-container" }, e("header", { key: "c5fff9f08469ec07d8a8b2b30cb3b91a4f25be35", class: "console-layout__content-header", style: o }, this.showBackButton && e("swirl-button", { key: "5c36e749b8ee9e71c565cd4bf7bd536a076552a3", class: "console-layout__back-button", hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick }), Boolean(this.heading) && e("div", { key: "19ebe1bd6bb70488496ce02063247116aa61d1c2", class: "console-layout__heading-container" }, e("swirl-heading", { key: "3e84682353d4d0a0f48fe8fd906693bb780f9fa7", as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && e("swirl-text", { key: "7ebb00dde91b7a7f8f5d81ae5d73660627576567", class: "console-layout__subheading", color: "subdued" }, this.subheading)), !Boolean(this.heading) && e("div", { key: "d879930e38a9f6e6859d25627604cd15e049c13c", class: "console-layout__heading-container" }, e("slot", { key: "31b93da5f6ea162f56f65e8b3587e9571423c390", name: "heading" })), e("div", { key: "14bfe6ad96716382fe52bdf8d30277869c84616d", class: "console-layout__content-header-tools" }, e("slot", { key: "3958ab7d885910523df02871fdff5316b41a183b", name: "content-header-tools" }))), e("div", { key: "5c3cc7b8ba6f7f1170419958b925aaff943c69b0", class: "console-layout__integration", style: o }, e("slot", { key: "2c1e15c7cea9f3a45ce18558ee19cc8d30bc91f6", name: "content" })))), e("footer", { key: "1bb168120b31a7e8ac0ff0372e1151856647089a", class: "console-layout__footer" }, e("slot", { key: "024140ae1f3e7d7db554711903983ec28dfb7236", name: "footer", onSlotchange: this.updateFooterStatus })), e("div", { key: "1ad90c5d989a59a9639d09ab599d6d77a310569e", class: "console-layout__overlays" }, e("slot", { key: "d9f8462bb8098099a2d18f7713b9e62e6be7057b", name: "overlays" })))));
-  }
-  get el() {
-    return b(this);
-  }
-};
-f.style = u;
-export {
-  f as swirl_console_layout
-};