@orderlyshop/web-components 0.1.0-build.7045

package/examples/shop/src/navigation.ts

@@ -0,0 +1,154 @@
+import type { NavigationDefinition } from "@orderlyshop/web-components";
+
+export const navigationDefinitions: NavigationDefinition[] = [
+  {
+    label: "Tøj & Mode",
+    slug: "toej-og-mode",
+    heroImage: "https://images.unsplash.com/photo-1496747611176-843222e1e57c?auto=format&fit=crop&w=1800&q=80",
+    query: { tags: ["børnetøj"] },
+    children: [
+      { label: "Dame", slug: "dame", query: { query: "dame tøj kjoler jakker mode" } },
+      { label: "Herre", slug: "herre", query: { query: "herre tøj skjorter jakker mode" } },
+      { label: "Børn & Baby", slug: "boern-og-baby", query: { query: "børn baby tøj" } },
+      { label: "Sport & Activewear", slug: "sport-og-activewear", query: { query: "sport activewear træning tøj" } },
+      { label: "Accessories", slug: "accessories", query: { query: "accessories tasker bælter mode" } }
+    ]
+  },
+  {
+    label: "Sko",
+    slug: "sko",
+    heroImage: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=1800&q=80",
+    query: { query: "Nike sko sneakers" },
+    children: [
+      { label: "Dame sko", slug: "dame-sko", query: { query: "dame sko sneakers støvler" } },
+      { label: "Herre sko", slug: "herre-sko", query: { query: "herre sko sneakers støvler" } },
+      { label: "Børnesko", slug: "boernesko", query: { query: "børn sko sneakers sandaler" } },
+      { label: "Sportssko", slug: "sportssko", query: { query: "sportssko løbesko træning" } },
+      { label: "Special", slug: "special", query: { query: "special sko sikkerhedssko vandresko" } }
+    ]
+  },
+  {
+    label: "Bolig & Indretning",
+    slug: "bolig-og-indretning",
+    heroImage: "https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=1800&q=80",
+    query: { tags: ["bolig"] },
+    children: [
+      { label: "Møbler", slug: "moebler", query: { query: "møbler sofa stol bord" } },
+      { label: "Belysning", slug: "belysning", query: { query: "lampe belysning bolig" } },
+      { label: "Tekstiler", slug: "tekstiler", query: { query: "tekstiler puder tæpper gardiner" } },
+      { label: "Køkkenudstyr", slug: "koekkenudstyr", query: { query: "køkkenudstyr service glas gryder" } },
+      { label: "Dekoration & Kunst", slug: "dekoration-og-kunst", query: { query: "kunst dekoration bolig design" } }
+    ]
+  },
+  {
+    label: "Elektronik",
+    slug: "elektronik",
+    heroImage: "https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1800&q=80",
+    query: { tags: ["elektronik"] },
+    children: [
+      { label: "Computere & Tablets", slug: "computere-og-tablets", query: { query: "computer tablet laptop" } },
+      { label: "Mobil & Tilbehør", slug: "mobil-og-tilbehoer", query: { query: "mobil telefon cover oplader" } },
+      { label: "TV & Lyd", slug: "tv-og-lyd", query: { query: "tv lyd højtaler headset" } },
+      { label: "Gaming", slug: "gaming", query: { query: "gaming konsol controller spil" } },
+      { label: "Smart Home", slug: "smart-home", query: { query: "smart home lys sensor kamera" } }
+    ]
+  },
+  {
+    label: "Børn & Legetøj",
+    slug: "boern-og-legetoej",
+    heroImage: "https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?auto=format&fit=crop&w=1800&q=80",
+    query: { tags: ["legetøj "] },
+    children: [
+      { label: "Legetøj", slug: "legetoej", query: { query: "legetøj bamser figurer spil" } },
+      { label: "Babyudstyr", slug: "babyudstyr", query: { query: "babyudstyr barnevogn autostol" } },
+      { label: "Børnemøbler", slug: "boernemoebler", query: { query: "børnemøbler seng stol bord" } },
+      { label: "Udendørs leg", slug: "udendoers-leg", query: { query: "udendørs leg trampolin sandkasse" } },
+      { label: "Læring & Kreativitet", slug: "laering-og-kreativitet", query: { query: "læring kreativitet hobby børn" } }
+    ]
+  },
+  {
+    label: "Sport & Fritid",
+    slug: "sport-og-fritid",
+    heroImage: "https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&w=1800&q=80",
+    query: { tags: ["sport-fritid"] },
+    children: [
+      { label: "Fitness & Træning", slug: "fitness-og-traening", query: { query: "fitness træning sport" } },
+      { label: "Outdoor & Camping", slug: "outdoor-og-camping", query: { query: "outdoor camping vandring telt" } },
+      { label: "Cykler & Tilbehør", slug: "cykler-og-tilbehoer", query: { query: "cykler cykelhjelm cykeltilbehør" } },
+      { label: "Vandsport", slug: "vandsport", query: { query: "vandsport svømning paddleboard" } },
+      { label: "Hobby & DIY", slug: "hobby-og-diy", query: { query: "hobby diy værktøj kreativ" } }
+    ]
+  },
+  {
+    label: "Skønhed & Personlig Pleje",
+    slug: "skoenhed-og-personlig-pleje",
+    heroImage: "https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?auto=format&fit=crop&w=1800&q=80",
+    query: { query: "skønhed makeup hudpleje" },
+    children: [
+      { label: "Hudpleje", slug: "hudpleje", query: { query: "hudpleje creme serum rens" } },
+      { label: "Hårpleje", slug: "haarpleje", query: { query: "hårpleje shampoo balsam styling" } },
+      { label: "Makeup", slug: "makeup", query: { query: "makeup kosmetik skønhed" } },
+      { label: "Parfume", slug: "parfume", query: { query: "parfume duft fragrance" } },
+      { label: "Personlig pleje", slug: "personlig-pleje", query: { query: "personlig pleje barbering hygiene" } }
+    ]
+  },
+  {
+    label: "Smykker & Ure",
+    slug: "smykker-og-ure",
+    heroImage: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?auto=format&fit=crop&w=1800&q=80",
+    query: { query: "smykker ure accessories" },
+    children: [
+      { label: "Smykker", slug: "smykker", query: { query: "smykker ring halskæde armbånd" } },
+      { label: "Ure", slug: "ure", query: { query: "ure smartwatch klassisk ur" } },
+      { label: "Luksusvarer", slug: "luksusvarer", query: { query: "luksusvarer designer premium" } }
+    ]
+  },
+  {
+    label: "Bøger, Medier & Samlerobjekter",
+    slug: "boeger-medier-og-samlerobjekter",
+    heroImage: "https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?auto=format&fit=crop&w=1800&q=80",
+    query: { query: "bøger medier samlerobjekter" },
+    children: [
+      { label: "Bøger", slug: "boeger", query: { query: "bøger roman fagbog børnebog" } },
+      { label: "Film & Musik", slug: "film-og-musik", query: { query: "film musik dvd vinyl" } },
+      { label: "Spil", slug: "spil", query: { query: "spil brætspil konsolspil" } },
+      { label: "Samlerobjekter", slug: "samlerobjekter", query: { query: "samlerobjekter figurer vintage" } }
+    ]
+  },
+  {
+    label: "Bil & Transport",
+    slug: "bil-og-transport",
+    heroImage: "https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1800&q=80",
+    query: { query: "bil transport tilbehør" },
+    children: [
+      { label: "Reservedele", slug: "reservedele", query: { query: "reservedele bil dele" } },
+      { label: "Tilbehør", slug: "tilbehoer", query: { query: "biltilbehør måtter holder" } },
+      { label: "Cykler & el-løbehjul", slug: "cykler-og-el-loebehjul", query: { query: "cykler el-løbehjul transport" } },
+      { label: "Autopleje", slug: "autopleje", query: { query: "autopleje voks rengøring bil" } }
+    ]
+  },
+  {
+    label: "Kontor & Erhverv",
+    slug: "kontor-og-erhverv",
+    heroImage: "https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1800&q=80",
+    query: { query: "kontor erhverv udstyr" },
+    children: [
+      { label: "Kontorudstyr", slug: "kontorudstyr", query: { query: "kontorudstyr papir printer stol" } },
+      { label: "Lager & logistik", slug: "lager-og-logistik", query: { query: "lager logistik reol emballage" } },
+      { label: "Butiksinventar", slug: "butiksinventar", query: { query: "butiksinventar display kasseapparat" } },
+      { label: "Industrielt udstyr", slug: "industrielt-udstyr", query: { query: "industrielt udstyr maskiner værktøj" } }
+    ]
+  },
+  {
+    label: "Diverse & Specialvarer",
+    slug: "diverse-og-specialvarer",
+    heroImage: "https://images.unsplash.com/photo-1516975080664-ed2fc6a32937?auto=format&fit=crop&w=1800&q=80",
+    query: { query: "vintage antik specialvarer" },
+    children: [
+      { label: "Vintage & Antik", slug: "vintage-og-antik", query: { query: "vintage antik retro" } },
+      { label: "Restpartier", slug: "restpartier", query: { query: "restpartier outlet tilbud" } },
+      { label: "Upcycle materialer", slug: "upcycle-materialer", query: { query: "upcycle materialer genbrug" } },
+      { label: "Ukategoriseret", slug: "ukategoriseret", query: { query: "ukategoriseret diverse" } }
+    ]
+  }
+];

