npm - @saasira/holi - Versions diffs - 0.1.5 → 0.1.9 - Mend

@saasira/holi 0.1.5 → 0.1.9

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 (7) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,46 @@
 All notable changes to this project are documented in this file.
+## [0.1.9] - 2026-03-21
+### Changed
+- Updated example smoke assertions to match the current declarative theme and locale example sources so CI release validation passes again.
+### Validation
+- Verified with `npm run ci:smoke`.
+## [0.1.8] - 2026-03-21
+### Added
+- Added a template-driven `include` component that fetches HTML fragments from relative or absolute sources and injects them in place.
+### Changed
+- Updated the `page-layout.html` example to load its header and footer content through reusable included fragments.
+### Validation
+- Verified with `npm run build` and `npm run build:examples`.
+## [0.1.7] - 2026-03-21
+### Added
+- Added declarative theme registration with a shared theme registry and release-aware page asset automation for `page[release]`.
+- Added declarative locale registration with a shared locale registry and default-English document language fallback.
+### Changed
+- Scoped bundled component styles to the default theme so custom themes can provide their own component styling cleanly.
+- Updated theme and locale switching flows to resolve through centralized registries instead of directly mutating document attributes ad hoc.
+### Validation
+- Verified with `npm run build`.
 ## [0.1.5] - 2026-03-19
 ### Added

package/README.md CHANGED Viewed

@@ -224,11 +224,22 @@ Rules:
 - Direct `region[name]` inside a block fills matching nested slots inside that block's assigned subtree.
 - Missing slots are empty by default.
 - Set `inherit-missing="true"` on `page` to keep fallback slot content.
+- Use `renderer="browser"` on source pages to show the built-in placeholder until runtime composition completes.
+- After browser or compiler rendering completes, both `renderer` and `rendered` should be removed from the final page node.
 - Use `layout-src` for an explicit layout file or `layouts-base` for a layout folder.
+- Page-level attributes `title`, `description`, `canonical`, and `lang` are applied to the real document metadata.
+- Page-level `theme` is applied to the real `<body>` element for theme scoping and switching.
 - Use `<layout-head data-layout-head="true">` for shared head assets in layouts.
 - Use `<tail data-layout-tail="true">` for deferred body-end assets in layouts.
 - Non-script nodes from `layout-head` go to the real HTML `<head>`.
 - Nodes from `tail` are appended near the end of `<body>`.
+- Built-in region `meta` always targets the real HTML `<head>`.
+- Built-in regions `styles` and `page-styles` always target the real HTML `<head>`, even when the layout does not declare those slots.
+- Built-in regions `scripts` and `page-scripts` always target the end of `<body>`, even when the layout does not declare those slots.
+- Use `styles` for external asset nodes such as `<link rel="stylesheet" href="...">`.
+- Use `scripts` for external asset nodes such as `<script src="..."></script>`.
+- Use `page-styles` for inline `<style>` tags.
+- Use `page-scripts` for inline `<script>` tags.
 ## Holi vs React / Angular / Vue
@@ -262,3 +273,36 @@ Practical summary:
 - Auto init can be disabled with `window.HoliAutoInit = false` before loading `dist/holi.js`.
 - Component templates are loaded from `dist/components.html` (with runtime fallback paths).
 - Layout templates are loaded from `dist/layouts.html` (with runtime fallback paths).
+## OfflineIndicator
+`OfflineIndicator` provides a template-driven connectivity banner with automatic polling and queue count display.
+Supported declaration styles:
+- `<offline></offline>`
+- `<section component="offline"></section>`
+- `<section role="offline"></section>`
+- `[data-offline]`
+Useful attributes:
+- `scope="page|block|inline"`
+- `position="top-left|top-right|bottom-left|bottom-right|top-center|bottom-center"`
+- `host="#selector"` for `scope="block"`
+- `ping-url="/api/ping"`
+- `heartbeat-ms="2500"`
+- `probe-timeout-ms="1800"`
+- `duration="1200"`
+- `max-attempts="4"`
+Instance/static helpers:
+- `el.offlineIndicator.retryConnection()`
+- `el.offlineIndicator.simulateOffline()`
+- `el.offlineIndicator.simulateOnline()`
+- `window.OfflineIndicator.queue(payload)`
+- `window.OfflineIndicator.clearQueue()`
+- `window.OfflineIndicator.create(options)`
+See [offline example](/D:/Work/Self/Holi/src/examples/pages/offline.html) for page-scoped, block-scoped, and queue-sync scenarios.

package/dist/components.html CHANGED Viewed

@@ -96,6 +96,15 @@
 </template>
+<!-- Template: themeswitcher.html src/templates/components/themeswitcher.html -->
+<template id="themeswitcher-template">
+    <section class="holi-themeswitcher">
+        <label data-role="theme-label" for="holi-theme-switcher-select">@{label}</label>
+        <select id="holi-theme-switcher-select" data-role="theme-select"></select>
+    </section>
+</template>
 <!-- Template: textarea.html src/templates/components/textarea.html -->
 <template id="textarea-field-template">
     <div class="holi-textarea" role="group">
