npm - @maggioli-design-system/magma - Versions diffs - 2.0.0-beta.2 → 2.0.0-beta.3 - Mend

@maggioli-design-system/magma 2.0.0-beta.2 → 2.0.0-beta.3

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 (1150) hide show

package/dist/collection/components/mds-usage/mds-usage.css CHANGED Viewed

@@ -39,15 +39,13 @@ mds-text {
   --mds-usage-border-color: rgb(var(--status-info-06, 0 161 208));
   --mds-usage-header-background: var(--mds-usage-border-color, rgb(var(--status-info-06, 0 161 208)));
   --mds-usage-header-color: rgb(var(--tone-neutral, 0 0 0));
+  --mds-usage-transition-duration: var(--duration-200, 200ms);
+  --private-usage-transition-duration: var(--mds-usage-transition-duration);
-  @apply duration-200
-    ease-out
-    gap-200
-    p-400
-    pt-0
-    rounded-lg;
+  @apply ease-out;
   border-color: var(--mds-usage-border-color, rgb(var(--status-info-06, 0 161 208)));
+  border-radius: var(--radius-lg, 16px);
   border-style: solid;
   border-width: --spacing(50);
@@ -56,9 +54,13 @@ mds-text {
   container-type: inline-size;
   */
   display: grid;
+  gap: --spacing(200);
   grid-auto-rows: min-content;
   grid-template-columns: minmax(0, 100%);
+  padding: --spacing(400);
+  padding-top: 0;
   position: relative;
+  transition-duration: var(--private-usage-transition-duration);
   transition-property: background-color, box-shadow, color;
   width: 100%;
 }
@@ -86,39 +88,55 @@ mds-icon {
   padding-right: --spacing(200);
 }
-:host-context(:root.pref-animation-reduce),
-:host-context(:root.pref-animation-reduce) .badge {
-  transition-duration: 0s;
+/* Animation preference. The component mirrors the resolved mode from <html>
+ * onto its host as pref-animation (see subscribePreference in @common/preference);
+ * these plain shadow selectors then zero the private duration(s) the base CSS
+ * reads. `reduce` always stops; `system` and no controller follow the OS via
+ * @media; `no-preference` keeps the base value. Customization composes (the base
+ * sets --private from the public token, this only overrides it when reduced). */
+:host([pref-animation='reduce']) {
+  --private-usage-transition-duration: 0s;
 }
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])),
-  :host-context(:root:not([data-magma-pref])) .badge {
-    transition-duration: 0s;
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-usage-transition-duration: 0s;
   }
 }
-:host-context(:root.pref-contrast-more),
-:host-context(:root.pref-contrast-more):host([variant='do']),
-:host-context(:root.pref-contrast-more):host([variant='dont']),
-:host-context(:root.pref-contrast-more):host([variant='warn']) {
+/* Contrast preference. The component reflects the resolved mode from <html> onto
+ * its host as pref-contrast (see subscribePreference in @common/preference); these
+ * plain shadow selectors refine for high contrast. `more` is the explicit choice;
+ * `system` and no controller follow the OS via @media. Cross-browser, no :host-context. */
+:host([pref-contrast='more']),
+:host([pref-contrast='more']):host([variant='do']),
+:host([pref-contrast='more']):host([variant='dont']),
+:host([pref-contrast='more']):host([variant='warn']) {
   --mds-usage-badge-color: rgb(var(--tone-neutral-01, 255 255 255));
   --mds-usage-color: rgb(var(--tone-neutral-01, 255 255 255));
 }
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])),
-  :host-context(:root:not([data-magma-pref])):host([variant='do']),
-  :host-context(:root:not([data-magma-pref])):host([variant='dont']),
-  :host-context(:root:not([data-magma-pref])):host([variant='warn']) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])),
+  :host(:not([pref-contrast])):host([variant='do']),
+  :host(:not([pref-contrast])):host([variant='dont']),
+  :host(:not([pref-contrast])):host([variant='warn']) {
     --mds-usage-badge-color: rgb(var(--tone-neutral-01, 255 255 255));
     --mds-usage-color: rgb(var(--tone-neutral-01, 255 255 255));
   }
 }
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) {
+/* Theme preference. The component reflects the resolved theme mode and scheme
+ * from <html> onto its host as pref-theme + pref-theme-scheme (see
+ * subscribePreference in @common/preference); these plain shadow selectors refine
+ * for dark. `dark` is the explicit choice; `system` and no controller follow the
+ * OS via @media; the scheme axis gates it. Cross-browser, no :host-context. */
+:host([pref-theme='dark']:not([pref-theme-scheme='light'])) {
   --mds-usage-header-background: rgb(var(--status-info-05, 112 198 234));
   box-shadow: var(--shadow-outline);
@@ -137,8 +155,8 @@ mds-icon {
 }
 @media (prefers-color-scheme: dark) {
-  :host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-theme='system']:not([pref-theme-scheme='light'])),
+  :host(:not([pref-theme])) {
     --mds-usage-header-background: rgb(var(--status-info-05, 112 198 234));
     box-shadow: var(--shadow-outline);

package/dist/collection/components/mds-usage/mds-usage.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { Locale } from "../../common/locale";
+import { subscribePreference } from "../../common/preference";
 import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
@@ -26,9 +27,30 @@ export class MdsUsage {
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
     render() {
         var _a;
-        return (h(Host, { key: '3fe417cf16225feff6971a19f708d4bbbe465468' }, h("div", { key: '42921cba1e51f1329990ff410ca9b1998479b90a', class: "header", part: "header" }, h("mds-icon", { key: '1ef5b13324f37b16812c92d1137cde5674a577ae', name: "mi/baseline/info", part: "icon" }), h("mds-text", { key: '554fd00006ffba474cd89a944672181f9434c371', typography: "label", class: "label", part: "label" }, (_a = this.alias) !== null && _a !== void 0 ? _a : this.t.get(this.variant))), h("div", { key: 'cbfb026591913fbee7cb49e31f668ffd03b0051f', class: "content", role: this.variant === 'do' || this.variant === 'info' ? 'insertion' : 'deletion' }, h("slot", { key: 'b6922898d370e5ae96bf05c85593428e8ad2f278' }))));
+        return (h(Host, { key: '85c8efc0f31d70d317575637e4c4e4584170ab10', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: 'b13cc0c447b185362dc7d8a2587ccc3f7f260ab9', class: "header", part: "header" }, h("mds-icon", { key: 'f739767d950f5f3d65e0571faf1270f73fa658da', name: "mi/baseline/info", part: "icon" }), h("mds-text", { key: '7df4c76d59a017beadb081603a25aab194f74b52', typography: "label", class: "label", part: "label" }, (_a = this.alias) !== null && _a !== void 0 ? _a : this.t.get(this.variant))), h("div", { key: '1d2fd3a6c1e8a83c59b8c8819d5119e91b4870da', class: "content", role: this.variant === 'do' || this.variant === 'info' ? 'insertion' : 'deletion' }, h("slot", { key: 'a951eb3d2e26814d585f04d1143d588ddd008b18' }))));
     }
     static get is() { return "mds-usage"; }
     static get encapsulation() { return "shadow"; }
@@ -94,6 +116,10 @@ export class MdsUsage {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "language": {}
         };
     }

package/dist/collection/components/mds-video-wall/mds-video-wall.css CHANGED Viewed

@@ -60,11 +60,10 @@
 video,
 .noise {
-  @apply h-full
-    w-full;
+  height: 100%;
   inset: 0;
   position: absolute;
+  width: 100%;
 }
 video {
@@ -72,6 +71,17 @@ video {
   z-index: 1;
 }
+/* Animation preference: an autoplaying video is motion that cannot be reduced
+ * by scaling a duration, so reduced motion hides it. This is handled here,
+ * cross-browser, via @media following the OS preference (a custom property
+ * cannot toggle display). */
+@media (prefers-reduced-motion: reduce) {
+  video {
+    display: none;
+  }
+}
 .noise {
   background-color: var(--mds-video-wall-noise-background-color, rgb(var(--variant-primary-03, 211 226 255) / 0.8));
   background-size: var(--mds-video-wall-noise-background-size, auto);
@@ -95,14 +105,3 @@ video {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMElEQVQYV2NkYGDwZcABGP8zKBuD5Bj/P4coEf0Kod8wSjH+Z5CVgki+RZc0HghJADPEICMR8Ep/AAAAAElFTkSuQmCC');
 }
-:host-context(:root.pref-animation-reduce) video {
-  display: none;
-}
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) video {
-    display: none;
-  }
-}

package/dist/collection/components/mds-video-wall/mds-video-wall.js CHANGED Viewed

@@ -1,3 +1,4 @@
+/* eslint-disable stencil/ban-default-true */
 import { Host, h } from "@stencil/core";
 import clsx from "clsx";
 /**
@@ -31,7 +32,7 @@ export class MdsVideoWall {
         this.hasContent = this.hostElement.querySelector(':scope > [slot="content"]') !== null;
     }
     render() {
-        return (h(Host, { key: '0a933dddb8d907e76b6fce5b2299f0ebe604e019' }, this.noise !== 'none' && (h("div", { key: 'd87ad1ae5f923b319006211fc653bd15eb7cecea', "aria-hidden": "true", class: clsx('noise', `noise--${this.noise}`) })), h("video", { key: 'c10fd33395a9ff296a93750d089005000ef68e3d', "aria-hidden": "true", autoplay: this.autoplay, loop: this.loop, muted: this.muted, poster: this.poster, preload: this.preload, src: this.src }, h("slot", { key: '552250bcc5f1ea12bcf6f1db4756e9f6f83f7788' })), this.hasContent && (h("div", { key: '4016232546d9e8afdfe632a34d020d0c5e0a9460', class: "content" }, h("slot", { key: '212470d9c24011d120d237e8f1d589c95d25112c', name: "content" })))));
+        return (h(Host, { key: '8f07c944028bfe470b32b16318d116b11b8182e7' }, this.noise !== 'none' && (h("div", { key: '98490d2cc82b65ff2e3032856af679d455820224', "aria-hidden": "true", class: clsx('noise', `noise--${this.noise}`) })), h("video", { key: '6a7d2ecc5a053593b111f4a7bb55a0d559f514a0', "aria-hidden": "true", autoplay: this.autoplay, loop: this.loop, muted: this.muted, poster: this.poster, preload: this.preload, src: this.src }, h("slot", { key: '34d12c79883050650e0cc6c4585cdf74b2f0da5f' })), this.hasContent && (h("div", { key: 'ce5d918aa67250207d7e81698eb0b1d40a9f6a36', class: "content" }, h("slot", { key: '68e82013151c87a3b265d3d2cf398e92120e9b5a', name: "content" })))));
     }
     static get is() { return "mds-video-wall"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-zero/mds-zero.css CHANGED Viewed

@@ -10,21 +10,20 @@
 :host {
   --mds-zero-contents-max-width: 400px;
+  --mds-zero-transition-duration: var(--duration-200, 200ms);
+  --private-zero-transition-duration: var(--mds-zero-transition-duration);
-  @apply duration-200
-    ease-out
-    mobile:px-600
-    rounded-xl;
+  @apply ease-out mobile:px-600;
   align-items: center;
   background-color: rgb(var(--tone-neutral-10, 60 60 60));
+  border-radius: var(--radius-xl, 20px);
   display: flex;
   flex-direction: column;
   gap: --spacing(600);
   justify-items: center;
   padding: --spacing(1200);
-  /* transition-duration: var(--transition-duration-200); */
+  transition-duration: var(--private-zero-transition-duration);
   transition-property: box-shadow, background-color;
 }
