@pnx-mixtape/mxds 0.0.15 → 0.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/dist/build/accordion.css +113 -1
  2. package/dist/build/accordion.entry.js +83 -1
  3. package/dist/build/accordion.entry.js.map +1 -0
  4. package/dist/build/base.css +1012 -1
  5. package/dist/build/breadcrumb.css +55 -1
  6. package/dist/build/button.css +127 -1
  7. package/dist/build/callout.css +11 -1
  8. package/dist/build/card.css +160 -1
  9. package/dist/build/carousel.css +125 -1
  10. package/dist/build/chunks/Accordion-O-huO4At.js +61 -0
  11. package/dist/build/chunks/Accordion-O-huO4At.js.map +1 -0
  12. package/dist/build/chunks/disclosure-widget-CtNx0f8p.js +124 -0
  13. package/dist/build/chunks/disclosure-widget-CtNx0f8p.js.map +1 -0
  14. package/dist/build/chunks/drop-menu.entry-BEhZ_Je3.js +132 -0
  15. package/dist/build/chunks/drop-menu.entry-BEhZ_Je3.js.map +1 -0
  16. package/dist/build/chunks/keyboard-C73DHu0c.js +101 -0
  17. package/dist/build/chunks/keyboard-C73DHu0c.js.map +1 -0
  18. package/dist/build/chunks/polyfills-DoxMZOqh.js +806 -0
  19. package/dist/build/chunks/polyfills-DoxMZOqh.js.map +1 -0
  20. package/dist/build/chunks/popover-DzUcnIlX.js +797 -0
  21. package/dist/build/chunks/popover-DzUcnIlX.js.map +1 -0
  22. package/dist/build/chunks/utilities-DXELy_An.js +245 -0
  23. package/dist/build/chunks/utilities-DXELy_An.js.map +1 -0
  24. package/dist/build/constants.css +151 -1
  25. package/dist/build/container-grid.css +186 -1
  26. package/dist/build/content-block.css +36 -1
  27. package/dist/build/dialog.css +116 -1
  28. package/dist/build/dialog.entry.js +93 -1
  29. package/dist/build/dialog.entry.js.map +1 -0
  30. package/dist/build/drop-menu.css +89 -1
  31. package/dist/build/drop-menu.entry.js +2 -1
  32. package/dist/build/drop-menu.entry.js.map +1 -0
  33. package/dist/build/drupal.css +70 -1
  34. package/dist/build/filters.css +117 -1
  35. package/dist/build/filters.entry.js +138 -1
  36. package/dist/build/filters.entry.js.map +1 -0
  37. package/dist/build/footer.css +141 -1
  38. package/dist/build/form.css +505 -1
  39. package/dist/build/global-alert.css +60 -1
  40. package/dist/build/global-alert.entry.js +68 -1
  41. package/dist/build/global-alert.entry.js.map +1 -0
  42. package/dist/build/grid.css +201 -1
  43. package/dist/build/header.css +161 -1
  44. package/dist/build/header.entry.js +103 -1
  45. package/dist/build/header.entry.js.map +1 -0
  46. package/dist/build/hero-banner.css +67 -1
  47. package/dist/build/icon.css +399 -1
  48. package/dist/build/in-page-alert.css +93 -1
  49. package/dist/build/in-page-navigation.css +17 -1
  50. package/dist/build/in-page-navigation.entry.js +99 -1
  51. package/dist/build/in-page-navigation.entry.js.map +1 -0
  52. package/dist/build/link-list.css +45 -1
  53. package/dist/build/list-item.css +29 -1
  54. package/dist/build/masthead.css +53 -1
  55. package/dist/build/navigation.css +391 -1
  56. package/dist/build/navigation.entry.js +124 -1
  57. package/dist/build/navigation.entry.js.map +1 -0
  58. package/dist/build/page.css +65 -1
  59. package/dist/build/pagination.css +117 -1
  60. package/dist/build/results-bar.css +21 -1
  61. package/dist/build/section.css +147 -1
  62. package/dist/build/side-navigation.css +85 -1
  63. package/dist/build/sidebar.css +53 -1
  64. package/dist/build/social-links.css +20 -1
  65. package/dist/build/steps.css +118 -1
  66. package/dist/build/sticky.css +47 -1
  67. package/dist/build/sticky.entry.js +60 -1
  68. package/dist/build/sticky.entry.js.map +1 -0
  69. package/dist/build/tabs.css +108 -1
  70. package/dist/build/tabs.entry.js +202 -1
  71. package/dist/build/tabs.entry.js.map +1 -0
  72. package/dist/build/tag.css +70 -1
  73. package/dist/build/utilities.css +178 -1
  74. package/package.json +11 -4
  75. package/src/Component/Card/Card.stories.ts +1 -1
  76. package/src/Component/Carousel/Carousel.stories.ts +1 -1
  77. package/src/Component/DropMenu/drop-menu.css +1 -1
  78. package/src/Component/ListItem/ListItem.stories.ts +1 -1
  79. package/src/Component/Tag/Tag.stories.ts +3 -3
  80. package/src/Component/Tag/tags.twig +2 -2
  81. package/src/Layout/Section/Section.stories.ts +2 -1
  82. package/src/Layout/Section/section.twig +3 -1
  83. package/dist/build/chunks/Accordion-RtUfbsTy.js +0 -1
  84. package/dist/build/chunks/disclosure-widget-CPdkUWkq.js +0 -1
  85. package/dist/build/chunks/drop-menu.entry-BqBzLfVC.js +0 -1
  86. package/dist/build/chunks/keyboard-Cs0cduxq.js +0 -1
  87. package/dist/build/chunks/polyfills-5KNOJw2W.js +0 -1
  88. package/dist/build/chunks/popover-CiVl-0jk.js +0 -1
  89. package/dist/build/chunks/utilities-CE6xwgqF.js +0 -2
