@m3e/shape 1.0.0-rc.1

package/dist/src/ShapeElement.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from "lit";
+import { ShapeName } from "./ShapeName";
+declare const M3eShapeElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * @summary
+ * A shape used to add emphasis and decorative flair.
+ *
+ * @description
+ * The `m3e-shape` component allows you to use abstract shapes thoughtfully to add emphasis and decorative flair,
+ * including built-in shape morphing.
+ *
+ * All shape names are sourced from the Material Shape library: `4-leaf-clover`, `4-sided-cookie`, `6-sided-cookie`,
+ * `7-sided-cookie`, `8-leaf-clover`, `9-sided-cookie`, `12-sided-cookie`, `arch`, `arrow`, `boom`, `bun`, `burst`,
+ * `circle`, `diamond`, `fan`, `flower`, `gem`, `ghost-ish`, `heart`, `hexagon`, `oval`, `pentagon`, `pill`, `pixel-circle`,
+ * `pixel-triangle`, `puffy`, `puffy-diamond`, `semicircle`, `slanted`, `soft-boom`, `soft-burst`, `square`, `sunny`,
+ * `triangle`, and `very-sunny`. Refer to the Material Shape library for visual references and details.
+ *
+ * @example
+ * The following example illustrates using the `m3e-shape` component to present the `sunny` shape.
+ * ```html
+ * <m3e-shape name="sunny"></m3e-shape>
+ * ```
+ *
+ * @tag m3e-shape
+ *
+ * @slot - Renders the clipped content of the shape.
+ *
+ * @attr name - The name of the shape.
+ *
+ * @cssprop --m3e-shape-size - Default size of the shape.
+ * @cssprop --m3e-shape-container-color - Container (background) color of the shape.
+ * @cssprop --m3e-shape-transition - Transition used to morph between shapes.
+ */
+export declare class M3eShapeElement extends M3eShapeElement_base {
+    /** The styles of the element. */
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * The name of the shape.
+     * @default null
+     */
+    name: ShapeName | null;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-shape": M3eShapeElement;
+    }
+}
+export {};
+//# sourceMappingURL=ShapeElement.d.ts.map

package/dist/src/ShapeElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeElement.d.ts","sourceRoot":"","sources":["../../src/ShapeElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;;AAIxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,eAAgB,SAAQ,oBAAwB;IAC3D,iCAAiC;IACjC,OAAgB,MAAM,iCAAgC;IAEtD;;;OAGG;IAC0B,IAAI,EAAE,SAAS,GAAG,IAAI,CAAQ;IAE3D,kBAAkB;cACC,MAAM,IAAI,OAAO;CAGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/dist/src/ShapeName.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible names of a shape. */
+export type ShapeName = "4-leaf-clover" | "4-sided-cookie" | "6-sided-cookie" | "7-sided-cookie" | "8-leaf-clover" | "9-sided-cookie" | "12-sided-cookie" | "arch" | "arrow" | "boom" | "bun" | "burst" | "circle" | "diamond" | "fan" | "flower" | "gem" | "ghost-ish" | "heart" | "hexagon" | "oval" | "pentagon" | "pill" | "pixel-circle" | "pixel-triangle" | "puffy" | "puffy-diamond" | "semicircle" | "slanted" | "soft-boom" | "soft-burst" | "square" | "sunny" | "triangle" | "very-sunny";
+//# sourceMappingURL=ShapeName.d.ts.map

package/dist/src/ShapeName.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeName.d.ts","sourceRoot":"","sources":["../../src/ShapeName.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAC/C,MAAM,MAAM,SAAS,GACjB,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,eAAe,GACf,gBAAgB,GAChB,iBAAiB,GACjB,MAAM,GACN,OAAO,GACP,MAAM,GACN,KAAK,GACL,OAAO,GACP,QAAQ,GACR,SAAS,GACT,KAAK,GACL,QAAQ,GACR,KAAK,GACL,WAAW,GACX,OAAO,GACP,SAAS,GACT,MAAM,GACN,UAAU,GACV,MAAM,GACN,cAAc,GACd,gBAAgB,GAChB,OAAO,GACP,eAAe,GACf,YAAY,GACZ,SAAS,GACT,WAAW,GACX,YAAY,GACZ,QAAQ,GACR,OAAO,GACP,UAAU,GACV,YAAY,CAAC"}

package/dist/src/ShapeNameStyle.d.ts

@@ -0,0 +1,7 @@
+import { CSSResultGroup } from "lit";
+/**
+ * Name styles for `M3eShapeElement`.
+ * @internal
+ */
+export declare const ShapeNameStyle: CSSResultGroup;
+//# sourceMappingURL=ShapeNameStyle.d.ts.map

