@quidgest/ui 0.17.9 → 0.19.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 (135) hide show
  1. package/CHANGELOG.md +79 -0
  2. package/dist/json/api.json +302 -143
  3. package/dist/manifest/components.json +4 -1
  4. package/dist/ui.css +460 -167
  5. package/dist/ui.esm.js +618 -631
  6. package/dist/ui.js +490 -504
  7. package/dist/ui.min.css +1 -1
  8. package/dist/ui.min.js +490 -504
  9. package/dist/ui.scss +439 -167
  10. package/esm/components/QAccordion/QAccordionItem.vue.js +1 -0
  11. package/esm/components/QCarousel/QCarousel.vue.js +1 -1
  12. package/esm/components/QCheckbox/QCheckbox.d.ts.map +1 -1
  13. package/esm/components/QCheckbox/QCheckbox.vue.js +2 -0
  14. package/esm/components/QCollapsible/QCollapsible.d.ts +2 -1
  15. package/esm/components/QCollapsible/QCollapsible.d.ts.map +1 -1
  16. package/esm/components/QCollapsible/QCollapsible.vue.js +50 -47
  17. package/esm/components/QCollapsible/constants.d.ts +6 -0
  18. package/esm/components/QCollapsible/constants.d.ts.map +1 -1
  19. package/esm/components/QCollapsible/constants.js +3 -2
  20. package/esm/components/QCollapsible/index.d.ts +6 -0
  21. package/esm/components/QCollapsible/index.d.ts.map +1 -1
  22. package/esm/components/QCollapsible/types.d.ts +11 -1
  23. package/esm/components/QCollapsible/types.d.ts.map +1 -1
  24. package/esm/components/QDateTimePicker/QDateTimePicker.d.ts.map +1 -1
  25. package/esm/components/QDateTimePicker/QDateTimePicker.vue.js +505 -597
  26. package/esm/components/QDropdownMenu/QDropdownMenuContent.d.ts +32 -16
  27. package/esm/components/QDropdownMenu/QDropdownMenuContent.d.ts.map +1 -1
  28. package/esm/components/QDropdownMenu/QDropdownMenuContent.vue.js +179 -86
  29. package/esm/components/QDropdownMenu/types.d.ts +6 -0
  30. package/esm/components/QDropdownMenu/types.d.ts.map +1 -1
  31. package/esm/components/QField/types.d.ts +3 -0
  32. package/esm/components/QField/types.d.ts.map +1 -1
  33. package/esm/components/QGrid/QCol.vue.js +1 -1
  34. package/esm/components/QLabel/QLabel.d.ts.map +1 -1
  35. package/esm/components/QLabel/QLabel.vue.js +19 -17
  36. package/esm/components/QLabel/types.d.ts +3 -0
  37. package/esm/components/QLabel/types.d.ts.map +1 -1
  38. package/esm/components/{QGroupBox/QGroupBox.d.ts → QSection/QSection.d.ts} +4 -4
  39. package/esm/components/QSection/QSection.d.ts.map +1 -0
  40. package/esm/components/{QGroupBox/QGroupBox.vue.js → QSection/QSection.vue.js} +8 -8
  41. package/esm/components/QSection/QSection2.vue.js +5 -0
  42. package/esm/components/{QGroupBox → QSection}/index.d.ts +8 -8
  43. package/esm/components/QSection/index.d.ts.map +1 -0
  44. package/esm/components/QSection/index.js +6 -0
  45. package/esm/components/QSection/types.d.ts +32 -0
  46. package/esm/components/QSection/types.d.ts.map +1 -0
  47. package/esm/components/QSidebar/QSidebar.d.ts +53 -6
  48. package/esm/components/QSidebar/QSidebar.d.ts.map +1 -1
  49. package/esm/components/QSidebar/QSidebar.vue.js +76 -106
  50. package/esm/components/QSidebar/QSidebarAnchor.d.ts +24 -210
  51. package/esm/components/QSidebar/QSidebarAnchor.d.ts.map +1 -1
  52. package/esm/components/QSidebar/QSidebarAnchor.vue.js +47 -59
  53. package/esm/components/QSidebar/QSidebarItem.d.ts +213 -0
  54. package/esm/components/QSidebar/QSidebarItem.d.ts.map +1 -0
  55. package/esm/components/QSidebar/QSidebarItem.vue.js +130 -0
  56. package/esm/components/QSidebar/QSidebarItem2.vue.js +5 -0
  57. package/esm/components/QSidebar/QSidebarPanel.d.ts +1 -7
  58. package/esm/components/QSidebar/QSidebarPanel.d.ts.map +1 -1
  59. package/esm/components/QSidebar/QSidebarPanel.vue.js +4 -10
  60. package/esm/components/QSidebar/context.d.ts +108 -0
  61. package/esm/components/QSidebar/context.d.ts.map +1 -0
  62. package/esm/components/QSidebar/context.js +4 -0
  63. package/esm/components/QSidebar/index.d.ts +166 -8
  64. package/esm/components/QSidebar/index.d.ts.map +1 -1
  65. package/esm/components/QSidebar/index.js +3 -2
  66. package/esm/components/QSidebar/types.d.ts +77 -42
  67. package/esm/components/QSidebar/types.d.ts.map +1 -1
  68. package/esm/components/QTabs/QTab.d.ts +173 -0
  69. package/esm/components/QTabs/QTab.d.ts.map +1 -0
  70. package/esm/components/QTabs/QTab.vue.js +123 -0
  71. package/esm/components/QTabs/QTab2.vue.js +5 -0
  72. package/esm/components/QTabs/QTabs.d.ts +37 -0
  73. package/esm/components/QTabs/QTabs.d.ts.map +1 -0
  74. package/esm/components/QTabs/QTabs.vue.js +162 -0
  75. package/esm/components/QTabs/QTabs2.vue.js +5 -0
  76. package/esm/components/QTabs/constants.d.ts +5 -0
  77. package/esm/components/QTabs/constants.d.ts.map +1 -0
  78. package/esm/components/QTabs/context.d.ts +85 -0
  79. package/esm/components/QTabs/context.d.ts.map +1 -0
  80. package/esm/components/QTabs/context.js +4 -0
  81. package/esm/components/QTabs/index.d.ts +166 -0
  82. package/esm/components/QTabs/index.d.ts.map +1 -0
  83. package/esm/components/QTabs/index.js +7 -0
  84. package/esm/components/QTabs/types.d.ts +108 -0
  85. package/esm/components/QTabs/types.d.ts.map +1 -0
  86. package/esm/components/__internal__/QRequiredIndicator/QRequiredIndicator.d.ts +7 -0
  87. package/esm/components/__internal__/QRequiredIndicator/QRequiredIndicator.d.ts.map +1 -0
  88. package/esm/components/__internal__/QRequiredIndicator/QRequiredIndicator.vue.js +24 -0
  89. package/esm/components/__internal__/QRequiredIndicator/QRequiredIndicator2.vue.js +5 -0
  90. package/esm/components/__internal__/QRequiredIndicator/constants.d.ts +7 -0
  91. package/esm/components/__internal__/QRequiredIndicator/constants.d.ts.map +1 -0
  92. package/esm/components/__internal__/QRequiredIndicator/constants.js +4 -0
  93. package/esm/components/__internal__/QRequiredIndicator/index.d.ts +6 -0
  94. package/esm/components/__internal__/QRequiredIndicator/index.d.ts.map +1 -0
  95. package/esm/components/__internal__/QRequiredIndicator/index.js +6 -0
  96. package/esm/components/__internal__/QRequiredIndicator/types.d.ts +18 -0
  97. package/esm/components/__internal__/QRequiredIndicator/types.d.ts.map +1 -0
  98. package/esm/components/__internal__/QSafeTriangle/QSafeTriangle.d.ts +10 -0
  99. package/esm/components/__internal__/QSafeTriangle/QSafeTriangle.d.ts.map +1 -0
  100. package/esm/components/__internal__/QSafeTriangle/QSafeTriangle.vue.js +31 -0
  101. package/esm/components/__internal__/QSafeTriangle/QSafeTriangle2.vue.js +5 -0
  102. package/esm/components/__internal__/QSafeTriangle/index.d.ts +10 -0
  103. package/esm/components/__internal__/QSafeTriangle/index.d.ts.map +1 -0
  104. package/esm/components/__internal__/QSafeTriangle/index.js +6 -0
  105. package/esm/components/__internal__/QSafeTriangle/types.d.ts +33 -0
  106. package/esm/components/__internal__/QSafeTriangle/types.d.ts.map +1 -0
  107. package/esm/components/index.d.ts +2 -1
  108. package/esm/components/index.d.ts.map +1 -1
  109. package/esm/components/index.js +41 -37
  110. package/esm/composables/useSafeTriangle/index.d.ts +31 -0
  111. package/esm/composables/useSafeTriangle/index.d.ts.map +1 -0
  112. package/esm/composables/useSafeTriangle/index.js +87 -0
  113. package/esm/index.d.ts +4 -1
  114. package/esm/utils/date.d.ts +36 -1
  115. package/esm/utils/date.d.ts.map +1 -1
  116. package/esm/utils/date.js +90 -1
  117. package/esm/utils/index.d.ts +1 -0
  118. package/esm/utils/index.d.ts.map +1 -1
  119. package/esm/utils/index.js +30 -24
  120. package/esm/utils/mask.d.ts +17 -0
  121. package/esm/utils/mask.d.ts.map +1 -0
  122. package/esm/utils/mask.js +154 -0
  123. package/esm/utils/safeTriangle.d.ts +68 -0
  124. package/esm/utils/safeTriangle.d.ts.map +1 -0
  125. package/esm/utils/safeTriangle.js +83 -0
  126. package/package.json +7 -6
  127. package/esm/components/QGroupBox/QGroupBox.d.ts.map +0 -1
  128. package/esm/components/QGroupBox/QGroupBox2.vue.js +0 -5
  129. package/esm/components/QGroupBox/index.d.ts.map +0 -1
  130. package/esm/components/QGroupBox/index.js +0 -6
  131. package/esm/components/QGroupBox/types.d.ts +0 -32
  132. package/esm/components/QGroupBox/types.d.ts.map +0 -1
  133. package/esm/composables/useInputMask/index.d.ts +0 -50
  134. package/esm/composables/useInputMask/index.d.ts.map +0 -1
  135. package/esm/composables/useInputMask/index.js +0 -408
