kritzel-stencil 0.4.4 → 0.4.5

package/dist/components/p-Df3BwVGy.js

@@ -1 +1,299 @@
-import{p as e,H as t,c as o,h as r,d as i,t as n}from"./p-B43upypT.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChanged=o(this,"valueChanged")}get el(){return this}options=[];optionsChanged(){this.updateInternalValue(this.internalValue,!0)}value;externalValueChanged(e){e!==this.internalValue&&this.updateInternalValue(e,!1)}width;selectStyles={};forceOpenDirection;internalValue;hasSuffixContent=!1;hasPrefixContent=!1;isOpen=!1;focusedIndex=-1;openDirection="down";valueChanged;suffixSlotElement;prefixSlotElement;triggerElement;menuElement;wrapperElement;componentWillLoad(){this.updateInternalValue(this.value,!1),this.evaluateSuffixContent(),this.evaluatePrefixContent()}disconnectedCallback(){this.isOpen&&(this.isOpen=!1)}handleDocumentClick(e){this.isOpen&&!this.el.contains(e.target)&&this.closeMenu()}handleDocumentKeydown(e){this.isOpen&&"Escape"===e.key&&(e.stopPropagation(),e.preventDefault(),this.closeMenu(),this.triggerElement?.focus())}updateInternalValue(e,t){let o=e;!o&&this.options&&this.options.length>0?o=this.options[0].value:o||(o=void 0),this.internalValue!==o&&(this.internalValue=o,(t||e!==o&&void 0!==e)&&this.valueChanged.emit(this.internalValue))}toggleMenu=()=>{this.isOpen?this.closeMenu():this.openMenu()};openMenu=()=>{this.calculateMenuDirection(),this.isOpen=!0;const e=this.options.findIndex((e=>e.value===this.internalValue));this.focusedIndex=e>=0?e:0,requestAnimationFrame((()=>{this.menuElement?.focus()}))};calculateMenuDirection=()=>{if(this.forceOpenDirection)return void(this.openDirection=this.forceOpenDirection);if(!this.wrapperElement)return void(this.openDirection="down");const e=this.wrapperElement.getBoundingClientRect(),t=window.innerHeight-e.bottom,o=e.top,r=Math.min(240,36*this.options.length+8);this.openDirection=t<r&&o>t?"up":"down"};closeMenu=()=>{this.isOpen=!1,this.focusedIndex=-1};selectOption=e=>{this.internalValue!==e.value&&(this.internalValue=e.value,this.valueChanged.emit(this.internalValue)),this.closeMenu(),this.triggerElement?.focus()};handleTriggerKeyDown=e=>{switch(e.key){case"Enter":case" ":case"ArrowDown":case"ArrowUp":e.preventDefault(),this.openMenu()}};handleMenuKeyDown=e=>{switch(e.key){case"ArrowDown":e.preventDefault(),this.focusedIndex=Math.min(this.focusedIndex+1,this.options.length-1),this.scrollFocusedOptionIntoView();break;case"ArrowUp":e.preventDefault(),this.focusedIndex=Math.max(this.focusedIndex-1,0),this.scrollFocusedOptionIntoView();break;case"Enter":case" ":e.preventDefault(),this.focusedIndex>=0&&this.focusedIndex<this.options.length&&this.selectOption(this.options[this.focusedIndex]);break;case"Home":e.preventDefault(),this.focusedIndex=0,this.scrollFocusedOptionIntoView();break;case"End":e.preventDefault(),this.focusedIndex=this.options.length-1,this.scrollFocusedOptionIntoView();break;case"Tab":this.closeMenu()}};scrollFocusedOptionIntoView=()=>{!this.menuElement||this.focusedIndex<0||requestAnimationFrame((()=>{const e=this.menuElement?.querySelector(".dropdown-option.is-focused");e&&e.scrollIntoView({block:"nearest",behavior:"smooth"})}))};handleOptionMouseEnter=e=>{this.focusedIndex=e};evaluateSuffixContent=()=>{if(this.suffixSlotElement){const e=this.suffixSlotElement.assignedNodes({flatten:!0}).length>0;this.hasSuffixContent!==e&&(this.hasSuffixContent=e)}else!1!==this.hasSuffixContent&&(this.hasSuffixContent=!1)};evaluatePrefixContent=()=>{if(this.prefixSlotElement){const e=this.prefixSlotElement.assignedNodes({flatten:!0}).length>0;this.hasPrefixContent!==e&&(this.hasPrefixContent=e)}else!1!==this.hasPrefixContent&&(this.hasPrefixContent=!1)};getSelectedLabel(){const e=this.options.find((e=>e.value===this.internalValue));return e?.label??""}getSelectedStyle(){const e=this.options.find((e=>e.value===this.internalValue));return e?.style}render(){const e={"dropdown-trigger":!0,"has-suffix-border":this.hasSuffixContent,"has-prefix-border":this.hasPrefixContent,"is-open":this.isOpen,"open-up":"up"===this.openDirection},t={"dropdown-menu":!0,"is-open":this.isOpen,"open-up":"up"===this.openDirection,"open-down":"down"===this.openDirection};return r(i,{key:"c606b338e55dc66396105fa7b4fbdf372f3866e6"},r("div",{key:"aa32b73cac337fa4142ecc124cf039a59e3b3118",class:"dropdown-wrapper",ref:e=>this.wrapperElement=e},r("slot",{key:"2cd8e9ef246a24c49d58f76f227f36aed4786178",name:"prefix",ref:e=>this.prefixSlotElement=e,onSlotchange:this.evaluatePrefixContent}),r("div",{key:"80df8155e1907017d508e92f155bab5ae12dffab",class:"dropdown-container",style:{width:this.width}},r("button",{key:"d86463de7ec58248f1611d6b5d46f0eafc117f36",type:"button",class:e,style:{...this.selectStyles,...this.getSelectedStyle()},onClick:this.toggleMenu,onKeyDown:this.handleTriggerKeyDown,"aria-haspopup":"listbox","aria-expanded":this.isOpen?"true":"false",ref:e=>this.triggerElement=e},r("span",{key:"4ef6a997f7a781fb409e97ed5bd6843d0eaff0bb",class:"dropdown-trigger-label"},this.getSelectedLabel()),r("span",{key:"6601efcd69d84af1f022d14ede628bac743cc1f1",class:"dropdown-trigger-arrow","aria-hidden":"true"},r("svg",{key:"6cb2efe7b4ca890562c10b0e24eb1dfdad90ec24",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},r("polyline",{key:"a340af5a61dccf5bc29c8a473726b58055c2e9db",points:"6 9 12 15 18 9"}))))),r("slot",{key:"5bd4e5ad4cc4642c7769ecac2106ba82bae626f2",name:"suffix",ref:e=>this.suffixSlotElement=e,onSlotchange:this.evaluateSuffixContent}),r("ul",{key:"e7a2be8ac261bc5fa1450940e2a57090d6be3315",class:t,role:"listbox",tabindex:"-1",onKeyDown:this.handleMenuKeyDown,ref:e=>this.menuElement=e},this.options.map(((e,t)=>{const o=e.value===this.internalValue;return r("li",{class:{"dropdown-option":!0,"is-selected":o,"is-focused":t===this.focusedIndex},role:"option","aria-selected":o?"true":"false",style:e.style,onClick:()=>this.selectOption(e),onMouseEnter:()=>this.handleOptionMouseEnter(t)},e.label,o&&r("span",{class:"dropdown-option-check","aria-hidden":"true"},r("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},r("polyline",{points:"20 6 9 17 4 12"}))))})))))}static get watchers(){return{options:[{optionsChanged:0}],value:[{externalValueChanged:0}]}}static get style(){return":host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-border-radius, 6px);overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:var(--kritzel-dropdown-border-radius, 6px);border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-menu-border-radius, var(--kritzel-dropdown-border-radius, 6px));box-shadow:var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease,     transform 0.15s ease,     visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}"}},[769,"kritzel-dropdown",{options:[16],value:[1],width:[1],selectStyles:[16],forceOpenDirection:[1,"force-open-direction"],internalValue:[32],hasSuffixContent:[32],hasPrefixContent:[32],isOpen:[32],focusedIndex:[32],openDirection:[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleDocumentKeydown"]],{options:[{optionsChanged:0}],value:[{externalValueChanged:0}]}]);function a(){"undefined"!=typeof customElements&&["kritzel-dropdown"].forEach((e=>{"kritzel-dropdown"===e&&(customElements.get(n(e))||customElements.define(n(e),s))}))}export{s as K,a as d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+
+const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-border-radius, 6px);overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:var(--kritzel-dropdown-border-radius, 6px);border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-menu-border-radius, var(--kritzel-dropdown-border-radius, 6px));box-shadow:var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease,     transform 0.15s ease,     visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}`;
+
+const KritzelDropdown = /*@__PURE__*/ proxyCustomElement(class KritzelDropdown extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.valueChanged = createEvent(this, "valueChanged");
+    }
+    get el() { return this; }
+    options = [];
+    optionsChanged() {
+        this.updateInternalValue(this.internalValue, true);
+    }
+    value;
+    externalValueChanged(newValue) {
+        if (newValue !== this.internalValue) {
+            this.updateInternalValue(newValue, false);
+        }
+    }
+    width;
+    selectStyles = {};
+    /** Force the dropdown to open in a specific direction instead of auto-detecting */
+    forceOpenDirection;
+    internalValue;
+    hasSuffixContent = false;
+    hasPrefixContent = false;
+    isOpen = false;
+    focusedIndex = -1;
+    openDirection = 'down';
+    valueChanged;
+    suffixSlotElement;
+    prefixSlotElement;
+    triggerElement;
+    menuElement;
+    wrapperElement;
+    componentWillLoad() {
+        this.updateInternalValue(this.value, false);
+        this.evaluateSuffixContent();
+        this.evaluatePrefixContent();
+    }
+    disconnectedCallback() {
+        // Close menu when component is removed from DOM to prevent orphaned open dropdowns
+        if (this.isOpen) {
+            this.isOpen = false;
+        }
+    }
+    handleDocumentClick(event) {
+        if (this.isOpen && !this.el.contains(event.target)) {
+            this.closeMenu();
+        }
+    }
+    handleDocumentKeydown(event) {
+        if (this.isOpen && event.key === 'Escape') {
+            event.stopPropagation();
+            event.preventDefault();
+            this.closeMenu();
+            this.triggerElement?.focus();
+        }
+    }
+    updateInternalValue(proposedValue, emitChange) {
+        let finalValue = proposedValue;
+        // Only fall back to an option if the proposed value is completely missing.
+        // We intentionally don't sanitize invalid values here, to allow for values 
+        // that might be added to options asynchronously later (preventing race conditions).
+        if (!finalValue && this.options && this.options.length > 0) {
+            finalValue = this.options[0].value;
+        }
+        else if (!finalValue) {
+            finalValue = undefined;
+        }
+        if (this.internalValue !== finalValue) {
+            this.internalValue = finalValue;
+            if (emitChange || (proposedValue !== finalValue && proposedValue !== undefined)) {
+                this.valueChanged.emit(this.internalValue);
+            }
+        }
+    }
+    toggleMenu = () => {
+        if (this.isOpen) {
+            this.closeMenu();
+        }
+        else {
+            this.openMenu();
+        }
+    };
+    openMenu = () => {
+        this.calculateMenuDirection();
+        this.isOpen = true;
+        const currentIndex = this.options.findIndex(opt => opt.value === this.internalValue);
+        this.focusedIndex = currentIndex >= 0 ? currentIndex : 0;
+        // Focus the menu after it opens
+        requestAnimationFrame(() => {
+            this.menuElement?.focus();
+        });
+    };
+    calculateMenuDirection = () => {
+        if (this.forceOpenDirection) {
+            this.openDirection = this.forceOpenDirection;
+            return;
+        }
+        if (!this.wrapperElement) {
+            this.openDirection = 'down';
+            return;
+        }
+        const wrapperRect = this.wrapperElement.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const spaceBelow = viewportHeight - wrapperRect.bottom;
+        const spaceAbove = wrapperRect.top;
+        // Estimate menu height (max 240px or fewer based on options)
+        const estimatedOptionHeight = 36; // padding + content
+        const menuPadding = 8; // 4px top + 4px bottom
+        const estimatedMenuHeight = Math.min(240, this.options.length * estimatedOptionHeight + menuPadding);
+        // Prefer opening downward, but switch to upward if not enough space below
+        // and there's more space above
+        if (spaceBelow < estimatedMenuHeight && spaceAbove > spaceBelow) {
+            this.openDirection = 'up';
+        }
+        else {
+            this.openDirection = 'down';
+        }
+    };
+    closeMenu = () => {
+        this.isOpen = false;
+        this.focusedIndex = -1;
+        // Note: openDirection is intentionally NOT reset here to allow the close animation
+        // to play in the same direction the menu was opened
+    };
+    selectOption = (option) => {
+        if (this.internalValue !== option.value) {
+            this.internalValue = option.value;
+            this.valueChanged.emit(this.internalValue);
+        }
+        this.closeMenu();
+        this.triggerElement?.focus();
+    };
+    handleTriggerKeyDown = (event) => {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+            case 'ArrowUp':
+                event.preventDefault();
+                this.openMenu();
+                break;
+        }
+    };
+    handleMenuKeyDown = (event) => {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusedIndex = Math.min(this.focusedIndex + 1, this.options.length - 1);
+                this.scrollFocusedOptionIntoView();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusedIndex = Math.max(this.focusedIndex - 1, 0);
+                this.scrollFocusedOptionIntoView();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.focusedIndex >= 0 && this.focusedIndex < this.options.length) {
+                    this.selectOption(this.options[this.focusedIndex]);
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusedIndex = 0;
+                this.scrollFocusedOptionIntoView();
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusedIndex = this.options.length - 1;
+                this.scrollFocusedOptionIntoView();
+                break;
+            case 'Tab':
+                this.closeMenu();
+                break;
+        }
+    };
+    scrollFocusedOptionIntoView = () => {
+        if (!this.menuElement || this.focusedIndex < 0) {
+            return;
+        }
+        // Use requestAnimationFrame to ensure the DOM has updated with the new focused class
+        requestAnimationFrame(() => {
+            const focusedOption = this.menuElement?.querySelector('.dropdown-option.is-focused');
+            if (focusedOption) {
+                focusedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+        });
+    };
+    handleOptionMouseEnter = (index) => {
+        this.focusedIndex = index;
+    };
+    evaluateSuffixContent = () => {
+        if (this.suffixSlotElement) {
+            const newHasContent = this.suffixSlotElement.assignedNodes({ flatten: true }).length > 0;
+            if (this.hasSuffixContent !== newHasContent) {
+                this.hasSuffixContent = newHasContent;
+            }
+        }
+        else if (this.hasSuffixContent !== false) {
+            this.hasSuffixContent = false;
+        }
+    };
+    evaluatePrefixContent = () => {
+        if (this.prefixSlotElement) {
+            const newHasContent = this.prefixSlotElement.assignedNodes({ flatten: true }).length > 0;
+            if (this.hasPrefixContent !== newHasContent) {
+                this.hasPrefixContent = newHasContent;
+            }
+        }
+        else if (this.hasPrefixContent !== false) {
+            this.hasPrefixContent = false;
+        }
+    };
+    getSelectedLabel() {
+        const selectedOption = this.options.find(opt => opt.value === this.internalValue);
+        return selectedOption?.label ?? '';
+    }
+    getSelectedStyle() {
+        const selectedOption = this.options.find(opt => opt.value === this.internalValue);
+        return selectedOption?.style;
+    }
+    render() {
+        const triggerClasses = {
+            'dropdown-trigger': true,
+            'has-suffix-border': this.hasSuffixContent,
+            'has-prefix-border': this.hasPrefixContent,
+            'is-open': this.isOpen,
+            'open-up': this.openDirection === 'up',
+        };
+        const menuClasses = {
+            'dropdown-menu': true,
+            'is-open': this.isOpen,
+            'open-up': this.openDirection === 'up',
+            'open-down': this.openDirection === 'down',
+        };
+        return (h(Host, { key: 'c606b338e55dc66396105fa7b4fbdf372f3866e6' }, h("div", { key: 'aa32b73cac337fa4142ecc124cf039a59e3b3118', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: '2cd8e9ef246a24c49d58f76f227f36aed4786178', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: '80df8155e1907017d508e92f155bab5ae12dffab', class: "dropdown-container", style: { width: this.width } }, h("button", { key: 'd86463de7ec58248f1611d6b5d46f0eafc117f36', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: '4ef6a997f7a781fb409e97ed5bd6843d0eaff0bb', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '6601efcd69d84af1f022d14ede628bac743cc1f1', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: '6cb2efe7b4ca890562c10b0e24eb1dfdad90ec24', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'a340af5a61dccf5bc29c8a473726b58055c2e9db', points: "6 9 12 15 18 9" }))))), h("slot", { key: '5bd4e5ad4cc4642c7769ecac2106ba82bae626f2', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: 'e7a2be8ac261bc5fa1450940e2a57090d6be3315', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
+            const isSelected = option.value === this.internalValue;
+            const isFocused = index === this.focusedIndex;
+            const optionClasses = {
+                'dropdown-option': true,
+                'is-selected': isSelected,
+                'is-focused': isFocused,
+            };
+            return (h("li", { class: optionClasses, role: "option", "aria-selected": isSelected ? 'true' : 'false', style: option.style, onClick: () => this.selectOption(option), onMouseEnter: () => this.handleOptionMouseEnter(index) }, option.label, isSelected && (h("span", { class: "dropdown-option-check", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "20 6 9 17 4 12" }))))));
+        })))));
+    }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }],
+        "value": [{
+                "externalValueChanged": 0
+            }]
+    }; }
+    static get style() { return kritzelDropdownCss(); }
+}, [769, "kritzel-dropdown", {
+        "options": [16],
+        "value": [1],
+        "width": [1],
+        "selectStyles": [16],
+        "forceOpenDirection": [1, "force-open-direction"],
+        "internalValue": [32],
+        "hasSuffixContent": [32],
+        "hasPrefixContent": [32],
+        "isOpen": [32],
+        "focusedIndex": [32],
+        "openDirection": [32]
+    }, [[4, "click", "handleDocumentClick"], [4, "keydown", "handleDocumentKeydown"]], {
+        "options": [{
+                "optionsChanged": 0
+            }],
+        "value": [{
+                "externalValueChanged": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-dropdown"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-dropdown":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelDropdown);
+            }
+            break;
+    } });
+}
+
+export { KritzelDropdown as K, defineCustomElement as d };

package/dist/components/p-DgJ0ufzr.js

@@ -1 +1,43 @@
-import{p as e,H as i,h as a,d as o,t as r}from"./p-B43upypT.js";const t=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}visible=!1;text="Loading...";render(){return a(o,{key:"30e6a9bd7337d74a2d33f27e8b9facfe1e5fdcce"},a("div",{key:"4d0f7561372c2b28f748d5338dc28146fd1f8d31",class:{"loading-overlay":!0,visible:this.visible},"aria-hidden":this.visible?"false":"true"},a("span",{key:"303c5037522c00840089d7200a63525cffa05b82",class:"loading-spinner"}),this.text))}static get style(){return":host{display:contents}.loading-overlay{position:absolute;inset:0;z-index:var(--kritzel-loading-overlay-z-index, 9999);display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--kritzel-loading-overlay-background, rgba(255, 255, 255, 0.6));color:var(--kritzel-loading-overlay-color, #333);font-family:var(--kritzel-font-family, sans-serif);font-size:1.25rem;opacity:0;pointer-events:none;visibility:hidden}.loading-overlay.visible{pointer-events:all;visibility:visible;animation:kritzel-loading-fade-in 200ms ease-out var(--kritzel-loading-overlay-delay, 300ms) forwards}.loading-spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-loading-overlay-spinner-color, #cccccc);border-top-color:var(--kritzel-loading-overlay-spinner-active-color, #333333);border-radius:50%;animation:kritzel-loading-spin 0.6s linear infinite}@keyframes kritzel-loading-spin{to{transform:rotate(360deg)}}@keyframes kritzel-loading-fade-in{to{opacity:1}}"}},[513,"kritzel-loading-overlay",{visible:[4],text:[1]}]);function l(){"undefined"!=typeof customElements&&["kritzel-loading-overlay"].forEach((e=>{"kritzel-loading-overlay"===e&&(customElements.get(r(e))||customElements.define(r(e),t))}))}export{t as K,l as d}
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-B43upypT.js';
+
+const kritzelLoadingOverlayCss = () => `:host{display:contents}.loading-overlay{position:absolute;inset:0;z-index:var(--kritzel-loading-overlay-z-index, 9999);display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--kritzel-loading-overlay-background, rgba(255, 255, 255, 0.6));color:var(--kritzel-loading-overlay-color, #333);font-family:var(--kritzel-font-family, sans-serif);font-size:1.25rem;opacity:0;pointer-events:none;visibility:hidden}.loading-overlay.visible{pointer-events:all;visibility:visible;animation:kritzel-loading-fade-in 200ms ease-out var(--kritzel-loading-overlay-delay, 300ms) forwards}.loading-spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-loading-overlay-spinner-color, #cccccc);border-top-color:var(--kritzel-loading-overlay-spinner-active-color, #333333);border-radius:50%;animation:kritzel-loading-spin 0.6s linear infinite}@keyframes kritzel-loading-spin{to{transform:rotate(360deg)}}@keyframes kritzel-loading-fade-in{to{opacity:1}}`;
+
+const KritzelLoadingOverlay = /*@__PURE__*/ proxyCustomElement(class KritzelLoadingOverlay extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    /**
+     * Whether the overlay is visible
+     */
+    visible = false;
+    /**
+     * The text to display next to the spinner
+     */
+    text = 'Loading...';
+    render() {
+        return (h(Host, { key: '30e6a9bd7337d74a2d33f27e8b9facfe1e5fdcce' }, h("div", { key: '4d0f7561372c2b28f748d5338dc28146fd1f8d31', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: '303c5037522c00840089d7200a63525cffa05b82', class: "loading-spinner" }), this.text)));
+    }
+    static get style() { return kritzelLoadingOverlayCss(); }
+}, [513, "kritzel-loading-overlay", {
+        "visible": [4],
+        "text": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-loading-overlay"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-loading-overlay":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelLoadingOverlay);
+            }
+            break;
+    } });
+}
+
+export { KritzelLoadingOverlay as K, defineCustomElement as d };

