@webwriter/quiz 1.0.4 → 1.0.5

package/dist/widgets/webwriter-order.js

@@ -1312,27 +1312,6 @@ function option(decl = { type: "string" }) {
     context.addInitializer(init);
   };
 }
-function action(decl) {
-  return (target, context) => {
-    function init() {
-      this.constructor["actions"] = { ...this.constructor["actions"], [context.name]: decl };
-    }
-    context.addInitializer(init);
-    function func(...args) {
-      this._inTransaction = true;
-      try {
-        return target.apply(this, args);
-      } finally {
-        this._inTransaction = false;
-      }
-    }
-    if (context.kind === "method") {
-      return func;
-    } else {
-      context.access.set(this, func);
-    }
-  };
-}
 var _lang_dec;
 var _contentEditable_dec;
 var _a;
@@ -1555,17 +1534,17 @@ var LocalizeController = class {
     return `${this.host.lang || documentLanguage}`.toLowerCase();
   }
   getTranslationData(lang) {
-    var _a4, _b;
+    var _a3, _b;
     const locale = new Intl.Locale(lang.replace(/_/g, "-"));
     const language = locale === null || locale === void 0 ? void 0 : locale.language.toLowerCase();
-    const region = (_b = (_a4 = locale === null || locale === void 0 ? void 0 : locale.region) === null || _a4 === void 0 ? void 0 : _a4.toLowerCase()) !== null && _b !== void 0 ? _b : "";
+    const region = (_b = (_a3 = locale === null || locale === void 0 ? void 0 : locale.region) === null || _a3 === void 0 ? void 0 : _a3.toLowerCase()) !== null && _b !== void 0 ? _b : "";
     const primary = translations.get(`${language}-${region}`);
     const secondary = translations.get(language);
     return { locale, language, region, primary, secondary };
   }
   exists(key, options) {
-    var _a4;
-    const { primary, secondary } = this.getTranslationData((_a4 = options.lang) !== null && _a4 !== void 0 ? _a4 : this.lang());
+    var _a3;
+    const { primary, secondary } = this.getTranslationData((_a3 = options.lang) !== null && _a3 !== void 0 ? _a3 : this.lang());
     options = Object.assign({ includeFallback: false }, options);
     if (primary && primary[key] || secondary && secondary[key] || options.includeFallback && fallback && fallback[key]) {
       return true;
@@ -1832,11 +1811,11 @@ var FormControlController = class {
       }
     };
     this.handleFormSubmit = (event) => {
-      var _a4;
+      var _a3;
       const disabled = this.options.disabled(this.host);
       const reportValidity = this.options.reportValidity;
       if (this.form && !this.form.noValidate) {
-        (_a4 = formCollections.get(this.form)) == null ? void 0 : _a4.forEach((control) => {
+        (_a3 = formCollections.get(this.form)) == null ? void 0 : _a3.forEach((control) => {
           this.setUserInteracted(control, true);
         });
       }
@@ -1902,8 +1881,8 @@ var FormControlController = class {
       value: (input) => input.value,
       defaultValue: (input) => input.defaultValue,
       disabled: (input) => {
-        var _a4;
-        return (_a4 = input.disabled) != null ? _a4 : false;
+        var _a3;
+        return (_a3 = input.disabled) != null ? _a3 : false;
       },
       reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
       checkValidity: (input) => typeof input.checkValidity === "function" ? input.checkValidity() : true,
@@ -2021,8 +2000,8 @@ var FormControlController = class {
   }
   /** Returns the associated `<form>` element, if one exists. */
   getForm() {
-    var _a4;
-    return (_a4 = this.form) != null ? _a4 : null;
+    var _a3;
+    return (_a3 = this.form) != null ? _a3 : null;
   }
   /** Resets the form, restoring all the control to their default value */
   reset(submitter) {
@@ -2954,9 +2933,6 @@ function watch(propertyName, options) {
 // ../../node_modules/lit/node_modules/lit-html/directive-helpers.js
 var { I: et3 } = si;
 var nt = (o6, t5) => void 0 === t5 ? void 0 !== o6?._$litType$ : o6?._$litType$ === t5;
-var rt = (o6) => void 0 === o6.strings;
-var ht = {};
-var dt = (o6, t5 = ht) => o6._$AH = t5;
 
 // ../../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.O7VCMB7W.js
 var CACHEABLE_ERROR = Symbol();
@@ -2973,7 +2949,7 @@ var SlIcon = class extends ShoelaceElement {
   }
   /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
   async resolveIcon(url, library2) {
-    var _a4;
+    var _a3;
     let fileData;
     if (library2 == null ? void 0 : library2.spriteSheet) {
       this.svg = ke`<svg part="svg">
@@ -2992,7 +2968,7 @@ var SlIcon = class extends ShoelaceElement {
       const div = document.createElement("div");
       div.innerHTML = await fileData.text();
       const svg = div.firstElementChild;
-      if (((_a4 = svg == null ? void 0 : svg.tagName) == null ? void 0 : _a4.toLowerCase()) !== "svg")
+      if (((_a3 = svg == null ? void 0 : svg.tagName) == null ? void 0 : _a3.toLowerCase()) !== "svg")
         return CACHEABLE_ERROR;
       if (!parser)
         parser = new DOMParser();
@@ -3044,7 +3020,7 @@ var SlIcon = class extends ShoelaceElement {
     }
   }
   async setIcon() {
-    var _a4;
+    var _a3;
     const { url, fromLibrary } = this.getIconSource();
     const library2 = fromLibrary ? getIconLibrary(this.library) : void 0;
     if (!url) {
@@ -3085,7 +3061,7 @@ var SlIcon = class extends ShoelaceElement {
         break;
       default:
         this.svg = svg.cloneNode(true);
-        (_a4 = library2 == null ? void 0 : library2.mutator) == null ? void 0 : _a4.call(library2, this.svg);
+        (_a3 = library2 == null ? void 0 : library2.mutator) == null ? void 0 : _a3.call(library2, this.svg);
         this.emit("sl-load");
     }
   }
@@ -3450,1671 +3426,197 @@ __decorateClass([
 // ../../node_modules/bootstrap-icons/icons/plus.svg
 var plus_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">%0A  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>%0A</svg>';
 
-// ../../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.FKMWLPHV.js
-var radio_styles_default = i`
-  :host {
-    display: block;
-  }
-
-  :host(:focus-visible) {
-    outline: 0px;
-  }
-
-  .radio {
-    display: inline-flex;
-    align-items: top;
-    font-family: var(--sl-input-font-family);
-    font-size: var(--sl-input-font-size-medium);
-    font-weight: var(--sl-input-font-weight);
-    color: var(--sl-input-label-color);
-    vertical-align: middle;
-    cursor: pointer;
-  }
-
-  .radio--small {
-    --toggle-size: var(--sl-toggle-size-small);
-    font-size: var(--sl-input-font-size-small);
-  }
-
-  .radio--medium {
-    --toggle-size: var(--sl-toggle-size-medium);
-    font-size: var(--sl-input-font-size-medium);
+// src/widgets/webwriter-order.ts
+function shuffle(a3) {
+  for (let i4 = a3.length - 1; i4 > 0; i4--) {
+    const j3 = Math.floor(Math.random() * (i4 + 1));
+    [a3[i4], a3[j3]] = [a3[j3], a3[i4]];
   }
-
-  .radio--large {
-    --toggle-size: var(--sl-toggle-size-large);
-    font-size: var(--sl-input-font-size-large);
+  return a3;
+}
+var _solution_dec, _items_dec, _itemsSlot_dec, _hideOrderButtons_dec, _layout_dec, _a2, _WebwriterOrder_decorators, _init2, _itemsSlot, _items, _solution;
+_WebwriterOrder_decorators = [t3("webwriter-order")];
+var WebwriterOrder = class extends (_a2 = LitElementWw, _layout_dec = [n5({ type: String, attribute: true, reflect: true }), option({
+  type: "select",
+  options: [
+    { value: "list", label: { "en": "List" } },
+    { value: "tiles", label: { "en": "Tiles" } }
+  ]
+})], _hideOrderButtons_dec = [n5({ type: Boolean, attribute: true, reflect: true }), option({ type: Boolean, label: { _: "Hide order buttons" } })], _itemsSlot_dec = [e5("#items-slot")], _items_dec = [o5()], _solution_dec = [n5({ attribute: false })], _a2) {
+  constructor() {
+    super(...arguments);
+    __runInitializers(_init2, 5, this);
+    __publicField(this, "observer");
+    __publicField(this, "orderSheet", new CSSStyleSheet());
+    __publicField(this, "clearDropPreviews", () => {
+      this.items.forEach((item) => item.dropPreview = void 0);
+    });
+    __privateAdd(this, _itemsSlot, __runInitializers(_init2, 8, this)), __runInitializers(_init2, 11, this);
+    __privateAdd(this, _items, __runInitializers(_init2, 12, this)), __runInitializers(_init2, 15, this);
+    __publicField(this, "handleMove", (e7) => {
+      const elem = e7.target;
+      const children = Array.from(this.children);
+      const pos = children.indexOf(elem);
+      let i4;
+      if (e7.type === "ww-moveup") {
+        i4 = Math.max(0, pos - 1);
+      } else if (e7.type === "ww-movedown") {
+        i4 = Math.min(children.length, pos + 2);
+      } else if (e7.type === "ww-moveto") {
+        i4 = e7.detail.i;
+      }
+      this.moveChild(elem, i4);
+    });
+    __privateAdd(this, _solution, []);
   }
-
-  .radio__checked-icon {
-    display: inline-flex;
-    width: var(--toggle-size);
-    height: var(--toggle-size);
+  get layout() {
+    return this.children?.item(0)?.getAttribute("layout") ?? "list";
   }
-
-  .radio__control {
-    flex: 0 0 auto;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--toggle-size);
-    height: var(--toggle-size);
-    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
-    border-radius: 50%;
-    background-color: var(--sl-input-background-color);
-    color: transparent;
-    transition:
-      var(--sl-transition-fast) border-color,
-      var(--sl-transition-fast) background-color,
-      var(--sl-transition-fast) color,
-      var(--sl-transition-fast) box-shadow;
+  set layout(value) {
+    this.querySelectorAll("webwriter-order-item").forEach((el) => el.setAttribute("layout", value));
+    this.requestUpdate("layout");
   }
-
-  .radio__input {
-    position: absolute;
-    opacity: 0;
-    padding: 0;
-    margin: 0;
-    pointer-events: none;
+  get hideOrderButtons() {
+    return !!this.items[0]?.hideOrderButtons;
   }
-
-  /* Hover */
-  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
-    border-color: var(--sl-input-border-color-hover);
-    background-color: var(--sl-input-background-color-hover);
+  set hideOrderButtons(value) {
+    this.items.forEach((item) => item.hideOrderButtons = value);
   }
-
-  /* Checked */
-  .radio--checked .radio__control {
-    color: var(--sl-color-neutral-0);
-    border-color: var(--sl-color-primary-600);
-    background-color: var(--sl-color-primary-600);
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("ww-moveup", this.handleMove);
+    this.addEventListener("ww-movedown", this.handleMove);
+    this.addEventListener("ww-moveto", this.handleMove);
+    this.observer = new MutationObserver(() => {
+      this.items.forEach((item) => item.requestUpdate());
+      if (this.isContentEditable) {
+        this.solution = this.items.map((item) => item.id);
+      }
+      this.clearDropPreviews();
+    });
+    this.observer.observe(this, { childList: true });
   }
-
-  /* Checked + hover */
-  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
-    border-color: var(--sl-color-primary-500);
-    background-color: var(--sl-color-primary-500);
+  serializedCallback() {
+    this.shuffleItems();
   }
-
-  /* Checked + focus */
-  :host(:focus-visible) .radio__control {
-    outline: var(--sl-focus-ring);
-    outline-offset: var(--sl-focus-ring-offset);
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+    this.observer = void 0;
   }
-
-  /* Disabled */
-  .radio--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+  addItem() {
+    const orderItem = this.ownerDocument.createElement("webwriter-order-item");
+    const p3 = this.ownerDocument.createElement("p");
+    orderItem.appendChild(p3);
+    orderItem.setAttribute("layout", this.layout);
+    this.append(orderItem);
+    this.solution = [...__privateGet(this, _solution), orderItem.id];
+    this.ownerDocument.getSelection().setBaseAndExtent(p3, 0, p3, 0);
   }
-
-  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
-  .radio:not(.radio--checked) svg circle {
-    opacity: 0;
+  shuffleItems() {
+    const n6 = this.items.length;
+    const nums = shuffle([...new Array(n6).keys()]);
+    this.innerHTML = nums.map((i4) => this.children.item(i4).outerHTML).join("");
   }
-
-  .radio__label {
-    display: inline-block;
-    color: var(--sl-input-label-color);
-    line-height: var(--toggle-size);
-    margin-inline-start: 0.5em;
-    user-select: none;
-    -webkit-user-select: none;
+  handleKeyDown(e7) {
+    if (e7.key == "ArrowDown") {
+      e7.stopPropagation();
+      e7.preventDefault();
+    } else if (e7.key === "ArrowUp") {
+      e7.stopPropagation();
+      e7.preventDefault();
+    }
   }
-`;
-
-// ../../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.N5H7JIU3.js
-var SlRadio = class extends ShoelaceElement {
-  constructor() {
-    super();
-    this.checked = false;
-    this.hasFocus = false;
-    this.size = "medium";
-    this.disabled = false;
-    this.handleBlur = () => {
-      this.hasFocus = false;
-      this.emit("sl-blur");
-    };
-    this.handleClick = () => {
-      if (!this.disabled) {
-        this.checked = true;
-      }
-    };
-    this.handleFocus = () => {
-      this.hasFocus = true;
-      this.emit("sl-focus");
-    };
-    this.addEventListener("blur", this.handleBlur);
-    this.addEventListener("click", this.handleClick);
-    this.addEventListener("focus", this.handleFocus);
+  /*
+  If contenteditable: Reorder solution -> Triggers orderSheet change
+  If not contenteditable: Reorder value -> Triggers orderSheet change 
+  */
+  moveChild(elem, i4) {
+    if (i4 === 0) {
+      this.insertAdjacentElement("afterbegin", elem);
+    } else if (i4 < this.items.length) {
+      this.items[i4].insertAdjacentElement("beforebegin", elem);
+    } else {
+      this.insertAdjacentElement("beforeend", elem);
+    }
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setInitialAttributes();
+  get solution() {
+    return __privateGet(this, _solution)?.length ? __privateGet(this, _solution) : void 0;
   }
-  setInitialAttributes() {
-    this.setAttribute("role", "radio");
-    this.setAttribute("tabindex", "-1");
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  set solution(value) {
+    __privateSet(this, _solution, value);
+    if (value) {
+      this.dispatchEvent(new CustomEvent("ww-answer-change", {
+        bubbles: true,
+        composed: true
+      }));
+    }
   }
-  handleCheckedChange() {
-    this.setAttribute("aria-checked", this.checked ? "true" : "false");
-    this.setAttribute("tabindex", this.checked ? "0" : "-1");
+  reportSolution() {
+    this.solution.forEach((id, i4) => this.querySelector(`#${id}`).validOrder = i4);
   }
-  handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  reset() {
+    this.solution = void 0;
+    this.shuffleItems();
   }
   render() {
     return ke`
-      <span
-        part="base"
-        class=${Rt({
-      radio: true,
-      "radio--checked": this.checked,
-      "radio--disabled": this.disabled,
-      "radio--focused": this.hasFocus,
-      "radio--small": this.size === "small",
-      "radio--medium": this.size === "medium",
-      "radio--large": this.size === "large"
-    })}
-      >
-        <span part="${`control${this.checked ? " control--checked" : ""}`}" class="radio__control">
-          ${this.checked ? ke` <sl-icon part="checked-icon" class="radio__checked-icon" library="system" name="radio"></sl-icon> ` : ""}
-        </span>
-
-        <slot part="label" class="radio__label"></slot>
-      </span>
+      <slot id="items-slot" @webwriter-clear-drop-preview=${this.clearDropPreviews}></slot>
+      <sl-button size="small" id="add-option" class="author-only" @click=${() => this.addItem()}>
+        <sl-icon src=${plus_default}></sl-icon><span>Add Option</span>
+      </sl-button>
     `;
   }
 };
-SlRadio.styles = [component_styles_default, radio_styles_default];
-SlRadio.dependencies = { "sl-icon": SlIcon };
-__decorateClass([
-  r5()
-], SlRadio.prototype, "checked", 2);
-__decorateClass([
-  r5()
-], SlRadio.prototype, "hasFocus", 2);
-__decorateClass([
-  n5()
-], SlRadio.prototype, "value", 2);
-__decorateClass([
-  n5({ reflect: true })
-], SlRadio.prototype, "size", 2);
-__decorateClass([
-  n5({ type: Boolean, reflect: true })
-], SlRadio.prototype, "disabled", 2);
-__decorateClass([
-  watch("checked")
-], SlRadio.prototype, "handleCheckedChange", 1);
-__decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
-], SlRadio.prototype, "handleDisabledChange", 1);
+_init2 = __decoratorStart(_a2);
+_itemsSlot = new WeakMap();
+_items = new WeakMap();
+_solution = new WeakMap();
+__decorateElement(_init2, 3, "layout", _layout_dec, WebwriterOrder);
+__decorateElement(_init2, 3, "hideOrderButtons", _hideOrderButtons_dec, WebwriterOrder);
+__decorateElement(_init2, 4, "itemsSlot", _itemsSlot_dec, WebwriterOrder, _itemsSlot);
+__decorateElement(_init2, 4, "items", _items_dec, WebwriterOrder, _items);
+__decorateElement(_init2, 3, "solution", _solution_dec, WebwriterOrder);
+WebwriterOrder = __decorateElement(_init2, 0, "WebwriterOrder", _WebwriterOrder_decorators, WebwriterOrder);
+__publicField(WebwriterOrder, "scopedElements", {
+  "sl-button": SlButton,
+  "sl-icon": SlIcon
+});
+__publicField(WebwriterOrder, "styles", i`
+    :host {
+      display: flex !important;
+      flex-direction: column;
+      align-items: flex-start;
+      counter-reset: orderItem;
+      gap: 2px;
+    }
 
-// ../../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.R3NF57O3.js
-var checkbox_styles_default = i`
-  :host {
-    display: inline-block;
-  }
+    :host([layout=tiles]) {
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 15px;
+    }
 
-  .checkbox {
-    position: relative;
-    display: inline-flex;
-    align-items: flex-start;
-    font-family: var(--sl-input-font-family);
-    font-weight: var(--sl-input-font-weight);
-    color: var(--sl-input-label-color);
-    vertical-align: middle;
-    cursor: pointer;
-  }
+    :host(:is([contenteditable=true], [contenteditable=""])) {
+      --text-color: var(--sl-color-success-700);
+    }
 
-  .checkbox--small {
-    --toggle-size: var(--sl-toggle-size-small);
-    font-size: var(--sl-input-font-size-small);
-  }
+    :host ::slotted(*::part(counter)) {
+      counter-increment: orderItem;
+      content: counter(orderItem) '. ';
+      cursor: move;
+      text-align: right;
+      padding-right: 0.5em;
+      min-width: 1.5em;
+      color: var(--text-color, auto);
+    }
 
-  .checkbox--medium {
-    --toggle-size: var(--sl-toggle-size-medium);
-    font-size: var(--sl-input-font-size-medium);
-  }
-
-  .checkbox--large {
-    --toggle-size: var(--sl-toggle-size-large);
-    font-size: var(--sl-input-font-size-large);
-  }
-
-  .checkbox__control {
-    flex: 0 0 auto;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--toggle-size);
-    height: var(--toggle-size);
-    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
-    border-radius: 2px;
-    background-color: var(--sl-input-background-color);
-    color: var(--sl-color-neutral-0);
-    transition:
-      var(--sl-transition-fast) border-color,
-      var(--sl-transition-fast) background-color,
-      var(--sl-transition-fast) color,
-      var(--sl-transition-fast) box-shadow;
-  }
-
-  .checkbox__input {
-    position: absolute;
-    opacity: 0;
-    padding: 0;
-    margin: 0;
-    pointer-events: none;
-  }
-
-  .checkbox__checked-icon,
-  .checkbox__indeterminate-icon {
-    display: inline-flex;
-    width: var(--toggle-size);
-    height: var(--toggle-size);
-  }
-
-  /* Hover */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
-    border-color: var(--sl-input-border-color-hover);
-    background-color: var(--sl-input-background-color-hover);
-  }
-
-  /* Focus */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
-    outline: var(--sl-focus-ring);
-    outline-offset: var(--sl-focus-ring-offset);
-  }
-
-  /* Checked/indeterminate */
-  .checkbox--checked .checkbox__control,
-  .checkbox--indeterminate .checkbox__control {
-    border-color: var(--sl-color-primary-600);
-    background-color: var(--sl-color-primary-600);
-  }
-
-  /* Checked/indeterminate + hover */
-  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
-    border-color: var(--sl-color-primary-500);
-    background-color: var(--sl-color-primary-500);
-  }
-
-  /* Checked/indeterminate + focus */
-  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
-    outline: var(--sl-focus-ring);
-    outline-offset: var(--sl-focus-ring-offset);
-  }
-
-  /* Disabled */
-  .checkbox--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .checkbox__label {
-    display: inline-block;
-    color: var(--sl-input-label-color);
-    line-height: var(--toggle-size);
-    margin-inline-start: 0.5em;
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  :host([required]) .checkbox__label::after {
-    content: var(--sl-input-required-content);
-    color: var(--sl-input-required-content-color);
-    margin-inline-start: var(--sl-input-required-content-offset);
-  }
-`;
-
-// ../../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.GI7VDIWX.js
-var defaultValue = (propertyName = "value") => (proto, key) => {
-  const ctor = proto.constructor;
-  const attributeChangedCallback = ctor.prototype.attributeChangedCallback;
-  ctor.prototype.attributeChangedCallback = function(name, old, value) {
-    var _a4;
-    const options = ctor.getPropertyOptions(propertyName);
-    const attributeName = typeof options.attribute === "string" ? options.attribute : propertyName;
-    if (name === attributeName) {
-      const converter = options.converter || u;
-      const fromAttribute = typeof converter === "function" ? converter : (_a4 = converter == null ? void 0 : converter.fromAttribute) != null ? _a4 : u.fromAttribute;
-      const newValue = fromAttribute(value, options.type);
-      if (this[propertyName] !== newValue) {
-        this[key] = newValue;
-      }
-    }
-    attributeChangedCallback.call(this, name, old, value);
-  };
-};
-
-// ../../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.SI4ACBFK.js
-var form_control_styles_default = i`
-  .form-control .form-control__label {
-    display: none;
-  }
-
-  .form-control .form-control__help-text {
-    display: none;
-  }
-
-  /* Label */
-  .form-control--has-label .form-control__label {
-    display: inline-block;
-    color: var(--sl-input-label-color);
-    margin-bottom: var(--sl-spacing-3x-small);
-  }
-
-  .form-control--has-label.form-control--small .form-control__label {
-    font-size: var(--sl-input-label-font-size-small);
-  }
-
-  .form-control--has-label.form-control--medium .form-control__label {
-    font-size: var(--sl-input-label-font-size-medium);
-  }
-
-  .form-control--has-label.form-control--large .form-control__label {
-    font-size: var(--sl-input-label-font-size-large);
-  }
-
-  :host([required]) .form-control--has-label .form-control__label::after {
-    content: var(--sl-input-required-content);
-    margin-inline-start: var(--sl-input-required-content-offset);
-    color: var(--sl-input-required-content-color);
-  }
-
-  /* Help text */
-  .form-control--has-help-text .form-control__help-text {
-    display: block;
-    color: var(--sl-input-help-text-color);
-    margin-top: var(--sl-spacing-3x-small);
-  }
-
-  .form-control--has-help-text.form-control--small .form-control__help-text {
-    font-size: var(--sl-input-help-text-font-size-small);
-  }
-
-  .form-control--has-help-text.form-control--medium .form-control__help-text {
-    font-size: var(--sl-input-help-text-font-size-medium);
-  }
-
-  .form-control--has-help-text.form-control--large .form-control__help-text {
-    font-size: var(--sl-input-help-text-font-size-large);
-  }
-
-  .form-control--has-help-text.form-control--radio-group .form-control__help-text {
-    margin-top: var(--sl-spacing-2x-small);
-  }
-`;
-
-// ../../node_modules/lit/node_modules/lit-html/directives/live.js
-var Ft = e6(class extends i3 {
-  constructor(r6) {
-    if (super(r6), r6.type !== t4.PROPERTY && r6.type !== t4.ATTRIBUTE && r6.type !== t4.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
-    if (!rt(r6)) throw Error("`live` bindings can only contain a single expression");
-  }
-  render(r6) {
-    return r6;
-  }
-  update(r6, [e7]) {
-    if (e7 === R || e7 === D) return e7;
-    const i4 = r6.element, n6 = r6.name;
-    if (r6.type === t4.PROPERTY) {
-      if (e7 === i4[n6]) return R;
-    } else if (r6.type === t4.BOOLEAN_ATTRIBUTE) {
-      if (!!e7 === i4.hasAttribute(n6)) return R;
-    } else if (r6.type === t4.ATTRIBUTE && i4.getAttribute(n6) === e7 + "") return R;
-    return dt(r6), e7;
-  }
-});
-
-// ../../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.CX3DZWHK.js
-var SlCheckbox = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.formControlController = new FormControlController(this, {
-      value: (control) => control.checked ? control.value || "on" : void 0,
-      defaultValue: (control) => control.defaultChecked,
-      setValue: (control, checked) => control.checked = checked
-    });
-    this.hasSlotController = new HasSlotController(this, "help-text");
-    this.hasFocus = false;
-    this.title = "";
-    this.name = "";
-    this.size = "medium";
-    this.disabled = false;
-    this.checked = false;
-    this.indeterminate = false;
-    this.defaultChecked = false;
-    this.form = "";
-    this.required = false;
-    this.helpText = "";
-  }
-  /** Gets the validity state object */
-  get validity() {
-    return this.input.validity;
-  }
-  /** Gets the validation message */
-  get validationMessage() {
-    return this.input.validationMessage;
-  }
-  firstUpdated() {
-    this.formControlController.updateValidity();
-  }
-  handleClick() {
-    this.checked = !this.checked;
-    this.indeterminate = false;
-    this.emit("sl-change");
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.emit("sl-blur");
-  }
-  handleInput() {
-    this.emit("sl-input");
-  }
-  handleInvalid(event) {
-    this.formControlController.setValidity(false);
-    this.formControlController.emitInvalidEvent(event);
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.emit("sl-focus");
-  }
-  handleDisabledChange() {
-    this.formControlController.setValidity(this.disabled);
-  }
-  handleStateChange() {
-    this.input.checked = this.checked;
-    this.input.indeterminate = this.indeterminate;
-    this.formControlController.updateValidity();
-  }
-  /** Simulates a click on the checkbox. */
-  click() {
-    this.input.click();
-  }
-  /** Sets focus on the checkbox. */
-  focus(options) {
-    this.input.focus(options);
-  }
-  /** Removes focus from the checkbox. */
-  blur() {
-    this.input.blur();
-  }
-  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
-  checkValidity() {
-    return this.input.checkValidity();
-  }
-  /** Gets the associated form, if one exists. */
-  getForm() {
-    return this.formControlController.getForm();
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity() {
-    return this.input.reportValidity();
-  }
-  /**
-   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
-   * the custom validation message, call this method with an empty string.
-   */
-  setCustomValidity(message) {
-    this.input.setCustomValidity(message);
-    this.formControlController.updateValidity();
-  }
-  render() {
-    const hasHelpTextSlot = this.hasSlotController.test("help-text");
-    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
-    return ke`
-      <div
-        class=${Rt({
-      "form-control": true,
-      "form-control--small": this.size === "small",
-      "form-control--medium": this.size === "medium",
-      "form-control--large": this.size === "large",
-      "form-control--has-help-text": hasHelpText
-    })}
-      >
-        <label
-          part="base"
-          class=${Rt({
-      checkbox: true,
-      "checkbox--checked": this.checked,
-      "checkbox--disabled": this.disabled,
-      "checkbox--focused": this.hasFocus,
-      "checkbox--indeterminate": this.indeterminate,
-      "checkbox--small": this.size === "small",
-      "checkbox--medium": this.size === "medium",
-      "checkbox--large": this.size === "large"
-    })}
-        >
-          <input
-            class="checkbox__input"
-            type="checkbox"
-            title=${this.title}
-            name=${this.name}
-            value=${to(this.value)}
-            .indeterminate=${Ft(this.indeterminate)}
-            .checked=${Ft(this.checked)}
-            .disabled=${this.disabled}
-            .required=${this.required}
-            aria-checked=${this.checked ? "true" : "false"}
-            aria-describedby="help-text"
-            @click=${this.handleClick}
-            @input=${this.handleInput}
-            @invalid=${this.handleInvalid}
-            @blur=${this.handleBlur}
-            @focus=${this.handleFocus}
-          />
-
-          <span
-            part="control${this.checked ? " control--checked" : ""}${this.indeterminate ? " control--indeterminate" : ""}"
-            class="checkbox__control"
-          >
-            ${this.checked ? ke`
-                  <sl-icon part="checked-icon" class="checkbox__checked-icon" library="system" name="check"></sl-icon>
-                ` : ""}
-            ${!this.checked && this.indeterminate ? ke`
-                  <sl-icon
-                    part="indeterminate-icon"
-                    class="checkbox__indeterminate-icon"
-                    library="system"
-                    name="indeterminate"
-                  ></sl-icon>
-                ` : ""}
-          </span>
-
-          <div part="label" class="checkbox__label">
-            <slot></slot>
-          </div>
-        </label>
-
-        <div
-          aria-hidden=${hasHelpText ? "false" : "true"}
-          class="form-control__help-text"
-          id="help-text"
-          part="form-control-help-text"
-        >
-          <slot name="help-text">${this.helpText}</slot>
-        </div>
-      </div>
-    `;
-  }
-};
-SlCheckbox.styles = [component_styles_default, form_control_styles_default, checkbox_styles_default];
-SlCheckbox.dependencies = { "sl-icon": SlIcon };
-__decorateClass([
-  e5('input[type="checkbox"]')
-], SlCheckbox.prototype, "input", 2);
-__decorateClass([
-  r5()
-], SlCheckbox.prototype, "hasFocus", 2);
-__decorateClass([
-  n5()
-], SlCheckbox.prototype, "title", 2);
-__decorateClass([
-  n5()
-], SlCheckbox.prototype, "name", 2);
-__decorateClass([
-  n5()
-], SlCheckbox.prototype, "value", 2);
-__decorateClass([
-  n5({ reflect: true })
-], SlCheckbox.prototype, "size", 2);
-__decorateClass([
-  n5({ type: Boolean, reflect: true })
-], SlCheckbox.prototype, "disabled", 2);
-__decorateClass([
-  n5({ type: Boolean, reflect: true })
-], SlCheckbox.prototype, "checked", 2);
-__decorateClass([
-  n5({ type: Boolean, reflect: true })
-], SlCheckbox.prototype, "indeterminate", 2);
-__decorateClass([
-  defaultValue("checked")
-], SlCheckbox.prototype, "defaultChecked", 2);
-__decorateClass([
-  n5({ reflect: true })
-], SlCheckbox.prototype, "form", 2);
-__decorateClass([
-  n5({ type: Boolean, reflect: true })
-], SlCheckbox.prototype, "required", 2);
-__decorateClass([
-  n5({ attribute: "help-text" })
-], SlCheckbox.prototype, "helpText", 2);
-__decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
-], SlCheckbox.prototype, "handleDisabledChange", 1);
-__decorateClass([
-  watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
-], SlCheckbox.prototype, "handleStateChange", 1);
-
-// ../../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.2P5EQCYK.js
-var radio_button_styles_default = i`
-  ${button_styles_default}
-
-  .button__prefix,
-  .button__suffix,
-  .button__label {
-    display: inline-flex;
-    position: relative;
-    align-items: center;
-  }
-
-  /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.
-    We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */
-  .hidden-input {
-    all: unset;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    outline: dotted 1px red;
-    opacity: 0;
-    z-index: -1;
-  }
-`;
-
-// ../../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.ZHOD7CUD.js
-var SlRadioButton = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.hasSlotController = new HasSlotController(this, "[default]", "prefix", "suffix");
-    this.hasFocus = false;
-    this.checked = false;
-    this.disabled = false;
-    this.size = "medium";
-    this.pill = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "presentation");
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.emit("sl-blur");
-  }
-  handleClick(e7) {
-    if (this.disabled) {
-      e7.preventDefault();
-      e7.stopPropagation();
-      return;
-    }
-    this.checked = true;
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.emit("sl-focus");
-  }
-  handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-  }
-  /** Sets focus on the radio button. */
-  focus(options) {
-    this.input.focus(options);
-  }
-  /** Removes focus from the radio button. */
-  blur() {
-    this.input.blur();
-  }
-  render() {
-    return ke3`
-      <div part="base" role="presentation">
-        <button
-          part="${`button${this.checked ? " button--checked" : ""}`}"
-          role="radio"
-          aria-checked="${this.checked}"
-          class=${Rt({
-      button: true,
-      "button--default": true,
-      "button--small": this.size === "small",
-      "button--medium": this.size === "medium",
-      "button--large": this.size === "large",
-      "button--checked": this.checked,
-      "button--disabled": this.disabled,
-      "button--focused": this.hasFocus,
-      "button--outline": true,
-      "button--pill": this.pill,
-      "button--has-label": this.hasSlotController.test("[default]"),
-      "button--has-prefix": this.hasSlotController.test("prefix"),
-      "button--has-suffix": this.hasSlotController.test("suffix")
-    })}
-          aria-disabled=${this.disabled}
-          type="button"
-          value=${to(this.value)}
-          @blur=${this.handleBlur}
-          @focus=${this.handleFocus}
-          @click=${this.handleClick}
-        >
-          <slot name="prefix" part="prefix" class="button__prefix"></slot>
-          <slot part="label" class="button__label"></slot>
-          <slot name="suffix" part="suffix" class="button__suffix"></slot>
-        </button>
-      </div>
-    `;
-  }
-};
-SlRadioButton.styles = [component_styles_default, radio_button_styles_default];
-__decorateClass([
-  e5(".button")
-], SlRadioButton.prototype, "input", 2);
-__decorateClass([
-  e5(".hidden-input")
-], SlRadioButton.prototype, "hiddenInput", 2);
-__decorateClass([
-  r5()
-], SlRadioButton.prototype, "hasFocus", 2);
-__decorateClass([
-  n5({ type: Boolean, reflect: true })
-], SlRadioButton.prototype, "checked", 2);
-__decorateClass([
-  n5()
-], SlRadioButton.prototype, "value", 2);
-__decorateClass([
-  n5({ type: Boolean, reflect: true })
-], SlRadioButton.prototype, "disabled", 2);
-__decorateClass([
-  n5({ reflect: true })
-], SlRadioButton.prototype, "size", 2);
-__decorateClass([
-  n5({ type: Boolean, reflect: true })
-], SlRadioButton.prototype, "pill", 2);
-__decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
-], SlRadioButton.prototype, "handleDisabledChange", 1);
-
-// ../../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.B63YXDJO.js
-var radio_group_styles_default = i`
-  :host {
-    display: block;
-  }
-
-  .form-control {
-    position: relative;
-    border: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .form-control__label {
-    padding: 0;
-  }
-
-  .radio-group--required .radio-group__label::after {
-    content: var(--sl-input-required-content);
-    margin-inline-start: var(--sl-input-required-content-offset);
-  }
-
-  .visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-`;
-
-// ../../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.2OUC42YY.js
-var button_group_styles_default = i`
-  :host {
-    display: inline-block;
-  }
-
-  .button-group {
-    display: flex;
-    flex-wrap: nowrap;
-  }
-`;
-
-// ../../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.RBPP5PLA.js
-var SlButtonGroup = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.disableRole = false;
-    this.label = "";
-  }
-  handleFocus(event) {
-    const button = findButton(event.target);
-    button == null ? void 0 : button.toggleAttribute("data-sl-button-group__button--focus", true);
-  }
-  handleBlur(event) {
-    const button = findButton(event.target);
-    button == null ? void 0 : button.toggleAttribute("data-sl-button-group__button--focus", false);
-  }
-  handleMouseOver(event) {
-    const button = findButton(event.target);
-    button == null ? void 0 : button.toggleAttribute("data-sl-button-group__button--hover", true);
-  }
-  handleMouseOut(event) {
-    const button = findButton(event.target);
-    button == null ? void 0 : button.toggleAttribute("data-sl-button-group__button--hover", false);
-  }
-  handleSlotChange() {
-    const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
-    slottedElements.forEach((el) => {
-      const index = slottedElements.indexOf(el);
-      const button = findButton(el);
-      if (button) {
-        button.toggleAttribute("data-sl-button-group__button", true);
-        button.toggleAttribute("data-sl-button-group__button--first", index === 0);
-        button.toggleAttribute("data-sl-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
-        button.toggleAttribute("data-sl-button-group__button--last", index === slottedElements.length - 1);
-        button.toggleAttribute(
-          "data-sl-button-group__button--radio",
-          button.tagName.toLowerCase() === "sl-radio-button"
-        );
-      }
-    });
-  }
-  render() {
-    return ke`
-      <div
-        part="base"
-        class="button-group"
-        role="${this.disableRole ? "presentation" : "group"}"
-        aria-label=${this.label}
-        @focusout=${this.handleBlur}
-        @focusin=${this.handleFocus}
-        @mouseover=${this.handleMouseOver}
-        @mouseout=${this.handleMouseOut}
-      >
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </div>
-    `;
-  }
-};
-SlButtonGroup.styles = [component_styles_default, button_group_styles_default];
-__decorateClass([
-  e5("slot")
-], SlButtonGroup.prototype, "defaultSlot", 2);
-__decorateClass([
-  r5()
-], SlButtonGroup.prototype, "disableRole", 2);
-__decorateClass([
-  n5()
-], SlButtonGroup.prototype, "label", 2);
-function findButton(el) {
-  var _a4;
-  const selector = "sl-button, sl-radio-button";
-  return (_a4 = el.closest(selector)) != null ? _a4 : el.querySelector(selector);
-}
-
-// ../../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.XISPCK6C.js
-var SlRadioGroup = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.formControlController = new FormControlController(this);
-    this.hasSlotController = new HasSlotController(this, "help-text", "label");
-    this.customValidityMessage = "";
-    this.hasButtonGroup = false;
-    this.errorMessage = "";
-    this.defaultValue = "";
-    this.label = "";
-    this.helpText = "";
-    this.name = "option";
-    this.value = "";
-    this.size = "medium";
-    this.form = "";
-    this.required = false;
-  }
-  /** Gets the validity state object */
-  get validity() {
-    const isRequiredAndEmpty = this.required && !this.value;
-    const hasCustomValidityMessage = this.customValidityMessage !== "";
-    if (hasCustomValidityMessage) {
-      return customErrorValidityState;
-    } else if (isRequiredAndEmpty) {
-      return valueMissingValidityState;
-    }
-    return validValidityState;
-  }
-  /** Gets the validation message */
-  get validationMessage() {
-    const isRequiredAndEmpty = this.required && !this.value;
-    const hasCustomValidityMessage = this.customValidityMessage !== "";
-    if (hasCustomValidityMessage) {
-      return this.customValidityMessage;
-    } else if (isRequiredAndEmpty) {
-      return this.validationInput.validationMessage;
-    }
-    return "";
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.defaultValue = this.value;
-  }
-  firstUpdated() {
-    this.formControlController.updateValidity();
-  }
-  getAllRadios() {
-    return [...this.querySelectorAll("sl-radio, sl-radio-button")];
-  }
-  handleRadioClick(event) {
-    const target = event.target.closest("sl-radio, sl-radio-button");
-    const radios = this.getAllRadios();
-    const oldValue = this.value;
-    if (!target || target.disabled) {
-      return;
-    }
-    this.value = target.value;
-    radios.forEach((radio) => radio.checked = radio === target);
-    if (this.value !== oldValue) {
-      this.emit("sl-change");
-      this.emit("sl-input");
-    }
-  }
-  handleKeyDown(event) {
-    var _a4;
-    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(event.key)) {
-      return;
-    }
-    const radios = this.getAllRadios().filter((radio) => !radio.disabled);
-    const checkedRadio = (_a4 = radios.find((radio) => radio.checked)) != null ? _a4 : radios[0];
-    const incr = event.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(event.key) ? -1 : 1;
-    const oldValue = this.value;
-    let index = radios.indexOf(checkedRadio) + incr;
-    if (index < 0) {
-      index = radios.length - 1;
-    }
-    if (index > radios.length - 1) {
-      index = 0;
-    }
-    this.getAllRadios().forEach((radio) => {
-      radio.checked = false;
-      if (!this.hasButtonGroup) {
-        radio.setAttribute("tabindex", "-1");
-      }
-    });
-    this.value = radios[index].value;
-    radios[index].checked = true;
-    if (!this.hasButtonGroup) {
-      radios[index].setAttribute("tabindex", "0");
-      radios[index].focus();
-    } else {
-      radios[index].shadowRoot.querySelector("button").focus();
-    }
-    if (this.value !== oldValue) {
-      this.emit("sl-change");
-      this.emit("sl-input");
-    }
-    event.preventDefault();
-  }
-  handleLabelClick() {
-    const radios = this.getAllRadios();
-    const checked = radios.find((radio) => radio.checked);
-    const radioToFocus = checked || radios[0];
-    if (radioToFocus) {
-      radioToFocus.focus();
-    }
-  }
-  handleInvalid(event) {
-    this.formControlController.setValidity(false);
-    this.formControlController.emitInvalidEvent(event);
-  }
-  async syncRadioElements() {
-    var _a4, _b;
-    const radios = this.getAllRadios();
-    await Promise.all(
-      // Sync the checked state and size
-      radios.map(async (radio) => {
-        await radio.updateComplete;
-        radio.checked = radio.value === this.value;
-        radio.size = this.size;
-      })
-    );
-    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sl-radio-button");
-    if (radios.length > 0 && !radios.some((radio) => radio.checked)) {
-      if (this.hasButtonGroup) {
-        const buttonRadio = (_a4 = radios[0].shadowRoot) == null ? void 0 : _a4.querySelector("button");
-        if (buttonRadio) {
-          buttonRadio.setAttribute("tabindex", "0");
-        }
-      } else {
-        radios[0].setAttribute("tabindex", "0");
-      }
-    }
-    if (this.hasButtonGroup) {
-      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sl-button-group");
-      if (buttonGroup) {
-        buttonGroup.disableRole = true;
-      }
-    }
-  }
-  syncRadios() {
-    if (customElements.get("sl-radio") && customElements.get("sl-radio-button")) {
-      this.syncRadioElements();
-      return;
-    }
-    if (customElements.get("sl-radio")) {
-      this.syncRadioElements();
-    } else {
-      customElements.whenDefined("sl-radio").then(() => this.syncRadios());
-    }
-    if (customElements.get("sl-radio-button")) {
-      this.syncRadioElements();
-    } else {
-      customElements.whenDefined("sl-radio-button").then(() => this.syncRadios());
-    }
-  }
-  updateCheckedRadio() {
-    const radios = this.getAllRadios();
-    radios.forEach((radio) => radio.checked = radio.value === this.value);
-    this.formControlController.setValidity(this.validity.valid);
-  }
-  handleSizeChange() {
-    this.syncRadios();
-  }
-  handleValueChange() {
-    if (this.hasUpdated) {
-      this.updateCheckedRadio();
-    }
-  }
-  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
-  checkValidity() {
-    const isRequiredAndEmpty = this.required && !this.value;
-    const hasCustomValidityMessage = this.customValidityMessage !== "";
-    if (isRequiredAndEmpty || hasCustomValidityMessage) {
-      this.formControlController.emitInvalidEvent();
-      return false;
-    }
-    return true;
-  }
-  /** Gets the associated form, if one exists. */
-  getForm() {
-    return this.formControlController.getForm();
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity() {
-    const isValid = this.validity.valid;
-    this.errorMessage = this.customValidityMessage || isValid ? "" : this.validationInput.validationMessage;
-    this.formControlController.setValidity(isValid);
-    this.validationInput.hidden = true;
-    clearTimeout(this.validationTimeout);
-    if (!isValid) {
-      this.validationInput.hidden = false;
-      this.validationInput.reportValidity();
-      this.validationTimeout = setTimeout(() => this.validationInput.hidden = true, 1e4);
-    }
-    return isValid;
-  }
-  /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(message = "") {
-    this.customValidityMessage = message;
-    this.errorMessage = message;
-    this.validationInput.setCustomValidity(message);
-    this.formControlController.updateValidity();
-  }
-  render() {
-    const hasLabelSlot = this.hasSlotController.test("label");
-    const hasHelpTextSlot = this.hasSlotController.test("help-text");
-    const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
-    const defaultSlot = ke`
-      <slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>
-    `;
-    return ke`
-      <fieldset
-        part="form-control"
-        class=${Rt({
-      "form-control": true,
-      "form-control--small": this.size === "small",
-      "form-control--medium": this.size === "medium",
-      "form-control--large": this.size === "large",
-      "form-control--radio-group": true,
-      "form-control--has-label": hasLabel,
-      "form-control--has-help-text": hasHelpText
-    })}
-        role="radiogroup"
-        aria-labelledby="label"
-        aria-describedby="help-text"
-        aria-errormessage="error-message"
-      >
-        <label
-          part="form-control-label"
-          id="label"
-          class="form-control__label"
-          aria-hidden=${hasLabel ? "false" : "true"}
-          @click=${this.handleLabelClick}
-        >
-          <slot name="label">${this.label}</slot>
-        </label>
-
-        <div part="form-control-input" class="form-control-input">
-          <div class="visually-hidden">
-            <div id="error-message" aria-live="assertive">${this.errorMessage}</div>
-            <label class="radio-group__validation">
-              <input
-                type="text"
-                class="radio-group__validation-input"
-                ?required=${this.required}
-                tabindex="-1"
-                hidden
-                @invalid=${this.handleInvalid}
-              />
-            </label>
-          </div>
-
-          ${this.hasButtonGroup ? ke`
-                <sl-button-group part="button-group" exportparts="base:button-group__base" role="presentation">
-                  ${defaultSlot}
-                </sl-button-group>
-              ` : defaultSlot}
-        </div>
-
-        <div
-          part="form-control-help-text"
-          id="help-text"
-          class="form-control__help-text"
-          aria-hidden=${hasHelpText ? "false" : "true"}
-        >
-          <slot name="help-text">${this.helpText}</slot>
-        </div>
-      </fieldset>
-    `;
-  }
-};
-SlRadioGroup.styles = [component_styles_default, form_control_styles_default, radio_group_styles_default];
-SlRadioGroup.dependencies = { "sl-button-group": SlButtonGroup };
-__decorateClass([
-  e5("slot:not([name])")
-], SlRadioGroup.prototype, "defaultSlot", 2);
-__decorateClass([
-  e5(".radio-group__validation-input")
-], SlRadioGroup.prototype, "validationInput", 2);
-__decorateClass([
-  r5()
-], SlRadioGroup.prototype, "hasButtonGroup", 2);
-__decorateClass([
-  r5()
-], SlRadioGroup.prototype, "errorMessage", 2);
-__decorateClass([
-  r5()
-], SlRadioGroup.prototype, "defaultValue", 2);
-__decorateClass([
-  n5()
-], SlRadioGroup.prototype, "label", 2);
-__decorateClass([
-  n5({ attribute: "help-text" })
-], SlRadioGroup.prototype, "helpText", 2);
-__decorateClass([
-  n5()
-], SlRadioGroup.prototype, "name", 2);
-__decorateClass([
-  n5({ reflect: true })
-], SlRadioGroup.prototype, "value", 2);
-__decorateClass([
-  n5({ reflect: true })
-], SlRadioGroup.prototype, "size", 2);
-__decorateClass([
-  n5({ reflect: true })
-], SlRadioGroup.prototype, "form", 2);
-__decorateClass([
-  n5({ type: Boolean, reflect: true })
-], SlRadioGroup.prototype, "required", 2);
-__decorateClass([
-  watch("size", { waitUntilFirstUpdate: true })
-], SlRadioGroup.prototype, "handleSizeChange", 1);
-__decorateClass([
-  watch("value")
-], SlRadioGroup.prototype, "handleValueChange", 1);
-
-// ../../node_modules/bootstrap-icons/icons/plus-square.svg
-var plus_square_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">%0A  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>%0A  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>%0A</svg>';
-
-// ../../node_modules/bootstrap-icons/icons/plus-circle.svg
-var plus_circle_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">%0A  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>%0A  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>%0A</svg>';
-
-// src/widgets/webwriter-choice.ts
-function shuffle(a3) {
-  for (let i4 = a3.length - 1; i4 > 0; i4--) {
-    const j3 = Math.floor(Math.random() * (i4 + 1));
-    [a3[i4], a3[j3]] = [a3[j3], a3[i4]];
-  }
-  return a3;
-}
-var _itemsSlotEl_dec, _value_dec, _items_dec, _addItem_dec, _slotEl_dec, _randomOrder_dec, _layout_dec, _mode_dec, _a2, _WebwriterChoice_decorators, _init2, _mode, _randomOrder, _slotEl, _items, _value, _itemsSlotEl;
-_WebwriterChoice_decorators = [t3("webwriter-choice")];
-var WebwriterChoice = class extends (_a2 = LitElementWw, _mode_dec = [n5({ type: String, attribute: true, reflect: true }), option({
-  type: "select",
-  options: [
-    { value: "truefalse", label: { "en": "True/False" } },
-    { value: "single", label: { "en": "Single Choice" } },
-    { value: "multiple", label: { "en": "Multiple Choice" } }
-  ]
-})], _layout_dec = [n5({ type: String, attribute: true, reflect: true }), option({
-  type: "select",
-  options: [
-    { value: "list", label: { "en": "List" } },
-    { value: "tiles", label: { "en": "Tiles" } }
-  ]
-})], _randomOrder_dec = [n5({ type: Boolean, attribute: true, reflect: true }), option({
-  type: Boolean,
-  label: { "en": "Random Choice Order" }
-})], _slotEl_dec = [e5("slot")], _addItem_dec = [action()], _items_dec = [o5()], _value_dec = [n5({ type: Array, attribute: false })], _itemsSlotEl_dec = [e5("#items-slot")], _a2) {
-  constructor() {
-    super(...arguments);
-    __runInitializers(_init2, 5, this);
-    __privateAdd(this, _mode, __runInitializers(_init2, 8, this, "single")), __runInitializers(_init2, 11, this);
-    __privateAdd(this, _randomOrder, __runInitializers(_init2, 12, this, false)), __runInitializers(_init2, 15, this);
-    __privateAdd(this, _slotEl, __runInitializers(_init2, 16, this)), __runInitializers(_init2, 19, this);
-    __privateAdd(this, _items, __runInitializers(_init2, 20, this)), __runInitializers(_init2, 23, this);
-    __privateAdd(this, _value, []);
-    __publicField(this, "handleControlChange", (e7) => {
-      if (this.mode === "single") {
-        const item = e7.target;
-        const otherItems = this.items.filter((el) => el !== item);
-        otherItems.forEach((el) => this.isContentEditable ? el.valid = false : el.active = false);
-      }
-      this.applyValue();
-      this.dispatchEvent(new CustomEvent("ww-answer-change", {
-        detail: { value: this.value },
-        bubbles: true,
-        composed: true
-      }));
-    });
-    __privateAdd(this, _itemsSlotEl, __runInitializers(_init2, 24, this)), __runInitializers(_init2, 27, this);
-  }
-  get layout() {
-    return this.children?.item(0)?.getAttribute("layout") ?? "list";
-  }
-  set layout(value) {
-    this.querySelectorAll("webwriter-choice-item").forEach((el) => el.setAttribute("layout", value));
-    this.requestUpdate("layout");
-  }
-  get solution() {
-    const validIDs = this.items.filter((item) => item.valid).map((item) => item.id);
-    return validIDs.length ? validIDs : void 0;
-  }
-  set solution(value) {
-    this.items.forEach((item) => value.includes(item.id) ? item.valid = true : null);
-  }
-  reportSolution() {
-    if (!this.solution) {
-      this.items.forEach((item) => item.valid = true);
-      return;
-    }
-    this.items.forEach((item) => item.valid = (this.solution ?? []).includes(item.id));
-  }
-  reset() {
-    this.items.forEach((item) => {
-      item.valid = void 0;
-      item.active = false;
-    });
-    this.shuffleItems();
-  }
-  addItem() {
-    const choiceItem = this.ownerDocument.createElement("webwriter-choice-item");
-    const p3 = this.ownerDocument.createElement("p");
-    choiceItem.appendChild(p3);
-    choiceItem.setAttribute("layout", this.layout);
-    this.appendChild(choiceItem);
-    this.ownerDocument.getSelection().setBaseAndExtent(p3, 0, p3, 0);
-  }
-  shuffleItems() {
-    const items = this.slotEl.assignedElements();
-    const n6 = items.length;
-    const nums = shuffle([...new Array(n6).keys()]);
-    items.forEach((el, i4) => el.style.order = String(nums[i4]));
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const observer = new MutationObserver(() => {
-      if (!this.contentEditable && this.randomOrder) {
-        this.shuffleItems();
-      }
-    });
-    observer.observe(this, { childList: true });
-  }
-  firstUpdated(_changedProperties) {
-    if (!this.contentEditable && this.randomOrder) {
-      this.shuffleItems();
-    }
-  }
-  get value() {
-    return __privateGet(this, _value);
-  }
-  set value(value) {
-    __privateSet(this, _value, value);
-    this.items.forEach((item, i4) => {
-      this.isContentEditable ? item.valid = __privateGet(this, _value).includes(i4) : item.active = __privateGet(this, _value).includes(i4);
-    });
-  }
-  applyValue() {
-    __privateSet(this, _value, this.items.map((item, i4) => [item.valid, i4]).filter(([valid]) => valid).map(([_3, i4]) => i4));
-  }
-  handleSlotChange(e7) {
-    this.requestUpdate();
-  }
-  willUpdate(changed) {
-    if (changed.has("mode") && this.mode === "single") {
-      this.items.filter((el) => this.isContentEditable ? el.valid : el.active).slice(1).forEach((el) => this.isContentEditable ? el.valid = false : el.active = false);
-    }
-    if (changed.has("mode") && this.mode === "truefalse") {
-      this.items.forEach((el) => el.remove());
-    }
-  }
-  render() {
-    return ke`
-      ${this.mode === "truefalse" ? ke`
-          <sl-radio-group>
-            <sl-radio-button value="true">True</sl-radio-button>
-            <sl-radio-button value="false">False</sl-radio-button>
-          </sl-radio-group>
-        ` : ke`
-          <slot id="items-slot" @sl-change=${this.handleControlChange} @slotchange=${this.handleSlotChange}></slot>
-        `}
-      <sl-button size="small" id="add-option" class="author-only" @click=${() => this.addItem()}>
-        <sl-icon src=${this.mode === "multiple" ? plus_square_default : plus_circle_default}></sl-icon><span>Add Option</span>
-      </sl-button>
-    `;
-  }
-};
-_init2 = __decoratorStart(_a2);
-_mode = new WeakMap();
-_randomOrder = new WeakMap();
-_slotEl = new WeakMap();
-_items = new WeakMap();
-_value = new WeakMap();
-_itemsSlotEl = new WeakMap();
-__decorateElement(_init2, 4, "mode", _mode_dec, WebwriterChoice, _mode);
-__decorateElement(_init2, 3, "layout", _layout_dec, WebwriterChoice);
-__decorateElement(_init2, 4, "randomOrder", _randomOrder_dec, WebwriterChoice, _randomOrder);
-__decorateElement(_init2, 4, "slotEl", _slotEl_dec, WebwriterChoice, _slotEl);
-__decorateElement(_init2, 1, "addItem", _addItem_dec, WebwriterChoice);
-__decorateElement(_init2, 4, "items", _items_dec, WebwriterChoice, _items);
-__decorateElement(_init2, 3, "value", _value_dec, WebwriterChoice);
-__decorateElement(_init2, 4, "itemsSlotEl", _itemsSlotEl_dec, WebwriterChoice, _itemsSlotEl);
-WebwriterChoice = __decorateElement(_init2, 0, "WebwriterChoice", _WebwriterChoice_decorators, WebwriterChoice);
-__publicField(WebwriterChoice, "scopedElements", {
-  "sl-button": SlButton,
-  "sl-icon": SlIcon,
-  "sl-radio": SlRadio,
-  "sl-checkbox": SlCheckbox,
-  "sl-radio-button": SlRadioButton,
-  "sl-radio-group": SlRadioGroup
-});
-__publicField(WebwriterChoice, "styles", i`
-    :host {
-      display: flex !important;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 0.5rem;
-    }
-
-    :host([layout=tiles]) {
-
-      flex-direction: row;
-      flex-wrap: wrap;
-      gap: 15px;
-
-      & ::slotted(*) {
-        aspect-ratio: 1;
-        min-width: 125px;
-        width: 125px;
-        max-width: 350px;
-        min-height: 125px;
-        height: 125px;
-        max-height: 350px;
-        overflow: hidden;
-        resize: both;
-        border: 2px solid var(--sl-color-gray-500);
-        border-radius: 5px;
-      }
-    }
-
-    sl-button::part(label) {
-      padding: 0;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
-
-    sl-button::part(base) {
-      border: none;
-      background: transparent;
-    }
-
-    sl-icon {
-      width: 19px;
-      height: 19px;
-    }
-
-    sl-icon::part(svg) {
-      overflow: visible;
-    }
-
-    :host(:not([contenteditable=true]):not([contenteditable=""])) .author-only {
-      display: none !important;
-    }
-
-    #add-option span {
-      margin-inline-start: 0.5em;
-    }
-
-    :host(:is([contenteditable=true], [contenteditable=""])) ::slotted(*) {
-      order: unset !important;
-    }
-
-    :host(:not([mode=multiple])) {
-      --webwriter-choice-radius: 100%;
-    }
-
-    #add-option:not(:hover)::part(base) {
-      color: darkgray;
-    }
-
-    :host([layout=tiles]) #add-option {
-      width: 125px;
-      height: 125px;
-      overflow: hidden;
-      border: 2px solid var(--sl-color-gray-300);
-      border-radius: 5px;
-      padding: 5px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    :host([mode=truefalse]) #add-option {
-      display: none;
-    }    
-  `);
-__runInitializers(_init2, 1, WebwriterChoice);
-
-// src/widgets/webwriter-order.ts
-var _solution_dec, _items_dec2, _itemsSlot_dec, _hideOrderButtons_dec, _layout_dec2, _a3, _WebwriterOrder_decorators, _init3, _itemsSlot, _items2, _solution;
-_WebwriterOrder_decorators = [t3("webwriter-order")];
-var WebwriterOrder = class extends (_a3 = LitElementWw, _layout_dec2 = [n5({ type: String, attribute: true, reflect: true }), option({
-  type: "select",
-  options: [
-    { value: "list", label: { "en": "List" } },
-    { value: "tiles", label: { "en": "Tiles" } }
-  ]
-})], _hideOrderButtons_dec = [n5({ type: Boolean, attribute: true, reflect: true }), option({ type: Boolean, label: { _: "Hide order buttons" } })], _itemsSlot_dec = [e5("#items-slot")], _items_dec2 = [o5()], _solution_dec = [n5({ attribute: false })], _a3) {
-  constructor() {
-    super(...arguments);
-    __runInitializers(_init3, 5, this);
-    __publicField(this, "observer");
-    __publicField(this, "orderSheet", new CSSStyleSheet());
-    __publicField(this, "clearDropPreviews", () => {
-      this.items.forEach((item) => item.dropPreview = void 0);
-    });
-    __privateAdd(this, _itemsSlot, __runInitializers(_init3, 8, this)), __runInitializers(_init3, 11, this);
-    __privateAdd(this, _items2, __runInitializers(_init3, 12, this)), __runInitializers(_init3, 15, this);
-    __publicField(this, "handleMove", (e7) => {
-      const elem = e7.target;
-      const children = Array.from(this.children);
-      const pos = children.indexOf(elem);
-      let i4;
-      if (e7.type === "ww-moveup") {
-        i4 = Math.max(0, pos - 1);
-      } else if (e7.type === "ww-movedown") {
-        i4 = Math.min(children.length, pos + 2);
-      } else if (e7.type === "ww-moveto") {
-        i4 = e7.detail.i;
-      }
-      this.moveChild(elem, i4);
-    });
-    __privateAdd(this, _solution, []);
-  }
-  get layout() {
-    return this.children?.item(0)?.getAttribute("layout") ?? "list";
-  }
-  set layout(value) {
-    this.querySelectorAll("webwriter-order-item").forEach((el) => el.setAttribute("layout", value));
-    this.requestUpdate("layout");
-  }
-  get hideOrderButtons() {
-    return !!this.items[0]?.hideOrderButtons;
-  }
-  set hideOrderButtons(value) {
-    this.items.forEach((item) => item.hideOrderButtons = value);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("ww-moveup", this.handleMove);
-    this.addEventListener("ww-movedown", this.handleMove);
-    this.addEventListener("ww-moveto", this.handleMove);
-    this.observer = new MutationObserver(() => {
-      this.items.forEach((item) => item.requestUpdate());
-      if (this.isContentEditable) {
-        this.solution = this.items.map((item) => item.id);
-      }
-      this.clearDropPreviews();
-    });
-    this.observer.observe(this, { childList: true });
-  }
-  serializedCallback() {
-    this.shuffleItems();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.observer?.disconnect();
-    this.observer = void 0;
-  }
-  addItem() {
-    const orderItem = this.ownerDocument.createElement("webwriter-order-item");
-    const p3 = this.ownerDocument.createElement("p");
-    orderItem.appendChild(p3);
-    orderItem.setAttribute("layout", this.layout);
-    this.append(orderItem);
-    this.solution = [...__privateGet(this, _solution), orderItem.id];
-    this.ownerDocument.getSelection().setBaseAndExtent(p3, 0, p3, 0);
-  }
-  shuffleItems() {
-    const n6 = this.items.length;
-    const nums = shuffle([...new Array(n6).keys()]);
-    this.innerHTML = nums.map((i4) => this.children.item(i4).outerHTML).join("");
-  }
-  handleKeyDown(e7) {
-    if (e7.key == "ArrowDown") {
-      e7.stopPropagation();
-      e7.preventDefault();
-    } else if (e7.key === "ArrowUp") {
-      e7.stopPropagation();
-      e7.preventDefault();
-    }
-  }
-  /*
-  If contenteditable: Reorder solution -> Triggers orderSheet change
-  If not contenteditable: Reorder value -> Triggers orderSheet change 
-  */
-  moveChild(elem, i4) {
-    if (i4 === 0) {
-      this.insertAdjacentElement("afterbegin", elem);
-    } else if (i4 < this.items.length) {
-      this.items[i4].insertAdjacentElement("beforebegin", elem);
-    } else {
-      this.insertAdjacentElement("beforeend", elem);
-    }
-  }
-  get solution() {
-    return __privateGet(this, _solution)?.length ? __privateGet(this, _solution) : void 0;
-  }
-  set solution(value) {
-    __privateSet(this, _solution, value);
-    if (value) {
-      this.dispatchEvent(new CustomEvent("ww-answer-change", {
-        bubbles: true,
-        composed: true
-      }));
-    }
-  }
-  reportSolution() {
-    this.solution.forEach((id, i4) => this.querySelector(`#${id}`).validOrder = i4);
-  }
-  reset() {
-    this.solution = void 0;
-    this.shuffleItems();
-  }
-  render() {
-    return ke`
-      <slot id="items-slot" @webwriter-clear-drop-preview=${this.clearDropPreviews}></slot>
-      <sl-button size="small" id="add-option" class="author-only" @click=${() => this.addItem()}>
-        <sl-icon src=${plus_default}></sl-icon><span>Add Option</span>
-      </sl-button>
-    `;
-  }
-};
-_init3 = __decoratorStart(_a3);
-_itemsSlot = new WeakMap();
-_items2 = new WeakMap();
-_solution = new WeakMap();
-__decorateElement(_init3, 3, "layout", _layout_dec2, WebwriterOrder);
-__decorateElement(_init3, 3, "hideOrderButtons", _hideOrderButtons_dec, WebwriterOrder);
-__decorateElement(_init3, 4, "itemsSlot", _itemsSlot_dec, WebwriterOrder, _itemsSlot);
-__decorateElement(_init3, 4, "items", _items_dec2, WebwriterOrder, _items2);
-__decorateElement(_init3, 3, "solution", _solution_dec, WebwriterOrder);
-WebwriterOrder = __decorateElement(_init3, 0, "WebwriterOrder", _WebwriterOrder_decorators, WebwriterOrder);
-__publicField(WebwriterOrder, "scopedElements", {
-  "sl-button": SlButton,
-  "sl-icon": SlIcon
-});
-__publicField(WebwriterOrder, "styles", i`
-    :host {
-      display: flex !important;
-      flex-direction: column;
-      align-items: flex-start;
-      counter-reset: orderItem;
-      gap: 2px;
-    }
-
-    :host([layout=tiles]) {
-      flex-direction: row;
-      flex-wrap: wrap;
-      gap: 15px;
-    }
-
-    :host(:is([contenteditable=true], [contenteditable=""])) {
-      --text-color: var(--sl-color-success-700);
-    }
-
-    :host ::slotted(*::part(counter)) {
-      counter-increment: orderItem;
-      content: counter(orderItem) '. ';
-      cursor: move;
-      text-align: right;
-      padding-right: 0.5em;
-      min-width: 1.5em;
-      color: var(--text-color, auto);
-    }
-
-    sl-button::part(label) {
-      padding: 0;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-    }
+    sl-button::part(label) {
+      padding: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
 
     sl-button::part(base) {
       border: none;
@@ -5153,9 +3655,10 @@ __publicField(WebwriterOrder, "styles", i`
       display: none;
     }
   `);
-__runInitializers(_init3, 1, WebwriterOrder);
+__runInitializers(_init2, 1, WebwriterOrder);
 export {
-  WebwriterOrder
+  WebwriterOrder,
+  shuffle
 };
 /*! Bundled license information:
 
@@ -5405,11 +3908,4 @@ lit-html/directives/if-defined.js:
    * Copyright 2018 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    *)
-
-lit-html/directives/live.js:
-  (**
-   * @license
-   * Copyright 2020 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
 */