bitboss-ui 2.1.101 → 2.1.103

package/dist/components/BaseColorInput/BaseColorInput.vue.d.ts

@@ -2,9 +2,15 @@ import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { IconType } from '../../types/Icon';
 /**
  * Color input with hex value masking and an optional palette popover.
- * Accepts and emits `#RRGGBB` values via v-model and supports full input chrome slots.
+ * Accepts and emits `#RRGGBB` (or `#RRGGBBAA` when `alpha` is enabled) values via v-model
+ * and supports full input chrome slots.
  */
 export type BaseColorInputProps = {
+    /**
+     * Enable the alpha channel. When true the picker shows an opacity slider and
+     * emits / accepts `#RRGGBBAA` hex8 values.
+     */
+    alpha?: boolean;
     /**
      * Name of the icon to render at the right hand side of the input.
      */
@@ -72,6 +78,19 @@ export type BaseColorInputProps = {
      * Mark the input as required.
      */
     required?: boolean;
+    /**
+     * Show an eyedropper button to sample any color on screen.
+     * Uses the native EyeDropper API — hidden automatically on unsupported browsers.
+     * @default false
+     */
+    picker?: boolean;
+    /**
+     * Controls swatches display in the picker:
+     * - `true`       — show the built-in Material-palette swatches
+     * - `string[][]` — show custom swatches (each inner array = a column of shades)
+     * - `false` / omitted — no swatches section
+     */
+    swatches?: boolean | string[][];
     /**
      * Transition duration (ms) of the palette popover.
      * @default 250
@@ -216,29 +235,6 @@ declare function __VLS_template(): {
                 suffix?(_: {}): any;
             };
         }) | null;
-        indicator: HTMLButtonElement;
-        pallette: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
-            modelValue: string | null;
-        }> & Readonly<{
-            "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-        }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-            "update:modelValue": (value: string) => any;
-        }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
-            paletteRef: HTMLSpanElement;
-            mainCanvasRef: HTMLCanvasElement;
-            hueCanvasRef: HTMLCanvasElement;
-        }, HTMLSpanElement, import('vue').ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<{
-            modelValue: string | null;
-        }> & Readonly<{
-            "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-        }>, {}, {}, {}, {}, {}> | null;
     };
     rootEl: HTMLSpanElement;
 };
@@ -266,6 +262,7 @@ declare const __VLS_component: import('vue').DefineComponent<BaseColorInputProps
 }>, {
     autocomplete: string;
     transitionDuration: number;
+    alpha: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     wrapper: ({
         $: import('vue').ComponentInternalInstance;
@@ -373,29 +370,6 @@ declare const __VLS_component: import('vue').DefineComponent<BaseColorInputProps
             suffix?(_: {}): any;
         };
     }) | null;
-    indicator: HTMLButtonElement;
-    pallette: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
-        modelValue: string | null;
-    }> & Readonly<{
-        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-        "update:modelValue": (value: string) => any;
-    }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
-        paletteRef: HTMLSpanElement;
-        mainCanvasRef: HTMLCanvasElement;
-        hueCanvasRef: HTMLCanvasElement;
-    }, HTMLSpanElement, import('vue').ComponentProvideOptions, {
-        P: {};
-        B: {};
-        D: {};
-        C: {};
-        M: {};
-        Defaults: {};
-    }, Readonly<{
-        modelValue: string | null;
-    }> & Readonly<{
-        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    }>, {}, {}, {}, {}, {}> | null;
 }, HTMLSpanElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/BaseColorInput/ColorPalette.vue.d.ts

@@ -0,0 +1,36 @@
+export type ColorPaletteProps = {
+    modelValue: string | null;
+    alpha?: boolean;
+    /**
+     * Show an eyedropper button that lets the user sample any color on screen.
+     * Uses the native EyeDropper API — hidden automatically on unsupported browsers.
+     * @default false
+     */
+    picker?: boolean;
+    /**
+     * Controls swatches display:
+     * - `true`      — show the built-in Material-palette swatches
+     * - `string[][]` — show custom swatches (each inner array = a column of shades)
+     * - `false` / omitted — no swatches section
+     */
+    swatches?: boolean | string[][];
+};
+declare const _default: import('vue').DefineComponent<ColorPaletteProps, {
+    el: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<ColorPaletteProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    alpha: boolean;
+    picker: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    pickerRef: HTMLDivElement;
+    canvasWrapRef: HTMLDivElement;
+    mainCanvasRef: HTMLCanvasElement;
+    hueWrapRef: HTMLDivElement;
+    hueCanvasRef: HTMLCanvasElement;
+    alphaWrapRef: HTMLDivElement;
+    alphaCanvasRef: HTMLCanvasElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/BbBreadcrumbs/BbBreadcrumbs.vue.d.ts

@@ -22,33 +22,25 @@ export type BbBreadcrumbsProps = Pick<CommonProps, 'disabled'> & {
      */
     divider?: string;
     /**
-     * Guessed width of the divider in pixels.
+     * Width of the divider in pixels. Defaults to 5.
      */
     dividerWidth?: number;
-    /**
-     * Guessed average character width in pixels.
-     */
-    fontWidthGuesstimate?: number;
     /**
      * Horizontal gap between breadcrumb elements in pixels.
      */
     gapWidth?: number;
     /**
-     * Extra width in pixels added per item estimate (e.g. prepend/append slot content).
+     * Extra one-off width in pixels added to the total estimate
+     * (e.g. prepend/append/item slot content).
      */
     offsetWidth?: number;
     /**
-     * Conservative multiplier applied to each estimated item width.
+     * Multiplier applied to each estimated item width. Defaults to 1.12.
+     * This is a trade-off between under-estimation and over-estimation.
+     * A higher value will result in more over-estimation. Increases/decreases carefully.
+     * @default 1.12
      */
     estimationBias?: number;
-    /**
-     * Fixed safety padding subtracted from available width before fitting.
-     */
-    overflowSafetyPaddingWidth?: number;
-    /**
-     * If estimated fit is too close to the limit, collapse one extra item.
-     */
-    nearThresholdCollapseWidth?: number;
     /**
      * Explicit width used by the estimator for the ellipsis activator.
      */
@@ -57,6 +49,12 @@ export type BbBreadcrumbsProps = Pick<CommonProps, 'disabled'> & {
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
+        prepend?: (props: {
+            disabled?: boolean;
+        }) => any;
+        append?: (props: {
+            disabled?: boolean;
+        }) => any;
         'item:prepend'?: (props: {
             disabled: boolean;
             index: number;
@@ -86,6 +84,12 @@ declare function __VLS_template(): {
             text?: string;
         }) => any;
     }> & {
+        prepend?: (props: {
+            disabled?: boolean;
+        }) => any;
+        append?: (props: {
+            disabled?: boolean;
+        }) => any;
         'item:prepend'?: (props: {
             disabled: boolean;
             index: number;
@@ -122,14 +126,11 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<BbBreadcrumbsProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BbBreadcrumbsProps> & Readonly<{}>, {
+    offsetWidth: number;
     divider: string;
     dividerWidth: number;
-    fontWidthGuesstimate: number;
     gapWidth: number;
-    offsetWidth: number;
     estimationBias: number;
-    overflowSafetyPaddingWidth: number;
-    nearThresholdCollapseWidth: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     navRef: HTMLElement;
 }, HTMLElement>;

package/dist/components/BbBreadcrumbs/estimateBreadcrumbItemWidth.d.ts

@@ -2,15 +2,7 @@ export type EstimateBreadcrumbItemWidthOptions = {
     /**
      * Base width of a single average character.
      */
-    fontWidthGuesstimate: number;
-    /**
-     * Reserved horizontal space per breadcrumb item (optical/focus buffer).
-     */
-    itemHorizontalPadding?: number;
-    /**
-     * Lower clamp to avoid under-estimation for short labels.
-     */
-    minItemWidth?: number;
+    fontWidth: number;
     /**
      * Multiplies final estimate to bias toward safer over-estimation.
      */

package/dist/components/BbColorInput/BbColorInput.vue.d.ts

@@ -2,6 +2,10 @@ import { BaseColorInputEvents, BaseColorInputSlots } from '../BaseColorInput/Bas
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { IconType } from '../../types/Icon';
 export type BbColorInputProps = {
+    /**
+     * Enable the alpha channel. Shows an opacity slider and uses `#RRGGBBAA` hex8 format.
+     */
+    alpha?: boolean;
     /**
      * Name of the icon to be added at the end of the input.
      */
@@ -95,6 +99,19 @@ export type BbColorInputProps = {
      * Reverses the layout. Applicable in every direction the order of the label and the input is swapped.
      */
     reverse?: boolean;
+    /**
+     * Show an eyedropper button to sample any color on screen.
+     * Uses the native EyeDropper API — hidden automatically on unsupported browsers.
+     * @default false
+     */
+    picker?: boolean;
+    /**
+     * Controls swatches display in the picker:
+     * - `true`       — show the built-in Material-palette swatches
+     * - `string[][]` — show custom swatches (each inner array = a column of shades)
+     * - `false` / omitted — no swatches section
+     */
+    swatches?: boolean | string[][];
 };
 export type BbColorInputEvents = BaseColorInputEvents;
 export type BbColorInputSlots = BaseColorInputSlots & {

package/dist/components/BbColorPalette/BbColorPalette.vue.d.ts

@@ -0,0 +1,207 @@
+import { CommonProps } from '../../types/CommonProps';
+export type BbColorPaletteProps = Pick<CommonProps, 'arrowPadding' | 'eager' | 'offset' | 'padding' | 'placement' | 'transitionDuration'> & {
+    /**
+     * v-model: the current color as a `#RRGGBB` hex string (or `#RRGGBBAA` when
+     * `alpha` is enabled), or `null` when empty.
+     */
+    modelValue: string | null;
+    /**
+     * Enable the alpha channel. The picker shows an opacity slider and emits
+     * `#RRGGBBAA` hex8 values.
+     */
+    alpha?: boolean;
+    /**
+     * Controls swatches display in the picker:
+     * - `true`       — show the built-in Material-palette swatches
+     * - `string[][]` — show custom swatches (each inner array = a column of shades)
+     * - `false` / omitted — no swatches section
+     */
+    swatches?: boolean | string[][];
+    /**
+     * External activator element or component ref.
+     * When provided, the `activator` slot is not rendered and click listeners are
+     * attached programmatically to the referenced element — mirroring the
+     * BbDropdown activator API.
+     */
+    activator?: HTMLElement | Record<string, any> | null;
+    /**
+     * Element or component ref the popover positions itself relative to.
+     * Defaults to the activator element when omitted, allowing the popover to
+     * be anchored to a larger container (e.g. the full input row) while a
+     * smaller element (e.g. a color dot) remains the click target.
+     */
+    anchor?: HTMLElement | Record<string, any> | null;
+    /**
+     * Constrains the popover within a bounding element.
+     * Accepts an HTMLElement, a Vue component ref, or a CSS selector string.
+     */
+    boundary?: HTMLElement | Record<string, any> | string | null;
+    /**
+     * Whether to flip the popover to the opposite side when there is not enough space.
+     * @default true
+     */
+    flip?: boolean;
+    /**
+     * Show the popover arrow. Hidden by default since the palette has its own visual frame.
+     * @default false
+     */
+    showArrow?: boolean;
+    /**
+     * Disable all interaction (activator and palette).
+     */
+    disabled?: boolean;
+    /**
+     * Prevent opening the palette while keeping the activator visible.
+     */
+    readonly?: boolean;
+    /**
+     * Accessible label applied to the activator element via `aria-label`.
+     * Defaults to the locale string for "Open color picker" when omitted.
+     */
+    label?: string;
+    /**
+     * Show an eyedropper button inside the palette to sample any color on screen.
+     * Uses the native EyeDropper API — hidden automatically on unsupported browsers.
+     * @default false
+     */
+    picker?: boolean;
+};
+export type BbColorPaletteEvents = {
+    (e: 'update:modelValue', value: string | null): void;
+    /** Fires whenever the popover opens or closes. */
+    (e: 'update:open', value: boolean): void;
+};
+export type BbColorPaletteSlots = {
+    /**
+     * Custom activator element.
+     * Apply `v-bind="props"` to the element you want to use as the trigger —
+     * this wires up the ref callback that lets BbColorPalette track the element.
+     *
+     * @example
+     * ```vue
+     * <BbColorPalette v-model="color">
+     *   <template #activator="{ props: dotProps, open, color }">
+     *     <button v-bind="dotProps" :style="{ background: color }">Pick</button>
+     *   </template>
+     * </BbColorPalette>
+     * ```
+     */
+    activator?: (props: {
+        /**
+         * Spread onto your activator element to register the ref.
+         * ARIA attributes (`aria-haspopup`, `aria-expanded`, `aria-label`) are set
+         * programmatically so they stay correct for both the slot and external activator paths.
+         */
+        props: {
+            ref: (el: unknown) => void;
+        };
+        /**
+         * Spread onto a wrapping element when you want the popover to anchor to
+         * something larger than the click target (e.g. the full input row).
+         * When unused the activator element is also the anchor.
+         */
+        anchorProps: {
+            ref: (el: unknown) => void;
+        };
+        /** Whether the palette popover is currently open. */
+        open: boolean;
+        /** The current color value (mirrors `modelValue`). */
+        color: string | null;
+        disabled?: boolean;
+    }) => any;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<BbColorPaletteSlots> & BbColorPaletteSlots;
+    refs: {
+        paletteRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../BaseColorInput/ColorPalette.vue').ColorPaletteProps> & Readonly<{
+            "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        }>, {
+            el: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+            "update:modelValue": (value: string) => any;
+        }, import('vue').PublicProps, {
+            alpha: boolean;
+            picker: boolean;
+        }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+            pickerRef: HTMLDivElement;
+            canvasWrapRef: HTMLDivElement;
+            mainCanvasRef: HTMLCanvasElement;
+            hueWrapRef: HTMLDivElement;
+            hueCanvasRef: HTMLCanvasElement;
+            alphaWrapRef: HTMLDivElement;
+            alphaCanvasRef: HTMLCanvasElement;
+        }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('../BaseColorInput/ColorPalette.vue').ColorPaletteProps> & Readonly<{
+            "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        }>, {
+            el: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+        }, {}, {}, {}, {
+            alpha: boolean;
+            picker: boolean;
+        }> | null;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<BbColorPaletteProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | null) => any;
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<BbColorPaletteProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    transitionDuration: number;
+    offset: number;
+    padding: number;
+    alpha: boolean;
+    picker: boolean;
+    flip: boolean;
+    showArrow: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    paletteRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../BaseColorInput/ColorPalette.vue').ColorPaletteProps> & Readonly<{
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    }>, {
+        el: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        "update:modelValue": (value: string) => any;
+    }, import('vue').PublicProps, {
+        alpha: boolean;
+        picker: boolean;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        pickerRef: HTMLDivElement;
+        canvasWrapRef: HTMLDivElement;
+        mainCanvasRef: HTMLCanvasElement;
+        hueWrapRef: HTMLDivElement;
+        hueCanvasRef: HTMLCanvasElement;
+        alphaWrapRef: HTMLDivElement;
+        alphaCanvasRef: HTMLCanvasElement;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('../BaseColorInput/ColorPalette.vue').ColorPaletteProps> & Readonly<{
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    }>, {
+        el: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    }, {}, {}, {}, {
+        alpha: boolean;
+        picker: boolean;
+    }> | null;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/i18n/en.d.ts

@@ -6,11 +6,16 @@ declare const _default: {
         clearLabel: string;
     };
     colorInput: {
+        dialogLabel: string;
+        openPicker: string;
+        openPickerSelected: string;
         paletteLabel: string;
         mainCanvasDesc: string;
         mainCanvasSelectedColor: string;
         hueCanvasDesc: string;
         hueCanvasSelectedHue: string;
+        alphaSliderDesc: string;
+        eyeDropper: string;
     };
     datePicker: {
         monthLabel: string;

package/dist/i18n/it.d.ts

@@ -6,11 +6,16 @@ declare const _default: {
         clearLabel: string;
     };
     colorInput: {
+        dialogLabel: string;
+        openPicker: string;
+        openPickerSelected: string;
         paletteLabel: string;
         mainCanvasDesc: string;
         mainCanvasSelectedColor: string;
         hueCanvasDesc: string;
         hueCanvasSelectedHue: string;
+        alphaSliderDesc: string;
+        eyeDropper: string;
     };
     datePicker: {
         monthLabel: string;