@wpmoo/ui 1.1.0 → 1.2.1

package/scss/_components.scss

@@ -37,6 +37,7 @@
 @import "components/button_group";
 @import "components/toggle_group";
 @import "components/card";
+@import "components/empty";
 @import "components/table";
 @import "components/dropdown";
 @import "components/menubar";

package/scss/components/_alert.scss

@@ -51,6 +51,11 @@ $moo-alert-dismissible-close-space: $btn-close-width + ($btn-close-padding-x * 2
   --bs-alert-color: var(--moo-info);
 }
 
+.alert .form-check:not(.form-switch) >
+.form-check-input[type="checkbox"]:not(:checked):not(:indeterminate):not(.is-invalid):not(:invalid) {
+  border-color: var(--bs-alert-color);
+}
+
 .alert-icon {
   display: flex;
   flex: 0 0 auto;

package/scss/components/_empty.scss

@@ -0,0 +1,60 @@
+/* Empty */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: 0;
+  gap: $spacer * 1.5;
+  padding: $spacer * 1.5;
+  text-align: center;
+  border-width: var(--bs-border-width);
+  border-style: $moo-empty-border-style;
+  border-color: var(--bs-border-color);
+  border-radius: var(--bs-border-radius-lg);
+}
+
+.empty-state-header {
+  display: flex;
+  flex-direction: column;
+  align-items: inherit;
+  gap: $spacer * 0.5;
+}
+
+.empty-state-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: $spacer * 0.75;
+  font-size: $h3-font-size;
+  line-height: 1;
+  color: var(--bs-secondary-color);
+  background-color: var(--bs-tertiary-bg);
+  border-radius: var(--bs-border-radius-lg);
+}
+
+.empty-state-icon > [data-icon] {
+  width: $spacer * 1.5;
+  height: $spacer * 1.5;
+}
+
+.empty-state-title {
+  margin: 0;
+  font-size: $h5-font-size;
+  font-weight: $headings-font-weight;
+  line-height: $headings-line-height;
+}
+
+.empty-state-description {
+  margin: 0;
+  font-size: $font-size-base;
+  color: var(--bs-secondary-color);
+}
+
+.empty-state-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: inherit;
+  gap: $spacer * 0.5;
+}

package/scss/components/_tabs.scss

@@ -114,3 +114,11 @@
   pointer-events: auto;
   transition-delay: 0s;
 }
+
+.tabs--content-height > .tab-content {
+  display: block;
+}
+
+.tabs--content-height > .tab-content > .tab-pane:not(.active) {
+  display: none;
+}

package/scss/layouts/_app.scss

@@ -34,6 +34,39 @@
   flex: 0 0 auto;
 }
 
+@supports (container-type: inline-size) {
+  .wrapper[data-layout="app"] > [data-slot="page"] {
+    container: moo-shell / inline-size;
+  }
+
+  .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > :is(
+    .container,
+    .container-sm,
+    .container-md,
+    .container-lg,
+    .container-xl,
+    .container-xxl
+  ) {
+    max-width: none;
+  }
+
+  @each $breakpoint, $container-max-width in $container-max-widths {
+    @container moo-shell (min-width: #{map-get($grid-breakpoints, $breakpoint)}) {
+      $extend-breakpoint: true;
+      @each $name, $width in $grid-breakpoints {
+        @if $extend-breakpoint {
+          .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container#{breakpoint-infix($name, $grid-breakpoints)} {
+            max-width: $container-max-width;
+          }
+        }
+        @if $breakpoint == $name {
+          $extend-breakpoint: false;
+        }
+      }
+    }
+  }
+}
+
 .wrapper[data-layout="app"] > [data-slot="page"] > main {
   display: flex;
   min-height: 0;

package/scss/mixins/_banner.scss

@@ -1,5 +1,5 @@
 /*!
- * Moo UI v1.1.0 (https://wpmoo.org/)
+ * Moo UI v1.2.1 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  *

package/scss/settings/_component_variables.scss

@@ -8,6 +8,7 @@ $dropdown-item-padding-x: 0.375rem !default;
 $dropdown-header-padding-x: $dropdown-item-padding-x !default;
 $moo-small-font-size: 0.75rem !default;
 $moo-paragraph-margin-top: 0 !default;
+$moo-empty-border-style: dashed !default;
 $moo-combobox-width: 12.5rem !default;
 $moo-combobox-multiple-width: $moo-combobox-width * 1.6 !default;
 $moo-combobox-menu-max-height: $input-height * 8 !default;