@ascribed/elements 0.4.1 → 0.4.2

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.
Files changed (3) hide show
  1. package/CONTRACT.md +8 -3
  2. package/css/style.css +59 -59
  3. package/package.json +11 -4
package/CONTRACT.md CHANGED
@@ -24,7 +24,7 @@ A change to this contract changes the site emitter (`crates/ascribe-emit`), the
24
24
  **How the emitter writes elements.** Custom elements are raw HTML blocks in CommonMark, so the layout matters:
25
25
 
26
26
  - An element that **wraps markdown** is written as its opening tag alone on a line, a blank line, the markdown, a blank line, and its closing tag alone on a line (SPEC §9.4). Nested wrapping elements follow the same rule.
27
- - An element that holds **no markdown** (`<ascribe-availability>`, an empty widget) is written as one HTML block: its lines are consecutive, with no blank line inside.
27
+ - An element that holds **no markdown** (`<ascribe-availability>`, an empty widget) is written as one HTML block: its lines are consecutive, with no blank line inside, and its opening tag is alone on the first line. An element with nothing inside is its opening tag on one line and its closing tag on the next. A custom element's tags on one line aren't an HTML block to CommonMark, which reads them as inline HTML and wraps them in a paragraph; an opening tag alone on its line starts a block (CommonMark's HTML block kind 7).
28
28
  - Every element is separated from the blocks around it by a blank line, or starts or ends its container.
29
29
  - Inside a list item or blockquote, every line carries the container's indentation or `>` markers, like any other block there.
30
30
  - A list whose items hold an element is written loose, whatever it was in the source, because an element needs a blank line before it and CommonMark then reads the list as loose: its items render `<p>`. A list whose items hold no element keeps its tightness.
@@ -86,7 +86,7 @@ A `@variant` group that keeps more than one arm in the build (SPEC §9.3, §9.4)
86
86
  |---|---|---|
87
87
  | `sync` | dimensional groups only | The dimension this group switches on. Groups with the same `sync` on a page switch together, and the reader's choice is remembered across pages. Labeled groups have no `sync` and never sync (SPEC §4.3: they're local to their page). |
88
88
 
89
- **Choosing `sync`:** among the dimensions every surviving arm names, the first, in the content model's declaration order of `[dimensions]`, on which the arms' values differ; if the arms have the same values on every dimension they share, the first one they share. For the usual group, whose arms each name one dimension, it's that dimension.
89
+ **Choosing `sync`:** among the dimensions every surviving arm names, the first, in the content model's declaration order of `[dimensions]`, then the implicit `release` dimension, on which the arms' values differ; if the arms have the same values on every dimension they share, the first one they share. For the usual group, whose arms each name one dimension, it's that dimension.
90
90
 
91
91
  **Children:** one `<ascribe-tab>` per surviving arm, in source order, and nothing else.
92
92
 
@@ -224,7 +224,12 @@ A project widget (SPEC §6) becomes a custom element whose tag is the widget's n
224
224
  | `binding = "heading"`, or `"heading-or-block"` at a section's top | Empty, directly after the section's heading |
225
225
  | `binding = "self"` | Empty, where the directive was |
226
226
 
227
- A wrapping widget follows §0's layout for elements that wrap markdown; an empty one is a single line: `<quill-labspace lab="first-sync"></quill-labspace>`.
227
+ A wrapping widget follows §0's layout for elements that wrap markdown; an empty one follows its layout for elements with nothing inside, the opening tag on one line and the closing tag on the next, so it's an HTML block, never in a paragraph:
228
+
229
+ ```html
230
+ <quill-labspace lab="first-sync">
231
+ </quill-labspace>
232
+ ```
228
233
 
229
234
  **Groups:** the arms of a groupable widget's group become one element per arm, as above, wrapped in `<ascribe-group widget="<name>">`, which follows §0's layout. `<ascribe-group>` is part of the element library: it has no behavior and no styling beyond `display: block`, and exists so a project's CSS or script can find a group's arms together.
230
235
 
package/css/style.css CHANGED
@@ -23,7 +23,7 @@
23
23
  /* Generated from design/tokens.toml by scripts/design/tokens.ts: spacing, light. */
24
24
  --ascribe-space: 1rem;
