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

package/dist/ssr/chip-ssr.css

@@ -0,0 +1,242 @@
+eun-chip:not(:defined) {
+  --_bg-default: var(--_tint);
+  --_fg-default: var(--_accent);
+  --_bg-fill: var(--_solid);
+  --_fg-fill: var(--_onSolid);
+  --_bg-outline: var(--eun-surface-color, #ffffff);
+  --_fg-outline: var(--_accent);
+  --_bd-outline: var(--_solid);
+  --_bg-flat: var(--eun-content-hover, #edeff0);
+  --_fg-flat: var(--eun-text-secondary, #484e61);
+  --_bg: var(--_bg-default);
+  --_fg: var(--_fg-default);
+  --_bd: transparent;
+  --_solid: var(--eun-color-grey-700, #484e61);
+  --_onSolid: var(--eun-color-grey-0, #ffffff);
+  --_tint: color-mix(
+    in srgb,
+    var(--eun-color-grey-700, #484e61) 20%,
+    transparent
+  );
+  --_accent: var(--eun-color-grey-900, #000000);
+  --_height: 30px;
+  --_paddingInline: 6px;
+  --_fontSize: var(--eun-font-size-s, 14px);
+  --_gap: 6px;
+  --_iconSize: 16px;
+  --_deleteIconSize: 14px;
+  --_avatarFontSize: 11px;
+  --_avatarInsetSize: 20px;
+  --_borderWidth: var(--chip-border-width, var(--eun-border-width-s, 1px));
+  --_leadingPadding: 4px;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  max-width: 100%;
+  height: var(--_height);
+  gap: var(--chip-gap, var(--_gap));
+  padding-inline: max(
+      0px,
+      calc(var(--_paddingInline) + var(--_leadingPadding) - var(--_borderWidth))
+    )
+    max(0px, calc(var(--_paddingInline) - var(--_borderWidth)));
+  border: var(--_borderWidth) solid var(--chip-border-color, var(--_bd));
+  border-radius: var(--chip-border-radius, var(--eun-border-radius-xl, 999px));
+  background: var(--chip-background-color, var(--_bg));
+  color: var(--chip-color, var(--_fg));
+  box-shadow: var(--chip-box-shadow, none);
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--_fontSize);
+  font-weight: var(--eun-font-weight-m, 500);
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+}
+
+eun-chip[size="s"]:not(:defined) {
+  --_height: 26px;
+  --_paddingInline: 4px;
+  --_fontSize: var(--eun-font-size-xs, 12px);
+  --_gap: 4px;
+  --_iconSize: 14px;
+  --_deleteIconSize: 12px;
+  --_avatarFontSize: 10px;
+  --_avatarInsetSize: 16px;
+}
+
+eun-chip[size="l"]:not(:defined) {
+  --_height: 38px;
+  --_fontSize: var(--eun-font-size-m, 16px);
+  --_gap: 8px;
+  --_iconSize: 18px;
+  --_deleteIconSize: 16px;
+  --_avatarFontSize: 12px;
+  --_avatarInsetSize: 24px;
+}
+
+/* Palettes. */
+eun-chip[color="primary"]:not([severity]):not(:defined) {
+  --_solid: var(--eun-color-primary-500, #3d6fff);
+  --_onSolid: var(--eun-color-on-primary-500, #ffffff);
+  --_tint: var(--eun-color-primary-alpha-20, #3d6fff33);
+  --_accent: var(--eun-color-primary-500, #3d6fff);
+}
+
+eun-chip[color="secondary"]:not([severity]):not(:defined) {
+  --_solid: var(--eun-color-secondary-500, #e5a030);
+  --_onSolid: var(--eun-color-on-secondary-500, #000000de);
+  --_tint: var(--eun-color-secondary-alpha-20, #edbd6f33);
+  --_accent: var(--eun-color-secondary-500, #e5a030);
+}
+
+eun-chip[color="light"]:not([severity]):not(:defined) {
+  --_solid: var(--eun-color-grey-0, #ffffff);
+  --_onSolid: var(--eun-color-grey-900, #000000);
+}
+
+eun-chip[color="light"][fixed-color]:not([severity]):not(:defined) {
+  --_solid: #ffffff;
+  --_onSolid: #000000;
+}
+
+eun-chip[color="dark"]:not([severity]):not(:defined) {
+  --_solid: var(--eun-color-grey-800, #071621);
+  --_onSolid: var(--eun-color-grey-0, #ffffff);
+}
+
+eun-chip[color="dark"][fixed-color]:not([severity]):not(:defined) {
+  --_solid: #071621;
+  --_onSolid: #ffffff;
+}
+
+eun-chip:is([color="light"], [color="dark"]):not([severity]):not(:defined) {
+  --_accent: var(--_solid);
+  --_tint: color-mix(in srgb, var(--_solid) 16%, transparent);
+  --_bg-default: var(--_solid);
+  --_fg-default: var(--_onSolid);
+  --_bg-flat: var(--_tint);
+  --_fg-flat: var(--_solid);
+}
+
+eun-chip[severity="info"]:not(:defined) {
+  --_solid: var(--eun-color-info-text, #097aa8);
+  --_onSolid: #fff;
+  --_tint: var(--eun-color-info-alpha-5, #097faf0d);
+  --_accent: var(--eun-color-info-text, #097aa8);
+}
+
+eun-chip[severity="success"]:not(:defined) {
+  --_solid: var(--eun-color-success-text, #167f3c);
+  --_onSolid: #fff;
+  --_tint: var(--eun-color-success-alpha-5, #1a99480d);
+  --_accent: var(--eun-color-success-text, #167f3c);
+}
+
+eun-chip[severity="warning"]:not(:defined) {
+  --_solid: var(--eun-color-warning-text, #b94c06);
+  --_onSolid: #fff;
+  --_tint: var(--eun-color-warning-alpha-5, #c852070d);
+  --_accent: var(--eun-color-warning-text, #b94c06);
+}
+
+eun-chip[severity="critical"]:not(:defined) {
+  --_solid: var(--eun-color-critical-text, #aa0014);
+  --_onSolid: #fff;
+  --_tint: var(--eun-color-critical-alpha-5, #aa00140d);
+  --_accent: var(--eun-color-critical-text, #aa0014);
+}
+
+eun-chip[severity="neutral"]:not(:defined) {
+  --_solid: var(--eun-color-grey-700, #484e61);
+  --_onSolid: var(--eun-color-grey-0, #ffffff);
+  --_tint: var(--eun-surface-sunken-strong, #ecedf0);
+  --_accent: var(--eun-color-grey-700, #484e61);
+}
+
+/* Appearances. */
+eun-chip[appearance="fill"]:not(:defined) {
+  --_bg: var(--_bg-fill);
+  --_fg: var(--_fg-fill);
+}
+
+eun-chip[appearance="outline"]:not(:defined) {
+  --_bg: var(--_bg-outline);
+  --_fg: var(--_fg-outline);
+  --_bd: var(--_bd-outline);
+}
+
+eun-chip[appearance="flat"]:not(:defined) {
+  --_bg: var(--_bg-flat);
+  --_fg: var(--_fg-flat);
+}
+
+eun-chip[disabled]:not(:defined) {
+  opacity: 0.6;
+}
+
+:where(eun-chip:not(:defined) > *) {
+  margin: 0;
+}
+
+eun-chip:not(:defined) > [slot="icon"] {
+  order: -1;
+  display: inline-flex;
+}
+
+eun-chip:not(:defined)::before {
+  content: "";
+  order: -1;
+  flex-shrink: 0;
+  display: none;
+  width: var(--_iconSize);
+  height: var(--_iconSize);
+}
+
+eun-chip:is([icon], [severity]):not(
+    [hide-icon],
+    [avatar-src],
+    [avatar-initials]
+  ):not(:has(> [slot="icon"])):not(:defined)::before {
+  display: block;
+}
+
+eun-chip:is([avatar-src], [avatar-initials]):not(:defined) {
+  --_leadingPadding: 0px;
+}
+
+eun-chip:is([avatar-src], [avatar-initials]):not(:defined)::before {
+  content: attr(avatar-initials);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--chip-avatar-size, var(--_avatarInsetSize, 20px));
+  height: var(--chip-avatar-size, var(--_avatarInsetSize, 20px));
+  overflow: hidden;
+  border-radius: 50%;
+  background: var(
+    --chip-avatar-background,
+    var(--_solid, var(--eun-color-grey-500, #8d93aa))
+  );
+  color: var(--chip-avatar-color, var(--_onSolid, #fff));
+  font-size: var(--_avatarFontSize);
+  font-weight: var(--eun-font-weight-l, 700);
+  line-height: 1;
+}
+
+eun-chip[avatar-src]:not(:defined)::before {
+  content: "";
+}
+
+eun-chip[avatar-shape="square"]:not(:defined)::before {
+  border-radius: var(--eun-border-radius-s, 5px);
+}
+
+eun-chip:not(:defined)::after {
+  content: "";
+  flex-shrink: 0;
+  width: calc(var(--_deleteIconSize) + 10px);
+  height: var(--_deleteIconSize);
+  background: currentColor;
+  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;
+}

package/dist/ssr/collapse-ssr.css

@@ -0,0 +1,151 @@
+eun-collapse:not(:defined) {
+  --_background: var(--collapse-background, var(--eun-surface-sunken, #f7f8fa));
+  --_backgroundOpen: var(--collapse-background-open, var(--_background));
+  --_paddingBlock: var(--collapse-padding-block, var(--eun-space-m, 16px));
+  --_paddingInline: var(--collapse-padding-inline, var(--eun-space-m, 16px));
+  --_panelPaddingBlock: var(
+    --collapse-panel-padding-block,
+    var(--collapse-padding-block, var(--eun-space-m, 16px))
+  );
+  --_dividerWidth: var(
+    --collapse-divider-width,
+    var(--eun-border-width-s, 1px)
+  );
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  grid-template-rows: [trigger-start] auto [trigger-end];
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--_paddingBlock) var(--_paddingInline);
+  border-radius: var(
+    --collapse-border-radius,
+    var(--eun-border-radius-l, 16px)
+  );
+  background: var(--_background);
+  color: var(--collapse-color, var(--eun-text-color, #071621));
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+}
+
+eun-collapse:not(:defined):has(> [slot="subheading"]) {
+  grid-template-rows: [trigger-start] auto auto [trigger-end];
+}
+
+eun-collapse[disabled]:not(:defined) {
+  opacity: var(--collapse-disabled-opacity, 0.5);
+}
+
+eun-collapse[open]:not(:defined) {
+  padding-block-end: var(--_panelPaddingBlock);
+  background: var(--_backgroundOpen);
+  color: var(--collapse-color-open, var(--eun-color-primary-500, #3d6fff));
+}
+
+/* The leading icon, the heading and the subheading of the trigger. */
+eun-collapse:not(:defined) > [slot="icon"] {
+  grid-column: 1;
+  grid-row: trigger-start / trigger-end;
+  align-self: center;
+  margin-inline-end: var(--eun-space-m, 16px);
+}
+
+eun-collapse:not(:defined) > [slot="heading"] {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: center;
+  justify-self: start;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--collapse-heading-font-size, var(--eun-font-size-s, 14px));
+  font-weight: var(--eun-font-weight-l);
+}
+
+eun-collapse:not(:defined):has(> [slot="subheading"]) > [slot="heading"] {
+  align-self: end;
+}
+
+eun-collapse:not(:defined) > [slot="subheading"] {
+  grid-column: 2;
+  grid-row: 2;
+  align-self: start;
+  justify-self: start;
+  margin-block-start: var(--eun-space-xxs, 1.6px);
+  color: var(--collapse-subheading-color, var(--eun-text-secondary, #484e61));
+  font-size: var(
+    --collapse-subheading-font-size,
+    var(--eun-font-size-xs, 14px)
+  );
+  font-weight: var(--eun-font-weight-m);
+}
+
+:where(
+  eun-collapse:not(:defined) > :is([slot="heading"], [slot="subheading"])
+) {
+  margin-inline: 0;
+  margin-block-end: 0;
+  font-family: inherit;
+  font-style: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+:where(eun-collapse:not(:defined) > [slot="heading"]) {
+  margin-block-start: 0;
+}
+
+/* The tag and the trailing indicator. */
+eun-collapse:not(:defined) > [slot="tag"] {
+  grid-column: 3;
+  grid-row: trigger-start / trigger-end;
+  align-self: center;
+  margin-inline-start: var(--collapse-gap, var(--eun-space-l, 32px));
+}
+
+eun-collapse:not(:defined)::after {
+  content: "";
+  grid-column: 4;
+  grid-row: trigger-start / trigger-end;
+  align-self: center;
+  width: 20px;
+  height: 20px;
+  margin-inline-start: var(--collapse-gap, var(--eun-space-l, 32px));
+}
+
+eun-collapse:not(:defined):has(> [slot="tag"])::after {
+  margin-inline-start: var(--eun-space-m, 16px);
+}
+
+eun-collapse:not(:defined) > [slot="chevron"] {
+  grid-column: 4;
+  grid-row: trigger-start / trigger-end;
+  align-self: center;
+  justify-self: center;
+}
+
+/* The panel : hidden while closed, under the divider while open. */
+eun-collapse:not(:defined) > :not([slot]) {
+  display: none;
+}
+
+eun-collapse[open]:not(:defined) > :not([slot]) {
+  display: revert;
+  grid-column: 1 / -1;
+  color: var(--collapse-content-color, var(--eun-text-color, #071621));
+  font-size: var(--collapse-content-font-size, var(--eun-font-size-s, 14px));
+}
+
+eun-collapse[open]:not(:defined)::before {
+  content: "";
+  grid-column: 1 / -1;
+  grid-row: trigger-end;
+  height: var(--_dividerWidth);
+  margin-block: var(--_paddingBlock) var(--_panelPaddingBlock);
+  margin-inline: calc(-1 * var(--_paddingInline));
+  background: var(--collapse-divider-color, var(--eun-color-grey-300, #dee0e7));
+}
+
+/* Separate boxes : a gap instead of the divider, approximated in one box. */
+eun-collapse[open][independent]:not(:defined)::before {
+  height: var(--collapse-panel-gap, var(--eun-space-xs, 4px));
+  background: none;
+}

package/dist/ssr/field-ssr.css

@@ -0,0 +1,163 @@
+:is(eun-input, eun-textarea, eun-select):not(:defined) {
+  --_borderColor: var(--field-border-color, var(--eun-border-color, #dee0e7));
+  --_padding: var(
+    --field-padding,
+    var(--field-padding-block, var(--eun-space-s, 8px))
+      var(--field-padding-inline, var(--eun-space-s, 8px))
+  );
+  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));
+}
+
+:is(eun-input, eun-textarea, eun-select):is(
+    [label],
+    [required],
+    [instructions]
+  ):not(:defined)::before {
+  content: attr(label) "\200b";
+  display: block;
+  margin-block-end: calc(2 * var(--eun-space-xs, 4px));
+  white-space: pre-line;
+  color: var(--eun-text-secondary, #484e61);
+  font-size: var(--field-message-font-size, var(--eun-font-size-xs, 12px));
+}
+
+:is(eun-input, eun-textarea, eun-select)[instructions]:not(:defined)::before {
+  content: attr(label) "\200b\A" attr(instructions);
+}
+
+:is(eun-input, eun-textarea, eun-select):is(
+    [label],
+    [required],
+    [instructions]
+  ):not(:defined)::first-line {
+  color: var(--eun-text-color, #071621);
+  font-size: var(--field-label-font-size, var(--eun-font-size-s, 14px));
+  font-weight: var(--eun-font-weight-l, 700);
+}
+
+:is(eun-input, eun-textarea, eun-select)[required]:not([label]):not(
+    :defined
+  )::first-line {
+  font-size: var(--field-label-font-size, var(--eun-font-size-s, 10px));
+}
+
+:is(eun-input, eun-textarea, eun-select)[required]:not(
+    [label],
+    [instructions]
+  ):not(:defined)::before {
+  font-size: var(--field-label-font-size, var(--eun-font-size-s, 10px));
+}
+
+:is(eun-input, eun-textarea, eun-select):not(:defined)::after {
+  content: "\200b";
+  display: block;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: var(--_padding);
+  border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
+  border-radius: var(--field-border-radius, var(--eun-border-radius-m, 8px));
+  background-color: var(--field-background, transparent);
+  box-shadow: var(--field-shadow, none);
+  color: var(
+    --field-placeholder-color,
+    var(--eun-placeholder-color, var(--eun-color-grey-400, #c1c9d6))
+  );
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+:is(eun-input, eun-textarea, eun-select)[placeholder]:not(:defined)::after {
+  content: attr(placeholder) "\200b";
+}
+
+:is(eun-input:not([type="password"]), eun-textarea)[value]:not([value=""]):not(
+    :defined
+  )::after {
+  content: attr(value) "\200b";
+  color: var(--field-text-color, var(--eun-text-color, #071621));
+}
+
+:is(eun-input, eun-select)[icon]:not(:defined)::after {
+  padding-inline-start: calc(
+    calc(var(--eun-space-l, 32px) * 1.2) + var(--eun-space-xs, 4px)
+  );
+}
+
+:is(eun-input, eun-textarea, eun-select)[appearance="flat"]:not(
+    :defined
+  )::after {
+  border-color: transparent;
+  background-color: var(--field-background, var(--eun-content-hover, #edeff0));
+}
+
+:is(eun-input, eun-textarea, eun-select)[appearance="underline"]:not(
+    :defined
+  )::after {
+  border-width: 0 0 var(--eun-border-width-m, 1.5px);
+  border-radius: 0;
+}
+
+:is(eun-input, eun-textarea, eun-select)[disabled]:not(:defined)::after {
+  opacity: 0.5;
+  background-color: var(--eun-disabled-color, #ecedf0);
+}
+
+:is(eun-input, eun-textarea, eun-select)[readonly]:not(:defined)::after {
+  border-color: var(--eun-readonly-color, #666e8a);
+}
+
+eun-textarea:not(:defined)::after {
+  min-height: 6rem;
+  white-space: pre-wrap;
+}
+
+eun-textarea[rows="1"]:not(:defined)::after {
+  content: "\200b";
+}
+eun-textarea[rows="2"]:not(:defined)::after {
+  content: "\200b\A\200b";
+}
+eun-textarea[rows="3"]:not(:defined)::after {
+  content: "\200b\A\A\200b";
+}
+eun-textarea[rows="4"]:not(:defined)::after {
+  content: "\200b\A\A\A\200b";
+}
+eun-textarea[rows="5"]:not(:defined)::after {
+  content: "\200b\A\A\A\A\200b";
+}
+eun-textarea[rows="6"]:not(:defined)::after {
+  content: "\200b\A\A\A\A\A\200b";
+}
+eun-textarea[rows="7"]:not(:defined)::after {
+  content: "\200b\A\A\A\A\A\A\200b";
+}
+eun-textarea[rows="8"]:not(:defined)::after {
+  content: "\200b\A\A\A\A\A\A\A\200b";
+}
+eun-textarea[rows="9"]:not(:defined)::after {
+  content: "\200b\A\A\A\A\A\A\A\A\200b";
+}
+eun-textarea[rows="10"]:not(:defined)::after {
+  content: "\200b\A\A\A\A\A\A\A\A\A\200b";
+}
+
+eun-select:not(:defined) > :not([slot]) {
+  display: none;
+}
+
+eun-select:not(:defined)::after {
+  padding-inline-end: calc(var(--eun-space-l, 32px) * 1.2);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23484e61'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--eun-space-s, 8px) center;
+  background-size: 24px;
+}
+
+eun-select:not(:defined):dir(rtl)::after {
+  background-position: left var(--eun-space-s, 8px) center;
+}