New version. Add Material UI implementation with theme customization, about dialog, and news system

components-wiki/figures/textfield/theming-filled.html

@@ -0,0 +1,22 @@
+<div class="figure-wrapper">
+  <style>
+    figure.themed {
+      background-color: #f4fbfa;
+    }
+    figure.themed.filled {
+      --md-filled-text-field-container-shape: 0px;
+      --md-sys-typescale-body-large: 400 1rem system-ui;
+      --md-sys-color-primary: #006a6a;
+      --md-sys-color-surface-container-highest: #e0e3e2;
+      --md-filled-text-field-label-text-color: #3f4948;
+      --md-filled-text-field-input-text-color: #161d1d;
+    }
+  </style>
+  <figure
+    class="themed filled"
+    aria-label="A filled text field with the label filled themed to a greenish color"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-filled-text-field label="Filled" value="Value"> </md-filled-text-field>
+  </figure>
+</div>

components-wiki/figures/textfield/theming-outlined.html

@@ -0,0 +1,18 @@
+<div class="figure-wrapper">
+  <style>
+    figure.themed.outlined {
+      --md-outlined-text-field-container-shape: 0px;
+      --md-sys-typescale-body-large: 400 1rem system-ui;
+      --md-sys-color-primary: #006a6a;
+      --md-outlined-text-field-label-text-color: #3f4948;
+      --md-outlined-text-field-input-text-color: #161d1d;
+    }
+  </style>
+  <figure
+    class="themed outlined"
+    aria-label="An outlined text field with the label outlined themed to a greenish color"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-outlined-text-field label="Outlined" value="Value"></md-outlined-text-field>
+  </figure>
+</div>

components-wiki/figures/textfield/usage-char-counter.html

@@ -0,0 +1,8 @@
+<div class="figure-wrapper">
+  <figure
+    aria-label="An outlined textfield with a floating label that says Title and a filled value that says Short and the text 5 / 10 under the field at the end"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-outlined-text-field label="Title" value="Short" maxlength="10"></md-outlined-text-field>
+  </figure>
+</div>

components-wiki/figures/textfield/usage-icons.html

@@ -0,0 +1,19 @@
+<div class="figure-wrapper">
+  <figure
+    aria-label="Three outlined textfields next to each other the first has a search icon at the start the label Search Messages, the second a label that says Password and an eye icon toggle button at the end, and a red, visually errored outlined textfield with the label Username with an exclamation icon at the end and helper error text under the field that says Username not available"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-outlined-text-field placeholder="Search for messages" has-leading-icon>
+      <md-icon slot="leading-icon">search</md-icon>
+    </md-outlined-text-field>
+    <md-outlined-text-field label="Password" type="password" has-trailing-icon>
+      <md-icon-button toggle slot="trailing-icon">
+        <md-icon>visibility</md-icon>
+        <md-icon slot="selected">visibility_off</md-icon>
+      </md-icon-button>
+    </md-outlined-text-field>
+    <md-outlined-text-field label="Username" error error-text="Username not available" has-trailing-icon>
+      <md-icon slot="trailing-icon">error</md-icon>
+    </md-outlined-text-field>
+  </figure>
+</div>

components-wiki/figures/textfield/usage-label.html

@@ -0,0 +1,11 @@
+<div class="figure-wrapper">
+  <figure
+    aria-label="Three outlined textfields next to each other. the first has a label of Favorite food, the second one a placeholder of email@domain.com and there is a label that says First name and an empty outlined textfield next to it"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-outlined-text-field label="Favorite food"></md-outlined-text-field>
+    <md-outlined-text-field placeholder="email@domain.com"></md-outlined-text-field>
+    <div>First name</div>
+    <md-outlined-text-field aria-label="First name"></md-outlined-text-field>
+  </figure>
+</div>

components-wiki/figures/textfield/usage-prefix.html

@@ -0,0 +1,14 @@
+<div class="figure-wrapper textarea">
+  <figure
+    aria-label="An outlined textfield with a floating label that says Dollar amount, a prefix dollar sign, the number zero as a value and a suffix of decimal zero zero at the end of the field"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-outlined-text-field
+      label="Dollar amount"
+      type="number"
+      value="0"
+      prefix-text="$"
+      suffix-text=".00"
+    ></md-outlined-text-field>
+  </figure>
+</div>

components-wiki/figures/textfield/usage-supporting-text.html

@@ -0,0 +1,17 @@
+<div class="figure-wrapper">
+  <figure
+    aria-label="Two filled fields next to each other. The first has a label that says comments and supporting text under the field that says Provide comments for the issue. The second field has a label of Name with an asterisk and supporting text under the field that has an asterisk followed by the word required"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-filled-text-field
+      label="Comments"
+      supporting-text="Provide comments for the issue"
+    ></md-filled-text-field>
+    <md-filled-text-field
+      label="Name"
+      required
+      supporting-text="*required"
+      error-text="Please fill out this field"
+    ></md-filled-text-field>
+  </figure>
+</div>

components-wiki/figures/textfield/usage-textarea.html

@@ -0,0 +1,13 @@
+<div class="figure-wrapper textarea">
+  <figure
+    aria-label="A filled textarea that is vertically larger and has a label that says Vertical resize"
+    style="padding-block: 16px; gap: 16px"
+  >
+  <style>
+    .figure-wrapper.textarea md-filled-text-field {
+      resize: vertical;
+    }
+  </style>
+  <md-filled-text-field type="textarea" label="Vertical resize" rows="3"></md-filled-text-field>
+  </figure>
+</div>

components-wiki/figures/textfield/usage-type.html

@@ -0,0 +1,9 @@
+<div class="figure-wrapper">
+  <figure
+    aria-label="Two filled textfields next to each other. The first has a label of Username and the outlined one has a label of Password"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-filled-text-field label="Username" type="email"></md-filled-text-field>
+    <md-filled-text-field label="Password" type="password"></md-filled-text-field>
+  </figure>
+</div>

components-wiki/figures/textfield/usage.html

@@ -0,0 +1,9 @@
+<div class="figure-wrapper">
+  <figure
+    aria-label="A filled textfield next to an outlined textfield. Both have a value of Value prefilled"
+    style="padding-block: 16px; gap: 16px"
+  >
+    <md-filled-text-field label="Label" value="Value"></md-filled-text-field>
+    <md-outlined-text-field label="Label" value="Value"></md-outlined-text-field>
+  </figure>
+</div>