@getflip/swirl-components 0.343.0 → 0.343.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/components.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-07-03T11:25:18",
2
+ "timestamp": "2025-07-04T10:59:22",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.35.0",
@@ -329,6 +329,7 @@ const SwirlTreeViewItem = class {
329
329
  const semantics = this.getSemantics();
330
330
  const expanded = this.expanded || semantics !== "tree";
331
331
  const tabIndex = semantics === "tree" ? (this.selected ? 0 : -1) : undefined;
332
+ const Tag = semantics === "tree" ? "li" : "div";
332
333
  const className = index$1.classnames("tree-view-item", {
333
334
  "tree-view-item--active": this.active,
334
335
  "tree-view-item--cannot-keyboard-drop": this.cannotKeyboardDropInCurrentPosition,
@@ -336,17 +337,17 @@ const SwirlTreeViewItem = class {
336
337
  "tree-view-item--disable-drag": this.disableDrag,
337
338
  "tree-view-item--has-tags": hasTags,
338
339
  });
339
- return (index.h(index.Host, { key: '65881342c7a8332a6511e9607bbdd6ec087a9272', id: this.itemId, role: "none" }, index.h("li", { key: 'b10d8040f05ae9eaba034a811ad742608810c239', class: className, role: semantics === "tree" ? "none" : undefined }, index.h("a", { key: '5935418c8673bbc8029d6bd2f3104149761c11a7', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
340
+ return (index.h(index.Host, { key: 'b69e0f608416e28e933f600068bc9781b8a7e67a', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, index.h(Tag, { key: '59debc40e5914cf0861f77d839b8e1fb5048185f', class: className, role: semantics === "tree" ? "none" : undefined }, index.h("a", { key: '537cf90ebc08a8a1f852a2ebb44a7f6cd9487b9d', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
340
341
  ? undefined
341
342
  : String(expanded), "aria-level": semantics === "tree" ? this.level + 1 : undefined, "aria-owns": hasChildren && semantics === "tree"
342
343
  ? `${this.itemId}-children`
343
- : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (index.h("span", { key: 'ad52424f81e920a71f98a79f797c55009a8581e7', class: "tree-view-item__drag-handle" }, index.h("swirl-icon-drag-handle", { key: '5bc418c16e4a2b9eb86b22af7447490a23f0657b', size: 20 }))), this.expandable && semantics === "tree" && (index.h("span", { key: 'fd1f419299f9b08f70eec8167fe3e11864025793', class: "tree-view-item__toggle-icon" }, hasChildren && (index.h(index.Fragment, { key: 'c68c8e65e923026abfbbfa86845ddedcc03fd431' }, expanded ? (index.h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (index.h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (index.h(index.Fragment, { key: '895c9fa1a7cd5e48029c264e16294837780329b6' }, index.h("span", { key: '0c6493585abec28ddb004f8054ccbb7e306fe297', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (index.h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), index.h("span", { key: '10603cdbaaeaeb87637885dd7c796e56f7039903', class: "tree-view-item__label" }, this.label), index.h("span", { key: 'a76b6724dcef1aee95280c4483dcd1226aaaa142', class: "tree-view-item__tags" }, index.h("slot", { key: 'b5f93fe196914382421f0307100d9c53f0d3f5ff', name: "tags" }))), index.h("ul", { key: '8bf0322fc3576a6255ce8cf14c4432dc96c093a0', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
344
+ : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (index.h("span", { key: '8964954fbe3bf1d76f002cad14103a6490e46e41', class: "tree-view-item__drag-handle" }, index.h("swirl-icon-drag-handle", { key: '543ea8186b5fff51002487f4d1efd2157f579de2', size: 20 }))), this.expandable && semantics === "tree" && (index.h("span", { key: '16ddb005d1a629694d074823171d84add485c60a', class: "tree-view-item__toggle-icon" }, hasChildren && (index.h(index.Fragment, { key: '736eb2a5bd66e82af18a65870f48d8f9bec05ea4' }, expanded ? (index.h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (index.h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (index.h(index.Fragment, { key: '1b9889c672bfed46bdfa65ff2d5cab61de2e37cf' }, index.h("span", { key: 'c2e6b715bc17b468b7656de8750db4ba06cd41db', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (index.h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), index.h("span", { key: '300e38e84a87b1f70408d5d710eb0b350a4b3e41', class: "tree-view-item__label" }, this.label), index.h("span", { key: 'ea9b1b1e29f7a770d123ed9aba08f15d2002f722', class: "tree-view-item__tags" }, index.h("slot", { key: 'd27ac7d0acb0da444304979cc21d6be4bf73ff68', name: "tags" }))), index.h("ul", { key: 'cb8ba76c9ceca5e94c9fb85005963b03f58ceb40', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
344
345
  ? "tree-view-item__children--drop-zone"
345
- : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: "group", style: {
346
+ : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: semantics === "tree" ? "group" : undefined, style: {
346
347
  display: (!expanded || !hasChildren) && !shouldShowChildrenDropZone
347
348
  ? "none"
348
349
  : undefined,
349
- } }, index.h("slot", { key: '5c17ad91e8055f44e0f3e083d6abe970b773add6' })))));
350
+ } }, index.h("slot", { key: '712ac39576c65889812fab90246284afefc79ca0' })))));
350
351
  }
351
352
  get el() { return index.getElement(this); }
352
353
  };
@@ -52,4 +52,5 @@ const Template = (args) => {
52
52
  export const SwirlResourceList = Template.bind({});
53
53
  SwirlResourceList.args = {
54
54
  label: "A resource list",
55
+ semantics: "list",
55
56
  };
@@ -321,6 +321,7 @@ export class SwirlTreeViewItem {
321
321
  const semantics = this.getSemantics();
322
322
  const expanded = this.expanded || semantics !== "tree";
323
323
  const tabIndex = semantics === "tree" ? (this.selected ? 0 : -1) : undefined;
324
+ const Tag = semantics === "tree" ? "li" : "div";
324
325
  const className = classNames("tree-view-item", {
325
326
  "tree-view-item--active": this.active,
326
327
  "tree-view-item--cannot-keyboard-drop": this.cannotKeyboardDropInCurrentPosition,
@@ -328,17 +329,17 @@ export class SwirlTreeViewItem {
328
329
  "tree-view-item--disable-drag": this.disableDrag,
329
330
  "tree-view-item--has-tags": hasTags,
330
331
  });
331
- return (h(Host, { key: '65881342c7a8332a6511e9607bbdd6ec087a9272', id: this.itemId, role: "none" }, h("li", { key: 'b10d8040f05ae9eaba034a811ad742608810c239', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: '5935418c8673bbc8029d6bd2f3104149761c11a7', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
332
+ return (h(Host, { key: 'b69e0f608416e28e933f600068bc9781b8a7e67a', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, h(Tag, { key: '59debc40e5914cf0861f77d839b8e1fb5048185f', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: '537cf90ebc08a8a1f852a2ebb44a7f6cd9487b9d', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
332
333
  ? undefined
333
334
  : String(expanded), "aria-level": semantics === "tree" ? this.level + 1 : undefined, "aria-owns": hasChildren && semantics === "tree"
334
335
  ? `${this.itemId}-children`
335
- : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: 'ad52424f81e920a71f98a79f797c55009a8581e7', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '5bc418c16e4a2b9eb86b22af7447490a23f0657b', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: 'fd1f419299f9b08f70eec8167fe3e11864025793', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: 'c68c8e65e923026abfbbfa86845ddedcc03fd431' }, expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: '895c9fa1a7cd5e48029c264e16294837780329b6' }, h("span", { key: '0c6493585abec28ddb004f8054ccbb7e306fe297', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '10603cdbaaeaeb87637885dd7c796e56f7039903', class: "tree-view-item__label" }, this.label), h("span", { key: 'a76b6724dcef1aee95280c4483dcd1226aaaa142', class: "tree-view-item__tags" }, h("slot", { key: 'b5f93fe196914382421f0307100d9c53f0d3f5ff', name: "tags" }))), h("ul", { key: '8bf0322fc3576a6255ce8cf14c4432dc96c093a0', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
336
+ : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: '8964954fbe3bf1d76f002cad14103a6490e46e41', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '543ea8186b5fff51002487f4d1efd2157f579de2', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: '16ddb005d1a629694d074823171d84add485c60a', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '736eb2a5bd66e82af18a65870f48d8f9bec05ea4' }, expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: '1b9889c672bfed46bdfa65ff2d5cab61de2e37cf' }, h("span", { key: 'c2e6b715bc17b468b7656de8750db4ba06cd41db', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '300e38e84a87b1f70408d5d710eb0b350a4b3e41', class: "tree-view-item__label" }, this.label), h("span", { key: 'ea9b1b1e29f7a770d123ed9aba08f15d2002f722', class: "tree-view-item__tags" }, h("slot", { key: 'd27ac7d0acb0da444304979cc21d6be4bf73ff68', name: "tags" }))), h("ul", { key: 'cb8ba76c9ceca5e94c9fb85005963b03f58ceb40', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
336
337
  ? "tree-view-item__children--drop-zone"
337
- : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: "group", style: {
338
+ : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: semantics === "tree" ? "group" : undefined, style: {
338
339
  display: (!expanded || !hasChildren) && !shouldShowChildrenDropZone
339
340
  ? "none"
340
341
  : undefined,
341
- } }, h("slot", { key: '5c17ad91e8055f44e0f3e083d6abe970b773add6' })))));
342
+ } }, h("slot", { key: '712ac39576c65889812fab90246284afefc79ca0' })))));
342
343
  }
343
344
  static get is() { return "swirl-tree-view-item"; }
344
345
  static get originalStyleUrls() {