@pnx-mixtape/mxds 0.0.12 → 0.0.14

package/src/Layout/Section/twig/sections-breakout.twig

@@ -1,38 +1,33 @@
-<section class="mx-section mx-section--flow">
-  <p>Default is container width, with an inline gutter for smaller screens.</p>
-</section>
-<section class="mx-section mx-section__full mx-section--flow">
-  <p>Section can have children with different content widths;</p>
-  <p class="mx-section__narrow">like the optimum content width with .section__narrow</p>
-  <p class="mx-section__feature">or slightly larger feature widths with .section__feature</p>
-  <p class="mx-section__full">or full width with .section__full</p>
-</section>
-<section class="mx-section mx-section--flow">
-  <p>Sections can be nested</p>
-  <section class="mx-section">
-    <p>and have the same content width options are un-nested ones;</p>
-    <p class="mx-section__narrow">like the optimum content widths with .section__narrow</p>
-    <p class="mx-section__feature">or slightly larger feature widths with .section__feature</p>
-    <p class="mx-section__full">or full width with .section__full</p>
-  </section>
-</section>
-<section class="mx-section mx-section__narrow mx-section--flow">
-  <p>Sections can say for all children to have a certain width</p>
-  <p>by using .section__narrow or .section__feature or .section__full</p>
-  <p>on the parent.</p>
-</section>
-<section class="mx-section mx-section--flow mx-background--reverse">
+<p>Default is container width, with an inline gutter for smaller screens.</p>
+<p class="mx-section--narrow ">Or for optimum content width with .section--narrow</p>
+<p class="mx-section--feature">or slightly larger feature widths with .section--feature</p>
+<p class="mx-section--full">or full width with .section--full</p>
+<p class="mx-section--flow">Sections can be spaced naturally with .mx-section--flow</p>
+<p class="mx-section--flow mx-section--feature">to create a gap between them, even if they have different widths.</p>
+<p class="mx-section--group">Or they can be grouped together</p>
+<p class="mx-section--feature mx-section--group">even if they have different content widths.</p>
+
+<section class="mx-page mx-section--flow mx-background--reverse">
   <p>Any section can have a background color, or utilise any of the section vertical spacing classes</p>
-  <section class="mx-section--bottom-l">
-    <p>even children</p>
+  <p class="mx-section--s">even children</p>
+  <p class="mx-background--box mx-section--m mx-background--reset">and ones with their own backgrounds.</p>
+  <p class="mx-section--s mx-section--narrow">A section with a background colour creates a subgrid.</p>
+</section>
+<section class="mx-page mx-section--flow mx-background--alt">
+  <p>Page can be nested and have the same content width options as un-nested ones;</p>
+  <section class="mx-page mx-section--flow">
+    <p class="mx-section--narrow">like the optimum content widths with .section--narrow</p>
+    <p class="mx-section--feature">or slightly larger feature widths with .section--feature</p>
+    <p class="mx-section--full">or full width with .section--full</p>
   </section>
-  <section class="mx-section--l mx-background--reset">
-    <p>and ones with their own backgrounds.</p>
+  <section class="mx-page mx-page--feature mx-section--flow">
+    <p>Pages can say for all children to have a certain width</p>
+    <p>by using .page--narrow or .page--feature or .page--full</p>
+    <p>on the parent.</p>
   </section>
 </section>
-<section class="mx-section mx-section--group">
-  <p>Sections can be grouped together</p>
-</section>
-<section class="mx-section mx-section__feature mx-section--group">
-  <p>even if they have different content widths.</p>
+<section class="mx-section--narrow mx-section--flow">
+  <p>Sections can also say for all children to have a certain width</p>
+  <p>by using .section--narrow or .section--feature or .section--full</p>
+  <p>on the parent.</p>
 </section>

package/src/Layout/Section/twig/sections-flow.twig

@@ -1,51 +1,51 @@
-<section class="mx-section mx-section--flow">
+<section class="mx-section--flow">
   <p>first section has top and bottom spacing</p>
 </section>
-<section class="mx-section mx-section--flow">
+<section class="mx-section--flow">
   <p>section with normal flow</p>
 </section>
-<section class="mx-section mx-section--flow">
+<section class="mx-section--flow">
   <p>section with normal flow</p>
 </section>
-<section class="mx-section mx-section--group mx-background--alt">
+<section class="mx-section--group mx-background--alt">
   <p>certain sections can be</p>
 </section>
