@nysds/nys-divider 1.19.2 → 1.19.4
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.
- package/dist/nys-divider.js +1 -1
- package/dist/nys-divider.js.map +1 -1
- package/package.json +5 -2
- package/dist/nys-divider.d.ts +0 -31
package/dist/nys-divider.js
CHANGED
|
@@ -5,7 +5,7 @@ import { property as l } from "lit/decorators.js";
|
|
|
5
5
|
* █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
|
|
6
6
|
* █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
|
|
7
7
|
*
|
|
8
|
-
* Divider Component v1.19.
|
|
8
|
+
* Divider Component v1.19.4
|
|
9
9
|
* Part of the New York State Design System
|
|
10
10
|
* Repository: https://github.com/its-hcd/nysds
|
|
11
11
|
* License: MIT
|
package/dist/nys-divider.js.map
CHANGED
|
@@ -1 +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 /** 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;
|
|
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\n * ```html\n * <p>Section one content</p>\n * <nys-divider></nys-divider>\n * <p>Section two content</p>\n * ```\n *\n * @example Inverted\n * ```html\n * <p>Section one content</p>\n * <nys-divider inverted></nys-divider>\n * <p>Section two content</p>\n * ```\n *\n * @render Inverted\n * ```html\n * <div style=\"display: flex; flex-direction: column; background-color: var(--nys-color-ink, #1b1b1b); color: var(--nys-color-ink-reverse, #fff); padding: var(--nys-space-200, 16px);\">\n * <p>Section one content</p>\n * <nys-divider inverted></nys-divider>\n * <p>Section two content</p>\n * </div>\n * ```\n *\n * @example Subtle\n * ```html\n * <p>Section one content</p>\n * <nys-divider subtle></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;AAyChB,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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-divider",
|
|
3
|
-
"version": "1.19.
|
|
3
|
+
"version": "1.19.4",
|
|
4
4
|
"description": "The Divider component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-divider.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -37,5 +37,8 @@
|
|
|
37
37
|
],
|
|
38
38
|
"author": "New York State Design System Team",
|
|
39
39
|
"license": "MIT",
|
|
40
|
-
"sideEffects": true
|
|
40
|
+
"sideEffects": true,
|
|
41
|
+
"peerDependencies": {
|
|
42
|
+
"lit": "^3.3.1"
|
|
43
|
+
}
|
|
41
44
|
}
|
package/dist/nys-divider.d.ts
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
/**
|
|
3
|
-
* A horizontal rule for visual separation between content sections. Renders a semantic `<hr>` element.
|
|
4
|
-
*
|
|
5
|
-
* Use to separate distinct content areas within a page. Set `inverted` for use on dark backgrounds.
|
|
6
|
-
*
|
|
7
|
-
* @summary Horizontal divider for visual separation of content sections.
|
|
8
|
-
* @element nys-divider
|
|
9
|
-
*
|
|
10
|
-
* @example Basic divider
|
|
11
|
-
* ```html
|
|
12
|
-
* <p>Section one content</p>
|
|
13
|
-
* <nys-divider></nys-divider>
|
|
14
|
-
* <p>Section two content</p>
|
|
15
|
-
* ```
|
|
16
|
-
*/
|
|
17
|
-
export declare class NysDivider extends LitElement {
|
|
18
|
-
static styles: import("lit").CSSResult;
|
|
19
|
-
/** Adjusts colors for dark backgrounds. */
|
|
20
|
-
inverted: boolean;
|
|
21
|
-
/** If true, the divider will use a lighter color. */
|
|
22
|
-
subtle: boolean;
|
|
23
|
-
constructor();
|
|
24
|
-
connectedCallback(): void;
|
|
25
|
-
/**
|
|
26
|
-
* Functions
|
|
27
|
-
* --------------------------------------------------------------------------
|
|
28
|
-
*/
|
|
29
|
-
private _generateUniqueId;
|
|
30
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
31
|
-
}
|