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

package/dist/components/content/tag/tag.js

@@ -26,7 +26,7 @@ export const EunomiaTagTagName = "eun-tag";
  * @slot [icon] - Replaces the icon entirely with any content, not just an icon element. Falls back to the resolved icon or severity glyph when empty
  * @prop { 'primary' | 'secondary' | 'light' | 'medium' | 'dark' } color - The color to apply to the tag
  * @prop { 'info' | 'success' | 'warning' | 'critical' | 'neutral' } severity - The severity of the tag, matching the nature of the information conveyed. Takes priority over color when both are set
- * @prop { 'default' | 'fill' | 'outline' | 'flat' } [appearance="default"] - The surface style of the tag. Flat always renders the same muted, low emphasis surface regardless of color or severity
+ * @prop { 'default' | 'fill' | 'outline' | 'flat' } [appearance="default"] - The surface style of the tag. Flat renders the same muted, low emphasis surface regardless of color or severity, except for the light and dark colors, which keep their own white or black
  * @prop { 's' | 'm' | 'l' } [size="m"] - The size of the tag
  * @prop {import('../icon/icon.type.js').EunomiaIconName} icon - The name of the custom icon to display. By default, the icon is set according to the tag's severity
  * @prop {boolean} [hideIcon=false] - Whether the icon is hidden from the tag. Takes priority over iconOnly
@@ -34,11 +34,14 @@ export const EunomiaTagTagName = "eun-tag";
  * @prop {boolean} [iconOnly=false] - Shows only the icon, visually hiding the slotted label while keeping it available to assistive technology as the tag's accessible name. Requires icon or severity to be set
  * @attr {boolean} [icon-only=false] - Shows only the icon, visually hiding the slotted label while keeping it available to assistive technology as the tag's accessible name. Requires icon or severity to be set
  * @prop {boolean} [rounded=false] - Whether the tag has rounded corners
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark tag white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors or on severity
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark tag white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors or on severity
  * @prop {boolean} [uppercase=false] - Whether the tag label is uppercased with extra letter spacing
- * @cssprop [--tag-background-color] - Sets the background color of the tag
- * @cssprop [--tag-border-color] - Sets the border color of the tag, for the outline appearance
- * @cssprop [--tag-color] - Sets the text color of the tag
- * @cssprop [--tag-border-radius] - Sets the corner radius of the tag
+ * @cssprop [--tag-background-color] - Sets the background color of the tag, for every appearance, color and severity
+ * @cssprop [--tag-border-color] - Sets the border color of the tag, for every appearance, color and severity
+ * @cssprop [--tag-border-width] - Sets the border width of the tag, for every appearance. The border takes room out of the padding, so the tag keeps its size
+ * @cssprop [--tag-color] - Sets the text and icon color of the tag, for every appearance, color and severity
+ * @cssprop [--tag-border-radius] - Sets the corner radius of the tag, also over rounded
  * @cssprop [--tag-gap] - Sets the gap between the tag icon and the label
  * @element eun-tag
  */
@@ -71,6 +74,13 @@ let EunomiaTag = class EunomiaTag extends LitElement {
          * @default false
          */
         this.rounded = false;
+        /**
+         * Keeps a `light` or `dark` tag white or black in every theme. Without
+         * it, they follow the grey scale, which flips with the active theme.
+         * Has no effect on the other colors or on `severity`.
+         * @default false
+         */
+        this.fixedColor = false;
         /**
          * Indicates whether the tag label should be uppercased with extra letter spacing.
          * @default false
@@ -174,8 +184,11 @@ __decorate([
     property({ type: Boolean, attribute: "icon-only", reflect: true })
 ], EunomiaTag.prototype, "iconOnly", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], EunomiaTag.prototype, "rounded", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "fixed-color" })
+], EunomiaTag.prototype, "fixedColor", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], EunomiaTag.prototype, "uppercase", void 0);

package/dist/components/content/tag/tag.styles.d.ts

@@ -1 +1 @@
-export declare const tagStyles: import("lit").CSSResult;
+export declare const tagStyles: import("lit").CSSResult[];

package/dist/components/content/tag/tag.styles.js

@@ -1,12 +1,19 @@
 import { css } from "lit";
+import { toneSurfaceStyles } from "../shared-styles/tone-surface.styles.js";
 /**
  * Base style for tag.
  *
+ * The palette and appearance resolution is shared with `eun-chip` (see
+ * {@link toneSurfaceStyles}) ; this sheet only reads its `--_bg`, `--_fg` and
+ * `--_bd` behind the `--tag-*` custom properties, applied last on the tag
+ * itself, so they win over any palette/appearance combination.
+ *
  * Custom css variables:
- * [--tag-background-color] - Set a custom color to the tag background
- * [--tag-border-color] - Set a custom color to the tag borders in case of the outline appearance
- * [--tag-color] - Set a custom color to the tag textual content
- * [--tag-border-radius] - Set a custom border radius to the tag
+ * [--tag-background-color] - Set a custom background color, for every appearance
+ * [--tag-color] - Set a custom color to the tag textual content and its icon
+ * [--tag-border-color] - Set a custom border color, for every appearance
+ * [--tag-border-width] - Set a custom border width, for every appearance. Defaults to 1px, only drawn (in a color) by outline, or when --tag-border-color is set
+ * [--tag-border-radius] - Set a custom border radius to the tag, also over rounded
  * [--tag-gap] - Set a custom gap between the tag icon and the label
  */
 const base = css `
@@ -15,104 +22,6 @@ const base = css `
     font-family: var(--eun-font-family, "Mulish", sans-serif);
     user-select: none;
   }
