@fremtind/jokul 0.8.1 → 0.10.0

package/src/components/select/styles/select.css

@@ -0,0 +1,350 @@
+@charset "UTF-8";
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-select-border-color: #636060;
+    --jkl-select-text-color: #636060;
+    --jkl-select-text-disabled-color: #636060;
+    --jkl-select-text-active-value-color: #1b1917;
+    --jkl-select-background-color: transparent;
+    --jkl-select-open-background-color: #ffffff;
+    --jkl-select-focus-color: #1b1917;
+    --jkl-select-error-background-color: #f6b3b3;
+    --jkl-select-error-text-color: #636060;
+    --jkl-select-hover-option-color: #1b1917;
+    --jkl-select-hover-option-background-color: #e0dbd4;
+    --jkl-select-option-description-color: #636060;
+    --jkl-select-search-input-selection-color: rgba(27, 25, 23, 0.2);
+    --jkl-select-search-input-error-selection-color: rgba(27, 25, 23, 0.2);
+    --jkl-select-arrow-color: #1b1917;
+  }
+}
+[data-theme=light] {
+  --jkl-select-border-color: #636060;
+  --jkl-select-text-color: #636060;
+  --jkl-select-text-disabled-color: #636060;
+  --jkl-select-text-active-value-color: #1b1917;
+  --jkl-select-background-color: transparent;
+  --jkl-select-open-background-color: #ffffff;
+  --jkl-select-focus-color: #1b1917;
+  --jkl-select-error-background-color: #f6b3b3;
+  --jkl-select-error-text-color: #636060;
+  --jkl-select-hover-option-color: #1b1917;
+  --jkl-select-hover-option-background-color: #e0dbd4;
+  --jkl-select-option-description-color: #636060;
+  --jkl-select-search-input-selection-color: rgba(27, 25, 23, 0.2);
+  --jkl-select-search-input-error-selection-color: rgba(27, 25, 23, 0.2);
+  --jkl-select-arrow-color: #1b1917;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-select-border-color: #c8c5c3;
+    --jkl-select-text-color: #c8c5c3;
+    --jkl-select-text-disabled-color: #c8c5c3;
+    --jkl-select-text-active-value-color: #f9f9f9;
+    --jkl-select-background-color: transparent;
+    --jkl-select-open-background-color: #313030;
+    --jkl-select-focus-color: #f9f9f9;
+    --jkl-select-error-background-color: #f6b3b3;
+    --jkl-select-error-text-color: #636060;
+    --jkl-select-hover-option-color: #f9f9f9;
+    --jkl-select-hover-option-background-color: #444141;
+    --jkl-select-option-description-color: #ece9e5;
+    --jkl-select-search-input-selection-color: rgba(249, 249, 249, 0.25);
+    --jkl-select-search-input-error-selection-color: rgba(27, 25, 23, 0.2);
+    --jkl-select-arrow-color: #f9f9f9;
+  }
+}
+[data-theme=dark] {
+  --jkl-select-border-color: #c8c5c3;
+  --jkl-select-text-color: #c8c5c3;
+  --jkl-select-text-disabled-color: #c8c5c3;
+  --jkl-select-text-active-value-color: #f9f9f9;
+  --jkl-select-background-color: transparent;
+  --jkl-select-open-background-color: #313030;
+  --jkl-select-focus-color: #f9f9f9;
+  --jkl-select-error-background-color: #f6b3b3;
+  --jkl-select-error-text-color: #636060;
+  --jkl-select-hover-option-color: #f9f9f9;
+  --jkl-select-hover-option-background-color: #444141;
+  --jkl-select-option-description-color: #ece9e5;
+  --jkl-select-search-input-selection-color: rgba(249, 249, 249, 0.25);
+  --jkl-select-search-input-error-selection-color: rgba(27, 25, 23, 0.2);
+  --jkl-select-arrow-color: #f9f9f9;
+}
+
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-select-input-height: 3rem;
+  --jkl-select-arrow-right: 0.5rem;
+  --jkl-select-button-padding: 0.5rem 2.25rem 0.5rem 0.75rem;
+  --jkl-select-search-input-padding: var(--jkl-select-button-padding);
+  --jkl-select-native-padding: 0 2.5rem 0 0.5rem;
+  --jkl-select-option-padding: 0.5rem 0.75rem;
+  --jkl-select-font-size: var(--jkl-body-font-size);
+  --jkl-select-line-height: var(--jkl-body-line-height);
+  --jkl-select-font-weight: var(--jkl-body-font-weight);
+}
+@media (width >= 0) and (max-width: 679px) {
+  :root,
+  [data-layout-density=comfortable],
+  [data-density=comfortable] {
+    --jkl-select-input-height: 2.75rem;
+  }
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-select-input-height: 2rem;
+  --jkl-select-arrow-right: 0.25rem;
+  --jkl-select-button-padding: 0.25rem 2rem 0.25rem 0.5rem;
+  --jkl-select-search-input-padding: 0.25rem 0.5rem;
+  --jkl-select-native-padding: 0.25rem 1.5rem 0.25rem 0.25rem;
+  --jkl-select-option-padding: 0.25rem 0.5rem;
+  --jkl-select-font-size: var(--jkl-small-font-size);
+  --jkl-select-line-height: var(--jkl-small-line-height);
+  --jkl-select-font-weight: var(--jkl-small-font-weight);
+}
+
+.jkl-select {
+  display: block;
+  position: relative;
+  outline: 0;
+  border-style: none;
+  outline-style: none;
+  /* --------
+     VARIANTS
+     -------- */
+}
+.jkl-select:active, .jkl-select:hover, .jkl-select:focus {
+  outline: 0;
+  outline-style: none;
+}
+@media screen and (forced-colors: active) {
+  .jkl-select {
+    outline: revert;
+    border-style: revert;
+    outline-style: revert;
+  }
+  .jkl-select:active, .jkl-select:hover, .jkl-select:focus {
+    outline: revert;
+    outline-style: revert;
+  }
+}
+.jkl-select *:focus {
+  outline: none;
+}
+.jkl-select select {
+  appearance: none;
+}
+.jkl-select select::ms-expand {
+  display: none;
+}
+.jkl-select select:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 var(--jkl-select-text-color);
+}
+.jkl-select select option {
+  font-weight: normal;
+  font-family: sans-serif;
+  color: var(--jkl-select-text-color);
+  background-color: var(--jkl-select-open-background-color);
+}
+.jkl-select select option:disabled {
+  color: var(--jkl-select-text-disabled-color);
+}
+.jkl-select__outer-wrapper {
+  position: relative;
+  width: 15rem;
+  min-width: 7rem;
+  max-width: 100%;
+}
+.jkl-select__search-input {
+  box-sizing: border-box;
+  padding: var(--jkl-select-search-input-padding);
+  color: var(--jkl-select-text-color);
+}
+.jkl-select__search-input::selection {
+  background-color: var(--jkl-select-search-input-selection-color);
+}
+[data-theme=dark] .jkl-select__search-input::selection {
+  background-color: var(--jkl-select-search-input-selection-color);
+}
+.jkl-select__search-input, .jkl-select__button {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: var(--jkl-select-background-color);
+  color: var(--jkl-select-text-color);
+  cursor: pointer;
+  height: var(--jkl-select-input-height);
+  border-radius: 0.1875rem;
+  border: 0.0625rem solid var(--jkl-select-border-color);
+  box-shadow: 0 0 0 0.0625rem transparent;
+  text-align: left;
+  width: 100%;
+  transition-property: color, border-color, box-shadow;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  font-size: var(--jkl-select-font-size);
+  line-height: var(--jkl-select-line-height);
+  font-weight: var(--jkl-select-font-weight);
+}
+.jkl-select__search-input--active-value, .jkl-select__button--active-value {
+  color: var(--jkl-select-text-active-value-color);
+}
+.jkl-select__search-input:focus, .jkl-select__button:focus {
+  border-color: var(--jkl-select-focus-color);
+  color: var(--jkl-select-focus-color);
+  box-shadow: 0 0 0 0.0625rem var(--jkl-select-focus-color);
+  background-color: var(--jkl-select-open-background-color);
+}
+.jkl-select__search-input:hover, .jkl-select__button:hover {
+  border-color: var(--jkl-select-focus-color);
+  box-shadow: 0 0 0 0.0625rem var(--jkl-select-focus-color);
+}
+.jkl-select__search-input:hover ~ .jkl-select__arrow, .jkl-select__button:hover ~ .jkl-select__arrow {
+  transform: translateY(calc(-50% + 0.1875rem));
+}
+.jkl-select__button {
+  padding: var(--jkl-select-button-padding);
+}
+.jkl-select select.jkl-select__button {
+  padding: var(--jkl-select-native-padding);
+}
+.jkl-select__arrow {
+  pointer-events: none;
+  position: absolute;
+  right: var(--jkl-select-arrow-right);
+  top: 50%;
+  color: var(--jkl-select-arrow-color);
+  transform: translateY(-50%);
+  transition-property: transform, color;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+}
+@media screen and (forced-colors: active) {
+  .jkl-select__arrow {
+    stroke: CanvasText;
+    fill: CanvasText;
+  }
+  .jkl-select__arrow svg, .jkl-select__arrow path {
+    stroke: CanvasText;
+    fill: CanvasText;
+  }
+}
+.jkl-select__options-menu {
+  position: absolute;
+  left: -0.0625rem;
+  right: -0.0625rem;
+  top: 100%;
+  z-index: 7000;
+  background-color: var(--jkl-select-open-background-color);
+  border: 0.125rem solid var(--jkl-select-focus-color);
+  border-top: none;
+  border-radius: 0 0 0.1875rem 0.1875rem;
+  box-sizing: border-box;
+  overflow-y: auto;
+  max-height: calc((var(--jkl-select-max-shown-options, 5) + 0.5) * var(--jkl-select-input-height));
+  transition-property: height;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+}
+.jkl-select__option-wrapper {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  -webkit-overflow-scrolling: touch;
+}
+.jkl-select__option {
+  color: unset;
+  border: 0;
+  width: 100%;
+  background-color: inherit;
+  min-height: var(--jkl-select-input-height);
+  text-align: left;
+  transition-property: color, background-color;
+  position: relative;
+  padding: var(--jkl-select-option-padding);
+  cursor: pointer;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  font-size: var(--jkl-select-font-size);
+  line-height: var(--jkl-select-line-height);
+  font-weight: var(--jkl-select-font-weight);
+  /* For å unngå "dobbel" markering skrur vi av markering på hover i React-
+  komponenten med data-focus="controlled". Uten dette satt vil valgene
+  markeres ved hover som normalt. */
+}
+.jkl-select__option:focus, :not([data-focus=controlled]) > .jkl-select__option:hover {
+  color: var(--jkl-select-hover-option-color);
+  background-color: var(--jkl-select-hover-option-background-color);
+}
+.jkl-select__option-description {
+  color: var(--jkl-select-option-description-color);
+  display: block;
+  width: 100%;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  --jkl-icon-weight: 300;
+}
+.jkl-select--inline {
+  display: inline-block;
+  vertical-align: top;
+}
+.jkl-select--open .jkl-select__search-input,
+.jkl-select--open .jkl-select__button {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-color: var(--jkl-select-focus-color);
+  background-color: var(--jkl-select-open-background-color);
+  box-shadow: 0 0 0 0.0625rem var(--jkl-select-focus-color);
+}
+.jkl-select--open .jkl-select__search-input:hover ~ .jkl-select__arrow,
+.jkl-select--open .jkl-select__button:hover ~ .jkl-select__arrow {
+  transform: translateY(calc(-50% + -0.1875rem));
+}
+.jkl-select--invalid {
+  /* Color of text selection */
+}
+.jkl-select--invalid .jkl-select__search-input,
+.jkl-select--invalid .jkl-select__button {
+  background-color: var(--jkl-select-error-background-color);
+  color: var(--jkl-select-error-text-color);
+}
+.jkl-select--invalid .jkl-select__search-input--active-value,
+.jkl-select--invalid .jkl-select__button--active-value {
+  color: revert;
+}
+.jkl-select--invalid .jkl-select__search-input::selection {
+  background-color: var(--jkl-select-search-input-error-selection-color);
+}
+@media screen and (forced-colors: active) {
+  .jkl-select .jkl-select__button, .jkl-select .jkl-select__search-input {
+    color: CanvasText;
+    border: 2px solid ButtonText;
+    background-color: Canvas;
+    outline: revert;
+  }
+  .jkl-select .jkl-select__button:hover, .jkl-select .jkl-select__search-input:hover {
+    border-color: Highlight;
+  }
+  .jkl-select .jkl-select__option {
+    color: CanvasText;
+    border-top: 1px solid Canvas;
+    border-bottom: 1px solid Canvas;
+  }
+  .jkl-select .jkl-select__option:hover, .jkl-select .jkl-select__option:focus {
+    border-top: 1px solid SelectedItem;
+    border-bottom: 1px solid SelectedItem;
+    --jkl-icon-weight: 500;
+    font-weight: 700;
+    letter-spacing: -0.014em;
+  }
+}

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

