add caret and exclamation icons

cdn/icons/all.json

@@ -3,6 +3,14 @@
         "name": "bell",
         "tags": "alert"
     },
+    {
+        "name": "caret",
+        "tags": "left right up down prev next drop select"
+    },
+    {
+        "name": "caret-line",
+        "tags": "prev next"
+    },
     {
         "name": "circle",
         "tags": "round shapes"
@@ -27,6 +35,10 @@
         "name": "equals",
         "tags": "math lines bars"
     },
+    {
+        "name": "exclamation",
+        "tags": "alert warning danger"
+    },
     {
         "name": "facebook",
         "tags": "brands social"

cdn/icons/caret-line.webui

@@ -0,0 +1,3 @@
+WEBUI-ICON-CARET-LINE
+M-5 40Q-25 40 -25 40Q-50 40 -50 40Q-60 40 -55 35Q-30 10 -30 10Q-5 -15 -5 -15Q0 -20 5 -15Q30 10 30 10Q55 35 55 35Q60 40 50 40Q25 40 25 40Q5 40 5 40z
+M-55 -40Q-45 -40 -45 -40Q-35 -40 -35 -40Q-25 -40 -25 -40Q-15 -40 -15 -40Q-5 -40 -5 -40Q5 -40 5 -40Q15 -40 15 -40Q25 -40 25 -40Q35 -40 35 -40Q45 -40 45 -40Q55 -40 55 -40z

cdn/icons/caret.webui

@@ -0,0 +1,2 @@
+WEBUI-ICON-CARET
+M-5 20Q-25 20 -25 20Q-50 20 -50 20Q-60 20 -55 15Q-30 -10 -30 -10Q-5 -35 -5 -35Q0 -40 5 -35Q30 -10 30 -10Q55 15 55 15Q60 20 50 20Q25 20 25 20Q5 20 5 20z

cdn/icons/exclamation.webui

@@ -0,0 +1,3 @@
+WEBUI-ICON-EXCLAMATION
+M0 -50Q-5 -50 -5 -50Q-10 -50 -10 -45Q-10 -40 -10 -40Q-10 -30 -10 -30Q-5 15 -5 15Q-5 20 0 20Q5 20 5 15Q10 -30 10 -30Q10 -40 10 -40Q10 -45 10 -45Q10 -50 5 -50z
+M0 33Q-2 33 -4 34Q-6 35 -7 36Q-9 40 -9 41Q-8 45 -8 45Q-6 48 -5 49Q-1 51 0 50Q3 50 4 49Q7 47 8 45Q9 43 9 40Q8 36 4 34Q1 33 0 33z

cdn/index.html

@@ -77,12 +77,12 @@ <h2 data-subscribe="page-subtitle:innerHTML">Web Component Testing</h2>
         </header>
         <noscript>Javascript is required to view this site</noscript>
         <webui-page-footer copyright="2022" company="Stoic Dreams">
-            <webui-next-page theme="tertiary" family="duotone" data-subscribe="page-next-page"></webui-next-page>
+            <webui-next-page theme="tertiary" data-subscribe="page-next-page"></webui-next-page>
             <webui-flex class="my-3" justify="center">
-                <webui-link href="/about" icon="circle-exclamation" family="duotone">About {APP_NAME}</webui-link>
-                <webui-link href="/contact" icon="messages" family="duotone">Contact {COMPANY_SINGULAR}</webui-link>
-                <webui-link href="/privacy" icon="shield-exclamation" family="duotone">Privacy</webui-link>
-                <webui-link href="/terms" icon="handshake" family="duotone">Terms & Conditions</webui-link>
+                <webui-link href="/about" icon="exclamation|shape:circle|backing|bordered">About {APP_NAME}</webui-link>
+                <webui-link href="/contact" icon="messages">Contact {COMPANY_SINGULAR}</webui-link>
+                <webui-link href="/privacy" icon="exclamation|shape:shield|backing|bordered">Privacy</webui-link>
+                <webui-link href="/terms" icon="handshake">Terms & Conditions</webui-link>
             </webui-flex>
             <webui-stoic-social-links class="mb-2"></webui-stoic-social-links>
         </webui-page-footer>

cdn/webui/alert.js

@@ -52,21 +52,25 @@ webui.define("webui-alert", {
         this.setTheme(theme);
         switch (theme) {
             case "danger":
-                this.icon.setAttribute('icon', 'hexagon-exclamation');
+                this.icon.setAttribute('icon', 'exclamation');
+                this.icon.setAttribute('shape', 'octogon');
                 break;
             case "success":
                 this.icon.setAttribute('icon', 'thumbs-up');
+                this.icon.setAttribute('shape', 'circle');
                 break;
             case "info":
-                this.icon.setAttribute('icon', 'circle-exclamation');
+                this.icon.setAttribute('icon', 'exclamation');
+                this.icon.setAttribute('shape', 'circle');
                 break;
             default:
-                this.icon.setAttribute('icon', 'triangle-exclamation');
+                this.icon.setAttribute('icon', 'exclamation');
+                this.icon.setAttribute('shape', 'triangle');
                 break;
         }
     },
     shadowTemplate: `
-<webui-icon id="icon" icon=""></webui-icon>
+<webui-icon id="icon" icon="" bordered backing></webui-icon>
 <div><slot></slot></div>
 <button id="close"><webui-icon icon="xmark"></webui-icon></button>
 <style type="text/css">

cdn/webui/icon.js

@@ -26,6 +26,7 @@ Stroke line joins: miter|round|bevel
     const cache = {}, waiter = {};
     const srcRoot = webui.getData('appName') === 'MyFi CDN' ? '/icons/' : 'https://cdn.myfi.ws/icons/';
     const defUnused = 'M0 0Q0 0 0 0Q0 0 0 0Q0 0 0 0Q0 0 0 0Q0 0 0 0Q0 0 0 0Q0 0 0 0Q0 0 0 0Q0 0 0 0Q0 0 0 0Q0 0 0 0z';
+    const defShield = 'M-90 -25Q-90 -75 -90 -75Q-40 -75 0 -90Q50 -75 90 -75Q90 -30 90 -30Q90 -20 90 -20Q90 0 90 0Q90 25 60 50Q0 90 0 90Q-60 50 -60 50Q-90 25 -90 0Q-90 -15 -90 -15z';
     const defBadge = 'M-28 68Q0 115 28 68Q86 86 68 28Q115 0 68 -28Q86 -86 28 -68Q1 -115 -28 -68Q-86 -86 -68 -28Q-115 0 -68 28Q-86 86 -28 68Q-28 68 -28 68Q-28 68 -28 68Q-28 68 -28 68z';
     const defCircle = 'M1 -93Q31 -91 53 -76Q76 -59 86 -35Q95 -12 92 13Q89 37 72 59Q58 76 37 86Q10 97 -16 92Q-45 85 -64 68Q-85 47 -92 16Q-96 -10 -87 -34Q-76 -60 -56 -75Q-26 -94 1 -93z';
     const defSquare = 'M0 -95Q80 -95 80 -95Q95 -95 95 -80Q95 0 95 0Q95 80 95 80Q95 95 80 95Q0 95 0 95Q-80 95 -80 95Q-95 95 -95 80Q-95 0 -95 0Q-95 -80 -95 -80Q-95 -95 -80 -95z';
@@ -127,6 +128,9 @@ Stroke line joins: miter|round|bevel
                         case 'circle':
                             t._backPath.setAttribute('d', defCircle);
                             break;
+                        case 'shield':
+                            t._backPath.setAttribute('d', defShield);
+                            break;
                         default:
                             t._backPath.setAttribute('d', defSquare);
                             break;

cdn/webui/link.js

@@ -5,26 +5,27 @@ webui.define('webui-link', {
         t._startIcon = t.template.querySelector('slot[name="start-icon"]');
         t._endIcon = t.template.querySelector('slot[name="end-icon"]');
     },
-    attr: ['href', 'start-icon', 'end-icon', 'start-icon-family', 'end-icon-family'],
+    attr: ['href', 'icon', 'start-icon', 'end-icon'],
     attrChanged: (t, property, value) => {
         switch (property) {
+            case 'icon':
             case 'startIcon':
                 {
                     t.querySelectorAll('[slot="start-icon"]').forEach(n => n.remove());
-                    if (!t.startIcon) break;
+                    if (!value) break;
                     let ico = document.createElement('webui-icon');
                     ico.setAttribute('slot', 'start-icon');
-                    ico.setAttribute('icon', t.startIcon);
+                    ico.setAttribute('icon', value);
                     t.appendChild(ico);
                 }
                 break;
             case 'endIcon':
                 {
                     t.querySelectorAll('[slot="end-icon"]').forEach(n => n.remove());
-                    if (!t.endIcon) break;
+                    if (!value) break;
                     let ico = document.createElement('webui-icon');
                     ico.setAttribute('slot', 'end-icon');
-                    ico.setAttribute('icon', t.endIcon);
+                    ico.setAttribute('icon', value);
                     t.appendChild(ico);
                 }
                 break;
@@ -45,7 +46,7 @@ font-size:inherit;
 font:inherit;
 -webkit-user-select: text;
 user-select: text;
-color:var(--theme-color, inherit);
+color:var(--theme-color-offset, inherit);
 }
 :host([href]:not(:disabled)),
 :host([data-trigger]:not(:disabled)),

cdn/webui/nav-group.js

@@ -8,11 +8,13 @@ webui.define('webui-nav-group', {
         t._display = document.createElement('span');
         t._anchor.appendChild(t._display);
         t._caret = document.createElement('webui-icon');
-        t._caret.setAttribute('icon', 'caret-down');
+        t._caret.setAttribute('icon', 'caret');
+        t._caret.setAttribute('fill', true);
+        t._caret.setAttribute('rotate', "180");
         t._anchor.appendChild(t._caret);
         t._anchor.addEventListener('click', _ev => {
             t.open = !t.open;
-            t._caret.setAttribute('icon', t.open ? 'caret-up' : 'caret-down');
+            t._caret.setAttribute('rotate', t.open ? '0' : '180');
             if (t.open) {
                 t._anchor.classList.add('show');
             } else {