@limetech/lime-elements 38.23.4 → 38.24.0

package/dist/lime-elements/{p-00aee6b6.entry.js → p-e7201ebd.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,c as t,h as e,H as s,g as n}from"./p-288f0842.js";import{t as r}from"./p-c8825e88.js";import{i as a}from"./p-fc998171.js";import{a as o,E as l}from"./p-aa25f475.js";const h='@charset "UTF-8";:host(limel-action-bar){--action-bar-item-height:2rem;--limel-action-bar-item-text-color:var(\n      --action-bar-item-text-color,\n      rgb(var(--contrast-1100))\n  );box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.25rem;max-width:100%;border-radius:var(--action-bar-border-radius);background-color:var(--action-bar-background-color, rgb(var(--contrast-100)));transition:max-width 0.3s ease}:host(limel-action-bar),.items{gap:0.25rem}@media (pointer: coarse){:host(limel-action-bar),.items{gap:0.5rem}}.items{display:inline-flex;max-width:100%;min-width:0}:host(limel-action-bar.is-shrunk) .items{opacity:0}:host(limel-action-bar:not(.is-shrunk)) .items{opacity:1}:host(limel-action-bar.is-full-width){width:100%}:host(limel-action-bar.is-floating){--action-bar-border-radius:100vw;border:1px solid rgb(var(--contrast-400));padding-right:0.125rem;padding-left:0.125rem;max-width:calc(100% - 2rem);box-shadow:var(--shadow-depth-16), var(--shadow-depth-8)}:host(limel-action-bar.is-shrunk){max-width:5rem;transition:max-width 0.3s ease-in-out}:host(limel-action-bar.is-shrunk) .expand-shrink{transition:transform 0.3s ease;transform:rotateY(180deg)}:host(limel-action-bar:not(.is-shrunk)){max-width:100%;transition:max-width 0.3s ease-in-out}:host(limel-action-bar:not(.is-shrunk)) .expand-shrink{transition:transform 0.3s ease;transform:rotateY(0deg)}:host(limel-action-bar.can-be-shrunk.is-full-width) .expand-shrink{margin-left:auto}.expand-shrink{all:unset;box-sizing:border-box;border-radius:50%;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:transparent;display:flex;justify-content:center;align-items:center}.expand-shrink:hover,.expand-shrink:focus,.expand-shrink:focus-visible{will-change:color, background-color, box-shadow, transform}.expand-shrink:hover,.expand-shrink:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.expand-shrink:hover{box-shadow:var(--button-shadow-hovered)}.expand-shrink: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)}.expand-shrink:hover,.expand-shrink:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.expand-shrink:focus{outline:none}.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.expand-shrink limel-icon{width:1.5rem;height:1.5rem;padding:0.125rem;color:var(--action-bar-shrink-icon-color, rgb(var(--contrast-1000)))}';const c=class{constructor(s){i(this,s);this.itemSelected=t(this,"itemSelected",7);this.hasRendered=false;this.isFirstIntersectionCheck=true;this.actionBarItems=[];this.renderActionBarItem=(i,t)=>e("limel-action-bar-item",{item:i,onSelect:this.handleSelect,isVisible:this.isVisible(t),role:"gridcell"});this.renderOverflowMenu=i=>{if(!(this.actions.length-this.overflowCutoff)){return}const t={name:"more",color:"rgb(var(--contrast-1000))",title:this.getTranslation("action-bar.actions")};return e("limel-action-bar-overflow-menu",{openDirection:this.openDirection,items:i,onSelect:this.handleSelect,role:"gridcell",overFlowIcon:this.actionBarIsShrunk?t:undefined})};this.handleCollapseExpandClick=()=>{this.actionBarIsShrunk=!this.actionBarIsShrunk};this.handleSelect=i=>{i.stopPropagation();if(a(i.detail)){this.itemSelected.emit(i.detail)}};this.getTranslation=i=>r.get(i,this.language);this.handleIntersection=i=>{const t=i.filter((i=>i.isIntersecting));const e=i.filter((i=>!i.isIntersecting));if(this.isFirstIntersectionCheck){this.overflowCutoff=t.length}else{this.overflowCutoff=this.overflowCutoff+t.length-e.length}this.isFirstIntersectionCheck=false};this.actions=[];this.language=document.documentElement.lang;this.accessibleLabel=undefined;this.layout=undefined;this.collapsible=false;this.openDirection=undefined;this.overflowCutoff=this.actions.length;this.actionBarIsShrunk=false}connectedCallback(){if(this.hasRendered){this.createIntersectionObserver()}}componentDidRender(){var i;if(this.haveItemsChanged()){(i=this.intersectionObserver)===null||i===void 0?void 0:i.disconnect();this.createIntersectionObserver()}}disconnectedCallback(){var i;(i=this.intersectionObserver)===null||i===void 0?void 0:i.disconnect();this.intersectionObserver=undefined;this.actionBarItems=[]}render(){this.hasRendered=true;let i=[];if(this.actions.length>0){i=this.actions.slice(this.overflowCutoff)}return e(s,{"aria-label":this.accessibleLabel,class:{"is-full-width":this.layout==="fullWidth","is-floating":this.layout==="floating","is-shrunk":this.actionBarIsShrunk&&this.collapsible,"can-be-shrunk":!!this.collapsible},role:"grid"},e("div",{class:"items",role:"rowgroup"},this.actions.map(this.renderActionBarItem)),this.renderOverflowMenu(i),this.renderCollapseExpandButton())}renderCollapseExpandButton(){if(!this.collapsible||this.actions.length<=1){return}return e("button",{class:{"expand-shrink":true},"aria-label":this.tooltipLabel,type:"button",onClick:this.handleCollapseExpandClick},e("limel-icon",{name:"double_left",id:"tooltip-expand-shrink-button"}),e("limel-tooltip",{label:this.tooltipLabel,elementId:"tooltip-expand-shrink-button"}))}isVisible(i){return i<this.overflowCutoff}get tooltipLabel(){let i="action-bar.collapse";if(this.actionBarIsShrunk){i="action-bar.expand"}return this.getTranslation(i)}createIntersectionObserver(){const i={root:this.host.shadowRoot.querySelector(".items"),rootMargin:"0px",threshold:1};this.overflowCutoff=this.actions.length;this.isFirstIntersectionCheck=true;this.actionBarItems=[];this.intersectionObserver=new IntersectionObserver(this.handleIntersection,i);for(const i of this.host.shadowRoot.querySelectorAll("limel-action-bar-item")){this.observe(i)}}observe(i){this.intersectionObserver.observe(i);this.actionBarItems.push(i)}haveItemsChanged(){const i=this.actionBarItems.some((i=>!this.host.shadowRoot.contains(i)));const t=[...this.host.shadowRoot.querySelectorAll("limel-action-bar-item")].some((i=>!this.actionBarItems.includes(i)));return i||t}get host(){return n(this)}};c.style=h;const d=":host(limel-text-editor-link-menu){animation:fade 0.2s ease forwards;animation-delay:0.1s;opacity:0;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;max-width:calc(100vw - 2rem);border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--shadow-depth-16)}.actions{display:flex;justify-content:end;gap:0.5rem}@keyframes fade{0%{scale:0.86;opacity:0}100%{scale:1;opacity:1}}";const m=class{constructor(e){i(this,e);this.cancel=t(this,"cancel",7);this.save=t(this,"save",7);this.linkChange=t(this,"linkChange",7);this.getTranslation=i=>r.get(i,this.language);this.isValid=i=>{try{new URL(i)}catch(i){return false}return true};this.handleKeyDown=i=>{var t;if(i.key!==o){return}if(this.saveButton){this.saveButton.focus()}i.preventDefault();if(this.isValid((t=this.link)===null||t===void 0?void 0:t.href)){this.handleSave(i)}};this.handleCancel=i=>{if(i instanceof KeyboardEvent&&i.key!==l){return}i.stopPropagation();i.preventDefault();this.cancel.emit()};this.handleSave=i=>{i.stopPropagation();this.save.emit()};this.handleLinkInputAction=i=>{window.open(this.link.href,"_blank");i.stopPropagation()};this.handleLinkTitleChange=i=>{var t;this.emitLinkChange(i.detail,(t=this.link)===null||t===void 0?void 0:t.href)};this.handleLinkValueChange=i=>{var t;const e=i.detail;this.emitLinkChange((t=this.link)===null||t===void 0?void 0:t.text,e)};this.emitLinkChange=(i,t)=>{const e={text:i,href:t};this.linkChange.emit(e)};this.link=undefined;this.language="en";this.isOpen=false}connectedCallback(){this.setupGlobalHandlers()}disconnectedCallback(){this.teardownGlobalHandlers()}setupGlobalHandlers(){if(this.isOpen){document.addEventListener("keyup",this.handleCancel)}}teardownGlobalHandlers(){document.removeEventListener("keyup",this.handleCancel)}componentDidLoad(){this.focusOnTextInput()}focusOnTextInput(){if(this.textInput){const i=this.textInput.shadowRoot.querySelector("input");if(i){requestAnimationFrame((()=>{i.focus()}))}}}render(){var i,t;const s=this.isValid(this.link.href);return[e("limel-input-field",{label:this.getTranslation("editor-link-menu.text"),value:((i=this.link)===null||i===void 0?void 0:i.text)||"",leadingIcon:"text_cursor",onChange:this.handleLinkTitleChange,onKeyDown:this.handleKeyDown,ref:i=>this.textInput=i}),e("limel-input-field",{label:this.getTranslation("editor-link-menu.link"),value:((t=this.link)===null||t===void 0?void 0:t.href)||"",type:"text",leadingIcon:"-lime-text-link",trailingIcon:"external_link",invalid:!s,onChange:this.handleLinkValueChange,onAction:this.handleLinkInputAction,onKeyDown:this.handleKeyDown}),e("div",{class:"actions"},e("limel-button",{label:this.getTranslation("cancel"),onClick:this.handleCancel}),e("limel-button",{primary:true,label:this.getTranslation("save"),disabled:!s,onClick:this.handleSave,ref:i=>this.saveButton=i,slot:"button"}))]}};m.style=d;export{c as limel_action_bar,m as limel_text_editor_link_menu};
-//# sourceMappingURL=p-00aee6b6.entry.js.map
+import{r as i,c as t,h as e,H as s,g as n}from"./p-288f0842.js";import{t as r}from"./p-58777116.js";import{i as a}from"./p-fc998171.js";import{a as o,E as l}from"./p-aa25f475.js";const h='@charset "UTF-8";:host(limel-action-bar){--action-bar-item-height:2rem;--limel-action-bar-item-text-color:var(\n      --action-bar-item-text-color,\n      rgb(var(--contrast-1100))\n  );box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.25rem;max-width:100%;border-radius:var(--action-bar-border-radius);background-color:var(--action-bar-background-color, rgb(var(--contrast-100)));transition:max-width 0.3s ease}:host(limel-action-bar),.items{gap:0.25rem}@media (pointer: coarse){:host(limel-action-bar),.items{gap:0.5rem}}.items{display:inline-flex;max-width:100%;min-width:0}:host(limel-action-bar.is-shrunk) .items{opacity:0}:host(limel-action-bar:not(.is-shrunk)) .items{opacity:1}:host(limel-action-bar.is-full-width){width:100%}:host(limel-action-bar.is-floating){--action-bar-border-radius:100vw;border:1px solid rgb(var(--contrast-400));padding-right:0.125rem;padding-left:0.125rem;max-width:calc(100% - 2rem);box-shadow:var(--shadow-depth-16), var(--shadow-depth-8)}:host(limel-action-bar.is-shrunk){max-width:5rem;transition:max-width 0.3s ease-in-out}:host(limel-action-bar.is-shrunk) .expand-shrink{transition:transform 0.3s ease;transform:rotateY(180deg)}:host(limel-action-bar:not(.is-shrunk)){max-width:100%;transition:max-width 0.3s ease-in-out}:host(limel-action-bar:not(.is-shrunk)) .expand-shrink{transition:transform 0.3s ease;transform:rotateY(0deg)}:host(limel-action-bar.can-be-shrunk.is-full-width) .expand-shrink{margin-left:auto}.expand-shrink{all:unset;box-sizing:border-box;border-radius:50%;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:transparent;display:flex;justify-content:center;align-items:center}.expand-shrink:hover,.expand-shrink:focus,.expand-shrink:focus-visible{will-change:color, background-color, box-shadow, transform}.expand-shrink:hover,.expand-shrink:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.expand-shrink:hover{box-shadow:var(--button-shadow-hovered)}.expand-shrink: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)}.expand-shrink:hover,.expand-shrink:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.expand-shrink:focus{outline:none}.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.expand-shrink limel-icon{width:1.5rem;height:1.5rem;padding:0.125rem;color:var(--action-bar-shrink-icon-color, rgb(var(--contrast-1000)))}';const c=class{constructor(s){i(this,s);this.itemSelected=t(this,"itemSelected",7);this.hasRendered=false;this.isFirstIntersectionCheck=true;this.actionBarItems=[];this.renderActionBarItem=(i,t)=>e("limel-action-bar-item",{item:i,onSelect:this.handleSelect,isVisible:this.isVisible(t),role:"gridcell"});this.renderOverflowMenu=i=>{if(!(this.actions.length-this.overflowCutoff)){return}const t={name:"more",color:"rgb(var(--contrast-1000))",title:this.getTranslation("action-bar.actions")};return e("limel-action-bar-overflow-menu",{openDirection:this.openDirection,items:i,onSelect:this.handleSelect,role:"gridcell",overFlowIcon:this.actionBarIsShrunk?t:undefined})};this.handleCollapseExpandClick=()=>{this.actionBarIsShrunk=!this.actionBarIsShrunk};this.handleSelect=i=>{i.stopPropagation();if(a(i.detail)){this.itemSelected.emit(i.detail)}};this.getTranslation=i=>r.get(i,this.language);this.handleIntersection=i=>{const t=i.filter((i=>i.isIntersecting));const e=i.filter((i=>!i.isIntersecting));if(this.isFirstIntersectionCheck){this.overflowCutoff=t.length}else{this.overflowCutoff=this.overflowCutoff+t.length-e.length}this.isFirstIntersectionCheck=false};this.actions=[];this.language=document.documentElement.lang;this.accessibleLabel=undefined;this.layout=undefined;this.collapsible=false;this.openDirection=undefined;this.overflowCutoff=this.actions.length;this.actionBarIsShrunk=false}connectedCallback(){if(this.hasRendered){this.createIntersectionObserver()}}componentDidRender(){var i;if(this.haveItemsChanged()){(i=this.intersectionObserver)===null||i===void 0?void 0:i.disconnect();this.createIntersectionObserver()}}disconnectedCallback(){var i;(i=this.intersectionObserver)===null||i===void 0?void 0:i.disconnect();this.intersectionObserver=undefined;this.actionBarItems=[]}render(){this.hasRendered=true;let i=[];if(this.actions.length>0){i=this.actions.slice(this.overflowCutoff)}return e(s,{"aria-label":this.accessibleLabel,class:{"is-full-width":this.layout==="fullWidth","is-floating":this.layout==="floating","is-shrunk":this.actionBarIsShrunk&&this.collapsible,"can-be-shrunk":!!this.collapsible},role:"grid"},e("div",{class:"items",role:"rowgroup"},this.actions.map(this.renderActionBarItem)),this.renderOverflowMenu(i),this.renderCollapseExpandButton())}renderCollapseExpandButton(){if(!this.collapsible||this.actions.length<=1){return}return e("button",{class:{"expand-shrink":true},"aria-label":this.tooltipLabel,type:"button",onClick:this.handleCollapseExpandClick},e("limel-icon",{name:"double_left",id:"tooltip-expand-shrink-button"}),e("limel-tooltip",{label:this.tooltipLabel,elementId:"tooltip-expand-shrink-button"}))}isVisible(i){return i<this.overflowCutoff}get tooltipLabel(){let i="action-bar.collapse";if(this.actionBarIsShrunk){i="action-bar.expand"}return this.getTranslation(i)}createIntersectionObserver(){const i={root:this.host.shadowRoot.querySelector(".items"),rootMargin:"0px",threshold:1};this.overflowCutoff=this.actions.length;this.isFirstIntersectionCheck=true;this.actionBarItems=[];this.intersectionObserver=new IntersectionObserver(this.handleIntersection,i);for(const i of this.host.shadowRoot.querySelectorAll("limel-action-bar-item")){this.observe(i)}}observe(i){this.intersectionObserver.observe(i);this.actionBarItems.push(i)}haveItemsChanged(){const i=this.actionBarItems.some((i=>!this.host.shadowRoot.contains(i)));const t=[...this.host.shadowRoot.querySelectorAll("limel-action-bar-item")].some((i=>!this.actionBarItems.includes(i)));return i||t}get host(){return n(this)}};c.style=h;const d=":host(limel-text-editor-link-menu){animation:fade 0.2s ease forwards;animation-delay:0.1s;opacity:0;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;max-width:calc(100vw - 2rem);border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--shadow-depth-16)}.actions{display:flex;justify-content:end;gap:0.5rem}@keyframes fade{0%{scale:0.86;opacity:0}100%{scale:1;opacity:1}}";const m=class{constructor(e){i(this,e);this.cancel=t(this,"cancel",7);this.save=t(this,"save",7);this.linkChange=t(this,"linkChange",7);this.getTranslation=i=>r.get(i,this.language);this.isValid=i=>{try{new URL(i)}catch(i){return false}return true};this.handleKeyDown=i=>{var t;if(i.key!==o){return}if(this.saveButton){this.saveButton.focus()}i.preventDefault();if(this.isValid((t=this.link)===null||t===void 0?void 0:t.href)){this.handleSave(i)}};this.handleCancel=i=>{if(i instanceof KeyboardEvent&&i.key!==l){return}i.stopPropagation();i.preventDefault();this.cancel.emit()};this.handleSave=i=>{i.stopPropagation();this.save.emit()};this.handleLinkInputAction=i=>{window.open(this.link.href,"_blank");i.stopPropagation()};this.handleLinkTitleChange=i=>{var t;this.emitLinkChange(i.detail,(t=this.link)===null||t===void 0?void 0:t.href)};this.handleLinkValueChange=i=>{var t;const e=i.detail;this.emitLinkChange((t=this.link)===null||t===void 0?void 0:t.text,e)};this.emitLinkChange=(i,t)=>{const e={text:i,href:t};this.linkChange.emit(e)};this.link=undefined;this.language="en";this.isOpen=false}connectedCallback(){this.setupGlobalHandlers()}disconnectedCallback(){this.teardownGlobalHandlers()}setupGlobalHandlers(){if(this.isOpen){document.addEventListener("keyup",this.handleCancel)}}teardownGlobalHandlers(){document.removeEventListener("keyup",this.handleCancel)}componentDidLoad(){this.focusOnTextInput()}focusOnTextInput(){if(this.textInput){const i=this.textInput.shadowRoot.querySelector("input");if(i){requestAnimationFrame((()=>{i.focus()}))}}}render(){var i,t;const s=this.isValid(this.link.href);return[e("limel-input-field",{label:this.getTranslation("editor-link-menu.text"),value:((i=this.link)===null||i===void 0?void 0:i.text)||"",leadingIcon:"text_cursor",onChange:this.handleLinkTitleChange,onKeyDown:this.handleKeyDown,ref:i=>this.textInput=i}),e("limel-input-field",{label:this.getTranslation("editor-link-menu.link"),value:((t=this.link)===null||t===void 0?void 0:t.href)||"",type:"text",leadingIcon:"-lime-text-link",trailingIcon:"external_link",invalid:!s,onChange:this.handleLinkValueChange,onAction:this.handleLinkInputAction,onKeyDown:this.handleKeyDown}),e("div",{class:"actions"},e("limel-button",{label:this.getTranslation("cancel"),onClick:this.handleCancel}),e("limel-button",{primary:true,label:this.getTranslation("save"),disabled:!s,onClick:this.handleSave,ref:i=>this.saveButton=i,slot:"button"}))]}};m.style=d;export{c as limel_action_bar,m as limel_text_editor_link_menu};
+//# sourceMappingURL=p-e7201ebd.entry.js.map

