@pnx-mixtape/mxds 0.1.0-rc.5 → 0.1.0-rc.6

package/src/Component/Translate/translate.twig

@@ -22,7 +22,7 @@
       popovertarget="{{ id }}"
       style="anchor-name: --{{ id }}"
       data-label="{{ label }}"
-      aria-label="{{ label }}"
+      aria-label="{{ label }}, {{ defaultLanguage|upper }}"
   >
     {% include '@mixtape/Atom/Icon/icon.twig' with { icon: 'globe' } only %}
     <span class="mx-translate__code">{{ defaultLanguage|upper }}</span>

package/src/Form/form.css

@@ -462,20 +462,6 @@
  */
 
 @layer design-system.atoms {
-  @supports (appearance: base-select) {
-    .mx-input__select,
-    ::picker(select) {
-      appearance: base-select;
-    }
-
-    ::picker(select) {
-      border-radius: var(--border-radius);
-      inset-block-start: var(--spacing-xxxs);
-      border: var(--line-width, 2px) solid
-        var(--line-colour, var(--line-colour, var(--colour-border)));
-    }
-  }
-
   .mx-input__select {
     --outline-size: var(--line-width, 2px);
     --outline-offset: calc(var(--outline-size, 2px) * -1);
@@ -489,21 +475,33 @@
     padding-inline-end: var(--spacing-xl);
 
     @supports (appearance: base-select) {
+      padding-inline-end: var(--form-spacing, var(--spacing-s));
+      align-items: center;
+      background-image: none;
+
       &,
-      ::picker(select) {
+      &::picker(select) {
         appearance: base-select;
-        background-image: none;
-        padding-inline-end: 0;
       }
 
-      selectedcontent {
+      &::picker(select) {
+        border-radius: var(--border-radius);
+        inset-block-start: var(--spacing-xxxs);
+        border: var(--line-width, 2px) solid
+          var(--line-colour, var(--line-colour, var(--colour-border)));
+        min-inline-size: anchor-size(width);
+        position-area: block-end center;
+        position-try-fallbacks: flip-block flip-inline;
+      }
+
+      & selectedcontent {
         display: flex;
         align-items: center;
         block-size: 100%;
         column-gap: var(--spacing-xxxs);
       }
 
-      option {
+      & option {
         padding-block: var(--spacing-xxs);
       }
     }

package/src/Introduction.mdx

@@ -14,7 +14,7 @@ import { Meta, Title, Subtitle } from "@storybook/addon-docs/blocks"
 - Javascript is available in both React and Web Component formats.
 - Provides Twig templates for each component
 - Supports PINTO and Experience Builder integration.
-- Is tested against WCAG 2.0 AA to ensure accessibility standards.
+- Is tested against WCAG 2.2 AA to ensure accessibility standards.
 - Follows PreviousNext's high standards.
 - Provide integration Documentation.
 

package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap

@@ -14,7 +14,7 @@ exports[`Everything 1`] = `
                   <a href="#">
             News
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">Sub-navigation</button>
               <ul class="mx-nav__level-2">
           <li>
                   <a href="#">
@@ -33,7 +33,7 @@ exports[`Everything 1`] = `
                   <a href="#">
             About us
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">Sub-navigation</button>
               <ul class="mx-nav__level-2">
           <li>
                   <a href="#">
@@ -57,7 +57,7 @@ exports[`Everything 1`] = `
                   <a href="#">
             Contact
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">Sub-navigation</button>
               <ul class="mx-nav__level-2">
           <li>
                   <a href="#">

package/src/Layout/Header/__snapshots__/Header.stories.ts.snap

@@ -45,7 +45,7 @@ exports[`Controls 1`] = `
         </div>
                           
 <mx-translate class="mx-translate" closeonclick="" data-default-language="en" data-update-trigger-label="true">
-  <button id="unique-1" type="button" class="mx-button mx-button--light mx-button--small mx-translate__trigger mx-popover__trigger notranslate" popovertarget="translate" style="anchor-name: --translate" data-label="Language" aria-label="Language">
+  <button id="unique-1" type="button" class="mx-button mx-button--light mx-button--small mx-translate__trigger mx-popover__trigger notranslate" popovertarget="translate" style="anchor-name: --translate" data-label="Language" aria-label="Language, EN">
     
 <span class="mx-icon mx-icon--globe"></span>
     <span class="mx-translate__code">EN</span>
@@ -252,7 +252,7 @@ exports[`Stacked 1`] = `
     <div class="mx-header__nav-inner">
           
 
-<mx-nav edgecheck="">
+<mx-nav>
     <nav class="mx-nav mx-nav--dropdown mx-nav--mega-nav" aria-label="Primary navigation" id="header-stacked-story">
         <ul class="mx-nav__level-1">
           <li>
@@ -264,13 +264,13 @@ exports[`Stacked 1`] = `
                   <a href="#" id="unique-5">
             About us
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-2">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="false" aria-controls="unique-2">Sub-navigation</button>
               <ul class="mx-nav__level-2" inert="" id="unique-2" aria-labelledby="unique-3">
           <li class="mx-nav__has-subnav">
                   <a href="#" aria-current="page" id="unique-6">
             Who
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-4">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="false" aria-controls="unique-4">Sub-navigation</button>
               <ul class="mx-nav__level-3" inert="" id="unique-3" aria-labelledby="unique-5">
           <li>
                   <a href="#" aria-current="page">
@@ -307,7 +307,7 @@ exports[`Stacked 1`] = `
                   <a href="#" id="unique-7">
             Contact
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" aria-expanded="false" aria-controls="unique-6">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button" aria-expanded="false" aria-controls="unique-6">Sub-navigation</button>
               <ul class="mx-nav__level-2" inert="" id="unique-4" aria-labelledby="unique-7">
           <li>
                   <a href="#" aria-current="page">
@@ -340,7 +340,7 @@ exports[`Stacked 1`] = `
               <div class="mx-header__nav-right">
           
 <mx-translate class="mx-translate" closeonclick="" data-default-language="en" data-update-trigger-label="true">
-  <button id="unique-8" type="button" class="mx-button mx-button--light mx-button--small mx-translate__trigger mx-popover__trigger notranslate" popovertarget="translate" style="anchor-name: --translate" data-label="Language" aria-label="Language">
+  <button id="unique-8" type="button" class="mx-button mx-button--light mx-button--small mx-translate__trigger mx-popover__trigger notranslate" popovertarget="translate" style="anchor-name: --translate" data-label="Language" aria-label="Language, EN">
     
 <span class="mx-icon mx-icon--globe"></span>
     <span class="mx-translate__code">EN</span>

package/src/Layout/Sidebar/sidebar.css

@@ -13,17 +13,23 @@
       flex-flow: var(--sidebar-direction, column) wrap;
       gap: var(--sidebar-gap, var(--gap));
       justify-content: space-between;
+      align-items: start;
 
-      @media (--medium-up) {
+      @media (--sidebar-up) {
         --sidebar-direction: row;
       }
 
       & > aside {
         flex-grow: 1;
         align-content: start;
+        inline-size: 100%;
+        padding-block-start: var(--line-gap, var(--gap));
+        border-block-start: var(--line-width, 6px) solid var(--line-colour, var(--colour-primary));
 
-        @media (--medium-up) {
+        @media (--sidebar-up) {
           max-inline-size: var(--sidebar-width, 24ch);
+          padding-block-start: unset;
+          border-block-start: unset;
         }
       }
 
@@ -31,6 +37,7 @@
         flex-basis: 0;
         flex-grow: 999;
         min-inline-size: var(--content-min, 50%);
+        inline-size: 100%;
         max-inline-size: var(--container-max-width, 76ch);
 
         & .mx-grid {
@@ -39,7 +46,7 @@
       }
 
       &.mx-grid--sidebar-rev {
-        @media (--medium-up) {
+        @media (--sidebar-up) {
           --sidebar-direction: row-reverse;
         }
       }

package/src/Utility/Elements/google-translate-widget.ts

@@ -165,7 +165,7 @@ export default class GoogleTranslateWidget {
     if (!trigger) return
     const label = trigger.dataset.label || "Language"
     const languageLabel = this.getLanguageItem(code)?.textContent?.trim() ?? code
-    trigger.setAttribute("aria-label", `${label}: ${languageLabel}`)
+    trigger.setAttribute("aria-label", `${label}: ${languageLabel}, ${code.toUpperCase()}`)
     const codeEl = trigger.querySelector(".mx-translate__code")
     if (codeEl) codeEl.textContent = code.toUpperCase()
   }

package/src/_custom-media.css

@@ -19,6 +19,8 @@
 @custom-media --global-nav-down (width < token("breakpoint.globalNav"));
 @custom-media --collapse-card-up (width >= token("breakpoint.collapsedCard"));
 @custom-media --collapse-card-down (token("breakpoint.xxs") < width < token("breakpoint.collapsedCard"));
+@custom-media --sidebar-up (width >= token("breakpoint.globalNav"));
+@custom-media --sidebar-down (width < token("breakpoint.globalNav"));
 
 /* Util media queries */
 @custom-media --touch (pointer: fine);

package/src/tokens.js

@@ -44,6 +44,7 @@ export default {
     contentCard: "720px",
     collapsedCard: "720px",
     dropMenu: "420px",
+    sidebar: "720px",
   },
   colour: {
     primary: {