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

package/src/lib/forms/date-time/date-time-input/date-time-input.component.css

@@ -0,0 +1,151 @@
+@layer components {
+  et-date-time-input {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: center;
+    flex: 1;
+    min-inline-size: 0;
+    color: inherit;
+
+    .et-date-time-input-field {
+      min-inline-size: 0;
+      border: none;
+      outline: none;
+      background: transparent;
+      font: inherit;
+      color: inherit;
+      padding: 0;
+      caret-color: var(--et-theme-color-primary-solid, currentColor);
+      font-variant-numeric: tabular-nums;
+
+      &::placeholder {
+        color: color-mix(in srgb, currentColor 46%, transparent);
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+    }
+
+    .et-date-time-input-local-reading {
+      font-size: var(--et-form-field-hint-font-size);
+      line-height: 1.3;
+      color: var(--et-surface-color-muted-solid, currentColor);
+      font-variant-numeric: tabular-nums;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    et-form-field[data-disabled] & .et-date-time-input-local-reading {
+      color: var(--et-surface-interaction-disabled-solid, currentColor);
+    }
+
+    &[data-mixed] .et-date-time-input-field::placeholder {
+      font-style: italic;
+      color: color-mix(in srgb, currentColor 72%, transparent);
+    }
+  }
+
+  .et-date-time-input-panel {
+    .et-date-time-input-panel-tabs {
+      display: none;
+    }
+
+    .et-date-time-input-panel-panes {
+      display: flex;
+      align-items: start;
+      gap: 12px;
+    }
+
+    /* absorbs etDateTimePickerPanes' animated block-size: the overflow stays out of layout, so the
+       panel body snaps once instead of chasing a frame-by-frame moving target */
+    .et-date-time-input-panel-time-pane {
+      align-self: stretch;
+      display: flex;
+    }
+
+    .et-time-picker {
+      align-items: center;
+      border-inline-start: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.08));
+      padding-inline-start: 12px;
+    }
+  }
+
+  .et-overlay.et-date-picker-sheet .et-date-time-input-panel {
+    .et-date-time-input-panel-tabs {
+      display: block;
+      margin-block-end: 12px;
+
+      .et-segmented-button-group-buttons {
+        display: flex;
+        align-self: stretch;
+      }
+
+      et-segmented-button {
+        flex: 1;
+      }
+    }
+
+    .et-date-time-input-panel-panes {
+      display: grid;
+      justify-content: center;
+      justify-items: center;
+      align-items: center;
+
+      > et-calendar,
+      > .et-date-time-input-panel-time-pane {
+        grid-area: 1 / 1;
+      }
+    }
+
+    .et-date-time-input-panel-time-pane {
+      align-self: center;
+      align-items: center;
+    }
+
+    .et-time-picker {
+      border-inline-start: none;
+      padding-inline-start: 0;
+    }
+
+    .et-date-time-input-panel-panes[data-active-pane='date'] > .et-date-time-input-panel-time-pane {
+      visibility: hidden;
+    }
+
+    .et-date-time-input-panel-panes[data-active-pane='time'] > et-calendar {
+      visibility: hidden;
+    }
+
+    /* `data-nav` is unset on open, so the first render does not animate; the selector stops
+       matching while a pane is inactive, which restarts the animation on every re-activation */
+    .et-date-time-input-panel-panes[data-nav='forward'][data-active-pane='time'] > .et-date-time-input-panel-time-pane {
+      animation: et-date-time-input-pane-in-forward 200ms ease;
+    }
+
+    .et-date-time-input-panel-panes[data-nav='backward'][data-active-pane='date'] > et-calendar {
+      animation: et-date-time-input-pane-in-backward 200ms ease;
+    }
+  }
+
+  @keyframes et-date-time-input-pane-in-forward {
+    from {
+      opacity: 0;
+      transform: translateX(14px);
+    }
+  }
+
+  @keyframes et-date-time-input-pane-in-backward {
+    from {
+      opacity: 0;
+      transform: translateX(-14px);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-date-time-input-panel-panes > et-calendar,
+    .et-date-time-input-panel-panes > .et-date-time-input-panel-time-pane {
+      animation: none;
+    }
+  }
+}

package/src/lib/forms/date-time/date-time-range-input/date-time-range-input.component.css

@@ -0,0 +1,121 @@
+@layer components {
+  et-date-time-range-input {
+    --et-range-input-stack-threshold: 22em;
+    container: et-date-time-range-input / inline-size;
+
+    .et-date-time-range-input-local-reading {
+      flex-basis: 100%;
+      font-size: var(--et-form-field-hint-font-size);
+      line-height: 1.3;
+      color: var(--et-surface-color-muted-solid, currentColor);
+      font-variant-numeric: tabular-nums;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    et-form-field[data-disabled] & .et-date-time-range-input-local-reading {
+      color: var(--et-surface-interaction-disabled-solid, currentColor);
+    }
+
+    @container et-date-time-range-input (inline-size < 22em) {
+      .et-date-time-range-input-field {
+        flex-basis: 100%;
+      }
+
+      .et-date-time-range-input-separator {
+        display: none;
+      }
+    }
+  }
+
+  .et-date-time-range-input-panel {
+    .et-date-time-range-input-panel-tabs {
+      display: none;
+    }
+
+    .et-date-time-range-input-panel-panes {
+      display: flex;
+      align-items: start;
+      gap: 12px;
+    }
+
+    /* absorbs etDateTimePickerPanes' animated block-size: the overflow stays out of layout, so the
+       panel body snaps once instead of chasing a frame-by-frame moving target */
+    > .et-date-time-range-input-panel-panes > et-time-picker {
+      align-self: stretch;
+      border-inline-start: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.08));
+      padding-inline-start: 12px;
+    }
+  }
+
+  .et-overlay.et-date-picker-sheet .et-date-time-range-input-panel {
+    .et-date-time-range-input-panel-tabs {
+      display: block;
+      margin-block-end: 12px;
+
+      .et-segmented-button-group-buttons {
+        display: flex;
+        align-self: stretch;
+      }
+
+      et-segmented-button {
+        flex: 1;
+      }
+    }
+
+    .et-date-time-range-input-panel-panes {
+      display: grid;
+      justify-content: center;
+      justify-items: center;
+      align-items: center;
+
+      > et-calendar,
+      > et-time-picker {
+        grid-area: 1 / 1;
+      }
+    }
+
+    et-time-picker {
+      align-self: center;
+      border-inline-start: none;
+      padding-inline-start: 0;
+    }
+
+    .et-date-time-range-input-panel-panes[data-active-pane='times'] > et-calendar,
+    .et-date-time-range-input-panel-panes[data-active-pane='dates'] > et-time-picker {
+      visibility: hidden;
+    }
+
+    /* `data-nav` is unset on open, so the first render does not animate; the selector stops
+       matching while a pane is inactive, which restarts the animation on every re-activation */
+    .et-date-time-range-input-panel-panes[data-nav='forward'][data-active-pane='times'] > et-time-picker {
+      animation: et-date-time-range-input-pane-in-forward 200ms ease;
+    }
+
+    .et-date-time-range-input-panel-panes[data-nav='backward'][data-active-pane='dates'] > et-calendar {
+      animation: et-date-time-range-input-pane-in-backward 200ms ease;
+    }
+  }
+
+  @keyframes et-date-time-range-input-pane-in-forward {
+    from {
+      opacity: 0;
+      transform: translateX(14px);
+    }
+  }
+
+  @keyframes et-date-time-range-input-pane-in-backward {
+    from {
+      opacity: 0;
+      transform: translateX(-14px);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-date-time-range-input-panel-panes > et-calendar,
+    .et-date-time-range-input-panel-panes > et-time-picker {
+      animation: none;
+    }
+  }
+}

package/src/lib/forms/date-time/duration-input/duration-input.component.css

@@ -0,0 +1,88 @@
+@layer components {
+  et-duration-input {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    min-inline-size: 0;
+    color: inherit;
+
+    .et-duration-input-field {
+      flex: 1;
+      min-inline-size: 0;
+      border: none;
+      outline: none;
+      background: transparent;
+      font: inherit;
+      color: inherit;
+      padding: 0;
+      caret-color: var(--et-theme-color-primary-solid, currentColor);
+      font-variant-numeric: tabular-nums;
+
+      &::placeholder {
+        color: color-mix(in srgb, currentColor 46%, transparent);
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+    }
+
+    &[data-mixed] .et-duration-input-field::placeholder {
+      font-style: italic;
+      color: color-mix(in srgb, currentColor 72%, transparent);
+    }
+
+    .et-duration-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: 16px;
+        block-size: 16px;
+      }
+
+      @media (hover: hover) {
+        &:hover {
+          color: var(--et-surface-color-solid, currentColor);
+        }
+      }
+
+      &.et-duration-input-clear--enter {
+        animation: et-duration-input-clear-in 150ms ease;
+      }
+
+      &.et-duration-input-clear--leave {
+        animation: et-duration-input-clear-out 120ms ease forwards;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        &.et-duration-input-clear--enter,
+        &.et-duration-input-clear--leave {
+          animation: none;
+        }
+      }
+    }
+  }
+
+  @keyframes et-duration-input-clear-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes et-duration-input-clear-out {
+    to {
+      opacity: 0;
+    }
+  }
+}

