@ethlete/core 5.0.0-next.63 → 5.0.0-next.65

package/generators/tailwind-4-surface-theme/generator.js

@@ -1,5 +1,6 @@
 import { formatFiles, logger, visitNotIgnoredFiles } from '@nx/devkit';
 import { Project, SyntaxKind } from 'ts-morph';
+import { cssThemeName, surfaceThemeCss } from '../../design/theme-css.js';
 export default async function generate(tree, schema) {
     logger.log('\n🔄 Starting Tailwind 4 surface theme generator...\n');
     const themesPath = schema.themesPath || 'src/surface-themes.ts';
@@ -293,8 +294,8 @@ function parseSurfaceThemeObject(obj, sourceFile) {
 // flags on themes of that type. Matches the theme's name or its CSS-safe form. Themes of
 // the other type keep their flags. Returns the resolved name.
 function applyDefaultSurfaceThemeOverride(themes, defaultTheme, type) {
-    const wanted = createCssSurfaceName(defaultTheme);
-    const matches = themes.filter((t) => t.name === defaultTheme || createCssSurfaceName(t.name) === wanted);
+    const wanted = cssThemeName(defaultTheme);
+    const matches = themes.filter((t) => t.name === defaultTheme || cssThemeName(t.name) === wanted);
     const target = matches.find((t) => t.type === type);
     if (!target) {
         const [firstMatch] = matches;
@@ -329,12 +330,6 @@ function validateSurfaceThemeConfiguration(themes) {
 }
 //#endregion
 //#region CSS Generation
-function createCssSurfaceName(name) {
-    return name
-        .toLowerCase()
-        .replace(/\s+/g, '-')
-        .replace(/[^a-z0-9-]/g, '');
-}
 function generateSurfaceThemeNameTypes(themes, schema) {
     const themesPath = schema.themesPath || 'src/surface-themes.ts';
     const outputPath = schema.outputPath || 'src/styles/generated-tailwind-surface-themes.css';
@@ -358,8 +353,6 @@ export {};
 `;
 }
 function generateSurfaceThemeCss(themes, utilityPrefix, runtimePrefix, schema) {
-    const tailwindVars = [];
-    const themeVars = [];
     const themesPath = schema.themesPath || 'src/surface-themes.ts';
     const outputPath = schema.outputPath || 'src/styles/generated-tailwind-surface-themes.css';
     const header = `/*
@@ -372,220 +365,7 @@ function generateSurfaceThemeCss(themes, utilityPrefix, runtimePrefix, schema) {
  */
 
 `;
-    // Static Tailwind @theme block - one color set per surface theme
-    for (const theme of themes) {
-        const name = createCssSurfaceName(theme.name);
-        tailwindVars.push(`  /* ${theme.name} surface */`);
-        tailwindVars.push(`  --color-${utilityPrefix}-surface-${name}-bg: rgb(${theme.background});`);
-        tailwindVars.push(`  --color-${utilityPrefix}-surface-${name}: rgb(${theme.color});`);
-        tailwindVars.push(`  --color-${utilityPrefix}-surface-${name}-muted: rgb(${theme.colorMuted});`);
-        tailwindVars.push(`  --color-${utilityPrefix}-surface-${name}-subtle: rgb(${theme.colorSubtle});`);
-        tailwindVars.push(`  --color-${utilityPrefix}-surface-${name}-border: rgb(${theme.border});`);
-        if (theme.interactionColor) {
-            const { color, onColor, inkColor } = theme.interactionColor;
-            pushStaticInteractionColors(tailwindVars, `--color-${utilityPrefix}-surface-${name}-interaction`, color);
-            if (onColor) {
-                pushStaticInteractionColors(tailwindVars, `--color-${utilityPrefix}-surface-${name}-on-interaction`, onColor);
-            }
-            if (inkColor) {
-                pushStaticInteractionColors(tailwindVars, `--color-${utilityPrefix}-surface-${name}-interaction-ink`, inkColor);
-            }
-        }
-        tailwindVars.push('');
-    }
-    // Dynamic surface colors (reference runtime CSS variables).
-    // These are ALSO re-declared on every surface selector in the alias block below. A Tailwind
-    // `@theme` variable only lands on `:root`, so `rgb(var(--<runtime>-surface-*))` resolves once
-    // against the root surface and inherits that concrete color into descendants - which means
-    // `bg-<prefix>-surface-*` utilities would ignore nested surface scopes (e.g. an elevated
-    // surface). Re-declaring them per surface selector makes the utilities resolve against the
-    // nearest surface instead.
-    const dynamicSurfaceColors = buildDynamicSurfaceColors(utilityPrefix, runtimePrefix);
-    tailwindVars.push('  /* Dynamic surface colors (references runtime CSS variables) */');
-    tailwindVars.push(...dynamicSurfaceColors.map((decl) => `  ${decl}`));
-    // Runtime CSS - theme selector classes
-    for (const theme of themes) {
-        const name = createCssSurfaceName(theme.name);
-        const isDefault = theme.isDefault;
-        if (isDefault) {
-            const selectors = [`.${runtimePrefix}-surface--default-${theme.type}`, `.${runtimePrefix}-surface--${name}`];
-            themeVars.push(`${selectors.join(', ')} {`);
-        }
-        else {
-            themeVars.push(`.${runtimePrefix}-surface--${name} {`);
-        }
-        pushSurfaceVars(themeVars, runtimePrefix, theme, '  ');
-        themeVars.push('}\n');
-    }
-    // Root defaults - apply the default surface vars to :root
-    const defaultLight = themes.find((t) => t.isDefault && t.type === 'light');
-    const defaultDark = themes.find((t) => t.isDefault && t.type === 'dark');
-    if (defaultLight && defaultDark) {
-        pushSchemeSurfaceVars(themeVars, runtimePrefix, defaultLight);
-        pushSchemeSurfaceVars(themeVars, runtimePrefix, defaultDark);
-    }
-    else {
-        // A single registered surface type has no other scheme to switch to, so its default must
-        // land on :root unconditionally - behind prefers-color-scheme it would leave every surface
-        // variable undefined for users whose OS asks for the scheme the app lacks.
-        pushRootSurfaceVars(themeVars, runtimePrefix, defaultLight ?? defaultDark);
-    }
-    // Convenience var aliases - available on any element with a surface class or :root (via media queries)
-    const aliasBlock = `/* Convenience aliases (rgb + solid variants) */
-@layer base {
-  :root, :where([class*="${runtimePrefix}-surface--"]) {
-    --${runtimePrefix}-surface-background-rgb: var(--${runtimePrefix}-surface-background);
-    --${runtimePrefix}-surface-background-solid: rgb(var(--${runtimePrefix}-surface-background-rgb));
-
-    --${runtimePrefix}-surface-color-rgb: var(--${runtimePrefix}-surface-color);
-    --${runtimePrefix}-surface-color-solid: rgb(var(--${runtimePrefix}-surface-color-rgb));
-
-    --${runtimePrefix}-surface-color-muted-rgb: var(--${runtimePrefix}-surface-color-muted);
-    --${runtimePrefix}-surface-color-muted-solid: rgb(var(--${runtimePrefix}-surface-color-muted-rgb));
-
-    --${runtimePrefix}-surface-color-subtle-rgb: var(--${runtimePrefix}-surface-color-subtle);
-    --${runtimePrefix}-surface-color-subtle-solid: rgb(var(--${runtimePrefix}-surface-color-subtle-rgb));
-
-    --${runtimePrefix}-surface-border-rgb: var(--${runtimePrefix}-surface-border);
-    --${runtimePrefix}-surface-border-solid: rgb(var(--${runtimePrefix}-surface-border-rgb));
-
-    --${runtimePrefix}-surface-interaction-rgb: var(--${runtimePrefix}-surface-interaction);
-    --${runtimePrefix}-surface-interaction-solid: rgb(var(--${runtimePrefix}-surface-interaction-rgb));
-
-    --${runtimePrefix}-surface-interaction-hover-rgb: var(--${runtimePrefix}-surface-interaction-hover);
-    --${runtimePrefix}-surface-interaction-hover-solid: rgb(var(--${runtimePrefix}-surface-interaction-hover-rgb));
-
-    --${runtimePrefix}-surface-interaction-focus-rgb: var(--${runtimePrefix}-surface-interaction-focus);
-    --${runtimePrefix}-surface-interaction-focus-solid: rgb(var(--${runtimePrefix}-surface-interaction-focus-rgb));
-
-    --${runtimePrefix}-surface-interaction-active-rgb: var(--${runtimePrefix}-surface-interaction-active);
-    --${runtimePrefix}-surface-interaction-active-solid: rgb(var(--${runtimePrefix}-surface-interaction-active-rgb));
-
-    --${runtimePrefix}-surface-interaction-disabled-rgb: var(--${runtimePrefix}-surface-interaction-disabled);
-    --${runtimePrefix}-surface-interaction-disabled-solid: rgb(var(--${runtimePrefix}-surface-interaction-disabled-rgb));
-
-    /* Dynamic Tailwind surface colors - re-declared per surface scope so that
-       bg-${utilityPrefix}-surface-* utilities resolve against the nearest surface
-       (e.g. a nested elevated surface) instead of the value computed once at :root. */
-${dynamicSurfaceColors.map((decl) => `    ${decl}`).join('\n')}
-  }
-}
-`;
-    return `${header}@theme {
-${tailwindVars.join('\n')}
-}
-
-@layer base {
-${themeVars.join('\n')}
-}
-
-${aliasBlock}
-${buildSurfaceColorScope(runtimePrefix)}`;
-}
-// The reserved `surface` color scope. It bridges the two theming systems - color variables out of
-// surface variables - so `[etProvideColor]="'surface'"` renders a component in the neutral of
-// whatever surface it sits on. It lives here rather than in the SDK's own CSS because a stylesheet
-// shipped with `ProvideColorDirective` would land in every bundle that themes anything, and only
-// apps that use the scope should pay for it.
-function buildSurfaceColorScope(runtimePrefix) {
-    const tint = `var(--${runtimePrefix}-surface-interaction, var(--${runtimePrefix}-surface-color))`;
-    const on = `var(--${runtimePrefix}-surface-on-interaction, var(--${runtimePrefix}-surface-background))`;
-    const ink = `var(--${runtimePrefix}-surface-interaction-ink, var(--${runtimePrefix}-surface-color))`;
-    const state = (name, source, fallback) => INTERACTION_STATE_SUFFIXES.map((suffix) => `    --${runtimePrefix}-color-${name}${suffix}: ${suffix ? `var(--${runtimePrefix}-surface-${source}${suffix}, ${fallback})` : fallback};`).join('\n');
-    return `/* The reserved \`surface\` color: resolves the color tokens from the ambient surface's neutral swatch. */
-@layer base {
-  .${runtimePrefix}-color--surface {
-${state('primary', 'interaction', tint)}
-
-${state('on-primary', 'on-interaction', on)}
-
-${state('primary-ink', 'interaction-ink', ink)}
-  }
-}
-`;
-}
-// Dynamic surface color declarations (unindented). Emitted in `@theme` (so Tailwind generates
-// the utilities) and re-declared on every surface selector (so the utilities resolve per scope).
-function buildDynamicSurfaceColors(utilityPrefix, runtimePrefix) {
-    // `on-interaction` and `interaction-ink` are optional per theme, so each falls back to the
-    // surface's own background/color - the same defaults the `.<runtimePrefix>-color--surface`
-    // bridge applies.
-    const onFallback = `var(--${runtimePrefix}-surface-background)`;
-    const inkFallback = `var(--${runtimePrefix}-surface-color)`;
-    return [
-        `--color-${utilityPrefix}-surface-bg: rgb(var(--${runtimePrefix}-surface-background));`,
-        `--color-${utilityPrefix}-surface: rgb(var(--${runtimePrefix}-surface-color));`,
-        `--color-${utilityPrefix}-surface-muted: rgb(var(--${runtimePrefix}-surface-color-muted));`,
-        `--color-${utilityPrefix}-surface-subtle: rgb(var(--${runtimePrefix}-surface-color-subtle));`,
-        `--color-${utilityPrefix}-surface-border: rgb(var(--${runtimePrefix}-surface-border));`,
-        `--color-${utilityPrefix}-surface-interaction: rgb(var(--${runtimePrefix}-surface-interaction));`,
-        `--color-${utilityPrefix}-surface-interaction-hover: rgb(var(--${runtimePrefix}-surface-interaction-hover));`,
-        `--color-${utilityPrefix}-surface-interaction-focus: rgb(var(--${runtimePrefix}-surface-interaction-focus));`,
-        `--color-${utilityPrefix}-surface-interaction-active: rgb(var(--${runtimePrefix}-surface-interaction-active));`,
-        `--color-${utilityPrefix}-surface-interaction-disabled: rgb(var(--${runtimePrefix}-surface-interaction-disabled));`,
-        ...INTERACTION_STATE_SUFFIXES.map((suffix) => `--color-${utilityPrefix}-surface-on-interaction${suffix}: rgb(var(--${runtimePrefix}-surface-on-interaction${suffix}, ${onFallback}));`),
-        ...INTERACTION_STATE_SUFFIXES.map((suffix) => `--color-${utilityPrefix}-surface-interaction-ink${suffix}: rgb(var(--${runtimePrefix}-surface-interaction-ink${suffix}, ${inkFallback}));`),
-    ];
-}
-const INTERACTION_STATE_SUFFIXES = ['', '-hover', '-focus', '-active', '-disabled'];
-// Fills the optional states from the ones that are set, matching how the color theme generator
-// resolves a swatch: hover falls back to default, focus to hover, active and disabled to default.
-function resolveInteractionStates(map) {
-    const hover = map.hover || map.default;
-    return {
-        '': map.default,
-        '-hover': hover,
-        '-focus': map.focus || hover,
-        '-active': map.active || map.default,
-        '-disabled': map.disabled || map.default,
-    };
-}
-function pushStaticInteractionColors(vars, name, map) {
-    const states = resolveInteractionStates(map);
-    for (const suffix of INTERACTION_STATE_SUFFIXES) {
-        vars.push(`  ${name}${suffix}: rgb(${states[suffix]});`);
-    }
-}
-function pushRuntimeInteractionVars(vars, name, map, indent) {
-    const states = resolveInteractionStates(map);
-    for (const suffix of INTERACTION_STATE_SUFFIXES) {
-        vars.push(`${indent}${name}${suffix}: ${states[suffix]};`);
-    }
-}
-function pushRootSurfaceVars(vars, runtimePrefix, theme) {
-    if (!theme)
-        return;
-    vars.push(`:root {`);
-    pushSurfaceVars(vars, runtimePrefix, theme, '  ');
-    vars.push(`  color-scheme: ${theme.type};`);
-    vars.push(`}\n`);
-}
-function pushSchemeSurfaceVars(vars, runtimePrefix, theme) {
-    vars.push(`@media (prefers-color-scheme: ${theme.type}) {`);
-    vars.push(`  :root {`);
-    pushSurfaceVars(vars, runtimePrefix, theme, '    ');
-    vars.push(`    color-scheme: ${theme.type};`);
-    vars.push(`  }`);
-    vars.push(`}\n`);
-}
-function pushSurfaceVars(vars, runtimePrefix, theme, indent) {
-    vars.push(`${indent}--${runtimePrefix}-surface-background: ${theme.background};`);
-    vars.push(`${indent}--${runtimePrefix}-surface-color: ${theme.color};`);
-    vars.push(`${indent}--${runtimePrefix}-surface-color-muted: ${theme.colorMuted};`);
-    vars.push(`${indent}--${runtimePrefix}-surface-color-subtle: ${theme.colorSubtle};`);
-    vars.push(`${indent}--${runtimePrefix}-surface-border: ${theme.border};`);
-    vars.push(`${indent}--${runtimePrefix}-surface-type: ${theme.type};`);
-    vars.push(`${indent}--${runtimePrefix}-surface-elevation: ${theme.elevation};`);
-    if (theme.interactionColor) {
-        const { color, onColor, inkColor } = theme.interactionColor;
-        pushRuntimeInteractionVars(vars, `--${runtimePrefix}-surface-interaction`, color, indent);
-        if (onColor) {
-            pushRuntimeInteractionVars(vars, `--${runtimePrefix}-surface-on-interaction`, onColor, indent);
-        }
-        if (inkColor) {
-            pushRuntimeInteractionVars(vars, `--${runtimePrefix}-surface-interaction-ink`, inkColor, indent);
-        }
-    }
+    return `${header}${surfaceThemeCss(themes, { prefix: utilityPrefix, runtimePrefix })}`;
 }
 function findMainStylesFile(tree) {
     const potentialFiles = [];

package/package.json

@@ -1,8 +1,23 @@
 {
   "name": "@ethlete/core",
-  "version": "5.0.0-next.63",
+  "version": "5.0.0-next.65",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ethlete-io/ethdk",
+    "directory": "libs/core"
+  },
   "license": "MIT",
   "sideEffects": false,
+  "exports": {
+    "./design/*": "./design/*.ts",
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ethlete-core.d.ts",
+      "default": "./fesm2022/ethlete-core.mjs"
+    }
+  },
   "peerDependencies": {
     "@angular/common": "^22.1.0",
     "@angular/core": "^22.1.0",
@@ -33,15 +48,6 @@
   "generators": "./generators/generators.json",
   "module": "fesm2022/ethlete-core.mjs",
   "typings": "types/ethlete-core.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/ethlete-core.d.ts",
-      "default": "./fesm2022/ethlete-core.mjs"
-    }
-  },
   "type": "module",
   "dependencies": {
     "tslib": "^2.3.0"

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));
+    }
+  }
+}