@epa-wg/custom-element 0.0.34 → 0.0.35

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/demo/s.xslt CHANGED
@@ -14,19 +14,357 @@
14
14
  </xsl:template>
15
15
  <xsl:template mode="payload" match="attributes">
16
16
  <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
17
- <section xmlns="" data-dce-id="2">
18
- <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="cem-theme"
19
- select="document('./theme-data.xhtml')//*[@id='theme']/*"/>
20
- <dce-text data-dce-id="3">
21
- count=
22
- <xsl:value-of select="count($cem-theme)"/>
23
- </dce-text>
24
- <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="$cem-theme">
25
- <xsl:value-of select="@id"/>
26
- <xsl:value-of select="."/>
27
- </xsl:for-each>
28
- <hr data-dce-id="4"/>
29
- </section>
17
+ <div xmlns="" data-testid="whole-text" data-dce-id="2">
18
+ <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="test-data">
19
+ <h6 id="cem-color-hue-variant" tabindex="-1" data-dce-id="3">cem-color-hue-variant</h6>
20
+ <table data-dce-id="4">
21
+ <thead data-dce-id="5">
22
+ <tr data-dce-id="6">
23
+ <th data-dce-id="7">Token</th>
24
+ <th data-dce-id="8">Hue</th>
25
+ <th data-dce-id="9">Variant</th>
26
+ <th data-dce-id="10">Hex</th>
27
+ <th data-dce-id="11">Label</th>
28
+ <th data-dce-id="12">Intended use</th>
29
+ </tr>
30
+ </thead>
31
+ <tbody data-dce-id="13">
32
+ <tr data-dce-id="14">
33
+ <td data-dce-id="15">
34
+ <code data-dce-id="16">--cem-color-blue-xl</code>
35
+ </td>
36
+ <td data-dce-id="17">blue</td>
37
+ <td data-dce-id="18">xl</td>
38
+ <td data-dce-id="19">
39
+ <code data-dce-id="20">#faf9fd</code>
40
+ </td>
41
+ <td data-dce-id="21">Lightest blue</td>
42
+ <td data-dce-id="22">Comfort/trust emotion (light scene)</td>
43
+ </tr>
44
+ <tr data-dce-id="23">
45
+ <td data-dce-id="24">
46
+ <code data-dce-id="25">--cem-color-blue-l</code>
47
+ </td>
48
+ <td data-dce-id="26">blue</td>
49
+ <td data-dce-id="27">l</td>
50
+ <td data-dce-id="28">
51
+ <code data-dce-id="29">#d7e3ff</code>
52
+ </td>
53
+ <td data-dce-id="30">Light blue</td>
54
+ <td data-dce-id="31">Trust palette, attention semantic</td>
55
+ </tr>
56
+ <tr data-dce-id="32">
57
+ <td data-dce-id="33">
58
+ <code data-dce-id="34">--cem-color-blue-d</code>
59
+ </td>
60
+ <td data-dce-id="35">blue</td>
61
+ <td data-dce-id="36">d</td>
62
+ <td data-dce-id="37">
63
+ <code data-dce-id="38">#002f65</code>
64
+ </td>
65
+ <td data-dce-id="39">Dark blue</td>
66
+ <td data-dce-id="40">Trust palette (dark theme)</td>
67
+ </tr>
68
+ <tr data-dce-id="41">
69
+ <td data-dce-id="42">
70
+ <code data-dce-id="43">--cem-color-blue-xd</code>
71
+ </td>
72
+ <td data-dce-id="44">blue</td>
73
+ <td data-dce-id="45">xd</td>
74
+ <td data-dce-id="46">
75
+ <code data-dce-id="47">#1a1b1f</code>
76
+ </td>
77
+ <td data-dce-id="48">Darkest blue</td>
78
+ <td data-dce-id="49">Comfort/trust emotion (dark scene)</td>
79
+ </tr>
80
+ <tr data-dce-id="50">
81
+ <td data-dce-id="51">
82
+ <code data-dce-id="52">--cem-color-brown-xl</code>
83
+ </td>
84
+ <td data-dce-id="53">brown</td>
85
+ <td data-dce-id="54">xl</td>
86
+ <td data-dce-id="55">
87
+ <code data-dce-id="56">#d7ccc8</code>
88
+ </td>
89
+ <td data-dce-id="57">Extra light brown</td>
90
+ <td data-dce-id="58">Conservative palette (light theme)</td>
91
+ </tr>
92
+ <tr data-dce-id="59">
93
+ <td data-dce-id="60">
94
+ <code data-dce-id="61">--cem-color-brown-l</code>
95
+ </td>
96
+ <td data-dce-id="62">brown</td>
97
+ <td data-dce-id="63">l</td>
98
+ <td data-dce-id="64">
99
+ <code data-dce-id="65">#a1887f</code>
100
+ </td>
101
+ <td data-dce-id="66">Light brown</td>
102
+ <td data-dce-id="67">Conservative emotion, brand-3</td>
103
+ </tr>
104
+ <tr data-dce-id="68">
105
+ <td data-dce-id="69">
106
+ <code data-dce-id="70">--cem-color-brown-d</code>
107
+ </td>
108
+ <td data-dce-id="71">brown</td>
109
+ <td data-dce-id="72">d</td>
110
+ <td data-dce-id="73">
111
+ <code data-dce-id="74">#4e342e</code>
112
+ </td>
113
+ <td data-dce-id="75">Dark brown</td>
114
+ <td data-dce-id="76">Conservative palette (dark theme)</td>
115
+ </tr>
116
+ <tr data-dce-id="77">
117
+ <td data-dce-id="78">
118
+ <code data-dce-id="79">--cem-color-brown-xd</code>
119
+ </td>
120
+ <td data-dce-id="80">brown</td>
121
+ <td data-dce-id="81">xd</td>
122
+ <td data-dce-id="82">
123
+ <code data-dce-id="83">#3e2723</code>
124
+ </td>
125
+ <td data-dce-id="84">Extra dark brown</td>
126
+ <td data-dce-id="85">Conservative palette (dark theme, extreme)</td>
127
+ </tr>
128
+ <tr data-dce-id="86">
129
+ <td data-dce-id="87">
130
+ <code data-dce-id="88">--cem-color-cyan-xl</code>
131
+ </td>
132
+ <td data-dce-id="89">cyan</td>
133
+ <td data-dce-id="90">xl</td>
134
+ <td data-dce-id="91">
135
+ <code data-dce-id="92">#f1fefe</code>
136
+ </td>
137
+ <td data-dce-id="93">Extra light cyan</td>
138
+ <td data-dce-id="94">Used for comfort palette (light scenes)</td>
139
+ </tr>
140
+ <tr data-dce-id="95">
141
+ <td data-dce-id="96">
142
+ <code data-dce-id="97">--cem-color-cyan-l</code>
143
+ </td>
144
+ <td data-dce-id="98">cyan</td>
145
+ <td data-dce-id="99">l</td>
146
+ <td data-dce-id="100">
147
+ <code data-dce-id="101">#00fbfb</code>
148
+ </td>
149
+ <td data-dce-id="102">Light cyan</td>
150
+ <td data-dce-id="103">Calm palette, creativity accent</td>
151
+ </tr>
152
+ <tr data-dce-id="104">
153
+ <td data-dce-id="105">
154
+ <code data-dce-id="106">--cem-color-cyan-d</code>
155
+ </td>
156
+ <td data-dce-id="107">cyan</td>
157
+ <td data-dce-id="108">d</td>
158
+ <td data-dce-id="109">
159
+ <code data-dce-id="110">#006a6a</code>
160
+ </td>
161
+ <td data-dce-id="111">Dark cyan</td>
162
+ <td data-dce-id="112">Calm palette (dark theme)</td>
163
+ </tr>
164
+ <tr data-dce-id="113">
165
+ <td data-dce-id="114">
166
+ <code data-dce-id="115">--cem-color-cyan-xd</code>
167
+ </td>
168
+ <td data-dce-id="116">cyan</td>
169
+ <td data-dce-id="117">xd</td>
170
+ <td data-dce-id="118">
171
+ <code data-dce-id="119">#001010</code>
172
+ </td>
173
+ <td data-dce-id="120">Extra dark cyan</td>
174
+ <td data-dce-id="121">Used for comfort palette (dark scenes)</td>
175
+ </tr>
176
+ <tr data-dce-id="122">
177
+ <td data-dce-id="123">
178
+ <code data-dce-id="124">--cem-color-grey-l</code>
179
+ </td>
180
+ <td data-dce-id="125">grey</td>
181
+ <td data-dce-id="126">l</td>
182
+ <td data-dce-id="127">
183
+ <code data-dce-id="128">#f1f1eb</code>
184
+ </td>
185
+ <td data-dce-id="129">Light grey</td>
186
+ <td data-dce-id="130">Conservative palette, neutral backgrounds</td>
187
+ </tr>
188
+ <tr data-dce-id="131">
189
+ <td data-dce-id="132">
190
+ <code data-dce-id="133">--cem-color-grey-d</code>
191
+ </td>
192
+ <td data-dce-id="134">grey</td>
193
+ <td data-dce-id="135">d</td>
194
+ <td data-dce-id="136">
195
+ <code data-dce-id="137">#1a1c18</code>
196
+ </td>
197
+ <td data-dce-id="138">Dark grey</td>
198
+ <td data-dce-id="139">Conservative palette (dark theme)</td>
199
+ </tr>
200
+ <tr data-dce-id="140">
201
+ <td data-dce-id="141">
202
+ <code data-dce-id="142">--cem-color-orange-xl</code>
203
+ </td>
204
+ <td data-dce-id="143">orange</td>
205
+ <td data-dce-id="144">xl</td>
206
+ <td data-dce-id="145">
207
+ <code data-dce-id="146">#f0f070</code>
208
+ </td>
209
+ <td data-dce-id="147">Extra light yellow</td>
210
+ <td data-dce-id="148">Enthusiasm palette (light theme)</td>
211
+ </tr>
212
+ <tr data-dce-id="149">
213
+ <td data-dce-id="150">
214
+ <code data-dce-id="151">--cem-color-orange-l</code>
215
+ </td>
216
+ <td data-dce-id="152">orange</td>
217
+ <td data-dce-id="153">l</td>
218
+ <td data-dce-id="154">
219
+ <code data-dce-id="155">#ffe082</code>
220
+ </td>
221
+ <td data-dce-id="156">Light orange</td>
222
+ <td data-dce-id="157">Enthusiasm emotion, brand-2</td>
223
+ </tr>
224
+ <tr data-dce-id="158">
225
+ <td data-dce-id="159">
226
+ <code data-dce-id="160">--cem-color-orange-d</code>
227
+ </td>
228
+ <td data-dce-id="161">orange</td>
229
+ <td data-dce-id="162">d</td>
230
+ <td data-dce-id="163">
231
+ <code data-dce-id="164">#723600</code>
232
+ </td>
233
+ <td data-dce-id="165">Dark orange</td>
234
+ <td data-dce-id="166">Enthusiasm hype (dark theme)</td>
235
+ </tr>
236
+ <tr data-dce-id="167">
237
+ <td data-dce-id="168">
238
+ <code data-dce-id="169">--cem-color-orange-xd</code>
239
+ </td>
240
+ <td data-dce-id="170">orange</td>
241
+ <td data-dce-id="171">xd</td>
242
+ <td data-dce-id="172">
243
+ <code data-dce-id="173">#502400</code>
244
+ </td>
245
+ <td data-dce-id="174">Extra dark orange</td>
246
+ <td data-dce-id="175">Enthusiasm palette (dark theme, extreme)</td>
247
+ </tr>
248
+ <tr data-dce-id="176">
249
+ <td data-dce-id="177">
250
+ <code data-dce-id="178">--cem-color-purple-xl</code>
251
+ </td>
252
+ <td data-dce-id="179">purple</td>
253
+ <td data-dce-id="180">xl</td>
254
+ <td data-dce-id="181">
255
+ <code data-dce-id="182">#f3e5f5</code>
256
+ </td>
257
+ <td data-dce-id="183">Extra light purple</td>
258
+ <td data-dce-id="184">Creativity palette (light theme)</td>
259
+ </tr>
260
+ <tr data-dce-id="185">
261
+ <td data-dce-id="186">
262
+ <code data-dce-id="187">--cem-color-purple-l</code>
263
+ </td>
264
+ <td data-dce-id="188">purple</td>
265
+ <td data-dce-id="189">l</td>
266
+ <td data-dce-id="190">
267
+ <code data-dce-id="191">#e1bee7</code>
268
+ </td>
269
+ <td data-dce-id="192">Light purple</td>
270
+ <td data-dce-id="193">Creativity emotion, brand-1</td>
271
+ </tr>
272
+ <tr data-dce-id="194">
273
+ <td data-dce-id="195">
274
+ <code data-dce-id="196">--cem-color-purple-d</code>
275
+ </td>
276
+ <td data-dce-id="197">purple</td>
277
+ <td data-dce-id="198">d</td>
278
+ <td data-dce-id="199">
279
+ <code data-dce-id="200">#6a1b9a</code>
280
+ </td>
281
+ <td data-dce-id="201">Dark purple</td>
282
+ <td data-dce-id="202">Creativity palette (dark theme)</td>
283
+ </tr>
284
+ <tr data-dce-id="203">
285
+ <td data-dce-id="204">
286
+ <code data-dce-id="205">--cem-color-purple-xd</code>
287
+ </td>
288
+ <td data-dce-id="206">purple</td>
289
+ <td data-dce-id="207">xd</td>
290
+ <td data-dce-id="208">
291
+ <code data-dce-id="209">#4a148c</code>
292
+ </td>
293
+ <td data-dce-id="210">Extra dark purple</td>
294
+ <td data-dce-id="211">Creativity palette (dark theme, extreme)</td>
295
+ </tr>
296
+ <tr data-dce-id="212">
297
+ <td data-dce-id="213">
298
+ <code data-dce-id="214">--cem-color-red-xl</code>
299
+ </td>
300
+ <td data-dce-id="215">red</td>
301
+ <td data-dce-id="216">xl</td>
302
+ <td data-dce-id="217">
303
+ <code data-dce-id="218">#ffb4ab</code>
304
+ </td>
305
+ <td data-dce-id="219">Extra light red</td>
306
+ <td data-dce-id="220">Danger palette (light theme)</td>
307
+ </tr>
308
+ <tr data-dce-id="221">
309
+ <td data-dce-id="222">
310
+ <code data-dce-id="223">--cem-color-red-l</code>
311
+ </td>
312
+ <td data-dce-id="224">red</td>
313
+ <td data-dce-id="225">l</td>
314
+ <td data-dce-id="226">
315
+ <code data-dce-id="227">#ba1a1a</code>
316
+ </td>
317
+ <td data-dce-id="228">Light red</td>
318
+ <td data-dce-id="229">Danger emotion, alert semantic</td>
319
+ </tr>
320
+ <tr data-dce-id="230">
321
+ <td data-dce-id="231">
322
+ <code data-dce-id="232">--cem-color-red-d</code>
323
+ </td>
324
+ <td data-dce-id="233">red</td>
325
+ <td data-dce-id="234">d</td>
326
+ <td data-dce-id="235">
327
+ <code data-dce-id="236">#690005</code>
328
+ </td>
329
+ <td data-dce-id="237">Dark red</td>
330
+ <td data-dce-id="238">Danger palette (dark theme)</td>
331
+ </tr>
332
+ <tr data-dce-id="239">
333
+ <td data-dce-id="240">
334
+ <code data-dce-id="241">--cem-color-red-xd</code>
335
+ </td>
336
+ <td data-dce-id="242">red</td>
337
+ <td data-dce-id="243">xd</td>
338
+ <td data-dce-id="244">
339
+ <code data-dce-id="245">#410002</code>
340
+ </td>
341
+ <td data-dce-id="246">Extra dark red</td>
342
+ <td data-dce-id="247">Danger palette (dark theme, extreme)</td>
343
+ </tr>
344
+ </tbody>
345
+ </table>
346
+ </xsl:variable>
347
+ <label data-dce-id="248">
348
+ <input type="checkbox" data-testid="toggle-all" slice="show-all" value="ALL" data-dce-id="249"/>
349
+ <dce-text data-dce-id="250">ALL</dce-text>
350
+ </label>
351
+ <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="cem-color-hue-variant"
352
+ select="exsl:node-set($test-data)//*[@id='cem-color-hue-variant']/following-sibling::table[1]/tbody"/>
353
+ <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="all-or-nothing"
354
+ select="$cem-color-hue-variant[ //show-all = 'ALL' ]">
355
+ <dce-text data-dce-id="251">
356
+ 0
357
+ </dce-text>
358
+ <xsl:for-each select="$all-or-nothing/*">
359
+ <div data-testid="color-{position()}" data-dce-id="252">
360
+ <xsl:value-of select="./*[1]"/>
361
+ </div>
362
+ </xsl:for-each>
363
+ <dce-text data-dce-id="253">
364
+ N
365
+ </dce-text>
366
+ </xsl:variable>
367
+ </div>
30
368
  </dce-root>
