@db-ux/core-components 2.1.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/build/components/custom-select-list-item/custom-select-list-item.css +3 -3
  2. package/build/components/input/input.css +36 -17
  3. package/build/components/input/input.scss +31 -8
  4. package/build/components/tab-item/tab-item.css +3 -3
  5. package/build/styles/absolute.css +1 -1
  6. package/build/styles/index.css +1 -1
  7. package/build/styles/relative.css +1 -1
  8. package/build/styles/rollup.css +1 -1
  9. package/build/styles/webpack.css +1 -1
  10. package/package.json +2 -2
package/build/components/custom-select-list-item/custom-select-list-item.css CHANGED
@@ -64,14 +64,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
64
64
  outline-offset: var(--db-border-width-xs);
65
65
  box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
66
66
  }
67
- .db-custom-select-list-item:not([data-disable-focus=true]):not([type=radio], [role=switch]):has(> label > input:focus-within) {
68
- border-radius: var(--db-border-radius-xs);
69
- }
70
67
  @media screen and (prefers-reduced-motion: no-preference) {
71
68
  .db-custom-select-list-item:not([data-disable-focus=true]):has(> label > input:focus-within) {
72
69
  transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
73
70
  }
74
71
  }
72
+ .db-custom-select-list-item:not([data-disable-focus=true]):not([type=radio], [role=switch]):has(> label > input:focus-within) {
73
+ border-radius: var(--db-border-radius-xs);
74
+ }
75
75
 
76
76
  /**
77
77
  Generates 3 types of placeholders, e.g:
package/build/components/input/input.css CHANGED
@@ -445,12 +445,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
445
445
 
446
446
  @layer variables {}
447
447
 
448
- .db-input, .db-input[data-variant=floating] [id$=-placeholder], .db-input[data-variant=floating] input, .db-input:has(input[type=file]) input, .db-input input::file-selector-button {
448
+ .db-input, .db-input[data-variant=floating] [id$=-placeholder], .db-input[data-variant=floating] input, .db-input:has(input[type=file]) input, .db-input input::-webkit-calendar-picker-indicator, .db-input input::-webkit-search-cancel-button, .db-input input::file-selector-button {
449
449
  font: var(--db-type-body-sm);
450
450
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
451
451
  }
452
452
  @layer variables {
453
- .db-input, .db-input[data-variant=floating] [id$=-placeholder], .db-input[data-variant=floating] input, .db-input:has(input[type=file]) input, .db-input input::file-selector-button {
453
+ .db-input, .db-input[data-variant=floating] [id$=-placeholder], .db-input[data-variant=floating] input, .db-input:has(input[type=file]) input, .db-input input::-webkit-calendar-picker-indicator, .db-input input::-webkit-search-cancel-button, .db-input input::file-selector-button {
454
454
  /* Those variables are only for components to calculate heights and change icons */
455
455
  --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
456
456
  --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
@@ -863,24 +863,26 @@ input[type=time]) {
863
863
  input:focus-visible)::after {
864
864
  opacity: 1;
865
865
  }
866
- .db-input:has(input[type=date]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=week]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=datetime-local]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=month]):not([data-hide-icon-after=true])::after {
867
- --db-icon-after: "calendar";
868
- margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
869
- content: var(--db-icon-after, attr(data-icon-after));
870
- }
871
- @supports (content: ""/"") {
866
+ @supports selector(::-webkit-calendar-picker-indicator) {
872
867
  .db-input:has(input[type=date]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=week]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=datetime-local]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=month]):not([data-hide-icon-after=true])::after {
873
- content: var(--db-icon-after, attr(data-icon-after))/"";
868
+ --db-icon-after: "calendar";
869
+ margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
870
+ content: var(--db-icon-after, attr(data-icon-after));
871
+ }
872
+ @supports (content: ""/"") {
873
+ .db-input:has(input[type=date]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=week]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=datetime-local]):not([data-hide-icon-after=true])::after, .db-input:has(input[type=month]):not([data-hide-icon-after=true])::after {
874
+ content: var(--db-icon-after, attr(data-icon-after))/"";
875
+ }
874
876
  }
875
- }
876
- .db-input:has(input[type=time]):not([data-hide-icon-after=true])::after {
877
- --db-icon-after: "clock";
878
- margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
879
- content: var(--db-icon-after, attr(data-icon-after));
880
- }
881
- @supports (content: ""/"") {
882
877
  .db-input:has(input[type=time]):not([data-hide-icon-after=true])::after {
883
- content: var(--db-icon-after, attr(data-icon-after))/"";
878
+ --db-icon-after: "clock";
879
+ margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
880
+ content: var(--db-icon-after, attr(data-icon-after));
881
+ }
882
+ @supports (content: ""/"") {
883
+ .db-input:has(input[type=time]):not([data-hide-icon-after=true])::after {
884
+ content: var(--db-icon-after, attr(data-icon-after))/"";
885
+ }
884
886
  }
885
887
  }
