Implements HTMXAttribute strategy

Adds the new HtmxAttribute, uses it in our code, and updates the documentation.

Closes #3456435

css/htmx-off-canvas.css

@@ -13,8 +13,25 @@
   background-color: transparent;
 }
 
+#drupal-off-canvas-wrapper button.button--htmx.ui-dialog-titlebar-close {
+  position: absolute;
+  top: revert;
+  transform: revert;
+}
+
+#drupal-off-canvas-wrapper div.ui-dialog-titlebar {
+  display: flex;
+  align-items: center;
+  min-height: 55px;
+}
+
+#drupal-off-canvas-wrapper span.ui-dialog-title {
+  display: inline-block;
+  vertical-align: center;
+}
+
 #drupal-off-canvas-wrapper .button--htmx-refresh::before {
-  content: '↺';
+  content: "↺";
   color: rgb(255, 255, 255);
   font-size: larger;
 }
@@ -33,11 +50,16 @@
   color: rgba(0, 0, 0, 0);
 }
 
+#drupal-off-canvas-wrapper .ui-dialog-titlebar {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 .htmx-dialog-off-canvas {
   width: 100%;
   min-height: 100vh;
   margin: 0 0 0 auto;
-  transition: .3s;
+  transition: 0.3s;
   transform: translateX(100%);
 }
 
@@ -52,7 +74,6 @@
   transform: translateX(0);
 }
 
-
 #drupal-off-canvas-wrapper .htmx-indicator,
 .htmx-indicator {
   display: none;
@@ -70,7 +91,7 @@
 .htmx-request.htmx-indicator::before,
 .htmx-request .htmx-indicator::before {
   margin-right: 0.5em;
-  content: '↺';
+  content: "↺";
   font-size: larger;
 }