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

package/src/lib/progress-steps/progress-step.component.css

@@ -0,0 +1,187 @@
+@layer components {
+  @property --et-progress-step-marker-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 24px;
+  }
+
+  @property --et-progress-step-label-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-progress-step-description-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  .et-progress-step {
+    position: relative;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    min-inline-size: 0;
+    /* Purely CSS: each step increments the group's counter, so the marker's number never has to be
+       passed in or computed from a self-registered index. */
+    counter-increment: et-progress-step;
+
+    &:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      inset-block-start: calc(var(--et-progress-step-marker-size) / 2 - 1px);
+      inset-inline-start: 50%;
+      /* +gap: the connector spans from this marker's center to the next one's, and steps sit
+         `--et-progress-steps-gap` apart - without it the line falls short by exactly that gap. */
+      inline-size: calc(100% + var(--et-progress-steps-gap, 8px));
+      block-size: 2px;
+      background: var(--et-surface-border-solid, currentColor);
+    }
+
+    /* Every resolved state fills its connector. The color comes from the step's own forced theme, so
+       a failed step's segment is red with no per-state rule here. */
+    &:is([data-state='complete'], [data-state='success'], [data-state='warning'], [data-state='error']):not(
+        :last-child
+      )::after {
+      background: var(--et-theme-color-primary-solid, currentColor);
+    }
+
+    .et-progress-step-marker {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--et-progress-step-marker-size);
+      block-size: var(--et-progress-step-marker-size);
+      border-radius: 50%;
+      border: 2px solid var(--et-surface-border-solid, currentColor);
+      background: var(--et-surface-background-solid, Canvas);
+      color: var(--et-surface-color-muted-solid, currentColor);
+      font-size: calc(var(--et-progress-step-marker-size) * 0.5);
+      /* Without this the number's line box inherits the page's line-height (~1.5), and flex
+         centers that whole box rather than the glyph inside it - the digit then sits visibly
+         above center, since a line box's extra leading isn't split evenly around the glyph. */
+      line-height: 1;
+
+      /* The icon's own SVG is `width/height: 100%` (fills its box) with no intrinsic size of its
+         own, so left unset it stretches to whatever the flex layout gives it - explicitly sizing
+         it to `1em` is what keeps it square and proportioned to the marker, same as
+         `.et-button-icon .et-icon` in button.component.css. */
+      .et-icon {
+        inline-size: 1em;
+        block-size: 1em;
+      }
+    }
+
+    &[data-state='current'] .et-progress-step-marker {
+      border-color: var(--et-theme-color-primary-solid, currentColor);
+      color: var(--et-theme-color-ink-solid, currentColor);
+    }
+
+    &:is([data-state='complete'], [data-state='success'], [data-state='warning'], [data-state='error'])
+      .et-progress-step-marker {
+      border-color: var(--et-theme-color-primary-solid, currentColor);
+      background: var(--et-theme-color-primary-solid, currentColor);
+      color: var(--et-theme-color-on-primary-solid, white);
+    }
+
+    .et-progress-step-marker-number::before {
+      content: counter(et-progress-step);
+    }
+
+    /* Keep the label's font-size on this element, not on the label: the vertical orientation's
+       optical centering below measures `1lh` here, and inheriting the page's size instead would
+       leave the label sitting off-center against its marker. */
+    .et-progress-step-text {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      min-inline-size: 0;
+      font-size: var(--et-progress-step-label-font-size);
+      text-align: center;
+    }
+
+    .et-progress-step-label {
+      color: var(--et-surface-color-muted-solid, currentColor);
+    }
+
+    [etProgressStepDescription] {
+      margin: 0;
+      font-size: var(--et-progress-step-description-font-size);
+      color: var(--et-surface-color-muted-solid, currentColor);
+    }
+
+    &[data-state='current'] .et-progress-step-label {
+      color: var(--et-surface-color-solid, currentColor);
+      font-weight: 600;
+    }
+
+    &:is([data-state='success'], [data-state='warning'], [data-state='error']) .et-progress-step-label {
+      color: var(--et-theme-color-ink-solid, currentColor);
+      font-weight: 600;
+    }
+
+    /* --- Vertical --- */
+
+    /* The connector is purpose-built rather than rotated: horizontally it spans marker-center to
+       marker-center across the gap, vertically it hangs from below the marker down to the next one,
+       and the step turns into a row with the label beside the marker instead of under it. */
+    .et-progress-steps[data-orientation='vertical'] & {
+      flex: none;
+      flex-direction: row;
+      align-items: flex-start;
+
+      &:not(:last-child)::after {
+        inset-block-start: var(--et-progress-step-marker-size);
+        inset-inline-start: calc(var(--et-progress-step-marker-size) / 2 - 1px);
+        inline-size: 2px;
+        block-size: calc(100% - var(--et-progress-step-marker-size) + var(--et-progress-steps-gap, 8px));
+      }
+
+      .et-progress-step-text {
+        text-align: start;
+        /* Optically centered against the marker rather than its box: the label's own line box is
+           shorter than the marker, so aligning the boxes would leave the text sitting high. */
+        padding-block-start: calc((var(--et-progress-step-marker-size) - 1lh) / 2);
+      }
+    }
+
+    /* --- Interactive --- */
+
+    /* A step is a link or a button when the consumer writes it as one (`<a et-progress-step>`), the
+       same way the button family works - so `routerLink` and everything else on their element keeps
+       working, and the whole step is the target. */
+    &:is(a, button) {
+      cursor: pointer;
+      text-decoration: none;
+      color: inherit;
+      font: inherit;
+      background: none;
+      border: none;
+      padding: 0;
+      appearance: none;
+      -webkit-tap-highlight-color: transparent;
+
+      @media (hover: hover) {
+        &:hover {
+          .et-progress-step-marker {
+            border-color: var(--et-theme-color-primary-solid, currentColor);
+          }
+
+          .et-progress-step-label {
+            color: var(--et-surface-color-solid, currentColor);
+          }
+        }
+      }
+
+      &:is([disabled], [aria-disabled='true']) {
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+  }
+}

