wj-elements 0.4.0 → 0.4.2

package/dist/dark.css

@@ -191,6 +191,8 @@
     --wje-input-background-color: var(--wje-color-contrast-0);
     --wje-input-color: var(--wje-color);
     --wje-input-color-invalid: var(--wje-color-danger-9);
+    --wje-input-error-background-color: var(--wje-tooltip-background);
+    --wje-input-error-color: var(--wje-tooltip-color);
     --wje-input-border-color: var(--wje-border-color);
     --wje-input-border-color-focus: var(--wje-color-primary);
 
@@ -247,6 +249,8 @@
     --wje-select-background: var(--wje-color-contrast-0);
     --wje-select-options-background-color: var(--wje-color-contrast-0);
     --wje-select-options-border-color: var(--wje-border-color);
+    --wje-select-error-background-color: var(--wje-tooltip-background);
+    --wje-select-error-color: var(--wje-tooltip-color);
     --wje-select-color: var(--wje-color);
 
     /* Sliding - Container */
@@ -261,9 +265,14 @@
     --wje-textarea-background-color: var(--wje-background);
     --wje-textarea-color: var(--wje-color);
     --wje-textarea-color-invalid: var(--wje-color-danger-1);
+    --wje-textarea-error-background-color: var(--wje-tooltip-background);
+    --wje-textarea-error-color: var(--wje-tooltip-color);
     --wje-textarea-border-color: var(--wje-border-color);
     --wje-textarea-border-color-focus: var(--wje-color-primary-1);
 
+    /* Toast */
+    --wje-toast-stack-width: 300px;
+
     /* Toolbar */
     --wje-toolbar-background: var(--wje-background);
     --wje-toolbar-border-color: var(--wje-border-color);

package/dist/light.css

@@ -442,6 +442,8 @@
     --wje-input-background-color: var(--wje-color-contrast-0);
     --wje-input-color: var(--wje-color);
     --wje-input-color-invalid: var(--wje-color-danger-9);
+    --wje-input-error-background-color: var(--wje-tooltip-background);
+    --wje-input-error-color: var(--wje-tooltip-color);
     --wje-input-border-color: var(--wje-border-color);
     --wje-input-border-color-focus: var(--wje-color-primary);
     --wje-input-border-width: 1px;
@@ -589,6 +591,8 @@
     --wje-select-options-border-style: var(--wje-border-style);
     --wje-select-options-border-color: var(--wje-border-color);
     --wje-select-options-border-radius: var(--wje-border-radius-medium);
+    --wje-select-error-background-color: var(--wje-tooltip-background);
+    --wje-select-error-color: var(--wje-tooltip-color);
     --wje-select-line-height: 20px;
     --wje-select-color: var(--wje-color);
     --wje-select-margin-bottom: var(--wje-spacing-x-small);
@@ -637,6 +641,8 @@
     --wje-textarea-background-color: var(--wje-background);
     --wje-textarea-color: var(--wje-color);
     --wje-textarea-color-invalid: var(--wje-color-danger-9);
+    --wje-textarea-error-background-color: var(--wje-tooltip-background);
+    --wje-textarea-error-color: var(--wje-tooltip-color);
     --wje-textarea-border-width: 1px;
     --wje-textarea-border-style: solid;
     --wje-textarea-border-color: var(--wje-border-color);
@@ -651,6 +657,9 @@
     --wje-textarea-label-line-height: var(--wje-line-height-denser);
     --wje-textarea-label-font-size: var(--wje-font-size);
 
+    /* Toast */
+    --wje-toast-stack-width: 300px;
+
     /* Thumbnail */
     --wje-thumbnail-width: 48px;
     --wje-thumbnail-height: 48px;

package/dist/packages/wje-dropdown/dropdown.element.d.ts

