@fremtind/jokul 0.8.1 → 0.10.0

package/src/components/combobox/styles/combobox.css

@@ -0,0 +1,337 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-combobox-border-color: #636060;
+    --jkl-combobox-text-color: #636060;
+    --jkl-combobox-background-color: transparent;
+    --jkl-combobox-open-color: #1b1917;
+    --jkl-combobox-open-background-color: #ffffff;
+    --jkl-combobox-focus-color: #1b1917;
+    --jkl-combobox-error-background-color: #f6b3b3;
+    --jkl-combobox-error-text-color: #636060;
+    --jkl-combobox-hover-option-color: #1b1917;
+    --jkl-combobox-hover-option-background-color: #f4f2ef;
+    --jkl-combobox-option-description-color: #636060;
+    --jkl-combobox-search-input-selection-color: rgba(27, 25, 23, 0.2);
+    --jkl-combobox-search-input-error-selection-color: rgba(27, 25, 23, 0.2);
+    --jkl-combobox-marked-value-border: #1b1917;
+    --jkl-combobox-marked-value-shadow: #f9f9f9;
+  }
+}
+[data-theme=light] {
+  --jkl-combobox-border-color: #636060;
+  --jkl-combobox-text-color: #636060;
+  --jkl-combobox-background-color: transparent;
+  --jkl-combobox-open-color: #1b1917;
+  --jkl-combobox-open-background-color: #ffffff;
+  --jkl-combobox-focus-color: #1b1917;
+  --jkl-combobox-error-background-color: #f6b3b3;
+  --jkl-combobox-error-text-color: #636060;
+  --jkl-combobox-hover-option-color: #1b1917;
+  --jkl-combobox-hover-option-background-color: #f4f2ef;
+  --jkl-combobox-option-description-color: #636060;
+  --jkl-combobox-search-input-selection-color: rgba(27, 25, 23, 0.2);
+  --jkl-combobox-search-input-error-selection-color: rgba(27, 25, 23, 0.2);
+  --jkl-combobox-marked-value-border: #1b1917;
+  --jkl-combobox-marked-value-shadow: #f9f9f9;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-combobox-border-color: #c8c5c3;
+    --jkl-combobox-text-color: #c8c5c3;
+    --jkl-combobox-background-color: transparent;
+    --jkl-combobox-open-color: #f9f9f9;
+    --jkl-combobox-open-background-color: #313030;
+    --jkl-combobox-focus-color: #f9f9f9;
+    --jkl-combobox-error-background-color: #f6b3b3;
+    --jkl-combobox-error-text-color: #636060;
+    --jkl-combobox-hover-option-color: #f9f9f9;
+    --jkl-combobox-hover-option-background-color: #444141;
+    --jkl-combobox-option-description-color: #ece9e5;
+    --jkl-combobox-search-input-selection-color: rgba(249, 249, 249, 0.25);
+    --jkl-combobox-search-input-error-selection-color: rgba(27, 25, 23, 0.2);
+    --jkl-combobox-marked-value-border: #f9f9f9;
+    --jkl-combobox-marked-value-shadow: #1b1917;
+  }
+}
+[data-theme=dark] {
+  --jkl-combobox-border-color: #c8c5c3;
+  --jkl-combobox-text-color: #c8c5c3;
+  --jkl-combobox-background-color: transparent;
+  --jkl-combobox-open-color: #f9f9f9;
+  --jkl-combobox-open-background-color: #313030;
+  --jkl-combobox-focus-color: #f9f9f9;
+  --jkl-combobox-error-background-color: #f6b3b3;
+  --jkl-combobox-error-text-color: #636060;
+  --jkl-combobox-hover-option-color: #f9f9f9;
+  --jkl-combobox-hover-option-background-color: #444141;
+  --jkl-combobox-option-description-color: #ece9e5;
+  --jkl-combobox-search-input-selection-color: rgba(249, 249, 249, 0.25);
+  --jkl-combobox-search-input-error-selection-color: rgba(27, 25, 23, 0.2);
+  --jkl-combobox-marked-value-border: #f9f9f9;
+  --jkl-combobox-marked-value-shadow: #1b1917;
+}
+
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-combobox-font-size: var(--jkl-body-font-size);
+  --jkl-combobox-line-height: var(--jkl-body-line-height);
+  --jkl-combobox-font-weight: var(--jkl-body-font-weight);
+  --jkl-combobox-button-padding: 0.5rem 0.375rem 0.5rem 0.75rem;
+  --jkl-combobox-button-active-value-padding: 0.5rem 0.375rem 0.5rem 0.5rem;
+  --jkl-combobox-input-height: 3rem;
+  --jkl-combobox-actions-right: 0.5rem;
+  --jkl-combobox-actions-top: 0.75rem;
+  --jkl-combobox-search-input-padding: var(--jkl-combobox-button-padding);
+  --jkl-combobox-native-padding: 0 2.5rem 0 0.5rem;
+  --jkl-combobox-option-padding: 0.5rem 0.75rem;
+  --jkl-combobox-option-line-height: 2rem;
+  --jkl-combobox-input-padding: 3.75rem;
+  --jkl-combobox-search-input-height: 1.75rem;
+  --jkl-combobox-tag-padding: 0.125rem;
+  --jkl-combobox-tag-height: 1.5rem;
+}
+@media (width >= 0) and (max-width: 679px) {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-combobox-input-height: 2.75rem;
+  }
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-combobox-font-size: var(--jkl-small-font-size);
+  --jkl-combobox-line-height: var(--jkl-small-line-height);
+  --jkl-combobox-font-weight: var(--jkl-small-font-weight);
+  --jkl-combobox-button-padding: 0.25rem 1.875rem 0.25rem 0.5rem;
+  --jkl-combobox-button-active-value-padding: 0.25rem 1.875rem 0.25rem 0.5rem;
+  --jkl-combobox-input-height: 2rem;
+  --jkl-combobox-actions-right: 0;
+  --jkl-combobox-actions-top: 0.375rem;
+  --jkl-combobox-search-input-padding: 0.25rem 0.5rem;
+  --jkl-combobox-native-padding: 1.5rem 0.25rem 0.25rem;
+  --jkl-combobox-option-padding: 0.25rem 0.5rem;
+  --jkl-combobox-option-line-height: 1.5rem;
+  --jkl-combobox-input-padding: 0.75rem;
+  --jkl-combobox-search-input-height: 1.25rem;
+  --jkl-combobox-tag-padding: 0 0.25rem;
+  --jkl-combobox-tag-height: 1.25rem;
+}
+
+.jkl-combobox {
+  position: relative;
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+}
+.jkl-combobox:active, .jkl-combobox:hover, .jkl-combobox:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-combobox {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-combobox:active, .jkl-combobox:hover, .jkl-combobox:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-combobox *:focus {
+  outline: none;
+}
+.jkl-combobox__wrapper {
+  position: relative;
+  min-width: 7rem;
+  max-width: 100%;
+  display: flex;
+  padding: var(--jkl-combobox-button-padding);
+  border-radius: 0.1875rem;
+  border: 0.0625rem solid var(--jkl-combobox-border-color);
+  box-shadow: 0 0 0 0.0625rem transparent;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: color, border-color, box-shadow;
+}
+.jkl-combobox__wrapper--active-value {
+  padding: var(--jkl-combobox-button-active-value-padding);
+}
+.jkl-combobox__wrapper:focus {
+  border-color: var(--jkl-combobox-focus-color);
+  color: var(--jkl-combobox-focus-color);
+  box-shadow: 0 0 0 0.0625rem var(--jkl-combobox-focus-color);
+  background-color: var(--jkl-combobox-open-background-color);
+}
+.jkl-combobox__wrapper:hover {
+  border-color: var(--jkl-combobox-focus-color);
+  box-shadow: 0 0 0 0.0625rem var(--jkl-combobox-focus-color);
+}
+.jkl-combobox__wrapper:hover ~ .jkl-combobox__arrow {
+  transform: translateY(calc(-50% + 0.1875rem));
+}
+.jkl-combobox__button {
+  padding: 0;
+}
+.jkl-combobox__button, .jkl-combobox__search-input {
+  font-size: var(--jkl-combobox-font-size);
+  line-height: var(--jkl-combobox-line-height);
+  font-weight: var(--jkl-combobox-font-weight);
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background-color: var(--jkl-combobox-background-color);
+  color: var(--jkl-combobox-text-color);
+  cursor: pointer;
+  text-align: left;
+  display: flex;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: color, border-color, box-shadow;
+}
+.jkl-combobox__search-input {
+  border: none;
+  outline: none;
+  align-self: end;
+  flex: 1 1 1ch;
+  max-height: var(--jkl-combobox-search-input-height);
+  padding-right: var(--jkl-combobox-input-padding);
+}
+.jkl-combobox__arrow {
+  pointer-events: none;
+  transform: translateY(-50%);
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: transform, color;
+}
+@media screen and (forced-colors: active) {
+  .jkl-combobox__arrow {
+    stroke: CanvasText;
+    fill: CanvasText;
+  }
+  .jkl-combobox__arrow svg, .jkl-combobox__arrow path {
+    stroke: CanvasText;
+    fill: CanvasText;
+  }
+}
+.jkl-combobox__menu {
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: height;
+  top: 100%;
+  overflow-y: auto;
+  position: absolute;
+  color: var(--jkl-combobox-text-color);
+  z-index: 7000;
+  left: -0.0625rem;
+  right: -0.0625rem;
+  background-color: var(--jkl-combobox-open-background-color);
+  border: 0.125rem solid var(--jkl-combobox-focus-color);
+  border-top: none;
+  border-radius: 0 0 0.1875rem 0.1875rem;
+  box-sizing: border-box;
+  max-height: calc((var(--jkl-combobox-max-shown-options, 5) + 0.5) * var(--jkl-combobox-input-height));
+}
+.jkl-combobox__option {
+  font-size: var(--jkl-combobox-text-font-size);
+  line-height: var(--jkl-combobox-text-line-height);
+  font-weight: var(--jkl-combobox-text-font-weight);
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  display: flex;
+  align-items: center;
+  border: 0;
+  background-color: var(--jkl-combobox-open-background-color);
+  transition-property: color, background-color;
+  cursor: pointer;
+  padding: var(--jkl-combobox-option-padding);
+  color: var(--jkl-combobox-open-color);
+  width: 100%;
+  text-align: left;
+  line-height: var(--jkl-combobox-option-line-height);
+}
+.jkl-combobox__option:focus, .jkl-combobox__option:hover {
+  color: var(--jkl-combobox-hover-option-color);
+  background-color: var(--jkl-combobox-hover-option-background-color);
+}
+.jkl-combobox__option-description {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+  color: var(--jkl-combobox-option-description-color);
+  display: block;
+  width: 100%;
+}
+.jkl-combobox__option--selected {
+  justify-content: space-between;
+}
+.jkl-combobox__option--selected:hover {
+  background-color: var(--jkl-combobox-hover-option-background-color);
+}
+.jkl-combobox__no-option {
+  padding: var(--jkl-combobox-option-padding);
+}
+.jkl-combobox__actions {
+  display: flex;
+  position: absolute;
+  right: var(--jkl-combobox-actions-right);
+  gap: 0.25rem;
+  top: var(--jkl-combobox-actions-top);
+}
+.jkl-combobox__tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-left: -4px;
+}
+.jkl-combobox__tags .jkl-tag {
+  margin: 1px 4px;
+  z-index: 1;
+  padding: var(--jkl-combobox-tag-padding);
+  height: var(--jkl-combobox-tag-height);
+}
+.jkl-combobox__tags .jkl-tag__marked {
+  border-radius: 6px;
+  box-shadow: 0 0 0 2px var(--jkl-combobox-marked-value-shadow) inset;
+  box-sizing: border-box;
+  border: 1px solid var(--jkl-combobox-marked-value-border);
+  margin: 0 4px;
+}
+.jkl-combobox__tags .jkl-tag .jkl-tooltip-trigger {
+  font-weight: 700;
+}
+.jkl-combobox--invalid .jkl-combobox__search-input,
+.jkl-combobox--invalid .jkl-combobox__wrapper {
+  background-color: var(--jkl-combobox-error-background-color);
+}
+.jkl-combobox--invalid .jkl-combobox__search-input,
+.jkl-combobox--invalid .jkl-combobox__button,
+.jkl-combobox--invalid .jkl-combobox__wrapper {
+  color: var(--jkl-combobox-error-text-color);
+}
+.jkl-combobox--invalid .jkl-combobox__search-input::selection {
+  background-color: var(--jkl-combobox-search-input-selection-color);
+}
+.jkl-combobox--menu-open .jkl-combobox__wrapper {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-color: var(--jkl-combobox-focus-color);
+  box-shadow: 0 0 0 0.0625rem var(--jkl-combobox-focus-color) inset;
+}
+.jkl-combobox--menu-open .jkl-combobox__wrapper:hover ~ .jkl-combobox__arrow {
+  transform: translateY(calc(-50% + -0.1875rem));
+}
+.jkl-combobox--menu-closed .jkl-combobox__search-input {
+  position: absolute;
+  background-color: transparent;
+  width: 94%;
+  padding-right: 0;
+}