package/dist/src/ShapeNameStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeNameStyle.d.ts","sourceRoot":"","sources":["../../src/ShapeNameStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,cAAc,EAAa,MAAM,KAAK,CAAC;AAchE;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,cAE5B,CAAC"}

package/dist/src/ShapePolygon.d.ts

@@ -0,0 +1,8 @@
+import { CSSResult } from "lit";
+import { ShapeName } from "./ShapeName";
+/**
+ * Normalized polygons for each shape.
+ * @internal
+ */
+export declare const ShapePolygon: Record<ShapeName, CSSResult>;
+//# sourceMappingURL=ShapePolygon.d.ts.map

package/dist/src/ShapePolygon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapePolygon.d.ts","sourceRoot":"","sources":["../../src/ShapePolygon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,KAAK,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,SAAS,CA0GrD,CAAC"}

package/dist/src/ShapeStyle.d.ts

@@ -0,0 +1,7 @@
+import { CSSResultGroup } from "lit";
+/**
+ * Baseline styles for `M3eShapeElement`.
+ * @internal
+ */
+export declare const ShapeStyle: CSSResultGroup;
+//# sourceMappingURL=ShapeStyle.d.ts.map

package/dist/src/ShapeStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeStyle.d.ts","sourceRoot":"","sources":["../../src/ShapeStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1C;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,cAgCxB,CAAC"}

package/dist/src/ShapeToken.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Component design tokens that control the `M3eShapeElement` for all variants.
+ * @internal
+ */
+export declare const ShapeToken: {
+    /** Default size of the shape. */
+    readonly size: import("lit").CSSResult;
+    /** Container (background) color of the shape. */
+    readonly containerColor: import("lit").CSSResult;
+    /** Transition used to morph between shapes. */
+    readonly transition: import("lit").CSSResult;
+};
+//# sourceMappingURL=ShapeToken.d.ts.map

package/dist/src/ShapeToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeToken.d.ts","sourceRoot":"","sources":["../../src/ShapeToken.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,UAAU;IACrB,iCAAiC;;IAGjC,iDAAiD;;IAGjD,+CAA+C;;CAEvC,CAAC"}

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ShapeElement";
+export * from "./ShapeName";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC"}

package/eslint.config.mjs

@@ -0,0 +1,13 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+
+export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
+  languageOptions: {
+    parserOptions: {
+      project: true,
+      tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
+    },
+  },
+});

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@m3e/shape",
+  "version": "1.0.0-rc.1",
+  "description": "Shape for M3E",
+  "author": "matraic <matraic@yahoo.com>",
+  "license": "MIT",
+  "homepage": "https://matraic.github.io/m3e/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/matraic/m3e.git"
+  },
+  "keywords": [
+    "material design",
+    "web components",
+    "shape",
+    "4 leaf clover",
+    "4 sided cookie",
+    "6 sided cookie",
+    "7 sided cookie",
+    "8 leaf clover",
+    "9 sided cookie",
+    "12 sided cookie",
+    "arch",
+    "arrow",
+    "boom",
+    "bun",
+    "burst",
+    "circle",
+    "diamond",
+    "fan",
+    "flower",
+    "gem",
+    "ghost-ish",
+    "heart",
+    "hexagon",
+    "oval",
+    "pentagon",
+    "pill",
+    "pixel circle",
+    "pixel triangle",
+    "puffy",
+    "puffy diamond",
+    "semicircle",
+    "slanted",
+    "soft boom",
+    "soft burst",
+    "square",
+    "sunny",
+    "triangle",
+    "very sunny"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "browser": "dist/index.min.js",
+  "unpkg": "dist/index.min.js",
+  "types": "dist/src/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "build": "rollup -c",
+    "cem": "cem analyze --config cem.config.mjs",
+    "lint": "npx eslint ./src",
+    "clean": "rimraf dist"
+  },
+  "peerDependencies": {
+    "@m3e/core": "1.0.0-rc.1",
+    "lit": "^3.3.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@eslint/js": "^9.30.1",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "12.1.0",
+    "custom-element-vs-code-integration": "^1.5.0",
+    "eslint": "^9.32.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.44.2",
+    "tslib": "^2.8.1",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "^8.38.0"
+  },
+  "customElements": "dist/custom-elements.json"
+}

package/rollup.config.js

@@ -0,0 +1,32 @@
+import resolve from "@rollup/plugin-node-resolve";
+import terser from "@rollup/plugin-terser";
+import typescript from "@rollup/plugin-typescript";
+
+const banner = `/**
+ * @license MIT
+ * Copyright (c) 2025 matraic
+ * See LICENSE file in the project root for full license text.
+ */`;
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: "dist/index.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+      },
+      {
+        file: "dist/index.min.js",
+        format: "esm",
+        sourcemap: true,
+        banner: banner,
+        plugins: [terser({ mangle: true })],
+      },
+    ],
+    external: ["@m3e/core", "lit"],
+    plugins: [resolve(), typescript()],
+  },
+];

