@saasira/holi 0.1.5 → 0.1.6

package/dist/holi.html

@@ -128,6 +128,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">
@@ -263,6 +272,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">
@@ -286,6 +325,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">
@@ -312,6 +366,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">
@@ -321,12 +393,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>