@m3e/divider 1.0.0-rc.2

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 matraic
+Contact: matraic@yahoo.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,94 @@
+# @m3e/divider
+
+The `m3e-divider` component visually separates content within layouts, lists, or containers using a thin, unobtrusive line. It supports horizontal and vertical orientation, with optional inset variants to align with layout padding and visual hierarchy. The divider thickness, color, and inset behavior are customizable via CSS properties to maintain consistency across surfaces. It is designed to reinforce spatial relationships without drawing attention, preserving focus on primary content.
+
+> **This package is part of [M3E](https://github.com/matraic/m3e) monorepo**, a unified suite of Material 3 web components. [Explore the docs](https://matraic.github.io/m3e) to see them in action.
+
+## 📦 Installation
+
+```bash
+npm install @m3e/divider
+```
+
+## 💻 Editor Integration
+
+This package includes a [Custom Elements Manifest](https://github.com/webcomponents/custom-elements-manifest) to support enhanced editor tooling and developer experience.
+
+### Visual Studio Code
+
+To enable autocomplete and hover documentation for `@m3e/divider`, install the [Custom Elements Manifest Language Server](https://marketplace.visualstudio.com/items?itemName=pwrs.cem-language-server-vscode) extension. It will automatically detect the manifest bundled with this package and surface tag names, attributes, slots, and events in supported files.
+
+Alternately, you can explicitly reference the `html-custom-data.json` and `css-custom-data.json` in your workspace settings:
+
+```json
+{
+  "html.customData": ["./node_modules/@m3e/divider/dist/html-custom-data.json"],
+  "css.customData": ["./node_modules/@m3e/divider/dist/css-custom-data.json"]
+}
+```
+
+## 🚀 Browser Usage
+
+This package uses [JavaScript Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#module_specifiers). To use it directly in a browser without a bundler, use a module script similar to the following.
+
+```html
+<script type="module" src="/node_modules/@m3e/divider/dist/index.js"></script>
+```
+
+In addition, you must use an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap) to include dependencies.
+
+```html
+<script type="importmap">
+  {
+    "imports": {
+      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
+      "@m3e/core": "/node_modules/@m3e/core/dist/index.js"
+    }
+  }
+</script>
+```
+
+> For production, use index.min.js for faster load times.
+
+## 🗂️ Elements
+
+- `m3e-divider` — A thin line that separates content in lists or other containers.
+
+## 🧪 Examples
+
+The following example illustrates a basic horizontal divider.
+
+```html
+<m3e-divider></m3e-divider>
+```
+
+## 📖 API Reference
+
+This section details the attributes and CSS custom properties available for the `m3e-divider` component.
+
+### ⚙️ Attributes
+
+| Attribute     | Type      | Default | Description                                                        |
+| ------------- | --------- | ------- | ------------------------------------------------------------------ |
+| `inset`       | `boolean` | `false` | Whether the divider is indented with equal padding on both sides.  |
+| `inset-start` | `boolean` | `false` | Whether the divider is indented with padding on the leading side.  |
+| `inset-end`   | `boolean` | `false` | Whether the divider is indented with padding on the trailing side. |
+| `vertical`    | `boolean` | `false` | Whether the divider is vertically aligned with adjacent content.   |
+
+### 🎛️ CSS Custom Properties
+
+| Property                         | Description                                                          |
+| -------------------------------- | -------------------------------------------------------------------- |
+| `--m3e-divider-thickness`        | Thickness of the divider line.                                       |
+| `--m3e-divider-color`            | Color of the divider line.                                           |
+| `--m3e-divider-inset-size`       | Fallback inset size when no specific start or end inset is provided. |
+| `--m3e-divider-inset-start-size` | Leading inset size.                                                  |
+| `--m3e-divider-inset-end-size`   | Trailing inset size.                                                 |
+
+## 🤝 Contributing
+
+See the root monorepo `CONTRIBUTING.md` for guidelines on contributing to this package.
+
+## 📄 License
+
+This package is licensed under the MIT License.

package/dist/css-custom-data.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "properties": [
+    {
+      "name": "--m3e-divider-thickness",
+      "description": "Thickness of the divider line.",
+      "values": []
+    },
+    {
+      "name": "--m3e-divider-color",
+      "description": "Color of the divider line.",
+      "values": []
+    },
+    {
+      "name": "--m3e-divider-inset-size",
+      "description": "When inset, fallback inset size used when no specific start or end inset is provided.",
+      "values": []
+    },
+    {
+      "name": "--m3e-divider-inset-start-size",
+      "description": "When inset, leading inset size.",
+      "values": []
+    },
+    {
+      "name": "--m3e-divider-inset-end-size",
+      "description": "When inset, trailing inset size.",
+      "values": []
+    }
+  ],
+  "pseudoElements": []
+}