@m3e/shape 1.0.0-rc.1 → 1.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/README.md +1 -2
  2. package/dist/custom-elements.json +2549 -9
  3. package/dist/index.js +3 -3
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.js +12 -11
  6. package/dist/index.min.js.map +1 -1
  7. package/package.json +3 -3
  8. package/cem.config.mjs +0 -16
  9. package/demo/index.html +0 -100
  10. package/dist/src/ShapeElement.d.ts +0 -51
  11. package/dist/src/ShapeElement.d.ts.map +0 -1
  12. package/dist/src/ShapeName.d.ts +0 -3
  13. package/dist/src/ShapeName.d.ts.map +0 -1
  14. package/dist/src/ShapeNameStyle.d.ts +0 -7
  15. package/dist/src/ShapeNameStyle.d.ts.map +0 -1
  16. package/dist/src/ShapePolygon.d.ts +0 -8
  17. package/dist/src/ShapePolygon.d.ts.map +0 -1
  18. package/dist/src/ShapeStyle.d.ts +0 -7
  19. package/dist/src/ShapeStyle.d.ts.map +0 -1
  20. package/dist/src/ShapeToken.d.ts +0 -13
  21. package/dist/src/ShapeToken.d.ts.map +0 -1
  22. package/dist/src/index.d.ts +0 -3
  23. package/dist/src/index.d.ts.map +0 -1
  24. package/eslint.config.mjs +0 -13
  25. package/rollup.config.js +0 -32
  26. package/src/ShapeElement.ts +0 -61
  27. package/src/ShapeName.ts +0 -37
  28. package/src/ShapeNameStyle.ts +0 -21
  29. package/src/ShapePolygon.ts +0 -115
  30. package/src/ShapeStyle.ts +0 -41
  31. package/src/ShapeToken.ts +0 -18
  32. package/src/index.ts +0 -2
  33. package/tsconfig.json +0 -9
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@m3e/shape",
3
- "version": "1.0.0-rc.1",
3
+ "version": "1.0.0-rc.2",
4
4
  "description": "Shape for M3E",
5
5
  "author": "matraic <matraic@yahoo.com>",
6
6
  "license": "MIT",
7
- "homepage": "https://matraic.github.io/m3e/",
7
+ "homepage": "https://matraic.github.io/m3e/#/components/shape.html",
8
8
  "repository": {
9
9
  "type": "git",
10
10
  "url": "git+https://github.com/matraic/m3e.git"
@@ -62,7 +62,7 @@
62
62
  "clean": "rimraf dist"
63
63
  },
64
64
  "peerDependencies": {
65
- "@m3e/core": "1.0.0-rc.1",
65
+ "@m3e/core": "1.0.0-rc.2",
66
66
  "lit": "^3.3.0"
67
67
  },
