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

package/dist/cjs/{index-C9JKWXwa.js → index-CwYIVC9N.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$;
@@ -137,6 +141,23 @@ var plt = {
   ce: (eventName, opts) => new CustomEvent(eventName, opts)
 };
 var supportsShadow = BUILD.shadowDom;
+var supportsListenerOptions = /* @__PURE__ */ (() => {
+  var _a;
+  let supportsListenerOptions2 = false;
+  try {
+    (_a = win.document) == null ? void 0 : _a.addEventListener(
+      "e",
+      null,
+      Object.defineProperty({}, "passive", {
+        get() {
+          supportsListenerOptions2 = true;
+        }
+      })
+    );
+  } catch (e) {
+  }
+  return supportsListenerOptions2;
+})();
 var promiseResolve = (v) => Promise.resolve(v);
 var supportsConstructableStylesheets = /* @__PURE__ */ (() => {
   try {
@@ -185,6 +206,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 +1044,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 +1176,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 +1201,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 +1426,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 +1451,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) {
@@ -1680,6 +1727,13 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
         hostRef.$deferredConnectedCallback$ = false;
         safeCall(instance, "connectedCallback", void 0, elm);
       }
+      {
+        hostRef.$flags$ |= 256 /* isListenReady */;
+        if (hostRef.$queuedListeners$) {
+          hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
+          hostRef.$queuedListeners$ = void 0;
+        }
+      }
       if (hostRef.$fetchedCbList$.length) {
         hostRef.$fetchedCbList$.forEach((cb) => cb(elm));
       }
@@ -2180,6 +2234,7 @@ var connectedCallback = (elm) => {
         initializeComponent(elm, hostRef, cmpMeta);
       }
     } else {
+      addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
       if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
         fireConnectedCallback(hostRef.$lazyInstance$, elm);
       } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
@@ -2207,6 +2262,12 @@ var disconnectInstance = (instance, elm) => {
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
+    {
+      if (hostRef == null ? void 0 : hostRef.$rmListeners$) {
+        hostRef.$rmListeners$.map((rmListener) => rmListener());
+        hostRef.$rmListeners$ = void 0;
+      }
+    }
     if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
       disconnectInstance(hostRef.$lazyInstance$, elm);
     } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
@@ -2256,6 +2317,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$members$ = compactMeta[2];
       }
+      {
+        cmpMeta.$listeners$ = compactMeta[3];
+      }
       {
         cmpMeta.$attrsToReflect$ = [];
       }
@@ -2282,6 +2346,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           }
           if (!this.hasRegisteredEventListeners) {
             this.hasRegisteredEventListeners = true;
+            addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
           }
           if (appLoadFallback) {
             clearTimeout(appLoadFallback);
@@ -2362,16 +2427,56 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   endBootstrap();
 };
 
