@api-client/ui 0.5.2 → 0.5.4

package/build/src/md/dialog/ui-confirm-dialog.d.ts

@@ -0,0 +1,48 @@
+import type { CSSResultOrNative } from 'lit';
+import Element from './internals/ConfirmDialog.js';
+/**
+ * A simple Material Design 3 styled confirm dialog component.
+ *
+ * This dialog is designed specifically for confirmation workflows where users
+ * need to confirm or dismiss an action. It provides a clean, accessible interface
+ * with customizable button labels and content.
+ *
+ * **Features:**
+ * - Material Design 3 styling
+ * - Customizable confirm and dismiss button labels
+ * - Modal by default
+ * - Accessible keyboard navigation
+ * - Slot-based content structure
+ *
+ * **Usage:**
+ * ```html
+ * <ui-confirm-dialog .open="${showDialog}" @close="${handleClose}">
+ *   <span slot="title">Confirm Action</span>
+ *   <p>Are you sure you want to proceed with this action?</p>
+ * </ui-confirm-dialog>
+ * ```
+ *
+ * **Customizing Button Labels:**
+ * ```html
+ * <ui-confirm-dialog
+ *   confirmLabel="Delete"
+ *   dismissLabel="Keep"
+ *   .open="${showDialog}"
+ * >
+ *   <span slot="title">Delete Item</span>
+ *   <p>This action cannot be undone.</p>
+ * </ui-confirm-dialog>
+ * ```
+ *
+ * @slot title - The dialog title
+ * @slot - The main content body
+ */
+export declare class UiConfirmDialogElement extends Element {
+    static styles: CSSResultOrNative[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-confirm-dialog': UiConfirmDialogElement;
+    }
+}
+//# sourceMappingURL=ui-confirm-dialog.d.ts.map

package/build/src/md/dialog/ui-confirm-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-confirm-dialog.d.ts","sourceRoot":"","sources":["../../../../src/md/dialog/ui-confirm-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,8BAA8B,CAAA;AAGlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,sBAAuB,SAAQ,OAAO;IACjD,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAiB;CAC7D;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,sBAAsB,CAAA;KAC5C;CACF"}

package/build/src/md/dialog/ui-confirm-dialog.js

@@ -0,0 +1,64 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import Element from './internals/ConfirmDialog.js';
+import dialogStyles from './internals/Dialog.styles.js';
+/**
+ * A simple Material Design 3 styled confirm dialog component.
+ *
+ * This dialog is designed specifically for confirmation workflows where users
+ * need to confirm or dismiss an action. It provides a clean, accessible interface
+ * with customizable button labels and content.
+ *
+ * **Features:**
+ * - Material Design 3 styling
+ * - Customizable confirm and dismiss button labels
+ * - Modal by default
+ * - Accessible keyboard navigation
+ * - Slot-based content structure
+ *
+ * **Usage:**
+ * ```html
+ * <ui-confirm-dialog .open="${showDialog}" @close="${handleClose}">
+ *   <span slot="title">Confirm Action</span>
+ *   <p>Are you sure you want to proceed with this action?</p>
+ * </ui-confirm-dialog>
+ * ```
+ *
+ * **Customizing Button Labels:**
+ * ```html
+ * <ui-confirm-dialog
+ *   confirmLabel="Delete"
+ *   dismissLabel="Keep"
+ *   .open="${showDialog}"
+ * >
+ *   <span slot="title">Delete Item</span>
+ *   <p>This action cannot be undone.</p>
+ * </ui-confirm-dialog>
+ * ```
+ *
+ * @slot title - The dialog title
+ * @slot - The main content body
+ */
+let UiConfirmDialogElement = (() => {
+    let _classDecorators = [customElement('ui-confirm-dialog')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Element;
+    var UiConfirmDialogElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiConfirmDialogElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [dialogStyles];
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UiConfirmDialogElement = _classThis;
+})();
+export { UiConfirmDialogElement };
+//# sourceMappingURL=ui-confirm-dialog.js.map

package/build/src/md/dialog/ui-confirm-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-confirm-dialog.js","sourceRoot":"","sources":["../../../../src/md/dialog/ui-confirm-dialog.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,8BAA8B,CAAA;AAClD,OAAO,YAAY,MAAM,8BAA8B,CAAA;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;IAEU,sBAAsB;4BADlC,aAAa,CAAC,mBAAmB,CAAC;;;;sBACS,OAAO;sCAAf,SAAQ,WAAO;;;;YAAnD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,YAAY,CAAC,CAAA;;YADjD,uDAAsB;;;;;SAAtB,sBAAsB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/ConfirmDialog.js'\nimport dialogStyles from './internals/Dialog.styles.js'\n\n/**\n * A simple Material Design 3 styled confirm dialog component.\n *\n * This dialog is designed specifically for confirmation workflows where users\n * need to confirm or dismiss an action. It provides a clean, accessible interface\n * with customizable button labels and content.\n *\n * **Features:**\n * - Material Design 3 styling\n * - Customizable confirm and dismiss button labels\n * - Modal by default\n * - Accessible keyboard navigation\n * - Slot-based content structure\n *\n * **Usage:**\n * ```html\n * <ui-confirm-dialog .open=\"${showDialog}\" @close=\"${handleClose}\">\n *   <span slot=\"title\">Confirm Action</span>\n *   <p>Are you sure you want to proceed with this action?</p>\n * </ui-confirm-dialog>\n * ```\n *\n * **Customizing Button Labels:**\n * ```html\n * <ui-confirm-dialog\n *   confirmLabel=\"Delete\"\n *   dismissLabel=\"Keep\"\n *   .open=\"${showDialog}\"\n * >\n *   <span slot=\"title\">Delete Item</span>\n *   <p>This action cannot be undone.</p>\n * </ui-confirm-dialog>\n * ```\n *\n * @slot title - The dialog title\n * @slot - The main content body\n */\n@customElement('ui-confirm-dialog')\nexport class UiConfirmDialogElement extends Element {\n  static override styles: CSSResultOrNative[] = [dialogStyles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-confirm-dialog': UiConfirmDialogElement\n  }\n}\n"]}

