@ethlete/components 1.0.0-next.68 → 1.0.0-next.70

package/src/lib/forms/form-field/form-support-styles.component.css

@@ -0,0 +1,102 @@
+@layer components {
+  @property --et-form-support-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 180ms;
+  }
+
+  @property --et-form-support-error-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-form-support-warning-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-form-support-hint-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  .et-form-support {
+    display: block;
+    overflow: clip;
+    /* a custom element misses the UA `unicode-bidi: isolate` the HTML rendering rules give a `<div>` */
+    unicode-bidi: isolate;
+  }
+
+  .et-form-support-stack {
+    position: relative;
+    display: grid;
+  }
+
+  .et-form-support-content {
+    grid-area: 1 / 1;
+    min-inline-size: 0;
+    opacity: 0;
+
+    &[data-active] {
+      opacity: 1;
+    }
+
+    &[data-state='leaving'] {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+    }
+  }
+
+  .et-form-support-errors,
+  .et-form-support-warnings {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding-block-start: 4px;
+    color: var(--et-theme-color-ink-solid, currentColor);
+  }
+
+  .et-form-support-errors {
+    font-size: var(--et-form-support-error-font-size);
+  }
+
+  .et-form-support-warnings {
+    font-size: var(--et-form-support-warning-font-size);
+  }
+
+  .et-form-support-hint {
+    padding-block-start: 4px;
+    font-size: var(--et-form-support-hint-font-size);
+    color: var(--et-surface-color-muted-solid, currentColor);
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .et-form-support[data-can-animate] {
+    transition: block-size var(--et-form-support-duration) ease;
+
+    .et-form-support-content {
+      transition: opacity var(--et-form-support-duration) ease;
+
+      @starting-style {
+        &[data-active] {
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+  /* On the region, not on the control host: a control aliases the duration from its own public
+     token on the host, and the closer declaration has to win. */
+  @media (prefers-reduced-motion: reduce) {
+    .et-form-support {
+      --et-form-support-duration: 1ms;
+    }
+  }
+}

package/src/lib/forms/form-field/headless/label.directive.css

@@ -0,0 +1,25 @@
+@layer components {
+  et-label {
+    display: inline;
+    min-inline-size: 0;
+  }
+
+  et-label[hidden] {
+    display: none;
+  }
+
+  .et-label-content {
+    min-inline-size: 0;
+  }
+
+  .et-label-required-marker {
+    display: inline-block;
+    color: var(--et-theme-color-primary-solid);
+    margin-inline-start: 0.45ch;
+    transition: color 150ms ease;
+  }
+
+  et-label[data-disabled] .et-label-required-marker {
+    color: var(--et-surface-interaction-disabled-solid, currentColor);
+  }
+}

package/src/lib/forms/form-field/hint.component.css

@@ -0,0 +1,20 @@
+@layer components {
+  et-form-field {
+    .et-form-field-hint {
+      font-size: var(--et-form-field-hint-font-size);
+      color: var(--et-surface-color-muted-solid, currentColor);
+      padding-inline-start: calc(
+        var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width)
+      );
+      transition: color 150ms ease;
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    &[data-disabled] .et-form-field-hint {
+      color: var(--et-surface-interaction-disabled-solid, currentColor);
+    }
+  }
+}

package/src/lib/forms/input/input.component.css

@@ -0,0 +1,49 @@
+@layer components {
+  et-input {
+    display: block;
+    flex: 1;
+    min-inline-size: 0;
+    color: inherit;
+
+    .et-input-native {
+      display: block;
+      inline-size: 100%;
+      border: none;
+      outline: none;
+      background: transparent;
+      font: inherit;
+      color: inherit;
+      caret-color: var(--et-theme-color-primary-solid, currentColor);
+      padding: 0;
+      min-width: 0;
+
+      &:not(:focus) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &::placeholder {
+        color: color-mix(in srgb, currentColor 46%, transparent);
+      }
+
+      &[data-text-align='start'] {
+        text-align: start;
+      }
+
+      &[data-text-align='center'] {
+        text-align: center;
+      }
+
+      &[data-text-align='end'] {
+        text-align: end;
+      }
+    }
+
+    /* an unresolved bulk-edit value reads as provisional — the mixed label shows as the
+       placeholder, between a committed value (full strength) and a real placeholder (46%) */
+    &[data-mixed] .et-input-native::placeholder {
+      font-style: italic;
+      color: color-mix(in srgb, currentColor 72%, transparent);
+    }
+  }
+}

package/src/lib/forms/input/number-input.component.css

@@ -0,0 +1,128 @@
+@layer components {
+  /* the pointer is captured by the stepper button for the length of a scrub, but every element it
+     passes over still asks for its own cursor — only a document-wide override survives the drag */
+  html.et-number-input-scrubbing,
+  html.et-number-input-scrubbing * {
+    cursor: ew-resize !important;
+  }
+
+  @property --et-number-input-stepper-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  et-number-input {
+    display: block;
+    flex: 1;
+    min-inline-size: 0;
+    color: inherit;
+
+    &[data-stepper] {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .et-number-input-stepper {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      flex: none;
+    }
+
+    .et-number-input-stepper-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+      inline-size: calc(var(--et-number-input-stepper-size) + 8px);
+      block-size: calc(var(--et-number-input-stepper-size) + 8px);
+      padding: 0;
+      border: none;
+      border-radius: 4px;
+      background: transparent;
+      color: var(--et-surface-color-muted-solid, currentColor);
+      cursor: pointer;
+      outline: none;
+      /* the buttons are press-and-hold controls — never scroll instead */
+      touch-action: none;
+
+      /* the drag-to-scrub affordance, and the gesture, are fine-pointer only */
+      @media (pointer: fine) {
+        cursor: ew-resize;
+      }
+
+      .et-icon {
+        inline-size: var(--et-number-input-stepper-size);
+        block-size: var(--et-number-input-stepper-size);
+      }
+
+      @media (hover: hover) {
+        &:hover {
+          background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 12%, transparent);
+          color: var(--et-surface-color-solid, currentColor);
+        }
+      }
+
+      &:active {
+        background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 20%, transparent);
+      }
+
+      &:disabled {
+        cursor: default;
+        background: transparent;
+        color: inherit;
+        opacity: 0.4;
+      }
+    }
+
+    .et-number-input-native {
+      display: block;
+      inline-size: 100%;
+      border: none;
+      outline: none;
+      background: transparent;
+      font: inherit;
+      color: inherit;
+      caret-color: var(--et-theme-color-primary-solid, currentColor);
+      padding: 0;
+      min-width: 0;
+      appearance: textfield;
+
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        appearance: none;
+        margin: 0;
+      }
+
+      &:not(:focus) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &::placeholder {
+        color: color-mix(in srgb, currentColor 46%, transparent);
+      }
+
+      &[data-text-align='start'] {
+        text-align: start;
+      }
+
+      &[data-text-align='center'] {
+        text-align: center;
+      }
+
+      &[data-text-align='end'] {
+        text-align: end;
+      }
+    }
+
+    /* an unresolved bulk-edit value reads as provisional — the mixed label shows as the
+       placeholder, between a committed value (full strength) and a real placeholder (46%) */
+    &[data-mixed] .et-number-input-native::placeholder {
+      font-style: italic;
+      color: color-mix(in srgb, currentColor 72%, transparent);
+    }
+  }
+}

package/src/lib/forms/input/password-input.component.css

@@ -0,0 +1,103 @@
+@layer components {
+  @property --et-password-input-reveal-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  et-password-input {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-inline-size: 0;
+    color: inherit;
+
+    .et-password-input-native {
+      display: block;
+      flex: 1;
+      inline-size: 100%;
+      border: none;
+      outline: none;
+      background: transparent;
+      font: inherit;
+      color: inherit;
+      caret-color: var(--et-theme-color-primary-solid, currentColor);
+      padding: 0;
+      min-width: 0;
+
+      &:not(:focus) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &::placeholder {
+        color: color-mix(in srgb, currentColor 46%, transparent);
+      }
+    }
+
+    /* an unresolved bulk-edit value reads as provisional — the mixed label shows as the
+       placeholder, between a committed value (full strength) and a real placeholder (46%) */
+    &[data-mixed] .et-password-input-native::placeholder {
+      font-style: italic;
+      color: color-mix(in srgb, currentColor 72%, transparent);
+    }
+
+    .et-password-input-caps-warning {
+      display: flex;
+      align-items: center;
+      flex: none;
+      inline-size: var(--et-password-input-reveal-size);
+      block-size: var(--et-password-input-reveal-size);
+      color: var(--et-surface-color-muted-solid, currentColor);
+
+      .et-icon {
+        inline-size: 100%;
+        block-size: 100%;
+      }
+    }
+  }
+
+  .et-password-input-reveal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    inline-size: calc(var(--et-password-input-reveal-size) + 8px);
+    block-size: calc(var(--et-password-input-reveal-size) + 8px);
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--et-surface-color-muted-solid, currentColor);
+    cursor: pointer;
+    outline: none;
+
+    .et-icon {
+      inline-size: var(--et-password-input-reveal-size);
+      block-size: var(--et-password-input-reveal-size);
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 12%, transparent);
+        color: var(--et-surface-color-solid, currentColor);
+      }
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      outline-offset: 1px;
+    }
+
+    &:active {
+      background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 20%, transparent);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      background: transparent;
+      color: inherit;
+    }
+  }
+}

