@telesign/boreal-web-components 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/esm/boreal-web-components.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, H, b as bootstrapLazy } from './index-DgFiTd6X.js';
-export { s as setNonce } from './index-DgFiTd6X.js';
+import { p as promiseResolve, H, b as bootstrapLazy } from './index-D4EFsvs1.js';
+export { s as setNonce } from './index-D4EFsvs1.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 /*
@@ -38,5 +38,5 @@ var patchCloneNodeFix = (HTMLElementPrototype) => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["bds-banner",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-typography",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]]], options);
+  return bootstrapLazy([["bds-text-field",[[836,"bds-text-field",{"name":[513],"disabled":[516],"required":[516],"value":[1537],"error":[516],"errorMessage":[1,"error-message"],"customValidators":[16],"validationTiming":[1,"validation-timing"],"type":[513],"variant":[513],"placeholder":[1],"readOnly":[4,"readonly"],"autocomplete":[1],"pattern":[1],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"label":[1],"sublabel":[1],"icon":[1],"helperText":[1,"helper-text"],"info":[1],"clearable":[4],"clearOnHover":[4,"clear-on-hover"],"charCount":[2,"char-count"],"counter":[4],"customWidth":[1,"custom-width"],"isDisabled":[32],"focused":[32],"showPassword":[32],"touched":[32],"dirty":[32],"currentCharCount":[32],"validationError":[32],"validationMessage":[32],"checkValidity":[64],"reportValidity":[64]},null,{"disabled":[{"onDisabledChange":0}],"type":[{"checkPropValues":0}],"variant":[{"checkPropValues":0}],"validationTiming":[{"checkPropValues":0}],"customValidators":[{"onCustomValidatorsChange":0}],"value":[{"onValueChange":0}]}]]],["bds-dialog",[[772,"bds-dialog",{"active":[1540],"preventClose":[4,"prevent-close"],"height":[1],"width":[1],"layout":[1],"contentPadding":[1,"content-padding"],"backdropClose":[4,"backdrop-close"],"escapeClose":[4,"escape-close"],"size":[1],"variant":[1],"titleDialog":[1,"title-dialog"],"maximizable":[4],"closable":[4],"open":[64],"close":[64]},null,{"active":[{"handleIsOpenChange":0}]}]]],["bds-popover",[[772,"bds-popover",{"floatingOptions":[16],"disabled":[4],"width":[8],"header":[4],"footer":[4],"closable":[4],"isVisible":[32]}]]],["bds-banner",[[260,"bds-banner",{"variant":[1],"closable":[4],"closeButtonLabel":[1,"close-button-label"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-checkbox",[[836,"bds-checkbox",{"name":[513],"disabled":[516],"required":[516],"checked":[1540],"indeterminate":[1540],"error":[516],"value":[1],"label":[1],"isDisabled":[32]},null,{"checked":[{"onCheckedChange":0}],"disabled":[{"onDisabledChange":0}]}]]],["bds-flag",[[0,"bds-flag",{"alignFlag":[1,"align-flag"],"callSign":[4,"call-sign"],"country":[1],"customFlags":[16],"identifier":[1],"label":[4],"shape":[1],"shortName":[4,"short-name"]},null,{"alignFlag":[{"checkPropValues":0}],"identifier":[{"checkPropValues":0}],"shape":[{"checkPropValues":0}]}]]],["bds-spinner",[[0,"bds-spinner",{"size":[1],"label":[1]},null,{"size":[{"checkPropValues":0}]}]]],["bds-typography",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]],["bds-button",[[324,"bds-button",{"label":[1],"disabled":[4],"name":[1],"type":[1],"color":[1],"variant":[1],"size":[1],"loading":[4],"disclosure":[4],"currentState":[32]},null,{"type":[{"checkPropValues":0}],"color":[{"checkPropValues":0}],"variant":[{"checkPropValues":0}],"size":[{"checkPropValues":0}]}]]],["bds-tooltip",[[772,"bds-tooltip",{"multiline":[4],"disabled":[4],"floatingOptions":[16],"isVisible":[32]}]]]], options);
 });

package/dist/esm/enum-C8mRvnTA.js

@@ -0,0 +1,17 @@
+const BUTTON_VARIANTS = {
+    DEFAULT: 'default',
+    OUTLINE: 'outline',
+    PLAIN: 'plain',
+};
+const BUTTON_SIZES = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large',
+};
+const BUTTON_TYPES = {
+    BUTTON: 'button',
+    SUBMIT: 'submit',
+    RESET: 'reset',
+};
+
+export { BUTTON_SIZES as B, BUTTON_TYPES as a, BUTTON_VARIANTS as b };

package/dist/esm/floating.mixin-DCXSEEVH.js

@@ -0,0 +1,193 @@
+/**
+ * Core lifecycle mixin for all floating elements in the design system.
+ *
+ * Provides a unified lifecycle contract (`show`, `hide`, `toggle`, `isVisible`)
+ * and an extension mechanism via `FloatingHooks` that allows each component
+ * to inject its own logic at specific lifecycle points without modifying the mixin.
+ *
+ * This mixin is the base for all floating components. It does not handle
+ * positioning or triggers — use `anchoredMixin` for components that need
+ * to be anchored to a DOM element (Tooltip, Popover),
+ * or `backdropMixin` for viewport-relative components (Dialog, Drawer, Toast).
+ *
+ * ## Extension points
+ *
+ * Override `showElement` / `hideElement` to control how the element
+ * mounts and unmounts (e.g. `showPopover()`, `showModal()`, CSS animations).
+ *
+ * Override `hooks` to inject logic at lifecycle points:
+ * - `onBeforeShow` / `onBeforeHide` — return `false` to cancel the action
+ * - `onAfterShow` / `onAfterHide` — side effects after the action completes
+ * - `mounted` / `unmounted` — called after the element is shown or hidden
+ *
+ * ## Lifecycle flow
+ * ```
+ * show(): onBeforeShow() → showElement() → onAfterShow()
+ * hide(): onBeforeHide() → hideElement() → onAfterHide()
+ * ```
+ *
+ * @example
+ * ```typescript
+ * import { Component, Mixin, Prop } from '@stencil/core';
+ * import { floatingMixin } from '@/mixins/floating.mixin';
+ * import { FloatingHooks } from '@/services/floating/interfaces/Floating';
+ *
+ * @Component({ tag: 'bds-dialog' })
+ * export class BdsDialog extends Mixin(floatingMixin) {
+ *   private dialogElement!: HTMLDialogElement;
+ *
+ *   // Override showElement/hideElement to use the native <dialog> API
+ *   showElement(): void {
+ *     this.dialogElement.showModal();
+ *     this.isVisible = true;
+ *   }
+ *   hideElement(): void {
+ *     this.dialogElement.close();
+ *     this.isVisible = false;
+ *   }
+ *
+ *   // Inject component-specific logic via hooks
+ *   get hooks(): FloatingHooks {
+ *     return {
+ *       onBeforeShow: () => !this.disabled,
+ *       onAfterShow: () => this.lockScroll(),
+ *       onAfterHide: () => this.unlockScroll(),
+ *     };
+ *   }
+ * }
+ * ```
+ */
+const floatingMixin = (Base) => {
+    class Floating extends Base {
+        constructor() {
+            super();
+        }
+        /**
+         * Lifecycle hooks provided by the component.
+         * Override this getter to inject component-specific logic
+         * into the floating lifecycle without modifying the mixin.
+         *
+         * @returns FloatingHooks — an object with optional lifecycle callbacks
+         */
+        get hooks() {
+            return {};
+        }
+        /**
+         * Default options for the floating mixin.
+         * Override this getter in the component to customize placement,
+         * offset, strategy, flip, shift, and arrow.
+         *
+         * @returns FloatingMixinOptions — default options for the mixin
+         */
+        get options() {
+            return {};
+        }
+        /**
+         * Called before the element is shown.
+         * Aggregates both the component `hooks` and `floatingOptions` controls.
+         * If either returns `false`, the show action is cancelled.
+         *
+         * @param target - Optional element that triggered the show action
+         * @returns `true` if the element can be shown, `false` to cancel
+         */
+        onBeforeShow(target) {
+            const hookControl = this.hooks.onBeforeShow?.(target) ?? true;
+            const propControl = this.floatingOptions?.onBeforeShow?.(target) ?? true;
+            return hookControl && propControl;
+        }
+        /**
+         * Called before the element is hidden.
+         * Aggregates both the component `hooks` and `floatingOptions` controls.
+         * If either returns `false`, the hide action is cancelled.
+         *
+         * @param target - Optional element the mouse moved to (used for stayOnHover logic)
+         * @returns `true` if the element can be hidden, `false` to cancel
+         */
+        onBeforeHide(target) {
+            const hookControl = this.hooks.onBeforeHide?.(target) ?? true;
+            const propControl = this.floatingOptions?.onBeforeHide?.(target) ?? true;
+            return hookControl && propControl;
+        }
+        /**
+         * Mounts the floating element into the visible DOM.
+         * Override in subclasses to use a different mount strategy
+         * (e.g. `showPopover()`, `showModal()`, CSS class toggle).
+         */
+        showElement() {
+            this.isVisible = true;
+            this.hooks.mounted?.(this.floatingContent);
+        }
+        /**
+         * Unmounts the floating element from the visible DOM.
+         * Override in subclasses to use a different unmount strategy.
+         */
+        hideElement() {
+            this.isVisible = false;
+            this.hooks.unmounted?.(this.floatingContent);
+        }
+        /**
+         * Shows the floating element if not already visible.
+         * Runs the full lifecycle: `onBeforeShow` → `showElement` → `onAfterShow`.
+         *
+         * @param target - Optional element that triggered the action
+         */
+        show(target) {
+            if (this.isVisible)
+                return;
+            if (!this.onBeforeShow(target))
+                return;
+            this.showElement();
+            this.onAfterShow(target);
+        }
+        /**
+         * Hides the floating element if currently visible.
+         * Runs the full lifecycle: `onBeforeHide` → `hideElement` → `onAfterHide`.
+         *
+         * @param target - Optional element the mouse moved to
+         */
+        hide(target) {
+            if (!this.isVisible)
+                return;
+            if (!this.onBeforeHide(target))
+                return;
+            this.hideElement();
+            this.onAfterHide(target);
+        }
+        /**
+         * Toggles the floating element visibility.
+         *
+         * @param target - Optional element that triggered the action
+         */
+        toggle(target) {
+            this.isVisible ? this.hide(target) : this.show();
+        }
+        /**
+         * Called after the element is shown.
+         * Notifies both `hooks` and `floatingOptions` consumers.
+         *
+         * @param target - Optional element that triggered the action
+         */
+        onAfterShow(target) {
+            this.hooks.onAfterShow?.(target);
+            this.floatingOptions?.onAfterShow?.(target);
+        }
+        /**
+         * Called after the element is hidden.
+         * Notifies both `hooks` and `floatingOptions` consumers.
+         *
+         * @param target - Optional element that triggered the action
+         */
+        onAfterHide(target) {
+            this.hooks.onAfterHide?.(target);
+            this.floatingOptions?.onAfterHide?.(target);
+        }
+        static get states() {
+            return {
+                "isVisible": {}
+            };
+        }
+    }
+    return Floating;
+};
+
+export { floatingMixin as f };

package/dist/esm/{index-DgFiTd6X.js → index-D4EFsvs1.js}

@@ -5,6 +5,10 @@ const BUILD = /* boreal-web-components */ { hotModuleReplacement: false, hydrate
  Stencil Client Platform v4.42.1 | MIT Licensed | https://stenciljs.com
  */
 
+
+// src/utils/constants.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var HTML_NS = "http://www.w3.org/1999/xhtml";
 var reWireGetterSetter = (instance, hostRef) => {
   var _a;
   const cmpMeta = hostRef.$cmpMeta$;
@@ -116,6 +120,12 @@ var styles = /* @__PURE__ */ new Map();
 var HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
 var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
+var FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
+  "formAssociatedCallback",
+  "formResetCallback",
+  "formDisabledCallback",
+  "formStateRestoreCallback"
+];
 var win = typeof window !== "undefined" ? window : {};
 var H = win.HTMLElement || class {
 };
@@ -177,6 +187,12 @@ var flush = () => {
 };
 var nextTick = (cb) => promiseResolve().then(cb);
 var writeTask = /* @__PURE__ */ queueTask(queueDomWrites, true);
+
+// src/runtime/asset-path.ts
+var getAssetPath = (path) => {
+  const assetUrl = new URL(path, plt.$resourcesUrl$);
+  return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;
+};
 var updateFallbackSlotVisibility = (elm) => {
   const childNodes = internalCall(elm, "childNodes");
   if (elm.tagName && elm.tagName.includes("-") && elm["s-cr"] && elm.tagName !== "SLOT-FB") {
@@ -880,7 +896,9 @@ var convertToPrivate = (node) => {
 var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   if (propValue != null && !isComplexType(propValue)) {
     if (propType & 4 /* Boolean */) {
-      {
+      if (isFormAssociated && typeof propValue === "string") {
+        return propValue === "" || !!propValue;
+      } else {
         return propValue === "false" ? false : propValue === "" || !!propValue;
       }
     }
@@ -1007,7 +1025,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     return;
   } else {
     const isComplex = isComplexType(newValue);
-    if ((isProp || isComplex && newValue !== null) && true) {
+    if ((isProp || isComplex && newValue !== null) && !isSvg) {
       try {
         if (!elm.tagName.includes("-")) {
           const n = newValue == null ? "" : newValue;
@@ -1139,12 +1157,19 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
       updateElement(null, newVNode2, isSvgMode);
     }
   } else {
+    if (!isSvgMode) {
+      isSvgMode = newVNode2.$tag$ === "svg";
+    }
     if (!win.document) {
       throw new Error("You are trying to render a Stencil component in an environment that doesn't support the DOM.");
     }
-    elm = newVNode2.$elm$ = win.document.createElement(
+    elm = newVNode2.$elm$ = win.document.createElementNS(
+      isSvgMode ? SVG_NS : HTML_NS,
       !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
-    );
+    ) ;
+    if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
+      isSvgMode = false;
+    }
     {
       updateElement(null, newVNode2, isSvgMode);
     }
@@ -1157,6 +1182,13 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
         }
       }
     }
+    {
+      if (newVNode2.$tag$ === "svg") {
+        isSvgMode = false;
+      } else if (elm.tagName === "foreignObject") {
+        isSvgMode = true;
+      }
+    }
   }
   elm["s-hn"] = hostTagName;
   {
@@ -1375,6 +1407,9 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const text = newVNode2.$text$;
   let defaultHolder;
   if (text == null) {
+    {
+      isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
+    }
     {
       if (tag === "slot" && !useNativeShadowDom) {
         if (oldVNode.$name$ !== newVNode2.$name$) {
@@ -1397,6 +1432,9 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     } else ;
+    if (isSvgMode && tag === "svg") {
+      isSvgMode = false;
+    }
   } else if ((defaultHolder = elm["s-cr"])) {
     defaultHolder.parentNode.textContent = text;
   } else if (oldVNode.$text$ !== text) {
@@ -1812,7 +1850,9 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   const instance = hostRef.$lazyInstance$ ;
   newVal = parsePropertyValue(
     newVal,
-    cmpMeta.$members$[propName][0]);
+    cmpMeta.$members$[propName][0],
+    !!(cmpMeta.$flags$ & 64 /* formAssociated */)
+  );
   const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
   const didValueChange = newVal !== oldVal && !areBothNaN;
   if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
@@ -1856,6 +1896,26 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
+  if (cmpMeta.$flags$ & 64 /* formAssociated */ && flags & 1 /* isElementConstructor */) {
+    FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS.forEach((cbName) => {
+      Object.defineProperty(prototype, cbName, {
+        value(...args) {
+          var _a2;
+          const hostRef = getHostRef(this);
+          const instance = hostRef == null ? void 0 : hostRef.$lazyInstance$ ;
+          if (!instance) {
+            (_a2 = hostRef == null ? void 0 : hostRef.$onReadyPromise$) == null ? void 0 : _a2.then((asyncInstance) => {
+              const cb = asyncInstance[cbName];
+              typeof cb === "function" && cb.call(asyncInstance, ...args);
+            });
+          } else {
+            const cb = instance[cbName] ;
+            typeof cb === "function" && cb.call(instance, ...args);
+          }
+        }
+      });
+    });
+  }
   if (cmpMeta.$members$ || BUILD.propChangeCallback) {
     {
       if (Cstr.watchers && !cmpMeta.$watchers$) {
@@ -1905,7 +1965,9 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
               origSetter.apply(this, [
                 parsePropertyValue(
                   newValue,
-                  memberFlags)
+                  memberFlags,
+                  !!(cmpMeta.$flags$ & 64 /* formAssociated */)
+                )
               ]);
               newValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
               setValue(this, memberName, newValue, cmpMeta);
@@ -1930,7 +1992,9 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
                 }
                 ref.$lazyInstance$[memberName] = parsePropertyValue(
                   newValue,
-                  memberFlags);
+                  memberFlags,
+                  !!(cmpMeta.$flags$ & 64 /* formAssociated */)
+                );
                 setValue(this, memberName, ref.$lazyInstance$[memberName], cmpMeta);
               };
               if (ref.$lazyInstance$) {
@@ -2286,6 +2350,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       } else {
         patchCloneNode(HostElement.prototype);
       }
+      if (cmpMeta.$flags$ & 64 /* formAssociated */) {
+        HostElement.formAssociated = true;
+      }
       cmpMeta.$lazyBundleId$ = lazyBundle[0];
       if (!exclude.includes(tagName) && !customElements2.get(tagName)) {
         cmpTags.push(tagName);
@@ -2323,10 +2390,18 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   endBootstrap();
 };
 
+// src/runtime/fragment.ts
+var Fragment = (_, children) => children;
+var baseClass = class {
+} ;
+function Mixin(...mixins) {
+  return mixins.reduceRight((acc, mixin) => mixin(acc), baseClass);
+}
+
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 function transformTag(tag) {
   return tag;
 }
 
-export { H, Host as a, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { Fragment as F, H, Mixin as M, Host as a, bootstrapLazy as b, createEvent as c, getAssetPath as d, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/internals-Dy7QKP9e.js

@@ -0,0 +1,111 @@
+/**
+ * Shared base mixin for Form-Associated Custom Elements in Boreal DS.
+ *
+ * Provides `formDisabledCallback` — the only behavior that is identical across
+ * all FACE components. It writes to the component's `isDisabled` state, which
+ * each component must declare as `@State() private isDisabled: boolean = false`.
+ *
+ * Each component must declare directly on its class body:
+ * - `@AttachInternals() internals!: ElementInternals`
+ * - `@Prop({ reflect: true }) readonly name!: string`
+ * - `@Prop({ reflect: true }) readonly disabled: boolean = false`
+ * - `@Prop({ reflect: true }) readonly required: boolean = false`
+ * - `@State() private isDisabled: boolean = false`
+ * - `@Watch('disabled') onDisabledChange(next: boolean) { this.isDisabled = next; }`
+ *
+ * Stencil's compiler requires `@Prop` and `@State` decorators to be statically
+ * visible on the component class — they cannot be inherited from a mixin.
+ *
+ * Components must also implement `IFormControl<T>` for value registration,
+ * reset, state restoration, and 2-way binding event emission.
+ */
+const formAssociatedMixin = (Base) => {
+    class FormAssociated extends Base {
+        formDisabledCallback(disabled) {
+            this.isDisabled = disabled;
+        }
+    }
+    return FormAssociated;
+};
+
+/**
+ * Registers the component's current value with the browser's form machinery.
+ *
+ * Wraps `ElementInternals.setFormValue()` so the value appears in `FormData`
+ * under the component's `name` attribute when the form is submitted.
+ * Pass `null` to remove the component's contribution from `FormData`
+ * (e.g. an unchecked checkbox).
+ *
+ * @param internals - The component's `ElementInternals` instance (from `@AttachInternals()`).
+ * @param value - The value to register, or `null` to deregister.
+ *
+ * @example
+ * ```typescript
+ * // Register a string value on every value change
+ * @Watch('value')
+ * onValueChange(next: string) {
+ *   setFormValue(this.internals, next);
+ * }
+ *
+ * // Deregister when unchecked
+ * setFormValue(this.internals, null);
+ * ```
+ */
+function setFormValue(internals, value) {
+    internals.setFormValue?.(value);
+}
+/**
+ * Runs an array of validators against the host element and reports the combined
+ * result to `ElementInternals.setValidity()`.
+ *
+ * All validators are evaluated regardless of order. The first failing validator's
+ * message is used as the validation message, matching native browser behaviour
+ * (one message surfaced at a time). When all validators pass, the component is
+ * marked valid and any previous invalid state is cleared.
+ *
+ * @param internals - The component's `ElementInternals` instance (from `@AttachInternals()`).
+ * @param validators - Array of `IFormValidator` objects to evaluate.
+ * @param el - The host element passed to each validator's `isValid` function.
+ * @returns `true` if all validators pass, `false` if any fail.
+ *
+ * @example
+ * ```typescript
+ * private get validators(): IFormValidator[] {
+ *   return [
+ *     {
+ *       key: 'valueMissing',
+ *       isValid: (el) => !(el as BdsTextField).required || (el as BdsTextField).value !== '',
+ *       message: 'This field is required.',
+ *     },
+ *     {
+ *       key: 'tooShort',
+ *       isValid: (el) => {
+ *         const { value, minLength } = el as BdsTextField;
+ *         return minLength === undefined || value.length >= minLength;
+ *       },
+ *       message: `Minimum length not reached.`,
+ *     },
+ *   ];
+ * }
+ *
+ * private updateValidity() {
+ *   runValidators(this.internals, this.validators, this.el);
+ * }
+ * ```
+ */
+function runValidators(internals, validators, el) {
+    const flags = {};
+    let firstMessage = '';
+    for (const { key, isValid, message } of validators) {
+        if (!isValid(el)) {
+            flags[key] = true;
+            if (firstMessage === '')
+                firstMessage = message;
+        }
+    }
+    const valid = Object.keys(flags).length === 0;
+    internals.setValidity?.(valid ? {} : flags, firstMessage);
+    return valid;
+}
+
+export { formAssociatedMixin as f, runValidators as r, setFormValue as s };

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-DgFiTd6X.js';
-export { s as setNonce } from './index-DgFiTd6X.js';
+import { b as bootstrapLazy } from './index-D4EFsvs1.js';
+export { s as setNonce } from './index-D4EFsvs1.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["bds-banner",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-typography",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]]], options);
+  return bootstrapLazy([["bds-text-field",[[836,"bds-text-field",{"name":[513],"disabled":[516],"required":[516],"value":[1537],"error":[516],"errorMessage":[1,"error-message"],"customValidators":[16],"validationTiming":[1,"validation-timing"],"type":[513],"variant":[513],"placeholder":[1],"readOnly":[4,"readonly"],"autocomplete":[1],"pattern":[1],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"label":[1],"sublabel":[1],"icon":[1],"helperText":[1,"helper-text"],"info":[1],"clearable":[4],"clearOnHover":[4,"clear-on-hover"],"charCount":[2,"char-count"],"counter":[4],"customWidth":[1,"custom-width"],"isDisabled":[32],"focused":[32],"showPassword":[32],"touched":[32],"dirty":[32],"currentCharCount":[32],"validationError":[32],"validationMessage":[32],"checkValidity":[64],"reportValidity":[64]},null,{"disabled":[{"onDisabledChange":0}],"type":[{"checkPropValues":0}],"variant":[{"checkPropValues":0}],"validationTiming":[{"checkPropValues":0}],"customValidators":[{"onCustomValidatorsChange":0}],"value":[{"onValueChange":0}]}]]],["bds-dialog",[[772,"bds-dialog",{"active":[1540],"preventClose":[4,"prevent-close"],"height":[1],"width":[1],"layout":[1],"contentPadding":[1,"content-padding"],"backdropClose":[4,"backdrop-close"],"escapeClose":[4,"escape-close"],"size":[1],"variant":[1],"titleDialog":[1,"title-dialog"],"maximizable":[4],"closable":[4],"open":[64],"close":[64]},null,{"active":[{"handleIsOpenChange":0}]}]]],["bds-popover",[[772,"bds-popover",{"floatingOptions":[16],"disabled":[4],"width":[8],"header":[4],"footer":[4],"closable":[4],"isVisible":[32]}]]],["bds-banner",[[260,"bds-banner",{"variant":[1],"closable":[4],"closeButtonLabel":[1,"close-button-label"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-checkbox",[[836,"bds-checkbox",{"name":[513],"disabled":[516],"required":[516],"checked":[1540],"indeterminate":[1540],"error":[516],"value":[1],"label":[1],"isDisabled":[32]},null,{"checked":[{"onCheckedChange":0}],"disabled":[{"onDisabledChange":0}]}]]],["bds-flag",[[0,"bds-flag",{"alignFlag":[1,"align-flag"],"callSign":[4,"call-sign"],"country":[1],"customFlags":[16],"identifier":[1],"label":[4],"shape":[1],"shortName":[4,"short-name"]},null,{"alignFlag":[{"checkPropValues":0}],"identifier":[{"checkPropValues":0}],"shape":[{"checkPropValues":0}]}]]],["bds-spinner",[[0,"bds-spinner",{"size":[1],"label":[1]},null,{"size":[{"checkPropValues":0}]}]]],["bds-typography",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]],["bds-button",[[324,"bds-button",{"label":[1],"disabled":[4],"name":[1],"type":[1],"color":[1],"variant":[1],"size":[1],"loading":[4],"disclosure":[4],"currentState":[32]},null,{"type":[{"checkPropValues":0}],"color":[{"checkPropValues":0}],"variant":[{"checkPropValues":0}],"size":[{"checkPropValues":0}]}]]],["bds-tooltip",[[772,"bds-tooltip",{"multiline":[4],"disabled":[4],"floatingOptions":[16],"isVisible":[32]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/esm/states-BhTPNsBb.js

@@ -0,0 +1,13 @@
+const COMPONENT_STATES = {
+    DEFAULT: 'default',
+    ERROR: 'error',
+    DISABLED: 'disabled',
+    ACTIVE: 'active'};
+const STATUS_VARIANT = {
+    INFO: 'info',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    DANGER: 'danger',
+};
+
+export { COMPONENT_STATES as C, STATUS_VARIANT as S };

package/dist/esm/validateProps-vfAIdwy0.js

@@ -0,0 +1,18 @@
+/**
+ * Validates a component prop against a list of accepted values.
+ * If the current value is invalid, the prop is reset to the fallback and a warning is issued.
+ *
+ * @param acceptedValues - The list of valid values for the prop.
+ * @param fallbackValue - The value to apply when the current value is invalid.
+ * @param element - The host element whose property will be corrected.
+ * @param propertyName - The name of the prop to validate.
+ */
+function validatePropValue(acceptedValues, fallbackValue, element, propertyName) {
+    const currentValue = element[propertyName];
+    if (acceptedValues.includes(currentValue))
+        return;
+    element[propertyName] = fallbackValue;
+    console.warn(`[BorealDS] Invalid value "${currentValue}" for prop "${propertyName}" on <${element.tagName.toLowerCase()}>. Expected one of: ${acceptedValues.join(', ')}.`);
+}
+
+export { validatePropValue as v };