kritzel-stencil 0.4.30 → 0.4.31

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: '37185b37faa1e703f9457d4f4685c7d8ed40b342', class: { mobile: this.isTouchDevice } }, h("button", { key: 'b97d4df106fea68398116f1c44c6d5cd9f31997c', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '66dce735d160e23a16727c294f9ccb1bd3cda8c1', name: this.buttonIcon })), h("div", { key: '14ffaf9334090dc10df87d7b8744446be8bb2632', class: "split-divider" }), h("button", { key: '421e23ebb99e7b1ca656c0bc16f602a2a9812264', 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: 'affc13ef766d21030137a7feb44305553845dbfc', name: this.dropdownIcon })), h("kritzel-portal", { key: '326cef4696ebf9986e6c42e18822b90c399b16c2', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: 'e0800efbdefc9dce3dc548523ec10e810f3f7f73', 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: '3c22426ef12446aa3424d6b4a103edc02bc631f0', class: { mobile: this.isTouchDevice } }, h("button", { key: '5be967c991f55fa6f11f90fb4c5ccd6ada7f7266', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: 'c055ff3ba358ef2a1d7dac254b7ba8007b463901', name: this.buttonIcon })), h("div", { key: '1d9a060ecdeba49c49762399216709a573481cb3', class: "split-divider" }), h("button", { key: 'ab4fe9d216ccfe2f4418e461c1bd5f5800113125', 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: '88d6617385a697781eb12ae24a75eb2f4f14f790', name: this.dropdownIcon })), h("kritzel-portal", { key: '88a6164d40ecda76541bcb36f946aa4fd239a64d', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '6cb950b17f81864490bdfa0095debd4a7f48b1c0', 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: '8b12f354a3395cd69c7199115ce998cf2eb26eb2' }, h("div", { key: '39008613327d50b75270dd78ea498113e5e9617b', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: '8218bc595e5cc22f45519cb607a20c5375b15004' }, h("div", { key: '2e3d44c1b9b07d49e5da2ea58188bc570b7f8b58', 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-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: '407a2f458626f02808fc9d718046a635de71662b', style: {
+        return (h(Host, { key: 'e887f507f89031ebe7a6bfc1c66bd7c5613fea64', 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: '13c00678bd485f1f5bc2676e2c89fd0019f5e089', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '67937f71c611f36a2c47ee2632a8657ced1d8cc7' }))));
+            } }, h("div", { key: 'b9e5efe7bdef3f8c9cd709e19220322b91f37415', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'f36dd5791f0a4996d0a1b488798bb3504ab471f6' }))));
     }
     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: '0a41ed93e39193416eebdaf786557bffd4653dd0' }, h("button", { key: '1f621de9699127a095e94d910d5c96328324b299', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '8ff49df055a0472edbbc57d84044a2de09b543c8', name: "chevrons-left" }))));
+        return (h(Host, { key: '4ce5b0f5458c6bf86537a13cdfe6018cc170ea75' }, h("button", { key: 'b5df62731d6cb4a0834e6962707d84a4ffc1556a', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '32e02064526f17fe0f3b52078ee681e60f3cd7e5', name: "chevrons-left" }))));
     }
     static get is() { return "kritzel-back-to-content"; }
     static get encapsulation() { return "shadow"; }