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

package/dist/components/navigation/stepper/stepper.js

@@ -9,27 +9,11 @@ import { html, LitElement, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { StepChangeEvent } from "../../../events/stepchange.event.js";
 import { stepperStyles } from "./stepper.styles.js";
+import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the stepper component.
  */
 export const EunomiaStepperTagName = "eun-stepper";
-/**
- * Attribute converter for `linear`, making an explicit `linear="false"`
- * actually mean false. Lit's standard boolean converter only ever looks
- * at whether the attribute is *present*, the same way native HTML boolean
- * attributes work (`disabled="false"` is still disabled) — fine for every
- * other boolean here, which default to `false` and so are only ever
- * turned on by adding the attribute. `linear` is the one exception,
- * defaulting to `true` : without this, there would be no way to turn it
- * back off from plain HTML, only from script (`el.linear = false`).
- * @internal
- */
-const linearConverter = {
-    fromAttribute(value) {
-        return value !== null && value !== "false";
-    },
-    toAttribute: String,
-};
 /**
  * A status and progression indicator for a multi-step process, such as a
  * checkout flow, a multi-page form, or an onboarding wizard.
@@ -86,7 +70,6 @@ const linearConverter = {
  * @prop {'horizontal' | 'vertical'} [orientation='horizontal'] - The numbered display's layout direction. Has no effect on the progress variant
  * @prop {'numbered' | 'progress'} [variant='numbered'] - Which of the two displays to render
  * @prop {boolean} [linear=true] - Restricts direct navigation to steps before activeStep. Set to false to allow jumping to any non-disabled step in any order
- * @attr {'true' | 'false'} [linear='true'] - Unlike most boolean attributes here, the literal string false genuinely means false, needed since linear is the one that defaults to true
  * @prop {boolean} [disabled=false] - Disables every step's control, leaving a read-only progress summary with no navigation at all, the same way an individual step's own disabled does
  * @attr {string} [aria-label='Progress'] - The accessible label for the navigation landmark. Numbered display only
  * @fires {StepChangeEvent} eunstepchange - Fired with the requested step whenever a reachable step is activated. ActiveStep and activeSubstep are never updated internally
@@ -153,8 +136,7 @@ let EunomiaStepper = class EunomiaStepper extends LitElement {
         /**
          * Restricts direct navigation to steps before {@link activeStep} ; set
          * to `false` (either as the JS property, or the literal `linear="false"`
-         * attribute — see {@link linearConverter} for why that works here,
-         * unlike most other boolean attributes) to allow jumping to any
+         * attribute — see {@link defaultTrueConverter}) to allow jumping to any
          * non-`disabled` step in any order.
          * @default true
          */
@@ -530,7 +512,7 @@ __decorate([
     property({ reflect: true, useDefault: true })
 ], EunomiaStepper.prototype, "variant", void 0);
 __decorate([
-    property({ reflect: true, converter: linearConverter })
+    property({ reflect: true, converter: defaultTrueConverter })
 ], EunomiaStepper.prototype, "linear", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

package/dist/components/navigation/toolbar/toolbar.d.ts

@@ -70,6 +70,8 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @attr {'top' | 'bottom' | 'left' | 'right'} [panel-direction='top'] - Which edge the mobile panel slides in from
  * @prop {string} panelSize - A custom open size for the mobile panel, height for top or bottom, width for left or right. Any CSS length, defaulting to 100%
  * @attr {string} panel-size - A custom open size for the mobile panel
+ * @prop {string} mobileHide - The bar slots hidden below the mobile breakpoint, as a space-separated list of start, center and end, such as "center end" when their content is repeated in the panel. Applied by toolbar-ssr.css before the upgrade too
+ * @attr {string} mobile-hide - The bar slots hidden below the mobile breakpoint, as a space-separated list of start, center and end
  * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the mobile panel closes it
  * @attr {boolean} [close-on-backdrop=true] - Whether clicking outside the mobile panel closes it
  * @prop {string} [menuOpenLabel] - The accessible label of the burger button while the panel is closed. Defaults to the localized string for the current locale (English: "Open menu")
@@ -127,6 +129,7 @@ declare const EunomiaToolbar_base: import("../../../utils/constructor.type.js").
  * @cssprop [--toolbar-panel-padding] - Sets the padding of the mobile panel
  * @cssprop [--toolbar-panel-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toolbar-panel-padding is set
  * @cssprop [--toolbar-panel-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toolbar-panel-padding is set
+ * @cssprop [--toolbar-panel-offset] - Sets the room reserved above the mobile panel content for the burger, added to its padding. Defaults to the bar's height, or 0 with panel-direction="bottom"
  * @cssprop [--toolbar-burger-align] - Sets the vertical alignment of the burger button within the bar's height, defaulting to center ; set flex-start to pin it to the top instead
  * @cssprop [--toolbar-burger-padding] - Sets the padding around the burger button, defaulting to 0 on the block axis and --toolbar-panel-padding on the inline axis
  * @cssprop [--toolbar-burger-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toolbar-burger-padding is set
@@ -175,6 +178,13 @@ export declare class EunomiaToolbar extends EunomiaToolbar_base {
      * left/right) ; any CSS length, defaults to `100%`.
      */
     panelSize?: string;
+    /**
+     * The bar slots hidden below `mobileBreakpoint`, as a space-separated
+     * list of `start`, `center` and `end`, such as `"center end"` once their
+     * content is repeated in the panel. Reflected, since the hiding is pure
+     * CSS on the attribute, also matched by `toolbar-ssr.css` before upgrade.
+     */
+    mobileHide?: string;
     /**
      * Whether clicking outside the mobile panel closes it.
      * @default true

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

@@ -11,6 +11,7 @@ import { DialogSurfaceMixin } from "../../../mixins/dialog-surface.mixin.js";
 import { EUNOMIA_BREAKPOINTS } from "../../../breakpoints.js";
 import { toolbarStyles } from "./toolbar.styles.js";
 import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
+import { defaultTrueConverter } from "../../../utils/boolean.utils.js";
 /**
  * Tag name of the toolbar component.
  */
@@ -69,6 +70,8 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @attr {'top' | 'bottom' | 'left' | 'right'} [panel-direction='top'] - Which edge the mobile panel slides in from
  * @prop {string} panelSize - A custom open size for the mobile panel, height for top or bottom, width for left or right. Any CSS length, defaulting to 100%
  * @attr {string} panel-size - A custom open size for the mobile panel
+ * @prop {string} mobileHide - The bar slots hidden below the mobile breakpoint, as a space-separated list of start, center and end, such as "center end" when their content is repeated in the panel. Applied by toolbar-ssr.css before the upgrade too
+ * @attr {string} mobile-hide - The bar slots hidden below the mobile breakpoint, as a space-separated list of start, center and end
  * @prop {boolean} [closeOnBackdrop=true] - Whether clicking outside the mobile panel closes it
  * @attr {boolean} [close-on-backdrop=true] - Whether clicking outside the mobile panel closes it
  * @prop {string} [menuOpenLabel] - The accessible label of the burger button while the panel is closed. Defaults to the localized string for the current locale (English: "Open menu")
@@ -126,6 +129,7 @@ export const EunomiaToolbarTagName = "eun-toolbar";
  * @cssprop [--toolbar-panel-padding] - Sets the padding of the mobile panel
  * @cssprop [--toolbar-panel-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toolbar-panel-padding is set
  * @cssprop [--toolbar-panel-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toolbar-panel-padding is set
+ * @cssprop [--toolbar-panel-offset] - Sets the room reserved above the mobile panel content for the burger, added to its padding. Defaults to the bar's height, or 0 with panel-direction="bottom"
  * @cssprop [--toolbar-burger-align] - Sets the vertical alignment of the burger button within the bar's height, defaulting to center ; set flex-start to pin it to the top instead
  * @cssprop [--toolbar-burger-padding] - Sets the padding around the burger button, defaulting to 0 on the block axis and --toolbar-panel-padding on the inline axis
  * @cssprop [--toolbar-burger-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toolbar-burger-padding is set
@@ -897,7 +901,10 @@ __decorate([
     property({ attribute: "panel-size" })
 ], EunomiaToolbar.prototype, "panelSize", void 0);
 __decorate([
-    property({ type: Boolean, attribute: "close-on-backdrop" })
+    property({ reflect: true, attribute: "mobile-hide" })
+], EunomiaToolbar.prototype, "mobileHide", void 0);
+__decorate([
+    property({ converter: defaultTrueConverter, attribute: "close-on-backdrop" })
 ], EunomiaToolbar.prototype, "closeOnBackdrop", void 0);
 __decorate([
     property({ attribute: "menu-open-label" })

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/scheduler-event-editor/scheduler-event-editor.js

@@ -648,7 +648,7 @@ let EunomiaSchedulerEventEditor = class EunomiaSchedulerEventEditor extends Loca
               @keydown=${this.handleGuestInputKeydown}
             ></eun-input>
             <eun-button
-              appearance="default"
+              appearance="soft"
               id="guest-add-button"
               color="secondary"
               aria-label=${this.addGuestLabel}

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/index.d.ts

@@ -55,6 +55,7 @@ export type { EunomiaSidebarPosition, EunomiaSidebarCollapseMode, } from "./comp
 export { EunomiaModal, EunomiaModalTagName, } from "./components/alert/modal/modal.js";
 export { EunomiaDrawer, EunomiaDrawerTagName, } from "./components/alert/drawer/drawer.js";
 export type { EunomiaDrawerPosition } from "./components/alert/drawer/drawer.js";
+export type { EunomiaDialogInitialFocus } from "./mixins/dialog-surface.mixin.js";
 export { EunomiaAlert, EunomiaAlertTagName, } from "./components/alert/alert/alert.js";
 export { EunomiaToast, EunomiaToastTagName, } from "./components/alert/toast/toast.js";
 export type { EunomiaToastSeverity, EunomiaToastAppearance, EunomiaToastPosition, EunomiaToastSlide, } from "./components/alert/toast/toast.js";

package/dist/mixins/button.mixin.d.ts

@@ -34,7 +34,7 @@ export type ButtonSize = EunomiaSize;
  * (a floating action button has no `stroke`/`raised`/`flat`/`ghost` look of
  * its own).
  */
-export type EunomiaButtonAppearance = Extract<EunomiaAppearance, "default" | "fill" | "outline" | "flat" | "raised" | "ghost">;
+export type EunomiaButtonAppearance = Extract<EunomiaAppearance, "soft" | "fill" | "outline" | "flat" | "raised" | "ghost">;
 /**
  * Interface for the ButtonMixin.
  * Extend this in components if needed.

package/dist/mixins/button.mixin.js

@@ -110,7 +110,11 @@ export const ButtonMixin = (superClass) => {
         }
         /**
          * Handles keyboard interaction.
-         * Supports "Enter" and "Space" to simulate native button behavior.
+         * Supports "Enter" and "Space" to simulate native button behavior : a
+         * real `click()`, bubbling, composed and cancelable like a native
+         * button's, so delegated listeners (React's `onClick`, a parent slot)
+         * see it too. {@link handleClick} then applies the form, command or
+         * popover behavior, exactly as for a mouse click.
          *
          * @param event the received Keyboard event.
          * @private
@@ -122,9 +126,7 @@ export const ButtonMixin = (superClass) => {
                 return;
             }
             event.preventDefault();
-            if (!this.handleFormBehavior()) {
-                this.dispatchEvent(new Event("click"));
-            }
+            this.click();
         }
         /**
          * Handles native form behavior if the button is inside a <form>.

package/dist/mixins/dialog-surface.mixin.d.ts

@@ -16,6 +16,14 @@ export declare class DialogSurfaceMixinInterface {
     protected closeDialogSurface(fallbackFocusEl?: HTMLElement): void;
     protected teardownDialogSurface(open: boolean): void;
 }
+/**
+ * Where focus lands when a dialog surface opens. `auto` keeps each
+ * component's own default target. `first-field` moves it to the first
+ * focusable element of the body when the surface was opened from the
+ * keyboard, and behaves like `auto` otherwise, so a touch opening doesn't
+ * bring up the virtual keyboard. A slotted `[autofocus]` element always wins.
+ */
+export type EunomiaDialogInitialFocus = "auto" | "first-field";
 /**
  * Shared machinery behind every `manual`-mode popover "dialog surface" in
  * this library (`eun-drawer`, `eun-modal`, `eun-toolbar`'s mobile panel):

package/dist/mixins/field-size.mixin.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from "lit";
+import { Constructor } from "../utils/constructor.type.js";
+import { EunomiaSize } from "../types/variant.type.js";
+/**
+ * Interface defining the contract for components using FieldSizeMixin.
+ */
+export declare class FieldSizeMixinInterface {
+    size?: EunomiaSize;
+}
+/**
+ * A mixin that adds a `size` property to a text-like form field component,
+ * with the same values as `eun-button`'s own. A field and a button of the
+ * same size share their font size, vertical padding and line height, so
+ * they line up at the same height side by side (see `field.styles.ts`).
+ *
+ * @param superClass - The base class to extend.
+ * @returns A new class extending the base with `size` behavior.
+ */
+export declare const FieldSizeMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<FieldSizeMixinInterface> & T;

package/dist/mixins/field-size.mixin.js

@@ -0,0 +1,33 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property } from "lit/decorators.js";
+/**
+ * A mixin that adds a `size` property to a text-like form field component,
+ * with the same values as `eun-button`'s own. A field and a button of the
+ * same size share their font size, vertical padding and line height, so
+ * they line up at the same height side by side (see `field.styles.ts`).
+ *
+ * @param superClass - The base class to extend.
+ * @returns A new class extending the base with `size` behavior.
+ */
+export const FieldSizeMixin = (superClass) => {
+    class FieldSizeMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * The field size, matching the button size of the same name.
+             * By default, set to "m". The default isn't reflected, so an SSR
+             * framework doesn't see an attribute it never rendered.
+             */
+            this.size = "m";
+        }
+    }
+    __decorate([
+        property({ reflect: true, useDefault: true })
+    ], FieldSizeMixinClass.prototype, "size", void 0);
+    return FieldSizeMixinClass;
+};

package/dist/mixins/rounded.mixin.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from "lit";
+import { Constructor } from "../utils/constructor.type.js";
+/**
+ * Interface defining the contract for components using RoundedMixin.
+ */
+export declare class RoundedMixinInterface {
+    rounded?: boolean;
+}
+/**
+ * A mixin that adds a `rounded` property to a single-line control, the same
+ * as `eun-button`'s own : set, the control takes a pill shape through the
+ * `--eun-border-radius-xl` token, without reaching for its own radius
+ * custom property. That custom property still wins over it when set.
+ *
+ * @param superClass - The base class to extend.
+ * @returns A new class extending the base with `rounded` behavior.
+ */
+export declare const RoundedMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<RoundedMixinInterface> & T;

package/dist/mixins/rounded.mixin.js

@@ -0,0 +1,32 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property } from "lit/decorators.js";
+/**
+ * A mixin that adds a `rounded` property to a single-line control, the same
+ * as `eun-button`'s own : set, the control takes a pill shape through the
+ * `--eun-border-radius-xl` token, without reaching for its own radius
+ * custom property. That custom property still wins over it when set.
+ *
+ * @param superClass - The base class to extend.
+ * @returns A new class extending the base with `rounded` behavior.
+ */
+export const RoundedMixin = (superClass) => {
+    class RoundedMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * Whether the control is fully rounded, as a pill.
+             * @default false
+             */
+            this.rounded = false;
+        }
+    }
+    __decorate([
+        property({ type: Boolean, reflect: true })
+    ], RoundedMixinClass.prototype, "rounded", void 0);
+    return RoundedMixinClass;
+};

package/dist/ssr/button-ssr.css

@@ -120,8 +120,8 @@
 }
 :is(eun-button, eun-dropdown-button)[size="s"]:not(:defined) {
   --_defaultFontSize: var(--eun-font-size-xs, 10px);
-  --_defaultPaddingBlock: calc(var(--eun-space-s) / 2);
-  --_defaultPaddingInline: var(--eun-space-s);
+  --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) / 2);
+  --_defaultPaddingInline: var(--eun-space-s, 8px);
   --_defaultLineHeight: 10px;
   --_defaultBorderRadius: var(--eun-border-radius-s, 999px);
 }
@@ -149,7 +149,7 @@
   --_fg: var(--_onSolid);
   --_bd: transparent;
 }
