@jirawatpyk/aura-react 4.16.0 → 4.17.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.
package/dist/styles.css CHANGED
@@ -247,6 +247,7 @@ a.aura-btn { text-decoration: none; }
247
247
  .aura-table__pager > span { margin-right: var(--aura-space-2); }
248
248
 
249
249
  /* Icon button — 32px round, icon in the text colour */
250
+ a.aura-icon-btn { text-decoration: none; }
250
251
  .aura-icon-btn {
251
252
  width: var(--aura-control-sm); height: var(--aura-control-sm); flex: none;
252
253
  display: inline-flex; align-items: center; justify-content: center;
@@ -1147,10 +1148,23 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1147
1148
 
1148
1149
  /* Touch screens: bigger targets for days and options. */
1149
1150
  @media (pointer: coarse) {
1150
- .aura-cal { --aura-cal-cell: 40px; }
1151
+ .aura-cal { --aura-cal-cell: var(--aura-touch-target); }
1151
1152
  .aura-combo__option { min-height: 44px; }
1152
- .aura-segmented__option, .aura-segmented--sm .aura-segmented__option { height: 40px; }
1153
+ .aura-segmented__option, .aura-segmented--sm .aura-segmented__option { height: var(--aura-touch-target); }
1153
1154
  .aura-number__step { width: 44px; }
1155
+ /* 4.17: the rest of the controls under 44px on touch screens. */
1156
+ .aura-menu__item { height: var(--aura-touch-target); }
1157
+ .aura-page { min-width: var(--aura-touch-target); height: var(--aura-touch-target); }
1158
+ /* Side by side, each 44px wide (40px tall inside the 44px field), so their targets never overlap. */
1159
+ .aura-combo__clear, .aura-combo__toggle, .aura-date__toggle { width: var(--aura-touch-target); height: 40px; }
1160
+ .aura-combo__toggle, .aura-date__toggle { right: 0; }
1161
+ .aura-combo__clear, .aura-date .aura-combo__clear { right: var(--aura-touch-target); }
1162
+ .aura-combo .aura-input__control, .aura-date .aura-input__control { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
1163
+ .aura-combo__clear::after, .aura-combo__toggle::after, .aura-date__toggle::after, .aura-tag__remove::after {
1164
+ content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, var(--aura-touch-target)); height: max(100%, var(--aura-touch-target)); transform: translate(-50%, -50%);
1165
+ }
1166
+ .aura-tag__remove { position: relative; }
1167
+ .aura-combo.is-multi .aura-combo__clear, .aura-combo.is-multi .aura-combo__toggle { top: calc((var(--aura-input-height) - 2px - 40px) / 2); }
1154
1168
  }
1155
1169
 
1156
1170
  /* ---------- Small screens (< 640px) ---------- */
@@ -1160,7 +1174,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1160
1174
  .aura-stepper--horizontal .aura-stepper__item:not(:last-child)::after { right: 8px; }
1161
1175
  .aura-stepper--horizontal .aura-stepper__compact { display: block; }
1162
1176
  .aura-dialog-layer:not(.aura-drawer-layer) { align-items: flex-end; padding: 0; }
1163
- .aura-dialog { max-width: none !important; max-height: 92vh; border-radius: var(--aura-radius-2xl) var(--aura-radius-2xl) 0 0; border-bottom: 0;
1177
+ .aura-dialog { max-width: none !important; max-height: 92vh; max-height: 92dvh; border-radius: var(--aura-radius-2xl) var(--aura-radius-2xl) 0 0; border-bottom: 0;
1164
1178
  padding-bottom: calc(var(--aura-space-6) + env(safe-area-inset-bottom)); animation-name: aura-sheet-in; }
1165
1179
  .aura-dialog__foot { flex-direction: column-reverse; }
1166
1180
  .aura-dialog__foot > * { width: 100%; }
@@ -1275,6 +1289,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1275
1289
  flex: none; padding: 2px 6px; border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-xs);
1276
1290
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--aura-fg-secondary); background: var(--aura-bg-canvas);
1277
1291
  }
1292
+ .aura-command__loading { display: flex; align-items: center; gap: var(--aura-space-2); padding: var(--aura-space-2) var(--aura-space-3); font-size: 13px; color: var(--aura-fg-secondary); }
1278
1293
  .aura-command__empty { margin: 0; padding: var(--aura-space-6) var(--aura-space-2); text-align: center; font-size: 14px; color: var(--aura-fg-secondary); }
1279
1294
  .aura-command__foot { display: flex; justify-content: space-between; gap: var(--aura-space-3); padding: var(--aura-space-2) var(--aura-space-4); border-top: 1px solid var(--aura-border-default); font-size: 12px; color: var(--aura-fg-secondary); }
1280
1295
  @media (max-width: 639.98px) {