From 638de2feaf251c28e92a6a69f2b644e9d84cd616 Mon Sep 17 00:00:00 2001
From: btopro <btopro@outlook.com>
Date: Fri, 10 May 2024 16:50:41 -0400
Subject: [PATCH] https://github.com/elmsln/issues/issues/1334
 https://github.com/elmsln/issues/issues/1326

---
 elements/d-d-d/lib/DDDStyles.js               | 44 +++++++++---------
 .../hax-cloud/demo/dist/dev/appstore.json     |  1 +
 elements/hax-cloud/lib/appstore.json          |  1 +
 .../demo/dist/dev/appstore.json               |  1 +
 .../lib/core/haxcms-site-builder.js           |  9 ++--
 .../multiple-choice/lib/QuestionElement.js    | 45 +++++++++++--------
 elements/tagging-question/demo/index.html     | 16 ++++++-
 .../lib/tagging-question.haxProperties.json   | 22 +++++----
 .../tagging-question/src/tagging-question.js  | 38 ++++++++--------
 elements/tagging-question/tagging-question.js | 38 ++++++++--------
 10 files changed, 123 insertions(+), 92 deletions(-)

diff --git a/elements/d-d-d/lib/DDDStyles.js b/elements/d-d-d/lib/DDDStyles.js
index 56e717bafc..54d96dd2b8 100644
--- a/elements/d-d-d/lib/DDDStyles.js
+++ b/elements/d-d-d/lib/DDDStyles.js
@@ -1483,6 +1483,20 @@ export const DDDReset = css`
   p {
     margin: var(--ddd-spacing-6) 0;
   }
+  dl {
+    padding: var(--ddd-spacing-6);
+    margin: 0;
+    border: var(--ddd-border-sm);
+  }
+  dt {
+    font-weight: var(--ddd-font-weight-bold);
+    font-size: var(--ddd-theme-h6-font-size);
+  }
+  dd {
+    margin-bottom: var(--ddd-spacing-4);
+    margin-inline-start: var(--ddd-spacing-8);
+  }
+
   p[data-accent],
   blockquote[data-accent],
   ol[data-accent],
@@ -1979,10 +1993,7 @@ export const DDDReset = css`
     display: flex;
     font-size: var(--ddd-theme-h4-font-size);
     font-weight: var(--ddd-font-weight-bold);
-    color: light-dark(
-      var(--ddd-theme-default-nittanyNavy),
-      var(--ddd-theme-default-linkLight)
-    );
+    color: light-dark(var(--lowContrast-override, var(--ddd-theme-primary,var(--ddd-theme-default-nittanyNavy))), var(--ddd-theme-default-linkLight));
     cursor: pointer;
     text-wrap: wrap;
     align-items: center;
@@ -1997,10 +2008,7 @@ export const DDDReset = css`
     content: "+";
     margin-left: auto;
     text-align: right;
-    color: light-dark(
-      var(--ddd-theme-default-link),
-      var(--ddd-theme-default-linkLight)
-    );
+    color: light-dark(var(--lowContrast-override, var(--ddd-theme-primary, var(--ddd-theme-default-nittanyNavy))), var(--ddd-theme-default-linkLight));
     font-weight: var(--ddd-font-weight-regular);
     font-size: var(--ddd-font-size-m);
     line-height: 1;
@@ -2020,23 +2028,17 @@ export const DDDReset = css`
     opacity: 0.5;
   }
   details[open] > summary {
-    color: light-dark(
-      var(--ddd-theme-default-link),
-      var(--ddd-theme-default-linkLight)
-    );
+    color: light-dark(var(--lowContrast-override, var(--ddd-theme-primary, var(--ddd-theme-default-nittanyNavy))), var(--ddd-theme-default-linkLight));
+    filter: saturate(1.5);
   }
-  summary:focus,
-  summary:hover,
   details[open] > summary {
-    background-color: light-dark(var(--ddd-theme-default-limestoneMaxLight), var(--ddd-theme-default-nittanyNavy));
+    background-color: light-dark(var(--ddd-theme-default-limestoneMaxLight), var(--ddd-theme-default-potentialMidnight));
   }
