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

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

@@ -28,6 +28,7 @@ import { css } from "lit";
  * [--toolbar-panel-padding] - Set a custom padding for the mobile panel
  * [--toolbar-panel-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toolbar-panel-padding is set
  * [--toolbar-panel-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --toolbar-panel-padding is set
+ * [--toolbar-panel-offset] - Set the room reserved above the mobile panel content for the burger, added to its padding. Defaults to the bar's height, or 0 for panel-direction="bottom"
  * [--toolbar-burger-align] - Set the vertical alignment of the burger button within the bar's height, default center ; set flex-start to pin it to the top instead
  * [--toolbar-burger-padding] - Set a custom padding around the burger button, default 0 on the block axis and --toolbar-panel-padding on the inline axis
  * [--toolbar-burger-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toolbar-burger-padding is set
@@ -92,6 +93,10 @@ const base = css `
       --toolbar-panel-padding,
       var(--toolbar-panel-padding-inline, 14px)
     );
+    --_panelOffset: var(
+      --toolbar-panel-offset,
+      calc(var(--_currentHeight) - var(--eun-border-width-s, 1px))
+    );
     --_burgerAlign: var(--toolbar-burger-align, center);
     --_burgerPadding: var(
       --toolbar-burger-padding,
@@ -191,6 +196,12 @@ const base = css `
     min-width: 0;
   }
 
+  :host([mobile][mobile-hide~="start"]) #start,
+  :host([mobile][mobile-hide~="center"]) #center,
+  :host([mobile][mobile-hide~="end"]) #end {
+    display: none;
+  }
+
   #start ::slotted(*),
   #center ::slotted(*),
   #end ::slotted(*) {
@@ -320,22 +331,6 @@ const base = css `
     pointer-events: none;
     transition-duration: var(--_transitionDuration);
   }
-  #panel[data-direction="top"] {
-    inset-block-end: auto;
-    height: var(--_panelSize);
-  }
-  #panel[data-direction="bottom"] {
-    inset-block-start: auto;
-    height: var(--_panelSize);
-  }
-  #panel[data-direction="left"] {
-    inset-inline-end: auto;
-    width: var(--_panelSize);
-  }
-  #panel[data-direction="right"] {
-    inset-inline-start: auto;
-    width: var(--_panelSize);
-  }
   #panel::backdrop {
     background: transparent;
   }
@@ -360,7 +355,8 @@ const base = css `
     inset: 0;
     display: flex;
     flex-direction: column;
-    padding: var(--_panelPaddingBlock) var(--_panelPaddingInline);
+    padding: calc(var(--_panelOffset) + var(--_panelPaddingBlock))
+      var(--_panelPaddingInline) var(--_panelPaddingBlock);
     background: var(--_panelBackground);
     backdrop-filter: blur(var(--_panelBackdropBlur));
     -webkit-backdrop-filter: blur(var(--_panelBackdropBlur));
@@ -373,15 +369,20 @@ const base = css `
       transform var(--_transitionDuration) var(--eun-easing-default, ease);
   }
   #panel[data-direction="top"] #panel-body {
+    inset-block-end: calc(100% - var(--_panelSize));
     transform: translateY(-100%);
   }
   #panel[data-direction="bottom"] #panel-body {
+    --_panelOffset: var(--toolbar-panel-offset, 0px);
+    inset-block-start: calc(100% - var(--_panelSize));
     transform: translateY(100%);
   }
   #panel[data-direction="left"] #panel-body {
+    inset-inline-end: calc(100% - var(--_panelSize));
     transform: translateX(-100%);
   }
   #panel[data-direction="right"] #panel-body {
+    inset-inline-start: calc(100% - var(--_panelSize));
     transform: translateX(100%);
   }
   #panel:popover-open #panel-body {

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

@@ -1,5 +1,6 @@
 /**
- * Dispatched when an option is chosen from a `eun-dropdown-button` menu.
+ * Dispatched when an option is chosen from a `eun-dropdown-button` menu, or
+ * a suggestion is picked in a `eun-search`.
  */
 export declare class SelectEvent extends Event {
     /**
@@ -9,7 +10,7 @@ export declare class SelectEvent extends Event {
      */
     static readonly eventName = "eunselect";
     /**
-     * The `key` of the chosen option.
+     * The `key` of the chosen option, or the `value` of the picked suggestion.
      */
     readonly key: string;
     constructor(key: string);

package/dist/events/select.event.js

@@ -1,5 +1,6 @@
 /**
- * Dispatched when an option is chosen from a `eun-dropdown-button` menu.
+ * Dispatched when an option is chosen from a `eun-dropdown-button` menu, or
+ * a suggestion is picked in a `eun-search`.
  */
 export class SelectEvent extends Event {
     constructor(key) {

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

@@ -1103,7 +1103,7 @@ __decorate([
     property({ attribute: false })
 ], EunomiaCalendar.prototype, "events", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaCalendar.prototype, "view", void 0);
 __decorate([
     property({ attribute: false })

package/dist/features/scheduler/scheduler/scheduler.d.ts

@@ -43,8 +43,8 @@ declare const EunomiaScheduler_base: import("../../../utils/constructor.type.js"
  * @prop {boolean} [noAnimation=false] - Disables the mobile swipe slide animation and the drawer or modal's own transitions
  * @prop {string} [todayLabel='Today'] - The label of the jump-to-today button
  * @prop {string} [newEventLabel='New event'] - The label of the create-a-new-event button
- * @prop {string} [ariaLabelPrevious='Previous period'] - The accessible label of the previous-period button
- * @prop {string} [ariaLabelNext='Next period'] - The accessible label of the next-period button
+ * @prop {string} [previousLabel] - The accessible label of the previous-period button. Defaults to the localized string for the current locale (English: "Previous period")
+ * @prop {string} [nextLabel] - The accessible label of the next-period button. Defaults to the localized string for the current locale (English: "Next period")
  * @prop {string} [viewDayLabel='Day'] - The label of the day view switcher option
  * @prop {string} [viewWeekLabel='Week'] - The label of the week view switcher option
  * @prop {string} [viewWorkWeekLabel='Work week'] - The label of the work week view switcher option
@@ -126,9 +126,9 @@ export declare class EunomiaScheduler extends EunomiaScheduler_base {
     /** @default New event */
     newEventLabel: string;
     /** @default Previous period */
-    ariaLabelPrevious: string;
+    previousLabel?: string;
     /** @default Next period */
-    ariaLabelNext: string;
+    nextLabel?: string;
     /** @default Day */
     viewDayLabel: string;
     /** @default Week */
@@ -142,7 +142,7 @@ export declare class EunomiaScheduler extends EunomiaScheduler_base {
     /** @default Apply */
     applyLabel: string;
     /** @default Cancel */
-    cancelLabel: string;
+    cancelLabel?: string;
     /** @default Delete */
     deleteLabel: string;
     /**
@@ -152,9 +152,9 @@ export declare class EunomiaScheduler extends EunomiaScheduler_base {
     editLabel: string;
     /**
      * Accessible label of the read-only event popover's close (✕) button.
-     * @default Close
+     * Falls back to the localized string for the current locale when unset.
      */
-    closeLabel: string;
+    closeLabel?: string;
     /** @default +{count} more */
     moreEventsLabel: string;
     /**

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

@@ -67,8 +67,8 @@ const VIEWS = [
  * @prop {boolean} [noAnimation=false] - Disables the mobile swipe slide animation and the drawer or modal's own transitions
  * @prop {string} [todayLabel='Today'] - The label of the jump-to-today button
  * @prop {string} [newEventLabel='New event'] - The label of the create-a-new-event button
- * @prop {string} [ariaLabelPrevious='Previous period'] - The accessible label of the previous-period button
- * @prop {string} [ariaLabelNext='Next period'] - The accessible label of the next-period button
+ * @prop {string} [previousLabel] - The accessible label of the previous-period button. Defaults to the localized string for the current locale (English: "Previous period")
+ * @prop {string} [nextLabel] - The accessible label of the next-period button. Defaults to the localized string for the current locale (English: "Next period")
  * @prop {string} [viewDayLabel='Day'] - The label of the day view switcher option
  * @prop {string} [viewWeekLabel='Week'] - The label of the week view switcher option
  * @prop {string} [viewWorkWeekLabel='Work week'] - The label of the work week view switcher option
@@ -143,10 +143,6 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         this.todayLabel = "Today";
         /** @default New event */
         this.newEventLabel = "New event";
-        /** @default Previous period */
-        this.ariaLabelPrevious = "Previous period";
-        /** @default Next period */
-        this.ariaLabelNext = "Next period";
         /** @default Day */
         this.viewDayLabel = "Day";
         /** @default Week */
@@ -159,8 +155,6 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         this.viewYearLabel = "Year";
         /** @default Apply */
         this.applyLabel = "Apply";
-        /** @default Cancel */
-        this.cancelLabel = "Cancel";
         /** @default Delete */
         this.deleteLabel = "Delete";
         /**
@@ -168,11 +162,6 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
          * @default Edit
          */
         this.editLabel = "Edit";
-        /**
-         * Accessible label of the read-only event popover's close (✕) button.
-         * @default Close
-         */
-        this.closeLabel = "Close";
         /** @default +{count} more */
         this.moreEventsLabel = "+{count} more";
         /**
@@ -285,7 +274,9 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
             if (!this.calendarEl) {
                 return;
             }
-            this.view = this.calendarEl.view;
+            if (this.view !== this.calendarEl.view) {
+                this.view = this.calendarEl.view;
+            }
             this.displayedDate = this.calendarEl.displayedDate;
         };
         /**
@@ -676,7 +667,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         <eun-button
           appearance="ghost"
           size="s"
-          aria-label=${this.ariaLabelPrevious}
+          aria-label=${this.previousLabel ?? this.dictionary.scheduler.previous}
           @click=${this.handlePrevious}
         >
           <eun-icon name="chevron_left" size="18"></eun-icon>
@@ -687,7 +678,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
         <eun-button
           appearance="ghost"
           size="s"
-          aria-label=${this.ariaLabelNext}
+          aria-label=${this.nextLabel ?? this.dictionary.scheduler.next}
           @click=${this.handleNext}
         >
           <eun-icon name="chevron_right" size="18"></eun-icon>
@@ -820,7 +811,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
             : nothing}
           <span style="flex: 1 1 auto;"></span>
           <eun-button appearance="ghost" @click=${this.handleDrawerCancel}
-            >${this.cancelLabel}</eun-button
+            >${this.cancelLabel ?? this.dictionary.common.cancel}</eun-button
           >
           <eun-button color="primary" @click=${this.handleDrawerSave}
             >${this.applyLabel}</eun-button
@@ -855,7 +846,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
             : nothing}
           <span style="flex: 1 1 auto;"></span>
           <eun-button color="secondary" @click=${this.handleModalCancel}
-            >${this.cancelLabel}</eun-button
+            >${this.cancelLabel ?? this.dictionary.common.cancel}</eun-button
           >
           <eun-button color="primary" @click=${this.handleModalSave}
             >${this.applyLabel}</eun-button
@@ -870,7 +861,7 @@ let EunomiaScheduler = class EunomiaScheduler extends LocalizableMixin(AnchorPos
                 locale: this.locale,
                 editLabel: this.editLabel,
                 deleteLabel: this.deleteLabel,
-                closeLabel: this.closeLabel,
+                closeLabel: this.closeLabel ?? this.dictionary.common.close,
                 priorityLabels: {
                     low: "Low",
                     medium: "Medium",
@@ -916,7 +907,7 @@ __decorate([
     property({ attribute: false })
 ], EunomiaScheduler.prototype, "events", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaScheduler.prototype, "view", void 0);
 __decorate([
     property({ attribute: false })
@@ -946,11 +937,11 @@ __decorate([
     property({ attribute: "new-event-label" })
 ], EunomiaScheduler.prototype, "newEventLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-previous" })
-], EunomiaScheduler.prototype, "ariaLabelPrevious", void 0);
+    property({ attribute: "previous-label" })
+], EunomiaScheduler.prototype, "previousLabel", void 0);
 __decorate([
-    property({ attribute: "aria-label-next" })
-], EunomiaScheduler.prototype, "ariaLabelNext", void 0);
+    property({ attribute: "next-label" })
+], EunomiaScheduler.prototype, "nextLabel", void 0);
 __decorate([
     property({ attribute: "view-day-label" })
 ], EunomiaScheduler.prototype, "viewDayLabel", void 0);

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

@@ -182,13 +182,13 @@ __decorate([
     property({ attribute: false })
 ], EunomiaSchedulerEventCard.prototype, "end", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaSchedulerEventCard.prototype, "color", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaSchedulerEventCard.prototype, "appearance", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaSchedulerEventCard.prototype, "direction", void 0);
 __decorate([
     property()

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

@@ -33,7 +33,7 @@ const base = css `
     --_accent: var(--eun-color-yellow-600, #e0e000);
     --_tintBase: var(--eun-color-yellow-500, #f0f050);
   }
-  :host([color="blue"]) {
+  :host(:is([color="blue"], :not([color]))) {
     --_accent: var(--eun-color-blue-600, #0aa5a8);
     --_tintBase: var(--eun-color-blue-500, #3bb3b9);
   }

package/dist/features/scheduler/scheduler-event-editor/scheduler-event-editor.d.ts

@@ -4,6 +4,7 @@ import { EunomiaSchedulerEvent, EunomiaSchedulerEventColor } from "../shared/sch
  * Tag name of the scheduler event editor component.
  */
 export declare const EunomiaSchedulerEventEditorTagName = "eun-scheduler-event-editor";
+declare const EunomiaSchedulerEventEditor_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * The create and edit form for a single scheduler event: title,
  * description, date, start and end time, location, notes, priority, and
@@ -49,7 +50,7 @@ export declare const EunomiaSchedulerEventEditorTagName = "eun-scheduler-event-e
  * @prop {string} [addGuestLabel='Add guest'] - The accessible label of the guest email input's add button
  * @prop {string} [removeGuestLabel='Remove'] - A prefix combined with the guest's email to build each guest chip's delete button accessible name, such as "Remove alice@example.com"
  * @prop {string} [saveLabel='Save'] - The label of the built-in save button
- * @prop {string} [cancelLabel='Cancel'] - The label of the built-in cancel button. Resets the form to its last-seeded values
+ * @prop {string} [cancelLabel] - The label of the built-in cancel button. Resets the form to its last-seeded values. Defaults to the localized string for the current locale (English: "Cancel")
  * @prop {string} [deleteLabel='Delete'] - The label of the built-in delete button. Only shown while editing an existing event
  * @fires {EventCreateEvent} euneventcreate - Fired on a valid save, in create mode
  * @fires {EventUpdateEvent} euneventupdate - Fired on a valid save, in edit mode
@@ -58,7 +59,7 @@ export declare const EunomiaSchedulerEventEditorTagName = "eun-scheduler-event-e
  * @cssprop [--scheduler-event-editor-gap] - Sets the gap between fields
  * @element eun-scheduler-event-editor
  */
-export declare class EunomiaSchedulerEventEditor extends LitElement {
+export declare class EunomiaSchedulerEventEditor extends EunomiaSchedulerEventEditor_base {
     /**
      * Styles to import to the component.
      *
@@ -133,14 +134,14 @@ export declare class EunomiaSchedulerEventEditor extends LitElement {
     /**
      * Prefix combined with the guest's email to build each guest chip's
      * delete button accessible name, forwarded as `eun-chip`'s own
-     * `ariaLabelRemove`.
+     * `removeLabel`.
      * @default Remove
      */
     removeGuestLabel: string;
     /** @default Save */
     saveLabel: string;
     /** @default Cancel */
-    cancelLabel: string;
+    cancelLabel?: string;
     /** @default Delete */
     deleteLabel: string;
     /** @internal */
@@ -321,3 +322,4 @@ declare global {
         [EunomiaSchedulerEventEditorTagName]: EunomiaSchedulerEventEditor;
     }
 }
+export {};

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

@@ -14,6 +14,7 @@ import { EventDeleteEvent } from "../../../events/event-delete.event.js";
 import { GuestInviteEvent } from "../../../events/event-guest-invite.event.js";
 import { addHours, endOfDay, startOfDay } from "../../../utils/date.utils.js";
 import { GUEST_STATUS_ICON, GUEST_STATUS_SEMANTIC_STATE, } from "../shared/scheduler.utils.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 /**
  * Tag name of the scheduler event editor component.
  */
@@ -96,7 +97,7 @@ const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  * @prop {string} [addGuestLabel='Add guest'] - The accessible label of the guest email input's add button
  * @prop {string} [removeGuestLabel='Remove'] - A prefix combined with the guest's email to build each guest chip's delete button accessible name, such as "Remove alice@example.com"
  * @prop {string} [saveLabel='Save'] - The label of the built-in save button
- * @prop {string} [cancelLabel='Cancel'] - The label of the built-in cancel button. Resets the form to its last-seeded values
+ * @prop {string} [cancelLabel] - The label of the built-in cancel button. Resets the form to its last-seeded values. Defaults to the localized string for the current locale (English: "Cancel")
  * @prop {string} [deleteLabel='Delete'] - The label of the built-in delete button. Only shown while editing an existing event
  * @fires {EventCreateEvent} euneventcreate - Fired on a valid save, in create mode
  * @fires {EventUpdateEvent} euneventupdate - Fired on a valid save, in edit mode
@@ -105,7 +106,7 @@ const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  * @cssprop [--scheduler-event-editor-gap] - Sets the gap between fields
  * @element eun-scheduler-event-editor
  */
-let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends LitElement {
+let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends LocalizableMixin(LitElement) {
     constructor() {
         super(...arguments);
         /**
@@ -164,14 +165,12 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends LitE
         /**
          * Prefix combined with the guest's email to build each guest chip's
          * delete button accessible name, forwarded as `eun-chip`'s own
-         * `ariaLabelRemove`.
+         * `removeLabel`.
          * @default Remove
          */
         this.removeGuestLabel = "Remove";
         /** @default Save */
         this.saveLabel = "Save";
-        /** @default Cancel */
-        this.cancelLabel = "Cancel";
         /** @default Delete */
         this.deleteLabel = "Delete";
         /** @internal */
@@ -649,7 +648,7 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends LitE
               @keydown=${this.handleGuestInputKeydown}
             ></eun-input>
             <eun-button
-              appearance="default"
+              appearance="soft"
               id="guest-add-button"
               color="secondary"
               aria-label=${this.addGuestLabel}
@@ -676,7 +675,7 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends LitE
                           appearance="outline"
                           icon=${GUEST_STATUS_ICON[guest.status]}
                           .severity=${GUEST_STATUS_SEMANTIC_STATE[guest.status]}
-                          .ariaLabelRemove=${this.removeGuestLabel}
+                          .removeLabel=${this.removeGuestLabel}
                           @eunclose=${() => this.handleRemoveGuest(guest.email)}
                         >
                           ${guest.email}
@@ -748,7 +747,7 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends LitE
                 : nothing}
               <span class="spacer"></span>
               <eun-button appearance="ghost" @click=${this.handleCancelClick}>
-                ${this.cancelLabel}
+                ${this.cancelLabel ?? this.dictionary.common.cancel}
               </eun-button>
               <eun-button color="primary" @click=${this.handleSaveClick}>
                 ${this.saveLabel}

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

@@ -1078,7 +1078,7 @@ let EunomiaTable = class EunomiaTable extends LocalizableMixin(LoadMoreSentinelM
         }
         return html `<eun-button
       size="xs"
-      appearance=${action.color ? "default" : "ghost"}
+      appearance=${action.color ? "soft" : "ghost"}
       color=${ifDefined(action.color)}
       aria-label=${action.label}
       ?disabled=${action.disabled?.(row) ?? false}

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

@@ -102,7 +102,7 @@ let EunomiaTableActionBar = class EunomiaTableActionBar extends LocalizableMixin
           label=${action.label}
           icon=${ifDefined(action.icon)}
           color=${ifDefined(isCritical ? "critical" : undefined)}
-          appearance=${isCritical ? "default" : "flat"}
+          appearance=${isCritical ? "soft" : "flat"}
           .options=${action.dropdown}
           ?disabled=${action.disabled}
           @eunselect=${(event) => this.handleActionSelect(action, event)}
@@ -122,7 +122,7 @@ let EunomiaTableActionBar = class EunomiaTableActionBar extends LocalizableMixin
       <eun-button
         color=${ifDefined(isCritical ? "critical" : undefined)}
         label=${action.label}
-        appearance=${isCritical ? "default" : "flat"}
+        appearance=${isCritical ? "soft" : "flat"}
         ?disabled=${action.disabled}
         @click=${() => this.handleActionClick(action)}
       >

package/dist/i18n/en.d.ts

@@ -6,7 +6,15 @@
  * silent runtime fallback.
  */
 export declare const en: {
+    common: {
+        close: string;
+        cancel: string;
+        confirm: string;
+        noValue: string;
+        save: string;
+    };
     datePicker: {
+        openCalendar: string;
         previousMonth: string;
         chooseMonthYear: string;
         nextMonth: string;
@@ -19,6 +27,11 @@ export declare const en: {
         amPm: string;
         hour: string;
         minute: string;
+        day: string;
+        month: string;
+        year: string;
+        startDate: string;
+        endDate: string;
         heading: {
             day: {
                 single: string;
@@ -49,6 +62,7 @@ export declare const en: {
         };
     };
     timePicker: {
+        openClock: string;
         amPm: string;
         hour: string;
         minute: string;
@@ -58,6 +72,8 @@ export declare const en: {
         mustBeAtOrBefore: (time: string) => string;
     };
     scheduler: {
+        previous: string;
+        next: string;
         calendarView: string;
     };
     carousel: {
@@ -82,6 +98,11 @@ export declare const en: {
     chip: {
         remove: string;
     };
+    passwordStrength: {
+        label: string;
+        levels: string[];
+        caption: (label: string) => string;
+    };
     infiniteList: {
         loadingMore: string;
         itemsLoaded: (count: number) => string;
@@ -102,6 +123,53 @@ export declare const en: {
     link: {
         opensInNewTab: string;
     };
+    input: {
+        clear: string;
+        showPassword: string;
+        hidePassword: string;
+    };
+    search: {
+        panel: string;
+    };
+    counter: {
+        increment: string;
+        decrement: string;
+    };
+    inputFile: {
+        remove: string;
+        select: string;
+        open: string;
+    };
+    inputPhone: {
+        selectCountry: string;
+    };
+    colorPicker: {
+        noColor: string;
+    };
+    pagination: {
+        previous: string;
+        next: string;
+        first: string;
+        last: string;
+        page: string;
+    };
+    sidebar: {
+        expand: string;
+        collapse: string;
+        resize: string;
+    };
+    toolbar: {
+        menuOpen: string;
+        menuClose: string;
+        menu: string;
+    };
+    rating: {
+        label: string;
+        valueText: (value: string, max: string) => string;
+        summary: (label: string, valueText: string) => string;
+        noValue: string;
+        clear: string;
+    };
     validation: {
         valueMissing: string;
         tooShort: (min: number, length: number) => string;