package/dist/types/components/profile-picture/profile-picture.d.ts

@@ -0,0 +1,126 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { FileInfo } from '../../global/shared-types/file.types';
+import { Icon } from '../../global/shared-types/icon.types';
+import { Languages } from '../date-picker/date.types';
+import { ResizeOptions } from '../../util/image-resize';
+/**
+ * This component displays a profile picture, while allowing the user
+ * to change it via a file input or drag-and-drop.
+ *
+ * It supports client-side image resizing and conversion,
+ * as well as a simple lazy-loading mechanism.
+ *
+ * @exampleComponent limel-example-profile-picture-basic
+ * @exampleComponent limel-example-profile-picture-helper-text
+ * @exampleComponent limel-example-profile-picture-icon
+ * @exampleComponent limel-example-profile-picture-with-value
+ * @exampleComponent limel-example-profile-picture-loading
+ * @exampleComponent limel-example-profile-picture-image-fit
+ * @exampleComponent limel-example-profile-picture-composite
+ * @exampleComponent limel-example-profile-picture-resize-contain
+ * @exampleComponent limel-example-profile-picture-resize-cover
+ * @exampleComponent limel-example-profile-picture-resize-fallback
+ * @exampleComponent limel-example-profile-picture-styling
+ * @beta
+ */
+export declare class ProfilePicture {
+  /**
+   * Defines the language for translations.
+   * Will translate the translatable strings on the components.
+   */
+  language: Languages;
+  /**
+   * Accessible label for the the browse button.
+   */
+  label: string;
+  /**
+   * Placeholder icon of the component, displayed when no image is present.
+   */
+  icon: string | Icon;
+  /**
+   * Helper text shown as a tooltip on hover or focus.
+   */
+  helperText?: string;
+  /**
+   * Disables user interaction.
+   * Prevents uploading new pictures or removing existing ones.
+   */
+  disabled: boolean;
+  /**
+   * Readonly prevents changing the value but allows interaction like focus.
+   */
+  readonly: boolean;
+  /**
+   * Marks the control as required.
+   */
+  required: boolean;
+  /**
+   * Marks the control as invalid.
+   */
+  invalid: boolean;
+  /**
+   * Set to `true` to put the component in the `loading` state,
+   * and render an indeterminate progress indicator inside.
+   * This does _not_ disable the interactivity of the component!
+   */
+  loading: boolean;
+  /**
+   * Current image to display. Either a URL string or a `FileInfo` with an href.
+   */
+  value?: string | FileInfo;
+  /**
+   * How the image should fit within the container.
+   * - `cover` will fill the container and crop excess parts.
+   * - `contain` will scale the image to fit within the container without cropping.
+   */
+  imageFit: 'cover' | 'contain';
+  /**
+   * A comma-separated list of accepted file types.
+   */
+  accept: string;
+  /**
+   * Optional client-side resize before emitting the file.
+   * If provided, the selected image will be resized on the client device.
+   * :::note
+   * HEIC may not decode in all browsers; when decoding fails, the original
+   * file will be emitted. See the examples for more info.
+   * :::
+   */
+  resize?: ResizeOptions;
+  /**
+   * Emitted when the picture changes (first FileInfo only).
+   */
+  change: EventEmitter<FileInfo | undefined>;
+  /**
+   * Emitted when a file is rejected by accept filter.
+   */
+  filesRejected: EventEmitter<FileInfo[]>;
+  private objectUrl?;
+  private imageError;
+  private isErrorMessagePopoverOpen;
+  private removeButtonId;
+  private browseButtonId;
+  disconnectedCallback(): void;
+  protected handleValueChange(): void;
+  render(): any;
+  private get hasValue();
+  private renderBrowseButton;
+  private renderAvatar;
+  private renderIcon;
+  private renderClearButton;
+  private renderSpinner;
+  private renderHelperText;
+  private getUnsupportedPreviewContext;
+  private shouldShowErrorMessage;
+  private renderErrorMessage;
+  private handleNewFiles;
+  private handleRejectedFiles;
+  private getImageSrc;
+  private revokeObjectUrl;
+  private handleClear;
+  private onImageError;
+  private openPopover;
+  private onPopoverClose;
+  private getTranslation;
+}
+//# sourceMappingURL=profile-picture.d.ts.map

