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

package/dist/components/action/toggle/toggle-item.styles.js

@@ -31,7 +31,6 @@ export const toggleItemStyles = css `
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     font-size: var(--eun-font-size-s, 14px);
     font-weight: var(--eun-font-weight-m, 500);
-    text-transform: capitalize;
     white-space: nowrap;
     cursor: pointer;
     color: var(--toggle-group-color, var(--eun-color-grey-600, #666e8a));
@@ -41,10 +40,13 @@ export const toggleItemStyles = css `
     );
     outline: 2px solid transparent;
     box-shadow: var(--_boxShadow);
-    transition:
-      background-color 0.2s ease-out,
-      color 0.2s ease-out,
-      box-shadow 0.2s ease-out;
+    transition: var(
+      --_toggleTransition,
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out),
+      color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      box-shadow var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out)
+    );
   }
   :host(:not([disabled]):hover) #item {
     box-shadow: var(--_boxShadow-hover);
@@ -57,9 +59,10 @@ export const toggleItemStyles = css `
     outline-color: var(--eun-color-primary-500, #3d6fff);
     outline-offset: 2px;
     transition:
-      outline-color 0.2s ease-out,
-      border-color 0.2s ease-out,
-      outline-offset 0.2s ease-out;
+      outline-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      outline-offset var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out);
   }
   :host([disabled]) #item {
     cursor: not-allowed;
@@ -83,7 +86,7 @@ export const toggleItemStyles = css `
 
   :host {
     --_variantColorDefault: var(--eun-color-primary-500, #3d6fff);
-    --_variantTintDefault: var(--eun-color-primary-transparent, #3d6fff33);
+    --_variantTintDefault: var(--eun-color-primary-alpha-20, #3d6fff33);
     --_variantColor: var(
       --toggle-group-active-background,
       var(--_variantColorDefault)
@@ -95,21 +98,21 @@ export const toggleItemStyles = css `
       transparent
     );
   }
-  :host([variant="secondary"]) {
+  :host([color="secondary"]) {
     --_variantColorDefault: var(--eun-color-secondary-500, #e5a030);
-    --_variantTintDefault: var(--eun-color-secondary-transparent, #e5a03033);
+    --_variantTintDefault: var(--eun-color-secondary-alpha-20, #edbd6f33);
   }
-  :host([variant="critical"]) {
+  :host([color="critical"]) {
     --_variantColorDefault: var(--eun-color-critical-100, #aa0014);
-    --_variantTintDefault: var(--eun-color-critical-30, #faf0f1);
+    --_variantTintDefault: var(--eun-color-critical-alpha-5, #aa00140d);
   }
-  :host([variant="success"]) {
+  :host([color="success"]) {
     --_variantColorDefault: var(--eun-color-success-100, #1a9948);
-    --_variantTintDefault: var(--eun-color-success-30, #f1f9f4);
+    --_variantTintDefault: var(--eun-color-success-alpha-5, #1a99480d);
   }
-  :host([variant="warning"]) {
+  :host([color="warning"]) {
     --_variantColorDefault: var(--eun-color-warning-100, #c85207);
-    --_variantTintDefault: var(--eun-color-warning-30, #fcf5f0);
+    --_variantTintDefault: var(--eun-color-warning-alpha-5, #c852070d);
   }
   :host([appearance="outline"]) #item,
   :host([appearance="flat"]) #item {

package/dist/components/action/toggle/toggle.d.ts

@@ -36,6 +36,8 @@ declare const EunomiaToggle_base: import("../../../utils/constructor.type.js").C
  * @cssprop [--toggle-border-size] - Sets the width of the border
  * @cssprop [--toggle-border-radius] - Sets the corner radius of the toggle
  * @cssprop [--toggle-padding] - Sets the padding of the toggle
+ * @cssprop [--toggle-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toggle-padding is set
+ * @cssprop [--toggle-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toggle-padding is set
  * @element eun-toggle
  */
 export declare class EunomiaToggle extends EunomiaToggle_base {

package/dist/components/action/toggle/toggle.js

@@ -45,6 +45,8 @@ export const EunomiaToggleTagName = "eun-toggle";
  * @cssprop [--toggle-border-size] - Sets the width of the border
  * @cssprop [--toggle-border-radius] - Sets the corner radius of the toggle
  * @cssprop [--toggle-padding] - Sets the padding of the toggle
+ * @cssprop [--toggle-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toggle-padding is set
+ * @cssprop [--toggle-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toggle-padding is set
  * @element eun-toggle
  */
 let EunomiaToggle = class EunomiaToggle extends DisabledMixin(LitElement) {

package/dist/components/action/toggle/toggle.styles.d.ts

@@ -11,6 +11,8 @@
  * [--toggle-border-size] - Set a custom border size
  * [--toggle-border-radius] - Set a custom border radius
  * [--toggle-padding] - Set a custom padding
+ * [--toggle-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toggle-padding is set
+ * [--toggle-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --toggle-padding is set
  * [--toggle-hover-color] - Set a custom text color on hover state, while not pressed
  * [--toggle-hover-background] - Set a custom background color on hover state, while not pressed ; transparent by default
  * [--toggle-shadow] - Set a custom box shadow, none by default

package/dist/components/action/toggle/toggle.styles.js

@@ -12,6 +12,8 @@ import { css } from "lit";
  * [--toggle-border-size] - Set a custom border size
  * [--toggle-border-radius] - Set a custom border radius
  * [--toggle-padding] - Set a custom padding
+ * [--toggle-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toggle-padding is set
+ * [--toggle-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --toggle-padding is set
  * [--toggle-hover-color] - Set a custom text color on hover state, while not pressed
  * [--toggle-hover-background] - Set a custom background color on hover state, while not pressed ; transparent by default
  * [--toggle-shadow] - Set a custom box shadow, none by default
@@ -40,11 +42,11 @@ export const toggleStyles = css `
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     font-size: var(--eun-font-size-s, 14px);
     font-weight: var(--eun-font-weight-m, 500);
-    text-transform: capitalize;
     color: var(--toggle-color, var(--eun-color-grey-600, #666e8a));
     padding: var(
       --toggle-padding,
-      calc(var(--eun-space-xs, 4px) * 1.5) var(--eun-space-m, 16px)
+      var(--toggle-padding-block, calc(var(--eun-space-xs, 4px) * 1.5))
+        var(--toggle-padding-inline, var(--eun-space-m, 16px))
     );
     outline: 2px solid transparent;
     border-radius: var(--toggle-border-radius, var(--eun-border-radius-m, 8px));
@@ -53,10 +55,11 @@ export const toggleStyles = css `
       var(--toggle-border-color, var(--eun-color-grey-300, #dee0e7));
     box-shadow: var(--_boxShadow);
     transition:
-      background-color 0.2s ease-out,
-      color 0.2s ease-out,
-      border-color 0.2s ease-out,
-      box-shadow 0.2s ease-out;
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out),
+      color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      border-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      box-shadow var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
   :host(:not([disabled]):hover) #toggle {
     box-shadow: var(--_boxShadow-hover);
@@ -74,8 +77,9 @@ export const toggleStyles = css `
     outline-color: var(--eun-color-primary-500, #3d6fff);
     outline-offset: 2px;
     transition:
-      outline-color 0.2s ease-out,
-      outline-offset 0.2s ease-out;
+      outline-color var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      outline-offset var(--eun-duration-m, 200ms)
+        var(--eun-easing-out, ease-out);
   }
   :host([disabled]) #toggle {
     cursor: not-allowed;

package/dist/components/alert/alert/alert.d.ts

@@ -54,6 +54,8 @@ type AlertAppearance = EunomiaDisplayAppearance;
  * @cssprop [--alert-content-color] - Sets the color of the description and action content, independently of the heading and icon color
  * @cssprop [--alert-border-radius] - Sets the corner radius of the alert
  * @cssprop [--alert-padding] - Sets the padding of the alert
+ * @cssprop [--alert-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --alert-padding is set
+ * @cssprop [--alert-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --alert-padding is set
  * @cssprop [--alert-gap] - Sets the gap between the icon column and the heading and content column
  * @cssprop [--alert-row-gap] - Sets the gap between the heading, description, and action rows
  * @cssprop [--alert-focus-outline-color] - Sets the focus outline color of the close button

package/dist/components/alert/alert/alert.js

@@ -57,6 +57,8 @@ export const EunomiaAlertTagName = "eun-alert";
  * @cssprop [--alert-content-color] - Sets the color of the description and action content, independently of the heading and icon color
  * @cssprop [--alert-border-radius] - Sets the corner radius of the alert
  * @cssprop [--alert-padding] - Sets the padding of the alert
+ * @cssprop [--alert-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --alert-padding is set
+ * @cssprop [--alert-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --alert-padding is set
  * @cssprop [--alert-gap] - Sets the gap between the icon column and the heading and content column
  * @cssprop [--alert-row-gap] - Sets the gap between the heading, description, and action rows
  * @cssprop [--alert-focus-outline-color] - Sets the focus outline color of the close button

package/dist/components/alert/alert/alert.styles.js

@@ -11,6 +11,8 @@ import { css } from "lit";
  * [--alert-content-color] - Set a custom color for the description/action content, independent of the heading/icon color
  * [--alert-border-radius] - Set a custom border radius
  * [--alert-padding] - Set a custom padding
+ * [--alert-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --alert-padding is set
+ * [--alert-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --alert-padding is set
  * [--alert-gap] - Set a custom gap between the icon column and the heading/content column
  * [--alert-row-gap] - Set a custom gap between the heading, description, and action rows
  * [--alert-focus-outline-color] - Set a custom focus outline color for the close button
@@ -30,25 +32,25 @@ const base = css `
     --_titleColor: var(--eun-text-color, #071621);
   }
   :host([severity="info"]) {
-    --_background: var(--eun-color-info-30, #f0f7fa);
+    --_background: var(--eun-color-info-alpha-5, #097faf0d);
     --_backgroundFilled: var(--eun-color-info-100, #097faf);
     --_borderColor: var(--eun-color-info-100, #097faf);
     --_titleColor: var(--eun-color-info-100, #097faf);
   }
   :host([severity="success"]) {
-    --_background: var(--eun-color-success-30, #f1f9f4);
+    --_background: var(--eun-color-success-alpha-5, #1a99480d);
     --_backgroundFilled: var(--eun-color-success-100, #1a9948);
     --_borderColor: var(--eun-color-success-100, #1a9948);
     --_titleColor: var(--eun-color-success-100, #1a9948);
   }
   :host([severity="warning"]) {
-    --_background: var(--eun-color-warning-30, #fcf5f0);
+    --_background: var(--eun-color-warning-alpha-5, #c852070d);
     --_backgroundFilled: var(--eun-color-warning-100, #c85207);
     --_borderColor: var(--eun-color-warning-100, #c85207);
     --_titleColor: var(--eun-color-warning-100, #c85207);
   }
   :host([severity="critical"]) {
-    --_background: var(--eun-color-critical-30, #faf0f1);
+    --_background: var(--eun-color-critical-alpha-5, #aa00140d);
     --_backgroundFilled: var(--eun-color-critical-100, #aa0014);
     --_borderColor: var(--eun-color-critical-100, #aa0014);
     --_titleColor: var(--eun-color-critical-100, #aa0014);
@@ -71,14 +73,18 @@ const base = css `
     width: 100%;
     box-sizing: border-box;
     --_bw: var(--alert-border-width, var(--eun-border-width-s, 1px));
-    /* Every appearance carries the same border box (transparent unless
-       drawn), taken out of the padding, so switching appearance or adding a
-       --alert-border-* never changes the size. */
     border: var(--_bw) solid
       var(--alert-border-color, var(--_frame, transparent));
     padding: var(
       --alert-padding,
-      max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+      var(
+          --alert-padding-block,
+          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+        )
+        var(
+          --alert-padding-inline,
+          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+        )
     );
     border-radius: var(--alert-border-radius, var(--eun-border-radius-m, 8px));
     font-size: var(--eun-font-size-s, 14px);
@@ -94,10 +100,11 @@ const base = css `
 
   :host([appearance="default"]) #alert {
     background: linear-gradient(
-      to right,
-      var(--alert-border-color, var(--_borderColor)) 4px,
-      var(--alert-background-color, var(--_background)) 4px
-    );
+        to right,
+        var(--alert-border-color, var(--_borderColor)) 4px,
+        var(--alert-background-color, var(--_background)) 4px
+      )
+      border-box;
   }
   :host([appearance="flat"]) #alert {
     background: var(--alert-background-color, var(--_background));
@@ -189,7 +196,10 @@ const base = css `
     padding-right: calc(
       var(
           --alert-padding,
-          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+          var(
+            --alert-padding-inline,
+            max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+          )
         ) +
         var(--eun-space-l, 32px)
     );

package/dist/components/alert/drawer/drawer.d.ts

@@ -47,8 +47,10 @@ declare const EunomiaDrawer_base: import("../../../utils/constructor.type.js").C
  * @cssprop [--drawer-width] - Sets the width of the drawer panel
  * @cssprop [--drawer-background] - Sets the background color of the drawer panel
  * @cssprop [--drawer-color] - Sets the text color of the drawer panel
- * @cssprop [--drawer-backdrop-color] - Sets the color of the backdrop behind the drawer
+ * @cssprop [--drawer-backdrop-color] - Sets the color of the backdrop behind the drawer, --eun-backdrop-color by default
  * @cssprop [--drawer-padding] - Sets the padding of the header, body, and footer
+ * @cssprop [--drawer-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --drawer-padding is set
+ * @cssprop [--drawer-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --drawer-padding is set
  * @cssprop [--drawer-gap] - Sets the gap inside the header and footer rows
  * @cssprop [--drawer-transition-duration] - Sets the duration of the slide transition
  * @element eun-drawer

package/dist/components/alert/drawer/drawer.js

@@ -55,8 +55,10 @@ export const EunomiaDrawerTagName = "eun-drawer";
  * @cssprop [--drawer-width] - Sets the width of the drawer panel
  * @cssprop [--drawer-background] - Sets the background color of the drawer panel
  * @cssprop [--drawer-color] - Sets the text color of the drawer panel
- * @cssprop [--drawer-backdrop-color] - Sets the color of the backdrop behind the drawer
+ * @cssprop [--drawer-backdrop-color] - Sets the color of the backdrop behind the drawer, --eun-backdrop-color by default
  * @cssprop [--drawer-padding] - Sets the padding of the header, body, and footer
+ * @cssprop [--drawer-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --drawer-padding is set
+ * @cssprop [--drawer-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --drawer-padding is set
  * @cssprop [--drawer-gap] - Sets the gap inside the header and footer rows
  * @cssprop [--drawer-transition-duration] - Sets the duration of the slide transition
  * @element eun-drawer
@@ -166,7 +168,7 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
                         }
                     },
                 });
-                this.updateComplete.then(() => this.focusInitialElement());
+                void this.updateComplete.then(() => this.focusInitialElement());
                 return;
             }
             this.closeDialogSurface();
@@ -424,7 +426,7 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
         heading=${this.confirmCloseHeading}
         cancel-label=${this.confirmCloseCancelLabel}
         confirm-label=${this.confirmCloseConfirmLabel}
-        confirm-variant="critical"
+        confirm-color="critical"
         @eunconfirm=${this.handleDiscardConfirmed}
         @euncancel=${this.stopDialogPropagation}
       >

package/dist/components/alert/drawer/drawer.styles.js

@@ -8,6 +8,8 @@ import { css } from "lit";
  * [--drawer-color] - Set a custom text color to the drawer panel (pair with --drawer-background for contrast)
  * [--drawer-backdrop-color] - Set a custom color to the backdrop behind the drawer
  * [--drawer-padding] - Set a custom padding to the header/body/footer
+ * [--drawer-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --drawer-padding is set
+ * [--drawer-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --drawer-padding is set
  * [--drawer-gap] - Set a custom gap inside the header/footer rows
  * [--drawer-transition-duration] - Set a custom duration for the slide transition
  */
@@ -16,9 +18,19 @@ const base = css `
     --_width: var(--drawer-width, min(420px, 100vw));
     --_background: var(--drawer-background, var(--eun-surface-color, #ffffff));
     --_color: var(--drawer-color, var(--eun-text-color, #071621));
-    --_padding: var(--drawer-padding, var(--eun-space-m, 16px));
+    --_paddingBlock: var(
+      --drawer-padding,
+      var(--drawer-padding-block, var(--eun-space-m, 16px))
+    );
+    --_paddingInline: var(
+      --drawer-padding,
+      var(--drawer-padding-inline, var(--eun-space-m, 16px))
+    );
     --_gap: var(--drawer-gap, var(--eun-space-m, 16px));
-    --_transitionDuration: var(--drawer-transition-duration, 0.25s);
+    --_transitionDuration: var(
+      --drawer-transition-duration,
+      var(--eun-duration-l, 250ms)
+    );
     --_offset: 1;
     display: contents;
   }
@@ -43,10 +55,14 @@ const base = css `
   }
   #surface::backdrop {
     background-color: rgba(7, 22, 33, 0);
-    transition: background-color var(--_transitionDuration) ease;
+    transition: background-color var(--_transitionDuration)
+      var(--eun-easing-default, ease);
   }
   #surface:popover-open::backdrop {
-    background-color: var(--drawer-backdrop-color, rgba(7, 22, 33, 0.45));
+    background-color: var(
+      --drawer-backdrop-color,
+      var(--eun-backdrop-color, rgba(7, 22, 33, 0.45))
+    );
   }
   @starting-style {
     #surface:popover-open::backdrop {
@@ -67,8 +83,8 @@ const base = css `
     opacity: 1;
     transform: translateX(0);
     transition:
-      opacity var(--_transitionDuration) ease,
-      transform var(--_transitionDuration) ease;
+      opacity var(--_transitionDuration) var(--eun-easing-default, ease),
+      transform var(--_transitionDuration) var(--eun-easing-default, ease);
   }
   #surface[closing] {
     opacity: 0;
@@ -101,7 +117,7 @@ const base = css `
     align-items: flex-start;
     justify-content: space-between;
     gap: var(--_gap);
-    padding: var(--_padding) var(--_padding) 0;
+    padding: var(--_paddingBlock) var(--_paddingInline) 0;
   }
   #heading {
     margin: 0;
@@ -116,7 +132,7 @@ const base = css `
     flex: 1;
     min-height: 0;
     overflow-y: auto;
-    padding: var(--_gap) var(--_padding);
+    padding: var(--_gap) var(--_paddingInline);
     font-size: var(--eun-font-size-s, 14px);
   }
   #footer {
@@ -124,7 +140,7 @@ const base = css `
     display: flex;
     justify-content: flex-end;
     gap: var(--eun-space-s, 8px);
-    padding: var(--_padding);
+    padding: var(--_paddingBlock) var(--_paddingInline);
   }
 
   #confirm-close-modal {

package/dist/components/alert/modal/modal.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues, TemplateResult } from "lit";
-import { ButtonVariant } from "../../../mixins/button.mixin.js";
-import { EunomiaModalConfirmVariant } from "../../../types/variant.type.js";
+import { ButtonColor } from "../../../mixins/button.mixin.js";
+import { EunomiaModalConfirmColor } from "../../../types/variant.type.js";
 /**
  * Tag name of the modal component.
  */
@@ -34,8 +34,8 @@ declare const EunomiaModal_base: import("../../../utils/constructor.type.js").Co
  * @prop {boolean} [closeable=true] - Shows the close button in the top right corner
  * @prop {string} [cancelLabel='Cancel'] - The label of the default cancel button
  * @prop {string} [confirmLabel='Confirm'] - The label of the default confirm button
- * @prop {'primary' | 'critical'} [confirmVariant='primary'] - The color theme of the default confirm button
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} cancelVariant - The color theme of the default cancel button. Left unset, it renders as a neutral gray ghost button
+ * @prop {'primary' | 'critical'} [confirmColor='primary'] - The color of the default confirm button
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} cancelColor - The color of the default cancel button. Left unset, it renders as a neutral gray ghost button
  * @prop {string} ariaLabelClose - The accessible label of the close button
  * @prop {string} [confirmCloseHeading='Discard changes?'] - The heading of the internal discard confirmation dialog
  * @attr {string} [confirm-close-heading='Discard changes?'] - The heading of the internal discard confirmation dialog
@@ -51,11 +51,13 @@ declare const EunomiaModal_base: import("../../../utils/constructor.type.js").Co
  * @cssprop [--modal-width] - Sets the width of the dialog panel
  * @cssprop [--modal-max-height] - Sets the maximum height of the dialog panel, defaulting to the viewport height minus a margin. The body scrolls internally once content exceeds it, while the heading, description, and actions stay fixed
  * @cssprop [--modal-padding] - Sets the padding of the dialog panel
+ * @cssprop [--modal-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --modal-padding is set
+ * @cssprop [--modal-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --modal-padding is set
  * @cssprop [--modal-gap] - Sets the gap between the heading, body, and actions blocks
  * @cssprop [--modal-border-radius] - Sets the corner radius of the dialog panel
  * @cssprop [--modal-background] - Sets the background color of the dialog panel
  * @cssprop [--modal-header-border] - Sets the border between the heading and description and the body, or none to remove it. Only visible when heading or description is set
- * @cssprop [--modal-backdrop-color] - Sets the color of the backdrop behind the dialog panel
+ * @cssprop [--modal-backdrop-color] - Sets the color of the backdrop behind the dialog panel, --eun-backdrop-color by default
  * @cssprop [--modal-backdrop-blur] - Sets the blur radius applied behind the backdrop. None by default
  * @cssprop [--modal-search-top] - For the search kind only, sets the fixed distance from the top of the viewport to the dialog, since a search dialog never vertically centers and its top edge shouldn't drift as content grows or shrinks
  * @element eun-modal
@@ -122,16 +124,16 @@ export declare class EunomiaModal extends EunomiaModal_base {
      */
     confirmLabel: string;
     /**
-     * Variant of the default confirm button.
+     * Color of the default confirm button.
      * @default primary
      */
-    confirmVariant: EunomiaModalConfirmVariant;
+    confirmColor: EunomiaModalConfirmColor;
     /**
-     * Variant of the default cancel button. Left unset, it renders as a
+     * Color of the default cancel button. Left unset, it renders as a
      * neutral gray ghost button; set it to color it like any other button
      * instead.
      */
-    cancelVariant?: ButtonVariant;
+    cancelColor?: ButtonColor;
     /**
      * Aria label of the close (X) button.
      * @default Close

package/dist/components/alert/modal/modal.js

@@ -45,8 +45,8 @@ export const EunomiaModalTagName = "eun-modal";
  * @prop {boolean} [closeable=true] - Shows the close button in the top right corner
  * @prop {string} [cancelLabel='Cancel'] - The label of the default cancel button
  * @prop {string} [confirmLabel='Confirm'] - The label of the default confirm button
- * @prop {'primary' | 'critical'} [confirmVariant='primary'] - The color theme of the default confirm button
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} cancelVariant - The color theme of the default cancel button. Left unset, it renders as a neutral gray ghost button
+ * @prop {'primary' | 'critical'} [confirmColor='primary'] - The color of the default confirm button
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} cancelColor - The color of the default cancel button. Left unset, it renders as a neutral gray ghost button
  * @prop {string} ariaLabelClose - The accessible label of the close button
  * @prop {string} [confirmCloseHeading='Discard changes?'] - The heading of the internal discard confirmation dialog
  * @attr {string} [confirm-close-heading='Discard changes?'] - The heading of the internal discard confirmation dialog
@@ -62,11 +62,13 @@ export const EunomiaModalTagName = "eun-modal";
  * @cssprop [--modal-width] - Sets the width of the dialog panel
  * @cssprop [--modal-max-height] - Sets the maximum height of the dialog panel, defaulting to the viewport height minus a margin. The body scrolls internally once content exceeds it, while the heading, description, and actions stay fixed
  * @cssprop [--modal-padding] - Sets the padding of the dialog panel
+ * @cssprop [--modal-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --modal-padding is set
+ * @cssprop [--modal-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --modal-padding is set
  * @cssprop [--modal-gap] - Sets the gap between the heading, body, and actions blocks
  * @cssprop [--modal-border-radius] - Sets the corner radius of the dialog panel
  * @cssprop [--modal-background] - Sets the background color of the dialog panel
  * @cssprop [--modal-header-border] - Sets the border between the heading and description and the body, or none to remove it. Only visible when heading or description is set
- * @cssprop [--modal-backdrop-color] - Sets the color of the backdrop behind the dialog panel
+ * @cssprop [--modal-backdrop-color] - Sets the color of the backdrop behind the dialog panel, --eun-backdrop-color by default
  * @cssprop [--modal-backdrop-blur] - Sets the blur radius applied behind the backdrop. None by default
  * @cssprop [--modal-search-top] - For the search kind only, sets the fixed distance from the top of the viewport to the dialog, since a search dialog never vertically centers and its top edge shouldn't drift as content grows or shrinks
  * @element eun-modal
@@ -120,10 +122,10 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
          */
         this.confirmLabel = "Confirm";
         /**
-         * Variant of the default confirm button.
+         * Color of the default confirm button.
          * @default primary
          */
-        this.confirmVariant = "primary";
+        this.confirmColor = "primary";
         /**
          * Aria label of the close (X) button.
          * @default Close
@@ -212,7 +214,7 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
                         }
                     },
                 });
-                this.updateComplete.then(() => this.focusInitialElement());
+                void this.updateComplete.then(() => this.focusInitialElement());
                 return;
             }
             this.closeDialogSurface();
@@ -412,7 +414,7 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
         heading=${this.confirmCloseHeading}
         cancel-label=${this.confirmCloseCancelLabel}
         confirm-label=${this.confirmCloseConfirmLabel}
-        confirm-variant="critical"
+        confirm-color="critical"
         @eunconfirm=${this.handleDiscardConfirmed}
         @euncancel=${this.stopDialogPropagation}
       >
@@ -465,12 +467,12 @@ let EunomiaModal = class EunomiaModal extends DialogSurfaceMixin(LitElement) {
                   <eun-button
                     id="cancel-button"
                     appearance="ghost"
-                    variant=${ifDefined(this.cancelVariant)}
+                    color=${ifDefined(this.cancelColor)}
                     @click=${() => this.requestClose()}
                     >${this.cancelLabel}</eun-button
                   >
                   <eun-button
-                    variant=${this.confirmVariant}
+                    color=${this.confirmColor}
                     @click=${() => this.confirm()}
                     >${this.confirmLabel}</eun-button
                   >
@@ -521,11 +523,11 @@ __decorate([
     property({ attribute: "confirm-label" })
 ], EunomiaModal.prototype, "confirmLabel", void 0);
 __decorate([
-    property({ attribute: "confirm-variant" })
-], EunomiaModal.prototype, "confirmVariant", void 0);
+    property({ attribute: "confirm-color" })
+], EunomiaModal.prototype, "confirmColor", void 0);
 __decorate([
-    property({ attribute: "cancel-variant" })
-], EunomiaModal.prototype, "cancelVariant", void 0);
+    property({ attribute: "cancel-color" })
+], EunomiaModal.prototype, "cancelColor", void 0);
 __decorate([
     property({ attribute: "aria-label-close" })
 ], EunomiaModal.prototype, "ariaLabelClose", void 0);

package/dist/components/alert/modal/modal.styles.js

@@ -6,6 +6,8 @@ import { css } from "lit";
  * [--modal-width] - Set a custom width to the dialog panel
  * [--modal-max-height] - Set a custom max-height to the dialog panel (defaults to the viewport height minus a margin)
  * [--modal-padding] - Set a custom padding to the dialog panel
+ * [--modal-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --modal-padding is set
+ * [--modal-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --modal-padding is set
  * [--modal-gap] - Set a custom gap between the heading/body/actions blocks
  * [--modal-border-radius] - Set a custom border radius to the dialog panel
  * [--modal-background] - Set a custom background color to the dialog panel
@@ -32,8 +34,10 @@ const base = css `
     );
     padding: var(
       --modal-padding,
-      var(--eun-space-l, 32px) var(--eun-space-m, 16px) var(--eun-space-m, 16px)
-        var(--eun-space-l, 32px)
+      var(--modal-padding-block, var(--eun-space-l, 32px))
+        var(--modal-padding-inline, var(--eun-space-m, 16px))
+        var(--modal-padding-block, var(--eun-space-m, 16px))
+        var(--modal-padding-inline, var(--eun-space-l, 32px))
     );
     box-sizing: border-box;
     display: flex;
@@ -55,8 +59,8 @@ const base = css `
     opacity: 0;
     transform: scale(0.96);
     transition:
-      opacity 0.18s ease,
-      transform 0.18s ease;
+      opacity var(--eun-duration-m, 200ms) var(--eun-easing-default, ease),
+      transform var(--eun-duration-m, 200ms) var(--eun-easing-default, ease);
   }
   #surface:popover-open {
     visibility: visible;
@@ -83,12 +87,17 @@ const base = css `
     background-color: rgba(7, 22, 33, 0);
     backdrop-filter: blur(0px);
     transition:
-      background-color 0.18s ease,
-      backdrop-filter 0.18s ease;
+      background-color var(--eun-duration-m, 200ms)
+        var(--eun-easing-default, ease),
+      backdrop-filter var(--eun-duration-m, 200ms)
+        var(--eun-easing-default, ease);
   }
   #surface:popover-open::backdrop {
     pointer-events: auto;
-    background-color: var(--modal-backdrop-color, rgba(7, 22, 33, 0.45));
+    background-color: var(
+      --modal-backdrop-color,
+      var(--eun-backdrop-color, rgba(7, 22, 33, 0.45))
+    );
     backdrop-filter: blur(var(--modal-backdrop-blur, 0px));
   }
   @starting-style {

package/dist/components/alert/toast/toast.d.ts

@@ -82,6 +82,8 @@ export type EunomiaToastSlide = "vertical" | "horizontal";
  * @cssprop [--toast-content-color] - Sets the color of the description and action content, independently of the heading and icon color
  * @cssprop [--toast-border-radius] - Sets the corner radius of the toast
  * @cssprop [--toast-padding] - Sets the padding of the toast
+ * @cssprop [--toast-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toast-padding is set
+ * @cssprop [--toast-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toast-padding is set
  * @cssprop [--toast-gap] - Sets the gap between the icon column and the heading and content column
  * @cssprop [--toast-row-gap] - Sets the gap between the heading, description, and action rows
  * @cssprop [--toast-shadow] - Sets the shadow of the toast

package/dist/components/alert/toast/toast.js

@@ -81,6 +81,8 @@ const EXIT_FALLBACK_MS = 600;
  * @cssprop [--toast-content-color] - Sets the color of the description and action content, independently of the heading and icon color
  * @cssprop [--toast-border-radius] - Sets the corner radius of the toast
  * @cssprop [--toast-padding] - Sets the padding of the toast
+ * @cssprop [--toast-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toast-padding is set
+ * @cssprop [--toast-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toast-padding is set
  * @cssprop [--toast-gap] - Sets the gap between the icon column and the heading and content column
  * @cssprop [--toast-row-gap] - Sets the gap between the heading, description, and action rows
  * @cssprop [--toast-shadow] - Sets the shadow of the toast