@jirawatpyk/aura-react 4.15.0 → 4.17.0

package/dist/styles.css

@@ -49,6 +49,16 @@ a.aura-btn { text-decoration: none; }
 .aura-btn--secondary { border: 1px solid var(--aura-button-secondary-border); color: var(--aura-fg-primary); }
 .aura-btn--secondary:hover { background: var(--aura-bg-surface-hover); }
 /* Destructive: filled for the confirm step, outline beside other actions. Loading keeps the colour (busy, not unavailable). */
+.aura-btn--ghost { color: var(--aura-fg-primary); }
+.aura-btn--ghost:hover { background: var(--aura-bg-surface-hover); }
+/* size="sm" (4.16): 32px for toolbars, table rows and card footers. On touch the pill stays 32px and a transparent
+ * ::after grows the hit area to 44px, as IconButton does. */
+.aura-btn--sm { height: var(--aura-button-height-sm); padding: 0 var(--aura-space-3); gap: 6px; }
+.aura-btn--sm.aura-btn--full { height: auto; min-height: var(--aura-button-height-sm); padding-block: var(--aura-space-1); }
+@media (pointer: coarse) {
+  .aura-btn--sm { position: relative; }
+  .aura-btn--sm::after { 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%); }
+}
 .aura-btn--danger { background: var(--aura-button-danger-bg); color: var(--aura-button-danger-fg); }
 .aura-btn--danger:hover { background: var(--aura-button-danger-bg-hover); }
 .aura-btn--danger-secondary { border: 1px solid var(--aura-border-danger); color: var(--aura-fg-danger); background: transparent; }
@@ -237,6 +247,7 @@ a.aura-btn { text-decoration: none; }
 .aura-table__pager > span { margin-right: var(--aura-space-2); }
 
 /* Icon button — 32px round, icon in the text colour */
+a.aura-icon-btn { text-decoration: none; }
 .aura-icon-btn {
   width: var(--aura-control-sm); height: var(--aura-control-sm); flex: none;
   display: inline-flex; align-items: center; justify-content: center;
@@ -809,7 +820,17 @@ a.aura-btn { text-decoration: none; }
   position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--aura-space-2);
   min-height: 56px; padding: 0 var(--aura-space-6); background: var(--aura-bg-surface); border-bottom: 1px solid var(--aura-border-default);
 }
-.aura-shell.is-compact .aura-shell__bar { padding: 0 var(--aura-space-2) 0 var(--aura-space-2); }
+/* Responsive in CSS (4.16), so the server's HTML is already right on a phone: below lg the sidebar is hidden and the
+ * menu button shows; from lg up the reverse. JavaScript only opens and closes the drawer. */
+.aura-shell__menu { display: inline-flex; }
+@media (max-width: 1023.98px) {
+  .aura-shell__nav { display: none; }
+  .aura-shell__bar { padding: 0 var(--aura-space-2) 0 var(--aura-space-2); }
+}
+@media (min-width: 1024px) {
+  .aura-shell__menu { display: none; }
+  .aura-shell__bar--menu-only { display: none; }
+}
 .aura-shell__bar-content { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--aura-space-3); }
 .aura-shell__content { flex: 1; min-width: 0; padding: var(--aura-space-6) var(--aura-space-4); }
 @media (min-width: 640px) { .aura-shell__content { padding: var(--aura-space-6); } }
@@ -1127,10 +1148,23 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 
 /* Touch screens: bigger targets for days and options. */
 @media (pointer: coarse) {
-  .aura-cal { --aura-cal-cell: 40px; }
+  .aura-cal { --aura-cal-cell: var(--aura-touch-target); }
   .aura-combo__option { min-height: 44px; }
-  .aura-segmented__option, .aura-segmented--sm .aura-segmented__option { height: 40px; }
+  .aura-segmented__option, .aura-segmented--sm .aura-segmented__option { height: var(--aura-touch-target); }
   .aura-number__step { width: 44px; }
+  /* 4.17: the rest of the controls under 44px on touch screens. */
+  .aura-menu__item { height: var(--aura-touch-target); }
+  .aura-page { min-width: var(--aura-touch-target); height: var(--aura-touch-target); }
+  /* Side by side, each 44px wide (40px tall inside the 44px field), so their targets never overlap. */
+  .aura-combo__clear, .aura-combo__toggle, .aura-date__toggle { width: var(--aura-touch-target); height: 40px; }
+  .aura-combo__toggle, .aura-date__toggle { right: 0; }
+  .aura-combo__clear, .aura-date .aura-combo__clear { right: var(--aura-touch-target); }
+  .aura-combo .aura-input__control, .aura-date .aura-input__control { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
+  .aura-combo__clear::after, .aura-combo__toggle::after, .aura-date__toggle::after, .aura-tag__remove::after {
+    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%);
+  }
+  .aura-tag__remove { position: relative; }
+  .aura-combo.is-multi .aura-combo__clear, .aura-combo.is-multi .aura-combo__toggle { top: calc((var(--aura-input-height) - 2px - 40px) / 2); }
 }
 
 /* ---------- Small screens (< 640px) ---------- */
