@eunomia/elements 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/components/navigation/toolbar/toolbar.styles.js

@@ -25,6 +25,8 @@ import { css } from "lit";
  * [--toolbar-panel-background] - Set a custom background for the mobile panel, default a translucent mix of the bar's own background
  * [--toolbar-panel-color] - Set a custom text color for the mobile panel
  * [--toolbar-panel-padding] - Set a custom padding for the mobile panel
+ * [--toolbar-burger-align] - Set the vertical alignment of the burger button within the bar's height, default center ; set flex-start to pin it to the top instead
+ * [--toolbar-burger-padding] - Set a custom padding around the burger button, default 0 on the block axis and --toolbar-panel-padding on the inline axis
  * [--toolbar-panel-gap] - Set a custom gap inside the mobile panel
  * [--toolbar-panel-backdrop-blur] - Set a custom backdrop-filter blur radius for the mobile panel
  * [--toolbar-logo-filter-dark] - Apply style filter on the logo on dark navbar
@@ -32,6 +34,7 @@ import { css } from "lit";
  * [--toolbar-skip-links-background] - Set a custom background for the skip-links bar, default a darker mix of the bar's own background
  * [--toolbar-skip-links-color] - Set a custom text color for the skip-links bar
  * [--toolbar-skip-links-separator-color] - Set a custom color for the divider drawn between skip links
+ * [--toolbar-skip-links-gap] - Set a custom gap between skip links, with the divider centered in it
  */
 const base = css `
   :host {
@@ -66,7 +69,9 @@ const base = css `
       color-mix(in srgb, var(--_background) 90%, transparent)
     );
     --_panelColor: var(--toolbar-panel-color, var(--_color));
-    --_panelPadding: var(--toolbar-panel-padding, 24px);
+    --_panelPadding: var(--toolbar-panel-padding, 14px);
+    --_burgerAlign: var(--toolbar-burger-align, center);
+    --_burgerPadding: var(--toolbar-burger-padding, 0 var(--_panelPadding));
     --_panelGap: var(--toolbar-panel-gap, 8px);
     --_panelBackdropBlur: var(--toolbar-panel-backdrop-blur, 8px);
     --_skipLinksHeight: var(--toolbar-skip-links-height, 40px);
@@ -79,6 +84,7 @@ const base = css `
       color-mix(in srgb, var(--_skipLinksBase) 82%, black 18%)
     );
     --_skipLinksColor: var(--toolbar-skip-links-color, #fff);
+    --_skipLinksGap: var(--toolbar-skip-links-gap, var(--eun-space-m, 16px));
     --_skipLinksSeparatorColor: var(
       --toolbar-skip-links-separator-color,
       color-mix(in srgb, var(--_skipLinksColor) 50%, transparent)
@@ -119,7 +125,7 @@ const base = css `
     padding: var(--_padding);
     background: var(--_background);
     color: var(--_color);
-    border-block-end: var(--eun-borderWidth-s, 1px) solid var(--_borderColor);
+    border-block-end: var(--eun-border-width-s, 1px) solid var(--_borderColor);
     box-shadow: var(--_shadow);
     transition:
       height var(--_transitionDuration) ease,
@@ -178,7 +184,7 @@ const base = css `
     outline-offset: 2px;
     outline: 2px solid transparent;
     transition: outline 0.2s ease-out;
-    border-radius: var(--eun-borderRadius-s);
+    border-radius: var(--eun-border-radius-s);
   }
   #logo-link:focus-visible {
     outline-color: var(--eun-color-primary-500);
@@ -201,7 +207,7 @@ const base = css `
     z-index: calc(var(--_zIndex) + 2);
     display: flex;
     align-items: center;
-    gap: var(--eun-space-m);
+    gap: var(--_skipLinksGap);
     overflow: hidden;
     height: var(--_skipLinksHeight);
     padding-inline: var(--eun-space-m);
@@ -225,7 +231,7 @@ const base = css `
     display: inline-flex;
     align-items: center;
     color: inherit;
-    font-size: var(--eun-fontSize-s, 13px);
+    font-size: var(--eun-font-size-s, 13px);
     text-decoration: none;
     white-space: nowrap;
   }
@@ -236,7 +242,7 @@ const base = css `
     --link-color-focus: var(--_skipLinksColor);
     --link-padding: var(--eun-space-xs, 4px);
     --link-background-focus: var(--eun-color-secondary-transparent, #edbd6f33);
-    --link-border-radius: var(--eun-borderRadius-l, 999px);
+    --link-border-radius: var(--eun-border-radius-l, 999px);
   }
 
   #skip-links ::slotted(a),