-  :host(:not([severity]):not([color])) {
-    --_background: var(--tag-background-color);
-    --_backgroundFilled: var(--_background);
-    --_color: var(--tag-color);
-    --_border-color: var(--tag-border-color);
-  }
-  :host([color="primary"]:not([severity])) {
-    --_background: var(--eun-color-primary-transparent, #3d6fff33);
-    --_backgroundFilled: var(--eun-color-primary-500, #3d6fff);
-    --_border-color: var(--eun-color-primary-500, #3d6fff);
-    --_color: var(--eun-color-primary-500, #3d6fff);
-  }
-  :host([color="secondary"]:not([severity])) {
-    --_background: var(--eun-color-secondary-transparent, #e5a03033);
-    --_backgroundFilled: var(--eun-color-secondary-500, #e5a030);
-    --_border-color: var(--eun-color-secondary-500, #e5a030);
-    --_color: var(--eun-color-secondary-500, #e5a030);
-  }
-  :host([color="light"]:not([severity])) {
-    --_background: var(--eun-color-grey-0, #ffffff);
-    --_backgroundFilled: var(--eun-color-grey-0, #ffffff);
-    --_border-color: var(--eun-color-grey-0, #ffffff);
-    --_color: var(--eun-color-grey-600, #666e8a);
-  }
-  :host([color="light"][appearance="outline"]:not([severity])) {
-    --_color: var(--eun-color-grey-600, #666e8a);
-  }
-  :host([color="medium"]:not([severity])) {
-    --_background: color-mix(
-      in srgb,
-      var(--eun-color-grey-700, #484e61) 20%,
-      transparent
-    );
-    --_backgroundFilled: var(--_background);
-    --_border-color: var(--eun-color-grey-700, #484e61);
-    --_color: var(--eun-color-grey-900, #000000);
-  }
-  :host([color="dark"]:not([severity])) {
-    --_background: var(--eun-color-grey-800, #071621);
-    --_backgroundFilled: var(--eun-color-grey-800, #071621);
-    --_border-color: var(--eun-color-grey-800, #071621);
-    --_color: var(--eun-color-grey-0, #ffffff);
-  }
-  :host([color="dark"][appearance="outline"]:not([severity])) {
-    --_color: var(--eun-color-grey-800, #071621);
-  }
-
-  :host([severity="info"]) {
-    --_background: var(--eun-color-info-30, #f0f7fa);
-    --_backgroundFilled: var(--eun-color-info-100, #097faf);
-    --_border-color: var(--eun-color-info-100, #097faf);
-    --_color: var(--eun-color-info-100, #097faf);
-  }
-  :host([severity="success"]) {
-    --_background: var(--eun-color-success-30, #f1f9f4);
-    --_backgroundFilled: var(--eun-color-success-100, #1a9948);
-    --_border-color: var(--eun-color-success-100, #1a9948);
-    --_color: var(--eun-color-success-100, #1a9948);
-  }
-  :host([severity="warning"]) {
-    --_background: var(--eun-color-warning-30, #fcf5f0);
-    --_backgroundFilled: var(--eun-color-warning-100, #c85207);
-    --_border-color: var(--eun-color-warning-100, #c85207);
-    --_color: var(--eun-color-warning-100, #c85207);
-  }
-  :host([severity="critical"]) {
-    --_background: var(--eun-color-critical-30, #faf0f1);
-    --_backgroundFilled: var(--eun-color-critical-100, #aa0014);
-    --_border-color: var(--eun-color-critical-100, #aa0014);
-    --_color: var(--eun-color-critical-100, #aa0014);
-  }
-  :host([severity="neutral"]) {
-    --_background: var(--eun-color-grey-200, #ecedf0);
-    --_backgroundFilled: var(--eun-color-grey-700, #484e61);
-    --_border-color: var(--eun-color-grey-700, #484e61);
-    --_color: var(--eun-color-grey-700, #484e61);
-  }
-  :host([appearance="default"]) #tag {
-    background: var(--_background);
-  }
-
-  :host([appearance="fill"]) #tag {
-    --_color: #fff;
-    background: var(--_backgroundFilled);
-    color: var(--_color);
-  }
-
-  :host([appearance="outline"]) #tag {
-    --_border-size: 1px;
-    background: transparent;
-    border: var(--eun-borderWidth-s, 1px) solid var(--_border-color);
-  }
-
-  :host([appearance="flat"]) #tag {
-    --_color: var(--eun-text-secondary, #484e61);
-    background: var(--eun-content-hover, #edeff0);
-    color: var(--_color);
-  }
 
   :host([uppercase]) #tag {
     letter-spacing: 0.15em;
@@ -120,37 +29,40 @@ const base = css `
   }
 
   :host([size="s"]) #tag {
-    --_padding: var(--eun-space-xs, 4px) var(--eun-space-s, 8px);
-    --_fontSize: var(--eun-fontSize-xs, 12px);
+    --_padV: var(--eun-space-xs, 4px);
+    --_padH: var(--eun-space-s, 8px);
+    --_fontSize: var(--eun-font-size-xs, 12px);
     --_gap: var(--eun-space-xs, 4px);
   }
   :host([size="m"]) #tag,
   :host(:not([size])) #tag {
-    --_padding: var(--eun-space-s, 8px) calc(var(--eun-space-m, 16px) / 2);
-    --_fontSize: var(--eun-fontSize-s, 14px);
+    --_padV: var(--eun-space-s, 8px);
+    --_padH: calc(var(--eun-space-m, 16px) / 2);
+    --_fontSize: var(--eun-font-size-s, 14px);
     --_gap: var(--eun-space-xs, 4px);
   }
   :host([size="l"]) #tag {
-    --_padding: var(--eun-space-s, 8px) var(--eun-space-m, 16px);
-    --_fontSize: var(--eun-fontSize-m, 16px);
+    --_padV: var(--eun-space-s, 8px);
+    --_padH: var(--eun-space-m, 16px);
+    --_fontSize: var(--eun-font-size-m, 16px);
     --_gap: var(--eun-space-s, 8px);
   }
 
   :host([icon-only][size="s"]) #tag {
-    --_padding: var(--eun-space-xs, 4px);
+    --_padV: var(--eun-space-xs, 4px);
+    --_padH: var(--eun-space-xs, 4px);
   }
   :host([icon-only][size="m"]) #tag,
-  :host([icon-only]:not([size])) #tag {
-    --_padding: var(--eun-space-s, 8px);
-  }
+  :host([icon-only]:not([size])) #tag,
   :host([icon-only][size="l"]) #tag {
-    --_padding: var(--eun-space-s, 8px);
+    --_padV: var(--eun-space-s, 8px);
+    --_padH: var(--eun-space-s, 8px);
   }
   :host([icon-only]) #tag {
     position: relative;
     justify-content: center;
   }
-  :host([icon-only]) slot {
+  :host([icon-only]) slot:not([name]) {
     display: inline-block;
     position: absolute;
     width: 1px;
@@ -163,24 +75,27 @@ const base = css `
     border: 0;
   }
 
-  :host([rounded]) {
-    --_borderRadius: var(--eun-borderRadius-xl, 999px);
+  :host {
+    --_radius: var(--eun-border-radius-m, 5px);
   }
-
-  :host(:not([rounded])) {
-    --_borderRadius: var(--tag-border-radius, var(--eun-borderRadius-m, 5px));
+  :host([rounded]) {
+    --_radius: var(--eun-border-radius-xl, 999px);
   }
 
   #tag {
+    --_borderWidth: var(--tag-border-width, var(--eun-border-width-s, 1px));
     display: flex;
     align-items: center;
-    border-radius: var(--_borderRadius);
-    padding: var(--_padding);
+    background: var(--tag-background-color, var(--_bg));
+    color: var(--tag-color, var(--_fg));
+    border: var(--_borderWidth) solid var(--tag-border-color, var(--_bd));
+    border-radius: var(--tag-border-radius, var(--_radius));
+    padding: max(0px, calc(var(--_padV) - var(--_borderWidth)))
+      max(0px, calc(var(--_padH) - var(--_borderWidth)));
     font-size: var(--_fontSize);
     gap: var(--tag-gap, var(--_gap));
-    color: var(--_color);
-    font-weight: var(--eun-fontWeight-m, 500);
-    --icon-color: var(--_color);
+    font-weight: var(--eun-font-weight-m, 500);
+    --icon-color: var(--tag-color, var(--_fg));
   }
 
   ::slotted(*) {
@@ -191,4 +106,4 @@ const base = css `
     display: none;
   }
 `;
-export const tagStyles = base;
+export const tagStyles = [toneSurfaceStyles, base];

package/dist/components/content/tooltip/tooltip.d.ts

@@ -66,7 +66,9 @@ declare const EunomiaTooltipMixinBase: Constructor<EunomiaTooltipBase>;
  * @slot [description] - Extra detail below the heading, combining with richText if both are set
  * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the tooltip. Drives the heading accent color, taking priority over color when both are set
  * @prop {'primary' | 'secondary' | 'light' | 'medium' | 'dark'} [color='primary'] - A plain brand or neutral color, used only while severity is unset
- * @prop {'default' | 'flat' | 'fill' | 'outline'} [appearance='default'] - The visual style of the panel's surface, using the same names as the alert component, though always fully opaque rather than a translucent wash. Default is a pale, opaque tint of color or severity with accent colored text and no border. Setting color to dark renders it as a solid near-black surface with light text instead of a pale one
+ * @prop {'default' | 'flat' | 'fill' | 'outline'} [appearance='default'] - The visual style of the panel's surface, using the same names as the alert component, though always fully opaque rather than a translucent wash. Default is a pale, opaque tint of color or severity with accent colored text and no border. The light and dark colors have no pale tint, so default is as solid as fill for them, and outline is the color as border and text over a surface of the opposite tone
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark tooltip white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors or on severity
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark tooltip white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors or on severity
  * @prop {'top' | 'right' | 'bottom' | 'left'} [placement='top'] - The preferred side to open on, flipping to the opposite side automatically when there isn't room
  * @prop {string} heading - The tooltip's heading, as a property. When unset, the default slot's content is used instead
  * @prop {string} [richText] - Lightweight formatted content rendered above the description slot, combining with it. Supports simple lists, links, bold, and italic text
@@ -83,9 +85,11 @@ declare const EunomiaTooltipMixinBase: Constructor<EunomiaTooltipBase>;
  * @cssprop [--tooltip-viewport-gap] - Sets the minimum distance kept from the viewport edge, so the panel never runs off-screen
  * @cssprop [--tooltip-min-width] - Sets the minimum width of the panel
  * @cssprop [--tooltip-max-width] - Sets the maximum width of the panel
- * @cssprop [--tooltip-background-color] - Sets the background color when severity is unset
- * @cssprop [--tooltip-color] - Sets the heading color when severity is unset
- * @cssprop [--tooltip-content-color] - Sets the color of the description content
+ * @cssprop [--tooltip-background-color] - Sets the background color, for every appearance, color and severity
+ * @cssprop [--tooltip-color] - Sets the heading and link color, for every appearance, color and severity
+ * @cssprop [--tooltip-content-color] - Sets the color of the description content, for every appearance, color and severity
+ * @cssprop [--tooltip-border-color] - Sets the border color, for every appearance, color and severity
+ * @cssprop [--tooltip-border-width] - Sets the border width, for every appearance. The border takes room out of the padding, so the panel keeps its size
  * @cssprop [--tooltip-font-weight] - Sets the font weight of the description content, not the heading, and not richText, which stays at its own normal weight
  * @cssprop [--tooltip-border-radius] - Sets the corner radius of the panel
  * @cssprop [--tooltip-padding] - Sets the padding of the panel
@@ -120,6 +124,13 @@ export declare class EunomiaTooltip extends EunomiaTooltipMixinBase {
      * @default default
      */
     appearance: EunomiaTooltipAppearance;
+    /**
+     * Keeps a `light` or `dark` tooltip white or black in every theme.
+     * Without it, they follow the grey scale, which flips with the active
+     * theme. Has no effect on the other colors or on `severity`.
+     * @default false
+     */
+    fixedColor: boolean;
     /**
      * The preferred side to open on, flipping to the opposite side
      * automatically when there isn't room.

package/dist/components/content/tooltip/tooltip.js

@@ -53,6 +53,8 @@ const FORWARDED_CSS_VARS = [
     "--tooltip-background-color",
     "--tooltip-color",
     "--tooltip-content-color",
+    "--tooltip-border-color",
+    "--tooltip-border-width",
     "--tooltip-font-weight",
     "--tooltip-border-radius",
     "--tooltip-padding",
@@ -92,7 +94,9 @@ const EunomiaTooltipMixinBase = AnchorPositionMixin(LitElement);
  * @slot [description] - Extra detail below the heading, combining with richText if both are set
  * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the tooltip. Drives the heading accent color, taking priority over color when both are set
  * @prop {'primary' | 'secondary' | 'light' | 'medium' | 'dark'} [color='primary'] - A plain brand or neutral color, used only while severity is unset
- * @prop {'default' | 'flat' | 'fill' | 'outline'} [appearance='default'] - The visual style of the panel's surface, using the same names as the alert component, though always fully opaque rather than a translucent wash. Default is a pale, opaque tint of color or severity with accent colored text and no border. Setting color to dark renders it as a solid near-black surface with light text instead of a pale one
+ * @prop {'default' | 'flat' | 'fill' | 'outline'} [appearance='default'] - The visual style of the panel's surface, using the same names as the alert component, though always fully opaque rather than a translucent wash. Default is a pale, opaque tint of color or severity with accent colored text and no border. The light and dark colors have no pale tint, so default is as solid as fill for them, and outline is the color as border and text over a surface of the opposite tone
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark tooltip white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors or on severity
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark tooltip white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors or on severity
  * @prop {'top' | 'right' | 'bottom' | 'left'} [placement='top'] - The preferred side to open on, flipping to the opposite side automatically when there isn't room
  * @prop {string} heading - The tooltip's heading, as a property. When unset, the default slot's content is used instead
  * @prop {string} [richText] - Lightweight formatted content rendered above the description slot, combining with it. Supports simple lists, links, bold, and italic text
@@ -109,9 +113,11 @@ const EunomiaTooltipMixinBase = AnchorPositionMixin(LitElement);
  * @cssprop [--tooltip-viewport-gap] - Sets the minimum distance kept from the viewport edge, so the panel never runs off-screen
  * @cssprop [--tooltip-min-width] - Sets the minimum width of the panel
  * @cssprop [--tooltip-max-width] - Sets the maximum width of the panel
- * @cssprop [--tooltip-background-color] - Sets the background color when severity is unset
- * @cssprop [--tooltip-color] - Sets the heading color when severity is unset
- * @cssprop [--tooltip-content-color] - Sets the color of the description content
+ * @cssprop [--tooltip-background-color] - Sets the background color, for every appearance, color and severity
+ * @cssprop [--tooltip-color] - Sets the heading and link color, for every appearance, color and severity
+ * @cssprop [--tooltip-content-color] - Sets the color of the description content, for every appearance, color and severity
+ * @cssprop [--tooltip-border-color] - Sets the border color, for every appearance, color and severity
+ * @cssprop [--tooltip-border-width] - Sets the border width, for every appearance. The border takes room out of the padding, so the panel keeps its size
  * @cssprop [--tooltip-font-weight] - Sets the font weight of the description content, not the heading, and not richText, which stays at its own normal weight
  * @cssprop [--tooltip-border-radius] - Sets the corner radius of the panel
  * @cssprop [--tooltip-padding] - Sets the padding of the panel
@@ -134,6 +140,13 @@ let EunomiaTooltip = EunomiaTooltip_1 = class EunomiaTooltip extends EunomiaTool
          * @default default
          */
         this.appearance = "default";
+        /**
+         * Keeps a `light` or `dark` tooltip white or black in every theme.
+         * Without it, they follow the grey scale, which flips with the active
+         * theme. Has no effect on the other colors or on `severity`.
+         * @default false
+         */
+        this.fixedColor = false;
         /**
          * The preferred side to open on, flipping to the opposite side
          * automatically when there isn't room.
@@ -1070,6 +1083,7 @@ let EunomiaTooltip = EunomiaTooltip_1 = class EunomiaTooltip extends EunomiaTool
         data-severity=${ifDefined(this.severity)}
         data-color=${this.color}
         data-appearance=${this.appearance}
+        data-fixed-color=${ifDefined(this.fixedColor ? "" : undefined)}
         data-placement=${this.placement}
         @pointerenter=${this.handlePanelPointerEnter}
         @pointerleave=${this.handlePanelPointerLeave}
@@ -1165,6 +1179,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], EunomiaTooltip.prototype, "appearance", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "fixed-color" })
+], EunomiaTooltip.prototype, "fixedColor", void 0);
 __decorate([
     property({ reflect: true })
 ], EunomiaTooltip.prototype, "placement", void 0);