@pnx-mixtape/mxds 0.0.8 → 0.0.10

package/dist/build/filters.css

@@ -0,0 +1,105 @@
+/**
+ * Filters
+ */
+
+@layer design-system.components {
+  .mx-filters {
+    display: grid;
+    grid-gap: var(--gap);
+    gap: var(--gap);
+  }
+
+  .mx-filters__title {
+    --heading-font-size: var(--font-size-l);
+    --font-min: calc(
+      var(--heading-font-size) - var(--heading-font-size) *
+        var(--font-size-diff, 0.3)
+    );
+
+    font-weight: var(--font-weight-bold);
+    font-size: clamp(
+      max(var(--base-font-size), var(--font-min)),
+      var(--font-min) + 1cqi,
+      var(--heading-font-size)
+    );
+    display: flex;
+    gap: var(--spacing-s);
+    align-items: center;
+    min-block-size: 40px;
+  }
+
+    @media (min-width: 720px) {
+
+  .mx-filters__title {
+      pointer-events: none;
+  }
+    }
+
+    .mx-filters__title .mx-icon {
+      margin-inline-start: auto;
+    }
+
+      @media (min-width: 720px) {
+
+    .mx-filters__title .mx-icon {
+        display: none;
+    }
+      }
+      @media (min-width: 720px) {
+
+    .mx-filters__title [data-counters] {
+        display: none;
+    }
+      }
+
+    .mx-filters__title.mx-accordion__toggle + .mx-filters__form {
+      padding-block-start: var(--block-padding, var(--gap));
+    }
+    .mx-filters__form .mx-accordion__toggle {
+      display: flex;
+      gap: var(--spacing-s);
+      align-items: center;
+    }
+
+      .mx-filters__form .mx-accordion__toggle .mx-icon {
+        margin-inline-start: auto;
+      }
+
+    .mx-filters__form .mx-accordion__content {
+      padding-block-start: var(--spacing-xxxs);
+    }
+    @media (max-width: 719.98px) {
+      .mx-filters--right .mx-filters__form {
+        background-color: var(--background, var(--colour-background));
+        padding-inline: var(
+          --gutter,
+          max(var(--spacing-s), min(6vw, var(--spacing-l)))
+        );
+        padding-block-end: var(--block-padding);
+        overflow-y: auto;
+        position: fixed;
+        z-index: 200;
+        inset-block: 0;
+        inset-inline: 0 -100vw;
+        transition: 0.15s ease-in-out;
+        visibility: hidden;
+      }
+
+      .mx-filters--right [open] .mx-filters__form {
+        inset-inline-end: 0;
+        visibility: visible;
+      }
+    }
+
+    @media (min-width: 720px) {
+      .mx-filters--right .mx-filters__form {
+        --block-padding: 0;
+      }
+
+        .mx-filters--right .mx-filters__form .mx-filters__title {
+          display: none;
+        }
+    }
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpbHRlcnMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxhQUFhO0lBQ2Isb0JBQWU7SUFBZixlQUFlO0VBQ2pCOztFQUVBO0lBQ0UsdUNBQXVDO0lBQ3ZDOzs7S0FHQzs7SUFFRCxvQ0FBb0M7SUFDcEM7Ozs7S0FJQztJQUNELGFBQWE7SUFDYixxQkFBcUI7SUFDckIsbUJBQW1CO0lBQ25CLG9CQUFvQjtFQXVCdEI7O0lBckJFOztFQWxCRjtNQW1CSSxvQkFBb0I7RUFvQnhCO0lBbkJFOztJQUVBO01BQ0UseUJBQXlCO0lBSzNCOztNQUhFOztJQUhGO1FBSUksYUFBYTtJQUVqQjtNQURFO01BSUE7O0lBREY7UUFFSSxhQUFhO0lBRWpCO01BREU7O0lBR0Y7TUFDRSxxREFBcUQ7SUFDdkQ7SUFJQTtNQUNFLGFBQWE7TUFDYixxQkFBcUI7TUFDckIsbUJBQW1CO0lBS3JCOztNQUhFO1FBQ0UseUJBQXlCO01BQzNCOztJQUdGO01BQ0Usd0NBQXdDO0lBQzFDO0lBSUE7TUFDRTtRQUNFLDZEQUE2RDtRQUM3RDs7O1NBR0M7UUFDRCx1Q0FBdUM7UUFDdkMsZ0JBQWdCO1FBQ2hCLGVBQWU7UUFDZixZQUFZO1FBQ1osY0FBYztRQUNkLHNCQUFzQjtRQUN0Qiw2QkFBNkI7UUFDN0Isa0JBQWtCO01BQ3BCOztNQUVBO1FBQ0UsbUJBQW1CO1FBQ25CLG1CQUFtQjtNQUNyQjtJQUNGOztJQUVBO01BQ0U7UUFDRSxrQkFBa0I7TUFLcEI7O1FBSEU7VUFDRSxhQUFhO1FBQ2Y7SUFFSjtBQUVKIiwiZmlsZSI6ImZpbHRlcnMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBGaWx0ZXJzXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5teC1maWx0ZXJzIHtcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIGdhcDogdmFyKC0tZ2FwKTtcbiAgfVxuXG4gIC5teC1maWx0ZXJzX190aXRsZSB7XG4gICAgLS1oZWFkaW5nLWZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLWwpO1xuICAgIC0tZm9udC1taW46IGNhbGMoXG4gICAgICB2YXIoLS1oZWFkaW5nLWZvbnQtc2l6ZSkgLSB2YXIoLS1oZWFkaW5nLWZvbnQtc2l6ZSkgKlxuICAgICAgICB2YXIoLS1mb250LXNpemUtZGlmZiwgMC4zKVxuICAgICk7XG5cbiAgICBmb250LXdlaWdodDogdmFyKC0tZm9udC13ZWlnaHQtYm9sZCk7XG4gICAgZm9udC1zaXplOiBjbGFtcChcbiAgICAgIG1heCh2YXIoLS1iYXNlLWZvbnQtc2l6ZSksIHZhcigtLWZvbnQtbWluKSksXG4gICAgICB2YXIoLS1mb250LW1pbikgKyAxY3FpLFxuICAgICAgdmFyKC0taGVhZGluZy1mb250LXNpemUpXG4gICAgKTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGdhcDogdmFyKC0tc3BhY2luZy1zKTtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIG1pbi1ibG9jay1zaXplOiA0MHB4O1xuXG4gICAgQG1lZGlhICgtLW1lZGl1bS11cCkge1xuICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgfVxuXG4gICAgJiAubXgtaWNvbiB7XG4gICAgICBtYXJnaW4taW5saW5lLXN0YXJ0OiBhdXRvO1xuXG4gICAgICBAbWVkaWEgKC0tbWVkaXVtLXVwKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJiBbZGF0YS1jb3VudGVyc10ge1xuICAgICAgQG1lZGlhICgtLW1lZGl1bS11cCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuICAgIH1cblxuICAgICYubXgtYWNjb3JkaW9uX190b2dnbGUgKyAubXgtZmlsdGVyc19fZm9ybSB7XG4gICAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1ibG9jay1wYWRkaW5nLCB2YXIoLS1nYXApKTtcbiAgICB9XG4gIH1cblxuICAubXgtZmlsdGVyc19fZm9ybSB7XG4gICAgJiAubXgtYWNjb3JkaW9uX190b2dnbGUge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGdhcDogdmFyKC0tc3BhY2luZy1zKTtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgICAgICYgLm14LWljb24ge1xuICAgICAgICBtYXJnaW4taW5saW5lLXN0YXJ0OiBhdXRvO1xuICAgICAgfVxuICAgIH1cblxuICAgICYgLm14LWFjY29yZGlvbl9fY29udGVudCB7XG4gICAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1zcGFjaW5nLXh4eHMpO1xuICAgIH1cbiAgfVxuXG4gIC5teC1maWx0ZXJzLS1yaWdodCB7XG4gICAgQG1lZGlhICgtLW1lZGl1bS1kb3duKSB7XG4gICAgICAmIC5teC1maWx0ZXJzX19mb3JtIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tYmFja2dyb3VuZCwgdmFyKC0tY29sb3VyLWJhY2tncm91bmQpKTtcbiAgICAgICAgcGFkZGluZy1pbmxpbmU6IHZhcihcbiAgICAgICAgICAtLWd1dHRlcixcbiAgICAgICAgICBjbGFtcCh2YXIoLS1zcGFjaW5nLXMpLCA2dncsIHZhcigtLXNwYWNpbmctbCkpXG4gICAgICAgICk7XG4gICAgICAgIHBhZGRpbmctYmxvY2stZW5kOiB2YXIoLS1ibG9jay1wYWRkaW5nKTtcbiAgICAgICAgb3ZlcmZsb3cteTogYXV0bztcbiAgICAgICAgcG9zaXRpb246IGZpeGVkO1xuICAgICAgICB6LWluZGV4OiAyMDA7XG4gICAgICAgIGluc2V0LWJsb2NrOiAwO1xuICAgICAgICBpbnNldC1pbmxpbmU6IDAgLTEwMHZ3O1xuICAgICAgICB0cmFuc2l0aW9uOiAwLjE1cyBlYXNlLWluLW91dDtcbiAgICAgICAgdmlzaWJpbGl0eTogaGlkZGVuO1xuICAgICAgfVxuXG4gICAgICAmIFtvcGVuXSAubXgtZmlsdGVyc19fZm9ybSB7XG4gICAgICAgIGluc2V0LWlubGluZS1lbmQ6IDA7XG4gICAgICAgIHZpc2liaWxpdHk6IHZpc2libGU7XG4gICAgICB9XG4gICAgfVxuXG4gICAgQG1lZGlhICgtLW1lZGl1bS11cCkge1xuICAgICAgJiAubXgtZmlsdGVyc19fZm9ybSB7XG4gICAgICAgIC0tYmxvY2stcGFkZGluZzogMDtcblxuICAgICAgICAmIC5teC1maWx0ZXJzX190aXRsZSB7XG4gICAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH1cbiAgfVxufVxuIl19 */

package/dist/build/link-list.css

@@ -8,16 +8,6 @@
     padding-inline-start: 0;
   }
 