-  details[open] > summary::after {
-    content: "--";
-    text-wrap: nowrap;
-    font-size: var(--ddd-font-size-m);
-    letter-spacing: -1.8px;
-    padding-right: 2px;
+  details summary:focus,
+  details summary:hover {
+    background-color: light-dark(var(--ddd-theme-default-limestoneLight), var(--ddd-theme-default-nittanyNavy));
   }
+
   code {
     transition: all 0.3s ease 0s;
     display: inline-block;
diff --git a/elements/hax-cloud/demo/dist/dev/appstore.json b/elements/hax-cloud/demo/dist/dev/appstore.json
index 860efb8e62..00cb6a30c5 100644
--- a/elements/hax-cloud/demo/dist/dev/appstore.json
+++ b/elements/hax-cloud/demo/dist/dev/appstore.json
@@ -639,6 +639,7 @@
     "simple-tags": "@lrnwebcomponents/simple-fields/lib/simple-tags.js",
     "flash-card": "@lrnwebcomponents/flash-card/flash-card.js",
     "sorting-question": "@lrnwebcomponents/sorting-question/sorting-question.js",
+    "tagging-question": "@lrnwebcomponents/tagging-question/tagging-question.js",
     "twitter-embed": "@lrnwebcomponents/twitter-embed/twitter-embed.js",
     "self-check": "@lrnwebcomponents/self-check/self-check.js",
     "course-model": "@lrnwebcomponents/course-model/course-model.js",
diff --git a/elements/hax-cloud/lib/appstore.json b/elements/hax-cloud/lib/appstore.json
index 860efb8e62..00cb6a30c5 100644
--- a/elements/hax-cloud/lib/appstore.json
+++ b/elements/hax-cloud/lib/appstore.json
@@ -639,6 +639,7 @@
     "simple-tags": "@lrnwebcomponents/simple-fields/lib/simple-tags.js",
     "flash-card": "@lrnwebcomponents/flash-card/flash-card.js",
     "sorting-question": "@lrnwebcomponents/sorting-question/sorting-question.js",
+    "tagging-question": "@lrnwebcomponents/tagging-question/tagging-question.js",
     "twitter-embed": "@lrnwebcomponents/twitter-embed/twitter-embed.js",
     "self-check": "@lrnwebcomponents/self-check/self-check.js",
     "course-model": "@lrnwebcomponents/course-model/course-model.js",
diff --git a/elements/haxcms-elements/demo/dist/dev/appstore.json b/elements/haxcms-elements/demo/dist/dev/appstore.json
index dce4bdac5b..d46abc97c9 100644
--- a/elements/haxcms-elements/demo/dist/dev/appstore.json
+++ b/elements/haxcms-elements/demo/dist/dev/appstore.json
@@ -647,6 +647,7 @@
     "simple-tags": "@lrnwebcomponents/simple-fields/lib/simple-tags.js",
     "flash-card": "@lrnwebcomponents/flash-card/flash-card.js",
     "sorting-question": "@lrnwebcomponents/sorting-question/sorting-question.js",
+    "tagging-question": "@lrnwebcomponents/tagging-question/tagging-question.js",
     "twitter-embed": "@lrnwebcomponents/twitter-embed/twitter-embed.js",
     "self-check": "@lrnwebcomponents/self-check/self-check.js",
     "course-model": "@lrnwebcomponents/course-model/course-model.js",
diff --git a/elements/haxcms-elements/lib/core/haxcms-site-builder.js b/elements/haxcms-elements/lib/core/haxcms-site-builder.js
index b80f0f715e..dc9535c88b 100644
--- a/elements/haxcms-elements/lib/core/haxcms-site-builder.js
+++ b/elements/haxcms-elements/lib/core/haxcms-site-builder.js
@@ -609,11 +609,14 @@ class HAXCMSSiteBuilder extends I18NMixin(LitElement) {
         store.cmsSiteEditor.haxCmsSiteEditorUIElement &&
         store.cmsSiteEditor.haxCmsSiteEditorUIElement.shadowRoot
       ) {
-        const editbtn =
+        // delay since it slides in
+        setTimeout(() => {
+          const editbtn =
           store.cmsSiteEditor.haxCmsSiteEditorUIElement.shadowRoot.querySelector(
-            "#editbutton",
+            "#editbutton"
           );
-        editbtn.dataPulse = "1";
+          editbtn.dataPulse = "1";          
+        }, 300);
       }
       // try to evaluate typing in merlin
       if (
diff --git a/elements/multiple-choice/lib/QuestionElement.js b/elements/multiple-choice/lib/QuestionElement.js
index 3047db8373..6ea3492936 100644
--- a/elements/multiple-choice/lib/QuestionElement.js
+++ b/elements/multiple-choice/lib/QuestionElement.js
@@ -385,10 +385,10 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
           min-width: 160px;
           padding: var(--ddd-spacing-8);
           border: var(--ddd-border-md);
-          background-color: var(--simple-colors-default-theme-accent-1);
-          border-radius: var(--ddd-radius-xs);
+          border-radius: var(--ddd-radius-sm);
+          box-shadow: var(--ddd-boxShadow-sm);
+          background-color: light-dark(var(--ddd-theme-accent), transparent);
           transition: all 0.3s ease-in-out;
-          color: var(--simple-colors-default-theme-grey-12);
           --simple-toolbar-button-border-color: var(
             --simple-colors-default-theme-grey-4
           );
@@ -437,6 +437,13 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
           box-shadow: var(--ddd-boxShadow-sm);
           border-color: black;
         }
+        p {
+          padding: 0;
+          margin: 0;
+        }
+        details p {
+          padding: var(--ddd-spacing-4);
+        }
         ul {
           list-style: none;
           padding: 0;
@@ -485,8 +492,8 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
         border-radius: var(--ddd-radius-xs);
       }
       simple-toolbar-button {
-        background-color: light-dark(var(--ddd-theme-default-link), var(--ddd-theme-default-linkLight));
-        color: light-dark(white, black);
+        background-color: var(--ddd-theme-primary, var(--ddd-theme-default-link));
+        color: var(--lowContrast-override, var(--ddd-theme-bgContrast, black));
       }
       simple-toolbar-button[disabled] {
         background-color: light-dark(var(--ddd-theme-default-limestoneLight), var(--ddd-theme-default-slateGray));
@@ -515,7 +522,7 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
       simple-fields-field::part(option-inner) {
         position: absolute;
         right: 0px;
-        color: light-dark(var(--ddd-theme-default-link), var(--ddd-theme-default-linkLight));
+        color: light-dark(var(--ddd-theme-primary, var(--ddd-theme-default-link)), var(--ddd-theme-default-linkLight));
         font-family: var(--ddd-font-navigation);
         font-size: var(--ddd-font-size-xs);
         bottom: 50%;
@@ -523,19 +530,19 @@ export class QuestionElement extends SchemaBehaviors(DDDSuper(LitElement)) {
         padding: 0px;
         margin: 0px;
       }
-        ul,
-        ol {
-          gap: var(--ddd-spacing-4);
-        }
-        simple-icon {
-          display: inline-flex;
-        }
-        .feedback {
-          margin: var(--ddd-spacing-3) 0;
-          font-size: var(--ddd-font-size-m);
-          font-weight: bold;
-          text-align: center;
-        }
+
+      h4 {
+        color: light-dark(var(--ddd-theme-primary, var(--ddd-theme-default-link)), var(--ddd-theme-default-linkLight));
+      }
+      simple-icon {
+        display: inline-flex;
+      }
+      .feedback {
+        margin: var(--ddd-spacing-3) 0;
+        font-size: var(--ddd-font-size-sm);
+        font-weight: bold;
+        text-align: center;
+      }
       `,
     ];
   }
diff --git a/elements/tagging-question/demo/index.html b/elements/tagging-question/demo/index.html
index c87fa01a6e..50190790e5 100644
--- a/elements/tagging-question/demo/index.html
+++ b/elements/tagging-question/demo/index.html
@@ -15,11 +15,25 @@
     <style is="custom-style" include="demo-pages-shared-styles"></style>
   </head>
   <body>
+    <tagging-question question="How would you describe... this..?" data-primary="20" data-accent="3">
+      <img slot="content" src="https://btopro.com/files/i-developed.jpg" />
+      <input value="Huey" data-unselected="Good job reading, some people would have missed this!" data-selected="This name does not start with an D, it starts with H silly Goose">
+      <input correct value="Duey" data-selected="Pretty easy there, obviously has a D in it" data-unselected="4 letters, focus on the 1st one">
+      <input correct value="Daffy" data-selected="You knew it" data-unselected="Are you serious... look at the letter!">
+      <input correct value="Donald" data-selected="The OP duck in disney">
+      <input value="dfsdfs" data-selected="The OP duck in disney">
+      <input value="h4" data-selected="The OP duck in disney">
+      <input value="ghj" data-selected="The OP duck in disney">
+      <input value="hgj" data-selected="The OP duck in disney">
+      <input value="Donghfhald" data-selected="The OP duck in disney">
+      <input value="df" data-selected="The OP duck in disney">
+      <input value="jkjhkhjk" data-selected="The OP duck in disney">
+    </tagging-question>
     <div class="vertical-section-container centered">
       <h3>Basic tagging-question demo</h3>
       <demo-snippet>
         <template>
-          <tagging-question question="How would you describe... this..?">
+          <tagging-question question="How would you describe... this..?" data-primary="1" data-accent="4">
             <img slot="content" src="https://btopro.com/files/i-developed.jpg" />
             <input value="Huey" data-unselected="Good job reading, some people would have missed this!" data-selected="This name does not start with an D, it starts with H silly Goose">
             <input correct value="Duey" data-selected="Pretty easy there, obviously has a D in it" data-unselected="4 letters, focus on the 1st one">
diff --git a/elements/tagging-question/lib/tagging-question.haxProperties.json b/elements/tagging-question/lib/tagging-question.haxProperties.json
index 312555a752..065f3aa96b 100644
--- a/elements/tagging-question/lib/tagging-question.haxProperties.json
+++ b/elements/tagging-question/lib/tagging-question.haxProperties.json
@@ -6,14 +6,17 @@
   "canScale": true,
   "canEditSource": true,
   "contentEditable": false,
+  "designSystem": {
+    "card": true,
+    "primary": true,
+    "accent": true
+  },
   "gizmo": {
-    "title": "tagging question",
-    "description": "",
-    "icon": "icons:android",
+    "title": "Tagging question",
+    "description": "Select tags to answer the question",
+    "icon": "icons:line-style",
     "color": "purple",
-    "tags": [
-      "Other"
-    ],
+    "tags": ["Instructional", "self check", "assessment", "tag"],
     "handles": [],
     "meta": {
       "author": "HAXTheWeb core team"
@@ -34,8 +37,11 @@
   "demoSchema": [
     {
       "tag": "tagging-question",
-      "content": "",
-      "properties": {}
+      "content": "<input correct value=\"DingDingDing\"/><input correct value=\"PaPaPower\"/><input value=\"Moo\"/>",
+      "properties": {
+        "question": "What does the fox say?",
+        "data-accent": "2"
+      }
     }
   ]
 }
\ No newline at end of file
diff --git a/elements/tagging-question/src/tagging-question.js b/elements/tagging-question/src/tagging-question.js
index 64d3d16d4e..73c13e78d0 100644
--- a/elements/tagging-question/src/tagging-question.js
+++ b/elements/tagging-question/src/tagging-question.js
@@ -30,8 +30,6 @@ class TaggingQuestion extends QuestionElement {
       css`
         :host {
           display: block;
-          border-radius: var(--ddd-radius-sm);
-          box-shadow: var(--ddd-boxShadow-sm);
         }
         .tag-container {
           position: relative;
@@ -58,23 +56,24 @@ class TaggingQuestion extends QuestionElement {
           flex-wrap: wrap;
           justify-content: center;
           overflow-y: auto;
-          gap: var(--ddd-spacing-2);
+          gap: var(--ddd-spacing-4);
           min-height: var(--ddd-spacing-18);
           margin-bottom: var(--ddd-spacing-5);
           padding: var(--ddd-spacing-15);
           border: var(--ddd-border-sm);
           border-radius: var(--ddd-radius-sm);
           box-sizing: border-box;
-          background-color: var(--simple-colors-default-theme-grey-2);
+          background-color: light-dark(var(--simple-colors-default-theme-grey-2),var(--simple-colors-default-theme-grey-10));
         }
 
         #possible-container {
           display: flex;
           padding: var(--ddd-spacing-3);
+          border-radius: var(--ddd-radius-sm);
           border: var(--ddd-border-xs);
           flex-wrap: wrap;
           justify-content: center;
-          gap: var(--ddd-spacing-2);
+          gap: var(--ddd-spacing-4);
           min-height: var(--ddd-spacing-12);
         }
 
@@ -88,16 +87,13 @@ class TaggingQuestion extends QuestionElement {
         }
 
         .tag-option.correct {
-          outline: 2px solid var(--simple-colors-default-theme-green-7);
+          outline: 4px solid var(--ddd-theme-default-opportunityGreen);
         }
 
         .tag-option.incorrect {
-          outline: 2px solid var(--simple-colors-default-theme-red-7);;
+          outline: 4px solid var(--ddd-theme-default-original87Pink);
         }
 
-        .tag-slot ::slotted(img) {
-          max-height: 200px;
-        }
         :host([dragging]) #user-choice-container {
           border-style: dashed;
           border-color: gray;
@@ -105,12 +101,12 @@ class TaggingQuestion extends QuestionElement {
         :host([drag-enter-answer][dragging]) #user-choice-container {
           border-style: dashed;
           border-color: black;
-          background-color: var(--simple-colors-default-theme-grey-3);
+          background-color: light-dark(var(--simple-colors-default-theme-grey-3),var(--simple-colors-default-theme-grey-9));
         }
         :host([drag-enter][dragging]) #possible-container {
           border-color: black;
           border-style: dashed;
-          background-color: var(--simple-colors-default-theme-grey-2);
+          background-color: light-dark(var(--simple-colors-default-theme-grey-2),var(--simple-colors-default-theme-grey-8));
         }
 
         .tag-option {
@@ -154,19 +150,21 @@ class TaggingQuestion extends QuestionElement {
     <p class="feedback">${this.correctText}</p>
     ${this.hasFeedbackCorrect ? html`<slot name="feedbackCorrect"></slot>` : ``}` : ``}
     ${this.showAnswer ? html`
-      <h3>Answers selected</h3>
       <p>${this.selectedAnswers.filter(answer => answer.correct).length} out of ${this.answers.filter(answer => answer.correct).length} correct options selected</p>
-      <ul>
+      <h4>Answers selected</h4>
+      <dl>
       ${this.selectedAnswers.map(answer => html`
-        <li class="feedback ${answer.correct ? 'correct' : 'incorrect'}"><strong>${answer.label}:</strong> ${answer.selectedFeedback}</li>              
+        <dt class="${answer.correct ? 'correct' : 'incorrect'}">${answer.label}</dt>
+        <dd>${answer.selectedFeedback}</dd>
       `)}
-      </ul>
-      <h3>Answers not selected</h3>
-      <ul>
+      </dl>
+      <h4>Answers not selected</h4>
+      <dl>
       ${this.displayedAnswers.map(answer => html`
-        ${answer.unselectedFeedback ? html`<li class="feedback ${!answer.correct ? 'correct' : 'incorrect'}">${answer.unselectedFeedback}</li>` : ``}
+        <dt class="${!answer.correct ? 'correct' : 'incorrect'}">${answer.label}</dt>
+        <dd>${answer.selectedFeedback}</dd>
       `)}
-      </ul>
+      </dl>
     </div>
   ` : ''}
       ${this.hasHint && this.showAnswer && !this.isCorrect() ? html`
diff --git a/elements/tagging-question/tagging-question.js b/elements/tagging-question/tagging-question.js
index 64d3d16d4e..73c13e78d0 100644
--- a/elements/tagging-question/tagging-question.js
+++ b/elements/tagging-question/tagging-question.js
@@ -30,8 +30,6 @@ class TaggingQuestion extends QuestionElement {
       css`
         :host {
           display: block;
-          border-radius: var(--ddd-radius-sm);
-          box-shadow: var(--ddd-boxShadow-sm);
         }
         .tag-container {
           position: relative;
@@ -58,23 +56,24 @@ class TaggingQuestion extends QuestionElement {
           flex-wrap: wrap;
           justify-content: center;
           overflow-y: auto;
-          gap: var(--ddd-spacing-2);
+          gap: var(--ddd-spacing-4);
           min-height: var(--ddd-spacing-18);
           margin-bottom: var(--ddd-spacing-5);
           padding: var(--ddd-spacing-15);
           border: var(--ddd-border-sm);
           border-radius: var(--ddd-radius-sm);
           box-sizing: border-box;
-          background-color: var(--simple-colors-default-theme-grey-2);
+          background-color: light-dark(var(--simple-colors-default-theme-grey-2),var(--simple-colors-default-theme-grey-10));
         }
 
         #possible-container {
           display: flex;
           padding: var(--ddd-spacing-3);
+          border-radius: var(--ddd-radius-sm);
           border: var(--ddd-border-xs);
           flex-wrap: wrap;
           justify-content: center;
-          gap: var(--ddd-spacing-2);
+          gap: var(--ddd-spacing-4);
           min-height: var(--ddd-spacing-12);
         }
 
@@ -88,16 +87,13 @@ class TaggingQuestion extends QuestionElement {
         }
 
         .tag-option.correct {
-          outline: 2px solid var(--simple-colors-default-theme-green-7);
+          outline: 4px solid var(--ddd-theme-default-opportunityGreen);
         }
 
         .tag-option.incorrect {
-          outline: 2px solid var(--simple-colors-default-theme-red-7);;
+          outline: 4px solid var(--ddd-theme-default-original87Pink);
         }
 
-        .tag-slot ::slotted(img) {
-          max-height: 200px;
-        }
         :host([dragging]) #user-choice-container {
           border-style: dashed;
           border-color: gray;
@@ -105,12 +101,12 @@ class TaggingQuestion extends QuestionElement {
         :host([drag-enter-answer][dragging]) #user-choice-container {
           border-style: dashed;
           border-color: black;
-          background-color: var(--simple-colors-default-theme-grey-3);
+          background-color: light-dark(var(--simple-colors-default-theme-grey-3),var(--simple-colors-default-theme-grey-9));
         }
         :host([drag-enter][dragging]) #possible-container {
           border-color: black;
           border-style: dashed;
-          background-color: var(--simple-colors-default-theme-grey-2);
+          background-color: light-dark(var(--simple-colors-default-theme-grey-2),var(--simple-colors-default-theme-grey-8));
         }
 
         .tag-option {
@@ -154,19 +150,21 @@ class TaggingQuestion extends QuestionElement {
     <p class="feedback">${this.correctText}</p>
     ${this.hasFeedbackCorrect ? html`<slot name="feedbackCorrect"></slot>` : ``}` : ``}
     ${this.showAnswer ? html`
-      <h3>Answers selected</h3>
       <p>${this.selectedAnswers.filter(answer => answer.correct).length} out of ${this.answers.filter(answer => answer.correct).length} correct options selected</p>
-      <ul>
+      <h4>Answers selected</h4>
+      <dl>
       ${this.selectedAnswers.map(answer => html`
-        <li class="feedback ${answer.correct ? 'correct' : 'incorrect'}"><strong>${answer.label}:</strong> ${answer.selectedFeedback}</li>              
+        <dt class="${answer.correct ? 'correct' : 'incorrect'}">${answer.label}</dt>
+        <dd>${answer.selectedFeedback}</dd>
       `)}
-      </ul>
-      <h3>Answers not selected</h3>
-      <ul>
+      </dl>
+      <h4>Answers not selected</h4>
+      <dl>
       ${this.displayedAnswers.map(answer => html`
-        ${answer.unselectedFeedback ? html`<li class="feedback ${!answer.correct ? 'correct' : 'incorrect'}">${answer.unselectedFeedback}</li>` : ``}
+        <dt class="${!answer.correct ? 'correct' : 'incorrect'}">${answer.label}</dt>
+        <dd>${answer.selectedFeedback}</dd>
       `)}
-      </ul>
+      </dl>
     </div>
   ` : ''}
       ${this.hasHint && this.showAnswer && !this.isCorrect() ? html`