+// src/runtime/fragment.ts
+var Fragment = (_, children) => children;
+var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
+  if (listeners && win.document) {
+    listeners.map(([flags, name, method]) => {
+      const target = elm;
+      const handler = hostListenerProxy(hostRef, method);
+      const opts = hostListenerOpts(flags);
+      plt.ael(target, name, handler, opts);
+      (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
+    });
+  }
+};
+var hostListenerProxy = (hostRef, methodName) => (ev) => {
+  var _a;
+  try {
+    {
+      if (hostRef.$flags$ & 256 /* isListenReady */) {
+        (_a = hostRef.$lazyInstance$) == null ? void 0 : _a[methodName](ev);
+      } else {
+        (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+      }
+    }
+  } catch (e) {
+    consoleError(e, hostRef.$hostElement$);
+  }
+};
+var hostListenerOpts = (flags) => supportsListenerOptions ? {
+  passive: (flags & 1 /* Passive */) !== 0,
+  capture: (flags & 2 /* Capture */) !== 0
+} : (flags & 2 /* Capture */) !== 0;
+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/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-C9JKWXwa.js');
+var index = require('./index-CwYIVC9N.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-list-menu-item.cjs",[[772,"bds-list-menu-item",{"variant":[513],"name":[1],"disabled":[516],"selected":[516],"value":[513],"activeItem":[516,"active-item"],"href":[1],"newTab":[4,"new-tab"],"download":[1],"currentState":[32]},null,{"variant":[{"checkPropsVariant":0}]}]]],["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-toggle.cjs",[[576,"bds-toggle",{"name":[513],"disabled":[516],"required":[516],"info":[1],"error":[516],"errorMessage":[513,"error-message"],"checked":[516],"placement":[513],"label":[513],"helperText":[513,"helper-text"],"value":[1],"isDisabled":[32],"validationError":[32],"validationMessage":[32],"isChecked":[32]},null,{"checked":[{"onCheckedChange":0}],"disabled":[{"onDisabledChange":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-avatar.cjs",[[0,"bds-avatar",{"username":[1],"variant":[1],"background":[1],"initialsColor":[1,"initials-color"]}]]],["bds-badge.cjs",[[260,"bds-badge",{"variant":[1],"disabled":[4]},null,{"variant":[{"checkPropValues":0}]}]]],["bds-banner.cjs",[[260,"bds-banner",{"variant":[1],"closable":[4],"closeButtonLabel":[1,"close-button-label"],"isClosing":[32],"isOpen":[32],"open":[64],"close":[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-divider.cjs",[[0,"bds-divider",{"orientation":[513]},null,{"orientation":[{"checkPropValues":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-grid.cjs",[[260,"bds-grid",{"layout":[1],"rowGap":[1,"row-gap"]},null,{"layout":[{"checkPropValues":0}]}]]],["bds-grid-item.cjs",[[260,"bds-grid-item",{"colSpan":[520,"col-span"],"colSpanSm":[520,"col-span-sm"],"colSpanMd":[520,"col-span-md"],"colSpanLg":[520,"col-span-lg"],"colSpanXl":[520,"col-span-xl"],"colSpan2xl":[520,"col-span-2xl"],"rowSpan":[520,"row-span"],"offset":[514]},null,{"colSpan":[{"checkPropValues":0}],"colSpanSm":[{"checkPropValues":0}],"colSpanMd":[{"checkPropValues":0}],"colSpanLg":[{"checkPropValues":0}],"colSpanXl":[{"checkPropValues":0}],"colSpan2xl":[{"checkPropValues":0}],"rowSpan":[{"checkPropValues":0}],"offset":[{"checkPropValues":0}]}]]],["bds-list-menu.cjs",[[260,"bds-list-menu",{"multiple":[4],"menuRole":[1,"menu-role"],"selectedValues":[32],"getSelectedValues":[64],"setSelectedValues":[64]},[[0,"bdsSelect","handleItemClick"]]]]],["bds-spinner.cjs",[[0,"bds-spinner",{"size":[1],"label":[1]},null,{"size":[{"checkPropValues":0}]}]]],["bds-status.cjs",[[260,"bds-status",{"state":[1],"indicator":[1]},null,{"state":[{"checkPropValues":0}],"indicator":[{"checkPropValues":0}]}]]],["bds-tag.cjs",[[260,"bds-tag",{"multiselect":[4],"selected":[4],"closeButtonLabel":[1,"close-button-label"],"color":[1],"readonly":[4],"disabled":[4],"internalSelected":[32]},null,{"color":[{"checkPropValues":0}],"selected":[{"syncSelectedFromProp":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_2.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"],"required":[516],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"downloadable":[4],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}],[772,"bds-tooltip",{"multiline":[4],"disabled":[4],"floatingOptions":[16],"isVisible":[32]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/states-BweP5Vpu.js

@@ -0,0 +1,24 @@
+'use strict';
+
+const COMPONENT_STATES = {
+    DEFAULT: 'default',
+    ERROR: 'error',
+    DISABLED: 'disabled',
+    ACTIVE: 'active'};
+const PROCESS_STATUS = {
+    NEUTRAL: 'neutral',
+    PENDING: 'pending',
+    IN_PROGRESS: 'in-progress',
+    COMPLETE: 'complete',
+    CANCEL: 'cancel',
+};
+const STATUS_VARIANT = {
+    INFO: 'info',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    DANGER: 'danger',
+};
+
+exports.COMPONENT_STATES = COMPONENT_STATES;
+exports.PROCESS_STATUS = PROCESS_STATUS;
+exports.STATUS_VARIANT = STATUS_VARIANT;

package/dist/cjs/validateProps-CJe9X5x8.js

@@ -0,0 +1,42 @@
+'use strict';
+
+/**
+ * Validates a numeric component prop against a min/max range.
+ * Issues a console warning when out of range — does not reset the value.
+ * Silently skips `undefined` (optional props) and `'full'` (valid sentinel for span props).
+ *
+ * @param min - Minimum valid value (inclusive).
+ * @param max - Maximum valid value (inclusive). Omit for unbounded upper limit.
+ * @param element - The host element whose property is being checked.
+ * @param propertyName - The name of the prop to validate.
+ */
+function validateNumericProp(min, max, element, propertyName) {
+    const raw = element[propertyName];
+    if (raw === undefined || raw === 'full')
+        return;
+    const current = Number(raw);
+    const outOfRange = Number.isNaN(current) || current < min || (max !== undefined && current > max);
+    if (outOfRange) {
+        const rangeDesc = max !== undefined ? `${min}–${max}` : `≥${min}`;
+        console.warn(`[BorealDS] Invalid value "${raw}" for prop "${propertyName}" on <${element.tagName.toLowerCase()}>. Expected ${rangeDesc}.`);
+    }
+}
+/**
+ * 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.validateNumericProp = validateNumericProp;
+exports.validatePropValue = validatePropValue;

package/dist/collection/collection-manifest.json

@@ -1,7 +1,24 @@
 {
   "entries": [
     "components/actions/bds-button/bds-button.js",
+    "components/actions/bds-list-menu/bds-list-menu/bds-list-menu.js",
+    "components/actions/bds-list-menu/bds-list-menu-item/bds-list-menu-item.js",
+    "components/actions/bds-toggle/bds-toggle.js",
+    "components/feedback/bds-badge/bds-badge.js",
     "components/feedback/bds-banner/bds-banner.js",
+    "components/feedback/bds-spinner/bds-spinner.js",
+    "components/feedback/bds-status/bds-status.js",
+    "components/feedback/bds-tag/bds-tag.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/helpers/bds-divider.js",
+    "components/images-icons/bds-avatar/bds-avatar.js",
+    "components/layouts/bds-grid/grid/bds-grid.js",
+    "components/layouts/bds-grid/grid-item/bds-grid-item.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": {

package/dist/collection/components/actions/bds-button/bds-button.css

@@ -1,3 +1,19 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+/**
+* This file contains mixins and functions for common interactions styles such as focus rings and transitions.
+* These are used across multiple components to ensure consistency in interaction feedback.
+*/
 bds-button {
   position: relative;
   display: inline-flex;
@@ -13,10 +29,10 @@ bds-button {
   appearance: none;
   border: 1px solid transparent;
   height: fit-content;
-  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
   margin: var(--boreal-spacing-2xs) var(--boreal-spacing-3xs);
   outline: none;
-  font-family: "Inter", sans-serif;
+  font-family: var(--boreal-typography-font-family-primary);
   font-weight: var(--boreal-typography-font-weight-semibold);
   width: fit-content;
   vertical-align: middle;
@@ -135,11 +151,11 @@ bds-button {
 }
 .bds-button.bds-button--var-default.bds-button--default:focus {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-default.bds-button--default:active, .bds-button.bds-button--var-default.bds-button--default.bds-button--state-active {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
 }
 .bds-button.bds-button--var-default.bds-button--default.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--default.bds-button--is-loading {
   cursor: not-allowed;
@@ -163,11 +179,11 @@ bds-button {
 }
 .bds-button.bds-button--var-default.bds-button--primary:focus {
   background-color: var(--boreal-ui-primary-base);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-default.bds-button--primary:active, .bds-button.bds-button--var-default.bds-button--primary.bds-button--state-active {
   background-color: var(--boreal-ui-primary-dark);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-default.bds-button--primary.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--primary.bds-button--is-loading {
   cursor: not-allowed;
@@ -191,11 +207,11 @@ bds-button {
 }
 .bds-button.bds-button--var-default.bds-button--success:focus {
   background-color: var(--boreal-ui-success-base);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-default.bds-button--success:active, .bds-button.bds-button--var-default.bds-button--success.bds-button--state-active {
   background-color: var(--boreal-ui-success-dark);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-default.bds-button--success.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--success.bds-button--is-loading {
   cursor: not-allowed;
@@ -219,11 +235,11 @@ bds-button {
 }
 .bds-button.bds-button--var-default.bds-button--error:focus {
   background-color: var(--boreal-ui-danger-base);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-default.bds-button--error:active, .bds-button.bds-button--var-default.bds-button--error.bds-button--state-active {
   background-color: var(--boreal-ui-danger-dark);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-default.bds-button--error.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--error.bds-button--is-loading {
   cursor: not-allowed;
@@ -250,11 +266,11 @@ bds-button {
 }
 .bds-button.bds-button--var-outline.bds-button--default:focus {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--default:active, .bds-button.bds-button--var-outline.bds-button--default.bds-button--state-active {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--default.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--default.bds-button--is-loading {
   cursor: not-allowed;
@@ -278,11 +294,11 @@ bds-button {
 }
 .bds-button.bds-button--var-outline.bds-button--primary:focus {
   background-color: var(--boreal-ui-primary-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--primary:active, .bds-button.bds-button--var-outline.bds-button--primary.bds-button--state-active {
   background-color: var(--boreal-ui-primary-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-loading {
   cursor: not-allowed;
@@ -306,11 +322,11 @@ bds-button {
 }
 .bds-button.bds-button--var-outline.bds-button--success:focus {
   background-color: var(--boreal-ui-success-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--success:active, .bds-button.bds-button--var-outline.bds-button--success.bds-button--state-active {
   background-color: var(--boreal-ui-success-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--success.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--success.bds-button--is-loading {
   cursor: not-allowed;
@@ -334,11 +350,11 @@ bds-button {
 }
 .bds-button.bds-button--var-outline.bds-button--error:focus {
   background-color: var(--boreal-ui-danger-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--error:active, .bds-button.bds-button--var-outline.bds-button--error.bds-button--state-active {
   background-color: var(--boreal-ui-danger-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--error.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--error.bds-button--is-loading {
   cursor: not-allowed;
@@ -365,11 +381,11 @@ bds-button {
 }
 .bds-button.bds-button--var-plain.bds-button--default:focus {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-plain.bds-button--default:active, .bds-button.bds-button--var-plain.bds-button--default.bds-button--state-active {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
 }
 .bds-button.bds-button--var-plain.bds-button--default.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--default.bds-button--is-loading {
   cursor: not-allowed;
@@ -393,11 +409,11 @@ bds-button {
 }
 .bds-button.bds-button--var-plain.bds-button--primary:focus {
   background-color: var(--boreal-ui-primary-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-plain.bds-button--primary:active, .bds-button.bds-button--var-plain.bds-button--primary.bds-button--state-active {
   background-color: var(--boreal-ui-primary-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
 }
 .bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-loading {
   cursor: not-allowed;
@@ -421,11 +437,11 @@ bds-button {
 }
 .bds-button.bds-button--var-plain.bds-button--success:focus {
   background-color: var(--boreal-ui-success-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-plain.bds-button--success:active, .bds-button.bds-button--var-plain.bds-button--success.bds-button--state-active {
   background-color: var(--boreal-ui-success-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
 }
 .bds-button.bds-button--var-plain.bds-button--success.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--success.bds-button--is-loading {
   cursor: not-allowed;
@@ -449,11 +465,11 @@ bds-button {
 }
 .bds-button.bds-button--var-plain.bds-button--error:focus {
   background-color: var(--boreal-ui-danger-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-plain.bds-button--error:active, .bds-button.bds-button--var-plain.bds-button--error.bds-button--state-active {
   background-color: var(--boreal-ui-danger-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
 }
 .bds-button.bds-button--var-plain.bds-button--error.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--error.bds-button--is-loading {
   cursor: not-allowed;

package/dist/collection/components/actions/bds-button/bds-button.js

@@ -2,7 +2,6 @@ import { h } from "@stencil/core";
 import { COMPONENT_STATES } from "../../../types/index";
 import { BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS } from "./types/enum";
 import { CORE_COLORS } from "../../../types/coreColors";
-//import { emitEvent } from '@/utils/helpers/eventEmitter';
 import { validatePropValue } from "../../../utils/helpers/validateProps";
 /**
  *  Button component for user interactions, form submissions, supporting various styles, sizes, and states.
@@ -71,7 +70,7 @@ export class BdsButton {
             if (event.key === 'Enter' || event.key === ' ') {
                 this.currentState = COMPONENT_STATES.ACTIVE;
                 event.preventDefault();
-                this.bdsClick.emit(event);
+                this.handleClick(event);
             }
         };
         /** reset status on keyup */
@@ -99,7 +98,7 @@ export class BdsButton {
         validatePropValue(Object.values(BUTTON_VARIANTS), BUTTON_VARIANTS.DEFAULT, this.el, 'variant');
         validatePropValue(Object.values(BUTTON_SIZES), BUTTON_SIZES.MEDIUM, this.el, 'size');
     }
-    /**  */
+    /** Before component rendered */
     componentWillLoad() {
         this.checkPropValues();
     }
@@ -150,7 +149,7 @@ export class BdsButton {
     }
     /* render button depends on variant */
     render() {
-        return (h("button", { key: '937ea6972ca39ef41aec1d8c6459a224c84b8390', name: this.name, class: this.getClassMap, type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label || undefined, "aria-disabled": this.disabled || this.loading, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, h("div", { key: 'f9adeb219026e966ce85db7127696e9bc60adb57', class: "bds-button__content" }, h("span", { key: 'e4dbb94477218eb831f534ffdd7b816532718b22', class: "bds-button__content-icon bds-button__content-icon--start" }, h("slot", { key: 'a04168309cfd6bba4eb47d4aa8c2e43f44df4d12', name: "icon" })), h("slot", { key: '47094f3e68f8b98fa16c6ab6e75fa2fcaeb0a8cd' }), h("span", { key: 'fb548f03228e22abdb1deaf56b60fcc7ed53a9e9', class: "bds-button__content-badge" }, h("slot", { key: '7e2d30d8c750f1472825618be9730ddedc974bd1', name: "badge" })), this.disclosure && (h("span", { key: 'eb4ba3930fc8a936d6825ce35961a9a9b2866be6', class: "bds-button__content-icon" }, h("i", { key: '8bafff19aedeacc4dfae9fd9a5b9006ffb185d85', class: "bds-icon-chevron-down" }))))));
+        return (h("button", { key: 'e5e7dd996abf7f32218d1871069f4cdd5070cb6b', name: this.name, class: this.getClassMap, type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label || undefined, "aria-disabled": this.disabled || this.loading, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, h("div", { key: '815ced9f3e464c73f371227c098ea65a7097f376', class: "bds-button__content" }, h("span", { key: '350acb5924bb036afeb2c252c71261c5b2015b1e', class: "bds-button__content-icon bds-button__content-icon--start" }, h("slot", { key: '57feb7a77e7edd0d43c3432a5822cdaec60729f6', name: "icon" })), h("slot", { key: '07536c420613bc6d4d53b5947524e69999937d19' }), h("span", { key: 'ae96692ab7ffe82df0f2a2cb685704912724df35', class: "bds-button__content-badge" }, h("slot", { key: '6a802ae2b19f85c3678c16f7950b597efc981da6', name: "badge" })), this.disclosure && (h("span", { key: 'c38f71595010045c86257f6d5c3ce48a504966ad', class: "bds-button__content-icon" }, h("i", { key: 'a51aff2455184cd38b2d7ebd52cc9c590b81601c', class: "bds-icon-chevron-down" }))))));
     }
     static get is() { return "bds-button"; }
     static get formAssociated() { return true; }

package/dist/collection/components/actions/bds-list-menu/bds-list-menu/bds-list-menu.css

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+/**
+* This file contains mixins and functions for common interactions styles such as focus rings and transitions.
+* These are used across multiple components to ensure consistency in interaction feedback.
+*/
+:host {
+  display: block;
+}
+
+.bds-list-menu {
+  display: flex;
+  flex-direction: column;
+  max-width: 350px;
+}