@lit-material/divider 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 bohdaq
+
+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,60 @@
+# @lit-material/divider
+
+A Material Design 3 divider web component built with [Lit](https://lit.dev/). Part of
+[lit-material](https://github.com/bohdaq/lit-material).
+
+![lit-material divider: full-bleed, inset, and vertical variants](./screenshot.png)
+
+## Install
+
+```sh
+npm install @lit-material/divider @lit-material/tokens
+```
+
+## Usage
+
+```html
+<link rel="stylesheet" href="node_modules/@lit-material/tokens/css/index.css" />
+<script type="module">
+  import "@lit-material/divider";
+</script>
+
+<!-- Full-bleed (default). -->
+<lit-material-divider></lit-material-divider>
+
+<!-- Inset — e.g. aligned with a list item's text, not its leading icon. -->
+<lit-material-divider inset-start></lit-material-divider>
+
+<!-- "Middle inset" — indented on both sides. -->
+<lit-material-divider inset-start inset-end></lit-material-divider>
+
+<!-- Vertical, e.g. between two toolbar buttons in a flex row. -->
+<div style="display: flex; align-items: center; gap: 8px;">
+  <lit-material-button variant="text">Cut</lit-material-button>
+  <lit-material-divider orientation="vertical"></lit-material-divider>
+  <lit-material-button variant="text">Copy</lit-material-button>
+</div>
+```
+
+## API
+
+| Property     | Attribute      | Type                          | Default        |
+| ------------- | --------------- | -------------------------------- | -------------- |
+| `orientation` | `orientation`    | `"horizontal" \| "vertical"`     | `"horizontal"` |
+| `insetStart`  | `inset-start`    | `boolean`                         | `false`        |
+| `insetEnd`    | `inset-end`      | `boolean`                         | `false`        |
+
+No slot — purely visual, with no shadow DOM content at all. The host element itself *is* the
+line, styled directly via `:host`. No dependency on `@lit-material/core` (nothing to click or
+focus).
+
+`insetStart`/`insetEnd` indent the line on the axis perpendicular to it — inline (left/right) for
+a horizontal divider, block (top/bottom) for a vertical one. Neither set is a full-bleed divider;
+both set is MD3's "middle inset" variant.
+
+`role="separator"` is set automatically, with `aria-orientation="vertical"` added when
+`orientation` is vertical (the ARIA default is horizontal, so it's omitted in that case).
+
+## License
+
+MIT

package/dist/divider-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=divider-styles.d.ts.map

package/dist/divider-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider-styles.d.ts","sourceRoot":"","sources":["../src/divider-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwClB,CAAC"}

package/dist/divider-styles.js

@@ -0,0 +1,43 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    box-sizing: border-box;
+    height: 1px;
+    width: 100%;
+    background-color: var(--md-sys-color-outline-variant, #cac4d0);
+  }
+
+  /* Inset: indented from the axis perpendicular to the line itself — the
+     inline (left/right) axis for a horizontal divider. */
+  :host([inset-start]) {
+    margin-inline-start: 16px;
+    width: auto;
+  }
+
+  :host([inset-end]) {
+    margin-inline-end: 16px;
+    width: auto;
+  }
+
+  :host([orientation="vertical"]) {
+    display: inline-block;
+    align-self: stretch;
+    height: auto;
+    width: 1px;
+  }
+
+  /* Vertical: "inset" indents the block (top/bottom) axis instead. */
+  :host([orientation="vertical"][inset-start]) {
+    margin-inline-start: 0;
+    margin-block-start: 16px;
+    width: 1px;
+  }
+
+  :host([orientation="vertical"][inset-end]) {
+    margin-inline-end: 0;
+    margin-block-end: 16px;
+    width: 1px;
+  }
+`;
+//# sourceMappingURL=divider-styles.js.map

package/dist/divider-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider-styles.js","sourceRoot":"","sources":["../src/divider-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCxB,CAAC"}

package/dist/divider.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from "lit";
+export type DividerOrientation = "horizontal" | "vertical";
+/**
+ * Material Design 3 divider — a thin line that groups or separates content,
+ * typically inside a list or between sections.
+ *
+ * Purely visual: no slot, no shadow DOM content at all (`render()` returns
+ * nothing) — the host element itself *is* the line, styled directly via
+ * `:host`. No dependency on `@lit-material/core` (nothing to click or
+ * focus).
+ *
+ * `insetStart`/`insetEnd` indent the line on the axis perpendicular to it
+ * (inline/left-right for a horizontal divider, block/top-bottom for a
+ * vertical one) — e.g. to align a divider under a list item's text with a
+ * leading icon it doesn't run under. Both unset is a full-bleed divider;
+ * both set is MD3's "middle inset" variant.
+ *
+ * @element lit-material-divider
+ */
+export declare class LitMaterialDivider extends LitElement {
+    static styles: import("lit").CSSResult;
+    orientation: DividerOrientation;
+    insetStart: boolean;
+    insetEnd: boolean;
+    protected willUpdate(): void;
+    render(): symbol;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "lit-material-divider": LitMaterialDivider;
+    }
+}
+//# sourceMappingURL=divider.d.ts.map

package/dist/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../src/divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAI1C,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE3D;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAgB,MAAM,0BAAU;IAEH,WAAW,EAAE,kBAAkB,CAAgB;IACN,UAAU,UAAS;IACrB,QAAQ,UAAS;cAElE,UAAU,IAAI,IAAI;IAa5B,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}

package/dist/divider.js

@@ -0,0 +1,66 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styles } from "./divider-styles.js";
+/**
+ * Material Design 3 divider — a thin line that groups or separates content,
+ * typically inside a list or between sections.
+ *
+ * Purely visual: no slot, no shadow DOM content at all (`render()` returns
+ * nothing) — the host element itself *is* the line, styled directly via
+ * `:host`. No dependency on `@lit-material/core` (nothing to click or
+ * focus).
+ *
+ * `insetStart`/`insetEnd` indent the line on the axis perpendicular to it
+ * (inline/left-right for a horizontal divider, block/top-bottom for a
+ * vertical one) — e.g. to align a divider under a list item's text with a
+ * leading icon it doesn't run under. Both unset is a full-bleed divider;
+ * both set is MD3's "middle inset" variant.
+ *
+ * @element lit-material-divider
+ */
+let LitMaterialDivider = class LitMaterialDivider extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.orientation = "horizontal";
+        this.insetStart = false;
+        this.insetEnd = false;
+    }
+    static { this.styles = styles; }
+    willUpdate() {
+        // Not connectedCallback(): attribute mutations made there don't make it
+        // into SSR's serialized host tag (see lit-material-linear-progress for
+        // the full explanation) — willUpdate() runs inside the same
+        // synchronous pass that produces SSR's output.
+        if (!this.hasAttribute("role"))
+            this.setAttribute("role", "separator");
+        if (this.orientation === "vertical") {
+            this.setAttribute("aria-orientation", "vertical");
+        }
+        else {
+            this.removeAttribute("aria-orientation");
+        }
+    }
+    render() {
+        return nothing;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], LitMaterialDivider.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "inset-start", reflect: true })
+], LitMaterialDivider.prototype, "insetStart", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "inset-end", reflect: true })
+], LitMaterialDivider.prototype, "insetEnd", void 0);
+LitMaterialDivider = __decorate([
+    customElement("lit-material-divider")
+], LitMaterialDivider);
+export { LitMaterialDivider };
+//# sourceMappingURL=divider.js.map

package/dist/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../src/divider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI7C;;;;;;;;;;;;;;;;GAgBG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAGwB,gBAAW,GAAuB,YAAY,CAAC;QACN,eAAU,GAAG,KAAK,CAAC;QACrB,aAAQ,GAAG,KAAK,CAAC;IAkBvF,CAAC;aAtBiB,WAAM,GAAG,MAAM,AAAT,CAAU;IAMb,UAAU;QAC3B,wEAAwE;QACxE,uEAAuE;QACvE,4DAA4D;QAC5D,+CAA+C;QAC/C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;QACvE,IAAI,IAAI,CAAC,WAAW,KAAK,UAAU,EAAE,CAAC;YACpC,IAAI,CAAC,YAAY,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;QACpD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,OAAO,CAAC;IACjB,CAAC;;AAnB4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAgD;AACN;IAArE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAAoB;AACrB;IAAnE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAkB;AAL1E,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAuB9B"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { LitMaterialDivider } from "./divider.js";
+export type { DividerOrientation } from "./divider.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,YAAY,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { LitMaterialDivider } from "./divider.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@lit-material/divider",
+  "version": "0.0.1",
+  "description": "Material Design 3 divider web component (horizontal or vertical, optionally inset).",
+  "license": "MIT",
+  "author": {
+    "name": "bohdaq",
+    "email": "bohdaq@gmail.com",
+    "url": "https://github.com/bohdaq"
+  },
+  "homepage": "https://github.com/bohdaq/lit-material#readme",
+  "bugs": "https://github.com/bohdaq/lit-material/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/bohdaq/lit-material.git",
+    "directory": "packages/divider"
+  },
+  "keywords": [
+    "lit",
+    "web-components",
+    "lit-material",
+    "material-design",
+    "material-design-3",
+    "divider"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "lit": "^3.2.0",
+    "@lit-material/tokens": "0.0.1"
+  },
+  "devDependencies": {
+    "@lit-labs/ssr": "^3.3.1",
+    "@open-wc/testing": "^4.0.0",
+    "@web/dev-server-esbuild": "^1.0.0",
+    "@web/test-runner": "^0.19.0",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "web-test-runner && node --import tsx --test src/*.ssr.test.ts"
+  }
+}