@wpmoo/ui 1.1.0-dev.1 → 1.2.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.
Files changed (30) hide show
  1. package/ASSET_LICENSE.md +1 -1
  2. package/README.md +4 -6
  3. package/certification.json +2 -1
  4. package/dist/assets/css/moo-ui.css +140 -1
  5. package/dist/assets/css/moo-ui.min.css +2 -2
  6. package/dist/assets/css/moo.css +140 -1
  7. package/dist/assets/css/moo.min.css +2 -2
  8. package/dist/js/chart.js +1 -1
  9. package/dist/js/chart.min.js +1 -1
  10. package/dist/js/combobox.js +1 -1
  11. package/dist/js/context-menu.js +1 -1
  12. package/dist/js/datatable.js +1 -1
  13. package/dist/js/datepicker.js +1 -1
  14. package/dist/js/datepicker.min.js +1 -1
  15. package/dist/js/moo-ui.js +2 -2
  16. package/dist/js/moo-ui.min.js +1 -1
  17. package/dist/js/sheet.js +1 -1
  18. package/dist/js/sidebar.js +1 -1
  19. package/dist/js/slider.js +1 -1
  20. package/dist/js/state.js +1 -1
  21. package/dist/js/table-of-contents.js +3 -188
  22. package/dist/js/toc.js +195 -0
  23. package/dist/release-manifest.json +4 -4
  24. package/package.json +3 -1
  25. package/scss/_components.scss +1 -0
  26. package/scss/components/_empty.scss +60 -0
  27. package/scss/components/_tabs.scss +8 -0
  28. package/scss/layouts/_app.scss +33 -0
  29. package/scss/mixins/_banner.scss +1 -1
  30. package/scss/settings/_component_variables.scss +1 -0
package/dist/assets/css/moo.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Moo UI v1.1.0-dev.1 (https://wpmoo.org/)
2
+ * Moo UI v1.2.0 (https://wpmoo.org/)
3
3
  * Copyright 2026 WPMoo Authors
4
4
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
5
5
  *
@@ -4420,6 +4420,61 @@ label.btn {
4420
4420
  color: var(--moo-muted-foreground);
4421
4421
  }
4422
4422
 
4423
+ /* Empty */
4424
+ .empty-state {
4425
+ display: flex;
4426
+ flex-direction: column;
4427
+ align-items: center;
4428
+ justify-content: center;
4429
+ width: 100%;
4430
+ min-width: 0;
4431
+ gap: 1.5rem;
4432
+ padding: 1.5rem;
4433
+ text-align: center;
4434
+ border-width: var(--bs-border-width);
4435
+ border-style: dashed;
4436
+ border-color: var(--bs-border-color);
4437
+ border-radius: var(--bs-border-radius-lg);
4438
+ }
4439
+ .empty-state-header {
4440
+ display: flex;
4441
+ flex-direction: column;
4442
+ align-items: inherit;
4443
+ gap: 0.5rem;
4444
+ }
4445
+ .empty-state-icon {
4446
+ display: inline-flex;
4447
+ align-items: center;
4448
+ justify-content: center;
4449
+ padding: 0.75rem;
4450
+ font-size: 1.53125rem;
4451
+ line-height: 1;
4452
+ color: var(--bs-secondary-color);
4453
+ background-color: var(--bs-tertiary-bg);
4454
+ border-radius: var(--bs-border-radius-lg);
4455
+ }
4456
+ .empty-state-icon > [data-icon] {
4457
+ width: 1.5rem;
4458
+ height: 1.5rem;
4459
+ }
4460
+ .empty-state-title {
4461
+ margin: 0;
4462
+ font-size: 1.09375rem;
4463
+ font-weight: 600;
4464
+ line-height: 1.2;
4465
+ }
4466
+ .empty-state-description {
4467
+ margin: 0;
4468
+ font-size: 0.875rem;
4469
+ color: var(--bs-secondary-color);
4470
+ }
4471
+ .empty-state-actions {
4472
+ display: flex;
4473
+ flex-wrap: wrap;
4474
+ justify-content: inherit;
4475
+ gap: 0.5rem;
4476
+ }
4477
+
4423
4478
  /* Table */
4424
4479
  .card .table {
4425
4480
  --bs-table-bg: transparent;
@@ -6079,6 +6134,12 @@ label.btn {
6079
6134
  pointer-events: auto;
6080
6135
  transition-delay: 0s;
6081
6136
  }
6137
+ .tabs--content-height > .tab-content {
6138
+ display: block;
6139
+ }
6140
+ .tabs--content-height > .tab-content > .tab-pane:not(.active) {
6141
+ display: none;
6142
+ }
6082
6143
 
6083
6144
  /* Collapsible */
6084
6145
  .collapsible {
@@ -8246,6 +8307,84 @@ label.btn {
8246
8307
  .wrapper[data-layout="app"] > [data-slot="page"] > footer {
8247
8308
  flex: 0 0 auto;
8248
8309
  }
8310
+ @supports (container-type: inline-size) {
8311
+ .wrapper[data-layout="app"] > [data-slot="page"] {
8312
+ container: moo-shell / inline-size;
8313
+ }
8314
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > :is( .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl ) {
8315
+ max-width: none;
8316
+ }
8317
+ @container moo-shell (min-width: 576px) {
8318
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container {
8319
+ max-width: 540px;
8320
+ }
8321
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-sm {
8322
+ max-width: 540px;
8323
+ }
8324
+ }
8325
+ @container moo-shell (min-width: 768px) {
8326
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container {
8327
+ max-width: 720px;
8328
+ }
8329
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-sm {
8330
+ max-width: 720px;
8331
+ }
8332
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-md {
8333
+ max-width: 720px;
8334
+ }
8335
+ }
8336
+ @container moo-shell (min-width: 992px) {
8337
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container {
8338
+ max-width: 960px;
8339
+ }
8340
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-sm {
8341
+ max-width: 960px;
8342
+ }
8343
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-md {
8344
+ max-width: 960px;
8345
+ }
8346
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-lg {
8347
+ max-width: 960px;
8348
+ }
8349
+ }
8350
+ @container moo-shell (min-width: 1200px) {
8351
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container {
8352
+ max-width: 1140px;
8353
+ }
8354
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-sm {
8355
+ max-width: 1140px;
8356
+ }
8357
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-md {
8358
+ max-width: 1140px;
8359
+ }
8360
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-lg {
8361
+ max-width: 1140px;
8362
+ }
8363
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-xl {
8364
+ max-width: 1140px;
8365
+ }
8366
+ }
8367
+ @container moo-shell (min-width: 1400px) {
8368
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container {
8369
+ max-width: 1320px;
8370
+ }
8371
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-sm {
8372
+ max-width: 1320px;
8373
+ }
8374
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-md {
8375
+ max-width: 1320px;
8376
+ }
8377
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-lg {
8378
+ max-width: 1320px;
8379
+ }
8380
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-xl {
8381
+ max-width: 1320px;
8382
+ }
8383
+ .wrapper[data-layout="app"] > [data-slot="page"] > :is(header, main, footer) > .container-xxl {
8384
+ max-width: 1320px;
8385
+ }
8386
+ }
8387
+ }
8249
8388
  .wrapper[data-layout="app"] > [data-slot="page"] > main {
8250
8389
  display: flex;
8251
8390
  min-height: 0;