@ethlete/core 5.0.0-next.64 → 5.0.0-next.66

package/src/lib/animations/easing-tokens-styles.component.css

@@ -0,0 +1,155 @@
+/** Values from https://github.com/argyleink/open-props (MIT). */
+@layer components {
+  :where(html) {
+    --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
+    --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
+    --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
+    --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
+    --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
+    --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
+    --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
+    --ease-in-3: cubic-bezier(0.7, 0, 1, 1);
+    --ease-in-4: cubic-bezier(0.9, 0, 1, 1);
+    --ease-in-5: cubic-bezier(1, 0, 1, 1);
+    --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
+    --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
+    --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
+    --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
+    --ease-out-5: cubic-bezier(0, 0, 0, 1);
+    --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
+    --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
+    --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
+    --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
+    --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
+    --ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
+    --ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25);
+    --ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
+    --ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
+    --ease-elastic-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
+    --ease-squish-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
+    --ease-squish-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);
+    --ease-squish-3: cubic-bezier(0.5, -0.5, 0.1, 1.5);
+    --ease-squish-4: cubic-bezier(0.5, -0.7, 0.1, 1.5);
+    --ease-squish-5: cubic-bezier(0.5, -0.9, 0.1, 1.5);
+    --ease-step-1: steps(2);
+    --ease-step-2: steps(3);
+    --ease-step-3: steps(4);
+    --ease-step-4: steps(7);
+    --ease-step-5: steps(10);
+    --ease-spring-1: linear(
+      0,
+      0.006,
+      0.025 2.8%,
+      0.101 6.1%,
+      0.539 18.9%,
+      0.721 25.3%,
+      0.849 31.5%,
+      0.937 38.1%,
+      0.968 41.8%,
+      0.991 45.7%,
+      1.006 50.1%,
+      1.015 55%,
+      1.017 63.9%,
+      1.001
+    );
+    --ease-spring-2: linear(
+      0,
+      0.007,
+      0.029 2.2%,
+      0.118 4.7%,
+      0.625 14.4%,
+      0.826 19%,
+      0.902,
+      0.962,
+      1.008 26.1%,
+      1.041 28.7%,
+      1.064 32.1%,
+      1.07 36%,
+      1.061 40.5%,
+      1.015 53.4%,
+      0.999 61.6%,
+      0.995 71.2%,
+      1
+    );
+    --ease-spring-3: linear(
+      0,
+      0.009,
+      0.035 2.1%,
+      0.141 4.4%,
+      0.723 12.9%,
+      0.938 16.7%,
+      1.017,
+      1.077,
+      1.121,
+      1.149 24.3%,
+      1.159,
+      1.163,
+      1.161,
+      1.154 29.9%,
+      1.129 32.8%,
+      1.051 39.6%,
+      1.017 43.1%,
+      0.991,
+      0.977 51%,
+      0.974 53.8%,
+      0.975 57.1%,
+      0.997 69.8%,
+      1.003 76.9%,
+      1
+    );
+    --ease-spring-4: linear(
+      0,
+      0.009,
+      0.037 1.7%,
+      0.153 3.6%,
+      0.776 10.3%,
+      1.001,
+      1.142 16%,
+      1.185,
+      1.209 19%,
+      1.215 19.9% 20.8%,
+      1.199,
+      1.165 25%,
+      1.056 30.3%,
+      1.008 33%,
+      0.973,
+      0.955 39.2%,
+      0.953 41.1%,
+      0.957 43.3%,
+      0.998 53.3%,
+      1.009 59.1% 63.7%,
+      0.998 78.9%,
+      1
+    );
+    --ease-spring-5: linear(
+      0,
+      0.01,
+      0.04 1.6%,
+      0.161 3.3%,
+      0.816 9.4%,
+      1.046,
+      1.189 14.4%,
+      1.231,
+      1.254 17%,
+      1.259,
+      1.257 18.6%,
+      1.236,
+      1.194 22.3%,
+      1.057 27%,
+      0.999 29.4%,
+      0.955 32.1%,
+      0.942,
+      0.935 34.9%,
+      0.933,
+      0.939 38.4%,
+      1 47.3%,
+      1.011,
+      1.017 52.6%,
+      1.016 56.4%,
+      1 65.2%,
+      0.996 70.2%,
+      1.001 87.2%,
+      1
+    );
+  }
+}

package/src/lib/providers/visually-hidden-styles.component.css

@@ -0,0 +1,13 @@
+@layer components {
+  .et-visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}

package/src/lib/resize-handles/resize-handles.component.css

