@vonage/vivid 5.15.0 → 5.16.0

package/color-picker/definition.js

@@ -1,1174 +1,3 @@
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { P as Popup, p as popupDefinition } from '../unbundled/definition5.js';
-import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
-import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
-import { attr, observable, nullableNumberConverter, ref, when, html, slotted, repeat } from '@microsoft/fast-element';
-import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
-import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
-import { W as WithContextualHelp } from '../unbundled/with-contextual-help.js';
-import { T as TrappedFocus } from '../unbundled/trapped-focus.js';
-import { B as BaseColorPicker, i as isValidHexColor } from '../unbundled/base-color-picker.js';
-import { W as WithErrorText } from '../unbundled/with-error-text.js';
-import { W as WithSuccessText } from '../unbundled/with-success-text.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-import { VwcTextFieldElement as TextField, textFieldDefinition } from '../text-field/definition.js';
-import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
-import { VwcTooltipElement as Tooltip, tooltipDefinition } from '../tooltip/definition.js';
-
-const styles = ".palette{display:grid;grid-template-columns:repeat(var(--swatches-per-row, 7),var(--_color-swatch-size, 24px))}.swatch{position:relative;padding:0;border-radius:4px;background-color:var(--swatch-color);block-size:var(--_color-swatch-size, 24px);color:var(--vvd-color-canvas);cursor:pointer;inline-size:var(--_color-swatch-size, 24px)}.swatch:not(.contrast){border:none}.swatch.contrast{border:1px solid var(--vvd-color-neutral-400);color:var(--vvd-color-canvas-text)}.swatch:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -3px}:host{display:inline-block;--_low-ink-color: var(--vvd-color-neutral-600)}.base{display:inline-block;min-inline-size:var(--_color-picker-min-inline-size, 280px)}.control{inline-size:100%}.button{display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:4px;margin:0;background-color:var(--button-color, var(--vvd-color-canvas-text));block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));color:var(--vvd-color-canvas);inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4);text-decoration:none;vertical-align:middle}.button.contrast{color:var(--vvd-color-canvas-text)}.button:not(.disabled){cursor:pointer}.button.disabled{background-color:var(--vvd-color-neutral-300);color:var(--vvd-color-neutral-500);cursor:not-allowed}.button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.button [data-vvd-component=icon]{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.dialog{display:flex;flex-direction:column;min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}.dialog .header{display:inline-flex;align-items:center;justify-content:space-between;padding-block:8px;padding-inline:16px}.dialog .header-title{font:var(--vvd-typography-base-extended-bold);margin-block:0}.dialog .body{display:flex;flex-direction:column;gap:16px;margin-block-end:16px;padding-inline:16px}.dialog .hex-input-wrapper{display:flex;align-items:stretch;gap:8px}.dialog .hex-input-wrapper [data-vvd-component=button]{flex:0 0 auto}.dialog .footer{padding:16px;border-top:1px solid var(--vvd-color-neutral-200)}.dialog .footer-header{margin-block-end:8px}.dialog .swatches-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.dialog .palette{gap:var(--_color-swatches-gap, 8px)}vvd-hex-input{min-width:0;flex:1 1 auto}vvd-hex-input::part(input),vvd-hex-input>input{width:100%;height:100%;box-sizing:border-box;border:0 none;border-radius:8px;background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-500);font:var(--vvd-typography-base);outline:transparent;padding-inline:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4)}vvd-hex-input::part(input):focus-visible,vvd-hex-input>input:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}vvd-hex-picker{width:auto;height:auto;gap:16px;inline-size:100%}vvd-hex-picker::part(saturation){border-radius:8px;block-size:120px}vvd-hex-picker::part(hue){flex:0 0 8px;border-radius:8px}vvd-hex-picker::part(hue-pointer){width:10px;height:10px}vvd-hex-picker::part(saturation-pointer){width:18px;height:18px}::part(popup-base){inline-size:max-content;min-block-size:var(--_color-picker-popup-min-inline-size, 264px);min-inline-size:var(--_color-picker-popup-min-inline-size, 264px)}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0 0 0 0)}";
-
-// Clamps a value between an upper and lower bound.
-// We use ternary operators because it makes the minified code
-// 2 times shorter then `Math.min(Math.max(a,b),c)`
-const clamp = (number, min = 0, max = 1) => {
-    return number > max ? max : number < min ? min : number;
-};
-const round = (number, digits = 0, base = Math.pow(10, digits)) => {
-    return Math.round(base * number) / base;
-};
-
-const hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));
-const hexToRgba = (hex) => {
-    if (hex[0] === '#')
-        hex = hex.substring(1);
-    if (hex.length < 6) {
-        return {
-            r: parseInt(hex[0] + hex[0], 16),
-            g: parseInt(hex[1] + hex[1], 16),
-            b: parseInt(hex[2] + hex[2], 16),
-            a: hex.length === 4 ? round(parseInt(hex[3] + hex[3], 16) / 255, 2) : 1
-        };
-    }
-    return {
-        r: parseInt(hex.substring(0, 2), 16),
-        g: parseInt(hex.substring(2, 4), 16),
-        b: parseInt(hex.substring(4, 6), 16),
-        a: hex.length === 8 ? round(parseInt(hex.substring(6, 8), 16) / 255, 2) : 1
-    };
-};
-const hsvaToHex = (hsva) => rgbaToHex(hsvaToRgba(hsva));
-const hsvaToHsla = ({ h, s, v, a }) => {
-    const hh = ((200 - s) * v) / 100;
-    return {
-        h: round(h),
-        s: round(hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0),
-        l: round(hh / 2),
-        a: round(a, 2)
-    };
-};
-const hsvaToHslString = (hsva) => {
-    const { h, s, l } = hsvaToHsla(hsva);
-    return `hsl(${h}, ${s}%, ${l}%)`;
-};
-const hsvaToRgba = ({ h, s, v, a }) => {
-    h = (h / 360) * 6;
-    s = s / 100;
-    v = v / 100;
-    const hh = Math.floor(h), b = v * (1 - s), c = v * (1 - (h - hh) * s), d = v * (1 - (1 - h + hh) * s), module = hh % 6;
-    return {
-        r: round([v, c, b, b, d, v][module] * 255),
-        g: round([d, v, v, c, b, b][module] * 255),
-        b: round([b, b, d, v, v, c][module] * 255),
-        a: round(a, 2)
-    };
-};
-const format = (number) => {
-    const hex = number.toString(16);
-    return hex.length < 2 ? '0' + hex : hex;
-};
-const rgbaToHex = ({ r, g, b, a }) => {
-    const alphaHex = a < 1 ? format(round(a * 255)) : '';
-    return '#' + format(r) + format(g) + format(b) + alphaHex;
-};
-const rgbaToHsva = ({ r, g, b, a }) => {
-    const max = Math.max(r, g, b);
-    const delta = max - Math.min(r, g, b);
-    // prettier-ignore
-    const hh = delta
-        ? max === r
-            ? (g - b) / delta
-            : max === g
-                ? 2 + (b - r) / delta
-                : 4 + (r - g) / delta
-        : 0;
-    return {
-        h: round(60 * (hh < 0 ? hh + 6 : hh)),
-        s: round(max ? (delta / max) * 100 : 0),
-        v: round((max / 255) * 100),
-        a
-    };
-};
-
-const equalColorObjects = (first, second) => {
-    if (first === second)
-        return true;
-    for (const prop in first) {
-        // The following allows for a type-safe calling of this function (first & second have to be HSL, HSV, or RGB)
-        // with type-unsafe iterating over object keys. TS does not allow this without an index (`[key: string]: number`)
-        // on an object to define how iteration is normally done. To ensure extra keys are not allowed on our types,
-        // we must cast our object to unknown (as RGB demands `r` be a key, while `Record<string, x>` does not care if
-        // there is or not), and then as a type TS can iterate over.
-        if (first[prop] !==
-            second[prop])
-            return false;
-    }
-    return true;
-};
-const equalHex = (first, second) => {
-    if (first.toLowerCase() === second.toLowerCase())
-        return true;
-    // To compare colors like `#FFF` and `ffffff` we convert them into RGB objects
-    return equalColorObjects(hexToRgba(first), hexToRgba(second));
-};
-
-const cache = {};
-const tpl = (html) => {
-    let template = cache[html];
-    if (!template) {
-        template = document.createElement('template');
-        template.innerHTML = html;
-        cache[html] = template;
-    }
-    return template;
-};
-const fire = (target, type, detail) => {
-    target.dispatchEvent(new CustomEvent(type, {
-        bubbles: true,
-        detail
-    }));
-};
-
-let hasTouched = false;
-// Check if an event was triggered by touch
-const isTouch = (e) => 'touches' in e;
-// Prevent mobile browsers from handling mouse events (conflicting with touch ones).
-// If we detected a touch interaction before, we prefer reacting to touch events only.
-const isValid = (event) => {
-    if (hasTouched && !isTouch(event))
-        return false;
-    if (!hasTouched)
-        hasTouched = isTouch(event);
-    return true;
-};
-const pointerMove = (target, event) => {
-    const pointer = isTouch(event) ? event.touches[0] : event;
-    const rect = target.el.getBoundingClientRect();
-    fire(target.el, 'move', target.getMove({
-        x: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
-        y: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height)
-    }));
-};
-const keyMove = (target, event) => {
-    // We use `keyCode` instead of `key` to reduce the size of the library.
-    const keyCode = event.keyCode;
-    // Ignore all keys except arrow ones, Page Up, Page Down, Home and End.
-    if (keyCode > 40 || (target.xy && keyCode < 37) || keyCode < 33)
-        return;
-    // Do not scroll page by keys when color picker element has focus.
-    event.preventDefault();
-    // Send relative offset to the parent component.
-    fire(target.el, 'move', target.getMove({
-        x: keyCode === 39 // Arrow Right
-            ? 0.01
-            : keyCode === 37 // Arrow Left
-                ? -0.01
-                : keyCode === 34 // Page Down
-                    ? 0.05
-                    : keyCode === 33 // Page Up
-                        ? -0.05
-                        : keyCode === 35 // End
-                            ? 1
-                            : keyCode === 36 // Home
-                                ? -1
-                                : 0,
-        y: keyCode === 40 // Arrow down
-            ? 0.01
-            : keyCode === 38 // Arrow Up
-                ? -0.01
-                : 0
-    }, true));
-};
-class Slider {
-    constructor(root, part, aria, xy) {
-        const template = tpl(`<div role="slider" tabindex="0" part="${part}" ${aria}><div part="${part}-pointer"></div></div>`);
-        root.appendChild(template.content.cloneNode(true));
-        const el = root.querySelector(`[part=${part}]`);
-        el.addEventListener('mousedown', this);
-        el.addEventListener('touchstart', this);
-        el.addEventListener('keydown', this);
-        this.el = el;
-        this.xy = xy;
-        this.nodes = [el.firstChild, el];
-    }
-    set dragging(state) {
-        const toggleEvent = state ? document.addEventListener : document.removeEventListener;
-        toggleEvent(hasTouched ? 'touchmove' : 'mousemove', this);
-        toggleEvent(hasTouched ? 'touchend' : 'mouseup', this);
-    }
-    handleEvent(event) {
-        switch (event.type) {
-            case 'mousedown':
-            case 'touchstart':
-                event.preventDefault();
-                // event.button is 0 in mousedown for left button activation
-                if (!isValid(event) || (!hasTouched && event.button != 0))
-                    return;
-                this.el.focus();
-                pointerMove(this, event);
-                this.dragging = true;
-                break;
-            case 'mousemove':
-            case 'touchmove':
-                event.preventDefault();
-                pointerMove(this, event);
-                break;
-            case 'mouseup':
-            case 'touchend':
-                this.dragging = false;
-                break;
-            case 'keydown':
-                keyMove(this, event);
-                break;
-        }
-    }
-    style(styles) {
-        styles.forEach((style, i) => {
-            for (const p in style) {
-                this.nodes[i].style.setProperty(p, style[p]);
-            }
-        });
-    }
-}
-
-class Hue extends Slider {
-    constructor(root) {
-        super(root, 'hue', 'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"', false);
-    }
-    update({ h }) {
-        this.h = h;
-        this.style([
-            {
-                left: `${(h / 360) * 100}%`,
-                color: hsvaToHslString({ h, s: 100, v: 100, a: 1 })
-            }
-        ]);
-        this.el.setAttribute('aria-valuenow', `${round(h)}`);
-    }
-    getMove(offset, key) {
-        // Hue measured in degrees of the color circle ranging from 0 to 360
-        return { h: key ? clamp(this.h + offset.x * 360, 0, 360) : 360 * offset.x };
-    }
-}
-
-class Saturation extends Slider {
-    constructor(root) {
-        super(root, 'saturation', 'aria-label="Color"', true);
-    }
-    update(hsva) {
-        this.hsva = hsva;
-        this.style([
-            {
-                top: `${100 - hsva.v}%`,
-                left: `${hsva.s}%`,
-                color: hsvaToHslString(hsva)
-            },
-            {
-                'background-color': hsvaToHslString({ h: hsva.h, s: 100, v: 100, a: 1 })
-            }
-        ]);
-        this.el.setAttribute('aria-valuetext', `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`);
-    }
-    getMove(offset, key) {
-        // Saturation and brightness always fit into [0, 100] range
-        return {
-            s: key ? clamp(this.hsva.s + offset.x * 100, 0, 100) : offset.x * 100,
-            v: key ? clamp(this.hsva.v - offset.y * 100, 0, 100) : Math.round(100 - offset.y * 100)
-        };
-    }
-}
-
-const css = `:host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}`;
-
-const hueCss = `[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}`;
-
-const saturationCss = `[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}`;
-
-const $isSame = Symbol('same');
-const $color$1 = Symbol('color');
-const $hsva = Symbol('hsva');
-const $update$1 = Symbol('update');
-const $parts = Symbol('parts');
-const $css = Symbol('css');
-const $sliders = Symbol('sliders');
-let ColorPicker$1 = class ColorPicker extends HTMLElement {
-    static get observedAttributes() {
-        return ['color'];
-    }
-    get [$css]() {
-        return [css, hueCss, saturationCss];
-    }
-    get [$sliders]() {
-        return [Saturation, Hue];
-    }
-    get color() {
-        return this[$color$1];
-    }
-    set color(newColor) {
-        if (!this[$isSame](newColor)) {
-            const newHsva = this.colorModel.toHsva(newColor);
-            this[$update$1](newHsva);
-            this[$color$1] = newColor;
-        }
-    }
-    constructor() {
-        super();
-        const template = tpl(`<style>${this[$css].join('')}</style>`);
-        const root = this.attachShadow({ mode: 'open' });
-        root.appendChild(template.content.cloneNode(true));
-        root.addEventListener('move', this);
-        this[$parts] = this[$sliders].map((slider) => new slider(root));
-    }
-    connectedCallback() {
-        // A user may set a property on an _instance_ of an element,
-        // before its prototype has been connected to this class.
-        // If so, we need to run it through the proper class setter.
-        if (this.hasOwnProperty('color')) {
-            const value = this.color;
-            delete this['color'];
-            this.color = value;
-        }
-        else if (!this.color) {
-            this.color = this.colorModel.defaultColor;
-        }
-    }
-    attributeChangedCallback(_attr, _oldVal, newVal) {
-        const color = this.colorModel.fromAttr(newVal);
-        if (!this[$isSame](color)) {
-            this.color = color;
-        }
-    }
-    handleEvent(event) {
-        // Merge the current HSV color object with updated params.
-        const oldHsva = this[$hsva];
-        const newHsva = { ...oldHsva, ...event.detail };
-        this[$update$1](newHsva);
-        let newColor;
-        if (!equalColorObjects(newHsva, oldHsva) &&
-            !this[$isSame]((newColor = this.colorModel.fromHsva(newHsva)))) {
-            this[$color$1] = newColor;
-            fire(this, 'color-changed', { value: newColor });
-        }
-    }
-    [$isSame](color) {
-        return this.color && this.colorModel.equal(color, this.color);
-    }
-    [$update$1](hsva) {
-        this[$hsva] = hsva;
-        this[$parts].forEach((part) => part.update(hsva));
-    }
-};
-
-const colorModel = {
-    defaultColor: '#000',
-    toHsva: hexToHsva,
-    fromHsva: ({ h, s, v }) => hsvaToHex({ h, s, v, a: 1 }),
-    equal: equalHex,
-    fromAttr: (color) => color
-};
-class HexBase extends ColorPicker$1 {
-    get colorModel() {
-        return colorModel;
-    }
-}
-
-/**
- * A color picker custom element that uses HEX format.
- *
- * @element hex-color-picker
- *
- * @prop {string} color - Selected color in HEX format.
- * @attr {string} color - Selected color in HEX format.
- *
- * @fires color-changed - Event fired when color property changes.
- *
- * @csspart hue - A hue selector container.
- * @csspart saturation - A saturation selector container
- * @csspart hue-pointer - A hue pointer element.
- * @csspart saturation-pointer - A saturation pointer element.
- */
-class HexColorPicker extends HexBase {
-}
-customElements.define('hex-color-picker', HexColorPicker);
-
-const matcher = /^#?([0-9A-F]{3,8})$/i;
-const validHex = (value, alpha) => {
-    const match = matcher.exec(value);
-    const length = match ? match[1].length : 0;
-    return (length === 3 || // '#rgb' format
-        length === 6 || // '#rrggbb' format
-        (!!alpha && length === 4) || // '#rgba' format
-        (!!alpha && length === 8) // '#rrggbbaa' format
-    );
-};
-
-const template = tpl('<slot><input part="input" spellcheck="false"></slot>');
-// Escapes all non-hexadecimal characters including "#"
-const escape = (hex, alpha) => hex.replace(/([^0-9A-F]+)/gi, '').substring(0, alpha ? 8 : 6);
-const $alpha = Symbol('alpha');
-const $color = Symbol('color');
-const $saved = Symbol('saved');
-const $input = Symbol('input');
-const $init = Symbol('init');
-const $prefix = Symbol('prefix');
-const $update = Symbol('update');
-class HexInputBase extends HTMLElement {
-    static get observedAttributes() {
-        return ['alpha', 'color', 'prefixed'];
-    }
-    get color() {
-        return this[$color];
-    }
-    set color(hex) {
-        this[$color] = hex;
-        this[$update](hex);
-    }
-    get alpha() {
-        return this[$alpha];
-    }
-    set alpha(alpha) {
-        this[$alpha] = alpha;
-        this.toggleAttribute('alpha', alpha);
-        // When alpha set to false, update color
-        const color = this.color;
-        if (color && !validHex(color, alpha)) {
-            this.color = color.startsWith('#')
-                ? color.substring(0, color.length === 5 ? 4 : 7)
-                : color.substring(0, color.length === 4 ? 3 : 6);
-        }
-    }
-    get prefixed() {
-        return this[$prefix];
-    }
-    set prefixed(prefixed) {
-        this[$prefix] = prefixed;
-        this.toggleAttribute('prefixed', prefixed);
-        this[$update](this.color);
-    }
-    constructor() {
-        super();
-        const root = this.attachShadow({ mode: 'open' });
-        root.appendChild(template.content.cloneNode(true));
-        const slot = root.firstElementChild;
-        slot.addEventListener('slotchange', () => this[$init](root));
-    }
-    connectedCallback() {
-        this[$init](this.shadowRoot);
-        // A user may set a property on an _instance_ of an element,
-        // before its prototype has been connected to this class.
-        // If so, we need to run it through the proper class setter.
-        if (this.hasOwnProperty('alpha')) {
-            const value = this.alpha;
-            delete this['alpha'];
-            this.alpha = value;
-        }
-        else {
-            this.alpha = this.hasAttribute('alpha');
-        }
-        if (this.hasOwnProperty('prefixed')) {
-            const value = this.prefixed;
-            delete this['prefixed'];
-            this.prefixed = value;
-        }
-        else {
-            this.prefixed = this.hasAttribute('prefixed');
-        }
-        if (this.hasOwnProperty('color')) {
-            const value = this.color;
-            delete this['color'];
-            this.color = value;
-        }
-        else if (this.color == null) {
-            this.color = this.getAttribute('color') || '';
-        }
-        else if (this[$color]) {
-            this[$update](this[$color]);
-        }
-    }
-    handleEvent(event) {
-        const target = event.target;
-        const { value } = target;
-        switch (event.type) {
-            case 'input':
-                const hex = escape(value, this.alpha);
-                this[$saved] = this.color;
-                if (validHex(hex, this.alpha) || value === '') {
-                    this.color = hex;
-                    this.dispatchEvent(new CustomEvent('color-changed', {
-                        bubbles: true,
-                        detail: { value: hex ? '#' + hex : '' }
-                    }));
-                }
-                break;
-            case 'blur':
-                if (value && !validHex(value, this.alpha)) {
-                    this.color = this[$saved];
-                }
-        }
-    }
-    attributeChangedCallback(attr, _oldVal, newVal) {
-        if (attr === 'color' && this.color !== newVal) {
-            this.color = newVal;
-        }
-        const hasBooleanAttr = newVal != null;
-        if (attr === 'alpha') {
-            if (this.alpha !== hasBooleanAttr) {
-                this.alpha = hasBooleanAttr;
-            }
-        }
-        if (attr === 'prefixed') {
-            if (this.prefixed !== hasBooleanAttr) {
-                this.prefixed = hasBooleanAttr;
-            }
-        }
-    }
-    [$init](root) {
-        let input = this.querySelector('input');
-        if (!input) {
-            // remove all child node if no input found
-            let c;
-            while ((c = this.firstChild)) {
-                c.remove();
-            }
-            input = root.querySelector('input');
-        }
-        input.addEventListener('input', this);
-        input.addEventListener('blur', this);
-        this[$input] = input;
-        this[$update](this.color);
-    }
-    [$update](hex) {
-        if (this[$input]) {
-            this[$input].value =
-                hex == null || hex == '' ? '' : (this.prefixed ? '#' : '') + escape(hex, this.alpha);
-        }
-    }
-}
-
-/**
- * A custom element for entering color in HEX format.
- *
- * @element hex-input
- *
- * @prop {string} color - Color in HEX format.
- * @attr {string} color - Selected color in HEX format.
- * @prop {boolean} alpha - When true, `#rgba` and `#rrggbbaa` color formats are allowed.
- * @attr {boolean} alpha - Allows `#rgba` and `#rrggbbaa` color formats.
- * @prop {boolean} prefixed - When true, `#` prefix is displayed in the input.
- * @attr {boolean} prefixed - Enables `#` prefix displaying.
- *
- * @fires color-changed - Event fired when color is changed.
- *
- * @csspart input - A native input element.
- */
-class HexInput extends HexInputBase {
-}
-customElements.define('hex-input', HexInput);
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const VC_HEX_PICKER_TAG = "vvd-hex-picker";
-const VC_HEX_INPUT_TAG = "vvd-hex-input";
-class VvdHexPicker extends HexColorPicker {
-  static {
-    this.displayName = "VvdHexPicker";
-  }
-}
-class VvdHexInput extends HexInput {
-  static {
-    this.displayName = "VvdHexInput";
-  }
-}
-/* v8 ignore if -- @preserve */
-if (!customElements.get(VC_HEX_PICKER_TAG)) {
-  customElements.define(VC_HEX_PICKER_TAG, VvdHexPicker);
-}
-/* v8 ignore if -- @preserve */
-if (!customElements.get(VC_HEX_INPUT_TAG)) {
-  customElements.define(VC_HEX_INPUT_TAG, VvdHexInput);
-}
-const vcPickerTag = VC_HEX_PICKER_TAG;
-const vcInputTag = VC_HEX_INPUT_TAG;
-class ColorPicker extends WithContextualHelp(
-  WithFeedback(
-    WithErrorText(
-      WithSuccessText(
-        DelegatesAria(TrappedFocus(BaseColorPicker(VividElement)))
-      )
-    )
-  )
-) {
-  constructor() {
-    super(...arguments);
-    this.disableSavedColors = false;
-    this.savedColors = [];
-    this.maxSwatches = 6;
-    /**
-     * @internal
-     */
-    this.#closeOnPointerOutside = (e) => {
-      if (this._isInPath(e, this._buttonEl) || this._isInPath(e, this._popupEl)) {
-        return;
-      }
-      this.open = false;
-    };
-    this.copyIconName = "copy-2-line";
-    this.#iconResetTimer = null;
-    /**
-     * @internal
-     */
-    this._copyValueToClipboard = async (value) => {
-      try {
-        await navigator.clipboard.writeText(value);
-        this._setTemporaryCopyIcon("check-circle-line");
-        this._ariaLiveDescription = this.locale.colorPicker.copySuccessMessage(value);
-      } catch {
-        alert(this.locale.colorPicker.copyErrorText);
-        this._setTemporaryCopyIcon("error-line");
-        this._ariaLiveDescription = this.locale.colorPicker.copyErrorText;
-      }
-    };
-    this._ariaLiveDescription = "";
-  }
-  static {
-    /**
-     * Regular expression pattern for valid hex colors (with # prefix)
-     * Matches both 3-digit (#abc) and 6-digit (#aabbcc) hex colors
-     * @internal
-     */
-    this.HEX_COLOR_PATTERN = /^#(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})$/;
-  }
-  /**
-   * @internal
-   */
-  placeholderChanged() {
-    /* v8 ignore if -- @preserve */
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.placeholder = this.placeholder;
-    }
-  }
-  /**
-   * Change event handler for inner control.
-   * @remarks
-   * @internal
-   */
-  handleChange() {
-    this.$emit("change");
-  }
-  /**
-   * @internal
-   */
-  openChanged(_oldValue, newValue) {
-    if (newValue && this.isConnected) {
-      requestAnimationFrame(() => {
-        this._refreshCanvasColor();
-      });
-    }
-  }
-  /**
-   * @internal
-   */
-  savedColorsKeyChanged() {
-    this.savedColors = this._loadSavedColors();
-  }
-  /**
-   * @internal
-   */
-  get _savedColorsStorageKey() {
-    if (this.savedColorsKey) return this.savedColorsKey;
-    const tag = this.tagName.toLowerCase();
-    return `vvd-saved-colors:${tag}`;
-  }
-  /**
-   * @internal
-   */
-  _handleColorSaving() {
-    this._saveCurrentColor();
-  }
-  /**
-   * @internal
-   */
-  _saveCurrentColor() {
-    const value = this.value;
-    if (typeof value !== "string" || !isValidHexColor(value)) return;
-    const swatches = Array.isArray(this.savedColors) ? [...this.savedColors] : [];
-    const idx = swatches.findIndex((s) => s?.value === value);
-    if (idx !== -1) swatches.splice(idx, 1);
-    swatches.unshift({ value });
-    this.savedColors = swatches.slice(0, this._maxSwatchesNormalized);
-    this._setSavedColors(this.savedColors);
-  }
-  /**
-   * @internal
-   */
-  _loadSavedColors() {
-    try {
-      const savedColors = localStorage.getItem(this._savedColorsStorageKey);
-      if (!savedColors) return [];
-      const parsed = JSON.parse(savedColors);
-      if (!Array.isArray(parsed)) return [];
-      return parsed.filter(
-        (x) => x && typeof x.value === "string" && isValidHexColor(x.value)
-      ).map((x) => ({
-        value: x.value,
-        label: typeof x.label === "string" ? x.label : void 0
-      }));
-    } catch {
-      return [];
-    }
-  }
-  /**
-   * @internal
-   */
-  _setSavedColors(swatches) {
-    try {
-      localStorage.setItem(
-        this._savedColorsStorageKey,
-        JSON.stringify(swatches)
-      );
-    } catch {
-    }
-  }
-  /**
-   * Get all color swatches combined, both from swatches property and saved colors
-   * @internal
-   */
-  get allSwatches() {
-    const predefinedColors = Array.isArray(this.swatches) ? this.swatches : [];
-    const savedColors = Array.isArray(this.savedColors) ? this.savedColors : [];
-    const seen = /* @__PURE__ */ new Set();
-    const merged = [];
-    const appendIfUniqueAndValid = (swatch) => {
-      if (!swatch || typeof swatch.value !== "string") return;
-      if (!isValidHexColor(swatch.value) || seen.has(swatch.value)) return;
-      seen.add(swatch.value);
-      merged.push(swatch);
-    };
-    if (!this.disableSavedColors) {
-      savedColors.forEach(appendIfUniqueAndValid);
-    }
-    predefinedColors.forEach(appendIfUniqueAndValid);
-    return merged.slice(0, this._maxSwatchesNormalized);
-  }
-  /**
-   * @internal
-   */
-  get _maxSwatchesNormalized() {
-    return Number.isFinite(this.maxSwatches) ? Math.max(0, Math.floor(this.maxSwatches)) : 0;
-  }
-  /**
-   * @internal
-   */
-  maxSwatchesChanged() {
-    const maxCount = this._maxSwatchesNormalized;
-    if (this.savedColors?.length > maxCount) {
-      this.savedColors = this.savedColors.slice(0, maxCount);
-      this._setSavedColors(this.savedColors);
-    }
-  }
-  /**
-   * @internal
-   */
-  _onPickerColorChanged(e) {
-    if (typeof e.detail?.value === "string") {
-      this.value = e.detail?.value;
-    }
-  }
-  /**
-   * @internal
-   */
-  valueChanged(_oldVal, newVal) {
-    if (this._vcHexPickerEl && typeof newVal === "string") {
-      this._vcHexPickerEl.color = newVal;
-    }
-    if (this._vcHexInputEl && typeof newVal === "string") {
-      this._vcHexInputEl.color = newVal;
-    }
-  }
-  /**
-   * @internal
-   */
-  _onTextFieldInput(event) {
-    const textField = event.currentTarget;
-    this.value = textField.value;
-  }
-  /**
-   * @internal
-   */
-  get _buttonColor() {
-    /* v8 ignore else -- @preserve */
-    if (!this._canvasColor) {
-      this._refreshCanvasColor();
-    }
-    if (this.value && isValidHexColor(this.value)) {
-      return this.value;
-    }
-    return "var(--vvd-color-canvas-text)";
-  }
-  /**
-   * @internal
-   */
-  _onButtonClick() {
-    this.open = !this.open;
-  }
-  /**
-   * @internal
-   */
-  _handleCloseRequest() {
-    this.open = false;
-  }
-  /**
-   * @internal
-   */
-  _isInPath(e, el) {
-    if (!el) return false;
-    const path = e.composedPath?.();
-    return !!(path && path.includes(el));
-  }
-  #closeOnPointerOutside;
-  connectedCallback() {
-    super.connectedCallback();
-    this.savedColors = this._loadSavedColors();
-    document.addEventListener("mousedown", this.#closeOnPointerOutside, true);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener(
-      "mousedown",
-      this.#closeOnPointerOutside,
-      true
-    );
-  }
-  #iconResetTimer;
-  /**
-   * @internal
-   */
-  _setTemporaryCopyIcon(name, ms = 2e3) {
-    this.copyIconName = name;
-    if (this.#iconResetTimer) clearTimeout(this.#iconResetTimer);
-    this.#iconResetTimer = setTimeout(() => {
-      this.copyIconName = "copy-2-line";
-      this.#iconResetTimer = null;
-    }, ms);
-  }
-  // --- Trapped focus ---
-  /**
-   * @internal
-   */
-  _onBaseKeydown(event) {
-    if (this.open && handleEscapeKeyAndStopPropogation(event)) {
-      this.open = false;
-      return false;
-    }
-    if (this._trappedFocus(event, () => this._focusableElsWithinDialog())) {
-      return false;
-    }
-    return true;
-  }
-  /**
-   * @internal
-   */
-  _focusableElsWithinDialog() {
-    return this._popupEl.querySelectorAll(
-      'button:not([role="gridcell"]), [data-vvd-component="button"], vwc-button:not([role="gridcell"])'
-    );
-  }
-  /**
-   * @internal
-   */
-  _handleCellKeydown(event, value, index, isSaveCell) {
-    if (event.key === "Tab") {
-      event.preventDefault();
-      const focusableEls = this._focusableElsWithinDialog();
-      const idx = Array.prototype.indexOf.call(
-        focusableEls,
-        event.currentTarget
-      );
-      const nextIdx = event.shiftKey ? (idx - 1 + focusableEls.length) % focusableEls.length : (idx + 1) % focusableEls.length;
-      focusableEls[nextIdx]?.focus();
-      return false;
-    }
-    return super._handleCellKeydown(event, value, index, isSaveCell);
-  }
-  /**
-   * @internal
-   */
-  _handleSwatchSelection(value) {
-    /* v8 ignore else -- @preserve */
-    if (this.value !== value) {
-      this._ariaLiveDescription = this.locale.colorPicker.selectionSuccessMessage(value);
-    }
-    super._handleSwatchSelection(value);
-  }
-}
-__decorateClass([
-  attr
-], ColorPicker.prototype, "placeholder");
-__decorateClass([
-  attr({ attribute: "saved-colors-key" })
-], ColorPicker.prototype, "savedColorsKey");
-__decorateClass([
-  attr({
-    mode: "boolean",
-    attribute: "disable-saved-colors"
-  })
-], ColorPicker.prototype, "disableSavedColors");
-__decorateClass([
-  observable
-], ColorPicker.prototype, "savedColors");
-__decorateClass([
-  attr({
-    attribute: "max-swatches",
-    mode: "fromView",
-    converter: nullableNumberConverter
-  })
-], ColorPicker.prototype, "maxSwatches");
-__decorateClass([
-  observable
-], ColorPicker.prototype, "copyIconName");
-__decorateClass([
-  observable
-], ColorPicker.prototype, "_ariaLiveDescription");
-
-function renderTextField(textFieldTag, iconTag) {
-  const getClasses = (_) => classNames("control");
-  return html`
-		<${textFieldTag} 
-			id="text-field"
-			class="${getClasses}"
-			pattern="${ColorPicker.HEX_COLOR_PATTERN.source}"
-			maxlength="7"
-			label="${(x) => x.label}"
-			:value="${(x) => x.value}"
-			placeholder="${(x) => x.placeholder}"
-			helper-text="${(x) => x.helperText}"
-			error-text="${(x) => x.errorValidationMessage}"
-			success-text="${(x) => x.successText}"
-			?disabled="${(x) => x.disabled}"
-			?required="${(x) => x.required}"
-			@input='${(x, c) => x._onTextFieldInput(c.event)}'
-			@change="${(x) => x.handleChange()}"
-			@blur="${(x) => {
-    x.$emit("blur", void 0, { bubbles: false });
-  }}"
-			@focus="${(x) => {
-    x.$emit("focus", void 0, { bubbles: false });
-  }}"
-			${delegateAria()}
-			${ref("_textFieldEl")}
-		>
-			<button 
-				aria-label="${(x) => x.locale.colorPicker.pickerButtonLabel}"
-				aria-expanded="${(x) => x.open}"
-  			aria-haspopup="dialog"
-				class="button ${(x) => classNames(
-    x._applyContrastClass(x._buttonColor) ? "contrast" : "",
-    x.disabled ? "disabled" : ""
-  )}" 
-				style="--button-color: ${(x) => x._buttonColor};" 
-				?disabled="${(x) => x.disabled}"
-				@click="${(x) => x._onButtonClick()}"
-				slot="action-items" 
-				${ref("_buttonEl")}>
-				<${iconTag} name="edit-line"></${iconTag}>
-			</button>
-			<slot
-				slot="${(x) => x._helperTextSlottedContent?.length ? "helper-text" : void 0}"
-				name="helper-text"
-				${slotted("_helperTextSlottedContent")}
-			></slot>
-			<slot
-				slot='${(x) => x._contextualHelpSlottedContent?.length ? "contextual-help" : void 0}'
-				name='contextual-help'
-				${slotted("_contextualHelpSlottedContent")}
-			></slot>
-		</${textFieldTag}>
-	`;
-}
-function renderPopupHeader(buttonTag, iconTag) {
-  return html`
-		<div class="header">
-			<h2 class="header-title" id="color-picker-title">
-				<slot name="popup-text">${(x) => x.locale.colorPicker.popupLabel}</slot>
-			</h2>
-			<${buttonTag} size="condensed" 
-				aria-label="${(x) => x.locale.colorPicker.closeButtonLabel}" 
-				@click="${(x) => x._handleCloseRequest()}">
-				<${iconTag} slot="icon" name="close-line"></${iconTag}>
-			</${buttonTag}>
-		</div>
-	`;
-}
-function renderPopupBody(buttonTag, iconTag, tooltipTag) {
-  return html`
-		<div class="body">
-			<${html.partial(vcPickerTag)}
-				part="hex-picker"
-				color="${(x) => x.value}"
-				@color-changed="${(x, c) => x._onPickerColorChanged(c.event)}"
-				${ref("_vcHexPickerEl")}
-			></${html.partial(vcPickerTag)}>
-			<div class="hex-input-wrapper">
-				<${html.partial(vcInputTag)}
-					part="hex-input"
-					prefixed
-					color="${(x) => x.value}"
-					@color-changed="${(x, c) => x._onPickerColorChanged(c.event)}"
-					${ref("_vcHexInputEl")}
-				>
-					<input name="hex-code-input" aria-label="${(x) => x.locale.colorPicker.hexInputLabel}" 
-						placeholder="${(x) => x.placeholder}"
-    				@blur="${(x, c) => c.event.stopImmediatePropagation()}"
-						part="input">
-				</${html.partial(vcInputTag)}>
-				<${tooltipTag} placement="top" 
-					text="${(x) => x.locale.colorPicker.copyButtonLabel}" 
-					exportparts="vvd-theme-alternate">
-					<${buttonTag} 
-						slot="anchor" size="normal" 
-						aria-label="${(x) => x.locale.colorPicker.copyButtonLabel}" 
-						@click="${(x) => x._copyValueToClipboard(x.value)}">
-						<${iconTag} slot="icon" name="${(x) => x.copyIconName}"></${iconTag}>
-					</${buttonTag}>
-				</${tooltipTag}>
-			</div>
-		</div>
-	`;
-}
-function renderPopupFooter(buttonTag, iconTag, tooltipTag) {
-  return html`
-		<div class="footer">
-			<div class="footer-header">
-				<span class="footer-title" id="color-picker-footer-title"
-					><slot name="swatches-text"
-						>${(x) => x.locale.colorPicker.swatchesLabel}</slot
-					></span
-				>
-				${when((x) => !x.disableSavedColors, renderSwatchesCount())}
-			</div>
-			<div
-				class="palette"
-				role="grid"
-				aria-rowcount="${(x) => Math.ceil(x.allSwatches.length / x._getRowLength())}"
-				aria-colcount="${(x) => x._getRowLength()}"
-				style="--swatches-per-row: ${(x) => x._getRowLength()};"
-				aria-labelledby="color-picker-footer-title"
-			>
-				${repeat(
-    (x) => x.allSwatches,
-    (x) => x._renderColorSwatch(iconTag, tooltipTag),
-    { positioning: true }
-  )}
-				${when(
-    (x) => !x.disableSavedColors,
-    html`
-						<${tooltipTag} placement="top" 
-							text="${(x) => x.locale.colorPicker.saveButtonLabel}" 
-							exportparts="vvd-theme-alternate">
-							<${buttonTag}
-								slot="anchor"
-								appearance="outlined"
-								size="super-condensed"
-								role="gridcell"
-								tabindex="${(x) => x.allSwatches.length ? "-1" : "0"}"
-								aria-label="${(x) => x.locale.colorPicker.saveButtonLabel}"
-								@click="${(x) => x._saveCurrentColor()}"
-								@keydown="${(x, c) => x._handleCellKeydown(
-      c.event,
-      x.value,
-      x.allSwatches.length,
-      true
-    )}">
-								<${iconTag} slot="icon" name="plus-line"></${iconTag}>
-							</${buttonTag}>
-						</${tooltipTag}>
-					`
-  )}
-			</div>
-		</div>
-	`;
-}
-function renderSwatchesCount() {
-  return html`
-		<span
-			id="swatches-count"
-			class="swatches-count"
-			aria-label="${(x) => x.locale.colorPicker.maxSwatchesMessage(
-    x.allSwatches.length,
-    x.maxSwatches
-  )}"
-			>${(x) => `${x.allSwatches.length}/${x.maxSwatches}`}</span
-		>
-	`;
-}
-const ColorPickerTemplate = (context) => {
-  const textFieldTag = context.tagFor(TextField);
-  const iconTag = context.tagFor(Icon);
-  const popupTag = context.tagFor(Popup);
-  const buttonTag = context.tagFor(Button);
-  const tooltipTag = context.tagFor(Tooltip);
-  return html`
-		<div class="base" @keydown="${(x, { event }) => x._onBaseKeydown(event)}">
-			<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
-				${(x) => x._ariaLiveDescription}
-			</span>
-			${renderTextField(textFieldTag, iconTag)}
-			<${popupTag}
-				:open="${(x) => x.open}"
-				:anchor="${(x) => x._buttonEl}"
-				placement="top"
-				offset="10" 
-				${ref("_popupEl")}>
-				<div class="dialog" 
-					role="dialog" 
-					aria-modal="true" 
-					aria-labelledby="color-picker-title">
-					${renderPopupHeader(buttonTag, iconTag)}
-					${renderPopupBody(buttonTag, iconTag, tooltipTag)}
-					${when(
-    (x) => !x.disableSavedColors || x.allSwatches.length > 0,
-    renderPopupFooter(buttonTag, iconTag, tooltipTag)
-  )}
-				</div>
-			</${popupTag}>
-		</div>
-	`;
-};
-
-const colorPickerDefinition = defineVividComponent(
-  "color-picker",
-  ColorPicker,
-  ColorPickerTemplate,
-  [
-    popupDefinition,
-    iconDefinition,
-    textFieldDefinition,
-    buttonDefinition,
-    tooltipDefinition,
-    feedbackMessageDefinition
-  ],
-  {
-    styles
-  }
-);
-const registerColorPicker = createRegisterFunction(
-  colorPickerDefinition
-);
-
+import "../unbundled/definition2.js";
+import { n as registerColorPicker, r as ColorPicker, t as colorPickerDefinition } from "../unbundled/definition24.js";
 export { ColorPicker as VwcColorPickerElement, colorPickerDefinition, registerColorPicker };