-    .mx-link-list a {
-      display: block;
-      text-decoration-line: none;
-      color: inherit;
-    }
-
-      .mx-link-list a:hover {
-        text-decoration-line: underline;
-      }
-
     .mx-link-list li {
       min-block-size: var(--min-height, var(--spacing-xl));
       border-block-end: 1px solid
@@ -30,43 +20,26 @@
         border-block-end: 0;
       }
 
-    .mx-link-list .mx-icon {
+    .mx-link-list a {
       position: relative;
       display: flex;
       align-items: center;
-      padding-block: var(--spacing-xxxs);
+      padding-block: var(--vertical-padding, var(--spacing-xxxs));
       inline-size: 100%;
-      gap: var(--spacing-s);
-    }
-
-      .mx-link-list .mx-icon::before {
-        flex: 0 0 auto;
-        -webkit-mask-position: left center;
-                mask-position: left center;
-      }
-
-    .mx-link-list:where(:not(.mx-link-list--reverse)) .mx-icon {
       justify-content: space-between;
+      justify-content: var(--justify, space-between);
+      gap: var(--spacing-s);
+      text-decoration-line: none;
+      color: inherit;
     }
 
-      .mx-link-list:where(:not(.mx-link-list--reverse)) .mx-icon::before {
-        -webkit-mask-position: right center;
-                mask-position: right center;
-        order: 2;
+      .mx-link-list a:hover {
+        text-decoration-line: underline;
       }
-    [dir="rtl"] .mx-link-list .mx-icon::before, .translated-rtl .mx-link-list .mx-icon::before {
-      -webkit-mask-position: left center;
-              mask-position: left center;
-    }
-
-    [dir="rtl"] .mx-link-list.mx-link-list--reverse .mx-icon::before, .translated-rtl .mx-link-list.mx-link-list--reverse .mx-icon::before {
-      -webkit-mask-position: right center;
-              mask-position: right center;
-    }
 
   * + .mx-link-list {
     margin-block-start: var(--spacing-m);
   }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxpbmstbGlzdC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLHFCQUFxQjtJQUNyQix1QkFBdUI7RUE0Q3pCOztJQTFDRTtNQUNFLGNBQWM7TUFDZCwwQkFBMEI7TUFDMUIsY0FBYztJQUtoQjs7TUFIRTtRQUNFLCtCQUErQjtNQUNqQzs7SUFHRjtNQUNFLG9EQUFvRDtNQUNwRDtnREFDMEM7TUFEMUM7Z0RBQzBDO0lBSzVDOztNQUhFO1FBQ0UsbUJBQW1CO01BQ3JCOztJQUdGO01BQ0Usa0JBQWtCO01BQ2xCLGFBQWE7TUFDYixtQkFBbUI7TUFDbkIsa0NBQWtDO01BQ2xDLGlCQUFpQjtNQUNqQixxQkFBcUI7SUFNdkI7O01BSkU7UUFDRSxjQUFjO1FBQ2Qsa0NBQTBCO2dCQUExQiwwQkFBMEI7TUFDNUI7O0lBR0Y7TUFDRSw4QkFBOEI7SUFNaEM7O01BSkU7UUFDRSxtQ0FBMkI7Z0JBQTNCLDJCQUEyQjtRQUMzQixRQUFRO01BQ1Y7SUFNRjtNQUNFLGtDQUEwQjtjQUExQiwwQkFBMEI7SUFDNUI7O0lBRUE7TUFDRSxtQ0FBMkI7Y0FBM0IsMkJBQTJCO0lBQzdCOztFQUdGO0lBQ0Usb0NBQW9DO0VBQ3RDO0FBQ0YiLCJmaWxlIjoibGluay1saXN0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogTGluayBMaXN0XG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5teC1saW5rLWxpc3Qge1xuICAgIGxpc3Qtc3R5bGUtdHlwZTogbm9uZTtcbiAgICBwYWRkaW5nLWlubGluZS1zdGFydDogMDtcblxuICAgICYgYSB7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIHRleHQtZGVjb3JhdGlvbi1saW5lOiBub25lO1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG5cbiAgICAgICY6aG92ZXIge1xuICAgICAgICB0ZXh0LWRlY29yYXRpb24tbGluZTogdW5kZXJsaW5lO1xuICAgICAgfVxuICAgIH1cblxuICAgICYgbGkge1xuICAgICAgbWluLWJsb2NrLXNpemU6IHZhcigtLW1pbi1oZWlnaHQsIHZhcigtLXNwYWNpbmcteGwpKTtcbiAgICAgIGJvcmRlci1ibG9jay1lbmQ6IHZhcigtLWxpbmUtd2lkdGgsIDFweCkgc29saWRcbiAgICAgICAgdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcblxuICAgICAgJjpsYXN0LWNoaWxkIHtcbiAgICAgICAgYm9yZGVyLWJsb2NrLWVuZDogMDtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmIC5teC1pY29uIHtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgcGFkZGluZy1ibG9jazogdmFyKC0tc3BhY2luZy14eHhzKTtcbiAgICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgICAgZ2FwOiB2YXIoLS1zcGFjaW5nLXMpO1xuXG4gICAgICAmOjpiZWZvcmUge1xuICAgICAgICBmbGV4OiAwIDAgYXV0bztcbiAgICAgICAgbWFzay1wb3NpdGlvbjogbGVmdCBjZW50ZXI7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJjp3aGVyZSg6bm90KC5teC1saW5rLWxpc3QtLXJldmVyc2UpKSAubXgtaWNvbiB7XG4gICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG5cbiAgICAgICY6OmJlZm9yZSB7XG4gICAgICAgIG1hc2stcG9zaXRpb246IHJpZ2h0IGNlbnRlcjtcbiAgICAgICAgb3JkZXI6IDI7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgW2Rpcj1cInJ0bFwiXSAubXgtbGluay1saXN0LFxuICAudHJhbnNsYXRlZC1ydGwgLm14LWxpbmstbGlzdCB7XG4gICAgJiAubXgtaWNvbjo6YmVmb3JlIHtcbiAgICAgIG1hc2stcG9zaXRpb246IGxlZnQgY2VudGVyO1xuICAgIH1cblxuICAgICYubXgtbGluay1saXN0LS1yZXZlcnNlIC5teC1pY29uOjpiZWZvcmUge1xuICAgICAgbWFzay1wb3NpdGlvbjogcmlnaHQgY2VudGVyO1xuICAgIH1cbiAgfVxuXG4gICogKyAubXgtbGluay1saXN0IHtcbiAgICBtYXJnaW4tYmxvY2stc3RhcnQ6IHZhcigtLXNwYWNpbmctbSk7XG4gIH1cbn1cbiJdfQ== */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxpbmstbGlzdC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLHFCQUFxQjtJQUNyQix1QkFBdUI7RUEyQnpCOztJQXpCRTtNQUNFLG9EQUFvRDtNQUNwRDtnREFDMEM7TUFEMUM7Z0RBQzBDO0lBSzVDOztNQUhFO1FBQ0UsbUJBQW1CO01BQ3JCOztJQUdGO01BQ0Usa0JBQWtCO01BQ2xCLGFBQWE7TUFDYixtQkFBbUI7TUFDbkIsMkRBQTJEO01BQzNELGlCQUFpQjtNQUNqQiw4QkFBOEM7TUFBOUMsOENBQThDO01BQzlDLHFCQUFxQjtNQUNyQiwwQkFBMEI7TUFDMUIsY0FBYztJQUtoQjs7TUFIRTtRQUNFLCtCQUErQjtNQUNqQzs7RUFJSjtJQUNFLG9DQUFvQztFQUN0QztBQUNGIiwiZmlsZSI6ImxpbmstbGlzdC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIExpbmsgTGlzdFxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAubXgtbGluay1saXN0IHtcbiAgICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XG4gICAgcGFkZGluZy1pbmxpbmUtc3RhcnQ6IDA7XG5cbiAgICAmIGxpIHtcbiAgICAgIG1pbi1ibG9jay1zaXplOiB2YXIoLS1taW4taGVpZ2h0LCB2YXIoLS1zcGFjaW5nLXhsKSk7XG4gICAgICBib3JkZXItYmxvY2stZW5kOiB2YXIoLS1saW5lLXdpZHRoLCAxcHgpIHNvbGlkXG4gICAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItYm9yZGVyKSk7XG5cbiAgICAgICY6bGFzdC1jaGlsZCB7XG4gICAgICAgIGJvcmRlci1ibG9jay1lbmQ6IDA7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJiBhIHtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgcGFkZGluZy1ibG9jazogdmFyKC0tdmVydGljYWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy14eHhzKSk7XG4gICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICAgIGp1c3RpZnktY29udGVudDogdmFyKC0tanVzdGlmeSwgc3BhY2UtYmV0d2Vlbik7XG4gICAgICBnYXA6IHZhcigtLXNwYWNpbmctcyk7XG4gICAgICB0ZXh0LWRlY29yYXRpb24tbGluZTogbm9uZTtcbiAgICAgIGNvbG9yOiBpbmhlcml0O1xuXG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgdGV4dC1kZWNvcmF0aW9uLWxpbmU6IHVuZGVybGluZTtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICAqICsgLm14LWxpbmstbGlzdCB7XG4gICAgbWFyZ2luLWJsb2NrLXN0YXJ0OiB2YXIoLS1zcGFjaW5nLW0pO1xuICB9XG59XG4iXX0= */

package/dist/build/masthead.css

@@ -19,6 +19,29 @@
       gap: var(--gap);
   }
     }
