@getflip/swirl-components 0.4.0 → 0.5.0

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

@@ -1,115 +1,6 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { d as defineCustomElement$3 } from './flip-button2.js';
-import { d as defineCustomElement$2 } from './flip-icon-check-strong2.js';
-
-const flipResourceListItemCss = ":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 (--from-tablet){.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 (--from-tablet){.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{--flip-avatar-group-border-color:var(--s-background-default);--flip-badge-border-color:var(--s-background-default);display:flex;width:100%;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{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-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{--flip-avatar-group-border-color:var(--s-background-pressed);--flip-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-item__content:focus .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-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)}.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 (--from-tablet){.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 FlipResourceListItem$1 = /*@__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("flip-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("flip-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, 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("flip-icon-check-strong", null))))), showMeta && (h("span", { class: "resource-list-item__meta" }, this.meta)), showMenu && (h("flip-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<flip-icon-more-horizontal></flip-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))));
-  }
-  get el() { return this; }
-  static get style() { return flipResourceListItemCss; }
-}, [1, "flip-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$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["flip-resource-list-item", "flip-button", "flip-icon-check-strong"];
-  components.forEach(tagName => { switch (tagName) {
-    case "flip-resource-list-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, FlipResourceListItem$1);
-      }
-      break;
-    case "flip-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "flip-icon-check-strong":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { F as FlipResourceListItem$1, d as defineCustomElement$1 } from './flip-resource-list-item2.js';
 
 const FlipResourceListItem = FlipResourceListItem$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipResourceListItem, defineCustomElement };
-
-//# sourceMappingURL=flip-resource-list-item.js.map

package/dist/components/flip-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 './flip-button2.js';
+import { d as defineCustomElement$1 } from './flip-icon-check-strong2.js';
+
+const flipResourceListItemCss = ":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 (--from-tablet){.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 (--from-tablet){.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{--flip-avatar-group-border-color:var(--s-background-default);--flip-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{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-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{--flip-avatar-group-border-color:var(--s-background-pressed);--flip-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-item__content:focus .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-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)}.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 (--from-tablet){.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 FlipResourceListItem = /*@__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("flip-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("flip-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, 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("flip-icon-check-strong", null))))), showMeta && (h("span", { class: "resource-list-item__meta" }, this.meta)), showMenu && (h("flip-button", { "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<flip-icon-more-horizontal></flip-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))));
+  }
+  get el() { return this; }
+  static get style() { return flipResourceListItemCss; }
+}, [1, "flip-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 = ["flip-resource-list-item", "flip-button", "flip-icon-check-strong"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-resource-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipResourceListItem);
+      }
+      break;
+    case "flip-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "flip-icon-check-strong":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { FlipResourceListItem as F, defineCustomElement as d };

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

@@ -1,92 +1,6 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './flip-stack2.js';
-
-const flipResourceListCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}";
-
-const FlipResourceList$1 = /*@__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("flip-resource-list-item, flip-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("flip-stack", { "aria-label": this.label, onFocus: this.onFocus, role: "grid", tabIndex: 0 }, h("slot", null))));
-  }
-  get el() { return this; }
-  static get style() { return flipResourceListCss; }
-}, [1, "flip-resource-list", {
-    "label": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["flip-resource-list", "flip-stack"];
-  components.forEach(tagName => { switch (tagName) {
-    case "flip-resource-list":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, FlipResourceList$1);
-      }
-      break;
-    case "flip-stack":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { F as FlipResourceList$1, d as defineCustomElement$1 } from './flip-resource-list2.js';
 
 const FlipResourceList = FlipResourceList$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipResourceList, defineCustomElement };
-
-//# sourceMappingURL=flip-resource-list.js.map

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

@@ -0,0 +1,87 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './flip-stack2.js';
+
+const flipResourceListCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}";
+
+const FlipResourceList = /*@__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("flip-resource-list-item, flip-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("flip-stack", { "aria-label": this.label, onFocus: this.onFocus, role: "grid", tabIndex: 0 }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return flipResourceListCss; }
+}, [1, "flip-resource-list", {
+    "label": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-resource-list", "flip-stack"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-resource-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipResourceList);
+      }
+      break;
+    case "flip-stack":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { FlipResourceList as F, defineCustomElement as d };

package/dist/components/flip-search.js

@@ -80,5 +80,3 @@ const FlipSearch = FlipSearch$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipSearch, defineCustomElement };
-
-//# sourceMappingURL=flip-search.js.map

package/dist/components/flip-spinner.js

@@ -4,5 +4,3 @@ const FlipSpinner = FlipSpinner$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipSpinner, defineCustomElement };
-
-//# sourceMappingURL=flip-spinner.js.map

package/dist/components/flip-spinner2.js

@@ -41,5 +41,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { FlipSpinner as F, defineCustomElement as d };
-
-//# sourceMappingURL=flip-spinner2.js.map

package/dist/components/flip-stack.js

@@ -4,5 +4,3 @@ const FlipStack = FlipStack$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipStack, defineCustomElement };
-
-//# sourceMappingURL=flip-stack.js.map

package/dist/components/flip-stack2.js

@@ -45,5 +45,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { FlipStack as F, defineCustomElement as d };
-
-//# sourceMappingURL=flip-stack2.js.map

package/dist/components/flip-switch.js

@@ -118,5 +118,3 @@ const FlipSwitch = FlipSwitch$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipSwitch, defineCustomElement };
-
-//# sourceMappingURL=flip-switch.js.map

package/dist/components/flip-tab.js

@@ -38,5 +38,3 @@ const FlipTab = FlipTab$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipTab, defineCustomElement };
-
-//# sourceMappingURL=flip-tab.js.map

package/dist/components/flip-tabs.js

@@ -104,5 +104,3 @@ const FlipTabs = FlipTabs$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipTabs, defineCustomElement };
-
-//# sourceMappingURL=flip-tabs.js.map

package/dist/components/flip-tag.js

@@ -52,5 +52,3 @@ const FlipTag = FlipTag$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipTag, defineCustomElement };
-
-//# sourceMappingURL=flip-tag.js.map