@aquera/nile-elements 0.0.67 → 0.0.69

package/src/nile-tab-group/nile-tab-group.css.ts

@@ -18,7 +18,8 @@ export const styles = css`
   :host {
     --indicator-color: var(--nile-colors-primary-600);
     --track-color: #e5e9eb;
-    --track-width: 1px;
+    --track-width: 2px;
+    --tab-gap: 12px;
 
     display: block;
   }
@@ -31,7 +32,12 @@ export const styles = css`
   .tab-group__tabs {
     display: flex;
     position: relative;
-    gap: 24px;
+    gap: var(--tab-gap);
+  }
+
+  .hide__track {
+    --track-width: 0px;
+    --tab-gap: 3px;
   }
 
   .tab-group__indicator {
@@ -107,7 +113,8 @@ export const styles = css`
     flex: 1 1 auto;
     position: relative;
     flex-direction: row;
-    border-bottom: solid var(--track-width) var(--track-color);
+    border-bottom: solid var(--track-width)
+      var(--nile-colors-gray-light-mode-200);
   }
 
   .tab-group--top .tab-group__indicator {
@@ -242,6 +249,13 @@ export const styles = css`
   .tab-group--end ::slotted(nile-tab-panel) {
     --padding: 0 10px;
   }
+
+  .hide__track slot::slotted(nile-tab) {
+    --tab-border-radius: 4px;
+    --tab-padding:8px 12px;
+    --tab-hover-background-color: #f9fafb;
+    --tab-active-background-color: var(--nile-colors-brand-50);
+  }
 `;
 
 export default [styles];

package/src/nile-tab-group/nile-tab-group.ts

@@ -48,7 +48,7 @@ import type NileTabPanel from '../nile-tab-panel/nile-tab-panel';
 @customElement('nile-tab-group')
 export class NileTabGroup extends NileElement {
 
-	static styles: CSSResultGroup = styles;
+  static styles: CSSResultGroup = styles;
 
   private activeTab?: NileTab;
   private mutationObserver: MutationObserver;
@@ -66,6 +66,10 @@ export class NileTabGroup extends NileElement {
   /** The placement of the tabs. */
   @property() placement: 'top' | 'bottom' | 'start' | 'end' = 'top';
 
+
+  /** Track for showing Indicators and Background. */
+  @property({ type: Boolean, reflect: true,attribute:'no-track'}) noTrack = false;
+
   /**
    * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
    * manual, the tab will receive focus but will not show until the user presses spacebar or enter.
@@ -113,11 +117,11 @@ export class NileTabGroup extends NileElement {
       whenAllDefined.then(() => {
         // Set initial tab state when the tabs become visible
         const intersectionObserver = new IntersectionObserver((entries, observer) => {
-          if (entries[0].intersectionRatio > 0) {
-            this.setAriaLabels();
+            if (entries[0].intersectionRatio > 0) {
+              this.setAriaLabels();
             this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });
-            observer.unobserve(entries[0].target);
-          }
+              observer.unobserve(entries[0].target);
+            }
         });
         intersectionObserver.observe(this.tabGroup);
       });
@@ -231,8 +235,8 @@ export class NileTabGroup extends NileElement {
     this.nav.scroll({
       left:
         true
-          ? this.nav.scrollLeft + this.nav.clientWidth
-          : this.nav.scrollLeft - this.nav.clientWidth,
+        ? this.nav.scrollLeft + this.nav.clientWidth
+        : this.nav.scrollLeft - this.nav.clientWidth,
       behavior: 'smooth'
     });
   }
@@ -241,8 +245,8 @@ export class NileTabGroup extends NileElement {
     this.nav.scroll({
       left:
         true
-          ? this.nav.scrollLeft - this.nav.clientWidth
-          : this.nav.scrollLeft + this.nav.clientWidth,
+        ? this.nav.scrollLeft - this.nav.clientWidth
+        : this.nav.scrollLeft + this.nav.clientWidth,
       behavior: 'smooth'
     });
   }
@@ -310,7 +314,7 @@ export class NileTabGroup extends NileElement {
     const offset = precedingTabs.reduce(
       (previous, current) => ({
         left: previous.left + current.clientWidth + 24,
-        top: previous.top + current.clientHeight
+        top: previous.top + current.clientHeight + 24
       }),
       { left: 0, top: 0 }
     );
@@ -353,7 +357,7 @@ export class NileTabGroup extends NileElement {
     } else {
       this.hasScrollControls =
         ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
-        this.hasScrollControls = false;
+      this.hasScrollControls = false;
     }
   }
 
@@ -391,7 +395,8 @@ export class NileTabGroup extends NileElement {
           'tab-group--start': this.placement === 'start',
           'tab-group--end': this.placement === 'end',
           'tab-group--rtl': true,
-          'tab-group--has-scroll-controls': this.hasScrollControls
+          'tab-group--has-scroll-controls': this.hasScrollControls,
+          'hide__track':this.noTrack
         })}
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
@@ -413,8 +418,13 @@ export class NileTabGroup extends NileElement {
 
           <div class="tab-group__nav">
             <div part="tabs" class="tab-group__tabs" role="tablist">
-              <div part="active-tab-indicator" class="tab-group__indicator"></div>
-              <slot name="nav" @slotchange=${this.syncTabsAndPanels}></slot>
+              <div
+                part="active-tab-indicator"
+                class=${classMap({
+                  'tab-group__indicator': !this.noTrack,
+                })}
+              ></div>
+              <slot name="nav"  @slotchange=${this.syncTabsAndPanels}></slot>
             </div>
           </div>
 

package/src/nile-table-body/nile-table-body.ts

@@ -85,47 +85,12 @@ export class NileTableBody extends NileElement {
     });
   }
 
-  private handleDataChange() {
-    let i = 0;
-    let j = 0;
-    this._childNodes.forEach((child: any, index) => {
-      if (
-        index != 0 &&
-        child.tagName &&
-        child?.tagName?.toLowerCase() === 'nile-table-row'
-      ) {
-        let nilerows = this.getChildren(child, 'nile-table-cell-item');
-        if (nilerows.length > 0) {
-          nilerows.forEach(
-            (element: { innerHTML: any }, curr_index: number) => {
-              element.innerHTML = this.rows_data[i][curr_index];
-            }
-          );
-          i++;
-        }
-      }
-    });
-  }
-
-  private handleDataSort(index: number, order: string) {
-    this.rows_data.sort((a: any, b: any) => {
-      let first_row_value = a[index]?.toLowerCase();
-      let second_row_value = b[index]?.toLowerCase();
-      return order == 'asc'
-        ? first_row_value <= second_row_value
-          ? 1
-          : -1
-        : first_row_value < second_row_value
-        ? -1
-        : 1;
-    });
-  }
-
   private handleSort(e: any) {
     const { curr_sort_string, order } = e.detail.value;
-    this.sort__index = this.getIndexValue(curr_sort_string);
-    this.handleDataSort(this.sort__index, order);
-    this.handleDataChange();
+    const header_index = this.getIndexValue(curr_sort_string);
+    this.emit('nile-sort', {
+      value: { header_index, curr_sort_string, order },
+    });
   }
 
   private handleSearch(e: any) {

package/src/nile-table-header-item/nile-table-header-item.css.ts

@@ -16,6 +16,7 @@ export const styles = css`
     box-sizing: border-box;
     padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);
     min-height: 44px;
