mirror of
https://github.com/navikt/aksel.git
synced 2026-10-13 09:12:03 +00:00
Compare commits
14
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 github-actions[bot]andgithub-actions[bot]
|
c818a92355 | ||
|
Ken
|
e8ecf309a9 | ||
|
Ken
|
060d4f3c7c | ||
|
github-actions[bot]andgithub-actions[bot]
|
1871038837 | ||
|
Ken
|
5e79234eff | ||
|
github-actions[bot]andgithub-actions[bot]
|
b8bebace11 | ||
|
Ken
|
14379a02c3 | ||
|
github-actions[bot]andgithub-actions[bot]
|
d716ebbc40 | ||
|
Ken
|
f1c4c46ebb | ||
|
Ken
|
9d2cd9e7ff | ||
|
github-actions[bot]andgithub-actions[bot]
|
2fe5a0a0e2 | ||
|
Ken
|
db3846f5cd | ||
|
Ken
|
fa2ead912a | ||
|
Ken
|
11e9b9bef2 |
No files matched your search
@@ -1,5 +1,15 @@
|
||||
# @navikt/aksel-icons
|
||||
|
||||
## 3.1.3
|
||||
|
||||
## 3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel-icons",
|
||||
"version": "3.0.0",
|
||||
"version": "3.1.3",
|
||||
"author": "Aksel | NAV",
|
||||
"homepage": "https://aksel.nav.no/ikoner",
|
||||
"repository": {
|
||||
|
||||
@@ -1,5 +1,40 @@
|
||||
# @navikt/aksel
|
||||
|
||||
## 3.1.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f)]:
|
||||
- @navikt/ds-css@3.1.3
|
||||
|
||||
## 3.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-css@3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-css@3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca), [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372)]:
|
||||
- @navikt/ds-css@3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-css@3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel",
|
||||
"version": "3.0.0",
|
||||
"version": "3.1.3",
|
||||
"description": "Aksel command line interface. Handles css-imports, codemods and more",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -29,7 +29,7 @@
|
||||
},
|
||||
"homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
|
||||
"dependencies": {
|
||||
"@navikt/ds-css": "3.0.0",
|
||||
"@navikt/ds-css": "3.1.3",
|
||||
"axios": "1.3.6",
|
||||
"chalk": "4.1.0",
|
||||
"clipboardy": "^2.3.0",
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
# @navikt/ds-codemod
|
||||
|
||||
## 3.1.3
|
||||
|
||||
## 3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-codemod",
|
||||
"version": "3.0.0",
|
||||
"version": "3.1.3",
|
||||
"description": "Aksel codemods for NAVs designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -40,8 +40,8 @@
|
||||
"build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-icons": "^3.0.0",
|
||||
"@navikt/ds-react": "^3.0.0",
|
||||
"@navikt/ds-icons": "^3.1.3",
|
||||
"@navikt/ds-react": "^3.1.3",
|
||||
"clsx": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -1,5 +1,31 @@
|
||||
# @navikt/ds-css
|
||||
|
||||
## 3.1.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#1976](https://github.com/navikt/aksel/pull/1976) [`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert utseende for ToggleGroup
|
||||
|
||||
- Medium og Small er begge 10px lavere
|
||||
- Mindre border-radius
|
||||
|
||||
## 3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- [#1966](https://github.com/navikt/aksel/pull/1966) [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Alle komponenter bruker nå default `:focus-visible` for fokusmarkering.
|
||||
(Alle komponenter som bruker `:focus-visible` har også en fallback for `:focus`)
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#1967](https://github.com/navikt/aksel/pull/1967) [`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert Label og Description spacing for skjemakomponenter
|
||||
|
||||
## 3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
### Major Changes
|
||||
|
||||
+87
-12
@@ -63,11 +63,18 @@
|
||||
padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
|
||||
}
|
||||
|
||||
.navds-button:focus {
|
||||
.navds-button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button__icon {
|
||||
--ac-button-icon-margin: -4px;
|
||||
|
||||
@@ -114,10 +121,16 @@
|
||||
background-color: var(--ac-button-primary-active-bg, var(--a-surface-action-active));
|
||||
}
|
||||
|
||||
.navds-button--primary:focus {
|
||||
.navds-button--primary:focus-visible {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--primary:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--primary:hover:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--primary:active:where(:disabled, .navds-button--disabled) {
|
||||
background-color: var(--ac-button-primary-bg, var(--a-surface-action));
|
||||
@@ -140,10 +153,16 @@
|
||||
background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active));
|
||||
}
|
||||
|
||||
.navds-button--primary-neutral:focus {
|
||||
.navds-button--primary-neutral:focus-visible {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--primary-neutral:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
|
||||
background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
|
||||
@@ -164,20 +183,32 @@
|
||||
background-color: var(--ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover));
|
||||
}
|
||||
|
||||
.navds-button--secondary:focus {
|
||||
.navds-button--secondary:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--secondary:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--secondary:active {
|
||||
color: var(--ac-button-secondary-active-text, var(--a-text-on-action));
|
||||
background-color: var(--ac-button-secondary-active-bg, var(--a-surface-action-active));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navds-button--secondary:focus:active {
|
||||
.navds-button--secondary:focus-visible:active {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--secondary:focus:active {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--secondary:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
|
||||
color: var(--ac-button-secondary-text, var(--a-text-action));
|
||||
@@ -199,22 +230,36 @@
|
||||
background-color: var(--ac-button-secondary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
|
||||
}
|
||||
|
||||
.navds-button--secondary-neutral:focus {
|
||||
.navds-button--secondary-neutral:focus-visible {
|
||||
color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--secondary-neutral:focus {
|
||||
color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--secondary-neutral:active {
|
||||
color: var(--ac-button-secondary-neutral-active-text, var(--a-text-on-neutral));
|
||||
background-color: var(--ac-button-secondary-neutral-active-bg, var(--a-surface-neutral-active));
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navds-button--secondary-neutral:focus:active {
|
||||
.navds-button--secondary-neutral:focus-visible:active {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
|
||||
var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--secondary-neutral:focus:active {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
|
||||
var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
|
||||
color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
|
||||
@@ -236,10 +281,16 @@
|
||||
background-color: var(--ac-button-tertiary-hover-bg, var(--a-surface-action-subtle-hover));
|
||||
}
|
||||
|
||||
.navds-button--tertiary:focus {
|
||||
.navds-button--tertiary:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--tertiary:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--tertiary:active {
|
||||
color: var(--ac-button-tertiary-active-text, var(--a-text-on-action));
|
||||
background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active));
|
||||
@@ -250,10 +301,16 @@
|
||||
background-color: var(--ac-button-tertiary-active-hover-bg, var(--a-surface-action-active));
|
||||
}
|
||||
|
||||
.navds-button--tertiary:active:focus {
|
||||
.navds-button--tertiary:focus-visible:active {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--tertiary:focus:active {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--tertiary:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
|
||||
@@ -276,10 +333,16 @@
|
||||
background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
|
||||
}
|
||||
|
||||
.navds-button--tertiary-neutral:focus {
|
||||
.navds-button--tertiary-neutral:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--tertiary-neutral:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--tertiary-neutral:active {
|
||||
color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
|
||||
background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
|
||||
@@ -290,10 +353,16 @@
|
||||
background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active));
|
||||
}
|
||||
|
||||
.navds-button--tertiary-neutral:active:focus {
|
||||
.navds-button--tertiary-neutral:focus-visible:active {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--tertiary-neutral:focus:active {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
|
||||
@@ -320,10 +389,16 @@
|
||||
background-color: var(--ac-button-danger-active-bg, var(--a-surface-danger-active));
|
||||
}
|
||||
|
||||
.navds-button--danger:focus {
|
||||
.navds-button--danger:focus-visible {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-button--danger:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-button--danger:active:where(:disabled, .navds-button--disabled),
|
||||
.navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
|
||||
background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
|
||||
|
||||
@@ -56,11 +56,6 @@
|
||||
gap: var(--a-spacing-2);
|
||||
}
|
||||
|
||||
.navds-chat__bubble:focus {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navds-chat--right .navds-chat__bubble {
|
||||
border-radius: var(--a-border-radius-xlarge);
|
||||
border-bottom-right-radius: 2px;
|
||||
|
||||
@@ -63,6 +63,18 @@
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-chips__toggle:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
|
||||
}
|
||||
|
||||
.navds-chips__toggle[aria-pressed="true"]:focus,
|
||||
.navds-chips__toggle:active:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
|
||||
}
|
||||
}
|
||||
|
||||
.navds-chips__removable {
|
||||
gap: 0;
|
||||
}
|
||||
@@ -117,6 +129,18 @@
|
||||
box-shadow: 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-chips__removable--action:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
|
||||
.navds-chips__removable--neutral:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-chips__removable--action:hover {
|
||||
background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
|
||||
}
|
||||
|
||||
@@ -73,16 +73,30 @@
|
||||
border-radius: var(--a-border-radius-xlarge);
|
||||
}
|
||||
|
||||
.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
|
||||
.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
|
||||
.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus-visible,
|
||||
.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus-visible {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
|
||||
.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus,
|
||||
.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible,
|
||||
.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus,
|
||||
.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
/* Monthpicker */
|
||||
.navds-date__month-button {
|
||||
all: unset;
|
||||
@@ -94,12 +108,20 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navds-date__month-button:focus,
|
||||
.navds-monthpicker__caption-button:focus {
|
||||
.navds-date__month-button:focus-visible,
|
||||
.navds-monthpicker__caption-button:focus-visible {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-date__month-button:focus,
|
||||
.navds-monthpicker__caption-button:focus {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.navds-date__year-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -126,11 +148,17 @@
|
||||
}
|
||||
|
||||
/* Focus layering */
|
||||
.navds-date__field-input:focus,
|
||||
.navds-date__field-input:focus-visible,
|
||||
.navds-date__field-button {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-date__field-input:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.navds-date .rdp-day_selected,
|
||||
.navds-monthpicker__month--selected {
|
||||
color: var(--ac-date-selected-text, var(--a-text-on-action));
|
||||
@@ -183,10 +211,16 @@
|
||||
box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger));
|
||||
}
|
||||
|
||||
.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
|
||||
.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled) {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled) {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-date-input-error-border, var(--a-border-danger)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-date__field-button {
|
||||
position: absolute;
|
||||
right: var(--a-spacing-2);
|
||||
|
||||
@@ -123,12 +123,16 @@
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.navds-expansioncard__header-button:focus {
|
||||
.navds-expansioncard__header-button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-expansioncard__header-button:focus-visible {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-expansioncard__header-button:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
|
||||
|
||||
@@ -8,11 +8,18 @@
|
||||
padding: var(--a-spacing-3);
|
||||
}
|
||||
|
||||
.navds-error-summary:focus {
|
||||
.navds-error-summary:focus-visible {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-error-summary:focus {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navds-error-summary__list {
|
||||
margin: var(--a-spacing-3) 0;
|
||||
display: flex;
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
}
|
||||
|
||||
.navds-fieldset > .navds-fieldset__description:not(:empty) {
|
||||
margin-top: var(--a-spacing-1);
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
/* Applied when hideLegend is applied to fieldset */
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
}
|
||||
|
||||
.navds-form-field__description {
|
||||
margin-top: -4px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.navds-form-field .navds-error-message,
|
||||
@@ -27,3 +27,7 @@
|
||||
.navds-form-field__error:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-form-field__subdescription {
|
||||
color: var(--ac-form-subdescription, var(--a-text-subtle));
|
||||
}
|
||||
@@ -43,7 +43,7 @@
|
||||
.navds-radio__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--a-spacing-1);
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__input,
|
||||
@@ -65,16 +65,30 @@
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:focus + .navds-checkbox__label::before,
|
||||
.navds-radio__input:focus + .navds-radio__label::before {
|
||||
.navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
|
||||
.navds-radio__input:focus-visible + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:focus + .navds-radio__label::before {
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-checkbox__input:focus + .navds-checkbox__label::before,
|
||||
.navds-radio__input:focus + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:focus-visible + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:focus + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
|
||||
box-shadow: none;
|
||||
background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
|
||||
@@ -109,32 +123,54 @@
|
||||
background-position: 4px center;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
|
||||
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
|
||||
.navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
|
||||
.navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
|
||||
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-radio__input:checked + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
||||
inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
|
||||
background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
|
||||
}
|
||||
|
||||
.navds-radio__input:checked:focus + .navds-radio__label::before {
|
||||
.navds-radio__input:checked:focus-visible + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
||||
inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-radio__input:checked:focus + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
|
||||
inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
|
||||
.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
|
||||
color: var(--ac-radio-checkbox-action, var(--a-surface-action));
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
|
||||
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
|
||||
}
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
|
||||
background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
|
||||
@@ -148,28 +184,55 @@
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
||||
> .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
|
||||
.navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
|
||||
> .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
|
||||
.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
|
||||
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
|
||||
> .navds-checkbox__input:focus-visible:hover:not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
|
||||
.navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
|
||||
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
|
||||
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
|
||||
background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
|
||||
box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-checkbox--disabled,
|
||||
.navds-radio--disabled {
|
||||
opacity: 0.3;
|
||||
|
||||
@@ -86,11 +86,18 @@
|
||||
color: var(--ac-search-clear-icon-hover, var(--a-text-action));
|
||||
}
|
||||
|
||||
.navds-search__button-clear:focus {
|
||||
.navds-search__button-clear:focus-visible {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-search__button-clear:focus {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navds-search__button-search {
|
||||
flex-shrink: 0;
|
||||
min-width: 64px;
|
||||
@@ -126,31 +133,56 @@
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary:focus {
|
||||
.navds-search__button-search.navds-button--secondary:focus-visible {
|
||||
box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary:focus:hover {
|
||||
.navds-search__button-search.navds-button--secondary:focus-visible:hover {
|
||||
box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary:focus:active {
|
||||
.navds-search__button-search.navds-button--secondary:focus-visible:active {
|
||||
box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-search__button-search.navds-button--secondary:focus {
|
||||
box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary:focus:hover {
|
||||
box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-search__button-search.navds-button--secondary:focus:active {
|
||||
box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
/* Error-handling */
|
||||
.navds-search--error .navds-search__input:not(:hover):not(:disabled) {
|
||||
border-color: var(--ac-search-error-border, var(--a-border-danger));
|
||||
box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger));
|
||||
}
|
||||
|
||||
.navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
|
||||
.navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
/* Focus layering */
|
||||
.navds-search__input:focus,
|
||||
.navds-search__input:focus-visible,
|
||||
.navds-search__button-clear,
|
||||
.navds-search__button-search:focus {
|
||||
.navds-search__button-search:focus-visible {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-search__input:focus,
|
||||
.navds-search__button-search:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
@@ -17,11 +17,18 @@
|
||||
border-color: var(--ac-select-hover-bg, var(--a-border-action));
|
||||
}
|
||||
|
||||
.navds-select__input:focus {
|
||||
.navds-select__input:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-select__input:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-select__container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
.navds-switch__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--a-spacing-1);
|
||||
gap: 0.125rem;
|
||||
padding: 0.75rem 0 0.75rem 3.25rem;
|
||||
}
|
||||
|
||||
@@ -110,10 +110,16 @@
|
||||
background-color: var(--ac-switch-checked-bg, var(--a-border-success));
|
||||
}
|
||||
|
||||
.navds-switch__input:focus ~ .navds-switch__track {
|
||||
.navds-switch__input:focus-visible ~ .navds-switch__track {
|
||||
box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-switch__input:focus ~ .navds-switch__track {
|
||||
box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
/* Thumb */
|
||||
.navds-switch__thumb {
|
||||
background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
|
||||
|
||||
@@ -35,11 +35,18 @@
|
||||
border-color: var(--ac-textfield-hover-border, var(--a-border-action));
|
||||
}
|
||||
|
||||
.navds-text-field__input:focus {
|
||||
.navds-text-field__input:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-text-field__input:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Error handling
|
||||
*/
|
||||
@@ -48,10 +55,16 @@
|
||||
box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--a-border-danger));
|
||||
}
|
||||
|
||||
.navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
|
||||
.navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-text-field--error > .navds-text-field__input:focus:not(:hover):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--a-border-danger), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
/* Disabled handling */
|
||||
.navds-text-field__input:disabled {
|
||||
background-color: var(--ac-textfield-bg, var(--a-surface-default));
|
||||
|
||||
@@ -38,11 +38,18 @@
|
||||
border-color: var(--ac-textarea-hover-border, var(--a-border-action));
|
||||
}
|
||||
|
||||
.navds-textarea__input:focus {
|
||||
.navds-textarea__input:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-textarea__input:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-form-field--small .navds-textarea__input {
|
||||
padding: 6px;
|
||||
}
|
||||
@@ -73,11 +80,18 @@
|
||||
/**
|
||||
Error handling
|
||||
*/
|
||||
.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
|
||||
.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus-visible):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
|
||||
border-color: var(--ac-textarea-error-border, var(--a-border-danger));
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
|
||||
border-color: var(--ac-textarea-error-border, var(--a-border-danger));
|
||||
}
|
||||
}
|
||||
|
||||
.navds-textarea__input:disabled {
|
||||
background-color: var(--ac-textarea-bg, var(--a-surface-default));
|
||||
border-color: var(--ac-textarea-border, var(--a-border-default));
|
||||
|
||||
@@ -12,11 +12,17 @@
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.navds-help-text__button:focus {
|
||||
outline: none;
|
||||
.navds-help-text__button:focus-visible {
|
||||
box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-help-text__button:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-help-text__icon {
|
||||
border-radius: var(--a-border-radius-full);
|
||||
}
|
||||
@@ -36,10 +42,20 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-help-text__button:where(:hover, :focus, [aria-expanded="true"]) > .navds-help-text__icon {
|
||||
.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-help-text__button:where(:hover, :focus, [aria-expanded="true"]) > .navds-help-text__icon--filled {
|
||||
.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-help-text__button:where(:focus) > .navds-help-text__icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-help-text__button:where(:focus) > .navds-help-text__icon--filled {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
@@ -17,11 +17,18 @@
|
||||
border-color: var(--ac-link-panel-hover-border, var(--a-border-action));
|
||||
}
|
||||
|
||||
.navds-link-panel:focus {
|
||||
.navds-link-panel:focus-visible {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-link-panel:focus {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navds-link-panel__chevron {
|
||||
flex-shrink: 0;
|
||||
font-size: 1.5rem;
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navds-link:focus {
|
||||
.navds-link:focus-visible {
|
||||
outline: none;
|
||||
color: var(--ac-link-focus-text, var(--a-text-on-action));
|
||||
text-decoration: none;
|
||||
@@ -23,6 +23,16 @@
|
||||
box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-link:focus {
|
||||
outline: none;
|
||||
color: var(--ac-link-focus-text, var(--a-text-on-action));
|
||||
text-decoration: none;
|
||||
background-color: var(--ac-link-focus-bg, var(--a-border-focus));
|
||||
box-shadow: 0 0 0 2px var(--ac-link-focus-border, var(--a-border-focus));
|
||||
}
|
||||
}
|
||||
|
||||
.navds-link:active {
|
||||
outline: none;
|
||||
color: var(--ac-link-active-text, var(--a-text-on-action));
|
||||
|
||||
@@ -15,12 +15,20 @@
|
||||
padding: var(--a-spacing-4);
|
||||
}
|
||||
|
||||
.navds-modal:focus,
|
||||
.navds-modal:focus-visible,
|
||||
.navds-modal--focus {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-modal:focus,
|
||||
.navds-modal--focus {
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navds-modal__overlay {
|
||||
position: fixed;
|
||||
z-index: var(--a-z-index-modal);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css",
|
||||
"version": "3.0.0",
|
||||
"version": "3.1.3",
|
||||
"description": "CSS for NAV Designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
@@ -27,7 +27,7 @@
|
||||
"css:get-version": "node config/get-version.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^3.0.0",
|
||||
"@navikt/ds-tokens": "^3.1.3",
|
||||
"cssnano": "6.0.0",
|
||||
"fast-glob": "3.2.11",
|
||||
"lodash": "4.17.21",
|
||||
|
||||
@@ -35,10 +35,16 @@
|
||||
color: var(--ac-pagination-selected-text, var(--a-text-on-action));
|
||||
}
|
||||
|
||||
.navds-pagination__item[aria-current="true"]:focus {
|
||||
.navds-pagination__item[aria-current="true"]:focus-visible {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-pagination__item[aria-current="true"]:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-pagination__prev-next {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -15,11 +15,18 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navds-popover:focus {
|
||||
.navds-popover:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-popover:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-popover__arrow {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
@@ -24,11 +24,18 @@
|
||||
background-color: var(--ac-read-more-active-bg, var(--a-surface-active));
|
||||
}
|
||||
|
||||
.navds-read-more__button:focus {
|
||||
.navds-read-more__button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-read-more__button:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-read-more__content {
|
||||
margin-top: var(--a-spacing-1);
|
||||
border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
|
||||
|
||||
@@ -80,12 +80,20 @@ button.navds-stepper__step {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
:where(.navds-stepper__step):focus {
|
||||
:where(.navds-stepper__step):focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-stepper__step:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--a-shadow-focus);
|
||||
isolation: isolate;
|
||||
}
|
||||
}
|
||||
|
||||
.navds-stepper__circle {
|
||||
grid-column: circle;
|
||||
display: inline-grid;
|
||||
|
||||
@@ -119,11 +119,18 @@
|
||||
background-color: var(--ac-table-sort-button-hover-bg, var(--a-bg-subtle));
|
||||
}
|
||||
|
||||
.navds-table__sort-button:focus {
|
||||
.navds-table__sort-button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-table__sort-button:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-table__header-cell[aria-sort="ascending"] .navds-table__sort-button,
|
||||
.navds-table__header-cell[aria-sort="descending"] .navds-table__sort-button {
|
||||
background-color: var(--ac-table-sort-button-sorted-bg, var(--a-surface-selected));
|
||||
@@ -181,10 +188,16 @@
|
||||
padding: var(--a-spacing-2);
|
||||
}
|
||||
|
||||
.navds-table__toggle-expand-button:focus {
|
||||
.navds-table__toggle-expand-button:focus-visible {
|
||||
box-shadow: inset var(--a-shadow-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-table__toggle-expand-button:focus {
|
||||
box-shadow: inset var(--a-shadow-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-table__expandable-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
@@ -62,12 +62,20 @@
|
||||
color: var(--ac-tabs-selected-text, var(--a-text-default));
|
||||
}
|
||||
|
||||
.navds-tabs__tab:focus {
|
||||
.navds-tabs__tab:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: inset var(--a-shadow-focus);
|
||||
color: var(--ac-tabs-focus-text, var(--a-text-default));
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-tabs__tab:focus {
|
||||
outline: none;
|
||||
box-shadow: inset var(--a-shadow-focus);
|
||||
color: var(--ac-tabs-focus-text, var(--a-text-default));
|
||||
}
|
||||
}
|
||||
|
||||
.navds-tabs__tab-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -112,3 +120,10 @@
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-tabs__tabpanel:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
@@ -5,7 +5,7 @@
|
||||
}
|
||||
|
||||
.navds-toggle-group {
|
||||
border-radius: 9px;
|
||||
border-radius: var(--a-border-radius-medium);
|
||||
background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
|
||||
box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
|
||||
padding: calc(var(--a-spacing-1) + 1px);
|
||||
@@ -15,6 +15,10 @@
|
||||
grid-auto-columns: 1fr;
|
||||
}
|
||||
|
||||
.navds-toggle-group--small {
|
||||
padding: calc(var(--a-spacing-05) + 1px);
|
||||
}
|
||||
|
||||
.navds-toggle-group--neutral {
|
||||
background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
|
||||
box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
|
||||
@@ -24,14 +28,25 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--a-spacing-3);
|
||||
min-height: 48px;
|
||||
padding: var(--a-spacing-1) var(--a-spacing-3);
|
||||
min-height: 38px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
|
||||
color: var(--ac-toggle-group-button-text, var(--a-text-default));
|
||||
border-radius: var(--a-border-radius-medium);
|
||||
border-radius: 2px;
|
||||
min-width: fit-content;
|
||||
font-weight: var(--a-font-weight-regular);
|
||||
}
|
||||
|
||||
.navds-toggle-group--medium > :where(.navds-toggle-group__button:first-of-type:focus-visible) {
|
||||
border-start-start-radius: 1px;
|
||||
border-end-start-radius: 1px;
|
||||
}
|
||||
|
||||
.navds-toggle-group--medium > :where(.navds-toggle-group__button:last-of-type:focus-visible) {
|
||||
border-start-end-radius: 1px;
|
||||
border-end-end-radius: 1px;
|
||||
}
|
||||
|
||||
.navds-toggle-group--neutral > .navds-toggle-group__button {
|
||||
@@ -41,7 +56,7 @@
|
||||
|
||||
.navds-toggle-group__button:hover {
|
||||
background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
|
||||
color: var(--ac-toggle-group-button-hover-text, var(--a-text-action-on-action-subtle));
|
||||
color: var(--ac-toggle-group-button-hover-text, var(--a-text-default));
|
||||
}
|
||||
|
||||
.navds-toggle-group--neutral > .navds-toggle-group__button:hover {
|
||||
@@ -49,24 +64,45 @@
|
||||
color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
|
||||
}
|
||||
|
||||
.navds-toggle-group__button:focus {
|
||||
.navds-toggle-group__button:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
|
||||
}
|
||||
|
||||
.navds-toggle-group__button:focus:hover[aria-pressed="false"] {
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-toggle-group__button:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
|
||||
box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-toggle-group__button:focus:hover[aria-pressed="false"] {
|
||||
box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
|
||||
box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
|
||||
0 0 0 4px var(--a-border-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-toggle-group--neutral > .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
|
||||
box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
|
||||
0 0 0 4px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-toggle-group__button-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--a-spacing-2);
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
.navds-toggle-group__button-inner > * {
|
||||
@@ -77,17 +113,18 @@
|
||||
.navds-toggle-group__button[aria-checked="true"] {
|
||||
background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
|
||||
color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
|
||||
font-weight: var(--a-font-weight-bold);
|
||||
}
|
||||
|
||||
.navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
|
||||
.navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
|
||||
background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral));
|
||||
background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral-selected));
|
||||
color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
|
||||
}
|
||||
|
||||
.navds-toggle-group--small > .navds-toggle-group__button {
|
||||
padding: 0.375rem;
|
||||
min-height: 32px;
|
||||
padding: var(--a-spacing-05) var(--a-spacing-3);
|
||||
min-height: 26px;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
|
||||
@@ -277,14 +277,14 @@
|
||||
"--ac-toggle-group-button-bg": "--a-surface-transparent",
|
||||
"--ac-toggle-group-button-text": "--a-text-default",
|
||||
"--ac-toggle-group-button-hover-bg": "--a-surface-action-subtle",
|
||||
"--ac-toggle-group-button-hover-text": "--a-text-action-on-action-subtle",
|
||||
"--ac-toggle-group-button-hover-text": "--a-text-default",
|
||||
"--ac-toggle-group-selected-bg": "--a-surface-action-selected",
|
||||
"--ac-toggle-group-selected-text": "--a-text-on-action",
|
||||
"--ac-toggle-group-button-neutral-bg": "--a-surface-transparent",
|
||||
"--ac-toggle-group-button-neutral-text": "--a-text-default",
|
||||
"--ac-toggle-group-button-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
|
||||
"--ac-toggle-group-button-neutral-hover-text": "--a-text-default",
|
||||
"--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral",
|
||||
"--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral-selected",
|
||||
"--ac-toggle-group-neutral-selected-text": "--a-text-on-neutral"
|
||||
},
|
||||
"tooltip": {
|
||||
|
||||
@@ -1,5 +1,51 @@
|
||||
# @navikt/ds-react
|
||||
|
||||
## 3.1.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#1976](https://github.com/navikt/aksel/pull/1976) [`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert utseende for ToggleGroup
|
||||
|
||||
- Medium og Small er begge 10px lavere
|
||||
- Mindre border-radius
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@3.1.3
|
||||
|
||||
## 3.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#1967](https://github.com/navikt/aksel/pull/1967) [`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Oppdatert Label og Description spacing for skjemakomponenter
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [`fa2ead912`](https://github.com/navikt/aksel/commit/fa2ead912a4db15d1fa7e2c3efccbe69a64dc9a7) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :fire: Fjernet ds-icons fra dependencies
|
||||
|
||||
- [`db3846f5c`](https://github.com/navikt/aksel/commit/db3846f5cd483ad0ca24bc5938cfcdb64260f89d) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset default headingSize for Accordion
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/aksel-icons@3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
### Major Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "3.0.0",
|
||||
"version": "3.1.3",
|
||||
"description": "Aksel react-components for NAV designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -38,8 +38,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/react": "0.17.0",
|
||||
"@navikt/aksel-icons": "^3.0.0",
|
||||
"@navikt/ds-icons": "^3.0.0",
|
||||
"@navikt/aksel-icons": "^3.1.3",
|
||||
"@radix-ui/react-tabs": "1.0.0",
|
||||
"@radix-ui/react-toggle-group": "1.0.0",
|
||||
"clsx": "^1.2.1",
|
||||
|
||||
@@ -20,7 +20,7 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
*/
|
||||
variant?: "default" | "neutral";
|
||||
/**
|
||||
* @default 'large'
|
||||
* @default 'small'
|
||||
*/
|
||||
headingSize?: "large" | "medium" | "small" | "xsmall";
|
||||
/**
|
||||
@@ -38,7 +38,7 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
|
||||
{
|
||||
className,
|
||||
variant = "default",
|
||||
headingSize = "medium",
|
||||
headingSize = "small",
|
||||
size = "medium",
|
||||
...rest
|
||||
},
|
||||
|
||||
@@ -46,17 +46,20 @@ interface ExpansionCardCommonProps
|
||||
* @default "medium"
|
||||
*/
|
||||
size?: "medium" | "small";
|
||||
/**
|
||||
* Since ExpansionCard is a section-element, accessible name is required.
|
||||
*/
|
||||
}
|
||||
|
||||
type ExpansionCardConditionalProps =
|
||||
| {
|
||||
["aria-label"]: string;
|
||||
/**
|
||||
* Should be set if not using 'aria-labelledby'
|
||||
*/
|
||||
"aria-label": string;
|
||||
}
|
||||
| {
|
||||
["aria-labelledby"]: string;
|
||||
/**
|
||||
* Should be set if not using 'aria-label'
|
||||
*/
|
||||
"aria-labelledby": string;
|
||||
};
|
||||
|
||||
export type ExpansionCardContextProps = {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import cl from "clsx";
|
||||
import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
|
||||
import { BodyLong, Detail, Label, ErrorMessage, omit } from "../..";
|
||||
import { BodyShort, ErrorMessage, Label, omit } from "../..";
|
||||
import { FormFieldProps } from "../useFormField";
|
||||
import { useFieldset } from "./useFieldset";
|
||||
|
||||
@@ -104,30 +104,18 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
|
||||
>
|
||||
{legend}
|
||||
</Label>
|
||||
{!!description &&
|
||||
(size === "medium" ? (
|
||||
<BodyLong
|
||||
className={cl("navds-fieldset__description", {
|
||||
"navds-sr-only": !!hideLegend,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{props.description}
|
||||
</BodyLong>
|
||||
) : (
|
||||
<Detail
|
||||
className={cl("navds-fieldset__description", {
|
||||
"navds-sr-only": !!hideLegend,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{props.description}
|
||||
</Detail>
|
||||
))}
|
||||
{!!description && (
|
||||
<BodyShort
|
||||
className={cl("navds-fieldset__description", {
|
||||
"navds-sr-only": !!hideLegend,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size={size ?? "medium"}
|
||||
as="div"
|
||||
>
|
||||
{props.description}
|
||||
</BodyShort>
|
||||
)}
|
||||
{children}
|
||||
<div
|
||||
id={errorId}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React, { forwardRef, SelectHTMLAttributes } from "react";
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef, SelectHTMLAttributes } from "react";
|
||||
|
||||
import { ChevronDownIcon } from "@navikt/aksel-icons";
|
||||
import { BodyLong, Label, ErrorMessage, omit, Detail } from "..";
|
||||
import { BodyShort, ErrorMessage, Label, omit } from "..";
|
||||
import { FormFieldProps, useFormField } from "./useFormField";
|
||||
|
||||
export interface SelectProps
|
||||
@@ -74,31 +74,16 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
||||
{label}
|
||||
</Label>
|
||||
{!!description && (
|
||||
<>
|
||||
{size === "medium" ? (
|
||||
<BodyLong
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyLong>
|
||||
) : (
|
||||
<Detail
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</Detail>
|
||||
)}
|
||||
</>
|
||||
<BodyShort
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size={size}
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
)}
|
||||
<div className="navds-select__container" style={style}>
|
||||
<select
|
||||
|
||||
@@ -5,7 +5,7 @@ import React, {
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
import { BodyShort, Detail, Loader, omit } from "..";
|
||||
import { BodyShort, Loader, omit } from "..";
|
||||
import { FormFieldProps, useFormField } from "./useFormField";
|
||||
|
||||
const SelectedIcon = () => (
|
||||
@@ -71,8 +71,6 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
const Description = size === "medium" ? BodyShort : Detail;
|
||||
|
||||
const [checked, setChecked] = useState(
|
||||
defaultChecked ?? checkedProp ?? false
|
||||
);
|
||||
@@ -130,13 +128,13 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
|
||||
{children}
|
||||
</BodyShort>
|
||||
{description && (
|
||||
<Description
|
||||
<BodyShort
|
||||
size={size}
|
||||
as="div"
|
||||
size="small"
|
||||
className="navds-switch__description"
|
||||
className="navds-form-field__subdescription navds-switch__description"
|
||||
>
|
||||
{description}
|
||||
</Description>
|
||||
</BodyShort>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { forwardRef, InputHTMLAttributes } from "react";
|
||||
import cl from "clsx";
|
||||
import { BodyLong, Detail, Label, ErrorMessage, omit } from "..";
|
||||
import React, { forwardRef, InputHTMLAttributes } from "react";
|
||||
import { BodyShort, ErrorMessage, Label, omit } from "..";
|
||||
import { FormFieldProps, useFormField } from "./useFormField";
|
||||
|
||||
export interface TextFieldProps
|
||||
@@ -78,31 +78,16 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
|
||||
</Label>
|
||||
|
||||
{!!description && (
|
||||
<>
|
||||
{size === "medium" ? (
|
||||
<BodyLong
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyLong>
|
||||
) : (
|
||||
<Detail
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</Detail>
|
||||
)}
|
||||
</>
|
||||
<BodyShort
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size={size}
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
)}
|
||||
<input
|
||||
{...omit(rest, ["error", "errorId", "size"])}
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import React, { forwardRef, useState } from "react";
|
||||
import cl from "clsx";
|
||||
import { BodyShort, BodyLong, Label, ErrorMessage, omit, Detail } from "..";
|
||||
import { FormFieldProps, useFormField } from "./useFormField";
|
||||
import { useId } from "..";
|
||||
import React, { forwardRef, useState } from "react";
|
||||
import { BodyShort, ErrorMessage, Label, omit, useId } from "..";
|
||||
import TextareaAutosize from "../util/TextareaAutoSize";
|
||||
import { FormFieldProps, useFormField } from "./useFormField";
|
||||
|
||||
/**
|
||||
* TODO: Mulighet for lokalisering av sr-only/counter text
|
||||
@@ -120,31 +119,16 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
{label}
|
||||
</Label>
|
||||
{!!description && (
|
||||
<>
|
||||
{size === "medium" ? (
|
||||
<BodyLong
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyLong>
|
||||
) : (
|
||||
<Detail
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</Detail>
|
||||
)}
|
||||
</>
|
||||
<BodyShort
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size={size}
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
)}
|
||||
<div className="navds-textarea__wrapper">
|
||||
<TextareaAutosize
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef, InputHTMLAttributes } from "react";
|
||||
import { BodyLong, BodyShort, Detail } from "../../typography";
|
||||
import { BodyShort } from "../../typography";
|
||||
import { omit } from "../../util";
|
||||
import { FormFieldProps } from "../useFormField";
|
||||
import useCheckbox from "./useCheckbox";
|
||||
@@ -44,8 +44,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
||||
(props, ref) => {
|
||||
const { inputProps, hasError, size } = useCheckbox(props);
|
||||
|
||||
const Description = size === "medium" ? BodyLong : Detail;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cl(
|
||||
@@ -94,9 +92,13 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
||||
{props.children}
|
||||
</BodyShort>
|
||||
{props.description && (
|
||||
<Description as="span" className="navds-checkbox__description">
|
||||
<BodyShort
|
||||
as="span"
|
||||
size={size}
|
||||
className="navds-form-field__subdescription navds-checkbox__description"
|
||||
>
|
||||
{props.description}
|
||||
</Description>
|
||||
</BodyShort>
|
||||
)}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import cl from "clsx";
|
||||
import React, { forwardRef, InputHTMLAttributes } from "react";
|
||||
import { BodyLong, BodyShort, Detail } from "../../typography";
|
||||
import { BodyShort } from "../../typography";
|
||||
import { omit } from "../../util";
|
||||
import { FormFieldProps } from "../useFormField";
|
||||
import { useRadio } from "./useRadio";
|
||||
@@ -25,8 +25,6 @@ export interface RadioProps
|
||||
export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
|
||||
const { inputProps, size, hasError } = useRadio(props);
|
||||
|
||||
const Description = size === "medium" ? BodyLong : Detail;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cl(props.className, "navds-radio", `navds-radio--${size}`, {
|
||||
@@ -46,9 +44,13 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
|
||||
{props.children}
|
||||
</BodyShort>
|
||||
{props.description && (
|
||||
<Description as="span" className="navds-radio__description">
|
||||
<BodyShort
|
||||
as="span"
|
||||
size={size}
|
||||
className="navds-form-field__subdescription navds-radio__description"
|
||||
>
|
||||
{props.description}
|
||||
</Description>
|
||||
</BodyShort>
|
||||
)}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
@@ -86,7 +86,9 @@ export const GroupDescription = () => (
|
||||
defaultValue="tekst2"
|
||||
description="Group description"
|
||||
>
|
||||
<Radio value="tekst">Radiotekst</Radio>
|
||||
<Radio value="tekst" description="textdesc">
|
||||
Radiotekst
|
||||
</Radio>
|
||||
<Radio value="tekst2">Radiotekst</Radio>
|
||||
</RadioGroup>
|
||||
);
|
||||
@@ -181,12 +181,12 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
|
||||
</Label>
|
||||
{!!description && (
|
||||
<BodyShort
|
||||
as="div"
|
||||
className={cl("navds-form-field__description", {
|
||||
"navds-sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size={size}
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { forwardRef, useContext } from "react";
|
||||
import cl from "clsx";
|
||||
import { Label } from "..";
|
||||
import { BodyShort } from "../typography/BodyShort";
|
||||
import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
|
||||
import { ToggleGroupContext } from "./ToggleGroup";
|
||||
|
||||
@@ -30,13 +30,13 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleItemProps>(
|
||||
ref={ref}
|
||||
className={cl("navds-toggle-group__button", className)}
|
||||
>
|
||||
<Label
|
||||
<BodyShort
|
||||
as="span"
|
||||
className="navds-toggle-group__button-inner"
|
||||
size={context?.size}
|
||||
>
|
||||
{children}
|
||||
</Label>
|
||||
</BodyShort>
|
||||
</RadixToggleGroup.Item>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
# @navikt/ds-tailwind
|
||||
|
||||
## 3.1.3
|
||||
|
||||
## 3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tailwind",
|
||||
"version": "3.0.0",
|
||||
"version": "3.1.3",
|
||||
"description": "Tailwind config based on @navikt/ds-tokens",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
@@ -22,7 +22,7 @@
|
||||
"directory": "@navikt/core/tailwind"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^3.0.0",
|
||||
"@navikt/ds-tokens": "^3.1.3",
|
||||
"@types/jest": "^29.0.0",
|
||||
"color": "4.2.3",
|
||||
"jest": "^29.0.0",
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
# @navikt/ds-tokens
|
||||
|
||||
## 3.1.3
|
||||
|
||||
## 3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tokens",
|
||||
"version": "3.0.0",
|
||||
"version": "3.1.3",
|
||||
"description": "Design-tokens for NAV designsystem",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
# @navikt/ds-icons
|
||||
|
||||
## 3.1.3
|
||||
|
||||
## 3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-icons",
|
||||
"version": "3.0.0",
|
||||
"version": "3.1.3",
|
||||
"description": "Aksel icons for NAV",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"repository": {
|
||||
|
||||
@@ -1,5 +1,28 @@
|
||||
# @navikt/ds-css-internal
|
||||
|
||||
## 3.1.3
|
||||
|
||||
## 3.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [`5e79234ef`](https://github.com/navikt/aksel/commit/5e79234effb8c8fc73c9bb0c34737e99fab1510b) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset pin alignment for Timeline
|
||||
|
||||
## 3.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [`14379a02c`](https://github.com/navikt/aksel/commit/14379a02c3d32091a8c33061464160d7de9f3f2e) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Timeline håndterte ikke SVG ikoner riktig
|
||||
|
||||
## 3.1.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- [#1966](https://github.com/navikt/aksel/pull/1966) [`f1c4c46eb`](https://github.com/navikt/aksel/commit/f1c4c46ebb0522561483f18e3b86b190cf9cc372) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :lipstick: Alle komponenter bruker nå default `:focus-visible` for fokusmarkering.
|
||||
(Alle komponenter som bruker `:focus-visible` har også en fallback for `:focus`)
|
||||
|
||||
## 3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
## 2.9.8
|
||||
|
||||
@@ -63,6 +63,13 @@
|
||||
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navdsi-dropdown__item:focus {
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navdsi-dropdown__item:disabled {
|
||||
color: var(--ac-dropdown-item-text, var(--a-text-action));
|
||||
opacity: 0.3;
|
||||
|
||||
@@ -59,12 +59,20 @@ button.navdsi-header__title:hover,
|
||||
background-color: var(--ac-header-hover-bg, var(--a-surface-inverted-hover));
|
||||
}
|
||||
|
||||
.navdsi-header__title:focus,
|
||||
.navdsi-header__button:focus {
|
||||
.navdsi-header__title:focus-visible,
|
||||
.navdsi-header__button:focus-visible {
|
||||
box-shadow: var(--navdsi-header-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navdsi-header__title:focus,
|
||||
.navdsi-header__button:focus {
|
||||
box-shadow: var(--navdsi-header-focus);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.navdsi-header__title:active,
|
||||
button.navdsi-header__title:active,
|
||||
.navdsi-header__button:active {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css-internal",
|
||||
"version": "3.0.0",
|
||||
"version": "3.1.3",
|
||||
"description": "CSS for NAV internal Designsystem-components",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"keywords": [
|
||||
|
||||
@@ -12,7 +12,6 @@
|
||||
height: 1rem;
|
||||
box-sizing: content-box;
|
||||
grid-column: 2;
|
||||
margin-left: var(--a-spacing-8);
|
||||
}
|
||||
|
||||
.navdsi-timeline__row-label {
|
||||
@@ -40,7 +39,6 @@
|
||||
display: flex;
|
||||
background: var(--ac-timeline-row-bg, var(--a-surface-subtle));
|
||||
margin: var(--a-spacing-4) 0;
|
||||
padding-left: var(--a-spacing-8);
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
@@ -85,6 +83,10 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navdsi-timeline__period--inner svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navdsi-timeline__period--clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -190,7 +192,7 @@
|
||||
top: calc(-12.5px + 3.5px);
|
||||
}
|
||||
|
||||
.navdsi-timeline__pin-button:focus {
|
||||
.navdsi-timeline__pin-button:focus-visible {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
|
||||
0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
|
||||
0 0 0 6px var(--a-border-focus);
|
||||
@@ -202,12 +204,27 @@
|
||||
0 0 0 4px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 5px var(--a-surface-default);
|
||||
}
|
||||
|
||||
.navdsi-timeline__pin-button:hover:focus {
|
||||
.navdsi-timeline__pin-button:hover:focus-visible {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
|
||||
0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
|
||||
0 0 0 6px var(--a-border-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navdsi-timeline__pin-button:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg, var(--a-surface-danger)),
|
||||
0 0 0 3px var(--ac-timeline-pin-bg, var(--a-surface-danger)), 0 0 0 4px var(--a-surface-default),
|
||||
0 0 0 6px var(--a-border-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navdsi-timeline__pin-button:hover:focus {
|
||||
box-shadow: inset 0 0 0 1px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)),
|
||||
0 0 0 3px var(--ac-timeline-pin-bg-hover, var(--a-surface-danger-hover)), 0 0 0 4px var(--a-surface-default),
|
||||
0 0 0 6px var(--a-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.navdsi-timeline__pin-wrapper::before {
|
||||
content: "";
|
||||
top: var(--navdsc-timeline-pin-size);
|
||||
@@ -255,13 +272,13 @@
|
||||
color: var(--ac-timeline-zoom-selected-text, var(--a-text-on-inverted));
|
||||
}
|
||||
|
||||
.navdsi-timeline__period:focus {
|
||||
.navdsi-timeline__period:focus-visible {
|
||||
outline: none;
|
||||
z-index: 4;
|
||||
box-shadow: 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
|
||||
.navdsi-timeline__period--selected:focus {
|
||||
.navdsi-timeline__period--selected:focus-visible {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
|
||||
0 0 0 2px var(--a-border-focus);
|
||||
z-index: 3;
|
||||
@@ -271,12 +288,36 @@
|
||||
z-index: var(--a-z-index-focus);
|
||||
}
|
||||
|
||||
.navdsi-timeline__zoom-button:focus {
|
||||
.navdsi-timeline__zoom-button:focus-visible {
|
||||
box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.navdsi-timeline__zoom li:not(:last-child) .navdsi-timeline__zoom-button:focus {
|
||||
.navdsi-timeline__zoom li:not(:last-child) .navdsi-timeline__zoom-button:focus-visible {
|
||||
margin-right: 2px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navdsi-timeline__period:focus {
|
||||
outline: none;
|
||||
z-index: 4;
|
||||
box-shadow: 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
|
||||
.navdsi-timeline__period--selected:focus {
|
||||
box-shadow: inset 0 0 0 2px var(--ac-timeline-period-selected-border, var(--a-border-action-selected)),
|
||||
0 0 0 2px var(--a-border-focus);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.navdsi-timeline__zoom-button:focus {
|
||||
box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 3px var(--a-border-focus);
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.navdsi-timeline__zoom li:not(:last-child) .navdsi-timeline__zoom-button:focus {
|
||||
margin-right: 2px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,47 @@
|
||||
# @navikt/ds-react-internal
|
||||
|
||||
## 3.1.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`e8ecf309a`](https://github.com/navikt/aksel/commit/e8ecf309a910e47fd3cea6c54cd993ab1196910f)]:
|
||||
- @navikt/ds-react@3.1.3
|
||||
- @navikt/aksel-icons@3.1.3
|
||||
|
||||
## 3.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-react@3.1.2
|
||||
- @navikt/aksel-icons@3.1.2
|
||||
|
||||
## 3.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [`14379a02c`](https://github.com/navikt/aksel/commit/14379a02c3d32091a8c33061464160d7de9f3f2e) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Timeline håndterte ikke SVG ikoner riktig
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-react@3.1.1
|
||||
- @navikt/aksel-icons@3.1.1
|
||||
|
||||
## 3.1.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`9d2cd9e7f`](https://github.com/navikt/aksel/commit/9d2cd9e7fffb3cf6310c88229ee39ea85db19bca)]:
|
||||
- @navikt/ds-react@3.1.0
|
||||
- @navikt/aksel-icons@3.1.0
|
||||
|
||||
## 3.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`fa2ead912`](https://github.com/navikt/aksel/commit/fa2ead912a4db15d1fa7e2c3efccbe69a64dc9a7), [`db3846f5c`](https://github.com/navikt/aksel/commit/db3846f5cd483ad0ca24bc5938cfcdb64260f89d)]:
|
||||
- @navikt/ds-react@3.0.1
|
||||
- @navikt/aksel-icons@3.0.1
|
||||
|
||||
## 3.0.0
|
||||
|
||||
### Major Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react-internal",
|
||||
"version": "3.0.0",
|
||||
"version": "3.1.3",
|
||||
"description": "Aksel react components for internal UIs in NAV",
|
||||
"author": "Aksel | NAV designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -36,8 +36,8 @@
|
||||
"watch": "tsc --watch -p tsconfig.esm.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/aksel-icons": "^3.0.0",
|
||||
"@navikt/ds-react": "^3.0.0",
|
||||
"@navikt/aksel-icons": "^3.1.3",
|
||||
"@navikt/ds-react": "^3.1.3",
|
||||
"clsx": "^1.1.1",
|
||||
"copy-to-clipboard": "^3.3.1"
|
||||
},
|
||||
|
||||
@@ -72,7 +72,7 @@ const ClickablePeriod = React.memo(
|
||||
initiate(index);
|
||||
}}
|
||||
>
|
||||
<div className="navdsi-timeline__period--inner">{icon}</div>
|
||||
<span className="navdsi-timeline__period--inner">{icon}</span>
|
||||
</button>
|
||||
{children && (
|
||||
<Popover
|
||||
|
||||
@@ -33,10 +33,12 @@ const NonClickablePeriod = ({
|
||||
[direction]: `${left}%`,
|
||||
}}
|
||||
>
|
||||
<div className="navdsi-timeline__period--inner">
|
||||
<span className="navdsi-timeline__period--inner">
|
||||
{icon}
|
||||
<p className="sr-only">{ariaLabel(start, end, status, statusLabel)}</p>
|
||||
</div>
|
||||
<span className="sr-only">
|
||||
{ariaLabel(start, end, status, statusLabel)}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -15,15 +15,15 @@
|
||||
"website"
|
||||
],
|
||||
"dependencies": {
|
||||
"@navikt/aksel-icons": "^3.0.0",
|
||||
"@navikt/ds-codemod": "^3.0.0",
|
||||
"@navikt/ds-css": "^3.0.0",
|
||||
"@navikt/ds-css-internal": "^3.0.0",
|
||||
"@navikt/ds-icons": "^3.0.0",
|
||||
"@navikt/ds-react": "^3.0.0",
|
||||
"@navikt/ds-react-internal": "^3.0.0",
|
||||
"@navikt/ds-tailwind": "^3.0.0",
|
||||
"@navikt/ds-tokens": "^3.0.0"
|
||||
"@navikt/aksel-icons": "^3.1.3",
|
||||
"@navikt/ds-codemod": "^3.1.3",
|
||||
"@navikt/ds-css": "^3.1.3",
|
||||
"@navikt/ds-css-internal": "^3.1.3",
|
||||
"@navikt/ds-icons": "^3.1.3",
|
||||
"@navikt/ds-react": "^3.1.3",
|
||||
"@navikt/ds-react-internal": "^3.1.3",
|
||||
"@navikt/ds-tailwind": "^3.1.3",
|
||||
"@navikt/ds-tokens": "^3.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier-plugin-tailwindcss": "^0.2.3"
|
||||
|
||||
@@ -37,22 +37,6 @@ export default withDsExample(Example, "static");
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div
|
||||
style={{
|
||||
width: "600px",
|
||||
minHeight: "100vh",
|
||||
padding: "10rem 0",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
}}
|
||||
>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
export const args = {
|
||||
|
||||
@@ -37,22 +37,6 @@ export default withDsExample(Example, "static");
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div
|
||||
style={{
|
||||
width: "600px",
|
||||
minHeight: "100vh",
|
||||
padding: "10rem 0",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
}}
|
||||
>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
export const args = {
|
||||
|
||||
@@ -56,22 +56,6 @@ export default withDsExample(Example, "static");
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div
|
||||
style={{
|
||||
width: "600px",
|
||||
minHeight: "100vh",
|
||||
padding: "10rem 0",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
}}
|
||||
>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
export const args = {
|
||||
|
||||
@@ -37,22 +37,6 @@ export default withDsExample(Example, "static");
|
||||
/* Storybook story */
|
||||
export const Demo = {
|
||||
render: Example,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div
|
||||
style={{
|
||||
width: "600px",
|
||||
minHeight: "100vh",
|
||||
padding: "10rem 0",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
}}
|
||||
>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
export const args = {
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-css": "3.0.0",
|
||||
"@navikt/ds-react": "3.0.0",
|
||||
"@navikt/ds-css": "3.1.3",
|
||||
"@navikt/ds-react": "3.1.3",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
|
||||
@@ -3885,7 +3885,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@navikt/aksel-icons@^2.9.8, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
|
||||
"@navikt/aksel-icons@^3.0.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
|
||||
dependencies:
|
||||
@@ -3912,7 +3912,7 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/aksel@workspace:@navikt/aksel"
|
||||
dependencies:
|
||||
"@navikt/ds-css": 2.9.8
|
||||
"@navikt/ds-css": 3.0.1
|
||||
"@types/inquirer": ^9.0.3
|
||||
"@types/jest": ^29.0.0
|
||||
axios: 1.3.6
|
||||
@@ -3936,7 +3936,7 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-codemod@^2.9.8, @navikt/ds-codemod@workspace:@navikt/codemod":
|
||||
"@navikt/ds-codemod@^3.0.1, @navikt/ds-codemod@workspace:@navikt/codemod":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-codemod@workspace:@navikt/codemod"
|
||||
dependencies:
|
||||
@@ -3963,7 +3963,7 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-css-internal@^2.9.8, @navikt/ds-css-internal@workspace:@navikt/internal/css":
|
||||
"@navikt/ds-css-internal@^3.0.1, @navikt/ds-css-internal@workspace:@navikt/internal/css":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-css-internal@workspace:@navikt/internal/css"
|
||||
dependencies:
|
||||
@@ -3974,11 +3974,11 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-css@2.9.8, @navikt/ds-css@^2.9.8, @navikt/ds-css@workspace:@navikt/core/css":
|
||||
"@navikt/ds-css@3.0.1, @navikt/ds-css@^3.0.1, @navikt/ds-css@workspace:@navikt/core/css":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-css@workspace:@navikt/core/css"
|
||||
dependencies:
|
||||
"@navikt/ds-tokens": ^2.9.8
|
||||
"@navikt/ds-tokens": ^3.0.1
|
||||
cssnano: 6.0.0
|
||||
fast-glob: 3.2.11
|
||||
lodash: 4.17.21
|
||||
@@ -3991,7 +3991,7 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-icons@^2.9.8, @navikt/ds-icons@workspace:@navikt/icons":
|
||||
"@navikt/ds-icons@^3.0.1, @navikt/ds-icons@workspace:@navikt/icons":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-icons@workspace:@navikt/icons"
|
||||
dependencies:
|
||||
@@ -4027,8 +4027,8 @@ __metadata:
|
||||
"@babel/preset-env": 7.19.4
|
||||
"@babel/preset-react": 7.18.6
|
||||
"@babel/preset-typescript": 7.18.6
|
||||
"@navikt/ds-icons": ^2.9.8
|
||||
"@navikt/ds-react": ^2.9.8
|
||||
"@navikt/ds-icons": ^3.0.1
|
||||
"@navikt/ds-react": ^3.0.1
|
||||
"@rollup/plugin-babel": 6.0.2
|
||||
"@rollup/plugin-commonjs": 23.0.2
|
||||
"@rollup/plugin-node-resolve": ^15.0.1
|
||||
@@ -4053,12 +4053,12 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-react-internal@^2.9.8, @navikt/ds-react-internal@workspace:@navikt/internal/react":
|
||||
"@navikt/ds-react-internal@^3.0.1, @navikt/ds-react-internal@workspace:@navikt/internal/react":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-react-internal@workspace:@navikt/internal/react"
|
||||
dependencies:
|
||||
"@navikt/aksel-icons": ^2.9.8
|
||||
"@navikt/ds-react": ^2.9.8
|
||||
"@navikt/aksel-icons": ^3.0.1
|
||||
"@navikt/ds-react": ^3.0.1
|
||||
clsx: ^1.1.1
|
||||
concurrently: 7.2.1
|
||||
copy-to-clipboard: ^3.3.1
|
||||
@@ -4074,13 +4074,12 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-react@2.9.8, @navikt/ds-react@^2.9.8, @navikt/ds-react@workspace:@navikt/core/react":
|
||||
"@navikt/ds-react@3.0.1, @navikt/ds-react@^3.0.1, @navikt/ds-react@workspace:@navikt/core/react":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-react@workspace:@navikt/core/react"
|
||||
dependencies:
|
||||
"@floating-ui/react": 0.17.0
|
||||
"@navikt/aksel-icons": ^2.9.8
|
||||
"@navikt/ds-icons": ^2.9.8
|
||||
"@navikt/aksel-icons": ^3.0.1
|
||||
"@radix-ui/react-tabs": 1.0.0
|
||||
"@radix-ui/react-toggle-group": 1.0.0
|
||||
"@testing-library/dom": 8.13.0
|
||||
@@ -4116,11 +4115,11 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-tailwind@^2.9.8, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
|
||||
"@navikt/ds-tailwind@^3.0.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
|
||||
dependencies:
|
||||
"@navikt/ds-tokens": ^2.9.8
|
||||
"@navikt/ds-tokens": ^3.0.1
|
||||
"@types/jest": ^29.0.0
|
||||
color: 4.2.3
|
||||
jest: ^29.0.0
|
||||
@@ -4131,7 +4130,7 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-tokens@^2.9.8, @navikt/ds-tokens@workspace:@navikt/core/tokens":
|
||||
"@navikt/ds-tokens@^3.0.1, @navikt/ds-tokens@workspace:@navikt/core/tokens":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
|
||||
dependencies:
|
||||
@@ -8094,15 +8093,15 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "aksel.nav.no@workspace:aksel.nav.no"
|
||||
dependencies:
|
||||
"@navikt/aksel-icons": ^2.9.8
|
||||
"@navikt/ds-codemod": ^2.9.8
|
||||
"@navikt/ds-css": ^2.9.8
|
||||
"@navikt/ds-css-internal": ^2.9.8
|
||||
"@navikt/ds-icons": ^2.9.8
|
||||
"@navikt/ds-react": ^2.9.8
|
||||
"@navikt/ds-react-internal": ^2.9.8
|
||||
"@navikt/ds-tailwind": ^2.9.8
|
||||
"@navikt/ds-tokens": ^2.9.8
|
||||
"@navikt/aksel-icons": ^3.0.1
|
||||
"@navikt/ds-codemod": ^3.0.1
|
||||
"@navikt/ds-css": ^3.0.1
|
||||
"@navikt/ds-css-internal": ^3.0.1
|
||||
"@navikt/ds-icons": ^3.0.1
|
||||
"@navikt/ds-react": ^3.0.1
|
||||
"@navikt/ds-react-internal": ^3.0.1
|
||||
"@navikt/ds-tailwind": ^3.0.1
|
||||
"@navikt/ds-tokens": ^3.0.1
|
||||
prettier-plugin-tailwindcss: ^0.2.3
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
@@ -23124,8 +23123,8 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "shadow-dom@workspace:examples/shadow-dom"
|
||||
dependencies:
|
||||
"@navikt/ds-css": 2.9.8
|
||||
"@navikt/ds-react": 2.9.8
|
||||
"@navikt/ds-css": 3.0.1
|
||||
"@navikt/ds-react": 3.0.1
|
||||
"@types/react": ^18.0.0
|
||||
"@types/react-dom": ^18.0.0
|
||||
"@vitejs/plugin-react": ^2.1.0
|
||||
|
||||
Reference in new issue
Block a user