@triptease/tt-accordion 0.0.1

package/README.md

@@ -0,0 +1,42 @@
+# \<tt-accordion>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+yarn add @triptease/tt-accordion
+```
+
+## Usage
+
+```html
+<script type="module">
+  import '@triptease/tt-accordion';
+</script>
+
+<tt-accordion label="Section title">
+  <p>Content goes here.</p>
+</tt-accordion>
+```
+
+### Attributes
+
+| Attribute | Type    | Default | Description                          |
+|-----------|---------|---------|--------------------------------------|
+| `label`   | string  | `""`    | The header text shown on the trigger |
+| `open`    | boolean | `false` | Whether the accordion is expanded    |
+
+## Testing
+
+To execute a single test run:
+
+```bash
+yarn test
+```
+
+To run the tests in interactive watch mode:
+
+```bash
+yarn test:watch
+```

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/cjs/src/TtAccordion.js

@@ -0,0 +1,49 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtAccordion = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const unsafe_svg_js_1 = require("lit/directives/unsafe-svg.js");
+const icons_1 = require("@triptease/icons");
+const styles_js_1 = require("./styles.js");
+class TtAccordion extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.open = false;
+    }
+    _toggle() {
+        this.open = !this.open;
+    }
+    render() {
+        return (0, lit_1.html) `
+      <button
+        id="trigger"
+        aria-expanded=${this.open}
+        aria-controls="content"
+        @click=${this._toggle}
+      >
+        <span>${this.label}</span>
+        <span class="icon" aria-hidden="true">${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.chevronDown)}</span>
+      </button>
+      <div id="content" class="content" role="region" aria-labelledby="trigger">
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+exports.TtAccordion = TtAccordion;
+TtAccordion.styles = styles_js_1.styles;
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], TtAccordion.prototype, "label", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, reflect: true })
+], TtAccordion.prototype, "open", void 0);
+//# sourceMappingURL=TtAccordion.js.map

