@kritzel/editor 0.4.31 → 0.4.33

package/dist/collection/components/kritzel-dropdown/kritzel-dropdown.css

@@ -1,190 +1,190 @@
-:host {
-  display: inline-flex;
-  vertical-align: middle;
-  width: 100%;
-  position: relative;
-}
-
-.dropdown-wrapper {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--kritzel-dropdown-border-color, #ebebeb);
-  border-radius: var(--kritzel-dropdown-border-radius, 6px);
-  overflow: visible;
-  height: 38px;
-  width: 100%;
-  position: relative;
-}
-
-.dropdown-wrapper:hover:not(:focus-within) {
-  border-color: var(--kritzel-dropdown-hover-border-color, #cccccc);
-}
-
-.dropdown-container {
-  flex: 1;
-  height: 100%;
-  min-width: 0;
-}
-
-.dropdown-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 0 8px;
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  border-radius: var(--kritzel-dropdown-border-radius, 6px);
-  border: none;
-  background-color: var(--kritzel-dropdown-background, #ffffff);
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  outline: none;
-  font-size: inherit;
-  font-family: inherit;
-  color: var(--kritzel-dropdown-text-color, #333333);
-  -webkit-tap-highlight-color: transparent;
-  text-align: left;
-}
-
-.dropdown-trigger:focus-visible {
-  outline: revert;
-}
-
-.dropdown-trigger.has-suffix-border {
-  border-right: 1px solid var(--kritzel-global-border-color, #ebebeb);
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.dropdown-trigger.has-prefix-border {
-  border-left: 1px solid var(--kritzel-global-border-color, #ebebeb);
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.dropdown-trigger-label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-}
-
-.dropdown-trigger-arrow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  transition: transform 0.2s ease;
-}
-
-.dropdown-trigger-arrow svg {
-  width: 100%;
-  height: 100%;
-}
-
-.dropdown-trigger.is-open .dropdown-trigger-arrow {
-  transform: rotate(180deg);
-}
-
-.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow {
-  transform: rotate(0deg);
-}
-
-.dropdown-menu {
-  position: absolute;
-  left: 0;
-  right: 0;
-  margin: 0;
-  padding: 4px 0;
-  list-style: none;
-  background-color: var(--kritzel-dropdown-background, #ffffff);
-  border: 1px solid var(--kritzel-global-border-color, #ebebeb);
-  border-radius: var(--kritzel-dropdown-menu-border-radius, var(--kritzel-dropdown-border-radius, 6px));
-  box-shadow: var(--kritzel-toolbar-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
-  z-index: 1000;
-  max-height: 240px;
-  overflow-y: auto;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    opacity 0.15s ease,
-    transform 0.15s ease,
-    visibility 0.15s;
-  outline: none;
-}
-
-/* Open downward (default) */
-.dropdown-menu.open-down {
-  top: calc(100% + 4px);
-  bottom: auto;
-  transform: translateY(-8px);
-}
-
-/* Open upward */
-.dropdown-menu.open-up {
-  bottom: calc(100% + 4px);
-  top: auto;
-  transform: translateY(8px);
-}
-
-.dropdown-menu.is-open {
-  opacity: 1;
-  visibility: inherit;
-  transform: translateY(0);
-}
-
-/* Adjust box shadow for upward opening */
-.dropdown-menu.open-up {
-  box-shadow: var(--kritzel-toolbar-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15));
-}
-
-.dropdown-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 8px 12px;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  color: var(--kritzel-dropdown-text-color, #333333);
-  transition: background-color 0.1s ease;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.dropdown-option.is-focused {
-  background-color: var(--kritzel-dropdown-hover-background-color, #f0f0f0);
-}
-
-.dropdown-option.is-selected {
-  font-weight: 600;
-  background-color: var(--kritzel-dropdown-selected-background-color, #007bff1a);
-}
-
-.dropdown-option-check {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  color: var(--kritzel-dropdown-accent-color, #007bff);
-}
-
-.dropdown-option-check svg {
-  width: 100%;
-  height: 100%;
-}
-
-/* Scrollbar styling */
-.dropdown-menu {
-  scrollbar-color: var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;
-  scrollbar-width: thin;
-}
-
-::slotted(*) {
-  height: 100%;
-  box-sizing: border-box;
-}
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+  width: 100%;
+  position: relative;
+}
+
+.dropdown-wrapper {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--kritzel-dropdown-border-color, #ebebeb);
+  border-radius: var(--kritzel-dropdown-border-radius, 6px);
+  overflow: visible;
+  height: 38px;
+  width: 100%;
+  position: relative;
+}
+
+.dropdown-wrapper:hover:not(:focus-within) {
+  border-color: var(--kritzel-dropdown-hover-border-color, #cccccc);
+}
+
+.dropdown-container {
+  flex: 1;
+  height: 100%;
+  min-width: 0;
+}
+
+.dropdown-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 8px;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: var(--kritzel-dropdown-border-radius, 6px);
+  border: none;
+  background-color: var(--kritzel-dropdown-background, #ffffff);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  outline: none;
+  font-size: inherit;
+  font-family: inherit;
+  color: var(--kritzel-dropdown-text-color, #333333);
+  -webkit-tap-highlight-color: transparent;
+  text-align: left;
+}
+
+.dropdown-trigger:focus-visible {
+  outline: revert;
+}
+
+.dropdown-trigger.has-suffix-border {
+  border-right: 1px solid var(--kritzel-global-border-color, #ebebeb);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.dropdown-trigger.has-prefix-border {
+  border-left: 1px solid var(--kritzel-global-border-color, #ebebeb);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.dropdown-trigger-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.dropdown-trigger-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.dropdown-trigger-arrow svg {
+  width: 100%;
+  height: 100%;
+}
+
+.dropdown-trigger.is-open .dropdown-trigger-arrow {
+  transform: rotate(180deg);
+}
+
+.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow {
+  transform: rotate(0deg);
+}
+
+.dropdown-menu {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+  background-color: var(--kritzel-dropdown-background, #ffffff);
+  border: 1px solid var(--kritzel-global-border-color, #ebebeb);
+  border-radius: var(--kritzel-dropdown-menu-border-radius, var(--kritzel-dropdown-border-radius, 6px));
+  box-shadow: var(--kritzel-toolbar-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
+  z-index: 1000;
+  max-height: 240px;
+  overflow-y: auto;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease,
+    visibility 0.15s;
+  outline: none;
+}
+
+/* Open downward (default) */
+.dropdown-menu.open-down {
+  top: calc(100% + 4px);
+  bottom: auto;
+  transform: translateY(-8px);
+}
+
+/* Open upward */
+.dropdown-menu.open-up {
+  bottom: calc(100% + 4px);
+  top: auto;
+  transform: translateY(8px);
+}
+
+.dropdown-menu.is-open {
+  opacity: 1;
+  visibility: inherit;
+  transform: translateY(0);
+}
+
+/* Adjust box shadow for upward opening */
+.dropdown-menu.open-up {
+  box-shadow: var(--kritzel-toolbar-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15));
+}
+
+.dropdown-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  color: var(--kritzel-dropdown-text-color, #333333);
+  transition: background-color 0.1s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.dropdown-option.is-focused {
+  background-color: var(--kritzel-dropdown-hover-background-color, #f0f0f0);
+}
+
+.dropdown-option.is-selected {
+  font-weight: 600;
+  background-color: var(--kritzel-dropdown-selected-background-color, #007bff1a);
+}
+
+.dropdown-option-check {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--kritzel-dropdown-accent-color, #007bff);
+}
+
+.dropdown-option-check svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Scrollbar styling */
+.dropdown-menu {
+  scrollbar-color: var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;
+  scrollbar-width: thin;
+}
+
+::slotted(*) {
+  height: 100%;
+  box-sizing: border-box;
+}

package/dist/collection/components/kritzel-dropdown/kritzel-dropdown.js

@@ -231,7 +231,7 @@ export class KritzelDropdown {
             'open-up': this.openDirection === 'up',
             'open-down': this.openDirection === 'down',
         };
-        return (h(Host, { key: '66ec6cbffa9fd25a7bad62d6e3477c0fe7726861' }, h("div", { key: '6dc1f20070dde95ab54f44d158659e99bd81b834', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: 'd9655fc7f5e6a0d74b4a1904a12cc0bf478ccf4e', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: '325af053df9588e99b493c422a1f369f0af2243a', class: "dropdown-container", style: { width: this.width } }, h("button", { key: '626d54cd8e01221b1cd61e61b9d53b534e7603db', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: 'bbc3ec7297ee98c1903cfd547ca20daf3a5f1311', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '591b71aec72d2e6eaa96e8eb4c91b1f34eb2177a', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: '317034d40ceab9ca72090f6a58fc0fa5b92f2db0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '98867959ff1d7fd5515a3fe400bdc2378013dcb9', points: "6 9 12 15 18 9" }))))), h("slot", { key: 'f9d2f73f7b233a30f57ba4a9209e1a32a8ee5e70', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: 'f15048910c0d24855fb1e940d2adc994dee83d06', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
+        return (h(Host, { key: 'c606b338e55dc66396105fa7b4fbdf372f3866e6' }, h("div", { key: 'aa32b73cac337fa4142ecc124cf039a59e3b3118', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: '2cd8e9ef246a24c49d58f76f227f36aed4786178', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: '80df8155e1907017d508e92f155bab5ae12dffab', class: "dropdown-container", style: { width: this.width } }, h("button", { key: 'd86463de7ec58248f1611d6b5d46f0eafc117f36', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: '4ef6a997f7a781fb409e97ed5bd6843d0eaff0bb', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '6601efcd69d84af1f022d14ede628bac743cc1f1', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: '6cb2efe7b4ca890562c10b0e24eb1dfdad90ec24', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'a340af5a61dccf5bc29c8a473726b58055c2e9db', points: "6 9 12 15 18 9" }))))), h("slot", { key: '5bd4e5ad4cc4642c7769ecac2106ba82bae626f2', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: 'e7a2be8ac261bc5fa1450940e2a57090d6be3315', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
             const isSelected = option.value === this.internalValue;
             const isFocused = index === this.focusedIndex;
             const optionClasses = {
@@ -265,7 +265,7 @@ export class KritzelDropdown {
                     "references": {
                         "DropdownOption": {
                             "location": "local",
-                            "path": "C:/Projects/kritzel/libs/editor/core/src/components/kritzel-dropdown/kritzel-dropdown.tsx",
+                            "path": "/home/runner/work/kritzel-private/kritzel-private/libs/editor/core/src/components/kritzel-dropdown/kritzel-dropdown.tsx",
                             "id": "src/components/kritzel-dropdown/kritzel-dropdown.tsx::DropdownOption"
                         }
                     }