@webwriter/quiz 1.0.0

package/dist/widgets/webwriter-cloze-gap.js

@@ -0,0 +1,722 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => [, , , __create(base?.[__knownSymbol("metadata")] ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/widgets/webwriter-cloze-gap.ts
+import { html as html2, css as css2 } from "lit";
+import { LitElementWw } from "@webwriter/lit";
+import { customElement as customElement2, query as query2 } from "lit/decorators.js";
+import SlIconButton from "@shoelace-style/shoelace/dist/components/icon-button/icon-button.component.js";
+import SlOption from "@shoelace-style/shoelace/dist/components/option/option.component.js";
+
+// ../../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/bootstrap-icons/icons/slash-circle.svg
+var slash_circle_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-slash-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="M11.354 4.646a.5.5 0 0 0-.708 0l-6 6a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/check-circle.svg
+var check_circle_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-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="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"/>%0A</svg>';
+
+// ../../node_modules/bootstrap-icons/icons/x.svg
+var x_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">%0A  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>%0A</svg>';
+
+// src/lib/combobox.ts
+import { LitElement, html, css } from "lit";
+import { customElement, property, query, queryAssignedElements } from "lit/decorators.js";
+import SlInput from "@shoelace-style/shoelace/dist/components/input/input.component.js";
+
+// ../../node_modules/bootstrap-icons/icons/chevron-down.svg
+var chevron_down_default = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">%0A  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>%0A</svg>';
+
+// src/lib/combobox.ts
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+var _inputEl_dec, _hideEl_dec, _label_dec, _type_dec, _required_dec, _disabled_dec, _autosize_dec, _placement_dec, _separator_dec, _fixLength_dec, _helpText_dec, _suggestions_dec, _open_dec, _emptyValue_dec, _placeholder_dec, _multiple_dec, _inputDisabled_dec, _active_dec, _autocomplete_dec, _optionElements_dec, _slotElement_dec, _toggleButton_dec, _input_dec, _defaultValue_dec, _value_dec, _a, _Combobox_decorators, _init, _value, _defaultValue, _input, _toggleButton, _slotElement, _optionElements, _autocomplete, _active, _inputDisabled, _multiple, _placeholder, _emptyValue, _open, _suggestions, _helpText, _fixLength, _separator, _placement, _autosize, _disabled, _required, _type, _label, _hideEl, _inputEl;
+_Combobox_decorators = [customElement("ww-combobox")];
+var Combobox = class extends (_a = LitElement, _value_dec = [property({ attribute: false })], _defaultValue_dec = [property({ attribute: false })], _input_dec = [query("input")], _toggleButton_dec = [query("#toggle")], _slotElement_dec = [query("slot:not([name])")], _optionElements_dec = [queryAssignedElements()], _autocomplete_dec = [property({ type: String, attribute: true })], _active_dec = [property({ type: Boolean, attribute: true, reflect: true })], _inputDisabled_dec = [property({ type: Boolean, attribute: true, reflect: true })], _multiple_dec = [property({ type: Boolean, attribute: true, reflect: true })], _placeholder_dec = [property({ type: String })], _emptyValue_dec = [property({ type: String, attribute: true, reflect: true })], _open_dec = [property({ type: Boolean, attribute: true, reflect: true })], _suggestions_dec = [property({ type: Boolean, attribute: true, reflect: true })], _helpText_dec = [property({ type: String, attribute: "help-text" })], _fixLength_dec = [property({ type: Number, attribute: true })], _separator_dec = [property({ type: String, attribute: true })], _placement_dec = [property({ type: String, attribute: true })], _autosize_dec = [property({ type: Boolean, attribute: true, reflect: true })], _disabled_dec = [property({ type: Boolean, attribute: true, reflect: true })], _required_dec = [property({ type: Boolean, attribute: true, reflect: true })], _type_dec = [property({ type: String, attribute: true, reflect: true })], _label_dec = [property({ type: String, attribute: true, reflect: true })], _hideEl_dec = [query("#hide")], _inputEl_dec = [query("input")], _a) {
+  constructor() {
+    super();
+    __publicField(this, "tabIndex", 0);
+    //@ts-ignore
+    __privateAdd(this, _value, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    //@ts-ignore
+    __privateAdd(this, _defaultValue, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    //@ts-ignore
+    __privateAdd(this, _input, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _toggleButton, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _slotElement, __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __privateAdd(this, _optionElements, __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
+    //@ts-ignore
+    __privateAdd(this, _autocomplete, __runInitializers(_init, 32, this, "off")), __runInitializers(_init, 35, this);
+    __privateAdd(this, _active, __runInitializers(_init, 36, this)), __runInitializers(_init, 39, this);
+    __privateAdd(this, _inputDisabled, __runInitializers(_init, 40, this, false)), __runInitializers(_init, 43, this);
+    __privateAdd(this, _multiple, __runInitializers(_init, 44, this, false)), __runInitializers(_init, 47, this);
+    //@ts-ignore
+    __privateAdd(this, _placeholder, __runInitializers(_init, 48, this)), __runInitializers(_init, 51, this);
+    __privateAdd(this, _emptyValue, __runInitializers(_init, 52, this)), __runInitializers(_init, 55, this);
+    __privateAdd(this, _open, __runInitializers(_init, 56, this, false)), __runInitializers(_init, 59, this);
+    __privateAdd(this, _suggestions, __runInitializers(_init, 60, this, false)), __runInitializers(_init, 63, this);
+    //@ts-ignore
+    __privateAdd(this, _helpText, __runInitializers(_init, 64, this)), __runInitializers(_init, 67, this);
+    __privateAdd(this, _fixLength, __runInitializers(_init, 68, this)), __runInitializers(_init, 71, this);
+    __privateAdd(this, _separator, __runInitializers(_init, 72, this, " ")), __runInitializers(_init, 75, this);
+    __privateAdd(this, _placement, __runInitializers(_init, 76, this, "bottom")), __runInitializers(_init, 79, this);
+    __privateAdd(this, _autosize, __runInitializers(_init, 80, this, false)), __runInitializers(_init, 83, this);
+    __privateAdd(this, _disabled, __runInitializers(_init, 84, this, false)), __runInitializers(_init, 87, this);
+    __privateAdd(this, _required, __runInitializers(_init, 88, this, false)), __runInitializers(_init, 91, this);
+    __privateAdd(this, _type, __runInitializers(_init, 92, this)), __runInitializers(_init, 95, this);
+    __privateAdd(this, _label, __runInitializers(_init, 96, this)), __runInitializers(_init, 99, this);
+    __publicField(this, "handleOptionClick", (e) => {
+      const option = e.target.closest("sl-option");
+      if (option) {
+        this.value = option.value;
+        this.focus();
+        this.open = false;
+        this.dispatchChange();
+        this.requestUpdate();
+      }
+    });
+    __privateAdd(this, _hideEl, __runInitializers(_init, 100, this)), __runInitializers(_init, 103, this);
+    __privateAdd(this, _inputEl, __runInitializers(_init, 104, this)), __runInitializers(_init, 107, this);
+    this.addEventListener("focus", (e) => {
+      this.active = true;
+      this.open = true;
+    });
+    this.addEventListener("focusout", (e) => {
+      this.active = this.open = false;
+    });
+    this.addEventListener("blur", (e) => {
+      this.active = this.open = false;
+    });
+    this.value = this.defaultValue = this.multiple ? [] : "";
+  }
+  get validity() {
+    return this.input.validity;
+  }
+  get validationMessage() {
+    return this.input.validationMessage;
+  }
+  setValidity(isValid) {
+    const host = this;
+    const required = Boolean(this.required);
+    host.toggleAttribute("data-required", required);
+    host.toggleAttribute("data-optional", !required);
+    host.toggleAttribute("data-invalid", !isValid);
+    host.toggleAttribute("data-valid", isValid);
+  }
+  focus() {
+    if (this.inputDisabled && this.suggestions) {
+      this.open = !this.open;
+      super.focus();
+    } else {
+      this.input?.focus();
+    }
+  }
+  blur() {
+    this.open = false;
+  }
+  getForm() {
+    return this.input.form;
+  }
+  handleTextInput(e) {
+    const input = e.target;
+    e.preventDefault();
+    if (!this.multiple && this.fixLength && input.value.length < this.fixLength) {
+      input.value = this.value;
+    } else if (!this.multiple) {
+      this.value = input.value;
+    } else if (input.value === this.separator) {
+      input.value = "";
+    } else {
+      this.value = [...this.valueList.slice(0, -1), ...input.value.split(this.separator)];
+      input.value = this.valueList.at(-1);
+    }
+    this.dispatchInput();
+    this.setValidity(this.validity.valid);
+  }
+  handleInputKeydown(e) {
+    const input = e.target;
+    if (this.multiple && e.key === "Backspace" && input.selectionStart === 0 && input.selectionEnd === 0) {
+      e.preventDefault();
+      this.value = this.valueList.slice(0, -1);
+    }
+    this.requestUpdate();
+  }
+  dispatchChange() {
+    this.dispatchEvent(new CustomEvent("sl-change", { composed: true, bubbles: true }));
+  }
+  dispatchInput() {
+    this.dispatchEvent(new CustomEvent("sl-input", { composed: true, bubbles: true }));
+  }
+  get valueList() {
+    return this.multiple ? this.value || [] : [this.value];
+  }
+  get inputSize() {
+    return !this.multiple ? void 0 : Math.min(
+      Math.max(this.placeholder?.length ?? 1, this.valueList.at(-1)?.length ?? 1 - 1),
+      40
+    );
+  }
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    this.requestUpdate();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.requestUpdate();
+  }
+  get inputWidth() {
+    return this.hideEl ? this.hideEl.offsetWidth : 0;
+  }
+  get inputValue() {
+    const value = this.multiple ? this.valueList.at(-1) ?? "" : String(this.value ?? "");
+    return value !== this.emptyValue ? value : "";
+  }
+  render() {
+    const input = html`
+      <input
+        part="input"
+        type=${this.type}
+        size=${ifDefined(this.inputSize)}
+        .value=${this.inputValue}
+        placeholder=${this.multiple && this.valueList.length > 1 ? "" : this.placeholder}
+        ?disabled=${this.disabled || this.inputDisabled}
+        @input=${this.handleTextInput}
+        @change=${this.dispatchChange}
+        @keydown=${this.handleInputKeydown}
+        autocomplete=${this.autocomplete}
+        style=${this.autosize ? styleMap({ width: `calc(${this.inputWidth}px + 2ch)` }) : void 0}
+      >
+    `;
+    return html`
+      <slot name="label" part="label" @click=${this.focus}>
+        <label>${this.label}</label> 
+      </slot>
+      <div part="base" id="anchor" tabindex=${0}>
+        <slot name="prefix"></slot>
+        ${this.multiple ? html`
+          <span id="values">
+            <slot name="values"></slot>
+            ${this.valueList.slice(0, -1).map((v) => html`
+              <sl-tag size="small" variant="primary">${v}</sl-tag>
+            `)}
+            ${input}
+          </span>
+        ` : input}
+        <div part="suffix">
+          <slot name="suffix"></slot>
+            <sl-icon-button
+              slot="trigger"
+              part="trigger"
+              id="toggle"
+              src=${chevron_down_default}
+              @focus=${(e) => e.stopPropagation()}
+              @click=${(e) => {
+      this.open = !this.open;
+      e.stopPropagation();
+    }}
+              @mousedown=${(e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    }}
+            ></sl-icon-button>
+        </div>
+      </div>
+      <sl-popup anchor="anchor" placement=${this.placement} strategy="fixed" ?active=${this.open} auto-size="vertical" auto-size-padding="10" flip shift>
+          <sl-menu id="options" @click=${this.handleOptionClick}>
+            <slot></slot>
+          </sl-menu>
+        </sl-popup>
+      <div id="help-text">${this.helpText}</div>
+      <span id="hide">${this.inputEl?.value}</span>
+    `;
+  }
+};
+_init = __decoratorStart(_a);
+_value = new WeakMap();
+_defaultValue = new WeakMap();
+_input = new WeakMap();
+_toggleButton = new WeakMap();
+_slotElement = new WeakMap();
+_optionElements = new WeakMap();
+_autocomplete = new WeakMap();
+_active = new WeakMap();
+_inputDisabled = new WeakMap();
+_multiple = new WeakMap();
+_placeholder = new WeakMap();
+_emptyValue = new WeakMap();
+_open = new WeakMap();
+_suggestions = new WeakMap();
+_helpText = new WeakMap();
+_fixLength = new WeakMap();
+_separator = new WeakMap();
+_placement = new WeakMap();
+_autosize = new WeakMap();
+_disabled = new WeakMap();
+_required = new WeakMap();
+_type = new WeakMap();
+_label = new WeakMap();
+_hideEl = new WeakMap();
+_inputEl = new WeakMap();
+__decorateElement(_init, 4, "value", _value_dec, Combobox, _value);
+__decorateElement(_init, 4, "defaultValue", _defaultValue_dec, Combobox, _defaultValue);
+__decorateElement(_init, 4, "input", _input_dec, Combobox, _input);
+__decorateElement(_init, 4, "toggleButton", _toggleButton_dec, Combobox, _toggleButton);
+__decorateElement(_init, 4, "slotElement", _slotElement_dec, Combobox, _slotElement);
+__decorateElement(_init, 4, "optionElements", _optionElements_dec, Combobox, _optionElements);
+__decorateElement(_init, 4, "autocomplete", _autocomplete_dec, Combobox, _autocomplete);
+__decorateElement(_init, 4, "active", _active_dec, Combobox, _active);
+__decorateElement(_init, 4, "inputDisabled", _inputDisabled_dec, Combobox, _inputDisabled);
+__decorateElement(_init, 4, "multiple", _multiple_dec, Combobox, _multiple);
+__decorateElement(_init, 4, "placeholder", _placeholder_dec, Combobox, _placeholder);
+__decorateElement(_init, 4, "emptyValue", _emptyValue_dec, Combobox, _emptyValue);
+__decorateElement(_init, 4, "open", _open_dec, Combobox, _open);
+__decorateElement(_init, 4, "suggestions", _suggestions_dec, Combobox, _suggestions);
+__decorateElement(_init, 4, "helpText", _helpText_dec, Combobox, _helpText);
+__decorateElement(_init, 4, "fixLength", _fixLength_dec, Combobox, _fixLength);
+__decorateElement(_init, 4, "separator", _separator_dec, Combobox, _separator);
+__decorateElement(_init, 4, "placement", _placement_dec, Combobox, _placement);
+__decorateElement(_init, 4, "autosize", _autosize_dec, Combobox, _autosize);
+__decorateElement(_init, 4, "disabled", _disabled_dec, Combobox, _disabled);
+__decorateElement(_init, 4, "required", _required_dec, Combobox, _required);
+__decorateElement(_init, 4, "type", _type_dec, Combobox, _type);
+__decorateElement(_init, 4, "label", _label_dec, Combobox, _label);
+__decorateElement(_init, 4, "hideEl", _hideEl_dec, Combobox, _hideEl);
+__decorateElement(_init, 4, "inputEl", _inputEl_dec, Combobox, _inputEl);
+Combobox = __decorateElement(_init, 0, "Combobox", _Combobox_decorators, Combobox);
+__publicField(Combobox, "shadowRootOptions", { ...LitElement.shadowRootOptions, delegatesFocus: true });
+__publicField(Combobox, "styles", [SlInput.styles, css`
+    * {
+      font-family: var(--sl-font-sans);
+    }
+
+    :host {
+      display: flex;
+      flex-direction: column;
+    }
+
+    [part=base] {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      border: solid var(--sl-input-border-width) var(--sl-input-border-color);
+      border-radius: var(--sl-input-border-radius-medium);
+      max-width: 100%;
+      min-height: var(--sl-input-height-medium);
+      padding: 0 var(--sl-input-spacing-medium);
+      padding-right: 0;
+      background: white;
+    }
+
+    :host(:not([inputDisabled]):not([disabled])) {
+      cursor: text;
+    }
+
+    :host([inputDisabled]:not([disabled])), :host([inputDisabled]:not([disabled])) input {
+      cursor: pointer;
+    }
+
+    :host([multiple]) [part=base] {
+      flex-wrap: wrap;
+    }
+
+    :host([filled]) [part=base] {
+      background: var(--sl-input-filled-background-color);
+    }
+
+    :host([active]) [part=base] {
+      border-color: var(--sl-input-border-color-focus);
+      box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
+    }
+
+    :host([disabled]) [part=base] {
+      background: none;
+    }
+
+    :host(:hover) [part=base] {
+      border-color: var(--sl-color-gray-400);
+    }
+
+    #values {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 0.25rem;
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
+      flex-wrap: wrap;
+    }
+
+    #values > * {
+      margin-top: 0.125rem;
+      margin-bottom: 0.125rem;
+    }
+
+    #options {
+      display: block;
+      font-family: var(--sl-font-sans);
+      font-size: var(--sl-font-size-medium);
+      font-weight: var(--sl-font-weight-normal);
+      box-shadow: var(--sl-shadow-large);
+      background: var(--sl-panel-background-color);
+      border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
+      border-radius: var(--sl-border-radius-medium);
+      padding-block: var(--sl-spacing-x-small);
+      padding-inline: 0;
+      overflow: auto;
+      overscroll-behavior: none;
+      width: 100%;
+      max-height: var(--auto-size-available-height);
+    }
+
+    :host(:is(:not([open]), :not([suggestions]))) #options {
+      display: none;
+    }
+
+    #options::part(base) {
+      width: 100%;
+      border-top: none;
+    }
+
+    input {
+      flex-grow: 1;
+      display: inline-flex;
+      border: none;
+      outline: none;
+      background: transparent;
+      font-size: var(--sl-input-font-size-small);
+    }
+
+    :host(:not([suggestions])) sl-menu, :host(:not([suggestions])) #toggle {
+      display: none;
+    }
+
+    #toggle {
+      padding-right: var(--sl-input-spacing-medium);
+    }
+
+    :host([size=small]) #toggle {
+      padding-right: var(--sl-spacing-2x-small);
+      font-size: var(--sl-input-font-size-small);
+    }
+
+    #toggle::part(base) {
+      padding: 0;
+    }
+
+    #toggle::part(base) {
+      transition: transform 0.25s ease;
+    }
+
+    :host([open]) #toggle::part(base) {
+      transform: rotate(180deg);
+    }
+
+    :host([open]) {
+      z-index: 100;
+    }
+
+    sl-dropdown::part(panel) {
+      width: 100%;
+    }
+
+    [part=suffix] {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-end;
+      max-width: 50%;
+      flex-grow: 0;
+    }
+
+    [part=label]::slotted(*), label {
+      align-self: flex-start;
+      margin-bottom: var(--sl-spacing-3x-small);
+    }
+
+    :host([required]) [part=label]::after {
+      content: "*";
+      margin-left: 0.25ch;
+    }
+
+    :host(:not([help-text])) #help-text {
+      display: none;
+    }
+
+    #help-text {
+      font-size: var(--sl-input-help-text-font-size-medium);
+      color: var(--sl-input-help-text-color);
+      margin-top: var(--sl-spacing-3x-small);
+    }
+
+    slot[name=prefix]::slotted(:last-child) {
+      margin-right: 1ch;
+    }
+
+    :host([size=small]) [part=base] {
+      min-height: var(--sl-input-height-small);
+      padding: 0 var(--sl-input-spacing-small);
+    }
+
+    #hide {
+      height: 0;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      white-space: pre;
+      overflow: hidden;
+      font-size: var(--sl-input-font-size-small);
+    }
+  `]);
+__runInitializers(_init, 1, Combobox);
+
+// src/widgets/webwriter-cloze-gap.ts
+import { property as property2 } from "lit/decorators/property.js";
+var _isAdding_dec, _input_dec2, _showOptions_dec, _distraction_dec, _value_dec2, _solution_dec, _a2, _WebwriterClozeGap_decorators, _init2, _solution, _value2, _distraction, _showOptions, _input2, _isAdding;
+_WebwriterClozeGap_decorators = [customElement2("webwriter-cloze-gap")];
+var _WebwriterClozeGap = class _WebwriterClozeGap extends (_a2 = LitElementWw, _solution_dec = [property2({ type: Array, attribute: true, reflect: true })], _value_dec2 = [property2({ type: String, attribute: true, reflect: true })], _distraction_dec = [property2({ type: Array, attribute: true, reflect: true })], _showOptions_dec = [property2({ type: Boolean, attribute: true, reflect: true })], _input_dec2 = [query2("ww-combobox")], _isAdding_dec = [property2({ type: Boolean, attribute: false })], _a2) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _solution, __runInitializers(_init2, 8, this)), __runInitializers(_init2, 11, this);
+    __privateAdd(this, _value2, __runInitializers(_init2, 12, this)), __runInitializers(_init2, 15, this);
+    __privateAdd(this, _distraction, __runInitializers(_init2, 16, this, [])), __runInitializers(_init2, 19, this);
+    __privateAdd(this, _showOptions, __runInitializers(_init2, 20, this, false)), __runInitializers(_init2, 23, this);
+    __publicField(this, "msg", (str) => this.lang in _WebwriterClozeGap.localization ? _WebwriterClozeGap.localization[this.lang][str] ?? str : str);
+    __privateAdd(this, _input2, __runInitializers(_init2, 24, this)), __runInitializers(_init2, 27, this);
+    __publicField(this, "handleChange", (e) => {
+      e.preventDefault();
+      if (!this.isContentEditable) {
+        this.value = this.input.value;
+      }
+    });
+    __publicField(this, "handleAddClick", (e) => {
+      e.stopImmediatePropagation();
+      e.preventDefault();
+      this.addSolution(this.input.value);
+      this.isAdding = true;
+      this.input.value = "";
+      this.input.open = true;
+    });
+    __publicField(this, "handleToggleClick", (e, value) => {
+      e.stopImmediatePropagation();
+      e.preventDefault();
+      this.toggleOptionType(value);
+    });
+    __publicField(this, "handleRemoveClick", (e, value) => {
+      e.stopImmediatePropagation();
+      e.preventDefault();
+      this.removeOption(value);
+    });
+    __publicField(this, "handleKeydown", (e) => {
+      if (e.key === "Enter") {
+        this.handleAddClick(e);
+      }
+    });
+    __publicField(this, "handleBlur", (e) => {
+      this.isAdding = false;
+      if (this.solution.length === 1) {
+        this.input.value = this.solution[0];
+      }
+    });
+    __privateAdd(this, _isAdding, __runInitializers(_init2, 28, this, false)), __runInitializers(_init2, 31, this);
+  }
+  async focus() {
+    (await this.input).focus();
+  }
+  addSolution(value) {
+    this.solution = Array.from(/* @__PURE__ */ new Set([...this.solution ?? [], value]));
+  }
+  toggleOptionType(value) {
+    if (this.solution.includes(value)) {
+      this.solution = this.solution.filter((v) => v !== value);
+      this.distraction = Array.from(/* @__PURE__ */ new Set([...this.distraction ?? [], value]));
+    } else if (this.distraction.includes(value)) {
+      this.distraction = this.distraction.filter((v) => v !== value);
+      this.solution = Array.from(/* @__PURE__ */ new Set([...this.solution ?? [], value]));
+    }
+  }
+  removeOption(value) {
+    this.solution = this.solution.filter((v) => v !== value);
+    this.distraction = this.distraction.filter((v) => v !== value);
+    if (this.allOptions.length === 0) {
+      this.isAdding = false;
+    }
+  }
+  get allOptions() {
+    return [...this.solution ?? [], ...this.distraction];
+  }
+  render() {
+    return html2`<ww-combobox @blur=${this.handleBlur} ?suggestions=${this.allOptions.length > 1 || this.isAdding || this.distraction.length > 0} size="small" autosize .value=${this.value} @sl-change=${this.handleChange} @sl-input=${() => this.requestUpdate()} @keydown=${this.handleKeydown} >
+      <sl-icon-button id="add" title="Add another solution" ?disabled=${this.allOptions.includes(this.input?.value)} ?data-hidden=${!this.input?.value} src=${plus_default} size="small" slot="prefix" @click=${this.handleAddClick} @mousedown=${(e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    }} @focus=${(e) => e.stopPropagation()} ></sl-icon-button>
+      ${this.allOptions.sort().map((value) => html2`
+        <sl-option size="small" value=${value} class=${this.solution.includes(value) ? "solution" : "distraction"} >
+          <sl-icon-button title=${this.solution.includes(value) ? "Change to a distraction" : "Change to a solution"} class="toggle" slot="prefix" src=${this.solution.includes(value) ? check_circle_default : slash_circle_default} @click=${(e) => this.handleToggleClick(e, value)} @mousedown=${(e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    }}></sl-icon-button>
+          <span title=${this.solution.includes(value) ? "Solution" : "Distraction"}>${value}</span>
+          <sl-icon-button title="Remove" class="remove" slot="suffix" src=${x_default} @click=${(e) => this.handleRemoveClick(e, value)} @mousedown=${(e) => {
+      e.stopPropagation();
+      e.preventDefault();
+    }}></sl-icon-button>
+        </sl-option>  
+      `)}
+    </ww-combobox>`;
+  }
+};
+_init2 = __decoratorStart(_a2);
+_solution = new WeakMap();
+_value2 = new WeakMap();
+_distraction = new WeakMap();
+_showOptions = new WeakMap();
+_input2 = new WeakMap();
+_isAdding = new WeakMap();
+__decorateElement(_init2, 4, "solution", _solution_dec, _WebwriterClozeGap, _solution);
+__decorateElement(_init2, 4, "value", _value_dec2, _WebwriterClozeGap, _value2);
+__decorateElement(_init2, 4, "distraction", _distraction_dec, _WebwriterClozeGap, _distraction);
+__decorateElement(_init2, 4, "showOptions", _showOptions_dec, _WebwriterClozeGap, _showOptions);
+__decorateElement(_init2, 4, "input", _input_dec2, _WebwriterClozeGap, _input2);
+__decorateElement(_init2, 4, "isAdding", _isAdding_dec, _WebwriterClozeGap, _isAdding);
+_WebwriterClozeGap = __decorateElement(_init2, 0, "WebwriterClozeGap", _WebwriterClozeGap_decorators, _WebwriterClozeGap);
+__publicField(_WebwriterClozeGap, "localization", {});
+__publicField(_WebwriterClozeGap, "scopedElements", {
+  "ww-combobox": Combobox,
+  "sl-icon-button": SlIconButton,
+  "sl-option": SlOption
+});
+__publicField(_WebwriterClozeGap, "styles", css2`
+    :host {
+      display: inline-block !important;
+      vertical-align: top;
+      margin: 0 1ch;
+      max-width: calc(100% - 2ch);
+      max-height: 1lh;
+    }
+
+    :host(::after) {
+      content: " ";
+      display: block;
+    }
+
+    sl-icon-button[data-hidden] {
+      visibility: hidden;
+    }
+
+    sl-icon-button::part(base) {
+      padding: 0;
+    }
+
+    :host(:not(:focus-within)) #add {
+      visibility: hidden;
+    }
+
+    sl-icon-button {
+      overflow: visible;
+      margin-right: 0;
+    }
+
+    ww-combobox::part(base) {
+      min-height: unset;
+      padding: 2px 2px;
+    }
+
+    :host(:is([contenteditable=true], [contenteditable=""])) ww-combobox::part(input) {
+      color: var(--sl-color-success-700);
+    }
+
+    sl-option::part(base) {
+      padding: 0;
+      font-size: var(--sl-input-font-size-small);
+    }
+
+    sl-option::part(label) {
+      padding: var(--sl-spacing-2x-small) 0;
+    }
+
+    sl-option::part(label):hover {
+      color: var(--sl-color-primary-600);
+    }
+
+    sl-option::part(checked-icon) {
+      display: none;
+    }
+
+    .remove::part(base):hover {
+      color: var(--sl-color-danger-600) !important;
+    }
+
+    .remove::part(base):active {
+      color: var(--sl-color-danger-800) !important;
+    }
+
+    :is(.toggle, .remove)::part(base) {
+      padding:  var(--sl-spacing-2x-small);
+    }
+
+    .solution::part(base) {
+      color: var(--sl-color-success-700);
+    }
+
+    .toggle {
+      color: inherit;
+    }
+
+
+  `);
+__runInitializers(_init2, 1, _WebwriterClozeGap);
+var WebwriterClozeGap = _WebwriterClozeGap;
+export {
+  WebwriterClozeGap
+};