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

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

@@ -0,0 +1,267 @@
+@layer components {
+  @property --et-dropzone-min-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 160px;
+  }
+
+  @property --et-dropzone-readonly-min-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 96px;
+  }
+
+  @property --et-dropzone-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-dropzone-border-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --et-dropzone-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+
+  @property --et-dropzone-thumbnail-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 48px;
+  }
+
+  @property --et-dropzone-transition-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 150ms;
+  }
+
+  @property --et-dropzone-opacity-disabled {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.5;
+  }
+
+  @property --et-dropzone-label-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 13px;
+  }
+
+  @property --et-dropzone-support-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 180ms;
+  }
+
+  @property --et-dropzone-error-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-dropzone-warning-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-dropzone-hint-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  et-dropzone {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-dropzone-gap);
+    color: var(--et-surface-color-solid, currentColor);
+
+    --et-form-support-duration: var(--et-dropzone-support-duration);
+    --et-form-support-error-font-size: var(--et-dropzone-error-font-size);
+    --et-form-support-warning-font-size: var(--et-dropzone-warning-font-size);
+    --et-form-support-hint-font-size: var(--et-dropzone-hint-font-size);
+
+    .et-form-support {
+      margin-block-start: calc(4px - var(--et-dropzone-gap));
+    }
+
+    > et-label {
+      font-size: var(--et-dropzone-label-font-size);
+      font-weight: 500;
+      line-height: 1.2;
+      letter-spacing: -0.01em;
+      color: var(--et-surface-color-muted-solid, currentColor);
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    .et-dropzone-native-input {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .et-dropzone-area {
+      position: relative;
+      display: grid;
+    }
+
+    .et-dropzone-trigger {
+      grid-area: 1 / 1;
+      display: grid;
+      place-items: center;
+      min-block-size: var(--et-dropzone-min-height);
+      padding: 16px;
+      border: var(--et-dropzone-border-width) dashed var(--et-surface-border-solid, currentColor);
+      border-radius: var(--et-dropzone-border-radius);
+      background-color: transparent;
+      color: var(--et-surface-color-muted-solid, currentColor);
+      font: inherit;
+      cursor: pointer;
+      transition:
+        border-color var(--et-dropzone-transition-duration) ease,
+        background-color var(--et-dropzone-transition-duration) ease;
+
+      @media (hover: hover) {
+        &:hover:not(:disabled, [aria-disabled='true']) {
+          border-color: var(--et-surface-interaction-hover-solid, currentColor);
+          background-color: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 6%, transparent);
+        }
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+    }
+
+    .et-dropzone-prompt {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .et-dropzone-prompt-icon {
+      display: block;
+      inline-size: 28px;
+      block-size: 28px;
+    }
+
+    .et-dropzone-prompt-text {
+      font-size: 13px;
+      line-height: 1.4;
+    }
+
+    .et-dropzone-area[data-has-preview] .et-dropzone-prompt {
+      visibility: hidden;
+    }
+
+    .et-dropzone-file-icon {
+      display: block;
+      inline-size: 40px;
+      block-size: 40px;
+      color: var(--et-surface-color-muted-solid, currentColor);
+    }
+
+    .et-dropzone-entry-name {
+      overflow: hidden;
+      font-size: 13px;
+      line-height: 1.4;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .et-dropzone-entry-size {
+      font-size: 12px;
+      color: var(--et-surface-color-muted-solid, currentColor);
+    }
+
+    .et-dropzone-internal-errors {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      margin-block-start: calc(4px - var(--et-dropzone-gap));
+      font-size: var(--et-dropzone-error-font-size);
+      color: var(--et-theme-color-ink-solid, currentColor);
+    }
+
+    .et-dropzone-entry-progress {
+      display: grid;
+      grid-template-rows: 0fr;
+      opacity: 0;
+      transition:
+        grid-template-rows var(--et-dropzone-transition-duration) ease,
+        opacity var(--et-dropzone-transition-duration) ease;
+
+      &[data-active] {
+        grid-template-rows: 1fr;
+        opacity: 1;
+      }
+
+      .et-dropzone-entry-progress-inner {
+        min-block-size: 0;
+        overflow: hidden;
+
+        et-progress-bar {
+          margin-block: 4px 2px;
+        }
+      }
+    }
+
+    &[data-can-animate] {
+      .et-dropzone-item,
+      .et-dropzone-preview {
+        transition:
+          opacity var(--et-dropzone-transition-duration) ease,
+          scale var(--et-dropzone-transition-duration) ease;
+
+        @starting-style {
+          opacity: 0;
+          scale: 0.97;
+        }
+      }
+
+      .et-dropzone-internal-errors {
+        transition: opacity var(--et-dropzone-support-duration) ease;
+
+        @starting-style {
+          opacity: 0;
+        }
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      --et-dropzone-support-duration: 1ms;
+      --et-dropzone-transition-duration: 1ms;
+    }
+  }
+
+  et-dropzone[data-drag-over] {
+    .et-dropzone-trigger {
+      border-color: var(--et-theme-color-primary-solid, currentColor);
+      background-color: color-mix(in srgb, var(--et-theme-color-primary-solid, currentColor) 8%, transparent);
+    }
+  }
+
+  et-dropzone[data-error] {
+    .et-dropzone-trigger {
+      border-color: var(--et-theme-color-primary-solid, currentColor);
+    }
+  }
+
+  et-dropzone[data-disabled] {
+    .et-dropzone-area,
+    .et-dropzone-list {
+      opacity: var(--et-dropzone-opacity-disabled);
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+@layer components {
+  .et-form-field-support-counter {
+    flex: none;
+    margin-inline-start: auto;
+    padding-inline-end: calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width));
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .et-counter {
+    display: block;
+    flex: none;
+    font-size: var(--et-form-field-hint-font-size);
+    color: var(--et-surface-color-muted-solid, currentColor);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+
+    &:where([data-over-limit]) {
+      color: var(--et-theme-color-ink-solid);
+      font-weight: var(--et-form-field-counter-over-limit-font-weight, 600);
+    }
+  }
+}

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

@@ -0,0 +1,116 @@
+@layer components {
+  .et-input-clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    border: none;
+    background: transparent;
+    color: var(--et-surface-color-muted-solid, currentColor);
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    appearance: none;
+
+    .et-icon {
+      inline-size: var(--et-form-field-affix-icon-size, 16px);
+      block-size: var(--et-form-field-affix-icon-size, 16px);
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        color: var(--et-surface-color-solid, currentColor);
+      }
+    }
+
+    &.et-input-clear--enter {
+      animation: et-input-clear-in 150ms ease;
+    }
+
+    &.et-input-clear--leave {
+      animation: et-input-clear-out 120ms ease forwards;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      &.et-input-clear--enter,
+      &.et-input-clear--leave {
+        animation: none;
+      }
+    }
+  }
+
+  .et-input-picker-trigger {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--et-surface-color-muted-solid, currentColor);
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    appearance: none;
+    touch-action: manipulation;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: -14px;
+    }
+
+    .et-icon {
+      inline-size: var(--et-form-field-affix-icon-size, 16px);
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        color: var(--et-surface-color-solid, currentColor);
+      }
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      outline-offset: 2px;
+      border-radius: 4px;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      color: var(--et-surface-color-subtle-solid, currentColor);
+    }
+  }
+
+  /* Placed after both blocks above so the equal-weight `:disabled` / `:hover` rules lose on source
+     order; the second selector is the same rule at one class more, to outweigh the field shell's
+     `.et-form-field-affix button { cursor: pointer }`. */
+  :where([data-readonly]:not([data-disabled])) :is(.et-input-picker-trigger, .et-input-clear),
+  :where([data-readonly]:not([data-disabled])) .et-form-field-affix :is(.et-input-picker-trigger, .et-input-clear) {
+    cursor: default;
+    color: var(--et-surface-color-muted-solid, currentColor);
+
+    &:disabled {
+      cursor: default;
+      color: var(--et-surface-color-muted-solid, currentColor);
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        color: var(--et-surface-color-muted-solid, currentColor);
+      }
+    }
+  }
+
+  @keyframes et-input-clear-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes et-input-clear-out {
+    to {
+      opacity: 0;
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+@layer components {
+  /* The host hook is a bare attribute selector, not `:where([data-control-type='rich-text'])`: this
+     sheet is injected by the editor, so a standalone editor instantiated before any form-field would
+     inject it *before* the base sheet and lose every source-order tie against the base frame rules. */
+  et-form-field[data-control-type='rich-text'] {
+    .et-form-field-control-frame {
+      align-items: stretch;
+      padding: 0;
+      cursor: auto;
+    }
+
+    .et-form-field-control-area {
+      align-items: stretch;
+    }
+
+    .et-form-field-control-slot {
+      align-items: stretch;
+    }
+
+    &[data-label-mode='inline'] .et-form-field-label-area--inline {
+      align-items: flex-start;
+      margin-block: 0;
+      padding-block-start: var(--et-form-field-control-padding-block);
+      padding-inline-start: var(--et-form-field-control-padding-inline);
+    }
+
+    &[data-appearance='box'][data-label-mode='inline'] .et-form-field-label-area--inline {
+      margin-inline-end: calc(var(--et-form-field-control-affix-gap) * -1);
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+@layer components {
+  et-form-field {
+    --_et-form-field-suffix-fade: 24px;
+
+    .et-form-field-busy-spinner {
+      flex: none;
+      color: var(--et-surface-color-muted-solid, currentColor);
+    }
+
+    /* The overlap amount lives on the frame, not on the suffix that consumes it: a focused text
+       control has to read it too, and the frame is what both of them inherit from. */
+    .et-form-field-control-frame:has(> .et-form-field-suffix > :is(.et-input-clear, .et-form-field-busy-spinner)) {
+      --_et-form-field-suffix-overlap: calc(
+        var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap)
+      );
+
+      --_et-form-field-suffix-cover: calc(
+        var(--_et-form-field-suffix-overlap) - var(--et-form-field-control-affix-gap)
+      );
+
+      --_et-form-field-suffix-mask-direction: to right;
+
+      &:dir(rtl) {
+        --_et-form-field-suffix-mask-direction: to left;
+      }
+
+      /* An alpha mask, not a gradient in a background colour: a `transparent` fill shows whatever the
+         consumer painted behind the field. */
+      .et-form-field-control-slot {
+        mask-image: linear-gradient(
+          var(--_et-form-field-suffix-mask-direction),
+          black calc(100% - var(--_et-form-field-suffix-cover) - var(--_et-form-field-suffix-fade)),
+          transparent calc(100% - var(--_et-form-field-suffix-cover))
+        );
+      }
+
+      /* A caret scrolls to the very end of the control's box, and a value that is not start-aligned
+         sits there from the first frame - both would land under the opaque part of the ramp, so the
+         box stops where the ramp starts. `:last-of-type` keeps a range input's start field - not
+         near the suffix anyway - from widening and pushing its own separator along. */
+      .et-form-field-control-slot
+        :is(input, textarea):last-of-type:is(:focus, [data-text-align='end'], [data-text-align='center']) {
+        padding-inline-end: calc(var(--_et-form-field-suffix-overlap) + var(--_et-form-field-suffix-fade));
+      }
+    }
+
+    .et-form-field-control-frame:has(> .et-form-field-suffix > .et-input-clear):has(
+        > .et-form-field-suffix > .et-form-field-busy-spinner
+      ) {
+      --_et-form-field-suffix-overlap: calc(
+        2 * (var(--et-form-field-affix-icon-size) + var(--et-form-field-control-affix-gap))
+      );
+    }
+
+    /* The overlap is the suffix's, not the item's: cancelling each item on its own would collapse a
+       clear button and a spinner onto the same spot, since the second one's flow position already
+       accounts for the first one's cancelled width. */
+    .et-form-field-suffix:is(:has(> .et-input-clear), :has(> .et-form-field-busy-spinner)) {
+      position: relative;
+      z-index: 1;
+      align-self: stretch;
+      padding-inline-start: var(--_et-form-field-suffix-fade);
+      margin-inline-start: calc(-1 * (var(--_et-form-field-suffix-fade) + var(--_et-form-field-suffix-overlap)));
+    }
+  }
+}