@neo4j-ndl/base 4.17.7 → 4.18.0

package/lib/neo4j-ds-styles.css

@@ -10961,6 +10961,577 @@ button.ndl-avatar:focus-visible {
   background-color:var(--theme-color-neutral-bg-stronger);
   color:var(--theme-color-neutral-text-inverse);
 }
+.ndl-combobox.ndl-combobox-field {
+  display:inline-flex;
+  min-width:0px;
+  max-width:100%;
+  flex-direction:column;
+
+    width:320px;
+}
+.ndl-combobox.ndl-combobox-field.ndl-fluid {
+  display:flex;
+  width:100%;
+}
+.ndl-combobox.ndl-combobox-field.ndl-clean {
+  width:-moz-fit-content;
+  width:fit-content;
+}
+.ndl-combobox.ndl-combobox-custom-trigger {
+  display:contents;
+}
+.ndl-combobox .ndl-combobox-label-row {
+  margin-bottom:4px;
+  display:flex;
+  align-items:center;
+  gap:4px;
+}
+.ndl-combobox .ndl-combobox-label-row.ndl-visually-hidden {
+  position:absolute;
+  width:1px;
+  height:1px;
+  padding:0;
+  margin:-1px;
+  overflow:hidden;
+  clip:rect(0, 0, 0, 0);
+  white-space:nowrap;
+  border-width:0;
+}
+.ndl-combobox .ndl-combobox-label {
+  color:var(--theme-color-neutral-text-weak);
+}
+.ndl-combobox .ndl-combobox-label-indicator{
+    margin-left:auto;
+    font-style:italic;
+    color:var(--theme-color-neutral-text-weaker);
+  }
+.ndl-combobox .ndl-combobox-message:not(:empty) {
+  margin-top:4px;
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  gap:4px;
+  color:var(--theme-color-neutral-text-weak);
+}
+.ndl-combobox .ndl-combobox-message .ndl-error-icon {
+  width:16px;
+  height:16px;
+  flex-shrink:0;
+  color:var(--theme-color-danger-text);
+}
+.ndl-combobox .ndl-combobox-message .ndl-error-text {
+  color:var(--theme-color-danger-text);
+}
+.ndl-combobox.ndl-large .ndl-combobox-message .ndl-error-icon {
+  width:20px;
+  height:20px;
+}
+.ndl-combobox .ndl-combobox-control{
+    position:relative;
+    box-sizing:border-box;
+    display:flex;
+    width:100%;
+    cursor:pointer;
+    align-items:center;
+    justify-content:space-between;
+    overflow:hidden;
+    border-radius:4px;
+    border-style:none;
+    background-color:var(--theme-color-neutral-bg-weak);
+    outline-style:solid;
+    outline-width:1px;
+    outline-offset:-1px;
+    outline-color:var(--theme-color-neutral-border-strong);
+  font:var(--typography-body-medium);
+  letter-spacing:var(--typography-body-medium-letter-spacing);
+  font-family:var(--typography-body-medium-font-family), sans-serif;
+
+    box-shadow:0 0 0 0 transparent;
+    transition:box-shadow var(--motion-transition-quick);
+  }
+.ndl-combobox .ndl-combobox-control:has(.ndl-combobox-trigger:focus-visible) {
+  outline-width:2px;
+  outline-offset:-2px;
+  outline-color:var(--theme-color-primary-focus);
+}
+.ndl-combobox .ndl-combobox-control:hover:not(.ndl-clean):not(.ndl-disabled){
+      box-shadow:0 0 0 4px var(--theme-color-neutral-hover);
+    }
+.ndl-combobox .ndl-combobox-control:hover.ndl-clean {
+  background-color:var(--theme-color-neutral-hover);
+}
+.ndl-combobox .ndl-combobox-control.ndl-clean {
+  background-color:transparent;
+  outline:2px solid transparent;
+  outline-offset:2px;
+}
+.ndl-combobox .ndl-combobox-control.ndl-clean:has(.ndl-combobox-trigger:focus-visible) {
+  outline-offset:-2px;
+  outline-color:var(--theme-color-primary-focus);
+}
+.ndl-combobox .ndl-combobox-control.ndl-small {
+  min-height:28px;
+  gap:4px;
+  padding-top:4px;
+  padding-bottom:4px;
+  padding-left:4px;
+  padding-right:6px;
+}
+.ndl-combobox .ndl-combobox-control.ndl-small.ndl-is-multi {
+  padding-top:2px;
+  padding-bottom:2px;
+  padding-left:2px;
+}
+.ndl-combobox .ndl-combobox-control.ndl-medium {
+  min-height:32px;
+  gap:4px;
+  padding-top:6px;
+  padding-bottom:6px;
+  padding-left:6px;
+  padding-right:8px;
+}
+.ndl-combobox .ndl-combobox-control.ndl-medium.ndl-is-multi {
+  padding-top:4px;
+  padding-bottom:4px;
+  padding-left:4px;
+}
+.ndl-combobox .ndl-combobox-control.ndl-large {
+  min-height:40px;
+  gap:8px;
+  padding:8px;
+  font:var(--typography-body-large);
+  letter-spacing:var(--typography-body-large-letter-spacing);
+  font-family:var(--typography-body-large-font-family), sans-serif;
+}
+.ndl-combobox .ndl-combobox-control.ndl-large.ndl-is-multi {
+  padding-top:6px;
+  padding-bottom:6px;
+  padding-left:6px;
+}
+.ndl-combobox .ndl-combobox-control.ndl-disabled {
+  cursor:not-allowed;
+}
+.ndl-combobox .ndl-combobox-control.ndl-has-error {
+  outline-style:solid;
+  outline-width:2px;
+  outline-offset:-2px;
+  outline-color:var(--theme-color-danger-border-strong);
+}
+.ndl-combobox .ndl-combobox-control.ndl-has-error:has(.ndl-combobox-trigger:focus-visible) {
+  outline-width:2px;
+  outline-offset:-2px;
+  outline-color:var(--theme-color-danger-border-strong);
+}
+.ndl-combobox .ndl-combobox-value-container {
+  display:flex;
+  min-width:0px;
+  flex:1 1 0%;
+  flex-wrap:wrap;
+  align-items:center;
+  gap:4px;
+}
+.ndl-combobox .ndl-combobox-control.ndl-small .ndl-combobox-value-container {
+  gap:2px;
+}
+.ndl-combobox .ndl-combobox-multi-value {
+  display:flex;
+  min-width:0px;
+  max-width:100%;
+}
+.ndl-combobox .ndl-combobox-multi-value.ndl-tag-new {
+  max-width:100%;
+}
+.ndl-combobox .ndl-combobox-value-container.ndl-counter-reserved .ndl-combobox-multi-value{
+    max-width:calc(100% - var(--ndl-combobox-counter-reserve, 0px));
+  }
+.ndl-combobox .ndl-combobox-multi-value.ndl-overflowed,
+  .ndl-combobox .ndl-combobox-multi-value-measure {
+  pointer-events:none;
+  visibility:hidden;
+  position:absolute;
+}
+.ndl-combobox .ndl-combobox-multi-value-counter {
+  display:flex;
+  min-width:0px;
+  max-width:100%;
+  flex-shrink:0;
+}
+.ndl-combobox .ndl-combobox-multi-value-counter,
+  .ndl-combobox .ndl-combobox-multi-value-measure{
+    font-variant-numeric:tabular-nums;
+  }
+.ndl-combobox .ndl-combobox-visually-hidden {
+  position:absolute;
+  width:1px;
+  height:1px;
+  padding:0;
+  margin:-1px;
+  overflow:hidden;
+  clip:rect(0, 0, 0, 0);
+  white-space:nowrap;
+  border-width:0;
+}
+.ndl-combobox .ndl-combobox-trigger {
+  margin:0px;
+  display:flex;
+  min-width:24px;
+  flex:1 1 0%;
+  cursor:pointer;
+  align-items:center;
+  border-width:0px;
+  background-color:transparent;
+  padding:0px;
+  text-align:left;
+  outline:2px solid transparent;
+  outline-offset:2px;
+  font:var(--typography-body-medium);
+  letter-spacing:var(--typography-body-medium-letter-spacing);
+  font-family:var(--typography-body-medium-font-family), sans-serif;
+}
+.ndl-combobox .ndl-combobox-trigger.ndl-disabled {
+  cursor:not-allowed;
+}
+.ndl-combobox .ndl-combobox-trigger.ndl-collapsed {
+  position:absolute;
+  width:1px;
+  height:1px;
+  padding:0;
+  margin:-1px;
+  overflow:hidden;
+  clip:rect(0, 0, 0, 0);
+  white-space:nowrap;
+  border-width:0;
+  min-width:0px;
+}
+.ndl-combobox .ndl-combobox-control.ndl-is-multi .ndl-combobox-trigger {
+  order:1;
+}
+.ndl-combobox .ndl-combobox-control.ndl-large .ndl-combobox-trigger{
+  font:var(--typography-body-large);
+  letter-spacing:var(--typography-body-large-letter-spacing);
+  font-family:var(--typography-body-large-font-family), sans-serif;
+}
+.ndl-combobox .ndl-combobox-single-value {
+  display:block;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  color:var(--theme-color-neutral-text-default);
+}
+.ndl-combobox .ndl-combobox-placeholder {
+  display:block;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  color:var(--theme-color-neutral-text-weaker);
+}
+.ndl-combobox.ndl-disabled .ndl-combobox-single-value,
+    .ndl-combobox.ndl-disabled .ndl-combobox-placeholder,
+    .ndl-combobox.ndl-disabled .ndl-combobox-icon,
+    .ndl-combobox.ndl-disabled .ndl-combobox-label,
+    .ndl-combobox.ndl-disabled .ndl-combobox-label-indicator {
+  color:var(--theme-color-neutral-text-weakest);
+}
+.ndl-combobox .ndl-combobox-indicators-container {
+  display:flex;
+  flex-shrink:0;
+  flex-direction:row;
+  align-items:center;
+  gap:8px;
+  align-self:stretch;
+}
+.ndl-combobox .ndl-combobox-control.ndl-large .ndl-combobox-indicators-container {
+  gap:12px;
+}
+.ndl-combobox .ndl-combobox-clear {
+  display:flex;
+  height:100%;
+  flex-direction:row;
+  align-items:center;
+  gap:8px;
+  padding:0px;
+}
+.ndl-combobox .ndl-combobox-control.ndl-large .ndl-combobox-clear {
+  gap:12px;
+}
+.ndl-combobox .ndl-combobox-clear-button {
+  display:flex;
+  width:16px;
+  height:16px;
+  align-items:center;
+  justify-content:center;
+  border-radius:4px;
+  border-width:0px;
+  background-color:transparent;
+  padding:0px;
+  color:var(--theme-color-neutral-text-weak);
+  outline:2px solid transparent;
+  outline-offset:2px;
+}
+.ndl-combobox .ndl-combobox-clear-button:hover {
+  background-color:var(--theme-color-neutral-hover);
+  color:var(--theme-color-neutral-text-default);
+}
+.ndl-combobox .ndl-combobox-clear-button:focus-visible {
+  outline-style:solid;
+  outline-width:2px;
+  outline-offset:0px;
+  outline-color:var(--theme-color-primary-focus);
+}
+.ndl-combobox .ndl-combobox-divider {
+  height:75%;
+  width:1px;
+  background-color:var(--theme-color-neutral-border-weak);
+}
+.ndl-combobox .ndl-combobox-dropdown-indicator {
+  display:flex;
+  align-items:center;
+}
+.ndl-combobox .ndl-combobox-dropdown-indicator .ndl-combobox-icon {
+  width:16px;
+  height:16px;
+  color:var(--theme-color-neutral-text-weak);
+
+      transition:transform var(--motion-transition-quick);
+}
+.ndl-combobox .ndl-combobox-dropdown-indicator.ndl-open .ndl-combobox-icon {
+  --tw-rotate:180deg;
+  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.ndl-combobox .ndl-combobox-control.ndl-disabled .ndl-combobox-dropdown-indicator .ndl-combobox-icon {
+  color:var(--theme-color-neutral-text-weakest);
+}
+.ndl-combobox .ndl-combobox-control.ndl-large .ndl-combobox-clear-button,
+    .ndl-combobox .ndl-combobox-control.ndl-large .ndl-combobox-icon {
+  width:20px;
+  height:20px;
+}
+.ndl-combobox-panel {
+  border-radius:6px;
+  border-width:1px;
+  border-color:var(--theme-color-neutral-border-weak);
+  background-color:var(--theme-color-neutral-bg-weak);
+  --tw-shadow:var(--theme-shadow-overlay);
+  --tw-shadow-colored:var(--theme-shadow-overlay);
+  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  z-index:40;
+  display:flex;
+  flex-direction:column;
+  overflow:hidden;
+  min-width:max(320px, var(--ndl-combobox-reference-width, 0px));
+}
+.ndl-combobox-empty-state {
+  padding-top:24px;
+  padding-bottom:24px;
+  padding-left:6px;
+  padding-right:6px;
+  text-align:center;
+  color:var(--theme-color-neutral-text-weaker);
+}
+.ndl-combobox-empty-state.ndl-combobox-loading-state {
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  justify-content:center;
+  gap:8px;
+}
+.ndl-combobox-input-wrapper {
+  display:flex;
+  align-items:center;
+  gap:6px;
+  border-bottom-width:1px;
+  border-color:var(--theme-color-neutral-border-weak);
+  padding-left:12px;
+  padding-right:12px;
+  padding-top:8px;
+  padding-bottom:8px;
+}
+.ndl-combobox-input-leading {
+  width:16px;
+  height:16px;
+  flex-shrink:0;
+  color:var(--theme-color-neutral-text-weak);
+}
+.ndl-combobox-input-label {
+  position:absolute;
+  width:1px;
+  height:1px;
+  padding:0;
+  margin:-1px;
+  overflow:hidden;
+  clip:rect(0, 0, 0, 0);
+  white-space:nowrap;
+  border-width:0;
+}
+.ndl-combobox-form-control {
+  position:absolute;
+  width:1px;
+  height:1px;
+  padding:0;
+  margin:-1px;
+  overflow:hidden;
+  clip:rect(0, 0, 0, 0);
+  white-space:nowrap;
+  border-width:0;
+}
+.ndl-combobox-input{
+  min-width:0px;
+  flex:1 1 0%;
+  background-color:transparent;
+  color:var(--theme-color-neutral-text-default);
+  outline:2px solid transparent;
+  outline-offset:2px;
+  font:var(--typography-body-medium);
+  letter-spacing:var(--typography-body-medium-letter-spacing);
+  font-family:var(--typography-body-medium-font-family), sans-serif;
+}
+.ndl-combobox-input:focus-visible {
+  outline:2px solid transparent;
+  outline-offset:2px;
+}
+.ndl-combobox-input::-moz-placeholder {
+  font-style:italic;
+  color:var(--theme-color-neutral-text-weaker);
+}
+.ndl-combobox-input::placeholder {
+  font-style:italic;
+  color:var(--theme-color-neutral-text-weaker);
+}
+.ndl-combobox-listbox {
+  display:flex;
+  max-height:268px;
+  flex-direction:column;
+  overflow-y:auto;
+  padding:6px;
+}
+.ndl-combobox-listbox:has(+ .ndl-combobox-actions) {
+  padding-bottom:0px;
+}
+.ndl-combobox-actions {
+  display:flex;
+  flex-shrink:0;
+  flex-direction:column;
+  padding-left:6px;
+  padding-right:6px;
+  padding-bottom:6px;
+}
+.ndl-combobox-virtual-space {
+  position:relative;
+  width:100%;
+  flex-shrink:0;
+}
+.ndl-combobox-virtual-row {
+  position:absolute;
+  top:0px;
+  left:0px;
+  width:100%;
+}
+.ndl-combobox-empty-state + .ndl-combobox-actions .ndl-combobox-action-divider {
+  margin-top:0px;
+}
+.ndl-combobox-group {
+  display:flex;
+  flex-direction:column;
+  row-gap:2px;
+}
+.ndl-combobox-group-header {
+  color:var(--theme-color-neutral-text-weaker);
+  font:var(--typography-body-small);
+  letter-spacing:var(--typography-body-small-letter-spacing);
+  font-family:var(--typography-body-small-font-family), sans-serif;
+  padding-top:4px;
+  padding-bottom:4px;
+  padding-left:6px;
+  padding-right:6px;
+}
+.ndl-combobox-option {
+  border-radius:4px;
+  color:var(--theme-color-neutral-text-default);
+  font:var(--typography-body-medium);
+  letter-spacing:var(--typography-body-medium-letter-spacing);
+  font-family:var(--typography-body-medium-font-family), sans-serif;
+  padding-top:6px;
+  padding-bottom:6px;
+  padding-left:6px;
+  padding-right:12px;
+  cursor:pointer;
+}
+.ndl-combobox-option.ndl-focused {
+  background-color:var(--theme-color-neutral-hover);
+}
+.ndl-combobox-option.ndl-disabled {
+  cursor:not-allowed;
+}
+.ndl-combobox-option-create:not(:first-child) {
+  margin-top:4px;
+  border-top-width:1px;
+  border-color:var(--theme-color-neutral-border-weak);
+  padding-top:8px;
+}
+.ndl-combobox-option-create .ndl-combobox-option-content-leading-visual {
+  color:var(--theme-color-primary-icon);
+}
+.ndl-combobox-action-divider{
+  margin-top:6px;
+  margin-bottom:6px;
+}
+.ndl-combobox-option-content {
+  display:flex;
+  align-items:center;
+  -moz-column-gap:8px;
+       column-gap:8px;
+}
+.ndl-combobox-option-content .ndl-combobox-option-content-leading-visual {
+  margin-top:2px;
+  width:16px;
+  height:16px;
+  flex-shrink:0;
+  align-self:flex-start;
+  color:var(--theme-color-neutral-icon);
+}
+.ndl-combobox-option-content .ndl-combobox-option-content-leading-visual.ndl-disabled {
+  color:var(--theme-color-neutral-text-weakest);
+}
+.ndl-combobox-option-content .ndl-combobox-option-content-multi-select-indicator {
+  margin-top:2px;
+  display:flex;
+  width:16px;
+  height:16px;
+  flex-shrink:0;
+  align-self:flex-start;
+  pointer-events:none;
+}
+.ndl-combobox-option-content .ndl-combobox-option-content-multi-select-indicator .ndl-checkbox-label {
+  margin:0px;
+}
+.ndl-combobox-option-content .ndl-combobox-option-content-main {
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+}
+.ndl-combobox-option-content .ndl-combobox-option-content-label {
+  color:var(--theme-color-neutral-text-default);
+}
+.ndl-combobox-option-content .ndl-combobox-option-content-label.ndl-disabled {
+  color:var(--theme-color-neutral-text-weakest);
+}
+.ndl-combobox-option-content .ndl-combobox-option-content-description {
+  color:var(--theme-color-neutral-text-weaker);
+}
+.ndl-combobox-option-content .ndl-combobox-option-content-description.ndl-disabled {
+  color:var(--theme-color-neutral-text-weakest);
+}
+.ndl-combobox-option-content .ndl-combobox-option-content-selection-indicator {
+  margin-left:auto;
+  width:16px;
+  height:16px;
+  flex-shrink:0;
+  align-self:center;
+  color:var(--theme-color-neutral-icon);
+}
+.ndl-combobox-option-content .ndl-combobox-option-content-selection-indicator.ndl-disabled {
+  color:var(--theme-color-neutral-text-weakest);
+}
 .n-mb-2 {
   margin-bottom:8px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/base",
-  "version": "4.17.7",
+  "version": "4.18.0",
   "description": "Neo4j base package for the design system",
   "author": "Neo4j Inc.",
   "homepage": "https://www.neo4j.design",