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

package/dist/mixins/form.mixin.js

@@ -21,6 +21,7 @@ import { ChangeEvent } from "../events/change.event.js";
 export const ERROR_DISPLAY_PROPERTIES = [
     "valid",
     "hideError",
+    "invalid",
     "disabled",
     "touched",
     "dirty",
@@ -46,6 +47,13 @@ export const FormMixin = (superClass) => {
              * @default false
              */
             this.hideError = false;
+            /**
+             * When true, the field is shown as invalid (error styling and
+             * `aria-invalid`) without any message, for an error whose message is
+             * displayed elsewhere. Does not change the field's validity.
+             * @default false
+             */
+            this.invalid = false;
             /**
              * Whether this field behaves like a checkbox/radio (checkable).
              * @default false
@@ -99,6 +107,25 @@ export const FormMixin = (superClass) => {
              * @default false
              */
             this.controlled = false;
+            /**
+             * Whether the hint or error is exposed through the host's own
+             * `aria-description`, for a component whose host is the control itself
+             * (a checkbox, a radio, a switch). The rendered message is then hidden
+             * from assistive technology, so it isn't read again as part of the
+             * control's name, which is computed from the host's content.
+             * @default false
+             * @internal
+             */
+            this.descriptionOnHost = false;
+            /**
+             * Whether a change alone reveals the error, without waiting for focus
+             * to leave the field, for a field whose every change is a complete
+             * choice (a checkbox, a radio, a select) rather than an entry still
+             * being typed.
+             * @default false
+             * @internal
+             */
+            this.errorOnChange = false;
             /**
              * Marks the field dirty on its own `eunchange` — dispatched only from a
              * genuine user-interaction handler, never from the `value`/`checked`
@@ -130,16 +157,29 @@ export const FormMixin = (superClass) => {
             }
         }
         /**
-         * Whether the field currently shows its error : invalid, not disabled,
-         * not `hideError`, and either interacted with (`touched`, `dirty`),
-         * checked by its form, or given an external `error`. A required field
-         * left empty stays quiet until then.
+         * Whether the field currently shows its error state (styling and
+         * `aria-invalid`): not disabled, and either forced by {@link invalid} or
+         * showing its error messages.
          */
         get showError() {
+            return (this.invalid && !this.disabled) || this.showErrorMessages;
+        }
+        /**
+         * Whether the field currently shows its error messages : invalid, not
+         * disabled, not `hideError`, and either left once (`touched`), changed
+         * while {@link errorOnChange} is set (`dirty`), checked by its form, or
+         * given an external `error`. Typing alone never reveals an error, so an
+         * unfinished entry isn't reported as invalid; once shown, the error
+         * follows the value live.
+         */
+        get showErrorMessages() {
             return (!this.valid &&
                 !this.hideError &&
                 !this.disabled &&
-                (this.touched || this.dirty || this.validationRequested || !!this.error));
+                (this.touched ||
+                    (this.dirty && this.errorOnChange) ||
+                    this.validationRequested ||
+                    !!this.error));
         }
         /**
          * Whether the value hasn't changed since the field connected (or since
@@ -198,13 +238,13 @@ export const FormMixin = (superClass) => {
             this.setFormValue(value);
         }
         /**
-         * Gets the validation errors while {@link showError} is true, the hint
-         * otherwise.
+         * Gets the validation errors while {@link showErrorMessages} is true, the
+         * hint otherwise.
          *
          * @returns Error message string, array of messages, or the hint.
          */
         get description() {
-            if (!this.showError) {
+            if (!this.showErrorMessages) {
                 return this.hint;
             }
             if (this.errorMessages.length) {
@@ -282,6 +322,29 @@ export const FormMixin = (superClass) => {
             }
             super.willUpdate(changedProperties);
         }
+        /**
+         * LitElement lifecycle method called after update. Mirrors the hint or
+         * error onto the host's `aria-description` while
+         * {@link descriptionOnHost} is set.
+         *
+         * @param changedProperties - Map of changed properties and their old values.
+         */
+        updated(changedProperties) {
+            super.updated(changedProperties);
+            if (!this.descriptionOnHost) {
+                return;
+            }
+            const { description } = this;
+            const text = Array.isArray(description)
+                ? description.join(" ")
+                : description;
+            if (text) {
+                this.setAttribute("aria-description", text);
+            }
+            else {
+                this.removeAttribute("aria-description");
+            }
+        }
         /**
          * Syncs the field value with the form submission internals.
          * If disabled or unchecked (for checkable), sets empty form data.
@@ -351,8 +414,8 @@ export const FormMixin = (superClass) => {
             return this.renderError();
         }
         /**
-         * Renders the error messages while {@link showError} is true, the hint
-         * otherwise.
+         * Renders the error messages while {@link showErrorMessages} is true, the
+         * hint otherwise.
          *
          * @returns Template result with error messages, hint or nothing.
          */
@@ -361,15 +424,23 @@ export const FormMixin = (superClass) => {
             if (!description?.length) {
                 return nothing;
             }
-            if (!this.showError) {
+            if (!this.showErrorMessages) {
                 return html `
-          <p id="description" class="hint-messages">
+          <p
+            id="description"
+            class="hint-messages"
+            aria-hidden=${this.descriptionOnHost ? "true" : nothing}
+          >
             <span>${description}</span>
           </p>
         `;
             }
             return html `
-        <p id="description" class="error-messages">
+        <p
+          id="description"
+          class="error-messages"
+          aria-hidden=${this.descriptionOnHost ? "true" : nothing}
+        >
           ${when(Array.isArray(description), () => description.map((msg) => html `<span>${msg}</span>`), () => html `<span>${description}</span>`)}
         </p>
       `;
@@ -386,6 +457,9 @@ export const FormMixin = (superClass) => {
     __decorate([
         property({ type: Boolean, attribute: "hide-error" })
     ], FormMixinClass.prototype, "hideError", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], FormMixinClass.prototype, "invalid", void 0);
     __decorate([
         state()
     ], FormMixinClass.prototype, "valueState", void 0);

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

@@ -14,7 +14,7 @@ export declare class LocalizableMixinInterface {
  * it: user-facing strings with no dedicated override property at all
  * (navigation button labels, ARIA group names, and the like), and
  * strings that *do* have their own override property (e.g. `eun-chip`'s
- * `ariaLabelRemove`) but fall back to `this.dictionary` — instead of a
+ * `removeLabel`) but fall back to `this.dictionary` — instead of a
  * hardcoded English literal — when that property is left unset, so the
  * default follows `locale` while an explicit override still wins.
  *

package/dist/mixins/localizable.mixin.js

@@ -12,7 +12,7 @@ import { dictionaries, getDefaultLocale } from "../i18n/index.js";
  * it: user-facing strings with no dedicated override property at all
  * (navigation button labels, ARIA group names, and the like), and
  * strings that *do* have their own override property (e.g. `eun-chip`'s
- * `ariaLabelRemove`) but fall back to `this.dictionary` — instead of a
+ * `removeLabel`) but fall back to `this.dictionary` — instead of a
  * hardcoded English literal — when that property is left unset, so the
  * default follows `locale` while an explicit override still wins.
  *

package/dist/mixins/radio.mixin.js

@@ -37,6 +37,17 @@ export const RadioMixin = (superClass) => {
              * @default true
              */
             this.checkable = true;
+            /**
+             * The host is the control, so its hint or error goes on its own
+             * `aria-description`.
+             * @internal
+             */
+            this.descriptionOnHost = true;
+            /**
+             * Every change is a complete choice, so its error shows right away.
+             * @internal
+             */
+            this.errorOnChange = true;
             /**
              * Overrides `ValidatorsMixin`'s own `required` check, which validates
              * emptiness of `this.value` — meaningless here, since a radio's `value`
@@ -124,7 +135,6 @@ export const RadioMixin = (superClass) => {
          * - Prevents propagation.
          * - Ignores action if `disabled` or `readonly`.
          * - Sets `checked` to `true` ; never unchecks (see the class doc).
-         * - Updates ARIA attributes (`aria-description`).
          * - Dispatches a custom `ChangeEvent`.
          *
          * @param event The triggered mouse or keyboard event
@@ -141,15 +151,6 @@ export const RadioMixin = (superClass) => {
             this.checked = true;
             this.updateInternals();
             this.checkValidity(this.checked);
-            if (this.description) {
-                const attribute = this.description instanceof Array
-                    ? this.description.join(",")
-                    : this.description;
-                this.setAttribute("aria-description", attribute);
-            }
-            else {
-                this.removeAttribute("aria-description");
-            }
             this.dispatchEvent(new ChangeEvent(this.checked));
         }
         /**

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

@@ -10,7 +10,8 @@ export declare class ReadonlyMixinInterface {
  * A mixin that adds a `readonly` property to a LitElement component.
  *
  * When the `readonly` state changes, it automatically updates the `aria-readonly` attribute
- * for accessibility compliance.
+ * for accessibility compliance. The attribute is only present while readonly, so an SSR
+ * framework hydrating a non-readonly field doesn't see an attribute it never rendered.
  *
  * @param superClass - The base LitElement class to extend.
  * @returns A class extending the base class with `readonly` functionality.

package/dist/mixins/readonly.mixin.js

@@ -9,7 +9,8 @@ import { property } from "lit/decorators.js";
  * A mixin that adds a `readonly` property to a LitElement component.
  *
  * When the `readonly` state changes, it automatically updates the `aria-readonly` attribute
- * for accessibility compliance.
+ * for accessibility compliance. The attribute is only present while readonly, so an SSR
+ * framework hydrating a non-readonly field doesn't see an attribute it never rendered.
  *
  * @param superClass - The base LitElement class to extend.
  * @returns A class extending the base class with `readonly` functionality.
@@ -28,12 +29,18 @@ export const ReadonlyMixin = (superClass) => {
          * LitElement lifecycle method.
          * Called when reactive properties are updated.
          *
-         * Updates `aria-readonly` whenever `readonly` changes.
+         * Updates `aria-readonly` whenever `readonly` changes. Removed rather
+         * than set to "false", which means the same.
          */
         updated(_changedProperties) {
             super.updated(_changedProperties);
             if (_changedProperties.has("readonly")) {
-                this.setAttribute("aria-readonly", String(this.readonly));
+                if (this.readonly) {
+                    this.setAttribute("aria-readonly", "true");
+                }
+                else {
+                    this.removeAttribute("aria-readonly");
+                }
             }
         }
     }

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/alert-ssr.css

@@ -0,0 +1,187 @@
+eun-alert:not(:defined) {
+  --_background: var(--eun-surface-sunken, #f7f8fa);
+  --_backgroundFilled: var(--_background);
+  --_borderColor: var(--eun-color-grey-300, #dee0e7);
+  --_titleColor: var(--eun-text-color, #071621);
+  --_bw: var(--alert-border-width, var(--eun-border-width-s, 1px));
+  --_frame: transparent;
+  --_textColumn: 2;
+  --_contentColor: var(--alert-content-color, var(--eun-text-color, #071621));
+  --_headingColor: var(--alert-color, var(--_titleColor));
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+  column-gap: var(--alert-gap, var(--eun-space-m, 16px));
+  row-gap: var(--alert-row-gap, var(--eun-space-s, 8px));
+  box-sizing: border-box;
+  width: 100%;
+  border: var(--_bw) solid var(--alert-border-color, var(--_frame));
+  padding: var(
+    --alert-padding,
+    var(
+        --alert-padding-block,
+        max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+      )
+      var(
+        --alert-padding-inline,
+        max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+      )
+  );
+  border-radius: var(--alert-border-radius, var(--eun-border-radius-m, 8px));
+  background: linear-gradient(
+      to right,
+      var(--alert-border-color, var(--_borderColor)) 4px,
+      var(--alert-background-color, var(--_background)) 4px
+    )
+    border-box;
+  color: var(--_headingColor);
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--eun-font-size-s, 14px);
+  font-weight: var(--eun-font-weight-l, 700);
+}
+
+eun-alert[severity="info"]:not(:defined) {
+  --_background: var(--eun-color-info-alpha-5, #097faf0d);
+  --_backgroundFilled: var(--eun-color-info-100, #097faf);
+  --_borderColor: var(--eun-color-info-100, #097faf);
+  --_titleColor: var(--eun-color-info-100, #097faf);
+}
+
+eun-alert[severity="success"]:not(:defined) {
+  --_background: var(--eun-color-success-alpha-5, #1a99480d);
+  --_backgroundFilled: var(--eun-color-success-100, #1a9948);
+  --_borderColor: var(--eun-color-success-100, #1a9948);
+  --_titleColor: var(--eun-color-success-100, #1a9948);
+}
+
+eun-alert[severity="warning"]:not(:defined) {
+  --_background: var(--eun-color-warning-alpha-5, #c852070d);
+  --_backgroundFilled: var(--eun-color-warning-100, #c85207);
+  --_borderColor: var(--eun-color-warning-100, #c85207);
+  --_titleColor: var(--eun-color-warning-100, #c85207);
+}
+
+eun-alert[severity="critical"]:not(:defined) {
+  --_background: var(--eun-color-critical-alpha-5, #aa00140d);
+  --_backgroundFilled: var(--eun-color-critical-100, #aa0014);
+  --_borderColor: var(--eun-color-critical-100, #aa0014);
+  --_titleColor: var(--eun-color-critical-100, #aa0014);
+}
+
+eun-alert[severity="neutral"]:not(:defined) {
+  --_onFilled: var(--eun-color-grey-0, #ffffff);
+  --_background: var(--eun-surface-sunken-strong, #ecedf0);
+  --_backgroundFilled: var(--eun-color-grey-700, #484e61);
+  --_borderColor: var(--eun-color-grey-700, #484e61);
+  --_titleColor: var(--eun-color-grey-700, #484e61);
+}
+
+eun-alert[appearance="flat"]:not(:defined) {
+  background: var(--alert-background-color, var(--_background));
+}
+
+eun-alert[appearance="outline"]:not(:defined) {
+  --_frame: var(--_borderColor);
+  background: var(--alert-background-color, var(--eun-surface-color, #ffffff));
+}
+
+eun-alert[appearance="fill"]:not(:defined) {
+  --_contentColor: var(--alert-content-color, var(--_onFilled, #fff));
+  --_headingColor: var(--alert-color, var(--_onFilled, #fff));
+  background: var(--alert-background-color, var(--_backgroundFilled));
+}
+
+eun-alert[closeable]:not(:defined) {
+  padding-right: calc(
+    var(
+        --alert-padding,
+        var(
+          --alert-padding-inline,
+          max(0px, calc(var(--eun-space-m, 16px) - var(--_bw)))
+        )
+      ) +
+      var(--eun-space-l, 32px)
+  );
+}
+
+eun-alert:is(
+    [hide-icon],
+    :not([severity], [icon]):not(:has(> [slot="icon"]))
+  ):not(:defined) {
+  --_textColumn: 1;
+  grid-template-columns: 1fr;
+}
+
+eun-alert:not(:defined)::before {
+  content: "";
+  grid-column: 1;
+  grid-row: 1;
+  align-self: center;
+  width: 20px;
+  height: 20px;
+}
+
+eun-alert:is([hide-icon], :has(> [slot="icon"]), :not([severity], [icon])):not(
+    :defined
+  )::before {
+  display: none;
+}
+
+eun-alert:not(:defined) > [slot="icon"] {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: center;
+  display: flex;
+}
+
+eun-alert[hide-icon]:not(:defined) > [slot="icon"] {
+  grid-column: 1;
+}
+
+eun-alert:not([heading]):not(:defined) > :not([slot]) {
+  grid-column: var(--_textColumn);
+  grid-row: 1;
+  align-self: center;
+}
+
+eun-alert:not(:defined) > :not([slot]) {
+  justify-self: start;
+}
+
+eun-alert[heading]:not(:defined)::after {
+  content: attr(heading);
+  order: -1;
+  grid-column: var(--_textColumn);
+  grid-row: 1;
+  align-self: center;
+}
+
+eun-alert[heading]:not(:defined) > :not([slot]),
+eun-alert:not(:defined) > [slot="description"],
+eun-alert:not(:defined) > [slot="action"] {
+  grid-column: var(--_textColumn);
+  font-weight: normal;
+}
+
+:where(
+  eun-alert[heading]:not(:defined) > :not([slot]),
+  eun-alert:not(:defined) > [slot="description"],
+  eun-alert:not(:defined) > [slot="icon"],
+  eun-alert:not(:defined) > [slot="action"]:not(:any-link)
+) {
+  color: var(--_contentColor);
+}
+
+eun-alert[heading]:not(:defined) > :not([slot]) {
+  order: 1;
+}
+
+eun-alert:not(:defined) > [slot="description"] {
+  order: 2;
+  margin: 0;
+}
+
+eun-alert:not(:defined) > [slot="action"] {
+  order: 3;
+  justify-self: start;
+}

package/dist/ssr/badge-ssr.css

@@ -0,0 +1,67 @@
+eun-badge:not(:defined) {
+  --_background: var(
+    --badge-background,
+    var(--eun-color-critical-100, #aa0014)
+  );
+  --_color: var(--badge-color, #fff);
+  --_size: var(--badge-size, 18px);
+  --_paddingInline: var(--badge-padding-inline, 6px);
+  --_fontSize: var(--badge-font-size, 11px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--_size);
+  height: var(--_size);
+  padding: 0 var(--_paddingInline);
+  border-radius: 999px;
+  background: var(--_background);
+  color: var(--_color);
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--_fontSize);
+  font-weight: var(--eun-font-weight-l, 700);
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: baseline;
+  user-select: none;
+}
+
+eun-badge:empty:not(:defined) {
+  width: var(--_size);
+  padding: 0;
+}
+
+eun-badge[size="s"]:not(:defined) {
+  --_size: var(--badge-size, 14px);
+  --_paddingInline: var(--badge-padding-inline, 5px);
+  --_fontSize: var(--badge-font-size, 10px);
+}
+
+eun-badge[size="l"]:not(:defined) {
+  --_size: var(--badge-size, 22px);
+  --_paddingInline: var(--badge-padding-inline, 7px);
+  --_fontSize: var(--badge-font-size, 12px);
+}
+
+eun-badge[color="primary"]:not(:defined) {
+  --_background: var(--badge-background, var(--eun-color-primary-500, #3d6fff));
+  --_color: var(--badge-color, var(--eun-color-on-primary-500, #ffffff));
+}
+
+eun-badge[color="secondary"]:not(:defined) {
+  --_background: var(
+    --badge-background,
+    var(--eun-color-secondary-500, #e5a030)
+  );
+  --_color: var(--badge-color, var(--eun-color-on-secondary-500, #000000de));
+}
+
+eun-badge[color="success"]:not(:defined) {
+  --_background: var(--badge-background, var(--eun-color-success-100, #1a9948));
+  --_color: var(--badge-color, #fff);
+}
+
+eun-badge[color="warning"]:not(:defined) {
+  --_background: var(--badge-background, var(--eun-color-warning-100, #c85207));
+  --_color: var(--badge-color, #fff);
+}

package/dist/ssr/breadcrumb-ssr.css

@@ -0,0 +1,41 @@
+eun-breadcrumb:not(:defined) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  row-gap: var(--breadcrumb-gap, var(--eun-space-xs, 4px));
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--breadcrumb-font-size, var(--eun-font-size-s, 14px));
+}
+
+:where(eun-breadcrumb:not(:defined) > *) {
+  max-width: var(--breadcrumb-item-max-width, 240px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--breadcrumb-current-color, var(--eun-text-secondary, #484e61));
+  font-weight: var(--eun-font-weight-m, 500);
+}
+
+:where(eun-breadcrumb:not(:defined) > a[href]) {
+  color: var(--breadcrumb-link-color, var(--eun-color-primary-500, #3d6fff));
+  font-weight: inherit;
+  text-decoration: var(--breadcrumb-link-text-decoration, underline);
+}
+
+:where(
+  eun-breadcrumb:not(:defined) > a[aria-current="page"],
+  eun-breadcrumb:not(:defined):not(:has(> [aria-current="page"])) > a:last-child
+) {
+  color: var(--breadcrumb-current-color, var(--eun-text-secondary, #484e61));
+  font-weight: var(--eun-font-weight-m, 500);
+  text-decoration: none;
+}
+
+eun-breadcrumb:not(:defined) > :not(:last-child)::after {
+  content: var(--breadcrumb-separator, "/");
+  display: inline-block;
+  margin-inline: var(--breadcrumb-separator-gap, var(--eun-space-s, 8px));
+  color: var(--breadcrumb-separator-color, var(--eun-text-secondary, #484e61));
+  font-weight: var(--eun-font-weight-m, 500);
+  text-decoration: none;
+}

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 {