package/src/lib/forms/multi-language-rich-text-editor/multi-language-rich-text-editor.component.css

@@ -0,0 +1,8 @@
+@layer components {
+  .et-multi-language-rich-text-editor {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-inline-size: 0;
+  }
+}

package/src/lib/forms/multi-language-rich-text-editor/tools/multi-language-rich-text-editor-language-tool.component.css

@@ -0,0 +1,104 @@
+@layer components {
+  @property --et-multi-language-rich-text-editor-badge-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 7px;
+  }
+
+  @property --et-multi-language-rich-text-editor-dot-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  .et-ml-rte-lang-tool {
+    display: contents;
+  }
+
+  /* Each menu row: label on the left, a content-status dot on the right. The leading check (menu
+     icon slot) marks the active language; this dot is a separate axis — has content vs still empty. */
+  .et-ml-rte-lang-item {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    min-inline-size: 0;
+  }
+
+  .et-ml-rte-lang-dot {
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--et-multi-language-rich-text-editor-dot-size);
+    block-size: var(--et-multi-language-rich-text-editor-dot-size);
+    border-radius: 50%;
+    /* empty: a hollow ring in a muted neutral — reads as "not filled in yet" */
+    border: 1.5px solid var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 40%, transparent));
+    background: transparent;
+  }
+
+  .et-ml-rte-lang-dot--filled {
+    /* has content: a solid accent dot */
+    border-color: var(--et-theme-color-primary-solid, var(--et-surface-color-solid, currentColor));
+    background: var(--et-theme-color-primary-solid, var(--et-surface-color-solid, currentColor));
+  }
+
+  /* A square, neutral toolbar control that mirrors the icon buttons beside it (same size, same
+     muted-until-pressed surface-interaction tint) — it just shows the active language code instead
+     of an icon. A badge dot appears while any language is still empty. */
+  .et-ml-rte-lang-trigger {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    inline-size: 3.1rem;
+    block-size: 3.1rem;
+    border: none;
+    border-radius: var(--et-rich-text-editor-button-radius, 4px);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+    appearance: none;
+    transition: background 120ms ease;
+  }
+
+  @media (hover: hover) {
+    .et-ml-rte-lang-trigger:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent);
+    }
+  }
+
+  .et-ml-rte-lang-trigger:focus-visible {
+    background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent);
+  }
+
+  .et-ml-rte-lang-trigger:active:not(:disabled) {
+    background: color-mix(in srgb, var(--et-surface-interaction-solid) 20%, transparent);
+  }
+
+  .et-ml-rte-lang-trigger:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .et-ml-rte-lang-trigger-code {
+    font-size: 1.3rem;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
+  /* "Some language still needs content" — a small accent dot in the corner, mirroring the warning
+     icons inside the menu. */
+  .et-ml-rte-lang-trigger--flagged::after {
+    content: '';
+    position: absolute;
+    inset-block-start: 4px;
+    inset-inline-end: 4px;
+    inline-size: var(--et-multi-language-rich-text-editor-badge-size);
+    block-size: var(--et-multi-language-rich-text-editor-badge-size);
+    border-radius: 50%;
+    background: var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor));
+  }
+}