@@ -38,10 +37,9 @@
 }
 :host .actions {
-  @apply gap-200;
   align-items: center;
   display: flex;
+  gap: --spacing(200);
   justify-items: center;
   width: 100%;
 }
@@ -50,37 +48,55 @@
   margin: auto;
 }
-:host-context(:root.pref-animation-reduce) {
-  transition-duration: 0s;
+/* Animation preference. The component mirrors the resolved mode from <html>
+ * onto its host as pref-animation (see subscribePreference in @common/preference);
+ * these plain shadow selectors then zero the private duration(s) the base CSS
+ * reads. `reduce` always stops; `system` and no controller follow the OS via
+ * @media; `no-preference` keeps the base value. Customization composes (the base
+ * sets --private from the public token, this only overrides it when reduced). */
+:host([pref-animation='reduce']) {
+  --private-zero-transition-duration: 0s;
 }
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-zero-transition-duration: 0s;
   }
 }
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) {
+/* Theme preference. The component reflects the resolved theme mode and scheme
+ * from <html> onto its host as pref-theme + pref-theme-scheme (see
+ * subscribePreference in @common/preference); these plain shadow selectors refine
+ * for dark. `dark` is the explicit choice; `system` and no controller follow the
+ * OS via @media; the scheme axis gates it. Cross-browser, no :host-context. */
+:host([pref-theme='dark']:not([pref-theme-scheme='light'])) {
   background-color: rgb(var(--tone-neutral-09, 76 76 76));
   box-shadow: var(--shadow-outline);
 }
 @media (prefers-color-scheme: dark) {
-  :host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-theme='system']:not([pref-theme-scheme='light'])),
+  :host(:not([pref-theme])) {
     background-color: rgb(var(--tone-neutral-09, 76 76 76));
     box-shadow: var(--shadow-outline);
   }
 }
-:host-context(:root.pref-contrast-more) {
+/* Contrast preference. The component reflects the resolved mode from <html> onto
+ * its host as pref-contrast (see subscribePreference in @common/preference); these
+ * plain shadow selectors refine for high contrast. `more` is the explicit choice;
+ * `system` and no controller follow the OS via @media. Cross-browser, no :host-context. */
+:host([pref-contrast='more']) {
   box-shadow: var(--shadow-outline-50);
 }
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])) {
     box-shadow: var(--shadow-outline-50);
   }
 }

package/dist/collection/components/mds-zero/mds-zero.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
  * @slot - Add `HTML elements` or `components` to this slot, it is **recommended** to use `mds-img` or `img` element.
  * @slot content - Put text elements here,
@@ -7,8 +8,29 @@ import { Host, h } from "@stencil/core";
  * @part actions - Selects the wrapper of the elements with attribute `slot="action"`.
  */
 export class MdsZero {
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
     render() {
-        return (h(Host, { key: '5fc07df830baec28cfb023dcd6bae81cc184c294' }, h("slot", { key: '7823c19de6bcb12f9818522bc8f304597bfcfebe' }), h("div", { key: '4d6c145da8e8bf866dd29b3c9367b75c5bbf212c', class: "contents", part: "contents" }, h("slot", { key: '10a9baa24dd9b3b440b73dec22e10a7ff9a20749', name: "content" })), h("footer", { key: '69e92dfefd828457aa67f148c62c6570b3b7e2f4', class: "actions", part: "actions" }, h("slot", { key: '9cf15fcf22c0f61f1004305963685fe76d6685ed', name: "action" }))));
+        return (h(Host, { key: '6313fb7bb691178754bf339cb5ed9fe35c89bf40', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("slot", { key: 'ad07044307f4d6af9674c6f3f1b7dd1e53880936' }), h("div", { key: '2e99ce2ac84f02d16d119ab2952cfec09d16d8c6', class: "contents", part: "contents" }, h("slot", { key: 'e27e04c9b63d8312de6ca2ac44db5776ba7da30b', name: "content" })), h("footer", { key: '77d6ffcd4e3a8cc6d1e49662bdd06d91dc020177', class: "actions", part: "actions" }, h("slot", { key: '7c774123d4bd3061b6901c95bf7999bf7759ea99', name: "action" }))));
     }
     static get is() { return "mds-zero"; }
     static get encapsulation() { return "shadow"; }
@@ -22,4 +44,12 @@ export class MdsZero {
             "$": ["mds-zero.css"]
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
 }

package/dist/collection/storybook/color-scale.stories.js CHANGED Viewed

@@ -457,7 +457,7 @@ const ColorScaleCanvas = () => {
             toneEl.removeEventListener('mdsInputSelectChange', handleToneChange);
         };
     }, []);
