@warp-ds/elements 2.2.0-next.1 → 2.2.0-next.3

package/dist/packages/button/button.test.d.ts

@@ -0,0 +1 @@
+import "./index.js";

package/dist/packages/button/index.d.ts

@@ -1,61 +1,36 @@
-declare const WarpButton_base: {
+import { PropertyValues } from "lit";
+type ButtonVariant = "primary" | "secondary" | "negative" | "utility" | "pill" | "link";
+type ButtonType = "button" | "submit" | "reset";
+declare const WarpButton_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & {
     new (): {
         [x: string]: any;
     };
     [x: string]: any;
     createProperty(name: any, options: any): void;
 };
-export class WarpButton extends WarpButton_base {
-    static shadowRootOptions: any;
-    static properties: {
-        type: {
-            type: number;
-            reflect: boolean;
-        };
-        autofocus: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        variant: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        quiet: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        small: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        loading: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        href: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        target: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        rel: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        fullWidth: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        buttonClass: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
+declare class WarpButton extends WarpButton_base {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
     };
-    static styles: any[];
-    variant: string;
-    ariaValueTextLoading: string;
+    type: ButtonType;
+    autofocus: boolean;
+    variant: ButtonVariant;
+    quiet: boolean;
+    small: boolean;
+    loading: boolean;
+    href: string;
+    target: string;
+    rel: string;
+    fullWidth: boolean;
+    buttonClass: string;
+    name: string;
+    value: string;
+    static styles: import("lit").CSSResult[];
+    updated(changedProperties: PropertyValues<this>): void;
+    constructor();
     connectedCallback(): void;
     firstUpdated(): void;
     get _primaryClasses(): string[];
@@ -65,6 +40,7 @@ export class WarpButton extends WarpButton_base {
     get _pillClasses(): string[];
     get _linkClasses(): string[];
     get _classes(): string;
+    _handleButtonClick(): void;
     render(): import("lit").TemplateResult<1>;
 }
-export {};
+export { WarpButton };

package/dist/packages/button/index.js

@@ -1029,7 +1029,7 @@ var r = function() {
   }, []).join(" ");
 };
 
-// node_modules/.pnpm/@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-macros@3.1.0_typescri_qfhfd5z2jpd4amxt2golzdalsi/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-macros@3.1.0_ty_33a2537ce57a59324989ce8020998d0e/node_modules/@lingui/core/dist/index.mjs
 var import_unraw = __toESM(require_dist(), 1);
 
 // node_modules/.pnpm/@lingui+message-utils@5.2.0/node_modules/@lingui/message-utils/dist/compileMessage.mjs
@@ -1351,7 +1351,7 @@ Message: ${message}`);
   }
 }
 
-// node_modules/.pnpm/@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-macros@3.1.0_typescri_qfhfd5z2jpd4amxt2golzdalsi/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@5.2.0_@lingui+babel-plugin-lingui-macro@5.2.0_babel-plugin-macros@3.1.0_ty_33a2537ce57a59324989ce8020998d0e/node_modules/@lingui/core/dist/index.mjs
 var isString = (s) => typeof s === "string";
 var isFunction = (f) => typeof f === "function";
 var cache = /* @__PURE__ */ new Map();
@@ -1759,7 +1759,292 @@ function setupI18n(params = {}) {
 }
 var i18n = setupI18n();
 
-// node_modules/.pnpm/@warp-ds+css@2.1.1_@warp-ds+uno@2.1.0_unocss@0.62.0_postcss@8.5.1_rollup@4.32.1_vite@5.3.3_@t_sgrraibu65gdmqpe655kfrpl6a/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@open-wc+form-control@1.0.0/node_modules/@open-wc/form-control/src/FormControlMixin.js
+var __classPrivateFieldGet = function(receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = function(receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
+};
+function FormControlMixin(SuperClass) {
+  var _FormControl_instances, _FormControl_focused, _FormControl_forceError, _FormControl_touched, _FormControl_abortController, _FormControl_previousAbortController, _FormControl_awaitingValidationTarget, _FormControl_formValidationGroup_get, _FormControl_value, _FormControl_onFocus, _FormControl_onBlur, _FormControl_onInvalid, _FormControl_validationCompleteResolver, _FormControl_isValidationPending, _FormControl_validationComplete, _FormControl_shouldShowError, _FormControl_runValidators, _FormControl_setValidityWithOptionalTarget, _FormControl_getValidatorMessageForValue;
+  class FormControl extends SuperClass {
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
+    constructor(...args) {
+      var _a, _b, _c;
+      super(...args);
+      _FormControl_instances.add(this);
+      this.internals = this.attachInternals();
+      _FormControl_focused.set(this, false);
+      _FormControl_forceError.set(this, false);
+      _FormControl_touched.set(this, false);
+      _FormControl_abortController.set(this, void 0);
+      _FormControl_previousAbortController.set(this, void 0);
+      _FormControl_awaitingValidationTarget.set(this, true);
+      _FormControl_value.set(this, "");
+      _FormControl_onFocus.set(this, () => {
+        __classPrivateFieldSet(this, _FormControl_touched, true, "f");
+        __classPrivateFieldSet(this, _FormControl_focused, true, "f");
+        __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_shouldShowError).call(this);
+      });
+      _FormControl_onBlur.set(this, () => {
+        __classPrivateFieldSet(this, _FormControl_focused, false, "f");
+        __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_runValidators).call(this, this.shouldFormValueUpdate() ? __classPrivateFieldGet(this, _FormControl_value, "f") : "");
+        if (!this.validity.valid && __classPrivateFieldGet(this, _FormControl_touched, "f")) {
+          __classPrivateFieldSet(this, _FormControl_forceError, true, "f");
+        }
+        const showError = __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_shouldShowError).call(this);
+        if (this.validationMessageCallback) {
+          this.validationMessageCallback(showError ? this.internals.validationMessage : "");
+        }
+      });
+      _FormControl_onInvalid.set(this, () => {
+        var _a2;
+        if (__classPrivateFieldGet(this, _FormControl_awaitingValidationTarget, "f") && this.validationTarget) {
+          this.internals.setValidity(this.validity, this.validationMessage, this.validationTarget);
+          __classPrivateFieldSet(this, _FormControl_awaitingValidationTarget, false, "f");
+        }
+        __classPrivateFieldSet(this, _FormControl_touched, true, "f");
+        __classPrivateFieldSet(this, _FormControl_forceError, true, "f");
+        __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_shouldShowError).call(this);
+        (_a2 = this === null || this === void 0 ? void 0 : this.validationMessageCallback) === null || _a2 === void 0 ? void 0 : _a2.call(this, this.showError ? this.internals.validationMessage : "");
+      });
+      _FormControl_validationCompleteResolver.set(this, void 0);
+      _FormControl_isValidationPending.set(this, false);
+      _FormControl_validationComplete.set(this, Promise.resolve());
+      (_a = this.addEventListener) === null || _a === void 0 ? void 0 : _a.call(this, "focus", __classPrivateFieldGet(this, _FormControl_onFocus, "f"));
+      (_b = this.addEventListener) === null || _b === void 0 ? void 0 : _b.call(this, "blur", __classPrivateFieldGet(this, _FormControl_onBlur, "f"));
+      (_c = this.addEventListener) === null || _c === void 0 ? void 0 : _c.call(this, "invalid", __classPrivateFieldGet(this, _FormControl_onInvalid, "f"));
+      this.setValue(null);
+    }
+    /** Wires up control instances to be form associated */
+    static get formAssociated() {
+      return true;
+    }
+    static get validators() {
+      return this.formControlValidators || [];
+    }
+    /**
+     * Allows the FormControl instance to respond to Validator attributes.
+     * For instance, if a given Validator has a `required` attribute, that
+     * validator will be evaluated whenever the host's required attribute
+     * is updated.
+     */
+    static get observedAttributes() {
+      const validatorAttributes = this.validators.map((validator) => validator.attribute).flat();
+      const observedAttributes = super.observedAttributes || [];
+      const attributeSet = /* @__PURE__ */ new Set([...observedAttributes, ...validatorAttributes]);
+      return [...attributeSet];
+    }
+    /**
+     * Return the validator associated with a given attribute. If no
+     * Validator is associated with the attribute, it will return null.
+     */
+    static getValidator(attribute) {
+      return this.validators.find((validator) => validator.attribute === attribute) || null;
+    }
+    /**
+     * Get all validators that are set to react to a given attribute
+     * @param {string} attribute - The attribute that has changed
+     * @returns {Validator[]}
+     */
+    static getValidators(attribute) {
+      return this.validators.filter((validator) => {
+        var _a;
+        if (validator.attribute === attribute || ((_a = validator.attribute) === null || _a === void 0 ? void 0 : _a.includes(attribute))) {
+          return true;
+        }
+      });
+    }
+    /** Return a reference to the control's form */
+    get form() {
+      return this.internals.form;
+    }
+    /**
+     * Will return true if it is recommended that the control shows an internal
+     * error. If using this property, it is wise to listen for 'invalid' events
+     * on the element host and call preventDefault on the event. Doing this will
+     * prevent browsers from showing a validation popup.
+     */
+    get showError() {
+      return __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_shouldShowError).call(this);
+    }
+    /**
+     * Forward the internals checkValidity method
+     * will return the valid state of the control.
+     */
+    checkValidity() {
+      return this.internals.checkValidity();
+    }
+    /** The element's validity state */
+    get validity() {
+      return this.internals.validity;
+    }
+    /**
+     * The validation message shown by a given Validator object. If the control
+     * is in a valid state this should be falsy.
+     */
+    get validationMessage() {
+      return this.internals.validationMessage;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+      var _a;
+      (_a = super.attributeChangedCallback) === null || _a === void 0 ? void 0 : _a.call(this, name, oldValue, newValue);
+      const proto = this.constructor;
+      const validators = proto.getValidators(name);
+      if ((validators === null || validators === void 0 ? void 0 : validators.length) && this.validationTarget) {
+        this.setValue(__classPrivateFieldGet(this, _FormControl_value, "f"));
+      }
+    }
+    /** PUBLIC LIFECYCLE METHODS */
+    /**
+     * Sets the control's form value if the call to `shouldFormValueUpdate`
+     * returns `true`.
+     * @param value {FormValue} - The value to pass to the form
+     */
+    setValue(value) {
+      var _a;
+      __classPrivateFieldSet(this, _FormControl_forceError, false, "f");
+      (_a = this.validationMessageCallback) === null || _a === void 0 ? void 0 : _a.call(this, "");
+      __classPrivateFieldSet(this, _FormControl_value, value, "f");
+      const valueShouldUpdate = this.shouldFormValueUpdate();
+      const valueToUpdate = valueShouldUpdate ? value : null;
+      this.internals.setFormValue(valueToUpdate);
+      __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_runValidators).call(this, valueToUpdate);
+      if (this.valueChangedCallback) {
+        this.valueChangedCallback(valueToUpdate);
+      }
+      __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_shouldShowError).call(this);
+    }
+    /**
+     * This method can be overridden to determine if the control's form value
+     * should be set on a call to `setValue`. An example of when a user might want
+     * to skip this step is when implementing checkbox-like behavior, first checking
+     * to see if `this.checked` is set to a truthy value. By default this returns
+     * `true`.
+     */
+    shouldFormValueUpdate() {
+      return true;
+    }
+    /** A promise that will resolve when all pending validations are complete */
+    get validationComplete() {
+      return new Promise((resolve) => resolve(__classPrivateFieldGet(this, _FormControl_validationComplete, "f")));
+    }
+    /** Reset control state when the form is reset */
+    formResetCallback() {
+      var _a, _b;
+      __classPrivateFieldSet(this, _FormControl_touched, false, "f");
+      __classPrivateFieldSet(this, _FormControl_forceError, false, "f");
+      __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_shouldShowError).call(this);
+      (_a = this.resetFormControl) === null || _a === void 0 ? void 0 : _a.call(this);
+      (_b = this.validationMessageCallback) === null || _b === void 0 ? void 0 : _b.call(this, __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_shouldShowError).call(this) ? this.validationMessage : "");
+    }
+  }
+  _FormControl_focused = /* @__PURE__ */ new WeakMap(), _FormControl_forceError = /* @__PURE__ */ new WeakMap(), _FormControl_touched = /* @__PURE__ */ new WeakMap(), _FormControl_abortController = /* @__PURE__ */ new WeakMap(), _FormControl_previousAbortController = /* @__PURE__ */ new WeakMap(), _FormControl_awaitingValidationTarget = /* @__PURE__ */ new WeakMap(), _FormControl_value = /* @__PURE__ */ new WeakMap(), _FormControl_onFocus = /* @__PURE__ */ new WeakMap(), _FormControl_onBlur = /* @__PURE__ */ new WeakMap(), _FormControl_onInvalid = /* @__PURE__ */ new WeakMap(), _FormControl_validationCompleteResolver = /* @__PURE__ */ new WeakMap(), _FormControl_isValidationPending = /* @__PURE__ */ new WeakMap(), _FormControl_validationComplete = /* @__PURE__ */ new WeakMap(), _FormControl_instances = /* @__PURE__ */ new WeakSet(), _FormControl_formValidationGroup_get = function _FormControl_formValidationGroup_get2() {
+    const rootNode = this.getRootNode();
+    const selector = `${this.localName}[name="${this.getAttribute("name")}"]`;
+    return rootNode.querySelectorAll(selector);
+  }, _FormControl_shouldShowError = function _FormControl_shouldShowError2() {
+    if (this.hasAttribute("disabled")) {
+      return false;
+    }
+    const showError = __classPrivateFieldGet(this, _FormControl_forceError, "f") || __classPrivateFieldGet(this, _FormControl_touched, "f") && !this.validity.valid && !__classPrivateFieldGet(this, _FormControl_focused, "f");
+    if (showError && this.internals.states) {
+      this.internals.states.add("--show-error");
+    } else if (this.internals.states) {
+      this.internals.states.delete("--show-error");
+    }
+    return showError;
+  }, _FormControl_runValidators = function _FormControl_runValidators2(value) {
+    const proto = this.constructor;
+    const validity = {};
+    const validators = proto.validators;
+    const asyncValidators = [];
+    const hasAsyncValidators = validators.some((validator) => validator.isValid instanceof Promise);
+    if (!__classPrivateFieldGet(this, _FormControl_isValidationPending, "f")) {
+      __classPrivateFieldSet(this, _FormControl_validationComplete, new Promise((resolve) => {
+        __classPrivateFieldSet(this, _FormControl_validationCompleteResolver, resolve, "f");
+      }), "f");
+      __classPrivateFieldSet(this, _FormControl_isValidationPending, true, "f");
+    }
+    if (__classPrivateFieldGet(this, _FormControl_abortController, "f")) {
+      __classPrivateFieldGet(this, _FormControl_abortController, "f").abort();
+      __classPrivateFieldSet(this, _FormControl_previousAbortController, __classPrivateFieldGet(this, _FormControl_abortController, "f"), "f");
+    }
+    const abortController = new AbortController();
+    __classPrivateFieldSet(this, _FormControl_abortController, abortController, "f");
+    let validationMessage = void 0;
+    let hasChange = false;
+    if (!validators.length) {
+      return;
+    }
+    validators.forEach((validator) => {
+      const key = validator.key || "customError";
+      const isValid = validator.isValid(this, value, abortController.signal);
+      const isAsyncValidator = isValid instanceof Promise;
+      if (isAsyncValidator) {
+        asyncValidators.push(isValid);
+        isValid.then((isValidatorValid) => {
+          if (isValidatorValid === void 0 || isValidatorValid === null) {
+            return;
+          }
+          validity[key] = !isValidatorValid;
+          validationMessage = __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_getValidatorMessageForValue).call(this, validator, value);
+          __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_setValidityWithOptionalTarget).call(this, validity, validationMessage);
+        });
+      } else {
+        validity[key] = !isValid;
+        if (this.validity[key] !== !isValid) {
+          hasChange = true;
+        }
+        if (!isValid && !validationMessage) {
+          validationMessage = __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_getValidatorMessageForValue).call(this, validator, value);
+        }
+      }
+    });
+    Promise.allSettled(asyncValidators).then(() => {
+      var _a;
+      if (!(abortController === null || abortController === void 0 ? void 0 : abortController.signal.aborted)) {
+        __classPrivateFieldSet(this, _FormControl_isValidationPending, false, "f");
+        (_a = __classPrivateFieldGet(this, _FormControl_validationCompleteResolver, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
+      }
+    });
+    if (hasChange || !hasAsyncValidators) {
+      __classPrivateFieldGet(this, _FormControl_instances, "m", _FormControl_setValidityWithOptionalTarget).call(this, validity, validationMessage);
+    }
+  }, _FormControl_setValidityWithOptionalTarget = function _FormControl_setValidityWithOptionalTarget2(validity, validationMessage) {
+    if (this.validationTarget) {
+      this.internals.setValidity(validity, validationMessage, this.validationTarget);
+      __classPrivateFieldSet(this, _FormControl_awaitingValidationTarget, false, "f");
+    } else {
+      this.internals.setValidity(validity, validationMessage);
+      if (this.internals.validity.valid) {
+        return;
+      }
+      __classPrivateFieldSet(this, _FormControl_awaitingValidationTarget, true, "f");
+    }
+  }, _FormControl_getValidatorMessageForValue = function _FormControl_getValidatorMessageForValue2(validator, value) {
+    if (this.validityCallback) {
+      const message = this.validityCallback(validator.key || "customError");
+      if (message) {
+        return message;
+      }
+    }
+    if (validator.message instanceof Function) {
+      return validator.message(this, value);
+    } else {
+      return validator.message;
+    }
+  };
+  return FormControl;
+}
+
+// node_modules/.pnpm/@warp-ds+css@2.1.1_@warp-ds+uno@2.1.0_unocss@0.62.0_postcss@8.5.1_rollup@4.32.1_vite@5._43dfacbc4a7d78ad84ef685a7085e344/node_modules/@warp-ds/css/component-classes/index.js
 var buttonDefaultStyling = "font-bold focusable justify-center transition-colors ease-in-out";
 var buttonColors = {
   primary: "s-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]",
@@ -2060,7 +2345,12 @@ var messages5 = JSON.parse('{"button.aria.loading":["Laddar ..."]}');
 
 // packages/button/index.js
 var buttonTypes2 = ["primary", "secondary", "negative", "utility", "pill", "link"];
-var WarpButton = class extends kebabCaseAttributes(WarpElement) {
+var WarpButton = class extends FormControlMixin(kebabCaseAttributes(WarpElement)) {
+  updated(changedProperties) {
+    if (changedProperties.has("value")) {
+      this.setValue(this.value);
+    }
+  }
   constructor() {
     super();
     activateI18n(messages2, messages4, messages3, messages, messages5);
@@ -2144,6 +2434,10 @@ ${buttonTypes2.join(", ")}.`);
       this.fullWidth ? button.fullWidth : button.contentWidth
     ]);
   }
