@dso-toolkit/core 55.0.0 → 56.1.0

package/dist/collection/components/accordion/accordion.js

@@ -1,127 +1,30 @@
-import { h, Host, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { createStore } from "@stencil/store";
 export class Accordion {
   updateVariant(variant = "default") {
-    this.accordionState.variant = variant || "default";
+    this.accordionState.variant = variant;
   }
   updateReverseAlign(reverseAlign) {
     this.accordionState.reverseAlign = reverseAlign;
   }
-  updateAllowMultipleOpen(allowMultipleOpen) {
-    this.accordionState.allowMultipleOpen = allowMultipleOpen;
-    if (!allowMultipleOpen) {
-      const openSections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section[open]"));
-      // By removing the first section, it is kept open;
-      openSections.shift();
-      openSections.forEach((section) => this.controlOpenAttribute(section, false));
-    }
-  }
   /**
    * @internal
    */
   async _getState() {
     return this.accordionState;
   }
-  /**
-   * Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.
-   * @param sectionElement The section element that needs to toggle
-   * @param event The event that the user triggered
-   * @returns The state of the section
-   */
-  async toggleSection(sectionElement, event) {
-    const sections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));
-    if (typeof sectionElement === "number") {
-      const section = sections[sectionElement];
-      if (section instanceof HTMLElement) {
-        sectionElement = section;
-      }
-    }
-    if (!(sectionElement instanceof HTMLElement) || !sections.includes(sectionElement)) {
-      return;
-    }
-    const sectionIsOpen = this.isSectionOpen(sectionElement);
-    if (this.allowMultipleOpen) {
-      this.controlOpenAttribute(sectionElement, !sectionIsOpen);
-      this.emitToggleEvent(sectionElement, sections, event);
-      return !sectionIsOpen;
-    }
-    if (sectionIsOpen) {
-      this.controlOpenAttribute(sectionElement, false);
-      this.emitToggleEvent(sectionElement, sections, event);
-      return false;
-    }
-    await this.closeOpenSections();
-    this.controlOpenAttribute(sectionElement, true);
-    this.emitToggleEvent(sectionElement, sections, event);
-    return true;
-  }
-  /**
-   * Emitted when the animation of opening or closing ends.
-   */
-  async animationEnd(sectionElement) {
-    this.dsoToggleSectionAnimationEnd.emit({
-      section: {
-        element: sectionElement,
-        open: this.isSectionOpen(sectionElement),
-      },
-    });
-  }
-  /**
-   * Closes all sections belonging to this accordion.
-   */
-  async closeOpenSections() {
-    const sections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));
-    const openSections = sections.filter((s) => this.isSectionOpen(s));
-    openSections.forEach((section) => this.controlOpenAttribute(section, false));
-  }
-  // These checks are needed for a React timing issue.
   componentWillLoad() {
-    if (this.accordionState.variant !== this.variant) {
-      this.accordionState.variant = this.variant || "default";
-    }
-    if (this.accordionState.reverseAlign !== this.reverseAlign) {
-      this.accordionState.reverseAlign = this.reverseAlign;
-    }
-    if (this.accordionState.allowMultipleOpen !== this.allowMultipleOpen) {
-      this.accordionState.allowMultipleOpen = this.allowMultipleOpen;
-    }
+    this.accordionState.variant = this.variant;
+    this.accordionState.reverseAlign = this.reverseAlign;
   }
   constructor() {
     this.variant = "default";
     this.reverseAlign = false;
-    this.allowMultipleOpen = false;
-    const { state } = createStore({
-      variant: this.variant || "default",
-      reverseAlign: this.reverseAlign,
-      allowMultipleOpen: this.allowMultipleOpen,
-    });
+    const { state } = createStore({});
     this.accordionState = state;
   }
   render() {
-    return (h(Host, { class: {
-        "dso-accordion": true,
-      } }, h("slot", null)));
-  }
-  emitToggleEvent(sectionElement, sections, e) {
-    this.dsoToggleSection.emit({
-      originalEvent: e,
-      section: {
-        element: sectionElement,
-        open: this.isSectionOpen(sectionElement),
-      },
-      sections,
-    });
-  }
-  isSectionOpen(sectionElement) {
-    return typeof sectionElement.getAttribute("open") === "string";
-  }
-  controlOpenAttribute(sectionElement, setAttribute) {
-    if (setAttribute) {
-      sectionElement.setAttribute("open", "");
-    }
-    else {
-      sectionElement.removeAttribute("open");
-    }
+    return (h(Host, { class: "dso-accordion" }, h("slot", null)));
   }
   static get is() { return "dso-accordion"; }
   static get encapsulation() { return "shadow"; }