package/examples/shop/src/product.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="da">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Produkt | Orderly Example Shop</title>
+    <!-- orderly-head-includes -->
+  </head>
+  <body>
+    <!-- orderly-body-start-includes -->
+    <orderly-product-detail-page
+      add-label="Læg i kurven"
+      loading-label="Indlæser produkt..."
+      not-found-label="Produktet blev ikke fundet."
+      error-label="Produktet kunne ikke indlæses.">
+      <div slot="utility" class="shop-utility-strip" aria-label="Kundefordele">
+        <span>Gratis levering over 499 kr.</span>
+        <span>30 dages returret</span>
+        <span>Sikker betaling</span>
+      </div>
+    </orderly-product-detail-page>
+    <!-- orderly-body-end-includes -->
+  </body>
+</html>

package/examples/shop/src/templates/page-layouts.html

@@ -0,0 +1,162 @@
+<template data-orderly-template="layout" data-orderly-for="home-page">
+  <orderly-page-layout>
+    <div slot="utility" data-orderly-slot="utility"></div>
+    <a slot="header" class="orderly-home-page__brand" id="brandLink" href="/">
+      <span data-orderly-bind="brandLabel"></span>
+    </a>
+    <orderly-search-box slot="header-actions" id="homeSearch" mode="icon"></orderly-search-box>
+    <orderly-basket-icon slot="header-actions" id="basketIcon"></orderly-basket-icon>
+    <div slot="header-actions" data-orderly-slot="header-actions"></div>
+    <orderly-navigation slot="primary-nav" id="homeNavigation" layout="horizontal" aria-label="Hovednavigation"></orderly-navigation>
+    <div slot="content-before" data-orderly-slot="content-before"></div>
+    <section slot="content" class="orderly-home-page">
+      <header class="orderly-home-page__intro">
+        <p class="orderly-home-page__eyebrow" data-orderly-bind="eyebrow"></p>
+        <h1 data-orderly-bind="title"></h1>
+      </header>
+      <div id="homeRails" class="orderly-home-page__rails" data-orderly-slot="rails"></div>
+    </section>
+    <div slot="content-after" data-orderly-slot="content-after"></div>
+    <orderly-shop-footer slot="footer"></orderly-shop-footer>
+    <div slot="footer" data-orderly-slot="footer"></div>
+    <aside slot="overlay" class="orderly-category-page__basket-panel" id="basketPanel" hidden>
+      <div class="orderly-category-page__basket-panel-header">
+        <h2>Kurv</h2>
+        <button id="basketClose" type="button">Luk</button>
+      </div>
+      <orderly-basket id="basket"></orderly-basket>
+    </aside>
+    <dialog slot="overlay" class="orderly-category-page__product-dialog" id="productDialog">
+      <div class="orderly-category-page__product-dialog-actions">
+        <a class="orderly-category-page__product-dialog-expand" id="productExpand" href="/product.html" aria-label="Åbn produktside" title="Åbn produktside" hidden>
+          <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true" width="20" height="20">
+            <path d="M8 7H6.75A1.75 1.75 0 0 0 5 8.75v8.5c0 .97.78 1.75 1.75 1.75h8.5c.97 0 1.75-.78 1.75-1.75V16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M13 5h6v6M12 12l7-7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
+          </svg>
+        </a>
+        <button class="orderly-category-page__product-dialog-close" id="productClose" type="button" aria-label="Luk" title="Luk">
+          <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true" width="20" height="20">
+            <path d="m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z" fill="currentColor"></path>
+          </svg>
+        </button>
+      </div>
+      <orderly-product-page id="productDetail" add-label="Læg i kurven"></orderly-product-page>
+    </dialog>
+    <div slot="overlay" data-orderly-slot="overlay"></div>
+  </orderly-page-layout>
+</template>
+
+<template data-orderly-template="layout" data-orderly-for="category-page">
+  <orderly-page-layout>
+    <div slot="utility" data-orderly-slot="utility"></div>
+    <a slot="header" class="orderly-category-page__brand" id="brandLink" href="/">
+      <span data-orderly-bind="brandLabel"></span>
+    </a>
+    <orderly-search-box slot="header-actions" id="categorySearch" mode="icon" for="productGrid" data-orderly-bind="searchPlaceholder"></orderly-search-box>
+    <orderly-basket-icon slot="header-actions" id="basketIcon"></orderly-basket-icon>
+    <div slot="header-actions" data-orderly-slot="header-actions"></div>
+    <orderly-navigation slot="primary-nav" id="categoryNavigation" layout="horizontal" aria-label="Hovednavigation"></orderly-navigation>
+    <div slot="content-before" data-orderly-slot="content-before"></div>
+    <orderly-collection-page slot="content" id="collectionPage">
+      <template data-orderly-template="grid">
+        <orderly-product-grid id="productGrid" paging="dynamic">
+          <template data-orderly-template="empty">
+            <p class="orderly-category-page__empty-state" data-orderly-bind="emptyLabel"></p>
+          </template>
+          <template data-orderly-template="product">
+            <orderly-product-tile class="orderly-category-page__product-card" add-label="Læg i kurven" remove-label="Fjern fra kurven"></orderly-product-tile>
+          </template>
+        </orderly-product-grid>
+      </template>
+    </orderly-collection-page>
+    <div slot="content-after" data-orderly-slot="content-after"></div>
+    <orderly-shop-footer slot="footer"></orderly-shop-footer>
+    <div slot="footer" data-orderly-slot="footer"></div>
+    <aside slot="overlay" class="orderly-category-page__basket-panel" id="basketPanel" hidden>
+      <div class="orderly-category-page__basket-panel-header">
+        <h2>Kurv</h2>
+        <button id="basketClose" type="button">Luk</button>
+      </div>
+      <orderly-basket id="basket" empty-label="Kurven er tom." continue-label="Fortsæt med at handle" quantity-label="Antal" remove-label="Fjern"></orderly-basket>
+    </aside>
+    <dialog slot="overlay" class="orderly-category-page__product-dialog" id="productDialog">
+      <div class="orderly-category-page__product-dialog-actions">
+        <a class="orderly-category-page__product-dialog-expand" id="productExpand" href="/product.html" aria-label="Åbn produktside" title="Åbn produktside" hidden>
+          <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true" width="20" height="20">
+            <path d="M8 7H6.75A1.75 1.75 0 0 0 5 8.75v8.5c0 .97.78 1.75 1.75 1.75h8.5c.97 0 1.75-.78 1.75-1.75V16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
+            <path d="M13 5h6v6M12 12l7-7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
+          </svg>
+        </a>
+        <button class="orderly-category-page__product-dialog-close" id="productClose" type="button" aria-label="Luk" title="Luk">
+          <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true" width="20" height="20">
+            <path d="m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z" fill="currentColor"></path>
+          </svg>
+        </button>
+      </div>
+      <orderly-product-page id="productDetail" add-label="Læg i kurven"></orderly-product-page>
+    </dialog>
+    <div slot="overlay" data-orderly-slot="overlay"></div>
+  </orderly-page-layout>
+</template>
+
+<template data-orderly-template="layout" data-orderly-for="product-detail-page">
+  <orderly-page-layout>
+    <div slot="utility" data-orderly-slot="utility"></div>
+    <a slot="header" class="orderly-product-detail-page__brand" id="brandLink" href="/">
+      <span data-orderly-bind="brandLabel"></span>
+    </a>
+    <orderly-basket-icon slot="header-actions" id="basketIcon"></orderly-basket-icon>
+    <div slot="header-actions" data-orderly-slot="header-actions"></div>
+    <orderly-navigation slot="primary-nav" id="productNavigation" layout="horizontal" aria-label="Hovednavigation"></orderly-navigation>
+    <div slot="content-before" data-orderly-slot="content-before"></div>
+    <section slot="content" class="orderly-product-detail-page">
+      <p class="orderly-product-detail-page__status" data-orderly-bind="status"></p>
+      <section class="orderly-product-detail-page__product" id="productContainer" aria-live="polite">
+        <orderly-product-page id="productDetail"></orderly-product-page>
+      </section>
+    </section>
+    <div slot="content-after" data-orderly-slot="content-after"></div>
+    <orderly-shop-footer slot="footer"></orderly-shop-footer>
+    <div slot="footer" data-orderly-slot="footer"></div>
+    <aside slot="overlay" class="orderly-product-detail-page__basket-panel" id="basketPanel" hidden>
+      <div class="orderly-product-detail-page__basket-panel-header">
+        <h2>Kurv</h2>
+        <button id="basketClose" type="button">Luk</button>
+      </div>
+      <orderly-basket id="basket"></orderly-basket>
+    </aside>
+    <div slot="overlay" data-orderly-slot="overlay"></div>
+  </orderly-page-layout>
+</template>
+
+<template data-orderly-template="layout" data-orderly-for="checkout-page">
+  <orderly-page-layout>
+    <div slot="utility" data-orderly-slot="utility"></div>
+    <a slot="header" class="orderly-checkout-page__brand" id="brandLink" href="/">
+      <span data-orderly-bind="brandLabel"></span>
+    </a>
+    <div slot="header-actions" data-orderly-slot="header-actions"></div>
+    <orderly-navigation slot="primary-nav" id="checkoutNavigation" layout="horizontal" aria-label="Hovednavigation"></orderly-navigation>
+    <div slot="content-before" data-orderly-slot="content-before"></div>
+    <section slot="content" class="orderly-checkout-page">
+      <header class="orderly-checkout-page__header">
+        <h1 data-orderly-bind="title"></h1>
+        <p data-orderly-bind="description"></p>
+      </header>
+      <div class="orderly-checkout-page__grid">
+        <section class="orderly-checkout-page__card" aria-labelledby="checkoutFormTitle">
+          <h2 id="checkoutFormTitle" class="orderly-checkout-page__visually-hidden">Betaling</h2>
+          <orderly-checkout id="checkout"></orderly-checkout>
+        </section>
+        <aside class="orderly-checkout-page__card orderly-checkout-page__card--summary" aria-labelledby="checkoutBasketTitle">
+          <h2 id="checkoutBasketTitle" data-orderly-bind="orderTitle"></h2>
+          <orderly-basket id="basket" checkout-action="hide"></orderly-basket>
+        </aside>
+      </div>
+    </section>
+    <div slot="content-after" data-orderly-slot="content-after"></div>
+    <orderly-shop-footer slot="footer"></orderly-shop-footer>
+    <div slot="footer" data-orderly-slot="footer"></div>
+    <div slot="overlay" data-orderly-slot="overlay"></div>
+  </orderly-page-layout>
+</template>