+    height: 44px;
   }
 
   .headers {
@@ -24,7 +25,7 @@ export const styles = css`
     height: auto;
     width: 100%;
     gap: 8px;
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-gray-light-mode-600);
     font-family: var(--nile-font-family-serif);
     font-feature-settings: 'clig' off, 'liga' off;
     font-size: var(--nile-type-scale-2);
@@ -44,13 +45,20 @@ export const styles = css`
   .sorting__icons {
     display: flex;
     flex-direction: column;
-    /* justify-content: space-between; */
     align-items: centre;
   }
 
   .sorting__icons nile-icon:hover {
     opacity: 0.4;
   }
+
+  .hover__arrow {
+    opacity: 0;
+  }
+
+  .headers:hover .hover__arrow {
+    opacity: 0.3;
+  }
 `;
 
 export default [styles];

package/src/nile-table-header-item/nile-table-header-item.ts

@@ -12,7 +12,7 @@ import {
   CSSResultArray,
   TemplateResult,
 } from 'lit-element';
-import { customElement } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import { styles } from './nile-table-header-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
@@ -44,6 +44,8 @@ export class NileTableHeaderItem extends NileElement {
   @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =
     '';
 
+  @state() sorting_ct = 0;
+
   /* #endregion */
 
   /* #region Methods */
@@ -53,12 +55,11 @@ export class NileTableHeaderItem extends NileElement {
    * @slot This is a slot test
    */
   private handleSort(e: any) {
-    const clickedIcon = e.target;
-    const order =
-      clickedIcon.getAttribute('name') === 'arrowdropup' ? 'asc' : 'desc';
+    this.sorting_ct++;
     let curr_sort_string = this.hasSlotController.host.innerHTML;
+    const order = ['normal', 'asc', 'des'];
     this.emit('nile-click-sort', {
-      value: { curr_sort_string, order },
+      value: { curr_sort_string, order: order[this.sorting_ct % 3] },
     });
   }
 
@@ -70,19 +71,27 @@ export class NileTableHeaderItem extends NileElement {
     return html` ${this.hasSlotController.test('[default]')
       ? html` <div class="headers">
           <slot> </slot>
-          ${this.havesort
-            ? html` <span class="sorting__icons">
-                <nile-icon
-                  name="arrowdropup"
-                  size="16"
-                  @click=${this.handleSort}
-                ></nile-icon>
-                <nile-icon
-                  name="arrowdropdown"
-                  size="16"
-                  @click=${this.handleSort}
-                ></nile-icon>
-              </span>`
+          ${this.havesort && this.sorting_ct % 3 === 0
+            ? html`<nile-icon
+                name="sortdown"
+                size="16"
+                @click=${this.handleSort}
+                class="hover__arrow"
+              ></nile-icon>`
+            : null}
+          ${this.havesort && this.sorting_ct % 3 === 1
+            ? html`<nile-icon
+                name="sortdown"
+                size="16"
+                @click=${this.handleSort}
+              ></nile-icon>`
+            : null}
+          ${this.havesort && this.sorting_ct % 3 === 2
+            ? html`<nile-icon
+                name="sortup"
+                size="16"
+                @click=${this.handleSort}
+              ></nile-icon>`
             : null}
           ${this.iconName
             ? html` <nile-icon name="${this.iconName}" size="16"></nile-icon>`

package/src/nile-table-row/nile-table-row.ts

@@ -41,8 +41,28 @@ export class NileTableRow extends NileElement {
    * Render method
    * @slot This is a slot test
    */
+
+  private handleSortingAlter(event: CustomEvent) {
+    const header_items: any = [
+      ...this.querySelectorAll('nile-table-header-item'),
+    ];
+    for (let i = 0; i < header_items.length; i++) {
+      const header = header_items[i];
+      const haveIcon =
+        header.textContent == event.detail.value.curr_sort_string;
+      if (!haveIcon) {
+        header.sorting_ct = 0;
+      }
+    }
+  }
+
   public render(): TemplateResult {
-    return html` <slot  part="nile-row"></slot> `;
+    return html`
+      <slot
+        part="nile-row"
+        @nile-click-sort="${this.handleSortingAlter}"
+      ></slot>
+    `;
   }
 
   /* #endregion */

package/src/nile-textarea/nile-textarea.ts

@@ -67,11 +67,9 @@ export class NileTextarea extends NileElement  {
   /** The textarea's label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
 
-  /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */
-  @property({ attribute: 'help-text' }) helpText = '';
+  @property({ attribute: 'help-text', reflect: true }) helpText = '';
 
-  /** The input's error message. If you need to display HTML, use the `error-message` slot instead. */
-  @property({ attribute: 'error-message' }) errorMessage = '';
+  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';;
 
   /** Placeholder text to show as a hint when the input is empty. */
   @property() placeholder = '';

package/src/nile-toast/nile-toast.css.ts

@@ -21,12 +21,14 @@ export const styles = css`
   .alert {
     position: relative;
     display: flex;
-    align-items: stretch;
+    align-items: flex-start;
     border: solid 2px 2px;
-    border-radius: var(--nile-radius-base-standard);
+    border-radius: 8px;
     margin: inherit;
-    padding: 12px;
-    gap: 10px;
+    padding: 16px;
+    gap: 16px;
+    width: max-content;
+    min-width: 400px;
   }
 
   .alert:not(.alert--has-icon) .alert__icon,
@@ -35,10 +37,8 @@ export const styles = css`
   }
 
   .alert__prefix-icon-container {
-    height: 26px;
-    width: 26px;
+    background-color: red;
     border-radius: 4px;
-    padding: 6px;
     box-sizing: border-box;
     display: flex;
     justify-content: center;
@@ -111,10 +111,9 @@ export const styles = css`
   .alert--black .alert__prefix-icon-container {
     background: var(--nile-toast-color-icon-background-color-black);
   }
-  
+
   .alert__message {
     flex: 1 1 auto;
-    display: block;
     overflow: hidden;
     display: flex;
     align-items: center;
@@ -122,17 +121,19 @@ export const styles = css`
     align-items: flex-start;
     font-family: var(--nile-font-family-serif);
     font-size: 14px;
-    font-weight: 400;
-    line-height: 14px;
+    line-height: 20px;
     color: black;
+    gap:3px;
   }
 
   .alert__message--title {
     font-weight: 600;
+    color:#344054;
   }
 
   .alert__message--content {
-    line-height: 21px;
+    font-weight:400;
+    color:#475467;
   }
 
   .alert__message--content-only {
@@ -168,11 +169,11 @@ export const styles = css`
     padding: 0 6px;
 
     color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
-    font-size: 12px;
+    font-family: var
+    font-size: 14px;
     font-style: normal;
-    font-weight: 500;
-    line-height: 12px;
+    font-weight: 400;
+    line-height: 20px;
     letter-spacing: 0.2px;
   }
 

package/src/nile-toast/nile-toast.ts

@@ -192,15 +192,15 @@ export class NileToast extends NileElement {
       case 'success':
         return 'check-circle';
       case 'info':
-        return 'info-icon';
+        return 'info-circle';
       case 'warning':
-        return 'info-icon';
+        return 'alert-circle';
       case 'error':
-        return 'info-icon';
+        return 'alert-circle';
       case 'gray':
-        return 'info-icon';
+        return 'info-circle';
       case 'black':
-        return 'info-icon';
+        return 'info-circle';
     }
   }
 
@@ -310,8 +310,9 @@ export class NileToast extends NileElement {
                 >
                   <nile-icon
                     name="${this.getIconNameByVariant()}"
-                    size="15"
+                    size="20"
                     color="${this.getIconColorByVariant()}"
+                    method="stroke"
                   ></nile-icon>
                 </div>
               `
@@ -364,7 +365,8 @@ export class NileToast extends NileElement {
                 class="alert__close-button"
                 name="close"
                 label="close"
-                size="14"
+                size="20"
+                color="#98A2B3"
                 @click=${this.handleCloseClick}
               ></nile-icon-button>
             `

package/src/nile-tooltip/nile-tooltip.css.ts

@@ -21,7 +21,7 @@ export const styles = css`
 
   .tooltip {
     --arrow-size: 6px;
-    --arrow-color: hsl(240 3.7% 15.9%);
+    --arrow-color: var(--nile-tooltip-color-background);
   }
 
   .tooltip::part(popup) {
@@ -49,13 +49,13 @@ export const styles = css`
     display: block;
     width: max-content;
     max-width: var(--max-width);
-    border-radius: 0.25rem;
+    border-radius: 4px;
     background-color: var(--nile-tooltip-color-background);
-    font-size:var(--nile-tooltip-font-size-sm);
-    font-weight:var( --nile-tooltip-font-weight-sm);
-    line-height:var(--nile-tooltip-line-height-sm);
+    font-size: var(--nile-tooltip-font-size-sm);
+    font-weight: var(--nile-tooltip-font-weight-sm);
+    line-height: var(--nile-tooltip-line-height-sm);
     padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);
-    color: hsl(0, 0%, 100%);
+    color: #ffffff;
     pointer-events: none;
     word-break: break-word;
   }