@@ -1 +1,55 @@
1
- @layer design-system.components{.mx-nav--breadcrumbs{--nav-font-size: var(--font-size-s);position:relative;z-index:1;overflow:auto;white-space:nowrap;padding-inline:var(--outline-size);padding-block:var(--outline-size);margin-inline:calc(var(--outline-size) * -1);margin-block:calc(var(--outline-size) * -1)}.mx-nav--breadcrumbs>ul{gap:var(--breadcrumb-gap, var(--spacing-xxxxs))}.mx-nav--breadcrumbs>ul>li{color:var( --breadcrumb-foreground, var(--foreground, var(--colour-foreground-alt)) );display:flex;align-items:center}:is(.mx-nav--breadcrumbs>ul>li):where(:not(:last-child)):after{content:"";display:block;vertical-align:middle;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6 13.4L4.6 12l4-4-4-4L6 2.6 11.4 8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6 13.4L4.6 12l4-4-4-4L6 2.6 11.4 8z'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;block-size:var(--spacing-m);inline-size:var(--spacing-m);background-color:currentcolor}.mx-nav--breadcrumbs [aria-current=page]{pointer-events:none}:is([dir=rtl] .mx-nav--breadcrumbs,.translated-rtl .mx-nav--breadcrumbs)>ul>li:after{transform:rotate(180deg)}}
1
+ /**
2
+ * Breadcrumb Navigation
3
+ */
4
+
5
+ @layer design-system.components {
6
+ .mx-nav--breadcrumbs {
7
+ --nav-font-size: var(--font-size-s);
8
+
9
+ position: relative;
10
+ z-index: 1;
11
+ overflow: auto;
12
+ white-space: nowrap;
13
+ padding-inline: var(--outline-size);
14
+ padding-block: var(--outline-size);
15
+ margin-inline: calc(var(--outline-size) * -1);
16
+ margin-block: calc(var(--outline-size) * -1);
17
+ }
18
+
19
+ .mx-nav--breadcrumbs > ul {
20
+ gap: var(--breadcrumb-gap, var(--spacing-xxxxs));
21
+ }
22
+
23
+ .mx-nav--breadcrumbs > ul > li {
24
+ color: var(
25
+ --breadcrumb-foreground,
26
+ var(--foreground, var(--colour-foreground-alt))
27
+ );
28
+ display: flex;
29
+ align-items: center;
30
+ }
31
+
32
+ :is(.mx-nav--breadcrumbs > ul > li):where(:not(:last-child))::after {
33
+ content: "";
34
+ display: block;
35
+ vertical-align: middle;
36
+ -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6 13.4L4.6 12l4-4-4-4L6 2.6 11.4 8z'/%3E%3C/svg%3E");
37
+ mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6 13.4L4.6 12l4-4-4-4L6 2.6 11.4 8z'/%3E%3C/svg%3E");
38
+ -webkit-mask-position: center;
39
+ mask-position: center;
40
+ -webkit-mask-repeat: no-repeat;
41
+ mask-repeat: no-repeat;
42
+ block-size: var(--spacing-m);
43
+ inline-size: var(--spacing-m);
44
+ background-color: currentcolor;
45
+ }
46
+
47
+ .mx-nav--breadcrumbs [aria-current="page"] {
48
+ pointer-events: none;
49
+ }
50
+ :is([dir="rtl"] .mx-nav--breadcrumbs,.translated-rtl .mx-nav--breadcrumbs) > ul > li::after {
51
+ transform: rotate(180deg);
52
+ }
53
+ }
54
+
55
+ /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJyZWFkY3J1bWIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxtQ0FBbUM7O0lBRW5DLGtCQUFrQjtJQUNsQixVQUFVO0lBQ1YsY0FBYztJQUNkLG1CQUFtQjtJQUNuQixtQ0FBbUM7SUFDbkMsa0NBQWtDO0lBQ2xDLDZDQUE2QztJQUM3Qyw0Q0FBNEM7RUE4QjlDOztJQTVCRTtNQUNFLGdEQUFnRDtJQUNsRDs7SUFFQTtNQUNFOzs7T0FHQztNQUNELGFBQWE7TUFDYixtQkFBbUI7SUFhckI7O01BWEU7UUFDRSxXQUFXO1FBQ1gsY0FBYztRQUNkLHNCQUFzQjtRQUN0Qiw2TEFBZ0U7Z0JBQWhFLHFMQUFnRTtRQUNoRSw2QkFBcUI7Z0JBQXJCLHFCQUFxQjtRQUNyQiw4QkFBc0I7Z0JBQXRCLHNCQUFzQjtRQUN0Qiw0QkFBNEI7UUFDNUIsNkJBQTZCO1FBQzdCLDhCQUE4QjtNQUNoQzs7SUFHRjtNQUNFLG9CQUFvQjtJQUN0QjtJQUtBO01BQ0UseUJBQXlCO0lBQzNCO0FBRUoiLCJmaWxlIjoiYnJlYWRjcnVtYi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEJyZWFkY3J1bWIgTmF2aWdhdGlvblxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICAubXgtbmF2LS1icmVhZGNydW1icyB7XG4gICAgLS1uYXYtZm9udC1zaXplOiB2YXIoLS1mb250LXNpemUtcyk7XG5cbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgei1pbmRleDogMTtcbiAgICBvdmVyZmxvdzogYXV0bztcbiAgICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICAgIHBhZGRpbmctaW5saW5lOiB2YXIoLS1vdXRsaW5lLXNpemUpO1xuICAgIHBhZGRpbmctYmxvY2s6IHZhcigtLW91dGxpbmUtc2l6ZSk7XG4gICAgbWFyZ2luLWlubGluZTogY2FsYyh2YXIoLS1vdXRsaW5lLXNpemUpICogLTEpO1xuICAgIG1hcmdpbi1ibG9jazogY2FsYyh2YXIoLS1vdXRsaW5lLXNpemUpICogLTEpO1xuXG4gICAgJiA+IHVsIHtcbiAgICAgIGdhcDogdmFyKC0tYnJlYWRjcnVtYi1nYXAsIHZhcigtLXNwYWNpbmcteHh4eHMpKTtcbiAgICB9XG5cbiAgICAmID4gdWwgPiBsaSB7XG4gICAgICBjb2xvcjogdmFyKFxuICAgICAgICAtLWJyZWFkY3J1bWItZm9yZWdyb3VuZCxcbiAgICAgICAgdmFyKC0tZm9yZWdyb3VuZCwgdmFyKC0tY29sb3VyLWZvcmVncm91bmQtYWx0KSlcbiAgICAgICk7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcblxuICAgICAgJjp3aGVyZSg6bm90KDpsYXN0LWNoaWxkKSk6OmFmdGVyIHtcbiAgICAgICAgY29udGVudDogXCJcIjtcbiAgICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICAgIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gICAgICAgIG1hc2staW1hZ2U6IHN2Zy1sb2FkKFwiLi4vLi4vQXRvbS9JY29uL2ltYWdlcy9jaGV2cm9uLXJpZ2h0LnN2Z1wiKTtcbiAgICAgICAgbWFzay1wb3NpdGlvbjogY2VudGVyO1xuICAgICAgICBtYXNrLXJlcGVhdDogbm8tcmVwZWF0O1xuICAgICAgICBibG9jay1zaXplOiB2YXIoLS1zcGFjaW5nLW0pO1xuICAgICAgICBpbmxpbmUtc2l6ZTogdmFyKC0tc3BhY2luZy1tKTtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogY3VycmVudGNvbG9yO1xuICAgICAgfVxuICAgIH1cblxuICAgICYgW2FyaWEtY3VycmVudD1cInBhZ2VcIl0ge1xuICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgfVxuICB9XG5cbiAgW2Rpcj1cInJ0bFwiXSAubXgtbmF2LS1icmVhZGNydW1icyxcbiAgLnRyYW5zbGF0ZWQtcnRsIC5teC1uYXYtLWJyZWFkY3J1bWJzIHtcbiAgICAmID4gdWwgPiBsaTo6YWZ0ZXIge1xuICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ== */
@@ -1 +1,127 @@
1
- @layer design-system.atoms{.mx-button{--outline-offset: .0625rem;display:inline-flex;inline-size:-moz-fit-content;inline-size:fit-content;gap:var(--button-gap, var(--spacing-s));font-size:var(--button-font-size, var(--font-size));font-weight:var(--font-weight-bold);font-family:var(--font-family);line-height:var(--line-height-ui);border:2px solid var(--line-colour, var(--colour-border));border:var(--line-width, 2px) solid var(--line-colour, var(--colour-border));border-radius:var(--radius, var(--border-radius-l));padding-block:var(--vertical-padding, var(--spacing-xxs));padding-inline:var(--horizontal-padding, var(--spacing-m));background-color:var(--background, var(--colour-background));color:var(--foreground, var(--colour-foreground));text-decoration-line:none}.mx-button:hover{cursor:pointer;text-decoration-line:none}.mx-button:disabled{cursor:not-allowed;opacity:.3}.mx-button--full-width{inline-size:100%;justify-content:center}.mx-button--large{--vertical-padding: var(--spacing-s);--horizontal-padding: var(--spacing-l)}.mx-button--small{--button-font-size: var(--font-size-s);--vertical-padding: var(--spacing-xxxs);--horizontal-padding: var(--spacing-s)}.mx-button--icon-only{inline-size:var(--spacing-xl);block-size:var(--spacing-xl);padding:0;border-radius:var(--border-radius-round);overflow:hidden;flex-wrap:wrap}.mx-button--icon-only:before{inline-size:100%;block-size:100%;-webkit-mask-size:var(--spacing-s);mask-size:var(--spacing-s)}.mx-button--icon-only:has(.mx-icon){align-content:center;justify-content:center;place-content:center}}@layer design-system.atoms{.mx-button--dark{--line-colour: var(--colour-link);--background: var(--colour-link);--foreground: var(--colour-foreground-reverse)}.mx-button--dark.button--outline{--background: transparent;--foreground: var(--colour-primary)}.mx-button--light{border:transparent;color:var(--link-colour, var(--colour-link));text-decoration-line:underline}.mx-button--light:hover{text-decoration-line:underline}.mx-button--destructive{--line-colour: var(--colour-error);--background: var(--colour-error);--foreground: var(--colour-foreground-reverse)}.mx-button--destructive.button--outline{--background: transparent;--foreground: var(--colour-error)}.mx-button--white{--line-colour: var(--colour-foreground-reverse);--background: var(--colour-foreground-reverse);--foreground: var(--colour-foreground)}.mx-button--white.button--outline{--background: transparent;--foreground: var(--colour-foreground-reverse)}}
1
+ /**
2
+ * Buttons
3
+ */
4
+
5
+ @layer design-system.atoms {
6
+ .mx-button {
7
+ --outline-offset: 0.0625rem;
8
+
9
+ display: inline-flex;
10
+ inline-size: -moz-fit-content;
11
+ inline-size: fit-content;
12
+ gap: var(--button-gap, var(--spacing-s));
13
+ font-size: var(--button-font-size, var(--font-size));
14
+ font-weight: var(--font-weight-bold);
15
+ font-family: var(--font-family);
16
+ line-height: var(--line-height-ui);
17
+ border: 2px solid
18
+ var(--line-colour, var(--colour-border));
19
+ border: var(--line-width, 2px) solid
20
+ var(--line-colour, var(--colour-border));
21
+ border-radius: var(--radius, var(--border-radius-l));
22
+ padding-block: var(--vertical-padding, var(--spacing-xxs));
23
+ padding-inline: var(--horizontal-padding, var(--spacing-m));
24
+ background-color: var(--background, var(--colour-background));
25
+ color: var(--foreground, var(--colour-foreground));
26
+ text-decoration-line: none;
27
+ }
28
+
29
+ .mx-button:hover {
30
+ cursor: pointer;
31
+ text-decoration-line: none;
32
+ }
33
+
34
+ .mx-button:disabled {
35
+ cursor: not-allowed;
36
+ opacity: 0.3;
37
+ }
38
+
39
+ .mx-button--full-width {
40
+ inline-size: 100%;
41
+ justify-content: center;
42
+ }
43
+
44
+ .mx-button--large {
45
+ --vertical-padding: var(--spacing-s);
46
+ --horizontal-padding: var(--spacing-l);
47
+ }
48
+
49
+ .mx-button--small {
50
+ --button-font-size: var(--font-size-s);
51
+ --vertical-padding: var(--spacing-xxxs);
52
+ --horizontal-padding: var(--spacing-s);
53
+ }
54
+
55
+ .mx-button--icon-only {
56
+ inline-size: var(--spacing-xl);
57
+ block-size: var(--spacing-xl);
58
+ padding: 0;
59
+ border-radius: var(--border-radius-round);
60
+ overflow: hidden;
61
+ flex-wrap: wrap;
62
+ }
63
+
64
+ .mx-button--icon-only::before {
65
+ inline-size: 100%;
66
+ block-size: 100%;
67
+ -webkit-mask-size: var(--spacing-s);
68
+ mask-size: var(--spacing-s);
69
+ }
70
+
71
+ .mx-button--icon-only:has(.mx-icon) {
72
+ align-content: center;
73
+ justify-content: center;
74
+ place-content: center;
75
+ }
76
+ }
77
+
78
+ /**
79
+ * Buttons
80
+ */
81
+
82
+ @layer design-system.atoms {
83
+ .mx-button--dark {
84
+ --line-colour: var(--colour-link);
85
+ --background: var(--colour-link);
86
+ --foreground: var(--colour-foreground-reverse);
87
+ }
88
+
89
+ .mx-button--dark.button--outline {
90
+ --background: transparent;
91
+ --foreground: var(--colour-primary);
92
+ }
93
+
94
+ .mx-button--light {
95
+ border: transparent;
96
+ color: var(--link-colour, var(--colour-link));
97
+ text-decoration-line: underline;
98
+ }
99
+
100
+ .mx-button--light:hover {
101
+ text-decoration-line: underline;
102
+ }
103
+
104
+ .mx-button--destructive {
105
+ --line-colour: var(--colour-error);
106
+ --background: var(--colour-error);
107
+ --foreground: var(--colour-foreground-reverse);
108
+ }
109
+
110
+ .mx-button--destructive.button--outline {
111
+ --background: transparent;
112
+ --foreground: var(--colour-error);
113
+ }
114
+
115
+ .mx-button--white {
116
+ --line-colour: var(--colour-foreground-reverse);
117
+ --background: var(--colour-foreground-reverse);
118
+ --foreground: var(--colour-foreground);
119
+ }
120
+
121
+ .mx-button--white.button--outline {
122
+ --background: transparent;
123
+ --foreground: var(--colour-foreground-reverse);
124
+ }
125
+ }
126
+
127
+ /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9idXR0b25zLmNzcyIsIl9idXR0b25zLXN0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLDJCQUFxQjs7SUFFckIsb0JBQW9CO0lBQ3BCLDZCQUF3QjtJQUF4Qix3QkFBd0I7SUFDeEIsd0NBQXdDO0lBQ3hDLG9EQUFvRDtJQUNwRCxvQ0FBb0M7SUFDcEMsK0JBQStCO0lBQy9CLGtDQUFrQztJQUNsQzs4Q0FDMEM7SUFEMUM7OENBQzBDO0lBQzFDLG9EQUFvRDtJQUNwRCwwREFBMEQ7SUFDMUQsMkRBQTJEO0lBQzNELDZEQUE2RDtJQUM3RCxrREFBa0Q7SUFDbEQsMEJBQTBCO0VBVzVCOztJQVRFO01BQ0UsZUFBZTtNQUNmLDBCQUEwQjtJQUM1Qjs7SUFFQTtNQUNFLG1CQUFtQjtNQUNuQixZQUFZO0lBQ2Q7O0VBR0Y7SUFDRSxpQkFBaUI7SUFDakIsdUJBQXVCO0VBQ3pCOztFQUVBO0lBQ0Usb0NBQW9DO0lBQ3BDLHNDQUFzQztFQUN4Qzs7RUFFQTtJQUNFLHNDQUFzQztJQUN0Qyx1Q0FBdUM7SUFDdkMsc0NBQXNDO0VBQ3hDOztFQUVBO0lBQ0UsOEJBQThCO0lBQzlCLDZCQUE2QjtJQUM3QixVQUFVO0lBQ1YseUNBQXlDO0lBQ3pDLGdCQUFnQjtJQUNoQixlQUFlO0VBV2pCOztJQVRFO01BQ0UsaUJBQWlCO01BQ2pCLGdCQUFnQjtNQUNoQixtQ0FBMkI7Y0FBM0IsMkJBQTJCO0lBQzdCOztJQUVBO01BQ0UscUJBQXFCO01BQXJCLHVCQUFxQjtNQUFyQixxQkFBcUI7SUFDdkI7QUFFSjs7QUNyRUE7O0VBRUU7O0FBRUY7RUFDRTtJQUNFLGlDQUFpQztJQUNqQyxnQ0FBZ0M7SUFDaEMsOENBQThDO0VBTWhEOztJQUpFO01BQ0UseUJBQXlCO01BQ3pCLG1DQUFtQztJQUNyQzs7RUFHRjtJQUNFLG1CQUFtQjtJQUNuQiw2Q0FBNkM7SUFDN0MsK0JBQStCO0VBS2pDOztJQUhFO01BQ0UsK0JBQStCO0lBQ2pDOztFQUdGO0lBQ0Usa0NBQWtDO0lBQ2xDLGlDQUFpQztJQUNqQyw4Q0FBOEM7RUFNaEQ7O0lBSkU7TUFDRSx5QkFBeUI7TUFDekIsaUNBQWlDO0lBQ25DOztFQUdGO0lBQ0UsK0NBQStDO0lBQy9DLDhDQUE4QztJQUM5QyxzQ0FBc0M7RUFNeEM7O0lBSkU7TUFDRSx5QkFBeUI7TUFDekIsOENBQThDO0lBQ2hEO0FBRUoiLCJmaWxlIjoiYnV0dG9uLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQnV0dG9uc1xuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmF0b21zIHtcbiAgLm14LWJ1dHRvbiB7XG4gICAgLS1vdXRsaW5lLW9mZnNldDogMXB4O1xuXG4gICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgaW5saW5lLXNpemU6IGZpdC1jb250ZW50O1xuICAgIGdhcDogdmFyKC0tYnV0dG9uLWdhcCwgdmFyKC0tc3BhY2luZy1zKSk7XG4gICAgZm9udC1zaXplOiB2YXIoLS1idXR0b24tZm9udC1zaXplLCB2YXIoLS1mb250LXNpemUpKTtcbiAgICBmb250LXdlaWdodDogdmFyKC0tZm9udC13ZWlnaHQtYm9sZCk7XG4gICAgZm9udC1mYW1pbHk6IHZhcigtLWZvbnQtZmFtaWx5KTtcbiAgICBsaW5lLWhlaWdodDogdmFyKC0tbGluZS1oZWlnaHQtdWkpO1xuICAgIGJvcmRlcjogdmFyKC0tbGluZS13aWR0aCwgMnB4KSBzb2xpZFxuICAgICAgdmFyKC0tbGluZS1jb2xvdXIsIHZhcigtLWNvbG91ci1ib3JkZXIpKTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1yYWRpdXMsIHZhcigtLWJvcmRlci1yYWRpdXMtbCkpO1xuICAgIHBhZGRpbmctYmxvY2s6IHZhcigtLXZlcnRpY2FsLXBhZGRpbmcsIHZhcigtLXNwYWNpbmcteHhzKSk7XG4gICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWhvcml6b250YWwtcGFkZGluZywgdmFyKC0tc3BhY2luZy1tKSk7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tYmFja2dyb3VuZCwgdmFyKC0tY29sb3VyLWJhY2tncm91bmQpKTtcbiAgICBjb2xvcjogdmFyKC0tZm9yZWdyb3VuZCwgdmFyKC0tY29sb3VyLWZvcmVncm91bmQpKTtcbiAgICB0ZXh0LWRlY29yYXRpb24tbGluZTogbm9uZTtcblxuICAgICY6aG92ZXIge1xuICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgdGV4dC1kZWNvcmF0aW9uLWxpbmU6IG5vbmU7XG4gICAgfVxuXG4gICAgJjpkaXNhYmxlZCB7XG4gICAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICAgICAgb3BhY2l0eTogMC4zO1xuICAgIH1cbiAgfVxuXG4gIC5teC1idXR0b24tLWZ1bGwtd2lkdGgge1xuICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICB9XG5cbiAgLm14LWJ1dHRvbi0tbGFyZ2Uge1xuICAgIC0tdmVydGljYWwtcGFkZGluZzogdmFyKC0tc3BhY2luZy1zKTtcbiAgICAtLWhvcml6b250YWwtcGFkZGluZzogdmFyKC0tc3BhY2luZy1sKTtcbiAgfVxuXG4gIC5teC1idXR0b24tLXNtYWxsIHtcbiAgICAtLWJ1dHRvbi1mb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS1zKTtcbiAgICAtLXZlcnRpY2FsLXBhZGRpbmc6IHZhcigtLXNwYWNpbmcteHh4cyk7XG4gICAgLS1ob3Jpem9udGFsLXBhZGRpbmc6IHZhcigtLXNwYWNpbmctcyk7XG4gIH1cblxuICAubXgtYnV0dG9uLS1pY29uLW9ubHkge1xuICAgIGlubGluZS1zaXplOiB2YXIoLS1zcGFjaW5nLXhsKTtcbiAgICBibG9jay1zaXplOiB2YXIoLS1zcGFjaW5nLXhsKTtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMtcm91bmQpO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgZmxleC13cmFwOiB3cmFwO1xuXG4gICAgJjo6YmVmb3JlIHtcbiAgICAgIGlubGluZS1zaXplOiAxMDAlO1xuICAgICAgYmxvY2stc2l6ZTogMTAwJTtcbiAgICAgIG1hc2stc2l6ZTogdmFyKC0tc3BhY2luZy1zKTtcbiAgICB9XG5cbiAgICAmOmhhcygubXgtaWNvbikge1xuICAgICAgcGxhY2UtY29udGVudDogY2VudGVyO1xuICAgIH1cbiAgfVxufVxuIiwiLyoqXG4gKiBCdXR0b25zXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0uYXRvbXMge1xuICAubXgtYnV0dG9uLS1kYXJrIHtcbiAgICAtLWxpbmUtY29sb3VyOiB2YXIoLS1jb2xvdXItbGluayk7XG4gICAgLS1iYWNrZ3JvdW5kOiB2YXIoLS1jb2xvdXItbGluayk7XG4gICAgLS1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZC1yZXZlcnNlKTtcblxuICAgICYuYnV0dG9uLS1vdXRsaW5lIHtcbiAgICAgIC0tYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgICAtLWZvcmVncm91bmQ6IHZhcigtLWNvbG91ci1wcmltYXJ5KTtcbiAgICB9XG4gIH1cblxuICAubXgtYnV0dG9uLS1saWdodCB7XG4gICAgYm9yZGVyOiB0cmFuc3BhcmVudDtcbiAgICBjb2xvcjogdmFyKC0tbGluay1jb2xvdXIsIHZhcigtLWNvbG91ci1saW5rKSk7XG4gICAgdGV4dC1kZWNvcmF0aW9uLWxpbmU6IHVuZGVybGluZTtcblxuICAgICY6aG92ZXIge1xuICAgICAgdGV4dC1kZWNvcmF0aW9uLWxpbmU6IHVuZGVybGluZTtcbiAgICB9XG4gIH1cblxuICAubXgtYnV0dG9uLS1kZXN0cnVjdGl2ZSB7XG4gICAgLS1saW5lLWNvbG91cjogdmFyKC0tY29sb3VyLWVycm9yKTtcbiAgICAtLWJhY2tncm91bmQ6IHZhcigtLWNvbG91ci1lcnJvcik7XG4gICAgLS1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZC1yZXZlcnNlKTtcblxuICAgICYuYnV0dG9uLS1vdXRsaW5lIHtcbiAgICAgIC0tYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gICAgICAtLWZvcmVncm91bmQ6IHZhcigtLWNvbG91ci1lcnJvcik7XG4gICAgfVxuICB9XG5cbiAgLm14LWJ1dHRvbi0td2hpdGUge1xuICAgIC0tbGluZS1jb2xvdXI6IHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kLXJldmVyc2UpO1xuICAgIC0tYmFja2dyb3VuZDogdmFyKC0tY29sb3VyLWZvcmVncm91bmQtcmV2ZXJzZSk7XG4gICAgLS1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZCk7XG5cbiAgICAmLmJ1dHRvbi0tb3V0bGluZSB7XG4gICAgICAtLWJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuICAgICAgLS1mb3JlZ3JvdW5kOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZC1yZXZlcnNlKTtcbiAgICB9XG4gIH1cbn1cbiJdfQ== */
@@ -1 +1,11 @@
1
- @layer design-system.components{.mx-callout{padding-inline-start:var(--line-gap, var(--gap));border-inline-start:6px solid var(--line-colour, var(--colour-primary));border-inline-start:var(--line-width, 6px) solid var(--line-colour, var(--colour-primary))}}
1
+ @layer design-system.components {
2
+ .mx-callout {
3
+ padding-inline-start: var(--line-gap, var(--gap));
4
+ border-inline-start: 6px solid
5
+ var(--line-colour, var(--colour-primary));
6
+ border-inline-start: var(--line-width, 6px) solid
7
+ var(--line-colour, var(--colour-primary));
8
+ }
9
+ }
10
+
11
+ /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhbGxvdXQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0U7SUFDRSxpREFBaUQ7SUFDakQ7K0NBQzJDO0lBRDNDOytDQUMyQztFQUM3QztBQUNGIiwiZmlsZSI6ImNhbGxvdXQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5teC1jYWxsb3V0IHtcbiAgICBwYWRkaW5nLWlubGluZS1zdGFydDogdmFyKC0tbGluZS1nYXAsIHZhcigtLWdhcCkpO1xuICAgIGJvcmRlci1pbmxpbmUtc3RhcnQ6IHZhcigtLWxpbmUtd2lkdGgsIDZweCkgc29saWRcbiAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItcHJpbWFyeSkpO1xuICB9XG59XG4iXX0= */
@@ -1 +1,160 @@
1
- @layer design-system.components{.mx-card{block-size:100%;display:grid;grid-gap:var(--card-gap, var(--gap));gap:var(--card-gap, var(--gap))}.mx-card[class*=mx-background--]{border-radius:var(--border-radius)}@container (min-width: 720px){.mx-card[class*=mx-background--]{--content-min-spacing: var(--content-max-spacing, var(--spacing-m))}}.mx-card[class*=mx-background--] .mx-card__content{padding-inline:var(--content-min-spacing, var(--spacing-s));padding-block-end:var(--content-min-spacing, var(--spacing-s))}.mx-card[class*=mx-background--]:not(:has(.mx-card__media,.mx-card__icon)) .mx-card__content{padding-block-start:var(--content-min-spacing, var(--spacing-s))}.mx-card[class*=mx-background--] .mx-card__icon{padding-inline:var(--content-min-spacing, var(--spacing-s));padding-block-start:var(--content-min-spacing, var(--spacing-s))}.mx-card.mx-background--box[class*=mx-background--]{padding-inline:unset}.mx-card:has(.mx-card__media){grid-template:"media" "content" 1fr / 1fr}@container (min-width: 720px){.mx-card:has(.mx-card__media){--card-gap: var(--gap-l);grid-template:"media content" 1fr / 1fr 1fr;grid-template:"media content" 1fr / var(--media-col, 1fr) var( --content-col, 1fr )}.mx-card.mx-card--reversed:has(.mx-card__media){grid-template-areas:"content media";grid-template-columns:1fr 1fr;grid-template-columns:var(--content-col, 1fr) var(--media-col, 1fr)}}@container (min-width: 946px){.mx-card:has(.mx-card__media){--card-gap: var(--large-card-gap, 6rem)}}@container (min-width: 720px){.mx-card[class*=mx-background--]:has(.mx-card__media) .mx-card__content{padding-block-start:var(--content-min-spacing, var(--spacing-s))}.mx-card[class*=mx-background--]:has(.mx-card__media):where(:not(.mx-card--reversed)) .mx-card__content{padding-inline-start:0}.mx-card.mx-card--reversed[class*=mx-background--]:has(.mx-card__media) .mx-card__content{padding-inline-end:0}}.mx-card:has(.mx-card__media) .mx-card__content{grid-area:content;align-self:center;align-self:var(--align-content, center)}.mx-card:has(.mx-card__media) .mx-card__media{grid-area:media;align-self:center;align-self:var(--align-media, center);inline-size:100%}:is(.mx-card:has(.mx-card__media) .mx-card__media) img{aspect-ratio:var(--ratio);border-radius:var(--border-radius);-o-object-fit:cover;object-fit:cover;inline-size:100%}.mx-card:has(.mx-card__media) .mx-skeleton--bg{grid-area:media}.mx-card:has(.mx-card__media) .mx-card__icon{grid-area:media}.mx-card .mx-link-list{inline-size:100%}.mx-card__content>a:last-child{margin-block-start:auto}}@layer design-system.components{.mx-grid:has(>*:nth-child(2):last-child)>:is(.mx-card,.mx-container:has(.mx-card)){inline-size:min(100%,37ch);inline-size:min(100%,var(--max-card-width, 37ch));margin-inline:auto}}@layer design-system.components{a.mx-card[href]:hover{color:inherit}.mx-card--block{position:relative}.mx-card--block a:before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%}}
1
+ /**
2
+ * Content Card
3
+ */
4
+
5
+ @layer design-system.components {
6
+ .mx-card {
7
+ block-size: 100%;
8
+ display: grid;
9
+ grid-gap: var(--card-gap, var(--gap));
10
+ gap: var(--card-gap, var(--gap));
11
+ }
12
+
13
+ .mx-card[class*="mx-background--"] {
14
+ border-radius: var(--border-radius);
15
+ }
16
+
17
+ @container (min-width: 720px) {
18
+
19
+ .mx-card[class*="mx-background--"] {
20
+ --content-min-spacing: var(--content-max-spacing, var(--spacing-m));
21
+ }
22
+ }
23
+
24
+ .mx-card[class*="mx-background--"] .mx-card__content {
25
+ padding-inline: var(--content-min-spacing, var(--spacing-s));
26
+ padding-block-end: var(--content-min-spacing, var(--spacing-s));
27
+ }
28
+
29
+ .mx-card[class*="mx-background--"]:not(:has(.mx-card__media,.mx-card__icon)) .mx-card__content {
30
+ padding-block-start: var(--content-min-spacing, var(--spacing-s));
31
+ }
32
+
33
+ .mx-card[class*="mx-background--"] .mx-card__icon {
34
+ padding-inline: var(--content-min-spacing, var(--spacing-s));
35
+ padding-block-start: var(--content-min-spacing, var(--spacing-s));
36
+ }
37
+
38
+ .mx-card.mx-background--box[class*="mx-background--"] {
39
+ padding-inline: unset;
40
+ }
41
+
42
+ .mx-card:has(.mx-card__media) {
43
+ grid-template: "media" "content" 1fr / 1fr;
44
+ }
45
+
46
+ @container (min-width: 720px) {
47
+
48
+ .mx-card:has(.mx-card__media) {
49
+ --card-gap: var(--gap-l);
50
+
51
+ grid-template: "media content" 1fr / 1fr 1fr;
52
+
53
+ grid-template: "media content" 1fr / var(--media-col, 1fr) var(
54
+ --content-col,
55
+ 1fr
56
+ );
57
+ }
58
+
59
+ .mx-card.mx-card--reversed:has(.mx-card__media) {
60
+ grid-template-areas: "content media";
61
+ grid-template-columns: 1fr 1fr;
62
+ grid-template-columns: var(--content-col, 1fr) var(--media-col, 1fr);
63
+ }
64
+ }
65
+
66
+ @container (min-width: 946px) {
67
+
68
+ .mx-card:has(.mx-card__media) {
69
+ --card-gap: var(--large-card-gap, 6rem);
70
+ }
71
+ }
72
+ @container (min-width: 720px) {
73
+ .mx-card[class*="mx-background--"]:has(.mx-card__media) .mx-card__content {
74
+ padding-block-start: var(--content-min-spacing, var(--spacing-s));
75
+ }
76
+
77
+ .mx-card[class*="mx-background--"]:has(.mx-card__media):where(:not(.mx-card--reversed)) .mx-card__content {
78
+ padding-inline-start: 0;
79
+ }
80
+
81
+ .mx-card.mx-card--reversed[class*="mx-background--"]:has(.mx-card__media) .mx-card__content {
82
+ padding-inline-end: 0;
83
+ }
84
+ }
85
+
86
+ .mx-card:has(.mx-card__media) .mx-card__content {
87
+ grid-area: content;
88
+ align-self: center;
89
+ align-self: var(--align-content, center);
90
+ }
91
+
92
+ .mx-card:has(.mx-card__media) .mx-card__media {
93
+ grid-area: media;
94
+ align-self: center;
95
+ align-self: var(--align-media, center);
96
+ inline-size: 100%;
97
+ }
98
+
99
+ :is(.mx-card:has(.mx-card__media) .mx-card__media) img {
100
+ aspect-ratio: var(--ratio);
101
+ border-radius: var(--border-radius);
102
+ -o-object-fit: cover;
103
+ object-fit: cover;
104
+ inline-size: 100%;
105
+ }
106
+
107
+ .mx-card:has(.mx-card__media) .mx-skeleton--bg {
108
+ grid-area: media;
109
+ }
110
+
111
+ .mx-card:has(.mx-card__media) .mx-card__icon {
112
+ grid-area: media;
113
+ }
114
+
115
+ .mx-card .mx-link-list {
116
+ inline-size: 100%;
117
+ }
118
+
119
+ .mx-card__content > a:last-child {
120
+ margin-block-start: auto;
121
+ }
122
+ }
123
+
124
+ /**
125
+ * Content Card Grid
126
+ */
127
+
128
+ @layer design-system.components {
129
+ .mx-grid:has(> *:nth-child(2):last-child)
130
+ > :is(.mx-card, .mx-container:has(.mx-card)) {
131
+ inline-size: min(100%, 37ch);
132
+ inline-size: min(100%, var(--max-card-width, 37ch));
133
+ margin-inline: auto;
134
+ }
135
+ }
136
+
137
+ /**
138
+ * Content Card Linked
139
+ */
140
+
141
+ @layer design-system.components {
142
+ a.mx-card[href]:hover {
143
+ color: inherit;
144
+ }
145
+
146
+ .mx-card--block {
147
+ position: relative;
148
+ }
149
+
150
+ .mx-card--block a::before {
151
+ content: "";
152
+ position: absolute;
153
+ inset-block-start: 0;
154
+ inset-inline-start: 0;
155
+ inline-size: 100%;
156
+ block-size: 100%;
157
+ }
158
+ }
159
+
160
+ /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhcmQuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztFQUVFOztBQUVGO0VBQ0U7SUFDRSxnQkFBZ0I7SUFDaEIsYUFBYTtJQUNiLHFDQUFnQztJQUFoQyxnQ0FBZ0M7RUErRmxDOztJQTdGRTtNQUNFLG1DQUFtQztJQXVCckM7O01BckJFOztJQUhGO1FBSUksbUVBQW1FO0lBb0J2RTtNQW5CRTs7TUFFQTtRQUNFLDREQUE0RDtRQUM1RCwrREFBK0Q7TUFDakU7O01BRUE7UUFDRSxpRUFBaUU7TUFDbkU7O01BRUE7UUFDRSw0REFBNEQ7UUFDNUQsaUVBQWlFO01BQ25FOztNQUVBO1FBQ0UscUJBQXFCO01BQ3ZCOztJQUdGO01BQ0UsMENBQTBDO0lBNkQ1Qzs7TUEzREU7O0lBSEY7UUFJSSx3QkFBd0I7O1FBRXhCLDRDQUdHOztRQUhIOzs7V0FHRztJQXFEUDs7UUFuREk7VUFDRSxvQ0FBb0M7VUFDcEMsOEJBQW9FO1VBQXBFLG9FQUFvRTtRQUN0RTtNQUNGOztNQUVBOztJQWpCRjtRQWtCSSx1Q0FBdUM7SUE0QzNDO01BM0NFO1FBR0U7VUFDRTtZQUNFLGlFQUFpRTtVQUNuRTs7VUFFQTtZQUNFLHVCQUF1QjtVQUN6Qjs7VUFFQTtZQUNFLHFCQUFxQjtVQUN2QjtRQUNGOztNQUdGO1FBQ0Usa0JBQWtCO1FBQ2xCLGtCQUF3QztRQUF4Qyx3Q0FBd0M7TUFDMUM7O01BRUE7UUFDRSxnQkFBZ0I7UUFDaEIsa0JBQXNDO1FBQXRDLHNDQUFzQztRQUN0QyxpQkFBaUI7TUFRbkI7O1FBTkU7VUFDRSwwQkFBMEI7VUFDMUIsbUNBQW1DO1VBQ25DLG9CQUFpQjthQUFqQixpQkFBaUI7VUFDakIsaUJBQWlCO1FBQ25COztNQUdGO1FBQ0UsZ0JBQWdCO01BQ2xCOztNQUVBO1FBQ0UsZ0JBQWdCO01BQ2xCOztJQUdGO01BQ0UsaUJBQWlCO0lBQ25COztFQUdGO0lBQ0Usd0JBQXdCO0VBQzFCO0FBQ0Y7O0FBRUE7O0VBRUU7O0FBRUY7RUFDRTs7SUFFRSw0QkFBbUQ7SUFBbkQsbURBQW1EO0lBQ25ELG1CQUFtQjtFQUNyQjtBQUNGOztBQUVBOztFQUVFOztBQUVGO0lBRUk7TUFDRSxjQUFjO0lBQ2hCOztFQUdGO0lBQ0Usa0JBQWtCO0VBVXBCOztJQVJFO01BQ0UsV0FBVztNQUNYLGtCQUFrQjtNQUNsQixvQkFBb0I7TUFDcEIscUJBQXFCO01BQ3JCLGlCQUFpQjtNQUNqQixnQkFBZ0I7SUFDbEI7QUFFSiIsImZpbGUiOiJjYXJkLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29udGVudCBDYXJkXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5teC1jYXJkIHtcbiAgICBibG9jay1zaXplOiAxMDAlO1xuICAgIGRpc3BsYXk6IGdyaWQ7XG4gICAgZ2FwOiB2YXIoLS1jYXJkLWdhcCwgdmFyKC0tZ2FwKSk7XG5cbiAgICAmW2NsYXNzKj1cIm14LWJhY2tncm91bmQtLVwiXSB7XG4gICAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTtcblxuICAgICAgQGNvbnRhaW5lciAobWluLXdpZHRoOiB0b2tlbihcImJyZWFrcG9pbnQuY29udGVudENhcmRcIikpIHtcbiAgICAgICAgLS1jb250ZW50LW1pbi1zcGFjaW5nOiB2YXIoLS1jb250ZW50LW1heC1zcGFjaW5nLCB2YXIoLS1zcGFjaW5nLW0pKTtcbiAgICAgIH1cblxuICAgICAgJiAubXgtY2FyZF9fY29udGVudCB7XG4gICAgICAgIHBhZGRpbmctaW5saW5lOiB2YXIoLS1jb250ZW50LW1pbi1zcGFjaW5nLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgICAgICAgcGFkZGluZy1ibG9jay1lbmQ6IHZhcigtLWNvbnRlbnQtbWluLXNwYWNpbmcsIHZhcigtLXNwYWNpbmctcykpO1xuICAgICAgfVxuXG4gICAgICAmOm5vdCg6aGFzKC5teC1jYXJkX19tZWRpYSwgLm14LWNhcmRfX2ljb24pKSAubXgtY2FyZF9fY29udGVudCB7XG4gICAgICAgIHBhZGRpbmctYmxvY2stc3RhcnQ6IHZhcigtLWNvbnRlbnQtbWluLXNwYWNpbmcsIHZhcigtLXNwYWNpbmctcykpO1xuICAgICAgfVxuXG4gICAgICAmIC5teC1jYXJkX19pY29uIHtcbiAgICAgICAgcGFkZGluZy1pbmxpbmU6IHZhcigtLWNvbnRlbnQtbWluLXNwYWNpbmcsIHZhcigtLXNwYWNpbmctcykpO1xuICAgICAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1jb250ZW50LW1pbi1zcGFjaW5nLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgICAgIH1cblxuICAgICAgJi5teC1iYWNrZ3JvdW5kLS1ib3gge1xuICAgICAgICBwYWRkaW5nLWlubGluZTogdW5zZXQ7XG4gICAgICB9XG4gICAgfVxuXG4gICAgJjpoYXMoLm14LWNhcmRfX21lZGlhKSB7XG4gICAgICBncmlkLXRlbXBsYXRlOiBcIm1lZGlhXCIgXCJjb250ZW50XCIgMWZyIC8gMWZyO1xuXG4gICAgICBAY29udGFpbmVyIChtaW4td2lkdGg6IHRva2VuKFwiYnJlYWtwb2ludC5jb250ZW50Q2FyZFwiKSkge1xuICAgICAgICAtLWNhcmQtZ2FwOiB2YXIoLS1nYXAtbCk7XG5cbiAgICAgICAgZ3JpZC10ZW1wbGF0ZTogXCJtZWRpYSBjb250ZW50XCIgMWZyIC8gdmFyKC0tbWVkaWEtY29sLCAxZnIpIHZhcihcbiAgICAgICAgICAgIC0tY29udGVudC1jb2wsXG4gICAgICAgICAgICAxZnJcbiAgICAgICAgICApO1xuXG4gICAgICAgICYubXgtY2FyZC0tcmV2ZXJzZWQge1xuICAgICAgICAgIGdyaWQtdGVtcGxhdGUtYXJlYXM6IFwiY29udGVudCBtZWRpYVwiO1xuICAgICAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogdmFyKC0tY29udGVudC1jb2wsIDFmcikgdmFyKC0tbWVkaWEtY29sLCAxZnIpO1xuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgIEBjb250YWluZXIgKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50LmxcIikpIHtcbiAgICAgICAgLS1jYXJkLWdhcDogdmFyKC0tbGFyZ2UtY2FyZC1nYXAsIDZyZW0pO1xuICAgICAgfVxuXG4gICAgICAmW2NsYXNzKj1cIm14LWJhY2tncm91bmQtLVwiXSB7XG4gICAgICAgIEBjb250YWluZXIgKG1pbi13aWR0aDogdG9rZW4oXCJicmVha3BvaW50LmNvbnRlbnRDYXJkXCIpKSB7XG4gICAgICAgICAgJiAubXgtY2FyZF9fY29udGVudCB7XG4gICAgICAgICAgICBwYWRkaW5nLWJsb2NrLXN0YXJ0OiB2YXIoLS1jb250ZW50LW1pbi1zcGFjaW5nLCB2YXIoLS1zcGFjaW5nLXMpKTtcbiAgICAgICAgICB9XG5cbiAgICAgICAgICAmOndoZXJlKDpub3QoLm14LWNhcmQtLXJldmVyc2VkKSkgLm14LWNhcmRfX2NvbnRlbnQge1xuICAgICAgICAgICAgcGFkZGluZy1pbmxpbmUtc3RhcnQ6IDA7XG4gICAgICAgICAgfVxuXG4gICAgICAgICAgJi5teC1jYXJkLS1yZXZlcnNlZCAubXgtY2FyZF9fY29udGVudCB7XG4gICAgICAgICAgICBwYWRkaW5nLWlubGluZS1lbmQ6IDA7XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9XG5cbiAgICAgICYgLm14LWNhcmRfX2NvbnRlbnQge1xuICAgICAgICBncmlkLWFyZWE6IGNvbnRlbnQ7XG4gICAgICAgIGFsaWduLXNlbGY6IHZhcigtLWFsaWduLWNvbnRlbnQsIGNlbnRlcik7XG4gICAgICB9XG5cbiAgICAgICYgLm14LWNhcmRfX21lZGlhIHtcbiAgICAgICAgZ3JpZC1hcmVhOiBtZWRpYTtcbiAgICAgICAgYWxpZ24tc2VsZjogdmFyKC0tYWxpZ24tbWVkaWEsIGNlbnRlcik7XG4gICAgICAgIGlubGluZS1zaXplOiAxMDAlO1xuXG4gICAgICAgICYgaW1nIHtcbiAgICAgICAgICBhc3BlY3QtcmF0aW86IHZhcigtLXJhdGlvKTtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzKTtcbiAgICAgICAgICBvYmplY3QtZml0OiBjb3ZlcjtcbiAgICAgICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICAgICAgfVxuICAgICAgfVxuXG4gICAgICAmIC5teC1za2VsZXRvbi0tYmcge1xuICAgICAgICBncmlkLWFyZWE6IG1lZGlhO1xuICAgICAgfVxuXG4gICAgICAmIC5teC1jYXJkX19pY29uIHtcbiAgICAgICAgZ3JpZC1hcmVhOiBtZWRpYTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmIC5teC1saW5rLWxpc3Qge1xuICAgICAgaW5saW5lLXNpemU6IDEwMCU7XG4gICAgfVxuICB9XG5cbiAgLm14LWNhcmRfX2NvbnRlbnQgPiBhOmxhc3QtY2hpbGQge1xuICAgIG1hcmdpbi1ibG9jay1zdGFydDogYXV0bztcbiAgfVxufVxuXG4vKipcbiAqIENvbnRlbnQgQ2FyZCBHcmlkXG4gKi9cblxuQGxheWVyIGRlc2lnbi1zeXN0ZW0uY29tcG9uZW50cyB7XG4gIC5teC1ncmlkOmhhcyg+ICo6bnRoLWNoaWxkKDIpOmxhc3QtY2hpbGQpXG4gICAgPiA6aXMoLm14LWNhcmQsIC5teC1jb250YWluZXI6aGFzKC5teC1jYXJkKSkge1xuICAgIGlubGluZS1zaXplOiBtaW4oMTAwJSwgdmFyKC0tbWF4LWNhcmQtd2lkdGgsIDM3Y2gpKTtcbiAgICBtYXJnaW4taW5saW5lOiBhdXRvO1xuICB9XG59XG5cbi8qKlxuICogQ29udGVudCBDYXJkIExpbmtlZFxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMge1xuICBhW2hyZWZdLm14LWNhcmQge1xuICAgICY6aG92ZXIge1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgfVxuICB9XG5cbiAgLm14LWNhcmQtLWJsb2NrIHtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICAmIGE6OmJlZm9yZSB7XG4gICAgICBjb250ZW50OiBcIlwiO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgaW5zZXQtYmxvY2stc3RhcnQ6IDA7XG4gICAgICBpbnNldC1pbmxpbmUtc3RhcnQ6IDA7XG4gICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICAgIGJsb2NrLXNpemU6IDEwMCU7XG4gICAgfVxuICB9XG59XG4iXX0= */
@@ -1 +1,125 @@
1
- @layer design-system.components.carousel{.mx-carousel{display:block}.mx-carousel__scrollable{list-style:none;display:flex;block-size:auto;block-size:var(--block-size, auto);overflow-x:auto;overflow-y:hidden;overflow:auto hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-color:var(--colour-foreground) var(--colour-background)}.mx-carousel__scrollable::-webkit-scrollbar{block-size:1rem}.mx-carousel__scrollable::-webkit-scrollbar-track{background-color:var(--colour-background)}.mx-carousel__scrollable::-webkit-scrollbar-thumb{background-color:var(--colour-foreground);background-image:linear-gradient(var(--colour-background) 0,var(--colour-background) .25rem,var(--colour-foreground) .25rem,var(--colour-foreground) .75rem,var(--colour-background) .75rem)}.mx-carousel__scrollable>li{flex:0 0 25ch;flex:0 0 var(--inline-size, 25ch);display:flex;scroll-snap-align:start}[inert]:is(.mx-carousel__scrollable>li){opacity:.3}:is(.mx-carousel__scrollable>li)+li{margin-inline-start:var(--gap)}:is(.mx-carousel__scrollable>li) .mx-container{inline-size:100%;display:flex}.mx-carousel__scrollable:not(:first-child){padding-block-start:var(--gap)}.mx-carousel__scrollable.overflowing:not(.no-bar){padding-block-end:var(--gap)}.mx-carousel__scrollable.no-bar{scrollbar-width:none}.mx-carousel__scrollable.no-bar::-webkit-scrollbar{display:none}.mx-carousel__buttons:not([hidden]){display:flex;gap:var(--gap-s)}.mx-carousel__buttons button[disabled]{opacity:.5}.mx-carousel__pagination{list-style:none;padding-inline:0;display:flex;align-items:center;gap:var(--spacing-xxxs)}.mx-carousel__pagination[data-pagination=counter]{--border-radius: var(--border-radius-round);--indent: 200%}.mx-carousel__pagination button{border-radius:var(--border-radius);border:2px solid var(--line-colour, var(--colour-border));border:var(--line-width, 2px) solid var(--line-colour, var(--colour-border));background-color:var(--background, var(--colour-background));color:var(--foreground, var(--colour-foreground));min-block-size:2em;min-inline-size:2em;font-family:inherit;text-align:center;cursor:pointer;overflow:hidden;text-indent:inherit;text-indent:var(--indent, unset)}[disabled]:is(.mx-carousel__pagination button){--background: var(--active-background, var(--colour-border));cursor:not-allowed}}
1
+ /**
2
+ * Carousel.
3
+ */
4
+
5
+ @layer design-system.components.carousel {
6
+ .mx-carousel {
7
+ display: block;
8
+ }
9
+
10
+ .mx-carousel__scrollable {
11
+ list-style: none;
12
+ display: flex;
13
+ block-size: auto;
14
+ block-size: var(--block-size, auto);
15
+ overflow-x: auto;
16
+ overflow-y: hidden;
17
+ overflow: auto hidden;
18
+ scroll-snap-type: x mandatory;
19
+ -webkit-overflow-scrolling: touch;
20
+ scroll-behavior: smooth;
21
+ scrollbar-color: var(--colour-foreground) var(--colour-background);
22
+ }
23
+
24
+ .mx-carousel__scrollable::-webkit-scrollbar {
25
+ block-size: 1rem;
26
+ }
27
+
28
+ .mx-carousel__scrollable::-webkit-scrollbar-track {
29
+ background-color: var(--colour-background);
30
+ }
31
+
32
+ .mx-carousel__scrollable::-webkit-scrollbar-thumb {
33
+ background-color: var(--colour-foreground);
34
+ background-image: linear-gradient(
35
+ var(--colour-background) 0,
36
+ var(--colour-background) 0.25rem,
37
+ var(--colour-foreground) 0.25rem,
38
+ var(--colour-foreground) 0.75rem,
39
+ var(--colour-background) 0.75rem
40
+ );
41
+ }
42
+
43
+ .mx-carousel__scrollable > li {
44
+ flex: 0 0 25ch;
45
+ flex: 0 0 var(--inline-size, 25ch);
46
+ display: flex;
47
+ scroll-snap-align: start;
48
+ }
49
+
50
+ [inert]:is(.mx-carousel__scrollable > li) {
51
+ opacity: 0.3;
52
+ }
53
+
54
+ :is(.mx-carousel__scrollable > li) + li {
55
+ margin-inline-start: var(--gap);
56
+ }
57
+
58
+ :is(.mx-carousel__scrollable > li) .mx-container {
59
+ inline-size: 100%;
60
+ display: flex;
61
+ }
62
+
63
+ .mx-carousel__scrollable:not(:first-child) {
64
+ padding-block-start: var(--gap);
65
+ }
66
+
67
+ .mx-carousel__scrollable.overflowing:not(.no-bar) {
68
+ padding-block-end: var(--gap);
69
+ }
70
+
71
+ .mx-carousel__scrollable.no-bar {
72
+ scrollbar-width: none;
73
+ }
74
+
75
+ .mx-carousel__scrollable.no-bar::-webkit-scrollbar {
76
+ display: none;
77
+ }
78
+ .mx-carousel__buttons:not([hidden]) {
79
+ display: flex;
80
+ gap: var(--gap-s);
81
+ }
82
+
83
+ .mx-carousel__buttons button[disabled] {
84
+ opacity: 0.5;
85
+ }
86
+
87
+ .mx-carousel__pagination {
88
+ list-style: none;
89
+ padding-inline: 0;
90
+ display: flex;
91
+ align-items: center;
92
+ gap: var(--spacing-xxxs);
93
+ }
94
+
95
+ .mx-carousel__pagination[data-pagination="counter"] {
96
+ --border-radius: var(--border-radius-round);
97
+ --indent: 200%;
98
+ }
99
+
100
+ .mx-carousel__pagination button {
101
+ border-radius: var(--border-radius);
102
+ border: 2px solid
103
+ var(--line-colour, var(--colour-border));
104
+ border: var(--line-width, 2px) solid
105
+ var(--line-colour, var(--colour-border));
106
+ background-color: var(--background, var(--colour-background));
107
+ color: var(--foreground, var(--colour-foreground));
108
+ min-block-size: 2em;
109
+ min-inline-size: 2em;
110
+ font-family: inherit;
111
+ text-align: center;
112
+ cursor: pointer;
113
+ overflow: hidden;
114
+ text-indent: inherit;
115
+ text-indent: var(--indent, unset);
116
+ }
117
+
118
+ [disabled]:is(.mx-carousel__pagination button) {
119
+ --background: var(--active-background, var(--colour-border));
120
+
121
+ cursor: not-allowed;
122
+ }
123
+ }
124
+
125
+ /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNhcm91c2VsLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7RUFFRTs7QUFFRjtFQUNFO0lBQ0UsY0FBYztFQUNoQjs7RUFFQTtJQUNFLGdCQUFnQjtJQUNoQixhQUFhO0lBQ2IsZ0JBQW1DO0lBQW5DLG1DQUFtQztJQUNuQyxnQkFBcUI7SUFBckIsa0JBQXFCO0lBQXJCLHFCQUFxQjtJQUNyQiw2QkFBNkI7SUFDN0IsaUNBQWlDO0lBQ2pDLHVCQUF1QjtJQUN2QixrRUFBa0U7RUF1RHBFOztJQXJERTtNQUNFLGdCQUFnQjtJQUNsQjs7SUFFQTtNQUNFLDBDQUEwQztJQUM1Qzs7SUFFQTtNQUNFLDBDQUEwQztNQUMxQzs7Ozs7O09BTUM7SUFDSDs7SUFFQTtNQUNFLGNBQWtDO01BQWxDLGtDQUFrQztNQUNsQyxhQUFhO01BQ2Isd0JBQXdCO0lBYzFCOztNQVpFO1FBQ0UsWUFBWTtNQUNkOztNQUVBO1FBQ0UsK0JBQStCO01BQ2pDOztNQUVBO1FBQ0UsaUJBQWlCO1FBQ2pCLGFBQWE7TUFDZjs7SUFHRjtNQUNFLCtCQUErQjtJQUNqQzs7SUFFQTtNQUNFLDZCQUE2QjtJQUMvQjs7SUFFQTtNQUNFLHFCQUFxQjtJQUt2Qjs7TUFIRTtRQUNFLGFBQWE7TUFDZjtJQUtGO01BQ0UsYUFBYTtNQUNiLGlCQUFpQjtJQUNuQjs7SUFFQTtNQUNFLFlBQVk7SUFDZDs7RUFHRjtJQUNFLGdCQUFnQjtJQUNoQixpQkFBaUI7SUFDakIsYUFBYTtJQUNiLG1CQUFtQjtJQUNuQix3QkFBd0I7RUEyQjFCOztJQXpCRTtNQUNFLDJDQUEyQztNQUMzQyxjQUFjO0lBQ2hCOztJQUVBO01BQ0UsbUNBQW1DO01BQ25DO2dEQUMwQztNQUQxQztnREFDMEM7TUFDMUMsNkRBQTZEO01BQzdELGtEQUFrRDtNQUNsRCxtQkFBbUI7TUFDbkIsb0JBQW9CO01BQ3BCLG9CQUFvQjtNQUNwQixrQkFBa0I7TUFDbEIsZUFBZTtNQUNmLGdCQUFnQjtNQUNoQixvQkFBaUM7TUFBakMsaUNBQWlDO0lBT25DOztNQUxFO1FBQ0UsNERBQTREOztRQUU1RCxtQkFBbUI7TUFDckI7QUFHTiIsImZpbGUiOiJjYXJvdXNlbC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENhcm91c2VsLlxuICovXG5cbkBsYXllciBkZXNpZ24tc3lzdGVtLmNvbXBvbmVudHMuY2Fyb3VzZWwge1xuICAubXgtY2Fyb3VzZWwge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICB9XG5cbiAgLm14LWNhcm91c2VsX19zY3JvbGxhYmxlIHtcbiAgICBsaXN0LXN0eWxlOiBub25lO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYmxvY2stc2l6ZTogdmFyKC0tYmxvY2stc2l6ZSwgYXV0byk7XG4gICAgb3ZlcmZsb3c6IGF1dG8gaGlkZGVuO1xuICAgIHNjcm9sbC1zbmFwLXR5cGU6IHggbWFuZGF0b3J5O1xuICAgIC13ZWJraXQtb3ZlcmZsb3ctc2Nyb2xsaW5nOiB0b3VjaDtcbiAgICBzY3JvbGwtYmVoYXZpb3I6IHNtb290aDtcbiAgICBzY3JvbGxiYXItY29sb3I6IHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kKSB2YXIoLS1jb2xvdXItYmFja2dyb3VuZCk7XG5cbiAgICAmOjotd2Via2l0LXNjcm9sbGJhciB7XG4gICAgICBibG9jay1zaXplOiAxcmVtO1xuICAgIH1cblxuICAgICY6Oi13ZWJraXQtc2Nyb2xsYmFyLXRyYWNrIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG91ci1iYWNrZ3JvdW5kKTtcbiAgICB9XG5cbiAgICAmOjotd2Via2l0LXNjcm9sbGJhci10aHVtYiB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvdXItZm9yZWdyb3VuZCk7XG4gICAgICBiYWNrZ3JvdW5kLWltYWdlOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgICAgIHZhcigtLWNvbG91ci1iYWNrZ3JvdW5kKSAwLFxuICAgICAgICB2YXIoLS1jb2xvdXItYmFja2dyb3VuZCkgMC4yNXJlbSxcbiAgICAgICAgdmFyKC0tY29sb3VyLWZvcmVncm91bmQpIDAuMjVyZW0sXG4gICAgICAgIHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kKSAwLjc1cmVtLFxuICAgICAgICB2YXIoLS1jb2xvdXItYmFja2dyb3VuZCkgMC43NXJlbVxuICAgICAgKTtcbiAgICB9XG5cbiAgICAmID4gbGkge1xuICAgICAgZmxleDogMCAwIHZhcigtLWlubGluZS1zaXplLCAyNWNoKTtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBzY3JvbGwtc25hcC1hbGlnbjogc3RhcnQ7XG5cbiAgICAgICZbaW5lcnRdIHtcbiAgICAgICAgb3BhY2l0eTogMC4zO1xuICAgICAgfVxuXG4gICAgICAmICsgbGkge1xuICAgICAgICBtYXJnaW4taW5saW5lLXN0YXJ0OiB2YXIoLS1nYXApO1xuICAgICAgfVxuXG4gICAgICAmIC5teC1jb250YWluZXIge1xuICAgICAgICBpbmxpbmUtc2l6ZTogMTAwJTtcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIH1cbiAgICB9XG5cbiAgICAmOm5vdCg6Zmlyc3QtY2hpbGQpIHtcbiAgICAgIHBhZGRpbmctYmxvY2stc3RhcnQ6IHZhcigtLWdhcCk7XG4gICAgfVxuXG4gICAgJi5vdmVyZmxvd2luZzpub3QoLm5vLWJhcikge1xuICAgICAgcGFkZGluZy1ibG9jay1lbmQ6IHZhcigtLWdhcCk7XG4gICAgfVxuXG4gICAgJi5uby1iYXIge1xuICAgICAgc2Nyb2xsYmFyLXdpZHRoOiBub25lO1xuXG4gICAgICAmOjotd2Via2l0LXNjcm9sbGJhciB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgLm14LWNhcm91c2VsX19idXR0b25zIHtcbiAgICAmOm5vdChbaGlkZGVuXSkge1xuICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgIGdhcDogdmFyKC0tZ2FwLXMpO1xuICAgIH1cblxuICAgICYgYnV0dG9uW2Rpc2FibGVkXSB7XG4gICAgICBvcGFjaXR5OiAwLjU7XG4gICAgfVxuICB9XG5cbiAgLm14LWNhcm91c2VsX19wYWdpbmF0aW9uIHtcbiAgICBsaXN0LXN0eWxlOiBub25lO1xuICAgIHBhZGRpbmctaW5saW5lOiAwO1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBnYXA6IHZhcigtLXNwYWNpbmcteHh4cyk7XG5cbiAgICAmW2RhdGEtcGFnaW5hdGlvbj1cImNvdW50ZXJcIl0ge1xuICAgICAgLS1ib3JkZXItcmFkaXVzOiB2YXIoLS1ib3JkZXItcmFkaXVzLXJvdW5kKTtcbiAgICAgIC0taW5kZW50OiAyMDAlO1xuICAgIH1cblxuICAgICYgYnV0dG9uIHtcbiAgICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWJvcmRlci1yYWRpdXMpO1xuICAgICAgYm9yZGVyOiB2YXIoLS1saW5lLXdpZHRoLCAycHgpIHNvbGlkXG4gICAgICAgIHZhcigtLWxpbmUtY29sb3VyLCB2YXIoLS1jb2xvdXItYm9yZGVyKSk7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kLCB2YXIoLS1jb2xvdXItYmFja2dyb3VuZCkpO1xuICAgICAgY29sb3I6IHZhcigtLWZvcmVncm91bmQsIHZhcigtLWNvbG91ci1mb3JlZ3JvdW5kKSk7XG4gICAgICBtaW4tYmxvY2stc2l6ZTogMmVtO1xuICAgICAgbWluLWlubGluZS1zaXplOiAyZW07XG4gICAgICBmb250LWZhbWlseTogaW5oZXJpdDtcbiAgICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICB0ZXh0LWluZGVudDogdmFyKC0taW5kZW50LCB1bnNldCk7XG5cbiAgICAgICZbZGlzYWJsZWRdIHtcbiAgICAgICAgLS1iYWNrZ3JvdW5kOiB2YXIoLS1hY3RpdmUtYmFja2dyb3VuZCwgdmFyKC0tY29sb3VyLWJvcmRlcikpO1xuXG4gICAgICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iXX0= */
@@ -0,0 +1,61 @@
1
+ import { m as makeAnchor } from "./utilities-DXELy_An.js";
2
+ class Accordion extends HTMLElement {
3
+ constructor() {
4
+ super();
5
+ this.handleOpen = () => {
6
+ if (!this.details) return;
7
+ this.details.open = true;
8
+ };
9
+ this.handleClose = () => {
10
+ if (!this.details) return;
11
+ this.details.open = false;
12
+ };
13
+ this.handleHash = () => {
14
+ const { hash } = window.location;
15
+ if (hash && hash === `#${this.details?.id}`) {
16
+ this.handleOpen();
17
+ }
18
+ };
19
+ this.generatedId = () => {
20
+ const string = this.trigger?.textContent?.trim();
21
+ return !string ? "" : makeAnchor(string);
22
+ };
23
+ this.internals_ = this.attachInternals();
24
+ this.controller = new AbortController();
25
+ }
26
+ connectedCallback() {
27
+ if (!this.details || !this.trigger) return;
28
+ const { signal } = this.controller;
29
+ document.addEventListener("beforeprint", this.handleOpen, {
30
+ signal
31
+ });
32
+ document.addEventListener("afterprint", this.handleClose, {
33
+ signal
34
+ });
35
+ this.handleHash();
36
+ document.addEventListener("hashchange", this.handleHash, { signal });
37
+ }
38
+ disconnectedCallback() {
39
+ this.controller.abort();
40
+ }
41
+ get details() {
42
+ const details = this.querySelector("details");
43
+ if (!details) {
44
+ throw new Error(`${this.localName} must contain a <details> element.`);
45
+ }
46
+ details.id = details.id || this.generatedId();
47
+ return details;
48
+ }
49
+ get trigger() {
50
+ const trigger = this.querySelector("summary");
51
+ if (!trigger) {
52
+ throw new Error(`${this.localName} must contain a <summary> element.`);
53
+ }
54
+ return trigger;
55
+ }
56
+ }
57
+ customElements.define("mx-accordion", Accordion);
58
+ export {
59
+ Accordion as A
60
+ };
61
+ //# sourceMappingURL=Accordion-O-huO4At.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Accordion-O-huO4At.js","sources":["../../../src/Component/Accordion/Elements/Accordion.ts"],"sourcesContent":["/**\n * Accordion\n * @file Support opening on hash, adding an ID attribute and toggling on print.\n */\n\nimport { makeAnchor } from \"../../../Utility/utilities\"\n\nexport default class Accordion extends HTMLElement {\n internals_: ElementInternals\n controller: AbortController\n\n constructor() {\n super()\n this.internals_ = this.attachInternals()\n this.controller = new AbortController()\n }\n\n connectedCallback(): void {\n if (!this.details || !this.trigger) return\n\n const { signal }: AbortController = this.controller\n document.addEventListener(\"beforeprint\", this.handleOpen, {\n signal,\n })\n document.addEventListener(\"afterprint\", this.handleClose, {\n signal,\n })\n this.handleHash()\n document.addEventListener(\"hashchange\", this.handleHash, { signal })\n }\n\n disconnectedCallback(): void {\n this.controller.abort()\n }\n\n handleOpen = (): void => {\n if (!this.details) return\n this.details.open = true\n }\n\n handleClose = (): void => {\n if (!this.details) return\n this.details.open = false\n }\n\n handleHash = (): void => {\n const { hash }: Location = window.location\n if (hash && hash === `#${this.details?.id}`) {\n this.handleOpen()\n }\n }\n\n get details(): HTMLDetailsElement | null {\n const details: HTMLDetailsElement | null = this.querySelector(\"details\")\n if (!details) {\n throw new Error(`${this.localName} must contain a <details> element.`)\n }\n details.id = details.id || this.generatedId()\n return details\n }\n\n get trigger(): HTMLElement | null {\n const trigger: HTMLElement | null = this.querySelector(\"summary\")\n if (!trigger) {\n throw new Error(`${this.localName} must contain a <summary> element.`)\n }\n return trigger\n }\n\n generatedId = (): string => {\n const string: string | undefined = this.trigger?.textContent?.trim()\n return !string ? \"\" : makeAnchor(string)\n }\n}\n\ncustomElements.define(\"mx-accordion\", Accordion)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"mx-accordion\": Accordion\n }\n}\n"],"names":[],"mappings":";AAOA,MAAqB,kBAAkB,YAAY;AAAA,EAIjD,cAAc;AACN;AAuBR,SAAA,aAAa,MAAY;AACnB,UAAA,CAAC,KAAK,QAAS;AACnB,WAAK,QAAQ,OAAO;AAAA,IAAA;AAGtB,SAAA,cAAc,MAAY;AACpB,UAAA,CAAC,KAAK,QAAS;AACnB,WAAK,QAAQ,OAAO;AAAA,IAAA;AAGtB,SAAA,aAAa,MAAY;AACjB,YAAA,EAAE,KAAK,IAAc,OAAO;AAClC,UAAI,QAAQ,SAAS,IAAI,KAAK,SAAS,EAAE,IAAI;AAC3C,aAAK,WAAW;AAAA,MAClB;AAAA,IAAA;AAoBF,SAAA,cAAc,MAAc;AAC1B,YAAM,SAA6B,KAAK,SAAS,aAAa,KAAK;AACnE,aAAO,CAAC,SAAS,KAAK,WAAW,MAAM;AAAA,IAAA;AA1DlC,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,QAAS;AAE9B,UAAA,EAAE,OAAO,IAAqB,KAAK;AAChC,aAAA,iBAAiB,eAAe,KAAK,YAAY;AAAA,MACxD;AAAA,IAAA,CACD;AACQ,aAAA,iBAAiB,cAAc,KAAK,aAAa;AAAA,MACxD;AAAA,IAAA,CACD;AACD,SAAK,WAAW;AAChB,aAAS,iBAAiB,cAAc,KAAK,YAAY,EAAE,QAAQ;AAAA,EACrE;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;EAClB;AAAA,EAmBA,IAAI,UAAqC;AACjC,UAAA,UAAqC,KAAK,cAAc,SAAS;AACvE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACA,YAAQ,KAAK,QAAQ,MAAM,KAAK,YAAY;AACrC,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,UAA8B;AAC1B,UAAA,UAA8B,KAAK,cAAc,SAAS;AAChE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,oCAAoC;AAAA,IACvE;AACO,WAAA;AAAA,EACT;AAMF;AAEA,eAAe,OAAO,gBAAgB,SAAS;"}