@eunomia/elements 1.0.0-beta.5 → 1.0.0-beta.7

package/styles/themes/prebuilt-themes/violet/eunomia-violet.theme.scss

@@ -9,8 +9,9 @@
 @use "./../../../tools/mixins/settings/eunomia-radius.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-border.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-shadows.mixin.scss" as *;
+@use "./../../../tools/mixins/settings/eunomia-motion.mixin.scss" as *;
 @use "./../../../tools/mixins/settings/eunomia-alpha.mixin.scss" as *;
-@use "./../../../tools/mixins/layout/eunomia-grid.mixin.scss" as *;
+@use "./../../../eunomia-grid.scss";
 
 @mixin default-settings {
   @include eunomia-font-family();
@@ -20,10 +21,10 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-motion();
   @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
-  @include eunomia-grid-layouts();
 }
 
 @mixin eunomia-violet-theme() {

package/styles/tools/indexes/eunomia-media-queries.index.scss

@@ -1,3 +1 @@
-@forward './../mixins/media-queries/eunomia-device.mixin.scss';
-@forward './../mixins/media-queries/eunomia-gte.mixin.scss';
-@forward './../mixins/media-queries/eunomia-lte.mixin.scss';
+@forward "./../mixins/media-queries/eunomia-media-queries.mixin.scss";

package/styles/tools/indexes/eunomia-tools.index.scss

@@ -3,6 +3,7 @@
 @forward './../mixins/settings/eunomia-breakpoints.mixin.scss';
 @forward './../mixins/settings/eunomia-font.mixin.scss';
 @forward './../mixins/settings/eunomia-height.mixin.scss';
+@forward './../mixins/settings/eunomia-motion.mixin.scss';
 @forward './../mixins/settings/eunomia-radius.mixin.scss';
 @forward './../mixins/settings/eunomia-shadows.mixin.scss';
 @forward './../mixins/settings/eunomia-spaces.mixin.scss';

package/styles/tools/mixins/layout/eunomia-grid.mixin.scss

@@ -1,100 +1,164 @@
-@use "sass:map";
-@use "./../../variables/eunomia.breakpoints.scss" as *;
+@use "./../media-queries/eunomia-media-queries.mixin.scss" as *;
 
 @mixin eunomia-grid-layouts {
-  .eun-grid {
+  :where(.eun-grid) {
+    --_cols0: var(--eun-grid-columns, var(--_variantCols0, 1));
+    --_cols1: var(
+      --eun-grid-columns-mobile,
+      var(--eun-grid-columns, var(--_variantCols1, var(--_variantCols0, 1)))
+    );
+    --_cols2: var(
+      --eun-grid-columns-tablet,
+      var(
+        --eun-grid-columns-mobile,
+        var(
+          --eun-grid-columns,
+          var(--_variantCols2, var(--_variantCols1, var(--_variantCols0, 1)))
+        )
+      )
+    );
+    --_cols3: var(
+      --eun-grid-columns-laptop,
+      var(
+        --eun-grid-columns-tablet,
+        var(
+          --eun-grid-columns-mobile,
+          var(
+            --eun-grid-columns,
+            var(
+              --_variantCols3,
+              var(
+                --_variantCols2,
+                var(--_variantCols1, var(--_variantCols0, 1))
+              )
+            )
+          )
+        )
+      )
+    );
+    --_cols4: var(
+      --eun-grid-columns-desktop,
+      var(
+        --eun-grid-columns-laptop,
+        var(
+          --eun-grid-columns-tablet,
+          var(
+            --eun-grid-columns-mobile,
+            var(
+              --eun-grid-columns,
+              var(
+                --_variantCols4,
+                var(
+                  --_variantCols3,
+                  var(
+                    --_variantCols2,
+                    var(--_variantCols1, var(--_variantCols0, 1))
+                  )
+                )
+              )
+            )
+          )
+        )
+      )
+    );
+    --_cols: var(--_cols0);
     display: grid;
+    grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
     row-gap: var(--eun-grid-row-gap, var(--eun-space-s));
     column-gap: var(--eun-grid-column-gap, var(--eun-space-m));
   }
 
-  .eun-grid--halves {
-    grid-template-columns: repeat(2, 1fr);
+  @include eunomia-from(mobile) {
+    :where(.eun-grid) {
+      --_cols: var(--_cols1);
+    }
   }
-
-  .eun-grid--thirds-1-2 {
-    grid-template-columns: 1fr 2fr;
+  @include eunomia-from(tablet) {
+    :where(.eun-grid) {
+      --_cols: var(--_cols2);
+    }
+  }
+  @include eunomia-from(laptop) {
+    :where(.eun-grid) {
+      --_cols: var(--_cols3);
+    }
+  }
+  @include eunomia-from(desktop) {
+    :where(.eun-grid) {
+      --_cols: var(--_cols4);
+    }
   }
 
-  .eun-grid--thirds-2-1 {
-    grid-template-columns: 2fr 1fr;
+  :where(.eun-grid--halves),
+  :where(.eun-grid--2x2) {
+    --_variantCols2: 2;
   }
 
-  .eun-grid--thirds-equal {
-    grid-template-columns: repeat(3, 1fr);
+  :where(.eun-grid--thirds-equal) {
+    --_variantCols2: 3;
   }
 
-  .eun-grid--2x2 {
-    grid-template-columns: repeat(2, 1fr);
+  :where(.eun-grid--2x2) {
     grid-auto-flow: row;
   }
 
-  .eun-grid--sidebar-left,
-  .eun-grid--sidebar-right {
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(2, auto);
-  }
+  @include eunomia-from(tablet) {
+    :where(.eun-grid--thirds-1-2) {
+      grid-template-columns: 1fr 2fr;
+    }
 
-  .eun-grid--sidebar-left > :first-child {
-    grid-column: 1;
-    grid-row: 1 / span 2;
-  }
+    :where(.eun-grid--thirds-2-1) {
+      grid-template-columns: 2fr 1fr;
+    }
 
-  .eun-grid--sidebar-right > :first-child {
-    grid-column: 2;
-    grid-row: 1 / span 2;
+    :where(.eun-grid--sidebar-left),
+    :where(.eun-grid--sidebar-right) {
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(2, auto);
+    }
+
+    :where(.eun-grid--sidebar-left > :first-child) {
+      grid-column: 1;
+      grid-row: 1 / span 2;
+    }
+
+    :where(.eun-grid--sidebar-right > :first-child) {
+      grid-column: 2;
+      grid-row: 1 / span 2;
+    }
   }
 
-  .eun-grid--lead-left,
-  .eun-grid--lead-right {
+  :where(.eun-grid--lead-left),
+  :where(.eun-grid--lead-right) {
     grid-template-rows: repeat(2, auto);
   }
 
-  .eun-grid--lead-left {
+  :where(.eun-grid--lead-left) {
     grid-template-columns: auto 1fr;
   }
 
-  .eun-grid--lead-right {
+  :where(.eun-grid--lead-right) {
     grid-template-columns: 1fr auto;
   }
 
-  .eun-grid--lead-left > :first-child {
+  :where(.eun-grid--lead-left > :first-child) {
     grid-column: 1;
     grid-row: 1 / span 2;
   }
 
-  .eun-grid--lead-right > :first-child {
+  :where(.eun-grid--lead-right > :first-child) {
     grid-column: 2;
     grid-row: 1 / span 2;
   }
 
-  .eun-grid--gallery {
+  :where(.eun-grid--gallery) {
     grid-template-columns: repeat(
       auto-fill,
       minmax(var(--eun-grid-min-width, 220px), 1fr)
     );
   }
 
-  .eun-grid--panel {
+  :where(.eun-grid--panel) {
     grid-template-rows: auto 1fr auto;
   }
-
-  @media (max-width: map.get($map-device-width, tablet) - 1) {
-    .eun-grid--halves,
-    .eun-grid--thirds-1-2,
-    .eun-grid--thirds-2-1,
-    .eun-grid--thirds-equal,
-    .eun-grid--2x2,
-    .eun-grid--sidebar-left,
-    .eun-grid--sidebar-right {
-      grid-template-columns: 1fr;
-      grid-template-rows: none;
-    }
-
-    .eun-grid--sidebar-left > :first-child,
-    .eun-grid--sidebar-right > :first-child {
-      grid-column: 1;
-      grid-row: auto;
-    }
-  }
 }

package/styles/tools/mixins/media-queries/eunomia-media-queries.mixin.scss

@@ -0,0 +1,69 @@
+@use "sass:map";
+@use "./../../variables/eunomia.breakpoints.scss" as *;
+
+@function -eunomia-breakpoint($breakpoint) {
+  @if not map.has-key($map-device-width, $breakpoint) {
+    @error "Unknown breakpoint `#{$breakpoint}`, expected one of #{map.keys($map-device-width)}.";
+  }
+  @return map.get($map-device-width, $breakpoint);
+}
+
+@mixin eunomia-below($breakpoint) {
+  @media (width < #{-eunomia-breakpoint($breakpoint)}) {
+    @content;
+  }
+}
+
+@mixin eunomia-from($breakpoint) {
+  @media (width >= #{-eunomia-breakpoint($breakpoint)}) {
+    @content;
+  }
+}
+
+@mixin eunomia-below-mobile {
+  @include eunomia-below(mobile) {
+    @content;
+  }
+}
+
+@mixin eunomia-below-tablet {
+  @include eunomia-below(tablet) {
+    @content;
+  }
+}
+
+@mixin eunomia-below-laptop {
+  @include eunomia-below(laptop) {
+    @content;
+  }
+}
+
+@mixin eunomia-below-desktop {
+  @include eunomia-below(desktop) {
+    @content;
+  }
+}
+
+@mixin eunomia-from-mobile {
+  @include eunomia-from(mobile) {
+    @content;
+  }
+}
+
+@mixin eunomia-from-tablet {
+  @include eunomia-from(tablet) {
+    @content;
+  }
+}
+
+@mixin eunomia-from-laptop {
+  @include eunomia-from(laptop) {
+    @content;
+  }
+}
+
+@mixin eunomia-from-desktop {
+  @include eunomia-from(desktop) {
+    @content;
+  }
+}

package/styles/tools/mixins/settings/eunomia-alpha.mixin.scss

@@ -1,6 +1,3 @@
-// Translucent surface/text primitives, derived from the active theme's
-// `--eun-surface-color` and `--eun-text-color`. Included next to each theme's
-// color mixin, so they follow light/dark and brand switches automatically.
 @mixin eunomia-alpha {
   --eun-surface-transparent-25: color-mix(
     in srgb,
@@ -34,6 +31,33 @@
     transparent
   );
 
-  // Fixed (theme-independent) muted text, legible on a dark surface
   --eun-text-on-dark-secondary: rgba(255, 255, 255, 0.7);
+
+  --eun-text-on-inverse-secondary: color-mix(
+    in srgb,
+    var(--eun-text-on-inverse) 70%,
+    transparent
+  );
+  --eun-border-on-inverse: color-mix(
+    in srgb,
+    var(--eun-text-on-inverse) 20%,
+    transparent
+  );
+  --eun-content-hover-on-inverse: color-mix(
+    in srgb,
+    var(--eun-text-on-inverse) 8%,
+    transparent
+  );
+  --eun-content-pressed-on-inverse: color-mix(
+    in srgb,
+    var(--eun-text-on-inverse) 14%,
+    transparent
+  );
+
+  // Dimmed layer behind a modal or a drawer
+  --eun-backdrop-color: color-mix(
+    in srgb,
+    var(--eun-surface-inverse) 45%,
+    transparent
+  );
 }

package/styles/tools/mixins/settings/eunomia-motion.mixin.scss

@@ -0,0 +1,9 @@
+@mixin eunomia-motion {
+  --eun-duration-xs: 100ms;
+  --eun-duration-s: 150ms;
+  --eun-duration-m: 200ms;
+  --eun-duration-l: 250ms;
+  --eun-duration-xl: 300ms;
+  --eun-easing-default: ease;
+  --eun-easing-out: ease-out;
+}

package/styles/tools/variables/eunomia.breakpoints.scss

@@ -1,3 +1,7 @@
+// Generated by library/scripts/breakpoints.mjs from
+// library/src/breakpoints.ts, the single source of the library's
+// breakpoints. Don't edit it : change them there, then run
+// `npm run breakpoints` in library/.
 $map-device-width: (
   mobile: 600px,
   tablet: 768px,

package/dist/cdn/components/chunks/chunk-32DTNR52.js

@@ -1 +0,0 @@
-import{a as i,h as r}from"./chunk-XH6NREVZ.js";var l=s=>{class e extends s{constructor(){super(...arguments);this.disabled=!1}updated(t){super.updated(t),t.has("disabled")&&(this.setAttribute("tabindex",this.disabled?"-1":"0"),this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}}return i([r({type:Boolean,reflect:!0})],e.prototype,"disabled",2),e};export{l as a};

package/dist/cdn/components/chunks/chunk-A6KGFALA.js

@@ -1,132 +0,0 @@
-import{a as i,d as b,e as d,f as u}from"./chunk-E74CM7UG.js";import{a as t,f as s,g as c,h as o,n as r,p as l,s as n}from"./chunk-XH6NREVZ.js";var p=c`
-  :host {
-    position: relative;
-    background: var(
-      --table-header-background,
-      var(--eun-surface-color, #ffffff)
-    );
-    box-shadow: inset 0 0 0 9999px transparent;
-    border-bottom: var(--eun-border-width-s, 1px) solid
-      var(--table-border-color, var(--eun-border-color, #dee0e7));
-    font-weight: var(--eun-font-weight-m, 500);
-    transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
-  }
-
-  :host(:focus-within) {
-    box-shadow: inset 0 0 0 9999px
-      var(--table-row-hover-background, var(--eun-content-hover, #edeff0));
-  }
-
-  :host([sticky]) {
-    position: sticky;
-    top: 0;
-    z-index: var(--_table-z-header, 4);
-    border-bottom-color: var(
-      --table-sticky-border-color,
-      var(--table-border-color, var(--eun-border-color, #dee0e7))
-    );
-  }
-
-  #select-cell {
-    position: sticky;
-    left: 0;
-    z-index: var(--_table-z-checkbox, 1);
-    background: var(
-      --table-sticky-column-background,
-      var(--table-header-background, var(--eun-surface-color, #ffffff))
-    );
-    box-shadow: inset 0 0 0 9999px transparent;
-    padding-inline-start: var(--eun-space-s);
-    transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
-  }
-
-  :host(:focus-within) #select-cell {
-    box-shadow: inset 0 0 0 9999px
-      var(--table-row-hover-background, var(--eun-content-hover, #edeff0));
-  }
-
-  #select-cell eun-checkbox {
-    --checkbox-border-color: transparent;
-    --checkbox-background: var(
-      --table-checkbox-background,
-      var(--eun-color-grey-300, #dee0e7)
-    );
-    --checkbox-background-hover: var(
-      --table-checkbox-hover,
-      var(--eun-color-grey-400, #c1c9d6)
-    );
-  }
-
-  #select-spacer {
-    box-sizing: border-box;
-    background: var(
-      --table-header-background,
-      var(--eun-surface-color, #ffffff)
-    );
-  }
-
-  :host([sticky-first-column]) ::slotted(:first-of-type) {
-    position: sticky;
-    left: var(--_table-select-offset, 0px);
-    z-index: var(--_table-z-corner, 5);
-    background: var(
-      --table-sticky-column-background,
-      var(--table-header-background, var(--eun-surface-color, #ffffff))
-    );
-    box-shadow: inset 0 0 0 9999px transparent;
-    border-inline-end: var(--eun-border-width-s, 1px) solid
-      var(
-        --table-sticky-border-color,
-        var(--table-column-border-color, transparent)
-      );
-    transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
-  }
-
-  :host([sticky-first-column]:focus-within) ::slotted(:first-of-type) {
-    box-shadow: inset 0 0 0 9999px
-      var(--table-row-hover-background, var(--eun-content-hover, #edeff0));
-  }
-
-  #action-spacer {
-    box-sizing: border-box;
-  }
-
-  :host([sticky-last-column]) #action-spacer {
-    position: sticky;
-    right: 0;
-    z-index: var(--_table-z-corner, 5);
-    background: var(
-      --table-sticky-column-background,
-      var(--table-header-background, var(--eun-surface-color, #ffffff))
-    );
-    box-shadow: inset 0 0 0 9999px transparent;
-    transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
-  }
-
-  :host([sticky-last-column]:focus-within) #action-spacer,
-  :host([sticky-last-column]:focus-within) ::slotted(:last-of-type) {
-    box-shadow: inset 0 0 0 9999px
-      var(--table-row-hover-background, var(--eun-content-hover, #edeff0));
-  }
-
-  :host([sticky-last-column]) ::slotted(:last-of-type) {
-    position: sticky;
-    right: var(--_table-action-offset, 0px);
-    z-index: var(--_table-z-corner, 5);
-    background: var(
-      --table-sticky-column-background,
-      var(--table-header-background, var(--eun-surface-color, #ffffff))
-    );
-    box-shadow: inset 0 0 0 9999px transparent;
-    transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
-    border-inline-start: var(--eun-border-width-s, 1px) solid
-      var(
-        --table-sticky-border-color,
-        var(--table-column-border-color, transparent)
-      );
-  }
-`,f=p;var v="eun-table-header",e=class extends i(n){constructor(){super(...arguments);this.selectable=!1;this.hasAction=!1;this.sticky=!1;this.stickyFirstColumn=!1;this.stickyLastColumn=!1;this.selectedCount=0;this.totalCount=0;this.selectAllAriaLabel="Select all rows";this.deselectAllAriaLabel="Deselect all rows"}connectedCallback(){super.connectedCallback?.(),this.hasAttribute("role")||this.setAttribute("role","row")}render(){let a=this.totalCount>0&&this.selectedCount===this.totalCount,h=this.sticky?r`<div id="select-spacer" aria-hidden="true"></div>`:b({role:"columnheader",checked:a,indeterminate:this.selectedCount>0&&!a,ariaLabel:a?this.deselectAllAriaLabel:this.selectAllAriaLabel,disabled:this.totalCount===0,onChange:()=>this.onSelectAllToggle?.()});return r`
-      ${this.selectable?h:l}
-      <slot></slot>
-      ${this.hasAction?r`<div id="action-spacer" aria-hidden="true"></div>`:l}
-    `}};e.styles=[d,u,f],t([o({type:Boolean,reflect:!0})],e.prototype,"selectable",2),t([o({type:Boolean,reflect:!0,attribute:"has-action"})],e.prototype,"hasAction",2),t([o({type:Boolean,reflect:!0})],e.prototype,"sticky",2),t([o({type:Boolean,reflect:!0,attribute:"sticky-first-column"})],e.prototype,"stickyFirstColumn",2),t([o({type:Boolean,reflect:!0,attribute:"sticky-last-column"})],e.prototype,"stickyLastColumn",2),t([o({attribute:!1})],e.prototype,"selectedCount",2),t([o({attribute:!1})],e.prototype,"totalCount",2),t([o({attribute:"select-all-aria-label"})],e.prototype,"selectAllAriaLabel",2),t([o({attribute:"deselect-all-aria-label"})],e.prototype,"deselectAllAriaLabel",2),e=t([s(v)],e);export{v as a,e as b};

package/dist/cdn/components/chunks/chunk-CEDHJUUH.js

@@ -1 +0,0 @@
-var p="eun-dropdown-button, eun-dropdown-item";function c(e){return e.filter(n=>n.getAttribute("aria-disabled")!=="true")}function s(e,n){let t=c(e);if(!t.length)return;let o=Math.max(0,Math.min(n,t.length-1));t[o]?.focus()}function m(e,n,t){let o=c(e);if(!o.length)return;let i=(Math.max(o.indexOf(n),0)+t+o.length)%o.length;o[i]?.focus()}function l(e,n,t,o){let r=Math.max(o,t-n-o);return Math.min(Math.max(e,o),r)}function b(e,n,t){let o=document.documentElement.clientWidth,r=document.documentElement.clientHeight,a=!(e.right+t+n.width<=o)&&e.left-t-n.width>=0,d=a?e.left-n.width-t:e.right+t,u=e.top;return u+n.height>r&&(u=Math.max(t,r-n.height-t)),{top:u,left:d,offsetX:a?t:-t}}function f(e,n,t){let o=e.currentTarget,r=o.getAttribute("aria-disabled")==="true",i=o.getAttribute("aria-haspopup")==="menu";switch(e.key){case"Tab":{e.stopPropagation(),t.onTabAway();break}case"ArrowDown":{e.preventDefault(),e.stopPropagation(),m(n,o,1);break}case"ArrowUp":{e.preventDefault(),e.stopPropagation(),m(n,o,-1);break}case"Home":{e.preventDefault(),e.stopPropagation(),s(n,0);break}case"End":{e.preventDefault(),e.stopPropagation(),s(n,n.length-1);break}case"ArrowRight":{t.onOpenSubmenu&&i&&!r&&(e.preventDefault(),e.stopPropagation(),t.onOpenSubmenu(o));break}case"ArrowLeft":case"Escape":{t.onClose&&(e.preventDefault(),e.stopPropagation(),t.onClose());break}case"Enter":case" ":{if(r)break;e.preventDefault(),e.stopPropagation(),t.onOpenSubmenu&&i?t.onOpenSubmenu(o):t.onSelect(o);break}default:break}}function M(e){if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return 0;let n=getComputedStyle(e).getPropertyValue("--dropdown-menu-transition-duration").trim();if(n){let t=n.endsWith("ms")?Number.parseFloat(n):Number.parseFloat(n)*1e3;if(Number.isFinite(t)&&t>=0)return t}return 160}export{p as a,s as b,l as c,b as d,f as e,M as f};