@sme.up/ketchup 11.0.0-SNAPSHOT-20250410104333 → 11.0.0-SNAPSHOT-20250414143939

package/dist/types/components/kup-accordion/kup-accordion-declarations.d.ts

@@ -1,4 +1,4 @@
-import { KupDataColumn } from '../../managers/kup-data/kup-data-declarations';
+import { KupDataNode } from '../../managers/kup-data/kup-data-declarations';
 import { KupEventPayload } from '../../types/GenericTypes';
 /**
  * Props of the kup-accordion component.
@@ -6,15 +6,22 @@ import { KupEventPayload } from '../../types/GenericTypes';
  */
 export declare enum KupAccordionProps {
     customStyle = "Custom style of the component. For more information: https://smeup.github.io/ketchup/#/customization",
-    data = "Data of the accordion.",
-    ripple = "When enabled displays Material's ripple effect on item headers."
+    data = "List of elements.",
+    infoIcon = "When true, it will show the info activation icon",
+    ripple = "When enabled displays Material's ripple effect on item headers.",
+    toolbar = "When true, it will show the toolbar activation icon",
+    sizing = "Sets the type of the component sizing.",
+    toolbarCallback = "Callback to be called when the toolbar icon is clicked",
+    infoCallback = "Callback to be called when the info icon is clicked"
 }
 /**
  * Data of the accordion.
  */