package/dist/cjs/src/TtAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TtAccordion.js","sourceRoot":"","sources":["../../../src/TtAccordion.ts"],"names":[],"mappings":";;;;;;;;;AAAA,6BAAuC;AACvC,qDAA6C;AAC7C,gEAAyD;AACzD,4CAA+C;AAC/C,2CAAqC;AAErC,MAAa,WAAY,SAAQ,gBAAU;IAA3C;;QAIE,UAAK,GAAG,EAAE,CAAC;QAGX,SAAI,GAAG,KAAK,CAAC;IAsBf,CAAC;IApBS,OAAO;QACb,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,IAAA,UAAI,EAAA;;;wBAGS,IAAI,CAAC,IAAI;;iBAEhB,IAAI,CAAC,OAAO;;gBAEb,IAAI,CAAC,KAAK;gDACsB,IAAA,yBAAS,EAAC,mBAAW,CAAC;;;;;KAKjE,CAAC;IACJ,CAAC;;AA5BH,kCA6BC;AA5BQ,kBAAM,GAAG,kBAAM,AAAT,CAAU;AAGvB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAChB;AAGX;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC9B","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { chevronDown } from '@triptease/icons';\nimport { styles } from './styles.js';\n\nexport class TtAccordion extends LitElement {\n  static styles = styles;\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  private _toggle() {\n    this.open = !this.open;\n  }\n\n  render() {\n    return html`\n      <button\n        id=\"trigger\"\n        aria-expanded=${this.open}\n        aria-controls=\"content\"\n        @click=${this._toggle}\n      >\n        <span>${this.label}</span>\n        <span class=\"icon\" aria-hidden=\"true\">${unsafeSVG(chevronDown)}</span>\n      </button>\n      <div id=\"content\" class=\"content\" role=\"region\" aria-labelledby=\"trigger\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/cjs/src/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtAccordion = void 0;
+var tt_accordion_js_1 = require("./tt-accordion.js");
+Object.defineProperty(exports, "TtAccordion", { enumerable: true, get: function () { return tt_accordion_js_1.TtAccordion; } });
+__exportStar(require("./types.js"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,qDAAgD;AAAvC,8GAAA,WAAW,OAAA;AACpB,6CAA2B","sourcesContent":["export { TtAccordion } from './tt-accordion.js';\nexport * from './types.js';\n"]}

package/dist/cjs/src/styles.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styles = void 0;
+const lit_1 = require("lit");
+exports.styles = (0, lit_1.css) `
+  :host {
+    display: block;
+    background-color: var(--color-surface-300);
+  }
+
+  button {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    cursor: pointer;
+    padding: var(--space-scale-2) var(--space-scale-3);
+    font-size: var(--font-size-200);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-500);
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--color-border-200);
+  }
+
+  button:focus-visible {
+    outline: 4px solid rgba(1, 150, 237, 0.24);
+    outline-offset: -2px;
+  }
+
+  .icon {
+    transition: transform 200ms ease;
+    flex-shrink: 0;
+    color: var(--color-text-300);
+  }
+
+  :host([open]) .icon {
+    transform: rotate(180deg);
+  }
+
+  .content {
+    display: none;
+    padding: var(--space-scale-2) var(--space-scale-3);
+    font-size: var(--font-size-200);
+    color: var(--color-text-400);
+  }
+
+  :host([open]) .content {
+    display: block;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/cjs/src/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n    background-color: var(--color-surface-300);\n  }\n\n  button {\n    all: unset;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    cursor: pointer;\n    padding: var(--space-scale-2) var(--space-scale-3);\n    font-size: var(--font-size-200);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-text-500);\n    box-sizing: border-box;\n    border-bottom: 1px solid var(--color-border-200);\n  }\n\n  button:focus-visible {\n    outline: 4px solid rgba(1, 150, 237, 0.24);\n    outline-offset: -2px;\n  }\n\n  .icon {\n    transition: transform 200ms ease;\n    flex-shrink: 0;\n    color: var(--color-text-300);\n  }\n\n  :host([open]) .icon {\n    transform: rotate(180deg);\n  }\n\n  .content {\n    display: none;\n    padding: var(--space-scale-2) var(--space-scale-3);\n    font-size: var(--font-size-200);\n    color: var(--color-text-400);\n  }\n\n  :host([open]) .content {\n    display: block;\n  }\n`;\n"]}

package/dist/cjs/src/tt-accordion.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtAccordion = void 0;
+const TtAccordion_js_1 = require("./TtAccordion.js");
+Object.defineProperty(exports, "TtAccordion", { enumerable: true, get: function () { return TtAccordion_js_1.TtAccordion; } });
+if (typeof window !== 'undefined') {
+    if (!window.customElements.get('tt-accordion')) {
+        window.customElements.define('tt-accordion', TtAccordion_js_1.TtAccordion);
+    }
+}
+//# sourceMappingURL=tt-accordion.js.map

package/dist/cjs/src/tt-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-accordion.js","sourceRoot":"","sources":["../../../src/tt-accordion.ts"],"names":[],"mappings":";;;AAAA,qDAA+C;AAQtC,4FARA,4BAAW,OAQA;AANpB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC;QAC/C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,4BAAW,CAAC,CAAC;IAC5D,CAAC;AACH,CAAC","sourcesContent":["import { TtAccordion } from './TtAccordion.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-accordion')) {\n    window.customElements.define('tt-accordion', TtAccordion);\n  }\n}\n\nexport { TtAccordion };\n"]}

package/dist/cjs/src/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/cjs/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtAccordion } from './TtAccordion.js';\n\ninterface TtAccordionExternalAttributes {\n  label?: string;\n  open?: boolean;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-accordion': TtAccordion;\n  }\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-accordion': TtAccordionExternalAttributes & { style?: string };\n    }\n  }\n\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-accordion': TtAccordionExternalAttributes & {\n          key?: string;\n          ref?: React.Ref<unknown>;\n          style?: React.CSSProperties;\n          children?: React.ReactNode;\n        };\n      }\n    }\n  }\n}\n"]}

package/dist/esm/src/TtAccordion.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+export declare class TtAccordion extends LitElement {
+    static styles: import("lit").CSSResult;
+    label: string;
+    open: boolean;
+    private _toggle;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/esm/src/TtAccordion.js

@@ -0,0 +1,45 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { chevronDown } from '@triptease/icons';
+import { styles } from './styles.js';
+export class TtAccordion extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.open = false;
+    }
+    _toggle() {
+        this.open = !this.open;
+    }
+    render() {
+        return html `
+      <button
+        id="trigger"
+        aria-expanded=${this.open}
+        aria-controls="content"
+        @click=${this._toggle}
+      >
+        <span>${this.label}</span>
+        <span class="icon" aria-hidden="true">${unsafeSVG(chevronDown)}</span>
+      </button>
+      <div id="content" class="content" role="region" aria-labelledby="trigger">
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+TtAccordion.styles = styles;
+__decorate([
+    property({ type: String })
+], TtAccordion.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TtAccordion.prototype, "open", void 0);
+//# sourceMappingURL=TtAccordion.js.map

