@eunomia/elements 1.0.0-beta.2 → 1.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 (98) hide show
  1. package/dist/cdn/components/chunks/chunk-3LMI7KUA.js +48 -0
  2. package/dist/cdn/components/chunks/{chunk-74HHV4CX.js → chunk-53QH6MPM.js} +2 -2
  3. package/dist/cdn/components/chunks/{chunk-7WTSHE7M.js → chunk-EAGGN3ZI.js} +1 -1
  4. package/dist/cdn/components/chunks/chunk-GU6BVMFJ.js +1 -0
  5. package/dist/cdn/components/chunks/chunk-KNM5QHDK.js +38 -0
  6. package/dist/cdn/components/chunks/{chunk-AQQMW353.js → chunk-TBKKTJOX.js} +1 -1
  7. package/dist/cdn/components/chunks/chunk-YYCEPZUN.js +1 -0
  8. package/dist/cdn/components/chunks/{chunk-27Q2SLRY.js → chunk-Z6PJYSC3.js} +30 -11
  9. package/dist/cdn/components/eun-animate.js +178 -2
  10. package/dist/cdn/components/eun-button.js +1 -1
  11. package/dist/cdn/components/eun-card.js +15 -7
  12. package/dist/cdn/components/eun-carousel.js +1 -1
  13. package/dist/cdn/components/eun-check-card.js +1 -1
  14. package/dist/cdn/components/eun-checkbox-list.js +2 -2
  15. package/dist/cdn/components/eun-checkbox.js +1 -1
  16. package/dist/cdn/components/eun-chip.js +11 -14
  17. package/dist/cdn/components/eun-collapse.js +8 -15
  18. package/dist/cdn/components/eun-color-picker.js +19 -19
  19. package/dist/cdn/components/eun-counter.js +4 -4
  20. package/dist/cdn/components/eun-date-picker.js +2 -2
  21. package/dist/cdn/components/eun-icon.js +1 -1
  22. package/dist/cdn/components/eun-input-file.js +11 -11
  23. package/dist/cdn/components/eun-input-phone.js +3 -3
  24. package/dist/cdn/components/eun-input.js +1 -1
  25. package/dist/cdn/components/eun-radio-card.js +1 -1
  26. package/dist/cdn/components/eun-radio-list.js +3 -3
  27. package/dist/cdn/components/eun-radio.js +1 -1
  28. package/dist/cdn/components/eun-search.js +1 -1
  29. package/dist/cdn/components/eun-select.js +33 -12
  30. package/dist/cdn/components/eun-sidebar.js +1 -1
  31. package/dist/cdn/components/eun-slider.js +3 -3
  32. package/dist/cdn/components/eun-sliding-card.js +4 -8
  33. package/dist/cdn/components/eun-switch.js +1 -1
  34. package/dist/cdn/components/eun-table.js +1 -1
  35. package/dist/cdn/components/eun-tag.js +13 -9
  36. package/dist/cdn/components/eun-textarea.js +11 -11
  37. package/dist/cdn/components/eun-time-picker.js +2 -2
  38. package/dist/cdn/components/eun-toggle-group.js +2 -2
  39. package/dist/cdn/components/eun-toggle-item.js +1 -1
  40. package/dist/cdn/components/eun-toggle.js +2 -2
  41. package/dist/cdn/components/eun-toolbar.js +14 -12
  42. package/dist/cdn/components/eun-tooltip.js +2 -2
  43. package/dist/components/action/button/button.d.ts +5 -6
  44. package/dist/components/action/button/button.js +5 -6
  45. package/dist/components/action/button/button.styles.js +31 -9
  46. package/dist/components/action/toggle/toggle-group.js +1 -1
  47. package/dist/components/action/toggle/toggle-item.styles.js +1 -1
  48. package/dist/components/action/toggle/toggle.js +1 -1
  49. package/dist/components/content/card/card.d.ts +1 -1
  50. package/dist/components/content/card/card.js +1 -1
  51. package/dist/components/content/card/card.styles.js +13 -5
  52. package/dist/components/content/card/sliding-card.styles.js +0 -4
  53. package/dist/components/content/chip/chip.styles.js +6 -9
  54. package/dist/components/content/collapse/collapse.styles.js +0 -7
  55. package/dist/components/content/icon/icon.d.ts +48 -5
  56. package/dist/components/content/icon/icon.js +92 -20
  57. package/dist/components/content/tag/tag.styles.js +10 -6
  58. package/dist/components/content/tooltip/tooltip.styles.js +2 -2
  59. package/dist/components/form/checkbox/checkbox-list.js +1 -1
  60. package/dist/components/form/color-picker/color-picker.js +9 -7
  61. package/dist/components/form/counter/counter.js +3 -3
  62. package/dist/components/form/date-picker/date-picker.js +3 -3
  63. package/dist/components/form/input/input.js +2 -2
  64. package/dist/components/form/input-file/input-file.js +5 -5
  65. package/dist/components/form/input-phone/input-phone.js +3 -3
  66. package/dist/components/form/radio/radio-list.js +2 -2
  67. package/dist/components/form/select/select.d.ts +16 -0
  68. package/dist/components/form/select/select.js +28 -5
  69. package/dist/components/form/select/select.styles.js +11 -0
  70. package/dist/components/form/slider/slider.js +2 -2
  71. package/dist/components/form/textarea/textarea.js +4 -4
  72. package/dist/components/form/time-picker/time-picker.js +3 -3
  73. package/dist/components/layout/animate/animate.d.ts +40 -5
  74. package/dist/components/layout/animate/animate.js +30 -11
  75. package/dist/components/layout/animate/animate.styles.d.ts +1 -1
  76. package/dist/components/layout/animate/animate.styles.js +191 -1
  77. package/dist/components/navigation/carousel/carousel.styles.js +1 -1
  78. package/dist/components/navigation/toolbar/toolbar.d.ts +22 -0
  79. package/dist/components/navigation/toolbar/toolbar.js +28 -2
  80. package/dist/components/navigation/toolbar/toolbar.styles.js +4 -3
  81. package/dist/events/change.event.d.ts +13 -1
  82. package/dist/events/change.event.js +2 -1
  83. package/dist/index.d.ts +1 -1
  84. package/dist/index.js +1 -1
  85. package/dist/mixins/check.mixin.js +6 -2
  86. package/dist/mixins/form.mixin.d.ts +4 -0
  87. package/dist/mixins/form.mixin.js +78 -2
  88. package/dist/mixins/radio.mixin.js +6 -2
  89. package/dist/ssr/animate-ssr.css +149 -0
  90. package/dist/ssr/overlay-ssr.css +57 -0
  91. package/dist/ssr/sidebar-ssr.css +57 -0
  92. package/dist/ssr/toolbar-ssr.css +41 -0
  93. package/package.json +9 -3
  94. package/dist/cdn/components/chunks/chunk-2IQUMAMI.js +0 -38
  95. package/dist/cdn/components/chunks/chunk-7Q6AHVI5.js +0 -1
  96. package/dist/cdn/components/chunks/chunk-DENMN3WH.js +0 -48
  97. package/dist/cdn/components/chunks/chunk-ONYUXQV2.js +0 -1
  98. package/dist/components/layout/animate/animate-ssr.css +0 -64
