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

package/dist/cjs/floating.mixin-Bje4320w.js

@@ -0,0 +1,195 @@
+'use strict';
+
+/**
+ * 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;
+};
+
+exports.floatingMixin = floatingMixin;

package/dist/cjs/{index-C9JKWXwa.js → index-BcSjvXJk.js}

@@ -7,6 +7,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$;
@@ -185,6 +189,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") {
@@ -1017,7 +1027,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;
@@ -1149,12 +1159,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);
     }
@@ -1167,6 +1184,13 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
         }
       }
     }
+    {
+      if (newVNode2.$tag$ === "svg") {
+        isSvgMode = false;
+      } else if (elm.tagName === "foreignObject") {
+        isSvgMode = true;
+      }
+    }
   }
   elm["s-hn"] = hostTagName;
   {
@@ -1385,6 +1409,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$) {
@@ -1407,6 +1434,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) {
@@ -2362,16 +2392,27 @@ 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;
 }
 
+exports.Fragment = Fragment;
 exports.H = H;
 exports.Host = Host;
+exports.Mixin = Mixin;
 exports.bootstrapLazy = bootstrapLazy;
 exports.createEvent = createEvent;
+exports.getAssetPath = getAssetPath;
 exports.getElement = getElement;
 exports.h = h;
 exports.promiseResolve = promiseResolve;

package/dist/cjs/internals-X77qKxsK.js

@@ -0,0 +1,115 @@
+'use strict';
+
+/**
+ * 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;
+}
+
+exports.formAssociatedMixin = formAssociatedMixin;
+exports.runValidators = runValidators;
+exports.setFormValue = setFormValue;

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-C9JKWXwa.js');
+var index = require('./index-BcSjvXJk.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["bds-banner.cjs",[[260,"bds-banner",{"idComponent":[1,"id-component"],"variant":[1],"enableClose":[4,"enable-close"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-button.cjs",[[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-typography.cjs",[[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 index.bootstrapLazy([["bds-text-field.cjs",[[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.cjs",[[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.cjs",[[772,"bds-popover",{"floatingOptions":[16],"disabled":[4],"width":[8],"header":[4],"footer":[4],"closable":[4],"isVisible":[32]}]]],["bds-banner.cjs",[[260,"bds-banner",{"variant":[1],"closable":[4],"closeButtonLabel":[1,"close-button-label"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-checkbox.cjs",[[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.cjs",[[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.cjs",[[0,"bds-spinner",{"size":[1],"label":[1]},null,{"size":[{"checkPropValues":0}]}]]],["bds-typography.cjs",[[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.cjs",[[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.cjs",[[772,"bds-tooltip",{"multiline":[4],"disabled":[4],"floatingOptions":[16],"isVisible":[32]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{states-C03fKOhs.js → states-iIYiazaM.js}

@@ -6,7 +6,11 @@ const COMPONENT_STATES = {
     DISABLED: 'disabled',
     ACTIVE: 'active'};
 const STATUS_VARIANT = {
-    INFO: 'info'};
+    INFO: 'info',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    DANGER: 'danger',
+};
 
 exports.COMPONENT_STATES = COMPONENT_STATES;
 exports.STATUS_VARIANT = STATUS_VARIANT;

package/dist/cjs/validateProps-BNOBk1Xs.js

@@ -0,0 +1,20 @@
+'use strict';
+
+/**
+ * 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(', ')}.`);
+}
+
+exports.validatePropValue = validatePropValue;

package/dist/collection/collection-manifest.json

@@ -2,6 +2,13 @@
   "entries": [
     "components/actions/bds-button/bds-button.js",
     "components/feedback/bds-banner/bds-banner.js",
+    "components/feedback/bds-spinner/bds-spinner.js",
+    "components/forms/bds-checkbox/bds-checkbox.js",
+    "components/forms/bds-flag/bds-flag.js",
+    "components/forms/bds-text-field/bds-text-field.js",
+    "components/overlays/bds-dialog/bds-dialog.js",
+    "components/overlays/bds-popover/bds-popover.js",
+    "components/overlays/bds-tooltip/bds-tooltip.js",
     "components/titles-text/bds-typography/bds-typography.js"
   ],
   "compiler": {