@limetech/lime-elements 38.24.5 → 38.25.0

package/dist/lime-elements/lime-elements.esm.js.map

@@ -1 +1 @@
-{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","JSON","parse"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.4.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAmBA,MAAMA,EAAe,KAkCjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAiB3E,GAAuBF,IAAe,GAAI,CACtCE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IAGrD,CAcI,OAAOC,EAAeJ,EAAK,ECrF/BH,IAAeQ,MAAKC,GAEXC,EAAcC,KAAAC,MAAA,m4ZAAuCH"}
+{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","JSON","parse"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.4.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"sFAmBA,MAAMA,EAAe,KAkCjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAiB3E,GAAuBF,IAAe,GAAI,CACtCE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IAGrD,CAcI,OAAOC,EAAeJ,EAAK,ECrF/BH,IAAeQ,MAAKC,GAEXC,EAAcC,KAAAC,MAAA,s/ZAAuCH"}

package/dist/lime-elements/p-20c96ff3.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as r,H as o}from"./p-288f0842.js";const i='@charset "UTF-8";.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host(limel-color-picker){display:grid;gap:0.25rem;grid-template-columns:auto 1fr}button[slot=trigger]{all:unset;box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem;border-radius:0.5rem}button[slot=trigger]:not([disabled]):not([disabled=true]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}button[slot=trigger]:not([disabled]):not([disabled=true]):hover,button[slot=trigger]:not([disabled]):not([disabled=true]):focus,button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible{will-change:color, background-color, box-shadow, transform}button[slot=trigger]:not([disabled]):not([disabled=true]):hover,button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button[slot=trigger]:not([disabled]):not([disabled=true]):active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button[slot=trigger]:not([disabled]):not([disabled=true]):hover,button[slot=trigger]:not([disabled]):not([disabled=true]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button[slot=trigger]:not([disabled]):not([disabled=true]):focus{outline:none}button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button[slot=trigger]:before,button[slot=trigger]:after{content:"";position:absolute;inset:0;border-radius:inherit}button[slot=trigger]:before{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20style%3D%27fill-rule%3Aevenodd%3B%27%3E%3Cpath%20fill%3D%27rgba(186%2C186%2C192%2C0.16)%27%20d%3D%27M0%200h4v4H0zM4%204h4v4H4z%27%2F%3E%3C%2Fsvg%3E");background-size:0.5rem;z-index:0}button[slot=trigger]:after{z-index:1;box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset;background:var(--background)}:host([readonly]:not([readonly=false])) limel-input-field{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc( 2.5rem / 4 ))}:host([readonly]:not([readonly=false])) button[slot=trigger]{border:1px solid rgba(var(--contrast-700), 0.65)}';const l=class{constructor(o){e(this,o);this.change=t(this,"change",7);this.shouldFocus=false;this.renderTooltip=()=>{if(!this.readonly&&this.tooltipLabel){return r("limel-tooltip",{label:this.tooltipLabel,elementId:"tooltip-button"})}};this.renderPickerPalette=()=>{if(this.readonly){return this.renderPickerTrigger()}return r("limel-popover",{open:this.isOpen,openDirection:"bottom-start",onClose:this.onPopoverClose},this.renderPickerTrigger(),r("limel-color-picker-palette",{ref:this.setColorPickerPaletteElement,value:this.value,label:this.label,helperText:this.helperText,onChange:this.handleChange,required:this.required,palette:this.palette,columnCount:this.paletteColumnCount}))};this.renderPickerTrigger=()=>{const e=this.value?{"--background":this.value}:{};return r("button",{slot:"trigger",style:e,role:"button",onClick:this.openPopover,id:"tooltip-button",disabled:this.readonly})};this.setColorPickerPaletteElement=e=>{this.contentElement=e};this.openPopover=e=>{e.stopPropagation();this.isOpen=true;this.shouldFocus=this.isOpen};this.onPopoverClose=e=>{e.stopPropagation();this.isOpen=false};this.handleChange=e=>{e.stopPropagation();this.change.emit(e.detail)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.tooltipLabel=undefined;this.required=undefined;this.readonly=undefined;this.palette=undefined;this.paletteColumnCount=undefined;this.isOpen=false}componentDidRender(){var e;if(this.shouldFocus&&this.isOpen){this.shouldFocus=false;(e=this.contentElement)===null||e===void 0?void 0:e.focus()}}render(){return r(o,null,this.renderTooltip(),this.renderPickerPalette(),r("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required,readonly:this.readonly}))}};l.style=i;export{l as limel_color_picker};
+//# sourceMappingURL=p-20c96ff3.entry.js.map

package/dist/lime-elements/p-20c96ff3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["colorPickerCss","ColorPicker","this","shouldFocus","renderTooltip","readonly","tooltipLabel","h","label","elementId","renderPickerPalette","renderPickerTrigger","open","isOpen","openDirection","onClose","onPopoverClose","ref","setColorPickerPaletteElement","value","helperText","onChange","handleChange","required","palette","columnCount","paletteColumnCount","background","slot","style","role","onClick","openPopover","id","disabled","element","contentElement","event","stopPropagation","change","emit","detail","componentDidRender","_a","focus","render","Host"],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host(limel-color-picker) {\n    display: grid;\n    gap: 0.25rem;\n    grid-template-columns: auto 1fr;\n}\n\nbutton[slot='trigger'] {\n    all: unset;\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    width: shared_input-select-picker.$height-of-mdc-text-field;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    border-radius: 0.5rem;\n\n    &:not([disabled]):not([disabled='true']) {\n        @include mixins.is-elevated-clickable();\n        @include mixins.visualize-keyboard-focus();\n    }\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        @include mixins.add-chessboard-background();\n        z-index: 0;\n    }\n\n    &:after {\n        z-index: 1;\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n        background: var(--background);\n    }\n}\n\n:host([readonly]:not([readonly='false'])) {\n    limel-input-field {\n        transform: translateX(\n                calc(\n                    #{shared_input-select-picker.$height-of-mdc-text-field} /\n                        4 * -1\n                )\n            )\n            translateY(\n                calc(\n                    #{shared_input-select-picker.$height-of-mdc-text-field} / 4\n                )\n            );\n    }\n\n    button[slot='trigger'] {\n        border: 1px solid rgba(var(--contrast-700), 0.65);\n    }\n}\n","import {\n    Component,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Host,\n} from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport type { CustomColorSwatch } from './color-picker.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n * @exampleComponent limel-example-color-picker-custom-palette\n */\n@Component({\n    tag: 'limel-color-picker',\n    shadow: true,\n    styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n    /**\n     * Name or code of the chosen color\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * The label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Displayed as tooltips when picker is hovered.\n     */\n    @Prop({ reflect: true })\n    public tooltipLabel: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Set to `true` if a value is readonly. This makes the component un-interactive.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean;\n\n    /**\n     * An array of either color value strings, or objects with a `name` and a `value`,\n     * which replaces the default palette. Any valid CSS color format is accepted as value\n     * (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).\n     */\n    @Prop()\n    public palette?: Array<string | CustomColorSwatch>;\n\n    /**\n     * Defines the number of columns in the color swatch grid.\n     * If not provided, it will default to the number of colors in the palette;\n     * but stops at a maximum of 25 columns.\n     */\n    @Prop({ reflect: true })\n    public paletteColumnCount?: number;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    @State()\n    private isOpen = false;\n\n    public componentDidRender() {\n        if (this.shouldFocus && this.isOpen) {\n            this.shouldFocus = false;\n            this.contentElement?.focus();\n        }\n    }\n\n    private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n    private shouldFocus = false;\n\n    public render() {\n        return (\n            <Host>\n                {this.renderTooltip()}\n                {this.renderPickerPalette()}\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    readonly={this.readonly}\n                />\n            </Host>\n        );\n    }\n    private renderTooltip = () => {\n        if (!this.readonly && this.tooltipLabel) {\n            return (\n                <limel-tooltip\n                    label={this.tooltipLabel}\n                    elementId=\"tooltip-button\"\n                />\n            );\n        }\n    };\n\n    private renderPickerPalette = () => {\n        if (this.readonly) {\n            return this.renderPickerTrigger();\n        }\n\n        return (\n            <limel-popover\n                open={this.isOpen}\n                openDirection=\"bottom-start\"\n                onClose={this.onPopoverClose}\n            >\n                {this.renderPickerTrigger()}\n                <limel-color-picker-palette\n                    ref={this.setColorPickerPaletteElement}\n                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    palette={this.palette as any}\n                    columnCount={this.paletteColumnCount}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n                disabled={this.readonly}\n            />\n        );\n    };\n\n    private setColorPickerPaletteElement = (\n        element: HTMLLimelColorPickerPaletteElement\n    ) => {\n        this.contentElement = element;\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n\n        this.shouldFocus = this.isOpen;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,irI,MCgCVC,EAAW,M,wDAuEZC,KAAAC,YAAc,MAkBdD,KAAAE,cAAgB,KACpB,IAAKF,KAAKG,UAAYH,KAAKI,aAAc,CACrC,OACIC,EAAA,iBACIC,MAAON,KAAKI,aACZG,UAAU,kB,GAMlBP,KAAAQ,oBAAsB,KAC1B,GAAIR,KAAKG,SAAU,CACf,OAAOH,KAAKS,qB,CAGhB,OACIJ,EAAA,iBACIK,KAAMV,KAAKW,OACXC,cAAc,eACdC,QAASb,KAAKc,gBAEbd,KAAKS,sBACNJ,EAAA,8BACIU,IAAKf,KAAKgB,6BACVC,MAAOjB,KAAKiB,MACZX,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBC,SAAUnB,KAAKoB,aACfC,SAAUrB,KAAKqB,SACfC,QAAStB,KAAKsB,QACdC,YAAavB,KAAKwB,qBAEV,EAIhBxB,KAAAS,oBAAsB,KAC1B,MAAMgB,EAAazB,KAAKiB,MAAQ,CAAE,eAAgBjB,KAAKiB,OAAU,GAEjE,OACIZ,EAAA,UACIqB,KAAK,UACLC,MAAOF,EACPG,KAAK,SACLC,QAAS7B,KAAK8B,YACdC,GAAG,iBACHC,SAAUhC,KAAKG,UACjB,EAIFH,KAAAgB,6BACJiB,IAEAjC,KAAKkC,eAAiBD,CAAO,EAGzBjC,KAAA8B,YAAeK,IACnBA,EAAMC,kBACNpC,KAAKW,OAAS,KAEdX,KAAKC,YAAcD,KAAKW,MAAM,EAG1BX,KAAAc,eAAkBqB,IACtBA,EAAMC,kBACNpC,KAAKW,OAAS,KAAK,EAGfX,KAAAoB,aAAgBe,IACpBA,EAAMC,kBACNpC,KAAKqC,OAAOC,KAAKH,EAAMI,OAAO,E,qNArGjB,K,CAEVC,qB,MACH,GAAIxC,KAAKC,aAAeD,KAAKW,OAAQ,CACjCX,KAAKC,YAAc,OACnBwC,EAAAzC,KAAKkC,kBAAc,MAAAO,SAAA,SAAAA,EAAEC,O,EAQtBC,SACH,OACItC,EAACuC,EAAI,KACA5C,KAAKE,gBACLF,KAAKQ,sBACNH,EAAA,qBACIC,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBD,MAAOjB,KAAKiB,MACZE,SAAUnB,KAAKoB,aACfC,SAAUrB,KAAKqB,SACflB,SAAUH,KAAKG,W"}

package/dist/lime-elements/p-3d25fce1.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as o}from"./p-288f0842.js";const t=["red","pink","magenta","purple","violet","indigo","blue","sky","cyan","teal","green","lime","grass","yellow","amber","orange","coral","brown","gray","glaucous"];const l=["lighter","light","default","dark","darker"];function i(e,r){return`--color-${e}-${r}`}function a(e,r){return`rgb(var(${i(e,r)}))`}function n(e,r){return`${e} ${r}`}function c(e,r){return{name:n(e,r),value:a(e,r)}}const s='@charset "UTF-8";.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host(limel-color-picker-palette){--limel-color-palette-gap:0.25rem;--limel-color-palette-max-column-count:25;--limel-color-palette-min-width:8rem;box-sizing:border-box;border-radius:0.75rem;display:flex;flex-direction:column;gap:1rem;padding:0.75rem}*,*:before,:after{box-sizing:border-box}.color-picker-palette{display:grid;gap:var(--limel-color-palette-gap);grid-template-columns:repeat(min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)), 1fr);width:100%;max-width:58rem;min-width:var(--limel-color-palette-min-width)}.chosen-color-name{display:flex;gap:0.5rem}limel-input-field{flex-grow:1;width:min-content}.chosen-color-preview{flex-shrink:0;isolation:isolate;position:relative;width:2.5rem;height:2.5rem;border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.chosen-color-preview:before,.chosen-color-preview:after{content:"";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20style%3D%27fill-rule%3Aevenodd%3B%27%3E%3Cpath%20fill%3D%27rgba(186%2C186%2C192%2C0.16)%27%20d%3D%27M0%200h4v4H0zM4%204h4v4H4z%27%2F%3E%3C%2Fsvg%3E");background-size:0.5rem;z-index:0}.chosen-color-preview:after{background:var(--background);z-index:1}button.swatch{all:unset;position:relative;display:flex;justify-content:center;align-items:center;max-width:3rem;min-width:max(2rem, 100% / min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)) - (min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)) - 1) * var(--limel-color-palette-gap));aspect-ratio:1;border-radius:0.1875rem;background-color:var(--limel-color-picker-swatch-color)}button.swatch:focus{outline:none}button.swatch:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.swatch:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--limel-color-picker-swatch-color)}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):focus,button.swatch:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--limel-color-picker-swatch-color)}button.swatch:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}button.swatch:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button.swatch:focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.125rem rgb(var(--contrast-100)) inset}button.swatch[disabled]{cursor:not-allowed;box-shadow:0 0 0 0.125rem rgb(var(--contrast-100), 0.6) inset}button.swatch[disabled]:after{content:"";position:absolute;inset:0;margin:auto;width:0.125rem;height:100%;opacity:0.6;rotate:45deg;border-radius:1rem;background-color:rgb(var(--contrast-100))}button.swatch--selected{box-shadow:var(--button-shadow-inset);border-radius:50%}';const d=class{constructor(t){e(this,t);this.change=r(this,"change",7);this.renderSwatches=()=>this.getPalette().map(this.renderSwatchButton);this.renderSwatchButton=(e,r)=>{const t=this.value===e.value;const l={swatch:true,"swatch--selected":t,"custom-swatch":this.usesCustomPalette()};return o("button",{class:l,style:{"--limel-color-picker-swatch-color":e.value},title:e.name,disabled:e.disabled,"data-index":r,key:r,onClick:this.handleSwatchClick(e.value)})};this.handleChange=e=>{e.stopPropagation();this.change.emit(e.detail)};this.handleSwatchClick=e=>r=>{r.stopPropagation();const o=this.value===e?"":e;this.change.emit(o)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.required=undefined;this.columnCount=undefined;this.palette=undefined}render(){const e=this.value?{"--background":this.value}:{};return[o("div",{class:"color-picker-palette",style:{"--color-picker-column-count":`${this.getColumnCount()}`}},this.renderSwatches()),o("div",{class:"chosen-color-name"},o("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required}),o("div",{class:"chosen-color-preview",style:e}))]}getPalette(){if(this.usesCustomPalette()){return(this.palette||[]).map((e=>{const r=this.normalizeEntry(e);return{name:r.name||r.value,value:r.value,disabled:r.disabled}}))}const e=[];for(const r of l){for(const o of t){e.push(c(o,r))}}return e}normalizeEntry(e){if(typeof e==="string"){return{value:e}}return e}usesCustomPalette(){var e;return((e=this.palette)===null||e===void 0?void 0:e.length)>0}getColumnCount(){if(this.columnCount>0){return this.columnCount}if(!this.usesCustomPalette()){return 20}const e=this.getPalette();return e.length>0?e.length:1}static get delegatesFocus(){return true}};d.style=s;export{d as limel_color_picker_palette};
+//# sourceMappingURL=p-3d25fce1.entry.js.map

package/dist/lime-elements/p-3d25fce1.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["colors","brightnesses","getColorName","color","brightness","getSwatchValue","getSwatchName","createSwatch","name","value","colorPickerPaletteCss","Palette","this","renderSwatches","getPalette","map","renderSwatchButton","swatch","index","isSelected","classList","usesCustomPalette","h","class","style","title","disabled","key","onClick","handleSwatchClick","handleChange","event","stopPropagation","change","emit","detail","newValue","render","background","getColumnCount","label","helperText","onChange","required","palette","entry","normalized","normalizeEntry","swatches","b","push","_a","length","columnCount"],"sources":["./src/components/color-picker/swatches.ts","./src/components/color-picker/color-picker-palette.scss?tag=limel-color-picker-palette&encapsulation=shadow","./src/components/color-picker/color-picker-palette.tsx"],"sourcesContent":["export const colors = [\n    'red',\n    'pink',\n    'magenta',\n    'purple',\n    'violet',\n    'indigo',\n    'blue',\n    'sky',\n    'cyan',\n    'teal',\n    'green',\n    'lime',\n    'grass',\n    'yellow',\n    'amber',\n    'orange',\n    'coral',\n    'brown',\n    'gray',\n    'glaucous',\n];\n\nexport const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];\n\nexport interface Swatch {\n    name: string;\n    value: string;\n    disabled?: boolean;\n}\n\n/**\n * Returns the CSS variable name holding the RGB triplet for the color & brightness.\n *\n * @param color the base color identifier (e.g. \"red\", \"blue\")\n * @param brightness the brightness variant (e.g. \"light\", \"default\")\n * @returns CSS variable name in the form --color-{color}-{brightness}\n */\nexport function getColorName(color: string, brightness: string): string {\n    return `--color-${color}-${brightness}`;\n}\n\n/**\n * Swatch value: inline CSS color value in the required format: rgb(var(--color-*-*))\n * @param color\n * @param brightness\n */\nexport function getSwatchValue(color: string, brightness: string): string {\n    return `rgb(var(${getColorName(color, brightness)}))`;\n}\n\n/**\n * Swatch name: human readable label like \"red default\"\n * @param color\n * @param brightness\n */\nexport function getSwatchName(color: string, brightness: string): string {\n    return `${color} ${brightness}`;\n}\n\n/**\n * Convenience factory returning both name & value.\n * @param color\n * @param brightness\n */\nexport function createSwatch(color: string, brightness: string): Swatch {\n    return {\n        name: getSwatchName(color, brightness),\n        value: getSwatchValue(color, brightness),\n    };\n}\n\n/**\n * Returns the CSS color value for the given color and brightness.\n * @param color\n * @param brightness\n */\nexport function getCssColor(color: string, brightness: string): string {\n    return getSwatchValue(color, brightness);\n}\n","@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n@import './partial-styles/lime-admin-hack';\n\n:host(limel-color-picker-palette) {\n    --limel-color-palette-gap: 0.25rem;\n    --limel-color-palette-max-column-count: 25;\n    --limel-color-palette-min-width: 8rem;\n    box-sizing: border-box;\n\n    border-radius: 0.75rem; // is like popover's default `--popover-border-radius`\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    padding: 0.75rem;\n}\n\n*,\n*:before,\n:after {\n    box-sizing: border-box;\n}\n\n.color-picker-palette {\n    display: grid;\n    gap: var(--limel-color-palette-gap);\n    grid-template-columns: repeat(\n        min(\n            var(--color-picker-column-count),\n            var(--limel-color-palette-max-column-count)\n        ),\n        1fr\n    );\n    width: 100%;\n    max-width: 58rem;\n    min-width: var(--limel-color-palette-min-width);\n}\n\n.chosen-color-name {\n    display: flex;\n    gap: 0.5rem;\n}\n\nlimel-input-field {\n    flex-grow: 1;\n    width: min-content;\n}\n\n.chosen-color-preview {\n    flex-shrink: 0;\n    isolation: isolate;\n\n    position: relative;\n    width: shared_input-select-picker.$height-of-mdc-text-field;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    border: 1px solid rgba(var(--contrast-700), 0.65);\n    border-radius: 50%;\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        @include mixins.add-chessboard-background();\n        z-index: 0;\n    }\n\n    &:after {\n        background: var(--background);\n        z-index: 1;\n    }\n}\n\nbutton.swatch {\n    all: unset;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    max-width: 3rem;\n    min-width: max(\n        2rem,\n        100% /\n            min(\n                var(--color-picker-column-count),\n                var(--limel-color-palette-max-column-count)\n            ) -\n            (\n                min(\n                        var(--color-picker-column-count),\n                        var(--limel-color-palette-max-column-count)\n                    ) -\n                    1\n            ) *\n            var(--limel-color-palette-gap)\n    );\n    aspect-ratio: 1;\n    border-radius: 0.1875rem;\n\n    @include mixins.visualize-keyboard-focus();\n\n    // Since the background color will be overwritten by the mixin,\n    // we need to set it explicitly here and repeated in the mixin.\n    background-color: var(--limel-color-picker-swatch-color);\n    &:not([disabled]) {\n        @include mixins.is-flat-clickable(\n            $background-color: var(--limel-color-picker-swatch-color),\n            $background-color--hovered: var(--limel-color-picker-swatch-color)\n        );\n    }\n\n    &:focus-visible {\n        box-shadow:\n            var(--shadow-depth-8-focused),\n            0 0 0 0.125rem rgb(var(--contrast-100)) inset;\n    }\n\n    &[disabled] {\n        cursor: not-allowed;\n        box-shadow: 0 0 0 0.125rem rgb(var(--contrast-100), 0.6) inset;\n\n        &:after {\n            content: '';\n            position: absolute;\n            inset: 0;\n            margin: auto;\n            width: 0.125rem;\n            height: 100%;\n\n            opacity: 0.6;\n            rotate: 45deg;\n            border-radius: 1rem;\n            background-color: rgb(var(--contrast-100));\n        }\n    }\n}\n\nbutton.swatch--selected {\n    box-shadow: var(--button-shadow-inset);\n\n    border-radius: 50%;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, createSwatch, Swatch } from './swatches';\nimport type { CustomPalette, CustomColorSwatch } from './color-picker.types';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-color-picker-palette',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n    /**\n     * Color value that is manually typed by the user\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * Label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Defines the number of columns in the color swatch grid.\n     * If not provided, it will default to the number of colors in the palette.\n     */\n    @Prop({ reflect: true })\n    public columnCount?: number;\n\n    /**\n     * Custom color palette to use instead of Lime palette. Internal prop passed from parent.\n     */\n    @Prop()\n    public palette?: CustomPalette;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    public render() {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return [\n            <div\n                class=\"color-picker-palette\"\n                style={{\n                    '--color-picker-column-count': `${this.getColumnCount()}`,\n                }}\n            >\n                {this.renderSwatches()}\n            </div>,\n            <div class=\"chosen-color-name\">\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                />\n                <div class=\"chosen-color-preview\" style={background} />\n            </div>,\n        ];\n    }\n\n    private renderSwatches = () => {\n        return this.getPalette().map(this.renderSwatchButton);\n    };\n\n    private getPalette(): Swatch[] {\n        if (this.usesCustomPalette()) {\n            return (this.palette || []).map((entry) => {\n                const normalized = this.normalizeEntry(entry);\n                return {\n                    name: normalized.name || normalized.value,\n                    value: normalized.value,\n                    disabled: normalized.disabled,\n                };\n            });\n        }\n\n        // Order default swatches by brightness first, then by color.\n        // This gives a more intuitive CSS grid layout logic, and\n        // enables adding the `columnCount` prop.\n        const swatches: Swatch[] = [];\n        for (const b of brightnesses) {\n            for (const color of colors) {\n                swatches.push(createSwatch(color, b));\n            }\n        }\n        return swatches;\n    }\n\n    private renderSwatchButton = (swatch: Swatch, index: number) => {\n        const isSelected = this.value === swatch.value;\n        const classList = {\n            swatch: true,\n            'swatch--selected': isSelected,\n            'custom-swatch': this.usesCustomPalette(),\n        };\n\n        return (\n            <button\n                class={classList}\n                style={{ '--limel-color-picker-swatch-color': swatch.value }}\n                title={swatch.name}\n                disabled={swatch.disabled}\n                data-index={index}\n                key={index}\n                onClick={this.handleSwatchClick(swatch.value)}\n            />\n        );\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n\n    private handleSwatchClick = (value: string) => (event: MouseEvent) => {\n        event.stopPropagation();\n        const newValue = this.value === value ? '' : value;\n        this.change.emit(newValue);\n    };\n\n    private normalizeEntry(\n        entry: string | CustomColorSwatch\n    ): CustomColorSwatch {\n        if (typeof entry === 'string') {\n            return { value: entry };\n        }\n        return entry;\n    }\n\n    private usesCustomPalette(): boolean {\n        return this.palette?.length > 0;\n    }\n\n    private getColumnCount(): number {\n        if (this.columnCount > 0) {\n            return this.columnCount;\n        }\n\n        // Default palette: fixed 20 columns (one per base color)\n        if (!this.usesCustomPalette()) {\n            return 20;\n        }\n\n        // Custom palette: span all provided swatches unless empty\n        const palette = this.getPalette();\n        return palette.length > 0 ? palette.length : 1;\n    }\n}\n"],"mappings":"kDAAO,MAAMA,EAAS,CAClB,MACA,OACA,UACA,SACA,SACA,SACA,OACA,MACA,OACA,OACA,QACA,OACA,QACA,SACA,QACA,SACA,QACA,QACA,OACA,YAGG,MAAMC,EAAe,CAAC,UAAW,QAAS,UAAW,OAAQ,U,SAepDC,EAAaC,EAAeC,GACxC,MAAO,WAAWD,KAASC,GAC/B,C,SAOgBC,EAAeF,EAAeC,GAC1C,MAAO,WAAWF,EAAaC,EAAOC,MAC1C,C,SAOgBE,EAAcH,EAAeC,GACzC,MAAO,GAAGD,KAASC,GACvB,C,SAOgBG,EAAaJ,EAAeC,GACxC,MAAO,CACHI,KAAMF,EAAcH,EAAOC,GAC3BK,MAAOJ,EAAeF,EAAOC,GAErC,CCtEA,MAAMM,EAAwB,whK,MCajBC,EAAO,M,wDAqERC,KAAAC,eAAiB,IACdD,KAAKE,aAAaC,IAAIH,KAAKI,oBA2B9BJ,KAAAI,mBAAqB,CAACC,EAAgBC,KAC1C,MAAMC,EAAaP,KAAKH,QAAUQ,EAAOR,MACzC,MAAMW,EAAY,CACdH,OAAQ,KACR,mBAAoBE,EACpB,gBAAiBP,KAAKS,qBAG1B,OACIC,EAAA,UACIC,MAAOH,EACPI,MAAO,CAAE,oCAAqCP,EAAOR,OACrDgB,MAAOR,EAAOT,KACdkB,SAAUT,EAAOS,SAAQ,aACbR,EACZS,IAAKT,EACLU,QAAShB,KAAKiB,kBAAkBZ,EAAOR,QACzC,EAIFG,KAAAkB,aAAgBC,IACpBA,EAAMC,kBACNpB,KAAKqB,OAAOC,KAAKH,EAAMI,OAAO,EAG1BvB,KAAAiB,kBAAqBpB,GAAmBsB,IAC5CA,EAAMC,kBACN,MAAMI,EAAWxB,KAAKH,QAAUA,EAAQ,GAAKA,EAC7CG,KAAKqB,OAAOC,KAAKE,EAAS,E,8IAlFvBC,SACH,MAAMC,EAAa1B,KAAKH,MAAQ,CAAE,eAAgBG,KAAKH,OAAU,GAEjE,MAAO,CACHa,EAAA,OACIC,MAAM,uBACNC,MAAO,CACH,8BAA+B,GAAGZ,KAAK2B,qBAG1C3B,KAAKC,kBAEVS,EAAA,OAAKC,MAAM,qBACPD,EAAA,qBACIkB,MAAO5B,KAAK4B,MACZC,WAAY7B,KAAK6B,WACjBhC,MAAOG,KAAKH,MACZiC,SAAU9B,KAAKkB,aACfa,SAAU/B,KAAK+B,WAEnBrB,EAAA,OAAKC,MAAM,uBAAuBC,MAAOc,K,CAS7CxB,aACJ,GAAIF,KAAKS,oBAAqB,CAC1B,OAAQT,KAAKgC,SAAW,IAAI7B,KAAK8B,IAC7B,MAAMC,EAAalC,KAAKmC,eAAeF,GACvC,MAAO,CACHrC,KAAMsC,EAAWtC,MAAQsC,EAAWrC,MACpCA,MAAOqC,EAAWrC,MAClBiB,SAAUoB,EAAWpB,SACxB,G,CAOT,MAAMsB,EAAqB,GAC3B,IAAK,MAAMC,KAAKhD,EAAc,CAC1B,IAAK,MAAME,KAASH,EAAQ,CACxBgD,EAASE,KAAK3C,EAAaJ,EAAO8C,G,EAG1C,OAAOD,C,CAmCHD,eACJF,GAEA,UAAWA,IAAU,SAAU,CAC3B,MAAO,CAAEpC,MAAOoC,E,CAEpB,OAAOA,C,CAGHxB,oB,MACJ,QAAO8B,EAAAvC,KAAKgC,WAAO,MAAAO,SAAA,SAAAA,EAAEC,QAAS,C,CAG1Bb,iBACJ,GAAI3B,KAAKyC,YAAc,EAAG,CACtB,OAAOzC,KAAKyC,W,CAIhB,IAAKzC,KAAKS,oBAAqB,CAC3B,OAAO,E,CAIX,MAAMuB,EAAUhC,KAAKE,aACrB,OAAO8B,EAAQQ,OAAS,EAAIR,EAAQQ,OAAS,C"}

package/dist/types/components/color-picker/color-picker-palette.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { FormComponent } from '../form/form.types';
+import type { CustomPalette } from './color-picker.types';
 /**
  * @private
  */
@@ -20,14 +21,27 @@ export declare class Palette implements FormComponent {
    * Set to `true` if a value is required
    */
   required: boolean;
+  /**
+   * Defines the number of columns in the color swatch grid.
+   * If not provided, it will default to the number of colors in the palette.
+   */
+  columnCount?: number;
+  /**
+   * Custom color palette to use instead of Lime palette. Internal prop passed from parent.
+   */
+  palette?: CustomPalette;
   /**
    * Emits chosen value to the parent component
    */
   change: EventEmitter<string>;
   render(): any[];
   private renderSwatches;
-  private renderSwatch;
+  private getPalette;
+  private renderSwatchButton;
   private handleChange;
-  private handleClick;
+  private handleSwatchClick;
+  private normalizeEntry;
+  private usesCustomPalette;
+  private getColumnCount;
 }
 //# sourceMappingURL=color-picker-palette.d.ts.map

package/dist/types/components/color-picker/color-picker.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { FormComponent } from '../form/form.types';
+import type { CustomColorSwatch } from './color-picker.types';
 /**
  * This component enables you to select a swatch from out color palette, simply
  * by clicking on it. You can then copy the css variable name of the chosen color
@@ -13,6 +14,7 @@ import { FormComponent } from '../form/form.types';
  *
  * @exampleComponent limel-example-color-picker
  * @exampleComponent limel-example-color-picker-readonly
+ * @exampleComponent limel-example-color-picker-custom-palette
  */
 export declare class ColorPicker implements FormComponent {
   /**
@@ -39,6 +41,18 @@ export declare class ColorPicker implements FormComponent {
    * Set to `true` if a value is readonly. This makes the component un-interactive.
    */
   readonly: boolean;
+  /**
+   * An array of either color value strings, or objects with a `name` and a `value`,
+   * which replaces the default palette. Any valid CSS color format is accepted as value
+   * (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).
+   */
+  palette?: Array<string | CustomColorSwatch>;
+  /**
+   * Defines the number of columns in the color swatch grid.
+   * If not provided, it will default to the number of colors in the palette;
+   * but stops at a maximum of 25 columns.
+   */
+  paletteColumnCount?: number;
   /**
    * Emits chosen value to the parent component
    */
@@ -47,7 +61,7 @@ export declare class ColorPicker implements FormComponent {
   componentDidRender(): void;
   private contentElement?;
   private shouldFocus;
-  render(): any[];
+  render(): any;
   private renderTooltip;
   private renderPickerPalette;
   private renderPickerTrigger;

package/dist/types/components/color-picker/color-picker.types.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Represents a single custom color swatch that can be supplied to the color picker.
+ * @public
+ */
+export interface CustomColorSwatch {
+  /**
+   * Human readable name used for tooltip / accessibility. If omitted, `value` is shown.
+   */
+  name?: string;
+  /**
+   * Any valid CSS color (hex, rgb[a], hsl[a], lab, lch, color-mix(), named, etc.).
+   */
+  value: string;
+  /**
+   * Disables the swatch when true.
+   */
+  disabled?: boolean;
+}
+/**
+ * A custom palette: each entry is either a color string or a structured swatch object.
+ * @public
+ */
+export type CustomPalette = Array<string | CustomColorSwatch>;
+//# sourceMappingURL=color-picker.types.d.ts.map

package/dist/types/components/color-picker/swatches.d.ts

@@ -1,13 +1,38 @@
 export declare const colors: string[];
 export declare const brightnesses: string[];
+export interface Swatch {
+  name: string;
+  value: string;
+  disabled?: boolean;
+}
 /**
+ * Returns the CSS variable name holding the RGB triplet for the color & brightness.
  *
+ * @param color the base color identifier (e.g. "red", "blue")
+ * @param brightness the brightness variant (e.g. "light", "default")
+ * @returns CSS variable name in the form --color-{color}-{brightness}
+ */
+export declare function getColorName(color: string, brightness: string): string;
+/**
+ * Swatch value: inline CSS color value in the required format: rgb(var(--color-*-*))
  * @param color
  * @param brightness
  */
-export declare function getColorName(color: string, brightness: string): string;
+export declare function getSwatchValue(color: string, brightness: string): string;
 /**
- *
+ * Swatch name: human readable label like "red default"
+ * @param color
+ * @param brightness
+ */
+export declare function getSwatchName(color: string, brightness: string): string;
+/**
+ * Convenience factory returning both name & value.
+ * @param color
+ * @param brightness
+ */
+export declare function createSwatch(color: string, brightness: string): Swatch;
+/**
+ * Returns the CSS color value for the given color and brightness.
  * @param color
  * @param brightness
  */

package/dist/types/components.d.ts

@@ -23,6 +23,7 @@ import { MenuItem as MenuItem1 } from "./components";
 import { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 import { ColorScheme, Language } from "./components/code-editor/code-editor.types";
 import { Action } from "./components/collapsible-section/action";
+import { CustomColorSwatch, CustomPalette } from "./components/color-picker/color-picker.types";
 import { Config } from "./global/config";
 import { ClosingActions, DialogHeading } from "./components/dialog/dialog.types";
 import { DockItem } from "./components/dock/dock.types";
@@ -66,6 +67,7 @@ export { MenuItem as MenuItem1 } from "./components";
 export { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 export { ColorScheme, Language } from "./components/code-editor/code-editor.types";
 export { Action } from "./components/collapsible-section/action";
+export { CustomColorSwatch, CustomPalette } from "./components/color-picker/color-picker.types";
 export { Config } from "./global/config";
 export { ClosingActions, DialogHeading } from "./components/dialog/dialog.types";
 export { DockItem } from "./components/dock/dock.types";
@@ -947,6 +949,7 @@ export namespace Components {
      * :::
      * @exampleComponent limel-example-color-picker
      * @exampleComponent limel-example-color-picker-readonly
+     * @exampleComponent limel-example-color-picker-custom-palette
      */
     interface LimelColorPicker {
         /**
@@ -957,6 +960,14 @@ export namespace Components {
           * The label of the input field
          */
         "label": string;
+        /**
+          * An array of either color value strings, or objects with a `name` and a `value`, which replaces the default palette. Any valid CSS color format is accepted as value (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).
+         */
+        "palette"?: Array<string | CustomColorSwatch>;
+        /**
+          * Defines the number of columns in the color swatch grid. If not provided, it will default to the number of colors in the palette; but stops at a maximum of 25 columns.
+         */
+        "paletteColumnCount"?: number;
         /**
           * Set to `true` if a value is readonly. This makes the component un-interactive.
          */
@@ -978,6 +989,10 @@ export namespace Components {
      * @private 
      */
     interface LimelColorPickerPalette {
+        /**
+          * Defines the number of columns in the color swatch grid. If not provided, it will default to the number of colors in the palette.
+         */
+        "columnCount"?: number;
         /**
           * Helper text of the input field
          */
@@ -986,6 +1001,10 @@ export namespace Components {
           * Label of the input field
          */
         "label": string;
+        /**
+          * Custom color palette to use instead of Lime palette. Internal prop passed from parent.
+         */
+        "palette"?: CustomPalette;
         /**
           * Set to `true` if a value is required
          */
@@ -3865,6 +3884,7 @@ declare global {
      * :::
      * @exampleComponent limel-example-color-picker
      * @exampleComponent limel-example-color-picker-readonly
+     * @exampleComponent limel-example-color-picker-custom-palette
      */
     interface HTMLLimelColorPickerElement extends Components.LimelColorPicker, HTMLStencilElement {
     }
@@ -5975,6 +5995,7 @@ declare namespace LocalJSX {
      * :::
      * @exampleComponent limel-example-color-picker
      * @exampleComponent limel-example-color-picker-readonly
+     * @exampleComponent limel-example-color-picker-custom-palette
      */
     interface LimelColorPicker {
         /**
@@ -5989,6 +6010,14 @@ declare namespace LocalJSX {
           * Emits chosen value to the parent component
          */
         "onChange"?: (event: LimelColorPickerCustomEvent<string>) => void;
+        /**
+          * An array of either color value strings, or objects with a `name` and a `value`, which replaces the default palette. Any valid CSS color format is accepted as value (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).
+         */
+        "palette"?: Array<string | CustomColorSwatch>;
+        /**
+          * Defines the number of columns in the color swatch grid. If not provided, it will default to the number of colors in the palette; but stops at a maximum of 25 columns.
+         */
+        "paletteColumnCount"?: number;
         /**
           * Set to `true` if a value is readonly. This makes the component un-interactive.
          */
@@ -6010,6 +6039,10 @@ declare namespace LocalJSX {
      * @private 
      */
     interface LimelColorPickerPalette {
+        /**
+          * Defines the number of columns in the color swatch grid. If not provided, it will default to the number of colors in the palette.
+         */
+        "columnCount"?: number;
         /**
           * Helper text of the input field
          */
@@ -6022,6 +6055,10 @@ declare namespace LocalJSX {
           * Emits chosen value to the parent component
          */
         "onChange"?: (event: LimelColorPickerPaletteCustomEvent<string>) => void;
+        /**
+          * Custom color palette to use instead of Lime palette. Internal prop passed from parent.
+         */
+        "palette"?: CustomPalette;
         /**
           * Set to `true` if a value is required
          */
@@ -8984,6 +9021,7 @@ declare module "@stencil/core" {
              * :::
              * @exampleComponent limel-example-color-picker
              * @exampleComponent limel-example-color-picker-readonly
+             * @exampleComponent limel-example-color-picker-custom-palette
              */
             "limel-color-picker": LocalJSX.LimelColorPicker & JSXBase.HTMLAttributes<HTMLLimelColorPickerElement>;
             /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "38.24.5",
+  "version": "38.25.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-63f2f6b8.entry.js

@@ -1,2 +0,0 @@
-import{r,c as o,h as a}from"./p-288f0842.js";const l=["red","pink","magenta","purple","violet","indigo","blue","sky","cyan","teal","green","lime","grass","yellow","amber","orange","coral","brown","gray","glaucous"];const c=["lighter","light","default","dark","darker"];function e(r,o){return`--color-${r}-${o}`}function t(r,o){return`rgb(var(${e(r,o)}))`}const g='@charset "UTF-8";.color-palette{display:grid;gap:0.25rem;grid-auto-flow:column;margin:0.75rem auto 1.25rem auto;padding:1.25rem 0.75rem;background-color:rgb(var(--kompendium-contrast-300));border-radius:0.1875rem}.brightness-label,.swatch{display:flex;align-items:center;position:relative}.swatch{border-radius:3px;justify-content:center;color:rgba(var(--kompendium-color-white), 0.4);font-size:1.25rem;line-height:99%}.swatch:after{content:"";display:block;padding-top:100%}.swatch.hue{font-family:"Source Code Pro", monospace;font-size:0.75rem;position:relative;color:rgb(var(--kompendium-contrast-900));padding-top:0.5rem;writing-mode:vertical-lr;justify-content:left}.brightness-label{font-family:"Source Code Pro", monospace;font-size:0.75rem;color:rgb(var(--kompendium-contrast-900));justify-content:start}.--color-red-lighter{background-color:rgb(var(--color-red-lighter))}.--color-red-light{background-color:rgb(var(--color-red-light))}.--color-red-default{background-color:rgb(var(--color-red-default))}.--color-red-dark{background-color:rgb(var(--color-red-dark))}.--color-red-darker{background-color:rgb(var(--color-red-darker))}.--color-pink-lighter{background-color:rgb(var(--color-pink-lighter))}.--color-pink-light{background-color:rgb(var(--color-pink-light))}.--color-pink-default{background-color:rgb(var(--color-pink-default))}.--color-pink-dark{background-color:rgb(var(--color-pink-dark))}.--color-pink-darker{background-color:rgb(var(--color-pink-darker))}.--color-magenta-lighter{background-color:rgb(var(--color-magenta-lighter))}.--color-magenta-light{background-color:rgb(var(--color-magenta-light))}.--color-magenta-default{background-color:rgb(var(--color-magenta-default))}.--color-magenta-dark{background-color:rgb(var(--color-magenta-dark))}.--color-magenta-darker{background-color:rgb(var(--color-magenta-darker))}.--color-purple-lighter{background-color:rgb(var(--color-purple-lighter))}.--color-purple-light{background-color:rgb(var(--color-purple-light))}.--color-purple-default{background-color:rgb(var(--color-purple-default))}.--color-purple-dark{background-color:rgb(var(--color-purple-dark))}.--color-purple-darker{background-color:rgb(var(--color-purple-darker))}.--color-violet-lighter{background-color:rgb(var(--color-violet-lighter))}.--color-violet-light{background-color:rgb(var(--color-violet-light))}.--color-violet-default{background-color:rgb(var(--color-violet-default))}.--color-violet-dark{background-color:rgb(var(--color-violet-dark))}.--color-violet-darker{background-color:rgb(var(--color-violet-darker))}.--color-indigo-lighter{background-color:rgb(var(--color-indigo-lighter))}.--color-indigo-light{background-color:rgb(var(--color-indigo-light))}.--color-indigo-default{background-color:rgb(var(--color-indigo-default))}.--color-indigo-dark{background-color:rgb(var(--color-indigo-dark))}.--color-indigo-darker{background-color:rgb(var(--color-indigo-darker))}.--color-blue-lighter{background-color:rgb(var(--color-blue-lighter))}.--color-blue-light{background-color:rgb(var(--color-blue-light))}.--color-blue-default{background-color:rgb(var(--color-blue-default))}.--color-blue-dark{background-color:rgb(var(--color-blue-dark))}.--color-blue-darker{background-color:rgb(var(--color-blue-darker))}.--color-sky-lighter{background-color:rgb(var(--color-sky-lighter))}.--color-sky-light{background-color:rgb(var(--color-sky-light))}.--color-sky-default{background-color:rgb(var(--color-sky-default))}.--color-sky-dark{background-color:rgb(var(--color-sky-dark))}.--color-sky-darker{background-color:rgb(var(--color-sky-darker))}.--color-cyan-lighter{background-color:rgb(var(--color-cyan-lighter))}.--color-cyan-light{background-color:rgb(var(--color-cyan-light))}.--color-cyan-default{background-color:rgb(var(--color-cyan-default))}.--color-cyan-dark{background-color:rgb(var(--color-cyan-dark))}.--color-cyan-darker{background-color:rgb(var(--color-cyan-darker))}.--color-teal-lighter{background-color:rgb(var(--color-teal-lighter))}.--color-teal-light{background-color:rgb(var(--color-teal-light))}.--color-teal-default{background-color:rgb(var(--color-teal-default))}.--color-teal-dark{background-color:rgb(var(--color-teal-dark))}.--color-teal-darker{background-color:rgb(var(--color-teal-darker))}.--color-green-lighter{background-color:rgb(var(--color-green-lighter))}.--color-green-light{background-color:rgb(var(--color-green-light))}.--color-green-default{background-color:rgb(var(--color-green-default))}.--color-green-dark{background-color:rgb(var(--color-green-dark))}.--color-green-darker{background-color:rgb(var(--color-green-darker))}.--color-lime-lighter{background-color:rgb(var(--color-lime-lighter))}.--color-lime-light{background-color:rgb(var(--color-lime-light))}.--color-lime-default{background-color:rgb(var(--color-lime-default))}.--color-lime-dark{background-color:rgb(var(--color-lime-dark))}.--color-lime-darker{background-color:rgb(var(--color-lime-darker))}.--color-grass-lighter{background-color:rgb(var(--color-grass-lighter))}.--color-grass-light{background-color:rgb(var(--color-grass-light))}.--color-grass-default{background-color:rgb(var(--color-grass-default))}.--color-grass-dark{background-color:rgb(var(--color-grass-dark))}.--color-grass-darker{background-color:rgb(var(--color-grass-darker))}.--color-yellow-lighter{background-color:rgb(var(--color-yellow-lighter))}.--color-yellow-light{background-color:rgb(var(--color-yellow-light))}.--color-yellow-default{background-color:rgb(var(--color-yellow-default))}.--color-yellow-dark{background-color:rgb(var(--color-yellow-dark))}.--color-yellow-darker{background-color:rgb(var(--color-yellow-darker))}.--color-amber-lighter{background-color:rgb(var(--color-amber-lighter))}.--color-amber-light{background-color:rgb(var(--color-amber-light))}.--color-amber-default{background-color:rgb(var(--color-amber-default))}.--color-amber-dark{background-color:rgb(var(--color-amber-dark))}.--color-amber-darker{background-color:rgb(var(--color-amber-darker))}.--color-orange-lighter{background-color:rgb(var(--color-orange-lighter))}.--color-orange-light{background-color:rgb(var(--color-orange-light))}.--color-orange-default{background-color:rgb(var(--color-orange-default))}.--color-orange-dark{background-color:rgb(var(--color-orange-dark))}.--color-orange-darker{background-color:rgb(var(--color-orange-darker))}.--color-coral-lighter{background-color:rgb(var(--color-coral-lighter))}.--color-coral-light{background-color:rgb(var(--color-coral-light))}.--color-coral-default{background-color:rgb(var(--color-coral-default))}.--color-coral-dark{background-color:rgb(var(--color-coral-dark))}.--color-coral-darker{background-color:rgb(var(--color-coral-darker))}.--color-brown-lighter{background-color:rgb(var(--color-brown-lighter))}.--color-brown-light{background-color:rgb(var(--color-brown-light))}.--color-brown-default{background-color:rgb(var(--color-brown-default))}.--color-brown-dark{background-color:rgb(var(--color-brown-dark))}.--color-brown-darker{background-color:rgb(var(--color-brown-darker))}.--color-gray-lighter{background-color:rgb(var(--color-gray-lighter))}.--color-gray-light{background-color:rgb(var(--color-gray-light))}.--color-gray-default{background-color:rgb(var(--color-gray-default))}.--color-gray-dark{background-color:rgb(var(--color-gray-dark))}.--color-gray-darker{background-color:rgb(var(--color-gray-darker))}.--color-glaucous-lighter{background-color:rgb(var(--color-glaucous-lighter))}.--color-glaucous-light{background-color:rgb(var(--color-glaucous-light))}.--color-glaucous-default{background-color:rgb(var(--color-glaucous-default))}.--color-glaucous-dark{background-color:rgb(var(--color-glaucous-dark))}.--color-glaucous-darker{background-color:rgb(var(--color-glaucous-darker))}.--contrast-100{color:rgb(var(--contrast-900));background-color:rgb(var(--contrast-100))}.--contrast-200{color:rgb(var(--contrast-1000));background-color:rgb(var(--contrast-200))}.--contrast-300{color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-300))}.--contrast-400{color:rgb(var(--contrast-1200));background-color:rgb(var(--contrast-400))}.--contrast-500{color:rgb(var(--contrast-1300));background-color:rgb(var(--contrast-500))}.--contrast-600{color:rgb(var(--contrast-1400));background-color:rgb(var(--contrast-600))}.--contrast-700{color:rgb(var(--contrast-1500));background-color:rgb(var(--contrast-700))}.--contrast-800{color:rgb(var(--contrast-1600));background-color:rgb(var(--contrast-800))}.--contrast-900{color:rgb(var(--contrast-1700));background-color:rgb(var(--contrast-900))}.--contrast-1000{color:rgb(var(--contrast-100));background-color:rgb(var(--contrast-1000))}.--contrast-1100{color:rgb(var(--contrast-200));background-color:rgb(var(--contrast-1100))}.--contrast-1200{color:rgb(var(--contrast-300));background-color:rgb(var(--contrast-1200))}.--contrast-1300{color:rgb(var(--contrast-400));background-color:rgb(var(--contrast-1300))}.--contrast-1400{color:rgb(var(--contrast-500));background-color:rgb(var(--contrast-1400))}.--contrast-1500{color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-1500))}.--contrast-1600{color:rgb(var(--contrast-700));background-color:rgb(var(--contrast-1600))}.--contrast-1700{color:rgb(var(--contrast-800));background-color:rgb(var(--contrast-1700))}.--color-white{color:rgb(var(--color-black));background-color:rgb(var(--color-white))}.--color-black{color:rgb(var(--color-white));background-color:rgb(var(--color-black))}.color-palette{grid-template-rows:repeat(5, 1fr) auto;grid-template-columns:repeat(20, 1fr) auto}.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host{position:relative;--popover-surface-width:50rem}.color-picker{display:grid;gap:0.25rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.picker-trigger:hover,.picker-trigger:focus,.picker-trigger:focus-visible{will-change:color, background-color, box-shadow, transform}.picker-trigger:hover,.picker-trigger:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.picker-trigger:hover,.picker-trigger:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:"";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20style%3D%27fill-rule%3Aevenodd%3B%27%3E%3Cpath%20fill%3D%27rgba(186%2C186%2C192%2C0.16)%27%20d%3D%27M0%200h4v4H0zM4%204h4v4H4z%27%2F%3E%3C%2Fsvg%3E");background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4))}:host{border-radius:0.75rem;background-color:rgb(var(--kompendium-contrast-300))}.color-picker-palette{display:grid;gap:0.25rem;grid-auto-flow:column;grid-template-columns:repeat(20, 1fr);grid-template-rows:repeat(4, 1fr) auto;margin:1rem}.chosen-color-name{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:1fr auto;gap:0.5rem}.chosen-color-preview{border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.swatch:not(.hue){border:none;aspect-ratio:1;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer}.swatch:not(.hue):focus{outline:none}.swatch:not(.hue):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.swatch:not(.hue):hover{box-shadow:var(--button-shadow-hovered)}.swatch:not(.hue):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.swatch:not(.hue):focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.25rem rgb(var(--contrast-100)) inset}.swatch--selected{border-radius:50%}';const n=class{constructor(g){r(this,g);this.change=o(this,"change",7);this.renderSwatches=()=>l.map((r=>c.map(this.renderSwatch(r))));this.renderSwatch=r=>o=>{const l=e(r,o);const c={swatch:true,[l]:true,"swatch--selected":this.value===t(r,o)};return a("button",{class:c,onClick:this.handleClick(r,o)})};this.handleChange=r=>{r.stopPropagation();this.change.emit(r.detail)};this.handleClick=(r,o)=>a=>{const l=t(r,o);a.stopPropagation();this.change.emit(l)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.required=undefined}render(){const r=this.value?{"--background":this.value}:{};return[a("div",{class:"color-picker-palette"},this.renderSwatches()),a("div",{class:"chosen-color-name"},a("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required}),a("div",{class:"chosen-color-preview",style:r}))]}static get delegatesFocus(){return true}};n.style=g;export{n as limel_color_picker_palette};
-//# sourceMappingURL=p-63f2f6b8.entry.js.map

package/dist/lime-elements/p-63f2f6b8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["colors","brightnesses","getColorName","color","brightness","getCssColor","colorPickerPaletteCss","Palette","this","renderSwatches","map","renderSwatch","colorName","classList","swatch","value","h","class","onClick","handleClick","handleChange","event","stopPropagation","change","emit","detail","render","background","label","helperText","onChange","required","style"],"sources":["./src/components/color-picker/swatches.ts","./src/components/color-picker/color-picker-palette.scss?tag=limel-color-picker-palette&encapsulation=shadow","./src/components/color-picker/color-picker-palette.tsx"],"sourcesContent":["export const colors = [\n    'red',\n    'pink',\n    'magenta',\n    'purple',\n    'violet',\n    'indigo',\n    'blue',\n    'sky',\n    'cyan',\n    'teal',\n    'green',\n    'lime',\n    'grass',\n    'yellow',\n    'amber',\n    'orange',\n    'coral',\n    'brown',\n    'gray',\n    'glaucous',\n];\n\nexport const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];\n\n/**\n *\n * @param color\n * @param brightness\n */\nexport function getColorName(color: string, brightness: string): string {\n    return `--color-${color}-${brightness}`;\n}\n\n/**\n *\n * @param color\n * @param brightness\n */\nexport function getCssColor(color: string, brightness: string): string {\n    return `rgb(var(${getColorName(color, brightness)}))`;\n}\n","@use '../../design-guidelines/color-system/examples/extended-color-palette';\n@use '../../style/mixins';\n@import './color-picker';\n\n:host {\n    border-radius: 0.75rem; // is like popover's default `--popover-border-radius`\n    background-color: rgb(var(--kompendium-contrast-300));\n}\n\n.color-picker-palette {\n    display: grid;\n    gap: 0.25rem;\n    grid-auto-flow: column;\n    grid-template-columns: repeat(20, 1fr);\n    grid-template-rows: repeat(4, 1fr) auto;\n    margin: 1rem;\n}\n\n.chosen-color-name {\n    box-sizing: border-box;\n    padding: 1rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    gap: 0.5rem;\n}\n\n.chosen-color-preview {\n    border: 1px solid rgba(var(--contrast-700), 0.65); // color is the same as\n    // colors in shared_input-select-picker.scss\n    border-radius: 50%;\n}\n\n.swatch:not(.hue) {\n    border: none;\n    aspect-ratio: 1;\n\n    @include mixins.visualize-keyboard-focus();\n\n    // We could use the `@include mixins.is-flat-clickable();` mixin\n    // But its `background-color` arguments would interfere with the\n    // styles here. So we just copy/pasted the useful parts of the mixin here\n    transition:\n        color 0.2s ease,\n        background-color 0.2s ease,\n        box-shadow 0.2s ease,\n        transform 0.1s ease-out;\n\n    &:hover {\n        box-shadow: var(--button-shadow-hovered);\n    }\n\n    &:active {\n        box-shadow: var(--button-shadow-pressed);\n\n        transform: translate3d(0, 0.08rem, 0);\n    }\n    cursor: pointer;\n\n    &:focus-visible {\n        box-shadow:\n            var(--shadow-depth-8-focused),\n            0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n    }\n}\n\n.swatch--selected {\n    border-radius: 50%;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, getColorName, getCssColor } from './swatches';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-color-picker-palette',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n    /**\n     * Color value that is manually typed by the user\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * Label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    public render() {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return [\n            <div class=\"color-picker-palette\">{this.renderSwatches()}</div>,\n            <div class=\"chosen-color-name\">\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                />\n                <div class=\"chosen-color-preview\" style={background} />\n            </div>,\n        ];\n    }\n\n    private renderSwatches = () => {\n        return colors.map((color) => {\n            return brightnesses.map(this.renderSwatch(color));\n        });\n    };\n\n    private renderSwatch = (color: string) => (brightness: string) => {\n        const colorName = getColorName(color, brightness);\n        const classList = {\n            swatch: true,\n            [colorName]: true,\n            'swatch--selected': this.value === getCssColor(color, brightness),\n        };\n\n        return (\n            <button\n                class={classList}\n                onClick={this.handleClick(color, brightness)}\n            />\n        );\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n\n    private handleClick =\n        (color: string, brightness: string) => (event: MouseEvent) => {\n            const value = getCssColor(color, brightness);\n            event.stopPropagation();\n            this.change.emit(value);\n        };\n}\n"],"mappings":"6CAAO,MAAMA,EAAS,CAClB,MACA,OACA,UACA,SACA,SACA,SACA,OACA,MACA,OACA,OACA,QACA,OACA,QACA,SACA,QACA,SACA,QACA,QACA,OACA,YAGG,MAAMC,EAAe,CAAC,UAAW,QAAS,UAAW,OAAQ,U,SAOpDC,EAAaC,EAAeC,GACxC,MAAO,WAAWD,KAASC,GAC/B,C,SAOgBC,EAAYF,EAAeC,GACvC,MAAO,WAAWF,EAAaC,EAAOC,MAC1C,CCzCA,MAAME,EAAwB,wwc,MCYjBC,EAAO,M,wDAiDRC,KAAAC,eAAiB,IACdT,EAAOU,KAAKP,GACRF,EAAaS,IAAIF,KAAKG,aAAaR,MAI1CK,KAAAG,aAAgBR,GAAmBC,IACvC,MAAMQ,EAAYV,EAAaC,EAAOC,GACtC,MAAMS,EAAY,CACdC,OAAQ,KACRF,CAACA,GAAY,KACb,mBAAoBJ,KAAKO,QAAUV,EAAYF,EAAOC,IAG1D,OACIY,EAAA,UACIC,MAAOJ,EACPK,QAASV,KAAKW,YAAYhB,EAAOC,IACnC,EAIFI,KAAAY,aAAgBC,IACpBA,EAAMC,kBACNd,KAAKe,OAAOC,KAAKH,EAAMI,OAAO,EAG1BjB,KAAAW,YACJ,CAAChB,EAAeC,IAAwBiB,IACpC,MAAMN,EAAQV,EAAYF,EAAOC,GACjCiB,EAAMC,kBACNd,KAAKe,OAAOC,KAAKT,EAAM,E,4FAjDxBW,SACH,MAAMC,EAAanB,KAAKO,MAAQ,CAAE,eAAgBP,KAAKO,OAAU,GAEjE,MAAO,CACHC,EAAA,OAAKC,MAAM,wBAAwBT,KAAKC,kBACxCO,EAAA,OAAKC,MAAM,qBACPD,EAAA,qBACIY,MAAOpB,KAAKoB,MACZC,WAAYrB,KAAKqB,WACjBd,MAAOP,KAAKO,MACZe,SAAUtB,KAAKY,aACfW,SAAUvB,KAAKuB,WAEnBf,EAAA,OAAKC,MAAM,uBAAuBe,MAAOL,K"}

package/dist/lime-elements/p-bc5bbdf6.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as r,h as o}from"./p-288f0842.js";const i='@charset "UTF-8";.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host{position:relative;--popover-surface-width:50rem}.color-picker{display:grid;gap:0.25rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.picker-trigger:hover,.picker-trigger:focus,.picker-trigger:focus-visible{will-change:color, background-color, box-shadow, transform}.picker-trigger:hover,.picker-trigger:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.picker-trigger:hover,.picker-trigger:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:"";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20style%3D%27fill-rule%3Aevenodd%3B%27%3E%3Cpath%20fill%3D%27rgba(186%2C186%2C192%2C0.16)%27%20d%3D%27M0%200h4v4H0zM4%204h4v4H4z%27%2F%3E%3C%2Fsvg%3E");background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4))}';const t=class{constructor(i){e(this,i);this.change=r(this,"change",7);this.shouldFocus=false;this.renderTooltip=()=>{if(!this.readonly&&this.tooltipLabel){return o("limel-tooltip",{label:this.tooltipLabel,elementId:"tooltip-button"})}};this.renderPickerPalette=()=>{if(this.readonly){return this.renderPickerTrigger()}return o("limel-popover",{open:this.isOpen,openDirection:"bottom-start",onClose:this.onPopoverClose},this.renderPickerTrigger(),o("limel-color-picker-palette",{ref:this.setColorPickerPaletteElement,value:this.value,label:this.label,helperText:this.helperText,onChange:this.handleChange,required:this.required}))};this.renderPickerTrigger=()=>{const e=this.value?{"--background":this.value}:{};return o("button",{class:"picker-trigger",slot:"trigger",style:e,role:"button",onClick:this.openPopover,id:"tooltip-button"})};this.setColorPickerPaletteElement=e=>{this.contentElement=e};this.openPopover=e=>{e.stopPropagation();this.isOpen=true;this.shouldFocus=this.isOpen};this.onPopoverClose=e=>{e.stopPropagation();this.isOpen=false};this.handleChange=e=>{e.stopPropagation();this.change.emit(e.detail)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.tooltipLabel=undefined;this.required=undefined;this.readonly=undefined;this.isOpen=false}componentDidRender(){var e;if(this.shouldFocus&&this.isOpen){this.shouldFocus=false;(e=this.contentElement)===null||e===void 0?void 0:e.focus()}}render(){return[this.renderTooltip(),o("div",{class:"color-picker"},this.renderPickerPalette(),o("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required,readonly:this.readonly,class:"chosen-color-input"}))]}};t.style=i;export{t as limel_color_picker};
-//# sourceMappingURL=p-bc5bbdf6.entry.js.map

package/dist/lime-elements/p-bc5bbdf6.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["colorPickerCss","ColorPicker","this","shouldFocus","renderTooltip","readonly","tooltipLabel","h","label","elementId","renderPickerPalette","renderPickerTrigger","open","isOpen","openDirection","onClose","onPopoverClose","ref","setColorPickerPaletteElement","value","helperText","onChange","handleChange","required","background","class","slot","style","role","onClick","openPopover","id","element","contentElement","event","stopPropagation","change","emit","detail","componentDidRender","_a","focus","render"],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host {\n    position: relative;\n    --popover-surface-width: 50rem;\n}\n\n.color-picker {\n    display: grid;\n    gap: 0.25rem;\n    grid-template-columns: auto 1fr;\n}\n\n.picker-trigger {\n    all: unset;\n    border-radius: 0.5rem;\n    @include mixins.is-elevated-clickable();\n    @include mixins.visualize-keyboard-focus();\n\n    &:after {\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n    }\n}\n\n.chosen-color-preview,\n.picker-trigger {\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    width: shared_input-select-picker.$height-of-mdc-text-field;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        @include mixins.add-chessboard-background();\n        z-index: 0;\n    }\n\n    &:after {\n        background: var(--background);\n        z-index: 1;\n    }\n}\n\n:host([readonly]) {\n    .picker-trigger {\n        &:hover,\n        &:active {\n            cursor: default;\n            box-shadow: var(--button-shadow-normal);\n            transform: none;\n        }\n    }\n}\n\n.chosen-color-input[readonly] {\n    transform: translateX(\n            calc(\n                #{shared_input-select-picker.$height-of-mdc-text-field} / 4 * -1\n            )\n        )\n        translateY(\n            calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4)\n        );\n}\n","import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n */\n@Component({\n    tag: 'limel-color-picker',\n    shadow: true,\n    styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n    /**\n     * Name or code of the chosen color\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * The label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Displayed as tooltips when picker is hovered.\n     */\n    @Prop({ reflect: true })\n    public tooltipLabel: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Set to `true` if a value is readonly. This makes the component un-interactive.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    @State()\n    private isOpen = false;\n\n    public componentDidRender() {\n        if (this.shouldFocus && this.isOpen) {\n            this.shouldFocus = false;\n            this.contentElement?.focus();\n        }\n    }\n\n    private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n    private shouldFocus = false;\n\n    public render() {\n        return [\n            this.renderTooltip(),\n            <div class=\"color-picker\">\n                {this.renderPickerPalette()}\n\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    readonly={this.readonly}\n                    class=\"chosen-color-input\"\n                />\n            </div>,\n        ];\n    }\n    private renderTooltip = () => {\n        if (!this.readonly && this.tooltipLabel) {\n            return (\n                <limel-tooltip\n                    label={this.tooltipLabel}\n                    elementId=\"tooltip-button\"\n                />\n            );\n        }\n    };\n\n    private renderPickerPalette = () => {\n        if (this.readonly) {\n            return this.renderPickerTrigger();\n        }\n\n        return (\n            <limel-popover\n                open={this.isOpen}\n                openDirection=\"bottom-start\"\n                onClose={this.onPopoverClose}\n            >\n                {this.renderPickerTrigger()}\n                <limel-color-picker-palette\n                    ref={this.setColorPickerPaletteElement}\n                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    onChange={this.handleChange}\n                    required={this.required}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                class=\"picker-trigger\"\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n            />\n        );\n    };\n\n    private setColorPickerPaletteElement = (\n        element: HTMLLimelColorPickerPaletteElement\n    ) => {\n        this.contentElement = element;\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n\n        this.shouldFocus = this.isOpen;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"mappings":"kDAAA,MAAMA,EAAiB,45H,MCsBVC,EAAW,M,wDAuDZC,KAAAC,YAAc,MAoBdD,KAAAE,cAAgB,KACpB,IAAKF,KAAKG,UAAYH,KAAKI,aAAc,CACrC,OACIC,EAAA,iBACIC,MAAON,KAAKI,aACZG,UAAU,kB,GAMlBP,KAAAQ,oBAAsB,KAC1B,GAAIR,KAAKG,SAAU,CACf,OAAOH,KAAKS,qB,CAGhB,OACIJ,EAAA,iBACIK,KAAMV,KAAKW,OACXC,cAAc,eACdC,QAASb,KAAKc,gBAEbd,KAAKS,sBACNJ,EAAA,8BACIU,IAAKf,KAAKgB,6BACVC,MAAOjB,KAAKiB,MACZX,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBC,SAAUnB,KAAKoB,aACfC,SAAUrB,KAAKqB,WAEP,EAIhBrB,KAAAS,oBAAsB,KAC1B,MAAMa,EAAatB,KAAKiB,MAAQ,CAAE,eAAgBjB,KAAKiB,OAAU,GAEjE,OACIZ,EAAA,UACIkB,MAAM,iBACNC,KAAK,UACLC,MAAOH,EACPI,KAAK,SACLC,QAAS3B,KAAK4B,YACdC,GAAG,kBACL,EAIF7B,KAAAgB,6BACJc,IAEA9B,KAAK+B,eAAiBD,CAAO,EAGzB9B,KAAA4B,YAAeI,IACnBA,EAAMC,kBACNjC,KAAKW,OAAS,KAEdX,KAAKC,YAAcD,KAAKW,MAAM,EAG1BX,KAAAc,eAAkBkB,IACtBA,EAAMC,kBACNjC,KAAKW,OAAS,KAAK,EAGfX,KAAAoB,aAAgBY,IACpBA,EAAMC,kBACNjC,KAAKkC,OAAOC,KAAKH,EAAMI,OAAO,E,4JArGjB,K,CAEVC,qB,MACH,GAAIrC,KAAKC,aAAeD,KAAKW,OAAQ,CACjCX,KAAKC,YAAc,OACnBqC,EAAAtC,KAAK+B,kBAAc,MAAAO,SAAA,SAAAA,EAAEC,O,EAQtBC,SACH,MAAO,CACHxC,KAAKE,gBACLG,EAAA,OAAKkB,MAAM,gBACNvB,KAAKQ,sBAENH,EAAA,qBACIC,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBD,MAAOjB,KAAKiB,MACZE,SAAUnB,KAAKoB,aACfC,SAAUrB,KAAKqB,SACflB,SAAUH,KAAKG,SACfoB,MAAM,wB"}