@@ -244,7 +250,7 @@ const base = css `
     padding: var(--eun-space-xs, 4px);
     outline: 2px solid transparent;
     outline-offset: 2px;
-    border-radius: var(--eun-borderRadius-l, 999px);
+    border-radius: var(--eun-border-radius-l, 999px);
     transition:
       outline 0.2s ease-out,
       background 0.2s ease-out;
@@ -253,13 +259,12 @@ const base = css `
   #skip-links ::slotted(a:not(:first-child)),
   #skip-links ::slotted(eun-link:not(:first-child)) {
     position: relative;
-    padding-inline-start: var(--eun-space-s);
   }
   #skip-links ::slotted(a:not(:first-child))::before,
   #skip-links ::slotted(eun-link:not(:first-child))::before {
     content: "";
     position: absolute;
-    inset-inline-start: 0;
+    inset-inline-start: calc(var(--_skipLinksGap) / -2);
     inset-block: 0;
     width: 1px;
     background: var(--_skipLinksSeparatorColor);
@@ -314,13 +319,17 @@ const base = css `
   }
 
   #panel-header {
+    box-sizing: border-box;
     position: absolute;
     inset-block-start: 0;
     inset-inline-end: 0;
     z-index: 1;
     display: flex;
-    padding: var(--_panelPadding);
+    align-items: var(--_burgerAlign);
+    height: calc(var(--_currentHeight) - var(--eun-border-width-s, 1px));
+    padding: var(--_burgerPadding);
     pointer-events: auto;
+    transition: height var(--_transitionDuration) ease;
   }
 
   #panel-body {
@@ -385,6 +394,7 @@ const base = css `
   @media (prefers-reduced-motion: reduce) {
     #bar,
     #panel,
+    #panel-header,
     #panel-body,
     #skip-links {
       transition-duration: 0.01ms;

package/dist/events/change.event.d.ts

@@ -11,7 +11,19 @@ export declare class ChangeEvent<T = unknown> extends Event {
      * Declaration of the element that dispatches the event.
      */
     target: LitElement & FormMixinInterface<T>;
-    constructor();
+    /**
+     * The new value (or `checked` state, for a checkable field) at the
+     * moment this event was dispatched — the same one already readable from
+     * `event.target.value`/`.checked`, exposed directly on the event too so
+     * a listener attached higher up the tree (delegation on a `<form>`, for
+     * instance) can read it as `event.value` without narrowing
+     * `event.target`'s type itself. `undefined` for a dispatcher with no
+     * single value of its own (toolbar, sidebar, collapse still only ever
+     * construct this with no argument, reporting their own state through
+     * `event.target` instead, same as before).
+     */
+    readonly value: T;
+    constructor(value?: T);
 }
 declare global {
     interface GlobalEventHandlersEventMap {

package/dist/events/change.event.js

@@ -1,6 +1,7 @@
 export class ChangeEvent extends Event {
-    constructor() {
+    constructor(value) {
         super(ChangeEvent.eventName, { bubbles: true, composed: false });
+        this.value = value;
     }
 }
 /**

package/dist/features/scheduler/calendar/calendar.js

@@ -867,7 +867,7 @@ let EunomiaCalendar = class EunomiaCalendar extends LitElement {
             pointerEvents: "none",
             zIndex: "1000",
             boxShadow: "0 8px 20px rgba(0, 0, 0, 0.2)",
-            borderRadius: "var(--eun-borderRadius-s, 5px)",
+            borderRadius: "var(--eun-border-radius-s, 5px)",
         });
         this.dragGhostLayerEl?.appendChild(ghost);
         this.dragGhostEl = ghost;

package/dist/features/scheduler/calendar/calendar.styles.js

@@ -86,7 +86,7 @@ const base = css `
     gap: 2px;
     min-width: 36px;
     padding: var(--eun-space-xs, 4px) 2px;
-    border-radius: var(--eun-borderRadius-s, 5px);
+    border-radius: var(--eun-border-radius-s, 5px);
     cursor: pointer;
     text-align: center;
   }
@@ -109,13 +109,13 @@ const base = css `
 
   .week-day-strip-day.today .week-day-strip-daynum {
     color: var(--eun-color-info-100, #097faf);
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
   }
 
   .week-day-strip-day.selected .week-day-strip-daynum {
     background: var(--eun-color-info-100, #097faf);
     color: #fff;
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
   }
 
   .week-day-strip-day:focus-visible {

package/dist/features/scheduler/scheduler/scheduler.styles.js

@@ -15,7 +15,7 @@ const base = css `
     box-sizing: border-box;
     border: 1px solid
       var(--scheduler-border-color, var(--eun-border-color, #dee0e7));
-    border-radius: var(--eun-borderRadius-m, 10px);
+    border-radius: var(--eun-border-radius-m, 10px);
     background: var(--scheduler-background, var(--eun-surface-color, #ffffff));
     overflow: hidden;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
@@ -83,7 +83,7 @@ const base = css `
   #period-label {
     margin: 0 var(--eun-space-xs, 4px);
     font-size: 15px;
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
     color: var(--eun-text-color, #071621);
   }
 

package/dist/features/scheduler/scheduler-event/scheduler-event.styles.js

@@ -57,7 +57,7 @@ const base = css `
     padding: var(--scheduler-event-padding, var(--eun-space-xs, 4px));
     border-radius: var(
       --scheduler-event-radius,
-      var(--eun-borderRadius-s, 5px)
+      var(--eun-border-radius-s, 5px)
     );
     outline: 2px solid transparent;
     cursor: pointer;
@@ -143,7 +143,7 @@ const base = css `
     white-space: nowrap;
     color: var(--scheduler-event-title-color, var(--eun-text-color, #071621));
     font-size: 12px;
-    font-weight: var(--eun-fontWeight-m, 600);
+    font-weight: var(--eun-font-weight-m, 600);
     line-height: 1.3;
   }
 

package/dist/features/scheduler/scheduler-event-editor/scheduler-event-editor.styles.js

@@ -31,8 +31,8 @@ const base = css `
     display: block;
     margin-bottom: var(--eun-space-xs, 4px);
     color: var(--eun-text-color, #071621);
-    font-size: var(--eun-fontSize-s, 14px);
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-size: var(--eun-font-size-s, 14px);
+    font-weight: var(--eun-font-weight-l, 700);
   }
 
   .guest-input-row {

package/dist/features/scheduler/shared/scheduler-event-popover.styles.js

@@ -16,7 +16,7 @@ const base = css `
     margin: 0;
     padding: 0;
     border: 1px solid var(--eun-border-color, #dee0e7);
-    border-radius: var(--eun-borderRadius-m, 10px);
+    border-radius: var(--eun-border-radius-m, 10px);
     background: var(--eun-surface-color, #ffffff);
     box-shadow: var(--eun-shadow-m, 0 8px 24px rgba(7, 22, 33, 0.16));
     font-family: var(--eun-font-family, "Mulish", sans-serif);
@@ -52,8 +52,8 @@ const base = css `
 
   .event-popover-bar {
     height: 4px;
-    border-radius: var(--eun-borderRadius-m, 10px)
-      var(--eun-borderRadius-m, 10px) 0 0;
+    border-radius: var(--eun-border-radius-m, 10px)
+      var(--eun-border-radius-m, 10px) 0 0;
     background: var(--_accent, var(--eun-color-blue-600, #0aa5a8));
   }
 
@@ -75,7 +75,7 @@ const base = css `
     margin: 0;
     padding-right: 28px;
     font-size: 16px;
-    font-weight: var(--eun-fontWeight-l, 700);
+    font-weight: var(--eun-font-weight-l, 700);
   }
 
   .event-popover-row {

package/dist/features/scheduler/shared/scheduler-hour-grid.styles.js

@@ -72,7 +72,7 @@ const base = css `
 
   .hour-grid-day-header.today {
     color: var(--eun-color-info-100, #097faf);
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
   }
 
   .hour-grid-allday-row {

package/dist/features/scheduler/shared/scheduler-month-view.styles.js

@@ -76,7 +76,7 @@ const base = css `
   .month-cell-day.today {
     background: var(--eun-color-info-100, #097faf);
     color: #fff;
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
   }
 
   .month-cell-day:focus-visible {

package/dist/features/scheduler/shared/scheduler-year-view.styles.js

@@ -52,7 +52,7 @@ const base = css `
     background: var(--eun-surface-color, #ffffff);
     cursor: pointer;
     font-size: 15px;
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
     color: var(--eun-text-color, #071621);
   }
 

package/dist/features/table/native-table.css

@@ -78,35 +78,35 @@
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
-  border: var(--eun-borderWidth-s, 1px) solid
+  border: var(--eun-border-width-s, 1px) solid
     var(--table-border-color, var(--eun-border-color, #dee0e7));
-  border-radius: var(--eun-borderRadius-m, 10px);
+  border-radius: var(--eun-border-radius-m, 10px);
   background: var(--table-background, var(--eun-surface-color, #ffffff));
   font-family: var(--eun-font-family, "'Mulish', sans-serif");
-  font-size: var(--eun-fontSize-s, 13px);
+  font-size: var(--eun-font-size-s, 13px);
   color: var(--eun-text-color, #071621);
 }
 
 .eun-table-scroll {
   overflow: auto;
   max-height: var(--table-max-height, none);
-  border-radius: var(--eun-borderRadius-m, 10px);
+  border-radius: var(--eun-border-radius-m, 10px);
 }
 
 .eun-table caption {
   caption-side: top;
   text-align: left;
   padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
-  font-weight: var(--eun-fontWeight-m, 500);
+  font-weight: var(--eun-font-weight-m, 500);
 }
 
 .eun-table th,
 .eun-table td {
   padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
   text-align: left;
-  border-bottom: var(--eun-borderWidth-s, 1px) solid
+  border-bottom: var(--eun-border-width-s, 1px) solid
     var(--table-border-color, var(--eun-border-color, #dee0e7));
-  border-right: var(--eun-borderWidth-s, 1px) solid
+  border-right: var(--eun-border-width-s, 1px) solid
     var(--table-column-border-color, transparent);
 }
 
@@ -116,7 +116,7 @@
 
 .eun-table thead th {
   background: var(--table-header-background, var(--eun-surface-color, #ffffff));
-  font-weight: var(--eun-fontWeight-m, 500);
+  font-weight: var(--eun-font-weight-m, 500);
   color: var(--eun-text-secondary, #484e61);
 }
 
@@ -206,7 +206,7 @@
     --table-sticky-column-background,
     var(--table-header-background, var(--eun-surface-color, #ffffff))
   );
-  border-left: var(--eun-borderWidth-s, 1px) solid
+  border-left: var(--eun-border-width-s, 1px) solid
     var(
       --table-sticky-border-color,
       var(--table-column-border-color, transparent)
@@ -221,7 +221,7 @@
     --table-sticky-column-background,
     var(--table-background, var(--eun-surface-color, #ffffff))
   );
-  border-left: var(--eun-borderWidth-s, 1px) solid
+  border-left: var(--eun-border-width-s, 1px) solid
     var(
       --table-sticky-border-color,
       var(--table-column-border-color, transparent)
@@ -256,7 +256,7 @@
     --table-sticky-row-background,
     var(--table-background, var(--eun-surface-color, #ffffff))
   );
-  border-top: var(--eun-borderWidth-s, 1px) solid
+  border-top: var(--eun-border-width-s, 1px) solid
     var(
       --table-sticky-border-color,
       var(--table-border-color, var(--eun-border-color, #dee0e7))

package/dist/features/table/table/table.styles.js

@@ -19,9 +19,9 @@ const base = css `
     grid-template-columns: var(--_columns, none);
     align-items: stretch;
     box-sizing: border-box;
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--table-border-color, var(--eun-border-color, #dee0e7));
-    border-radius: var(--eun-borderRadius-m, 10px);
+    border-radius: var(--eun-border-radius-m, 10px);
     background: var(--table-background, var(--eun-surface-color, #ffffff));
     overflow: auto;
     max-height: var(--table-max-height, none);

package/dist/features/table/table-action-bar/table-action-bar.styles.js

@@ -52,11 +52,11 @@ const base = css `
     width: max-content;
     max-width: 100%;
     box-sizing: border-box;
-    border: var(--eun-borderWidth-s, 1px) solid
+    border: var(--eun-border-width-s, 1px) solid
       var(--table-action-bar-border-color, var(--eun-border-color, #dee0e7));
     border-radius: var(
       --table-action-bar-border-radius,
-      var(--eun-borderRadius-l, 10px)
+      var(--eun-border-radius-l, 10px)
     );
     background: var(
       --table-action-bar-background,

package/dist/features/table/table-cell/table-cell.styles.js

@@ -21,7 +21,7 @@ const base = css `
     display: flex;
     box-sizing: border-box;
     min-width: 0;
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(--table-column-border-color, transparent);
   }
 
@@ -38,7 +38,7 @@ const base = css `
     width: 100%;
     min-width: 0;
     padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
-    font-size: var(--eun-fontSize-s, 13px);
+    font-size: var(--eun-font-size-s, 13px);
     color: var(--table-cell-color, var(--eun-text-color, #071621));
     overflow: hidden;
   }

package/dist/features/table/table-column/table-column.styles.js

@@ -23,7 +23,7 @@ const base = css `
     display: flex;
     box-sizing: border-box;
     min-width: 0;
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(--table-column-border-color, transparent);
   }
 
@@ -39,8 +39,8 @@ const base = css `
     width: 100%;
     min-width: 0;
     padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
-    font-size: var(--eun-fontSize-s, 13px);
-    font-weight: var(--table-column-font-weight, var(--eun-fontWeight-m, 500));
+    font-size: var(--eun-font-size-s, 13px);
+    font-weight: var(--table-column-font-weight, var(--eun-font-weight-m, 500));
     color: var(--table-column-color, var(--eun-text-secondary, #484e61));
     text-align: left;
     white-space: nowrap;

package/dist/features/table/table-header/table-header.styles.js

@@ -24,9 +24,9 @@ const base = css `
       var(--eun-surface-color, #ffffff)
     );
     box-shadow: inset 0 0 0 9999px transparent;
-    border-bottom: var(--eun-borderWidth-s, 1px) solid
+    border-bottom: var(--eun-border-width-s, 1px) solid
       var(--table-border-color, var(--eun-border-color, #dee0e7));
-    font-weight: var(--eun-fontWeight-m, 500);
+    font-weight: var(--eun-font-weight-m, 500);
     transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
   }
 
@@ -92,7 +92,7 @@ const base = css `
       var(--table-header-background, var(--eun-surface-color, #ffffff))
     );
     box-shadow: inset 0 0 0 9999px transparent;
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-column-border-color, transparent)
@@ -137,7 +137,7 @@ const base = css `
     );
     box-shadow: inset 0 0 0 9999px transparent;
     transition: box-shadow var(--table-row-transition-duration, 200ms) ease;
-    border-inline-start: var(--eun-borderWidth-s, 1px) solid
+    border-inline-start: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-column-border-color, transparent)

package/dist/features/table/table-item/table-item.styles.js

@@ -99,7 +99,7 @@ const base = css `
       var(--eun-surface-color, #ffffff)
     );
     box-shadow: inset 0 0 0 9999px transparent;
-    border-bottom: var(--eun-borderWidth-s, 1px) solid
+    border-bottom: var(--eun-border-width-s, 1px) solid
       var(--table-border-color, var(--eun-border-color, #dee0e7));
     transition:
       background-color var(--_table-row-transition-duration) ease,
@@ -128,7 +128,7 @@ const base = css `
     position: sticky;
     bottom: 0;
     z-index: var(--_table-z-sticky-row, 3);
-    border-top: var(--eun-borderWidth-s, 1px) solid
+    border-top: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-border-color, var(--eun-border-color, #dee0e7))
@@ -162,7 +162,7 @@ const base = css `
     );
     box-shadow: inset 0 0 0 9999px transparent;
     padding-inline-start: var(--eun-space-s);
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-column-border-color, transparent)
@@ -228,7 +228,7 @@ const base = css `
     position: sticky;
     left: var(--_table-select-offset, 0px);
     z-index: var(--_table-z-sticky-col, 2);
-    border-inline-end: var(--eun-borderWidth-s, 1px) solid
+    border-inline-end: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-column-border-color, transparent)
@@ -301,7 +301,7 @@ const base = css `
     position: sticky;
     right: 0;
     z-index: var(--_table-z-sticky-col, 2);
-    border-inline-start: var(--eun-borderWidth-s, 1px) solid
+    border-inline-start: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-column-border-color, transparent)
@@ -312,7 +312,7 @@ const base = css `
     position: sticky;
     right: var(--_table-action-offset, 0px);
     z-index: var(--_table-z-sticky-col, 2);
-    border-inline-start: var(--eun-borderWidth-s, 1px) solid
+    border-inline-start: var(--eun-border-width-s, 1px) solid
       var(
         --table-sticky-border-color,
         var(--table-column-border-color, transparent)

package/dist/features/table/table-skeleton-row/table-skeleton-row.styles.js

@@ -17,7 +17,7 @@ export const tableSkeletonRowStyles = css `
     grid-template-columns: subgrid;
     align-items: center;
     box-sizing: border-box;
-    border-bottom: var(--eun-borderWidth-s, 1px) solid
+    border-bottom: var(--eun-border-width-s, 1px) solid
       var(--table-border-color, var(--eun-border-color, #dee0e7));
     opacity: 0;
     animation: eun-table-skeleton-row-enter

package/dist/index.d.ts

@@ -15,7 +15,7 @@ export { EunomiaToggleItem, EunomiaToggleItemTagName, } from "./components/actio
 export { EunomiaToggleGroup, EunomiaToggleGroupTagName, } from "./components/action/toggle/toggle-group.js";
 export type { EunomiaToggleGroupOption, EunomiaToggleGroupAppearance, } from "./components/action/toggle/toggle-group.js";
 export { EunomiaLink, EunomiaLinkTagName, } from "./components/action/link/link.js";
-export { EunomiaIcon, EunomiaIconTagName, } from "./components/content/icon/icon.js";
+export { EunomiaIcon, EunomiaIconTagName, setIconBaseUrl, } from "./components/content/icon/icon.js";
 export type { EunomiaIconName, EunomiaIconType, } from "./components/content/icon/icon.type.js";
 export { EunomiaTag, EunomiaTagTagName } from "./components/content/tag/tag.js";
 export { EunomiaChip, EunomiaChipTagName, } from "./components/content/chip/chip.js";
@@ -108,11 +108,11 @@ export { EUNOMIA_BREAKPOINTS } from "./breakpoints.js";
 export type { EunomiaBreakpoint } from "./breakpoints.js";
 export { setDefaultLocale, getDefaultLocale } from "./i18n/index.js";
 export type { Dictionary } from "./i18n/index.js";
-export { buildPalette, buildTints, initializeTheme, } from "./utils/theme-generator.utils.js";
-export type { EunomiaHexColor, EunomiaThemeShadeValue, EunomiaThemeTints, } from "./utils/theme-generator.utils.js";
+export { buildPalette, buildTints, buildThemeCss, initializeTheme, } from "./utils/theme-generator.utils.js";
+export type { EunomiaHexColor, EunomiaThemeCssOptions, EunomiaThemeShadeValue, EunomiaThemeTints, } from "./utils/theme-generator.utils.js";
 export type { DragReorderOptions, DragReorderController, DragReorderOrientation, DragReorderStartDetail, DragReorderMoveDetail, DragReorderCommitDetail, DragReorderEndDetail, } from "./utils/drag-drop.utils.js";
-export { findRichTextColor, formatRichText, getPlainTextLength, joinAlign, RICH_TEXT_COLORS, splitAlign, } from "./utils/rich-text.utils.js";
-export type { RichTextColor, TextAlign } from "./utils/rich-text.utils.js";
+export { findRichTextColor, formatRichText, getPlainTextLength, joinAlign, parseInlineNodes, RICH_TEXT_COLORS, splitAlign, toHtml, toPlainText, } from "./utils/rich-text.utils.js";
+export type { InlineNode, RichTextColor, TextAlign, } from "./utils/rich-text.utils.js";
 export { LoadMoreEvent } from "./events/loadmore.event.js";
 export { PageChangeEvent } from "./events/pagechange.event.js";
 export { PageSizeChangeEvent } from "./events/pagesizechange.event.js";

package/dist/index.js

@@ -25,6 +25,9 @@
 // alongside them, composing the others and writing the result onto
 // `document.documentElement`, exported so a consumer doesn't have to
 // reassemble that composition themselves just to apply a custom brand.
+// `buildThemeCss` is its pure counterpart, returning the same tokens as a
+// stylesheet so an SSR app can ship the brand in the HTML itself instead
+// of flashing the base theme until `initializeTheme` runs after hydration.
 // `EUNOMIA_BREAKPOINTS` is exported so a consumer's own responsive layout
 // code can switch at the exact same pixel widths the components already
 // react to internally, instead of guessing or duplicating those numbers.
@@ -39,7 +42,7 @@ export { EunomiaToggle, EunomiaToggleTagName, } from "./components/action/toggle
 export { EunomiaToggleItem, EunomiaToggleItemTagName, } from "./components/action/toggle/toggle-item.js";
 export { EunomiaToggleGroup, EunomiaToggleGroupTagName, } from "./components/action/toggle/toggle-group.js";
 export { EunomiaLink, EunomiaLinkTagName, } from "./components/action/link/link.js";
-export { EunomiaIcon, EunomiaIconTagName, } from "./components/content/icon/icon.js";
+export { EunomiaIcon, EunomiaIconTagName, setIconBaseUrl, } from "./components/content/icon/icon.js";
 export { EunomiaTag, EunomiaTagTagName } from "./components/content/tag/tag.js";
 export { EunomiaChip, EunomiaChipTagName, } from "./components/content/chip/chip.js";
 export { EunomiaBadge, EunomiaBadgeTagName, } from "./components/content/badge/badge.js";
@@ -103,8 +106,8 @@ export { debounce, throttle } from "./utils/time.utils.js";
 export { createDragReorder } from "./utils/drag-drop.utils.js";
 export { EUNOMIA_BREAKPOINTS } from "./breakpoints.js";
 export { setDefaultLocale, getDefaultLocale } from "./i18n/index.js";
-export { buildPalette, buildTints, initializeTheme, } from "./utils/theme-generator.utils.js";
-export { findRichTextColor, formatRichText, getPlainTextLength, joinAlign, RICH_TEXT_COLORS, splitAlign, } from "./utils/rich-text.utils.js";
+export { buildPalette, buildTints, buildThemeCss, initializeTheme, } from "./utils/theme-generator.utils.js";
+export { findRichTextColor, formatRichText, getPlainTextLength, joinAlign, parseInlineNodes, RICH_TEXT_COLORS, splitAlign, toHtml, toPlainText, } from "./utils/rich-text.utils.js";
 export { LoadMoreEvent } from "./events/loadmore.event.js";
 export { PageChangeEvent } from "./events/pagechange.event.js";
 export { PageSizeChangeEvent } from "./events/pagesizechange.event.js";

package/dist/jsx.d.ts

@@ -20,14 +20,27 @@
  * erased, so importing it (`import type {} from "@eunomia/elements/jsx"`)
  * never calls `customElements.define(...)` and carries none of the SSR
  * risk a value import of a component does. `react`'s types describe
- * `DOMAttributes`/`Ref` here, but only as a type dependency: this package
- * still doesn't depend on React at runtime, so a non-React consumer never
- * resolves this module at all.
+ * `HTMLAttributes`/`Key`/`Ref` here, but only as a type dependency: this
+ * package still doesn't depend on React at runtime, so a non-React
+ * consumer never resolves this module at all.
  */
-import type { DOMAttributes, Ref } from "react";
+import type { HTMLAttributes, Key, Ref } from "react";
 type EunomiaTagName = Extract<keyof HTMLElementTagNameMap, `eun-${string}`>;
-type EunomiaElementProps<T> = Partial<Omit<T, keyof HTMLElement>> & DOMAttributes<T> & {
+type EunomiaOwnProps<T> = Partial<Omit<T, keyof HTMLElement | keyof HTMLOrSVGElement>>;
+/**
+ * Props allowed on a `<eun-*>` tag in TSX: the element's own reactive
+ * properties, plus every standard HTML/ARIA attribute and event handler
+ * React already knows about (id, style, title, tabIndex, aria-*, onClick,
+ * ...). `className` is deliberately excluded: React only rewrites it to
+ * the `class` attribute for elements it recognizes, not arbitrary custom
+ * elements — `class` is the one that actually works here. Custom events
+ * (`eunnavigate`, `eunchange`, ...) aren't included — those are typed and
+ * wired per-component with a ref, when that component is migrated.
+ */
+type EunomiaElementProps<T> = EunomiaOwnProps<T> & Omit<HTMLAttributes<T>, "className" | keyof EunomiaOwnProps<T>> & {
     ref?: Ref<T>;
+    key?: Key | null;
+    class?: string;
 };
 type EunomiaJSXElements = {
     [K in EunomiaTagName]: EunomiaElementProps<HTMLElementTagNameMap[K]>;

package/dist/mixins/button.mixin.d.ts

@@ -41,6 +41,7 @@ export type EunomiaButtonAppearance = EunomiaAppearance;
 export declare class ButtonMixinInterface {
     type?: ButtonType;
     variant?: ButtonVariant;
+    fixedColor?: boolean;
     size?: ButtonSize;
     rounded?: boolean;
     slide?: boolean;