package/src/lib/forms/date-time/range-input-shell-styles.component.css

@@ -0,0 +1,55 @@
+@layer components {
+  et-date-range-input,
+  et-time-range-input,
+  et-date-time-range-input {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 2px 8px;
+    flex: 1 1 auto;
+    /* Must stay an `inline-size`, not a `min-inline-size`, which would stop the fields shrinking
+       below it. Each host repeats this value as a literal in its own `@container` condition -
+       container query conditions cannot reference custom properties. */
+    inline-size: var(--et-range-input-stack-threshold);
+    min-inline-size: 0;
+    color: inherit;
+  }
+
+  /* The host stays inside `:where()` so each control's `@container` override outweighs this
+     `flex: 1`, whichever stylesheet is injected last. */
+  :where(et-date-range-input) .et-date-range-input-field,
+  :where(et-time-range-input) .et-time-range-input-field,
+  :where(et-date-time-range-input) .et-date-time-range-input-field {
+    flex: 1;
+    min-inline-size: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font: inherit;
+    color: inherit;
+    padding: 0;
+    caret-color: var(--et-theme-color-primary-solid, currentColor);
+    font-variant-numeric: tabular-nums;
+
+    &::placeholder {
+      color: color-mix(in srgb, currentColor 46%, transparent);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  et-date-range-input[data-mixed] .et-date-range-input-field::placeholder,
+  et-time-range-input[data-mixed] .et-time-range-input-field::placeholder,
+  et-date-time-range-input[data-mixed] .et-date-time-range-input-field::placeholder {
+    font-style: italic;
+    color: color-mix(in srgb, currentColor 72%, transparent);
+  }
+
+  et-date-range-input .et-date-range-input-separator,
+  et-time-range-input .et-time-range-input-separator,
+  et-date-time-range-input .et-date-time-range-input-separator {
+    color: var(--et-surface-color-muted-solid, currentColor);
+  }
+}

package/src/lib/forms/date-time/time-input/time-input.component.css

@@ -0,0 +1,35 @@
+@layer components {
+  et-time-input {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-inline-size: 0;
+    color: inherit;
+
+    .et-time-input-field {
+      flex: 1;
+      min-inline-size: 0;
+      border: none;
+      outline: none;
+      background: transparent;
+      font: inherit;
+      color: inherit;
+      padding: 0;
+      caret-color: var(--et-theme-color-primary-solid, currentColor);
+      font-variant-numeric: tabular-nums;
+
+      &::placeholder {
+        color: color-mix(in srgb, currentColor 46%, transparent);
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+    }
+
+    &[data-mixed] .et-time-input-field::placeholder {
+      font-style: italic;
+      color: color-mix(in srgb, currentColor 72%, transparent);
+    }
+  }
+}

package/src/lib/forms/date-time/time-range-input/time-range-input.component.css

@@ -0,0 +1,16 @@
+@layer components {
+  et-time-range-input {
+    --et-range-input-stack-threshold: 11em;
+    container: et-time-range-input / inline-size;
+
+    @container et-time-range-input (inline-size < 11em) {
+      .et-time-range-input-field {
+        flex-basis: 100%;
+      }
+
+      .et-time-range-input-separator {
+        display: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+@layer components {
+  .et-dropzone-list {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .et-dropzone-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px;
+    border: 1px solid var(--et-surface-border-solid, currentColor);
+    border-radius: calc(var(--et-dropzone-border-radius) / 1.5);
+    background-color: var(--et-surface-background-solid, transparent);
+
+    .et-dropzone-item-thumbnail {
+      display: grid;
+      place-items: center;
+      flex-shrink: 0;
+      inline-size: var(--et-dropzone-thumbnail-size);
+      block-size: var(--et-dropzone-thumbnail-size);
+      overflow: hidden;
+      border-radius: calc(var(--et-dropzone-border-radius) / 2);
+      background-color: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 8%, transparent);
+
+      .et-dropzone-preview-image {
+        inline-size: 100%;
+        block-size: 100%;
+        object-fit: contain;
+      }
+
+      .et-dropzone-file-icon {
+        inline-size: 22px;
+        block-size: 22px;
+      }
+    }
+
+    .et-dropzone-item-info {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      min-inline-size: 0;
+      flex: 1;
+    }
+  }
+}

package/src/lib/forms/dropzone/dropzone-preview-styles.component.css

@@ -0,0 +1,67 @@
+@layer components {
+  .et-dropzone-preview {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    border: var(--et-dropzone-border-width) solid var(--et-surface-border-solid, currentColor);
+    border-radius: var(--et-dropzone-border-radius);
+    background-color: var(--et-surface-background-solid, transparent);
+
+    > .et-dropzone-preview-image {
+      position: absolute;
+      inset: 0;
+      inline-size: 100%;
+      block-size: 100%;
+      object-fit: contain;
+      transition: opacity var(--et-dropzone-transition-duration) ease;
+    }
+
+    &[data-status='error'] > .et-dropzone-preview-image {
+      opacity: 0.15;
+    }
+
+    .et-dropzone-preview-info {
+      position: absolute;
+      inset: auto 0 0 0;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 10px 12px;
+      background-color: rgb(var(--et-scrim-color-rgb, 0 0 0) / 0.6);
+      -webkit-backdrop-filter: blur(12px);
+      backdrop-filter: blur(12px);
+      color: rgb(var(--et-on-scrim-color-rgb, 255 255 255));
+      transition: translate var(--et-dropzone-transition-duration) ease;
+
+      .et-dropzone-entry-size {
+        color: rgb(var(--et-on-scrim-color-rgb, 255 255 255) / 0.7);
+      }
+    }
+
+    @media (hover: hover) {
+      &:hover .et-dropzone-preview-info {
+        translate: 0 100%;
+      }
+    }
+
+    &:focus-within .et-dropzone-preview-info {
+      translate: 0 100%;
+    }
+
+    /* must stay after the reveal rules above to win */
+    &[data-status='error'] .et-dropzone-preview-info,
+    &:has(.et-dropzone-entry-progress[data-active]) .et-dropzone-preview-info {
+      translate: 0;
+    }
+
+    .et-dropzone-preview-actions {
+      position: absolute;
+      inset-block-start: 8px;
+      inset-inline-end: 8px;
+      display: flex;
+      gap: 6px;
+    }
+  }
+}

package/src/lib/forms/dropzone/dropzone-readonly-styles.component.css

@@ -0,0 +1,34 @@
+@layer components {
+  et-dropzone[data-readonly] {
+    .et-dropzone-trigger,
+    .et-icon-button:disabled {
+      cursor: default;
+    }
+
+    .et-dropzone-trigger {
+      border-style: solid;
+    }
+
+    /* with a file in it the trigger is what the preview stretches to, and a shorter one would
+       crop the image */
+    .et-dropzone-area:not([data-has-preview]) .et-dropzone-trigger {
+      min-block-size: var(--et-dropzone-readonly-min-height);
+    }
+
+    .et-dropzone-prompt {
+      display: none;
+    }
+
+    .et-dropzone-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      color: var(--et-surface-color-muted-solid, currentColor);
+    }
+
+    &:has(.et-dropzone-list) .et-dropzone-area {
+      display: none;
+    }
+  }
+}