kritzel-stencil 0.4.24 → 0.4.26

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: '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 }))));
     }
     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: '8b12f354a3395cd69c7199115ce998cf2eb26eb2' }, h("div", { key: '39008613327d50b75270dd78ea498113e5e9617b', 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: '2fee8c1343888c34bbed7dd172b946ff732f6fc1', style: {
+        return (h(Host, { key: '407a2f458626f02808fc9d718046a635de71662b', 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: '13c00678bd485f1f5bc2676e2c89fd0019f5e089', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '67937f71c611f36a2c47ee2632a8657ced1d8cc7' }))));
     }
     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: '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" }))));
     }
     static get is() { return "kritzel-back-to-content"; }
     static get encapsulation() { return "shadow"; }