@schukai/monster 4.136.30 → 4.137.0

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.136.30"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.137.0"}

package/source/components/datatable/dataset.mjs

@@ -134,7 +134,7 @@ class DataSet extends CustomElement {
 			 */
 			refreshOnMutation: {
 				selector:
-					"input, select, textarea, monster-select, monster-toggle-switch",
+					"input, select, textarea, monster-select, monster-toggle-switch, monster-choice-cards",
 			},
 
 			writeBack: {

package/source/components/form/choice-cards.mjs

@@ -0,0 +1,525 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
+import {
+  assembleMethodSymbol,
+  registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { fireCustomEvent, fireEvent } from "../../dom/events.mjs";
+import { isArray, isObject, isString, isNumber } from "../../types/is.mjs";
+import { Observer } from "../../types/observer.mjs";
+import { clone } from "../../util/clone.mjs";
+import { ChoiceCardsStyleSheet } from "./stylesheet/choice-cards.mjs";
+
+export { ChoiceCards };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const controlElementSymbol = Symbol("controlElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const itemsElementSymbol = Symbol("itemsElement");
+
+/**
+ * A card-based single choice control.
+ *
+ * @fragments /fragments/components/form/choice-cards
+ *
+ * @example /examples/components/form/choice-cards-simple Simple card choices
+ *
+ * @since 4.137.0
+ * @copyright Volker Schukai
+ * @summary A visual radio-card picker for choosing one option from a compact set.
+ * @fires monster-selected
+ * @fires monster-change
+ * @fires monster-changed
+ */
+class ChoiceCards extends CustomControl {
+  /**
+   * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
+   * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+   *
+   * @property {Array<Object|string|number>} items Choice items.
+   * @property {string} items[].contentSlot Slot name for custom card content.
+   * @property {string|null} value Current selected value.
+   * @property {boolean} disabled Disabled state.
+   * @property {Object} labels Accessible labels.
+   * @property {string} labels.group Radio group label.
+   * @property {Object} templates Template definitions.
+   * @property {string} templates.main Main template.
+   */
+  get defaults() {
+    return Object.assign({}, super.defaults, {
+      items: [],
+      value: null,
+      disabled: false,
+      eventProcessing: false,
+      labels: {
+        group: "Choices",
+      },
+      templates: {
+        main: getTemplate(),
+      },
+    });
+  }
+
+  /**
+   * @return {void}
+   */
+  [assembleMethodSymbol]() {
+    super[assembleMethodSymbol]();
+    initControlReferences.call(this);
+    initItems.call(this);
+    initEventHandler.call(this);
+    render.call(this);
+    syncFormValue.call(this);
+
+    this.attachObserver(
+      new Observer(() => {
+        render.call(this);
+        syncFormValue.call(this);
+      }),
+    );
+  }
+
+  /**
+   * @return {CSSStyleSheet[]}
+   */
+  static getCSSStyleSheet() {
+    return [ChoiceCardsStyleSheet];
+  }
+
+  /**
+   * This method is called by the `instanceof` operator.
+   * @return {symbol}
+   */
+  static get [instanceSymbol]() {
+    return Symbol.for(
+      "@schukai/monster/components/form/choice-cards@@instance",
+    );
+  }
+
+  /**
+   * @return {string}
+   */
+  static getTag() {
+    return "monster-choice-cards";
+  }
+
+  /**
+   * @return {string}
+   */
+  get value() {
+    return this.getOption("value");
+  }
+
+  /**
+   * @param {string|null|undefined} value
+   */
+  set value(value) {
+    const normalized = normalizeValue(value);
+    if (this.getOption("value") !== normalized) {
+      this.setOption("value", normalized);
+    }
+    syncValueAttribute.call(this, normalized);
+    render.call(this);
+    syncFormValue.call(this);
+  }
+
+  /**
+   * @return {Array}
+   */
+  getItems() {
+    return clone(this.getOption("items", []));
+  }
+
+  /**
+   * @param {Array} items
+   * @return {ChoiceCards}
+   */
+  setItems(items) {
+    this.setOption("items", normalizeItems(items));
+    render.call(this);
+    return this;
+  }
+
+  /**
+   * Select a choice by value.
+   *
+   * @param {string|null|undefined} value
+   * @return {ChoiceCards}
+   */
+  select(value) {
+    if (this.getOption("disabled") === true || this.hasAttribute("disabled")) {
+      return this;
+    }
+
+    const normalized = normalizeValue(value);
+    const item = findItem.call(this, normalized);
+    if (item?.disabled === true) {
+      return this;
+    }
+
+    if (this.value === normalized) {
+      return this;
+    }
+
+    this.value = normalized;
+    const detail = {
+      value: this.value,
+      item: item || null,
+    };
+
+    fireEvent(this, "change");
+    fireCustomEvent(this, "monster-selected", detail);
+    fireCustomEvent(this, "monster-change", detail);
+    fireCustomEvent(this, "monster-changed", detail);
+
+    return this;
+  }
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function initControlReferences() {
+  this[controlElementSymbol] = this.shadowRoot?.querySelector(
+    "[data-monster-role=control]",
+  );
+  this[itemsElementSymbol] = this.shadowRoot?.querySelector(
+    "[data-monster-role=items]",
+  );
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function initItems() {
+  if (this.hasAttribute("value")) {
+    this.setOption("value", normalizeValue(this.getAttribute("value")));
+  }
+
+  const normalized = normalizeItems(this.getOption("items", []));
+  this.setOption("items", normalized);
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function initEventHandler() {
+  this.addEventListener("click", (event) => {
+    const button = findChoiceButton(event);
+    if (!button) {
+      return;
+    }
+    this.select(button.getAttribute("data-choice-value"));
+  });
+
+  this.addEventListener("keydown", (event) => {
+    if (this.getOption("disabled") === true || this.hasAttribute("disabled")) {
+      return;
+    }
+
+    const buttons = getEnabledButtons.call(this);
+    if (buttons.length === 0) {
+      return;
+    }
+
+    const current = this.shadowRoot?.activeElement;
+    let index = buttons.indexOf(current);
+    if (index < 0) {
+      index = Math.max(
+        0,
+        buttons.findIndex(
+          (button) => button.getAttribute("aria-checked") === "true",
+        ),
+      );
+    }
+
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      this.select(buttons[index].getAttribute("data-choice-value"));
+      return;
+    }
+
+    if (event.key === "Home") {
+      event.preventDefault();
+      focusAndSelect.call(this, buttons[0]);
+      return;
+    }
+
+    if (event.key === "End") {
+      event.preventDefault();
+      focusAndSelect.call(this, buttons[buttons.length - 1]);
+      return;
+    }
+
+    if (["ArrowRight", "ArrowDown"].includes(event.key)) {
+      event.preventDefault();
+      focusAndSelect.call(this, buttons[(index + 1) % buttons.length]);
+      return;
+    }
+
+    if (["ArrowLeft", "ArrowUp"].includes(event.key)) {
+      event.preventDefault();
+      focusAndSelect.call(
+        this,
+        buttons[(index - 1 + buttons.length) % buttons.length],
+      );
+    }
+  });
+}
+
+/**
+ * @private
+ * @param {HTMLButtonElement} button
+ * @return {void}
+ */
+function focusAndSelect(button) {
+  button.focus();
+  this.select(button.getAttribute("data-choice-value"));
+}
+
+/**
+ * @private
+ * @param {Event} event
+ * @return {HTMLButtonElement|null}
+ */
+function findChoiceButton(event) {
+  for (const node of event.composedPath()) {
+    if (
+      node instanceof HTMLButtonElement &&
+      node.getAttribute("data-monster-role") === "choice"
+    ) {
+      return node;
+    }
+  }
+  return null;
+}
+
+/**
+ * @private
+ * @return {HTMLButtonElement[]}
+ */
+function getEnabledButtons() {
+  return Array.from(
+    this.shadowRoot?.querySelectorAll('[data-monster-role="choice"]') || [],
+  ).filter((button) => button.disabled !== true);
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function render() {
+  if (!this[itemsElementSymbol]) {
+    return;
+  }
+
+  const items = normalizeItems(this.getOption("items", []));
+  const value = normalizeValue(this.getOption("value"));
+  const disabled =
+    this.getOption("disabled") === true || this.hasAttribute("disabled");
+  const hasSelectedItem = items.some((item) => item.value === value);
+  const firstEnabledIndex = items.findIndex((item) => item.disabled !== true);
+
+  this[itemsElementSymbol].replaceChildren();
+  this[controlElementSymbol]?.setAttribute(
+    "aria-label",
+    this.getOption("labels.group", "Choices"),
+  );
+
+  for (const [index, item] of items.entries()) {
+    const selected = value !== null && item.value === value;
+    const tabbable =
+      selected || (hasSelectedItem === false && index === firstEnabledIndex);
+    const button = document.createElement("button");
+    button.type = "button";
+    button.setAttribute("data-monster-role", "choice");
+    button.setAttribute("data-choice-value", item.value);
+    button.setAttribute("part", "choice");
+    button.setAttribute("role", "radio");
+    button.setAttribute("aria-label", item.label);
+    button.setAttribute("aria-checked", selected ? "true" : "false");
+    button.tabIndex = tabbable ? 0 : -1;
+    button.disabled = disabled || item.disabled === true;
+    button.classList.toggle("selected", selected);
+    button.classList.toggle("custom-content", !!item.contentSlot);
+
+    if (item.id) {
+      button.setAttribute("data-choice-id", item.id);
+    }
+
+    const indicator = document.createElement("span");
+    indicator.setAttribute("data-monster-role", "indicator");
+    indicator.setAttribute("part", "indicator");
+    button.appendChild(indicator);
+
+    if (item.contentSlot) {
+      const content = document.createElement("span");
+      content.setAttribute("data-monster-role", "content");
+      content.setAttribute("part", "content");
+      const slot = document.createElement("slot");
+      slot.name = item.contentSlot;
+      content.appendChild(slot);
+      button.appendChild(content);
+    } else {
+      const visual = document.createElement("span");
+      visual.setAttribute("data-monster-role", "visual");
+      visual.setAttribute("part", "visual");
+      if (item.iconSlot) {
+        const slot = document.createElement("slot");
+        slot.name = item.iconSlot;
+        visual.appendChild(slot);
+      } else if (item.icon) {
+        visual.setAttribute("data-choice-icon", item.icon);
+      } else {
+        visual.classList.add("empty");
+      }
+      button.appendChild(visual);
+
+      const label = document.createElement("span");
+      label.setAttribute("data-monster-role", "label");
+      label.setAttribute("part", "label");
+      label.textContent = item.label;
+      button.appendChild(label);
+    }
+
+    this[itemsElementSymbol].appendChild(button);
+  }
+}
+
+/**
+ * @private
+ * @param {string|null} value
+ * @return {object|null}
+ */
+function findItem(value) {
+  return normalizeItems(this.getOption("items", [])).find(
+    (item) => item.value === value,
+  );
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @return {string|null}
+ */
+function normalizeValue(value) {
+  if (value === undefined || value === null || value === "") {
+    return null;
+  }
+  return String(value);
+}
+
+/**
+ * @private
+ * @param {*} items
+ * @return {Array}
+ */
+function normalizeItems(items) {
+  if (!isArray(items)) {
+    return [];
+  }
+
+  return items.map((entry, index) => {
+    if (isString(entry) || isNumber(entry)) {
+      return {
+        id: `item-${index}`,
+        value: String(entry),
+        label: String(entry),
+        icon: "",
+        iconSlot: "",
+        contentSlot: "",
+        disabled: false,
+      };
+    }
+
+    if (!isObject(entry)) {
+      return {
+        id: `item-${index}`,
+        value: `item-${index}`,
+        label: "",
+        icon: "",
+        iconSlot: "",
+        contentSlot: "",
+        disabled: false,
+      };
+    }
+
+    const value = normalizeValue(entry.value ?? entry.id ?? `item-${index}`);
+    return {
+      id: String(entry.id ?? value ?? `item-${index}`),
+      value: value ?? `item-${index}`,
+      label: String(entry.label ?? value ?? ""),
+      icon: String(entry.icon ?? ""),
+      iconSlot: String(entry.iconSlot ?? ""),
+      contentSlot: String(entry.contentSlot ?? entry.slot ?? ""),
+      disabled: entry.disabled === true,
+    };
+  });
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function syncFormValue() {
+  if (typeof this.setFormValue === "function") {
+    this.setFormValue(this.value ?? "");
+  }
+}
+
+/**
+ * @private
+ * @param {string|null} value
+ * @return {void}
+ */
+function syncValueAttribute(value) {
+  if (value === null) {
+    if (this.hasAttribute("value")) {
+      this.removeAttribute("value");
+    }
+    return;
+  }
+
+  if (this.getAttribute("value") !== value) {
+    this.setAttribute("value", value);
+  }
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+  // language=HTML
+  return `
+        <div data-monster-role="control" part="control" role="radiogroup">
+            <div data-monster-role="items" part="items"></div>
+        </div>
+    `;
+}
+
+registerCustomElement(ChoiceCards);

package/source/components/form/form.mjs

@@ -97,7 +97,7 @@ class Form extends DataSet {
 
 			reportValidity: {
 				selector:
-					"input,select,textarea,monster-select,monster-toggle-switch,monster-password",
+					"input,select,textarea,monster-select,monster-toggle-switch,monster-password,monster-choice-cards",
 			},
 
 			eventProcessing: true,

package/source/components/form/style/choice-cards.pcss

@@ -0,0 +1,172 @@
+@import "../../style/control.pcss";
+@import "../../style/color.pcss";
+@import "../../style/theme.pcss";
+@import "../../style/border.pcss";
+
+:host {
+  box-sizing: border-box;
+  color: var(--monster-color-primary-1);
+  display: block;
+  font-family: var(--monster-font-family);
+  font-size: 1rem;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+[data-monster-role="control"] {
+  outline: none;
+  width: 100%;
+}
+
+[data-monster-role="items"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--monster-choice-cards-gap, 0.75rem);
+}
+
+[data-monster-role="choice"] {
+  align-items: center;
+  appearance: none;
+  background: var(--monster-bg-color-primary-1);
+  border-color: var(--monster-theme-control-border-color);
+  border-radius: var(--monster-theme-control-border-radius);
+  border-style: var(--monster-theme-control-border-style);
+  border-width: var(--monster-theme-control-border-width);
+  color: var(--monster-color-primary-1);
+  cursor: pointer;
+  display: grid;
+  font: inherit;
+  gap: 0.55rem;
+  grid-template-rows: 1.65rem auto;
+  justify-items: center;
+  min-height: var(--monster-choice-cards-min-height, 6.75rem);
+  min-width: 0;
+  padding: 1.35rem 0.85rem 1.45rem;
+  position: relative;
+  text-align: center;
+  width: min(100%, var(--monster-choice-cards-card-width, 10.5rem));
+}
+
+[data-monster-role="content"] {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  justify-content: center;
+  min-height: 100%;
+  min-width: 0;
+}
+
+::slotted([slot]) {
+  min-width: 0;
+}
+
+[data-monster-role="choice"]:focus-visible {
+  outline: 1px dashed var(--monster-color-selection-4);
+  outline-offset: 2px;
+}
+
+[data-monster-role="choice"]:hover:not(:disabled) {
+  border-color: var(--monster-bg-color-primary-4);
+}
+
+[data-monster-role="choice"].selected {
+  border-color: var(--monster-color-primary-1);
+}
+
+[data-monster-role="choice"].custom-content {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+[data-monster-role="choice"]:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+[data-monster-role="indicator"] {
+  align-items: center;
+  background: var(--monster-color-primary-1);
+  border-radius: 999px;
+  color: var(--monster-bg-color-primary-1);
+  display: none;
+  height: 1rem;
+  justify-content: center;
+  left: 0.32rem;
+  position: absolute;
+  top: 0.32rem;
+  width: 1rem;
+}
+
+[data-monster-role="choice"].selected [data-monster-role="indicator"] {
+  display: flex;
+}
+
+[data-monster-role="indicator"]::before {
+  background: currentColor;
+  content: "";
+  height: 0.72rem;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M12.78 4.72a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06 0L3.22 7.78a.75.75 0 1 1 1.06-1.06L7 9.44l4.72-4.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E");
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  width: 0.72rem;
+}
+
+[data-monster-role="visual"] {
+  align-items: center;
+  color: var(--monster-color-primary-1);
+  display: inline-flex;
+  height: 1.8rem;
+  justify-content: center;
+  width: 1.8rem;
+}
+
+[data-monster-role="visual"].empty {
+  display: none;
+}
+
+[data-monster-role="visual"][data-choice-icon]::before {
+  background: currentColor;
+  content: "";
+  height: 1.8rem;
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  width: 1.8rem;
+}
+
+[data-monster-role="visual"][data-choice-icon="project-assets"]::before,
+[data-monster-role="visual"][data-choice-icon="stack"]::before {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m12 2 9 4-9 4-9-4 9-4Z'/%3E%3Cpath d='m3 10 9 4 9-4'/%3E%3Cpath d='m3 14 9 4 9-4'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+[data-monster-role="visual"][data-choice-icon="api-collection"]::before,
+[data-monster-role="visual"][data-choice-icon="api"]::before {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect x='5' y='3' width='14' height='16' rx='1.5'/%3E%3Cpath d='M8 7h8M8 15h8M9 11l2-2 2 2M15 9l-2 2 2 2M9 21h6'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+[data-monster-role="label"] {
+  display: block;
+  font-size: 0.86rem;
+  font-weight: 600;
+  line-height: 1.25;
+  max-width: 100%;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+@media (prefers-color-scheme: light) {
+  [data-monster-role="choice"] {
+    border-color: var(--monster-bg-color-primary-3);
+  }
+
+  [data-monster-role="choice"].selected {
+    border-color: var(--monster-color-primary-1);
+  }
+}

package/source/components/form/style/field-layout.pcss

@@ -174,6 +174,7 @@
 
 .monster-field-layout > input,
 .monster-field-layout > monster-toggle-switch,
+.monster-field-layout > monster-choice-cards,
 .monster-field-layout > select {
     min-height: 1.8rem;
     padding: 0.5rem;
@@ -210,6 +211,7 @@
 
 .monster-field-layout > input,
 .monster-field-layout > monster-toggle-switch,
+.monster-field-layout > monster-choice-cards,
 .monster-field-layout > monster-password,
 .monster-field-layout > select,
 .monster-field-layout > [data-monster-validation-wrapper] {
@@ -234,6 +236,11 @@
     padding: 0;
 }
 
+.monster-field-layout > monster-choice-cards {
+    align-self: stretch;
+    padding: 0;
+}
+
 @container field-layout (max-width: 1200px) {
     .monster-field-layout.multiple-columns {
         grid-template-columns: auto 1fr auto 1fr;
@@ -315,6 +322,7 @@
     .monster-field-layout > div.wrapper,
     .monster-field-layout > input,
     .monster-field-layout > monster-toggle-switch,
+    .monster-field-layout > monster-choice-cards,
     .monster-field-layout > monster-password,
     .monster-field-layout > textarea,
     .monster-field-layout > select,

package/source/components/form/stylesheet/choice-cards.mjs

@@ -0,0 +1,31 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, 2026. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
+ */
+
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+
+export {ChoiceCardsStyleSheet}
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const ChoiceCardsStyleSheet = new CSSStyleSheet();
+
+try {
+  ChoiceCardsStyleSheet.insertRule(`
+@layer choicecards { 
+[data-monster-role=control]{box-sizing:border-box}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:after,:before,:root{--monster-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030;--monster-gradient-tangerine-1:#e5b875;--monster-gradient-tangerine-2:#d9a362;--monster-gradient-tangerine-3:#c08a4e;--monster-gradient-tangerine-4:#a7713b;--monster-gradient-tangerine-5:#8f5a28;--monster-gradient-tangerine-6:#360505;--monster-color-seashell-1:#f7f5ef;--monster-color-seashell-2:#e5e2d9;--monster-color-seashell-3:#cbc6b3;--monster-color-seashell-4:#a19d8a;--monster-color-seashell-5:#7a7566;--monster-color-seashell-6:#514d3f}.monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-theme-control-container-1,.monster-theme-control-row-1{border:1px solid var(--monster-theme-control-border-color)}.monster-theme-control-container-1,.monster-theme-control-element,.monster-theme-control-row-1{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-theme-control-background{background-color:var(--monster-theme-control-bg-color)}.monster-theme-background-inherit{background-color:inherit!important}.monster-theme-on{background-color:var(--monster-theme-on-bg-color);color:var(--monster-theme-on-color)}.monster-theme-off{background-color:var(--monster-theme-off-bg-color);color:var(--monster-theme-off-color)}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}:host{box-sizing:border-box;color:var(--monster-color-primary-1);display:block;font-family:var(--monster-font-family);font-size:1rem}*,:after,:before{box-sizing:border-box}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=items]{display:flex;flex-wrap:wrap;gap:var(--monster-choice-cards-gap,.75rem)}[data-monster-role=choice]{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);color:var(--monster-color-primary-1);cursor:pointer;display:grid;font:inherit;gap:.55rem;grid-template-rows:1.65rem auto;justify-items:center;min-height:var(--monster-choice-cards-min-height,6.75rem);min-width:0;padding:1.35rem .85rem 1.45rem;position:relative;text-align:center;width:min(100%,var(--monster-choice-cards-card-width,10.5rem))}[data-monster-role=content]{align-items:center;display:flex;flex-direction:column;gap:.55rem;justify-content:center;min-height:100%;min-width:0}::slotted([slot]){min-width:0}[data-monster-role=choice]:focus-visible{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}[data-monster-role=choice]:hover:not(:disabled){border-color:var(--monster-bg-color-primary-4)}[data-monster-role=choice].selected{border-color:var(--monster-color-primary-1)}[data-monster-role=choice].custom-content{align-items:center;display:flex;justify-content:center}[data-monster-role=choice]:disabled{cursor:not-allowed;opacity:.6}[data-monster-role=indicator]{align-items:center;background:var(--monster-color-primary-1);border-radius:999px;color:var(--monster-bg-color-primary-1);display:none;height:1rem;justify-content:center;left:.32rem;position:absolute;top:.32rem;width:1rem}[data-monster-role=choice].selected [data-monster-role=indicator]{display:flex}[data-monster-role=indicator]:before{background:currentColor;content:\"\";height:.72rem;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.78 4.72a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06 0L3.22 7.78a.75.75 0 1 1 1.06-1.06L7 9.44l4.72-4.72a.75.75 0 0 1 1.06 0'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.78 4.72a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 0 1-1.06 0L3.22 7.78a.75.75 0 1 1 1.06-1.06L7 9.44l4.72-4.72a.75.75 0 0 1 1.06 0'/%3E%3C/svg%3E\");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:.72rem}[data-monster-role=visual]{align-items:center;color:var(--monster-color-primary-1);display:inline-flex;height:1.8rem;justify-content:center;width:1.8rem}[data-monster-role=visual].empty{display:none}[data-monster-role=visual][data-choice-icon]:before{background:currentColor;content:\"\";height:1.8rem;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:1.8rem}[data-monster-role=visual][data-choice-icon=project-assets]:before,[data-monster-role=visual][data-choice-icon=stack]:before{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m12 2 9 4-9 4-9-4zM3 10l9 4 9-4M3 14l9 4 9-4'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m12 2 9 4-9 4-9-4zM3 10l9 4 9-4M3 14l9 4 9-4'/%3E%3C/g%3E%3C/svg%3E\")}[data-monster-role=visual][data-choice-icon=api-collection]:before,[data-monster-role=visual][data-choice-icon=api]:before{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='16' x='5' y='3' rx='1.5'/%3E%3Cpath d='M8 7h8m-8 8h8m-7-4 2-2 2 2m2-2-2 2 2 2m-6 8h6'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='16' x='5' y='3' rx='1.5'/%3E%3Cpath d='M8 7h8m-8 8h8m-7-4 2-2 2 2m2-2-2 2 2 2m-6 8h6'/%3E%3C/g%3E%3C/svg%3E\")}[data-monster-role=label]{display:block;font-size:.86rem;font-weight:600;line-height:1.25;max-width:100%;min-width:0;overflow-wrap:anywhere}@media (prefers-color-scheme:light){[data-monster-role=choice]{border-color:var(--monster-bg-color-primary-3)}[data-monster-role=choice].selected{border-color:var(--monster-color-primary-1)}} 
+}`, 0);
+} catch (e) {
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+}

package/source/components/form/stylesheet/field-layout.mjs

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact Volker Schukai.
  */
 
-import { addAttributeToken } from "../../../dom/attributes.mjs";
-import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
 
-export { FieldLayoutStyleSheet };
+export {FieldLayoutStyleSheet}
 
 /**
  * @private
@@ -22,17 +22,10 @@ export { FieldLayoutStyleSheet };
 const FieldLayoutStyleSheet = new CSSStyleSheet();
 
 try {
-	FieldLayoutStyleSheet.insertRule(
-		`
+  FieldLayoutStyleSheet.insertRule(`
 @layer fieldlayout { 
-:after,:before,:root{--monster-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030;--monster-gradient-tangerine-1:#e5b875;--monster-gradient-tangerine-2:#d9a362;--monster-gradient-tangerine-3:#c08a4e;--monster-gradient-tangerine-4:#a7713b;--monster-gradient-tangerine-5:#8f5a28;--monster-gradient-tangerine-6:#360505;--monster-color-seashell-1:#f7f5ef;--monster-color-seashell-2:#e5e2d9;--monster-color-seashell-3:#cbc6b3;--monster-color-seashell-4:#a19d8a;--monster-color-seashell-5:#7a7566;--monster-color-seashell-6:#514d3f}.monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-theme-control-container-1,.monster-theme-control-row-1{border:1px solid var(--monster-theme-control-border-color)}.monster-theme-control-container-1,.monster-theme-control-element,.monster-theme-control-row-1{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-theme-control-background{background-color:var(--monster-theme-control-bg-color)}.monster-theme-background-inherit{background-color:inherit!important}.monster-theme-on{background-color:var(--monster-theme-on-bg-color);color:var(--monster-theme-on-color)}.monster-theme-off{background-color:var(--monster-theme-off-bg-color);color:var(--monster-theme-off-color)}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}input,meter,progress,select,textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none}input,select,textarea{height:-moz-fit-content;height:fit-content;padding:.4rem .6rem}textarea{min-height:6rem;resize:vertical}input[type=color]{height:2rem;margin:0;padding:.1rem;width:2rem}input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),select:hover,textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}input:focus,select:focus,textarea:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:3px}[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}.monster-field-layout{container-name:field-layout;container-type:inline-size;display:grid;grid-template-columns:auto 1fr;grid-gap:.8rem;accent-color:var(--monster-color-secondary-2);--monster-field-set-h1-size:xx-large;--monster-field-set-h2-size:x-large;--monster-field-set-h3-size:large;--monster-field-set-h4-size:medium;--monster-field-set-h5-size:small;--monster-field-set-h6-size:smaller;--monster-field-set-heading-margin-top:1rem;--monster-field-set-heading-margin-top-first:0.3rem;--monster-field-set-heading-margin-top-1200:2.2rem;--monster-field-set-heading-margin-top-first-1200:0.6rem;--monster-field-set-heading-margin-top-900:1.8rem;--monster-field-set-heading-margin-top-first-900:0.5rem;--monster-field-set-heading-margin-top-500:1.3rem;--monster-field-set-heading-margin-top-first-500:0.4rem;font-size:1rem;font-weight:400;line-height:1.6}.monster-field-layout.multiple-columns{grid-template-columns:auto 1fr auto 1fr auto 1fr}.monster-field-layout>.label,.monster-field-layout>label{align-items:flex-start;border-bottom:thin dotted var(--monster-color-primary-1);color:var(--monster-color-primary-1);display:flex;gap:.4rem;justify-content:space-between}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6,.monster-field-layout>hr{grid-column:1/-1;margin:var(--monster-field-set-heading-margin-top,1rem) 0 .1rem}.monster-field-layout>h1{font-size:var(--monster-field-set-h1-size,xx-large)}.monster-field-layout>h2{font-size:var(--monster-field-set-h2-size,x-large)}.monster-field-layout>h3{font-size:var(--monster-field-set-h3-size,large)}.monster-field-layout>h4{font-size:var(--monster-field-set-h4-size,medium)}.monster-field-layout>h5{font-size:var(--monster-field-set-h5-size,small)}.monster-field-layout>h6{font-size:var(--monster-field-set-h6-size,smaller)}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first,.3rem)}.monster-field-layout>hr{border:none;border-top:thin dotted var(--monster-color-gray-3);margin:1rem 0;padding:0}.monster-field-layout>hr.delimiter{border:none;margin:0;padding:0}.monster-field-layout>.grid-span-full{grid-column-end:-1}.monster-field-layout>.grid-start-1{grid-column-start:1}.monster-field-layout>.grid-start-2{grid-column-start:2}.monster-field-layout>.grid-start-3{grid-column-start:3}.monster-field-layout>.grid-start-4{grid-column-start:4}.monster-field-layout>.grid-double-span{grid-column:span 3}.monster-field-layout>.grid-to-end{grid-column-end:-1}.monster-field-layout>input[type=email],.monster-field-layout>input[type=number],.monster-field-layout>input[type=password],.monster-field-layout>input[type=tel],.monster-field-layout>input[type=text]{height:-webkit-fill-available}.monster-field-layout>input:not([type=checkbox]):not([type=radio]),.monster-field-layout>select{border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);width:100%}.monster-field-layout>select{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-field-layout>select:disabled,.monster-field-layout>select[readonly]{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);cursor:default}.monster-field-layout>input:not([type=checkbox]):not([type=radio])[readonly]{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-field-layout>input[readonly]:not([type=checkbox]):not([type=radio]){background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);cursor:default}.monster-field-layout>input,.monster-field-layout>monster-toggle-switch,.monster-field-layout>select{box-sizing:border-box;min-height:1.8rem;padding:.5rem}.monster-field-layout>monster-password{min-height:1.8rem}.monster-field-layout>input[type=color]{min-height:2.2rem;padding:0 .2rem;width:100%}.monster-field-layout>input[type=date],.monster-field-layout>input[type=time]{min-height:2.2rem;padding:0 .2rem}.monster-field-layout>input[type=checkbox],.monster-field-layout>input[type=radio]{min-height:2.2rem;padding:0 .2rem;width:1.8rem}.monster-field-layout>input[type=file]{min-height:1.2rem;padding:.4rem}.monster-field-layout>[data-monster-validation-wrapper],.monster-field-layout>input,.monster-field-layout>monster-password,.monster-field-layout>monster-toggle-switch,.monster-field-layout>select{align-self:end}.monster-field-layout>select[multiple],.monster-field-layout>select[size]:not([size=\"1\"]){align-self:stretch;min-height:7.2rem;overflow-y:auto;padding:.25rem .35rem}.monster-field-layout>select[multiple] option,.monster-field-layout>select[size]:not([size=\"1\"]) option{padding-block:.15rem}.monster-field-layout>monster-toggle-switch{padding:0;width:3rem}@container field-layout (max-width: 1200px){.monster-field-layout.multiple-columns{grid-template-columns:auto 1fr auto 1fr}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6{margin:var(--monster-field-set-heading-margin-top-1200,2.2rem) 0 .1rem}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first-1200,.6rem)}.monster-field-layout>.grid-double-span{grid-column:span 1}}@container field-layout (max-width: 900px){.monster-field-layout.multiple-columns{grid-template-columns:auto 1fr}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6{margin:var(--monster-field-set-heading-margin-top-900,1.8rem) 0 .1rem}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first-900,.5rem)}.monster-field-layout>.grid-double-span{grid-column:span 1}}@container field-layout (max-width: 500px){.monster-field-layout{gap:0;grid-template-columns:1fr}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6{grid-column:1;margin:var(--monster-field-set-heading-margin-top-500,1.3rem) 0 .1rem}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first-500,.4rem)}.monster-field-layout>div.wrapper,.monster-field-layout>input,.monster-field-layout>monster-action-button,.monster-field-layout>monster-api-button,.monster-field-layout>monster-button,.monster-field-layout>monster-datasource-save-button,.monster-field-layout>monster-password,.monster-field-layout>monster-state-button,.monster-field-layout>monster-toggle-switch,.monster-field-layout>select,.monster-field-layout>textarea{grid-column:1}.monster-field-layout>.label,.monster-field-layout>label{border-bottom:none;padding-top:1rem}.monster-field-layout.multiple-columns{grid-template-columns:1fr}.monster-field-layout>.grid-span-full,.monster-field-layout>.grid-start-1,.monster-field-layout>.grid-start-2,.monster-field-layout>.grid-start-3,.monster-field-layout>.grid-start-4{grid-column:1!important}.monster-field-layout>.grid-double-span{grid-column:span 1!important}} 
-}`,
-		0,
-	);
+:after,:before,:root{--monster-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030;--monster-gradient-tangerine-1:#e5b875;--monster-gradient-tangerine-2:#d9a362;--monster-gradient-tangerine-3:#c08a4e;--monster-gradient-tangerine-4:#a7713b;--monster-gradient-tangerine-5:#8f5a28;--monster-gradient-tangerine-6:#360505;--monster-color-seashell-1:#f7f5ef;--monster-color-seashell-2:#e5e2d9;--monster-color-seashell-3:#cbc6b3;--monster-color-seashell-4:#a19d8a;--monster-color-seashell-5:#7a7566;--monster-color-seashell-6:#514d3f}.monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-danger-1{background-color:var(--monster-bg-color-danger-1);color:var(--monster-color-danger-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-danger-2{background-color:var(--monster-bg-color-danger-2);color:var(--monster-color-danger-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-danger-3{background-color:var(--monster-bg-color-danger-3);color:var(--monster-color-danger-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-danger-4{background-color:var(--monster-bg-color-danger-4);color:var(--monster-color-danger-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-theme-control-container-1,.monster-theme-control-row-1{border:1px solid var(--monster-theme-control-border-color)}.monster-theme-control-container-1,.monster-theme-control-element,.monster-theme-control-row-1{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-theme-control-background{background-color:var(--monster-theme-control-bg-color)}.monster-theme-background-inherit{background-color:inherit!important}.monster-theme-on{background-color:var(--monster-theme-on-bg-color);color:var(--monster-theme-on-color)}.monster-theme-off{background-color:var(--monster-theme-off-bg-color);color:var(--monster-theme-off-color)}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}input,meter,progress,select,textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none}input,select,textarea{height:-moz-fit-content;height:fit-content;padding:.4rem .6rem}textarea{min-height:6rem;resize:vertical}input[type=color]{height:2rem;margin:0;padding:.1rem;width:2rem}input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),select:hover,textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}input:focus,select:focus,textarea:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:3px}[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}.monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em}.monster-field-layout{container-name:field-layout;container-type:inline-size;display:grid;grid-template-columns:auto 1fr;grid-gap:.8rem;accent-color:var(--monster-color-secondary-2);--monster-field-set-h1-size:xx-large;--monster-field-set-h2-size:x-large;--monster-field-set-h3-size:large;--monster-field-set-h4-size:medium;--monster-field-set-h5-size:small;--monster-field-set-h6-size:smaller;--monster-field-set-heading-margin-top:1rem;--monster-field-set-heading-margin-top-first:0.3rem;--monster-field-set-heading-margin-top-1200:2.2rem;--monster-field-set-heading-margin-top-first-1200:0.6rem;--monster-field-set-heading-margin-top-900:1.8rem;--monster-field-set-heading-margin-top-first-900:0.5rem;--monster-field-set-heading-margin-top-500:1.3rem;--monster-field-set-heading-margin-top-first-500:0.4rem;font-size:1rem;font-weight:400;line-height:1.6}.monster-field-layout.multiple-columns{grid-template-columns:auto 1fr auto 1fr auto 1fr}.monster-field-layout>.label,.monster-field-layout>label{align-items:flex-start;border-bottom:thin dotted var(--monster-color-primary-1);color:var(--monster-color-primary-1);display:flex;gap:.4rem;justify-content:space-between}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6,.monster-field-layout>hr{grid-column:1/-1;margin:var(--monster-field-set-heading-margin-top,1rem) 0 .1rem}.monster-field-layout>h1{font-size:var(--monster-field-set-h1-size,xx-large)}.monster-field-layout>h2{font-size:var(--monster-field-set-h2-size,x-large)}.monster-field-layout>h3{font-size:var(--monster-field-set-h3-size,large)}.monster-field-layout>h4{font-size:var(--monster-field-set-h4-size,medium)}.monster-field-layout>h5{font-size:var(--monster-field-set-h5-size,small)}.monster-field-layout>h6{font-size:var(--monster-field-set-h6-size,smaller)}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first,.3rem)}.monster-field-layout>hr{border:none;border-top:thin dotted var(--monster-color-gray-3);margin:1rem 0;padding:0}.monster-field-layout>hr.delimiter{border:none;margin:0;padding:0}.monster-field-layout>.grid-span-full{grid-column-end:-1}.monster-field-layout>.grid-start-1{grid-column-start:1}.monster-field-layout>.grid-start-2{grid-column-start:2}.monster-field-layout>.grid-start-3{grid-column-start:3}.monster-field-layout>.grid-start-4{grid-column-start:4}.monster-field-layout>.grid-double-span{grid-column:span 3}.monster-field-layout>.grid-to-end{grid-column-end:-1}.monster-field-layout>input[type=email],.monster-field-layout>input[type=number],.monster-field-layout>input[type=password],.monster-field-layout>input[type=tel],.monster-field-layout>input[type=text]{height:-webkit-fill-available}.monster-field-layout>input:not([type=checkbox]):not([type=radio]),.monster-field-layout>select{border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);width:100%}.monster-field-layout>select{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-field-layout>select:disabled,.monster-field-layout>select[readonly]{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);cursor:default}.monster-field-layout>input:not([type=checkbox]):not([type=radio])[readonly]{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-field-layout>input[readonly]:not([type=checkbox]):not([type=radio]){background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);cursor:default}.monster-field-layout>input,.monster-field-layout>monster-choice-cards,.monster-field-layout>monster-toggle-switch,.monster-field-layout>select{box-sizing:border-box;min-height:1.8rem;padding:.5rem}.monster-field-layout>monster-password{min-height:1.8rem}.monster-field-layout>input[type=color]{min-height:2.2rem;padding:0 .2rem;width:100%}.monster-field-layout>input[type=date],.monster-field-layout>input[type=time]{min-height:2.2rem;padding:0 .2rem}.monster-field-layout>input[type=checkbox],.monster-field-layout>input[type=radio]{min-height:2.2rem;padding:0 .2rem;width:1.8rem}.monster-field-layout>input[type=file]{min-height:1.2rem;padding:.4rem}.monster-field-layout>[data-monster-validation-wrapper],.monster-field-layout>input,.monster-field-layout>monster-choice-cards,.monster-field-layout>monster-password,.monster-field-layout>monster-toggle-switch,.monster-field-layout>select{align-self:end}.monster-field-layout>select[multiple],.monster-field-layout>select[size]:not([size=\"1\"]){align-self:stretch;min-height:7.2rem;overflow-y:auto;padding:.25rem .35rem}.monster-field-layout>select[multiple] option,.monster-field-layout>select[size]:not([size=\"1\"]) option{padding-block:.15rem}.monster-field-layout>monster-toggle-switch{padding:0;width:3rem}.monster-field-layout>monster-choice-cards{align-self:stretch;padding:0}@container field-layout (max-width: 1200px){.monster-field-layout.multiple-columns{grid-template-columns:auto 1fr auto 1fr}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6{margin:var(--monster-field-set-heading-margin-top-1200,2.2rem) 0 .1rem}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first-1200,.6rem)}.monster-field-layout>.grid-double-span{grid-column:span 1}}@container field-layout (max-width: 900px){.monster-field-layout.multiple-columns{grid-template-columns:auto 1fr}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6{margin:var(--monster-field-set-heading-margin-top-900,1.8rem) 0 .1rem}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first-900,.5rem)}.monster-field-layout>.grid-double-span{grid-column:span 1}}@container field-layout (max-width: 500px){.monster-field-layout{gap:0;grid-template-columns:1fr}.monster-field-layout>h1,.monster-field-layout>h2,.monster-field-layout>h3,.monster-field-layout>h4,.monster-field-layout>h5,.monster-field-layout>h6{grid-column:1;margin:var(--monster-field-set-heading-margin-top-500,1.3rem) 0 .1rem}.monster-field-layout>h1:first-of-type,.monster-field-layout>h2:first-of-type,.monster-field-layout>h3:first-of-type,.monster-field-layout>h4:first-of-type,.monster-field-layout>h5:first-of-type{margin-top:var(--monster-field-set-heading-margin-top-first-500,.4rem)}.monster-field-layout>div.wrapper,.monster-field-layout>input,.monster-field-layout>monster-action-button,.monster-field-layout>monster-api-button,.monster-field-layout>monster-button,.monster-field-layout>monster-choice-cards,.monster-field-layout>monster-datasource-save-button,.monster-field-layout>monster-password,.monster-field-layout>monster-state-button,.monster-field-layout>monster-toggle-switch,.monster-field-layout>select,.monster-field-layout>textarea{grid-column:1}.monster-field-layout>.label,.monster-field-layout>label{border-bottom:none;padding-top:1rem}.monster-field-layout.multiple-columns{grid-template-columns:1fr}.monster-field-layout>.grid-span-full,.monster-field-layout>.grid-start-1,.monster-field-layout>.grid-start-2,.monster-field-layout>.grid-start-3,.monster-field-layout>.grid-start-4{grid-column:1!important}.monster-field-layout>.grid-double-span{grid-column:span 1!important}} 
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

package/source/monster.mjs

@@ -83,6 +83,7 @@ export * from "./components/form/credential-button.mjs";
 export * from "./components/form/wizard.mjs";
 export * from "./components/form/input-group.mjs";
 export * from "./components/form/checklist.mjs";
+export * from "./components/form/choice-cards.mjs";
 export * from "./components/form/shadow-reload.mjs";
 export * from "./components/form/button.mjs";
 export * from "./components/form/field-set.mjs";

package/test/cases/components/form/choice-cards.mjs

@@ -0,0 +1,192 @@
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+let ChoiceCards;
+
+function waitForCondition(check, { timeout = 4000, interval = 25 } = {}) {
+  return new Promise((resolve, reject) => {
+    const start = Date.now();
+
+    const poll = () => {
+      try {
+        if (check()) {
+          resolve();
+          return;
+        }
+      } catch (e) {
+        reject(e);
+        return;
+      }
+
+      if (Date.now() - start >= timeout) {
+        reject(new Error("Timed out while waiting for test condition."));
+        return;
+      }
+
+      setTimeout(poll, interval);
+    };
+
+    poll();
+  });
+}
+
+describe("ChoiceCards", function () {
+  before(function (done) {
+    initJSDOM()
+      .then(() => {
+        return import("element-internals-polyfill");
+      })
+      .then(() => {
+        return import("../../../../source/components/form/form.mjs");
+      })
+      .then(() => {
+        return import("../../../../source/components/form/choice-cards.mjs");
+      })
+      .then((m) => {
+        ChoiceCards = m["ChoiceCards"];
+        done();
+      })
+      .catch((e) => done(e));
+  });
+
+  beforeEach(() => {
+    document.getElementById("mocks").innerHTML = '<div id="test"></div>';
+  });
+
+  afterEach(() => {
+    document.getElementById("mocks").innerHTML = "";
+  });
+
+  it("creates a custom element instance", function () {
+    expect(document.createElement("monster-choice-cards")).is.instanceof(
+      ChoiceCards,
+    );
+  });
+
+  it("renders choice cards from items", function () {
+    const cards = document.createElement("monster-choice-cards");
+    cards.setItems([
+      { value: "assets", label: "Project assets", icon: "project-assets" },
+      { value: "api", label: "API collection", icon: "api-collection" },
+    ]);
+
+    document.getElementById("test").appendChild(cards);
+
+    const choices = cards.shadowRoot.querySelectorAll(
+      '[data-monster-role="choice"]',
+    );
+    expect(choices.length).is.equal(2);
+    expect(choices[0].textContent).contains("Project assets");
+    expect(choices[1].textContent).contains("API collection");
+  });
+
+  it("renders custom card content from slots", function () {
+    const cards = document.createElement("monster-choice-cards");
+    cards.setItems([
+      { value: "assets", label: "Project assets", contentSlot: "assets-card" },
+      { value: "api", label: "API collection", contentSlot: "api-card" },
+      { value: "manual", label: "Manual", contentSlot: "manual-card" },
+    ]);
+
+    const assets = document.createElement("span");
+    assets.slot = "assets-card";
+    assets.textContent = "Custom assets content";
+    cards.appendChild(assets);
+
+    document.getElementById("test").appendChild(cards);
+
+    const choices = cards.shadowRoot.querySelectorAll(
+      '[data-monster-role="choice"]',
+    );
+    expect(choices.length).is.equal(3);
+    expect(
+      cards.shadowRoot
+        .querySelector('[data-choice-value="assets"] slot')
+        .getAttribute("name"),
+    ).is.equal("assets-card");
+  });
+
+  it("selects a card and emits change events", function (done) {
+    const cards = document.createElement("monster-choice-cards");
+    cards.setItems([
+      { value: "assets", label: "Project assets" },
+      { value: "api", label: "API collection" },
+    ]);
+
+    cards.addEventListener("monster-change", (event) => {
+      expect(event.detail.value).is.equal("api");
+      expect(cards.value).is.equal("api");
+      expect(
+        cards.shadowRoot
+          .querySelector('[data-choice-value="api"]')
+          .getAttribute("aria-checked"),
+      ).is.equal("true");
+      done();
+    });
+
+    document.getElementById("test").appendChild(cards);
+    cards.shadowRoot.querySelector('[data-choice-value="api"]').click();
+  });
+
+  it("reads from and writes back to a form datasource", async function () {
+    this.timeout(6000);
+
+    document.getElementById("test").innerHTML = `
+      <monster-datasource-dom id="choice-ds">
+        <script type="application/json">
+          [
+            {
+              "source": "assets"
+            }
+          ]
+        </script>
+      </monster-datasource-dom>
+      <monster-form
+        id="choice-form"
+        data-monster-option-datasource-selector="#choice-ds"
+        data-monster-option-mapping-data=""
+        data-monster-option-mapping-index="0"
+      >
+        <monster-choice-cards
+          id="choice-source"
+          data-monster-attributes="value path:data.source"
+          data-monster-bind="path:data.source"
+          data-monster-options='{
+            "items": [
+              { "value": "assets", "label": "Assets", "contentSlot": "assets-card" },
+              { "value": "api", "label": "API", "contentSlot": "api-card" }
+            ]
+          }'
+        >
+          <span slot="assets-card">Assets</span>
+          <span slot="api-card">API</span>
+        </monster-choice-cards>
+      </monster-form>
+    `;
+
+    const datasource = document.getElementById("choice-ds");
+    const cards = document.getElementById("choice-source");
+
+    await waitForCondition(() => cards.value === "assets");
+
+    cards.select("api");
+    await waitForCondition(() => datasource.data?.[0]?.source === "api");
+  });
+
+  it("does not select disabled items", function () {
+    const cards = document.createElement("monster-choice-cards");
+    cards.setItems([
+      { value: "assets", label: "Project assets" },
+      { value: "api", label: "API collection", disabled: true },
+    ]);
+
+    document.getElementById("test").appendChild(cards);
+    cards.select("api");
+
+    expect(cards.value).is.equal(null);
+  });
+});