@oslokommune/punkt-css 16.13.2 → 16.14.0

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 (28) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/dist/css/components/combobox.css +4 -0
  3. package/dist/css/components/combobox.min.css +1 -1
  4. package/dist/css/components/searchinput.css +3 -0
  5. package/dist/css/components/searchinput.min.css +1 -1
  6. package/dist/css/components/textinput.css +16 -6
  7. package/dist/css/components/textinput.min.css +1 -1
  8. package/dist/css/elements/checkbox-radio.css +3 -3
  9. package/dist/css/elements/checkbox-radio.min.css +1 -1
  10. package/dist/css/elements/input.css +16 -6
  11. package/dist/css/elements/input.min.css +1 -1
  12. package/dist/css/elements/select.css +19 -7
  13. package/dist/css/elements/select.min.css +1 -1
  14. package/dist/css/pkt-base.css +1 -1
  15. package/dist/css/pkt-base.min.css +1 -1
  16. package/dist/css/pkt-components.css +23 -6
  17. package/dist/css/pkt-components.min.css +1 -1
  18. package/dist/css/pkt-docs.css +30 -11
  19. package/dist/css/pkt-docs.min.css +1 -1
  20. package/dist/css/pkt-elements.css +22 -10
  21. package/dist/css/pkt-elements.min.css +1 -1
  22. package/dist/css/pkt.css +30 -11
  23. package/dist/css/pkt.min.css +1 -1
  24. package/dist/scss/abstracts/variables/_index.scss +1 -1
  25. package/dist/scss/components/_combobox.scss +4 -0
  26. package/dist/scss/components/_searchinput.scss +3 -1
  27. package/dist/scss/elements/_input.scss +19 -7
  28. package/package.json +2 -2
package/dist/css/pkt-components.css CHANGED
@@ -1142,6 +1142,10 @@ pkt-combobox[fullwidth], pkt-combobox--fullwidth,
1142
1142
  margin-top: 0.5rem;
1143
1143
  }
1144
1144
 
1145
+ .pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within {
1146
+ outline: 4px solid var(--pkt-color-border-states-focus);
1147
+ }
1148
+
1145
1149
  .pkt-datepicker,
1146
1150
  pkt-datepicker {
1147
1151
  display: block;
@@ -4790,6 +4794,9 @@ pkt-messagebox {
4790
4794
  .pkt-searchinput--local .pkt-searchinput__button svg {
4791
4795
  margin-left: 0;
4792
4796
  }
4797
+ .pkt-searchinput--local .pkt-searchinput__button {
4798
+ --pkt-color-button-border-hover: var(--pkt-color-input-border-active);
4799
+ }
4793
4800
  .pkt-searchinput__suggestions {
4794
4801
  position: absolute;
4795
4802
  z-index: 2;
@@ -5564,7 +5571,7 @@ pkt-select {
5564
5571
  padding-right: 3rem;
5565
5572
  }
5566
5573
  .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]) {
5567
- --svg: url(https://punkt-cdn.oslo.kommune.no/16.13/icons/chevron-thin-down.svg);
5574
+ --svg: url(https://punkt-cdn.oslo.kommune.no/16.14/icons/chevron-thin-down.svg);
5568
5575
  background-image: var(--svg);
5569
5576
  background-repeat: no-repeat;
5570
5577
  background-position: right 0.7rem top 50%;
@@ -5582,15 +5589,19 @@ pkt-select {
5582
5589
  .pkt-input:hover, .pkt-textinput__input:hover, .pkt-input.pkt-input--hover, .pkt-input--hover.pkt-textinput__input {
5583
5590
  border-color: var(--pkt-color-input-border-hover);
5584
5591
  }
5585
- .pkt-input:focus-visible, .pkt-textinput__input:focus-visible, .pkt-input.pkt-input__textinput--focus, .pkt-input__textinput--focus.pkt-textinput__input {
5586
- box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
5587
- border-color: var(--pkt-color-input-border-active);
5588
- }
5589
5592
  .pkt-input:focus, .pkt-textinput__input:focus {
5590
5593
  outline: none;
5591
- box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
5592
5594
  border-color: var(--pkt-color-input-border-active);
5593
5595
  }
5596
+ .pkt-input:focus-visible, .pkt-textinput__input:focus-visible, .pkt-input.pkt-input__textinput--focus, .pkt-input__textinput--focus.pkt-textinput__input {
5597
+ outline: 2px solid var(--pkt-color-input-border-active);
5598
+ outline-offset: 0;
5599
+ border-color: var(--pkt-color-input-border-active);
5600
+ }
5601
+ :is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-input:focus-visible, :is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-textinput__input:focus-visible {
5602
+ outline: 4px solid var(--pkt-color-border-states-focus);
5603
+ outline-offset: 0;
5604
+ }
5594
5605
  .pkt-input:disabled, .pkt-textinput__input:disabled, .pkt-input:disabled::placeholder, .pkt-textinput__input:disabled::placeholder, .pkt-input[readonly]:not(.ios-readonly-hack), [readonly].pkt-textinput__input:not(.ios-readonly-hack) {
5595
5606
  opacity: 1;
5596
5607
  background-color: var(--pkt-color-surface-default-gray);
@@ -5702,6 +5713,12 @@ pkt-select {
5702
5713
  .pkt-input__container:focus-within .pkt-input-icon {
5703
5714
  border-color: var(--pkt-color-input-border-active);
5704
5715
  }
5716
+ :is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within {
5717
+ outline: 4px solid var(--pkt-color-border-states-focus);
5718
+ }
5719
+ :is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-input:focus-visible, :is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-textinput__input:focus-visible {
5720
+ outline: none;
5721
+ }
5705
5722
  .pkt-input__counter {
5706
5723
  letter-spacing: -0.2px;
5707
5724
  font-weight: 300;