25
25
  --ascribe-space-small: 0.5rem;
26
- --ascribe-border-color: #e3e6ec;
26
+ --ascribe-border-color: #ccdce4;
27
27
  --ascribe-radius: 0.375rem;
28
28
  /* End of generated spacing. */
29
29
 
@@ -31,52 +31,52 @@
31
31
  --ascribe-text-color: inherit;
32
32
  --ascribe-surface-color: transparent;
33
33
  /* Generated from design/tokens.toml by scripts/design/tokens.ts: text, light. */
34
- --ascribe-muted-color: #676c75;
34
+ --ascribe-muted-color: #47606f;
35
35
  /* End of generated text. */
36
36
 
37
37
  /* Note types: an accent color and a tinted background each. */
38
38
  /* Generated from design/tokens.toml by scripts/design/tokens.ts: notes, light. */
39
- --ascribe-note-color: #474dc6;
40
- --ascribe-note-background: #f5f6fe;
41
- --ascribe-tip-color: #057256;
42
- --ascribe-tip-background: #e1fff2;
43
- --ascribe-important-color: #932f8e;
44
- --ascribe-important-background: #fff2fd;
45
- --ascribe-warning-color: #845502;
46
- --ascribe-warning-background: #fef5eb;
47
- --ascribe-caution-color: #a73303;
48
- --ascribe-caution-background: #fef4f1;
39
+ --ascribe-note-color: #0b6f8e;
40
+ --ascribe-note-background: #dff4fc;
41
+ --ascribe-tip-color: #2f6b2b;
42
+ --ascribe-tip-background: #e5f6e3;
43
+ --ascribe-important-color: #6b2094;
44
+ --ascribe-important-background: #f6eefc;
45
+ --ascribe-warning-color: #583d01;
46
+ --ascribe-warning-background: #fdf1d8;
47
+ --ascribe-caution-color: #ca223c;
48
+ --ascribe-caution-background: #ffedec;
49
49
  /* End of generated notes. */
50
50
 
51
51
  /* Steps */
52
52
  --ascribe-steps-marker-size: 1.75rem;
53
53
  /* Generated from design/tokens.toml by scripts/design/tokens.ts: steps, light. */
54
- --ascribe-steps-color: #5962e8;
54
+ --ascribe-steps-color: #0b6f8e;
55
55
  --ascribe-steps-marker-text-color: #ffffff;
56
56
  /* End of generated steps. */
57
57
 
58
58
  /* Tabs */
59
59
  /* Generated from design/tokens.toml by scripts/design/tokens.ts: tabs, light. */
60
- --ascribe-tab-color: #676c75;
61
- --ascribe-tab-active-color: #5962e8;
62
- --ascribe-tab-focus-color: #5962e8;
63
- --ascribe-tab-hover-background: #f7f9fd;
60
+ --ascribe-tab-color: #47606f;
61
+ --ascribe-tab-active-color: #0b6f8e;
62
+ --ascribe-tab-focus-color: #b4530f;
63
+ --ascribe-tab-hover-background: #e1ebf1;
64
64
  /* End of generated tabs. */
65
65
 
66
66
  /* Availability lifecycle states: an accent color and a background each. */
67
67
  /* Generated from design/tokens.toml by scripts/design/tokens.ts: states, light. */
68
- --ascribe-state-color: #676c75;
69
- --ascribe-state-background: #f0f3f7;
70
- --ascribe-state-ga-color: #057256;
71
- --ascribe-state-ga-background: #e1fff2;
72
- --ascribe-state-preview-color: #932f8e;
73
- --ascribe-state-preview-background: #fff2fd;
74
- --ascribe-state-beta-color: #474dc6;
75
- --ascribe-state-beta-background: #f5f6fe;
76
- --ascribe-state-deprecated-color: #845502;
77
- --ascribe-state-deprecated-background: #fef5eb;
78
- --ascribe-state-removed-color: #a73303;
79
- --ascribe-state-removed-background: #fef4f1;
68
+ --ascribe-state-color: #47606f;
69
+ --ascribe-state-background: #deeaf0;
70
+ --ascribe-state-ga-color: #2f6b2b;
71
+ --ascribe-state-ga-background: #e5f6e3;
72
+ --ascribe-state-preview-color: #6b2094;
73
+ --ascribe-state-preview-background: #f6eefc;
74
+ --ascribe-state-beta-color: #0b6f8e;
75
+ --ascribe-state-beta-background: #dff4fc;
76
+ --ascribe-state-deprecated-color: #583d01;
77
+ --ascribe-state-deprecated-background: #fdf1d8;
78
+ --ascribe-state-removed-color: #ca223c;
79
+ --ascribe-state-removed-background: #ffedec;
80
80
  /* End of generated states. */