31
369
  </xsl:template>
32
370
  <xsl:template match="/">
@@ -210,6 +210,129 @@
210
210
  "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/module-url.html"
211
211
  }
212
212
  ]
213
+ },
214
+ {
215
+ "name": "http-request",
216
+ "description": "Fetches data from a URL and exposes request, response, and parsed data via the value property. Supports JSON and XML response parsing.",
217
+ "attributes": [
218
+ {
219
+ "name": "url",
220
+ "description": "The URL to fetch data from. When changed, triggers a new fetch request.",
221
+ "type": "string",
222
+ "references": [
223
+ {
224
+ "name": "docs",
225
+ "url": "https://github.com/EPA-WG/custom-element"
226
+ }
227
+ ]
228
+ },
229
+ {
230
+ "name": "method",
231
+ "description": "HTTP method for the request (GET, POST, etc.)",
232
+ "type": "string",
233
+ "references": [
234
+ {
235
+ "name": "MDN docs",
236
+ "url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods"
237
+ }
238
+ ]
239
+ },
240
+ {
241
+ "name": "header-accept",
242
+ "description": "Sets the Accept header for the request. Use header-* pattern for other headers.",
243
+ "type": "string",
244
+ "references": [
245
+ {
246
+ "name": "MDN docs",
247
+ "url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept"
248
+ }
249
+ ]
250
+ },
251
+ {
252
+ "name": "slice",
253
+ "description": "slice name where the fetched data would be propagated",
254
+ "type": "string",
255
+ "references": [
256
+ {
257
+ "name": "docs",
258
+ "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/data-slices.html"
259
+ }
260
+ ]
261
+ }
262
+ ],
263
+ "references": [
264
+ {
265
+ "name": "docs",
266
+ "url": "https://github.com/EPA-WG/custom-element"
267
+ }
268
+ ]
269
+ },
270
+ {
271
+ "name": "local-storage",
272
+ "description": "Provides access to localStorage with reactive updates. Reads and writes values to localStorage by key.",
273
+ "attributes": [
274
+ {
275
+ "name": "key",
276
+ "description": "The localStorage key to read/write",
277
+ "type": "string",
278
+ "references": [
279
+ {
280
+ "name": "MDN docs",
281
+ "url": "https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage"
282
+ }
283
+ ]
284
+ },
285
+ {
286
+ "name": "type",
287
+ "description": "Value type: text, json, or input types (number, date). Defaults to text.",
288
+ "type": "string",
289
+ "references": [
290
+ {
291
+ "name": "docs",
292
+ "url": "https://github.com/EPA-WG/custom-element"
293
+ }
294
+ ]
295
+ },
296
+ {
297
+ "name": "value",
298
+ "description": "Initial value to set in localStorage. If omitted, reads existing value.",
299
+ "type": "string",
300
+ "references": [
301
+ {
302
+ "name": "docs",
303
+ "url": "https://github.com/EPA-WG/custom-element"
304
+ }
305
+ ]
306
+ },
307
+ {
308
+ "name": "live",
309
+ "description": "When present, monitors localStorage changes and updates reactively",
310
+ "type": "boolean",
311
+ "references": [
312
+ {
313
+ "name": "docs",
314
+ "url": "https://github.com/EPA-WG/custom-element"
315
+ }
316
+ ]
317
+ },
318
+ {
319
+ "name": "slice",
320
+ "description": "slice name where the localStorage value would be propagated",
321
+ "type": "string",
322
+ "references": [
323
+ {
324
+ "name": "docs",
325
+ "url": "https://unpkg.com/@epa-wg/custom-element@0/demo/data-slices.html"
326
+ }
327
+ ]
328
+ }
329
+ ],
330
+ "references": [
331
+ {
332
+ "name": "docs",
333
+ "url": "https://github.com/EPA-WG/custom-element"
334
+ }
335
+ ]
213
336
  }
