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

package/dist/components/navigation/tabs/tab-group/tab-group.d.ts

@@ -30,6 +30,7 @@ declare const EunomiaTabGroup_base: import("../../../../utils/constructor.type.j
  * @prop { 'start' | 'center' | 'end' } align - The tabs position alignment according to the component
  * @prop { 'fade' | 'slide' | 'none' } animation - The animation to apply to a click/keyboard-triggered panel switch ; a touch swipe's own release settling into place is never this, see the class doc and `--tab-panel-swipe-duration`
  * @prop { boolean } hideIndicator - Indicates whether the indicators under a tab should be displayed or not
+ * @prop { boolean } [full=false] - Stretches the tab header to 100% of the group's width, dividing it equally between the tabs and centering each label. Makes align irrelevant. Combines with overflow scrolling : a tab whose label doesn't fit its share keeps the room it needs
  * @attr {string} aria-label - Accessible name for the tablist, forwarded to the internal `role="tablist"` element. Recommended when the group's purpose isn't already clear from a preceding heading, or when several tab groups appear on the same page
  * @fires { TabChangeEvent } tabchange - Emitted event on active panel change (click, keyboard, or a committed touch swipe alike)
  * @cssprop [--tab-header-background] - Set a custom color to the background of the tab header
@@ -58,6 +59,13 @@ export declare class EunomiaTabGroup extends EunomiaTabGroup_base {
      * @default start
      */
     align: "start" | "center" | "end";
+    /**
+     * Stretches the tab header to 100% of the group's width, dividing it
+     * equally between the tabs. Ignores `align`, since nothing is left to
+     * align.
+     * @default false
+     */
+    full: boolean;
     /**
      * The animation type, for a tab switch triggered by a click or a keyboard
      * activation only. A touch swipe always tracks the finger 1:1 during the
@@ -173,6 +181,7 @@ export declare class EunomiaTabGroup extends EunomiaTabGroup_base {
     connectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues): void;
     disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
     /**
      * Update the displayed indicator under the active tab.
      * @internal

package/dist/components/navigation/tabs/tab-group/tab-group.js

@@ -60,6 +60,7 @@ const eunTabTagName = "eun-tab";
  * @prop { 'start' | 'center' | 'end' } align - The tabs position alignment according to the component
  * @prop { 'fade' | 'slide' | 'none' } animation - The animation to apply to a click/keyboard-triggered panel switch ; a touch swipe's own release settling into place is never this, see the class doc and `--tab-panel-swipe-duration`
  * @prop { boolean } hideIndicator - Indicates whether the indicators under a tab should be displayed or not
+ * @prop { boolean } [full=false] - Stretches the tab header to 100% of the group's width, dividing it equally between the tabs and centering each label. Makes align irrelevant. Combines with overflow scrolling : a tab whose label doesn't fit its share keeps the room it needs
  * @attr {string} aria-label - Accessible name for the tablist, forwarded to the internal `role="tablist"` element. Recommended when the group's purpose isn't already clear from a preceding heading, or when several tab groups appear on the same page
  * @fires { TabChangeEvent } tabchange - Emitted event on active panel change (click, keyboard, or a committed touch swipe alike)
  * @cssprop [--tab-header-background] - Set a custom color to the background of the tab header
@@ -83,6 +84,13 @@ let EunomiaTabGroup = EunomiaTabGroup_1 = class EunomiaTabGroup extends Navigati
          * @default start
          */
         this.align = "start";
+        /**
+         * Stretches the tab header to 100% of the group's width, dividing it
+         * equally between the tabs. Ignores `align`, since nothing is left to
+         * align.
+         * @default false
+         */
+        this.full = false;
         /**
          * The animation type, for a tab switch triggered by a click or a keyboard
          * activation only. A touch swipe always tracks the finger 1:1 during the
@@ -267,6 +275,12 @@ let EunomiaTabGroup = EunomiaTabGroup_1 = class EunomiaTabGroup extends Navigati
         this.swipeGesture?.destroy();
         super.disconnectedCallback?.();
     }
+    updated(changedProperties) {
+        super.updated?.(changedProperties);
+        if (changedProperties.has("full")) {
+            this.updateIndicator();
+        }
+    }
     /**
      * Update the displayed indicator under the active tab.
      * @internal
@@ -281,7 +295,7 @@ let EunomiaTabGroup = EunomiaTabGroup_1 = class EunomiaTabGroup extends Navigati
         }
         const { clientWidth, offsetLeft } = this.activeTab;
         let translateOffset;
-        if (this.align === "center" && !this.overflowState) {
+        if (this.align === "center" && !this.overflowState && !this.full) {
             translateOffset =
                 -this.scrollableContent.clientWidth +
                     this.scrollableContent.clientWidth / 2 +
@@ -289,7 +303,7 @@ let EunomiaTabGroup = EunomiaTabGroup_1 = class EunomiaTabGroup extends Navigati
                     clientWidth -
                     clientWidth / 2;
         }
-        else if (this.align === "end" && !this.overflowState) {
+        else if (this.align === "end" && !this.overflowState && !this.full) {
             translateOffset =
                 offsetLeft -
                     this.scrollableContent.clientWidth +
@@ -699,6 +713,9 @@ EunomiaTabGroup.EDGE_RESISTANCE = 0.3;
 __decorate([
     property({ reflect: true })
 ], EunomiaTabGroup.prototype, "align", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EunomiaTabGroup.prototype, "full", void 0);
 __decorate([
     property({ reflect: true })
 ], EunomiaTabGroup.prototype, "animation", void 0);

package/dist/components/navigation/tabs/tab-group/tab-group.styles.js

@@ -52,6 +52,14 @@ const base = css `
     justify-content: center;
   }
 
+  :host([full]) [role="tablist"] {
+    justify-content: flex-start;
+  }
+
+  :host([full]) ::slotted(eun-tab) {
+    flex: 1 1 0%;
+  }
+
   :host([hide-indicator]) ::slotted(eun-tab:hover)::after {
     display: none;
   }
@@ -142,8 +150,8 @@ const base = css `
     justify-content: flex-start;
     background: linear-gradient(
       90deg,
-      var(--tab-arrows-color, var(--eun-color-grey-0, #ffffff)) 0%,
-      var(--tab-arrows-color, var(--eun-color-grey-0, #ffffff)) 60%,
+      var(--tab-arrows-color, var(--eun-surface-color, #ffffff)) 0%,
+      var(--tab-arrows-color, var(--eun-surface-color, #ffffff)) 60%,
       transparent 100%
     );
   }
@@ -153,8 +161,8 @@ const base = css `
     background: linear-gradient(
       90deg,
       transparent 0%,
-      var(--tab-arrows-color, var(--eun-color-grey-0, #ffffff)) 40%,
-      var(--tab-arrows-color, var(--eun-color-grey-0, #ffffff)) 100%
+      var(--tab-arrows-color, var(--eun-surface-color, #ffffff)) 40%,
+      var(--tab-arrows-color, var(--eun-surface-color, #ffffff)) 100%
     );
   }
   hr {

package/dist/components/navigation/tabs/tab-panel/tab-panel.styles.js

@@ -3,7 +3,7 @@ const base = css `
   :host {
     display: block;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-fontSize-s, 14px);
+    font-size: var(--eun-font-size-s, 14px);
   }
   :host([is-hidden]) {
     display: none;

package/dist/components/navigation/toolbar/toolbar.d.ts

@@ -131,6 +131,8 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @cssprop [--toolbar-panel-background] - Sets the background of the mobile panel, defaulting to a translucent mix of the bar's own background
  * @cssprop [--toolbar-panel-color] - Sets the text color of the mobile panel
  * @cssprop [--toolbar-panel-padding] - Sets the padding of the mobile panel
+ * @cssprop [--toolbar-burger-align] - Sets the vertical alignment of the burger button within the bar's height, defaulting to center ; set flex-start to pin it to the top instead
+ * @cssprop [--toolbar-burger-padding] - Sets the padding around the burger button, defaulting to 0 on the block axis and --toolbar-panel-padding on the inline axis
  * @cssprop [--toolbar-panel-gap] - Sets the gap inside the mobile panel
  * @cssprop [--toolbar-panel-backdrop-blur] - Sets a backdrop blur radius for the mobile panel
  * @cssprop [--toolbar-skip-links-height] - Sets the height of the skip-links bar

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

@@ -130,6 +130,8 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @cssprop [--toolbar-panel-background] - Sets the background of the mobile panel, defaulting to a translucent mix of the bar's own background
  * @cssprop [--toolbar-panel-color] - Sets the text color of the mobile panel
  * @cssprop [--toolbar-panel-padding] - Sets the padding of the mobile panel
+ * @cssprop [--toolbar-burger-align] - Sets the vertical alignment of the burger button within the bar's height, defaulting to center ; set flex-start to pin it to the top instead
+ * @cssprop [--toolbar-burger-padding] - Sets the padding around the burger button, defaulting to 0 on the block axis and --toolbar-panel-padding on the inline axis
  * @cssprop [--toolbar-panel-gap] - Sets the gap inside the mobile panel
  * @cssprop [--toolbar-panel-backdrop-blur] - Sets a backdrop blur radius for the mobile panel
  * @cssprop [--toolbar-skip-links-height] - Sets the height of the skip-links bar

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
@@ -67,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);
@@ -121,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,
@@ -180,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);
@@ -227,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;
   }
@@ -238,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),
@@ -246,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;
@@ -315,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 {
@@ -386,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/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

@@ -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";