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

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 (22) hide show
  1. package/README.md +1 -2
  2. package/dist/custom-elements.json +2541 -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/dist/src/ShapeElement.d.ts +1 -4
  8. package/dist/src/ShapeElement.d.ts.map +1 -1
  9. package/dist/src/ShapeStyle.d.ts.map +1 -1
  10. package/package.json +3 -3
  11. package/cem.config.mjs +0 -16
  12. package/demo/index.html +0 -100
  13. package/eslint.config.mjs +0 -13
  14. package/rollup.config.js +0 -32
  15. package/src/ShapeElement.ts +0 -61
  16. package/src/ShapeName.ts +0 -37
  17. package/src/ShapeNameStyle.ts +0 -21
  18. package/src/ShapePolygon.ts +0 -115
  19. package/src/ShapeStyle.ts +0 -41
  20. package/src/ShapeToken.ts +0 -18
  21. package/src/index.ts +0 -2
  22. package/tsconfig.json +0 -9
package/dist/src/ShapeElement.d.ts CHANGED
@@ -1,8 +1,6 @@
1
1
  import { LitElement } from "lit";
2
2
  import { ShapeName } from "./ShapeName";
3
- declare const M3eShapeElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
4
3
  /**
5
- * @summary
6
4
  * A shape used to add emphasis and decorative flair.
7
5
  *
8
6
  * @description
@@ -31,7 +29,7 @@ declare const M3eShapeElement_base: import("node_modules/@m3e/core/dist/src/shar
31
29
  * @cssprop --m3e-shape-container-color - Container (background) color of the shape.
32
30
  * @cssprop --m3e-shape-transition - Transition used to morph between shapes.
33
31
  */
34
- export declare class M3eShapeElement extends M3eShapeElement_base {
32
+ export declare class M3eShapeElement extends LitElement {
35
33
  /** The styles of the element. */
36
34
  static styles: import("lit").CSSResultGroup[];
37
35
  /**
@@ -47,5 +45,4 @@ declare global {
47
45
  "m3e-shape": M3eShapeElement;
48
46
  }
49
47
  }
50
- export {};
51
48
  //# sourceMappingURL=ShapeElement.d.ts.map
package/dist/src/ShapeElement.d.ts.map CHANGED
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"ShapeElement.d.ts","sourceRoot":"","sources":["../../src/ShapeElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAIxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,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/ShapeStyle.d.ts.map CHANGED
@@ -1 +1 @@
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"}
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,cAiCxB,CAAC"}
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.3",
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.3",
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/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
- ];