@esportsplus/ui 0.8.1 → 0.8.2

package/.editorconfig

@@ -1,9 +1,9 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 4
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-end_of_line = lf
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf

package/.gitattributes

@@ -1,2 +1,2 @@
-# Auto detect text files and perform LF normalization
-* text=auto
+# Auto detect text files and perform LF normalization
+* text=auto

package/build/components/clipboard/index.d.ts

@@ -1,3 +1,4 @@
+import './scss/index.scss';
 declare const _default: {
     write: (value: string) => Promise<boolean>;
 };

package/build/components/clipboard/index.js

@@ -1,2 +1,3 @@
 import write from './write.js';
+import './scss/index.scss';
 export default { write };

package/build/components/counter/index.js

@@ -39,8 +39,8 @@ export default ({ currency, delay, max, suffix, value }) => {
         }
     });
     return {
-        html: html `
-            <div class='counter'>
+        html: html `
+            <div class='counter'>
                 ${() => {
             let n = state.length;
             if (n === 0) {
@@ -48,24 +48,24 @@ export default ({ currency, delay, max, suffix, value }) => {
             }
             return html.reactive(state.render, function (value, i) {
                 if (isNaN(parseInt(value, 10))) {
-                    return html `
-                                <span class='counter-character counter-character--symbol'>
-                                    ${value}
-                                </span>
+                    return html `
+                                <span class='counter-character counter-character--symbol'>
+                                    ${value}
+                                </span>
                             `;
                 }
-                return html `
-                            <div class='counter-character ${i > n - 3 ? 'counter-character--fraction' : ''}'>
-                                <div class='counter-character-track' style='${() => `--value: ${this[i]}`}'>
-                                    <span>9</span>
-                                    ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html `<span>${value}</span>`)}
-                                    <span>0</span>
-                                </div>
-                            </div>
+                return html `
+                            <div class='counter-character ${i > n - 3 ? 'counter-character--fraction' : ''}'>
+                                <div class='counter-character-track' style='${() => `--value: ${this[i]}`}'>
+                                    <span>9</span>
+                                    ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html `<span>${value}</span>`)}
+                                    <span>0</span>
+                                </div>
+                            </div>
                         `;
             });
-        }}
-            </div>
+        }}
+            </div>
         `,
         state: api
     };

package/build/components/ellipsis/index.js

@@ -1,8 +1,8 @@
 import { html } from '@esportsplus/template';
-export default (attributes) => html `
-<div class="ellipsis" ${attributes}>
-    <span></span>
-    <span></span>
-    <span></span>
-</div>
+export default (attributes) => html `
+<div class="ellipsis" ${attributes}>
+    <span></span>
+    <span></span>
+    <span></span>
+</div>
 `;

package/build/components/footer/index.js