package/dist/ssr/toolbar-ssr.css ADDED
@@ -0,0 +1,41 @@
1
+ /**
2
+ * Optional light-DOM stylesheet for `<eun-toolbar>` in server-rendered
3
+ * pages (Next.js, or any framework/setup without Declarative Shadow DOM
4
+ * for Lit components). It closes the SSR flash described in the
5
+ * eun-toolbar documentation's Server-side rendering notes : the default
6
+ * slot (the mobile panel's own content, everything slotted in without a
7
+ * `slot` attribute) is only ever hidden by eun-toolbar's own Shadow DOM,
8
+ * either tucked inside a closed native popover once the element is
9
+ * upgraded and `mobile` is true, or simply never projected anywhere once
10
+ * upgraded and it's false. Server-rendered HTML has no Shadow DOM yet,
11
+ * so that content renders as plain, unstyled light-DOM children instead —
12
+ * visible, unpositioned, and often full-width/height, on top of
13
+ * everything else on the page, until the element upgrades.
14
+ *
15
+ * This stylesheet lives in the host document instead, hiding that exact
16
+ * content through `:not(:defined)`, which is true from first paint and
17
+ * stops matching permanently the moment the browser upgrades the
18
+ * element — handing off to eun-toolbar's own Shadow DOM at exactly the
19
+ * point it takes over, with no gap. Safe regardless of viewport : the
20
+ * content stays exactly as hidden post-upgrade whether `mobile` ends up
21
+ * true (closed popover) or false (never rendered at all), so this never
22
+ * has to guess at the breakpoint.
23
+ *
24
+ * Usage — link it in the page `<head>`, alongside (not instead of)
25
+ * importing "@eunomia/elements/toolbar.js" :
26
+ *
27
+ * <link
28
+ * rel="stylesheet"
29
+ * href="node_modules/@eunomia/elements/dist/ssr/toolbar-ssr.css"
30
+ * />
31
+ *
32
+ * The `start`/`center`/`end` slots aren't covered here : that content is
33
+ * meant to stay visible (and stay part of LCP) before upgrade too, same
34
+ * as after, so hiding it isn't this stylesheet's job. Style its own
35
+ * pre-upgrade layout, if needed, directly with `eun-toolbar:not(:defined)`
36
+ * in the host page's own CSS.
37
+ */
38
+
39
+ eun-toolbar:not(:defined) > :not([slot]) {
40
+ display: none;
41
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eunomia/elements",
3
- "version": "1.0.0-beta.2",
3
+ "version": "1.0.0-beta.3",
4
4
  "description": "Eunomia — a framework-agnostic web component design system",
5
5
  "type": "module",
6
6
  "homepage": "https://eunomia-ds.vercel.app",
@@ -298,7 +298,12 @@
298
298
  "default": "./dist/jsx.js"
299
299
  },
