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

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

@@ -33,20 +33,64 @@ export const toggleGroupStyles = css `
       --toggle-group-arrows-color,
       var(--eun-surface-color, #ffffff)
     );
+    --_toggleDefaultRadius: var(--eun-border-radius-m, 8px);
+    --_toggleRadius: var(
+      --toggle-group-border-radius,
+      var(--_toggleDefaultRadius)
+    );
+    --_toggleFontSize: var(--eun-font-size-s, 14px);
+    --_toggleButtonPaddingBlock: var(--eun-space-s, 8px);
+    --_toggleOptionPaddingInline: calc(var(--eun-space-l, 32px) / 2);
+    --_toggleLineHeight: 1rem;
     --_trackPaddingBlock: var(
       --toggle-group-padding,
-      var(--toggle-group-padding-block, 4px)
+      var(
+        --toggle-group-padding-block,
+        calc(var(--_toggleButtonPaddingBlock) / 2)
+      )
     );
     --_trackPaddingInline: var(
       --toggle-group-padding,
       var(--toggle-group-padding-inline, 4px)
     );
+    --_toggleOptionPaddingBlock: max(
+      0px,
+      calc(var(--_toggleButtonPaddingBlock) - var(--_trackPaddingBlock))
+    );
     --_focusRoom: 0px;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-font-size-s, 14px);
+    font-size: var(--_toggleFontSize);
+  }
+  :host([rounded]) {
+    --_toggleDefaultRadius: var(--eun-border-radius-xl, 999px);
+  }
+  :host([size="xs"]) {
+    --_toggleFontSize: var(--eun-font-size-xs, 10px);
+    --_toggleButtonPaddingBlock: var(--eun-space-xxs, 1.6px);
+    --_toggleOptionPaddingInline: var(--eun-space-xs, 4px);
+    --_toggleLineHeight: 10px;
+  }
+  :host([size="s"]) {
+    --_toggleFontSize: var(--eun-font-size-xs, 10px);
+    --_toggleButtonPaddingBlock: calc(var(--eun-space-s, 8px) / 2);
+    --_toggleOptionPaddingInline: var(--eun-space-s, 8px);
+    --_toggleLineHeight: 10px;
+  }
+  :host([size="l"]) {
+    --_toggleFontSize: var(--eun-font-size-m, 16px);
+    --_toggleButtonPaddingBlock: calc(var(--eun-space-s, 8px) * 1.25);
+    --_toggleOptionPaddingInline: calc(var(--eun-space-m, 16px) * 1.25);
+    --_toggleLineHeight: 1.1rem;
+  }
+  :host([size="xl"]) {
+    --_toggleFontSize: var(--eun-font-size-l, 1.3rem);
+    --_toggleButtonPaddingBlock: calc(var(--eun-space-s, 8px) * 1.5);
+    --_toggleOptionPaddingInline: calc(var(--eun-space-m, 16px) * 1.5);
+    --_toggleLineHeight: 1.3rem;
   }
   :host([appearance="outline"]),
   :host([appearance="flat"]) {
+    --_toggleOptionPaddingBlock: var(--_toggleButtonPaddingBlock);
     --_focusRoom: 4px;
     --_arrowsColor: var(
       --toggle-group-arrows-color,
@@ -74,10 +118,7 @@ export const toggleGroupStyles = css `
     max-width: 100%;
     gap: var(--toggle-group-gap, var(--eun-space-xs, 4px));
     padding: var(--_trackPaddingBlock) var(--_trackPaddingInline);