+
+  .mx-skip-links {
+    background-color: var(--colour-background-alt);
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    display: flex;
+    z-index: 200;
+    transform: translateY(-100%);
+    visibility: hidden;
+  }
+
+    .mx-skip-links:has(a:focus) {
+      transform: translateY(0);
+      visibility: visible;
+    }
+
+    .mx-skip-links a {
+      display: inline-block;
+      padding-block: 2px;
+      padding-inline: 4px;
+    }
 }
 
 @media print {
@@ -27,4 +50,4 @@
   }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1hc3RoZWFkLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7RUFFRTs7QUFFRjtJQUVJO01BQ0UsOEJBQThCO01BQzlCLG1CQUFtQjtJQUNyQjs7RUFHRjtJQUNFLGFBQWE7RUFNZjs7SUFKRTs7RUFIRjtNQUlJLG9CQUFvQjtNQUNwQixlQUFlO0VBRW5CO0lBREU7QUFFSjs7QUFFQTtFQUNFO0lBQ0UsYUFBYTtFQUNmO0FBQ0YiLCJmaWxlIjoibWFzdGhlYWQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBNYXN0aGVhZFxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmxheW91dHMge1xuICAubXgtbWFzdGhlYWQge1xuICAgICYgLmZsZXgge1xuICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICB9XG4gIH1cblxuICAubXgtbWFzdGhlYWRfX25hdiB7XG4gICAgZGlzcGxheTogbm9uZTtcblxuICAgIEBtZWRpYSAoLS1nbG9iYWwtbmF2LXVwKSB7XG4gICAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICAgIGdhcDogdmFyKC0tZ2FwKTtcbiAgICB9XG4gIH1cbn1cblxuQG1lZGlhIHByaW50IHtcbiAgLm14LW1hc3RoZWFkIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG59XG4iXX0= */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1hc3RoZWFkLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7RUFFRTs7QUFFRjtJQUVJO01BQ0UsOEJBQThCO01BQzlCLG1CQUFtQjtJQUNyQjs7RUFHRjtJQUNFLGFBQWE7RUFNZjs7SUFKRTs7RUFIRjtNQUlJLG9CQUFvQjtNQUNwQixlQUFlO0VBRW5CO0lBREU7O0VBR0Y7SUFDRSw4Q0FBOEM7SUFDOUMsZUFBZTtJQUNmLG9CQUFvQjtJQUNwQixxQkFBcUI7SUFDckIsaUJBQWlCO0lBQ2pCLGFBQWE7SUFDYixZQUFZO0lBQ1osNEJBQTRCO0lBQzVCLGtCQUFrQjtFQVlwQjs7SUFWRTtNQUNFLHdCQUF3QjtNQUN4QixtQkFBbUI7SUFDckI7O0lBRUE7TUFDRSxxQkFBcUI7TUFDckIsa0JBQWtCO01BQ2xCLG1CQUFtQjtJQUNyQjtBQUVKOztBQUVBO0VBQ0U7SUFDRSxhQUFhO0VBQ2Y7QUFDRiIsImZpbGUiOiJtYXN0aGVhZC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIE1hc3RoZWFkXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0ubGF5b3V0cyB7XG4gIC5teC1tYXN0aGVhZCB7XG4gICAgJiAuZmxleCB7XG4gICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgIH1cbiAgfVxuXG4gIC5teC1tYXN0aGVhZF9fbmF2IHtcbiAgICBkaXNwbGF5OiBub25lO1xuXG4gICAgQG1lZGlhICgtLWdsb2JhbC1uYXYtdXApIHtcbiAgICAgIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICAgICAgZ2FwOiB2YXIoLS1nYXApO1xuICAgIH1cbiAgfVxuXG4gIC5teC1za2lwLWxpbmtzIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvdXItYmFja2dyb3VuZC1hbHQpO1xuICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICBpbnNldC1ibG9jay1zdGFydDogMDtcbiAgICBpbnNldC1pbmxpbmUtc3RhcnQ6IDA7XG4gICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICB6LWluZGV4OiAyMDA7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0xMDAlKTtcbiAgICB2aXNpYmlsaXR5OiBoaWRkZW47XG5cbiAgICAmOmhhcyhhOmZvY3VzKSB7XG4gICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCk7XG4gICAgICB2aXNpYmlsaXR5OiB2aXNpYmxlO1xuICAgIH1cblxuICAgICYgYSB7XG4gICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgICBwYWRkaW5nLWJsb2NrOiAycHg7XG4gICAgICBwYWRkaW5nLWlubGluZTogNHB4O1xuICAgIH1cbiAgfVxufVxuXG5AbWVkaWEgcHJpbnQge1xuICAubXgtbWFzdGhlYWQge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbn1cbiJdfQ== */

