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

package/dist/ssr/collapse-ssr.css

@@ -0,0 +1,180 @@
+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) > [slot="tag"]:not(eun-tag) {
+  --_borderWidth: var(--tag-border-width, var(--eun-border-width-s, 1px));
+  display: flex;
+  align-items: center;
+  border: var(--_borderWidth) solid var(--tag-border-color, transparent);
+  border-radius: var(--tag-border-radius, var(--eun-border-radius-xl, 999px));
+  padding: max(
+      0px,
+      calc(
+        var(--tag-padding-block, var(--eun-space-xs, 4px)) - var(--_borderWidth)
+      )
+    )
+    max(
+      0px,
+      calc(
+        var(--tag-padding-inline, var(--eun-space-s, 8px)) - var(--_borderWidth)
+      )
+    );
+  background: var(
+    --tag-background-color,
+    var(--eun-color-primary-alpha-20, #3d6fff33)
+  );
+  color: var(--tag-color, var(--eun-color-primary-500, #3d6fff));
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--tag-font-size, var(--eun-font-size-xs, 12px));
+  font-weight: var(--tag-font-weight, var(--eun-font-weight-m, 500));
+  user-select: none;
+}
+
+eun-collapse:not(:defined)::after {
+  content: "";
+  grid-column: 4;
+  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,202 @@
+:is(eun-input, eun-textarea, eun-select):not(:defined) {
+  --_borderColor: var(--field-border-color, var(--eun-border-color, #dee0e7));
+  --_defaultPaddingBlock: var(--eun-space-s, 8px);
+  --_defaultFontSize: var(--eun-font-size-s, 14px);
+  --_defaultLineHeight: 1rem;
+  --_defaultBorderRadius: var(--eun-border-radius-m, 8px);
+  --_defaultPaddingInline: var(--eun-space-s, 8px);
+  --_padding: var(
+    --field-padding,
+    var(--field-padding-block, var(--_defaultPaddingBlock))
+      var(--field-padding-inline, var(--_defaultPaddingInline))
+  );
+  display: block;
+  width: 100%;
+  color: var(--field-text-color, var(--eun-text-color, #071621));
+  font-family: var(--eun-font-family, "Mulish", sans-serif);
+  font-size: var(--field-font-size, var(--_defaultFontSize));
+}
+
+eun-textarea:not(:defined) {
+  --_defaultLineHeight: normal;
+}
+
+:is(eun-input, eun-select)[rounded]:not(:defined) {
+  --_defaultBorderRadius: var(--eun-border-radius-xl, 999px);
+  --_defaultPaddingInline: var(--eun-space-m, 16px);
+}
+
+:is(eun-input, eun-select)[size="xs"]:not(:defined) {
+  --_defaultFontSize: var(--eun-font-size-xs, 10px);
+  --_defaultPaddingBlock: var(--eun-space-xxs, 1.6px);
+  --_defaultLineHeight: 10px;
+}
+
+:is(eun-input, eun-select)[size="s"]:not(:defined) {
+  --_defaultFontSize: var(--eun-font-size-xs, 10px);
+  --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) / 2);
+  --_defaultLineHeight: 10px;
+}
+
+:is(eun-input, eun-select)[size="l"]:not(:defined) {
+  --_defaultFontSize: var(--eun-font-size-m, 16px);
+  --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) * 1.25);
+  --_defaultLineHeight: 1.1rem;
+}
+
+:is(eun-input, eun-select)[size="xl"]:not(:defined) {
+  --_defaultFontSize: var(--eun-font-size-l, 1.3rem);
+  --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) * 1.5);
+  --_defaultLineHeight: 1.3rem;
+}
+
+:is(eun-input, eun-textarea, eun-select):is(
+    [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);
+  line-height: var(--field-line-height, var(--_defaultLineHeight));
+  border: var(--eun-border-width-m, 1.5px) solid var(--_borderColor);
+  border-radius: var(--field-border-radius, var(--_defaultBorderRadius));
+  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;
+}

package/dist/ssr/icon-ssr.css

@@ -0,0 +1,266 @@
+eun-icon:not(:defined) {
+  --_size: var(--icon-size, 1rem);
+  display: flex;
+}
+
+eun-icon:not(:defined)::before {
+  content: "";
+  display: inline-block;
+  box-sizing: content-box;
+  width: var(--_size);
+  height: var(--_size);
+  padding: var(
+    --icon-padding,
+    var(--icon-padding-block, 0) var(--icon-padding-inline, 0)
+  );
+  border: var(--icon-border-width, 0) solid
+    var(--icon-border-color, var(--eun-border-color, #dee0e7));
+  border-radius: var(--icon-border-radius, var(--eun-border-radius-m, 8px));
+  background-color: var(--icon-background, transparent);
+}
+
+@supports (width: attr(size px, 0px)) {
+  eun-icon[size]:not(:defined) {
+    --_size: attr(size px, 1rem);
+  }
+
+  eun-icon:is(
+      [size*="px"],
+      [size*="em"],
+      [size*="vw"],
+      [size*="vh"],
+      [size*="pt"]
+    ):not(:defined) {
+    --_size: attr(size type(<length>), 1rem);
+  }
+}
+
+@supports not (width: attr(size px, 0px)) {
+  eun-icon:is([size="8"], [size="8px"]):not(:defined) {
+    --_size: 8px;
+  }
+
+  eun-icon:is([size="9"], [size="9px"]):not(:defined) {
+    --_size: 9px;
+  }
+
+  eun-icon:is([size="10"], [size="10px"]):not(:defined) {
+    --_size: 10px;
+  }
+
+  eun-icon:is([size="11"], [size="11px"]):not(:defined) {
+    --_size: 11px;
+  }
+
+  eun-icon:is([size="12"], [size="12px"]):not(:defined) {
+    --_size: 12px;
+  }
+
+  eun-icon:is([size="13"], [size="13px"]):not(:defined) {
+    --_size: 13px;
+  }
+
+  eun-icon:is([size="14"], [size="14px"]):not(:defined) {
+    --_size: 14px;
+  }
+
+  eun-icon:is([size="15"], [size="15px"]):not(:defined) {
+    --_size: 15px;
+  }
+
+  eun-icon:is([size="16"], [size="16px"]):not(:defined) {
+    --_size: 16px;
+  }
+
+  eun-icon:is([size="17"], [size="17px"]):not(:defined) {
+    --_size: 17px;
+  }
+
+  eun-icon:is([size="18"], [size="18px"]):not(:defined) {
+    --_size: 18px;
+  }
+
+  eun-icon:is([size="19"], [size="19px"]):not(:defined) {
+    --_size: 19px;
+  }
+
+  eun-icon:is([size="20"], [size="20px"]):not(:defined) {
+    --_size: 20px;
+  }
+
+  eun-icon:is([size="21"], [size="21px"]):not(:defined) {
+    --_size: 21px;
+  }
+
+  eun-icon:is([size="22"], [size="22px"]):not(:defined) {
+    --_size: 22px;
+  }
+
+  eun-icon:is([size="23"], [size="23px"]):not(:defined) {
+    --_size: 23px;
+  }
+
+  eun-icon:is([size="24"], [size="24px"]):not(:defined) {
+    --_size: 24px;
+  }
+
+  eun-icon:is([size="25"], [size="25px"]):not(:defined) {
+    --_size: 25px;
+  }
+
+  eun-icon:is([size="26"], [size="26px"]):not(:defined) {
+    --_size: 26px;
+  }
+
+  eun-icon:is([size="27"], [size="27px"]):not(:defined) {
+    --_size: 27px;
+  }
+
+  eun-icon:is([size="28"], [size="28px"]):not(:defined) {
+    --_size: 28px;
+  }
+
+  eun-icon:is([size="29"], [size="29px"]):not(:defined) {
+    --_size: 29px;
+  }
+
+  eun-icon:is([size="30"], [size="30px"]):not(:defined) {
+    --_size: 30px;
+  }
+
+  eun-icon:is([size="31"], [size="31px"]):not(:defined) {
+    --_size: 31px;
+  }
+
+  eun-icon:is([size="32"], [size="32px"]):not(:defined) {
+    --_size: 32px;
+  }
+
+  eun-icon:is([size="33"], [size="33px"]):not(:defined) {
+    --_size: 33px;
+  }
+
+  eun-icon:is([size="34"], [size="34px"]):not(:defined) {
+    --_size: 34px;
+  }
+
+  eun-icon:is([size="35"], [size="35px"]):not(:defined) {
+    --_size: 35px;
+  }
+
+  eun-icon:is([size="36"], [size="36px"]):not(:defined) {
+    --_size: 36px;
+  }
+
+  eun-icon:is([size="37"], [size="37px"]):not(:defined) {
+    --_size: 37px;
+  }
+
+  eun-icon:is([size="38"], [size="38px"]):not(:defined) {
+    --_size: 38px;
+  }
+
+  eun-icon:is([size="39"], [size="39px"]):not(:defined) {
+    --_size: 39px;
+  }
+
+  eun-icon:is([size="40"], [size="40px"]):not(:defined) {
+    --_size: 40px;
+  }
+
+  eun-icon:is([size="41"], [size="41px"]):not(:defined) {
+    --_size: 41px;
+  }
+
+  eun-icon:is([size="42"], [size="42px"]):not(:defined) {
+    --_size: 42px;
+  }
+
+  eun-icon:is([size="43"], [size="43px"]):not(:defined) {
+    --_size: 43px;
+  }
+
+  eun-icon:is([size="44"], [size="44px"]):not(:defined) {
+    --_size: 44px;
+  }
+
+  eun-icon:is([size="45"], [size="45px"]):not(:defined) {
+    --_size: 45px;
+  }
+
+  eun-icon:is([size="46"], [size="46px"]):not(:defined) {
+    --_size: 46px;
+  }
+
+  eun-icon:is([size="47"], [size="47px"]):not(:defined) {
+    --_size: 47px;
+  }
+
+  eun-icon:is([size="48"], [size="48px"]):not(:defined) {
+    --_size: 48px;
+  }
+
+  eun-icon:is([size="49"], [size="49px"]):not(:defined) {
+    --_size: 49px;
+  }
+
+  eun-icon:is([size="50"], [size="50px"]):not(:defined) {
+    --_size: 50px;
+  }
+
+  eun-icon:is([size="51"], [size="51px"]):not(:defined) {
+    --_size: 51px;
+  }
+
+  eun-icon:is([size="52"], [size="52px"]):not(:defined) {
+    --_size: 52px;
+  }
+
+  eun-icon:is([size="53"], [size="53px"]):not(:defined) {
+    --_size: 53px;
+  }
+
+  eun-icon:is([size="54"], [size="54px"]):not(:defined) {
+    --_size: 54px;
+  }
+
+  eun-icon:is([size="55"], [size="55px"]):not(:defined) {
+    --_size: 55px;
+  }
+
+  eun-icon:is([size="56"], [size="56px"]):not(:defined) {
+    --_size: 56px;
+  }
+
+  eun-icon:is([size="57"], [size="57px"]):not(:defined) {
+    --_size: 57px;
+  }
+
+  eun-icon:is([size="58"], [size="58px"]):not(:defined) {
+    --_size: 58px;
+  }
+
+  eun-icon:is([size="59"], [size="59px"]):not(:defined) {
+    --_size: 59px;
+  }
+
+  eun-icon:is([size="60"], [size="60px"]):not(:defined) {
+    --_size: 60px;
+  }
+
+  eun-icon:is([size="61"], [size="61px"]):not(:defined) {
+    --_size: 61px;
+  }
+
+  eun-icon:is([size="62"], [size="62px"]):not(:defined) {
+    --_size: 62px;
+  }
+
+  eun-icon:is([size="63"], [size="63px"]):not(:defined) {
+    --_size: 63px;
+  }
+
+  eun-icon:is([size="64"], [size="64px"]):not(:defined) {
+    --_size: 64px;
+  }
+}

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

@@ -0,0 +1,34 @@
+eun-image-carousel:not(:defined) {
+  display: block;
+}
+
+eun-image-carousel:not([images="[]"], [images=""]):not(:defined)::before {
+  content: "";
+  display: block;
+  aspect-ratio: var(--image-carousel-aspect-ratio, 4 / 3);
+  border-radius: var(
+    --image-carousel-border-radius,
+    var(--eun-border-radius-m, 8px)
+  );
+  background: var(
+    --image-carousel-background,
+    var(--eun-surface-sunken, #f7f8fa)
+  );
+}
+
+eun-image-carousel:is(:not([images]), [images*="},"]):not(:defined)::after {
+  content: "";
+  display: block;
+  height: var(--image-carousel-thumbnail-size, 64px);
+  margin-top: var(--image-carousel-thumbnail-gap, var(--eun-space-s, 8px));
+}
+
+eun-image-carousel[show-thumbnails="false"]:not(:defined)::after {
+  height: var(--image-carousel-dot-size, 8px);
+}
+
+eun-image-carousel[show-thumbnails="false"][show-dots="false"]:not(
+    :defined
+  )::after {
+  display: none;
+}