@kth/style 0.5.0 → 0.6.0

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

@@ -9,5 +9,5 @@ export declare function closeAllDialogs(): void;
 export declare function addEventListeners(dialog: HTMLDialogElement): void;
 export declare class MenuPanel {
     static init(container: HTMLElement | null, items: NodeListOf<Element>): void;
-    static initModal(items: NodeListOf<Element>): void;
+    static initModal(button: Element | null, modal: Element | null): void;
 }

package/dist/cjs/index.js

@@ -58,19 +58,16 @@ class MenuPanel {
             }
         });
     }
-    static initModal(items) {
-        for (const item of items) {
-            if (!(item instanceof HTMLElement))
-                continue;
-            const dialog = item.nextElementSibling;
-            if (!(dialog instanceof HTMLDialogElement))
-                continue;
-            addEventListeners(dialog);
-            item.addEventListener("click", (e) => {
-                e.preventDefault();
-                dialog.showModal();
-            });
-        }
+    static initModal(button, modal) {
+        if (!(button instanceof HTMLElement))
+            return;
+        if (!(modal instanceof HTMLDialogElement))
+            return;
+        addEventListeners(modal);
+        button.addEventListener("click", (e) => {
+            e.preventDefault();
+            modal.showModal();
+        });
     }
 }
 

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

@@ -9,5 +9,5 @@ export declare function closeAllDialogs(): void;
 export declare function addEventListeners(dialog: HTMLDialogElement): void;
 export declare class MenuPanel {
     static init(container: HTMLElement | null, items: NodeListOf<Element>): void;
-    static initModal(items: NodeListOf<Element>): void;
+    static initModal(button: Element | null, modal: Element | null): void;
 }

package/dist/esm/index.js

@@ -56,19 +56,16 @@ class MenuPanel {
             }
         });
     }
-    static initModal(items) {
-        for (const item of items) {
-            if (!(item instanceof HTMLElement))
-                continue;
-            const dialog = item.nextElementSibling;
-            if (!(dialog instanceof HTMLDialogElement))
-                continue;
-            addEventListeners(dialog);
-            item.addEventListener("click", (e) => {
-                e.preventDefault();
-                dialog.showModal();
-            });
-        }
+    static initModal(button, modal) {
+        if (!(button instanceof HTMLElement))
+            return;
+        if (!(modal instanceof HTMLDialogElement))
+            return;
+        addEventListeners(modal);
+        button.addEventListener("click", (e) => {
+            e.preventDefault();
+            modal.showModal();
+        });
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kth/style",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -49,5 +49,5 @@
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "bd4ad4e23abb131c4583fab73f02e4c22191a849"
+  "gitHead": "c27216c3973842e3b4ec03b215d750b57f6a64c6"
 }

package/scss/components/mega-menu.scss

@@ -1,8 +1,6 @@
 @use "../tokens/spacing.scss";
 @use "../utils/mixins.scss";
-
-// TODO: this should be a token
-$breakpoint-mega-menu: 64rem;
+@use "../tokens/sizing.scss";
 
 @layer kth-style {
   nav.kth-mega-menu {
@@ -21,7 +19,7 @@ $breakpoint-mega-menu: 64rem;
     display: none;
   }
 
-  @media (max-width: $breakpoint-mega-menu) {
+  @media (max-width: sizing.$breakpoint-64) {
     nav.kth-mega-menu {
       display: none;
     }

package/scss/components/menu-item.scss

@@ -1,5 +1,6 @@
 @use "../tokens/spacing";
 @use "../tokens/icons";
+@use "../tokens/sizing";
 
 @layer kth-style {
   .kth-menu-item {
@@ -20,6 +21,16 @@
       border-bottom: transparent spacing.$space-4 solid;
     }
 
+    &.collapsable {
+      margin-inline-start: spacing.$space-16;
+    }
+
+    @media (min-width: sizing.$breakpoint-64) {
+      &.collapsable {
+        display: none;
+      }
+    }
+
     &:hover span {
       border-color: var(--color-primary);
     }

package/scss/tokens/sizing.scss

@@ -0,0 +1,3 @@
+/// DO NOT USE IT OUTSIDE OF KTH STYLE. THOSE NAMES MAY CHANGE
+$breakpoint-48: 48rem;
+$breakpoint-64: 64rem;

package/scss/components/description-list.scss

@@ -1,30 +0,0 @@
-@use "../tokens/spacing.scss" as s;
-
-@layer kth-style {
-  .kth-description-list {
-    display: grid;
-    gap: 0 s.$space-16;
-    grid-template-columns: minmax(15rem, 1fr) 2fr;
-
-    @container (max-width: 30rem) {
-      grid-template-columns: 1fr;
-    }
-
-    > div:nth-child(n + 2) {
-      grid-column: 1 / -1;
-      display: grid;
-      grid-template-columns: subgrid;
-      padding-block: s.$space-8;
-      border-block-start: 1px solid gray;
-    }
-
-    dt {
-      font-weight: 600;
-      grid-column: 1 / 2;
-    }
-
-    dd {
-      grid-column: -2 / -1;
-    }
-  }
-}