@kth/style 1.6.1 → 1.8.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.6.1",
+  "version": "1.8.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/components/input.scss

@@ -54,6 +54,10 @@
       gap: spacing.$space-12;
       margin-top: spacing.$space-16;
 
+      label {
+        @include typography.font-default;
+      }
+
       .kth-checkbox {
         appearance: none;
         margin: 0;
@@ -81,8 +85,23 @@
         }
       }
 
-      label {
-        @include typography.font-default;
+      .kth-radio {
+        appearance: none;
+        margin: 0;
+        height: spacing.$space-24;
+        width: spacing.$space-24;
+        min-width: spacing.$space-24;
+        border: 1px solid var(--color-secondary);
+        border-radius: 50%;
+        background-color: var(--color-on-primary);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:checked {
+          border-color: var(--color-primary);
+          border-width: 0.375rem;
+        }
       }
     }
   }