package/src/components/combobox/styles/combobox.min.css

@@ -0,0 +1 @@
+@media screen and (prefers-color-scheme:light){:root{--jkl-combobox-border-color:#636060;--jkl-combobox-text-color:#636060;--jkl-combobox-background-color:#0000;--jkl-combobox-open-color:#1b1917;--jkl-combobox-open-background-color:#fff;--jkl-combobox-focus-color:#1b1917;--jkl-combobox-error-background-color:#f6b3b3;--jkl-combobox-error-text-color:#636060;--jkl-combobox-hover-option-color:#1b1917;--jkl-combobox-hover-option-background-color:#f4f2ef;--jkl-combobox-option-description-color:#636060;--jkl-combobox-search-input-selection-color:#1b191733;--jkl-combobox-search-input-error-selection-color:#1b191733;--jkl-combobox-marked-value-border:#1b1917;--jkl-combobox-marked-value-shadow:#f9f9f9}}[data-theme=light]{--jkl-combobox-border-color:#636060;--jkl-combobox-text-color:#636060;--jkl-combobox-background-color:#0000;--jkl-combobox-open-color:#1b1917;--jkl-combobox-open-background-color:#fff;--jkl-combobox-focus-color:#1b1917;--jkl-combobox-error-background-color:#f6b3b3;--jkl-combobox-error-text-color:#636060;--jkl-combobox-hover-option-color:#1b1917;--jkl-combobox-hover-option-background-color:#f4f2ef;--jkl-combobox-option-description-color:#636060;--jkl-combobox-search-input-selection-color:#1b191733;--jkl-combobox-search-input-error-selection-color:#1b191733;--jkl-combobox-marked-value-border:#1b1917;--jkl-combobox-marked-value-shadow:#f9f9f9}@media screen and (prefers-color-scheme:dark){:root{--jkl-combobox-border-color:#c8c5c3;--jkl-combobox-text-color:#c8c5c3;--jkl-combobox-background-color:#0000;--jkl-combobox-open-color:#f9f9f9;--jkl-combobox-open-background-color:#313030;--jkl-combobox-focus-color:#f9f9f9;--jkl-combobox-error-background-color:#f6b3b3;--jkl-combobox-error-text-color:#636060;--jkl-combobox-hover-option-color:#f9f9f9;--jkl-combobox-hover-option-background-color:#444141;--jkl-combobox-option-description-color:#ece9e5;--jkl-combobox-search-input-selection-color:#f9f9f940;--jkl-combobox-search-input-error-selection-color:#1b191733;--jkl-combobox-marked-value-border:#f9f9f9;--jkl-combobox-marked-value-shadow:#1b1917}}[data-theme=dark]{--jkl-combobox-border-color:#c8c5c3;--jkl-combobox-text-color:#c8c5c3;--jkl-combobox-background-color:#0000;--jkl-combobox-open-color:#f9f9f9;--jkl-combobox-open-background-color:#313030;--jkl-combobox-focus-color:#f9f9f9;--jkl-combobox-error-background-color:#f6b3b3;--jkl-combobox-error-text-color:#636060;--jkl-combobox-hover-option-color:#f9f9f9;--jkl-combobox-hover-option-background-color:#444141;--jkl-combobox-option-description-color:#ece9e5;--jkl-combobox-search-input-selection-color:#f9f9f940;--jkl-combobox-search-input-error-selection-color:#1b191733;--jkl-combobox-marked-value-border:#f9f9f9;--jkl-combobox-marked-value-shadow:#1b1917}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-combobox-font-size:var(--jkl-body-font-size);--jkl-combobox-line-height:var(--jkl-body-line-height);--jkl-combobox-font-weight:var(--jkl-body-font-weight);--jkl-combobox-button-padding:0.5rem 0.375rem 0.5rem 0.75rem;--jkl-combobox-button-active-value-padding:0.5rem 0.375rem 0.5rem 0.5rem;--jkl-combobox-input-height:3rem;--jkl-combobox-actions-right:0.5rem;--jkl-combobox-actions-top:0.75rem;--jkl-combobox-search-input-padding:var(--jkl-combobox-button-padding);--jkl-combobox-native-padding:0 2.5rem 0 0.5rem;--jkl-combobox-option-padding:0.5rem 0.75rem;--jkl-combobox-option-line-height:2rem;--jkl-combobox-input-padding:3.75rem;--jkl-combobox-search-input-height:1.75rem;--jkl-combobox-tag-padding:0.125rem;--jkl-combobox-tag-height:1.5rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-combobox-input-height:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-combobox-font-size:var(--jkl-small-font-size);--jkl-combobox-line-height:var(--jkl-small-line-height);--jkl-combobox-font-weight:var(--jkl-small-font-weight);--jkl-combobox-button-padding:0.25rem 1.875rem 0.25rem 0.5rem;--jkl-combobox-button-active-value-padding:0.25rem 1.875rem 0.25rem 0.5rem;--jkl-combobox-input-height:2rem;--jkl-combobox-actions-right:0;--jkl-combobox-actions-top:0.375rem;--jkl-combobox-search-input-padding:0.25rem 0.5rem;--jkl-combobox-native-padding:1.5rem 0.25rem 0.25rem;--jkl-combobox-option-padding:0.25rem 0.5rem;--jkl-combobox-option-line-height:1.5rem;--jkl-combobox-input-padding:0.75rem;--jkl-combobox-search-input-height:1.25rem;--jkl-combobox-tag-padding:0 0.25rem;--jkl-combobox-tag-height:1.25rem}.jkl-combobox{border-style:none;position:relative}.jkl-combobox,.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-combobox{border-style:revert}.jkl-combobox,.jkl-combobox:active,.jkl-combobox:focus,.jkl-combobox:hover{outline:revert;outline-style:revert}}.jkl-combobox :focus{outline:none}.jkl-combobox__wrapper{border:.0625rem solid var(--jkl-combobox-border-color);border-radius:.1875rem;box-shadow:0 0 0 .0625rem #0000;display:flex;max-width:100%;min-width:7rem;padding:var(--jkl-combobox-button-padding);position:relative;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease}.jkl-combobox__wrapper--active-value{padding:var(--jkl-combobox-button-active-value-padding)}.jkl-combobox__wrapper:focus{background-color:var(--jkl-combobox-open-background-color);color:var(--jkl-combobox-focus-color)}.jkl-combobox__wrapper:focus,.jkl-combobox__wrapper:hover{border-color:var(--jkl-combobox-focus-color);box-shadow:0 0 0 .0625rem var(--jkl-combobox-focus-color)}.jkl-combobox__wrapper:hover~.jkl-combobox__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-combobox__button{padding:0}.jkl-combobox__button,.jkl-combobox__search-input{background-color:var(--jkl-combobox-background-color);color:var(--jkl-combobox-text-color);cursor:pointer;display:flex;font-size:var(--jkl-combobox-font-size);font-weight:var(--jkl-combobox-font-weight);line-height:var(--jkl-combobox-line-height);overflow:hidden;text-align:left;text-overflow:ellipsis;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease;width:100%}.jkl-combobox__search-input{align-self:end;border:none;flex:1 1 1ch;max-height:var(--jkl-combobox-search-input-height);outline:none;padding-right:var(--jkl-combobox-input-padding)}.jkl-combobox__arrow{pointer-events:none;transform:translateY(-50%);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-combobox__arrow,.jkl-combobox__arrow path,.jkl-combobox__arrow svg{stroke:CanvasText;fill:CanvasText}}.jkl-combobox__menu{border:.125rem solid var(--jkl-combobox-focus-color);border-radius:0 0 .1875rem .1875rem;border-top:none;box-sizing:border-box;color:var(--jkl-combobox-text-color);left:-.0625rem;max-height:calc((var(--jkl-combobox-max-shown-options, 5) + .5)*var(--jkl-combobox-input-height));overflow-y:auto;position:absolute;right:-.0625rem;top:100%;transition-duration:.15s;transition-property:height;transition-timing-function:ease;z-index:7000}.jkl-combobox__menu,.jkl-combobox__option{background-color:var(--jkl-combobox-open-background-color)}.jkl-combobox__option{align-items:center;border:0;color:var(--jkl-combobox-open-color);cursor:pointer;display:flex;font-size:var(--jkl-combobox-text-font-size);font-weight:var(--jkl-combobox-text-font-weight);line-height:var(--jkl-combobox-text-line-height);line-height:var(--jkl-combobox-option-line-height);padding:var(--jkl-combobox-option-padding);text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease;width:100%}.jkl-combobox__option:focus,.jkl-combobox__option:hover{background-color:var(--jkl-combobox-hover-option-background-color);color:var(--jkl-combobox-hover-option-color)}.jkl-combobox__option-description{--jkl-icon-weight:300;color:var(--jkl-combobox-option-description-color);display:block;font-size:1rem;font-weight:400;line-height:1.5rem;width:100%}.jkl-combobox__option--selected{justify-content:space-between}.jkl-combobox__option--selected:hover{background-color:var(--jkl-combobox-hover-option-background-color)}.jkl-combobox__no-option{padding:var(--jkl-combobox-option-padding)}.jkl-combobox__actions{display:flex;gap:.25rem;position:absolute;right:var(--jkl-combobox-actions-right);top:var(--jkl-combobox-actions-top)}.jkl-combobox__tags{align-items:center;display:flex;flex-wrap:wrap;margin-left:-4px}.jkl-combobox__tags .jkl-tag{height:var(--jkl-combobox-tag-height);margin:1px 4px;padding:var(--jkl-combobox-tag-padding);z-index:1}.jkl-combobox__tags .jkl-tag__marked{border:1px solid var(--jkl-combobox-marked-value-border);border-radius:6px;box-shadow:0 0 0 2px var(--jkl-combobox-marked-value-shadow) inset;box-sizing:border-box;margin:0 4px}.jkl-combobox__tags .jkl-tag .jkl-tooltip-trigger{font-weight:700}.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{background-color:var(--jkl-combobox-error-background-color)}.jkl-combobox--invalid .jkl-combobox__button,.jkl-combobox--invalid .jkl-combobox__search-input,.jkl-combobox--invalid .jkl-combobox__wrapper{color:var(--jkl-combobox-error-text-color)}.jkl-combobox--invalid .jkl-combobox__search-input::selection{background-color:var(--jkl-combobox-search-input-selection-color)}.jkl-combobox--menu-open .jkl-combobox__wrapper{border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:var(--jkl-combobox-focus-color);box-shadow:0 0 0 .0625rem var(--jkl-combobox-focus-color) inset}.jkl-combobox--menu-open .jkl-combobox__wrapper:hover~.jkl-combobox__arrow{transform:translateY(calc(-50% - .1875rem))}.jkl-combobox--menu-closed .jkl-combobox__search-input{background-color:initial;padding-right:0;position:absolute;width:94%}

package/src/components/combobox/styles/combobox.scss

@@ -0,0 +1,307 @@
+@use "sass:color";
+@use "sass:math";
+@use "../../../core/jkl";
+@use "../../../core/jkl/colors";
+
+$_combobox-focus-color: jkl.$color-granitt;
+$_combobox-search-input-selection-color: color.scale(
+    $color: $_combobox-focus-color,
+    $alpha: -80%,
+);
+
+$_combobox-focus-color--inverted: jkl.$color-snohvit;
+$_combobox-search-input-selection-color--inverted: color.scale(
+    $color: $_combobox-focus-color--inverted,
+    $alpha: -75%,
+);
+
+@include jkl.light-mode-variables {
+    --jkl-combobox-border-color: #{jkl.$color-stein};
+    --jkl-combobox-text-color: #{jkl.$color-stein};
+    --jkl-combobox-background-color: transparent;
+    --jkl-combobox-open-color: #{jkl.$color-granitt};
+    --jkl-combobox-open-background-color: #{jkl.$color-hvit};
+    --jkl-combobox-focus-color: #{$_combobox-focus-color};
+    --jkl-combobox-error-background-color: #{jkl.$color-feil};
+    --jkl-combobox-error-text-color: #{jkl.$color-stein};
+    --jkl-combobox-hover-option-color: #{jkl.$color-granitt};
+    --jkl-combobox-hover-option-background-color: #{jkl.$color-sand};
+    --jkl-combobox-option-description-color: #{jkl.$color-stein};
+    --jkl-combobox-search-input-selection-color: #{$_combobox-search-input-selection-color};
+    --jkl-combobox-search-input-error-selection-color: #{$_combobox-search-input-selection-color};
+    --jkl-combobox-marked-value-border: #{jkl.$color-granitt};
+    --jkl-combobox-marked-value-shadow: #{jkl.$color-snohvit};
+}
+
+@include jkl.dark-mode-variables {
+    --jkl-combobox-border-color: #{jkl.$color-svaberg};
+    --jkl-combobox-text-color: #{jkl.$color-svaberg};
+    --jkl-combobox-background-color: transparent;
+    --jkl-combobox-open-color: #{jkl.$color-snohvit};
+    --jkl-combobox-open-background-color: #{jkl.$color-skifer};
+    --jkl-combobox-focus-color: #{$_combobox-focus-color--inverted};
+    --jkl-combobox-error-background-color: #{jkl.$color-feil};
+    --jkl-combobox-error-text-color: #{jkl.$color-stein};
+    --jkl-combobox-hover-option-color: #{jkl.$color-snohvit};
+    --jkl-combobox-hover-option-background-color: #{jkl.$color-fjellgra};
+    --jkl-combobox-option-description-color: #{jkl.$color-dis};
+    --jkl-combobox-search-input-selection-color: #{$_combobox-search-input-selection-color--inverted};
+    --jkl-combobox-search-input-error-selection-color: #{$_combobox-search-input-selection-color};
+    --jkl-combobox-marked-value-border: #{jkl.$color-snohvit};
+    --jkl-combobox-marked-value-shadow: #{jkl.$color-granitt};
+}
+
+@include jkl.comfortable-density-variables {
+    @include jkl.declare-font-variables("jkl-combobox", "body");
+
+    --jkl-combobox-button-padding: #{jkl.$spacing-8} #{jkl.rem(6px)} #{jkl.$spacing-8} #{jkl.$spacing-12};
+    --jkl-combobox-button-active-value-padding: #{jkl.$spacing-8} #{jkl.rem(6px)} #{jkl.$spacing-8} #{jkl.$spacing-8};
+    --jkl-combobox-input-height: #{jkl.rem(48px)};
+    --jkl-combobox-actions-right: #{jkl.$spacing-8};
+    --jkl-combobox-actions-top: #{jkl.rem(12px)};
+    --jkl-combobox-search-input-padding: var(--jkl-combobox-button-padding);
+    --jkl-combobox-native-padding: 0 #{jkl.$spacing-40} 0 #{jkl.$spacing-8};
+    --jkl-combobox-option-padding: #{jkl.$spacing-8} #{jkl.$spacing-12};
+    --jkl-combobox-option-line-height: 2rem;
+    --jkl-combobox-input-padding: #{jkl.rem(60px)};
+    --jkl-combobox-search-input-height: #{jkl.rem(28px)};
+    --jkl-combobox-tag-padding: #{jkl.rem(2px)};
+    --jkl-combobox-tag-height: #{jkl.rem(24px)};
+
+    @include jkl.small-device {
+        --jkl-combobox-input-height: #{jkl.rem(44px)};
+    }
+}
+
+@include jkl.compact-density-variables {
+    @include jkl.declare-font-variables("jkl-combobox", "small");
+
+    --jkl-combobox-button-padding: #{jkl.$spacing-4} #{jkl.rem(30px)} #{jkl.$spacing-4} #{jkl.$spacing-8};
+    --jkl-combobox-button-active-value-padding: #{jkl.$spacing-4} #{jkl.rem(30px)} #{jkl.$spacing-4} #{jkl.$spacing-8};
+    --jkl-combobox-input-height: #{jkl.rem(32px)};
+    --jkl-combobox-actions-right: #{jkl.rem(0)};
+    --jkl-combobox-actions-top: #{jkl.rem(6px)};
+    --jkl-combobox-search-input-padding: #{jkl.$spacing-4} #{jkl.$spacing-8};
+    --jkl-combobox-native-padding: #{jkl.$spacing-24} #{jkl.$spacing-4} #{jkl.$spacing-4};
+    --jkl-combobox-option-padding: #{jkl.$spacing-4} #{jkl.$spacing-8};
+    --jkl-combobox-option-line-height: 1.5rem;
+    --jkl-combobox-input-padding: #{jkl.$spacing-12};
+    --jkl-combobox-search-input-height: #{jkl.rem(20px)};
+    --jkl-combobox-tag-padding: 0 0.25rem;
+    --jkl-combobox-tag-height: #{jkl.rem(20px)};
+}
+
+.jkl-combobox {
+    position: relative;
+    @include jkl.reset-outline;
+
+    & *:focus {
+        outline: none;
+    }
+
+    &__wrapper {
+        position: relative;
+        min-width: 7rem;
+        max-width: 100%;
+        display: flex;
+
+        padding: var(--jkl-combobox-button-padding);
+        border-radius: jkl.rem(3px);
+        border: jkl.rem(1px) solid var(--jkl-combobox-border-color);
+        box-shadow: 0 0 0 jkl.rem(1px) transparent;
+        @include jkl.motion;
+        transition-property: color, border-color, box-shadow;
+
+        &--active-value {
+            padding: var(--jkl-combobox-button-active-value-padding);
+        }
+
+        &:focus {
+            border-color: var(--jkl-combobox-focus-color);
+            color: var(--jkl-combobox-focus-color);
+            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-combobox-focus-color);
+            background-color: var(--jkl-combobox-open-background-color);
+        }
+
+        &:hover {
+            border-color: var(--jkl-combobox-focus-color);
+            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-combobox-focus-color);
+
+            & ~ .jkl-combobox__arrow {
+                transform: translateY(calc(-50% + #{jkl.rem(3px)}));
+            }
+        }
+    }
+
+    &__button {
+        padding: 0;
+    }
+
+    &__button,
+    &__search-input {
+        @include jkl.use-font-variables("jkl-combobox");
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        background-color: var(--jkl-combobox-background-color);
+        color: var(--jkl-combobox-text-color);
+        cursor: pointer;
+        text-align: left;
+        display: flex;
+
+        @include jkl.motion;
+        transition-property: color, border-color, box-shadow;
+    }
+
+    &__search-input {
+        border: none;
+        outline: none;
+        align-self: end;
+        flex: 1 1 1ch;
+        max-height: var(--jkl-combobox-search-input-height);
+        padding-right: var(--jkl-combobox-input-padding);
+    }
+
+    &__arrow {
+        pointer-events: none;
+        transform: translateY(-50%);
+
+        @include jkl.motion;
+        transition-property: transform, color;
+
+        @include jkl.forced-colors-svg-fallback($stroke: CanvasText, $fill: CanvasText);
+    }
+
+    &__menu {
+        @include jkl.motion;
+        transition-property: height;
+        top: 100%;
+        overflow-y: auto;
+        position: absolute;
+        color: var(--jkl-combobox-text-color);
+        z-index: jkl.$z-index--dropdown;
+        left: jkl.rem(-1px);
+        right: jkl.rem(-1px);
+        background-color: var(--jkl-combobox-open-background-color);
+        border: jkl.rem(2px) solid var(--jkl-combobox-focus-color);
+        border-top: none;
+        border-radius: 0 0 jkl.rem(3px) jkl.rem(3px);
+        box-sizing: border-box;
+        max-height: calc(calc(var(--jkl-combobox-max-shown-options, 5) + 0.5) * var(--jkl-combobox-input-height));
+    }
+
+    &__option {
+        @include jkl.use-font-variables("jkl-combobox-text");
+        @include jkl.motion;
+        display: flex;
+        align-items: center;
+        border: 0;
+        background-color: var(--jkl-combobox-open-background-color);
+        transition-property: color, background-color;
+        cursor: pointer;
+        padding: var(--jkl-combobox-option-padding);
+        color: var(--jkl-combobox-open-color);
+        width: 100%;
+        text-align: left;
+        line-height: var(--jkl-combobox-option-line-height);
+
+        &:focus,
+        &:hover {
+            color: var(--jkl-combobox-hover-option-color);
+            background-color: var(--jkl-combobox-hover-option-background-color);
+        }
+
+        &-description {
+            @include jkl.text-style("small");
+            color: var(--jkl-combobox-option-description-color);
+            display: block;
+            width: 100%;
+        }
+    }
+
+    &__option--selected {
+        justify-content: space-between;
+
+        &:hover {
+            background-color: var(--jkl-combobox-hover-option-background-color);
+        }
+    }
+
+    &__no-option {
+        padding: var(--jkl-combobox-option-padding);
+    }
+
+    &__actions {
+        display: flex;
+        position: absolute;
+        right: var(--jkl-combobox-actions-right);
+        gap: jkl.$spacing-4;
+        top: var(--jkl-combobox-actions-top);
+    }
+
+    &__tags {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        margin-left: -4px;
+
+        .jkl-tag {
+            margin: 1px 4px;
+            z-index: 1;
+            padding: var(--jkl-combobox-tag-padding);
+            height: var(--jkl-combobox-tag-height);
+
+            &__marked {
+                border-radius: 6px;
+                box-shadow: 0 0 0 2px var(--jkl-combobox-marked-value-shadow) inset;
+                box-sizing: border-box;
+                border: 1px solid var(--jkl-combobox-marked-value-border);
+                margin: 0 4px;
+            }
+
+            .jkl-tooltip-trigger {
+                font-weight: 700;
+            }
+        }
+    }
+
+    &--invalid {
+        .jkl-combobox__search-input,
+        .jkl-combobox__wrapper {
+            background-color: var(--jkl-combobox-error-background-color);
+        }
+
+        .jkl-combobox__search-input,
+        .jkl-combobox__button,
+        .jkl-combobox__wrapper {
+            color: var(--jkl-combobox-error-text-color);
+        }
+
+        .jkl-combobox__search-input::selection {
+            background-color: var(--jkl-combobox-search-input-selection-color);
+        }
+    }
+
+    &--menu-open {
+        .jkl-combobox__wrapper {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            border-color: var(--jkl-combobox-focus-color);
+            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-combobox-focus-color) inset;
+
+            &:hover ~ .jkl-combobox__arrow {
+                transform: translateY(calc(-50% + #{jkl.rem(-3px)}));
+            }
+        }
+    }
+
+    &--menu-closed {
+        .jkl-combobox__search-input {
+            position: absolute;
+            background-color: transparent;
+            width: 94%;
+            padding-right: 0;
+        }
+    }
+}

package/src/components/cookie-consent/styles/_index.scss

@@ -0,0 +1 @@
+@forward "cookie-consent";