kritzel-stencil 0.4.20 → 0.4.21

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: '830e1761493f6a45dfc8d7a63e260de00418c219' }, h("kritzel-dialog", { key: '35bebb215d583ee21b658c5a926335c6c4ffbbeb', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '0bfbe1a9de453b9282a4a787aaa243f50c2af620', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+        return (h(Host, { key: '71f8a12325a781212dd6f2c8b794563fcb4eee64' }, h("kritzel-dialog", { key: '1abe7c1dedcf79433a95d60dadce342f46e62c3a', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '9e8b3a11d97c1a10c6693434eb2e8bfc1d3fda7d', 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: '0e6a5c0b25595499bc676008b22a6b27752666f3' }, h("kritzel-dialog", { key: '1770c3cf05e2ff488872da0db990d119f6903f26', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: 'ac629b3c4078c121009d64d7ba29ca8cc0fd7d64', class: "share-content" }, h("div", { key: 'c31fd9bcec831b9105a9784c0764b7d4773fc571', class: "share-section" }, h("div", { key: '1e1177dc959ca3e8e4447e6eda4ed4bf7f2faaff', class: "share-row" }, h("div", { key: 'b82c3a22f22291f2a79b0ebc98825fbc35e849fe', class: "share-label-group" }, h("label", { key: 'f4551050cb0434896f29524b540a7222f48085f2', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: '13ae0f33238041ea949bdd55ac5ba271c58fbdc5', class: "share-description" }, this.internalIsPublic
+        return (h(Host, { key: 'f6028ad618f04e3be65c816f4b53c4ccaa93fc71' }, h("kritzel-dialog", { key: '7dabab65955f287650de4ba484e37f4ccdd7c57e', dialogTitle: this.terms['share.dialogTitle'] ?? 'Share Workspace', size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '321e2b17048dea20528c0f34f39a462548c64689', class: "share-content" }, h("div", { key: 'b31bbe2f686f5fe2fdc03189ffb98082683fff63', class: "share-section" }, h("div", { key: '2c864e00aa4c2da0a7f8ee6c83f149e6e93610a5', class: "share-row" }, h("div", { key: 'cbee03ac7ec9ee82f22c77d3681d4a540a0780a3', class: "share-label-group" }, h("label", { key: '3be7c8dc2ac2f7dbfe6458a902b14a887895fdc3', class: "share-label" }, this.terms['share.linkSharing.label'] ?? 'Link sharing'), h("p", { key: 'c7401bc76fdccbafc6c7c4e37380fc75f35b3a99', 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: '9e7b75fe3ae7994fae8a498f1654636481365768', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: '1fb6f344bc897284c7d942aeddc77968f7af0509', class: "share-section" }, h("div", { key: '23b4889472eeb7c36c5ebf3655883346cb32bf6c', class: "share-url-container" }, h("input", { key: 'ed5b25430b5013c453ea829ce328a5b4adafd2d9', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: 'ba5b067993e0fab26b149057a4e70f394525cc90', 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: '3f684e493506b62d5c5b32f991c2855f64302e29', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: 'a6314296e3301a1d487d34573fcf581a307cebf4', class: "share-qr-container" }, h("img", { key: '7521ce575728d0418564dc2c407381a536053394', 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: '52ae14da0d79797e9ad73f1ffbac003fd1395f47', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: this.terms['share.linkSharing.toggleLabel'] ?? 'Enable link sharing' }))), this.internalIsPublic && (h("div", { key: 'bd44618680db14d7d95f0c1bbc4441a103e9f15a', class: "share-section" }, h("div", { key: '659cd6b2e2e719d76f692a8dc5a8c0855e5d246d', class: "share-url-container" }, h("input", { key: '76be432ecaad753cb7043aad912d8aa1770afb61', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: 'ef75a04964fb481fae2f6e924497eb2adedc100d', 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: '06bbdc32d4348ca6d75dbbe11ba74d94e1c86882', name: this.copySuccess ? 'check' : 'copy', size: 18 }))), this.qrCodeDataUrl && (h("div", { key: '9246e86b26a9794738a29e6a6bfe6c4812339449', class: "share-qr-container" }, h("img", { key: '90e18eee230c23e0bfd773c9b8a6967803ae10dc', 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"; }