214
337
  ]
215
338
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "http://json.schemastore.org/web-types",
3
3
  "name": "@epa-wg/custom-element",
4
- "version": "0.0.34",
4
+ "version": "0.0.35",
5
5
  "js-types-syntax": "typescript",
6
6
  "description-markup": "markdown",
7
7
  "contributions": {
@@ -177,6 +177,133 @@
177
177
  "attributes": [
178
178
 
179
179
  ]
180
+ },
181
+ {
182
+ "name": "http-request",
183
+ "description": "Fetches data from a URL and exposes request, response, and parsed data via the value property. Supports JSON and XML response parsing.",
184
+ "doc-url": "https://github.com/EPA-WG/custom-element",
185
+ "attributes": [
186
+ {
187
+ "name": "url",
188
+ "description": "The URL to fetch data from. When changed, triggers a new fetch request.",
189
+ "required": false,
190
+ "doc-url": "https://github.com/EPA-WG/custom-element",
191
+ "value": {
192
+ "type": "string"
193
+ }
194
+ },
195
+ {
196
+ "name": "method",
197
+ "description": "HTTP method for the request (GET, POST, etc.)",
198
+ "required": false,
199
+ "doc-url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods",
200
+ "value": {
201
+ "type": "string"
202
+ }
203
+ },
204
+ {
205
+ "name": "header-accept",
206
+ "description": "Sets the Accept header for the request. Use header-* pattern for other headers.",
207
+ "required": false,
208
+ "doc-url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept",
209
+ "value": {
210
+ "type": "string"
211
+ }
212
+ },
213
+ {
214
+ "name": "slice",
215
+ "description": "slice name where the fetched data would be propagated",
216
+ "required": false,
217
+ "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/data-slices.html",
218
+ "value": {
219
+ "type": "string"
220
+ }
221
+ }
222
+ ],
223
+ "js": {
224
+ "events": [
225
+ {
226
+ "name": "change",
227
+ "description": "Emitted when request, response, or data changes"
228
+ }
229
+ ],
230
+ "properties": [
231
+ {
232
+ "name": "value",
233
+ "type": "object",
234
+ "default": "{}",
235
+ "description": "Object containing request, response, and data properties"
236
+ }
237
+ ]
238
+ }
239
+ },
240
+ {
241
+ "name": "local-storage",
242
+ "description": "Provides access to localStorage with reactive updates. Reads and writes values to localStorage by key.",
243
+ "doc-url": "https://github.com/EPA-WG/custom-element",
244
+ "attributes": [
245
+ {
246
+ "name": "key",
247
+ "description": "The localStorage key to read/write",
248
+ "required": true,
249
+ "doc-url": "https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage",
250
+ "value": {
251
+ "type": "string"
252
+ }
253
+ },
254
+ {
255
+ "name": "type",
256
+ "description": "Value type: text, json, or input types (number, date). Defaults to text.",
257
+ "required": false,
258
+ "doc-url": "https://github.com/EPA-WG/custom-element",
259
+ "value": {
260
+ "type": "string"
261
+ }
262
+ },
263
+ {
264
+ "name": "value",
265
+ "description": "Initial value to set in localStorage. If omitted, reads existing value.",
266
+ "required": false,
267
+ "doc-url": "https://github.com/EPA-WG/custom-element",
268
+ "value": {
269
+ "type": "string"
270
+ }
271
+ },
272
+ {
273
+ "name": "live",
274
+ "description": "When present, monitors localStorage changes and updates reactively",
275
+ "required": false,
276
+ "doc-url": "https://github.com/EPA-WG/custom-element",
277
+ "value": {
278
+ "type": "boolean"
279
+ }
280
+ },
281
+ {
282
+ "name": "slice",
283
+ "description": "slice name where the localStorage value would be propagated",
284
+ "required": false,
285
+ "doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/data-slices.html",
286
+ "value": {
287
+ "type": "string"
288
+ }
289
+ }
290
+ ],
291
+ "js": {
292
+ "events": [
293
+ {
294
+ "name": "change",
295
+ "description": "Emitted when the localStorage value changes"
296
+ }
297
+ ],
298
+ "properties": [
299
+ {
300
+ "name": "value",
301
+ "type": "any",
302
+ "default": "",
303
+ "description": "The current value from localStorage, parsed according to type attribute"
304
+ }
305
+ ]
306
+ }
180
307
  }
181
308
  ]
182
309
  }