-    return (h("div", { class: "grid-cols-full grid desktop:grid-cols-[3fr_2fr] gap-600" }, h("mds-accordion", { class: "auto-rows-min", closable: false, multiple: true }, colorGroups.map((group) => (h(ColorGrid, { group: group, selected: group === 'tone' })))), h("div", { class: "sticky top-0 self-start p-600 grid gap-600 grid-cols-full" }, h("div", { class: "grid gap-600 grid-cols-2" }, h("mds-input-field", { label: "group", class: "col-span-2" }, h("mds-input-select", { id: "color-scale-group-select", value: selectedGroup, ref: groupSelectRef }, colorGroups.map((group) => (h("option", { value: group }, capitalize(group)))))), h("mds-input-field", { label: "variant" }, h("mds-input-select", { id: "color-scale-variant-select", value: selectedVariantKey, ref: variantSelectRef }, variantOptions.map((name) => (h("option", { value: name }, capitalize(name)))))), h("mds-input-field", { label: "tone" }, h("mds-input-select", { id: "color-scale-tone-select", value: selectedTone, ref: toneSelectRef }, variantTones.map((name) => (h("option", { value: name }, capitalize(name))))))), h(ComponentVariants, { variant: selectedVariant, tone: selectedTone }))));
+    return (h("div", { class: "grid-cols-full grid desktop:grid-cols-[3fr_2fr] gap-600" }, h("mds-accordion", { class: "auto-rows-min", "disable-close": true, multiple: true }, colorGroups.map((group) => (h(ColorGrid, { group: group, selected: group === 'tone' })))), h("div", { class: "sticky top-0 self-start p-600 grid gap-600 grid-cols-full" }, h("div", { class: "grid gap-600 grid-cols-2" }, h("mds-input-field", { label: "group", class: "col-span-2" }, h("mds-input-select", { id: "color-scale-group-select", value: selectedGroup, ref: groupSelectRef }, colorGroups.map((group) => (h("option", { value: group }, capitalize(group)))))), h("mds-input-field", { label: "variant" }, h("mds-input-select", { id: "color-scale-variant-select", value: selectedVariantKey, ref: variantSelectRef }, variantOptions.map((name) => (h("option", { value: name }, capitalize(name)))))), h("mds-input-field", { label: "tone" }, h("mds-input-select", { id: "color-scale-tone-select", value: selectedTone, ref: toneSelectRef }, variantTones.map((name) => (h("option", { value: name }, capitalize(name))))))), h(ComponentVariants, { variant: selectedVariant, tone: selectedTone }))));
 };
 const Template = () => h(ColorScaleCanvas, null);
 export const ColorScale = {

package/dist/components/floating-controller.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{a as t,o as s,f as i,s as r,b as e,c as a,d as o}from"./floating-ui.dom.js";import{c as h}from"./unit.js";import{s as n}from"./aria.js";class c{constructor(o,h){this.arrowInset=(t,s)=>{const{arrow:i}=t,r={bottom:"",left:"",right:"",top:""};if(void 0===i)return{};switch(s){case"bottom":r.left=null!==i.x?`${i.x}px`:"",r.top="100%";break;case"left":r.right="100%",r.top=null!==i.y?`${i.y}px`:"";break;case"right":r.left="100%",r.top=null!==i.y?`${i.y}px`:"";break;case"top":r.left=null!==i.x?`${i.x}px`:"",r.top=""}return r},this.arrowTransform=t=>{let s=this._host.~~arrow~~&&this._host.visible?"scale(1)":"scale(0)";switch(t){case"bottom":s=`rotate(180deg) ${s} translate(0, -100%)`;break;case"left":s=`rotate(-90deg) ${s} translate(50%, -50%)`;break;case"right":s=`rotate(90deg) ${s} translate(-50%, -50%)`;break;case"top":s=`rotate(0deg) ${s} translate(0, 0)`}return{transform:s}},this.arrowTransformOrigin=t=>{switch(t){case"bottom":default:return{transformOrigin:"center top"};case"left":return{transformOrigin:"right center"};case"right":return{transformOrigin:"left center"};case"top":return{transformOrigin:"center bottom"}}},this.convertToTransformOrigin=t=>({top:"center bottom",right:"left center",bottom:"center top",left:"right center","bottom-end":"top right","bottom-start":"top left","left-end":"right bottom","left-start":"right top","right-end":"left bottom","right-start":"left top","top-end":"bottom right","top-start":"bottom left"}[t]),this.calculatePosition=()=>{if(!this._caller)return;const o=new Array,h={};this._host.shiftPadding&&(h.padding=this._host.shiftPadding),this._host.~~autoPlacement&&~~o.push(t()),this._host.offset&&o.push(s(this._host.offset)),!this._host.~~autoPlacement~~&&this._host.flip&&o.push(i(h)),this._host.~~shift&&~~o.push(r(h)),this.arrowEl&&this._host.~~arrow~~&&o.push(e({element:this.arrowEl,padding:this._host.arrowPadding})),a(this._caller,this._host,{middleware:o,placement:this._host.placement,strategy:this._host.strategy}).then((({x:t,y:s,placement:i,middlewareData:r})=>{Object.assign(this._host.style,{left:`${t}px`,top:`${s}px`,transformOrigin:this.convertToTransformOrigin(i),position:this._host.strategy});const e={},a={top:"bottom",right:"left",bottom:"top",left:"right"}[i.split("-")[0]];a&&this.arrowEl&&(Object.assign(e,this.arrowTransform(a)),Object.assign(e,this.arrowInset(r,a)),Object.assign(e,this.arrowTransformOrigin(a)),Object.assign(this.arrowEl.style,e))}))},this._host=o,this.arrowEl=h}updateCaller(t){var s,i,r;const e=null!==(r=null===(i=null===(s=this._host.parentElement)\|\|void 0===s?void 0:s.shadowRoot)\|\|void 0===i?void 0:i.querySelector(t))&&void 0!==r?r:this._host.getRootNode().querySelector(t);if(!e)throw Error(`Target not found: ${t}`);return this._caller=e,n(this._caller,"aria-haspopup","true"),n(this._caller,"aria-controls",t),n(this._host,"role","menu"),n(this._host,"aria-labelledby",t),e}updatePosition(){this._host.visible&&(this.dismiss(),this.cleanupAutoUpdate=o(this._caller,this._host,this.calculatePosition))}dismiss(){this.cleanupAutoUpdate&&this.cleanupAutoUpdate()}}class l{constructor(t){this.defaultBackdropId="magma-backdrop",this.backdropBackgroundVisible="rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))",this.backdropBackgroundHidden="rgba(var(--magma-backdrop-color, 0 0 0) / 0)",this.backdropId=null!=t?t:this.defaultBackdropId,this.cssBackdropZIndex=`var(--${this.backdropId}-z-index, 4000)`,this.cssBackdropDuration=`var(--${this.backdropId}-animation-duration, 300ms)`}attachBackdrop(){this.backdropEl\|\|(this.backdropEl=document.createElement("div"),this.backdropEl.className=this.backdropId,this.backdropEl.style.inset="0",this.backdropEl.style.pointerEvents="none",this.backdropEl.style.position="fixed",this.backdropEl.style.transition=`background-color ${this.cssBackdropDuration} ease-out`,this.backdropEl.style.zIndex=this.cssBackdropZIndex),this.backdropEl.style.backgroundColor=this.backdropBackgroundHidden,document.body.appendChild(this.backdropEl),clearTimeout(this.backdropTimer),this.backdropTimer=setTimeout((()=>{this.backdropEl.style.backgroundColor=this.backdropBackgroundVisible}),1)}detachBackdrop(){this.backdropEl&&(this.backdropEl.style.backgroundColor="transparent",clearTimeout(this.backdropTimer),this.backdropTimer=setTimeout((()=>{this.backdropEl.remove()}),h(this.cssBackdropDuration)))}}export{l as B,c as F}
1	+ import{a as t,o as s,f as i,s as r,b as e,c as a,d as o}from"./floating-ui.dom.js";import{c as h}from"./unit.js";import{s as n}from"./aria.js";class c{constructor(o,h){this.arrowInset=(t,s)=>{const{arrow:i}=t,r={bottom:"",left:"",right:"",top:""};if(void 0===i)return{};switch(s){case"bottom":r.left=null!==i.x?`${i.x}px`:"",r.top="100%";break;case"left":r.right="100%",r.top=null!==i.y?`${i.y}px`:"";break;case"right":r.left="100%",r.top=null!==i.y?`${i.y}px`:"";break;case"top":r.left=null!==i.x?`${i.x}px`:"",r.top=""}return r},this.arrowTransform=t=>{let s=!this._host.hideArrow&&this._host.visible?"scale(1)":"scale(0)";switch(t){case"bottom":s=`rotate(180deg) ${s} translate(0, -100%)`;break;case"left":s=`rotate(-90deg) ${s} translate(50%, -50%)`;break;case"right":s=`rotate(90deg) ${s} translate(-50%, -50%)`;break;case"top":s=`rotate(0deg) ${s} translate(0, 0)`}return{transform:s}},this.arrowTransformOrigin=t=>{switch(t){case"bottom":default:return{transformOrigin:"center top"};case"left":return{transformOrigin:"right center"};case"right":return{transformOrigin:"left center"};case"top":return{transformOrigin:"center bottom"}}},this.convertToTransformOrigin=t=>({top:"center bottom",right:"left center",bottom:"center top",left:"right center","bottom-end":"top right","bottom-start":"top left","left-end":"right bottom","left-start":"right top","right-end":"left bottom","right-start":"left top","top-end":"bottom right","top-start":"bottom left"}[t]),this.calculatePosition=()=>{if(!this._caller)return;const o=new Array,h={};this._host.shiftPadding&&(h.padding=this._host.shiftPadding),this._host.disableAutoPlacement\|\|o.push(t()),this._host.offset&&o.push(s(this._host.offset)),this._host.disableAutoPlacement&&this._host.flip&&o.push(i(h)),this._host.disableShift\|\|o.push(r(h)),this.arrowEl&&!this._host.hideArrow&&o.push(e({element:this.arrowEl,padding:this._host.arrowPadding})),a(this._caller,this._host,{middleware:o,placement:this._host.placement,strategy:this._host.strategy}).then((({x:t,y:s,placement:i,middlewareData:r})=>{Object.assign(this._host.style,{left:`${t}px`,top:`${s}px`,transformOrigin:this.convertToTransformOrigin(i),position:this._host.strategy});const e={},a={top:"bottom",right:"left",bottom:"top",left:"right"}[i.split("-")[0]];a&&this.arrowEl&&(Object.assign(e,this.arrowTransform(a)),Object.assign(e,this.arrowInset(r,a)),Object.assign(e,this.arrowTransformOrigin(a)),Object.assign(this.arrowEl.style,e))}))},this._host=o,this.arrowEl=h}updateCaller(t){var s,i,r;const e=null!==(r=null===(i=null===(s=this._host.parentElement)\|\|void 0===s?void 0:s.shadowRoot)\|\|void 0===i?void 0:i.querySelector(t))&&void 0!==r?r:this._host.getRootNode().querySelector(t);if(!e)throw Error(`Target not found: ${t}`);return this._caller=e,n(this._caller,"aria-haspopup","true"),n(this._caller,"aria-controls",t),n(this._host,"role","menu"),n(this._host,"aria-labelledby",t),e}updatePosition(){this._host.visible&&(this.dismiss(),this.cleanupAutoUpdate=o(this._caller,this._host,this.calculatePosition))}dismiss(){this.cleanupAutoUpdate&&this.cleanupAutoUpdate()}}class l{constructor(t){this.defaultBackdropId="magma-backdrop",this.backdropBackgroundVisible="rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))",this.backdropBackgroundHidden="rgba(var(--magma-backdrop-color, 0 0 0) / 0)",this.backdropId=null!=t?t:this.defaultBackdropId,this.cssBackdropZIndex=`var(--${this.backdropId}-z-index, 4000)`,this.cssBackdropDuration=`var(--${this.backdropId}-animation-duration, 300ms)`}attachBackdrop(){this.backdropEl\|\|(this.backdropEl=document.createElement("div"),this.backdropEl.className=this.backdropId,this.backdropEl.style.inset="0",this.backdropEl.style.pointerEvents="none",this.backdropEl.style.position="fixed",this.backdropEl.style.transition=`background-color ${this.cssBackdropDuration} ease-out`,this.backdropEl.style.zIndex=this.cssBackdropZIndex),this.backdropEl.style.backgroundColor=this.backdropBackgroundHidden,document.body.appendChild(this.backdropEl),clearTimeout(this.backdropTimer),this.backdropTimer=setTimeout((()=>{this.backdropEl.style.backgroundColor=this.backdropBackgroundVisible}),1)}detachBackdrop(){this.backdropEl&&(this.backdropEl.style.backgroundColor="transparent",clearTimeout(this.backdropTimer),this.backdropTimer=setTimeout((()=>{this.backdropEl.remove()}),h(this.cssBackdropDuration)))}}export{l as B,c as F}

package/dist/components/mds-accordion-item.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as t,HTMLElement as o,createEvent as r,h as e,Host as i,transformTag as a}from"@stencil/core/internal/client";import{m as n}from"./keyboard-arrow-right.js";import{d}from"./mds-text2.js";const c=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.selectedEvent=r(this,"mdsAccordionItemSelect",7),this.unselectedEvent=r(this,"mdsAccordionItemUnselect",7),this.changedEvent=r(this,"mdsAccordionItemChange",7),this.typography="h5",this.toggle=()=>{this.selected=!this.selected,this.changedEvent.emit({id:this.element.id,selected:this.selected}),this.selected?this.selectedEvent.emit({id:this.element.id,selected:this.selected}):this.unselectedEvent.emit({id:this.element.id,selected:this.selected})}}render(){return e(i,{key:"70cbd276fd2552fa643a9297ca91479835a3669a"},e("button",{key:"80f2fe79c0c3516330949615ab76e30d76c553c8","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},e("mds-text",{key:"1709a57f269dc53e3530d17e37984d3a90991ec3",typography:this.typography,part:"label"},this.label),e("mds-text",{key:"d9c01a62a36a9a8930b228cc748e7527d8c927bd","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},e("i",{key:"80ecf7c41a6c8ee7a7d7793836466496e6c35149",class:"icon",innerHTML:n}))),e("div",{key:"43617c689361b7748b588af64e4e209f43788f8e",class:"content",id:"content"},e("div",{key:"ee082641d530d31c12e5f0e52464fb64c38ad572","aria-labelledby":"action",class:"content-expander",part:"content",role:"region"},e("slot",{key:"9499ce48fce9fa821ba339c08226c74eea72b63f"}))))}get element(){return this}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){,::backdrop,:after,:before{--mds-accordion-item-border-color:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-item-border-width:2px;--mds-accordion-item-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-item-description-color:rgb(var(--tone-neutral-02,244 244 244));--mds-accordion-item-duration:.3s;--mds-accordion-item-padding-selected:1rem 0 2rem 0;--mds-accordion-item-padding-unselected:1rem 0 1rem 0;--tw-font-weight:initial}}}@layer reset,vendor,theme,base,components,utilities;@keyframes focus-bounce{0%,75%,to{outline-offset:var(--magma-outline-focus-offset,6px)}50%{outline-offset:var(--magma-outline-blur-offset,2px)}}:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-accordion-item-border-width{syntax:"<length>";inherits:false;initial-value:2px}@property --mds-accordion-item-duration{syntax:"<time>";inherits:false;initial-value:.3s}@property --mds-accordion-item-padding-selected{syntax:"<length>+";inherits:false;initial-value:1rem 0 2rem 0}@property --mds-accordion-item-padding-unselected{syntax:"<length>+";inherits:false;initial-value:1rem 0 1rem 0}:host{--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-08,107 107 107)));--mds-accordion-item-border-width:var(--mds-accordion-border-width,2px);--mds-accordion-item-color:var(--mds-accordion-color,rgb(var(--tone-neutral-03,233 233 233)));--mds-accordion-item-description-color:var(--mds-accordion-description-color,rgb(var(--tone-neutral-02,244 244 244)));--mds-accordion-item-duration:var(--mds-accordion-duration,.3s);--mds-accordion-item-padding-selected:var(--mds-accordion-padding-selected,calc(var(--spacing,.0025rem)400) 0 calc(var(--spacing,.0025rem)800) 0);--mds-accordion-item-padding-unselected:var(--mds-accordion-padding-unselected,calc(var(--spacing,.0025rem)400) 0 calc(var(--spacing,.0025rem)400) 0);border-bottom:var(--mds-accordion-item-border-width,2px) solid transparent;border-top:var(--mds-accordion-item-border-width,2px) solid transparent;color:var(--mds-accordion-item-color,rgb(var(--tone-neutral-03,233 233 233)));display:grid;fill:var(--mds-accordion-item-color,rgb(var(--tone-neutral-03,233 233 233)));margin-top:calc(var(--mds-accordion-item-border-width,2px)-1);padding:var(--mds-accordion-item-padding-unselected,1rem 0 1rem 0);position:relative;-webkit-transition-duration:var(--duration-500,.5s);transition-duration:var(--duration-500,.5s);transition-property:background-color,border-color,color,fill,margin,padding;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}:host(:first-child){margin-top:0}.action{animation-duration:var(--magma-outline-animation-duration,1s);animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:focus-bounce;animation-play-state:paused;animation-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:#0000;border:0;border-radius:var(--radius-md,12px);color:var(--mds-accordion-item-description-color,rgb(var(--tone-neutral-02,244 244 244)));cursor:pointer;display:grid;gap:calc(var(--spacing,.0025rem)400);grid-auto-columns:-webkit-min-content;grid-auto-columns:min-content;grid-template-columns:auto 24px;outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));padding:0;text-align:left;transition-duration:.2s;transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-timing-function:ease-in-out}.action:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}.icon-button{--tw-font-weight:var(--font-weight-normal,400);display:block;font-weight:var(--font-weight-normal,400)}.content{display:grid;gap:calc(var(--spacing,.0025rem)400);grid-template-rows:0fr;min-height:0;opacity:0;overflow:hidden;padding-top:0;-webkit-transition-duration:var(--mds-accordion-item-duration,.3s);transition-duration:var(--mds-accordion-item-duration,.3s);transition-property:grid-template-rows,opacity,padding,-ms-grid-rows;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.content-expander{display:grid;grid-template-columns:minmax(0,100%);min-height:0;-webkit-transition-duration:var(--mds-accordion-item-duration,.3s);transition-duration:var(--mds-accordion-item-duration,.3s);transition-property:opacity,padding;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.icon{display:flex;fill:var(--mds-accordion-item-color,rgb(var(--tone-neutral-03,233 233 233)));transform:rotate(0);-webkit-transition-duration:var(--duration-500,.5s);transition-duration:var(--duration-500,.5s);transition-property:transform;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.icon svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}:host([selected]:not([selected=false])){border-bottom:var(--mds-accordion-item-border-width,2px) solid var(--mds-accordion-item-border-color,rgb(var(--tone-neutral-08,107 107 107)));border-top:var(--mds-accordion-item-border-width,2px) solid var(--mds-accordion-item-border-color,rgb(var(--tone-neutral-08,107 107 107)));padding:var(--mds-accordion-item-padding-selected,1rem 0 2rem 0)}:host([selected]:not([selected=false]):first-child){border-top-color:#0000;margin-top:0}:host([selected]:not([selected=false]):last-child){border-bottom-color:#0000;margin-bottom:0}:host([selected]:not([selected=false])) .content{grid-template-rows:1fr;opacity:1;padding-top:calc(var(--spacing,.0025rem)400)}:host([selected]:not([selected=false])) .icon{transform:rotate(90deg)}:host-context(:root.pref-animation-reduce){--mds-accordion-item-duration:var(--mds-accordion-duration,0s);transition-duration:0s}:host-context(:root.pref-animation-reduce) .icon{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-06,158 158 158)))}:host-context(:root.pref-contrast-more){--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-01,255 255 255)));--mds-accordion-item-color:var(--mds-accordion-color,rgb(var(--tone-neutral-01,255 255 255)))}@property --tw-font-weight{syntax:"";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-accordion-item-duration:var(--mds-accordion-duration,0s);transition-duration:0s}:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .icon{transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-06,158 158 158)))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-01,255 255 255)));--mds-accordion-item-color:var(--mds-accordion-color,rgb(var(--tone-neutral-01,255 255 255)))}}'}},[257,"mds-accordion-item",{typography:[1],selected:[1540],label:[1]}]),s=c,m=function(){"undefined"!=typeof customElements&&["mds-accordion-item","mds-text"].forEach((t=>{switch(t){case"mds-accordion-item":customElements.get(a(t))\|\|customElements.define(a(t),c);break;case"mds-text":customElements.get(a(t))\|\|d()}}))};export{s as MdsAccordionItem,m as defineCustomElement}
1	+ import{proxyCustomElement as t,HTMLElement as o,createEvent as i,h as e,Host as r,transformTag as a}from"@stencil/core/internal/client";import{m as n}from"./keyboard-arrow-right.js";import{s as d}from"./preference.js";import{d as c}from"./mds-text2.js";const s=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.selectedEvent=i(this,"mdsAccordionItemSelect",7),this.unselectedEvent=i(this,"mdsAccordionItemUnselect",7),this.changedEvent=i(this,"mdsAccordionItemChange",7),this.typography="h5",this.toggle=()=>{this.selected=!this.selected,this.changedEvent.emit({id:this.element.id,selected:this.selected}),this.selected?this.selectedEvent.emit({id:this.element.id,selected:this.selected}):this.unselectedEvent.emit({id:this.element.id,selected:this.selected})}}connectedCallback(){this.unsubscribePrefAnimation=d("animation",(t=>{this.prefAnimation=t})),this.unsubscribePrefContrast=d("contrast",(t=>{this.prefContrast=t})),this.unsubscribePrefTheme=d("theme",(t=>{this.prefTheme=t})),this.unsubscribePrefThemeScheme=d("theme-scheme",(t=>{this.prefThemeScheme=t}))}disconnectedCallback(){var t,o,i,e;null===(t=this.unsubscribePrefAnimation)\|\|void 0===t\|\|t.call(this),null===(o=this.unsubscribePrefContrast)\|\|void 0===o\|\|o.call(this),null===(i=this.unsubscribePrefTheme)\|\|void 0===i\|\|i.call(this),null===(e=this.unsubscribePrefThemeScheme)\|\|void 0===e\|\|e.call(this)}render(){return e(r,{key:"7b7e70c10cad91e1ec770f45167678e9eecd1d71","pref-animation":this.prefAnimation,"pref-contrast":this.prefContrast,"pref-theme":this.prefTheme,"pref-theme-scheme":this.prefThemeScheme},e("button",{key:"364db696fed629520dfa4199162a3ac84efa22e6","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},e("mds-text",{key:"837db44c49d46677057f81f5e5c387180697082c",typography:this.typography,part:"label"},this.label),e("mds-text",{key:"49088fbc9e1de2e5cc9376042a6690289ac2c8e9","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},e("i",{key:"8e189cc02eeb3ded80561409c01a1b35e9372d82",class:"icon",innerHTML:n}))),e("div",{key:"cf8717811a3f4e3b2216bd8ab95114a83fa20316",class:"content",id:"content"},e("div",{key:"5bef366096aee3cecebb9382721b1415fcfe48d6","aria-labelledby":"action",class:"content-expander",part:"content",role:"region"},e("slot",{key:"1dbcf23841df112d2d9d3cfa6e3909d7d9b284eb"}))))}get element(){return this}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){,::backdrop,:after,:before{--mds-accordion-item-border-color:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-item-border-width:2px;--mds-accordion-item-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-item-description-color:rgb(var(--tone-neutral-02,244 244 244));--mds-accordion-item-duration:.3s;--mds-accordion-item-padding-selected:1rem 0 2rem 0;--mds-accordion-item-padding-unselected:1rem 0 1rem 0;--tw-font-weight:initial}}}@keyframes focus-bounce{0%,75%,to{outline-offset:var(--magma-outline-focus-offset,6px)}50%{outline-offset:var(--magma-outline-blur-offset,2px)}}:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-accordion-item-border-width{syntax:"<length>";inherits:false;initial-value:2px}@property --mds-accordion-item-duration{syntax:"<time>";inherits:false;initial-value:.3s}@property --mds-accordion-item-padding-selected{syntax:"<length>+";inherits:false;initial-value:1rem 0 2rem 0}@property --mds-accordion-item-padding-unselected{syntax:"<length>+";inherits:false;initial-value:1rem 0 1rem 0}:host{--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-08,107 107 107)));--mds-accordion-item-border-width:var(--mds-accordion-border-width,2px);--mds-accordion-item-color:var(--mds-accordion-color,rgb(var(--tone-neutral-03,233 233 233)));--mds-accordion-item-description-color:var(--mds-accordion-description-color,rgb(var(--tone-neutral-02,244 244 244)));--mds-accordion-item-duration:var(--mds-accordion-duration,.3s);--private-accordion-item-duration:var(--mds-accordion-item-duration,.3s);--mds-accordion-item-transition-duration:var(--duration-500,.5s);--private-accordion-item-transition-duration:var(--mds-accordion-item-transition-duration);--mds-accordion-item-padding-selected:var(--mds-accordion-padding-selected,calc(var(--spacing,.0025rem)400) 0 calc(var(--spacing,.0025rem)800) 0);--mds-accordion-item-padding-unselected:var(--mds-accordion-padding-unselected,calc(var(--spacing,.0025rem)400) 0 calc(var(--spacing,.0025rem)400) 0);border-bottom:var(--mds-accordion-item-border-width,2px) solid #0000;border-top:var(--mds-accordion-item-border-width,2px) solid #0000;color:var(--mds-accordion-item-color,rgb(var(--tone-neutral-03,233 233 233)));display:grid;fill:var(--mds-accordion-item-color,rgb(var(--tone-neutral-03,233 233 233)));margin-top:calc(var(--mds-accordion-item-border-width,2px)-1);padding:var(--mds-accordion-item-padding-unselected,1rem 0 1rem 0);position:relative;-webkit-transition-duration:var(--private-accordion-item-transition-duration);transition-duration:var(--private-accordion-item-transition-duration);transition-property:background-color,border-color,color,fill,margin,padding;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}:host(:first-child){margin-top:0}.action{animation-duration:var(--magma-outline-animation-duration,1s);animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:focus-bounce;animation-play-state:paused;animation-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:#0000;border:0;border-radius:var(--radius-md,12px);color:var(--mds-accordion-item-description-color,rgb(var(--tone-neutral-02,244 244 244)));cursor:pointer;display:grid;gap:calc(var(--spacing,.0025rem)400);grid-auto-columns:-webkit-min-content;grid-auto-columns:min-content;grid-template-columns:auto 24px;outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));padding:0;text-align:left;transition-duration:.2s;transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-timing-function:ease-in-out}.action:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}.icon-button{--tw-font-weight:var(--font-weight-normal,400);display:block;font-weight:var(--font-weight-normal,400)}.content{display:grid;gap:calc(var(--spacing,.0025rem)400);grid-template-rows:0fr;min-height:0;opacity:0;overflow:hidden;padding-top:0;-webkit-transition-duration:var(--private-accordion-item-duration);transition-duration:var(--private-accordion-item-duration);transition-property:grid-template-rows,opacity,padding,-ms-grid-rows;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.content-expander{display:grid;grid-template-columns:minmax(0,100%);min-height:0;-webkit-transition-duration:var(--private-accordion-item-duration);transition-duration:var(--private-accordion-item-duration);transition-property:opacity,padding;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.icon{display:flex;fill:var(--mds-accordion-item-color,rgb(var(--tone-neutral-03,233 233 233)));transform:rotate(0);-webkit-transition-duration:var(--private-accordion-item-transition-duration);transition-duration:var(--private-accordion-item-transition-duration);transition-property:transform;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.icon svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}:host([selected]:not([selected=false])){border-bottom:var(--mds-accordion-item-border-width,2px) solid var(--mds-accordion-item-border-color,rgb(var(--tone-neutral-08,107 107 107)));border-top:var(--mds-accordion-item-border-width,2px) solid var(--mds-accordion-item-border-color,rgb(var(--tone-neutral-08,107 107 107)));padding:var(--mds-accordion-item-padding-selected,1rem 0 2rem 0)}:host([selected]:not([selected=false]):first-child){border-top-color:#0000;margin-top:0}:host([selected]:not([selected=false]):last-child){border-bottom-color:#0000;margin-bottom:0}:host([selected]:not([selected=false])) .content{grid-template-rows:1fr;opacity:1;padding-top:calc(var(--spacing,.0025rem)400)}:host([selected]:not([selected=false])) .icon{transform:rotate(90deg)}:host([pref-animation=reduce]){--private-accordion-item-duration:0s;--private-accordion-item-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-06,158 158 158)))}:host([pref-contrast=more]){--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-01,255 255 255)));--mds-accordion-item-color:var(--mds-accordion-color,rgb(var(--tone-neutral-01,255 255 255)))}@property --tw-font-weight{syntax:"";inherits:false}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-accordion-item-duration:0s;--private-accordion-item-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-06,158 158 158)))}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-accordion-item-border-color:var(--mds-accordion-border-color,rgb(var(--tone-neutral-01,255 255 255)));--mds-accordion-item-color:var(--mds-accordion-color,rgb(var(--tone-neutral-01,255 255 255)))}}'}},[257,"mds-accordion-item",{typography:[1],selected:[1540],label:[1],prefAnimation:[32],prefContrast:[32],prefTheme:[32],prefThemeScheme:[32]}]),m=s,l=function(){"undefined"!=typeof customElements&&["mds-accordion-item","mds-text"].forEach((t=>{switch(t){case"mds-accordion-item":customElements.get(a(t))\|\|customElements.define(a(t),s);break;case"mds-text":customElements.get(a(t))\|\|c()}}))};export{m as MdsAccordionItem,l as defineCustomElement}

