@m3e/shape 1.0.0-rc.1

package/src/ShapeStyle.ts

@@ -0,0 +1,41 @@
+import { css, CSSResultGroup } from "lit";
+
+import { ShapeToken } from "./ShapeToken";
+
+/**
+ * Baseline styles for `M3eShapeElement`.
+ * @internal
+ */
+export const ShapeStyle: CSSResultGroup = css`
+  :host {
+    display: inline-block;
+    position: relative;
+    aspect-ratio: 1 / 1;
+    width: ${ShapeToken.size};
+  }
+  :host([name]) .wrapper {
+    background-color: ${ShapeToken.containerColor};
+    transition: ${ShapeToken.transition};
+    transform-origin: center;
+  }
+  .wrapper {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+  }
+  ::slotted(img),
+  ::slotted(video) {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  @media (prefers-reduced-motion) {
+    .wrapper {
+      transition: none;
+    }
+  }
+`;

package/src/ShapeToken.ts

@@ -0,0 +1,18 @@
+import { unsafeCSS } from "lit";
+
+import { DesignToken } from "@m3e/core";
+
+/**
+ * Component design tokens that control the `M3eShapeElement` for all variants.
+ * @internal
+ */
+export const ShapeToken = {
+  /** Default size of the shape. */
+  size: unsafeCSS(`var(--m3e-shape-size, 3rem)`),
+
+  /** Container (background) color of the shape. */
+  containerColor: unsafeCSS(`var(--m3e-shape-container-color, ${DesignToken.color.primary})`),
+
+  /** Transition used to morph between shapes. */
+  transition: unsafeCSS(`var(--m3e-shape-transition, clip-path ${DesignToken.motion.spring.slowEffects})`),
+} as const;

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./ShapeElement";
+export * from "./ShapeName";

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist/src"
+  },
+  "include": ["src/**/*.ts", "**/*.mjs", "**/*.js"],
+  "exclude": []
+}