@pnx-mixtape/mxds 0.0.28 → 0.0.29

package/src/Component/Card/card.css

@@ -122,22 +122,70 @@
  */
 
 @layer design-system.components {
-  a[href].mx-card {
-    &:hover {
-      color: inherit;
+  .mx-card--block {
+    position: relative;
+
+    & a {
+      &::before {
+        content: "";
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        inline-size: 100%;
+        block-size: 100%;
+      }
+
+      &:is(:focus, :focus-visible) {
+        outline: unset;
+      }
+    }
+
+    &:has(a .sr-only:only-child) {
+      & a {
+        margin-block-start: calc(var(--gap) * -1);
+      }
+
+      &:hover :is(h2, h3, h4) {
+        color: var(--link-colour, var(--colour-link));
+      }
+    }
+
+    &:focus-within {
+      outline: var(--outline-size, 2px) var(--outline-style, solid)
+        var(--outline-color, currentcolor);
+      outline-offset: var(--outline-offset, 2px);
+
+      &.mx-background--box {
+        outline-offset: var(--outline-offset, -2px);
+      }
     }
   }
+}
 
-  .mx-card--block {
-    position: relative;
+/*
+  * Collapsed on mobile.
+ */
+@media (--collapse-card-down) {
+  .mx-card--collapse {
+    --gap: var(--spacing-xxxs);
 
-    & a::before {
-      content: "";
-      position: absolute;
-      inset-block-start: 0;
-      inset-inline-start: 0;
-      inline-size: 100%;
-      block-size: 100%;
+    & :is(p, .mx-text--lede) {
+      display: none;
+    }
+
+    &:has(.mx-card__media) {
+      --collapsed-media-col: var(--collapsed-image-width, 100px);
+      --ratio: 1;
+
+      grid-template-areas: "content media";
+      grid-template-columns: var(--collapsed-content-col, 1fr) var(--collapsed-media-col, 1fr);
+    }
+  }
+
+  :is(.mx-card--collapse, .mx-container:has(> .mx-card--collapse)) {
+    &:where(:not(:first-child)) {
+      border-block-start: var(--line-width, 1px) solid var(--line-colour, var(--colour-border));
+      padding-block-start: var(--gap);
     }
   }
 }

package/src/Component/Card/card.twig

@@ -1,5 +1,8 @@
 {% set baseClass = 'mx-card' %}
-{% set classes = [baseClass] %}
+{% set classes = [
+  baseClass,
+  collapse ? baseClass~"--collapse" : null,
+] %}
 {% set background = background ? "mx-background--"~background : null %}
 {% for modifier in modifiers %}
   {% if modifier == "dark" %}
@@ -25,11 +28,11 @@
     </div>
   {% endif %}
   <div class="mx-card__content mx-vertical-flow-flex">
+    {{ tags }}
     {% if date is not empty %}
       <div class="mx-text--s">{{ date }}</div>
     {% endif %}
     {{ title }}
-    {{ tags }}
     {% if content is not empty %}
       <div class="mx-text--lede mx-vertical-flow-flex">{{ content }}</div>
     {% endif %}

package/src/Component/Carousel/Elements/Carousel.ts

@@ -153,9 +153,14 @@ export default class Carousel extends HTMLElement {
     const { scrollWidth, clientWidth } = this.list
     const hasOverflow = scrollWidth > clientWidth
     this.list.classList.toggle("overflowing", hasOverflow)
-    if (this.pagination && hasOverflow) {
-      // Timeout needed for this.itemMap to get populated by i0.
-      setTimeout(this.buildPagination, 200)
+    if (hasOverflow) {
+      if (this.pagination) {
+        // Timeout needed for this.itemMap to get populated by i0.
+        setTimeout(this.buildPagination, 200)
+      }
+      this.list.setAttribute("tabindex", "0")
+    } else {
+      this.list.removeAttribute("tabindex")
     }
   }
 

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

@@ -2,7 +2,7 @@
 
 exports[`Carousel 1`] = `
 "
-<mx-carousel class="mx-carousel mx-vertical-flow" role="group">
+<mx-carousel class="mx-carousel" role="group">
   <div class="mx-carousel__buttons" data-buttons="">
     <button class="mx-carousel__prev mx-button mx-button--icon-only" type="button" disabled="">
       <span class="sr-only">previous</span>
@@ -13,15 +13,15 @@ exports[`Carousel 1`] = `
       <span class="mx-icon mx-icon--chevron-right"></span>
     </button>
   </div>
-  <ul class="mx-carousel__scrollable overflowing">
+  <ul class="mx-carousel__scrollable overflowing" tabindex="0">
           <li>          
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 1</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -39,10 +39,10 @@ exports[`Carousel 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 2</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -60,10 +60,10 @@ exports[`Carousel 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 3</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -81,10 +81,10 @@ exports[`Carousel 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 4</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -102,10 +102,10 @@ exports[`Carousel 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 5</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image but may have longer text and trigger height changes..</p></div>
         
       
@@ -123,10 +123,10 @@ exports[`Carousel 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 6</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -144,10 +144,10 @@ exports[`Carousel 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 7</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -165,10 +165,10 @@ exports[`Carousel 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 8</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -186,10 +186,10 @@ exports[`Carousel 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 9</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -207,10 +207,10 @@ exports[`Carousel 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 10</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -228,10 +228,10 @@ exports[`Carousel 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 11</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -252,7 +252,7 @@ exports[`Carousel 1`] = `
 
 exports[`Counters 1`] = `
 "
-<mx-carousel class="mx-carousel mx-vertical-flow" role="group">
+<mx-carousel class="mx-carousel" role="group">
   <div class="mx-carousel__buttons" data-buttons="">
     <button class="mx-carousel__prev mx-button mx-button--icon-only" type="button" disabled="">
       <span class="sr-only">previous</span>
@@ -263,15 +263,15 @@ exports[`Counters 1`] = `
       <span class="mx-icon mx-icon--chevron-right"></span>
     </button>
   </div>
-  <ul class="mx-carousel__scrollable overflowing">
+  <ul class="mx-carousel__scrollable overflowing" tabindex="0">
           <li>          
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 1</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -289,10 +289,10 @@ exports[`Counters 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 2</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -310,10 +310,10 @@ exports[`Counters 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 3</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -331,10 +331,10 @@ exports[`Counters 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 4</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -352,10 +352,10 @@ exports[`Counters 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 5</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image but may have longer text and trigger height changes..</p></div>
         
       
@@ -373,10 +373,10 @@ exports[`Counters 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 6</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -394,10 +394,10 @@ exports[`Counters 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 7</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -415,10 +415,10 @@ exports[`Counters 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 8</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -436,10 +436,10 @@ exports[`Counters 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 9</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -457,10 +457,10 @@ exports[`Counters 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 10</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -478,10 +478,10 @@ exports[`Counters 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 11</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -503,7 +503,7 @@ exports[`Counters 1`] = `
 
 exports[`Loop 1`] = `
 "
-<mx-carousel class="mx-carousel mx-vertical-flow" role="group" loop="">
+<mx-carousel class="mx-carousel" role="group" loop="">
   <div class="mx-carousel__buttons" data-buttons="">
     <button class="mx-carousel__prev mx-button mx-button--icon-only" type="button" disabled="">
       <span class="sr-only">previous</span>
@@ -514,15 +514,15 @@ exports[`Loop 1`] = `
       <span class="mx-icon mx-icon--chevron-right"></span>
     </button>
   </div>
-  <ul class="mx-carousel__scrollable overflowing">
+  <ul class="mx-carousel__scrollable overflowing" tabindex="0">
           <li>          
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 1</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -540,10 +540,10 @@ exports[`Loop 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 2</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -561,10 +561,10 @@ exports[`Loop 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 3</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -582,10 +582,10 @@ exports[`Loop 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 4</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -603,10 +603,10 @@ exports[`Loop 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 5</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image but may have longer text and trigger height changes..</p></div>
         
       
@@ -624,10 +624,10 @@ exports[`Loop 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 6</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -645,10 +645,10 @@ exports[`Loop 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 7</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -666,10 +666,10 @@ exports[`Loop 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 8</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -687,10 +687,10 @@ exports[`Loop 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 9</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -708,10 +708,10 @@ exports[`Loop 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 10</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -729,10 +729,10 @@ exports[`Loop 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 11</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -753,7 +753,7 @@ exports[`Loop 1`] = `
 
 exports[`Paginated 1`] = `
 "
-<mx-carousel class="mx-carousel mx-vertical-flow" role="group">
+<mx-carousel class="mx-carousel" role="group">
   <div class="mx-carousel__buttons" data-buttons="">
     <button class="mx-carousel__prev mx-button mx-button--icon-only" type="button" disabled="">
       <span class="sr-only">previous</span>
@@ -764,15 +764,15 @@ exports[`Paginated 1`] = `
       <span class="mx-icon mx-icon--chevron-right"></span>
     </button>
   </div>
-  <ul class="mx-carousel__scrollable overflowing">
+  <ul class="mx-carousel__scrollable overflowing" tabindex="0">
           <li>          
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 1</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -790,10 +790,10 @@ exports[`Paginated 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 2</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -811,10 +811,10 @@ exports[`Paginated 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 3</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -832,10 +832,10 @@ exports[`Paginated 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 4</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -853,10 +853,10 @@ exports[`Paginated 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 5</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image but may have longer text and trigger height changes..</p></div>
         
       
@@ -874,10 +874,10 @@ exports[`Paginated 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 6</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -895,10 +895,10 @@ exports[`Paginated 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 7</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -916,10 +916,10 @@ exports[`Paginated 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 8</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -937,10 +937,10 @@ exports[`Paginated 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 9</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -958,10 +958,10 @@ exports[`Paginated 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 10</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>
         
       
@@ -979,10 +979,10 @@ exports[`Paginated 1`] = `
 <div class="mx-container">
 <article class="mx-card mx-card--block mx-background--box">
     <div class="mx-card__content mx-vertical-flow-flex">
+    
         
 <h3>Tile 11</h3>
 
-    
           <div class="mx-text--lede mx-vertical-flow-flex"><p>Tiles are just block cards without an image.</p></div>