package/dist/components/mds-accordion-timer-item.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as t,createEvent as r,h as i,Host as o,transformTag as s}from"@stencil/core/internal/client";import{m as a}from"./keyboard-arrow-right.js";import{d as n}from"./~~mds-icon2~~.js";import{d as c}from"./mds-progress2.js";import{d}from"./mds-radial-progress2.js";import{d as m}from"./mds-text2.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.clickSelectEvent=r(this,"mdsAccordionTimerItemClickSelect",7),this.selectEvent=r(this,"mdsAccordionTimerItemSelect",7),this.selectedMouseEnterEvent=r(this,"mdsAccordionTimerItemMouseEnterSelect",7),this.selectedMouseLeaveEvent=r(this,"mdsAccordionTimerItemMouseLeaveSelect",7),this.typography="h5",this.selected=!1,this.progress=0,this.uuid=0,this.toggle=()=>{this.selected=!this.selected,this.progress=0,this.selected&&this.clickSelectEvent.emit({selected:this.selected,uuid:this.uuid})},this.mouseEnter=()=>{this.selected&&this.selectedMouseEnterEvent.emit({selected:this.selected,uuid:this.uuid})},this.mouseLeave=()=>{this.selected&&this.selectedMouseLeaveEvent.emit({selected:this.selected,uuid:this.uuid})}}handleSelected(e){this.progress=0,e&&this.selectEvent.emit({selected:this.selected,uuid:this.uuid})}render(){var e;return i(o,{key:"~~2a267905abe7323573c9ba374f876877a4d7d708~~",onMouseEnter:this.mouseEnter,onMouseLeave:this.mouseLeave},i("div",{key:"~~96fcad4d326cc0cdee6003e874b267b05302d535~~",class:"row"},i("mds-progress",{key:"~~ac8f0ef04501960d4a90e2249cd72cfaecc4178d~~","aria-hidden":"true",class:"progress-bar",progress:Number(null===(e=this.progress)\|\|void 0===e?void 0:e.toFixed(2)),direction:"vertical",size:"sm",part:"progress"}),i("div",{key:"~~7550b2107ad942448f6da6e3116174ad2067b257~~",class:"accordion"},i("button",{key:"~~084c9f9bd12d5aca2422a64bcea440c248cf1a00~~","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},i("mds-text",{key:"~~d5b1d6961ab7b27ef837fd0180bb253885a58aba~~",typography:this.typography,part:"label"},this.description),i("mds-text",{key:"~~baac8e278b04ebabc01a434451a367df848cd692~~","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},i("i",{key:"~~835a41cd2c377aeff1c489aedad1a2b84651fcfe~~",class:"icon",innerHTML:a}))),i("div",{key:"~~e48c87aeb25bb8d7fc33335978ff17ffd07f1577~~",class:"content",id:"content"},i("div",{key:"~~4d3b60411f38078738cdc9b6cb4d5b14316391d3~~","aria-label":this.description,class:"content-expander",part:"content",role:"region"},i("slot",{key:"~~e474417107b3705901dfe539ce8860d66f4c19b6~~"}))))))}static get watchers(){return{selected:[{handleSelected:0}]}}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){,::backdrop,:after,:before{--mds-accordion-timer-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-accordion-timer-item-progress-bar-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-timer-item-progress-bar-background:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-timer-item-progress-bar-thickness:calc(var(--spacing,.0025rem)100);--mds-accordion-timer-item-duration:.5s}}}~~@layer reset,vendor,theme,base,components,utilities;:~~host(:not(:is([hydrated],.hydrated))),:is(mds-progress,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-accordion-timer-item-duration{syntax:"<time>";inherits:false;initial-value:.5s}:host{--mds-accordion-timer-item-color:var(--mds-accordion-timer-color,rgb(var(--tone-neutral-02,244 244 244)));--mds-accordion-timer-item-progress-bar-color:var(--mds-accordion-timer-progress-bar-color,rgb(var(--tone-neutral-03,233 233 233)));--mds-accordion-timer-item-progress-bar-background:var(--mds-accordion-timer-progress-bar-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-accordion-timer-item-progress-bar-thickness:var(--mds-accordion-timer-progress-bar-thickness,calc(var(--spacing,.0025rem)100));--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration,.5s);color:var(--mds-accordion-timer-item-color,rgb(var(--tone-neutral-02,244 244 244)));display:grid;padding-bottom:calc(var(--spacing,.0025rem)400);padding-top:calc(var(--spacing,.0025rem)400);position:relative;-webkit-transition-duration:var(--~~mds~~-accordion-timer-item-duration~~,.5s~~);transition-duration:var(--~~mds~~-accordion-timer-item-duration~~,.5s~~);transition-property:color;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.row{display:flex;gap:calc(var(--spacing,.0025rem)400)}.accordion{display:grid}.progress-bar{--mds-progress-color:var(--mds-accordion-timer-item-progress-bar-color,rgb(var(--tone-neutral-03,233 233 233)));--mds-progress-background:var(--mds-accordion-timer-item-progress-bar-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-progress-thickness:var(--mds-accordion-timer-item-progress-bar-thickness,calc(var(--spacing,.0025rem)100));flex-shrink:0}.action{background-color:#0000;border:0;border-radius:var(--radius-xs,8px);color:inherit;cursor:pointer;display:flex;justify-content:space-between;padding:0;text-align:left}.action,.content{gap:calc(var(--spacing,.0025rem)400)}.content{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;padding-top:0;-webkit-transition-duration:var(--~~mds~~-accordion-timer-item-duration~~,.5s~~);transition-duration:var(--~~mds~~-accordion-timer-item-duration~~,.5s~~);transition-property:grid-template-rows,opacity,padding,-ms-grid-rows;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.content,.content-expander{min-height:0}.icon{display:flex;fill:currentColor;transform:rotate(0);-webkit-transition-duration:var(--duration-500,.5s);transition-duration:var(--duration-500,.5s);transition-property:transform;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.icon svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}:host([selected]:not([selected=false])) .action{cursor:auto}:host([selected]:not([selected=false])) .icon{transform:rotate(90deg)}:host([selected]:not([selected=false])) .content{grid-template-rows:1fr;opacity:1;padding-top:calc(var(--spacing,.0025rem)*400)}:host~~-context~~(~~:root.~~pref-animation-reduce){--~~mds~~-accordion-timer-item-duration:0s}@media (prefers-reduced-motion){:is(:~~host-context~~(~~:root.~~pref-animation~~-system~~),:host~~-context~~(~~:root:not(~~[~~data~~-~~magma-pref~~]))){--~~mds~~-accordion-timer-item-duration:0s}}'}},[257,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2]},void 0,{selected:[{handleSelected:0}]}]),p=l,u=function(){"undefined"!=typeof customElements&&["mds-accordion-timer-item","mds-icon","mds-progress","mds-radial-progress","mds-text"].forEach((e=>{switch(e){case"mds-accordion-timer-item":customElements.get(s(e))\|\|customElements.define(s(e),l);break;case"mds-icon":customElements.get(s(e))\|\|n();break;case"mds-progress":customElements.get(s(e))\|\|c();break;case"mds-radial-progress":customElements.get(s(e))\|\|d();break;case"mds-text":customElements.get(s(e))\|\|m()}}))};export{p as MdsAccordionTimerItem,u as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as r,createEvent as t,h as i,Host as o,transformTag as s}from"@stencil/core/internal/client";import{m as a}from"./keyboard-arrow-right.js";import{s as n}from"./preference.js";import{d as c}from"./mds-icon2.js";import{d}from"./mds-progress2.js";import{d as m}from"./mds-radial-progress2.js";import{d as l}from"./mds-text2.js";const p=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.clickSelectEvent=t(this,"mdsAccordionTimerItemClickSelect",7),this.selectEvent=t(this,"mdsAccordionTimerItemSelect",7),this.selectedMouseEnterEvent=t(this,"mdsAccordionTimerItemMouseEnterSelect",7),this.selectedMouseLeaveEvent=t(this,"mdsAccordionTimerItemMouseLeaveSelect",7),this.typography="h5",this.selected=!1,this.progress=0,this.uuid=0,this.toggle=()=>{this.selected=!this.selected,this.progress=0,this.selected&&this.clickSelectEvent.emit({selected:this.selected,uuid:this.uuid})},this.mouseEnter=()=>{this.selected&&this.selectedMouseEnterEvent.emit({selected:this.selected,uuid:this.uuid})},this.mouseLeave=()=>{this.selected&&this.selectedMouseLeaveEvent.emit({selected:this.selected,uuid:this.uuid})}}connectedCallback(){this.unsubscribePrefAnimation=n("animation",(e=>{this.prefAnimation=e}))}disconnectedCallback(){var e;null===(e=this.unsubscribePrefAnimation)\|\|void 0===e\|\|e.call(this)}handleSelected(e){this.progress=0,e&&this.selectEvent.emit({selected:this.selected,uuid:this.uuid})}render(){var e;return i(o,{key:"b4fd2f04a4823e78d8f06dd33d2132160a38de50",onMouseEnter:this.mouseEnter,onMouseLeave:this.mouseLeave,"pref-animation":this.prefAnimation},i("div",{key:"b7763bd61fbb24261f4233e841a8f2298cc0fbf2",class:"row"},i("mds-progress",{key:"6e7f677b567ad3bdc673f16696549e8e59384907","aria-hidden":"true",class:"progress-bar",progress:Number(null===(e=this.progress)\|\|void 0===e?void 0:e.toFixed(2)),direction:"vertical",size:"sm",part:"progress"}),i("div",{key:"f43f00a85db89e358900148e406d025285ff824e",class:"accordion"},i("button",{key:"2b3fc9dba58f4fe3404f2a899ee0b5b5198f9982","aria-controls":"content","aria-expanded":this.selected?"true":"false",class:"action",id:"action",onClick:this.toggle,role:"button",tabindex:"0"},i("mds-text",{key:"637cd20f152fecdf9df48e5902b347623d83aa63",typography:this.typography,part:"label"},this.description),i("mds-text",{key:"ba9383c769d039a8e1a4b50650774134aecdb26d","aria-hidden":"true",class:"icon-button",typography:this.typography,part:"icon"},i("i",{key:"2b883323b6cdd66e377fe44e6a7964fd377d66e1",class:"icon",innerHTML:a}))),i("div",{key:"391ff1c3b393c974f069f491a36f7578f1e09785",class:"content",id:"content"},i("div",{key:"498a565a894ecac0ec827ee638aea4c5328e4d05","aria-label":this.description,class:"content-expander",part:"content",role:"region"},i("slot",{key:"556f485c06e3dc3b45dac8391e6b054d76bc48f7"}))))))}static get watchers(){return{selected:[{handleSelected:0}]}}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){,::backdrop,:after,:before{--mds-accordion-timer-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-accordion-timer-item-progress-bar-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-timer-item-progress-bar-background:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-timer-item-progress-bar-thickness:calc(var(--spacing,.0025rem)100);--mds-accordion-timer-item-duration:.5s}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-progress,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-accordion-timer-item-duration{syntax:"<time>";inherits:false;initial-value:.5s}:host{--mds-accordion-timer-item-color:var(--mds-accordion-timer-color,rgb(var(--tone-neutral-02,244 244 244)));--mds-accordion-timer-item-progress-bar-color:var(--mds-accordion-timer-progress-bar-color,rgb(var(--tone-neutral-03,233 233 233)));--mds-accordion-timer-item-progress-bar-background:var(--mds-accordion-timer-progress-bar-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-accordion-timer-item-progress-bar-thickness:var(--mds-accordion-timer-progress-bar-thickness,calc(var(--spacing,.0025rem)100));--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration,.5s);--private-accordion-timer-item-duration:var(--mds-accordion-timer-item-duration,.5s);color:var(--mds-accordion-timer-item-color,rgb(var(--tone-neutral-02,244 244 244)));display:grid;padding-bottom:calc(var(--spacing,.0025rem)400);padding-top:calc(var(--spacing,.0025rem)400);position:relative;-webkit-transition-duration:var(--private-accordion-timer-item-duration);transition-duration:var(--private-accordion-timer-item-duration);transition-property:color;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.row{display:flex;gap:calc(var(--spacing,.0025rem)400)}.accordion{display:grid}.progress-bar{--mds-progress-color:var(--mds-accordion-timer-item-progress-bar-color,rgb(var(--tone-neutral-03,233 233 233)));--mds-progress-background:var(--mds-accordion-timer-item-progress-bar-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-progress-thickness:var(--mds-accordion-timer-item-progress-bar-thickness,calc(var(--spacing,.0025rem)100));flex-shrink:0}.action{background-color:#0000;border:0;border-radius:var(--radius-xs,8px);color:inherit;cursor:pointer;display:flex;justify-content:space-between;padding:0;text-align:left}.action,.content{gap:calc(var(--spacing,.0025rem)400)}.content{display:grid;grid-template-rows:0fr;opacity:0;overflow:hidden;padding-top:0;-webkit-transition-duration:var(--private-accordion-timer-item-duration);transition-duration:var(--private-accordion-timer-item-duration);transition-property:grid-template-rows,opacity,padding,-ms-grid-rows;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.content,.content-expander{min-height:0}.icon{display:flex;fill:currentColor;transform:rotate(0);-webkit-transition-duration:var(--duration-500,.5s);transition-duration:var(--duration-500,.5s);transition-property:transform;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.icon svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}:host([selected]:not([selected=false])) .action{cursor:auto}:host([selected]:not([selected=false])) .icon{transform:rotate(90deg)}:host([selected]:not([selected=false])) .content{grid-template-rows:1fr;opacity:1;padding-top:calc(var(--spacing,.0025rem)*400)}:host([pref-animation=reduce]){--private-accordion-timer-item-duration:0s}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-accordion-timer-item-duration:0s}}'}},[257,"mds-accordion-timer-item",{typography:[1],selected:[516],description:[1],duration:[514],progress:[2],uuid:[2],prefAnimation:[32]},void 0,{selected:[{handleSelected:0}]}]),u=p,b=function(){"undefined"!=typeof customElements&&["mds-accordion-timer-item","mds-icon","mds-progress","mds-radial-progress","mds-text"].forEach((e=>{switch(e){case"mds-accordion-timer-item":customElements.get(s(e))\|\|customElements.define(s(e),p);break;case"mds-icon":customElements.get(s(e))\|\|c();break;case"mds-progress":customElements.get(s(e))\|\|d();break;case"mds-radial-progress":customElements.get(s(e))\|\|m();break;case"mds-text":customElements.get(s(e))\|\|l()}}))};export{u as MdsAccordionTimerItem,b as defineCustomElement}

package/dist/components/mds-accordion-timer.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as o,transformTag as r}from"@stencil/core/internal/client";const n=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.changeEvent=e(this,"mdsAccordionTimerChange",7),this.currentDuration=0,this.time=0,this.duration=1e4,this.clearIntervals=()=>{"undefined"!=typeof window&&window.clearInterval(this.timeChecker),this.timeChecker=0},this.remainingTime=()=>{const t=this.selectedItemRemainingTime-((new Date).getTime()-this.timeStarted);return t>=0?t:0},this.progress=()=>Math.abs(this.remainingTime()/this.currentDuration-1),this.addTimeListener=()=>{"undefined"!=typeof window&&(this.timeChecker=window.setInterval((()=>{const t=this.progress();void 0!==this.selectedItem&&(this.selectedItem.progress=t),1===t&&(this.selectedItem.progress=0,this.startNext())}),100))},this.beginningTime=()=>(this.timeStarted=(new Date).getTime(),this.timeStarted),this.setSelectedItem=t=>{this.children.forEach(((i,e)=>{var s;e===t?(i.selected=!0,this.currentDuration=null!==(s=i.duration)&&void 0!==s?s:this.duration,this.selectedItem=i,this.changeEvent.emit({index:e})):i.selected=!1}))},this.startNext=()=>{this.setSelectedItem(this.selectedItem.uuid+1>this.children.length-1?0:this.selectedItem.uuid+1),this.startTimer()},this.startTimer=()=>{this.clearIntervals(),this.time=this.beginningTime(),this.selectedItemRemainingTime=this.currentDuration,this.addTimeListener()},this.playTimer=()=>{this.beginningTime(),this.addTimeListener()},this.pauseTimer=()=>{this.clearIntervals(),this.selectedItemRemainingTime=this.remainingTime()},this.stopTimer=()=>{this.clearIntervals()}}componentDidLoad(){this.children=this.element.querySelectorAll("mds-accordion-timer-item"),this.children.forEach(((t,i)=>{var e;t.uuid=i,t.selected&&(this.currentDuration=null!==(e=t.duration)&&void 0!==e?e:this.duration,this.selectedItem=t)})),void 0!==this.selectedItem&&this.startTimer(),this.paused&&this.pauseTimer()}disconnectedCallback(){this.stopTimer(),this.clearIntervals()}onClickSelect(t){this.clearIntervals(),null!=this.selectedItem&&(this.selectedItem.progress=0),this.setSelectedItem(t.detail.uuid),this.startTimer(),this.pauseTimer()}onSelect(t){this.clearIntervals(),this.paused=!1,null!=this.selectedItem&&(this.selectedItem.progress=0),this.setSelectedItem(t.detail.uuid),this.startTimer()}onMouseEnterSelect(){this.paused\|\|this.pauseTimer()}onMouseLeaveSelect(){this.paused\|\|0===this.timeChecker&&this.playTimer()}handlePaused(t){t?this.pauseTimer():this.playTimer()}render(){return s(o,{key:"6801e67ac8d8235b3c8610787fcddc6223123284"},s("slot",{key:"d9c3bebad4f570777a2d64a4ccfad242b22fd1e0"}))}get element(){return this}static get watchers(){return{paused:[{handlePaused:0}]}}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){,::backdrop,:after,:before{--mds-accordion-timer-progress-bar-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-timer-progress-bar-background:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-timer-progress-bar-thickness:1px;--mds-accordion-timer-duration:.5s}}}~~@layer reset,vendor,theme,base,components,utilities;:~~host(:not(:is([hydrated],.hydrated))),mds-accordion-timer-item:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-accordion-timer-progress-bar-thickness{syntax:"<length>";inherits:false;initial-value:1px}@property --mds-accordion-timer-duration{syntax:"<time>";inherits:false;initial-value:.5s}:host{--mds-accordion-timer-progress-bar-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-timer-progress-bar-background:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-timer-progress-bar-thickness:calc(var(--spacing,.0025rem)100);--mds-accordion-timer-duration:.5s;display:block}:host-context(:root.pref-animation-reduce){--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration,0s)}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration,0s)}}'}},[257,"mds-accordion-timer",{duration:[514],paused:[516],time:[32]},[[0,"mdsAccordionTimerItemClickSelect","onClickSelect"],[0,"mdsAccordionTimerItemSelect","onSelect"],[0,"mdsAccordionTimerItemMouseEnterSelect","onMouseEnterSelect"],[0,"mdsAccordionTimerItemMouseLeaveSelect","onMouseLeaveSelect"]],{paused:[{handlePaused:0}]}]),d=n,a=function(){"undefined"!=typeof customElements&&["mds-accordion-timer"].forEach((t=>{"mds-accordion-timer"===t&&(customElements.get(r(t))\|\|customElements.define(r(t),n))}))};export{d as MdsAccordionTimer,a as defineCustomElement}
1	+ import{proxyCustomElement as t,HTMLElement as i,createEvent as s,h as e,Host as r,transformTag as o}from"@stencil/core/internal/client";const n=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.changeEvent=s(this,"mdsAccordionTimerChange",7),this.currentDuration=0,this.time=0,this.duration=1e4,this.clearIntervals=()=>{"undefined"!=typeof window&&window.clearInterval(this.timeChecker),this.timeChecker=0},this.remainingTime=()=>{const t=this.selectedItemRemainingTime-((new Date).getTime()-this.timeStarted);return t>=0?t:0},this.progress=()=>Math.abs(this.remainingTime()/this.currentDuration-1),this.addTimeListener=()=>{"undefined"!=typeof window&&(this.timeChecker=window.setInterval((()=>{const t=this.progress();void 0!==this.selectedItem&&(this.selectedItem.progress=t),1===t&&(this.selectedItem.progress=0,this.startNext())}),100))},this.beginningTime=()=>(this.timeStarted=(new Date).getTime(),this.timeStarted),this.setSelectedItem=t=>{this.children.forEach(((i,s)=>{var e;s===t?(i.selected=!0,this.currentDuration=null!==(e=i.duration)&&void 0!==e?e:this.duration,this.selectedItem=i,this.changeEvent.emit({index:s})):i.selected=!1}))},this.startNext=()=>{this.setSelectedItem(this.selectedItem.uuid+1>this.children.length-1?0:this.selectedItem.uuid+1),this.startTimer()},this.startTimer=()=>{this.clearIntervals(),this.time=this.beginningTime(),this.selectedItemRemainingTime=this.currentDuration,this.addTimeListener()},this.playTimer=()=>{this.beginningTime(),this.addTimeListener()},this.pauseTimer=()=>{this.clearIntervals(),this.selectedItemRemainingTime=this.remainingTime()},this.stopTimer=()=>{this.clearIntervals()}}componentDidLoad(){this.children=this.element.querySelectorAll("mds-accordion-timer-item"),this.children.forEach(((t,i)=>{var s;t.uuid=i,t.selected&&(this.currentDuration=null!==(s=t.duration)&&void 0!==s?s:this.duration,this.selectedItem=t)})),void 0!==this.selectedItem&&this.startTimer(),this.paused&&this.pauseTimer()}disconnectedCallback(){this.stopTimer(),this.clearIntervals()}onClickSelect(t){this.clearIntervals(),null!=this.selectedItem&&(this.selectedItem.progress=0),this.setSelectedItem(t.detail.uuid),this.startTimer(),this.pauseTimer()}onSelect(t){this.clearIntervals(),this.paused=!1,null!=this.selectedItem&&(this.selectedItem.progress=0),this.setSelectedItem(t.detail.uuid),this.startTimer()}onMouseEnterSelect(){this.paused\|\|this.pauseTimer()}onMouseLeaveSelect(){this.paused\|\|0===this.timeChecker&&this.playTimer()}handlePaused(t){t?this.pauseTimer():this.playTimer()}render(){return e(r,{key:"6801e67ac8d8235b3c8610787fcddc6223123284"},e("slot",{key:"d9c3bebad4f570777a2d64a4ccfad242b22fd1e0"}))}get element(){return this}static get watchers(){return{paused:[{handlePaused:0}]}}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){,::backdrop,:after,:before{--mds-accordion-timer-progress-bar-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-timer-progress-bar-background:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-timer-progress-bar-thickness:1px;--mds-accordion-timer-duration:.5s}}}:host(:not(:is([hydrated],.hydrated))),mds-accordion-timer-item:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-accordion-timer-progress-bar-thickness{syntax:"<length>";inherits:false;initial-value:1px}@property --mds-accordion-timer-duration{syntax:"<time>";inherits:false;initial-value:.5s}:host{--mds-accordion-timer-progress-bar-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-timer-progress-bar-background:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-timer-progress-bar-thickness:calc(var(--spacing,.0025rem)100);--mds-accordion-timer-duration:.5s;display:block}'}},[257,"mds-accordion-timer",{duration:[514],paused:[516],time:[32]},[[0,"mdsAccordionTimerItemClickSelect","onClickSelect"],[0,"mdsAccordionTimerItemSelect","onSelect"],[0,"mdsAccordionTimerItemMouseEnterSelect","onMouseEnterSelect"],[0,"mdsAccordionTimerItemMouseLeaveSelect","onMouseLeaveSelect"]],{paused:[{handlePaused:0}]}]),h=n,d=function(){"undefined"!=typeof customElements&&["mds-accordion-timer"].forEach((t=>{"mds-accordion-timer"===t&&(customElements.get(o(t))\|\|customElements.define(o(t),n))}))};export{h as MdsAccordionTimer,d as defineCustomElement}