@@ -1140,7 +1174,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-stepper--horizontal .aura-stepper__item:not(:last-child)::after { right: 8px; }
   .aura-stepper--horizontal .aura-stepper__compact { display: block; }
   .aura-dialog-layer:not(.aura-drawer-layer) { align-items: flex-end; padding: 0; }
-  .aura-dialog { max-width: none !important; max-height: 92vh; border-radius: var(--aura-radius-2xl) var(--aura-radius-2xl) 0 0; border-bottom: 0;
+  .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;
     padding-bottom: calc(var(--aura-space-6) + env(safe-area-inset-bottom)); animation-name: aura-sheet-in; }
   .aura-dialog__foot { flex-direction: column-reverse; }
   .aura-dialog__foot > * { width: 100%; }
@@ -1255,6 +1289,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   flex: none; padding: 2px 6px; border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-xs);
   font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--aura-fg-secondary); background: var(--aura-bg-canvas);
 }
+.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); }
 .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); }
 .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); }
 @media (max-width: 639.98px) {
@@ -1281,3 +1316,33 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 }
 .aura-density { display: contents; }
 
+
+/* DataTable: cards before hydration (4.16). While a stackBelow table hasn't measured itself yet (server HTML, first
+ * client render) it holds both layouts; these container queries show one, so a phone never sees the grid first. */
+.aura-table-dual { container-type: inline-size; }
+@container (min-width: 360px) { .aura-table-dual[data-stack-below='360'] > .aura-table--stacked { display: none; } }
+@container (max-width: 359.98px) { .aura-table-dual[data-stack-below='360'] > .aura-table:not(.aura-table--stacked) { display: none; } }
+@container (min-width: 400px) { .aura-table-dual[data-stack-below='400'] > .aura-table--stacked { display: none; } }
+@container (max-width: 399.98px) { .aura-table-dual[data-stack-below='400'] > .aura-table:not(.aura-table--stacked) { display: none; } }
+@container (min-width: 480px) { .aura-table-dual[data-stack-below='480'] > .aura-table--stacked { display: none; } }
+@container (max-width: 479.98px) { .aura-table-dual[data-stack-below='480'] > .aura-table:not(.aura-table--stacked) { display: none; } }
+@container (min-width: 520px) { .aura-table-dual[data-stack-below='520'] > .aura-table--stacked { display: none; } }
+@container (max-width: 519.98px) { .aura-table-dual[data-stack-below='520'] > .aura-table:not(.aura-table--stacked) { display: none; } }
+@container (min-width: 560px) { .aura-table-dual[data-stack-below='560'] > .aura-table--stacked { display: none; } }
+@container (max-width: 559.98px) { .aura-table-dual[data-stack-below='560'] > .aura-table:not(.aura-table--stacked) { display: none; } }
+@container (min-width: 600px) { .aura-table-dual[data-stack-below='600'] > .aura-table--stacked { display: none; } }
+@container (max-width: 599.98px) { .aura-table-dual[data-stack-below='600'] > .aura-table:not(.aura-table--stacked) { display: none; } }
+@container (min-width: 640px) { .aura-table-dual[data-stack-below='640'] > .aura-table--stacked { display: none; } }
+@container (max-width: 639.98px) { .aura-table-dual[data-stack-below='640'] > .aura-table:not(.aura-table--stacked) { display: none; } }
+@container (min-width: 720px) { .aura-table-dual[data-stack-below='720'] > .aura-table--stacked { display: none; } }
+@container (max-width: 719.98px) { .aura-table-dual[data-stack-below='720'] > .aura-table:not(.aura-table--stacked) { display: none; } }
+@container (min-width: 768px) { .aura-table-dual[data-stack-below='768'] > .aura-table--stacked { display: none; } }
+@container (max-width: 767.98px) { .aura-table-dual[data-stack-below='768'] > .aura-table:not(.aura-table--stacked) { display: none; } }
+@container (min-width: 800px) { .aura-table-dual[data-stack-below='800'] > .aura-table--stacked { display: none; } }
+@container (max-width: 799.98px) { .aura-table-dual[data-stack-below='800'] > .aura-table:not(.aura-table--stacked) { display: none; } }
+@container (min-width: 900px) { .aura-table-dual[data-stack-below='900'] > .aura-table--stacked { display: none; } }
+@container (max-width: 899.98px) { .aura-table-dual[data-stack-below='900'] > .aura-table:not(.aura-table--stacked) { display: none; } }
+@container (min-width: 960px) { .aura-table-dual[data-stack-below='960'] > .aura-table--stacked { display: none; } }
+@container (max-width: 959.98px) { .aura-table-dual[data-stack-below='960'] > .aura-table:not(.aura-table--stacked) { display: none; } }
+@container (min-width: 1024px) { .aura-table-dual[data-stack-below='1024'] > .aura-table--stacked { display: none; } }
+@container (max-width: 1023.98px) { .aura-table-dual[data-stack-below='1024'] > .aura-table:not(.aura-table--stacked) { display: none; } }