-    border-radius: var(
-      --toggle-group-border-radius,
-      var(--eun-border-radius-m, 8px)
-    );
+    border-radius: var(--_toggleRadius);
     background: var(
       --toggle-group-background,
       var(--eun-surface-sunken, #f7f8fa)
@@ -178,9 +219,7 @@ export const toggleGroupStyles = css `
     width: 0;
     opacity: 0;
     z-index: 0;
-    border-radius: calc(
-      var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
-    );
+    border-radius: calc(var(--_toggleRadius) - 3px);
     background: var(
       --toggle-group-active-background,
       var(--eun-color-primary-500, #3d6fff)
@@ -232,12 +271,12 @@ export const toggleGroupStyles = css `
     border: none;
     background: transparent;
     color: var(--toggle-group-color, var(--eun-color-grey-600, #666e8a));
-    padding: calc(var(--eun-space-xs, 4px) * 1.5) var(--eun-space-m, 16px);
+    --icon-size: var(--_toggleLineHeight);
+    padding: var(--_toggleOptionPaddingBlock) var(--_toggleOptionPaddingInline);
+    line-height: var(--_toggleLineHeight);
     font-weight: var(--eun-font-weight-m, 500);
     outline: 2px solid transparent;
-    border-radius: calc(
-      var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
-    );
+    border-radius: calc(var(--_toggleRadius) - 3px);
     box-shadow: var(--_boxShadow);
     transition: var(
       --_toggleTransition,
@@ -272,13 +311,15 @@ export const toggleGroupStyles = css `
   button[disabled] {
     cursor: not-allowed;
   }
-  :host([appearance="default"]) #scrollable:has(#indicator) button.active {
+  :host(:is([appearance="default"], :not([appearance])))
+    #scrollable:has(#indicator)
+    button.active {
     color: var(
       --toggle-group-active-color,
       var(--eun-color-on-primary-500, #ffffff)
     );
   }
-  :host([appearance="default"])
+  :host(:is([appearance="default"], :not([appearance])))
     #scrollable:not(:has(#indicator))
     button.active {
     background: var(
@@ -292,7 +333,7 @@ export const toggleGroupStyles = css `
   }
   button.icon-only {
     justify-content: center;
-    padding: 6px;
+    padding: var(--_toggleOptionPaddingBlock);
   }
 
   button[data-color="secondary"] {
@@ -313,10 +354,7 @@ export const toggleGroupStyles = css `
   }
   :host([appearance="outline"]) button,
   :host([appearance="flat"]) button {
-    border-radius: var(
-      --toggle-group-border-radius,
-      var(--eun-border-radius-m, 8px)
-    );
+    border-radius: var(--_toggleRadius);
   }
   :host([appearance="outline"]) button {
     border: var(--eun-border-width-s, 1px) solid

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

@@ -105,9 +105,7 @@ let EunomiaToggleItem = class EunomiaToggleItem extends DisabledMixin(LitElement
         return html `
       <div id="item" part="item">
         <slot name="icon">
-          ${this.icon
-            ? html `<eun-icon name=${this.icon} size="16"></eun-icon>`
-            : nothing}
+          ${this.icon ? html `<eun-icon name=${this.icon}></eun-icon>` : nothing}
         </slot>
         <slot></slot>
       </div>

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

@@ -28,15 +28,18 @@ export const toggleItemStyles = css `
     display: inline-flex;
     align-items: center;
     gap: var(--eun-space-xs, 4px);
+    --icon-size: var(--_toggleLineHeight, 1rem);
     font-family: var(--eun-font-family, "Mulish", sans-serif);
-    font-size: var(--eun-font-size-s, 14px);
+    font-size: var(--_toggleFontSize, var(--eun-font-size-s, 14px));
+    line-height: var(--_toggleLineHeight, 1rem);
     font-weight: var(--eun-font-weight-m, 500);
     white-space: nowrap;
     cursor: pointer;
     color: var(--toggle-group-color, var(--eun-color-grey-600, #666e8a));
-    padding: 6px 14px;
+    padding: var(--_toggleOptionPaddingBlock, calc(var(--eun-space-s, 8px) / 2))
+      var(--_toggleOptionPaddingInline, calc(var(--eun-space-l, 32px) / 2));
     border-radius: calc(
-      var(--toggle-group-border-radius, var(--eun-border-radius-m, 8px)) - 3px
+      var(--_toggleRadius, var(--eun-border-radius-m, 8px)) - 3px
     );
     outline: 2px solid transparent;
     box-shadow: var(--_boxShadow);
@@ -116,10 +119,7 @@ export const toggleItemStyles = css `
   }
   :host([appearance="outline"]) #item,
   :host([appearance="flat"]) #item {
-    border-radius: var(
-      --toggle-group-border-radius,
-      var(--eun-border-radius-m, 8px)
-    );
+    border-radius: var(--_toggleRadius, var(--eun-border-radius-m, 8px));
   }
   :host([appearance="outline"]) #item {
     border: var(--eun-border-width-s, 1px) solid

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

@@ -161,7 +161,7 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaToggle.prototype, "swap", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaToggle.prototype, "appearance", void 0);
 EunomiaToggle = __decorate([
     customElement(EunomiaToggleTagName)

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

@@ -13,6 +13,7 @@ type AlertSeverity = EunomiaSeverity;
  * All available alert surface treatments.
  */
 type AlertAppearance = EunomiaDisplayAppearance;
+declare const EunomiaAlert_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * An inline banner that relays information to the user without
  * interrupting their current task, such as a form submission result, a
@@ -44,8 +45,8 @@ type AlertAppearance = EunomiaDisplayAppearance;
  * @prop {string} [richText] - Lightweight formatted content rendered above the description slot, combining with it. Supports simple lists, links, bold, and italic text
  * @attr {string} [rich-text] - Lightweight formatted content rendered above the description slot
  * @prop {boolean} [closeable=false] - Shows a close button. Clicking it fires the close event without changing the alert's own rendering
- * @prop {string} [ariaLabelClose='Close'] - The accessible label of the close button
- * @attr {string} [aria-label-close='Close'] - The accessible label of the close button
+ * @prop {string} [closeLabel] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
+ * @attr {string} [close-label] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
  * @cssprop [--alert-background-color] - Sets the background color, for every appearance and severity
  * @cssprop [--alert-border-color] - Sets the border color, for every appearance and severity: the leading accent of the default appearance, and the border of every other one
  * @cssprop [--alert-border-width] - Sets the border width, for every appearance. The border takes room out of the padding, so it keeps its size
@@ -58,10 +59,10 @@ type AlertAppearance = EunomiaDisplayAppearance;
  * @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
+ * @cssprop [--alert-focus-outline-color] - Sets the focus outline color of the close button, and of the alert itself when it's given focus
  * @element eun-alert
  */
-export declare class EunomiaAlert extends LitElement {
+export declare class EunomiaAlert extends EunomiaAlert_base {
     /**
      * Styles to import to the component.
      *
@@ -75,7 +76,8 @@ export declare class EunomiaAlert extends LitElement {
      */
     severity?: AlertSeverity;
     /**
-     * The surface treatment of the alert.
+     * The surface treatment of the alert. The default isn't reflected, so an
+     * SSR framework doesn't see an attribute it never rendered.
      * @default default
      */
     appearance: AlertAppearance;
@@ -108,9 +110,9 @@ export declare class EunomiaAlert extends LitElement {
     closeable: boolean;
     /**
      * Accessible label of the close button.
-     * @default Close
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelClose: string;
+    closeLabel?: string;
     /**
      * Elements assigned to the `description` slot, if any ; queried live so
      * {@link render} can decide whether the description row should render at

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

@@ -12,6 +12,7 @@ import { CloseEvent } from "../../../events/close.event.js";
 import { formatRichText } from "../../../utils/rich-text.utils.js";
 import { resolveIcon } from "../../../utils/severity-icon.utils.js";
 import { alertStyles } from "./alert.styles.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the alert component.
  */
@@ -47,8 +48,8 @@ export const EunomiaAlertTagName = "eun-alert";
  * @prop {string} [richText] - Lightweight formatted content rendered above the description slot, combining with it. Supports simple lists, links, bold, and italic text
  * @attr {string} [rich-text] - Lightweight formatted content rendered above the description slot
  * @prop {boolean} [closeable=false] - Shows a close button. Clicking it fires the close event without changing the alert's own rendering
- * @prop {string} [ariaLabelClose='Close'] - The accessible label of the close button
- * @attr {string} [aria-label-close='Close'] - The accessible label of the close button
+ * @prop {string} [closeLabel] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
+ * @attr {string} [close-label] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
  * @cssprop [--alert-background-color] - Sets the background color, for every appearance and severity
  * @cssprop [--alert-border-color] - Sets the border color, for every appearance and severity: the leading accent of the default appearance, and the border of every other one
  * @cssprop [--alert-border-width] - Sets the border width, for every appearance. The border takes room out of the padding, so it keeps its size
@@ -61,14 +62,15 @@ export const EunomiaAlertTagName = "eun-alert";
  * @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
+ * @cssprop [--alert-focus-outline-color] - Sets the focus outline color of the close button, and of the alert itself when it's given focus
  * @element eun-alert
  */
-let EunomiaAlert = class EunomiaAlert extends LitElement {
+let EunomiaAlert = class EunomiaAlert extends LocalizableMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
-         * The surface treatment of the alert.
+         * The surface treatment of the alert. The default isn't reflected, so an
+         * SSR framework doesn't see an attribute it never rendered.
          * @default default
          */
         this.appearance = "default";
@@ -83,11 +85,6 @@ let EunomiaAlert = class EunomiaAlert extends LitElement {
          * @default false
          */
         this.closeable = false;
-        /**
-         * Accessible label of the close button.
-         * @default Close
-         */
-        this.ariaLabelClose = "Close";
         /**
          * Re-renders when a named slot's assigned content changes, so the
          * description/action rows correctly appear/disappear as content is slotted
@@ -179,7 +176,7 @@ let EunomiaAlert = class EunomiaAlert extends LitElement {
                 appearance="ghost"
                 rounded
                 size="xs"
-                aria-label=${this.ariaLabelClose}
+                aria-label=${this.closeLabel ?? this.dictionary.common.close}
                 @click=${this.handleClose}
               >
                 <eun-icon name="close" size="16"></eun-icon>
@@ -235,7 +232,7 @@ __decorate([
     property({ reflect: true })
 ], EunomiaAlert.prototype, "severity", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaAlert.prototype, "appearance", void 0);
 __decorate([
     property()
@@ -253,8 +250,8 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaAlert.prototype, "closeable", void 0);
 __decorate([
-    property({ attribute: "aria-label-close" })
-], EunomiaAlert.prototype, "ariaLabelClose", void 0);
+    property({ attribute: "close-label" })
+], EunomiaAlert.prototype, "closeLabel", void 0);
 __decorate([
     queryAssignedElements({ slot: "description" })
 ], EunomiaAlert.prototype, "descriptionSlotEls", void 0);

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

@@ -15,7 +15,7 @@ import { css } from "lit";
  * [--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
+ * [--alert-focus-outline-color] - Set a custom focus outline color for the close button, and for the alert itself when it's given focus
  */
 const base = css `
   :host {
@@ -23,6 +23,12 @@ const base = css `
     width: 100%;
     box-sizing: border-box;
     font-family: var(--eun-font-family, "Mulish", sans-serif);
+    border-radius: var(--alert-border-radius, var(--eun-border-radius-m, 8px));
+  }
+  :host(:focus-visible) {
+    outline: 2px solid
+      var(--alert-focus-outline-color, var(--eun-color-primary-500, #3d6fff));
+    outline-offset: 2px;
   }
 
   :host(:not([severity])) {
@@ -98,7 +104,8 @@ const base = css `
     grid-column: 1;
   }
 
-  :host([appearance="default"]) #alert {
+  :host([appearance="default"]) #alert,
+  :host(:not([appearance])) #alert {
     background: linear-gradient(
         to right,
         var(--alert-border-color, var(--_borderColor)) 4px,

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

@@ -1,4 +1,5 @@
 import { LitElement, PropertyValues, TemplateResult } from "lit";
+import { EunomiaDialogInitialFocus } from "../../../mixins/dialog-surface.mixin.js";
 /**
  * Tag name of the drawer component.
  */
@@ -7,7 +8,7 @@ export declare const EunomiaDrawerTagName = "eun-drawer";
  * Which edge of the viewport the drawer slides in from.
  */
 export type EunomiaDrawerPosition = "start" | "end";
-declare const EunomiaDrawer_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/dialog-surface.mixin.js").DialogSurfaceMixinInterface> & typeof LitElement;
+declare const EunomiaDrawer_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/dialog-surface.mixin.js").DialogSurfaceMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A full-height side panel that behaves as a modal overlay, sliding in from
  * an edge of the screen. It's the same idea as a modal turned into a
@@ -32,8 +33,9 @@ declare const EunomiaDrawer_base: import("../../../utils/constructor.type.js").C
  * @prop {boolean} [open=false] - Whether the drawer is open
  * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the drawer requests a close
  * @prop {boolean} [dirty=false] - Marks the drawer as having unsaved changes, requiring confirmation before it closes
- * @prop {string} ariaLabelClose - The accessible label of the close button
- * @attr {string} [aria-label-close='Close'] - The accessible label of the close button
+ * @prop {'auto' | 'first-field'} [initialFocus='auto'] - Where focus lands on open. First-field focuses the first focusable element of the body when the drawer was opened from the keyboard, and behaves like auto after a click or a touch, so a mobile virtual keyboard doesn't pop up on its own. A slotted autofocus element always wins
+ * @prop {string} [closeLabel] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
+ * @attr {string} [close-label] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
  * @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
  * @prop {string} confirmCloseDescription - The description of the internal discard confirmation dialog
@@ -52,6 +54,7 @@ declare const EunomiaDrawer_base: import("../../../utils/constructor.type.js").C
  * @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-header-padding-bottom] - Sets the padding below the header, --drawer-gap by default
  * @cssprop [--drawer-transition-duration] - Sets the duration of the slide transition
  * @element eun-drawer
  */
@@ -96,11 +99,26 @@ export declare class EunomiaDrawer extends EunomiaDrawer_base {
      * @default false
      */
     dirty: boolean;
+    /**
+     * Where focus lands on open. `auto` keeps the default target described
+     * on {@link focusInitialElement}. `first-field` focuses the first
+     * focusable element of the body when the drawer was opened from the
+     * keyboard, and behaves like `auto` after a click or a touch, so a
+     * mobile virtual keyboard doesn't pop up on its own. A slotted
+     * `[autofocus]` element always wins.
+     * @default auto
+     */
+    initialFocus: EunomiaDialogInitialFocus;
+    /**
+     * The body wrapping the default slot, searched by `initial-focus="first-field"`.
+     * @internal
+     */
+    private readonly bodyEl?;
     /**
      * Accessible label of the close (X) button.
-     * @default Close
+     * Falls back to the localized string for the current locale when unset.
      */
-    ariaLabelClose: string;
+    closeLabel?: string;
     /**
      * Heading of the internal discard-confirmation dialog.
      * @default Discard changes?
@@ -252,6 +270,13 @@ export declare class EunomiaDrawer extends EunomiaDrawer_base {
      * @private
      */
     private readonly handleDiscardConfirmed;
+    /**
+     * Focuses the body's first focusable element when `initialFocus` is
+     * `first-field` and the latest interaction came from the keyboard.
+     * @returns whether an element was focused.
+     * @private
+     */
+    private focusFirstField;
     /**
      * Focuses the `[autofocus]` slotted element if present, otherwise the
      * drawer panel itself.

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

@@ -10,8 +10,12 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { DialogCancelEvent } from "../../../events/dialog-cancel.event.js";
 import { DirtyCloseEvent } from "../../../events/dirty-close.event.js";
 import { handleDialogCommand } from "../../../utils/command.utils.js";
-import { DialogSurfaceMixin } from "../../../mixins/dialog-surface.mixin.js";
+import { DialogSurfaceMixin, } from "../../../mixins/dialog-surface.mixin.js";
+import { getFocusableElements } from "../../../utils/focusable-elements.utils.js";
+import { isKeyboardModality, trackInputModality, } from "../../../utils/input-modality.utils.js";
 import { drawerStyles } from "./drawer.styles.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
+import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the drawer component.
  */
@@ -40,8 +44,9 @@ export const EunomiaDrawerTagName = "eun-drawer";
  * @prop {boolean} [open=false] - Whether the drawer is open
  * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the drawer requests a close
  * @prop {boolean} [dirty=false] - Marks the drawer as having unsaved changes, requiring confirmation before it closes
- * @prop {string} ariaLabelClose - The accessible label of the close button
- * @attr {string} [aria-label-close='Close'] - The accessible label of the close button
+ * @prop {'auto' | 'first-field'} [initialFocus='auto'] - Where focus lands on open. First-field focuses the first focusable element of the body when the drawer was opened from the keyboard, and behaves like auto after a click or a touch, so a mobile virtual keyboard doesn't pop up on its own. A slotted autofocus element always wins
+ * @prop {string} [closeLabel] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
+ * @attr {string} [close-label] - The accessible label of the close button. Defaults to the localized string for the current locale (English: "Close")
  * @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
  * @prop {string} confirmCloseDescription - The description of the internal discard confirmation dialog
@@ -60,10 +65,11 @@ export const EunomiaDrawerTagName = "eun-drawer";
  * @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-header-padding-bottom] - Sets the padding below the header, --drawer-gap by default
  * @cssprop [--drawer-transition-duration] - Sets the duration of the slide transition
  * @element eun-drawer
  */
-let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
+let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LocalizableMixin(LitElement)) {
     constructor() {
         super(...arguments);
         /**
@@ -94,10 +100,15 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
          */
         this.dirty = false;
         /**
-         * Accessible label of the close (X) button.
-         * @default Close
+         * Where focus lands on open. `auto` keeps the default target described
+         * on {@link focusInitialElement}. `first-field` focuses the first
+         * focusable element of the body when the drawer was opened from the
+         * keyboard, and behaves like `auto` after a click or a touch, so a
+         * mobile virtual keyboard doesn't pop up on its own. A slotted
+         * `[autofocus]` element always wins.
+         * @default auto
          */
-        this.ariaLabelClose = "Close";
+        this.initialFocus = "auto";
         /**
          * Heading of the internal discard-confirmation dialog.
          * @default Discard changes?
@@ -233,6 +244,7 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
      */
     connectedCallback() {
         super.connectedCallback?.();
+        trackInputModality();
         this.addEventListener("command", this.handleCommandEvent);
     }
     /**
@@ -327,6 +339,20 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
         this.dirty = false;
         this.attemptClose();
     }
+    /**
+     * Focuses the body's first focusable element when `initialFocus` is
+     * `first-field` and the latest interaction came from the keyboard.
+     * @returns whether an element was focused.
+     * @private
+     */
+    focusFirstField() {
+        if (this.initialFocus !== "first-field" || !isKeyboardModality()) {
+            return false;
+        }
+        const [first] = this.bodyEl ? getFocusableElements(this.bodyEl) : [];
+        first?.focus();
+        return first !== undefined;
+    }
     /**
      * Focuses the `[autofocus]` slotted element if present, otherwise the
      * drawer panel itself.
@@ -338,6 +364,9 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
             autofocusTarget.focus();
             return;
         }
+        if (this.focusFirstField()) {
+            return;
+        }
         (this.panelEl ?? this.surfaceEl)?.focus();
     }
     /**
@@ -404,7 +433,7 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
                 appearance="ghost"
                 rounded
                 size="xs"
-                aria-label=${this.ariaLabelClose}
+                aria-label=${this.closeLabel ?? this.dictionary.common.close}
                 @click=${() => this.requestClose()}
               >
                 <eun-icon name="close" size="16"></eun-icon>
@@ -491,26 +520,32 @@ let EunomiaDrawer = class EunomiaDrawer extends DialogSurfaceMixin(LitElement) {
  */
 EunomiaDrawer.styles = drawerStyles;
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaDrawer.prototype, "position", void 0);
 __decorate([
     property()
 ], EunomiaDrawer.prototype, "heading", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ converter: defaultTrueConverter })
 ], EunomiaDrawer.prototype, "closeable", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaDrawer.prototype, "open", void 0);
 __decorate([
-    property({ type: Boolean, attribute: "close-on-backdrop" })
+    property({ converter: defaultTrueConverter, attribute: "close-on-backdrop" })
 ], EunomiaDrawer.prototype, "closeOnBackdrop", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaDrawer.prototype, "dirty", void 0);
 __decorate([
-    property({ attribute: "aria-label-close" })
-], EunomiaDrawer.prototype, "ariaLabelClose", void 0);
+    property({ attribute: "initial-focus", reflect: true, useDefault: true })
+], EunomiaDrawer.prototype, "initialFocus", void 0);
+__decorate([
+    query("#body")
+], EunomiaDrawer.prototype, "bodyEl", void 0);
+__decorate([
+    property({ attribute: "close-label" })
+], EunomiaDrawer.prototype, "closeLabel", void 0);
 __decorate([
     property({ attribute: "confirm-close-heading" })
 ], EunomiaDrawer.prototype, "confirmCloseHeading", void 0);

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

@@ -11,6 +11,7 @@ import { css } from "lit";
  * [--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-header-padding-bottom] - Set a custom padding below the header, --drawer-gap by default
  * [--drawer-transition-duration] - Set a custom duration for the slide transition
  */
 const base = css `
@@ -20,11 +21,11 @@ const base = css `
     --_color: var(--drawer-color, var(--eun-text-color, #071621));
     --_paddingBlock: var(
       --drawer-padding,
-      var(--drawer-padding-block, var(--eun-space-m, 16px))
+      var(--drawer-padding-block, var(--eun-space-l, 32px))
     );
     --_paddingInline: var(
       --drawer-padding,
-      var(--drawer-padding-inline, var(--eun-space-m, 16px))
+      var(--drawer-padding-inline, var(--eun-space-l, 32px))
     );
     --_gap: var(--drawer-gap, var(--eun-space-m, 16px));
     --_transitionDuration: var(
@@ -72,7 +73,7 @@ const base = css `
   #surface[closing]::backdrop {
     background-color: rgba(7, 22, 33, 0);
   }
-  :host([position="end"]) #surface {
+  :host(:is([position="end"], :not([position]))) #surface {
     justify-content: flex-end;
   }
   :host([position="start"]) #surface {
@@ -117,7 +118,8 @@ const base = css `
     align-items: flex-start;
     justify-content: space-between;
     gap: var(--_gap);
-    padding: var(--_paddingBlock) var(--_paddingInline) 0;
+    padding: var(--_paddingBlock) var(--_paddingInline)
+      var(--drawer-header-padding-bottom, var(--_gap));
   }
   #heading {
     margin: 0;
@@ -132,7 +134,7 @@ const base = css `
     flex: 1;
     min-height: 0;
     overflow-y: auto;
-    padding: var(--_gap) var(--_paddingInline);
+    padding: var(--eun-space-xs, 4px) var(--_paddingInline);
     font-size: var(--eun-font-size-s, 14px);
   }
   #footer {
@@ -144,8 +146,6 @@ const base = css `
   }
 
   #confirm-close-modal {
-    --modal-padding: var(--eun-space-l, 32px) var(--eun-space-m, 16px)
-      var(--eun-space-m, 16px) var(--eun-space-l, 32px);
     --modal-gap: var(--eun-space-m, 16px);
     --modal-backdrop-blur: 6px;
   }