@internetarchive/elements 0.2.2 → 0.2.3-alpha-webdev8378.1

package/dist/src/elements/ia-otp-input/ia-otp-input.js

@@ -0,0 +1,217 @@
+import { __decorate } from "tslib";
+import { html, LitElement, css, } from 'lit';
+import { property, customElement, queryAll } from 'lit/decorators.js';
+import themeStyles from '../../themes/theme-styles.js';
+/**
+ * Custom event options for the component
+ */
+const Events = {
+    CodeSubmitted: 'codeSubmitted',
+};
+const NUMERIC_REGEX = /^[0-9]+$/;
+const ALPHANUMERIC_REGEX = /^[a-zA-Z0-9]+$/;
+/**
+ * Renders an input for OTP entry, which combines a series of separate
+ * inputs into one, shifting focus as needed and handling paste and backspace
+ * events.
+ */
+let IAOTPInput = class IAOTPInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        /* Whether to disable all inputs */
+        this.disabled = false;
+        /* Number of characters to expect for the passcode */
+        this.numChars = 6;
+        /* Whether to restrict entry to numeric characters */
+        this.numericOnly = true;
+        /* Regex for allowed characters. Updates based on numeric only */
+        this.allowedChars = NUMERIC_REGEX;
+    }
+    render() {
+        return html `
+      ${[...Array(this.numChars).keys()].map((i) => html `<input
+            id="OTP-input-${i}"
+            part="input"
+            type="text"
+            autocomplete=${i === 0 ? 'one-time-code' : 'off'}
+            inputmode=${this.numericOnly ? 'numeric' : 'text'}
+            ?disabled=${this.disabled}
+            @beforeinput=${this.handleInput}
+            @paste=${this.handlePaste}
+            @keydown=${this.handleKeydown}
+          />`)}
+    `;
+    }
+    firstUpdated() {
+        this.inputs[0].focus();
+    }
+    willUpdate(changed) {
+        if (changed.has('numericOnly')) {
+            this.allowedChars = this.numericOnly ? NUMERIC_REGEX : ALPHANUMERIC_REGEX;
+        }
+        if (changed.has('prefillValue') && this.prefillValue !== undefined) {
+            this.fillInputs(this.prefillValue);
+            this.prefillValue = undefined;
+        }
+    }
+    /* Shifts forward on input */
+    handleInput(e) {
+        e.preventDefault();
+        const input = e.target;
+        const addedValue = e.data;
+        if (!addedValue)
+            return;
+        if (addedValue.length > 1) {
+            this.fillInputs(addedValue);
+            return;
+        }
+        if (!this.allowedChars.test(addedValue))
+            return;
+        input.value = addedValue;
+        const next = input.nextElementSibling;
+        if (next)
+            next.focus();
+        this.submitIfInputsFilled();
+    }
+    /* Performs special actions associated with some keys */
+    handleKeydown(e) {
+        const input = e.target;
+        const key = e.key;
+        const prev = input.previousElementSibling;
+        const next = input.nextElementSibling;
+        switch (key) {
+            case 'Backspace':
+            case 'Delete':
+                e.preventDefault();
+                if (prev)
+                    prev.focus();
+                if (input.value === '') {
+                    prev.value = '';
+                    break;
+                }
+                input.value = '';
+                break;
+            case 'Tab':
+                input.select();
+                break;
+            case 'ArrowRight':
+            case 'Right':
+                e.preventDefault();
+                if (next)
+                    next.focus();
+                break;
+            case 'ArrowLeft':
+            case 'Left':
+                e.preventDefault();
+                if (prev)
+                    prev.focus();
+                break;
+        }
+    }
+    /**
+     * Transmits pasted data to the input-filling function
+     */
+    handlePaste(e) {
+        e.preventDefault();
+        const pastedText = e.clipboardData?.getData('text');
+        if (pastedText)
+            this.fillInputs(pastedText);
+    }
+    /**
+     * Fills as many inputs as possible with the specified value, starting from the beginning.
+     * Submits the result if enough characters are filled.
+     */
+    fillInputs(value) {
+        if (value === '')
+            this.clearInputs();
+        const charsToFill = value
+            .split('')
+            .filter((char) => this.allowedChars.test(char))
+            .slice(0, this.numChars);
+        if (!charsToFill || charsToFill.length === 0)
+            return;
+        charsToFill.forEach((char, i) => (this.inputs[i].value = char));
+        if (charsToFill.length === this.numChars) {
+            this.triggerSubmit(charsToFill.join(''));
+            this.inputs[this.numChars - 1].focus();
+            return;
+        }
+        const next = this.inputs[charsToFill.length];
+        next.focus();
+    }
+    /** Clears all inputs and returns focus to first input */
+    clearInputs() {
+        this.inputs.forEach((input) => (input.value = ''));
+        this.inputs[0].focus();
+    }
+    /** Checks whether all inputs are filled and submits if so */
+    submitIfInputsFilled() {
+        const code = [];
+        this.inputs.forEach((input) => {
+            if (input.value)
+                code.push(input.value);
+        });
+        if (code.length === this.numChars)
+            this.triggerSubmit(code.join(''));
+    }
+    /* Submits code */
+    triggerSubmit(code) {
+        this.dispatchEvent(new CustomEvent(Events.CodeSubmitted, {
+            detail: this.numericOnly ? code : code.toUpperCase(),
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          --primary-text-color--: var(--primary-text-color);
+          --font-size-lg--: var(--font-size-lg);
+        }
+
+        :host {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          gap: 5px;
+        }
+
+        input {
+          color: var(--primary-text-color--);
+          font-size: var(--font-size-lg--);
+          width: var(--font-size-lg--);
+          font-weight: bold;
+          height: calc(var(--font-size-lg--) + 1.25rem);
+          text-align: center;
+          text-transform: uppercase;
+          padding: 0;
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: String })
+], IAOTPInput.prototype, "prefillValue", void 0);
+__decorate([
+    property({ type: Boolean })
+], IAOTPInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Number })
+], IAOTPInput.prototype, "numChars", void 0);
+__decorate([
+    property({ type: Boolean })
+], IAOTPInput.prototype, "numericOnly", void 0);
+__decorate([
+    property({ type: Object })
+], IAOTPInput.prototype, "allowedChars", void 0);
+__decorate([
+    queryAll('input')
+], IAOTPInput.prototype, "inputs", void 0);
+IAOTPInput = __decorate([
+    customElement('ia-otp-input')
+], IAOTPInput);
+export { IAOTPInput };
+//# sourceMappingURL=ia-otp-input.js.map

