[PATCH yew-widget-toolkit/yew-widget-toolkit-assets 0/4] yew ui tweaks

[PATCH yew-widget-toolkit/yew-widget-toolkit-assets 0/4] yew ui tweaks

[Shannon Sterz]

these patches add minor usability  tweaks to
proxmox-yew-widget-toolkit-assets and proxmox-yew-widget-toolkit. the
first patch increases the area for drag handles on dialogs for lower
density themes. the second patch decreases the opacity for disabled
input elements further to match material design 3' approach.

then follows a clean up commit. finally an option is introduced to allow
making the filter field in gridpicker's and combobox auto-selectable.
thus, putting the cursor of the user into the filter field when the
combobox is opened.

proxmox-yew-widget-toolkit-assets:

Shannon Sterz (3):
  dialog: allow resize handle to fill the padding space in dialogs
  tree-wide: replace the disabled opacity with a variable and decrease
    it
  docs: run `make refresh`

 Documentation.md                |  26 ++++++-
 docs/css/crisp-yew-style.css    | 115 +++++++++++++++++++++++------
 docs/css/desktop-yew-style.css  | 115 +++++++++++++++++++++++------
 docs/css/material-yew-style.css | 126 +++++++++++++++++++++++++-------
 scss/_button.scss               |   4 +-
 scss/_date_selector.scss        |   4 +-
 scss/_dialog.scss               |  20 ++---
 scss/_input.scss                |  12 +--
 scss/_menu.scss                 |   4 +-
 scss/_miniscroll.scss           |   4 +-
 scss/_nav.scss                  |   4 +-
 scss/_theme_common.scss         |   4 +
 scss/_theme_post.scss           |   9 ++-
 13 files changed, 344 insertions(+), 103 deletions(-)


proxmox-yew-widget-toolkit:

Shannon Sterz (1):
  gridpicker/combobox: allow autoselecting the filter field

 src/widget/form/combobox.rs | 8 ++++++++
 src/widget/grid_picker.rs   | 6 ++++++
 2 files changed, 14 insertions(+)


Summary over all repositories:
  15 files changed, 358 insertions(+), 103 deletions(-)

--
Generated by git-murpp 0.8.1

[PATCH yew-widget-toolkit-assets 1/3] dialog: allow resize handle to fill the padding space in dialogs

[Shannon Sterz]

instead of hard-coding a resize handle size 5px scale them along with
the spacing used by elements inside dialogs. this will allow these
handles to take up more space in themes that use more relaxed
densities than "Compact". especially on hi-dpi displays hitting a 5px
by 5px area for corner handles is rather tricky.

Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
 scss/_dialog.scss | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/scss/_dialog.scss b/scss/_dialog.scss
index 8121b75..94f8e62 100644
--- a/scss/_dialog.scss
+++ b/scss/_dialog.scss
@@ -57,7 +57,7 @@ dialog.pwt-outer-dialog {
     &.north-west,
     &.south-east,
     &.south-west {
-        width: 5px;
+        width: var(--pwt-spacer-2);
     }
 
     &.north,
@@ -66,34 +66,34 @@ dialog.pwt-outer-dialog {
     &.north-west,
     &.south-east,
     &.south-west {
-        height: 5px;
+        height: var(--pwt-spacer-2);
     }
 
     &.west {
-        top: 5px;
-        bottom: 5px;
+        top: var(--pwt-spacer-2);
+        bottom: var(--pwt-spacer-2);
         left: 0px;
         cursor: w-resize;
     }
 
     &.east {
-        top: 5px;
-        bottom: 5px;
+        top: var(--pwt-spacer-2);
+        bottom: var(--pwt-spacer-2);
         right: 0px;
         cursor: e-resize;
     }
 
     &.north {
         top: 0px;
-        left: 5px;
-        right: 5px;
+        left: var(--pwt-spacer-2);
+        right: var(--pwt-spacer-2);
         cursor: n-resize;
     }
 
     &.south {
         bottom: 0px;
-        left: 5px;
-        right: 5px;
+        left: var(--pwt-spacer-2);
+        right: var(--pwt-spacer-2);
         cursor: s-resize;
     }
 
-- 
2.47.3

[PATCH yew-widget-toolkit-assets 2/3] tree-wide: replace the disabled opacity with a variable and decrease it

[Shannon Sterz]

material design 3 uses an opacity of only 38% for disabled buttons and
input fields [1,2]. adopt this opacity for disabled input fields to
increase the contrast between disabled and enabled elements. in order
to make changing this in the feature easier, the opacity is also moved
into a css variable.

[1]: https://m3.material.io/components/text-fields/specs
[2]: https://m3.material.io/components/buttons/specs

Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
 scss/_button.scss        |  4 ++--
 scss/_date_selector.scss |  4 ++--
 scss/_input.scss         | 12 ++++++------
 scss/_menu.scss          |  4 ++--
 scss/_miniscroll.scss    |  4 ++--
 scss/_nav.scss           |  4 ++--
 scss/_theme_common.scss  |  4 ++++
 scss/_theme_post.scss    |  9 ++++++++-
 8 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/scss/_button.scss b/scss/_button.scss
index 417f74c..ef21fa5 100644
--- a/scss/_button.scss
+++ b/scss/_button.scss
@@ -33,7 +33,7 @@
     &[aria-disabled="true"] {
         @include color-scheme-vars("inverse-surface");
         cursor: auto;
-        opacity: 0.5;
+        opacity: var(--pwt-disabled-opacity);
     }
 }
 
@@ -83,7 +83,7 @@ button,
     &:disabled,
     &[aria-disabled="true"] {
         cursor: auto;
-        opacity: 0.5;
+        opacity: var(--pwt-disabled-opacity);
         @include elevation-box-shadow(0);
 
         &:not(.pwt-button-text) {
diff --git a/scss/_date_selector.scss b/scss/_date_selector.scss
index 126d5f2..9500194 100644
--- a/scss/_date_selector.scss
+++ b/scss/_date_selector.scss
@@ -33,7 +33,7 @@
         }
 
         &.disabled {
-            opacity: 0.5;
+            opacity: var(--pwt-disabled-opacity);
             cursor: default !important;
         }
 
@@ -57,4 +57,4 @@
         opacity: 0.5;
         padding: var(--pwt-spacer-1);
     }
-}
\ No newline at end of file
+}
diff --git a/scss/_input.scss b/scss/_input.scss
index b01edca..293717c 100644
--- a/scss/_input.scss
+++ b/scss/_input.scss
@@ -87,7 +87,7 @@ input {
     &:disabled,
     &[aria-disabled=true]{
         cursor: auto;
-        opacity: 0.5;
+        opacity: var(--pwt-disabled-opacity);
     }
 }
 
@@ -119,7 +119,7 @@ input {
 }
 
 .pwt-label-disabled {
-    opacity: 0.5;
+    opacity: var(--pwt-disabled-opacity);
 }
 
 .pwt-switch {
@@ -178,7 +178,7 @@ input {
 
     &.disabled {
         cursor: auto;
-        opacity: 0.5;
+        opacity: var(--pwt-disabled-opacity);
     }
 }
 
@@ -231,7 +231,7 @@ input {
 
     &.disabled {
         cursor: auto;
-        opacity: 0.5;
+        opacity: var(--pwt-disabled-opacity);
     }
 
     &.disabled.checked {
@@ -279,7 +279,7 @@ input {
 
     &.disabled {
         cursor: auto;
-        opacity: 0.5;
+        opacity: var(--pwt-disabled-opacity);
     }
 }
 
@@ -312,7 +312,7 @@ input {
     &.disabled,
     &:disabled {
         cursor: auto;
-        opacity: 0.5;
+        opacity: var(--pwt-disabled-opacity);
     }
 }
 
diff --git a/scss/_menu.scss b/scss/_menu.scss
index 2dcd3c3..fdfd4db 100644
--- a/scss/_menu.scss
+++ b/scss/_menu.scss
@@ -56,7 +56,7 @@ ul.pwt-menubar {
 	.pwt-menubar-item{
 		&[disabled], &[aria-disabled=true] {
 			cursor: auto;
-			opacity: 0.5;
+			opacity: var(--pwt-disabled-opacity);
 		}
 	}
 
@@ -101,7 +101,7 @@ ul.pwt-menu {
 	.pwt-menu-item {
 		&[disabled], &[aria-disabled=true] {
 			cursor: auto;
-			opacity: 0.5;
+			opacity: var(--pwt-disabled-opacity);
 		}
 	}
 
diff --git a/scss/_miniscroll.scss b/scss/_miniscroll.scss
index 7747297..b4cab0e 100644
--- a/scss/_miniscroll.scss
+++ b/scss/_miniscroll.scss
@@ -59,7 +59,7 @@
 
         &.disabled {
             cursor: auto;
-            opacity: 0.5;
+            opacity: var(--pwt-disabled-opacity);
         }
     }
 
@@ -81,7 +81,7 @@
 
         &.disabled {
             cursor: auto;
-            opacity: 0.5;
+            opacity: var(--pwt-disabled-opacity);
         }
     }
 }
diff --git a/scss/_nav.scss b/scss/_nav.scss
index c402ec5..08102d4 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -47,7 +47,7 @@
         }
 
         &.disabled {
-            opacity: 0.5;
+            opacity: var(--pwt-disabled-opacity);
             cursor: auto;
         }
     }
@@ -107,7 +107,7 @@
         }
 
         &.disabled {
-            opacity: 0.5;
+            opacity: var(--pwt-disabled-opacity);
             cursor: auto;
         }
     }
diff --git a/scss/_theme_common.scss b/scss/_theme_common.scss
index a0db087..409be88 100644
--- a/scss/_theme_common.scss
+++ b/scss/_theme_common.scss
@@ -62,5 +62,9 @@ $elevation-levels-tint-opacity: (
     5: 14%,
 );
 
+$element-state-opacity: (
+    disabled: 0.38,
+);
+
 // default accent color (primary, secentary or tertiary)
 $default-accent-color: secondary;
diff --git a/scss/_theme_post.scss b/scss/_theme_post.scss
index 459ec4f..c3b8642 100644
--- a/scss/_theme_post.scss
+++ b/scss/_theme_post.scss
@@ -58,6 +58,13 @@
     }
 }
 
