@wavemaker/foundation-css 11.14.3-rc.6401 → 11.15.0-2.247

package/foundation/foundation.css

@@ -327,7 +327,7 @@
 }
 /**--Components--**/
 :root {
-  --wm-page-content-padding: var(--wm-space-0);
+  --wm-page-content-padding: var(--wm-space-6);
 }
 /**--import specified google font url ex:Lexend--**/
 * {
@@ -430,7 +430,7 @@
   border-radius: var(--wm-accordion-border-radius);
   box-shadow: var(--wm-accordion-shadow);
 }
-.wm-app .app-accordion.panel > .panel-heading {
+.wm-app .app-accordion.panel .panel-heading {
   width: 100%;
   display: flex;
   padding-block: var(--wm-accordion-heading-padding-block);
@@ -439,14 +439,14 @@
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
-.wm-app .app-accordion.panel > .panel-heading .panel-title {
+.wm-app .app-accordion.panel .panel-heading .panel-title {
   width: 100%;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: var(--wm-accordion-heading-gap);
 }
-.wm-app .app-accordion.panel > .panel-heading .panel-title .accordion-toggle {
+.wm-app .app-accordion.panel .panel-heading .panel-title .accordion-toggle {
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
@@ -454,15 +454,15 @@
   gap: var(--wm-accordion-heading-gap);
   color: var(--wm-accordion-heading-color);
 }
-.wm-app .app-accordion.panel > .panel-heading .panel-title .panel-actions:not(:empty) {
+.wm-app .app-accordion.panel .panel-heading .panel-title .panel-actions:not(:empty) {
   display: flex;
   align-items: center;
   gap: var(--wm-accordion-actions-gap);
 }
-.wm-app .app-accordion.panel > .panel-heading .panel-title .panel-actions .panel-action {
+.wm-app .app-accordion.panel .panel-heading .panel-title .panel-actions .panel-action {
   margin: var(--wm-space-0);
 }
-.wm-app .app-accordion.panel > .panel-heading .panel-title .heading {
+.wm-app .app-accordion.panel .panel-heading .panel-title .heading {
   font-family: var(--wm-accordion-heading-font-family);
   font-size: var(--wm-accordion-heading-font-size);
   font-weight: var(--wm-accordion-heading-font-weight);
@@ -470,7 +470,7 @@
   letter-spacing: var(--wm-accordion-heading-letter-spacing);
   color: var(--wm-accordion-heading-color);
 }
-.wm-app .app-accordion.panel > .panel-heading .panel-title .description {
+.wm-app .app-accordion.panel .panel-heading .panel-title .description {
   font-family: var(--wm-accordion-description-font-family);
   font-size: var(--wm-accordion-description-font-size);
   font-weight: var(--wm-accordion-description-font-weight);
@@ -478,12 +478,12 @@
   letter-spacing: var(--wm-accordion-description-letter-spacing);
   color: var(--wm-accordion-description-color);
 }
-.wm-app .app-accordion.panel > .panel-heading .panel-title .pull-left {
+.wm-app .app-accordion.panel .panel-heading .panel-title .pull-left {
   display: inline-flex;
   flex-direction: column;
 }
-.wm-app .app-accordion.panel > .panel-heading .panel-title .pull-left:empty,
-.wm-app .app-accordion.panel > .panel-heading .panel-title .pull-left:has(.panel-icon[hidden]) {
+.wm-app .app-accordion.panel .panel-heading .panel-title .pull-left:empty,
+.wm-app .app-accordion.panel .panel-heading .panel-title .pull-left:has(.panel-icon[hidden]) {
   display: none;
 }
 .wm-app .app-accordion.panel > .panel-content {
@@ -574,6 +574,13 @@
 .wm-app .app-anchor .anchor-caption:empty {
   display: none;
 }
+.wm-app a .badge,
+.wm-app .app-anchor .badge {
+  position: absolute;
+  right: -12px;
+  top: -12px;
+  z-index: 3;
+}
 .wm-app a [class="app-icon"],
 .wm-app .app-anchor [class="app-icon"],
 .wm-app a [class~="glyphicon"],
@@ -945,7 +952,7 @@
 }
 .wm-app .btn-transparent {
   --wm-btn-background: none;
-  --wm-btn-border-color: none;
+  --wm-btn-border-color: var(--wm-color-transparent);
   --wm-btn-state-layer-color: var(--wm-color-on-surface-variant);
 }
 .wm-app .btn,
@@ -960,7 +967,9 @@
   white-space: nowrap;
   color: var(--wm-btn-color);
   background: var(--wm-btn-background);
-  border: var(--wm-btn-border-width) var(--wm-btn-border-style) var(--wm-btn-border-color);
+  border-width: var(--wm-btn-border-width);
+  border-style: var(--wm-btn-border-style);
+  border-color: var(--wm-btn-border-color);
   border-radius: var(--wm-btn-radius);
   padding: var(--wm-btn-padding);
   min-width: var(--wm-btn-min-width);
@@ -1279,13 +1288,17 @@
 .wm-app .app-panel > .panel-content > .panel-help-message .panel-help-header,
 .wm-app .panel > .panel-content > .panel-help-message .panel-help-header {
   background: var(--wm-panel-help-message-header-background);
-  border: var(--wm-panel-help-message-border-width) var(--wm-panel-help-message-border-style) var(--wm-panel-help-message-border-color);
+  border-width: var(--wm-panel-help-message-border-width);
+  border-style: var(--wm-panel-help-message-border-style);
+  border-color: var(--wm-panel-help-message-border-color);
   padding: var(--wm-panel-help-message-padding);
 }
 .wm-app .app-panel > .panel-content > .panel-help-message .panel-help-content,
 .wm-app .panel > .panel-content > .panel-help-message .panel-help-content {
   padding: var(--wm-panel-help-message-padding);
-  border: var(--wm-panel-help-message-border-width) var(--wm-panel-help-message-border-style) var(--wm-panel-help-message-border-color);
+  border-width: var(--wm-panel-help-message-border-width);
+  border-style: var(--wm-panel-help-message-border-style);
+  border-color: var(--wm-panel-help-message-border-color);
   border-top: 0;
 }
 .wm-app .app-panel > .panel-footer,
@@ -1415,16 +1428,18 @@
 .wm-app .app-livelist.list-card:has(.app-horizontal-list) {
   overflow: unset;
 }
-.wm-app .app-card {
+.wm-app .app-card.app-panel {
   display: flex;
   flex-direction: column;
   width: 100%;
   background: var(--wm-card-background);
-  border: var(--wm-card-border-width) var(--wm-card-border-style) var(--wm-card-border-color);
+  border-width: var(--wm-card-border-width);
+  border-style: var(--wm-card-border-style);
+  border-color: var(--wm-card-border-color);
   border-radius: var(--wm-card-border-radius);
   box-shadow: var(--wm-card-shadow);
 }
-.wm-app .app-card:before {
+.wm-app .app-card.app-panel:before {
   content: "";
   position: absolute;
   top: 0;
@@ -1435,63 +1450,101 @@
   opacity: var(--wm-card-state-layer-opacity);
   border-radius: inherit;
 }
-.wm-app .app-card .app-card-header {
+.wm-app .app-card.app-panel .app-card-header {
   background: none;
 }
-.wm-app .app-card .app-card-header + .app-card-image {
+.wm-app .app-card.app-panel .app-card-header + .app-card-image {
   border-radius: var(--wm-radius-none);
 }
-.wm-app .app-card > .app-card-image {
+.wm-app .app-card.app-panel > .app-card-image {
   overflow: hidden;
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
-.wm-app .app-card > .app-card-image .app-picture {
+.wm-app .app-card.app-panel > .app-card-image .app-picture {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
 }
-.wm-app .app-card .app-card-content {
+.wm-app .app-card.app-panel .app-card-content {
   padding: var(--wm-card-body-padding);
   flex: 1;
 }
-.wm-app .app-card .app-card-footer {
+.wm-app .app-card.app-panel .app-card-footer {
   padding: var(--wm-card-footer-padding);
   border-top: var(--wm-card-footer-border-width) var(--wm-card-footer-border-style) var(--wm-card-footer-border-color);
 }
 /* Calendar component styles and tokens */
 :root {
-  --wm-calendar-view-shadow: var(--wm-elevation-shadow-1);
-  --wm-calendar-view-border-color: var(--wm-color-border-translucent);
-  --wm-calendar-view-border-style: var(--wm-border-style-base);
-  --wm-calendar-view-border-width: var(--wm-border-width-base);
-  --wm-calendar-view-radius: var(--wm-radius-md);
-  --wm-calendar-fc-header-vertical-padding: var(--wm-space-4);
-  --wm-calendar-fc-header-horizontal-padding: var(--wm-space-5);
-  --wm-calendar-fc-header-text-font-weight: var(--wm-font-weight-700);
-  --wm-calendar-fc-time-text-font-weight: var(--wm-font-weight-700);
-  --wm-calendar-fc-events-gap: var(--wm-space-1);
-  --wm-calendar-fc-daygrid-event-radius: var(--wm-radius-xs);
-  --wm-calendar-fc-v-event-main-color: var(--wm-color-primary);
-  --wm-calendar-fc-popover-radius: var(--wm-radius-sm);
-  --wm-calendar-fc-popover-heading-padding: var(--wm-space-2);
-  --wm-calendar-fc-popover-title-font-size: var(--wm-body-medium-font-size);
-  --wm-calendar-fc-popover-title-font-weight: var(--wm-font-weight-700);
-  --wm-calendar-fc-popover-title-font-family: var(--wm-body-medium-font-family);
-  --wm-calendar-fc-popover-title-line-height: var(--wm-body-medium-line-height);
-  --wm-calendar-fc-event-background: var(--wm-color-primary-fixed);
-  --wm-calendar-fc-event-color: var(--wm-color-surface-tint);
-  --wm-calendar-fc-event-dot-color: var(--wm-color-surface-tint);
-  --wm-calendar-fc-anchor-color: var(--wm-color-on-background);
+  --wm-calendar-shadow: var(--wm-elevation-shadow-1);
+  --wm-calendar-border-color: var(--wm-color-border-translucent);
+  --wm-calendar-border-style: var(--wm-border-style-base);
+  --wm-calendar-border-width: var(--wm-border-width-base);
+  --wm-calendar-radius: var(--wm-radius-md);
+  --wm-calendar-background: var(--wm-color-transparent);
+  --wm-calendar-toolbar-title-font-weight: var(--wm-font-weight-700);
+  --wm-calendar-toolbar-title-font-family: var(--wm-body-medium-font-family);
+  --wm-calendar-toolbar-title-font-size: var(--wm-body-medium-font-size);
+  --wm-calendar-toolbar-title-letter-spacing: var(--wm-body-medium-letter-spacing);
+  --wm-calendar-toolbar-title-line-height: var(--wm-body-medium-line-height);
+  --wm-calendar-button-background: var(--wm-color-on-surface-variant);
+  --wm-calendar-button-color: var(--wm-color-white);
+  --wm-calendar-button-border-color: var(--wm-color-border-translucent);
+  --wm-calendar-button-font-weight: var(--wm-body-small-font-weight);
+  --wm-calendar-button-font-family: var(--wm-body-small-font-family);
+  --wm-calendar-button-font-size: var(--wm-body-small-font-size);
+  --wm-calendar-button-letter-spacing: var(--wm-body-small-letter-spacing);
+  --wm-calendar-button-line-height: var(--wm-body-small-line-height);
+  --wm-calendar-button-border-width: var(--wm-border-width-1);
+  --wm-calendar-button-border-style: var(--wm-border-style-base);
+  --wm-calendar-button-border-radius: var(--wm-radius-xxs);
+  --wm-calendar-button-active-background: var(--wm-color-on-surface-variant);
+  --wm-calendar-button-active-border-color: var(--wm-color-on-surface-variant);
+  --wm-calendar-button-active-border-width: var(--wm-border-width-1);
+  --wm-calendar-button-active-border-style: var(--wm-border-style-base);
+  --wm-calendar-button-active-border-radius: var(--wm-radius-xxs);
+  --wm-calendar-button-active-color: var(--wm-color-white);
+  --wm-calendar-date-padding: var(--wm-space-1);
+  --wm-calendar-date-font-weight: var(--wm-body-small-font-weight);
+  --wm-calendar-date-font-family: var(--wm-body-small-font-family);
+  --wm-calendar-date-font-size: var(--wm-body-small-font-size);
+  --wm-calendar-date-color: var(--wm-color-on-background);
+  --wm-calendar-date-today-background: var(--wm-color-warning-container);
+  --wm-calendar-date-today-text-color: var(--wm-color-on-background);
+  --wm-calendar-toolbar-vertical-padding: var(--wm-space-4);
+  --wm-calendar-toolbar-horizontal-padding: var(--wm-space-5);
+  --wm-calendar-time-text-font-weight: var(--wm-font-weight-700);
+  --wm-calendar-events-gap: var(--wm-space-1);
+  --wm-calendar-daygrid-event-radius: var(--wm-radius-xs);
+  --wm-calendar-v-event-main-color: var(--wm-color-primary);
+  --wm-calendar-popover-radius: var(--wm-radius-sm);
+  --wm-calendar-popover-heading-padding: var(--wm-space-2);
+  --wm-calendar-popover-title-font-size: var(--wm-body-medium-font-size);
+  --wm-calendar-popover-title-font-weight: var(--wm-font-weight-700);
+  --wm-calendar-popover-title-font-family: var(--wm-body-medium-font-family);
+  --wm-calendar-popover-title-line-height: var(--wm-body-medium-line-height);
+  --wm-calendar-event-background: var(--wm-color-primary-fixed);
+  --wm-calendar-event-color: var(--wm-color-surface-tint);
+  --wm-calendar-event-dot-color: var(--wm-color-surface-tint);
+  --wm-calendar-header-font-weight: var(--wm-body-small-font-weight);
+  --wm-calendar-header-font-family: var(--wm-body-small-font-family);
+  --wm-calendar-header-font-size: var(--wm-body-small-font-size);
+  --wm-calendar-header-color: var(--wm-color-on-background);
+  --wm-calendar-header-background: var(--wm-color-transparent);
 }
 .wm-app .app-calendar {
-  border-radius: var(--wm-calendar-view-radius);
-  box-shadow: var(--wm-calendar-view-shadow);
+  border-radius: var(--wm-calendar-radius);
+  box-shadow: var(--wm-calendar-shadow);
   overflow: hidden;
+  background: var(--wm-calendar-background);
 }
 .wm-app .app-calendar .fc-toolbar-title {
-  font-weight: var(--wm-font-weight-700);
+  font-weight: var(--wm-calendar-toolbar-title-font-weight);
+  font-size: var(--wm-calendar-toolbar-title-font-size);
+  font-family: var(--wm-calendar-toolbar-title-font-family);
+  letter-spacing: var(--wm-calendar-toolbar-title-letter-spacing);
+  line-height: var(--wm-calendar-toolbar-title-line-height);
 }
 .wm-app .app-calendar .fc.fc-media-screen {
   flex: 1 1 auto;
@@ -1500,34 +1553,65 @@
   font-size: 1em;
 }
 .wm-app .app-calendar .fc .fc-col-header {
-  box-shadow: inset 0 -1px 0 var(--wm-calendar-view-border-color);
+  box-shadow: inset 0 -1px 0 var(--wm-calendar-border-color);
 }
 .wm-app .app-calendar .fc .fc-event {
-  background: var(--wm-calendar-fc-event-background);
+  background: var(--wm-calendar-event-background);
   width: 100%;
-  border-radius: var(--wm-calendar-fc-daygrid-event-radius);
+  border-radius: var(--wm-calendar-daygrid-event-radius);
   border: unset;
-  color: var(--wm-calendar-fc-event-color);
+  color: var(--wm-calendar-event-color);
 }
 .wm-app .app-calendar .fc-header-toolbar.fc-toolbar {
-  padding: var(--wm-calendar-fc-header-vertical-padding) var(--wm-calendar-fc-header-horizontal-padding);
+  padding: var(--wm-calendar-toolbar-vertical-padding) var(--wm-calendar-toolbar-horizontal-padding);
 }
 .wm-app .app-calendar .fc-timegrid-event-harness .fc-event {
   padding-block: unset;
   justify-content: start;
 }
 .wm-app .fc-theme-standard .fc-scrollgrid {
-  border: var(--wm-calendar-view-border-width) var(--wm-calendar-view-border-style) var(--wm-calendar-view-border-color);
+  border-width: var(--wm-calendar-border-width);
+  border-style: var(--wm-calendar-border-style);
+  border-color: var(--wm-calendar-border-color);
   border-left-width: 0;
   border-bottom-width: 0;
   border-right-width: 0;
 }
 .wm-app .fc-theme-standard td,
 .wm-app .fc-theme-standard th {
-  border: var(--wm-calendar-view-border-width) var(--wm-calendar-view-border-style) var(--wm-calendar-view-border-color);
+  border-width: var(--wm-calendar-border-width);
+  border-style: var(--wm-calendar-border-style);
+  border-color: var(--wm-calendar-border-color);
 }
 .wm-app .fc-theme-standard a {
-  color: var(--wm-calendar-fc-anchor-color);
+  color: var(--wm-calendar-date-color);
+}
+.wm-app .fc .fc-button-primary {
+  --fc-button-text-color: var(--wm-calendar-button-color);
+  --fc-button-bg-color: var(--wm-calendar-button-background);
+  --fc-button-border-color: var(--wm-calendar-button-border-color);
+  font-weight: var(--wm-calendar-button-font-weight);
+  font-size: var(--wm-calendar-button-font-size);
+  font-family: var(--wm-calendar-button-font-family);
+  letter-spacing: var(--wm-calendar-button-letter-spacing);
+  line-height: var(--wm-calendar-button-line-height);
+  border-radius: var(--wm-calendar-button-border-radius);
+  border-width: var(--wm-calendar-button-border-width);
+  border-style: var(--wm-calendar-button-border-style);
+}
+.wm-app .fc .fc-button-primary:not(:disabled).fc-button-active {
+  --fc-button-active-bg-color: var(--wm-calendar-button-active-background);
+  --fc-button-active-border-color: var(--wm-calendar-button-active-border-color);
+  border-radius: var(--wm-calendar-button-active-border-radius);
+  border-style: var(--wm-calendar-button-active-border-style);
+  border-width: var(--wm-calendar-button-active-border-width);
+  color: var(--wm-calendar-button-active-color);
+}
+.wm-app .fc .fc-day-today {
+  --fc-today-bg-color: var(--wm-calendar-date-today-background);
+}
+.wm-app .fc .fc-day-today .fc-daygrid-day-number {
+  color: var(--wm-calendar-date-today-text-color);
 }
 .wm-app .fc .fc-scrollgrid-section-body table,
 .wm-app .fc .fc-scrollgrid-section-footer table {
@@ -1538,10 +1622,15 @@
 }
 .wm-app .fc .fc-col-header th {
   border-color: transparent;
+  background: var(--wm-calendar-header-background);
 }
 .wm-app .fc .fc-col-header-cell-cushion {
-  font-weight: var(--wm-calendar-fc-header-text-font-weight);
-  color: var(--wm-calendar-fc-anchor-color);
+  font-weight: var(--wm-calendar-header-font-weight);
+  color: var(--wm-calendar-header-color);
+  font-size: var(--wm-calendar-header-font-size);
+  font-family: var(--wm-calendar-header-font-family);
+  letter-spacing: var(--wm-calendar-header-letter-spacing);
+  line-height: var(--wm-calendar-header-line-height);
 }
 .wm-app .fc .fc-daygrid-event .fc-event-title {
   overflow: hidden;
@@ -1553,7 +1642,7 @@
   overflow: unset;
 }
 .wm-app .fc .fc-event .fc-event-main {
-  color: var(--wm-calendar-fc-v-event-main-color);
+  color: var(--wm-calendar-v-event-main-color);
 }
 .wm-app .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
   display: flex;
@@ -1561,27 +1650,27 @@
   align-items: center;
   width: 100%;
   padding: 0 var(--wm-space-1);
-  gap: var(--wm-calendar-fc-events-gap);
+  gap: var(--wm-calendar-events-gap);
 }
 .wm-app .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events .fc-daygrid-event-harness {
   width: 100%;
 }
 .wm-app .fc .fc-more-popover {
-  border-radius: var(--wm-calendar-fc-popover-radius);
+  border-radius: var(--wm-calendar-popover-radius);
 }
 .wm-app .fc .fc-more-popover .fc-popover-header {
-  padding: var(--wm-calendar-fc-popover-heading-padding);
+  padding: var(--wm-calendar-popover-heading-padding);
 }
 .wm-app .fc .fc-more-popover .fc-popover-header .fc-popover-title {
-  font-size: var(--wm-calendar-fc-popover-title-font-size);
-  font-weight: var(--wm-calendar-fc-popover-title-font-weight);
-  font-family: var(--wm-calendar-fc-popover-title-font-family);
-  line-height: var(--wm-calendar-fc-popover-title-line-height);
+  font-size: var(--wm-calendar-popover-title-font-size);
+  font-weight: var(--wm-calendar-popover-title-font-weight);
+  font-family: var(--wm-calendar-popover-title-font-family);
+  line-height: var(--wm-calendar-popover-title-line-height);
 }
 .wm-app .fc .fc-more-popover .fc-popover-body {
   display: inline-flex;
   flex-direction: column;
-  gap: var(--wm-calendar-fc-events-gap);
+  gap: var(--wm-calendar-events-gap);
   padding: var(--wm-space-2);
   position: relative;
   top: calc(var(--wm-space-1) * -1);
@@ -1593,8 +1682,14 @@
 .wm-app .fc .fc-daygrid-day .fc-daygrid-event.fc-daygrid-dot-event {
   justify-content: flex-start;
 }
+.wm-app .fc .fc-daygrid-day-number {
+  padding: var(--wm-calendar-date-padding);
+  font-size: var(--wm-calendar-date-font-size);
+  font-family: var(--wm-calendar-date-font-family);
+  font-weight: var(--wm-calendar-date-font-weight);
+}
 .wm-app .fc-daygrid-event-dot {
-  border-color: var(--wm-calendar-fc-event-dot-color);
+  border-color: var(--wm-calendar-event-dot-color);
 }
 .wm-app .fc-direction-ltr .fc-daygrid-event.fc-event-end,
 .wm-app .fc-direction-rtl .fc-daygrid-event.fc-event-start {
@@ -1607,7 +1702,7 @@
   border-radius: var(--wm-radius-xs);
 }
 .wm-app .fc-timegrid-event.fc-event .fc-event-time {
-  font-weight: var(--wm-calendar-fc-time-text-font-weight);
+  font-weight: var(--wm-calendar-time-text-font-weight);
 }
 /* Carousel component styles and tokens */
 :root {
@@ -1632,6 +1727,7 @@
 .wm-app .app-carousel {
   position: relative;
   overflow: hidden;
+  flex: 1;
 }
 .wm-app .app-carousel .carousel {
   height: 100%;
@@ -1733,7 +1829,9 @@
   height: var(--wm-carousel-indicators-size);
   margin: var(--wm-carousel-indicators-margin);
   text-indent: -999px;
-  border: var(--wm-carousel-indicators-border-width) var(--wm-carousel-indicators-border-style) var(--wm-carousel-indicators-border) !important;
+  border-width: var(--wm-carousel-indicators-border-width);
+  border-style: var(--wm-carousel-indicators-border-style);
+  border-color: var(--wm-carousel-indicators-border);
   border-radius: var(--wm-carousel-indicators-radius);
   cursor: pointer;
   background-color: var(--wm-carousel-indicators-background);
@@ -1769,6 +1867,7 @@
 /* Checkox component styles and tokens */
 :root {
   --wm-checkbox-gap: var(--wm-space-1);
+  --wm-checkbox-caption-color: inherit;
   --wm-checkbox-caption-font-size: var(--wm-body-large-font-size);
   --wm-checkbox-caption-font-family: var(--wm-body-large-font-family);
   --wm-checkbox-caption-font-weight: var(--wm-body-large-font-weight);
@@ -1809,13 +1908,14 @@
 .wm-app .app-checkbox.checkbox > label {
   padding: var(--wm-space-0);
   display: inline-flex;
-  width: auto;
+  width: 100%;
   min-height: var(--wm-checkbox-state-layer-size);
   font-size: var(--wm-checkbox-caption-font-size);
   font-family: var(--wm-checkbox-caption-font-family);
   font-weight: var(--wm-checkbox-caption-font-weight);
   line-height: var(--wm-checkbox-caption-line-height);
   letter-spacing: var(--wm-checkbox-caption-letter-spacing);
+  color: var(--wm-checkbox-caption-color);
   cursor: pointer;
 }
 .wm-app .app-checkbox.checkbox > label > input[type="checkbox"] {
@@ -1840,6 +1940,9 @@
   display: inline-block;
   padding-left: calc(var(--wm-checkbox-state-layer-size) + var(--wm-checkbox-gap));
   padding-top: calc(calc(var(--wm-checkbox-state-layer-size) - var(--wm-checkbox-caption-line-height)) / 2);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 .wm-app .app-checkbox.checkbox > label .caption:before,
 .wm-app .app-checkbox.checkbox > label .caption:after {
@@ -1853,7 +1956,9 @@
   left: calc(calc(var(--wm-checkbox-state-layer-size) - var(--wm-checkbox-size))/2);
   top: calc(calc(var(--wm-checkbox-state-layer-size) - var(--wm-checkbox-size))/2);
   background: var(--wm-checkbox-background);
-  border: var(--wm-checkbox-border-width) solid var(--wm-checkbox-border-color);
+  border-width: var(--wm-checkbox-border-width);
+  border-style: solid;
+  border-color: var(--wm-checkbox-border-color);
   border-radius: var(--wm-checkbox-border-radius);
   box-sizing: border-box;
 }
@@ -1883,7 +1988,6 @@
 .wm-app .app-checkboxset.list-group {
   display: flex;
   flex-wrap: nowrap;
-  column-gap: var(--wm-checkboxset-item-gap);
   row-gap: calc(var(--wm-checkboxset-item-gap) * 0.25);
   overflow: visible;
 }
@@ -1893,9 +1997,6 @@
 .wm-app .app-checkboxset.list-group.inline {
   flex-wrap: wrap;
 }
-.wm-app .app-checkboxset.list-group.inline > li {
-  width: auto;
-}
 .wm-app .app-checkboxset.list-group.inline > li + li {
   margin: 0;
 }
@@ -2002,7 +2103,9 @@
   gap: var(--wm-chips-list-gap);
   padding: calc(var(--wm-chips-list-padding) * 0.5) var(--wm-chips-list-padding);
   background: var(--wm-chips-list-background);
-  border: var(--wm-chips-list-border-width) var(--wm-chips-list-border-style) var(--wm-chips-list-border-color);
+  border-width: var(--wm-chips-list-border-width);
+  border-style: var(--wm-chips-list-border-style);
+  border-color: var(--wm-chips-list-border-color);
   border-radius: var(--wm-chips-list-border-radius);
   min-height: var(--wm-chips-list-height);
   opacity: var(--wm-chips-opacity);
@@ -2043,7 +2146,9 @@
   color: var(--wm-chips-color);
   background: var(--wm-chips-background);
   border-radius: var(--wm-chips-item-border-radius);
-  border: var(--wm-chips-border-width) var(--wm-chips-item-border-style) var(--wm-chips-item-border-color);
+  border-width: var(--wm-chips-border-width);
+  border-style: var(--wm-chips-item-border-style);
+  border-color: var(--wm-chips-item-border-color);
   font-family: var(--wm-chips-item-font-family);
   font-weight: var(--wm-chips-item-font-weight);
   font-size: var(--wm-chips-item-font-size);
@@ -2157,7 +2262,9 @@
 .wm-app .app-container {
   position: relative;
   background: var(--wm-container-background);
-  border: var(--wm-container-border-width) var(--wm-container-border-style) var(--wm-container-border-color);
+  border-width: var(--wm-container-border-width);
+  border-style: var(--wm-container-border-style);
+  border-color: var(--wm-container-border-color);
   border-radius: var(--wm-container-border-radius);
   box-shadow: var(--wm-container-shadow);
 }
@@ -2166,6 +2273,7 @@
   --wm-form-group-gap: var(--wm-space-0);
   --wm-form-form-width: 1240px;
   --wm-form-form-min-width: 320px;
+  --wm-form-field-padding: var(--wm-space-2);
   --wm-form-control-color: var(--wm-color-on-surface);
   --wm-form-control-color-place-holder: var(--wm-color-outline);
   --wm-form-control-background: var(--wm-color-surface);
@@ -2189,6 +2297,7 @@
   --wm-form-caption-color: var(--wm-color-on-surface-variant);
   --wm-form-caption-margin: var(--wm-space-0);
   --wm-form-caption-padding: var(--wm-space-0);
+  --wm-form-caption-display: inline-block;
   --wm-form-caption-gap: calc(var(--wm-space-1) * 0.5);
   --wm-form-required-content: "*";
   --wm-form-required-color: var(--wm-color-error);
@@ -2200,7 +2309,7 @@
   --wm-form-help-block-font-weight: var(--wm-body-small-font-weight);
   --wm-form-help-block-line-height: var(--wm-body-small-line-height);
   --wm-form-help-block-letter-spacing: var(--wm-body-small-letter-spacing);
-  --wm-form-input-group-btn-width: var(--wm-space-10);
+  --wm-form-input-group-btn-width: var(--wm-space-7);
   --wm-form-input-group-btn-height: var(--wm-space-10);
   --wm-form-input-group-btn-font-size: var(--wm-icon-size-md);
   --wm-form-input-group-btn-border-radius: var(--wm-radius-sm);
@@ -2221,8 +2330,10 @@
   --wm-form-caption-font-weight: var(--wm-body-large-font-weight);
 }
 .wm-app .app-composite-widget:has(.form-control.ng-touched.ng-invalid),
+.wm-app .app-composite-widget:has(.input-group.ng-touched.ng-invalid),
 .wm-app .app-composite-widget .form-control.ng-touched.ng-invalid,
-.wm-app .app-composite-widget .form-group .ng-touched.ng-invalid .form-control {
+.wm-app .app-composite-widget.form-group .ng-touched.ng-invalid .form-control,
+.wm-app .app-composite-widget:has(.control-label.text-danger) {
   --wm-form-control-border-color: var(--wm-color-error);
   --wm-form-caption-color: var(--wm-color-error);
   --wm-form-caption-font-weight: var(--wm-body-large-font-weight);
@@ -2294,7 +2405,7 @@
   position: absolute;
   left: calc(var(--wm-form-control-padding) + var(--wm-form-control-border-width));
   top: calc(calc(var(--wm-form-control-height) * 0.5) - calc(var(--wm-form-control-font-size) * 0.65) - var(--wm-form-control-border-width));
-  z-index: 1;
+  z-index: 2;
   padding: 0;
   opacity: 1;
   background: none;
@@ -2304,6 +2415,9 @@
 .wm-app .app-composite-widget.caption-floating .control-label + div {
   width: 100%;
 }
+.wm-app .app-composite-widget.caption-floating:has(.btn-leading-icon:not(.ng-hide)) > .control-label {
+  left: calc(var(--wm-form-control-padding) + var(--wm-form-control-border-width) + var(--wm-icon-font-size));
+}
 .wm-app .app-composite-widget.caption-floating.float-active .control-label {
   padding: 2px 4px;
   top: -10px;
@@ -2345,7 +2459,7 @@
   color: var(--wm-form-caption-color);
   margin: var(--wm-form-caption-margin);
   padding: var(--wm-form-caption-padding);
-  display: inline-block;
+  display: var(--wm-form-caption-display);
   transition: all 0.2s ease-in-out;
   gap: var(--wm-form-caption-gap);
 }
@@ -2380,6 +2494,32 @@
 .wm-app .form-control[multiple] {
   height: calc(var(--wm-form-control-height) + var(--wm-form-control-line-height) + 2px);
 }
+.wm-app .btn-leading-icon,
+.wm-app .btn-trailing-icon {
+  padding: 0;
+  background: none;
+  border: none;
+  min-height: auto;
+  position: absolute;
+  z-index: 100;
+  top: calc(var(--wm-form-control-height) / 3);
+  left: calc(var(--wm-form-control-padding) / 2);
+}
+.wm-app .btn-trailing-icon {
+  left: auto;
+  right: calc(var(--wm-form-control-padding) / 2);
+}
+.wm-app .supporting-text {
+  width: 100%;
+  margin-top: 4px;
+  padding: 0 var(--wm-form-control-padding);
+}
+.wm-app .with-leading-icon {
+  padding-left: calc(calc(var(--wm-form-control-padding)*1.3) + var(--wm-icon-font-size));
+}
+.wm-app .with-trailing-icon {
+  padding-right: calc(calc(var(--wm-form-control-padding)*1.3) + var(--wm-icon-font-size));
+}
 .wm-app .app-input-wrapper {
   display: flex;
   flex-direction: column;
@@ -2771,11 +2911,15 @@
   --wm-data-table-sort-icon-color: var(--wm-color-on-background);
   --wm-data-table-layout: fixed;
 }
-.wm-app .app-grid .table tbody tr:hover {
+.wm-app .app-grid .table > tbody > tr:hover {
   --wm-data-table-body-row-background-even: var(--wm-color-surface-variant);
   --wm-data-table-body-row-background-odd: var(--wm-color-surface-variant);
 }
-.wm-app .app-grid .table tbody tr.active {
+.wm-app .app-grid .table > tbody > tr.active {
+  --wm-data-table-body-row-background-even: var(--wm-color-surface-container-lowest);
+  --wm-data-table-body-row-background-odd: var(--wm-color-surface-container-lowest);
+}
+.wm-app .app-grid .table tbody tr td.selected-column {
   --wm-data-table-body-row-background-even: var(--wm-color-surface-container-lowest);
   --wm-data-table-body-row-background-odd: var(--wm-color-surface-container-lowest);
 }
@@ -2944,6 +3088,7 @@
 }
 .wm-app .app-grid .table > thead tr th > .input-group {
   width: 100%;
+  overflow: hidden;
 }
 .wm-app .app-grid .table > thead tr th > .input-group .input-group-btn {
   right: calc(var(--wm-form-input-group-btn-width) + var(--wm-space-0));
@@ -2959,12 +3104,14 @@
 }
 .wm-app .app-grid .table > thead tr th > .input-group.date .form-control,
 .wm-app .app-grid .table > thead tr th > .input-group.time .form-control {
-  padding-right: calc((var(--wm-form-input-group-btn-width)*2.5) + var(--wm-form-control-padding));
+  padding-right: calc((var(--wm-form-input-group-btn-width)*1.5) + var(--wm-form-control-padding));
   text-overflow: ellipsis;
+  padding-left: 2px;
 }
 .wm-app .app-grid .table > thead tr th > .input-group.datetime .form-control {
-  padding-right: calc((var(--wm-form-input-group-btn-width)*3.5) + var(--wm-form-control-padding));
+  padding-right: calc((var(--wm-form-input-group-btn-width)*2.5) + var(--wm-form-control-padding));
   text-overflow: ellipsis;
+  padding-left: 2px;
 }
 .wm-app .app-grid .table > thead tr th > .input-group .input-group {
   width: 100%;
@@ -3041,14 +3188,14 @@
   border: none;
 }
 .wm-app .app-grid .panel-footer:has(.app-datagrid-actions) {
-  display: flex;
-  justify-content: space-between;
+  display: table;
+  width: 100%;
+  border-collapse: initial;
 }
-.wm-app .app-grid[multiselect="true"] .table tr th:first-child,
-.wm-app .app-grid[radioselect="true"] .table tr th:first-child,
-.wm-app .app-grid[multiselect="true"] .table tr td:first-child,
-.wm-app .app-grid[radioselect="true"] .table tr td:first-child {
-  padding: 0;
+.wm-app .app-grid .panel-footer:has(.app-datagrid-actions) .app-datagrid-actions {
+  text-align: right;
+  display: table-cell;
+  vertical-align: top;
 }
 .wm-app .app-grid[multiselect="true"] .table tr th:first-child > .app-checkbox,
 .wm-app .app-grid[radioselect="true"] .table tr th:first-child > .app-checkbox,
@@ -3081,6 +3228,7 @@
 .wm-app .app-grid[multiselect="true"] .table tr td:first-child > .app-radio > label .caption,
 .wm-app .app-grid[radioselect="true"] .table tr td:first-child > .app-radio > label .caption {
   padding: unset;
+  overflow: visible;
 }
 /* date component styles and tokens */
 :root {
@@ -3212,7 +3360,9 @@
   height: var(--wm-datepicker-date-height);
   color: var(--wm-datepicker-date-color);
   background: var(--wm-datepicker-date-background);
-  border: var(--wm-datepicker-date-border-width) var(--wm-datepicker-date-border-style) var(--wm-datepicker-date-border-color);
+  border-width: var(--wm-datepicker-date-border-width);
+  border-style: var(--wm-datepicker-date-border-style);
+  border-color: var(--wm-datepicker-date-border-color);
   border-radius: var(--wm-datepicker-date-border-radius);
   font-family: var(--wm-datepicker-date-font-family);
   font-size: var(--wm-datepicker-date-font-size);
@@ -3321,7 +3471,9 @@
   padding: var(--wm-timepicker-btn-padding);
   border-radius: var(--wm-timepicker-btn-border-radius);
   background: var(--wm-timepicker-period-selector-background);
-  border: var(--wm-timepicker-btn-border-width) var(--wm-timepicker-btn-border-style) var(--wm-timepicker-btn-border-color);
+  border-width: var(--wm-timepicker-btn-border-width);
+  border-style: var(--wm-timepicker-btn-border-style);
+  border-color: var(--wm-timepicker-btn-border-color);
   color: var(--wm-timepicker-period-selector-color);
 }
 .wm-app .app-datetime tbody .btn:has(.bs-chevron) {
@@ -3392,7 +3544,9 @@
 .wm-app .app-fileupload .file-upload .file-upload-status {
   padding: var(--wm-file-upload-status-padding);
   background: var(--wm-file-upload-status-background);
-  border: var(--wm-file-upload-status-border-width) var(--wm-file-upload-status-border-style) var(--wm-file-upload-status-border-color);
+  border-width: var(--wm-file-upload-status-border-width);
+  border-style: var(--wm-file-upload-status-border-style);
+  border-color: var(--wm-file-upload-status-border-color);
   border-radius: var(--wm-file-upload-status-radius);
   margin-bottom: var(--wm-file-upload-status-bottom-space);
 }
@@ -3452,7 +3606,9 @@
   margin-bottom: var(--wm-file-upload-drop-box-bottom-space);
 }
 .wm-app .app-fileupload .app-multi-file-upload .drop-box {
-  border: var(--wm-file-upload-status-border-width) dashed var(--wm-file-upload-status-border-color);
+  border-width: var(--wm-file-upload-status-border-width);
+  border-style: dashed;
+  border-color: var(--wm-file-upload-status-border-color);
   background: var(--wm-file-upload-drop-box-background);
   cursor: pointer;
   height: auto;
@@ -3687,7 +3843,7 @@
   --wm-aside-left-nav-submenu-item-opacity: var(--wm-opacity-hover);
 }
 .wm-app .app-left-panel .app-nav-item:has(:active),
-.wm-app .app-left-panel.app-left-panel .app-nav-item:has(.active),
+.wm-app .app-left-panel .app-nav-item:has(.active),
 .wm-app .app-left-panel .app-nav-item.active {
   --wm-aside-left-nav-item-background: linear-gradient(105.79deg, color-mix(in srgb, var(--wm-color-secondary), transparent calc(100% - var(--wm-opacity-hover))) 44.21%, color-mix(in srgb, var(--wm-color-white), transparent calc(100% - var(--wm-opacity-hover))) 103.73%);
   --wm-aside-left-nav-item-color: var(--wm-color-secondary);
@@ -4075,19 +4231,19 @@
   --wm-aside-right-nav-submenu-item-background: var(--wm-color-secondary-container);
   --wm-aside-right-nav-submenu-item-color: var(--wm-color-inherit);
 }
-.wm-app:has(.app-right-panel.app-nav-drawer.app-nav-full) {
+.wm-app:has(.app-right-panel.app-nav-drawer) {
   --wm-aside-right-nav-width: 220px;
 }
-.wm-app:has(.app-right-panel.app-nav-rail.app-nav-full) {
+.wm-app:has(.app-right-panel.app-nav-rail) {
   --wm-aside-right-nav-width: 102px;
   --wm-aside-right-nav-submenu-box-shadow: var(--wm-elevation-shadow-1);
   --wm-aside-right-nav-submenu-radius: var(--wm-radius-none) var(--wm-radius-sm) var(--wm-radius-sm) var(--wm-radius-none);
   --wm-aside-right-nav-item-anchor-display: block;
 }
-.wm-app:has(.app-right-panel.app-nav-drawer.app-nav-clipped) {
+.wm-app:has(.app-right-panel.app-nav-drawer) {
   --wm-aside-right-nav-width: 220px;
 }
-.wm-app:has(.app-right-panel.app-nav-rail.app-nav-clipped) {
+.wm-app:has(.app-right-panel.app-nav-rail) {
   --wm-aside-right-nav-width: 102px;
   --wm-aside-right-nav-submenu-box-shadow: var(--wm-elevation-shadow-1);
   --wm-aside-right-nav-submenu-radius: var(--wm-radius-none) var(--wm-radius-sm) var(--wm-radius-sm) var(--wm-radius-none);
@@ -4582,7 +4738,7 @@
   line-height: var(--wm-label-line-height);
   letter-spacing: var(--wm-label-letter-spacing);
   color: var(--wm-label-color);
-  background-color: var(--wm-label-background-color);
+  background: var(--wm-label-background-color);
 }
 .wm-app p,
 .wm-app .app-label.p,
@@ -4809,7 +4965,9 @@
   align-items: center;
   gap: var(--wm-message-container-gap);
   padding: var(--wm-message-container-padding);
-  border: var(--wm-message-container-border-width) var(--wm-message-container-border-style) var(--wm-message-container-border-color);
+  border-width: var(--wm-message-container-border-width);
+  border-style: var(--wm-message-container-border-style);
+  border-color: var(--wm-message-container-border-color);
   border-radius: var(--wm-message-container-border-radius);
   background: var(--wm-message-container-background);
   color: var(--wm-message-container-color);
@@ -4921,29 +5079,50 @@
 .wm-app .app-right-panel.hidden {
   --wm-aside-right-nav-width: 0;
 }
-.wm-app:has(.app-left-panel.app-nav-clipped):has(.app-right-panel.app-nav-clipped) .app-page-content {
+.wm-app:has(.app-left-panel.app-nav-clipped):has(.app-right-panel) .app-page-content {
+  width: calc(100% - var(--wm-aside-left-nav-width) - var(--wm-aside-right-nav-width));
+}
+.wm-app:has(.app-left-panel.app-nav-clipped):not(:has(.app-right-panel)) .app-page-content {
+  width: calc(100% - var(--wm-aside-left-nav-width));
+}
+.wm-app:has(.app-right-panel):not(:has(.app-left-panel.app-nav-clipped)) .app-page-content {
+  width: calc(100% - var(--wm-aside-right-nav-width));
+}
+.wm-app:not(:has(.app-left-panel.app-nav-clipped)):not(:has(.app-right-panel)) .app-page-content {
+  width: 100%;
+}
+.wm-app:has(.app-left-panel.app-nav-full):has(.app-right-panel) .app-content {
   width: calc(100% - var(--wm-aside-left-nav-width) - var(--wm-aside-right-nav-width));
 }
-.wm-app:has(.app-left-panel.app-nav-clipped):not(:has(.app-right-panel.app-nav-clipped)) .app-page-content {
+.wm-app:has(.app-left-panel.app-nav-full):not(:has(.app-right-panel)) .app-content {
   width: calc(100% - var(--wm-aside-left-nav-width));
 }
-.wm-app:has(.app-right-panel.app-nav-clipped):not(:has(.app-left-panel.app-nav-clipped)) .app-page-content {
+.wm-app:has(.app-right-panel):not(:has(.app-left-panel.app-nav-full)) .app-content {
   width: calc(100% - var(--wm-aside-right-nav-width));
 }
-.wm-app:not(:has(.app-left-panel.app-nav-clipped)):not(:has(.app-right-panel.app-nav-clipped)) .app-page-content {
+.wm-app:not(:has(.app-left-panel.app-nav-full)):not(:has(.app-right-panel)) .app-content {
+  width: 100%;
+}
+.wm-app .app-content-column-wrapper {
+  height: -webkit-fill-available;
+}
+.wm-app:not(:has(.app-left-panel.app-nav-full)):not(:has(.app-right-panel)) .app-content-column-wrapper,
+.wm-app:not(:has(.app-left-panel.app-nav-clipped)):not(:has(.app-right-panel)) .app-content-column-wrapper,
+.wm-app:not(:has(.app-left-panel.app-nav-clipped)):not(:has(.app-right-panel)) .app-content-column-wrapper {
   width: 100%;
 }
-.wm-app:has(.app-left-panel.app-nav-full):has(.app-right-panel.app-nav-full) .app-content {
+.wm-app:has(.app-left-panel.app-nav-clipped):has(.app-right-panel) .app-content-column-wrapper {
   width: calc(100% - var(--wm-aside-left-nav-width) - var(--wm-aside-right-nav-width));
 }
-.wm-app:has(.app-left-panel.app-nav-full):not(:has(.app-right-panel.app-nav-full)) .app-content {
+.wm-app:has(.app-left-panel.app-nav-clipped):not(:has(.app-right-panel)) .app-content-column-wrapper {
   width: calc(100% - var(--wm-aside-left-nav-width));
 }
-.wm-app:has(.app-right-panel.app-nav-full):not(:has(.app-left-panel.app-nav-full)) .app-content {
+.wm-app:has(.app-right-panel):not(:has(.app-left-panel.app-nav-full)) .app-content-column-wrapper {
   width: calc(100% - var(--wm-aside-right-nav-width));
 }
-.wm-app:not(:has(.app-left-panel.app-nav-full)):not(:has(.app-right-panel.app-nav-full)) .app-content {
+.wm-app .app-content .app-content-column-wrapper .app-page-content.app-content-column {
   width: 100%;
+  height: 100%;
 }
 .wm-app .app-partial {
   position: relative;
@@ -5032,8 +5211,13 @@
   height: 100%;
   z-index: var(--wm-modal-backdrop-z-index);
   background: color-mix(in srgb, var(--wm-modal-backdrop-background), transparent calc(100% - var(--wm-modal-backdrop-opacity)));
+}
+.wm-app .modal-backdrop.fade {
   opacity: 0;
 }
+.wm-app .modal-backdrop.fade.in {
+  opacity: 1;
+}
 .wm-app .modal {
   position: fixed;
   inset: 0;
@@ -5050,7 +5234,11 @@
   opacity: 1;
   display: flex !important;
 }
-.wm-app .modal-dialog {
+.wm-app .dialog-view {
+  background: color-mix(in srgb, var(--wm-modal-backdrop-background), transparent calc(100% - var(--wm-modal-backdrop-opacity)));
+}
+.wm-app .modal .modal-dialog,
+.wm-app .dialog-view .modal-dialog {
   position: fixed;
   inset: 0;
   width: 100%;
@@ -5058,16 +5246,15 @@
   display: flex;
   justify-content: var(--wm-modal-justify-content);
   align-items: var(--wm-modal-align-items);
-  background: color-mix(in srgb, var(--wm-modal-backdrop-background), transparent calc(100% - var(--wm-modal-backdrop-opacity)));
   padding: var(--wm-modal-margin);
-  margin: var(--wm-space-0);
   pointer-events: none;
+  margin: auto;
 }
 .wm-app .modal-dialog .modal-content {
   display: flex;
   flex-direction: column;
   width: var(--wm-modal-width);
-  height: var(--wm-modal-height);
+  height: fit-content;
   max-width: 100%;
   max-height: 100%;
   background: var(--wm-modal-background);
@@ -5101,7 +5288,7 @@
   padding-top: var(--wm-space-0);
 }
 .wm-app .modal-dialog .modal-content .modal-body {
-  height: 100%;
+  height: var(--wm-modal-height);
   padding: var(--wm-modal-body-padding);
   overflow: auto;
 }
@@ -5347,7 +5534,9 @@
   position: relative;
   background: var(--wm-pagination-page-link-background);
   color: var(--wm-pagination-page-link-color);
-  border: var(--wm-pagination-page-link-border-width) var(--wm-pagination-page-link-border-style) var(--wm-pagination-page-link-border-color);
+  border-width: var(--wm-pagination-page-link-border-width);
+  border-style: var(--wm-pagination-page-link-border-style);
+  border-color: var(--wm-pagination-page-link-border-color);
   border-radius: var(--wm-pagination-page-link-radius);
   padding: var(--wm-pagination-page-link-padding);
   min-width: var(--wm-pagination-page-link-min-width);
@@ -5492,7 +5681,9 @@
   border-radius: var(--wm-picture-radius);
   padding: var(--wm-picture-padding);
   background: var(--wm-picture-background);
-  border: var(--wm-picture-border-width) var(--wm-picture-border-style) var(--wm-picture-border-color);
+  border-width: var(--wm-picture-border-width);
+  border-style: var(--wm-picture-border-style);
+  border-color: var(--wm-picture-border-color);
 }
 .wm-app .app-picture.img-circle {
   aspect-ratio: 1;
@@ -5598,6 +5789,11 @@
   --wm-progress-circle-stroke-inactive: var(--wm-color-primary-container);
   --wm-progress-circle-stroke-active: var(--wm-color-primary);
   --wm-progress-circle-label-color: var(--wm-color-primary);
+  --wm-progress-circle-label-font-size: var(--wm-h4-font-size);
+  --wm-progress-circle-label-font-family: var(--wm-body-medium-font-family);
+  --wm-progress-circle-label-font-weight: var(--wm-body-medium-font-weight);
+  --wm-progress-circle-label-line-height: var(--wm-body-medium-line-height);
+  --wm-progress-circle-label-letter-spacing: var(--wm-body-medium-letter-spacing);
 }
 .wm-app .app-progress.circle.progress-circle-default {
   --wm-progress-circle-stroke-inactive: var(--wm-color-primary-container);
@@ -5633,11 +5829,14 @@
   display: none;
 }
 .wm-app .app-progress.circle svg text tspan {
-  font-size: 1.5em;
   fill: var(--wm-progress-circle-label-color);
+  font-size: var(--wm-progress-circle-label-font-size);
+  font-weight: var(--wm-progress-circle-label-font-weight);
+  line-height: var(--wm-progress-circle-label-line-height);
+  font-family: var(--wm-progress-circle-label-font-family);
+  letter-spacing: var(--wm-progress-circle-label-letter-spacing);
 }
 .wm-app .app-progress.circle svg text tspan + tspan {
-  font-size: 1em;
   opacity: 0.75;
 }
 .wm-app .app-progress.circle svg circle {
@@ -5648,8 +5847,6 @@
 }
 /* popover component styles and tokens */
 :root {
-  --wm-popover-min-width: 50px;
-  --wm-popover-min-height: 50px;
   --wm-popover-z-index: 1060;
   --wm-popover-gap: calc(var(--wm-space-1) * 2.5);
   --wm-popover-margin: var(--wm-space-1);
@@ -5658,6 +5855,9 @@
   --wm-popover-color: var(--wm-color-on-surface);
   --wm-popover-shadow: var(--wm-elevation-shadow-1);
   --wm-popover-radius: var(--wm-radius-sm);
+  --wm-popover-border-color: var(--wm-color-transparent);
+  --wm-popover-border-width: var(--wm-border-width-0);
+  --wm-popover-border-style: none;
   --wm-popover-header-padding: var(--wm-space-4);
   --wm-popover-header-color: var(--wm-color-on-surface);
   --wm-popover-header-font-family: var(--wm-h4-font-family);
@@ -5684,8 +5884,6 @@
   position: absolute;
   inset: auto;
   z-index: var(--wm-popover-z-index);
-  min-width: var(--wm-popover-min-width);
-  min-height: var(--wm-popover-min-height);
   margin: var(--wm-popover-margin);
   padding: var(--wm-popover-padding);
   background: var(--wm-popover-background);
@@ -5694,6 +5892,9 @@
   box-shadow: var(--wm-popover-shadow);
   border-radius: var(--wm-popover-radius);
   display: none;
+  border-width: var(--wm-popover-border-width);
+  border-color: var(--wm-popover-border-color);
+  border-style: var(--wm-popover-border-style);
 }
 .wm-app .app-popover.in {
   display: inline-flex !important;
@@ -5805,13 +6006,13 @@
   --wm-rating-icon-opacity: 0.38;
   --wm-rating-icon-size: var(--wm-icon-size);
 }
-.wm-app .app-ratings .ratings-wrapper .rating-style label:hover,
-.wm-app .app-ratings .ratings-wrapper .rating-style label:hover ~ label,
-.wm-app .app-ratings .ratings-wrapper .rating-style label.active {
+.wm-app .app-ratings label:hover,
+.wm-app .app-ratings label:hover ~ label,
+.wm-app .app-ratings label.active {
   --wm-rating-icon-opacity: 1;
   --wm-rating-icon-color: var(--wm-color-warning);
 }
-.wm-app .app-ratings .ratings-wrapper .rating-style.disabled {
+.wm-app .app-ratings.disabled {
   --wm-rating-cursor: default;
   --wm-rating-opacity: 1;
 }
@@ -5899,7 +6100,7 @@
   display: inline-block;
 }
 .wm-app .app-radio.radio > label {
-  width: auto;
+  width: 100%;
   display: inline-flex;
   padding: var(--wm-space-0);
   min-height: var(--wm-radiobutton-state-layer-size);
@@ -5933,6 +6134,9 @@
   line-height: var(--wm-radiobutton-label-line-height);
   letter-spacing: var(--wm-radiobutton-label-letter-spacing);
   color: var(--wm-radiobutton-label-color);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 .wm-app .app-radio.radio > label .caption:before,
 .wm-app .app-radio.radio > label .caption:after {
@@ -5971,7 +6175,6 @@
 .wm-app .app-radioset.list-group {
   display: flex;
   flex-wrap: nowrap;
-  column-gap: var(--wm-radiobutton-set-item-column-gap);
   row-gap: var(--wm-radiobutton-set-item-row-gap);
   overflow: visible;
 }
@@ -5981,9 +6184,6 @@
 .wm-app .app-radioset.list-group.inline {
   flex-wrap: wrap;
 }
-.wm-app .app-radioset.list-group.inline > li {
-  width: auto;
-}
 .wm-app .app-radioset.list-group.inline > li + li {
   margin: 0;
 }
@@ -6072,7 +6272,7 @@
 .wm-app .app-switch > .btn-group > .btn:focus {
   --wm-switch-btn-state-layer-opacity: var(--wm-opacity-focus);
 }
-.wm-app .app-switch > .btn-group > .btn::active {
+.wm-app .app-switch > .btn-group > .btn:active {
   --wm-switch-btn-state-layer-opacity: var(--wm-opacity-active);
 }
 .wm-app .app-switch > .btn-group > .btn.selected {
@@ -6096,7 +6296,9 @@
   padding: var(--wm-switch-btn-padding);
   border-radius: 0;
   text-decoration: var(--wm-switch-btn-text-decoration);
-  border: var(--wm-switch-btn-border-width) var(--wm-switch-btn-border-style) var(--wm-switch-btn-border-color);
+  border-width: var(--wm-switch-btn-border-width);
+  border-style: var(--wm-switch-btn-border-style);
+  border-color: var(--wm-switch-btn-border-color);
 }
 .wm-app .app-switch > .btn-group > .btn:first-child {
   border-top-left-radius: var(--wm-switch-btn-radius);
@@ -6133,9 +6335,11 @@
 /* Tabs component styles and tokens */
 :root {
   --wm-tabs-background: var(--wm-color-surface);
-  --wm-tabs-nav-border-width: var(--wm-border-width-base);
+  --wm-tabs-nav-border-width: var(--wm-border-width-0) var(--wm-border-width-0) var(--wm-border-width-base) var(--wm-border-width-0);
   --wm-tabs-nav-border-style: var(--wm-border-style-base);
   --wm-tabs-nav-border-color: var(--wm-color-surface-container-highest);
+  --wm-tabs-nav-alignment: flex-start;
+  --wm-tabs-nav-gap: var(--wm-space-0);
   --wm-tabs-item-heading-height: 48px;
   --wm-tabs-item-heading-padding: var(--wm-space-2) var(--wm-space-6);
   --wm-tabs-item-heading-font-size: var(--wm-h6-font-size);
@@ -6144,9 +6348,11 @@
   --wm-tabs-item-heading-line-height: var(--wm-h6-line-height);
   --wm-tabs-item-heading-letter-spacing: var(--wm-h6-letter-spacing);
   --wm-tabs-item-heading-color: var(--wm-color-on-surface-variant);
+  --wm-tabs-item-heading-background: var(--wm-color-transparent);
   --wm-tabs-item-heading-border-width: 0px;
   --wm-tabs-item-heading-border-style: var(--wm-border-style-base);
   --wm-tabs-item-heading-border-color: var(--wm-color-border);
+  --wm-tabs-item-heading-border-radius: var(--wm-radius-none);
   --wm-tabs-item-heading-state-layer-color: var(--wm-color-primary);
   --wm-tabs-item-heading-state-layer-opacity: 0;
   --wm-tabs-item-heading-indicator-height: 3px;
@@ -6187,7 +6393,11 @@
 .wm-app .app-tabs > .nav-tabs {
   display: flex;
   align-items: stretch;
-  border-bottom: var(--wm-tabs-nav-border-width) var(--wm-tabs-nav-border-style) var(--wm-tabs-nav-border-color);
+  border-width: var(--wm-tabs-nav-border-width);
+  border-style: var(--wm-tabs-nav-border-style);
+  border-color: var(--wm-tabs-nav-border-color);
+  justify-content: var(--wm-tabs-nav-alignment);
+  gap: var(--wm-tabs-nav-gap);
 }
 .wm-app .app-tabs > .nav-tabs > .tab-header {
   display: inline-flex;
@@ -6206,9 +6416,11 @@
   font-weight: var(--wm-tabs-item-heading-font-weight);
   letter-spacing: var(--wm-tabs-item-heading-letter-spacing);
   color: var(--wm-tabs-item-heading-color);
+  background-color: var(--wm-tabs-item-heading-background);
   border-color: var(--wm-tabs-item-heading-border-color);
   border-width: var(--wm-tabs-item-heading-border-width);
   border-style: var(--wm-tabs-item-heading-border-style);
+  border-radius: var(--wm-tabs-item-heading-border-radius);
 }
 .wm-app .app-tabs > .nav-tabs > .tab-header .tab-heading:before {
   content: "";
@@ -6471,7 +6683,9 @@
   padding-block: var(--wm-toast-container-padding-block);
   padding-inline: var(--wm-toast-container-padding-inline);
   padding-left: calc(var(--wm-toast-container-padding-inline) + var(--wm-toast-icon-size) + var(--wm-toast-container-padding-inline));
-  border: var(--wm-toast-container-border-width) var(--wm-toast-container-border-style) var(--wm-toast-container-border-color);
+  border-width: var(--wm-toast-container-border-width);
+  border-style: var(--wm-toast-container-border-style);
+  border-color: var(--wm-toast-container-border-color);
   border-radius: var(--wm-toast-container-border-radius);
   background: var(--wm-toast-container-background);
   color: var(--wm-toast-container-color);
@@ -6591,7 +6805,9 @@
   width: var(--wm-toggle-width);
   min-height: var(--wm-toggle-height);
   background: var(--wm-toggle-background);
-  border: var(--wm-toggle-border-width) var(--wm-toggle-border-style) var(--wm-toggle-border-color);
+  border-width: var(--wm-toggle-border-width);
+  border-style: var(--wm-toggle-border-style);
+  border-color: var(--wm-toggle-border-color);
   border-radius: var(--wm-toggle-radius);
   user-select: none;
   -webkit-user-select: none;
@@ -6804,7 +7020,9 @@
   width: var(--wm-wizard-step-indicator-size);
   height: var(--wm-wizard-step-indicator-size);
   background: var(--wm-wizard-step-indicator-background);
-  border: var(--wm-wizard-step-indicator-border-width) var(--wm-wizard-step-indicator-border-style) var(--wm-wizard-step-indicator-border-color);
+  border-width: var(--wm-wizard-step-indicator-border-width);
+  border-style: var(--wm-wizard-step-indicator-border-style);
+  border-color: var(--wm-wizard-step-indicator-border-color);
   border-radius: var(--wm-wizard-step-indicator-border-radius);
 }
 .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .wizard-step-number .count {
@@ -7801,7 +8019,9 @@
   display: none;
   background: var(--wm-note-editor-popover-background);
   border-radius: var(--wm-note-editor-popover-border-radius);
-  border: var(--wm-border-width) var(--wm-border-style) var(--wm-note-editor-popover-border-color);
+  border-width: var(--wm-border-width);
+  border-style: var(--wm-border-style);
+  border-color: var(--wm-note-editor-popover-border-color);
   padding: var(--wm-note-editor-popover-padding);
 }
 .wm-app .note-popover.in {
@@ -7983,6 +8203,284 @@
   text-align: center;
   background: var(--wm-note-editor-tooltip-content-background);
 }
+/* Toggle component styles and tokens */
+:root {
+  --wm-slider-height: var(--wm-space-4);
+  --wm-slider-border-radius: var(--wm-radius-lg);
+  --wm-slider-track-filled-background: var(--wm-color-surface-tint);
+  --wm-slider-track-unfilled-background: var(--wm-color-primary-container);
+  --wm-slider-handle-background: var(--wm-color-surface-tint);
+  --wm-slider-handle-height: var(--wm-space-10);
+  --wm-slider-handle-width: var(--wm-space-1);
+  --wm-slider-handle-border-radius: var(--wm-radius-xs);
+  --wm-slider-handle-gap: var(--wm-space-2);
+  --wm-slider-range-label-color: inherit;
+  --wm-slider-range-label-padding: var(--wm-space-0);
+  --wm-slider-range-label-font-size: var(--wm-body-medium-font-size);
+  --wm-slider-range-label-font-weight: var(--wm-body-medium-font-weight);
+  --wm-slider-range-label-font-family: var(--wm-body-medium-font-family);
+  --wm-slider-range-label-background-color: none;
+  --wm-slider-range-label-gap: var(--wm-space-2);
+}
+.wm-app .app-slider .app-slider-value {
+  display: inline-block;
+  text-align: center;
+}
+.wm-app .app-slider .pull-right {
+  float: right !important;
+}
+.wm-app .app-slider .range-input {
+  width: 100%;
+}
+.slider-container {
+  --wm-slider-gap: var(--wm-space-3);
+  --wm-slider-thumb-half: calc(var(--wm-slider-handle-width) / 2);
+}
+.app-slider.slider {
+  width: 100%;
+}
+.app-slider.slider .slider-container {
+  display: flex;
+  gap: var(--wm-slider-gap);
+  position: relative;
+  width: 100%;
+  align-items: center;
+}
+.app-slider.slider .slider-container .slider-control {
+  --start: 0%;
+  --end: 50%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  block-size: var(--wm-slider-height);
+  /* Thumb styling */
+  /* Unfilled track */
+  /* Filled track */
+}
+.app-slider.slider .slider-container .slider-control input {
+  appearance: none;
+  pointer-events: auto;
+  inline-size: 100%;
+  block-size: max(var(--wm-slider-handle-height), 32px);
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  z-index: 2;
+}
+.app-slider.slider .slider-container .slider-control .pointer-none {
+  pointer-events: none;
+}
+.app-slider.slider .slider-container .slider-control input::-webkit-slider-thumb {
+  appearance: none;
+  block-size: var(--wm-slider-handle-height);
+  inline-size: var(--wm-slider-handle-width);
+  border-radius: var(--wm-slider-handle-border-radius);
+  background: var(--wm-slider-handle-background);
+  cursor: grab;
+}
+.app-slider.slider .slider-container .slider-control input::-moz-range-thumb {
+  block-size: var(--wm-slider-handle-height);
+  inline-size: var(--wm-slider-handle-width);
+  border-radius: var(--wm-slider-handle-border-radius);
+  background: var(--wm-slider-handle-background);
+  cursor: grab;
+}
+.app-slider.slider .slider-container .slider-control::before,
+.app-slider.slider .slider-container .slider-control .active-slider {
+  pointer-events: none;
+  z-index: 1;
+}
+.app-slider.slider .slider-container .slider-control::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  block-size: var(--wm-slider-height);
+  border-radius: var(--wm-slider-border-radius);
+  background: var(--wm-slider-track-unfilled-background);
+  clip-path: polygon(calc(var(--start) - var(--wm-slider-handle-gap)) 0, 0 0, 0 100%, calc(var(--start) - var(--wm-slider-handle-gap)) 100%, calc(var(--start) - var(--wm-slider-handle-gap)) 0, calc(100% - var(--end) + var(--wm-slider-handle-gap)) 0, 100% 0, 100% 100%, calc(100% - var(--end) + var(--wm-slider-handle-gap)) 100%, calc(100% - var(--end) + var(--wm-slider-handle-gap)) 0);
+}
+.app-slider.slider .slider-container .slider-control .active-slider {
+  position: absolute;
+  inset: 0 var(--end) auto var(--start);
+  block-size: var(--wm-slider-height);
+  border-top-left-radius: var(--wm-slider-border-radius);
+  border-bottom-left-radius: var(--wm-slider-border-radius);
+  background: var(--wm-slider-track-filled-background);
+  clip-path: polygon(0 0, calc(100% - var(--wm-slider-handle-gap)) 0, calc(100% - var(--wm-slider-handle-gap)) 100%, 0 100%);
+}
+.app-slider.slider .slider-container .slider-control .app-slider-value {
+  position: absolute;
+  font-weight: var(--wm-slider-range-label-font-weight);
+  font-size: var(--wm-slider-range-label-font-size);
+  font-family: var(--wm-slider-range-label-font-family);
+  color: var(--wm-slider-range-label-color);
+  background: var(--wm-slider-range-label-background-color);
+  padding: var(--wm-slider-range-label-padding);
+}
+.app-slider.slider .slider-container .slider-control .app-slider-value.pull-left {
+  left: 0;
+}
+.app-slider.slider .slider-container .slider-control .app-slider-value.pull-right {
+  right: 0;
+}
+.app-slider.slider .slider-container .slider-control.hide-labels .app-slider-value.pull-left,
+.app-slider.slider .slider-container .slider-control.hide-labels .app-slider-value.pull-right {
+  display: none;
+}
+.app-slider.slider.range-label-top .app-slider-value {
+  bottom: calc(var(--wm-slider-height) + var(--wm-slider-range-label-gap));
+  top: auto;
+}
+.app-slider.slider.range-label-bottom .app-slider-value {
+  top: calc(var(--wm-slider-height) + var(--wm-slider-range-label-gap));
+  bottom: auto;
+}
+.app-slider.slider.range-label-side .slider-container {
+  padding-inline: calc(var(--wm-slider-range-label-gap) + 20px);
+}
+.app-slider.slider.range-label-side .app-slider-value.pull-left {
+  right: calc(100% + var(--wm-slider-range-label-gap));
+  top: 50%;
+  transform: translateY(-50%);
+  left: auto !important;
+}
+.app-slider.slider.range-label-side .app-slider-value.pull-right {
+  left: calc(100% + var(--wm-slider-range-label-gap));
+  top: 50%;
+  transform: translateY(-50%);
+  right: auto !important;
+}
+/* RTL support */
+[dir='rtl'] .wm-app .app-slider.slider .slider-control {
+  transform: scaleX(-1);
+}
+/* Checkox component styles and tokens */
+:root {
+  --wm-iconbutton-toggle-font-size: var(--wm-icon-size);
+  --wm-iconbutton-toggle-color: var(--wm-color-on-surface);
+  --wm-iconbutton-toggle-box-shadow: var(--wm-elevation-shadow-none);
+  --wm-iconbutton-toggle-background: var(--wm-color-transparent);
+  --wm-iconbutton-toggle-border-width: var(--wm-border-width-0);
+  --wm-iconbutton-toggle-border-color: var(--wm-color-on-surface-variant);
+  --wm-iconbutton-toggle-border-radius: var(--wm-radius-none);
+  --wm-iconbutton-toggle-border-style: var(--wm-border-style-solid);
+  --wm-iconbutton-toggle-width: var(--wm-space-10);
+  --wm-iconbutton-toggle-height: var(--wm-space-10);
+  --wm-iconbutton-toggle-opacity: 1;
+}
+.wm-app .iconbutton-toggle-default:has(label > input[type='checkbox']:hover) {
+  --wm-iconbutton-toggle-color: var(--wm-color-primary);
+}
+.wm-app .iconbutton-toggle-default:has(label > input[type='checkbox']:checked) {
+  --wm-iconbutton-toggle-color: var(--wm-color-primary);
+  --wm-iconbutton-toggle-font-size: var(--wm-icon-size);
+  --wm-iconbutton-toggle-box-shadow: var(--wm-elevation-shadow-none);
+  --wm-iconbutton-toggle-border-width: var(--wm-border-width-0);
+  --wm-iconbutton-toggle-border-color: var(--wm-color-on-surface-variant);
+  --wm-iconbutton-toggle-border-radius: var(--wm-radius-none);
+  --wm-iconbutton-toggle-border-style: var(--wm-border-style-solid);
+  --wm-iconbutton-toggle-width: var(--wm-space-10);
+  --wm-iconbutton-toggle-height: var(--wm-space-10);
+  --wm-iconbutton-toggle-background: var(--wm-color-transparent);
+  --wm-iconbutton-toggle-opacity: 1;
+}
+.wm-app .iconbutton-toggle-outlined {
+  --wm-iconbutton-toggle-border-width: var(--wm-border-width-1);
+  --wm-iconbutton-toggle-border-color: var(--wm-color-on-surface-variant);
+  --wm-iconbutton-toggle-border-radius: var(--wm-radius-circle);
+  --wm-iconbutton-toggle-border-style: var(--wm-border-style-solid);
+}
+.wm-app .iconbutton-toggle-outlined:has(label > input[type='checkbox']:hover) {
+  --wm-iconbutton-toggle-background: var(--wm-color-primary);
+  --wm-iconbutton-toggle-opacity: var(--wm-opacity-hover);
+}
+.wm-app .iconbutton-toggle-outlined:has(label > input[type='checkbox']:checked) {
+  --wm-iconbutton-toggle-color: var(--wm-color-primary);
+  --wm-iconbutton-toggle-font-size: var(--wm-icon-size);
+  --wm-iconbutton-toggle-box-shadow: var(--wm-elevation-shadow-none);
+  --wm-iconbutton-toggle-border-width: var(--wm-border-width-1);
+  --wm-iconbutton-toggle-border-color: var(--wm-color-primary);
+  --wm-iconbutton-toggle-border-radius: var(--wm-radius-circle);
+  --wm-iconbutton-toggle-border-style: var(--wm-border-style-solid);
+  --wm-iconbutton-toggle-width: var(--wm-space-10);
+  --wm-iconbutton-toggle-height: var(--wm-space-10);
+  --wm-iconbutton-toggle-background: var(--wm-color-transparent);
+  --wm-iconbutton-toggle-opacity: 1;
+}
+.wm-app .iconbutton-toggle-filled {
+  --wm-iconbutton-toggle-border-width: var(--wm-border-width-1);
+  --wm-iconbutton-toggle-border-color: var(--wm-color-primary);
+  --wm-iconbutton-toggle-border-radius: var(--wm-radius-circle);
+  --wm-iconbutton-toggle-border-style: var(--wm-border-style-solid);
+  --wm-iconbutton-toggle-color: var(--wm-color-primary);
+  --wm-iconbutton-toggle-background: var(--wm-color-primary);
+  --wm-iconbutton-toggle-opacity: var(--wm-opacity-hover);
+}
+.wm-app .iconbutton-toggle-filled:has(label > input[type='checkbox']:hover) {
+  --wm-iconbutton-toggle-background: var(--wm-color-primary);
+  --wm-iconbutton-toggle-opacity: var(--wm-opacity-focus);
+}
+.wm-app .iconbutton-toggle-filled:has(label > input[type='checkbox']:checked) {
+  --wm-iconbutton-toggle-background: var(--wm-color-primary);
+  --wm-iconbutton-toggle-color: var(--wm-color-white);
+  --wm-iconbutton-toggle-opacity: 1;
+  --wm-iconbutton-toggle-font-size: var(--wm-icon-size);
+  --wm-iconbutton-toggle-box-shadow: var(--wm-elevation-shadow-none);
+  --wm-iconbutton-toggle-border-width: var(--wm-border-width-0);
+  --wm-iconbutton-toggle-border-color: var(--wm-color-primary);
+  --wm-iconbutton-toggle-border-radius: var(--wm-radius-circle);
+  --wm-iconbutton-toggle-border-style: var(--wm-border-style-solid);
+  --wm-iconbutton-toggle-width: var(--wm-space-10);
+  --wm-iconbutton-toggle-height: var(--wm-space-10);
+}
+.wm-app .app-iconbutton-toggle {
+  position: relative;
+  display: inline-block;
+}
+.wm-app .app-iconbutton-toggle .icon-button-toggle {
+  cursor: pointer;
+  display: inline-flex;
+  width: var(--wm-iconbutton-toggle-width);
+  min-height: var(--wm-iconbutton-toggle-height);
+  justify-content: center;
+  align-items: center;
+  box-shadow: var(--wm-iconbutton-toggle-box-shadow);
+  border-radius: var(--wm-iconbutton-toggle-border-radius);
+}
+.wm-app .app-iconbutton-toggle .icon-button-toggle .toggle-icon {
+  position: relative;
+  z-index: 2;
+  font-size: var(--wm-iconbutton-toggle-font-size);
+  color: var(--wm-iconbutton-toggle-color);
+}
+.wm-app .app-iconbutton-toggle .icon-button-toggle > input[type="checkbox"] {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  margin: 0;
+  height: var(--wm-iconbutton-toggle-height);
+  position: absolute;
+  left: 0px;
+  z-index: 1;
+  cursor: pointer;
+  width: var(--wm-iconbutton-toggle-width);
+  min-height: var(--wm-iconbutton-toggle-height);
+  border-width: var(--wm-iconbutton-toggle-border-width);
+  border-color: var(--wm-iconbutton-toggle-border-color);
+  border-radius: var(--wm-iconbutton-toggle-border-radius);
+  border-style: var(--wm-iconbutton-toggle-border-style);
+}
+.wm-app .app-iconbutton-toggle .icon-button-toggle::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: var(--wm-iconbutton-toggle-border-radius);
+  background: var(--wm-iconbutton-toggle-background);
+  opacity: var(--wm-iconbutton-toggle-opacity);
+}
 .wm-app {
   /** Reuasble style selectors with arguments */
   --wm-app-font-family: var(--wm-body-medium-font-family);
@@ -10245,15 +10743,22 @@
   position: relative;
   min-height: 100%;
   height: inherit;
-  top: 0;
-  left: 0;
+  display: flex;
+  justify-content: var(--wm-modal-justify-content);
+  align-items: var(--wm-modal-align-items);
   z-index: 1010;
 }
+.wm-app .app-page:has(.modal-dialog[draggable="true"], .modal-dialog .canvas-active-widget) {
+  min-height: 100%;
+}
 .wm-app .app-view .app-dialog {
   z-index: 1000;
   position: relative;
   margin: 0;
 }
+.wm-app .app-view .app-dialog .app-dialog-body {
+  min-height: 60px;
+}
 .wm-app .app-view .app-dialog.app-page-dialog .app-dialog-body {
   padding: 0;
 }
@@ -10776,7 +11281,8 @@
 .wm-app .app-form > .form-body > .form-elements [data-role="filter-field"],
 .wm-app .app-liveform > .form-body > .form-elements [data-role="filter-field"],
 .wm-app .app-livefilter > .form-body > .form-elements [data-role="filter-field"] {
-  width: 100%;
+  max-width: 100%;
+  padding: var(--wm-form-field-padding);
 }
 .wm-app .app-form > .form-body > .form-elements > .app-grid-layout,
 .wm-app .app-liveform > .form-body > .form-elements > .app-grid-layout,
@@ -10830,7 +11336,7 @@
   display: none;
 }
 @media (min-width: 768px) {
-  .wm-app .app-navbar > .container-fluid > .navbar-header {
+  .wm-app .app-navbar > .container-fluid > .navbar-header .navbar-toggle {
     display: none;
   }
 }
@@ -15731,31 +16237,31 @@
   font-family: var(--wm-font-family-plain) !important;
 }
 .wm-app .fw-thin {
-  font-weight: var(--wm-font-weight-thin) !important;
+  font-weight: var(--wm-font-weight-100) !important;
 }
 .wm-app .fw-extralight {
-  font-weight: var(--wm-font-weight-extralight) !important;
+  font-weight: var(--wm-font-weight-200) !important;
 }
 .wm-app .fw-light {
-  font-weight: var(--wm-font-weight-light) !important;
+  font-weight: var(--wm-font-weight-300) !important;
 }
 .wm-app .fw-normal {
-  font-weight: var(--wm-font-weight-regular) !important;
+  font-weight: var(--wm-font-weight-400) !important;
 }
 .wm-app .fw-medium {
-  font-weight: var(--wm-font-weight-medium) !important;
+  font-weight: var(--wm-font-weight-500) !important;
 }
 .wm-app .fw-semibold {
-  font-weight: var(--wm-font-weight-semibold) !important;
+  font-weight: var(--wm-font-weight-600) !important;
 }
 .wm-app .fw-bold {
-  font-weight: var(--wm-font-weight-bold) !important;
+  font-weight: var(--wm-font-weight-700) !important;
 }
 .wm-app .fw-extrabold {
-  font-weight: var(--wm-font-weight-extrabold) !important;
+  font-weight: var(--wm-font-weight-800) !important;
 }
 .wm-app .fw-black {
-  font-weight: var(--wm-font-weight-black) !important;
+  font-weight: var(--wm-font-weight-900) !important;
 }
 .wm-app .lh-1 {
   line-height: 1 !important;
@@ -18104,17 +18610,6 @@
   .wm-app .app-form .form-body .form-elements .app-grid-layout .app-grid-row .app-grid-column {
     flex: 1 1 calc(100% - 10px);
   }
-  .wm-app .app-form .form-body .form-elements div[data-role="form-field"],
-  .wm-app .app-form .form-body .form-elements .flex-wrap-6,
-  .wm-app .app-form .form-body .form-elements .flex-wrap-5,
-  .wm-app .app-form .form-body .form-elements .flex-wrap-4,
-  .wm-app .app-form .form-body .form-elements .flex-wrap-3,
-  .wm-app .app-form .form-body .form-elements .flex-wrap-2,
-  .wm-app .app-form .form-body .form-elements .flex-wrap-1 {
-    flex: 1 1 calc(50% - var(--wm-grid-layout-column-padding));
-    display: flex;
-    padding: var(--wm-grid-layout-column-padding);
-  }
   .wm-app .app-form .form-body .form-elements .app-composite-widget {
     width: 100%;
   }
@@ -18595,6 +19090,12 @@
     width: 100%;
     clear: both;
   }
+  .wm-app .app-page .app-content .app-content-row:has(.app-left-panel) .app-content-column,
+  .wm-app .app-page .app-content .app-content-row:has(.app-left-panel) .app-content-column-wrapper,
+  .wm-app .app-page .app-content .app-content-row:has(.app-left-panel) .app-page-content {
+    display: block;
+    width: 100%;
+  }
   .wm-app .app-page .app-content .app-content-row .app-content-column,
   .wm-app .app-page .app-content .app-content-row .app-content-column-wrapper,
   .wm-app .app-page .app-content .app-content-row .app-page-content {
@@ -18755,17 +19256,6 @@
   .wm-app .app-form .form-body .form-elements .app-grid-layout .app-grid-row .app-grid-column {
     flex: 1 1 calc(100% - 10px);
   }
-  .wm-app .app-form .form-body .form-elements div[data-role="form-field"],
-  .wm-app .app-form .form-body .form-elements .flex-wrap-6,
-  .wm-app .app-form .form-body .form-elements .flex-wrap-5,
-  .wm-app .app-form .form-body .form-elements .flex-wrap-4,
-  .wm-app .app-form .form-body .form-elements .flex-wrap-3,
-  .wm-app .app-form .form-body .form-elements .flex-wrap-2,
-  .wm-app .app-form .form-body .form-elements .flex-wrap-1 {
-    flex: 1 1 calc(100% - var(--wm-grid-layout-column-padding));
-    display: flex;
-    padding: var(--wm-grid-layout-column-padding);
-  }
 }
 @media (max-width: 576px) {
   .wm-app .app-header .app-header-menu {