@f-ewald/components 1.4.0 → 1.5.0
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/custom-elements.json
CHANGED
|
@@ -2964,7 +2964,7 @@
|
|
|
2964
2964
|
"declarations": [
|
|
2965
2965
|
{
|
|
2966
2966
|
"kind": "class",
|
|
2967
|
-
"description": "A horizontal divider: a thin rule that visually separates two pieces of\ncontent that are not otherwise contained in a box or frame and would bleed\ninto each other. With a `label` it renders the common \"─── OR ───\"\npattern — text centered between two line segments; without one it is a\nsingle full-width rule. Exposed to assistive technology as a horizontal\nseparator, so it renders correctly with zero external CSS.",
|
|
2967
|
+
"description": "A horizontal divider: a thin rule that visually separates two pieces of\ncontent that are not otherwise contained in a box or frame and would bleed\ninto each other. With a `label` it renders the common \"─── OR ───\"\npattern — text centered between two line segments; without one it is a\nsingle full-width rule. Exposed to assistive technology as a horizontal\nseparator, so it renders correctly with zero external CSS.\n\nThe vertical spacing above and below is tunable per instance via\n`--component-divider-spacing` (default `1rem`), and both the plain and\nlabeled forms reserve the same height, so toggling the label never shifts\nsurrounding layout.",
|
|
2968
2968
|
"name": "ContentDivider",
|
|
2969
2969
|
"members": [
|
|
2970
2970
|
{
|
|
@@ -7,6 +7,11 @@ import { LitElement } from "lit";
|
|
|
7
7
|
* single full-width rule. Exposed to assistive technology as a horizontal
|
|
8
8
|
* separator, so it renders correctly with zero external CSS.
|
|
9
9
|
*
|
|
10
|
+
* The vertical spacing above and below is tunable per instance via
|
|
11
|
+
* `--component-divider-spacing` (default `1rem`), and both the plain and
|
|
12
|
+
* labeled forms reserve the same height, so toggling the label never shifts
|
|
13
|
+
* surrounding layout.
|
|
14
|
+
*
|
|
10
15
|
* @element content-divider
|
|
11
16
|
*/
|
|
12
17
|
export declare class ContentDivider extends LitElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"content-divider.d.ts","sourceRoot":"","sources":["../src/content-divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD
|
|
1
|
+
{"version":3,"file":"content-divider.d.ts","sourceRoot":"","sources":["../src/content-divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;GAcG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAmCpB;IAEF,sEAAsE;IAC1D,KAAK,SAAM;IAEd,MAAM,yCAgBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}
|
package/dist/content-divider.js
CHANGED
|
@@ -15,6 +15,11 @@ import { tokens } from "./tokens.js";
|
|
|
15
15
|
* single full-width rule. Exposed to assistive technology as a horizontal
|
|
16
16
|
* separator, so it renders correctly with zero external CSS.
|
|
17
17
|
*
|
|
18
|
+
* The vertical spacing above and below is tunable per instance via
|
|
19
|
+
* `--component-divider-spacing` (default `1rem`), and both the plain and
|
|
20
|
+
* labeled forms reserve the same height, so toggling the label never shifts
|
|
21
|
+
* surrounding layout.
|
|
22
|
+
*
|
|
18
23
|
* @element content-divider
|
|
19
24
|
*/
|
|
20
25
|
let ContentDivider = class ContentDivider extends LitElement {
|
|
@@ -28,12 +33,13 @@ let ContentDivider = class ContentDivider extends LitElement {
|
|
|
28
33
|
css `
|
|
29
34
|
:host {
|
|
30
35
|
display: block;
|
|
31
|
-
margin: 1rem 0;
|
|
32
36
|
}
|
|
33
37
|
.rule {
|
|
34
38
|
display: flex;
|
|
35
39
|
align-items: center;
|
|
36
40
|
gap: 0.75rem;
|
|
41
|
+
min-height: calc(var(--ui-font-size-sm, 0.75rem) * var(--ui-line-height-tight, 1.25));
|
|
42
|
+
padding-block: var(--component-divider-spacing, 1rem);
|
|
37
43
|
}
|
|
38
44
|
.line {
|
|
39
45
|
flex: 1 1 auto;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"content-divider.js","sourceRoot":"","sources":["../src/content-divider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC
|
|
1
|
+
{"version":3,"file":"content-divider.js","sourceRoot":"","sources":["../src/content-divider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;;;;;;GAcG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAsCL,sEAAsE;QAC1D,UAAK,GAAG,EAAE,CAAC;IAmBzB,CAAC;aAzDiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCF;KACF,AAnCqB,CAmCpB;IAKO,MAAM;QACb,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAC9C,OAAO,IAAI,CAAA;;;;;qBAKM,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;;;UAG1C,QAAQ;YACR,CAAC,CAAC,IAAI,CAAA,0CAA0C,IAAI,CAAC,KAAK;yCAC3B;YAC/B,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;CACF,CAAA;AAnBa;IAAX,QAAQ,EAAE;6CAAY;AAvCZ,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CA0D1B","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * A horizontal divider: a thin rule that visually separates two pieces of\n * content that are not otherwise contained in a box or frame and would bleed\n * into each other. With a `label` it renders the common \"─── OR ───\"\n * pattern — text centered between two line segments; without one it is a\n * single full-width rule. Exposed to assistive technology as a horizontal\n * separator, so it renders correctly with zero external CSS.\n *\n * The vertical spacing above and below is tunable per instance via\n * `--component-divider-spacing` (default `1rem`), and both the plain and\n * labeled forms reserve the same height, so toggling the label never shifts\n * surrounding layout.\n *\n * @element content-divider\n */\n@customElement(\"content-divider\")\nexport class ContentDivider extends LitElement {\n static override styles = [\n tokens,\n css`\n :host {\n display: block;\n }\n .rule {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n min-height: calc(var(--ui-font-size-sm, 0.75rem) * var(--ui-line-height-tight, 1.25));\n padding-block: var(--component-divider-spacing, 1rem);\n }\n .line {\n flex: 1 1 auto;\n border-top: 1px solid var(--ui-border, #e2e8f0);\n }\n .label {\n flex: 0 0 auto;\n color: var(--ui-text-muted, #64748b);\n font-family: var(\n --ui-font,\n ui-sans-serif,\n system-ui,\n sans-serif,\n \"Apple Color Emoji\",\n \"Segoe UI Emoji\",\n \"Segoe UI Symbol\",\n \"Noto Color Emoji\"\n );\n font-size: var(--ui-font-size-sm, 0.75rem);\n font-weight: var(--ui-font-weight-medium, 500);\n line-height: var(--ui-line-height-tight, 1.25);\n }\n `,\n ];\n\n /** Optional centered label; empty renders a plain full-width rule. */\n @property() label = \"\";\n\n override render() {\n const hasLabel = this.label.trim().length > 0;\n return html`\n <div\n class=\"rule\"\n role=\"separator\"\n aria-orientation=\"horizontal\"\n aria-label=${hasLabel ? this.label : nothing}\n >\n <span class=\"line\"></span>\n ${hasLabel\n ? html`<span class=\"label\" aria-hidden=\"true\">${this.label}</span>\n <span class=\"line\"></span>`\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"content-divider\": ContentDivider;\n }\n}\n"]}
|
package/docs/content-divider.md
CHANGED
|
@@ -7,6 +7,11 @@ pattern — text centered between two line segments; without one it is a
|
|
|
7
7
|
single full-width rule. Exposed to assistive technology as a horizontal
|
|
8
8
|
separator, so it renders correctly with zero external CSS.
|
|
9
9
|
|
|
10
|
+
The vertical spacing above and below is tunable per instance via
|
|
11
|
+
`--component-divider-spacing` (default `1rem`), and both the plain and
|
|
12
|
+
labeled forms reserve the same height, so toggling the label never shifts
|
|
13
|
+
surrounding layout.
|
|
14
|
+
|
|
10
15
|
## Install
|
|
11
16
|
|
|
12
17
|
```js
|
package/llms.txt
CHANGED
|
@@ -364,6 +364,11 @@ pattern — text centered between two line segments; without one it is a
|
|
|
364
364
|
single full-width rule. Exposed to assistive technology as a horizontal
|
|
365
365
|
separator, so it renders correctly with zero external CSS.
|
|
366
366
|
|
|
367
|
+
The vertical spacing above and below is tunable per instance via
|
|
368
|
+
`--component-divider-spacing` (default `1rem`), and both the plain and
|
|
369
|
+
labeled forms reserve the same height, so toggling the label never shifts
|
|
370
|
+
surrounding layout.
|
|
371
|
+
|
|
367
372
|
Import: `import "@f-ewald/components/content-divider.js";`
|
|
368
373
|
|
|
369
374
|
Properties: `label` (attribute `label`) : string, default ""
|