package/dist/components/mds-accordion.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as o,createEvent as t,h as r,Host as n,transformTag as s}from"@stencil/core/internal/client";const i=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.changedEvent=t(this,"mdsAccordionChange",7),this.multiple=!1,this.~~closable~~=!0,this.queryItems=()=>this.element.querySelectorAll("mds-accordion-item"),this.selectMultipleItems=()=>{const e=this.queryItems(),o=[];e.forEach(((e,t)=>{e.selected&&o.push(t)})),this.changedEvent.emit({children:e,selected:""+o})},this.changedChildrenHandler=e=>{const o=this.queryItems();this.multiple?this.selectMultipleItems():o.forEach(((t,r)=>{t.selected="item-"+r===e.detail.id&&(e.detail.selected~~\|\|!~~this.~~closable~~),t.selected&&this.changedEvent.emit({children:o,selected:""+r})}))}}componentWillLoad(){this.queryItems().forEach(((e,o)=>e.id="item-"+o))}selectedEventHandler(e){this.changedChildrenHandler(e)}unselectedEventHandler(e){this.changedChildrenHandler(e)}render(){return r(n,{key:"~~c3abd999f46ae45f2ba929c1719a04b2f6e57e62~~"},r("slot",{key:"~~368b026625a477dfc337b5d9b56ee6e01eef15ce~~"}))}get element(){return this}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){,::backdrop,:after,:before{--mds-accordion-border-color:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-description-color:rgb(var(--tone-neutral-02,244 244 244));--mds-accordion-border-width:2px;--mds-accordion-duration:.3s;--mds-accordion-padding-selected:1rem 0 2rem 0;--mds-accordion-padding-unselected:1rem 0}}}~~@layer reset,vendor,theme,base,components,utilities;:~~host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-accordion-border-width{syntax:"<length>";inherits:false;initial-value:2px}@property --mds-accordion-duration{syntax:"<time>";inherits:false;initial-value:.3s}@property --mds-accordion-padding-selected{syntax:"<length>+";inherits:false;initial-value:1rem 0 2rem 0}@property --mds-accordion-padding-unselected{syntax:"<length>+";inherits:false;initial-value:1rem 0}:host{--mds-accordion-border-color:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-border-width:2px;--mds-accordion-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-description-color:rgb(var(--tone-neutral-02,244 244 244));--mds-accordion-duration:.3s;--mds-accordion-padding-selected:calc(var(--spacing,.0025rem)400) 0 calc(var(--spacing,.0025rem)800) 0;--mds-accordion-padding-unselected:calc(var(--spacing,.0025rem)400) 0;display:grid}:host~~-context~~(~~:root.~~pref-~~animation-reduce){--mds-accordion-duration:0s}:host-context(:root.pref-~~theme-dark:not(.pref-theme-scheme-light)){--mds-accordion-border-color:rgb(var(--tone-neutral-06,158 158 158))}:host~~-context~~(~~:root.~~pref-contrast-more){--mds-accordion-border-color:rgb(var(--tone-neutral-01,255 255 255));--mds-accordion-color:rgb(var(--tone-neutral-01,255 255 255))}@media (prefers-~~reduced~~-~~motion~~){:~~is(:~~host~~-context~~(:~~root.pref-animation-system),:host-context(:root:~~not([~~data~~-~~magma-pref~~]))~~){--mds-accordion-duration:0s}}@media (prefers-color-scheme:dark){:is(:~~host~~-context~~(~~:root.~~pref-theme-system:not(.pref-theme-scheme-light~~)),:host-context(:root:not([data-magma-pref~~]))){--mds-accordion-border-color:rgb(var(--tone-neutral-06,158 158 158))}}@media (prefers-contrast:more){:is(:~~host-context~~(~~:root.~~pref-contrast~~-system~~),:host~~-context~~(~~:root:not(~~[~~data~~-~~magma-pref~~]))){--mds-accordion-border-color:rgb(var(--tone-neutral-01,255 255 255));--mds-accordion-color:rgb(var(--tone-neutral-01,255 255 255))}}'}},[257,"mds-accordion",{multiple:[4],~~closable~~:[4]},[[0,"mdsAccordionItemSelect","selectedEventHandler"],[0,"mdsAccordionItemUnselect","unselectedEventHandler"]]]),d=i,a=function(){"undefined"!=typeof customElements&&["mds-accordion"].forEach((e=>{"mds-accordion"===e&&(customElements.get(s(e))\|\|customElements.define(s(e),i))}))};export{d as MdsAccordion,a as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as r,createEvent as t,h as o,Host as s,transformTag as n}from"@stencil/core/internal/client";import{s as i}from"./preference.js";const c=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.changedEvent=t(this,"mdsAccordionChange",7),this.multiple=!1,this.disableClose=!1,this.queryItems=()=>this.element.querySelectorAll("mds-accordion-item"),this.selectMultipleItems=()=>{const e=this.queryItems(),r=[];e.forEach(((e,t)=>{e.selected&&r.push(t)})),this.changedEvent.emit({children:e,selected:""+r})},this.changedChildrenHandler=e=>{const r=this.queryItems();if(this.multiple){if(this.disableClose&&!e.detail.selected&&!Array.from(r).some((r=>r.id!==e.detail.id&&r.selected))){const t=Array.from(r).find((r=>r.id===e.detail.id));t&&(t.selected=!0)}this.selectMultipleItems()}else r.forEach(((t,o)=>{t.selected="item-"+o===e.detail.id&&(e.detail.selected\|\|this.disableClose),t.selected&&this.changedEvent.emit({children:r,selected:""+o})}))}}connectedCallback(){this.unsubscribePrefContrast=i("contrast",(e=>{this.prefContrast=e})),this.unsubscribePrefTheme=i("theme",(e=>{this.prefTheme=e})),this.unsubscribePrefThemeScheme=i("theme-scheme",(e=>{this.prefThemeScheme=e}))}disconnectedCallback(){var e,r,t;null===(e=this.unsubscribePrefContrast)\|\|void 0===e\|\|e.call(this),null===(r=this.unsubscribePrefTheme)\|\|void 0===r\|\|r.call(this),null===(t=this.unsubscribePrefThemeScheme)\|\|void 0===t\|\|t.call(this)}componentWillLoad(){this.queryItems().forEach(((e,r)=>e.id="item-"+r))}selectedEventHandler(e){this.changedChildrenHandler(e)}unselectedEventHandler(e){this.changedChildrenHandler(e)}render(){return o(s,{key:"291876971fed6c87a8c6644472b2fa952b7998bb","pref-contrast":this.prefContrast,"pref-theme":this.prefTheme,"pref-theme-scheme":this.prefThemeScheme},o("slot",{key:"7779b91cd742c90cab357edb0b798c853406d722"}))}get element(){return this}static get style(){return'@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){,::backdrop,:after,:before{--mds-accordion-border-color:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-description-color:rgb(var(--tone-neutral-02,244 244 244));--mds-accordion-border-width:2px;--mds-accordion-duration:.3s;--mds-accordion-padding-selected:1rem 0 2rem 0;--mds-accordion-padding-unselected:1rem 0}}}:host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-accordion-border-width{syntax:"<length>";inherits:false;initial-value:2px}@property --mds-accordion-duration{syntax:"<time>";inherits:false;initial-value:.3s}@property --mds-accordion-padding-selected{syntax:"<length>+";inherits:false;initial-value:1rem 0 2rem 0}@property --mds-accordion-padding-unselected{syntax:"<length>+";inherits:false;initial-value:1rem 0}:host{--mds-accordion-border-color:rgb(var(--tone-neutral-08,107 107 107));--mds-accordion-border-width:2px;--mds-accordion-color:rgb(var(--tone-neutral-03,233 233 233));--mds-accordion-description-color:rgb(var(--tone-neutral-02,244 244 244));--mds-accordion-duration:.3s;--mds-accordion-padding-selected:calc(var(--spacing,.0025rem)400) 0 calc(var(--spacing,.0025rem)800) 0;--mds-accordion-padding-unselected:calc(var(--spacing,.0025rem)400) 0;display:grid}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-accordion-border-color:rgb(var(--tone-neutral-06,158 158 158))}:host([pref-contrast=more]){--mds-accordion-border-color:rgb(var(--tone-neutral-01,255 255 255));--mds-accordion-color:rgb(var(--tone-neutral-01,255 255 255))}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-accordion-border-color:rgb(var(--tone-neutral-06,158 158 158))}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-accordion-border-color:rgb(var(--tone-neutral-01,255 255 255));--mds-accordion-color:rgb(var(--tone-neutral-01,255 255 255))}}'}},[257,"mds-accordion",{multiple:[4],disableClose:[4,"disable-close"],prefContrast:[32],prefTheme:[32],prefThemeScheme:[32]},[[0,"mdsAccordionItemSelect","selectedEventHandler"],[0,"mdsAccordionItemUnselect","unselectedEventHandler"]]]),d=c,a=function(){"undefined"!=typeof customElements&&["mds-accordion"].forEach((e=>{"mds-accordion"===e&&(customElements.get(n(e))\|\|customElements.define(n(e),c))}))};export{d as MdsAccordion,a as defineCustomElement}