package/dist/build/tag.css

@@ -54,6 +54,10 @@
       --tag-foreground: var(--link-colour, var(--colour-primary));
     }
 
+    .mx-tag:empty {
+      display: none;
+    }
+
   .mx-tags {
     padding-inline: 0;
     list-style: none;
@@ -64,4 +68,4 @@
   }
 }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLHFCQUFxQjtJQUNyQiw2QkFBd0I7SUFBeEIsd0JBQXdCO0lBQ3hCLDhEQUE4RDtJQUM5RDs7O0tBR0M7SUFDRCx5RUFBeUU7SUFDekUseUJBQXlCO0lBQ3pCLHdEQUF3RDtJQUN4RCxvREFBb0Q7SUFDcEQsY0FBa0M7SUFBbEMsa0NBQWtDO0lBQ2xDLG1DQUFtQztJQUNuQyw4QkFBcUU7SUFBckUscUVBQXFFO0lBQ3JFLDZCQUFxQjtJQUFyQixxQkFBcUI7SUFDckIsZ0JBQWdCO0VBeUJsQjs7SUF2QkU7TUFDRSxxQ0FBcUM7O01BRXJDOzBCQUNnRTs7TUFEaEU7c0VBQ2dFO01BQ2hFLHFDQUEwRDtNQUExRCwwREFBMEQ7SUFDNUQ7O0lBRUE7TUFDRSxrQkFBa0I7TUFDbEIseUJBQXlCO01BQ3pCLDBCQUEwQjtJQUM1Qjs7SUFFQTtNQUNFLGtCQUFrQjtNQUNsQixjQUFjO01BQ2QsU0FBUztJQUNYOztJQUVBO01BQ0UsMkRBQTJEO0lBQzdEOztFQUdGO0lBQ0UsaUJBQWlCO0lBQ2pCLGdCQUFnQjtJQUNoQixhQUFhO0lBQ2IsbUJBQW1CO0lBQ25CLG1CQUFtQjtJQUNuQixzQ0FBc0M7RUFDeEM7QUFDRiIsImZpbGUiOiJ0YWcuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBUYWdcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LXRhZyB7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIGlubGluZS1zaXplOiBmaXQtY29udGVudDtcbiAgICBwYWRkaW5nLWlubGluZTogdmFyKC0taG9yaXpvbnRhbC1wYWRkaW5nLCB2YXIoLS1zcGFjaW5nLXh4eHMpKTtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoXG4gICAgICAtLXRhZy1iYWNrZ3JvdW5kLFxuICAgICAgdmFyKC0tYmFja2dyb3VuZCwgdmFyKC0tY29sb3VyLWJhY2tncm91bmQpKVxuICAgICk7XG4gICAgY29sb3I6IHZhcigtLXRhZy1mb3JlZ3JvdW5kLCB2YXIoLS1mb3JlZ3JvdW5kLCB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZCkpKTtcbiAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAgIGZvbnQtd2VpZ2h0OiB2YXIoLS1mb250LXdlaWdodCwgdmFyKC0tZm9udC13ZWlnaHQtYm9sZCkpO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tdGFnLWZvbnQtc2l6ZSwgdmFyKC0tZm9udC1zaXplLXhzKSk7XG4gICAgbGluZS1oZWlnaHQ6IHZhcigtLWxpbmUtaGVpZ2h0LCAyKTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTtcbiAgICBib3JkZXI6IHZhcigtLWxpbmUtd2lkdGgsIDFweCkgc29saWQgdmFyKC0tbGluZS1jb2xvdXIsIGN1cnJlbnRjb2xvcik7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG5cbiAgICAmOmhhcyhpbnB1dDpmb2N1cykge1xuICAgICAgLS1vdXRsaW5lLXNpemU6IG1heCgwLjEyNXJlbSwgMC4xNWVtKTtcblxuICAgICAgb3V0bGluZTogdmFyKC0tb3V0bGluZS13aWR0aCwgdmFyKC0tb3V0bGluZS1zaXplKSlcbiAgICAgICAgdmFyKC0tb3V0bGluZS1zdHlsZSwgc29saWQpIHZhcigtLW91dGxpbmUtY29sb3IsIGN1cnJlbnRjb2xvcik7XG4gICAgICBvdXRsaW5lLW9mZnNldDogdmFyKC0tb3V0bGluZS1vZmZzZXQsIHZhcigtLW91dGxpbmUtc2l6ZSkpO1xuICAgIH1cblxuICAgICYgaW5wdXQge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgaW5zZXQtYmxvY2stc3RhcnQ6IC0xMDBweDtcbiAgICAgIGluc2V0LWlubGluZS1zdGFydDogLTEwMHB4O1xuICAgIH1cblxuICAgICYgbGFiZWwge1xuICAgICAgZm9udC1zaXplOiBpbmhlcml0O1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgICBtYXJnaW46IDA7XG4gICAgfVxuXG4gICAgJjppcyhhOmhvdmVyLCA6aGFzKGlucHV0OmNoZWNrZWQpKSB7XG4gICAgICAtLXRhZy1mb3JlZ3JvdW5kOiB2YXIoLS1saW5rLWNvbG91ciwgdmFyKC0tY29sb3VyLXByaW1hcnkpKTtcbiAgICB9XG4gIH1cblxuICAubXgtdGFncyB7XG4gICAgcGFkZGluZy1pbmxpbmU6IDA7XG4gICAgbGlzdC1zdHlsZTogbm9uZTtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGZsZXgtZmxvdzogcm93IHdyYXA7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBnYXA6IHZhcigtLXRhZ3MtZ2FwLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgfVxufVxuIl19 */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRhZy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLHFCQUFxQjtJQUNyQiw2QkFBd0I7SUFBeEIsd0JBQXdCO0lBQ3hCLDhEQUE4RDtJQUM5RDs7O0tBR0M7SUFDRCx5RUFBeUU7SUFDekUseUJBQXlCO0lBQ3pCLHdEQUF3RDtJQUN4RCxvREFBb0Q7SUFDcEQsY0FBa0M7SUFBbEMsa0NBQWtDO0lBQ2xDLG1DQUFtQztJQUNuQyw4QkFBcUU7SUFBckUscUVBQXFFO0lBQ3JFLDZCQUFxQjtJQUFyQixxQkFBcUI7SUFDckIsZ0JBQWdCO0VBNkJsQjs7SUEzQkU7TUFDRSxxQ0FBcUM7O01BRXJDOzBCQUNnRTs7TUFEaEU7c0VBQ2dFO01BQ2hFLHFDQUEwRDtNQUExRCwwREFBMEQ7SUFDNUQ7O0lBRUE7TUFDRSxrQkFBa0I7TUFDbEIseUJBQXlCO01BQ3pCLDBCQUEwQjtJQUM1Qjs7SUFFQTtNQUNFLGtCQUFrQjtNQUNsQixjQUFjO01BQ2QsU0FBUztJQUNYOztJQUVBO01BQ0UsMkRBQTJEO0lBQzdEOztJQUVBO01BQ0UsYUFBYTtJQUNmOztFQUdGO0lBQ0UsaUJBQWlCO0lBQ2pCLGdCQUFnQjtJQUNoQixhQUFhO0lBQ2IsbUJBQW1CO0lBQ25CLG1CQUFtQjtJQUNuQixzQ0FBc0M7RUFDeEM7QUFDRiIsImZpbGUiOiJ0YWcuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBUYWdcbiAqL1xuXG5AbGF5ZXIgZGVzaWduLXN5c3RlbS5jb21wb25lbnRzIHtcbiAgLm14LXRhZyB7XG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgIGlubGluZS1zaXplOiBmaXQtY29udGVudDtcbiAgICBwYWRkaW5nLWlubGluZTogdmFyKC0taG9yaXpvbnRhbC1wYWRkaW5nLCB2YXIoLS1zcGFjaW5nLXh4eHMpKTtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoXG4gICAgICAtLXRhZy1iYWNrZ3JvdW5kLFxuICAgICAgdmFyKC0tYmFja2dyb3VuZCwgdmFyKC0tY29sb3VyLWJhY2tncm91bmQpKVxuICAgICk7XG4gICAgY29sb3I6IHZhcigtLXRhZy1mb3JlZ3JvdW5kLCB2YXIoLS1mb3JlZ3JvdW5kLCB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZCkpKTtcbiAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAgIGZvbnQtd2VpZ2h0OiB2YXIoLS1mb250LXdlaWdodCwgdmFyKC0tZm9udC13ZWlnaHQtYm9sZCkpO1xuICAgIGZvbnQtc2l6ZTogdmFyKC0tdGFnLWZvbnQtc2l6ZSwgdmFyKC0tZm9udC1zaXplLXhzKSk7XG4gICAgbGluZS1oZWlnaHQ6IHZhcigtLWxpbmUtaGVpZ2h0LCAyKTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTtcbiAgICBib3JkZXI6IHZhcigtLWxpbmUtd2lkdGgsIDFweCkgc29saWQgdmFyKC0tbGluZS1jb2xvdXIsIGN1cnJlbnRjb2xvcik7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG5cbiAgICAmOmhhcyhpbnB1dDpmb2N1cykge1xuICAgICAgLS1vdXRsaW5lLXNpemU6IG1heCgwLjEyNXJlbSwgMC4xNWVtKTtcblxuICAgICAgb3V0bGluZTogdmFyKC0tb3V0bGluZS13aWR0aCwgdmFyKC0tb3V0bGluZS1zaXplKSlcbiAgICAgICAgdmFyKC0tb3V0bGluZS1zdHlsZSwgc29saWQpIHZhcigtLW91dGxpbmUtY29sb3IsIGN1cnJlbnRjb2xvcik7XG4gICAgICBvdXRsaW5lLW9mZnNldDogdmFyKC0tb3V0bGluZS1vZmZzZXQsIHZhcigtLW91dGxpbmUtc2l6ZSkpO1xuICAgIH1cblxuICAgICYgaW5wdXQge1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgaW5zZXQtYmxvY2stc3RhcnQ6IC0xMDBweDtcbiAgICAgIGluc2V0LWlubGluZS1zdGFydDogLTEwMHB4O1xuICAgIH1cblxuICAgICYgbGFiZWwge1xuICAgICAgZm9udC1zaXplOiBpbmhlcml0O1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgICBtYXJnaW46IDA7XG4gICAgfVxuXG4gICAgJjppcyhhOmhvdmVyLCA6aGFzKGlucHV0OmNoZWNrZWQpKSB7XG4gICAgICAtLXRhZy1mb3JlZ3JvdW5kOiB2YXIoLS1saW5rLWNvbG91ciwgdmFyKC0tY29sb3VyLXByaW1hcnkpKTtcbiAgICB9XG5cbiAgICAmOmVtcHR5IHtcbiAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgfVxuICB9XG5cbiAgLm14LXRhZ3Mge1xuICAgIHBhZGRpbmctaW5saW5lOiAwO1xuICAgIGxpc3Qtc3R5bGU6IG5vbmU7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWZsb3c6IHJvdyB3cmFwO1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgZ2FwOiB2YXIoLS10YWdzLWdhcCwgdmFyKC0tc3BhY2luZy1zKSk7XG4gIH1cbn1cbiJdfQ== */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnx-mixtape/mxds",
   "description": "The Mixtape Design System",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "scripts": {
     "dev": "concurrently -k -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"npm run dev-vite\" \"npm run dev-storybook\"",
     "build": "concurrently -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"npm run build-vite\" \"npm run build-storybook\"",

package/src/Atom/Button/button.twig

@@ -8,7 +8,7 @@
 {% endfor %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
-{% if href %}
+{% if href is not empty %}
   <a{{ attributes}} href="{{ href }}">
     {{ iconStart }}
     <span{% if iconOnly %} class="sr-only"{% endif %}>{{ title }}</span>

package/src/Atom/Image/image.twig

@@ -1,4 +1,4 @@
-{% set attributes = attributes|default(create_attribute()) %}
+{% set attributes = attributes ?? create_attribute() %}
 <picture{{ attributes }}>
   {% for source in sources %}
     <source srcset="{{ source.srcset }}" type="{{ source.type }}" {% if source.media %}media="{{ source.media }}"{% endif %}>
@@ -6,8 +6,8 @@
   <img
       src="{{ src }}"
       alt="{{ alt }}"
-      {% if loading %} loading="{{ loading }}"{% endif %}
-      {% if height %} height="{{ height }}"{% endif %}
-      {% if width %} width="{{ width }}"{% endif %}
+      {% if loading is not empty %} loading="{{ loading }}"{% endif %}
+      {% if height is not empty %} height="{{ height }}"{% endif %}
+      {% if width is not empty %} width="{{ width }}"{% endif %}
   />
 </picture>

package/src/Atom/InlineSvg/inline-svg.twig

@@ -0,0 +1,24 @@
+{% set attributes = attributes ?? create_attribute() %}
+
+{% if className is not empty and className %}
+  {% set attributes = attributes.addClass(className) %}
+{% endif %}
+
+{% if width is not empty %}
+  {% set attributes = attributes.setAttribute('width', width) %}
+{% endif %}
+
+{% if height is not empty %}
+  {% set attributes = attributes.setAttribute('height', height) %}
+{% endif %}
+
+{% if viewBox is not empty %}
+  {% set attributes = attributes.setAttribute('viewBox', viewBox) %}
+{% endif %}
+
+<svg {{ attributes }} xmlns="http://www.w3.org/2000/svg">
+  {{ content }}
+  {% if title %}
+    <title>{{ title }}</title>
+  {% endif %}
+</svg>

package/src/Atom/Link/link.twig

@@ -5,7 +5,7 @@
   download ? baseClass~'--download' : null,
 ]|join(" ")|trim() %}
 {% set attributes = (attributes ?? create_attribute()) %}
