@kth/style 1.7.0 → 1.9.0

package/dist/cjs/components/Accordion.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Toggles accordion summary title depending on open or close state.
+ */
+export declare function toggleSummaryTitle(): void;

package/dist/cjs/index.d.ts

@@ -1 +1,2 @@
 export { MenuPanel } from "./components/MenuPanel";
+export { toggleSummaryTitle } from "./components/Accordion";

package/dist/cjs/index.js

@@ -124,4 +124,22 @@ class MenuPanel {
     }
 }
 
+/**
+ * Toggles accordion summary title depending on open or close state.
+ */
+function toggleSummaryTitle() {
+    const detailsElements = document.querySelectorAll("details");
+    detailsElements.forEach((detailsElement) => {
+        const summaryTitle = detailsElement.querySelector("summary");
+        if (summaryTitle) {
+            detailsElement.addEventListener("toggle", () => {
+                summaryTitle.textContent = detailsElement.open
+                    ? "Hide content"
+                    : "Show content";
+            });
+        }
+    });
+}
+
 exports.MenuPanel = MenuPanel;
+exports.toggleSummaryTitle = toggleSummaryTitle;

package/dist/esm/components/Accordion.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Toggles accordion summary title depending on open or close state.
+ */
+export declare function toggleSummaryTitle(): void;

package/dist/esm/index.d.ts

@@ -1 +1,2 @@
 export { MenuPanel } from "./components/MenuPanel";
+export { toggleSummaryTitle } from "./components/Accordion";

package/dist/esm/index.js

@@ -122,4 +122,21 @@ class MenuPanel {
     }
 }
 
-export { MenuPanel };
+/**
+ * Toggles accordion summary title depending on open or close state.
+ */
+function toggleSummaryTitle() {
+    const detailsElements = document.querySelectorAll("details");
+    detailsElements.forEach((detailsElement) => {
+        const summaryTitle = detailsElement.querySelector("summary");
+        if (summaryTitle) {
+            detailsElement.addEventListener("toggle", () => {
+                summaryTitle.textContent = detailsElement.open
+                    ? "Hide content"
+                    : "Show content";
+            });
+        }
+    });
+}
+
+export { MenuPanel, toggleSummaryTitle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kth/style",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -22,7 +22,7 @@
     "dev": "rollup -cw",
     "test": "npm run test:lint",
     "test:lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "version": "lerna version --no-private --ignore-changes '**' --force-publish @kth/style"
+    "lerna:version": "lerna version --no-private --ignore-changes '**' --force-publish @kth/style"
   },
   "files": [
     "scss",

package/scss/components/accordion.scss

@@ -0,0 +1,33 @@
+@use "../tokens/spacing.scss";
+@use "../tokens/icons.scss";
+
+@layer kth-style {
+  .kth-accordion {
+    summary {
+      color: var(--color-tertiary);
+      padding-block: var(--space-inner-block);
+      cursor: pointer;
+      list-style: none;
+      font: inherit;
+      display: grid;
+      grid-template-columns: 1.5rem auto;
+
+      &::before {
+        @include icons.icon-caret-down;
+        background-color: var(--color-tertiary);
+        margin-block: spacing.$space-2;
+      }
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+    // Safari requires extra code to hide the default ">" marker
+    summary::-webkit-details-marker {
+      display: none;
+    }
+
+    &[open] summary::before {
+      rotate: 270deg;
+    }
+  }
+}

package/scss/utils/reset.scss

@@ -15,6 +15,7 @@ $kpm-height: 2.5rem !default;
   *::before,
   *::after {
     box-sizing: border-box;
+    overflow-wrap: anywhere;
   }
 
   h1,