so-web-components 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Stefan Ziegler
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,217 @@
+# so-web-components
+
+Vanilla **TypeScript** Web Components + ein kleines **Design-Token**-Set (CSS Custom Properties),
+abgeleitet aus dem Layout-Prinzip von so.ch.
+
+## Enthalten
+
+- `src/styles/tokens.css` – Farben/Typografie/Container-Tokens  
+  - Hintergrund: `#fff`  
+  - Schriftfarbe: `rgb(47, 72, 88)`  
+  - Schrift: `Frutiger, sans-serif`
+- `src/components/so-header.ts` – `<so-header>` Web Component (Shadow DOM)
+- `src/components/so-breadcrumb.ts` – `<so-breadcrumb>` Web Component (Shadow DOM)
+- `src/demo/index.html` – Demo-Seite
+- `tests/so-header.test.ts` – Tests (Jest + JSDOM)
+- `tests/so-breadcrumb.test.ts` – Tests (Jest + JSDOM)
+
+## Voraussetzungen
+
+- Node.js >= 18
+- npm
+
+## Install
+
+```bash
+npm install
+```
+
+## Build
+
+```bash
+npm run build
+```
+
+Outputs:
+
+- `dist/index.js` (ESM)
+- `dist/index.d.ts`
+- `dist/components/...`
+- `dist/styles/tokens.css`
+- `dist/styles/reset.css`
+- `dist/demo/index.html`
+
+## Tests
+
+```bash
+npm test
+```
+
+## Publish (npm)
+
+### Voraussetzungen
+
+- npm Account
+- **Automation Token** (Classic Tokens werden nicht mehr akzeptiert)
+- GitHub Secret `NPM_TOKEN` im Repo hinterlegen (Automation Token)
+
+> Optional: Alternativ kannst du **npm Trusted Publishing (OIDC)** aktivieren und dann ohne Token veröffentlichen.
+
+### Ablauf
+
+1) Änderungen auf `main` pushen (CI läuft).
+2) Version taggen (Semver) und Tag pushen → Publish-Workflow lädt auf npm.
+
+```bash
+git tag v0.1.1
+git push origin v0.1.1
+```
+
+## CDN Nutzung (nach npm Publish)
+
+Nach dem Publish sind die Web Components z.B. über **unpkg** oder **jsDelivr** verfügbar:
+
+```html
+<script type="module" src="https://unpkg.com/so-web-components@0.1.1/dist/index.js"></script>
+```
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/index.js"></script>
+```
+
+Optional ohne Versions-Pin:
+
+```html
+<script type="module" src="https://unpkg.com/so-web-components/dist/index.js"></script>
+```
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components/dist/index.js"></script>
+```
+
+## Dev / Demo starten
+
+### Live Reload (empfohlen)
+
+```bash
+npm run dev:hot
+```
+
+Das startet:
+
+- TypeScript im Watch-Modus
+- automatisches Kopieren von Demo/Styles nach `dist/`
+- den Dev-Server mit Live-Reload
+
+Dann im Browser öffnen:
+
+- http://localhost:5173
+
+### Ohne Live Reload
+
+> Wichtig: Der Dev-Server serviert aus `dist/`. Deshalb immer zuerst `npm run build` ausführen.
+
+```bash
+npm run build
+npm run dev
+```
+
+Dann im Browser öffnen:
+
+- http://localhost:5173
+
+## Verwendung
+
+### 1) Fonts / Tokens / Reset laden
+
+```html
+<link rel="stylesheet" href="/dist/styles/reset.css">
+<link rel="stylesheet" href="/dist/styles/fonts.css">
+<link rel="stylesheet" href="/dist/styles/tokens.css">
+```
+
+### 2) Component laden und einsetzen
+
+```html
+<script type="module" src="/dist/index.js"></script>
+
+<so-header></so-header>
+<so-breadcrumb></so-breadcrumb>
+```
+
+### 3) Navigation konfigurieren (optional)
+
+`top-nav` und `section-nav` sind JSON-Arrays:
+
+```html
+<so-header
+  top-nav='[{"label":"Regierung","href":"/regierung"},{"label":"Gerichte","href":"/gerichte"}]'
+  section-nav='[{"label":"Services","href":"/services"},{"label":"Verwaltung","href":"/verwaltung"}]'
+  active-section="Services"
+  logo-href="/"
+  site-name="Kanton Solothurn"
+></so-header>
+```
+
+## Generelle Informationen
+
+- Alle Komponenten sind **Custom Elements** mit **Shadow DOM**.
+- Konfiguration erfolgt über Attribute (meist JSON-Strings).
+- Styling per CSS Custom Properties, die im Host-Kontext gesetzt werden können.
+
+## Komponenten
+
+### `<so-header>`
+
+**Attribute**
+
+- `top-nav`: JSON-Array aus `{ label, href }`
+- `section-nav`: JSON-Array aus `{ label, href }`
+- `active-section`: String
+- `logo-href`: String
+- `site-name`: String
+
+**Events**
+
+- `so-section-select` → wird ausgelöst, wenn ein Bereich (Services/Verwaltung) geklickt wird  
+  `detail: { label, href }`
+
+### `<so-breadcrumb>`
+
+**Beispiel**
+
+```html
+<so-breadcrumb>
+  <so-breadcrumb-item href="https://so.ch">so.ch</so-breadcrumb-item>
+  <so-breadcrumb-item href="https://so.ch/verwaltung/">Verwaltung</so-breadcrumb-item>
+  <so-breadcrumb-item href="https://so.ch/verwaltung/bau-und-justizdepartement/">Bau- und Justizdepartement</so-breadcrumb-item>
+  <so-breadcrumb-item href="https://so.ch/verwaltung/bau-und-justizdepartement/amt-fuer-geoinformation/" isCurrentPage>
+    Amt für Geoinformation
+  </so-breadcrumb-item>
+</so-breadcrumb>
+```
+
+**Custom Properties**
+
+- `--so-breadcrumb-padding`: Padding (Default `24px`)
+
+## Customizing
+
+Einfach per CSS Custom Properties:
+
+```css
+:root{
+  --so-bg: #fff;
+  --so-fg: rgb(47, 72, 88);
+
+  /* z.B. Contentbreite/Gutters anpassen */
+  --so-container-size-full: 120rem;
+  --so-container-padding: 1rem;
+}
+```
+
+> Hinweis: **Frutiger** muss auf dem System vorhanden sein (oder du bindest eine Webfont ein).
+
+## Lizenz
+
+MIT (für dieses Beispielprojekt).