@@ -77,7 +77,35 @@ export default class Dropdown extends WJElement {
      */
     afterDraw(): void;
     onSlotChange: () => void;
-    popupHideCallback: (e: any) => void;
+    /**
+     * Handles popup hide events and closes only the dropdown that owns the popup.
+     * This prevents nested dropdowns from collapsing their parent dropdown when the
+     * child popup is hidden.
+     * @param {Event} e The popup hide event.
+     */
+    popupHideCallback: (e: Event) => void;
+    /**
+     * Assigns the current dropdown instance as the owner of its popup layers.
+     * Owner metadata is later used to resolve which dropdown should react to
+     * delegated menu-item clicks, including portaled popup content.
+     */
+    syncPopupOwner(): void;
+    /**
+     * Recursively assigns owner metadata to the dropdown content subtree while
+     * leaving nested dropdown roots untouched, so each nested dropdown can keep
+     * its own ownership boundary.
+     * @param {HTMLElement} [root] The subtree root whose children should inherit this dropdown owner. Defaults to the current dropdown.
+     */
+    syncOwnedContentOwner(root?: HTMLElement): void;
+    /**
+     * Resolves the dropdown that owns a clicked menu item. The lookup prefers
+     * explicit owner metadata and falls back to DOM traversal so both regular
+     * and portaled dropdown content can be scoped correctly.
+     * @param {EventTarget[]} path The composed event path.
+     * @param {HTMLElement} item The clicked menu item element.
+     * @returns {HTMLElement|null} The owning dropdown element or null when it cannot be resolved.
+     */
+    getMenuItemOwner(path: EventTarget[], item: HTMLElement): HTMLElement | null;
     /**
      * Handles delegated clicks from inside the popup and closes the dropdown when a leaf menu item is selected.
      * This works even when the menu is portaled, because we rely on the composed path.

package/dist/packages/wje-input/input.element.d.ts

@@ -14,6 +14,8 @@ import { FormAssociatedElement } from '../internals/form-associated-element.js';
  * @cssproperty [--wje-input-background-color=var(--wje-background)] - Specifies the background color of the input field.
  * @cssproperty [--wje-input-color=var(--wje-color)] - Sets the text color within the input field.
  * @cssproperty [--wje-input-color-invalid=var(--wje-color-danger)] - Changes the text color when the input value is invalid.
+ * @cssproperty [--wje-input-error-background-color=var(--wje-tooltip-background)] - Controls the background color of the validation error bubble.
+ * @cssproperty [--wje-input-error-color=var(--wje-tooltip-color)] - Controls the text color of the validation error bubble.
  * @cssproperty [--wje-input-border-color=var(--wje-border-color)] - Defines the border color of the input field.
  * @cssproperty [--wje-input-border-color-focus=var(--wje-color-primary)] - Specifies the border color when the input is focused.
  * @cssproperty [--wje-input-border-width=1px] - Sets the width of the input border.

package/dist/packages/wje-option/option.element.d.ts

@@ -54,6 +54,9 @@ export default class Option extends WJElement {
      * @returns {boolean} Returns true if the 'wje-select' element has the 'multiple' attribute, otherwise false.
      */
     get multiple(): boolean;
+    set ownerSelect(value: any);
+    get ownerSelect(): any;
+    _ownerSelect: any;
     /**
      * Sets the value attribute of the option.
      * @param {string} value The value to set.

package/dist/packages/wje-select/select.element.d.ts

@@ -11,6 +11,7 @@ import { default as Options } from '../wje-options/options.js';
 import { default as Checkbox } from '../wje-checkbox/checkbox.js';
 export class Select extends FormAssociatedElement {
     static _instanceId: number;
+    static portalStyles: string;
     /**
      * Returns the CSS styles for the component.
      * @static
@@ -143,6 +144,22 @@ export class Select extends FormAssociatedElement {
      * @returns {string} The default value of the input element.
      */
     get defaultValue(): string;
+    /**
+     * Sets or removes the `portaled` attribute on the select.
+     * Mirrors the dropdown API so popup content can be rendered in a portal root.
+     * @param {boolean|string} value Determines whether and where the popup should be portaled.
+     */
+    set portaled(value: boolean | string);
+    /**
+     * Getter for the `portaled` attribute value.
+     * @returns {string} The configured portal target or an empty string for the default body portal.
+     */
+    get portaled(): string;
+    /**
+     * Checks whether popup content should be portaled.
+     * @returns {boolean} True when the `portaled` attribute is present.
+     */
+    get isPortaled(): boolean;
     /**
      * Sets the trigger value.
      * @param {string} value The trigger value to set.

package/dist/packages/wje-textarea/textarea.element.d.ts

@@ -12,6 +12,8 @@ import { FormAssociatedElement } from '../internals/form-associated-element.js';
  * @cssproperty [--wje-textarea-background-color=var(--wje-background)] - Sets the background color of the textarea. Accepts any valid CSS color value.
  * @cssproperty [--wje-textarea-color=var(--wje-color)] - Defines the text color within the textarea. Accepts any valid CSS color value.
  * @cssproperty [--wje-textarea-color-invalid=var(--wje-color-danger)] - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors.
+ * @cssproperty [--wje-textarea-error-background-color=var(--wje-tooltip-background)] - Controls the background color of the validation error bubble.
+ * @cssproperty [--wje-textarea-error-color=var(--wje-tooltip-color)] - Controls the text color of the validation error bubble.
  * @cssproperty [--wje-textarea-border-width=1px] - Specifies the width of the textarea's border. Accepts any valid CSS length unit.
  * @cssproperty [--wje-textarea-border-style=solid] - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`.
  * @cssproperty [--wje-textarea-border-color=var(--wje-border-color)] - Defines the border color of the textarea. Accepts any valid CSS color value.

package/dist/packages/wje-toast/toast.element.d.ts

@@ -6,14 +6,19 @@ import { default as WJElement } from '../wje-element/element.js';
  * @status stable
  * @augments {WJElement}
  * @csspart native - The native part
- * @cssproperty {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.
- * @cssproperty {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.
- * @cssproperty {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.
- * @cssproperty {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.
- * @cssproperty {string} color - Defines the color of the toast. Accepts any valid CSS color value such as `hex`, `RGB`, or named colors.
- * @cssproperty {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.
  * @slot - The content of the toast.
  * @slot media - The media of the toast.
+ * @attribute {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.
+ * @attribute {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.
+ * @attribute {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.
+ * @attribute {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.
+ * @attribute {string} color - Defines the color variant of the toast. Supports values such as `primary`, `complete`, `success`, `warning`, `danger`, `info`, and `contrast`.
+ * @attribute {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.
+ * @attribute {boolean} stacked - Enables a layered toast stack where the newest toast stays visually on top while older ones shrink behind it.
+ * @attribute {string} stack-position - Defines where the toast stack is placed on the screen. Supports `top-start`, `top-center`, `top-end`, `bottom-start`, `bottom-center`, and `bottom-end`.
+ * @attribute {number} stack-depth - Defines how many visual levels the collapsed stacked toast can show. Older toasts beyond this limit stay at the last reduced level. Default is `3`.
+ * @attribute {string} icon - Adds a leading icon into the `media` slot by icon name.
+ * @cssproperty [--wje-toast-stack-width=300px] - Defines the width of the toast stack container. Useful for centered stacked toasts and demo layouts.
  * // @fires wje-toast:after-show - Fired after the toast is shown.
  * // @fires wje-toast:after-hide - Fired after the toast is hidden.
  */
@@ -24,9 +29,7 @@ export default class Toast extends WJElement {
      * @returns {CSSStyleSheet} The CSS stylesheet
      */
     static get cssStyleSheet(): CSSStyleSheet;
-    toastStack: HTMLDivElement & {
-        className: string;
-    };
+    toastStack: HTMLDivElement;
     /**
      * Set headline value of the toast.
      * @param value
@@ -87,6 +90,36 @@ export default class Toast extends WJElement {
      * @returns {boolean}
      */
     get countdown(): boolean;
+    /**
+     * Set stacked value of the toast.
+     * @param value
+     */
+    set stacked(value: boolean);
+    /**
+     * Get stacked value of the toast.
+     * @returns {boolean}
+     */
+    get stacked(): boolean;
+    /**
+     * Set stack depth of the toast.
+     * @param value
+     */
+    set stackDepth(value: number);
+    /**
+     * Get stack depth of the toast.
+     * @returns {number}
+     */
+    get stackDepth(): number;
+    /**
+     * Set stack position of the toast.
+     * @param value
+     */
+    set stackPosition(value: string);
+    /**
+     * Get stack position of the toast.
+     * @returns {string}
+     */
+    get stackPosition(): string;
     /**
      * Set icon value of the toast.
      * @param value
@@ -97,6 +130,42 @@ export default class Toast extends WJElement {
      * @returns {string}
      */
     get icon(): string;
+    /**
+     * Creates a toast stack container.
+     * @returns {HTMLDivElement}
+     */
+    createToastStack(): HTMLDivElement;
+    /**
+     * Returns the key of the toast stack.
+     * @returns {string}
+     */
+    getToastStackKey(): string;
+    /**
+     * Applies the stack placement directly on the element so demo/app layout CSS cannot override it accidentally.
+     * @param {HTMLDivElement} stack
+     */
+    applyToastStackPlacement(stack?: HTMLDivElement): void;
+    /**
+     * Applies the current toast stack configuration to a stack element.
+     * @param {HTMLDivElement} stack
+     */
+    syncToastStack(stack?: HTMLDivElement): void;
+    /**
+     * Clears transient stack styling from a toast.
+     * @param {Toast} toast
+     */
+    clearStackItemStyles(toast: Toast): void;
+    /**
+     * Measures the rendered height of a toast for stack overlap calculations.
+     * @param {Toast} toast
+     * @returns {number}
+     */
+    getToastVisualHeight(toast: Toast): number;
+    /**
+     * Recomputes the visual order of toasts inside the stack.
+     * @param {HTMLDivElement} stack
+     */
+    updateToastStack(stack?: HTMLDivElement): void;
     /**
      * Draw method for the toast notification.
      * @returns {object} Document fragment
@@ -109,7 +178,7 @@ export default class Toast extends WJElement {
      */
     afterDraw(): void;
     countdownAnimation: Animation;
-    remainingTime: number;
+    remainingTime: any;
     /**
      * Starts the timer.
      * This method sets the `startTime` property to the current time and sets
@@ -119,6 +188,7 @@ export default class Toast extends WJElement {
      */
     startTimer(): void;
     startTime: number;
+    isTimerPaused: boolean;
     timeoutID: number;
     /**
      * Stops the timer.

package/dist/styles.css

@@ -842,10 +842,63 @@ z = font size
 .wje-toast-stack {
     position: fixed;
     top: 0;
-    margin: 0 0.5rem;
-    width: 300px;
-    max-width: 100%;
-    max-height: 100%;
+    right: 0;
+    margin: 0.5rem;
+    width: min(var(--wje-toast-stack-width, 300px), calc(100vw - 1rem));
+    max-width: calc(100vw - 1rem);
+    max-height: calc(100vh - 1rem);
     overflow: auto;
     z-index: 9999;
-}
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--wje-spacing-medium);
+}
+
+.wje-toast-stack[data-position='top-start'] {
+    left: 0;
+    right: auto;
+}
+
+.wje-toast-stack[data-position='top-center'] {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+}
+
+.wje-toast-stack[data-position='bottom-start'],
+.wje-toast-stack[data-position='bottom-center'],
+.wje-toast-stack[data-position='bottom-end'] {
+    top: auto;
+    bottom: 0;
+}
+
+.wje-toast-stack[data-position='bottom-start'] {
+    left: 0;
+    right: auto;
+}
+
+.wje-toast-stack[data-position='bottom-center'] {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+}
+
+.wje-toast-stack[data-stacked='true'] {
+    overflow: visible;
+    padding-block: 1rem;
+}
+
+.wje-toast-stack[data-stacked='true'] > wje-toast {
+    margin: 0;
+}
+
+.wje-toast-stack[data-stacked='true'][data-expanded='true'] {
+    overflow: auto;
+}
+
+.wje-toast-stack[data-stacked='true'][data-expanded='true'] > wje-toast {
+    --wje-toast-stack-scale: 1 !important;
+    --wje-toast-stack-shift: 0px !important;
+    --wje-toast-stack-opacity: 1 !important;
+}