81
81
  }
82
82
 
@@ -86,51 +86,51 @@
86
86
  @supports (color: light-dark(#000, #fff)) {
87
87
  :root {
88
88
  /* Generated from design/tokens.toml by scripts/design/tokens.ts: spacing, light-dark. */
89
- --ascribe-border-color: light-dark(#e3e6ec, #393d46);
89
+ --ascribe-border-color: light-dark(#ccdce4, #263a4b);
90
90
  /* End of generated spacing. */
91
91
 
92
92
  /* Generated from design/tokens.toml by scripts/design/tokens.ts: text, light-dark. */
93
- --ascribe-muted-color: light-dark(#676c75, #a5a9b2);
93
+ --ascribe-muted-color: light-dark(#47606f, #8aa6b8);
94
94
  /* End of generated text. */
95
95
 
96
96
  /* Generated from design/tokens.toml by scripts/design/tokens.ts: notes, light-dark. */
97
- --ascribe-note-color: light-dark(#474dc6, #91a1fe);
98
- --ascribe-note-background: light-dark(#f5f6fe, #161b3a);
99
- --ascribe-tip-color: light-dark(#057256, #22c598);
100
- --ascribe-tip-background: light-dark(#e1fff2, #02251a);
101
- --ascribe-important-color: light-dark(#932f8e, #ffc8f9);
102
- --ascribe-important-background: light-dark(#fff2fd, #2d132b);
103
- --ascribe-warning-color: light-dark(#845502, #e0992e);
104
- --ascribe-warning-background: light-dark(#fef5eb, #2b1a03);
105
- --ascribe-caution-color: light-dark(#a73303, #fe7f57);
106
- --ascribe-caution-background: light-dark(#fef4f1, #341308);
97
+ --ascribe-note-color: light-dark(#0b6f8e, #56d0f0);
98
+ --ascribe-note-background: light-dark(#dff4fc, #0b2f40);
99
+ --ascribe-tip-color: light-dark(#2f6b2b, #9fdc7c);
100
+ --ascribe-tip-background: light-dark(#e5f6e3, #1a321b);
101
+ --ascribe-important-color: light-dark(#6b2094, #b180d4);
102
+ --ascribe-important-background: light-dark(#f6eefc, #2f1e3a);
103
+ --ascribe-warning-color: light-dark(#583d01, #b38c15);
104
+ --ascribe-warning-background: light-dark(#fdf1d8, #32240a);
105
+ --ascribe-caution-color: light-dark(#ca223c, #ed7477);
106
+ --ascribe-caution-background: light-dark(#ffedec, #3d1a1b);
107
107
  /* End of generated notes. */
108
108
 
109
109
  /* Generated from design/tokens.toml by scripts/design/tokens.ts: steps, light-dark. */
110
- --ascribe-steps-color: light-dark(#5962e8, #91a1fe);
111
- --ascribe-steps-marker-text-color: light-dark(#ffffff, #0c0f16);
110
+ --ascribe-steps-color: light-dark(#0b6f8e, #56d0f0);
111
+ --ascribe-steps-marker-text-color: light-dark(#ffffff, #0b1824);
112
112
  /* End of generated steps. */
113
113
 
114
114
  /* Generated from design/tokens.toml by scripts/design/tokens.ts: tabs, light-dark. */
115
- --ascribe-tab-color: light-dark(#676c75, #a5a9b2);
116
- --ascribe-tab-active-color: light-dark(#5962e8, #91a1fe);
117
- --ascribe-tab-focus-color: light-dark(#5962e8, #b3c0ff);
118
- --ascribe-tab-hover-background: light-dark(#f7f9fd, #13171f);
115
+ --ascribe-tab-color: light-dark(#47606f, #8aa6b8);
116
+ --ascribe-tab-active-color: light-dark(#0b6f8e, #56d0f0);
117
+ --ascribe-tab-focus-color: light-dark(#b4530f, #f0a35e);
118
+ --ascribe-tab-hover-background: light-dark(#e1ebf1, #1f303e);
119
119
  /* End of generated tabs. */
120
120
 
121
121
  /* Generated from design/tokens.toml by scripts/design/tokens.ts: states, light-dark. */
122
- --ascribe-state-color: light-dark(#676c75, #a5a9b2);
123
- --ascribe-state-background: light-dark(#f0f3f7, #22272e);
124
- --ascribe-state-ga-color: light-dark(#057256, #22c598);
125
- --ascribe-state-ga-background: light-dark(#e1fff2, #02251a);
126
- --ascribe-state-preview-color: light-dark(#932f8e, #ffc8f9);
127
- --ascribe-state-preview-background: light-dark(#fff2fd, #2d132b);
128
- --ascribe-state-beta-color: light-dark(#474dc6, #91a1fe);
129
- --ascribe-state-beta-background: light-dark(#f5f6fe, #161b3a);
130
- --ascribe-state-deprecated-color: light-dark(#845502, #e0992e);
131
- --ascribe-state-deprecated-background: light-dark(#fef5eb, #2b1a03);
132
- --ascribe-state-removed-color: light-dark(#a73303, #fe7f57);
133
- --ascribe-state-removed-background: light-dark(#fef4f1, #341308);
122
+ --ascribe-state-color: light-dark(#47606f, #8aa6b8);
123
+ --ascribe-state-background: light-dark(#deeaf0, #1f303e);
124
+ --ascribe-state-ga-color: light-dark(#2f6b2b, #9fdc7c);
125
+ --ascribe-state-ga-background: light-dark(#e5f6e3, #1a321b);
126
+ --ascribe-state-preview-color: light-dark(#6b2094, #b180d4);
127
+ --ascribe-state-preview-background: light-dark(#f6eefc, #2f1e3a);
128
+ --ascribe-state-beta-color: light-dark(#0b6f8e, #56d0f0);
129
+ --ascribe-state-beta-background: light-dark(#dff4fc, #0b2f40);
130
+ --ascribe-state-deprecated-color: light-dark(#583d01, #b38c15);
131
+ --ascribe-state-deprecated-background: light-dark(#fdf1d8, #32240a);
132
+ --ascribe-state-removed-color: light-dark(#ca223c, #ed7477);
133
+ --ascribe-state-removed-background: light-dark(#ffedec, #3d1a1b);
134
134
  /* End of generated states. */
135
135
  }
136
136
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ascribed/elements",
3
- "version": "0.4.1",
4
- "description": "Ascribe's web component library for the site output.",
3
+ "version": "0.4.2",
4
+ "description": "A toolchain for documentation written as code. This package is the web components its site output uses.",
5
5
  "type": "module",
6
6
  "license": "MPL-2.0",
7
7
  "author": "Bryo Studio <hello@bryostudio.com> (https://bryostudio.com)",
@@ -10,7 +10,14 @@
10
10
  "url": "git+https://github.com/ascribed-dev/ascribe.git",
11
11
  "directory": "packages/elements"
12
12
  },
13
- "homepage": "https://github.com/ascribed-dev/ascribe/tree/main/packages/elements#readme",
13
+ "keywords": [
14
+ "ascribe",
15
+ "documentation",
16
+ "markdown",
17
+ "docs-as-code",
18
+ "web-components"
19
+ ],
20
+ "homepage": "https://ascribed-dev.com/go/elements/",
14
21
  "bugs": "https://github.com/ascribed-dev/ascribe/issues",
15
22
  "sideEffects": [
16
23
  "./dist/index.js",
@@ -32,7 +39,7 @@
32
39
  "devDependencies": {
33
40
  "@types/node": "^24.19.2",
34
41
  "axe-core": "^4.14.0",
35
- "playwright-core": "^1.64.0"
42
+ "playwright-core": "^1.64.1"
36
43
  },
37
44
  "publishConfig": {
38
45
  "access": "public"