package/dist/components/so-breadcrumb.d.ts

@@ -0,0 +1,12 @@
+export declare class SoBreadcrumbItem extends HTMLElement {
+}
+export declare class SoBreadcrumb extends HTMLElement {
+    private root;
+    private observer;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private getItems;
+    private render;
+    private styles;
+}

package/dist/components/so-breadcrumb.js

@@ -0,0 +1,157 @@
+const CHEVRON_SVG = `<svg class="chevron" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+  <path d="m15.53 11.47-6-6c-.29-.29-.77-.29-1.06 0s-.29.77 0 1.06L13.94 12l-5.47 5.47c-.29.29-.29.77 0 1.06.15.15.34.22.53.22s.38-.07.53-.22l6-6c.29-.29.29-.77 0-1.06Z"/>
+</svg>`;
+function el(tag, cls) {
+    const n = document.createElement(tag);
+    if (cls)
+        n.className = cls;
+    return n;
+}
+function isCurrentPageAttribute(el) {
+    return el.hasAttribute("iscurrentpage") || el.hasAttribute("isCurrentPage");
+}
+export class SoBreadcrumbItem extends HTMLElement {
+}
+export class SoBreadcrumb extends HTMLElement {
+    constructor() {
+        super();
+        this.observer = null;
+        this.root = this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() {
+        this.render();
+        this.observer = new MutationObserver(() => this.render());
+        this.observer.observe(this, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            characterData: true
+        });
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+        this.observer = null;
+    }
+    getItems() {
+        const nodes = Array.from(this.querySelectorAll("so-breadcrumb-item"));
+        const items = nodes
+            .map((node) => {
+            const label = (node.textContent ?? "").trim();
+            return {
+                label,
+                href: node.getAttribute("href"),
+                isCurrentPage: isCurrentPageAttribute(node)
+            };
+        })
+            .filter((item) => item.label.length > 0);
+        if (!items.length)
+            return [];
+        if (!items.some((item) => item.isCurrentPage)) {
+            items[items.length - 1].isCurrentPage = true;
+        }
+        return items;
+    }
+    render() {
+        this.root.innerHTML = "";
+        const styleEl = document.createElement("style");
+        styleEl.textContent = this.styles();
+        this.root.appendChild(styleEl);
+        const wrapper = el("nav", "so-breadcrumb");
+        wrapper.setAttribute("aria-label", "Breadcrumb");
+        const container = el("div", "so-breadcrumb-container");
+        const list = el("ol", "list");
+        const items = this.getItems();
+        items.forEach((item, index) => {
+            const isLast = index === items.length - 1;
+            const li = el("li", "item");
+            if (item.isCurrentPage)
+                li.classList.add("current");
+            if (item.isCurrentPage || !item.href) {
+                const labelEl = el("span", "label");
+                labelEl.textContent = item.label;
+                if (item.isCurrentPage) {
+                    labelEl.setAttribute("aria-current", "page");
+                }
+                li.appendChild(labelEl);
+            }
+            else {
+                const labelEl = el("a");
+                labelEl.href = item.href;
+                labelEl.textContent = item.label;
+                li.appendChild(labelEl);
+            }
+            if (!isLast) {
+                li.insertAdjacentHTML("beforeend", CHEVRON_SVG);
+            }
+            list.appendChild(li);
+        });
+        container.appendChild(list);
+        wrapper.appendChild(container);
+        this.root.appendChild(wrapper);
+    }
+    styles() {
+        return `
+      :host{
+        display: block;
+        width: 100%;
+        font-family: var(--so-font-family, Frutiger, sans-serif);
+      }
+
+      .so-breadcrumb{
+        width: 100%;
+        color: var(--so-fg, rgb(47, 72, 88));
+      }
+
+      .so-breadcrumb-container{
+        width: 100%;
+        padding: var(--so-breadcrumb-padding, 24px);
+      }
+
+      .list{
+        list-style: none;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        gap: 0.5rem;
+        padding: 0;
+        margin: 0;
+        font-size: 14px;
+        line-height: 1.4;
+      }
+
+      .item{
+        display: inline-flex;
+        align-items: flex-end;
+        gap: 0.5rem;
+        color: inherit;
+      }
+
+      .item a,
+      .item .label{
+        color: inherit;
+        text-decoration: none;
+        line-height: 1;
+      }
+
+      .item a:hover,
+      .item a:focus-visible{
+        color: #e01f26;
+        text-decoration: none;
+      }
+
+      .item.current,
+      .item.current .label,
+      .item.current a{
+        color: #e01f26;
+      }
+
+      .chevron{
+        width: 21px;
+        height: 21px;
+        fill: #e01f26;
+        flex: 0 0 auto;
+        display: block;
+      }
+    `;
+    }
+}

package/dist/components/so-header.d.ts

@@ -0,0 +1,16 @@
+export declare class SoHeader extends HTMLElement {
+    static observedAttributes: string[];
+    private root;
+    private topNav;
+    private sectionNav;
+    private activeSection;
+    private logoHref;
+    private siteName;
+    constructor();
+    attributeChangedCallback(): void;
+    private updateFromAttributes;
+    private bindEvents;
+    private toggleMobileMenu;
+    private render;
+    private styles;
+}