@proximus/lavender-accordion 1.0.0-alpha.16

package/dist/index.js

@@ -0,0 +1,52 @@
+import "@proximus/lavender-layout";
+import { PxElement as l } from "@proximus/lavender-common";
+const n = `details{font-family:var(--px-font-family);display:flex;flex-direction:column;align-items:flex-start}details:not(.single){border-bottom:var(--px-border-m) solid var(--px-color-border-main-default)}details:not(.single) ::slotted([slot="title"]){flex-grow:1}details:not(.single) slot[name=content]{display:block;padding-block:var(--px-spacing-component-default-vertical)}summary{align-items:center;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details:not(.single) summary{display:flex;padding:var(--px-padding-s);gap:var(--px-spacing-text-to-icon-horizontal);align-self:stretch}summary:after{content:"";width:24px;height:24px;flex-shrink:0;background-color:var(--px-color-bg-action-secondary-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;border-radius:var(--px-radius-pill);border:var(--px-border-s) solid transparent;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}summary:hover{cursor:pointer}details:not(.single) summary:hover{background-color:var(--px-color-bg-container-weak-default)}summary:hover:after{background-color:var(--px-color-bg-action-hover-bordered-default);border:var(--px-border-s) solid var(--px-color-border-action-hover-default);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}details.single summary{display:inline-flex;gap:var(--px-spacing-between-icon-horizontal-mobile);justify-content:center;color:var(--px-color-txt-primary-default);font-weight:700;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-pill)}details.single summary:hover{gap:0;padding:0 var(--px-padding-xs);border-color:var(--px-color-border-action-hover-default)}details.single summary:hover:after{border-color:transparent;margin-right:calc(var(--px-padding-xs) * -1)}details.single slot[name=content]{display:block;padding-top:var(--px-spacing-component-default-vertical)}details[open] summary slot[name=title]{color:var(--px-color-txt-primary-default);font-weight:700}details[open] summary:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-color-txt-body-inverted)}:host([inverted]) details:not(.single){border-bottom:var(--px-border-m) solid var(--px-color-border-main-inverted)}:host([inverted]) details[open] summary slot[name=title]{color:var(--px-color-txt-primary-inverted)}:host([inverted]) details.single summary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) details.single summary:hover{border-color:var(--px-color-bg-container-weak-inverted)}:host([inverted]) details.single summary:hover:after{border-color:transparent}:host([inverted]) summary:after{background-color:var(--px-color-bg-action-secondary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.789 5.93489 11.5286 6.19524L8.00002 9.72384L4.47142 6.19524C4.21107 5.93489 3.78897 5.93489 3.52862 6.19524C3.26827 6.45559 3.26827 6.8777 3.52862 7.13805L7.52862 11.1381C7.78897 11.3984 8.21108 11.3984 8.47142 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='white'/%3E%3C/svg%3E")}:host([inverted]) summary:hover{background-color:var(--px-color-bg-container-moderate-inverted)}:host([inverted]) summary:hover:after{background-color:var(--px-color-bg-action-bordered-inverted);border:var(--px-border-s) solid var(--px-color-border-action-hover-inverted)}`, i = new CSSStyleSheet();
+i.replaceSync(n);
+const d = ["", "none", "single"], a = class a extends l {
+  constructor() {
+    super(i), this.template = () => `<details>
+      <summary role="button"><slot name="icon"></slot><slot name="title"></slot><slot name="info"></slot></summary>
+      <slot name="content"></slot>
+    </details>`, this.shadowRoot.innerHTML = this.template();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "variant", "inverted"];
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(e) {
+    this.setAttribute("variant", e);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(e) {
+    this.setAttribute("inverted", e);
+  }
+  attributeChangedCallback(e, r, t) {
+    if (r !== t)
+      switch (e) {
+        case "variant":
+          this.updateAttribute(e, r, t, d);
+          break;
+        default:
+          super.attributeChangedCallback(e, r, t);
+          break;
+      }
+  }
+  updateAttribute(e, r, t, s) {
+    r !== null && r !== "" && this.$el.classList.toggle(`${r}`), t !== null && t !== "" && this.$el.classList.toggle(`${t}`), this.checkName(s, t) || console.error(
+      `${t} is not an allowed ${e} value for ${this.$el}`
+    );
+  }
+  checkName(e, r) {
+    return e.includes(r);
+  }
+};
+a.nativeName = "details";
+let o = a;
+customElements.define("px-accordion", o);
+export {
+  o as Accordion
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@proximus/lavender-accordion",
+  "version": "1.0.0-alpha.16",
+  "description": "",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./src/*.css": {
+      "development": "src/*.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "rm -rf dist;tsc; vite build",
+    "test": "vitest run --coverage"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "15a231df98020f83813279639a9a7712a5a5e759",
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json",
+          "dist/*.js",
+          "dist/css/**/*.css"
+        ]
+      }
+    }
+  }
+}