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

package/src/lib/toolbar/toolbar.component.css

@@ -0,0 +1,40 @@
+@layer components {
+  @property --et-toolbar-gap {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 4px;
+  }
+
+  @property --et-toolbar-padding {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 4px;
+  }
+
+  @property --et-toolbar-border-radius {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 8px;
+  }
+
+  @property --et-toolbar-background {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+  }
+
+  .et-toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--et-toolbar-gap);
+    padding: var(--et-toolbar-padding);
+    border-radius: var(--et-toolbar-border-radius);
+    background: var(--et-toolbar-background);
+    box-sizing: border-box;
+
+    &:where([aria-orientation='vertical']) {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+}

package/src/lib/tooltip/tooltip.component.css

@@ -0,0 +1,64 @@
+@layer components {
+  @property --et-tooltip-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 13px;
+  }
+
+  @property --et-tooltip-line-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 18px;
+  }
+
+  @property --et-tooltip-font-weight {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 500;
+  }
+
+  @property --et-tooltip-letter-spacing {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: -0.13px;
+  }
+
+  @property --et-tooltip-padding-inline {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-tooltip-padding-block {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  .et-overlay.et-overlay--tooltip {
+    pointer-events: none;
+  }
+
+  .et-overlay.et-overlay--tooltip > :not(.et-overlay-container-drag-handle):not(.et-overlay-arrow) {
+    display: block;
+    overflow: visible;
+  }
+
+  .et-tooltip {
+    pointer-events: none;
+    -webkit-user-select: none;
+    user-select: none;
+    font-size: var(--et-tooltip-font-size);
+    font-weight: var(--et-tooltip-font-weight);
+    line-height: var(--et-tooltip-line-height);
+    letter-spacing: var(--et-tooltip-letter-spacing);
+  }
+
+  .et-tooltip__surface {
+    padding: calc(var(--et-tooltip-padding-block) + 2px) calc(var(--et-tooltip-padding-inline) + 2px);
+  }
+
+  .et-tooltip__content {
+    gap: 6px;
+  }
+}

package/src/lib/tree/tree.component.css

@@ -0,0 +1,221 @@
+@layer components {
+  @property --et-tree-indent {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 18px;
+  }
+
+  @property --et-tree-node-padding-block {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 5px;
+  }
+
+  @property --et-tree-node-padding-inline {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  @property --et-tree-node-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  @property --et-tree-node-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  @property --et-tree-marker-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-tree-check-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-tree-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 150ms;
+  }
+
+  @property --_et-tree-node-depth {
+    syntax: '<number>';
+    inherits: false;
+    initial-value: 0;
+  }
+
+  .et-tree {
+    display: block;
+    color: var(--et-surface-color-solid, CanvasText);
+  }
+
+  .et-tree-node,
+  .et-tree-status {
+    display: flex;
+    align-items: center;
+    gap: var(--et-tree-node-gap);
+    padding-block: var(--et-tree-node-padding-block);
+    padding-inline: calc(var(--et-tree-node-padding-inline) + var(--_et-tree-node-depth) * var(--et-tree-indent))
+      var(--et-tree-node-padding-inline);
+    border-radius: var(--et-tree-node-radius);
+    box-sizing: border-box;
+  }
+
+  .et-tree-node-marker {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--et-tree-marker-size);
+    block-size: var(--et-tree-marker-size);
+    color: var(--et-surface-color-muted-solid, GrayText);
+
+    .et-tree-node-chevron {
+      inline-size: 100%;
+      block-size: 100%;
+      rotate: 90deg;
+      transition: rotate var(--et-tree-duration) cubic-bezier(0.25, 0, 0.1, 1);
+    }
+  }
+
+  .et-tree-node {
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    transition: background-color var(--et-tree-duration) ease;
+
+    .et-tree-node-label {
+      flex: 1;
+      min-inline-size: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .et-tree-node-error {
+      flex: none;
+      color: var(--et-tree-error-color, var(--et-surface-color-muted-solid, GrayText));
+      font-size: 0.875em;
+    }
+
+    &:where([data-expanded]) .et-tree-node-chevron {
+      rotate: 180deg;
+    }
+
+    &:dir(rtl) {
+      .et-tree-node-chevron {
+        rotate: -90deg;
+      }
+
+      &:where([data-expanded]) .et-tree-node-chevron {
+        rotate: 180deg;
+      }
+    }
+
+    &:where([data-error]) .et-tree-node-marker {
+      color: var(--et-tree-error-color, var(--et-surface-color-muted-solid, GrayText));
+    }
+
+    &:not(:where([aria-disabled])):hover {
+      background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 7%, transparent);
+    }
+
+    &:not(:where([aria-disabled])):active {
+      background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 14%, transparent);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      outline-offset: -2px;
+    }
+
+    &:where([aria-disabled]) {
+      opacity: 0.4;
+      cursor: default;
+    }
+  }
+
+  /* Must stay after `.et-tree-node`: it weighs the same as the bare interaction states, so source
+     order is what keeps a selected row's accent while hovered. */
+  .et-tree:not(:where([aria-multiselectable])) .et-tree-node:where([data-selected]) {
+    background: color-mix(in srgb, var(--et-theme-color-primary-solid, gray) 16%, transparent);
+    color: var(--et-theme-color-ink-solid, inherit);
+
+    &:not(:where([aria-disabled])):hover {
+      background: color-mix(in srgb, var(--et-theme-color-primary-solid, gray) 24%, transparent);
+    }
+
+    &:not(:where([aria-disabled])):active {
+      background: color-mix(in srgb, var(--et-theme-color-primary-solid, gray) 32%, transparent);
+    }
+  }
+
+  .et-tree-node-check {
+    position: relative;
+    flex: none;
+    inline-size: var(--et-tree-check-size);
+    block-size: var(--et-tree-check-size);
+    box-sizing: border-box;
+    border: 2px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.3));
+    border-radius: 4px;
+    transition:
+      background var(--et-tree-duration) ease,
+      border-color var(--et-tree-duration) ease;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      margin: auto;
+      inline-size: 4px;
+      block-size: 8px;
+      border: solid var(--et-theme-color-on-primary, rgb(0 0 0));
+      border-width: 0 2px 2px 0;
+      translate: 0 -1px;
+      rotate: 45deg;
+      opacity: 0;
+      transition: opacity var(--et-tree-duration) ease;
+    }
+  }
+
+  .et-tree-node:where([data-selected]) > .et-tree-node-check {
+    border-color: var(--et-theme-color-primary-solid, currentColor);
+    background: var(--et-theme-color-primary-solid, currentColor);
+
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  .et-tree-status {
+    color: var(--et-surface-color-muted-solid, GrayText);
+
+    &:where(.et-tree-status--error) {
+      color: var(--et-tree-error-color, var(--et-surface-color-muted-solid, GrayText));
+      cursor: pointer;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      outline-offset: -2px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-tree-node,
+    .et-tree-node-check,
+    .et-tree-node-check::after,
+    .et-tree-node .et-tree-node-chevron {
+      transition: none;
+    }
+  }
+}

package/types/ethlete-components-testing.d.ts

@@ -301,7 +301,7 @@ declare const createTabBarDriver: <T>(fixture: ComponentFixture<T>, options?: Ta
 
 /**
  * Installs the browser APIs jsdom lacks and `@ethlete/components` needs to render: `ResizeObserver`,
- * `IntersectionObserver`, `matchMedia` and `Element.prototype.animate`. Call it once in a test setup file;
+ * `IntersectionObserver`, `matchMedia`, `Element.prototype.animate` and `Element.prototype.scroll`. Call it once in a test setup file;
  * an API that already exists is left alone. The fakes never report: observers never fire, no media query
  * matches, and an animation finishes on the next microtask.
  */