npm - so-web-components - Versions diffs - 0.1.8 → 0.1.10 - Mend

so-web-components 0.1.8 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/README.md +49 -9
package/dist/components/so-breadcrumb.js +2 -2
package/dist/components/so-lead-text.d.ts +5 -0
package/dist/components/so-lead-text.js +34 -0
package/dist/demo/cdn-demo.html +15 -13
package/dist/demo/index.html +13 -0
package/dist/index.d.ts +2 -1
package/dist/index.js +5 -1
package/dist/styles/FrutigerLTW05-55Roman.woff2 +0 -0
package/dist/styles/FrutigerLTW05-75Black.woff2 +0 -0
package/dist/styles/fonts.css +9 -49
package/dist/styles/tokens.css +13 -0
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -11,10 +11,12 @@ abgeleitet aus dem Layout-Prinzip von so.ch.
   - 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/components/so-lead-text.ts` – `<so-lead-text>` Web Component für Intro-/Lead-Absätze
 - `src/demo/index.html` – Demo-Seite
 - `src/demo/cdn-demo.html` – einfache CDN-Demo-Seite
 - `tests/so-header.test.ts` – Tests (Jest + JSDOM)
 - `tests/so-breadcrumb.test.ts` – Tests (Jest + JSDOM)
+- `tests/so-lead-text.test.ts` – Tests (Jest + JSDOM)
 ## Voraussetzungen
@@ -41,6 +43,8 @@ Outputs:
 - `dist/styles/tokens.css`
 - `dist/styles/reset.css`
 - `dist/styles/fonts.css`
+- `dist/styles/FrutigerLTW05-55Roman.woff2`
+- `dist/styles/FrutigerLTW05-75Black.woff2`
 - `dist/demo/index.html`
 - `dist/demo/cdn-demo.html`
@@ -75,11 +79,11 @@ git push origin v0.1.1
 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>
+<script type="module" src="https://unpkg.com/so-web-components@latest/dist/index.js"></script>
 ```
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/index.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/index.js"></script>
 ```
 Optional ohne Versions-Pin:
@@ -92,7 +96,11 @@ Optional ohne Versions-Pin:
 <script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components/dist/index.js"></script>
 ```
-### Einfache Test-Webseite via CDN (Version `0.1.1`)
+Hinweis:
+- `@latest` ist möglich und lädt die aktuellste veröffentlichte Version.
+- Für stabile Produktion empfiehlt sich trotzdem ein expliziter Versions-Pin (z.B. `@0.1.10`).
+### Einfache Test-Webseite via CDN (Version `latest`)
 Eine fertige Beispielseite liegt unter `src/demo/cdn-demo.html` (wird nach `dist/demo/cdn-demo.html` kopiert):
@@ -104,10 +112,10 @@ Eine fertige Beispielseite liegt unter `src/demo/cdn-demo.html` (wird nach `dist
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>so-web-components CDN Demo</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/reset.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/fonts.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/tokens.css" />
-  <script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/index.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/styles/reset.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/styles/fonts.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/styles/tokens.css" />
+  <script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/index.js"></script>
 </head>
 <body>
   <so-header
@@ -127,7 +135,7 @@ Hinweis zu Fonts:
 - Die Schrift wird **nicht** automatisch durch `index.js` nachgeladen.
 - `dist/styles/fonts.css` muss explizit eingebunden werden (lokal oder via CDN).
-- In `fonts.css` ist die Frutiger-Webfont als `@font-face` enthalten.
+- `fonts.css` referenziert die mitgelieferten `woff2`-Dateien aus `dist/styles/`.
 ## Dev / Demo starten
@@ -177,6 +185,9 @@ Dann im Browser öffnen:
 <so-header></so-header>
 <so-breadcrumb></so-breadcrumb>
+<so-lead-text>
+  <p>Ein kurzer Leadtext mit <a href="#">Link</a>.</p>
+</so-lead-text>
 ```
 ### 3) Navigation konfigurieren (optional)
@@ -250,8 +261,37 @@ Einfach per CSS Custom Properties:
 }
 ```
-> Hinweis: Wenn du `styles/fonts.css` einbindest, wird Frutiger als Webfont geladen.
+> Hinweis: Wenn du `styles/fonts.css` einbindest, wird Frutiger über die mitgelieferten `woff2`-Dateien aus `styles/` geladen.
 ## Lizenz
 MIT (für dieses Beispielprojekt).
+### `<so-lead-text>`
+Für grössere Intro-Absätze unter einer Seitentitel-Zeile.
+**Beispiel**
+```html
+<h1 class="so-page-title">Kartenkatalog</h1>
+<so-lead-text>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  <p>Mit <a href="https://www.cogeo.org/">einem Link</a> im Text.</p>
+</so-lead-text>
+```
+**Custom Properties**
+- `--so-lead-text-margin-top` (Default `24px`)
+- `--so-lead-text-font-size` (Default `1.125rem`)
+- `--so-lead-text-line-height` (Default `1.55`)
+### Standard-Linkstyling in `tokens.css`
+Ja, das passt gut in `tokens.css` für den globalen Fallback ausserhalb von Shadow-DOM-Komponenten.
+- Links sind standardmässig unterstrichen.
+- Hover/Focus rendert rot (`#e01f26`).
+- Übersteuerbar via CSS-Variablen `--so-link-color` und `--so-link-hover-color`.

package/dist/components/so-breadcrumb.js CHANGED Viewed

@@ -145,8 +145,8 @@ export class SoBreadcrumb extends HTMLElement {
       }
       .chevron{
-        width: 21px;
-        height: 21px;
+        width: 16px;
+        height: 16px;
         fill: #e01f26;
         flex: 0 0 auto;
         display: block;

package/dist/components/so-lead-text.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export declare class SoLeadText extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    private render;
+}