@@ -231,6 +240,36 @@
 </template>
+<!-- Template: refresh.html src/templates/components/refresh.html -->
+<template id="refresh-template">
+    <section class="holi-refresh" data-state="idle" tabindex="0">
+        <div class="holi-refresh__handle" data-role="handle" aria-hidden="true">
+            <div class="holi-refresh__icon">
+                <span class="holi-refresh__icon-arrow"></span>
+                <span class="holi-refresh__icon-spinner"></span>
+            </div>
+            <div class="holi-refresh__label" data-role="label">Pull to refresh</div>
+            <div class="holi-refresh__progress">
+                <span class="holi-refresh__progress-bar" data-role="progress"></span>
+            </div>
+        </div>
+        <div class="holi-refresh__content" data-role="content"></div>
+    </section>
+</template>
+<!-- Template: rating.html src/templates/components/rating.html -->
+<template id="rating-template">
+    <div class="rating" data-role="rating-root" data-rating="0">
+        <i class="fa fa-star-o" data-value="1" aria-hidden="true"></i>
+        <i class="fa fa-star-o" data-value="2" aria-hidden="true"></i>
+        <i class="fa fa-star-o" data-value="3" aria-hidden="true"></i>
+        <i class="fa fa-star-o" data-value="4" aria-hidden="true"></i>
+        <i class="fa fa-star-o" data-value="5" aria-hidden="true"></i>
+    </div>
+</template>
 <!-- Template: radio.html src/templates/components/radio.html -->
 <template id="radio-group-template">
     <fieldset class="holi-radio-group">
@@ -254,6 +293,21 @@
 </template>
+<!-- Template: pwa.html src/templates/components/pwa.html -->
+<!-- Theme color meta (dynamic via JS) -->
+<meta name="theme-color" content="#2563eb">
+<!-- iOS Safari -->
+<link rel="apple-touch-icon" href="/icons/icon-192.png">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="default">
+<meta name="apple-mobile-web-app-title" content="HF Components">
+<!-- Microsoft/Edge -->
+<meta name="msapplication-TileImage" content="/icons/icon-192.png">
+<meta name="msapplication-TileColor" content="#2563eb">
 <!-- Template: progress.html src/templates/components/progress.html -->
 <template id="progress">
     <section class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
@@ -280,6 +334,24 @@
 </template>
+<!-- Template: offline.html src/templates/components/offline.html -->
+<template id="offline-template">
+    <section class="holi-offline-indicator" data-status="online" data-visible="false" hidden aria-live="polite" aria-atomic="true" role="status">
+        <div class="holi-offline-indicator__badge" aria-hidden="true">
+            <span class="holi-offline-indicator__dot"></span>
+        </div>
+        <div class="holi-offline-indicator__message">
+            <span class="holi-offline-indicator__status" data-role="status-text">Offline</span>
+            <span class="holi-offline-indicator__meta">
+                <span class="holi-offline-indicator__sync" data-role="sync-text">0 pending</span>
+                <span class="holi-offline-indicator__attempts" data-role="attempt-text">Retry 0/5</span>
+            </span>
+        </div>
+        <button type="button" class="holi-offline-indicator__retry" data-action="retry" aria-label="Retry connection">Retry</button>
+    </section>
+</template>
 <!-- Template: menubar.html src/templates/components/menubar.html -->
 <template id="menubar-template">
     <nav class="holi-menubar" data-mode="bar" aria-label="Site menu">
@@ -289,12 +361,28 @@
 </template>
+<!-- Template: localeswitcher.html src/templates/components/localeswitcher.html -->
+<template id="localeswitcher-template">
+    <section class="holi-localeswitcher">
+        <label data-role="locale-label" for="holi-locale-switcher-select">@{label}</label>
+        <select id="holi-locale-switcher-select" data-role="locale-select"></select>
+    </section>
+</template>
 <!-- Template: loader.html src/templates/components/loader.html -->
 <template id="loader-template">
     <section class="holi-loader" data-scope="inline" hidden>
         <div class="holi-loader-backdrop"></div>
         <div class="holi-loader-body" role="status" aria-live="polite" aria-atomic="true">
-            <span class="holi-loader-spinner" aria-hidden="true"></span>
+            <span class="holi-loader-spinner" data-role="loader-spinner" data-type="spinner" aria-hidden="true">
+                <span class="holi-loader-spinner-ring" aria-hidden="true"></span>
+                <span class="holi-loader-dots" aria-hidden="true">
+                    <span class="holi-loader-dot"></span>
+                    <span class="holi-loader-dot"></span>
+                    <span class="holi-loader-dot"></span>
+                </span>
+            </span>
             <span class="holi-loader-message" data-role="loader-message">Loading...</span>
         </div>
     </section>
@@ -342,6 +430,12 @@
 </template>
+<!-- Template: include.html src/templates/components/include.html -->
+<template id="include-template">
+    <slot name="fallback"></slot>
+</template>
 <!-- Template: gallery.html src/templates/components/gallery.html -->
 <template id="gallery-template">
     <section class="holi-gallery-root">