@norges-domstoler/dds-components 0.0.0-dev-20240614081021 → 0.0.0-dev-20240618064403

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.css +107 -42
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +6 -1
  4. package/dist/index.d.ts +6 -1
  5. package/dist/index.js +466 -344
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +384 -264
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +3 -3
package/dist/index.css CHANGED
@@ -592,7 +592,7 @@
592
592
  .Input_input-group {
593
593
  position: relative;
594
594
  }
595
- .Input_input {
595
+ :where(.Input_input) {
596
596
  position: relative;
597
597
  color: var(--dds-text-color--default);
598
598
  border: 1px solid var(--dds-color-border-default);
@@ -620,49 +620,48 @@
620
620
  &[type=datetime-local] {
621
621
  -webkit-appearance: none;
622
622
  }
623
- &:hover:enabled:-moz-read-write:not(:focus-visible) {
623
+ &:hover:enabled:-moz-read-write:not(:focus-visible):not(.Input_disabled):not(.Input_read-only) {
624
624
  border-color: var(--dds-color-border-action-hover);
625
625
  box-shadow: 0 0 0 1px var(--dds-color-border-action-hover);
626
626
  }
627
- &:not(input):not(textarea):not(.Input_disabled):not(.Input_read-only):not(.Input_active):hover,
628
- &:hover:enabled:read-write:not(:focus-visible) {
627
+ &:hover:enabled:read-write:not(:focus-visible):not(.Input_disabled):not(.Input_read-only) {
629
628
  border-color: var(--dds-color-border-action-hover);
630
629
  box-shadow: 0 0 0 1px var(--dds-color-border-action-hover);
631
630
  }
632
- &.Input_input--stateful {
633
- -webkit-appearance: textfield;
634
- &:enabled:-moz-read-only {
635
- box-shadow: none;
636
- border: none;
637
- outline: none;
638
- cursor: default;
639
- background-color: transparent;
640
- padding-left: 0;
641
- padding-top: var(--dds-spacing-x0-125);
642
- }
643
- &:not(.Input_disabled).Input_read-only,
644
- &:enabled:read-only {
645
- box-shadow: none;
646
- border: none;
647
- outline: none;
648
- cursor: default;
649
- background-color: transparent;
650
- padding-left: 0;
651
- padding-top: var(--dds-spacing-x0-125);
652
- }
653
- &.Input_disabled,
654
- &:disabled {
655
- cursor: not-allowed;
656
- color: var(--dds-color-text-medium);
657
- background-color: var(--dds-color-surface-field-disabled);
658
- }
631
+ }
632
+ :where(.Input_input--stateful) {
633
+ -webkit-appearance: textfield;
634
+ &:enabled:-moz-read-only {
635
+ box-shadow: none;
636
+ border: none;
637
+ outline: none;
638
+ cursor: default;
639
+ background-color: transparent;
640
+ padding-left: 0;
641
+ padding-top: var(--dds-spacing-x0-125);
642
+ }
643
+ &:not(.Input_disabled).Input_read-only,
644
+ &:enabled:read-only {
645
+ box-shadow: none;
646
+ border: none;
647
+ outline: none;
648
+ cursor: default;
649
+ background-color: transparent;
650
+ padding-left: 0;
651
+ padding-top: var(--dds-spacing-x0-125);
652
+ }
653
+ &.Input_disabled,
654
+ &:disabled {
655
+ cursor: not-allowed;
656
+ color: var(--dds-color-text-medium);
657
+ background-color: var(--dds-color-surface-field-disabled);
659
658
  }
660
659
  }
661
- .Input_input--hover:hover {
660
+ :where(.Input_input--hover:hover) {
662
661
  border-color: var(--dds-color-border-action-hover);
663
662
  box-shadow: 0 0 0 1px var(--dds-color-border-action-hover);
664
663
  }
665
- .Input_input--stateful-danger {
664
+ :where(.Input_input--stateful-danger) {
666
665
  border-color: var(--dds-color-border-danger);
667
666
  box-shadow: 0 0 0 1px var(--dds-color-border-danger);
668
667
  &:hover:enabled:-moz-read-write:not(:focus-within) {
@@ -686,22 +685,22 @@
686
685
  border-color: 1px solid var(--dds-color-border-default);
687
686
  }
688
687
  }
689
- .Input_input--medium {
688
+ :where(.Input_input--medium) {
690
689
  padding: var(--dds-spacing-x0-75);
691
690
  }
692
- .Input_input--small {
691
+ :where(.Input_input--small) {
693
692
  padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
694
693
  }
695
- .Input_input--tiny {
694
+ :where(.Input_input--tiny) {
696
695
  padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
697
696
  }
698
- .Input_input--with-affix {
697
+ :where(.Input_input--with-affix) {
699
698
  gap: var(--dds-spacing-x1);
700
699
  }
701
- .Input_label {
700
+ :where(.Input_label) {
702
701
  display: block;
703
702
  }
704
- .Input_char-counter {
703
+ :where(.Input_char-counter) {
705
704
  margin-left: auto;
706
705
  }
707
706
 
@@ -1049,6 +1048,7 @@
1049
1048
  overflow-y: auto;
1050
1049
  min-width: 180px;
1051
1050
  max-width: 300px;
1051
+ box-shadow: var(--dds-shadow-1-onlight);
1052
1052
  .OverflowMenu_divider {
1053
1053
  margin-block: var(--dds-spacing-x0-75);
1054
1054
  }
@@ -1281,13 +1281,13 @@
1281
1281
  width: var(--dds-date-input-width);
1282
1282
  }
1283
1283
  .DateInput_date-input--medium {
1284
- padding-inline: var(--dds-spacing-x0-5) !important;
1284
+ padding-inline: var(--dds-spacing-x0-5);
1285
1285
  }
1286
1286
  .DateInput_date-input--small {
1287
- padding-inline: var(--dds-spacing-x0-5) !important;
1287
+ padding-inline: var(--dds-spacing-x0-5);
1288
1288
  }
1289
1289
  .DateInput_date-input--tiny {
1290
- padding-inline: var(--dds-spacing-x0-25) !important;
1290
+ padding-inline: var(--dds-spacing-x0-25);
1291
1291
  }
1292
1292
  .DateInput_date-segment-container {
1293
1293
  display: flex;
@@ -2364,6 +2364,71 @@
2364
2364
  }
2365
2365
  }
2366
2366
 
2367
+ /* src/components/Select/NativeSelect/NativeSelect.module.css */
2368
+ .NativeSelect_container {
2369
+ position: relative;
2370
+ width: -moz-fit-content;
2371
+ width: fit-content;
2372
+ }
2373
+ .NativeSelect_select {
2374
+ -webkit-appearance: none;
2375
+ -moz-appearance: none;
2376
+ appearance: none;
2377
+ width: var(--dds-native-select-width);
2378
+ text-overflow: ellipsis;
2379
+ &:hover:not(:disabled):not(.NativeSelect_select--readonly) {
2380
+ border-color: var(--dds-color-border-action-hover);
2381
+ box-shadow: 0 0 0 1px var(--dds-color-border-action-hover);
2382
+ & + svg {
2383
+ color: var(--dds-color-icon-action-hover);
2384
+ }
2385
+ }
2386
+ &:disabled {
2387
+ cursor: not-allowed;
2388
+ color: var(--dds-color-text-medium);
2389
+ background-color: var(--dds-color-surface-field-disabled);
2390
+ }
2391
+ option {
2392
+ background-color: var(--dds-color-surface-default);
2393
+ &:hover {
2394
+ background-color: var(--dds-color-surface-hover-default);
2395
+ }
2396
+ }
2397
+ optgroup {
2398
+ font-weight: normal;
2399
+ font-style: normal;
2400
+ }
2401
+ }
2402
+ .NativeSelect_select--readonly {
2403
+ box-shadow: none;
2404
+ pointer-events: none;
2405
+ border: none;
2406
+ outline: none;
2407
+ cursor: default;
2408
+ background-color: transparent;
2409
+ padding-left: 0;
2410
+ padding-top: var(--dds-spacing-x0-125);
2411
+ }
2412
+ .NativeSelect_select--medium {
2413
+ height: calc(1.5em + var(--dds-spacing-x0-75) + var(--dds-spacing-x0-75) + 2px);
2414
+ padding-right: var(--dds-spacing-x2);
2415
+ }
2416
+ .NativeSelect_select--small {
2417
+ height: calc(1.5em + var(--dds-spacing-x0-5) + var(--dds-spacing-x0-5) + 2px);
2418
+ padding-right: var(--dds-spacing-x2);
2419
+ }
2420
+ .NativeSelect_select--tiny {
2421
+ height: calc(1.5em + var(--dds-spacing-x0-25) + var(--dds-spacing-x0-25) + 2px);
2422
+ padding-right: var(--dds-spacing-x1);
2423
+ }
2424
+ .NativeSelect_icon {
2425
+ position: absolute;
2426
+ top: 50%;
2427
+ transform: translate(-150%, -50%);
2428
+ align-self: center;
2429
+ pointer-events: none;
2430
+ }
2431
+
2367
2432
  /* src/components/Popover/Popover.module.css */
2368
2433
  .Popover_container {
2369
2434
  position: absolute;