+  _handleButtonClick() {
+    if (this.type === "submit") this.internals.form.requestSubmit();
+    else if (this.type === "reset") this.internals.form.reset();
+  }
   render() {
     return html` ${this.href ? html`<a
           href=${this.href}
@@ -2151,7 +2445,7 @@ ${buttonTypes2.join(", ")}.`);
           rel=${this.target === "_blank" ? this.rel || "noopener" : void 0}
           class=${this._classes}>
           <slot></slot>
-        </a>` : html`<button type=${this.type || "button"} class=${this._classes}>
+        </a>` : html`<button type=${this.type || "button"} class=${this._classes} @click="${this._handleButtonClick}">
           <slot></slot>
         </button>`}
     ${this.loading ? html`<span class="sr-only" role="progressbar" aria-valuenow="{0}" aria-valuetext=${this.ariaValueTextLoading}></span>` : null}`;
@@ -2171,7 +2465,9 @@ __publicField(WarpButton, "properties", {
   target: { type: String, reflect: true },
   rel: { type: String, reflect: true },
   fullWidth: { type: Boolean, reflect: true },
-  buttonClass: { type: String, reflect: true }
+  buttonClass: { type: String, reflect: true },
+  name: { type: String, reflect: true },
+  value: { type: String, reflect: true }
 });
 __publicField(WarpButton, "styles", [WarpElement.styles]);
 if (!customElements.get("w-button")) {