@m3e/divider 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 (16) hide show
  1. package/README.md +1 -2
  2. package/dist/custom-elements.json +2541 -3
  3. package/dist/index.js +3 -4
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.js +5 -5
  6. package/dist/index.min.js.map +1 -1
  7. package/dist/src/DividerElement.d.ts +0 -1
  8. package/dist/src/DividerElement.d.ts.map +1 -1
  9. package/package.json +3 -3
  10. package/cem.config.mjs +0 -16
  11. package/demo/index.html +0 -46
  12. package/eslint.config.mjs +0 -13
  13. package/rollup.config.js +0 -32
  14. package/src/DividerElement.ts +0 -130
  15. package/src/index.ts +0 -1
  16. package/tsconfig.json +0 -9
package/dist/src/DividerElement.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { CSSResultGroup, LitElement } from "lit";
2
2
  declare const M3eDividerElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
3
3
  /**
4
- * @summary
5
4
  * A thin line that separates content in lists or other containers.
6
5
  *
7
6
  * @description
package/dist/src/DividerElement.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DividerElement.d.ts","sourceRoot":"","sources":["../../src/DividerElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;;AAKtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,iBAAkB,SAAQ,sBAAwB;IAC7D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA6DpC;IAEF;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,KAAK,UAAS;IAE1D;;;OAGG;IACmE,UAAU,UAAS;IAEzF;;;OAGG;IACiE,QAAQ,UAAS;CACtF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
1
+ {"version":3,"file":"DividerElement.d.ts","sourceRoot":"","sources":["../../src/DividerElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;;AAKtD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,iBAAkB,SAAQ,sBAA6B;IAClE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA6DpC;IAEF;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,KAAK,UAAS;IAE1D;;;OAGG;IACmE,UAAU,UAAS;IAEzF;;;OAGG;IACiE,QAAQ,UAAS;CACtF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@m3e/divider",
3
- "version": "1.0.0-rc.1",
3
+ "version": "1.0.0-rc.3",
4
4
  "description": "Divider 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/chips.html",
8
8
  "repository": {
9
9
  "type": "git",
10
10
  "url": "git+https://github.com/matraic/m3e.git"
@@ -27,7 +27,7 @@
27
27
  "clean": "rimraf dist"
28
28
  },
29
29
  "peerDependencies": {
30
- "@m3e/core": "1.0.0-rc.1",
30
+ "@m3e/core": "1.0.0-rc.3",
31
31
  "lit": "^3.3.0"
32
32
  },
33
33
  "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,46 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" style="overflow-y: auto">
3
- <head>
4
- <title>Divider for M3E</title>
5
- <meta charset="utf-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
7
- <meta name="description" content="Divider 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
- <br /><br />
41
- <m3e-divider></m3e-divider>
42
- <br /><br />
43
- <m3e-divider inset></m3e-divider>
44
- </m3e-theme>
45
- </body>
46
- </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/DividerElement.ts DELETED
@@ -1,130 +0,0 @@
1
- import { css, CSSResultGroup, LitElement } from "lit";
2
- import { customElement, property } from "lit/decorators.js";
3
-
4
- import { DesignToken, Role } from "@m3e/core";
5
-
6
- /**
7
- * @summary
8
- * A thin line that separates content in lists or other containers.
9
- *
10
- * @description
11
- * The `m3e-divider` component visually separates content within layouts, lists, or containers using a thin, unobtrusive line.
12
- * It supports horizontal and vertical orientation, with optional inset variants to align with layout padding and visual hierarchy.
13
- * The divider thickness, color, and inset behavior are customizable via CSS properties to maintain consistency across surfaces.
14
- * It is designed to reinforce spatial relationships without drawing attention, preserving focus on primary content.
15
- *
16
- * @example
17
- * The following example illustrates a basic horizontal divider.
18
- * ```html
19
- * <m3e-divider></m3e-divider>
20
- * ```
21
- *
22
- * @tag m3e-divider
23
- *
24
- * @attr inset - Whether the divider is indented with equal padding on both sides.
25
- * @attr inset-start - Whether the divider is indented with padding on the leading side.
26
- * @attr inset-end - Whether the divider is indented with padding on the trailing side.
27
- * @attr vertical - Whether the divider is vertically aligned with adjacent content.
28
- *
29
- * @cssprop --m3e-divider-thickness - Thickness of the divider line.
30
- * @cssprop --m3e-divider-color - Color of the divider line.
31
- * @cssprop --m3e-divider-inset-size - When inset, fallback inset size used when no specific start or end inset is provided.
32
- * @cssprop --m3e-divider-inset-start-size - When inset, leading inset size.
33
- * @cssprop --m3e-divider-inset-end-size - When inset, trailing inset size.
34
- */
35
- @customElement("m3e-divider")
36
- export class M3eDividerElement extends Role(LitElement, "none") {
37
- /** The styles of the element. */
38
- static override styles: CSSResultGroup = css`
39
- :host {
40
- display: block;
41
- position: relative;
42
- }
43
- :host(:not([vertical])) {
44
- height: var(--m3e-divider-thickness, 1px);
45
- width: 100%;
46
- }
47
- :host([vertical]) {
48
- width: var(--m3e-divider-thickness, 1px);
49
- height: 100%;
50
- }
51
- :host::before {
52
- content: "";
53
- box-sizing: border-box;
54
- position: absolute;
55
- }
56
- :host(:not([vertical]))::before {
57
- border-bottom: var(--m3e-divider-thickness, 1px) solid
58
- var(--m3e-divider-color, ${DesignToken.color.outlineVariant});
59
- height: inherit;
60
- }
61
- :host([vertical])::before {
62
- border-right: var(--m3e-divider-thickness, 1px) solid
63
- var(--m3e-divider-color, ${DesignToken.color.outlineVariant});
64
- width: inherit;
65
- }
66
- :host([vertical][inset])::before,
67
- :host([vertical][inset-start])::before {
68
- top: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem));
69
- }
70
- :host(:not([vertical])[inset])::before,
71
- :host(:not([vertical])[inset-start])::before {
72
- left: var(--m3e-divider-inset-start-size, var(--m3e-divider-inset-size, 1rem));
73
- }
74
- :host([vertical][inset])::before,
75
- :host([vertical][inset-start])::before {
76
- bottom: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem));
77
- }
78
- :host(:not([vertical])[inset])::before,
79
- :host(:not([vertical])[inset-start])::before {
80
- right: var(--m3e-divider-inset-end-size, var(--m3e-divider-inset-size, 1rem));
81
- }
82
- :host([vertical]:not([inset]):not([inset-start]))::before {
83
- top: 0;
84
- }
85
- :host(:not([vertical]):not([inset]):not([inset-start]))::before {
86
- left: 0;
87
- }
88
- :host([vertical]:not([inset]):not([inset-end]))::before {
89
- bottom: 0;
90
- }
91
- :host(:not([vertical]):not([inset]):not([inset-end]))::before {
92
- right: 0;
93
- }
94
- @media (forced-colors: active) {
95
- :host::before {
96
- border-color: GrayText;
97
- }
98
- }
99
- `;
100
-
101
- /**
102
- * Whether the divider is vertically aligned with adjacent content.
103
- * @default false
104
- */
105
- @property({ type: Boolean, reflect: true }) vertical = false;
106
-
107
- /**
108
- * Whether the divider is indented with equal padding on both sides.
109
- * @default false
110
- */
111
- @property({ type: Boolean, reflect: true }) inset = false;
112
-
113
- /**
114
- * Whether the divider is indented with padding on the leading side.
115
- * @default false
116
- */
117
- @property({ attribute: "inset-start", type: Boolean, reflect: true }) insetStart = false;
118
-
119
- /**
120
- * Whether the divider is indented with padding on the trailing side.
121
- * @default false
122
- */
123
- @property({ attribute: "inset-end", type: Boolean, reflect: true }) insetEnd = false;
124
- }
125
-
126
- declare global {
127
- interface HTMLElementTagNameMap {
128
- "m3e-divider": M3eDividerElement;
129
- }
130
- }
package/src/index.ts DELETED
@@ -1 +0,0 @@
1
- export * from "./DividerElement";
package/tsconfig.json DELETED
@@ -1,9 +0,0 @@
1
- {
2
- "extends": "../../tsconfig.json",
3
- "compilerOptions": {
4
- "rootDir": "./src",
5
- "outDir": "./dist/src"
6
- },
7
- "include": ["src/**/*.ts", "**/*.mjs", "**/*.js"],
8
- "exclude": []
9
- }