@@ -142,7 +45,7 @@ export class Accordion {
         "mutable": false,
         "complexType": {
           "original": "AccordionVariant",
-          "resolved": "\"compact\" | \"conclusion\" | \"default\" | \"neutral\" | undefined",
+          "resolved": "\"compact\" | \"conclusion\" | \"default\" | \"neutral\"",
           "references": {
             "AccordionVariant": {
               "location": "import",
@@ -151,7 +54,7 @@ export class Accordion {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "The variant of the Accordion."
@@ -172,75 +75,14 @@ export class Accordion {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements"
+          "text": "Places the chevron at the opposite side.\r\n\r\nNote: this mode does not display `state`, `attachmentCount` or `status` props on Accordion Sections"
         },
         "attribute": "reverse-align",
         "reflect": true,
         "defaultValue": "false"
-      },
-      "allowMultipleOpen": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Allows multiple sections to be open at the same time."
-        },
-        "attribute": "allow-multiple-open",
-        "reflect": true,
-        "defaultValue": "false"
       }
     };
   }
-  static get events() {
-    return [{
-        "method": "dsoToggleSection",
-        "name": "dsoToggleSection",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when a section is toggled.\r\n\r\n`event.detail.originalEvent` contains the original `MouseEvent` when the section is toggled by clicking on the header\r\n`event.detail.section` contains the toggled section and its new opened value.\\\r\n`event.detail.sections` contains all `<dso-accordion-section>` elements belonging to this accordion."
-        },
-        "complexType": {
-          "original": "AccordionSectionToggleEvent",
-          "resolved": "AccordionSectionToggleEvent",
-          "references": {
-            "AccordionSectionToggleEvent": {
-              "location": "import",
-              "path": "./accordion.interfaces"
-            }
-          }
-        }
-      }, {
-        "method": "dsoToggleSectionAnimationEnd",
-        "name": "dsoToggleSectionAnimationEnd",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event emitted when the accordion section completes its toggle animation."
-        },
-        "complexType": {
-          "original": "AccordionSectionToggleAnimationEndEvent",
-          "resolved": "AccordionSectionToggleAnimationEndEvent",
-          "references": {
-            "AccordionSectionToggleAnimationEndEvent": {
-              "location": "import",
-              "path": "./accordion.interfaces"
-            }
-          }
-        }
-      }];
-  }
   static get methods() {
     return {
       "_getState": {
@@ -265,90 +107,6 @@ export class Accordion {
               "text": undefined
             }]
         }
-      },
-      "toggleSection": {
-        "complexType": {
-          "signature": "(sectionElement: HTMLElement | number, event?: MouseEvent) => Promise<undefined | boolean>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "sectionElement The section element that needs to toggle"
-                }],
-              "text": "The section element that needs to toggle"
-            }, {
-              "tags": [{
-                  "name": "param",
-                  "text": "event The event that the user triggered"
-                }],
-              "text": "The event that the user triggered"
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLElement": {
-              "location": "global"
-            },
-            "MouseEvent": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<boolean | undefined>"
-        },
-        "docs": {
-          "text": "Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.",
-          "tags": [{
-              "name": "param",
-              "text": "sectionElement The section element that needs to toggle"
-            }, {
-              "name": "param",
-              "text": "event The event that the user triggered"
-            }, {
-              "name": "returns",
-              "text": "The state of the section"
-            }]
-        }
-      },
-      "animationEnd": {
-        "complexType": {
-          "signature": "(sectionElement: HTMLElement) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLElement": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Emitted when the animation of opening or closing ends.",
-          "tags": []
-        }
-      },
-      "closeOpenSections": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLElement": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Closes all sections belonging to this accordion.",
-          "tags": []
-        }
       }
     };
   }
