@kritzel/editor 0.4.31 → 0.4.33

package/dist/collection/components/kritzel-share-dialog/kritzel-share-dialog.css

@@ -1,150 +1,150 @@
-:host {
-  display: contents;
-}
-
-kritzel-dialog {
-  --kritzel-dialog-width-small: 420px;
-}
-
-.share-content {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.share-section {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.share-section-revoke {
-  padding-top: 12px;
-  border-top: 1px solid var(--kritzel-share-dialog-border-color, #e5e5e5);
-}
-
-.share-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.share-label-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  flex: 1;
-}
-
-.share-label {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--kritzel-share-dialog-label-color, #333333);
-  margin: 0;
-}
-
-.share-description {
-  font-size: 12px;
-  color: var(--kritzel-share-dialog-description-color, #666666);
-  margin: 0;
-  line-height: 1.4;
-}
-
-/* URL Input Container */
-.share-url-container {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: var(--kritzel-share-dialog-input-background, #f5f5f5);
-  border: 1px solid var(--kritzel-share-dialog-input-border-color, #e0e0e0);
-  border-radius: 6px;
-  padding: 4px 4px 4px 12px;
-}
-
-.share-qr-container {
-  display: flex;
-  justify-content: center;
-  margin-top: 16px;
-  margin-bottom: 16px;
-}
-
-.share-qr-image {
-  width: 180px;
-  height: 180px;
-  border-radius: 8px;
-  border: 1px solid var(--kritzel-share-dialog-qr-border-color, #e0e0e0);
-  background: var(--kritzel-share-dialog-qr-background, #ffffff);
-  padding: 8px;
-  box-sizing: border-box;
-}
-
-.share-url-input {
-  flex: 1;
-  border: none;
-  background: transparent;
-  font-size: 13px;
-  color: var(--kritzel-share-dialog-input-text-color, #333333);
-  outline: none;
-  min-width: 0;
-  padding: 8px 0;
-}
-
-.share-url-input:focus {
-  outline: none;
-}
-
-.share-url-input::selection {
-  background: var(--kritzel-share-dialog-selection-color, #cce5ff);
-}
-
-/* Copy Button */
-.copy-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border: none;
-  border-radius: 4px;
-  background: var(--kritzel-share-dialog-copy-button-background, #ffffff);
-  color: var(--kritzel-share-dialog-copy-button-color, #666666);
-  cursor: pointer;
-  transition: all 0.15s ease;
-  flex-shrink: 0;
-}
-
-.copy-button:hover {
-  background: var(--kritzel-share-dialog-copy-button-hover-background, #e8e8e8);
-  color: var(--kritzel-share-dialog-copy-button-hover-color, #333333);
-}
-
-.copy-button.copy-success {
-  background: var(--kritzel-share-dialog-copy-success-background, #d4edda);
-  color: var(--kritzel-share-dialog-copy-success-color, #28a745);
-}
-
-/* Revoke Button */
-.revoke-button {
-  align-self: flex-start;
-  padding: 8px 16px;
-  border: 1px solid var(--kritzel-share-dialog-revoke-button-border-color, #dc3545);
-  border-radius: 6px;
-  background: transparent;
-  color: var(--kritzel-share-dialog-revoke-button-color, #dc3545);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.revoke-button:hover {
-  background: var(--kritzel-share-dialog-revoke-button-hover-background, #dc3545);
-  color: var(--kritzel-share-dialog-revoke-button-hover-color, #ffffff);
-}
-
-/* Dropdown styling within the dialog */
-kritzel-dropdown {
-  --kritzel-dropdown-trigger-padding: 8px 12px;
-  --kritzel-dropdown-trigger-font-size: 13px;
-}
+:host {
+  display: contents;
+}
+
+kritzel-dialog {
+  --kritzel-dialog-width-small: 420px;
+}
+
+.share-content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.share-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.share-section-revoke {
+  padding-top: 12px;
+  border-top: 1px solid var(--kritzel-share-dialog-border-color, #e5e5e5);
+}
+
+.share-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.share-label-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+}
+
+.share-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--kritzel-share-dialog-label-color, #333333);
+  margin: 0;
+}
+
+.share-description {
+  font-size: 12px;
+  color: var(--kritzel-share-dialog-description-color, #666666);
+  margin: 0;
+  line-height: 1.4;
+}
+
+/* URL Input Container */
+.share-url-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--kritzel-share-dialog-input-background, #f5f5f5);
+  border: 1px solid var(--kritzel-share-dialog-input-border-color, #e0e0e0);
+  border-radius: 6px;
+  padding: 4px 4px 4px 12px;
+}
+
+.share-qr-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.share-qr-image {
+  width: 180px;
+  height: 180px;
+  border-radius: 8px;
+  border: 1px solid var(--kritzel-share-dialog-qr-border-color, #e0e0e0);
+  background: var(--kritzel-share-dialog-qr-background, #ffffff);
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+.share-url-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-size: 13px;
+  color: var(--kritzel-share-dialog-input-text-color, #333333);
+  outline: none;
+  min-width: 0;
+  padding: 8px 0;
+}
+
+.share-url-input:focus {
+  outline: none;
+}
+
+.share-url-input::selection {
+  background: var(--kritzel-share-dialog-selection-color, #cce5ff);
+}
+
+/* Copy Button */
+.copy-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 4px;
+  background: var(--kritzel-share-dialog-copy-button-background, #ffffff);
+  color: var(--kritzel-share-dialog-copy-button-color, #666666);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+
+.copy-button:hover {
+  background: var(--kritzel-share-dialog-copy-button-hover-background, #e8e8e8);
+  color: var(--kritzel-share-dialog-copy-button-hover-color, #333333);
+}
+
+.copy-button.copy-success {
+  background: var(--kritzel-share-dialog-copy-success-background, #d4edda);
+  color: var(--kritzel-share-dialog-copy-success-color, #28a745);
+}
+
+/* Revoke Button */
+.revoke-button {
+  align-self: flex-start;
+  padding: 8px 16px;
+  border: 1px solid var(--kritzel-share-dialog-revoke-button-border-color, #dc3545);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--kritzel-share-dialog-revoke-button-color, #dc3545);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.revoke-button:hover {
+  background: var(--kritzel-share-dialog-revoke-button-hover-background, #dc3545);
+  color: var(--kritzel-share-dialog-revoke-button-hover-color, #ffffff);
+}
+
+/* Dropdown styling within the dialog */
+kritzel-dropdown {
+  --kritzel-dropdown-trigger-padding: 8px 12px;
+  --kritzel-dropdown-trigger-font-size: 13px;
+}

package/dist/collection/components/kritzel-share-dialog/kritzel-share-dialog.js

@@ -123,9 +123,9 @@ export class KritzelShareDialog {
         this.dialogClosed.emit();
     };
     render() {
-        return (h(Host, { key: '49c70b80298550025811e6714c1dd9ee064a689e' }, h("kritzel-dialog", { key: 'f0e1f4824c9f80aeb5264259e521da5e134c18b0', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '89f2701613d0ab7ae91eed39759927ceec40bf75', class: "share-content" }, h("div", { key: 'bca0039ca39d019698c1a1a5d4020957d4ef73b1', class: "share-section" }, h("div", { key: 'c985d3dc0c95bc83ebb32f6b841b97a88473cc6d', class: "share-row" }, h("div", { key: '624bc298e8e67de4d68f92d03a4e0dee9055acce', class: "share-label-group" }, h("label", { key: 'eb9683c17734d9c3fdc6215ac8d9947e5df89780', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: '01c3a175c08728ba7f6d9d69208c5d8d34d6e453', class: "share-description" }, this.internalIsPublic
+        return (h(Host, { key: 'b7a8be6921198400c95003928dfed03acd3866b6' }, h("kritzel-dialog", { key: '742e50d49ee54ba135279d6d34c78fa05645744e', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: 'e16420d7eea180e42c5491f8314ba0106b1b572a', class: "share-content" }, h("div", { key: '0cc6522bcb123d722e29420ba8462af21e933fb7', class: "share-section" }, h("div", { key: 'da9c8954fca7b9c6a73776a702e917d517229cc8', class: "share-row" }, h("div", { key: '40760b33ca59a51d746ed76673219a26126ae60c', class: "share-label-group" }, h("label", { key: 'de6b6409a3c487560e3491e1f3c87cb66c34fa61', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: '6c0db50f81c1de442eb87322e5d562868819adac', class: "share-description" }, this.internalIsPublic
             ? (this.terms['share.linkSharing.enabledDescription'] ?? 'Anyone with the link can access this workspace.')
-            : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: 'e41bb690cab9e1eef3619f2277e66aa17ee6f66b', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: '8e3fdd4c7b13ef9484ab84d90fc84ee8a357da47', class: "share-section" }, h("div", { key: '344605384f1ae60cd199b54a43c8cd4b5c5b58c9', class: "share-url-container" }, h("input", { key: '790f096274d408d507ced3590db469b62eabd885', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: '8954c73a9bd586bb5457a9a15974bd2f98e52d27', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? (this.terms['share.copyLink.copied'] ?? 'Copied!') : (this.terms['share.copyLink.title'] ?? 'Copy link') }, h("kritzel-icon", { key: '45e0664c85ebc868a918382c0470e75ce41c5f5b', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: 'ea7785f9addf1d203ed75c7abf1ee1956f9fa56e', class: "share-qr-container" }, h("img", { key: '968f07d4b54d720cbbe959a201e418fbc22a3449', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
+            : (this.terms['share.linkSharing.disabledDescription'] ?? 'Link sharing is disabled. Only you can access this workspace.'))), h("kritzel-slide-toggle", { key: '57492b1e6576c2b842809ac8b29c67ad4bcb66f1', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: '9a6be392c660e13c6add3b671509f169a4ccb52e', class: "share-section" }, h("div", { key: '8ff6565cca2cf53ea7568ef4d2a1a0705daa8fa3', class: "share-url-container" }, h("input", { key: '3f8dffdf23a5b6f0744b63b5ceb9c488904b6c11', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: 'c6a629ef64ddfe2f7fa15dbbcaf344573e8085b9', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? (this.terms['share.copyLink.copied'] ?? 'Copied!') : (this.terms['share.copyLink.title'] ?? 'Copy link') }, h("kritzel-icon", { key: 'b748074ec82f1d97d0b0ea03366ee0353900512c', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: '444f8d53ea5ba95b35bd0882e0e91dba2edfdbc6', class: "share-qr-container" }, h("img", { key: 'a11e1dc20306392266794f765bb709f05f17d4a0', class: "share-qr-image", src: this.qrCodeDataUrl, alt: "QR code for share link" })))))))));
     }
     static get is() { return "kritzel-share-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/kritzel-slide-toggle/kritzel-slide-toggle.css

@@ -1,48 +1,48 @@
-:host {
-  display: inline-flex;
-  align-items: center;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  outline: none;
-  z-index: 1;
-  -webkit-tap-highlight-color: transparent;
-}
-
-:host(:focus-visible) .toggle-track {
-  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
-}
-
-:host(.disabled) {
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: default;
-}
-
-.toggle-track {
-  position: relative;
-  width: var(--kritzel-slide-toggle-width, 40px);
-  height: var(--kritzel-slide-toggle-height, 22px);
-  background-color: var(--kritzel-slide-toggle-track-color, #ccc);
-  border-radius: var(--kritzel-slide-toggle-border-radius, 11px);
-  transition: background-color var(--kritzel-slide-toggle-transition-duration, 0.2s) ease;
-}
-
-:host(.checked) .toggle-track {
-  background-color: var(--kritzel-slide-toggle-track-checked-color, #007AFF);
-}
-
-.toggle-thumb {
-  position: absolute;
-  top: 50%;
-  left: 2px;
-  transform: translateY(-50%);
-  width: var(--kritzel-slide-toggle-thumb-size, 18px);
-  height: var(--kritzel-slide-toggle-thumb-size, 18px);
-  background-color: var(--kritzel-slide-toggle-thumb-color, #fff);
-  border-radius: 50%;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  transition: left var(--kritzel-slide-toggle-transition-duration, 0.2s) ease;
-}
-
-:host(.checked) .toggle-thumb {
-  left: calc(var(--kritzel-slide-toggle-width, 40px) - var(--kritzel-slide-toggle-thumb-size, 18px) - 2px);
-}
+:host {
+  display: inline-flex;
+  align-items: center;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  outline: none;
+  z-index: 1;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:host(:focus-visible) .toggle-track {
+  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
+}
+
+:host(.disabled) {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: default;
+}
+
+.toggle-track {
+  position: relative;
+  width: var(--kritzel-slide-toggle-width, 40px);
+  height: var(--kritzel-slide-toggle-height, 22px);
+  background-color: var(--kritzel-slide-toggle-track-color, #ccc);
+  border-radius: var(--kritzel-slide-toggle-border-radius, 11px);
+  transition: background-color var(--kritzel-slide-toggle-transition-duration, 0.2s) ease;
+}
+
+:host(.checked) .toggle-track {
+  background-color: var(--kritzel-slide-toggle-track-checked-color, #007AFF);
+}
+
+.toggle-thumb {
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  transform: translateY(-50%);
+  width: var(--kritzel-slide-toggle-thumb-size, 18px);
+  height: var(--kritzel-slide-toggle-thumb-size, 18px);
+  background-color: var(--kritzel-slide-toggle-thumb-color, #fff);
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: left var(--kritzel-slide-toggle-transition-duration, 0.2s) ease;
+}
+
+:host(.checked) .toggle-thumb {
+  left: calc(var(--kritzel-slide-toggle-width, 40px) - var(--kritzel-slide-toggle-thumb-size, 18px) - 2px);
+}

package/dist/collection/components/kritzel-slide-toggle/kritzel-slide-toggle.js

@@ -21,7 +21,7 @@ export class KritzelSlideToggle {
         }
     };
     render() {
-        return (h(Host, { key: 'cedab6d6c0ae42325b68c6f17696f7527aa629be', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, h("div", { key: '8702a1d196a1a5f9fda7f8d1634fba9a580e3f66', class: "toggle-track" }, h("div", { key: '33e2986727467bcedb31c267a7d6c173e6fc0add', class: "toggle-thumb" }))));
+        return (h(Host, { key: '21474507cafab44ac713e7732d2bb3b1323951e1', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, h("div", { key: '9d973f03b674ae90c0f3dc78680feffb5e74e2f0', class: "toggle-track" }, h("div", { key: '3988d20da458ace01a0bb1af196d28c8fd290042', class: "toggle-thumb" }))));
     }
     static get is() { return "kritzel-slide-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/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/kritzel-split-button/kritzel-split-button.js

@@ -3,7 +3,7 @@ import { KritzelDevicesHelper } from "@kritzel/engine";
 export class KritzelSplitButton {
     host;
     buttonIcon = 'plus';
-    dropdownIcon = 'chevron-down';
+    dropdownIcon = 'chevronDown';
     items = [];
     mainButtonDisabled = false;
     menuButtonDisabled = false;
@@ -85,7 +85,7 @@ export class KritzelSplitButton {
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (h(Host, { key: '80f3c3e9287618077ac2a617adf7d6a0de655e7a', class: { mobile: this.isTouchDevice } }, h("button", { key: '91b74d5411e4923f5dff8b664e3de1a8bcfd1889', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: 'd089a83295928b61604e795db2d4696c463f00e2', name: this.buttonIcon })), h("div", { key: '7aa9f16c44edc37a1fce8ffdfddd78ae9b376024', class: "split-divider" }), h("button", { key: '45c8ee363f4d07c282b4a21381e1af80cf4a52f1', 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: 'bab844ef65aa599a138522d94f1e067e8003ff67', name: this.dropdownIcon })), h("kritzel-portal", { key: '9f7241ef66f83e05c18613f36605dc3b6c41352a', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '034c48192e15d56602b29a7e8d491e15cc01bd41', 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: 'fd367561351219e18883cf7bf72a1fd488b1d3e9', class: { mobile: this.isTouchDevice } }, h("button", { key: 'f9edff7ca0c77f2502947a98ab4bb64ed68d6437', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '31f8dc17a94d015d5881ca2475b4933a6183cafa', name: this.buttonIcon })), h("div", { key: '3620329f4b911cee3f4cbae4498c28c20e19f953', class: "split-divider" }), h("button", { key: 'cda9b17a019df40107f01d9bb644e5545218e891', 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: '03f04eb20ef66cc6ea8ed4104f26dc062afba680', name: this.dropdownIcon })), h("kritzel-portal", { key: 'e02bc799b56ad731db06719ae77b65b872e0a368', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '694b82e1c05411ea119fdb07aec0b747c6e3d6f4', 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"; }
@@ -139,7 +139,7 @@ export class KritzelSplitButton {
                 "setter": false,
                 "reflect": false,
                 "attribute": "dropdown-icon",
-                "defaultValue": "'chevron-down'"
+                "defaultValue": "'chevronDown'"
             },
             "items": {
                 "type": "unknown",