-:is(eun-button, eun-dropdown-button)[appearance="default"]:not(:defined) {
+:is(eun-button, eun-dropdown-button)[appearance="soft"]:not(:defined) {
   --_bg: var(--_tint);
   --_fg: var(--_fgTint);
   --_bd: transparent;
@@ -236,8 +236,8 @@ eun-button:not(:defined) > [slot="end"] {
   content: "";
   order: -1;
   flex-shrink: 0;
-  width: 16px;
-  height: 16px;
+  width: var(--icon-size);
+  height: var(--icon-size);
 }
 
 eun-dropdown-button[label]:not(:defined)::after {

package/dist/ssr/carousel-ssr.css

@@ -36,6 +36,15 @@ eun-carousel:not(:defined) {
   container-type: inline-size;
 }
 
+eun-carousel[show-arrows="false"]:not(:defined) {
+  --_navReserve: 0px;
+  --carousel-nav-display: none;
+}
+
+eun-carousel[show-dots="false"]:not(:defined) {
+  --carousel-dots-display: none;
+}
+
 eun-carousel[visible-slides="2"]:not(:defined) {
   --_visibleCount: 2;
 }

package/dist/ssr/chip-ssr.css

@@ -170,6 +170,10 @@ eun-chip[appearance="flat"]:not(:defined) {
   --_fg: var(--_fg-flat);
 }
 
+eun-chip[rounded="false"]:not(:defined) {
+  border-radius: var(--chip-border-radius, var(--eun-border-radius-s, 5px));
+}
+
 eun-chip[disabled]:not(:defined) {
   opacity: 0.6;
 }
@@ -240,3 +244,7 @@ eun-chip:not(:defined)::after {
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E")
     center / var(--_deleteIconSize) no-repeat;
 }
+
+eun-chip[removable="false"]:not(:defined)::after {
+  display: none;
+}

package/dist/ssr/collapse-ssr.css

@@ -101,6 +101,35 @@ eun-collapse:not(:defined) > [slot="tag"] {
   margin-inline-start: var(--collapse-gap, var(--eun-space-l, 32px));
 }
 
+eun-collapse:not(:defined) > [slot="tag"]:not(eun-tag) {
+  --_borderWidth: var(--tag-border-width, var(--eun-border-width-s, 1px));
+  display: flex;
+  align-items: center;
+  border: var(--_borderWidth) solid var(--tag-border-color, transparent);
+  border-radius: var(--tag-border-radius, var(--eun-border-radius-xl, 999px));
+  padding: max(
+      0px,
+      calc(
+        var(--tag-padding-block, var(--eun-space-xs, 4px)) - var(--_borderWidth)
+      )
+    )
+    max(
+      0px,
+      calc(
+        var(--tag-padding-inline, var(--eun-space-s, 8px)) - var(--_borderWidth)
+      )
+    );
+  background: var(
+    --tag-background-color,
+    var(--eun-color-primary-alpha-20, #3d6fff33)
+  );
+  color: var(--tag-color, var(--eun-color-primary-500, #3d6fff));
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--tag-font-size, var(--eun-font-size-xs, 12px));
+  font-weight: var(--tag-font-weight, var(--eun-font-weight-m, 500));
+  user-select: none;
+}
+
 eun-collapse:not(:defined)::after {
   content: "";
   grid-column: 4;

package/dist/ssr/field-ssr.css

@@ -1,15 +1,53 @@
 :is(eun-input, eun-textarea, eun-select):not(:defined) {
   --_borderColor: var(--field-border-color, var(--eun-border-color, #dee0e7));
+  --_defaultPaddingBlock: var(--eun-space-s, 8px);
+  --_defaultFontSize: var(--eun-font-size-s, 14px);
+  --_defaultLineHeight: 1rem;
+  --_defaultBorderRadius: var(--eun-border-radius-m, 8px);
+  --_defaultPaddingInline: var(--eun-space-s, 8px);
   --_padding: var(
     --field-padding,
-    var(--field-padding-block, var(--eun-space-s, 8px))
-      var(--field-padding-inline, var(--eun-space-s, 8px))
+    var(--field-padding-block, var(--_defaultPaddingBlock))
+      var(--field-padding-inline, var(--_defaultPaddingInline))
   );
   display: block;
   width: 100%;
   color: var(--field-text-color, var(--eun-text-color, #071621));
   font-family: var(--eun-font-family, "Mulish", sans-serif);
-  font-size: var(--field-font-size, var(--eun-font-size-s, 14px));
+  font-size: var(--field-font-size, var(--_defaultFontSize));
+}
+
+eun-textarea:not(:defined) {
+  --_defaultLineHeight: normal;
+}
+
+:is(eun-input, eun-select)[rounded]:not(:defined) {
+  --_defaultBorderRadius: var(--eun-border-radius-xl, 999px);
+  --_defaultPaddingInline: var(--eun-space-m, 16px);
+}
+
+:is(eun-input, eun-select)[size="xs"]:not(:defined) {
+  --_defaultFontSize: var(--eun-font-size-xs, 10px);
+  --_defaultPaddingBlock: var(--eun-space-xxs, 1.6px);
+  --_defaultLineHeight: 10px;
+}
+
+:is(eun-input, eun-select)[size="s"]:not(:defined) {
+  --_defaultFontSize: var(--eun-font-size-xs, 10px);
+  --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) / 2);
+  --_defaultLineHeight: 10px;
+}
+
+:is(eun-input, eun-select)[size="l"]:not(:defined) {
+  --_defaultFontSize: var(--eun-font-size-m, 16px);
+  --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) * 1.25);
+  --_defaultLineHeight: 1.1rem;
+}
+
+:is(eun-input, eun-select)[size="xl"]:not(:defined) {
+  --_defaultFontSize: var(--eun-font-size-l, 1.3rem);
+  --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) * 1.5);
+  --_defaultLineHeight: 1.3rem;
 }
 
 :is(eun-input, eun-textarea, eun-select):is(
@@ -58,8 +96,9 @@
   box-sizing: border-box;
   overflow: hidden;
   padding: var(--_padding);
+  line-height: var(--field-line-height, var(--_defaultLineHeight));
   border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
-  border-radius: var(--field-border-radius, var(--eun-border-radius-m, 8px));
+  border-radius: var(--field-border-radius, var(--_defaultBorderRadius));
   background-color: var(--field-background, transparent);
   box-shadow: var(--field-shadow, none);
   color: var(

package/dist/ssr/image-carousel-ssr.css

@@ -22,3 +22,13 @@ eun-image-carousel:is(:not([images]), [images*="},"]):not(:defined)::after {
   height: var(--image-carousel-thumbnail-size, 64px);
   margin-top: var(--image-carousel-thumbnail-gap, var(--eun-space-s, 8px));
 }
+
+eun-image-carousel[show-thumbnails="false"]:not(:defined)::after {
+  height: var(--image-carousel-dot-size, 8px);
+}
+
+eun-image-carousel[show-thumbnails="false"][show-dots="false"]:not(
+    :defined
+  )::after {
+  display: none;
+}