@allxsmith/bestax-bulma 5.67.7 → 5.67.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allxsmith/bestax-bulma",
-  "version": "5.67.7",
+  "version": "5.67.9",
   "description": "Component library based on React, Bulma, with Agent Skills and MCP",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",

package/src/scss/components/_datatable.scss

@@ -1,8 +1,9 @@
 // Bestax Extras - DataTable Styles
 // DataTable renders Bulma's own table, checkboxes and pager, which Bulma and
 // the Checkbox partial style. This adds what Bulma has no class for: the
-// toolbar above the table, the button a sortable header holds, and the
-// indicator that shows which way it sorts.
+// toolbar above the table, the button a sortable header holds, the
+// indicator that shows which way it sorts, and the height of a loading
+// row's skeleton lines.
 //
 // The sort button is styled on its own class rather than inside
 // `.data-table`, so a table built from `useDataTable`'s props, with no
@@ -119,6 +120,17 @@ $-descending: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
   }
 }
 
+// While `loading`, each cell holds one skeleton line. Bulma draws a skeleton
+// line half a line of text tall, which left a loading row shorter than the
+// row that replaces it, so the table jumped when the data came. This one is
+// a line of the cell's text tall, as Stat's loading Skeleton is a line of its
+// figure. The extra class outranks Bulma's rule whichever sheet loads first,
+// and a browser without `lh` keeps Bulma's height.
+.#{iv.$class-prefix}data-table-skeleton.#{iv.$class-prefix}skeleton-lines
+  > div {
+  height: 1lh;
+}
+
 // The sorted header says which way in `aria-sort`, so the indicator reads it
 // from there, and markup built from `useDataTable`'s props shows it too.
 th[aria-sort='ascending'] > .#{iv.$class-prefix}data-table-sort::after {

package/src/scss/form/_field.scss

@@ -1,8 +1,10 @@
 // Field styles
 // Extends Bulma's own field (`bulma/sass/form/tools`): a horizontal field's
-// message goes under its control.
+// message goes under its control, and its label's text sits against the
+// control on a right-to-left page.
 
 @use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/mixins" as mx;
 
 // A horizontal `Field` wraps its children in `.field-body`, which Bulma makes
 // a flex row from tablet up. A form component that renders a Field of its own
@@ -38,3 +40,16 @@
   > .#{iv.$class-prefix}field:has(+ .#{iv.$class-prefix}help) {
   margin-inline-end: 0;
 }
+
+// From tablet up, Bulma sets a horizontal field's label beside its control
+// and aligns its text `right`, against the control. On a right-to-left page
+// the label sits to the control's right, so `right` pushed its text to the
+// far edge. `end` is `right` left to right, so nothing moves there. The
+// doubled class outranks Bulma's rule whichever stylesheet loads first, and
+// the breakpoint is Bulma's, so a phone's label above its control keeps its
+// start alignment.
+@include mx.tablet {
+  .#{iv.$class-prefix}field-label.#{iv.$class-prefix}field-label {
+    text-align: end;
+  }
+}