-<section class="mx-section mx-section--group mx-background--alt">
+<section class="mx-section--group mx-background--alt">
   <p>grouped togther as siblings</p>
 </section>
-<section class="mx-section mx-section--group mx-background--alt">
+<section class="mx-section--group mx-background--alt">
   <p>with their own spacing rules</p>
 </section>
-<section class="mx-section mx-section--flow">
+<section class="mx-section--flow">
   <p>section on it's own has top and bottom spacing</p>
 </section>
-<section class="mx-section mx-section--group mx-background--alt">
+<section class="mx-section--group mx-background--alt">
   <p>groups can be combined with flow</p>
 </section>
-<section class="mx-section mx-section--flow mx-section--group mx-background--alt">
+<section class="mx-section--flow mx-section--group mx-background--alt">
   <p>for standard spacing</p>
 </section>
-<section class="mx-section mx-section--flow">
+<section class="mx-section--flow">
   <p>section after group own has top and bottom spacing</p>
 </section>
-<section class="mx-section mx-section--flow">
+<section class="mx-section--flow">
   <p>section with normal flow</p>
 </section>
-<section class="mx-section mx-section--flow mx-background--alt">
+<section class="mx-section--flow mx-background--alt">
   <p>section with background that breaks the flow, also has top and bottom spacing</p>
 </section>
-<section class="mx-section mx-section--flow">
+<section class="mx-section--flow">
   <p>section after background own has top and bottom spacing</p>
 </section>
-<section class="mx-section mx-section--flow">
+<section class="mx-section--flow">
   <p>section with normal flow</p>
 </section>
-<section class="mx-section mx-section--group">
+<section class="mx-section--group">
   <p>groups can be used normally for larger spacing</p>
 </section>
-<section class="mx-section mx-section--group mx-background--alt">
+<section class="mx-section--group mx-background--alt">
   <p>adding a background breaks the grouping</p>
 </section>
-<section class="mx-section mx-section--group mx-background--alt">
+<section class="mx-section--group mx-background--alt">
   <p>into a new group</p>
 </section>

package/src/Layout/Section/twig/sections-stacked.twig

@@ -1,19 +1,19 @@
-<section class="mx-section mx-section--xl mx-background--alt mx-vertical-flow">
+<section class="mx-section--xl mx-background--alt mx-vertical-flow">
     <h2>Section Extra Large</h2>
     <p>Extra Large spacing at the section level. Use the <code>section--xl</code> class to apply this spacing to the outter section.</p>
     <a class="mx-link--more" href="#">Learn more</a>
 </section>
-<section class="mx-section mx-section--l mx-vertical-flow">
+<section class="mx-section--l mx-vertical-flow">
     <h2>Section Large</h2>
     <p>Large spacing at the section level. Use the <code>section--l</code> class to apply this spacing to the outter section.</p>
     <a class="mx-link--more" href="#">Learn more</a>
 </section>
-<section class="mx-section mx-section--m mx-background--alt mx-vertical-flow">
+<section class="mx-section--m mx-background--alt mx-vertical-flow">
     <h2>Section Medium</h2>
     <p>Medium spacing at the section level. Use the <code>section--m</code> class to apply this spacing to the outter section.</p>
     <a class="mx-link--more" href="#">Learn more</a>
 </section>
-<section class="mx-section mx-section--s mx-vertical-flow">
+<section class="mx-section--s mx-vertical-flow">
     <h2>Section Small</h2>
     <p>Small spacing at the section level. Use the <code>section--s</code> class to apply this spacing to the outter section.</p>
     <a class="mx-link--more" href="#">Learn more</a>

package/src/Layout/Sidebar/Sidebar.stories.ts

@@ -1,16 +1,13 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import { SidebarOrder } from "../../enums"
 import Component from "./sidebar.twig"
 import "./sidebar.css"