@@ -360,9 +118,6 @@ export class Accordion {
       }, {
         "propName": "reverseAlign",
         "methodName": "updateReverseAlign"
-      }, {
-        "propName": "allowMultipleOpen",
-        "methodName": "updateAllowMultipleOpen"
       }];
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Prop,\r\n  Host,\r\n  Method,\r\n  Watch,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n} from \"@stencil/core\";\r\n\r\nimport {\r\n  AccordionInternalState,\r\n  AccordionSectionToggleAnimationEndEvent,\r\n  AccordionSectionToggleEvent,\r\n  AccordionVariant,\r\n} from \"./accordion.interfaces\";\r\n\r\nimport { createStore } from \"@stencil/store\";\r\n\r\n@Component({\r\n  tag: \"dso-accordion\",\r\n  styleUrl: \"accordion.scss\",\r\n  shadow: true,\r\n})\r\nexport class Accordion implements ComponentInterface {\r\n  private accordionState: AccordionInternalState;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAccordionElement;\r\n\r\n  /**\r\n   * The variant of the Accordion.\r\n   */\r\n  @Prop({ reflect: true })\r\n  variant?: AccordionVariant = \"default\";\r\n\r\n  /**\r\n   * Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements\r\n   */\r\n  @Prop({ reflect: true })\r\n  reverseAlign = false;\r\n\r\n  /**\r\n   * Allows multiple sections to be open at the same time.\r\n   */\r\n  @Prop({ reflect: true })\r\n  allowMultipleOpen = false;\r\n\r\n  /**\r\n   * Emitted when a section is toggled.\r\n   *\r\n   * `event.detail.originalEvent` contains the original `MouseEvent` when the section is toggled by clicking on the header\r\n   * `event.detail.section` contains the toggled section and its new opened value.\\\r\n   * `event.detail.sections` contains all `<dso-accordion-section>` elements belonging to this accordion.\r\n   */\r\n  @Event()\r\n  dsoToggleSection!: EventEmitter<AccordionSectionToggleEvent>;\r\n\r\n  /**\r\n   * Event emitted when the accordion section completes its toggle animation.\r\n   */\r\n  @Event()\r\n  dsoToggleSectionAnimationEnd!: EventEmitter<AccordionSectionToggleAnimationEndEvent>;\r\n\r\n  @Watch(\"variant\")\r\n  updateVariant(variant: AccordionVariant = \"default\") {\r\n    this.accordionState.variant = variant || \"default\";\r\n  }\r\n\r\n  @Watch(\"reverseAlign\")\r\n  updateReverseAlign(reverseAlign: boolean) {\r\n    this.accordionState.reverseAlign = reverseAlign;\r\n  }\r\n\r\n  @Watch(\"allowMultipleOpen\")\r\n  updateAllowMultipleOpen(allowMultipleOpen: boolean) {\r\n    this.accordionState.allowMultipleOpen = allowMultipleOpen;\r\n\r\n    if (!allowMultipleOpen) {\r\n      const openSections = Array.from(this.host.querySelectorAll<HTMLElement>(\":scope > dso-accordion-section[open]\"));\r\n\r\n      // By removing the first section, it is kept open;\r\n      openSections.shift();\r\n\r\n      openSections.forEach((section) => this.controlOpenAttribute(section, false));\r\n    }\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _getState(): Promise<AccordionInternalState> {\r\n    return this.accordionState;\r\n  }\r\n\r\n  /**\r\n   * Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.\r\n   * @param sectionElement The section element that needs to toggle\r\n   * @param event The event that the user triggered\r\n   * @returns The state of the section\r\n   */\r\n  @Method()\r\n  async toggleSection(sectionElement: HTMLElement | number, event?: MouseEvent): Promise<undefined | boolean> {\r\n    const sections = Array.from(this.host.querySelectorAll<HTMLElement>(\":scope > dso-accordion-section\"));\r\n\r\n    if (typeof sectionElement === \"number\") {\r\n      const section = sections[sectionElement];\r\n      if (section instanceof HTMLElement) {\r\n        sectionElement = section;\r\n      }\r\n    }\r\n\r\n    if (!(sectionElement instanceof HTMLElement) || !sections.includes(sectionElement)) {\r\n      return;\r\n    }\r\n\r\n    const sectionIsOpen = this.isSectionOpen(sectionElement);\r\n\r\n    if (this.allowMultipleOpen) {\r\n      this.controlOpenAttribute(sectionElement, !sectionIsOpen);\r\n      this.emitToggleEvent(sectionElement, sections, event);\r\n      return !sectionIsOpen;\r\n    }\r\n\r\n    if (sectionIsOpen) {\r\n      this.controlOpenAttribute(sectionElement, false);\r\n      this.emitToggleEvent(sectionElement, sections, event);\r\n\r\n      return false;\r\n    }\r\n\r\n    await this.closeOpenSections();\r\n\r\n    this.controlOpenAttribute(sectionElement, true);\r\n    this.emitToggleEvent(sectionElement, sections, event);\r\n\r\n    return true;\r\n  }\r\n\r\n  /**\r\n   * Emitted when the animation of opening or closing ends.\r\n   */\r\n  @Method()\r\n  async animationEnd(sectionElement: HTMLElement): Promise<void> {\r\n    this.dsoToggleSectionAnimationEnd.emit({\r\n      section: {\r\n        element: sectionElement,\r\n        open: this.isSectionOpen(sectionElement),\r\n      },\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Closes all sections belonging to this accordion.\r\n   */\r\n  @Method()\r\n  async closeOpenSections(): Promise<void> {\r\n    const sections = Array.from(this.host.querySelectorAll<HTMLElement>(\":scope > dso-accordion-section\"));\r\n\r\n    const openSections = sections.filter((s) => this.isSectionOpen(s));\r\n    openSections.forEach((section) => this.controlOpenAttribute(section, false));\r\n  }\r\n\r\n  // These checks are needed for a React timing issue.\r\n  componentWillLoad() {\r\n    if (this.accordionState.variant !== this.variant) {\r\n      this.accordionState.variant = this.variant || \"default\";\r\n    }\r\n\r\n    if (this.accordionState.reverseAlign !== this.reverseAlign) {\r\n      this.accordionState.reverseAlign = this.reverseAlign;\r\n    }\r\n\r\n    if (this.accordionState.allowMultipleOpen !== this.allowMultipleOpen) {\r\n      this.accordionState.allowMultipleOpen = this.allowMultipleOpen;\r\n    }\r\n  }\r\n\r\n  constructor() {\r\n    const { state } = createStore<AccordionInternalState>({\r\n      variant: this.variant || \"default\",\r\n      reverseAlign: this.reverseAlign,\r\n      allowMultipleOpen: this.allowMultipleOpen,\r\n    });\r\n\r\n    this.accordionState = state;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={{\r\n          \"dso-accordion\": true,\r\n        }}\r\n      >\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private emitToggleEvent(sectionElement: HTMLElement, sections: HTMLElement[], e?: MouseEvent): void {\r\n    this.dsoToggleSection.emit({\r\n      originalEvent: e,\r\n      section: {\r\n        element: sectionElement,\r\n        open: this.isSectionOpen(sectionElement),\r\n      },\r\n      sections,\r\n    });\r\n  }\r\n\r\n  private isSectionOpen(sectionElement: HTMLElement): boolean {\r\n    return typeof sectionElement.getAttribute(\"open\") === \"string\";\r\n  }\r\n\r\n  private controlOpenAttribute(sectionElement: HTMLElement, setAttribute: boolean): void {\r\n    if (setAttribute) {\r\n      sectionElement.setAttribute(\"open\", \"\");\r\n    } else {\r\n      sectionElement.removeAttribute(\"open\");\r\n    }\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAIrG,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO7C,MAAM,OAAO,SAAS;EAqBpB,aAAa,CAAC,UAA4B,SAAS;IACjD,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,OAAO,CAAC;EACxC,CAAC;EAGD,kBAAkB,CAAC,YAAqB;IACtC,IAAI,CAAC,cAAc,CAAC,YAAY,GAAG,YAAY,CAAC;EAClD,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,SAAS;IACb,OAAO,IAAI,CAAC,cAAc,CAAC;EAC7B,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAC3C,IAAI,CAAC,cAAc,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;EACvD,CAAC;EAED;mBAjC4B,SAAS;wBAQtB,KAAK;IA0BlB,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,CAAyB,EAAE,CAAC,CAAC;IAE1D,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;GAC7B;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,eAAe;MACzB,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Prop, Host, Method, Watch, Element } from \"@stencil/core\";\r\n\r\nimport { AccordionInternalState, AccordionVariant } from \"./accordion.interfaces\";\r\n\r\nimport { createStore } from \"@stencil/store\";\r\n\r\n@Component({\r\n  tag: \"dso-accordion\",\r\n  styleUrl: \"accordion.scss\",\r\n  shadow: true,\r\n})\r\nexport class Accordion implements ComponentInterface {\r\n  private accordionState: AccordionInternalState;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAccordionElement;\r\n\r\n  /**\r\n   * The variant of the Accordion.\r\n   */\r\n  @Prop({ reflect: true })\r\n  variant: AccordionVariant = \"default\";\r\n\r\n  /**\r\n   * Places the chevron at the opposite side.\r\n   *\r\n   * Note: this mode does not display `state`, `attachmentCount` or `status` props on Accordion Sections\r\n   */\r\n  @Prop({ reflect: true })\r\n  reverseAlign = false;\r\n\r\n  @Watch(\"variant\")\r\n  updateVariant(variant: AccordionVariant = \"default\") {\r\n    this.accordionState.variant = variant;\r\n  }\r\n\r\n  @Watch(\"reverseAlign\")\r\n  updateReverseAlign(reverseAlign: boolean) {\r\n    this.accordionState.reverseAlign = reverseAlign;\r\n  }\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _getState(): Promise<AccordionInternalState> {\r\n    return this.accordionState;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.accordionState.variant = this.variant;\r\n    this.accordionState.reverseAlign = this.reverseAlign;\r\n  }\r\n\r\n  constructor() {\r\n    const { state } = createStore<AccordionInternalState>({});\r\n\r\n    this.accordionState = state;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class=\"dso-accordion\">\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/accordion/components/accordion-section.css