package/dist/components/p-DkUb2czk.js

@@ -1 +1,70 @@
-import{p as e,H as o,c as t,h as a,d as i,t as n}from"./p-B43upypT.js";import{d as r}from"./p-CdR76C4L.js";const l=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.zoomIn=t(this,"zoomIn"),this.zoomOut=t(this,"zoomOut")}visible=!0;disabled=!1;zoomPercent=100;terms={};zoomIn;zoomOut;handleZoomIn=()=>{this.disabled||this.zoomIn.emit()};handleZoomOut=()=>{this.disabled||this.zoomOut.emit()};get normalizedZoomPercent(){return Number.isFinite(this.zoomPercent)?Math.max(1,Math.round(this.zoomPercent)):100}render(){return a(i,{key:"e772e5c838c0d0372302f624e5030a7cd04353eb"},a("div",{key:"69795e24e44cabd3c7ebb65f3e1e1d039fef290e",class:{panel:!0,visible:this.visible}},a("button",{key:"ceade9417dc5aadb18c6312d190343a1d0538485",class:"zoom-button",type:"button","aria-label":this.terms["zoom.zoomOut"]??"Zoom out",disabled:this.disabled,onClick:this.handleZoomOut},a("kritzel-icon",{key:"ae45acfd6b438bc97c2a7e6b15a256d8600cd51d",name:"minus"})),a("span",{key:"2017b9c99989a26383123210cd402bf80a8591bd",class:"zoom-level","aria-live":"polite"},this.normalizedZoomPercent,"%"),a("button",{key:"925420fa6616b5ea1b995e07a989159b28cdbb48",class:"zoom-button",type:"button","aria-label":this.terms["zoom.zoomIn"]??"Zoom in",disabled:this.disabled,onClick:this.handleZoomIn},a("kritzel-icon",{key:"569aec9686e6af6aa41d455d29b3eb6fad672f64",name:"plus"}))))}static get style(){return":host{display:block;z-index:1}.panel{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-zoom-panel-gap, 4px);padding:var(--kritzel-zoom-panel-padding, 4px);border:var(--kritzel-zoom-panel-border, 1px solid #ebebeb);border-radius:var(--kritzel-zoom-panel-border-radius, 12px);background-color:var(--kritzel-zoom-panel-background-color, #ffffff);box-shadow:var(--kritzel-zoom-panel-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.panel.visible{opacity:1;pointer-events:auto}.zoom-level{display:inline-flex;align-items:center;justify-content:center;min-width:46px;color:var(--kritzel-zoom-panel-icon-color, #000000);font-family:var(--kritzel-font-family, sans-serif);font-size:12px;font-weight:500;line-height:1;padding:0 4px;user-select:none}.zoom-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-zoom-panel-button-size, 32px);height:var(--kritzel-zoom-panel-button-size, 32px);padding:0;border:0;border-radius:var(--kritzel-zoom-panel-button-border-radius, 8px);background:transparent;background-color:transparent;color:var(--kritzel-zoom-panel-icon-color, #000000);--kritzel-icon-color:var(--kritzel-zoom-panel-icon-color, #000000);box-shadow:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent}.zoom-button:hover,.zoom-button:focus-visible{background-color:var(--kritzel-zoom-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.zoom-button:active{background-color:var(--kritzel-zoom-panel-button-active-background-color, hsl(0, 0%, 0%, 8.6%))}.zoom-button:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}"}},[513,"kritzel-zoom-panel",{visible:[4],disabled:[4],zoomPercent:[2,"zoom-percent"],terms:[16]}]);function s(){"undefined"!=typeof customElements&&["kritzel-zoom-panel","kritzel-icon"].forEach((e=>{switch(e){case"kritzel-zoom-panel":customElements.get(n(e))||customElements.define(n(e),l);break;case"kritzel-icon":customElements.get(n(e))||r()}}))}export{l as K,s as d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { d as defineCustomElement$1 } from './p-CdR76C4L.js';
+
+const kritzelZoomPanelCss = () => `:host{display:block;z-index:1}.panel{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-zoom-panel-gap, 4px);padding:var(--kritzel-zoom-panel-padding, 4px);border:var(--kritzel-zoom-panel-border, 1px solid #ebebeb);border-radius:var(--kritzel-zoom-panel-border-radius, 12px);background-color:var(--kritzel-zoom-panel-background-color, #ffffff);box-shadow:var(--kritzel-zoom-panel-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.panel.visible{opacity:1;pointer-events:auto}.zoom-level{display:inline-flex;align-items:center;justify-content:center;min-width:46px;color:var(--kritzel-zoom-panel-icon-color, #000000);font-family:var(--kritzel-font-family, sans-serif);font-size:12px;font-weight:500;line-height:1;padding:0 4px;user-select:none}.zoom-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-zoom-panel-button-size, 32px);height:var(--kritzel-zoom-panel-button-size, 32px);padding:0;border:0;border-radius:var(--kritzel-zoom-panel-button-border-radius, 8px);background:transparent;background-color:transparent;color:var(--kritzel-zoom-panel-icon-color, #000000);--kritzel-icon-color:var(--kritzel-zoom-panel-icon-color, #000000);box-shadow:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent}.zoom-button:hover,.zoom-button:focus-visible{background-color:var(--kritzel-zoom-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.zoom-button:active{background-color:var(--kritzel-zoom-panel-button-active-background-color, hsl(0, 0%, 0%, 8.6%))}.zoom-button:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}`;
+
+const KritzelZoomPanel = /*@__PURE__*/ proxyCustomElement(class KritzelZoomPanel extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.zoomIn = createEvent(this, "zoomIn");
+        this.zoomOut = createEvent(this, "zoomOut");
+    }
+    /** Whether the zoom panel is visible. */
+    visible = true;
+    /** Whether both zoom buttons are disabled. */
+    disabled = false;
+    /** Current zoom level in percent. */
+    zoomPercent = 100;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    /** Emitted when the zoom-in button is clicked. */
+    zoomIn;
+    /** Emitted when the zoom-out button is clicked. */
+    zoomOut;
+    handleZoomIn = () => {
+        if (!this.disabled) {
+            this.zoomIn.emit();
+        }
+    };
+    handleZoomOut = () => {
+        if (!this.disabled) {
+            this.zoomOut.emit();
+        }
+    };
+    get normalizedZoomPercent() {
+        return Number.isFinite(this.zoomPercent) ? Math.max(1, Math.round(this.zoomPercent)) : 100;
+    }
+    render() {
+        return (h(Host, { key: 'e772e5c838c0d0372302f624e5030a7cd04353eb' }, h("div", { key: '69795e24e44cabd3c7ebb65f3e1e1d039fef290e', class: { panel: true, visible: this.visible } }, h("button", { key: 'ceade9417dc5aadb18c6312d190343a1d0538485', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: 'ae45acfd6b438bc97c2a7e6b15a256d8600cd51d', name: "minus" })), h("span", { key: '2017b9c99989a26383123210cd402bf80a8591bd', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: '925420fa6616b5ea1b995e07a989159b28cdbb48', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: '569aec9686e6af6aa41d455d29b3eb6fad672f64', name: "plus" })))));
+    }
+    static get style() { return kritzelZoomPanelCss(); }
+}, [513, "kritzel-zoom-panel", {
+        "visible": [4],
+        "disabled": [4],
+        "zoomPercent": [2, "zoom-percent"],
+        "terms": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-zoom-panel", "kritzel-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-zoom-panel":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelZoomPanel);
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelZoomPanel as K, defineCustomElement as d };

package/dist/components/p-Dlp84thc.js

@@ -1 +1,57 @@
-import{p as t,H as e,c as o,h as n,d as c,t as r}from"./p-B43upypT.js";import{d as a}from"./p-CdR76C4L.js";const i=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.backToContent=o(this,"backToContent")}visible=!1;text="Back to content";backToContent;handleClick=()=>{this.backToContent.emit()};render(){return n(c,{key:"9a087efd5b544a5633b89fcdfa9609a207eb70fc"},n("button",{key:"d02c237dd9fe08a5e65b2c72cc47f4444b47338c",class:{"back-to-content-button":!0,visible:this.visible},onClick:this.handleClick,"aria-label":this.text},n("kritzel-icon",{key:"3345e1bd20a1a4e2f6e46b1a365e3405a8304f4e",name:"chevrons-left"})))}static get style(){return":host{display:block;z-index:var(--kritzel-back-to-content-z-index, 1000)}.back-to-content-button{display:flex;align-items:center;justify-content:center;height:var(--kritzel-back-to-content-height, 50px);box-sizing:border-box;gap:var(--kritzel-back-to-content-gap, 6px);padding:var(--kritzel-back-to-content-padding, 0 16px);border:var(--kritzel-back-to-content-border, 1px solid #ebebeb);border-radius:var(--kritzel-back-to-content-border-radius, 12px);background-color:var(--kritzel-back-to-content-background-color, #ffffff);color:var(--kritzel-back-to-content-color, #000000);font-size:var(--kritzel-back-to-content-font-size, 14px);font-weight:var(--kritzel-back-to-content-font-weight, 500);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-back-to-content-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));opacity:0;pointer-events:none;transition:opacity 0.2s ease-out, transform 0.2s ease-out, background-color 0.15s ease-out;-webkit-tap-highlight-color:transparent;user-select:none}.back-to-content-button.visible{opacity:1;pointer-events:auto}@media (hover: hover){.back-to-content-button:hover{background-color:var(--kritzel-back-to-content-hover-background-color, hsl(0, 0%, 0%, 4.3%))}}.back-to-content-button:active{background-color:var(--kritzel-back-to-content-active-background-color, hsl(0, 0%, 0%, 8.6%))}"}},[513,"kritzel-back-to-content",{visible:[4],text:[1]}]);function s(){"undefined"!=typeof customElements&&["kritzel-back-to-content","kritzel-icon"].forEach((t=>{switch(t){case"kritzel-back-to-content":customElements.get(r(t))||customElements.define(r(t),i);break;case"kritzel-icon":customElements.get(r(t))||a()}}))}export{i as K,s as d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { d as defineCustomElement$1 } from './p-CdR76C4L.js';
+
+const kritzelBackToContentCss = () => `:host{display:block;z-index:var(--kritzel-back-to-content-z-index, 1000)}.back-to-content-button{display:flex;align-items:center;justify-content:center;height:var(--kritzel-back-to-content-height, 50px);box-sizing:border-box;gap:var(--kritzel-back-to-content-gap, 6px);padding:var(--kritzel-back-to-content-padding, 0 16px);border:var(--kritzel-back-to-content-border, 1px solid #ebebeb);border-radius:var(--kritzel-back-to-content-border-radius, 12px);background-color:var(--kritzel-back-to-content-background-color, #ffffff);color:var(--kritzel-back-to-content-color, #000000);font-size:var(--kritzel-back-to-content-font-size, 14px);font-weight:var(--kritzel-back-to-content-font-weight, 500);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-back-to-content-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));opacity:0;pointer-events:none;transition:opacity 0.2s ease-out, transform 0.2s ease-out, background-color 0.15s ease-out;-webkit-tap-highlight-color:transparent;user-select:none}.back-to-content-button.visible{opacity:1;pointer-events:auto}@media (hover: hover){.back-to-content-button:hover{background-color:var(--kritzel-back-to-content-hover-background-color, hsl(0, 0%, 0%, 4.3%))}}.back-to-content-button:active{background-color:var(--kritzel-back-to-content-active-background-color, hsl(0, 0%, 0%, 8.6%))}`;
+
+const KritzelBackToContent = /*@__PURE__*/ proxyCustomElement(class KritzelBackToContent extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.backToContent = createEvent(this, "backToContent");
+    }
+    /**
+     * Whether the button is visible
+     */
+    visible = false;
+    /**
+     * The text to display on the button
+     */
+    text = 'Back to content';
+    /**
+     * Emitted when the button is clicked
+     */
+    backToContent;
+    handleClick = () => {
+        this.backToContent.emit();
+    };
+    render() {
+        return (h(Host, { key: '9a087efd5b544a5633b89fcdfa9609a207eb70fc' }, h("button", { key: 'd02c237dd9fe08a5e65b2c72cc47f4444b47338c', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '3345e1bd20a1a4e2f6e46b1a365e3405a8304f4e', name: "chevrons-left" }))));
+    }
+    static get style() { return kritzelBackToContentCss(); }
+}, [513, "kritzel-back-to-content", {
+        "visible": [4],
+        "text": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-back-to-content", "kritzel-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-back-to-content":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelBackToContent);
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelBackToContent as K, defineCustomElement as d };