package/demo/md/dialog/confirm-dialog.html

@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <title>UI Confirm Dialog Demo</title>
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
+  <style>
+    .demo-section {
+      margin: 40px 0;
+      padding: 24px;
+      border: 1px solid var(--md-sys-color-outline);
+      border-radius: 8px;
+    }
+    
+    .demo-section h2 {
+      margin-top: 0;
+      color: var(--md-sys-color-on-surface);
+    }
+    
+    .demo-section p {
+      margin-bottom: 20px;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+    
+    .button-group {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+    
+    .result {
+      margin-top: 20px;
+      padding: 12px;
+      background: var(--md-sys-color-surface-variant);
+      border-radius: 4px;
+      font-family: monospace;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  
+  <script type="module" src="/.tmp/demo/md/dialog/confirm-dialog.js"></script>
+</body>
+</html>

package/demo/md/dialog/confirm-dialog.ts

@@ -0,0 +1,121 @@
+import { html, TemplateResult } from 'lit'
+import { DemoPage } from '../../../src/demo/DemoPage.js'
+import { UiDialogClosingReason } from '../../../src/md/dialog/internals/Dialog.js'
+import { reactive } from '../../../src/decorators/index.js'
+import '../../../src/md/dialog/ui-confirm-dialog.js'
+import '../../../src/md/button/ui-button.js'
+
+class ConfirmDialogDemo extends DemoPage {
+  override accessor componentName = 'UI Confirm Dialog'
+
+  @reactive() accessor basicDialogOpen = false
+
+  @reactive() accessor deleteDialogOpen = false
+
+  @reactive() accessor customDialogOpen = false
+
+  @reactive() accessor lastResult = ''
+
+  protected openBasicDialog(): void {
+    this.basicDialogOpen = true
+  }
+
+  protected openDeleteDialog(): void {
+    this.deleteDialogOpen = true
+  }
+
+  protected openCustomDialog(): void {
+    this.customDialogOpen = true
+  }
+
+  protected handleBasicClose(e: CustomEvent<UiDialogClosingReason>): void {
+    this.basicDialogOpen = false
+    this.updateResult('Basic Dialog', e.detail)
+  }
+
+  protected handleDeleteClose(e: CustomEvent<UiDialogClosingReason>): void {
+    this.deleteDialogOpen = false
+    this.updateResult('Delete Dialog', e.detail)
+  }
+
+  protected handleCustomClose(e: CustomEvent<UiDialogClosingReason>): void {
+    this.customDialogOpen = false
+    this.updateResult('Custom Dialog', e.detail)
+  }
+
+  private updateResult(dialogType: string, detail: UiDialogClosingReason): void {
+    const action = detail.cancelled ? 'dismissed' : 'confirmed'
+    this.lastResult = `${dialogType} was ${action}`
+  }
+
+  contentTemplate(): TemplateResult {
+    return html`
+      <a href="../">Back</a>
+      <h1>Confirm Dialog Demo</h1>
+
+      <section class="demo-section">
+        <h2>Basic Confirm Dialog</h2>
+        <p>A simple confirmation dialog with default button labels.</p>
+        <div class="button-group">
+          <ui-button color="filled" @click="${this.openBasicDialog}">Open Basic Dialog</ui-button>
+        </div>
+
+        <ui-confirm-dialog .open="${this.basicDialogOpen}" @close="${this.handleBasicClose}">
+          <span slot="title">Confirm Action</span>
+          <p>Are you sure you want to proceed with this action?</p>
+        </ui-confirm-dialog>
+      </section>
+
+      <section class="demo-section">
+        <h2>Delete Confirmation Dialog</h2>
+        <p>A confirmation dialog with custom button labels for a destructive action.</p>
+        <div class="button-group">
+          <ui-button color="filled" @click="${this.openDeleteDialog}">Delete Item</ui-button>
+        </div>
+
+        <ui-confirm-dialog
+          confirmLabel="Delete"
+          dismissLabel="Keep"
+          destructive
+          .open="${this.deleteDialogOpen}"
+          @close="${this.handleDeleteClose}"
+        >
+          <span slot="title">Delete Item</span>
+          <p>Are you sure you want to delete this item? This action cannot be undone.</p>
+          <p><strong>This will permanently remove the item from your account.</strong></p>
+        </ui-confirm-dialog>
+      </section>
+
+      <section class="demo-section">
+        <h2>Custom Styled Dialog</h2>
+        <p>A confirmation dialog with custom button labels for a specific workflow.</p>
+        <div class="button-group">
+          <ui-button color="filled" @click="${this.openCustomDialog}">Save & Exit</ui-button>
+        </div>
+
+        <ui-confirm-dialog
+          confirmLabel="Save & Exit"
+          dismissLabel="Continue Editing"
+          .open="${this.customDialogOpen}"
+          @close="${this.handleCustomClose}"
+        >
+          <span slot="title">Save Changes</span>
+          <p>You have unsaved changes in your document.</p>
+          <p>Would you like to save your changes before exiting?</p>
+        </ui-confirm-dialog>
+      </section>
+
+      ${this.lastResult
+        ? html`
+            <section class="demo-section">
+              <h2>Last Action Result</h2>
+              <div class="result">${this.lastResult}</div>
+            </section>
+          `
+        : ''}
+    `
+  }
+}
+
+const instance = new ConfirmDialogDemo()
+instance.render()

package/demo/md/dialog/dialog.ts

@@ -20,6 +20,10 @@ class ComponentDemoPage extends DemoPage {
 
   @reactive() accessor formOpened = false
 
+  @reactive() accessor destructiveOpened = false
+
+  @reactive() accessor nonModalOpened = false
+
   protected openSimple(): void {
     this.simpleOpened = true
   }
@@ -56,6 +60,24 @@ class ComponentDemoPage extends DemoPage {
     this.reportClosingReason(e.detail)
   }
 
+  protected openDestructive(): void {
+    this.destructiveOpened = true
+  }
+
+  protected destructiveClosed(e: CustomEvent<UiDialogClosingReason>): void {
+    this.destructiveOpened = false
+    this.reportClosingReason(e.detail)
+  }
+
+  protected openNonModal(): void {
+    this.nonModalOpened = true
+  }
+
+  protected nonModalClosed(e: CustomEvent<UiDialogClosingReason>): void {
+    this.nonModalOpened = false
+    this.reportClosingReason(e.detail)
+  }
+
   imperativeDialog: UiDialog | null = null
 
   protected openImperative(): void {
@@ -72,6 +94,7 @@ class ComponentDemoPage extends DemoPage {
     this.imperativeDialog = dialog
     dialog.addEventListener('close', (e: Event): void => {
       document.body.removeChild(dialog)
+      this.imperativeDialog = null
       const event = e as CustomEvent<UiDialogClosingReason>
       this.reportClosingReason(event.detail)
     })
@@ -93,7 +116,7 @@ class ComponentDemoPage extends DemoPage {
     return html`
       <a href="../">Back</a>
       ${this.simpleDialog()} ${this.fullDialog()} ${this.overflowDialog()} ${this.formDialog()}
-      ${this.renderImperativeDialog()}
+      ${this.destructiveDialog()} ${this.nonModalDialog()} ${this.renderImperativeDialog()}
     `
   }
 
@@ -387,6 +410,58 @@ class ComponentDemoPage extends DemoPage {
       </section>
     `
   }
+
+  destructiveDialog(): TemplateResult {
+    return html`
+      <section class="demo-section">
+        <h2 class="title-large">Destructive dialog</h2>
+        <p>This dialog demonstrates the destructive attribute for dangerous actions.</p>
+        <ui-button color="filled" @click="${this.openDestructive}">Open destructive dialog</ui-button>
+        <ui-dialog
+          ?open="${this.destructiveOpened}"
+          @close="${this.destructiveClosed}"
+          modal
+          confirmLabel="Delete"
+          dismissLabel="Cancel"
+          destructive
+        >
+          <ui-icon slot="icon" icon="warning"></ui-icon>
+          <span slot="title">Delete Account</span>
+          <p>
+            Are you sure you want to permanently delete your account? This action cannot be undone and all your data
+            will be lost.
+          </p>
+        </ui-dialog>
+      </section>
+    `
+  }
+
+  nonModalDialog(): TemplateResult {
+    return html`
+      <section class="demo-section">
+        <h2 class="title-large">Non-modal dialog</h2>
+        <p>This dialog demonstrates a non-modal dialog that is centered in the viewport.</p>
+        <ui-button color="filled" @click="${this.openNonModal}">Open non-modal dialog</ui-button>
+        <ui-dialog
+          ?open="${this.nonModalOpened}"
+          @close="${this.nonModalClosed}"
+          confirmLabel="Got it"
+          dismissLabel="Close"
+        >
+          <ui-icon slot="icon" icon="info"></ui-icon>
+          <span slot="title">Non-Modal Information</span>
+          <p>
+            This is a non-modal dialog. Unlike modal dialogs, you can still interact with the content behind this
+            dialog. The dialog is automatically centered in the viewport and maintains the smooth opening animation.
+          </p>
+          <p>
+            Non-modal dialogs are useful for displaying information that doesn't require the user's full attention or
+            when you want to allow interaction with the background content.
+          </p>
+        </ui-dialog>
+      </section>
+    `
+  }
 }
 
 const instance = new ComponentDemoPage()

package/demo/md/index.html

@@ -31,6 +31,8 @@
         <dd>An animated collapse element.</dd>
         <dt><a href="dialog/dialog.html">dialog</a></dt>
         <dd>A Material 3 dialog element.</dd>
+        <dt><a href="dialog/confirm-dialog.html">confirm-dialog</a></dt>
+        <dd>A Material 3 confirm-dialog element.</dd>
         <dt><a href="dropdown-list/index.html">dropdown-list</a></dt>
         <dd>A Material 3 dropdown-list.</dd>
         <dt><a href="icon-button/index.html">icon-button</a></dt>

package/eslint.config.js

@@ -14,13 +14,13 @@ const gitignorePath = fileURLToPath(new URL(".gitignore", import.meta.url));
 export const GLOBAL_IGNORE_LIST = [
   '.github/',
   '.husky/',
-  '.tmp/',
-  '.vscode/',
-  '.wireit/',
-  'build/',
-  'coverage/',
+  '.tmp/**/*',
+  '.vscode/*',
+  '.wireit/*',
+  'build/*',
+  'coverage/*',
   'node_modules',
-  'scripts/',
+  'scripts/*',
   'eslint.config.js',
   '*.min.*',
   '*.d.ts',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",
@@ -71,7 +71,11 @@
     "prepare": "husky",
     "tsc": "wireit",
     "dev": "wireit",
-    "tsc:all": "wireit"
+    "tsc:all": "wireit",
+    "release": "node scripts/release.js",
+    "release:patch": "node scripts/release.js patch",
+    "release:minor": "node scripts/release.js minor",
+    "release:major": "node scripts/release.js major"
   },
   "wireit": {
     "build": {
@@ -205,6 +209,7 @@
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
     "concurrently": "^9.1.2",
+    "conventional-changelog-cli": "^5.0.0",
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-no-only-tests": "^3.3.0",

package/scripts/release.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+
+import { execSync } from 'child_process'
+import { readFileSync, writeFileSync } from 'fs'
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+import SemVer from '@pawel-up/semver/classes/semver.js'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const packageJsonPath = join(__dirname, '..', 'package.json')
+
+function updateVersion(type) {
+  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'))
+  const currentVersion = packageJson.version
+  const ver = new SemVer(currentVersion)
+  ver.inc(type)
+
+  packageJson.version = ver.format()
+  writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n')
+
+  return packageJson.version
+}
+
+function main() {
+  const type = process.argv[2] || 'patch'
+
+  if (!['major', 'minor', 'patch'].includes(type)) {
+    console.error('Usage: node scripts/release.js [major|minor|patch]')
+    process.exit(1)
+  }
+
+  try {
+    // Check if working directory is clean
+    const status = execSync('git status --porcelain', { encoding: 'utf8' })
+    if (status.trim()) {
+      console.error('Working directory is not clean. Please commit or stash your changes.')
+      process.exit(1)
+    }
+
+    // Update version
+    const newVersion = updateVersion(type)
+    console.log(`Updated version to ${newVersion}`)
+
+    // Build the project
+    console.log('Building project...')
+    execSync('npm run build', { stdio: 'inherit' })
+
+    // Commit version bump
+    execSync('git add package.json', { stdio: 'inherit' })
+    execSync(`git commit -m "chore: bump version to ${newVersion}"`, { stdio: 'inherit' })
+
+    // Create and push tag
+    execSync(`git tag v${newVersion}`, { stdio: 'inherit' })
+    execSync('git push origin main', { stdio: 'inherit' })
+    execSync(`git push origin v${newVersion}`, { stdio: 'inherit' })
+
+    console.log(`\n🎉 Release ${newVersion} created and pushed!`)
+    console.log('The GitHub Actions workflow will now create a release with changelog.')
+  } catch (error) {
+    console.error('Error during release:', error.message)
+    process.exit(1)
+  }
+}
+
+main()

package/src/elements/highlight/MarkdownStyles.ts

@@ -272,7 +272,7 @@ export default css`
 
   [slot='markdown-html'] code,
   [slot='markdown-html'] tt {
-    font-family: var(--markdown-styles-code-font-family, 'Roboto Mono, Consolas, Menlo, monospace');
+    font-family: var(--markdown-styles-code-font-family, Roboto Mono, Consolas, Menlo, monospace);
     padding: 0;
     padding-top: 0.2em;
     padding-bottom: 0.2em;
@@ -286,13 +286,13 @@ export default css`
   }
 
   /**
-* prism.js default theme for JavaScript, CSS and HTML
-* Based on dabblet (http://dabblet.com)
-* @author Lea Verou
-*/
+   * prism.js default theme for JavaScript, CSS and HTML
+   * Based on dabblet (http://dabblet.com)
+   * @author Lea Verou
+   */
   [slot='markdown-html'] code,
   [slot='markdown-html'] pre {
-    font-family: var(--markdown-styles-code-font-family, 'Roboto Mono, Consolas, Menlo, monospace');
+    font-family: var(--markdown-styles-code-font-family, Roboto Mono, Consolas, Menlo, monospace);
     color: var(--code-color, black);
     background-color: var(--code-background-color);
     text-shadow: var(--markdown-styles-code-text-shadow, 0 1px white);
@@ -314,11 +314,7 @@ export default css`
   [slot='markdown-html'] pre::-moz-selection,
   [slot='markdown-html'] pre ::-moz-selection,
   [slot='markdown-html'] code::-moz-selection,
-  [slot='markdown-html'] code ::-moz-selection {
-    text-shadow: none;
-    background: var(--markdown-styles-code-selection-background-color, #b3d4fc);
-  }
-
+  [slot='markdown-html'] code ::-moz-selection,
   [slot='markdown-html'] pre::selection,
   [slot='markdown-html'] pre ::selection,
   [slot='markdown-html'] code::selection,