package/src/ShapeElement.ts

@@ -0,0 +1,61 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import { Role } from "@m3e/core";
+
+import { ShapeName } from "./ShapeName";
+import { ShapeStyle } from "./ShapeStyle";
+import { ShapeNameStyle } from "./ShapeNameStyle";
+
+/**
+ * @summary
+ * A shape used to add emphasis and decorative flair.
+ *
+ * @description
+ * The `m3e-shape` component allows you to use abstract shapes thoughtfully to add emphasis and decorative flair,
+ * including built-in shape morphing.
+ *
+ * All shape names are sourced from the Material Shape library: `4-leaf-clover`, `4-sided-cookie`, `6-sided-cookie`,
+ * `7-sided-cookie`, `8-leaf-clover`, `9-sided-cookie`, `12-sided-cookie`, `arch`, `arrow`, `boom`, `bun`, `burst`,
+ * `circle`, `diamond`, `fan`, `flower`, `gem`, `ghost-ish`, `heart`, `hexagon`, `oval`, `pentagon`, `pill`, `pixel-circle`,
+ * `pixel-triangle`, `puffy`, `puffy-diamond`, `semicircle`, `slanted`, `soft-boom`, `soft-burst`, `square`, `sunny`,
+ * `triangle`, and `very-sunny`. Refer to the Material Shape library for visual references and details.
+ *
+ * @example
+ * The following example illustrates using the `m3e-shape` component to present the `sunny` shape.
+ * ```html
+ * <m3e-shape name="sunny"></m3e-shape>
+ * ```
+ *
+ * @tag m3e-shape
+ *
+ * @slot - Renders the clipped content of the shape.
+ *
+ * @attr name - The name of the shape.
+ *
+ * @cssprop --m3e-shape-size - Default size of the shape.
+ * @cssprop --m3e-shape-container-color - Container (background) color of the shape.
+ * @cssprop --m3e-shape-transition - Transition used to morph between shapes.
+ */
+@customElement("m3e-shape")
+export class M3eShapeElement extends Role(LitElement, "none") {
+  /** The styles of the element. */
+  static override styles = [ShapeStyle, ShapeNameStyle];
+
+  /**
+   * The name of the shape.
+   * @default null
+   */
+  @property({ reflect: true }) name: ShapeName | null = null;
+
+  /** @inheritdoc */
+  protected override render(): unknown {
+    return html`<div class="wrapper"><slot></slot></div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "m3e-shape": M3eShapeElement;
+  }
+}

package/src/ShapeName.ts

@@ -0,0 +1,37 @@
+/** Specifies the possible names of a shape. */
+export type ShapeName =
+  | "4-leaf-clover"
+  | "4-sided-cookie"
+  | "6-sided-cookie"
+  | "7-sided-cookie"
+  | "8-leaf-clover"
+  | "9-sided-cookie"
+  | "12-sided-cookie"
+  | "arch"
+  | "arrow"
+  | "boom"
+  | "bun"
+  | "burst"
+  | "circle"
+  | "diamond"
+  | "fan"
+  | "flower"
+  | "gem"
+  | "ghost-ish"
+  | "heart"
+  | "hexagon"
+  | "oval"
+  | "pentagon"
+  | "pill"
+  | "pixel-circle"
+  | "pixel-triangle"
+  | "puffy"
+  | "puffy-diamond"
+  | "semicircle"
+  | "slanted"
+  | "soft-boom"
+  | "soft-burst"
+  | "square"
+  | "sunny"
+  | "triangle"
+  | "very-sunny";

package/src/ShapeNameStyle.ts

@@ -0,0 +1,21 @@
+import { css, CSSResult, CSSResultGroup, unsafeCSS } from "lit";
+
+import { ShapeName } from "./ShapeName";
+import { ShapePolygon } from "./ShapePolygon";
+
+/** @private */
+function shapeStyle(name: ShapeName): CSSResult {
+  return css`
+    :host([name="${unsafeCSS(name)}"]) .wrapper {
+      clip-path: polygon(${ShapePolygon[name]});
+    }
+  `;
+}
+
+/**
+ * Name styles for `M3eShapeElement`.
+ * @internal
+ */
+export const ShapeNameStyle: CSSResultGroup = [
+  ...Object.getOwnPropertyNames(ShapePolygon).map((name) => shapeStyle(name as ShapeName)),
+];