package/dist/ui.css CHANGED
@@ -351,6 +351,31 @@ body *::-webkit-scrollbar-track {
351
351
  transition: transform 0.2s ease, opacity 0.2s ease;
352
352
  }
353
353
 
354
+ /**
355
+ * Visually hide content while keeping it available to assistive technologies.
356
+ *
357
+ * Prefer the global `.q-sr-only` class; use this mixin when composing into
358
+ * another selector.
359
+ */
360
+ /* Shared utility classes */
361
+ /**
362
+ * Screen-reader-only text: visually hidden, still announced by assistive tech.
363
+ *
364
+ * @example
365
+ * <span class="q-sr-only">required</span>
366
+ */
367
+ .q-sr-only {
368
+ position: absolute;
369
+ width: 1px;
370
+ height: 1px;
371
+ padding: 0;
372
+ margin: -1px;
373
+ overflow: hidden;
374
+ clip-path: inset(50%);
375
+ white-space: nowrap;
376
+ border: 0;
377
+ }
378
+
354
379
  .q-chevron {
355
380
  transition: all 0.2s;
356
381
  }
@@ -374,6 +399,26 @@ body *::-webkit-scrollbar-track {
374
399
  opacity: 1;
375
400
  }
376
401
 
402
+ .q-required-indicator {
403
+ display: contents;
404
+ }
405
+ .q-required-indicator__mark {
406
+ margin-inline-start: 0.25em;
407
+ font-weight: 700;
408
+ color: var(--q-theme-danger);
409
+ }
410
+
411
+ .q-safe-triangle {
412
+ position: fixed;
413
+ z-index: 1071;
414
+ overflow: visible;
415
+ pointer-events: none;
416
+ }
417
+ .q-safe-triangle__path {
418
+ pointer-events: auto;
419
+ fill: transparent;
420
+ }
421
+
377
422
  .q-accordion {
378
423
  display: flex;
379
424
  flex-direction: column;
@@ -514,7 +559,8 @@ body *::-webkit-scrollbar-track {
514
559
  .q-badge--pill {
515
560
  border-radius: 9999px;
516
561
  }
517
- .q-badge--pill .q-button {
562
+ .q-badge--pill .q-badge__content.q-button,
563
+ .q-badge--pill .q-badge__remove.q-button {
518
564
  border-radius: 9999px;
519
565
  }
520
566
  .q-badge--disabled {
@@ -638,7 +684,7 @@ body *::-webkit-scrollbar-track {
638
684
  vertical-align: middle;
639
685
  flex-shrink: 0;
640
686
  }
641
- .q-badge-indicator .q-badge__content {
687
+ .q-badge-indicator.q-badge .q-badge__content {
642
688
  padding: 0;
643
689
  }
644
690
  .q-badge-indicator--dot {
@@ -1304,18 +1350,6 @@ body *::-webkit-scrollbar-track {
1304
1350
  height: 100%;
1305
1351
  }
1306
1352
 
1307
- .q-carousel__sr-only {
1308
- position: absolute;
1309
- width: 1px;
1310
- height: 1px;
1311
- padding: 0;
1312
- margin: -1px;
1313
- overflow: hidden;
1314
- clip-path: inset(50%);
1315
- white-space: nowrap;
1316
- border: 0;
1317
- }
1318
-
1319
1353
  @media (max-width: 768px) {
1320
1354
  .q-carousel {
1321
1355
  --q-carousel-height: 300px;
@@ -1512,10 +1546,10 @@ body *::-webkit-scrollbar-track {
1512
1546
  position: absolute;
1513
1547
  right: 0;
1514
1548
  }
1515
- .q-collapsible .q-card__content {
1549
+ .q-collapsible.q-card .q-card__content {
1516
1550
  padding: 0;
1517
1551
  }
1518
- .q-collapsible .q-card__header {
1552
+ .q-collapsible.q-card .q-card__header {
1519
1553
  padding-bottom: 0;
1520
1554
  }
1521
1555
  .q-collapsible__header {
@@ -1529,14 +1563,14 @@ body *::-webkit-scrollbar-track {
1529
1563
  justify-content: start;
1530
1564
  align-items: flex-start;
1531
1565
  flex-direction: column;
1532
- padding: 0.55rem;
1566
+ padding: 0;
1533
1567
  }
1534
- .q-collapsible__btn {
1568
+ .q-collapsible__btn.q-button {
1535
1569
  width: 100%;
1536
1570
  margin: 0;
1537
- padding: 0;
1571
+ padding: 0.55rem;
1538
1572
  }
1539
- .q-collapsible__btn .q-button__content {
1573
+ .q-collapsible__btn.q-button .q-button__content {
1540
1574
  gap: 0;
1541
1575
  padding: 0.2rem;
1542
1576
  display: flex;
@@ -1544,7 +1578,7 @@ body *::-webkit-scrollbar-track {
1544
1578
  align-items: start;
1545
1579
  letter-spacing: 0.02rem;
1546
1580
  }
1547
- .q-collapsible__btn .q-button__content h4 {
1581
+ .q-collapsible__btn.q-button .q-button__content h4 {
1548
1582
  margin: 0;
1549
1583
  text-transform: uppercase;
1550
1584
  }
@@ -1601,20 +1635,16 @@ body *::-webkit-scrollbar-track {
1601
1635
  .q-collapsible--border-bottom .q-collapsible__header {
1602
1636
  border: 0;
1603
1637
  }
1604
- .q-collapsible--required {
1605
- font-weight: 700;
1606
- color: var(--q-theme-danger);
1607
- }
1608
1638
  .q-collapsible--icon-right:not(.q-collapsible--borderless) .q-collapsible__title .q-icon {
1609
1639
  margin: 0 0 0 auto;
1610
1640
  }
1611
1641
  .q-collapsible--icon-right .q-collapsible__subtitle {
1612
1642
  margin-left: 0;
1613
1643
  }
1614
- .q-collapsible--loose .q-collapsible__header {
1644
+ .q-collapsible--loose .q-collapsible__btn.q-button {
1615
1645
  padding: calc(0.55rem + 0.25rem);
1616
1646
  }
1617
- .q-collapsible--compact .q-collapsible__header {
1647
+ .q-collapsible--compact .q-collapsible__btn.q-button {
1618
1648
  padding: calc(0.55rem + -0.25rem);
1619
1649
  }
1620
1650
 
@@ -1632,16 +1662,16 @@ body *::-webkit-scrollbar-track {
1632
1662
  cursor: pointer;
1633
1663
  }
1634
1664
 
1635
- .q-combobox:not(.q-combobox--disabled) .q-combobox__chevron:hover, .q-combobox:not(.q-combobox--disabled) .q-combobox__chevron:focus {
1665
+ .q-combobox:not(.q-combobox--disabled) .q-combobox__chevron.q-button:hover, .q-combobox:not(.q-combobox--disabled) .q-combobox__chevron.q-button:focus {
1636
1666
  cursor: pointer;
1637
1667
  opacity: 1;
1638
1668
  }
1639
1669
 
1640
- .q-combobox__chevron {
1670
+ .q-combobox__chevron.q-button {
1641
1671
  padding: 0.1rem;
1642
1672
  opacity: 0.5;
1643
1673
  }
1644
- .q-combobox__chevron:hover {
1674
+ .q-combobox__chevron.q-button:hover {
1645
1675
  cursor: inherit;
1646
1676
  }
1647
1677
 
@@ -1875,7 +1905,7 @@ body *::-webkit-scrollbar-track {
1875
1905
  flex-wrap: wrap;
1876
1906
  gap: 0.5rem;
1877
1907
  }
1878
- .q-dialog__close {
1908
+ .q-dialog__close.q-button {
1879
1909
  position: absolute;
1880
1910
  top: 0.5rem;
1881
1911
  right: 0.5rem;
@@ -4515,117 +4545,6 @@ body *::-webkit-scrollbar-track {
4515
4545
  margin-bottom: auto;
4516
4546
  }
4517
4547
  }
4518
- .q-group-box {
4519
- display: inline-block;
4520
- overflow-wrap: break-word;
4521
- background-color: var(--q-theme-container);
4522
- border-width: 1px;
4523
- border-bottom: 1px solid var(--q-theme-neutral-light);
4524
- padding: 0.5rem 1rem 1rem;
4525
- border-radius: var(--border-radius);
4526
- position: relative;
4527
- max-width: 100%;
4528
- }
4529
- .q-group-box:focus-visible {
4530
- outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
4531
- border-radius: var(--border-radius);
4532
- }
4533
- .q-group-box__title {
4534
- font-size: 1.2rem;
4535
- line-height: 1rem;
4536
- letter-spacing: 0.02rem;
4537
- color: var(--q-theme-primary);
4538
- text-transform: uppercase;
4539
- margin: 0;
4540
- margin-top: 0.25rem;
4541
- display: flex;
4542
- align-items: flex-start;
4543
- width: -moz-fit-content;
4544
- width: fit-content;
4545
- gap: 0.25rem;
4546
- margin-bottom: 0.5rem;
4547
- }
4548
- .q-group-box--background {
4549
- background-color: rgb(var(--q-theme-primary-light-rgb)/50%);
4550
- padding: 0.5rem 1rem 1rem;
4551
- }
4552
- .q-group-box--minor {
4553
- background-color: transparent;
4554
- border: none;
4555
- border-radius: 0;
4556
- padding: 0.5rem 0 0;
4557
- }
4558
- .q-group-box--minor-border-top {
4559
- background-color: transparent;
4560
- border: none;
4561
- border-top: 1px solid var(--q-theme-neutral-light);
4562
- border-radius: 0;
4563
- margin-top: 0.5rem;
4564
- padding: 0.25rem 0;
4565
- }
4566
- .q-group-box--minor .q-group-box__title, .q-group-box--minor-border-top .q-group-box__title {
4567
- font-size: 0.9rem;
4568
- line-height: 1;
4569
- letter-spacing: initial;
4570
- color: var(--q-theme-neutral-dark);
4571
- text-transform: none;
4572
- font-weight: 600;
4573
- margin-bottom: 0.25rem;
4574
- margin-top: 0.25rem;
4575
- }
4576
- .q-group-box--title-background {
4577
- padding: 0 !important;
4578
- }
4579
- .q-group-box--title-background::before {
4580
- position: absolute;
4581
- top: 0;
4582
- left: 0;
4583
- height: 30px;
4584
- width: 100%;
4585
- content: "";
4586
- background-color: rgb(var(--q-theme-neutral-light-rgb)/25%);
4587
- border-radius: var(--border-radius) var(--border-radius) 0 0;
4588
- }
4589
- .q-group-box--title-background .q-group-box__title {
4590
- padding: 0.5rem 1rem;
4591
- margin: 0;
4592
- font-size: 0.9rem;
4593
- font-weight: 700;
4594
- line-height: 1;
4595
- letter-spacing: 0.01rem;
4596
- color: var(--q-theme-on-background);
4597
- text-transform: none;
4598
- z-index: 10;
4599
- position: relative;
4600
- }
4601
- .q-group-box--title-background > .q-group-box__content {
4602
- padding: 0.2rem 1rem 1rem;
4603
- }
4604
- .q-group-box--subsection {
4605
- border: none;
4606
- margin-left: 0.625rem;
4607
- margin-bottom: 0.625rem;
4608
- }
4609
- .q-group-box--subsection .q-group-box__title {
4610
- font-size: 0.9rem;
4611
- line-height: 1;
4612
- letter-spacing: initial;
4613
- background-color: transparent;
4614
- color: var(--q-theme-neutral-dark);
4615
- text-transform: none;
4616
- font-weight: 600;
4617
- margin-bottom: 0.25rem;
4618
- }
4619
- .q-group-box--borderless {
4620
- border-color: transparent;
4621
- margin: 0;
4622
- padding: 0;
4623
- background-color: transparent;
4624
- }
4625
- .q-group-box--block {
4626
- width: 100%;
4627
- }
4628
-
4629
4548
  .q-icon {
4630
4549
  display: inline-block;
4631
4550
  color: var(--q-theme-primary);
@@ -4708,11 +4627,6 @@ body *::-webkit-scrollbar-track {
4708
4627
  .q-label .q-icon {
4709
4628
  color: currentcolor;
4710
4629
  }
4711
- .q-label--required::after {
4712
- content: " *";
4713
- font-weight: 700;
4714
- color: var(--q-theme-danger);
4715
- }
4716
4630
  .q-label--topright {
4717
4631
  align-self: flex-end;
4718
4632
  }
@@ -4888,10 +4802,10 @@ body *::-webkit-scrollbar-track {
4888
4802
  -moz-user-select: none;
4889
4803
  user-select: none;
4890
4804
  }
4891
- .q-obfuscation__mask .q-icon {
4805
+ .q-obfuscation__mask .q-obfuscation__icon.q-icon {
4892
4806
  color: inherit;
4893
4807
  }
4894
- .q-obfuscation__action {
4808
+ .q-obfuscation__action.q-button {
4895
4809
  justify-content: flex-start;
4896
4810
  margin: 0;
4897
4811
  padding: 0;
@@ -4899,32 +4813,37 @@ body *::-webkit-scrollbar-track {
4899
4813
  width: 100%;
4900
4814
  min-height: 1.5em;
4901
4815
  line-height: inherit;
4902
- color: var(--q-theme-primary);
4903
4816
  }
4904
- .q-obfuscation__action:hover, .q-obfuscation__action:focus-visible {
4817
+ .q-obfuscation__action.q-button:hover, .q-obfuscation__action.q-button:focus-visible {
4905
4818
  outline-offset: 0;
4906
4819
  }
4907
- .q-obfuscation__action .q-button__content {
4820
+ .q-obfuscation__action.q-button .q-button__content {
4908
4821
  justify-content: flex-start;
4909
4822
  }
4910
- .q-obfuscation__action.q-button--labeled {
4823
+ .q-obfuscation__action.q-button.q-button--labeled {
4911
4824
  padding: 0;
4912
4825
  }
4826
+ .q-obfuscation__action.q-button.q-button--text {
4827
+ color: var(--q-theme-primary);
4828
+ }
4913
4829
  .q-obfuscation__content {
4914
4830
  display: flex;
4915
4831
  align-items: flex-start;
4916
4832
  gap: 0.25rem;
4917
4833
  min-width: 0;
4918
4834
  }
4919
- .q-obfuscation__label-action {
4920
- color: var(--q-theme-primary);
4835
+ .q-obfuscation .q-obfuscation__label-action.q-button {
4836
+ padding: 0;
4921
4837
  min-width: auto;
4922
4838
  min-height: auto;
4923
4839
  }
4924
- .q-obfuscation__label-action:focus-visible {
4840
+ .q-obfuscation .q-obfuscation__label-action.q-button:focus-visible {
4925
4841
  outline-offset: 2px;
4926
4842
  }
4927
- .q-obfuscation__icon {
4843
+ .q-obfuscation .q-obfuscation__label-action.q-button.q-button--text {
4844
+ color: var(--q-theme-primary);
4845
+ }
4846
+ .q-obfuscation__icon.q-icon {
4928
4847
  flex-shrink: 0;
4929
4848
  }
4930
4849
 
@@ -5324,13 +5243,124 @@ body *::-webkit-scrollbar-track {
5324
5243
  outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
5325
5244
  }
5326
5245
 
5246
+ .q-section {
5247
+ display: inline-block;
5248
+ overflow-wrap: break-word;
5249
+ background-color: var(--q-theme-container);
5250
+ border-width: 1px;
5251
+ border-bottom: 1px solid var(--q-theme-neutral-light);
5252
+ padding: 0.5rem 1rem 1rem;
5253
+ border-radius: var(--border-radius);
5254
+ position: relative;
5255
+ max-width: 100%;
5256
+ }
5257
+ .q-section:focus-visible {
5258
+ outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
5259
+ border-radius: var(--border-radius);
5260
+ }
5261
+ .q-section__title {
5262
+ font-size: 1.2rem;
5263
+ line-height: 1rem;
5264
+ letter-spacing: 0.02rem;
5265
+ color: var(--q-theme-primary);
5266
+ text-transform: uppercase;
5267
+ margin: 0;
5268
+ margin-top: 0.25rem;
5269
+ display: flex;
5270
+ align-items: flex-start;
5271
+ width: -moz-fit-content;
5272
+ width: fit-content;
5273
+ gap: 0.25rem;
5274
+ margin-bottom: 0.5rem;
5275
+ }
5276
+ .q-section--background {
5277
+ background-color: rgb(var(--q-theme-primary-light-rgb)/50%);
5278
+ padding: 0.5rem 1rem 1rem;
5279
+ }
5280
+ .q-section--minor {
5281
+ background-color: transparent;
5282
+ border: none;
5283
+ border-radius: 0;
5284
+ padding: 0.5rem 0 0;
5285
+ }
5286
+ .q-section--minor-border-top {
5287
+ background-color: transparent;
5288
+ border: none;
5289
+ border-top: 1px solid var(--q-theme-neutral-light);
5290
+ border-radius: 0;
5291
+ margin-top: 0.5rem;
5292
+ padding: 0.25rem 0;
5293
+ }
5294
+ .q-section--minor .q-section__title, .q-section--minor-border-top .q-section__title {
5295
+ font-size: 0.9rem;
5296
+ line-height: 1;
5297
+ letter-spacing: initial;
5298
+ color: var(--q-theme-neutral-dark);
5299
+ text-transform: none;
5300
+ font-weight: 600;
5301
+ margin-bottom: 0.25rem;
5302
+ margin-top: 0.25rem;
5303
+ }
5304
+ .q-section--title-background {
5305
+ padding: 0 !important;
5306
+ }
5307
+ .q-section--title-background::before {
5308
+ position: absolute;
5309
+ top: 0;
5310
+ left: 0;
5311
+ height: 30px;
5312
+ width: 100%;
5313
+ content: "";
5314
+ background-color: rgb(var(--q-theme-neutral-light-rgb)/25%);
5315
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
5316
+ }
5317
+ .q-section--title-background .q-section__title {
5318
+ padding: 0.5rem 1rem;
5319
+ margin: 0;
5320
+ font-size: 0.9rem;
5321
+ font-weight: 700;
5322
+ line-height: 1;
5323
+ letter-spacing: 0.01rem;
5324
+ color: var(--q-theme-on-background);
5325
+ text-transform: none;
5326
+ z-index: 10;
5327
+ position: relative;
5328
+ }
5329
+ .q-section--title-background > .q-section__content {
5330
+ padding: 0.2rem 1rem 1rem;
5331
+ }
5332
+ .q-section--subsection {
5333
+ border: none;
5334
+ margin-left: 0.625rem;
5335
+ margin-bottom: 0.625rem;
5336
+ }
5337
+ .q-section--subsection .q-section__title {
5338
+ font-size: 0.9rem;
5339
+ line-height: 1;
5340
+ letter-spacing: initial;
5341
+ background-color: transparent;
5342
+ color: var(--q-theme-neutral-dark);
5343
+ text-transform: none;
5344
+ font-weight: 600;
5345
+ margin-bottom: 0.25rem;
5346
+ }
5347
+ .q-section--borderless {
5348
+ border-color: transparent;
5349
+ margin: 0;
5350
+ padding: 0;
5351
+ background-color: transparent;
5352
+ }
5353
+ .q-section--block {
5354
+ width: 100%;
5355
+ }
5356
+
5327
5357
  .q-select {
5328
5358
  /* Icon of the selected item */
5329
5359
  }
5330
5360
  .q-select:not(.q-select--readonly):not(.q-select--disabled) {
5331
5361
  cursor: pointer;
5332
5362
  }
5333
- .q-select:not(.q-select--disabled) .q-select__chevron:hover, .q-select:not(.q-select--disabled) .q-select__chevron:focus {
5363
+ .q-select:not(.q-select--disabled) .q-select__chevron.q-button:hover, .q-select:not(.q-select--disabled) .q-select__chevron.q-button:focus {
5334
5364
  opacity: 1;
5335
5365
  }
5336
5366
  .q-select--readonly .q-badge--disabled, .q-select--disabled .q-badge--disabled {
@@ -5377,7 +5407,7 @@ body *::-webkit-scrollbar-track {
5377
5407
  .q-select__value-container .q-select__badge-hidden {
5378
5408
  visibility: hidden;
5379
5409
  }
5380
- .q-select__value-container .q-badge__content {
5410
+ .q-select__value-container .q-badge .q-badge__content {
5381
5411
  white-space: nowrap;
5382
5412
  }
5383
5413
  .q-select__placeholder {
@@ -5389,11 +5419,11 @@ body *::-webkit-scrollbar-track {
5389
5419
  opacity: 0;
5390
5420
  cursor: inherit;
5391
5421
  }
5392
- .q-select__chevron {
5422
+ .q-select__chevron.q-button {
5393
5423
  padding: 0.1rem;
5394
5424
  opacity: 0.5;
5395
5425
  }
5396
- .q-select__chevron:hover {
5426
+ .q-select__chevron.q-button:hover {
5397
5427
  cursor: inherit;
5398
5428
  }
5399
5429
  .q-select__body {
@@ -5439,11 +5469,22 @@ body *::-webkit-scrollbar-track {
5439
5469
  width: min-content;
5440
5470
  }
5441
5471
 
5442
- .q-sidebar--expanded {
5472
+ .q-sidebar--expanded:not(.q-sidebar--xlarge, .q-sidebar--block) {
5443
5473
  min-width: 19rem;
5444
5474
  max-width: 35rem;
5445
5475
  }
5446
5476
 
5477
+ .q-sidebar__panels {
5478
+ position: relative;
5479
+ flex: 1 1 auto;
5480
+ min-width: 0;
5481
+ overflow: hidden;
5482
+ }
5483
+ .q-sidebar__panels > .q-sidebar-panel {
5484
+ width: 100%;
5485
+ height: 100%;
5486
+ }
5487
+
5447
5488
  .q-sidebar-anchor {
5448
5489
  display: flex;
5449
5490
  flex-direction: column;
@@ -5458,7 +5499,7 @@ body *::-webkit-scrollbar-track {
5458
5499
  position: relative;
5459
5500
  }
5460
5501
 
5461
- .q-sidebar__item {
5502
+ .q-sidebar__item.q-button {
5462
5503
  width: 100%;
5463
5504
  height: 100%;
5464
5505
  aspect-ratio: 1;
@@ -5468,7 +5509,7 @@ body *::-webkit-scrollbar-track {
5468
5509
  border-bottom-color: rgb(var(--q-theme-neutral-rgb)/25%) !important;
5469
5510
  font-size: 0.6rem;
5470
5511
  }
5471
- .q-sidebar__item .q-icon {
5512
+ .q-sidebar__item.q-button .q-icon {
5472
5513
  font-size: 20px;
5473
5514
  }
5474
5515
 
@@ -5495,7 +5536,15 @@ body *::-webkit-scrollbar-track {
5495
5536
  display: flex;
5496
5537
  align-items: center;
5497
5538
  gap: 0.5rem;
5498
- padding: 1rem;
5539
+ margin: 1rem;
5540
+ }
5541
+
5542
+ .q-sidebar-panel__header {
5543
+ margin-bottom: 0;
5544
+ }
5545
+
5546
+ .q-sidebar-panel__footer {
5547
+ margin-top: 0;
5499
5548
  }
5500
5549
 
5501
5550
  .q-sidebar-panel__title {
@@ -5505,6 +5554,7 @@ body *::-webkit-scrollbar-track {
5505
5554
  .q-sidebar-panel__content {
5506
5555
  flex: 1 1 0%;
5507
5556
  overflow: auto;
5557
+ margin: 1rem;
5508
5558
  }
5509
5559
 
5510
5560
  .q-sidebar-panel__handle {
@@ -5545,6 +5595,14 @@ body *::-webkit-scrollbar-track {
5545
5595
  width: 35rem;
5546
5596
  }
5547
5597
 
5598
+ .q-sidebar--expanded.q-sidebar--xlarge {
5599
+ width: 50%;
5600
+ }
5601
+
5602
+ .q-sidebar--expanded.q-sidebar--block {
5603
+ width: 100%;
5604
+ }
5605
+
5548
5606
  .q-sidebar--expanded.q-sidebar--min-small {
5549
5607
  min-width: 19rem;
5550
5608
  }
@@ -5557,6 +5615,14 @@ body *::-webkit-scrollbar-track {
5557
5615
  min-width: 35rem;
5558
5616
  }
5559
5617
 
5618
+ .q-sidebar--expanded.q-sidebar--min-xlarge {
5619
+ min-width: 50%;
5620
+ }
5621
+
5622
+ .q-sidebar--expanded.q-sidebar--min-block {
5623
+ min-width: 100%;
5624
+ }
5625
+
5560
5626
  .q-sidebar--expanded.q-sidebar--max-small {
5561
5627
  max-width: 19rem;
5562
5628
  }
@@ -5569,6 +5635,14 @@ body *::-webkit-scrollbar-track {
5569
5635
  max-width: 35rem;
5570
5636
  }
5571
5637
 
5638
+ .q-sidebar--expanded.q-sidebar--max-xlarge {
5639
+ max-width: 50%;
5640
+ }
5641
+
5642
+ .q-sidebar--expanded.q-sidebar--max-block {
5643
+ max-width: 100%;
5644
+ }
5645
+
5572
5646
  .q-sidebar--right {
5573
5647
  right: 0;
5574
5648
  flex-direction: row-reverse;
@@ -5841,6 +5915,225 @@ body *::-webkit-scrollbar-track {
5841
5915
  transition: none;
5842
5916
  }
5843
5917
  }
5918
+ .q-tabs {
5919
+ display: flex;
5920
+ gap: 0;
5921
+ }
5922
+ .q-tabs--horizontal {
5923
+ flex-direction: column;
5924
+ }
5925
+ .q-tabs--horizontal .q-tabs__list {
5926
+ width: 100%;
5927
+ border-bottom: 1px solid var(--q-theme-neutral-light);
5928
+ }
5929
+ .q-tabs--horizontal .q-tabs__tablist {
5930
+ flex-direction: row;
5931
+ width: 100%;
5932
+ }
5933
+ .q-tabs--horizontal .q-tab {
5934
+ margin-bottom: -1px;
5935
+ }
5936
+ .q-tabs--horizontal .q-tabs__panels {
5937
+ border: 1px solid var(--q-theme-neutral-light);
5938
+ border-top: 0;
5939
+ border-start-start-radius: 0;
5940
+ border-start-end-radius: 0;
5941
+ border-end-start-radius: 0.25rem;
5942
+ border-end-end-radius: 0.25rem;
5943
+ padding-inline: 0.5rem;
5944
+ }
5945
+ .q-tabs--vertical {
5946
+ flex-direction: row;
5947
+ align-items: stretch;
5948
+ }
5949
+ .q-tabs--vertical .q-tabs__list {
5950
+ flex: 0 0 auto;
5951
+ width: -moz-max-content;
5952
+ width: max-content;
5953
+ max-width: 100%;
5954
+ border-inline-end: 1px solid var(--q-theme-neutral-light);
5955
+ }
5956
+ .q-tabs--vertical .q-tabs__tablist {
5957
+ flex-direction: column;
5958
+ }
5959
+ .q-tabs--vertical .q-tab {
5960
+ justify-content: flex-start;
5961
+ margin-inline-end: -1px;
5962
+ }
5963
+ .q-tabs--vertical .q-tabs__panels {
5964
+ flex: 1;
5965
+ min-width: 0;
5966
+ border: 1px solid var(--q-theme-neutral-light);
5967
+ border-inline-start: 0;
5968
+ border-start-start-radius: 0;
5969
+ border-end-start-radius: 0;
5970
+ border-start-end-radius: 0.25rem;
5971
+ border-end-end-radius: 0.25rem;
5972
+ padding-inline: 0.5rem;
5973
+ }
5974
+ .q-tabs--line .q-tabs__indicator {
5975
+ position: absolute;
5976
+ background-color: var(--q-theme-primary);
5977
+ opacity: 0;
5978
+ pointer-events: none;
5979
+ z-index: 1;
5980
+ }
5981
+ .q-tabs--line.q-tabs--indicator-ready .q-tabs__indicator {
5982
+ transition: transform 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out, opacity 0.2s ease-in-out;
5983
+ }
5984
+ .q-tabs--line.q-tabs--horizontal .q-tabs__indicator {
5985
+ bottom: -1px;
5986
+ left: 0;
5987
+ }
5988
+ .q-tabs--line.q-tabs--horizontal .q-tab {
5989
+ border-bottom: 4px solid transparent;
5990
+ border-end-start-radius: 0;
5991
+ border-end-end-radius: 0;
5992
+ }
5993
+ .q-tabs--line.q-tabs--horizontal .q-tab--active {
5994
+ border-bottom-color: var(--q-theme-primary);
5995
+ }
5996
+ @media (hover: hover) {
5997
+ .q-tabs--line.q-tabs--horizontal .q-tab:hover:not(:disabled, .q-tab--active) {
5998
+ border-bottom-color: currentcolor;
5999
+ }
6000
+ }
6001
+ .q-tabs--line.q-tabs--indicator-ready.q-tabs--horizontal .q-tab--active {
6002
+ border-bottom-color: transparent;
6003
+ }
6004
+ .q-tabs--line.q-tabs--vertical .q-tabs__indicator {
6005
+ top: 0;
6006
+ inset-inline-end: -1px;
6007
+ }
6008
+ .q-tabs--line.q-tabs--vertical .q-tab {
6009
+ border-inline-end: 4px solid transparent;
6010
+ border-start-end-radius: 0;
6011
+ border-end-end-radius: 0;
6012
+ }
6013
+ .q-tabs--line.q-tabs--vertical .q-tab--active {
6014
+ border-inline-end-color: var(--q-theme-primary);
6015
+ }
6016
+ @media (hover: hover) {
6017
+ .q-tabs--line.q-tabs--vertical .q-tab:hover:not(:disabled, .q-tab--active) {
6018
+ border-inline-end-color: currentcolor;
6019
+ }
6020
+ }
6021
+ .q-tabs--line.q-tabs--indicator-ready.q-tabs--vertical .q-tab--active {
6022
+ border-inline-end-color: transparent;
6023
+ }
6024
+ .q-tabs--card .q-tabs__tablist {
6025
+ gap: 0;
6026
+ }
6027
+ .q-tabs--card .q-tab {
6028
+ border: 1px solid var(--q-theme-neutral-light);
6029
+ background-color: rgb(var(--q-theme-neutral-light-rgb)/25%);
6030
+ }
6031
+ .q-tabs--card .q-tab--active {
6032
+ background-color: var(--q-theme-container);
6033
+ z-index: 1;
6034
+ }
6035
+ @media (hover: hover) {
6036
+ .q-tabs--card .q-tab:hover:not(:disabled) {
6037
+ border-color: var(--q-theme-neutral-light);
6038
+ }
6039
+ }
6040
+ .q-tabs--card.q-tabs--horizontal .q-tab {
6041
+ border-start-start-radius: 0.25rem;
6042
+ border-start-end-radius: 0.25rem;
6043
+ border-end-start-radius: 0;
6044
+ border-end-end-radius: 0;
6045
+ }
6046
+ .q-tabs--card.q-tabs--horizontal .q-tab--active {
6047
+ border-bottom-color: var(--q-theme-container);
6048
+ color: var(--q-theme-primary);
6049
+ }
6050
+ @media (hover: hover) {
6051
+ .q-tabs--card.q-tabs--horizontal .q-tab--active:hover:not(:disabled) {
6052
+ border-bottom-color: var(--q-theme-container);
6053
+ }
6054
+ }
6055
+ .q-tabs--card.q-tabs--vertical .q-tab {
6056
+ border-start-start-radius: 0.25rem;
6057
+ border-end-start-radius: 0.25rem;
6058
+ border-start-end-radius: 0;
6059
+ border-end-end-radius: 0;
6060
+ }
6061
+ .q-tabs--card.q-tabs--vertical .q-tab--active {
6062
+ border-inline-end-color: var(--q-theme-container);
6063
+ }
6064
+ @media (hover: hover) {
6065
+ .q-tabs--card.q-tabs--vertical .q-tab--active:hover:not(:disabled) {
6066
+ border-inline-end-color: var(--q-theme-container);
6067
+ }
6068
+ }
6069
+ .q-tabs--align-start .q-tabs__tablist {
6070
+ justify-content: flex-start;
6071
+ }
6072
+ .q-tabs--align-end .q-tabs__tablist {
6073
+ justify-content: flex-end;
6074
+ }
6075
+ .q-tabs--align-center .q-tabs__tablist {
6076
+ justify-content: center;
6077
+ }
6078
+ .q-tabs--align-justify .q-tabs__tablist {
6079
+ justify-content: space-between;
6080
+ }
6081
+ .q-tabs--align-justify .q-tabs__tablist .q-tab {
6082
+ flex: 1;
6083
+ }
6084
+ .q-tabs__list {
6085
+ position: relative;
6086
+ }
6087
+ .q-tabs__tablist {
6088
+ display: flex;
6089
+ gap: 0.25rem;
6090
+ }
6091
+ .q-tabs__panels {
6092
+ padding-block: 0.5rem;
6093
+ }
6094
+ .q-tabs__panel:focus {
6095
+ outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
6096
+ }
6097
+ .q-tabs__panel:focus:not(:focus-visible) {
6098
+ outline: 0;
6099
+ }
6100
+
6101
+ .q-tab {
6102
+ background: transparent;
6103
+ border: 0;
6104
+ padding: 0.5rem 0.75rem;
6105
+ }
6106
+ .q-tab.q-button.q-button--text {
6107
+ color: var(--q-theme-on-background);
6108
+ }
6109
+ .q-tab--active.q-button.q-button--text {
6110
+ color: var(--q-theme-primary);
6111
+ cursor: default;
6112
+ }
6113
+ .q-tab--active.q-button.q-button--text:hover:not(:disabled) {
6114
+ color: var(--q-theme-primary);
6115
+ cursor: default;
6116
+ }
6117
+ .q-tab__title {
6118
+ display: inline-flex;
6119
+ align-items: center;
6120
+ gap: 0.125rem;
6121
+ }
6122
+ .q-tab__title-text {
6123
+ font-weight: 600;
6124
+ }
6125
+ .q-tab--disabled {
6126
+ cursor: not-allowed;
6127
+ }
6128
+ .q-tab--disabled:hover {
6129
+ cursor: not-allowed;
6130
+ }
6131
+
6132
+ @media (prefers-reduced-motion: reduce) {
6133
+ .q-tabs--line.q-tabs--indicator-ready .q-tabs__indicator {
6134
+ transition: opacity 0.2s ease-in-out;
6135
+ }
6136
+ }
5844
6137
  .q-text-area {
5845
6138
  /* Container styles */
5846
6139
  display: flex;
@@ -6168,12 +6461,12 @@ body *::-webkit-scrollbar-track {
6168
6461
  will-change: auto;
6169
6462
  }
6170
6463
 
6171
- .q-toggle--active {
6464
+ .q-toggle.q-button.q-toggle--active {
6172
6465
  z-index: 2;
6173
6466
  color: var(--q-theme-primary-dark);
6174
6467
  background-color: rgb(var(--q-theme-primary-light-rgb)/50%);
6175
6468
  }
6176
- .q-toggle--active:not(.q-button--borderless) {
6469
+ .q-toggle.q-button.q-toggle--active:not(.q-button--borderless) {
6177
6470
  border-color: var(--q-theme-primary);
6178
6471
  }
6179
6472