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

package/dist/cdn/styles/tools/mixins/layout/eunomia-grid.mixin.scss

@@ -1,100 +1,164 @@
-@use "sass:map";
-@use "./../../variables/eunomia.breakpoints.scss" as *;
+@use "./../media-queries/eunomia-media-queries.mixin.scss" as *;
 
 @mixin eunomia-grid-layouts {
-  .eun-grid {
+  :where(.eun-grid) {
+    --_cols0: var(--eun-grid-columns, var(--_variantCols0, 1));
+    --_cols1: var(
+      --eun-grid-columns-mobile,
+      var(--eun-grid-columns, var(--_variantCols1, var(--_variantCols0, 1)))
+    );
+    --_cols2: var(
+      --eun-grid-columns-tablet,
+      var(
+        --eun-grid-columns-mobile,
+        var(
+          --eun-grid-columns,
+          var(--_variantCols2, var(--_variantCols1, var(--_variantCols0, 1)))
+        )
+      )
+    );
+    --_cols3: var(
+      --eun-grid-columns-laptop,
+      var(
+        --eun-grid-columns-tablet,
+        var(
+          --eun-grid-columns-mobile,
+          var(
+            --eun-grid-columns,
+            var(
+              --_variantCols3,
+              var(
+                --_variantCols2,
+                var(--_variantCols1, var(--_variantCols0, 1))
+              )
+            )
+          )
+        )
+      )
+    );
+    --_cols4: var(
+      --eun-grid-columns-desktop,
+      var(
+        --eun-grid-columns-laptop,
+        var(
+          --eun-grid-columns-tablet,
+          var(
+            --eun-grid-columns-mobile,
+            var(
+              --eun-grid-columns,
+              var(
+                --_variantCols4,
+                var(
+                  --_variantCols3,
+                  var(
+                    --_variantCols2,
+                    var(--_variantCols1, var(--_variantCols0, 1))
+                  )
+                )
+              )
+            )
+          )
+        )
+      )
+    );
+    --_cols: var(--_cols0);
     display: grid;
+    grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
     row-gap: var(--eun-grid-row-gap, var(--eun-space-s));
     column-gap: var(--eun-grid-column-gap, var(--eun-space-m));
   }
 
-  .eun-grid--halves {
-    grid-template-columns: repeat(2, 1fr);
+  @include eunomia-from(mobile) {
+    :where(.eun-grid) {
+      --_cols: var(--_cols1);
+    }
   }
-
-  .eun-grid--thirds-1-2 {
-    grid-template-columns: 1fr 2fr;
+  @include eunomia-from(tablet) {
+    :where(.eun-grid) {
+      --_cols: var(--_cols2);
+    }
+  }
+  @include eunomia-from(laptop) {
+    :where(.eun-grid) {
+      --_cols: var(--_cols3);
+    }
+  }
+  @include eunomia-from(desktop) {
+    :where(.eun-grid) {
+      --_cols: var(--_cols4);
+    }
   }
 
-  .eun-grid--thirds-2-1 {
-    grid-template-columns: 2fr 1fr;
+  :where(.eun-grid--halves),
+  :where(.eun-grid--2x2) {
+    --_variantCols2: 2;
   }
 
-  .eun-grid--thirds-equal {
-    grid-template-columns: repeat(3, 1fr);
+  :where(.eun-grid--thirds-equal) {
+    --_variantCols2: 3;
   }
 
-  .eun-grid--2x2 {
-    grid-template-columns: repeat(2, 1fr);
+  :where(.eun-grid--2x2) {
     grid-auto-flow: row;
   }
 
-  .eun-grid--sidebar-left,
-  .eun-grid--sidebar-right {
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: repeat(2, auto);
-  }
+  @include eunomia-from(tablet) {
+    :where(.eun-grid--thirds-1-2) {
+      grid-template-columns: 1fr 2fr;
+    }
 
-  .eun-grid--sidebar-left > :first-child {
-    grid-column: 1;
-    grid-row: 1 / span 2;
-  }
+    :where(.eun-grid--thirds-2-1) {
+      grid-template-columns: 2fr 1fr;
+    }
 
-  .eun-grid--sidebar-right > :first-child {
-    grid-column: 2;
-    grid-row: 1 / span 2;
+    :where(.eun-grid--sidebar-left),
+    :where(.eun-grid--sidebar-right) {
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(2, auto);
+    }
+
+    :where(.eun-grid--sidebar-left > :first-child) {
+      grid-column: 1;
+      grid-row: 1 / span 2;
+    }
+
+    :where(.eun-grid--sidebar-right > :first-child) {
+      grid-column: 2;
+      grid-row: 1 / span 2;
+    }
   }
 
-  .eun-grid--lead-left,
-  .eun-grid--lead-right {
+  :where(.eun-grid--lead-left),
+  :where(.eun-grid--lead-right) {
     grid-template-rows: repeat(2, auto);
   }
 
-  .eun-grid--lead-left {
+  :where(.eun-grid--lead-left) {
     grid-template-columns: auto 1fr;
   }
 
-  .eun-grid--lead-right {
+  :where(.eun-grid--lead-right) {
     grid-template-columns: 1fr auto;
   }
 
-  .eun-grid--lead-left > :first-child {
+  :where(.eun-grid--lead-left > :first-child) {
     grid-column: 1;
     grid-row: 1 / span 2;
   }
 
-  .eun-grid--lead-right > :first-child {
+  :where(.eun-grid--lead-right > :first-child) {
     grid-column: 2;
     grid-row: 1 / span 2;
   }
 
-  .eun-grid--gallery {
+  :where(.eun-grid--gallery) {
     grid-template-columns: repeat(
       auto-fill,
       minmax(var(--eun-grid-min-width, 220px), 1fr)
     );
   }
 
-  .eun-grid--panel {
+  :where(.eun-grid--panel) {
     grid-template-rows: auto 1fr auto;
   }
-
-  @media (max-width: map.get($map-device-width, tablet) - 1) {
-    .eun-grid--halves,
-    .eun-grid--thirds-1-2,
-    .eun-grid--thirds-2-1,
-    .eun-grid--thirds-equal,
-    .eun-grid--2x2,
-    .eun-grid--sidebar-left,
-    .eun-grid--sidebar-right {
-      grid-template-columns: 1fr;
-      grid-template-rows: none;
-    }
-
-    .eun-grid--sidebar-left > :first-child,
-    .eun-grid--sidebar-right > :first-child {
-      grid-column: 1;
-      grid-row: auto;
-    }
-  }
 }

package/dist/cdn/styles/tools/mixins/media-queries/eunomia-media-queries.mixin.scss

@@ -0,0 +1,69 @@
+@use "sass:map";
+@use "./../../variables/eunomia.breakpoints.scss" as *;
+
+@function -eunomia-breakpoint($breakpoint) {
+  @if not map.has-key($map-device-width, $breakpoint) {
+    @error "Unknown breakpoint `#{$breakpoint}`, expected one of #{map.keys($map-device-width)}.";
+  }
+  @return map.get($map-device-width, $breakpoint);
+}
+
+@mixin eunomia-below($breakpoint) {
+  @media (width < #{-eunomia-breakpoint($breakpoint)}) {
+    @content;
+  }
+}
+
+@mixin eunomia-from($breakpoint) {
+  @media (width >= #{-eunomia-breakpoint($breakpoint)}) {
+    @content;
+  }
+}
+
+@mixin eunomia-below-mobile {
+  @include eunomia-below(mobile) {
+    @content;
+  }
+}
+
+@mixin eunomia-below-tablet {
+  @include eunomia-below(tablet) {
+    @content;
+  }
+}
+
+@mixin eunomia-below-laptop {
+  @include eunomia-below(laptop) {
+    @content;
+  }
+}
+
+@mixin eunomia-below-desktop {
+  @include eunomia-below(desktop) {
+    @content;
+  }
+}
+
+@mixin eunomia-from-mobile {
+  @include eunomia-from(mobile) {
+    @content;
+  }
+}
+
+@mixin eunomia-from-tablet {
+  @include eunomia-from(tablet) {
+    @content;
+  }
+}
+
+@mixin eunomia-from-laptop {
+  @include eunomia-from(laptop) {
+    @content;
+  }
+}
+
+@mixin eunomia-from-desktop {
+  @include eunomia-from(desktop) {
+    @content;
+  }
+}

package/dist/cdn/styles/tools/mixins/settings/eunomia-alpha.mixin.scss

@@ -1,6 +1,3 @@
-// Translucent surface/text primitives, derived from the active theme's
-// `--eun-surface-color` and `--eun-text-color`. Included next to each theme's
-// color mixin, so they follow light/dark and brand switches automatically.
 @mixin eunomia-alpha {
   --eun-surface-transparent-25: color-mix(
     in srgb,
@@ -34,6 +31,33 @@
     transparent
   );
 
-  // Fixed (theme-independent) muted text, legible on a dark surface
   --eun-text-on-dark-secondary: rgba(255, 255, 255, 0.7);
+
+  --eun-text-on-inverse-secondary: color-mix(
+    in srgb,
+    var(--eun-text-on-inverse) 70%,
+    transparent
+  );
+  --eun-border-on-inverse: color-mix(
+    in srgb,
+    var(--eun-text-on-inverse) 20%,
+    transparent
+  );
+  --eun-content-hover-on-inverse: color-mix(
+    in srgb,
+    var(--eun-text-on-inverse) 8%,
+    transparent
+  );
+  --eun-content-pressed-on-inverse: color-mix(
+    in srgb,
+    var(--eun-text-on-inverse) 14%,
+    transparent
+  );
+
+  // Dimmed layer behind a modal or a drawer
+  --eun-backdrop-color: color-mix(
+    in srgb,
+    var(--eun-surface-inverse) 45%,
+    transparent
+  );
 }

package/dist/cdn/styles/tools/mixins/settings/eunomia-motion.mixin.scss

@@ -0,0 +1,9 @@
+@mixin eunomia-motion {
+  --eun-duration-xs: 100ms;
+  --eun-duration-s: 150ms;
+  --eun-duration-m: 200ms;
+  --eun-duration-l: 250ms;
+  --eun-duration-xl: 300ms;
+  --eun-easing-default: ease;
+  --eun-easing-out: ease-out;
+}

package/dist/cdn/styles/tools/variables/eunomia.breakpoints.scss

@@ -1,3 +1,7 @@
+// Generated by library/scripts/breakpoints.mjs from
+// library/src/breakpoints.ts, the single source of the library's
+// breakpoints. Don't edit it : change them there, then run
+// `npm run breakpoints` in library/.
 $map-device-width: (
   mobile: 600px,
   tablet: 768px,

package/dist/components/action/button/button.d.ts

@@ -33,7 +33,7 @@ declare const EunomiaButton_base: import("../../../utils/constructor.type.js").C
  * @prop {string} [loadingLabel='Loading…'] - The accessible label announced while the button is loading
  * @prop {string} command - The command sent to the element targeted by commandFor when the button is clicked, following the Invoker Commands API
  * @prop {string} commandFor - The id of the element that command is sent to
- * @attr {string} aria-label - The accessible label for the button. When the button opens a link in a new tab, this automatically gets a note appended announcing it
+ * @attr {string} aria-label - The accessible label for the button. When the button opens a link in a new tab, this automatically gets a note appended announcing it. Ignored with a slotted anchor, which takes it instead
  * @prop {'default' | 'fill' | 'outline' | 'flat' | 'raised' | 'ghost'} [appearance='fill'] - The button's surface style. Fill is a solid, colored background with light text. Default is a paler tint of the same color. Outline keeps the color as a border instead of a fill. Flat always renders a muted, low emphasis surface regardless of color. Raised adds a drop shadow. Ghost shows no surface at rest, only gaining a border and a tinted background on hover, focus, or press
  * @fires click - Fired when the button is activated by mouse, Enter, or Space
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable
@@ -42,6 +42,8 @@ declare const EunomiaButton_base: import("../../../utils/constructor.type.js").C
  * @cssprop [--button-background-active] - Sets the background color while pressed
  * @cssprop [--button-text] - Sets the text color
  * @cssprop [--button-padding] - Sets the button's padding, for every size
+ * @cssprop [--button-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --button-padding is set
+ * @cssprop [--button-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --button-padding is set
  * @cssprop [--button-border-radius] - Sets the corner radius of the button, for every size and over rounded
  * @cssprop [--button-focus-outline] - Sets the color of the focus outline
  * @cssprop [--button-transition] - Sets the duration of the button's transitions
@@ -49,7 +51,10 @@ declare const EunomiaButton_base: import("../../../utils/constructor.type.js").C
  * @cssprop [--button-shadow-hover] - Sets the box shadow on hover, falling back to button-shadow when unset
  * @cssprop [--button-border-color] - Sets the border color, overriding the color the active color would otherwise use
  * @cssprop [--button-border-color-hover] - Sets the border color on hover or focus, falling back to button-border-color when unset
- * @cssprop [--button-border-size] - Sets the width of the border
+ * @cssprop [--button-border-size] - Sets the width of the border. Defaults to 1px for outline and 1.5px otherwise
+ * @cssprop [--button-font-size] - Sets the font size, for every size
+ * @cssprop [--button-font-weight] - Sets the font weight
+ * @cssprop [--button-line-height] - Sets the line height, for every size. Also sizes the icons
  * @cssprop [--button-full] - Set to true to stretch the button like the full attribute does. Unlike the attribute, a container query can set it, keeping the responsive behavior in pure CSS. Needs a browser supporting the CSS if() function
  * @element eun-button
  */
@@ -91,7 +96,8 @@ export declare class EunomiaButton extends EunomiaButton_base {
      * regardless of `color` ; `raised` adds a drop shadow ; `ghost` has no
      * visible surface at rest at all — a border (and a tinted background)
      * only appear on hover/focus/active, defaulting to a neutral gray when
-     * `color` isn't also set.
+     * `color` isn't also set. The default isn't reflected, so an SSR framework
+     * doesn't see an attribute it never rendered.
      * @default fill
      */
     appearance: EunomiaButtonAppearance;

package/dist/components/action/button/button.js

@@ -57,7 +57,7 @@ export const EunomiaButtonTagName = "eun-button";
  * @prop {string} [loadingLabel='Loading…'] - The accessible label announced while the button is loading
  * @prop {string} command - The command sent to the element targeted by commandFor when the button is clicked, following the Invoker Commands API
  * @prop {string} commandFor - The id of the element that command is sent to
- * @attr {string} aria-label - The accessible label for the button. When the button opens a link in a new tab, this automatically gets a note appended announcing it
+ * @attr {string} aria-label - The accessible label for the button. When the button opens a link in a new tab, this automatically gets a note appended announcing it. Ignored with a slotted anchor, which takes it instead
  * @prop {'default' | 'fill' | 'outline' | 'flat' | 'raised' | 'ghost'} [appearance='fill'] - The button's surface style. Fill is a solid, colored background with light text. Default is a paler tint of the same color. Outline keeps the color as a border instead of a fill. Flat always renders a muted, low emphasis surface regardless of color. Raised adds a drop shadow. Ghost shows no surface at rest, only gaining a border and a tinted background on hover, focus, or press
  * @fires click - Fired when the button is activated by mouse, Enter, or Space
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable
@@ -66,6 +66,8 @@ export const EunomiaButtonTagName = "eun-button";
  * @cssprop [--button-background-active] - Sets the background color while pressed
  * @cssprop [--button-text] - Sets the text color
  * @cssprop [--button-padding] - Sets the button's padding, for every size
+ * @cssprop [--button-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --button-padding is set
+ * @cssprop [--button-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --button-padding is set
  * @cssprop [--button-border-radius] - Sets the corner radius of the button, for every size and over rounded
  * @cssprop [--button-focus-outline] - Sets the color of the focus outline
  * @cssprop [--button-transition] - Sets the duration of the button's transitions
@@ -73,7 +75,10 @@ export const EunomiaButtonTagName = "eun-button";
  * @cssprop [--button-shadow-hover] - Sets the box shadow on hover, falling back to button-shadow when unset
  * @cssprop [--button-border-color] - Sets the border color, overriding the color the active color would otherwise use
  * @cssprop [--button-border-color-hover] - Sets the border color on hover or focus, falling back to button-border-color when unset
- * @cssprop [--button-border-size] - Sets the width of the border
+ * @cssprop [--button-border-size] - Sets the width of the border. Defaults to 1px for outline and 1.5px otherwise
+ * @cssprop [--button-font-size] - Sets the font size, for every size
+ * @cssprop [--button-font-weight] - Sets the font weight
+ * @cssprop [--button-line-height] - Sets the line height, for every size. Also sizes the icons
  * @cssprop [--button-full] - Set to true to stretch the button like the full attribute does. Unlike the attribute, a container query can set it, keeping the responsive behavior in pure CSS. Needs a browser supporting the CSS if() function
  * @element eun-button
  */
@@ -93,7 +98,8 @@ let EunomiaButton = class EunomiaButton extends ButtonMixin(CommandMixin(Disable
          * regardless of `color` ; `raised` adds a drop shadow ; `ghost` has no
          * visible surface at rest at all — a border (and a tinted background)
          * only appear on hover/focus/active, defaulting to a neutral gray when
-         * `color` isn't also set.
+         * `color` isn't also set. The default isn't reflected, so an SSR framework
+         * doesn't see an attribute it never rendered.
          * @default fill
          */
         this.appearance = "fill";
@@ -312,7 +318,7 @@ __decorate([
     property({ reflect: true })
 ], EunomiaButton.prototype, "severity", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, useDefault: true })
 ], EunomiaButton.prototype, "appearance", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

package/dist/components/action/button/button.styles.js

@@ -9,6 +9,8 @@ import { buttonPaletteStyles } from "../shared-styles/button-palette.styles.js";
  * [--button-background-active] - Set a custom button background color for active state. Derived from --button-background when only that one is set
  * [--button-text] - Set a custom button text color, for every appearance and color
  * [--button-padding] - Set a custom padding to the button, for every size
+ * [--button-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --button-padding is set
+ * [--button-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --button-padding is set
  * [--button-border-radius] - Set a custom radius to the button border, for every size and over `rounded`
  * [--button-focus-outline] - Set a custom color to the focus outline
  * [--button-transition] - Set a custom button transition time
@@ -16,7 +18,10 @@ import { buttonPaletteStyles } from "../shared-styles/button-palette.styles.js";
  * [--button-shadow-hover] - Set a custom box shadow to the button on hover state (used by the `raised` variant)
  * [--button-border-color] - Set a custom border color, for every appearance and color
  * [--button-border-color-hover] - Set a custom border color for hover/focus-visible state, falling back to --button-border-color
- * [--button-border-size] - Set a custom border width
+ * [--button-border-size] - Set a custom border width. Defaults to 1px for `outline` and 1.5px otherwise
+ * [--button-font-size] - Set a custom font size, for every size
+ * [--button-font-weight] - Set a custom font weight
+ * [--button-line-height] - Set a custom line height, for every size. Also sizes the icons
  * [--button-full] - Set to `true` to get the same result as the `full` attribute. Meant to be set from a container query
  */
 const base = css `
@@ -29,17 +34,23 @@ const base = css `
       black
     );
     --_defaultBorderRadius: var(--eun-border-radius-m, 8px);
-    --_defaultPadding: var(--eun-space-s, 8px)
-      calc(var(--eun-space-l, 32px) / 2);
+    --_defaultPaddingBlock: var(--eun-space-s, 8px);
+    --_defaultPaddingInline: calc(var(--eun-space-l, 32px) / 2);
     --_borderRadius: var(--button-border-radius, var(--_defaultBorderRadius));
-    --_padding: var(--button-padding, var(--_defaultPadding));
+    --_padding: var(
+      --button-padding,
+      var(--button-padding-block, var(--_defaultPaddingBlock))
+        var(--button-padding-inline, var(--_defaultPaddingInline))
+    );
     --_boxShadow: var(--button-shadow, none);
     --_boxShadow-hover: var(--button-shadow-hover, var(--_boxShadow));
-    --_transition: var(--button-transition, 0.2s);
+    --_transition: var(--button-transition, var(--eun-duration-m, 200ms));
     --_borderSize: var(--button-border-size, 1.5px);
-    --_fontSize: var(--eun-font-size-s, 14px);
+    --_defaultFontSize: var(--eun-font-size-s, 14px);
+    --_fontSize: var(--button-font-size, var(--_defaultFontSize));
     --_gap: var(--eun-space-xs, 4px);
-    --_lineHeight: 1rem;
+    --_defaultLineHeight: 1rem;
+    --_lineHeight: var(--button-line-height, var(--_defaultLineHeight));
     --icon-size: var(--_lineHeight);
     --_before-display: none;
     --_cursor: pointer;
@@ -49,7 +60,9 @@ const base = css `
     user-select: none;
     cursor: var(--_cursor);
     outline: 2px solid transparent;
-    transition: all ease-out var(--_transition);
+    transition:
+      outline var(--eun-easing-out, ease-out) var(--_transition),
+      outline-offset var(--eun-easing-out, ease-out) var(--_transition);
     border-radius: var(--_borderRadius);
     z-index: 0;
   }
@@ -62,30 +75,32 @@ const base = css `
     outline-color: var(--_focusIndicator);
   }
   :host([size="xs"]) {
-    --_fontSize: var(--eun-font-size-xs, 10px);
-    --_defaultPadding: var(--eun-space-xxs, 1.6px) var(--eun-space-xs, 4px);
-    --_lineHeight: 10px;
+    --_defaultFontSize: var(--eun-font-size-xs, 10px);
+    --_defaultPaddingBlock: var(--eun-space-xxs, 1.6px);
+    --_defaultPaddingInline: var(--eun-space-xs, 4px);
+    --_defaultLineHeight: 10px;
     --_defaultBorderRadius: var(--eun-border-radius-s, 999px);
   }
   :host([size="s"]) {
-    --_fontSize: var(--eun-font-size-xs, 10px);
-    --_defaultPadding: calc(var(--eun-space-s) / 2) var(--eun-space-s);
-    --_lineHeight: 10px;
+    --_defaultFontSize: var(--eun-font-size-xs, 10px);
+    --_defaultPaddingBlock: calc(var(--eun-space-s) / 2);
+    --_defaultPaddingInline: var(--eun-space-s);
+    --_defaultLineHeight: 10px;
     --_defaultBorderRadius: var(--eun-border-radius-s, 999px);
   }
   :host([size="l"]) {
-    --_fontSize: var(--eun-font-size-m, 16px);
+    --_defaultFontSize: var(--eun-font-size-m, 16px);
     --_gap: var(--eun-space-m, 16px);
-    --_defaultPadding: calc(var(--eun-space-s, 8px) * 1.25)
-      var(--eun-space-l, 32px);
-    --_lineHeight: 1.1rem;
+    --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) * 1.25);
+    --_defaultPaddingInline: var(--eun-space-l, 32px);
+    --_defaultLineHeight: 1.1rem;
   }
   :host([size="xl"]) {
-    --_fontSize: var(--eun-font-size-l, 1.3rem);
+    --_defaultFontSize: var(--eun-font-size-l, 1.3rem);
     --_gap: var(--eun-space-m, 16px);
-    --_defaultPadding: calc(var(--eun-space-s, 8px) * 1.5)
-      var(--eun-space-l, 32px);
-    --_lineHeight: 1.3rem;
+    --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) * 1.5);
+    --_defaultPaddingInline: var(--eun-space-l, 32px);
+    --_defaultLineHeight: 1.3rem;
   }
   :host([rounded]) {
     --_defaultBorderRadius: var(--eun-border-radius-xl, 999px);
@@ -118,11 +133,13 @@ const base = css `
     outline: 2px solid transparent;
     padding: var(--_padding);
     gap: var(--_gap);
-    transition: all ease-out var(--_transition);
+    transition: all var(--eun-easing-out, ease-out) var(--_transition);
     font-size: var(--_fontSize);
+    font-weight: var(--button-font-weight, inherit);
     line-height: var(--_lineHeight);
     text-decoration: none;
     align-items: center;
+    justify-content: center;
     white-space: nowrap;
   }
   #button:hover,
@@ -185,7 +202,7 @@ const slottedLink = css `
     inset: calc(-1 * var(--_borderSize));
     border-radius: var(--_borderRadius);
     outline: 2px solid transparent;
-    transition: outline ease-out var(--_transition);
+    transition: outline var(--eun-easing-out, ease-out) var(--_transition);
   }
   ::slotted(a:focus-visible)::after {
     outline-offset: 2px;
@@ -234,6 +251,7 @@ const appearances = css `
     --_bd: transparent;
   }
   :host([appearance="outline"]) {
+    --_borderSize: var(--button-border-size, 1px);
     --_bg: transparent;
     --_bg-hover: var(--_wash-hover);
     --_bg-active: var(--_wash-active);
@@ -260,13 +278,14 @@ const appearances = css `
     --_bd: transparent;
     --_boxShadow: var(
       --button-shadow,
-      var(--eun-shadow-s, "rgba(149, 157, 165, 0.2) 0px 8px 24px")
+      var(--eun-shadow-s, rgba(149, 157, 165, 0.2) 0px 8px 24px)
     );
     --_boxShadow-hover: var(
       --button-shadow-hover,
       var(
         --eun-shadow-m,
-        "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px"
+        rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
+        rgba(0, 0, 0, 0.05) 0px 4px 6px -2px
       )
     );
   }
@@ -294,12 +313,13 @@ const appearances = css `
   :host([appearance="raised"]:not([disabled])) #button:active {
     box-shadow: var(
       --eun-shadow-l,
-      "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px"
+      rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
+      rgba(0, 0, 0, 0.05) 0px 4px 6px -2px
     );
   }
 
   :host(
-      [appearance="fill"]:is(
+      :is([appearance="fill"], :not([appearance])):is(
           [color="critical"],
           [color="success"],
           [color="warning"]
@@ -307,7 +327,7 @@ const appearances = css `
     )
     #button,
   :host(
-      [appearance="fill"]:is(
+      :is([appearance="fill"], :not([appearance])):is(
           [color="critical"],
           [color="success"],
           [color="warning"]
@@ -316,9 +336,14 @@ const appearances = css `
     #button:is(:hover, :focus-visible) {
     filter: brightness(0.9);
   }
-  :host([appearance="fill"][color="critical"]:not([disabled])) #button:active,
-  :host([appearance="fill"][color="success"]:not([disabled])) #button:active,
-  :host([appearance="fill"][color="warning"]:not([disabled])) #button:active {
+  :host(
+      :is([appearance="fill"], :not([appearance])):is(
+          [color="critical"],
+          [color="success"],
+          [color="warning"]
+        ):not([disabled])
+    )
+    #button:active {
     filter: brightness(0.8);
   }
 `;
@@ -351,7 +376,8 @@ const slide = css `
     gap: 0;
     align-items: center;
     justify-content: start;
-    transition: grid-template-columns ease var(--_transition);
+    transition: grid-template-columns var(--eun-easing-default, ease)
+      var(--_transition);
   }
   :host([slide]:hover) #button,
   :host([slide]:focus-visible) #button,
@@ -366,8 +392,8 @@ const slide = css `
     margin-left: 0;
     opacity: 0;
     transition:
-      margin-left ease var(--_transition),
-      opacity ease var(--_transition);
+      margin-left var(--eun-easing-default, ease) var(--_transition),
+      opacity var(--eun-easing-default, ease) var(--_transition);
   }
   :host([slide]:hover) slot:not([name]),
   :host([slide]:focus-visible) slot:not([name]),
@@ -381,18 +407,12 @@ const full = css `
     display: flex;
     width: 100%;
   }
-  :host([full]) #button {
-    justify-content: center;
-  }
 `;
 const fullVariable = css `
   @supports (width: if(style(--a: b): 1px; else: 2px)) {
     :host {
       width: if(style(--button-full: true): 100%; else: fit-content);
     }
-    #button {
-      justify-content: if(style(--button-full: true): center; else: normal);
-    }
   }
 `;
 export const buttonStyles = [