package/tsconfig.json

@@ -18,5 +18,7 @@
     "strictPropertyInitialization": false,
     "strictFunctionTypes": false,
   },
-  "include": ["**/*.ts"]
+  "include": [
+    "src/**/*.ts"
+  ]
 }

package/web-test-runner.config.mjs

@@ -1,10 +1,10 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
+import { puppeteerLauncher } from '@web/test-runner-puppeteer';
 
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode', 'Multiple versions of Lit loaded', 'The main \'lit-element\' module entrypoint is deprecated'];
 
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   /** Test files to run */
-  files: 'dist/test/**/*.test.js',
+  files: 'dist/src/**/*.test.js',
 
   /** Resolve bare module imports */
   nodeResolve: {
@@ -21,21 +21,21 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
     return true;
   },
 
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
   /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
+  concurrentBrowsers: 2,
 
   /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
+  concurrency: 1,
 
   /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
+  browsers: [
+    puppeteerLauncher({ launchOptions: { headless: true } }),
+  ],
+
+  /** Test framework configuration */
+  testFramework: {
+    config: {
+      timeout: 5000 // Increase the default timeout to 5 seconds
+    }
+  },
 });

package/dist/stories/icons.stories.d.ts

@@ -1,29 +0,0 @@
-import { TemplateResult } from 'lit';
-import '../src/nile-button';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        name: {
-            control: string;
-        };
-        textColor: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    title?: string;
-    name?: string;
-    textColor?: string;
-    slot?: TemplateResult;
-}
-export declare const Regular: Story<ArgTypes>;
-export declare const CustomTitle: Story<ArgTypes>;
-export declare const SlottedContent: Story<ArgTypes>;