@@ -0,0 +1,137 @@
+@layer components {
+  @property --et-resize-handles-z-index {
+    syntax: '<integer>';
+    inherits: true;
+    initial-value: 10;
+  }
+
+  @property --et-resize-handles-edge-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  @property --et-resize-handles-corner-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-resize-handles-edge-inset {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-resize-handles-outset {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  @property --et-resize-handles-side-top {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  @property --et-resize-handles-side-bottom {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-resize-handles-touch-edge-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 20px;
+  }
+
+  @property --et-resize-handles-touch-corner-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 28px;
+  }
+
+  .et-resize-handles {
+    position: absolute;
+    inset: calc(-1 * var(--et-resize-handles-outset));
+    pointer-events: none;
+  }
+
+  .et-resize-handle {
+    --et-resize-handle-thickness: calc(var(--et-resize-handles-edge-size) + var(--et-resize-handles-outset));
+    --et-resize-handle-corner: calc(var(--et-resize-handles-corner-size) + var(--et-resize-handles-outset));
+
+    position: absolute;
+    z-index: var(--et-resize-handles-z-index);
+    touch-action: none;
+    pointer-events: auto;
+  }
+
+  .et-resize-handle--n {
+    top: 0;
+    right: var(--et-resize-handles-edge-inset);
+    left: var(--et-resize-handles-edge-inset);
+    height: var(--et-resize-handle-thickness);
+  }
+
+  .et-resize-handle--s {
+    right: var(--et-resize-handles-edge-inset);
+    bottom: 0;
+    left: var(--et-resize-handles-edge-inset);
+    height: var(--et-resize-handle-thickness);
+  }
+
+  .et-resize-handle--e,
+  .et-resize-handle--w {
+    top: var(--et-resize-handles-side-top);
+    bottom: var(--et-resize-handles-side-bottom);
+    width: var(--et-resize-handle-thickness);
+  }
+
+  .et-resize-handle--e {
+    right: 0;
+  }
+
+  .et-resize-handle--w {
+    left: 0;
+  }
+
+  .et-resize-handle--ne,
+  .et-resize-handle--nw {
+    top: 0;
+    width: var(--et-resize-handle-corner);
+    height: var(--et-resize-handle-corner);
+  }
+
+  .et-resize-handle--ne {
+    right: 0;
+  }
+
+  .et-resize-handle--nw {
+    left: 0;
+  }
+
+  .et-resize-handle--se,
+  .et-resize-handle--sw {
+    bottom: 0;
+    width: var(--et-resize-handle-corner);
+    height: var(--et-resize-handle-corner);
+  }
+
+  .et-resize-handle--se {
+    right: 0;
+  }
+
+  .et-resize-handle--sw {
+    left: 0;
+  }
+
+  @media (any-pointer: coarse) {
+    .et-resize-handle {
+      --et-resize-handle-thickness: calc(var(--et-resize-handles-touch-edge-size) + var(--et-resize-handles-outset));
+      --et-resize-handle-corner: calc(var(--et-resize-handles-touch-corner-size) + var(--et-resize-handles-outset));
+    }
+  }
+}

package/src/lib/theming/color-interactive-styles.component.css

@@ -0,0 +1,147 @@
+@layer components {
+  :where(.et-color-interactive) {
+    --et-theme-color-primary-rgb: var(--et-color-primary);
+    --et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));
+    --et-theme-color-on-primary-rgb: var(--et-color-on-primary);
+    --et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));
+    --et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));
+    --et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));
+  }
+
+  /* hover-capable pointers only — on touch, :hover sticks after a tap */
+  @media (hover: hover) {
+    :where(.et-color-interactive:hover:not(:has(.et-color-interactive-exclude:hover))),
+    :where(.et-color-interactive-container:hover) :where(.et-color-interactive) {
+      --et-theme-color-primary-rgb: var(--et-color-primary-hover, var(--et-color-primary));
+      --et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));
+      --et-theme-color-on-primary-rgb: var(--et-color-on-primary-hover, var(--et-color-on-primary));
+      --et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));
+      --et-theme-color-ink-rgb: var(
+        --et-color-primary-ink-hover,
+        var(--et-color-primary-ink, var(--et-color-primary-hover, var(--et-color-primary)))
+      );
+      --et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));
+    }
+  }
+
+  :where(.et-color-interactive:focus-visible) {
+    --et-theme-color-primary-rgb: var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)));
+    --et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));
+    --et-theme-color-on-primary-rgb: var(
+      --et-color-on-primary-focus,
+      var(--et-color-on-primary-hover, var(--et-color-on-primary))
+    );
+    --et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));
+    --et-theme-color-ink-rgb: var(
+      --et-color-primary-ink-focus,
+      var(
+        --et-color-primary-ink-hover,
+        var(
+          --et-color-primary-ink,
+          var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))
+        )
+      )
+    );
+    --et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));
+  }
+
+  :where(.et-color-interactive:active:not(:has(.et-color-interactive-exclude:hover))),
+  :where(.et-color-interactive-container:active) :where(.et-color-interactive) {
+    --et-theme-color-primary-rgb: var(
+      --et-color-primary-active,
+      var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))
+    );
+    --et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));
+    --et-theme-color-on-primary-rgb: var(
+      --et-color-on-primary-active,
+      var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary)))
+    );
+    --et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));
+    --et-theme-color-ink-rgb: var(
+      --et-color-primary-ink-active,
+      var(
+        --et-color-primary-ink-focus,
+        var(
+          --et-color-primary-ink-hover,
+          var(
+            --et-color-primary-ink,
+            var(
+              --et-color-primary-active,
+              var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))
+            )
+          )
+        )
+      )
+    );
+    --et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));
+  }
+
+  /* A wrapper reflecting a *descendant's* focus (e.g. a form field's frame while its control is
+   focused) uses the BASE color, not the `-focus` variant. The `-focus` variant is the treatment
+   for an element that is itself focused (the `:where(.et-color-interactive:focus-visible)` rule
+   above) — a container merely mirroring a child's focus should read as the plain accent, so the
+   focus affordance is the pure theme color rather than the focus-adjusted shade. */
+  :where(.et-color-interactive--has-focus:has(:focus-visible)) {
+    --et-theme-color-primary-rgb: var(--et-color-primary);
+    --et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));
+    --et-theme-color-on-primary-rgb: var(--et-color-on-primary);
+    --et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));
+    --et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));
+    --et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));
+  }
+
+  /* view-only controls (readonly) keep the resting accent — they stay focusable but must not
+   react to hover/active/focus the way an editable control does. Placed after the interaction
+   rules above so, at equal :where() specificity, source order lets it win them back to rest. */
+  :where(.et-color-interactive[aria-readonly='true']) {
+    --et-theme-color-primary-rgb: var(--et-color-primary);
+    --et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));
+    --et-theme-color-on-primary-rgb: var(--et-color-on-primary);
+    --et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));
+    --et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));
+    --et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));
+  }
+
+  :where(.et-color-interactive[disabled]),
+  :where(.et-color-interactive[aria-disabled='true']) {
+    --et-theme-color-primary-rgb: var(
+      --et-color-primary-disabled,
+      var(
+        --et-color-primary-active,
+        var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))
+      )
+    );
+    --et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));
+    --et-theme-color-on-primary-rgb: var(
+      --et-color-on-primary-disabled,
+      var(
+        --et-color-on-primary-active,
+        var(--et-color-on-primary-focus, var(--et-color-on-primary-hover, var(--et-color-on-primary)))
+      )
+    );
+    --et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));
+    --et-theme-color-ink-rgb: var(
+      --et-color-primary-ink-disabled,
+      var(
+        --et-color-primary-ink-active,
+        var(
+          --et-color-primary-ink-focus,
+          var(
+            --et-color-primary-ink-hover,
+            var(
+              --et-color-primary-ink,
+              var(
+                --et-color-primary-disabled,
+                var(
+                  --et-color-primary-active,
+                  var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))
+                )
+              )
+            )
+          )
+        )
+      )
+    );
+    --et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));
+  }
+}

