udp-stencil-component-library 25.18.2 → 25.18.3-alpha.2

package/dist/types/components/fluent-ui/message-bar/udp-message-bar.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import '@fluentui/web-components/message-bar.js';
+/**
+ * Message bar component.
+ *
+ * @slot - Content to display at the default slot.
+ * @slot actions - Content to display at the actions slot. Items are automatically laid out in a row.
+ * @slot dismiss - Content to display at the dismiss slot (used when dismissible=false).
+ * @slot icon - Content to display at the icon slot.
+ */
+export declare class UdpMessageBar {
+    /**
+     * Sets the shape of the Message Bar.
+     */
+    shape: 'rounded' | 'square';
+    /**
+     * Sets the layout of the control.
+     */
+    layout: 'multiline' | 'singleline';
+    /**
+     * Sets the intent of the control.
+     */
+    intent: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * When true, renders a built-in dismiss (X) button. Wire onDismiss to hide the bar.
+     */
+    dismissible: boolean;
+    /**
+     * Fires when the built-in dismiss button is clicked (requires dismissible=true).
+     */
+    dismissEvent: EventEmitter<void>;
+    private handleDismissClick;
+    render(): any;
+}

package/dist/types/components/fluent-ui/popover/udp-popover.d.ts

@@ -0,0 +1,79 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export type PopoverPosition = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+/**
+ * udp-popover
+ * A modern popover component using CSS Anchor Positioning with a JS fallback.
+ */
+export declare class UdpPopover {
+    el: HTMLElement;
+    /** Whether the popover is open. */
+    open: boolean;
+    /** Preferred position of the popover relative to the trigger. */
+    position: PopoverPosition;
+    /** If true, clicking outside the popover will not close it (manual mode). */
+    keepOpenOnClickOutside: boolean;
+    /** Size variant for the popover content. */
+    size?: 'small' | 'medium' | 'large';
+    /** Whether to display an arrow pointing to the trigger. */
+    withArrow: boolean;
+    /** Whether to trap focus within the popover when open. */
+    trapFocus: boolean;
+    /** Whether to close the popover when the page is scrolled. */
+    closeOnScroll: boolean;
+    /** Whether to close the popover when focus leaves the trigger and content. */
+    closeOnBlur: boolean;
+    /** Whether clicking the trigger area toggles the popover. Set to false when the parent manages open state. */
+    toggleOnTriggerClick: boolean;
+    /** Emitted when the popover opens. */
+    popoverOpen: EventEmitter<void>;
+    /** Emitted when the popover closes. */
+    popoverClose: EventEmitter<void>;
+    anchorId: string;
+    private popoverWrapper;
+    private abortController?;
+    private frameId?;
+    handleOpenChange(isOpen: boolean): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * Programmatically shows the popover.
+     */
+    showPopover(): Promise<void>;
+    /**
+     * Programmatically closes the popover.
+     */
+    closePopover(): Promise<void>;
+    /**
+     * Maps the PopoverPosition prop to the modern CSS position-area values.
+     */
+    private getPositionArea;
+    private handleNativeToggle;
+    private handleScroll;
+    /**
+     * Handles focus leaving the component.
+     * Closes popover if focus moves outside both trigger and popover content.
+     */
+    private handleFocusOut;
+    /**
+     * LEGACY FALLBACK: Manual positioning for non-supported browsers.
+     */
+    private initFallback;
+    private cleanupFallback;
+    private reposition;
+    /**
+     * Accessibility: Focus trapping
+     */
+    private focusFirstElement;
+    private getFocusableElements;
+    private handleKeyDown;
+    /**
+     * Gets the truly active element, traversing shadow roots.
+     */
+    private getDeepActiveElement;
+    /**
+     * Compares elements accounting for shadow DOM containment.
+     */
+    private isElementEqual;
+    private isClickingInside;
+    render(): any;
+}

package/dist/types/components/fluent-ui/progress-bar/udp-progress-bar.d.ts

