@haxtheweb/d-d-d - npm Package Compare versions

Comparing version 9.0.5 to 9.0.6

analysis.json

@@ -11,7 +11,7 @@ {
         "start": {
-          "line": 371,
+          "line": 376,
           "column": 7
         },
         "end": {
-          "line": 436,
+          "line": 441,
           "column": 1
@@ -30,7 +30,7 @@ }
         "start": {
-          "line": 547,
+          "line": 553,
           "column": 7
         },
         "end": {
-          "line": 560,
+          "line": 566,
           "column": 1
@@ -49,7 +49,7 @@ }
         "start": {
-          "line": 21,
+          "line": 23,
           "column": 7
         },
         "end": {
-          "line": 36,
+          "line": 38,
           "column": 1
@@ -71,7 +71,7 @@ }
         "start": {
-          "line": 38,
+          "line": 40,
           "column": 7
         },
         "end": {
-          "line": 45,
+          "line": 47,
           "column": 1
@@ -93,7 +93,7 @@ }
         "start": {
-          "line": 49,
+          "line": 51,
           "column": 35
         },
         "end": {
-          "line": 106,
+          "line": 108,
           "column": 1
@@ -112,7 +112,7 @@ }
         "start": {
-          "line": 109,
+          "line": 111,
           "column": 24
         },
         "end": {
-          "line": 134,
+          "line": 136,
           "column": 1
@@ -138,7 +138,7 @@ }
             "start": {
-              "line": 76,
+              "line": 78,
               "column": 4
             },
             "end": {
-              "line": 78,
+              "line": 80,
               "column": 5
@@ -163,7 +163,7 @@ }
             "start": {
-              "line": 80,
+              "line": 82,
               "column": 4
             },
             "end": {
-              "line": 91,
+              "line": 93,
               "column": 5
@@ -188,7 +188,7 @@ }
             "start": {
-              "line": 93,
+              "line": 95,
               "column": 4
             },
             "end": {
-              "line": 104,
+              "line": 106,
               "column": 5
@@ -213,7 +213,7 @@ }
         "start": {
-          "line": 50,
+          "line": 52,
           "column": 9
         },
         "end": {
-          "line": 105,
+          "line": 107,
           "column": 3
@@ -236,7 +236,7 @@ }
         "start": {
-          "line": 110,
+          "line": 112,
           "column": 9
         },
         "end": {
-          "line": 133,
+          "line": 135,
           "column": 3
@@ -259,7 +259,7 @@ }
         "start": {
-          "line": 137,
+          "line": 139,
           "column": 0
         },
         "end": {
-          "line": 144,
+          "line": 146,
           "column": 1
@@ -274,3 +274,3 @@ }
       "summary": "",
-      "path": "lib/d-d-d-sample.js",
+      "path": "d-d-d.js",
       "properties": [],
@@ -284,7 +284,7 @@ "methods": [
             "start": {
-              "line": 195,
+              "line": 392,
               "column": 2
             },
             "end": {
-              "line": 233,
+              "line": 430,
               "column": 3
@@ -309,7 +309,7 @@ }
             "start": {
-              "line": 235,
+              "line": 432,
               "column": 2
             },
             "end": {
-              "line": 244,
+              "line": 441,
               "column": 3
@@ -327,7 +327,7 @@ }
         "start": {
-          "line": 5,
+          "line": 198,
           "column": 7
         },
         "end": {
-          "line": 256,
+          "line": 453,
           "column": 1
@@ -351,7 +351,7 @@ }
             "start": {
-              "line": 198,
+              "line": 197,
               "column": 2
             },
             "end": {
-              "line": 233,
+              "line": 232,
               "column": 3
@@ -369,7 +369,7 @@ }
             "start": {
-              "line": 235,
+              "line": 234,
               "column": 2
             },
             "end": {
-              "line": 318,
+              "line": 317,
               "column": 3
@@ -387,7 +387,7 @@ }
             "start": {
-              "line": 320,
+              "line": 319,
               "column": 2
             },
             "end": {
-              "line": 358,
+              "line": 357,
               "column": 3
@@ -405,7 +405,7 @@ }
             "start": {
-              "line": 360,
+              "line": 359,
               "column": 2
             },
             "end": {
-              "line": 394,
+              "line": 393,
               "column": 3
@@ -423,7 +423,7 @@ }
             "start": {
-              "line": 396,
+              "line": 395,
               "column": 2
             },
             "end": {
-              "line": 428,
+              "line": 427,
               "column": 3
@@ -441,7 +441,7 @@ }
             "start": {
-              "line": 430,
+              "line": 429,
               "column": 2
             },
             "end": {
-              "line": 720,
+              "line": 719,
               "column": 3
@@ -459,7 +459,7 @@ }
             "start": {
-              "line": 722,
+              "line": 721,
               "column": 2
             },
             "end": {
-              "line": 826,
+              "line": 825,
               "column": 3
@@ -477,7 +477,7 @@ }
             "start": {
-              "line": 828,
+              "line": 827,
               "column": 2
             },
             "end": {
-              "line": 898,
+              "line": 897,
               "column": 3
@@ -495,7 +495,7 @@ }
             "start": {
-              "line": 900,
+              "line": 899,
               "column": 2
             },
             "end": {
-              "line": 969,
+              "line": 968,
               "column": 3
@@ -513,7 +513,7 @@ }
             "start": {
-              "line": 971,
+              "line": 970,
               "column": 2
             },
             "end": {
-              "line": 1013,
+              "line": 1012,
               "column": 3
@@ -531,7 +531,7 @@ }
             "start": {
-              "line": 1015,
+              "line": 1014,
               "column": 2
             },
             "end": {
-              "line": 1192,
+              "line": 1191,
               "column": 3
@@ -549,7 +549,7 @@ }
             "start": {
-              "line": 1194,
+              "line": 1193,
               "column": 2
             },
             "end": {
-              "line": 1592,
+              "line": 1591,
               "column": 3
@@ -567,7 +567,7 @@ }
             "start": {
-              "line": 1594,
+              "line": 1593,
               "column": 2
             },
             "end": {
-              "line": 1673,
+              "line": 1672,
               "column": 3
@@ -585,7 +585,7 @@ }
             "start": {
-              "line": 1675,
+              "line": 1674,
               "column": 2
             },
             "end": {
-              "line": 1742,
+              "line": 1741,
               "column": 3
@@ -603,7 +603,7 @@ }
             "start": {
-              "line": 1744,
+              "line": 1743,
               "column": 2
             },
             "end": {
-              "line": 1926,
+              "line": 1925,
               "column": 3
@@ -621,7 +621,7 @@ }
             "start": {
-              "line": 1928,
+              "line": 1927,
               "column": 2
             },
             "end": {
-              "line": 2105,
+              "line": 2104,
               "column": 3
@@ -639,7 +639,7 @@ }
             "start": {
-              "line": 2107,
+              "line": 2106,
               "column": 2
             },
             "end": {
-              "line": 2123,
+              "line": 2122,
               "column": 3
@@ -657,7 +657,7 @@ }
             "start": {
-              "line": 2128,
+              "line": 2127,
               "column": 2
             },
             "end": {
-              "line": 2153,
+              "line": 2152,
               "column": 3
@@ -675,7 +675,7 @@ }
         "start": {
-          "line": 43,
+          "line": 42,
           "column": 0
         },
         "end": {
-          "line": 2213,
+          "line": 2212,
           "column": 1
@@ -682,0 +682,0 @@ }

d-d-d.js

@@ -5,3 +5,3 @@ /**
  */
-import { LitElement } from "lit";
+import { LitElement, css, html } from "lit";
 import { SimpleColorsSuper } from "@haxtheweb/simple-colors/simple-colors.js";
@@ -14,2 +14,4 @@ import {
   DDDAnimations,
+  DDDDataAttributes,
+  ApplicationAttributeData,
 } from "./lib/DDDStyles.js";
@@ -198,1 +200,260 @@
 export { DDDFonts };
+
+export class DDDSample extends DDDSuper(LitElement) {
+  constructor() {
+    super();
+    this.type = null;
+    this.option = 0;
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      ...DDDDataAttributes,
+      css`
+        :host {
+          display: flex;
+          min-height: var(--ddd-spacing-4);
+          padding: var(--ddd-spacing-1) 0;
+          margin: 0;
+          font-size: var(--ddd-font-size-4xs);
+          line-height: normal;
+        }
+        :host([type="accent"]:hover),
+        :host([type="primary"]:hover) {
+          color: black;
+          background-color: light-dark(
+            var(--ddd-theme-default-limestoneMaxLight),
+            var(--ddd-theme-default-limestoneGray)
+          );
+        }
+
+        :host([type="accent"]) .sample,
+        :host([type="primary"]) .sample {
+          border: var(--ddd-border-sm);
+          border-radius: var(--ddd-radius-xs);
+          box-shadow: var(--ddd-boxShadow-sm);
+          height: var(--ddd-spacing-4);
+          width: var(--ddd-spacing-8);
+          display: inline-block;
+        }
+
+        :host([type="border"]) .sample,
+        :host([type="border-radius"]) .sample,
+        :host([type="box-shadow"]) .sample {
+          --ddd-theme-primary: var(--ddd-sample-theme-primary, black);
+          --ddd-theme-accent: var(
+            --ddd-sample-theme-accent,
+            var(--ddd-accent-3)
+          );
+          background-color: var(--ddd-theme-accent);
+          border-color: var(--ddd-theme-primary);
+          height: var(--ddd-spacing-4);
+          width: var(--ddd-spacing-8);
+          display: inline-block;
+        }
+        :host([type="border"]) .sample {
+          height: calc(var(--ddd-spacing-4) - var(--ddd-theme-border-size));
+          width: calc(var(--ddd-spacing-8) - var(--ddd-theme-border-size));
+        }
+        :host([type="border-radius"]) .sample {
+          border: var(--ddd-border-lg);
+          height: var(--ddd-spacing-8);
+          width: var(--ddd-spacing-8);
+          border-color: var(--ddd-theme-primary);
+          clip-path: polygon(50% 0, 0 50%, 0 0, 0 0);
+          transform: scale(4);
+          padding: 0;
+          margin-left: 64px;
+          margin-top: 64px;
+        }
+        :host([type="box-shadow"]) .sample {
+          border: var(--ddd-border-sm);
+          border-color: var(--ddd-theme-primary);
+          margin: 0 12px 12px 12px;
+        }
+
+        :host([type="accent"]:hover) .sample,
+        :host([type="primary"]:hover) .sample {
+          border-color: black;
+        }
+        :host([type="border"]) .label,
+        :host([type="box-shadow"]) .label,
+        :host([type="accent"]) .label,
+        :host([type="primary"]) .label,
+        :host([type="margin"]) .label,
+        :host([type="padding"]) .label {
+          font-size: var(--ddd-font-size-4xs);
+          margin-left: var(--ddd-spacing-3);
+          display: inline-block;
+          vertical-align: top;
+        }
+        :host([type="border-radius"]) .label {
+          margin-left: calc(-1 * var(--ddd-spacing-5));
+          display: inline-block;
+          vertical-align: top;
+          height: var(--ddd-spacing-20);
+          line-height: var(--ddd-spacing-20);
+        }
+
+        :host([type="margin"]) .label,
+        :host([type="padding"]) .label {
+          font-weight: var(--ddd-font-weight-bold);
+        }
+        :host([type="accent"]) .sample {
+          background-color: var(--ddd-theme-accent);
+        }
+        :host([type="primary"]) .sample {
+          background-color: var(--ddd-theme-primary);
+        }
+
+        :host([type="margin"]) .sample[data-margin],
+        :host([type="padding"]) .sample {
+          display: inline-block;
+          height: var(--ddd-spacing-6);
+          padding-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          background-color: var(--ddd-primary-2);
+          margin: 0;
+        }
+
+        /* design treatments may require display block */
+        :host([type="design-treatment"]) .label {
+          display: block;
+          font-weight: bold;
+          --ddd-theme-primary: var(
+            --ddd-sample-theme-primary,
+            var(--ddd-primary-16)
+          );
+          min-height: calc(
+            (var(--initialLetter) / 3 * var(--ddd-theme-body-font-size) * 1.5) +
+              20px
+          );
+        }
+
+        /** TODO this needs to be set via some kind of similar ddd-samples global in order to work for the bg option */
+        :host([type="design-treatment"][option="bg"]) .label {
+          color: var(--ddd-theme-bgContrast);
+        }
+
+        :host([type="font-weight"]) .label,
+        :host([type="font-family"]) .label {
+          font-size: var(--ddd-font-size-s);
+        }
+
+        /* @hack just for the docs bc we can't visualize margins */
+        [data-margin="center"] {
+          margin-left: auto;
+          margin-right: auto;
+        }
+        [data-margin="xs"] {
+          padding: var(--ddd-spacing-2);
+        }
+        [data-margin="s"] {
+          padding: var(--ddd-spacing-4);
+        }
+        [data-margin="m"] {
+          padding: var(--ddd-spacing-8);
+        }
+        [data-margin="l"] {
+          padding: var(--ddd-spacing-12);
+        }
+        [data-margin="xl"] {
+          padding: var(--ddd-spacing-16);
+        }
+
+        /* @hack from normal presentation so that it renders nicely here */
+        [data-instructional-action]::before {
+          padding: 6px 0 0;
+          margin: 8px 16px 0 0;
+        }
+
+        /* @hack so that we reduce the size of the drop cap or it'll be ridiculous */
+        :host([type="design-treatment"])
+          .label[data-design-treatment^="dropCap"]::first-letter {
+          -webkit-initial-letter: calc(var(--initialLetter) / 3);
+          initial-letter: calc(var(--initialLetter) / 3);
+        }
+        /* @hack so we can see fonts relative to each other, not exact size */
+        :host([type="font-size"]) span ::slotted(*) {
+          font-size: var(--ddd-font-size-xs);
+        }
+        :host([type="font-size"]) .label {
+          font-size: 0.8em;
+        }
+        :host([option^="type"]) .label {
+          font-size: 0.5em;
+        }
+        :host([option^="type"]) .label::after {
+          content: " (50% scale)";
+          font-size: var(--ddd-font-size-4xs);
+        }
+      `,
+    ];
+  }
+
+  updated(changedProperties) {
+    if (super.updated) {
+      super.updated(changedProperties);
+    }
+    if (changedProperties.has("type") && this.shadowRoot) {
+      let span;
+      // accent, primary, spacing
+      if (
+        [
+          "accent",
+          "primary",
+          "padding",
+          "margin",
+          "border-radius",
+          "box-shadow",
+          "border",
+        ].includes(this.type)
+      ) {
+        span = this.shadowRoot.querySelector("span.sample");
+      } else if (this.type === "font-size") {
+        span = this.shadowRoot.querySelector("div.wrapper");
+      } else {
+        span = this.shadowRoot.querySelector("span.label");
+      }
+      for (let i in ApplicationAttributeData) {
+        span.removeAttribute(`data-${i}`);
+      }
+      // delay to ensure prev executes in order
+      setTimeout(() => {
+        span.setAttribute(`data-${this.type}`, this.option);
+      }, 0);
+    }
+    if (changedProperties.has("option") && this.shadowRoot && this.type) {
+      let span = this.shadowRoot.querySelector(`span[data-${this.type}]`);
+      if (span) {
+        span.setAttribute(`data-${this.type}`, this.option);
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <div class="wrapper">
+        <span class="sample"></span
+        ><span class="label"
+          >${ApplicationAttributeData[this.type][this.option]}<slot></slot
+        ></span>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      type: { type: String, reflect: true },
+      option: { type: String },
+    };
+  }
+
+  static get tag() {
+    return "d-d-d-sample";
+  }
+}
+
+globalThis.customElements.define(DDDSample.tag, DDDSample);

package.json

@@ -22,3 +22,3 @@ {
   },
-  "version": "9.0.5",
+  "version": "9.0.6",
   "description": "design, develop, destroy the competition",
@@ -48,9 +48,9 @@ "repository": {
   "dependencies": {
-    "@haxtheweb/hax-iconset": "^9.0.3",
-    "@haxtheweb/simple-colors": "^9.0.3",
-    "@haxtheweb/simple-icon": "^9.0.3",
-    "lit": "^3.1.4"
+    "@haxtheweb/hax-iconset": "^9.0.6",
+    "@haxtheweb/simple-colors": "^9.0.6",
+    "@haxtheweb/simple-icon": "^9.0.6",
+    "lit": "^3.2.0"
   },
   "devDependencies": {
-    "@haxtheweb/deduping-fix": "^9.0.2",
+    "@haxtheweb/deduping-fix": "^9.0.6",
     "@open-wc/testing": "4.0.0",
@@ -72,7 +72,10 @@ "@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
   },
+  "customElements": "custom-elements.json",
   "keywords": [
-    "web-components",
-    "html"
+    "webcomponents",
+    "html",
+    "haxtheweb",
+    "lit"
   ],
-  "gitHead": "4b3b5c13c4cf2e1f272ea09258f506b95c9af6f8"
+  "gitHead": "04cae22f40424464d43057349cde27f55cb32ca1"
 }

src/d-d-d.js

@@ -5,3 +5,3 @@ /**
  */
-import { LitElement } from "lit";
+import { LitElement, css, html } from "lit";
 import { SimpleColorsSuper } from "@haxtheweb/simple-colors/simple-colors.js";
@@ -14,2 +14,4 @@ import {
   DDDAnimations,
+  DDDDataAttributes,
+  ApplicationAttributeData,
 } from "./lib/DDDStyles.js";
@@ -198,1 +200,260 @@
 export { DDDFonts };
+
+export class DDDSample extends DDDSuper(LitElement) {
+  constructor() {
+    super();
+    this.type = null;
+    this.option = 0;
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      ...DDDDataAttributes,
+      css`
+        :host {
+          display: flex;
+          min-height: var(--ddd-spacing-4);
+          padding: var(--ddd-spacing-1) 0;
+          margin: 0;
+          font-size: var(--ddd-font-size-4xs);
+          line-height: normal;
+        }
+        :host([type="accent"]:hover),
+        :host([type="primary"]:hover) {
+          color: black;
+          background-color: light-dark(
+            var(--ddd-theme-default-limestoneMaxLight),
+            var(--ddd-theme-default-limestoneGray)
+          );
+        }
+
+        :host([type="accent"]) .sample,
+        :host([type="primary"]) .sample {
+          border: var(--ddd-border-sm);
+          border-radius: var(--ddd-radius-xs);
+          box-shadow: var(--ddd-boxShadow-sm);
+          height: var(--ddd-spacing-4);
+          width: var(--ddd-spacing-8);
+          display: inline-block;
+        }
+
+        :host([type="border"]) .sample,
+        :host([type="border-radius"]) .sample,
+        :host([type="box-shadow"]) .sample {
+          --ddd-theme-primary: var(--ddd-sample-theme-primary, black);
+          --ddd-theme-accent: var(
+            --ddd-sample-theme-accent,
+            var(--ddd-accent-3)
+          );
+          background-color: var(--ddd-theme-accent);
+          border-color: var(--ddd-theme-primary);
+          height: var(--ddd-spacing-4);
+          width: var(--ddd-spacing-8);
+          display: inline-block;
+        }
+        :host([type="border"]) .sample {
+          height: calc(var(--ddd-spacing-4) - var(--ddd-theme-border-size));
+          width: calc(var(--ddd-spacing-8) - var(--ddd-theme-border-size));
+        }
+        :host([type="border-radius"]) .sample {
+          border: var(--ddd-border-lg);
+          height: var(--ddd-spacing-8);
+          width: var(--ddd-spacing-8);
+          border-color: var(--ddd-theme-primary);
+          clip-path: polygon(50% 0, 0 50%, 0 0, 0 0);
+          transform: scale(4);
+          padding: 0;
+          margin-left: 64px;
+          margin-top: 64px;
+        }
+        :host([type="box-shadow"]) .sample {
+          border: var(--ddd-border-sm);
+          border-color: var(--ddd-theme-primary);
+          margin: 0 12px 12px 12px;
+        }
+
+        :host([type="accent"]:hover) .sample,
+        :host([type="primary"]:hover) .sample {
+          border-color: black;
+        }
+        :host([type="border"]) .label,
+        :host([type="box-shadow"]) .label,
+        :host([type="accent"]) .label,
+        :host([type="primary"]) .label,
+        :host([type="margin"]) .label,
+        :host([type="padding"]) .label {
+          font-size: var(--ddd-font-size-4xs);
+          margin-left: var(--ddd-spacing-3);
+          display: inline-block;
+          vertical-align: top;
+        }
+        :host([type="border-radius"]) .label {
+          margin-left: calc(-1 * var(--ddd-spacing-5));
+          display: inline-block;
+          vertical-align: top;
+          height: var(--ddd-spacing-20);
+          line-height: var(--ddd-spacing-20);
+        }
+
+        :host([type="margin"]) .label,
+        :host([type="padding"]) .label {
+          font-weight: var(--ddd-font-weight-bold);
+        }
+        :host([type="accent"]) .sample {
+          background-color: var(--ddd-theme-accent);
+        }
+        :host([type="primary"]) .sample {
+          background-color: var(--ddd-theme-primary);
+        }
+
+        :host([type="margin"]) .sample[data-margin],
+        :host([type="padding"]) .sample {
+          display: inline-block;
+          height: var(--ddd-spacing-6);
+          padding-top: 0;
+          padding-bottom: 0;
+          padding-left: 0;
+          background-color: var(--ddd-primary-2);
+          margin: 0;
+        }
+
+        /* design treatments may require display block */
+        :host([type="design-treatment"]) .label {
+          display: block;
+          font-weight: bold;
+          --ddd-theme-primary: var(
+            --ddd-sample-theme-primary,
+            var(--ddd-primary-16)
+          );
+          min-height: calc(
+            (var(--initialLetter) / 3 * var(--ddd-theme-body-font-size) * 1.5) +
+              20px
+          );
+        }
+
+        /** TODO this needs to be set via some kind of similar ddd-samples global in order to work for the bg option */
+        :host([type="design-treatment"][option="bg"]) .label {
+          color: var(--ddd-theme-bgContrast);
+        }
+
+        :host([type="font-weight"]) .label,
+        :host([type="font-family"]) .label {
+          font-size: var(--ddd-font-size-s);
+        }
+
+        /* @hack just for the docs bc we can't visualize margins */
+        [data-margin="center"] {
+          margin-left: auto;
+          margin-right: auto;
+        }
+        [data-margin="xs"] {
+          padding: var(--ddd-spacing-2);
+        }
+        [data-margin="s"] {
+          padding: var(--ddd-spacing-4);
+        }
+        [data-margin="m"] {
+          padding: var(--ddd-spacing-8);
+        }
+        [data-margin="l"] {
+          padding: var(--ddd-spacing-12);
+        }
+        [data-margin="xl"] {
+          padding: var(--ddd-spacing-16);
+        }
+
+        /* @hack from normal presentation so that it renders nicely here */
+        [data-instructional-action]::before {
+          padding: 6px 0 0;
+          margin: 8px 16px 0 0;
+        }
+
+        /* @hack so that we reduce the size of the drop cap or it'll be ridiculous */
+        :host([type="design-treatment"])
+          .label[data-design-treatment^="dropCap"]::first-letter {
+          -webkit-initial-letter: calc(var(--initialLetter) / 3);
+          initial-letter: calc(var(--initialLetter) / 3);
+        }
+        /* @hack so we can see fonts relative to each other, not exact size */
+        :host([type="font-size"]) span ::slotted(*) {
+          font-size: var(--ddd-font-size-xs);
+        }
+        :host([type="font-size"]) .label {
+          font-size: 0.8em;
+        }
+        :host([option^="type"]) .label {
+          font-size: 0.5em;
+        }
+        :host([option^="type"]) .label::after {
+          content: " (50% scale)";
+          font-size: var(--ddd-font-size-4xs);
+        }
+      `,
+    ];
+  }
+
+  updated(changedProperties) {
+    if (super.updated) {
+      super.updated(changedProperties);
+    }
+    if (changedProperties.has("type") && this.shadowRoot) {
+      let span;
+      // accent, primary, spacing
+      if (
+        [
+          "accent",
+          "primary",
+          "padding",
+          "margin",
+          "border-radius",
+          "box-shadow",
+          "border",
+        ].includes(this.type)
+      ) {
+        span = this.shadowRoot.querySelector("span.sample");
+      } else if (this.type === "font-size") {
+        span = this.shadowRoot.querySelector("div.wrapper");
+      } else {
+        span = this.shadowRoot.querySelector("span.label");
+      }
+      for (let i in ApplicationAttributeData) {
+        span.removeAttribute(`data-${i}`);
+      }
+      // delay to ensure prev executes in order
+      setTimeout(() => {
+        span.setAttribute(`data-${this.type}`, this.option);
+      }, 0);
+    }
+    if (changedProperties.has("option") && this.shadowRoot && this.type) {
+      let span = this.shadowRoot.querySelector(`span[data-${this.type}]`);
+      if (span) {
+        span.setAttribute(`data-${this.type}`, this.option);
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <div class="wrapper">
+        <span class="sample"></span
+        ><span class="label"
+          >${ApplicationAttributeData[this.type][this.option]}<slot></slot
+        ></span>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      type: { type: String, reflect: true },
+      option: { type: String },
+    };
+  }
+
+  static get tag() {
+    return "d-d-d-sample";
+  }
+}
+
+globalThis.customElements.define(DDDSample.tag, DDDSample);

No alert changes

Improved metrics

Total package byte prevSize

269037

increased by3.29%

Lines of code

8670

increased by3.1%

Worsened metrics

Number of package files

22

decreased by-4.35%

Dependency changes

• Updated@haxtheweb/hax-iconset@^9.0.6

• Updated@haxtheweb/simple-colors@^9.0.6

• Updated@haxtheweb/simple-icon@^9.0.6

• Updatedlit@^3.2.0