886
888
  .db-input:has(input[type=file]) input {
@@ -894,6 +896,10 @@ input:focus-visible)::after {
894
896
  padding: 0 var(--db-spacing-fixed-xs);
895
897
  margin-inline-end: var(--db-spacing-fixed-xs);
896
898
  }
899
+ .db-input[data-variant=floating] input::-webkit-calendar-picker-indicator, .db-input[data-variant=floating] input::-webkit-search-cancel-button {
900
+ /* stylelint-disable-next-line db-ux/use-spacings */
901
+ margin-block-end: var(--db-base-body-icon-font-size-2xs);
902
+ }
897
903
  .db-input input {
898
904
  position: relative;
899
905
  }
@@ -903,6 +909,19 @@ input:focus-visible)::after {
903
909
  block-size: var(--db-icon-font-size, 1.5rem);
904
910
  padding: 0;
905
911
  cursor: pointer;
912
+ /* stylelint-disable-next-line db-ux/use-spacings */
913
+ margin-block-start: var(--db-border-width-3xs);
914
+ border-radius: var(--db-border-radius-xs);
915
+ }
916
+ .db-input input::-webkit-calendar-picker-indicator:focus-visible, .db-input input::-webkit-search-cancel-button:focus-visible {
917
+ outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
918
+ outline-offset: var(--db-border-width-xs);
919
+ box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
920
+ }
921
+ @media screen and (prefers-reduced-motion: no-preference) {
922
+ .db-input input::-webkit-calendar-picker-indicator:focus-visible, .db-input input::-webkit-search-cancel-button:focus-visible {
923
+ transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
924
+ }
906
925
  }
907
926
  .db-input input::-webkit-search-cancel-button {
908
927
  appearance: none;
package/build/components/input/input.scss CHANGED
@@ -67,15 +67,19 @@ $icon-padding: calc(
67
67
  }
68
68
  }
69
69
 
70
- &:has(input[type="date"]),
71
- &:has(input[type="week"]),
72
- &:has(input[type="datetime-local"]),
73
- &:has(input[type="month"]) {
74
- @include icons.set-icon("calendar", "after");
75
- }
70
+ // This @supports should exclude Mozilla Firefox
71
+ // TODO: Reevaluate after Mozilla is supporting week and month input types
72
+ @supports selector(::-webkit-calendar-picker-indicator) {
73
+ &:has(input[type="date"]),
74
+ &:has(input[type="week"]),
75
+ &:has(input[type="datetime-local"]),
76
+ &:has(input[type="month"]) {
77
+ @include icons.set-icon("calendar", "after");
78
+ }
76
79
 
77
- &:has(input[type="time"]) {
78
- @include icons.set-icon("clock", "after");
80
+ &:has(input[type="time"]) {
81
+ @include icons.set-icon("clock", "after");
82
+ }
79
83
  }
80
84
 
81
85
  &:has(input[type="file"]) {
@@ -105,16 +109,35 @@ $icon-padding: calc(
105
109
  }
106
110
  }
107
111
 
112
+ &[data-variant="floating"] {
113
+ input {
114
+ &::-webkit-calendar-picker-indicator,
115
+ &::-webkit-search-cancel-button {
116
+ /* stylelint-disable-next-line db-ux/use-spacings */
117
+ margin-block-end: var(--db-base-body-icon-font-size-2xs);
118
+ }
119
+ }
120
+ }
121
+
108
122
  input {
109
123
  position: relative;
110
124
 
111
125
  &::-webkit-calendar-picker-indicator,
112
126
  &::-webkit-search-cancel-button {
127
+ @extend %db-overwrite-font-size-sm;
128
+
113
129
  background-image: none;
114
130
  inline-size: icons.$default-icon-font-size;
115
131
  block-size: icons.$default-icon-font-size;
116
132
  padding: 0;
117
133
  cursor: pointer;
134
+ /* stylelint-disable-next-line db-ux/use-spacings */
135
+ margin-block-start: variables.$db-border-width-3xs;
136
+ border-radius: variables.$db-border-radius-xs;
137
+
138
+ &:focus-visible {
139
+ @include helpers.get-focus-placeholder;
140
+ }
118
141
  }
119
142
 
120
143
  &::-webkit-search-cancel-button {
package/build/components/tab-item/tab-item.css CHANGED
@@ -64,14 +64,14 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
64
64
  outline-offset: var(--db-border-width-xs);
65
65
  box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
66
66
  }
67
- .db-tab-item input:not([data-disable-focus=true]):not([type=radio], [role=switch]):focus-visible::before {
68
- border-radius: var(--db-border-radius-xs);
69
- }
70
67
  @media screen and (prefers-reduced-motion: no-preference) {
71
68
  .db-tab-item input:not([data-disable-focus=true]):focus-visible::before {
72
69
  transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
73
70
  }
74
71
  }
72
+ .db-tab-item input:not([data-disable-focus=true]):not([type=radio], [role=switch]):focus-visible::before {
73
+ border-radius: var(--db-border-radius-xs);
74
+ }
75
75
 
76
76
  /**
77
77
  * @mixin screen-min-max