kritzel-stencil 0.4.19 → 0.4.21

package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.css

@@ -1,78 +1,78 @@
-:host {
-  position: relative;
-  display: flex;
-  align-items: center;
-  font-family: sans-serif;
-  z-index: 1;
-  padding: var(--kritzel-split-button-padding, 4px);
-  background-color: var(--kritzel-split-button-background-color, #ffffff);
-  border-radius: var(--kritzel-split-button-border-radius, 12px);
-  box-shadow: var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
-  border: var(--kritzel-split-button-border, 1px solid #ebebeb);
-  gap: var(--kritzel-split-button-gap, 4px);
-}
-
-:host(.mobile){
-  --kritzel-split-button-hover-background-color: transparent;
-}
-
-button {
-  border: none;
-  background-color: transparent;
-  padding: 0;
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  color: var(--kritzel-split-button-color, #000000);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: all;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.split-main-button,
-.split-menu-button {
-  height: auto;
-  display: flex;
-  align-items: center;
-  padding: var(--kritzel-split-button-padding, 8px);
-  background-color: var(--kritzel-split-button-background-color, #ffffff);
-  border-radius: var(--kritzel-split-button-border-radius, 12px);
-  font-size: var(--kritzel-split-button-font-size, 14px);
-}
-
-.split-main-button:hover,
-.split-menu-button:hover {
-  background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.split-main-button:focus,
-.split-menu-button:focus {
-  background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.split-main-button {
-  gap: var(--kritzel-split-button-gap, 4px);
-}
-
-.split-menu-button {
-  border-left: none;
-  justify-content: center;
-}
-
-.split-divider {
-  width: var(--kritzel-split-button-divider-width, 1px);
-  height: 24px;
-  background-color: var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-:disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}
+:host {
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-family: sans-serif;
+  z-index: 1;
+  padding: var(--kritzel-split-button-padding, 4px);
+  background-color: var(--kritzel-split-button-background-color, #ffffff);
+  border-radius: var(--kritzel-split-button-border-radius, 12px);
+  box-shadow: var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
+  border: var(--kritzel-split-button-border, 1px solid #ebebeb);
+  gap: var(--kritzel-split-button-gap, 4px);
+}
+
+:host(.mobile){
+  --kritzel-split-button-hover-background-color: transparent;
+}
+
+button {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  color: var(--kritzel-split-button-color, #000000);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: all;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.split-main-button,
+.split-menu-button {
+  height: auto;
+  display: flex;
+  align-items: center;
+  padding: var(--kritzel-split-button-padding, 8px);
+  background-color: var(--kritzel-split-button-background-color, #ffffff);
+  border-radius: var(--kritzel-split-button-border-radius, 12px);
+  font-size: var(--kritzel-split-button-font-size, 14px);
+}
+
+.split-main-button:hover,
+.split-menu-button:hover {
+  background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.split-main-button:focus,
+.split-menu-button:focus {
+  background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.split-main-button {
+  gap: var(--kritzel-split-button-gap, 4px);
+}
+
+.split-menu-button {
+  border-left: none;
+  justify-content: center;
+}
+
+.split-divider {
+  width: var(--kritzel-split-button-divider-width, 1px);
+  height: 24px;
+  background-color: var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js

@@ -82,7 +82,7 @@ export class KritzelSplitButton {
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (h(Host, { key: 'd8dac18091d84994607f96dea4cb09f5823b8477', class: { mobile: this.isTouchDevice } }, h("button", { key: '7601c722ba60bf73e8009c32b40ff88e51680011', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '567ea117b77ee0e8a4e023bc80d5cbafd44e7e05', name: this.buttonIcon })), h("div", { key: '53ae4da47818cb474fe659700d59171a9fe1b150', class: "split-divider" }), h("button", { key: '3893a36b2e33c86aa013e4a28a4428ba6ad4bb55', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, h("kritzel-icon", { key: '2dd391e711b37b41ccfe310fc705842fbde80110', name: this.dropdownIcon })), h("kritzel-portal", { key: '5e5d03337b0fd3e11547bb1678595dd1559e0b88', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: 'c50fe3d6591024513e0cb2ecce97f23a34499fe5', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+        return (h(Host, { key: 'f7f5019b32f4514a4ccf5bd07742658e3d05020a', class: { mobile: this.isTouchDevice } }, h("button", { key: '361007b4281edfe2bf18f28f7c4f19ba1f251b49', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '17d4fad6cfa070225daa67dfc648d4ac64091e90', name: this.buttonIcon })), h("div", { key: 'c18107b7d557525092c28ff5d7336ebb3648b672', class: "split-divider" }), h("button", { key: 'c7a9a67d832f026fa8e21eff7ea5935cd72862ed', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, h("kritzel-icon", { key: '5b40284c8f04fba80ca606b0af201040efe53880', name: this.dropdownIcon })), h("kritzel-portal", { key: '62bd7f26c020497f2131759d0d1ef9d18e817b37', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: 'a1a11a0ae33f9626db3cd56fbb881c613f1ab78c', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
     }
     static get is() { return "kritzel-split-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.css

@@ -1,37 +1,37 @@
-:host {
-  display: flex;
-  align-items: flex-start;
-  gap: 0;
-  padding: 0;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.size-grid {
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 32px);
-  gap: 8px;
-  justify-items: center;
-}
-
-.size-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  border: 2px solid transparent;
-  box-sizing: border-box;
-}
-
-.size-container:hover {
-  background-color: var(--kritzel-stroke-size-hover-background-color, #ebebeb);
-}
-
-.size-container.selected {
-  border-color: var(--kritzel-selection-border-color, #007AFF);
-  background-color: var(--kritzel-stroke-size-selected-background-color, #ebebeb);
-}
+:host {
+  display: flex;
+  align-items: flex-start;
+  gap: 0;
+  padding: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.size-grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 32px);
+  gap: 8px;
+  justify-items: center;
+}
+
+.size-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border: 2px solid transparent;
+  box-sizing: border-box;
+}
+
+.size-container:hover {
+  background-color: var(--kritzel-stroke-size-hover-background-color, #ebebeb);
+}
+
+.size-container.selected {
+  border-color: var(--kritzel-selection-border-color, #007AFF);
+  background-color: var(--kritzel-stroke-size-selected-background-color, #ebebeb);
+}

package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js

@@ -9,7 +9,7 @@ export class KritzelStrokeSize {
     }
     render() {
         const sizes = this.sizes ?? [];
-        return (h(Host, { key: 'c0920f9f5c038774e8515134e5d5a89dc71b11ab' }, h("div", { key: '05dc9a4b9e91114562bdbaede31c37576a9bd6e9', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: 'c0307e527e6f9d5d663ae3f8f605162cdde2a339' }, h("div", { key: '9533e0486f8078d25b7e8fc3323126d77700ac72', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: 'var(--kritzel-global-text-primary)', size: size })))))));

package/dist/collection/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.css

@@ -1,50 +1,50 @@
-:host {
-  display: contents;
-}
-
-.indicator {
-  position: absolute;
-  top: 12px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: var(--kritzel-editor-sync-indicator-z-index, 10001);
-  pointer-events: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  border-radius: 999px;
-  background: var(--kritzel-editor-sync-indicator-background, rgba(255, 255, 255, 0.92));
-  color: var(--kritzel-editor-sync-indicator-color, #334155);
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
-  font-family: var(--kritzel-font-family, sans-serif);
-  font-size: 12px;
-  line-height: 1;
-  font-weight: 500;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.indicator.visible {
-  opacity: 1;
-  visibility: visible;
-}
-
-.spinner {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  border: 2px solid var(--kritzel-editor-sync-indicator-spinner-track, rgba(148, 163, 184, 0.35));
-  border-top-color: var(--kritzel-editor-sync-indicator-spinner-color, #2563eb);
-  animation: kritzel-sync-indicator-spin 0.8s linear infinite;
-}
-
-@keyframes kritzel-sync-indicator-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
+:host {
+  display: contents;
+}
+
+.indicator {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: var(--kritzel-editor-sync-indicator-z-index, 10001);
+  pointer-events: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: var(--kritzel-editor-sync-indicator-background, rgba(255, 255, 255, 0.92));
+  color: var(--kritzel-editor-sync-indicator-color, #334155);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
+  font-family: var(--kritzel-font-family, sans-serif);
+  font-size: 12px;
+  line-height: 1;
+  font-weight: 500;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.indicator.visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.spinner {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid var(--kritzel-editor-sync-indicator-spinner-track, rgba(148, 163, 184, 0.35));
+  border-top-color: var(--kritzel-editor-sync-indicator-spinner-color, #2563eb);
+  animation: kritzel-sync-indicator-spin 0.8s linear infinite;
+}
+
+@keyframes kritzel-sync-indicator-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/collection/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.js

@@ -5,7 +5,7 @@ export class KritzelSyncIndicator {
     /** The text displayed next to the spinner. */
     text = 'Syncing...';
     render() {
-        return (h(Host, { key: '2622544751cd377f172115f5f73e21e0f0995185' }, h("div", { key: '0cf49cbfbfa4ed0625eeff443ba1e2996a26562e', class: { indicator: true, visible: this.visible }, role: "status", "aria-live": "polite", "aria-label": "Synchronizing workspace" }, h("span", { key: '053ddc85e9ad2210822d3100ecf5d54d7170d470', class: "spinner", "aria-hidden": "true" }), h("span", { key: '94ea7f6be206688e9065d02b1d5c753e3598e9df' }, this.text))));
+        return (h(Host, { key: '05e825ee1c08fe02008b8e1adfe9e09a7996f221' }, h("div", { key: 'ea1635896f643c16713d35d6efd3abf486b1fbe2', class: { indicator: true, visible: this.visible }, role: "status", "aria-live": "polite", "aria-label": "Synchronizing workspace" }, h("span", { key: '7b57ea67d6f2c40dc74e966c16ebe9d95c75394a', class: "spinner", "aria-hidden": "true" }), h("span", { key: 'fc16405b02d96213d0025239b6e863883192ada5' }, this.text))));
     }
     static get is() { return "kritzel-sync-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.css

@@ -1,18 +1,18 @@
-:host {
-  width: auto;
-}
-
-.tooltip-content {
-  position: relative;
-  padding: 8px 12px;
-  border-radius: 4px;
-  width: fit-content;
-  background-color: var(--kritzel-tooltip-background-color, #ffffff);
-  color: var(--kritzel-tooltip-color, #000000);
-  padding: var(--kritzel-tooltip-padding, 12px);
-  border: var(--kritzel-tooltip-border, 1px solid #ebebeb);
-  border-radius: var(--kritzel-tooltip-border-radius, 16px);
-  white-space: nowrap;
-  box-shadow: var(--kritzel-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));
-}
-
+:host {
+  width: auto;
+}
+
+.tooltip-content {
+  position: relative;
+  padding: 8px 12px;
+  border-radius: 4px;
+  width: fit-content;
+  background-color: var(--kritzel-tooltip-background-color, #ffffff);
+  color: var(--kritzel-tooltip-color, #000000);
+  padding: var(--kritzel-tooltip-padding, 12px);
+  border: var(--kritzel-tooltip-border, 1px solid #ebebeb);
+  border-radius: var(--kritzel-tooltip-border-radius, 16px);
+  white-space: nowrap;
+  box-shadow: var(--kritzel-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));
+}
+

package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js

@@ -128,14 +128,14 @@ export class KritzelTooltip {
         }
     }
     render() {
-        return (h(Host, { key: '2fee8c1343888c34bbed7dd172b946ff732f6fc1', style: {
+        return (h(Host, { key: '93486d37c5dcaaf9a3d0d1c53d6308ddd5712560', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: `${this.positionX}px`,
                 bottom: `${this.positionY}px`,
-            } }, h("div", { key: 'fe72d28fb81f24309077f30193c84064afcd6ebe', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'ee95da259971a58b048780b21a0018fd6731bb03' }))));
+            } }, h("div", { key: '4b5cf451f75d09459145b874eb3c7faffafa87e0', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '6c7fda100473a7d4fc533edc52d67bf6909bdc0e' }))));
     }
     static get is() { return "kritzel-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-active-users/kritzel-active-users.css

@@ -1,65 +1,65 @@
-:host {
-  display: inline-flex;
-  align-items: center;
-}
-
-.avatars {
-  display: flex;
-  align-items: center;
-}
-
-.avatar-wrapper {
-  position: relative;
-  transition: margin-left 200ms ease;
-}
-
-.avatar-wrapper kritzel-avatar {
-  border-radius: 50%;
-  box-shadow: 0 0 0 2px var(--kritzel-active-users-avatar-border-color, #ffffff);
-}
-
-.avatars:hover .avatar-wrapper {
-  margin-left: -6px !important;
-}
-
-.avatar-tooltip {
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-top: 12px;
-  padding: 4px 8px;
-  background-color: var(--kritzel-active-users-tooltip-background, #333333);
-  color: var(--kritzel-active-users-tooltip-color, #ffffff);
-  font-family: sans-serif;
-  font-size: 12px;
-  font-weight: 500;
-  border-radius: 4px;
-  white-space: nowrap;
-  width: max-content;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 150ms ease;
-}
-
-.avatar-wrapper:hover .avatar-tooltip,
-.overflow-count:hover .avatar-tooltip {
-  opacity: 1;
-}
-
-.overflow-count {
-  position: relative;
-  margin-left: 8px;
-  font-family: sans-serif;
-  font-size: var(--kritzel-active-users-overflow-font-size, 14px);
-  font-weight: 500;
-  color: var(--kritzel-active-users-overflow-color, #666666);
-  white-space: nowrap;
-  cursor: default;
-}
-
-.overflow-count .avatar-tooltip {
-  white-space: nowrap;
-  text-align: left;
-  margin-top: 20px;
-}
+:host {
+  display: inline-flex;
+  align-items: center;
+}
+
+.avatars {
+  display: flex;
+  align-items: center;
+}
+
+.avatar-wrapper {
+  position: relative;
+  transition: margin-left 200ms ease;
+}
+
+.avatar-wrapper kritzel-avatar {
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px var(--kritzel-active-users-avatar-border-color, #ffffff);
+}
+
+.avatars:hover .avatar-wrapper {
+  margin-left: -6px !important;
+}
+
+.avatar-tooltip {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 12px;
+  padding: 4px 8px;
+  background-color: var(--kritzel-active-users-tooltip-background, #333333);
+  color: var(--kritzel-active-users-tooltip-color, #ffffff);
+  font-family: sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 4px;
+  white-space: nowrap;
+  width: max-content;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+
+.avatar-wrapper:hover .avatar-tooltip,
+.overflow-count:hover .avatar-tooltip {
+  opacity: 1;
+}
+
+.overflow-count {
+  position: relative;
+  margin-left: 8px;
+  font-family: sans-serif;
+  font-size: var(--kritzel-active-users-overflow-font-size, 14px);
+  font-weight: 500;
+  color: var(--kritzel-active-users-overflow-color, #666666);
+  white-space: nowrap;
+  cursor: default;
+}
+
+.overflow-count .avatar-tooltip {
+  white-space: nowrap;
+  text-align: left;
+  margin-top: 20px;
+}

package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.css

@@ -1,42 +1,42 @@
-: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%));
-}
+: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%));
+}

package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.js

@@ -16,7 +16,7 @@ export class KritzelBackToContent {
         this.backToContent.emit();
     };
     render() {
-        return (h(Host, { key: '612164b48226601d863cb2acdab1d567e9652188' }, h("button", { key: '159a4f4f01934c03c7898f2803bf87d5f0d95aba', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: 'e7ec1308ab12ca233509a00fc76df17fce1f5700', name: "chevrons-left" }))));
+        return (h(Host, { key: '2576489b9f97c77d1931e7c8496bae968d998f9d' }, h("button", { key: 'da891543ce8a9b5ccd2f4a461bdcdc7f3f9ad266', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '4559cc932918707d5961c6237f3c5e23c9e4cc9d', name: "chevrons-left" }))));
     }
     static get is() { return "kritzel-back-to-content"; }
     static get encapsulation() { return "shadow"; }