package/dist/stories/icons.stories.js

@@ -1,27 +0,0 @@
-import { html } from 'lit';
-import '../src/nile-button';
-export default {
-    title: 'Nile Icons',
-    component: 'nile-icon',
-    argTypes: {
-        name: { control: 'text' },
-        textColor: { control: 'color' },
-    },
-};
-const Template = ({ title = 'Agents', textColor, name, slot, }) => html `
-  <h1>heading 2 ${name}</h1>
-`;
-export const Regular = Template.bind({});
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-    title: 'Agent Icon',
-    name: 'agents',
-};
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-    slot: html `<p>Slotted content</p>`,
-};
-SlottedContent.argTypes = {
-    slot: { table: { disable: true } },
-};
-//# sourceMappingURL=icons.stories.js.map

package/dist/stories/icons.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icons.stories.js","sourceRoot":"","sources":["../../stories/icons.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,oBAAoB,CAAC;AAE5B,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAChC;CACF,CAAC;AAeF,MAAM,QAAQ,GAAoB,CAAC,EACjC,KAAK,GAAG,QAAQ,EAChB,SAAS,EACT,IAAI,EACJ,IAAI,GACK,EAAE,EAAE,CAAC,IAAI,CAAA;kBACF,IAAI;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE7C,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI,CAAA,wBAAwB;CACnC,CAAC;AACF,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAC","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport '../src/nile-button';\n\nexport default {\n  title: 'Nile Icons',\n  component: 'nile-icon',\n  argTypes: {\n    name: { control: 'text' },\n    textColor: { control: 'color' },\n  },\n};\n\ninterface Story<T> {\n  (args: T): TemplateResult;\n  args?: Partial<T>;\n  argTypes?: Record<string, unknown>;\n}\n\ninterface ArgTypes {\n  title?: string;\n  name?: string;\n  textColor?: string;\n  slot?: TemplateResult;\n}\n\nconst Template: Story<ArgTypes> = ({\n  title = 'Agents',\n  textColor,\n  name,\n  slot,\n}: ArgTypes) => html`\n  <h1>heading 2 ${name}</h1>\n`;\n\nexport const Regular = Template.bind({});\n\nexport const CustomTitle = Template.bind({});\n\nCustomTitle.args = {\n  title: 'Agent Icon',\n  name: 'agents',\n};\n\nexport const SlottedContent = Template.bind({});\nSlottedContent.args = {\n  slot: html`<p>Slotted content</p>`,\n};\nSlottedContent.argTypes = {\n  slot: { table: { disable: true } },\n};\n"]}

package/dist/stories/index.stories.d.ts

@@ -1,33 +0,0 @@
-import { TemplateResult } from 'lit';
-import '../src/nile-button';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        title: {
-            control: string;
-        };
-        counter: {
-            control: string;
-        };
-        textColor: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    name?: string;
-    counter?: number;
-    textColor?: string;
-    slot?: TemplateResult;
-}
-export declare const Regular: Story<ArgTypes>;
-export declare const CustomTitle: Story<ArgTypes>;
-export declare const CustomCounter: Story<ArgTypes>;
-export declare const SlottedContent: Story<ArgTypes>;