@nysds/nys-divider 1.18.3 → 1.19.1

package/dist/nys-divider.js

@@ -1,25 +1,25 @@
-import { LitElement as l, unsafeCSS as v, html as a } from "lit";
-import { property as c } from "lit/decorators.js";
+import { LitElement as v, unsafeCSS as c, html as f } from "lit";
+import { property as l } from "lit/decorators.js";
 /*!
    * █▄  █  █   █  █▀▀▀█  █▀▀▄  █▀▀▀█
    * █ █ █  █▄▄▄█  ▀▀▀▄▄  █   █ ▀▀▀▄▄
    * █  ▀█    █    █▄▄▄█  █▄▄▀  █▄▄▄█
    *
-   * Divider Component v1.18.3
+   * Divider Component v1.19.1
    * Part of the New York State Design System
    * Repository: https://github.com/its-hcd/nysds
    * License: MIT
 */
-const f = ":host{--_nys-divider-size: var(--nys-size-1px, 1px);--_nys-divider-color: var(--nys-color-neutral-500, #797c7f);--_nys-divider-width: 100%}:host([inverted]){--_nys-divider-color: var(--nys-color-ink-reverse, #ffffff)}.nys-divider{width:var(--_nys-divider-width);height:var(--_nys-divider-size);background-color:var(--_nys-divider-color);flex:1 0 0;margin:0;border:none}";
-var y = Object.defineProperty, u = (n, s, d, p) => {
-  for (var e = void 0, i = n.length - 1, o; i >= 0; i--)
-    (o = n[i]) && (e = o(s, d, e) || e);
-  return e && y(s, d, e), e;
+const y = ":host{--_nys-divider-size: var(--nys-size-1px, 1px);--_nys-divider-color: var(--nys-color-neutral-500, #797c7f);--_nys-divider-width: 100%}:host([inverted]){--_nys-divider-color: var(--nys-color-ink-reverse, #ffffff)}:host([subtle]){--_nys-divider-color: var(--nys-color-neutral-100, #e4e5e6)}.nys-divider{width:var(--_nys-divider-width);height:var(--_nys-divider-size);background-color:var(--_nys-divider-color);flex:1 0 0;margin:0;border:none}";
+var u = Object.defineProperty, a = (n, s, d, p) => {
+  for (var e = void 0, t = n.length - 1, o; t >= 0; t--)
+    (o = n[t]) && (e = o(s, d, e) || e);
+  return e && u(s, d, e), e;
 };
 let h = 0;
-const t = class t extends l {
+const i = class i extends v {
   constructor() {
-    super(), this.inverted = !1;
+    super(), this.inverted = !1, this.subtle = !1;
   }
   connectedCallback() {
     super.connectedCallback(), this.id || (this.id = this._generateUniqueId());
@@ -32,14 +32,17 @@ const t = class t extends l {
     return `nys-divider-${Date.now()}-${h++}`;
   }
   render() {
-    return a`<hr class="nys-divider" />`;
+    return f`<hr class="nys-divider" />`;
   }
 };
-t.styles = v(f);
-let r = t;
-u([
-  c({ type: Boolean, reflect: !0 })
+i.styles = c(y);
+let r = i;
+a([
+  l({ type: Boolean, reflect: !0 })
 ], r.prototype, "inverted");
+a([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "subtle");
 customElements.get("nys-divider") || customElements.define("nys-divider", r);
 export {
   r as NysDivider

package/dist/nys-divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"nys-divider.js","sources":["../src/nys-divider.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-divider.scss?inline\";\n\nlet dividerIdCounter = 0;\n\n/**\n * A horizontal rule for visual separation between content sections. Renders a semantic `<hr>` element.\n *\n * Use to separate distinct content areas within a page. Set `inverted` for use on dark backgrounds.\n *\n * @summary Horizontal divider for visual separation of content sections.\n * @element nys-divider\n *\n * @example Basic divider\n * ```html\n * <p>Section one content</p>\n * <nys-divider></nys-divider>\n * <p>Section two content</p>\n * ```\n */\n\nexport class NysDivider extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  /** Adjusts colors for dark backgrounds. */\n  @property({ type: Boolean, reflect: true }) inverted = false;\n\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // Generate a unique ID if not provided\n    if (!this.id) {\n      this.id = this._generateUniqueId();\n    }\n  }\n\n  /**\n   * Functions\n   * --------------------------------------------------------------------------\n   */\n\n  private _generateUniqueId() {\n    return `nys-divider-${Date.now()}-${dividerIdCounter++}`;\n  }\n\n  render() {\n    return html`<hr class=\"nys-divider\" />`;\n  }\n}\n\nif (!customElements.get(\"nys-divider\")) {\n  customElements.define(\"nys-divider\", NysDivider);\n}\n"],"names":["dividerIdCounter","_NysDivider","LitElement","html","unsafeCSS","styles","NysDivider","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;;;AAKA,IAAIA,IAAmB;AAkBhB,MAAMC,IAAN,MAAMA,UAAmBC,EAAW;AAAA,EAMzC,cAAc;AACZ,UAAA,GAH0C,KAAA,WAAW;AAAA,EAIvD;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAA,GAGD,KAAK,OACR,KAAK,KAAK,KAAK,kBAAA;AAAA,EAEnB;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,oBAAoB;AAC1B,WAAO,eAAe,KAAK,IAAA,CAAK,IAAIF,GAAkB;AAAA,EACxD;AAAA,EAEA,SAAS;AACP,WAAOG;AAAA,EACT;AACF;AA9BEF,EAAO,SAASG,EAAUC,CAAM;AAD3B,IAAMC,IAANL;AAIuCM,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAJ/BF,EAIiC,WAAA,UAAA;AA6BzC,eAAe,IAAI,aAAa,KACnC,eAAe,OAAO,eAAeA,CAAU;"}
+{"version":3,"file":"nys-divider.js","sources":["../src/nys-divider.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-divider.scss?inline\";\n\nlet dividerIdCounter = 0;\n\n/**\n * A horizontal rule for visual separation between content sections. Renders a semantic `<hr>` element.\n *\n * Use to separate distinct content areas within a page. Set `inverted` for use on dark backgrounds.\n *\n * @summary Horizontal divider for visual separation of content sections.\n * @element nys-divider\n *\n * @example Basic divider\n * ```html\n * <p>Section one content</p>\n * <nys-divider></nys-divider>\n * <p>Section two content</p>\n * ```\n */\n\nexport class NysDivider extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  /** Adjusts colors for dark backgrounds. */\n  @property({ type: Boolean, reflect: true }) inverted = false;\n\n  /** If true, the divider will use a lighter color. */\n  @property({ type: Boolean, reflect: true }) subtle = false;\n\n  constructor() {\n    super();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // Generate a unique ID if not provided\n    if (!this.id) {\n      this.id = this._generateUniqueId();\n    }\n  }\n\n  /**\n   * Functions\n   * --------------------------------------------------------------------------\n   */\n\n  private _generateUniqueId() {\n    return `nys-divider-${Date.now()}-${dividerIdCounter++}`;\n  }\n\n  render() {\n    return html`<hr class=\"nys-divider\" />`;\n  }\n}\n\nif (!customElements.get(\"nys-divider\")) {\n  customElements.define(\"nys-divider\", NysDivider);\n}\n"],"names":["dividerIdCounter","_NysDivider","LitElement","html","unsafeCSS","styles","NysDivider","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;;;AAKA,IAAIA,IAAmB;AAkBhB,MAAMC,IAAN,MAAMA,UAAmBC,EAAW;AAAA,EASzC,cAAc;AACZ,UAAA,GAN0C,KAAA,WAAW,IAGX,KAAA,SAAS;AAAA,EAIrD;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAA,GAGD,KAAK,OACR,KAAK,KAAK,KAAK,kBAAA;AAAA,EAEnB;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,oBAAoB;AAC1B,WAAO,eAAe,KAAK,IAAA,CAAK,IAAIF,GAAkB;AAAA,EACxD;AAAA,EAEA,SAAS;AACP,WAAOG;AAAA,EACT;AACF;AAjCEF,EAAO,SAASG,EAAUC,CAAM;AAD3B,IAAMC,IAANL;AAIuCM,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAJ/BF,EAIiC,WAAA,UAAA;AAGAC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAP/BF,EAOiC,WAAA,QAAA;AA6BzC,eAAe,IAAI,aAAa,KACnC,eAAe,OAAO,eAAeA,CAAU;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/nys-divider",
-  "version": "1.18.3",
+  "version": "1.19.1",
   "description": "The Divider component from the NYS Design System.",
   "module": "dist/nys-divider.js",
   "types": "dist/index.d.ts",