@kth/style 1.12.0-alpha.0 → 1.12.1

package/README.md

@@ -10,8 +10,7 @@ Documentation available in the [KTH Style website](https://kthstyledemoprod.z6.w
 @kth/style
 ├── src/
 │   ├── index.ts
-│   ├── components
-│   └── react-components
+│   └── components
 ├── scss/
 │   ├── components
 │   ├── tokens
@@ -25,6 +24,5 @@ Documentation available in the [KTH Style website](https://kthstyledemoprod.z6.w
 - `scss` contains all CSS. Those can be imported as they are
 - `src` contains source for JavaScript components. Written in JavaScript
   - `src/components` are the components that do not use React
-  - `src/react-components` are the React components
   - `index.ts` and `react.ts` re-export the content in the respective `components` directories
 - `assets` are static assets like the fonts and logotype. This is meant to be exposed by apps using KTH Style

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -124,22 +124,4 @@ 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/index.d.ts

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

package/dist/esm/index.js

@@ -122,21 +122,4 @@ 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";
-            });
-        }
-    });
-}
-
-export { MenuPanel, toggleSummaryTitle };
+export { MenuPanel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kth/style",
-  "version": "1.12.0-alpha.0",
+  "version": "1.12.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {

package/scss/components/tabs.scss

@@ -0,0 +1,51 @@
+@use "../tokens/spacing";
+@use "../tokens/icons";
+@use "../tokens/colors";
+@use "../utils/mixins";
+
+@layer kth-style {
+  .kth-tabs {
+    margin-block: spacing.$space-2;
+    padding-block: spacing.$space-4;
+    border-bottom: 1px solid var(--color-border);
+    width: 100%;
+
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      gap: spacing.$space-20;
+
+      @include mixins.horizontal-list;
+    }
+
+    &__item {
+      display: flex;
+      align-items: center;
+      color: var(--color-primary);
+      padding: 0;
+      gap: spacing.$space-4;
+
+      // Fixes for buttons:
+      border: none;
+      background: none;
+
+      &:hover,
+      &.active {
+        text-decoration: underline;
+        text-underline-offset: spacing.$space-8;
+        text-decoration-thickness: spacing.$space-4;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .kth-tabs__pane {
+    margin-block: spacing.$space-4;
+    padding: spacing.$space-4;
+  }
+
+  .hidden {
+    display: none;
+  }
+}

package/dist/cjs/accordion.js

@@ -1,2 +0,0 @@
-'use strict';
-

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

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

package/dist/esm/accordion.js

@@ -1 +0,0 @@
-

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

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