-{% if classes %}
+{% if classes is not empty %}
   {% set attributes = attributes.addClass(classes) %}
 {% endif %}
 

package/src/Atom/LinkedImage/linked-image.twig

@@ -0,0 +1,5 @@
+{% set attributes = attributes ?? create_attribute() %}
+<a href="{{ href }}" {{ attributes }}>
+  {{ image }}
+  <span class="sr-only">{{ title }}</span>
+</a>

package/src/Atom/Media/media.twig

@@ -4,14 +4,14 @@
   type ? baseClass~'--'~type : null,
   align ? baseClass~'--'~align : null,
 ] %}
-{% set attributes = attributes|default(create_attribute()).addClass(classes) %}
+{% set attributes = attributes ?? create_attribute().addClass(classes) %}
 
 <figure{{ attributes }}>
   {{ item }}
-  {% if caption or attribution%}
+  {% if caption is not empty or attribution is not empty %}
   <figcaption>
     {{ caption }}
-    {% if caption and attribution %} - {% endif %}
+    {% if caption is not empty and attribution is not empty %} - {% endif %}
     {{ attribution }}
   </figcaption>
   {% endif %}

package/src/Atom/Video/video.twig

@@ -1,8 +1,8 @@
-{% set attributes = attributes|default(create_attribute()).addClass("mx-video") %}
+{% set attributes = attributes ?? create_attribute().addClass("mx-video") %}
 <figure{{ attributes }}>
   <iframe
       src="{{ src }}"
