From ebdcf2b7b88122be124b5e0b14e5afff8627c2bc Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Wed, 4 Dec 2024 14:11:18 -0500
Subject: [PATCH] PrimeFaces 15.0.0-RC1

---
 pom.xml                                       |   4 +-
 .../org/primefaces/showcase/menu/AppMenu.java |  15 +-
 .../showcase/service/CountryService.java      |  19 +-
 .../resources/template/template.xhtml         |   5 +-
 .../resources/ui/data/datatable/edit.xhtml    |   8 +-
 .../resources/ui/file/upload/advanced.xhtml   | 182 ++++++++
 .../resources/ui/file/upload/auto.xhtml       |  32 --
 .../resources/ui/file/upload/basic.xhtml      |  57 ---
 .../resources/ui/file/upload/basicAuto.xhtml  |  63 ---
 .../resources/ui/file/upload/chunked.xhtml    |  31 --
 .../resources/ui/file/upload/dnd.xhtml        |  56 ---
 .../resources/ui/file/upload/multiple.xhtml   |  32 --
 .../resources/ui/file/upload/simple.xhtml     | 152 +++++++
 .../resources/ui/file/upload/single.xhtml     |  33 --
 .../resources/ui/file/upload/tooltips.xhtml   |  65 ---
 .../ui/input/calendar/calendar.xhtml          |  37 +-
 .../ui/input/calendar/calendarJava8.xhtml     |  40 +-
 .../ui/input/datepicker/datePicker.xhtml      | 387 ++++++++----------
 .../ui/input/datepicker/datePickerJava8.xhtml | 106 +++--
 .../META-INF/resources/ui/message/growl.xhtml |   2 +-
 .../resources/ui/message/messages.xhtml       |  31 +-
 .../resources/ui/message/staticMessage.xhtml  |  10 +-
 .../resources/ui/misc/feedReader.xhtml        |  10 +-
 .../resources/ui/multimedia/barcode.xhtml     |  26 +-
 .../resources/ui/multimedia/qrcode.xhtml      |  12 +-
 25 files changed, 635 insertions(+), 780 deletions(-)
 create mode 100644 src/main/resources/META-INF/resources/ui/file/upload/advanced.xhtml
 delete mode 100644 src/main/resources/META-INF/resources/ui/file/upload/auto.xhtml
 delete mode 100644 src/main/resources/META-INF/resources/ui/file/upload/basic.xhtml
 delete mode 100644 src/main/resources/META-INF/resources/ui/file/upload/basicAuto.xhtml
 delete mode 100644 src/main/resources/META-INF/resources/ui/file/upload/chunked.xhtml
 delete mode 100644 src/main/resources/META-INF/resources/ui/file/upload/dnd.xhtml
 delete mode 100644 src/main/resources/META-INF/resources/ui/file/upload/multiple.xhtml
 create mode 100644 src/main/resources/META-INF/resources/ui/file/upload/simple.xhtml
 delete mode 100644 src/main/resources/META-INF/resources/ui/file/upload/single.xhtml
 delete mode 100644 src/main/resources/META-INF/resources/ui/file/upload/tooltips.xhtml

diff --git a/pom.xml b/pom.xml
index 539bcf56e..6f7ee160b 100644
--- a/pom.xml
+++ b/pom.xml
@@ -4,7 +4,7 @@
     <modelVersion>4.0.0</modelVersion>
     <groupId>com.melloware</groupId>
     <artifactId>quarkus-faces</artifactId>
-    <version>14.0.8</version>
+    <version>15.0.0-RC1</version>
     <packaging>jar</packaging>
     <name>quarkus-faces</name>
     <description>Quarkus version of the PrimeFaces Showcase with many optimizations</description>
@@ -15,7 +15,7 @@
         <lombok.version>1.18.36</lombok.version>
         <myfaces.version>4.1.0-RC3</myfaces.version>
         <omnifaces-quarkus.version>4.6.1</omnifaces-quarkus.version>
-        <primefaces-quarkus.version>3.14.8</primefaces-quarkus.version>
+        <primefaces-quarkus.version>3.15.0-RC1</primefaces-quarkus.version>
         <quarkus.version>3.17.3</quarkus.version>
     </properties>
     <dependencyManagement>