package/dist/esm/src/TtAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TtAccordion.js","sourceRoot":"","sources":["../../../src/TtAccordion.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,OAAO,WAAY,SAAQ,UAAU;IAA3C;;QAIE,UAAK,GAAG,EAAE,CAAC;QAGX,SAAI,GAAG,KAAK,CAAC;IAsBf,CAAC;IApBS,OAAO;QACb,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;wBAGS,IAAI,CAAC,IAAI;;iBAEhB,IAAI,CAAC,OAAO;;gBAEb,IAAI,CAAC,KAAK;gDACsB,SAAS,CAAC,WAAW,CAAC;;;;;KAKjE,CAAC;IACJ,CAAC;;AA3BM,kBAAM,GAAG,MAAM,AAAT,CAAU;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC9B","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { chevronDown } from '@triptease/icons';\nimport { styles } from './styles.js';\n\nexport class TtAccordion extends LitElement {\n  static styles = styles;\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  private _toggle() {\n    this.open = !this.open;\n  }\n\n  render() {\n    return html`\n      <button\n        id=\"trigger\"\n        aria-expanded=${this.open}\n        aria-controls=\"content\"\n        @click=${this._toggle}\n      >\n        <span>${this.label}</span>\n        <span class=\"icon\" aria-hidden=\"true\">${unsafeSVG(chevronDown)}</span>\n      </button>\n      <div id=\"content\" class=\"content\" role=\"region\" aria-labelledby=\"trigger\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/esm/src/index.d.ts

@@ -0,0 +1,2 @@
+export { TtAccordion } from './tt-accordion.js';
+export * from './types.js';

package/dist/esm/src/index.js

@@ -0,0 +1,3 @@
+export { TtAccordion } from './tt-accordion.js';
+export * from './types.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,cAAc,YAAY,CAAC","sourcesContent":["export { TtAccordion } from './tt-accordion.js';\nexport * from './types.js';\n"]}

package/dist/esm/src/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/esm/src/styles.js

@@ -0,0 +1,49 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    background-color: var(--color-surface-300);
+  }
+
+  button {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    cursor: pointer;
+    padding: var(--space-scale-2) var(--space-scale-3);
+    font-size: var(--font-size-200);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-500);
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--color-border-200);
+  }
+
+  button:focus-visible {
+    outline: 4px solid rgba(1, 150, 237, 0.24);
+    outline-offset: -2px;
+  }
+
+  .icon {
+    transition: transform 200ms ease;
+    flex-shrink: 0;
+    color: var(--color-text-300);
+  }
+
+  :host([open]) .icon {
+    transform: rotate(180deg);
+  }
+
+  .content {
+    display: none;
+    padding: var(--space-scale-2) var(--space-scale-3);
+    font-size: var(--font-size-200);
+    color: var(--color-text-400);
+  }
+
+  :host([open]) .content {
+    display: block;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n    background-color: var(--color-surface-300);\n  }\n\n  button {\n    all: unset;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    cursor: pointer;\n    padding: var(--space-scale-2) var(--space-scale-3);\n    font-size: var(--font-size-200);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-text-500);\n    box-sizing: border-box;\n    border-bottom: 1px solid var(--color-border-200);\n  }\n\n  button:focus-visible {\n    outline: 4px solid rgba(1, 150, 237, 0.24);\n    outline-offset: -2px;\n  }\n\n  .icon {\n    transition: transform 200ms ease;\n    flex-shrink: 0;\n    color: var(--color-text-300);\n  }\n\n  :host([open]) .icon {\n    transform: rotate(180deg);\n  }\n\n  .content {\n    display: none;\n    padding: var(--space-scale-2) var(--space-scale-3);\n    font-size: var(--font-size-200);\n    color: var(--color-text-400);\n  }\n\n  :host([open]) .content {\n    display: block;\n  }\n`;\n"]}

package/dist/esm/src/tt-accordion.d.ts

@@ -0,0 +1,2 @@
+import { TtAccordion } from './TtAccordion.js';
+export { TtAccordion };

package/dist/esm/src/tt-accordion.js

@@ -0,0 +1,8 @@
+import { TtAccordion } from './TtAccordion.js';
+if (typeof window !== 'undefined') {
+    if (!window.customElements.get('tt-accordion')) {
+        window.customElements.define('tt-accordion', TtAccordion);
+    }
+}
+export { TtAccordion };
+//# sourceMappingURL=tt-accordion.js.map

package/dist/esm/src/tt-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-accordion.js","sourceRoot":"","sources":["../../../src/tt-accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC;QAC/C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;IAC5D,CAAC;AACH,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAC","sourcesContent":["import { TtAccordion } from './TtAccordion.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-accordion')) {\n    window.customElements.define('tt-accordion', TtAccordion);\n  }\n}\n\nexport { TtAccordion };\n"]}