package/dist/types/components.d.ts

@@ -38,6 +38,7 @@ import { CustomElementDefinition } from "./global/shared-types/custom-element.ty
 import { PickerValue } from "./components/picker/value.types";
 import { Searcher } from "./components/picker/searcher.types";
 import { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types";
+import { ResizeOptions } from "./util/image-resize";
 import { FlowItem } from "./components/progress-flow/progress-flow.types";
 import { EditorImage, EditorMetadata, ImageInserter, TriggerCharacter, TriggerEventDetail } from "./components/text-editor/text-editor.types";
 import { EditorUiType } from "./components/text-editor/types";
@@ -80,6 +81,7 @@ export { CustomElementDefinition } from "./global/shared-types/custom-element.ty
 export { PickerValue } from "./components/picker/value.types";
 export { Searcher } from "./components/picker/searcher.types";
 export { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types";
+export { ResizeOptions } from "./util/image-resize";
 export { FlowItem } from "./components/progress-flow/progress-flow.types";
 export { EditorImage, EditorMetadata, ImageInserter, TriggerCharacter, TriggerEventDetail } from "./components/text-editor/text-editor.types";
 export { EditorUiType } from "./components/text-editor/types";
@@ -2304,6 +2306,78 @@ export namespace Components {
          */
         "visible": boolean;
     }
+    /**
+     * This component displays a profile picture, while allowing the user
+     * to change it via a file input or drag-and-drop.
+     * It supports client-side image resizing and conversion,
+     * as well as a simple lazy-loading mechanism.
+     * @exampleComponent limel-example-profile-picture-basic
+     * @exampleComponent limel-example-profile-picture-helper-text
+     * @exampleComponent limel-example-profile-picture-icon
+     * @exampleComponent limel-example-profile-picture-with-value
+     * @exampleComponent limel-example-profile-picture-loading
+     * @exampleComponent limel-example-profile-picture-image-fit
+     * @exampleComponent limel-example-profile-picture-composite
+     * @exampleComponent limel-example-profile-picture-resize-contain
+     * @exampleComponent limel-example-profile-picture-resize-cover
+     * @exampleComponent limel-example-profile-picture-resize-fallback
+     * @exampleComponent limel-example-profile-picture-styling
+     * @beta 
+     */
+    interface LimelProfilePicture {
+        /**
+          * A comma-separated list of accepted file types.
+         */
+        "accept": string;
+        /**
+          * Disables user interaction. Prevents uploading new pictures or removing existing ones.
+         */
+        "disabled": boolean;
+        /**
+          * Helper text shown as a tooltip on hover or focus.
+         */
+        "helperText"?: string;
+        /**
+          * Placeholder icon of the component, displayed when no image is present.
+         */
+        "icon": string | Icon;
+        /**
+          * How the image should fit within the container. - `cover` will fill the container and crop excess parts. - `contain` will scale the image to fit within the container without cropping.
+         */
+        "imageFit": 'cover' | 'contain';
+        /**
+          * Marks the control as invalid.
+         */
+        "invalid": boolean;
+        /**
+          * Accessible label for the the browse button.
+         */
+        "label": string;
+        /**
+          * Defines the language for translations. Will translate the translatable strings on the components.
+         */
+        "language": Languages;
+        /**
+          * Set to `true` to put the component in the `loading` state, and render an indeterminate progress indicator inside. This does _not_ disable the interactivity of the component!
+         */
+        "loading": boolean;
+        /**
+          * Readonly prevents changing the value but allows interaction like focus.
+         */
+        "readonly": boolean;
+        /**
+          * Marks the control as required.
+         */
+        "required": boolean;
+        /**
+          * Optional client-side resize before emitting the file. If provided, the selected image will be resized on the client device. :::note HEIC may not decode in all browsers; when decoding fails, the original file will be emitted. See the examples for more info. :::
+         */
+        "resize"?: ResizeOptions;
+        /**
+          * Current image to display. Either a URL string or a `FileInfo` with an href.
+         */
+        "value"?: string | FileInfo;
+    }
     /**
      * @exampleComponent limel-example-progress-flow-basic
      * @exampleComponent limel-example-progress-flow-secondary-text
@@ -3166,6 +3240,10 @@ export interface LimelPopoverCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelPopoverElement;
 }
+export interface LimelProfilePictureCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLimelProfilePictureElement;
+}
 export interface LimelProgressFlowCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelProgressFlowElement;
@@ -4371,6 +4449,30 @@ declare global {
         prototype: HTMLLimelPortalElement;
         new (): HTMLLimelPortalElement;
     };
+    /**
+     * This component displays a profile picture, while allowing the user
+     * to change it via a file input or drag-and-drop.
+     * It supports client-side image resizing and conversion,
+     * as well as a simple lazy-loading mechanism.
+     * @exampleComponent limel-example-profile-picture-basic
+     * @exampleComponent limel-example-profile-picture-helper-text
+     * @exampleComponent limel-example-profile-picture-icon
+     * @exampleComponent limel-example-profile-picture-with-value
+     * @exampleComponent limel-example-profile-picture-loading
+     * @exampleComponent limel-example-profile-picture-image-fit
+     * @exampleComponent limel-example-profile-picture-composite
+     * @exampleComponent limel-example-profile-picture-resize-contain
+     * @exampleComponent limel-example-profile-picture-resize-cover
+     * @exampleComponent limel-example-profile-picture-resize-fallback
+     * @exampleComponent limel-example-profile-picture-styling
+     * @beta 
+     */
+    interface HTMLLimelProfilePictureElement extends Components.LimelProfilePicture, HTMLStencilElement {
+    }
+    var HTMLLimelProfilePictureElement: {
+        prototype: HTMLLimelProfilePictureElement;
+        new (): HTMLLimelProfilePictureElement;
+    };
     /**
      * @exampleComponent limel-example-progress-flow-basic
      * @exampleComponent limel-example-progress-flow-secondary-text
@@ -4777,6 +4879,7 @@ declare global {
         "limel-popover": HTMLLimelPopoverElement;
         "limel-popover-surface": HTMLLimelPopoverSurfaceElement;
         "limel-portal": HTMLLimelPortalElement;
+        "limel-profile-picture": HTMLLimelProfilePictureElement;
         "limel-progress-flow": HTMLLimelProgressFlowElement;
         "limel-progress-flow-item": HTMLLimelProgressFlowItemElement;
         "limel-prosemirror-adapter": HTMLLimelProsemirrorAdapterElement;
@@ -7204,6 +7307,86 @@ declare namespace LocalJSX {
          */
         "visible"?: boolean;
     }
+    /**
+     * This component displays a profile picture, while allowing the user
+     * to change it via a file input or drag-and-drop.
+     * It supports client-side image resizing and conversion,
+     * as well as a simple lazy-loading mechanism.
+     * @exampleComponent limel-example-profile-picture-basic
+     * @exampleComponent limel-example-profile-picture-helper-text
+     * @exampleComponent limel-example-profile-picture-icon
+     * @exampleComponent limel-example-profile-picture-with-value
+     * @exampleComponent limel-example-profile-picture-loading
+     * @exampleComponent limel-example-profile-picture-image-fit
+     * @exampleComponent limel-example-profile-picture-composite
+     * @exampleComponent limel-example-profile-picture-resize-contain
+     * @exampleComponent limel-example-profile-picture-resize-cover
+     * @exampleComponent limel-example-profile-picture-resize-fallback
+     * @exampleComponent limel-example-profile-picture-styling
+     * @beta 
+     */
+    interface LimelProfilePicture {
+        /**
+          * A comma-separated list of accepted file types.
+         */
+        "accept"?: string;
+        /**
+          * Disables user interaction. Prevents uploading new pictures or removing existing ones.
+         */
+        "disabled"?: boolean;
+        /**
+          * Helper text shown as a tooltip on hover or focus.
+         */
+        "helperText"?: string;
+        /**
+          * Placeholder icon of the component, displayed when no image is present.
+         */
+        "icon"?: string | Icon;
+        /**
+          * How the image should fit within the container. - `cover` will fill the container and crop excess parts. - `contain` will scale the image to fit within the container without cropping.
+         */
+        "imageFit"?: 'cover' | 'contain';
+        /**
+          * Marks the control as invalid.
+         */
+        "invalid"?: boolean;
+        /**
+          * Accessible label for the the browse button.
+         */
+        "label"?: string;
+        /**
+          * Defines the language for translations. Will translate the translatable strings on the components.
+         */
+        "language"?: Languages;
+        /**
+          * Set to `true` to put the component in the `loading` state, and render an indeterminate progress indicator inside. This does _not_ disable the interactivity of the component!
+         */
+        "loading"?: boolean;
+        /**
+          * Emitted when the picture changes (first FileInfo only).
+         */
+        "onChange"?: (event: LimelProfilePictureCustomEvent<FileInfo | undefined>) => void;
+        /**
+          * Emitted when a file is rejected by accept filter.
+         */
+        "onFilesRejected"?: (event: LimelProfilePictureCustomEvent<FileInfo[]>) => void;
+        /**
+          * Readonly prevents changing the value but allows interaction like focus.
+         */
+        "readonly"?: boolean;
+        /**
+          * Marks the control as required.
+         */
+        "required"?: boolean;
+        /**
+          * Optional client-side resize before emitting the file. If provided, the selected image will be resized on the client device. :::note HEIC may not decode in all browsers; when decoding fails, the original file will be emitted. See the examples for more info. :::
+         */
+        "resize"?: ResizeOptions;
+        /**
+          * Current image to display. Either a URL string or a `FileInfo` with an href.
+         */
+        "value"?: string | FileInfo;
+    }
     /**
      * @exampleComponent limel-example-progress-flow-basic
      * @exampleComponent limel-example-progress-flow-secondary-text
@@ -8138,6 +8321,7 @@ declare namespace LocalJSX {
         "limel-popover": LimelPopover;
         "limel-popover-surface": LimelPopoverSurface;
         "limel-portal": LimelPortal;
+        "limel-profile-picture": LimelProfilePicture;
         "limel-progress-flow": LimelProgressFlow;
         "limel-progress-flow-item": LimelProgressFlowItem;
         "limel-prosemirror-adapter": LimelProsemirrorAdapter;
@@ -9040,6 +9224,25 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-portal-basic
              */
             "limel-portal": LocalJSX.LimelPortal & JSXBase.HTMLAttributes<HTMLLimelPortalElement>;
+            /**
+             * This component displays a profile picture, while allowing the user
+             * to change it via a file input or drag-and-drop.
+             * It supports client-side image resizing and conversion,
+             * as well as a simple lazy-loading mechanism.
+             * @exampleComponent limel-example-profile-picture-basic
+             * @exampleComponent limel-example-profile-picture-helper-text
+             * @exampleComponent limel-example-profile-picture-icon
+             * @exampleComponent limel-example-profile-picture-with-value
+             * @exampleComponent limel-example-profile-picture-loading
+             * @exampleComponent limel-example-profile-picture-image-fit
+             * @exampleComponent limel-example-profile-picture-composite
+             * @exampleComponent limel-example-profile-picture-resize-contain
+             * @exampleComponent limel-example-profile-picture-resize-cover
+             * @exampleComponent limel-example-profile-picture-resize-fallback
+             * @exampleComponent limel-example-profile-picture-styling
+             * @beta 
+             */
+            "limel-profile-picture": LocalJSX.LimelProfilePicture & JSXBase.HTMLAttributes<HTMLLimelProfilePictureElement>;
             /**
              * @exampleComponent limel-example-progress-flow-basic
              * @exampleComponent limel-example-progress-flow-secondary-text

package/dist/types/translations/da.d.ts

@@ -50,6 +50,9 @@ declare const _default: {
   'ai-avatar.thinking': string;
   'table.select-all': string;
   'table.select-row': string;
+  'profile-picture.remove': string;
+  'profile-picture.unsupported-preview.title': string;
+  'profile-picture.unsupported-preview.description': string;
 };
 export default _default;
 //# sourceMappingURL=da.d.ts.map

package/dist/types/translations/de.d.ts

@@ -50,6 +50,9 @@ declare const _default: {
   'ai-avatar.thinking': string;
   'table.select-all': string;
   'table.select-row': string;
+  'profile-picture.remove': string;
+  'profile-picture.unsupported-preview.title': string;
+  'profile-picture.unsupported-preview.description': string;
 };
 export default _default;
 //# sourceMappingURL=de.d.ts.map

package/dist/types/translations/en.d.ts

@@ -50,6 +50,9 @@ declare const _default: {
   'ai-avatar.thinking': string;
   'table.select-all': string;
   'table.select-row': string;
+  'profile-picture.remove': string;
+  'profile-picture.unsupported-preview.title': string;
+  'profile-picture.unsupported-preview.description': string;
 };
 export default _default;
 //# sourceMappingURL=en.d.ts.map

package/dist/types/translations/fi.d.ts

@@ -50,6 +50,9 @@ declare const _default: {
   'ai-avatar.thinking': string;
   'table.select-all': string;
   'table.select-row': string;
+  'profile-picture.remove': string;
+  'profile-picture.unsupported-preview.title': string;
+  'profile-picture.unsupported-preview.description': string;
 };
 export default _default;
 //# sourceMappingURL=fi.d.ts.map

package/dist/types/translations/fr.d.ts

@@ -50,6 +50,9 @@ declare const _default: {
   'ai-avatar.thinking': string;
   'table.select-all': string;
   'table.select-row': string;
+  'profile-picture.remove': string;
+  'profile-picture.unsupported-preview.title': string;
+  'profile-picture.unsupported-preview.description': string;
 };
 export default _default;
 //# sourceMappingURL=fr.d.ts.map

package/dist/types/translations/nl.d.ts

@@ -50,6 +50,9 @@ declare const _default: {
   'ai-avatar.thinking': string;
   'table.select-all': string;
   'table.select-row': string;
+  'profile-picture.remove': string;
+  'profile-picture.unsupported-preview.title': string;
+  'profile-picture.unsupported-preview.description': string;
 };
 export default _default;
 //# sourceMappingURL=nl.d.ts.map

package/dist/types/translations/no.d.ts

@@ -50,6 +50,9 @@ declare const _default: {
   'ai-avatar.thinking': string;
   'table.select-all': string;
   'table.select-row': string;
+  'profile-picture.remove': string;
+  'profile-picture.unsupported-preview.title': string;
+  'profile-picture.unsupported-preview.description': string;
 };
 export default _default;
 //# sourceMappingURL=no.d.ts.map

package/dist/types/translations/sv.d.ts

@@ -50,6 +50,9 @@ declare const _default: {
   'ai-avatar.thinking': string;
   'table.select-all': string;
   'table.select-row': string;
+  'profile-picture.remove': string;
+  'profile-picture.unsupported-preview.title': string;
+  'profile-picture.unsupported-preview.description': string;
 };
 export default _default;
 //# sourceMappingURL=sv.d.ts.map

package/dist/types/util/image-resize.d.ts

@@ -0,0 +1,138 @@
+/**
+ * Image resize utilities
+ *
+ * Overview
+ * --------
+ * This module provides a small, dependency-free utility to resize images on the client
+ * (in the browser) before uploading. It works by decoding an input `File` to an
+ * `ImageBitmap` (or falling back to an `HTMLImageElement`), drawing it onto a
+ * `Canvas`/`OffscreenCanvas` with the requested strategy (cover/contain), and
+ * then exporting the result to a new `File` with your preferred MIME type and
+ * quality.
+ *
+ * Why resize client-side?
+ * - Faster perceived uploads and lower bandwidth usage
+ * - Consistent avatar sizes and formats (e.g., JPEG 400x400)
+ * - No server-side transformation required for common cases
+ *
+ * Fit strategies
+ * - `cover` (default): The image is scaled to cover the target rectangle, and
+ *   the excess parts are center-cropped. Good for avatars.
+ * - `contain`: The image is scaled to fit entirely within the target rectangle
+ *   without cropping, letterboxing if needed. Good when you must preserve the
+ *   entire image.
+ *
+ * Decoding & EXIF orientation
+ * EXIF orientation is a piece of metadata stored inside image files
+ * (usually JPEGs) that tells image renderer software how the image should be displayed
+ * i.e., whether it should be rotated or flipped. This meta data is normally added
+ * to photos by digital cameras and phones.
+ * - When available, `createImageBitmap(file, { imageOrientation: 'from-image' })`
+ *   is used to automatically respect EXIF orientation.
+ * - If not available or it fails (e.g., unsupported format), we fall back to
+ *   decoding via an `HTMLImageElement`.
+ *
+ * OffscreenCanvas
+ * - If the environment supports `OffscreenCanvas`, it will be used for the draw
+ *   and encode operations for better performance in some cases. Otherwise, a
+ *   regular `HTMLCanvasElement` is used.
+ *
+ * HEIC/HEIF notes
+ * - All major browsers except Safari lack native HEIC/HEIF decoding.
+ *   In such cases the `resizeImage` function will throw when decoding fails.
+ *   The caller should catch and fall back
+ *   to using the original file or handle conversion on the server.
+ * - If we need guaranteed client-side HEIC->JPEG conversion, we must add a small
+ *   library or WASM module; this utility intentionally avoids extra dependencies.
+ *
+ * Output type & quality
+ * - Default output is `image/jpeg` with `quality=0.85`, which is typically
+ *   appropriate for avatars. You can switch to `image/png` to preserve
+ *   transparency.
+ * - The output filename extension is adjusted to match the chosen MIME type by
+ *   default (e.g., `.jpg` or `.png`). You can override naming via the `rename`
+ *   option.
+ *
+ * Error handling
+ * - Throws if canvas/context cannot be created or if canvas->blob conversion fails.
+ * - Decoding failures (unsupported type) will throw; caller can try/catch and
+ *   fall back to the original file.
+ *
+ * Performance tips
+ * - Keep target sizes reasonable (e.g., 256–1024 px) to avoid long processing
+ *   times on modest devices.
+ * - JPEG with quality 0.8–0.9 often strikes a good balance between size and
+ *   perceived quality for photos/avatars.
+ *
+ * Usage examples
+ * --------------
+ * Basic usage:
+ * ```ts
+ * import { resizeImage } from '@limetech/lime-elements/util/image-resize';
+ *
+ * const processed = await resizeImage(file, {
+ *   width: 400,
+ *   height: 400,
+ *   fit: 'cover',         // default; center-crops
+ *   type: 'image/jpeg',   // default
+ *   quality: 0.85,        // default
+ * });
+ * // Upload `processed` instead of the original file
+ * ```
+ *
+ * With custom naming:
+ * ```ts
+ * const processed = await resizeImage(file, {
+ *   width: 800,
+ *   height: 800,
+ *   fit: 'contain',
+ *   type: 'image/png',
+ *   rename: (name) => name.replace(/\.[^.]+$/, '') + '_resized.png',
+ * });
+ * ```
+ *
+ * In a Stencil component (simplified):
+ * ```tsx
+ * private async handleFilesSelected(file: File) {
+ *   try {
+ *     const resized = await resizeImage(file, { width: 400, height: 400 });
+ *     // build your FileInfo and emit
+ *   } catch {
+ *     // fall back to original
+ *   }
+ * }
+ * ```
+ */
+/**
+ * Options for client-side image resizing.
+ * @beta
+ */
+export type ResizeOptions = {
+  /** Target width in CSS pixels. */
+  width: number;
+  /** Target height in CSS pixels. */
+  height: number;
+  /** Fit strategy; defaults to 'cover'. */
+  fit?: 'cover' | 'contain';
+  /** Output MIME type; 'image/jpeg' by default. */
+  type?: 'image/jpeg' | 'image/png';
+  /** JPEG quality (0..1); used only for 'image/jpeg'. Defaults to 0.85. */
+  quality?: number;
+  /** Optional renaming function. Defaults to changing extension to match MIME. */
+  rename?: (originalName: string) => string;
+};
+/**
+ * Resize an image file on the client using Canvas/OffscreenCanvas.
+ * Returns a new File with the requested format and dimensions.
+ *
+ * Contract
+ * - Input: image `File`
+ * - Output: resized image as a new `File` with updated `type`, name, and size
+ * - Errors: may throw on decode failure or canvas export failure
+ *
+ * @beta
+ * @param file - The image file to resize.
+ * @param options - Configuration for the resize operation.
+ */
+export declare function resizeImage(file: File, options: ResizeOptions): Promise<File>;
+//# sourceMappingURL=image-resize.d.ts.map