@getflip/swirl-components 0.10.0 → 0.12.0

package/dist/components/swirl-progress-indicator.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlProgressIndicator extends Components.SwirlProgressIndicator, HTMLElement {}
+export const SwirlProgressIndicator: {
+  prototype: SwirlProgressIndicator;
+  new (): SwirlProgressIndicator;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-progress-indicator.js

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const swirlProgressIndicatorCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-raised-default)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-surface-highlight-default);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-surface-highlight-default);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-border-default);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}";
+
+const SwirlProgressIndicator$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.size = "m";
+    this.value = 0;
+    this.variant = "bar";
+  }
+  render() {
+    const className = classnames("progress-indicator", `progress-indicator--size-${this.size}`, `progress-indicator--variant-${this.variant}`);
+    const strokeWidth = this.size === "m" ? 4 : 2;
+    const radius = this.size === "m" ? 20 : 10;
+    const circumference = Math.round(radius * 2 * Math.PI);
+    const dashOffset = Math.round(circumference * ((100 - this.value) / 100));
+    return (h(Host, { class: this.variant }, this.variant === "bar" && (h("progress", { "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (h("span", { role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
+  }
+  static get style() { return swirlProgressIndicatorCss; }
+}, [1, "swirl-progress-indicator", {
+    "label": [1],
+    "size": [1],
+    "value": [2],
+    "variant": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-progress-indicator"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-progress-indicator":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlProgressIndicator$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlProgressIndicator = SwirlProgressIndicator$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlProgressIndicator, defineCustomElement };

package/dist/components/swirl-radio-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlRadioGroup extends Components.SwirlRadioGroup, HTMLElement {}
+export const SwirlRadioGroup: {
+  prototype: SwirlRadioGroup;
+  new (): SwirlRadioGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-radio-group.js

@@ -0,0 +1,69 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const swirlRadioGroupCss = ".sc-swirl-radio-group-h{display:block}.sc-swirl-radio-group-h *.sc-swirl-radio-group{box-sizing:border-box}.radio-group.sc-swirl-radio-group{display:flex;flex-direction:column;gap:var(--s-space-12)}";
+
+const SwirlRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.valueChange = createEvent(this, "valueChange", 7);
+  }
+  componentDidLoad() {
+    this.radioButtons = Array.from(this.el.querySelectorAll("swirl-radio"));
+    this.initValue();
+    this.handleValueChanges();
+  }
+  initValue() {
+    if (this.value === undefined) {
+      return;
+    }
+    const radioWithValue = this.radioButtons.find((radio) => radio.value === this.value);
+    if (!Boolean(radioWithValue)) {
+      return;
+    }
+    radioWithValue.checked = true;
+  }
+  handleValueChanges() {
+    for (const [key, radio] of Object.entries(this.radioButtons)) {
+      radio.addEventListener("valueChange", () => {
+        if (radio.checked === true || radio.checked === "true") {
+          this.valueChange.emit(radio.value);
+          this.value = radio.value;
+          this.radioButtons.forEach((r, k) => {
+            if (String(k) === key) {
+              return;
+            }
+            r.checked = false;
+          });
+        }
+      });
+    }
+  }
+  render() {
+    return (h(Host, { "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { class: "radio-group" }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return swirlRadioGroupCss; }
+}, [6, "swirl-radio-group", {
+    "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
+    "value": [1537]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-radio-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-radio-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlRadioGroup$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlRadioGroup = SwirlRadioGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlRadioGroup, defineCustomElement };

package/dist/components/swirl-radio.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlRadio extends Components.SwirlRadio, HTMLElement {}
+export const SwirlRadio: {
+  prototype: SwirlRadio;
+  new (): SwirlRadio;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-radio.js

@@ -0,0 +1,75 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
+
+const swirlRadioCss = ".sc-swirl-radio-h{display:inline-flex}.sc-swirl-radio-h *.sc-swirl-radio{box-sizing:border-box}.radio.sc-swirl-radio{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer}.radio.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:\"\";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio,.radio--invalid.radio--indeterminate.sc-swirl-radio .radio__box.sc-swirl-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-swirl-radio{cursor:default}.radio--disabled.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:transparent}.radio--disabled.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__description.sc-swirl-radio,.radio--disabled.sc-swirl-radio .radio__label.sc-swirl-radio{color:var(--s-text-disabled)}.radio__control.sc-swirl-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__control.sc-swirl-radio{width:1.375rem;height:1.375rem}}.radio__box.sc-swirl-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-swirl-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-swirl-radio{font-weight:var(--s-font-weight-medium)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__label.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.radio__description.sc-swirl-radio{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__description.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+
+const SwirlRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.checked = false;
+    this.disabled = false;
+    this.onChange = () => {
+      this.checked = true;
+      this.valueChange.emit(this.value);
+    };
+  }
+  getAriaCheckedLabel(checked, unchecked) {
+    if (checked) {
+      return "true";
+    }
+    else if (unchecked) {
+      return "false";
+    }
+    return "mixed";
+  }
+  render() {
+    const unchecked = this.checked === false || this.checked === "false";
+    const checked = this.checked === true || this.checked === "true";
+    const ariaCheckedLabel = this.getAriaCheckedLabel(checked, unchecked);
+    const ariaInvalid = this.invalid;
+    const className = classnames("radio", {
+      "radio--checked": checked,
+      "radio--disabled": this.disabled,
+      "radio--invalid": this.invalid,
+      "radio--unchecked": unchecked,
+    });
+    return (h(Host, null, h("label", { class: className, htmlFor: this.inputId }, h("span", { class: "radio__control" }, h("swirl-visually-hidden", null, h("input", { "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "radio__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, type: "radio", value: this.value })), h("span", { "aria-hidden": "true", class: "radio__box" })), h("span", { class: "radio__label-container" }, this.label && h("span", { class: "radio__label" }, this.label), this.description && (h("span", { class: "radio__description" }, this.description))))));
+  }
+  static get style() { return swirlRadioCss; }
+}, [2, "swirl-radio", {
+    "checked": [1032],
+    "description": [1],
+    "disabled": [4],
+    "inputId": [1, "input-id"],
+    "inputName": [1, "input-name"],
+    "invalid": [4],
+    "label": [1],
+    "value": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-radio", "swirl-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-radio":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlRadio$1);
+      }
+      break;
+    case "swirl-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlRadio = SwirlRadio$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlRadio, defineCustomElement };

package/dist/components/swirl-resource-list-file-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlResourceListFileItem extends Components.SwirlResourceListFileItem, HTMLElement {}
+export const SwirlResourceListFileItem: {
+  prototype: SwirlResourceListFileItem;
+  new (): SwirlResourceListFileItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-resource-list-file-item.js

@@ -0,0 +1,104 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { g as getDesktopMediaQuery } from './utils.js';
+import { d as defineCustomElement$6 } from './swirl-button2.js';
+import { d as defineCustomElement$5 } from './swirl-icon-error2.js';
+import { d as defineCustomElement$4 } from './swirl-inline-error2.js';
+import { d as defineCustomElement$3 } from './swirl-spinner2.js';
+import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
+
+const swirlResourceListFileItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item:focus{outline:none}.resource-list-file-item:focus-visible{background-color:var(--s-background-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-file-item--has-control .resource-list-file-item__label-container{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon{color:var(--s-icon-highlight)}.resource-list-file-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-file-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}";
+
+const SwirlResourceListFileItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.remove = createEvent(this, "remove", 7);
+    this.icon = "<swirl-icon-file></swirl-icon-file>";
+    this.removeButtonLabel = "Remove file";
+    this.desktopMediaQuery = getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.forceIconProps(event.matches);
+    };
+  }
+  componentDidLoad() {
+    var _a, _b;
+    this.forceIconProps(this.desktopMediaQuery.matches);
+    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_b = (_a = this.desktopMediaQuery).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(smallIcon) {
+    if (!Boolean(this.iconEl)) {
+      return;
+    }
+    const icon = this.iconEl.children[0];
+    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", smallIcon ? "20" : "24");
+  }
+  render() {
+    const showError = Boolean(this.errorMessage);
+    const showDescription = !showError && Boolean(this.description);
+    const showSpinner = !showError && this.loading;
+    const showRemoveButton = this.removable && !showSpinner;
+    const className = classnames("resource-list-file-item", {
+      "resource-list-file-item--has-control": showSpinner || showRemoveButton,
+    });
+    return (h(Host, { role: "row" }, h("div", { class: className, part: "resource-list-file-item", role: "gridcell" }, h("span", { class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { class: "resource-list-file-item__label-container" }, h("span", { class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { class: "resource-list-file-item__spinner" }, h("swirl-spinner", { size: "s" }))), showRemoveButton && (h("span", { class: "resource-list-file-item__remove-button" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+  }
+  static get style() { return swirlResourceListFileItemCss; }
+}, [1, "swirl-resource-list-file-item", {
+    "description": [1],
+    "errorMessage": [1, "error-message"],
+    "icon": [1],
+    "label": [1],
+    "loading": [4],
+    "removable": [4],
+    "removeButtonLabel": [1, "remove-button-label"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-resource-list-file-item", "swirl-button", "swirl-icon-error", "swirl-inline-error", "swirl-spinner", "swirl-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-resource-list-file-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlResourceListFileItem$1);
+      }
+      break;
+    case "swirl-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "swirl-icon-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "swirl-inline-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "swirl-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlResourceListFileItem = SwirlResourceListFileItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlResourceListFileItem, defineCustomElement };

package/dist/components/swirl-resource-list-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlResourceListItem extends Components.SwirlResourceListItem, HTMLElement {}
+export const SwirlResourceListItem: {
+  prototype: SwirlResourceListItem;
+  new (): SwirlResourceListItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-resource-list-item.js

@@ -0,0 +1,6 @@
+import { S as SwirlResourceListItem$1, d as defineCustomElement$1 } from './swirl-resource-list-item2.js';
+
+const SwirlResourceListItem = SwirlResourceListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlResourceListItem, defineCustomElement };

package/dist/components/swirl-resource-list-item2.js

@@ -0,0 +1,110 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$2 } from './swirl-button2.js';
+import { d as defineCustomElement$1 } from './swirl-icon-check-strong2.js';
+
+const swirlResourceListItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-item{position:relative;width:100%}.resource-list-item--checked .resource-list-item__checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable .resource-list-item__content{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable .resource-list-item__label-container{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider .resource-list-item__label-container:after{display:none}.resource-list-item__content{--swirl-avatar-group-border-color:var(--s-background-default);--swirl-badge-border-color:var(--s-background-default);display:flex;width:100%;margin:0;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content:hover:not(:disabled){background-color:var(--s-background-hovered)}.resource-list-item__content:hover:not(:disabled) .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:active:not(:disabled){background-color:var(--s-background-pressed)}.resource-list-item__content:active:not(:disabled) .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-pressed);--swirl-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{outline:none}.resource-list-item__content:focus-visible{background-color:var(--s-background-hovered)}.resource-list-item__content:focus-visible .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:disabled{color:var(--s-text-disabled);background-color:var(--s-background-default);cursor:default}.resource-list-item__content:disabled .resource-list-item__description{color:var(--s-text-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__media{display:inline-flex}.resource-list-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%)}@media (min-width: 768px){.resource-list-item__checkbox{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon>*::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}";
+
+const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.checked = false;
+    this.menuTriggerLabel = "Options";
+    this.onClick = () => {
+      if (!this.selectable) {
+        return;
+      }
+      this.checked = !this.checked;
+      this.valueChange.emit(this.checked);
+    };
+    this.onMenuTriggerClick = (event) => {
+      if (this.disabled && !Boolean(this.href)) {
+        event.stopPropagation();
+      }
+    };
+  }
+  componentDidLoad() {
+    this.forceAvatarProps();
+    this.forceThumbnailProps();
+  }
+  forceAvatarProps() {
+    const avatarEl = this.el.querySelector("swirl-avatar");
+    if (!Boolean(avatarEl)) {
+      return;
+    }
+    avatarEl.removeAttribute("interactive");
+    avatarEl.removeAttribute("show-label");
+    avatarEl.removeAttribute("variant");
+    avatarEl.setAttribute("size", "l");
+  }
+  forceThumbnailProps() {
+    const thumbnailEl = this.el.querySelector("swirl-thumbnail");
+    if (!Boolean(thumbnailEl)) {
+      return;
+    }
+    thumbnailEl.setAttribute("format", "landscape");
+    if (!["s", "m"].includes(thumbnailEl.getAttribute("size"))) {
+      thumbnailEl.setAttribute("size", "m");
+    }
+  }
+  render() {
+    const Tag = Boolean(this.href) && !this.selectable ? "a" : "button";
+    const disabled = this.disabled && !Boolean(this.href);
+    const hasMenu = Boolean(this.menuTriggerId);
+    const showMenu = hasMenu && !Boolean(this.meta) && !this.selectable;
+    const showMeta = Boolean(this.meta) && !this.selectable;
+    const ariaChecked = this.selectable ? String(this.checked) : undefined;
+    const role = this.selectable ? "checkbox" : undefined;
+    const className = classnames("resource-list-item", {
+      "resource-list-item--checked": this.checked,
+      "resource-list-item--has-menu": hasMenu,
+      "resource-list-item--hide-divider": this.hideDivider,
+      "resource-list-item--selectable": this.selectable,
+    });
+    return (h(Host, { role: "row" }, h("div", { class: className, role: "gridcell" }, h(Tag, { "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": "label", class: "resource-list-item__content", href: this.href, disabled: disabled, onClick: this.onClick, part: "resource-list-item__content", role: role, tabIndex: 0 }, Boolean(this.media) && (h("span", { class: "resource-list-item__media", innerHTML: this.media })), h("span", { class: "resource-list-item__label-container" }, h("span", { class: "resource-list-item__label", id: "label" }, this.label), this.description && (h("span", { class: "resource-list-item__description" }, this.description)))), this.selectable && (h("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", null))))), showMeta && (h("span", { class: "resource-list-item__meta" }, this.meta)), showMenu && (h("swirl-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))));
+  }
+  get el() { return this; }
+  static get style() { return swirlResourceListItemCss; }
+}, [1, "swirl-resource-list-item", {
+    "checked": [1028],
+    "description": [1],
+    "disabled": [4],
+    "hideDivider": [4, "hide-divider"],
+    "href": [1],
+    "label": [1],
+    "media": [1],
+    "menuTriggerId": [1, "menu-trigger-id"],
+    "menuTriggerLabel": [1, "menu-trigger-label"],
+    "meta": [1],
+    "selectable": [4],
+    "value": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-resource-list-item", "swirl-button", "swirl-icon-check-strong"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-resource-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlResourceListItem);
+      }
+      break;
+    case "swirl-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "swirl-icon-check-strong":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SwirlResourceListItem as S, defineCustomElement as d };

package/dist/components/swirl-resource-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlResourceList extends Components.SwirlResourceList, HTMLElement {}
+export const SwirlResourceList: {
+  prototype: SwirlResourceList;
+  new (): SwirlResourceList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-resource-list.js

@@ -0,0 +1,6 @@
+import { S as SwirlResourceList$1, d as defineCustomElement$1 } from './swirl-resource-list2.js';
+
+const SwirlResourceList = SwirlResourceList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlResourceList, defineCustomElement };

package/dist/components/swirl-resource-list2.js

@@ -0,0 +1,87 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './swirl-stack2.js';
+
+const swirlResourceListCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}";
+
+const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.focusedIndex = 0;
+    this.onFocus = () => {
+      this.focusItemAtIndex(this.focusedIndex);
+    };
+    this.onKeyDown = (event) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+      }
+      else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        const prevIndex = this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;
+        this.focusItemAtIndex(prevIndex);
+      }
+      else if (event.key === "Home") {
+        event.preventDefault();
+        this.focusItemAtIndex(0);
+      }
+      else if (event.key === "End") {
+        event.preventDefault();
+        this.focusItemAtIndex(this.items.length - 1);
+      }
+    };
+  }
+  componentDidLoad() {
+    this.collectItems();
+    this.removeItemsFromTabOrder();
+  }
+  collectItems() {
+    this.items = Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item"));
+  }
+  removeItemsFromTabOrder() {
+    this.items.forEach((item) => {
+      var _a, _b;
+      return (_b = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".resource-list-item__content, .resource-list-file-item")) === null || _b === void 0 ? void 0 : _b.setAttribute("tabIndex", "-1");
+    });
+  }
+  focusItemAtIndex(index) {
+    this.removeItemsFromTabOrder();
+    const item = this.items[index];
+    if (!Boolean(item)) {
+      return;
+    }
+    const interactiveElement = item.shadowRoot.querySelector(".resource-list-item__content, .resource-list-file-item");
+    interactiveElement.setAttribute("tabIndex", "0");
+    interactiveElement.focus();
+    this.focusedIndex = index;
+  }
+  render() {
+    return (h(Host, { onKeyDown: this.onKeyDown }, h("swirl-stack", { "aria-label": this.label, onFocus: this.onFocus, role: "grid", tabIndex: 0 }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return swirlResourceListCss; }
+}, [1, "swirl-resource-list", {
+    "label": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-resource-list", "swirl-stack"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-resource-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlResourceList);
+      }
+      break;
+    case "swirl-stack":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SwirlResourceList as S, defineCustomElement as d };

package/dist/components/swirl-search.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlSearch extends Components.SwirlSearch, HTMLElement {}
+export const SwirlSearch: {
+  prototype: SwirlSearch;
+  new (): SwirlSearch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;