@pageboard/html 0.11.29 → 0.12.0

package/elements/accordion.js

@@ -1,5 +1,4 @@
 exports.accordion = {
-	priority: 2, // scripts must run after 'query' scripts
 	title: "Accordion",
 	icon: '<i class="caret right icon"></i>',
 	menu: 'widget',

package/elements/card.js

@@ -46,7 +46,7 @@ exports.cards = {
 			default: 'stackable'
 		}
 	},
-	html: '<div class="ui [columns|num] [shape] [responsive] cards"></div>',
+	html: '<div class="ui [columns|as:colnums] [shape] [responsive] cards"></div>',
 	stylesheets: [
 		'../ui/card.css'
 	]
@@ -88,8 +88,8 @@ exports.card = {
 		nodes: 'paragraph+',
 		title: 'extra'
 	}],
-	html: `<div class="ui [fluid|?] [centered|?] card">
-		<div class="image [image|?::hidden]" block-content="image"></div>
+	html: `<div class="ui [fluid] [centered] card">
+		<div class="image [image|alt::hidden]" block-content="image"></div>
 		<div class="content" block-content="content"></div>
 		<div class="extra content" block-content="extra"></div>
 	</div>`
@@ -143,8 +143,8 @@ exports.cardlink = {
 		nodes: 'paragraph_nolink+',
 		title: 'extra'
 	}],
-	html: `<a href="[url]" class="ui [fluid|?] [centered|?] card">
-		<div class="image [image|?::hidden]" block-content="image"></div>
+	html: `<a href="[url]" class="ui [fluid] [centered] card">
+		<div class="image [image|alt::hidden]" block-content="image"></div>
 		<div class="content" block-content="content"></div>
 		<div class="extra content" block-content="extra"></div>
 	</a>`

package/elements/consent.js

@@ -20,7 +20,7 @@ exports.consent_form = {
 		'content.': 'content.content'
 	},
 	html: `<form is="element-consent" class="ui form" data-transient="[transient]">
-		<x[transient|?:template:div|fill] block-content="content"></x[transient|?:template:div|fill]>
+		<x[transient|alt:template:div|at:-] block-content="content"></x[transient|alt:template:div|at:-]>
 	</form>`,
 	scripts: ['../ui/storage.js', '../ui/consent.js'],
 	stylesheets: ['../ui/consent.css']

package/elements/embed.js

@@ -25,7 +25,7 @@ exports.embed = {
 		};
 	},
 	tag: 'iframe,element-embed',
-	html: `<element-embed class="ui embed" data-src="[url]" id="[name|id]"></element-embed>`,
+	html: `<element-embed class="ui embed" data-src="[url]" id="[name|as:xid]"></element-embed>`,
 	scripts: [
 		'../ui/embed.js'
 	],

package/elements/fieldsets.js

@@ -29,7 +29,7 @@ exports.fieldset = {
 		}
 	},
 	contents: "fieldset_legend block+",
-	html: '<fieldset class="[plain|?]" data-name="[name|split:.|slice:1|join:.]" data-value="[value]" is="element-fieldset"></fieldset>',
+	html: '<fieldset class="[plain]" data-name="[name|split:.|slice:1|join:.]" data-value="[value]" is="element-fieldset"></fieldset>',
 	scripts: ["../ui/fieldset.js"],
 	stylesheets: ['../ui/fieldset.css']
 };
@@ -104,7 +104,7 @@ exports.fieldlist_button = {
 		nodes: "inline*",
 		marks: "nolink"
 	},
-	html: '<button type="button" class="ui [full|?:fluid:] button" value="[type]">Label</button>',
+	html: '<button type="button" class="ui [full|alt:fluid:] button" value="[type]">Label</button>',
 	stylesheets: [
 		'../lib/components/button.css',
 	]

package/elements/form.js