package/dist/src/elements/ia-otp-input/ia-otp-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-otp-input.js","sourceRoot":"","sources":["../../../../src/elements/ia-otp-input/ia-otp-input.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  html,\n  LitElement,\n  TemplateResult,\n  CSSResultGroup,\n  css,\n  PropertyValues,\n} from 'lit';\nimport { property, customElement, queryAll } from 'lit/decorators.js';\nimport themeStyles from '@src/themes/theme-styles';\n\n/**\n * Custom event options for the component\n */\nconst Events = {\n  CodeSubmitted: 'codeSubmitted',\n};\n\nconst NUMERIC_REGEX = /^[0-9]+$/;\nconst ALPHANUMERIC_REGEX = /^[a-zA-Z0-9]+$/;\n\n/**\n * Renders an input for OTP entry, which combines a series of separate\n * inputs into one, shifting focus as needed and handling paste and backspace\n * events.\n */\n@customElement('ia-otp-input')\nexport class IAOTPInput extends LitElement {\n  /* An optional value to prefill the inputs with */\n  @property({ type: String })\n  prefillValue?: string;\n\n  /* Whether to disable all inputs */\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  /* Number of characters to expect for the passcode */\n  @property({ type: Number })\n  numChars: number = 6;\n\n  /* Whether to restrict entry to numeric characters */\n  @property({ type: Boolean })\n  numericOnly: boolean = true;\n\n  /* Regex for allowed characters. Updates based on numeric only */\n  @property({ type: Object })\n  private allowedChars: RegExp = NUMERIC_REGEX;\n\n  /* Array of OTP inputs */\n  @queryAll('input')\n  private inputs!: NodeListOf<HTMLInputElement>;\n\n  render(): TemplateResult {\n    return html`\n      ${[...Array(this.numChars).keys()].map(\n        (i) =>\n          html`<input\n            id=\"OTP-input-${i}\"\n            part=\"input\"\n            type=\"text\"\n            autocomplete=${i === 0 ? 'one-time-code' : 'off'}\n            inputmode=${this.numericOnly ? 'numeric' : 'text'}\n            ?disabled=${this.disabled}\n            @beforeinput=${this.handleInput}\n            @paste=${this.handlePaste}\n            @keydown=${this.handleKeydown}\n          />`,\n      )}\n    `;\n  }\n\n  protected firstUpdated(): void {\n    this.inputs[0].focus();\n  }\n\n  protected willUpdate(changed: PropertyValues): void {\n    if (changed.has('numericOnly')) {\n      this.allowedChars = this.numericOnly ? NUMERIC_REGEX : ALPHANUMERIC_REGEX;\n    }\n\n    if (changed.has('prefillValue') && this.prefillValue !== undefined) {\n      this.fillInputs(this.prefillValue);\n      this.prefillValue = undefined;\n    }\n  }\n\n  /* Shifts forward on input */\n  private handleInput(e: InputEvent): void {\n    e.preventDefault();\n    const input = e.target as HTMLInputElement;\n    const addedValue = e.data;\n\n    if (!addedValue) return;\n    if (addedValue.length > 1) {\n      this.fillInputs(addedValue);\n      return;\n    }\n    if (!this.allowedChars.test(addedValue)) return;\n\n    input.value = addedValue;\n    const next = input.nextElementSibling as HTMLInputElement;\n    if (next) next.focus();\n\n    this.submitIfInputsFilled();\n  }\n\n  /* Performs special actions associated with some keys */\n  private handleKeydown(e: KeyboardEvent): void {\n    const input = e.target as HTMLInputElement;\n    const key = e.key;\n    const prev = input.previousElementSibling as HTMLInputElement;\n    const next = input.nextElementSibling as HTMLInputElement;\n\n    switch (key) {\n      case 'Backspace':\n      case 'Delete':\n        e.preventDefault();\n        if (prev) prev.focus();\n\n        if (input.value === '') {\n          prev.value = '';\n          break;\n        }\n\n        input.value = '';\n        break;\n      case 'Tab':\n        input.select();\n        break;\n      case 'ArrowRight':\n      case 'Right':\n        e.preventDefault();\n        if (next) next.focus();\n        break;\n      case 'ArrowLeft':\n      case 'Left':\n        e.preventDefault();\n        if (prev) prev.focus();\n        break;\n    }\n  }\n\n  /**\n   * Transmits pasted data to the input-filling function\n   */\n  private handlePaste(e: ClipboardEvent): void {\n    e.preventDefault();\n\n    const pastedText = e.clipboardData?.getData('text');\n    if (pastedText) this.fillInputs(pastedText);\n  }\n\n  /**\n   * Fills as many inputs as possible with the specified value, starting from the beginning.\n   * Submits the result if enough characters are filled.\n   */\n  private fillInputs(value: string) {\n    if (value === '') this.clearInputs();\n\n    const charsToFill = value\n      .split('')\n      .filter((char) => this.allowedChars.test(char))\n      .slice(0, this.numChars);\n\n    if (!charsToFill || charsToFill.length === 0) return;\n    charsToFill.forEach(\n      (char, i) => ((this.inputs[i] as HTMLInputElement).value = char),\n    );\n\n    if (charsToFill.length === this.numChars) {\n      this.triggerSubmit(charsToFill.join(''));\n      this.inputs[this.numChars - 1].focus();\n      return;\n    }\n\n    const next = this.inputs[charsToFill.length];\n    next.focus();\n  }\n\n  /** Clears all inputs and returns focus to first input */\n  private clearInputs(): void {\n    this.inputs.forEach((input) => (input.value = ''));\n    this.inputs[0].focus();\n  }\n\n  /** Checks whether all inputs are filled and submits if so */\n  private submitIfInputsFilled(): void {\n    const code: string[] = [];\n    this.inputs.forEach((input) => {\n      if (input.value) code.push(input.value);\n    });\n\n    if (code.length === this.numChars) this.triggerSubmit(code.join(''));\n  }\n\n  /* Submits code */\n  private triggerSubmit(code: string): void {\n    this.dispatchEvent(\n      new CustomEvent(Events.CodeSubmitted, {\n        detail: this.numericOnly ? code : code.toUpperCase(),\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --primary-text-color--: var(--primary-text-color);\n          --font-size-lg--: var(--font-size-lg);\n        }\n\n        :host {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: nowrap;\n          gap: 5px;\n        }\n\n        input {\n          color: var(--primary-text-color--);\n          font-size: var(--font-size-lg--);\n          width: var(--font-size-lg--);\n          font-weight: bold;\n          height: calc(var(--font-size-lg--) + 1.25rem);\n          text-align: center;\n          text-transform: uppercase;\n          padding: 0;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/labs/ia-snow/flake.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="36.283" height="36.283"><path d="M35.531 17.391h-3.09l.845-1.464a.748.748 0 1 0-1.297-.75l-1.276 2.214H28.61l2.515-4.354a.751.751 0 0 0-.272-1.024.75.75 0 0 0-1.024.274l-2.948 5.104h-2.023a6.751 6.751 0 0 0-2.713-4.684l1.019-1.76 5.896-.002a.75.75 0 0 0 0-1.5l-5.029.002 1.051-1.82 2.557.002a.75.75 0 0 0 0-1.5l-1.689-.002 1.545-2.676a.75.75 0 1 0-1.302-.75l-1.547 2.676-.844-1.463a.749.749 0 1 0-1.297.75l1.278 2.213-1.051 1.818-2.514-4.354a.75.75 0 0 0-1.298.75l2.946 5.104-1.016 1.758a6.692 6.692 0 0 0-2.706-.57 6.74 6.74 0 0 0-2.707.568l-1.013-1.754 2.946-5.105a.75.75 0 0 0-1.298-.75L13.56 8.697l-1.05-1.818 1.278-2.217a.749.749 0 0 0-1.298-.75l-.845 1.465-1.551-2.678a.75.75 0 0 0-1.024-.273.748.748 0 0 0-.274 1.023l1.545 2.678H8.652a.75.75 0 0 0 0 1.5h2.556l1.05 1.818H7.231a.75.75 0 0 0 0 1.5h5.894l1.017 1.762a6.755 6.755 0 0 0-2.712 4.684H9.406l-2.95-5.104a.75.75 0 1 0-1.299.75l2.516 4.354H5.569l-1.277-2.213a.75.75 0 0 0-1.298.75l.845 1.463H.75a.75.75 0 0 0 0 1.5h3.09l-.845 1.465a.747.747 0 0 0 .275 1.022.75.75 0 0 0 .374.103.75.75 0 0 0 .65-.375l1.277-2.215h2.103l-2.516 4.354a.75.75 0 0 0 1.299.75l2.949-5.104h2.024a6.761 6.761 0 0 0 2.712 4.685l-1.017 1.762H7.232a.75.75 0 0 0 0 1.5h5.026l-1.05 1.818H8.651a.75.75 0 0 0 0 1.5h1.69l-1.545 2.676a.75.75 0 0 0 1.299.75l1.546-2.676.846 1.465a.755.755 0 0 0 .65.375.737.737 0 0 0 .375-.103.747.747 0 0 0 .274-1.022l-1.279-2.215 1.05-1.82 2.515 4.354a.75.75 0 0 0 1.299-.75l-2.947-5.104 1.013-1.756a6.72 6.72 0 0 0 5.415 0l1.014 1.756-2.947 5.104a.75.75 0 0 0 1.298.75l2.515-4.354 1.053 1.82-1.277 2.213a.75.75 0 0 0 1.298.75l.844-1.463 1.545 2.678c.141.24.393.375.65.375a.75.75 0 0 0 .649-1.125l-1.548-2.678h1.689a.75.75 0 0 0 0-1.5h-2.557l-1.051-1.82 5.029.002a.75.75 0 0 0 0-1.5l-5.896-.002-1.019-1.76a6.75 6.75 0 0 0 2.711-4.685h2.023l2.947 5.104a.753.753 0 0 0 1.025.273.749.749 0 0 0 .272-1.023l-2.515-4.354h2.104l1.279 2.215a.75.75 0 0 0 .649.375c.127 0 .256-.03.375-.103a.748.748 0 0 0 .273-1.022l-.848-1.465h3.092a.75.75 0 0 0 .003-1.5zm-12.136.75c0 .257-.041.502-.076.75a5.223 5.223 0 0 1-1.943 3.358 5.242 5.242 0 0 1-1.291.766 5.224 5.224 0 0 1-1.949.384 5.157 5.157 0 0 1-3.239-1.15 5.22 5.22 0 0 1-1.943-3.358c-.036-.247-.076-.493-.076-.75s.04-.503.076-.75a5.22 5.22 0 0 1 1.944-3.359c.393-.312.82-.576 1.291-.765a5.219 5.219 0 0 1 1.948-.384c.69 0 1.344.142 1.948.384.471.188.898.454 1.291.765a5.222 5.222 0 0 1 1.943 3.359c.035.247.076.493.076.75z" fill=":color:"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="36.283" height="36.283"><path d="M35.531 17.391h-3.09l.845-1.464a.748.748 0 1 0-1.297-.75l-1.276 2.214H28.61l2.515-4.354a.751.751 0 0 0-.272-1.024.75.75 0 0 0-1.024.274l-2.948 5.104h-2.023a6.751 6.751 0 0 0-2.713-4.684l1.019-1.76 5.896-.002a.75.75 0 0 0 0-1.5l-5.029.002 1.051-1.82 2.557.002a.75.75 0 0 0 0-1.5l-1.689-.002 1.545-2.676a.75.75 0 1 0-1.302-.75l-1.547 2.676-.844-1.463a.749.749 0 1 0-1.297.75l1.278 2.213-1.051 1.818-2.514-4.354a.75.75 0 0 0-1.298.75l2.946 5.104-1.016 1.758a6.692 6.692 0 0 0-2.706-.57 6.74 6.74 0 0 0-2.707.568l-1.013-1.754 2.946-5.105a.75.75 0 0 0-1.298-.75L13.56 8.697l-1.05-1.818 1.278-2.217a.749.749 0 0 0-1.298-.75l-.845 1.465-1.551-2.678a.75.75 0 0 0-1.024-.273.748.748 0 0 0-.274 1.023l1.545 2.678H8.652a.75.75 0 0 0 0 1.5h2.556l1.05 1.818H7.231a.75.75 0 0 0 0 1.5h5.894l1.017 1.762a6.755 6.755 0 0 0-2.712 4.684H9.406l-2.95-5.104a.75.75 0 1 0-1.299.75l2.516 4.354H5.569l-1.277-2.213a.75.75 0 0 0-1.298.75l.845 1.463H.75a.75.75 0 0 0 0 1.5h3.09l-.845 1.465a.747.747 0 0 0 .275 1.022.75.75 0 0 0 .374.103.75.75 0 0 0 .65-.375l1.277-2.215h2.103l-2.516 4.354a.75.75 0 0 0 1.299.75l2.949-5.104h2.024a6.761 6.761 0 0 0 2.712 4.685l-1.017 1.762H7.232a.75.75 0 0 0 0 1.5h5.026l-1.05 1.818H8.651a.75.75 0 0 0 0 1.5h1.69l-1.545 2.676a.75.75 0 0 0 1.299.75l1.546-2.676.846 1.465a.755.755 0 0 0 .65.375.737.737 0 0 0 .375-.103.747.747 0 0 0 .274-1.022l-1.279-2.215 1.05-1.82 2.515 4.354a.75.75 0 0 0 1.299-.75l-2.947-5.104 1.013-1.756a6.72 6.72 0 0 0 5.415 0l1.014 1.756-2.947 5.104a.75.75 0 0 0 1.298.75l2.515-4.354 1.053 1.82-1.277 2.213a.75.75 0 0 0 1.298.75l.844-1.463 1.545 2.678c.141.24.393.375.65.375a.75.75 0 0 0 .649-1.125l-1.548-2.678h1.689a.75.75 0 0 0 0-1.5h-2.557l-1.051-1.82 5.029.002a.75.75 0 0 0 0-1.5l-5.896-.002-1.019-1.76a6.75 6.75 0 0 0 2.711-4.685h2.023l2.947 5.104a.753.753 0 0 0 1.025.273.749.749 0 0 0 .272-1.023l-2.515-4.354h2.104l1.279 2.215a.75.75 0 0 0 .649.375c.127 0 .256-.03.375-.103a.748.748 0 0 0 .273-1.022l-.848-1.465h3.092a.75.75 0 0 0 .003-1.5zm-12.136.75c0 .257-.041.502-.076.75a5.223 5.223 0 0 1-1.943 3.358 5.242 5.242 0 0 1-1.291.766 5.224 5.224 0 0 1-1.949.384 5.157 5.157 0 0 1-3.239-1.15 5.22 5.22 0 0 1-1.943-3.358c-.036-.247-.076-.493-.076-.75s.04-.503.076-.75a5.22 5.22 0 0 1 1.944-3.359c.393-.312.82-.576 1.291-.765a5.219 5.219 0 0 1 1.948-.384c.69 0 1.344.142 1.948.384.471.188.898.454 1.291.765a5.222 5.222 0 0 1 1.943 3.359c.035.247.076.493.076.75z" fill=":color:"/></svg>

package/dist/src/themes/theme-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-styles.d.ts","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,yBAsEhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"theme-styles.d.ts","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,yBAkFhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/src/themes/theme-styles.js

@@ -14,6 +14,9 @@ const themeStyles = css `
     --default-icon-width: 1.25rem;
     --default-padding-sm: 5px;
     --default-combo-box-width: auto;
+    --default-search-bar-height: 30px;
+    --default-search-bar-width: auto;
+    --default-font-size-lg: 2.25rem;
 
     /* Colors */
     --true-white: #fff;
@@ -45,10 +48,19 @@ const themeStyles = css `
     /* Sizing */
     --icon-width: var(--ia-theme-icon-width, var(--default-icon-width));
     --padding-sm: var(--ia-theme-padding-sm, var(--default-padding-sm));
+    --search-bar-height: var(
+      --ia-theme-search-bar-height,
+      var(--default-search-bar-height)
+    );
+    --search-bar-width: var(
+      --ia-theme-search-bar-width,
+      var(--default-search-bar-width)
+    );
     --combo-box-width: var(
       --ia-theme-combo-box-width,
       var(--default-combo-box-width)
     );
+    --font-size-lg: var(--ia-theme-font-size-lg, var(--default-font-size-lg));
 
     /* Backgrounds and fills */
     --primary-background-color: var(

package/dist/src/themes/theme-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-styles.js","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsEtB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst themeStyles = css`\n  :host {\n    /*\n    BASE STYLES\n    Default fallback values for theme styles. Assumes 16px root font size.\n    To adjust values, use theme styles below.\n    */\n\n    /* Typography */\n    --default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\n    /* Sizing */\n    --default-icon-width: 1.25rem;\n    --default-padding-sm: 5px;\n    --default-combo-box-width: auto;\n\n    /* Colors */\n    --true-white: #fff;\n    --off-white: #fbfbfd;\n    --dark-gray: #2c2c2c;\n    --light-gray: #666;\n    --classic-red: #e51c23;\n    --mint-green: #31a481;\n    --navy-blue: #194880;\n    --bright-blue: #4b64ff;\n\n    /*\n    ADJUSTABLE STYLES\n    To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.\n    */\n\n    /* Text */\n    --base-font-family: var(\n      --ia-theme-base-font-family,\n      var(--default-font-family)\n    );\n    --primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));\n    --secondary-text-color: var(\n      --ia-theme-secondary-text-color,\n      var(--light-gray)\n    );\n    --link-color: var(--ia-theme-link-color, var(--bright-blue));\n\n    /* Sizing */\n    --icon-width: var(--ia-theme-icon-width, var(--default-icon-width));\n    --padding-sm: var(--ia-theme-padding-sm, var(--default-padding-sm));\n    --combo-box-width: var(\n      --ia-theme-combo-box-width,\n      var(--default-combo-box-width)\n    );\n\n    /* Backgrounds and fills */\n    --primary-background-color: var(\n      --ia-theme-primary-background-color,\n      var(--off-white)\n    );\n    --secondary-background-color: var(\n      --ia-theme-secondary-background-color,\n      var(--true-white)\n    );\n\n    /* State colors */\n    --primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));\n    --primary-cta-text-color: var(\n      --ia-theme-primary-cta-text-color,\n      var(--true-white)\n    );\n    --color-success: var(--ia-theme-color-success, var(--mint-green));\n    --color-danger: var(--ia-theme-color-danger, var(--classic-red));\n  }\n`;\n\nexport default themeStyles;\n"]}
+{"version":3,"file":"theme-styles.js","sourceRoot":"","sources":["../../../src/themes/theme-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFtB,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst themeStyles = css`\n  :host {\n    /*\n    BASE STYLES\n    Default fallback values for theme styles. Assumes 16px root font size.\n    To adjust values, use theme styles below.\n    */\n\n    /* Typography */\n    --default-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\n    /* Sizing */\n    --default-icon-width: 1.25rem;\n    --default-padding-sm: 5px;\n    --default-combo-box-width: auto;\n    --default-search-bar-height: 30px;\n    --default-search-bar-width: auto;\n    --default-font-size-lg: 2.25rem;\n\n    /* Colors */\n    --true-white: #fff;\n    --off-white: #fbfbfd;\n    --dark-gray: #2c2c2c;\n    --light-gray: #666;\n    --classic-red: #e51c23;\n    --mint-green: #31a481;\n    --navy-blue: #194880;\n    --bright-blue: #4b64ff;\n\n    /*\n    ADJUSTABLE STYLES\n    To be adjusted by setting i.e. --ia-theme-link-color at the :root or component level.\n    */\n\n    /* Text */\n    --base-font-family: var(\n      --ia-theme-base-font-family,\n      var(--default-font-family)\n    );\n    --primary-text-color: var(--ia-theme-primary-text-color, var(--dark-gray));\n    --secondary-text-color: var(\n      --ia-theme-secondary-text-color,\n      var(--light-gray)\n    );\n    --link-color: var(--ia-theme-link-color, var(--bright-blue));\n\n    /* Sizing */\n    --icon-width: var(--ia-theme-icon-width, var(--default-icon-width));\n    --padding-sm: var(--ia-theme-padding-sm, var(--default-padding-sm));\n    --search-bar-height: var(\n      --ia-theme-search-bar-height,\n      var(--default-search-bar-height)\n    );\n    --search-bar-width: var(\n      --ia-theme-search-bar-width,\n      var(--default-search-bar-width)\n    );\n    --combo-box-width: var(\n      --ia-theme-combo-box-width,\n      var(--default-combo-box-width)\n    );\n    --font-size-lg: var(--ia-theme-font-size-lg, var(--default-font-size-lg));\n\n    /* Backgrounds and fills */\n    --primary-background-color: var(\n      --ia-theme-primary-background-color,\n      var(--off-white)\n    );\n    --secondary-background-color: var(\n      --ia-theme-secondary-background-color,\n      var(--true-white)\n    );\n\n    /* State colors */\n    --primary-cta-fill: var(--ia-theme-primary-cta-fill, var(--navy-blue));\n    --primary-cta-text-color: var(\n      --ia-theme-primary-cta-text-color,\n      var(--true-white)\n    );\n    --color-success: var(--ia-theme-color-success, var(--mint-green));\n    --color-danger: var(--ia-theme-color-danger, var(--classic-red));\n  }\n`;\n\nexport default themeStyles;\n"]}

package/package.json

@@ -1,118 +1,120 @@
-{
-  "name": "@internetarchive/elements",
-  "version": "0.2.2",
-  "description": "A web component library from the Internet Archive.",
-  "license": "AGPL-3.0-only",
-  "types": "./dist/src/elements/index.d.ts",
-  "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/internetarchive/elements.git"
-  },
-  "bugs": {
-    "url": "https://github.com/internetarchive/elements/issues"
-  },
-  "scripts": {
-    "dev": "wireit",
-    "build": "wireit",
-    "clean": "wireit",
-    "lint": "wireit",
-    "format": "wireit",
-    "circular": "wireit",
-    "prepare": "wireit",
-    "test": "wireit",
-    "ghpages:build": "wireit"
-  },
-  "dependencies": {
-    "@lit/localize": "^0.12.2",
-    "lit": "^2.8.0 || ^3.3.2",
-    "magic-snowflakes": "^7.0.2",
-    "tslib": "^2.8.1"
-  },
-  "devDependencies": {
-    "@open-wc/testing-helpers": "^3.0.1",
-    "@typescript-eslint/eslint-plugin": "^8.46.4",
-    "@vitest/browser": "^4.0.8",
-    "@vitest/browser-playwright": "^4.0.8",
-    "@vitest/coverage-v8": "^4.0.8",
-    "eslint": "^9.39.1",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-html": "^8.1.3",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-lit": "^1.15.0",
-    "eslint-plugin-lit-a11y": "^4.1.4",
-    "eslint-plugin-no-only-tests": "^3.3.0",
-    "eslint-plugin-wc": "^2.2.1",
-    "highlight.js": "^11.11.1",
-    "madge": "^8.0.0",
-    "playwright": "^1.56.1",
-    "prettier": "^3.6.2",
-    "ts-lit-plugin": "^2.0.2",
-    "tsc-alias": "^1.8.16",
-    "typescript": "^5.9.3",
-    "vite": "^7.2.2",
-    "vitest": "^4.0.8",
-    "wireit": "^0.14.12"
-  },
-  "exports": {
-    ".": "./dist/src/index.js",
-    "./*": "./dist/src/elements/*.js",
-    "./labs/*": "./dist/src/labs/*.js"
-  },
-  "files": [
-    "README.md",
-    "dist",
-    "!dist/**/*.test*",
-    "!dist/**/*-story*",
-    "!dist/demo",
-    "!dist/src/internal",
-    "!dist/*.tsbuildinfo"
-  ],
-  "wireit": {
-    "build": {
-      "command": "tsc --build --pretty && tsc-alias && rsync -zarvm --prune-empty-dirs --include \"*/\" --include \"*.svg\" --exclude=\"*\" src dist",
-      "dependencies": [
-        "circular"
-      ],
-      "files": [
-        "src/**/*.ts",
-        "tsconfig.json"
-      ],
-      "output": [
-        "dist/**"
-      ]
-    },
-    "circular": {
-      "command": "madge --circular --extensions ts ."
-    },
-    "clean": {
-      "command": "rm -rf dist"
-    },
-    "dev": {
-      "command": "vite"
-    },
-    "lint": {
-      "command": "eslint . && prettier \"**/*.ts\" --check"
-    },
-    "format": {
-      "command": "eslint . --fix && prettier \"**/*.ts\" --write"
-    },
-    "prepare": {
-      "dependencies": [
-        "build"
-      ]
-    },
-    "test": {
-      "command": "vitest",
-      "dependencies": [
-        "circular"
-      ]
-    },
-    "ghpages:build": {
-      "command": "vite build --config vite.config.ghpages.ts && touch ./ghpages/.nojekyll"
-    }
-  }
-}
+{
+  "name": "@internetarchive/elements",
+  "version": "0.2.3-alpha-webdev8378.1",
+  "description": "A web component library from the Internet Archive.",
+  "license": "AGPL-3.0-only",
+  "types": "./dist/src/elements/index.d.ts",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/internetarchive/elements.git"
+  },
+  "bugs": {
+    "url": "https://github.com/internetarchive/elements/issues"
+  },
+  "scripts": {
+    "dev": "wireit",
+    "build": "wireit",
+    "clean": "wireit",
+    "lint": "wireit",
+    "format": "wireit",
+    "circular": "wireit",
+    "prepare": "wireit",
+    "test": "wireit",
+    "ghpages:build": "wireit"
+  },
+  "dependencies": {
+    "@lit/localize": "^0.12.2",
+    "@internetarchive/ia-clearable-text-input": "^1.1.1",
+    "@internetarchive/ia-dropdown": "^2.1.0",
+    "lit": "^2.8.0 || ^3.3.2",
+    "magic-snowflakes": "^7.0.2",
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "@open-wc/testing-helpers": "^3.0.1",
+    "@typescript-eslint/eslint-plugin": "^8.46.4",
+    "@vitest/browser": "^4.0.8",
+    "@vitest/browser-playwright": "^4.0.8",
+    "@vitest/coverage-v8": "^4.0.8",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-html": "^8.1.3",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-lit": "^1.15.0",
+    "eslint-plugin-lit-a11y": "^4.1.4",
+    "eslint-plugin-no-only-tests": "^3.3.0",
+    "eslint-plugin-wc": "^2.2.1",
+    "highlight.js": "^11.11.1",
+    "madge": "^8.0.0",
+    "playwright": "^1.56.1",
+    "prettier": "^3.6.2",
+    "ts-lit-plugin": "^2.0.2",
+    "tsc-alias": "^1.8.16",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.2",
+    "vitest": "^4.0.8",
+    "wireit": "^0.14.12"
+  },
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./*": "./dist/src/elements/*.js",
+    "./labs/*": "./dist/src/labs/*.js"
+  },
+  "files": [
+    "README.md",
+    "dist",
+    "!dist/**/*.test*",
+    "!dist/**/*-story*",
+    "!dist/demo",
+    "!dist/src/internal",
+    "!dist/*.tsbuildinfo"
+  ],
+  "wireit": {
+    "build": {
+      "command": "tsc --build --pretty && tsc-alias && rsync -zarvm --prune-empty-dirs --include \"*/\" --include \"*.svg\" --exclude=\"*\" src dist",
+      "dependencies": [
+        "circular"
+      ],
+      "files": [
+        "src/**/*.ts",
+        "tsconfig.json"
+      ],
+      "output": [
+        "dist/**"
+      ]
+    },
+    "circular": {
+      "command": "madge --circular --extensions ts ."
+    },
+    "clean": {
+      "command": "rm -rf dist"
+    },
+    "dev": {
+      "command": "vite"
+    },
+    "lint": {
+      "command": "eslint . && prettier \"**/*.ts\" --check"
+    },
+    "format": {
+      "command": "eslint . --fix && prettier \"**/*.ts\" --write"
+    },
+    "prepare": {
+      "dependencies": [
+        "build"
+      ]
+    },
+    "test": {
+      "command": "vitest",
+      "dependencies": [
+        "circular"
+      ]
+    },
+    "ghpages:build": {
+      "command": "vite build --config vite.config.ghpages.ts && touch ./ghpages/.nojekyll"
+    }
+  }
+}