68
68
  "devDependencies": {
package/cem.config.mjs DELETED
@@ -1,16 +0,0 @@
1
- import { customElementVsCodePlugin } from "custom-element-vs-code-integration";
2
-
3
- export default {
4
- globs: ["src/**/*.ts"],
5
- exclude: ["src/**/*.spec.ts"],
6
- packagejson: true,
7
- outdir: "dist",
8
- litelement: true,
9
- plugins: [
10
- customElementVsCodePlugin({
11
- outdir: "dist",
12
- htmlFileName: "html-custom-data.json",
13
- cssFileName: "css-custom-data.json",
14
- }),
15
- ],
16
- };
package/demo/index.html DELETED
@@ -1,100 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" style="overflow-y: auto">
3
- <head>
4
- <title>Shape for M3E</title>
5
- <meta charset="utf-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
7
- <meta name="description" content="Shape for M3E" />
8
- <base href="./" />
9
- <link rel="preconnect" href="https://fonts.googleapis.com" />
10
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11
- <link
12
- href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
13
- rel="stylesheet"
14
- />
15
- <link
16
- href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0"
17
- rel="stylesheet"
18
- />
19
- <script type="importmap">
20
- {
21
- "imports": {
22
- "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
23
- "@m3e/core": "../../core/dist/index.min.js"
24
- }
25
- }
26
- </script>
27
- <script type="module" src="../../theme/dist/index.min.js"></script>
28
- <script type="module" src="../dist/index.min.js"></script>
29
- <style>
30
- body {
31
- font-family: "Roboto";
32
- }
33
- *:not(:defined) {
34
- display: none;
35
- }
36
- </style>
37
- </head>
38
- <body>
39
- <m3e-theme strong-focus>
40
- <m3e-shape name="12-sided-cookie"></m3e-shape>
41
- <m3e-shape name="9-sided-cookie"></m3e-shape>
42
- <m3e-shape name="8-leaf-clover"></m3e-shape>
43
- <m3e-shape name="7-sided-cookie"></m3e-shape>
44
- <m3e-shape name="6-sided-cookie"></m3e-shape>
45
- <m3e-shape name="4-sided-cookie"></m3e-shape>
46
- <m3e-shape name="4-leaf-clover"></m3e-shape>
47
- <br />
48
- <m3e-shape name="arch"></m3e-shape>
49
- <m3e-shape name="arrow"></m3e-shape>
50
- <m3e-shape name="boom"></m3e-shape>
51
- <m3e-shape name="bun"></m3e-shape>
52
- <m3e-shape name="diamond"></m3e-shape>
53
- <m3e-shape name="fan"></m3e-shape>
54
- <m3e-shape name="flower"></m3e-shape>
55
- <br />
56
- <m3e-shape name="gem"></m3e-shape>
57
- <m3e-shape name="ghost-ish"></m3e-shape>
58
- <m3e-shape name="heart"></m3e-shape>
59
- <m3e-shape name="hexagon"></m3e-shape>
60
- <m3e-shape name="pentagon"></m3e-shape>
61
- <m3e-shape name="pill"></m3e-shape>
62
- <m3e-shape name="pixel-circle"></m3e-shape>
63
- <br />
64
- <m3e-shape name="pixel-triangle"></m3e-shape>
65
- <m3e-shape name="puffy"></m3e-shape>
66
- <m3e-shape name="puffy-diamond"></m3e-shape>
67
- <m3e-shape name="semicircle"></m3e-shape>
68
- <m3e-shape name="slanted"></m3e-shape>
69
- <m3e-shape name="soft-boom"></m3e-shape>
70
- <m3e-shape name="soft-burst"></m3e-shape>
71
- <br />
72
- <m3e-shape name="square"></m3e-shape>
73
- <m3e-shape name="circle"></m3e-shape>
74
- <m3e-shape name="triangle"></m3e-shape>
75
- <br /><br />
76
-
77
- <m3e-shape name="sunny" style="width: 300px">
78
- <img src="https://www.shutterstock.com/shutterstock/videos/1006393/thumb/1.jpg?ip=x480" />
79
- </m3e-shape>
80
- <br /><br />
81
- <m3e-shape name="sunny" style="width: 300px; --m3e-shape-container-color: transparent">
82
- <video
83
- autoplay
84
- loop
85
- poster="https://www.shutterstock.com/shutterstock/videos/1006393/thumb/1.jpg?ip=x480"
86
- preload="auto"
87
- >
88
- <source
89
- src="https://www.shutterstock.com/shutterstock/videos/1006393/preview/stock-footage-business-people-working-in-office.webm"
90
- type="video/webm"
91
- />
92
- <source
93
- src="https://www.shutterstock.com/shutterstock/videos/1006393/preview/stock-footage-business-people-working-in-office.mp4"
94
- type="video/mp4"
95
- />
96
- </video>
97
- </m3e-shape>
98
- </m3e-theme>
99
- </body>
100
- </html>
package/dist/src/ShapeElement.d.ts DELETED
@@ -1,51 +0,0 @@
1
- import { LitElement } from "lit";
2
- import { ShapeName } from "./ShapeName";
3
- declare const M3eShapeElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
4
- /**
5
- * @summary
6
- * A shape used to add emphasis and decorative flair.
7
- *
8
- * @description
9
- * The `m3e-shape` component allows you to use abstract shapes thoughtfully to add emphasis and decorative flair,
10
- * including built-in shape morphing.
11
- *
12
- * All shape names are sourced from the Material Shape library: `4-leaf-clover`, `4-sided-cookie`, `6-sided-cookie`,
13
- * `7-sided-cookie`, `8-leaf-clover`, `9-sided-cookie`, `12-sided-cookie`, `arch`, `arrow`, `boom`, `bun`, `burst`,
14
- * `circle`, `diamond`, `fan`, `flower`, `gem`, `ghost-ish`, `heart`, `hexagon`, `oval`, `pentagon`, `pill`, `pixel-circle`,
15
- * `pixel-triangle`, `puffy`, `puffy-diamond`, `semicircle`, `slanted`, `soft-boom`, `soft-burst`, `square`, `sunny`,
16
- * `triangle`, and `very-sunny`. Refer to the Material Shape library for visual references and details.
17
- *
18
- * @example
19
- * The following example illustrates using the `m3e-shape` component to present the `sunny` shape.
20
- * ```html
21
- * <m3e-shape name="sunny"></m3e-shape>
22
- * ```
23
- *
24
- * @tag m3e-shape
25
- *
26
- * @slot - Renders the clipped content of the shape.
27
- *
28
- * @attr name - The name of the shape.
29
- *
30
- * @cssprop --m3e-shape-size - Default size of the shape.
31
- * @cssprop --m3e-shape-container-color - Container (background) color of the shape.
32
- * @cssprop --m3e-shape-transition - Transition used to morph between shapes.
33
- */
34
- export declare class M3eShapeElement extends M3eShapeElement_base {
35
- /** The styles of the element. */
36
- static styles: import("lit").CSSResultGroup[];
37
- /**
38
- * The name of the shape.
39
- * @default null
40
- */
41
- name: ShapeName | null;
42
- /** @inheritdoc */
43
- protected render(): unknown;
44
- }
45
- declare global {
46
- interface HTMLElementTagNameMap {
47
- "m3e-shape": M3eShapeElement;
48
- }
49
- }
50
- export {};
51
- //# sourceMappingURL=ShapeElement.d.ts.map
package/dist/src/ShapeElement.d.ts.map DELETED
@@ -1 +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 DELETED
@@ -1,3 +0,0 @@
1
- /** Specifies the possible names of a shape. */
2
- 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";
3
- //# sourceMappingURL=ShapeName.d.ts.map
package/dist/src/ShapeName.d.ts.map DELETED
@@ -1 +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 DELETED
@@ -1,7 +0,0 @@
1
- import { CSSResultGroup } from "lit";
2
- /**
3
- * Name styles for `M3eShapeElement`.
4
- * @internal
5
- */
6
- export declare const ShapeNameStyle: CSSResultGroup;
7
- //# sourceMappingURL=ShapeNameStyle.d.ts.map
package/dist/src/ShapeNameStyle.d.ts.map DELETED
@@ -1 +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 DELETED
@@ -1,8 +0,0 @@
1
- import { CSSResult } from "lit";
2
- import { ShapeName } from "./ShapeName";
3
- /**
4
- * Normalized polygons for each shape.
5
- * @internal
6
- */
7
- export declare const ShapePolygon: Record<ShapeName, CSSResult>;
8
- //# sourceMappingURL=ShapePolygon.d.ts.map
package/dist/src/ShapePolygon.d.ts.map DELETED
@@ -1 +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 DELETED
@@ -1,7 +0,0 @@
1
- import { CSSResultGroup } from "lit";
2
- /**
3
- * Baseline styles for `M3eShapeElement`.
4
- * @internal
5
- */
6
- export declare const ShapeStyle: CSSResultGroup;
7
- //# sourceMappingURL=ShapeStyle.d.ts.map
package/dist/src/ShapeStyle.d.ts.map DELETED
@@ -1 +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 DELETED
@@ -1,13 +0,0 @@
1
- /**
2
- * Component design tokens that control the `M3eShapeElement` for all variants.
3
- * @internal
4
- */
5
- export declare const ShapeToken: {
6
- /** Default size of the shape. */
7
- readonly size: import("lit").CSSResult;
8
- /** Container (background) color of the shape. */
9
- readonly containerColor: import("lit").CSSResult;
10
- /** Transition used to morph between shapes. */
11
- readonly transition: import("lit").CSSResult;
12
- };
13
- //# sourceMappingURL=ShapeToken.d.ts.map
package/dist/src/ShapeToken.d.ts.map DELETED
@@ -1 +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 DELETED
@@ -1,3 +0,0 @@
1
- export * from "./ShapeElement";
2
- export * from "./ShapeName";
3
- //# sourceMappingURL=index.d.ts.map
package/dist/src/index.d.ts.map DELETED
@@ -1 +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 DELETED
@@ -1,13 +0,0 @@
1
- import eslint from "@eslint/js";
2
- import tseslint from "typescript-eslint";
3
- import { fileURLToPath } from "url";
4
- import { dirname } from "path";
5
-
6
- export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
7
- languageOptions: {
8
- parserOptions: {
9
- project: true,
10
- tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
11
- },
12
- },
13
- });
package/rollup.config.js DELETED
@@ -1,32 +0,0 @@
1
- import resolve from "@rollup/plugin-node-resolve";
2
- import terser from "@rollup/plugin-terser";
3
- import typescript from "@rollup/plugin-typescript";
4
-
5
- const banner = `/**
6
- * @license MIT
7
- * Copyright (c) 2025 matraic
8
- * See LICENSE file in the project root for full license text.
9
- */`;
10
-
11
- export default [
12
- {
13
- input: "src/index.ts",
14
- output: [
15
- {
16
- file: "dist/index.js",
17
- format: "esm",
18
- sourcemap: true,
19
- banner: banner,
20
- },
21
- {
22
- file: "dist/index.min.js",
23
- format: "esm",
24
- sourcemap: true,
25
- banner: banner,
26
- plugins: [terser({ mangle: true })],
27
- },
28
- ],
29
- external: ["@m3e/core", "lit"],
30
- plugins: [resolve(), typescript()],
31
- },
32
- ];
package/src/ShapeElement.ts DELETED
@@ -1,61 +0,0 @@
1
- import { html, LitElement } from "lit";
2
- import { customElement, property } from "lit/decorators.js";
3
-
4
- import { Role } from "@m3e/core";
5
-
6
- import { ShapeName } from "./ShapeName";
7
- import { ShapeStyle } from "./ShapeStyle";
8
- import { ShapeNameStyle } from "./ShapeNameStyle";
9
-
10
- /**
11
- * @summary
12
- * A shape used to add emphasis and decorative flair.
13
- *
14
- * @description
15
- * The `m3e-shape` component allows you to use abstract shapes thoughtfully to add emphasis and decorative flair,
16
- * including built-in shape morphing.
17
- *
18
- * All shape names are sourced from the Material Shape library: `4-leaf-clover`, `4-sided-cookie`, `6-sided-cookie`,
19
- * `7-sided-cookie`, `8-leaf-clover`, `9-sided-cookie`, `12-sided-cookie`, `arch`, `arrow`, `boom`, `bun`, `burst`,
20
- * `circle`, `diamond`, `fan`, `flower`, `gem`, `ghost-ish`, `heart`, `hexagon`, `oval`, `pentagon`, `pill`, `pixel-circle`,
21
- * `pixel-triangle`, `puffy`, `puffy-diamond`, `semicircle`, `slanted`, `soft-boom`, `soft-burst`, `square`, `sunny`,
22
- * `triangle`, and `very-sunny`. Refer to the Material Shape library for visual references and details.
23
- *
24
- * @example
25
- * The following example illustrates using the `m3e-shape` component to present the `sunny` shape.
26
- * ```html
27
- * <m3e-shape name="sunny"></m3e-shape>
28
- * ```
29
- *
30
- * @tag m3e-shape
31
- *
32
- * @slot - Renders the clipped content of the shape.
33
- *
34
- * @attr name - The name of the shape.
35
- *
36
- * @cssprop --m3e-shape-size - Default size of the shape.
37
- * @cssprop --m3e-shape-container-color - Container (background) color of the shape.
38
- * @cssprop --m3e-shape-transition - Transition used to morph between shapes.
39
- */
40
- @customElement("m3e-shape")
41
- export class M3eShapeElement extends Role(LitElement, "none") {
42
- /** The styles of the element. */
43
- static override styles = [ShapeStyle, ShapeNameStyle];
44
-
45
- /**
46
- * The name of the shape.
47
- * @default null
48
- */
49
- @property({ reflect: true }) name: ShapeName | null = null;
50
-
51
- /** @inheritdoc */
52
- protected override render(): unknown {
53
- return html`<div class="wrapper"><slot></slot></div>`;
54
- }
55
- }
56
-
57
- declare global {
58
- interface HTMLElementTagNameMap {
59
- "m3e-shape": M3eShapeElement;
60
- }
61
- }
package/src/ShapeName.ts DELETED
@@ -1,37 +0,0 @@
1
- /** Specifies the possible names of a shape. */
2
- export type ShapeName =
3
- | "4-leaf-clover"
4
- | "4-sided-cookie"
5
- | "6-sided-cookie"
6
- | "7-sided-cookie"
7
- | "8-leaf-clover"
8
- | "9-sided-cookie"
9
- | "12-sided-cookie"
10
- | "arch"
11
- | "arrow"
12
- | "boom"
13
- | "bun"
14
- | "burst"
15
- | "circle"
16
- | "diamond"
17
- | "fan"
18
- | "flower"
19
- | "gem"
20
- | "ghost-ish"
21
- | "heart"
22
- | "hexagon"
23
- | "oval"
24
- | "pentagon"
25
- | "pill"
26
- | "pixel-circle"
27
- | "pixel-triangle"
28
- | "puffy"
29
- | "puffy-diamond"
30
- | "semicircle"
31
- | "slanted"
32
- | "soft-boom"
33
- | "soft-burst"
34
- | "square"
35
- | "sunny"
36
- | "triangle"
37
- | "very-sunny";
package/src/ShapeNameStyle.ts DELETED
@@ -1,21 +0,0 @@
1
- import { css, CSSResult, CSSResultGroup, unsafeCSS } from "lit";
2
-
3
- import { ShapeName } from "./ShapeName";
4
- import { ShapePolygon } from "./ShapePolygon";
5
-
6
- /** @private */
7
- function shapeStyle(name: ShapeName): CSSResult {
8
- return css`
9
- :host([name="${unsafeCSS(name)}"]) .wrapper {
10
- clip-path: polygon(${ShapePolygon[name]});
11
- }
12
- `;
13
- }
14
-
15
- /**
16
- * Name styles for `M3eShapeElement`.
17
- * @internal
18
- */
19
- export const ShapeNameStyle: CSSResultGroup = [
20
- ...Object.getOwnPropertyNames(ShapePolygon).map((name) => shapeStyle(name as ShapeName)),
21
- ];