@@ -168,12 +168,12 @@ exports.api_form = {
 	tag: 'form[method="post"]',
 	html: `<form is="element-form" method="post" name="[name]"
 		action="/.api/form/[$id]"
-		parameters="[$expr.action.parameters|templates:$query]"
+		parameters="[$expr?.action?.parameters|templates:$query]"
 		success="[redirection|urltpl:url:parameters]"
 		badrequest="[badrequest|urltpl:url:parameters]"
 		unauthorized="[unauthorized|urltpl:url:parameters]"
 		notfound="[notfound|urltpl:url:parameters]"
-		class="ui form [hidden|?]"></form>`,
+		class="ui form [hidden]"></form>`,
 	stylesheets: [
 		'../lib/components/form.css',
 		'../ui/form.css'

package/elements/grid.js

@@ -43,7 +43,7 @@ exports.grid = {
 			maximum: 16
 		}
 	},
-	html: '<div class="ui [responsive] [width|neq:min:equal width:] [columns|num: columns] grid [width|eq:contained:container]"></div>',
+	html: '<div class="ui [responsive] [width|eq:min|alt::equal width] [columns|as:colnums|post: columns] grid [width|switch:contained:container]"></div>',
 	stylesheets: [
 		'../lib/components/grid.css'
 	]
@@ -64,7 +64,7 @@ exports.grid_column = {
 		}
 	},
 	contents: "block+|card",
-	html: '<div class="[width|num: wide] column"></div>'
+	html: '<div class="[width|as:colnums|post: wide] column"></div>'
 };
 
 exports.grid_row = {
@@ -95,5 +95,5 @@ exports.grid_row = {
 			maximum: 16
 		}
 	},
-	html: '<div class="[responsive] [columns|num: columns] row"></div>'
+	html: '<div class="[responsive] [columns|as:colnums|post: columns] row"></div>'
 };

package/elements/heading.js

@@ -56,7 +56,7 @@ exports.heading = {
 	icon: '<i class="icon header"></i>',
 	tag: 'h1,h2,h3,h4,h5,h6',
 	html: `<h[level] class="ui [align|or:left] aligned header" is="h[level]-helper" id="[id]" entitled="[entitled]">
-		<a aria-hidden="true" href="[$loc.pathname][$loc.search][id|pre:#]">[linkable|bmagnet]#</a>
+		<a aria-hidden="true" href="[$loc.pathname][$loc.search][id|pre:#]">[linkable|prune:*]#</a>
 		<div block-content="text">Heading</div>
 	</hn>`,
 	parse: function (dom) {

package/elements/image.js

@@ -281,10 +281,10 @@ exports.inlineImage = {
 		data-src="[url]"
 		data-crop="[crop.x];[crop.y];[crop.width];[crop.height];[crop.zoom]"
 		alt="" class="ui inline image
-		[display.avatar|?]
-		[display.rounded|?]
-		[display.circular|?]
-		[display.spaced|?]
+		[display.avatar]
+		[display.rounded]
+		[display.circular]
+		[display.spaced]
 		[display.floated|pre:floated ]
 		[display.align|post: aligned]" />`,
 	stylesheets: [

package/elements/input-date.js

@@ -52,7 +52,6 @@ exports.input_date_time = {
 		step: {
 			title: 'Time steps',
 			description: 'Ignored for dates',
-			type: 'integer',
 			default: null,
 			anyOf: [{
 				const: null,
@@ -85,8 +84,8 @@ exports.input_date_time = {
 		<label block-content="label">Label</label>
 		<input is="element-input-date"
 			name="[name]" disabled="[disabled]" placeholder="[placeholder]"
-			required="[required]" value="[value]" step="[step|magnet:]"
-			type="[format|eq:datetime:datetime-local]"
+			required="[required]" value="[value]" step="[step]"
+			type="[format|switch:datetime:datetime-local]"
 		/>
 	</div>`,
 	scripts: [
@@ -147,7 +146,7 @@ exports.input_date_slot = {
 	},
 	html: `<div class="field">
 		<label block-content="label">Label</label>
-		<element-input-date-slot type="[format|eq:datetime:datetime-local]" step="[step|magnet:]">
+		<element-input-date-slot type="[format|switch:datetime:datetime-local]" step="[step]">
 			<input is="element-input-date" name="[nameStart]" value="[valueStart]" />
 			<input is="element-input-date" name="[nameEnd]" value="[valueEnd]" />
 		</element-input-date-slot>

package/elements/inputs.js

@@ -49,7 +49,7 @@ exports.input_button = {
 			default: false
 		}
 	},
-	html: '<button type="[type]" disabled="[disabled]" class="ui [full|?:fluid:] button" name="[name]" value="[value]">[type|schema:title]</button>',
+	html: '<button type="[type]" disabled="[disabled]" class="ui [full|alt:fluid:] button" name="[name]" value="[value]">[type|schema:title]</button>',
 	stylesheets: [
 		'../lib/components/button.css',
 	]
@@ -69,7 +69,7 @@ exports.input_fields = {
 		}
 	},
 	contents: "(input_text|input_range|input_checkbox|input_radio|input_select|input_button)+",
-	html: `<div class="[inline|?] fields"></div>`
+	html: `<div class="[inline] fields"></div>`
 };
 
 exports.input_text = {
@@ -160,24 +160,24 @@ exports.input_text = {
 		tel: /^(\(\d+\))? *\d+([ .-]?\d+)*$/.source,
 		email: /^[\w.!#$%&'*+/=?^`{|}~-]+@\w(?:[\w-]{0,61}\w)?(?:\.\w(?:[\w-]{0,61}\w)?)*$/.source
 	},
-	html: `<div class="[width|num: wide] field [type|eq:hidden:hidden:]">
+	html: `<div class="[width|as:colnums|post: wide] field [type|eq:hidden|or:]">
 		<label block-content="label">Label</label>
-		<textarea
+		[type|eq:textarea|prune:*:1]<textarea
 			name="[name]"
 			required="[required]"
 			readonly="[readonly]"
 			disabled="[disabled]"
 			placeholder="[placeholder]"
-		>[value|br]</textarea>[type|eq:textarea|bmagnet:+*]
-		<input name="[name]"
+		>[value|as:text]</textarea>
+		[type|neq:textarea|prune:*:1]<input name="[name]"
 			required="[required]"
 			readonly="[readonly]"
 			disabled="[disabled]"
 			placeholder="[placeholder]"
-			type="[type|eq:new-password:password]"
-			pattern="[$element.patterns.[type]|ornull]"
+			type="[type|switch:new-password:password]"
+			pattern="[$element.patterns.[type]]"
 			value="[value]"
-			autocomplete="[type|neq:new-password:|not]" />[type|neq:textarea|bmagnet:+*]
+			autocomplete="[type|eq:new-password|fail:]" />
 	</div>`
 };
 
@@ -213,7 +213,7 @@ exports.input_number = {
 		id: 'label',
 		nodes: 'inline*'
 	},
-	html: `<div class="[width|num: wide] field">
+	html: `<div class="field">
 		<label block-content="label">Label</label>
 		<input name="[name]"
 			required="[required]"
@@ -320,7 +320,7 @@ exports.input_checkbox = {
 		nodes: 'inline*'
 	},
 	html: `<div class="field">
-		<div class="ui [toggle|?] checkbox">
+		<div class="ui [toggle] checkbox">
 			<input type="checkbox" required="[required]" disabled="[disabled]"
 				name="[name]" value="[value]" checked="[checked]"
 				id="for-[name][value|or:|pre:-]-[$id|slice:0:6]" />
@@ -433,7 +433,7 @@ exports.input_select = {
 	}],
 	html: `<div class="field">
 		<label block-content="label">Label</label>
-		<element-select class="ui selection dropdown [multiple|?]"
+		<element-select class="ui selection dropdown [multiple]"
 			data-name="[name]" data-disabled="[disabled]" data-required="[required]"
 			data-multiple="[multiple]" data-placeholder="[placeholder]"
 			data-value="[value]"

package/elements/layout.js

@@ -281,20 +281,19 @@ exports.layout = {
 	contents: "block+",
 	group: 'block',
 	html: `<div class="layout
-		[width|eq:full:fullwidth:]
-		[width|eq:contained:ui container:]
-		[horizontal|?]
-		[vertical|?]
+		[width|switch:full:fullwidth:contained:ui container]
+		[horizontal]
+		[vertical]
 		[direction]
-		[invert|?:inverted]"
+		[invert|alt:inverted]"
 		is="element-layout"
-		style-margin-block="[margins.block|eq:0:|not|magnet][margins.blockUnits]"
-		style-margin-inline="[margins.inline|eq:0:|not|magnet][margins.inlineUnits]"
-		style-height="[height|eq:0:|not|magnet][heightUnits]"
+		style-margin-block="[margins.block|fail:][margins.blockUnits]"
+		style-margin-inline="[margins.inline|fail:][margins.inlineUnits]"
+		style-height="[height|fail:][heightUnits]"
 		data-src="[background.image]"
 		data-crop="[background.crop.x];[background.crop.y];[background.crop.width];[background.crop.height];[background.crop.zoom]"
 		data-size="[background.size]"
-		data-repeat="[background.repeat|?]"
+		data-repeat="[background.repeat]"
 		data-attachment="[background.attachment]"
 		data-position="[background.position]"
 	></div>`,

package/elements/link.js

@@ -27,7 +27,7 @@ exports.link = {
 	inline: true,
 	group: "inline",
 	tag: 'a:not([block-type]),a[block-type="link"]',
-	html: '<a href="[url|autolink]" class="[button|?:ui button]"></a>',
+	html: '<a href="[url]" class="[button|alt:ui button]"></a>',
 	stylesheets: [
 		'../lib/components/button.css'
 	]

package/elements/menu.js

@@ -62,7 +62,7 @@ exports.menu_group = {
 	},
 	html: `<element-menu class="[position] menu">
 		<div block-content="items"></div>
-		<div tabindex="0" class="ui fixed popup item [responsive|eq:popup|bmagnet:*]">
+		<div tabindex="0" class="ui fixed popup item [responsive|eq:popup|prune:*]">
 			<div class="icon">≡</div>
 			<div class="dropdown placer"><div class="menu"></div></div>
 		</div>
@@ -110,7 +110,7 @@ exports.menu_item_link = {
 		marks: "nolink"
 	},
 	group: 'menu_item',
-	html: '<a class="[labeled|?] item" href="[url|autolink]">Link</a>'
+	html: '<a class="[labeled] item" href="[url]">Link</a>'
 };
 
 exports.menu_item_block = { ...exports.menu_item_link,
@@ -140,7 +140,7 @@ exports.menu_item_text = {
 		nodes: "inline*"
 	},
 	group: 'menu_item',
-	html: '<div class="[labeled|?] item">Text</div>'
+	html: '<div class="[labeled] item">Text</div>'
 };
 
 exports.menu_item_dropdown = {
@@ -177,8 +177,8 @@ exports.menu_item_dropdown = {
 		}
 	},
 	group: "menu_item",
-	html: `<div tabindex="0" class="ui simple [position] dropdown item [focused|?:active]">
-		<div class="title [icon|?:caret-icon]" block-content="title">Dropdown</div>
+	html: `<div tabindex="0" class="ui simple [position] dropdown item [focused|and:active]">
+		<div class="title [icon|and:caret-icon]" block-content="title">Dropdown</div>
 		<div class="menu" block-content="items"></div>
 	</div>`,
 	stylesheets: [
@@ -232,8 +232,8 @@ exports.menu_item_popup = {
 		}
 	},
 	group: "menu_item",
-	html: `<div tabindex="0" class="ui [position] [fixed|?] popup item">
-		<div class="title [icon|?:caret-icon]" block-content="title">Popup</div>
+	html: `<div tabindex="0" class="ui [position] [fixed] popup item">
+		<div class="title [icon|alt:caret-icon]" block-content="title">Popup</div>
 		<div class="placer">
 			<div block-content="content"></div>
 		</div>

package/elements/navigation.js

@@ -20,20 +20,7 @@ exports.nav = {
 		}
 	},
 	group: "block",
-	html: `<a class="ui icon button [url|!?:disabled]" href="[url]" title="[title]">
-		<i class="icon [rel]"></i>
-	</a>`,
-	fuse: function(node, d, scope) {
-		let obj = (scope.$links || {})[d.relation] || {};
-		if (d.relation == "up") {
-			if (obj.length) obj = obj[0];
-		}
-		node.fuse({
-			url: obj.url,
-			title: obj.title,
-			rel: d.relation,
-		}, scope);
-	}
+	html: `<a class="ui icon button [$links.[relation]|as:array|.first|alt::disabled]" href="[$links.[relation]|as:array|.first.url]" title="[$links.[relation]|as:array|.first.title]"><i class="icon [rel]"></i></a>`
 };
 
 exports.scrollLink = {
@@ -69,9 +56,9 @@ exports.breadcrumb = {
 	group: "block",
 	html: `<nav class="ui breadcrumb">
 		<div class="divider"></div>
-		<a href="[$links.up.url|reverse|repeat:+a:link:-1]" class="section">[link.title]</a>
+		<a href="[$links.up|nth:-1|at:a::1|repeat:link]" class="section">[link.title]</a>
 		<div class="divider"></div>
-		<div class="active section">[$page.data.title|magnet:+div]</div>
+		<div class="active section">[$page.data.title|fail:div::1]</div>
 	</nav>`,
 	stylesheets: [
 		'../lib/components/breadcrumb.css'

package/elements/pagination.js

@@ -28,7 +28,7 @@ exports.pagination = {
 		},
 	},
 	contents: "inline*",
-	html: `<a class="ui button pagination" is="element-pagination" data-dir="[dir]" data-fetch="[fetch]">[dir|eq:1:Next:Prev]</a>`,
+	html: `<a class="ui button pagination" is="element-pagination" data-dir="[dir]" data-fetch="[fetch]">[dir|switch:+:Next:-:Prev]</a>`,
 	scripts: [
 		'../ui/pagination.js'
 	]

package/elements/paragraph.js

@@ -80,7 +80,7 @@ exports.segment = {
 	contents: "block+",
 	group: "block",
 	icon: '<b class="icon">Seg</b>',
-	html: '<div class="ui [raised|?] [disabled|?] [inverted|?] [padded|?] [compact|?] [circular|?] [basic|?] [attached|eq:both:%20|post:%20attached] [align|post:%20aligned] segment"></div>',
+	html: '<div class="ui [raised] [disabled] [inverted] [padded] [compact] [circular] [basic] [attached|switch:both: |post: attached] [align|post: aligned] segment"></div>',
 	stylesheets: [
 		'../lib/components/segment.css'
 	]
@@ -113,7 +113,7 @@ exports.divider = {
 			default: false
 		}
 	},
-	html: '<div class="ui divider [ruler|!?:hidden] [large|?:section] [clearing|?] [fitted|?]"></div>',
+	html: '<div class="ui divider [ruler|or:hidden] [large|alt:section] [clearing] [fitted]"></div>',
 	stylesheets: [
 		'../lib/components/divider.css'
 	]

package/elements/sitemap.js

@@ -49,18 +49,18 @@ exports.sitemap = {
 			},
 			alias: name,
 			context: 'sitemap/ | sitepage/',
-			html: `<element-sitepage class="item [leaf|!?:fold]" data-url="[url]" data-index="[index]">
-				<div class="title [leaf|!?:caret-icon]">
+			html: `<element-sitepage class="item [leaf|alt::fold]" data-url="[url]" data-index="[index]">
+				<div class="title [leaf|alt::caret-icon]">
 					<span class="header">[title|or:Untitled]</span>
-					<span class="ui mini type label">[$grants.webmaster|bmagnet:*][$type]</span>
-					<span class="ui mini black label">[$grants.webmaster|bmagnet:*][nositemap|bmagnet:*]no sitemap</span>
-					<span class="ui mini orange label">[$grants.webmaster|bmagnet:*][noindex|bmagnet:*]no index</span>
-					<span class="ui mini red label">[$grants.webmaster|bmagnet:*][$lock.read|magnet:*]</span>
+					<span class="ui mini type label">[$grants.webmaster|prune:*][$type]</span>
+					<span class="ui mini black label">[$grants.webmaster|prune:*][nositemap|prune:*]no sitemap</span>
+					<span class="ui mini orange label">[$grants.webmaster|prune:*][noindex|prune:*]no index</span>
+					<span class="ui mini red label">[$grants.webmaster|prune:*][$lock?.read|fail:*]</span>
 					<br>
 					<a href="[url]" class="description">[url|or:-]</a>
-					<a href="[redirect|magnet:*]" class="redirection"> ➜ [redirect]</a>
+					<a href="[redirect|fail:*]" class="redirection"> ➜ [redirect]</a>
 				</div>
-				<div class="list content [leaf|!|bmagnet:*]" block-content="children"></div>
+				<div class="list content [leaf|not:prune:*]" block-content="children"></div>
 			</element-sitepage>`
 		};
 	}

package/elements/sticky.js

@@ -21,7 +21,7 @@ exports.sticky = {
 		}
 	},
 	contents: "block+",
-	html: '<element-sticky data-collapsed="[collapsed|magnet]" data-position="[position]"></element-sticky>',
+	html: '<element-sticky data-collapsed="[collapsed|fail:]" data-position="[position]"></element-sticky>',
 	stylesheets: [
 		'../ui/sticky.css'
 	]
@@ -43,7 +43,7 @@ exports.header.properties.autohide = {
 exports.header.fragments.push({
 	attributes: {
 		"is": "element-sticky-nav",
-		"class": "[collapsed|?] [autohide|?]"
+		"class": "[collapsed] [autohide]"
 	}
 });
 exports.header.stylesheets.push('../ui/sticky.css');

package/elements/tab.js

@@ -20,7 +20,7 @@ exports.tabs = {
 		title: 'Tabs',
 		nodes: "tab+"
 	}],
-	html: `<element-tabs id="[name|id]">
+	html: `<element-tabs id="[name|as:xid]">
 		<div class="ui top attached tabular menu" block-content="items"></div>
 		<div block-content="tabs"></div>
 	</element-tabs>`,

package/elements/table.js

@@ -52,15 +52,15 @@ exports.table = {
 		}
 	},
 	html: `<table class="ui table
-		[definition|?]
+		[definition]
 		[single|?|post: line]
-		[unstackable|?]
-		[selectable|?]
-		[striped|?]
-		[celled|?]
-		[basic|?]
-		[collapsing|?]
-		[compact|?]"
+		[unstackable]
+		[selectable]
+		[striped]
+		[celled]
+		[basic]
+		[collapsing]
+		[compact]"
 	></table>`,
 	stylesheets: [
 		'../lib/components/table.css'
@@ -171,7 +171,7 @@ exports.table_cell = {
 		if (dom.matches('.selectable')) d.selectable = true;
 		return d;
 	},
-	html: '<td class="[align|post: aligned] [selectable|?]" rowspan="[rowspan]" colspan="[colspan]"></td>'
+	html: '<td class="[align|post: aligned] [selectable]" rowspan="[rowspan]" colspan="[colspan]"></td>'
 };
 
 exports.table_head_cell = {
@@ -206,6 +206,6 @@ exports.table_head_cell = {
 	contents: "block+",
 	tag: 'th',
 	inplace: true,
-	html: '<th class="[align|post: aligned] [width|num: wide]" rowspan="[rowspan]" colspan="[colspan]"></th>'
+	html: '<th class="[align|post: aligned] [width|as:colnums|post: wide]" rowspan="[rowspan]" colspan="[colspan]"></th>'
 };
 

package/elements/template.js

@@ -6,7 +6,7 @@ exports.fetch.fragments.push({
 
 exports.message.fragments.push({
 	attributes: {
-		className: '[inverted|?]'
+		className: '[inverted]'
 	}
 });
 

package/lib/nouislider.js

@@ -959,6 +959,7 @@
             else if (handleNumber === options.handles - 1) {
                 addClass(handle, options.cssClasses.handleUpper);
             }
+            origin.handle = handle;
             return origin;
         }
         // Insert nodes for connect elements
@@ -1022,6 +1023,31 @@
             var handleOrigin = scope_Handles[handleNumber];
             return handleOrigin.hasAttribute("disabled");
         }
+        function disable(handleNumber) {
+            if (handleNumber !== null && handleNumber !== undefined) {
+                scope_Handles[handleNumber].setAttribute("disabled", "");
+                scope_Handles[handleNumber].handle.removeAttribute("tabindex");
+            }
+            else {
+                scope_Target.setAttribute("disabled", "");
+                scope_Handles.forEach(function (handle) {
+                    handle.handle.removeAttribute("tabindex");
+                });
+            }
+        }
+        function enable(handleNumber) {
+            if (handleNumber !== null && handleNumber !== undefined) {
+                scope_Handles[handleNumber].removeAttribute("disabled");
+                scope_Handles[handleNumber].handle.setAttribute("tabindex", "0");
+            }
+            else {
+                scope_Target.removeAttribute("disabled");
+                scope_Handles.forEach(function (handle) {
+                    handle.removeAttribute("disabled");
+                    handle.handle.setAttribute("tabindex", "0");
+                });
+            }
+        }
         function removeTooltips() {
             if (scope_Tooltips) {
                 removeEvent("update" + INTERNAL_EVENT_NS.tooltips);
@@ -2199,6 +2225,8 @@
             set: valueSet,
             setHandle: valueSetHandle,
             reset: valueReset,
+            disable: disable,
+            enable: enable,
             // Exposed for unit testing, don't use this in your application.
             __moveHandles: function (upward, proposal, handleNumbers) {
                 moveHandles(upward, proposal, scope_Locations, handleNumbers);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.11.29",
+  "version": "0.12.0",
   "description": "",
   "main": "index.js",
   "repository": {

package/ui/accordion.js

@@ -1,4 +1,4 @@
-class HTMLElementAccordion extends VirtualHTMLElement {
+class HTMLElementAccordion extends Page.Element {
 	handleClick(e) {
 		const title = e.target.closest('.title');
 		if (!title) return;
@@ -7,36 +7,18 @@ class HTMLElementAccordion extends VirtualHTMLElement {
 		const owner = fold.closest('element-accordion');
 		if (owner != this) return;
 		if (e.target.closest("a[href]") == null) e.preventDefault();
-		HTMLElementAccordion.toggle(title);
+		this.constructor.toggle(title);
 	}
 	static toggle(title) {
-		const id = title.parentNode.id;
 		const content = title.nextElementSibling;
 		if (title.matches('.active')) {
-			if (id) delete HTMLElementAccordion.folds[id];
 			title.classList.remove('active');
 			if (content) content.classList.remove('active');
 		} else {
-			if (id) HTMLElementAccordion.folds[id] = true;
 			title.classList.add('active');
 			if (content) content.classList.add('active');
 		}
 	}
-	static refreshAll() {
-		for (const id of Object.keys(HTMLElementAccordion.folds)) {
-			const node = document.getElementById(id);
-			if (!node) delete HTMLElementAccordion.folds[id];
-			const title = node.querySelector('.title');
-			HTMLElementAccordion.toggle(title);
-		}
-	}
 }
 
-HTMLElementAccordion.folds = {};
-
-Page.setup(() => {
-	VirtualHTMLElement.define('element-accordion', HTMLElementAccordion);
-	HTMLElementAccordion.refreshAll();
-});
-
-Page.patch(() => HTMLElementAccordion.refreshAll());
+Page.define('element-accordion', HTMLElementAccordion);

package/ui/consent.css

@@ -14,7 +14,7 @@ footer [block-type="consent_form"][data-transient="true"] {
 	display:none;
 }
 
-[contenteditable] [block-type="consent_form"][data-transient="true"],
-[block-type="consent_form"][data-transient="true"] > template {
-	display:block;
+[contenteditable] [block-focused="last"] > .form[block-type="consent_form"][data-transient="true"],
+.form[block-type="consent_form"][data-transient="true"][block-focused] {
+	display: block;
 }