@kth/style 0.4.0 → 0.6.0

package/assets/fonts.css

@@ -1,13 +1,13 @@
 @font-face {
   font-family: Figtree;
-  src: url("figtree[wght].woff2") format("woff2-variations");
+  src: url("figtree.woff2") format("woff2-variations");
   font-weight: 100 900;
   font-style: normal;
 }
 
 @font-face {
   font-family: Figtree;
-  src: url("figtree-italic[wght].woff2") format("woff2-variations");
+  src: url("figtree-italic.woff2") format("woff2-variations");
   font-weight: 100 900;
   font-style: italic;
 }

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.4.0",
+  "version": "0.6.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -49,5 +49,5 @@
   "peerDependencies": {
     "react": "*"
   },
-  "gitHead": "08523cc927791fd112268b1479e138c89da03fee"
+  "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;