package/dist/components/mds-author.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as t,h as a,Host as s,transformTag as n}from"@stencil/core/internal/client";const i=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}componentWillLoad(){this.hasAvatar=null!==this.hostElement.querySelector(':scope > [slot="avatar"]')}render(){return a(s,{key:"2b0e6730cb3fb2d7881f527430d2b04a0705fd1b"},this.hasAvatar&&a("div",{key:"ee84a202caf229318c122be05abd703a0a7a7719",class:"avatar"},a("slot",{key:"d9b69db0285af31444ca333d948eecf36445539b",name:"avatar"})),a("div",{key:"6a51cca8c63a1967e79a464b846f09d9966055bd",class:"info"},a("slot",{key:"65e3f059c8d4e5e432b0990ffaa41197fd8186ff"})))}get hostElement(){return this}static get style(){return"@layer reset,vendor,theme,base,components,utilities~~;@layer reset,vendor,theme,base,components,utilities~~;:host(:not(:is([hydrated],.hydrated))),mds-avatar:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{align-items:center;container:mds-author/inline-size;display:flex;gap:calc(var(--spacing,.0025rem)*400);width:100%}.avatar{display:flex;flex-shrink:0;-webkit-user-select:none;user-select:none}.info{display:grid;flex-grow:1;min-width:0}@container (max-width:200px){:host~~-context(:not(.safari))~~{flex-direction:column;justify-content:center;text-align:center}}"}},[257,"mds-author"]),o=i,r=function(){"undefined"!=typeof customElements&&["mds-author"].forEach((e=>{"mds-author"===e&&(customElements.get(n(e))\|\|customElements.define(n(e),i))}))};export{o as MdsAuthor,r as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as t,h as a,Host as s,transformTag as n}from"@stencil/core/internal/client";const i=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}componentWillLoad(){this.hasAvatar=null!==this.hostElement.querySelector(':scope > [slot="avatar"]')}render(){return a(s,{key:"2b0e6730cb3fb2d7881f527430d2b04a0705fd1b"},this.hasAvatar&&a("div",{key:"ee84a202caf229318c122be05abd703a0a7a7719",class:"avatar"},a("slot",{key:"d9b69db0285af31444ca333d948eecf36445539b",name:"avatar"})),a("div",{key:"6a51cca8c63a1967e79a464b846f09d9966055bd",class:"info"},a("slot",{key:"65e3f059c8d4e5e432b0990ffaa41197fd8186ff"})))}get hostElement(){return this}static get style(){return"@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-avatar:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{align-items:center;container:mds-author/inline-size;display:flex;gap:calc(var(--spacing,.0025rem)*400);width:100%}.avatar{display:flex;flex-shrink:0;-webkit-user-select:none;user-select:none}.info{display:grid;flex-grow:1;min-width:0}@container (max-width:200px){:host{flex-direction:column;justify-content:center;text-align:center}}"}},[257,"mds-author"]),o=i,r=function(){"undefined"!=typeof customElements&&["mds-author"].forEach((e=>{"mds-author"===e&&(customElements.get(n(e))\|\|customElements.define(n(e),i))}))};export{o as MdsAuthor,r as defineCustomElement}