@pnx-mixtape/mxds 0.0.13 → 0.0.14

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

@@ -1,8 +1,7 @@
-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
@@ -18,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

@@ -27,28 +27,12 @@
       }
 
       &.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;
         }
       }
     }

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>

package/src/Component/Tile/tiles.css

@@ -1,58 +0,0 @@
-/**
- * Tiles
- */
-@layer design-system.components {
-  .tile {
-    --outline-offset: -2px;
-    --gap: var(--gap-s);
-
-    overflow: hidden;
-    position: relative;
-    border-radius: var(--border-radius);
-    background: var(--tile-background, var(--colour-background-alt));
-    color: var(--tile-foreground var(--colour-foreground));
-    min-block-size: var(--height, 160px);
-    transition:
-      0.2s background-color,
-      0.2s background-image,
-      0.2s color,
-      0.2s border-color;
-
-    &:is(.tile--has-link, :has(> a[href])) {
-      cursor: pointer;
-    }
-
-    & > a[href] {
-      display: block;
-      text-indent: -10000%;
-      block-size: 100%;
-    }
-
-    & .tile__content {
-      padding: var(--spacing-m);
-      position: relative;
-    }
-  }
-
-  &.tile--medium {
-    --height: 240px;
-  }
-
-  &.tile--large {
-    --height: 433px;
-  }
-}
-
-/**
- * Print stylesheet
- */
-
-@media print {
-  .tile {
-    display: block;
-    background-color: transparent;
-    background-image: none;
-    color: var(--colour-foreground);
-    min-block-size: 0;
-  }
-}

package/src/Component/Tile/twig/tiles.twig

@@ -1,18 +0,0 @@
-<div class="grid grid--xs-2-cols grid--md-4-cols spacing--bottom-l">
-  {% include "@mixtape/Component/Tile/tile.twig" %}
-  {% include "@mixtape/Component/Tile/tile.twig" %}
-  {% include "@mixtape/Component/Tile/tile.twig" %}
-  {% include "@mixtape/Component/Tile/tile.twig" %}
-</div>
-<div class="grid grid--md-3-cols">
-  {% include "@mixtape/Component/Tile/tile.twig" with { size: size } %}
-  {% include "@mixtape/Component/Tile/tile.twig" with { size: size } %}
-  {% embed "@mixtape/Component/Tile/tile.twig" with { size: size } %}
-    {% block content %}
-      <h3 class="text--m">{{ title | default('Tile title') }}</h3>
-      <p>Tile with some content</p>
-      <a href="#" class="link align--bottom">{{ link | default('read more') }}</a>
-    {% endblock %}
-    {% block link %}{% endblock %}
-  {% endembed %}
-</div>