package/src/lib/progress-steps/progress-steps.component.css

@@ -0,0 +1,26 @@
+@layer components {
+  @property --et-progress-steps-gap {
+    syntax: '<length>';
+    /* Inherited so each step's connector (progress-step.component.css) can span the gap too - a
+       step doesn't otherwise know the row's own gap. */
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  .et-progress-steps {
+    display: flex;
+    gap: var(--et-progress-steps-gap);
+    /* Numbers the projected .et-progress-steps, in DOM order, purely in CSS - see the marker's
+       counter() in progress-step.component.css. */
+    counter-reset: et-progress-step;
+
+    &:where([data-orientation='vertical']) {
+      /* A row's gap is horizontal breathing room between labels; a column's is the length of the
+         connector between two markers, and 8px reads as a dash rather than a line. */
+      --et-progress-steps-gap: 20px;
+
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+}

package/src/lib/query-error/query-error.component.css

@@ -0,0 +1,21 @@
+@layer components {
+  .et-query-error-host {
+    display: block;
+
+    .et-query-error-list {
+      padding-inline-start: 1.5em;
+
+      .et-query-error-list-item {
+        /* Violation lists are read item by item, so they need a little air between them. */
+        margin-block: 0.15em;
+      }
+    }
+
+    .et-query-error-actions {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+}

package/src/lib/scheduler/scheduler-agenda-view.component.css

@@ -0,0 +1,97 @@
+@layer components {
+  .et-scheduler-agenda-view {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    overflow-y: auto;
+  }
+
+  .et-scheduler-agenda-view-month {
+    margin: 8px 0 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--et-surface-color-solid);
+  }
+
+  .et-scheduler-agenda-view-day {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .et-scheduler-agenda-view-day-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-block-end: 4px;
+    border-block-end: 1px solid var(--et-surface-border-solid);
+  }
+
+  .et-scheduler-agenda-view-day-weekday {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--et-surface-color-muted-solid);
+  }
+
+  .et-scheduler-agenda-view-day-date {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 22px;
+    block-size: 22px;
+    border-radius: 999px;
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+    color: var(--et-surface-color-solid);
+  }
+
+  .et-scheduler-agenda-view-day-header:where([data-today]) .et-scheduler-agenda-view-day-date {
+    background: var(--et-theme-color-primary-solid);
+    color: var(--et-theme-color-on-primary);
+    font-weight: 600;
+  }
+
+  .et-scheduler-agenda-view-day-appointments {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .et-scheduler-agenda-view-appointment {
+    display: flex;
+    align-items: stretch;
+  }
+
+  .et-scheduler-agenda-view-appointment .et-scheduler-appointment {
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .et-scheduler-agenda-view-guide {
+    position: relative;
+    flex: none;
+    inline-size: 14px;
+
+    &:where([data-guide='trunk'], [data-guide='branch'], [data-guide='last-branch'])::before {
+      content: '';
+      position: absolute;
+      inset-block: -1px;
+      inset-inline-start: 50%;
+      inline-size: 1px;
+      background: var(--et-surface-border-solid, currentColor);
+    }
+
+    &:where([data-guide='last-branch'])::before {
+      inset-block: -1px 50%;
+    }
+
+    &:where([data-guide='branch'], [data-guide='last-branch'])::after {
+      content: '';
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline: 50% 0;
+      block-size: 1px;
+      background: var(--et-surface-border-solid, currentColor);
+    }
+  }
+}

package/src/lib/scheduler/scheduler-appointment-drag-styles.component.css

@@ -0,0 +1,56 @@
+@layer components {
+  .et-scheduler-time-grid-all-day-resize {
+    position: absolute;
+    inset-block: 0;
+    inline-size: min(8px, 25%);
+    cursor: ew-resize;
+
+    &:where([data-edge='start']) {
+      inset-inline-start: 0;
+    }
+
+    &:where([data-edge='end']) {
+      inset-inline-end: 0;
+    }
+
+    @media (any-pointer: coarse) {
+      inline-size: min(14px, 25%);
+    }
+  }
+
+  /* Bare attribute selector, not `:where()` - this sheet and the base rule's mount in different
+     order depending on which view renders first, so the tie has to be won on specificity. */
+  .et-scheduler-time-grid-block[data-draggable] {
+    cursor: grab;
+
+    /* a move arms on a long press, which is also what raises iOS' selection callout */
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .et-scheduler-time-grid-block[data-dragging] {
+    z-index: 1;
+    box-shadow: var(--et-scheduler-appointment-drag-shadow, 0 2px 8px rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.25));
+    cursor: grabbing;
+  }
+
+  .et-scheduler-time-grid-block-resize {
+    position: absolute;
+    inset-inline: 0;
+    block-size: min(8px, 25%);
+    cursor: ns-resize;
+
+    &:where([data-edge='start']) {
+      inset-block-start: 0;
+    }
+
+    &:where([data-edge='end']) {
+      inset-block-end: 0;
+    }
+
+    @media (any-pointer: coarse) {
+      block-size: min(14px, 25%);
+    }
+  }
+}

package/src/lib/scheduler/scheduler-appointment-styles.component.css

@@ -0,0 +1,111 @@
+@layer components {
+  .et-scheduler-appointment {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 6px;
+    border: none;
+    border-radius: 4px;
+    background: color-mix(in srgb, var(--et-theme-color-primary-solid) 14%, transparent);
+    color: var(--et-theme-color-ink-solid);
+    font: inherit;
+    font-size: 12px;
+    text-align: start;
+    cursor: pointer;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+
+    @media (hover: hover) {
+      &:hover {
+        background: color-mix(in srgb, var(--et-theme-color-primary-solid) 22%, transparent);
+      }
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--et-theme-color-primary-solid);
+      outline-offset: 1px;
+    }
+
+    &:where([data-selected]) {
+      background: var(--et-theme-color-primary-solid);
+      color: var(--et-theme-color-on-primary);
+    }
+
+    &:where([data-draggable]) {
+      cursor: grab;
+
+      /* a move arms on a long press, which is also what raises iOS' selection callout */
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    &:where([data-dragging]) {
+      box-shadow: var(--et-scheduler-appointment-drag-shadow, 0 2px 8px rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.25));
+      cursor: grabbing;
+    }
+  }
+
+  .et-scheduler-appointment-title {
+    overflow: hidden;
+    font-weight: 600;
+    min-inline-size: 0;
+    flex: 1;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .et-scheduler-appointment-dot {
+    flex-shrink: 0;
+    inline-size: 6px;
+    block-size: 6px;
+    border-radius: 999px;
+    background: var(--et-theme-color-primary-solid);
+  }
+
+  :where(.et-scheduler-appointment, .et-scheduler-time-grid-block):where([data-selected])
+    .et-scheduler-appointment-dot {
+    background: var(--et-theme-color-on-primary);
+  }
+
+  .et-scheduler-appointment-time-range {
+    flex-shrink: 0;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .et-scheduler-appointment-location {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 3px;
+    max-inline-size: 40%;
+  }
+
+  .et-scheduler-appointment-location-icon {
+    flex-shrink: 0;
+    inline-size: 10px;
+    block-size: 10px;
+  }
+
+  .et-scheduler-appointment-location-text {
+    overflow: hidden;
+    min-inline-size: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .et-scheduler-appointment-chain-count {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 2px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .et-scheduler-appointment-chain-count-icon {
+    inline-size: 8px;
+    block-size: 8px;
+    transform: rotate(90deg);
+  }
+}

package/src/lib/scheduler/scheduler-edit-color.component.css

@@ -0,0 +1,16 @@
+@layer components {
+  .et-scheduler-edit-color-swatch {
+    display: inline-block;
+    vertical-align: middle;
+    margin-inline-end: 6px;
+    inline-size: 14px;
+    block-size: 14px;
+    border-radius: 4px;
+    background: var(--et-theme-color-primary-solid, currentColor);
+
+    &:where([data-empty]) {
+      background: transparent;
+      border: 1px solid var(--et-surface-border-solid, currentColor);
+    }
+  }
+}

package/src/lib/scheduler/scheduler-edit-surface-actions.component.css

@@ -0,0 +1,14 @@
+@layer components {
+  .et-scheduler-edit-surface-actions {
+    flex-shrink: 0;
+    margin-inline-start: auto;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .et-scheduler-edit-surface-action {
+    display: contents;
+  }
+}

package/src/lib/scheduler/scheduler-edit-surface-breadcrumb.component.css

@@ -0,0 +1,26 @@
+@layer components {
+  .et-scheduler-edit-surface-breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+    margin-block-end: 16px;
+    font-size: 13px;
+    color: var(--et-surface-color-muted-solid);
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .et-scheduler-edit-surface-breadcrumb-item {
+    color: inherit;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .et-scheduler-edit-surface-breadcrumb-current {
+    color: var(--et-surface-color-solid);
+    font-weight: 600;
+  }
+}

package/src/lib/scheduler/scheduler-edit-surface-children.component.css

@@ -0,0 +1,57 @@
+@layer components {
+  .et-scheduler-edit-surface-children {
+    display: block;
+    margin-block-start: 20px;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .et-scheduler-edit-surface-children-heading {
+    margin: 0 0 8px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--et-surface-color-muted-solid);
+  }
+
+  .et-scheduler-edit-surface-children-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .et-scheduler-edit-surface-children-item {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    inline-size: 100%;
+    color: var(--et-theme-color-ink-solid, var(--et-surface-color-solid));
+    text-align: start;
+  }
+
+  .et-scheduler-edit-surface-children-item-time {
+    flex: none;
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    color: var(--et-surface-color-muted-solid);
+  }
+
+  .et-scheduler-edit-surface-children-item-title {
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .et-scheduler-edit-surface-children-item .et-scheduler-appointment-chain-count {
+    flex: none;
+    color: var(--et-surface-color-muted-solid);
+  }
+}

package/src/lib/scheduler/scheduler-edit-surface-fields.component.css

@@ -0,0 +1,11 @@
+@layer components {
+  .et-scheduler-edit-surface-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .et-scheduler-edit-surface-fields > :empty {
+    display: none;
+  }
+}

package/src/lib/scheduler/scheduler-edit-surface-footer.component.css

@@ -0,0 +1,7 @@
+@layer components {
+  .et-scheduler-edit-surface-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+  }
+}

package/src/lib/scheduler/scheduler-edit-surface-header.component.css

@@ -0,0 +1,15 @@
+@layer components {
+  .et-scheduler-edit-surface-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .et-scheduler-edit-surface-title {
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/src/lib/scheduler/scheduler-edit-time-range.component.css

@@ -0,0 +1,11 @@
+@layer components {
+  .et-scheduler-edit-time-range {
+    display: flex;
+    gap: 12px;
+  }
+
+  .et-scheduler-edit-time-range-field {
+    flex: 1;
+    min-inline-size: 0;
+  }
+}