@@ -1,55 +1,55 @@
 import { html, svg } from '@esportsplus/template';
 function copy({ attributes, brand }) {
-    return html `
-        <div class='footer-copyright group-item --flex-center'>
-            <div class='text --padding-vertical --padding-300 --text-300' style='--color-default: var(--color-grey-500);' ${attributes}>
-                &copy; ${`${new Date().getFullYear()} ${brand}, All rights reserved`}
-            </div>
-        </div>
+    return html `
+        <div class='footer-copyright group-item --flex-center'>
+            <div class='text --padding-vertical --padding-300 --text-300' style='--color-default: var(--color-grey-500);' ${attributes}>
+                &copy; ${`${new Date().getFullYear()} ${brand}, All rights reserved`}
+            </div>
+        </div>
     `;
 }
 export default ({ copyright, footer, nav, social }) => {
-    return html `
-        <footer class='footer' ${footer?.attributes}>
-            <div class='container'>
-                <div class='group group--offset-top --flex-center --margin-400'>
-
+    return html `
+        <footer class='footer' ${footer?.attributes}>
+            <div class='container'>
+                <div class='group group--offset-top --flex-center --margin-400'>
+
                     ${nav
-        ? nav.links.map(({ text, url }) => html `
-                            <div class='group-item'>
-                                <a
-                                    class='link --color-white --padding-vertical-300 --text-300'
-                                    href='${url}'
-                                    style='--color-default: var(--color-grey-500);'
-                                    ${nav.attributes}
-                                >
-                                    ${text}
-                                </a>
-                            </div>
+        ? nav.links.map(({ text, url }) => html `
+                            <div class='group-item'>
+                                <a
+                                    class='link --color-white --padding-vertical-300 --text-300'
+                                    href='${url}'
+                                    style='--color-default: var(--color-grey-500);'
+                                    ${nav.attributes}
+                                >
+                                    ${text}
+                                </a>
+                            </div>
                         `)
-        : copy(copyright)}
-
-                    <div class='footer-break'></div>
-
-                    ${social?.links && social.links.map(({ icon, url }) => html `
-                        <div class='group-item'>
-                            <a
-                                class='link --color-white --padding-0px'
-                                href='${url}'
-                                style='--color-default: var(--color-grey-500);'
-                                ${social.attributes}
-                            >
-                                <div class='icon --size-500'>
-                                    ${svg.sprite(icon)}
-                                </div>
-                            </a>
-                        </div>
-                    `)}
-
-                    ${nav && copy(copyright)}
-
-                </div>
-            </div>
-        </footer>
+        : copy(copyright)}
+
+                    <div class='footer-break'></div>
+
+                    ${social?.links && social.links.map(({ icon, url }) => html `
+                        <div class='group-item'>
+                            <a
+                                class='link --color-white --padding-0px'
+                                href='${url}'
+                                style='--color-default: var(--color-grey-500);'
+                                ${social.attributes}
+                            >
+                                <div class='icon --size-500'>
+                                    ${svg.sprite(icon)}
+                                </div>
+                            </a>
+                        </div>
+                    `)}
+
+                    ${nav && copy(copyright)}
+
+                </div>
+            </div>
+        </footer>
     `;
 };

package/build/components/form/layout.js

@@ -1,12 +1,12 @@
 import { html } from '@esportsplus/template';
-export default (data) => html `
-    <form class='${data?.class}' ${data?.action || ''}>
-        ${data?.content || ''}
-
-        ${data?.button?.content ? html `
-            <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
-                ${data?.button?.content || ''}
-            </button>
-        ` : ''}
-    </form>
+export default (data) => html `
+    <form class='${data?.class}' ${data?.action || ''}>
+        ${data?.content || ''}
+
+        ${data?.button?.content ? html `
+            <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
+                ${data?.button?.content || ''}
+            </button>
+        ` : ''}
+    </form>
 `;

package/build/components/link/hover.js

@@ -4,14 +4,14 @@ export default ({ attributes, content }) => {
         attributes: {
             class: 'link--hover'
         },
-        content: html `
-            <span class='link-hover link-hover--one' ${attributes}>
-                ${content}
-            </span>
-
-            <span class='link-hover link-hover--two' ${attributes}>
-                ${content}
-            </span>
+        content: html `
+            <span class='link-hover link-hover--one' ${attributes}>
+                ${content}
+            </span>
+
+            <span class='link-hover link-hover--two' ${attributes}>
+                ${content}
+            </span>
         `
     };
 };

package/build/components/loader/index.js

@@ -8,24 +8,24 @@ export default ({ attributes, content }) => {
     setTimeout(() => {
         state.scale = true;
     }, 300);
-    return html `
-        <div class="loader ${() => state.load && 'loader--load'}">
-            <div class="loader ${() => state.load && 'loader--load'}">
-                <div class="loader-content">
-                    <div
-                        class="loader-logo ${() => state.scale && 'loader-logo--scale'} text --flex-center --text-uppercase --text-600"
-                        style='color: var(--color-grey-500);'
+    return html `
+        <div class="loader ${() => state.load && 'loader--load'}">
+            <div class="loader ${() => state.load && 'loader--load'}">
+                <div class="loader-content">
+                    <div
+                        class="loader-logo ${() => state.scale && 'loader-logo--scale'} text --flex-center --text-uppercase --text-600"
+                        style='color: var(--color-grey-500);'
                         onanimationend='${({ animationName: name }) => {
         if (name === 'scale') {
             state.load = true;
         }
-    }}'
-                        ${attributes}
-                    >
-                        ${content}
-                    </div>
-                </div>
-            </div>
-        </div>
+    }}'
+                        ${attributes}
+                    >
+                        ${content}
+                    </div>
+                </div>
+            </div>
+        </div>
     `;
 };