@@ -88,12 +88,12 @@
   margin-left: 16px;
 }
 
-:host([open]) .dso-section-handle > button .dso-section-handle-chevron:first-child,
-:host([open]) .dso-section-handle > a .dso-section-handle-chevron:first-child {
+:host([open]:not([open=false])) .dso-section-handle > button .dso-section-handle-chevron:first-child,
+:host([open]:not([open=false])) .dso-section-handle > a .dso-section-handle-chevron:first-child {
   transform: rotate(90deg);
 }
-:host([open]) .dso-section-handle > button .dso-section-handle-chevron:last-child,
-:host([open]) .dso-section-handle > a .dso-section-handle-chevron:last-child {
+:host([open]:not([open=false])) .dso-section-handle > button .dso-section-handle-chevron:last-child,
+:host([open]:not([open=false])) .dso-section-handle > a .dso-section-handle-chevron:last-child {
   transform: rotate(-180deg);
 }
 
@@ -126,23 +126,23 @@
   border-radius: 0 0 4px 4px;
 }
 
-:host(.dso-accordion-default[open]) > .dso-section-handle {
+:host(.dso-accordion-default[open]:not([open=false])) > .dso-section-handle {
   background-color: #8b4a6a;
   border-radius: 0;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
-:host(.dso-accordion-default[open]) > .dso-section-handle a,
-:host(.dso-accordion-default[open]) > .dso-section-handle button {
+:host(.dso-accordion-default[open]:not([open=false])) > .dso-section-handle a,
+:host(.dso-accordion-default[open]:not([open=false])) > .dso-section-handle button {
   color: #fff;
 }
-:host(.dso-accordion-default[open]) > .dso-section-handle a dso-attachments-counter,
-:host(.dso-accordion-default[open]) > .dso-section-handle button dso-attachments-counter {
+:host(.dso-accordion-default[open]:not([open=false])) > .dso-section-handle a dso-attachments-counter,
+:host(.dso-accordion-default[open]:not([open=false])) > .dso-section-handle button dso-attachments-counter {
   --dso-attachments-counter-color: #fff;
   --dso-icon: var(--di-paperclip-wit);
 }
 
-:host(.dso-accordion-default.dso-nested-accordion[open]) .dso-section-body {
+:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=false])) .dso-section-body {
   background-color: #e5e5e5;
 }
 
@@ -178,32 +178,32 @@
   padding-right: 0;
 }
 
-:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle {
+:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion)) > .dso-section-handle {
   background-color: transparent;
 }
-:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle a,
-:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle button {
+:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion)) > .dso-section-handle a,
+:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion)) > .dso-section-handle button {
   color: #39870c;
 }
-:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle a:hover, :host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle a:active, :host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle a.active,
-:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle button:hover,
-:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle button:active,
-:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle button.active {
+:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion)) > .dso-section-handle a:hover, :host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion)) > .dso-section-handle a:active, :host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion)) > .dso-section-handle a.active,
+:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion)) > .dso-section-handle button:hover,
+:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion)) > .dso-section-handle button:active,
+:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion)) > .dso-section-handle button.active {
   color: #39870c;
 }
-:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle a dso-attachments-counter,
-:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-handle button dso-attachments-counter {
+:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion)) > .dso-section-handle a dso-attachments-counter,
+:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion)) > .dso-section-handle button dso-attachments-counter {
   --dso-attachments-counter-color: #666;
   --dso-icon: var(--di-paperclip-grijs);
 }
-:host(.dso-accordion-compact[open]:not(.dso-nested-accordion)) > .dso-section-body {
+:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion)) > .dso-section-body {
   border-top: 0;
 }
 
-:host(.dso-accordion-compact.dso-nested-accordion[open]) > .dso-section-body {
+:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false])) > .dso-section-body {
   padding-bottom: 0;
 }
-:host(.dso-accordion-compact.dso-nested-accordion[open]) > .dso-section-body dso-accordion-section:last-child {
+:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false])) > .dso-section-body dso-accordion-section:last-child {
   border-bottom: 0;
 }
 
