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

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

@@ -93,13 +93,15 @@ const base = css `
   }
 
   #view.swiping-next #view-content {
-    animation: scheduler-slide-from-right var(--scheduler-swipe-duration, 200ms)
-      ease-out;
+    animation: scheduler-slide-from-right
+      var(--scheduler-swipe-duration, var(--eun-duration-m, 200ms))
+      var(--eun-easing-out, ease-out);
   }
 
   #view.swiping-previous #view-content {
-    animation: scheduler-slide-from-left var(--scheduler-swipe-duration, 200ms)
-      ease-out;
+    animation: scheduler-slide-from-left
+      var(--scheduler-swipe-duration, var(--eun-duration-m, 200ms))
+      var(--eun-easing-out, ease-out);
   }
 
   @keyframes scheduler-slide-from-right {

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

@@ -53,6 +53,8 @@ export type EunomiaSchedulerEventCardDirection = "row" | "column";
  * @cssprop [--scheduler-event-bar-width] - Sets the width of the color bar
  * @cssprop [--scheduler-event-gap] - Sets the gap between the bar and the text
  * @cssprop [--scheduler-event-padding] - Sets the inner padding
+ * @cssprop [--scheduler-event-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --scheduler-event-padding is set
+ * @cssprop [--scheduler-event-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --scheduler-event-padding is set
  * @cssprop [--scheduler-event-opaque-tint] - Sets the mix percentage for the default appearance's background
  * @cssprop [--scheduler-event-transparent-tint] - Sets the mix percentage for the transparent appearance's background
  * @cssprop [--scheduler-event-title-color] - Sets the title text color

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

@@ -52,6 +52,8 @@ export const EunomiaSchedulerEventCardTagName = "eun-scheduler-event";
  * @cssprop [--scheduler-event-bar-width] - Sets the width of the color bar
  * @cssprop [--scheduler-event-gap] - Sets the gap between the bar and the text
  * @cssprop [--scheduler-event-padding] - Sets the inner padding
+ * @cssprop [--scheduler-event-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --scheduler-event-padding is set
+ * @cssprop [--scheduler-event-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --scheduler-event-padding is set
  * @cssprop [--scheduler-event-opaque-tint] - Sets the mix percentage for the default appearance's background
  * @cssprop [--scheduler-event-transparent-tint] - Sets the mix percentage for the transparent appearance's background
  * @cssprop [--scheduler-event-title-color] - Sets the title text color
@@ -180,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

@@ -7,6 +7,8 @@ import { css } from "lit";
  * [--scheduler-event-bar-width] - Set a custom width for the color bar
  * [--scheduler-event-gap] - Set a custom gap between the bar and the text
  * [--scheduler-event-padding] - Set a custom inner padding
+ * [--scheduler-event-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --scheduler-event-padding is set
+ * [--scheduler-event-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --scheduler-event-padding is set
  * [--scheduler-event-opaque-tint] - Set a custom mix percentage for the `default` appearance's background (mixed against the current theme's own `--eun-surface-color`, so it's automatically a light tint in light mode and a dark tint in dark mode)
  * [--scheduler-event-transparent-tint] - Set a custom mix percentage for the `transparent` appearance's background (mixed against `transparent`)
  * [--scheduler-event-title-color] - Set a custom title text color
@@ -31,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);
   }
@@ -54,7 +56,11 @@ const base = css `
     width: 100%;
     height: 100%;
     min-height: 0;
-    padding: var(--scheduler-event-padding, var(--eun-space-xs, 4px));
+    padding: var(
+      --scheduler-event-padding,
+      var(--scheduler-event-padding-block, var(--eun-space-xs, 4px))
+        var(--scheduler-event-padding-inline, var(--eun-space-xs, 4px))
+    );
     border-radius: var(
       --scheduler-event-radius,
       var(--eun-border-radius-s, 5px)
@@ -69,9 +75,9 @@ const base = css `
       var(--eun-surface-color, #ffffff)
     );
     transition:
-      background 0.2s ease-out,
-      filter 0.2s ease-out,
-      outline 0.2s ease-out;
+      background var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      filter var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out),
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
 
   :host([appearance="transparent"]) #chip {

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 */
@@ -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/scheduler/shared/scheduler-hour-grid.styles.js

@@ -1,5 +1,5 @@
 import { css } from "lit";
-import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
+import { cssBelow } from "../../../utils/media.styles.js";
 /**
  * Shared style for the day/week/work-week hour grid.
  *
@@ -172,13 +172,13 @@ const base = css `
     cursor: grabbing;
   }
 
-  @container (max-width: ${EUNOMIA_BREAKPOINTS.mobile}px) {
+  @container ${cssBelow("mobile")} {
     #hour-grid-scroll {
       --scheduler-mobile: true;
     }
   }
 
-  @container (max-width: ${EUNOMIA_BREAKPOINTS.tablet}px) {
+  @container ${cssBelow("tablet")} {
     #hour-grid-scroll {
       --scheduler-tablet: true;
       flex: 1 1 auto;

package/dist/features/scheduler/shared/scheduler-month-view.styles.js

@@ -1,12 +1,12 @@
 import { css } from "lit";
-import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
+import { cssBelow } from "../../../utils/media.styles.js";
 const base = css `
   .month-scroll {
     max-height: var(--scheduler-body-max-height, 640px);
     overflow-y: auto;
   }
 
-  @media (max-width: ${EUNOMIA_BREAKPOINTS.tablet}px) {
+  @media ${cssBelow("tablet")} {
     .month-scroll {
       flex: 1 1 auto;
       height: 100%;

package/dist/features/scheduler/shared/scheduler-year-view.styles.js

@@ -1,12 +1,12 @@
 import { css } from "lit";
-import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
+import { cssBelow } from "../../../utils/media.styles.js";
 const base = css `
   .year-scroll {
     max-height: var(--scheduler-body-max-height, 640px);
     overflow-y: auto;
   }
 
-  @media (max-width: ${EUNOMIA_BREAKPOINTS.tablet}px) {
+  @media ${cssBelow("tablet")} {
     .year-scroll {
       flex: 1 1 auto;
       height: 100%;

package/dist/features/table/table/table-native.styles.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Light DOM style of the native `<table>` slotted into `eun-table`. A
+ * shadow root can't reach a slotted table's rows and cells, so `eun-table`
+ * adopts this sheet into its own root node (the document, or the shadow
+ * root it lives in) instead. The exact same rules are also published as
+ * `table-ssr.css`, so a server-rendered table looks final before any
+ * script runs.
+ *
+ * Before `eun-table` is defined, the table itself carries the frame the
+ * component later draws around it, so a server-rendered page doesn't
+ * shift once it upgrades. Once defined, the `<caption>` is positioned
+ * above that frame, in the room the host reserves for it.
+ *
+ * Every rule is scoped to `eun-table > table`, so it never touches a table
+ * outside of `eun-table`, and stays at a low specificity a consumer class
+ * overrides easily.
+ *
+ * Every cell paints an opaque background, and the hover and selected tints
+ * are layered on top through an inset `box-shadow` rather than a
+ * background change. That keeps sticky cells opaque in every state while
+ * the tint still transitions smoothly.
+ *
+ * Generated cells carry a data attribute: `data-table-select` for the
+ * selection checkbox column, `data-table-skeleton` for the loading
+ * placeholder body. Consumers mark their row end action cells with
+ * `data-table-action`.
+ */
+export declare const tableNativeStyles: import("lit").CSSResult;