+/* Opacity of elements in certain states. */
+:root {
+    @each $level, $value in $element-state-opacity {
+        --pwt-#{$level}-opacity: #{$value};
+    }
+}
+
 /* Font setup */
 @font-face {
     font-family: "Roboto Flex";
@@ -121,4 +128,4 @@ $pwt-font-monospace: monospace;
 @import "tooltip";
 @import "embedded_html";
 
-@import "rrd"; // only useed by proxmox RRD component
\ No newline at end of file
+@import "rrd"; // only useed by proxmox RRD component
-- 
2.47.3

[PATCH yew-widget-toolkit-assets 3/3] docs: run `make refresh`

[Shannon Sterz]

Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
 Documentation.md                |  26 ++++++-
 docs/css/crisp-yew-style.css    | 115 +++++++++++++++++++++++------
 docs/css/desktop-yew-style.css  | 115 +++++++++++++++++++++++------
 docs/css/material-yew-style.css | 126 +++++++++++++++++++++++++-------
 4 files changed, 306 insertions(+), 76 deletions(-)

diff --git a/Documentation.md b/Documentation.md
index c37d823..8d139d5 100644
--- a/Documentation.md
+++ b/Documentation.md
@@ -108,6 +108,10 @@ changes the colors of the widget. The `pwt-scheme-<name>` and
 `pwt-scheme-<name>-container` helper classes can be used to set
 those variables.
 
+There is also the `pwt-default-colors` class to set the `color` and
+`background-color` properties directly to the `--pwt-color` and
+`--pwt-color-background` respectively.
+
 A similar scheme is used for widgets with an associated accent color, using
 the following CSS variables:
 
@@ -234,6 +238,8 @@ This theme uses the [material design baseline colors](https://m3.material.io/sty
 
 - use elevated box with box-shadow
 
+`pwt-side-dialog-bottom`
+: overwrite corner radius
 
 ### The "Crisp" Theme
 
@@ -397,6 +403,7 @@ For the following elevation levels: 0, 1, 2, 3, 4, 5
 
 - `pwt-opacity-<value>`: set `opacity` property to percentage for values in
   - 0, 25, 50, 75, 100
+- `pwt-delay-visibility`: delay visibility by animating opacity from 0 to 1
 
 ## Content Spacer Class
 
@@ -456,9 +463,26 @@ The following classes can be used to adopt the button style for mobile/touch dev
 
 ##### FAB Menus
 
+Class `pwt-fab-menu-outer`
+
+This class is used to arrange the FAB and the menu.
+
+Class `pwt-fab-menu-main`
+
+This class is the container for the main button, and uses for aligning
+the close button correctly for different directions and sizes.
+
 Class `pwt-fab-menu-container`
 
-This class is used to arrange FABs as a menu.
+This class is the container for the fab menu items.
+
+Classes `pwt-fab-direction-{up,down}`
+
+These are used to control the layout of the FAB to the menu and the direction of the animations
+
+Classes `pwt-fab-align-{start,end}`
+
+These are used to align the button according to the alignment
 
 
 ## Panel Widget
diff --git a/docs/css/crisp-yew-style.css b/docs/css/crisp-yew-style.css
index 3f2f310..7485308 100644
--- a/docs/css/crisp-yew-style.css
+++ b/docs/css/crisp-yew-style.css
@@ -359,6 +359,11 @@ table {
   --pwt-state-layer-opacity-5: 14%;
 }
 
+/* Opacity of elements in certain states. */
+:root {
+  --pwt-disabled-opacity: 0.38;
+}
+
 /* Font setup */
 @font-face {
   font-family: "Roboto Flex";
@@ -4013,7 +4018,7 @@ h6,
   --pwt-color-background: var(--pwt-color-inverse-surface) ;
   --pwt-color: var(--pwt-color-on-inverse-surface)  ;
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 button,
@@ -4049,7 +4054,7 @@ button,
 }
 .pwt-button.disabled, .pwt-button:disabled, .pwt-button[aria-disabled=true] {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
   box-shadow: var(--pwt-color-shadow) 0px calc(var(--pwt-elevation-level-0) / 2) var(--pwt-elevation-level-0);
 }
 .pwt-button.disabled:not(.pwt-button-text), .pwt-button:disabled:not(.pwt-button-text), .pwt-button[aria-disabled=true]:not(.pwt-button-text) {
@@ -4815,6 +4820,68 @@ tr.row-cursor {
   cursor: pointer;
 }
 
+.pwt-date-panel {
+  display: grid;
+  text-align: center;
+  align-items: center;
+}
+.pwt-date-panel .pwt-date-panel-item {
+  font-family: "Roboto Flex";
+  font-size: 14px;
+  font-weight: 500;
+  font-variation-settings: "opsz" 14, "wdth" 110, "wght" 500;
+  line-height: 17px;
+  --pwt-color-background: var(--pwt-color-neutral) ;
+  --pwt-color: var(--pwt-color-on-neutral)  ;
+  color: var(--pwt-color);
+  background-color: var(--pwt-color-background);
+  cursor: pointer;
+  padding: var(--pwt-spacer-1);
+  border-radius: var(--pwt-shape-corner-small) !important;
+  min-width: 2em;
+}
+.pwt-date-panel .pwt-date-panel-item:hover {
+  --pwt-elevated-background-color: color-mix( in srgb, var(--pwt-color) var(--pwt-state-layer-opacity-hover), var(--pwt-color-background) );
+  background-color: var(--pwt-elevated-background-color);
+}
+.pwt-date-panel .pwt-date-panel-item:focus, .pwt-date-panel .pwt-date-panel-item.focused {
+  outline: 2px solid var(--pwt-color-on-surface);
+  outline-offset: -2px;
+}
+.pwt-date-panel .pwt-date-panel-item.selected {
+  --pwt-color-background: var(--pwt-color-primary) ;
+  --pwt-color: var(--pwt-color-on-primary)  ;
+}
+.pwt-date-panel .pwt-date-panel-item.disabled {
+  opacity: var(--pwt-disabled-opacity);
+  cursor: default !important;
+}
+.pwt-date-panel .pwt-date-panel-item.other-month {
+  opacity: 0.5;
+}
+.pwt-date-panel .pwt-date-panel-item.pwt-today {
+  --pwt-color-background: var(--pwt-color-secondary-container) ;
+  --pwt-color: var(--pwt-color-on-secondary-container)  ;
+}
+.pwt-date-panel .pwt-date-panel-header {
+  font-family: "Roboto Flex";
+  font-size: 11px;
+  font-weight: 400;
+  font-variation-settings: "opsz" 11, "wdth" 100, "wght" 400;
+  line-height: 14px;
+  opacity: 0.5;
+  padding: var(--pwt-spacer-1);
+}
+.pwt-date-panel .pwt-date-panel-week-number {
+  font-family: "Roboto Flex";
+  font-size: 11px;
+  font-weight: 400;
+  font-variation-settings: "opsz" 11, "wdth" 100, "wght" 400;
+  line-height: 14px;
+  opacity: 0.5;
+  padding: var(--pwt-spacer-1);
+}
+
 dialog.pwt-outer-dialog {
   overflow: visible;
   background-color: transparent;
@@ -4862,33 +4929,33 @@ dialog.pwt-outer-dialog > .pwt-dialog {
   touch-action: none;
 }
 .pwt-dialog .dialog-resize-handle.west, .pwt-dialog .dialog-resize-handle.east, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west {
-  width: 5px;
+  width: var(--pwt-spacer-2);
 }
 .pwt-dialog .dialog-resize-handle.north, .pwt-dialog .dialog-resize-handle.south, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west {
-  height: 5px;
+  height: var(--pwt-spacer-2);
 }
 .pwt-dialog .dialog-resize-handle.west {
-  top: 5px;
-  bottom: 5px;
+  top: var(--pwt-spacer-2);
+  bottom: var(--pwt-spacer-2);
   left: 0px;
   cursor: w-resize;
 }
 .pwt-dialog .dialog-resize-handle.east {
-  top: 5px;
-  bottom: 5px;
+  top: var(--pwt-spacer-2);
+  bottom: var(--pwt-spacer-2);
   right: 0px;
   cursor: e-resize;
 }
 .pwt-dialog .dialog-resize-handle.north {
   top: 0px;
-  left: 5px;
-  right: 5px;
+  left: var(--pwt-spacer-2);
+  right: var(--pwt-spacer-2);
   cursor: n-resize;
 }
 .pwt-dialog .dialog-resize-handle.south {
   bottom: 0px;
-  left: 5px;
-  right: 5px;
+  left: var(--pwt-spacer-2);
+  right: var(--pwt-spacer-2);
   cursor: s-resize;
 }
 .pwt-dialog .dialog-resize-handle.north-west {
@@ -5153,7 +5220,7 @@ input[aria-disabled=true] {
 }
 .pwt-input.disabled, .pwt-input:disabled, .pwt-input[aria-disabled=true] {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 .pwt-input.pwt-input-type-number .spinner i {
@@ -5180,7 +5247,7 @@ input[aria-disabled=true] {
 }
 
 .pwt-label-disabled {
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 .pwt-switch {
@@ -5234,7 +5301,7 @@ input[aria-disabled=true] {
 }
 .pwt-switch.disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 .pwt-checkbox-state {
@@ -5288,7 +5355,7 @@ input[aria-disabled=true] {
 }
 .pwt-checkbox.disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 .pwt-checkbox.disabled.checked {
   color: var(--pwt-color);
@@ -5329,7 +5396,7 @@ input[aria-disabled=true] {
 }
 .pwt-radio-button.disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 .pwt-textarea {
@@ -5357,7 +5424,7 @@ input[aria-disabled=true] {
 }
 .pwt-textarea.disabled, .pwt-textarea:disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 .pwt-input-display {
@@ -5475,7 +5542,7 @@ ul.pwt-menubar .pwt-menubar-item:focus-visible {
 }
 ul.pwt-menubar .pwt-menubar-item[disabled], ul.pwt-menubar .pwt-menubar-item[aria-disabled=true] {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 ul.pwt-menubar .pwt-menubar-item-icon {
   font-size: 16px;
@@ -5513,7 +5580,7 @@ ul.pwt-menu .pwt-menu-item {
 }
 ul.pwt-menu .pwt-menu-item[disabled], ul.pwt-menu .pwt-menu-item[aria-disabled=true] {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 ul.pwt-menu .pwt-menu-item:focus-visible {
   outline: 2px solid var(--pwt-color-focus);
@@ -5653,7 +5720,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) {
 }
 .pwt-mini-scroll .pwt-mini-scroll-left-arrow.visible.disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 .pwt-mini-scroll .pwt-mini-scroll-right-arrow {
   overflow: hidden;
@@ -5678,7 +5745,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) {
 }
 .pwt-mini-scroll .pwt-mini-scroll-right-arrow.visible.disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 /* Miscellaneous helper classes */
@@ -5888,7 +5955,7 @@ a:focus-within, a:hover {
   background-color: var(--pwt-elevated-background-color);
 }
 .pwt-nav-pills .pwt-nav-link.disabled {
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
   cursor: auto;
 }
 .pwt-nav-pills a {
@@ -5945,7 +6012,7 @@ a:focus-within, a:hover {
   color: var(--pwt-color-primary);
 }
 .pwt-tab-material .pwt-nav-link.disabled {
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
   cursor: auto;
 }
 .pwt-tab-material a {
diff --git a/docs/css/desktop-yew-style.css b/docs/css/desktop-yew-style.css
index 9304118..a388821 100644
--- a/docs/css/desktop-yew-style.css
+++ b/docs/css/desktop-yew-style.css
@@ -366,6 +366,11 @@ table {
   --pwt-state-layer-opacity-5: 14%;
 }
 
+/* Opacity of elements in certain states. */
+:root {
+  --pwt-disabled-opacity: 0.38;
+}
+
 /* Font setup */
 @font-face {
   font-family: "Roboto Flex";
@@ -4020,7 +4025,7 @@ h6,
   --pwt-color-background: var(--pwt-color-inverse-surface) ;
   --pwt-color: var(--pwt-color-on-inverse-surface)  ;
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 button,
@@ -4056,7 +4061,7 @@ button,
 }
 .pwt-button.disabled, .pwt-button:disabled, .pwt-button[aria-disabled=true] {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
   box-shadow: var(--pwt-color-shadow) 0px calc(var(--pwt-elevation-level-0) / 2) var(--pwt-elevation-level-0);
 }
 .pwt-button.disabled:not(.pwt-button-text), .pwt-button:disabled:not(.pwt-button-text), .pwt-button[aria-disabled=true]:not(.pwt-button-text) {
@@ -4822,6 +4827,68 @@ tr.row-cursor {
   cursor: pointer;
 }
 
+.pwt-date-panel {
+  display: grid;
+  text-align: center;
+  align-items: center;
+}
+.pwt-date-panel .pwt-date-panel-item {
+  font-family: "Roboto Flex";
+  font-size: 14px;
+  font-weight: 500;
+  font-variation-settings: "opsz" 14, "wdth" 110, "wght" 500;
+  line-height: 20px;
+  --pwt-color-background: var(--pwt-color-neutral) ;
+  --pwt-color: var(--pwt-color-on-neutral)  ;
+  color: var(--pwt-color);
+  background-color: var(--pwt-color-background);
+  cursor: pointer;
+  padding: var(--pwt-spacer-1);
+  border-radius: var(--pwt-shape-corner-small) !important;
+  min-width: 2em;
+}
+.pwt-date-panel .pwt-date-panel-item:hover {
+  --pwt-elevated-background-color: color-mix( in srgb, var(--pwt-color) var(--pwt-state-layer-opacity-hover), var(--pwt-color-background) );
+  background-color: var(--pwt-elevated-background-color);
+}
+.pwt-date-panel .pwt-date-panel-item:focus, .pwt-date-panel .pwt-date-panel-item.focused {
+  outline: 2px solid var(--pwt-color-on-surface);
+  outline-offset: -2px;
+}
+.pwt-date-panel .pwt-date-panel-item.selected {
+  --pwt-color-background: var(--pwt-color-primary) ;
+  --pwt-color: var(--pwt-color-on-primary)  ;
+}
+.pwt-date-panel .pwt-date-panel-item.disabled {
+  opacity: var(--pwt-disabled-opacity);
+  cursor: default !important;
+}
+.pwt-date-panel .pwt-date-panel-item.other-month {
+  opacity: 0.5;
+}
+.pwt-date-panel .pwt-date-panel-item.pwt-today {
+  --pwt-color-background: var(--pwt-color-secondary-container) ;
+  --pwt-color: var(--pwt-color-on-secondary-container)  ;
+}
+.pwt-date-panel .pwt-date-panel-header {
+  font-family: "Roboto Flex";
+  font-size: 11px;
+  font-weight: 500;
+  font-variation-settings: "opsz" 11, "wdth" 130, "wght" 500;
+  line-height: 16px;
+  opacity: 0.5;
+  padding: var(--pwt-spacer-1);
+}
+.pwt-date-panel .pwt-date-panel-week-number {
+  font-family: "Roboto Flex";
+  font-size: 11px;
+  font-weight: 500;
+  font-variation-settings: "opsz" 11, "wdth" 130, "wght" 500;
+  line-height: 16px;
+  opacity: 0.5;
+  padding: var(--pwt-spacer-1);
+}
+
 dialog.pwt-outer-dialog {
   overflow: visible;
   background-color: transparent;
@@ -4869,33 +4936,33 @@ dialog.pwt-outer-dialog > .pwt-dialog {
   touch-action: none;
 }
 .pwt-dialog .dialog-resize-handle.west, .pwt-dialog .dialog-resize-handle.east, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west {
-  width: 5px;
+  width: var(--pwt-spacer-2);
 }
 .pwt-dialog .dialog-resize-handle.north, .pwt-dialog .dialog-resize-handle.south, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west {
-  height: 5px;
+  height: var(--pwt-spacer-2);
 }
 .pwt-dialog .dialog-resize-handle.west {
-  top: 5px;
-  bottom: 5px;
+  top: var(--pwt-spacer-2);
+  bottom: var(--pwt-spacer-2);
   left: 0px;
   cursor: w-resize;
 }
 .pwt-dialog .dialog-resize-handle.east {
-  top: 5px;
-  bottom: 5px;
+  top: var(--pwt-spacer-2);
+  bottom: var(--pwt-spacer-2);
   right: 0px;
   cursor: e-resize;
 }
 .pwt-dialog .dialog-resize-handle.north {
   top: 0px;
-  left: 5px;
-  right: 5px;
+  left: var(--pwt-spacer-2);
+  right: var(--pwt-spacer-2);
   cursor: n-resize;
 }
 .pwt-dialog .dialog-resize-handle.south {
   bottom: 0px;
-  left: 5px;
-  right: 5px;
+  left: var(--pwt-spacer-2);
+  right: var(--pwt-spacer-2);
   cursor: s-resize;
 }
 .pwt-dialog .dialog-resize-handle.north-west {
@@ -5160,7 +5227,7 @@ input[aria-disabled=true] {
 }
 .pwt-input.disabled, .pwt-input:disabled, .pwt-input[aria-disabled=true] {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 .pwt-input.pwt-input-type-number .spinner i {
@@ -5187,7 +5254,7 @@ input[aria-disabled=true] {
 }
 
 .pwt-label-disabled {
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 .pwt-switch {
@@ -5241,7 +5308,7 @@ input[aria-disabled=true] {
 }
 .pwt-switch.disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 .pwt-checkbox-state {
@@ -5295,7 +5362,7 @@ input[aria-disabled=true] {
 }
 .pwt-checkbox.disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 .pwt-checkbox.disabled.checked {
   color: var(--pwt-color);
@@ -5336,7 +5403,7 @@ input[aria-disabled=true] {
 }
 .pwt-radio-button.disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 .pwt-textarea {
@@ -5364,7 +5431,7 @@ input[aria-disabled=true] {
 }
 .pwt-textarea.disabled, .pwt-textarea:disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 .pwt-input-display {
@@ -5482,7 +5549,7 @@ ul.pwt-menubar .pwt-menubar-item:focus-visible {
 }
 ul.pwt-menubar .pwt-menubar-item[disabled], ul.pwt-menubar .pwt-menubar-item[aria-disabled=true] {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 ul.pwt-menubar .pwt-menubar-item-icon {
   font-size: 16px;
@@ -5520,7 +5587,7 @@ ul.pwt-menu .pwt-menu-item {
 }
 ul.pwt-menu .pwt-menu-item[disabled], ul.pwt-menu .pwt-menu-item[aria-disabled=true] {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 ul.pwt-menu .pwt-menu-item:focus-visible {
   outline: 2px solid var(--pwt-color-focus);
@@ -5660,7 +5727,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) {
 }
 .pwt-mini-scroll .pwt-mini-scroll-left-arrow.visible.disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 .pwt-mini-scroll .pwt-mini-scroll-right-arrow {
   overflow: hidden;
@@ -5685,7 +5752,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) {
 }
 .pwt-mini-scroll .pwt-mini-scroll-right-arrow.visible.disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 /* Miscellaneous helper classes */
@@ -5895,7 +5962,7 @@ a:focus-within, a:hover {
   background-color: var(--pwt-elevated-background-color);
 }
 .pwt-nav-pills .pwt-nav-link.disabled {
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
   cursor: auto;
 }
 .pwt-nav-pills a {
@@ -5952,7 +6019,7 @@ a:focus-within, a:hover {
   color: var(--pwt-color-primary);
 }
 .pwt-tab-material .pwt-nav-link.disabled {
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
   cursor: auto;
 }
 .pwt-tab-material a {
diff --git a/docs/css/material-yew-style.css b/docs/css/material-yew-style.css
index 112e241..b43c220 100644
--- a/docs/css/material-yew-style.css
+++ b/docs/css/material-yew-style.css
@@ -366,6 +366,11 @@ table {
   --pwt-state-layer-opacity-5: 14%;
 }
 
+/* Opacity of elements in certain states. */
+:root {
+  --pwt-disabled-opacity: 0.38;
+}
+
 /* Font setup */
 @font-face {
   font-family: "Roboto Flex";
@@ -4020,7 +4025,7 @@ h6,
   --pwt-color-background: var(--pwt-color-inverse-surface) ;
   --pwt-color: var(--pwt-color-on-inverse-surface)  ;
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 button,
@@ -4056,7 +4061,7 @@ button,
 }
 .pwt-button.disabled, .pwt-button:disabled, .pwt-button[aria-disabled=true] {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
   box-shadow: var(--pwt-color-shadow) 0px calc(var(--pwt-elevation-level-0) / 2) var(--pwt-elevation-level-0);
 }
 .pwt-button.disabled:not(.pwt-button-text), .pwt-button:disabled:not(.pwt-button-text), .pwt-button[aria-disabled=true]:not(.pwt-button-text) {
@@ -4822,6 +4827,68 @@ tr.row-cursor {
   cursor: pointer;
 }
 
+.pwt-date-panel {
+  display: grid;
+  text-align: center;
+  align-items: center;
+}
+.pwt-date-panel .pwt-date-panel-item {
+  font-family: "Roboto Flex";
+  font-size: 14px;
+  font-weight: 500;
+  font-variation-settings: "opsz" 14, "wdth" 110, "wght" 500;
+  line-height: 20px;
+  --pwt-color-background: var(--pwt-color-neutral) ;
+  --pwt-color: var(--pwt-color-on-neutral)  ;
+  color: var(--pwt-color);
+  background-color: var(--pwt-color-background);
+  cursor: pointer;
+  padding: var(--pwt-spacer-1);
+  border-radius: var(--pwt-shape-corner-small) !important;
+  min-width: 2em;
+}
+.pwt-date-panel .pwt-date-panel-item:hover {
+  --pwt-elevated-background-color: color-mix( in srgb, var(--pwt-color) var(--pwt-state-layer-opacity-hover), var(--pwt-color-background) );
+  background-color: var(--pwt-elevated-background-color);
+}
+.pwt-date-panel .pwt-date-panel-item:focus, .pwt-date-panel .pwt-date-panel-item.focused {
+  outline: 2px solid var(--pwt-color-on-surface);
+  outline-offset: -2px;
+}
+.pwt-date-panel .pwt-date-panel-item.selected {
+  --pwt-color-background: var(--pwt-color-primary) ;
+  --pwt-color: var(--pwt-color-on-primary)  ;
+}
+.pwt-date-panel .pwt-date-panel-item.disabled {
+  opacity: var(--pwt-disabled-opacity);
+  cursor: default !important;
+}
+.pwt-date-panel .pwt-date-panel-item.other-month {
+  opacity: 0.5;
+}
+.pwt-date-panel .pwt-date-panel-item.pwt-today {
+  --pwt-color-background: var(--pwt-color-secondary-container) ;
+  --pwt-color: var(--pwt-color-on-secondary-container)  ;
+}
+.pwt-date-panel .pwt-date-panel-header {
+  font-family: "Roboto Flex";
+  font-size: 11px;
+  font-weight: 500;
+  font-variation-settings: "opsz" 11, "wdth" 130, "wght" 500;
+  line-height: 16px;
+  opacity: 0.5;
+  padding: var(--pwt-spacer-1);
+}
+.pwt-date-panel .pwt-date-panel-week-number {
+  font-family: "Roboto Flex";
+  font-size: 11px;
+  font-weight: 500;
+  font-variation-settings: "opsz" 11, "wdth" 130, "wght" 500;
+  line-height: 16px;
+  opacity: 0.5;
+  padding: var(--pwt-spacer-1);
+}
+
 dialog.pwt-outer-dialog {
   overflow: visible;
   background-color: transparent;
@@ -4869,33 +4936,33 @@ dialog.pwt-outer-dialog > .pwt-dialog {
   touch-action: none;
 }
 .pwt-dialog .dialog-resize-handle.west, .pwt-dialog .dialog-resize-handle.east, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west {
-  width: 5px;
+  width: var(--pwt-spacer-2);
 }
 .pwt-dialog .dialog-resize-handle.north, .pwt-dialog .dialog-resize-handle.south, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west {
-  height: 5px;
+  height: var(--pwt-spacer-2);
 }
 .pwt-dialog .dialog-resize-handle.west {
-  top: 5px;
-  bottom: 5px;
+  top: var(--pwt-spacer-2);
+  bottom: var(--pwt-spacer-2);
   left: 0px;
   cursor: w-resize;
 }
 .pwt-dialog .dialog-resize-handle.east {
-  top: 5px;
-  bottom: 5px;
+  top: var(--pwt-spacer-2);
+  bottom: var(--pwt-spacer-2);
   right: 0px;
   cursor: e-resize;
 }
 .pwt-dialog .dialog-resize-handle.north {
   top: 0px;
-  left: 5px;
-  right: 5px;
+  left: var(--pwt-spacer-2);
+  right: var(--pwt-spacer-2);
   cursor: n-resize;
 }
 .pwt-dialog .dialog-resize-handle.south {
   bottom: 0px;
-  left: 5px;
-  right: 5px;
+  left: var(--pwt-spacer-2);
+  right: var(--pwt-spacer-2);
   cursor: s-resize;
 }
 .pwt-dialog .dialog-resize-handle.north-west {
@@ -5160,7 +5227,7 @@ input[aria-disabled=true] {
 }
 .pwt-input.disabled, .pwt-input:disabled, .pwt-input[aria-disabled=true] {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 .pwt-input.pwt-input-type-number .spinner i {
@@ -5187,7 +5254,7 @@ input[aria-disabled=true] {
 }
 
 .pwt-label-disabled {
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 .pwt-switch {
@@ -5241,7 +5308,7 @@ input[aria-disabled=true] {
 }
 .pwt-switch.disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 .pwt-checkbox-state {
@@ -5295,7 +5362,7 @@ input[aria-disabled=true] {
 }
 .pwt-checkbox.disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 .pwt-checkbox.disabled.checked {
   color: var(--pwt-color);
@@ -5336,7 +5403,7 @@ input[aria-disabled=true] {
 }
 .pwt-radio-button.disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 .pwt-textarea {
@@ -5364,7 +5431,7 @@ input[aria-disabled=true] {
 }
 .pwt-textarea.disabled, .pwt-textarea:disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 .pwt-input-display {
@@ -5482,7 +5549,7 @@ ul.pwt-menubar .pwt-menubar-item:focus-visible {
 }
 ul.pwt-menubar .pwt-menubar-item[disabled], ul.pwt-menubar .pwt-menubar-item[aria-disabled=true] {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 ul.pwt-menubar .pwt-menubar-item-icon {
   font-size: 16px;
@@ -5520,7 +5587,7 @@ ul.pwt-menu .pwt-menu-item {
 }
 ul.pwt-menu .pwt-menu-item[disabled], ul.pwt-menu .pwt-menu-item[aria-disabled=true] {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 ul.pwt-menu .pwt-menu-item:focus-visible {
   outline: 2px solid var(--pwt-color-focus);
@@ -5660,7 +5727,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) {
 }
 .pwt-mini-scroll .pwt-mini-scroll-left-arrow.visible.disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 .pwt-mini-scroll .pwt-mini-scroll-right-arrow {
   overflow: hidden;
@@ -5685,7 +5752,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) {
 }
 .pwt-mini-scroll .pwt-mini-scroll-right-arrow.visible.disabled {
   cursor: auto;
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
 }
 
 /* Miscellaneous helper classes */
@@ -5895,7 +5962,7 @@ a:focus-within, a:hover {
   background-color: var(--pwt-elevated-background-color);
 }
 .pwt-nav-pills .pwt-nav-link.disabled {
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
   cursor: auto;
 }
 .pwt-nav-pills a {
@@ -5952,7 +6019,7 @@ a:focus-within, a:hover {
   color: var(--pwt-color-primary);
 }
 .pwt-tab-material .pwt-nav-link.disabled {
-  opacity: 0.5;
+  opacity: var(--pwt-disabled-opacity);
   cursor: auto;
 }
 .pwt-tab-material a {
@@ -6754,13 +6821,18 @@ ul.pwt-menubar {
 }
 .pwt-tab-material .pwt-nav-link span {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 0;
 }
-.pwt-tab-material .pwt-nav-link span:before {
+.pwt-tab-material.primary .pwt-nav-link span {
+  gap: 0;
+  flex-direction: column;
+}
+.pwt-tab-material.primary .pwt-nav-link span:before {
   font-size: 20px;
 }
+.pwt-tab-material.secondary span {
+  flex-direction: row;
+}
 
 .pwt-datatable-content:not(.table-borderless) tr {
   border-color: var(--pwt-elevated-background-color);
-- 
2.47.3

[PATCH yew-widget-toolkit 1/1] gridpicker/combobox: allow autoselecting the filter field

[Shannon Sterz]

Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
 src/widget/form/combobox.rs | 8 ++++++++
 src/widget/grid_picker.rs   | 6 ++++++
 2 files changed, 14 insertions(+)

diff --git a/src/widget/form/combobox.rs b/src/widget/form/combobox.rs
index db4505f6..efc2365f 100644
--- a/src/widget/form/combobox.rs
+++ b/src/widget/form/combobox.rs
@@ -99,6 +99,11 @@ pub struct Combobox {
     #[prop_or_default]
     #[builder]
     pub trigger: Vec<(Trigger, bool)>,
+
+    /// Whether the filter should be auto-selected when the picker is displayed.
+    #[builder(IntoPropValue, into_prop_value)]
+    #[prop_or_default]
+    pub autoselect_filter: Option<bool>,
 }
 
 impl Default for Combobox {
@@ -295,6 +300,8 @@ impl Component for PwtCombobox {
             .show_filter
             .unwrap_or_else(|| self.store.data_len() > 10);
 
+        let auto_select_filter = ctx.props().autoselect_filter;
+
         let filter = props.filter.clone();
 
         let columns = Rc::clone(&self.columns);
@@ -311,6 +318,7 @@ impl Component for PwtCombobox {
                 .selection(args.selection.clone())
                 .show_filter(show_filter)
                 .filter(filter.clone())
+                .autoselect_filter(auto_select_filter)
                 .on_select(args.controller.on_select_callback());
 
             if show_filter {
diff --git a/src/widget/grid_picker.rs b/src/widget/grid_picker.rs
index 5e8d44d0..304e54a2 100644
--- a/src/widget/grid_picker.rs
+++ b/src/widget/grid_picker.rs
@@ -74,6 +74,11 @@ pub struct GridPicker<S: DataStore> {
     #[builder_cb(IntoTextFilterFn, into_text_filter_fn, S::Record)]
     #[prop_or_default]
     pub filter: Option<TextFilterFn<S::Record>>,
+
+    /// Whether the filter should be auto-selected when the picker is displayed.
+    #[builder(IntoPropValue, into_prop_value)]
+    #[prop_or_default]
+    pub autoselect_filter: Option<bool>,
 }
 
 impl<S: DataStore> GridPicker<S> {
@@ -196,6 +201,7 @@ impl<S: DataStore + 'static> Component for PwtGridPicker<S> {
                 .with_child(html! {<label for="testinput">{"Filter"}</label>})
                 .with_child(
                     Input::new()
+                        .autofocus(ctx.props().autoselect_filter.unwrap_or_default())
                         .attribute("autocomplete", "off")
                         .attribute("size", "1") // make size minimal
                         .class("pwt-input")
-- 
2.47.3

applied: [PATCH yew-widget-toolkit/yew-widget-toolkit-assets 0/4] yew ui tweaks

[Dominik Csapak]

On 3/5/26 12:22 PM, Shannon Sterz wrote:
> these patches add minor usability  tweaks to
> proxmox-yew-widget-toolkit-assets and proxmox-yew-widget-toolkit. the
> first patch increases the area for drag handles on dialogs for lower
> density themes. the second patch decreases the opacity for disabled
> input elements further to match material design 3' approach.
> 
> then follows a clean up commit. finally an option is introduced to allow
> making the filter field in gridpicker's and combobox auto-selectable.
> thus, putting the cursor of the user into the filter field when the
> combobox is opened.
> 
> [...]

Applied whole series, thanks!