@dataforsyningen/designsystem - npm Package Compare versions

Comparing version 6.1.0 to 7.0.0

assets/designsystem.js

@@ -21,2 +21,5 @@ // src/js/toast.js
 
+// assets/icons/copy.svg
+var copy_default = '<svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path d="M20.5 6V4.5C20.5 3.39543 19.6046 2.5 18.5 2.5H4.5C3.39543 2.5 2.5 3.39543 2.5 4.5V18.5C2.5 19.6046 3.39543 20.5 4.5 20.5H6M26.5 24.5V10.5C26.5 9.39543 25.6046 8.5 24.5 8.5H10.5C9.39543 8.5 8.5 9.39543 8.5 10.5V24.5C8.5 25.6046 9.39543 26.5 10.5 26.5H24.5C25.6046 26.5 26.5 25.6046 26.5 24.5Z" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>\n</svg>';
+
 // src/js/codeview.js
@@ -59,6 +62,3 @@ var CodeView = class extends HTMLElement {
         <button class="ds-code-view-copy quiet" title="Kopi\xE9r">
-          <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <title>Kopi\xE9r</title>
-            <path d="M7.30769 15H6.53846C6.13044 15 5.73912 14.8379 5.4506 14.5494C5.16209 14.2609 5 13.8696 5 13.4615V6.53846C5 6.13044 5.16209 5.73912 5.4506 5.4506C5.73912 5.16209 6.13044 5 6.53846 5H13.4615C13.8696 5 14.2609 5.16209 14.5494 5.4506C14.8379 5.73912 15 6.13044 15 6.53846V7.30769M10.5385 9.00001H17.4615C18.3112 9.00001 19 9.6888 19 10.5385V17.4615C19 18.3112 18.3112 19 17.4615 19H10.5385C9.68879 19 9 18.3112 9 17.4615V10.5385C9 9.6888 9.68879 9.00001 10.5385 9.00001Z" stroke="var(--ds-icon-color, black)" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
-          </svg>
+          ${copy_default}
         </button>
@@ -101,2 +101,5 @@ </div>
 
+// assets/icons/sun.svg
+var sun_default = '<svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path d="M0.5 14.5016H3.49844M25.4984 14.5L28.5 14.5016M14.4922 0.5V3.5M14.5 25.5V28.5M4.60163 24.4006L6.72185 22.2804M22.2771 6.72293L24.4006 4.60163M4.59498 4.60603L6.7163 6.72735M22.2782 22.2782L24.3995 24.3995M22.4984 14.5C22.4984 18.9183 18.9167 22.5 14.4984 22.5C10.0802 22.5 6.49844 18.9183 6.49844 14.5C6.49844 10.0817 10.0802 6.5 14.4984 6.5C18.9167 6.5 22.4984 10.0817 22.4984 14.5Z" stroke="var(--ds-icon-color, black)" stroke-linecap="round" stroke-linejoin="round"/>\n</svg>';
+
 // src/js/themeToggle.js
@@ -108,10 +111,5 @@ var ThemeToggle = class extends HTMLElement {
   style = `
-    .ds-theme-toggle {
-      display: flex;
-      flex-flow: row nowrap;
-      align-items: center;
-      width: auto;
-    }
     button[data-toggle="light"] {
       background-color: var(--c1);
+      padding-left: var(--space-sm);
     }
@@ -151,21 +149,7 @@ button[data-toggle="light"]:hover,
         <button title="Lys" data-toggle="light">
-          <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <title>Lyst tema</title>
-            <circle cx="12" cy="12" r="5" stroke="var(--ds-icon-color, black)" fill="none"/>
-            <path d="M3 12L5 12M19 12L21 12" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>
-            <path d="M12 3L12 5M12 19L12 21" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>
-            <path d="M18.3638 5.63672L16.9496 7.05093M7.05006 16.9504L5.63585 18.3646" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>
-            <path d="M18.3638 18.3633L16.9496 16.9491M7.05006 7.04957L5.63585 5.63536" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>
-          </svg>
+          ${sun_default}
         </button>
         
         <button title="M\xF8rk" data-toggle="dark">
-          <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <title>M\xF8rkt tema</title>
-            <circle cx="12" cy="12" r="5" stroke="var(--ds-icon-color, black)" fill="none"/>
-            <path d="M3 12L5 12M19 12L21 12" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>
-            <path d="M12 3L12 5M12 19L12 21" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>
-            <path d="M18.3638 5.63672L16.9496 7.05093M7.05006 16.9504L5.63585 18.3646" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>
-            <path d="M18.3638 18.3633L16.9496 16.9491M7.05006 7.04957L5.63585 5.63536" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>
-          </svg>
+          ${sun_default}
         </button>
@@ -205,2 +189,5 @@ </div>
 
+// assets/icons/choose.svg
+var choose_default = '<svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <g stroke="var(--ds-icon-color, black)">\n    <path d="M16.5 14.5C16.5 15.6046 15.6046 16.5 14.5 16.5C13.3954 16.5 12.5 15.6046 12.5 14.5C12.5 13.3954 13.3954 12.5 14.5 12.5C15.6046 12.5 16.5 13.3954 16.5 14.5Z"/>\n    <path d="M27.5 14.5C27.5 15.6046 26.6046 16.5 25.5 16.5C24.3954 16.5 23.5 15.6046 23.5 14.5C23.5 13.3954 24.3954 12.5 25.5 12.5C26.6046 12.5 27.5 13.3954 27.5 14.5Z"/>\n    <path d="M5.5 14.5C5.5 15.6046 4.60457 16.5 3.5 16.5C2.39543 16.5 1.5 15.6046 1.5 14.5C1.5 13.3954 2.39543 12.5 3.5 12.5C4.60457 12.5 5.5 13.3954 5.5 14.5Z"/>\n  </g>\n</svg>';
+
 // src/js/togglePanel.js
@@ -236,11 +223,3 @@ var DSTogglePanel = class extends HTMLElement {
         <button id="ds-toggle-button-${this.componentId}" aria-controls="ds-toggle-panel-${this.componentId}" class="ds-toggle-button" title="${this.componentTitle}">
-          <svg width="24" height="24" viewBox="0 0 24 24" class="ds-svg-icon" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <title>Flere muligheder</title>
-            <path d="M13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z" fill="var(--ds-icon-color, black)"></path>
-            <path d="M19 12C19 12.5523 18.5523 13 18 13C17.4477 13 17 12.5523 17 12C17 11.4477 17.4477 11 18 11C18.5523 11 19 11.4477 19 12Z" fill="var(--ds-icon-color, black)"></path>
-            <path d="M7 12C7 12.5523 6.55228 13 6 13C5.44772 13 5 12.5523 5 12C5 11.4477 5.44772 11 6 11C6.55228 11 7 11.4477 7 12Z" fill="var(--ds-icon-color, black)"></path>
-            <path d="M13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z" stroke="var(--ds-icon-color, black)"></path>
-            <path d="M19 12C19 12.5523 18.5523 13 18 13C17.4477 13 17 12.5523 17 12C17 11.4477 17.4477 11 18 11C18.5523 11 19 11.4477 19 12Z" stroke="var(--ds-icon-color, black)"></path>
-            <path d="M7 12C7 12.5523 6.55228 13 6 13C5.44772 13 5 12.5523 5 12C5 11.4477 5.44772 11 6 11C6.55228 11 7 11.4477 7 12Z" stroke="var(--ds-icon-color, black)"></path>
-          </svg>
+          ${choose_default}
         </button>
@@ -502,2 +481,5 @@ `;
       );
+      if (index === this.activeIndex) {
+        tabTitleButton.classList.add("active");
+      }
       tabTitleButton.addEventListener(
@@ -521,2 +503,6 @@ "click",
     this.tabTitles[index].setAttribute("aria-selected", true);
+    this.tabTitles.forEach((tabElement) => {
+      tabElement.classList.remove("active");
+    });
+    this.tabTitles[index].classList.add("active");
     this.tabContents[this.activeIndex].style.display = "none";
@@ -538,9 +524,12 @@ this.tabContents[index].style.display = "block";
     this.appendChild(styleContainer);
-    const tabsContainer = document.createElement("div");
-    tabsContainer.className = "ds-tabs-header";
+    const tabsContainer = document.createElement("nav");
+    tabsContainer.className = "ds-nav";
     this.tabTitles.forEach((tabTitle, index) => {
       tabTitle.id = `tab-${this.componentId}-${index}`;
+      tabTitle.classList.add("quiet");
       tabsContainer.appendChild(tabTitle);
     });
     this.appendChild(tabsContainer);
+    const hrElement = document.createElement("hr");
+    this.appendChild(hrElement);
     const tabContentContainer = document.createElement("div");
@@ -569,51 +558,102 @@ tabContentContainer.className = "ds-tabs-body";
         :host {
-          width: 100%;
-          height: 4rem;
+          display: block;
+        }
+        :host(.black) ds-logo {
+          --ds-logo-color: var(--hvid);
+          --ds-logo-outline-color: var(--sort);
+          --ds-logo-background-color: var(--sort);
+        }
+        :host(.white) ds-logo {
+          --ds-logo-color: var(--sort);
+          --ds-logo-outline-color: var(--hvid);
+          --ds-logo-background-color: var(--hvid);
+        }
+        :host(.transparent) ds-logo {
+          --ds-logo-color: var(--ds-logo-theme-color);
+          --ds-logo-outline-color: var(--ds-logo-theme-color);
+          --ds-logo-background-color: transparent;
+        }  
+        .logo-title-wrapper {
+          height: 100%;
+          min-height: 4rem;
           display: flex;
-          position: relative;
-          
           flex-flow: row nowrap;
-          container-type: size;
+          justify-content: flex-start;
+          align-items: flex-start;
+          gap: var(--space-sm);
         }
         ds-logo {
-          height: 100%;
-          width: auto;
-          margin: 0 0.75rem 0 -0.75rem;
-          flex: 0 0 auto;
+          height: 4rem;
+          width: 4rem;
+          margin-left: -0.8rem;
         }
-        div {
-          flex: 0 1 100%;
-          padding-top: 1.33rem;
+        p {
+          margin: 0.75rem 0 0;
+          padding: 0;
         }
-        strong,
-        span {
-          display: block;
+        .single-line {
+          margin-top: 1.33rem;
+          font-weight: 370;
+          font-size: 1.125rem;
+          line-height: 1.33;
         }
         strong {
-          font-weight: 600;
-          font-size: 1rem;
+          font-size: 1.188rem;
+          font-weight: 500;
+          line-height: 1.10;
+          letter-spacing: 0.01rem;
         }
-        span {
-          font-size: .9rem;
+        small {
+          display: inline-block;
+          font-size: 0.875rem;
+          font-weight: 390;
+          line-height: 1.21;
+          padding-bottom: var(--space-xs);
         }
 
-        @container (max-height: 3.9rem) {
-          :host {
-            margin-left: -0.5rem;
-          }
-          ds-logo {
-            margin: 0 0.6rem 0 -0.6rem;
-          }
-          div {
-            padding-top: 0.4rem;
-          }
+        :host(.small) .logo-title-wrapper {
+          min-height: 2rem;
+          gap: var(--space-xs);
         }
+        :host(.small) ds-logo {
+          height: 1.5rem;
+          width: 1.5rem;
+          margin-left: -0.33rem;
+        }
+        :host(.small) p {
+          margin-top: var(--space-xs);
+        }
+        :host(.small) .single-line {
+          margin-top: var(--space-xs);
+        }
+        :host(.small) .single-line,
+        :host(.small) strong {
+          font-size: 0.875rem;
+          font-weight: 600;
+          line-height: 1.14;
+          letter-spacing: 0.02rem;
+        }
+        :host(.small) small {
+          font-size: 0.875rem;
+          font-weight: 390;
+          line-height: 1.21;
+        }
       </style>
-      <ds-logo></ds-logo>
-      <div>
-        <strong>${this.title ? this.title : "SDFI"}</strong>
-        <span>${this.getAttribute("byline") ? this.getAttribute("byline") : "Styrelsen for Dataforsyning og Infrastruktur"}</span>
+      <div class="logo-title-wrapper">
+        <ds-logo></ds-logo>
+        ${this.formatLogoText(this.title, this.getAttribute("byline"))}
       </div>
     `;
   }
+  formatLogoText(title, byline) {
+    let txt = "";
+    if (title && byline) {
+      txt = `<p><strong>${title}</strong><br><small>${byline}</small></p>`;
+    } else if (title && !byline) {
+      txt = `<p class="single-line">${title}</p>`;
+    } else {
+      txt = `<p class="single-line">Styrelsen for Dataforsyning og Infrastruktur</p>`;
+    }
+    return txt;
+  }
 };
@@ -690,6 +730,12 @@
     this.style = "--ds-icon-width: 3rem; width: var(--ds-icon-width); height: var(--ds-icon-width); display: inline-block;";
-    this.innerHTML = `<svg style="width: 100%; height: 100%;"><use href="../../assets/designsystem-icons.svg#${this.className}"/></svg>`;
+    this.innerHTML = `<svg style="width: 100%; height: 100%;"><use href="../../assets/icons.svg#${this.className}"/></svg>`;
   }
 };
 
+// assets/icons/arrow-single-up.svg
+var arrow_single_up_default = '<svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path d="M2 22L13.8415 5.41209C14.2795 4.85416 14.9821 4.86401 15.4108 5.43408L27 22" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>\n</svg>';
+
+// assets/icons/arrow-single-down.svg
+var arrow_single_down_default = '<svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path d="M27 7L15.1585 23.5879C14.7205 24.1458 14.0179 24.136 13.5892 23.5659L2 7" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>\n</svg>';
+
 // src/js/dataTable.js
@@ -759,10 +805,4 @@ var DSDataTable = class extends HTMLElement {
       <button class="quiet button-sort">
-        <svg class="icon-sort-ascend" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <title>Sort\xE9r stigende</title>
-          <path d="M6 14L12 8L18 14" stroke="var(--ds-icon-color, black)" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
-        </svg>
-        <svg class="icon-sort-descend" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <title>Sort\xE9r faldende</title>
-          <path d="M6 10L12 16L18 10" stroke="var(--ds-icon-color, black)" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
-        </svg>
+        <span class="sort-asc">${arrow_single_up_default}</span>
+        <span class="sort-dsc">${arrow_single_down_default}</span>
         ${title}
@@ -1405,2 +1445,116 @@ </button>
 }
+
+// src/js/switch.js
+var DSSwitch = class extends HTMLElement {
+  style = `
+    :host {
+      display: inline-block;
+      width: auto;
+      height: var(--space-md);
+    }
+    label {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: flex-start;
+      align-items: stretch;
+      height: 100%;
+      width: auto;
+      gap: var(--space-sm);
+    }
+    input[type="checkbox"] {
+      display: none;
+    }
+    .switch {
+      border: solid 1px var(--border-color);
+      position: relative;
+      display: block;
+      width: 3rem;
+      background-color: var(--bg1);
+      border-radius: var(--border-radius);
+      cursor: pointer;
+      transition: background-color 0.3s, border-color 0.3s;
+    }
+    .switch::after {
+      content: '';
+      position: absolute;
+      top: 0.125rem;
+      left: var(--space-xxs);
+      width: 1rem;
+      height: 1rem;
+      background-color: var(--hvid);
+      border: solid 1px var(--border-color);
+      border-radius: 50%;
+      transition: transform 0.3s, border-color 0.3s;
+    }
+    input:checked ~ .switch {
+      background-color: var(--primary);
+      border-color: var(--primary);
+    }
+    input:checked ~ .switch::after {
+      transform: translateX(1.5rem);
+      border-color: var(--hvid);
+    }
+  `;
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>${this.style}</style>
+      <label>
+        <slot></slot>
+        <input type="checkbox">
+        <span class="switch"></span>
+      </label>
+    `;
+  }
+  static get observedAttributes() {
+    return ["checked"];
+  }
+  get checked() {
+    return this.hasAttribute("checked");
+  }
+  set checked(value) {
+    if (value) {
+      this.setAttribute("checked", "");
+    } else {
+      this.removeAttribute("checked");
+    }
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    this._syncState();
+  }
+  connectedCallback() {
+    this.render();
+    this._upgradeProperty("checked");
+    this.shadowRoot.querySelector("input").addEventListener("change", this._onChange.bind(this));
+    this._syncState();
+  }
+  disconnectedCallback() {
+    this.shadowRoot.querySelector("input").removeEventListener("change", this._onChange.bind(this));
+  }
+  _onChange(event) {
+    this.checked = event.target.checked;
+    this.dispatchEvent(new Event("change"));
+  }
+  _syncState() {
+    const input = this.shadowRoot.querySelector("input");
+    if (!input) {
+      return;
+    }
+    if (this.checked) {
+      input.checked = true;
+    } else {
+      input.checked = false;
+    }
+  }
+  _upgradeProperty(prop) {
+    if (this.hasOwnProperty(prop)) {
+      let value = this[prop];
+      delete this[prop];
+      this[prop] = value;
+    }
+  }
+};
 export {
@@ -1414,2 +1568,3 @@ CodeView,
   DSSlide,
+  DSSwitch,
   DSTogglePanel,
@@ -1416,0 +1571,0 @@ Spinner,

index.js

@@ -14,2 +14,3 @@ import { CodeView } from './src/js/codeview.js'
 import { showToast } from './src/js/toast.js'
+import { DSSwitch } from './src/js/switch.js'
 
@@ -28,4 +29,5 @@ export {
   DSDataTable,
+  DSSwitch,
   popoverPolyfill,
   showToast
 }

package.json

 {
   "name": "@dataforsyningen/designsystem",
-  "version": "6.1.0",
+  "version": "7.0.0",
   "description": "Common design system for SDFI with CSS, icons, UI components, and logo images.",
@@ -19,3 +19,3 @@ "type": "module",
     "build-css": "sass index.scss assets/designsystem.css --style compressed",
-    "build-js": "node_modules/.bin/esbuild ./index.js --bundle --outfile=assets/designsystem.js --format=esm --loader:.svg=file",
+    "build-js": "node_modules/.bin/esbuild ./index.js --bundle --outfile=assets/designsystem.js --format=esm --loader:.svg=text",
     "build-docs": "node bin/build-docs.js",
@@ -37,4 +37,4 @@ "test": "echo \"Error: no test specified\" && exit 1"
     "express": "^4.18.2",
-    "sass": "^1.69.0"
+    "sass": "^1.77.5"
   }
 }

README.md

@@ -47,3 +47,3 @@ # SDFI Designsystem
 
-You can find all designsystem icons in [assets/icons](./assets/icons). You can copy and use them individually or use the entire icon set as a single SVG file: [assets/designsystem-icons.svg](./assets/designsystem-icons.svg)
+You can find all designsystem icons in [assets/icons](./assets/icons). You can copy and use them individually or use the entire icon set as a single SVG file: [assets/icons.svg](./assets/icons.svg)
 
@@ -53,3 +53,3 @@ When using the single SVG, you just add an `svg` element to your markup and display your icon of choice with `use`.
 ```
-<svg><use href="YOUR_PATH/designsystem-icons.svg#notification" /></svg>
+<svg><use href="YOUR_PATH/icons.svg#notification" /></svg>
 ```
@@ -118,3 +118,3 @@
 ```
-import svgIcon from '@dataforsyningen/designsystem/designsystem-icons.svg'
+import svgIcon from '@dataforsyningen/designsystem/icons.svg'
 
@@ -134,2 +134,2 @@ // Using the **notification** icon
 showToast('Hello! I am a toast.')
-```
+```

src/js/codeview.js

 import { showToast } from "./toast.js"
+import iconCopy from '../../assets/icons/copy.svg'
 
@@ -42,6 +43,3 @@ export class CodeView extends HTMLElement {
         <button class="ds-code-view-copy quiet" title="Kopiér">
-          <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <title>Kopiér</title>
-            <path d="M7.30769 15H6.53846C6.13044 15 5.73912 14.8379 5.4506 14.5494C5.16209 14.2609 5 13.8696 5 13.4615V6.53846C5 6.13044 5.16209 5.73912 5.4506 5.4506C5.73912 5.16209 6.13044 5 6.53846 5H13.4615C13.8696 5 14.2609 5.16209 14.5494 5.4506C14.8379 5.73912 15 6.13044 15 6.53846V7.30769M10.5385 9.00001H17.4615C18.3112 9.00001 19 9.6888 19 10.5385V17.4615C19 18.3112 18.3112 19 17.4615 19H10.5385C9.68879 19 9 18.3112 9 17.4615V10.5385C9 9.6888 9.68879 9.00001 10.5385 9.00001Z" stroke="var(--ds-icon-color, black)" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
-          </svg>
+          ${ iconCopy }
         </button>
@@ -48,0 +46,0 @@ </div>

src/js/dataTable.js

@@ -0,1 +1,4 @@
+import iconArrowSingleUp from '../../assets/icons/arrow-single-up.svg'
+import iconArrowSingleDown from '../../assets/icons/arrow-single-down.svg'
+
 /** Web component to render table data with filter and sort features */
@@ -77,10 +80,4 @@ export class DSDataTable extends HTMLElement {
       <button class="quiet button-sort">
-        <svg class="icon-sort-ascend" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <title>Sortér stigende</title>
-          <path d="M6 14L12 8L18 14" stroke="var(--ds-icon-color, black)" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
-        </svg>
-        <svg class="icon-sort-descend" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <title>Sortér faldende</title>
-          <path d="M6 10L12 16L18 10" stroke="var(--ds-icon-color, black)" stroke-linecap="round" stroke-linejoin="round" fill="none"></path>
-        </svg>
+        <span class="sort-asc">${ iconArrowSingleUp }</span>
+        <span class="sort-dsc">${ iconArrowSingleDown }</span>
         ${ title }
@@ -87,0 +84,0 @@ </button>

src/js/icon.js

@@ -1,2 +0,2 @@
-// import svgSrc from '../../assets/designsystem-icons.svg'
+// import svgSrc from '../../assets/icons.svg'
 
@@ -11,4 +11,4 @@ export class DSIcon extends HTMLElement {
     this.style = '--ds-icon-width: 3rem; width: var(--ds-icon-width); height: var(--ds-icon-width); display: inline-block;'
-    this.innerHTML = `<svg style="width: 100%; height: 100%;"><use href="../../assets/designsystem-icons.svg#${ this.className }"/></svg>`
+    this.innerHTML = `<svg style="width: 100%; height: 100%;"><use href="../../assets/icons.svg#${ this.className }"/></svg>`
   }
 }

src/js/logoTitle.js

@@ -19,48 +19,88 @@ import { DSLogo } from "./logo.js"
         :host {
-          width: 100%;
-          height: 4rem;
+          display: block;
+        }
+        :host(.black) ds-logo {
+          --ds-logo-color: var(--hvid);
+          --ds-logo-outline-color: var(--sort);
+          --ds-logo-background-color: var(--sort);
+        }
+        :host(.white) ds-logo {
+          --ds-logo-color: var(--sort);
+          --ds-logo-outline-color: var(--hvid);
+          --ds-logo-background-color: var(--hvid);
+        }
+        :host(.transparent) ds-logo {
+          --ds-logo-color: var(--ds-logo-theme-color);
+          --ds-logo-outline-color: var(--ds-logo-theme-color);
+          --ds-logo-background-color: transparent;
+        }  
+        .logo-title-wrapper {
+          height: 100%;
+          min-height: 4rem;
           display: flex;
-          position: relative;
-          
           flex-flow: row nowrap;
-          container-type: size;
+          justify-content: flex-start;
+          align-items: flex-start;
+          gap: var(--space-sm);
         }
         ds-logo {
-          height: 100%;
-          width: auto;
-          margin: 0 0.75rem 0 -0.75rem;
-          flex: 0 0 auto;
+          height: 4rem;
+          width: 4rem;
+          margin-left: -0.8rem;
         }
-        div {
-          flex: 0 1 100%;
-          padding-top: 1.33rem;
+        p {
+          margin: 0.75rem 0 0;
+          padding: 0;
         }
-        strong,
-        span {
-          display: block;
+        .single-line {
+          margin-top: 1.33rem;
+          font-weight: 370;
+          font-size: 1.125rem;
+          line-height: 1.33;
         }
         strong {
-          font-weight: 600;
-          font-size: 1rem;
+          font-size: 1.188rem;
+          font-weight: 500;
+          line-height: 1.10;
+          letter-spacing: 0.01rem;
         }
-        span {
-          font-size: .9rem;
+        small {
+          display: inline-block;
+          font-size: 0.875rem;
+          font-weight: 390;
+          line-height: 1.21;
+          padding-bottom: var(--space-xs);
         }
 
-        @container (max-height: 3.9rem) {
-          :host {
-            margin-left: -0.5rem;
-          }
-          ds-logo {
-            margin: 0 0.6rem 0 -0.6rem;
-          }
-          div {
-            padding-top: 0.4rem;
-          }
+        :host(.small) .logo-title-wrapper {
+          min-height: 2rem;
+          gap: var(--space-xs);
         }
+        :host(.small) ds-logo {
+          height: 1.5rem;
+          width: 1.5rem;
+          margin-left: -0.33rem;
+        }
+        :host(.small) p {
+          margin-top: var(--space-xs);
+        }
+        :host(.small) .single-line {
+          margin-top: var(--space-xs);
+        }
+        :host(.small) .single-line,
+        :host(.small) strong {
+          font-size: 0.875rem;
+          font-weight: 600;
+          line-height: 1.14;
+          letter-spacing: 0.02rem;
+        }
+        :host(.small) small {
+          font-size: 0.875rem;
+          font-weight: 390;
+          line-height: 1.21;
+        }
       </style>
-      <ds-logo></ds-logo>
-      <div>
-        <strong>${ this.title ? this.title : 'SDFI' }</strong>
-        <span>${ this.getAttribute('byline') ? this.getAttribute('byline') : 'Styrelsen for Dataforsyning og Infrastruktur' }</span>
+      <div class="logo-title-wrapper">
+        <ds-logo></ds-logo>
+        ${ this.formatLogoText(this.title, this.getAttribute('byline'))}
       </div>
@@ -70,2 +110,14 @@ `
 
+  formatLogoText(title, byline) {
+    let txt = ''
+    if (title && byline) {
+      txt = `<p><strong>${ title }</strong><br><small>${ byline }</small></p>`
+    } else if (title && !byline) {
+      txt = `<p class="single-line">${ title }</p>`
+    } else {
+      txt = `<p class="single-line">Styrelsen for Dataforsyning og Infrastruktur</p>`
+    }
+    return txt
+  }
+
 }

src/js/tabs.js

@@ -48,2 +48,5 @@ /**
       )
+      if (index === this.activeIndex) {
+        tabTitleButton.classList.add('active')
+      } 
       tabTitleButton.addEventListener("click", () =>
@@ -64,3 +67,3 @@ this.switchTab(index)
       this.tabContents.push(tabContent)
-    });
+    })
   }
@@ -71,2 +74,6 @@
     this.tabTitles[index].setAttribute("aria-selected", true)
+    this.tabTitles.forEach((tabElement) => {
+      tabElement.classList.remove('active')
+    })
+    this.tabTitles[index].classList.add('active')
     this.tabContents[this.activeIndex].style.display = "none"
@@ -93,7 +100,8 @@ this.tabContents[index].style.display = "block"
 
-    const tabsContainer = document.createElement("div")
-    tabsContainer.className = "ds-tabs-header"
+    const tabsContainer = document.createElement("nav")
+    tabsContainer.className = "ds-nav"
 
     this.tabTitles.forEach((tabTitle, index) => {
       tabTitle.id = `tab-${this.componentId}-${index}`
+      tabTitle.classList.add('quiet')
       tabsContainer.appendChild(tabTitle)
@@ -104,2 +112,5 @@ })
 
+    const hrElement = document.createElement('hr')
+    this.appendChild(hrElement)
+
     const tabContentContainer = document.createElement("div")
@@ -106,0 +117,0 @@ tabContentContainer.className = "ds-tabs-body"

src/js/themeToggle.js

@@ -0,1 +1,3 @@
+import iconSun from '../../assets/icons/sun.svg'
+
 export class ThemeToggle extends HTMLElement {
@@ -7,10 +9,5 @@
   style = `
-    .ds-theme-toggle {
-      display: flex;
-      flex-flow: row nowrap;
-      align-items: center;
-      width: auto;
-    }
     button[data-toggle="light"] {
       background-color: var(--c1);
+      padding-left: var(--space-sm);
     }
@@ -54,21 +51,7 @@ button[data-toggle="light"]:hover,
         <button title="Lys" data-toggle="light">
-          <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <title>Lyst tema</title>
-            <circle cx="12" cy="12" r="5" stroke="var(--ds-icon-color, black)" fill="none"/>
-            <path d="M3 12L5 12M19 12L21 12" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>
-            <path d="M12 3L12 5M12 19L12 21" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>
-            <path d="M18.3638 5.63672L16.9496 7.05093M7.05006 16.9504L5.63585 18.3646" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>
-            <path d="M18.3638 18.3633L16.9496 16.9491M7.05006 7.04957L5.63585 5.63536" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>
-          </svg>
+          ${ iconSun }
         </button>
         
         <button title="Mørk" data-toggle="dark">
-          <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <title>Mørkt tema</title>
-            <circle cx="12" cy="12" r="5" stroke="var(--ds-icon-color, black)" fill="none"/>
-            <path d="M3 12L5 12M19 12L21 12" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>
-            <path d="M12 3L12 5M12 19L12 21" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>
-            <path d="M18.3638 5.63672L16.9496 7.05093M7.05006 16.9504L5.63585 18.3646" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>
-            <path d="M18.3638 18.3633L16.9496 16.9491M7.05006 7.04957L5.63585 5.63536" stroke="var(--ds-icon-color, black)" stroke-linecap="round"/>
-          </svg>
+          ${ iconSun }
         </button>
@@ -75,0 +58,0 @@ </div>

src/js/togglePanel.js

@@ -0,1 +1,3 @@
+import iconChoose from '../../assets/icons/choose.svg'
+
 export class DSTogglePanel extends HTMLElement {
@@ -38,11 +40,3 @@
         <button id="ds-toggle-button-${ this.componentId}" aria-controls="ds-toggle-panel-${ this.componentId}" class="ds-toggle-button" title="${ this.componentTitle }">
-          <svg width="24" height="24" viewBox="0 0 24 24" class="ds-svg-icon" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <title>Flere muligheder</title>
-            <path d="M13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z" fill="var(--ds-icon-color, black)"></path>
-            <path d="M19 12C19 12.5523 18.5523 13 18 13C17.4477 13 17 12.5523 17 12C17 11.4477 17.4477 11 18 11C18.5523 11 19 11.4477 19 12Z" fill="var(--ds-icon-color, black)"></path>
-            <path d="M7 12C7 12.5523 6.55228 13 6 13C5.44772 13 5 12.5523 5 12C5 11.4477 5.44772 11 6 11C6.55228 11 7 11.4477 7 12Z" fill="var(--ds-icon-color, black)"></path>
-            <path d="M13 12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12Z" stroke="var(--ds-icon-color, black)"></path>
-            <path d="M19 12C19 12.5523 18.5523 13 18 13C17.4477 13 17 12.5523 17 12C17 11.4477 17.4477 11 18 11C18.5523 11 19 11.4477 19 12Z" stroke="var(--ds-icon-color, black)"></path>
-            <path d="M7 12C7 12.5523 6.55228 13 6 13C5.44772 13 5 12.5523 5 12C5 11.4477 5.44772 11 6 11C6.55228 11 7 11.4477 7 12Z" stroke="var(--ds-icon-color, black)"></path>
-          </svg>
+          ${ iconChoose }
         </button>
@@ -49,0 +43,0 @@ `

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 2 instances in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4700034

increased by589.28%

Number of package files

195

increased by17.47%

Lines of code

3408

increased by10.04%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

Number of lines in readme file

131

decreased by-0.76%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes