Add a bunch of b… elements

b-element.js

@@ -0,0 +1,20 @@
+import { ArrowElement } from "arrow-html/element";
+import { css, html } from "arrow-html/utils";
+
+// https://www.w3.org/TR/html-aam-1.0/#el-b
+export class ArrowBElement extends ArrowElement {
+	static content = html`<slot></slot>`;
+	static styles = css`
+		:host {
+			font-weight: bold;
+		}
+	`;
+
+	#internals = this.attachInternals();
+
+	constructor() {
+		super();
+
+		this.#internals.role = "generic";
+	}
+}

bdi-element.js

@@ -0,0 +1,21 @@
+import { ArrowElement } from "arrow-html/element";
+import { css, html } from "arrow-html/utils";
+
+// https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-bdi-element
+// https://www.w3.org/TR/html-aam-1.0/#el-bdi
+export class ArrowBDIElement extends ArrowElement {
+	static content = html`<slot></slot>`;
+	static styles = css`
+		:host {
+			unicode-bidi: isolate;
+		}
+	`;
+
+	#internals = this.attachInternals();
+
+	constructor() {
+		super();
+
+		this.#internals.role = "generic";
+	}
+}

bdo-element.js

@@ -0,0 +1,21 @@
+import { ArrowElement } from "arrow-html/element";
+import { css, html } from "arrow-html/utils";
+
+// https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-bdo-element
+// https://www.w3.org/TR/html-aam-1.0/#el-bdo
+export class ArrowBDOElement extends ArrowElement {
+	static content = html`<slot></slot>`;
+	static styles = css`
+		:host, :host([dir]) {
+			unicode-bidi: isolate-override;
+		}
+	`;
+
+	#internals = this.attachInternals();
+
+	constructor() {
+		super();
+
+		this.#internals.role = "generic";
+	}
+}

blockquote-element.js

@@ -0,0 +1,27 @@
+import { ArrowElement } from "arrow-html/element";
+import { css, html } from "arrow-html/utils";
+
+export class ArrowBlockquoteElement extends ArrowElement {
+	static content = html`<slot></slot>`;
+	static styles = css`
+		:host {
+			display: block;
+			unicode-bidi: isolate;
+			margin-block: 1em;
+			margin-inline: 40px;
+		}
+	`;
+
+	#internals = this.attachInternals();
+
+	constructor() {
+		super();
+
+		// https://www.w3.org/TR/html-aam-1.0/#el-blockquote
+		this.#internals.role = "blockquote";
+	}
+
+	static get reflectedAttributes() {
+		return ["cite"];
+	}
+}

br-element.js

@@ -0,0 +1,15 @@
+import { ArrowElement } from "arrow-html/element";
+import { css, html } from "arrow-html/utils";
+
+// https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element
+// https://www.w3.org/TR/html-aam-1.0/#el-br
+export class ArrowBRElement extends ArrowElement {
+	static content = html`\n`;
+	// TODO: is this the right way to do this??? Can we just do this with css???
+	static styles = css`
+		:host {
+			display: contents !important;
+			white-space: pre !important;
+		}
+	`;
+}