@getflip/swirl-components 0.381.0 → 0.382.0
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 +2 -2
- package/dist/cjs/swirl-app-layout_5.cjs.entry.js +1 -1
- package/dist/cjs/swirl-tab-bar.cjs.entry.js +3 -3
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css +3 -3
- package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.css +44 -9
- package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.js +2 -2
- package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.stories.js +5 -3
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-resource-list-item2.js +1 -1
- package/dist/components/swirl-tab-bar2.js +3 -3
- package/dist/esm/swirl-app-layout_5.entry.js +1 -1
- package/dist/esm/swirl-tab-bar.entry.js +3 -3
- package/dist/swirl-components/p-525d61ed.entry.js +1 -0
- package/dist/swirl-components/{p-ebf3533a.entry.js → p-6ebbd733.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-tab-bar/swirl-tab-bar.d.ts +1 -0
- package/package.json +1 -1
- package/dist/swirl-components/p-e6b1e277.entry.js +0 -1
package/components.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2025-09-
|
|
2
|
+
"timestamp": "2025-09-19T08:54:27",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.35.0",
|
|
@@ -75769,7 +75769,7 @@
|
|
|
75769
75769
|
"path": "src/components/swirl-tab-bar/swirl-tab-bar.tsx"
|
|
75770
75770
|
},
|
|
75771
75771
|
"src/components/swirl-tab-bar/swirl-tab-bar.tsx::SwirlTabBarTab": {
|
|
75772
|
-
"declaration": "{\n active?: boolean;\n icon?: string;\n id: string;\n label: string;\n}",
|
|
75772
|
+
"declaration": "{\n active?: boolean;\n icon?: string;\n id: string;\n label: string;\n suffix?: string;\n}",
|
|
75773
75773
|
"docstring": "",
|
|
75774
75774
|
"path": "src/components/swirl-tab-bar/swirl-tab-bar.tsx"
|
|
75775
75775
|
},
|
|
@@ -645,7 +645,7 @@ const SwirlResourceList = class {
|
|
|
645
645
|
};
|
|
646
646
|
SwirlResourceList.style = swirlResourceListCss;
|
|
647
647
|
|
|
648
|
-
const swirlResourceListItemCss = ".sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h *.sc-swirl-resource-list-item{box-sizing:border-box}[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item__content.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered);--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;overflow:hidden;padding:var(--s-space-12) var(--s-space-8);gap:var(--s-space-12);border-radius:var(--s-border-radius-sm);background-color:var(--swirl-resource-list-item-background-default)}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--s-background-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible) .resource-list-item__media.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:disabled{cursor:default}.resource-list-item--interactive.resource-list-item--disabled.sc-swirl-resource-list-item{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled),.resource-list-item--interactive.sc-swirl-resource-list-item:focus:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered);--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-pressed);--swirl-badge-border-color:var(--s-background-pressed)}.resource-list-item--active.sc-swirl-resource-list-item{--swirl-badge-border-color:var(\n --swirl-resource-list-item-background-hovered\n );background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{min-height:2.5rem}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--label-weight-semibold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item--label-weight-bold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-bold)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within{--swirl-flat-button-background-default:var(--s-background-default);--swirl-flat-button-background-disabled:var(--s-background-disabled);--swirl-flat-button-background-hovered:var(--s-background-hovered);--swirl-flat-button-background-pressed:var(--s-background-pressed)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1;position:static;transform:none}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:0;padding-right:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:calc(-1 * var(--s-space-16));padding-right:var(--s-space-16);transition:margin 0.1s}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:none;opacity:0;position:absolute;top:50%;right:var(--s-space-8);transform:translateY(-50%);transition:opacity 0.1s}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-surface-overlay-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),\n 0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.resource-list-item--disabled.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:transparent}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox-icon.sc-swirl-resource-list-item{color:var(--s-text-on-status)}.resource-list-item--wrap-description.sc-swirl-resource-list-item .resource-list-item__description.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-default);--swirl-badge-border-color:var(--s-background-default);display:flex;width:100%;min-width:0;margin:0;padding:0;align-items:flex-start;border:none;color:var(--s-text-default);background:none;font:inherit;line-height:var(--s-line-height-sm);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus,.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{line-height:var(--s-line-height-base)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex;flex-shrink:0}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;min-width:0;min-height:3rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__label.sc-swirl-resource-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;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.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__control.sc-swirl-resource-list-item{align-self:center}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.125rem;height:1.125rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}@media (min-width: 768px){.resource-list-item__checkbox.sc-swirl-resource-list-item{right:auto;left:calc(var(--s-space-16) - var(--s-space-2))}}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{display:flex;align-items:flex-end;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start;gap:var(--s-space-2)}.resource-list-item__meta.sc-swirl-resource-list-item:not(:has(.resource-list-item__meta-text)){align-self:center}.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-base);margin-top:var(--s-space-2);white-space:nowrap}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-sm);margin-top:var(--s-space-4)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}";
|
|
648
|
+
const swirlResourceListItemCss = ".sc-swirl-resource-list-item-h{position:relative;display:block;width:100%}.sc-swirl-resource-list-item-h *.sc-swirl-resource-list-item{box-sizing:border-box}[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item{background-color:var(--swirl-resource-list-item-background-hovered)}[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__media.sc-swirl-resource-list-item,[aria-selected=\"true\"].sc-swirl-resource-list-item-h .resource-list-item.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered);--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item.sc-swirl-resource-list-item{position:relative;width:100%;display:flex;overflow:hidden;padding:var(--s-space-12) var(--s-space-8);gap:var(--s-space-12);border-radius:var(--s-border-radius-sm);background-color:var(--swirl-resource-list-item-background-default)}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible){background-color:var(--s-background-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.resource-list-item.sc-swirl-resource-list-item:has(.resource-list-item__content:focus-visible) .resource-list-item__media.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{cursor:pointer}.resource-list-item--interactive.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item:disabled{cursor:default}.resource-list-item--interactive.resource-list-item--disabled.sc-swirl-resource-list-item{cursor:default}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled),.resource-list-item--interactive.sc-swirl-resource-list-item:focus:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:focus:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-background-color:var(--s-surface-raised-hovered);--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled){background-color:var(--swirl-resource-list-item-background-pressed)}.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled) .resource-list-item__media.sc-swirl-resource-list-item,.resource-list-item--interactive.sc-swirl-resource-list-item:active:not(.resource-list-item--disabled) .resource-list-item__meta.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-pressed);--swirl-badge-border-color:var(--s-background-pressed)}.resource-list-item--active.sc-swirl-resource-list-item{--swirl-badge-border-color:var(\n --swirl-resource-list-item-background-hovered\n );background-color:var(--swirl-resource-list-item-background-hovered)}.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--compact.sc-swirl-resource-list-item{padding:var(--s-space-8)}}.resource-list-item--compact.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{min-height:2.5rem}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable.sc-swirl-resource-list-item .resource-list-item__label-container.sc-swirl-resource-list-item{padding-right:var(--s-space-16)}}.resource-list-item--label-weight-medium.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-medium)}.resource-list-item--label-weight-semibold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-semibold)}.resource-list-item--label-weight-bold.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{font-weight:var(--s-font-weight-bold)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within{--swirl-flat-button-background-default:var(--s-background-default);--swirl-flat-button-background-disabled:var(--s-background-disabled);--swirl-flat-button-background-hovered:var(--s-background-hovered);--swirl-flat-button-background-pressed:var(--s-background-pressed)}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__control.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:auto;opacity:1;position:static;transform:none}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:hover .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus .resource-list-item__meta.sc-swirl-resource-list-item,.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item:focus-within .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:0;padding-right:0}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__meta.sc-swirl-resource-list-item{margin-right:calc(-1 * var(--s-space-16));padding-right:var(--s-space-16);transition:margin 0.1s}.resource-list-item--show-control-on-focus.sc-swirl-resource-list-item .resource-list-item__control.sc-swirl-resource-list-item{pointer-events:none;opacity:0;position:absolute;top:50%;right:var(--s-space-8);transform:translateY(-50%);transition:opacity 0.1s}.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item--draggable.sc-swirl-resource-list-item .resource-list-item__content.sc-swirl-resource-list-item{padding-left:calc(var(--s-space-12) * 2 + 1rem)}}.resource-list-item--dragging.sc-swirl-resource-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-surface-overlay-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),\n 0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.resource-list-item--dragging.sc-swirl-resource-list-item:hover:not(.resource-list-item--disabled){background-color:var(--s-surface-overlay-pressed)}.resource-list-item--disabled.resource-list-item--checked.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox.sc-swirl-resource-list-item{border-color:var(--s-icon-disabled);background-color:transparent}.resource-list-item--disabled.sc-swirl-resource-list-item .resource-list-item__checkbox-icon.sc-swirl-resource-list-item{color:var(--s-text-on-status)}.resource-list-item--wrap-description.sc-swirl-resource-list-item .resource-list-item__description.sc-swirl-resource-list-item{white-space:normal}.resource-list-item--wrap-label.sc-swirl-resource-list-item .resource-list-item__label.sc-swirl-resource-list-item{white-space:normal}.resource-list-item__content.sc-swirl-resource-list-item{--swirl-avatar-group-border-color:var(--s-background-default);--swirl-badge-border-color:var(--s-background-default);display:flex;width:100%;min-width:0;margin:0;padding:0;align-items:flex-start;border:none;color:var(--s-text-default);background:none;font:inherit;line-height:var(--s-line-height-sm);text-align:left;text-decoration:none;gap:var(--s-space-12)}.resource-list-item__content.sc-swirl-resource-list-item:focus,.resource-list-item__content.sc-swirl-resource-list-item:focus-visible{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content.sc-swirl-resource-list-item{line-height:var(--s-line-height-base)}}.resource-list-item__media.sc-swirl-resource-list-item{display:inline-flex;flex-shrink:0}.resource-list-item__label-container.sc-swirl-resource-list-item{position:relative;display:flex;min-width:0;min-height:3rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label.sc-swirl-resource-list-item{overflow:hidden;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__label.sc-swirl-resource-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__description.sc-swirl-resource-list-item{overflow:hidden;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.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__control.sc-swirl-resource-list-item{align-self:center}.resource-list-item__checkbox.sc-swirl-resource-list-item{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.125rem;height:1.125rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%);pointer-events:none}@media (min-width: 768px){.resource-list-item__checkbox.sc-swirl-resource-list-item{right:auto;left:calc(var(--s-space-16) - var(--s-space-2))}}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon.sc-swirl-resource-list-item>*.sc-swirl-resource-list-item::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta.sc-swirl-resource-list-item{display:flex;align-items:flex-end;color:var(--s-text-subdued);font-size:var(--s-font-size-sm);flex-direction:column;align-self:flex-start;gap:var(--s-space-2)}.resource-list-item__meta.sc-swirl-resource-list-item:not(:has(.resource-list-item__meta-text)){align-self:center}.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-base);margin-top:var(--s-space-2);white-space:nowrap}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__meta-text.sc-swirl-resource-list-item{line-height:var(--s-line-height-sm);margin-top:var(--s-space-4)}}.resource-list-item__badges.sc-swirl-resource-list-item{display:inline-flex;width:-webkit-max-content;width:-moz-max-content;width:max-content}.resource-list-item__drag-handle.sc-swirl-resource-list-item{position:absolute;z-index:1;top:50%;left:var(--s-space-4);display:inline-flex;margin:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.resource-list-item__drag-handle.sc-swirl-resource-list-item:active{cursor:grabbing}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus:not(:focus-visible){outline:none}.resource-list-item__drag-handle.sc-swirl-resource-list-item:focus-visible{outline-color:var(--s-focus-default)}";
|
|
649
649
|
|
|
650
650
|
const SwirlResourceListItem = class {
|
|
651
651
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ var index = require('./index-DM-IG6w2.js');
|
|
|
4
4
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
5
5
|
var utils = require('./utils-CllbYlRY.js');
|
|
6
6
|
|
|
7
|
-
const swirlTabBarCss = ".sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;width:100%;justify-content:flex-start;
|
|
7
|
+
const swirlTabBarCss = ".sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;overflow-x:auto;width:100%;justify-content:flex-start;scrollbar-width:none}.tab-bar.tab-bar--variant-default.sc-swirl-tab-bar{border-bottom:var(--swirl-tab-bar-border-width) solid\n var(--s-border-default)}.tab-bar.tab-bar--variant-pill.sc-swirl-tab-bar{gap:var(--s-space-8)}.tab-bar--justify-evenly.sc-swirl-tab-bar>*.sc-swirl-tab-bar{flex:1}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:flex;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;margin:0;justify-content:center;align-items:center;border:none;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);cursor:pointer}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar{padding:var(--s-space-4) var(--s-space-8);color:var(--s-interactive-neutral-default);background-color:transparent}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:\"\";transform:translateX(-50%);pointer-events:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:not(.tab-bar__tab--active):active .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:\"\";transform:translateX(-50%);pointer-events:none}.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.tab-bar__tab--variant-default.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar{padding:var(--s-space-8) var(--s-space-16);border-radius:var(--s-border-radius-full-round);color:var(--s-text-default);background:var(--s-action-neutral-default);gap:var(--s-space-8)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:hover{background:var(--s-action-neutral-hovered)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:active{background:var(--s-action-neutral-pressed)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-on-action-primary);background:var(--s-action-primary-default)}.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-on-action-primary)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.tab-bar__tab.tab-bar__tab--variant-pill.sc-swirl-tab-bar .tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{padding:calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-icon.sc-swirl-tab-bar{display:inline-flex}.tab-bar__tab-label.sc-swirl-tab-bar{display:inline-flex;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;gap:var(--s-space-4)}.tab-bar__tab-label.tab-bar__tab-label--variant-pill.sc-swirl-tab-bar{padding:0}.tab-bar__tab-suffix.sc-swirl-tab-bar{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-normal)}";
|
|
8
8
|
|
|
9
9
|
const SwirlTabBar = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -63,7 +63,7 @@ const SwirlTabBar = class {
|
|
|
63
63
|
? `var(--s-space-${this.paddingBlockStart})`
|
|
64
64
|
: undefined,
|
|
65
65
|
};
|
|
66
|
-
return (index.h(index.Host, { key: '
|
|
66
|
+
return (index.h(index.Host, { key: '7a40ab6466db00ef0bffd646d7647afa171dbf42' }, index.h("div", { key: 'd3fff309915530aa60a94c1f13e36a89d1fd9094', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
|
|
67
67
|
const className = index$1.classnames("tab-bar__tab", {
|
|
68
68
|
"tab-bar__tab--active": tab.active,
|
|
69
69
|
"tab-bar__tab--variant-pill": this.variant === "pill",
|
|
@@ -78,7 +78,7 @@ const SwirlTabBar = class {
|
|
|
78
78
|
? "true"
|
|
79
79
|
: "false", class: className, id: `tab-${tab.id}`, key: tab.id,
|
|
80
80
|
// eslint-disable-next-line react/jsx-no-bind
|
|
81
|
-
onClick: () => this.activateTab.emit(tab.id), onFocus: this.onTabFocus, role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (index.h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), index.h("span", { class: labelClassName }, tab.label)));
|
|
81
|
+
onClick: () => this.activateTab.emit(tab.id), onFocus: this.onTabFocus, role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (index.h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), index.h("span", { class: labelClassName }, tab.label, tab.suffix && (index.h("span", { class: "tab-bar__tab-suffix" }, tab.suffix)))));
|
|
82
82
|
}))));
|
|
83
83
|
}
|
|
84
84
|
get el() { return index.getElement(this); }
|
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
box-sizing: border-box;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
:host[aria-selected="true"] .resource-list-
|
|
11
|
+
:host[aria-selected="true"] .resource-list-item {
|
|
12
12
|
background-color: var(--swirl-resource-list-item-background-hovered);
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
:host[aria-selected="true"] .resource-list-
|
|
16
|
-
:host[aria-selected="true"] .resource-list-
|
|
15
|
+
:host[aria-selected="true"] .resource-list-item .resource-list-item__media,
|
|
16
|
+
:host[aria-selected="true"] .resource-list-item .resource-list-item__meta {
|
|
17
17
|
--swirl-avatar-background-color: var(--s-surface-raised-hovered);
|
|
18
18
|
--swirl-avatar-group-border-color: var(--s-background-hovered);
|
|
19
19
|
--swirl-badge-border-color: var(--s-background-hovered);
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
.tab-bar {
|
|
11
11
|
position: relative;
|
|
12
12
|
display: flex;
|
|
13
|
+
overflow-x: auto;
|
|
13
14
|
width: 100%;
|
|
14
15
|
justify-content: flex-start;
|
|
15
|
-
overflow-x: auto;
|
|
16
16
|
scrollbar-width: none;
|
|
17
17
|
}
|
|
18
18
|
|
|
@@ -36,21 +36,25 @@
|
|
|
36
36
|
min-width: -moz-fit-content;
|
|
37
37
|
min-width: fit-content;
|
|
38
38
|
margin: 0;
|
|
39
|
+
justify-content: center;
|
|
39
40
|
align-items: center;
|
|
40
41
|
border: none;
|
|
41
42
|
font: inherit;
|
|
42
43
|
font-weight: var(--s-font-weight-medium);
|
|
43
44
|
line-height: var(--s-line-height-lg);
|
|
44
45
|
cursor: pointer;
|
|
45
|
-
justify-content: center;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
.tab-bar__tab.tab-bar__tab--variant-default {
|
|
49
|
-
background-color: transparent;
|
|
50
|
-
color: var(--s-interactive-neutral-default);
|
|
51
49
|
padding: var(--s-space-4) var(--s-space-8);
|
|
50
|
+
color: var(--s-interactive-neutral-default);
|
|
51
|
+
background-color: transparent;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
+
.tab-bar__tab.tab-bar__tab--variant-default:not(.tab-bar__tab--active):hover {
|
|
55
|
+
color: var(--s-interactive-neutral-hovered);
|
|
56
|
+
}
|
|
57
|
+
|
|
54
58
|
.tab-bar__tab.tab-bar__tab--variant-default:not(.tab-bar__tab--active):hover:after {
|
|
55
59
|
position: absolute;
|
|
56
60
|
bottom: 0;
|
|
@@ -64,6 +68,18 @@
|
|
|
64
68
|
pointer-events: none;
|
|
65
69
|
}
|
|
66
70
|
|
|
71
|
+
.tab-bar__tab.tab-bar__tab--variant-default:not(.tab-bar__tab--active):hover .tab-bar__tab-suffix {
|
|
72
|
+
color: var(--s-interactive-neutral-hovered);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.tab-bar__tab.tab-bar__tab--variant-default:not(.tab-bar__tab--active):active {
|
|
76
|
+
color: var(--s-interactive-neutral-pressed);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.tab-bar__tab.tab-bar__tab--variant-default:not(.tab-bar__tab--active):active .tab-bar__tab-suffix {
|
|
80
|
+
color: var(--s-interactive-neutral-pressed);
|
|
81
|
+
}
|
|
82
|
+
|
|
67
83
|
.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active {
|
|
68
84
|
color: var(--s-text-highlight);
|
|
69
85
|
}
|
|
@@ -81,6 +97,10 @@
|
|
|
81
97
|
pointer-events: none;
|
|
82
98
|
}
|
|
83
99
|
|
|
100
|
+
.tab-bar__tab.tab-bar__tab--variant-default.tab-bar__tab--active .tab-bar__tab-suffix {
|
|
101
|
+
color: var(--s-text-highlight);
|
|
102
|
+
}
|
|
103
|
+
|
|
84
104
|
.tab-bar__tab.tab-bar__tab--variant-default:focus {
|
|
85
105
|
outline: none;
|
|
86
106
|
}
|
|
@@ -91,10 +111,10 @@
|
|
|
91
111
|
}
|
|
92
112
|
|
|
93
113
|
.tab-bar__tab.tab-bar__tab--variant-pill {
|
|
114
|
+
padding: var(--s-space-8) var(--s-space-16);
|
|
94
115
|
border-radius: var(--s-border-radius-full-round);
|
|
95
|
-
background: var(--s-action-neutral-default);
|
|
96
116
|
color: var(--s-text-default);
|
|
97
|
-
|
|
117
|
+
background: var(--s-action-neutral-default);
|
|
98
118
|
gap: var(--s-space-8);
|
|
99
119
|
}
|
|
100
120
|
|
|
@@ -107,21 +127,29 @@
|
|
|
107
127
|
}
|
|
108
128
|
|
|
109
129
|
.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active {
|
|
110
|
-
background: var(--s-action-primary-default);
|
|
111
130
|
color: var(--s-text-on-action-primary);
|
|
131
|
+
background: var(--s-action-primary-default);
|
|
112
132
|
}
|
|
113
133
|
|
|
134
|
+
.tab-bar__tab.tab-bar__tab--variant-pill.tab-bar__tab--active .tab-bar__tab-suffix {
|
|
135
|
+
color: var(--s-text-on-action-primary);
|
|
136
|
+
}
|
|
137
|
+
|
|
114
138
|
.tab-bar__tab.tab-bar__tab--variant-pill:focus-visible {
|
|
115
139
|
outline-color: var(--s-focus-default);
|
|
116
140
|
outline-offset: var(--s-space-2);
|
|
117
141
|
}
|
|
118
142
|
|
|
143
|
+
.tab-bar__tab.tab-bar__tab--variant-pill .tab-bar__tab-suffix {
|
|
144
|
+
color: var(--s-text-subdued);
|
|
145
|
+
}
|
|
146
|
+
|
|
119
147
|
@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
|
|
120
148
|
|
|
121
149
|
.tab-bar__tab {
|
|
150
|
+
padding: calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8);
|
|
122
151
|
font-size: var(--s-font-size-sm);
|
|
123
|
-
line-height: var(--s-line-height-sm)
|
|
124
|
-
padding: calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8)
|
|
152
|
+
line-height: var(--s-line-height-sm)
|
|
125
153
|
}
|
|
126
154
|
}
|
|
127
155
|
|
|
@@ -133,8 +161,15 @@
|
|
|
133
161
|
display: inline-flex;
|
|
134
162
|
padding: var(--s-space-8) var(--s-space-8);
|
|
135
163
|
text-align: center;
|
|
164
|
+
white-space: nowrap;
|
|
165
|
+
gap: var(--s-space-4);
|
|
136
166
|
}
|
|
137
167
|
|
|
138
168
|
.tab-bar__tab-label.tab-bar__tab-label--variant-pill {
|
|
139
169
|
padding: 0;
|
|
140
170
|
}
|
|
171
|
+
|
|
172
|
+
.tab-bar__tab-suffix {
|
|
173
|
+
color: var(--s-interactive-neutral-default);
|
|
174
|
+
font-weight: var(--s-font-weight-normal);
|
|
175
|
+
}
|
|
@@ -54,7 +54,7 @@ export class SwirlTabBar {
|
|
|
54
54
|
? `var(--s-space-${this.paddingBlockStart})`
|
|
55
55
|
: undefined,
|
|
56
56
|
};
|
|
57
|
-
return (h(Host, { key: '
|
|
57
|
+
return (h(Host, { key: '7a40ab6466db00ef0bffd646d7647afa171dbf42' }, h("div", { key: 'd3fff309915530aa60a94c1f13e36a89d1fd9094', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
|
|
58
58
|
const className = classnames("tab-bar__tab", {
|
|
59
59
|
"tab-bar__tab--active": tab.active,
|
|
60
60
|
"tab-bar__tab--variant-pill": this.variant === "pill",
|
|
@@ -69,7 +69,7 @@ export class SwirlTabBar {
|
|
|
69
69
|
? "true"
|
|
70
70
|
: "false", class: className, id: `tab-${tab.id}`, key: tab.id,
|
|
71
71
|
// eslint-disable-next-line react/jsx-no-bind
|
|
72
|
-
onClick: () => this.activateTab.emit(tab.id), onFocus: this.onTabFocus, role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), h("span", { class: labelClassName }, tab.label)));
|
|
72
|
+
onClick: () => this.activateTab.emit(tab.id), onFocus: this.onTabFocus, role: this.disableTabSemantics ? undefined : "tab", tabIndex: this.disableTabSemantics ? undefined : tab.active ? 0 : -1, type: "button" }, tab.icon && (h("span", { class: "tab-bar__tab-icon", innerHTML: tab.icon })), h("span", { class: labelClassName }, tab.label, tab.suffix && (h("span", { class: "tab-bar__tab-suffix" }, tab.suffix)))));
|
|
73
73
|
}))));
|
|
74
74
|
}
|
|
75
75
|
static get is() { return "swirl-tab-bar"; }
|
|
@@ -20,19 +20,21 @@ SwirlTabBar.args = {
|
|
|
20
20
|
{
|
|
21
21
|
active: false,
|
|
22
22
|
id: "tab1",
|
|
23
|
-
label: "Tab
|
|
23
|
+
label: "A Tab",
|
|
24
|
+
suffix: "2",
|
|
24
25
|
},
|
|
25
26
|
{
|
|
26
27
|
active: true,
|
|
27
28
|
icon: '<swirl-icon glyph="emoji-mood" size="20"></swirl-icon>',
|
|
28
29
|
id: "tab2",
|
|
29
|
-
label: "Tab
|
|
30
|
+
label: "Another Tab",
|
|
31
|
+
suffix: "12",
|
|
30
32
|
},
|
|
31
33
|
{
|
|
32
34
|
active: false,
|
|
33
35
|
icon: '<swirl-icon glyph="emoji-satisfied" size="20"></swirl-icon>',
|
|
34
36
|
id: "tab3",
|
|
35
|
-
label: "Tab
|
|
37
|
+
label: "Yet Another Tab",
|
|
36
38
|
},
|
|
37
39
|
],
|
|
38
40
|
};
|