@@ -0,0 +1,31 @@
+import '@fluentui/web-components/progress-bar.js';
+/**
+ * Progress bar component.
+ */
+export declare class UdpProgressBar {
+    /**
+     * The thickness of the progress bar.
+     */
+    thickness: 'medium' | 'large';
+    /**
+     * The shape of the progress bar.
+     */
+    shape: 'rounded' | 'square';
+    /**
+     * The validation state of the progress bar.
+     */
+    validationState: 'success' | 'warning' | 'error' | 'info';
+    /**
+     * The value of the progress.
+     */
+    value: number;
+    /**
+     * The minimum value.
+     */
+    min: number;
+    /**
+     * The maximum value.
+     */
+    max: number;
+    render(): any;
+}

package/dist/types/components/fluent-ui/radio-group/udp-fluent-radio-group.d.ts

@@ -0,0 +1,64 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import '@fluentui/web-components/radio-group.js';
+import '@fluentui/web-components/radio.js';
+import '@fluentui/web-components/field.js';
+interface RadioGroupItem {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+/**
+ * Radio group component. Can be used standalone or as part of a udp-field.
+ */
+export declare class UdpFluentRadioGroup {
+    private internalInput;
+    private radioRefs;
+    el: HTMLElement;
+    /**
+     * The items to display in the radio group.
+     */
+    items: RadioGroupItem[];
+    /**
+     * The name of the radio group.
+     */
+    name: string;
+    /**
+     * The label for the radio group.
+     */
+    label: string;
+    /**
+     * Disables the radio group and child radios.
+     */
+    disabled: boolean;
+    /**
+     * The orientation of the group.
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * The current value of the checked radio.
+     */
+    value: string;
+    /** Helper text displayed below the input to provide additional context. */
+    hint: string;
+    /** Helper text displayed on click of info icon in label */
+    popupHint: string;
+    /** Error message text displayed below the input when validation fails. */
+    error: string;
+    /** Whether to reserve space for error/helper text to prevent layout shift. */
+    includeErrorPadding: boolean;
+    /**
+     * Emitted when the value of the radio group changes.
+     */
+    valueChanged: EventEmitter<string>;
+    /**
+     * On first render, fluent-radio-group processes its slotted children asynchronously via slotchange.
+     * componentDidRender fires synchronously before that happens, so defer the initial value set.
+     */
+    componentDidLoad(): void;
+    /** Handle subsequent value/disabled updates after the component is initialized. */
+    componentDidRender(): void;
+    private handleChange;
+    private handleLabelClick;
+    render(): any;
+}
+export {};

package/dist/types/components/fluent-ui/search-input/udp-search-input.d.ts

@@ -0,0 +1,70 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import '@fluentui/web-components/text-input.js';
+import '@fluentui/web-components/field.js';
+import '@fluentui/web-components/label.js';
+/**
+ * Search input component.
+ *
+ * @slot start - Content to be displayed at the start of the input.
+ */
+export declare class UdpSearchInput {
+    private internalInput;
+    private internalValue;
+    handleValuePropChange(newValue: string): void;
+    /** The current value of the input. */
+    value: string;
+    /** The name of the input. */
+    name: string;
+    /** The label text displayed above or next to the input.
+     * Note that for fluent-text-input and fluent-text-area, the label is passed as a child rather than in the fluent-field label slot.
+     */
+    label: string;
+    /** Helper text displayed below the input to provide additional context. */
+    hint: string;
+    /** Helper text displayed on click of info icon in label */
+    popupHint: string;
+    /** Error message text displayed below the input when validation fails. */
+    error: string;
+    /** Whether to include error padding below the input. */
+    includeErrorPadding: boolean;
+    /** The type of input to render (e.g., 'text', 'email', 'password'). */
+    type: 'text' | 'email' | 'password' | 'tel' | 'url' | 'number';
+    /** Placeholder text displayed when the input is empty. */
+    placeholder: string;
+    /** Whether the input is required for form submission. */
+    required: boolean;
+    /** Whether the input is disabled and cannot be interacted with. */
+    disabled: boolean;
+    /** Whether the input is read-only. */
+    readonly: boolean;
+    /** Whether the input should automatically focus when the page loads. */
+    autofocus: boolean;
+    /** Hints to the browser about what kind of data is expected. */
+    autocomplete: string;
+    /** Whether to enable spell checking. */
+    spellcheck: boolean;
+    /** A regular expression that the input's value must match. */
+    pattern: string;
+    /** The visual appearance of the input. */
+    appearance: 'outline' | 'underline' | 'filled-lighter' | 'filled-darker';
+    /** The size of the input control. */
+    controlSize: 'small' | 'medium' | 'large';
+    /** Emitted when the input value changes. */
+    valueChanged: EventEmitter<string>;
+    /** Emitted when the input loses focus. */
+    inputBlur: EventEmitter<void>;
+    /** Emitted when the input gains focus. */
+    inputFocus: EventEmitter<void>;
+    /**
+     * Set initial value. Fluent has a bug where a value set instantly won't doesn't get set
+     * if the value is set in the same render cycle as the component is created.
+     * This method is called after the component is rendered, so it will always set the value.
+     * This fixes the timing issue
+     */
+    componentDidLoad(): void;
+    /** Selects the text in the input. */
+    select(): Promise<void>;
+    private handleInput;
+    private handleClear;
+    render(): any;
+}

package/dist/types/components/fluent-ui/slider/udp-slider.d.ts

@@ -0,0 +1,55 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import '@fluentui/web-components/slider.js';
+import '@fluentui/web-components/field.js';
+import '@fluentui/web-components/label.js';
+/**
+ * Slider component. Can be used standalone or as part of a udp-field.
+ */
+export declare class UdpSlider {
+    /**
+     * The label for the slider.
+     */
+    label: string;
+    /**
+     * The name for the slider.
+     */
+    name: string;
+    /**
+     * The element's disabled state.
+     */
+    disabled: boolean;
+    /**
+     * The minimum allowed value.
+     */
+    min: string;
+    /**
+     * The maximum allowed value.
+     */
+    max: string;
+    /**
+     * Value to increment or decrement via arrow keys, mouse click or drag.
+     */
+    step: string;
+    /**
+     * The orientation of the slider.
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * The current value of the slider.
+     */
+    value: string;
+    /** Helper text displayed below the slider. */
+    hint: string;
+    /** Helper text displayed on click of info icon in label */
+    popupHint: string;
+    /** Error message displayed below the slider. */
+    error: string;
+    /** Whether to reserve space for error/helper text to prevent layout shift. */
+    includeErrorPadding: boolean;
+    /**
+     * Emitted when the value of the radio group changes.
+     */
+    valueChanged: EventEmitter<string>;
+    private handleChange;
+    render(): any;
+}

package/dist/types/components/fluent-ui/spinner/udp-spinner.d.ts

@@ -0,0 +1,15 @@
+import '@fluentui/web-components/spinner.js';
+/**
+ * Loading spinner component.
+ */
+export declare class UdpSpinner {
+    /**
+     * The size of the spinner.
+     */
+    size: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
+    /**
+     * The appearance of the spinner.
+     */
+    appearance: 'primary' | 'inverted';
+    render(): any;
+}

package/dist/types/components/fluent-ui/swatch-picker/udp-swatch-picker.d.ts

@@ -0,0 +1,123 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import '@fluentui/web-components/label.js';
+import '@fluentui/web-components/field.js';
+/**
+ * Interface for a single swatch item
+ */
+export interface SwatchItem {
+    /** Unique identifier for the swatch */
+    value: string;
+    /** CSS color value (hex, rgb, etc.) */
+    color?: string;
+    /** Image URL for image-based swatches */
+    image?: string;
+    /** Label for tooltip/aria-label (required for accessibility) */
+    label: string;
+    /** Whether this swatch is disabled */
+    disabled?: boolean;
+}
+/**
+ * Event data for selection change
+ */
+export interface SwatchPickerOnSelectionChangeData {
+    value: string;
+    swatch: SwatchItem;
+}
+/**
+ * SwatchPicker component for selecting colors, images, or patterns.
+ */
+export declare class UdpSwatchPicker {
+    el: HTMLElement;
+    /**
+     * Array of swatch items to display
+     */
+    swatches: SwatchItem[];
+    /**
+     * Layout mode: row (inline) or grid
+     */
+    layout: 'row' | 'grid';
+    /**
+     * Number of columns for grid layout (max 8)
+     */
+    gridColumns: number;
+    /**
+     * Size of each swatch
+     */
+    size: 'extra-small' | 'small' | 'medium' | 'large';
+    /**
+     * Label text displayed above the swatch picker
+     */
+    label: string;
+    /**
+     * The name of the swatch picker for form submission
+     */
+    name: string;
+    /**
+     * Shape of the swatches
+     */
+    shape: 'square' | 'circular' | 'rounded';
+    /**
+     * Spacing between swatches
+     */
+    spacing: 'small' | 'medium';
+    /**
+     * Alignment of the swatches within the container
+     */
+    justify: 'start' | 'center' | 'end' | 'space-between';
+    /**
+     * Currently selected swatch value (controlled)
+     */
+    value?: string;
+    /**
+     * Default selected value (uncontrolled)
+     */
+    defaultValue?: string;
+    /**
+     * Disable all swatches
+     */
+    disabled: boolean;
+    /**
+     * Whether a selection is required
+     */
+    required: boolean;
+    /**
+     * Whether to show tooltips on hover
+     */
+    showTooltip: boolean;
+    /** Helper text displayed below the swatch picker. */
+    hint: string;
+    /** Helper text displayed on click of info icon in label */
+    popupHint: string;
+    /** Error message text displayed below the swatch picker. */
+    error: string;
+    /** Whether to reserve space for error/helper text to prevent layout shift. */
+    includeErrorPadding: boolean;
+    internalSelectedValue: string | undefined;
+    /**
+     * Fires when the form value changes
+     */
+    valueChanged: EventEmitter<string>;
+    valueChangedHandler(newValue: string | undefined): void;
+    componentWillLoad(): void;
+    /**
+     * Calculate relative luminance of a color
+     */
+    private getLuminance;
+    /**
+     * Calculate contrast ratio between two luminance values
+     */
+    private getContrastRatio;
+    /**
+     * Get the best contrast color (black or white) for a given background color
+     */
+    private getContrastColor;
+    /**
+     * Check if a color needs a contrast border against a light background
+     */
+    private needsContrastBorder;
+    private handleSwatchClick;
+    private handleKeyDown;
+    private getSwatchElement;
+    render(): any;
+    private renderSwatch;
+}

package/dist/types/components/fluent-ui/switch/udp-fluent-switch.d.ts

@@ -0,0 +1,50 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import '@fluentui/web-components/switch.js';
+import '@fluentui/web-components/field.js';
+import '@fluentui/web-components/label.js';
+/**
+ * Switch component. Can be used standalone or as part of a udp-field.
+ */
+export declare class UdpFluentSwitch {
+    /**
+     * The checked state of the switch.
+     */
+    checked: boolean;
+    /**
+     * The name of the switch.
+     */
+    name: string;
+    /**
+     * The disabled state of the switch.
+     */
+    disabled: boolean;
+    /**
+     * The label for the checkbox.
+     */
+    label: string;
+    /**
+     * The position of the label relative to the checkbox.
+     */
+    labelPosition: 'before' | 'after' | 'above';
+    /** Helper text displayed below the switch. */
+    hint: string;
+    /** Helper text displayed on click of info icon in label */
+    popupHint: string;
+    /** Error message displayed below the switch. */
+    error: string;
+    /** Whether to reserve space for error/helper text to prevent layout shift. */
+    includeErrorPadding: boolean;
+    /**
+     * Emitted when the checked state of the switch changes.
+     */
+    checkedChanged: EventEmitter<boolean>;
+    /**
+     * Emitted when the checked state of the switch changes.
+     */
+    valueChanged: EventEmitter<boolean>;
+    private handleChange;
+    private internalSwitch;
+    componentDidRender(): void;
+    private handleLabelClick;
+    render(): any;
+}

package/dist/types/components/fluent-ui/tablist/udp-fluent-tablist.d.ts

@@ -0,0 +1,96 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import '@fluentui/web-components/tablist.js';
+import '@fluentui/web-components/tab.js';
+export interface UdpTabItem {
+    /** The unique identifier for the tab. Matches the activeId. */
+    id: string;
+    /** The text to display on the tab. */
+    label: string;
+    /** If true, the tab is disabled and cannot be selected. */
+    disabled?: boolean;
+    /** If true, the tab is hidden from the list. */
+    hide?: boolean;
+    /** Name of the icon to display at the start of the tab. Can be overridden by a slot named `[id]-start`. */
+    startIconName?: string;
+    /** Name of the icon to display at the end of the tab. Can be overridden by a slot named `[id]-end`. */
+    endIconName?: string;
+}
+/**
+ * Tablist component. Define tabs here then use the udp-tab-panel component to display the content for each tab.
+ *
+ * @slot {tab.id}-start - Dynamic slot for the start content of a tab. Use the item.startIconName prop for icons.
+ * @slot {tab.id}-end - Dynamic slot for the end content of a tab. Use the item.endIconName prop for icons.
+ */
+export declare class UdpFluentTablist {
+    el: HTMLElement;
+    /**
+     * The list of tabs to render.
+     * Each item must have a unique 'id' and a display 'label'.
+     */
+    tabList: UdpTabItem[];
+    /**
+     * The visual appearance of the tablist.
+     * 'transparent': Minimal styling (default).
+     * 'contained': Darker container with raised selected tab.
+     */
+    appearance: 'transparent' | 'contained';
+    /**
+     * If true, the entire tablist is disabled and user interaction is blocked.
+     */
+    disabled: boolean;
+    /**
+     * The size of the tablist and its tabs.
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * The orientation of the tablist.
+     * 'horizontal' (default) or 'vertical'.
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * The overflow strategy to use.
+     * 'scroll' (default): Hides overflow and shows scroll buttons.
+     * 'collapse': Hides overflow and moves items to a 'more' menu.
+     */
+    overflowStrategy: 'scroll' | 'collapse';
+    /**
+     * If true, the counter badge will be shown when there are overflow tabs.
+     */
+    showCounter: boolean;
+    /**
+     * The ID of the currently active tab.
+     * This must match one of the 'id' values provided in 'tabList'.
+     */
+    activeId: string;
+    /**
+     * Emitted when the active tab changes.
+     * The detail contains the ID of the new active tab.
+     */
+    tabChange: EventEmitter<string>;
+    orderedTabs: UdpTabItem[];
+    showStartShadow: boolean;
+    showEndShadow: boolean;
+    overflowTabs: ReturnType<typeof this.buildMenuItems>;
+    private scrollContainer?;
+    private resizeObserver?;
+    private visibleTabIds;
+    private tablistEl?;
+    handleTabListChange(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private initScrollObserver;
+    private updateOverflowState;
+    private checkCollapseOverflow;
+    private buildMenuItems;
+    private updateTabVisibility;
+    private handleMenuItemClick;
+    private checkScrollShadows;
+    private handleScrollStart;
+    private handleScrollEnd;
+    private handleTabChange;
+    private handleKeyDown;
+    private renderTab;
+    render(): any;
+}

package/dist/types/components/fluent-ui/text/udp-text.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Typography variant type matching MUI Typography variants
+ */
+export type UdpTextVariant = 'body1' | 'body1Strong' | 'body1Stronger' | 'body2' | 'caption1' | 'caption1Strong' | 'caption1Stronger' | 'caption2' | 'caption2Strong' | 'subtitle1' | 'subtitle2' | 'subtitle2Stronger' | 'title1' | 'title2' | 'title3' | 'largeTitle' | 'display';
+export declare class UdpText {
+    /**
+     * The typography variant. Sets default size and weight.
+     */
+    variant: UdpTextVariant;
+    /**
+     * The Text size. Overrides the variant's default size.
+     */
+    size?: '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '1000';
+    /**
+     * The Text font.
+     */
+    font?: 'base' | 'numeric' | 'monospace';
+    /**
+     * The Text weight. Overrides the variant's default weight.
+     */
+    weight?: 'medium' | 'regular' | 'semibold' | 'bold';
+    /**
+     * The Text alignment.
+     */
+    align?: 'start' | 'end' | 'center' | 'justify';
+    /**
+     * The text style is italic.
+     */
+    italic?: boolean;
+    /**
+     * The text style is underline.
+     */
+    underline?: boolean;
+    /**
+     * The text style is strikethrough.
+     */
+    strikethrough?: boolean;
+    /**
+     * An text can take up the width of its container.
+     */
+    block?: boolean;
+    /**
+     * Override the HTML element tag. By default, uses semantic tags based on variant.
+     */
+    as?: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'ul' | 'ol' | 'li';
+    render(): any;
+}