@pushengineering/umg-web-components 2.0.6 → 3.0.1

package/README.md

@@ -0,0 +1,115 @@
+
+# UMG Web Components Library README
+Welcome to the UMG Web Components library! This library provides a collection of UX frontend components designed to be fast, reusable, and highly customisable for any project, without relying on proprietary technologies or frameworks. These components leverage standard Web APIs and are compatible with all modern browsers.
+
+## Learn More about Web Components
+To deepen your understanding of web components, their key concepts, and the specific web APIs we employ, we recommend reading the [MDN guide on Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).
+
+# Local Development Environment
+
+## Installation
+1. Install Node.js globally using one of the following methods:
+- Mac: [NVM](https://github.com/nvm-sh/nvm)
+- Windows: [NVM for Windows](https://github.com/coreybutler/nvm-windows)
+- Direct download: [Node.js](https://nodejs.org/en/download)
+
+2. Install PNPM globally using one of the following methods:
+- Mac: ``brew install pnpm``
+- Windows PowerShell: Run the command ``iwr https://get.pnpm.io/install.ps1 -useb | iex``  
+
+For more details, check the: [PNPM documentation](https://pnpm.io/)
+
+1. Clone the project repository using this command:  
+   ```
+   git clone git@github.com:Push-Entertainment/umg-web-components.git
+   ```
+
+2. Initialise the project by running the following command in your terminal within the project's root directory:  
+   ```
+   pnpm install
+   ```
+
+## Build scripts
+
+We've provided the following build scripts to streamline the development process:
+
+Core UMG components library:
+- Develop main library: `pnpm core:serve`
+- Build main library: `pnpm core:build`
+- Build main library docs: `pnpm core:build:docs`
+
+Shopify application:
+- Develop main library: `pnpm shopify:serve`
+- Build main library: `pnpm shopify:build`
+- Build main library docs: `pnpm shopify:build:docs`
+
+# Lit - Lightning-Fast Components
+
+Our library is built using Lit, a framework that simplifies component development without sacrificing performance or relying on non-standard frameworks. Lit builds on web component standards, is lightweight, and reduces boilerplate code. You can find Lit 2's documentation [here](https://lit.dev/docs/).
+
+To save time, minimise errors, and future-proof your code, we've written this library in TypeScript and utilise Lit's decorator methods, which TypeScript transpiles into browser-compatible JavaScript.
+
+# IDE
+
+This project has been optimised for development in VSCode with the following extensions:
+
+1. Install the following mandatory VSCode extensions:
+   1. [eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+   2. [lit-plugin](https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin)
+   3. [lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html)
+   4. [MDX](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx)
+
+# Storybook Integration for Component Previews and Documentation
+
+We've seamlessly integrated Storybook into our component library to provide you with a powerful playground tool with component previews and comprehensive documentation. Storybook serves as a valuable resource for both developers and designers, offering a visual representation of each component's behavior and appearance in different scenarios.
+
+- Exploring Components in Storybook
+With Storybook, you can easily navigate and explore our components:
+
+- Preview Components: View live, interactive previews of each component to understand how they look and behave in various situations.
+
+- Component Variations: Explore different variations and configurations of each component, helping you tailor them to your specific project requirements.
+
+- Interactive Documentation: Access detailed documentation and usage examples for each component, making it easier to implement them effectively in your project.
+
+The Storybook application can be loaded into a browser by running `pnpm dev-storybook` in `node_modules/@pushengineering/umg-web-components`.
+
+## Importing components
+Our components are written as ES6 modules for seamless integration into your project without the need for transpilation through tools like Webpack or Babel. You can still use pre-processors like Vite, Webpack, or Roll-up for tree shaking and minification while preserving ES modules.
+
+To initialise a web component and render it in your HTML and the DOM, simply import the component script within your page's entry scripts or as a script tag directly inside your page.
+
+For example, to import the slider web component and its internal component dependencies, add the following to your application script or as a script tag in your page:
+
+```
+import '@pushengineering/umg-web-components/slider'
+```
+Or as a raw module script tag:  
+
+```
+<script async type="module" src="path-to-component-modules/slider.js">
+```
+
+## Theme Styling
+
+### Design Tokens
+Our web components are designed on top of a design system that uses custom CSS variables also known as design tokens. These design tokens are mapped with default values within the components and can be changed from within the application to provide the theme for your project in a cascading, controlled manner, ensuring consistent design and behavior throughout the application.  
+
+#### Leveraging Design Tokens
+To make use of these design tokens, simply customise their values to align with your design system's specifications. You can override the default values assigned to the tokens, tailoring them to your project's exact requirements.
+
+By integrating our components with your design tokens, you'll be able to achieve a harmonious blend of visual consistency and user experience excellence in your application, while also benefiting from the flexibility to adapt our components to your unique brand identity.  
+
+For a complete list of available tokens please see the Design Tokens Storybook documentation page and the documentation pages supplied for each component.
+
+### External Styles
+
+There may be cases where design tokens are unable to achieve all aspects of a theme design. In this case it is possible to apply styles to shadowroot elements directly using shadowroot pseudo selectors and by understanding the following: 
+
+- Elements rendered to the Light DOM are targetable as noraml using standard CSS selectors.
+
+- Elements within shadowroots can be targeted using the `::part()` pseudo selector referencing the element's part name if provided e.g., `::part(button)`.
+
+- To select specific instances of a common shadowroot element, scope the part selector to a unique parent ID or class e.g., `#section-id .featured-gallery::part(button)`.
+  
+- Shadowroot elements without a part name are not accessible to external styles. If you see a case for adding a part name where currently one does not exist, please post a GitHub issue referencing the specific component and element(s) with a brief description and example of the design that could not be achieved using the current toolset.

package/dist/classes/event-manager/event-manager.d.ts

@@ -1,52 +1,9 @@
-/**
- * EventManager is a utility class for managing event listeners and dispatching custom events on an HTMLElement.
- *
- * @class
- */
 export declare class EventManager {
-    /**
-     * The HTMLElement or object to which the event management is associated.
-     * @private
-     * @type {HTMLElement}
-     */
     private target;
-    /**
-     * Allows one or more event listeners to be assigned by the event manager on a HTMLElement or object.
-     * @private
-     * @type {Map}
-     */
     private listeners;
-    /**
-     * Creates an instance of EventManager.
-     *
-     * @constructor
-     * @param {EventTarget} target - The element or object to manage events for.
-     */
     constructor(target: EventTarget);
-    /**
-     * Adds an event listener to the associated HTMLElement or target object.
-     *
-     * @param {string} eventType - The type of the event to listen for.
-     * @param {EventListenerOrEventListenerObject} handler - The callback function to execute when the event is triggered.
-     * @param {AddEventListenerOptions} [options] - An options object that specifies characteristics about the event listener.
-     * @returns {() => void} - A function to remove the added event listener.
-     */
     addEventListener(eventType: string, handler: EventListenerOrEventListenerObject, options?: AddEventListenerOptions): () => void;
-    /**
-     * Removes an event listener from the associated HTMLElement or target object.
-     *
-     * @param {string} eventType - The type of the event for which to remove the listener.
-     * @param {EventListenerOrEventListenerObject} handler - The event listener function to remove.
-     * @param {EventListenerOptions} [options] - An options object that specifies characteristics about the event listener.
-     */
     removeEventListener(eventType: string, handler: EventListenerOrEventListenerObject, options?: EventListenerOptions): void;
-    /**
-     * Dispatches a custom event on the associated HTMLElement.
-     *
-     * @template T - The type of the event detail.
-     * @param {string} eventType - The type of the custom event.
-     * @param {T} detail - The data associated with the custom event.
-     * @param {CustomEventInit} [options] - An options object that specifies characteristics about the custom event.
-     */
     dispatchCustomEvent<T>(eventType: string, detail: T, options?: CustomEventInit): void;
 }
+//# sourceMappingURL=event-manager.d.ts.map

package/dist/classes/event-manager/event-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-manager.d.ts","sourceRoot":"","sources":["../../../src/classes/event-manager/event-manager.ts"],"names":[],"mappings":"AAKA,qBAAa,YAAY;IAOrB,OAAO,CAAC,MAAM,CAAa;IAQ3B,OAAO,CAAC,SAAS,CAAkE;gBASvE,MAAM,EAAE,WAAW;IAY/B,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,EAAE,OAAO,CAAC,EAAE,uBAAuB,GAAG,MAAM,IAAI;IAoB/H,mBAAmB,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,EAAE,OAAO,CAAC,EAAE,oBAAoB,GAAG,IAAI;IAsBzH,mBAAmB,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,eAAe;CAGjF"}

package/dist/classes/event-manager/event-manager.js

@@ -1,50 +1,31 @@
-class n {
-  /**
-   * Creates an instance of EventManager.
-   *
-   * @constructor
-   * @param {EventTarget} target - The element or object to manage events for.
-   */
-  constructor(t) {
-    this.listeners = /* @__PURE__ */ new Map(), this.target = t;
-  }
-  /**
-   * Adds an event listener to the associated HTMLElement or target object.
-   *
-   * @param {string} eventType - The type of the event to listen for.
-   * @param {EventListenerOrEventListenerObject} handler - The callback function to execute when the event is triggered.
-   * @param {AddEventListenerOptions} [options] - An options object that specifies characteristics about the event listener.
-   * @returns {() => void} - A function to remove the added event listener.
-   */
-  addEventListener(t, e, s) {
-    const i = this.listeners.get(t) || /* @__PURE__ */ new Set();
-    return this.listeners.set(t, i), i.add(e), this.target.addEventListener(t, e, s), () => {
-      this.removeEventListener(t, e, s);
-    };
-  }
-  /**
-   * Removes an event listener from the associated HTMLElement or target object.
-   *
-   * @param {string} eventType - The type of the event for which to remove the listener.
-   * @param {EventListenerOrEventListenerObject} handler - The event listener function to remove.
-   * @param {EventListenerOptions} [options] - An options object that specifies characteristics about the event listener.
-   */
-  removeEventListener(t, e, s) {
-    const i = this.listeners.get(t);
-    i && (i.delete(e), i.size === 0 && this.listeners.delete(t)), this.target.removeEventListener(t, e, s);
-  }
-  /**
-   * Dispatches a custom event on the associated HTMLElement.
-   *
-   * @template T - The type of the event detail.
-   * @param {string} eventType - The type of the custom event.
-   * @param {T} detail - The data associated with the custom event.
-   * @param {CustomEventInit} [options] - An options object that specifies characteristics about the custom event.
-   */
-  dispatchCustomEvent(t, e, s) {
-    this.target.dispatchEvent(new CustomEvent(t, { detail: e, ...s }));
-  }
+class EventManager {
+    constructor(target) {
+        this.listeners = new Map();
+        this.target = target;
+    }
+    addEventListener(eventType, handler, options) {
+        const listenerSet = this.listeners.get(eventType) || new Set();
+        this.listeners.set(eventType, listenerSet);
+        listenerSet.add(handler);
+        this.target.addEventListener(eventType, handler, options);
+        return () => {
+            this.removeEventListener(eventType, handler, options);
+        };
+    }
+    removeEventListener(eventType, handler, options) {
+        const listenerSet = this.listeners.get(eventType);
+        if (listenerSet) {
+            listenerSet.delete(handler);
+            if (listenerSet.size === 0) {
+                this.listeners.delete(eventType);
+            }
+        }
+        this.target.removeEventListener(eventType, handler, options);
+    }
+    dispatchCustomEvent(eventType, detail, options) {
+        this.target.dispatchEvent(new CustomEvent(eventType, { detail, ...options }));
+    }
 }
-export {
-  n as EventManager
-};
+
+export { EventManager };
+//# sourceMappingURL=event-manager.js.map

package/dist/classes/event-manager/event-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-manager.js","sources":["../../../src/classes/event-manager/event-manager.ts"],"sourcesContent":[null],"names":[],"mappings":"MAKa,YAAY,CAAA;AAwBrB,IAAA,WAAA,CAAY,MAAmB,EAAA;AATvB,QAAA,IAAA,CAAA,SAAS,GAAyD,IAAI,GAAG,EAAE,CAAA;AAU/E,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;KACvB;AAUD,IAAA,gBAAgB,CAAC,SAAiB,EAAE,OAA2C,EAAE,OAAiC,EAAA;AAC9G,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,GAAG,EAAE,CAAA;QAC9D,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,WAAW,CAAC,CAAA;AAE1C,QAAA,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;QAExB,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;AAEzD,QAAA,OAAO,MAAK;YACR,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;AACzD,SAAC,CAAA;KACJ;AASD,IAAA,mBAAmB,CAAC,SAAiB,EAAE,OAA2C,EAAE,OAA8B,EAAA;QAC9G,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;QAEjD,IAAI,WAAW,EAAE;AACb,YAAA,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;AAE3B,YAAA,IAAI,WAAW,CAAC,IAAI,KAAK,CAAC,EAAE;AACxB,gBAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;aACnC;SACJ;QAED,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;KAC/D;AAUD,IAAA,mBAAmB,CAAI,SAAiB,EAAE,MAAS,EAAE,OAAyB,EAAA;AAC1E,QAAA,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAI,SAAS,EAAE,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC,CAAA;KACnF;AACJ;;;;"}

package/dist/classes/event-manager/types.d.ts

@@ -4,3 +4,4 @@ export interface SlideEvent extends CustomEvent {
         mediaId: string;
     };
 }
+//# sourceMappingURL=types.d.ts.map

package/dist/classes/event-manager/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/classes/event-manager/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC3C,MAAM,EAAE;QACJ,WAAW,EAAE,MAAM,CAAC;QACpB,OAAO,EAAE,MAAM,CAAA;KAClB,CAAA;CACJ"}

package/dist/classes/index.d.ts

@@ -1 +1,2 @@
 export { EventManager } from './event-manager/event-manager';
+//# sourceMappingURL=index.d.ts.map

package/dist/classes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/classes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA"}

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+import '../icon/icon';
+export declare class Accordion extends LitElement {
+    icon: string;
+    iconAnimation: string;
+    iconPosition: string;
+    open: boolean;
+    _open: boolean;
+    justify: string;
+    _summary: HTMLDetailsElement;
+    _accordion: HTMLDetailsElement;
+    _accordionDetails: HTMLDetailsElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, any>): void;
+    closeAccordion: () => void;
+    openAccordion: () => void;
+    private _handleAccordionBlock;
+    private _handleSummaryClick;
+    summaryClasses(): any;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}
+//# sourceMappingURL=accordion.d.ts.map

package/dist/components/accordion/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAA;AAU3C,OAAO,cAAc,CAAA;AAIrB,qBAEa,SAAU,SAAQ,UAAU;IAErC,IAAI,SAAiB;IAGrB,aAAa,SAAS;IAGtB,YAAY,SAAU;IAGtB,IAAI,UAAQ;IAGZ,KAAK,UAAQ;IAGb,OAAO,SAAkB;IAGzB,QAAQ,EAAG,kBAAkB,CAAA;IAG7B,UAAU,EAAG,kBAAkB,CAAA;IAG/B,iBAAiB,EAAG,kBAAkB,CAAA;IAEtC,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAYpC,cAAc,aAMpB;IAEM,aAAa,aAMnB;IAED,OAAO,CAAC,qBAAqB,CAK5B;IAED,OAAO,CAAC,mBAAmB;IA0B3B,cAAc;IASd,MAAM;IAgCN,MAAM,CAAC,MAAM,+BA0IX;CACL"}

package/dist/components/accordion/accordion.js

@@ -0,0 +1,296 @@
+import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.16.1_tslib@2.6.2_typescript@5.4.5/node_modules/tslib/tslib.es6.js';
+import { css, LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { global } from '../../styles/global.js';
+import { settings } from '../../scripts/settings.js';
+import { mergeStyles } from '../../scripts/mergeStyles.js';
+import { property, state, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import '../icon/icon.js';
+
+const { prefix } = settings;
+let Accordion = class Accordion extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.icon = 'chevron-down';
+        this.iconAnimation = 'flip';
+        this.iconPosition = 'right';
+        this.open = false;
+        this._open = false;
+        this.justify = 'space-between';
+        this.closeAccordion = () => {
+            this._open = false;
+            this._accordion.removeAttribute('open');
+            setTimeout(() => {
+                this._accordionDetails.classList.remove('opening');
+            });
+        };
+        this.openAccordion = () => {
+            this._open = true;
+            this._accordion.setAttribute('open', '');
+            setTimeout(() => {
+                this._accordionDetails.classList.add('opening');
+            });
+        };
+        this._handleAccordionBlock = (e) => {
+            if (e.type === 'accordion') {
+                e.detail.eventName === 'close' ? this.closeAccordion() : null;
+                e.detail.eventName === 'open' ? this.openAccordion() : null;
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('accordion', this._handleAccordionBlock);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('accordion', this._handleAccordionBlock);
+        super.disconnectedCallback();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('open')) {
+            if (this.open) {
+                this._open = true;
+                this.openAccordion();
+            }
+            else if (!this.open) {
+                this._open = false;
+                this.closeAccordion();
+            }
+        }
+    }
+    _handleSummaryClick() {
+        const eventName = this._open ? 'close' : 'open';
+        if (this._open) {
+            setTimeout(() => {
+                this._accordionDetails.classList.remove('opening');
+            });
+            window.removeEventListener('accordion', this._handleAccordionBlock);
+        }
+        else {
+            setTimeout(() => {
+                this._accordionDetails.classList.add('opening');
+            });
+            window.addEventListener('accordion', this._handleAccordionBlock);
+        }
+        this._open = !this._open;
+        this.dispatchEvent(new CustomEvent('summary-click', {
+            detail: {
+                eventName: eventName,
+                target: this,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    summaryClasses() {
+        const classes = {};
+        classes['accordion__summary--icon-' + this.iconAnimation] = true;
+        classes['accordion__summary--icon-position-' + this.iconPosition] = true;
+        classes['accordion__summary--justify-' + this.justify] = true;
+        return classes;
+    }
+    render() {
+        return html `
+            <details
+                part="accordion"
+                class="accordion"
+                >
+                <summary
+                    part="accordion-summary"
+                    class="accordion__summary${classMap(this.summaryClasses())}"
+                    aria-label="Accordion block summary"
+                    role="button"
+                    aria-expanded=${this._open}
+                    @click=${this._handleSummaryClick}
+                    >
+                    <slot name="header"></slot>
+                    <umg-icon
+                        icon="${this.icon}"
+                        size="small"
+                    >
+                    </umg-icon>
+                </summary>
+                <div
+                    part="accordion-details"
+                    class="accordion__details"
+                    aria-hidden=${!this._open}
+                    >
+                    <slot name="content"></slot>
+                </div>
+            </details>
+        `;
+    }
+};
+Accordion.styles = mergeStyles([
+    global,
+    css `
+            :host{
+                display: block;
+            }
+            ::slotted(*[slot=summary]) {
+                flex: 0 1 auto;
+            }        
+            ::slotted(*[slot=icon]) {
+                transition: transform 0.2s ease;
+                --umg-color-icon-text: var(--umg-color-header-text, var(--umg-color-base-text, rgb(0,0,0)));
+            }
+
+            .accordion {
+                font-family: var(--umg-font-body-family);
+                overflow: hidden;
+                border-radius: var(--umg-border-header-corner-radius, var(--umg-border-base-corner-radius, 0)) var(--umg-border-header-corner-radius, var(--umg-border-base-corner-radius, 0)) 0 0;
+            }
+
+            .accordion[open] .accordion__summary--icon-flip ::slotted(*[slot=icon]) {
+                transform: rotate(180deg);
+            }
+
+            /** Summary */
+            details summary::-webkit-details-marker {
+                display:none;
+            }
+
+            .accordion__summary {
+                cursor: pointer;
+                list-style: none;
+                
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                gap: var(--umg-space-8, 0.5rem);
+                
+                position: relative;
+                z-index: 2;
+                
+                height: 2.5rem;
+                width: 100%;
+                padding: var(--umg-space-header-padding, 2rem 0rem);
+
+                color: var(--umg-color-header-text, var(--umg-color-base-text, rgb(0,0,0)));
+                background-color: var(--umg-color-header-background, var(--umg-color-base-background, rgb(255, 255, 255)));
+
+                border-bottom: 0.0625rem solid var(--umg-color-header-border, var(--umg-color-base-border, rgb(180,180,180,1)));
+                border-radius: var(--umg-border-header-corner-radius, var(--umg-border-base-corner-radius, 0)) var(--umg-border-header-corner-radius, var(--umg-border-base-corner-radius, 0)) 0 0;
+            }
+
+            @supports (color: rgb(from white r g b)) {
+                .accordion__summary {
+                    border-color: rgb(from var(--umg-color-header-border, var(--umg-color-base-border, rgb(180,180,180))) r g b / alpha);
+                    color: var(--umg-color-header-text, var(--umg-color-base-text, rgb(0,0,0)));
+                    background-color: var(--umg-color-header-background, var(--umg-color-base-background, rgb(255, 255, 255)));
+                }
+            }
+
+            /** Summary justify content */
+            .accordion__summary--justify-center {
+                justify-content: center;
+            }
+            .accordion__summary--justify-end {
+                justify-content: end;
+            }
+            .accordion__summary--justify-start {
+                justify-content: start;
+            }
+            
+            /** Summary icon position  */
+            .accordion__summary--icon-position-left {
+                flex-direction: row-reverse;
+            }
+
+            /** Details */
+            .accordion__details {
+                visibility: hidden;
+                opacity: 0;
+                overflow: hidden;
+                overflow-y: auto;
+                width: 100%;
+                
+                transform: translateY(-100%);                
+                position: relative;
+                z-index: 1;
+
+                border-radius: 0 0 var(--umg-border-drawer-corner-radius, var(--umg-border-base-corner-radius, 0)) var(--umg-border-drawer-corner-radius, var(--umg-border-base-corner-radius, 0));
+                border-bottom: 0.0625rem solid var(--umg-color-drawer-border, var(--umg-color-base-border, rgb(180,180,180,1)));
+              
+                padding: var(--umg-space-drawer-padding, 2rem 0rem);
+                
+                color: var(--umg-color-drawer-text, var(--umg-color-base-text, rgb(0,0,0)));
+                background-color: var(--umg-color-drawer-background, var(--umg-color-base-background, rgb(255, 255, 255)));
+             
+
+                --umg-color-base-text: var(--umg-color-drawer-text);
+                --umg-color-base-background: var(--umg-color-drawer-background);
+            }
+
+            @supports (color: rgb(from white r g b)) {
+                .accordion__details {
+                    color: rgb(from var(--umg-color-drawer-text, var(--umg-color-base-text, rgb(0,0,0))) r g b);
+                    background-color: rgb(from var(--umg-color-drawer-background, var(--umg-color-base-background, rgb(255, 255, 255))) r g b);
+                    border-color: rgb(from var(--umg-color-drawer-border, var(--umg-color-base-border, rgb(0,0,0,0))) r g b / alpha);
+                }
+            }
+
+            /* Open state */
+            .accordion[open] .accordion__details.opening {
+                visibility: visible;
+                transform: translateY(0);
+                opacity: 1;
+                transition: transform 0.2s ease, opacity 0.2s ease;
+            }    
+            
+            /* Scroll */
+            .accordion__details::-webkit-scrollbar {
+                width: 0.125rem;
+            }
+            .accordion__details::-webkit-scrollbar-track {
+                background: var(--umg-color-base-text, rgb(0,0,0,0.05));
+                border-radius: var(--umg-border-radius-30);
+            }
+            .accordion__details::-webkit-scrollbar-thumb {
+                background: var(--umg-color-base-text, rgb(0,0,0,0.1));
+                border-radius: var(--umg-border-radius-30);
+            }
+            @supports (color: rgb(from white r g b)) {
+                .accordion__details::-webkit-scrollbar-track {
+                    background: rgb(from var(--umg-color-base-text, rgb(0,0,0,0.05)) r g b / 0.05);
+                }
+                .accordion__details::-webkit-scrollbar-thumb {
+                    background: rgb(from var(--umg-color-base-text, rgb(0,0,0,0.1)) r g b / 0.1);
+                }
+            }
+        `,
+]);
+__decorate([
+    property()
+], Accordion.prototype, "icon", void 0);
+__decorate([
+    property()
+], Accordion.prototype, "iconAnimation", void 0);
+__decorate([
+    property()
+], Accordion.prototype, "iconPosition", void 0);
+__decorate([
+    property({ type: Boolean })
+], Accordion.prototype, "open", void 0);
+__decorate([
+    state()
+], Accordion.prototype, "_open", void 0);
+__decorate([
+    property()
+], Accordion.prototype, "justify", void 0);
+__decorate([
+    query('summary')
+], Accordion.prototype, "_summary", void 0);
+__decorate([
+    query('details')
+], Accordion.prototype, "_accordion", void 0);
+__decorate([
+    query('.accordion__details')
+], Accordion.prototype, "_accordionDetails", void 0);
+Accordion = __decorate([
+    customElement(`${prefix}-accordion`)
+], Accordion);
+
+export { Accordion };
+//# sourceMappingURL=accordion.js.map

package/dist/components/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sources":["../../../src/components/accordion/accordion.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/components/accordion/index.d.ts

@@ -0,0 +1,3 @@
+import { Accordion } from './accordion';
+export { Accordion };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/accordion-group/accordion-group.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+export declare class AccordionGroup extends LitElement {
+    _accordions: NodeList;
+    constructor();
+    private _clickHandler;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=accordion-group.d.ts.map

package/dist/components/accordion-group/accordion-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-group.d.ts","sourceRoot":"","sources":["../../../src/components/accordion-group/accordion-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAQtC,qBAEa,cAAe,SAAQ,UAAU;IAG1C,WAAW,EAAG,QAAQ,CAAA;;IAOtB,OAAO,CAAC,aAAa,CAcpB;IAED,MAAM;CAOT"}