diff --git a/src/main/java/org/primefaces/showcase/menu/AppMenu.java b/src/main/java/org/primefaces/showcase/menu/AppMenu.java
index c6ce7ba26..c197fdc00 100644
--- a/src/main/java/org/primefaces/showcase/menu/AppMenu.java
+++ b/src/main/java/org/primefaces/showcase/menu/AppMenu.java
@@ -400,8 +400,8 @@ public void init() {
         //MULTIMEDIA CATEGORY START
         List<MenuItem> multimediaMenuItems = new ArrayList<>();
         multimediaMenuItems.add(new MenuItem("Audio", "/ui/multimedia/audio"));
-        multimediaMenuItems.add(new MenuItem("Barcode", "/ui/multimedia/barcode"));
-        multimediaMenuItems.add(new MenuItem("QRCode", "/ui/multimedia/qrcode"));
+        multimediaMenuItems.add(new MenuItem("Barcode", "/ui/multimedia/barcode", "Updated"));
+        multimediaMenuItems.add(new MenuItem("QRCode", "/ui/multimedia/qrcode", "Updated"));
         multimediaMenuItems.add(new MenuItem("Image Compare", "/ui/multimedia/compare"));
 
         //Cropper Nested MenuItem
@@ -445,14 +445,8 @@ public void init() {
 
         //Upload Nested MenuItem
         List<MenuItem> uploadMenuItems = new ArrayList<>();
-        uploadMenuItems.add(new MenuItem("Basic", "/ui/file/upload/basic"));
-        uploadMenuItems.add(new MenuItem("Basic Auto", "/ui/file/upload/basicAuto"));
-        uploadMenuItems.add(new MenuItem("Single", "/ui/file/upload/single"));
-        uploadMenuItems.add(new MenuItem("Multiple", "/ui/file/upload/multiple"));
-        uploadMenuItems.add(new MenuItem("Auto", "/ui/file/upload/auto"));
-        uploadMenuItems.add(new MenuItem("DragDrop", "/ui/file/upload/dnd"));
-        uploadMenuItems.add(new MenuItem("Chunked", "/ui/file/upload/chunked"));
-        uploadMenuItems.add(new MenuItem("Tooltips", "/ui/file/upload/tooltips"));
+        uploadMenuItems.add(new MenuItem("Simple", "/ui/file/upload/simple"));
+        uploadMenuItems.add(new MenuItem("Advanced", "/ui/file/upload/advanced"));
         fileMenuItems.add(new MenuItem("File Upload", uploadMenuItems));
 
         fileMenuItems.add(new MenuItem("File Download", "/ui/file/download"));
@@ -513,6 +507,7 @@ public void init() {
 
         miscMenuItems.add(new MenuItem("Effect", "/ui/misc/effect"));
         miscMenuItems.add(new MenuItem("ExceptionHandler", "/ui/misc/exceptionHandler"));
+        miscMenuItems.add(new MenuItem("FeedReader", "/ui/misc/feedReader", "Updated"));
         miscMenuItems.add(new MenuItem("IdleMonitor", "/ui/misc/idleMonitor"));
         miscMenuItems.add(new MenuItem("ImportConstants", "/ui/misc/importConstants"));
         miscMenuItems.add(new MenuItem("ImportEnum", "/ui/misc/importEnum"));
diff --git a/src/main/java/org/primefaces/showcase/service/CountryService.java b/src/main/java/org/primefaces/showcase/service/CountryService.java
index 35122bd5b..323185dd9 100644
--- a/src/main/java/org/primefaces/showcase/service/CountryService.java
+++ b/src/main/java/org/primefaces/showcase/service/CountryService.java
@@ -23,14 +23,16 @@
  */
 package org.primefaces.showcase.service;
 
-import java.util.*;
-import java.util.stream.Collectors;
-import java.util.stream.Stream;
-
-
 import jakarta.annotation.PostConstruct;
 import jakarta.enterprise.context.ApplicationScoped;
 import jakarta.inject.Named;
+import java.util.ArrayList;
+import java.util.Comparator;
+import java.util.List;
+import java.util.Locale;
+import java.util.Map;
+import java.util.stream.Collectors;
+import java.util.stream.Stream;
 
 import org.primefaces.showcase.domain.Country;
 
@@ -72,6 +74,7 @@ public void init() {
         locales.add(CountryService.toCountry(Locale.FRANCE));
         locales.add(CountryService.toCountry(Locale.GERMANY));
         locales.add(CountryService.toCountry(new Locale("de", "AT")));
+        locales.add(CountryService.toCountry(new Locale("de", "CH")));
         locales.add(CountryService.toCountry(Locale.ITALY));
         locales.add(CountryService.toCountry(Locale.KOREA));
         locales.add(CountryService.toCountry(new Locale("es", "ES")));
@@ -82,6 +85,8 @@ public void init() {
         locales.add(CountryService.toCountry(new Locale("ar", "SA"), true));
         locales.add(CountryService.toCountry(new Locale("ar", "TN"), true));
         locales.add(CountryService.toCountry(new Locale("bg", "BG")));
+        locales.add(CountryService.toCountry(new Locale("bn", "BD")));
+        locales.add(CountryService.toCountry(new Locale("bs", "BA")));
         locales.add(CountryService.toCountry(new Locale("cs", "CZ")));
         locales.add(CountryService.toCountry(new Locale("el", "GR")));
         locales.add(CountryService.toCountry(new Locale("fa", "IR"), true));
@@ -107,11 +112,13 @@ public void init() {
         locales.add(CountryService.toCountry(new Locale("ru", "RU")));
         locales.add(CountryService.toCountry(new Locale("sk", "SK")));
         locales.add(CountryService.toCountry(new Locale("sl", "SI")));
+        locales.add(CountryService.toCountry(new Locale("sr", "BA")));
         locales.add(CountryService.toCountry(new Locale("sr", "RS")));
         locales.add(CountryService.toCountry(new Locale("sv", "SE")));
         locales.add(CountryService.toCountry(new Locale("th", "TH")));
         locales.add(CountryService.toCountry(new Locale("tr", "TR")));
         locales.add(CountryService.toCountry(new Locale("uk", "UA")));
+        locales.add(CountryService.toCountry(new Locale("uz", "UZ")));
         locales.add(CountryService.toCountry(new Locale("vi", "VN")));
         locales.add(CountryService.toCountry(Locale.SIMPLIFIED_CHINESE));
         locales.add(CountryService.toCountry(Locale.TRADITIONAL_CHINESE));
@@ -138,4 +145,4 @@ public Map<Integer, Country> getLocalesAsMap() {
         }
         return localesAsMap;
     }
-}
+}
\ No newline at end of file
diff --git a/src/main/resources/META-INF/resources/template/template.xhtml b/src/main/resources/META-INF/resources/template/template.xhtml
index 6439fc1ce..7247844cb 100644
--- a/src/main/resources/META-INF/resources/template/template.xhtml
+++ b/src/main/resources/META-INF/resources/template/template.xhtml
@@ -108,10 +108,7 @@
         <h:outputScript name="jquery/jquery.js" library="primefaces" target="head"/>
         <h:outputScript name="jquery/jquery-plugins.js" library="primefaces" target="head"/>
         <h:outputScript name="locales/locale-#{app.locale.language}.js" library="primefaces" target="head"/>
-        <h:outputScript name="moment/moment.js" library="primefaces" target="head"/>
-        <h:outputScript name="validation/validation.js" library="primefaces" target="head"/>
-        <h:outputScript name="validation/validation.bv.js" library="primefaces" target="head"/>
     </f:view>
 </h:body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/META-INF/resources/ui/data/datatable/edit.xhtml b/src/main/resources/META-INF/resources/ui/data/datatable/edit.xhtml
index b4c9ee232..f68939d8a 100644
--- a/src/main/resources/META-INF/resources/ui/data/datatable/edit.xhtml
+++ b/src/main/resources/META-INF/resources/ui/data/datatable/edit.xhtml
@@ -117,10 +117,10 @@
                                 <h:outputText value="#{product.inventoryStatus}"/>
                             </f:facet>
                             <f:facet name="input">
-                                <h:selectOneMenu value="#{product.inventoryStatus}" style="width:100%">
+                                <p:selectOneMenu value="#{product.inventoryStatus}" style="width:100%">
                                     <f:selectItems value="#{dtEditView.inventoryStatusList}" var="status"
                                                    itemLabel="#{status.text}" itemValue="#{status}"/>
-                                </h:selectOneMenu>
+                                </p:selectOneMenu>
                             </f:facet>
                         </p:cellEditor>
                     </p:column>
@@ -176,10 +176,10 @@
                                 <h:outputText value="#{product.inventoryStatus}"/>
                             </f:facet>
                             <f:facet name="input">
-                                <h:selectOneMenu value="#{product.inventoryStatus}" style="width:100%">
+                                <p:selectOneMenu value="#{product.inventoryStatus}" style="width:100%">
                                     <f:selectItems value="#{dtEditView.inventoryStatusList}" var="status"
                                                    itemLabel="#{status.text}" itemValue="#{status}"/>
-                                </h:selectOneMenu>
+                                </p:selectOneMenu>
                             </f:facet>
                         </p:cellEditor>
                     </p:column>
diff --git a/src/main/resources/META-INF/resources/ui/file/upload/advanced.xhtml b/src/main/resources/META-INF/resources/ui/file/upload/advanced.xhtml
new file mode 100644
index 000000000..cff636fff
--- /dev/null
+++ b/src/main/resources/META-INF/resources/ui/file/upload/advanced.xhtml
@@ -0,0 +1,182 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:ui="jakarta.faces.facelets"
+                xmlns:h="jakarta.faces.html"
+                xmlns:f="jakarta.faces.core"
+                xmlns:p="primefaces"
+                template="/template/template.xhtml">
+
+    <ui:define name="head">
+        <style>
+            body .ui-inputfield.ui-state-drag {
+                background: #ffffd6;
+            }
+        </style>
+    </ui:define>
+
+    <ui:define name="title">
+        FileUpload <span class="subitem">Advanced</span>
+    </ui:define>
+
+    <ui:define name="description">
+        Advanced FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
+    </ui:define>
+
+    <ui:param name="documentationLink" value="/components/fileupload"/>
+    <ui:param name="widgetLink" value="FileUpload-1"/>
+
+    <ui:define name="implementation">
+        <div class="card">
+            <h5>Single</h5>
+
+            <p>Single mode allows only one file to be selected at a time from the native file dialog.</p>
+
+            <h:form id="single" enctype="multipart/form-data">
+                <p:fileUpload id="upload" listener="#{fileUploadView.handleFileUpload}"
+                              mode="advanced" multiple="false"
+                              accept=".gif,.jpg,.jpeg,.png"
+                              update="growl"
+                              onupload="return confirm('Are you sure?')">
+                    <p:validateFile sizeLimit="1000000" fileLimit="3" allowTypes="/(\.|\/)(gif|jpeg|jpg|png)$/"
+                                    contentType="true"/>
+                </p:fileUpload>
+
+                <p:growl id="growl" showDetail="true" keepAlive="true"/>
+            </h:form>
+        </div>
+
+        <div class="card">
+            <h5>Multiple</h5>
+
+            <p>Multiple mode allows multiple files to be selected from the native file dialog if supported by the browser.</p>
+
+            <h:form id="multiple" enctype="multipart/form-data">
+                <p:fileUpload id="upload" listener="#{fileUploadView.handleFileUpload}"
+                              mode="advanced" multiple="true"
+                              accept=".gif,.jpg,.jpeg,.png"
+                              update="growl">
+                    <p:validateFile sizeLimit="1000000" fileLimit="3" allowTypes="/(\.|\/)(gif|jpeg|jpg|png)$/"/>
+                </p:fileUpload>
+
+                <p:growl id="growl" showDetail="true" keepAlive="true"/>
+            </h:form>
+        </div>
+
+        <div class="card">
+            <h5>Auto</h5>
+
+            <p>Upload process begins once the file is selected in auto mode.</p>
+
+            <h:form id="auto" enctype="multipart/form-data">
+                <p:fileUpload id="upload" listener="#{fileUploadView.handleFileUpload}" mode="advanced"
+                              update="growl" auto="true">
+                    <p:validateFile sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpeg|jpg|png)$/"/>
+                </p:fileUpload>
+
+                <p:growl id="growl" showDetail="true" keepAlive="true"/>
+            </h:form>
+        </div>
+
+        <div class="card">
+            <h5>Chunked</h5>
+
+            <p>Chunked mode uploads files in (small) chunks to allow resume-functionality.</p>
+
+            <h:form id="chunked" enctype="multipart/form-data">
+                <p:fileUpload id="upload" listener="#{fileUploadView.handleFileUpload}" mode="advanced"
+                              multiple="true"
+                              update="growl"
+                              maxChunkSize="1000000">
+                    <p:validateFile sizeLimit="10000000" fileLimit="3" allowTypes="/(\.|\/)(gif|jpeg|jpg|png)$/"/>
+                </p:fileUpload>
+
+                <p:growl id="growl" showDetail="true" keepAlive="true"/>
+            </h:form>
+        </div>
+
+
+        <div class="card">
+            <h5>Custom Drag&amp;Drop</h5>
+
+            <p>Per default, the FileUpload itself is the drop zone. In addition FileUpload supports a custom dropZone.</p>
+
+            <h:form id="dropZone" enctype="multipart/form-data">
+                <div class="ui-fluid">
+                    <div class="field">
+                        <p:inputTextarea id="customDropZone" widgetVar="textarea"
+                                         rows="5" value="#{fileUploadView.dropZoneText}"/>
+                        <small>
+                            Drop on the text area to upload, or
+                            <p:link value="choose" onclick="PF('uploadDnd').show();return false"
+                                    style="font-size:inherit"/>.
+                        </small>
+                    </div>
+                </div>
+
+                <p:fileUpload id="upload" widgetVar="uploadDnd" listener="#{fileUploadView.handleFileUploadTextarea}"
+                              mode="advanced" auto="true"
+                              dropZone="customDropZone"
+                              update="@form"
+                              style="display: none">
+                    <p:validateFile allowTypes="/(\.|\/)(gif|jpeg|jpg|png)$/" sizeLimit="100000"/>
+                </p:fileUpload>
+
+                <p:growl id="growl" showDetail="true" keepAlive="true"/>
+            </h:form>
+        </div>
+
+        <div class="card">
+            <h5>Empty Facet</h5>
+
+            <p>The empty-facet is rendered when no files are added yet.</p>
+
+            <h:form id="empty" enctype="multipart/form-data">
+                <p:fileUpload id="upload" listener="#{fileUploadView.handleFileUpload}" mode="advanced"
+                              multiple="true"
+                              update="growl">
+                    <f:facet name="empty">
+                        Drag and drop files to here to upload.
+                    </f:facet>
+                    <p:validateFile sizeLimit="100000" fileLimit="3" allowTypes="/(\.|\/)(gif|jpeg|jpg|png)$/"/>
+                </p:fileUpload>
+
+                <p:growl id="growl" showDetail="true" keepAlive="true"/>
+            </h:form>
+        </div>
+
+        <div class="card">
+            <h5>Tooltips</h5>
+
+            <p>Tooltips can be attached to each one of FileUpload buttons in advanced mode using PFS. Moreover, you can use plain html browser native titles as well.</p>
+
+            <h:form id="tooltips" enctype="multipart/form-data">
+
+                <p:fileUpload id="uploader1" mode="advanced" styleClass="block mb-5"/>
+
+                <p:outputPanel id="tooltipsPanel">
+                    <p:tooltip id="uploaderChooseFileBeforeUploadToolTip"
+                               widgetVar="chooseWV" position="top"
+                               for="@(#tooltips\:uploader1 > .ui-fileupload-buttonbar > .ui-fileupload-choose)"
+                               value="Choose button tooltip"/>
+
+                    <p:tooltip id="uploaderUploadButtonToolTip"
+                               position="right"
+                               for="@(#tooltips\:uploader1 > .ui-fileupload-buttonbar > .ui-fileupload-upload)"
+                               value="Upload button tooltip" showEffect="clip"
+                               hideEffect="explode"/>
+
+                    <p:tooltip id="uploaderCancelButtonToolTip"
+                               position="bottom"
+                               for="@(#tooltips\:uploader1 > .ui-fileupload-buttonbar > .ui-fileupload-cancel)"
+                               value="Cancel button tooltip"/>
+                </p:outputPanel>
+
+                <p:fileUpload id="uploader2" mode="advanced" styleClass="block mb-5"
+                              chooseButtonTitle="Choose button tooltip"
+                              uploadButtonTitle="Upload button tooltip"
+                              cancelButtonTitle="Cancel button tooltip"/>
+            </h:form>
+        </div>
+
+    </ui:define>
+
+</ui:composition>
\ No newline at end of file
diff --git a/src/main/resources/META-INF/resources/ui/file/upload/auto.xhtml b/src/main/resources/META-INF/resources/ui/file/upload/auto.xhtml
deleted file mode 100644
index 148e285c4..000000000
--- a/src/main/resources/META-INF/resources/ui/file/upload/auto.xhtml
+++ /dev/null
@@ -1,32 +0,0 @@
-<ui:composition xmlns="http://www.w3.org/1999/xhtml"
-                xmlns:ui="jakarta.faces.facelets"
-                xmlns:h="jakarta.faces.html"
-                xmlns:f="jakarta.faces.core"
-                xmlns:p="primefaces"
-                template="/template/template.xhtml">
-
-    <ui:define name="title">
-        FileUpload <span class="subitem">Auto</span>
-    </ui:define>
-
-    <ui:define name="description">
-        Upload process begins once the file is selected in auto mode.
-    </ui:define>
-
-    <ui:param name="documentationLink" value="/components/fileupload?id=auto-upload"/>
-    <ui:param name="widgetLink" value="FileUpload-1"/>
-
-    <ui:define name="implementation">
-        <div class="card">
-            <h:form>
-                <p:fileUpload listener="#{fileUploadView.handleFileUpload}" mode="advanced"
-                              update="messages" auto="true">
-                    <p:validateFile sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpeg|jpg|png)$/" />
-                </p:fileUpload>
-
-                <p:growl id="messages" showDetail="true"/>
-            </h:form>
-        </div>
-    </ui:define>
-
-</ui:composition>
diff --git a/src/main/resources/META-INF/resources/ui/file/upload/basic.xhtml b/src/main/resources/META-INF/resources/ui/file/upload/basic.xhtml
deleted file mode 100644
index 0e2bc854f..000000000
--- a/src/main/resources/META-INF/resources/ui/file/upload/basic.xhtml
+++ /dev/null
@@ -1,57 +0,0 @@
-<ui:composition xmlns="http://www.w3.org/1999/xhtml"
-                xmlns:ui="jakarta.faces.facelets"
-                xmlns:h="jakarta.faces.html"
-                xmlns:f="jakarta.faces.core"
-                xmlns:p="primefaces"
-                template="/template/template.xhtml">
-
-    <ui:define name="title">
-        FileUpload <span class="subitem">Basic</span>
-    </ui:define>
-
-    <ui:define name="description">
-        Simple uploader uses native browser file upload. Simple uploader is disabled at online demo.
-    </ui:define>
-
-    <ui:param name="documentationLink" value="/components/fileupload"/>
-    <ui:param name="widgetLink" value="FileUpload-1"/>
-
-    <ui:define name="implementation">
-
-        <p:growl id="messages" showDetail="true"/>
-
-        <div class="card">
-            <h5>Single</h5>
-            <h:form enctype="multipart/form-data">
-                <p:fileUpload value="#{fileUploadView.file}" mode="simple" skinSimple="true"/>
-
-                <p:commandButton value="Submit" ajax="false" action="#{fileUploadView.upload}" styleClass="mt-3 ui-button-outlined block"/>
-            </h:form>
-        </div>
-
-        <div class="card">
-            <h5>Single (allowTypes validation)</h5>
-            <h:form enctype="multipart/form-data">
-                <p:fileUpload value="#{fileUploadView.file}" mode="simple" skinSimple="true">
-                    <p:validateFile allowTypes="/(\.|\/)(pdf)$/" />
-                </p:fileUpload>
-
-                <p:commandButton value="Submit" action="#{fileUploadView.upload}" styleClass="mt-3 ui-button-outlined block"
-                                 validateClient="false" process="@form" update="messages"/>
-
-                <p:commandButton value="Submit (+ validateClient)" action="#{fileUploadView.upload}" styleClass="mt-3 ui-button-outlined block"
-                                 validateClient="true" process="@form" update="messages"/>
-            </h:form>
-        </div>
-
-        <div class="card">
-            <h5>Multiple</h5>
-            <h:form enctype="multipart/form-data">
-                <p:fileUpload value="#{fileUploadView.files}" mode="simple" skinSimple="true" multiple="true"/>
-                <p:commandButton value="Submit" ajax="false" action="#{fileUploadView.uploadMultiple}" styleClass="mt-3 ui-button-outlined block"/>
-            </h:form>
-        </div>
-
-    </ui:define>
-
-</ui:composition>
diff --git a/src/main/resources/META-INF/resources/ui/file/upload/basicAuto.xhtml b/src/main/resources/META-INF/resources/ui/file/upload/basicAuto.xhtml
deleted file mode 100644
index 8ccdca659..000000000
--- a/src/main/resources/META-INF/resources/ui/file/upload/basicAuto.xhtml
+++ /dev/null
@@ -1,63 +0,0 @@
-<ui:composition xmlns="http://www.w3.org/1999/xhtml"
-                xmlns:ui="jakarta.faces.facelets"
-                xmlns:h="jakarta.faces.html"
-                xmlns:f="jakarta.faces.core"
-                xmlns:p="primefaces"
-                template="/template/template.xhtml">
-
-    <ui:define name="title">
-        FileUpload <span class="subitem">Basic</span>
-    </ui:define>
-
-    <ui:define name="description">
-        Simple uploader uses native browser file upload. When 'auto' is set to to 'true', AJAX is used to automatically upload it.
-    </ui:define>
-
-    <ui:param name="documentationLink" value="/components/fileupload"/>
-    <ui:param name="widgetLink" value="FileUpload-1"/>
-
-    <ui:define name="implementation">
-
-        <p:growl id="messages" showDetail="true"/>
-        <div class="card">
-            <h5>Single</h5>
-            <h:form id="frmSingle">
-                <p:fileUpload id="upload" value="#{fileUploadView.file}"
-                              mode="simple" skinSimple="true" auto="true"
-                              process="@this" update="messages"
-                              listener="#{fileUploadView.handleFileUpload}" />
-            </h:form>
-        </div>
-        <div class="card">
-            <h5>Single (allowTypes &amp; sizeLimit CSV)</h5>
-            <h:form id="frmSingleCSV">
-                <p:fileUpload id="upload" value="#{fileUploadView.file}"
-                              mode="simple" skinSimple="true" auto="true"
-                              process="@this" update="messages"
-                              listener="#{fileUploadView.handleFileUpload}">
-                    <p:validateFile allowTypes="/(\.|\/)(pdf)$/" sizeLimit="100" />
-                </p:fileUpload>
-            </h:form>
-        </div>
-        <div class="card">
-            <h5>Multiple</h5>
-            <h:form id="frmMulti">
-                <p:fileUpload id="upload" value="#{fileUploadView.files}"
-                              mode="simple" skinSimple="true" multiple="true" auto="true"
-                              process="@this" update="messages"
-                              listener="#{fileUploadView.handleFilesUpload}"/>
-            </h:form>
-        </div>
-        <div class="card">
-            <h5>Multiple (allowTyped &amp; sizeLimit &amp; fileLimit CSV)</h5>
-            <h:form id="frmMultiCSV">
-                <p:fileUpload id="upload" value="#{fileUploadView.files}"
-                              mode="simple" skinSimple="true" multiple="true" auto="true"
-                              process="@this" update="messages"
-                              listener="#{fileUploadView.handleFilesUpload}"
-                              allowTypes="/(\.|\/)(pdf)$/" sizeLimit="100" fileLimit="2" />
-            </h:form>
-        </div>
-    </ui:define>
-
-</ui:composition>
diff --git a/src/main/resources/META-INF/resources/ui/file/upload/chunked.xhtml b/src/main/resources/META-INF/resources/ui/file/upload/chunked.xhtml
deleted file mode 100644
index 208242e8d..000000000
--- a/src/main/resources/META-INF/resources/ui/file/upload/chunked.xhtml
+++ /dev/null
@@ -1,31 +0,0 @@
-<ui:composition xmlns="http://www.w3.org/1999/xhtml"
-                xmlns:ui="jakarta.faces.facelets"
-                xmlns:h="jakarta.faces.html"
-                xmlns:f="jakarta.faces.core"
-                xmlns:p="primefaces"
-                template="/template/template.xhtml">
-
-    <ui:define name="title">
-        FileUpload <span class="subitem">Chunked</span>
-    </ui:define>
-
-    <ui:define name="description">
-        Chunked mode uploads files in (small) chunks to allow resume-functionality.
-    </ui:define>
-
-    <ui:param name="documentationLink" value="/components/fileupload?id=multiple-uploads"/>
-
-    <ui:define name="implementation">
-        <div class="card">
-            <h:form>
-                <p:fileUpload listener="#{fileUploadView.handleFileUpload}" mode="advanced" dragDropSupport="false"
-                              multiple="true" update="messages" maxChunkSize="1000000">
-                    <p:validateFile sizeLimit="10000000" fileLimit="3" allowTypes="/(\.|\/)(gif|jpeg|jpg|png)$/" />
-                </p:fileUpload>
-
-                <p:growl id="messages" showDetail="true" keepAlive="true"/>
-            </h:form>
-        </div>
-    </ui:define>
-
-</ui:composition>
diff --git a/src/main/resources/META-INF/resources/ui/file/upload/dnd.xhtml b/src/main/resources/META-INF/resources/ui/file/upload/dnd.xhtml
deleted file mode 100644
index 4333d2364..000000000
--- a/src/main/resources/META-INF/resources/ui/file/upload/dnd.xhtml
+++ /dev/null
@@ -1,56 +0,0 @@
-<ui:composition xmlns="http://www.w3.org/1999/xhtml"
-                xmlns:ui="jakarta.faces.facelets"
-                xmlns:h="jakarta.faces.html"
-                xmlns:f="jakarta.faces.core"
-                xmlns:p="primefaces"
-                template="/template/template.xhtml">
-
-    <ui:define name="head">
-        <style>
-            body .ui-inputfield.ui-state-drag {
-                background: #ffffd6;
-            }
-        </style>
-    </ui:define>
-
-    <ui:define name="title">
-        FileUpload <span class="subitem">Drag and Drop</span>
-    </ui:define>
-
-    <ui:define name="description">
-        In supported browsers, a file can be selected by dragdrop from filesystem. FileUpload component itself is the drop zone.
-    </ui:define>
-
-    <ui:param name="documentationLink" value="/components/fileupload"/>
-    <ui:param name="widgetLink" value="FileUpload-1"/>
-
-    <ui:define name="implementation">
-        <div class="card">
-            <h:form>
-                <p:growl id="messages" showDetail="true"/>
-
-                <h5>Basic</h5>
-                <p:fileUpload listener="#{fileUploadView.handleFileUpload}" mode="advanced" dragDropSupport="true"
-                              update="messages">
-                        <p:validateFile sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpeg|jpg|png)$/" />
-                </p:fileUpload>
-
-                <h5>Drop Zone</h5>
-                <div class="ui-fluid">
-                    <div class="field">
-                        <p:inputTextarea id="customDropZone" widgetVar="textarea"
-                                         rows="5" value="#{fileUploadView.dropZoneText}"/>
-                        <small>
-                            Drop on the text area to upload, or
-                            <p:link value="choose" onclick="PF('uploadDnd').show();return false" style="font-size:inherit"/>.
-                        </small>
-                    </div>
-                </div>
-                <p:fileUpload widgetVar="uploadDnd" listener="#{fileUploadView.handleFileUploadTextarea}"
-                              sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpeg|jpg|png)$/" dropZone="customDropZone"
-                              style="display: none"/>
-            </h:form>
-        </div>
-    </ui:define>
-
-</ui:composition>
diff --git a/src/main/resources/META-INF/resources/ui/file/upload/multiple.xhtml b/src/main/resources/META-INF/resources/ui/file/upload/multiple.xhtml
deleted file mode 100644
index b41c3fc7c..000000000
--- a/src/main/resources/META-INF/resources/ui/file/upload/multiple.xhtml
+++ /dev/null
@@ -1,32 +0,0 @@
-<ui:composition xmlns="http://www.w3.org/1999/xhtml"
-                xmlns:ui="jakarta.faces.facelets"
-                xmlns:h="jakarta.faces.html"
-                xmlns:f="jakarta.faces.core"
-                xmlns:p="primefaces"
-                template="/template/template.xhtml">
-
-    <ui:define name="title">
-        FileUpload <span class="subitem">Multiple</span>
-    </ui:define>
-
-    <ui:define name="description">
-        Multiple mode allows multiple files to be selected from the native file dialog. Note that legacy browsers do not support multiple selection.
-    </ui:define>
-
-    <ui:param name="documentationLink" value="/components/fileupload?id=multiple-uploads"/>
-    <ui:param name="widgetLink" value="FileUpload-1"/>
-
-    <ui:define name="implementation">
-        <div class="card">
-            <h:form id="frm">
-                <p:fileUpload id="upl" listener="#{fileUploadView.handleFileUpload}" mode="advanced" dragDropSupport="false"
-                              multiple="true" update="msgs">
-                    <p:validateFile sizeLimit="100000" fileLimit="3" allowTypes="/(\.|\/)(gif|jpeg|jpg|png)$/"/>
-                </p:fileUpload>
-
-                <p:growl id="msgs" showDetail="true" keepAlive="true"/>
-            </h:form>
-        </div>
-    </ui:define>
-
-</ui:composition>
diff --git a/src/main/resources/META-INF/resources/ui/file/upload/simple.xhtml b/src/main/resources/META-INF/resources/ui/file/upload/simple.xhtml
new file mode 100644
index 000000000..d0d22c7d8
--- /dev/null
+++ b/src/main/resources/META-INF/resources/ui/file/upload/simple.xhtml
@@ -0,0 +1,152 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:ui="jakarta.faces.facelets"
+                xmlns:h="jakarta.faces.html"
+                xmlns:p="primefaces"
+                xmlns:jsf="http://xmlns.jcp.org/jsf"
+                template="/template/template.xhtml">
+
+    <ui:define name="head">
+        <style>
+            body .card.ui-state-drag {
+                background-color: #ffffd6;
+            }
+        </style>
+    </ui:define>
+
+    <ui:define name="title">
+        FileUpload <span class="subitem">Simple</span>
+    </ui:define>
+
+    <ui:define name="description">
+        Simple uploader uses native browser file upload.
+    </ui:define>
+
+    <ui:param name="documentationLink" value="/components/fileupload"/>
+    <ui:param name="widgetLink" value="FileUpload-1"/>
+
+    <ui:define name="implementation">
+
+        <p:growl id="growl" showDetail="true" keepAlive="true"/>
+
+        <div class="card">
+            <h5>Unskinned</h5>
+
+            <p>Per default, simple FileUpload just renders the native HTML markup.</p>
+
+            <h:form id="unskinned" enctype="multipart/form-data">
+                <p:fileUpload id="upload" value="#{fileUploadView.file}" mode="simple"/>
+
+                <p:commandButton id="submit" value="Submit" ajax="false" action="#{fileUploadView.upload}"
+                                 styleClass="mt-3 ui-button-outlined block"/>
+            </h:form>
+        </div>
+
+        <div class="card">
+            <h5>Single</h5>
+
+            <p>Single mode allows only one file to be selected at a time from the native file dialog.</p>
+
+            <h:form id="single" enctype="multipart/form-data">
+                <p:fileUpload id="upload" value="#{fileUploadView.file}" mode="simple" skinSimple="true"/>
+
+                <p:commandButton id="submit" value="Submit" ajax="false" action="#{fileUploadView.upload}"
+                                 styleClass="mt-3 ui-button-outlined block"/>
+            </h:form>
+        </div>
+
+        <div class="card">
+            <h5>Multiple</h5>
+
+            <p>Multiple mode allows multiple files to be selected from the native file dialog, if supported by the browser.</p>
+
+            <h:form id="multiple" enctype="multipart/form-data">
+                <p:fileUpload id="upload" value="#{fileUploadView.files}" mode="simple" skinSimple="true"
+                              multiple="true"/>
+                <p:commandButton id="submit" value="Submit" ajax="false" action="#{fileUploadView.uploadMultiple}"
+                                 styleClass="mt-3 ui-button-outlined block"/>
+            </h:form>
+        </div>
+
+        <div class="card">
+            <h5>Single &amp; Validation</h5>
+
+            <p>FileUpload integrates p:validateFile for validation. Even Client-Side-Validation is supported.</p>
+
+            <h:form id="singleValidation" enctype="multipart/form-data">
+                <p:fileUpload id="upload" value="#{fileUploadView.file}" mode="simple" skinSimple="true">
+                    <p:validateFile allowTypes="/(\.|\/)(pdf)$/"/>
+                </p:fileUpload>
+
+                <p:commandButton id="submit" value="Submit" action="#{fileUploadView.upload}"
+                                 styleClass="mt-3 ui-button-outlined block"
+                                 validateClient="false" process="@form" update=":growl"/>
+
+                <p:commandButton id="submitCSV" value="Submit (+ validateClient)" action="#{fileUploadView.upload}"
+                                 styleClass="mt-3 ui-button-outlined block"
+                                 validateClient="true" process="@form" update=":growl"/>
+            </h:form>
+        </div>
+
+
+        <div class="card">
+            <h5>Auto &amp; Single</h5>
+
+            <p>Auto-Mode uploads the file immediately via AJAX.</p>
+
+            <h:form id="autoSingle">
+                <p:fileUpload id="upload" value="#{fileUploadView.file}"
+                              mode="simple" skinSimple="true" auto="true"
+                              process="@this" update=":growl"
+                              listener="#{fileUploadView.handleFileUpload}"/>
+            </h:form>
+        </div>
+
+        <div class="card">
+            <h5>Auto &amp; Single &amp; allowTyes validation</h5>
+
+            <p>Use Case to demonstrate the integrity for multiple features.</p>
+
+            <h:form id="autoSingleValidation">
+                <p:fileUpload id="upload" value="#{fileUploadView.file}"
+                              mode="simple" skinSimple="true" auto="true"
+                              process="@this" update=":growl"
+                              listener="#{fileUploadView.handleFileUpload}">
+                    <p:validateFile allowTypes="/(\.|\/)(pdf)$/" sizeLimit="100"/>
+                </p:fileUpload>
+            </h:form>
+        </div>
+
+        <div class="card">
+            <h5>Auto &amp; Multiple</h5>
+
+            <p>Use Case to demonstrate the integrity for multiple features.</p>
+
+            <h:form id="autoMultiple">
+                <p:fileUpload id="upload" value="#{fileUploadView.files}"
+                              mode="simple" skinSimple="true" multiple="true" auto="true"
+                              process="@this" update=":growl"
+                              listener="#{fileUploadView.handleFilesUpload}"/>
+            </h:form>
+        </div>
+
+        <div class="card" jsf:id="dropzone">
+            <h5>Custom Drag&amp;Drop</h5>
+
+            <p>Per default, the FileUpload itself is the drop zone. In addition FileUpload supports a custom dropZone.</p>
+
+            <h:form>
+                <p:growl id="growl" showDetail="true"/>
+
+                <p:fileUpload listener="#{fileUploadView.handleFileUpload}"
+                              mode="simple"
+                              dropZone="@form:@parent"
+                              skinSimple="true"
+                              auto="true"
+                              update="@form">
+                    <p:validateFile allowTypes="/(\.|\/)(gif|jpeg|jpg|png)$/" sizeLimit="100000"/>
+                </p:fileUpload>
+            </h:form>
+        </div>
+    </ui:define>
+
+</ui:composition>
\ No newline at end of file
diff --git a/src/main/resources/META-INF/resources/ui/file/upload/single.xhtml b/src/main/resources/META-INF/resources/ui/file/upload/single.xhtml
deleted file mode 100644
index 793fd83db..000000000
--- a/src/main/resources/META-INF/resources/ui/file/upload/single.xhtml
+++ /dev/null
@@ -1,33 +0,0 @@
-<ui:composition xmlns="http://www.w3.org/1999/xhtml"
-                xmlns:ui="jakarta.faces.facelets"
-                xmlns:h="jakarta.faces.html"
-                xmlns:f="jakarta.faces.core"
-                xmlns:p="primefaces"
-                template="/template/template.xhtml">
-
-    <ui:define name="title">
-        FileUpload <span class="subitem">Single</span>
-    </ui:define>
-
-    <ui:define name="description">
-        Single mode allows only one file to be selected at a time from the native file dialog.
-    </ui:define>
-
-    <ui:param name="documentationLink" value="/components/fileupload"/>
-    <ui:param name="widgetLink" value="FileUpload-1"/>
-
-    <ui:define name="implementation">
-        <div class="card">
-            <h:form enctype="multipart/form-data">
-                <p:fileUpload listener="#{fileUploadView.handleFileUpload}" mode="advanced" dragDropSupport="false"
-                              update="messages" accept=".gif,.jpg,.jpeg,.png"
-                              onupload="return confirm('Are you sure?')">
-                        <p:validateFile sizeLimit="100000" fileLimit="3" allowTypes="/(\.|\/)(gif|jpeg|jpg|png)$/" contentType="true" />
-                </p:fileUpload>
-
-                <p:growl id="messages" showDetail="true"/>
-            </h:form>
-        </div>
-    </ui:define>
-
-</ui:composition>
diff --git a/src/main/resources/META-INF/resources/ui/file/upload/tooltips.xhtml b/src/main/resources/META-INF/resources/ui/file/upload/tooltips.xhtml
deleted file mode 100644
index 88fb68ae9..000000000
--- a/src/main/resources/META-INF/resources/ui/file/upload/tooltips.xhtml
+++ /dev/null
@@ -1,65 +0,0 @@
-<ui:composition xmlns="http://www.w3.org/1999/xhtml"
-                xmlns:ui="jakarta.faces.facelets"
-                xmlns:h="jakarta.faces.html"
-                xmlns:f="jakarta.faces.core"
-                xmlns:p="primefaces"
-                template="/template/template.xhtml">
-
-    <ui:define name="title">
-        FileUpload <span class="subitem">Tooltips</span>
-    </ui:define>
-
-    <ui:define name="description">
-        Tooltips can be attached to each one of FileUpload buttons in advanced mode using
-        <p:link href="https://primefaces.github.io/primefaces/12_0_0/#/core/searchexpression?id=primefaces-selectors-pfs">PrimeFaces Selectors</p:link>.
-        Moreover, you can use plain html browser native titles as well.
-    </ui:define>
-
-    <ui:param name="documentationLink" value="/components/fileupload"/>
-    <ui:param name="widgetLink" value="FileUpload-1"/>
-
-    <ui:define name="implementation">
-        <div class="card">
-            <h:form id="formId">
-
-                <p:fileUpload id="uploader1" mode="advanced" styleClass="block mb-5"/>
-
-                <p:outputPanel id="tooltipsPanel">
-
-                    <p:tooltip id="uploaderChooseFileBeforeUploadToolTip" 
-                               widgetVar="chooseWV" position="top"
-                               for="@(#formId\:uploader1 > .ui-fileupload-buttonbar > .ui-fileupload-choose)"
-                               value="Choose button tooltip"/>
-
-                    <p:tooltip id="uploaderUploadButtonToolTip"
-                               position="right"
-                               for="@(#formId\:uploader1 > .ui-fileupload-buttonbar > .ui-fileupload-upload)"
-                               value="Upload button tooltip" showEffect="clip"
-                               hideEffect="explode"/>
-
-                    <p:tooltip id="uploaderCancelButtonToolTip"
-                               position="bottom"
-                               for="@(#formId\:uploader1 > .ui-fileupload-buttonbar > .ui-fileupload-cancel)"
-                               value="Cancel button tooltip"/>
-
-                </p:outputPanel>
-
-              
-
-                <p:fileUpload id="uploader2" mode="advanced" styleClass="block mb-5"
-                              chooseButtonTitle="Choose button tooltip"
-                              uploadButtonTitle="Upload button tooltip"
-                              cancelButtonTitle="Cancel button tooltip"/>
-              
-                <p:fileUpload id="uploader3" mode="simple" skinSimple="true" styleClass="block mb-5"
-                              title="my custom title"/>
-
-         
-                <p:fileUpload id="uploader4" mode="simple" styleClass="block mb-5"
-                              title="my custom title"/>
-
-            </h:form>
-        </div>
-    </ui:define>
-
-</ui:composition>
diff --git a/src/main/resources/META-INF/resources/ui/input/calendar/calendar.xhtml b/src/main/resources/META-INF/resources/ui/input/calendar/calendar.xhtml
index d6d6ceefb..2e7f16f06 100644
--- a/src/main/resources/META-INF/resources/ui/input/calendar/calendar.xhtml
+++ b/src/main/resources/META-INF/resources/ui/input/calendar/calendar.xhtml
@@ -6,37 +6,6 @@
                 template="/template/template.xhtml">
 
     <ui:define name="head">