300
300
  "./styles/*": "./styles/*",
301
- "./cdn/*": "./dist/cdn/*"
301
+ "./cdn/*": "./dist/cdn/*",
302
+ "./animate-ssr.css": "./dist/ssr/animate-ssr.css",
303
+ "./toolbar-ssr.css": "./dist/ssr/toolbar-ssr.css",
304
+ "./sidebar-ssr.css": "./dist/ssr/sidebar-ssr.css",
305
+ "./overlay-ssr.css": "./dist/ssr/overlay-ssr.css",
306
+ "./native-table.css": "./dist/features/table/native-table.css"
302
307
  },
303
308
  "files": [
304
309
  "dist",
@@ -311,7 +316,8 @@
311
316
  ],
312
317
  "scripts": {
313
318
  "build": "tsc --noEmit",
314
- "build:dist": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/copy-assets.mjs && node scripts/generate-exports.mjs",
319
+ "build:dist": "node scripts/build-dist.mjs",
320
+ "build:dist:watch": "tsc -p tsconfig.build.json && node scripts/copy-assets.mjs && node scripts/generate-exports.mjs && tsc -p tsconfig.build.json --watch",
315
321
  "build:cdn": "node scripts/build-cdn.mjs",
316
322
  "prepublishOnly": "npm run build:dist && npm run build:cdn",
317
323
  "lint": "eslint . --config ../eslint.config.js",
package/dist/cdn/components/chunks/chunk-2IQUMAMI.js DELETED
@@ -1,38 +0,0 @@
1
- import{a,g as c,h as n,i as h,n as u,p as g}from"./chunk-XH6NREVZ.js";var T=l=>{class s extends l{constructor(){super(...arguments);this.readonly=!1}updated(e){super.updated(e),e.has("readonly")&&this.setAttribute("aria-readonly",String(this.readonly))}}return a([n({type:Boolean,reflect:!0})],s.prototype,"readonly",2),s};function y(l,s,d){return l?s(l):d?.(l)}var q=l=>{class s extends l{constructor(...e){super(...e);this.hideError=!1;this.checkable=!1;this.checked=!1;this.internals||(this.internals=this.attachInternals())}static{this.formAssociated=!0}get defaultValue(){return this.internalDefaultValue}set defaultValue(e){let t=this.value==null||Array.isArray(this.value)&&this.value.length===0;e!=null&&(this.defaultValue==null||this.defaultValue==="")&&t&&(this.value=e),this.internalDefaultValue=e}get value(){return this.valueState}set value(e){this.valueState=e,this.setFormValue(e)}get description(){if(!this.hideError)return this.errorMessages.length?this.errorMessages:this.validationMessage.length?this.validationMessage:this.hint}get form(){return this.internals.form}get type(){return this.localName}connectedCallback(){super.connectedCallback?.(),this.checkable&&this.checked&&this.setFormValue(this.value),this.checkable||this.defaultValue===void 0||this.defaultValue===""||(this.value=this.defaultValue),this.checkValidity(this.value)}willUpdate(e){if(e.has("value")||e.has("valueState")||e.has("checked")||e.has("validators")||e.has("required")){let t=this.checkable?this.checked:this.value;this.checkValidity(t)}super.willUpdate(e)}setFormValue(e){let t=new FormData;if(this.disabled||this.checkable&&!this.checked){this.internals.setFormValue(t);return}let i=this.name||this.getAttribute("name");if(!i){this.internals.setFormValue(t);return}Array.isArray(e)?e.forEach(r=>t.append(i,r instanceof File?r:String(r))):e!=null&&(e instanceof File?t.append(i,e):t.append(i,this.checkable&&!this.value?"on":String(e))),this.internals.setFormValue(t)}formResetCallback(){this.checkable?this.checked=!1:this.value=this.defaultValue}renderDescription(){return this.renderError()}renderError(){let{description:e}=this;return e&&e.length&&!(this.errorMessages&&this.errorMessages.length)&&!(this.validationMessage||this.validationMessage.length)?u`
2
- <p id="description" class="hint-messages">
3
- <span>${e}</span>
4
- </p>
5
- `:this.valid||this.hideError||this.disabled||!e?.length?g:u`
6
- <p id="description" class="error-messages">
7
- ${y(Array.isArray(e),()=>e.map(i=>u`<span>${i}</span>`),()=>u`<span>${e}</span>`)}
8
- </p>
9
- `}}return a([n({reflect:!0})],s.prototype,"name",2),a([n()],s.prototype,"hint",2),a([n({type:Boolean,attribute:"hide-error"})],s.prototype,"hideError",2),a([h()],s.prototype,"valueState",2),a([n({attribute:"default-value",converter:{fromAttribute:e=>e?e.split(","):void 0,toAttribute:e=>e?.join(",")??null}})],s.prototype,"defaultValue",1),a([n()],s.prototype,"value",1),s};var j=l=>{class s extends l{constructor(...e){super(...e);this.required=!1;this.valid=!0;this.errorMessages=[];this.internals||(this.internals=this.attachInternals())}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}checkLocalValidators(){return{validity:{}}}buildCommonValidators(){let{value:e}=this,t={},i,r=e==null||typeof e=="string"&&e.trim()===""||e instanceof Array&&!e.length;return this.required&&r&&(t.valueMissing=!0,i="Field value is missing"),{validity:t,message:i}}checkValidity(e){let t=this.checkLocalValidators(),i=this.buildCommonValidators(),r={...t.validity,...i.validity},o=i.message||t.message;if(this.validators&&this.validators?.length){let f=this.validators.reduce((V,b)=>this.collectErrors(V,b,e),[]);this.errorMessages=f,f.length>0&&(r.customError=!0,o=f.join(" ; "))}else this.errorMessages=[];this.valid=!Object.values(r).some(Boolean);let p=this.getFocusAnchor?.();return this.valid||p||!this.getFocusAnchor?this.setValidity(r,o,p):this.updateComplete.then(()=>this.setValidity(r,o,p)),this.internals.checkValidity()}reportValidity(e){return this.checkValidity(e),this.internals.reportValidity()}collectErrors(e,t,i){if("~standard"in t){let r=t["~standard"].validate(i);if(r instanceof Promise)throw new TypeError("Validation schemas must be synchronous");r.issues&&e.push(...r.issues.map(o=>o.message))}return"isValid"in t&&(typeof t.isValid=="function"?!t.isValid(i,this.getValidityData()):t.isValid===!1)&&e.push(t.message),"isInvalid"in t&&t.isInvalid({value:i})&&e.push(t.message),e}setValidity(e,t,i){let r=this.validationMessage;this.internals.setValidity(e,t,i),t!==r&&this.requestUpdate("valid")}getValidityData(){return{}}}return a([n({type:Array})],s.prototype,"validators",2),a([n({type:Boolean})],s.prototype,"required",2),a([h()],s.prototype,"valid",2),s};var v=c`
10
- #description {
11
- font-family: var(--eun-font-family, "Mulish", sans-serif);
12
- display: block;
13
- margin-block-start: var(--eun-space-xs, 4px);
14
- font-size: var(--eun-fontSize-xs, 12px);
15
- margin-block: 0;
16
- }
17
- #description span {
18
- display: block;
19
- margin-top: var(--eun-space-xs, 4px);
20
- }
21
- `,M=c`
22
- .error-messages {
23
- color: var(--_errorColor);
24
- }
25
- `,k=c`
26
- .hint-messages {
27
- color: var(--_hintColor);
28
- }
29
- `,O={base:v,errorMessages:M,hintMessages:k};export{T as a,y as b,q as c,j as d,O as e};
30
- /*! Bundled license information:
31
-
32
- lit-html/directives/when.js:
33
- (**
34
- * @license
35
- * Copyright 2021 Google LLC
36
- * SPDX-License-Identifier: BSD-3-Clause
37
- *)
38
- */
package/dist/cdn/components/chunks/chunk-7Q6AHVI5.js DELETED
@@ -1 +0,0 @@
1
- import{a as r}from"./chunk-ONYUXQV2.js";import{a as i,h as a}from"./chunk-XH6NREVZ.js";var l=n=>{class t extends n{constructor(){super(...arguments);this.checked=!1;this.checkable=!0;this.buildCommonValidators=()=>this.required&&!this.checked?{validity:{valueMissing:!0},message:"Field value is missing"}:{validity:{}}}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","checkbox"),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),this.defaultChecked!==void 0&&!this.hasAttribute("checked")&&(this.checked=this.defaultChecked),this.addEventListener("keydown",this.handleKeydown)}formResetCallback(){this.checked=this.defaultChecked??!1}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback?.()}updated(e){super.updated(e),e.has("checked")&&(this.setAttribute("aria-checked",String(this.checked)),this.updateInternals()),(e.has("valid")||e.has("hideError")||e.has("disabled"))&&this.setAttribute("aria-invalid",String(!this.hideError&&!this.disabled&&!this.valid)),e.has("required")&&this.setAttribute("aria-required",String(this.required))}handleClick(e){this.handleChange(e)}handleChange(e){if(e.stopPropagation(),!(this.disabled||this.readonly||this.inert)){if(e.preventDefault(),this.checked=!this.checked,this.updateInternals(),this.checkValidity(this.checked),this.description){let s=this.description instanceof Array?this.description.join(","):this.description;this.setAttribute("aria-description",s)}else this.removeAttribute("aria-description");this.dispatchEvent(new r)}}handleKeydown(e){e.key===" "&&(e.preventDefault(),this.handleChange(e))}updateInternals(){this.setFormValue(this.valueState)}}return i([a({type:Boolean,reflect:!0})],t.prototype,"checked",2),i([a({type:Boolean,attribute:"default-checked"})],t.prototype,"defaultChecked",2),t};export{l as a};
package/dist/cdn/components/chunks/chunk-DENMN3WH.js DELETED
@@ -1,48 +0,0 @@
1
- import{a as I,b as h,c as S}from"./chunk-SGM2X2TC.js";import{a as o,b as f,c as g,d as v,f as y,g as T,h as d,i as x,n as E,o as _,p as a,s as w}from"./chunk-XH6NREVZ.js";var s=class extends S{constructor(r){if(super(r),this.it=a,r.type!==I.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===a||r==null)return this._t=void 0,this.it=r;if(r===_)return r;if(typeof r!="string")throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;let e=[r];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}};s.directiveName="unsafeHTML",s.resultType=1;var D=h(s);var c=class extends s{};c.directiveName="unsafeSVG",c.resultType=2;var b=h(c);var N=T`
2
- :host {
3
- display: flex;
4
- --_size: var(--icon-size, 1rem);
5
- --_color: var(--icon-color, currentColor);
6
- --_background: var(--icon-background, transparent);
7
- }
8
- span {
9
- box-sizing: content-box;
10
- width: var(--_size);
11
- height: var(--_size);
12
- padding: var(--icon-padding, 0);
13
- fill: var(--_color);
14
- color: var(--_color);
15
- background-color: var(--_background);
16
- border-radius: var(--icon-border-radius, var(--eun-borderRadius-m, 8px));
17
- text-decoration: none;
18
- display: inline-block;
19
- user-select: none;
20
- transition: 0.2s;
21
- }
22
- svg {
23
- width: 100%;
24
- height: 100%;
25
- display: block;
26
- }
27
- svg path {
28
- stroke-width: 0;
29
- }
30
-
31
- @media (prefers-reduced-motion: reduce) {
32
- span {
33
- transition: none;
34
- }
35
- }
36
- `;var M="eun-icon",k=new RegExp("_(outline|round|sharp)$"),$=import.meta.url,p,i=class extends w{constructor(){super(...arguments);g(this,p)}set size(e){v(this,p,e);let t;e?/%$/.test(e)?t=`${parseFloat(e)/100}rem`:/^\d+(\.\d+)?$/.test(e)?t=`${e}px`:t=e:t="1rem",this.style.setProperty("--_size",t)}get size(){return f(this,p)}updated(e){(e.has("name")||e.has("shape"))&&this.updateSvg(this.name)}updateSvg(e){if(!e)return;this.name=e;let t=this.getTargetIconFolder(e),n=this.stripShapeSuffix(e),u=t==="default"?n:`${n}_${t}`;this.fetchIconSvg(t,u).then(l=>{this.svgMarkup=l}).catch(()=>{t!=="default"&&this.fetchIconSvg("default",n).then(l=>{this.svgMarkup=l})})}async fetchIconSvg(e,t){let n=new URL(`./icons/${e}/${t}.svg`,$),u=await fetch(n);if(!u.ok)throw new Error(`Icon not found: ${n}`);return u.text()}getTargetIconFolder(e){if(this.shape)return this.shape;let t=this.extractKeywordFromIconName(e);return t||"default"}extractKeywordFromIconName(e){let t=e.match(k);if(t)return t[1]}stripShapeSuffix(e){return e.replace(k,"")}render(){return this.name?E`<span part="wrapper" aria-hidden="true">
37
- ${this.svgMarkup?b(this.svgMarkup):a}
38
- </span>`:a}};p=new WeakMap,i.styles=[N],o([d()],i.prototype,"name",2),o([d()],i.prototype,"shape",2),o([x()],i.prototype,"svgMarkup",2),o([d({hasChanged:()=>!1})],i.prototype,"size",1),i=o([y(M)],i);export{M as a,i as b};
39
- /*! Bundled license information:
40
-
41
- lit-html/directives/unsafe-html.js:
42
- lit-html/directives/unsafe-svg.js:
43
- (**
44
- * @license
45
- * Copyright 2017 Google LLC
46
- * SPDX-License-Identifier: BSD-3-Clause
47
- *)
48
- */
package/dist/cdn/components/chunks/chunk-ONYUXQV2.js DELETED
@@ -1 +0,0 @@
1
- var e=class t extends Event{static{this.eventName="eunchange"}constructor(){super(t.eventName,{bubbles:!0,composed:!1})}};export{e as a};
package/dist/components/layout/animate/animate-ssr.css DELETED
@@ -1,64 +0,0 @@
1
- /**
2
- * Optional light-DOM stylesheet for `<eun-animate>` in server-rendered
3
- * pages (Next.js, or any framework/setup without Declarative Shadow DOM
4
- * for Lit components). It closes the SSR flash described in the eun-animate
5
- * documentation's Accessibility/SSR notes : server HTML has no Shadow DOM
6
- * yet, so `<eun-animate>`'s own `:host([animation="fade"]) { opacity: 0 }`
7
- * (and the other animation variants) can't apply until the element is
8
- * upgraded client-side, meaning content renders visible first, then snaps
9
- * hidden the instant the custom element registers, then fades back in.
10
- *
11
- * This stylesheet lives in the host document instead, applying the exact
12
- * same starting state through `:not(:defined)`, which is true from first
13
- * paint and stops matching permanently the moment the browser upgrades the
14
- * element — handing off to the component's own Shadow DOM styles at
15
- * exactly the point they take over, with no gap and no double transition.
16
- *
17
- * Usage — link it in the page `<head>`, alongside (not instead of)
18
- * importing "@eunomia/elements/animate.js" :
19
- *
20
- * <link
21
- * rel="stylesheet"
22
- * href="node_modules/@eunomia/elements/dist/components/layout/animate/animate-ssr.css"
23
- * />
24
- *
25
- * Requires every server-rendered `<eun-animate>` to write its `animation`
26
- * attribute explicitly (even when it's the "fade" default), since that
27
- * default only ever becomes an attribute once Lit initializes the
28
- * property client-side — invisible to this stylesheet, or any plain CSS,
29
- * before then :
30
- *
31
- * <eun-animate animation="fade">...</eun-animate>
32
- */
33
-
34
- eun-animate:not(:defined) {
35
- --_distance: var(--animate-distance, 80px);
36
- }
37
-
38
- eun-animate[animation="fade"]:not(:defined),
39
- eun-animate[animation="faded-scroll-right"]:not(:defined),
40
- eun-animate[animation="faded-scroll-left"]:not(:defined),
41
- eun-animate[animation="faded-scroll-top"]:not(:defined),
42
- eun-animate[animation="faded-scroll-bottom"]:not(:defined) {
43
- opacity: 0;
44
- }
45
-
46
- eun-animate[animation="scroll-right"]:not(:defined),
47
- eun-animate[animation="faded-scroll-right"]:not(:defined) {
48
- transform: translateX(calc(-1 * var(--_distance)));
49
- }
50
-
51
- eun-animate[animation="scroll-left"]:not(:defined),
52
- eun-animate[animation="faded-scroll-left"]:not(:defined) {
53
- transform: translateX(var(--_distance));
54
- }
55
-
56
- eun-animate[animation="scroll-top"]:not(:defined),
57
- eun-animate[animation="faded-scroll-top"]:not(:defined) {
58
- transform: translateY(var(--_distance));
59
- }
60
-
61
- eun-animate[animation="scroll-bottom"]:not(:defined),
62
- eun-animate[animation="faded-scroll-bottom"]:not(:defined) {
63
- transform: translateY(calc(-1 * var(--_distance)));
64
- }