@ethlete/components 1.0.0-next.69 → 1.0.0-next.71

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

@@ -0,0 +1,312 @@
+@layer components {
+  et-form-field {
+    &:where([data-size='sm']) {
+      --et-form-field-gap: 4px;
+      --_et-form-field-control-border-radius: 4px;
+      --et-form-field-control-padding-block: 4px;
+      --et-form-field-control-padding-inline: 10px;
+      --et-form-field-control-affix-gap: 6px;
+      --et-form-field-control-font-size: 12px;
+      --et-form-field-control-min-height: 32px;
+      --et-form-field-label-font-size: 12px;
+    }
+
+    /* `data-size` is a host binding, so a field the router just created paints one frame without it.
+       The default size must therefore also match a field that has no attribute yet. */
+    &:where([data-size='md'], :not([data-size])) {
+      --et-form-field-gap: 5px;
+      --_et-form-field-control-border-radius: 5px;
+      --et-form-field-control-padding-block: 6px;
+      --et-form-field-control-padding-inline: 12px;
+      --et-form-field-control-affix-gap: 8px;
+      --et-form-field-control-font-size: 14px;
+      --et-form-field-control-min-height: 50px;
+      --et-form-field-label-font-size: 13px;
+    }
+
+    &:where([data-size='lg']) {
+      --et-form-field-gap: 6px;
+      --_et-form-field-control-border-radius: 6px;
+      --et-form-field-control-padding-block: 8px;
+      --et-form-field-control-padding-inline: 14px;
+      --et-form-field-control-affix-gap: 10px;
+      --et-form-field-control-font-size: 16px;
+      --et-form-field-control-min-height: 58px;
+      --et-form-field-label-font-size: 14px;
+    }
+
+    &[data-fill='filled'] {
+      --_et-form-field-control-background: var(
+        --et-surface-background-solid,
+        var(--et-surface-base-solid, transparent)
+      );
+    }
+
+    /* The host hook is a bare attribute selector, not `:where([data-text-shell])`: this sheet is
+       injected by the control, so a control instantiated before any form-field would inject it
+       *before* the base sheet and lose every source-order tie against the base frame/label rules. */
+    &[data-text-shell] {
+      &[data-label-mode='static'] {
+        &[data-has-label]:not(:has(et-label[hidden])) .et-form-field-shell {
+          padding-block-start: calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap));
+        }
+
+        .et-form-field-control-area {
+          position: static;
+        }
+
+        .et-form-field-label-area {
+          position: absolute;
+          inset-block-start: 0;
+          inset-inline-start: var(--et-form-field-control-padding-inline);
+          transform: translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width)));
+        }
+
+        &[data-appearance='underline'][data-fill='transparent'] .et-form-field-label-area {
+          inset-inline-start: 0;
+        }
+      }
+
+      &[data-label-mode='inline'] {
+        .et-form-field-control-frame {
+          align-items: stretch;
+        }
+
+        .et-form-field-control-area {
+          position: static;
+          gap: var(--et-form-field-control-affix-gap);
+          align-items: stretch;
+        }
+
+        .et-form-field-control-slot {
+          display: flex;
+          align-items: center;
+        }
+
+        .et-form-field-label-area--inline {
+          position: static;
+          flex-shrink: 0;
+          transform: none;
+          white-space: nowrap;
+          pointer-events: auto;
+          font-size: var(--et-form-field-control-font-size);
+          line-height: var(--et-form-field-control-line-height);
+          display: flex;
+          align-items: center;
+          margin-block: calc(var(--et-form-field-control-padding-block) * -1);
+        }
+
+        &[data-appearance='underline'] .et-form-field-label-area--inline::after {
+          content: ':';
+        }
+
+        &[data-appearance='box'] .et-form-field-label-area--inline {
+          padding-inline-end: var(--et-form-field-control-padding-inline);
+          margin-inline-end: calc(var(--et-form-field-control-padding-inline) - var(--et-form-field-control-affix-gap));
+          border-inline-end: var(--et-form-field-control-border-width) solid
+            var(--et-surface-border-solid, currentColor);
+        }
+      }
+
+      &[data-label-mode='floating-inside'],
+      &[data-label-mode='floating-outside'] {
+        :is(.et-input-native, .et-number-input-native, .et-textarea-native)::placeholder {
+          transition: color 150ms ease;
+        }
+
+        .et-select-value[data-placeholder] {
+          transition: color 150ms ease;
+        }
+
+        &:not([data-label-floated]) :is(.et-input-native, .et-number-input-native, .et-textarea-native)::placeholder {
+          color: transparent;
+        }
+
+        &:not([data-label-floated]) .et-select-value[data-placeholder] {
+          color: transparent;
+        }
+      }
+
+      &[data-label-mode='floating-outside'] {
+        .et-form-field-control-area {
+          align-self: stretch;
+          display: flex;
+          align-items: center;
+        }
+
+        .et-form-field-label-area--floating {
+          inset-inline-start: 0;
+        }
+
+        &[data-has-label]:not(:has(et-label[hidden])) .et-form-field-shell {
+          padding-block-start: calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap));
+        }
+
+        &[data-label-floated] .et-form-field-label-area--floating {
+          inset-block-start: 0;
+          inset-inline-start: calc(var(--_et-form-field-prefix-offset, 0px) * -1);
+          transform: translateY(
+            calc(
+              -100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width) -
+                var(--et-form-field-control-padding-block)
+            )
+          );
+        }
+      }
+
+      &[data-label-mode='floating-inside'] {
+        --_et-form-field-float-inside-extra-padding: calc(
+          var(--et-form-field-label-font-size) * var(--_et-form-field-floating-label-scale) + 2px
+        );
+
+        .et-form-field-control-area {
+          align-self: stretch;
+          display: flex;
+          align-items: center;
+          padding-block-start: var(--_et-form-field-float-inside-extra-padding);
+        }
+
+        .et-form-field-label-area--floating {
+          inset-inline-start: 0;
+        }
+
+        &[data-label-floated] .et-form-field-label-area--floating {
+          inset-block-start: 4px;
+          transform: scale(var(--_et-form-field-floating-label-scale));
+        }
+
+        .et-form-field-control-slot {
+          font-size: calc(var(--et-form-field-control-font-size) * 0.96);
+        }
+      }
+
+      .et-form-field-label-area {
+        max-inline-size: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      /* Hover follows the FRAME and the label — the two boxes that activate the control — not the host,
+         whose box also spans the label band and the support row. Readonly and disabled get no hover
+         feedback at all: the frame's `pointer-events: none` (disabled) does not stop an ancestor from
+         matching `:hover`, so it has to be excluded here. */
+      @media (hover: hover) {
+        &:where(:not([data-readonly]):not([data-disabled]):not(:has(.et-color-interactive-exclude:hover))):where(
+            :has(.et-form-field-control-frame:hover),
+            :has(.et-form-field-label-area:hover)
+          ) {
+          .et-form-field-control-frame {
+            border-color: var(--et-surface-interaction-hover-solid, currentColor);
+          }
+
+          .et-form-field-label-area,
+          .et-form-field-affix {
+            color: var(--et-surface-color-solid, currentColor);
+            opacity: 1;
+          }
+        }
+      }
+
+      &:where(:has(:focus-visible):not([data-readonly])) .et-form-field-control-frame,
+      &:where([data-expanded]:not([data-readonly])) .et-form-field-control-frame,
+      &:where([data-focused]:not([data-readonly])) .et-form-field-control-frame {
+        border-color: var(--et-theme-color-primary-solid);
+      }
+
+      &:where(:has(:focus-visible):not([data-readonly])) .et-form-field-label-area,
+      &:where(:has(:focus-visible):not([data-readonly])) .et-form-field-affix,
+      &:where([data-expanded]:not([data-readonly])) .et-form-field-label-area,
+      &:where([data-expanded]:not([data-readonly])) .et-form-field-affix,
+      &:where([data-focused]:not([data-readonly])) .et-form-field-label-area,
+      &:where([data-focused]:not([data-readonly])) .et-form-field-affix {
+        color: var(--et-surface-color-solid, currentColor);
+        opacity: 1;
+      }
+
+      &[data-readonly] {
+        .et-form-field-shell {
+          cursor: default;
+        }
+
+        .et-form-field-control-frame {
+          cursor: default;
+        }
+
+        .et-form-field-label-area {
+          cursor: default;
+        }
+
+        .et-form-field-control,
+        input,
+        textarea,
+        [contenteditable] {
+          cursor: default;
+        }
+      }
+
+      &[data-error] .et-form-field-control-frame {
+        border-color: var(--et-theme-color-primary-solid);
+      }
+
+      &[data-error] .et-form-field-label-area {
+        color: var(--et-theme-color-ink-solid);
+      }
+
+      &[data-error] .et-form-field-affix {
+        color: var(--et-theme-color-ink-solid);
+        opacity: 1;
+      }
+
+      /* Driven by the registered control's disabled state (data-disabled), NOT :has(:disabled) —
+         a composite control like the rich text editor legitimately disables individual toolbar
+         buttons while fully enabled, and :has(:disabled) would dim (and pointer-events-kill) the
+         whole field over it. */
+      &[data-disabled] {
+        /* on the shell, not the frame: the frame's `pointer-events: none` takes it out of hit
+           testing, so its own cursor never reaches the pointer */
+        .et-form-field-shell {
+          cursor: not-allowed;
+        }
+
+        .et-form-field-control-frame {
+          opacity: var(--et-form-field-control-disabled-opacity);
+          pointer-events: none;
+          box-shadow: none;
+        }
+
+        .et-form-field-label-area {
+          cursor: not-allowed;
+        }
+      }
+
+      &[data-appearance='underline'] {
+        /* An underline field is text with a rule beneath it — there is no box to fill, so it must not
+           reserve the box height the filled/box skins need. A floating label still grows the frame
+           past this floor — it adds its own padding-block-start on top. */
+        --et-form-field-control-min-height: calc(
+          var(--et-form-field-control-font-size) * var(--et-form-field-control-line-height) +
+            var(--et-form-field-control-padding-block) * 2
+        );
+
+        .et-form-field-control-frame {
+          border-top: none;
+          border-inline: none;
+          border-radius: 0;
+          box-shadow: none;
+        }
+
+        &[data-fill='transparent'] {
+          .et-form-field-control-frame {
+            padding-inline: 0;
+          }
+
+          .et-form-field-errors,
+          .et-form-field-hint {
+            padding-inline-start: 0;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+@layer components {
+  et-form-field[data-control-type='textarea'] {
+    .et-form-field-control-frame {
+      align-items: stretch;
+    }
+
+    .et-form-field-control-area,
+    .et-form-field-control-slot {
+      align-items: stretch;
+    }
+
+    .et-form-field-affix {
+      align-items: flex-start;
+    }
+
+    &:not([data-label-floated]) .et-form-field-label-area--floating {
+      inset-block-start: calc((var(--et-form-field-control-font-size) * var(--et-form-field-control-line-height)) / 2);
+    }
+
+    &[data-label-mode='floating-inside']:not([data-label-floated]) .et-form-field-label-area--floating {
+      inset-block-start: calc(
+        var(--_et-form-field-float-inside-extra-padding) +
+          (var(--et-form-field-control-font-size) * var(--et-form-field-control-line-height)) / 2
+      );
+    }
+
+    &[data-label-mode='inline'] .et-form-field-label-area--inline {
+      align-items: flex-start;
+      padding-block-start: var(--et-form-field-control-padding-block);
+    }
+  }
+}

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

@@ -0,0 +1,328 @@
+@layer components {
+  @property --et-form-field-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --et-form-field-control-border-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 1px;
+  }
+
+  @property --et-form-field-control-padding-block {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-form-field-control-padding-inline {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-form-field-control-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-form-field-control-line-height {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 1.5;
+  }
+
+  @property --et-form-field-control-affix-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-form-field-affix-icon-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-form-field-control-disabled-opacity {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.5;
+  }
+
+  @property --et-form-field-control-min-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 40px;
+  }
+
+  @property --et-form-field-label-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-form-field-error-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-form-field-warning-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-form-field-hint-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-form-field-support-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 180ms;
+  }
+
+  et-form-field {
+    --et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));
+    --_et-form-field-control-background: transparent;
+    --_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);
+    --_et-form-field-floating-label-scale: 0.75;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-form-field-gap);
+    color: var(--et-surface-color-solid, currentColor);
+
+    .et-form-field-shell {
+      display: flex;
+      flex-direction: column;
+      gap: var(--et-form-field-gap);
+      min-inline-size: 0;
+      overflow: visible;
+    }
+
+    .et-form-field-label-area {
+      display: flex;
+      align-items: center;
+      font-size: var(--et-form-field-label-font-size);
+      font-weight: 500;
+      line-height: 1.2;
+      letter-spacing: -0.01em;
+      color: var(--et-surface-color-muted-solid, currentColor);
+      cursor: text;
+      -webkit-user-select: none;
+      user-select: none;
+      min-inline-size: 0;
+      transition:
+        color 150ms ease,
+        opacity 150ms ease;
+
+      et-label {
+        display: inline;
+        min-inline-size: 0;
+      }
+    }
+
+    .et-form-field-label-area--floating {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 0;
+      z-index: 1;
+      max-inline-size: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      transform: translateY(-50%);
+      transform-origin: left top;
+      pointer-events: none;
+    }
+
+    &[data-can-animate] .et-form-field-label-area--floating {
+      transition:
+        color 150ms ease,
+        opacity 150ms ease,
+        inset-block-start 150ms ease,
+        inset-inline-start 150ms ease,
+        transform 150ms ease;
+    }
+
+    .et-form-field-control-frame {
+      position: relative;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      gap: var(--et-form-field-control-affix-gap);
+      min-inline-size: 0;
+      min-block-size: var(--et-form-field-control-min-height);
+      padding-block: var(--et-form-field-control-padding-block);
+      padding-inline: var(--et-form-field-control-padding-inline);
+      border: var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);
+      border-radius: var(--et-form-field-control-border-radius, var(--_et-form-field-control-border-radius, 4px));
+      background: var(--_et-form-field-control-background);
+      font-size: var(--et-form-field-control-font-size);
+      line-height: var(--et-form-field-control-line-height);
+      transition:
+        background-color 150ms ease,
+        border-color 150ms ease,
+        box-shadow 150ms ease,
+        opacity 150ms ease;
+      cursor: text;
+    }
+
+    .et-form-field-affix {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      gap: var(--et-form-field-control-affix-gap);
+      color: var(--et-surface-color-muted-solid, currentColor);
+      pointer-events: none;
+      transition: color 150ms ease;
+
+      &:empty {
+        display: none;
+      }
+
+      > * {
+        pointer-events: none;
+      }
+
+      > :is([etInputPrefix], [etInputSuffix], .et-form-field-busy-spinner) {
+        opacity: 0.78;
+        transition: opacity 150ms ease;
+      }
+
+      /* Only a *direct* child: an icon nested in an affix control (e.g. an `et-icon-button` suffix)
+         is already sized by that control. */
+      > .et-icon {
+        flex: none;
+        inline-size: var(--et-form-field-affix-icon-size);
+        block-size: var(--et-form-field-affix-icon-size);
+      }
+
+      > :is(
+        button,
+        a[href],
+        input,
+        select,
+        textarea,
+        summary,
+        label,
+        [role='button'],
+        [tabindex]:not([tabindex='-1'])
+      ) {
+        pointer-events: auto;
+      }
+
+      button {
+        font: inherit;
+        color: inherit;
+        border: none;
+        background: transparent;
+        padding: 0;
+        cursor: pointer;
+      }
+    }
+
+    .et-form-field-control-area {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-inline-size: 0;
+
+      > * {
+        min-inline-size: 0;
+      }
+    }
+
+    .et-form-field-control-slot {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-inline-size: 0;
+    }
+
+    .et-form-field-support {
+      overflow: clip;
+    }
+
+    .et-form-field-support-row {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--et-form-field-support-gap, 0.8rem);
+    }
+
+    .et-form-field-support-stack {
+      position: relative;
+      display: grid;
+      flex: 1 1 auto;
+      min-inline-size: 0;
+    }
+
+    .et-form-field-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-field-errors {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      font-size: var(--et-form-field-error-font-size);
+      color: var(--et-theme-color-ink-solid);
+      padding-inline-start: calc(
+        var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width)
+      );
+    }
+
+    .et-form-field-warnings {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      font-size: var(--et-form-field-warning-font-size);
+      color: var(--et-theme-color-ink-solid);
+      padding-inline-start: calc(
+        var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width)
+      );
+    }
+
+    .et-form-field-support[data-can-animate] {
+      transition: block-size var(--et-form-field-support-duration) ease;
+
+      .et-form-field-support-content {
+        transition: opacity var(--et-form-field-support-duration) ease;
+
+        @starting-style {
+          &[data-active] {
+            opacity: 0;
+          }
+        }
+      }
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    et-form-field {
+      --et-form-field-support-duration: 1ms;
+    }
+  }
+}