package/dist/components/so-lead-text.js ADDED Viewed

@@ -0,0 +1,34 @@
+export class SoLeadText extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() {
+        this.render();
+    }
+    render() {
+        if (!this.shadowRoot)
+            return;
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          margin-top: var(--so-lead-text-margin-top, 24px);
+          color: inherit;
+        }
+        ::slotted(p) {
+          margin: 0 0 18px;
+          font-size: var(--so-lead-text-font-size, 1.125rem);
+          line-height: var(--so-lead-text-line-height, 1.55);
+        }
+        ::slotted(p:last-child) {
+          margin-bottom: 0;
+        }
+      </style>
+      <slot></slot>
+    `;
+    }
+}

package/dist/demo/cdn-demo.html CHANGED Viewed

@@ -6,12 +6,12 @@
   <title>so-web-components CDN Demo</title>
   <!-- Basis-Styles und Fonts von CDN -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/reset.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/fonts.css" />
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/styles/tokens.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/styles/reset.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/styles/fonts.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/styles/tokens.css" />
   <!-- Web Components von CDN -->
-  <script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components@0.1.1/dist/index.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/so-web-components@latest/dist/index.js"></script>
   <style>
     body {
@@ -22,18 +22,17 @@
     }
     main {
-      max-width: 960px;
+      max-width: 1040px;
       margin: 0 auto;
       padding: 24px;
     }
-    h1 {
-      margin: 0 0 12px;
-      font-size: 1.5rem;
-    }
-    p {
+    .so-page-title {
       margin: 0;
+      font-size: 2.25rem;
+      line-height: 1.15;
+      font-weight: 900;
+      letter-spacing: 0;
     }
   </style>
 </head>
@@ -47,8 +46,11 @@
   </so-breadcrumb>
   <main>
-    <h1>Demo-Seite für einfache Webseiten</h1>
-    <p>Diese Seite lädt <code>so-header</code> und <code>so-breadcrumb</code> direkt aus dem CDN.</p>
+    <h1 class="so-page-title">Kartenkatalog</h1>
+    <so-lead-text>
+      <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Nisi donec vulputate posuere auctor dictum ante. Eu convallis mi consequat per sollicitudin vestibulum odio ut maximus. Maecenas tellus sodales eget nunc volutpat nam integer?</p>
+      <p>Ad diam tristique netus conubia dui maecenas pretium aenean. Ridiculus <a href="https://www.cogeo.org/" target="_blank" rel="noopener noreferrer">Cloud Optimized GeoTIFF</a> dictum ligula pretium, ridiculus maecenas tortor.</p>
+    </so-lead-text>
   </main>
 </body>
 </html>

package/dist/demo/index.html CHANGED Viewed

@@ -12,7 +12,15 @@
     body{ background: var(--so-bg); color: var(--so-fg); font-family: var(--so-font-family); }
     main{ padding: 2rem 0; }
     .so-container{ max-width: var(--so-container-size-full); margin-inline:auto; padding-inline: var(--so-container-padding); }
+    .so-page-title {
+      margin: 0;
+      font-size: 2.25rem;
+      line-height: 1.15;
+      font-weight: 900;
+      letter-spacing: 0;
+    }
     .hero{
+      margin-top: 2rem;
       height: 260px;
       border-radius: 12px;
       background: linear-gradient(135deg, rgba(0,0,0,0.08), rgba(0,0,0,0.02));
@@ -38,6 +46,11 @@
   <main>
     <div class="so-container">
+      <h1 class="so-page-title">Kartenkatalog</h1>
+      <so-lead-text>
+        <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Nisi donec vulputate posuere auctor dictum ante. Eu convallis mi consequat per sollicitudin vestibulum odio ut maximus. Maecenas tellus sodales eget nunc volutpat nam integer?</p>
+        <p>Ad diam tristique netus conubia dui maecenas pretium aenean. Ridiculus <a href="https://www.cogeo.org/" target="_blank" rel="noopener noreferrer">Cloud Optimized GeoTIFF</a> dictum ligula pretium, ridiculus maecenas tortor.</p>
+      </so-lead-text>
       <div class="hero">Willkommen beim Kanton Solothurn</div>
     </div>
   </main>

package/dist/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 import { SoBreadcrumb, SoBreadcrumbItem } from "./components/so-breadcrumb.js";
 import { SoHeader } from "./components/so-header.js";
-export { SoBreadcrumb, SoBreadcrumbItem, SoHeader };
+import { SoLeadText } from "./components/so-lead-text.js";
+export { SoBreadcrumb, SoBreadcrumbItem, SoHeader, SoLeadText };

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { SoBreadcrumb, SoBreadcrumbItem } from "./components/so-breadcrumb.js";
 import { SoHeader } from "./components/so-header.js";
+import { SoLeadText } from "./components/so-lead-text.js";
 if (!customElements.get("so-header")) {
     customElements.define("so-header", SoHeader);
 }
@@ -9,4 +10,7 @@ if (!customElements.get("so-breadcrumb")) {
 if (!customElements.get("so-breadcrumb-item")) {
     customElements.define("so-breadcrumb-item", SoBreadcrumbItem);
 }
-export { SoBreadcrumb, SoBreadcrumbItem, SoHeader };
+if (!customElements.get("so-lead-text")) {
+    customElements.define("so-lead-text", SoLeadText);
+}
+export { SoBreadcrumb, SoBreadcrumbItem, SoHeader, SoLeadText };

package/dist/styles/FrutigerLTW05-55Roman.woff2 ADDED Viewed

Binary file

package/dist/styles/FrutigerLTW05-75Black.woff2 ADDED Viewed

Binary file