package/src/lib/theming/surface-interactive-styles.component.css

@@ -0,0 +1,42 @@
+@layer components {
+  :where(.et-surface-interactive) {
+    --et-surface-interaction-rgb: var(--et-surface-interaction);
+    --et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb));
+  }
+
+  /* hover-capable pointers only — on touch, :hover sticks after a tap */
+  @media (hover: hover) {
+    :where(.et-surface-interactive:hover) {
+      --et-surface-interaction-rgb: var(--et-surface-interaction-hover, var(--et-surface-interaction));
+      --et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb));
+    }
+  }
+
+  :where(.et-surface-interactive:focus-visible) {
+    --et-surface-interaction-rgb: var(
+      --et-surface-interaction-focus,
+      var(--et-surface-interaction-hover, var(--et-surface-interaction))
+    );
+    --et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb));
+  }
+
+  :where(.et-surface-interactive:active) {
+    --et-surface-interaction-rgb: var(
+      --et-surface-interaction-active,
+      var(--et-surface-interaction-focus, var(--et-surface-interaction-hover, var(--et-surface-interaction)))
+    );
+    --et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb));
+  }
+
+  :where(.et-surface-interactive[disabled]),
+  :where(.et-surface-interactive[aria-disabled='true']) {
+    --et-surface-interaction-rgb: var(
+      --et-surface-interaction-disabled,
+      var(
+        --et-surface-interaction-active,
+        var(--et-surface-interaction-focus, var(--et-surface-interaction-hover, var(--et-surface-interaction)))
+      )
+    );
+    --et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb));
+  }
+}