package/dist/esm/src/types.d.ts

@@ -0,0 +1,30 @@
+import { TtAccordion } from './TtAccordion.js';
+interface TtAccordionExternalAttributes {
+    label?: string;
+    open?: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tt-accordion': TtAccordion;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'tt-accordion': TtAccordionExternalAttributes & {
+                style?: string;
+            };
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'tt-accordion': TtAccordionExternalAttributes & {
+                    key?: string;
+                    ref?: React.Ref<unknown>;
+                    style?: React.CSSProperties;
+                    children?: React.ReactNode;
+                };
+            }
+        }
+    }
+}
+export {};

package/dist/esm/src/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtAccordion } from './TtAccordion.js';\n\ninterface TtAccordionExternalAttributes {\n  label?: string;\n  open?: boolean;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-accordion': TtAccordion;\n  }\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-accordion': TtAccordionExternalAttributes & { style?: string };\n    }\n  }\n\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-accordion': TtAccordionExternalAttributes & {\n          key?: string;\n          ref?: React.Ref<unknown>;\n          style?: React.CSSProperties;\n          children?: React.ReactNode;\n        };\n      }\n    }\n  }\n}\n"]}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@triptease/tt-accordion",
+  "description": "Webcomponent tt-accordion following open-wc recommendations",
+  "license": "MIT",
+  "author": "@triptease",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/esm/src/index.js",
+  "module": "dist/esm/src/index.js",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/esm/src/index.d.ts",
+      "import": "./dist/esm/src/index.js",
+      "require": "./dist/cjs/src/index.js"
+    },
+    "./types": {
+      "source": "./src/types.ts",
+      "types": "./dist/esm/src/types.d.ts",
+      "import": "./dist/esm/src/types.js",
+      "require": "./dist/cjs/src/types.js"
+    }
+  },
+  "files": [
+    "dist/esm",
+    "dist/cjs"
+  ],
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "build": "yarn build:node && yarn build:web && yarn analyze --exclude dist",
+    "build:esm": "tsc",
+    "build:cjs": "tsc -p tsconfig.cjs.json && node ../../scripts/create-cjs-package.mjs",
+    "build:node": "yarn build:esm && yarn build:cjs",
+    "build:node:watch": "tsc --watch",
+    "build:web": "node ../../scripts/esbuild.mjs",
+    "prepublish": "tsc && yarn analyze --exclude dist",
+    "test": "yarn playwright install chromium && vitest run --config=./vitest.browser.config.mjs",
+    "test:watch": "vitest  --config=./vitest.browser.config.mjs"
+  },
+  "dependencies": {
+    "@triptease/icons": "1.6.0",
+    "lit": "^3.3.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "@vitest/browser-playwright": "4.1.2",
+    "concurrently": "^8.2.2",
+    "playwright": "^1.57.0",
+    "tslib": "^2.6.3",
+    "typescript": "^5.7.2",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "customElements": "custom-elements.json",
+  "publishConfig": {
+    "access": "public"
+  }
+}