-import { Page } from "../../../.storybook/decorators"
 
 type SidebarArgs = {
   content?: string | HTMLElement
-  contentClass?: string
   order?: SidebarOrder
   before?: boolean
   sidebarContent?: string | HTMLElement
-  sidebarClass?: string
 }
 
 const meta: Meta<SidebarArgs> = {
@@ -20,7 +17,6 @@ const meta: Meta<SidebarArgs> = {
     order: { options: Object.values(SidebarOrder), control: "select" },
     before: { control: "boolean" },
   },
-  decorators: [Page],
   args: {
     content: "Main content",
     sidebarContent: "Sidebar content",

package/src/Layout/Sidebar/Sidebar.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Sidebar"
 import { Page } from "../../../.storybook-react/decorators"
 import { SidebarOrder } from "../../enums"

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Sidebar NoSidebar smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page default">
   <div class="mx-grid--sidebar ">
     <section>
       Main content
@@ -11,7 +11,7 @@ exports[`Layout/Sidebar NoSidebar smoke-test 1`] = `
 `;
 
 exports[`Layout/Sidebar ReverseLarge smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page default">
   <div class="mx-grid--sidebar mx-grid--sidebar-rev-lg">
     <section>
       Main content
@@ -24,7 +24,7 @@ exports[`Layout/Sidebar ReverseLarge smoke-test 1`] = `
 `;
 
 exports[`Layout/Sidebar RevserseMedium smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page default">
   <div class="mx-grid--sidebar mx-grid--sidebar-rev">
     <section>
       Main content
@@ -37,7 +37,7 @@ exports[`Layout/Sidebar RevserseMedium smoke-test 1`] = `
 `;
 
 exports[`Layout/Sidebar Sidebar smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page default">
   <div class="mx-grid--sidebar ">
     <section>
       Main content
@@ -50,7 +50,7 @@ exports[`Layout/Sidebar Sidebar smoke-test 1`] = `
 `;
 
 exports[`Layout/Sidebar SidebarFirst smoke-test 1`] = `
-<div class="mx-page">
+<div class="mx-page default">
   <div class="mx-grid--sidebar ">
     <aside>
       Sidebar content

package/src/Layout/Sidebar/sidebar.css

@@ -9,51 +9,32 @@
     }
 
     &:where(:has(> aside)) {
-      @media (--medium-up) {
-        display: grid;
-        grid-template-columns: var(--container-max-width, 76ch) auto;
-        gap: var(--sidebar-gap, var(--gap));
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--sidebar-gap, var(--gap));
+      justify-content: space-between;
+
+      & > aside {
+        flex-grow: 1;
+        max-inline-size: var(--sidebar-width, 24ch);
+      }
 
-        @media (--large-up) {
-          --sidebar-gap: 18ch;
-        }
+      & > section {
+        flex-basis: 0;
+        flex-grow: 999;
+        min-inline-size: var(--content-min, 50%);
+        max-inline-size: var(--container-max-width, 76ch);
       }
 
       &.mx-grid--sidebar-rev {
-        & > :is(section, aside) {
-          &:first-child {
-            order: 2;
-          }
-
-          &:last-child {
-            order: 1;
-          }
-        }
+        flex-direction: row-reverse;
       }
 
       &.mx-grid--sidebar-rev-lg {
         @media (--medium-up) {
-          & > :is(section, aside) {
-            &:first-child {
-              order: 2;
-            }
-
-            &:last-child {
-              order: 1;
-            }
-          }
+          flex-direction: row-reverse;
         }
       }
-
-      &:is(.mx-grid--sidebar-rev, .mx-grid--sidebar-rev-lg) {
-        @media (--large-up) {
-          grid-template-columns: auto var(--container-max-width, 76ch);
-        }
-      }
-    }
-
-    &:where(:has(> aside:first-child)) {
-      grid-template-columns: auto var(--container-max-width, 76ch);
     }
   }
 }

package/src/Layout/Sidebar/sidebar.twig

@@ -4,10 +4,12 @@
   order ? "mx-grid--"~order : null,
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
+{% set sidebarAttributes = (sidebarAttributes ?? create_attribute()) %}
+{% set contentAttributes = (contentAttributes ?? create_attribute()) %}
 
 {% if sidebarContent is not empty %}
   {% set sidebar %}
-    <aside{% if sidebarClass is not empty %} class="{{ sidebarClass }}"{% endif %}>
+    <aside{{ sidebarAttributes }}>
       {{ sidebarContent }}
     </aside>
   {% endset %}
@@ -17,7 +19,7 @@
   {% if sidebar is not empty and before %}
     {{ sidebar }}
   {% endif %}
-  <section{% if contentClass is not empty %} class="{{ contentClass }}"{% endif %}>
+  <section{{ contentAttributes }}>
     {{ content }}
   </section>
   {% if sidebar is not empty and not before %}

package/src/Utility/Drupal/drupal.css

@@ -5,7 +5,7 @@
  */
 
 main :is(.user-login-form, .user-register-form, .user-pass) {
-  max-inline-size: var(--container-max-width-narrow);
+  inline-size: min(100%, var(--container-max-width-narrow));
   margin-block: var(--spacing-xxl);
   margin-inline: auto;
 }
@@ -32,7 +32,6 @@ main :is(.user-login-form, .user-register-form, .user-pass) {
     overflow: hidden;
     z-index: 501;
     transform: translateX(-75%);
-    transition: transform 0.2s ease-in-out;
 
     &:hover {
       transform: translateX(0);
@@ -54,9 +53,6 @@ main :is(.user-login-form, .user-register-form, .user-pass) {
       padding-inline: var(--spacing-m);
       color: var(--foreground, var(--colour-primary));
       background-color: var(--background, var(--colour-background));
-      transition:
-        0.2s background-color,
-        0.2s color;
     }
   }
 

package/src/constants.css

@@ -4,6 +4,12 @@
  * Variables
  */
 
+@property --schemed {
+  syntax: "light | dark";
+  inherits: false;
+  initial-value: token("colour.scheme");
+}
+
 :root {
   --_hue-primary: token("colour.primary");
   --_hue-accent: token("colour.accent");
@@ -13,34 +19,54 @@
   --_hue-success: token("colour.success");
   --_hue-outline: token("utility.outline.hue");
 
+  /* Brand colors */
+  --colour-primary: oklch(50% 0.3 var(--_hue-primary));
+  --colour-primary-light: color-mix(in oklch, var(--colour-primary), white 90%);
+  --colour-accent: oklch(50% 0.3 var(--_hue-accent));
+  --colour-accent-light: color-mix(in oklch, var(--colour-accent), white 90%);
+
   /* System colours */
-  --colour-background: token("colour.main.bg");
-  --colour-background-alt: token("colour.main.bgAlt");
-  --colour-foreground: token("colour.main.fg");
-  --colour-foreground-alt: token("colour.main.fgAlt");
-  --colour-border: token("colour.main.border");
+  --color-scheme: token("colour.scheme");
 
-  /* Brand colors */
-  --colour-primary: lch(43% 100 var(--_hue-primary));
-  --colour-primary-light: lch(95% 10 var(--_hue-primary));
-  --colour-accent: lch(43% 100 var(--_hue-accent));
-  --colour-accent-light: lch(95% 10 var(--_hue-accent));
+  color-scheme: var(--color-scheme);
+
+  --colour-background: light-dark(
+    token("colour.main.bg"),
+    token("colour.reverse.bg")
+  );
+  --colour-background-alt: light-dark(
+    token("colour.main.bgAlt"),
+    token("colour.reverse.bgAlt")
+  );
+  --colour-foreground: light-dark(
+    token("colour.main.fg"),
+    token("colour.reverse.fg")
+  );
+  --colour-foreground-alt: light-dark(
+    token("colour.main.fgAlt"),
+    token("colour.reverse.fgAlt")
+  );
+  --colour-border: light-dark(
+    token("colour.main.border"),
+    token("colour.reverse.border")
+  );
+  --colour-link: light-dark(var(--colour-primary), var(--colour-primary-light));
 
   /* Reverse colors */
-  --colour-foreground-reverse: token("colour.reverse.fg");
-  --colour-foreground-alt-reverse: token("colour.reverse.fgAlt");
-  --colour-background-reverse: token("colour.reverse.bg");
-  --colour-border-reverse: token("colour.reverse.border");
+  --colour-foreground-reverse: light-dark(
+    token("colour.reverse.fg"),
+    token("colour.main.fg")
+  );
+  --colour-background-reverse: light-dark(
+    token("colour.reverse.bg"),
+    token("colour.main.bg")
+  );
 
   /* State colours */
-  --colour-error-foreground: lch(40% 100 var(--_hue-error));
-  --colour-error-background: lch(95% 10 var(--_hue-error));
-  --colour-success-foreground: lch(45% 100 var(--_hue-success));
-  --colour-success-background: lch(95% 10 var(--_hue-success));
-  --colour-warning-foreground: lch(46% 100 var(--_hue-warning));
-  --colour-warning-background: lch(95% 10 var(--_hue-warning));
-  --colour-info-foreground: lch(43% 100 var(--_hue-info));
-  --colour-info-background: lch(95% 10 var(--_hue-info));
+  --colour-error: oklch(45% 0.3 var(--_hue-error));
+  --colour-success: oklch(50% 0.3 var(--_hue-success));
+  --colour-warning: oklch(55% 0.3 var(--_hue-warning));
+  --colour-info: oklch(50% 0.3 var(--_hue-info));
 
   /* Typography */
   --font-family: token("font.family");
@@ -82,9 +108,12 @@
   --spacing-uuul: token("size.spacing.uuul");
 
   --outline-width: token("utility.outline.width");
-  --outline-offset: token("utility.outline.offset");
   --outline-style: token("utility.outline.style");
-  --outline-color: lch(45% 100 var(--_hue-outline));
+  --_colour-outline: oklch(50% 0.3 var(--_hue-outline));
+  --outline-color: light-dark(
+    var(--colour-outline),
+    color-mix(in oklch, var(--colour-outline), white 90%)
+  );
 
   /* Layout */
   --container-max-width-narrow: token("size.container.narrow");

package/src/enums.ts

@@ -231,6 +231,7 @@ export enum BackgroundStyles {
   ALT = "alt",
   REVERSE = "reverse",
   RESET = "reset",
+  BOX = "box",
 }
 
 export enum TableStyles {

package/src/react.ts

@@ -57,6 +57,9 @@ export { default as Navigation } from "./Component/Navigation/Navigation"
 export { default as NavigationDropdown } from "./Component/Navigation/Dropdown"
 export { default as DropMenu } from "./Component/DropMenu/DropMenu"
 export { default as DropMenuItem } from "./Component/DropMenu/Components/DropMenuItem"
+export { default as ResultsBar } from "./Component/ResultsBar/ResultsBar"
+export { default as ResultsBarInfo } from "./Component/ResultsBar/Components/ResultsBarInfo"
+export { default as ResultsBarSort } from "./Component/ResultsBar/Components/ResultsBarSort"
 export {
   default as DropMenuProvider,
   useDropMenuContext,

package/src/tokens.js

@@ -29,26 +29,27 @@ export default {
     dropMenu: "420px",
   },
   colour: {
-    primary: "288",
-    accent: "328",
+    scheme: "light",
+    primary: "260",
+    accent: "320",
     main: {
-      fg: "lch(0% 0 0)",
-      bg: "lch(100% 0 0)",
-      fgAlt: "lch(25% 0 0)",
-      bgAlt: "lch(95% 0 0)",
-      border: "lch(90% 0 0)",
+      fg: "oklch(0 0 100)",
+      bg: "oklch(1 0 100)",
+      fgAlt: "oklch(0.25 0 100)",
+      bgAlt: "oklch(0.95 0 100)",
+      border: "oklch(.9 0 100)",
     },
     reverse: {
-      fg: "lch(100% 0 0)",
-      bg: "lch(0% 0 0)",
-      fgAlt: "lch(95% 0 0)",
-      bgAlt: "lch(25% 0 0)",
-      border: "lch(10% 0 0)",
+      fg: "oklch(1 0 100)",
+      bg: "oklch(0 0 100)",
+      fgAlt: "oklch(0.95 0 100)",
+      bgAlt: "oklch(0.25 0 100)",
+      border: "oklch(0.25 0 100)",
     },
-    info: "288",
-    warning: "70",
-    success: "134",
-    error: "34",
+    info: "260",
+    warning: "90",
+    success: "140",
+    error: "20",
   },
   font: {
     family: "system-ui, sans-serif",
@@ -101,9 +102,8 @@ export default {
   utility: {
     outline: {
       width: "2px",
-      offset: "0",
       style: "solid",
-      hue: "288",
+      hue: "260",
     },
     radius: {
       m: "3px",
@@ -111,7 +111,7 @@ export default {
       round: "50%",
     },
     shadow: {
-      colour: "lch(25% 0 0)",
+      colour: "oklch(0.25 0 100)",
       size: global.size.xs,
     },
     ratio: "16 / 9",

package/dist/build/chunks/utilities-B4YZb689.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utilities-B4YZb689.js","sources":["../../../node_modules/js-cookie/dist/js.cookie.mjs","../../../src/Utility/Elements/io-loader.ts","../../../src/Utility/Elements/breakpoint-loader.ts","../../../src/Utility/utilities.ts"],"sourcesContent":["/*! js-cookie v3.0.5 | MIT */\n/* eslint-disable no-var */\nfunction assign (target) {\n  for (var i = 1; i < arguments.length; i++) {\n    var source = arguments[i];\n    for (var key in source) {\n      target[key] = source[key];\n    }\n  }\n  return target\n}\n/* eslint-enable no-var */\n\n/* eslint-disable no-var */\nvar defaultConverter = {\n  read: function (value) {\n    if (value[0] === '\"') {\n      value = value.slice(1, -1);\n    }\n    return value.replace(/(%[\\dA-F]{2})+/gi, decodeURIComponent)\n  },\n  write: function (value) {\n    return encodeURIComponent(value).replace(\n      /%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,\n      decodeURIComponent\n    )\n  }\n};\n/* eslint-enable no-var */\n\n/* eslint-disable no-var */\n\nfunction init (converter, defaultAttributes) {\n  function set (name, value, attributes) {\n    if (typeof document === 'undefined') {\n      return\n    }\n\n    attributes = assign({}, defaultAttributes, attributes);\n\n    if (typeof attributes.expires === 'number') {\n      attributes.expires = new Date(Date.now() + attributes.expires * 864e5);\n    }\n    if (attributes.expires) {\n      attributes.expires = attributes.expires.toUTCString();\n    }\n\n    name = encodeURIComponent(name)\n      .replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent)\n      .replace(/[()]/g, escape);\n\n    var stringifiedAttributes = '';\n    for (var attributeName in attributes) {\n      if (!attributes[attributeName]) {\n        continue\n      }\n\n      stringifiedAttributes += '; ' + attributeName;\n\n      if (attributes[attributeName] === true) {\n        continue\n      }\n\n      // Considers RFC 6265 section 5.2:\n      // ...\n      // 3.  If the remaining unparsed-attributes contains a %x3B (\";\")\n      //     character:\n      // Consume the characters of the unparsed-attributes up to,\n      // not including, the first %x3B (\";\") character.\n      // ...\n      stringifiedAttributes += '=' + attributes[attributeName].split(';')[0];\n    }\n\n    return (document.cookie =\n      name + '=' + converter.write(value, name) + stringifiedAttributes)\n  }\n\n  function get (name) {\n    if (typeof document === 'undefined' || (arguments.length && !name)) {\n      return\n    }\n\n    // To prevent the for loop in the first place assign an empty array\n    // in case there are no cookies at all.\n    var cookies = document.cookie ? document.cookie.split('; ') : [];\n    var jar = {};\n    for (var i = 0; i < cookies.length; i++) {\n      var parts = cookies[i].split('=');\n      var value = parts.slice(1).join('=');\n\n      try {\n        var found = decodeURIComponent(parts[0]);\n        jar[found] = converter.read(value, found);\n\n        if (name === found) {\n          break\n        }\n      } catch (e) {}\n    }\n\n    return name ? jar[name] : jar\n  }\n\n  return Object.create(\n    {\n      set,\n      get,\n      remove: function (name, attributes) {\n        set(\n          name,\n          '',\n          assign({}, attributes, {\n            expires: -1\n          })\n        );\n      },\n      withAttributes: function (attributes) {\n        return init(this.converter, assign({}, this.attributes, attributes))\n      },\n      withConverter: function (converter) {\n        return init(assign({}, this.converter, converter), this.attributes)\n      }\n    },\n    {\n      attributes: { value: Object.freeze(defaultAttributes) },\n      converter: { value: Object.freeze(converter) }\n    }\n  )\n}\n\nvar api = init(defaultConverter, { path: '/' });\n/* eslint-enable no-var */\n\nexport { api as default };\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * Lazy Load on an Intersection Observer\n */\n\nexport default class IntersectionLoader {\n  el: HTMLElement\n  callback: () => any\n  observer: IntersectionObserver\n  fallbackBtn?: HTMLButtonElement\n  errorMsg?: HTMLElement\n\n  constructor(el: HTMLElement, callback: () => any) {\n    this.el = el\n    this.callback = callback\n    this.fallbackBtn = this.el.querySelector(\"[data-load-fallback]\")\n    this.errorMsg = this.el.querySelector(\"[data-load-error]\")\n  }\n\n  init = (): void => {\n    this.observer = new IntersectionObserver(items => {\n      items.forEach(({ isIntersecting }) => {\n        if (isIntersecting) this.load().catch(error => this.handleError(error))\n      })\n    })\n    this.observer.observe(this.el)\n    this.fallbackBtn?.addEventListener(\"click\", this.handleClick)\n  }\n\n  load = async (): Promise<void> => {\n    try {\n      await this.callback()\n    } catch (error) {\n      this.handleError(error)\n    }\n    this.observer.unobserve(this.el)\n  }\n\n  handleClick = (): void => {\n    this.load().catch(error => this.handleError(error))\n  }\n\n  handleError = (error): void => {\n    console.error(error) // eslint-disable-line no-console\n    this.errorMsg?.removeAttribute(\"hidden\")\n  }\n\n  static create = (selector: string, callback: () => any): void => {\n    if (!Object.hasOwn(window, \"once\")) return\n    window\n      .once(\"intersection-loader\", selector)\n      ?.forEach((el: HTMLElement): void => {\n        const loader: IntersectionLoader = new IntersectionLoader(el, callback)\n        loader.init()\n      })\n  }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * Lazy Load a component based on breakpoint.\n */\n\ntype BreakpointLoaderOptions = {\n  mediaQuery?: string\n}\n\nexport default class BreakpointLoader {\n  el: HTMLElement\n  callback: () => any\n  breakpoint: MediaQueryList\n  options: BreakpointLoaderOptions\n  fallbackBtn?: HTMLButtonElement\n  errorMsg?: HTMLElement\n\n  constructor(\n    el: HTMLElement,\n    callback: () => any,\n    options: BreakpointLoaderOptions = { mediaQuery: \"(max-width: 720px)\" },\n  ) {\n    if (!el) {\n      throw new Error(\"Element is null or empty.\")\n    }\n    this.el = el\n    this.callback = callback\n    this.breakpoint = window.matchMedia(options.mediaQuery)\n    this.options = { ...options }\n    this.fallbackBtn = this.el.querySelector(\"[data-load-fallback]\")\n    this.errorMsg = this.el.querySelector(\"[data-load-error]\")\n  }\n\n  init = (): void => {\n    this.responsiveCheck(this.breakpoint)\n    this.breakpoint.addEventListener(\"change\", this.responsiveCheck)\n    this.fallbackBtn?.addEventListener(\"click\", this.handleClick)\n  }\n\n  responsiveCheck = ({ matches }): void => {\n    matches && this.load().catch(error => this.handleError(error))\n  }\n\n  load = async (): Promise<void> => {\n    try {\n      await this.callback()\n    } catch (error) {\n      this.handleError(error)\n    }\n    this.breakpoint.removeEventListener(\"change\", this.responsiveCheck)\n  }\n\n  handleClick = (): void => {\n    this.load().catch(error => this.handleError(error))\n  }\n\n  handleError = (error): void => {\n    console.error(error) // eslint-disable-line no-console\n    this.errorMsg?.removeAttribute(\"hidden\")\n  }\n\n  static create = (\n    selector: string,\n    callback: () => any,\n    options: BreakpointLoaderOptions = {},\n  ): void => {\n    if (!Object.hasOwn(window, \"once\")) return\n    window\n      .once(\"breakpoint-loader\", selector)\n      ?.forEach((el: HTMLElement): void => {\n        const loader: BreakpointLoader = new BreakpointLoader(\n          el,\n          callback,\n          options,\n        )\n        loader.init()\n      })\n  }\n}\n","/* eslint-disable no-console */\n/**\n * @file utilities.\n */\n\nexport { default as DisclosureWidget } from \"./Elements/disclosure-widget\"\nexport type { DisclosureWidgetEvent } from \"./Elements/disclosure-widget\"\nexport { default as Keyboard } from \"./Elements/keyboard\"\nexport { default as CookieCompliance } from \"./Elements/cookie-compliance\"\nexport { default as IntersectionLoader } from \"./Elements/io-loader\"\nexport { default as BreakpointLoader } from \"./Elements/breakpoint-loader\"\n\nexport const makeAnchor = (string: string, length: number = 20): string => {\n  if (typeof string !== \"string\" || !string) return \"\"\n  // Convert the string to lowercase and remove non-alphanumeric characters.\n  let id: string = string\n    .toLowerCase()\n    .trim()\n    .replace(/\\s+/g, \"-\")\n    .replace(/[^-a-z0-9]/g, \"\")\n    .replace(/[\\n\\r]+|[\\s]{2,}/g, \"\")\n  // Ensure we start the id with a letter.\n  // Only run this several times.\n  const times: number[] = [...Array(6).keys()]\n  times.forEach((): void => {\n    if (!id.charAt(0).match(/[a-z]/g)) {\n      id = id.substring(1)\n    }\n  })\n  // Cut to the desired length.\n  if (length) id = id.substring(0, length + 1)\n\n  return id\n}\n\nexport const makeCamelCase = (string: string): string => {\n  if (typeof string !== \"string\" || !string) return \"\"\n  const output: string = string\n    .trim()\n    .replace(\n      /(?:^\\w|[A-Z]|\\b\\w|\\s+)/g,\n      (match: string, index: number): string => {\n        if (+match === 0) return \"\"\n        return index === 0 ? match.toLowerCase() : match.toUpperCase()\n      },\n    )\n  return output.replace(/[^\\w\\s]/gi, \"\")\n}\n\nexport const isInternalLink = (\n  href: string,\n  internalHostnames: string[],\n): boolean => {\n  if (typeof href !== \"string\" || !href || !Array.isArray(internalHostnames)) {\n    return false\n  }\n\n  try {\n    const { hostname }: { hostname: string } = new URL(href)\n    return (\n      window.location.hostname === hostname ||\n      internalHostnames.includes(hostname)\n    )\n  } catch (error) {\n    console.error(error)\n    return false\n  }\n}\n\nexport const createElement = (string: string): Element | null => {\n  try {\n    const el: HTMLDivElement = document.createElement(\"div\")\n    el.innerHTML = string\n    return el.firstElementChild\n  } catch (error) {\n    console.error(error)\n    return null\n  }\n}\n\nexport const getElementBox = (\n  element: HTMLElement,\n  once: boolean = false,\n  content: boolean = false,\n): void => {\n  const observer: ResizeObserver = new ResizeObserver(entries => {\n    entries.forEach(({ contentBoxSize, borderBoxSize }) => {\n      const [{ inlineSize, blockSize }] = content\n        ? contentBoxSize\n        : borderBoxSize\n      element.style.setProperty(\"--inline-size\", `${inlineSize.toFixed(1)}px`)\n      element.style.setProperty(\"--block-size\", `${blockSize.toFixed(1)}px`)\n      if (once) observer.unobserve(element)\n    })\n  })\n  observer.observe(element)\n}\n\nexport const handleOutsideClick = (\n  event: MouseEvent,\n  container: HTMLElement,\n  callback: () => void,\n  ignored: HTMLElement[] = [],\n): void => {\n  const {\n    target,\n    clientY,\n    clientX,\n  }: { target: EventTarget; clientY: number; clientX: number } = event\n  // FF treating option click as outside click.\n  const isOption: boolean =\n    target instanceof HTMLOptionElement || target instanceof HTMLSelectElement\n  // Or it's in the ignored list.\n\n  const isIgnored: HTMLElement[] = ignored?.filter(\n    item => item === target || item.contains(target as HTMLElement),\n  )\n  // Exit early if we can.\n  if (isIgnored.length || isOption) return\n  // Check if click is inside the dialog content.\n  const obs: IntersectionObserver = new IntersectionObserver(\n    ([{ boundingClientRect }]) => {\n      const { top, height, width, left } = boundingClientRect\n      const isInDialog: boolean =\n        top <= clientY &&\n        clientY <= top + height &&\n        left <= clientX &&\n        clientX <= left + width\n\n      if (!isInDialog) {\n        callback()\n      }\n      obs.disconnect()\n    },\n  )\n  obs.observe(container)\n}\n\nexport const handleEscape = (\n  event: KeyboardEvent,\n  callback: () => void,\n): void => {\n  const { key } = event\n  if (key === \"Escape\") {\n    callback()\n  }\n}\n\n/* eslint-disable no-unused-vars, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access */\nexport const loadOnReady = (\n  callback: (this: Window, ev: Event) => void,\n  name: string,\n): void => {\n  // @ts-expect-error Drupal is global\n  if (Object.hasOwn(window, \"Drupal\") && Object.hasOwn(Drupal, \"behaviors\")) {\n    // @ts-expect-error Drupal is global\n    Drupal.behaviors[name] = {\n      attach: callback,\n    }\n    return\n  }\n  window.addEventListener(\"DOMContentLoaded\", callback.bind(document, document))\n}\n"],"names":["converter"],"mappings":"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","x_google_ignoreList":[0]}

package/src/Component/Tile/tile.twig

@@ -1,10 +0,0 @@
-<div class="tile stack {{ modifier_class }}{% if size %} tile--{{ size }}{% endif %}">
-  <div class="tile__content vertical-flow-flex">
-    {% block content %}
-    <h3 class="text--m">{{ title | default('Tile title') }}</h3>
-    {% endblock %}
-  </div>
-  {% block link %}
-    <a href="#">{{ link | default('Tile link') }}</a>
-  {% endblock %}
-</div>