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

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

@@ -11,6 +11,8 @@ import { css } from "lit";
  * [--toggle-group-border-radius] - Set a custom border radius for the track and its options
  * [--toggle-group-gap] - Set a custom gap between the options
  * [--toggle-group-padding] - Set a custom padding for the track ; also used as the indicator's inset, so it stays flush with the track's edge. Ignored once `appearance` isn't `default`
+ * [--toggle-group-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
+ * [--toggle-group-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
  * [--toggle-group-hover-color] - Set a custom text color on hover state, for an unselected option, for every appearance
  * [--toggle-group-hover-background] - Set a custom background color on hover state, for an unselected option ; transparent by default. Applies regardless of `appearance`
  * [--toggle-group-box-shadow] - Set a custom box shadow on the track itself, for every appearance, none by default
@@ -31,11 +33,21 @@ export const toggleGroupStyles = css `
       --toggle-group-arrows-color,
       var(--eun-surface-color, #ffffff)
     );
+    --_trackPaddingBlock: var(
+      --toggle-group-padding,
+      var(--toggle-group-padding-block, 4px)
+    );
+    --_trackPaddingInline: var(
+      --toggle-group-padding,
+      var(--toggle-group-padding-inline, 4px)
+    );
+    --_focusRoom: 0px;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     font-size: var(--eun-font-size-s, 14px);
   }
   :host([appearance="outline"]),
   :host([appearance="flat"]) {
+    --_focusRoom: 4px;
     --_arrowsColor: var(
       --toggle-group-arrows-color,
       var(--eun-surface-color, #ffffff)
@@ -61,7 +73,7 @@ export const toggleGroupStyles = css `
     display: inline-flex;
     max-width: 100%;
     gap: var(--toggle-group-gap, var(--eun-space-xs, 4px));
-    padding: var(--toggle-group-padding, 4px);
+    padding: var(--_trackPaddingBlock) var(--_trackPaddingInline);
     border-radius: var(
       --toggle-group-border-radius,
       var(--eun-border-radius-m, 8px)
@@ -91,13 +103,19 @@ export const toggleGroupStyles = css `
   }
   :host([appearance="outline"]) #scrollable,
   :host([appearance="flat"]) #scrollable {
-    padding: 0;
+    padding: var(--_focusRoom);
+    margin: calc(-1 * var(--_focusRoom));
+    max-width: calc(100% + 2 * var(--_focusRoom));
     background: var(--toggle-group-background, transparent);
     border: none;
   }
+  :host([full][appearance="outline"]) #scrollable,
+  :host([full][appearance="flat"]) #scrollable {
+    width: calc(100% + 2 * var(--_focusRoom));
+  }
   #arrows {
     position: absolute;
-    inset: 0;
+    inset: calc(-1 * var(--_focusRoom));
     z-index: 2;
     pointer-events: none;
   }
@@ -108,7 +126,8 @@ export const toggleGroupStyles = css `
     opacity: 0;
     min-width: 24px;
     pointer-events: none;
-    transition: opacity 0.2s ease;
+    transition: opacity var(--eun-duration-m, 200ms)
+      var(--eun-easing-default, ease);
     display: flex;
     align-items: center;
   }
@@ -153,8 +172,8 @@ export const toggleGroupStyles = css `
   }
   #indicator {
     position: absolute;
-    top: var(--toggle-group-padding, 4px);
-    bottom: var(--toggle-group-padding, 4px);
+    top: var(--_trackPaddingBlock);
+    bottom: var(--_trackPaddingBlock);
     left: 0;
     width: 0;
     opacity: 0;
@@ -171,13 +190,14 @@ export const toggleGroupStyles = css `
       var(--eun-shadow-xs, rgba(7, 22, 33, 0.08) 0 1px 2px)
     );
     transition:
-      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-      width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
-      opacity 0.15s ease-out;
+      transform var(--eun-duration-l, 250ms) cubic-bezier(0.4, 0, 0.2, 1),
+      width var(--eun-duration-l, 250ms) cubic-bezier(0.4, 0, 0.2, 1),
+      opacity var(--eun-duration-s, 150ms) var(--eun-easing-out, ease-out);
   }
   @media (prefers-reduced-motion: reduce) {
     #indicator {
-      transition: opacity 0.15s ease-out;
+      transition: opacity var(--eun-duration-s, 150ms)
+        var(--eun-easing-out, ease-out);
     }
   }
   button {
@@ -189,7 +209,7 @@ export const toggleGroupStyles = css `
     --_boxShadow: var(--toggle-group-shadow, none);
     --_boxShadow-hover: var(--toggle-group-shadow-hover, var(--_boxShadow));
     --_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)
@@ -207,7 +227,6 @@ export const toggleGroupStyles = css `
     flex-shrink: 0;
     gap: var(--eun-space-xs, 4px);
     font: inherit;
-    text-transform: capitalize;
     white-space: nowrap;
     cursor: pointer;
     border: none;
@@ -222,9 +241,10 @@ export const toggleGroupStyles = css `
     box-shadow: var(--_boxShadow);
     transition: var(
       --_toggleTransition,
-      background-color 0.2s ease-out,
-      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),
+      box-shadow var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out)
     );
   }
   :host([full]) button,
@@ -245,8 +265,9 @@ export const toggleGroupStyles = 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);
   }
   button[disabled] {
     cursor: not-allowed;
@@ -276,19 +297,19 @@ export const toggleGroupStyles = css `
 
   button[data-color="secondary"] {
     --_variantColorDefault: var(--eun-color-secondary-500, #e5a030);
-    --_variantTintDefault: var(--eun-color-secondary-transparent, #e5a03033);
+    --_variantTintDefault: var(--eun-color-secondary-alpha-20, #edbd6f33);
   }
   button[data-color="critical"] {
     --_variantColorDefault: var(--eun-color-critical-100, #aa0014);
-    --_variantTintDefault: var(--eun-color-critical-30, #faf0f1);
+    --_variantTintDefault: var(--eun-color-critical-alpha-5, #aa00140d);
   }
   button[data-color="success"] {
     --_variantColorDefault: var(--eun-color-success-100, #1a9948);
-    --_variantTintDefault: var(--eun-color-success-30, #f1f9f4);
+    --_variantTintDefault: var(--eun-color-success-alpha-5, #1a99480d);
   }
   button[data-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"]) button,
   :host([appearance="flat"]) button {

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));
@@ -43,9 +42,10 @@ export const toggleItemStyles = css `
     box-shadow: var(--_boxShadow);
     transition: var(
       --_toggleTransition,
-      background-color 0.2s ease-out,
-      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),
+      box-shadow var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out)
     );
   }
   :host(:not([disabled]):hover) #item {
@@ -59,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;
@@ -85,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)
@@ -99,19 +100,19 @@ export const toggleItemStyles = css `
   }
   :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([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([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([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();

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

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

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

@@ -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
@@ -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();

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