-        <script>
-            PrimeFaces.locales ['de'] = {
-                monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
-                monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
-                dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
-                dayNamesShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
-                dayNamesMin: ['S', 'M', 'D', 'M ', 'D', 'F ', 'S'],
-                weekHeader: 'Woche',
-                firstDay: 1,
-                isRTL: false,
-                showMonthAfterYear: false,
-                yearSuffix: '',
-                timeOnlyTitle: 'Nur Zeit',
-                timeText: 'Zeit',
-                hourText: 'Stunde',
-                minuteText: 'Minute',
-                secondText: 'Sekunde',
-                today: 'Aktuelles Datum',
-                ampm: false,
-                month: 'Monat',
-                week: 'Woche',
-                day: 'Tag',
-                allDayText: 'Ganzer Tag',
-                aria: {
-                   close: 'Schließen',
-                   previous: 'Zurück',
-                   next: 'Weiter',
-               }
-            };
-        </script>
-
         <style>
             .value {
                 font-weight: bold;
@@ -56,6 +25,8 @@
     <ui:param name="widgetLink" value="Calendar-1"/>
 
     <ui:define name="implementation">
+        <h:outputScript name="locales/locale-de.js" library="primefaces" target="head"/>
+        <h:outputScript name="locales/locale-es.js" library="primefaces" target="head"/>
         <div class="card">
             <h:form id="form">
                 <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true"/>
@@ -85,7 +56,7 @@
 
                     <p:outputLabel for="restricted" value="Restricted:"/>
                     <p:calendar id="restricted" value="#{calendarView.date6}" mindate="#{calendarView.minDate}"
-                                      maxdate="#{calendarView.maxDate}"/>
+                                maxdate="#{calendarView.maxDate}"/>
 
                     <p:outputLabel for="multi" value="Multiple:"/>
                     <p:calendar id="multi" value="#{calendarView.date7}" pages="3"/>
@@ -181,4 +152,4 @@
         </div>
     </ui:define>
 
-</ui:composition>
+</ui:composition>
\ No newline at end of file
diff --git a/src/main/resources/META-INF/resources/ui/input/calendar/calendarJava8.xhtml b/src/main/resources/META-INF/resources/ui/input/calendar/calendarJava8.xhtml
index d3f598973..27cef9aec 100644
--- a/src/main/resources/META-INF/resources/ui/input/calendar/calendarJava8.xhtml
+++ b/src/main/resources/META-INF/resources/ui/input/calendar/calendarJava8.xhtml
@@ -6,37 +6,6 @@
                 template="/template/template.xhtml">
 
     <ui:define name="head">
-        <script>
-            PrimeFaces.locales ['de'] = {
-                monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
-                monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
-                dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
-                dayNamesShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
-                dayNamesMin: ['S', 'M', 'D', 'M ', 'D', 'F ', 'S'],
-                weekHeader: 'Woche',
-                firstDay: 1,
-                isRTL: false,
-                showMonthAfterYear: false,
-                yearSuffix: '',
-                timeOnlyTitle: 'Nur Zeit',
-                timeText: 'Zeit',
-                hourText: 'Stunde',
-                minuteText: 'Minute',
-                secondText: 'Sekunde',
-                today: 'Aktuelles Datum',
-                ampm: false,
-                month: 'Monat',
-                week: 'Woche',
-                day: 'Tag',
-                allDayText: 'Ganzer Tag',
-                aria: {
-                   close: 'Schließen',
-                   previous: 'Zurück',
-                   next: 'Weiter',
-               }
-            };
-        </script>
-
         <style>
             .value {
                 font-weight: bold;
@@ -56,6 +25,8 @@
     <ui:param name="widgetLink" value="Calendar-1"/>
 
     <ui:define name="implementation">
+        <h:outputScript name="locales/locale-de.js" library="primefaces" target="head"/>
+        <h:outputScript name="locales/locale-es.js" library="primefaces" target="head"/>
         <div class="card">
             <h:form id="form">
                 <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true"/>
@@ -87,8 +58,9 @@
                                 pattern="dd.MM.yyyy"/>
 
                     <p:outputLabel for="restricted" value="Restricted:"/>
-                    <p:calendar id="restricted" value="#{calendarJava8View.date6}" mindate="#{calendarJava8View.minDate}"
-                                      maxdate="#{calendarJava8View.maxDate}" />
+                    <p:calendar id="restricted" value="#{calendarJava8View.date6}"
+                                mindate="#{calendarJava8View.minDate}"
+                                maxdate="#{calendarJava8View.maxDate}"/>
 
                     <p:outputLabel for="multi" value="Multiple:"/>
                     <p:calendar id="multi" value="#{calendarJava8View.date7}" pages="3"/>
@@ -185,4 +157,4 @@
         </div>
     </ui:define>
 
-</ui:composition>
+</ui:composition>
\ No newline at end of file
diff --git a/src/main/resources/META-INF/resources/ui/input/datepicker/datePicker.xhtml b/src/main/resources/META-INF/resources/ui/input/datepicker/datePicker.xhtml
index 0df2a8d8b..72896cdbd 100644
--- a/src/main/resources/META-INF/resources/ui/input/datepicker/datePicker.xhtml
+++ b/src/main/resources/META-INF/resources/ui/input/datepicker/datePicker.xhtml
@@ -1,74 +1,10 @@
 <ui:composition xmlns="http://www.w3.org/1999/xhtml"
-	xmlns:ui="jakarta.faces.facelets"
-	xmlns:h="jakarta.faces.html"
-	xmlns:f="jakarta.faces.core"
-	xmlns:p="primefaces" template="/template/template.xhtml">
-
-	<ui:define name="head">
-		<script>
-            PrimeFaces.locales['es'] = {
-                monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
-                monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
-                dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
-                dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
-                dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
-                weekHeader: 'Semana',
-                firstDay: 1,
-                isRTL: false,
-                showMonthAfterYear: false,
-                yearSuffix: '',
-                timeOnlyTitle: 'Sólo hora',
-                timeText: 'Tiempo',
-                hourText: 'Hora',
-                minuteText: 'Minuto',
-                secondText: 'Segundo',
-                millisecondText: 'Milisegundo',
-                ampm: false,
-                month: 'Mes',
-                week: 'Semana',
-                day: 'Día',
-                allDayText: 'Todo el día',
-                today: 'Hoy',
-                now: 'Ahora',
-                clear: 'Limpiar',
-                aria: {
-                   close: 'Cerrar',
-                   previous: 'Anterior',
-                   next: 'Siguiente',
-               }
-            };
-            PrimeFaces.locales ['de'] = {
-                monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
-                monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
-                dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
-                dayNamesShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
-                dayNamesMin: ['S', 'M', 'D', 'M ', 'D', 'F ', 'S'],
-                weekHeader: 'Woche',
-                firstDay: 1,
-                isRTL: false,
-                showMonthAfterYear: false,
-                yearSuffix: '',
-                timeOnlyTitle: 'Nur Zeit',
-                timeText: 'Zeit',
-                hourText: 'Stunde',
-                minuteText: 'Minute',
-                secondText: 'Sekunde',
-                today: 'Aktuelles Datum',
-                now: 'Jetzt',
-                ampm: false,
-                month: 'Monat',
-                week: 'Woche',
-                day: 'Tag',
-                allDayText: 'Ganzer Tag',
-                aria: {
-                   close: 'Schließen',
-                   previous: 'Zurück',
-                   next: 'Weiter',
-               }
-            };
-        </script>
+				xmlns:ui="jakarta.faces.facelets"
+				xmlns:h="jakarta.faces.html"
+				xmlns:p="primefaces" template="/template/template.xhtml">
 
-		<script>
+    <ui:define name="head">
+        <script>
             //<![CDATA[
             function dateTemplateFunc(date) {
                 return '<span style="background-color:' + ((date.day < 21 && date.day > 10) ? '#81C784' : 'inherit') + ';border-radius:50%;width: 2.5rem;height: 2.5rem;line-height: 2.5rem;display: flex;align-items: center;justify-content: center;">' + date.day + '</span>';
@@ -77,157 +13,174 @@
             //]]>
         </script>
 
-		<style>
-.value {
-	font-weight: bold;
-}
-</style>
-	</ui:define>
+        <style>
+            .value {
+                font-weight: bold;
+            }
+        </style>
+    </ui:define>
 
-	<ui:define name="title">
+    <ui:define name="title">
         DatePicker <span class="subitem">java.util.Date</span>
-	</ui:define>
+    </ui:define>
 
-	<ui:define name="description">
+    <ui:define name="description">
         DatePicker is an input component to select datetime.
     </ui:define>
 
-	<ui:param name="documentationLink" value="/components/datepicker" />
-	<ui:param name="widgetLink" value="DatePicker-1" />
-
-	<ui:define name="implementation">
-		<h:form id="form">
-			<div class="card">
-
-				<p:growl id="msgs" showDetail="true"
-					skipDetailIfEqualsSummary="true" />
-
-				<h5 class="mt-0">Popup</h5>
-				<div class="ui-fluid grid formgrid">
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="basic" value="Basic" />
-						<p:datePicker id="basic" value="#{calendarView.date}" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="multiselect" value="Multiple Selection" />
-						<p:datePicker id="multiselect" selectionMode="multiple"	value="#{calendarView.multi}" readonlyInput="true" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="range" value="Range Selection" />
-						<p:datePicker id="range" selectionMode="range" value="#{calendarView.range}" readonlyInput="true" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="navigator" value="Navigator" />
-						<p:datePicker id="navigator" value="#{calendarView.date2}" monthNavigator="true" yearNavigator="true" showWeek="true" showIcon="true" showOnFocus="false" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="month" value="Month Picker" />
-						<p:datePicker id="month" view="month" value="#{calendarView.date3}" pattern="MM/yyyy" yearNavigator="true" yearRange="2000:2030" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="touch" value="Touch UI" />
-						<p:datePicker id="touch" value="#{calendarView.date4}"	touchUI="true" showOtherMonths="true" autoDetectDisplay="false" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="dateTemplate" value="Date Template" />
-						<p:datePicker id="dateTemplate" value="#{calendarView.date5}" dateTemplate="dateTemplateFunc" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="disabledDD" value="Disabled Date/Day" />
-						<p:datePicker id="disabledDD" value="#{calendarView.date6}"	disabledDays="#{calendarView.invalidDays}"
-							disabledDates="#{calendarView.invalidDates}" readonlyInput="true" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="button" value="Button" />
-						<p:datePicker id="button" value="#{calendarView.date7}"	showIcon="true" showOnFocus="false"  />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="event" value="Select Event" />
-						<p:datePicker id="event" value="#{calendarView.date8}">
-							<p:ajax event="dateSelect"	listener="#{calendarView.onDateSelect}" update="msgs" />
-						</p:datePicker>
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="spanish" value="Spanish" />
-						<p:datePicker id="spanish" value="#{calendarView.date9}" locale="es" monthNavigator="true" pattern="yyyy-MMM-dd" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="german" value="German" />
-						<p:datePicker id="german" value="#{calendarView.dateDe}" locale="de" monthNavigator="true" pattern="dd.MM.yyyy" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="buttonbar" value="Button Bar" />
-						<p:datePicker id="buttonbar" value="#{calendarView.date10}"	showButtonBar="true" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="minmax" value="Min-Max" />
-						<p:datePicker id="minmax" value="#{calendarView.date11}" mindate="#{calendarView.minDate}"
-							maxdate="#{calendarView.maxDate}" readonlyInput="true" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="multi" value="Multiple Months" />
-						<p:datePicker id="multi" value="#{calendarView.date12}"	numberOfMonths="3" monthNavigator="true" yearNavigator="true" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="time" value="Time" />
-						<p:datePicker id="time" value="#{calendarView.date13}" showTime="true" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="timeMinMax" value="Time (Min-Max)" />
-						<p:datePicker id="timeMinMax" value="#{calendarView.date16}" showTime="true" mindate="#{calendarView.minDateTime}"
-							maxdate="#{calendarView.maxDateTime}" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="timeDe" value="Time (German)" />
-						<p:datePicker id="timeDe" value="#{calendarView.dateTimeDe}" showTime="true" locale="de" pattern="dd.MM.yyyy" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="timeonly" value="Time Only" />
-						<p:datePicker id="timeonly" value="#{calendarView.date14}"	timeOnly="true" pattern="HH:mm" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="timeonlyMinMax" value="Time Only (Min-Max)" />
-						<p:datePicker id="timeonlyMinMax" value="#{calendarView.date15}" timeOnly="true" pattern="HH:mm" mindate="#{calendarView.minTime}"
-							maxdate="#{calendarView.maxTime}" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="timeonlyMillis"
-							value="Time Only (Full Precision)" />
-						<p:datePicker id="timeonlyMillis" value="#{calendarView.date15}"
-							timeOnly="true" pattern="HH:mm:ss.SSS a" showSeconds="true"	showMilliseconds="true" hourFormat="12" />
-					</div>
-
-					<div class="field col-12 md:col-4">
-						<p:outputLabel for="enabledDates" value="Enabled Dates" />
-						<p:datePicker id="enabledDates" value="#{calendarView.date17}" enabledDates="#{calendarView.validDates}" readonlyInput="true"/>
-					</div>
-				</div>
-
-				<h5>Inline</h5>
-				<p:datePicker id="inline" value="#{calendarView.date1}"
-					inline="true" showTime="true" timeInput="true" />
-			</div>
-		</h:form>
-	</ui:define>
-
-</ui:composition>
+    <ui:param name="documentationLink" value="/components/datepicker"/>
+    <ui:param name="widgetLink" value="DatePicker-1"/>
+
+    <ui:define name="implementation">
+        <h:outputScript name="locales/locale-de.js" library="primefaces" target="head"/>
+        <h:outputScript name="locales/locale-es.js" library="primefaces" target="head"/>
+
+        <h:form id="form">
+            <div class="card">
+
+                <p:growl id="msgs" showDetail="true"
+                         skipDetailIfEqualsSummary="true"/>
+
+                <h5 class="mt-0">Popup</h5>
+                <div class="ui-fluid grid formgrid">
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="basic" value="Basic"/>
+                        <p:datePicker id="basic" value="#{calendarView.date}"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="multiselect" value="Multiple Selection"/>
+                        <p:datePicker id="multiselect" selectionMode="multiple" value="#{calendarView.multi}"
+                                      readonlyInput="true"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="range" value="Range Selection"/>
+                        <p:datePicker id="range" selectionMode="range" value="#{calendarView.range}"
+                                      readonlyInput="true"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="navigator" value="Navigator"/>
+                        <p:datePicker id="navigator" value="#{calendarView.date2}" monthNavigator="true"
+                                      yearNavigator="true" showWeek="true" showIcon="true" showOnFocus="false"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="month" value="Month Picker"/>
+                        <p:datePicker id="month" view="month" value="#{calendarView.date3}" pattern="MM/yyyy"
+                                      yearNavigator="true" yearRange="2000:2030"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="touch" value="Touch UI"/>
+                        <p:datePicker id="touch" value="#{calendarView.date4}" touchUI="true" showOtherMonths="true"
+                                      autoDetectDisplay="false"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="dateTemplate" value="Date Template"/>
+                        <p:datePicker id="dateTemplate" value="#{calendarView.date5}" dateTemplate="dateTemplateFunc"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="disabledDD" value="Disabled Date/Day"/>
+                        <p:datePicker id="disabledDD" value="#{calendarView.date6}"
+                                      disabledDays="#{calendarView.invalidDays}"
+                                      disabledDates="#{calendarView.invalidDates}" readonlyInput="true"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="button" value="Button"/>
+                        <p:datePicker id="button" value="#{calendarView.date7}" showIcon="true" showOnFocus="false"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="event" value="Select Event"/>
+                        <p:datePicker id="event" value="#{calendarView.date8}">
+                            <p:ajax event="dateSelect" listener="#{calendarView.onDateSelect}" update="msgs"/>
+                        </p:datePicker>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="spanish" value="Spanish"/>
+                        <p:datePicker id="spanish" value="#{calendarView.date9}" locale="es" monthNavigator="true"
+                                      pattern="yyyy-MMM-dd"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="german" value="German"/>
+                        <p:datePicker id="german" value="#{calendarView.dateDe}" locale="de" monthNavigator="true"
+                                      pattern="dd.MM.yyyy"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="buttonbar" value="Button Bar"/>
+                        <p:datePicker id="buttonbar" value="#{calendarView.date10}" showButtonBar="true"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="minmax" value="Min-Max"/>
+                        <p:datePicker id="minmax" value="#{calendarView.date11}" mindate="#{calendarView.minDate}"
+                                      maxdate="#{calendarView.maxDate}" readonlyInput="true"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="multi" value="Multiple Months"/>
+                        <p:datePicker id="multi" value="#{calendarView.date12}" numberOfMonths="3" monthNavigator="true"
+                                      yearNavigator="true"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="time" value="Time"/>
+                        <p:datePicker id="time" value="#{calendarView.date13}" showTime="true"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="timeMinMax" value="Time (Min-Max)"/>
+                        <p:datePicker id="timeMinMax" value="#{calendarView.date16}" showTime="true"
+                                      mindate="#{calendarView.minDateTime}"
+                                      maxdate="#{calendarView.maxDateTime}"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="timeDe" value="Time (German)"/>
+                        <p:datePicker id="timeDe" value="#{calendarView.dateTimeDe}" showTime="true" locale="de"
+                                      pattern="dd.MM.yyyy"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="timeonly" value="Time Only"/>
+                        <p:datePicker id="timeonly" value="#{calendarView.date14}" timeOnly="true" pattern="HH:mm"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="timeonlyMinMax" value="Time Only (Min-Max)"/>
+                        <p:datePicker id="timeonlyMinMax" value="#{calendarView.date15}" timeOnly="true" pattern="HH:mm"
+                                      mindate="#{calendarView.minTime}"
+                                      maxdate="#{calendarView.maxTime}"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="timeonlyMillis"
+                                       value="Time Only (Full Precision)"/>
+                        <p:datePicker id="timeonlyMillis" value="#{calendarView.date15}"
+                                      timeOnly="true" pattern="HH:mm:ss.SSS a" showSeconds="true"
+                                      showMilliseconds="true" hourFormat="12"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="enabledDates" value="Enabled Dates"/>
+                        <p:datePicker id="enabledDates" value="#{calendarView.date17}"
+                                      enabledDates="#{calendarView.validDates}" readonlyInput="true"/>
+                    </div>
+                </div>
+
+                <h5>Inline</h5>
+                <p:datePicker id="inline" value="#{calendarView.date1}"
+                              inline="true" showTime="true" timeInput="true"/>
+            </div>
+        </h:form>
+    </ui:define>
+
+</ui:composition>
\ No newline at end of file
diff --git a/src/main/resources/META-INF/resources/ui/input/datepicker/datePickerJava8.xhtml b/src/main/resources/META-INF/resources/ui/input/datepicker/datePickerJava8.xhtml
index 1b04827c9..d461dfb21 100644
--- a/src/main/resources/META-INF/resources/ui/input/datepicker/datePickerJava8.xhtml
+++ b/src/main/resources/META-INF/resources/ui/input/datepicker/datePickerJava8.xhtml
@@ -1,14 +1,8 @@
-<ui:composition xmlns="http://www.w3.org/1999/xhtml"
-                xmlns:ui="jakarta.faces.facelets"
-                xmlns:h="jakarta.faces.html"
+<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="jakarta.faces.facelets" xmlns:h="jakarta.faces.html"
                 xmlns:f="jakarta.faces.core"
-                xmlns:p="primefaces"
-                template="/template/template.xhtml">
+                xmlns:p="primefaces" template="/template/template.xhtml">
 
     <ui:define name="head">
-        <h:outputScript name="locales/locale-de.js" library="primefaces"/>
-        <h:outputScript name="locales/locale-es.js" library="primefaces"/>
-
         <script>
             //<![CDATA[
             function dateTemplateFunc(date) {
@@ -31,6 +25,9 @@
     <ui:param name="widgetLink" value="DatePicker-1"/>
 
     <ui:define name="implementation">
+        <h:outputScript name="locales/locale-de.js" library="primefaces" target="head"/>
+        <h:outputScript name="locales/locale-es.js" library="primefaces" target="head"/>
+
         <h:form id="form">
             <div class="card">
 
@@ -55,8 +52,7 @@
 
                     <div class="field col-12 md:col-4">
                         <p:outputLabel for="multiselect" value="Multiple Selection"/>
-                        <p:datePicker id="multiselect" selectionMode="multiple"
-                                      value="#{calendarJava8View.multi}"
+                        <p:datePicker id="multiselect" selectionMode="multiple" value="#{calendarJava8View.multi}"
                                       readonlyInput="true"/>
                     </div>
 
@@ -68,10 +64,8 @@
 
                     <div class="field col-12 md:col-4">
                         <p:outputLabel for="navigator" value="Navigator"/>
-                        <p:datePicker id="navigator" value="#{calendarJava8View.date2}"
-                                      monthNavigator="true"
-                                      yearNavigator="true"
-                                      showWeek="true" showIcon="true" showOnFocus="false"/>
+                        <p:datePicker id="navigator" value="#{calendarJava8View.date2}" monthNavigator="true"
+                                      yearNavigator="true" showWeek="true" showLongMonthNames="true"/>
                     </div>
 
                     <div class="field col-12 md:col-4">
@@ -80,16 +74,17 @@
                     </div>
 
                     <div class="field col-12 md:col-4">
-                        <p:outputLabel for="month" value="Month Picker"/>
-                        <p:datePicker id="month" view="month" value="#{calendarJava8View.date3}"
-                                      pattern="MM/yyyy"
-                                      yearNavigator="true" yearRange="2000:2030"/>
+                        <p:outputLabel for="month" value="Month Picker (Long Month Names)"/>
+                        <p:datePicker id="month" view="month" value="#{calendarJava8View.date3}" pattern="MM/yyyy"
+                                      yearNavigator="true" yearRange="2000:2030" showLongMonthNames="true"/>
                     </div>
 
                     <div class="field col-12 md:col-4">
-                        <p:outputLabel for="yearMonth" value="Month Picker (java.time.YearMonth)"/>
+                        <p:outputLabel for="yearMonth"
+                                       value="Month Picker (java.time.YearMonth with Short Month Names)"/>
                         <p:datePicker id="yearMonth" view="month" value="#{calendarJava8View.yearMonth}"
-                                      pattern="MM/yyyy" yearNavigator="true" yearRange="2000:2030"/>
+                                      pattern="MM/yyyy" yearNavigator="true"
+                                      yearRange="2000:2030"/>
                     </div>
 
                     <div class="field col-12 md:col-4">
@@ -126,21 +121,21 @@
                     <div class="field col-12 md:col-4">
                         <p:outputLabel for="event" value="Select Event"/>
                         <p:datePicker id="event" value="#{calendarJava8View.date8}">
-                            <p:ajax event="dateSelect" listener="#{calendarJava8View.onDateSelect}"
-                                    update="msgs"/>
+                            <p:ajax event="dateSelect" listener="#{calendarJava8View.onDateSelect}" update="msgs"/>
                         </p:datePicker>
                     </div>
 
                     <div class="field col-12 md:col-4">
                         <p:outputLabel for="spanish" value="Spanish"/>
-                        <p:datePicker id="spanish" value="#{calendarJava8View.date9}" locale="es"
-                                      monthNavigator="true" pattern="yyyy-MMM-dd"/>
+                        <p:datePicker id="spanish" value="#{calendarJava8View.date9}" locale="es" monthNavigator="true"
+                                      showLongMonthNames="true" pattern="yyyy-MMM-dd"/>
                     </div>
 
                     <div class="field col-12 md:col-4">
                         <p:outputLabel for="german" value="German"/>
-                        <p:datePicker id="german" widgetVar="german" value="#{calendarJava8View.dateDe}"
-                                      locale="de" monthNavigator="true" pattern="dd.MM.yyyy"/>
+                        <p:datePicker id="german" widgetVar="german" value="#{calendarJava8View.dateDe}" locale="de"
+                                      monthNavigator="true" showLongMonthNames="true"
+                                      pattern="dd.MM.yyyy"/>
                     </div>
 
                     <div class="field col-12 md:col-4">
@@ -152,8 +147,7 @@
                         <p:outputLabel for="minmax" value="Min-Max"/>
                         <p:datePicker id="minmax" value="#{calendarJava8View.date11}"
                                       mindate="#{calendarJava8View.minDate}"
-                                      maxdate="#{calendarJava8View.maxDate}"
-                                      readonlyInput="true"/>
+                                      maxdate="#{calendarJava8View.maxDate}" readonlyInput="true"/>
                     </div>
 
                     <div class="field col-12 md:col-4">
@@ -180,8 +174,7 @@
                     <div class="field col-12 md:col-4">
                         <p:outputLabel for="time1" value="Time (with Select Event)"/>
                         <p:datePicker id="time1" value="#{calendarJava8View.dateTime1}" showButtonBar="true">
-                            <p:ajax event="dateSelect" listener="#{calendarJava8View.onDateTimeSelect}"
-                                    update="msgs"/>
+                            <p:ajax event="dateSelect" listener="#{calendarJava8View.onDateTimeSelect}" update="msgs"/>
                         </p:datePicker>
                     </div>
 
@@ -189,36 +182,38 @@
                         <p:outputLabel for="time3" value="Time (Min-Max)"/>
                         <p:datePicker id="time3" value="#{calendarJava8View.dateTime3}"
                                       mindate="#{calendarJava8View.minDateTime}"
-                                      maxdate="#{calendarJava8View.maxDateTime}"
-                                      showButtonBar="true"
-                        />
+                                      maxdate="#{calendarJava8View.maxDateTime}" showButtonBar="true"/>
                     </div>
 
                     <div class="field col-12 md:col-4">
                         <p:outputLabel for="time4" value="Time (Min-Max; preset value)"/>
                         <p:datePicker id="time4" value="#{calendarJava8View.dateTime4}"
                                       mindate="#{calendarJava8View.minDateTime}"
-                                      maxdate="#{calendarJava8View.maxDateTime}"
-                        />
+                                      maxdate="#{calendarJava8View.maxDateTime}"/>
                     </div>
 
                     <div class="field col-12 md:col-4">
                         <p:outputLabel for="time5" value="Time (with seconds)"/>
-                        <p:datePicker id="time5" value="#{calendarJava8View.dateTime5}"
-                                      showSeconds="true"/>
+                        <p:datePicker id="time5" value="#{calendarJava8View.dateTime5}" showSeconds="true"
+                                      showButtonBar="true" timeZone="UTC"/>
+                    </div>
+
+                    <div class="field col-12 md:col-4">
+                        <p:outputLabel for="timeDefaults" value="Time (with defaults)"/>
+                        <p:datePicker id="timeDefaults" value="#{calendarJava8View.dateTime5}" showSeconds="true"
+                                      showMilliseconds="true" defaultHour="12" defaultMinute="30" defaultSecond="5"
+                                      defaultMillisecond="25" timeZone="UTC"/>
                     </div>
 
                     <div class="field col-12 md:col-4">
                         <p:outputLabel for="timeDe" value="Time (German)"/>
-                        <p:datePicker id="timeDe" value="#{calendarJava8View.dateTimeDe}"
-                                      locale="de" pattern="dd.MM.yyyy"
-                        />
+                        <p:datePicker id="timeDe" value="#{calendarJava8View.dateTimeDe}" locale="de"
+                                      pattern="dd.MM.yyyy"/>
                     </div>
 
                     <div class="field col-12 md:col-4">
                         <p:outputLabel for="time2" value="Time (Timezone GMT+8)"/>
-                        <p:datePicker id="time2" value="#{calendarJava8View.dateTime2}"
-                                      timeZone="GMT+8"/>
+                        <p:datePicker id="time2" value="#{calendarJava8View.dateTime2}" timeZone="GMT+8"/>
                     </div>
 
                     <div class="field col-12 md:col-4">
@@ -238,8 +233,8 @@
                 <div class="ui-fluid grid formgrid">
                     <div class="field col-12 md:col-4">
                         <p:outputLabel for="timeonly" value="Time Only (HH:mm)"/>
-                        <p:datePicker id="timeonly" value="#{calendarJava8View.time1}"
-                                      pattern="HH:mm" showButtonBar="true"/>
+                        <p:datePicker id="timeonly" value="#{calendarJava8View.time1}" pattern="HH:mm"
+                                      showButtonBar="true" timeZone="UTC"/>
                     </div>
 
                     <div class="field col-12 md:col-4">
@@ -247,8 +242,7 @@
                         <p:outputPanel>
                             <p:datePicker id="timeonlyMinMax" value="#{calendarJava8View.time3}"
                                           mindate="#{calendarJava8View.minTime}"
-                                          maxdate="#{calendarJava8View.maxTime}"
-                            />
+                                          maxdate="#{calendarJava8View.maxTime}"/>
                             (between <h:outputText value="#{calendarJava8View.minTime}"></h:outputText> and
                             <h:outputText value="#{calendarJava8View.maxTime}"></h:outputText>)
                         </p:outputPanel>
@@ -259,8 +253,7 @@
                         <p:outputPanel>
                             <p:datePicker id="timeonlyMinMax2" value="#{calendarJava8View.time4}"
                                           mindate="#{calendarJava8View.minTime}"
-                                          maxdate="#{calendarJava8View.maxTime}"
-                            />
+                                          maxdate="#{calendarJava8View.maxTime}"/>
                             (between <h:outputText value="#{calendarJava8View.minTime}"></h:outputText> and
                             <h:outputText value="#{calendarJava8View.maxTime}"></h:outputText>)
                         </p:outputPanel>
@@ -268,16 +261,14 @@
 
                     <div class="field col-12 md:col-4">
                         <p:outputLabel for="timeonlySeconds" value="Time Only (HH:mm:ss)"/>
-                        <p:datePicker id="timeonlySeconds" value="#{calendarJava8View.time5}"
-                                      showSeconds="true" pattern="HH:mm:ss"
-                        />
+                        <p:datePicker id="timeonlySeconds" value="#{calendarJava8View.time5}" showSeconds="true"
+                                      pattern="HH:mm:ss"/>
                     </div>
 
                     <div class="field col-12 md:col-4">
                         <p:outputLabel for="timeonly12" value="Time Only (AM/PM)"/>
-                        <p:datePicker id="timeonly12" value="#{calendarJava8View.time6}"
-                                      hourFormat="12" pattern="HH:mm"
-                        />
+                        <p:datePicker id="timeonly12" value="#{calendarJava8View.time6}" hourFormat="12"
+                                      pattern="HH:mm"/>
                     </div>
 
                     <div class="field col-12 md:col-4">
@@ -287,10 +278,9 @@
 
                     <div class="field col-12 md:col-4">
                         <p:outputLabel for="timeonlyMilliseconds" value="Time Only (HH:mm:ss.SSS a)"/>
-                        <p:datePicker id="timeonlyMilliseconds" value="#{calendarJava8View.time9}"
-                                      showSeconds="true" showMilliseconds="true" pattern="HH:mm:ss.SSS a"
-                                      hourFormat="12"
-                                      showButtonBar="true"/>
+                        <p:datePicker id="timeonlyMilliseconds" value="#{calendarJava8View.time9}" showSeconds="true"
+                                      showMilliseconds="true"
+                                      pattern="HH:mm:ss.SSS a" hourFormat="12" showButtonBar="true"/>
                     </div>
                 </div>
             </div>
diff --git a/src/main/resources/META-INF/resources/ui/message/growl.xhtml b/src/main/resources/META-INF/resources/ui/message/growl.xhtml
index 755f5d8ba..fef4b8eb2 100644
--- a/src/main/resources/META-INF/resources/ui/message/growl.xhtml
+++ b/src/main/resources/META-INF/resources/ui/message/growl.xhtml
@@ -36,4 +36,4 @@
         </div>
     </ui:define>
 
-</ui:composition>
+</ui:composition>
\ No newline at end of file
diff --git a/src/main/resources/META-INF/resources/ui/message/messages.xhtml b/src/main/resources/META-INF/resources/ui/message/messages.xhtml
index 2120f0105..196357209 100644
--- a/src/main/resources/META-INF/resources/ui/message/messages.xhtml
+++ b/src/main/resources/META-INF/resources/ui/message/messages.xhtml
@@ -20,15 +20,16 @@
             <p:tooltip/>
 
             <h:form>
-                <p:messages id="messages" showDetail="true" closable="true">
-                    <p:autoUpdate/>
-                </p:messages>
+                <p:messages id="messages" showDetail="true" closable="true"/>
 
                 <h5 class="mt-0">Severities</h5>
-                <p:commandButton value="Info" action="#{messagesView.info}" styleClass="mr-2"/>
-                <p:commandButton value="Warn" action="#{messagesView.warn}" styleClass="mr-2 ui-button-warning"/>
-                <p:commandButton value="Error" action="#{messagesView.error}" styleClass="mr-2 ui-button-danger"/>
-                <p:commandButton value="Fatal" action="#{messagesView.fatal}" styleClass="mr-2 ui-button-help"/>
+                <p:commandButton value="Info" action="#{messagesView.info}" styleClass="mr-2" update="@form"/>
+                <p:commandButton value="Warn" action="#{messagesView.warn}" styleClass="mr-2 ui-button-warning"
+                                 update="@form"/>
+                <p:commandButton value="Error" action="#{messagesView.error}" styleClass="mr-2 ui-button-danger"
+                                 update="@form"/>
+                <p:commandButton value="Fatal" action="#{messagesView.fatal}" styleClass="mr-2 ui-button-help"
+                                 update="@form"/>
             </h:form>
         </div>
 
@@ -36,21 +37,21 @@
             <h:form>
                 <h5>Validation</h5>
                 <h:panelGrid id="grid" columns="3" cellpadding="7">
-                    <p:outputLabel for="default" value="Default:"/>
+                    <p:outputLabel for="@next" value="Default:"/>
                     <p:inputText id="default" required="true"/>
-                    <p:message for="default"/>
+                    <p:message for="@previous"/>
 
-                    <p:outputLabel for="txt" value="Text:"/>
+                    <p:outputLabel for="@next" value="Text:"/>
                     <p:inputText id="txt" required="true"/>
-                    <p:message for="txt" display="text"/>
+                    <p:message for="@previous" display="text"/>
 
-                    <p:outputLabel for="icon" value="Icon:"/>
+                    <p:outputLabel for="@next" value="Icon:"/>
                     <p:inputText id="icon" required="true"/>
-                    <p:message for="icon" display="icon"/>
+                    <p:message for="@previous" display="icon"/>
 
-                    <p:outputLabel for="tt" value="Tooltip:"/>
+                    <p:outputLabel for="@next" value="Tooltip:"/>
                     <p:inputText id="tt" required="true"/>
-                    <p:message for="tt" display="tooltip"/>
+                    <p:message for="@previous" display="tooltip"/>
                 </h:panelGrid>
 
                 <p:commandButton id="submitButton" value="Submit" update="grid" styleClass="mt-3"/>
diff --git a/src/main/resources/META-INF/resources/ui/message/staticMessage.xhtml b/src/main/resources/META-INF/resources/ui/message/staticMessage.xhtml
index 50a80e078..02c62e5af 100644
--- a/src/main/resources/META-INF/resources/ui/message/staticMessage.xhtml
+++ b/src/main/resources/META-INF/resources/ui/message/staticMessage.xhtml
@@ -1,7 +1,5 @@
 <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:ui="jakarta.faces.facelets"
-                xmlns:h="jakarta.faces.html"
-                xmlns:f="jakarta.faces.core"
                 xmlns:p="primefaces"
                 template="/template/template.xhtml">
 
@@ -22,6 +20,9 @@
         <div class="card">
             <h5>Basic</h5>
             <div class="grid">
+                <div class="col-12 md:col-4">
+                    <p:staticMessage severity="success" summary="SUCCESS" detail="Message Content" style="width: 100%"/>
+                </div>
                 <div class="col-12 md:col-4">
                     <p:staticMessage severity="info" summary="INFO" detail="Message Content" style="width: 100%"/>
                 </div>
@@ -31,6 +32,9 @@
                 <div class="col-12 md:col-4">
                     <p:staticMessage severity="error" summary="ERROR" detail="Message Content" style="width: 100%"/>
                 </div>
+                <div class="col-12 md:col-4">
+                    <p:staticMessage severity="fatal" summary="FATAL" detail="Message Content" style="width: 100%"/>
+                </div>
             </div>
 
             <h5>Closable</h5>
@@ -43,4 +47,4 @@
 
     </ui:define>
 
-</ui:composition>
+</ui:composition>
\ No newline at end of file
diff --git a/src/main/resources/META-INF/resources/ui/misc/feedReader.xhtml b/src/main/resources/META-INF/resources/ui/misc/feedReader.xhtml
index 4531aa609..cfc58ece2 100644
--- a/src/main/resources/META-INF/resources/ui/misc/feedReader.xhtml
+++ b/src/main/resources/META-INF/resources/ui/misc/feedReader.xhtml
@@ -10,7 +10,7 @@
     </ui:define>
 
     <ui:define name="description">
-        FeedReader retrieves and displays content from a feed.
+        FeedReader retrieves and displays content from an RSS, Atom, or Itunes Podcast feed.
     </ui:define>
 
     <ui:param name="documentationLink" value="/components/feedreader"/>
@@ -19,11 +19,11 @@
         <div class="card">
             <p:feedReader value="https://www.nasa.gov/rss/dyn/breaking_news.rss" var="feed">
                 <div class="p-3">
-                    <h:outputText value="#{feed.title}" styleClass="font-bold block" />
-                    <h:outputText value="#{feed.description.value}" escape="false"/>
+                    <h:outputText value="#{feed.title}" styleClass="font-bold block"/>
+                    <h:outputText value="#{feed.description}" escape="false"/>
                     <p:divider/>
                 </div>
-                
+
                 <f:facet name="error">
                     <h:outputText value="Error reading RSS Feed!!!" style="color:red;"/>
                 </f:facet>
@@ -31,4 +31,4 @@
         </div>
     </ui:define>
 
-</ui:composition>
+</ui:composition>
\ No newline at end of file
diff --git a/src/main/resources/META-INF/resources/ui/multimedia/barcode.xhtml b/src/main/resources/META-INF/resources/ui/multimedia/barcode.xhtml
index 518241d60..16905a003 100644
--- a/src/main/resources/META-INF/resources/ui/multimedia/barcode.xhtml
+++ b/src/main/resources/META-INF/resources/ui/multimedia/barcode.xhtml
@@ -1,7 +1,6 @@
 <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:ui="jakarta.faces.facelets"
                 xmlns:h="jakarta.faces.html"
-                xmlns:f="jakarta.faces.core"
                 xmlns:p="primefaces"
                 template="/template/template.xhtml">
 
@@ -10,13 +9,14 @@
     </ui:define>
 
     <ui:define name="description">
-        Barcode component offers the capability to create diverse barcode types with <b>Barcode4j</b> in both PNG and SVG formats. For browsers lacking SVG support, the component automatically defaults to PNG format.
-    
+        Barcode component offers the capability to create diverse barcode types with
+        <b>Okapi</b> in both PNG and SVG formats. For browsers lacking SVG support, the component automatically defaults to PNG format.
+
         <pre class="language-xml"><code>
             &lt;dependency&gt;
-               &lt;groupId>org.primefaces.extensions&lt;/groupId&gt;
-               &lt;artifactId>barcode4j-light&lt;/artifactId&gt;
-               &lt;version>2.3.0&lt;/version&gt;
+               &lt;groupId>uk.org.okapibarcode&lt;/groupId&gt;
+               &lt;artifactId>okapibarcode&lt;/artifactId&gt;
+               &lt;version>0.4.9&lt;/version&gt;
             &lt;/dependency&gt;
             </code></pre>
     </ui:define>
@@ -30,7 +30,7 @@
                 <p:barcode value="0123456789" type="int2of5"/>
 
                 <h:outputText value="Codabar"/>
-                <p:barcode value="0123456789" type="codabar"/>
+                <p:barcode value="A123456B" type="codabar"/>
 
                 <h:outputText value="Code39"/>
                 <p:barcode value="0123456789" type="code39"/>
@@ -39,25 +39,25 @@
                 <p:barcode value="0123456789" type="code128"/>
 
                 <h:outputText value="EAN-8"/>
-                <p:barcode value="20123451" type="ean8"/>
+                <p:barcode value="1234567" type="ean8"/>
 
                 <h:outputText value="EAN-13"/>
-                <p:barcode value="0123456789012" type="ean13"/>
+                <p:barcode value="123456789012+12345" type="ean13"/>
 
                 <h:outputText value="UPC-A (PNG)"/>
                 <p:barcode value="01234567895" type="upca" format="png"/>
 
                 <h:outputText value="UPC-E (Vertical)"/>
-                <p:barcode value="01234133" type="upce" orientation="90"/>
+                <p:barcode value="0123457" type="upce" orientation="90"/>
 
                 <h:outputText value="PDF417"/>
                 <p:barcode value="0123456789" type="pdf417"/>
 
                 <h:outputText value="DataMatrix"/>
-                <p:barcode value="0123456789" type="datamatrix"/>
+                <p:barcode value="0123456789" type="datamatrix" magnification="3.0"/>
 
                 <h:outputText value="Postnet"/>
-                <p:barcode value="0123456789" type="postnet"/>
+                <p:barcode value="0123456789" type="postnet" magnification="3.0"/>
 
                 <h:outputText value="QR"/>
                 <p:barcode value="0123456789" type="qr" width="125" height="125"/>
@@ -65,4 +65,4 @@
         </div>
     </ui:define>
 
-</ui:composition>
+</ui:composition>
\ No newline at end of file
diff --git a/src/main/resources/META-INF/resources/ui/multimedia/qrcode.xhtml b/src/main/resources/META-INF/resources/ui/multimedia/qrcode.xhtml
index 6e36658dd..54bf62faa 100644
--- a/src/main/resources/META-INF/resources/ui/multimedia/qrcode.xhtml
+++ b/src/main/resources/META-INF/resources/ui/multimedia/qrcode.xhtml
@@ -1,7 +1,6 @@
 <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:ui="jakarta.faces.facelets"
                 xmlns:h="jakarta.faces.html"
-                xmlns:f="jakarta.faces.core"
                 xmlns:p="primefaces"
                 template="/template/template.xhtml">
 
@@ -10,13 +9,14 @@
     </ui:define>
 
     <ui:define name="description">
-        QR code (quick-response code) is a type of two-dimensional matrix barcode and can be generated using the <b>QRCodeGen</b> library.
+        QR code (quick-response code) is a type of two-dimensional matrix barcode and can be generated using the
+        <b>Okapi</b> library.
 
         <pre class="language-xml"><code>
             &lt;dependency&gt;
-               &lt;groupId>io.nayuki&lt;/groupId&gt;
-               &lt;artifactId>qrcodegen&lt;/artifactId&gt;
-               &lt;version>1.8.0&lt;/version&gt;
+               &lt;groupId>uk.org.okapibarcode&lt;/groupId&gt;
+               &lt;artifactId>okapibarcode&lt;/artifactId&gt;
+               &lt;version>0.4.9&lt;/version&gt;
             &lt;/dependency&gt;
             </code></pre>
     </ui:define>
@@ -32,4 +32,4 @@
         </div>
     </ui:define>
 
-</ui:composition>
+</ui:composition>
\ No newline at end of file