@lit-material/divider 0.0.3 → 0.1.0

package/custom-elements.json

@@ -9,7 +9,7 @@
         {
           "kind": "variable",
           "name": "styles",
-          "default": "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; } `"
+          "default": "css` :host { display: block; box-sizing: border-box; height: 1px; width: 100%; background-color: var(--md-sys-color-outline-variant, #cac4d0); } :host([hidden]) { display: none; } /* 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; } `"
         }
       ],
       "exports": [
@@ -138,6 +138,27 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/react.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "Divider",
+          "description": "React wrapper for `<lit-material-divider>`."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Divider",
+          "declaration": {
+            "name": "Divider",
+            "module": "src/react.ts"
+          }
+        }
+      ]
     }
   ]
 }

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

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

package/dist/divider-styles.js

@@ -8,6 +8,10 @@ export const styles = css `
     background-color: var(--md-sys-color-outline-variant, #cac4d0);
   }
 
+  :host([hidden]) {
+    display: none;
+  }
+
   /* Inset: indented from the axis perpendicular to the line itself — the
      inline (left/right) axis for a horizontal divider. */
   :host([inset-start]) {

package/dist/divider-styles.js.map

@@ -1 +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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CxB,CAAC"}

package/dist/react.d.ts

@@ -0,0 +1,4 @@
+import { LitMaterialDivider } from "./divider.js";
+/** React wrapper for `<lit-material-divider>`. */
+export declare const Divider: import("@lit/react").ReactWebComponent<LitMaterialDivider, {}>;
+//# sourceMappingURL=react.d.ts.map

package/dist/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,kDAAkD;AAClD,eAAO,MAAM,OAAO,gEAKlB,CAAC"}

package/dist/react.js

@@ -0,0 +1,13 @@
+// Generated by tools/framework-bindings.mjs from custom-elements.json. Do not edit.
+// React 18 and 19 wrappers: properties set as properties, events as `on<Event>` props.
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import { LitMaterialDivider } from "./divider.js";
+/** React wrapper for `<lit-material-divider>`. */
+export const Divider = createComponent({
+    tagName: "lit-material-divider",
+    elementClass: LitMaterialDivider,
+    react: React,
+    displayName: "Divider",
+});
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAAA,oFAAoF;AACpF,uFAAuF;AACvF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,kDAAkD;AAClD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,sBAAsB;IAC/B,YAAY,EAAE,kBAAkB;IAChC,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,SAAS;CACvB,CAAC,CAAC"}

package/dist/vscode.html-custom-data.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "lit-material-divider",
+      "description": "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.",
+      "attributes": [
+        {
+          "name": "orientation"
+        },
+        {
+          "name": "inset-start"
+        },
+        {
+          "name": "inset-end"
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://lit.rws8.tech/components/divider/"
+        }
+      ]
+    }
+  ]
+}

package/dist/web-types.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@lit-material/divider",
+  "version": "0.1.0",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "lit-material-divider",
+          "description": "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.",
+          "doc-url": "https://lit.rws8.tech/components/divider/",
+          "attributes": [
+            {
+              "name": "orientation",
+              "value": {
+                "type": "DividerOrientation"
+              }
+            },
+            {
+              "name": "inset-start",
+              "value": {
+                "type": "boolean"
+              }
+            },
+            {
+              "name": "inset-end",
+              "value": {
+                "type": "boolean"
+              }
+            }
+          ],
+          "slots": [],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "insetEnd",
+                "type": "boolean"
+              },
+              {
+                "name": "insetStart",
+                "type": "boolean"
+              },
+              {
+                "name": "orientation",
+                "type": "DividerOrientation"
+              }
+            ],
+            "events": []
+          }
+        }
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lit-material/divider",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "Material Design 3 divider web component (horizontal or vertical, optionally inset).",
   "license": "MIT",
   "author": {
@@ -8,7 +8,7 @@
     "email": "bohdaq@gmail.com",
     "url": "https://github.com/bohdaq"
   },
-  "homepage": "https://github.com/bohdaq/lit-material#readme",
+  "homepage": "https://lit.rws8.tech/components/divider/",
   "bugs": "https://github.com/bohdaq/lit-material/issues",
   "repository": {
     "type": "git",
@@ -30,18 +30,42 @@
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
+    },
+    "./jsx": {
+      "types": "./types/jsx.d.ts"
+    },
+    "./vue": {
+      "types": "./types/vue.d.ts"
     }
   },
   "files": [
     "dist",
-    "custom-elements.json"
+    "custom-elements.json",
+    "types"
   ],
+  "web-types": "./dist/web-types.json",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "lit": "^3.2.0",
-    "@lit-material/tokens": "0.0.2"
+    "@lit-material/tokens": "0.1.0"
+  },
+  "peerDependencies": {
+    "@lit/react": "^1.0.0",
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "@lit/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@lit-labs/ssr": "^3.3.1",

package/types/jsx.d.ts

@@ -0,0 +1,16 @@
+// Generated by tools/framework-bindings.mjs from custom-elements.json. Do not edit.
+// React 19 renders custom elements natively; this types them in JSX. Load it with
+// `import type {} from "<package>/jsx";`. React 19 adds a listener for `on<event>` props as written.
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+import type { LitMaterialDivider } from "../dist/divider.js";
+
+type ElementProps<E, K extends keyof E> = Omit<DetailedHTMLProps<HTMLAttributes<E>, E>, K> & Partial<Pick<E, K>>;
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements {
+      /** 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. */
+      "lit-material-divider": ElementProps<LitMaterialDivider, "insetEnd" | "insetStart" | "orientation">;
+    }
+  }
+}

package/types/vue.d.ts

@@ -0,0 +1,12 @@
+// Generated by tools/framework-bindings.mjs from custom-elements.json. Do not edit.
+// Types the elements in Vue templates (Volar). Load it with `import type {} from "<package>/vue";`, and
+// tell the compiler they're custom elements: compilerOptions.isCustomElement = (tag) => tag.startsWith("lit-material-").
+import type { DefineComponent } from "vue";
+import type { LitMaterialDivider } from "../dist/divider.js";
+
+declare module "vue" {
+  interface GlobalComponents {
+    /** 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. */
+    "lit-material-divider": DefineComponent<Partial<Pick<LitMaterialDivider, "insetEnd" | "insetStart" | "orientation">>>;
+  }
+}