diff --git a/packages/wc/src/wc/stashes/e-stash-tab-container.stories.ts b/packages/wc/src/wc/stashes/e-stash-tab-container.stories.ts
index 570f98dd..b057590b 100644
--- a/packages/wc/src/wc/stashes/e-stash-tab-container.stories.ts
+++ b/packages/wc/src/wc/stashes/e-stash-tab-container.stories.ts
@@ -2,7 +2,9 @@ import { Meta } from '@storybook/web-components';
import './e-stash-tab-container';
import { html } from 'lit';
import { StashTabContainerElement } from './e-stash-tab-container';
-import stash from './json/QuadStashStd.json';
+import quadStash from './json/QuadStashStd.json';
+import fragmentsTab from './json/fragmentsTab.json';
+import { NoItemsTab, TabWithItems } from 'poe-custom-elements/types.js';
export default {
title: 'Elements/stashes/e-stash-tab-container',
@@ -21,9 +23,29 @@ const noItemsTab = {
export const Default = {
render() {
return html``;
+ },
+};
+
+export const Fragments = {
+ render() {
+ const badge: NoItemsTab = {
+ id: '',
+ index: 0,
+ metadata: {
+ colour: 'ff',
+ },
+ name: 'F',
+ type: 'FragmentStash',
+ };
+
+ return html``;
},
};
diff --git a/packages/wc/src/wc/stashes/e-stash-tab-container.ts b/packages/wc/src/wc/stashes/e-stash-tab-container.ts
index b6c0a53c..bdc36723 100644
--- a/packages/wc/src/wc/stashes/e-stash-tab-container.ts
+++ b/packages/wc/src/wc/stashes/e-stash-tab-container.ts
@@ -5,10 +5,12 @@ import '@shoelace-style/shoelace/dist/components/button/button.js';
import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
import '@shoelace-style/shoelace/dist/components/copy-button/copy-button.js';
import { TabBadgeElement } from './tab-badge';
+import '@shoelace-style/shoelace/dist/components/alert/alert.js';
import { LitElement, html, css, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
import { NoItemsTab, TabWithItems } from 'poe-custom-elements/types.js';
+import SlAlert from '@shoelace-style/shoelace/dist/components/alert/alert.js';
declare global {
interface HTMLElementTagNameMap {
@@ -28,6 +30,8 @@ export class StashTabContainerElement extends LitElement {
@property() status: 'pending' | 'complete' = 'pending';
@property({ type: Object }) badge: NoItemsTab | null = null;
+ @query('sl-alert') scarabsSuccessAlert!: SlAlert;
+
constructor() {
super();
TabBadgeElement.define();
@@ -35,29 +39,57 @@ export class StashTabContainerElement extends LitElement {
protected render(): TemplateResult {
return html`