kritzel-stencil 0.4.30 → 0.4.31

package/dist/collection/components/ui/kritzel-settings/kritzel-settings.css

@@ -1,137 +1,137 @@
-:host {
-  display: contents;
-}
-
-kritzel-dialog {
-  --kritzel-dialog-body-padding: 0;
-  --kritzel-dialog-width-large: 800px;
-  --kritzel-dialog-height-large: 500px;
-}
-
-
-.footer-button {
-  padding: 8px 16px;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.cancel-button {
-  border: 1px solid #ebebeb;
-  background: #fff;
-  color: inherit;
-}
-
-.cancel-button:hover {
-  background: #f5f5f5;
-}
-
-/* Settings Content */
-.settings-tab-panel {
-  display: none;
-}
-
-.settings-tab-panel.is-active {
-  display: block;
-}
-
-.settings-content {
-  padding: 0;
-}
-
-.settings-content h3 {
-  margin: 0 0 16px 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--kritzel-settings-content-heading-color, #333333);
-}
-
-.settings-content p {
-  margin: 0;
-  font-size: 14px;
-  color: var(--kritzel-settings-content-text-color, #666666);
-  line-height: 1.5;
-}
-
-.settings-group {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.settings-item {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.settings-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.settings-label {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--kritzel-settings-label-color, #333333);
-  margin: 0 0 4px 0;
-}
-
-.settings-description {
-  font-size: 12px;
-  color: var(--kritzel-settings-description-color, #888888);
-  margin: 0;
-  line-height: 1.4;
-}
-
-/* Shortcuts List */
-.shortcuts-list {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-.shortcuts-category {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.shortcuts-category-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--kritzel-settings-label-color, #333333);
-  margin: 0 0 4px 0;
-}
-
-.shortcuts-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.shortcut-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6px 8px;
-  border-radius: 4px;
-  background: var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02));
-}
-
-.shortcut-label {
-  font-size: 14px;
-  color: var(--kritzel-settings-content-text-color, #666666);
-}
-
-.shortcut-key {
-  font-family: monospace;
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  background: var(--kritzel-settings-shortcut-key-bg, #f0f0f0);
-  color: var(--kritzel-settings-shortcut-key-color, #333333);
-  border: 1px solid var(--kritzel-settings-shortcut-key-border, #ddd);
-}
+:host {
+  display: contents;
+}
+
+kritzel-dialog {
+  --kritzel-dialog-body-padding: 0;
+  --kritzel-dialog-width-large: 800px;
+  --kritzel-dialog-height-large: 500px;
+}
+
+
+.footer-button {
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.cancel-button {
+  border: 1px solid #ebebeb;
+  background: #fff;
+  color: inherit;
+}
+
+.cancel-button:hover {
+  background: #f5f5f5;
+}
+
+/* Settings Content */
+.settings-tab-panel {
+  display: none;
+}
+
+.settings-tab-panel.is-active {
+  display: block;
+}
+
+.settings-content {
+  padding: 0;
+}
+
+.settings-content h3 {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--kritzel-settings-content-heading-color, #333333);
+}
+
+.settings-content p {
+  margin: 0;
+  font-size: 14px;
+  color: var(--kritzel-settings-content-text-color, #666666);
+  line-height: 1.5;
+}
+
+.settings-group {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.settings-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.settings-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.settings-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--kritzel-settings-label-color, #333333);
+  margin: 0 0 4px 0;
+}
+
+.settings-description {
+  font-size: 12px;
+  color: var(--kritzel-settings-description-color, #888888);
+  margin: 0;
+  line-height: 1.4;
+}
+
+/* Shortcuts List */
+.shortcuts-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.shortcuts-category {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.shortcuts-category-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--kritzel-settings-label-color, #333333);
+  margin: 0 0 4px 0;
+}
+
+.shortcuts-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.shortcut-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 8px;
+  border-radius: 4px;
+  background: var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02));
+}
+
+.shortcut-label {
+  font-size: 14px;
+  color: var(--kritzel-settings-content-text-color, #666666);
+}
+
+.shortcut-key {
+  font-family: monospace;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: var(--kritzel-settings-shortcut-key-bg, #f0f0f0);
+  color: var(--kritzel-settings-shortcut-key-color, #333333);
+  border: 1px solid var(--kritzel-settings-shortcut-key-border, #ddd);
+}

package/dist/collection/components/ui/kritzel-settings/kritzel-settings.js

@@ -205,7 +205,7 @@ export class KritzelSettings {
         return (h("div", { class: "settings-categories-wrapper" }, h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'general' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.general.title', 'General Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.theme.label', 'Theme')), h("p", { class: "settings-description" }, this.t('settings.general.theme.description', 'Select a registered color theme for the editor interface.')), h("kritzel-dropdown", { options: this.availableThemes.map(t => ({ value: t, label: t })), value: this.theme, onValueChanged: this.handleThemeChange })), this.availableLocales.length > 0 && (h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.language.label', 'Language')), h("p", { class: "settings-description" }, this.t('settings.general.language.description', 'Select the display language for the editor interface.')), h("kritzel-dropdown", { options: this.availableLocales.map(l => ({ value: l.code, label: l.label })), value: this.locale, onValueChanged: this.handleLocaleChange }))), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale')), h("p", { class: "settings-description" }, this.t('settings.general.lockDrawingScale.description', 'When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level.')), h("kritzel-slide-toggle", { checked: this.lockDrawingScale, label: this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale'), onCheckedChange: this.handleLockDrawingScaleChange }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'viewport' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.viewport.title', 'Viewport Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.minZoom.label', 'Minimum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.minZoom.description', 'Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas.')), h("kritzel-numeric-input", { value: this.scaleMin, min: 0.0001, max: 1, step: 0.0001, onValueChange: this.handleScaleMinChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.maxZoom.label', 'Maximum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.maxZoom.description', 'Sets the maximum zoom level. Higher values allow zooming in closer for detailed work.')), h("kritzel-numeric-input", { value: this.scaleMax, min: 1, max: 1000, step: 1, onValueChange: this.handleScaleMaxChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryLeft.label', 'Viewport Boundary Left')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryLeft.description', 'Left boundary in world coordinates. Set to limit how far left the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryLeft, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryLeftChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryRight.label', 'Viewport Boundary Right')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryRight.description', 'Right boundary in world coordinates. Set to limit how far right the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryRight, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryRightChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryTop.label', 'Viewport Boundary Top')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryTop.description', 'Top boundary in world coordinates. Set to limit how far up the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryTop, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryTopChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryBottom.label', 'Viewport Boundary Bottom')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryBottom.description', 'Bottom boundary in world coordinates. Set to limit how far down the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryBottom, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryBottomChange }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'shortcuts' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.shortcuts.title', 'Keyboard Shortcuts')), h("div", { class: "shortcuts-list" }, Array.from(this.groupShortcutsByCategory()).map(([category, shortcuts]) => (h("div", { class: "shortcuts-category", key: category }, h("h4", { class: "shortcuts-category-title" }, category), h("div", { class: "shortcuts-group" }, shortcuts.map(shortcut => (h("div", { class: "shortcut-item", key: shortcut.key + shortcut.label }, h("span", { class: "shortcut-label" }, shortcut.label), h("kbd", { class: "shortcut-key" }, this.formatKeyCombo(shortcut)))))))))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'developer' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.developer.title', 'Developer Options')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showViewportInfo.description', 'Display viewport debug information such as position, zoom level, and boundaries.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showViewportInfo, label: this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info'), onCheckedChange: this.handleDebugInfoChange('showViewportInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showObjectInfo.label', 'Show Object Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showObjectInfo.description', 'Display debug information about objects on the canvas.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showObjectInfo, label: this.t('settings.developer.showObjectInfo.label', 'Show Object Info'), onCheckedChange: this.handleDebugInfoChange('showObjectInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showSyncProviderInfo.description', 'Display debug information about the sync provider connection status.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showSyncProviderInfo, label: this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info'), onCheckedChange: this.handleDebugInfoChange('showSyncProviderInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showMigrationInfo.description', 'Display debug information about data migrations.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showMigrationInfo, label: this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info'), onCheckedChange: this.handleDebugInfoChange('showMigrationInfo') }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'about' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.about.title', 'About')), h("p", null, this.t('settings.about.description', 'Kritzel - A drawing application')), h("p", { class: "version-info" }, "Version ", KRITZEL_VERSION), h("p", { class: "version-info" }, "App-State Schema v", CURRENT_APP_STATE_SCHEMA_VERSION), h("p", { class: "version-info" }, "Workspace Schema v", CURRENT_WORKSPACE_SCHEMA_VERSION)))));
     }
     render() {
-        return (h(Host, { key: '96981b34953ffdda4cfdfa9e6acc832dedc0c64a' }, h("kritzel-dialog", { key: '792a68aa1fe66780a937a95db802e9c6a2135091', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: 'dc7d99c2b90ea4a86bc23527a39eaec70d95acc8', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+        return (h(Host, { key: '0ca8d95d2557e4f36f9461295be02ff9d60878d9' }, h("kritzel-dialog", { key: '9396bc5d7ecff839d1df6007fd54b3bb0da31c85', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: 'cf8a0f60c3884dac3e1cd324065030c278f4e119', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
     }
     static get is() { return "kritzel-settings"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/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/ui/kritzel-share-dialog/kritzel-share-dialog.js

@@ -123,9 +123,9 @@ export class KritzelShareDialog {
         this.dialogClosed.emit();
     };
     render() {
-        return (h(Host, { key: '13e718f70f46a0c71e70d7330e0bcf655ebb60a3' }, h("kritzel-dialog", { key: 'd96e31d7259cc5c5461d94395ceecfc7491f403f', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '9a82641540675cb645e5520bfb1624e77b5eb382', class: "share-content" }, h("div", { key: '5eed405aaf5e39f71083e84d2db0c4177722915b', class: "share-section" }, h("div", { key: '2bb736f60448dcae354d2f7931c277fce9fe7964', class: "share-row" }, h("div", { key: 'f2b22b2ce9e3331b0bf142bcb280e3dae064f34d', class: "share-label-group" }, h("label", { key: '58daf90a8b4de173deaba2e93c31791d78c17214', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: 'ba5f9ee772ab44fd4cc9a3066894ee5da10c56d8', class: "share-description" }, this.internalIsPublic
+        return (h(Host, { key: 'f2d1fac8b68b48fe538f069d6cc9f791d5e758ac' }, h("kritzel-dialog", { key: 'a73f7790d5264f09f8bb80c5a320f37429608469', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '8b0ef0e299b3e5c53279decfdef4ef4e07d7ff9c', class: "share-content" }, h("div", { key: '16daa535eaa416cdf0249f47c056ed21518bfd58', class: "share-section" }, h("div", { key: '5d86fa767aa4daa2ce42980b6398bc54b742be8f', class: "share-row" }, h("div", { key: 'b79717b879cf4999818548bdd91e380b419a81d8', class: "share-label-group" }, h("label", { key: '9cfc62e8891c59c7f15d95bc463873a7cdc175c7', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: 'd1e98dadf980582bcf5bb01b1c43370cec7163b5', 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: '7f70df4db90f087d8d7a7efe98012f7bf897975d', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: '999fe3550e149b7e3f0ebf28f312fa5f676dd945', class: "share-section" }, h("div", { key: 'ff623a78f50b8a5e27a978e05e2ee2ba4ac1991b', class: "share-url-container" }, h("input", { key: '5c3b5c3e82366ebe4f4e7a73c6afa42dbbf39a20', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: '60ac0315841649722b32d098c787f2a0deeec979', 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: 'eacbd3b75c554d3c62a098ddd45b6723f59521b5', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: 'fc24d6a9673b5b16a35f905023e632a314cef4ce', class: "share-qr-container" }, h("img", { key: '3669f9138336cd4cf51d1e3de5caedaddac518e8', 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: 'cdd9dbc57880db945c968b79ea3be197d5b9a27f', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: '146c798e07c1a5f299322dc7ae1968e7fd2b704e', class: "share-section" }, h("div", { key: 'd49008c51f9ed44cf81e7b27f0420f6ebfd93d1b', class: "share-url-container" }, h("input", { key: '2087219bca0d1a0cb1db1c27cf326e8d0b5cda5b', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: 'fd2111eedfebbb0f1f0121ede24a3ba56029e842', 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: '97d3cd6c4b840661e069beb0064bd2152c240ddf', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: 'a94ce6bc58cdf507140b7732129989314567a6df', class: "share-qr-container" }, h("img", { key: '59d1132df0ada44bc0135bea2e1158b47ece4240', 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"; }