@@ -230,11 +230,11 @@
   border: 2px solid #f2f2f2;
 }
 
-:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion)) > .dso-section-handle {
+:host(.dso-accordion-conclusion[open]:not([open=false]):not(.dso-nested-accordion)) > .dso-section-handle {
   background-color: #f2f2f2;
 }
 
-:host(.dso-accordion-conclusion.dso-nested-accordion[open]) {
+:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=false])) {
   background-color: #fff;
 }
 
@@ -273,26 +273,26 @@
   padding: 16px 32px 24px 32px;
 }
 
-:host(.dso-accordion-neutral[open]) > .dso-section-handle {
+:host(.dso-accordion-neutral[open]:not([open=false])) > .dso-section-handle {
   background-color: transparant;
   border-radius: 0;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
-:host(.dso-accordion-neutral[open]) > .dso-section-handle a,
-:host(.dso-accordion-neutral[open]) > .dso-section-handle button {
+:host(.dso-accordion-neutral[open]:not([open=false])) > .dso-section-handle a,
+:host(.dso-accordion-neutral[open]:not([open=false])) > .dso-section-handle button {
   color: #000;
 }
-:host(.dso-accordion-neutral[open]) > .dso-section-handle a dso-attachments-counter,
-:host(.dso-accordion-neutral[open]) > .dso-section-handle button dso-attachments-counter {
+:host(.dso-accordion-neutral[open]:not([open=false])) > .dso-section-handle a dso-attachments-counter,
+:host(.dso-accordion-neutral[open]:not([open=false])) > .dso-section-handle button dso-attachments-counter {
   --dso-attachments-counter-color: #fff;
   --dso-icon: var(--di-paperclip-wit);
 }
-:host(.dso-accordion-neutral[open]) .dso-section-body {
+:host(.dso-accordion-neutral[open]:not([open=false])) .dso-section-body {
   margin-block-end: 16px;
   margin-block-start: 2px;
 }
 
-:host(.dso-accordion-neutral.dso-nested-accordion[open]) .dso-section-body {
+:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=false])) .dso-section-body {
   background-color: #e5e5e5;
 }

package/dist/collection/components/accordion/components/accordion-section.interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-section.interfaces.js","sourceRoot":"","sources":["../../../../src/components/accordion/components/accordion-section.interfaces.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,QAAQ,GAA0C;EAC7D,OAAO,EAAE,SAAS;EAClB,IAAI,EAAE,OAAO;EACb,OAAO,EAAE,eAAe;EACxB,MAAM,EAAE,OAAO;EACf,KAAK,EAAE,OAAO;CACf,CAAC","sourcesContent":["export type AccordionSectionState = \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\";\r\n\r\nexport type AccordionHeading = \"h2\" | \"h3\" | \"h4\" | \"h5\";\r\n\r\nexport const stateMap: Record<AccordionSectionState, string> = {\r\n  success: \"succes:\",\r\n  info: \"info:\",\r\n  warning: \"waarschuwing:\",\r\n  danger: \"fout:\",\r\n  error: \"fout:\",\r\n};\r\n"]}
+{"version":3,"file":"accordion-section.interfaces.js","sourceRoot":"","sources":["../../../../src/components/accordion/components/accordion-section.interfaces.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,QAAQ,GAA0C;EAC7D,OAAO,EAAE,SAAS;EAClB,IAAI,EAAE,OAAO;EACb,OAAO,EAAE,eAAe;EACxB,MAAM,EAAE,OAAO;EACf,KAAK,EAAE,OAAO;CACf,CAAC","sourcesContent":["export type AccordionSectionState = \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\";\r\n\r\nexport type AccordionHeading = \"h2\" | \"h3\" | \"h4\" | \"h5\";\r\n\r\nexport const stateMap: Record<AccordionSectionState, string> = {\r\n  success: \"succes:\",\r\n  info: \"info:\",\r\n  warning: \"waarschuwing:\",\r\n  danger: \"fout:\",\r\n  error: \"fout:\",\r\n};\r\n\r\nexport interface AccordionSectionToggleClickEvent {\r\n  /**\r\n   * The original MouseEvent that triggered the click.\r\n   *\r\n   * In case the Section Handle is an <a> this event can be used to preventDefault() so the framework router is reponsible for navigating the user.\r\n   */\r\n  originalEvent?: MouseEvent;\r\n\r\n  /**\r\n   * The requested state. If the Accordion Section is closed, `open = true`.\r\n   */\r\n  open: boolean;\r\n}\r\n\r\nexport interface AccordionSectionAnimationEndEvent {\r\n  /**\r\n   * Helper function to scroll the Accordion Section into view.\r\n   */\r\n  scrollIntoView(): void;\r\n\r\n  /**\r\n   * The state of the Accordion Section after animation.\r\n   */\r\n  open: boolean;\r\n}\r\n"]}