package/examples/shop/src/templates/shop-footer.html

@@ -0,0 +1,76 @@
+<template data-orderly-template="footer" data-orderly-for="shop-footer">
+  <div class="orderly-shop-footer" aria-label="Sidefod">
+    <div class="orderly-shop-footer__brand">
+      <a class="orderly-shop-footer__logo" href="/" aria-label="Orderly Example Shop">
+        <img class="orderly-shop-footer__logo-image" src="https://orderly.shop/home/App_Icon.svg" alt="Orderly Example Shop">
+      </a>
+      <p class="orderly-shop-footer__about">
+        En demo webshop bygget med Orderly web components. Indholdet er eksempeldata, så layout, navigation, kurv og checkout kan prøves uden en shopspecifik frontend-stack.
+      </p>
+    </div>
+
+    <section class="orderly-shop-footer__section" aria-labelledby="exampleFooterAddress">
+      <h2 id="exampleFooterAddress" class="orderly-shop-footer__heading">Adresse</h2>
+      <address class="orderly-shop-footer__address">
+        <span>Orderly Example Shop ApS</span>
+        <span>Demo Allé 12</span>
+        <span>8000 Aarhus C</span>
+        <span>Danmark</span>
+      </address>
+    </section>
+
+    <section class="orderly-shop-footer__section" aria-labelledby="exampleFooterContact">
+      <h2 id="exampleFooterContact" class="orderly-shop-footer__heading">Kontakt</h2>
+      <ul class="orderly-shop-footer__list">
+        <li class="orderly-shop-footer__contact-item">
+          <span class="orderly-shop-footer__contact-label">Email</span>
+          <a class="orderly-shop-footer__contact-value" href="mailto:hello@example.orderly.shop">hello@example.orderly.shop</a>
+        </li>
+        <li class="orderly-shop-footer__contact-item">
+          <span class="orderly-shop-footer__contact-label">Telefon</span>
+          <a class="orderly-shop-footer__contact-value" href="tel:+4512345678">+45 12 34 56 78</a>
+        </li>
+        <li class="orderly-shop-footer__contact-item">
+          <span class="orderly-shop-footer__contact-label">Kundeservice</span>
+          <a class="orderly-shop-footer__contact-value" href="https://support.example.orderly.shop">support.example.orderly.shop</a>
+        </li>
+      </ul>
+    </section>
+
+    <section class="orderly-shop-footer__section" aria-labelledby="exampleFooterHours">
+      <h2 id="exampleFooterHours" class="orderly-shop-footer__heading">Åbningstider</h2>
+      <dl class="orderly-shop-footer__hours">
+        <div class="orderly-shop-footer__hours-row">
+          <dt class="orderly-shop-footer__hours-label">Mandag - fredag</dt>
+          <dd class="orderly-shop-footer__hours-value">09.00 - 17.00</dd>
+        </div>
+        <div class="orderly-shop-footer__hours-row">
+          <dt class="orderly-shop-footer__hours-label">Lørdag</dt>
+          <dd class="orderly-shop-footer__hours-value">10.00 - 14.00</dd>
+        </div>
+        <div class="orderly-shop-footer__hours-row">
+          <dt class="orderly-shop-footer__hours-label">Søndag</dt>
+          <dd class="orderly-shop-footer__hours-value">Lukket</dd>
+        </div>
+      </dl>
+    </section>
+
+    <section class="orderly-shop-footer__section" aria-labelledby="exampleFooterInformation">
+      <h2 id="exampleFooterInformation" class="orderly-shop-footer__heading">Information</h2>
+      <ul class="orderly-shop-footer__list">
+        <li class="orderly-shop-footer__link-item">
+          <a class="orderly-shop-footer__link" href="/forretningsbetingelser.html">Forretningsbetingelser</a>
+        </li>
+        <li class="orderly-shop-footer__link-item">
+          <a class="orderly-shop-footer__link" href="/information/levering-og-retur/">Levering og retur</a>
+        </li>
+        <li class="orderly-shop-footer__link-item">
+          <a class="orderly-shop-footer__link" href="/information/privatlivspolitik/">Privatlivspolitik</a>
+        </li>
+        <li class="orderly-shop-footer__link-item">
+          <a class="orderly-shop-footer__link" href="/information/kontakt/">Kontakt os</a>
+        </li>
+      </ul>
+    </section>
+  </div>
+</template>

