npm - @sikt/sds-combobox - Versions diffs - 4.0.0 → 4.0.1 - Mend

@sikt/sds-combobox 4.0.0 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,12 @@
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
+## [4.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@4.0.0...@sikt/sds-combobox@4.0.1) (2026-01-21)
+### Bug Fixes
+- **combobox:** invalid hover & focus state ([1e7db34](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/1e7db3496ec20ff1f6ae182df3512d710186b0e5))
 ## [4.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@3.3.0...@sikt/sds-combobox@4.0.0) (2026-01-21)
 ### ⚠ BREAKING CHANGES

package/dist/index.css CHANGED Viewed

@@ -31,10 +31,10 @@
 }
 .sds-combobox data:hover,
 .sds-combobox data:focus-visible {
-  --chip-border-color: var( --sds-color-interaction-primary-subtle-highlight );
+  --chip-border-color: var( --sds-color-interaction-primary-strong-highlight );
 }
 .sds-combobox data:active {
-  --chip-border-color: var(--sds-color-interaction-primary-subtle-pressed);
+  --chip-border-color: var(--sds-color-interaction-primary-strong-pressed);
 }
 .sds-combobox data::after {
   align-items: center;
@@ -141,10 +141,10 @@ del.sds-combobox__button {
 }
 .sds-combobox__button:hover,
 .sds-combobox__button:focus-visible {
-  background-color: var( --sds-color-interaction-primary-transparent-highlight );
+  --combobox-button-background-color: var( --sds-color-interaction-primary-transparent-highlight );
 }
 .sds-combobox__button:active {
-  background-color: var( --sds-color-interaction-primary-transparent-pressed );
+  --combobox-button-background-color: var( --sds-color-interaction-primary-transparent-pressed );
 }
 .sds-combobox__button {
   align-self: center;
@@ -208,8 +208,8 @@ del.sds-combobox__button {
   --combobox-border-color: var( --sds-color-interaction-danger-strong-pressed );
   --combobox-button-background-color: var( --sds-color-interaction-danger-strong-pressed );
 }
-.sds-combobox--invalid .sds-combobox__combobox-button:hover,
-.sds-combobox--invalid .sds-combobox__combobox-button:focus {
+.sds-combobox--invalid .sds-combobox__combobox .sds-combobox__button:hover,
+.sds-combobox--invalid .sds-combobox__combobox .sds-combobox__button:focus {
   --combobox-border-color: var( --sds-color-interaction-danger-strong-highlight );
   --combobox-button-background-color: var( --sds-color-interaction-danger-strong-highlight );
 }

package/dist/index.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/combobox.pcss"],"sourcesContent":[".sds-combobox {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\n --combobox-border-width: var(--sds-space-border-weight-regular);\n --combobox-button-color: var(--sds-color-text-primary);\n --combobox-button-background-color: transparent;\n --combobox-padding: calc(\n var(--sds-space-padding-tiny) + var(--sds-space-padding-minimal) -\n var(--combobox-border-width)\n );\n --combobox-icon-size: var(--sds-typography-fontsize-700);\n}\n /* stylelint-disable selector-max-type /\n .sds-combobox data {\n --chip-border-color: var(--sds-color-interaction-primary-strong-default);\n\n align-items: center;\n border: var(--sds-space-border-weight-regular) solid\n var(--chip-border-color);\n border-radius: var(--sds-space-border-radius-full);\n cursor: pointer;\n display: inline-flex;\n font-size: var(--sds-typography-body-l-fontsize);\n font-weight: var(--sds-typography-body-l-fontweight);\n gap: var(--sds-space-padding-minimal);\n justify-content: center;\n line-height: var(--sds-typography-body-l-lineheight);\n padding: var(--sds-space-padding-minimal);\n padding-left: var(--sds-space-padding-tiny);\n margin: 0 var(--sds-space-padding-tiny) var(--sds-space-padding-tiny) 0;\n / stylelint-enable selector-max-type /\n }\n .sds-combobox data:focus {\n outline: unset;\n }\n .sds-combobox data:focus-visible {\n outline: var(--sds-focus-outline);\n }\n .sds-combobox data:hover,\n .sds-combobox data:focus-visible {\n --chip-border-color: var(\n --sds-color-interaction-primary-subtle-highlight\n );\n }\n .sds-combobox data:active {\n --chip-border-color: var(--sds-color-interaction-primary-subtle-pressed);\n }\n .sds-combobox data::after {\n align-items: center;\n background-color: var(--sds-color-text-primary);\n content: \"\";\n display: inline-block;\n font-size: var(--combobox-icon-size);\n justify-content: center;\n -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z\"/></svg>');\n mask-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z\"/></svg>');\n -webkit-mask-position: center right;\n mask-position: center right;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: var(--combobox-icon-size);\n mask-size: var(--combobox-icon-size);\n transform: rotateY(0deg) rotate(-45deg);\n min-width: var(--combobox-icon-size);\n min-height: var(--combobox-icon-size);\n width: var(--combobox-icon-size);\n height: var(--combobox-icon-size);\n vertical-align: sub;\n }\n / INFO: override u-components styling for sds-chip /\n .sds-combobox__combobox {\n display: flex;\n flex-wrap: wrap;\n pointer-events: none;\n }\n .sds-combobox__combobox:not([data-multiple]),\n .sds-combobox__combobox[data-multiple=\"false\"] {\n / INFO: override u-components styling /\n }\n / stylelint-disable-next-line /\n .sds-combobox__combobox:not([data-multiple]) data, .sds-combobox__combobox[data-multiple=\"false\"] data {\n display: none;\n }\n .sds-combobox__input {\n -webkit-appearance: none;\n appearance: none;\n background-image: none;\n background-color: var(--sds-color-layout-background-default);\n border: var(--combobox-border-width) solid var(--combobox-border-color);\n border-radius: var(--sds-space-border-radius-medium);\n color: var(--sds-color-text-primary);\n display: flex;\n font-size: var(--sds-typography-body-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n line-height: var(--sds-typography-body-default-lineheight);\n padding: var(--combobox-padding);\n padding-right: calc(\n var(--combobox-padding) + var(--combobox-icon-size) +\n var(--sds-space-padding-tiny)\n );\n pointer-events: auto;\n width: 100%;\n }\n .sds-combobox__input:hover,\n .sds-combobox__input:focus-visible {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\n }\n .sds-combobox__input:active {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\n }\n .sds-combobox__input:focus-visible {\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n .sds-combobox__input:disabled {\n background: repeating-linear-gradient(\n -45deg,\n var(--sds-color-layout-background-default),\n var(--sds-color-layout-background-default) var(--sds-base-size-s),\n var(--sds-color-interaction-neutral-subtle-default)\n var(--sds-base-size-s),\n var(--sds-color-interaction-neutral-subtle-default)\n calc(var(--sds-base-size-s) 2)\n );\n cursor: not-allowed;\n }\n .sds-combobox__button {\n --button-border-radius: var(--sds-space-border-radius-minimal);\n --button-padding: var(--sds-space-padding-minimal);\n --button-width: calc(\n var(--combobox-icon-size) + var(--button-padding) +\n var(--combobox-border-width)\n );\n\n align-items: center;\n background-color: var(--combobox-button-background-color);\n border: 0 none;\n border-radius: var(--button-border-radius);\n color: var(--combobox-button-color);\n cursor: pointer;\n font-size: var(--sds-typography-body-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n justify-content: center;\n line-height: var(--sds-typography-body-default-lineheight);\n gap: var(--button-padding);\n padding: var(--button-padding)\n calc(var(--button-padding) + var(--button-padding));\n\n /* INFO: override u-components styling /\n\n /\n &:has(+ .sds-combobox__datalist:not([hidden])) {\n transform: rotateY(0deg) rotate(180deg);\n }\n /\n }\n / stylelint-disable-next-line /\n del.sds-combobox__button {\n pointer-events: auto;\n }\n .sds-combobox__button-icon {\n align-items: center;\n display: flex;\n font-size: var(--combobox-icon-size);\n justify-content: center;\n margin-right: calc(var(--button-padding) -1);\n margin-left: calc(var(--button-padding) * -1);\n }\n .sds-combobox__button:focus-visible {\n outline: var(--sds-focus-outline);\n }\n .sds-combobox__button:hover,\n .sds-combobox__button:focus-visible {\n background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n }\n .sds-combobox__button:active {\n background-color: var(\n --sds-color-interaction-primary-transparent-pressed\n );\n }\n .sds-combobox__button {\n\n align-self: center;\n margin-left: calc(calc(var(--combobox-padding) + var(--button-width)) * -1);\n}\n .sds-combobox__button:not([hidden]) + .sds-combobox__button {\n display: none;\n }\n .sds-combobox__datalist {\n background-color: var(--sds-color-layout-background-default);\n box-shadow: var(--sds-effect-shadow-elevated-default);\n border-radius: var(--sds-space-border-radius-medium);\n inset: 100% 0 auto;\n margin-top: var(--sds-space-gap-small);\n margin-bottom: var(--sds-space-gap-small);\n max-height: 15rem;\n overflow-y: auto;\n padding: var(--sds-space-padding-small);\n pointer-events: auto;\n position: absolute;\n z-index: var(--sds-base-zindex-modal);\n }\n .sds-combobox__datalist:has(.sds-combobox__datalist-option:not([aria-hidden=\"false\"])) {\n display: none;\n }\n .sds-combobox__datalist:not([hidden]):has(.sds-combobox__datalist-option:not([aria-hidden=\"true\"])) {\n display: block;\n }\n .sds-combobox__datalist-option {\n padding: var(--sds-space-padding-small);\n margin: var(--sds-space-gap-tiny);\n border-radius: var(--sds-space-border-radius-medium);\n }\n .sds-combobox__datalist-option:focus {\n outline: unset;\n }\n .sds-combobox__datalist-option:focus-visible {\n outline: var(--sds-focus-outline);\n }\n .sds-combobox__datalist-option:hover,\n .sds-combobox__datalist-option:focus-visible {\n background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n }\n .sds-combobox__datalist-option:active {\n background-color: var(\n --sds-color-interaction-primary-transparent-pressed\n );\n }\n .sds-combobox__datalist-option[selected] {\n background-color: var(--sds-color-interaction-primary-subtle-pressed);\n }\n .sds-combobox--invalid .sds-combobox__combobox {\n --combobox-border-color: var(--sds-color-interaction-danger-strong-default);\n --combobox-button-color: var(--sds-color-text-on-strong);\n --combobox-button-background-color: var(\n --sds-color-interaction-danger-strong-default\n );\n }\n .sds-combobox--invalid .sds-combobox__combobox:hover,\n .sds-combobox--invalid .sds-combobox__combobox:focus-within {\n --combobox-border-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --combobox-button-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n }\n .sds-combobox--invalid .sds-combobox__combobox:active {\n --combobox-border-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n --combobox-button-background-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n }\n .sds-combobox--invalid .sds-combobox__combobox-button:hover,\n .sds-combobox--invalid .sds-combobox__combobox-button:focus {\n --combobox-border-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --combobox-button-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n }\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../src/combobox.pcss"],"sourcesContent":[".sds-combobox {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\n --combobox-border-width: var(--sds-space-border-weight-regular);\n --combobox-button-color: var(--sds-color-text-primary);\n --combobox-button-background-color: transparent;\n --combobox-padding: calc(\n var(--sds-space-padding-tiny) + var(--sds-space-padding-minimal) -\n var(--combobox-border-width)\n );\n --combobox-icon-size: var(--sds-typography-fontsize-700);\n}\n /* stylelint-disable selector-max-type /\n .sds-combobox data {\n --chip-border-color: var(--sds-color-interaction-primary-strong-default);\n\n align-items: center;\n border: var(--sds-space-border-weight-regular) solid\n var(--chip-border-color);\n border-radius: var(--sds-space-border-radius-full);\n cursor: pointer;\n display: inline-flex;\n font-size: var(--sds-typography-body-l-fontsize);\n font-weight: var(--sds-typography-body-l-fontweight);\n gap: var(--sds-space-padding-minimal);\n justify-content: center;\n line-height: var(--sds-typography-body-l-lineheight);\n padding: var(--sds-space-padding-minimal);\n padding-left: var(--sds-space-padding-tiny);\n margin: 0 var(--sds-space-padding-tiny) var(--sds-space-padding-tiny) 0;\n / stylelint-enable selector-max-type /\n }\n .sds-combobox data:focus {\n outline: unset;\n }\n .sds-combobox data:focus-visible {\n outline: var(--sds-focus-outline);\n }\n .sds-combobox data:hover,\n .sds-combobox data:focus-visible {\n --chip-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n .sds-combobox data:active {\n --chip-border-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n .sds-combobox data::after {\n align-items: center;\n background-color: var(--sds-color-text-primary);\n content: \"\";\n display: inline-block;\n font-size: var(--combobox-icon-size);\n justify-content: center;\n -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z\"/></svg>');\n mask-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z\"/></svg>');\n -webkit-mask-position: center right;\n mask-position: center right;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: var(--combobox-icon-size);\n mask-size: var(--combobox-icon-size);\n transform: rotateY(0deg) rotate(-45deg);\n min-width: var(--combobox-icon-size);\n min-height: var(--combobox-icon-size);\n width: var(--combobox-icon-size);\n height: var(--combobox-icon-size);\n vertical-align: sub;\n }\n / INFO: override u-components styling for sds-chip /\n .sds-combobox__combobox {\n display: flex;\n flex-wrap: wrap;\n pointer-events: none;\n }\n .sds-combobox__combobox:not([data-multiple]),\n .sds-combobox__combobox[data-multiple=\"false\"] {\n / INFO: override u-components styling /\n }\n / stylelint-disable-next-line /\n .sds-combobox__combobox:not([data-multiple]) data, .sds-combobox__combobox[data-multiple=\"false\"] data {\n display: none;\n }\n .sds-combobox__input {\n -webkit-appearance: none;\n appearance: none;\n background-image: none;\n background-color: var(--sds-color-layout-background-default);\n border: var(--combobox-border-width) solid var(--combobox-border-color);\n border-radius: var(--sds-space-border-radius-medium);\n color: var(--sds-color-text-primary);\n display: flex;\n font-size: var(--sds-typography-body-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n line-height: var(--sds-typography-body-default-lineheight);\n padding: var(--combobox-padding);\n padding-right: calc(\n var(--combobox-padding) + var(--combobox-icon-size) +\n var(--sds-space-padding-tiny)\n );\n pointer-events: auto;\n width: 100%;\n }\n .sds-combobox__input:hover,\n .sds-combobox__input:focus-visible {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\n }\n .sds-combobox__input:active {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\n }\n .sds-combobox__input:focus-visible {\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n .sds-combobox__input:disabled {\n background: repeating-linear-gradient(\n -45deg,\n var(--sds-color-layout-background-default),\n var(--sds-color-layout-background-default) var(--sds-base-size-s),\n var(--sds-color-interaction-neutral-subtle-default)\n var(--sds-base-size-s),\n var(--sds-color-interaction-neutral-subtle-default)\n calc(var(--sds-base-size-s) 2)\n );\n cursor: not-allowed;\n }\n .sds-combobox__button {\n --button-border-radius: var(--sds-space-border-radius-minimal);\n --button-padding: var(--sds-space-padding-minimal);\n --button-width: calc(\n var(--combobox-icon-size) + var(--button-padding) +\n var(--combobox-border-width)\n );\n\n align-items: center;\n background-color: var(--combobox-button-background-color);\n border: 0 none;\n border-radius: var(--button-border-radius);\n color: var(--combobox-button-color);\n cursor: pointer;\n font-size: var(--sds-typography-body-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n justify-content: center;\n line-height: var(--sds-typography-body-default-lineheight);\n gap: var(--button-padding);\n padding: var(--button-padding)\n calc(var(--button-padding) + var(--button-padding));\n\n /* INFO: override u-components styling /\n\n /\n &:has(+ .sds-combobox__datalist:not([hidden])) {\n transform: rotateY(0deg) rotate(180deg);\n }\n /\n }\n / stylelint-disable-next-line /\n del.sds-combobox__button {\n pointer-events: auto;\n }\n .sds-combobox__button-icon {\n align-items: center;\n display: flex;\n font-size: var(--combobox-icon-size);\n justify-content: center;\n margin-right: calc(var(--button-padding) -1);\n margin-left: calc(var(--button-padding) * -1);\n }\n .sds-combobox__button:focus-visible {\n outline: var(--sds-focus-outline);\n }\n .sds-combobox__button:hover,\n .sds-combobox__button:focus-visible {\n --combobox-button-background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n }\n .sds-combobox__button:active {\n --combobox-button-background-color: var(\n --sds-color-interaction-primary-transparent-pressed\n );\n }\n .sds-combobox__button {\n\n align-self: center;\n margin-left: calc(calc(var(--combobox-padding) + var(--button-width)) * -1);\n}\n .sds-combobox__button:not([hidden]) + .sds-combobox__button {\n display: none;\n }\n .sds-combobox__datalist {\n background-color: var(--sds-color-layout-background-default);\n box-shadow: var(--sds-effect-shadow-elevated-default);\n border-radius: var(--sds-space-border-radius-medium);\n inset: 100% 0 auto;\n margin-top: var(--sds-space-gap-small);\n margin-bottom: var(--sds-space-gap-small);\n max-height: 15rem;\n overflow-y: auto;\n padding: var(--sds-space-padding-small);\n pointer-events: auto;\n position: absolute;\n z-index: var(--sds-base-zindex-modal);\n }\n .sds-combobox__datalist:has(.sds-combobox__datalist-option:not([aria-hidden=\"false\"])) {\n display: none;\n }\n .sds-combobox__datalist:not([hidden]):has(.sds-combobox__datalist-option:not([aria-hidden=\"true\"])) {\n display: block;\n }\n .sds-combobox__datalist-option {\n padding: var(--sds-space-padding-small);\n margin: var(--sds-space-gap-tiny);\n border-radius: var(--sds-space-border-radius-medium);\n }\n .sds-combobox__datalist-option:focus {\n outline: unset;\n }\n .sds-combobox__datalist-option:focus-visible {\n outline: var(--sds-focus-outline);\n }\n .sds-combobox__datalist-option:hover,\n .sds-combobox__datalist-option:focus-visible {\n background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n }\n .sds-combobox__datalist-option:active {\n background-color: var(\n --sds-color-interaction-primary-transparent-pressed\n );\n }\n .sds-combobox__datalist-option[selected] {\n background-color: var(--sds-color-interaction-primary-subtle-pressed);\n }\n .sds-combobox--invalid .sds-combobox__combobox {\n --combobox-border-color: var(--sds-color-interaction-danger-strong-default);\n --combobox-button-color: var(--sds-color-text-on-strong);\n --combobox-button-background-color: var(\n --sds-color-interaction-danger-strong-default\n );\n }\n .sds-combobox--invalid .sds-combobox__combobox:hover,\n .sds-combobox--invalid .sds-combobox__combobox:focus-within {\n --combobox-border-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --combobox-button-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n }\n .sds-combobox--invalid .sds-combobox__combobox:active {\n --combobox-border-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n --combobox-button-background-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n }\n .sds-combobox--invalid .sds-combobox__combobox .sds-combobox__button:hover,\n .sds-combobox--invalid .sds-combobox__combobox .sds-combobox__button:focus {\n --combobox-border-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --combobox-button-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n }\n"],"mappings":"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","names":[]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sikt/sds-combobox",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "license": "UNLICENSED",
   "homepage": "https://designsystem.sikt.no/",
   "repository": {