package/build/components/loading/index.js

@@ -1,6 +1,6 @@
 import { html } from '@esportsplus/template';
 export default (properties) => {
-    return html `
-        <div class="loading --border-width-700 --size-800" style='--border-color: var(--color-border-500);' ${properties}></div>
+    return html `
+        <div class="loading --border-width-700 --size-800" style='--border-color: var(--color-border-500);' ${properties}></div>
     `;
 };

package/build/components/magnet/index.js

@@ -31,13 +31,13 @@ export default ({ attributes, hide }) => {
         };
     }
     return {
-        html: html `
-            <div class='magnet' style='${() => `
-                height: ${state.height ? `${state.height}px` : '100%'};
-                opacity: ${state.opacity};
-                transform: translate(${state.left}px, ${state.top}px);
-                width: ${state.width}px;
-            `}' ${attributes}></div>
+        html: html `
+            <div class='magnet' style='${() => `
+                height: ${state.height ? `${state.height}px` : '100%'};
+                opacity: ${state.opacity};
+                transform: translate(${state.left}px, ${state.top}px);
+                width: ${state.width}px;
+            `}' ${attributes}></div>
         `,
         sibling: {
             attributes: events

package/build/components/scrollbar/index.js

@@ -7,15 +7,15 @@ export default ({ attributes, fixed } = {}) => {
         translate: 0
     });
     return {
-        html: html `
-            <div
-                class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
-                style='${() => `
-                    --translate: translate3d(0, ${state.translate}%, 0);
-                    --height: ${state.height}%;
-                `}'
-                ${attributes}
-            ></div>
+        html: html `
+            <div
+                class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
+                style='${() => `
+                    --translate: translate3d(0, ${state.translate}%, 0);
+                    --height: ${state.height}%;
+                `}'
+                ${attributes}
+            ></div>
         `,
         parent: {
             attributes: {

package/build/components/site/index.js

@@ -7,10 +7,10 @@ export default ({ attributes, content, scrollbar: sb }) => {
     sb.attributes.style ??= '--background-default: var(--color-black-400);';
     sb.fixed ??= true;
     let { html: h, parent } = scrollbar(sb);
-    return html `
-        <section class='site' ${attributes} ${{ onclick }} ${parent.attributes}>
-            ${content || ''}
-            ${h}
-        </section>
+    return html `
+        <section class='site' ${attributes} ${{ onclick }} ${parent.attributes}>
+            ${content || ''}
+            ${h}
+        </section>
     `;
 };

package/components/styles.css

@@ -1,10 +1,9 @@
 .accordion{max-height:var(--max-height);opacity:0;pointer-events:none;transition:max-height var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out}.accordion.--active{opacity:1;pointer-events:auto}
 .anchor{max-height:calc(var(--max-height, 100%) - var(--margin-vertical)*2);max-width:calc(var(--max-width, 100%) - var(--margin-horizontal)*2);position:absolute;transition:opacity var(--transition-duration) ease-in-out,transform var(--transition-duration) ease-in-out;z-index:9}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}
 .banner{position:absolute;inset:0 0 0 0;background-position:center;background-size:cover;z-index:-1}.banner--backdrop{background-position:bottom;height:80svh}.banner--blur{filter:blur(var(--blur));left:-2svh;right:-2svh;top:-2svh}.banner--blur.banner--backdrop{height:90svh}.banner--fixed{position:fixed}.banner--gradient::before{position:absolute;inset:0 0 0 0;background:radial-gradient(circle at top, transparent 64%, var(--to) 88%),linear-gradient(to bottom, var(--from) 0%, var(--to) 100%);content:"";z-index:0}
-.border{border-top:var(--border-width) var(--border-style) var(--border-color);position:relative;width:100%}.border+.border{display:none}
-.bubble{background:var(--background);border-radius:var(--border-radius);height:var(--height);width:var(--width)}.bubble--bottom-left,.bubble--bottom-right,.bubble--top-left,.bubble--top-right{position:absolute}.bubble--bottom-left,.bubble--top-left{left:var(--position-horizontal)}.bubble--bottom-right,.bubble--top-right{right:var(--position-horizontal)}.bubble--bottom-left,.bubble--bottom-right{bottom:var(--position-vertical)}.bubble--top-left,.bubble--top-right{top:var(--position-vertical)}
 .button{align-content:center;align-items:center;background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);font-weight:var(--font-weight);justify-content:center;line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;transition:all var(--transition-duration) ease-in-out;width:var(--width)}.button::after{position:absolute;inset:0 0 0 0;border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.button--flat::after{display:none}.button--processing{color:rgba(0,0,0,0);pointer-events:none}.button--processing::before{position:absolute;bottom:50%;right:50%;transform:translate(50%, 50%);animation:ButtonProcessing var(--animation-duration) infinite linear;border:var(--border-width) solid color-mix(in srgb, var(--border-color), transparent 90%);border-left-color:var(--border-color);border-radius:100%;border-right-color:rgba(0,0,0,0);border-top-color:rgba(0,0,0,0);content:"";height:var(--size);width:var(--size)}.button--processing *{opacity:0}@keyframes ButtonProcessing{0%{transform:translate(50%, 50%) rotate(0deg)}100%{transform:translate(50%, 50%) rotate(359deg)}}.button--skeleton{animation:var(--animation-duration) ease-in-out infinite ButtonSkeleton;background-image:linear-gradient(270deg, var(--background-pressed), var(--background-default), var(--background-default), var(--background-pressed));background-size:400% 100%;color:rgba(0,0,0,0);pointer-events:none}.button--skeleton *{opacity:0}@keyframes ButtonSkeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}.button--top-left,.button--top-right{position:absolute;top:calc((var(--padding-vertical) + var(--line-height)/2)*-1)}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}
 .card{background:var(--background);border-radius:var(--border-radius);padding:var(--padding-vertical) var(--padding-horizontal);position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,box-shadow var(--transition-duration) ease-in-out,max-height var(--transition-duration) ease-in-out;width:var(--width)}.card::after{position:absolute;inset:0 0 0 0;border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;z-index:0}.card--flat::after{display:none}
+.body{background:red !important}
 .container{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:var(--margin-vertical) auto;position:relative;width:min(var(--max-width),100% - var(--margin-horizontal)*2)}
 .counter{display:flex;gap:2px;place-items:center;transition:transform .5s 2s;transform-style:flat}.counter-character,.counter-character-track span{background:linear-gradient(hsl(0, 0%, 98%) 50%, hsl(0, 0%, 45%));background-attachment:fixed;-webkit-background-clip:text;background-clip:text;color:rgba(0,0,0,0);transform-style:flat}.counter-character{display:grid;font-size:var(--font-size);font-variant:tabular-nums;font-weight:var(--font-weight);height:1lh;line-height:var(--line-height);-webkit-mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);mask:linear-gradient(transparent, white calc(1lh * var(--mask-size)) calc(100% - 1lh * var(--mask-size)), transparent);overflow:hidden;transform-style:flat}.counter-character--fraction{font-size:calc(var(--font-size)*var(--scale));font-weight:var(--font-weight-300);opacity:var(--opacity);overflow:visible;height:var(--line-height)}.counter-character--fraction .counter-character-track span{display:flex;flex-direction:column;align-items:end;padding:calc((var(--line-height) - var(--font-size))*.2) 0}.counter-character--symbol{font-size:calc(var(--font-size)*var(--scale));margin-right:.1ch;opacity:var(--opacity)}.counter-character-track{display:grid;translate:0 calc((var(--value) + 1)*var(--line-height)*-1);transition:translate var(--transition-duration) var(--timing-function)}.counter-character-track span{height:1lh;transform-style:flat}
 .ellipsis span{animation:Ellipsis var(--animation-duration) infinite linear;background-color:var(--color);border-radius:100%;display:inline-block;height:var(--size);margin:0 var(--margin-horizontal);width:var(--size)}.ellipsis span :nth-child(2){animation-delay:.24s}.ellipsis span :nth-child(3){animation-delay:.48s}@keyframes Ellipsis{0%,100%{opacity:.16}20%{opacity:1}}

package/components/variables.css

@@ -1,8 +1,6 @@
 .accordion{--max-height: 0}.accordion:not(.--active){--max-height: 0}
 .anchor{--margin-horizontal: var(--size-400);--margin-vertical: var(--size-400)}
 .banner--blur{--blur: 24px}.banner--gradient{--from: rgba(3,0,19, 0.32);--to: var(--color-black-500)}
-.border{--border-color: var(--border-color-default);--border-color-default: var(--color-border-400);--border-style: solid;--border-width: var(--border-width-400)}
-.bubble{--background: var(--background-default);--background-default: var(--color-border-400);--border-radius: var(--border-radius-circle);--height: var(--size);--margin-horizontal: var(--size-100);--width: var(--size);--size: 6px}.bubble--bottom-left,.bubble--bottom-right,.bubble--top-left,.bubble--top-right{--position-horizontal: calc(var(--size) / -2);--position-vertical: calc(var(--size) / -2)}
 .button{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: var(--background);--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default);--border-radius: var(--border-radius-400);--border-width: 0px;--box-shadow: var(--box-shadow-default);--box-shadow-active: var(--box-shadow-300);--box-shadow-default: none;--box-shadow-hover: var(--box-shadow-400);--box-shadow-pressed: none;--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default);--font-size: var(--font-size-400);--font-weight: var(--font-weight-400);--line-height: var(--line-height-400);--padding-horizontal: var(--size-400);--padding-vertical: var(--size-400);--width: auto}.button.--active{--background: var(--background-active);--border-color: var(--border-color-active);--box-shadow: var(--box-shadow-active);--color: var(--color-active)}.button:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover);--color: var(--color-hover)}.button:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed);--color: var(--color-pressed)}.button--processing{--animation-duration: 0.64s;--border-color: var(--color);--border-width: var(--border-width-400);--size: var(--size-400)}.button--skeleton{--animation-duration: 6.4s}
 .card{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: var(--background);--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default);--border-radius: var(--border-radius-400);--box-shadow: var(--box-shadow-default);--box-shadow-active: var(--box-shadow-300);--box-shadow-default: none;--box-shadow-hover: var(--box-shadow-300);--box-shadow-pressed: none;--padding-horizontal: 0px;--padding-vertical: 0px;--width: auto}.card.--active{--background: var(--background-active);--border-color: var(--border-color-active);--box-shadow: var(--box-shadow-active)}.card:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover)}.card:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed)}
 .container{--margin-horizontal: var(--size-600);--margin-vertical: 0px;--max-width: 1400px}

package/lib.scss

@@ -1,2 +1,2 @@
-// Dart sass doesn't support changing root directory for the package to 'src'
+// Dart sass doesn't support changing root directory for the package to 'src'
 @forward './src/lib';

package/package.json

@@ -18,13 +18,16 @@
     "typescript": "^5.8.3",
     "webpack": "^5.100.1"
   },
+  "exports": {
+    "./components/*": "./src/components/*"
+  },
   "main": "build/index.js",
   "name": "@esportsplus/ui",
   "private": false,
   "sideEffects": false,
   "type": "module",
   "types": "build/index.d.ts",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "scripts": {
     "build": "pnpm build:ts && pnpm build:assets",
     "build:ts": "tsc && tsc-alias",

package/src/components/accordion/index.ts

@@ -1,35 +1,35 @@
-import { reactive } from '@esportsplus/reactivity';
-
-
-type Accordion = HTMLElement & { [key: symbol]: { active: boolean | number } };
-
-
-let key = Symbol();
-
-
-export default () => {
-    let state = reactive({
-            active: 0 as boolean | number
-        });
-
-    return {
-        attributes: {
-            class: () => {
-                return state.active && '--active';
-            },
-            onrender: (element: Accordion) => {
-                element[key] = state;
-            },
-            style: (element: Accordion) => {
-                let parent = element.closest('accordion') as Accordion | null;
-
-                if (parent && key in parent) {
-                    parent[key].active = (+parent[key].active) + 1;
-                }
-
-                return state.active && `--max-height: ${element.scrollHeight}`;
-            }
-        },
-        state: state as ReturnType<typeof reactive<{ active: boolean }>>
-    };
+import { reactive } from '@esportsplus/reactivity';
+
+
+type Accordion = HTMLElement & { [key: symbol]: { active: boolean | number } };
+
+
+let key = Symbol();
+
+
+export default () => {
+    let state = reactive({
+            active: 0 as boolean | number
+        });
+
+    return {
+        attributes: {
+            class: () => {
+                return state.active && '--active';
+            },
+            onrender: (element: Accordion) => {
+                element[key] = state;
+            },
+            style: (element: Accordion) => {
+                let parent = element.closest('accordion') as Accordion | null;
+
+                if (parent && key in parent) {
+                    parent[key].active = (+parent[key].active) + 1;
+                }
+
+                return state.active && `--max-height: ${element.scrollHeight}`;
+            }
+        },
+        state: state as ReturnType<typeof reactive<{ active: boolean }>>
+    };
 }

package/src/components/accordion/scss/index.scss

@@ -1,16 +1,16 @@
-@use '/tokens';
-
-.accordion {
-    max-height: var(--max-height);
-    opacity: 0;
-    pointer-events: none;
-    transition:
-        max-height var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out;
-
-
-    @include tokens.state(active) {
-        opacity: 1;
-        pointer-events: auto;
-    }
-}
+@use '/tokens';
+
+.accordion {
+    max-height: var(--max-height);
+    opacity: 0;
+    pointer-events: none;
+    transition:
+        max-height var(--transition-duration) ease-in-out,
+        opacity var(--transition-duration) ease-in-out;
+
+
+    @include tokens.state(active) {
+        opacity: 1;
+        pointer-events: auto;
+    }
+}

package/src/components/accordion/scss/variables.scss

@@ -1,9 +1,9 @@
-@use '/tokens';
-
-.accordion {
-    --max-height: 0;
-
-    @include tokens.state(inactive) {
-        --max-height: 0;
-    }
-}
+@use '/tokens';
+
+.accordion {
+    --max-height: 0;
+
+    @include tokens.state(inactive) {
+        --max-height: 0;
+    }
+}

package/src/components/anchor/scss/index.scss

@@ -1,41 +1,41 @@
-@use '/tokens';
-
-.anchor {
-    max-height: calc(var(--max-height, 100%) - (var(--margin-vertical) * 2));
-    max-width: calc(var(--max-width, 100%) - (var(--margin-horizontal) * 2));
-    position: absolute;
-    transition:
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
-    z-index: 9;
-
-
-    @include tokens.state(inactive) {
-        opacity: 0;
-
-        &, * {
-            pointer-events: none;
-        }
-    }
-
-
-    &--ne,
-    &--nw {
-        top: var(--margin-vertical);
-    }
-
-    &--se,
-    &--sw {
-        bottom: var(--margin-vertical);
-    }
-
-    &--ne,
-    &--se {
-        right: var(--margin-horizontal);
-    }
-
-    &--nw,
-    &--sw {
-        left: var(--margin-horizontal);
-    }
-}
+@use '/tokens';
+
+.anchor {
+    max-height: calc(var(--max-height, 100%) - (var(--margin-vertical) * 2));
+    max-width: calc(var(--max-width, 100%) - (var(--margin-horizontal) * 2));
+    position: absolute;
+    transition:
+        opacity var(--transition-duration) ease-in-out,
+        transform var(--transition-duration) ease-in-out;
+    z-index: 9;
+
+
+    @include tokens.state(inactive) {
+        opacity: 0;
+
+        &, * {
+            pointer-events: none;
+        }
+    }
+
+
+    &--ne,
+    &--nw {
+        top: var(--margin-vertical);
+    }
+
+    &--se,
+    &--sw {
+        bottom: var(--margin-vertical);
+    }
+
+    &--ne,
+    &--se {
+        right: var(--margin-horizontal);
+    }
+
+    &--nw,
+    &--sw {
+        left: var(--margin-horizontal);
+    }
+}