package/examples/shop/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "baseUrl": ".",
+    "paths": {
+      "@orderlyshop/core-client": [
+        "../../../core-client/src/index.ts"
+      ],
+      "@orderlyshop/core-client/*": [
+        "../../../core-client/src/*"
+      ],
+      "@orderlyshop/web-components": [
+        "../../src/index.ts"
+      ],
+      "@orderlyshop/web-components/*": [
+        "../../src/*.ts"
+      ]
+    },
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": [
+      "vitest/globals"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}

package/examples/shop/vite.config.mjs

@@ -0,0 +1,190 @@
+import { existsSync, readFileSync, readdirSync, statSync } from "node:fs";
+import { dirname, relative, resolve } from "node:path";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  server: {
+    host: "localhost",
+    port: 61677,
+    strictPort: true
+  },
+  preview: {
+    host: "localhost",
+    port: 61677,
+    strictPort: true
+  },
+  resolve: {
+    alias: sourceAliases()
+  },
+  plugins: [htmlIncludes(), sourceHtmlDevServer(), rootHtmlOutput()],
+  build: {
+    rollupOptions: {
+      input: htmlInputs()
+    }
+  }
+});
+
+function sourceAliases() {
+  const webComponentsSource = resolve(process.cwd(), "../../src/index.ts");
+  const coreClientSource = resolve(process.cwd(), "../../../core-client/src/index.ts");
+  const coreClientWebSource = resolve(process.cwd(), "../../../core-client/src/web.ts");
+  if (!existsSync(webComponentsSource)) {
+    return {};
+  }
+  return [
+    { find: /^@orderlyshop\/core-client\/web$/, replacement: coreClientWebSource },
+    { find: /^@orderlyshop\/core-client$/, replacement: coreClientSource },
+    { find: "@orderlyshop/web-components", replacement: webComponentsSource }
+  ];
+}
+
+function htmlIncludes() {
+  return {
+    name: "orderly-html-includes",
+    transformIndexHtml: {
+      order: "pre",
+      handler(html) {
+        return html
+          .replace("<!-- orderly-head-includes -->", include("head.html"))
+          .replace("<!-- orderly-body-start-includes -->", include("body-start.html"))
+          .replace("<!-- orderly-body-end-includes -->", include("body-end.html"));
+      }
+    }
+  };
+}
+
+function sourceHtmlDevServer() {
+  return {
+    name: "orderly-source-html-dev-server",
+    configureServer(server) {
+      server.middlewares.use(async (request, response, next) => {
+        const file = sourceHtmlFileForUrl(request.url ?? "/");
+        if (!file) {
+          next();
+          return;
+        }
+
+        try {
+          const html = await server.transformIndexHtml(request.url ?? "/", readFileSync(file, "utf8"));
+          response.statusCode = 200;
+          response.setHeader("Content-Type", "text/html");
+          response.end(html);
+        } catch (error) {
+          next(error);
+        }
+      });
+    }
+  };
+}
+
+function rootHtmlOutput() {
+  return {
+    name: "orderly-root-html-output",
+    enforce: "post",
+    generateBundle(_, bundle) {
+      for (const [fileName, output] of Object.entries(bundle)) {
+        if (!fileName.startsWith("src/") || !fileName.endsWith(".html")) {
+          continue;
+        }
+        delete bundle[fileName];
+        output.fileName = fileName.slice("src/".length);
+        bundle[output.fileName] = output;
+      }
+    }
+  };
+}
+
+function include(fileName) {
+  return includeFile(resolve(process.cwd(), "src/includes", fileName));
+}
+
+function includeFile(filePath) {
+  return expandTemplateIncludes(readFileSync(filePath, "utf8").trim(), dirname(filePath));
+}
+
+function expandTemplateIncludes(html, baseDir) {
+  return html.replace(/<!--\s*orderly-include-template:\s*([^>]+?)\s*-->/g, (_, templatePath) => {
+    return includeFile(resolve(baseDir, templatePath.trim()));
+  });
+}
+
+function htmlInputs(root = process.cwd()) {
+  const inputs = {};
+  for (const file of listHtmlFiles(root)) {
+    const name = htmlInputName(root, file);
+    inputs[name] = file;
+  }
+  return inputs;
+}
+
+function htmlInputName(root, file) {
+  const name = relative(root, file).replace(/\\/g, "/").replace(/\.html$/, "");
+  return name.startsWith("src/") ? name.slice("src/".length) : name;
+}
+
+function listHtmlFiles(dir) {
+  const files = [];
+  for (const entry of readdirSync(dir)) {
+    if (entry === "dist" || entry === "node_modules") {
+      continue;
+    }
+    const fullPath = resolve(dir, entry);
+    if (isHtmlPartial(fullPath)) {
+      continue;
+    }
+    const stat = statSync(fullPath);
+    if (stat.isDirectory()) {
+      files.push(...listHtmlFiles(fullPath));
+    } else if (entry.endsWith(".html")) {
+      files.push(fullPath);
+    }
+  }
+  return files;
+}
+
+function isHtmlPartial(file) {
+  const path = relative(process.cwd(), file);
+  return path.startsWith("src/includes") || path.startsWith("src/templates");
+}
+
+function sourceHtmlFileForUrl(url) {
+  const requestPath = safeHtmlRequestPath(url);
+  if (!requestPath) {
+    return undefined;
+  }
+  const categoryTemplate = resolve(process.cwd(), "src/category.html");
+  if (requestPath.startsWith("categories/") && requestPath.endsWith("index.html") && existsSync(categoryTemplate)) {
+    return categoryTemplate;
+  }
+  const file = resolve(process.cwd(), "src", requestPath);
+  if (!file.startsWith(resolve(process.cwd(), "src")) || isHtmlPartial(file) || !existsSync(file)) {
+    return undefined;
+  }
+  return statSync(file).isFile() ? file : undefined;
+}
+
+function safeHtmlRequestPath(url) {
+  const [rawPath] = url.split(/[?#]/, 1);
+  let path;
+  try {
+    path = decodeURIComponent(rawPath || "/");
+  } catch {
+    return undefined;
+  }
+  if (path.includes("..")) {
+    return undefined;
+  }
+  if (path === "/") {
+    return "index.html";
+  }
+  if (path.endsWith("/")) {
+    return `${path.slice(1)}index.html`;
+  }
+  if (path.startsWith("/categories/") && !path.includes(".")) {
+    return `${path.slice(1)}/index.html`;
+  }
+  if (path.endsWith(".html")) {
+    return path.slice(1);
+  }
+  return undefined;
+}