@sikt/sds-combobox 3.2.0 → 3.2.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.
- package/CHANGELOG.md +8 -0
- package/dist/index.css +4 -4
- package/dist/index.css.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
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
4
|
|
|
5
|
+
## [3.2.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@3.2.0...@sikt/sds-combobox@3.2.1) (2025-10-09)
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
- **combobox:** update header bottom border color ([c9ac481](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/c9ac4817b5d46a1736f905c01b7065671d96ea56))
|
|
10
|
+
- **deps:** update dependency react-aria-components to ^1.12.2 ([d6c8b67](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/d6c8b67afbb193c3237a467b1c5be94dfb90734d))
|
|
11
|
+
- update border color token ([629a582](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/629a582023f405acdec8bede427e285847795891))
|
|
12
|
+
|
|
5
13
|
## [3.2.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@3.1.0...@sikt/sds-combobox@3.2.0) (2025-09-09)
|
|
6
14
|
|
|
7
15
|
### Features
|
package/dist/index.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* src/combobox.pcss */
|
|
2
2
|
.sds-combobox {
|
|
3
|
-
--combobox-border-color: var(--sds-color-
|
|
3
|
+
--combobox-border-color: var(--sds-color-layout-divider-strong);
|
|
4
4
|
--combobox-border-width: var(--sds-space-border-weight-regular);
|
|
5
5
|
--combobox-button-color: var(--sds-color-text-primary);
|
|
6
6
|
--combobox-button-background-color: transparent;
|
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
}
|
|
31
31
|
.sds-combobox__combobox-input:hover,
|
|
32
32
|
.sds-combobox__combobox-input:focus-visible {
|
|
33
|
-
--combobox-border-color: var(
|
|
33
|
+
--combobox-border-color: var(--sds-color-layout-divider-strong);
|
|
34
34
|
}
|
|
35
35
|
.sds-combobox__combobox-input:active {
|
|
36
|
-
--combobox-border-color: var(
|
|
36
|
+
--combobox-border-color: var(--sds-color-layout-divider-strong);
|
|
37
37
|
}
|
|
38
38
|
.sds-combobox__combobox-input[data-focus-visible],
|
|
39
39
|
.sds-combobox__combobox-input:focus-visible {
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
width: var(--trigger-width);
|
|
89
89
|
}
|
|
90
90
|
.sds-combobox__header {
|
|
91
|
-
border-bottom: var(--sds-space-border-weight-thin) solid var(--sds-color-
|
|
91
|
+
border-bottom: var(--sds-space-border-weight-thin) solid var(--sds-color-layout-divider-subtle);
|
|
92
92
|
font-size: var(--sds-typography-editorial-headline-xxs-fontsize);
|
|
93
93
|
font-weight: var(--sds-typography-editorial-headline-xxs-fontweight);
|
|
94
94
|
line-height: var(--sds-typography-editorial-headline-xxs-lineheight);
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/combobox.pcss"],"sourcesContent":[".sds-combobox {\n --combobox-border-color: var(--sds-color-
|
|
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\n display: inline-flex;\n flex-direction: column;\n width: 100%;\n}\n\n .sds-combobox__combobox {\n align-items: center;\n display: flex;\n position: relative;\n }\n\n .sds-combobox__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 flex: 1;\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 }\n\n .sds-combobox__combobox-input:hover,\n .sds-combobox__combobox-input:focus-visible {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\n }\n\n .sds-combobox__combobox-input:active {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\n }\n\n .sds-combobox__combobox-input[data-focus-visible],\n .sds-combobox__combobox-input:focus-visible {\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n\n .sds-combobox__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\n .sds-combobox__combobox-button {\n --combobox-button-font-size: var(--sds-typography-fontsize-700);\n --combobox-button-size: calc(\n var(--combobox-button-font-size) +\n calc(var(--sds-space-padding-minimal) * 2)\n );\n\n align-items: center;\n border: 0;\n background-color: var(--combobox-button-background-color);\n border-radius: var(--sds-space-border-radius-minimal);\n color: var(--combobox-button-color);\n display: flex;\n font-size: var(--combobox-button-font-size);\n justify-content: center;\n padding: var(--sds-space-padding-minimal);\n position: absolute;\n right: var(--combobox-padding);\n width: var(--combobox-button-size);\n height: var(--combobox-button-size);\n }\n\n .sds-combobox__combobox-button:hover,\n .sds-combobox__combobox-button:focus-visible {\n --combobox-button-background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n }\n\n .sds-combobox__listbox {\n display: block;\n width: unset;\n max-height: 15rem;\n min-height: unset;\n overflow: auto;\n }\n\n .sds-combobox__popover {\n padding: var(--sds-space-padding-small);\n margin-top: var(--sds-space-gap-small);\n margin-bottom: var(--sds-space-gap-small);\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\n /* INFO: this custom property is set by React Aria */\n width: var(--trigger-width);\n }\n\n .sds-combobox__header {\n border-bottom: var(--sds-space-border-weight-thin) solid\n var(--sds-color-layout-divider-subtle);\n font-size: var(--sds-typography-editorial-headline-xxs-fontsize);\n font-weight: var(--sds-typography-editorial-headline-xxs-fontweight);\n line-height: var(--sds-typography-editorial-headline-xxs-lineheight);\n padding: var(--sds-space-padding-small);\n margin: var(--sds-space-gap-tiny);\n }\n\n .sds-combobox__item {\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\n .sds-combobox__item[data-focus-visible],\n .sds-combobox__item:focus-visible {\n outline: var(--sds-focus-outline);\n }\n\n .sds-combobox__item[data-hovered],\n .sds-combobox__item[data-focus-visible],\n .sds-combobox__item:hover,\n .sds-combobox__item:focus-visible {\n background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n }\n\n .sds-combobox__item[data-pressed],\n .sds-combobox__item:active {\n background-color: var(\n --sds-color-interaction-primary-transparent-pressed\n );\n }\n\n .sds-combobox__item[data-selected] {\n background-color: var(--sds-color-interaction-primary-strong-pressed);\n color: var(--sds-color-text-on-strong);\n }\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\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\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\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":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikt/sds-combobox",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.1",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"homepage": "https://designsystem.sikt.no/",
|
|
6
6
|
"repository": {
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"@sikt/sds-core": "^4.6.0",
|
|
38
38
|
"@sikt/sds-form": "^4.1.0",
|
|
39
39
|
"@sikt/sds-icons": "^3.0.0",
|
|
40
|
-
"react-aria-components": "^1.12.
|
|
40
|
+
"react-aria-components": "^1.12.2"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"@types/react": "^18.0.0 || ^19.0.0",
|