-      {% if title %} title="{{ title }}"{% endif %}
+      {% if title is not empty %} title="{{ title }}"{% endif %}
       allowfullscreen
   ></iframe>
 </figure>

package/src/Component/Accordion/accordion-item.twig

@@ -6,7 +6,7 @@
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
 <mx-accordion>
-  <details{{ attributes }}{% if id %} id="{{ id }}"{% endif %}>
+  <details{{ attributes }}{% if id is not empty %} id="{{ id }}"{% endif %}>
     <summary class="mx-accordion__toggle">
       {{ title }}
       <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down" aria-hidden="true"></span>

package/src/Component/Accordion/accordion.css

@@ -48,8 +48,6 @@
   }
 
   .mx-accordion {
-    contain: layout;
-
     & .mx-accordion__toggle {
       cursor: pointer;
       inline-size: 100%;
@@ -58,6 +56,14 @@
     &:is(> h2, > h3, > h4, > h5, > h6) {
       all: unset;
     }
+
+    &:is([open], [data-open="true"]) {
+      & > .mx-accordion__toggle {
+        & .mx-icon--chevron-down {
+          transform: rotate(180deg);
+        }
+      }
+    }
   }
 
   .mx-accordion--divided {
@@ -70,21 +76,11 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-
-      & .mx-button--icon-only {
-        flex-shrink: 0;
-        margin-inline-start: var(--spacing-xxs);
-      }
+      gap: var(--spacing-xxs);
     }
 
     &:is([open], [data-open="true"]) {
-      & .mx-accordion__toggle {
-        & .mx-button--icon-only {
-          transform: rotate(180deg);
-        }
-      }
-
-      & .mx-accordion__content {
+      & > .mx-accordion__content {
         border-block-start: var(--line-width, 1px) solid
           var(--line-colour, var(--colour-border));
         padding-block: var(--vertical-padding, var(--spacing-xxs));

package/src/Component/Accordion/accordion.twig

@@ -2,7 +2,7 @@
   {% if toggleAll %}
   <mx-accordion-group>
   {% endif %}
-    {% if title or toggleAll %}
+    {% if title is not empty or toggleAll %}
       <div class="mx-accordion__title">
         {{ title }}
         {% if toggleAll %}

package/src/Component/Card/Card.stories.ts

@@ -1,14 +1,6 @@
 import { Meta, StoryObj } from "@storybook/html"
 import Component from "./card.twig"
 import "./card.css"
-import "../Tag/tag.css"
-import "../LinkList/link-list.css"
-import Heading from "../../Atom/Heading/heading.twig"
-import Link from "../../Atom/Link/link.twig"
-import Image from "../../Atom/Image/image.twig"
-import Tags from "../Tag/tags.twig"
-import LinkList from "../LinkList/link-list.twig"
-import Icon from "../../Atom/Icon/icon.twig"
 import {
   Card as CardType,
   CardModifier,
@@ -18,6 +10,17 @@ import {
 } from "@pnx-mixtape/ids-shape"
 import { Icons } from "../../enums"
 
+// Deps.
+import Heading from "../../Atom/Heading/heading.twig"
+import Link from "../../Atom/Link/link.twig"
+import Image from "../../Atom/Image/image.twig"
+import Tags from "../Tag/tags.twig"
+import LinkList from "../LinkList/link-list.twig"
+import Icon from "../../Atom/Icon/icon.twig"
+// css
+import "../Tag/tag.css"
+import "../LinkList/link-list.css"
+
 export type MxCardType = Omit<CardType, "modifiers"> & {
   modifiers?: CardModifier[] | ListItemModifiers[]
 }
@@ -100,18 +103,27 @@ export const WithLinkList: Story = {
     link: null,
     linkList: LinkList({
       items: [
-        {
+        Link({
           title: "Link one",
           href: "#",
-        },
-        {
+          iconEnd: Icon({
+            icon: Icons.CHEVRON_RIGHT,
+          }),
+        }),
+        Link({
           title: "Link two",
           href: "#",
-        },
-        {
+          iconEnd: Icon({
+            icon: Icons.CHEVRON_RIGHT,
+          }),
+        }),
+        Link({
           title: "Link three",
           href: "#",
-        },
+          iconEnd: Icon({
+            icon: Icons.CHEVRON_RIGHT,
+          }),
+        }),
       ],
     }),
   },

package/src/Component/Card/__snapshots__/Card.stories.ts.snap

@@ -200,24 +200,30 @@ exports[`Component/Card WithLinkList smoke-test 1`] = `
       </div>
       <ul class="mx-link-list">
         <li>
-          <a href="#"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Link one
+          <a href="#">
+            <span>
+              Link one
+            </span>
+            <span class="mx-icon mx-icon--chevron-right ">
+            </span>
           </a>
         </li>
         <li>
-          <a href="#"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Link two
+          <a href="#">
+            <span>
+              Link two
+            </span>
+            <span class="mx-icon mx-icon--chevron-right ">
+            </span>
           </a>
         </li>
         <li>
-          <a href="#"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Link three
+          <a href="#">
+            <span>
+              Link three
+            </span>
+            <span class="mx-icon mx-icon--chevron-right ">
+            </span>
           </a>
         </li>
       </ul>

package/src/Component/Card/card.twig

@@ -12,30 +12,30 @@
     {% set classes = classes|merge([baseClass~"--"~modifier]) %}
   {% endif %}
 {% endfor %}
-{% if background %}
+{% if background is not empty %}
   {% set classes = classes|merge([background]) %}
 {% endif %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
 <div class="mx-container">
 <article{{ attributes }}>
-  {% if image %}
+  {% if image is not empty %}
   <figure class="mx-card__media">
     {{ image }}
   </figure>
   {% endif %}
-  {% if icon %}
+  {% if icon is not empty %}
     <div class="mx-card__icon">
       {{ icon }}
     </div>
   {% endif %}
   <div class="mx-card__content mx-vertical-flow-flex">
-    {% if date %}
+    {% if date is not empty %}
       <div class="mx-text--s">{{ date }}</div>
     {% endif %}
     {{ title }}
     {{ tags }}
-    {% if content %}
+    {% if content is not empty %}
       <div class="mx-text--lede">{{ content }}</div>
     {% endif %}
     {{ linkList }}

package/src/Component/ContentBlock/__snapshots__/ContentBlock.stories.ts.snap

@@ -11,25 +11,13 @@ exports[`Component/ContentBlock ContentBlock smoke-test 1`] = `
     </p>
     <ul class="mx-link-list">
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link one
-        </a>
+        [object Object]
       </li>
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link two
-        </a>
+        [object Object]
       </li>
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link three
-        </a>
+        [object Object]
       </li>
     </ul>
     <a class="mx-link--more"
@@ -58,25 +46,13 @@ exports[`Component/ContentBlock WithIcon smoke-test 1`] = `
     </p>
     <ul class="mx-link-list">
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link one
-        </a>
+        [object Object]
       </li>
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link two
-        </a>
+        [object Object]
       </li>
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link three
-        </a>
+        [object Object]
       </li>
     </ul>
     <a class="mx-link--more"
@@ -108,25 +84,13 @@ exports[`Component/ContentBlock WithImage smoke-test 1`] = `
     </p>
     <ul class="mx-link-list">
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link one
-        </a>
+        [object Object]
       </li>
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link two
-        </a>
+        [object Object]
       </li>
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link three
-        </a>
+        [object Object]
       </li>
     </ul>
     <a class="mx-link--more"