@norges-domstoler/dds-components 0.0.0-dev-20240618061336 → 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 +106 -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
 
@@ -1282,13 +1281,13 @@
1282
1281
  width: var(--dds-date-input-width);
1283
1282
  }
1284
1283
  .DateInput_date-input--medium {
1285
- padding-inline: var(--dds-spacing-x0-5) !important;
1284
+ padding-inline: var(--dds-spacing-x0-5);
1286
1285
  }
1287
1286
  .DateInput_date-input--small {
1288
- padding-inline: var(--dds-spacing-x0-5) !important;
1287
+ padding-inline: var(--dds-spacing-x0-5);
1289
1288
  }
1290
1289
  .DateInput_date-input--tiny {
1291
- padding-inline: var(--dds-spacing-x0-25) !important;
1290
+ padding-inline: var(--dds-spacing-x0-25);
1292
1291
  }
1293
1292
  .DateInput_date-segment-container {
1294
1293
  display: flex;
@@ -2365,6 +2364,71 @@
2365
2364
  }
2366
2365
  }
2367
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
+
2368
2432
  /* src/components/Popover/Popover.module.css */
2369
2433
  .Popover_container {
2370
2434
  position: absolute;