-export interface KupAccordionData {
-    columns: KupDataColumn[];
+export interface KupAccordionNode extends KupDataNode {
+    active?: boolean;
+    contentVisible?: boolean;
+    danger?: boolean;
 }
-export interface KupAccordionItemSelectedEventPayload extends KupEventPayload {
-    itemName: string;
+export interface KupAccordionEventPayload extends KupEventPayload {
+    node: KupAccordionNode;
 }

package/dist/types/components/kup-accordion/kup-accordion.d.ts

@@ -1,7 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { GenericObject, KupComponentSizing } from '../../types/GenericTypes';
-import { KupAccordionData, KupAccordionItemSelectedEventPayload } from './kup-accordion-declarations';
+import { KupAccordionNode, KupAccordionEventPayload } from './kup-accordion-declarations';
+import { KupDataNode } from '../../managers/kup-data/kup-data-declarations';
 export declare class KupAccordion {
+    #private;
     /**
      * References the root HTML element of the component (<kup-accordion>).
      */
@@ -21,17 +23,31 @@ export declare class KupAccordion {
      * Data of the accordion.
      * @default null
      */
-    data: KupAccordionData;
+    data: KupAccordionNode[];
+    /**
+     * When true, it will show the info activation icon.
+     * @default false
+     */
+    infoIcon: boolean;
     /**
      * When enabled displays Material's ripple effect on item headers.
      * @default true
      */
     ripple: boolean;
     /**
-     * Sets the type of the button
+     * When true, it will show the toolbar activation icon.
+     * @default false
+     */
+    toolbar: boolean;
+    /**
+     * Sets the type of the component sizing
      * @default KupComponentSizing.SMALL
      */
     sizing: KupComponentSizing;
+    toolbarCallback: () => Promise<KupDataNode[]>;
+    infoCallback: () => Promise<KupDataNode[]>;
+    toolbarState: KupDataNode[];
+    infoState: KupDataNode[];
     /**
      * Instance of the KupManager class.
      */
@@ -41,9 +57,40 @@ export declare class KupAccordion {
      */
     private slotsNames;
     /**
-     * Fired when an item is selected.
+     * Toolbar List.
+     */
+    private toolbarList;
+    private infoList;
+    /**
+     * Triggered when the accordion loses focus.
+     */
+    kupBlur: EventEmitter<KupAccordionEventPayload>;
+    /**
+     * Triggered when an item is selected.
+     */
+    kupClick: EventEmitter<KupAccordionEventPayload>;
+    /**
+     * Triggered when the icon inside accordion is clicked.
+     */
+    kupIconClick: EventEmitter<KupAccordionEventPayload>;
+    /**
+     * Triggered when the icon inside accordion is clicked.
+     */
+    kupInfoIconClick: EventEmitter<KupAccordionEventPayload>;
+    /**
+     * Triggered when the accordion is focused.
      */
-    kupAccordionItemSelected: EventEmitter<KupAccordionItemSelectedEventPayload>;
+    kupFocus: EventEmitter<KupAccordionEventPayload>;
+    /**
+     * Triggered when a list item is clicked.
+     */
+    kupToolbarItemClick: EventEmitter<KupAccordionEventPayload>;
+    onKupBlur(node: KupAccordionNode): void;
+    onKupClick(i: number, node: KupAccordionNode): void;
+    onKupIconClick(el: HTMLElement): void;
+    onKupInfoIconClick(el: HTMLElement): void;
+    onKupFocus(node: KupAccordionNode): void;
+    onKupToolbarItemClick(e: CustomEvent): void;
     applyRipple(): void;
     /**
      * This method collapses all expandible items.
@@ -72,10 +119,24 @@ export declare class KupAccordion {
      * This method activates or deactivates an item
      * @param {string} itemName - Name of the item.
      */
-    toggleItem(itemName: string): Promise<void>;
+    toggleItem(node: KupAccordionNode): Promise<void>;
+    private updateSelectedItems;
     private isItemExpandible;
     private isItemSelected;
     private renderItems;
+    closeRowToolbarList(): void;
+    /**
+     * Create dropdown list for toolbar
+     */
+    createDropDownToolbarList(): void;
+    /**
+     * Create dropdown list for tab info icon
+     */
+    createDropDownInfoList(): void;
+    /**
+     * Destroy dropdown list for tab info icon
+     */
+    closeInfoDataList(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentWillRender(): void;

package/dist/types/components/kup-tab-bar/kup-tab-bar-declarations.d.ts

@@ -7,9 +7,13 @@ import { KupEventPayload } from '../../types/GenericTypes';
 export declare enum KupTabBarProps {
     customStyle = "Custom style of the component.",
     data = "List of elements.",
+    dense = "When true, the component will be more compact.",
+    infoIcon = "Icon to be shown in the info button",
     ripple = "When enabled displays Material's ripple effect on item headers.",
     toolbar = "when true, it will show the toolbar activation icon",
-    variant = "Variant of the component. It is either flat or contained"
+    variant = "Variant of the component. It is either flat or contained",
+    toolbarCallback = "Callback to be called when the toolbar icon is clicked",
+    infoCallback = "Callback to be called when the info icon is clicked"
 }
 /**
  * Styling options for the f-button component.
@@ -27,6 +31,7 @@ export declare enum KupTabbarStyling {
  */
 export interface KupTabBarNode extends KupDataNode {
     active?: boolean;
+    contentVisible?: boolean;
     danger?: boolean;
 }
 export interface KupTabBarEventPayload extends KupEventPayload {

package/dist/types/components/kup-tab-bar/kup-tab-bar.d.ts

@@ -86,7 +86,7 @@ export declare class KupTabBar {
     /**
      * Triggered when a list item is clicked.
      */
-    kupItemClick: EventEmitter<KupToolbarItemClickEventPayload>;
+    kupToolbarItemClick: EventEmitter<KupToolbarItemClickEventPayload>;
     onKupBlur(i: number, node: KupTabBarNode): void;
     onKupClick(i: number, node: KupTabBarNode): void;
     onKupIconClick(el: HTMLElement): void;

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { KupAccordionData, KupAccordionItemSelectedEventPayload } from "./components/kup-accordion/kup-accordion-declarations";
+import { KupAccordionEventPayload, KupAccordionNode } from "./components/kup-accordion/kup-accordion-declarations";
 import { GenericObject, KupComponentSizing, KupEventPayload } from "./types/GenericTypes";
 import { KupCommand, KupDataCell, KupDataColumn, KupDataDataset, KupDataNewColumnOptions, KupDataNewColumnTypes, KupDataNode, KupDataRowAction } from "./managers/kup-data/kup-data-declarations";
 import { GroupLabelDisplayMode, GroupObject, KupDataTableCell, KupDatatableCellCheckPayload, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionItemClickEventPayload, KupDatatableRowSelectedEventPayload, KupDatatableUpdatePayload, LoadMoreMode as LoadMoreMode1, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations";
@@ -67,7 +67,7 @@ import { KupTimePickerEventPayload } from "./components/kup-time-picker/kup-time
 import { FTypographyType } from "./f-components/f-typography/f-typography-declarations";
 import { KupTypographyClickEventPayload, KupTypographyIconClickEventPayload } from "./components/kup-typography/kup-typography-declarations";
 import { KupTypographyListClickEventPayload, KupTypographyListIconClickEventPayload } from "./components/kup-typography-list/kup-typography-list-declarations";
-export { KupAccordionData, KupAccordionItemSelectedEventPayload } from "./components/kup-accordion/kup-accordion-declarations";
+export { KupAccordionEventPayload, KupAccordionNode } from "./components/kup-accordion/kup-accordion-declarations";
 export { GenericObject, KupComponentSizing, KupEventPayload } from "./types/GenericTypes";
 export { KupCommand, KupDataCell, KupDataColumn, KupDataDataset, KupDataNewColumnOptions, KupDataNewColumnTypes, KupDataNode, KupDataRowAction } from "./managers/kup-data/kup-data-declarations";
 export { GroupLabelDisplayMode, GroupObject, KupDataTableCell, KupDatatableCellCheckPayload, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionItemClickEventPayload, KupDatatableRowSelectedEventPayload, KupDatatableUpdatePayload, LoadMoreMode as LoadMoreMode1, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations";
@@ -145,7 +145,7 @@ export namespace Components {
           * Data of the accordion.
           * @default null
          */
-        "data": KupAccordionData;
+        "data": KupAccordionNode[];
         /**
           * This method expands all expandible items.
          */
@@ -156,6 +156,12 @@ export namespace Components {
           * @returns List of props as object, each key will be a prop.
          */
         "getProps": (descriptions?: boolean) => Promise<GenericObject>;
+        "infoCallback": () => Promise<KupDataNode[]>;
+        /**
+          * When true, it will show the info activation icon.
+          * @default false
+         */
+        "infoIcon": boolean;
         /**
           * This method is used to trigger a new render of the component.
          */
@@ -171,7 +177,7 @@ export namespace Components {
          */
         "setProps": (props: GenericObject) => Promise<void>;
         /**
-          * Sets the type of the button
+          * Sets the type of the component sizing
           * @default KupComponentSizing.SMALL
          */
         "sizing": KupComponentSizing;
@@ -179,7 +185,13 @@ export namespace Components {
           * This method activates or deactivates an item
           * @param itemName - Name of the item.
          */
-        "toggleItem": (itemName: string) => Promise<void>;
+        "toggleItem": (node: KupAccordionNode) => Promise<void>;
+        /**
+          * When true, it will show the toolbar activation icon.
+          * @default false
+         */
+        "toolbar": boolean;
+        "toolbarCallback": () => Promise<KupDataNode[]>;
     }
     interface KupActivityTimeline {
         /**
@@ -5091,7 +5103,12 @@ export interface KupTypographyListCustomEvent<T> extends CustomEvent<T> {
 }
 declare global {
     interface HTMLKupAccordionElementEventMap {
-        "kup-accordion-itemselected": KupAccordionItemSelectedEventPayload;
+        "kup-accordion-blur": KupAccordionEventPayload;
+        "kup-accordion-click": KupAccordionEventPayload;
+        "kup-accordion-iconclick": KupAccordionEventPayload;
+        "kup-accordion-infoiconclick": KupAccordionEventPayload;
+        "kup-accordion-focus": KupAccordionEventPayload;
+        "kup-accordion-toolbaritemclick": KupAccordionEventPayload;
     }
     interface HTMLKupAccordionElement extends Components.KupAccordion, HTMLStencilElement {
         addEventListener<K extends keyof HTMLKupAccordionElementEventMap>(type: K, listener: (this: HTMLKupAccordionElement, ev: KupAccordionCustomEvent<HTMLKupAccordionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6037,7 +6054,7 @@ declare global {
         "kup-tabbar-iconclick": KupTabBarEventPayload;
         "kup-tabbar-infoiconclick": KupTabBarEventPayload;
         "kup-tabbar-focus": KupTabBarEventPayload;
-        "kup-tabbar-itemclick": KupToolbarItemClickEventPayload;
+        "kup-tabbar-toolbaritemclick": KupToolbarItemClickEventPayload;
     }
     interface HTMLKupTabBarElement extends Components.KupTabBar, HTMLStencilElement {
         addEventListener<K extends keyof HTMLKupTabBarElementEventMap>(type: K, listener: (this: HTMLKupTabBarElement, ev: KupTabBarCustomEvent<HTMLKupTabBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6328,21 +6345,53 @@ declare namespace LocalJSX {
           * Data of the accordion.
           * @default null
          */
-        "data"?: KupAccordionData;
+        "data"?: KupAccordionNode[];
+        "infoCallback"?: () => Promise<KupDataNode[]>;
+        /**
+          * When true, it will show the info activation icon.
+          * @default false
+         */
+        "infoIcon"?: boolean;
         /**
-          * Fired when an item is selected.
+          * Triggered when the accordion loses focus.
          */
-        "onKup-accordion-itemselected"?: (event: KupAccordionCustomEvent<KupAccordionItemSelectedEventPayload>) => void;
+        "onKup-accordion-blur"?: (event: KupAccordionCustomEvent<KupAccordionEventPayload>) => void;
+        /**
+          * Triggered when an item is selected.
+         */
+        "onKup-accordion-click"?: (event: KupAccordionCustomEvent<KupAccordionEventPayload>) => void;
+        /**
+          * Triggered when the accordion is focused.
+         */
+        "onKup-accordion-focus"?: (event: KupAccordionCustomEvent<KupAccordionEventPayload>) => void;
+        /**
+          * Triggered when the icon inside accordion is clicked.
+         */
+        "onKup-accordion-iconclick"?: (event: KupAccordionCustomEvent<KupAccordionEventPayload>) => void;
+        /**
+          * Triggered when the icon inside accordion is clicked.
+         */
+        "onKup-accordion-infoiconclick"?: (event: KupAccordionCustomEvent<KupAccordionEventPayload>) => void;
+        /**
+          * Triggered when a list item is clicked.
+         */
+        "onKup-accordion-toolbaritemclick"?: (event: KupAccordionCustomEvent<KupAccordionEventPayload>) => void;
         /**
           * When enabled displays Material's ripple effect on item headers.
           * @default true
          */
         "ripple"?: boolean;
         /**
-          * Sets the type of the button
+          * Sets the type of the component sizing
           * @default KupComponentSizing.SMALL
          */
         "sizing"?: KupComponentSizing;
+        /**
+          * When true, it will show the toolbar activation icon.
+          * @default false
+         */
+        "toolbar"?: boolean;
+        "toolbarCallback"?: () => Promise<KupDataNode[]>;
     }
     interface KupActivityTimeline {
         /**
@@ -9653,7 +9702,7 @@ declare namespace LocalJSX {
         /**
           * Triggered when a list item is clicked.
          */
-        "onKup-tabbar-itemclick"?: (event: KupTabBarCustomEvent<KupToolbarItemClickEventPayload>) => void;
+        "onKup-tabbar-toolbaritemclick"?: (event: KupTabBarCustomEvent<KupToolbarItemClickEventPayload>) => void;
         /**
           * When enabled displays Material's ripple effect on item headers.
           * @default true

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sme.up/ketchup",
-    "version": "11.0.0-SNAPSHOT-20250410104333",
+    "version": "11.0.0-SNAPSHOT-20250414143939",
     "keywords": [
         "smeup",
         "KetchUP",

package/dist/ketchup/p-c832734a.entry.js

@@ -1 +0,0 @@
-import{r as o,c as i,f as r,h as e,H as t,d as a}from"./p-710d0a7d.js";import{k as n,a as c,g as p,s as d,d as s,b as l}from"./p-fb4f10d5.js";import{F as h}from"./p-3cab6420.js";import{c as u}from"./p-635bb4b3.js";import{M as f}from"./p-c56195a0.js";import"./p-1ee561ba.js";var m;!function(o){o.customStyle="Custom style of the component. For more information: https://smeup.github.io/ketchup/#/customization",o.data="Data of the accordion.",o.ripple="When enabled displays Material's ripple effect on item headers."}(m||(m={}));const _=class{constructor(r){o(this,r),this.kupAccordionItemSelected=i(this,"kup-accordion-itemselected",6),this.kupManager=n(),this.slotsNames=[],this.selectedItems=[],this.customStyle="",this.data=null,this.ripple=!1,this.sizing=c.SMALL}applyRipple(){const o=this.rootElement.shadowRoot;if(o&&this.ripple){const i=o.querySelectorAll(".mdc-ripple-surface:not(.mdc-ripple-upgraded)");if(i)for(let o=0;o<i.length;o++)f.attachTo(i[o])}}async collapseAll(){const o=[];for(let i=0;i<this.data.columns.length;i++){const r=this.data.columns[i].name;!this.isItemExpandible(r)&&this.isItemSelected(r)&&o.push(r)}this.selectedItems=o}async expandAll(){const o=[];for(let i=0;i<this.data.columns.length;i++){const r=this.data.columns[i].name;this.isItemExpandible(r)&&o.push(r)}this.selectedItems=o}async getProps(o){return p(this,m,o)}async refresh(){r(this)}async setProps(o){d(this,m,o)}async toggleItem(o){const i=this.isItemExpandible(o),r=[...this.selectedItems];r.includes(o)?r.splice(r.indexOf(o),1):r.push(o),this.selectedItems=r,i||this.kupAccordionItemSelected.emit({comp:this,id:this.rootElement.id,itemName:o})}isItemExpandible(o){return this.slotsNames.includes(o)}isItemSelected(o){return this.selectedItems.includes(o)}renderItems(){const o=[],i=Array.prototype.slice.call(this.rootElement.children,0);this.slotsNames=[];for(let o=0;o<i.length;o++)this.slotsNames.push(i[o].slot);for(let i=0;i<this.data.columns.length;i++){const r=this.data.columns[i],t=r.name,a=this.isItemSelected(t),n=this.isItemExpandible(t),c={"accordion-item__content":!0,"accordion-item__content--selected":!!a};o.push(e("div",{class:"accordion-item"},e("div",{tabindex:"1",title:r.title,class:{"accordion-item__header":!0,"accordion-item__header--selected":!(n||!a),"accordion-item__header--expanded":!(!n||!a),"mdc-ripple-surface":!!this.ripple,[`accordion-item--${this.sizing}`]:!!this.sizing},onClick:()=>this.toggleItem(t)},r.icon?e(h,{color:`var(${s.ICON})`,resource:r.icon,sizeX:"1.5em",sizeY:"1.5em",wrapperClass:"accordion-item__icon"}):null,e("span",{class:"accordion-item__text"},r.title),n?e("span",{class:`accordion-item__dropdown kup-icon ${l.DROPDOWN.replace("--","")}`}):null),e("div",{class:c},e("slot",{name:r.name}))))}return o}componentWillLoad(){this.kupManager.debug.logLoad(this,!1),this.kupManager.theme.register(this)}componentDidLoad(){this.applyRipple(),this.kupManager.debug.logLoad(this,!0)}componentWillRender(){this.kupManager.debug.logRender(this,!1)}componentDidRender(){const o=this.rootElement.shadowRoot;if(o){const i=o.querySelectorAll(".mdc-ripple-surface");if(i)for(let o=0;o<i.length;o++)f.attachTo(i[o])}this.kupManager.debug.logRender(this,!0)}render(){const o=this.data&&this.data.columns?this.renderItems():null;return e(t,{key:"e833d2f12eaadc0a52bbfa292e29c92e3a7d737c"},e("style",{key:"93b4315cd2a0f9834ec9f4cf70c0c2cf6baf91cb"},this.kupManager.theme.setKupStyle(this.rootElement)),e("div",{key:"a9cbd70c8e08f1b00cdee843c8b34540e49a7541",id:u},e("div",{key:"9ddf2bd8d16f97c3004948e31dcd2bb17ee155b6",class:"accordion"},o)))}disconnectedCallback(){this.kupManager.theme.unregister(this)}get rootElement(){return a(this)}static get watchers(){return{ripple:["applyRipple"]}}};_.style=".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:var(--kup-label-01-font-size, 12px);line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-01-font-size, 14px);line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_accordion_border_top_color:var(\n    --kup-accordion-border-top-color,\n    var(--kup-border-subtle)\n  );--kup_accordion_item_small_height:var(\n    --kup-accordion-item-small-height,\n    32px\n  );--kup_accordion_item_medium_height:var(\n    --kup-accordion-item-medium-height,\n    40px\n  );--kup_accordion_item_outline_color_active:var(\n    --kup-accordion-item-outline-color-focus,\n    var(--kup-border-interactive)\n  );--kup_accordion_item_large_height:var(\n    --kup-accordion-item-medium-height,\n    48px\n  );--kup_accordion_header_background_color:var(\n    --kup-accordion-header-background-color,\n    var(--kup-layer-0)\n  );--kup_accordion_header_background_color_hover:var(\n    --kup-accordion-header-background-color-hover,\n    var(--kup-layer-0-hover)\n  );--kup_accordion_header_padding:var(\n    --kup-accordion-header-padding,\n    var(--kup-space-05)\n  );--kup_accordion_dropdown_icon_color:var(\n    --kup-accordio-dropdown-icon-color,\n    var(--kup-text-primary)\n  );--kup_accordion_transition:var(--kup-accordion-transition, 80ms);display:block;font-family:var(--kup_accordion_font_family);font-size:var(--kup_accordion_font_size)}.accordion{border-radius:var(--kup_accordion_border_radius);display:flex;flex-wrap:wrap;flex-direction:column;width:100%}.accordion-item{border-top:1px solid var(--kup_accordion_border_top_color);box-sizing:border-box;width:100%}.accordion-item--visible{display:block}.accordion-item:is(:last-of-type){border-bottom:1px solid var(--kup_accordion_border_top_color)}.accordion-item__header{height:var(--kup_accordion_item_medium_height);align-items:center;border:none;box-sizing:border-box;color:var(--kup_accordion_text_color);cursor:pointer;display:flex;line-height:1.75em;outline:none;padding:var(--kup_accordion_padding);text-align:left;transition:background-color var(--kup_accordion_transition), color var(--kup_accordion_transition);width:100%;outline:2px solid transparent;outline-offset:-2px;padding-left:16px;padding-right:16px}.accordion-item__header:focus{outline:2px solid var(--kup_accordion_item_outline_color_active)}.accordion-item__header.accordion-item--small{height:var(--kup_accordion_item_small_height)}.accordion-item__header.accordion-item--large{height:var(--kup_accordion_item_large_height)}.accordion-item__header:hover:not(.accordion-item__header--selected){background-color:var(--kup_accordion_header_background_color_hover)}.accordion-item__header:focus(.accordion-item__header--selected){outline:2px solid var(--kup_accordion_item_outline_color_active)}.accordion-item__header--expanded{background-color:var(--kup_accordion_background_color)}.accordion-item__header--expanded .accordion-item__dropdown{transform:rotate(-180deg)}.accordion-item__text{margin-right:0.5em;overflow:hidden;text-overflow:ellipsis;white-space:pre}.accordion-item__text--highlighted{color:var(--kup_accordion_text_on_primary_color);background-color:var(--kup_accordion_primary_color)}.accordion-item__icon{margin-left:0;margin-right:0.5em}.accordion-item__dropdown{background-color:var(--kup_accordion_dropdown_icon_color);height:1.5em;margin-left:auto;margin-right:0;min-width:1.5em;width:1.5em;transition:transform var(--kup_accordion_transition)}.accordion-item__content{padding-left:16px;padding-top:8px;padding-bottom:24px;padding-right:80px;animation:fade-in 0.25s ease-out;display:none;font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.accordion-item__content--selected{display:block}.mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_accordion_primary_color)}.kup-icon.kup-dropdown-icon{-webkit-mask:var(--kup-dropdown-icon);mask:var(--kup-dropdown-icon)}:host(.kup-borderless){--kup-accordion-border:none}:host(.kup-full-height){height:100%}:host(.kup-full-width){width:100%}:host(.kup-danger){--kup-accordion-primary-color:var(--kup-danger-color-60);--kup-accordion-primary-color-rgb:var(--kup-danger-color-60-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-info){--kup-accordion-primary-color:var(--kup-info-50-color);--kup-accordion-primary-color-rgb:var(--kup-info-color-50-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-secondary){--kup-accordion-primary-color:var(--kup-secondary-color);--kup-accordion-primary-color-rgb:var(--kup-secondary-color-rgb);--kup-accordion-text-on-primary-color:var(--kup-text-on-secondary-color)}:host(.kup-success){--kup-accordion-primary-color:var(--kup-success-color-40);--kup-accordion-primary-color-rgb:var(--kup-success-color-40-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-warning){--kup-accordion-primary-color:var(--kup-warning-color-50);--kup-accordion-primary-color-rgb:var(--kup-warning-color-50-rgb);--kup-accordion-text-on-primary-color:white}";export{_ as kup_accordion}