@getflip/swirl-components-react 0.97.0 → 0.98.0

package/dist/stencil-generated/index.d.ts

@@ -1,5 +1,7 @@
 import type { JSX } from '@getflip/swirl-components';
 export declare const FileManager: import("react").ForwardRefExoticComponent<JSX.FileManager & Omit<import("react").HTMLAttributes<HTMLFileManagerElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLFileManagerElement>>;
+export declare const SwirlAccordion: import("react").ForwardRefExoticComponent<JSX.SwirlAccordion & Omit<import("react").HTMLAttributes<HTMLSwirlAccordionElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlAccordionElement>>;
+export declare const SwirlAccordionItem: import("react").ForwardRefExoticComponent<JSX.SwirlAccordionItem & Omit<import("react").HTMLAttributes<HTMLSwirlAccordionItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlAccordionItemElement>>;
 export declare const SwirlActionList: import("react").ForwardRefExoticComponent<JSX.SwirlActionList & Omit<import("react").HTMLAttributes<HTMLSwirlActionListElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlActionListElement>>;
 export declare const SwirlActionListItem: import("react").ForwardRefExoticComponent<JSX.SwirlActionListItem & Omit<import("react").HTMLAttributes<HTMLSwirlActionListItemElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlActionListItemElement>>;
 export declare const SwirlActionListSection: import("react").ForwardRefExoticComponent<JSX.SwirlActionListSection & Omit<import("react").HTMLAttributes<HTMLSwirlActionListSectionElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlActionListSectionElement>>;
@@ -19,6 +21,7 @@ export declare const SwirlCarousel: import("react").ForwardRefExoticComponent<JS
 export declare const SwirlCarouselSlide: import("react").ForwardRefExoticComponent<JSX.SwirlCarouselSlide & Omit<import("react").HTMLAttributes<HTMLSwirlCarouselSlideElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlCarouselSlideElement>>;
 export declare const SwirlCheckbox: import("react").ForwardRefExoticComponent<JSX.SwirlCheckbox & Omit<import("react").HTMLAttributes<HTMLSwirlCheckboxElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlCheckboxElement>>;
 export declare const SwirlChip: import("react").ForwardRefExoticComponent<JSX.SwirlChip & Omit<import("react").HTMLAttributes<HTMLSwirlChipElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlChipElement>>;
+export declare const SwirlColorInput: import("react").ForwardRefExoticComponent<JSX.SwirlColorInput & Omit<import("react").HTMLAttributes<HTMLSwirlColorInputElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlColorInputElement>>;
 export declare const SwirlColumns: import("react").ForwardRefExoticComponent<JSX.SwirlColumns & Omit<import("react").HTMLAttributes<HTMLSwirlColumnsElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlColumnsElement>>;
 export declare const SwirlConsoleLayout: import("react").ForwardRefExoticComponent<JSX.SwirlConsoleLayout & Omit<import("react").HTMLAttributes<HTMLSwirlConsoleLayoutElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlConsoleLayoutElement>>;
 export declare const SwirlDateInput: import("react").ForwardRefExoticComponent<JSX.SwirlDateInput & Omit<import("react").HTMLAttributes<HTMLSwirlDateInputElement>, "style"> & import("./react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLSwirlDateInputElement>>;

package/dist/swirl-accordion-item.entry.48d83b68.js

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

package/dist/swirl-accordion.entry.c67f1fc1.js

@@ -0,0 +1,28 @@
+import { r, h as t, H as e, g as i } from "./index.79e9bac7.js";
+import "react";
+import "react-dom";
+const l = ":host{display:block}:host *{box-sizing:border-box}", n = class {
+  constructor(o) {
+    r(this, o);
+  }
+  componentDidLoad() {
+    this.el.addEventListener("expansionChange", (o) => {
+      o.detail && this.collapseInactiveItems(o.target);
+    });
+  }
+  collapseInactiveItems(o) {
+    Array.from(this.el.querySelectorAll("swirl-accordion-item")).forEach((s) => {
+      s !== o && s.collapse();
+    });
+  }
+  render() {
+    return t(e, null, t("slot", null));
+  }
+  get el() {
+    return i(this);
+  }
+};
+n.style = l;
+export {
+  n as swirl_accordion
+};

package/dist/{swirl-action-list-section.entry.cf94c600.js → swirl-action-list-section.entry.5be80e04.js}

@@ -1,4 +1,4 @@
-import { r as s, h as t, H as e } from "./index.e3421596.js";
+import { r as s, h as t, H as e } from "./index.79e9bac7.js";
 import "react";
 import "react-dom";
 const a = ":host{display:block}:host *{box-sizing:border-box}.action-list-section{background-color:var(--s-surface-overlay-default)}.action-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-section__label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);padding:var(--s-space-8) var(--s-space-12)}}", l = class {

package/dist/{swirl-action-list_3.entry.09a1df27.js → swirl-action-list_3.entry.6abfa227.js}

@@ -1,4 +1,4 @@
-import { r as a, h as e, H as n, g as c } from "./index.e3421596.js";
+import { r as a, h as e, H as n, g as c } from "./index.79e9bac7.js";
 import { q as d, a as h, g as p } from "./utils-bc84f36e.1fee9865.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";

package/dist/{swirl-app-bar.entry.0a70cd9b.js → swirl-app-bar.entry.7d92d0e2.js}

@@ -1,4 +1,4 @@
-import { r as e, c as o, h as t, H as n, g as a } from "./index.e3421596.js";
+import { r as e, c as o, h as t, H as n, g as a } from "./index.79e9bac7.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-app-icon.entry.f55e1f62.js → swirl-app-icon.entry.6361f918.js}

@@ -1,4 +1,4 @@
-import { r as o, h as e, H as t } from "./index.e3421596.js";
+import { r as o, h as e, H as t } from "./index.79e9bac7.js";
 import { c as n } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";