@@ -0,0 +1 @@
+@media screen and (prefers-color-scheme:light){:root{--jkl-select-border-color:#636060;--jkl-select-text-color:#636060;--jkl-select-text-disabled-color:#636060;--jkl-select-text-active-value-color:#1b1917;--jkl-select-background-color:#0000;--jkl-select-open-background-color:#fff;--jkl-select-focus-color:#1b1917;--jkl-select-error-background-color:#f6b3b3;--jkl-select-error-text-color:#636060;--jkl-select-hover-option-color:#1b1917;--jkl-select-hover-option-background-color:#e0dbd4;--jkl-select-option-description-color:#636060;--jkl-select-search-input-selection-color:#1b191733;--jkl-select-search-input-error-selection-color:#1b191733;--jkl-select-arrow-color:#1b1917}}[data-theme=light]{--jkl-select-border-color:#636060;--jkl-select-text-color:#636060;--jkl-select-text-disabled-color:#636060;--jkl-select-text-active-value-color:#1b1917;--jkl-select-background-color:#0000;--jkl-select-open-background-color:#fff;--jkl-select-focus-color:#1b1917;--jkl-select-error-background-color:#f6b3b3;--jkl-select-error-text-color:#636060;--jkl-select-hover-option-color:#1b1917;--jkl-select-hover-option-background-color:#e0dbd4;--jkl-select-option-description-color:#636060;--jkl-select-search-input-selection-color:#1b191733;--jkl-select-search-input-error-selection-color:#1b191733;--jkl-select-arrow-color:#1b1917}@media screen and (prefers-color-scheme:dark){:root{--jkl-select-border-color:#c8c5c3;--jkl-select-text-color:#c8c5c3;--jkl-select-text-disabled-color:#c8c5c3;--jkl-select-text-active-value-color:#f9f9f9;--jkl-select-background-color:#0000;--jkl-select-open-background-color:#313030;--jkl-select-focus-color:#f9f9f9;--jkl-select-error-background-color:#f6b3b3;--jkl-select-error-text-color:#636060;--jkl-select-hover-option-color:#f9f9f9;--jkl-select-hover-option-background-color:#444141;--jkl-select-option-description-color:#ece9e5;--jkl-select-search-input-selection-color:#f9f9f940;--jkl-select-search-input-error-selection-color:#1b191733;--jkl-select-arrow-color:#f9f9f9}}[data-theme=dark]{--jkl-select-border-color:#c8c5c3;--jkl-select-text-color:#c8c5c3;--jkl-select-text-disabled-color:#c8c5c3;--jkl-select-text-active-value-color:#f9f9f9;--jkl-select-background-color:#0000;--jkl-select-open-background-color:#313030;--jkl-select-focus-color:#f9f9f9;--jkl-select-error-background-color:#f6b3b3;--jkl-select-error-text-color:#636060;--jkl-select-hover-option-color:#f9f9f9;--jkl-select-hover-option-background-color:#444141;--jkl-select-option-description-color:#ece9e5;--jkl-select-search-input-selection-color:#f9f9f940;--jkl-select-search-input-error-selection-color:#1b191733;--jkl-select-arrow-color:#f9f9f9}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-select-input-height:3rem;--jkl-select-arrow-right:0.5rem;--jkl-select-button-padding:0.5rem 2.25rem 0.5rem 0.75rem;--jkl-select-search-input-padding:var(--jkl-select-button-padding);--jkl-select-native-padding:0 2.5rem 0 0.5rem;--jkl-select-option-padding:0.5rem 0.75rem;--jkl-select-font-size:var(--jkl-body-font-size);--jkl-select-line-height:var(--jkl-body-line-height);--jkl-select-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-select-input-height:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-select-input-height:2rem;--jkl-select-arrow-right:0.25rem;--jkl-select-button-padding:0.25rem 2rem 0.25rem 0.5rem;--jkl-select-search-input-padding:0.25rem 0.5rem;--jkl-select-native-padding:0.25rem 1.5rem 0.25rem 0.25rem;--jkl-select-option-padding:0.25rem 0.5rem;--jkl-select-font-size:var(--jkl-small-font-size);--jkl-select-line-height:var(--jkl-small-line-height);--jkl-select-font-weight:var(--jkl-small-font-weight)}.jkl-select{border-style:none;display:block;position:relative}.jkl-select,.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-select{border-style:revert}.jkl-select,.jkl-select:active,.jkl-select:focus,.jkl-select:hover{outline:revert;outline-style:revert}}.jkl-select :focus{outline:none}.jkl-select select{-webkit-appearance:none;appearance:none}.jkl-select select::ms-expand{display:none}.jkl-select select:-moz-focusring{color:#0000;text-shadow:0 0 0 var(--jkl-select-text-color)}.jkl-select select option{background-color:var(--jkl-select-open-background-color);color:var(--jkl-select-text-color);font-family:sans-serif;font-weight:400}.jkl-select select option:disabled{color:var(--jkl-select-text-disabled-color)}.jkl-select__outer-wrapper{max-width:100%;min-width:7rem;position:relative;width:15rem}.jkl-select__search-input{box-sizing:border-box;color:var(--jkl-select-text-color);padding:var(--jkl-select-search-input-padding)}.jkl-select__search-input::selection{background-color:var(--jkl-select-search-input-selection-color)}[data-theme=dark] .jkl-select__search-input::selection{background-color:var(--jkl-select-search-input-selection-color)}.jkl-select__button,.jkl-select__search-input{background-color:var(--jkl-select-background-color);border:.0625rem solid var(--jkl-select-border-color);border-radius:.1875rem;box-shadow:0 0 0 .0625rem #0000;color:var(--jkl-select-text-color);cursor:pointer;font-size:var(--jkl-select-font-size);font-weight:var(--jkl-select-font-weight);height:var(--jkl-select-input-height);line-height:var(--jkl-select-line-height);overflow:hidden;text-align:left;text-overflow:ellipsis;transition-duration:.15s;transition-property:color,border-color,box-shadow;transition-timing-function:ease;white-space:nowrap;width:100%}.jkl-select__button--active-value,.jkl-select__search-input--active-value{color:var(--jkl-select-text-active-value-color)}.jkl-select__button:focus,.jkl-select__search-input:focus{background-color:var(--jkl-select-open-background-color);color:var(--jkl-select-focus-color)}.jkl-select__button:focus,.jkl-select__button:hover,.jkl-select__search-input:focus,.jkl-select__search-input:hover{border-color:var(--jkl-select-focus-color);box-shadow:0 0 0 .0625rem var(--jkl-select-focus-color)}.jkl-select__button:hover~.jkl-select__arrow,.jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% + .1875rem))}.jkl-select__button{padding:var(--jkl-select-button-padding)}.jkl-select select.jkl-select__button{padding:var(--jkl-select-native-padding)}.jkl-select__arrow{color:var(--jkl-select-arrow-color);pointer-events:none;position:absolute;right:var(--jkl-select-arrow-right);top:50%;transform:translateY(-50%);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-select__arrow,.jkl-select__arrow path,.jkl-select__arrow svg{stroke:CanvasText;fill:CanvasText}}.jkl-select__options-menu{background-color:var(--jkl-select-open-background-color);border:.125rem solid var(--jkl-select-focus-color);border-radius:0 0 .1875rem .1875rem;border-top:none;box-sizing:border-box;left:-.0625rem;max-height:calc((var(--jkl-select-max-shown-options, 5) + .5)*var(--jkl-select-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-select__option-wrapper{-webkit-overflow-scrolling:touch;list-style-type:none;margin:0;padding:0}.jkl-select__option{background-color:inherit;border:0;color:unset;cursor:pointer;font-size:var(--jkl-select-font-size);font-weight:var(--jkl-select-font-weight);line-height:var(--jkl-select-line-height);min-height:var(--jkl-select-input-height);padding:var(--jkl-select-option-padding);position:relative;text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease;width:100%}.jkl-select__option:focus,:not([data-focus=controlled])>.jkl-select__option:hover{background-color:var(--jkl-select-hover-option-background-color);color:var(--jkl-select-hover-option-color)}.jkl-select__option-description{--jkl-icon-weight:300;color:var(--jkl-select-option-description-color);display:block;font-size:1rem;font-weight:400;line-height:1.5rem;width:100%}.jkl-select--inline{display:inline-block;vertical-align:top}.jkl-select--open .jkl-select__button,.jkl-select--open .jkl-select__search-input{background-color:var(--jkl-select-open-background-color);border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:var(--jkl-select-focus-color);box-shadow:0 0 0 .0625rem var(--jkl-select-focus-color)}.jkl-select--open .jkl-select__button:hover~.jkl-select__arrow,.jkl-select--open .jkl-select__search-input:hover~.jkl-select__arrow{transform:translateY(calc(-50% - .1875rem))}.jkl-select--invalid .jkl-select__button,.jkl-select--invalid .jkl-select__search-input{background-color:var(--jkl-select-error-background-color);color:var(--jkl-select-error-text-color)}.jkl-select--invalid .jkl-select__button--active-value,.jkl-select--invalid .jkl-select__search-input--active-value{color:revert}.jkl-select--invalid .jkl-select__search-input::selection{background-color:var(--jkl-select-search-input-error-selection-color)}@media screen and (forced-colors:active){.jkl-select .jkl-select__button,.jkl-select .jkl-select__search-input{background-color:Canvas;border:2px solid ButtonText;color:initial;outline:revert}.jkl-select .jkl-select__button:hover,.jkl-select .jkl-select__search-input:hover{border-color:Highlight}.jkl-select .jkl-select__option{border-bottom:1px solid Canvas;border-top:1px solid Canvas;color:initial}.jkl-select .jkl-select__option:focus,.jkl-select .jkl-select__option:hover{--jkl-icon-weight:500;border-bottom:1px solid SelectedItem;border-top:1px solid SelectedItem;font-weight:700;letter-spacing:-.014em}}

package/src/components/select/styles/select.scss

@@ -0,0 +1,330 @@
+@charset "UTF-8";
+@use "sass:color";
+@use "sass:math";
+@use "../../../core/jkl";
+@use "../../../core/jkl/colors";
+
+$_select-focus-color: jkl.$color-granitt;
+$_select-search-input-selection-color: color.scale(
+    $color: $_select-focus-color,
+    $alpha: -80%,
+);
+
+$_select-focus-color--inverted: jkl.$color-snohvit;
+$_select-search-input-selection-color--inverted: color.scale(
+    $color: $_select-focus-color--inverted,
+    $alpha: -75%,
+);
+
+@include jkl.light-mode-variables {
+    --jkl-select-border-color: #{jkl.$color-stein};
+    --jkl-select-text-color: #{jkl.$color-stein};
+    --jkl-select-text-disabled-color: #{jkl.$color-stein};
+    --jkl-select-text-active-value-color: #{jkl.$color-granitt};
+    --jkl-select-background-color: transparent;
+    --jkl-select-open-background-color: #{jkl.$color-hvit};
+    --jkl-select-focus-color: #{$_select-focus-color};
+    --jkl-select-error-background-color: #{jkl.$color-feil};
+    --jkl-select-error-text-color: #{jkl.$color-stein};
+    --jkl-select-hover-option-color: #{jkl.$color-granitt};
+    --jkl-select-hover-option-background-color: #{jkl.$color-varde};
+    --jkl-select-option-description-color: #{jkl.$color-stein};
+    --jkl-select-search-input-selection-color: #{$_select-search-input-selection-color};
+    --jkl-select-search-input-error-selection-color: #{$_select-search-input-selection-color};
+    --jkl-select-arrow-color: #{jkl.$color-granitt};
+}
+
+@include jkl.dark-mode-variables {
+    --jkl-select-border-color: #{jkl.$color-svaberg};
+    --jkl-select-text-color: #{jkl.$color-svaberg};
+    --jkl-select-text-disabled-color: #{jkl.$color-svaberg};
+    --jkl-select-text-active-value-color: #{jkl.$color-snohvit};
+    --jkl-select-background-color: transparent;
+    --jkl-select-open-background-color: #{jkl.$color-skifer};
+    --jkl-select-focus-color: #{$_select-focus-color--inverted};
+    --jkl-select-error-background-color: #{jkl.$color-feil};
+    --jkl-select-error-text-color: #{jkl.$color-stein};
+    --jkl-select-hover-option-color: #{jkl.$color-snohvit};
+    --jkl-select-hover-option-background-color: #{jkl.$color-fjellgra};
+    --jkl-select-option-description-color: #{jkl.$color-dis};
+    --jkl-select-search-input-selection-color: #{$_select-search-input-selection-color--inverted};
+    --jkl-select-search-input-error-selection-color: #{$_select-search-input-selection-color};
+    --jkl-select-arrow-color: #{jkl.$color-snohvit};
+}
+
+@include jkl.comfortable-density-variables {
+    --jkl-select-input-height: #{jkl.rem(48px)};
+    --jkl-select-arrow-right: #{jkl.$spacing-8};
+    --jkl-select-button-padding: #{jkl.$spacing-8} #{jkl.rem(36px)} #{jkl.$spacing-8} #{jkl.$spacing-12};
+    --jkl-select-search-input-padding: var(--jkl-select-button-padding);
+    --jkl-select-native-padding: 0 #{jkl.$spacing-40} 0 #{jkl.$spacing-8};
+    --jkl-select-option-padding: #{jkl.$spacing-8} #{jkl.$spacing-12};
+
+    @include jkl.declare-font-variables("jkl-select", "body");
+
+    @include jkl.small-device {
+        --jkl-select-input-height: #{jkl.rem(44px)};
+    }
+}
+
+@include jkl.compact-density-variables {
+    --jkl-select-input-height: #{jkl.rem(32px)};
+    --jkl-select-arrow-right: #{jkl.rem(4px)};
+    --jkl-select-button-padding: #{jkl.$spacing-4} #{jkl.$spacing-32} #{jkl.$spacing-4} #{jkl.$spacing-8};
+    --jkl-select-search-input-padding: #{jkl.$spacing-4} #{jkl.$spacing-8};
+    --jkl-select-native-padding: #{jkl.$spacing-4} #{jkl.$spacing-24} #{jkl.$spacing-4} #{jkl.$spacing-4};
+    --jkl-select-option-padding: #{jkl.$spacing-4} #{jkl.$spacing-8};
+
+    @include jkl.declare-font-variables("jkl-select", "small");
+}
+
+.jkl-select {
+    display: block;
+    position: relative;
+
+    @include jkl.reset-outline;
+
+    & *:focus {
+        outline: none;
+    }
+
+    & select {
+        appearance: none;
+
+        &::ms-expand {
+            display: none;
+        }
+
+        &:-moz-focusring {
+            color: transparent;
+            text-shadow: 0 0 0 var(--jkl-select-text-color);
+        }
+
+        & option {
+            font-weight: normal;
+            font-family: sans-serif;
+            color: var(--jkl-select-text-color);
+            background-color: var(--jkl-select-open-background-color);
+
+            &:disabled {
+                color: var(--jkl-select-text-disabled-color);
+            }
+        }
+    }
+
+    &__outer-wrapper {
+        position: relative;
+        width: 15rem;
+        min-width: 7rem;
+        max-width: 100%;
+    }
+
+    &__search-input {
+        box-sizing: border-box;
+        padding: var(--jkl-select-search-input-padding);
+        color: var(--jkl-select-text-color);
+
+        &::selection {
+            background-color: var(--jkl-select-search-input-selection-color);
+
+            [data-theme="dark"] & {
+                background-color: var(--jkl-select-search-input-selection-color);
+            }
+        }
+    }
+
+    &__search-input,
+    &__button {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        background-color: var(--jkl-select-background-color);
+        color: var(--jkl-select-text-color);
+        cursor: pointer;
+
+        height: var(--jkl-select-input-height);
+        border-radius: jkl.rem(3px);
+        border: jkl.rem(1px) solid var(--jkl-select-border-color);
+        box-shadow: 0 0 0 jkl.rem(1px) transparent;
+        text-align: left;
+        width: 100%;
+
+        transition-property: color, border-color, box-shadow;
+        @include jkl.motion;
+
+        @include jkl.use-font-variables("jkl-select");
+
+        &--active-value {
+            color: var(--jkl-select-text-active-value-color);
+        }
+
+        &:focus {
+            border-color: var(--jkl-select-focus-color);
+            color: var(--jkl-select-focus-color);
+            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-select-focus-color);
+            background-color: var(--jkl-select-open-background-color);
+        }
+
+        &:hover {
+            border-color: var(--jkl-select-focus-color);
+            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-select-focus-color);
+
+            & ~ .jkl-select__arrow {
+                transform: translateY(calc(-50% + #{jkl.rem(3px)}));
+            }
+        }
+    }
+
+    &__button {
+        padding: var(--jkl-select-button-padding);
+    }
+
+    & select.jkl-select__button {
+        padding: var(--jkl-select-native-padding);
+    }
+
+    &__arrow {
+        pointer-events: none;
+        position: absolute;
+        right: var(--jkl-select-arrow-right);
+        top: 50%;
+        color: var(--jkl-select-arrow-color);
+
+        transform: translateY(-50%);
+        transition-property: transform, color;
+        @include jkl.motion;
+
+        @include jkl.forced-colors-svg-fallback($stroke: CanvasText, $fill: CanvasText);
+    }
+
+    &__options-menu {
+        position: absolute;
+        left: jkl.rem(-1px);
+        right: jkl.rem(-1px);
+        top: 100%;
+        z-index: jkl.$z-index--dropdown;
+
+        background-color: var(--jkl-select-open-background-color);
+        border: jkl.rem(2px) solid var(--jkl-select-focus-color);
+        border-top: none;
+        border-radius: 0 0 jkl.rem(3px) jkl.rem(3px);
+        box-sizing: border-box;
+
+        overflow-y: auto;
+        // Sett makshøyde på listen til høyden av (maxShownOptions + 0.5) ganger høyden på ett enlinjes valg
+        max-height: calc(calc(var(--jkl-select-max-shown-options, 5) + 0.5) * var(--jkl-select-input-height));
+
+        transition-property: height;
+        @include jkl.motion;
+    }
+
+    &__option-wrapper {
+        margin: 0;
+        padding: 0;
+
+        list-style-type: none;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    &__option {
+        color: unset;
+        border: 0; // removes native styling
+        width: 100%;
+        background-color: inherit;
+        min-height: var(--jkl-select-input-height);
+        text-align: left;
+        transition-property: color, background-color;
+        position: relative;
+        padding: var(--jkl-select-option-padding);
+        cursor: pointer;
+
+        @include jkl.motion;
+        @include jkl.use-font-variables("jkl-select");
+
+        /* For å unngå "dobbel" markering skrur vi av markering på hover i React-
+        komponenten med data-focus="controlled". Uten dette satt vil valgene
+        markeres ved hover som normalt. */
+        &:focus,
+        :not([data-focus="controlled"]) > &:hover {
+            color: var(--jkl-select-hover-option-color);
+            background-color: var(--jkl-select-hover-option-background-color);
+        }
+
+        &-description {
+            color: var(--jkl-select-option-description-color);
+            display: block;
+            width: 100%;
+            @include jkl.text-style("small");
+        }
+    }
+
+    /* --------
+       VARIANTS
+       -------- */
+
+    &--inline {
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    &--open {
+        .jkl-select__search-input,
+        .jkl-select__button {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            border-color: var(--jkl-select-focus-color);
+            background-color: var(--jkl-select-open-background-color);
+            box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-select-focus-color);
+
+            &:hover ~ .jkl-select__arrow {
+                transform: translateY(calc(-50% + #{jkl.rem(-3px)}));
+            }
+        }
+    }
+
+    &--invalid {
+        .jkl-select__search-input,
+        .jkl-select__button {
+            background-color: var(--jkl-select-error-background-color);
+            color: var(--jkl-select-error-text-color);
+
+            &--active-value {
+                color: revert;
+            }
+        }
+
+        /* Color of text selection */
+        .jkl-select__search-input::selection {
+            background-color: var(--jkl-select-search-input-error-selection-color);
+        }
+    }
+
+    @include jkl.forced-colors-mode {
+        // Vi er en button (hvis ikke native) og får ButtonText, men vi later som vi er en select, og den har CanvasText
+        & .jkl-select__button,
+        & .jkl-select__search-input {
+            color: CanvasText;
+            border: 2px solid ButtonText;
+            background-color: Canvas;
+            outline: revert;
+
+            &:hover {
+                border-color: Highlight;
+            }
+        }
+
+        & .jkl-select__option {
+            color: CanvasText;
+
+            border-top: 1px solid Canvas;
+            border-bottom: 1px solid Canvas;
+
+            &:hover,
+            &:focus {
+                border-top: 1px solid SelectedItem;
+                border-bottom: 1px solid SelectedItem;
+                @include jkl.no-grow-bold;
+            }
+        }
+    }
+}

package/src/components/text-input/styles/_index.scss

@@ -0,0 +1 @@
+@forward "text-input";